ze-react-component-library
Version:
ZeroETP React Component Library
465 lines (381 loc) • 13.4 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("antd/lib/tooltip/style");
var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
require("antd/lib/input/style");
var _input = _interopRequireDefault(require("antd/lib/input"));
require("antd/lib/avatar/style");
var _avatar = _interopRequireDefault(require("antd/lib/avatar"));
var _react = _interopRequireWildcard(require("react"));
var _icons = require("@ant-design/icons");
var _hooks = require("@umijs/hooks");
var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
var _jsonToPlainText = require("json-to-plain-text");
var _request = require("../../request");
var _util = require("../../util");
require("./index.less");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__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);
};
var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
var _ = {
label: 0,
sent: function sent() {
if (t[0] & 1) throw t[1];
return t[1];
},
trys: [],
ops: []
},
f,
y,
t,
g;
return g = {
next: verb(0),
"throw": verb(1),
"return": verb(2)
}, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
return this;
}), g;
function verb(n) {
return function (v) {
return step([n, v]);
};
}
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) {
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return {
value: op[1],
done: false
};
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2]) _.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
} catch (e) {
op = [6, e];
y = 0;
} finally {
f = t = 0;
}
}
if (op[0] & 5) throw op[1];
return {
value: op[0] ? op[1] : void 0,
done: true
};
}
};
var __rest = void 0 && (void 0).__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 __spreadArray = void 0 && (void 0).__spreadArray || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
to[j] = from[i];
}
return to;
};
var LLMChatter = function LLMChatter(_a) {
var messages = _a.messages,
data = _a.data,
avatarSrc = _a.avatarSrc,
promptTemplate = _a.promptTemplate,
setMessages = _a.setMessages,
hideQuestion = _a.hideQuestion,
getAllMessages = _a.getAllMessages,
style = _a.style,
bodyStyle = _a.bodyStyle,
hide = _a.hide; // LLM
var _b = (0, _react.useState)(""),
llmChatAnswer = _b[0],
setLLMChatAnswer = _b[1];
var _c = (0, _react.useState)(false),
done = _c[0],
setDone = _c[1];
var actionRef = (0, _react.useRef)({
getAllMessages: getAllMessages
});
actionRef.current.getAllMessages = getAllMessages;
(0, _hooks.useRequest)(function () {
return __awaiter(void 0, void 0, void 0, function () {
var llmConfig, allMsgs;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
setDone(false);
return [4
/*yield*/
, (0, _request.requestSetting)("llm")];
case 1:
llmConfig = _a.sent();
allMsgs = actionRef.current.getAllMessages().filter(function (d) {
return d.done && d.content.length > 0;
}).map(function (d, index) {
if (d.role === "user" && index === 0) {
return {
role: d.role,
content: (promptTemplate || llmConfig.promptTemplate || '').replace("${question}", d.content).replace("${data}", (0, _jsonToPlainText.jsonToPlainText)((0, _util.formatDataResult)(data).map(function (row) {
var ret = __assign({}, row);
delete ret._id;
return ret;
}), {
spacing: true,
seperator: ":",
color: false
}).replace(/\n/g, ' '))
};
}
return {
role: d.role,
content: d.content
};
}); // iframe: post message
if (window.top && window.top !== window) {
window.top.postMessage({
app: "chatbi",
action: "card/llm/prompt",
messages: allMsgs
}, "*");
} // console.log('allMsgs',allMsgs);
if (hide) {
return [2
/*return*/
, Promise.resolve()];
}
return [2
/*return*/
, (0, _request.requestLLMChat)({
messages: allMsgs
}, function (delta) {
// console.log("delta", delta);
setLLMChatAnswer(function (current) {
return current + delta;
});
}, function () {
setDone(true);
})];
}
});
});
});
(0, _react.useEffect)(function () {
setMessages([messages[0], {
role: "assistant",
content: llmChatAnswer,
done: done
}]);
}, [done, llmChatAnswer]);
if (hide) {
return /*#__PURE__*/_react.default.createElement("div", null);
}
return /*#__PURE__*/_react.default.createElement("div", {
style: __assign({
display: "flex",
flexDirection: "column",
gap: 16
}, style)
}, messages.map(function (d, i) {
if (d.role === "user" && hideQuestion) {
return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
key: i.toString()
});
} // clean content
var finalContent = d.content;
if (finalContent === null || finalContent === void 0 ? void 0 : finalContent.startsWith('{"error":"')) {
try {
var json = JSON.parse(finalContent);
finalContent = json.error;
} catch (error) {}
}
return /*#__PURE__*/_react.default.createElement("div", {
key: i.toString(),
style: {
display: "flex",
gap: 12,
width: "100%",
marginTop: 12
}
}, /*#__PURE__*/_react.default.createElement(_avatar.default, {
style: {
flexShrink: 0,
backgroundColor: "var(--ant-primary-color)"
},
src: d.role === "assistant" ? avatarSrc || "/images/alisa.png" : undefined,
icon: d.role === "user" ? /*#__PURE__*/_react.default.createElement(_icons.UserOutlined, null) : undefined
}), /*#__PURE__*/_react.default.createElement("div", {
style: __assign({
paddingTop: 7,
flexGrow: 1
}, bodyStyle),
className: "llm-chatter-content"
}, /*#__PURE__*/_react.default.createElement(_markdownToJsx.default, null, finalContent)));
}));
};
var LLMChatterWrapper = function LLMChatterWrapper(_a) {
var question = _a.question,
showSearch = _a.showSearch,
hide = _a.hide,
publicProps = __rest(_a, ["question", "showSearch", "hide"]);
var _b = (0, _react.useState)([]),
messages = _b[0],
_setMessages = _b[1];
var _c = (0, _react.useState)(""),
search = _c[0],
setSearch = _c[1];
var done = messages.flat().every(function (m) {
return m.done;
});
var onSearch = function onSearch(v) {
setSearch(v);
var finalV = v.trim();
if (finalV.length > 0) {
_setMessages(__spreadArray(__spreadArray([], messages), [[{
role: "user",
content: finalV,
done: true
}]]));
}
setSearch("");
};
(0, _react.useEffect)(function () {
_setMessages(question ? [[{
role: "user",
content: question,
done: true
}]] : []);
}, [question, publicProps.promptTemplate]);
if (messages.length === 0) {
return null;
}
return /*#__PURE__*/_react.default.createElement("div", {
className: "llm-wrapper"
}, messages.map(function (q, i) {
var _a;
return /*#__PURE__*/_react.default.createElement(LLMChatter, __assign({}, publicProps, {
hide: hide,
question: (_a = q[0]) === null || _a === void 0 ? void 0 : _a.content,
key: i.toString() + publicProps.promptTemplate,
hideQuestion: i === 0,
messages: q,
getAllMessages: function getAllMessages() {
return messages.flat();
},
setMessages: function setMessages(m) {
_setMessages(function (msg) {
var newMsg = __spreadArray([], msg);
newMsg[i] = m;
return newMsg;
});
}
}));
}), showSearch && !hide && /*#__PURE__*/_react.default.createElement(_input.default.Search, {
style: {
marginTop: 16
},
size: "large",
disabled: !done,
placeholder: "\u65B0\u95EE\u9898...",
value: search,
onChange: function onChange(e) {
setSearch(e.target.value);
},
allowClear: true,
onSearch: onSearch,
enterButton: /*#__PURE__*/_react.default.createElement(_tooltip.default, {
title: "\u53D1\u9001\u6D88\u606F"
}, /*#__PURE__*/_react.default.createElement(_icons.ArrowUpOutlined, null))
}));
};
var _default = LLMChatterWrapper;
exports.default = _default;