options

package.json

@@ -17,6 +17,7 @@
     "url": "https://github.com/fellouAI/eko-chromium-extension.git"
   },
   "dependencies": {
+    "antd": "^5.22.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/background/index.ts

@@ -1,9 +1,16 @@
 import { WebSearch } from "./tools/web_search";
-import './eko'
+import "./eko";
 
-setTimeout(async () => {
-  // Test
-  let search = new WebSearch()
-  let result = await search.execute({ query: '谢扬', maxResults: 5 })
-  console.log(result)
-}, 2000)
+function test_websearch(query: string) {
+  setTimeout(async () => {
+    let search = new WebSearch();
+    let result = await search.execute({
+      query,
+      maxResults: 5,
+    });
+    console.log('result', result);
+  }, 2000);
+}
+
+// Test WebSearch
+// test_websearch("authing Yang Xie");

src/content/index.tsx

@@ -16,7 +16,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
               }
           }
       } catch (e) {
-          console.log('消息处理异常', e)
+          console.log('onMessage error', e)
       }
   })()
   return true

src/options/index.tsx

@@ -1,77 +1,116 @@
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
+import { Form, Input, Button, message, Card, Select } from "antd";
 
-const Options = () => {
-  const [color, setColor] = useState<string>("");
-  const [status, setStatus] = useState<string>("");
-  const [like, setLike] = useState<boolean>(false);
+const { Option } = Select;
+
+const OptionsPage = () => {
+  const [form] = Form.useForm();
+
+  const [config, setConfig] = useState({
+    apiUrl: "https://api.anthropic.com/v1/messages",
+    modelName: "claude-3-sonnet",
+    apiKey: "",
+  });
 
   useEffect(() => {
-    // Restores select box and checkbox state using the preferences
-    // stored in chrome.storage.
-    chrome.storage.sync.get(
-      {
-        favoriteColor: "red",
-        likesColor: true,
-      },
-      (items) => {
-        setColor(items.favoriteColor);
-        setLike(items.likesColor);
+    chrome.storage.sync.get(["systemConfig"], (result) => {
+      if (result.systemConfig) {
+        setConfig(result.systemConfig);
+        form.setFieldsValue(result.systemConfig);
       }
-    );
+    });
   }, []);
 
-  const saveOptions = () => {
-    // Saves options to chrome.storage.sync.
-    chrome.storage.sync.set(
-      {
-        favoriteColor: color,
-        likesColor: like,
-      },
-      () => {
-        // Update status to let user know options were saved.
-        setStatus("Options saved.");
-        const id = setTimeout(() => {
-          setStatus("");
-        }, 1000);
-        return () => clearTimeout(id);
-      }
-    );
+  const handleSave = () => {
+    form
+      .validateFields()
+      .then((values) => {
+        setConfig(values);
+        chrome.storage.sync.set(
+          {
+            systemConfig: values,
+          },
+          () => {
+            message.success("Save Success!");
+          }
+        );
+      })
+      .catch((errorInfo) => {
+        message.error("Please check the form field");
+      });
   };
 
+  const modelOptions = [
+    { value: "claude-3-haiku", label: "Claude 3 Haiku" },
+    { value: "claude-3-sonnet", label: "Claude 3 Sonnet (default)" },
+    { value: "claude-3-opus", label: "Claude 3 Opus" },
+  ];
+
   return (
-    <>
-      <div>
-        Favorite color: <select
-          value={color}
-          onChange={(event) => setColor(event.target.value)}
-        >
-          <option value="red">red</option>
-          <option value="green">green</option>
-          <option value="blue">blue</option>
-          <option value="yellow">yellow</option>
-        </select>
-      </div>
-      <div>
-        <label>
-          <input
-            type="checkbox"
-            checked={like}
-            onChange={(event) => setLike(event.target.checked)}
-          />
-          I like colors.
-        </label>
-      </div>
-      <div>{status}</div>
-      <button onClick={saveOptions}>Save</button>
-    </>
+    <div className="p-6 max-w-xl mx-auto">
+      <Card title="Model Config" className="shadow-md">
+        <Form form={form} layout="vertical" initialValues={config}>
+          <Form.Item
+            name="apiUrl"
+            label="API URL"
+            rules={[
+              {
+                required: true,
+                message: "Please enter the API address",
+              },
+            ]}
+          >
+            <Input placeholder="Please enter the API address" allowClear />
+          </Form.Item>
+
+          <Form.Item
+            name="modelName"
+            label="Model Name"
+            rules={[
+              {
+                required: true,
+                message: "Please select a model",
+              },
+            ]}
+          >
+            <Select placeholder="Choose a model">
+              {modelOptions.map((model) => (
+                <Option key={model.value} value={model.value}>
+                  {model.label}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+
+          <Form.Item
+            name="apiKey"
+            label="API Key"
+            rules={[
+              {
+                required: true,
+                message: "Please enter the API Key",
+              },
+            ]}
+          >
+            <Input.Password placeholder="Please enter the API Key" allowClear />
+          </Form.Item>
+
+          <Form.Item>
+            <Button type="primary" onClick={handleSave} block>
+              Save
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
   );
 };
 
 const root = createRoot(document.getElementById("root")!);
 
 root.render(
   <React.StrictMode>
-    <Options />
+    <OptionsPage />
   </React.StrictMode>
 );