Merge pull request #4 from CodeSignal/initial-message

Add the ability to specify the initial message in a new chat

Author: BrianGenisio

client/src/components/Chat/ChatView.tsx

@@ -1,7 +1,7 @@
 import { memo, useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useForm } from 'react-hook-form';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import { useGetMessagesByConvoId } from 'librechat-data-provider/react-query';
 import type { TMessage } from 'librechat-data-provider';
 import type { ChatFormValues } from '~/common';
@@ -19,10 +19,12 @@ import store from '~/store';
 
 function ChatView({ index = 0 }: { index?: number }) {
   const { conversationId } = useParams();
+  const [searchParams] = useSearchParams();
   const rootSubmission = useRecoilValue(store.submissionByIndex(index));
   const addedSubmission = useRecoilValue(store.submissionByIndex(index + 1));
 
   const fileMap = useFileMapContext();
+  const initialMessage = searchParams.get('initialMessage');
 
   const { data: messagesTree = null, isLoading } = useGetMessagesByConvoId(conversationId ?? '', {
     select: useCallback(
@@ -65,7 +67,7 @@ function ChatView({ index = 0 }: { index?: number }) {
           <Presentation>
             {content}
             <div className="w-full border-t-0 pl-0 pt-2 dark:border-white/20 md:w-[calc(100%-.5rem)] md:border-t-0 md:border-transparent md:pl-0 md:pt-0 md:dark:border-transparent">
-              <ChatForm index={index} />
+              <ChatForm index={index} initialMessage={initialMessage} />
               <Footer />
             </div>
           </Presentation>

client/src/components/Chat/Input/ChatForm.tsx

@@ -36,7 +36,7 @@ import SendButton from './SendButton';
 import Mention from './Mention';
 import store from '~/store';
 
-const ChatForm = ({ index = 0 }) => {
+const ChatForm = ({ index = 0, initialMessage = '' }: { index?: number; initialMessage?: string | null }) => {
   const submitButtonRef = useRef<HTMLButtonElement>(null);
   const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
   useQueryParams({ textAreaRef });
@@ -130,6 +130,12 @@ const ChatForm = ({ index = 0 }) => {
     },
   });
 
+  useEffect(() => {
+    if (initialMessage) {
+      methods.setValue('text', initialMessage);
+    }
+  }, [initialMessage, methods]);
+
   useEffect(() => {
     if (!isSearching && textAreaRef.current && !disableInputs) {
       textAreaRef.current.focus();