[pull] main from olegshulyakov:main

src/App.tsx

@@ -1,38 +1,26 @@
-import { FC, useCallback, useEffect } from 'react';
-import { Toaster, toast } from 'react-hot-toast';
-import { useTranslation } from 'react-i18next';
+import { FC } from 'react';
+import { Toaster } from 'react-hot-toast';
 import {
   BrowserRouter,
   Navigate,
   Outlet,
   Route,
   Routes,
-  useNavigate,
   useParams,
 } from 'react-router';
 import { Footer } from './components/Footer';
 import Header from './components/Header';
 import Sidebar from './components/Sidebar';
-import { ToastPopup } from './components/ToastPopup';
-import { useDebouncedCallback } from './hooks/useDebouncedCallback';
-import { usePWAUpdatePrompt } from './hooks/usePWAUpdatePrompt';
+import { useProviderSetup } from './hooks/useProviderSetup';
+import { usePWAUpdateToast } from './hooks/usePWAUpdatePrompt';
 import ChatPage from './pages/Chat';
 import SettingsPage from './pages/Settings';
 import WelcomePage from './pages/Welcome';
-import { AppContextProvider, useAppContext } from './store/app';
+import { AppContextProvider } from './store/app';
 import { ChatContextProvider } from './store/chat';
-import {
-  InferenceContextProvider,
-  useInferenceContext,
-} from './store/inference';
+import { InferenceContextProvider } from './store/inference';
 import { ModalProvider } from './store/modal';
 
-const DEBOUNCE_DELAY = 5000;
-const TOAST_IDS = {
-  PROVIDER_SETUP: 'provider-setup',
-  PWA_UPDATE: 'pwa-update',
-};
-
 const App: FC = () => {
   return (
     <ModalProvider>
@@ -58,77 +46,8 @@ const App: FC = () => {
 };
 
 const AppLayout: FC = () => {
-  const navigate = useNavigate();
-  const { t } = useTranslation();
-  const { config, showSettings } = useAppContext();
-  const { models } = useInferenceContext();
-  const { isNewVersion, handleUpdate } = usePWAUpdatePrompt();
-
-  const checkModelsAndShowToast = useCallback(
-    (showSettings: boolean, models: unknown[]) => {
-      if (showSettings) return;
-      if (Array.isArray(models) && models.length > 0) return;
-
-      toast(
-        (toast) => {
-          const isInitialSetup = config.baseUrl === '';
-          const popupConfig = isInitialSetup ? 'welcomePopup' : 'noModelsPopup';
-
-          return (
-            <ToastPopup
-              t={toast}
-              onSubmit={() => navigate('/settings')}
-              title={t(`toast.${popupConfig}.title`)}
-              description={t(`toast.${popupConfig}.description`)}
-              note={t(`toast.${popupConfig}.note`)}
-              submitBtn={t(`toast.${popupConfig}.submitBtnLabel`)}
-              cancelBtn={t(`toast.${popupConfig}.cancelBtnLabel`)}
-            />
-          );
-        },
-        {
-          id: TOAST_IDS.PROVIDER_SETUP,
-          duration: config.baseUrl === '' ? Infinity : 10000,
-          position: 'top-center',
-        }
-      );
-    },
-    [t, config.baseUrl, navigate]
-  );
-
-  const delayedNoModels = useDebouncedCallback(
-    checkModelsAndShowToast,
-    DEBOUNCE_DELAY
-  );
-
-  // Handle PWA updates
-  useEffect(() => {
-    if (isNewVersion) {
-      toast(
-        (toast) => (
-          <ToastPopup
-            t={toast}
-            onSubmit={handleUpdate}
-            title={t('toast.newVersion.title')}
-            description={t('toast.newVersion.description')}
-            note={t('toast.newVersion.note')}
-            submitBtn={t('toast.newVersion.submitBtnLabel')}
-            cancelBtn={t('toast.newVersion.cancelBtnLabel')}
-          />
-        ),
-        {
-          id: TOAST_IDS.PWA_UPDATE,
-          duration: Infinity,
-          position: 'top-center',
-        }
-      );
-    }
-  }, [t, isNewVersion, handleUpdate]);
-
-  // Handle model checking
-  useEffect(() => {
-    delayedNoModels(showSettings, models);
-  }, [showSettings, models, delayedNoModels]);
+  usePWAUpdateToast();
+  useProviderSetup();
 
   return (
     <>

src/components/ToastPopup.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import toast, { Toast } from 'react-hot-toast';
+import toast from 'react-hot-toast';
 import { Button } from './Button';
 
 /**
@@ -33,14 +33,22 @@ import { Button } from './Button';
  * ```
  */
 export const ToastPopup: FC<{
-  t: Toast;
+  toastId: string;
   title: string;
   description: string;
   note?: string;
   submitBtn: string;
   cancelBtn: string;
   onSubmit: () => Promise<void> | void;
-}> = ({ t, title, description, note, submitBtn, cancelBtn, onSubmit }) => (
+}> = ({
+  toastId,
+  title,
+  description,
+  note,
+  submitBtn,
+  cancelBtn,
+  onSubmit,
+}) => (
   <div className="flex flex-col gap-2">
     <p className="font-medium">{title}</p>
     <p className="text-sm">{description}</p>
@@ -52,15 +60,19 @@ export const ToastPopup: FC<{
     <div className="flex justify-center gap-2 mt-1">
       <Button
         onClick={() => {
-          toast.dismiss(t.id);
+          toast.dismiss(toastId);
           onSubmit();
         }}
         variant="neutral"
         size="small"
       >
         {submitBtn}
       </Button>
-      <Button onClick={() => toast.dismiss(t.id)} variant="ghost" size="small">
+      <Button
+        onClick={() => toast.dismiss(toastId)}
+        variant="ghost"
+        size="small"
+      >
         {cancelBtn}
       </Button>
     </div>

src/hooks/usePWAUpdatePrompt.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+import { ToastPopup } from '../components/ToastPopup';
+import { useRegisterSW } from 'virtual:pwa-register/react';
+
+export function usePWAUpdatePrompt() {
+  const {
+    needRefresh: [isNewVersion],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegisteredSW(swUrl, swRegistration) {
+      console.debug('SW Registered:', swUrl, swRegistration);
+    },
+    onRegisterError(error) {
+      console.error('SW registration error', error);
+    },
+  });
+
+  const handleUpdate = async () => {
+    await updateServiceWorker(true);
+  };
+
+  return { isNewVersion, handleUpdate };
+}
+
+export function usePWAUpdateToast() {
+  const { t } = useTranslation();
+  const { isNewVersion, handleUpdate } = usePWAUpdatePrompt();
+
+  useEffect(() => {
+    if (!isNewVersion) return;
+
+    toast(
+      (toast) => (
+        <ToastPopup
+          toastId={toast.id}
+          onSubmit={handleUpdate}
+          title={t('toast.newVersion.title')}
+          description={t('toast.newVersion.description')}
+          note={t('toast.newVersion.note')}
+          submitBtn={t('toast.newVersion.submitBtnLabel')}
+          cancelBtn={t('toast.newVersion.cancelBtnLabel')}
+        />
+      ),
+      {
+        id: 'pwa-update',
+        duration: Infinity,
+        position: 'top-center',
+      }
+    );
+  }, [t, isNewVersion, handleUpdate]);
+}

src/hooks/useProviderSetup.tsx

@@ -0,0 +1,55 @@
+import { useCallback, useEffect } from 'react';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router';
+import { ToastPopup } from '../components/ToastPopup';
+import { useAppContext } from '../store/app';
+import { useInferenceContext } from '../store/inference';
+import { useDebouncedCallback } from './useDebouncedCallback';
+
+const DEBOUNCE_DELAY = 5000;
+
+export function useProviderSetup() {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { config, showSettings } = useAppContext();
+  const { models } = useInferenceContext();
+
+  const checkModelsAndShowToast = useCallback(
+    (showSettings: boolean, models: unknown[]) => {
+      if (showSettings) return;
+      if (Array.isArray(models) && models.length > 0) return;
+
+      const isInitialSetup = config.baseUrl === '';
+      const popupConfig = isInitialSetup ? 'welcomePopup' : 'noModelsPopup';
+      toast(
+        (toast) => (
+          <ToastPopup
+            toastId={toast.id}
+            onSubmit={() => navigate('/settings')}
+            title={t(`toast.${popupConfig}.title`)}
+            description={t(`toast.${popupConfig}.description`)}
+            note={t(`toast.${popupConfig}.note`)}
+            submitBtn={t(`toast.${popupConfig}.submitBtnLabel`)}
+            cancelBtn={t(`toast.${popupConfig}.cancelBtnLabel`)}
+          />
+        ),
+        {
+          id: 'provider-setup',
+          duration: config.baseUrl === '' ? Infinity : 10000,
+          position: 'top-center',
+        }
+      );
+    },
+    [t, config.baseUrl, navigate]
+  );
+
+  const delayedNoModels = useDebouncedCallback(
+    checkModelsAndShowToast,
+    DEBOUNCE_DELAY
+  );
+
+  useEffect(() => {
+    delayedNoModels(showSettings, models);
+  }, [showSettings, models, delayedNoModels]);
+}

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