@liveblocks/react-ui 3.15.0-components1 → 3.15.0-thread2

package/dist/components/internal/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/internal/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { cn } from \"../../utils/cn\";\nimport { isApple } from \"../../utils/is-apple\";\n\nconst ALT_KEY = { title: \"Alt\", key: \"⌥\" };\nconst COMMAND_KEY = { title: \"Command\", key: \"⌘\" };\nconst CONTROL_KEY = { title: \"Ctrl\", key: \"⌃\" };\nconst SHIFT_KEY = { title: \"Shift\", key: \"⇧\" };\nconst ENTER_KEY = { title: \"Enter\", key: \"⏎\" };\nconst SPACE_KEY = { title: \"Space\", key: \"␣\" };\nconst ESCAPE_KEY = { title: \"Escape\", key: \"⎋\" };\n\nconst KEYS = {\n  alt: () => ALT_KEY,\n  mod: () => (isApple() ? COMMAND_KEY : CONTROL_KEY),\n  control: () => CONTROL_KEY,\n  ctrl: () => CONTROL_KEY,\n  command: () => COMMAND_KEY,\n  cmd: () => COMMAND_KEY,\n  shift: () => SHIFT_KEY,\n  enter: () => ENTER_KEY,\n  \" \": () => SPACE_KEY,\n  space: () => SPACE_KEY,\n  escape: () => ESCAPE_KEY,\n  esc: () => ESCAPE_KEY,\n} as const;\n\nexport interface TooltipProps\n  extends Pick<TooltipPrimitive.TooltipTriggerProps, \"children\">,\n    Omit<TooltipPrimitive.TooltipContentProps, \"content\"> {\n  content: ReactNode;\n  multiline?: boolean;\n}\n\nexport interface ShortcutTooltipProps extends TooltipProps {\n  shortcut?: string;\n}\n\nexport interface ShortcutTooltipKeyProps extends ComponentProps<\"abbr\"> {\n  name: keyof typeof KEYS;\n}\n\nfunction getShortcutKbdFromKeymap(keymap: string) {\n  const keys = keymap.split(\"-\");\n\n  return (\n    <>\n      {keys.map((key, index) => {\n        const lowerKey = key.toLowerCase();\n\n        if (lowerKey in KEYS) {\n          return (\n            <ShortcutTooltipKey\n              key={index}\n              name={lowerKey as keyof typeof KEYS}\n            />\n          );\n        }\n\n        return <span key={index}>{key}</span>;\n      })}\n    </>\n  );\n}\n\nexport const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(\n  ({ children, content, multiline, className, ...props }, forwardedRef) => {\n    const { portalContainer } = useLiveblocksUiConfig();\n\n    return (\n      <TooltipPrimitive.Root disableHoverableContent>\n        <TooltipPrimitive.Trigger asChild ref={forwardedRef}>\n          {children}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={portalContainer}>\n          <TooltipPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-tooltip\",\n              multiline && \"lb-tooltip:multiline\",\n              className\n            )}\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            {...props}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    );\n  }\n);\n\nexport const ShortcutTooltip = forwardRef<\n  HTMLButtonElement,\n  ShortcutTooltipProps\n>(({ children, content, shortcut, ...props }, forwardedRef) => {\n  const shortcutKbd = useMemo(() => {\n    return shortcut ? getShortcutKbdFromKeymap(shortcut) : null;\n  }, [shortcut]);\n\n  return (\n    <Tooltip\n      content={\n        <>\n          {content}\n          {shortcutKbd && (\n            <kbd className=\"lb-tooltip-shortcut\">{shortcutKbd}</kbd>\n          )}\n        </>\n      }\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n\nfunction ShortcutTooltipKey({ name, ...props }: ShortcutTooltipKeyProps) {\n  const { title, key } = useMemo(() => KEYS[name]?.(), [name]);\n\n  return (\n    <abbr title={title} {...props}>\n      {key}\n    </abbr>\n  );\n}\n\nexport const TooltipProvider = TooltipPrimitive.Provider;\n"],"names":[],"mappings":";;;;;;;;;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAa;AACA;AAC2B;AACvB;AACH;AACG;AACJ;AACE;AACA;AACF;AACE;AACC;AAEhB;AAiBA;AACE;AAEA;AAGM;AAEA;AACE;AACE;AAAC;AAAA;AAEO;AAAA;AADD;AAEP;AAIJ;AAA8B;AAItC;AAEO;AAAgB;AAEnB;AAEA;AAEI;AAEA;AAEE;AAAkB;AAAjB;AACY;AACT;AACa;AACb;AACF;AACK;AACC;AACM;AACM;AACd;AAEH;AAAA;AAEL;AACF;AAGN;AAEa;AAIX;AACE;AAAuD;AAGzD;AACE;AAAC;AAAA;AAGM;AAAA;AAEmD;AAEtD;AAEE;AACC;AAEJ;AAAA;AAGP;AAEA;AACE;AAEA;AAKF;AAEO;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/internal/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { cn } from \"../../utils/cn\";\nimport { isApple } from \"../../utils/is-apple\";\n\nconst ALT_KEY = { title: \"Alt\", key: \"⌥\" };\nconst COMMAND_KEY = { title: \"Command\", key: \"⌘\" };\nconst CONTROL_KEY = { title: \"Ctrl\", key: \"⌃\" };\nconst SHIFT_KEY = { title: \"Shift\", key: \"⇧\" };\nconst ENTER_KEY = { title: \"Enter\", key: \"⏎\" };\nconst SPACE_KEY = { title: \"Space\", key: \"␣\" };\nconst ESCAPE_KEY = { title: \"Escape\", key: \"⎋\" };\n\nconst KEYS = {\n  alt: () => ALT_KEY,\n  mod: () => (isApple() ? COMMAND_KEY : CONTROL_KEY),\n  control: () => CONTROL_KEY,\n  ctrl: () => CONTROL_KEY,\n  command: () => COMMAND_KEY,\n  cmd: () => COMMAND_KEY,\n  shift: () => SHIFT_KEY,\n  enter: () => ENTER_KEY,\n  \" \": () => SPACE_KEY,\n  space: () => SPACE_KEY,\n  escape: () => ESCAPE_KEY,\n  esc: () => ESCAPE_KEY,\n} as const;\n\nexport interface TooltipProps\n  extends Pick<TooltipPrimitive.TooltipTriggerProps, \"children\">,\n    Omit<TooltipPrimitive.TooltipContentProps, \"content\"> {\n  content: ReactNode;\n  multiline?: boolean;\n}\n\nexport interface ShortcutTooltipProps extends TooltipProps {\n  shortcut?: string;\n}\n\nexport interface ShortcutTooltipKeyProps extends ComponentProps<\"abbr\"> {\n  name: keyof typeof KEYS;\n}\n\nfunction getShortcutKbdFromKeymap(keymap: string) {\n  const keys = keymap.split(\"-\");\n\n  return (\n    <>\n      {keys.map((key, index) => {\n        const lowerKey = key.toLowerCase();\n\n        if (lowerKey in KEYS) {\n          return (\n            <ShortcutTooltipKey\n              key={index}\n              name={lowerKey as keyof typeof KEYS}\n            />\n          );\n        }\n\n        return <span key={index}>{key}</span>;\n      })}\n    </>\n  );\n}\n\nexport const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(\n  ({ children, content, multiline, className, ...props }, forwardedRef) => {\n    const { portalContainer } = useLiveblocksUiConfig();\n\n    return (\n      <TooltipPrimitive.Root disableHoverableContent>\n        <TooltipPrimitive.Trigger asChild ref={forwardedRef}>\n          {children}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={portalContainer}>\n          <TooltipPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-tooltip\",\n              multiline && \"lb-tooltip:multiline\",\n              className\n            )}\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            {...props}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    );\n  }\n);\n\nexport const ShortcutTooltip = forwardRef<\n  HTMLButtonElement,\n  ShortcutTooltipProps\n>(({ children, content, shortcut, ...props }, forwardedRef) => {\n  const shortcutKbd = useMemo(() => {\n    return shortcut ? getShortcutKbdFromKeymap(shortcut) : null;\n  }, [shortcut]);\n\n  return (\n    <Tooltip\n      content={\n        <>\n          {content}\n          {shortcutKbd && (\n            <kbd className=\"lb-tooltip-shortcut\">{shortcutKbd}</kbd>\n          )}\n        </>\n      }\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n\nfunction ShortcutTooltipKey({ name, ...props }: ShortcutTooltipKeyProps) {\n  const { title, key } = useMemo(() => KEYS[name]?.(), [name]);\n\n  return (\n    <abbr title={title} {...props}>\n      {key}\n    </abbr>\n  );\n}\n\nexport { TooltipProvider } from \"@radix-ui/react-tooltip\";\n"],"names":[],"mappings":";;;;;;;;;;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAa;AACA;AAC2B;AACvB;AACH;AACG;AACJ;AACE;AACA;AACF;AACE;AACC;AAEhB;AAiBA;AACE;AAEA;AAGM;AAEA;AACE;AACE;AAAC;AAAA;AAEO;AAAA;AADD;AAEP;AAIJ;AAA8B;AAItC;AAEO;AAAgB;AAEnB;AAEA;AAEI;AAEA;AAEE;AAAkB;AAAjB;AACY;AACT;AACa;AACb;AACF;AACK;AACC;AACM;AACM;AACd;AAEH;AAAA;AAEL;AACF;AAGN;AAEa;AAIX;AACE;AAAuD;AAGzD;AACE;AAAC;AAAA;AAGM;AAAA;AAEmD;AAEtD;AAEE;AACC;AAEJ;AAAA;AAGP;AAEA;AACE;AAEA;AAKF;;"}

package/dist/index.cjs

@@ -4,14 +4,8 @@ var core = require('@liveblocks/core');
 var version = require('./version.cjs');
 var AiChat = require('./components/AiChat.cjs');
 var AiTool = require('./components/AiTool.cjs');
-var AvatarStack = require('./components/AvatarStack.cjs');
 var Comment = require('./components/Comment.cjs');
-var CommentPin = require('./components/CommentPin.cjs');
 var Composer = require('./components/Composer.cjs');
-var Cursor = require('./components/Cursor.cjs');
-var Cursors = require('./components/Cursors.cjs');
-var FloatingComposer = require('./components/FloatingComposer.cjs');
-var FloatingThread = require('./components/FloatingThread.cjs');
 var HistoryVersionSummary = require('./components/HistoryVersionSummary.cjs');
 var HistoryVersionSummaryList = require('./components/HistoryVersionSummaryList.cjs');
 var InboxNotification = require('./components/InboxNotification.cjs');
@@ -25,14 +19,8 @@ core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
 
 exports.AiChat = AiChat.AiChat;
 exports.AiTool = AiTool.AiTool;
-exports.AvatarStack = AvatarStack.AvatarStack;
 exports.Comment = Comment.Comment;
-exports.CommentPin = CommentPin.CommentPin;
 exports.Composer = Composer.Composer;
-exports.Cursor = Cursor.Cursor;
-exports.Cursors = Cursors.Cursors;
-exports.FloatingComposer = FloatingComposer.FloatingComposer;
-exports.FloatingThread = FloatingThread.FloatingThread;
 exports.HistoryVersionSummary = HistoryVersionSummary.HistoryVersionSummary;
 exports.HistoryVersionSummaryList = HistoryVersionSummaryList.HistoryVersionSummaryList;
 exports.InboxNotification = InboxNotification.InboxNotification;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type {\n  AiChatComponents,\n  AiChatComponentsEmptyProps,\n  AiChatComponentsLoadingProps,\n  AiChatProps,\n} from \"./components/AiChat\";\nexport { AiChat } from \"./components/AiChat\";\nexport type { AiToolIconProps, AiToolProps } from \"./components/AiTool\";\nexport { AiTool } from \"./components/AiTool\";\nexport type { AvatarStackProps } from \"./components/AvatarStack\";\nexport { AvatarStack } from \"./components/AvatarStack\";\nexport type {\n  CommentDropdownItemProps,\n  CommentProps,\n} from \"./components/Comment\";\nexport { Comment } from \"./components/Comment\";\nexport type { CommentPinProps } from \"./components/CommentPin\";\nexport { CommentPin } from \"./components/CommentPin\";\nexport type { ComposerProps } from \"./components/Composer\";\nexport { Composer } from \"./components/Composer\";\nexport type { CursorProps } from \"./components/Cursor\";\nexport { Cursor } from \"./components/Cursor\";\nexport type { CursorsProps } from \"./components/Cursors\";\nexport { Cursors } from \"./components/Cursors\";\nexport type { FloatingComposerProps } from \"./components/FloatingComposer\";\nexport { FloatingComposer } from \"./components/FloatingComposer\";\nexport type { FloatingThreadProps } from \"./components/FloatingThread\";\nexport { FloatingThread } from \"./components/FloatingThread\";\nexport type { HistoryVersionSummaryProps } from \"./components/HistoryVersionSummary\";\nexport { HistoryVersionSummary } from \"./components/HistoryVersionSummary\";\nexport type { HistoryVersionSummaryListProps } from \"./components/HistoryVersionSummaryList\";\nexport { HistoryVersionSummaryList } from \"./components/HistoryVersionSummaryList\";\nexport type {\n  InboxNotificationAvatarProps,\n  InboxNotificationCustomKindProps,\n  InboxNotificationCustomProps,\n  InboxNotificationIconProps,\n  InboxNotificationInspectorProps,\n  InboxNotificationProps,\n  InboxNotificationTextMentionKindProps,\n  InboxNotificationTextMentionProps,\n  InboxNotificationThreadKindProps,\n  InboxNotificationThreadProps,\n} from \"./components/InboxNotification\";\nexport { InboxNotification } from \"./components/InboxNotification\";\nexport type { InboxNotificationListProps } from \"./components/InboxNotificationList\";\nexport { InboxNotificationList } from \"./components/InboxNotificationList\";\nexport type { ThreadProps } from \"./components/Thread\";\nexport { Thread } from \"./components/Thread\";\nexport { LiveblocksUiConfig } from \"./config\";\nexport * as Icon from \"./icon\";\nexport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  InboxNotificationOverrides,\n  LocalizationOverrides,\n  Overrides,\n  ThreadOverrides,\n} from \"./overrides\";\nexport { useOverrides } from \"./overrides\";\nexport type {\n  AiComposerSubmitMessage,\n  ComposerSubmitComment,\n} from \"./primitives\";\nexport type {\n  CommentAttachmentArgs,\n  ComposerBodyMark,\n  ComposerBodyMarks,\n} from \"./types\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type {\n  AiChatComponents,\n  AiChatComponentsEmptyProps,\n  AiChatComponentsLoadingProps,\n  AiChatProps,\n} from \"./components/AiChat\";\nexport { AiChat } from \"./components/AiChat\";\nexport type { AiToolIconProps, AiToolProps } from \"./components/AiTool\";\nexport { AiTool } from \"./components/AiTool\";\nexport type {\n  CommentAuthorProps,\n  CommentAvatarProps,\n  CommentDateProps,\n  CommentDropdownItemProps,\n  CommentProps,\n} from \"./components/Comment\";\nexport { Comment } from \"./components/Comment\";\nexport type { ComposerProps } from \"./components/Composer\";\nexport { Composer } from \"./components/Composer\";\nexport type { HistoryVersionSummaryProps } from \"./components/HistoryVersionSummary\";\nexport { HistoryVersionSummary } from \"./components/HistoryVersionSummary\";\nexport type { HistoryVersionSummaryListProps } from \"./components/HistoryVersionSummaryList\";\nexport { HistoryVersionSummaryList } from \"./components/HistoryVersionSummaryList\";\nexport type {\n  InboxNotificationAvatarProps,\n  InboxNotificationCustomKindProps,\n  InboxNotificationCustomProps,\n  InboxNotificationIconProps,\n  InboxNotificationInspectorProps,\n  InboxNotificationProps,\n  InboxNotificationTextMentionKindProps,\n  InboxNotificationTextMentionProps,\n  InboxNotificationThreadKindProps,\n  InboxNotificationThreadProps,\n} from \"./components/InboxNotification\";\nexport { InboxNotification } from \"./components/InboxNotification\";\nexport type { InboxNotificationListProps } from \"./components/InboxNotificationList\";\nexport { InboxNotificationList } from \"./components/InboxNotificationList\";\nexport type { ThreadProps } from \"./components/Thread\";\nexport { Thread } from \"./components/Thread\";\nexport { LiveblocksUiConfig } from \"./config\";\nexport * as Icon from \"./icon\";\nexport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  InboxNotificationOverrides,\n  LocalizationOverrides,\n  Overrides,\n  ThreadOverrides,\n} from \"./overrides\";\nexport { useOverrides } from \"./overrides\";\nexport type {\n  AiComposerSubmitMessage,\n  ComposerSubmitComment,\n} from \"./primitives\";\nexport type {\n  CommentAttachmentArgs,\n  ComposerBodyMark,\n  ComposerBodyMarks,\n} from \"./types\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;;;;;;;"}

package/dist/index.d.cts

@@ -1,8 +1,7 @@
 import * as react from 'react';
 import { ComponentType, ComponentPropsWithoutRef, ElementType, ReactNode, ComponentProps, FormEvent, RefAttributes, MouseEvent, PropsWithChildren } from 'react';
-import { CommentAttachment, AiReasoningPart, AiRetrievalPart, Relax, WithNavigation, AiAssistantMessage, CopilotId, AiKnowledgeSource, AiOpaqueToolDefinition, AiToolTypePack, JsonObject, AiToolExecuteCallback, NoInfr, CommentBody, MentionData, BaseMetadata, DTM, DCM, Patchable, CommentData, ThreadData, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD } from '@liveblocks/core';
+import { CommentAttachment, AiReasoningPart, AiRetrievalPart, Relax, WithNavigation, AiAssistantMessage, CopilotId, AiKnowledgeSource, AiOpaqueToolDefinition, AiToolTypePack, JsonObject, AiToolExecuteCallback, NoInfr, CommentBody, MentionData, BaseMetadata, DTM, DCM, Patchable, CommentData, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD, ThreadData } from '@liveblocks/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Popover } from 'radix-ui';
 
 interface GlobalComponents {
     Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
@@ -810,25 +809,6 @@ declare const AiTool: react.ForwardRefExoticComponent<Omit<AiToolProps, "ref"> &
     Confirmation: typeof AiToolConfirmation;
 };
 
-interface AvatarStackProps extends ComponentPropsWithoutRef<"div"> {
-    /**
-     * Optional additional user IDs to include in the stack.
-     */
-    userIds?: string[];
-    /**
-     * The maximum number of visible avatars.
-     */
-    max?: number;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides>;
-}
-/**
- * Displays a stack of avatars for the users currently present in the room.
- */
-declare const AvatarStack: react.ForwardRefExoticComponent<AvatarStackProps & react.RefAttributes<HTMLDivElement>>;
-
 interface ComposerEditorMentionProps {
     /**
      * Whether the mention is selected.
@@ -1051,11 +1031,27 @@ type ComposerProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>
  */
 declare const Composer: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: ComposerProps<TM, CM> & RefAttributes<HTMLFormElement>) => JSX.Element;
 
-interface CommentProps extends ComponentPropsWithoutRef<"div"> {
+interface CommentProps<CM extends BaseMetadata = DCM> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     /**
      * The comment to display.
      */
-    comment: CommentData;
+    comment: CommentData<CM>;
+    /**
+     * The comment's avatar.
+     * Can be combined with `Comment.Avatar` to easily follow default styles.
+     */
+    avatar?: ReactNode;
+    /**
+     * The comment's author.
+     * Can be combined with `Comment.Author` to easily follow default styles.
+     */
+    author?: ReactNode;
+    /**
+     * The comment's date.
+     * Can be combined with `Comment.Date` to easily follow default styles,
+     * or the `Timestamp` primitive for more control.
+     */
+    date?: ReactNode;
     /**
      * How to show or hide the actions.
      */
@@ -1080,6 +1076,10 @@ interface CommentProps extends ComponentPropsWithoutRef<"div"> {
      * Whether to indent the comment's content.
      */
     indentContent?: boolean;
+    /**
+     * Additional content to display below the comment's body.
+     */
+    additionalContent?: ReactNode;
     /**
      * The event handler called when the comment is edited.
      */
@@ -1104,7 +1104,13 @@ interface CommentProps extends ComponentPropsWithoutRef<"div"> {
      * Add (or change) items to display in the comment's dropdown.
      */
     dropdownItems?: ReactNode | ((props: PropsWithChildren<{
-        comment: CommentData;
+        comment: CommentData<CM>;
+    }>) => ReactNode);
+    /**
+     * Override the comment's content.
+     */
+    children?: ReactNode | ((props: PropsWithChildren<{
+        comment: CommentData<CM>;
     }>) => ReactNode);
     /**
      * Override the component's strings.
@@ -1115,6 +1121,31 @@ interface CommentProps extends ComponentPropsWithoutRef<"div"> {
      */
     components?: Partial<GlobalComponents>;
 }
+interface CommentAvatarProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * The user ID to display the avatar for.
+     */
+    userId: string;
+}
+interface CommentAuthorProps extends Omit<ComponentProps<"span">, "children"> {
+    /**
+     * The user ID to display the author for.
+     */
+    userId: string;
+}
+interface CommentDateProps extends Omit<ComponentProps<"span">, "children"> {
+    /**
+     * The date to display.
+     */
+    date: Date | string | number;
+    /**
+     * The locale used when formatting the date.
+     */
+    locale?: string;
+}
+declare function CommentAvatar(props: CommentAvatarProps): react_jsx_runtime.JSX.Element;
+declare function CommentAuthor(props: CommentAuthorProps): react_jsx_runtime.JSX.Element;
+declare function CommentDate({ locale, date, className, ...props }: CommentDateProps): react_jsx_runtime.JSX.Element;
 interface CommentDropdownItemProps extends Omit<ComponentPropsWithoutRef<"div">, "onSelect"> {
     /**
      * An optional icon displayed in this dropdown item.
@@ -1135,204 +1166,24 @@ interface CommentDropdownItemProps extends Omit<ComponentPropsWithoutRef<"div">,
  *   ))}
  * </>
  */
-declare const Comment: react.ForwardRefExoticComponent<CommentProps & react.RefAttributes<HTMLDivElement>> & {
+declare const Comment: react.ForwardRefExoticComponent<CommentProps<BaseMetadata> & react.RefAttributes<HTMLDivElement>> & {
     /**
      * Displays a dropdown item in the comment's dropdown.
      */
     DropdownItem: react.ForwardRefExoticComponent<CommentDropdownItemProps & react.RefAttributes<HTMLDivElement>>;
-};
-
-interface CommentPinProps extends ComponentPropsWithoutRef<"button"> {
-    /**
-     * The corner that points to the comment position.
-     */
-    corner?: "top-left" | "top-right" | "bottom-right" | "bottom-left";
-    /**
-     * The user ID to optionally display an avatar for.
-     */
-    userId?: string;
-}
-/**
- * Displays a comment pin that can be used as a trigger
- * for `FloatingComposer` and `FloatingThread`.
- */
-declare const CommentPin: react.ForwardRefExoticComponent<CommentPinProps & react.RefAttributes<HTMLButtonElement>>;
-
-interface CursorProps extends ComponentPropsWithoutRef<"div"> {
-    /**
-     * A floating label to display next to the cursor.
-     */
-    label?: ReactNode;
-    /**
-     * The color of the cursor.
-     */
-    color?: string;
-}
-/**
- * Displays a multiplayer cursor.
- */
-declare const Cursor: react.ForwardRefExoticComponent<CursorProps & react.RefAttributes<HTMLDivElement>>;
-
-interface CursorsProps extends ComponentPropsWithoutRef<"div"> {
-    /**
-     * The key used to store the cursors in users' Presence.
-     * This can be used to have multiple `Cursors` in a single room.
-     */
-    presenceKey?: string;
-}
-/**
- * Displays multiplayer cursors.
- */
-declare const Cursors: react.ForwardRefExoticComponent<CursorsProps & react.RefAttributes<HTMLDivElement>>;
-
-interface FloatingComposerProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends Omit<ComposerProps<TM, CM>, "collapsed" | "onCollapsedChange" | "defaultCollapsed">, Relax<Pick<Popover.PopoverProps, "defaultOpen" | "open" | "onOpenChange"> & Pick<Popover.PopoverContentProps, "side" | "sideOffset" | "align" | "alignOffset">> {
-    /**
-     * The element which opens the floating composer.
-     */
-    children: ReactNode;
-}
-/**
- * Displays a floating composer attached to a trigger element.
- */
-declare const FloatingComposer: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: FloatingComposerProps<TM, CM> & RefAttributes<HTMLFormElement>) => JSX.Element;
-
-interface ThreadProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends ComponentPropsWithoutRef<"div"> {
-    /**
-     * The thread to display.
-     */
-    thread: ThreadData<TM, CM>;
-    /**
-     * How to show or hide the composer to reply to the thread.
-     */
-    showComposer?: boolean | "collapsed";
-    /**
-     * Whether to show the action to resolve the thread.
-     */
-    showResolveAction?: boolean;
     /**
-     * How to show or hide the actions.
-     */
-    showActions?: CommentProps["showActions"];
-    /**
-     * Whether to show reactions.
-     */
-    showReactions?: CommentProps["showReactions"];
-    /**
-     * Whether to show the composer's formatting controls.
-     */
-    showComposerFormattingControls?: ComposerProps["showFormattingControls"];
-    /**
-     * Add (or change) items to display in a comment's dropdown.
-     */
-    commentDropdownItems?: ReactNode | ((props: PropsWithChildren<{
-        comment: CommentData;
-    }>) => ReactNode);
-    /**
-     * The maximum number of comments to show.
-     *
-     * The first and last comments are always shown and by default if some comments
-     * are hidden, only the first comment will be shown before the "show more" button
-     * and after it will be shown all the newest comments to fit the limit set.
-     *
-     * It's possible to customize this by setting `maxVisibleComments` to an object:
-     *
-     * @example
-     * // Only show the last comment, and all the older ones to fit the limit.
-     * <Thread maxVisibleComments={{ max: 5, show: "oldest" }} />
-     *
-     * @example
-     * // Show as many old comments as new ones to fit the limit.
-     * <Thread maxVisibleComments={{ max: 5, show: "both" }} />
-     */
-    maxVisibleComments?: number | {
-        max: number;
-        show: "oldest" | "both" | "newest";
-    };
-    /**
-     * Whether to blur the composer editor when the composer is submitted.
-     */
-    blurComposerOnSubmit?: ComposerProps["blurOnSubmit"];
-    /**
-     * Whether to indent the comments' content.
-     */
-    indentCommentContent?: CommentProps["indentContent"];
-    /**
-     * Whether to show deleted comments.
-     */
-    showDeletedComments?: CommentProps["showDeleted"];
-    /**
-     * Whether to show attachments.
-     */
-    showAttachments?: boolean;
-    /**
-     * The event handler called when changing the resolved status.
-     */
-    onResolvedChange?: (resolved: boolean) => void;
-    /**
-     * The event handler called when a comment is edited.
-     */
-    onCommentEdit?: CommentProps["onCommentEdit"];
-    /**
-     * The event handler called when a comment is deleted.
-     */
-    onCommentDelete?: CommentProps["onCommentDelete"];
-    /**
-     * The event handler called when the thread is deleted.
-     * A thread is deleted when all its comments are deleted.
-     */
-    onThreadDelete?: (thread: ThreadData<TM, CM>) => void;
-    /**
-     * The event handler called when clicking on a comment's author.
-     */
-    onAuthorClick?: CommentProps["onAuthorClick"];
-    /**
-     * The event handler called when clicking on a mention.
+     * Displays a comment's avatar.
      */
-    onMentionClick?: CommentProps["onMentionClick"];
+    Avatar: typeof CommentAvatar;
     /**
-     * The event handler called when clicking on a comment's attachment.
+     * Displays a comment's author.
      */
-    onAttachmentClick?: CommentProps["onAttachmentClick"];
+    Author: typeof CommentAuthor;
     /**
-     * The event handler called when the composer is submitted.
+     * Displays a comment's date.
      */
-    onComposerSubmit?: ComposerProps["onComposerSubmit"];
-    /**
-     * Whether to focus the composer on mount.
-     */
-    autoFocus?: ComposerProps["autoFocus"];
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
-    /**
-     * Override the component's components.
-     */
-    components?: Partial<GlobalComponents>;
-}
-/**
- * Displays a thread of comments, with a composer to reply
- * to it.
- *
- * @example
- * <>
- *   {threads.map((thread) => (
- *     <Thread key={thread.id} thread={thread} />
- *   ))}
- * </>
- */
-declare const Thread: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: ThreadProps<TM, CM> & RefAttributes<HTMLDivElement>) => JSX.Element;
-
-interface FloatingThreadProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends ThreadProps<TM, CM>, Relax<Pick<Popover.PopoverProps, "defaultOpen" | "open" | "onOpenChange"> & Pick<Popover.PopoverContentProps, "side" | "sideOffset" | "align" | "alignOffset">> {
-    /**
-     * The element which opens the floating thread.
-     */
-    children: ReactNode;
-}
-/**
- * Displays a floating thread attached to a trigger element.
- */
-declare const FloatingThread: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>) => JSX.Element;
+    Date: typeof CommentDate;
+};
 
 interface HistoryVersionSummaryProps extends ComponentPropsWithoutRef<"button"> {
     version: HistoryVersion;
@@ -1529,6 +1380,139 @@ interface InboxNotificationListProps extends ComponentPropsWithoutRef<"ol"> {
  */
 declare const InboxNotificationList: react.ForwardRefExoticComponent<InboxNotificationListProps & react.RefAttributes<HTMLOListElement>>;
 
+interface ThreadComponents<_TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> {
+    /**
+     * The component used to display comments.
+     */
+    Comment: ComponentType<CommentProps<CM>>;
+}
+interface ThreadProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The thread to display.
+     */
+    thread: ThreadData<TM, CM>;
+    /**
+     * How to show or hide the composer to reply to the thread.
+     */
+    showComposer?: boolean | "collapsed";
+    /**
+     * Whether to show the action to resolve the thread.
+     */
+    showResolveAction?: boolean;
+    /**
+     * How to show or hide the actions.
+     */
+    showActions?: CommentProps["showActions"];
+    /**
+     * Whether to show reactions.
+     */
+    showReactions?: CommentProps["showReactions"];
+    /**
+     * Whether to show the composer's formatting controls.
+     */
+    showComposerFormattingControls?: ComposerProps["showFormattingControls"];
+    /**
+     * Add (or change) items to display in a comment's dropdown.
+     */
+    commentDropdownItems?: ReactNode | ((props: PropsWithChildren<{
+        comment: CommentData<CM>;
+    }>) => ReactNode);
+    /**
+     * The maximum number of comments to show.
+     *
+     * The first and last comments are always shown and by default if some comments
+     * are hidden, only the first comment will be shown before the "show more" button
+     * and after it will be shown all the newest comments to fit the limit set.
+     *
+     * It's possible to customize this by setting `maxVisibleComments` to an object:
+     *
+     * @example
+     * // Only show the last comment, and all the older ones to fit the limit.
+     * <Thread maxVisibleComments={{ max: 5, show: "oldest" }} />
+     *
+     * @example
+     * // Show as many old comments as new ones to fit the limit.
+     * <Thread maxVisibleComments={{ max: 5, show: "both" }} />
+     */
+    maxVisibleComments?: number | {
+        max: number;
+        show: "oldest" | "both" | "newest";
+    };
+    /**
+     * Whether to blur the composer editor when the composer is submitted.
+     */
+    blurComposerOnSubmit?: ComposerProps["blurOnSubmit"];
+    /**
+     * Whether to indent the comments' content.
+     */
+    indentCommentContent?: CommentProps["indentContent"];
+    /**
+     * Additional content to display below the thread's comments.
+     */
+    additionalContent?: ReactNode;
+    /**
+     * Whether to show deleted comments.
+     */
+    showDeletedComments?: CommentProps["showDeleted"];
+    /**
+     * Whether to show attachments.
+     */
+    showAttachments?: boolean;
+    /**
+     * The event handler called when changing the resolved status.
+     */
+    onResolvedChange?: (resolved: boolean) => void;
+    /**
+     * The event handler called when a comment is edited.
+     */
+    onCommentEdit?: CommentProps["onCommentEdit"];
+    /**
+     * The event handler called when a comment is deleted.
+     */
+    onCommentDelete?: CommentProps["onCommentDelete"];
+    /**
+     * The event handler called when the thread is deleted.
+     * A thread is deleted when all its comments are deleted.
+     */
+    onThreadDelete?: (thread: ThreadData<TM, CM>) => void;
+    /**
+     * The event handler called when clicking on a comment's author.
+     */
+    onAuthorClick?: CommentProps["onAuthorClick"];
+    /**
+     * The event handler called when clicking on a mention.
+     */
+    onMentionClick?: CommentProps["onMentionClick"];
+    /**
+     * The event handler called when clicking on a comment's attachment.
+     */
+    onAttachmentClick?: CommentProps["onAttachmentClick"];
+    /**
+     * The event handler called when the composer is submitted.
+     */
+    onComposerSubmit?: ComposerProps["onComposerSubmit"];
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
+    /**
+     * Override the component's components.
+     */
+    components?: Partial<GlobalComponents & ThreadComponents>;
+}
+/**
+ * Displays a thread of comments, with a composer to reply
+ * to it.
+ *
+ * @example
+ * <>
+ *   {threads.map((thread) => (
+ *     <Thread key={thread.id} thread={thread} />
+ *   ))}
+ * </>
+ */
+declare const Thread: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: ThreadProps<TM, CM> & RefAttributes<HTMLDivElement>) => JSX.Element;
+
 type LiveblocksUiConfigProps = PropsWithChildren<{
     /**
      * Override the components' strings.
@@ -1728,4 +1712,4 @@ declare namespace icon {
   };
 }
 
-export { AiChat, AiChatComponents, AiChatComponentsEmptyProps, AiChatComponentsLoadingProps, AiChatProps, AiComposerSubmitMessage, AiTool, AiToolIconProps, AiToolProps, AvatarStack, AvatarStackProps, Comment, CommentAttachmentArgs, CommentDropdownItemProps, CommentOverrides, CommentPin, CommentPinProps, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, Cursor, CursorProps, Cursors, CursorsProps, FloatingComposer, FloatingComposerProps, FloatingThread, FloatingThreadProps, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, icon as Icon, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationInspectorProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUiConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };
+export { AiChat, AiChatComponents, AiChatComponentsEmptyProps, AiChatComponentsLoadingProps, AiChatProps, AiComposerSubmitMessage, AiTool, AiToolIconProps, AiToolProps, Comment, CommentAttachmentArgs, CommentAuthorProps, CommentAvatarProps, CommentDateProps, CommentDropdownItemProps, CommentOverrides, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, icon as Icon, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationInspectorProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUiConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };