Ext: Polish - Better loading state input bar + Desifn feedback (#8999)

* Ext: Polish - Better loading state input bar + Desifn feedback * Apply feedback
dust-tt · Nov 28, 2024 · 149b1a3 · 149b1a3
1 parent 66e190e
commit 149b1a3
Show file tree

Hide file tree

Showing 16 changed files with 161 additions and 55 deletions.
diff --git a/extension/app/src/components/assistants/AssistantFavorites.tsx b/extension/app/src/components/assistants/AssistantFavorites.tsx
@@ -40,7 +40,7 @@ export function AssistantFavorites() {
     <div className="h-full w-full pt-2 pb-12">
       <Page.SectionHeader title="Favorites" />
       {hasFavorites ? (
-        <div className="relative grid w-full grid-cols-1 sm:grid-cols-2 gap-2">
+        <div className="relative grid w-full grid-cols-2 gap-2">
           {agentConfigurations.map(
             ({ sId, name, pictureUrl, lastAuthors, description }) => (
               <AssistantPreview

diff --git a/extension/app/src/components/assistants/AssistantPicker.tsx b/extension/app/src/components/assistants/AssistantPicker.tsx
@@ -22,12 +22,14 @@ export function AssistantPicker({
   onItemClick,
   pickerButton,
   size = "md",
+  isLoading,
 }: {
   owner: LightWorkspaceType;
   assistants: LightAgentConfigurationType[];
   onItemClick: (assistant: LightAgentConfigurationType) => void;
   pickerButton?: React.ReactNode;
   size?: "xs" | "sm" | "md";
+  isLoading?: boolean;
 }) {
   const [searchText, setSearchText] = useState("");
   const [searchedAssistants, setSearchedAssistants] = useState<
@@ -56,6 +58,7 @@ export function AssistantPicker({
             isSelect
             size={size}
             tooltip="Pick an assistant"
+            disabled={isLoading ?? false}
           />
         )}
       </DropdownMenuTrigger>
@@ -64,7 +67,6 @@ export function AssistantPicker({
           ref={searchbarRef}
           placeholder="Search"
           name="input"
-          size="xs"
           value={searchText}
           onChange={setSearchText}
           onKeyDown={(e) => {

diff --git a/extension/app/src/components/conversation/AgentMessage.tsx b/extension/app/src/components/conversation/AgentMessage.tsx
@@ -22,10 +22,7 @@ import {
   isWebsearchActionType,
   removeNulls,
 } from "@dust-tt/client";
-import type {
-  ConversationMessageEmojiSelectorProps,
-  ConversationMessageSizeType,
-} from "@dust-tt/sparkle";
+import type { ConversationMessageSizeType } from "@dust-tt/sparkle";
 import {
   ArrowPathIcon,
   Button,
@@ -109,7 +106,6 @@ interface AgentMessageProps {
   conversationId: string;
   isLastMessage: boolean;
   message: AgentMessagePublicType;
-  messageEmoji?: ConversationMessageEmojiSelectorProps;
   owner: LightWorkspaceType;
   size: ConversationMessageSizeType;
 }
@@ -124,7 +120,6 @@ export function AgentMessage({
   conversationId,
   isLastMessage,
   message,
-  messageEmoji,
   owner,
   size,
 }: AgentMessageProps) {
@@ -500,7 +495,6 @@ export function AgentMessage({
       name={`@${agentConfiguration.name}`}
       buttons={buttons}
       avatarBusy={agentMessageToRender.status === "created"}
-      messageEmoji={messageEmoji}
       renderName={() => {
         return (
           <div className="flex flex-row items-center gap-2">

diff --git a/extension/app/src/components/conversation/AttachFile.tsx b/extension/app/src/components/conversation/AttachFile.tsx
@@ -7,11 +7,13 @@ import { useRef } from "react";
 type AttachFileProps = {
   fileUploaderService: FileUploaderService;
   editorService: EditorService;
+  isLoading: boolean;
 };
 
 export const AttachFile = ({
   fileUploaderService,
   editorService,
+  isLoading,
 }: AttachFileProps) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   return (
@@ -38,6 +40,7 @@ export const AttachFile = ({
         onClick={async () => {
           fileInputRef.current?.click();
         }}
+        disabled={isLoading}
       />
     </>
   );

diff --git a/extension/app/src/components/conversation/AttachFragment.tsx b/extension/app/src/components/conversation/AttachFragment.tsx
@@ -1,14 +1,16 @@
-import { Button, CameraIcon, DocumentPlusIcon } from "@dust-tt/sparkle";
+import { Button, DocumentPlusIcon, ImageIcon } from "@dust-tt/sparkle";
 import { InputBarContext } from "@extension/components/input_bar/InputBarContext";
 import type { FileUploaderService } from "@extension/hooks/useFileUploaderService";
 import { useContext, useEffect } from "react";
 
 type AttachFragmentProps = {
   fileUploaderService: FileUploaderService;
+  isLoading: boolean;
 };
 
 export const AttachFragment = ({
   fileUploaderService,
+  isLoading,
 }: AttachFragmentProps) => {
   const { attachPageBlinking, setAttachPageBlinking } =
     useContext(InputBarContext);
@@ -38,11 +40,12 @@ export const AttachFragment = ({
               includeCapture: false,
             })
           }
+          disabled={isLoading}
         />
       </div>
       <div className="block sm:hidden">
         <Button
-          icon={CameraIcon}
+          icon={ImageIcon}
           tooltip="Attach page screenshot"
           variant="outline"
           size="sm"
@@ -52,6 +55,7 @@ export const AttachFragment = ({
               includeCapture: true,
             })
           }
+          disabled={isLoading}
         />
       </div>
       <div className="hidden sm:block">
@@ -68,11 +72,12 @@ export const AttachFragment = ({
               includeCapture: false,
             })
           }
+          disabled={isLoading}
         />
       </div>
       <div className="hidden sm:block">
         <Button
-          icon={CameraIcon}
+          icon={ImageIcon}
           label="Add page screenshot"
           tooltip="Attach page screenshot"
           variant="outline"
@@ -83,6 +88,7 @@ export const AttachFragment = ({
               includeCapture: true,
             })
           }
+          disabled={isLoading}
         />
       </div>
     </>

diff --git a/extension/app/src/components/conversation/MessageItem.tsx b/extension/app/src/components/conversation/MessageItem.tsx
@@ -32,8 +32,6 @@ const MessageItem = React.forwardRef<HTMLDivElement, MessageItemProps>(
       return null;
     }
 
-    const messageEmoji = undefined;
-
     switch (type) {
       case "user_message":
         const citations = message.contenFragments
@@ -81,7 +79,6 @@ const MessageItem = React.forwardRef<HTMLDivElement, MessageItemProps>(
               conversationId={conversationId}
               isLastMessage={isLastMessage}
               message={message}
-              messageEmoji={messageEmoji}
               owner={owner}
               size="compact"
             />

diff --git a/extension/app/src/components/conversation/UserMessage.tsx b/extension/app/src/components/conversation/UserMessage.tsx
@@ -1,9 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import type { LightWorkspaceType, UserMessageType } from "@dust-tt/client";
-import type {
-  ConversationMessageEmojiSelectorProps,
-  ConversationMessageSizeType,
-} from "@dust-tt/sparkle";
+import type { ConversationMessageSizeType } from "@dust-tt/sparkle";
 import { ConversationMessage, Markdown } from "@dust-tt/sparkle";
 import { AgentSuggestion } from "@extension/components/conversation/AgentSuggestion";
 import {
@@ -23,7 +20,6 @@ interface UserMessageProps {
   conversationId: string;
   isLastMessage: boolean;
   message: UserMessageType;
-  messageEmoji?: ConversationMessageEmojiSelectorProps;
   owner: LightWorkspaceType;
   size: ConversationMessageSizeType;
 }
@@ -33,7 +29,6 @@ export function UserMessage({
   conversationId,
   isLastMessage,
   message,
-  messageEmoji,
   owner,
   size,
 }: UserMessageProps) {
@@ -54,7 +49,6 @@ export function UserMessage({
     <ConversationMessage
       pictureUrl={message.user?.image || message.context.profilePictureUrl}
       name={message.context.fullName}
-      messageEmoji={messageEmoji}
       renderName={(name) => <div className="text-base font-medium">{name}</div>}
       type="user"
       citations={citations}

diff --git a/extension/app/src/components/input_bar/InputBar.tsx b/extension/app/src/components/input_bar/InputBar.tsx
@@ -188,7 +188,8 @@ export function AssistantInputBar({
   const handleSubmit: InputBarContainerProps["onEnterKeyDown"] = async (
     isEmpty,
     textAndMentions,
-    resetEditorText
+    resetEditorText,
+    setLoading
   ) => {
     if (isEmpty) {
       return;
@@ -204,7 +205,7 @@ export function AssistantInputBar({
       kind: cf.kind,
     }));
 
-    resetEditorText();
+    setLoading(true);
 
     if (isTabIncluded) {
       const files = await uploadContentTab({
@@ -228,7 +229,9 @@ export function AssistantInputBar({
       }
     }
 
-    onSubmit(text, mentions, newFiles);
+    await onSubmit(text, mentions, newFiles);
+    setLoading(false);
+    resetEditorText();
     resetUpload();
   };
 
@@ -238,15 +241,13 @@ export function AssistantInputBar({
 
   return (
     <div className="flex w-full flex-col">
-      {(isCapturing || isSubmitting) && (
+      {isCapturing && (
         <div className="fixed absolute inset-0 z-50 overflow-hidden">
           <div className="fixed flex inset-0 bg-structure-50/80 backdrop-blur-sm transition-opacity" />
           <div className="fixed top-0 left-0 h-full w-full flex flex-col justify-center items-center gap-4">
-            {isCapturing && (
-              <span className="z-50">
-                <Page.Header title="Screen capture in progress..." />
-              </span>
-            )}
+            <span className="z-50">
+              <Page.Header title="Screen capture in progress..." />
+            </span>
             <Spinner size="xl" />
           </div>
         </div>
@@ -276,7 +277,10 @@ export function AssistantInputBar({
             )}
           >
             <div className="relative flex w-full flex-1 flex-col">
-              <InputBarCitations fileUploaderService={fileUploaderService} />
+              <InputBarCitations
+                fileUploaderService={fileUploaderService}
+                disabled={isSubmitting ?? false}
+              />
 
               <InputBarContainer
                 disableAutoFocus={disableAutoFocus}
@@ -289,6 +293,7 @@ export function AssistantInputBar({
                 isTabIncluded={isTabIncluded}
                 setIncludeTab={setIncludeTab}
                 fileUploaderService={fileUploaderService}
+                isSubmitting={isSubmitting ?? false}
               />
             </div>
           </div>

diff --git a/extension/app/src/components/input_bar/InputBarCitations.tsx b/extension/app/src/components/input_bar/InputBarCitations.tsx
@@ -3,10 +3,12 @@ import type { FileUploaderService } from "@extension/hooks/useFileUploaderServic
 
 interface InputBarCitationsProps {
   fileUploaderService: FileUploaderService;
+  disabled: boolean;
 }
 
 export function InputBarCitations({
   fileUploaderService,
+  disabled,
 }: InputBarCitationsProps) {
   const processContentFragments = () => {
     const nodes: React.ReactNode[] = [];
@@ -21,9 +23,13 @@ export function InputBarCitations({
           size="xs"
           type={isImage ? "image" : "document"}
           imgSrc={blob.preview}
-          onClose={() => {
-            fileUploaderService.removeFile(blob.id);
-          }}
+          onClose={
+            disabled
+              ? undefined
+              : () => {
+                  fileUploaderService.removeFile(blob.id);
+                }
+          }
           isLoading={blob.isUploading}
         />
       );
@@ -37,7 +43,7 @@ export function InputBarCitations({
   }
 
   return (
-    <div className="mr-4 flex gap-2 overflow-auto border-b border-structure-300/50 pb-3">
+    <div className="flex gap-2 overflow-auto border-b border-structure-300/50 pb-3">
       {processContentFragments()}
     </div>
   );

diff --git a/extension/app/src/components/input_bar/InputBarContainer.tsx b/extension/app/src/components/input_bar/InputBarContainer.tsx
@@ -42,6 +42,7 @@ export const InputBarContainer = ({
   isTabIncluded,
   setIncludeTab,
   fileUploaderService,
+  isSubmitting,
 }: InputBarContainerProps) => {
   const suggestions = usePublicAssistantSuggestions(agentConfigurations);
 
@@ -76,18 +77,27 @@ export const InputBarContainer = ({
 
   const onClick = async () => {
     const jsonContent = editorService.getTextAndMentions();
-    onEnterKeyDown(editorService.isEmpty(), jsonContent, () => {
-      editorService.clearEditor();
-    });
+    onEnterKeyDown(
+      editorService.isEmpty(),
+      jsonContent,
+      () => {
+        editorService.clearEditor();
+      },
+      (loading) => {
+        editorService.setLoading(loading);
+      }
+    );
   };
 
   const SendAction = {
     label: "Send",
     onClick,
+    isLoading: isSubmitting,
   };
   const SendWithContentAction = {
     label: "Add page text + Send",
     onClick,
+    isLoading: isSubmitting,
   };
 
   return (
@@ -108,6 +118,7 @@ export const InputBarContainer = ({
           <AttachFile
             fileUploaderService={fileUploaderService}
             editorService={editorService}
+            isLoading={isSubmitting}
           />
           <AssistantPicker
             owner={owner}
@@ -116,12 +127,16 @@ export const InputBarContainer = ({
               editorService.insertMention({ id: c.sId, label: c.name });
             }}
             assistants={allAssistants}
+            isLoading={isSubmitting}
           />
         </div>
       </div>
 
       <div className="flex items-center justify-end space-x-2 mt-2">
-        <AttachFragment fileUploaderService={fileUploaderService} />
+        <AttachFragment
+          fileUploaderService={fileUploaderService}
+          isLoading={isSubmitting}
+        />
         <SplitButton
           size="sm"
           actions={[SendAction, SendWithContentAction]}
@@ -130,7 +145,7 @@ export const InputBarContainer = ({
           onActionChange={(action) => {
             setIncludeTab(action === SendWithContentAction);
           }}
-          disabled={editorService.isEmpty()}
+          disabled={isSubmitting || editorService.isEmpty()}
         />
       </div>
     </div>