feat: 支持开关指定内置插件

README.md

@@ -56,8 +56,8 @@
 
   优先级：`SerpAPI > BingSerpAPI > DuckDuckGo`
 
-- [ ] 插件列表页面开发
+- [x] 插件列表页面开发
-- [ ] 支持开关指定插件
+- [x] 支持开关指定插件
 - [ ] 支持添加自定义插件
 - [x] 支持 Agent 参数配置（ ~~agentType~~, maxIterations, returnIntermediateSteps 等）
 - [x] 支持 ChatSession 级别插件功能开关

app/api/langchain/tool/agent/route.ts

@@ -43,6 +43,7 @@ interface RequestBody {
   apiKey?: string;
   maxIterations: number;
   returnIntermediateSteps: boolean;
+  useTools: (undefined | string)[];
 }
 
 class ResponseBody {
@@ -207,12 +208,16 @@ async function handle(req: NextRequest) {
     );
 
     const tools = [
-      searchTool,
-      new WebBrowser({ model, embeddings }),
       // new RequestsGetTool(),
       // new RequestsPostTool(),
-      new Calculator(),
     ];
+    const webBrowserTool = new WebBrowser({ model, embeddings });
+    const calculatorTool = new Calculator();
+    if (reqBody.useTools.includes("web-search")) tools.push(searchTool);
+    if (reqBody.useTools.includes(webBrowserTool.name))
+      tools.push(webBrowserTool);
+    if (reqBody.useTools.includes(calculatorTool.name))
+      tools.push(calculatorTool);
 
     const pastMessages = new Array();
 

app/client/api.ts

@@ -26,6 +26,7 @@ export interface LLMConfig {
 export interface LLMAgentConfig {
   maxIterations: number;
   returnIntermediateSteps: boolean;
+  useTools?: (string | undefined)[];
 }
 
 export interface ChatOptions {

app/client/platforms/openai.ts

@@ -220,6 +220,7 @@ export class ChatGPTApi implements LLMApi {
       baseUrl: useAccessStore.getState().openaiUrl,
       maxIterations: options.agentConfig.maxIterations,
       returnIntermediateSteps: options.agentConfig.returnIntermediateSteps,
+      useTools: options.agentConfig.useTools,
     };
 
     console.log("[Request] openai payload: ", requestPayload);

app/components/home.tsx

@@ -55,6 +55,10 @@ const MaskPage = dynamic(async () => (await import("./mask")).MaskPage, {
   loading: () => <Loading noLogo />,
 });
 
+const Plugins = dynamic(async () => (await import("./plugin")).PluginPage, {
+  loading: () => <Loading noLogo />,
+});
+
 export function useSwitchTheme() {
   const config = useAppConfig();
 
@@ -154,6 +158,7 @@ function Screen() {
               <Route path={Path.Home} element={<Chat />} />
               <Route path={Path.NewChat} element={<NewChat />} />
               <Route path={Path.Masks} element={<MaskPage />} />
+              <Route path={Path.Plugins} element={<Plugins />} />
               <Route path={Path.Chat} element={<Chat />} />
               <Route path={Path.Settings} element={<Settings />} />
             </Routes>

app/components/plugin.module.scss

@@ -0,0 +1,110 @@
+@import "../styles/animation.scss";
+.plugin-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .plugin-page-body {
+    padding: 20px;
+    overflow-y: auto;
+
+    .plugin-filter {
+      width: 100%;
+      max-width: 100%;
+      margin-bottom: 20px;
+      animation: slide-in ease 0.3s;
+      height: 40px;
+
+      display: flex;
+
+      .search-bar {
+        flex-grow: 1;
+        max-width: 100%;
+        min-width: 0;
+      }
+
+      .plugin-filter-lang {
+        height: 100%;
+        margin-left: 10px;
+      }
+
+      .plugin-create {
+        height: 100%;
+        margin-left: 10px;
+        box-sizing: border-box;
+        min-width: 80px;
+      }
+    }
+
+    .plugin-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 20px;
+      border: var(--border-in-light);
+      animation: slide-in ease 0.3s;
+
+      &:not(:last-child) {
+        border-bottom: 0;
+      }
+
+      &:first-child {
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+      }
+
+      &:last-child {
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+      }
+
+      .plugin-header {
+        display: flex;
+        align-items: center;
+
+        .plugin-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 10px;
+        }
+
+        .plugin-title {
+          .plugin-name {
+            font-size: 14px;
+            font-weight: bold;
+          }
+          .plugin-info {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .plugin-actions {
+        display: flex;
+        flex-wrap: nowrap;
+        transition: all ease 0.3s;
+        justify-content: center;
+        align-items: center;
+      }
+
+      @media screen and (max-width: 600px) {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 10px;
+        border-radius: 10px;
+        margin-bottom: 20px;
+        box-shadow: var(--card-shadow);
+
+        &:not(:last-child) {
+          border-bottom: var(--border-in-light);
+        }
+
+        .plugin-actions {
+          width: 100%;
+          justify-content: space-between;
+          padding-top: 10px;
+        }
+      }
+    }
+  }
+}

app/components/plugin.tsx

@@ -0,0 +1,496 @@
+import { IconButton } from "./button";
+import { ErrorBoundary } from "./error";
+
+import styles from "./plugin.module.scss";
+
+import DownloadIcon from "../icons/download.svg";
+import UploadIcon from "../icons/upload.svg";
+import EditIcon from "../icons/edit.svg";
+import AddIcon from "../icons/add.svg";
+import CloseIcon from "../icons/close.svg";
+import DeleteIcon from "../icons/delete.svg";
+import EyeIcon from "../icons/eye.svg";
+import CopyIcon from "../icons/copy.svg";
+import LeftIcon from "../icons/left.svg";
+
+import { Plugin, usePluginStore } from "../store/plugin";
+import {
+  ChatMessage,
+  createMessage,
+  ModelConfig,
+  useAppConfig,
+  useChatStore,
+} from "../store";
+import { ROLES } from "../client/api";
+import {
+  Input,
+  List,
+  ListItem,
+  Modal,
+  Popover,
+  Select,
+  showConfirm,
+} from "./ui-lib";
+import { Avatar, AvatarPicker } from "./emoji";
+import Locale, { AllLangs, ALL_LANG_OPTIONS, Lang } from "../locales";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import chatStyle from "./chat.module.scss";
+import { useEffect, useState } from "react";
+import { copyToClipboard, downloadAs, readFromFile } from "../utils";
+import { Updater } from "../typing";
+import { ModelConfigList } from "./model-config";
+import { FileName, Path } from "../constant";
+import { BUILTIN_PLUGIN_STORE } from "../plugins";
+import { nanoid } from "nanoid";
+import { getISOLang, getLang } from "../locales";
+
+// export function PluginConfig(props: {
+//   plugin: Plugin;
+//   updateMask: Updater<Plugin>;
+//   extraListItems?: JSX.Element;
+//   readonly?: boolean;
+//   shouldSyncFromGlobal?: boolean;
+// }) {
+//   const [showPicker, setShowPicker] = useState(false);
+
+//   const updateConfig = (updater: (config: ModelConfig) => void) => {
+//     if (props.readonly) return;
+
+//     // const config = { ...props.mask.modelConfig };
+//     // updater(config);
+//     props.updateMask((mask) => {
+//       // mask.modelConfig = config;
+//       // // if user changed current session mask, it will disable auto sync
+//       // mask.syncGlobalConfig = false;
+//     });
+//   };
+
+//   const globalConfig = useAppConfig();
+
+//   return (
+//     <>
+//       <ContextPrompts
+//         context={props.mask.context}
+//         updateContext={(updater) => {
+//           const context = props.mask.context.slice();
+//           updater(context);
+//           props.updateMask((mask) => (mask.context = context));
+//         }}
+//       />
+
+//       <List>
+//         <ListItem title={Locale.Mask.Config.Avatar}>
+//           <Popover
+//             content={
+//               <AvatarPicker
+//                 onEmojiClick={(emoji) => {
+//                   props.updateMask((mask) => (mask.avatar = emoji));
+//                   setShowPicker(false);
+//                 }}
+//               ></AvatarPicker>
+//             }
+//             open={showPicker}
+//             onClose={() => setShowPicker(false)}
+//           >
+//             <div
+//               onClick={() => setShowPicker(true)}
+//               style={{ cursor: "pointer" }}
+//             >
+//             </div>
+//           </Popover>
+//         </ListItem>
+//         <ListItem title={Locale.Mask.Config.Name}>
+//           <input
+//             type="text"
+//             value={props.mask.name}
+//             onInput={(e) =>
+//               props.updateMask((mask) => {
+//                 mask.name = e.currentTarget.value;
+//               })
+//             }
+//           ></input>
+//         </ListItem>
+//         <ListItem
+//           title={Locale.Mask.Config.HideContext.Title}
+//           subTitle={Locale.Mask.Config.HideContext.SubTitle}
+//         >
+//           <input
+//             type="checkbox"
+//             checked={props.mask.hideContext}
+//             onChange={(e) => {
+//               props.updateMask((mask) => {
+//                 mask.hideContext = e.currentTarget.checked;
+//               });
+//             }}
+//           ></input>
+//         </ListItem>
+
+//         {!props.shouldSyncFromGlobal ? (
+//           <ListItem
+//             title={Locale.Mask.Config.Share.Title}
+//             subTitle={Locale.Mask.Config.Share.SubTitle}
+//           >
+//             <IconButton
+//               icon={<CopyIcon />}
+//               text={Locale.Mask.Config.Share.Action}
+//               onClick={copyMaskLink}
+//             />
+//           </ListItem>
+//         ) : null}
+
+//         {props.shouldSyncFromGlobal ? (
+//           <ListItem
+//             title={Locale.Mask.Config.Sync.Title}
+//             subTitle={Locale.Mask.Config.Sync.SubTitle}
+//           >
+//             <input
+//               type="checkbox"
+//               checked={props.mask.syncGlobalConfig}
+//               onChange={async (e) => {
+//                 const checked = e.currentTarget.checked;
+//                 if (
+//                   checked &&
+//                   (await showConfirm(Locale.Mask.Config.Sync.Confirm))
+//                 ) {
+//                   props.updateMask((mask) => {
+//                     mask.syncGlobalConfig = checked;
+//                     mask.modelConfig = { ...globalConfig.modelConfig };
+//                   });
+//                 } else if (!checked) {
+//                   props.updateMask((mask) => {
+//                     mask.syncGlobalConfig = checked;
+//                   });
+//                 }
+//               }}
+//             ></input>
+//           </ListItem>
+//         ) : null}
+//       </List>
+
+//       <List>
+//         <ModelConfigList
+//           modelConfig={{ ...props.mask.modelConfig }}
+//           updateConfig={updateConfig}
+//         />
+//         {props.extraListItems}
+//       </List>
+//     </>
+//   );
+// }
+
+function ContextPromptItem(props: {
+  prompt: ChatMessage;
+  update: (prompt: ChatMessage) => void;
+  remove: () => void;
+}) {
+  const [focusingInput, setFocusingInput] = useState(false);
+
+  return (
+    <div className={chatStyle["context-prompt-row"]}>
+      {!focusingInput && (
+        <Select
+          value={props.prompt.role}
+          className={chatStyle["context-role"]}
+          onChange={(e) =>
+            props.update({
+              ...props.prompt,
+              role: e.target.value as any,
+            })
+          }
+        >
+          {ROLES.map((r) => (
+            <option key={r} value={r}>
+              {r}
+            </option>
+          ))}
+        </Select>
+      )}
+      <Input
+        value={props.prompt.content}
+        type="text"
+        className={chatStyle["context-content"]}
+        rows={focusingInput ? 5 : 1}
+        onFocus={() => setFocusingInput(true)}
+        onBlur={() => {
+          setFocusingInput(false);
+          // If the selection is not removed when the user loses focus, some
+          // extensions like "Translate" will always display a floating bar
+          window?.getSelection()?.removeAllRanges();
+        }}
+        onInput={(e) =>
+          props.update({
+            ...props.prompt,
+            content: e.currentTarget.value as any,
+          })
+        }
+      />
+      {!focusingInput && (
+        <IconButton
+          icon={<DeleteIcon />}
+          className={chatStyle["context-delete-button"]}
+          onClick={() => props.remove()}
+          bordered
+        />
+      )}
+    </div>
+  );
+}
+
+export function ContextPrompts(props: {
+  context: ChatMessage[];
+  updateContext: (updater: (context: ChatMessage[]) => void) => void;
+}) {
+  const context = props.context;
+
+  const addContextPrompt = (prompt: ChatMessage) => {
+    props.updateContext((context) => context.push(prompt));
+  };
+
+  const removeContextPrompt = (i: number) => {
+    props.updateContext((context) => context.splice(i, 1));
+  };
+
+  const updateContextPrompt = (i: number, prompt: ChatMessage) => {
+    props.updateContext((context) => (context[i] = prompt));
+  };
+
+  return (
+    <>
+      <div className={chatStyle["context-prompt"]} style={{ marginBottom: 20 }}>
+        {context.map((c, i) => (
+          <ContextPromptItem
+            key={i}
+            prompt={c}
+            update={(prompt) => updateContextPrompt(i, prompt)}
+            remove={() => removeContextPrompt(i)}
+          />
+        ))}
+
+        <div className={chatStyle["context-prompt-row"]}>
+          <IconButton
+            icon={<AddIcon />}
+            text={Locale.Context.Add}
+            bordered
+            className={chatStyle["context-prompt-button"]}
+            onClick={() =>
+              addContextPrompt(
+                createMessage({
+                  role: "user",
+                  content: "",
+                  date: "",
+                }),
+              )
+            }
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export function PluginPage() {
+  const navigate = useNavigate();
+
+  const pluginStore = usePluginStore();
+  const chatStore = useChatStore();
+
+  const allPlugins = pluginStore
+    .getAll()
+    .filter((m) => !getLang() || m.lang === getLang());
+
+  const [searchPlugins, setSearchPlugins] = useState<Plugin[]>([]);
+  const [searchText, setSearchText] = useState("");
+  const plugins = searchText.length > 0 ? searchPlugins : allPlugins;
+
+  // simple search, will refactor later
+  const onSearch = (text: string) => {
+    setSearchText(text);
+    if (text.length > 0) {
+      const result = allPlugins.filter((m) => m.name.includes(text));
+      setSearchPlugins(result);
+    } else {
+      setSearchPlugins(allPlugins);
+    }
+  };
+
+  const [editingPluginId, setEditingPluginId] = useState<string | undefined>();
+  const editingPlugin =
+    pluginStore.get(editingPluginId) ??
+    BUILTIN_PLUGIN_STORE.get(editingPluginId);
+  const closePluginModal = () => setEditingPluginId(undefined);
+
+  const downloadAll = () => {
+    downloadAs(JSON.stringify(plugins), FileName.Plugins);
+  };
+
+  const updatePluginEnableStatus = (id: string, enable: boolean) => {
+    console.log(enable);
+    if (enable) pluginStore.enable(id);
+    else pluginStore.disable(id);
+  };
+
+  const importFromFile = () => {
+    readFromFile().then((content) => {
+      try {
+        const importPlugins = JSON.parse(content);
+        if (Array.isArray(importPlugins)) {
+          for (const plugin of importPlugins) {
+            if (plugin.name) {
+              pluginStore.create(plugin);
+            }
+          }
+          return;
+        }
+        if (importPlugins.name) {
+          pluginStore.create(importPlugins);
+        }
+      } catch {}
+    });
+  };
+
+  return (
+    <ErrorBoundary>
+      <div className={styles["plugin-page"]}>
+        <div className={styles["plugin-header"]}>
+          <IconButton
+            icon={<LeftIcon />}
+            text={Locale.NewChat.Return}
+            onClick={() => navigate(Path.Home)}
+          ></IconButton>
+        </div>
+        <div className="window-header">
+          <div className="window-header-title">
+            <div className="window-header-main-title">
+              {Locale.Plugin.Page.Title}
+            </div>
+            <div className="window-header-submai-title">
+              {Locale.Plugin.Page.SubTitle(allPlugins.length)}
+            </div>
+          </div>
+
+          <div className="window-actions">
+            {/* <div className="window-action-button">
+              <IconButton
+                icon={<DownloadIcon />}
+                bordered
+                onClick={downloadAll}
+              />
+            </div>
+            <div className="window-action-button">
+              <IconButton
+                icon={<UploadIcon />}
+                bordered
+                onClick={() => importFromFile()}
+              />
+            </div> */}
+          </div>
+        </div>
+
+        <div className={styles["plugin-page-body"]}>
+          <div className={styles["plugin-filter"]}>
+            <input
+              type="text"
+              className={styles["search-bar"]}
+              placeholder={Locale.Plugin.Page.Search}
+              autoFocus
+              onInput={(e) => onSearch(e.currentTarget.value)}
+            />
+
+            {/* <IconButton
+              className={styles["mask-create"]}
+              icon={<AddIcon />}
+              text={Locale.Mask.Page.Create}
+              bordered
+              onClick={() => {
+                const createdMask = pluginStore.create();
+                setEditingMaskId(createdMask.id);
+              }}
+            /> */}
+          </div>
+
+          <div>
+            {plugins.map((m) => (
+              <div className={styles["plugin-item"]} key={m.id}>
+                <div className={styles["plugin-header"]}>
+                  <div className={styles["plugin-title"]}>
+                    <div className={styles["plugin-name"]}>{m.name}</div>
+                    {/* 描述 */}
+                    <div className={styles["plugin-info"] + " one-line"}>
+                      {`${m.description}`}
+                    </div>
+                  </div>
+                </div>
+                {/* 操作按钮 */}
+                <div className={styles["plugin-actions"]}>
+                  <input
+                    type="checkbox"
+                    checked={m.enable}
+                    onChange={(e) => {
+                      updatePluginEnableStatus(m.id, e.currentTarget.checked);
+                    }}
+                  ></input>
+                  {/* {m.builtin ? (
+                    <IconButton
+                      icon={<EyeIcon />}
+                      text={Locale.Mask.Item.View}
+                      onClick={() => setEditingMaskId(m.id)}
+                    />
+                  ) : (
+                    <IconButton
+                      icon={<EditIcon />}
+                      text={Locale.Mask.Item.Edit}
+                      onClick={() => setEditingMaskId(m.id)}
+                    />
+                  )}
+                  {!m.builtin && (
+                    <IconButton
+                      icon={<DeleteIcon />}
+                      text={Locale.Mask.Item.Delete}
+                      onClick={async () => {
+                        if (await showConfirm(Locale.Mask.Item.DeleteConfirm)) {
+                          maskStore.delete(m.id);
+                        }
+                      }}
+                    />
+                  )} */}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {editingPlugin && (
+        <div className="modal-mask">
+          <Modal
+            title={Locale.Plugin.EditModal.Title(editingPlugin?.builtin)}
+            onClose={closePluginModal}
+            actions={[
+              <IconButton
+                icon={<DownloadIcon />}
+                text={Locale.Plugin.EditModal.Download}
+                key="export"
+                bordered
+                onClick={() =>
+                  downloadAs(
+                    JSON.stringify(editingPlugin),
+                    `${editingPlugin.name}.json`,
+                  )
+                }
+              />,
+            ]}
+          >
+            {/* <PluginConfig
+              plugin={editingPlugin}
+              updatePlugin={(updater) =>
+                pluginStore.update(editingPluginId!, updater)
+              }
+              readonly={editingPlugin.builtin}
+            /> */}
+          </Modal>
+        </div>
+      )}
+    </ErrorBoundary>
+  );
+}

app/components/sidebar.tsx

@@ -140,7 +140,7 @@ export function SideBar(props: { className?: string }) {
           icon={<PluginIcon />}
           text={shouldNarrow ? undefined : Locale.Plugin.Name}
           className={styles["sidebar-bar-button"]}
-          onClick={() => showToast(Locale.WIP)}
+          onClick={() => navigate(Path.Plugins, { state: { fromHome: true } })}
           shadow
         />
       </div>

app/constant.ts

@@ -15,6 +15,7 @@ export enum Path {
   Settings = "/settings",
   NewChat = "/new-chat",
   Masks = "/masks",
+  Plugins = "/plugins",
   Auth = "/auth",
 }
 
@@ -24,6 +25,7 @@ export enum SlotID {
 
 export enum FileName {
   Masks = "masks.json",
+  Plugins = "plugins.json",
   Prompts = "prompts.json",
 }
 
@@ -32,6 +34,7 @@ export enum StoreKey {
   Access = "access-control",
   Config = "app-config",
   Mask = "mask-store",
+  Plugin = "plugin-store",
   Prompt = "prompt-store",
   Update = "chat-update",
   Sync = "sync",

app/locales/cn.ts

@@ -305,6 +305,24 @@ const cn = {
   },
   Plugin: {
     Name: "插件",
+    Page: {
+      Title: "预设插件",
+      SubTitle: (count: number) => `${count} 个预设插件`,
+      Search: "搜索插件",
+      Create: "新建",
+    },
+    Item: {
+      View: "查看",
+      Edit: "编辑",
+      Delete: "删除",
+      DeleteConfirm: "确认删除？",
+    },
+    EditModal: {
+      Title: (readonly: boolean) =>
+        `编辑预设插件 ${readonly ? "（只读）" : ""}`,
+      Download: "下载预设",
+      Clone: "克隆预设",
+    },
   },
   FineTuned: {
     Sysmessage: "你是一个助手",

app/locales/en.ts

@@ -310,6 +310,24 @@ const en: LocaleType = {
   },
   Plugin: {
     Name: "Plugin",
+    Page: {
+      Title: "Plugin Template",
+      SubTitle: (count: number) => `${count} plugin templates`,
+      Search: "Search Templates",
+      Create: "Create",
+    },
+    Item: {
+      View: "View",
+      Edit: "Edit",
+      Delete: "Delete",
+      DeleteConfirm: "Confirm to delete?",
+    },
+    EditModal: {
+      Title: (readonly: boolean) =>
+        `Edit Plugin Template ${readonly ? "(readonly)" : ""}`,
+      Download: "Download",
+      Clone: "Clone",
+    },
   },
   FineTuned: {
     Sysmessage: "You are an assistant that",

app/plugins/cn.ts

@@ -0,0 +1,32 @@
+import { BuiltinPlugin } from "./typing";
+
+export const CN_PLUGINS: BuiltinPlugin[] = [
+  {
+    name: "搜索引擎",
+    toolName: "web-search",
+    lang: "cn",
+    description: "搜索引擎的网络搜索功能工具。",
+    builtin: true,
+    createdAt: 1693744292000,
+    enable: true,
+  },
+  {
+    name: "计算器",
+    toolName: "calculator",
+    lang: "cn",
+    description: "计算器是一个用于计算数学表达式的工具。",
+    builtin: true,
+    createdAt: 1693744292000,
+    enable: true,
+  },
+  {
+    name: "网页浏览器",
+    toolName: "web-browser",
+    lang: "cn",
+    description:
+      "一个用于与网页进行交互的工具，可以从网页中提取信息或总结其内容。",
+    builtin: true,
+    createdAt: 1693744292000,
+    enable: true,
+  },
+];

app/plugins/en.ts

@@ -0,0 +1,33 @@
+import { BuiltinPlugin } from "./typing";
+
+export const EN_PLUGINS: BuiltinPlugin[] = [
+  {
+    name: "WebSearch",
+    toolName: "web-search",
+    lang: "en",
+    description: "Web search function tool for search engines.",
+    builtin: true,
+    createdAt: 1693744292000,
+    enable: true,
+  },
+  {
+    name: "Calculator",
+    toolName: "calculator",
+    lang: "en",
+    description:
+      "The Calculator class is a tool used to evaluate mathematical expressions. It extends the base Tool class.",
+    builtin: true,
+    createdAt: 1693744292000,
+    enable: true,
+  },
+  {
+    name: "WebBrowser",
+    toolName: "web-browser",
+    lang: "en",
+    description:
+      "A class designed to interact with web pages, either to extract information from them or to summarize their content.",
+    builtin: true,
+    createdAt: 1693744292000,
+    enable: true,
+  },
+];

app/plugins/index.ts

@@ -0,0 +1,27 @@
+import { Plugin } from "../store/plugin";
+import { CN_PLUGINS } from "./cn";
+import { EN_PLUGINS } from "./en";
+
+import { type BuiltinPlugin } from "./typing";
+export { type BuiltinPlugin } from "./typing";
+
+export const BUILTIN_PLUGIN_ID = 100000;
+
+export const BUILTIN_PLUGIN_STORE = {
+  buildinId: BUILTIN_PLUGIN_ID,
+  plugins: {} as Record<string, BuiltinPlugin>,
+  get(id?: string) {
+    if (!id) return undefined;
+    return this.plugins[id] as Plugin | undefined;
+  },
+  add(m: BuiltinPlugin) {
+    const plugin = { ...m, id: this.buildinId++, builtin: true };
+    this.plugins[plugin.id] = plugin;
+    return plugin;
+  },
+};
+
+export const BUILTIN_PLUGINS: BuiltinPlugin[] = [
+  ...CN_PLUGINS,
+  ...EN_PLUGINS,
+].map((m) => BUILTIN_PLUGIN_STORE.add(m));

app/plugins/typing.ts

@@ -0,0 +1,5 @@
+import { type Plugin } from "../store/plugin";
+
+export type BuiltinPlugin = Omit<Plugin, "id"> & {
+  builtin: Boolean;
+};

app/store/chat.ts

@@ -18,6 +18,7 @@ import { ChatControllerPool } from "../client/controller";
 import { prettyObject } from "../utils/format";
 import { estimateTokenLength } from "../utils/token";
 import { nanoid } from "nanoid";
+import { Plugin, usePluginStore } from "../store/plugin";
 
 export interface ChatToolMessage {
   toolName: string;
@@ -313,6 +314,10 @@ export const useChatStore = create<ChatStore>()(
 
         const config = useAppConfig.getState();
         const pluginConfig = useAppConfig.getState().pluginConfig;
+        const pluginStore = usePluginStore.getState();
+        const allPlugins = pluginStore
+          .getAll()
+          .filter((m) => (!getLang() || m.lang === getLang()) && m.enable);
 
         // save user's and bot's message
         get().updateCurrentSession((session) => {
@@ -324,12 +329,17 @@ export const useChatStore = create<ChatStore>()(
           session.messages.push(botMessage);
         });
 
-        if (config.pluginConfig.enable && session.mask.usePlugins) {
+        if (
+          config.pluginConfig.enable &&
+          session.mask.usePlugins &&
+          allPlugins.length > 0
+        ) {
           console.log("[ToolAgent] start");
+          const pluginToolNames = allPlugins.map((m) => m.toolName);
           api.llm.toolAgentChat({
             messages: sendMessages,
             config: { ...modelConfig, stream: true },
-            agentConfig: { ...pluginConfig },
+            agentConfig: { ...pluginConfig, useTools: pluginToolNames },
             onUpdate(message) {
               botMessage.streaming = true;
               if (message) {

app/store/plugin.ts

@@ -0,0 +1,137 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { BUILTIN_PLUGIN_STORE, BUILTIN_PLUGINS } from "../plugins";
+import { getLang, Lang } from "../locales";
+import { DEFAULT_TOPIC, ChatMessage } from "./chat";
+import { ModelConfig, useAppConfig } from "./config";
+import { StoreKey } from "../constant";
+import { nanoid } from "nanoid";
+
+export type Plugin = {
+  id: string;
+  createdAt: number;
+  name: string;
+  toolName?: string;
+  lang: string;
+  description: string;
+  builtin: boolean;
+  enable: boolean;
+};
+
+export const DEFAULT_PLUGIN_STATE = {
+  plugins: {} as Record<string, Plugin>,
+  pluginStatuses: {} as Record<string, boolean>,
+};
+
+export type PluginState = typeof DEFAULT_PLUGIN_STATE;
+type PluginStore = PluginState & {
+  create: (plugin?: Partial<Plugin>) => Plugin;
+  update: (id: string, updater: (plugin: Plugin) => void) => void;
+  enable: (id: string) => void;
+  disable: (id: string) => void;
+  delete: (id: string) => void;
+  search: (text: string) => Plugin[];
+  get: (id?: string) => Plugin | null;
+  getAll: () => Plugin[];
+};
+
+export const createEmptyPlugin = () =>
+  ({
+    id: nanoid(),
+    name: DEFAULT_TOPIC,
+    lang: getLang(),
+    builtin: false,
+    createdAt: Date.now(),
+    enable: true,
+  }) as Plugin;
+
+export const usePluginStore = create<PluginStore>()(
+  persist(
+    (set, get) => ({
+      ...DEFAULT_PLUGIN_STATE,
+
+      create(plugin) {
+        const plugins = get().plugins;
+        const id = nanoid();
+        plugins[id] = {
+          ...createEmptyPlugin(),
+          ...plugin,
+          id,
+          builtin: false,
+        };
+
+        set(() => ({ plugins }));
+
+        return plugins[id];
+      },
+      update(id, updater) {
+        const plugins = get().plugins;
+        const plugin = plugins[id];
+        if (!plugin) return;
+        const updatePlugin = { ...plugin };
+        updater(updatePlugin);
+        plugins[id] = updatePlugin;
+        set(() => ({ plugins }));
+      },
+      delete(id) {
+        const plugins = get().plugins;
+        delete plugins[id];
+        set(() => ({ plugins }));
+      },
+      enable(id) {
+        const pluginStatuses = get().pluginStatuses;
+        pluginStatuses[id] = true;
+        set(() => ({ pluginStatuses }));
+      },
+      disable(id) {
+        const pluginStatuses = get().pluginStatuses;
+        pluginStatuses[id] = false;
+        set(() => ({ pluginStatuses }));
+      },
+      get(id) {
+        return get().plugins[id ?? 1145141919810];
+      },
+      getAll() {
+        const userPlugins = Object.values(get().plugins).sort(
+          (a, b) => b.createdAt - a.createdAt,
+        );
+        const buildinPlugins = BUILTIN_PLUGINS.map(
+          (m) =>
+            ({
+              ...m,
+            }) as Plugin,
+        );
+        const pluginStatuses = get().pluginStatuses;
+        return userPlugins.concat(buildinPlugins).map((e) => {
+          e.enable = pluginStatuses[e.id] ?? true;
+          return e;
+        });
+      },
+      search(text) {
+        return Object.values(get().plugins);
+      },
+    }),
+    {
+      name: StoreKey.Plugin,
+      version: 3.1,
+
+      migrate(state, version) {
+        const newState = JSON.parse(JSON.stringify(state)) as PluginState;
+
+        if (version < 3) {
+          Object.values(newState.plugins).forEach((m) => (m.id = nanoid()));
+        }
+
+        if (version < 3.1) {
+          const updatedPlugins: Record<string, Plugin> = {};
+          Object.values(newState.plugins).forEach((m) => {
+            updatedPlugins[m.id] = m;
+          });
+          newState.plugins = updatedPlugins;
+        }
+
+        return newState as any;
+      },
+    },
+  ),
+);