refactor(chat): move prefilled message logic to custom hook

src/pages/Chat/components/ChatInput.tsx

@@ -15,25 +15,9 @@ import SpeechToText, {
 } from '../../../hooks/useSpeechToText';
 import { useChatContext } from '../../../store/chat';
 import { MessageExtra } from '../../../types';
-import { cleanCurrentUrl } from '../../../utils';
+import { usePrefilledMessage } from '../hooks/usePrefilledMessage';
 import { DropzoneArea } from './DropzoneArea';
 
-/**
- * If the current URL contains "?m=...", prefill the message input with the value.
- * If the current URL contains "?q=...", prefill and SEND the message.
- */
-function getPrefilledContent() {
-  const searchParams = new URL(window.location.href).searchParams;
-  return searchParams.get('m') || searchParams.get('q') || '';
-}
-function isPrefilledSend() {
-  const searchParams = new URL(window.location.href).searchParams;
-  return searchParams.has('q');
-}
-function resetPrefilled() {
-  cleanCurrentUrl(['m', 'q']);
-}
-
 type CallbackSendMessage = (
   content: string,
   extra: MessageExtra[] | undefined
@@ -43,7 +27,8 @@ export const ChatInput = memo(
   ({ convId, onSend }: { convId?: string; onSend: CallbackSendMessage }) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const textarea: ChatTextareaApi = useChatTextarea(getPrefilledContent());
+    const { prefilledContent, isPrefilledSend } = usePrefilledMessage();
+    const textarea: ChatTextareaApi = useChatTextarea(prefilledContent);
     const extraContext = useFileUpload();
     const { isGenerating, stopGenerating } = useChatContext();
 
@@ -83,20 +68,17 @@ export const ChatInput = memo(
 
     useEffect(() => {
       // set textarea with prefilled value
-      const prefilled = getPrefilledContent();
-      if (prefilled) {
-        textarea.setValue(prefilled);
+      if (prefilledContent) {
+        textarea.setValue(prefilledContent);
       }
 
       // send the prefilled message if needed
       // otherwise, focus on the input
-      if (isPrefilledSend()) sendNewMessage();
+      if (isPrefilledSend) sendNewMessage();
       else textarea.focus();
 
-      // no need to keep track of sendNewMessage
-      resetPrefilled();
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [window.location.href]);
+    }, [isPrefilledSend, prefilledContent]);
 
     return (
       <div

src/pages/Chat/hooks/usePrefilledMessage.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router';
+import { isDev } from '../../../config';
+
+/**
+ * Custom hook to manage prefilled messages from URL query parameters.
+ * Looks for 'm' (message) or 'q' (query) parameters.
+ * If 'q' is present, the message should be sent immediately.
+ */
+export function usePrefilledMessage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [prefilledContent, setPrefilledContent] = useState('');
+  const [isPrefilledSend, setIsPrefilledSend] = useState(false);
+
+  useEffect(() => {
+    const message = searchParams.get('m') || searchParams.get('q') || '';
+    const send = searchParams.has('q');
+    if (isDev)
+      console.debug('usePrefilledMessage', {
+        message,
+        send,
+      });
+
+    setPrefilledContent(message);
+    setIsPrefilledSend(send);
+
+    // Clean up URL parameters after reading them
+    const cleanedSearchParams = new URLSearchParams(searchParams);
+    cleanedSearchParams.delete('m');
+    cleanedSearchParams.delete('q');
+    setSearchParams(cleanedSearchParams);
+  }, [searchParams, setSearchParams]);
+
+  return { prefilledContent, isPrefilledSend };
+}