insane div centering

dust-tt · Oct 3, 2023 · 3dc1bfe · 3dc1bfe
1 parent 9b90cd4
commit 3dc1bfe
Showing 1 changed file with 80 additions and 76 deletions.
diff --git a/front/components/assistant/conversation/RetrievalAction.tsx b/front/components/assistant/conversation/RetrievalAction.tsx
@@ -35,91 +35,95 @@ export default function RetrievalAction({
   }
 
   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">
-          <div className="flex items-center">
-            <span>Retrieved:</span>
-            <div
-              onClick={() => setDocListVisible(!docListVisible)}
-              className="ml-2"
-            >
+        <div className="row-span-1">
+          {retrievalAction.documents && (
+            <div onClick={() => setDocListVisible(!docListVisible)}>
               <Chip color="violet">
                 {retrievalAction.documents.length > 0
                   ? RetrievedDocumentsInfo(retrievalAction.documents)
                   : "No documents found"}
               </Chip>
             </div>
-          </div>
-          <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"
-            className={"pt-4"}
-          >
-            <ul className="space-y-2">
-              {retrievalAction.documents.map((document, i) => {
-                const provider = providerFromDocument(document);
-                return (
-                  <li key={i}>
-                    <a href={document.sourceUrl || ""}>
-                      {provider === "none" ? (
-                        <DocumentDuplicateStrokeIcon className="mr-1 inline-block h-4 w-4 text-slate-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 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-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>
+      </div>
+    </>
   );
 }