detach input value from chat persistent state

BloopAI · Feb 21, 2024 · a5e7896 · a5e7896
1 parent d156807
commit a5e7896
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 57 deletions.
diff --git a/client/src/Project/CurrentTabContent/ChatTab/ChatPersistentState.tsx b/client/src/Project/CurrentTabContent/ChatTab/ChatPersistentState.tsx
@@ -147,10 +147,8 @@ const ChatPersistentState = ({
     });
   }, [queryIdToEdit]);
 
-  const [inputImperativeValue, setInputImperativeValue] = useState<Record<
-    string,
-    any
-  > | null>(null);
+  const [inputImperativeValue, setInputImperativeValue] =
+    useState<InputValueType>({ plain: '', parsed: [] });
   useEffect(() => {
     setChats((prev) => {
       return { ...prev, [tabKey]: { ...prev[tabKey], inputImperativeValue } };
@@ -199,34 +197,11 @@ const ChatPersistentState = ({
           ? { plain: value, parsed: splitUserInputAfterAutocomplete(value) }
           : { parsed: value, plain: concatenateParsedQuery(value) },
       );
-      setInputImperativeValue({
-        type: 'paragraph',
-        content:
-          typeof value === 'string'
-            ? [
-                {
-                  type: 'text',
-                  text: value,
-                },
-              ]
-            : value
-                .filter((pq) =>
-                  ['path', 'lang', 'text', 'repo'].includes(pq.type),
-                )
-                .map((pq) =>
-                  pq.type === 'text'
-                    ? { type: 'text', text: pq.text }
-                    : {
-                        type: 'mention',
-                        attrs: {
-                          id: pq.text,
-                          display: pq.text,
-                          type: pq.type,
-                          isFirst: false,
-                        },
-                      },
-                ),
-      });
+      setInputImperativeValue(
+        typeof value === 'string'
+          ? { plain: value, parsed: splitUserInputAfterAutocomplete(value) }
+          : { parsed: value, plain: concatenateParsedQuery(value) },
+      );
       focusInput();
     },
     [],
@@ -247,7 +222,7 @@ const ChatPersistentState = ({
       }
       eventSource.current?.close();
       setInputValue({ plain: '', parsed: [] });
-      setInputImperativeValue(null);
+      setInputImperativeValue({ plain: '', parsed: [] });
       setLoading(true);
       setQueryIdToEdit('');
       setHideMessagesFrom(null);
@@ -584,7 +559,7 @@ const ChatPersistentState = ({
   const onMessageEditCancel = useCallback(() => {
     setQueryIdToEdit('');
     setInputValue({ plain: '', parsed: [] });
-    setInputImperativeValue(null);
+    setInputImperativeValue({ plain: '', parsed: [] });
     setHideMessagesFrom(null);
   }, []);
   useEffect(() => {

diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/ReactMentions/index.tsx b/client/src/Project/CurrentTabContent/ChatTab/Input/ReactMentions/index.tsx
@@ -16,7 +16,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { getFileExtensionForLang, splitPath } from '../../../../../utils';
 import FileIcon from '../../../../../components/FileIcon';
 import { FolderIcon, RepositoryIcon } from '../../../../../icons';
-import { ParsedQueryType } from '../../../../../types/general';
+import { InputValueType } from '../../../../../types/general';
 import { blurInput } from '../../../../../utils/domUtils';
 import { MentionOptionType } from '../../../../../types/results';
 
@@ -25,10 +25,11 @@ type Props = {
   getDataLang: (s: string) => Promise<MentionOptionType[]>;
   getDataPath: (s: string) => Promise<MentionOptionType[]>;
   getDataRepo: (s: string) => Promise<MentionOptionType[]>;
-  value?: { parsed: ParsedQueryType[]; plain: string };
+  value?: InputValueType;
   onChange: (v: string) => void;
-  onSubmit: (v: { parsed: ParsedQueryType[]; plain: string }) => void;
+  onSubmit: (v: InputValueType) => void;
   isDisabled?: boolean;
+  initialValue?: InputValueType;
 };
 
 const inputStyle = {
@@ -67,10 +68,18 @@ const ReactMentionsInput = ({
   getDataLang,
   value,
   isDisabled,
+  initialValue,
 }: Props) => {
   const { t } = useTranslation();
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [isComposing, setComposition] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    if (initialValue) {
+      setInputValue(initialValue.plain);
+    }
+  }, [initialValue]);
 
   useEffect(() => {
     if (inputRef.current) {
@@ -126,12 +135,12 @@ const ReactMentionsInput = ({
     setTimeout(() => setComposition(false), 10);
   }, []);
 
-  const handleChange = useCallback<OnChangeHandlerFunc>(
-    (e) => {
-      onChange(e.target.value);
-    },
-    [onChange],
-  );
+  const handleChange = useCallback<OnChangeHandlerFunc>((e) => {
+    setInputValue(e.target.value);
+  }, []);
+  useEffect(() => {
+    onChange(inputValue);
+  }, [inputValue]);
 
   const renderRepoSuggestion = useCallback(
     (
@@ -245,7 +254,7 @@ const ReactMentionsInput = ({
   return (
     <div className="w-full body-base pb-4 !leading-[24px] bg-transparent outline-none focus:outline-0 resize-none flex-grow-0 flex flex-col justify-center">
       <MentionsInput
-        value={value?.plain || ''}
+        value={inputValue}
         // id={id}
         onChange={handleChange}
         className={`ReactMention w-full bg-transparent rounded-lg outline-none focus:outline-0 resize-none

diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx b/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx
@@ -15,6 +15,7 @@ import {
   ChatMessageServer,
   FileTabType,
   InputEditorContent,
+  InputValueType,
   ParsedQueryType,
   TabTypesEnum,
 } from '../../../../types/general';
@@ -33,25 +34,21 @@ import { mapEditorContentToInputValue } from './ProseMirror/utils';
 import ReactMentionsInput from './ReactMentions';
 
 type Props = {
-  value?: { parsed: ParsedQueryType[]; plain: string };
-  valueToEdit?: Record<string, any> | null;
+  value?: InputValueType;
+  valueToEdit?: InputValueType;
   generationInProgress?: boolean;
   isStoppable?: boolean;
   onStop?: () => void;
-  setInputValue: Dispatch<
-    SetStateAction<{ parsed: ParsedQueryType[]; plain: string }>
-  >;
+  setInputValue: Dispatch<SetStateAction<InputValueType>>;
   selectedLines?: [number, number] | null;
   setSelectedLines?: (l: [number, number] | null) => void;
   queryIdToEdit?: string;
   onMessageEditCancel?: () => void;
   conversation: ChatMessage[];
   hideMessagesFrom: number | null;
   setConversation: Dispatch<SetStateAction<ChatMessage[]>>;
-  setSubmittedQuery: Dispatch<
-    SetStateAction<{ parsed: ParsedQueryType[]; plain: string }>
-  >;
-  submittedQuery: { parsed: ParsedQueryType[]; plain: string };
+  setSubmittedQuery: Dispatch<SetStateAction<InputValueType>>;
+  submittedQuery: InputValueType;
   isInputAtBottom?: boolean;
   projectId: string;
 };
@@ -80,7 +77,7 @@ const ConversationInput = ({
   const { isVisible } = useContext(CommandBarContext.General);
   const { chatInputType } = useContext(UIContext.ChatInputType);
   const { setIsLeftSidebarFocused } = useContext(UIContext.Focus);
-  const [initialValue, setInitialValue] = useState<
+  const [initialProseValue, setInitialProseValue] = useState<
     Record<string, any> | null | undefined
   >({
     type: 'paragraph',
@@ -100,6 +97,7 @@ const ConversationInput = ({
             },
       ),
   });
+  const [initialMentionsValue, setInitialMentionsValue] = useState(value);
   const [hasRendered, setHasRendered] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -109,8 +107,26 @@ const ConversationInput = ({
   }, []);
 
   useEffect(() => {
-    if (hasRendered) {
-      setInitialValue(valueToEdit);
+    if (hasRendered && valueToEdit) {
+      setInitialProseValue({
+        type: 'paragraph',
+        content: valueToEdit?.parsed
+          .filter((pq) => ['path', 'lang', 'text', 'repo'].includes(pq.type))
+          .map((pq) =>
+            pq.type === 'text'
+              ? { type: 'text', text: pq.text }
+              : {
+                  type: 'mention',
+                  attrs: {
+                    id: pq.text,
+                    display: pq.text,
+                    type: pq.type,
+                    isFirst: false,
+                  },
+                },
+          ),
+      });
+      setInitialMentionsValue(valueToEdit);
     }
   }, [valueToEdit]);
 
@@ -314,6 +330,7 @@ const ConversationInput = ({
             getDataLang={getDataLang}
             getDataPath={getDataPath}
             getDataRepo={getDataRepo}
+            initialValue={initialMentionsValue}
           />
         ) : generationInProgress ? (
           <div className="select-none text-label-muted body-base cursor-default">
@@ -324,7 +341,7 @@ const ConversationInput = ({
             getDataLang={getDataLang}
             getDataPath={getDataPath}
             getDataRepo={getDataRepo}
-            initialValue={initialValue}
+            initialValue={initialProseValue}
             onChange={onChangeProseMirrorInput}
             onSubmit={onSubmit}
             placeholder={t(