feat: update models, enhance extension

package.json

@@ -1,7 +1,7 @@
 {
   "name": "silo",
   "private": true,
-  "version": "1.6.2",
+  "version": "1.6.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/Header/WebCopilotSettingsModal/index.jsx

@@ -0,0 +1,105 @@
+import { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import { Dialog, Button, Textarea, Space } from 'tdesign-react';
+import { getAllTextModels } from '@src/utils/models';
+
+import { useTranslation } from 'react-i18next';
+import ModelOption from '@src/components/ModelOption';
+import { Select } from 'tdesign-react';
+import {
+  useLocalStorageAtom,
+  useLocalStorageJSONAtom,
+} from '@src/store/storage';
+import { LOCAL_STORAGE_KEY } from '@src/utils/types';
+const allTextModels = getAllTextModels();
+
+const WebCopilotSettings = forwardRef((props, ref) => {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedModels, setSelectedModels] = useState([]);
+  const [prompt, setPrompt] = useState('');
+  const [activeModels, setActiveModels] = useLocalStorageJSONAtom(
+    LOCAL_STORAGE_KEY.WORD_EXPLAINER_ACTIVE_MODELS
+  );
+  const [activePrompt, setActivePrompt] = useLocalStorageAtom(
+    LOCAL_STORAGE_KEY.WORD_EXPLAINER_PROMPT
+  );
+
+  useImperativeHandle(ref, () => ({
+    open: () => setIsOpen(true),
+    close: () => setIsOpen(false),
+  }));
+
+  useEffect(() => {
+    setSelectedModels(activeModels);
+    setPrompt(activePrompt);
+  }, [activeModels, activePrompt]);
+
+  const handleSave = () => {
+    setActiveModels(selectedModels);
+    setActivePrompt(prompt);
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog
+      closeOnOverlayClick={false}
+      visible={isOpen}
+      onClose={() => setIsOpen(false)}
+      header={t('webCopilot.settings')}
+      footer={
+        <Space>
+          <Button variant="outline" onClick={() => setIsOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button theme="primary" onClick={handleSave}>
+            {t('common.confirm')}
+          </Button>
+        </Space>
+      }
+    >
+      <div className="space-y-4">
+        <div>
+          <div className="text-sm font-medium mb-2">
+            {t('webCopilot.selectModel')}
+          </div>
+          <Select
+            className="!w-full"
+            filterable
+            filter={(value, option) =>
+              option['data-keywords'].includes(value.toLowerCase())
+            }
+            value={selectedModels}
+            placeholder=""
+            multiple
+            onChange={setSelectedModels}
+          >
+            {allTextModels.map(option => (
+              <Select.Option
+                style={{ height: '60px' }}
+                key={option.id}
+                value={option.id}
+                label={option.name}
+                data-keywords={(option.id + option.keywords).toLowerCase()}
+              >
+                <ModelOption option={option} />
+              </Select.Option>
+            ))}
+          </Select>
+        </div>
+
+        <div>
+          <div className="text-sm font-medium mb-2">
+            {t('webCopilot.prompt')}
+          </div>
+          <Textarea
+            value={prompt}
+            onChange={value => setPrompt(value)}
+            autosize={{ minRows: 4, maxRows: 8 }}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+});
+
+export default WebCopilotSettings;

src/components/Header/index.jsx

@@ -12,12 +12,13 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import Tooltip from '@src/components/MobileCompatible/Tooltip';
 import { useTranslation } from 'react-i18next';
 import ConfigImportModal from './ConfigImportModal';
-import { exportConfig } from '@src/utils/utils';
+import { exportConfig, isBrowserExtension } from '@src/utils/utils';
 import SecretKeyPopup from './SecretKeyPopup';
 import { GUIDE_STEP, LOCAL_STORAGE_KEY } from '@src/utils/types';
 import Guide from '@src/components/Guide';
 import { i18nOptions } from '@src/i18n/resources';
 import MobileModelSelector from './MobileModelSelector';
+import WebCopilotSettingsModal from './WebCopilotSettingsModal';
 
 export default function () {
   const secretKeyPopupRef = useRef(null);
@@ -76,7 +77,7 @@ export default function () {
 
   const { addMoreModel, activeModels } = useActiveModels();
   const mobileModelSelectorRef = useRef();
-
+  const webCopilotSettingsRef = useRef();
   const onAddMoreModel = () => {
     if (isMobile) {
       mobileModelSelectorRef.current.open();
@@ -230,6 +231,12 @@ export default function () {
                 hidden: isMobile || isImageMode,
                 title: t('header.custom_model'),
               },
+              {
+                icon: 'i-ri-copilot-fill',
+                onClick: () => webCopilotSettingsRef.current.open(),
+                hidden: !isBrowserExtension || isImageMode,
+                title: t('webCopilot.settings'),
+              },
               // {
               //   icon: 'iconify mingcute--translate-2-line',
               //   title: t('header.select_language'),
@@ -399,6 +406,7 @@ export default function () {
         checkKeyValid={getUserData}
       />
       <ConfigImportModal ref={configModalRef} />
+      <WebCopilotSettingsModal ref={webCopilotSettingsRef} />
     </>
   );
 }

src/i18n/locales/de.json

@@ -193,5 +193,10 @@
     "chat_options_desc": "Klicken Sie hier, um Chat-Parameter wie Temperatur, maximale Token-Anzahl usw. anzupassen",
     "more_functions": "Weitere Funktionen",
     "more_functions_desc": "Sie können hier Modelle hinzufügen, in den Bildgenerierungsmodus wechseln und mehr. Überprüfen Sie den Button oben rechts für weitere Funktionen. Viel Spaß beim Benutzen!"
+  },
+  "webCopilot": {
+    "settings": "Web Copilot Einstellungen",
+    "selectModel": "Modelle auswählen",
+    "prompt": "Prompt"
   }
 }

src/i18n/locales/en.json

@@ -194,5 +194,10 @@
     "chat_options_desc": "Click here to adjust chat parameters like temperature, max tokens, etc.",
     "more_functions": "More Functions",
     "more_functions_desc": "You can add models, switch to text-to-image mode, and more here. Check the top-right button for more features. Enjoy using!"
+  },
+  "webCopilot": {
+    "settings": "Web Copilot Settings",
+    "selectModel": "Select Models",
+    "prompt": "Prompt"
   }
 }

src/i18n/locales/es.json

@@ -193,5 +193,10 @@
     "chat_options_desc": "Haga clic aquí para ajustar parámetros de chat como temperatura, máximo de tokens, etc.",
     "more_functions": "Más funciones",
     "more_functions_desc": "Puede agregar modelos, cambiar al modo de generación de imágenes y más aquí. Revise el botón en la esquina superior derecha para más funciones. ¡Disfrute usando!"
+  },
+  "webCopilot": {
+    "settings": "Configuración de Web Copilot",
+    "selectModel": "Seleccionar modelos",
+    "prompt": "Prompt"
   }
 }

src/i18n/locales/fr.json

@@ -193,5 +193,10 @@
     "chat_options_desc": "Cliquez ici pour ajuster les paramètres de chat comme la température, le nombre maximum de tokens, etc.",
     "more_functions": "Plus de fonctions",
     "more_functions_desc": "Vous pouvez ajouter des modèles, passer en mode génération d'images, etc. ici. Vérifiez le bouton en haut à droite pour plus de fonctionnalités. Bonne utilisation !"
+  },
+  "webCopilot": {
+    "settings": "Paramètres Web Copilot",
+    "selectModel": "Sélectionner les modèles",
+    "prompt": "Invite"
   }
 }

src/i18n/locales/it.json

@@ -193,5 +193,10 @@
     "chat_options_desc": "Clicca qui per regolare i parametri della chat come temperatura, token massimi, ecc.",
     "more_functions": "Altre funzioni",
     "more_functions_desc": "Puoi aggiungere modelli, passare alla modalità generazione immagini e altro qui. Controlla il pulsante in alto a destra per altre funzionalità. Buon utilizzo!"
+  },
+  "webCopilot": {
+    "settings": "Impostazioni Web Copilot",
+    "selectModel": "Seleziona modelli",
+    "prompt": "Prompt"
   }
 }

src/i18n/locales/ja.json

@@ -193,5 +193,10 @@
     "chat_options_desc": "ここをクリックして、温度や最大トークン数などのチャットパラメータを調整できます",
     "more_functions": "その他の機能",
     "more_functions_desc": "ここでモデルの追加や画像生成モードへの切り替えなどができます。その他の機能は右上のボタンをご確認ください。お楽しみください！"
+  },
+  "webCopilot": {
+    "settings": "Web Copilot 設定",
+    "selectModel": "モデルを選択",
+    "prompt": "プロンプト"
   }
 }

src/i18n/locales/ko.json

@@ -193,5 +193,10 @@
     "chat_options_desc": "여기를 클릭하여 온도, 최대 토큰 수 등의 대화 매개변수를 조정할 수 있습니다",
     "more_functions": "추가 기능",
     "more_functions_desc": "여기서 모델 추가, 이미지 생성 모드로 전환 등을 할 수 있습니다. 더 많은 기능은 우측 상단 버튼을 확인하세요. 즐거운 사용 되세요!"
+  },
+  "webCopilot": {
+    "settings": "Web Copilot 설정",
+    "selectModel": "모델 선택",
+    "prompt": "프롬프트"
   }
 }

src/i18n/locales/ru.json

@@ -193,5 +193,10 @@
     "chat_options_desc": "Нажмите здесь, чтобы настроить параметры чата, такие как температура, максимальное количество токенов и т.д.",
     "more_functions": "Дополнительные функции",
     "more_functions_desc": "Здесь вы можете добавлять модели, переключаться в режим генерации изображений и т.д. Проверьте кнопку в правом верхнем углу для дополнительных функций. Приятного использования!"
+  },
+  "webCopilot": {
+    "settings": "Настройки Web Copilot",
+    "selectModel": "Выбрать модели",
+    "prompt": "Промпт"
   }
 }

src/i18n/locales/zh-CN.json

@@ -194,5 +194,10 @@
     "chat_options_desc": "您可以点击这里调整对话参数，如温度、最大token数等",
     "more_functions": "更多功能",
     "more_functions_desc": "您可以在这里添加模型、切换文生图模式等。更多功能请点击右上角按钮查看。祝您使用愉快！"
+  },
+  "webCopilot": {
+    "settings": "Web Copilot 设置",
+    "selectModel": "选择模型",
+    "prompt": "提示词"
   }
 }

src/i18n/locales/zh-TW.json

@@ -194,5 +194,10 @@
     "chat_options_desc": "您可以點擊這裡調整對話參數，如溫度、最大token數等",
     "more_functions": "更多功能",
     "more_functions_desc": "您可以在這裡添加模型、切換文生圖模式等。更多功能請點擊右上角按鈕查看。祝您使用愉快！"
+  },
+  "webCopilot": {
+    "settings": "Web Copilot 設置",
+    "selectModel": "選擇模型",
+    "prompt": "提示詞"
   }
 }

src/main.jsx

@@ -7,8 +7,8 @@ import './i18n';
 import { Analytics } from '@vercel/analytics/react';
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
+  <>
     <App />
     <Analytics />
-  </StrictMode>
+  </>
 );

src/pages/chat/components/AiMessage.jsx

@@ -25,8 +25,8 @@ export default function AiMessage({
 
   const tokenUsage = info.usage?.total_tokens || 0;
   const formattedInfo =
-    (tokenUsage ? `${tokenUsage} tokens used, ` : '') +
-    (info?.costTime ? `${info.costTime / 1000} s` : '');
+    (tokenUsage ? `${tokenUsage} tokens used, ` : ' ') +
+    (info?.costTime ? `${info.costTime / 1000} s` : ' ');
 
   /**
    * @deprecated 暂时不显示最佳答案文案，仅显示点赞

src/pages/chat/components/ChatInput/index.jsx

@@ -8,6 +8,7 @@ import { Popup } from 'tdesign-react';
 import SingleImageViewer from '@src/components/SingleImageViewer';
 import Shortcuts, { SHORTCUTS_ACTIONS, useShortcuts } from './Shortcuts';
 import { GUIDE_STEP } from '@src/utils/types';
+import { removeUserMessage } from '@src/utils/chat';
 
 /**
  * 不使用输入框的历史记录
@@ -40,7 +41,9 @@ export default function ({
     } else if (action === SHORTCUTS_ACTIONS.STOP) {
       onStop(false);
     } else if (action === SHORTCUTS_ACTIONS.RESEND_LAST) {
-      const { message, image } = messageHistory[messageHistory.length - 1];
+      const { message, image, chatId } =
+        messageHistory[messageHistory.length - 1];
+      removeUserMessage(chatId);
       onSubmit(message, image);
     }
     setInput('');

src/pages/chat/components/MultiPanelMessages/index.jsx

@@ -1,11 +1,12 @@
 import Sortable from 'sortablejs';
 import SingleChatPanel from './SingleChatPanel';
 import { useEffect } from 'react';
-import { useMultiRows } from '@src/utils/use';
+import { useMultiRows, useRefresh } from '@src/utils/use';
 import { useRef } from 'react';
 
 export default function () {
   const [multiRows, setRows] = useMultiRows();
+  const { refresh } = useRefresh();
   const containerRef = useRef();
   useEffect(() => {
     const sorts = multiRows.map((line, index) => {
@@ -27,12 +28,13 @@ export default function () {
               Array.from(line.children).map(item => item.dataset.model)
             )
           );
+          refresh();
         },
       });
     });
-    // return () => {
-    //   sorts.forEach(item => item.destroy());
-    // };
+    return () => {
+      sorts.forEach(item => item.destroy());
+    };
   }, [multiRows]);
   return (
     <div className="flex flex-col h-full" ref={containerRef}>

src/pages/chat/index.jsx

@@ -7,6 +7,7 @@ import { useSystemPrompts } from '@src/utils/system-prompt';
 import { useActiveModels } from '@src/store/app';
 import { LOCATION_QUERY_KEY } from '@src/utils/types';
 import { useEffect } from 'react';
+import { useState } from 'react';
 
 function Chat() {
   const {
@@ -18,6 +19,8 @@ function Chat() {
   const { setActiveModels, disablePersist: disablePersistModels } =
     useActiveModels();
 
+  const [questionNeedSubmit, setQuestionNeedSubmit] = useState('');
+
   const { loading, onSubmit, onStop, hasVisionModel, messageHistory } =
     useSiloChat(active.content);
   const isMobile = useIsMobile();
@@ -40,10 +43,7 @@ function Chat() {
         setActiveSystemPrompt(systemPrompt);
       }
       if (question) {
-        onStop(true);
-        requestAnimationFrame(() => {
-          onSubmit(question, null, systemPrompt?.content);
-        });
+        setQuestionNeedSubmit(question);
       }
     };
     onHashChange();
@@ -52,6 +52,15 @@ function Chat() {
       window.removeEventListener('hashchange', onHashChange);
     };
   }, []);
+
+  useEffect(() => {
+    if (questionNeedSubmit) {
+      onStop(true);
+      onSubmit(questionNeedSubmit);
+      setQuestionNeedSubmit('');
+    }
+  }, [questionNeedSubmit]);
+
   return (
     <>
       <div className="flex-1 h-0 w-full pb-2">