@vectorx/agent-simulator 0.1.0

package/lib/webview-ui/App.js

@@ -0,0 +1,359 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const icons_1 = require("@ant-design/icons");
+const icons_2 = require("@ant-design/icons");
+const x_1 = require("@ant-design/x");
+const antd_1 = require("antd");
+const antd_2 = require("antd");
+const react_1 = __importStar(require("react"));
+const Agent_1 = require("./Agent");
+const ErrorBoundary_1 = require("./ErrorBoundary");
+const components_1 = require("./components");
+const constants_1 = require("./constants");
+const ThemeContext_1 = require("./contexts/ThemeContext");
+const useAgentStatus_1 = require("./hooks/useAgentStatus");
+const copilot_1 = require("./styles/copilot");
+const workarea_1 = require("./styles/workarea");
+const widgets_1 = require("./widgets");
+const LogPanel_1 = require("./widgets/LogPanel");
+const ChatAgent = ({ agentSimulatorInfo, onMessageUpdate, onRequestStart, onRequestEnd, onUserSubmit, onCancel, }) => {
+    const abortController = (0, react_1.useRef)(null);
+    const [agent] = (0, x_1.useXAgent)({
+        baseURL: (0, Agent_1.getSendMessageUri)(agentSimulatorInfo),
+    });
+    const handleUserSubmit = (0, react_1.useCallback)((val, messages) => {
+        const userMessage = {
+            id: `user-${Date.now()}`,
+            role: "user",
+            content: val,
+            isThinking: false,
+            isTimeout: false,
+            isInterrupted: false,
+            isUiDiscard: false,
+            uiTimeStr: new Date().toLocaleTimeString(),
+            type: "answer",
+        };
+        const newMessages = [...messages, userMessage];
+        onMessageUpdate(newMessages);
+        onRequestStart();
+        agent.request({
+            msg: val,
+            history: [],
+        }, {
+            onUpdate: (chunk) => {
+                try {
+                    if (chunk === null || chunk === void 0 ? void 0 : chunk.data) {
+                        const data = typeof chunk.data === "string" ? chunk.data : chunk.data.toString();
+                        if (data.endsWith("[DONE]")) {
+                            return;
+                        }
+                        let message;
+                        try {
+                            message = JSON.parse(data);
+                        }
+                        catch (parseError) {
+                            console.error("Failed to parse message data:", parseError);
+                            return;
+                        }
+                        if (!message || typeof message !== "object") {
+                            console.warn("Invalid message object:", message);
+                            return;
+                        }
+                        const msgType = message.choices[0].message.type;
+                        const currentText = message.choices[0].message.content || "";
+                        const currentReasoning = message.choices[0].message.reasoning_content || "";
+                        const messageId = message.id;
+                        onMessageUpdate((prev) => {
+                            const newMessages = [...prev];
+                            let existingIndex = newMessages.findIndex((msg) => msg.id === messageId);
+                            if (existingIndex === -1) {
+                                const newMessage = {
+                                    id: messageId,
+                                    role: "assistant",
+                                    content: "",
+                                    reasoningContent: "",
+                                    isThinking: true,
+                                    isTimeout: false,
+                                    isInterrupted: false,
+                                    isUiDiscard: false,
+                                    uiTimeStr: new Date().toLocaleTimeString(),
+                                    type: "thinking",
+                                    cards: [],
+                                    timestamp: Date.now(),
+                                };
+                                newMessages.push(newMessage);
+                                existingIndex = newMessages.length - 1;
+                            }
+                            const existingMessage = newMessages[existingIndex];
+                            const updatedMessage = Object.assign({}, existingMessage);
+                            updatedMessage.reasoningContent = (updatedMessage.reasoningContent || "") + currentReasoning;
+                            updatedMessage.isThinking = !!currentReasoning;
+                            if (msgType === "answer") {
+                                updatedMessage.content = (updatedMessage.content || "") + currentText;
+                                updatedMessage.type = "answer";
+                            }
+                            else if ([
+                                "function_call",
+                                "function_call_response",
+                                "knowledge_base_search",
+                                "knowledge_base_search_response",
+                            ].includes(msgType)) {
+                                const cards = updatedMessage.cards ? [...updatedMessage.cards] : [];
+                                const existingCardIndex = cards.findIndex((card) => card.type === msgType);
+                                const newCard = {
+                                    type: msgType,
+                                    content: currentText,
+                                };
+                                if (existingCardIndex !== -1) {
+                                    cards[existingCardIndex].content += currentText;
+                                }
+                                else {
+                                    cards.push(newCard);
+                                }
+                                updatedMessage.cards = cards;
+                                if (existingMessage.type === "thinking") {
+                                    updatedMessage.type = msgType;
+                                }
+                            }
+                            newMessages[existingIndex] = updatedMessage;
+                            return newMessages;
+                        });
+                    }
+                }
+                catch (error) {
+                    console.error("Transform message error:", error);
+                }
+            },
+            onSuccess: () => {
+                onMessageUpdate((prev) => {
+                    return prev.map((msg) => (Object.assign(Object.assign({}, msg), { isThinking: false })));
+                });
+                onRequestEnd();
+            },
+            onError: (error) => {
+                console.error("Request error:", error);
+                onMessageUpdate((prev) => {
+                    const newMessages = [...prev];
+                    const lastMessageIndex = newMessages.length - 1;
+                    if (lastMessageIndex >= 0 && newMessages[lastMessageIndex].isThinking) {
+                        newMessages[lastMessageIndex] = Object.assign(Object.assign({}, newMessages[lastMessageIndex]), { content: error.name === "AbortError" ? "请求已取消" : "请求失败，请重试！", isThinking: false });
+                    }
+                    return newMessages;
+                });
+                onRequestEnd();
+            },
+            onStream: (controller) => {
+                abortController.current = controller;
+            },
+        });
+    }, [agent, onMessageUpdate, onRequestStart, onRequestEnd]);
+    const handleCancel = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = abortController.current) === null || _a === void 0 ? void 0 : _a.abort();
+    }, []);
+    react_1.default.useEffect(() => {
+        onUserSubmit(handleUserSubmit);
+        onCancel(handleCancel);
+    }, [handleUserSubmit, handleCancel, onUserSubmit, onCancel]);
+    return react_1.default.createElement("div", { style: { display: "none" } });
+};
+const Copilot = () => {
+    const { isDark } = (0, ThemeContext_1.useThemeHook)();
+    const { token } = antd_1.theme.useToken();
+    const { styles } = (0, copilot_1.useCopilotStyle)();
+    const attachmentsRef = (0, react_1.useRef)(null);
+    const chatUserSubmitRef = (0, react_1.useRef)(null);
+    const chatCancelRef = (0, react_1.useRef)(null);
+    const [attachmentsOpen, setAttachmentsOpen] = (0, react_1.useState)(false);
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const [messages, setMessages] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const { agentSimulatorInfo, debugStatus, isConnecting, retryConnection } = (0, useAgentStatus_1.useAgentStatus)();
+    const [showSystemLogs, setShowSystemLogs] = (0, react_1.useState)(false);
+    const [activeLogTab, setActiveLogTab] = (0, react_1.useState)("system");
+    const handleClearChat = () => {
+        setMessages([]);
+    };
+    const handleToggleLogs = () => setShowSystemLogs((v) => !v);
+    const canSendMessage = agentSimulatorInfo && debugStatus === "normal";
+    const getDisabledReason = () => {
+        if (!agentSimulatorInfo) {
+            return "服务断开，无法发送消息";
+        }
+        if (debugStatus !== "normal") {
+            return "调试状态异常，无法发送消息";
+        }
+        return "";
+    };
+    const handleUserSubmit = (val) => {
+        if (!canSendMessage) {
+            antd_2.message.warning(getDisabledReason());
+            return;
+        }
+        if (chatUserSubmitRef.current) {
+            chatUserSubmitRef.current(val, messages);
+        }
+    };
+    const handleCancel = () => {
+        if (chatCancelRef.current) {
+            chatCancelRef.current();
+        }
+    };
+    const onPasteFile = (_, files) => {
+        var _a;
+        for (const file of files) {
+            (_a = attachmentsRef.current) === null || _a === void 0 ? void 0 : _a.upload(file);
+        }
+        setAttachmentsOpen(true);
+    };
+    const chatList = (react_1.default.createElement("div", { className: styles.chatList, style: { display: "flex", flexDirection: "column" } }, (messages === null || messages === void 0 ? void 0 : messages.length) ? (react_1.default.createElement(x_1.Bubble.List, { style: { height: "100%", padding: "12px 16px" }, items: messages.map((item) => {
+            return {
+                content: item.content,
+                role: item.role,
+                messageRender: () => (item.role === "user" ? item.content : react_1.default.createElement(components_1.MessageRenderer, { message: item })),
+            };
+        }), roles: {
+            assistant: {
+                placement: "start",
+                loadingRender: () => (react_1.default.createElement(antd_2.Space, null,
+                    react_1.default.createElement(antd_2.Spin, { size: "small" }),
+                    "Custom loading...")),
+                avatar: {
+                    icon: react_1.default.createElement(icons_2.AliwangwangFilled, null),
+                    style: { background: token.colorInfoText },
+                },
+                styles: {
+                    content: {
+                        backgroundColor: "transparent",
+                        padding: 0,
+                    },
+                },
+            },
+            user: {
+                placement: "start",
+                avatar: {
+                    icon: react_1.default.createElement(icons_2.UserOutlined, null),
+                    style: {
+                        background: token.colorSuccessText,
+                    },
+                },
+            },
+        } })) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(x_1.Welcome, { variant: "borderless", title: "\uD83D\uDC4B Hello, \u5C0F\u7A0B\u5E8F\u5F00\u653E\u5E73\u53F0\u667A\u80FD\u4F53\u8C03\u8BD5\u5668", description: "\u63D0\u4F9B Agent \u8C03\u8BD5\u6A21\u62DF\u529F\u80FD", className: styles.chatWelcome, style: {
+                backgroundImage: isDark
+                    ? "linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)"
+                    : "linear-gradient(97deg, #f2f9fe 0%, #f7f3ff 100%)",
+            } }),
+        react_1.default.createElement(x_1.Prompts, { vertical: true, title: "\u6211\u53EF\u4EE5\u5E2E\u52A9\u4F60\uFF1A", items: constants_1.MOCK_QUESTIONS.map((i) => ({
+                key: i,
+                description: i,
+            })), onItemClick: (info) => { var _a; return handleUserSubmit((_a = info === null || info === void 0 ? void 0 : info.data) === null || _a === void 0 ? void 0 : _a.description); }, style: {
+                marginInline: 16,
+            }, styles: {
+                title: { fontSize: 14 },
+            } })))));
+    const sendHeader = (react_1.default.createElement(x_1.Sender.Header, { title: "Upload File", styles: { content: { padding: 0 } }, open: attachmentsOpen, onOpenChange: setAttachmentsOpen, forceRender: true },
+        react_1.default.createElement(x_1.Attachments, { ref: attachmentsRef, beforeUpload: () => false, items: files, onChange: ({ fileList }) => setFiles(fileList), placeholder: (type) => type === "drop"
+                ? { title: "Drop file here" }
+                : {
+                    icon: react_1.default.createElement(icons_1.CloudUploadOutlined, null),
+                    title: "Upload files",
+                    description: "Click or drag files to this area to upload",
+                } })));
+    const chatSender = (react_1.default.createElement("div", { className: styles.chatSend, style: {
+            background: token.colorBgContainer,
+            borderTop: `1px solid ${token.colorBorder}`,
+            borderRadius: 0,
+            padding: "16px 20px",
+        } },
+        react_1.default.createElement(x_1.Suggestion, { items: constants_1.MOCK_SUGGESTIONS, onSelect: (itemVal) => setInputValue(`[${itemVal}]:`) }, ({ onTrigger, onKeyDown }) => (react_1.default.createElement(x_1.Sender, { loading: loading, value: inputValue, disabled: !canSendMessage, onChange: (v) => {
+                onTrigger(v === "/");
+                setInputValue(v);
+            }, onSubmit: () => {
+                handleUserSubmit(inputValue);
+                setInputValue("");
+            }, onCancel: handleCancel, allowSpeech: true, placeholder: !canSendMessage ? getDisabledReason() : "Ask or input / use skills", onKeyDown: onKeyDown, header: sendHeader, prefix: react_1.default.createElement(antd_2.Button, { type: "text", icon: react_1.default.createElement(icons_1.PaperClipOutlined, { style: { fontSize: 18 } }), onClick: () => setAttachmentsOpen(!attachmentsOpen), disabled: !canSendMessage }), onPasteFile: onPasteFile, actions: (_, info) => {
+                const { SendButton, LoadingButton, SpeechButton } = info.components;
+                return (react_1.default.createElement("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 4,
+                    } },
+                    react_1.default.createElement(SpeechButton, { className: styles.speechButton, disabled: !canSendMessage }),
+                    loading ? (react_1.default.createElement(LoadingButton, { type: "default" })) : (react_1.default.createElement(SendButton, { type: "primary", disabled: !canSendMessage }))));
+            } })))));
+    return (react_1.default.createElement("div", { className: styles.copilotChat, style: {
+            background: token.colorBgContainer,
+            minHeight: "100vh",
+            borderRadius: 0,
+            boxShadow: "none",
+            padding: 0,
+            border: `1px solid ${token.colorBorder}`,
+        } },
+        react_1.default.createElement(widgets_1.ToolBar, { agentSimulatorInfo: agentSimulatorInfo, debugStatus: debugStatus, showSystemLogs: showSystemLogs, isConnecting: isConnecting, onRetryConnection: retryConnection, onClearChat: handleClearChat, onToggleLogs: handleToggleLogs }),
+        react_1.default.createElement(LogPanel_1.LogPanel, { open: showSystemLogs, activeTab: activeLogTab, onTabChange: setActiveLogTab, onClose: () => setShowSystemLogs(false), agentSimulatorInfo: agentSimulatorInfo, height: constants_1.LOG_PANEL_HEIGHT, debugStatus: debugStatus }),
+        chatList,
+        chatSender,
+        agentSimulatorInfo && (react_1.default.createElement(ChatAgent, { agentSimulatorInfo: agentSimulatorInfo, onMessageUpdate: setMessages, onRequestStart: () => setLoading(true), onRequestEnd: () => setLoading(false), onUserSubmit: (fn) => {
+                chatUserSubmitRef.current = fn;
+            }, onCancel: (fn) => {
+                chatCancelRef.current = fn;
+            } }))));
+};
+const CopilotSimulator = () => {
+    const { styles: workareaStyles } = (0, workarea_1.useWorkareaStyle)();
+    const getIsDarkFromQuery = () => {
+        const params = new URLSearchParams(window.location.search);
+        return params.get("isDark") ? params.get("isDark") === "true" : false;
+    };
+    const initIsDarkMode = getIsDarkFromQuery();
+    const [darkMode, setDarkMode] = (0, react_1.useState)(initIsDarkMode);
+    if (typeof require === "function") {
+        const { ipcRenderer } = require("electron");
+        ipcRenderer.on("setTheme", (event, isDark) => {
+            setDarkMode(isDark);
+        });
+    }
+    return (react_1.default.createElement(ThemeContext_1.ThemeProvider, { isDark: darkMode },
+        react_1.default.createElement(antd_1.ConfigProvider, { theme: {
+                algorithm: darkMode ? antd_1.theme.darkAlgorithm : antd_1.theme.defaultAlgorithm,
+            } },
+            react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, null,
+                react_1.default.createElement("div", { className: workareaStyles.copilotWrapper },
+                    react_1.default.createElement(Copilot, null))))));
+};
+exports.default = CopilotSimulator;

package/lib/webview-ui/ErrorBoundary.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundary = void 0;
+const icons_1 = require("@ant-design/icons");
+const antd_1 = require("antd");
+const react_1 = __importDefault(require("react"));
+const { useToken } = antd_1.theme;
+const { Paragraph, Text } = antd_1.Typography;
+function ErrorDisplay({ error }) {
+    const { token } = useToken();
+    return (react_1.default.createElement("div", { style: {
+            padding: "20px",
+            minHeight: "100vh",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            background: token.colorBgContainer,
+        } },
+        react_1.default.createElement(antd_1.Result, { status: "error", title: "\u667A\u80FD\u4F53\u6A21\u62DF\u5668\u52A0\u8F7D\u5931\u8D25", subTitle: "\u8BF7\u68C0\u67E5\u4EE5\u4E0B\u9519\u8BEF\u4FE1\u606F\uFF0C\u7136\u540E\u91CD\u8BD5", extra: [
+                react_1.default.createElement(antd_1.Button, { type: "primary", key: "reload", icon: react_1.default.createElement(icons_1.ReloadOutlined, null), onClick: () => window.location.reload() }, "\u91CD\u8BD5"),
+            ] },
+            react_1.default.createElement("div", { className: "desc" },
+                react_1.default.createElement(Paragraph, null,
+                    react_1.default.createElement(Text, { strong: true, style: {
+                            fontSize: 16,
+                            color: token.colorText,
+                        } }, "\u53D1\u751F\u4E86\u4EE5\u4E0B\u9519\u8BEF\uFF1A")),
+                error && (react_1.default.createElement(Paragraph, null,
+                    react_1.default.createElement(icons_1.CloseCircleOutlined, { style: {
+                            color: token.colorError,
+                            marginRight: 8,
+                        } }),
+                    react_1.default.createElement(Text, { code: true, style: { color: token.colorTextSecondary } }, (error === null || error === void 0 ? void 0 : error.message) || `${error}` || "错误信息为空")))))));
+}
+class ErrorBoundary extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error("ErrorBoundary caught an error:", error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return react_1.default.createElement(ErrorDisplay, { error: this.state.error });
+        }
+        return this.props.children;
+    }
+}
+exports.ErrorBoundary = ErrorBoundary;

package/lib/webview-ui/components/KnowledgeBaseSearchBlock.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KnowledgeBaseSearchBlock = void 0;
+const icons_1 = require("@ant-design/icons");
+const antd_style_1 = require("antd-style");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const _1 = require(".");
+const useStyles = (0, antd_style_1.createStyles)(({ token, css }) => ({
+    block: css `
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 8px;
+    background: ${token.colorBgLayout};
+    overflow: hidden;
+  `,
+    body: css `
+    padding: 12px;
+    font-size: 13px;
+  `,
+    query: css `
+    color: ${token.colorText};
+    margin-bottom: 4px;
+  `,
+    kbId: css `
+    color: ${token.colorTextTertiary};
+    font-family: ${token.fontFamilyCode};
+  `,
+    param: css `
+    margin-top: 4px;
+    color: ${token.colorTextTertiary};
+    font-family: ${token.fontFamilyCode};
+  `,
+    noResult: css `
+    color: ${token.colorTextSecondary};
+  `,
+}));
+const KnowledgeBaseSearchBlock = ({ query, knowledge_base_id, score_threshold, knowledge_search_mode, chunks, isResponse, reason_msg, has_result, }) => {
+    const [isExpanded, setIsExpanded] = (0, react_2.useState)(true);
+    const { styles } = useStyles();
+    const headerText = isResponse ? "知识库检索结果(检索到 " + ((chunks === null || chunks === void 0 ? void 0 : chunks.length) || 0) + " 条)" : "知识库检索";
+    const icon = react_1.default.createElement(icons_1.SearchOutlined, null);
+    return (react_1.default.createElement("div", { className: styles.block, style: { width: "100%" } },
+        react_1.default.createElement(_1.ToolUseBlockHeader, { toolName: headerText, isExpanded: isExpanded, onToggleExpand: () => setIsExpanded(!isExpanded), icon: icon }),
+        isExpanded && (react_1.default.createElement("div", { className: styles.body }, !isResponse ? (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: styles.query },
+                "\u67E5\u8BE2: \"",
+                query,
+                "\""),
+            react_1.default.createElement("div", { className: styles.kbId },
+                "\u77E5\u8BC6\u5E93ID: ",
+                knowledge_base_id || "N/A"),
+            knowledge_search_mode && react_1.default.createElement("div", { className: styles.param },
+                "\u68C0\u7D22\u6A21\u5F0F: ",
+                knowledge_search_mode),
+            score_threshold !== undefined && react_1.default.createElement("div", { className: styles.param },
+                "\u9608\u503C: ",
+                score_threshold))) : (react_1.default.createElement("div", null, has_result && (chunks === null || chunks === void 0 ? void 0 : chunks.length) ? (chunks.map((chunk, index) => react_1.default.createElement(_1.KnowledgeBaseSearchResult, Object.assign({ key: chunk.id || index }, chunk)))) : (react_1.default.createElement("div", { className: styles.noResult }, reason_msg || "未找到相关内容"))))))));
+};
+exports.KnowledgeBaseSearchBlock = KnowledgeBaseSearchBlock;

package/lib/webview-ui/components/KnowledgeBaseSearchResult.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KnowledgeBaseSearchResult = void 0;
+const antd_style_1 = require("antd-style");
+const react_1 = __importDefault(require("react"));
+const useStyles = (0, antd_style_1.createStyles)(({ token, css }) => ({
+    result: css `
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 6px;
+    padding: 12px;
+    background: ${token.colorBgContainer};
+    margin-bottom: 8px;
+    font-size: 13px;
+  `,
+    detail: css `
+    color: ${token.colorTextSecondary};
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin-bottom: 8px;
+  `,
+    score: css `
+    color: ${token.colorTextTertiary};
+    font-size: 12px;
+  `,
+}));
+const KnowledgeBaseSearchResult = ({ score, detail }) => {
+    const { styles } = useStyles();
+    return (react_1.default.createElement("div", { className: styles.result },
+        react_1.default.createElement("div", { className: styles.detail }, detail),
+        react_1.default.createElement("div", { className: styles.score },
+            "\u76F8\u5173\u6027\u5206\u6570: ",
+            score.toFixed(4))));
+};
+exports.KnowledgeBaseSearchResult = KnowledgeBaseSearchResult;

package/lib/webview-ui/components/MarkdownRenderer.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 });
+exports.MarkdownRenderer = void 0;
+const antd_1 = require("antd");
+const antd_style_1 = require("antd-style");
+const markdown_it_1 = __importDefault(require("markdown-it"));
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const copilot_1 = require("../styles/copilot");
+const md = (0, markdown_it_1.default)({ html: true, breaks: true });
+const useStyles = (0, antd_style_1.createStyles)(({ token, css }) => ({
+    markdownContent: css `
+    transition: opacity 0.2s ease-in-out;
+    opacity: 1;
+  `,
+}));
+const MarkdownRenderer = ({ content }) => {
+    const { styles } = useStyles();
+    const { styles: copilotStyles } = (0, copilot_1.useCopilotStyle)();
+    const html = (0, react_2.useMemo)(() => md.render(content), [content]);
+    return (react_1.default.createElement(antd_1.Typography, null,
+        react_1.default.createElement("div", { className: `markdown-content ${copilotStyles.markdownContent} ${styles.markdownContent}`, dangerouslySetInnerHTML: { __html: html } })));
+};
+exports.MarkdownRenderer = MarkdownRenderer;

package/lib/webview-ui/components/MessageRenderer.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageRenderer = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const cardComponentMap = {
+    knowledge_base_search: _1.KnowledgeBaseSearchBlock,
+    knowledge_base_search_response: (props) => react_1.default.createElement(_1.KnowledgeBaseSearchBlock, Object.assign({}, props, { isResponse: true })),
+    function_call: _1.ToolUseBlock,
+    function_call_response: (props) => react_1.default.createElement(_1.ToolUseBlock, Object.assign({}, props, { isResponse: true })),
+};
+const MessageRenderer = ({ message }) => {
+    const { cards, reasoningContent, content } = message;
+    return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "10px" } }, cards === null || cards === void 0 ? void 0 :
+        cards.map((card, index) => {
+            const CardComponent = cardComponentMap[card.type];
+            if (!CardComponent) {
+                console.warn(`No component found for card type: ${card.type}`);
+                return null;
+            }
+            let cardContent;
+            try {
+                cardContent = JSON.parse(card.content);
+            }
+            catch (e) {
+                cardContent = { content: card.content };
+            }
+            return react_1.default.createElement(CardComponent, Object.assign({ key: index }, cardContent));
+        }),
+        reasoningContent && react_1.default.createElement(_1.ThinkingBlock, { message: message }),
+        content && react_1.default.createElement(_1.MarkdownRenderer, { content: content })));
+};
+exports.MessageRenderer = MessageRenderer;