feat: submit upload on Enter (#1160)

frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx

@@ -15,6 +15,7 @@ export const ActionsBar = (): JSX.Element => {
   const { addContent, contents, feedBrain, removeContent } =
     useKnowledgeUploader({
       setHasPendingRequests,
+      setShouldDisplayUploadCard,
     });
 
   const { t } = useTranslation(["chat"]);

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/FeedBrainInput/FeedBrainInput.tsx

@@ -6,26 +6,30 @@ import { BrainSelector } from "./components";
 import { useFeedBrainInput } from "./hooks/useFeedBrainInput";
 import { MentionItem } from "../ChatBar/components/MentionItem";
 
-export const FeedBrainInput = (): JSX.Element => {
+type FeedBrainInputProps = {
+  onSubmit: () => void;
+};
+
+export const FeedBrainInput = ({
+  onSubmit,
+}: FeedBrainInputProps): JSX.Element => {
   const { currentBrain, setCurrentBrainId } = useBrainContext();
 
   useFeedBrainInput();
 
   return (
-    <div className="flex flex-row flex-1 w-full item-start">
+    <div className="mt-3 flex flex-row flex-1 w-full item-start">
+      {currentBrain !== undefined && (
+        <MentionItem
+          text={currentBrain.name}
+          onRemove={() => {
+            setCurrentBrainId(null);
+          }}
+          trigger={"@"}
+        />
+      )}
       <div className="flex-1">
-        <div className="mt-3">
-          {currentBrain !== undefined && (
-            <MentionItem
-              text={currentBrain.name}
-              onRemove={() => {
-                setCurrentBrainId(null);
-              }}
-              trigger={"@"}
-            />
-          )}
-          <BrainSelector />
-        </div>
+        <BrainSelector onSubmit={onSubmit} />
       </div>
     </div>
   );

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/FeedBrainInput/components/BrainSelector/BrainSelector.tsx

@@ -11,7 +11,13 @@ import { BrainSuggestionsContainer } from "./components";
 import { SuggestionRow } from "./components/SuggestionRow";
 import { useBrainSelector } from "./hooks/useBrainSelector";
 
-export const BrainSelector = (): ReactElement => {
+type BrainSelectorProps = {
+  onSubmit: () => void;
+};
+
+export const BrainSelector = ({
+  onSubmit,
+}: BrainSelectorProps): ReactElement => {
   const {
     mentionInputRef,
     MentionSuggestions,
@@ -24,7 +30,9 @@ export const BrainSelector = (): ReactElement => {
     plugins,
     suggestions,
     handleEditorChange,
-  } = useBrainSelector();
+  } = useBrainSelector({
+    onSubmit,
+  });
   const { currentBrainId } = useBrainContext();
 
   const { t } = useTranslation(["chat"]);
@@ -41,7 +49,6 @@ export const BrainSelector = (): ReactElement => {
         ref={mentionInputRef}
         placeholder={hasBrainSelected ? "" : t("feed_brain_placeholder")}
         keyBindingFn={keyBindingFn}
-        readOnly={hasBrainSelected}
       />
       <div
         style={{

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/FeedBrainInput/components/BrainSelector/hooks/useBrainSelector.tsx

@@ -18,8 +18,12 @@ import { useMentionPlugin } from "./helpers/MentionPlugin";
 import { useMentionState } from "./helpers/MentionState";
 import { MentionTriggerType } from "../types";
 
+type UseBrainSelectorProps = {
+  onSubmit: () => void;
+};
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useBrainSelector = () => {
+export const useBrainSelector = ({ onSubmit }: UseBrainSelectorProps) => {
   const {
     currentBrainId,
     currentPromptId,
@@ -107,6 +111,12 @@ export const useBrainSelector = () => {
         return "backspace";
       }
 
+      if (e.key === "Enter" && !e.shiftKey) {
+        onSubmit();
+
+        return "submit";
+      }
+
       if (e.key === "ArrowUp" || e.key === "ArrowDown") {
         return undefined;
       }

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx

@@ -54,7 +54,7 @@ export const ChatInput = ({
 
       <div className="flex flex-1 flex-col items-center">
         {shouldDisplayUploadCard ? (
-          <FeedBrainInput />
+          <FeedBrainInput onSubmit={feedBrain} />
         ) : (
           <ChatBar
             message={message}
@@ -70,10 +70,7 @@ export const ChatInput = ({
             <Button
               disabled={currentBrainId === null || !hasContentToFeedBrain}
               variant="tertiary"
-              onClick={() => {
-                setShouldDisplayUploadCard(false);
-                feedBrain();
-              }}
+              onClick={feedBrain}
               type="button"
             >
               <MdSend className="text-3xl transform -rotate-90" />

frontend/app/chat/[chatId]/components/ActionsBar/hooks/useKnowledgeUploader.ts

@@ -17,10 +17,12 @@ import { FeedItemCrawlType, FeedItemType, FeedItemUploadType } from "../types";
 
 type UseKnowledgeUploaderProps = {
   setHasPendingRequests: (hasPendingRequests: boolean) => void;
+  setShouldDisplayUploadCard: (shouldDisplayUploadCard: boolean) => void;
 };
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useKnowledgeUploader = ({
   setHasPendingRequests,
+  setShouldDisplayUploadCard,
 }: UseKnowledgeUploaderProps) => {
   const [contents, setContents] = useState<FeedItemType[]>([]);
   const { publish } = useToast();
@@ -128,7 +130,16 @@ export const useKnowledgeUploader = ({
       return;
     }
 
+    if (contents.length === 0) {
+      publish({
+        variant: "danger",
+        text: t("addFiles"),
+      });
+
+      return;
+    }
     try {
+      setShouldDisplayUploadCard(false);
       setHasPendingRequests(true);
       const currentChatId = chatId ?? (await createChat("New Chat")).chat_id;
       const uploadPromises = files.map((file) =>