feat(citations): add shared citation components and optimize code

## New Features
- Add `CitationLink` shared component for rendering citation hover cards
- Add `CitationsLoadingIndicator` component for showing loading state
- Add `removeAllCitations` utility to strip all citations from content
- Add backend support for removing citations when downloading markdown files
- Add i18n support for citation loading messages (en-US, zh-CN)

## Code Optimizations
- Remove duplicate `ExternalLinkBadge` component, reuse `CitationLink` instead
- Consolidate `remarkPlugins` config in `streamdownPlugins` to avoid duplication
- Remove unused imports: `Citation`, `buildCitationMap`, `extractDomainFromUrl`, etc.
- Remove unused `messages` parameter from `ToolCall` component
- Remove unused `isWriteFile` parameter from `ArtifactFilePreview` component
- Remove unused `useI18n` hook from `MessageContent` component

## Bug Fixes
- Fix `remarkGfm` plugin configuration that prevented table rendering
- Fix React Hooks rule violation: move `useMemo` to component top level
- Replace `||` with `??` for nullish coalescing in clipboard data

## Code Cleanup
- Remove debug console.log/info statements from:
  - `threads/hooks.ts`
  - `notification/hooks.ts`
  - `memory-settings-page.tsx`
- Fix import order in `message-group.tsx`

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/workspace/messages/message-list-item.tsx

@@ -1,14 +1,12 @@
 import type { Message } from "@langchain/langgraph-sdk";
-import { ExternalLinkIcon, FileIcon } from "lucide-react";
+import { FileIcon } from "lucide-react";
 import { useParams } from "next/navigation";
 import { memo, useMemo } from "react";
 import rehypeKatex from "rehype-katex";
-import remarkMath from "remark-math";
 
 import {
-  InlineCitationCard,
-  InlineCitationCardBody,
-  InlineCitationSource,
+  CitationLink,
+  CitationsLoadingIndicator,
 } from "@/components/ai-elements/inline-citation";
 import {
   Message as AIElementMessage,
@@ -17,12 +15,11 @@ import {
   MessageToolbar,
 } from "@/components/ai-elements/message";
 import { Badge } from "@/components/ui/badge";
-import { HoverCardTrigger } from "@/components/ui/hover-card";
 import { resolveArtifactURL } from "@/core/artifacts/utils";
 import {
   type Citation,
   buildCitationMap,
-  extractDomainFromUrl,
+  isCitationsBlockIncomplete,
   parseCitations,
 } from "@/core/citations";
 import {
@@ -46,29 +43,29 @@ export function MessageListItem({
   message: Message;
   isLoading?: boolean;
 }) {
+  const isHuman = message.type === "human";
   return (
     <AIElementMessage
       className={cn("group/conversation-message relative w-full", className)}
-      from={message.type === "human" ? "user" : "assistant"}
+      from={isHuman ? "user" : "assistant"}
     >
       <MessageContent
-        className={message.type === "human" ? "w-fit" : "w-full"}
+        className={isHuman ? "w-fit" : "w-full"}
         message={message}
         isLoading={isLoading}
       />
       <MessageToolbar
         className={cn(
-          message.type === "human" && "justify-end",
-          message.type === "human" ? "-bottom-9" : "-bottom-8",
+          isHuman ? "justify-end -bottom-9" : "-bottom-8",
           "absolute right-0 left-0 z-20 opacity-0 transition-opacity delay-200 duration-300 group-hover/conversation-message:opacity-100",
         )}
       >
         <div className="flex gap-1">
           <CopyButton
             clipboardData={
-              extractContentFromMessage(message)
-                ? extractContentFromMessage(message)
-                : (extractReasoningContentFromMessage(message) ?? "")
+              extractContentFromMessage(message) ??
+              extractReasoningContentFromMessage(message) ??
+              ""
             }
           />
         </div>
@@ -77,6 +74,71 @@ export function MessageListItem({
   );
 }
 
+/**
+ * Custom link component that handles citations and external links
+ */
+function MessageLink({
+  href,
+  children,
+  citationMap,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  citationMap: Map<string, Citation>;
+}) {
+  if (!href) return <span>{children}</span>;
+
+  const citation = citationMap.get(href);
+  if (citation) {
+    return (
+      <CitationLink citation={citation} href={href}>
+        {children}
+      </CitationLink>
+    );
+  }
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-primary underline underline-offset-2 hover:no-underline"
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
+
+/**
+ * Custom image component that handles artifact URLs
+ */
+function MessageImage({
+  src,
+  alt,
+  threadId,
+  maxWidth = "90%",
+  ...props
+}: React.ImgHTMLAttributes<HTMLImageElement> & {
+  threadId: string;
+  maxWidth?: string;
+}) {
+  if (!src) return null;
+
+  const imgClassName = cn("overflow-hidden rounded-lg", `max-w-[${maxWidth}]`);
+  
+  if (typeof src !== "string") {
+    return <img className={imgClassName} src={src} alt={alt} {...props} />;
+  }
+  
+  const url = src.startsWith("/mnt/") ? resolveArtifactURL(src, threadId) : src;
+  
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer">
+      <img className={imgClassName} src={url} alt={alt} {...props} />
+    </a>
+  );
+}
+
 function MessageContent_({
   className,
   message,
@@ -88,295 +150,159 @@ function MessageContent_({
 }) {
   const rehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
   const isHuman = message.type === "human";
-
-  // Extract and parse citations and uploaded files from message content
-  const { citations, cleanContent, uploadedFiles } = useMemo(() => {
-    const reasoningContent = extractReasoningContentFromMessage(message);
-    const rawContent = extractContentFromMessage(message);
-    if (!isLoading && reasoningContent && !rawContent) {
-      return {
-        citations: [],
-        cleanContent: reasoningContent,
-        uploadedFiles: [],
-      };
-    }
-
-    // For human messages, first parse uploaded files
-    if (isHuman && rawContent) {
-      const { files, cleanContent: contentWithoutFiles } =
-        parseUploadedFiles(rawContent);
-      const { citations, cleanContent: finalContent } =
-        parseCitations(contentWithoutFiles);
-      return { citations, cleanContent: finalContent, uploadedFiles: files };
-    }
-
-    const { citations, cleanContent } = parseCitations(rawContent ?? "");
-    return { citations, cleanContent, uploadedFiles: [] };
-  }, [isLoading, message, isHuman]);
-
-  // Build citation map for quick URL lookup
-  const citationMap = useMemo(() => buildCitationMap(citations), [citations]);
-
   const { thread_id } = useParams<{ thread_id: string }>();
 
-  // For human messages with uploaded files, render files outside the bubble
+  // Extract and parse citations and uploaded files from message content
+  const { citations, cleanContent, uploadedFiles, isLoadingCitations } =
+    useMemo(() => {
+      const reasoningContent = extractReasoningContentFromMessage(message);
+      const rawContent = extractContentFromMessage(message);
+
+      if (!isLoading && reasoningContent && !rawContent) {
+        return {
+          citations: [],
+          cleanContent: reasoningContent,
+          uploadedFiles: [],
+          isLoadingCitations: false,
+        };
+      }
+
+      // For human messages, parse uploaded files first
+      if (isHuman && rawContent) {
+        const { files, cleanContent: contentWithoutFiles } =
+          parseUploadedFiles(rawContent);
+        const { citations, cleanContent: finalContent } =
+          parseCitations(contentWithoutFiles);
+        return {
+          citations,
+          cleanContent: finalContent,
+          uploadedFiles: files,
+          isLoadingCitations: false,
+        };
+      }
+
+      const { citations, cleanContent } = parseCitations(rawContent ?? "");
+      const isLoadingCitations =
+        isLoading && isCitationsBlockIncomplete(rawContent ?? "");
+
+      return { citations, cleanContent, uploadedFiles: [], isLoadingCitations };
+    }, [isLoading, message, isHuman]);
+
+  const citationMap = useMemo(() => buildCitationMap(citations), [citations]);
+
+  // Shared markdown components
+  const markdownComponents = useMemo(() => ({
+    a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+      <MessageLink {...props} citationMap={citationMap} />
+    ),
+    img: (props: React.ImgHTMLAttributes<HTMLImageElement>) => (
+      <MessageImage {...props} threadId={thread_id} maxWidth={isHuman ? "full" : "90%"} />
+    ),
+  }), [citationMap, thread_id, isHuman]);
+
+  // Render message response
+  const messageResponse = cleanContent ? (
+    <AIElementMessageResponse
+      remarkPlugins={streamdownPlugins.remarkPlugins}
+      rehypePlugins={isHuman ? streamdownPlugins.rehypePlugins : [...rehypePlugins, [rehypeKatex, { output: "html" }]]}
+      components={markdownComponents}
+    >
+      {cleanContent}
+    </AIElementMessageResponse>
+  ) : null;
+
+  // Uploaded files list
+  const filesList = uploadedFiles.length > 0 && thread_id ? (
+    <UploadedFilesList files={uploadedFiles} threadId={thread_id} />
+  ) : null;
+
+  // Citations loading indicator
+  const citationsLoadingIndicator = isLoadingCitations ? (
+    <CitationsLoadingIndicator citations={citations} className="my-3" />
+  ) : null;
+
+  // Human messages with uploaded files: render outside bubble
   if (isHuman && uploadedFiles.length > 0) {
     return (
       <div className={cn("ml-auto flex flex-col gap-2", className)}>
-        {/* Uploaded files outside the message bubble */}
-        <UploadedFilesList files={uploadedFiles} threadId={thread_id} />
-
-        {/* Message content inside the bubble (only if there's text) */}
-        {cleanContent && (
+        {filesList}
+        {messageResponse && (
           <AIElementMessageContent className="w-fit">
-            <AIElementMessageResponse
-              {...streamdownPlugins}
-              components={{
-                a: ({
-                  href,
-                  children,
-                }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-                  if (!href) {
-                    return <span>{children}</span>;
-                  }
-
-                  // Check if this link matches a citation
-                  const citation = citationMap.get(href);
-                  if (citation) {
-                    return (
-                      <CitationLink citation={citation} href={href}>
-                        {children}
-                      </CitationLink>
-                    );
-                  }
-
-                  // Regular external link
-                  return (
-                    <a
-                      href={href}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-primary underline underline-offset-2 hover:no-underline"
-                    >
-                      {children}
-                    </a>
-                  );
-                },
-                img: ({
-                  src,
-                  alt,
-                }: React.ImgHTMLAttributes<HTMLImageElement>) => {
-                  if (!src) return null;
-                  if (typeof src !== "string") {
-                    return (
-                      <img
-                        className="max-w-full overflow-hidden rounded-lg"
-                        src={src}
-                        alt={alt}
-                      />
-                    );
-                  }
-                  let url = src;
-                  if (src.startsWith("/mnt/")) {
-                    url = resolveArtifactURL(src, thread_id);
-                  }
-                  return (
-                    <a href={url} target="_blank" rel="noopener noreferrer">
-                      <img
-                        className="max-w-full overflow-hidden rounded-lg"
-                        src={url}
-                        alt={alt}
-                      />
-                    </a>
-                  );
-                },
-              }}
-            >
-              {cleanContent}
-            </AIElementMessageResponse>
+            {messageResponse}
           </AIElementMessageContent>
         )}
       </div>
     );
   }
 
-  // Default rendering for non-human messages or human messages without files
+  // Default rendering
   return (
     <AIElementMessageContent className={className}>
-      {/* Uploaded files for human messages - show first */}
-      {uploadedFiles.length > 0 && thread_id && (
-        <UploadedFilesList files={uploadedFiles} threadId={thread_id} />
-      )}
-
-      {/* Message content - always show if present */}
-      {cleanContent && (
-        <AIElementMessageResponse
-          remarkPlugins={[[remarkMath, { singleDollarTextMath: true }]]}
-          rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: "html" }]]}
-          components={{
-            a: ({
-              href,
-              children,
-            }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-              if (!href) {
-                return <span>{children}</span>;
-              }
-
-              // Check if this link matches a citation
-              const citation = citationMap.get(href);
-              if (citation) {
-                return (
-                  <CitationLink citation={citation} href={href}>
-                    {children}
-                  </CitationLink>
-                );
-              }
-
-              // Regular external link
-              return (
-                <a
-                  href={href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-primary underline underline-offset-2 hover:no-underline"
-                >
-                  {children}
-                </a>
-              );
-            },
-            img: ({ src, alt }: React.ImgHTMLAttributes<HTMLImageElement>) => {
-              if (!src) return null;
-              if (typeof src !== "string") {
-                return (
-                  <img
-                    className="max-w-[90%] overflow-hidden rounded-lg"
-                    src={src}
-                    alt={alt}
-                  />
-                );
-              }
-              let url = src;
-              if (src.startsWith("/mnt/")) {
-                url = resolveArtifactURL(src, thread_id);
-              }
-              return (
-                <a href={url} target="_blank" rel="noopener noreferrer">
-                  <img
-                    className="max-w-[90%] overflow-hidden rounded-lg"
-                    src={url}
-                    alt={alt}
-                  />
-                </a>
-              );
-            },
-          }}
-        >
-          {cleanContent}
-        </AIElementMessageResponse>
-      )}
+      {filesList}
+      {messageResponse}
+      {citationsLoadingIndicator}
     </AIElementMessageContent>
   );
 }
 
 /**
- * Get file type label from filename extension
+ * Get file extension and check helpers
  */
+const getFileExt = (filename: string) => filename.split(".").pop()?.toLowerCase() ?? "";
+
+const FILE_TYPE_MAP: Record<string, string> = {
+  json: "JSON", csv: "CSV", txt: "TXT", md: "Markdown",
+  py: "Python", js: "JavaScript", ts: "TypeScript", tsx: "TSX", jsx: "JSX",
+  html: "HTML", css: "CSS", xml: "XML", yaml: "YAML", yml: "YAML",
+  pdf: "PDF", png: "PNG", jpg: "JPG", jpeg: "JPEG", gif: "GIF",
+  svg: "SVG", zip: "ZIP", tar: "TAR", gz: "GZ",
+};
+
+const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp"];
+
 function getFileTypeLabel(filename: string): string {
-  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
-  const typeMap: Record<string, string> = {
-    json: "JSON",
-    csv: "CSV",
-    txt: "TXT",
-    md: "Markdown",
-    py: "Python",
-    js: "JavaScript",
-    ts: "TypeScript",
-    tsx: "TSX",
-    jsx: "JSX",
-    html: "HTML",
-    css: "CSS",
-    xml: "XML",
-    yaml: "YAML",
-    yml: "YAML",
-    pdf: "PDF",
-    png: "PNG",
-    jpg: "JPG",
-    jpeg: "JPEG",
-    gif: "GIF",
-    svg: "SVG",
-    zip: "ZIP",
-    tar: "TAR",
-    gz: "GZ",
-  };
-  return (typeMap[ext] ?? ext.toUpperCase()) || "FILE";
+  const ext = getFileExt(filename);
+  return FILE_TYPE_MAP[ext] ?? (ext.toUpperCase() || "FILE");
 }
 
-/**
- * Check if a file is an image based on extension
- */
 function isImageFile(filename: string): boolean {
-  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
-  return ["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp"].includes(ext);
+  return IMAGE_EXTENSIONS.includes(getFileExt(filename));
 }
 
 /**
- * Uploaded files list component that displays files as cards or image thumbnails (Claude-style)
+ * Uploaded files list component
  */
-function UploadedFilesList({
-  files,
-  threadId,
-}: {
-  files: UploadedFile[];
-  threadId: string;
-}) {
+function UploadedFilesList({ files, threadId }: { files: UploadedFile[]; threadId: string }) {
   if (files.length === 0) return null;
 
   return (
     <div className="mb-2 flex flex-wrap gap-2">
       {files.map((file, index) => (
-        <UploadedFileCard
-          key={`${file.path}-${index}`}
-          file={file}
-          threadId={threadId}
-        />
+        <UploadedFileCard key={`${file.path}-${index}`} file={file} threadId={threadId} />
       ))}
     </div>
   );
 }
 
 /**
- * Single uploaded file card component (Claude-style)
- * Shows image thumbnail for image files, file card for others
+ * Single uploaded file card component
  */
-function UploadedFileCard({
-  file,
-  threadId,
-}: {
-  file: UploadedFile;
-  threadId: string;
-}) {
-  const typeLabel = getFileTypeLabel(file.filename);
+function UploadedFileCard({ file, threadId }: { file: UploadedFile; threadId: string }) {
+  if (!threadId) return null;
+
   const isImage = isImageFile(file.filename);
+  const fileUrl = resolveArtifactURL(file.path, threadId);
 
-  // Don't render if threadId is invalid
-  if (!threadId) {
-    return null;
-  }
-
-  // Build URL - browser will handle encoding automatically
-  const imageUrl = resolveArtifactURL(file.path, threadId);
-
-  // For image files, show thumbnail
   if (isImage) {
     return (
       <a
-        href={imageUrl}
+        href={fileUrl}
         target="_blank"
         rel="noopener noreferrer"
         className="group border-border/40 relative block overflow-hidden rounded-lg border"
       >
         <img
-          src={imageUrl}
+          src={fileUrl}
           alt={file.filename}
           className="h-32 w-auto max-w-[240px] object-cover transition-transform group-hover:scale-105"
         />
@@ -384,24 +310,17 @@ function UploadedFileCard({
     );
   }
 
-  // For non-image files, show file card
   return (
     <div className="bg-background border-border/40 flex max-w-[200px] min-w-[120px] flex-col gap-1 rounded-lg border p-3 shadow-sm">
       <div className="flex items-start gap-2">
         <FileIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
-        <span
-          className="text-foreground truncate text-sm font-medium"
-          title={file.filename}
-        >
+        <span className="text-foreground truncate text-sm font-medium" title={file.filename}>
           {file.filename}
         </span>
       </div>
       <div className="flex items-center justify-between gap-2">
-        <Badge
-          variant="secondary"
-          className="rounded px-1.5 py-0.5 text-[10px] font-normal"
-        >
-          {typeLabel}
+        <Badge variant="secondary" className="rounded px-1.5 py-0.5 text-[10px] font-normal">
+          {getFileTypeLabel(file.filename)}
         </Badge>
         <span className="text-muted-foreground text-[10px]">{file.size}</span>
       </div>
@@ -409,58 +328,4 @@ function UploadedFileCard({
   );
 }
 
-/**
- * Citation link component that renders as a hover card badge
- */
-function CitationLink({
-  citation,
-  href,
-  children,
-}: {
-  citation: Citation;
-  href: string;
-  children: React.ReactNode;
-}) {
-  const domain = extractDomainFromUrl(href);
-
-  return (
-    <InlineCitationCard>
-      <HoverCardTrigger asChild>
-        <a
-          href={href}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Badge
-            variant="secondary"
-            className="hover:bg-secondary/80 mx-0.5 cursor-pointer gap-1 rounded-full px-2 py-0.5 text-xs font-normal"
-          >
-            {children ?? domain}
-            <ExternalLinkIcon className="size-3" />
-          </Badge>
-        </a>
-      </HoverCardTrigger>
-      <InlineCitationCardBody>
-        <div className="p-3">
-          <InlineCitationSource
-            title={citation.title}
-            url={href}
-            description={citation.snippet}
-          />
-          <a
-            href={href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary mt-2 inline-flex items-center gap-1 text-xs hover:underline"
-          >
-            Visit source
-            <ExternalLinkIcon className="size-3" />
-          </a>
-        </div>
-      </InlineCitationCardBody>
-    </InlineCitationCard>
-  );
-}
 const MessageContent = memo(MessageContent_);