@liveblocks/react-ui 2.25.0-aiprivatebeta7 → 2.25.0-aiprivatebeta9

package/dist/_private/index.d.ts

@@ -1,108 +1,12 @@
 import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentProps, FormEvent, Ref, RefCallback } from 'react';
-import { UiAssistantMessage, CopilotId, 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 AiChatComposerOverrides {
-    AI_CHAT_COMPOSER_PLACEHOLDER: string;
-    AI_CHAT_COMPOSER_SEND: string;
-    AI_CHAT_COMPOSER_ATTACH_FILES: string;
-    AI_CHAT_COMPOSER_REMOVE_ATTACHMENT: string;
-    AI_CHAT_COMPOSER_ABORT: string;
-}
-interface AiChatMessageOverrides {
-    AI_CHAT_MESSAGE_DELETED: string;
-    AI_CHAT_MESSAGE_THINKING: string;
-    AI_CHAT_MESSAGE_COPY: string;
-    AI_CHAT_MESSAGE_TRY_AGAIN: string;
-}
-
-interface AiChatAssistantMessageProps extends ComponentProps<"div"> {
-    /**
-     * The message to display.
-     */
-    message: UiAssistantMessage;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & AiChatMessageOverrides>;
-}
-declare const AiChatAssistantMessage: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<AiChatAssistantMessageProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
-
-interface AiChatComposerProps extends ComponentProps<"form"> {
-    /**
-     * 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;
-    /**
-     * Whether to focus the editor on mount.
-     */
-    autoFocus?: boolean;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & AiChatComposerOverrides>;
-    /**
-     * 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<Omit<AiChatComposerProps, "ref"> & react.RefAttributes<HTMLFormElement>>;
-
-interface AiChatUserMessageProps extends ComponentProps<"div"> {
-    /**
-     * The message to display.
-     */
-    message: UiUserMessage;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides>;
-}
-declare const AiChatUserMessage: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<AiChatUserMessageProps, "ref"> & 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;
@@ -110,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;
@@ -118,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;
@@ -160,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;
@@ -206,10 +131,6 @@ 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;
@@ -252,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, CopyIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, MentionIcon, QuestionMarkIcon, RedoIcon, ResolveIcon, ResolvedIcon, RestoreIcon, RetryIcon, 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"> {
+    /**
+     * 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 Omit<ComponentPropsWithSlot<"div">, "children"> {
+    /**
+     * 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 Omit<ComponentPropsWithSlot<"div">, "children"> {
+    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,6 +25,8 @@ 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';
@@ -43,8 +50,6 @@ 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';

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

@@ -9,141 +9,119 @@ 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_TO_BOTTOM = 50;
+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,
-    knowledgeSources = [],
+    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 [distanceToBottom, setDistanceToBottom] = react.useState(
-      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(() => {
-      const unregister = knowledgeSources.map(
-        (source) => client[core.kInternal].ai.registerKnowledgeSource(chatId, source)
-      );
-      return () => {
-        unregister.forEach((unregister2) => unregister2());
-      };
-    }, [client, chatId, knowledgeSources]);
     react.useEffect(() => {
       Object.entries(tools).map(
-        ([key, value]) => client[core.kInternal].ai.registerChatTool(chatId, key, value)
+        ([key, value]) => ai.registerChatTool(chatId, key, value)
       );
       return () => {
         Object.entries(tools).map(
-          ([key]) => client[core.kInternal].ai.unregisterChatTool(chatId, key)
-        );
-      };
-    }, [client, chatId, tools]);
-    react.useEffect(() => {
-      const container = containerRef.current;
-      if (container === null)
-        return;
-      function handleScrollChange() {
-        const container2 = containerRef.current;
-        if (container2 === null)
-          return;
-        setDistanceToBottom(
-          container2.scrollHeight - container2.clientHeight - container2.scrollTop
-        );
-      }
-      container.addEventListener("scroll", handleScrollChange);
-      return () => {
-        container.removeEventListener("scroll", handleScrollChange);
-      };
-    }, []);
-    react.useEffect(() => {
-      const container = containerRef.current;
-      if (container === null)
-        return;
-      setDistanceToBottom(
-        container.scrollHeight - container.clientHeight - container.scrollTop
-      );
-    }, [messages]);
-    react.useEffect(() => {
-      const container = containerRef.current;
-      if (container === null)
-        return;
-      if (messages === void 0)
-        return;
-      const lastMessage = messages[messages.length - 1];
-      if (lastMessage !== void 0 && lastMessage.role === "user") {
-        container.scrollTo({
-          top: container.scrollHeight,
-          behavior: "smooth"
-        });
-      }
-    }, [messages]);
-    react.useEffect(() => {
-      const container = containerRef.current;
-      if (container === null)
-        return;
-      const observer = new ResizeObserver(() => {
-        const container2 = containerRef.current;
-        if (container2 === null)
-          return;
-        setDistanceToBottom(
-          container2.scrollHeight - container2.clientHeight - container2.scrollTop
+          ([key]) => ai.unregisterChatTool(chatId, key)
         );
-      });
-      observer.observe(container);
-      return () => {
-        observer.disconnect();
       };
-    }, []);
+    }, [ai, chatId, tools]);
     const scrollToBottomCallbackRef = react.useRef(void 0);
     if (scrollToBottomCallbackRef.current === void 0) {
-      scrollToBottomCallbackRef.current = function() {
+      scrollToBottomCallbackRef.current = function(behavior) {
         const container = containerRef.current;
         if (container === null)
           return;
         container.scrollTo({
           top: container.scrollHeight,
-          behavior: "instant"
+          behavior
         });
       };
     }
-    const isScrollIndicatorVisible = distanceToBottom !== null && distanceToBottom > MIN_DISTANCE_TO_BOTTOM;
+    const scrollToBottom = scrollToBottomCallbackRef.current;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", {
       ref: containerRef,
       ...props,
-      className: classNames.classNames("lb-root lb-ai-chat", className),
+      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("div", {
-            className: "lb-loading lb-ai-chat-loading",
-            children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {})
-          }) : error !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+          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)
-          }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: "lb-ai-chat-messages",
-            children: /* @__PURE__ */ jsxRuntime.jsx(Messages, {
-              messages,
-              overrides: $,
-              onDistanceToBottomChange: scrollToBottomCallbackRef.current
-            })
+          }) : messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Empty, {}) : /* @__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", {
@@ -152,22 +130,14 @@ const AiChat = react.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx("div", {
               className: "lb-ai-chat-footer-actions",
               children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-                className: "lb-elevation lb-ai-chat-scroll-indicator",
+                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: () => {
-                    const container = containerRef.current;
-                    if (container === null)
-                      return;
-                    container.scrollTo({
-                      top: container.scrollHeight,
-                      behavior: "smooth"
-                    });
-                  },
+                  onClick: () => scrollToBottom("smooth"),
                   children: /* @__PURE__ */ jsxRuntime.jsx("span", {
                     className: "lb-icon-container",
                     children: /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDownIcon, {})
@@ -179,38 +149,33 @@ const AiChat = react.forwardRef(
               chatId,
               copilotId,
               overrides: $,
-              autoFocus
+              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 Messages({
-  messages,
-  overrides: overrides$1,
-  onDistanceToBottomChange
+function AutoScrollHandler({
+  lastSentMessageId,
+  scrollToBottom
 }) {
-  const $ = overrides.useOverrides(overrides$1);
   _private.useLayoutEffect(() => {
-    onDistanceToBottomChange();
-  }, [onDistanceToBottomChange]);
-  return messages.map((message) => {
-    if (message.role === "user") {
-      return /* @__PURE__ */ jsxRuntime.jsx(AiChatUserMessage.AiChatUserMessage, {
-        message,
-        overrides: $
-      }, message.id);
-    } else if (message.role === "assistant") {
-      return /* @__PURE__ */ jsxRuntime.jsx(AiChatAssistantMessage.AiChatAssistantMessage, {
-        message,
-        overrides: $
-      }, message.id);
-    } else {
-      return null;
-    }
-  });
+    scrollToBottom("instant");
+  }, [scrollToBottom]);
+  react.useEffect(() => {
+    scrollToBottom("smooth");
+  }, [lastSentMessageId, scrollToBottom]);
+  return null;
 }
 
 exports.AiChat = AiChat;