instantsearch-ui-components 0.11.1 → 0.12.0

package/dist/cjs/components/chat/ChatMessageLoader.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createChatMessageLoaderComponent = createChatMessageLoaderComponent;
+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 _icons = require("./icons");
+var _excluded = ["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 createChatMessageLoaderComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function ChatMessageLoader(_ref2) {
+    var userTranslations = _ref2.translations,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    var translations = _objectSpread({
+      loaderText: 'Thinking...'
+    }, userTranslations);
+    return createElement("article", (0, _extends2.default)({
+      className: "ais-ChatMessageLoader ais-ChatMessage ais-ChatMessage--left ais-ChatMessage--subtle"
+    }, props), createElement("div", {
+      className: "ais-ChatMessage-container"
+    }, createElement("div", {
+      className: "ais-ChatMessage-leading"
+    }, createElement("div", {
+      className: "ais-ChatMessageLoader-spinner"
+    }, createElement(_icons.LoadingSpinnerIconComponent, {
+      createElement: createElement
+    }))), createElement("div", {
+      className: "ais-ChatMessage-content"
+    }, createElement("div", {
+      className: "ais-ChatMessage-message"
+    }, translations.loaderText && createElement("div", {
+      className: "ais-ChatMessageLoader-text"
+    }, translations.loaderText), createElement("div", {
+      className: "ais-ChatMessageLoader-skeletonWrapper"
+    }, createElement("div", {
+      className: "ais-ChatMessageLoader-skeletonItem"
+    }), createElement("div", {
+      className: "ais-ChatMessageLoader-skeletonItem"
+    }))))));
+  };
+}

package/dist/cjs/components/chat/ChatMessages.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createChatMessagesComponent = createChatMessagesComponent;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _lib = require("../../lib");
+var _Button = require("../Button");
+var _ChatMessage = require("./ChatMessage");
+var _ChatMessageError = require("./ChatMessageError");
+var _ChatMessageLoader = require("./ChatMessageLoader");
+var _icons = require("./icons");
+var _excluded = ["classNames", "messages", "messageComponent", "loaderComponent", "errorComponent", "actionsComponent", "tools", "indexUiState", "setIndexUiState", "status", "hideScrollToBottom", "onReload", "onClose", "translations", "userMessageProps", "assistantMessageProps", "isClearing", "onClearTransitionEnd", "isScrollAtBottom", "scrollRef", "contentRef", "onScrollToBottom"];
+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; }
+var getTextContent = function getTextContent(message) {
+  return message.parts.map(function (part) {
+    return 'text' in part ? part.text : '';
+  }).join('');
+};
+var hasTextContent = function hasTextContent(message) {
+  return getTextContent(message).trim() !== '';
+};
+var copyToClipboard = function copyToClipboard(message) {
+  navigator.clipboard.writeText(getTextContent(message));
+};
+function createDefaultMessageComponent(_ref) {
+  var createElement = _ref.createElement,
+    Fragment = _ref.Fragment;
+  var ChatMessage = (0, _ChatMessage.createChatMessageComponent)({
+    createElement: createElement,
+    Fragment: Fragment
+  });
+  return function DefaultMessage(_ref2) {
+    var message = _ref2.message,
+      userMessageProps = _ref2.userMessageProps,
+      assistantMessageProps = _ref2.assistantMessageProps,
+      tools = _ref2.tools,
+      indexUiState = _ref2.indexUiState,
+      setIndexUiState = _ref2.setIndexUiState,
+      onReload = _ref2.onReload,
+      onClose = _ref2.onClose,
+      translations = _ref2.translations,
+      actionsComponent = _ref2.actionsComponent;
+    var defaultAssistantActions = [].concat((0, _toConsumableArray2.default)(hasTextContent(message) ? [{
+      title: translations.copyToClipboardLabel,
+      icon: function icon() {
+        return createElement(_icons.CopyIconComponent, {
+          createElement: createElement
+        });
+      },
+      onClick: copyToClipboard
+    }] : []), [{
+      title: translations.regenerateLabel,
+      icon: function icon() {
+        return createElement(_icons.ReloadIconComponent, {
+          createElement: createElement
+        });
+      },
+      onClick: function onClick(m) {
+        return onReload(m.id);
+      }
+    }]);
+    var messageProps = message.role === 'user' ? userMessageProps : assistantMessageProps;
+    var defaultActions = message.role === 'user' ? undefined : defaultAssistantActions;
+    return createElement(ChatMessage, (0, _extends2.default)({
+      side: message.role === 'user' ? 'right' : 'left',
+      variant: message.role === 'user' ? 'neutral' : 'subtle',
+      message: message,
+      tools: tools,
+      indexUiState: indexUiState,
+      setIndexUiState: setIndexUiState,
+      onClose: onClose,
+      actions: defaultActions,
+      actionsComponent: actionsComponent,
+      "data-role": message.role
+    }, messageProps));
+  };
+}
+function createChatMessagesComponent(_ref3) {
+  var createElement = _ref3.createElement,
+    Fragment = _ref3.Fragment;
+  var Button = (0, _Button.createButtonComponent)({
+    createElement: createElement
+  });
+  var DefaultMessageComponent = createDefaultMessageComponent({
+    createElement: createElement,
+    Fragment: Fragment
+  });
+  var DefaultLoaderComponent = (0, _ChatMessageLoader.createChatMessageLoaderComponent)({
+    createElement: createElement
+  });
+  var DefaultErrorComponent = (0, _ChatMessageError.createChatMessageErrorComponent)({
+    createElement: createElement
+  });
+  return function ChatMessages(userProps) {
+    var _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      _userProps$messages = userProps.messages,
+      messages = _userProps$messages === void 0 ? [] : _userProps$messages,
+      MessageComponent = userProps.messageComponent,
+      LoaderComponent = userProps.loaderComponent,
+      ErrorComponent = userProps.errorComponent,
+      ActionsComponent = userProps.actionsComponent,
+      tools = userProps.tools,
+      indexUiState = userProps.indexUiState,
+      setIndexUiState = userProps.setIndexUiState,
+      _userProps$status = userProps.status,
+      status = _userProps$status === void 0 ? 'ready' : _userProps$status,
+      _userProps$hideScroll = userProps.hideScrollToBottom,
+      hideScrollToBottom = _userProps$hideScroll === void 0 ? false : _userProps$hideScroll,
+      onReload = userProps.onReload,
+      onClose = userProps.onClose,
+      userTranslations = userProps.translations,
+      userMessageProps = userProps.userMessageProps,
+      assistantMessageProps = userProps.assistantMessageProps,
+      _userProps$isClearing = userProps.isClearing,
+      isClearing = _userProps$isClearing === void 0 ? false : _userProps$isClearing,
+      onClearTransitionEnd = userProps.onClearTransitionEnd,
+      isScrollAtBottom = userProps.isScrollAtBottom,
+      scrollRef = userProps.scrollRef,
+      contentRef = userProps.contentRef,
+      onScrollToBottom = userProps.onScrollToBottom,
+      props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
+    var translations = _objectSpread({
+      scrollToBottomLabel: 'Scroll to bottom',
+      copyToClipboardLabel: 'Copy to clipboard',
+      regenerateLabel: 'Regenerate'
+    }, userTranslations);
+    var cssClasses = {
+      root: (0, _lib.cx)('ais-ChatMessages', classNames.root),
+      scroll: (0, _lib.cx)('ais-ChatMessages-scroll ais-Scrollbar', classNames.scroll),
+      content: (0, _lib.cx)('ais-ChatMessages-content', classNames.content),
+      scrollToBottom: (0, _lib.cx)('ais-ChatMessages-scrollToBottom', classNames.scrollToBottom),
+      scrollToBottomHidden: (0, _lib.cx)('ais-ChatMessages-scrollToBottom--hidden', classNames.scrollToBottomHidden)
+    };
+    var DefaultMessage = MessageComponent || DefaultMessageComponent;
+    var DefaultLoader = LoaderComponent || DefaultLoaderComponent;
+    var DefaultError = ErrorComponent || DefaultErrorComponent;
+    return createElement("div", (0, _extends2.default)({}, props, {
+      className: (0, _lib.cx)(cssClasses.root, props.className),
+      role: "log",
+      "aria-live": "polite"
+    }), createElement("div", {
+      className: (0, _lib.cx)(cssClasses.scroll),
+      ref: scrollRef
+    }, createElement("div", {
+      className: (0, _lib.cx)(cssClasses.content, isClearing && 'ais-ChatMessages-content--clearing'),
+      ref: contentRef,
+      onTransitionEnd: function onTransitionEnd(e) {
+        if (e.target === e.currentTarget && e.propertyName === 'opacity' && isClearing) {
+          onClearTransitionEnd === null || onClearTransitionEnd === void 0 ? void 0 : onClearTransitionEnd();
+        }
+      }
+    }, messages.map(function (message) {
+      return createElement(DefaultMessage, {
+        key: message.id,
+        message: message,
+        userMessageProps: userMessageProps,
+        assistantMessageProps: assistantMessageProps,
+        tools: tools,
+        indexUiState: indexUiState,
+        setIndexUiState: setIndexUiState,
+        onReload: onReload,
+        actionsComponent: ActionsComponent,
+        onClose: onClose,
+        translations: translations
+      });
+    }), status === 'submitted' && createElement(DefaultLoader, {
+      translations: {
+        loaderText: translations.loaderText
+      }
+    }), status === 'error' && createElement(DefaultError, {
+      onReload: onReload
+    }))), createElement(Button, {
+      variant: "outline",
+      size: "sm",
+      iconOnly: true,
+      className: (0, _lib.cx)(cssClasses.scrollToBottom, (hideScrollToBottom || isScrollAtBottom) && cssClasses.scrollToBottomHidden),
+      onClick: onScrollToBottom,
+      "aria-label": translations.scrollToBottomLabel,
+      tabIndex: isScrollAtBottom ? -1 : 0
+    }, createElement(_icons.ChevronDownIconComponent, {
+      createElement: createElement
+    })));
+  };
+}

package/dist/cjs/components/chat/ChatPrompt.js

@@ -0,0 +1,179 @@
+"use strict";
+
+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.StopIconComponent, {
+      createElement: createElement
+    }) : createElement(_icons.ArrowUpIconComponent, {
+      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)));
+  };
+}

package/dist/cjs/components/chat/ChatToggleButton.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createChatToggleButtonComponent = createChatToggleButtonComponent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _cx = require("../../lib/cx");
+var _Button = require("../Button");
+var _icons = require("./icons");
+var _excluded = ["open", "onClick", "toggleIconComponent", "classNames", "className"];
+function createChatToggleButtonComponent(_ref) {
+  var createElement = _ref.createElement;
+  var Button = (0, _Button.createButtonComponent)({
+    createElement: createElement
+  });
+  return function ChatToggleButton(_ref2) {
+    var open = _ref2.open,
+      onClick = _ref2.onClick,
+      ToggleIconComponent = _ref2.toggleIconComponent,
+      _ref2$classNames = _ref2.classNames,
+      classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames,
+      className = _ref2.className,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    var defaultIcon = open ? createElement(_icons.ChevronUpIconComponent, {
+      createElement: createElement,
+      width: 28,
+      height: 28
+    }) : createElement(_icons.SparklesIconComponent, {
+      createElement: createElement,
+      width: 28,
+      height: 28
+    });
+    return createElement(Button, (0, _extends2.default)({
+      variant: "primary",
+      size: "md",
+      iconOnly: true,
+      className: (0, _cx.cx)('ais-ChatToggleButton', open && 'ais-ChatToggleButton--open', classNames.root, className),
+      onClick: onClick
+    }, props), ToggleIconComponent ? createElement(ToggleIconComponent, {
+      isOpen: open
+    }) : defaultIcon);
+  };
+}