instantsearch-ui-components 0.11.2 → 0.13.0

package/dist/es/components/chat/ChatMessage.d.ts

@@ -0,0 +1,124 @@
+import type { ComponentProps, Renderer } from '../../types';
+import type { ChatMessageBase, ClientSideTools } from './types';
+export type ChatMessageSide = 'left' | 'right';
+export type ChatMessageVariant = 'neutral' | 'subtle';
+export type ChatMessageTranslations = {
+    /**
+     * The label for the message
+     */
+    messageLabel: string;
+    /**
+     * The label for message actions
+     */
+    actionsLabel: string;
+};
+export type ChatMessageClassNames = {
+    /**
+     * Class names to apply to the root element
+     */
+    root: string | string[];
+    /**
+     * Class names to apply to the container element
+     */
+    container: string | string[];
+    /**
+     * Class names to apply to the leading element (avatar area)
+     */
+    leading: string | string[];
+    /**
+     * Class names to apply to the content wrapper
+     */
+    content: string | string[];
+    /**
+     * Class names to apply to the message element
+     */
+    message: string | string[];
+    /**
+     * Class names to apply to the actions container
+     */
+    actions: string | string[];
+    /**
+     * Class names to apply to the footer element
+     */
+    footer: string | string[];
+};
+export type ChatMessageActionProps = {
+    /**
+     * The icon to display in the action button
+     */
+    icon?: () => JSX.Element;
+    /**
+     * The title/tooltip for the action
+     */
+    title?: string;
+    /**
+     * Whether the action is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler for the action
+     */
+    onClick?: (message: ChatMessageBase) => void;
+};
+export type ChatMessageProps = ComponentProps<'article'> & {
+    /**
+     * The message object associated with this chat message
+     */
+    message: ChatMessageBase;
+    /**
+     * The side of the message
+     */
+    side?: ChatMessageSide;
+    /**
+     * The variant of the message
+     */
+    variant?: ChatMessageVariant;
+    /**
+     * Array of action buttons
+     */
+    actions?: ChatMessageActionProps[];
+    /**
+     * Whether to auto-hide actions until hover
+     */
+    autoHideActions?: boolean;
+    /**
+     * Leading content
+     */
+    leadingComponent?: () => JSX.Element;
+    /**
+     * Custom actions renderer
+     */
+    actionsComponent?: (props: {
+        actions: ChatMessageActionProps[];
+        message: ChatMessageBase;
+    }) => JSX.Element | null;
+    /**
+     * Footer content
+     */
+    footerComponent?: () => JSX.Element;
+    /**
+     * The index UI state
+     */
+    indexUiState: object;
+    /**
+     * Set the index UI state
+     */
+    setIndexUiState: (state: object) => void;
+    /**
+     * Close the chat
+     */
+    onClose: () => void;
+    /**
+     * Array of tools available for the assistant (for tool messages)
+     */
+    tools: ClientSideTools;
+    /**
+     * Optional class names
+     */
+    classNames?: Partial<ChatMessageClassNames>;
+    /**
+     * Optional translations
+     */
+    translations?: Partial<ChatMessageTranslations>;
+};
+export declare function createChatMessageComponent({ createElement }: Renderer): (userProps: ChatMessageProps) => JSX.Element;

package/dist/es/components/chat/ChatMessage.js

@@ -0,0 +1,131 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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) { _defineProperty(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; }
+import { compiler } from 'markdown-to-jsx';
+import { cx, startsWith } from "../../lib/index.js";
+import { createButtonComponent } from "../Button.js";
+import { MenuIconComponent } from "./icons.js";
+export function createChatMessageComponent(_ref) {
+  var createElement = _ref.createElement;
+  var 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 = _objectWithoutProperties(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: cx('ais-ChatMessage', "ais-ChatMessage--".concat(side), "ais-ChatMessage--".concat(variant), autoHideActions && 'ais-ChatMessage--auto-hide-actions', classNames.root),
+      container: cx('ais-ChatMessage-container', classNames.container),
+      leading: cx('ais-ChatMessage-leading', classNames.leading),
+      content: cx('ais-ChatMessage-content', classNames.content),
+      message: cx('ais-ChatMessage-message', classNames.message),
+      actions: cx('ais-ChatMessage-actions', classNames.actions),
+      footer: cx('ais-ChatMessage-footer', classNames.footer)
+    };
+    function renderMessagePart(part, index) {
+      if (part.type === 'step-start') {
+        return null;
+      }
+      if (part.type === 'text') {
+        var markdown = compiler(part.text, {
+          createElement: createElement,
+          disableParsingRawHTML: true
+        });
+        return createElement("span", {
+          key: "".concat(message.id, "-").concat(index)
+        }, markdown);
+      }
+      if (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", _extends({}, props, {
+      className: cx(cssClasses.root, props.className),
+      "aria-label": translations.messageLabel
+    }), createElement("div", {
+      className: cx(cssClasses.container)
+    }, hasLeading && createElement("div", {
+      className: cx(cssClasses.leading)
+    }, LeadingComponent && createElement(LeadingComponent, null)), createElement("div", {
+      className: cx(cssClasses.content)
+    }, createElement("div", {
+      className: cx(cssClasses.message)
+    }, message.parts.map(renderMessagePart)), hasActions && createElement("div", {
+      className: 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(MenuIconComponent, {
+        createElement: createElement
+      }));
+    })), FooterComponent && createElement("div", {
+      className: cx(cssClasses.footer)
+    }, createElement(FooterComponent, null)))));
+  };
+}

package/dist/es/components/chat/ChatMessageError.d.ts

@@ -0,0 +1,27 @@
+/** @jsx createElement */
+import type { ComponentProps, Renderer } from '../../types';
+export type ChatMessageErrorTranslations = {
+    /**
+     * Error message text
+     */
+    errorMessage: string;
+    /**
+     * Retry button text
+     */
+    retryText: string;
+};
+export type ChatMessageErrorProps = ComponentProps<'article'> & {
+    /**
+     * Callback for reload action
+     */
+    onReload?: () => void;
+    /**
+     * Custom action buttons
+     */
+    actions?: Array<ComponentProps<'button'>>;
+    /**
+     * Translations for error component texts
+     */
+    translations?: Partial<ChatMessageErrorTranslations>;
+};
+export declare function createChatMessageErrorComponent({ createElement, }: Pick<Renderer, 'createElement'>): ({ onReload, actions, translations: userTranslations, ...props }: ChatMessageErrorProps) => JSX.Element;

package/dist/es/components/chat/ChatMessageError.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onReload", "actions", "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) { _defineProperty(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; }
+import { createButtonComponent } from "../Button.js";
+import { ReloadIconComponent } from "./icons.js";
+export function createChatMessageErrorComponent(_ref) {
+  var createElement = _ref.createElement;
+  var Button = createButtonComponent({
+    createElement: createElement
+  });
+  return function ChatMessageError(_ref2) {
+    var onReload = _ref2.onReload,
+      actions = _ref2.actions,
+      userTranslations = _ref2.translations,
+      props = _objectWithoutProperties(_ref2, _excluded);
+    var translations = _objectSpread({
+      errorMessage: 'Sorry, we are not able to generate a response at the moment. Please retry or contact support.',
+      retryText: 'Retry'
+    }, userTranslations);
+    return createElement("article", _extends({
+      className: "ais-ChatMessageError ais-ChatMessage ais-ChatMessage--left ais-ChatMessage--subtle"
+    }, props), createElement("div", {
+      className: "ais-ChatMessage-container"
+    }, createElement("div", {
+      className: "ais-ChatMessage-content"
+    }, createElement("div", {
+      className: "ais-ChatMessage-message"
+    }, translations.errorMessage), (actions || onReload) && createElement("div", {
+      className: "ais-ChatMessage-actions"
+    }, actions ? actions.map(function (action, index) {
+      return createElement(Button, _extends({
+        key: index,
+        variant: "ghost",
+        className: "ais-ChatMessage-action"
+      }, action), action.children);
+    }) : createElement(Button, {
+      variant: "primary",
+      size: "md",
+      className: "ais-ChatMessage-errorAction",
+      onClick: function onClick() {
+        return onReload === null || onReload === void 0 ? void 0 : onReload();
+      }
+    }, createElement(ReloadIconComponent, {
+      createElement: createElement
+    }), translations.retryText)))));
+  };
+}

package/dist/es/components/chat/ChatMessageLoader.d.ts

@@ -0,0 +1,15 @@
+/** @jsx createElement */
+import type { ComponentProps, Renderer } from '../../types';
+export type ChatMessageLoaderTranslations = {
+    /**
+     * Text to display in the loader
+     */
+    loaderText?: string;
+};
+export type ChatMessageLoaderProps = ComponentProps<'article'> & {
+    /**
+     * Translations for loader component texts
+     */
+    translations?: Partial<ChatMessageLoaderTranslations>;
+};
+export declare function createChatMessageLoaderComponent({ createElement, }: Pick<Renderer, 'createElement'>): ({ translations: userTranslations, ...props }: ChatMessageLoaderProps) => JSX.Element;

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

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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) { _defineProperty(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; }
+import { LoadingSpinnerIconComponent } from "./icons.js";
+export function createChatMessageLoaderComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function ChatMessageLoader(_ref2) {
+    var userTranslations = _ref2.translations,
+      props = _objectWithoutProperties(_ref2, _excluded);
+    var translations = _objectSpread({
+      loaderText: 'Thinking...'
+    }, userTranslations);
+    return createElement("article", _extends({
+      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(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/es/components/chat/ChatMessages.d.ts

@@ -0,0 +1,139 @@
+/** @jsx createElement */
+import type { ComponentProps, MutableRef, Renderer } from '../../types';
+import type { ChatMessageProps } from './ChatMessage';
+import type { ChatMessageErrorProps } from './ChatMessageError';
+import type { ChatMessageLoaderProps } from './ChatMessageLoader';
+import type { ChatMessageBase, ChatStatus, ClientSideTools } from './types';
+export type ChatMessagesTranslations = {
+    /**
+     * Label for the scroll to bottom button
+     */
+    scrollToBottomLabel: string;
+    /**
+     * Text to display in the loader
+     */
+    loaderText?: string;
+    /**
+     * Label for the copy to clipboard action
+     */
+    copyToClipboardLabel?: string;
+    /**
+     * Label for the regenerate action
+     */
+    regenerateLabel?: string;
+};
+export type ChatMessagesClassNames = {
+    /**
+     * Class names to apply to the root element
+     */
+    root: string | string[];
+    /**
+     * Class names to apply to the scroll container
+     */
+    scroll: string | string[];
+    /**
+     * Class names to apply to the content container
+     */
+    content: string | string[];
+    /**
+     * Class names to apply to the scroll to bottom button
+     */
+    scrollToBottom: string | string[];
+    /**
+     * Class names to apply to the scroll to bottom button when hidden
+     */
+    scrollToBottomHidden: string | string[];
+};
+export type ChatMessagesProps<TMessage extends ChatMessageBase = ChatMessageBase> = ComponentProps<'div'> & {
+    /**
+     * Array of messages to display
+     */
+    messages: TMessage[];
+    /**
+     * Custom message renderer
+     */
+    messageComponent?: (props: {
+        message: TMessage;
+    }) => JSX.Element;
+    /**
+     * Custom loader component
+     */
+    loaderComponent?: (props: ChatMessageLoaderProps) => JSX.Element;
+    /**
+     * Custom error component
+     */
+    errorComponent?: (props: ChatMessageErrorProps) => JSX.Element;
+    /**
+     * Custom actions component
+     */
+    actionsComponent?: ChatMessageProps['actionsComponent'];
+    /**
+     * The index UI state
+     */
+    indexUiState: object;
+    /**
+     * Set the index UI state
+     */
+    setIndexUiState: (state: object) => void;
+    /**
+     * Tools available for the assistant
+     */
+    tools: ClientSideTools;
+    /**
+     * Current chat status
+     */
+    status?: ChatStatus;
+    /**
+     * Whether to hide the scroll to bottom button
+     */
+    hideScrollToBottom?: boolean;
+    /**
+     * Callback for reload action
+     */
+    onReload: (messageId?: string) => void;
+    /**
+     * Function to close the chat
+     */
+    onClose: () => void;
+    /**
+     * Optional class names
+     */
+    classNames?: Partial<ChatMessagesClassNames>;
+    /**
+     * Optional translations
+     */
+    translations?: Partial<ChatMessagesTranslations>;
+    /**
+     * Optional user message props
+     */
+    userMessageProps?: Partial<Omit<ChatMessageProps, 'ref' | 'key'>>;
+    /**
+     * Optional assistant message props
+     */
+    assistantMessageProps?: Partial<Omit<ChatMessageProps, 'ref' | 'key'>>;
+    /**
+     * Whether the scroll is at the bottom (controlled state)
+     */
+    isScrollAtBottom?: boolean;
+    /**
+     * Whether the messages are clearing (for animation)
+     */
+    isClearing?: boolean;
+    /**
+     * Callback for when clearing transition ends
+     */
+    onClearTransitionEnd?: () => void;
+    /**
+     * Ref callback for the scroll container element
+     */
+    scrollRef?: MutableRef<HTMLDivElement | null>;
+    /**
+     * Ref callback for the content element
+     */
+    contentRef?: MutableRef<HTMLDivElement | null>;
+    /**
+     * Callback to scroll to bottom
+     */
+    onScrollToBottom?: () => void;
+};
+export declare function createChatMessagesComponent({ createElement, Fragment, }: Renderer): <TMessage extends ChatMessageBase = ChatMessageBase>(userProps: ChatMessagesProps<TMessage>) => JSX.Element;