Better UI

dust-tt · Nov 15, 2023 · 7e4981c · 7e4981c
1 parent bb68650
commit 7e4981c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 59 deletions.
diff --git a/front/components/assistant/conversation/InputBar.tsx b/front/components/assistant/conversation/InputBar.tsx
@@ -3,11 +3,10 @@ import {
   Avatar,
   Button,
   Citation,
-  DropdownMenu,
   IconButton,
   PaperAirplaneIcon,
   StopIcon,
-  TrashIcon,
+  XCircleIcon,
 } from "@dust-tt/sparkle";
 import { Transition } from "@headlessui/react";
 // @ts-expect-error: type package doesn't load properly because of how we are loading pdfjs
@@ -480,7 +479,7 @@ export function AssistantInputBar({
         position={agentListPosition}
       />
       <div className="flex flex-1">
-        <div className="flex flex-1 flex-row items-center">
+        <div className="flex flex-1 flex-row items-end">
           <div
             className={classNames(
               "relative flex flex-1 flex-row items-stretch px-4",
@@ -491,6 +490,28 @@ export function AssistantInputBar({
                 : ""
             )}
           >
+            <div className="superarico flex flex-row items-end pb-4">
+              <input
+                type="file"
+                ref={fileInputRef}
+                style={{ display: "none" }}
+                onChange={async (e) => {
+                  const file = e?.target?.files?.[0];
+                  if (!file) return;
+                  await handleFileUpload(file);
+                }}
+              />
+              <IconButton
+                className="s-element-700"
+                variant={"tertiary"}
+                icon={AttachmentStrokeIcon}
+                size="md"
+                disabled={false}
+                onClick={() => {
+                  fileInputRef.current?.click();
+                }}
+              />
+            </div>
             <div className="flex flex-1 flex-col gap-y-2">
               <div
                 className={classNames(
@@ -503,11 +524,24 @@ export function AssistantInputBar({
                 Ask a question or get some @help
               </div>
 
-              {contentFragmentFilename && (
-                <Citation
-                  title={contentFragmentFilename}
-                  description={contentFragmentBody?.substring(0, 100)}
-                />
+              {contentFragmentFilename && contentFragmentBody && (
+                <div className="py-1">
+                  <Citation
+                    title={contentFragmentFilename}
+                    description={contentFragmentBody?.substring(0, 100)}
+                    action={
+                      <IconButton
+                        icon={XCircleIcon}
+                        size="sm"
+                        variant="tertiary"
+                        onClick={() => {
+                          setContentFragmentBody(undefined);
+                          setContentFragmentFilename(undefined);
+                        }}
+                      />
+                    }
+                  />
+                </div>
               )}
 
               <div
@@ -829,50 +863,6 @@ export function AssistantInputBar({
             >
               <div className="flex h-full flex-col justify-end">
                 <div className="flex flex-row items-center space-x-4 pr-2">
-                  <DropdownMenu>
-                    <DropdownMenu.Button>
-                      <IconButton
-                        variant={contentFragmentBody ? "primary" : "secondary"}
-                        icon={AttachmentStrokeIcon}
-                        size="md"
-                        disabled={false}
-                      />
-                    </DropdownMenu.Button>
-                    <DropdownMenu.Items>
-                      {!contentFragmentBody && (
-                        <Button
-                          variant="secondary"
-                          size="xs"
-                          label="Upload a file"
-                          onClick={() => {
-                            fileInputRef.current?.click();
-                          }}
-                        />
-                      )}
-                      {contentFragmentBody && (
-                        <>
-                          <div>{contentFragmentFilename}</div>
-                          <IconButton
-                            variant="primary"
-                            icon={TrashIcon}
-                            size="md"
-                            onClick={() => setContentFragmentBody(undefined)}
-                          />
-                        </>
-                      )}
-                      <input
-                        type="file"
-                        ref={fileInputRef}
-                        style={{ display: "none" }}
-                        onChange={async (e) => {
-                          const file = e?.target?.files?.[0];
-                          if (!file) return;
-                          await handleFileUpload(file);
-                        }}
-                      />
-                    </DropdownMenu.Items>
-                  </DropdownMenu>
-
                   <AssistantPicker
                     owner={owner}
                     onItemClick={(c) => {

diff --git a/front/pages/api/w/[wId]/assistant/conversations/index.ts b/front/pages/api/w/[wId]/assistant/conversations/index.ts
@@ -192,13 +192,11 @@ async function handler(
         conversation = updated;
       }
 
-      res
-        .status(200)
-        .json({
-          conversation,
-          message: newMessage ?? undefined,
-          contentFragment: newContentFragment ?? undefined,
-        });
+      res.status(200).json({
+        conversation,
+        message: newMessage ?? undefined,
+        contentFragment: newContentFragment ?? undefined,
+      });
       return;
 
     default: