mirror of
https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git
synced 2025-05-23 06:00:17 +09:00
feat: 支持开关指定内置插件
This commit is contained in:
Hk-Gosuto
parent
c5cc16ca09
commit
c9c5ab2a9b
@ -56,8 +56,8 @@
|
||||
|
||||
优先级：`SerpAPI > BingSerpAPI > DuckDuckGo`
|
||||
|
||||
- [ ] 插件列表页面开发
|
||||
- [ ] 支持开关指定插件
|
||||
- [x] 插件列表页面开发
|
||||
- [x] 支持开关指定插件
|
||||
- [ ] 支持添加自定义插件
|
||||
- [x] 支持 Agent 参数配置（ ~~agentType~~, maxIterations, returnIntermediateSteps 等）
|
||||
- [x] 支持 ChatSession 级别插件功能开关
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
@ -26,6 +26,7 @@ export interface LLMConfig {
|
||||
export interface LLMAgentConfig {
|
||||
maxIterations: number;
|
||||
returnIntermediateSteps: boolean;
|
||||
useTools?: (string | undefined)[];
|
||||
}
|
||||
|
||||
export interface ChatOptions {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
110
app/components/plugin.module.scss
Normal file
110
app/components/plugin.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
496
app/components/plugin.tsx
Normal file
496
app/components/plugin.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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: "你是一个助手",
|
||||
|
||||
@ -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",
|
||||
|
||||
32
app/plugins/cn.ts
Normal file
32
app/plugins/cn.ts
Normal file
@ -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,
|
||||
},
|
||||
];
|
||||
33
app/plugins/en.ts
Normal file
33
app/plugins/en.ts
Normal file
@ -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,
|
||||
},
|
||||
];
|
||||
27
app/plugins/index.ts
Normal file
27
app/plugins/index.ts
Normal file
@ -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));
|
||||
5
app/plugins/typing.ts
Normal file
5
app/plugins/typing.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { type Plugin } from "../store/plugin";
|
||||
|
||||
export type BuiltinPlugin = Omit<Plugin, "id"> & {
|
||||
builtin: Boolean;
|
||||
};
|
||||
@ -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) {
|
||||
|
||||
137
app/store/plugin.ts
Normal file
137
app/store/plugin.ts
Normal file
@ -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;
|
||||
},
|
||||
},
|
||||
),
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user