@saber2pr/ai-assistant 0.0.4

package/ReadMe.md

@@ -0,0 +1,57 @@
+### @saber2pr/ai-assistant
+
+Quickly customize your GPT UI. **100% Client-side, No Server Required.**
+
+### Installation
+
+```bash
+npm install @saber2pr/ai-assistant
+# or
+yarn add @saber2pr/ai-assistant
+```
+
+### Quick Start
+
+Import and initialize in your project:
+
+```typescript
+import { initAIAssistant } from '@saber2pr/ai-assistant';
+
+initAIAssistant({
+  welcomeMessage: 'Hello! I am your AI assistant. How can I help you today?',
+  suggestions: ['How to use this UI?', 'Tell me about assistant-ui'],
+  locale: 'en-US'
+});
+```
+
+### API Reference
+
+#### `initAIAssistant(config?: AIAssistantConfig, container?: HTMLElement)`
+
+Initializes and mounts the AI assistant. This assistant runs entirely in the browser using [web-llm](https://github.com/mlc-ai/web-llm), meaning no backend server is required.
+
+- `config`: Configuration object (optional)
+- `container`: The DOM container to mount to, defaults to `document.body`
+
+#### `AIAssistantConfig`
+
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `welcomeMessage` | `string` | - | The welcome message displayed at the top of the chat. |
+| `suggestions` | `string[]` | - | A list of suggested questions to show when the chat is empty. |
+| `placeholder` | `string` | - | The placeholder text for the message input box. |
+| `emptyMessage` | `string` | - | The message displayed when the thread list is empty. |
+| `locale` | `'zh-CN' \| 'en-US'` | `'zh-CN'` | The language locale for the UI. |
+| `containerId` | `string` | `'ai-assistant-root'` | The ID of the container element where the assistant will be mounted. |
+| `initialPosition` | `{ x: number; y: number }` | Bottom-right | The initial coordinates of the floating button. |
+| `onBeforeChat` | `Function` | - | A hook to intercept and modify messages before they are sent to the AI. |
+
+### Local Development
+
+Start the service:
+
+```sh
+yarn install
+
+yarn dev
+```

package/lib/app.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/app.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var chat_1 = __importDefault(require("./chat"));
+var h1 = document.createElement('h1');
+h1.textContent = 'Click the bottom right sidebar button to open the AI assistant';
+document.body.append(h1);
+// 默认执行初始化
+(0, chat_1.default)({
+    locale: 'en-US'
+    // welcomeMessage: '有什么可以帮忙的？',
+    // suggestions: ['如何用 Typescript 实现 Helloworld？', '物联网是什么？'],
+    // placeholder: '给 GPT 发送消息',
+    // emptyMessage: '我是AI，可以回答你的问题，请在下方输入框输入你的需求～',
+    // async onBeforeChat(messages) {
+    //   const knowledgeContent = await fetch('http://localhost:5001/HTML超文本标记语言/移动端禁用双指放大.md').then(res => res.text())
+    //   return [
+    //     {
+    //       role: "system",
+    //       content: `你是我的博客助手，根据我博客内容回答：移动端禁用双指放大的方法：\n${knowledgeContent}`
+    //     },
+    //     ...messages
+    //   ]
+    // },
+});

package/lib/chat.d.ts

@@ -0,0 +1,3 @@
+import { AIAssistantConfig } from './types/assistant';
+export declare const initAIAssistant: (config?: AIAssistantConfig, container?: HTMLElement) => void;
+export default initAIAssistant;

package/lib/chat.js

@@ -0,0 +1,222 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initAIAssistant = void 0;
+var antd_1 = require("antd");
+var react_1 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var icons_1 = require("@ant-design/icons");
+var react_2 = require("@assistant-ui/react");
+var MyRuntimeProvider_1 = require("./components/MyRuntimeProvider");
+var Thread_1 = require("./components/Thread");
+var ThreadList_1 = require("./components/ThreadList");
+var context_1 = require("./context");
+var useI18n_1 = require("./hooks/useI18n");
+var context_2 = require("./llm/context");
+var engine_1 = require("./llm/engine");
+var styles_1 = require("./styles");
+var chat_style_1 = require("./chat.style");
+var MyApp = function (_a) {
+    var config = _a.config;
+    var _b = (0, react_1.useState)(false), open = _b[0], setOpen = _b[1];
+    var _c = (0, react_1.useState)('chat'), activeTab = _c[0], setActiveTab = _c[1];
+    return (react_1.default.createElement(context_1.AIConfigContext.Provider, { value: config },
+        react_1.default.createElement(MyAppContent, { open: open, setOpen: setOpen, activeTab: activeTab, setActiveTab: setActiveTab, config: config })));
+};
+var MyAppContent = function (_a) {
+    var open = _a.open, setOpen = _a.setOpen, activeTab = _a.activeTab, setActiveTab = _a.setActiveTab, config = _a.config;
+    var t = (0, useI18n_1.useI18n)().t;
+    var _b = (0, react_1.useState)(t('loadingModel')), loadingText = _b[0], setLoadingText = _b[1];
+    var _c = (0, react_1.useState)(0), loadingProgress = _c[0], setLoadingProgress = _c[1];
+    var _d = (0, react_1.useState)(false), loading = _d[0], setLoading = _d[1];
+    var _e = (0, react_1.useState)(null), engine = _e[0], setEngine = _e[1];
+    var defaultPos = config.initialPosition || { x: window.innerWidth - 100, y: window.innerHeight - 100 };
+    var _f = (0, react_1.useState)(defaultPos), position = _f[0], setPosition = _f[1];
+    var _g = (0, react_1.useState)(false), isDragging = _g[0], setIsDragging = _g[1];
+    var dragStartPos = react_1.default.useRef({ x: 0, y: 0 });
+    var buttonPos = react_1.default.useRef(defaultPos);
+    var lastWindowSize = react_1.default.useRef({ width: window.innerWidth, height: window.innerHeight });
+    // 监听窗口大小变化，修正按钮位置
+    (0, react_1.useEffect)(function () {
+        var handleResize = function () {
+            var currentWidth = window.innerWidth;
+            var currentHeight = window.innerHeight;
+            setPosition(function (prev) {
+                // 计算按钮相对于右侧和底部的距离比例，或者简单的保持吸附状态
+                var isAtRight = prev.x > lastWindowSize.current.width / 2;
+                var newX = prev.x;
+                // 如果原本在右侧，放大窗口时让它跟随右侧边缘
+                if (isAtRight) {
+                    var offsetRight = lastWindowSize.current.width - prev.x;
+                    newX = currentWidth - offsetRight;
+                }
+                // 垂直方向同理，如果靠下，保持相对底部的距离
+                var isAtBottom = prev.y > lastWindowSize.current.height / 2;
+                var newY = prev.y;
+                if (isAtBottom) {
+                    var offsetBottom = lastWindowSize.current.height - prev.y;
+                    newY = currentHeight - offsetBottom;
+                }
+                // 最终边界安全检查
+                var safeX = Math.max(20, Math.min(newX, currentWidth - 84));
+                var safeY = Math.max(20, Math.min(newY, currentHeight - 84));
+                buttonPos.current = { x: safeX, y: safeY };
+                return { x: safeX, y: safeY };
+            });
+            lastWindowSize.current = { width: currentWidth, height: currentHeight };
+        };
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    // 当语言切换时，更新初始加载文本
+    (0, react_1.useEffect)(function () {
+        if (!engine && !loading) {
+            setLoadingText(t('loadingModel'));
+        }
+    }, [t, engine, loading]);
+    // 当弹窗打开且引擎未加载时，开始加载引擎
+    (0, react_1.useEffect)(function () {
+        if (open && !engine && !loading) {
+            setLoading(true);
+            (0, engine_1.getLLMengine)({
+                selectedModel: 'Qwen2.5-Coder-0.5B-Instruct-q4f16_1-MLC',
+                initProgressCallback: function (initProgress) {
+                    setLoadingText(initProgress.text);
+                    setLoadingProgress(Math.round(initProgress.progress * 100));
+                    if (initProgress.progress === 1) {
+                        setLoading(false);
+                    }
+                }
+            }).then(function (res) {
+                setEngine(res);
+            }).catch(function (err) {
+                console.error('Failed to load LLM engine:', err);
+                setLoading(false);
+            });
+        }
+    }, [open, engine, loading]);
+    var handleMouseDown = function (e) {
+        setIsDragging(false);
+        dragStartPos.current = { x: e.clientX, y: e.clientY };
+        var onMouseMove = function (moveEvent) {
+            var deltaX = Math.abs(moveEvent.clientX - dragStartPos.current.x);
+            var deltaY = Math.abs(moveEvent.clientY - dragStartPos.current.y);
+            if (deltaX > 5 || deltaY > 5) {
+                setIsDragging(true);
+            }
+            if (isDragging || deltaX > 5 || deltaY > 5) {
+                var newX = moveEvent.clientX - 32;
+                var newY = moveEvent.clientY - 32;
+                setPosition({ x: newX, y: newY });
+                buttonPos.current = { x: newX, y: newY };
+            }
+        };
+        var onMouseUp = function () {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            // 吸附逻辑
+            var centerX = window.innerWidth / 2;
+            var finalX = buttonPos.current.x < centerX ? 20 : window.innerWidth - 84;
+            // 垂直边界检查
+            var finalY = buttonPos.current.y;
+            if (finalY < 20)
+                finalY = 20;
+            if (finalY > window.innerHeight - 84)
+                finalY = window.innerHeight - 84;
+            setPosition({ x: finalX, y: finalY });
+            buttonPos.current = { x: finalX, y: finalY };
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    };
+    var showDrawer = function () {
+        if (!isDragging) {
+            setOpen(true);
+        }
+    };
+    var onClose = function () {
+        setOpen(false);
+    };
+    return (react_1.default.createElement(context_2.LLMContext.Provider, { value: engine },
+        react_1.default.createElement(MyRuntimeProvider_1.MyRuntimeProvider, null,
+            react_1.default.createElement(styles_1.FloatButton, { onClick: showDrawer, onMouseDown: handleMouseDown, style: {
+                    left: position.x,
+                    top: position.y,
+                    bottom: 'auto',
+                    right: 'auto',
+                    transition: isDragging ? 'none' : 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                    userSelect: 'none',
+                    touchAction: 'none',
+                    opacity: open ? 0 : 1,
+                    pointerEvents: open ? 'none' : 'auto',
+                    transform: open ? 'scale(0) rotate(-20deg)' : (isDragging ? 'scale(1.05)' : 'scale(1)')
+                } }, loading && !engine ? react_1.default.createElement(icons_1.LoadingOutlined, null) : react_1.default.createElement(icons_1.MessageOutlined, null)),
+            react_1.default.createElement(antd_1.Drawer, { title: react_1.default.createElement(chat_style_1.DrawerTitle, null,
+                    react_1.default.createElement("span", null, t('assistantTitle')),
+                    !loading && engine && (react_1.default.createElement(react_2.ThreadListPrimitive.New, { asChild: true },
+                        react_1.default.createElement(antd_1.Button, { type: "text", icon: react_1.default.createElement(icons_1.PlusOutlined, null), onClick: function () { return setActiveTab('chat'); } }, t('newChat'))))), placement: "right", onClose: onClose, visible: open, width: 600, bodyStyle: { padding: '0 16px', display: 'flex', flexDirection: 'column' } },
+                loading || !engine ? (react_1.default.createElement(chat_style_1.LoadingContainer, null,
+                    react_1.default.createElement(antd_1.Progress, { type: "circle", percent: loadingProgress, strokeColor: {
+                            '0%': '#108ee9',
+                            '100%': '#87d068',
+                        } }),
+                    react_1.default.createElement(chat_style_1.LoadingText, null, loadingText),
+                    react_1.default.createElement(chat_style_1.LoadingTip, null, t('loadingTip')))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(antd_1.Tabs, { activeKey: activeTab, onChange: setActiveTab, items: [
+                            { key: 'chat', label: t('tabChat') },
+                            { key: 'history', label: t('tabHistory') },
+                        ] }),
+                    react_1.default.createElement("div", { style: { flex: 1, position: 'relative', overflow: 'hidden' } },
+                        react_1.default.createElement(chat_style_1.ChatContainer, { active: activeTab === 'chat' },
+                            react_1.default.createElement(Thread_1.Thread, null)),
+                        react_1.default.createElement(chat_style_1.HistoryContainer, { active: activeTab === 'history' },
+                            react_1.default.createElement(ThreadList_1.ThreadList, { onItemClick: function () { return setActiveTab('chat'); } }))))),
+                react_1.default.createElement(chat_style_1.PoweredBy, null,
+                    "Powerd by ",
+                    react_1.default.createElement(chat_style_1.PoweredByLink, { href: "https://github.com/Saber2pr/my-gpt-ui", target: "_blank", rel: "noreferrer" }, "my-gpt-ui"))))));
+};
+var initAIAssistant = function (config, container) {
+    if (config === void 0) { config = {}; }
+    var target = container || document.body;
+    var rootDiv = document.createElement('div');
+    rootDiv.id = config.containerId || 'ai-assistant-root';
+    target.appendChild(rootDiv);
+    react_dom_1.default.render(react_1.default.createElement(MyApp, { config: config }), rootDiv);
+};
+exports.initAIAssistant = initAIAssistant;
+exports.default = exports.initAIAssistant;

package/lib/chat.style.d.ts

@@ -0,0 +1,12 @@
+export declare const DrawerTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingTip: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChatContainer: import("styled-components").StyledComponent<"div", any, {
+    active: boolean;
+}, never>;
+export declare const HistoryContainer: import("styled-components").StyledComponent<"div", any, {
+    active: boolean;
+}, never>;
+export declare const PoweredBy: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PoweredByLink: import("styled-components").StyledComponent<"a", any, {}, never>;

package/lib/chat.style.js

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoweredByLink = exports.PoweredBy = exports.HistoryContainer = exports.ChatContainer = exports.LoadingTip = exports.LoadingText = exports.LoadingContainer = exports.DrawerTitle = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+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"])));
+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"])));
+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"])));
+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"])));
+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'; });
+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'; });
+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"])));
+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"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/lib/components/Codeblock/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const registerLanguage: (name: string, meta: any) => any;
+export interface CodeBlockProps {
+    code: string;
+    language: string;
+    className: string;
+    children: React.ReactNode;
+}
+export declare const CodeBlock: React.FC<CodeBlockProps>;

package/lib/components/Codeblock/index.js

@@ -0,0 +1,55 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = exports.registerLanguage = void 0;
+var react_1 = __importDefault(require("react"));
+var prism_light_1 = __importDefault(require("react-syntax-highlighter/dist/cjs/prism-light"));
+var atom_dark_1 = __importDefault(require("react-syntax-highlighter/dist/cjs/styles/prism/atom-dark"));
+var SyntaxHighlighter = prism_light_1.default;
+var useCopy_1 = require("../../hooks/useCopy");
+var cpp_1 = __importDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/cpp"));
+var haskell_1 = __importDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/haskell"));
+var tsx_1 = __importDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/tsx"));
+var go_1 = __importDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/go"));
+var python_1 = __importDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/python"));
+var index_style_1 = require("./index.style");
+var icons_1 = require("@ant-design/icons");
+var registerLanguage = function (name, meta) {
+    return SyntaxHighlighter.registerLanguage(name, meta);
+};
+exports.registerLanguage = registerLanguage;
+(0, exports.registerLanguage)('tsx', tsx_1.default);
+(0, exports.registerLanguage)('hs', haskell_1.default);
+(0, exports.registerLanguage)('cpp', cpp_1.default);
+(0, exports.registerLanguage)('go', go_1.default);
+(0, exports.registerLanguage)('python', python_1.default);
+var CodeBlock = function (_a) {
+    var _b, _c, _d;
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    // @ts-ignore
+    var id = (_d = (_c = (_b = props === null || props === void 0 ? void 0 : props.node) === null || _b === void 0 ? void 0 : _b.position) === null || _c === void 0 ? void 0 : _c.start) === null || _d === void 0 ? void 0 : _d.line;
+    var copyer = (0, useCopy_1.useCopy)("".concat(id));
+    if (/^language-/.test(className) && children) {
+        var lang = className.replace(/^language-/, '');
+        return (react_1.default.createElement(index_style_1.Contain, null,
+            react_1.default.createElement("div", { className: "Paste", ref: copyer.button },
+                react_1.default.createElement(icons_1.CopyOutlined, null)),
+            react_1.default.createElement("div", { ref: copyer.target },
+                react_1.default.createElement(SyntaxHighlighter, { language: lang, style: atom_dark_1.default }, String(children).trim()))));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+exports.CodeBlock = CodeBlock;

package/lib/components/Codeblock/index.style.d.ts

@@ -0,0 +1 @@
+export declare const Contain: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Codeblock/index.style.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Contain = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Contain = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  max-width: 100%;\n  overflow: hidden;\n  border-radius: 8px;\n  margin: 8px 0;\n\n  pre {\n    margin: 0 !important;\n    max-width: 100%;\n    overflow: auto !important;\n    white-space: pre-wrap !important;\n    word-break: break-all !important;\n  }\n\n  .Paste {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    color: rgb(173, 173, 173);\n    opacity: 0.5;\n    cursor: pointer;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n"], ["\n  position: relative;\n  max-width: 100%;\n  overflow: hidden;\n  border-radius: 8px;\n  margin: 8px 0;\n\n  pre {\n    margin: 0 !important;\n    max-width: 100%;\n    overflow: auto !important;\n    white-space: pre-wrap !important;\n    word-break: break-all !important;\n  }\n\n  .Paste {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    color: rgb(173, 173, 173);\n    opacity: 0.5;\n    cursor: pointer;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n"])));
+var templateObject_1;

package/lib/components/MarkdownText/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TextContentPartProps } from '@assistant-ui/react';
+export declare const MarkdownText: React.MemoExoticComponent<(props: TextContentPartProps) => JSX.Element>;

package/lib/components/MarkdownText/index.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownText = void 0;
+var react_1 = __importStar(require("react"));
+var remark_gfm_1 = __importDefault(require("remark-gfm"));
+var react_markdown_1 = require("@assistant-ui/react-markdown");
+var antd_1 = require("antd");
+var Codeblock_1 = require("../Codeblock");
+var useI18n_1 = require("../../hooks/useI18n");
+var MarkdownTextImpl = function (props) {
+    var _a;
+    var t = (0, useI18n_1.useI18n)().t;
+    // props.status.type 可以拿到当前 ai 对话的进度、状态
+    // running、complete、incomplete
+    // reason: "cancelled"
+    var type = (_a = props === null || props === void 0 ? void 0 : props.status) === null || _a === void 0 ? void 0 : _a.type;
+    var text = props === null || props === void 0 ? void 0 : props.text;
+    if (type === 'running' && !text) {
+        return (react_1.default.createElement(antd_1.Skeleton.Node, { active: true, style: {
+                width: 100,
+                borderRadius: 14,
+                height: '38px',
+            } }, t('thinking')));
+    }
+    return (react_1.default.createElement("div", { style: {
+            marginTop: 6,
+            maxWidth: '100%',
+            overflow: 'hidden',
+            wordBreak: 'break-word',
+        } },
+        react_1.default.createElement(react_markdown_1.MarkdownTextPrimitive, { remarkPlugins: [remark_gfm_1.default], components: {
+                code: Codeblock_1.CodeBlock,
+            } })));
+};
+exports.MarkdownText = (0, react_1.memo)(MarkdownTextImpl);

package/lib/components/MyRuntimeProvider/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface MyRuntimeProviderProps {
+    children: React.ReactNode;
+}
+export declare function MyRuntimeProvider({ children }: MyRuntimeProviderProps): JSX.Element;

package/lib/components/MyRuntimeProvider/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MyRuntimeProvider = MyRuntimeProvider;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@assistant-ui/react");
+var myModelAdapterStream_1 = require("./myModelAdapterStream");
+var context_1 = require("@/llm/context");
+var context_2 = require("../../context");
+function MyRuntimeProvider(_a) {
+    var children = _a.children;
+    var llm = (0, context_1.useLLm)();
+    var config = react_1.default.useContext(context_2.AIConfigContext);
+    var runtime = (0, react_2.useLocalRuntime)((0, myModelAdapterStream_1.MyModelAdapterStream)(llm, config.onBeforeChat), {
+        adapters: {
+            speech: new react_2.WebSpeechSynthesisAdapter(),
+        },
+    });
+    return (react_1.default.createElement(react_2.AssistantRuntimeProvider, { runtime: runtime }, children));
+}

package/lib/components/MyRuntimeProvider/myModelAdapterStream.d.ts

@@ -0,0 +1,4 @@
+import { ChatModelAdapter } from '@assistant-ui/react';
+import { MLCEngine } from '@mlc-ai/web-llm';
+import { ChatMessage } from '../../types/assistant';
+export declare const MyModelAdapterStream: (llm: MLCEngine, onBeforeChat?: (messages: ChatMessage[], llm: MLCEngine) => ChatMessage[] | Promise<ChatMessage[]>) => ChatModelAdapter;