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

package/dist/components/AiChat.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiChat.cjs","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  ClientToolDefinition,\n  CopilotId,\n  UiChatMessage,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport { useAiChatMessages, useClient } from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\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 { classNames } from \"../utils/class-names\";\nimport { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatComposer } from \"./internal/AiChatComposer\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\n\n/**\n * The number of pixels from the bottom of the messages list to trigger the scroll to bottom.\n */\nconst MIN_DISTANCE_TO_BOTTOM = 50;\n\nexport interface AiChatProps extends ComponentProps<\"div\"> {\n  /**\n   * The id of the chat the composer belongs to.\n   */\n  chatId: string;\n  /**\n   * Whether to focus the chat composer on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * The id of the copilot to use to send the message.\n   */\n  copilotId?: string;\n  /**\n   * The contextual knowledge to include in the chat. May be used by the assistant when generating responses.\n   */\n  knowledgeSources?: AiKnowledgeSource[];\n  /**\n   * Tool definitions to make available within this chat. May be used by the assistant when generating responses.\n   */\n  tools?: Record<string, ClientToolDefinition>;\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      AiChatMessageOverrides &\n      AiChatComposerOverrides &\n      AiChatOverrides\n  >;\n}\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledgeSources = [],\n      tools = {},\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const $ = useOverrides(overrides);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const [distanceToBottom, setDistanceToBottom] = useState<number | null>(\n      null\n    );\n    const client = useClient();\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    // Add the provided contextual information to the chat on mount and remove on unmount\n    // Note: 'contexts' will most likely be a new object on each render (unless user passes a stable object), but this won't be an issue as context addition and removal is a quick operation\n    useEffect(() => {\n      const unregister = knowledgeSources.map((source) =>\n        client[kInternal].ai.registerKnowledgeSource(chatId, source)\n      );\n      return () => {\n        unregister.forEach((unregister) => unregister());\n      };\n    }, [client, chatId, knowledgeSources]);\n\n    // Register the provided tools to the chat on mount and unregister them on unmount\n    useEffect(() => {\n      Object.entries(tools).map(([key, value]) =>\n        client[kInternal].ai.registerChatTool(chatId, key, value)\n      );\n      return () => {\n        Object.entries(tools).map(([key]) =>\n          client[kInternal].ai.unregisterChatTool(chatId, key)\n        );\n      };\n    }, [client, chatId, tools]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n      function handleScrollChange() {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        setDistanceToBottom(\n          container.scrollHeight - container.clientHeight - container.scrollTop\n        );\n      }\n      container.addEventListener(\"scroll\", handleScrollChange);\n      return () => {\n        container.removeEventListener(\"scroll\", handleScrollChange);\n      };\n    }, []);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      setDistanceToBottom(\n        container.scrollHeight - container.clientHeight - container.scrollTop\n      );\n    }, [messages]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      if (messages === undefined) return;\n      const lastMessage = messages[messages.length - 1];\n      if (lastMessage !== undefined && lastMessage.role === \"user\") {\n        container.scrollTo({\n          top: container.scrollHeight,\n          behavior: \"smooth\",\n        });\n      }\n    }, [messages]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      const observer = new ResizeObserver(() => {\n        const container = containerRef.current;\n        if (container === null) return;\n        setDistanceToBottom(\n          container.scrollHeight - container.clientHeight - container.scrollTop\n        );\n      });\n      observer.observe(container);\n      return () => {\n        observer.disconnect();\n      };\n    }, []);\n\n    const scrollToBottomCallbackRef = useRef<() => void>(undefined);\n    if (scrollToBottomCallbackRef.current === undefined) {\n      scrollToBottomCallbackRef.current = function () {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        container.scrollTo({\n          top: container.scrollHeight,\n          behavior: \"instant\",\n        });\n      };\n    }\n    const isScrollIndicatorVisible =\n      distanceToBottom !== null && distanceToBottom > MIN_DISTANCE_TO_BOTTOM;\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={classNames(\"lb-root lb-ai-chat\", className)}\n      >\n        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <div className=\"lb-loading lb-ai-chat-loading\">\n              <SpinnerIcon />\n            </div>\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : (\n            <div className=\"lb-ai-chat-messages\">\n              <Messages\n                messages={messages}\n                overrides={$}\n                onDistanceToBottomChange={scrollToBottomCallbackRef.current}\n              />\n            </div>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\">\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-elevation 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                disabled={!isScrollIndicatorVisible}\n                onClick={() => {\n                  const container = containerRef.current;\n                  if (container === null) return;\n\n                  container.scrollTo({\n                    top: container.scrollHeight,\n                    behavior: \"smooth\",\n                  });\n                }}\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={$}\n            autoFocus={autoFocus}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nfunction Messages({\n  messages,\n  overrides,\n  onDistanceToBottomChange,\n}: {\n  messages: readonly UiChatMessage[];\n  overrides: Partial<GlobalOverrides & AiChatMessageOverrides>;\n  onDistanceToBottomChange: () => void;\n}) {\n  const $ = useOverrides(overrides);\n\n  useLayoutEffect(() => {\n    onDistanceToBottomChange();\n  }, [onDistanceToBottomChange]);\n\n  return messages.map((message) => {\n    if (message.role === \"user\") {\n      return (\n        <AiChatUserMessage key={message.id} message={message} overrides={$} />\n      );\n    } else if (message.role === \"assistant\") {\n      return (\n        <AiChatAssistantMessage\n          key={message.id}\n          message={message}\n          overrides={$}\n        />\n      );\n    } else {\n      return null;\n    }\n  });\n}\n"],"names":["forwardRef","overrides","useAiChatMessages","useOverrides","useRef","useState","useClient","useImperativeHandle","useEffect","kInternal","unregister","container","jsxs","classNames","jsx","SpinnerIcon","ArrowDownIcon","AiChatComposer","useLayoutEffect","AiChatUserMessage","AiChatAssistantMessage"],"mappings":"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"}

package/dist/components/AiChat.js

@@ -0,0 +1,215 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { kInternal } from '@liveblocks/core';
+import { useAiChatMessages, useClient } from '@liveblocks/react';
+import { useLayoutEffect } from '@liveblocks/react/_private';
+import { forwardRef, useRef, useState, useImperativeHandle, useEffect } from 'react';
+import { ArrowDownIcon } from '../icons/ArrowDown.js';
+import { SpinnerIcon } from '../icons/Spinner.js';
+import { useOverrides } from '../overrides.js';
+import { classNames } from '../utils/class-names.js';
+import { AiChatAssistantMessage } from './internal/AiChatAssistantMessage.js';
+import { AiChatComposer } from './internal/AiChatComposer.js';
+import { AiChatUserMessage } from './internal/AiChatUserMessage.js';
+
+const MIN_DISTANCE_TO_BOTTOM = 50;
+const AiChat = forwardRef(
+  ({
+    chatId,
+    copilotId,
+    autoFocus,
+    overrides,
+    knowledgeSources = [],
+    tools = {},
+    className,
+    ...props
+  }, forwardedRef) => {
+    const { messages, isLoading, error } = useAiChatMessages(chatId);
+    const $ = useOverrides(overrides);
+    const containerRef = useRef(null);
+    const [distanceToBottom, setDistanceToBottom] = useState(
+      null
+    );
+    const client = useClient();
+    useImperativeHandle(
+      forwardedRef,
+      () => containerRef.current,
+      []
+    );
+    useEffect(() => {
+      const unregister = knowledgeSources.map(
+        (source) => client[kInternal].ai.registerKnowledgeSource(chatId, source)
+      );
+      return () => {
+        unregister.forEach((unregister2) => unregister2());
+      };
+    }, [client, chatId, knowledgeSources]);
+    useEffect(() => {
+      Object.entries(tools).map(
+        ([key, value]) => client[kInternal].ai.registerChatTool(chatId, key, value)
+      );
+      return () => {
+        Object.entries(tools).map(
+          ([key]) => client[kInternal].ai.unregisterChatTool(chatId, key)
+        );
+      };
+    }, [client, chatId, tools]);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (container === null)
+        return;
+      function handleScrollChange() {
+        const container2 = containerRef.current;
+        if (container2 === null)
+          return;
+        setDistanceToBottom(
+          container2.scrollHeight - container2.clientHeight - container2.scrollTop
+        );
+      }
+      container.addEventListener("scroll", handleScrollChange);
+      return () => {
+        container.removeEventListener("scroll", handleScrollChange);
+      };
+    }, []);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (container === null)
+        return;
+      setDistanceToBottom(
+        container.scrollHeight - container.clientHeight - container.scrollTop
+      );
+    }, [messages]);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (container === null)
+        return;
+      if (messages === void 0)
+        return;
+      const lastMessage = messages[messages.length - 1];
+      if (lastMessage !== void 0 && lastMessage.role === "user") {
+        container.scrollTo({
+          top: container.scrollHeight,
+          behavior: "smooth"
+        });
+      }
+    }, [messages]);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (container === null)
+        return;
+      const observer = new ResizeObserver(() => {
+        const container2 = containerRef.current;
+        if (container2 === null)
+          return;
+        setDistanceToBottom(
+          container2.scrollHeight - container2.clientHeight - container2.scrollTop
+        );
+      });
+      observer.observe(container);
+      return () => {
+        observer.disconnect();
+      };
+    }, []);
+    const scrollToBottomCallbackRef = useRef(void 0);
+    if (scrollToBottomCallbackRef.current === void 0) {
+      scrollToBottomCallbackRef.current = function() {
+        const container = containerRef.current;
+        if (container === null)
+          return;
+        container.scrollTo({
+          top: container.scrollHeight,
+          behavior: "instant"
+        });
+      };
+    }
+    const isScrollIndicatorVisible = distanceToBottom !== null && distanceToBottom > MIN_DISTANCE_TO_BOTTOM;
+    return /* @__PURE__ */ jsxs("div", {
+      ref: containerRef,
+      ...props,
+      className: classNames("lb-root lb-ai-chat", className),
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          className: "lb-ai-chat-content",
+          children: isLoading ? /* @__PURE__ */ jsx("div", {
+            className: "lb-loading lb-ai-chat-loading",
+            children: /* @__PURE__ */ jsx(SpinnerIcon, {})
+          }) : error !== void 0 ? /* @__PURE__ */ jsx("div", {
+            className: "lb-error lb-ai-chat-error",
+            children: $.AI_CHAT_MESSAGES_ERROR(error)
+          }) : /* @__PURE__ */ jsx("div", {
+            className: "lb-ai-chat-messages",
+            children: /* @__PURE__ */ jsx(Messages, {
+              messages,
+              overrides: $,
+              onDistanceToBottomChange: scrollToBottomCallbackRef.current
+            })
+          })
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "lb-ai-chat-footer",
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              className: "lb-ai-chat-footer-actions",
+              children: /* @__PURE__ */ jsx("div", {
+                className: "lb-elevation lb-ai-chat-scroll-indicator",
+                "data-visible": isScrollIndicatorVisible ? "" : void 0,
+                children: /* @__PURE__ */ jsx("button", {
+                  className: "lb-ai-chat-scroll-indicator-button",
+                  tabIndex: isScrollIndicatorVisible ? 0 : -1,
+                  "aria-hidden": !isScrollIndicatorVisible,
+                  disabled: !isScrollIndicatorVisible,
+                  onClick: () => {
+                    const container = containerRef.current;
+                    if (container === null)
+                      return;
+                    container.scrollTo({
+                      top: container.scrollHeight,
+                      behavior: "smooth"
+                    });
+                  },
+                  children: /* @__PURE__ */ jsx("span", {
+                    className: "lb-icon-container",
+                    children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+                  })
+                })
+              })
+            }),
+            /* @__PURE__ */ jsx(AiChatComposer, {
+              chatId,
+              copilotId,
+              overrides: $,
+              autoFocus
+            }, chatId)
+          ]
+        })
+      ]
+    });
+  }
+);
+function Messages({
+  messages,
+  overrides,
+  onDistanceToBottomChange
+}) {
+  const $ = useOverrides(overrides);
+  useLayoutEffect(() => {
+    onDistanceToBottomChange();
+  }, [onDistanceToBottomChange]);
+  return messages.map((message) => {
+    if (message.role === "user") {
+      return /* @__PURE__ */ jsx(AiChatUserMessage, {
+        message,
+        overrides: $
+      }, message.id);
+    } else if (message.role === "assistant") {
+      return /* @__PURE__ */ jsx(AiChatAssistantMessage, {
+        message,
+        overrides: $
+      }, message.id);
+    } else {
+      return null;
+    }
+  });
+}
+
+export { AiChat };
+//# sourceMappingURL=AiChat.js.map

package/dist/components/AiChat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiChat.js","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  ClientToolDefinition,\n  CopilotId,\n  UiChatMessage,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport { useAiChatMessages, useClient } from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\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 { classNames } from \"../utils/class-names\";\nimport { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatComposer } from \"./internal/AiChatComposer\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\n\n/**\n * The number of pixels from the bottom of the messages list to trigger the scroll to bottom.\n */\nconst MIN_DISTANCE_TO_BOTTOM = 50;\n\nexport interface AiChatProps extends ComponentProps<\"div\"> {\n  /**\n   * The id of the chat the composer belongs to.\n   */\n  chatId: string;\n  /**\n   * Whether to focus the chat composer on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * The id of the copilot to use to send the message.\n   */\n  copilotId?: string;\n  /**\n   * The contextual knowledge to include in the chat. May be used by the assistant when generating responses.\n   */\n  knowledgeSources?: AiKnowledgeSource[];\n  /**\n   * Tool definitions to make available within this chat. May be used by the assistant when generating responses.\n   */\n  tools?: Record<string, ClientToolDefinition>;\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      AiChatMessageOverrides &\n      AiChatComposerOverrides &\n      AiChatOverrides\n  >;\n}\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledgeSources = [],\n      tools = {},\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const $ = useOverrides(overrides);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const [distanceToBottom, setDistanceToBottom] = useState<number | null>(\n      null\n    );\n    const client = useClient();\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    // Add the provided contextual information to the chat on mount and remove on unmount\n    // Note: 'contexts' will most likely be a new object on each render (unless user passes a stable object), but this won't be an issue as context addition and removal is a quick operation\n    useEffect(() => {\n      const unregister = knowledgeSources.map((source) =>\n        client[kInternal].ai.registerKnowledgeSource(chatId, source)\n      );\n      return () => {\n        unregister.forEach((unregister) => unregister());\n      };\n    }, [client, chatId, knowledgeSources]);\n\n    // Register the provided tools to the chat on mount and unregister them on unmount\n    useEffect(() => {\n      Object.entries(tools).map(([key, value]) =>\n        client[kInternal].ai.registerChatTool(chatId, key, value)\n      );\n      return () => {\n        Object.entries(tools).map(([key]) =>\n          client[kInternal].ai.unregisterChatTool(chatId, key)\n        );\n      };\n    }, [client, chatId, tools]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n      function handleScrollChange() {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        setDistanceToBottom(\n          container.scrollHeight - container.clientHeight - container.scrollTop\n        );\n      }\n      container.addEventListener(\"scroll\", handleScrollChange);\n      return () => {\n        container.removeEventListener(\"scroll\", handleScrollChange);\n      };\n    }, []);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      setDistanceToBottom(\n        container.scrollHeight - container.clientHeight - container.scrollTop\n      );\n    }, [messages]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      if (messages === undefined) return;\n      const lastMessage = messages[messages.length - 1];\n      if (lastMessage !== undefined && lastMessage.role === \"user\") {\n        container.scrollTo({\n          top: container.scrollHeight,\n          behavior: \"smooth\",\n        });\n      }\n    }, [messages]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      const observer = new ResizeObserver(() => {\n        const container = containerRef.current;\n        if (container === null) return;\n        setDistanceToBottom(\n          container.scrollHeight - container.clientHeight - container.scrollTop\n        );\n      });\n      observer.observe(container);\n      return () => {\n        observer.disconnect();\n      };\n    }, []);\n\n    const scrollToBottomCallbackRef = useRef<() => void>(undefined);\n    if (scrollToBottomCallbackRef.current === undefined) {\n      scrollToBottomCallbackRef.current = function () {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        container.scrollTo({\n          top: container.scrollHeight,\n          behavior: \"instant\",\n        });\n      };\n    }\n    const isScrollIndicatorVisible =\n      distanceToBottom !== null && distanceToBottom > MIN_DISTANCE_TO_BOTTOM;\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={classNames(\"lb-root lb-ai-chat\", className)}\n      >\n        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <div className=\"lb-loading lb-ai-chat-loading\">\n              <SpinnerIcon />\n            </div>\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : (\n            <div className=\"lb-ai-chat-messages\">\n              <Messages\n                messages={messages}\n                overrides={$}\n                onDistanceToBottomChange={scrollToBottomCallbackRef.current}\n              />\n            </div>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\">\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-elevation 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                disabled={!isScrollIndicatorVisible}\n                onClick={() => {\n                  const container = containerRef.current;\n                  if (container === null) return;\n\n                  container.scrollTo({\n                    top: container.scrollHeight,\n                    behavior: \"smooth\",\n                  });\n                }}\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={$}\n            autoFocus={autoFocus}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nfunction Messages({\n  messages,\n  overrides,\n  onDistanceToBottomChange,\n}: {\n  messages: readonly UiChatMessage[];\n  overrides: Partial<GlobalOverrides & AiChatMessageOverrides>;\n  onDistanceToBottomChange: () => void;\n}) {\n  const $ = useOverrides(overrides);\n\n  useLayoutEffect(() => {\n    onDistanceToBottomChange();\n  }, [onDistanceToBottomChange]);\n\n  return messages.map((message) => {\n    if (message.role === \"user\") {\n      return (\n        <AiChatUserMessage key={message.id} message={message} overrides={$} />\n      );\n    } else if (message.role === \"assistant\") {\n      return (\n        <AiChatAssistantMessage\n          key={message.id}\n          message={message}\n          overrides={$}\n        />\n      );\n    } else {\n      return null;\n    }\n  });\n}\n"],"names":["unregister","container"],"mappings":"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"}

package/dist/components/Comment.cjs

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var _private = require('@liveblocks/react/_private');
 var TogglePrimitive = require('@radix-ui/react-toggle');
 var react = require('react');
+var constants = require('../constants.cjs');
 var Check = require('../icons/Check.cjs');
 var Cross = require('../icons/Cross.cjs');
 var Delete = require('../icons/Delete.cjs');
@@ -16,7 +17,6 @@ var index = require('../primitives/Comment/index.cjs');
 var index$1 = require('../primitives/Composer/index.cjs');
 var Timestamp = require('../primitives/Timestamp.cjs');
 var shared = require('../shared.cjs');
-var mentions = require('../slate/plugins/mentions.cjs');
 var classNames = require('../utils/class-names.cjs');
 var download = require('../utils/download.cjs');
 var useRefs = require('../utils/use-refs.cjs');
@@ -68,7 +68,7 @@ function CommentMention({
     "data-self": userId === currentId ? "" : void 0,
     ...props,
     children: [
-      mentions.MENTION_CHARACTER,
+      constants.MENTION_CHARACTER,
       /* @__PURE__ */ jsxRuntime.jsx(User.User, {
         userId
       })

package/dist/components/Comment.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Comment.cjs","sources":["../../src/components/Comment.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  CommentAttachment,\n  CommentData,\n  CommentReaction as CommentReactionData,\n} from \"@liveblocks/core\";\nimport {\n  useAddRoomCommentReaction,\n  useDeleteRoomComment,\n  useEditRoomComment,\n  useMarkRoomThreadAsRead,\n  useRemoveRoomCommentReaction,\n  useRoomAttachmentUrl,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  FormEvent,\n  MouseEvent,\n  ReactNode,\n  RefObject,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { CheckIcon } from \"../icons/Check\";\nimport { CrossIcon } from \"../icons/Cross\";\nimport { DeleteIcon } from \"../icons/Delete\";\nimport { EditIcon } from \"../icons/Edit\";\nimport { EllipsisIcon } from \"../icons/Ellipsis\";\nimport { EmojiPlusIcon } from \"../icons/EmojiPlus\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport type { ComposerSubmitComment } from \"../primitives\";\nimport * as CommentPrimitive from \"../primitives/Comment\";\nimport type {\n  CommentBodyLinkProps,\n  CommentBodyMentionProps,\n  CommentLinkProps,\n  CommentMentionProps,\n} from \"../primitives/Comment/types\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport type { CommentAttachmentArgs } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { download } from \"../utils/download\";\nimport { useRefs } from \"../utils/use-refs\";\nimport { useVisibleCallback } from \"../utils/use-visible\";\nimport { useWindowFocus } from \"../utils/use-window-focus\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport {\n  FileAttachment,\n  MediaAttachment,\n  separateMediaAttachments,\n} from \"./internal/Attachment\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button, CustomButton } from \"./internal/Button\";\nimport { Dropdown, DropdownItem, DropdownTrigger } from \"./internal/Dropdown\";\nimport { Emoji } from \"./internal/Emoji\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport { List } from \"./internal/List\";\nimport { ShortcutTooltip, Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\nconst REACTIONS_TRUNCATE = 5;\n\nexport interface CommentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The comment to display.\n   */\n  comment: CommentData;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: boolean | \"hover\";\n\n  /**\n   * Whether to show the comment if it was deleted. If set to `false`, it will render deleted comments as `null`.\n   */\n  showDeleted?: boolean;\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: boolean;\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * Whether to show the composer's formatting controls when editing the comment.\n   */\n  showComposerFormattingControls?: ComposerProps[\"showFormattingControls\"];\n\n  /**\n   * Whether to indent the comment's content.\n   */\n  indentContent?: boolean;\n\n  /**\n   * The event handler called when the comment is edited.\n   */\n  onCommentEdit?: (comment: CommentData) => void;\n\n  /**\n   * The event handler called when the comment is deleted.\n   */\n  onCommentDelete?: (comment: CommentData) => void;\n\n  /**\n   * The event handler called when clicking on the author.\n   */\n  onAuthorClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: (\n    args: CommentAttachmentArgs,\n    event: MouseEvent<HTMLElement>\n  ) => void;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & CommentOverrides & ComposerOverrides>;\n\n  /**\n   * @internal\n   */\n  autoMarkReadThreadId?: string;\n\n  /**\n   * @internal\n   */\n  additionalActions?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsBefore?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsAfter?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalActionsClassName?: string;\n}\n\ninterface CommentReactionButtonProps\n  extends ComponentPropsWithoutRef<typeof Button> {\n  reaction: CommentReactionData;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\ninterface CommentReactionProps extends ComponentPropsWithoutRef<\"button\"> {\n  comment: CommentData;\n  reaction: CommentReactionData;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\ntype CommentNonInteractiveReactionProps = Omit<CommentReactionProps, \"comment\">;\n\ninterface CommentAttachmentProps extends ComponentProps<typeof FileAttachment> {\n  attachment: CommentAttachment;\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n}\n\nexport function CommentMention({\n  userId,\n  className,\n  ...props\n}: CommentBodyMentionProps & CommentMentionProps) {\n  const currentId = useCurrentUserId();\n  return (\n    <CommentPrimitive.Mention\n      className={classNames(\"lb-comment-mention\", className)}\n      data-self={userId === currentId ? \"\" : undefined}\n      {...props}\n    >\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </CommentPrimitive.Mention>\n  );\n}\n\nexport function CommentLink({\n  href,\n  children,\n  className,\n  ...props\n}: CommentBodyLinkProps & CommentLinkProps) {\n  return (\n    <CommentPrimitive.Link\n      className={classNames(\"lb-comment-link\", className)}\n      href={href}\n      {...props}\n    >\n      {children}\n    </CommentPrimitive.Link>\n  );\n}\n\nexport function CommentNonInteractiveLink({\n  href: _href,\n  children,\n  className,\n  ...props\n}: CommentBodyLinkProps & CommentLinkProps) {\n  return (\n    <span className={classNames(\"lb-comment-link\", className)} {...props}>\n      {children}\n    </span>\n  );\n}\n\nconst CommentReactionButton = forwardRef<\n  HTMLButtonElement,\n  CommentReactionButtonProps\n>(({ reaction, overrides, className, ...props }, forwardedRef) => {\n  const $ = useOverrides(overrides);\n  return (\n    <CustomButton\n      className={classNames(\"lb-comment-reaction\", className)}\n      variant=\"outline\"\n      aria-label={$.COMMENT_REACTION_DESCRIPTION(\n        reaction.emoji,\n        reaction.users.length\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      <Emoji className=\"lb-comment-reaction-emoji\" emoji={reaction.emoji} />\n      <span className=\"lb-comment-reaction-count\">{reaction.users.length}</span>\n    </CustomButton>\n  );\n});\n\nexport const CommentReaction = forwardRef<\n  HTMLButtonElement,\n  CommentReactionProps\n>(({ comment, reaction, overrides, disabled, ...props }, forwardedRef) => {\n  const addReaction = useAddRoomCommentReaction(comment.roomId);\n  const removeReaction = useRemoveRoomCommentReaction(comment.roomId);\n  const currentId = useCurrentUserId();\n  const isActive = useMemo(() => {\n    return reaction.users.some((users) => users.id === currentId);\n  }, [currentId, reaction]);\n  const $ = useOverrides(overrides);\n  const tooltipContent = useMemo(\n    () => (\n      <span>\n        {$.COMMENT_REACTION_LIST(\n          <List\n            values={reaction.users.map((users) => (\n              <User key={users.id} userId={users.id} replaceSelf />\n            ))}\n            formatRemaining={$.LIST_REMAINING_USERS}\n            truncate={REACTIONS_TRUNCATE}\n            locale={$.locale}\n          />,\n          reaction.emoji,\n          reaction.users.length\n        )}\n      </span>\n    ),\n    [$, reaction]\n  );\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const handlePressedChange = useCallback(\n    (isPressed: boolean) => {\n      if (isPressed) {\n        addReaction({\n          threadId: comment.threadId,\n          commentId: comment.id,\n          emoji: reaction.emoji,\n        });\n      } else {\n        removeReaction({\n          threadId: comment.threadId,\n          commentId: comment.id,\n          emoji: reaction.emoji,\n        });\n      }\n    },\n    [addReaction, comment.threadId, comment.id, reaction.emoji, removeReaction]\n  );\n\n  return (\n    <Tooltip\n      content={tooltipContent}\n      multiline\n      className=\"lb-comment-reaction-tooltip\"\n    >\n      <TogglePrimitive.Root\n        asChild\n        pressed={isActive}\n        onPressedChange={handlePressedChange}\n        onClick={stopPropagation}\n        disabled={disabled}\n        ref={forwardedRef}\n      >\n        <CommentReactionButton\n          data-self={isActive ? \"\" : undefined}\n          reaction={reaction}\n          overrides={overrides}\n          {...props}\n        />\n      </TogglePrimitive.Root>\n    </Tooltip>\n  );\n});\n\nexport const CommentNonInteractiveReaction = forwardRef<\n  HTMLButtonElement,\n  CommentNonInteractiveReactionProps\n>(({ reaction, overrides, ...props }, forwardedRef) => {\n  const currentId = useCurrentUserId();\n  const isActive = useMemo(() => {\n    return reaction.users.some((users) => users.id === currentId);\n  }, [currentId, reaction]);\n\n  return (\n    <CommentReactionButton\n      disableable={false}\n      data-self={isActive ? \"\" : undefined}\n      reaction={reaction}\n      overrides={overrides}\n      {...props}\n      ref={forwardedRef}\n    />\n  );\n});\n\nfunction openAttachment({ attachment, url }: CommentAttachmentArgs) {\n  // Open the attachment in a new tab if the attachment is a PDF,\n  // an image, a video, or audio. Otherwise, download it.\n  if (\n    attachment.mimeType === \"application/pdf\" ||\n    attachment.mimeType.startsWith(\"image/\") ||\n    attachment.mimeType.startsWith(\"video/\") ||\n    attachment.mimeType.startsWith(\"audio/\")\n  ) {\n    window.open(url, \"_blank\");\n  } else {\n    download(url, attachment.name);\n  }\n}\n\nfunction CommentMediaAttachment({\n  attachment,\n  onAttachmentClick,\n  roomId,\n  className,\n  overrides,\n  ...props\n}: CommentAttachmentProps & {\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      if (!url) {\n        return;\n      }\n\n      const args: CommentAttachmentArgs = { attachment, url };\n\n      onAttachmentClick?.(args, event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      openAttachment(args);\n    },\n    [attachment, onAttachmentClick, url]\n  );\n\n  return (\n    <MediaAttachment\n      className={classNames(\"lb-comment-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      overrides={overrides}\n      onClick={url ? handleClick : undefined}\n      roomId={roomId}\n    />\n  );\n}\n\nfunction CommentFileAttachment({\n  attachment,\n  onAttachmentClick,\n  roomId,\n  className,\n  overrides,\n  ...props\n}: CommentAttachmentProps & {\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      if (!url) {\n        return;\n      }\n\n      const args: CommentAttachmentArgs = { attachment, url };\n\n      onAttachmentClick?.(args, event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      openAttachment(args);\n    },\n    [attachment, onAttachmentClick, url]\n  );\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-comment-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      overrides={overrides}\n      onClick={url ? handleClick : undefined}\n      roomId={roomId}\n    />\n  );\n}\n\nexport function CommentNonInteractiveFileAttachment({\n  className,\n  ...props\n}: CommentAttachmentProps) {\n  return (\n    <FileAttachment\n      className={classNames(\"lb-comment-attachment\", className)}\n      allowMediaPreview={false}\n      {...props}\n    />\n  );\n}\n\n// A void component (which doesn't render anything) responsible for marking a thread\n// as read when the comment it's used in becomes visible.\n// Moving this logic into a separate component allows us to use the visibility\n// and focus hooks \"conditionally\" by conditionally rendering this component.\nfunction AutoMarkReadThreadIdHandler({\n  threadId,\n  roomId,\n  commentRef,\n}: {\n  threadId: string;\n  roomId: string;\n  commentRef: RefObject<HTMLElement>;\n}) {\n  const markThreadAsRead = useMarkRoomThreadAsRead(roomId);\n  const isWindowFocused = useWindowFocus();\n\n  useVisibleCallback(\n    commentRef,\n    () => {\n      markThreadAsRead(threadId);\n    },\n    {\n      // The underlying IntersectionObserver is only enabled when the window is focused\n      enabled: isWindowFocused,\n    }\n  );\n\n  return null;\n}\n\n/**\n * Displays a single comment.\n *\n * @example\n * <>\n *   {thread.comments.map((comment) => (\n *     <Comment key={comment.id} comment={comment} />\n *   ))}\n * </>\n */\nexport const Comment = forwardRef<HTMLDivElement, CommentProps>(\n  (\n    {\n      comment,\n      indentContent = true,\n      showDeleted,\n      showActions = \"hover\",\n      showReactions = true,\n      showAttachments = true,\n      showComposerFormattingControls = true,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onCommentEdit,\n      onCommentDelete,\n      overrides,\n      className,\n      additionalActions,\n      additionalActionsClassName,\n      additionalDropdownItemsBefore,\n      additionalDropdownItemsAfter,\n      autoMarkReadThreadId,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const mergedRefs = useRefs(forwardedRef, ref);\n    const currentUserId = useCurrentUserId();\n    const deleteComment = useDeleteRoomComment(comment.roomId);\n    const editComment = useEditRoomComment(comment.roomId);\n    const addReaction = useAddRoomCommentReaction(comment.roomId);\n    const removeReaction = useRemoveRoomCommentReaction(comment.roomId);\n    const $ = useOverrides(overrides);\n    const [isEditing, setEditing] = useState(false);\n    const [isTarget, setTarget] = useState(false);\n    const [isMoreActionOpen, setMoreActionOpen] = useState(false);\n    const [isReactionActionOpen, setReactionActionOpen] = useState(false);\n    const { mediaAttachments, fileAttachments } = useMemo(() => {\n      return separateMediaAttachments(comment.attachments);\n    }, [comment.attachments]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const handleEdit = useCallback(() => {\n      setEditing(true);\n    }, []);\n\n    const handleEditCancel = useCallback(\n      (event: MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setEditing(false);\n      },\n      []\n    );\n\n    const handleEditSubmit = useCallback(\n      (\n        { body, attachments }: ComposerSubmitComment,\n        event: FormEvent<HTMLFormElement>\n      ) => {\n        // TODO: Add a way to preventDefault from within this callback, to override the default behavior (e.g. showing a confirmation dialog)\n        onCommentEdit?.(comment);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n\n        setEditing(false);\n        editComment({\n          commentId: comment.id,\n          threadId: comment.threadId,\n          body,\n          attachments,\n        });\n      },\n      [comment, editComment, onCommentEdit]\n    );\n\n    const handleDelete = useCallback(() => {\n      // TODO: Add a way to preventDefault from within this callback, to override the default behavior (e.g. showing a confirmation dialog)\n      onCommentDelete?.(comment);\n\n      deleteComment({\n        commentId: comment.id,\n        threadId: comment.threadId,\n      });\n    }, [comment, deleteComment, onCommentDelete]);\n\n    const handleAuthorClick = useCallback(\n      (event: MouseEvent<HTMLElement>) => {\n        onAuthorClick?.(comment.userId, event);\n      },\n      [comment.userId, onAuthorClick]\n    );\n\n    const handleReactionSelect = useCallback(\n      (emoji: string) => {\n        const reactionIndex = comment.reactions.findIndex(\n          (reaction) => reaction.emoji === emoji\n        );\n\n        if (\n          reactionIndex >= 0 &&\n          currentUserId &&\n          comment.reactions[reactionIndex]?.users.some(\n            (user) => user.id === currentUserId\n          )\n        ) {\n          removeReaction({\n            threadId: comment.threadId,\n            commentId: comment.id,\n            emoji,\n          });\n        } else {\n          addReaction({\n            threadId: comment.threadId,\n            commentId: comment.id,\n            emoji,\n          });\n        }\n      },\n      [\n        addReaction,\n        comment.id,\n        comment.reactions,\n        comment.threadId,\n        removeReaction,\n        currentUserId,\n      ]\n    );\n\n    useEffect(() => {\n      const isWindowDefined = typeof window !== \"undefined\";\n      if (!isWindowDefined) return;\n\n      const hash = window.location.hash;\n      const commentId = hash.slice(1);\n\n      if (commentId === comment.id) {\n        setTarget(true);\n      }\n    }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n    if (!showDeleted && !comment.body) {\n      return null;\n    }\n\n    return (\n      <TooltipProvider>\n        {autoMarkReadThreadId && (\n          <AutoMarkReadThreadIdHandler\n            commentRef={ref}\n            threadId={autoMarkReadThreadId}\n            roomId={comment.roomId}\n          />\n        )}\n        <div\n          id={comment.id}\n          className={classNames(\n            \"lb-root lb-comment\",\n            indentContent && \"lb-comment:indent-content\",\n            showActions === \"hover\" && \"lb-comment:show-actions-hover\",\n            (isMoreActionOpen || isReactionActionOpen) &&\n              \"lb-comment:action-open\",\n            className\n          )}\n          data-deleted={!comment.body ? \"\" : undefined}\n          data-editing={isEditing ? \"\" : undefined}\n          // In some cases, `:target` doesn't work as expected so we also define it manually.\n          data-target={isTarget ? \"\" : undefined}\n          dir={$.dir}\n          {...props}\n          ref={mergedRefs}\n        >\n          <div className=\"lb-comment-header\">\n            <div className=\"lb-comment-details\">\n              <Avatar\n                className=\"lb-comment-avatar\"\n                userId={comment.userId}\n                onClick={handleAuthorClick}\n              />\n              <span className=\"lb-comment-details-labels\">\n                <User\n                  className=\"lb-comment-author\"\n                  userId={comment.userId}\n                  onClick={handleAuthorClick}\n                />\n                <span className=\"lb-comment-date\">\n                  <Timestamp\n                    locale={$.locale}\n                    date={comment.createdAt}\n                    className=\"lb-date lb-comment-date-created\"\n                  />\n                  {comment.editedAt && comment.body && (\n                    <>\n                      {\" \"}\n                      <span className=\"lb-comment-date-edited\">\n                        {$.COMMENT_EDITED}\n                      </span>\n                    </>\n                  )}\n                </span>\n              </span>\n            </div>\n            {showActions && !isEditing && (\n              <div\n                className={classNames(\n                  \"lb-comment-actions\",\n                  additionalActionsClassName\n                )}\n              >\n                {additionalActions ?? null}\n                {showReactions && (\n                  <EmojiPicker\n                    onEmojiSelect={handleReactionSelect}\n                    onOpenChange={setReactionActionOpen}\n                  >\n                    <Tooltip content={$.COMMENT_ADD_REACTION}>\n                      <EmojiPickerTrigger asChild>\n                        <Button\n                          className=\"lb-comment-action\"\n                          onClick={stopPropagation}\n                          aria-label={$.COMMENT_ADD_REACTION}\n                          icon={<EmojiPlusIcon />}\n                        />\n                      </EmojiPickerTrigger>\n                    </Tooltip>\n                  </EmojiPicker>\n                )}\n                {comment.userId === currentUserId ||\n                additionalDropdownItemsBefore ||\n                additionalDropdownItemsAfter ? (\n                  <Dropdown\n                    open={isMoreActionOpen}\n                    onOpenChange={setMoreActionOpen}\n                    align=\"end\"\n                    content={\n                      <>\n                        {additionalDropdownItemsBefore}\n                        {comment.userId === currentUserId && (\n                          <>\n                            <DropdownItem\n                              onSelect={handleEdit}\n                              onClick={stopPropagation}\n                              icon={<EditIcon />}\n                            >\n                              {$.COMMENT_EDIT}\n                            </DropdownItem>\n                            <DropdownItem\n                              onSelect={handleDelete}\n                              onClick={stopPropagation}\n                              icon={<DeleteIcon />}\n                            >\n                              {$.COMMENT_DELETE}\n                            </DropdownItem>\n                          </>\n                        )}\n                        {additionalDropdownItemsAfter}\n                      </>\n                    }\n                  >\n                    <Tooltip content={$.COMMENT_MORE}>\n                      <DropdownTrigger asChild>\n                        <Button\n                          className=\"lb-comment-action\"\n                          disabled={!comment.body}\n                          onClick={stopPropagation}\n                          aria-label={$.COMMENT_MORE}\n                          icon={<EllipsisIcon />}\n                        />\n                      </DropdownTrigger>\n                    </Tooltip>\n                  </Dropdown>\n                ) : null}\n              </div>\n            )}\n          </div>\n          <div className=\"lb-comment-content\">\n            {isEditing ? (\n              <Composer\n                className=\"lb-comment-composer\"\n                onComposerSubmit={handleEditSubmit}\n                defaultValue={comment.body}\n                defaultAttachments={comment.attachments}\n                autoFocus\n                showAttribution={false}\n                showAttachments={showAttachments}\n                showFormattingControls={showComposerFormattingControls}\n                actions={\n                  <>\n                    <Tooltip\n                      content={$.COMMENT_EDIT_COMPOSER_CANCEL}\n                      aria-label={$.COMMENT_EDIT_COMPOSER_CANCEL}\n                    >\n                      <Button\n                        className=\"lb-composer-action\"\n                        onClick={handleEditCancel}\n                        icon={<CrossIcon />}\n                      />\n                    </Tooltip>\n                    <ShortcutTooltip\n                      content={$.COMMENT_EDIT_COMPOSER_SAVE}\n                      shortcut=\"Enter\"\n                    >\n                      <ComposerPrimitive.Submit asChild>\n                        <Button\n                          variant=\"primary\"\n                          className=\"lb-composer-action\"\n                          onClick={stopPropagation}\n                          aria-label={$.COMMENT_EDIT_COMPOSER_SAVE}\n                          icon={<CheckIcon />}\n                        />\n                      </ComposerPrimitive.Submit>\n                    </ShortcutTooltip>\n                  </>\n                }\n                overrides={{\n                  COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER,\n                }}\n                roomId={comment.roomId}\n              />\n            ) : comment.body ? (\n              <>\n                <CommentPrimitive.Body\n                  className=\"lb-comment-body\"\n                  body={comment.body}\n                  components={{\n                    Mention: ({ userId }) => (\n                      <CommentMention\n                        userId={userId}\n                        onClick={(event) => onMentionClick?.(userId, event)}\n                      />\n                    ),\n                    Link: CommentLink,\n                  }}\n                />\n                {showAttachments &&\n                (mediaAttachments.length > 0 || fileAttachments.length > 0) ? (\n                  <div className=\"lb-comment-attachments\">\n                    {mediaAttachments.length > 0 ? (\n                      <div className=\"lb-attachments\">\n                        {mediaAttachments.map((attachment) => (\n                          <CommentMediaAttachment\n                            key={attachment.id}\n                            attachment={attachment}\n                            overrides={overrides}\n                            onAttachmentClick={onAttachmentClick}\n                            roomId={comment.roomId}\n                          />\n                        ))}\n                      </div>\n                    ) : null}\n                    {fileAttachments.length > 0 ? (\n                      <div className=\"lb-attachments\">\n                        {fileAttachments.map((attachment) => (\n                          <CommentFileAttachment\n                            key={attachment.id}\n                            attachment={attachment}\n                            overrides={overrides}\n                            onAttachmentClick={onAttachmentClick}\n                            roomId={comment.roomId}\n                          />\n                        ))}\n                      </div>\n                    ) : null}\n                  </div>\n                ) : null}\n                {showReactions && comment.reactions.length > 0 && (\n                  <div className=\"lb-comment-reactions\">\n                    {comment.reactions.map((reaction) => (\n                      <CommentReaction\n                        key={reaction.emoji}\n                        comment={comment}\n                        reaction={reaction}\n                        overrides={overrides}\n                      />\n                    ))}\n                    <EmojiPicker onEmojiSelect={handleReactionSelect}>\n                      <Tooltip content={$.COMMENT_ADD_REACTION}>\n                        <EmojiPickerTrigger asChild>\n                          <Button\n                            className=\"lb-comment-reaction lb-comment-reaction-add\"\n                            variant=\"outline\"\n                            onClick={stopPropagation}\n                            aria-label={$.COMMENT_ADD_REACTION}\n                            icon={<EmojiPlusIcon />}\n                          />\n                        </EmojiPickerTrigger>\n                      </Tooltip>\n                    </EmojiPicker>\n                  </div>\n                )}\n              </>\n            ) : (\n              <div className=\"lb-comment-body\">\n                <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n              </div>\n            )}\n          </div>\n        </div>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA;AAoHO;AAAwB;AAC7B;AACA;AAEF;AACE;AACA;AACG;AACsD;AACd;AACnC;AAEH;AAAA;AACA;AAAK;AAAgB;AAAA;AAG5B;AAEO;AAAqB;AAC1B;AACA;AACA;AAEF;AACE;AACG;AACmD;AAClD;AACI;AAEH;AAGP;AAEO;AAAmC;AAClC;AACN;AACA;AAEF;AACE;AACG;AAAuD;AAAO;AAC5D;AAGP;AAEA;AAIE;AACA;AACG;AACuD;AAC9C;AACM;AACH;AACM;AACjB;AACI;AACC;AAEL;AAAC;AAAgB;AAA4C;AAAO;AACnE;AAAe;AAA4C;AAAO;AAAA;AAGzE;AAEa;AAIX;AACA;AACA;AACA;AACE;AAA4D;AAE9D;AACA;AAAuB;AAElB;AACI;AACA;AAEI;AAAkC;AAAe;AACnD;AACkB;AACT;AACA;AACZ;AACS;AACM;AACjB;AACF;AAEU;AAGd;AACE;AAAsB;AAGxB;AAA4B;AAExB;AACE;AAAY;AACQ;AACC;AACH;AACjB;AAED;AAAe;AACK;AACC;AACH;AACjB;AACH;AACF;AAC0E;AAG5E;AACG;AACU;AACA;AACC;AAET;AACQ;AACE;AACQ;AACR;AACT;AACK;AAEJ;AAC4B;AAC3B;AACA;AACI;AACN;AACF;AAGN;AAEa;AAIX;AACA;AACE;AAA4D;AAG9D;AACG;AACc;AACc;AAC3B;AACA;AACI;AACC;AAGX;AAEA;AAGE;AAME;AAAyB;AAEzB;AAA6B;AAEjC;AAEA;AAAgC;AAC9B;AACA;AACA;AACA;AACA;AAEF;AAGE;AAEA;AAAoB;AAEhB;AACE;AAAA;AAGF;AAEA;AAEA;AACE;AAAA;AAGF;AAAmB;AACrB;AACmC;AAGrC;AACG;AACyD;AACpD;AACJ;AACA;AAC6B;AAC7B;AAGN;AAEA;AAA+B;AAC7B;AACA;AACA;AACA;AACA;AAEF;AAGE;AAEA;AAAoB;AAEhB;AACE;AAAA;AAGF;AAEA;AAEA;AACE;AAAA;AAGF;AAAmB;AACrB;AACmC;AAGrC;AACG;AACyD;AACpD;AACJ;AACA;AAC6B;AAC7B;AAGN;AAEO;AAA6C;AAClD;AAEF;AACE;AACG;AACyD;AACrC;AACf;AAGV;AAMA;AAAqC;AACnC;AACA;AAEF;AAKE;AACA;AAEA;AAAA;AACE;AAEE;AAAyB;AAC3B;AACA;AAEW;AACX;AAGF;AACF;AAYO;AAAgB;AAEnB;AACE;AACgB;AAChB;AACc;AACE;AACE;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AAAmD;AAGrD;AACE;AAAsB;AAGxB;AACE;AAAe;AAGjB;AAAyB;AAErB;AACA;AAAgB;AAClB;AACC;AAGH;AAAyB;AAMrB;AAEA;AACE;AAAA;AAGF;AACA;AAEA;AACA;AAAY;AACS;AACD;AAClB;AACA;AACD;AACH;AACoC;AAGtC;AAEE;AAEA;AAAc;AACO;AACD;AACnB;AAGH;AAA0B;AAEtB;AAAqC;AACvC;AAC8B;AAGhC;AAA6B;AAEzB;AAAwC;AACL;AAGnC;AAG0C;AAChB;AAGxB;AAAe;AACK;AACC;AACnB;AACD;AAED;AAAY;AACQ;AACC;AACnB;AACD;AACH;AACF;AACA;AACE;AACQ;AACA;AACA;AACR;AACA;AACF;AAGF;AACE;AACA;AAAsB;AAEtB;AACA;AAEA;AACE;AAAc;AAChB;AAGF;AACE;AAAO;AAGT;AACG;AACE;AACE;AACa;AACF;AACM;AAClB;AAED;AACa;AACD;AACT;AACiB;AACU;AAEzB;AACF;AACF;AACmC;AACJ;AAEF;AACtB;AACH;AACC;AAEL;AAAC;AAAc;AACb;AAAC;AAAc;AACb;AAAC;AACW;AACM;AACP;AACX;AACC;AAAe;AACd;AAAC;AACW;AACM;AACP;AACX;AACC;AAAe;AACd;AAAC;AACW;AACI;AACJ;AACZ;AAEE;AACG;AAAA;AACA;AAAe;AACX;AACL;AAAA;AACF;AAAA;AAEJ;AAAA;AACF;AAAA;AACF;AAEG;AACY;AACT;AACA;AACF;AAEC;AAAqB;AAEnB;AACgB;AACD;AAEb;AAAmB;AACjB;AAA0B;AACxB;AACW;AACD;AACK;AACO;AACvB;AACF;AACF;AACF;AAKC;AACO;AACQ;AACR;AAEJ;AACG;AAAA;AAEC;AACE;AAAC;AACW;AACD;AACO;AAEb;AACL;AACC;AACW;AACD;AACS;AAEf;AACL;AAAA;AACF;AAED;AAAA;AACH;AAGD;AAAmB;AACjB;AAAuB;AACrB;AACW;AACS;AACV;AACK;AACM;AACtB;AACF;AACF;AAEA;AAAA;AACN;AAAA;AAEJ;AACC;AAAc;AAEV;AACW;AACQ;AACI;AACM;AACnB;AACQ;AACjB;AACwB;AAEtB;AACE;AAAC;AACY;AACG;AAEb;AACW;AACD;AACQ;AACnB;AACF;AACC;AACY;AACF;AAER;AAAgC;AAC9B;AACS;AACE;AACD;AACK;AACG;AACnB;AACF;AACF;AAAA;AACF;AAES;AACe;AAC1B;AACgB;AAGlB;AACE;AAAC;AACW;AACI;AACF;AAEP;AACC;AACkD;AACpD;AAEI;AACR;AACF;AAGG;AAAc;AACZ;AACE;AAAc;AAEV;AAEC;AACA;AACA;AACgB;AAEnB;AAED;AAED;AAAc;AAEV;AAEC;AACA;AACA;AACgB;AAEnB;AAED;AAAA;AAEJ;AAED;AAAc;AACZ;AACE;AAEC;AACA;AACA;AAEH;AACA;AAA2B;AACzB;AAAmB;AACjB;AAA0B;AACxB;AACW;AACF;AACC;AACK;AACO;AACvB;AACF;AACF;AACF;AAAA;AACF;AAAA;AAIH;AAAc;AACZ;AAAY;AAAwB;AAAgB;AACvD;AAEJ;AAAA;AACF;AAAA;AACF;AAGN;;;;;;;;"}
+{"version":3,"file":"Comment.cjs","sources":["../../src/components/Comment.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  CommentAttachment,\n  CommentData,\n  CommentReaction as CommentReactionData,\n} from \"@liveblocks/core\";\nimport {\n  useAddRoomCommentReaction,\n  useDeleteRoomComment,\n  useEditRoomComment,\n  useMarkRoomThreadAsRead,\n  useRemoveRoomCommentReaction,\n  useRoomAttachmentUrl,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  FormEvent,\n  MouseEvent,\n  ReactNode,\n  RefObject,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { MENTION_CHARACTER } from \"../constants\";\nimport { CheckIcon } from \"../icons/Check\";\nimport { CrossIcon } from \"../icons/Cross\";\nimport { DeleteIcon } from \"../icons/Delete\";\nimport { EditIcon } from \"../icons/Edit\";\nimport { EllipsisIcon } from \"../icons/Ellipsis\";\nimport { EmojiPlusIcon } from \"../icons/EmojiPlus\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport type { ComposerSubmitComment } from \"../primitives\";\nimport * as CommentPrimitive from \"../primitives/Comment\";\nimport type {\n  CommentBodyLinkProps,\n  CommentBodyMentionProps,\n  CommentLinkProps,\n  CommentMentionProps,\n} from \"../primitives/Comment/types\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { CommentAttachmentArgs } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { download } from \"../utils/download\";\nimport { useRefs } from \"../utils/use-refs\";\nimport { useVisibleCallback } from \"../utils/use-visible\";\nimport { useWindowFocus } from \"../utils/use-window-focus\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport {\n  FileAttachment,\n  MediaAttachment,\n  separateMediaAttachments,\n} from \"./internal/Attachment\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button, CustomButton } from \"./internal/Button\";\nimport { Dropdown, DropdownItem, DropdownTrigger } from \"./internal/Dropdown\";\nimport { Emoji } from \"./internal/Emoji\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport { List } from \"./internal/List\";\nimport { ShortcutTooltip, Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\nconst REACTIONS_TRUNCATE = 5;\n\nexport interface CommentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The comment to display.\n   */\n  comment: CommentData;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: boolean | \"hover\";\n\n  /**\n   * Whether to show the comment if it was deleted. If set to `false`, it will render deleted comments as `null`.\n   */\n  showDeleted?: boolean;\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: boolean;\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * Whether to show the composer's formatting controls when editing the comment.\n   */\n  showComposerFormattingControls?: ComposerProps[\"showFormattingControls\"];\n\n  /**\n   * Whether to indent the comment's content.\n   */\n  indentContent?: boolean;\n\n  /**\n   * The event handler called when the comment is edited.\n   */\n  onCommentEdit?: (comment: CommentData) => void;\n\n  /**\n   * The event handler called when the comment is deleted.\n   */\n  onCommentDelete?: (comment: CommentData) => void;\n\n  /**\n   * The event handler called when clicking on the author.\n   */\n  onAuthorClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: (\n    args: CommentAttachmentArgs,\n    event: MouseEvent<HTMLElement>\n  ) => void;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & CommentOverrides & ComposerOverrides>;\n\n  /**\n   * @internal\n   */\n  autoMarkReadThreadId?: string;\n\n  /**\n   * @internal\n   */\n  additionalActions?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsBefore?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsAfter?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalActionsClassName?: string;\n}\n\ninterface CommentReactionButtonProps\n  extends ComponentPropsWithoutRef<typeof Button> {\n  reaction: CommentReactionData;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\ninterface CommentReactionProps extends ComponentPropsWithoutRef<\"button\"> {\n  comment: CommentData;\n  reaction: CommentReactionData;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\ntype CommentNonInteractiveReactionProps = Omit<CommentReactionProps, \"comment\">;\n\ninterface CommentAttachmentProps extends ComponentProps<typeof FileAttachment> {\n  attachment: CommentAttachment;\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n}\n\nexport function CommentMention({\n  userId,\n  className,\n  ...props\n}: CommentBodyMentionProps & CommentMentionProps) {\n  const currentId = useCurrentUserId();\n  return (\n    <CommentPrimitive.Mention\n      className={classNames(\"lb-comment-mention\", className)}\n      data-self={userId === currentId ? \"\" : undefined}\n      {...props}\n    >\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </CommentPrimitive.Mention>\n  );\n}\n\nexport function CommentLink({\n  href,\n  children,\n  className,\n  ...props\n}: CommentBodyLinkProps & CommentLinkProps) {\n  return (\n    <CommentPrimitive.Link\n      className={classNames(\"lb-comment-link\", className)}\n      href={href}\n      {...props}\n    >\n      {children}\n    </CommentPrimitive.Link>\n  );\n}\n\nexport function CommentNonInteractiveLink({\n  href: _href,\n  children,\n  className,\n  ...props\n}: CommentBodyLinkProps & CommentLinkProps) {\n  return (\n    <span className={classNames(\"lb-comment-link\", className)} {...props}>\n      {children}\n    </span>\n  );\n}\n\nconst CommentReactionButton = forwardRef<\n  HTMLButtonElement,\n  CommentReactionButtonProps\n>(({ reaction, overrides, className, ...props }, forwardedRef) => {\n  const $ = useOverrides(overrides);\n  return (\n    <CustomButton\n      className={classNames(\"lb-comment-reaction\", className)}\n      variant=\"outline\"\n      aria-label={$.COMMENT_REACTION_DESCRIPTION(\n        reaction.emoji,\n        reaction.users.length\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      <Emoji className=\"lb-comment-reaction-emoji\" emoji={reaction.emoji} />\n      <span className=\"lb-comment-reaction-count\">{reaction.users.length}</span>\n    </CustomButton>\n  );\n});\n\nexport const CommentReaction = forwardRef<\n  HTMLButtonElement,\n  CommentReactionProps\n>(({ comment, reaction, overrides, disabled, ...props }, forwardedRef) => {\n  const addReaction = useAddRoomCommentReaction(comment.roomId);\n  const removeReaction = useRemoveRoomCommentReaction(comment.roomId);\n  const currentId = useCurrentUserId();\n  const isActive = useMemo(() => {\n    return reaction.users.some((users) => users.id === currentId);\n  }, [currentId, reaction]);\n  const $ = useOverrides(overrides);\n  const tooltipContent = useMemo(\n    () => (\n      <span>\n        {$.COMMENT_REACTION_LIST(\n          <List\n            values={reaction.users.map((users) => (\n              <User key={users.id} userId={users.id} replaceSelf />\n            ))}\n            formatRemaining={$.LIST_REMAINING_USERS}\n            truncate={REACTIONS_TRUNCATE}\n            locale={$.locale}\n          />,\n          reaction.emoji,\n          reaction.users.length\n        )}\n      </span>\n    ),\n    [$, reaction]\n  );\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const handlePressedChange = useCallback(\n    (isPressed: boolean) => {\n      if (isPressed) {\n        addReaction({\n          threadId: comment.threadId,\n          commentId: comment.id,\n          emoji: reaction.emoji,\n        });\n      } else {\n        removeReaction({\n          threadId: comment.threadId,\n          commentId: comment.id,\n          emoji: reaction.emoji,\n        });\n      }\n    },\n    [addReaction, comment.threadId, comment.id, reaction.emoji, removeReaction]\n  );\n\n  return (\n    <Tooltip\n      content={tooltipContent}\n      multiline\n      className=\"lb-comment-reaction-tooltip\"\n    >\n      <TogglePrimitive.Root\n        asChild\n        pressed={isActive}\n        onPressedChange={handlePressedChange}\n        onClick={stopPropagation}\n        disabled={disabled}\n        ref={forwardedRef}\n      >\n        <CommentReactionButton\n          data-self={isActive ? \"\" : undefined}\n          reaction={reaction}\n          overrides={overrides}\n          {...props}\n        />\n      </TogglePrimitive.Root>\n    </Tooltip>\n  );\n});\n\nexport const CommentNonInteractiveReaction = forwardRef<\n  HTMLButtonElement,\n  CommentNonInteractiveReactionProps\n>(({ reaction, overrides, ...props }, forwardedRef) => {\n  const currentId = useCurrentUserId();\n  const isActive = useMemo(() => {\n    return reaction.users.some((users) => users.id === currentId);\n  }, [currentId, reaction]);\n\n  return (\n    <CommentReactionButton\n      disableable={false}\n      data-self={isActive ? \"\" : undefined}\n      reaction={reaction}\n      overrides={overrides}\n      {...props}\n      ref={forwardedRef}\n    />\n  );\n});\n\nfunction openAttachment({ attachment, url }: CommentAttachmentArgs) {\n  // Open the attachment in a new tab if the attachment is a PDF,\n  // an image, a video, or audio. Otherwise, download it.\n  if (\n    attachment.mimeType === \"application/pdf\" ||\n    attachment.mimeType.startsWith(\"image/\") ||\n    attachment.mimeType.startsWith(\"video/\") ||\n    attachment.mimeType.startsWith(\"audio/\")\n  ) {\n    window.open(url, \"_blank\");\n  } else {\n    download(url, attachment.name);\n  }\n}\n\nfunction CommentMediaAttachment({\n  attachment,\n  onAttachmentClick,\n  roomId,\n  className,\n  overrides,\n  ...props\n}: CommentAttachmentProps & {\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      if (!url) {\n        return;\n      }\n\n      const args: CommentAttachmentArgs = { attachment, url };\n\n      onAttachmentClick?.(args, event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      openAttachment(args);\n    },\n    [attachment, onAttachmentClick, url]\n  );\n\n  return (\n    <MediaAttachment\n      className={classNames(\"lb-comment-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      overrides={overrides}\n      onClick={url ? handleClick : undefined}\n      roomId={roomId}\n    />\n  );\n}\n\nfunction CommentFileAttachment({\n  attachment,\n  onAttachmentClick,\n  roomId,\n  className,\n  overrides,\n  ...props\n}: CommentAttachmentProps & {\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      if (!url) {\n        return;\n      }\n\n      const args: CommentAttachmentArgs = { attachment, url };\n\n      onAttachmentClick?.(args, event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      openAttachment(args);\n    },\n    [attachment, onAttachmentClick, url]\n  );\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-comment-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      overrides={overrides}\n      onClick={url ? handleClick : undefined}\n      roomId={roomId}\n    />\n  );\n}\n\nexport function CommentNonInteractiveFileAttachment({\n  className,\n  ...props\n}: CommentAttachmentProps) {\n  return (\n    <FileAttachment\n      className={classNames(\"lb-comment-attachment\", className)}\n      allowMediaPreview={false}\n      {...props}\n    />\n  );\n}\n\n// A void component (which doesn't render anything) responsible for marking a thread\n// as read when the comment it's used in becomes visible.\n// Moving this logic into a separate component allows us to use the visibility\n// and focus hooks \"conditionally\" by conditionally rendering this component.\nfunction AutoMarkReadThreadIdHandler({\n  threadId,\n  roomId,\n  commentRef,\n}: {\n  threadId: string;\n  roomId: string;\n  commentRef: RefObject<HTMLElement>;\n}) {\n  const markThreadAsRead = useMarkRoomThreadAsRead(roomId);\n  const isWindowFocused = useWindowFocus();\n\n  useVisibleCallback(\n    commentRef,\n    () => {\n      markThreadAsRead(threadId);\n    },\n    {\n      // The underlying IntersectionObserver is only enabled when the window is focused\n      enabled: isWindowFocused,\n    }\n  );\n\n  return null;\n}\n\n/**\n * Displays a single comment.\n *\n * @example\n * <>\n *   {thread.comments.map((comment) => (\n *     <Comment key={comment.id} comment={comment} />\n *   ))}\n * </>\n */\nexport const Comment = forwardRef<HTMLDivElement, CommentProps>(\n  (\n    {\n      comment,\n      indentContent = true,\n      showDeleted,\n      showActions = \"hover\",\n      showReactions = true,\n      showAttachments = true,\n      showComposerFormattingControls = true,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onCommentEdit,\n      onCommentDelete,\n      overrides,\n      className,\n      additionalActions,\n      additionalActionsClassName,\n      additionalDropdownItemsBefore,\n      additionalDropdownItemsAfter,\n      autoMarkReadThreadId,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const mergedRefs = useRefs(forwardedRef, ref);\n    const currentUserId = useCurrentUserId();\n    const deleteComment = useDeleteRoomComment(comment.roomId);\n    const editComment = useEditRoomComment(comment.roomId);\n    const addReaction = useAddRoomCommentReaction(comment.roomId);\n    const removeReaction = useRemoveRoomCommentReaction(comment.roomId);\n    const $ = useOverrides(overrides);\n    const [isEditing, setEditing] = useState(false);\n    const [isTarget, setTarget] = useState(false);\n    const [isMoreActionOpen, setMoreActionOpen] = useState(false);\n    const [isReactionActionOpen, setReactionActionOpen] = useState(false);\n    const { mediaAttachments, fileAttachments } = useMemo(() => {\n      return separateMediaAttachments(comment.attachments);\n    }, [comment.attachments]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const handleEdit = useCallback(() => {\n      setEditing(true);\n    }, []);\n\n    const handleEditCancel = useCallback(\n      (event: MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setEditing(false);\n      },\n      []\n    );\n\n    const handleEditSubmit = useCallback(\n      (\n        { body, attachments }: ComposerSubmitComment,\n        event: FormEvent<HTMLFormElement>\n      ) => {\n        // TODO: Add a way to preventDefault from within this callback, to override the default behavior (e.g. showing a confirmation dialog)\n        onCommentEdit?.(comment);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n\n        setEditing(false);\n        editComment({\n          commentId: comment.id,\n          threadId: comment.threadId,\n          body,\n          attachments,\n        });\n      },\n      [comment, editComment, onCommentEdit]\n    );\n\n    const handleDelete = useCallback(() => {\n      // TODO: Add a way to preventDefault from within this callback, to override the default behavior (e.g. showing a confirmation dialog)\n      onCommentDelete?.(comment);\n\n      deleteComment({\n        commentId: comment.id,\n        threadId: comment.threadId,\n      });\n    }, [comment, deleteComment, onCommentDelete]);\n\n    const handleAuthorClick = useCallback(\n      (event: MouseEvent<HTMLElement>) => {\n        onAuthorClick?.(comment.userId, event);\n      },\n      [comment.userId, onAuthorClick]\n    );\n\n    const handleReactionSelect = useCallback(\n      (emoji: string) => {\n        const reactionIndex = comment.reactions.findIndex(\n          (reaction) => reaction.emoji === emoji\n        );\n\n        if (\n          reactionIndex >= 0 &&\n          currentUserId &&\n          comment.reactions[reactionIndex]?.users.some(\n            (user) => user.id === currentUserId\n          )\n        ) {\n          removeReaction({\n            threadId: comment.threadId,\n            commentId: comment.id,\n            emoji,\n          });\n        } else {\n          addReaction({\n            threadId: comment.threadId,\n            commentId: comment.id,\n            emoji,\n          });\n        }\n      },\n      [\n        addReaction,\n        comment.id,\n        comment.reactions,\n        comment.threadId,\n        removeReaction,\n        currentUserId,\n      ]\n    );\n\n    useEffect(() => {\n      const isWindowDefined = typeof window !== \"undefined\";\n      if (!isWindowDefined) return;\n\n      const hash = window.location.hash;\n      const commentId = hash.slice(1);\n\n      if (commentId === comment.id) {\n        setTarget(true);\n      }\n    }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n    if (!showDeleted && !comment.body) {\n      return null;\n    }\n\n    return (\n      <TooltipProvider>\n        {autoMarkReadThreadId && (\n          <AutoMarkReadThreadIdHandler\n            commentRef={ref}\n            threadId={autoMarkReadThreadId}\n            roomId={comment.roomId}\n          />\n        )}\n        <div\n          id={comment.id}\n          className={classNames(\n            \"lb-root lb-comment\",\n            indentContent && \"lb-comment:indent-content\",\n            showActions === \"hover\" && \"lb-comment:show-actions-hover\",\n            (isMoreActionOpen || isReactionActionOpen) &&\n              \"lb-comment:action-open\",\n            className\n          )}\n          data-deleted={!comment.body ? \"\" : undefined}\n          data-editing={isEditing ? \"\" : undefined}\n          // In some cases, `:target` doesn't work as expected so we also define it manually.\n          data-target={isTarget ? \"\" : undefined}\n          dir={$.dir}\n          {...props}\n          ref={mergedRefs}\n        >\n          <div className=\"lb-comment-header\">\n            <div className=\"lb-comment-details\">\n              <Avatar\n                className=\"lb-comment-avatar\"\n                userId={comment.userId}\n                onClick={handleAuthorClick}\n              />\n              <span className=\"lb-comment-details-labels\">\n                <User\n                  className=\"lb-comment-author\"\n                  userId={comment.userId}\n                  onClick={handleAuthorClick}\n                />\n                <span className=\"lb-comment-date\">\n                  <Timestamp\n                    locale={$.locale}\n                    date={comment.createdAt}\n                    className=\"lb-date lb-comment-date-created\"\n                  />\n                  {comment.editedAt && comment.body && (\n                    <>\n                      {\" \"}\n                      <span className=\"lb-comment-date-edited\">\n                        {$.COMMENT_EDITED}\n                      </span>\n                    </>\n                  )}\n                </span>\n              </span>\n            </div>\n            {showActions && !isEditing && (\n              <div\n                className={classNames(\n                  \"lb-comment-actions\",\n                  additionalActionsClassName\n                )}\n              >\n                {additionalActions ?? null}\n                {showReactions && (\n                  <EmojiPicker\n                    onEmojiSelect={handleReactionSelect}\n                    onOpenChange={setReactionActionOpen}\n                  >\n                    <Tooltip content={$.COMMENT_ADD_REACTION}>\n                      <EmojiPickerTrigger asChild>\n                        <Button\n                          className=\"lb-comment-action\"\n                          onClick={stopPropagation}\n                          aria-label={$.COMMENT_ADD_REACTION}\n                          icon={<EmojiPlusIcon />}\n                        />\n                      </EmojiPickerTrigger>\n                    </Tooltip>\n                  </EmojiPicker>\n                )}\n                {comment.userId === currentUserId ||\n                additionalDropdownItemsBefore ||\n                additionalDropdownItemsAfter ? (\n                  <Dropdown\n                    open={isMoreActionOpen}\n                    onOpenChange={setMoreActionOpen}\n                    align=\"end\"\n                    content={\n                      <>\n                        {additionalDropdownItemsBefore}\n                        {comment.userId === currentUserId && (\n                          <>\n                            <DropdownItem\n                              onSelect={handleEdit}\n                              onClick={stopPropagation}\n                              icon={<EditIcon />}\n                            >\n                              {$.COMMENT_EDIT}\n                            </DropdownItem>\n                            <DropdownItem\n                              onSelect={handleDelete}\n                              onClick={stopPropagation}\n                              icon={<DeleteIcon />}\n                            >\n                              {$.COMMENT_DELETE}\n                            </DropdownItem>\n                          </>\n                        )}\n                        {additionalDropdownItemsAfter}\n                      </>\n                    }\n                  >\n                    <Tooltip content={$.COMMENT_MORE}>\n                      <DropdownTrigger asChild>\n                        <Button\n                          className=\"lb-comment-action\"\n                          disabled={!comment.body}\n                          onClick={stopPropagation}\n                          aria-label={$.COMMENT_MORE}\n                          icon={<EllipsisIcon />}\n                        />\n                      </DropdownTrigger>\n                    </Tooltip>\n                  </Dropdown>\n                ) : null}\n              </div>\n            )}\n          </div>\n          <div className=\"lb-comment-content\">\n            {isEditing ? (\n              <Composer\n                className=\"lb-comment-composer\"\n                onComposerSubmit={handleEditSubmit}\n                defaultValue={comment.body}\n                defaultAttachments={comment.attachments}\n                autoFocus\n                showAttribution={false}\n                showAttachments={showAttachments}\n                showFormattingControls={showComposerFormattingControls}\n                actions={\n                  <>\n                    <Tooltip\n                      content={$.COMMENT_EDIT_COMPOSER_CANCEL}\n                      aria-label={$.COMMENT_EDIT_COMPOSER_CANCEL}\n                    >\n                      <Button\n                        className=\"lb-composer-action\"\n                        onClick={handleEditCancel}\n                        icon={<CrossIcon />}\n                      />\n                    </Tooltip>\n                    <ShortcutTooltip\n                      content={$.COMMENT_EDIT_COMPOSER_SAVE}\n                      shortcut=\"Enter\"\n                    >\n                      <ComposerPrimitive.Submit asChild>\n                        <Button\n                          variant=\"primary\"\n                          className=\"lb-composer-action\"\n                          onClick={stopPropagation}\n                          aria-label={$.COMMENT_EDIT_COMPOSER_SAVE}\n                          icon={<CheckIcon />}\n                        />\n                      </ComposerPrimitive.Submit>\n                    </ShortcutTooltip>\n                  </>\n                }\n                overrides={{\n                  COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER,\n                }}\n                roomId={comment.roomId}\n              />\n            ) : comment.body ? (\n              <>\n                <CommentPrimitive.Body\n                  className=\"lb-comment-body\"\n                  body={comment.body}\n                  components={{\n                    Mention: ({ userId }) => (\n                      <CommentMention\n                        userId={userId}\n                        onClick={(event) => onMentionClick?.(userId, event)}\n                      />\n                    ),\n                    Link: CommentLink,\n                  }}\n                />\n                {showAttachments &&\n                (mediaAttachments.length > 0 || fileAttachments.length > 0) ? (\n                  <div className=\"lb-comment-attachments\">\n                    {mediaAttachments.length > 0 ? (\n                      <div className=\"lb-attachments\">\n                        {mediaAttachments.map((attachment) => (\n                          <CommentMediaAttachment\n                            key={attachment.id}\n                            attachment={attachment}\n                            overrides={overrides}\n                            onAttachmentClick={onAttachmentClick}\n                            roomId={comment.roomId}\n                          />\n                        ))}\n                      </div>\n                    ) : null}\n                    {fileAttachments.length > 0 ? (\n                      <div className=\"lb-attachments\">\n                        {fileAttachments.map((attachment) => (\n                          <CommentFileAttachment\n                            key={attachment.id}\n                            attachment={attachment}\n                            overrides={overrides}\n                            onAttachmentClick={onAttachmentClick}\n                            roomId={comment.roomId}\n                          />\n                        ))}\n                      </div>\n                    ) : null}\n                  </div>\n                ) : null}\n                {showReactions && comment.reactions.length > 0 && (\n                  <div className=\"lb-comment-reactions\">\n                    {comment.reactions.map((reaction) => (\n                      <CommentReaction\n                        key={reaction.emoji}\n                        comment={comment}\n                        reaction={reaction}\n                        overrides={overrides}\n                      />\n                    ))}\n                    <EmojiPicker onEmojiSelect={handleReactionSelect}>\n                      <Tooltip content={$.COMMENT_ADD_REACTION}>\n                        <EmojiPickerTrigger asChild>\n                          <Button\n                            className=\"lb-comment-reaction lb-comment-reaction-add\"\n                            variant=\"outline\"\n                            onClick={stopPropagation}\n                            aria-label={$.COMMENT_ADD_REACTION}\n                            icon={<EmojiPlusIcon />}\n                          />\n                        </EmojiPickerTrigger>\n                      </Tooltip>\n                    </EmojiPicker>\n                  </div>\n                )}\n              </>\n            ) : (\n              <div className=\"lb-comment-body\">\n                <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n              </div>\n            )}\n          </div>\n        </div>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA;AAoHO;AAAwB;AAC7B;AACA;AAEF;AACE;AACA;AACG;AACsD;AACd;AACnC;AAEH;AAAA;AACA;AAAK;AAAgB;AAAA;AAG5B;AAEO;AAAqB;AAC1B;AACA;AACA;AAEF;AACE;AACG;AACmD;AAClD;AACI;AAEH;AAGP;AAEO;AAAmC;AAClC;AACN;AACA;AAEF;AACE;AACG;AAAuD;AAAO;AAC5D;AAGP;AAEA;AAIE;AACA;AACG;AACuD;AAC9C;AACM;AACH;AACM;AACjB;AACI;AACC;AAEL;AAAC;AAAgB;AAA4C;AAAO;AACnE;AAAe;AAA4C;AAAO;AAAA;AAGzE;AAEa;AAIX;AACA;AACA;AACA;AACE;AAA4D;AAE9D;AACA;AAAuB;AAElB;AACI;AACA;AAEI;AAAkC;AAAe;AACnD;AACkB;AACT;AACA;AACZ;AACS;AACM;AACjB;AACF;AAEU;AAGd;AACE;AAAsB;AAGxB;AAA4B;AAExB;AACE;AAAY;AACQ;AACC;AACH;AACjB;AAED;AAAe;AACK;AACC;AACH;AACjB;AACH;AACF;AAC0E;AAG5E;AACG;AACU;AACA;AACC;AAET;AACQ;AACE;AACQ;AACR;AACT;AACK;AAEJ;AAC4B;AAC3B;AACA;AACI;AACN;AACF;AAGN;AAEa;AAIX;AACA;AACE;AAA4D;AAG9D;AACG;AACc;AACc;AAC3B;AACA;AACI;AACC;AAGX;AAEA;AAGE;AAME;AAAyB;AAEzB;AAA6B;AAEjC;AAEA;AAAgC;AAC9B;AACA;AACA;AACA;AACA;AAEF;AAGE;AAEA;AAAoB;AAEhB;AACE;AAAA;AAGF;AAEA;AAEA;AACE;AAAA;AAGF;AAAmB;AACrB;AACmC;AAGrC;AACG;AACyD;AACpD;AACJ;AACA;AAC6B;AAC7B;AAGN;AAEA;AAA+B;AAC7B;AACA;AACA;AACA;AACA;AAEF;AAGE;AAEA;AAAoB;AAEhB;AACE;AAAA;AAGF;AAEA;AAEA;AACE;AAAA;AAGF;AAAmB;AACrB;AACmC;AAGrC;AACG;AACyD;AACpD;AACJ;AACA;AAC6B;AAC7B;AAGN;AAEO;AAA6C;AAClD;AAEF;AACE;AACG;AACyD;AACrC;AACf;AAGV;AAMA;AAAqC;AACnC;AACA;AAEF;AAKE;AACA;AAEA;AAAA;AACE;AAEE;AAAyB;AAC3B;AACA;AAEW;AACX;AAGF;AACF;AAYO;AAAgB;AAEnB;AACE;AACgB;AAChB;AACc;AACE;AACE;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AAAmD;AAGrD;AACE;AAAsB;AAGxB;AACE;AAAe;AAGjB;AAAyB;AAErB;AACA;AAAgB;AAClB;AACC;AAGH;AAAyB;AAMrB;AAEA;AACE;AAAA;AAGF;AACA;AAEA;AACA;AAAY;AACS;AACD;AAClB;AACA;AACD;AACH;AACoC;AAGtC;AAEE;AAEA;AAAc;AACO;AACD;AACnB;AAGH;AAA0B;AAEtB;AAAqC;AACvC;AAC8B;AAGhC;AAA6B;AAEzB;AAAwC;AACL;AAGnC;AAG0C;AAChB;AAGxB;AAAe;AACK;AACC;AACnB;AACD;AAED;AAAY;AACQ;AACC;AACnB;AACD;AACH;AACF;AACA;AACE;AACQ;AACA;AACA;AACR;AACA;AACF;AAGF;AACE;AACA;AAAsB;AAEtB;AACA;AAEA;AACE;AAAc;AAChB;AAGF;AACE;AAAO;AAGT;AACG;AACE;AACE;AACa;AACF;AACM;AAClB;AAED;AACa;AACD;AACT;AACiB;AACU;AAEzB;AACF;AACF;AACmC;AACJ;AAEF;AACtB;AACH;AACC;AAEL;AAAC;AAAc;AACb;AAAC;AAAc;AACb;AAAC;AACW;AACM;AACP;AACX;AACC;AAAe;AACd;AAAC;AACW;AACM;AACP;AACX;AACC;AAAe;AACd;AAAC;AACW;AACI;AACJ;AACZ;AAEE;AACG;AAAA;AACA;AAAe;AACX;AACL;AAAA;AACF;AAAA;AAEJ;AAAA;AACF;AAAA;AACF;AAEG;AACY;AACT;AACA;AACF;AAEC;AAAqB;AAEnB;AACgB;AACD;AAEb;AAAmB;AACjB;AAA0B;AACxB;AACW;AACD;AACK;AACO;AACvB;AACF;AACF;AACF;AAKC;AACO;AACQ;AACR;AAEJ;AACG;AAAA;AAEC;AACE;AAAC;AACW;AACD;AACO;AAEb;AACL;AACC;AACW;AACD;AACS;AAEf;AACL;AAAA;AACF;AAED;AAAA;AACH;AAGD;AAAmB;AACjB;AAAuB;AACrB;AACW;AACS;AACV;AACK;AACM;AACtB;AACF;AACF;AAEA;AAAA;AACN;AAAA;AAEJ;AACC;AAAc;AAEV;AACW;AACQ;AACI;AACM;AACnB;AACQ;AACjB;AACwB;AAEtB;AACE;AAAC;AACY;AACG;AAEb;AACW;AACD;AACQ;AACnB;AACF;AACC;AACY;AACF;AAER;AAAgC;AAC9B;AACS;AACE;AACD;AACK;AACG;AACnB;AACF;AACF;AAAA;AACF;AAES;AACe;AAC1B;AACgB;AAGlB;AACE;AAAC;AACW;AACI;AACF;AAEP;AACC;AACkD;AACpD;AAEI;AACR;AACF;AAGG;AAAc;AACZ;AACE;AAAc;AAEV;AAEC;AACA;AACA;AACgB;AAEnB;AAED;AAED;AAAc;AAEV;AAEC;AACA;AACA;AACgB;AAEnB;AAED;AAAA;AAEJ;AAED;AAAc;AACZ;AACE;AAEC;AACA;AACA;AAEH;AACA;AAA2B;AACzB;AAAmB;AACjB;AAA0B;AACxB;AACW;AACF;AACC;AACK;AACO;AACvB;AACF;AACF;AACF;AAAA;AACF;AAAA;AAIH;AAAc;AACZ;AAAY;AAAwB;AAAgB;AACvD;AAEJ;AAAA;AACF;AAAA;AACF;AAGN;;;;;;;;"}

package/dist/components/Comment.js

@@ -3,6 +3,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useAddRoomCommentReaction, useRemoveRoomCommentReaction, useRoomAttachmentUrl, useMarkRoomThreadAsRead, useDeleteRoomComment, useEditRoomComment } from '@liveblocks/react/_private';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { forwardRef, useMemo, useCallback, useRef, useState, useEffect } from 'react';
+import { MENTION_CHARACTER } from '../constants.js';
 import { CheckIcon } from '../icons/Check.js';
 import { CrossIcon } from '../icons/Cross.js';
 import { DeleteIcon } from '../icons/Delete.js';
@@ -14,7 +15,6 @@ import { Mention as CommentMention$1, Link as CommentLink$1, Body as CommentBody
 import { Submit as ComposerSubmit } from '../primitives/Composer/index.js';
 import { Timestamp } from '../primitives/Timestamp.js';
 import { useCurrentUserId } from '../shared.js';
-import { MENTION_CHARACTER } from '../slate/plugins/mentions.js';
 import { classNames } from '../utils/class-names.js';
 import { download } from '../utils/download.js';
 import { useRefs } from '../utils/use-refs.js';