Dev 0.0.8

.gitignore

@@ -21,4 +21,5 @@ public/manifest.json
 .aider*
 *.code-workspace
 .shire
-.vscode
+.vscode
+.cursor

package.json

@@ -1,7 +1,7 @@
 {
   "name": "askman-chrome-extension",
-  "version": "0.0.6",
-  "description": "chrome extension boilerplate",
+  "version": "0.0.8",
+  "description": "Askman is an open-source browser extension that connects AI to web pages",
   "license": "GPL-3.0-only",
   "repository": {
     "type": "git",

src/chat/chat.ts

@@ -46,9 +46,7 @@ export class ChatCoreContext implements ChatCoreInterface {
   private async initSystemMessage() {
     try {
       const systemPrompt = await StorageManager.getSystemPrompt();
-      this.history.push(
-        new SystemInvisibleMessage(systemPrompt)
-      );
+      this.history.push(new SystemInvisibleMessage(systemPrompt));
     } catch (e) {
       console.error('Failed to initialize system message:', e);
     }
@@ -120,6 +118,13 @@ export class ChatCoreContext implements ChatCoreInterface {
     quotes: QuoteContext[],
     userPrompt: null | string,
   ) {
+    // Update system message before each request
+    const systemPrompt = await StorageManager.getSystemPrompt();
+    // Remove old system message if exists
+    this.history = this.history.filter(msg => !(msg instanceof SystemInvisibleMessage));
+    // Add new system message
+    this.history.unshift(new SystemInvisibleMessage(systemPrompt));
+
     if (!userPrompt) {
       userPrompt = '';
     }

src/components/ask-panel.tsx

@@ -20,6 +20,7 @@ import {
 import QuoteDropdown from './ask-quotedropdown';
 import KeyBinding from './icons';
 import configStorage from '../shared/storages/configStorage';
+import SystemPromptDropdown from './system-prompt-dropdown';
 
 interface AskPanelProps extends React.HTMLAttributes<HTMLDivElement> {
   code: string;
@@ -58,8 +59,9 @@ function AskPanel(props: AskPanelProps) {
   const handleClickOutside = useCallback((event: MouseEvent) => {
     if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
       setIsToolDropdownOpen(false);
-      // setIsQuoteDropdownOpen(false);
+      setIsQuoteDropdownOpen(false);
       setIsModelDropdownOpen(false);
+      setIsSystemPromptDropdownOpen(false);
     }
   }, []);
 
@@ -87,24 +89,34 @@ function AskPanel(props: AskPanelProps) {
   const [isModelDropdownOpen, setIsModelDropdownOpen] = useState(false);
   const [dropdownPosition, setDropdownPosition] = useState({ left: 0, top: 0 });
   const [hoveredQuoteIndex, setHoveredQuoteIndex] = useState<number | null>(null);
+  const [isSystemPromptDropdownOpen, setIsSystemPromptDropdownOpen] = useState(false);
 
   const showToolDropdown = () => {
-    // toolButtonRef.current?.click();
-    console.log('isToolDropdownOpen = ' + isToolDropdownOpen, 'set to true');
+    // console.log('isToolDropdownOpen = ' + isToolDropdownOpen, 'set to true');
     setIsToolDropdownOpen(true);
     setIsQuoteDropdownOpen(false);
     setIsModelDropdownOpen(false);
+    setIsSystemPromptDropdownOpen(false);
   };
   const showQuoteDropdown = () => {
     setIsQuoteDropdownOpen(true);
     setIsToolDropdownOpen(false);
     setIsModelDropdownOpen(false);
+    setIsSystemPromptDropdownOpen(false);
   };
   const showModelDropdown = () => {
     setIsModelDropdownOpen(true);
     setIsToolDropdownOpen(false);
     setIsQuoteDropdownOpen(false);
+    setIsSystemPromptDropdownOpen(false);
   };
+  const showSystemPromptDropdown = () => {
+    setIsSystemPromptDropdownOpen(true);
+    setIsToolDropdownOpen(false);
+    setIsQuoteDropdownOpen(false);
+    setIsModelDropdownOpen(false);
+  };
+
   // chat list ref
   // const chatListRef = useRef<HTMLDivElement>(null);
 
@@ -140,6 +152,9 @@ function AskPanel(props: AskPanelProps) {
   const updateQuoteDropdownStatus = (status: boolean) => {
     setIsQuoteDropdownOpen(status);
   };
+  const updateSystemPromptDropdownStatus = (status: boolean) => {
+    setIsSystemPromptDropdownOpen(status);
+  };
 
   useEffect(() => {
     QuoteAgent.getQuoteByDocument(window.location.href, document).then(quoteContext => {
@@ -205,10 +220,14 @@ function AskPanel(props: AskPanelProps) {
       // 检测 Command+K (Mac) 或 Ctrl+K (Windows/Linux)
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
         // e.preventDefault();
-        if (!isToolDropdownOpen) {
+        if (!isToolDropdownOpen && !isModelDropdownOpen && !isSystemPromptDropdownOpen) {
           showToolDropdown();
         } else if (isToolDropdownOpen) {
           showModelDropdown();
+        } else if (isModelDropdownOpen) {
+          showSystemPromptDropdown();
+        } else if (isSystemPromptDropdownOpen) {
+          showToolDropdown();
         }
 
         e.stopPropagation();
@@ -217,18 +236,26 @@ function AskPanel(props: AskPanelProps) {
 
       // 检测左右方向键
       if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-        // console.log('[ask-panel] listened key press, arrow left or right', e.target, e.currentTarget);
-        if (isToolDropdownOpen || isModelDropdownOpen) {
+        if (isToolDropdownOpen || isModelDropdownOpen || isSystemPromptDropdownOpen) {
           e.preventDefault();
           e.stopPropagation();
-          if (isToolDropdownOpen && e.key === 'ArrowRight') {
-            showModelDropdown();
-          } else if (isModelDropdownOpen && e.key === 'ArrowRight') {
-            showToolDropdown();
-          } else if (isToolDropdownOpen && e.key === 'ArrowLeft') {
-            showModelDropdown();
-          } else if (isModelDropdownOpen && e.key === 'ArrowLeft') {
-            showToolDropdown();
+
+          if (e.key === 'ArrowRight') {
+            if (isToolDropdownOpen) {
+              showModelDropdown();
+            } else if (isModelDropdownOpen) {
+              showSystemPromptDropdown();
+            } else if (isSystemPromptDropdownOpen) {
+              showToolDropdown();
+            }
+          } else if (e.key === 'ArrowLeft') {
+            if (isToolDropdownOpen) {
+              showSystemPromptDropdown();
+            } else if (isModelDropdownOpen) {
+              showToolDropdown();
+            } else if (isSystemPromptDropdownOpen) {
+              showModelDropdown();
+            }
           }
           return;
         }
@@ -239,17 +266,22 @@ function AskPanel(props: AskPanelProps) {
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [isToolDropdownOpen, isQuoteDropdownOpen, isModelDropdownOpen]);
+  }, [isToolDropdownOpen, isQuoteDropdownOpen, isModelDropdownOpen, isSystemPromptDropdownOpen]);
 
   // Add this new useEffect to focus on input when menus are closed
   useEffect(() => {
-    if (!isToolDropdownOpen && !isQuoteDropdownOpen && !isModelDropdownOpen && inputRef.current) {
+    if (
+      !isToolDropdownOpen &&
+      !isQuoteDropdownOpen &&
+      !isModelDropdownOpen &&
+      !isSystemPromptDropdownOpen &&
+      inputRef.current
+    ) {
       setTimeout(() => {
-        // console.log('focus on input because menus are closed');
         inputRef.current.focus();
       }, 33);
     }
-  }, [isToolDropdownOpen, isQuoteDropdownOpen, isModelDropdownOpen]);
+  }, [isToolDropdownOpen, isQuoteDropdownOpen, isModelDropdownOpen, isSystemPromptDropdownOpen]);
 
   const addQuote = (newQuote: QuoteContext) => {
     setInitQuotes(prevQuotes => [...prevQuotes, newQuote]);
@@ -316,7 +348,7 @@ function AskPanel(props: AskPanelProps) {
   // 在组件加载时读取存储的模型
   useEffect(() => {
     const loadSelectedModel = async () => {
-      const savedModel = await configStorage.getSelectedModel();
+      const savedModel = await configStorage.getCurrentModel();
       setSelectedModel(savedModel);
     };
     loadSelectedModel();
@@ -535,13 +567,16 @@ function AskPanel(props: AskPanelProps) {
               />
             </div>
             <div className="flex">
+              <SystemPromptDropdown
+                className="relative inline-block text-left"
+                statusListener={updateSystemPromptDropdownStatus}
+                initOpen={isSystemPromptDropdownOpen}
+              />
               <ToolDropdown
                 displayName={userTools?.name || 'Frame'}
                 initOpen={isToolDropdownOpen}
-                // isOpen={isToolDropdownOpen}
-                // setIsOpen={setIsToolDropdownOpen}
                 statusListener={updateToolDropdownStatus}
-                className="inline-block"
+                className="inline-block relative"
                 onItemClick={(item, withCommand) => {
                   setUserTools(item);
                   if (withCommand) {
@@ -552,7 +587,7 @@ function AskPanel(props: AskPanelProps) {
               <ModelDropdown
                 displayName={selectedModel}
                 initOpen={isModelDropdownOpen}
-                className=""
+                className="relative"
                 onItemClick={handleModelSelect}
                 statusListener={updateModelDropdownStatus}
               />