Merge pull request #252 from nishantchaubeyy/NIshuCommits

frontend/src/components/chat/SourceCard.tsx

@@ -13,6 +13,77 @@ import { ChevronDown, ChevronUp, FileText, Eye, TextQuote } from "lucide-react";
 
 const EXCERPT_THRESHOLD = 200;
 
+type ConfidenceLevel = "High" | "Medium" | "Low" | "Unknown";
+
+interface ConfidenceBadgeMeta {
+  label: ConfidenceLevel;
+  className: string;
+}
+
+const normalizeMetricValue = (value?: number) => {
+  if (typeof value !== "number" || Number.isNaN(value)) return undefined;
+  return value > 1 ? value / 100 : value;
+};
+
+const formatMetricValue = (value?: number) => {
+  const normalizedValue = normalizeMetricValue(value);
+  if (normalizedValue === undefined) return "N/A";
+  return `${Math.round(normalizedValue * 100)}%`;
+};
+
+const getConfidenceBadgeMeta = (value?: number): ConfidenceBadgeMeta => {
+  const normalizedValue = normalizeMetricValue(value);
+
+  if (normalizedValue === undefined) {
+    return {
+      label: "Unknown",
+      className: "border-muted bg-muted/40 text-muted-foreground",
+    };
+  }
+
+  if (normalizedValue >= 0.8) {
+    return {
+      label: "High",
+      className: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600",
+    };
+  }
+
+  if (normalizedValue >= 0.5) {
+    return {
+      label: "Medium",
+      className: "border-amber-500/30 bg-amber-500/10 text-amber-600",
+    };
+  }
+
+  return {
+    label: "Low",
+    className: "border-red-500/30 bg-red-500/10 text-red-600",
+  };
+};
+
+const getPrimarySourceMetric = (source: SourceChunk) =>
+  source.confidence ?? source.score;
+
+const MetricBadge = ({
+  label,
+  value,
+}: {
+  label: "Score" | "Confidence";
+  value?: number;
+}) => {
+  const badgeMeta = getConfidenceBadgeMeta(value);
+
+  return (
+    <Badge
+      variant="outline"
+      className={`h-5 px-1.5 text-[9px] font-medium ${badgeMeta.className}`}
+      title={`${label}: ${formatMetricValue(value)}`}
+    >
+      {label}: {badgeMeta.label}
+    </Badge>
+  );
+};
+
 interface Props {
   sources: SourceChunk[];
   onPageClick: (page: number) => void;
@@ -36,34 +107,37 @@ export default function SourceCard({ sources = [], onPageClick }: Props) {
 
   return (
     <div className="rounded-lg border border-border/50 bg-card/50 overflow-hidden">
-        {/* ── Header ──────────────────────────────────── */}
-        <button
-          onClick={() => setExpanded(!expanded)}
-          className="w-full flex items-center justify-between px-3 py-2 text-xs hover:bg-accent/30 transition-colors"
-        >
-          <span className="flex items-center gap-1.5 text-muted-foreground">
-            <FileText className="w-3.5 h-3.5" />
-            {sources.length} source{sources.length > 1 ? "s" : ""} cited
-          </span>
-          {expanded ? (
-            <ChevronUp className="w-3.5 h-3.5 text-muted-foreground" />
-          ) : (
-            <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
-          )}
-        </button>
-
-        {/* ── Collapsed: Mini badges with hover preview ── */}
-        {!expanded && (
-          <div className="px-3 pb-2 flex flex-wrap gap-1">
-            {sources.map((src, i) => (
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center justify-between px-3 py-2 text-xs hover:bg-accent/30 transition-colors"
+      >
+        <span className="flex items-center gap-1.5 text-muted-foreground">
+          <FileText className="w-3.5 h-3.5" />
+          {sources.length} source{sources.length > 1 ? "s" : ""} cited
+        </span>
+        {expanded ? (
+          <ChevronUp className="w-3.5 h-3.5 text-muted-foreground" />
+        ) : (
+          <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+        )}
+      </button>
+
+      {!expanded && (
+        <div className="px-3 pb-2 flex flex-wrap gap-1">
+          {sources.map((src, i) => {
+            const badgeMeta = getConfidenceBadgeMeta(
+              getPrimarySourceMetric(src)
+            );
+
+            return (
               <Tooltip key={i}>
                 <TooltipTrigger className="inline-flex">
                   <Badge
-                    variant="secondary"
-                    className="text-[10px] h-5 cursor-pointer hover:bg-primary/20 transition-colors"
+                    variant="outline"
+                    className={`text-[10px] h-5 cursor-pointer hover:bg-primary/20 transition-colors ${badgeMeta.className}`}
                     onClick={() => onPageClick(src.page + 1)}
                   >
-                    p.{src.page + 1} • {src.confidence}%
+                    p.{src.page + 1} - {badgeMeta.label}
                   </Badge>
                 </TooltipTrigger>
                 <TooltipContent
@@ -71,74 +145,68 @@ export default function SourceCard({ sources = [], onPageClick }: Props) {
                   align="center"
                   className="max-w-xs p-2"
                 >
+                  <div className="mb-1 flex flex-wrap gap-1">
+                    <MetricBadge label="Score" value={src.score} />
+                    <MetricBadge label="Confidence" value={src.confidence} />
+                  </div>
                   <p className="text-[11px] leading-relaxed line-clamp-6">
                     {src.text}
                   </p>
                 </TooltipContent>
               </Tooltip>
-            ))}
-          </div>
-        )}
+            );
+          })}
+        </div>
+      )}
 
-        {/* ── Expanded: Full source cards ─────────────── */}
-        {expanded && (
-          <div className="border-t border-border/30">
-            {sources.map((src, i) => (
-              <div
-                key={i}
-                className="px-3 py-2.5 border-b border-border/20 last:border-b-0 hover:bg-accent/20 transition-colors"
-              >
-                <div className="flex items-center justify-between mb-1.5">
-                  <div className="flex items-center gap-2">
-                    <span className="text-[10px] font-medium text-muted-foreground">
-                      {src.filename}
-                    </span>
-                    <Badge variant="outline" className="text-[9px] h-4 px-1.5">
-                      Page {src.page + 1}
-                    </Badge>
-                    <Badge
-                      variant="secondary"
-                      className={`text-[9px] h-4 px-1.5 ${
-                        src.confidence >= 80
-                          ? "text-emerald-400 bg-emerald-400/10"
-                          : src.confidence >= 50
-                          ? "text-yellow-400 bg-yellow-400/10"
-                          : "text-muted-foreground"
-                      }`}
-                    >
-                      {src.confidence}% match
-                    </Badge>
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-6 px-2 text-[10px]"
-                    onClick={() => onPageClick(src.page + 1)}
-                  >
-                    <Eye className="w-3 h-3 mr-1" />
-                    View
-                  </Button>
+      {expanded && (
+        <div className="border-t border-border/30">
+          {sources.map((src, i) => (
+            <div
+              key={i}
+              className="px-3 py-2.5 border-b border-border/20 last:border-b-0 hover:bg-accent/20 transition-colors"
+            >
+              <div className="flex items-center justify-between gap-2 mb-1.5">
+                <div className="flex min-w-0 flex-wrap items-center gap-2">
+                  <span className="truncate text-[10px] font-medium text-muted-foreground">
+                    {src.filename}
+                  </span>
+                  <Badge variant="outline" className="h-5 px-1.5 text-[9px]">
+                    Page {src.page + 1}
+                  </Badge>
+                  <MetricBadge label="Score" value={src.score} />
+                  <MetricBadge label="Confidence" value={src.confidence} />
                 </div>
-                <p
-                  className={`text-[11px] text-muted-foreground leading-relaxed ${
-                    excerptOpen.has(i) ? "" : "line-clamp-3"
-                  }`}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 shrink-0 px-2 text-[10px]"
+                  onClick={() => onPageClick(src.page + 1)}
                 >
-                  {src.text}
-                </p>
-                {src.text.length > EXCERPT_THRESHOLD && (
-                  <button
-                    onClick={() => toggleExcerpt(i)}
-                    className="mt-1.5 flex items-center gap-1 text-[10px] text-primary/70 hover:text-primary transition-colors"
-                  >
-                    <TextQuote className="w-3 h-3" />
-                    {excerptOpen.has(i) ? "Hide excerpt" : "Show excerpt"}
-                  </button>
-                )}
+                  <Eye className="w-3 h-3 mr-1" />
+                  View
+                </Button>
               </div>
-            ))}
-          </div>
-        )}
+              <p
+                className={`text-[11px] text-muted-foreground leading-relaxed ${
+                  excerptOpen.has(i) ? "" : "line-clamp-3"
+                }`}
+              >
+                {src.text}
+              </p>
+              {src.text.length > EXCERPT_THRESHOLD && (
+                <button
+                  onClick={() => toggleExcerpt(i)}
+                  className="mt-1.5 flex items-center gap-1 text-[10px] text-primary/70 hover:text-primary transition-colors"
+                >
+                  <TextQuote className="w-3 h-3" />
+                  {excerptOpen.has(i) ? "Hide excerpt" : "Show excerpt"}
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

frontend/src/store/chat-store.ts

@@ -7,8 +7,8 @@ export interface SourceChunk {
   text: string;
   filename: string;
   page: number;
-  score: number;
-  confidence: number;
+  score?: number;
+  confidence?: number;
 }
 
 export interface ChatMsg {