@liveblocks/react-ui 3.18.2 → 3.18.3-test2

package/LICENSE

@@ -0,0 +1,16 @@
+Copyright 2021-present Liveblocks
+
+This repository contains software under two licenses:
+
+1. Most of the code in this repository is licensed under the
+   Apache License 2.0 — see licenses/LICENSE-APACHE-2.0 for the
+   full license text.
+
+2. The following components are licensed under the
+   GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later)
+   — see licenses/LICENSE-AGPL-3.0 for the full license text:
+
+   - packages/liveblocks-server (published as @liveblocks/server)
+   - tools/liveblocks-cli (published as liveblocks)
+
+Each package's own LICENSE or package.json specifies its applicable license.

package/dist/_private/index.d.cts

@@ -360,7 +360,7 @@ interface ShortcutTooltipProps extends TooltipProps {
 }
 declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLButtonElement>>;
 declare const ShortcutTooltip: react.ForwardRefExoticComponent<ShortcutTooltipProps & react.RefAttributes<HTMLButtonElement>>;
-declare const TooltipProvider: react.FC<Tooltip$1.TooltipProviderProps>;
+declare const TooltipProvider: typeof Tooltip$1.Provider;
 
 interface UserProps extends ComponentProps<"span"> {
     /**

package/dist/_private/index.d.ts

@@ -360,7 +360,7 @@ interface ShortcutTooltipProps extends TooltipProps {
 }
 declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLButtonElement>>;
 declare const ShortcutTooltip: react.ForwardRefExoticComponent<ShortcutTooltipProps & react.RefAttributes<HTMLButtonElement>>;
-declare const TooltipProvider: react.FC<Tooltip$1.TooltipProviderProps>;
+declare const TooltipProvider: typeof Tooltip$1.Provider;
 
 interface UserProps extends ComponentProps<"span"> {
     /**

package/dist/components/AiTool.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AiTool.cjs","sources":["../../src/components/AiTool.tsx"],"sourcesContent":["import type {\n  AiToolExecuteCallback,\n  AiToolTypePack,\n  JsonObject,\n  NoInfr,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Children, forwardRef, useCallback, useMemo } from \"react\";\n\nimport { Button } from \"../_private\";\nimport {\n  CheckCircleFillIcon,\n  ChevronRightIcon,\n  CrossCircleFillIcon,\n  MinusCircleIcon,\n  SpinnerIcon,\n} from \"../icons\";\nimport {\n  type AiToolConfirmationOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport { useAiToolInvocationContext } from \"../primitives/AiMessage/contexts\";\nimport * as Collapsible from \"../primitives/Collapsible\";\nimport { cn } from \"../utils/cn\";\nimport { useSemiControllableState } from \"../utils/use-controllable-state\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\n\nexport interface AiToolProps\n  extends Omit<ComponentProps<\"div\">, \"title\" | \"children\"> {\n  /**\n   * The tool's title.\n   *\n   * By default, a human-readable version of the tool's name is used:\n   * - `\"showTodo\"` → \"Show todo\"\n   * - `\"get_weather\"` → \"Get weather\"\n   */\n  title?: ReactNode;\n\n  /**\n   * An optional icon displayed next to the title.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The content shown in the tool.\n   */\n  children?: ReactNode;\n\n  /**\n   * The visual appearance of the tool.\n   */\n  variant?: \"block\" | \"minimal\";\n\n  /**\n   * Whether the content is currently collapsed.\n   * It is not a traditional controlled value, as in if you set it to `true` it would only stay expanded.\n   * Instead, it is \"semi-controlled\", meaning that setting it to `true` will expand it, but it\n   * can still be collapsed/expanded by clicking on it.\n   */\n  collapsed?: boolean;\n\n  /**\n   * The event handler called when the content is collapsed or expanded by clicking on it.\n   */\n  onCollapsedChange?: (collapsed: boolean) => void;\n\n  /**\n   * Whether the content can be collapsed/expanded.\n   * If set to `false`, clicking on it will have no effect.\n   * If there's no content, this prop has no effect.\n   */\n  collapsible?: boolean;\n}\n\nexport type AiToolIconProps = ComponentProps<\"div\">;\n\nexport type AiToolInspectorProps = ComponentProps<\"div\">;\n\nexport interface AiToolConfirmationProps<\n  A extends JsonObject,\n  R extends JsonObject,\n> extends ComponentProps<\"div\"> {\n  /**\n   * The callback invoked when the user clicks the confirm button.\n   */\n  confirm: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The callback invoked when the user clicks the cancel button.\n   */\n  cancel?: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The visual appearance.\n   */\n  variant?: \"default\" | \"destructive\";\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiToolConfirmationOverrides>;\n\n  /**\n   * The tool's result type, to be used with the `types` prop in the `render` method.\n   *\n   * @example\n   * defineAiTool<{ value: number }>()({\n   *   // ...\n   *   render: ({ types }) => (\n   *     <AiTool.Confirmation\n   *       types={types}\n   *       confirm={() => {\n   *         return {\n   *           // Using `types` makes the result type-safe\n   *           // based on the tool's definition\n   *           data: { value: 123 },\n   *         };\n   *       }}\n   *     />\n   *   ),\n   * })\n   */\n  types?: NoInfr<AiToolTypePack<A, R>>;\n}\n\nfunction AiToolIcon({ className, ...props }: AiToolIconProps) {\n  return <div className={cn(\"lb-ai-tool-icon\", className)} {...props} />;\n}\n\nfunction AiToolInspector({ className, ...props }: AiToolInspectorProps) {\n  const { args, partialArgs, result } = useAiToolInvocationContext();\n\n  return (\n    <div className={cn(\"lb-ai-tool-inspector\", className)} {...props}>\n      <CodeBlock\n        title=\"Arguments\"\n        code={JSON.stringify(args ?? partialArgs, null, 2)}\n      />\n      {result !== undefined ? (\n        <CodeBlock title=\"Result\" code={JSON.stringify(result, null, 2)} />\n      ) : null}\n    </div>\n  );\n}\n\nfunction AiToolConfirmation<\n  TPack extends AiToolTypePack,\n  A extends JsonObject = TPack[\"A\"],\n  R extends JsonObject = TPack[\"R\"],\n>({\n  children,\n  variant = \"default\",\n  confirm,\n  cancel,\n  overrides,\n  className,\n  ...props\n}: AiToolConfirmationProps<A, R>) {\n  const { stage, args, respond, name, invocationId } =\n    useAiToolInvocationContext();\n  const $ = useOverrides(overrides);\n\n  const enabled = stage === \"executing\";\n\n  const context = useMemo(() => ({ name, invocationId }), [name, invocationId]);\n\n  const onConfirmClick = useCallback(async () => {\n    if (enabled) {\n      const result = await confirm(args as A, context);\n      respond(result ?? undefined);\n    }\n  }, [enabled, args, confirm, respond, context]);\n\n  const onCancelClick = useCallback(async () => {\n    if (enabled) {\n      if (cancel === undefined) {\n        respond({ cancel: true });\n      } else {\n        const result = await cancel(args as A, context);\n        respond(result ?? undefined);\n      }\n    }\n  }, [enabled, args, cancel, respond, context]);\n\n  // If there's no content and the tool has been executed (so there's no\n  // confirmation UI displayed either), don't render anything.\n  if (stage === \"executed\" && !children) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"lb-ai-tool-confirmation\", className)} {...props}>\n      {children ? (\n        <div className=\"lb-ai-tool-confirmation-content\">{children}</div>\n      ) : null}\n      {stage !== \"executed\" && (\n        <div className=\"lb-ai-tool-confirmation-footer\">\n          <div className=\"lb-ai-tool-confirmation-actions\">\n            <Button\n              disabled={!enabled}\n              onClick={onCancelClick}\n              variant=\"secondary\"\n            >\n              {$.AI_TOOL_CONFIRMATION_CANCEL}\n            </Button>\n            <Button\n              disabled={!enabled}\n              onClick={onConfirmClick}\n              variant={variant === \"destructive\" ? \"destructive\" : \"primary\"}\n            >\n              {$.AI_TOOL_CONFIRMATION_CONFIRM}\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction prettifyString(string: string) {\n  return (\n    string\n      // Convert camelCase to spaces\n      .replace(/([a-z])([A-Z])/g, \"$1 $2\")\n      // Convert snake_case and kebab-case to spaces\n      .replace(/[_-]+/g, \" \")\n      // Collapse multiple following spaces\n      .replace(/\\s+/g, \" \")\n      // Trim leading and trailing spaces\n      .trim()\n      // Capitalize first word\n      .toLowerCase()\n      .replace(/^\\w/, (character) => character.toUpperCase())\n  );\n}\n\n/**\n * A pre-built component which displays a tool call.\n *\n * By default, a human-readable version of the tool's name is used as a title:\n * - `\"showTodo\"` → \"Show todo\"\n * - `\"get_weather\"` → \"Get weather\"\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool />\n *   ),\n * })\n *\n * It can be customized in various ways:\n * - adding an icon\n * - customizing the title (even dynamically)\n * - adding custom content inside it\n * - collapsing it conditionally\n * - etc.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: ({ stage, result }) => (\n *     <AiTool\n *       icon=\"🔍\"\n *\n *       // Override the default title based on the tool's stage\n *       title={stage === \"executing\" ? \"Searching…\" : \"Search results\"}\n *\n *       // Start open and automatically collapse after it is executed\n *       // The user can still expand/collapse it manually at any time\n *       collapsed={stage === \"executed\"}\n *     >\n *       <SearchResults data={result.data} />\n *     </AiTool>\n *   ),\n * })\n *\n * It also comes with a few built-in sub-components:\n * - `AiTool.Confirmation` to display a human-in-the-loop confirmation step\n *   which can be accepted or cancelled by the user.\n * - `AiTool.Inspector` to display the tool's arguments and result which can\n *   be useful during development.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Confirmation\n *         // Use a destructive visual appearance\n *         variant=\"destructive\"\n *\n *         // The tool's arguments can be directly accessed like in `execute`\n *         confirm={({ pageIds }) => {\n *           const deletedPageTitles = pages\n *             .filter((p) => pageIds.includes(p.id))\n *             .map((page) => page.title);\n *\n *           deletePages(pageIds);\n *\n *           // This result will be available as `result` in the tool's `render` props\n *           return { data: { deletedPageTitles } };\n *         }}\n *\n *         // If needed, `cancel={() => ...}` would work similarly\n *       >\n *         Do you want to delete these pages?\n *         <PagesPreviews />\n *       </AiTool.Confirmation>\n *     </AiTool>\n *   ),\n * })\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Inspector />\n *     </AiTool>\n *   ),\n * })\n */\nexport const AiTool = Object.assign(\n  forwardRef<HTMLDivElement, AiToolProps>(\n    (\n      {\n        children,\n        title,\n        icon,\n        collapsible,\n        collapsed,\n        onCollapsedChange,\n        variant = \"block\",\n        className,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const {\n        stage,\n        result,\n        name,\n        [kInternal]: { execute, messageStatus },\n      } = useAiToolInvocationContext();\n      // Only mark the tool as pending visually (e.g. show a spinner, add a shimmer animation, etc.)\n      // if it has an `execute` method and it isn't in the \"executed\" stage.\n      const isVisuallyPending =\n        execute !== undefined &&\n        stage !== \"executed\" &&\n        // If it's in the \"receiving\" stage, we also check that the outer message is still generating.\n        (stage === \"receiving\" ? messageStatus === \"generating\" : true);\n      const [semiControlledCollapsed, onSemiControlledCollapsed] =\n        useSemiControllableState(collapsed ?? false, onCollapsedChange);\n      // TODO: This check won't work for cases like:\n      //         <AiTool>\n      //           <ComponentThatRendersNull />\n      //           <ComponentThatAlsoRendersNull />\n      //         </AiTool>\n      //       One solution could be to check the DOM on every render with `useLayoutEffect`\n      //       to see if there's any actual content.\n      //       For now we're limiting the visual issues caused by the above by using CSS's\n      //       `:empty` pseudo-class to make the content 0px high if it's actually empty.\n      const hasContent = Children.count(children) > 0;\n      // If there's no content, the tool is never collapsible.\n      const isCollapsible = hasContent ? (collapsible ?? true) : false;\n      const resolvedTitle = useMemo(() => {\n        return title ?? prettifyString(name);\n      }, [title, name]);\n\n      // `AiTool` uses \"collapsed\" instead of \"open\" (like the `Composer` component) because \"open\"\n      // makes sense next to something called \"Collapsible\" but less so for something called \"AiTool\".\n      const handleCollapsibleOpenChange = useCallback(\n        (open: boolean) => {\n          onSemiControlledCollapsed(!open);\n        },\n        [onSemiControlledCollapsed]\n      );\n\n      return (\n        <Collapsible.Root\n          ref={forwardedRef}\n          className={cn(\n            \"lb-collapsible lb-ai-tool\",\n            `lb-ai-tool:variant-${variant}`,\n            className\n          )}\n          {...props}\n          // Regardless of `semiControlledCollapsed`, the collapsible is closed if there's no content.\n          open={hasContent ? !semiControlledCollapsed : false}\n          onOpenChange={handleCollapsibleOpenChange}\n          disabled={!isCollapsible}\n          data-result={result?.type}\n          data-stage={stage}\n        >\n          <Collapsible.Trigger\n            className={cn(\n              \"lb-collapsible-trigger lb-ai-tool-header\",\n              variant === \"minimal\" && isVisuallyPending && \"lb-ai-chat-pending\"\n            )}\n          >\n            {icon ? (\n              <div className=\"lb-ai-tool-header-icon-container\">{icon}</div>\n            ) : null}\n            <span className=\"lb-ai-tool-header-title\">{resolvedTitle}</span>\n            {isCollapsible ? (\n              <span className=\"lb-collapsible-chevron lb-icon-container\">\n                <ChevronRightIcon />\n              </span>\n            ) : null}\n            {variant !== \"minimal\" ? (\n              <div className=\"lb-ai-tool-header-status\">\n                {stage === \"executed\" ? (\n                  result.type === \"success\" ? (\n                    <CheckCircleFillIcon />\n                  ) : result.type === \"error\" ? (\n                    <CrossCircleFillIcon />\n                  ) : result.type === \"cancelled\" ? (\n                    <MinusCircleIcon />\n                  ) : null\n                ) : isVisuallyPending ? (\n                  <SpinnerIcon />\n                ) : null}\n              </div>\n            ) : null}\n          </Collapsible.Trigger>\n\n          {hasContent ? (\n            <Collapsible.Content className=\"lb-collapsible-content lb-ai-tool-content-container\">\n              <div className=\"lb-ai-tool-content\">{children}</div>\n            </Collapsible.Content>\n          ) : null}\n        </Collapsible.Root>\n      );\n    }\n  ),\n  {\n    /**\n     * Display an icon in a container.\n     *\n     * @example\n     * <AiTool\n     *   icon={\n     *     <AiTool.Icon>🔍</AiTool.Icon>\n     *   }\n     * />\n     */\n    Icon: AiToolIcon,\n\n    /**\n     * Display the tool's arguments and result, which can be useful during\n     * development.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Inspector />\n     * </AiTool>\n     */\n    Inspector: AiToolInspector,\n\n    /**\n     * Display a human-in-the-loop confirmation step which can be accepted\n     * or cancelled by the user.\n     *\n     * The `confirm` and `cancel` callbacks work like `execute` in tool definitions: they can\n     * perform side-effects, be async if needed, and return a result. The tool call will stay\n     * pending until either `confirm` or `cancel` is called.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Confirmation\n     *     // Use a destructive visual appearance\n     *     variant=\"destructive\"\n     *\n     *     // The tool's arguments can be directly accessed like in `execute`\n     *     confirm={({ pageIds }) => {\n     *       const deletedPageTitles = pages\n     *         .filter((p) => pageIds.includes(p.id))\n     *         .map((page) => page.title);\n     *\n     *       deletePages(pageIds);\n     *\n     *       // This result will be available as `result` in the tool's `render` props\n     *       return { data: { deletedPageTitles } };\n     *     }}\n     *\n     *     // If needed, `cancel={() => ...}` would work similarly\n     *   >\n     *     Do you want to delete these pages?\n     *     <PagesPreviews />\n     *   </AiTool.Confirmation>\n     * </AiTool>\n     */\n    Confirmation: AiToolConfirmation,\n  }\n);\n"],"names":["jsx","cn","useAiToolInvocationContext","jsxs","CodeBlock","overrides","useOverrides","useMemo","useCallback","Button","forwardRef","kInternal","useSemiControllableState","Children","Collapsible.Root","Collapsible.Trigger","ChevronRightIcon","CheckCircleFillIcon","CrossCircleFillIcon","MinusCircleIcon","SpinnerIcon","Collapsible.Content"],"mappings":"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"}
+{"version":3,"file":"AiTool.cjs","sources":["../../src/components/AiTool.tsx"],"sourcesContent":["import type {\n  AiToolExecuteCallback,\n  AiToolTypePack,\n  JsonObject,\n  NoInfr,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Children, forwardRef, useCallback, useMemo } from \"react\";\n\nimport { Button } from \"../_private\";\nimport {\n  CheckCircleFillIcon,\n  ChevronRightIcon,\n  CrossCircleFillIcon,\n  MinusCircleIcon,\n  SpinnerIcon,\n} from \"../icons\";\nimport {\n  type AiToolConfirmationOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport { useAiToolInvocationContext } from \"../primitives/AiMessage/contexts\";\nimport * as Collapsible from \"../primitives/Collapsible\";\nimport { cn } from \"../utils/cn\";\nimport { useSemiControllableState } from \"../utils/use-controllable-state\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\n\nexport interface AiToolProps extends Omit<\n  ComponentProps<\"div\">,\n  \"title\" | \"children\"\n> {\n  /**\n   * The tool's title.\n   *\n   * By default, a human-readable version of the tool's name is used:\n   * - `\"showTodo\"` → \"Show todo\"\n   * - `\"get_weather\"` → \"Get weather\"\n   */\n  title?: ReactNode;\n\n  /**\n   * An optional icon displayed next to the title.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The content shown in the tool.\n   */\n  children?: ReactNode;\n\n  /**\n   * The visual appearance of the tool.\n   */\n  variant?: \"block\" | \"minimal\";\n\n  /**\n   * Whether the content is currently collapsed.\n   * It is not a traditional controlled value, as in if you set it to `true` it would only stay expanded.\n   * Instead, it is \"semi-controlled\", meaning that setting it to `true` will expand it, but it\n   * can still be collapsed/expanded by clicking on it.\n   */\n  collapsed?: boolean;\n\n  /**\n   * The event handler called when the content is collapsed or expanded by clicking on it.\n   */\n  onCollapsedChange?: (collapsed: boolean) => void;\n\n  /**\n   * Whether the content can be collapsed/expanded.\n   * If set to `false`, clicking on it will have no effect.\n   * If there's no content, this prop has no effect.\n   */\n  collapsible?: boolean;\n}\n\nexport type AiToolIconProps = ComponentProps<\"div\">;\n\nexport type AiToolInspectorProps = ComponentProps<\"div\">;\n\nexport interface AiToolConfirmationProps<\n  A extends JsonObject,\n  R extends JsonObject,\n> extends ComponentProps<\"div\"> {\n  /**\n   * The callback invoked when the user clicks the confirm button.\n   */\n  confirm: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The callback invoked when the user clicks the cancel button.\n   */\n  cancel?: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The visual appearance.\n   */\n  variant?: \"default\" | \"destructive\";\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiToolConfirmationOverrides>;\n\n  /**\n   * The tool's result type, to be used with the `types` prop in the `render` method.\n   *\n   * @example\n   * defineAiTool<{ value: number }>()({\n   *   // ...\n   *   render: ({ types }) => (\n   *     <AiTool.Confirmation\n   *       types={types}\n   *       confirm={() => {\n   *         return {\n   *           // Using `types` makes the result type-safe\n   *           // based on the tool's definition\n   *           data: { value: 123 },\n   *         };\n   *       }}\n   *     />\n   *   ),\n   * })\n   */\n  types?: NoInfr<AiToolTypePack<A, R>>;\n}\n\nfunction AiToolIcon({ className, ...props }: AiToolIconProps) {\n  return <div className={cn(\"lb-ai-tool-icon\", className)} {...props} />;\n}\n\nfunction AiToolInspector({ className, ...props }: AiToolInspectorProps) {\n  const { args, partialArgs, result } = useAiToolInvocationContext();\n\n  return (\n    <div className={cn(\"lb-ai-tool-inspector\", className)} {...props}>\n      <CodeBlock\n        title=\"Arguments\"\n        code={JSON.stringify(args ?? partialArgs, null, 2)}\n      />\n      {result !== undefined ? (\n        <CodeBlock title=\"Result\" code={JSON.stringify(result, null, 2)} />\n      ) : null}\n    </div>\n  );\n}\n\nfunction AiToolConfirmation<\n  TPack extends AiToolTypePack,\n  A extends JsonObject = TPack[\"A\"],\n  R extends JsonObject = TPack[\"R\"],\n>({\n  children,\n  variant = \"default\",\n  confirm,\n  cancel,\n  overrides,\n  className,\n  ...props\n}: AiToolConfirmationProps<A, R>) {\n  const { stage, args, respond, name, invocationId } =\n    useAiToolInvocationContext();\n  const $ = useOverrides(overrides);\n\n  const enabled = stage === \"executing\";\n\n  const context = useMemo(() => ({ name, invocationId }), [name, invocationId]);\n\n  const onConfirmClick = useCallback(async () => {\n    if (enabled) {\n      const result = await confirm(args as A, context);\n      respond(result ?? undefined);\n    }\n  }, [enabled, args, confirm, respond, context]);\n\n  const onCancelClick = useCallback(async () => {\n    if (enabled) {\n      if (cancel === undefined) {\n        respond({ cancel: true });\n      } else {\n        const result = await cancel(args as A, context);\n        respond(result ?? undefined);\n      }\n    }\n  }, [enabled, args, cancel, respond, context]);\n\n  // If there's no content and the tool has been executed (so there's no\n  // confirmation UI displayed either), don't render anything.\n  if (stage === \"executed\" && !children) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"lb-ai-tool-confirmation\", className)} {...props}>\n      {children ? (\n        <div className=\"lb-ai-tool-confirmation-content\">{children}</div>\n      ) : null}\n      {stage !== \"executed\" && (\n        <div className=\"lb-ai-tool-confirmation-footer\">\n          <div className=\"lb-ai-tool-confirmation-actions\">\n            <Button\n              disabled={!enabled}\n              onClick={onCancelClick}\n              variant=\"secondary\"\n            >\n              {$.AI_TOOL_CONFIRMATION_CANCEL}\n            </Button>\n            <Button\n              disabled={!enabled}\n              onClick={onConfirmClick}\n              variant={variant === \"destructive\" ? \"destructive\" : \"primary\"}\n            >\n              {$.AI_TOOL_CONFIRMATION_CONFIRM}\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction prettifyString(string: string) {\n  return (\n    string\n      // Convert camelCase to spaces\n      .replace(/([a-z])([A-Z])/g, \"$1 $2\")\n      // Convert snake_case and kebab-case to spaces\n      .replace(/[_-]+/g, \" \")\n      // Collapse multiple following spaces\n      .replace(/\\s+/g, \" \")\n      // Trim leading and trailing spaces\n      .trim()\n      // Capitalize first word\n      .toLowerCase()\n      .replace(/^\\w/, (character) => character.toUpperCase())\n  );\n}\n\n/**\n * A pre-built component which displays a tool call.\n *\n * By default, a human-readable version of the tool's name is used as a title:\n * - `\"showTodo\"` → \"Show todo\"\n * - `\"get_weather\"` → \"Get weather\"\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool />\n *   ),\n * })\n *\n * It can be customized in various ways:\n * - adding an icon\n * - customizing the title (even dynamically)\n * - adding custom content inside it\n * - collapsing it conditionally\n * - etc.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: ({ stage, result }) => (\n *     <AiTool\n *       icon=\"🔍\"\n *\n *       // Override the default title based on the tool's stage\n *       title={stage === \"executing\" ? \"Searching…\" : \"Search results\"}\n *\n *       // Start open and automatically collapse after it is executed\n *       // The user can still expand/collapse it manually at any time\n *       collapsed={stage === \"executed\"}\n *     >\n *       <SearchResults data={result.data} />\n *     </AiTool>\n *   ),\n * })\n *\n * It also comes with a few built-in sub-components:\n * - `AiTool.Confirmation` to display a human-in-the-loop confirmation step\n *   which can be accepted or cancelled by the user.\n * - `AiTool.Inspector` to display the tool's arguments and result which can\n *   be useful during development.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Confirmation\n *         // Use a destructive visual appearance\n *         variant=\"destructive\"\n *\n *         // The tool's arguments can be directly accessed like in `execute`\n *         confirm={({ pageIds }) => {\n *           const deletedPageTitles = pages\n *             .filter((p) => pageIds.includes(p.id))\n *             .map((page) => page.title);\n *\n *           deletePages(pageIds);\n *\n *           // This result will be available as `result` in the tool's `render` props\n *           return { data: { deletedPageTitles } };\n *         }}\n *\n *         // If needed, `cancel={() => ...}` would work similarly\n *       >\n *         Do you want to delete these pages?\n *         <PagesPreviews />\n *       </AiTool.Confirmation>\n *     </AiTool>\n *   ),\n * })\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Inspector />\n *     </AiTool>\n *   ),\n * })\n */\nexport const AiTool = Object.assign(\n  forwardRef<HTMLDivElement, AiToolProps>(\n    (\n      {\n        children,\n        title,\n        icon,\n        collapsible,\n        collapsed,\n        onCollapsedChange,\n        variant = \"block\",\n        className,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const {\n        stage,\n        result,\n        name,\n        [kInternal]: { execute, messageStatus },\n      } = useAiToolInvocationContext();\n      // Only mark the tool as pending visually (e.g. show a spinner, add a shimmer animation, etc.)\n      // if it has an `execute` method and it isn't in the \"executed\" stage.\n      const isVisuallyPending =\n        execute !== undefined &&\n        stage !== \"executed\" &&\n        // If it's in the \"receiving\" stage, we also check that the outer message is still generating.\n        (stage === \"receiving\" ? messageStatus === \"generating\" : true);\n      const [semiControlledCollapsed, onSemiControlledCollapsed] =\n        useSemiControllableState(collapsed ?? false, onCollapsedChange);\n      // TODO: This check won't work for cases like:\n      //         <AiTool>\n      //           <ComponentThatRendersNull />\n      //           <ComponentThatAlsoRendersNull />\n      //         </AiTool>\n      //       One solution could be to check the DOM on every render with `useLayoutEffect`\n      //       to see if there's any actual content.\n      //       For now we're limiting the visual issues caused by the above by using CSS's\n      //       `:empty` pseudo-class to make the content 0px high if it's actually empty.\n      const hasContent = Children.count(children) > 0;\n      // If there's no content, the tool is never collapsible.\n      const isCollapsible = hasContent ? (collapsible ?? true) : false;\n      const resolvedTitle = useMemo(() => {\n        return title ?? prettifyString(name);\n      }, [title, name]);\n\n      // `AiTool` uses \"collapsed\" instead of \"open\" (like the `Composer` component) because \"open\"\n      // makes sense next to something called \"Collapsible\" but less so for something called \"AiTool\".\n      const handleCollapsibleOpenChange = useCallback(\n        (open: boolean) => {\n          onSemiControlledCollapsed(!open);\n        },\n        [onSemiControlledCollapsed]\n      );\n\n      return (\n        <Collapsible.Root\n          ref={forwardedRef}\n          className={cn(\n            \"lb-collapsible lb-ai-tool\",\n            `lb-ai-tool:variant-${variant}`,\n            className\n          )}\n          {...props}\n          // Regardless of `semiControlledCollapsed`, the collapsible is closed if there's no content.\n          open={hasContent ? !semiControlledCollapsed : false}\n          onOpenChange={handleCollapsibleOpenChange}\n          disabled={!isCollapsible}\n          data-result={result?.type}\n          data-stage={stage}\n        >\n          <Collapsible.Trigger\n            className={cn(\n              \"lb-collapsible-trigger lb-ai-tool-header\",\n              variant === \"minimal\" && isVisuallyPending && \"lb-ai-chat-pending\"\n            )}\n          >\n            {icon ? (\n              <div className=\"lb-ai-tool-header-icon-container\">{icon}</div>\n            ) : null}\n            <span className=\"lb-ai-tool-header-title\">{resolvedTitle}</span>\n            {isCollapsible ? (\n              <span className=\"lb-collapsible-chevron lb-icon-container\">\n                <ChevronRightIcon />\n              </span>\n            ) : null}\n            {variant !== \"minimal\" ? (\n              <div className=\"lb-ai-tool-header-status\">\n                {stage === \"executed\" ? (\n                  result.type === \"success\" ? (\n                    <CheckCircleFillIcon />\n                  ) : result.type === \"error\" ? (\n                    <CrossCircleFillIcon />\n                  ) : result.type === \"cancelled\" ? (\n                    <MinusCircleIcon />\n                  ) : null\n                ) : isVisuallyPending ? (\n                  <SpinnerIcon />\n                ) : null}\n              </div>\n            ) : null}\n          </Collapsible.Trigger>\n\n          {hasContent ? (\n            <Collapsible.Content className=\"lb-collapsible-content lb-ai-tool-content-container\">\n              <div className=\"lb-ai-tool-content\">{children}</div>\n            </Collapsible.Content>\n          ) : null}\n        </Collapsible.Root>\n      );\n    }\n  ),\n  {\n    /**\n     * Display an icon in a container.\n     *\n     * @example\n     * <AiTool\n     *   icon={\n     *     <AiTool.Icon>🔍</AiTool.Icon>\n     *   }\n     * />\n     */\n    Icon: AiToolIcon,\n\n    /**\n     * Display the tool's arguments and result, which can be useful during\n     * development.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Inspector />\n     * </AiTool>\n     */\n    Inspector: AiToolInspector,\n\n    /**\n     * Display a human-in-the-loop confirmation step which can be accepted\n     * or cancelled by the user.\n     *\n     * The `confirm` and `cancel` callbacks work like `execute` in tool definitions: they can\n     * perform side-effects, be async if needed, and return a result. The tool call will stay\n     * pending until either `confirm` or `cancel` is called.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Confirmation\n     *     // Use a destructive visual appearance\n     *     variant=\"destructive\"\n     *\n     *     // The tool's arguments can be directly accessed like in `execute`\n     *     confirm={({ pageIds }) => {\n     *       const deletedPageTitles = pages\n     *         .filter((p) => pageIds.includes(p.id))\n     *         .map((page) => page.title);\n     *\n     *       deletePages(pageIds);\n     *\n     *       // This result will be available as `result` in the tool's `render` props\n     *       return { data: { deletedPageTitles } };\n     *     }}\n     *\n     *     // If needed, `cancel={() => ...}` would work similarly\n     *   >\n     *     Do you want to delete these pages?\n     *     <PagesPreviews />\n     *   </AiTool.Confirmation>\n     * </AiTool>\n     */\n    Confirmation: AiToolConfirmation,\n  }\n);\n"],"names":["jsx","cn","useAiToolInvocationContext","jsxs","CodeBlock","overrides","useOverrides","useMemo","useCallback","Button","forwardRef","kInternal","useSemiControllableState","Children","Collapsible.Root","Collapsible.Trigger","ChevronRightIcon","CheckCircleFillIcon","CrossCircleFillIcon","MinusCircleIcon","SpinnerIcon","Collapsible.Content"],"mappings":"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"}

package/dist/components/AiTool.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiTool.js","sources":["../../src/components/AiTool.tsx"],"sourcesContent":["import type {\n  AiToolExecuteCallback,\n  AiToolTypePack,\n  JsonObject,\n  NoInfr,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Children, forwardRef, useCallback, useMemo } from \"react\";\n\nimport { Button } from \"../_private\";\nimport {\n  CheckCircleFillIcon,\n  ChevronRightIcon,\n  CrossCircleFillIcon,\n  MinusCircleIcon,\n  SpinnerIcon,\n} from \"../icons\";\nimport {\n  type AiToolConfirmationOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport { useAiToolInvocationContext } from \"../primitives/AiMessage/contexts\";\nimport * as Collapsible from \"../primitives/Collapsible\";\nimport { cn } from \"../utils/cn\";\nimport { useSemiControllableState } from \"../utils/use-controllable-state\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\n\nexport interface AiToolProps\n  extends Omit<ComponentProps<\"div\">, \"title\" | \"children\"> {\n  /**\n   * The tool's title.\n   *\n   * By default, a human-readable version of the tool's name is used:\n   * - `\"showTodo\"` → \"Show todo\"\n   * - `\"get_weather\"` → \"Get weather\"\n   */\n  title?: ReactNode;\n\n  /**\n   * An optional icon displayed next to the title.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The content shown in the tool.\n   */\n  children?: ReactNode;\n\n  /**\n   * The visual appearance of the tool.\n   */\n  variant?: \"block\" | \"minimal\";\n\n  /**\n   * Whether the content is currently collapsed.\n   * It is not a traditional controlled value, as in if you set it to `true` it would only stay expanded.\n   * Instead, it is \"semi-controlled\", meaning that setting it to `true` will expand it, but it\n   * can still be collapsed/expanded by clicking on it.\n   */\n  collapsed?: boolean;\n\n  /**\n   * The event handler called when the content is collapsed or expanded by clicking on it.\n   */\n  onCollapsedChange?: (collapsed: boolean) => void;\n\n  /**\n   * Whether the content can be collapsed/expanded.\n   * If set to `false`, clicking on it will have no effect.\n   * If there's no content, this prop has no effect.\n   */\n  collapsible?: boolean;\n}\n\nexport type AiToolIconProps = ComponentProps<\"div\">;\n\nexport type AiToolInspectorProps = ComponentProps<\"div\">;\n\nexport interface AiToolConfirmationProps<\n  A extends JsonObject,\n  R extends JsonObject,\n> extends ComponentProps<\"div\"> {\n  /**\n   * The callback invoked when the user clicks the confirm button.\n   */\n  confirm: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The callback invoked when the user clicks the cancel button.\n   */\n  cancel?: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The visual appearance.\n   */\n  variant?: \"default\" | \"destructive\";\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiToolConfirmationOverrides>;\n\n  /**\n   * The tool's result type, to be used with the `types` prop in the `render` method.\n   *\n   * @example\n   * defineAiTool<{ value: number }>()({\n   *   // ...\n   *   render: ({ types }) => (\n   *     <AiTool.Confirmation\n   *       types={types}\n   *       confirm={() => {\n   *         return {\n   *           // Using `types` makes the result type-safe\n   *           // based on the tool's definition\n   *           data: { value: 123 },\n   *         };\n   *       }}\n   *     />\n   *   ),\n   * })\n   */\n  types?: NoInfr<AiToolTypePack<A, R>>;\n}\n\nfunction AiToolIcon({ className, ...props }: AiToolIconProps) {\n  return <div className={cn(\"lb-ai-tool-icon\", className)} {...props} />;\n}\n\nfunction AiToolInspector({ className, ...props }: AiToolInspectorProps) {\n  const { args, partialArgs, result } = useAiToolInvocationContext();\n\n  return (\n    <div className={cn(\"lb-ai-tool-inspector\", className)} {...props}>\n      <CodeBlock\n        title=\"Arguments\"\n        code={JSON.stringify(args ?? partialArgs, null, 2)}\n      />\n      {result !== undefined ? (\n        <CodeBlock title=\"Result\" code={JSON.stringify(result, null, 2)} />\n      ) : null}\n    </div>\n  );\n}\n\nfunction AiToolConfirmation<\n  TPack extends AiToolTypePack,\n  A extends JsonObject = TPack[\"A\"],\n  R extends JsonObject = TPack[\"R\"],\n>({\n  children,\n  variant = \"default\",\n  confirm,\n  cancel,\n  overrides,\n  className,\n  ...props\n}: AiToolConfirmationProps<A, R>) {\n  const { stage, args, respond, name, invocationId } =\n    useAiToolInvocationContext();\n  const $ = useOverrides(overrides);\n\n  const enabled = stage === \"executing\";\n\n  const context = useMemo(() => ({ name, invocationId }), [name, invocationId]);\n\n  const onConfirmClick = useCallback(async () => {\n    if (enabled) {\n      const result = await confirm(args as A, context);\n      respond(result ?? undefined);\n    }\n  }, [enabled, args, confirm, respond, context]);\n\n  const onCancelClick = useCallback(async () => {\n    if (enabled) {\n      if (cancel === undefined) {\n        respond({ cancel: true });\n      } else {\n        const result = await cancel(args as A, context);\n        respond(result ?? undefined);\n      }\n    }\n  }, [enabled, args, cancel, respond, context]);\n\n  // If there's no content and the tool has been executed (so there's no\n  // confirmation UI displayed either), don't render anything.\n  if (stage === \"executed\" && !children) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"lb-ai-tool-confirmation\", className)} {...props}>\n      {children ? (\n        <div className=\"lb-ai-tool-confirmation-content\">{children}</div>\n      ) : null}\n      {stage !== \"executed\" && (\n        <div className=\"lb-ai-tool-confirmation-footer\">\n          <div className=\"lb-ai-tool-confirmation-actions\">\n            <Button\n              disabled={!enabled}\n              onClick={onCancelClick}\n              variant=\"secondary\"\n            >\n              {$.AI_TOOL_CONFIRMATION_CANCEL}\n            </Button>\n            <Button\n              disabled={!enabled}\n              onClick={onConfirmClick}\n              variant={variant === \"destructive\" ? \"destructive\" : \"primary\"}\n            >\n              {$.AI_TOOL_CONFIRMATION_CONFIRM}\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction prettifyString(string: string) {\n  return (\n    string\n      // Convert camelCase to spaces\n      .replace(/([a-z])([A-Z])/g, \"$1 $2\")\n      // Convert snake_case and kebab-case to spaces\n      .replace(/[_-]+/g, \" \")\n      // Collapse multiple following spaces\n      .replace(/\\s+/g, \" \")\n      // Trim leading and trailing spaces\n      .trim()\n      // Capitalize first word\n      .toLowerCase()\n      .replace(/^\\w/, (character) => character.toUpperCase())\n  );\n}\n\n/**\n * A pre-built component which displays a tool call.\n *\n * By default, a human-readable version of the tool's name is used as a title:\n * - `\"showTodo\"` → \"Show todo\"\n * - `\"get_weather\"` → \"Get weather\"\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool />\n *   ),\n * })\n *\n * It can be customized in various ways:\n * - adding an icon\n * - customizing the title (even dynamically)\n * - adding custom content inside it\n * - collapsing it conditionally\n * - etc.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: ({ stage, result }) => (\n *     <AiTool\n *       icon=\"🔍\"\n *\n *       // Override the default title based on the tool's stage\n *       title={stage === \"executing\" ? \"Searching…\" : \"Search results\"}\n *\n *       // Start open and automatically collapse after it is executed\n *       // The user can still expand/collapse it manually at any time\n *       collapsed={stage === \"executed\"}\n *     >\n *       <SearchResults data={result.data} />\n *     </AiTool>\n *   ),\n * })\n *\n * It also comes with a few built-in sub-components:\n * - `AiTool.Confirmation` to display a human-in-the-loop confirmation step\n *   which can be accepted or cancelled by the user.\n * - `AiTool.Inspector` to display the tool's arguments and result which can\n *   be useful during development.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Confirmation\n *         // Use a destructive visual appearance\n *         variant=\"destructive\"\n *\n *         // The tool's arguments can be directly accessed like in `execute`\n *         confirm={({ pageIds }) => {\n *           const deletedPageTitles = pages\n *             .filter((p) => pageIds.includes(p.id))\n *             .map((page) => page.title);\n *\n *           deletePages(pageIds);\n *\n *           // This result will be available as `result` in the tool's `render` props\n *           return { data: { deletedPageTitles } };\n *         }}\n *\n *         // If needed, `cancel={() => ...}` would work similarly\n *       >\n *         Do you want to delete these pages?\n *         <PagesPreviews />\n *       </AiTool.Confirmation>\n *     </AiTool>\n *   ),\n * })\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Inspector />\n *     </AiTool>\n *   ),\n * })\n */\nexport const AiTool = Object.assign(\n  forwardRef<HTMLDivElement, AiToolProps>(\n    (\n      {\n        children,\n        title,\n        icon,\n        collapsible,\n        collapsed,\n        onCollapsedChange,\n        variant = \"block\",\n        className,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const {\n        stage,\n        result,\n        name,\n        [kInternal]: { execute, messageStatus },\n      } = useAiToolInvocationContext();\n      // Only mark the tool as pending visually (e.g. show a spinner, add a shimmer animation, etc.)\n      // if it has an `execute` method and it isn't in the \"executed\" stage.\n      const isVisuallyPending =\n        execute !== undefined &&\n        stage !== \"executed\" &&\n        // If it's in the \"receiving\" stage, we also check that the outer message is still generating.\n        (stage === \"receiving\" ? messageStatus === \"generating\" : true);\n      const [semiControlledCollapsed, onSemiControlledCollapsed] =\n        useSemiControllableState(collapsed ?? false, onCollapsedChange);\n      // TODO: This check won't work for cases like:\n      //         <AiTool>\n      //           <ComponentThatRendersNull />\n      //           <ComponentThatAlsoRendersNull />\n      //         </AiTool>\n      //       One solution could be to check the DOM on every render with `useLayoutEffect`\n      //       to see if there's any actual content.\n      //       For now we're limiting the visual issues caused by the above by using CSS's\n      //       `:empty` pseudo-class to make the content 0px high if it's actually empty.\n      const hasContent = Children.count(children) > 0;\n      // If there's no content, the tool is never collapsible.\n      const isCollapsible = hasContent ? (collapsible ?? true) : false;\n      const resolvedTitle = useMemo(() => {\n        return title ?? prettifyString(name);\n      }, [title, name]);\n\n      // `AiTool` uses \"collapsed\" instead of \"open\" (like the `Composer` component) because \"open\"\n      // makes sense next to something called \"Collapsible\" but less so for something called \"AiTool\".\n      const handleCollapsibleOpenChange = useCallback(\n        (open: boolean) => {\n          onSemiControlledCollapsed(!open);\n        },\n        [onSemiControlledCollapsed]\n      );\n\n      return (\n        <Collapsible.Root\n          ref={forwardedRef}\n          className={cn(\n            \"lb-collapsible lb-ai-tool\",\n            `lb-ai-tool:variant-${variant}`,\n            className\n          )}\n          {...props}\n          // Regardless of `semiControlledCollapsed`, the collapsible is closed if there's no content.\n          open={hasContent ? !semiControlledCollapsed : false}\n          onOpenChange={handleCollapsibleOpenChange}\n          disabled={!isCollapsible}\n          data-result={result?.type}\n          data-stage={stage}\n        >\n          <Collapsible.Trigger\n            className={cn(\n              \"lb-collapsible-trigger lb-ai-tool-header\",\n              variant === \"minimal\" && isVisuallyPending && \"lb-ai-chat-pending\"\n            )}\n          >\n            {icon ? (\n              <div className=\"lb-ai-tool-header-icon-container\">{icon}</div>\n            ) : null}\n            <span className=\"lb-ai-tool-header-title\">{resolvedTitle}</span>\n            {isCollapsible ? (\n              <span className=\"lb-collapsible-chevron lb-icon-container\">\n                <ChevronRightIcon />\n              </span>\n            ) : null}\n            {variant !== \"minimal\" ? (\n              <div className=\"lb-ai-tool-header-status\">\n                {stage === \"executed\" ? (\n                  result.type === \"success\" ? (\n                    <CheckCircleFillIcon />\n                  ) : result.type === \"error\" ? (\n                    <CrossCircleFillIcon />\n                  ) : result.type === \"cancelled\" ? (\n                    <MinusCircleIcon />\n                  ) : null\n                ) : isVisuallyPending ? (\n                  <SpinnerIcon />\n                ) : null}\n              </div>\n            ) : null}\n          </Collapsible.Trigger>\n\n          {hasContent ? (\n            <Collapsible.Content className=\"lb-collapsible-content lb-ai-tool-content-container\">\n              <div className=\"lb-ai-tool-content\">{children}</div>\n            </Collapsible.Content>\n          ) : null}\n        </Collapsible.Root>\n      );\n    }\n  ),\n  {\n    /**\n     * Display an icon in a container.\n     *\n     * @example\n     * <AiTool\n     *   icon={\n     *     <AiTool.Icon>🔍</AiTool.Icon>\n     *   }\n     * />\n     */\n    Icon: AiToolIcon,\n\n    /**\n     * Display the tool's arguments and result, which can be useful during\n     * development.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Inspector />\n     * </AiTool>\n     */\n    Inspector: AiToolInspector,\n\n    /**\n     * Display a human-in-the-loop confirmation step which can be accepted\n     * or cancelled by the user.\n     *\n     * The `confirm` and `cancel` callbacks work like `execute` in tool definitions: they can\n     * perform side-effects, be async if needed, and return a result. The tool call will stay\n     * pending until either `confirm` or `cancel` is called.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Confirmation\n     *     // Use a destructive visual appearance\n     *     variant=\"destructive\"\n     *\n     *     // The tool's arguments can be directly accessed like in `execute`\n     *     confirm={({ pageIds }) => {\n     *       const deletedPageTitles = pages\n     *         .filter((p) => pageIds.includes(p.id))\n     *         .map((page) => page.title);\n     *\n     *       deletePages(pageIds);\n     *\n     *       // This result will be available as `result` in the tool's `render` props\n     *       return { data: { deletedPageTitles } };\n     *     }}\n     *\n     *     // If needed, `cancel={() => ...}` would work similarly\n     *   >\n     *     Do you want to delete these pages?\n     *     <PagesPreviews />\n     *   </AiTool.Confirmation>\n     * </AiTool>\n     */\n    Confirmation: AiToolConfirmation,\n  }\n);\n"],"names":["Collapsible.Root","Collapsible.Trigger","Collapsible.Content"],"mappings":";;;;;;;;;;;;;;;;;;AA+HA,SAAS,UAAW,CAAA,EAAE,SAAW,EAAA,GAAG,OAA0B,EAAA;AAC5D,EAAO,uBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,EAAA,CAAG,mBAAmB,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA,CAAA,CAAA;AACtE,CAAA;AAEA,SAAS,eAAgB,CAAA,EAAE,SAAW,EAAA,GAAG,OAA+B,EAAA;AACtE,EAAA,MAAM,EAAE,IAAA,EAAM,WAAa,EAAA,MAAA,KAAW,0BAA2B,EAAA,CAAA;AAEjE,EACE,uBAAA,IAAA,CAAC,SAAI,SAAW,EAAA,EAAA,CAAG,wBAAwB,SAAS,CAAA,EAAI,GAAG,KACzD,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,WAAA;AAAA,QACN,MAAM,IAAK,CAAA,SAAA,CAAU,IAAQ,IAAA,WAAA,EAAa,MAAM,CAAC,CAAA;AAAA,OAAA;AAAA,KACnD;AAAA,IACC,MAAW,KAAA,KAAA,CAAA,mBACT,GAAA,CAAA,SAAA,EAAA,EAAU,KAAM,EAAA,QAAA,EAAS,IAAM,EAAA,IAAA,CAAK,SAAU,CAAA,MAAA,EAAQ,IAAM,EAAA,CAAC,GAAG,CAC/D,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,kBAIP,CAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,OAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,KAAA;AACL,CAAkC,EAAA;AAChC,EAAA,MAAM,EAAE,KAAO,EAAA,IAAA,EAAM,SAAS,IAAM,EAAA,YAAA,KAClC,0BAA2B,EAAA,CAAA;AAC7B,EAAM,MAAA,CAAA,GAAI,aAAa,SAAS,CAAA,CAAA;AAEhC,EAAA,MAAM,UAAU,KAAU,KAAA,WAAA,CAAA;AAE1B,EAAM,MAAA,OAAA,GAAU,OAAQ,CAAA,OAAO,EAAE,IAAA,EAAM,cAAiB,CAAA,EAAA,CAAC,IAAM,EAAA,YAAY,CAAC,CAAA,CAAA;AAE5E,EAAM,MAAA,cAAA,GAAiB,YAAY,YAAY;AAC7C,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,MAAM,MAAS,GAAA,MAAM,OAAQ,CAAA,IAAA,EAAW,OAAO,CAAA,CAAA;AAC/C,MAAA,OAAA,CAAQ,UAAU,KAAS,CAAA,CAAA,CAAA;AAAA,KAC7B;AAAA,KACC,CAAC,OAAA,EAAS,MAAM,OAAS,EAAA,OAAA,EAAS,OAAO,CAAC,CAAA,CAAA;AAE7C,EAAM,MAAA,aAAA,GAAgB,YAAY,YAAY;AAC5C,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,IAAI,WAAW,KAAW,CAAA,EAAA;AACxB,QAAQ,OAAA,CAAA,EAAE,MAAQ,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,OACnB,MAAA;AACL,QAAA,MAAM,MAAS,GAAA,MAAM,MAAO,CAAA,IAAA,EAAW,OAAO,CAAA,CAAA;AAC9C,QAAA,OAAA,CAAQ,UAAU,KAAS,CAAA,CAAA,CAAA;AAAA,OAC7B;AAAA,KACF;AAAA,KACC,CAAC,OAAA,EAAS,MAAM,MAAQ,EAAA,OAAA,EAAS,OAAO,CAAC,CAAA,CAAA;AAI5C,EAAI,IAAA,KAAA,KAAU,UAAc,IAAA,CAAC,QAAU,EAAA;AACrC,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EACE,uBAAA,IAAA,CAAC,SAAI,SAAW,EAAA,EAAA,CAAG,2BAA2B,SAAS,CAAA,EAAI,GAAG,KAC3D,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA,mBACE,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,iCAAA,EAAmC,UAAS,CACzD,GAAA,IAAA;AAAA,IACH,KAAA,KAAU,8BACR,GAAA,CAAA,KAAA,EAAA,EAAI,WAAU,gCACb,EAAA,QAAA,kBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCACb,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,UAAU,CAAC,OAAA;AAAA,UACX,OAAS,EAAA,aAAA;AAAA,UACT,OAAQ,EAAA,WAAA;AAAA,UAEP,QAAE,EAAA,CAAA,CAAA,2BAAA;AAAA,SAAA;AAAA,OACL;AAAA,sBACA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,UAAU,CAAC,OAAA;AAAA,UACX,OAAS,EAAA,cAAA;AAAA,UACT,OAAA,EAAS,OAAY,KAAA,aAAA,GAAgB,aAAgB,GAAA,SAAA;AAAA,UAEpD,QAAE,EAAA,CAAA,CAAA,4BAAA;AAAA,SAAA;AAAA,OACL;AAAA,KAAA,EACF,CACF,EAAA,CAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,eAAe,MAAgB,EAAA;AACtC,EACE,OAAA,MAAA,CAEG,QAAQ,iBAAmB,EAAA,OAAO,EAElC,OAAQ,CAAA,QAAA,EAAU,GAAG,CAAA,CAErB,OAAQ,CAAA,MAAA,EAAQ,GAAG,CAEnB,CAAA,IAAA,EAEA,CAAA,WAAA,EACA,CAAA,OAAA,CAAQ,OAAO,CAAC,SAAA,KAAc,SAAU,CAAA,WAAA,EAAa,CAAA,CAAA;AAE5D,CAAA;AAyFO,MAAM,SAAS,MAAO,CAAA,MAAA;AAAA,EAC3B,UAAA;AAAA,IACE,CACE;AAAA,MACE,QAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAU,GAAA,OAAA;AAAA,MACV,SAAA;AAAA,MACA,GAAG,KAAA;AAAA,OAEL,YACG,KAAA;AACH,MAAM,MAAA;AAAA,QACJ,KAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QACA,CAAC,SAAS,GAAG,EAAE,SAAS,aAAc,EAAA;AAAA,UACpC,0BAA2B,EAAA,CAAA;AAG/B,MAAM,MAAA,iBAAA,GACJ,OAAY,KAAA,KAAA,CAAA,IACZ,KAAU,KAAA,UAAA;AAAA,OAET,KAAA,KAAU,WAAc,GAAA,aAAA,KAAkB,YAAe,GAAA,IAAA,CAAA,CAAA;AAC5D,MAAA,MAAM,CAAC,uBAAyB,EAAA,yBAAyB,IACvD,wBAAyB,CAAA,SAAA,IAAa,OAAO,iBAAiB,CAAA,CAAA;AAUhE,MAAA,MAAM,UAAa,GAAA,QAAA,CAAS,KAAM,CAAA,QAAQ,CAAI,GAAA,CAAA,CAAA;AAE9C,MAAM,MAAA,aAAA,GAAgB,UAAc,GAAA,WAAA,IAAe,IAAQ,GAAA,KAAA,CAAA;AAC3D,MAAM,MAAA,aAAA,GAAgB,QAAQ,MAAM;AAClC,QAAO,OAAA,KAAA,IAAS,eAAe,IAAI,CAAA,CAAA;AAAA,OAClC,EAAA,CAAC,KAAO,EAAA,IAAI,CAAC,CAAA,CAAA;AAIhB,MAAA,MAAM,2BAA8B,GAAA,WAAA;AAAA,QAClC,CAAC,IAAkB,KAAA;AACjB,UAAA,yBAAA,CAA0B,CAAC,IAAI,CAAA,CAAA;AAAA,SACjC;AAAA,QACA,CAAC,yBAAyB,CAAA;AAAA,OAC5B,CAAA;AAEA,MACE,uBAAA,IAAA;AAAA,QAACA,eAAY;AAAA,QAAZ;AAAA,UACC,GAAK,EAAA,YAAA;AAAA,UACL,SAAW,EAAA,EAAA;AAAA,YACT,2BAAA;AAAA,YACA,sBAAsB,OAAO,CAAA,CAAA;AAAA,YAC7B,SAAA;AAAA,WACF;AAAA,UACC,GAAG,KAAA;AAAA,UAEJ,IAAA,EAAM,UAAa,GAAA,CAAC,uBAA0B,GAAA,KAAA;AAAA,UAC9C,YAAc,EAAA,2BAAA;AAAA,UACd,UAAU,CAAC,aAAA;AAAA,UACX,eAAa,MAAQ,EAAA,IAAA;AAAA,UACrB,YAAY,EAAA,KAAA;AAAA,UAEZ,QAAA,EAAA;AAAA,4BAAA,IAAA;AAAA,cAACC,kBAAY;AAAA,cAAZ;AAAA,gBACC,SAAW,EAAA,EAAA;AAAA,kBACT,0CAAA;AAAA,kBACA,OAAA,KAAY,aAAa,iBAAqB,IAAA,oBAAA;AAAA,iBAChD;AAAA,gBAEC,QAAA,EAAA;AAAA,kBAAA,IAAA,mBACE,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,kCAAA,EAAoC,gBAAK,CACtD,GAAA,IAAA;AAAA,kCACH,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,yBAAA,EAA2B,QAAc,EAAA,aAAA,EAAA,CAAA;AAAA,kBACxD,aAAA,uBACE,MAAK,EAAA,EAAA,SAAA,EAAU,4CACd,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA,EAAiB,GACpB,CACE,GAAA,IAAA;AAAA,kBACH,OAAY,KAAA,SAAA,mBACV,GAAA,CAAA,KAAA,EAAA,EAAI,WAAU,0BACZ,EAAA,QAAA,EAAA,KAAA,KAAU,UACT,GAAA,MAAA,CAAO,IAAS,KAAA,SAAA,mBACb,GAAA,CAAA,mBAAA,EAAA,EAAoB,IACnB,MAAO,CAAA,IAAA,KAAS,OAClB,mBAAA,GAAA,CAAC,mBAAoB,EAAA,EAAA,CAAA,GACnB,MAAO,CAAA,IAAA,KAAS,8BACjB,GAAA,CAAA,eAAA,EAAA,EAAgB,CACf,GAAA,IAAA,GACF,iBACF,mBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,CAAA,GACX,MACN,CACE,GAAA,IAAA;AAAA,iBAAA;AAAA,eAAA;AAAA,aACN;AAAA,YAEC,UACC,mBAAA,GAAA,CAACC,kBAAY,EAAZ,EAAoB,SAAA,EAAU,qDAC7B,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,oBAAsB,EAAA,QAAA,EAAS,GAChD,CACE,GAAA,IAAA;AAAA,WAAA;AAAA,SAAA;AAAA,OACN,CAAA;AAAA,KAEJ;AAAA,GACF;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWE,IAAM,EAAA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWN,SAAW,EAAA,eAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmCX,YAAc,EAAA,kBAAA;AAAA,GAChB;AACF;;;;"}
+{"version":3,"file":"AiTool.js","sources":["../../src/components/AiTool.tsx"],"sourcesContent":["import type {\n  AiToolExecuteCallback,\n  AiToolTypePack,\n  JsonObject,\n  NoInfr,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Children, forwardRef, useCallback, useMemo } from \"react\";\n\nimport { Button } from \"../_private\";\nimport {\n  CheckCircleFillIcon,\n  ChevronRightIcon,\n  CrossCircleFillIcon,\n  MinusCircleIcon,\n  SpinnerIcon,\n} from \"../icons\";\nimport {\n  type AiToolConfirmationOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport { useAiToolInvocationContext } from \"../primitives/AiMessage/contexts\";\nimport * as Collapsible from \"../primitives/Collapsible\";\nimport { cn } from \"../utils/cn\";\nimport { useSemiControllableState } from \"../utils/use-controllable-state\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\n\nexport interface AiToolProps extends Omit<\n  ComponentProps<\"div\">,\n  \"title\" | \"children\"\n> {\n  /**\n   * The tool's title.\n   *\n   * By default, a human-readable version of the tool's name is used:\n   * - `\"showTodo\"` → \"Show todo\"\n   * - `\"get_weather\"` → \"Get weather\"\n   */\n  title?: ReactNode;\n\n  /**\n   * An optional icon displayed next to the title.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The content shown in the tool.\n   */\n  children?: ReactNode;\n\n  /**\n   * The visual appearance of the tool.\n   */\n  variant?: \"block\" | \"minimal\";\n\n  /**\n   * Whether the content is currently collapsed.\n   * It is not a traditional controlled value, as in if you set it to `true` it would only stay expanded.\n   * Instead, it is \"semi-controlled\", meaning that setting it to `true` will expand it, but it\n   * can still be collapsed/expanded by clicking on it.\n   */\n  collapsed?: boolean;\n\n  /**\n   * The event handler called when the content is collapsed or expanded by clicking on it.\n   */\n  onCollapsedChange?: (collapsed: boolean) => void;\n\n  /**\n   * Whether the content can be collapsed/expanded.\n   * If set to `false`, clicking on it will have no effect.\n   * If there's no content, this prop has no effect.\n   */\n  collapsible?: boolean;\n}\n\nexport type AiToolIconProps = ComponentProps<\"div\">;\n\nexport type AiToolInspectorProps = ComponentProps<\"div\">;\n\nexport interface AiToolConfirmationProps<\n  A extends JsonObject,\n  R extends JsonObject,\n> extends ComponentProps<\"div\"> {\n  /**\n   * The callback invoked when the user clicks the confirm button.\n   */\n  confirm: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The callback invoked when the user clicks the cancel button.\n   */\n  cancel?: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The visual appearance.\n   */\n  variant?: \"default\" | \"destructive\";\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiToolConfirmationOverrides>;\n\n  /**\n   * The tool's result type, to be used with the `types` prop in the `render` method.\n   *\n   * @example\n   * defineAiTool<{ value: number }>()({\n   *   // ...\n   *   render: ({ types }) => (\n   *     <AiTool.Confirmation\n   *       types={types}\n   *       confirm={() => {\n   *         return {\n   *           // Using `types` makes the result type-safe\n   *           // based on the tool's definition\n   *           data: { value: 123 },\n   *         };\n   *       }}\n   *     />\n   *   ),\n   * })\n   */\n  types?: NoInfr<AiToolTypePack<A, R>>;\n}\n\nfunction AiToolIcon({ className, ...props }: AiToolIconProps) {\n  return <div className={cn(\"lb-ai-tool-icon\", className)} {...props} />;\n}\n\nfunction AiToolInspector({ className, ...props }: AiToolInspectorProps) {\n  const { args, partialArgs, result } = useAiToolInvocationContext();\n\n  return (\n    <div className={cn(\"lb-ai-tool-inspector\", className)} {...props}>\n      <CodeBlock\n        title=\"Arguments\"\n        code={JSON.stringify(args ?? partialArgs, null, 2)}\n      />\n      {result !== undefined ? (\n        <CodeBlock title=\"Result\" code={JSON.stringify(result, null, 2)} />\n      ) : null}\n    </div>\n  );\n}\n\nfunction AiToolConfirmation<\n  TPack extends AiToolTypePack,\n  A extends JsonObject = TPack[\"A\"],\n  R extends JsonObject = TPack[\"R\"],\n>({\n  children,\n  variant = \"default\",\n  confirm,\n  cancel,\n  overrides,\n  className,\n  ...props\n}: AiToolConfirmationProps<A, R>) {\n  const { stage, args, respond, name, invocationId } =\n    useAiToolInvocationContext();\n  const $ = useOverrides(overrides);\n\n  const enabled = stage === \"executing\";\n\n  const context = useMemo(() => ({ name, invocationId }), [name, invocationId]);\n\n  const onConfirmClick = useCallback(async () => {\n    if (enabled) {\n      const result = await confirm(args as A, context);\n      respond(result ?? undefined);\n    }\n  }, [enabled, args, confirm, respond, context]);\n\n  const onCancelClick = useCallback(async () => {\n    if (enabled) {\n      if (cancel === undefined) {\n        respond({ cancel: true });\n      } else {\n        const result = await cancel(args as A, context);\n        respond(result ?? undefined);\n      }\n    }\n  }, [enabled, args, cancel, respond, context]);\n\n  // If there's no content and the tool has been executed (so there's no\n  // confirmation UI displayed either), don't render anything.\n  if (stage === \"executed\" && !children) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"lb-ai-tool-confirmation\", className)} {...props}>\n      {children ? (\n        <div className=\"lb-ai-tool-confirmation-content\">{children}</div>\n      ) : null}\n      {stage !== \"executed\" && (\n        <div className=\"lb-ai-tool-confirmation-footer\">\n          <div className=\"lb-ai-tool-confirmation-actions\">\n            <Button\n              disabled={!enabled}\n              onClick={onCancelClick}\n              variant=\"secondary\"\n            >\n              {$.AI_TOOL_CONFIRMATION_CANCEL}\n            </Button>\n            <Button\n              disabled={!enabled}\n              onClick={onConfirmClick}\n              variant={variant === \"destructive\" ? \"destructive\" : \"primary\"}\n            >\n              {$.AI_TOOL_CONFIRMATION_CONFIRM}\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction prettifyString(string: string) {\n  return (\n    string\n      // Convert camelCase to spaces\n      .replace(/([a-z])([A-Z])/g, \"$1 $2\")\n      // Convert snake_case and kebab-case to spaces\n      .replace(/[_-]+/g, \" \")\n      // Collapse multiple following spaces\n      .replace(/\\s+/g, \" \")\n      // Trim leading and trailing spaces\n      .trim()\n      // Capitalize first word\n      .toLowerCase()\n      .replace(/^\\w/, (character) => character.toUpperCase())\n  );\n}\n\n/**\n * A pre-built component which displays a tool call.\n *\n * By default, a human-readable version of the tool's name is used as a title:\n * - `\"showTodo\"` → \"Show todo\"\n * - `\"get_weather\"` → \"Get weather\"\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool />\n *   ),\n * })\n *\n * It can be customized in various ways:\n * - adding an icon\n * - customizing the title (even dynamically)\n * - adding custom content inside it\n * - collapsing it conditionally\n * - etc.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: ({ stage, result }) => (\n *     <AiTool\n *       icon=\"🔍\"\n *\n *       // Override the default title based on the tool's stage\n *       title={stage === \"executing\" ? \"Searching…\" : \"Search results\"}\n *\n *       // Start open and automatically collapse after it is executed\n *       // The user can still expand/collapse it manually at any time\n *       collapsed={stage === \"executed\"}\n *     >\n *       <SearchResults data={result.data} />\n *     </AiTool>\n *   ),\n * })\n *\n * It also comes with a few built-in sub-components:\n * - `AiTool.Confirmation` to display a human-in-the-loop confirmation step\n *   which can be accepted or cancelled by the user.\n * - `AiTool.Inspector` to display the tool's arguments and result which can\n *   be useful during development.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Confirmation\n *         // Use a destructive visual appearance\n *         variant=\"destructive\"\n *\n *         // The tool's arguments can be directly accessed like in `execute`\n *         confirm={({ pageIds }) => {\n *           const deletedPageTitles = pages\n *             .filter((p) => pageIds.includes(p.id))\n *             .map((page) => page.title);\n *\n *           deletePages(pageIds);\n *\n *           // This result will be available as `result` in the tool's `render` props\n *           return { data: { deletedPageTitles } };\n *         }}\n *\n *         // If needed, `cancel={() => ...}` would work similarly\n *       >\n *         Do you want to delete these pages?\n *         <PagesPreviews />\n *       </AiTool.Confirmation>\n *     </AiTool>\n *   ),\n * })\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Inspector />\n *     </AiTool>\n *   ),\n * })\n */\nexport const AiTool = Object.assign(\n  forwardRef<HTMLDivElement, AiToolProps>(\n    (\n      {\n        children,\n        title,\n        icon,\n        collapsible,\n        collapsed,\n        onCollapsedChange,\n        variant = \"block\",\n        className,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const {\n        stage,\n        result,\n        name,\n        [kInternal]: { execute, messageStatus },\n      } = useAiToolInvocationContext();\n      // Only mark the tool as pending visually (e.g. show a spinner, add a shimmer animation, etc.)\n      // if it has an `execute` method and it isn't in the \"executed\" stage.\n      const isVisuallyPending =\n        execute !== undefined &&\n        stage !== \"executed\" &&\n        // If it's in the \"receiving\" stage, we also check that the outer message is still generating.\n        (stage === \"receiving\" ? messageStatus === \"generating\" : true);\n      const [semiControlledCollapsed, onSemiControlledCollapsed] =\n        useSemiControllableState(collapsed ?? false, onCollapsedChange);\n      // TODO: This check won't work for cases like:\n      //         <AiTool>\n      //           <ComponentThatRendersNull />\n      //           <ComponentThatAlsoRendersNull />\n      //         </AiTool>\n      //       One solution could be to check the DOM on every render with `useLayoutEffect`\n      //       to see if there's any actual content.\n      //       For now we're limiting the visual issues caused by the above by using CSS's\n      //       `:empty` pseudo-class to make the content 0px high if it's actually empty.\n      const hasContent = Children.count(children) > 0;\n      // If there's no content, the tool is never collapsible.\n      const isCollapsible = hasContent ? (collapsible ?? true) : false;\n      const resolvedTitle = useMemo(() => {\n        return title ?? prettifyString(name);\n      }, [title, name]);\n\n      // `AiTool` uses \"collapsed\" instead of \"open\" (like the `Composer` component) because \"open\"\n      // makes sense next to something called \"Collapsible\" but less so for something called \"AiTool\".\n      const handleCollapsibleOpenChange = useCallback(\n        (open: boolean) => {\n          onSemiControlledCollapsed(!open);\n        },\n        [onSemiControlledCollapsed]\n      );\n\n      return (\n        <Collapsible.Root\n          ref={forwardedRef}\n          className={cn(\n            \"lb-collapsible lb-ai-tool\",\n            `lb-ai-tool:variant-${variant}`,\n            className\n          )}\n          {...props}\n          // Regardless of `semiControlledCollapsed`, the collapsible is closed if there's no content.\n          open={hasContent ? !semiControlledCollapsed : false}\n          onOpenChange={handleCollapsibleOpenChange}\n          disabled={!isCollapsible}\n          data-result={result?.type}\n          data-stage={stage}\n        >\n          <Collapsible.Trigger\n            className={cn(\n              \"lb-collapsible-trigger lb-ai-tool-header\",\n              variant === \"minimal\" && isVisuallyPending && \"lb-ai-chat-pending\"\n            )}\n          >\n            {icon ? (\n              <div className=\"lb-ai-tool-header-icon-container\">{icon}</div>\n            ) : null}\n            <span className=\"lb-ai-tool-header-title\">{resolvedTitle}</span>\n            {isCollapsible ? (\n              <span className=\"lb-collapsible-chevron lb-icon-container\">\n                <ChevronRightIcon />\n              </span>\n            ) : null}\n            {variant !== \"minimal\" ? (\n              <div className=\"lb-ai-tool-header-status\">\n                {stage === \"executed\" ? (\n                  result.type === \"success\" ? (\n                    <CheckCircleFillIcon />\n                  ) : result.type === \"error\" ? (\n                    <CrossCircleFillIcon />\n                  ) : result.type === \"cancelled\" ? (\n                    <MinusCircleIcon />\n                  ) : null\n                ) : isVisuallyPending ? (\n                  <SpinnerIcon />\n                ) : null}\n              </div>\n            ) : null}\n          </Collapsible.Trigger>\n\n          {hasContent ? (\n            <Collapsible.Content className=\"lb-collapsible-content lb-ai-tool-content-container\">\n              <div className=\"lb-ai-tool-content\">{children}</div>\n            </Collapsible.Content>\n          ) : null}\n        </Collapsible.Root>\n      );\n    }\n  ),\n  {\n    /**\n     * Display an icon in a container.\n     *\n     * @example\n     * <AiTool\n     *   icon={\n     *     <AiTool.Icon>🔍</AiTool.Icon>\n     *   }\n     * />\n     */\n    Icon: AiToolIcon,\n\n    /**\n     * Display the tool's arguments and result, which can be useful during\n     * development.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Inspector />\n     * </AiTool>\n     */\n    Inspector: AiToolInspector,\n\n    /**\n     * Display a human-in-the-loop confirmation step which can be accepted\n     * or cancelled by the user.\n     *\n     * The `confirm` and `cancel` callbacks work like `execute` in tool definitions: they can\n     * perform side-effects, be async if needed, and return a result. The tool call will stay\n     * pending until either `confirm` or `cancel` is called.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Confirmation\n     *     // Use a destructive visual appearance\n     *     variant=\"destructive\"\n     *\n     *     // The tool's arguments can be directly accessed like in `execute`\n     *     confirm={({ pageIds }) => {\n     *       const deletedPageTitles = pages\n     *         .filter((p) => pageIds.includes(p.id))\n     *         .map((page) => page.title);\n     *\n     *       deletePages(pageIds);\n     *\n     *       // This result will be available as `result` in the tool's `render` props\n     *       return { data: { deletedPageTitles } };\n     *     }}\n     *\n     *     // If needed, `cancel={() => ...}` would work similarly\n     *   >\n     *     Do you want to delete these pages?\n     *     <PagesPreviews />\n     *   </AiTool.Confirmation>\n     * </AiTool>\n     */\n    Confirmation: AiToolConfirmation,\n  }\n);\n"],"names":["Collapsible.Root","Collapsible.Trigger","Collapsible.Content"],"mappings":"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"}

package/dist/components/Comment.cjs

@@ -22,6 +22,7 @@ var cn = require('../utils/cn.cjs');
 var download = require('../utils/download.cjs');
 var useGroupMention = require('../utils/use-group-mention.cjs');
 var useRefs = require('../utils/use-refs.cjs');
+var Avatar = require('./Avatar.cjs');
 var Composer = require('./Composer.cjs');
 var Attachment = require('./internal/Attachment.cjs');
 var Button = require('./internal/Button.cjs');
@@ -31,7 +32,6 @@ var EmojiPicker = require('./internal/EmojiPicker.cjs');
 var Group = require('./internal/Group.cjs');
 var List = require('./internal/List.cjs');
 var Tooltip = require('./internal/Tooltip.cjs');
-var Avatar = require('./Avatar.cjs');
 var User = require('./internal/User.cjs');
 
 
@@ -474,8 +474,7 @@ const Comment = Object.assign(
       );
       react.useEffect(() => {
         const isWindowDefined = typeof window !== "undefined";
-        if (!isWindowDefined)
-          return;
+        if (!isWindowDefined) return;
         const hash = window.location.hash;
         const commentId = hash.slice(1);
         if (commentId === comment.id) {

package/dist/components/Comment.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Comment.cjs","sources":["../../src/components/Comment.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  assertNever,\n  type BaseMetadata,\n  type CommentAttachment,\n  type CommentData,\n  type CommentReaction as CommentReactionData,\n  type DCM,\n  type GroupMentionData,\n  MENTION_CHARACTER,\n  type MentionData,\n  Permission,\n} from \"@liveblocks/core\";\nimport {\n  useAddRoomCommentReaction,\n  useDeleteRoomComment,\n  useEditRoomComment,\n  useRemoveRoomCommentReaction,\n  useRoomAttachmentUrl,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport { Toggle as TogglePrimitive } from \"radix-ui\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  FormEvent,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  ComponentsProvider,\n  type GlobalComponents,\n  useComponents,\n} from \"../components\";\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 as CommentPrimitiveMentionProps,\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 { cn } from \"../utils/cn\";\nimport { download } from \"../utils/download\";\nimport { useIsGroupMentionMember } from \"../utils/use-group-mention\";\nimport { useRefs } from \"../utils/use-refs\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport {\n  FileAttachment,\n  MediaAttachment,\n  separateMediaAttachments,\n} from \"./internal/Attachment\";\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 { Group } from \"./internal/Group\";\nimport { List } from \"./internal/List\";\nimport { ShortcutTooltip, Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { UserAvatar } from \"./Avatar\";\nimport { User } from \"./internal/User\";\n\nconst REACTIONS_TRUNCATE = 5;\n\nexport interface CommentProps<CM extends BaseMetadata = DCM>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /**\n   * The comment to display.\n   */\n  comment: CommentData<CM>;\n\n  /**\n   * The comment's avatar.\n   * Can be combined with `Comment.Avatar` to easily follow default styles.\n   */\n  avatar?: ReactNode;\n\n  /**\n   * The comment's author.\n   * Can be combined with `Comment.Author` to easily follow default styles.\n   */\n  author?: ReactNode;\n\n  /**\n   * The comment's date.\n   * Can be combined with `Comment.Date` to easily follow default styles,\n   * or the `Timestamp` primitive for more control.\n   */\n  date?: ReactNode;\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   * Additional content to display below the comment's body.\n   */\n  additionalContent?: ReactNode;\n\n  /**\n   * Override the comment's body.\n   */\n  body?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData<CM> }>) => ReactNode);\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?: (\n    mention: MentionData,\n    event: MouseEvent<HTMLElement>\n  ) => 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   * Add (or change) items to display in the comment's dropdown.\n   */\n  dropdownItems?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData<CM> }>) => ReactNode);\n\n  /**\n   * Override the comment's content.\n   */\n  children?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData<CM> }>) => ReactNode);\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & CommentOverrides & ComposerOverrides>;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n\n  /**\n   * @internal\n   */\n  actions?: ReactNode;\n\n  /**\n   * @internal\n   */\n  actionsClassName?: string;\n\n  /**\n   * @internal\n   */\n  internalDropdownItems?: ReactNode;\n}\n\nexport interface CommentAvatarProps\n  extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nexport interface CommentAuthorProps\n  extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /**\n   * The user ID to display the author for.\n   */\n  userId: string;\n}\n\nexport interface CommentDateProps\n  extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nfunction CommentAvatar(props: CommentAvatarProps) {\n  return <UserAvatar {...props} />;\n}\n\nfunction CommentAuthor(props: CommentAuthorProps) {\n  return <User {...props} />;\n}\n\nfunction CommentDate({ locale, date, className, ...props }: CommentDateProps) {\n  return (\n    <Timestamp\n      locale={locale}\n      date={date}\n      className={cn(\"lb-date\", className)}\n      {...(props as Omit<ComponentProps<\"time\">, \"children\" | \"title\">)}\n    />\n  );\n}\n\nexport interface CommentDropdownItemProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  /**\n   * An optional icon displayed in this dropdown item.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The event handler called when the dropdown item is selected.\n   */\n  onSelect?: (event: Event) => void;\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\ninterface CommentMentionProps\n  extends CommentBodyMentionProps,\n    CommentPrimitiveMentionProps {\n  overrides?: CommentProps[\"overrides\"];\n}\n\nfunction CommentUserMention({\n  mention,\n  className,\n  ...props\n}: CommentMentionProps) {\n  const currentId = useCurrentUserId();\n\n  return (\n    <CommentPrimitive.Mention\n      className={cn(\"lb-mention lb-comment-mention\", className)}\n      data-self={mention.id === currentId ? \"\" : undefined}\n      {...props}\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <User userId={mention.id} />\n    </CommentPrimitive.Mention>\n  );\n}\n\nfunction CommentGroupMention({\n  mention,\n  className,\n  ...props\n}: CommentMentionProps) {\n  const isMember = useIsGroupMentionMember(mention as GroupMentionData);\n\n  return (\n    <CommentPrimitive.Mention\n      className={cn(\"lb-mention lb-comment-mention\", className)}\n      data-self={isMember ? \"\" : undefined}\n      {...props}\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <Group groupId={mention.id} />\n    </CommentPrimitive.Mention>\n  );\n}\n\nexport function CommentMention({ mention, ...props }: CommentMentionProps) {\n  switch (mention.kind) {\n    case \"user\":\n      return <CommentUserMention mention={mention} {...props} />;\n\n    case \"group\":\n      return <CommentGroupMention mention={mention} {...props} />;\n\n    default:\n      return assertNever(mention, \"Unhandled mention kind\");\n  }\n}\n\nexport function CommentLink({\n  href,\n  children,\n  className,\n  ...props\n}: CommentBodyLinkProps & CommentLinkProps) {\n  const { Anchor } = useComponents();\n\n  return (\n    <CommentPrimitive.Link\n      className={cn(\"lb-comment-link\", className)}\n      href={href}\n      {...props}\n      asChild\n    >\n      <Anchor {...props}>{children}</Anchor>\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={cn(\"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={cn(\"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={cn(\"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={cn(\"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={cn(\"lb-comment-attachment\", className)}\n      allowMediaPreview={false}\n      {...props}\n    />\n  );\n}\n\nconst CommentDropdownItem = forwardRef<\n  HTMLDivElement,\n  CommentDropdownItemProps\n>(({ children, icon, onSelect, onClick, ...props }, forwardedRef) => {\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n      }\n    },\n    [onClick]\n  );\n\n  return (\n    <DropdownItem\n      icon={icon}\n      onSelect={onSelect}\n      onClick={handleClick}\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </DropdownItem>\n  );\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 = Object.assign(\n  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        dropdownItems,\n        overrides,\n        components,\n        additionalContent,\n        body,\n        avatar,\n        author,\n        date,\n        className,\n        actions,\n        actionsClassName,\n        internalDropdownItems,\n        children,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const bodyId = `${comment.id}:body`;\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 permissions = useRoomPermissions(comment.roomId);\n      const canComment =\n        permissions.size > 0\n          ? permissions.has(Permission.CommentsWrite) ||\n            permissions.has(Permission.Write)\n          : true;\n\n      const stopPropagation = useCallback((event: SyntheticEvent) => {\n        event.stopPropagation();\n      }, []);\n\n      const 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      const commentDropdownItems =\n        comment.userId === currentUserId ? (\n          <>\n            <CommentDropdownItem onSelect={handleEdit} icon={<EditIcon />}>\n              {$.COMMENT_EDIT}\n            </CommentDropdownItem>\n            <CommentDropdownItem onSelect={handleDelete} icon={<DeleteIcon />}>\n              {$.COMMENT_DELETE}\n            </CommentDropdownItem>\n          </>\n        ) : null;\n      const defaultDropdownItems =\n        internalDropdownItems || commentDropdownItems ? (\n          <>\n            {internalDropdownItems}\n            {commentDropdownItems}\n          </>\n        ) : null;\n\n      const dropdownContent =\n        typeof dropdownItems === \"function\" ? (\n          dropdownItems({ children: defaultDropdownItems, comment })\n        ) : defaultDropdownItems || dropdownItems ? (\n          <>\n            {defaultDropdownItems}\n            {dropdownItems}\n          </>\n        ) : null;\n\n      let content: ReactNode;\n\n      if (isEditing) {\n        content = (\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        );\n      } else {\n        const defaultBody = (\n          <CommentPrimitive.Body\n            className=\"lb-comment-body\"\n            id={bodyId}\n            body={comment.body}\n            components={{\n              Mention: ({ mention }) => (\n                <CommentMention\n                  mention={mention}\n                  onClick={(event) => onMentionClick?.(mention, event)}\n                  overrides={overrides}\n                />\n              ),\n              Link: CommentLink,\n            }}\n          />\n        );\n\n        content = comment.body ? (\n          <>\n            {body === undefined\n              ? defaultBody\n              : typeof body === \"function\"\n                ? body({ comment, children: defaultBody })\n                : body}\n            {additionalContent}\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                    disabled={!canComment}\n                  />\n                ))}\n                {canComment ? (\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                ) : null}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"lb-comment-body\">\n            <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n          </div>\n        );\n\n        content =\n          typeof children === \"function\"\n            ? children({ comment, children: content })\n            : (children ?? content);\n      }\n\n      return (\n        <TooltipProvider>\n          <ComponentsProvider components={components}>\n            <div\n              role=\"article\"\n              id={comment.id}\n              className={cn(\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              aria-labelledby={bodyId}\n              dir={$.dir}\n              {...props}\n              ref={mergedRefs}\n            >\n              <div className=\"lb-comment-header\">\n                <div className=\"lb-comment-details\">\n                  {avatar ? (\n                    <div\n                      className=\"lb-comment-avatar\"\n                      onClick={handleAuthorClick}\n                    >\n                      {avatar}\n                    </div>\n                  ) : (\n                    <UserAvatar\n                      className=\"lb-comment-avatar\"\n                      userId={comment.userId}\n                      onClick={handleAuthorClick}\n                    />\n                  )}\n                  <span className=\"lb-comment-details-labels\">\n                    {author ? (\n                      <span\n                        className=\"lb-comment-author\"\n                        onClick={handleAuthorClick}\n                      >\n                        {author}\n                      </span>\n                    ) : (\n                      <User\n                        className=\"lb-comment-author\"\n                        userId={comment.userId}\n                        onClick={handleAuthorClick}\n                      />\n                    )}\n                    {date ? (\n                      <span className=\"lb-comment-date\">{date}</span>\n                    ) : (\n                      <span className=\"lb-comment-date\">\n                        <CommentDate\n                          locale={$.locale}\n                          date={comment.createdAt}\n                          className=\"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                    )}\n                  </span>\n                </div>\n                {showActions && !isEditing && (\n                  <div className={cn(\"lb-comment-actions\", actionsClassName)}>\n                    {actions ?? null}\n                    {showReactions && canComment ? (\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                    ) : null}\n                    {dropdownContent ? (\n                      <Dropdown\n                        open={isMoreActionOpen}\n                        onOpenChange={setMoreActionOpen}\n                        align=\"end\"\n                        content={dropdownContent}\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\">{content}</div>\n            </div>\n          </ComponentsProvider>\n        </TooltipProvider>\n      );\n    }\n  ) as <CM extends BaseMetadata = DCM>(\n    props: CommentProps<CM> & RefAttributes<HTMLDivElement>\n  ) => JSX.Element,\n  {\n    /**\n     * Displays a dropdown item in the comment's dropdown.\n     */\n    DropdownItem: CommentDropdownItem,\n\n    /**\n     * Displays a comment's avatar.\n     */\n    Avatar: CommentAvatar,\n\n    /**\n     * Displays a comment's author.\n     */\n    Author: CommentAuthor,\n\n    /**\n     * Displays a comment's date.\n     */\n    Date: CommentDate,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA;AA0KA;AACE;AACF;AAEA;AACE;AACF;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACA;AACkC;AAC7B;AAAA;AAGX;AAwCA;AAA4B;AAC1B;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AACyD;AACb;AACvC;AAEJ;AAAuD;AAC7B;AAAA;AAAA;AAGhC;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AACyD;AAC7B;AACvB;AAEJ;AAAuD;AAC3B;AAAA;AAAA;AAGlC;AAEO;AACL;AAAsB;AAElB;AAAwD;AAGxD;AAAyD;AAGzD;AAAoD;AAE1D;AAEO;AAAqB;AAC1B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AAC2C;AAC1C;AACI;AACG;AAEsB;AAAA;AAGnC;AAEO;AAAmC;AAClC;AACN;AACA;AAEF;AACE;AAKF;AAEA;AAIE;AACA;AACE;AAAC;AAAA;AAC+C;AACtC;AACM;AACH;AACM;AACjB;AACI;AACC;AAEL;AAAoE;AACD;AAAA;AAAA;AAGzE;AAEa;AAIX;AACA;AACA;AACA;AACE;AAA4D;AAE9D;AACA;AAAuB;AAGd;AACD;AAAC;AAAA;AAGE;AACkB;AACT;AACA;AAAA;AACZ;AACS;AACM;AAEnB;AAEU;AAGd;AACE;AAAsB;AAGxB;AAA4B;AAExB;AACE;AAAY;AACQ;AACC;AACH;AACjB;AAED;AAAe;AACK;AACC;AACH;AACjB;AACH;AACF;AAC0E;AAG5E;AACE;AAAC;AAAA;AACU;AACA;AACC;AAEV;AAAiB;AAAhB;AACQ;AACE;AACQ;AACR;AACT;AACK;AAEL;AAAC;AAAA;AAC4B;AAC3B;AACA;AACI;AAAA;AACN;AAAA;AACF;AAAA;AAGN;AAEa;AAIX;AACA;AACE;AAA4D;AAG9D;AACE;AAAC;AAAA;AACc;AACc;AAC3B;AACA;AACI;AACC;AAAA;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;AACE;AAAC;AAAA;AACiD;AAC5C;AACJ;AACA;AAC6B;AAC7B;AAAA;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;AACE;AAAC;AAAA;AACiD;AAC5C;AACJ;AACA;AAC6B;AAC7B;AAAA;AAGN;AAEO;AAA6C;AAClD;AAEF;AACE;AACE;AAAC;AAAA;AACiD;AAC7B;AACf;AAAA;AAGV;AAEA;AAIE;AAAoB;AAEhB;AAEA;AACE;AAAsB;AACxB;AACF;AACQ;AAGV;AACE;AAAC;AAAA;AACC;AACA;AACS;AACL;AACC;AAEJ;AAAA;AAGP;AAYO;AAAuB;AAC5B;AAEI;AACE;AACgB;AAChB;AACc;AACE;AACE;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACE;AAAmD;AAGrD;AACA;AAMA;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;AAGM;AAEA;AAGA;AAGN;AAGO;AAAA;AACA;AAIP;AAKO;AAAA;AACA;AAIP;AAEA;AACE;AACE;AAAC;AAAA;AACW;AACQ;AACI;AACM;AACnB;AACQ;AACjB;AACwB;AAGpB;AAAA;AAAC;AAAA;AACY;AACG;AAEd;AAAC;AAAA;AACW;AACD;AACQ;AAAA;AACnB;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACF;AAGP;AAAC;AAAA;AACS;AACE;AACD;AACK;AACG;AAAA;AAErB;AAAA;AACF;AACF;AAES;AACe;AAC1B;AACgB;AAAA;AAClB;AAGF;AACE;AAAkB;AAAjB;AACW;AACN;AACU;AACF;AAER;AAAC;AAAA;AACC;AACmD;AACnD;AAAA;AACF;AAEI;AACR;AAAA;AAIJ;AAEK;AAIK;AACL;AAII;AAGK;AAAC;AAAA;AAEC;AACA;AACA;AACgB;AAAA;AAJA;AAQpB;AAIE;AAAC;AAAA;AAEC;AACA;AACA;AACgB;AAAA;AAJA;AAQpB;AAEJ;AAGC;AACC;AAAC;AAAA;AAEC;AACA;AACA;AACW;AAAA;AAJG;AAMjB;AAKO;AAAC;AAAA;AACW;AACF;AACC;AACK;AACO;AAAA;AAK3B;AACN;AASN;AAGmB;AAGrB;AAGM;AAAC;AAAA;AACM;AACO;AACD;AACT;AACiB;AACU;AAEzB;AACF;AACF;AACmC;AACJ;AAEF;AACZ;AACV;AACH;AACC;AAEL;AACE;AACG;AACC;AAAC;AAAA;AACW;AACD;AAER;AAAA;AAGH;AAAC;AAAA;AACW;AACM;AACP;AAAA;AACX;AAGC;AACC;AAAC;AAAA;AACW;AACD;AAER;AAAA;AAGH;AAAC;AAAA;AACW;AACM;AACP;AAAA;AACX;AAME;AAAA;AAAC;AAAA;AACW;AACI;AACJ;AAAA;AACZ;AAGK;AAAA;AAGD;AACF;AAEJ;AAEJ;AACF;AAGK;AAAW;AAEV;AAAC;AAAA;AACgB;AACD;AAIV;AAAC;AAAA;AACW;AACD;AACK;AACO;AAAA;AAG3B;AAAA;AAEA;AAEF;AAAC;AAAA;AACO;AACQ;AACR;AACG;AAIL;AAAC;AAAA;AACW;AACS;AACV;AACK;AACM;AAAA;AAG1B;AAAA;AAEA;AACN;AAEJ;AAC6C;AAAA;AAAA;AAGnD;AAEJ;AACF;AAGA;AAAA;AAAA;AAAA;AAIgB;AAAA;AAAA;AAAA;AAKN;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAKF;AAEV;;;;;;;;"}
+{"version":3,"file":"Comment.cjs","sources":["../../src/components/Comment.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  assertNever,\n  type BaseMetadata,\n  type CommentAttachment,\n  type CommentData,\n  type CommentReaction as CommentReactionData,\n  type DCM,\n  type GroupMentionData,\n  MENTION_CHARACTER,\n  type MentionData,\n  Permission,\n} from \"@liveblocks/core\";\nimport {\n  useAddRoomCommentReaction,\n  useDeleteRoomComment,\n  useEditRoomComment,\n  useRemoveRoomCommentReaction,\n  useRoomAttachmentUrl,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport { Toggle as TogglePrimitive } from \"radix-ui\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  FormEvent,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  ComponentsProvider,\n  type GlobalComponents,\n  useComponents,\n} from \"../components\";\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 as CommentPrimitiveMentionProps,\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 { cn } from \"../utils/cn\";\nimport { download } from \"../utils/download\";\nimport { useIsGroupMentionMember } from \"../utils/use-group-mention\";\nimport { useRefs } from \"../utils/use-refs\";\nimport { UserAvatar } from \"./Avatar\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport {\n  FileAttachment,\n  MediaAttachment,\n  separateMediaAttachments,\n} from \"./internal/Attachment\";\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 { Group } from \"./internal/Group\";\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<CM extends BaseMetadata = DCM> extends Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> {\n  /**\n   * The comment to display.\n   */\n  comment: CommentData<CM>;\n\n  /**\n   * The comment's avatar.\n   * Can be combined with `Comment.Avatar` to easily follow default styles.\n   */\n  avatar?: ReactNode;\n\n  /**\n   * The comment's author.\n   * Can be combined with `Comment.Author` to easily follow default styles.\n   */\n  author?: ReactNode;\n\n  /**\n   * The comment's date.\n   * Can be combined with `Comment.Date` to easily follow default styles,\n   * or the `Timestamp` primitive for more control.\n   */\n  date?: ReactNode;\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   * Additional content to display below the comment's body.\n   */\n  additionalContent?: ReactNode;\n\n  /**\n   * Override the comment's body.\n   */\n  body?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData<CM> }>) => ReactNode);\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?: (\n    mention: MentionData,\n    event: MouseEvent<HTMLElement>\n  ) => 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   * Add (or change) items to display in the comment's dropdown.\n   */\n  dropdownItems?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData<CM> }>) => ReactNode);\n\n  /**\n   * Override the comment's content.\n   */\n  children?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData<CM> }>) => ReactNode);\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & CommentOverrides & ComposerOverrides>;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n\n  /**\n   * @internal\n   */\n  actions?: ReactNode;\n\n  /**\n   * @internal\n   */\n  actionsClassName?: string;\n\n  /**\n   * @internal\n   */\n  internalDropdownItems?: ReactNode;\n}\n\nexport interface CommentAvatarProps extends Omit<\n  ComponentProps<\"div\">,\n  \"children\"\n> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nexport interface CommentAuthorProps extends Omit<\n  ComponentProps<\"span\">,\n  \"children\"\n> {\n  /**\n   * The user ID to display the author for.\n   */\n  userId: string;\n}\n\nexport interface CommentDateProps extends Omit<\n  ComponentProps<\"span\">,\n  \"children\"\n> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nfunction CommentAvatar(props: CommentAvatarProps) {\n  return <UserAvatar {...props} />;\n}\n\nfunction CommentAuthor(props: CommentAuthorProps) {\n  return <User {...props} />;\n}\n\nfunction CommentDate({ locale, date, className, ...props }: CommentDateProps) {\n  return (\n    <Timestamp\n      locale={locale}\n      date={date}\n      className={cn(\"lb-date\", className)}\n      {...(props as Omit<ComponentProps<\"time\">, \"children\" | \"title\">)}\n    />\n  );\n}\n\nexport interface CommentDropdownItemProps extends Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"onSelect\"\n> {\n  /**\n   * An optional icon displayed in this dropdown item.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The event handler called when the dropdown item is selected.\n   */\n  onSelect?: (event: Event) => void;\n}\n\ninterface CommentReactionButtonProps extends ComponentPropsWithoutRef<\n  typeof Button\n> {\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\ninterface CommentMentionProps\n  extends CommentBodyMentionProps, CommentPrimitiveMentionProps {\n  overrides?: CommentProps[\"overrides\"];\n}\n\nfunction CommentUserMention({\n  mention,\n  className,\n  ...props\n}: CommentMentionProps) {\n  const currentId = useCurrentUserId();\n\n  return (\n    <CommentPrimitive.Mention\n      className={cn(\"lb-mention lb-comment-mention\", className)}\n      data-self={mention.id === currentId ? \"\" : undefined}\n      {...props}\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <User userId={mention.id} />\n    </CommentPrimitive.Mention>\n  );\n}\n\nfunction CommentGroupMention({\n  mention,\n  className,\n  ...props\n}: CommentMentionProps) {\n  const isMember = useIsGroupMentionMember(mention as GroupMentionData);\n\n  return (\n    <CommentPrimitive.Mention\n      className={cn(\"lb-mention lb-comment-mention\", className)}\n      data-self={isMember ? \"\" : undefined}\n      {...props}\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <Group groupId={mention.id} />\n    </CommentPrimitive.Mention>\n  );\n}\n\nexport function CommentMention({ mention, ...props }: CommentMentionProps) {\n  switch (mention.kind) {\n    case \"user\":\n      return <CommentUserMention mention={mention} {...props} />;\n\n    case \"group\":\n      return <CommentGroupMention mention={mention} {...props} />;\n\n    default:\n      return assertNever(mention, \"Unhandled mention kind\");\n  }\n}\n\nexport function CommentLink({\n  href,\n  children,\n  className,\n  ...props\n}: CommentBodyLinkProps & CommentLinkProps) {\n  const { Anchor } = useComponents();\n\n  return (\n    <CommentPrimitive.Link\n      className={cn(\"lb-comment-link\", className)}\n      href={href}\n      {...props}\n      asChild\n    >\n      <Anchor {...props}>{children}</Anchor>\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={cn(\"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={cn(\"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={cn(\"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={cn(\"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={cn(\"lb-comment-attachment\", className)}\n      allowMediaPreview={false}\n      {...props}\n    />\n  );\n}\n\nconst CommentDropdownItem = forwardRef<\n  HTMLDivElement,\n  CommentDropdownItemProps\n>(({ children, icon, onSelect, onClick, ...props }, forwardedRef) => {\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n      }\n    },\n    [onClick]\n  );\n\n  return (\n    <DropdownItem\n      icon={icon}\n      onSelect={onSelect}\n      onClick={handleClick}\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </DropdownItem>\n  );\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 = Object.assign(\n  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        dropdownItems,\n        overrides,\n        components,\n        additionalContent,\n        body,\n        avatar,\n        author,\n        date,\n        className,\n        actions,\n        actionsClassName,\n        internalDropdownItems,\n        children,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const bodyId = `${comment.id}:body`;\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 permissions = useRoomPermissions(comment.roomId);\n      const canComment =\n        permissions.size > 0\n          ? permissions.has(Permission.CommentsWrite) ||\n            permissions.has(Permission.Write)\n          : true;\n\n      const stopPropagation = useCallback((event: SyntheticEvent) => {\n        event.stopPropagation();\n      }, []);\n\n      const 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      const commentDropdownItems =\n        comment.userId === currentUserId ? (\n          <>\n            <CommentDropdownItem onSelect={handleEdit} icon={<EditIcon />}>\n              {$.COMMENT_EDIT}\n            </CommentDropdownItem>\n            <CommentDropdownItem onSelect={handleDelete} icon={<DeleteIcon />}>\n              {$.COMMENT_DELETE}\n            </CommentDropdownItem>\n          </>\n        ) : null;\n      const defaultDropdownItems =\n        internalDropdownItems || commentDropdownItems ? (\n          <>\n            {internalDropdownItems}\n            {commentDropdownItems}\n          </>\n        ) : null;\n\n      const dropdownContent =\n        typeof dropdownItems === \"function\" ? (\n          dropdownItems({ children: defaultDropdownItems, comment })\n        ) : defaultDropdownItems || dropdownItems ? (\n          <>\n            {defaultDropdownItems}\n            {dropdownItems}\n          </>\n        ) : null;\n\n      let content: ReactNode;\n\n      if (isEditing) {\n        content = (\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        );\n      } else {\n        const defaultBody = (\n          <CommentPrimitive.Body\n            className=\"lb-comment-body\"\n            id={bodyId}\n            body={comment.body}\n            components={{\n              Mention: ({ mention }) => (\n                <CommentMention\n                  mention={mention}\n                  onClick={(event) => onMentionClick?.(mention, event)}\n                  overrides={overrides}\n                />\n              ),\n              Link: CommentLink,\n            }}\n          />\n        );\n\n        content = comment.body ? (\n          <>\n            {body === undefined\n              ? defaultBody\n              : typeof body === \"function\"\n                ? body({ comment, children: defaultBody })\n                : body}\n            {additionalContent}\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                    disabled={!canComment}\n                  />\n                ))}\n                {canComment ? (\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                ) : null}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"lb-comment-body\">\n            <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n          </div>\n        );\n\n        content =\n          typeof children === \"function\"\n            ? children({ comment, children: content })\n            : (children ?? content);\n      }\n\n      return (\n        <TooltipProvider>\n          <ComponentsProvider components={components}>\n            <div\n              role=\"article\"\n              id={comment.id}\n              className={cn(\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              aria-labelledby={bodyId}\n              dir={$.dir}\n              {...props}\n              ref={mergedRefs}\n            >\n              <div className=\"lb-comment-header\">\n                <div className=\"lb-comment-details\">\n                  {avatar ? (\n                    <div\n                      className=\"lb-comment-avatar\"\n                      onClick={handleAuthorClick}\n                    >\n                      {avatar}\n                    </div>\n                  ) : (\n                    <UserAvatar\n                      className=\"lb-comment-avatar\"\n                      userId={comment.userId}\n                      onClick={handleAuthorClick}\n                    />\n                  )}\n                  <span className=\"lb-comment-details-labels\">\n                    {author ? (\n                      <span\n                        className=\"lb-comment-author\"\n                        onClick={handleAuthorClick}\n                      >\n                        {author}\n                      </span>\n                    ) : (\n                      <User\n                        className=\"lb-comment-author\"\n                        userId={comment.userId}\n                        onClick={handleAuthorClick}\n                      />\n                    )}\n                    {date ? (\n                      <span className=\"lb-comment-date\">{date}</span>\n                    ) : (\n                      <span className=\"lb-comment-date\">\n                        <CommentDate\n                          locale={$.locale}\n                          date={comment.createdAt}\n                          className=\"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                    )}\n                  </span>\n                </div>\n                {showActions && !isEditing && (\n                  <div className={cn(\"lb-comment-actions\", actionsClassName)}>\n                    {actions ?? null}\n                    {showReactions && canComment ? (\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                    ) : null}\n                    {dropdownContent ? (\n                      <Dropdown\n                        open={isMoreActionOpen}\n                        onOpenChange={setMoreActionOpen}\n                        align=\"end\"\n                        content={dropdownContent}\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\">{content}</div>\n            </div>\n          </ComponentsProvider>\n        </TooltipProvider>\n      );\n    }\n  ) as <CM extends BaseMetadata = DCM>(\n    props: CommentProps<CM> & RefAttributes<HTMLDivElement>\n  ) => JSX.Element,\n  {\n    /**\n     * Displays a dropdown item in the comment's dropdown.\n     */\n    DropdownItem: CommentDropdownItem,\n\n    /**\n     * Displays a comment's avatar.\n     */\n    Avatar: CommentAvatar,\n\n    /**\n     * Displays a comment's author.\n     */\n    Author: CommentAuthor,\n\n    /**\n     * Displays a comment's date.\n     */\n    Date: CommentDate,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA;AAkLA;AACE;AACF;AAEA;AACE;AACF;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACA;AACkC;AAC7B;AAAA;AAGX;AA0CA;AAA4B;AAC1B;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AACyD;AACb;AACvC;AAEJ;AAAuD;AAC7B;AAAA;AAAA;AAGhC;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AACyD;AAC7B;AACvB;AAEJ;AAAuD;AAC3B;AAAA;AAAA;AAGlC;AAEO;AACL;AAAsB;AAElB;AAAwD;AAGxD;AAAyD;AAGzD;AAAoD;AAE1D;AAEO;AAAqB;AAC1B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AAC2C;AAC1C;AACI;AACG;AAEsB;AAAA;AAGnC;AAEO;AAAmC;AAClC;AACN;AACA;AAEF;AACE;AAKF;AAEA;AAIE;AACA;AACE;AAAC;AAAA;AAC+C;AACtC;AACM;AACH;AACM;AACjB;AACI;AACC;AAEL;AAAoE;AACD;AAAA;AAAA;AAGzE;AAEa;AAIX;AACA;AACA;AACA;AACE;AAA4D;AAE9D;AACA;AAAuB;AAGd;AACD;AAAC;AAAA;AAGE;AACkB;AACT;AACA;AAAA;AACZ;AACS;AACM;AAEnB;AAEU;AAGd;AACE;AAAsB;AAGxB;AAA4B;AAExB;AACE;AAAY;AACQ;AACC;AACH;AACjB;AAED;AAAe;AACK;AACC;AACH;AACjB;AACH;AACF;AAC0E;AAG5E;AACE;AAAC;AAAA;AACU;AACA;AACC;AAEV;AAAiB;AAAhB;AACQ;AACE;AACQ;AACR;AACT;AACK;AAEL;AAAC;AAAA;AAC4B;AAC3B;AACA;AACI;AAAA;AACN;AAAA;AACF;AAAA;AAGN;AAEa;AAIX;AACA;AACE;AAA4D;AAG9D;AACE;AAAC;AAAA;AACc;AACc;AAC3B;AACA;AACI;AACC;AAAA;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;AACE;AAAC;AAAA;AACiD;AAC5C;AACJ;AACA;AAC6B;AAC7B;AAAA;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;AACE;AAAC;AAAA;AACiD;AAC5C;AACJ;AACA;AAC6B;AAC7B;AAAA;AAGN;AAEO;AAA6C;AAClD;AAEF;AACE;AACE;AAAC;AAAA;AACiD;AAC7B;AACf;AAAA;AAGV;AAEA;AAIE;AAAoB;AAEhB;AAEA;AACE;AAAsB;AACxB;AACF;AACQ;AAGV;AACE;AAAC;AAAA;AACC;AACA;AACS;AACL;AACC;AAEJ;AAAA;AAGP;AAYO;AAAuB;AAC5B;AAEI;AACE;AACgB;AAChB;AACc;AACE;AACE;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACE;AAAmD;AAGrD;AACA;AAMA;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;AAEA;AACA;AAEA;AACE;AAAc;AAChB;AAGF;AACE;AAAO;AAGT;AAGM;AAEA;AAGA;AAGN;AAGO;AAAA;AACA;AAIP;AAKO;AAAA;AACA;AAIP;AAEA;AACE;AACE;AAAC;AAAA;AACW;AACQ;AACI;AACM;AACnB;AACQ;AACjB;AACwB;AAGpB;AAAA;AAAC;AAAA;AACY;AACG;AAEd;AAAC;AAAA;AACW;AACD;AACQ;AAAA;AACnB;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACF;AAGP;AAAC;AAAA;AACS;AACE;AACD;AACK;AACG;AAAA;AAErB;AAAA;AACF;AACF;AAES;AACe;AAC1B;AACgB;AAAA;AAClB;AAGF;AACE;AAAkB;AAAjB;AACW;AACN;AACU;AACF;AAER;AAAC;AAAA;AACC;AACmD;AACnD;AAAA;AACF;AAEI;AACR;AAAA;AAIJ;AAEK;AAIK;AACL;AAII;AAGK;AAAC;AAAA;AAEC;AACA;AACA;AACgB;AAAA;AAJA;AAQpB;AAIE;AAAC;AAAA;AAEC;AACA;AACA;AACgB;AAAA;AAJA;AAQpB;AAEJ;AAGC;AACC;AAAC;AAAA;AAEC;AACA;AACA;AACW;AAAA;AAJG;AAMjB;AAKO;AAAC;AAAA;AACW;AACF;AACC;AACK;AACO;AAAA;AAK3B;AACN;AASN;AAGmB;AAGrB;AAGM;AAAC;AAAA;AACM;AACO;AACD;AACT;AACiB;AACU;AAEzB;AACF;AACF;AACmC;AACJ;AAEF;AACZ;AACV;AACH;AACC;AAEL;AACE;AACG;AACC;AAAC;AAAA;AACW;AACD;AAER;AAAA;AAGH;AAAC;AAAA;AACW;AACM;AACP;AAAA;AACX;AAGC;AACC;AAAC;AAAA;AACW;AACD;AAER;AAAA;AAGH;AAAC;AAAA;AACW;AACM;AACP;AAAA;AACX;AAME;AAAA;AAAC;AAAA;AACW;AACI;AACJ;AAAA;AACZ;AAGK;AAAA;AAGD;AACF;AAEJ;AAEJ;AACF;AAGK;AAAW;AAEV;AAAC;AAAA;AACgB;AACD;AAIV;AAAC;AAAA;AACW;AACD;AACK;AACO;AAAA;AAG3B;AAAA;AAEA;AAEF;AAAC;AAAA;AACO;AACQ;AACR;AACG;AAIL;AAAC;AAAA;AACW;AACS;AACV;AACK;AACM;AAAA;AAG1B;AAAA;AAEA;AACN;AAEJ;AAC6C;AAAA;AAAA;AAGnD;AAEJ;AACF;AAGA;AAAA;AAAA;AAAA;AAIgB;AAAA;AAAA;AAAA;AAKN;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAKF;AAEV;;;;;;;;"}

package/dist/components/Comment.js

@@ -20,6 +20,7 @@ import { cn } from '../utils/cn.js';
 import { download } from '../utils/download.js';
 import { useIsGroupMentionMember } from '../utils/use-group-mention.js';
 import { useRefs } from '../utils/use-refs.js';
+import { UserAvatar } from './Avatar.js';
 import { Composer } from './Composer.js';
 import { MediaAttachment, FileAttachment, separateMediaAttachments } from './internal/Attachment.js';
 import { CustomButton, Button } from './internal/Button.js';
@@ -29,7 +30,6 @@ import { EmojiPicker, EmojiPickerTrigger } from './internal/EmojiPicker.js';
 import { Group } from './internal/Group.js';
 import { List } from './internal/List.js';
 import { Tooltip, ShortcutTooltip, TooltipProvider } from './internal/Tooltip.js';
-import { UserAvatar } from './Avatar.js';
 import { User } from './internal/User.js';
 
 
@@ -472,8 +472,7 @@ const Comment = Object.assign(
       );
       useEffect(() => {
         const isWindowDefined = typeof window !== "undefined";
-        if (!isWindowDefined)
-          return;
+        if (!isWindowDefined) return;
         const hash = window.location.hash;
         const commentId = hash.slice(1);
         if (commentId === comment.id) {