From fdd36686e8a6b3f27a36ae395fa5f141cd83cd0e Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Thu, 4 Jun 2026 22:34:38 +0530
Subject: [PATCH 1/8] feat(document): collection document preview handling for
 preview

---
 app/(main)/text-to-speech/page.tsx            |   3 +-
 .../document/[document_id]/preview/route.ts   |  72 +++++
 app/components/evaluations/DatasetsTab.tsx    |  24 +-
 .../knowledge-base/CollectionDetail.tsx       |   2 +-
 app/components/knowledge-base/CsvPreview.tsx  | 106 ++++++
 .../knowledge-base/DocumentPreviewModal.tsx   | 303 ++++++++++++++----
 app/components/text-to-speech/DatasetsTab.tsx |  24 +-
 .../text-to-speech/TTSDatasetCard.tsx         |   2 +-
 app/components/text-to-speech/index.ts        |  13 +
 app/lib/utils/csv.ts                          |  36 +++
 app/lib/utils/documentPreview.ts              |  99 ++++++
 11 files changed, 563 insertions(+), 121 deletions(-)
 create mode 100644 app/api/document/[document_id]/preview/route.ts
 create mode 100644 app/components/knowledge-base/CsvPreview.tsx
 create mode 100644 app/components/text-to-speech/index.ts
 create mode 100644 app/lib/utils/csv.ts
 create mode 100644 app/lib/utils/documentPreview.ts

diff --git a/app/(main)/text-to-speech/page.tsx b/app/(main)/text-to-speech/page.tsx
index e68f9766..ed774b9a 100644
--- a/app/(main)/text-to-speech/page.tsx
+++ b/app/(main)/text-to-speech/page.tsx
@@ -15,8 +15,7 @@ import { useToast } from "@/app/hooks/useToast";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
 import { apiFetch } from "@/app/lib/apiClient";
-import DatasetsTab from "@/app/components/text-to-speech/DatasetsTab";
-import EvaluationsTab from "@/app/components/text-to-speech/EvaluationsTab";
+import { DatasetsTab, EvaluationsTab } from "@/app/components/text-to-speech";
 import {
   TTSTab,
   TextSample,
diff --git a/app/api/document/[document_id]/preview/route.ts b/app/api/document/[document_id]/preview/route.ts
new file mode 100644
index 00000000..445d0271
--- /dev/null
+++ b/app/api/document/[document_id]/preview/route.ts
@@ -0,0 +1,72 @@
+import { NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+/**
+ * Same-origin proxy for document content.
+ *
+ * Object-storage signed URLs are typically public for GET, but they (a) live
+ * on a different origin so the browser blocks fetch() via CORS, and (b) often
+ * set Content-Disposition: attachment so the browser downloads instead of
+ * rendering. Both problems disappear when the bytes come from our own origin.
+ *
+ * The route fetches the document's signed URL server-side and streams the
+ * bytes back with the upstream Content-Type intact (no attachment header).
+ */
+
+interface DocumentDetail {
+  signed_url?: string;
+  fname?: string;
+}
+
+interface DocumentDetailEnvelope {
+  data?: DocumentDetail;
+  signed_url?: string;
+  fname?: string;
+}
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ document_id: string }> },
+) {
+  const { document_id } = await params;
+  try {
+    const { data } = await apiClient(
+      request,
+      `/api/v1/documents/${document_id}?include_url=true`,
+    );
+    const detail = (data as DocumentDetailEnvelope) || {};
+    const signedUrl = detail.data?.signed_url || detail.signed_url;
+    if (!signedUrl) {
+      return NextResponse.json(
+        { error: "Document has no signed URL" },
+        { status: 404 },
+      );
+    }
+
+    const upstream = await fetch(signedUrl);
+    if (!upstream.ok) {
+      return NextResponse.json(
+        { error: `Failed to fetch document (status ${upstream.status})` },
+        { status: upstream.status },
+      );
+    }
+
+    const contentType =
+      upstream.headers.get("Content-Type") || "application/octet-stream";
+    return new Response(upstream.body, {
+      status: 200,
+      headers: {
+        "Content-Type": contentType,
+        "Cache-Control": "private, max-age=300",
+      },
+    });
+  } catch (error: unknown) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/components/evaluations/DatasetsTab.tsx b/app/components/evaluations/DatasetsTab.tsx
index cb2ec9bc..676e0300 100644
--- a/app/components/evaluations/DatasetsTab.tsx
+++ b/app/components/evaluations/DatasetsTab.tsx
@@ -8,6 +8,7 @@ import { DatabaseIcon, PlusIcon } from "@/app/components/icons";
 import { Button, Modal } from "@/app/components/ui";
 import { useToast } from "@/app/hooks/useToast";
 import { DatasetListSkeleton } from "@/app/components";
+import { parseCsvRow } from "@/app/lib/utils/csv";
 import DatasetCard from "./DatasetCard";
 import CreateDatasetForm from "./CreateDatasetForm";
 import ViewDatasetModal from "./ViewDatasetModal";
@@ -34,29 +35,6 @@ export interface DatasetsTabProps {
   toast: ReturnType<typeof useToast>;
 }
 
-const parseCsvRow = (line: string): string[] => {
-  const result: string[] = [];
-  let current = "";
-  let inQuotes = false;
-  for (let i = 0; i < line.length; i++) {
-    if (line[i] === '"') {
-      if (inQuotes && line[i + 1] === '"') {
-        current += '"';
-        i++;
-      } else {
-        inQuotes = !inQuotes;
-      }
-    } else if (line[i] === "," && !inQuotes) {
-      result.push(current.trim());
-      current = "";
-    } else {
-      current += line[i];
-    }
-  }
-  result.push(current.trim());
-  return result;
-};
-
 export default function DatasetsTab({
   leftPanelWidth,
   datasetName,
diff --git a/app/components/knowledge-base/CollectionDetail.tsx b/app/components/knowledge-base/CollectionDetail.tsx
index 4ad6190c..4c42fb6c 100644
--- a/app/components/knowledge-base/CollectionDetail.tsx
+++ b/app/components/knowledge-base/CollectionDetail.tsx
@@ -125,7 +125,7 @@ export default function CollectionDetail({
           </h3>
           {documents.length > 0 && (
             <Button
-              variant="outline"
+              variant="primary"
               size="sm"
               onClick={() => onPreviewDocument(documents[0])}
             >
diff --git a/app/components/knowledge-base/CsvPreview.tsx b/app/components/knowledge-base/CsvPreview.tsx
new file mode 100644
index 00000000..e1caeb2c
--- /dev/null
+++ b/app/components/knowledge-base/CsvPreview.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Loader } from "@/app/components/ui";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { ParsedCsv, parseCsv } from "@/app/lib/utils/csv";
+
+interface CsvPreviewProps {
+  url: string;
+}
+
+export default function CsvPreview({ url }: CsvPreviewProps) {
+  const { activeKey } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+  const [data, setData] = useState<ParsedCsv | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setData(null);
+    fetch(url, {
+      headers: apiKey ? { "X-API-KEY": apiKey } : undefined,
+      credentials: "include",
+    })
+      .then((r) => {
+        if (!r.ok) throw new Error(`Server returned ${r.status}`);
+        return r.text();
+      })
+      .then((text) => {
+        if (!cancelled) setData(parseCsv(text));
+      })
+      .catch((e: Error) => {
+        if (!cancelled) setError(e.message || "Couldn't load CSV");
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [url, apiKey]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader size="md" message="Loading CSV…" />
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-2 px-6 text-center">
+        <p className="text-sm text-text-secondary">
+          Couldn&apos;t load CSV preview.
+        </p>
+        <p className="text-xs text-text-secondary">{error}</p>
+      </div>
+    );
+  }
+  if (!data || data.headers.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-sm text-text-secondary">CSV is empty.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-auto bg-bg-primary">
+      <table className="w-full text-sm border-collapse">
+        <thead className="sticky top-0 z-10 bg-bg-secondary border-b border-border">
+          <tr>
+            {data.headers.map((h, i) => (
+              <th
+                key={i}
+                className="text-left px-3 py-2 font-semibold text-text-primary border-r border-border last:border-r-0 whitespace-nowrap"
+              >
+                {h || `Column ${i + 1}`}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.rows.map((row, ri) => (
+            <tr
+              key={ri}
+              className="border-b border-border last:border-b-0 hover:bg-bg-secondary/40"
+            >
+              {data.headers.map((_, ci) => (
+                <td
+                  key={ci}
+                  className="px-3 py-2 text-text-secondary border-r border-border last:border-r-0 align-top"
+                >
+                  {row[ci] ?? ""}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/app/components/knowledge-base/DocumentPreviewModal.tsx b/app/components/knowledge-base/DocumentPreviewModal.tsx
index 3fea31ec..ae53a911 100644
--- a/app/components/knowledge-base/DocumentPreviewModal.tsx
+++ b/app/components/knowledge-base/DocumentPreviewModal.tsx
@@ -1,9 +1,15 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Loader, Modal } from "@/app/components/ui";
+import { useEffect, useMemo, useState } from "react";
+import { Button, Loader, Modal } from "@/app/components/ui";
+import { DownloadIcon } from "@/app/components/icons";
 import { formatDate } from "@/app/components/utils";
 import { Document } from "@/app/lib/types/document";
+import {
+  DocumentPreviewKind,
+  getDocumentPreviewSource,
+} from "@/app/lib/utils/documentPreview";
+import CsvPreview from "./CsvPreview";
 
 interface DocumentPreviewModalProps {
   open: boolean;
@@ -14,6 +20,16 @@ interface DocumentPreviewModalProps {
   onSelectDocument: (doc: Document) => void;
 }
 
+// Native iframes are likely to silently fail (cancelled download, bad MIME);
+// viewer-rendered docs can legitimately take longer. Give each its own budget.
+const IFRAME_TIMEOUT_MS: Record<DocumentPreviewKind, number> = {
+  native: 12000,
+  office: 25000,
+  google: 25000,
+  csv: 0,
+  unsupported: 0,
+};
+
 export default function DocumentPreviewModal({
   open,
   onClose,
@@ -23,16 +39,33 @@ export default function DocumentPreviewModal({
   onSelectDocument,
 }: DocumentPreviewModalProps) {
   const [isFrameLoading, setIsFrameLoading] = useState(false);
+  const [frameTimedOut, setFrameTimedOut] = useState(false);
+
+  const previewSource = useMemo(
+    () => getDocumentPreviewSource(previewDoc),
+    [previewDoc],
+  );
+  const { kind, url: previewUrl } = previewSource;
+  const usesIframe =
+    kind === "native" || kind === "office" || kind === "google";
 
   useEffect(() => {
-    if (!previewDoc?.signed_url) return;
+    setFrameTimedOut(false);
+    if (!usesIframe || !previewUrl) {
+      setIsFrameLoading(false);
+      return;
+    }
     setIsFrameLoading(true);
-    // Fallback: iframe `onLoad` doesn't fire reliably when the browser
-    const timer = setTimeout(() => setIsFrameLoading(false), 6000);
+    const timer = setTimeout(() => {
+      setIsFrameLoading(false);
+      setFrameTimedOut(true);
+    }, IFRAME_TIMEOUT_MS[kind]);
     return () => clearTimeout(timer);
-  }, [previewDoc?.id, previewDoc?.signed_url]);
+  }, [previewDoc?.id, previewUrl, usesIframe, kind]);
+
+  const renderIframe = usesIframe && !!previewUrl && !frameTimedOut;
+  const showLoader = (isLoading || isFrameLoading) && usesIframe;
 
-  const showLoader = isLoading || isFrameLoading;
   return (
     <Modal
       open={open}
@@ -42,74 +75,202 @@ export default function DocumentPreviewModal({
       maxHeight="h-[80vh]"
     >
       <div className="flex flex-1 min-h-0 h-full">
-        <div className="w-56 shrink-0 border-r border-border overflow-y-auto bg-bg-secondary">
-          {documents.map((doc) => {
-            const isSelected = previewDoc?.id === doc.id;
-            return (
-              <button
-                key={doc.id}
-                onClick={() => onSelectDocument(doc)}
-                className={`relative w-full text-left px-4 py-3 transition-colors cursor-pointer ${
-                  isSelected
-                    ? "bg-accent-primary/5"
-                    : "hover:bg-accent-primary/5"
-                }`}
-              >
-                {isSelected && (
-                  <span className="absolute left-0 top-0 bottom-0 w-1 bg-accent-primary" />
-                )}
-                <p
-                  className={`text-sm truncate ${
-                    isSelected
-                      ? "font-semibold text-accent-primary"
-                      : "font-medium text-text-primary"
-                  }`}
-                >
-                  {doc.fname}
-                </p>
-                {doc.inserted_at && (
-                  <p className="text-xs text-text-secondary mt-0.5">
-                    {formatDate(doc.inserted_at)}
-                  </p>
-                )}
-              </button>
-            );
-          })}
+        <DocumentSidebar
+          documents={documents}
+          previewDoc={previewDoc}
+          onSelectDocument={onSelectDocument}
+        />
+        <div className="flex-1 min-h-0 flex flex-col">
+          <PreviewHeader previewDoc={previewDoc} />
+          <PreviewPane
+            previewDoc={previewDoc}
+            previewUrl={previewUrl}
+            kind={kind}
+            renderIframe={renderIframe}
+            showLoader={showLoader}
+            frameTimedOut={frameTimedOut}
+            onFrameLoad={() => setIsFrameLoading(false)}
+          />
         </div>
+      </div>
+    </Modal>
+  );
+}
+
+interface DocumentSidebarProps {
+  documents: Document[];
+  previewDoc: Document | null;
+  onSelectDocument: (doc: Document) => void;
+}
 
-        <div className="flex-1 min-h-0 bg-neutral-50 relative">
-          {previewDoc?.signed_url ? (
-            <iframe
-              key={previewDoc.id}
-              src={previewDoc.signed_url}
-              title={previewDoc.fname}
-              onLoad={() => setIsFrameLoading(false)}
-              className="w-full h-full border-none"
-            />
-          ) : !showLoader ? (
-            <div className="flex items-center justify-center h-full">
-              <p className="text-sm text-text-secondary">
-                {previewDoc
-                  ? "No preview available for this document"
-                  : "Select a document to preview"}
+function DocumentSidebar({
+  documents,
+  previewDoc,
+  onSelectDocument,
+}: DocumentSidebarProps) {
+  return (
+    <div className="w-56 shrink-0 border-r border-border overflow-y-auto bg-bg-secondary">
+      {documents.map((doc) => {
+        const isSelected = previewDoc?.id === doc.id;
+        return (
+          <button
+            key={doc.id}
+            onClick={() => onSelectDocument(doc)}
+            className={`relative w-full text-left px-4 py-3 transition-colors cursor-pointer ${
+              isSelected ? "bg-accent-primary/5" : "hover:bg-accent-primary/5"
+            }`}
+          >
+            {isSelected && (
+              <span className="absolute left-0 top-0 bottom-0 w-1 bg-accent-primary" />
+            )}
+            <p
+              className={`text-sm truncate ${
+                isSelected
+                  ? "font-semibold text-accent-primary"
+                  : "font-medium text-text-primary"
+              }`}
+            >
+              {doc.fname}
+            </p>
+            {doc.inserted_at && (
+              <p className="text-xs text-text-secondary mt-0.5">
+                {formatDate(doc.inserted_at)}
               </p>
-            </div>
-          ) : null}
-
-          {showLoader && (
-            <div className="absolute inset-0 flex items-center justify-center bg-bg-secondary/80 backdrop-blur-[1px] pointer-events-none">
-              <Loader
-                size="md"
-                message={
-                  previewDoc?.fname
-                    ? `Loading ${previewDoc.fname}…`
-                    : "Loading document…"
-                }
-              />
-            </div>
-          )}
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function triggerDownload(url: string, filename: string) {
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.target = "_blank";
+  a.rel = "noopener noreferrer";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+
+function PreviewHeader({ previewDoc }: { previewDoc: Document | null }) {
+  if (!previewDoc) return null;
+  return (
+    <div className="shrink-0 flex items-center justify-between gap-3 px-4 py-2 border-b border-border bg-bg-primary">
+      <p className="text-sm font-medium text-text-primary truncate">
+        {previewDoc.fname}
+      </p>
+      {previewDoc.signed_url && (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() =>
+            triggerDownload(previewDoc.signed_url!, previewDoc.fname)
+          }
+          title="Download file"
+        >
+          <DownloadIcon className="w-3.5 h-3.5" />
+          Download
+        </Button>
+      )}
+    </div>
+  );
+}
+
+interface PreviewPaneProps {
+  previewDoc: Document | null;
+  previewUrl: string | null;
+  kind: DocumentPreviewKind;
+  renderIframe: boolean;
+  showLoader: boolean;
+  frameTimedOut: boolean;
+  onFrameLoad: () => void;
+}
+
+function PreviewPane({
+  previewDoc,
+  previewUrl,
+  kind,
+  renderIframe,
+  showLoader,
+  frameTimedOut,
+  onFrameLoad,
+}: PreviewPaneProps) {
+  const showCsv = kind === "csv" && !!previewUrl;
+  const showFallback = !showLoader && !renderIframe && !showCsv;
+
+  return (
+    <div className="flex-1 min-h-0 bg-neutral-50 relative">
+      {renderIframe && (
+        <iframe
+          key={`${previewDoc!.id}-${kind}`}
+          src={previewUrl!}
+          title={previewDoc!.fname}
+          onLoad={onFrameLoad}
+          className="w-full h-full border-none"
+        />
+      )}
+
+      {showCsv && <CsvPreview url={previewUrl!} />}
+
+      {showFallback && (
+        <PreviewFallback
+          previewDoc={previewDoc}
+          frameTimedOut={frameTimedOut}
+        />
+      )}
+
+      {showLoader && (
+        <div className="absolute inset-0 flex items-center justify-center bg-bg-secondary/80 backdrop-blur-[1px] pointer-events-none">
+          <Loader
+            size="md"
+            message={
+              previewDoc?.fname
+                ? `Loading ${previewDoc.fname}…`
+                : "Loading document…"
+            }
+          />
         </div>
+      )}
+    </div>
+  );
+}
+
+interface PreviewFallbackProps {
+  previewDoc: Document | null;
+  frameTimedOut: boolean;
+}
+
+function PreviewFallback({ previewDoc, frameTimedOut }: PreviewFallbackProps) {
+  if (!previewDoc) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-sm text-text-secondary">
+          Select a document to preview
+        </p>
       </div>
-    </Modal>
+    );
+  }
+  const message = frameTimedOut
+    ? "The preview didn't load. Please download the file to view it."
+    : "Inline preview isn't available for this file format.";
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-3 px-6 text-center">
+      <p className="text-sm text-text-secondary">{message}</p>
+      {previewDoc.signed_url && (
+        <Button
+          variant="primary"
+          size="md"
+          onClick={() =>
+            triggerDownload(previewDoc.signed_url!, previewDoc.fname)
+          }
+        >
+          <DownloadIcon className="w-4 h-4" />
+          Download {previewDoc.fname}
+        </Button>
+      )}
+    </div>
   );
 }
diff --git a/app/components/text-to-speech/DatasetsTab.tsx b/app/components/text-to-speech/DatasetsTab.tsx
index 04bab29f..22b09f4f 100644
--- a/app/components/text-to-speech/DatasetsTab.tsx
+++ b/app/components/text-to-speech/DatasetsTab.tsx
@@ -14,6 +14,7 @@ import { useAuth } from "@/app/lib/context/AuthContext";
 import { apiFetch } from "@/app/lib/apiClient";
 import { DatabaseIcon } from "@/app/components/icons";
 import { DatasetListSkeleton } from "@/app/components";
+import { parseCsvRow } from "@/app/lib/utils/csv";
 import TTSDatasetCard from "./TTSDatasetCard";
 import CreateTTSDatasetForm from "./CreateTTSDatasetForm";
 import TTSViewDatasetModal from "./TTSViewDatasetModal";
@@ -64,29 +65,6 @@ const splitCSVRecords = (text: string): string[] => {
   return records;
 };
 
-const parseCsvRow = (line: string): string[] => {
-  const result: string[] = [];
-  let current = "";
-  let inQuotes = false;
-  for (let i = 0; i < line.length; i++) {
-    if (line[i] === '"') {
-      if (inQuotes && line[i + 1] === '"') {
-        current += '"';
-        i++;
-      } else {
-        inQuotes = !inQuotes;
-      }
-    } else if (line[i] === "," && !inQuotes) {
-      result.push(current.trim());
-      current = "";
-    } else {
-      current += line[i];
-    }
-  }
-  result.push(current.trim());
-  return result;
-};
-
 export default function DatasetsTab({
   leftPanelWidth,
   datasetName,
diff --git a/app/components/text-to-speech/TTSDatasetCard.tsx b/app/components/text-to-speech/TTSDatasetCard.tsx
index 20eee810..0f1f1f64 100644
--- a/app/components/text-to-speech/TTSDatasetCard.tsx
+++ b/app/components/text-to-speech/TTSDatasetCard.tsx
@@ -2,7 +2,7 @@
 
 import { TTSDataset } from "@/app/lib/types/textToSpeech";
 import { Button } from "@/app/components/ui";
-import TTSDatasetDescription from "@/app/components/text-to-speech/DatasetDescription";
+import TTSDatasetDescription from "./DatasetDescription";
 
 interface TTSDatasetCardProps {
   dataset: TTSDataset;
diff --git a/app/components/text-to-speech/index.ts b/app/components/text-to-speech/index.ts
new file mode 100644
index 00000000..6945b7a8
--- /dev/null
+++ b/app/components/text-to-speech/index.ts
@@ -0,0 +1,13 @@
+export { default as AudioPlayerFromUrl } from "./AudioPlayerFromUrl";
+export { default as CreateTTSDatasetForm } from "./CreateTTSDatasetForm";
+export { default as DatasetDescription } from "./DatasetDescription";
+export { default as DatasetsTab } from "./DatasetsTab";
+export { default as EvaluationsTab } from "./EvaluationsTab";
+export { default as RunTTSEvaluationForm } from "./RunTTSEvaluationForm";
+export { default as TTSDatasetCard } from "./TTSDatasetCard";
+export { default as TTSResultRow } from "./TTSResultRow";
+export { default as TTSResultsTable } from "./TTSResultsTable";
+export { default as TTSRunCard } from "./TTSRunCard";
+export { default as TTSRunsList } from "./TTSRunsList";
+export { default as TTSScoreInfoTooltip } from "./TTSScoreInfoTooltip";
+export { default as TTSViewDatasetModal } from "./TTSViewDatasetModal";
diff --git a/app/lib/utils/csv.ts b/app/lib/utils/csv.ts
new file mode 100644
index 00000000..9dbda715
--- /dev/null
+++ b/app/lib/utils/csv.ts
@@ -0,0 +1,36 @@
+/** Parse a single CSV line. Handles quoted fields and escaped quotes ("") */
+export const parseCsvRow = (line: string): string[] => {
+  const result: string[] = [];
+  let current = "";
+  let inQuotes = false;
+  for (let i = 0; i < line.length; i++) {
+    if (line[i] === '"') {
+      if (inQuotes && line[i + 1] === '"') {
+        current += '"';
+        i++;
+      } else {
+        inQuotes = !inQuotes;
+      }
+    } else if (line[i] === "," && !inQuotes) {
+      result.push(current.trim());
+      current = "";
+    } else {
+      current += line[i];
+    }
+  }
+  result.push(current.trim());
+  return result;
+};
+
+export interface ParsedCsv {
+  headers: string[];
+  rows: string[][];
+}
+
+/** Parse a CSV file into headers + rows. First non-empty line is treated as the header row. */
+export const parseCsv = (text: string): ParsedCsv => {
+  const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
+  const headers = lines.length > 0 ? parseCsvRow(lines[0]) : [];
+  const rows = lines.slice(1).map(parseCsvRow);
+  return { headers, rows };
+};
diff --git a/app/lib/utils/documentPreview.ts b/app/lib/utils/documentPreview.ts
new file mode 100644
index 00000000..78d29597
--- /dev/null
+++ b/app/lib/utils/documentPreview.ts
@@ -0,0 +1,99 @@
+import { Document } from "@/app/lib/types/document";
+
+/**
+ * How to render a document in the preview iframe:
+ * - `native`     — browser can render directly (pdf, images, txt, html…)
+ * - `office`     — route through Microsoft Office Online Viewer (Word/Excel/PowerPoint)
+ * - `google`     — route through Google Docs Viewer (tsv — Office viewer can't handle these)
+ * - `csv`        — fetch + parse client-side and render as a table (more reliable than gview)
+ * - `unsupported`— no inline preview; fall back to download link
+ */
+export type DocumentPreviewKind =
+  | "native"
+  | "office"
+  | "google"
+  | "csv"
+  | "unsupported";
+
+export interface DocumentPreviewSource {
+  kind: DocumentPreviewKind;
+  url: string | null;
+  ext?: string; // useful for the UI to branch on file type within a kind
+}
+
+const NATIVE_EXTS = new Set([
+  "pdf",
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "webp",
+  "svg",
+  "bmp",
+  "ico",
+  "txt",
+  "md",
+  "html",
+  "htm",
+  "json",
+]);
+
+const OFFICE_EXTS = new Set([
+  "doc",
+  "docx",
+  "xls",
+  "xlsx",
+  "ppt",
+  "pptx",
+  "odt",
+  "ods",
+  "odp",
+]);
+
+const GOOGLE_EXTS = new Set(["tsv"]);
+
+const CSV_EXTS = new Set(["csv"]);
+
+function getExtension(filename: string): string {
+  const dot = filename.lastIndexOf(".");
+  return dot === -1 ? "" : filename.slice(dot + 1).toLowerCase();
+}
+
+export function getDocumentPreviewSource(
+  doc: Document | null,
+): DocumentPreviewSource {
+  if (!doc?.signed_url) return { kind: "unsupported", url: null };
+
+  const ext = getExtension(doc.fname || "");
+
+  if (!ext) return { kind: "unsupported", url: doc.signed_url, ext };
+
+  if (CSV_EXTS.has(ext)) {
+    // Route through our same-origin proxy — signed URLs typically can't be
+    // fetched directly from the browser (CORS + Content-Disposition: attachment).
+    return { kind: "csv", url: `/api/document/${doc.id}/preview`, ext };
+  }
+
+  if (NATIVE_EXTS.has(ext)) {
+    return { kind: "native", url: doc.signed_url, ext };
+  }
+
+  if (OFFICE_EXTS.has(ext)) {
+    return {
+      kind: "office",
+      url: `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(doc.signed_url)}`,
+      ext,
+    };
+  }
+
+  if (GOOGLE_EXTS.has(ext)) {
+    return {
+      kind: "google",
+      url: `https://docs.google.com/gview?url=${encodeURIComponent(doc.signed_url)}&embedded=true`,
+      ext,
+    };
+  }
+
+  // Known unsupported types — explicit download fallback
+  return { kind: "unsupported", url: doc.signed_url, ext };
+}

From 551b22c84fca142a79fc1a3b6cb5d0cfb2f87784 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Thu, 4 Jun 2026 22:40:48 +0530
Subject: [PATCH 2/8] fix(scrollbar): use the primary color in scrollbar

---
 app/components/analytics/BreakdownPanel.tsx |  2 +-
 app/globals.css                             | 24 ++++++++++++---------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/components/analytics/BreakdownPanel.tsx b/app/components/analytics/BreakdownPanel.tsx
index 1a8d0f3a..8f694d88 100644
--- a/app/components/analytics/BreakdownPanel.tsx
+++ b/app/components/analytics/BreakdownPanel.tsx
@@ -138,7 +138,7 @@ export default function BreakdownPanel({
             {groupHeader}-wise {metricLabel}
           </h4>
         </header>
-        <div className="flex-1 min-h-0 max-h-80 overflow-y-auto custom-scroll-accent">
+        <div className="flex-1 min-h-0 max-h-80 overflow-y-auto">
           <table className="w-full text-sm">
             <thead className="sticky top-0 bg-accent-primary/10 backdrop-blur-3xl">
               <tr className="text-[11px] uppercase tracking-wide text-black">
diff --git a/app/globals.css b/app/globals.css
index 66fb0d6f..f3454816 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -251,25 +251,29 @@ a {
 }
 
 /**
- * Accent-colored thin scrollbar for compact data tables.
- * Applied via className="custom-scroll-accent" on a scroll container.
+ * Global scrollbar styling — applies the accent-primary colour to every
+ * scrollable container in the app.
  */
-.custom-scroll-accent::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
-.custom-scroll-accent::-webkit-scrollbar-track {
+::-webkit-scrollbar-track {
   background: transparent;
 }
-.custom-scroll-accent::-webkit-scrollbar-thumb {
-  background-color: color-mix(in srgb, var(--color-accent-primary) 60%, white);
-  border-radius: 3px;
+::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--color-accent-primary) 50%, white);
+  border-radius: 4px;
 }
-.custom-scroll-accent::-webkit-scrollbar-thumb:hover {
+::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-accent-primary);
 }
-.custom-scroll-accent {
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+html {
   scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--color-accent-primary) 60%, white)
+  scrollbar-color: color-mix(in srgb, var(--color-accent-primary) 50%, white)
     transparent;
 }

From 8e99eb75f9122e41c7335ead51562952938b1aeb Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Thu, 4 Jun 2026 22:41:52 +0530
Subject: [PATCH 3/8] fix(*): remove the unwanted js comments

---
 app/hooks/useSttData.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/app/hooks/useSttData.ts b/app/hooks/useSttData.ts
index e7af5ac0..9fa3a7af 100644
--- a/app/hooks/useSttData.ts
+++ b/app/hooks/useSttData.ts
@@ -32,12 +32,6 @@ interface UseSttDataResult {
   loadResults: (runId: number) => Promise<void>;
 }
 
-/**
- * Owns the read-side state for the speech-to-text page: the list of
- * languages, datasets, runs, and the currently-loaded results, plus the
- * loaders that populate them. The page passes the active tab so we only
- * fetch runs when it's relevant.
- */
 export function useSttData(
   activeTab: "datasets" | "evaluations",
 ): UseSttDataResult {

From 9402baf793bf1e4575f6b6666b5ae37b1c25ee5b Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Thu, 4 Jun 2026 22:43:23 +0530
Subject: [PATCH 4/8] fix(*): move the stt type inside the types folder

---
 app/hooks/useSttData.ts       | 17 +----------------
 app/lib/types/speechToText.ts | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/app/hooks/useSttData.ts b/app/hooks/useSttData.ts
index 9fa3a7af..a9b7dd92 100644
--- a/app/hooks/useSttData.ts
+++ b/app/hooks/useSttData.ts
@@ -14,24 +14,9 @@ import {
   DatasetsResponse,
   RunsResponse,
   RunDetailResponse,
+  UseSttDataResult,
 } from "@/app/lib/types/speechToText";
 
-interface UseSttDataResult {
-  languages: Language[];
-  datasets: Dataset[];
-  runs: STTRun[];
-  results: STTResult[];
-  selectedRunId: number | null;
-  setSelectedRunId: (id: number | null) => void;
-  setResults: React.Dispatch<React.SetStateAction<STTResult[]>>;
-  isLoadingDatasets: boolean;
-  isLoadingRuns: boolean;
-  isLoadingResults: boolean;
-  loadDatasets: () => Promise<void>;
-  loadRuns: () => Promise<void>;
-  loadResults: (runId: number) => Promise<void>;
-}
-
 export function useSttData(
   activeTab: "datasets" | "evaluations",
 ): UseSttDataResult {
diff --git a/app/lib/types/speechToText.ts b/app/lib/types/speechToText.ts
index 758bb72d..8b316f5a 100644
--- a/app/lib/types/speechToText.ts
+++ b/app/lib/types/speechToText.ts
@@ -150,3 +150,19 @@ export interface STTViewDatasetModalData {
   datasetId: number;
   samples: STTSample[];
 }
+
+export interface UseSttDataResult {
+  languages: Language[];
+  datasets: Dataset[];
+  runs: STTRun[];
+  results: STTResult[];
+  selectedRunId: number | null;
+  setSelectedRunId: (id: number | null) => void;
+  setResults: React.Dispatch<React.SetStateAction<STTResult[]>>;
+  isLoadingDatasets: boolean;
+  isLoadingRuns: boolean;
+  isLoadingResults: boolean;
+  loadDatasets: () => Promise<void>;
+  loadRuns: () => Promise<void>;
+  loadResults: (runId: number) => Promise<void>;
+}

From 81b8f38650382e61e2f495cb5bc58550fd5e0d80 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Fri, 5 Jun 2026 11:40:59 +0530
Subject: [PATCH 5/8] fix(document): code clenaups and type define

---
 .../document/[document_id]/preview/route.ts   | 24 +--------
 app/components/knowledge-base/CsvPreview.tsx  | 11 ++--
 .../knowledge-base/DocumentPreviewModal.tsx   | 37 +++-----------
 app/lib/apiClient.ts                          | 37 +++++++++++++-
 app/lib/types/document.ts                     | 51 +++++++++++++++++++
 app/lib/utils/documentPreview.ts              | 23 +--------
 6 files changed, 98 insertions(+), 85 deletions(-)

diff --git a/app/api/document/[document_id]/preview/route.ts b/app/api/document/[document_id]/preview/route.ts
index 445d0271..84e7ead0 100644
--- a/app/api/document/[document_id]/preview/route.ts
+++ b/app/api/document/[document_id]/preview/route.ts
@@ -1,28 +1,6 @@
 import { NextResponse } from "next/server";
 import { apiClient } from "@/app/lib/apiClient";
-
-/**
- * Same-origin proxy for document content.
- *
- * Object-storage signed URLs are typically public for GET, but they (a) live
- * on a different origin so the browser blocks fetch() via CORS, and (b) often
- * set Content-Disposition: attachment so the browser downloads instead of
- * rendering. Both problems disappear when the bytes come from our own origin.
- *
- * The route fetches the document's signed URL server-side and streams the
- * bytes back with the upstream Content-Type intact (no attachment header).
- */
-
-interface DocumentDetail {
-  signed_url?: string;
-  fname?: string;
-}
-
-interface DocumentDetailEnvelope {
-  data?: DocumentDetail;
-  signed_url?: string;
-  fname?: string;
-}
+import { DocumentDetailEnvelope } from "@/app/lib/types/document";
 
 export async function GET(
   request: Request,
diff --git a/app/components/knowledge-base/CsvPreview.tsx b/app/components/knowledge-base/CsvPreview.tsx
index e1caeb2c..0f1e176c 100644
--- a/app/components/knowledge-base/CsvPreview.tsx
+++ b/app/components/knowledge-base/CsvPreview.tsx
@@ -3,11 +3,9 @@
 import { useEffect, useState } from "react";
 import { Loader } from "@/app/components/ui";
 import { useAuth } from "@/app/lib/context/AuthContext";
+import { apiFetchResponse } from "@/app/lib/apiClient";
 import { ParsedCsv, parseCsv } from "@/app/lib/utils/csv";
-
-interface CsvPreviewProps {
-  url: string;
-}
+import { CsvPreviewProps } from "@/app/lib/types/document";
 
 export default function CsvPreview({ url }: CsvPreviewProps) {
   const { activeKey } = useAuth();
@@ -21,10 +19,7 @@ export default function CsvPreview({ url }: CsvPreviewProps) {
     setLoading(true);
     setError(null);
     setData(null);
-    fetch(url, {
-      headers: apiKey ? { "X-API-KEY": apiKey } : undefined,
-      credentials: "include",
-    })
+    apiFetchResponse(url, apiKey)
       .then((r) => {
         if (!r.ok) throw new Error(`Server returned ${r.status}`);
         return r.text();
diff --git a/app/components/knowledge-base/DocumentPreviewModal.tsx b/app/components/knowledge-base/DocumentPreviewModal.tsx
index ae53a911..c9d92e51 100644
--- a/app/components/knowledge-base/DocumentPreviewModal.tsx
+++ b/app/components/knowledge-base/DocumentPreviewModal.tsx
@@ -4,24 +4,17 @@ import { useEffect, useMemo, useState } from "react";
 import { Button, Loader, Modal } from "@/app/components/ui";
 import { DownloadIcon } from "@/app/components/icons";
 import { formatDate } from "@/app/components/utils";
-import { Document } from "@/app/lib/types/document";
 import {
+  Document,
   DocumentPreviewKind,
-  getDocumentPreviewSource,
-} from "@/app/lib/utils/documentPreview";
-import CsvPreview from "./CsvPreview";
-
-interface DocumentPreviewModalProps {
-  open: boolean;
-  onClose: () => void;
-  documents: Document[];
-  previewDoc: Document | null;
-  isLoading?: boolean;
-  onSelectDocument: (doc: Document) => void;
-}
+  DocumentPreviewModalProps,
+  DocumentSidebarProps,
+  PreviewPaneProps,
+} from "@/app/lib/types/document";
+import { getDocumentPreviewSource } from "@/app/lib/utils/documentPreview";
+import CsvPreview from "@/app/components/knowledge-base/CsvPreview";
 
 // Native iframes are likely to silently fail (cancelled download, bad MIME);
-// viewer-rendered docs can legitimately take longer. Give each its own budget.
 const IFRAME_TIMEOUT_MS: Record<DocumentPreviewKind, number> = {
   native: 12000,
   office: 25000,
@@ -97,12 +90,6 @@ export default function DocumentPreviewModal({
   );
 }
 
-interface DocumentSidebarProps {
-  documents: Document[];
-  previewDoc: Document | null;
-  onSelectDocument: (doc: Document) => void;
-}
-
 function DocumentSidebar({
   documents,
   previewDoc,
@@ -179,16 +166,6 @@ function PreviewHeader({ previewDoc }: { previewDoc: Document | null }) {
   );
 }
 
-interface PreviewPaneProps {
-  previewDoc: Document | null;
-  previewUrl: string | null;
-  kind: DocumentPreviewKind;
-  renderIframe: boolean;
-  showLoader: boolean;
-  frameTimedOut: boolean;
-  onFrameLoad: () => void;
-}
-
 function PreviewPane({
   previewDoc,
   previewUrl,
diff --git a/app/lib/apiClient.ts b/app/lib/apiClient.ts
index ba7233a8..a1952bfd 100644
--- a/app/lib/apiClient.ts
+++ b/app/lib/apiClient.ts
@@ -4,7 +4,6 @@ import { AUTH_EXPIRED_EVENT } from "@/app/lib/constants";
 const BACKEND_URL = process.env.BACKEND_URL || "http://localhost:8000";
 export type UploadPhase = "uploading" | "processing" | "done";
 
-/** Coalesces concurrent refresh calls into a single request. */
 let refreshPromise: Promise<boolean> | null = null;
 
 /**
@@ -224,7 +223,6 @@ export async function apiFetch<T>(
     throw new Error(message);
   }
 
-  // Auth endpoints (login, register, etc.) — never auto-refresh, just throw
   if (url.startsWith("/api/auth/")) {
     throw new Error(message);
   }
@@ -252,3 +250,38 @@ export async function apiFetch<T>(
   dispatchAuthExpired();
   throw new Error("Session expired. Please log in again.");
 }
+
+/**
+ * Authenticated fetch that returns the raw `Response`, with the same
+ * X-API-KEY + cookie + silent-refresh-on-401 behaviour as `apiFetch`.
+ */
+export async function apiFetchResponse(
+  url: string,
+  apiKey: string,
+  options: RequestInit = {},
+): Promise<Response> {
+  const buildHeaders = () => {
+    const headers = new Headers(options.headers);
+    if (apiKey) headers.set("X-API-KEY", apiKey);
+    return headers;
+  };
+
+  const doFetch = () =>
+    fetch(url, {
+      ...options,
+      headers: buildHeaders(),
+      credentials: "include",
+    });
+
+  const res = await doFetch();
+  if (res.ok || res.status !== 401) return res;
+
+  // Auth endpoints — never auto-refresh.
+  if (url.startsWith("/api/auth/")) return res;
+
+  const refreshed = await tryRefreshToken();
+  if (refreshed) return doFetch();
+
+  dispatchAuthExpired();
+  return res;
+}
diff --git a/app/lib/types/document.ts b/app/lib/types/document.ts
index 3cd64a2f..ba5dd438 100644
--- a/app/lib/types/document.ts
+++ b/app/lib/types/document.ts
@@ -8,6 +8,15 @@ export interface Document {
   updated_at?: string;
 }
 
+export interface DocumentDetail {
+  signed_url?: string;
+  fname?: string;
+}
+
+export interface DocumentDetailEnvelope extends DocumentDetail {
+  data?: DocumentDetail;
+}
+
 export interface Collection {
   id: string;
   name?: string;
@@ -19,3 +28,45 @@ export interface Collection {
   job_id?: string;
   documents?: Document[];
 }
+
+export interface CsvPreviewProps {
+  url: string;
+}
+
+export interface DocumentPreviewModalProps {
+  open: boolean;
+  onClose: () => void;
+  documents: Document[];
+  previewDoc: Document | null;
+  isLoading?: boolean;
+  onSelectDocument: (doc: Document) => void;
+}
+
+export type DocumentPreviewKind =
+  | "native"
+  | "office"
+  | "google"
+  | "csv"
+  | "unsupported";
+
+export interface DocumentPreviewSource {
+  kind: DocumentPreviewKind;
+  url: string | null;
+  ext?: string;
+}
+
+export interface PreviewPaneProps {
+  previewDoc: Document | null;
+  previewUrl: string | null;
+  kind: DocumentPreviewKind;
+  renderIframe: boolean;
+  showLoader: boolean;
+  frameTimedOut: boolean;
+  onFrameLoad: () => void;
+}
+
+export interface DocumentSidebarProps {
+  documents: Document[];
+  previewDoc: Document | null;
+  onSelectDocument: (doc: Document) => void;
+}
diff --git a/app/lib/utils/documentPreview.ts b/app/lib/utils/documentPreview.ts
index 78d29597..9e1c172f 100644
--- a/app/lib/utils/documentPreview.ts
+++ b/app/lib/utils/documentPreview.ts
@@ -1,25 +1,4 @@
-import { Document } from "@/app/lib/types/document";
-
-/**
- * How to render a document in the preview iframe:
- * - `native`     — browser can render directly (pdf, images, txt, html…)
- * - `office`     — route through Microsoft Office Online Viewer (Word/Excel/PowerPoint)
- * - `google`     — route through Google Docs Viewer (tsv — Office viewer can't handle these)
- * - `csv`        — fetch + parse client-side and render as a table (more reliable than gview)
- * - `unsupported`— no inline preview; fall back to download link
- */
-export type DocumentPreviewKind =
-  | "native"
-  | "office"
-  | "google"
-  | "csv"
-  | "unsupported";
-
-export interface DocumentPreviewSource {
-  kind: DocumentPreviewKind;
-  url: string | null;
-  ext?: string; // useful for the UI to branch on file type within a kind
-}
+import { Document, DocumentPreviewSource } from "@/app/lib/types/document";
 
 const NATIVE_EXTS = new Set([
   "pdf",

From 36a4f5eccadcbf848007245b90975965b12f33a4 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Fri, 5 Jun 2026 11:44:47 +0530
Subject: [PATCH 6/8] fix(clenaups): type define and js comment

---
 app/components/knowledge-base/CsvPreview.tsx |  4 ++--
 app/globals.css                              |  3 +--
 app/lib/types/document.ts                    |  5 +++++
 app/lib/utils/csv.ts                         | 15 ++++++++-------
 app/lib/utils/documentPreview.ts             |  1 -
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/components/knowledge-base/CsvPreview.tsx b/app/components/knowledge-base/CsvPreview.tsx
index 0f1e176c..d93bfa5f 100644
--- a/app/components/knowledge-base/CsvPreview.tsx
+++ b/app/components/knowledge-base/CsvPreview.tsx
@@ -4,8 +4,8 @@ import { useEffect, useState } from "react";
 import { Loader } from "@/app/components/ui";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { apiFetchResponse } from "@/app/lib/apiClient";
-import { ParsedCsv, parseCsv } from "@/app/lib/utils/csv";
-import { CsvPreviewProps } from "@/app/lib/types/document";
+import { parseCsv } from "@/app/lib/utils/csv";
+import { CsvPreviewProps, ParsedCsv } from "@/app/lib/types/document";
 
 export default function CsvPreview({ url }: CsvPreviewProps) {
   const { activeKey } = useAuth();
diff --git a/app/globals.css b/app/globals.css
index f3454816..d8355ba2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -251,8 +251,7 @@ a {
 }
 
 /**
- * Global scrollbar styling — applies the accent-primary colour to every
- * scrollable container in the app.
+ * Global scrollbar styling — applies the accent-primary colour to every scrollable container
  */
 ::-webkit-scrollbar {
   width: 6px;
diff --git a/app/lib/types/document.ts b/app/lib/types/document.ts
index ba5dd438..37cb1160 100644
--- a/app/lib/types/document.ts
+++ b/app/lib/types/document.ts
@@ -70,3 +70,8 @@ export interface DocumentSidebarProps {
   previewDoc: Document | null;
   onSelectDocument: (doc: Document) => void;
 }
+
+export interface ParsedCsv {
+  headers: string[];
+  rows: string[][];
+}
diff --git a/app/lib/utils/csv.ts b/app/lib/utils/csv.ts
index 9dbda715..88741420 100644
--- a/app/lib/utils/csv.ts
+++ b/app/lib/utils/csv.ts
@@ -1,4 +1,8 @@
-/** Parse a single CSV line. Handles quoted fields and escaped quotes ("") */
+import { ParsedCsv } from "@/app/lib/types/document";
+
+/**
+ * Parse a single CSV line. Handles quoted fields and escaped quotes ("")
+ **/
 export const parseCsvRow = (line: string): string[] => {
   const result: string[] = [];
   let current = "";
@@ -22,12 +26,9 @@ export const parseCsvRow = (line: string): string[] => {
   return result;
 };
 
-export interface ParsedCsv {
-  headers: string[];
-  rows: string[][];
-}
-
-/** Parse a CSV file into headers + rows. First non-empty line is treated as the header row. */
+/**
+ * Parse a CSV file into headers + rows. First non-empty line is treated as the header row.
+ **/
 export const parseCsv = (text: string): ParsedCsv => {
   const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
   const headers = lines.length > 0 ? parseCsvRow(lines[0]) : [];
diff --git a/app/lib/utils/documentPreview.ts b/app/lib/utils/documentPreview.ts
index 9e1c172f..6c304d30 100644
--- a/app/lib/utils/documentPreview.ts
+++ b/app/lib/utils/documentPreview.ts
@@ -73,6 +73,5 @@ export function getDocumentPreviewSource(
     };
   }
 
-  // Known unsupported types — explicit download fallback
   return { kind: "unsupported", url: doc.signed_url, ext };
 }

From 042a0deba7f66a3b514b8dc88c95048e36b43ea6 Mon Sep 17 00:00:00 2001
From: Ayush <80516839+Ayush8923@users.noreply.github.com>
Date: Fri, 5 Jun 2026 15:12:39 +0530
Subject: [PATCH 7/8] Update app/components/knowledge-base/CsvPreview.tsx

Co-authored-by: Prashant Vasudevan <71649489+vprashrex@users.noreply.github.com>
---
 app/components/knowledge-base/CsvPreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/knowledge-base/CsvPreview.tsx b/app/components/knowledge-base/CsvPreview.tsx
index d93bfa5f..6c09e970 100644
--- a/app/components/knowledge-base/CsvPreview.tsx
+++ b/app/components/knowledge-base/CsvPreview.tsx
@@ -49,7 +49,7 @@ export default function CsvPreview({ url }: CsvPreviewProps) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-2 px-6 text-center">
         <p className="text-sm text-text-secondary">
-          Couldn&apos;t load CSV preview.
+          Couldn't load CSV preview.
         </p>
         <p className="text-xs text-text-secondary">{error}</p>
       </div>

From e08ca6d2de1ea8e6e5373a67f12ae092ad5bf586 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Fri, 5 Jun 2026 15:17:21 +0530
Subject: [PATCH 8/8] fix(collection): fix the eslint rule

---
 app/components/knowledge-base/CsvPreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/knowledge-base/CsvPreview.tsx b/app/components/knowledge-base/CsvPreview.tsx
index 6c09e970..d93bfa5f 100644
--- a/app/components/knowledge-base/CsvPreview.tsx
+++ b/app/components/knowledge-base/CsvPreview.tsx
@@ -49,7 +49,7 @@ export default function CsvPreview({ url }: CsvPreviewProps) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-2 px-6 text-center">
         <p className="text-sm text-text-secondary">
-          Couldn't load CSV preview.
+          Couldn&apos;t load CSV preview.
         </p>
         <p className="text-xs text-text-secondary">{error}</p>
       </div>