From c93f7436abd60314d3bb67ab371472b665d4ed9a Mon Sep 17 00:00:00 2001
From: bracesproul <braceasproul@gmail.com>
Date: Thu, 17 Oct 2024 09:43:16 -0700
Subject: [PATCH] cr

---
 frontend/app/components/DocumentCard.tsx      |  28 ++++
 .../components/GeneratingQuestionsToolUI.tsx  | 122 ++++++++++++------
 .../components/SelectedDocumentsToolUI.tsx    |  29 +----
 3 files changed, 112 insertions(+), 67 deletions(-)
 create mode 100644 frontend/app/components/DocumentCard.tsx

diff --git a/frontend/app/components/DocumentCard.tsx b/frontend/app/components/DocumentCard.tsx
new file mode 100644
index 00000000..1fa50828
--- /dev/null
+++ b/frontend/app/components/DocumentCard.tsx
@@ -0,0 +1,28 @@
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+
+export type Document = {
+  page_content: string;
+  metadata: Record<string, any>;
+};
+
+export const DocumentCard = ({ document }: { document: Document }) => {
+  const description =
+    document.metadata.description && document.metadata.description !== ""
+      ? document.metadata.description
+      : document.page_content.slice(0, 250);
+
+  return (
+    <Card className="md:w-[200px] sm:w-[200px] w-full h-[110px] bg-inherit border-gray-500 flex flex-col">
+      <CardHeader className="flex-shrink-0 px-3 pt-2 pb-0">
+        <CardTitle className="text-sm font-light text-gray-300 line-clamp-1 overflow-hidden p-[-24px]">
+          {document.metadata.title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col px-3 flex-grow justify-between">
+        <p className="text-xs font-light text-gray-400 line-clamp-4 overflow-hidden">
+          {description}
+        </p>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/frontend/app/components/GeneratingQuestionsToolUI.tsx b/frontend/app/components/GeneratingQuestionsToolUI.tsx
index aff73dec..af780b1e 100644
--- a/frontend/app/components/GeneratingQuestionsToolUI.tsx
+++ b/frontend/app/components/GeneratingQuestionsToolUI.tsx
@@ -1,6 +1,6 @@
 import { useAssistantToolUI } from "@assistant-ui/react";
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
-import { LoaderCircle, Globe } from "lucide-react";
+import { LoaderCircle, Globe, Plus } from "lucide-react";
 import { DocumentDialog } from "./DocumentDialog";
 import {
   Tooltip,
@@ -8,53 +8,97 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "./ui/tooltip";
+import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
+import { TooltipIconButton } from "./ui/assistant-ui/tooltip-icon-button";
+import { DocumentCard, Document } from "./DocumentCard";
 
 type Question = {
   question: string;
   step: number;
   // Not rendered in the UI ATM.
   queries?: string[];
-  documents?: Record<string, any>[];
+  documents?: Document[];
 };
 
-const QuestionCard = ({ question }: { question: Question }) => (
-  <Card className="md:w-[250px] sm:w-[250px] w-full md:max-w-full min-h-[140px] max-h-fit bg-inherit border-gray-500 flex flex-col gap-2">
-    <CardHeader className="flex-shrink-0 px-3 pt-2 pb-0">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <CardTitle className="text-sm font-light text-gray-300 line-clamp-4 overflow-hidden">
-              {question.question}
-            </CardTitle>
-          </TooltipTrigger>
-          <TooltipContent className="max-w-[600px] whitespace-pre-wrap">
-            <p>{question.question}</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </CardHeader>
-    <CardContent className="flex flex-col flex-grow px-3 pb-2 justify-between">
-      <div className="flex flex-col gap-1 mt-auto">
-        <hr className="border-gray-400" />
-        <div className="flex flex-wrap items-start justify-start gap-2 pt-1">
-          {question.documents?.length ? (
-            question.documents?.map((doc: Record<string, any>, idx: number) => (
-              <DocumentDialog
-                key={`document-${question.step}-${idx}`}
-                document={doc}
-              />
-            ))
-          ) : (
-            <span className="flex items-center justify-start gap-2 text-gray-400">
-              <p className="text-sm">Finding documents</p>
-              <LoaderCircle className="animate-spin w-4 h-4" />
-            </span>
-          )}
+const QuestionCard = ({ question }: { question: Question }) => {
+  const displayedDocuments = question.documents?.slice(0, 6) || [];
+  const remainingDocuments = question.documents?.slice(6) || [];
+
+  return (
+    <Card className="md:w-[250px] sm:w-[250px] w-full md:max-w-full h-[140px] bg-inherit border-gray-500 flex flex-col gap-2">
+      <CardHeader className="flex-shrink-0 px-3 pt-2 pb-0">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <CardTitle className="text-sm font-light text-gray-300 line-clamp-4 overflow-hidden">
+                {question.question}
+              </CardTitle>
+            </TooltipTrigger>
+            <TooltipContent className="max-w-[600px] whitespace-pre-wrap">
+              <p>{question.question}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </CardHeader>
+      <CardContent className="flex flex-col flex-grow px-3 pb-2 justify-between mt-auto">
+        <div className="flex flex-col gap-1 mt-auto">
+          <hr className="border-gray-400" />
+          <div className="flex flex-wrap items-start justify-start gap-2 pt-1">
+            {question.documents?.length ? (
+              <>
+                {displayedDocuments.map((doc: Document, idx: number) => (
+                  <DocumentDialog
+                    key={`document-${question.step}-${idx}`}
+                    document={doc}
+                  />
+                ))}
+                {remainingDocuments.length > 0 && (
+                  <Sheet>
+                    <SheetTrigger>
+                      <TooltipIconButton
+                        tooltip={`See ${remainingDocuments.length} more documents`}
+                        variant="outline"
+                        className="w-6 h-6 z-50 transition-colors ease-in-out bg-transparent hover:bg-gray-500 border-gray-400 text-gray-300"
+                      >
+                        <Plus />
+                      </TooltipIconButton>
+                    </SheetTrigger>
+                    <SheetContent
+                      side="right"
+                      className="bg-[#282828] border-none overflow-y-auto flex-grow scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent md:min-w-[50vw] min-w-[70vw]"
+                    >
+                      <div className="flex flex-col gap-4">
+                        <h2 className="text-xl font-semibold text-gray-300">
+                          All Documents for Question
+                        </h2>
+                        <div className="flex flex-wrap gap-2">
+                          {question.documents?.map(
+                            (doc: Document, idx: number) => (
+                              <DocumentDialog
+                                key={`all-documents-${idx}`}
+                                document={doc}
+                                trigger={<DocumentCard document={doc} />}
+                              />
+                            ),
+                          )}
+                        </div>
+                      </div>
+                    </SheetContent>
+                  </Sheet>
+                )}
+              </>
+            ) : (
+              <span className="flex items-center justify-start gap-2 text-gray-400">
+                <p className="text-sm">Finding documents</p>
+                <LoaderCircle className="animate-spin w-4 h-4" />
+              </span>
+            )}
+          </div>
         </div>
-      </div>
-    </CardContent>
-  </Card>
-);
+      </CardContent>
+    </Card>
+  );
+};
 
 export const useGeneratingQuestionsUI = () =>
   useAssistantToolUI({
diff --git a/frontend/app/components/SelectedDocumentsToolUI.tsx b/frontend/app/components/SelectedDocumentsToolUI.tsx
index 5915d203..b9154075 100644
--- a/frontend/app/components/SelectedDocumentsToolUI.tsx
+++ b/frontend/app/components/SelectedDocumentsToolUI.tsx
@@ -1,35 +1,8 @@
 import { useAssistantToolUI } from "@assistant-ui/react";
-import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 import { BookOpenText, Plus } from "lucide-react";
 import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
 import { DocumentDialog } from "./DocumentDialog";
-
-type Document = {
-  page_content: string;
-  metadata: Record<string, any>;
-};
-
-const DocumentCard = ({ document }: { document: Document }) => {
-  const description =
-    document.metadata.description && document.metadata.description !== ""
-      ? document.metadata.description
-      : document.page_content.slice(0, 250);
-
-  return (
-    <Card className="md:w-[200px] sm:w-[200px] w-full h-[110px] bg-inherit border-gray-500 flex flex-col">
-      <CardHeader className="flex-shrink-0 px-3 pt-2 pb-0">
-        <CardTitle className="text-sm font-light text-gray-300 line-clamp-1 overflow-hidden p-[-24px]">
-          {document.metadata.title}
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="flex flex-col px-3 flex-grow justify-between">
-        <p className="text-xs font-light text-gray-400 line-clamp-4 overflow-hidden">
-          {description}
-        </p>
-      </CardContent>
-    </Card>
-  );
-};
+import { DocumentCard, Document } from "./DocumentCard";
 
 export const useSelectedDocumentsUI = () =>
   useAssistantToolUI({