@liveblocks/react-ui 2.25.0-aiprivatebeta8 → 3.0.0

package/dist/_private/index.d.ts

@@ -1,15 +1,18 @@
 import * as react from 'react';
-import { ComponentType, ComponentPropsWithoutRef, ElementType, 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';
+import { AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
 
-interface GlobalComponents {
-    Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
+interface ButtonProps extends ComponentProps<"button"> {
+    variant?: "default" | "toolbar" | "outline" | "primary" | "secondary" | "destructive";
+    size?: "default" | "large";
+    disableable?: boolean;
+    icon?: ReactNode;
 }
-type Components = GlobalComponents;
-declare function useComponents(components?: Partial<Components>): Components;
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const SelectButton: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 type SlotProp = {
     /**
@@ -19,103 +22,6 @@ type SlotProp = {
 };
 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_ABORT: string;
-}
-interface AiChatMessageOverrides {
-    AI_CHAT_MESSAGE_DELETED: string;
-    AI_CHAT_MESSAGE_THINKING: string;
-}
-
-interface AiChatAssistantMessageProps extends ComponentProps<"div"> {
-    /**
-     * The message to display.
-     */
-    message: UiAssistantMessage;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & AiChatMessageOverrides>;
-    /**
-     * Override the component's components.
-     */
-    components?: Partial<GlobalComponents>;
-}
-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>>>;
-
-interface ButtonProps extends ComponentProps<"button"> {
-    variant?: "default" | "toolbar" | "outline" | "primary" | "secondary";
-    size?: "default" | "large";
-    disableable?: boolean;
-    icon?: ReactNode;
-}
-declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-declare const SelectButton: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-
 interface ListProps extends ComponentPropsWithSlot<"span"> {
     values: ReactNode[];
     formatRemaining?: (amount: number) => string;
@@ -124,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;
@@ -186,6 +101,8 @@ declare function CopyIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.E
 
 declare function CrossIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
+declare function CrossCircleFillIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
 declare function DeleteIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function EditIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -212,6 +129,8 @@ declare function ListUnorderedIcon(props: ComponentProps<"svg">): react_jsx_runt
 
 declare function MentionIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
+declare function MinusCircleIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
 declare function QuestionMarkIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function RedoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -246,6 +165,18 @@ declare function UndoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.E
 
 declare function WarningIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
+declare function capitalize(string: string): string;
+
+/**
+ * "Freezes" a given value, so that it will return the same value/instance on
+ * each subsequent render. This can be used to freeze "initial" values for
+ * custom hooks, much like how `useState(initialState)` or
+ * `useRef(initialValue)` works.
+ */
+declare function useInitial<T>(value: T | (() => T)): T;
+
+declare function useRefs<T>(...refs: Ref<T>[]): RefCallback<T>;
+
 interface AiChatComposerFormProps extends ComponentPropsWithSlot<"form"> {
     /**
      * The event handler called when a chat message is submitted.
@@ -261,7 +192,7 @@ interface AiChatComposerFormProps extends ComponentPropsWithSlot<"form"> {
      */
     disabled?: boolean;
 }
-interface AiChatComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue"> {
+interface AiChatComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "children"> {
     /**
      * The editor's initial value.
      */
@@ -306,16 +237,118 @@ declare const AiChatComposerEditor: react.ForwardRefExoticComponent<AiChatCompos
  */
 declare const AiChatComposerSubmit: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
 
-declare function capitalize(string: string): string;
+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>;
+}
 
 /**
- * "Freezes" a given value, so that it will return the same value/instance on
- * each subsequent render. This can be used to freeze "initial" values for
- * custom hooks, much like how `useState(initialState)` or
- * `useRef(initialValue)` works.
+ * --------------------------------------------------------------------------
+ * @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 function useInitial<T>(value: T | (() => T)): T;
+declare const AiMessageContent: react.ForwardRefExoticComponent<AiMessageContentProps & react.RefAttributes<HTMLDivElement>>;
 
-declare function useRefs<T>(...refs: Ref<T>[]): RefCallback<T>;
+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 { AiChatAssistantMessage, AiChatAssistantMessageProps, AiChatComposer, AiChatComposerEditor, AiChatComposerEditorProps, AiChatComposerForm, AiChatComposerFormProps, AiChatComposerProps, AiChatComposerSubmit, AiChatComposerSubmitProps, AiChatUserMessage, AiChatUserMessageProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, CommentIcon, CopyIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobalComponents, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, MentionIcon, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, useComponents, useInitial, useRefs };
+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, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsLinkProps, MarkdownProps, MentionIcon, MinusCircleIcon, 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,16 +1,19 @@
-export { useComponents } from '../components.js';
-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 { AiChatComposerEditor, AiChatComposerForm, AiChatComposerSubmit } from '../primitives/AiChatComposer/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';
@@ -32,6 +35,7 @@ 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 { CrossCircleFillIcon } from '../icons/CrossCircleFill.js';
 export { DeleteIcon } from '../icons/Delete.js';
 export { EditIcon } from '../icons/Edit.js';
 export { EllipsisIcon } from '../icons/Ellipsis.js';
@@ -45,6 +49,7 @@ export { LengthenIcon } from '../icons/Lengthen.js';
 export { ListOrderedIcon } from '../icons/ListOrdered.js';
 export { ListUnorderedIcon } from '../icons/ListUnordered.js';
 export { MentionIcon } from '../icons/Mention.js';
+export { MinusCircleIcon } from '../icons/MinusCircle.js';
 export { QuestionMarkIcon } from '../icons/QuestionMark.js';
 export { RedoIcon } from '../icons/Redo.js';
 export { RestoreIcon } from '../icons/Restore.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

@@ -1,7 +1,6 @@
 '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');
@@ -9,11 +8,19 @@ 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,
@@ -22,123 +29,96 @@ const AiChat = react.forwardRef(
     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 [distanceToBottom, setDistanceToBottom] = react.useState(
-      null
-    );
-    const client = react$1.useClient();
-    const ai = client[core.kInternal].ai;
-    const [lastSendMessageId, setLastSendMessageId] = react.useState(null);
+    const containerBottomRef = react.useRef(null);
+    const isScrollIndicatorEnabled = !isLoading && !error;
+    const isScrollAtBottom = useVisible.useVisible(containerBottomRef, {
+      enabled: isScrollIndicatorEnabled,
+      root: containerRef,
+      rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR,
+      initialValue: null
+    });
+    const isScrollIndicatorVisible = isScrollIndicatorEnabled && isScrollAtBottom !== null ? !isScrollAtBottom : false;
+    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]);
-    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;
-      container.scrollTo({
-        top: container.scrollHeight,
-        behavior: "smooth"
-      });
-    }, [lastSendMessageId]);
-    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
-        );
-      });
-      observer.observe(container);
-      return () => {
-        observer.disconnect();
-      };
-    }, []);
     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,
+        Object.entries(tools).map(([name, tool]) => /* @__PURE__ */ jsxRuntime.jsx(react$1.RegisterAiTool, {
+          chatId,
+          name,
+          tool
+        }, name)),
         /* @__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: $,
-              components,
-              onDistanceToBottomChange: scrollToBottomCallbackRef.current
-            })
+          }) : 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", {
@@ -147,22 +127,13 @@ 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, {})
@@ -173,41 +144,34 @@ const AiChat = react.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(AiChatComposer.AiChatComposer, {
               chatId,
               copilotId,
-              overrides: $,
+              overrides: overrides$1,
               autoFocus,
-              onUserMessageCreate: ({ id }) => setLastSendMessageId(id)
+              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,
-  components,
-  onDistanceToBottomChange
+function AutoScrollHandler({
+  lastSentMessageId,
+  scrollToBottom
 }) {
   _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,
-        components
-      }, message.id);
-    } else {
-      return null;
-    }
-  });
+    scrollToBottom("instant");
+  }, [scrollToBottom]);
+  react.useEffect(() => {
+    scrollToBottom("smooth");
+  }, [lastSentMessageId, scrollToBottom]);
+  return null;
 }
 
 exports.AiChat = AiChat;