instantsearch-ui-components
Version:
Common UI components for InstantSearch.
179 lines (178 loc) • 8.46 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.createChatPromptComponent = createChatPromptComponent;
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 _lib = require("../../lib");
var _Button = require("../Button");
var _icons = require("./icons");
var _excluded = ["classNames", "headerComponent", "footerComponent", "value", "placeholder", "status", "disabled", "maxRows", "autoFocus", "translations", "onInput", "onSubmit", "onKeyDown", "onStop", "promptRef"];
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 createChatPromptComponent(_ref) {
var createElement = _ref.createElement;
var Button = (0, _Button.createButtonComponent)({
createElement: createElement
});
var textAreaElement = null;
var lineHeight = 0;
var padding = 0;
var adjustHeight = function adjustHeight() {
if (!textAreaElement) return;
textAreaElement.style.height = 'auto';
var fullHeight = textAreaElement.scrollHeight;
if (textAreaElement.getAttribute('data-max-rows')) {
var maxRows = parseInt(textAreaElement.getAttribute('data-max-rows') || '0', 10);
if (maxRows > 0) {
var maxHeight = maxRows * lineHeight + padding;
textAreaElement.style.overflowY = fullHeight > maxHeight ? 'auto' : 'hidden';
textAreaElement.style.height = "".concat(Math.min(fullHeight, maxHeight), "px");
return;
}
}
textAreaElement.style.overflowY = 'hidden';
textAreaElement.style.height = "".concat(fullHeight, "px");
};
var setTextAreaRef = function setTextAreaRef(element, promptRef) {
textAreaElement = element;
if (promptRef) {
promptRef.current = element;
}
if (element) {
var styles = getComputedStyle(element);
lineHeight = parseFloat(styles.lineHeight);
var pt = parseFloat(styles.paddingTop);
var pb = parseFloat(styles.paddingBottom);
padding = pt + pb;
adjustHeight();
}
};
return function ChatPrompt(userProps) {
var _userProps$classNames = userProps.classNames,
classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
HeaderComponent = userProps.headerComponent,
FooterComponent = userProps.footerComponent,
value = userProps.value,
placeholder = userProps.placeholder,
_userProps$status = userProps.status,
status = _userProps$status === void 0 ? 'ready' : _userProps$status,
_userProps$disabled = userProps.disabled,
disabled = _userProps$disabled === void 0 ? false : _userProps$disabled,
_userProps$maxRows = userProps.maxRows,
maxRows = _userProps$maxRows === void 0 ? 5 : _userProps$maxRows,
_userProps$autoFocus = userProps.autoFocus,
autoFocus = _userProps$autoFocus === void 0 ? true : _userProps$autoFocus,
userTranslations = userProps.translations,
_onInput = userProps.onInput,
_onSubmit = userProps.onSubmit,
_onKeyDown = userProps.onKeyDown,
onStop = userProps.onStop,
promptRef = userProps.promptRef,
props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
var translations = _objectSpread({
textareaLabel: 'Type your message...',
textareaPlaceholder: 'Type your message...',
emptyMessageTooltip: 'Message is empty',
stopResponseTooltip: 'Stop response',
sendMessageTooltip: 'Send message',
disclaimer: 'AI can make mistakes. Verify responses.'
}, userTranslations);
var cssClasses = {
root: (0, _lib.cx)('ais-ChatPrompt', classNames.root),
header: (0, _lib.cx)('ais-ChatPrompt-header', classNames.header),
body: (0, _lib.cx)('ais-ChatPrompt-body', classNames.body),
textarea: (0, _lib.cx)('ais-ChatPrompt-textarea ais-Scrollbar', disabled && 'ais-ChatPrompt-textarea--disabled', classNames.textarea),
actions: (0, _lib.cx)('ais-ChatPrompt-actions', classNames.actions, disabled && 'ais-ChatPrompt-actions--disabled'),
submit: (0, _lib.cx)('ais-ChatPrompt-submit', classNames.submit),
footer: (0, _lib.cx)('ais-ChatPrompt-footer', classNames.footer)
};
var hasValue = typeof value === 'string' ? value.trim() !== '' : Boolean(value);
var canStop = status === 'submitted' || status === 'streaming';
var buttonDisabled = !hasValue && !canStop || disabled;
var submitIcon = canStop ? createElement(_icons.StopIcon, {
createElement: createElement
}) : createElement(_icons.ArrowUpIcon, {
createElement: createElement
});
return createElement("form", {
className: (0, _lib.cx)(cssClasses.root, props.className),
onSubmit: function onSubmit(event) {
event.preventDefault();
if (canStop) {
onStop === null || onStop === void 0 ? void 0 : onStop();
return;
}
if (!hasValue) {
return;
}
_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(event);
}
}, HeaderComponent && createElement("div", {
className: (0, _lib.cx)(cssClasses.header)
}, createElement(HeaderComponent, null)), createElement("div", {
className: (0, _lib.cx)(cssClasses.body),
onClick: function onClick(e) {
var _textAreaElement;
if (e.target === textAreaElement) return;
(_textAreaElement = textAreaElement) === null || _textAreaElement === void 0 ? void 0 : _textAreaElement.focus();
}
}, createElement("textarea", (0, _extends2.default)({}, props, {
ref: function ref(element) {
return setTextAreaRef(element, promptRef);
},
"data-max-rows": maxRows,
className: (0, _lib.cx)(cssClasses.textarea),
value: value,
placeholder: placeholder || translations.textareaPlaceholder,
"aria-label": translations.textareaLabel,
disabled: disabled,
autoFocus: autoFocus,
onInput: function onInput(event) {
adjustHeight();
_onInput === null || _onInput === void 0 ? void 0 : _onInput(event);
},
onKeyDown: function onKeyDown(event) {
_onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
if (canStop) {
onStop === null || onStop === void 0 ? void 0 : onStop();
return;
}
if (!hasValue) {
return;
}
_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(event);
}
if (event.key === 'Escape') {
if (event.currentTarget && event.currentTarget.blur) {
event.currentTarget.blur();
}
}
}
})), createElement("div", {
className: (0, _lib.cx)(cssClasses.actions)
}, createElement(Button, {
type: "submit",
variant: "primary",
size: "sm",
iconOnly: true,
className: (0, _lib.cx)(cssClasses.submit),
disabled: buttonDisabled,
"aria-label": function () {
if (buttonDisabled) return translations.emptyMessageTooltip;
if (canStop) return translations.stopResponseTooltip;
return translations.sendMessageTooltip;
}(),
"data-status": status
}, submitIcon))), createElement("div", {
className: (0, _lib.cx)(cssClasses.footer)
}, FooterComponent ? createElement(FooterComponent, null) : createElement("div", {
className: "ais-ChatPrompt-disclaimer"
}, translations.disclaimer)));
};
}