@agentscope-ai/chat 1.1.45-beta.1766481031578 → 1.1.45-beta.1766559291919
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ChatAnywhere/Input/UploadPopover.tsx +20 -18
- package/components/ChatAnywhere/Input/index.tsx +14 -15
- package/lib/ChatAnywhere/Input/UploadPopover.d.ts +2 -3
- package/lib/ChatAnywhere/Input/UploadPopover.js +21 -15
- package/lib/ChatAnywhere/Input/index.js +7 -7
- package/package.json +1 -1
- package/bin/starter_webui/README.md +0 -75
- package/bin/starter_webui/eslint.config.js +0 -28
- package/bin/starter_webui/index.html +0 -12
- package/bin/starter_webui/package.json +0 -34
- package/bin/starter_webui/src/App.tsx +0 -20
- package/bin/starter_webui/src/components/Chat/OptionsPanel/FormItem.tsx +0 -37
- package/bin/starter_webui/src/components/Chat/OptionsPanel/OptionsEditor.tsx +0 -160
- package/bin/starter_webui/src/components/Chat/OptionsPanel/defaultConfig.ts +0 -41
- package/bin/starter_webui/src/components/Chat/OptionsPanel/index.tsx +0 -27
- package/bin/starter_webui/src/components/Chat/index.tsx +0 -45
- package/bin/starter_webui/src/components/Chat/sessionApi/index.ts +0 -53
- package/bin/starter_webui/src/main.tsx +0 -9
- package/bin/starter_webui/src/vite-env.d.ts +0 -4
- package/bin/starter_webui/tsconfig.app.json +0 -24
- package/bin/starter_webui/tsconfig.json +0 -7
- package/bin/starter_webui/tsconfig.node.json +0 -22
- package/bin/starter_webui/vite.config.ts +0 -11
|
@@ -1,31 +1,33 @@
|
|
|
1
1
|
import { IconButton, Popover } from "@agentscope-ai/design";
|
|
2
2
|
import { PlusOutlined } from "@ant-design/icons";
|
|
3
3
|
import { useGetState } from "ahooks";
|
|
4
|
-
import { Flex } from "antd";
|
|
5
|
-
import React from "react";
|
|
4
|
+
import { Flex, Upload } from "antd";
|
|
5
|
+
import React, { useMemo } from "react";
|
|
6
6
|
import { useEffect, useState } from "react";
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
8
|
export default function UploadPopover({
|
|
11
|
-
|
|
9
|
+
uploadPropsList
|
|
12
10
|
}: {
|
|
13
|
-
|
|
11
|
+
uploadPropsList: any[];
|
|
14
12
|
}) {
|
|
15
13
|
const [visible, setVisible, getVisible] = useGetState(false);
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
15
|
+
const nodes = useMemo(() => {
|
|
16
|
+
return uploadPropsList.map((item, index) => {
|
|
17
|
+
return (
|
|
18
|
+
<Upload
|
|
19
|
+
key={index}
|
|
20
|
+
{...item}
|
|
21
|
+
customRequest={(v) => {
|
|
22
|
+
if (item.customRequest) {
|
|
23
|
+
item.customRequest(v);
|
|
24
|
+
}
|
|
25
|
+
setVisible(false);
|
|
26
|
+
}}
|
|
27
|
+
/>
|
|
28
|
+
)
|
|
29
|
+
});
|
|
30
|
+
}, [uploadPropsList]);
|
|
29
31
|
|
|
30
32
|
return <Popover
|
|
31
33
|
placement='bottomLeft'
|
|
@@ -90,7 +90,7 @@ export default forwardRef(function (_, ref) {
|
|
|
90
90
|
if (onInput.variant === 'aigc' || !onUpload?.length) {
|
|
91
91
|
return [];
|
|
92
92
|
}
|
|
93
|
-
const
|
|
93
|
+
const uploadPropsList = onUpload.map((item, index) => {
|
|
94
94
|
|
|
95
95
|
let trigger;
|
|
96
96
|
|
|
@@ -108,11 +108,11 @@ export default forwardRef(function (_, ref) {
|
|
|
108
108
|
/>
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
return
|
|
112
|
-
|
|
113
|
-
fileList
|
|
114
|
-
key
|
|
115
|
-
onChange
|
|
111
|
+
return {
|
|
112
|
+
...item,
|
|
113
|
+
fileList: attachedFiles[index],
|
|
114
|
+
key: index,
|
|
115
|
+
onChange: (info) => {
|
|
116
116
|
if (item.beforeUpload && info.file.status) {
|
|
117
117
|
handleFileChange(index, info.fileList)
|
|
118
118
|
}
|
|
@@ -120,17 +120,16 @@ export default forwardRef(function (_, ref) {
|
|
|
120
120
|
if (!item.beforeUpload) {
|
|
121
121
|
handleFileChange(index, info.fileList)
|
|
122
122
|
}
|
|
123
|
-
}
|
|
124
|
-
showUploadList
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
trigger
|
|
128
|
-
}
|
|
129
|
-
</Upload>
|
|
123
|
+
},
|
|
124
|
+
showUploadList: false,
|
|
125
|
+
children: trigger,
|
|
126
|
+
}
|
|
130
127
|
});
|
|
131
128
|
|
|
132
|
-
if (
|
|
133
|
-
|
|
129
|
+
if (uploadPropsList.length === 1) return (
|
|
130
|
+
<Upload {...uploadPropsList[0]} />
|
|
131
|
+
);
|
|
132
|
+
return <UploadPopover uploadPropsList={uploadPropsList} />
|
|
134
133
|
|
|
135
134
|
|
|
136
135
|
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
1
7
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
8
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
9
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
@@ -7,28 +13,28 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
7
13
|
import { IconButton, Popover } from "@agentscope-ai/design";
|
|
8
14
|
import { PlusOutlined } from "@agentscope-ai/icons-override-antd";
|
|
9
15
|
import { useGetState } from "ahooks";
|
|
10
|
-
import { Flex } from "antd";
|
|
11
|
-
import React from "react";
|
|
12
|
-
import { useEffect } from "react";
|
|
16
|
+
import { Flex, Upload } from "antd";
|
|
17
|
+
import React, { useMemo } from "react";
|
|
13
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
19
|
export default function UploadPopover(_ref) {
|
|
15
|
-
var
|
|
20
|
+
var uploadPropsList = _ref.uploadPropsList;
|
|
16
21
|
var _useGetState = useGetState(false),
|
|
17
22
|
_useGetState2 = _slicedToArray(_useGetState, 3),
|
|
18
23
|
visible = _useGetState2[0],
|
|
19
24
|
setVisible = _useGetState2[1],
|
|
20
25
|
getVisible = _useGetState2[2];
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
var nodes = useMemo(function () {
|
|
27
|
+
return uploadPropsList.map(function (item, index) {
|
|
28
|
+
return /*#__PURE__*/_jsx(Upload, _objectSpread(_objectSpread({}, item), {}, {
|
|
29
|
+
customRequest: function customRequest(v) {
|
|
30
|
+
if (item.customRequest) {
|
|
31
|
+
item.customRequest(v);
|
|
32
|
+
}
|
|
33
|
+
setVisible(false);
|
|
34
|
+
}
|
|
35
|
+
}), index);
|
|
36
|
+
});
|
|
37
|
+
}, [uploadPropsList]);
|
|
32
38
|
return /*#__PURE__*/_jsx(Popover, {
|
|
33
39
|
placement: "bottomLeft",
|
|
34
40
|
open: visible,
|
|
@@ -29,7 +29,6 @@ import { AIGC } from "../..";
|
|
|
29
29
|
import UploadPopover from "./UploadPopover";
|
|
30
30
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
31
31
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
32
|
-
import { createElement as _createElement } from "react";
|
|
33
32
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
34
33
|
export default /*#__PURE__*/forwardRef(function (_, ref) {
|
|
35
34
|
var _React$useState = React.useState(''),
|
|
@@ -128,7 +127,7 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
|
|
|
128
127
|
if (onInput.variant === 'aigc' || !(onUpload !== null && onUpload !== void 0 && onUpload.length)) {
|
|
129
128
|
return [];
|
|
130
129
|
}
|
|
131
|
-
var
|
|
130
|
+
var uploadPropsList = onUpload.map(function (item, index) {
|
|
132
131
|
var trigger;
|
|
133
132
|
if (item.trigger) {
|
|
134
133
|
trigger = item.trigger;
|
|
@@ -152,7 +151,7 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
|
|
|
152
151
|
bordered: false
|
|
153
152
|
});
|
|
154
153
|
}
|
|
155
|
-
return
|
|
154
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
156
155
|
fileList: attachedFiles[index],
|
|
157
156
|
key: index,
|
|
158
157
|
onChange: function onChange(info) {
|
|
@@ -163,12 +162,13 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
|
|
|
163
162
|
handleFileChange(index, info.fileList);
|
|
164
163
|
}
|
|
165
164
|
},
|
|
166
|
-
showUploadList: false
|
|
167
|
-
|
|
165
|
+
showUploadList: false,
|
|
166
|
+
children: trigger
|
|
167
|
+
});
|
|
168
168
|
});
|
|
169
|
-
if (
|
|
169
|
+
if (uploadPropsList.length === 1) return /*#__PURE__*/_jsx(Upload, _objectSpread({}, uploadPropsList[0]));
|
|
170
170
|
return /*#__PURE__*/_jsx(UploadPopover, {
|
|
171
|
-
|
|
171
|
+
uploadPropsList: uploadPropsList
|
|
172
172
|
});
|
|
173
173
|
}, [onInput.variant, onUpload, attachedFiles]);
|
|
174
174
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agentscope-ai/chat",
|
|
3
|
-
"version": "1.1.45-beta.
|
|
3
|
+
"version": "1.1.45-beta.1766559291919",
|
|
4
4
|
"description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"sideEffects": [
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
# agentscope-runtime-starter-webui
|
|
2
|
-
|
|
3
|
-
## node version
|
|
4
|
-
|
|
5
|
-
> =22
|
|
6
|
-
|
|
7
|
-
## install
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
$ npm run install
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## dev
|
|
14
|
-
|
|
15
|
-
```
|
|
16
|
-
$ npm run dev
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## build
|
|
20
|
-
|
|
21
|
-
```
|
|
22
|
-
$ npm run build
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
## Core Code
|
|
26
|
-
```tsx
|
|
27
|
-
import { AgentScopeRuntimeWebUI } from '@agentscope-ai/chat';
|
|
28
|
-
|
|
29
|
-
const options = {
|
|
30
|
-
theme: {
|
|
31
|
-
colorPrimary: '#615CED',
|
|
32
|
-
darkMode: true,
|
|
33
|
-
prefix: 'agentscope-runtime-webui',
|
|
34
|
-
leftHeader: {
|
|
35
|
-
logo: 'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
|
|
36
|
-
title: 'Runtime WebUI',
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
sender: {
|
|
40
|
-
maxLength: 10000,
|
|
41
|
-
disclaimer:
|
|
42
|
-
'AI can also make mistakes, so please check carefully and use it with caution',
|
|
43
|
-
},
|
|
44
|
-
|
|
45
|
-
welcome: {
|
|
46
|
-
greeting: 'Hello, how can I help you today?',
|
|
47
|
-
description:
|
|
48
|
-
'I am a helpful assistant that can help you with your questions.',
|
|
49
|
-
avatar:
|
|
50
|
-
'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
|
|
51
|
-
prompts: [
|
|
52
|
-
{
|
|
53
|
-
value: 'Hello',
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
value: 'How are you?',
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
value: 'What can you do?',
|
|
60
|
-
},
|
|
61
|
-
],
|
|
62
|
-
},
|
|
63
|
-
api: {
|
|
64
|
-
baseURL: 'YOUR_API_URL',
|
|
65
|
-
token: 'YOUR_API_TOKEN', // is not required
|
|
66
|
-
},
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<AgentScopeRuntimeWebUI
|
|
71
|
-
options={options}
|
|
72
|
-
/>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
```
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import js from '@eslint/js'
|
|
2
|
-
import globals from 'globals'
|
|
3
|
-
import reactHooks from 'eslint-plugin-react-hooks'
|
|
4
|
-
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
5
|
-
import tseslint from 'typescript-eslint'
|
|
6
|
-
|
|
7
|
-
export default tseslint.config(
|
|
8
|
-
{ ignores: ['dist'] },
|
|
9
|
-
{
|
|
10
|
-
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
|
11
|
-
files: ['**/*.{ts,tsx}'],
|
|
12
|
-
languageOptions: {
|
|
13
|
-
ecmaVersion: 2020,
|
|
14
|
-
globals: globals.browser,
|
|
15
|
-
},
|
|
16
|
-
plugins: {
|
|
17
|
-
'react-hooks': reactHooks,
|
|
18
|
-
'react-refresh': reactRefresh,
|
|
19
|
-
},
|
|
20
|
-
rules: {
|
|
21
|
-
...reactHooks.configs.recommended.rules,
|
|
22
|
-
'react-refresh/only-export-components': [
|
|
23
|
-
'warn',
|
|
24
|
-
{ allowConstantExport: true },
|
|
25
|
-
],
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
)
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>AgentScope Runtime Starter WebUI</title>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<div id="root"></div>
|
|
10
|
-
<script type="module" src="/src/main.tsx"></script>
|
|
11
|
-
</body>
|
|
12
|
-
</html>
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "agentscope-runtime-starter-webui",
|
|
3
|
-
"private": true,
|
|
4
|
-
"version": "0.0.0",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"dev": "vite --host",
|
|
8
|
-
"build": "tsc -b && vite build",
|
|
9
|
-
"lint": "eslint .",
|
|
10
|
-
"preview": "vite preview"
|
|
11
|
-
},
|
|
12
|
-
"dependencies": {
|
|
13
|
-
"@agentscope-ai/icons": "^1.0.46",
|
|
14
|
-
"@agentscope-ai/chat": "^1.1.44",
|
|
15
|
-
"@agentscope-ai/design": "^1.0.19",
|
|
16
|
-
"antd": "^5.29.1",
|
|
17
|
-
"antd-style": "^3.7.1",
|
|
18
|
-
"react": "^18",
|
|
19
|
-
"react-dom": "^18"
|
|
20
|
-
},
|
|
21
|
-
"devDependencies": {
|
|
22
|
-
"@eslint/js": "^9.25.0",
|
|
23
|
-
"@types/react": "^18",
|
|
24
|
-
"@types/react-dom": "^18",
|
|
25
|
-
"@vitejs/plugin-react": "^4.4.1",
|
|
26
|
-
"eslint": "^9.25.0",
|
|
27
|
-
"eslint-plugin-react-hooks": "^5.2.0",
|
|
28
|
-
"eslint-plugin-react-refresh": "^0.4.19",
|
|
29
|
-
"globals": "^16.0.0",
|
|
30
|
-
"typescript": "~5.8.3",
|
|
31
|
-
"typescript-eslint": "^8.30.1",
|
|
32
|
-
"vite": "^6.3.5"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import Chat from './components/Chat';
|
|
2
|
-
|
|
3
|
-
import { createGlobalStyle } from 'antd-style';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const GlobalStyle = createGlobalStyle`
|
|
7
|
-
* {
|
|
8
|
-
margin: 0;
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
}
|
|
11
|
-
`;
|
|
12
|
-
|
|
13
|
-
function App() {
|
|
14
|
-
return <>
|
|
15
|
-
<GlobalStyle />
|
|
16
|
-
<Chat />
|
|
17
|
-
</>
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export default App
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { Form } from 'antd';
|
|
2
|
-
import { createStyles } from 'antd-style';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
interface FormItemProps {
|
|
6
|
-
name: string | string[];
|
|
7
|
-
label: string;
|
|
8
|
-
isList?: boolean;
|
|
9
|
-
children: any;
|
|
10
|
-
normalize?: (value: any) => any;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const useStyles = createStyles(({ token }) => ({
|
|
15
|
-
label: {
|
|
16
|
-
marginBottom: 6,
|
|
17
|
-
fontSize: 12,
|
|
18
|
-
color: token.colorTextSecondary,
|
|
19
|
-
},
|
|
20
|
-
|
|
21
|
-
}));
|
|
22
|
-
|
|
23
|
-
export default function FormItem(props: FormItemProps) {
|
|
24
|
-
const { styles } = useStyles();
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const node = props.isList ?
|
|
28
|
-
<Form.List name={props.name}>{props.children}</Form.List> :
|
|
29
|
-
<Form.Item name={props.name} normalize={props.normalize}>{props.children}</Form.Item>;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return <div>
|
|
33
|
-
{props.label && <div className={styles.label}>{props.label}</div>}
|
|
34
|
-
{node}
|
|
35
|
-
</div>
|
|
36
|
-
|
|
37
|
-
}
|
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Form, Input, ColorPicker, Flex, Divider, InputNumber } from 'antd';
|
|
3
|
-
import { createStyles } from 'antd-style';
|
|
4
|
-
import { Button, IconButton, Switch } from '@agentscope-ai/design'
|
|
5
|
-
import { SparkDeleteLine, SparkPlusLine } from '@agentscope-ai/icons';
|
|
6
|
-
import FormItem from './FormItem';
|
|
7
|
-
import defaultConfig from './defaultConfig';
|
|
8
|
-
|
|
9
|
-
const useStyles = createStyles(({ token }) => ({
|
|
10
|
-
container: {
|
|
11
|
-
height: '100%',
|
|
12
|
-
display: 'flex',
|
|
13
|
-
flexDirection: 'column',
|
|
14
|
-
},
|
|
15
|
-
|
|
16
|
-
form: {
|
|
17
|
-
height: 0,
|
|
18
|
-
flex: 1,
|
|
19
|
-
padding: '8px 16px 16px 16px',
|
|
20
|
-
overflow: 'auto',
|
|
21
|
-
},
|
|
22
|
-
actions: {
|
|
23
|
-
padding: 16,
|
|
24
|
-
display: 'flex',
|
|
25
|
-
borderTop: `1px solid ${token.colorBorderSecondary}`,
|
|
26
|
-
justifyContent: 'flex-end',
|
|
27
|
-
gap: 16,
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
}));
|
|
31
|
-
|
|
32
|
-
interface OptionsEditorProps {
|
|
33
|
-
value?: any;
|
|
34
|
-
onChange?: any;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
const OptionsEditor: React.FC<OptionsEditorProps> = ({
|
|
38
|
-
value,
|
|
39
|
-
onChange,
|
|
40
|
-
}) => {
|
|
41
|
-
const { styles } = useStyles();
|
|
42
|
-
const [form] = Form.useForm();
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
const handleSave = () => {
|
|
46
|
-
form.validateFields().then((values) => {
|
|
47
|
-
onChange(values);
|
|
48
|
-
});
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
const handleReset = () => {
|
|
52
|
-
form.setFieldsValue(defaultConfig);
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
return (
|
|
56
|
-
<div className={styles.container}>
|
|
57
|
-
<Form
|
|
58
|
-
className={styles.form}
|
|
59
|
-
form={form}
|
|
60
|
-
layout="vertical"
|
|
61
|
-
initialValues={value}
|
|
62
|
-
>
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<Divider orientation="left">Theme</Divider>
|
|
66
|
-
|
|
67
|
-
<FormItem name={['theme', 'colorPrimary']} label="colorPrimary" normalize={value => value.toHexString()}>
|
|
68
|
-
<ColorPicker />
|
|
69
|
-
</FormItem>
|
|
70
|
-
|
|
71
|
-
<FormItem name={['theme', 'colorBgBase']} label="colorBgBase" normalize={value => value.toHexString()}>
|
|
72
|
-
<ColorPicker />
|
|
73
|
-
</FormItem>
|
|
74
|
-
|
|
75
|
-
<FormItem name={['theme', 'colorTextBase']} label="colorTextBase" normalize={value => value.toHexString()}>
|
|
76
|
-
<ColorPicker />
|
|
77
|
-
</FormItem>
|
|
78
|
-
|
|
79
|
-
<FormItem name={['theme', 'darkMode']} label="darkMode" >
|
|
80
|
-
<Switch />
|
|
81
|
-
</FormItem>
|
|
82
|
-
|
|
83
|
-
<FormItem name={['theme', 'leftHeader', 'logo']} label="leftHeader.logo" >
|
|
84
|
-
<Input />
|
|
85
|
-
</FormItem>
|
|
86
|
-
|
|
87
|
-
<FormItem name={['theme', 'leftHeader', 'title']} label="leftHeader.title" >
|
|
88
|
-
<Input />
|
|
89
|
-
</FormItem>
|
|
90
|
-
|
|
91
|
-
<Divider orientation="left">Sender</Divider>
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<FormItem name={['sender', 'disclaimer']} label="disclaimer" >
|
|
95
|
-
<Input />
|
|
96
|
-
</FormItem>
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
<FormItem name={['sender', 'maxLength']} label="maxLength" >
|
|
102
|
-
<InputNumber min={1000} />
|
|
103
|
-
</FormItem>
|
|
104
|
-
|
|
105
|
-
<Divider orientation="left">Welcome</Divider>
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<FormItem name={['welcome', 'greeting']} label="greeting" >
|
|
109
|
-
<Input />
|
|
110
|
-
</FormItem>
|
|
111
|
-
|
|
112
|
-
<FormItem name={['welcome', 'description']} label="description" >
|
|
113
|
-
<Input />
|
|
114
|
-
</FormItem>
|
|
115
|
-
|
|
116
|
-
<FormItem name={['welcome', 'avatar']} label="avatar" >
|
|
117
|
-
<Input />
|
|
118
|
-
</FormItem>
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
<FormItem name={['welcome', 'prompts']} isList label="prompts" >
|
|
122
|
-
{(fields: { key: string, name: string }[], { add, remove }: { add: (item: any) => void, remove: (name: string) => void }) => {
|
|
123
|
-
return <div>
|
|
124
|
-
{fields.map(field => {
|
|
125
|
-
return <Flex key={field.key} gap={6}>
|
|
126
|
-
<Form.Item style={{ flex: 1 }} key={field.key} name={[field.name, 'value']}>
|
|
127
|
-
<Input />
|
|
128
|
-
</Form.Item>
|
|
129
|
-
<IconButton icon={<SparkPlusLine />} onClick={() => add({})}></IconButton>
|
|
130
|
-
<IconButton icon={<SparkDeleteLine />} onClick={() => remove(field.name)}></IconButton>
|
|
131
|
-
</Flex>
|
|
132
|
-
})}
|
|
133
|
-
</div>
|
|
134
|
-
}}
|
|
135
|
-
</FormItem>
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
<Divider orientation="left">API</Divider>
|
|
139
|
-
|
|
140
|
-
<FormItem name={['api', 'baseURL']} label="baseURL" >
|
|
141
|
-
<Input />
|
|
142
|
-
</FormItem>
|
|
143
|
-
|
|
144
|
-
<FormItem name={['api', 'token']} label="token" >
|
|
145
|
-
<Input />
|
|
146
|
-
</FormItem>
|
|
147
|
-
</Form>
|
|
148
|
-
|
|
149
|
-
<div className={styles.actions}>
|
|
150
|
-
<Button onClick={handleReset}>Reset</Button>
|
|
151
|
-
<Button type="primary" onClick={handleSave}>
|
|
152
|
-
Save & Copy
|
|
153
|
-
</Button>
|
|
154
|
-
</div>
|
|
155
|
-
</div>
|
|
156
|
-
);
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
export default OptionsEditor;
|
|
160
|
-
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
export default {
|
|
2
|
-
theme: {
|
|
3
|
-
colorPrimary: '#615CED',
|
|
4
|
-
darkMode: true,
|
|
5
|
-
prefix: 'agentscope-runtime-webui',
|
|
6
|
-
leftHeader: {
|
|
7
|
-
logo: 'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
|
|
8
|
-
title: 'Runtime WebUI',
|
|
9
|
-
},
|
|
10
|
-
},
|
|
11
|
-
sender: {
|
|
12
|
-
attachments: false,
|
|
13
|
-
maxLength: 10000,
|
|
14
|
-
disclaimer:
|
|
15
|
-
'AI can also make mistakes, so please check carefully and use it with caution',
|
|
16
|
-
},
|
|
17
|
-
|
|
18
|
-
welcome: {
|
|
19
|
-
greeting: 'Hello, how can I help you today?',
|
|
20
|
-
description:
|
|
21
|
-
'I am a helpful assistant that can help you with your questions.',
|
|
22
|
-
avatar:
|
|
23
|
-
'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
|
|
24
|
-
prompts: [
|
|
25
|
-
{
|
|
26
|
-
value: 'Hello',
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
value: 'How are you?',
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
value: 'What can you do?',
|
|
33
|
-
},
|
|
34
|
-
],
|
|
35
|
-
},
|
|
36
|
-
api: {
|
|
37
|
-
baseURL: BASE_URL,
|
|
38
|
-
token: TOKEN,
|
|
39
|
-
},
|
|
40
|
-
};
|
|
41
|
-
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { SparkSettingLine } from "@agentscope-ai/icons";
|
|
2
|
-
import { IconButton, Drawer } from "@agentscope-ai/design";
|
|
3
|
-
import { useState } from "react";
|
|
4
|
-
import OptionsEditor from "./OptionsEditor";
|
|
5
|
-
|
|
6
|
-
interface OptionsPanelProps {
|
|
7
|
-
value?: any;
|
|
8
|
-
onChange?: any;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export default function OptionsPanel(props: OptionsPanelProps) {
|
|
12
|
-
const [open, setOpen] = useState(false);
|
|
13
|
-
|
|
14
|
-
return <>
|
|
15
|
-
<IconButton onClick={() => setOpen(true)} icon={<SparkSettingLine />} bordered={false} />
|
|
16
|
-
<Drawer
|
|
17
|
-
destroyOnHidden
|
|
18
|
-
open={open}
|
|
19
|
-
onClose={() => setOpen(false)}
|
|
20
|
-
styles={{ body: { padding: 0 }, header: { padding: 8 } }}>
|
|
21
|
-
<OptionsEditor value={props.value} onChange={(v: typeof props.value) => {
|
|
22
|
-
setOpen(false);
|
|
23
|
-
props.onChange(v);
|
|
24
|
-
}} />
|
|
25
|
-
</Drawer>
|
|
26
|
-
</>
|
|
27
|
-
}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { AgentScopeRuntimeWebUI, IAgentScopeRuntimeWebUIOptions } from '@agentscope-ai/chat';
|
|
2
|
-
import OptionsPanel from './OptionsPanel';
|
|
3
|
-
import { useMemo } from 'react';
|
|
4
|
-
import sessionApi from './sessionApi';
|
|
5
|
-
import { useLocalStorageState } from 'ahooks';
|
|
6
|
-
import defaultConfig from './OptionsPanel/defaultConfig';
|
|
7
|
-
|
|
8
|
-
export default function () {
|
|
9
|
-
const [optionsConfig, setOptionsConfig] = useLocalStorageState('agent-scope-runtime-webui-options', {
|
|
10
|
-
defaultValue: defaultConfig,
|
|
11
|
-
listenStorageChange: true,
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
const options = useMemo(() => {
|
|
15
|
-
const rightHeader = <OptionsPanel value={optionsConfig} onChange={(v: typeof optionsConfig) => {
|
|
16
|
-
setOptionsConfig(prev => ({
|
|
17
|
-
...prev,
|
|
18
|
-
...v,
|
|
19
|
-
}));
|
|
20
|
-
}} />;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
return {
|
|
25
|
-
...optionsConfig,
|
|
26
|
-
session: {
|
|
27
|
-
multiple: true,
|
|
28
|
-
api: sessionApi,
|
|
29
|
-
},
|
|
30
|
-
theme: {
|
|
31
|
-
...optionsConfig.theme,
|
|
32
|
-
rightHeader,
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
}, [optionsConfig]);
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
return <div style={{ height: '100vh' }}>
|
|
41
|
-
<AgentScopeRuntimeWebUI
|
|
42
|
-
options={options as unknown as IAgentScopeRuntimeWebUIOptions}
|
|
43
|
-
/>
|
|
44
|
-
</div>;
|
|
45
|
-
}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
IAgentScopeRuntimeWebUISession,
|
|
3
|
-
IAgentScopeRuntimeWebUISessionAPI,
|
|
4
|
-
} from '@agentscope-ai/chat';
|
|
5
|
-
|
|
6
|
-
class SessionApi implements IAgentScopeRuntimeWebUISessionAPI {
|
|
7
|
-
private lsKey: string;
|
|
8
|
-
private sessionList: IAgentScopeRuntimeWebUISession[];
|
|
9
|
-
|
|
10
|
-
constructor() {
|
|
11
|
-
this.lsKey = 'agent-scope-runtime-webui-sessions';
|
|
12
|
-
this.sessionList = [];
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
async getSessionList() {
|
|
16
|
-
this.sessionList = JSON.parse(localStorage.getItem(this.lsKey) || '[]');
|
|
17
|
-
return [...this.sessionList];
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
async getSession(sessionId: string) {
|
|
21
|
-
return this.sessionList.find((session) => session.id === sessionId) as IAgentScopeRuntimeWebUISession;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
async updateSession(session: Partial<IAgentScopeRuntimeWebUISession>) {
|
|
25
|
-
const index = this.sessionList.findIndex((item) => item.id === session.id);
|
|
26
|
-
if (index > -1) {
|
|
27
|
-
this.sessionList[index] = {
|
|
28
|
-
...this.sessionList[index],
|
|
29
|
-
...session,
|
|
30
|
-
};
|
|
31
|
-
localStorage.setItem(this.lsKey, JSON.stringify(this.sessionList));
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
return [...this.sessionList];
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
async createSession(session: Partial<IAgentScopeRuntimeWebUISession>) {
|
|
38
|
-
session.id = Date.now().toString();
|
|
39
|
-
this.sessionList.unshift(session as IAgentScopeRuntimeWebUISession);
|
|
40
|
-
localStorage.setItem(this.lsKey, JSON.stringify(this.sessionList));
|
|
41
|
-
return [...this.sessionList];
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
async removeSession(session: Partial<IAgentScopeRuntimeWebUISession>) {
|
|
45
|
-
this.sessionList = this.sessionList.filter(
|
|
46
|
-
(item) => item.id !== session.id,
|
|
47
|
-
);
|
|
48
|
-
localStorage.setItem(this.lsKey, JSON.stringify(this.sessionList));
|
|
49
|
-
return [...this.sessionList];
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
export default new SessionApi();
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
|
4
|
-
"target": "ES2020",
|
|
5
|
-
"useDefineForClassFields": true,
|
|
6
|
-
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
7
|
-
"module": "ESNext",
|
|
8
|
-
"skipLibCheck": true,
|
|
9
|
-
|
|
10
|
-
"moduleResolution": "bundler",
|
|
11
|
-
"allowImportingTsExtensions": true,
|
|
12
|
-
"moduleDetection": "force",
|
|
13
|
-
"noEmit": true,
|
|
14
|
-
"jsx": "react-jsx",
|
|
15
|
-
|
|
16
|
-
"strict": true,
|
|
17
|
-
"noUnusedLocals": true,
|
|
18
|
-
"noUnusedParameters": true,
|
|
19
|
-
"erasableSyntaxOnly": true,
|
|
20
|
-
"noFallthroughCasesInSwitch": true,
|
|
21
|
-
"noUncheckedSideEffectImports": true
|
|
22
|
-
},
|
|
23
|
-
"include": ["src"]
|
|
24
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
4
|
-
"target": "ES2022",
|
|
5
|
-
"lib": ["ES2023"],
|
|
6
|
-
"module": "ESNext",
|
|
7
|
-
"skipLibCheck": true,
|
|
8
|
-
|
|
9
|
-
"moduleResolution": "bundler",
|
|
10
|
-
"allowImportingTsExtensions": true,
|
|
11
|
-
"moduleDetection": "force",
|
|
12
|
-
"noEmit": true,
|
|
13
|
-
|
|
14
|
-
"strict": true,
|
|
15
|
-
"noUnusedLocals": true,
|
|
16
|
-
"noUnusedParameters": true,
|
|
17
|
-
"erasableSyntaxOnly": true,
|
|
18
|
-
"noFallthroughCasesInSwitch": true,
|
|
19
|
-
"noUncheckedSideEffectImports": true
|
|
20
|
-
},
|
|
21
|
-
"include": ["vite.config.ts"]
|
|
22
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { defineConfig } from 'vite'
|
|
2
|
-
import react from '@vitejs/plugin-react'
|
|
3
|
-
|
|
4
|
-
export default defineConfig({
|
|
5
|
-
define: {
|
|
6
|
-
BASE_URL: JSON.stringify(process.env.BASE_URL || ''),
|
|
7
|
-
TOKEN: JSON.stringify(process.env.TOKEN || ''),
|
|
8
|
-
MOBILE: false,
|
|
9
|
-
},
|
|
10
|
-
plugins: [react()],
|
|
11
|
-
})
|