instantsearch-ui-components
Version:
Common UI components for InstantSearch.
138 lines (137 loc) • 7.17 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.createChatMessageComponent = createChatMessageComponent;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _markdownToJsx = require("markdown-to-jsx");
var _lib = require("../../lib");
var _Button = require("../Button");
var _icons = require("./icons");
var _excluded = ["classNames", "message", "side", "variant", "actions", "autoHideActions", "leadingComponent", "actionsComponent", "footerComponent", "tools", "indexUiState", "setIndexUiState", "onClose", "translations"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function createChatMessageComponent(_ref) {
var createElement = _ref.createElement;
var Button = (0, _Button.createButtonComponent)({
createElement: createElement
});
return function ChatMessage(userProps) {
var _userProps$classNames = userProps.classNames,
classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
message = userProps.message,
_userProps$side = userProps.side,
side = _userProps$side === void 0 ? 'left' : _userProps$side,
_userProps$variant = userProps.variant,
variant = _userProps$variant === void 0 ? 'subtle' : _userProps$variant,
_userProps$actions = userProps.actions,
actions = _userProps$actions === void 0 ? [] : _userProps$actions,
_userProps$autoHideAc = userProps.autoHideActions,
autoHideActions = _userProps$autoHideAc === void 0 ? false : _userProps$autoHideAc,
LeadingComponent = userProps.leadingComponent,
ActionsComponent = userProps.actionsComponent,
FooterComponent = userProps.footerComponent,
_userProps$tools = userProps.tools,
tools = _userProps$tools === void 0 ? {} : _userProps$tools,
indexUiState = userProps.indexUiState,
setIndexUiState = userProps.setIndexUiState,
onClose = userProps.onClose,
userTranslations = userProps.translations,
props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
var translations = _objectSpread({
messageLabel: 'Message',
actionsLabel: 'Message actions'
}, userTranslations);
var hasLeading = Boolean(LeadingComponent);
var hasActions = Boolean(actions.length > 0 || ActionsComponent);
var cssClasses = {
root: (0, _lib.cx)('ais-ChatMessage', "ais-ChatMessage--".concat(side), "ais-ChatMessage--".concat(variant), autoHideActions && 'ais-ChatMessage--auto-hide-actions', classNames.root),
container: (0, _lib.cx)('ais-ChatMessage-container', classNames.container),
leading: (0, _lib.cx)('ais-ChatMessage-leading', classNames.leading),
content: (0, _lib.cx)('ais-ChatMessage-content', classNames.content),
message: (0, _lib.cx)('ais-ChatMessage-message', classNames.message),
actions: (0, _lib.cx)('ais-ChatMessage-actions', classNames.actions),
footer: (0, _lib.cx)('ais-ChatMessage-footer', classNames.footer)
};
function renderMessagePart(part, index) {
if (part.type === 'step-start') {
return null;
}
if (part.type === 'text') {
var markdown = (0, _markdownToJsx.compiler)(part.text, {
createElement: createElement,
disableParsingRawHTML: true
});
return createElement("span", {
key: "".concat(message.id, "-").concat(index)
}, markdown);
}
if ((0, _lib.startsWith)(part.type, 'tool-')) {
var toolName = part.type.replace('tool-', '');
var tool = tools[toolName];
if (tool) {
var ToolLayoutComponent = tool.layoutComponent;
var toolMessage = part;
var boundAddToolResult = function boundAddToolResult(params) {
var _tool$addToolResult;
return (_tool$addToolResult = tool.addToolResult) === null || _tool$addToolResult === void 0 ? void 0 : _tool$addToolResult.call(tool, {
output: params.output,
tool: part.type,
toolCallId: toolMessage.toolCallId
});
};
return createElement("div", {
key: "".concat(message.id, "-").concat(index),
className: "ais-ChatMessage-tool"
}, createElement(ToolLayoutComponent, {
message: toolMessage,
indexUiState: indexUiState,
setIndexUiState: setIndexUiState,
addToolResult: boundAddToolResult,
onClose: onClose
}));
}
}
return null;
}
return createElement("article", (0, _extends2.default)({}, props, {
className: (0, _lib.cx)(cssClasses.root, props.className),
"aria-label": translations.messageLabel
}), createElement("div", {
className: (0, _lib.cx)(cssClasses.container)
}, hasLeading && createElement("div", {
className: (0, _lib.cx)(cssClasses.leading)
}, LeadingComponent && createElement(LeadingComponent, null)), createElement("div", {
className: (0, _lib.cx)(cssClasses.content)
}, createElement("div", {
className: (0, _lib.cx)(cssClasses.message)
}, message.parts.map(renderMessagePart)), hasActions && createElement("div", {
className: (0, _lib.cx)(cssClasses.actions),
"aria-label": translations.actionsLabel
}, ActionsComponent ? createElement(ActionsComponent, {
actions: actions,
message: message
}) : actions.map(function (action, index) {
return createElement(Button, {
key: index,
variant: "ghost",
size: "sm",
iconOnly: true,
className: "ais-ChatMessage-action",
disabled: action.disabled,
"aria-label": action.title,
onClick: function onClick() {
var _action$onClick;
return (_action$onClick = action.onClick) === null || _action$onClick === void 0 ? void 0 : _action$onClick.call(action, message);
}
}, action.icon ? createElement(action.icon, null) : createElement(_icons.MenuIconComponent, {
createElement: createElement
}));
})), FooterComponent && createElement("div", {
className: (0, _lib.cx)(cssClasses.footer)
}, createElement(FooterComponent, null)))));
};
}