From 4fe2d268f8e3b2ff33d66bea00f6ee068c8a8209 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daphn=C3=A9=20Popin?= <daphne.popin@gmail.com>
Date: Tue, 26 Nov 2024 16:50:10 +0100
Subject: [PATCH] Ext: rework buttons in input bar

---
 .../components/conversation/AttachFile.tsx    |  44 +++++++
 .../conversation/AttachFragment.tsx           | 120 +++++++++---------
 .../app/src/components/input_bar/InputBar.tsx |   2 +-
 .../input_bar/InputBarContainer.tsx           |  38 +++---
 4 files changed, 126 insertions(+), 78 deletions(-)
 create mode 100644 extension/app/src/components/conversation/AttachFile.tsx

diff --git a/extension/app/src/components/conversation/AttachFile.tsx b/extension/app/src/components/conversation/AttachFile.tsx
new file mode 100644
index 0000000000000..440c55b6f1778
--- /dev/null
+++ b/extension/app/src/components/conversation/AttachFile.tsx
@@ -0,0 +1,44 @@
+import { supportedFileExtensions } from "@dust-tt/client";
+import { AttachmentIcon, Button } from "@dust-tt/sparkle";
+import type { EditorService } from "@extension/components/input_bar/editor/useCustomEditor";
+import type { FileUploaderService } from "@extension/hooks/useFileUploaderService";
+import { useRef } from "react";
+
+type AttachFileProps = {
+  fileUploaderService: FileUploaderService;
+  editorService: EditorService;
+};
+
+export const AttachFile = ({
+  fileUploaderService,
+  editorService,
+}: AttachFileProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  return (
+    <>
+      <input
+        accept={supportedFileExtensions.join(",")}
+        onChange={async (e) => {
+          await fileUploaderService.handleFileChange(e);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+          }
+          editorService.focusEnd();
+        }}
+        ref={fileInputRef}
+        style={{ display: "none" }}
+        type="file"
+        multiple={true}
+      />
+      <Button
+        icon={AttachmentIcon}
+        tooltip="Attach file"
+        variant="ghost"
+        size="xs"
+        onClick={async () => {
+          fileInputRef.current?.click();
+        }}
+      />
+    </>
+  );
+};
diff --git a/extension/app/src/components/conversation/AttachFragment.tsx b/extension/app/src/components/conversation/AttachFragment.tsx
index cf14a8be540c8..d2dd001fa786e 100644
--- a/extension/app/src/components/conversation/AttachFragment.tsx
+++ b/extension/app/src/components/conversation/AttachFragment.tsx
@@ -1,23 +1,14 @@
-import { supportedFileExtensions } from "@dust-tt/client";
-import {
-  AttachmentIcon,
-  Button,
-  CameraIcon,
-  DocumentPlusIcon,
-} from "@dust-tt/sparkle";
-import type { EditorService } from "@extension/components/input_bar/editor/useCustomEditor";
+import { Button, CameraIcon, DocumentPlusIcon } from "@dust-tt/sparkle";
 import { InputBarContext } from "@extension/components/input_bar/InputBarContext";
 import type { FileUploaderService } from "@extension/hooks/useFileUploaderService";
-import { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect } from "react";
 
 type AttachFragmentProps = {
   fileUploaderService: FileUploaderService;
-  editorService: EditorService;
 };
 
 export const AttachFragment = ({
   fileUploaderService,
-  editorService,
 }: AttachFragmentProps) => {
   const { attachPageBlinking, setAttachPageBlinking } =
     useContext(InputBarContext);
@@ -32,57 +23,68 @@ export const AttachFragment = ({
     return () => clearTimeout(timer);
   }, [attachPageBlinking]);
 
-  const fileInputRef = useRef<HTMLInputElement>(null);
   return (
     <>
-      <input
-        accept={supportedFileExtensions.join(",")}
-        onChange={async (e) => {
-          await fileUploaderService.handleFileChange(e);
-          if (fileInputRef.current) {
-            fileInputRef.current.value = "";
+      <div className="block sm:hidden">
+        <Button
+          icon={DocumentPlusIcon}
+          tooltip="Extract text from page and attach"
+          variant="outline"
+          size="sm"
+          className={attachPageBlinking ? "animate-[bgblink_200ms_3]" : ""}
+          onClick={() =>
+            fileUploaderService.uploadContentTab({
+              includeContent: true,
+              includeCapture: false,
+            })
           }
-          editorService.focusEnd();
-        }}
-        ref={fileInputRef}
-        style={{ display: "none" }}
-        type="file"
-        multiple={true}
-      />
-      <Button
-        icon={AttachmentIcon}
-        tooltip="Attach file"
-        variant="ghost"
-        size="xs"
-        onClick={async () => {
-          fileInputRef.current?.click();
-        }}
-      />
-      <Button
-        icon={DocumentPlusIcon}
-        tooltip="Attach tab content"
-        variant="ghost"
-        size="xs"
-        className={attachPageBlinking ? "animate-[bgblink_200ms_3]" : ""}
-        onClick={() =>
-          fileUploaderService.uploadContentTab({
-            includeContent: true,
-            includeCapture: false,
-          })
-        }
-      />
-      <Button
-        icon={CameraIcon}
-        tooltip="Attach tab screenshot"
-        variant="ghost"
-        size="xs"
-        onClick={() =>
-          fileUploaderService.uploadContentTab({
-            includeContent: false,
-            includeCapture: true,
-          })
-        }
-      />
+        />
+      </div>
+      <div className="block sm:hidden">
+        <Button
+          icon={CameraIcon}
+          tooltip="Take page screenshot and attach"
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            fileUploaderService.uploadContentTab({
+              includeContent: false,
+              includeCapture: true,
+            })
+          }
+        />
+      </div>
+      <div className="hidden sm:block">
+        <Button
+          icon={DocumentPlusIcon}
+          label="Add page text"
+          tooltip="Extract text from page and attach"
+          variant="outline"
+          size="sm"
+          className={attachPageBlinking ? "animate-[bgblink_200ms_3]" : ""}
+          onClick={() =>
+            fileUploaderService.uploadContentTab({
+              includeContent: true,
+              includeCapture: false,
+            })
+          }
+        />
+      </div>
+      <div className="hidden sm:block">
+        <Button
+          icon={CameraIcon}
+          label="Add page screenshot"
+          tooltip="Take page screenshot and attach"
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            fileUploaderService.uploadContentTab({
+              includeContent: false,
+              includeCapture: true,
+            })
+          }
+        />
+      </div>
     </>
   );
 };
diff --git a/extension/app/src/components/input_bar/InputBar.tsx b/extension/app/src/components/input_bar/InputBar.tsx
index 23e8ed1c56b3b..240116fb1c8a6 100644
--- a/extension/app/src/components/input_bar/InputBar.tsx
+++ b/extension/app/src/components/input_bar/InputBar.tsx
@@ -268,7 +268,7 @@ export function AssistantInputBar({
         <div className="flex w-full flex-1 flex-col items-end self-stretch">
           <div
             className={classNames(
-              "relative flex w-full flex-1 flex-col items-stretch gap-0 self-stretch pl-4",
+              "relative flex w-full flex-1 flex-col items-stretch gap-0 self-stretch p-2",
               "border-struture-200 border-t bg-white/90 backdrop-blur focus-within:border-structure-300",
               "transition-all",
               "rounded-2xl border-b border-l border-r border-element-500 focus-within:border-action-300 focus-within:shadow-md focus-within:ring-1",
diff --git a/extension/app/src/components/input_bar/InputBarContainer.tsx b/extension/app/src/components/input_bar/InputBarContainer.tsx
index ef80960a323e4..a8fde64ae1ef1 100644
--- a/extension/app/src/components/input_bar/InputBarContainer.tsx
+++ b/extension/app/src/components/input_bar/InputBarContainer.tsx
@@ -5,6 +5,7 @@ import type {
 } from "@dust-tt/client";
 import { SplitButton } from "@dust-tt/sparkle";
 import { AssistantPicker } from "@extension/components/assistants/AssistantPicker";
+import { AttachFile } from "@extension/components/conversation/AttachFile";
 import { AttachFragment } from "@extension/components/conversation/AttachFragment";
 import type { CustomEditorProps } from "@extension/components/input_bar/editor/useCustomEditor";
 import useCustomEditor from "@extension/components/input_bar/editor/useCustomEditor";
@@ -89,24 +90,21 @@ export const InputBarContainer = ({
   };
 
   return (
-    <div
-      id="InputBarContainer"
-      className="relative flex flex-1 flex-col sm:flex-row"
-    >
-      <EditorContent
-        editor={editor}
-        className={classNames(
-          contentEditableClasses,
-          "scrollbar-hide",
-          "overflow-y-auto",
-          "min-h-32",
-          "max-h-96"
-        )}
-      />
-
-      <div className="flex  flex-wrap flex-row items-end justify-between gap-2 self-stretch pb-2 pr-2 sm:flex-col sm:border-0">
-        <div className="flex py-2 space-x-1">
-          <AttachFragment
+    <div id="InputBarContainer" className="relative flex flex-col w-full">
+      <div className="flex space-x-2">
+        <EditorContent
+          editor={editor}
+          className={classNames(
+            contentEditableClasses,
+            "scrollbar-hide",
+            "overflow-y-auto",
+            "min-h-32",
+            "max-h-96",
+            "flex-1"
+          )}
+        />
+        <div className="flex items-start">
+          <AttachFile
             fileUploaderService={fileUploaderService}
             editorService={editorService}
           />
@@ -119,6 +117,10 @@ export const InputBarContainer = ({
             assistants={allAssistants}
           />
         </div>
+      </div>
+
+      <div className="flex items-center justify-end space-x-1 mt-2">
+        <AttachFragment fileUploaderService={fileUploaderService} />
         <SplitButton
           size="sm"
           actions={[SendAction, SendWithContentAction]}