From 8168ea47b3503b41b4e0db6576c05d28d01760b4 Mon Sep 17 00:00:00 2001
From: LofiSu <lofisuchat@gmail.com>
Date: Mon, 9 Feb 2026 12:48:06 +0800
Subject: [PATCH] chore(frontend): remove unused Citation UI components from
 inline-citation

- Remove InlineCitation, InlineCitationText, InlineCitationCardTrigger
- Remove InlineCitationCarousel and all Carousel subcomponents (Content, Item, Header, Index, Prev, Next)
- Remove InlineCitationQuote
- Drop Carousel/carousel and ArrowLeft/ArrowRight icon imports; keep only CitationLink, CitationAwareLink, CitationsLoadingIndicator and their dependencies

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../ai-elements/inline-citation.tsx           | 236 +-----------------
 1 file changed, 2 insertions(+), 234 deletions(-)

diff --git a/frontend/src/components/ai-elements/inline-citation.tsx b/frontend/src/components/ai-elements/inline-citation.tsx
index ef9f893..49ba280 100644
--- a/frontend/src/components/ai-elements/inline-citation.tsx
+++ b/frontend/src/components/ai-elements/inline-citation.tsx
@@ -1,12 +1,6 @@
 "use client";
 
 import { Badge } from "@/components/ui/badge";
-import {
-  Carousel,
-  type CarouselApi,
-  CarouselContent,
-  CarouselItem,
-} from "@/components/ui/carousel";
 import {
   HoverCard,
   HoverCardContent,
@@ -17,16 +11,8 @@ import {
   externalLinkClass,
   externalLinkClassNoUnderline,
 } from "@/lib/utils";
-import { ExternalLinkIcon, ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
-import {
-  type ComponentProps,
-  Children,
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { ExternalLinkIcon } from "lucide-react";
+import { type ComponentProps, Children } from "react";
 import type { Citation } from "@/core/citations";
 import {
   extractDomainFromUrl,
@@ -36,63 +22,12 @@ import {
 import { Shimmer } from "./shimmer";
 import { useI18n } from "@/core/i18n/hooks";
 
-export type InlineCitationProps = ComponentProps<"span">;
-
-export const InlineCitation = ({
-  className,
-  ...props
-}: InlineCitationProps) => (
-  <span
-    className={cn("group inline items-center gap-1", className)}
-    {...props}
-  />
-);
-
-export type InlineCitationTextProps = ComponentProps<"span">;
-
-export const InlineCitationText = ({
-  className,
-  ...props
-}: InlineCitationTextProps) => (
-  <span
-    className={cn("transition-colors group-hover:bg-accent", className)}
-    {...props}
-  />
-);
-
 export type InlineCitationCardProps = ComponentProps<typeof HoverCard>;
 
 export const InlineCitationCard = (props: InlineCitationCardProps) => (
   <HoverCard closeDelay={0} openDelay={0} {...props} />
 );
 
-export type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
-  sources: string[];
-};
-
-export const InlineCitationCardTrigger = ({
-  sources,
-  className,
-  ...props
-}: InlineCitationCardTriggerProps) => (
-  <HoverCardTrigger asChild>
-    <Badge
-      className={cn("ml-1 rounded-full", className)}
-      variant="secondary"
-      {...props}
-    >
-      {sources[0] ? (
-        <>
-          {new URL(sources[0]).hostname}{" "}
-          {sources.length > 1 && `+${sources.length - 1}`}
-        </>
-      ) : (
-        "unknown"
-      )}
-    </Badge>
-  </HoverCardTrigger>
-);
-
 export type InlineCitationCardBodyProps = ComponentProps<"div">;
 
 export const InlineCitationCardBody = ({
@@ -102,155 +37,6 @@ export const InlineCitationCardBody = ({
   <HoverCardContent className={cn("relative w-80 p-0", className)} {...props} />
 );
 
-const CarouselApiContext = createContext<CarouselApi | undefined>(undefined);
-
-const useCarouselApi = () => {
-  const context = useContext(CarouselApiContext);
-  return context;
-};
-
-export type InlineCitationCarouselProps = ComponentProps<typeof Carousel>;
-
-export const InlineCitationCarousel = ({
-  className,
-  children,
-  ...props
-}: InlineCitationCarouselProps) => {
-  const [api, setApi] = useState<CarouselApi>();
-
-  return (
-    <CarouselApiContext.Provider value={api}>
-      <Carousel className={cn("w-full", className)} setApi={setApi} {...props}>
-        {children}
-      </Carousel>
-    </CarouselApiContext.Provider>
-  );
-};
-
-export type InlineCitationCarouselContentProps = ComponentProps<"div">;
-
-export const InlineCitationCarouselContent = (
-  props: InlineCitationCarouselContentProps
-) => <CarouselContent {...props} />;
-
-export type InlineCitationCarouselItemProps = ComponentProps<"div">;
-
-export const InlineCitationCarouselItem = ({
-  className,
-  ...props
-}: InlineCitationCarouselItemProps) => (
-  <CarouselItem
-    className={cn("w-full space-y-2 p-4 pl-8", className)}
-    {...props}
-  />
-);
-
-export type InlineCitationCarouselHeaderProps = ComponentProps<"div">;
-
-export const InlineCitationCarouselHeader = ({
-  className,
-  ...props
-}: InlineCitationCarouselHeaderProps) => (
-  <div
-    className={cn(
-      "flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2",
-      className
-    )}
-    {...props}
-  />
-);
-
-export type InlineCitationCarouselIndexProps = ComponentProps<"div">;
-
-export const InlineCitationCarouselIndex = ({
-  children,
-  className,
-  ...props
-}: InlineCitationCarouselIndexProps) => {
-  const api = useCarouselApi();
-  const [current, setCurrent] = useState(0);
-  const [count, setCount] = useState(0);
-
-  useEffect(() => {
-    if (!api) {
-      return;
-    }
-
-    setCount(api.scrollSnapList().length);
-    setCurrent(api.selectedScrollSnap() + 1);
-
-    api.on("select", () => {
-      setCurrent(api.selectedScrollSnap() + 1);
-    });
-  }, [api]);
-
-  return (
-    <div
-      className={cn(
-        "flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs",
-        className
-      )}
-      {...props}
-    >
-      {children ?? `${current}/${count}`}
-    </div>
-  );
-};
-
-export type InlineCitationCarouselPrevProps = ComponentProps<"button">;
-
-export const InlineCitationCarouselPrev = ({
-  className,
-  ...props
-}: InlineCitationCarouselPrevProps) => {
-  const api = useCarouselApi();
-
-  const handleClick = useCallback(() => {
-    if (api) {
-      api.scrollPrev();
-    }
-  }, [api]);
-
-  return (
-    <button
-      aria-label="Previous"
-      className={cn("shrink-0", className)}
-      onClick={handleClick}
-      type="button"
-      {...props}
-    >
-      <ArrowLeftIcon className="size-4 text-muted-foreground" />
-    </button>
-  );
-};
-
-export type InlineCitationCarouselNextProps = ComponentProps<"button">;
-
-export const InlineCitationCarouselNext = ({
-  className,
-  ...props
-}: InlineCitationCarouselNextProps) => {
-  const api = useCarouselApi();
-
-  const handleClick = useCallback(() => {
-    if (api) {
-      api.scrollNext();
-    }
-  }, [api]);
-
-  return (
-    <button
-      aria-label="Next"
-      className={cn("shrink-0", className)}
-      onClick={handleClick}
-      type="button"
-      {...props}
-    >
-      <ArrowRightIcon className="size-4 text-muted-foreground" />
-    </button>
-  );
-};
-
 export type InlineCitationSourceProps = ComponentProps<"div"> & {
   title?: string;
   url?: string;
@@ -281,24 +67,6 @@ export const InlineCitationSource = ({
   </div>
 );
 
-export type InlineCitationQuoteProps = ComponentProps<"blockquote">;
-
-export const InlineCitationQuote = ({
-  children,
-  className,
-  ...props
-}: InlineCitationQuoteProps) => (
-  <blockquote
-    className={cn(
-      "border-muted border-l-2 pl-3 text-muted-foreground text-sm italic",
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </blockquote>
-);
-
 /**
  * Shared CitationLink component that renders a citation as a hover card badge
  * Used across message-list-item, artifact-file-detail, and message-group