@liveblocks/react-ui 2.25.0-aiprivatebeta1 → 2.25.0-aiprivatebeta10

package/dist/_private/index.d.ts

@@ -1,175 +1,12 @@
 import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, ReactNode, HTMLAttributes, FormHTMLAttributes, FormEvent, ComponentProps, Ref, RefCallback } from 'react';
-import { UiAssistantMessage, CopilotId, MessageId, UiUserMessage } from '@liveblocks/core';
+import { ComponentProps, ReactNode, ElementType, ComponentPropsWithoutRef, Ref, RefCallback, FormEvent, ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 export { TooltipProvider } from '@radix-ui/react-tooltip';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-type SlotProp = {
-    /**
-     * Replace the rendered element by the one passed as a child.
-     */
-    asChild?: boolean;
-};
-type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
-
-interface GlobalOverrides {
-    USER_SELF: string;
-    USER_UNKNOWN: string;
-    LIST_REMAINING: (count: number) => string;
-    LIST_REMAINING_USERS: (count: number) => string;
-    LIST_REMAINING_COMMENTS: (count: number) => string;
-    EMOJI_PICKER_SEARCH_PLACEHOLDER: string;
-    EMOJI_PICKER_EMPTY: ReactNode;
-    EMOJI_PICKER_ERROR: (error: Error) => ReactNode;
-    EMOJI_PICKER_CHANGE_SKIN_TONE: string;
-    ATTACHMENT_TOO_LARGE: (maxSize?: string) => string;
-    ATTACHMENT_ERROR: (error: Error) => string;
-}
-interface ChatComposerOverrides {
-    CHAT_COMPOSER_PLACEHOLDER: string;
-    CHAT_COMPOSER_SEND: string;
-    CHAT_COMPOSER_ATTACH_FILES: string;
-    CHAT_COMPOSER_REMOVE_ATTACHMENT: string;
-    CHAT_COMPOSER_ABORT: string;
-}
-interface ChatMessageOverrides {
-    CHAT_MESSAGE_DELETED: string;
-    CHAT_MESSAGE_THINKING: string;
-    CHAT_MESSAGE_COPY: string;
-    CHAT_MESSAGE_TRY_AGAIN: string;
-}
-
-type AiChatAssistantMessageProps = HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The message to display.
-     */
-    message: UiAssistantMessage;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & ChatMessageOverrides>;
-};
-declare const AiChatAssistantMessage: react.MemoExoticComponent<react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The message to display.
-     */
-    message: UiAssistantMessage;
-    /**
-     * Whether to show or hide message actions.
-     * @internal
-     */
-    showActions?: boolean | "hover";
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & ChatMessageOverrides>;
-    /**
-     * @internal
-     * Whether to show or hide the regenerate button.
-     */
-    showRegenerate?: boolean;
-    /**
-     * @internal
-     * The id of the copilot to use to regenerate the message. Only used if `showRegenerate` is true.
-     */
-    copilotId?: CopilotId;
-} & react.RefAttributes<HTMLDivElement>>>;
-
-type AiChatComposerProps = FormHTMLAttributes<HTMLFormElement> & {
-    /**
-     * The composer's initial value.
-     */
-    defaultValue?: string;
-    /**
-     * The event handler called when a chat message is submitted.
-     */
-    onComposerSubmit?: (message: {
-        /**
-         * The submitted message text.
-         */
-        text: string;
-    }, event: FormEvent<HTMLFormElement>) => void;
-    /**
-     * Whether the composer is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & ChatComposerOverrides>;
-    /**
-     * The id of the chat the composer belongs to.
-     */
-    chatId: string;
-    /**
-     * The id of the copilot to use to send the message.
-     */
-    copilotId?: CopilotId;
-};
-declare const AiChatComposer: react.ForwardRefExoticComponent<FormHTMLAttributes<HTMLFormElement> & {
-    /**
-     * The composer's initial value.
-     */
-    defaultValue?: string;
-    /**
-     * The event handler called when a chat message is submitted.
-     */
-    onComposerSubmit?: (message: {
-        /**
-         * The submitted message text.
-         */
-        text: string;
-    }, event: FormEvent<HTMLFormElement>) => void;
-    /**
-     * Whether the composer is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & ChatComposerOverrides>;
-    /**
-     * The id of the chat the composer belongs to.
-     */
-    chatId: string;
-    /**
-     * The id of the copilot to use to send the message.
-     */
-    copilotId?: CopilotId;
-    /**
-     * @internal
-     */
-    branchId?: MessageId;
-    /**
-     * @internal
-     */
-    stream?: boolean;
-} & react.RefAttributes<HTMLFormElement>>;
-
-type AiChatUserMessageProps = HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The message to display.
-     */
-    message: UiUserMessage;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides>;
-};
-declare const AiChatUserMessage: react.MemoExoticComponent<react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The message to display.
-     */
-    message: UiUserMessage;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides>;
-} & react.RefAttributes<HTMLDivElement>>>;
+import { AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
 
 interface ButtonProps extends ComponentProps<"button"> {
-    variant?: "default" | "toolbar" | "outline" | "primary" | "secondary";
+    variant?: "default" | "toolbar" | "outline" | "primary" | "secondary" | "destructive";
     size?: "default" | "large";
     disableable?: boolean;
     icon?: ReactNode;
@@ -177,6 +14,14 @@ interface ButtonProps extends ComponentProps<"button"> {
 declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 declare const SelectButton: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
+type SlotProp = {
+    /**
+     * Replace the rendered element by the one passed as a child.
+     */
+    asChild?: boolean;
+};
+type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
+
 interface ListProps extends ComponentPropsWithSlot<"span"> {
     values: ReactNode[];
     formatRemaining?: (amount: number) => string;
@@ -185,6 +30,15 @@ interface ListProps extends ComponentPropsWithSlot<"span"> {
 }
 declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttributes<HTMLSpanElement>>;
 
+interface ProseProps extends ComponentProps<"div"> {
+    content: string;
+}
+/**
+ * This component renders Markdown content with `lb-prose`
+ * styles and custom components (code blocks, etc)
+ */
+declare function Prose({ content, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
+
 interface TooltipProps extends Pick<TooltipPrimitive.TooltipTriggerProps, "children">, Omit<TooltipPrimitive.TooltipContentProps, "content"> {
     content: ReactNode;
     multiline?: boolean;
@@ -227,6 +81,10 @@ declare function BoldIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.E
 
 declare function CheckIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
+declare function CheckCircleIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
+declare function CheckCircleFillIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
 declare function ChevronDownIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function ChevronLeftIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -239,6 +97,8 @@ declare function CodeIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.E
 
 declare function CommentIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
+declare function CopyIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
 declare function CrossIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function DeleteIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -271,12 +131,10 @@ declare function QuestionMarkIcon(props: ComponentProps<"svg">): react_jsx_runti
 
 declare function RedoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function ResolveIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function ResolvedIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
 declare function RestoreIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
+declare function RetryIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
 declare function SearchIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function SendIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -315,4 +173,178 @@ declare function useInitial<T>(value: T | (() => T)): T;
 
 declare function useRefs<T>(...refs: Ref<T>[]): RefCallback<T>;
 
-export { AiChatAssistantMessage, AiChatAssistantMessageProps, AiChatComposer, AiChatComposerProps, AiChatUserMessage, AiChatUserMessageProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, CommentIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, MentionIcon, QuestionMarkIcon, RedoIcon, ResolveIcon, ResolvedIcon, RestoreIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, useInitial, useRefs };
+interface AiChatComposerFormProps extends ComponentPropsWithSlot<"form"> {
+    /**
+     * The event handler called when a chat message is submitted.
+     */
+    onComposerSubmit?: (message: {
+        /**
+         * The submitted message text.
+         */
+        text: string;
+    }, event: FormEvent<HTMLFormElement>) => void;
+    /**
+     * Whether the composer is disabled.
+     */
+    disabled?: boolean;
+}
+interface AiChatComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "children"> {
+    /**
+     * The editor's initial value.
+     */
+    defaultValue?: string;
+    /**
+     * The text to display when the editor is empty.
+     */
+    placeholder?: string;
+    /**
+     * Whether the editor is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to focus the editor on mount.
+     */
+    autoFocus?: boolean;
+}
+type AiChatComposerSubmitProps = ComponentPropsWithSlot<"button">;
+
+/**
+ * Surrounds the chat composer's content and handles submissions.
+ *
+ * @example
+ * <AiChatComposer.Form onComposerSubmit={({ text }) => {}}>
+ *	 <AiChatComposer.Editor />
+ *   <AiChatComposer.Submit />
+ * </AiChatComposer.Form>
+ */
+declare const AiChatComposerForm: react.ForwardRefExoticComponent<AiChatComposerFormProps & react.RefAttributes<HTMLFormElement>>;
+/**
+ * Displays the chat composer's editor.
+ *
+ * @example
+ * <AiChatComposer.Editor placeholder="Write a message…" />
+ */
+declare const AiChatComposerEditor: react.ForwardRefExoticComponent<AiChatComposerEditorProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * A button to submit a chat message.
+ *
+ * @example
+ * <AiChatComposer.Submit>Send</AiChatComposer.Submit>
+ */
+declare const AiChatComposerSubmit: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
+
+declare const index$2_AiChatComposerEditor: typeof AiChatComposerEditor;
+declare const index$2_AiChatComposerForm: typeof AiChatComposerForm;
+declare const index$2_AiChatComposerSubmit: typeof AiChatComposerSubmit;
+declare namespace index$2 {
+  export {
+    index$2_AiChatComposerEditor as AiChatComposerEditor,
+    index$2_AiChatComposerForm as AiChatComposerForm,
+    index$2_AiChatComposerSubmit as AiChatComposerSubmit,
+    AiChatComposerEditor as Editor,
+    AiChatComposerForm as Form,
+    AiChatComposerSubmit as Submit,
+  };
+}
+
+type AiMessageContentTextPartProps = {
+    part: AiTextPart;
+};
+type AiMessageContentReasoningPartProps = {
+    part: AiReasoningPart;
+};
+interface AiMessageContentComponents {
+    /**
+     * The component used to display text parts.
+     */
+    TextPart: ComponentType<AiMessageContentTextPartProps>;
+    /**
+     * The component used to display reasoning parts.
+     */
+    ReasoningPart: ComponentType<AiMessageContentReasoningPartProps>;
+}
+interface AiMessageContentProps extends ComponentPropsWithSlot<"div"> {
+    /**
+     * The message contents to display.
+     */
+    message: AiChatMessage;
+    /**
+     * Optional overrides for the default components to render each part within
+     * the message content.
+     */
+    components?: Partial<AiMessageContentComponents>;
+}
+
+/**
+ * --------------------------------------------------------------------------
+ * @private The API for this component is not yet stable.
+ * --------------------------------------------------------------------------
+ *
+ * Primitive to help display an user or assistant message’s content, which is
+ * an array of parts.
+ *
+ * @example
+ * <AiMessage.Content message={message} components={{ TextPart }} />
+ */
+declare const AiMessageContent: react.ForwardRefExoticComponent<AiMessageContentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare namespace index$1 {
+  export {
+    AiMessageContent as Content,
+  };
+}
+
+interface RootProps extends ComponentPropsWithSlot<"div"> {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+}
+
+declare const CollapsibleRoot: react.ForwardRefExoticComponent<RootProps & react.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SlotProp & react.RefAttributes<HTMLDivElement>>;
+
+declare namespace index {
+  export {
+    CollapsibleContent as Content,
+    CollapsibleRoot as Root,
+    CollapsibleTrigger as Trigger,
+  };
+}
+
+type MarkdownComponents = {
+    CodeBlock: ComponentType<MarkdownComponentsCodeBlockProps>;
+    Link: ComponentType<MarkdownComponentsLinkProps>;
+    Heading: ComponentType<MarkdownComponentsHeadingProps>;
+    Image: ComponentType<MarkdownComponentsImageProps>;
+    Blockquote: ComponentType<MarkdownComponentsBlockquoteProps>;
+};
+interface MarkdownComponentsBlockquoteProps {
+    children: ReactNode;
+}
+interface MarkdownComponentsImageProps {
+    src: string;
+    alt: string;
+    title?: string;
+}
+interface MarkdownComponentsHeadingProps {
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    children: ReactNode;
+}
+interface MarkdownComponentsLinkProps {
+    href: string;
+    title?: string;
+    children: ReactNode;
+}
+interface MarkdownComponentsCodeBlockProps {
+    code: string;
+    language?: string;
+}
+interface MarkdownProps extends ComponentPropsWithSlot<"div"> {
+    content: string;
+    components?: Partial<MarkdownComponents>;
+}
+declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
+
+export { index$2 as AiChatComposer, AiChatComposerEditorProps, AiChatComposerFormProps, AiChatComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsLinkProps, MarkdownProps, MentionIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, useInitial, useRefs };

package/dist/_private/index.js

@@ -1,14 +1,19 @@
-export { AiChatAssistantMessage } from '../components/internal/AiChatAssistantMessage.js';
-export { AiChatComposer } from '../components/internal/AiChatComposer.js';
-export { AiChatUserMessage } from '../components/internal/AiChatUserMessage.js';
 export { Button, SelectButton } from '../components/internal/Button.js';
 export { List } from '../components/internal/List.js';
+export { Prose } from '../components/internal/Prose.js';
 export { ShortcutTooltip, Tooltip } from '../components/internal/Tooltip.js';
 export { User } from '../components/internal/User.js';
 import '../icons/index.js';
 export { capitalize } from '../utils/capitalize.js';
 export { useInitial } from '../utils/use-initial.js';
 export { useRefs } from '../utils/use-refs.js';
+import * as index from '../primitives/AiChatComposer/index.js';
+export { index as AiChatComposer };
+import * as index$1 from '../primitives/AiMessage/index.js';
+export { index$1 as AiMessage };
+import * as index$2 from '../primitives/Collapsible/index.js';
+export { index$2 as Collapsible };
+export { Markdown } from '../primitives/Markdown.js';
 export { TooltipProvider } from '@radix-ui/react-tooltip';
 export { ArrowCornerDownRightIcon } from '../icons/ArrowCornerDownRight.js';
 export { ArrowCornerUpRightIcon } from '../icons/ArrowCornerUpRight.js';
@@ -20,12 +25,15 @@ export { BellCrossedIcon } from '../icons/BellCrossed.js';
 export { BlockquoteIcon } from '../icons/Blockquote.js';
 export { BoldIcon } from '../icons/Bold.js';
 export { CheckIcon } from '../icons/Check.js';
+export { CheckCircleIcon } from '../icons/CheckCircle.js';
+export { CheckCircleFillIcon } from '../icons/CheckCircleFill.js';
 export { ChevronDownIcon } from '../icons/ChevronDown.js';
 export { ChevronLeftIcon } from '../icons/ChevronLeft.js';
 export { ChevronRightIcon } from '../icons/ChevronRight.js';
 export { ChevronUpIcon } from '../icons/ChevronUp.js';
 export { CodeIcon } from '../icons/Code.js';
 export { CommentIcon } from '../icons/Comment.js';
+export { CopyIcon } from '../icons/Copy.js';
 export { CrossIcon } from '../icons/Cross.js';
 export { DeleteIcon } from '../icons/Delete.js';
 export { EditIcon } from '../icons/Edit.js';
@@ -42,9 +50,8 @@ export { ListUnorderedIcon } from '../icons/ListUnordered.js';
 export { MentionIcon } from '../icons/Mention.js';
 export { QuestionMarkIcon } from '../icons/QuestionMark.js';
 export { RedoIcon } from '../icons/Redo.js';
-export { ResolveIcon } from '../icons/Resolve.js';
-export { ResolvedIcon } from '../icons/Resolved.js';
 export { RestoreIcon } from '../icons/Restore.js';
+export { RetryIcon } from '../icons/Retry.js';
 export { SearchIcon } from '../icons/Search.js';
 export { SendIcon } from '../icons/Send.js';
 export { ShortenIcon } from '../icons/Shorten.js';

package/dist/_private/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/AiChat.cjs

@@ -0,0 +1,185 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@liveblocks/core');
+var react$1 = require('@liveblocks/react');
+var _private = require('@liveblocks/react/_private');
+var react = require('react');
+var ArrowDown = require('../icons/ArrowDown.cjs');
+var Spinner = require('../icons/Spinner.cjs');
+var overrides = require('../overrides.cjs');
+var classNames = require('../utils/class-names.cjs');
+var useVisible = require('../utils/use-visible.cjs');
+var AiChatAssistantMessage = require('./internal/AiChatAssistantMessage.cjs');
+var AiChatComposer = require('./internal/AiChatComposer.cjs');
+var AiChatUserMessage = require('./internal/AiChatUserMessage.cjs');
+
+const MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 50;
+const defaultComponents = {
+  Empty: () => null,
+  Loading: () => /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: "lb-loading lb-ai-chat-loading",
+    children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {})
+  })
+};
+const AiChat = react.forwardRef(
+  ({
+    chatId,
+    copilotId,
+    autoFocus,
+    overrides: overrides$1,
+    knowledge,
+    tools = {},
+    layout = "inset",
+    components,
+    className,
+    ...props
+  }, forwardedRef) => {
+    const { messages, isLoading, error } = react$1.useAiChatMessages(chatId);
+    const $ = overrides.useOverrides(overrides$1);
+    const Empty = components?.Empty ?? defaultComponents.Empty;
+    const Loading = components?.Loading ?? defaultComponents.Loading;
+    const containerRef = react.useRef(null);
+    const containerBottomRef = react.useRef(null);
+    const isScrollAtBottom = useVisible.useVisible(containerBottomRef, {
+      enabled: !isLoading && !error,
+      root: containerRef,
+      rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR
+    });
+    const isScrollIndicatorVisible = isLoading || error ? false : !isScrollAtBottom;
+    const client = react$1.useClient();
+    const ai = client[core.kInternal].ai;
+    const [lastSentMessageId, setLastSentMessageId] = react.useState(null);
+    react.useImperativeHandle(
+      forwardedRef,
+      () => containerRef.current,
+      []
+    );
+    react.useEffect(() => {
+      Object.entries(tools).map(
+        ([key, value]) => ai.registerChatTool(chatId, key, value)
+      );
+      return () => {
+        Object.entries(tools).map(
+          ([key]) => ai.unregisterChatTool(chatId, key)
+        );
+      };
+    }, [ai, chatId, tools]);
+    const scrollToBottomCallbackRef = react.useRef(void 0);
+    if (scrollToBottomCallbackRef.current === void 0) {
+      scrollToBottomCallbackRef.current = function(behavior) {
+        const container = containerRef.current;
+        if (container === null)
+          return;
+        container.scrollTo({
+          top: container.scrollHeight,
+          behavior
+        });
+      };
+    }
+    const scrollToBottom = scrollToBottomCallbackRef.current;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      ref: containerRef,
+      ...props,
+      className: classNames.classNames(
+        "lb-root lb-ai-chat",
+        layout === "compact" ? "lb-ai-chat:layout-compact" : "lb-ai-chat:layout-inset",
+        className
+      ),
+      children: [
+        knowledge ? knowledge.map((source, index) => /* @__PURE__ */ jsxRuntime.jsx(react$1.RegisterAiKnowledge, {
+          description: source.description,
+          value: source.value
+        }, index)) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: "lb-ai-chat-content",
+          children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Loading, {}) : error !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: "lb-error lb-ai-chat-error",
+            children: $.AI_CHAT_MESSAGES_ERROR(error)
+          }) : messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Empty, {
+            chatId,
+            copilotId
+          }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(AutoScrollHandler, {
+                lastSentMessageId,
+                scrollToBottom
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: "lb-ai-chat-messages",
+                children: messages.map((message) => {
+                  if (message.role === "user") {
+                    return /* @__PURE__ */ jsxRuntime.jsx(AiChatUserMessage.AiChatUserMessage, {
+                      message,
+                      overrides: overrides$1
+                    }, message.id);
+                  } else if (message.role === "assistant") {
+                    return /* @__PURE__ */ jsxRuntime.jsx(AiChatAssistantMessage.AiChatAssistantMessage, {
+                      message,
+                      overrides: overrides$1,
+                      components
+                    }, message.id);
+                  } else {
+                    return null;
+                  }
+                })
+              })
+            ]
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          className: "lb-ai-chat-footer",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
+              className: "lb-ai-chat-footer-actions",
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: "lb-root lb-elevation lb-elevation-moderate lb-ai-chat-scroll-indicator",
+                "data-visible": isScrollIndicatorVisible ? "" : void 0,
+                children: /* @__PURE__ */ jsxRuntime.jsx("button", {
+                  className: "lb-ai-chat-scroll-indicator-button",
+                  tabIndex: isScrollIndicatorVisible ? 0 : -1,
+                  "aria-hidden": !isScrollIndicatorVisible,
+                  disabled: !isScrollIndicatorVisible,
+                  onClick: () => scrollToBottom("smooth"),
+                  children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    className: "lb-icon-container",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDownIcon, {})
+                  })
+                })
+              })
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(AiChatComposer.AiChatComposer, {
+              chatId,
+              copilotId,
+              overrides: $,
+              autoFocus,
+              onUserMessageCreate: ({ id }) => setLastSentMessageId(id),
+              className: layout === "inset" ? "lb-elevation lb-elevation-moderate" : void 0
+            }, chatId)
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          ref: containerBottomRef,
+          style: { position: "sticky", height: 0 },
+          "aria-hidden": true,
+          "data-scroll-at-bottom": isScrollAtBottom ? "" : void 0
+        })
+      ]
+    });
+  }
+);
+function AutoScrollHandler({
+  lastSentMessageId,
+  scrollToBottom
+}) {
+  _private.useLayoutEffect(() => {
+    scrollToBottom("instant");
+  }, [scrollToBottom]);
+  react.useEffect(() => {
+    scrollToBottom("smooth");
+  }, [lastSentMessageId, scrollToBottom]);
+  return null;
+}
+
+exports.AiChat = AiChat;
+//# sourceMappingURL=AiChat.cjs.map