aichat-core
Version:
AI 流式聊天业务核心TS模型封装及业务实现模块
145 lines (144 loc) • 8.22 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { CopyOutlined, FullscreenOutlined } from "@ant-design/icons";
import { Avatar, Collapse, message, Modal, Space, Tabs } from "antd";
import { memo, useEffect, useRef, useState } from "react";
import ChatMesageMarkDown from "../chat-markdown";
import copy from "copy-to-clipboard";
import ReactJosn from "react-json-view";
import loadingGif from "../../assets/loading.gif";
import sikaoPng from "../../assets/sikao.png";
import ChatContent from "../chat-content";
var ChatBubbleItem = memo(function (_a) {
var llmMessage = _a.llmMessage, className = _a.className;
var _b = useState(false), showToolResultDetail = _b[0], setShowToolResultDetail = _b[1];
var _c = useState(), defaultActivateKey = _c[0], setDefaultActivateKey = _c[1];
var _d = useState(), toolName = _d[0], setToolName = _d[1];
var _e = useState(), toolArguments = _e[0], setToolArguments = _e[1];
var _f = useState(), toolContent = _f[0], setToolContent = _f[1];
var collapseThinking = useRef({});
var choices = llmMessage.choices;
useEffect(function () {
if (choices && choices.length > 0) {
choices.forEach(function (item) {
var _index = item.index;
var _thinking = item.thinking;
var curCollapseState = collapseThinking.current && collapseThinking.current[_index];
if (!curCollapseState) {
collapseThinking.current[_index] = -1;
curCollapseState = -1;
}
if (_thinking === 1 && curCollapseState === -1) {
setDefaultActivateKey(function (prev) {
var _a;
return (__assign(__assign({}, prev), (_a = {}, _a[_index] = [_index.toString()], _a)));
});
collapseThinking.current[_index] = 1;
return;
}
if (_thinking === 2 && curCollapseState === 1) {
setDefaultActivateKey(function (prev) {
var _a;
return (__assign(__assign({}, prev), (_a = {}, _a[_index] = undefined, _a)));
});
collapseThinking.current[_index] = 2;
}
});
}
}, [choices]);
var getThinkingLabel = function (thinking) {
if (thinking && thinking > 0) {
return thinking === 2 ? (_jsxs(Space, { size: "small", children: [_jsx(Avatar, { src: sikaoPng, size: 20, style: { marginBottom: 1.1 } }), _jsx("p", { children: "\u5DF2\u6DF1\u5EA6\u601D\u8003" })] })) : (_jsxs(Space, { size: "small", children: [_jsx(Avatar, { src: loadingGif, size: 20, style: { marginBottom: 1.1 } }), _jsx("p", { children: "\u601D\u8003\u4E2D" })] }));
}
else {
return _jsx(_Fragment, {});
}
};
var isJson = function (data) {
try {
JSON.parse(data);
}
catch (e) {
return false;
}
return true;
};
var getToolLabel = function (tool) {
var toolName = tool && tool.name ? tool.name : "未知";
return (_jsxs(Space, { children: [" ", _jsx("p", { children: toolName }), " | ", _jsx("p", { style: { color: "green" }, children: "\u5DF2\u5B8C\u6210 \u221A" }), " "] }));
};
var genExtra = function (title, content, all, args) {
if (all === void 0) { all = false; }
var copyIcon = (_jsx(CopyOutlined, { onClick: function (event) {
event.stopPropagation();
copy(content);
message.success("复制成功！");
} }));
return all ? (_jsxs(Space, { size: "large", children: [_jsx(FullscreenOutlined, { onClick: function (event) {
event.stopPropagation();
setShowToolResultDetail(true);
setToolName(title);
args && setToolArguments(args);
setToolContent(content);
}, title: "\u5168\u5C4F\u5C55\u793A\u5185\u5BB9" }), copyIcon] })) : (copyIcon);
};
{
}
var toolItems = toolName
? [
{
key: "1-0001",
label: "输入参数",
children: _jsx("div", { children: toolArguments }),
},
{
key: "2-0001",
label: "输出结果",
children: isJson(toolContent) ? (_jsx(ReactJosn, { src: JSON.parse(toolContent !== null && toolContent !== void 0 ? toolContent : ""), theme: "ashes", collapsed: false, iconStyle: "square", indentWidth: 4, style: { height: 500, overflowY: "auto" }, displayDataTypes: false })) : (_jsx("span", { style: { color: "red" }, children: toolContent })),
},
]
: [];
return (_jsxs(_Fragment, { children: [_jsx(Space, { direction: "vertical", className: className, children: choices &&
choices.length > 0 &&
choices.map(function (message, idx) {
var index = message.index, reasoning_content = message.reasoning_content, content = message.content, toolsCallDes = message.toolsCallDes, tools = message.tools, thinking = message.thinking;
return (_jsxs(Space, { direction: "vertical", className: "bubble-item-box", children: [reasoning_content && (_jsx(Collapse, { style: { width: "100%" }, activeKey: defaultActivateKey && defaultActivateKey[index], items: [
{
key: index,
label: getThinkingLabel(thinking),
children: (_jsx(ChatMesageMarkDown, { content: reasoning_content })),
extra: genExtra("", reasoning_content),
},
], expandIconPosition: "end" }, index)), content && _jsx(ChatContent, { content: content }), toolsCallDes && (_jsx("span", { style: {
marginLeft: "1rem",
color: toolsCallDes.includes("完成") ? "green" : "red",
fontSize: "1rem",
}, children: toolsCallDes })), tools &&
tools.length > 0 &&
tools.map(function (tool, _) {
var _a;
return (_jsx(Collapse, { style: { width: "100%" }, items: [
{
key: tool.id,
label: getToolLabel(tool),
children: _jsx("p", { children: tool.content }),
extra: genExtra(tool.name, (_a = tool.content) !== null && _a !== void 0 ? _a : "", true, tool.arguments),
showArrow: false,
},
], expandIconPosition: "end" }, tool.id));
})] }, idx));
}) }), showToolResultDetail && (_jsx(Modal, { title: toolName, width: 800, centered: true, onCancel: function () {
setShowToolResultDetail(!showToolResultDetail);
}, footer: null, open: showToolResultDetail, children: _jsx(Tabs, { defaultActiveKey: "1", items: toolItems }) }))] }));
});
export default ChatBubbleItem;