feat: extension update

KwokKwok · Dec 12, 2024 · 149b416 · 149b416
1 parent 1e22e08
commit 149b416
Show file tree

Hide file tree

Showing 16 changed files with 141 additions and 41 deletions.
diff --git a/entrypoints/background.js b/entrypoints/background.js
@@ -3,13 +3,13 @@ import { browser } from "wxt/browser";
 export default defineBackground(() => {
   browser.contextMenus.create({
     id: "explain",
-    title: "解释：%s",
+    title: `${browser.i18n.getMessage("explain")}`,
     contexts: ["selection"]
   });
 
   browser.contextMenus.create({
-    id: "summarize",
-    title: "总结全文",
+    id: "copilot",
+    title: `${browser.i18n.getMessage("copilot")}`,
     contexts: ["page"]
   });
 

diff --git a/entrypoints/content/App.jsx b/entrypoints/content/App.jsx
@@ -31,9 +31,10 @@ export default ({ ctx }) => {
     registerContentMessage(async payload => {
       const { menuItemId, selectionText } = payload;
       setPayload({
-        message: menuItemId === 'explain' ? selectionText : '总结全文',
+        message: menuItemId === 'explain' ? selectionText : '',
         type: menuItemId,
         context: getPageContext(),
+        from: 'silo:extension',
       });
       setShowPage(true);
     });

diff --git a/entrypoints/content/components/Modal.jsx b/entrypoints/content/components/Modal.jsx
@@ -6,6 +6,21 @@ export default function ({ close, payload, visible }) {
   const [loaded, setLoaded] = useState(false);
   const iframeRef = useRef(null);
 
+  useEffect(() => {
+    const listener = event => {
+      const message = JSON.parse(event.data);
+      console.log(message);
+
+      if (message.type === 'silo:web-copilot-close') {
+        close();
+      }
+    };
+    window.addEventListener('message', listener);
+    return () => {
+      window.removeEventListener('message', listener);
+    };
+  }, []);
+
   useEffect(() => {
     if (payload.type) {
       iframeRef.current.contentWindow.postMessage(JSON.stringify(payload), '*');

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "silo",
   "private": true,
-  "version": "1.6.3",
+  "version": "1.6.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -0,0 +1,13 @@
+{
+  "extName": {
+    "message": "Silo - Multi-model chat, text-to-images"
+  },
+  "explain": {
+    "message": "Explain: %s",
+    "description": "Explain the selected text"
+  },
+  "copilot": {
+    "message": "Ask Silo",
+    "description": "Ask Silo"
+  }
+}
diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
@@ -0,0 +1,13 @@
+{
+  "extName": {
+    "message": "Silo - 多模型对话，文生图"
+  },
+  "explain": {
+    "message": "解释：%s",
+    "description": "Explain the selected text"
+  },
+  "copilot": {
+    "message": "问问 Silo",
+    "description": "Ask Silo"
+  }
+}
diff --git a/src/components/MarkdownRenderer.jsx b/src/components/MarkdownRenderer.jsx
@@ -103,7 +103,7 @@ export default function MarkdownRenderer({ content, loading = false }) {
       children={content}
       remarkPlugins={[remarkGfm, remarkMath]}
       rehypePlugins={[rehypeKatex]}
-      className="silo-markdown prose !max-w-none prose-pre:bg-transparent prose-slate prose-red prose-sm dark:prose-invert prose-headings:text-primary dark:prose-headings:text-[#2ddaff]"
+      className="silo-markdown prose !max-w-none prose-pre:bg-transparent prose-slate prose-red prose-sm dark:prose-invert prose-headings:text-primary dark:prose-headings:text-[#2ddaff] group"
       components={{
         code(props) {
           let { children, className, node, ...rest } = props;

diff --git a/src/main.jsx b/src/main.jsx
@@ -1,14 +1,14 @@
 import './utils/exception.js';
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.jsx';
 import './index.css';
 import './i18n';
 import { Analytics } from '@vercel/analytics/react';
+import { isBrowserExtension } from './utils/utils.js';
 
 createRoot(document.getElementById('root')).render(
   <>
     <App />
-    <Analytics />
+    {!isBrowserExtension ? <Analytics /> : null}
   </>
 );
diff --git a/src/pages/chat/components/AiMessage.jsx b/src/pages/chat/components/AiMessage.jsx
@@ -80,16 +80,21 @@ export default function AiMessage({
               </div>
             </div>
           )}
-          <div
-            className={`absolute bottom-2 right-2 flex text-sm items-center justify-end`}
-          >
-            <CopyToClipboard
-              text={content.trim()}
-              onCopy={() => message.success(t('common.copied'))}
+          {!loading && (
+            <div
+              className={
+                `absolute right-2 flex text-sm items-center justify-end cursor-pointer z-20 ` +
+                (plain ? 'bottom-0 ' : 'bottom-2')
+              }
             >
-              <i className="opacity-0 group-hover:opacity-60 transition-opacity duration-300 text-base  i-ri-file-copy-line cursor-pointer"></i>
-            </CopyToClipboard>
-          </div>
+              <CopyToClipboard
+                text={content.trim()}
+                onCopy={() => message.success(t('common.copied'))}
+              >
+                <i className="opacity-0 group-hover:opacity-60 transition-opacity duration-300 text-base  i-ri-file-copy-line cursor-pointer"></i>
+              </CopyToClipboard>
+            </div>
+          )}
           {formattedInfo && (
             <div className="mt-1 text-xs opacity-25">{formattedInfo}</div>
           )}

diff --git a/src/pages/chat/components/ChatInput/index.jsx b/src/pages/chat/components/ChatInput/index.jsx
@@ -40,7 +40,10 @@ export default function ({
       onStop(true);
     } else if (action === SHORTCUTS_ACTIONS.STOP) {
       onStop(false);
-    } else if (action === SHORTCUTS_ACTIONS.RESEND_LAST) {
+    } else if (
+      action === SHORTCUTS_ACTIONS.RESEND_LAST &&
+      messageHistory.length > 0
+    ) {
       const { message, image, chatId } =
         messageHistory[messageHistory.length - 1];
       removeUserMessage(chatId);

diff --git a/src/pages/chat/components/MultiPanelMessages/SingleChatPanel/index.jsx b/src/pages/chat/components/MultiPanelMessages/SingleChatPanel/index.jsx
@@ -20,7 +20,7 @@ import { Dropdown } from 'tdesign-react';
 import ChatModelSelector from './ChatModelSelector';
 import { message } from 'tdesign-react';
 import { GUIDE_STEP } from '@src/utils/types';
-export default function ({ model, plain = false }) {
+export default function ({ model, plain = false, className = '' }) {
   const { t } = useTranslation();
   const messages = useChatMessages(model);
   const { activeModels, removeActiveModel } = useActiveModels();

diff --git a/src/pages/web-copilot/components/WordExplainer.jsx b/src/pages/web-copilot/components/WordExplainer.jsx
@@ -41,13 +41,14 @@ export default function ({ context, word }) {
       )
     : `${prompt}\n<context>${context}</context>\n`;
 
-  const { loading, onSubmit, onStop } = useSiloChat(systemPrompt, activeModels);
+  const { loading, onSubmit, onStop, messageHistory } = useSiloChat(
+    systemPrompt,
+    activeModels
+  );
 
   useEffect(() => {
     if (!isModelInit) return;
-    console.log(appActiveModels);
 
-    onStop(true);
     if (word) {
       setTimeout(() => {
         onSubmit(word);
@@ -72,8 +73,6 @@ export default function ({ context, word }) {
     });
   };
 
-  console.log(isModelInit);
-
   if (!isModelInit || !filteredResponses.length) return null;
   return (
     <div className="flex-1 flex flex-col h-full w-full pb-[8px]">
@@ -114,14 +113,15 @@ export default function ({ context, word }) {
         </div>
         <div className="flex-1 relative flex-shrink-0 ml-2">
           <InputControl
-            placeholder="继续问我吧"
+            placeholder=""
             plain
             enter
             onCursorPre={() => onCursor(-1)}
             onCursorNext={() => onCursor(1)}
             onStop={onStop}
             onSubmit={onSubmit}
             loading={filteredResponses[activeIndex]?.loading}
+            messageHistory={messageHistory}
           />
         </div>
       </div>

diff --git a/src/pages/web-copilot/index.jsx b/src/pages/web-copilot/index.jsx
@@ -1,18 +1,26 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import mockData from './mock.json';
 import { useEffect } from 'react';
 import WordExplainer from './components/WordExplainer';
 import { isBrowserExtension } from '@src/utils/utils';
+import WebCopilotSettings from '@src/components/Header/WebCopilotSettingsModal';
+import { useDarkMode } from '@src/utils/use';
+
+const commonIconClass =
+  ' cursor-pointer opacity-50 hover:opacity-100 transition-opacity duration-300 text-xl ml-2';
+
 export default function () {
+  const settingsRef = useRef(null);
   const [message, setMessage] = useState(!isBrowserExtension ? mockData : null);
-
-  console.log(message);
+  const [isDark, setDarkMode] = useDarkMode();
 
   useEffect(() => {
     const handleMessage = event => {
       if (event.data && typeof event.data === 'string') {
-        console.log(event.data);
-        setMessage(JSON.parse(event.data));
+        const message = JSON.parse(event.data);
+        if (message.from === 'silo:extension') {
+          setMessage(message);
+        }
       }
     };
 
@@ -21,14 +29,52 @@ export default function () {
       window.removeEventListener('message', handleMessage);
     };
   }, []);
+
   return (
-    <div className="w-full h-full overflow-y-auto">
-      {message && (
-        <WordExplainer
-          context={JSON.stringify(message.context)}
-          word={message.selection || message.message}
+    <div className="flex flex-col w-full h-full">
+      <WebCopilotSettings ref={settingsRef} />
+      <div
+        className="h-12 w-full flex items-center pl-4 pr-3"
+        style={{ boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)' }}
+      >
+        <img
+          src={browser.runtime.getURL('logo.svg')}
+          className="w-6 cursor-pointer"
+          alt="logo"
+          onClick={() => {
+            window.open(browser.runtime.getURL('ext.html'), '_blank');
+          }}
         />
-      )}
+        <i
+          className={`iconify ${
+            isDark ? 'i-ri-sun-line' : 'i-ri-moon-line'
+          } ${commonIconClass} ml-auto`}
+          onClick={() => setDarkMode(!isDark)}
+        ></i>
+        <i
+          className={`iconify i-ri-settings-3-line ${commonIconClass} `}
+          onClick={() => {
+            settingsRef.current?.open();
+          }}
+        ></i>
+        <i
+          className={`iconify ri--close-large-fill ${commonIconClass} ml-2`}
+          onClick={() => {
+            window.parent?.postMessage(
+              JSON.stringify({ type: 'silo:web-copilot-close' }),
+              '*'
+            );
+          }}
+        ></i>
+      </div>
+      <div className=" flex-1 h-0 overflow-y-auto">
+        {message && (
+          <WordExplainer
+            context={JSON.stringify(message.context)}
+            word={message.selection || message.message}
+          />
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/utils/models.js b/src/utils/models.js
@@ -154,7 +154,8 @@ const SILICON_MODELS = [
   textModelOf("Vendor-A/Qwen/Qwen2-72B-Instruct", 1, 32, false),
   // textModelOf("nvidia/Llama-3.1-Nemotron-70B-Instruct", 4.13, 32, true),
   textModelOf("google/gemma-2-27b-it", 1.26, 8, true),
-  textModelOf("meta-llama/Meta-Llama-3.1-70B-Instruct", 4.13, 8, true),
+  textModelOf("meta-llama/Llama-3.3-70B-Instruct", 4.13, 32, true),
+  textModelOf("meta-llama/Meta-Llama-3.1-70B-Instruct", 4.13, 32, true),
   // textModelOf("meta-llama/Meta-Llama-3-70B-Instruct", 4.13, 8, true),
   textModelOf("meta-llama/Meta-Llama-3.1-405B-Instruct", 21, 32, true),
   textModelOf("Qwen/Qwen2-VL-72B-Instruct", 4.13, 32, false, true),

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -3,7 +3,6 @@ import { getChatResolver, isLimitedModel } from './models';
 import { fmtBaseUrl } from "./format";
 import { isExperienceSK } from "@src/store/storage";
 import { LOCAL_STORAGE_KEY } from "./types";
-import { getLocalStorage } from "./helpers";
 export function createOpenAICompatibleRequestOptions (sk, model, messages, options = {}) {
   return {
     method: 'POST',
@@ -38,7 +37,10 @@ const defaultModelIdResolver = modelId => {
 export function openAiCompatibleChat (baseUrl, sk, modelIdResolver, model, messages, chatOptions, controller, onChunk, onEnd, onError) {
   const modelId = (modelIdResolver || defaultModelIdResolver)(model) // 取出模型ID
   if (!sk) {
-    return onError(new Error('API Key未配置'))
+    if (isBrowserExtension) {
+      return onError(new Error('Please configure the API key in the extension main page and reload this page'))
+    }
+    return onError(new Error('API Key is missing'))
   }
   const startTime = Date.now()
   fetch(`${fmtBaseUrl(baseUrl)}/chat/completions`, { ...createOpenAICompatibleRequestOptions(sk, modelId, messages, chatOptions), signal: controller.current.signal })

diff --git a/wxt.config.js b/wxt.config.js
@@ -5,15 +5,16 @@ console.log(path.resolve(__dirname, './src'));
 export default defineConfig({
   modules: ['@wxt-dev/module-react'],
   manifest: {
-    name: 'Silo - Multi-model chat, text-to-image',
+    name: '__MSG_extName__',
     permissions: ['contextMenus'],
     action: {},
     "web_accessible_resources": [
       {
         "resources": ["ext.html"],
         "matches": ['*://*/*']
       }
-    ]
+    ],
+    default_locale: 'en',
   },
   vite: () => ({
     esbuild: {