@saber2pr/ai-assistant 0.0.9 → 0.0.10

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.
Files changed (9) hide show
  1. package/lib/app.js +2 -1
  2. package/lib/chat.js +15 -1
  3. package/lib/chat.style.js +4 -4
  4. package/lib/components/Thread/index.style.js +3 -3
  5. package/lib/components/ThreadList/index.js +1 -1
  6. package/lib/llm/engine.d.ts +1 -1
  7. package/lib/llm/engine.js +3 -1
  8. package/lib/types/assistant.d.ts +5 -0
  9. package/package.json +1 -1
package/lib/app.js CHANGED
@@ -9,7 +9,8 @@ h1.textContent = 'Click the bottom right sidebar button to open the AI assistant
9
9
  document.body.append(h1);
10
10
  // 默认执行初始化
11
11
  (0, chat_1.default)({
12
- locale: 'en-US'
12
+ locale: 'en-US',
13
+ theme: function () { return 'light'; }
13
14
  // welcomeMessage: '有什么可以帮忙的？',
14
15
  // suggestions: ['如何用 Typescript 实现 Helloworld？', '物联网是什么？'],
15
16
  // placeholder: '给 GPT 发送消息',
package/lib/chat.js CHANGED
@@ -55,8 +55,22 @@ var MyApp = function (_a) {
55
55
  var config = _a.config;
56
56
  var _b = (0, react_1.useState)(false), open = _b[0], setOpen = _b[1];
57
57
  var _c = (0, react_1.useState)('chat'), activeTab = _c[0], setActiveTab = _c[1];
58
+ var _d = (0, react_1.useState)(function () {
59
+ if (typeof config.theme === 'function') {
60
+ return config.theme();
61
+ }
62
+ return config.theme || 'light';
63
+ }), currentTheme = _d[0], setCurrentTheme = _d[1];
64
+ (0, react_1.useEffect)(function () {
65
+ if (open && typeof config.theme === 'function') {
66
+ setCurrentTheme(config.theme());
67
+ }
68
+ }, [open, config.theme]);
58
69
  return (react_1.default.createElement(context_1.AIConfigContext.Provider, { value: config },
59
- react_1.default.createElement(MyAppContent, { open: open, setOpen: setOpen, activeTab: activeTab, setActiveTab: setActiveTab, config: config })));
70
+ react_1.default.createElement(antd_1.ConfigProvider, { theme: {
71
+ algorithm: currentTheme === 'dark' ? antd_1.theme.darkAlgorithm : antd_1.theme.defaultAlgorithm,
72
+ } },
73
+ react_1.default.createElement(MyAppContent, { open: open, setOpen: setOpen, activeTab: activeTab, setActiveTab: setActiveTab, config: config }))));
60
74
  };
61
75
  var MyAppContent = function (_a) {
62
76
  var open = _a.open, setOpen = _a.setOpen, activeTab = _a.activeTab, setActiveTab = _a.setActiveTab, config = _a.config;
package/lib/chat.style.js CHANGED
@@ -11,10 +11,10 @@ exports.PoweredByLink = exports.PoweredBy = exports.HistoryContainer = exports.C
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.DrawerTitle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 24px;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 24px;\n"])));
13
13
  exports.LoadingContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 0 40px;\n"], ["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 0 40px;\n"])));
14
- exports.LoadingText = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 24px;\n font-size: 16px;\n color: #666;\n text-align: center;\n"], ["\n margin-top: 24px;\n font-size: 16px;\n color: #666;\n text-align: center;\n"])));
15
- exports.LoadingTip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: 8px;\n font-size: 12px;\n color: #999;\n"], ["\n margin-top: 8px;\n font-size: 12px;\n color: #999;\n"])));
14
+ exports.LoadingText = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 24px;\n font-size: 16px;\n color: var(--ant-color-text-description, #666);\n text-align: center;\n"], ["\n margin-top: 24px;\n font-size: 16px;\n color: var(--ant-color-text-description, #666);\n text-align: center;\n"])));
15
+ exports.LoadingTip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: 8px;\n font-size: 12px;\n color: var(--ant-color-text-quaternary, #999);\n"], ["\n margin-top: 8px;\n font-size: 12px;\n color: var(--ant-color-text-quaternary, #999);\n"])));
16
16
  exports.ChatContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: ", ";\n height: calc(100vh - 160px);\n"], ["\n display: ", ";\n height: calc(100vh - 160px);\n"])), function (props) { return props.active ? 'block' : 'none'; });
17
17
  exports.HistoryContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: ", ";\n height: calc(100vh - 160px);\n overflow-y: auto;\n"], ["\n display: ", ";\n height: calc(100vh - 160px);\n overflow-y: auto;\n"])), function (props) { return props.active ? 'block' : 'none'; });
18
- exports.PoweredBy = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 12px 0;\n text-align: center;\n font-size: 12px;\n color: #bfbfbf;\n border-top: 1px solid #f0f0f0;\n background-color: #fff;\n z-index: 1;\n"], ["\n padding: 12px 0;\n text-align: center;\n font-size: 12px;\n color: #bfbfbf;\n border-top: 1px solid #f0f0f0;\n background-color: #fff;\n z-index: 1;\n"])));
19
- exports.PoweredByLink = styled_components_1.default.a(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: #bfbfbf;\n text-decoration: underline;\n"], ["\n color: #bfbfbf;\n text-decoration: underline;\n"])));
18
+ exports.PoweredBy = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 12px 0;\n text-align: center;\n font-size: 12px;\n color: var(--ant-color-text-quaternary, #bfbfbf);\n border-top: 1px solid var(--ant-color-border-secondary, #f0f0f0);\n background-color: var(--ant-color-bg-elevated, #fff);\n z-index: 1;\n"], ["\n padding: 12px 0;\n text-align: center;\n font-size: 12px;\n color: var(--ant-color-text-quaternary, #bfbfbf);\n border-top: 1px solid var(--ant-color-border-secondary, #f0f0f0);\n background-color: var(--ant-color-bg-elevated, #fff);\n z-index: 1;\n"])));
19
+ exports.PoweredByLink = styled_components_1.default.a(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: var(--ant-color-text-quaternary, #bfbfbf);\n text-decoration: underline;\n"], ["\n color: var(--ant-color-text-quaternary, #bfbfbf);\n text-decoration: underline;\n"])));
20
20
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/lib/components/Thread/index.style.js CHANGED
@@ -11,8 +11,8 @@ exports.UserInput = exports.InputSpace = exports.ButtomSpace = exports.MessageCo
11
11
  var react_1 = require("@assistant-ui/react");
12
12
  var antd_1 = require("antd");
13
13
  var styled_components_1 = __importDefault(require("styled-components"));
14
- exports.MessageContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-sizing: border-box;\n white-space: pre-wrap;\n word-break: break-word;\n background-color: #eff6ff;\n border-radius: 14px;\n padding: 8px 20px;\n\n & > p {\n margin-bottom: 0;\n margin-top: 0;\n }\n"], ["\n box-sizing: border-box;\n white-space: pre-wrap;\n word-break: break-word;\n background-color: #eff6ff;\n border-radius: 14px;\n padding: 8px 20px;\n\n & > p {\n margin-bottom: 0;\n margin-top: 0;\n }\n"])));
15
- exports.ButtomSpace = (0, styled_components_1.default)(antd_1.Space)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: sticky;\n bottom: 0;\n padding-top: 16px;\n background-color: #fff;\n padding: 0 24px;\n & > div:nth-child(2) {\n flex-grow: 1;\n }\n"], ["\n position: sticky;\n bottom: 0;\n padding-top: 16px;\n background-color: #fff;\n padding: 0 24px;\n & > div:nth-child(2) {\n flex-grow: 1;\n }\n"])));
14
+ exports.MessageContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-sizing: border-box;\n white-space: pre-wrap;\n word-break: break-word;\n background-color: var(--ant-color-primary-bg, #eff6ff);\n color: var(--ant-color-text, #333);\n border-radius: 14px;\n padding: 8px 20px;\n\n & > p {\n margin-bottom: 0;\n margin-top: 0;\n }\n"], ["\n box-sizing: border-box;\n white-space: pre-wrap;\n word-break: break-word;\n background-color: var(--ant-color-primary-bg, #eff6ff);\n color: var(--ant-color-text, #333);\n border-radius: 14px;\n padding: 8px 20px;\n\n & > p {\n margin-bottom: 0;\n margin-top: 0;\n }\n"])));
15
+ exports.ButtomSpace = (0, styled_components_1.default)(antd_1.Space)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: sticky;\n bottom: 0;\n padding-top: 16px;\n background-color: var(--ant-color-bg-elevated, #fff);\n padding: 0 24px;\n & > div:nth-child(2) {\n flex-grow: 1;\n }\n"], ["\n position: sticky;\n bottom: 0;\n padding-top: 16px;\n background-color: var(--ant-color-bg-elevated, #fff);\n padding: 0 24px;\n & > div:nth-child(2) {\n flex-grow: 1;\n }\n"])));
16
16
  exports.InputSpace = (0, styled_components_1.default)(antd_1.Space)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n & > div:nth-child(1) {\n flex-grow: 1;\n }\n"], ["\n width: 100%;\n & > div:nth-child(1) {\n flex-grow: 1;\n }\n"])));
17
- exports.UserInput = (0, styled_components_1.default)(react_1.ComposerPrimitive.Input)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n width: 100%;\n padding: 12px 16px;\n background-color: #f7f7f8;\n border-radius: 12px;\n border: 1px solid #d1d5db;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n outline: none;\n font-family: inherit;\n font-size: 14px;\n color: #333;\n min-height: 44px;\n max-height: 200px;\n resize: none;\n overflow-y: auto;\n box-sizing: border-box;\n\n &:focus {\n background-color: #fff;\n border-color: #1890ff;\n box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);\n }\n\n &::placeholder {\n color: #bfbfbf;\n }\n"], ["\n display: block;\n width: 100%;\n padding: 12px 16px;\n background-color: #f7f7f8;\n border-radius: 12px;\n border: 1px solid #d1d5db;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n outline: none;\n font-family: inherit;\n font-size: 14px;\n color: #333;\n min-height: 44px;\n max-height: 200px;\n resize: none;\n overflow-y: auto;\n box-sizing: border-box;\n\n &:focus {\n background-color: #fff;\n border-color: #1890ff;\n box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);\n }\n\n &::placeholder {\n color: #bfbfbf;\n }\n"])));
17
+ exports.UserInput = (0, styled_components_1.default)(react_1.ComposerPrimitive.Input)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n width: 100%;\n padding: 12px 16px;\n background-color: var(--ant-color-fill-tertiary, #f7f7f8);\n border-radius: 12px;\n border: 1px solid var(--ant-color-border, #d1d5db);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n outline: none;\n font-family: inherit;\n font-size: 14px;\n color: var(--ant-color-text, #333);\n min-height: 44px;\n max-height: 200px;\n resize: none;\n overflow-y: auto;\n box-sizing: border-box;\n\n &:focus {\n background-color: var(--ant-color-bg-container, #fff);\n border-color: var(--ant-color-primary, #1890ff);\n box-shadow: 0 0 0 2px var(--ant-color-primary-hover, rgba(24, 144, 255, 0.1));\n }\n\n &::placeholder {\n color: var(--ant-color-text-placeholder, #bfbfbf);\n }\n"], ["\n display: block;\n width: 100%;\n padding: 12px 16px;\n background-color: var(--ant-color-fill-tertiary, #f7f7f8);\n border-radius: 12px;\n border: 1px solid var(--ant-color-border, #d1d5db);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n outline: none;\n font-family: inherit;\n font-size: 14px;\n color: var(--ant-color-text, #333);\n min-height: 44px;\n max-height: 200px;\n resize: none;\n overflow-y: auto;\n box-sizing: border-box;\n\n &:focus {\n background-color: var(--ant-color-bg-container, #fff);\n border-color: var(--ant-color-primary, #1890ff);\n box-shadow: 0 0 0 2px var(--ant-color-primary-hover, rgba(24, 144, 255, 0.1));\n }\n\n &::placeholder {\n color: var(--ant-color-text-placeholder, #bfbfbf);\n }\n"])));
18
18
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/lib/components/ThreadList/index.js CHANGED
@@ -61,7 +61,7 @@ var event_1 = require("../../utils/event");
61
61
  var constants_1 = require("../../constants");
62
62
  var antd_2 = require("antd");
63
63
  var useI18n_1 = require("../../hooks/useI18n");
64
- var StyledThreadListItem = (0, styled_components_1.default)(react_2.ThreadListItemPrimitive.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: 8px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid #f0f0f0;\n background: #fafafa;\n\n &:hover {\n background-color: #f5f5f5;\n border-color: #d9d9d9;\n }\n\n &[data-active='true'] {\n background-color: #e6f7ff;\n border-color: #91d5ff;\n color: #1890ff;\n }\n"], ["\n margin-top: 8px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid #f0f0f0;\n background: #fafafa;\n\n &:hover {\n background-color: #f5f5f5;\n border-color: #d9d9d9;\n }\n\n &[data-active='true'] {\n background-color: #e6f7ff;\n border-color: #91d5ff;\n color: #1890ff;\n }\n"])));
64
+ var StyledThreadListItem = (0, styled_components_1.default)(react_2.ThreadListItemPrimitive.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: 8px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid var(--ant-color-border-secondary, #f0f0f0);\n background: var(--ant-color-fill-quaternary, #fafafa);\n color: var(--ant-color-text, inherit);\n\n &:hover {\n background-color: var(--ant-color-fill-tertiary, #f5f5f5);\n border-color: var(--ant-color-border, #d9d9d9);\n }\n\n &[data-active='true'] {\n background-color: var(--ant-color-primary-bg, #e6f7ff);\n border-color: var(--ant-color-primary-border, #91d5ff);\n color: var(--ant-color-primary, #1890ff);\n }\n"], ["\n margin-top: 8px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid var(--ant-color-border-secondary, #f0f0f0);\n background: var(--ant-color-fill-quaternary, #fafafa);\n color: var(--ant-color-text, inherit);\n\n &:hover {\n background-color: var(--ant-color-fill-tertiary, #f5f5f5);\n border-color: var(--ant-color-border, #d9d9d9);\n }\n\n &[data-active='true'] {\n background-color: var(--ant-color-primary-bg, #e6f7ff);\n border-color: var(--ant-color-primary-border, #91d5ff);\n color: var(--ant-color-primary, #1890ff);\n }\n"])));
65
65
  var StyledTrigger = (0, styled_components_1.default)(react_2.ThreadListItemPrimitive.Trigger)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: none;\n padding: 0;\n background: transparent;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n text-align: left;\n cursor: pointer;\n font-size: 14px;\n color: inherit;\n"], ["\n border: none;\n padding: 0;\n background: transparent;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n text-align: left;\n cursor: pointer;\n font-size: 14px;\n color: inherit;\n"])));
66
66
  var StyledDeleteButton = (0, styled_components_1.default)(react_2.ThreadListItemPrimitive.Delete)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-left: 8px;\n color: #bfbfbf;\n transition: all 0.2s;\n padding: 4px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: #ff4d4f;\n background-color: rgba(255, 77, 79, 0.1);\n }\n"], ["\n margin-left: 8px;\n color: #bfbfbf;\n transition: all 0.2s;\n padding: 4px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: #ff4d4f;\n background-color: rgba(255, 77, 79, 0.1);\n }\n"
67
67
  // 聊天列表
package/lib/llm/engine.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { InitProgressCallback } from "@mlc-ai/web-llm";
1
+ import { InitProgressCallback } from '@mlc-ai/web-llm';
2
2
  export interface GetLLmengineProps {
3
3
  selectedModel?: string;
4
4
  initProgressCallback?: InitProgressCallback;
package/lib/llm/engine.js CHANGED
@@ -43,7 +43,9 @@ var getLLMengine = function (_a) { return __awaiter(void 0, [_a], void 0, functi
43
43
  var _c = _b.selectedModel, selectedModel = _c === void 0 ? 'Llama-3.1-8B-Instruct-q4f32_1-MLC' : _c, initProgressCallback = _b.initProgressCallback;
44
44
  return __generator(this, function (_d) {
45
45
  switch (_d.label) {
46
- case 0: return [4 /*yield*/, (0, web_llm_1.CreateMLCEngine)(selectedModel, { initProgressCallback: initProgressCallback })];
46
+ case 0: return [4 /*yield*/, (0, web_llm_1.CreateMLCEngine)(selectedModel, {
47
+ initProgressCallback: initProgressCallback,
48
+ })];
47
49
  case 1:
48
50
  engine = _d.sent();
49
51
  return [2 /*return*/, engine];
package/lib/types/assistant.d.ts CHANGED
@@ -39,6 +39,11 @@ export interface AIAssistantConfig {
39
39
  x: number;
40
40
  y: number;
41
41
  };
42
+ /**
43
+ * The theme for the UI.
44
+ * @default 'light'
45
+ */
46
+ theme?: 'light' | 'dark' | (() => 'light' | 'dark');
42
47
  /**
43
48
  * A hook to intercept and modify conversation messages before they are sent to the AI.
44
49
  * Useful for injecting system prompts, background knowledge, or filtering history.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@saber2pr/ai-assistant",
3
- "version": "0.0.9",
3
+ "version": "0.0.10",
4
4
  "description": "AI Assistant",
5
5
  "files": [
6
6
  "lib"