@liveblocks/react-ui 3.2.1 → 3.3.0

package/dist/components/AiChat.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AiChat.cjs","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  AiOpaqueToolDefinition,\n  CopilotId,\n  MessageId,\n} from \"@liveblocks/core\";\nimport {\n  RegisterAiKnowledge,\n  RegisterAiTool,\n  useAiChatMessages,\n} from \"@liveblocks/react\";\nimport { useLatest } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  forwardRef,\n  type MutableRefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { SpinnerIcon } from \"../icons/Spinner\";\nimport {\n  type AiChatComposerOverrides,\n  type AiChatMessageOverrides,\n  type AiChatOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport type { MarkdownComponents } from \"../primitives/Markdown\";\nimport { cn } from \"../utils/cn\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\nimport { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatComposer } from \"./internal/AiChatComposer\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\n\n/**\n * The minimum number of pixels from the bottom of the scrollable area\n * before showing the scroll to bottom indicator.\n */\nconst MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 60;\n\nexport type AiChatComponentsEmptyProps = {\n  /**\n   * The chat ID provided to the `AiChat` component.\n   */\n  chatId: string;\n\n  /**\n   * The copilot ID provided to the `AiChat` component.\n   */\n  copilotId?: string;\n};\n\nexport type AiChatComponentsLoadingProps = Record<string, never>;\n\nexport type AiChatComponents = {\n  /**\n   * The component used to render the empty state of the chat.\n   */\n  Empty: ComponentType<AiChatComponentsEmptyProps>;\n\n  /**\n   * The component used to render the loading state of the chat.\n   */\n  Loading: ComponentType<AiChatComponentsLoadingProps>;\n\n  /**\n   * The components used to render Markdown content.\n   */\n  markdown?: Partial<MarkdownComponents>;\n};\n\nexport interface AiChatProps extends ComponentProps<\"div\"> {\n  /**\n   * The ID of the chat the composer belongs to.\n   */\n  chatId: string;\n\n  /**\n   * Whether to focus the chat composer on mount.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The ID of the copilot to use to send the message.\n   */\n  copilotId?: string;\n\n  /**\n   * The contextual knowledge to include in the chat. May be used by the assistant when generating responses.\n   * Any knowledge you provide via this prop will be added to any already globally registered knowledge via <RegisterAiKnowledge />.\n   */\n  knowledge?: AiKnowledgeSource[];\n\n  /**\n   * Tool definitions to make available within this chat. May be used by the assistant when generating responses.\n   */\n  tools?: Record<string, AiOpaqueToolDefinition>;\n\n  /**\n   * The layout of the chat and its composer.\n   */\n  layout?: \"inset\" | \"compact\";\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      AiChatMessageOverrides &\n      AiChatComposerOverrides &\n      AiChatOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents & AiChatComponents>;\n}\n\ninterface AiChatMessagesProps extends ComponentProps<\"div\"> {\n  messages: NonNullable<ReturnType<typeof useAiChatMessages>[\"messages\"]>;\n  copilotId: AiChatProps[\"copilotId\"];\n  overrides: AiChatProps[\"overrides\"];\n  components: AiChatProps[\"components\"];\n  lastSentMessageId: MessageId | null;\n  scrollToBottom: MutableRefObject<\n    (behavior: \"instant\" | \"smooth\", includeTrailingSpace?: boolean) => void\n  >;\n  onScrollAtBottomChange: MutableRefObject<\n    (isScrollAtBottom: boolean | null) => void\n  >;\n  containerRef: MutableRefObject<HTMLDivElement | null>;\n  footerRef: MutableRefObject<HTMLDivElement | null>;\n  messagesRef: MutableRefObject<HTMLDivElement | null>;\n  bottomTrailingMarkerRef: MutableRefObject<HTMLDivElement | null>;\n  trailingSpacerRef: MutableRefObject<HTMLDivElement | null>;\n}\n\nconst defaultComponents: AiChatComponents = {\n  Empty: () => null,\n  Loading: () => (\n    <div className=\"lb-loading lb-ai-chat-loading\">\n      <SpinnerIcon />\n    </div>\n  ),\n};\n\nconst AiChatMessages = forwardRef<HTMLDivElement, AiChatMessagesProps>(\n  (\n    {\n      messages,\n      copilotId,\n      overrides,\n      components,\n      lastSentMessageId,\n      scrollToBottom,\n      onScrollAtBottomChange,\n      containerRef,\n      footerRef,\n      messagesRef,\n      bottomTrailingMarkerRef,\n      trailingSpacerRef,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const hasLastSentMessage = lastSentMessageId !== null;\n\n    /**\n     * Every time the container, footer, or messages list change size,\n     * we calculate the trailing space that would allow the penultimate\n     * message to be at the top of the viewport, and apply it.\n     *\n     *   ┌─────────────────────────────────────────┐▲   A = The `scroll-margin-top`\n     *   │            ┌─────────────────────────┐  │▼▲  value of the penultimate message\n     *   │            │ The penultimate message │  │ │\n     *   │            └─────────────────────────┘  │ │  B = The height from the top of\n     *   │                                         │ │  the penultimate message to the\n     *   │ ┌─────────────────────────┐             │ │  bottom of the messages list,\n     *   │ │ The last message        │             │ │  including the messages' heights,\n     *   │ └─────────────────────────┘             │ │  and any padding, gap, etc\n     *   │                                         │ │\n     *   ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤▲▼\n     *   │                                         ││   The trailing space needed to\n     *   │    = container height - (A + B + C)     ││   allow the penultimate message\n     *   │                                         ││   to be at the top of the viewport\n     *   ├ ┬─────────────────────────────────────┬ ┤▼▲\n     *   │ │                                     │ │ │\n     *   │ │                                     │ │ │  C = The footer's height,\n     *   │ │                                     │ │ │  including any padding\n     *   │ └─────────────────────────────────────┘ │ │\n     *   └─────────────────────────────────────────┘ ▼\n     */\n    useEffect(\n      () => {\n        if (!hasLastSentMessage) {\n          return;\n        }\n\n        const container = containerRef.current;\n        const footer = footerRef.current;\n        const messages = messagesRef.current;\n\n        if (!container || !footer || !messages) {\n          return;\n        }\n\n        const trailingSpacer = trailingSpacerRef.current;\n        const bottomTrailingMarker = bottomTrailingMarkerRef.current;\n\n        let containerHeight: number | null = null;\n        let footerHeight: number | null = null;\n        let messagesHeight: number | null = null;\n\n        const resetTrailingSpace = () => {\n          trailingSpacer?.style.removeProperty(\"height\");\n          bottomTrailingMarker?.style.removeProperty(\"top\");\n        };\n\n        const resizeObserver = new ResizeObserver((entries) => {\n          if (!trailingSpacer || !bottomTrailingMarker) {\n            return;\n          }\n\n          const lastMessage = messages.lastElementChild;\n          const penultimateMessage = lastMessage?.previousElementSibling;\n\n          // If there's no last pair of messages, there's no need for any trailing space.\n          if (!lastMessage || !penultimateMessage) {\n            resetTrailingSpace();\n            return;\n          }\n\n          // If the container's height is based on its content, the container isn't scrollable and there's no need for any trailing space.\n          if (container.scrollHeight === container.clientHeight) {\n            resetTrailingSpace();\n            return;\n          }\n\n          let updatedContainerHeight: number | null = containerHeight;\n          let updatedFooterHeight: number | null = footerHeight;\n          let updatedMessagesHeight: number | null = messagesHeight;\n\n          for (const entry of entries) {\n            const entryHeight =\n              entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;\n\n            if (entry.target === container) {\n              updatedContainerHeight = entryHeight ?? null;\n            } else if (entry.target === footer) {\n              updatedFooterHeight = entryHeight ?? null;\n            } else if (entry.target === messages) {\n              updatedMessagesHeight = entryHeight ?? null;\n            }\n          }\n\n          // If we don't have all the heights, we can't compute the trailing space.\n          if (\n            updatedContainerHeight === null ||\n            updatedFooterHeight === null ||\n            updatedMessagesHeight === null\n          ) {\n            resetTrailingSpace();\n            return;\n          }\n\n          // If none of the heights have changed, we don't need to do anything.\n          if (\n            updatedContainerHeight === containerHeight &&\n            updatedFooterHeight === footerHeight &&\n            updatedMessagesHeight === messagesHeight\n          ) {\n            return;\n          }\n\n          // Now that we have compared them, we can update the heights.\n          containerHeight = updatedContainerHeight;\n          footerHeight = updatedFooterHeight;\n          messagesHeight = updatedMessagesHeight;\n\n          // A\n          const penultimateMessageScrollMarginTop = Number.parseFloat(\n            getComputedStyle(penultimateMessage as HTMLElement).scrollMarginTop\n          );\n\n          // B\n          const messagesRect = messages.getBoundingClientRect();\n          const penultimateMessageRect =\n            penultimateMessage.getBoundingClientRect();\n          const heightFromPenultimateMessageTopToMessagesListBottom =\n            messagesRect.bottom - penultimateMessageRect.top;\n\n          // A + B + C\n          const differenceHeight =\n            penultimateMessageScrollMarginTop +\n            heightFromPenultimateMessageTopToMessagesListBottom +\n            (footerHeight ?? 0);\n\n          // = container height - (A + B + C)\n          const trailingSpace = Math.max(containerHeight - differenceHeight, 0);\n\n          // Update the trailing space.\n          trailingSpacer.style.height = `${trailingSpace}px`;\n\n          // Offset what \"the bottom\" is to the \"scroll at the bottom\" detection logic,\n          // so that it doesn't include the trailing space.\n          bottomTrailingMarker.style.top = `${-trailingSpace}px`;\n        });\n\n        resizeObserver.observe(container);\n        resizeObserver.observe(footer);\n        resizeObserver.observe(messages);\n\n        return () => {\n          resizeObserver.disconnect();\n          resetTrailingSpace();\n        };\n      },\n      // This effect only uses stable refs.\n      [hasLastSentMessage] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Update the \"scroll at bottom\" state when needed.\n     */\n    useIntersectionCallback(\n      bottomTrailingMarkerRef,\n      (isIntersecting) => {\n        onScrollAtBottomChange.current(isIntersecting);\n      },\n      { root: containerRef, rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR }\n    );\n\n    /**\n     * Instantly scroll to the bottom for the initial state.\n     */\n    useEffect(\n      () => {\n        scrollToBottom.current(\"instant\");\n      },\n      // `scrollToBottom` is a stable ref containing the callback.\n      [] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Scroll to new messages when sending them.\n     */\n    useEffect(\n      () => {\n        if (lastSentMessageId) {\n          scrollToBottom.current(\"smooth\", true);\n        }\n      },\n      // `scrollToBottom` is a stable ref containing the callback.\n      [lastSentMessageId] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Reset the \"scroll at bottom\" state when the component unmounts.\n     */\n    useEffect(\n      () => {\n        const onScrollAtBottomChangeCallback = onScrollAtBottomChange.current;\n\n        return () => {\n          onScrollAtBottomChangeCallback(null);\n        };\n      },\n      // `onScrollAtBottomChange` is a stable ref containing the callback.\n      [] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    return (\n      <div\n        className={cn(\"lb-ai-chat-messages\", className)}\n        ref={forwardedRef}\n        {...props}\n      >\n        {messages.map((message) => {\n          if (message.role === \"user\") {\n            return (\n              <AiChatUserMessage\n                key={message.id}\n                message={message}\n                overrides={overrides}\n              />\n            );\n          } else if (message.role === \"assistant\") {\n            return (\n              <AiChatAssistantMessage\n                key={message.id}\n                message={message}\n                overrides={overrides}\n                components={components}\n                copilotId={copilotId}\n              />\n            );\n          } else {\n            return null;\n          }\n        })}\n      </div>\n    );\n  }\n);\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledge,\n      tools = {},\n      layout = \"inset\",\n      components,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const [lastSentMessageId, setLastSentMessageId] =\n      useState<MessageId | null>(null);\n\n    const $ = useOverrides(overrides);\n    const Empty = components?.Empty ?? defaultComponents.Empty;\n    const Loading = components?.Loading ?? defaultComponents.Loading;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const messagesRef = useRef<HTMLDivElement | null>(null);\n    const footerRef = useRef<HTMLDivElement | null>(null);\n    const bottomMarkerRef = useRef<HTMLDivElement | null>(null);\n    const bottomTrailingMarkerRef = useRef<HTMLDivElement | null>(null);\n    const trailingSpacerRef = useRef<HTMLDivElement | null>(null);\n\n    const [isScrollAtBottom, setScrollAtBottom] = useState<boolean | null>(\n      null\n    );\n    // `useState`'s setter is stable but this is for clarity in the places it's used.\n    const onScrollAtBottomChange = useLatest(setScrollAtBottom);\n    const isScrollIndicatorVisible =\n      messages && isScrollAtBottom !== null ? !isScrollAtBottom : false;\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    const scrollToBottom = useLatest(\n      (behavior: \"instant\" | \"smooth\", includeTrailingSpace = false) => {\n        if (includeTrailingSpace) {\n          // Scroll to the bottom marker to include the trailing space,\n          // and wait for a frame in case the trailing space hasn't\n          // been updated yet. (e.g. when sending a new message)\n          requestAnimationFrame(() => {\n            bottomMarkerRef.current?.scrollIntoView({\n              behavior,\n              block: \"end\",\n            });\n          });\n        } else {\n          // Scroll to the trailing space marker to only scroll to the\n          // bottom of the messages, without including the trailing space.\n          bottomTrailingMarkerRef.current?.scrollIntoView({\n            behavior,\n            block: \"end\",\n          });\n        }\n      }\n    );\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={cn(\n          \"lb-root lb-ai-chat\",\n          layout === \"compact\"\n            ? \"lb-ai-chat:layout-compact\"\n            : \"lb-ai-chat:layout-inset\",\n          className\n        )}\n      >\n        {knowledge\n          ? knowledge.map((source, index) => (\n              <RegisterAiKnowledge\n                key={index}\n                description={source.description}\n                value={source.value}\n                // knowledgeKey={source.knowledgeKey}\n              />\n            ))\n          : null}\n\n        {Object.entries(tools).map(([name, tool]) => (\n          <RegisterAiTool key={name} chatId={chatId} name={name} tool={tool} />\n        ))}\n\n        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <Loading />\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : messages.length === 0 ? (\n            <Empty chatId={chatId} copilotId={copilotId} />\n          ) : (\n            <>\n              <AiChatMessages\n                ref={messagesRef}\n                copilotId={copilotId}\n                messages={messages}\n                overrides={overrides}\n                components={components}\n                lastSentMessageId={lastSentMessageId}\n                scrollToBottom={scrollToBottom}\n                onScrollAtBottomChange={onScrollAtBottomChange}\n                containerRef={containerRef}\n                footerRef={footerRef}\n                messagesRef={messagesRef}\n                bottomTrailingMarkerRef={bottomTrailingMarkerRef}\n                trailingSpacerRef={trailingSpacerRef}\n              />\n\n              {/**\n               * This trailing spacer is used to extend the scrollable area beyond its actual\n               * content, to allow messages to appear at the top of the viewport for example.\n               */}\n              <div\n                ref={trailingSpacerRef}\n                data-trailing-spacer=\"\"\n                style={{\n                  pointerEvents: \"none\",\n                }}\n                aria-hidden\n              />\n            </>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\" ref={footerRef}>\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-root lb-elevation lb-elevation-moderate lb-ai-chat-scroll-indicator\"\n              data-visible={isScrollIndicatorVisible ? \"\" : undefined}\n            >\n              <button\n                className=\"lb-ai-chat-scroll-indicator-button\"\n                tabIndex={isScrollIndicatorVisible ? 0 : -1}\n                aria-hidden={!isScrollIndicatorVisible}\n                onClick={() => scrollToBottom.current(\"smooth\")}\n              >\n                <span className=\"lb-icon-container\">\n                  <ArrowDownIcon />\n                </span>\n              </button>\n            </div>\n          </div>\n          <AiChatComposer\n            key={chatId}\n            chatId={chatId}\n            copilotId={copilotId as CopilotId}\n            overrides={overrides}\n            autoFocus={autoFocus}\n            onUserMessageCreate={({ id }) => setLastSentMessageId(id)}\n            className={\n              layout === \"inset\"\n                ? \"lb-elevation lb-elevation-moderate\"\n                : undefined\n            }\n          />\n        </div>\n\n        {/**\n         * This invisible marker is a trick which allows us to use IntersectionObserver to detect when the\n         * scrollable area is fully scrolled to the bottom instead of manually tracking the scroll position\n         * and having to deal with resizes, etc.\n         *\n         * It's positioned at the bottom of the scrollable area and reliably only becomes \"visible\" to the\n         * IntersectionObserver when the scrollable area is scrolled to the bottom.\n         */}\n        {messages && messages.length > 0 ? (\n          <div\n            ref={bottomMarkerRef}\n            style={{ position: \"sticky\", height: 0 }}\n            aria-hidden\n            data-bottom-marker=\"\"\n          >\n            {/**\n             * This inner marker is absolutely offset by the same distance as the trailing space so its\n             * visibility means the scrollable area is at the bottom of the messages, not the full bottom.\n             */}\n            <div\n              ref={bottomTrailingMarkerRef}\n              style={{\n                position: \"absolute\",\n                height: 0,\n              }}\n              data-bottom-trailing-marker=\"\"\n            />\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n);\n"],"names":["jsx","SpinnerIcon","forwardRef","useEffect","messages","useIntersectionCallback","cn","AiChatUserMessage","AiChatAssistantMessage","overrides","useAiChatMessages","useState","useOverrides","useRef","useLatest","useImperativeHandle","jsxs","RegisterAiKnowledge","RegisterAiTool","Fragment","ArrowDownIcon","AiChatComposer"],"mappings":"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"}
+{"version":3,"file":"AiChat.cjs","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  AiOpaqueToolDefinition,\n  CopilotId,\n  MessageId,\n} from \"@liveblocks/core\";\nimport { RegisterAiTool, useAiChatMessages } from \"@liveblocks/react\";\nimport { useLatest } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  forwardRef,\n  type MutableRefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { SpinnerIcon } from \"../icons/Spinner\";\nimport {\n  type AiChatMessageOverrides,\n  type AiChatOverrides,\n  type AiComposerOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport type { MarkdownComponents } from \"../primitives/Markdown\";\nimport { cn } from \"../utils/cn\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\nimport { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\nimport { AiComposer, type AiComposerProps } from \"./internal/AiComposer\";\n\n/**\n * The minimum number of pixels from the bottom of the scrollable area\n * before showing the scroll to bottom indicator.\n */\nconst MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 60;\n\nexport type AiChatComponentsEmptyProps = {\n  /**\n   * The chat ID provided to the `AiChat` component.\n   */\n  chatId: string;\n\n  /**\n   * The copilot ID provided to the `AiChat` component.\n   */\n  copilotId?: string;\n};\n\nexport type AiChatComponentsLoadingProps = Record<string, never>;\n\nexport type AiChatComponents = {\n  /**\n   * The component used to render the empty state of the chat.\n   */\n  Empty: ComponentType<AiChatComponentsEmptyProps>;\n\n  /**\n   * The component used to render the loading state of the chat.\n   */\n  Loading: ComponentType<AiChatComponentsLoadingProps>;\n\n  /**\n   * The components used to render Markdown content.\n   */\n  markdown?: Partial<MarkdownComponents>;\n};\n\nexport interface AiChatProps extends ComponentProps<\"div\"> {\n  /**\n   * The ID of the chat the composer belongs to.\n   */\n  chatId: string;\n\n  /**\n   * Whether to focus the chat composer on mount.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The ID of the copilot to use to send the message.\n   */\n  copilotId?: string;\n\n  /**\n   * The contextual knowledge to include in the chat. May be used by the\n   * assistant when generating responses. In addition to the knowledge passed\n   * in via this prop, the AiChat instance will also have access to any\n   * globally registered knowledge via <RegisterAiKnowledge />.\n   */\n  knowledge?: AiKnowledgeSource[];\n\n  /**\n   * Tool definitions to make available within this chat. May be used by the assistant when generating responses.\n   */\n  tools?: Record<string, AiOpaqueToolDefinition>;\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: AiComposerProps[\"onComposerSubmit\"];\n\n  /**\n   * The layout of the chat and its composer.\n   */\n  layout?: \"inset\" | \"compact\";\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      AiComposerOverrides &\n      AiChatMessageOverrides &\n      AiChatOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents & AiChatComponents>;\n}\n\ninterface AiChatMessagesProps extends ComponentProps<\"div\"> {\n  messages: NonNullable<ReturnType<typeof useAiChatMessages>[\"messages\"]>;\n  copilotId: AiChatProps[\"copilotId\"];\n  overrides: AiChatProps[\"overrides\"];\n  components: AiChatProps[\"components\"];\n  lastSentMessageId: MessageId | null;\n  scrollToBottom: MutableRefObject<\n    (behavior: \"instant\" | \"smooth\", includeTrailingSpace?: boolean) => void\n  >;\n  onScrollAtBottomChange: MutableRefObject<\n    (isScrollAtBottom: boolean | null) => void\n  >;\n  containerRef: MutableRefObject<HTMLDivElement | null>;\n  footerRef: MutableRefObject<HTMLDivElement | null>;\n  messagesRef: MutableRefObject<HTMLDivElement | null>;\n  bottomTrailingMarkerRef: MutableRefObject<HTMLDivElement | null>;\n  trailingSpacerRef: MutableRefObject<HTMLDivElement | null>;\n}\n\nconst defaultComponents: AiChatComponents = {\n  Empty: () => null,\n  Loading: () => (\n    <div className=\"lb-loading lb-ai-chat-loading\">\n      <SpinnerIcon />\n    </div>\n  ),\n};\n\nconst AiChatMessages = forwardRef<HTMLDivElement, AiChatMessagesProps>(\n  (\n    {\n      messages,\n      copilotId,\n      overrides,\n      components,\n      lastSentMessageId,\n      scrollToBottom,\n      onScrollAtBottomChange,\n      containerRef,\n      footerRef,\n      messagesRef,\n      bottomTrailingMarkerRef,\n      trailingSpacerRef,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const hasLastSentMessage = lastSentMessageId !== null;\n\n    /**\n     * Every time the container, footer, or messages list change size,\n     * we calculate the trailing space that would allow the penultimate\n     * message to be at the top of the viewport, and apply it.\n     *\n     *   ┌─────────────────────────────────────────┐▲   A = The `scroll-margin-top`\n     *   │            ┌─────────────────────────┐  │▼▲  value of the penultimate message\n     *   │            │ The penultimate message │  │ │\n     *   │            └─────────────────────────┘  │ │  B = The height from the top of\n     *   │                                         │ │  the penultimate message to the\n     *   │ ┌─────────────────────────┐             │ │  bottom of the messages list,\n     *   │ │ The last message        │             │ │  including the messages' heights,\n     *   │ └─────────────────────────┘             │ │  and any padding, gap, etc\n     *   │                                         │ │\n     *   ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤▲▼\n     *   │                                         ││   The trailing space needed to\n     *   │    = container height - (A + B + C)     ││   allow the penultimate message\n     *   │                                         ││   to be at the top of the viewport\n     *   ├ ┬─────────────────────────────────────┬ ┤▼▲\n     *   │ │                                     │ │ │\n     *   │ │                                     │ │ │  C = The footer's height,\n     *   │ │                                     │ │ │  including any padding\n     *   │ └─────────────────────────────────────┘ │ │\n     *   └─────────────────────────────────────────┘ ▼\n     */\n    useEffect(\n      () => {\n        if (!hasLastSentMessage) {\n          return;\n        }\n\n        const container = containerRef.current;\n        const footer = footerRef.current;\n        const messages = messagesRef.current;\n\n        if (!container || !footer || !messages) {\n          return;\n        }\n\n        const trailingSpacer = trailingSpacerRef.current;\n        const bottomTrailingMarker = bottomTrailingMarkerRef.current;\n\n        let containerHeight: number | null = null;\n        let footerHeight: number | null = null;\n        let messagesHeight: number | null = null;\n\n        const resetTrailingSpace = () => {\n          trailingSpacer?.style.removeProperty(\"height\");\n          bottomTrailingMarker?.style.removeProperty(\"top\");\n        };\n\n        const resizeObserver = new ResizeObserver((entries) => {\n          if (!trailingSpacer || !bottomTrailingMarker) {\n            return;\n          }\n\n          const lastMessage = messages.lastElementChild;\n          const penultimateMessage = lastMessage?.previousElementSibling;\n\n          // If there's no last pair of messages, there's no need for any trailing space.\n          if (!lastMessage || !penultimateMessage) {\n            resetTrailingSpace();\n            return;\n          }\n\n          // If the container's height is based on its content, the container isn't scrollable and there's no need for any trailing space.\n          if (container.scrollHeight === container.clientHeight) {\n            resetTrailingSpace();\n            return;\n          }\n\n          let updatedContainerHeight: number | null = containerHeight;\n          let updatedFooterHeight: number | null = footerHeight;\n          let updatedMessagesHeight: number | null = messagesHeight;\n\n          for (const entry of entries) {\n            const entryHeight =\n              entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;\n\n            if (entry.target === container) {\n              updatedContainerHeight = entryHeight ?? null;\n            } else if (entry.target === footer) {\n              updatedFooterHeight = entryHeight ?? null;\n            } else if (entry.target === messages) {\n              updatedMessagesHeight = entryHeight ?? null;\n            }\n          }\n\n          // If we don't have all the heights, we can't compute the trailing space.\n          if (\n            updatedContainerHeight === null ||\n            updatedFooterHeight === null ||\n            updatedMessagesHeight === null\n          ) {\n            resetTrailingSpace();\n            return;\n          }\n\n          // If none of the heights have changed, we don't need to do anything.\n          if (\n            updatedContainerHeight === containerHeight &&\n            updatedFooterHeight === footerHeight &&\n            updatedMessagesHeight === messagesHeight\n          ) {\n            return;\n          }\n\n          // Now that we have compared them, we can update the heights.\n          containerHeight = updatedContainerHeight;\n          footerHeight = updatedFooterHeight;\n          messagesHeight = updatedMessagesHeight;\n\n          // A\n          const penultimateMessageScrollMarginTop = Number.parseFloat(\n            getComputedStyle(penultimateMessage as HTMLElement).scrollMarginTop\n          );\n\n          // B\n          const messagesRect = messages.getBoundingClientRect();\n          const penultimateMessageRect =\n            penultimateMessage.getBoundingClientRect();\n          const heightFromPenultimateMessageTopToMessagesListBottom =\n            messagesRect.bottom - penultimateMessageRect.top;\n\n          // A + B + C\n          const differenceHeight =\n            penultimateMessageScrollMarginTop +\n            heightFromPenultimateMessageTopToMessagesListBottom +\n            (footerHeight ?? 0);\n\n          // = container height - (A + B + C)\n          const trailingSpace = Math.max(containerHeight - differenceHeight, 0);\n\n          // Update the trailing space.\n          trailingSpacer.style.height = `${trailingSpace}px`;\n\n          // Offset what \"the bottom\" is to the \"scroll at the bottom\" detection logic,\n          // so that it doesn't include the trailing space.\n          bottomTrailingMarker.style.top = `${-trailingSpace}px`;\n        });\n\n        resizeObserver.observe(container);\n        resizeObserver.observe(footer);\n        resizeObserver.observe(messages);\n\n        return () => {\n          resizeObserver.disconnect();\n          resetTrailingSpace();\n        };\n      },\n      // This effect only uses stable refs.\n      [hasLastSentMessage] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Update the \"scroll at bottom\" state when needed.\n     */\n    useIntersectionCallback(\n      bottomTrailingMarkerRef,\n      (isIntersecting) => {\n        onScrollAtBottomChange.current(isIntersecting);\n      },\n      { root: containerRef, rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR }\n    );\n\n    /**\n     * Instantly scroll to the bottom for the initial state.\n     */\n    useEffect(\n      () => {\n        scrollToBottom.current(\"instant\");\n      },\n      // `scrollToBottom` is a stable ref containing the callback.\n      [] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Scroll to new messages when sending them.\n     */\n    useEffect(\n      () => {\n        if (lastSentMessageId) {\n          scrollToBottom.current(\"smooth\", true);\n        }\n      },\n      // `scrollToBottom` is a stable ref containing the callback.\n      [lastSentMessageId] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Reset the \"scroll at bottom\" state when the component unmounts.\n     */\n    useEffect(\n      () => {\n        const onScrollAtBottomChangeCallback = onScrollAtBottomChange.current;\n\n        return () => {\n          onScrollAtBottomChangeCallback(null);\n        };\n      },\n      // `onScrollAtBottomChange` is a stable ref containing the callback.\n      [] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    return (\n      <div\n        className={cn(\"lb-ai-chat-messages\", className)}\n        ref={forwardedRef}\n        {...props}\n      >\n        {messages.map((message) => {\n          if (message.role === \"user\") {\n            return (\n              <AiChatUserMessage\n                key={message.id}\n                message={message}\n                overrides={overrides}\n              />\n            );\n          } else if (message.role === \"assistant\") {\n            return (\n              <AiChatAssistantMessage\n                key={message.id}\n                message={message}\n                overrides={overrides}\n                components={components}\n                copilotId={copilotId}\n              />\n            );\n          } else {\n            return null;\n          }\n        })}\n      </div>\n    );\n  }\n);\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledge: localKnowledge,\n      tools = {},\n      onComposerSubmit,\n      layout = \"inset\",\n      components,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const [lastSentMessageId, setLastSentMessageId] =\n      useState<MessageId | null>(null);\n\n    const $ = useOverrides(overrides);\n    const Empty = components?.Empty ?? defaultComponents.Empty;\n    const Loading = components?.Loading ?? defaultComponents.Loading;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const messagesRef = useRef<HTMLDivElement | null>(null);\n    const footerRef = useRef<HTMLDivElement | null>(null);\n    const bottomMarkerRef = useRef<HTMLDivElement | null>(null);\n    const bottomTrailingMarkerRef = useRef<HTMLDivElement | null>(null);\n    const trailingSpacerRef = useRef<HTMLDivElement | null>(null);\n\n    const [isScrollAtBottom, setScrollAtBottom] = useState<boolean | null>(\n      null\n    );\n    // `useState`'s setter is stable but this is for clarity in the places it's used.\n    const onScrollAtBottomChange = useLatest(setScrollAtBottom);\n    const isScrollIndicatorVisible =\n      messages && isScrollAtBottom !== null ? !isScrollAtBottom : false;\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    const scrollToBottom = useLatest(\n      (behavior: \"instant\" | \"smooth\", includeTrailingSpace = false) => {\n        if (includeTrailingSpace) {\n          // Scroll to the bottom marker to include the trailing space,\n          // and wait for a frame in case the trailing space hasn't\n          // been updated yet. (e.g. when sending a new message)\n          requestAnimationFrame(() => {\n            bottomMarkerRef.current?.scrollIntoView({\n              behavior,\n              block: \"end\",\n            });\n          });\n        } else {\n          // Scroll to the trailing space marker to only scroll to the\n          // bottom of the messages, without including the trailing space.\n          bottomTrailingMarkerRef.current?.scrollIntoView({\n            behavior,\n            block: \"end\",\n          });\n        }\n      }\n    );\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={cn(\n          \"lb-root lb-ai-chat\",\n          layout === \"compact\"\n            ? \"lb-ai-chat:layout-compact\"\n            : \"lb-ai-chat:layout-inset\",\n          className\n        )}\n      >\n        {Object.entries(tools).map(([name, tool]) => (\n          <RegisterAiTool key={name} chatId={chatId} name={name} tool={tool} />\n        ))}\n\n        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <Loading />\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : messages.length === 0 ? (\n            <Empty chatId={chatId} copilotId={copilotId} />\n          ) : (\n            <>\n              <AiChatMessages\n                ref={messagesRef}\n                copilotId={copilotId}\n                messages={messages}\n                overrides={overrides}\n                components={components}\n                lastSentMessageId={lastSentMessageId}\n                scrollToBottom={scrollToBottom}\n                onScrollAtBottomChange={onScrollAtBottomChange}\n                containerRef={containerRef}\n                footerRef={footerRef}\n                messagesRef={messagesRef}\n                bottomTrailingMarkerRef={bottomTrailingMarkerRef}\n                trailingSpacerRef={trailingSpacerRef}\n              />\n\n              {/**\n               * This trailing spacer is used to extend the scrollable area beyond its actual\n               * content, to allow messages to appear at the top of the viewport for example.\n               */}\n              <div\n                ref={trailingSpacerRef}\n                data-trailing-spacer=\"\"\n                style={{\n                  pointerEvents: \"none\",\n                }}\n                aria-hidden\n              />\n            </>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\" ref={footerRef}>\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-root lb-elevation lb-elevation-moderate lb-ai-chat-scroll-indicator\"\n              data-visible={isScrollIndicatorVisible ? \"\" : undefined}\n            >\n              <button\n                className=\"lb-ai-chat-scroll-indicator-button\"\n                tabIndex={isScrollIndicatorVisible ? 0 : -1}\n                aria-hidden={!isScrollIndicatorVisible}\n                onClick={() => scrollToBottom.current(\"smooth\")}\n              >\n                <span className=\"lb-icon-container\">\n                  <ArrowDownIcon />\n                </span>\n              </button>\n            </div>\n          </div>\n          <AiComposer\n            key={chatId}\n            chatId={chatId}\n            copilotId={copilotId as CopilotId}\n            overrides={overrides}\n            autoFocus={autoFocus}\n            knowledge={localKnowledge}\n            onComposerSubmit={onComposerSubmit}\n            onComposerSubmitted={({ id }) => setLastSentMessageId(id)}\n            className={cn(\n              \"lb-ai-chat-composer\",\n              layout === \"inset\"\n                ? \"lb-elevation lb-elevation-moderate\"\n                : undefined\n            )}\n          />\n        </div>\n\n        {/**\n         * This invisible marker is a trick which allows us to use IntersectionObserver to detect when the\n         * scrollable area is fully scrolled to the bottom instead of manually tracking the scroll position\n         * and having to deal with resizes, etc.\n         *\n         * It's positioned at the bottom of the scrollable area and reliably only becomes \"visible\" to the\n         * IntersectionObserver when the scrollable area is scrolled to the bottom.\n         */}\n        {messages && messages.length > 0 ? (\n          <div\n            ref={bottomMarkerRef}\n            style={{ position: \"sticky\", height: 0 }}\n            aria-hidden\n            data-bottom-marker=\"\"\n          >\n            {/**\n             * This inner marker is absolutely offset by the same distance as the trailing space so its\n             * visibility means the scrollable area is at the bottom of the messages, not the full bottom.\n             */}\n            <div\n              ref={bottomTrailingMarkerRef}\n              style={{\n                position: \"absolute\",\n                height: 0,\n              }}\n              data-bottom-trailing-marker=\"\"\n            />\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n);\n"],"names":["jsx","SpinnerIcon","forwardRef","useEffect","messages","useIntersectionCallback","cn","AiChatUserMessage","AiChatAssistantMessage","overrides","useAiChatMessages","useState","useOverrides","useRef","useLatest","useImperativeHandle","jsxs","RegisterAiTool","Fragment","ArrowDownIcon","AiComposer"],"mappings":"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"}

package/dist/components/AiChat.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useAiChatMessages, RegisterAiKnowledge, RegisterAiTool } from '@liveblocks/react';
+import { useAiChatMessages, RegisterAiTool } from '@liveblocks/react';
 import { useLatest } from '@liveblocks/react/_private';
 import { forwardRef, useEffect, useState, useRef, useImperativeHandle } from 'react';
 import { ArrowDownIcon } from '../icons/ArrowDown.js';
@@ -8,8 +8,8 @@ import { useOverrides } from '../overrides.js';
 import { cn } from '../utils/cn.js';
 import { useIntersectionCallback } from '../utils/use-visible.js';
 import { AiChatAssistantMessage } from './internal/AiChatAssistantMessage.js';
-import { AiChatComposer } from './internal/AiChatComposer.js';
 import { AiChatUserMessage } from './internal/AiChatUserMessage.js';
+import { AiComposer } from './internal/AiComposer.js';
 
 const MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 60;
 const defaultComponents = {
@@ -175,8 +175,9 @@ const AiChat = forwardRef(
     copilotId,
     autoFocus,
     overrides,
-    knowledge,
+    knowledge: localKnowledge,
     tools = {},
+    onComposerSubmit,
     layout = "inset",
     components,
     className,
@@ -229,10 +230,6 @@ const AiChat = forwardRef(
         className
       ),
       children: [
-        knowledge ? knowledge.map((source, index) => /* @__PURE__ */ jsx(RegisterAiKnowledge, {
-          description: source.description,
-          value: source.value
-        }, index)) : null,
         Object.entries(tools).map(([name, tool]) => /* @__PURE__ */ jsx(RegisterAiTool, {
           chatId,
           name,
@@ -295,13 +292,18 @@ const AiChat = forwardRef(
                 })
               })
             }),
-            /* @__PURE__ */ jsx(AiChatComposer, {
+            /* @__PURE__ */ jsx(AiComposer, {
               chatId,
               copilotId,
               overrides,
               autoFocus,
-              onUserMessageCreate: ({ id }) => setLastSentMessageId(id),
-              className: layout === "inset" ? "lb-elevation lb-elevation-moderate" : void 0
+              knowledge: localKnowledge,
+              onComposerSubmit,
+              onComposerSubmitted: ({ id }) => setLastSentMessageId(id),
+              className: cn(
+                "lb-ai-chat-composer",
+                layout === "inset" ? "lb-elevation lb-elevation-moderate" : void 0
+              )
             }, chatId)
           ]
         }),

package/dist/components/AiChat.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiChat.js","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  AiOpaqueToolDefinition,\n  CopilotId,\n  MessageId,\n} from \"@liveblocks/core\";\nimport {\n  RegisterAiKnowledge,\n  RegisterAiTool,\n  useAiChatMessages,\n} from \"@liveblocks/react\";\nimport { useLatest } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  forwardRef,\n  type MutableRefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { SpinnerIcon } from \"../icons/Spinner\";\nimport {\n  type AiChatComposerOverrides,\n  type AiChatMessageOverrides,\n  type AiChatOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport type { MarkdownComponents } from \"../primitives/Markdown\";\nimport { cn } from \"../utils/cn\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\nimport { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatComposer } from \"./internal/AiChatComposer\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\n\n/**\n * The minimum number of pixels from the bottom of the scrollable area\n * before showing the scroll to bottom indicator.\n */\nconst MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 60;\n\nexport type AiChatComponentsEmptyProps = {\n  /**\n   * The chat ID provided to the `AiChat` component.\n   */\n  chatId: string;\n\n  /**\n   * The copilot ID provided to the `AiChat` component.\n   */\n  copilotId?: string;\n};\n\nexport type AiChatComponentsLoadingProps = Record<string, never>;\n\nexport type AiChatComponents = {\n  /**\n   * The component used to render the empty state of the chat.\n   */\n  Empty: ComponentType<AiChatComponentsEmptyProps>;\n\n  /**\n   * The component used to render the loading state of the chat.\n   */\n  Loading: ComponentType<AiChatComponentsLoadingProps>;\n\n  /**\n   * The components used to render Markdown content.\n   */\n  markdown?: Partial<MarkdownComponents>;\n};\n\nexport interface AiChatProps extends ComponentProps<\"div\"> {\n  /**\n   * The ID of the chat the composer belongs to.\n   */\n  chatId: string;\n\n  /**\n   * Whether to focus the chat composer on mount.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The ID of the copilot to use to send the message.\n   */\n  copilotId?: string;\n\n  /**\n   * The contextual knowledge to include in the chat. May be used by the assistant when generating responses.\n   * Any knowledge you provide via this prop will be added to any already globally registered knowledge via <RegisterAiKnowledge />.\n   */\n  knowledge?: AiKnowledgeSource[];\n\n  /**\n   * Tool definitions to make available within this chat. May be used by the assistant when generating responses.\n   */\n  tools?: Record<string, AiOpaqueToolDefinition>;\n\n  /**\n   * The layout of the chat and its composer.\n   */\n  layout?: \"inset\" | \"compact\";\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      AiChatMessageOverrides &\n      AiChatComposerOverrides &\n      AiChatOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents & AiChatComponents>;\n}\n\ninterface AiChatMessagesProps extends ComponentProps<\"div\"> {\n  messages: NonNullable<ReturnType<typeof useAiChatMessages>[\"messages\"]>;\n  copilotId: AiChatProps[\"copilotId\"];\n  overrides: AiChatProps[\"overrides\"];\n  components: AiChatProps[\"components\"];\n  lastSentMessageId: MessageId | null;\n  scrollToBottom: MutableRefObject<\n    (behavior: \"instant\" | \"smooth\", includeTrailingSpace?: boolean) => void\n  >;\n  onScrollAtBottomChange: MutableRefObject<\n    (isScrollAtBottom: boolean | null) => void\n  >;\n  containerRef: MutableRefObject<HTMLDivElement | null>;\n  footerRef: MutableRefObject<HTMLDivElement | null>;\n  messagesRef: MutableRefObject<HTMLDivElement | null>;\n  bottomTrailingMarkerRef: MutableRefObject<HTMLDivElement | null>;\n  trailingSpacerRef: MutableRefObject<HTMLDivElement | null>;\n}\n\nconst defaultComponents: AiChatComponents = {\n  Empty: () => null,\n  Loading: () => (\n    <div className=\"lb-loading lb-ai-chat-loading\">\n      <SpinnerIcon />\n    </div>\n  ),\n};\n\nconst AiChatMessages = forwardRef<HTMLDivElement, AiChatMessagesProps>(\n  (\n    {\n      messages,\n      copilotId,\n      overrides,\n      components,\n      lastSentMessageId,\n      scrollToBottom,\n      onScrollAtBottomChange,\n      containerRef,\n      footerRef,\n      messagesRef,\n      bottomTrailingMarkerRef,\n      trailingSpacerRef,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const hasLastSentMessage = lastSentMessageId !== null;\n\n    /**\n     * Every time the container, footer, or messages list change size,\n     * we calculate the trailing space that would allow the penultimate\n     * message to be at the top of the viewport, and apply it.\n     *\n     *   ┌─────────────────────────────────────────┐▲   A = The `scroll-margin-top`\n     *   │            ┌─────────────────────────┐  │▼▲  value of the penultimate message\n     *   │            │ The penultimate message │  │ │\n     *   │            └─────────────────────────┘  │ │  B = The height from the top of\n     *   │                                         │ │  the penultimate message to the\n     *   │ ┌─────────────────────────┐             │ │  bottom of the messages list,\n     *   │ │ The last message        │             │ │  including the messages' heights,\n     *   │ └─────────────────────────┘             │ │  and any padding, gap, etc\n     *   │                                         │ │\n     *   ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤▲▼\n     *   │                                         ││   The trailing space needed to\n     *   │    = container height - (A + B + C)     ││   allow the penultimate message\n     *   │                                         ││   to be at the top of the viewport\n     *   ├ ┬─────────────────────────────────────┬ ┤▼▲\n     *   │ │                                     │ │ │\n     *   │ │                                     │ │ │  C = The footer's height,\n     *   │ │                                     │ │ │  including any padding\n     *   │ └─────────────────────────────────────┘ │ │\n     *   └─────────────────────────────────────────┘ ▼\n     */\n    useEffect(\n      () => {\n        if (!hasLastSentMessage) {\n          return;\n        }\n\n        const container = containerRef.current;\n        const footer = footerRef.current;\n        const messages = messagesRef.current;\n\n        if (!container || !footer || !messages) {\n          return;\n        }\n\n        const trailingSpacer = trailingSpacerRef.current;\n        const bottomTrailingMarker = bottomTrailingMarkerRef.current;\n\n        let containerHeight: number | null = null;\n        let footerHeight: number | null = null;\n        let messagesHeight: number | null = null;\n\n        const resetTrailingSpace = () => {\n          trailingSpacer?.style.removeProperty(\"height\");\n          bottomTrailingMarker?.style.removeProperty(\"top\");\n        };\n\n        const resizeObserver = new ResizeObserver((entries) => {\n          if (!trailingSpacer || !bottomTrailingMarker) {\n            return;\n          }\n\n          const lastMessage = messages.lastElementChild;\n          const penultimateMessage = lastMessage?.previousElementSibling;\n\n          // If there's no last pair of messages, there's no need for any trailing space.\n          if (!lastMessage || !penultimateMessage) {\n            resetTrailingSpace();\n            return;\n          }\n\n          // If the container's height is based on its content, the container isn't scrollable and there's no need for any trailing space.\n          if (container.scrollHeight === container.clientHeight) {\n            resetTrailingSpace();\n            return;\n          }\n\n          let updatedContainerHeight: number | null = containerHeight;\n          let updatedFooterHeight: number | null = footerHeight;\n          let updatedMessagesHeight: number | null = messagesHeight;\n\n          for (const entry of entries) {\n            const entryHeight =\n              entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;\n\n            if (entry.target === container) {\n              updatedContainerHeight = entryHeight ?? null;\n            } else if (entry.target === footer) {\n              updatedFooterHeight = entryHeight ?? null;\n            } else if (entry.target === messages) {\n              updatedMessagesHeight = entryHeight ?? null;\n            }\n          }\n\n          // If we don't have all the heights, we can't compute the trailing space.\n          if (\n            updatedContainerHeight === null ||\n            updatedFooterHeight === null ||\n            updatedMessagesHeight === null\n          ) {\n            resetTrailingSpace();\n            return;\n          }\n\n          // If none of the heights have changed, we don't need to do anything.\n          if (\n            updatedContainerHeight === containerHeight &&\n            updatedFooterHeight === footerHeight &&\n            updatedMessagesHeight === messagesHeight\n          ) {\n            return;\n          }\n\n          // Now that we have compared them, we can update the heights.\n          containerHeight = updatedContainerHeight;\n          footerHeight = updatedFooterHeight;\n          messagesHeight = updatedMessagesHeight;\n\n          // A\n          const penultimateMessageScrollMarginTop = Number.parseFloat(\n            getComputedStyle(penultimateMessage as HTMLElement).scrollMarginTop\n          );\n\n          // B\n          const messagesRect = messages.getBoundingClientRect();\n          const penultimateMessageRect =\n            penultimateMessage.getBoundingClientRect();\n          const heightFromPenultimateMessageTopToMessagesListBottom =\n            messagesRect.bottom - penultimateMessageRect.top;\n\n          // A + B + C\n          const differenceHeight =\n            penultimateMessageScrollMarginTop +\n            heightFromPenultimateMessageTopToMessagesListBottom +\n            (footerHeight ?? 0);\n\n          // = container height - (A + B + C)\n          const trailingSpace = Math.max(containerHeight - differenceHeight, 0);\n\n          // Update the trailing space.\n          trailingSpacer.style.height = `${trailingSpace}px`;\n\n          // Offset what \"the bottom\" is to the \"scroll at the bottom\" detection logic,\n          // so that it doesn't include the trailing space.\n          bottomTrailingMarker.style.top = `${-trailingSpace}px`;\n        });\n\n        resizeObserver.observe(container);\n        resizeObserver.observe(footer);\n        resizeObserver.observe(messages);\n\n        return () => {\n          resizeObserver.disconnect();\n          resetTrailingSpace();\n        };\n      },\n      // This effect only uses stable refs.\n      [hasLastSentMessage] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Update the \"scroll at bottom\" state when needed.\n     */\n    useIntersectionCallback(\n      bottomTrailingMarkerRef,\n      (isIntersecting) => {\n        onScrollAtBottomChange.current(isIntersecting);\n      },\n      { root: containerRef, rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR }\n    );\n\n    /**\n     * Instantly scroll to the bottom for the initial state.\n     */\n    useEffect(\n      () => {\n        scrollToBottom.current(\"instant\");\n      },\n      // `scrollToBottom` is a stable ref containing the callback.\n      [] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Scroll to new messages when sending them.\n     */\n    useEffect(\n      () => {\n        if (lastSentMessageId) {\n          scrollToBottom.current(\"smooth\", true);\n        }\n      },\n      // `scrollToBottom` is a stable ref containing the callback.\n      [lastSentMessageId] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Reset the \"scroll at bottom\" state when the component unmounts.\n     */\n    useEffect(\n      () => {\n        const onScrollAtBottomChangeCallback = onScrollAtBottomChange.current;\n\n        return () => {\n          onScrollAtBottomChangeCallback(null);\n        };\n      },\n      // `onScrollAtBottomChange` is a stable ref containing the callback.\n      [] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    return (\n      <div\n        className={cn(\"lb-ai-chat-messages\", className)}\n        ref={forwardedRef}\n        {...props}\n      >\n        {messages.map((message) => {\n          if (message.role === \"user\") {\n            return (\n              <AiChatUserMessage\n                key={message.id}\n                message={message}\n                overrides={overrides}\n              />\n            );\n          } else if (message.role === \"assistant\") {\n            return (\n              <AiChatAssistantMessage\n                key={message.id}\n                message={message}\n                overrides={overrides}\n                components={components}\n                copilotId={copilotId}\n              />\n            );\n          } else {\n            return null;\n          }\n        })}\n      </div>\n    );\n  }\n);\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledge,\n      tools = {},\n      layout = \"inset\",\n      components,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const [lastSentMessageId, setLastSentMessageId] =\n      useState<MessageId | null>(null);\n\n    const $ = useOverrides(overrides);\n    const Empty = components?.Empty ?? defaultComponents.Empty;\n    const Loading = components?.Loading ?? defaultComponents.Loading;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const messagesRef = useRef<HTMLDivElement | null>(null);\n    const footerRef = useRef<HTMLDivElement | null>(null);\n    const bottomMarkerRef = useRef<HTMLDivElement | null>(null);\n    const bottomTrailingMarkerRef = useRef<HTMLDivElement | null>(null);\n    const trailingSpacerRef = useRef<HTMLDivElement | null>(null);\n\n    const [isScrollAtBottom, setScrollAtBottom] = useState<boolean | null>(\n      null\n    );\n    // `useState`'s setter is stable but this is for clarity in the places it's used.\n    const onScrollAtBottomChange = useLatest(setScrollAtBottom);\n    const isScrollIndicatorVisible =\n      messages && isScrollAtBottom !== null ? !isScrollAtBottom : false;\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    const scrollToBottom = useLatest(\n      (behavior: \"instant\" | \"smooth\", includeTrailingSpace = false) => {\n        if (includeTrailingSpace) {\n          // Scroll to the bottom marker to include the trailing space,\n          // and wait for a frame in case the trailing space hasn't\n          // been updated yet. (e.g. when sending a new message)\n          requestAnimationFrame(() => {\n            bottomMarkerRef.current?.scrollIntoView({\n              behavior,\n              block: \"end\",\n            });\n          });\n        } else {\n          // Scroll to the trailing space marker to only scroll to the\n          // bottom of the messages, without including the trailing space.\n          bottomTrailingMarkerRef.current?.scrollIntoView({\n            behavior,\n            block: \"end\",\n          });\n        }\n      }\n    );\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={cn(\n          \"lb-root lb-ai-chat\",\n          layout === \"compact\"\n            ? \"lb-ai-chat:layout-compact\"\n            : \"lb-ai-chat:layout-inset\",\n          className\n        )}\n      >\n        {knowledge\n          ? knowledge.map((source, index) => (\n              <RegisterAiKnowledge\n                key={index}\n                description={source.description}\n                value={source.value}\n                // knowledgeKey={source.knowledgeKey}\n              />\n            ))\n          : null}\n\n        {Object.entries(tools).map(([name, tool]) => (\n          <RegisterAiTool key={name} chatId={chatId} name={name} tool={tool} />\n        ))}\n\n        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <Loading />\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : messages.length === 0 ? (\n            <Empty chatId={chatId} copilotId={copilotId} />\n          ) : (\n            <>\n              <AiChatMessages\n                ref={messagesRef}\n                copilotId={copilotId}\n                messages={messages}\n                overrides={overrides}\n                components={components}\n                lastSentMessageId={lastSentMessageId}\n                scrollToBottom={scrollToBottom}\n                onScrollAtBottomChange={onScrollAtBottomChange}\n                containerRef={containerRef}\n                footerRef={footerRef}\n                messagesRef={messagesRef}\n                bottomTrailingMarkerRef={bottomTrailingMarkerRef}\n                trailingSpacerRef={trailingSpacerRef}\n              />\n\n              {/**\n               * This trailing spacer is used to extend the scrollable area beyond its actual\n               * content, to allow messages to appear at the top of the viewport for example.\n               */}\n              <div\n                ref={trailingSpacerRef}\n                data-trailing-spacer=\"\"\n                style={{\n                  pointerEvents: \"none\",\n                }}\n                aria-hidden\n              />\n            </>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\" ref={footerRef}>\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-root lb-elevation lb-elevation-moderate lb-ai-chat-scroll-indicator\"\n              data-visible={isScrollIndicatorVisible ? \"\" : undefined}\n            >\n              <button\n                className=\"lb-ai-chat-scroll-indicator-button\"\n                tabIndex={isScrollIndicatorVisible ? 0 : -1}\n                aria-hidden={!isScrollIndicatorVisible}\n                onClick={() => scrollToBottom.current(\"smooth\")}\n              >\n                <span className=\"lb-icon-container\">\n                  <ArrowDownIcon />\n                </span>\n              </button>\n            </div>\n          </div>\n          <AiChatComposer\n            key={chatId}\n            chatId={chatId}\n            copilotId={copilotId as CopilotId}\n            overrides={overrides}\n            autoFocus={autoFocus}\n            onUserMessageCreate={({ id }) => setLastSentMessageId(id)}\n            className={\n              layout === \"inset\"\n                ? \"lb-elevation lb-elevation-moderate\"\n                : undefined\n            }\n          />\n        </div>\n\n        {/**\n         * This invisible marker is a trick which allows us to use IntersectionObserver to detect when the\n         * scrollable area is fully scrolled to the bottom instead of manually tracking the scroll position\n         * and having to deal with resizes, etc.\n         *\n         * It's positioned at the bottom of the scrollable area and reliably only becomes \"visible\" to the\n         * IntersectionObserver when the scrollable area is scrolled to the bottom.\n         */}\n        {messages && messages.length > 0 ? (\n          <div\n            ref={bottomMarkerRef}\n            style={{ position: \"sticky\", height: 0 }}\n            aria-hidden\n            data-bottom-marker=\"\"\n          >\n            {/**\n             * This inner marker is absolutely offset by the same distance as the trailing space so its\n             * visibility means the scrollable area is at the bottom of the messages, not the full bottom.\n             */}\n            <div\n              ref={bottomTrailingMarkerRef}\n              style={{\n                position: \"absolute\",\n                height: 0,\n              }}\n              data-bottom-trailing-marker=\"\"\n            />\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n);\n"],"names":["messages"],"mappings":"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"}
+{"version":3,"file":"AiChat.js","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  AiOpaqueToolDefinition,\n  CopilotId,\n  MessageId,\n} from \"@liveblocks/core\";\nimport { RegisterAiTool, useAiChatMessages } from \"@liveblocks/react\";\nimport { useLatest } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  forwardRef,\n  type MutableRefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { SpinnerIcon } from \"../icons/Spinner\";\nimport {\n  type AiChatMessageOverrides,\n  type AiChatOverrides,\n  type AiComposerOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport type { MarkdownComponents } from \"../primitives/Markdown\";\nimport { cn } from \"../utils/cn\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\nimport { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\nimport { AiComposer, type AiComposerProps } from \"./internal/AiComposer\";\n\n/**\n * The minimum number of pixels from the bottom of the scrollable area\n * before showing the scroll to bottom indicator.\n */\nconst MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 60;\n\nexport type AiChatComponentsEmptyProps = {\n  /**\n   * The chat ID provided to the `AiChat` component.\n   */\n  chatId: string;\n\n  /**\n   * The copilot ID provided to the `AiChat` component.\n   */\n  copilotId?: string;\n};\n\nexport type AiChatComponentsLoadingProps = Record<string, never>;\n\nexport type AiChatComponents = {\n  /**\n   * The component used to render the empty state of the chat.\n   */\n  Empty: ComponentType<AiChatComponentsEmptyProps>;\n\n  /**\n   * The component used to render the loading state of the chat.\n   */\n  Loading: ComponentType<AiChatComponentsLoadingProps>;\n\n  /**\n   * The components used to render Markdown content.\n   */\n  markdown?: Partial<MarkdownComponents>;\n};\n\nexport interface AiChatProps extends ComponentProps<\"div\"> {\n  /**\n   * The ID of the chat the composer belongs to.\n   */\n  chatId: string;\n\n  /**\n   * Whether to focus the chat composer on mount.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The ID of the copilot to use to send the message.\n   */\n  copilotId?: string;\n\n  /**\n   * The contextual knowledge to include in the chat. May be used by the\n   * assistant when generating responses. In addition to the knowledge passed\n   * in via this prop, the AiChat instance will also have access to any\n   * globally registered knowledge via <RegisterAiKnowledge />.\n   */\n  knowledge?: AiKnowledgeSource[];\n\n  /**\n   * Tool definitions to make available within this chat. May be used by the assistant when generating responses.\n   */\n  tools?: Record<string, AiOpaqueToolDefinition>;\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: AiComposerProps[\"onComposerSubmit\"];\n\n  /**\n   * The layout of the chat and its composer.\n   */\n  layout?: \"inset\" | \"compact\";\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      AiComposerOverrides &\n      AiChatMessageOverrides &\n      AiChatOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents & AiChatComponents>;\n}\n\ninterface AiChatMessagesProps extends ComponentProps<\"div\"> {\n  messages: NonNullable<ReturnType<typeof useAiChatMessages>[\"messages\"]>;\n  copilotId: AiChatProps[\"copilotId\"];\n  overrides: AiChatProps[\"overrides\"];\n  components: AiChatProps[\"components\"];\n  lastSentMessageId: MessageId | null;\n  scrollToBottom: MutableRefObject<\n    (behavior: \"instant\" | \"smooth\", includeTrailingSpace?: boolean) => void\n  >;\n  onScrollAtBottomChange: MutableRefObject<\n    (isScrollAtBottom: boolean | null) => void\n  >;\n  containerRef: MutableRefObject<HTMLDivElement | null>;\n  footerRef: MutableRefObject<HTMLDivElement | null>;\n  messagesRef: MutableRefObject<HTMLDivElement | null>;\n  bottomTrailingMarkerRef: MutableRefObject<HTMLDivElement | null>;\n  trailingSpacerRef: MutableRefObject<HTMLDivElement | null>;\n}\n\nconst defaultComponents: AiChatComponents = {\n  Empty: () => null,\n  Loading: () => (\n    <div className=\"lb-loading lb-ai-chat-loading\">\n      <SpinnerIcon />\n    </div>\n  ),\n};\n\nconst AiChatMessages = forwardRef<HTMLDivElement, AiChatMessagesProps>(\n  (\n    {\n      messages,\n      copilotId,\n      overrides,\n      components,\n      lastSentMessageId,\n      scrollToBottom,\n      onScrollAtBottomChange,\n      containerRef,\n      footerRef,\n      messagesRef,\n      bottomTrailingMarkerRef,\n      trailingSpacerRef,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const hasLastSentMessage = lastSentMessageId !== null;\n\n    /**\n     * Every time the container, footer, or messages list change size,\n     * we calculate the trailing space that would allow the penultimate\n     * message to be at the top of the viewport, and apply it.\n     *\n     *   ┌─────────────────────────────────────────┐▲   A = The `scroll-margin-top`\n     *   │            ┌─────────────────────────┐  │▼▲  value of the penultimate message\n     *   │            │ The penultimate message │  │ │\n     *   │            └─────────────────────────┘  │ │  B = The height from the top of\n     *   │                                         │ │  the penultimate message to the\n     *   │ ┌─────────────────────────┐             │ │  bottom of the messages list,\n     *   │ │ The last message        │             │ │  including the messages' heights,\n     *   │ └─────────────────────────┘             │ │  and any padding, gap, etc\n     *   │                                         │ │\n     *   ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤▲▼\n     *   │                                         ││   The trailing space needed to\n     *   │    = container height - (A + B + C)     ││   allow the penultimate message\n     *   │                                         ││   to be at the top of the viewport\n     *   ├ ┬─────────────────────────────────────┬ ┤▼▲\n     *   │ │                                     │ │ │\n     *   │ │                                     │ │ │  C = The footer's height,\n     *   │ │                                     │ │ │  including any padding\n     *   │ └─────────────────────────────────────┘ │ │\n     *   └─────────────────────────────────────────┘ ▼\n     */\n    useEffect(\n      () => {\n        if (!hasLastSentMessage) {\n          return;\n        }\n\n        const container = containerRef.current;\n        const footer = footerRef.current;\n        const messages = messagesRef.current;\n\n        if (!container || !footer || !messages) {\n          return;\n        }\n\n        const trailingSpacer = trailingSpacerRef.current;\n        const bottomTrailingMarker = bottomTrailingMarkerRef.current;\n\n        let containerHeight: number | null = null;\n        let footerHeight: number | null = null;\n        let messagesHeight: number | null = null;\n\n        const resetTrailingSpace = () => {\n          trailingSpacer?.style.removeProperty(\"height\");\n          bottomTrailingMarker?.style.removeProperty(\"top\");\n        };\n\n        const resizeObserver = new ResizeObserver((entries) => {\n          if (!trailingSpacer || !bottomTrailingMarker) {\n            return;\n          }\n\n          const lastMessage = messages.lastElementChild;\n          const penultimateMessage = lastMessage?.previousElementSibling;\n\n          // If there's no last pair of messages, there's no need for any trailing space.\n          if (!lastMessage || !penultimateMessage) {\n            resetTrailingSpace();\n            return;\n          }\n\n          // If the container's height is based on its content, the container isn't scrollable and there's no need for any trailing space.\n          if (container.scrollHeight === container.clientHeight) {\n            resetTrailingSpace();\n            return;\n          }\n\n          let updatedContainerHeight: number | null = containerHeight;\n          let updatedFooterHeight: number | null = footerHeight;\n          let updatedMessagesHeight: number | null = messagesHeight;\n\n          for (const entry of entries) {\n            const entryHeight =\n              entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;\n\n            if (entry.target === container) {\n              updatedContainerHeight = entryHeight ?? null;\n            } else if (entry.target === footer) {\n              updatedFooterHeight = entryHeight ?? null;\n            } else if (entry.target === messages) {\n              updatedMessagesHeight = entryHeight ?? null;\n            }\n          }\n\n          // If we don't have all the heights, we can't compute the trailing space.\n          if (\n            updatedContainerHeight === null ||\n            updatedFooterHeight === null ||\n            updatedMessagesHeight === null\n          ) {\n            resetTrailingSpace();\n            return;\n          }\n\n          // If none of the heights have changed, we don't need to do anything.\n          if (\n            updatedContainerHeight === containerHeight &&\n            updatedFooterHeight === footerHeight &&\n            updatedMessagesHeight === messagesHeight\n          ) {\n            return;\n          }\n\n          // Now that we have compared them, we can update the heights.\n          containerHeight = updatedContainerHeight;\n          footerHeight = updatedFooterHeight;\n          messagesHeight = updatedMessagesHeight;\n\n          // A\n          const penultimateMessageScrollMarginTop = Number.parseFloat(\n            getComputedStyle(penultimateMessage as HTMLElement).scrollMarginTop\n          );\n\n          // B\n          const messagesRect = messages.getBoundingClientRect();\n          const penultimateMessageRect =\n            penultimateMessage.getBoundingClientRect();\n          const heightFromPenultimateMessageTopToMessagesListBottom =\n            messagesRect.bottom - penultimateMessageRect.top;\n\n          // A + B + C\n          const differenceHeight =\n            penultimateMessageScrollMarginTop +\n            heightFromPenultimateMessageTopToMessagesListBottom +\n            (footerHeight ?? 0);\n\n          // = container height - (A + B + C)\n          const trailingSpace = Math.max(containerHeight - differenceHeight, 0);\n\n          // Update the trailing space.\n          trailingSpacer.style.height = `${trailingSpace}px`;\n\n          // Offset what \"the bottom\" is to the \"scroll at the bottom\" detection logic,\n          // so that it doesn't include the trailing space.\n          bottomTrailingMarker.style.top = `${-trailingSpace}px`;\n        });\n\n        resizeObserver.observe(container);\n        resizeObserver.observe(footer);\n        resizeObserver.observe(messages);\n\n        return () => {\n          resizeObserver.disconnect();\n          resetTrailingSpace();\n        };\n      },\n      // This effect only uses stable refs.\n      [hasLastSentMessage] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Update the \"scroll at bottom\" state when needed.\n     */\n    useIntersectionCallback(\n      bottomTrailingMarkerRef,\n      (isIntersecting) => {\n        onScrollAtBottomChange.current(isIntersecting);\n      },\n      { root: containerRef, rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR }\n    );\n\n    /**\n     * Instantly scroll to the bottom for the initial state.\n     */\n    useEffect(\n      () => {\n        scrollToBottom.current(\"instant\");\n      },\n      // `scrollToBottom` is a stable ref containing the callback.\n      [] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Scroll to new messages when sending them.\n     */\n    useEffect(\n      () => {\n        if (lastSentMessageId) {\n          scrollToBottom.current(\"smooth\", true);\n        }\n      },\n      // `scrollToBottom` is a stable ref containing the callback.\n      [lastSentMessageId] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    /**\n     * Reset the \"scroll at bottom\" state when the component unmounts.\n     */\n    useEffect(\n      () => {\n        const onScrollAtBottomChangeCallback = onScrollAtBottomChange.current;\n\n        return () => {\n          onScrollAtBottomChangeCallback(null);\n        };\n      },\n      // `onScrollAtBottomChange` is a stable ref containing the callback.\n      [] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    return (\n      <div\n        className={cn(\"lb-ai-chat-messages\", className)}\n        ref={forwardedRef}\n        {...props}\n      >\n        {messages.map((message) => {\n          if (message.role === \"user\") {\n            return (\n              <AiChatUserMessage\n                key={message.id}\n                message={message}\n                overrides={overrides}\n              />\n            );\n          } else if (message.role === \"assistant\") {\n            return (\n              <AiChatAssistantMessage\n                key={message.id}\n                message={message}\n                overrides={overrides}\n                components={components}\n                copilotId={copilotId}\n              />\n            );\n          } else {\n            return null;\n          }\n        })}\n      </div>\n    );\n  }\n);\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledge: localKnowledge,\n      tools = {},\n      onComposerSubmit,\n      layout = \"inset\",\n      components,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const [lastSentMessageId, setLastSentMessageId] =\n      useState<MessageId | null>(null);\n\n    const $ = useOverrides(overrides);\n    const Empty = components?.Empty ?? defaultComponents.Empty;\n    const Loading = components?.Loading ?? defaultComponents.Loading;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const messagesRef = useRef<HTMLDivElement | null>(null);\n    const footerRef = useRef<HTMLDivElement | null>(null);\n    const bottomMarkerRef = useRef<HTMLDivElement | null>(null);\n    const bottomTrailingMarkerRef = useRef<HTMLDivElement | null>(null);\n    const trailingSpacerRef = useRef<HTMLDivElement | null>(null);\n\n    const [isScrollAtBottom, setScrollAtBottom] = useState<boolean | null>(\n      null\n    );\n    // `useState`'s setter is stable but this is for clarity in the places it's used.\n    const onScrollAtBottomChange = useLatest(setScrollAtBottom);\n    const isScrollIndicatorVisible =\n      messages && isScrollAtBottom !== null ? !isScrollAtBottom : false;\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    const scrollToBottom = useLatest(\n      (behavior: \"instant\" | \"smooth\", includeTrailingSpace = false) => {\n        if (includeTrailingSpace) {\n          // Scroll to the bottom marker to include the trailing space,\n          // and wait for a frame in case the trailing space hasn't\n          // been updated yet. (e.g. when sending a new message)\n          requestAnimationFrame(() => {\n            bottomMarkerRef.current?.scrollIntoView({\n              behavior,\n              block: \"end\",\n            });\n          });\n        } else {\n          // Scroll to the trailing space marker to only scroll to the\n          // bottom of the messages, without including the trailing space.\n          bottomTrailingMarkerRef.current?.scrollIntoView({\n            behavior,\n            block: \"end\",\n          });\n        }\n      }\n    );\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={cn(\n          \"lb-root lb-ai-chat\",\n          layout === \"compact\"\n            ? \"lb-ai-chat:layout-compact\"\n            : \"lb-ai-chat:layout-inset\",\n          className\n        )}\n      >\n        {Object.entries(tools).map(([name, tool]) => (\n          <RegisterAiTool key={name} chatId={chatId} name={name} tool={tool} />\n        ))}\n\n        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <Loading />\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : messages.length === 0 ? (\n            <Empty chatId={chatId} copilotId={copilotId} />\n          ) : (\n            <>\n              <AiChatMessages\n                ref={messagesRef}\n                copilotId={copilotId}\n                messages={messages}\n                overrides={overrides}\n                components={components}\n                lastSentMessageId={lastSentMessageId}\n                scrollToBottom={scrollToBottom}\n                onScrollAtBottomChange={onScrollAtBottomChange}\n                containerRef={containerRef}\n                footerRef={footerRef}\n                messagesRef={messagesRef}\n                bottomTrailingMarkerRef={bottomTrailingMarkerRef}\n                trailingSpacerRef={trailingSpacerRef}\n              />\n\n              {/**\n               * This trailing spacer is used to extend the scrollable area beyond its actual\n               * content, to allow messages to appear at the top of the viewport for example.\n               */}\n              <div\n                ref={trailingSpacerRef}\n                data-trailing-spacer=\"\"\n                style={{\n                  pointerEvents: \"none\",\n                }}\n                aria-hidden\n              />\n            </>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\" ref={footerRef}>\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-root lb-elevation lb-elevation-moderate lb-ai-chat-scroll-indicator\"\n              data-visible={isScrollIndicatorVisible ? \"\" : undefined}\n            >\n              <button\n                className=\"lb-ai-chat-scroll-indicator-button\"\n                tabIndex={isScrollIndicatorVisible ? 0 : -1}\n                aria-hidden={!isScrollIndicatorVisible}\n                onClick={() => scrollToBottom.current(\"smooth\")}\n              >\n                <span className=\"lb-icon-container\">\n                  <ArrowDownIcon />\n                </span>\n              </button>\n            </div>\n          </div>\n          <AiComposer\n            key={chatId}\n            chatId={chatId}\n            copilotId={copilotId as CopilotId}\n            overrides={overrides}\n            autoFocus={autoFocus}\n            knowledge={localKnowledge}\n            onComposerSubmit={onComposerSubmit}\n            onComposerSubmitted={({ id }) => setLastSentMessageId(id)}\n            className={cn(\n              \"lb-ai-chat-composer\",\n              layout === \"inset\"\n                ? \"lb-elevation lb-elevation-moderate\"\n                : undefined\n            )}\n          />\n        </div>\n\n        {/**\n         * This invisible marker is a trick which allows us to use IntersectionObserver to detect when the\n         * scrollable area is fully scrolled to the bottom instead of manually tracking the scroll position\n         * and having to deal with resizes, etc.\n         *\n         * It's positioned at the bottom of the scrollable area and reliably only becomes \"visible\" to the\n         * IntersectionObserver when the scrollable area is scrolled to the bottom.\n         */}\n        {messages && messages.length > 0 ? (\n          <div\n            ref={bottomMarkerRef}\n            style={{ position: \"sticky\", height: 0 }}\n            aria-hidden\n            data-bottom-marker=\"\"\n          >\n            {/**\n             * This inner marker is absolutely offset by the same distance as the trailing space so its\n             * visibility means the scrollable area is at the bottom of the messages, not the full bottom.\n             */}\n            <div\n              ref={bottomTrailingMarkerRef}\n              style={{\n                position: \"absolute\",\n                height: 0,\n              }}\n              data-bottom-trailing-marker=\"\"\n            />\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n);\n"],"names":["messages"],"mappings":"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"}

package/dist/components/Thread.cjs

@@ -52,6 +52,7 @@ const Thread = react.forwardRef(
     showComposer = "collapsed",
     showAttachments = true,
     showComposerFormattingControls = true,
+    maxVisibleComments,
     onResolvedChange,
     onCommentEdit,
     onCommentDelete,
@@ -69,12 +70,53 @@ const Thread = react.forwardRef(
     const markThreadAsResolved = _private.useMarkRoomThreadAsResolved(thread.roomId);
     const markThreadAsUnresolved = _private.useMarkRoomThreadAsUnresolved(thread.roomId);
     const $ = overrides.useOverrides(overrides$1);
+    const [showAllComments, setShowAllComments] = react.useState(false);
     const firstCommentIndex = react.useMemo(() => {
       return showDeletedComments ? 0 : thread.comments.findIndex((comment) => comment.body);
     }, [showDeletedComments, thread.comments]);
     const lastCommentIndex = react.useMemo(() => {
       return showDeletedComments ? thread.comments.length - 1 : findLastIndex.findLastIndex(thread.comments, (comment) => comment.body);
     }, [showDeletedComments, thread.comments]);
+    const hiddenComments = react.useMemo(() => {
+      const maxVisibleCommentsCount = typeof maxVisibleComments === "number" ? maxVisibleComments : maxVisibleComments?.max;
+      const visibleCommentsShow = (typeof maxVisibleComments === "object" ? maxVisibleComments?.show : void 0) ?? "newest";
+      if (showAllComments || maxVisibleCommentsCount === void 0) {
+        return;
+      }
+      const comments = thread.comments.map((comment, index) => ({ comment, index })).filter(({ comment }) => showDeletedComments || comment.body);
+      if (comments.length <= Math.max(maxVisibleCommentsCount, 2)) {
+        return;
+      }
+      const firstVisibleComment = comments[0];
+      const lastVisibleComment = comments[comments.length - 1];
+      if (maxVisibleCommentsCount <= 2) {
+        const firstHiddenCommentIndex = comments[1]?.index ?? firstVisibleComment.index;
+        const lastHiddenCommentIndex = comments[comments.length - 2]?.index ?? lastVisibleComment.index;
+        return {
+          firstIndex: firstHiddenCommentIndex,
+          lastIndex: lastHiddenCommentIndex,
+          count: comments.slice(1, comments.length - 1).length
+        };
+      }
+      const remainingVisibleCommentsCount = maxVisibleCommentsCount - 2;
+      const beforeVisibleCommentsCount = visibleCommentsShow === "oldest" ? remainingVisibleCommentsCount : visibleCommentsShow === "newest" ? 0 : Math.floor(remainingVisibleCommentsCount / 2);
+      const afterVisibleCommentsCount = visibleCommentsShow === "oldest" ? 0 : visibleCommentsShow === "newest" ? remainingVisibleCommentsCount : Math.ceil(remainingVisibleCommentsCount / 2);
+      const firstHiddenComment = comments[1 + beforeVisibleCommentsCount];
+      const lastHiddenComment = comments[comments.length - 2 - afterVisibleCommentsCount];
+      if (!firstHiddenComment || !lastHiddenComment || firstHiddenComment.index > lastHiddenComment.index) {
+        return;
+      }
+      return {
+        firstIndex: firstHiddenComment.index,
+        lastIndex: lastHiddenComment.index,
+        count: thread.comments.slice(firstHiddenComment.index, lastHiddenComment.index + 1).filter((comment) => showDeletedComments || comment.body).length
+      };
+    }, [
+      maxVisibleComments,
+      showAllComments,
+      showDeletedComments,
+      thread.comments
+    ]);
     const {
       status: subscriptionStatus,
       unreadSince,
@@ -166,6 +208,22 @@ const Thread = react.forwardRef(
             children: thread.comments.map((comment, index) => {
               const isFirstComment = index === firstCommentIndex;
               const isUnread = unreadIndex !== void 0 && index >= unreadIndex;
+              const isHidden = hiddenComments && index >= hiddenComments.firstIndex && index <= hiddenComments.lastIndex;
+              const isFirstHiddenComment = isHidden && index === hiddenComments.firstIndex;
+              if (isFirstHiddenComment) {
+                return /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  className: "lb-thread-show-more",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                    variant: "ghost",
+                    className: "lb-thread-show-more-button",
+                    onClick: () => setShowAllComments(true),
+                    children: $.THREAD_SHOW_MORE_COMMENTS(hiddenComments.count)
+                  })
+                }, `${comment.id}-show-more`);
+              }
+              if (isHidden) {
+                return null;
+              }
               const children = /* @__PURE__ */ jsxRuntime.jsx(Comment.Comment, {
                 overrides: overrides$1,
                 className: "lb-thread-comment",

package/dist/components/Thread.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Thread.cjs","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type BaseMetadata,\n  type CommentData,\n  type DM,\n  Permission,\n  type ThreadData,\n} from \"@liveblocks/core\";\nimport {\n  useMarkRoomThreadAsResolved,\n  useMarkRoomThreadAsUnresolved,\n  useRoomPermissions,\n  useRoomThreadSubscription,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\nimport { CheckCircleIcon } from \"../icons/CheckCircle\";\nimport { CheckCircleFillIcon } from \"../icons/CheckCircleFill\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { findLastIndex } from \"../utils/find-last-index\";\nimport type { CommentProps } from \"./Comment\";\nimport { Comment } from \"./Comment\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { DropdownItem } from \"./internal/Dropdown\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\nexport interface ThreadProps<M extends BaseMetadata = DM>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The thread to display.\n   */\n  thread: ThreadData<M>;\n\n  /**\n   * How to show or hide the composer to reply to the thread.\n   */\n  showComposer?: boolean | \"collapsed\";\n\n  /**\n   * Whether to show the action to resolve the thread.\n   */\n  showResolveAction?: boolean;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: CommentProps[\"showActions\"];\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: CommentProps[\"showReactions\"];\n\n  /**\n   * Whether to show the composer's formatting controls.\n   */\n  showComposerFormattingControls?: ComposerProps[\"showFormattingControls\"];\n\n  /**\n   * Whether to blur the composer editor when the composer is submitted.\n   */\n  blurComposerOnSubmit?: ComposerProps[\"blurOnSubmit\"];\n\n  /**\n   * Whether to indent the comments' content.\n   */\n  indentCommentContent?: CommentProps[\"indentContent\"];\n\n  /**\n   * Whether to show deleted comments.\n   */\n  showDeletedComments?: CommentProps[\"showDeleted\"];\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * The event handler called when changing the resolved status.\n   */\n  onResolvedChange?: (resolved: boolean) => void;\n\n  /**\n   * The event handler called when a comment is edited.\n   */\n  onCommentEdit?: CommentProps[\"onCommentEdit\"];\n\n  /**\n   * The event handler called when a comment is deleted.\n   */\n  onCommentDelete?: CommentProps[\"onCommentDelete\"];\n\n  /**\n   * The event handler called when the thread is deleted.\n   * A thread is deleted when all its comments are deleted.\n   */\n  onThreadDelete?: (thread: ThreadData<M>) => void;\n\n  /**\n   * The event handler called when clicking on a comment's author.\n   */\n  onAuthorClick?: CommentProps[\"onAuthorClick\"];\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: CommentProps[\"onMentionClick\"];\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: ComposerProps[\"onComposerSubmit\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\n/**\n * Displays a thread of comments, with a composer to reply\n * to it.\n *\n * @example\n * <>\n *   {threads.map((thread) => (\n *     <Thread key={thread.id} thread={thread} />\n *   ))}\n * </>\n */\nexport const Thread = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      thread,\n      indentCommentContent = true,\n      showActions = \"hover\",\n      showDeletedComments,\n      showResolveAction = true,\n      showReactions = true,\n      showComposer = \"collapsed\",\n      showAttachments = true,\n      showComposerFormattingControls = true,\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onComposerSubmit,\n      blurComposerOnSubmit,\n      overrides,\n      components,\n      className,\n      ...props\n    }: ThreadProps<M>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const markThreadAsResolved = useMarkRoomThreadAsResolved(thread.roomId);\n    const markThreadAsUnresolved = useMarkRoomThreadAsUnresolved(thread.roomId);\n    const $ = useOverrides(overrides);\n    const firstCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? 0\n        : thread.comments.findIndex((comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const lastCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? thread.comments.length - 1\n        : findLastIndex(thread.comments, (comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const {\n      status: subscriptionStatus,\n      unreadSince,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const unreadIndex = useMemo(() => {\n      // The user is not subscribed to this thread.\n      if (subscriptionStatus !== \"subscribed\") {\n        return;\n      }\n\n      // The user hasn't read the thread yet, so all comments are unread.\n      if (unreadSince === null) {\n        return firstCommentIndex;\n      }\n\n      // The user has read the thread, so we find the first unread comment.\n      const unreadIndex = thread.comments.findIndex(\n        (comment) =>\n          (showDeletedComments ? true : comment.body) &&\n          comment.createdAt > unreadSince\n      );\n\n      return unreadIndex >= 0 && unreadIndex < thread.comments.length\n        ? unreadIndex\n        : undefined;\n    }, [\n      firstCommentIndex,\n      showDeletedComments,\n      subscriptionStatus,\n      thread.comments,\n      unreadSince,\n    ]);\n    const [newIndex, setNewIndex] = useState<number>();\n    const newIndicatorIndex = newIndex === undefined ? unreadIndex : newIndex;\n\n    useEffect(() => {\n      if (unreadIndex) {\n        // Keep the \"new\" indicator at the lowest unread index.\n        setNewIndex((persistedUnreadIndex) =>\n          Math.min(persistedUnreadIndex ?? Infinity, unreadIndex)\n        );\n      }\n    }, [unreadIndex]);\n\n    const permissions = useRoomPermissions(thread.roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : true;\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const handleResolvedChange = useCallback(\n      (resolved: boolean) => {\n        onResolvedChange?.(resolved);\n\n        if (resolved) {\n          markThreadAsResolved(thread.id);\n        } else {\n          markThreadAsUnresolved(thread.id);\n        }\n      },\n      [\n        markThreadAsResolved,\n        markThreadAsUnresolved,\n        onResolvedChange,\n        thread.id,\n      ]\n    );\n\n    const handleCommentDelete = useCallback(\n      (comment: CommentData) => {\n        onCommentDelete?.(comment);\n\n        const filteredComments = thread.comments.filter(\n          (comment) => comment.body\n        );\n\n        if (filteredComments.length <= 1) {\n          onThreadDelete?.(thread);\n        }\n      },\n      [onCommentDelete, onThreadDelete, thread]\n    );\n\n    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\n            \"lb-root lb-thread\",\n            showActions === \"hover\" && \"lb-thread:show-actions-hover\",\n            className\n          )}\n          data-resolved={thread.resolved ? \"\" : undefined}\n          data-unread={unreadIndex !== undefined ? \"\" : undefined}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n        >\n          <div className=\"lb-thread-comments\">\n            {thread.comments.map((comment, index) => {\n              const isFirstComment = index === firstCommentIndex;\n              const isUnread =\n                unreadIndex !== undefined && index >= unreadIndex;\n\n              const children = (\n                <Comment\n                  key={comment.id}\n                  overrides={overrides}\n                  className=\"lb-thread-comment\"\n                  data-unread={isUnread ? \"\" : undefined}\n                  comment={comment}\n                  indentContent={indentCommentContent}\n                  showDeleted={showDeletedComments}\n                  showActions={showActions}\n                  showReactions={showReactions}\n                  showAttachments={showAttachments}\n                  showComposerFormattingControls={\n                    showComposerFormattingControls\n                  }\n                  onCommentEdit={onCommentEdit}\n                  onCommentDelete={handleCommentDelete}\n                  onAuthorClick={onAuthorClick}\n                  onMentionClick={onMentionClick}\n                  onAttachmentClick={onAttachmentClick}\n                  components={components}\n                  autoMarkReadThreadId={\n                    index === lastCommentIndex && isUnread\n                      ? thread.id\n                      : undefined\n                  }\n                  additionalActionsClassName={\n                    isFirstComment ? \"lb-thread-actions\" : undefined\n                  }\n                  additionalActions={\n                    isFirstComment && showResolveAction ? (\n                      <Tooltip\n                        content={\n                          thread.resolved\n                            ? $.THREAD_UNRESOLVE\n                            : $.THREAD_RESOLVE\n                        }\n                      >\n                        <TogglePrimitive.Root\n                          pressed={thread.resolved}\n                          onPressedChange={handleResolvedChange}\n                          asChild\n                        >\n                          <Button\n                            className=\"lb-comment-action\"\n                            onClick={stopPropagation}\n                            aria-label={\n                              thread.resolved\n                                ? $.THREAD_UNRESOLVE\n                                : $.THREAD_RESOLVE\n                            }\n                            icon={\n                              thread.resolved ? (\n                                <CheckCircleFillIcon />\n                              ) : (\n                                <CheckCircleIcon />\n                              )\n                            }\n                            disabled={!canComment}\n                          />\n                        </TogglePrimitive.Root>\n                      </Tooltip>\n                    ) : null\n                  }\n                  additionalDropdownItemsBefore={\n                    isFirstComment ? (\n                      <DropdownItem\n                        onSelect={handleSubscribeChange}\n                        onClick={stopPropagation}\n                        icon={\n                          subscriptionStatus === \"subscribed\" ? (\n                            <BellCrossedIcon />\n                          ) : (\n                            <BellIcon />\n                          )\n                        }\n                      >\n                        {subscriptionStatus === \"subscribed\"\n                          ? $.THREAD_UNSUBSCRIBE\n                          : $.THREAD_SUBSCRIBE}\n                      </DropdownItem>\n                    ) : null\n                  }\n                />\n              );\n\n              return index === newIndicatorIndex &&\n                newIndicatorIndex !== firstCommentIndex &&\n                newIndicatorIndex <= lastCommentIndex ? (\n                <Fragment key={comment.id}>\n                  <div\n                    className=\"lb-thread-new-indicator\"\n                    aria-label={$.THREAD_NEW_INDICATOR_DESCRIPTION}\n                  >\n                    <span className=\"lb-thread-new-indicator-label\">\n                      <ArrowDownIcon className=\"lb-thread-new-indicator-label-icon\" />\n                      {$.THREAD_NEW_INDICATOR}\n                    </span>\n                  </div>\n                  {children}\n                </Fragment>\n              ) : (\n                children\n              );\n            })}\n          </div>\n          {showComposer && (\n            <Composer\n              className=\"lb-thread-composer\"\n              threadId={thread.id}\n              defaultCollapsed={showComposer === \"collapsed\" ? true : undefined}\n              showAttachments={showAttachments}\n              showFormattingControls={showComposerFormattingControls}\n              onComposerSubmit={onComposerSubmit}\n              blurOnSubmit={blurComposerOnSubmit}\n              overrides={{\n                COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,\n                COMPOSER_SEND: $.THREAD_COMPOSER_SEND,\n                ...overrides,\n              }}\n              roomId={thread.roomId}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ThreadProps<M> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2KO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACG;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACE;AAEuD;AAEzD;AACE;AAE4D;AAE9D;AAAM;AACI;AACR;AACA;AACA;AAEF;AAEE;AACE;AAAA;AAIF;AACE;AAAO;AAIT;AAAoC;AAGZ;AAGxB;AAEI;AACH;AACD;AACA;AACA;AACO;AACP;AAEF;AACA;AAEA;AACE;AAEE;AAAA;AACwD;AACxD;AACF;AAGF;AACA;AAMA;AACE;AAAsB;AAGxB;AAA6B;AAEzB;AAEA;AACE;AAA8B;AAE9B;AAAgC;AAClC;AACF;AACA;AACE;AACA;AACA;AACO;AACT;AAGF;AAA4B;AAExB;AAEA;AAAyC;AAClB;AAGvB;AACE;AAAuB;AACzB;AACF;AACwC;AAG1C;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AACG;AACE;AACY;AACT;AAC2B;AAC3B;AACF;AACsC;AACQ;AACvC;AACH;AACC;AAEL;AAAC;AAAc;AAEX;AACA;AAGA;AACG;AAEC;AACU;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACA;AAGA;AACiB;AACjB;AACA;AACA;AACA;AAIM;AAGmC;AAIpC;AAIS;AAGP;AACiB;AACC;AACV;AAEN;AACW;AACD;AAID;AAMa;AAGV;AACb;AACF;AAEA;AAID;AACW;AACD;AAKK;AAMR;AAEN;AAKV;AAGG;AACC;AAAC;AACW;AACI;AAEb;AAAe;AACd;AAAC;AAAwB;AAAqC;AAC3D;AAAA;AACL;AACF;AACC;AAAA;AAGH;AAEH;AACH;AAEG;AACW;AACO;AACuC;AACxD;AACwB;AACxB;AACc;AACH;AACe;AACP;AACd;AACL;AACe;AACjB;AAAA;AAEJ;AACF;AAGN;;"}
+{"version":3,"file":"Thread.cjs","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type BaseMetadata,\n  type CommentData,\n  type DM,\n  Permission,\n  type ThreadData,\n} from \"@liveblocks/core\";\nimport {\n  useMarkRoomThreadAsResolved,\n  useMarkRoomThreadAsUnresolved,\n  useRoomPermissions,\n  useRoomThreadSubscription,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\nimport { CheckCircleIcon } from \"../icons/CheckCircle\";\nimport { CheckCircleFillIcon } from \"../icons/CheckCircleFill\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { findLastIndex } from \"../utils/find-last-index\";\nimport type { CommentProps } from \"./Comment\";\nimport { Comment } from \"./Comment\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { DropdownItem } from \"./internal/Dropdown\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\nexport interface ThreadProps<M extends BaseMetadata = DM>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The thread to display.\n   */\n  thread: ThreadData<M>;\n\n  /**\n   * How to show or hide the composer to reply to the thread.\n   */\n  showComposer?: boolean | \"collapsed\";\n\n  /**\n   * Whether to show the action to resolve the thread.\n   */\n  showResolveAction?: boolean;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: CommentProps[\"showActions\"];\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: CommentProps[\"showReactions\"];\n\n  /**\n   * Whether to show the composer's formatting controls.\n   */\n  showComposerFormattingControls?: ComposerProps[\"showFormattingControls\"];\n\n  /**\n   * The maximum number of comments to show.\n   *\n   * The first and last comments are always shown and by default if some comments\n   * are hidden, only the first comment will be shown before the \"show more\" button\n   * and after it will be shown all the newest comments to fit the limit set.\n   *\n   * It's possible to customize this by setting `maxVisibleComments` to an object:\n   *\n   * @example\n   * // Only show the last comment, and all the older ones to fit the limit.\n   * <Thread maxVisibleComments={{ max: 5, show: \"oldest\" }} />\n   *\n   * @example\n   * // Show as many old comments as new ones to fit the limit.\n   * <Thread maxVisibleComments={{ max: 5, show: \"both\" }} />\n   */\n  maxVisibleComments?:\n    | number\n    | { max: number; show: \"oldest\" | \"both\" | \"newest\" };\n\n  /**\n   * Whether to blur the composer editor when the composer is submitted.\n   */\n  blurComposerOnSubmit?: ComposerProps[\"blurOnSubmit\"];\n\n  /**\n   * Whether to indent the comments' content.\n   */\n  indentCommentContent?: CommentProps[\"indentContent\"];\n\n  /**\n   * Whether to show deleted comments.\n   */\n  showDeletedComments?: CommentProps[\"showDeleted\"];\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * The event handler called when changing the resolved status.\n   */\n  onResolvedChange?: (resolved: boolean) => void;\n\n  /**\n   * The event handler called when a comment is edited.\n   */\n  onCommentEdit?: CommentProps[\"onCommentEdit\"];\n\n  /**\n   * The event handler called when a comment is deleted.\n   */\n  onCommentDelete?: CommentProps[\"onCommentDelete\"];\n\n  /**\n   * The event handler called when the thread is deleted.\n   * A thread is deleted when all its comments are deleted.\n   */\n  onThreadDelete?: (thread: ThreadData<M>) => void;\n\n  /**\n   * The event handler called when clicking on a comment's author.\n   */\n  onAuthorClick?: CommentProps[\"onAuthorClick\"];\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: CommentProps[\"onMentionClick\"];\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: ComposerProps[\"onComposerSubmit\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\n/**\n * Displays a thread of comments, with a composer to reply\n * to it.\n *\n * @example\n * <>\n *   {threads.map((thread) => (\n *     <Thread key={thread.id} thread={thread} />\n *   ))}\n * </>\n */\nexport const Thread = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      thread,\n      indentCommentContent = true,\n      showActions = \"hover\",\n      showDeletedComments,\n      showResolveAction = true,\n      showReactions = true,\n      showComposer = \"collapsed\",\n      showAttachments = true,\n      showComposerFormattingControls = true,\n      maxVisibleComments,\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onComposerSubmit,\n      blurComposerOnSubmit,\n      overrides,\n      components,\n      className,\n      ...props\n    }: ThreadProps<M>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const markThreadAsResolved = useMarkRoomThreadAsResolved(thread.roomId);\n    const markThreadAsUnresolved = useMarkRoomThreadAsUnresolved(thread.roomId);\n    const $ = useOverrides(overrides);\n    const [showAllComments, setShowAllComments] = useState(false);\n    const firstCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? 0\n        : thread.comments.findIndex((comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const lastCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? thread.comments.length - 1\n        : findLastIndex(thread.comments, (comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const hiddenComments = useMemo(() => {\n      const maxVisibleCommentsCount =\n        typeof maxVisibleComments === \"number\"\n          ? maxVisibleComments\n          : maxVisibleComments?.max;\n      const visibleCommentsShow =\n        (typeof maxVisibleComments === \"object\"\n          ? maxVisibleComments?.show\n          : undefined) ?? \"newest\";\n\n      // If we explicitly want to show all comments or there's no limit set,\n      // no need to hide any comments.\n      if (showAllComments || maxVisibleCommentsCount === undefined) {\n        return;\n      }\n\n      const comments = thread.comments\n        .map((comment, index) => ({ comment, index }))\n        .filter(({ comment }) => showDeletedComments || comment.body);\n\n      // There aren't enough comments so no need to hide any.\n      if (comments.length <= Math.max(maxVisibleCommentsCount, 2)) {\n        return;\n      }\n\n      const firstVisibleComment = comments[0]!;\n      const lastVisibleComment = comments[comments.length - 1]!;\n\n      // Always show the first and last comments even if the limit is set to lower than 2.\n      if (maxVisibleCommentsCount <= 2) {\n        const firstHiddenCommentIndex =\n          comments[1]?.index ?? firstVisibleComment.index;\n        const lastHiddenCommentIndex =\n          comments[comments.length - 2]?.index ?? lastVisibleComment.index;\n\n        return {\n          firstIndex: firstHiddenCommentIndex,\n          lastIndex: lastHiddenCommentIndex,\n          count: comments.slice(1, comments.length - 1).length,\n        };\n      }\n\n      const remainingVisibleCommentsCount = maxVisibleCommentsCount - 2;\n\n      // Split the remaining visible comments before, after, or equally.\n      const beforeVisibleCommentsCount =\n        visibleCommentsShow === \"oldest\"\n          ? remainingVisibleCommentsCount\n          : visibleCommentsShow === \"newest\"\n            ? 0\n            : Math.floor(remainingVisibleCommentsCount / 2);\n      const afterVisibleCommentsCount =\n        visibleCommentsShow === \"oldest\"\n          ? 0\n          : visibleCommentsShow === \"newest\"\n            ? remainingVisibleCommentsCount\n            : Math.ceil(remainingVisibleCommentsCount / 2);\n\n      // The first comment is always visible so `+ 1` to skip it.\n      const firstHiddenComment = comments[1 + beforeVisibleCommentsCount];\n      // The last comment is always visible so `- 2` to skip it.\n      const lastHiddenComment =\n        comments[comments.length - 2 - afterVisibleCommentsCount];\n\n      // There aren't any comments to hide besides the first and last ones.\n      if (\n        !firstHiddenComment ||\n        !lastHiddenComment ||\n        firstHiddenComment.index > lastHiddenComment.index\n      ) {\n        return;\n      }\n\n      return {\n        firstIndex: firstHiddenComment.index,\n        lastIndex: lastHiddenComment.index,\n        count: thread.comments\n          .slice(firstHiddenComment.index, lastHiddenComment.index + 1)\n          .filter((comment) => showDeletedComments || comment.body).length,\n      };\n    }, [\n      maxVisibleComments,\n      showAllComments,\n      showDeletedComments,\n      thread.comments,\n    ]);\n    const {\n      status: subscriptionStatus,\n      unreadSince,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const unreadIndex = useMemo(() => {\n      // The user is not subscribed to this thread.\n      if (subscriptionStatus !== \"subscribed\") {\n        return;\n      }\n\n      // The user hasn't read the thread yet, so all comments are unread.\n      if (unreadSince === null) {\n        return firstCommentIndex;\n      }\n\n      // The user has read the thread, so we find the first unread comment.\n      const unreadIndex = thread.comments.findIndex(\n        (comment) =>\n          (showDeletedComments ? true : comment.body) &&\n          comment.createdAt > unreadSince\n      );\n\n      return unreadIndex >= 0 && unreadIndex < thread.comments.length\n        ? unreadIndex\n        : undefined;\n    }, [\n      firstCommentIndex,\n      showDeletedComments,\n      subscriptionStatus,\n      thread.comments,\n      unreadSince,\n    ]);\n    const [newIndex, setNewIndex] = useState<number>();\n    const newIndicatorIndex = newIndex === undefined ? unreadIndex : newIndex;\n\n    useEffect(() => {\n      if (unreadIndex) {\n        // Keep the \"new\" indicator at the lowest unread index.\n        setNewIndex((persistedUnreadIndex) =>\n          Math.min(persistedUnreadIndex ?? Infinity, unreadIndex)\n        );\n      }\n    }, [unreadIndex]);\n\n    const permissions = useRoomPermissions(thread.roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : true;\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const handleResolvedChange = useCallback(\n      (resolved: boolean) => {\n        onResolvedChange?.(resolved);\n\n        if (resolved) {\n          markThreadAsResolved(thread.id);\n        } else {\n          markThreadAsUnresolved(thread.id);\n        }\n      },\n      [\n        markThreadAsResolved,\n        markThreadAsUnresolved,\n        onResolvedChange,\n        thread.id,\n      ]\n    );\n\n    const handleCommentDelete = useCallback(\n      (comment: CommentData) => {\n        onCommentDelete?.(comment);\n\n        const filteredComments = thread.comments.filter(\n          (comment) => comment.body\n        );\n\n        if (filteredComments.length <= 1) {\n          onThreadDelete?.(thread);\n        }\n      },\n      [onCommentDelete, onThreadDelete, thread]\n    );\n\n    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\n            \"lb-root lb-thread\",\n            showActions === \"hover\" && \"lb-thread:show-actions-hover\",\n            className\n          )}\n          data-resolved={thread.resolved ? \"\" : undefined}\n          data-unread={unreadIndex !== undefined ? \"\" : undefined}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n        >\n          <div className=\"lb-thread-comments\">\n            {thread.comments.map((comment, index) => {\n              const isFirstComment = index === firstCommentIndex;\n              const isUnread =\n                unreadIndex !== undefined && index >= unreadIndex;\n              const isHidden =\n                hiddenComments &&\n                index >= hiddenComments.firstIndex &&\n                index <= hiddenComments.lastIndex;\n              const isFirstHiddenComment =\n                isHidden && index === hiddenComments.firstIndex;\n\n              if (isFirstHiddenComment) {\n                return (\n                  <div\n                    key={`${comment.id}-show-more`}\n                    className=\"lb-thread-show-more\"\n                  >\n                    <Button\n                      variant=\"ghost\"\n                      className=\"lb-thread-show-more-button\"\n                      onClick={() => setShowAllComments(true)}\n                    >\n                      {$.THREAD_SHOW_MORE_COMMENTS(hiddenComments.count)}\n                    </Button>\n                  </div>\n                );\n              }\n\n              if (isHidden) {\n                return null;\n              }\n\n              const children = (\n                <Comment\n                  key={comment.id}\n                  overrides={overrides}\n                  className=\"lb-thread-comment\"\n                  data-unread={isUnread ? \"\" : undefined}\n                  comment={comment}\n                  indentContent={indentCommentContent}\n                  showDeleted={showDeletedComments}\n                  showActions={showActions}\n                  showReactions={showReactions}\n                  showAttachments={showAttachments}\n                  showComposerFormattingControls={\n                    showComposerFormattingControls\n                  }\n                  onCommentEdit={onCommentEdit}\n                  onCommentDelete={handleCommentDelete}\n                  onAuthorClick={onAuthorClick}\n                  onMentionClick={onMentionClick}\n                  onAttachmentClick={onAttachmentClick}\n                  components={components}\n                  autoMarkReadThreadId={\n                    index === lastCommentIndex && isUnread\n                      ? thread.id\n                      : undefined\n                  }\n                  additionalActionsClassName={\n                    isFirstComment ? \"lb-thread-actions\" : undefined\n                  }\n                  additionalActions={\n                    isFirstComment && showResolveAction ? (\n                      <Tooltip\n                        content={\n                          thread.resolved\n                            ? $.THREAD_UNRESOLVE\n                            : $.THREAD_RESOLVE\n                        }\n                      >\n                        <TogglePrimitive.Root\n                          pressed={thread.resolved}\n                          onPressedChange={handleResolvedChange}\n                          asChild\n                        >\n                          <Button\n                            className=\"lb-comment-action\"\n                            onClick={stopPropagation}\n                            aria-label={\n                              thread.resolved\n                                ? $.THREAD_UNRESOLVE\n                                : $.THREAD_RESOLVE\n                            }\n                            icon={\n                              thread.resolved ? (\n                                <CheckCircleFillIcon />\n                              ) : (\n                                <CheckCircleIcon />\n                              )\n                            }\n                            disabled={!canComment}\n                          />\n                        </TogglePrimitive.Root>\n                      </Tooltip>\n                    ) : null\n                  }\n                  additionalDropdownItemsBefore={\n                    isFirstComment ? (\n                      <DropdownItem\n                        onSelect={handleSubscribeChange}\n                        onClick={stopPropagation}\n                        icon={\n                          subscriptionStatus === \"subscribed\" ? (\n                            <BellCrossedIcon />\n                          ) : (\n                            <BellIcon />\n                          )\n                        }\n                      >\n                        {subscriptionStatus === \"subscribed\"\n                          ? $.THREAD_UNSUBSCRIBE\n                          : $.THREAD_SUBSCRIBE}\n                      </DropdownItem>\n                    ) : null\n                  }\n                />\n              );\n\n              return index === newIndicatorIndex &&\n                newIndicatorIndex !== firstCommentIndex &&\n                newIndicatorIndex <= lastCommentIndex ? (\n                <Fragment key={comment.id}>\n                  <div\n                    className=\"lb-thread-new-indicator\"\n                    aria-label={$.THREAD_NEW_INDICATOR_DESCRIPTION}\n                  >\n                    <span className=\"lb-thread-new-indicator-label\">\n                      <ArrowDownIcon className=\"lb-thread-new-indicator-label-icon\" />\n                      {$.THREAD_NEW_INDICATOR}\n                    </span>\n                  </div>\n                  {children}\n                </Fragment>\n              ) : (\n                children\n              );\n            })}\n          </div>\n          {showComposer && (\n            <Composer\n              className=\"lb-thread-composer\"\n              threadId={thread.id}\n              defaultCollapsed={showComposer === \"collapsed\" ? true : undefined}\n              showAttachments={showAttachments}\n              showFormattingControls={showComposerFormattingControls}\n              onComposerSubmit={onComposerSubmit}\n              blurOnSubmit={blurComposerOnSubmit}\n              overrides={{\n                COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,\n                COMPOSER_SEND: $.THREAD_COMPOSER_SEND,\n                ...overrides,\n              }}\n              roomId={thread.roomId}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ThreadProps<M> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgMO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACG;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACE;AAEuD;AAEzD;AACE;AAE4D;AAE9D;AACE;AAIA;AAOA;AACE;AAAA;AAGF;AAKA;AACE;AAAA;AAGF;AACA;AAGA;AACE;AAEA;AAGA;AAAO;AACO;AACD;AACmC;AAChD;AAGF;AAGA;AAMA;AAQA;AAEA;AAIA;AAKE;AAAA;AAGF;AAAO;AAC0B;AACF;AAG+B;AAC9D;AACC;AACD;AACA;AACA;AACO;AAET;AAAM;AACI;AACR;AACA;AACA;AAEF;AAEE;AACE;AAAA;AAIF;AACE;AAAO;AAIT;AAAoC;AAGZ;AAGxB;AAEI;AACH;AACD;AACA;AACA;AACO;AACP;AAEF;AACA;AAEA;AACE;AAEE;AAAA;AACwD;AACxD;AACF;AAGF;AACA;AAMA;AACE;AAAsB;AAGxB;AAA6B;AAEzB;AAEA;AACE;AAA8B;AAE9B;AAAgC;AAClC;AACF;AACA;AACE;AACA;AACA;AACO;AACT;AAGF;AAA4B;AAExB;AAEA;AAAyC;AAClB;AAGvB;AACE;AAAuB;AACzB;AACF;AACwC;AAG1C;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AACG;AACE;AACY;AACT;AAC2B;AAC3B;AACF;AACsC;AACQ;AACvC;AACH;AACC;AAEL;AAAC;AAAc;AAEX;AACA;AAEA;AAIA;AAGA;AACE;AACG;AAEW;AAET;AACS;AACE;AAC4B;AAEW;AACnD;AACF;AAIJ;AACE;AAAO;AAGT;AACG;AAEC;AACU;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACA;AAGA;AACiB;AACjB;AACA;AACA;AACA;AAIM;AAGmC;AAIpC;AAIS;AAGP;AACiB;AACC;AACV;AAEN;AACW;AACD;AAID;AAMa;AAGV;AACb;AACF;AAEA;AAID;AACW;AACD;AAKK;AAMR;AAEN;AAKV;AAGG;AACC;AAAC;AACW;AACI;AAEb;AAAe;AACd;AAAC;AAAwB;AAAqC;AAC3D;AAAA;AACL;AACF;AACC;AAAA;AAGH;AAEH;AACH;AAEG;AACW;AACO;AACuC;AACxD;AACwB;AACxB;AACc;AACH;AACe;AACP;AACd;AACL;AACe;AACjB;AAAA;AAEJ;AACF;AAGN;;"}