Merge pull request #25 from LofiSu/feat/citations

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

frontend/src/components/ai-elements/inline-citation.tsx

@@ -13,7 +13,7 @@ import {
   HoverCardTrigger,
 } from "@/components/ui/hover-card";
 import { cn } from "@/lib/utils";
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { ExternalLinkIcon, ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import {
   type ComponentProps,
   createContext,
@@ -22,6 +22,10 @@ import {
   useEffect,
   useState,
 } from "react";
+import type { Citation } from "@/core/citations";
+import { extractDomainFromUrl } from "@/core/citations";
+import { Shimmer } from "./shimmer";
+import { useI18n } from "@/core/i18n/hooks";
 
 export type InlineCitationProps = ComponentProps<"span">;
 
@@ -285,3 +289,114 @@ export const InlineCitationQuote = ({
     {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
+ * 
+ * When citation is provided, displays title and snippet from the citation.
+ * When citation is omitted, falls back to displaying the domain name extracted from href.
+ */
+export type CitationLinkProps = {
+  citation?: Citation;
+  href: string;
+  children: React.ReactNode;
+};
+
+export const CitationLink = ({
+  citation,
+  href,
+  children,
+}: CitationLinkProps) => {
+  const domain = extractDomainFromUrl(href);
+  
+  // Priority: citation.title > children (if meaningful) > domain
+  // - citation.title: from parsed <citations> block, most accurate
+  // - children: from markdown link text [Text](url), used when no citation data
+  // - domain: fallback when both above are unavailable
+  // Skip children if it's a generic placeholder like "Source"
+  const childrenText = typeof children === "string" ? children : null;
+  const isGenericText = childrenText === "Source" || childrenText === "来源";
+  const displayText = citation?.title || (!isGenericText && childrenText) || domain;
+
+  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"
+          >
+            {displayText}
+            <ExternalLinkIcon className="size-3" />
+          </Badge>
+        </a>
+      </HoverCardTrigger>
+      <InlineCitationCardBody>
+        <div className="p-3">
+          <InlineCitationSource
+            title={citation?.title || domain}
+            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>
+  );
+};
+
+/**
+ * Shared CitationsLoadingIndicator component
+ * Used across message-list-item and message-group to show loading citations
+ */
+export type CitationsLoadingIndicatorProps = {
+  citations: Citation[];
+  className?: string;
+};
+
+export const CitationsLoadingIndicator = ({
+  citations,
+  className,
+}: CitationsLoadingIndicatorProps) => {
+  const { t } = useI18n();
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      <Shimmer duration={2.5} className="text-sm">
+        {citations.length > 0
+          ? t.citations.loadingCitationsWithCount(citations.length)
+          : t.citations.loadingCitations}
+      </Shimmer>
+      {citations.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {citations.map((citation) => (
+            <Badge
+              key={citation.id}
+              variant="secondary"
+              className="animate-fade-in gap-1 rounded-full px-2.5 py-1 text-xs font-normal"
+            >
+              <Shimmer duration={2} as="span">
+                {citation.title || extractDomainFromUrl(citation.url)}
+              </Shimmer>
+            </Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};