From 205e77c47ad5757af17276c6f2af47969eb03108 Mon Sep 17 00:00:00 2001
From: Henry Fontanier <h.fontanier@gmail.com>
Date: Tue, 3 Oct 2023 12:42:06 +0200
Subject: [PATCH] feat: display list of retrived documents when clicking on the
 chip (#1912)

* feat: display list of retrived documents when clicking on the chip

* insane div centering

* text xs + chevron icons

* hide results # on small screen
---
 .../conversation/RetrievalAction.tsx          | 145 ++++++++++++------
 1 file changed, 100 insertions(+), 45 deletions(-)

diff --git a/front/components/assistant/conversation/RetrievalAction.tsx b/front/components/assistant/conversation/RetrievalAction.tsx
index 8a93b4e0f7a4..cb3bad8d0587 100644
--- a/front/components/assistant/conversation/RetrievalAction.tsx
+++ b/front/components/assistant/conversation/RetrievalAction.tsx
@@ -1,9 +1,14 @@
 import {
+  ChevronDownIcon,
+  ChevronRightIcon,
   Chip,
   DocumentDuplicateStrokeIcon,
+  Icon,
   Spinner,
   Tooltip,
 } from "@dust-tt/sparkle";
+import { Transition } from "@headlessui/react";
+import { useState } from "react";
 
 import { classNames } from "@app/lib/utils";
 import {
@@ -24,65 +29,115 @@ export default function RetrievalAction({
   retrievalAction: RetrievalActionType;
 }) {
   const { query, relativeTimeFrame } = retrievalAction.params;
+  const [docListVisible, setDocListVisible] = useState(false);
+
   function shortText(text: string, maxLength = 20) {
     return text.length > maxLength
       ? text.substring(0, maxLength) + "..."
       : text;
   }
+
   return (
-    <div>
-      <div className="text-xs font-bold text-element-600">
-        Searching for:
-        <div className="ml-2 inline-block">
-          <Chip.List>
-            <Tooltip label="Docs created or updated during that time are included in the search">
-              <Chip
-                color="amber"
-                label={
-                  relativeTimeFrame
-                    ? "During the last " +
-                      (relativeTimeFrame.duration > 1
-                        ? `${relativeTimeFrame.duration} ${relativeTimeFrame.unit}s`
-                        : `${relativeTimeFrame.unit}`)
-                    : "All time"
-                }
-              />
-            </Tooltip>
-            <Tooltip label={`Query used for semantic search: ${query}`}>
-              <Chip
-                color="slate"
-                label={query ? shortText(query) : "No query"}
-              />
-            </Tooltip>
-          </Chip.List>
-        </div>
+    <>
+      <div className="flex flex-row items-center gap-2 pb-2">
+        <div className="text-xs font-bold text-element-600">Searching for:</div>
+        <Chip.List>
+          <Tooltip label="Docs created or updated during that time are included in the search">
+            <Chip
+              color="amber"
+              label={
+                relativeTimeFrame
+                  ? "During the last " +
+                    (relativeTimeFrame.duration > 1
+                      ? `${relativeTimeFrame.duration} ${relativeTimeFrame.unit}s`
+                      : `${relativeTimeFrame.unit}`)
+                  : "All time"
+              }
+            />
+          </Tooltip>
+          <Tooltip label={`Query used for semantic search: ${query}`}>
+            <Chip color="slate" label={query ? shortText(query) : "No query"} />
+          </Tooltip>
+        </Chip.List>
       </div>
-      {!retrievalAction.documents ? (
-        <div>
-          <div className="my-2 text-xs font-bold text-element-600">
-            Retrieving...
-          </div>
-          <Spinner size="sm" />
+      <div className="grid grid-cols-[auto,1fr] gap-2">
+        <div className="grid-cols-auto grid items-center">
+          {!retrievalAction.documents ? (
+            <div>
+              <div className="text-xs font-bold text-element-600">
+                Retrieving...
+              </div>
+              <Spinner size="sm" />
+            </div>
+          ) : (
+            <div className="text-xs font-bold text-element-600">
+              <span>Retrieved:</span>
+            </div>
+          )}
         </div>
-      ) : (
-        <div className="mt-2 text-xs font-bold text-element-600">
-          Retrieved:
-          <Chip color="violet" className="ml-2">
-            {retrievalAction.documents.length > 0
-              ? RetrievedDocumentsInfo(retrievalAction.documents)
-              : "No documents found"}
-          </Chip>
+        <div className="row-span-1">
+          {retrievalAction.documents && (
+            <div onClick={() => setDocListVisible(!docListVisible)}>
+              <Chip color="violet">
+                {retrievalAction.documents.length > 0
+                  ? RetrievedDocumentsInfo(retrievalAction.documents)
+                  : "No documents found"}
+                <Icon
+                  visual={docListVisible ? ChevronDownIcon : ChevronRightIcon}
+                />
+              </Chip>
+            </div>
+          )}
         </div>
-      )}
-    </div>
+        <div className="col-start-2 row-span-1">
+          {!!retrievalAction.documents?.length && (
+            <Transition
+              show={docListVisible}
+              enter="transition ease-out duration-200 transform"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="transition ease-in duration-75 transform"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <ul className="ml-2 gap-2">
+                {retrievalAction.documents.map((document, i) => {
+                  const provider = providerFromDocument(document);
+                  return (
+                    <li key={i}>
+                      <a
+                        href={document.sourceUrl || ""}
+                        className="front-bold text-xs text-element-800"
+                      >
+                        {provider === "none" ? (
+                          <DocumentDuplicateStrokeIcon className="mr-1 inline-block h-4 w-4 text-element-500" />
+                        ) : (
+                          <img
+                            src={
+                              PROVIDER_LOGO_PATH[providerFromDocument(document)]
+                            }
+                            className="mr-1 inline-block h-4 w-4"
+                          />
+                        )}
+                        {titleFromDocument(document)}
+                      </a>
+                    </li>
+                  );
+                })}
+              </ul>
+            </Transition>
+          )}
+        </div>
+      </div>
+    </>
   );
 }
 
 function RetrievedDocumentsInfo(documents: RetrievalDocumentType[]) {
   const summary = documentsSummary(documents);
   return (
-    <>
-      <span>{documents.length} results</span>
+    <div className="flex flex-row items-center">
+      <span className="hidden lg:block">{documents.length} results</span>
       {Object.keys(summary).map((k) => {
         return (
           <div key={k} className="ml-3 flex flex-initial flex-row items-center">
@@ -97,7 +152,7 @@ function RetrievedDocumentsInfo(documents: RetrievalDocumentType[]) {
           </div>
         );
       })}
-    </>
+    </div>
   );
 }