@liveblocks/react-ui 3.18.2 → 3.18.3-test2

package/dist/components/FloatingComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingComposer.js","sources":["../../src/components/FloatingComposer.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n  useRef,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useRefs } from \"../utils/use-refs\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\n\nexport interface FloatingComposerProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends Omit<\n      ComposerProps<TM, CM>,\n      \"collapsed\" | \"onCollapsedChange\" | \"defaultCollapsed\"\n    >,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating composer.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating composer attached to a trigger element.\n */\nexport const FloatingComposer = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      autoFocus = true,\n      overrides,\n      className,\n      ...props\n    }: FloatingComposerProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const composerRef = useRef<HTMLFormElement>(null);\n    const mergedRefs = useRefs(forwardedRef, composerRef);\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-composer\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            updatePositionStrategy=\"always\"\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            onOpenAutoFocus={(event) => {\n              if (!autoFocus) {\n                event.preventDefault();\n                composerRef.current?.focus();\n              }\n            }}\n            asChild\n          >\n            <Composer\n              ref={mergedRefs}\n              overrides={overrides}\n              autoFocus={autoFocus}\n              collapsed={false}\n              tabIndex={-1}\n              {...(props as ComposerProps<TM, CM>)}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingComposerProps<TM, CM> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkDO;AAAyB;AAE5B;AACE;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACY;AACZ;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACuB;AACvB;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AAEE;AACE;AACA;AAA2B;AAC7B;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACW;AACD;AACL;AAAA;AACP;AAAA;AAEJ;AACF;AAGN;;"}
+{"version":3,"file":"FloatingComposer.js","sources":["../../src/components/FloatingComposer.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n  useRef,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useRefs } from \"../utils/use-refs\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\n\nexport interface FloatingComposerProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n>\n  extends\n    Omit<\n      ComposerProps<TM, CM>,\n      \"collapsed\" | \"onCollapsedChange\" | \"defaultCollapsed\"\n    >,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating composer.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating composer attached to a trigger element.\n */\nexport const FloatingComposer = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      autoFocus = true,\n      overrides,\n      className,\n      ...props\n    }: FloatingComposerProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const composerRef = useRef<HTMLFormElement>(null);\n    const mergedRefs = useRefs(forwardedRef, composerRef);\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-composer\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            updatePositionStrategy=\"always\"\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            onOpenAutoFocus={(event) => {\n              if (!autoFocus) {\n                event.preventDefault();\n                composerRef.current?.focus();\n              }\n            }}\n            asChild\n          >\n            <Composer\n              ref={mergedRefs}\n              overrides={overrides}\n              autoFocus={autoFocus}\n              collapsed={false}\n              tabIndex={-1}\n              {...(props as ComposerProps<TM, CM>)}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingComposerProps<TM, CM> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoDO;AAAyB;AAE5B;AACE;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACY;AACZ;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACuB;AACvB;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AAEE;AACE;AACA;AAA2B;AAC7B;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACW;AACD;AACL;AAAA;AACP;AAAA;AAEJ;AACF;AAGN;;"}

package/dist/components/FloatingThread.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingThread.cjs","sources":["../../src/components/FloatingThread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ThreadProps } from \"./Thread\";\nimport { Thread } from \"./Thread\";\n\nexport interface FloatingThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ThreadProps<TM, CM>,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating thread.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating thread attached to a trigger element.\n */\nexport const FloatingThread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-thread\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            updatePositionStrategy=\"always\"\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Thread\n              ref={forwardedRef}\n              thread={thread}\n              overrides={overrides}\n              {...props}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA6CO;AAAuB;AAE1B;AACE;AACA;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACuB;AACvB;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACI;AAAA;AACN;AAAA;AAEJ;AACF;AAGN;;"}
+{"version":3,"file":"FloatingThread.cjs","sources":["../../src/components/FloatingThread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ThreadProps } from \"./Thread\";\nimport { Thread } from \"./Thread\";\n\nexport interface FloatingThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n>\n  extends\n    ThreadProps<TM, CM>,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating thread.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating thread attached to a trigger element.\n */\nexport const FloatingThread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-thread\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            updatePositionStrategy=\"always\"\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Thread\n              ref={forwardedRef}\n              thread={thread}\n              overrides={overrides}\n              {...props}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA+CO;AAAuB;AAE1B;AACE;AACA;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACuB;AACvB;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACI;AAAA;AACN;AAAA;AAEJ;AACF;AAGN;;"}

package/dist/components/FloatingThread.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingThread.js","sources":["../../src/components/FloatingThread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ThreadProps } from \"./Thread\";\nimport { Thread } from \"./Thread\";\n\nexport interface FloatingThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ThreadProps<TM, CM>,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating thread.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating thread attached to a trigger element.\n */\nexport const FloatingThread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-thread\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            updatePositionStrategy=\"always\"\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Thread\n              ref={forwardedRef}\n              thread={thread}\n              overrides={overrides}\n              {...props}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;AA6CO;AAAuB;AAE1B;AACE;AACA;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACuB;AACvB;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACI;AAAA;AACN;AAAA;AAEJ;AACF;AAGN;;"}
+{"version":3,"file":"FloatingThread.js","sources":["../../src/components/FloatingThread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ThreadProps } from \"./Thread\";\nimport { Thread } from \"./Thread\";\n\nexport interface FloatingThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n>\n  extends\n    ThreadProps<TM, CM>,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating thread.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating thread attached to a trigger element.\n */\nexport const FloatingThread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-thread\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            updatePositionStrategy=\"always\"\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Thread\n              ref={forwardedRef}\n              thread={thread}\n              overrides={overrides}\n              {...props}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;AA+CO;AAAuB;AAE1B;AACE;AACA;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACuB;AACvB;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACI;AAAA;AACN;AAAA;AAEJ;AACF;AAGN;;"}

package/dist/components/HistoryVersionSummary.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryVersionSummary.cjs","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { cn } from \"../utils/cn\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={cn(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA;AAca;AAIX;AAEA;AACE;AAAC;AAAA;AACK;AACyD;AACxD;AAC0B;AAE/B;AAAA;AAAC;AAAA;AACW;AACI;AACJ;AAAA;AACZ;AAEE;AAAC;AAAA;AAGE;AACkB;AACT;AACA;AAAA;AAEd;AAAA;AAAA;AAGN;;"}
+{"version":3,"file":"HistoryVersionSummary.cjs","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { cn } from \"../utils/cn\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={cn(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA;AAaa;AAIX;AAEA;AACE;AAAC;AAAA;AACK;AACyD;AACxD;AAC0B;AAE/B;AAAA;AAAC;AAAA;AACW;AACI;AACJ;AAAA;AACZ;AAEE;AAAC;AAAA;AAGE;AACkB;AACT;AACA;AAAA;AAEd;AAAA;AAAA;AAGN;;"}

package/dist/components/HistoryVersionSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryVersionSummary.js","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { cn } from \"../utils/cn\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={cn(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;AAYA;AAca;AAIX;AAEA;AACE;AAAC;AAAA;AACK;AACyD;AACxD;AAC0B;AAE/B;AAAA;AAAC;AAAA;AACW;AACI;AACJ;AAAA;AACZ;AAEE;AAAC;AAAA;AAGE;AACkB;AACT;AACA;AAAA;AAEd;AAAA;AAAA;AAGN;;"}
+{"version":3,"file":"HistoryVersionSummary.js","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { cn } from \"../utils/cn\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={cn(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;AAYA;AAaa;AAIX;AAEA;AACE;AAAC;AAAA;AACK;AACyD;AACxD;AAC0B;AAE/B;AAAA;AAAC;AAAA;AACW;AACI;AACJ;AAAA;AACZ;AAEE;AAAC;AAAA;AAGE;AACkB;AACT;AACA;AAAA;AAEd;AAAA;AAAA;AAGN;;"}

package/dist/components/InboxNotification.cjs

@@ -18,11 +18,11 @@ var overrides = require('../overrides.cjs');
 var Timestamp = require('../primitives/Timestamp.cjs');
 var shared = require('../shared.cjs');
 var cn = require('../utils/cn.cjs');
+var Avatar = require('./Avatar.cjs');
 var Button = require('./internal/Button.cjs');
 var CodeBlock = require('./internal/CodeBlock.cjs');
 var Dropdown = require('./internal/Dropdown.cjs');
 var InboxNotificationThread$1 = require('./internal/InboxNotificationThread.cjs');
-var Avatar = require('./Avatar.cjs');
 var List = require('./internal/List.cjs');
 var Room = require('./internal/Room.cjs');
 var Tooltip = require('./internal/Tooltip.cjs');

package/dist/components/InboxNotification.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotification.cjs","sources":["../../src/components/InboxNotification.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  InboxNotificationCustomData,\n  InboxNotificationData,\n  InboxNotificationTextMentionData,\n  InboxNotificationThreadData,\n  KDAD,\n} from \"@liveblocks/core\";\nimport {\n  assertNever,\n  generateUrl,\n  sanitizeUrl,\n  warnOnce,\n} from \"@liveblocks/core\";\nimport {\n  useClient,\n  useDeleteInboxNotification,\n  useInboxNotificationThread,\n  useMarkInboxNotificationAsRead,\n  useRoomInfo,\n} from \"@liveblocks/react\";\nimport { useRoomThreadSubscription } from \"@liveblocks/react/_private\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ComponentType,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n  SyntheticEvent,\n} from \"react\";\nimport { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { useComponents } from \"../components\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\nimport { CheckIcon } from \"../icons/Check\";\nimport { DeleteIcon } from \"../icons/Delete\";\nimport { EllipsisIcon } from \"../icons/Ellipsis\";\nimport { WarningIcon } from \"../icons/Warning\";\nimport type {\n  CommentOverrides,\n  GlobalOverrides,\n  InboxNotificationOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { SlotProp } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./internal/Button\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\nimport { Dropdown, DropdownItem, DropdownTrigger } from \"./internal/Dropdown\";\nimport {\n  generateInboxNotificationThreadContents,\n  INBOX_NOTIFICATION_THREAD_MAX_COMMENTS,\n  InboxNotificationComment,\n} from \"./internal/InboxNotificationThread\";\nimport { UserAvatar } from \"./Avatar\";\nimport { List } from \"./internal/List\";\nimport { Room } from \"./internal/Room\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ntype ComponentTypeWithRef<\n  T extends keyof JSX.IntrinsicElements,\n  P,\n> = ComponentType<P & Pick<ComponentProps<T>, \"ref\">>;\n\ntype InboxNotificationKinds<KS extends KDAD = KDAD> = {\n  // For some reason, we cannot directly use KDAD in the mapped type line\n  // below, because it will result in '{}' rather than picking up the\n  // definition from the user-provided 'ActivitiesData'. Might be an internal\n  // TS optimization, so we're making it a param to defer the resolution.\n  [K in KS]: ComponentTypeWithRef<\"a\", InboxNotificationCustomKindProps<K>>;\n} & {\n  thread: ComponentTypeWithRef<\"a\", InboxNotificationThreadKindProps>;\n  textMention: ComponentTypeWithRef<\"a\", InboxNotificationTextMentionKindProps>;\n};\n\ninterface InboxNotificationSharedProps {\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: boolean | \"hover\";\n}\n\nexport interface InboxNotificationProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\n\n  /**\n   * Override specific kinds of inbox notifications.\n   */\n  kinds?: Partial<InboxNotificationKinds>;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      InboxNotificationOverrides &\n      ThreadOverrides &\n      CommentOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\nexport interface InboxNotificationThreadProps\n  extends Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationThreadData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: 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\nexport interface InboxNotificationTextMentionProps\n  extends Omit<InboxNotificationProps, \"kinds\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationTextMentionData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: boolean;\n}\n\nexport interface InboxNotificationInspectorProps\n  extends Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\n}\n\nexport interface InboxNotificationCustomProps\n  extends Omit<InboxNotificationProps, \"kinds\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationCustomData;\n\n  /**\n   * The inbox notification's content.\n   */\n  children: ReactNode;\n\n  /**\n   * The inbox notification's title.\n   */\n  title: ReactNode;\n\n  /**\n   * The inbox notification's aside content.\n   * Can be combined with `InboxNotification.Icon` or `InboxNotification.Avatar` to easily follow default styles.\n   */\n  aside?: ReactNode;\n\n  /**\n   * Whether to mark the inbox notification as read when clicked.\n   */\n  markAsReadOnClick?: boolean;\n}\n\nexport type InboxNotificationThreadKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationThreadData;\n};\n\nexport type InboxNotificationTextMentionKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationTextMentionData;\n};\n\nexport type InboxNotificationCustomKindProps<K extends KDAD = KDAD> = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationCustomData<K>;\n};\n\ninterface InboxNotificationLayoutProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  inboxNotification: InboxNotificationData;\n  aside?: ReactNode;\n  title: ReactNode;\n  date: Date | string | number;\n  unread?: boolean;\n  overrides?: Partial<GlobalOverrides & InboxNotificationOverrides>;\n  components?: Partial<GlobalComponents>;\n  markAsReadOnClick?: boolean;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsBefore?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsAfter?: ReactNode;\n}\n\nexport type InboxNotificationIconProps = ComponentProps<\"div\">;\n\nexport interface InboxNotificationAvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nconst InboxNotificationLayout = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationLayoutProps\n>(\n  (\n    {\n      inboxNotification,\n      children,\n      aside,\n      title,\n      date,\n      unread,\n      markAsReadOnClick,\n      onClick,\n      href,\n      showActions,\n      overrides,\n      components,\n      className,\n      asChild,\n      additionalDropdownItemsBefore,\n      additionalDropdownItemsAfter,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const { Anchor } = useComponents(components);\n    const Component = asChild ? SlotPrimitive.Slot : Anchor;\n    const [isMoreActionOpen, setMoreActionOpen] = useState(false);\n    const markInboxNotificationAsRead = useMarkInboxNotificationAsRead();\n    const deleteInboxNotification = useDeleteInboxNotification();\n\n    const handleClick = useCallback(\n      (event: ReactMouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        onClick?.(event);\n\n        const shouldMarkAsReadOnClick = markAsReadOnClick ?? Boolean(href);\n\n        if (unread && shouldMarkAsReadOnClick) {\n          markInboxNotificationAsRead(inboxNotification.id);\n        }\n      },\n      [\n        href,\n        inboxNotification.id,\n        markAsReadOnClick,\n        markInboxNotificationAsRead,\n        onClick,\n        unread,\n      ]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const preventDefaultAndStopPropagation = useCallback(\n      (event: SyntheticEvent) => {\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      []\n    );\n\n    const handleMoreClick = useCallback((event: ReactMouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setMoreActionOpen((open) => !open);\n    }, []);\n\n    const handleMarkAsRead = useCallback(() => {\n      markInboxNotificationAsRead(inboxNotification.id);\n    }, [inboxNotification.id, markInboxNotificationAsRead]);\n\n    const handleDelete = useCallback(() => {\n      deleteInboxNotification(inboxNotification.id);\n    }, [inboxNotification.id, deleteInboxNotification]);\n\n    return (\n      <TooltipProvider>\n        <Component\n          className={cn(\n            \"lb-root lb-inbox-notification\",\n            showActions === \"hover\" &&\n              \"lb-inbox-notification:show-actions-hover\",\n            isMoreActionOpen && \"lb-inbox-notification:action-open\",\n            className\n          )}\n          dir={$.dir}\n          data-unread={unread ? \"\" : undefined}\n          data-kind={inboxNotification.kind}\n          onClick={handleClick}\n          href={href}\n          {...props}\n          ref={forwardedRef}\n        >\n          {aside && <div className=\"lb-inbox-notification-aside\">{aside}</div>}\n          <div className=\"lb-inbox-notification-content\">\n            <div className=\"lb-inbox-notification-header\">\n              <span className=\"lb-inbox-notification-title\">{title}</span>\n              <div className=\"lb-inbox-notification-details\">\n                <span className=\"lb-inbox-notification-details-labels\">\n                  <Timestamp\n                    locale={$.locale}\n                    date={date}\n                    className=\"lb-date lb-inbox-notification-date\"\n                  />\n                  {unread && (\n                    <span\n                      className=\"lb-inbox-notification-unread-indicator\"\n                      role=\"presentation\"\n                    />\n                  )}\n                </span>\n              </div>\n              {showActions && (\n                <div className=\"lb-inbox-notification-actions\">\n                  <Dropdown\n                    open={isMoreActionOpen}\n                    onOpenChange={setMoreActionOpen}\n                    align=\"end\"\n                    content={\n                      <>\n                        {additionalDropdownItemsBefore}\n                        {unread ? (\n                          <DropdownItem\n                            onSelect={handleMarkAsRead}\n                            onClick={stopPropagation}\n                            icon={<CheckIcon />}\n                          >\n                            {$.INBOX_NOTIFICATION_MARK_AS_READ}\n                          </DropdownItem>\n                        ) : null}\n                        <DropdownItem\n                          onSelect={handleDelete}\n                          onClick={stopPropagation}\n                          icon={<DeleteIcon />}\n                        >\n                          {$.INBOX_NOTIFICATION_DELETE}\n                        </DropdownItem>\n                        {additionalDropdownItemsAfter}\n                      </>\n                    }\n                  >\n                    <Tooltip content={$.INBOX_NOTIFICATION_MORE}>\n                      <DropdownTrigger asChild>\n                        <Button\n                          className=\"lb-inbox-notification-action\"\n                          onClick={handleMoreClick}\n                          onPointerDown={preventDefaultAndStopPropagation}\n                          onPointerUp={preventDefaultAndStopPropagation}\n                          aria-label={$.INBOX_NOTIFICATION_MORE}\n                          icon={<EllipsisIcon />}\n                        />\n                      </DropdownTrigger>\n                    </Tooltip>\n                  </Dropdown>\n                </div>\n              )}\n            </div>\n            <div className=\"lb-inbox-notification-body\">{children}</div>\n          </div>\n        </Component>\n      </TooltipProvider>\n    );\n  }\n);\n\nfunction InboxNotificationIcon({\n  className,\n  ...props\n}: InboxNotificationIconProps) {\n  return (\n    <div className={cn(\"lb-inbox-notification-icon\", className)} {...props} />\n  );\n}\n\nfunction InboxNotificationAvatar({\n  className,\n  ...props\n}: InboxNotificationAvatarProps) {\n  return (\n    <UserAvatar\n      className={cn(\"lb-inbox-notification-avatar\", className)}\n      {...props}\n    />\n  );\n}\n\nconst InboxNotificationThread = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationThreadProps\n>(\n  (\n    {\n      inboxNotification,\n      href,\n      showRoomName = true,\n      showReactions = true,\n      showAttachments = true,\n      showActions = \"hover\",\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const client = useClient();\n    const thread = useInboxNotificationThread(inboxNotification.id);\n    const {\n      status: subscriptionStatus,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const currentUserId = useCurrentUserId();\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    const contents = useMemo(() => {\n      const contents = generateInboxNotificationThreadContents(\n        client,\n        inboxNotification,\n        thread,\n        currentUserId ?? \"\"\n      );\n\n      if (contents.comments.length === 0 || contents.userIds.length === 0) {\n        return null;\n      }\n\n      switch (contents.type) {\n        case \"comments\": {\n          const reversedUserIds = [...contents.userIds].reverse();\n          const firstUserId = reversedUserIds[0]!;\n\n          const aside = <InboxNotificationAvatar userId={firstUserId} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_COMMENTS_LIST(\n            <List\n              values={reversedUserIds.map((userId) => (\n                <User key={userId} userId={userId} replaceSelf />\n              ))}\n              formatRemaining={$.LIST_REMAINING_USERS}\n              truncate={INBOX_NOTIFICATION_THREAD_MAX_COMMENTS - 1}\n              locale={$.locale}\n            />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined,\n            reversedUserIds.length\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              {contents.comments.map((comment) => (\n                <InboxNotificationComment\n                  key={comment.id}\n                  comment={comment}\n                  showHeader={contents.comments.length > 1}\n                  showAttachments={showAttachments}\n                  showReactions={showReactions}\n                  overrides={overrides}\n                />\n              ))}\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: contents.comments[contents.comments.length - 1]!.id,\n          };\n        }\n\n        case \"mention\": {\n          const mentionCreatedBy = contents.userIds[0]!;\n          const mentionComment = contents.comments[0]!;\n\n          const aside = <InboxNotificationAvatar userId={mentionCreatedBy} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_MENTION(\n            <User key={mentionCreatedBy} userId={mentionCreatedBy} />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              <InboxNotificationComment\n                key={mentionComment.id}\n                comment={mentionComment}\n                showHeader={false}\n                showAttachments={showAttachments}\n                showReactions={showReactions}\n                overrides={overrides}\n              />\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: mentionComment.id,\n          };\n        }\n\n        default:\n          return assertNever(\n            contents,\n            \"Unexpected thread inbox notification type\"\n          );\n      }\n    }, [\n      $,\n      client,\n      currentUserId,\n      inboxNotification,\n      overrides,\n      showRoomName,\n      showAttachments,\n      showReactions,\n      thread,\n    ]);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? // Set the comment ID as the URL hash.\n          generateUrl(resolvedHref, undefined, contents?.commentId)\n        : undefined;\n    }, [contents?.commentId, href, info?.url]);\n\n    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    if (!contents) {\n      return null;\n    }\n\n    const { aside, title, content, date, unread } = contents;\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={date}\n        unread={unread}\n        overrides={overrides}\n        href={resolvedHref}\n        showActions={showActions}\n        markAsReadOnClick={false}\n        additionalDropdownItemsBefore={\n          <DropdownItem\n            onSelect={handleSubscribeChange}\n            onClick={stopPropagation}\n            icon={\n              subscriptionStatus === \"subscribed\" ? (\n                <BellCrossedIcon />\n              ) : (\n                <BellIcon />\n              )\n            }\n          >\n            {subscriptionStatus === \"subscribed\"\n              ? $.THREAD_UNSUBSCRIBE\n              : $.THREAD_SUBSCRIBE}\n          </DropdownItem>\n        }\n        {...props}\n        ref={forwardedRef}\n      >\n        {content}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationTextMention = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationTextMentionProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      showRoomName = true,\n      href,\n      overrides,\n      ...props\n    },\n    ref\n  ) => {\n    const $ = useOverrides(overrides);\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? (sanitizeUrl(resolvedHref) ?? undefined)\n        : undefined;\n    }, [href, info?.url]);\n\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={<InboxNotificationAvatar userId={inboxNotification.createdBy} />}\n        title={$.INBOX_NOTIFICATION_TEXT_MENTION(\n          <User\n            key={inboxNotification.createdBy}\n            userId={inboxNotification.createdBy}\n          />,\n          showRoomName ? <Room roomId={inboxNotification.roomId} /> : undefined\n        )}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        href={resolvedHref}\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n);\n\nconst InboxNotificationCustom = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationCustomProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      title,\n      aside,\n      children,\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationInspector = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationInspectorProps\n>(\n  (\n    { inboxNotification, showActions = \"hover\", overrides, ...props },\n    forwardedRef\n  ) => {\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        title={<code>{inboxNotification.id}</code>}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n        data-inspector=\"\"\n      >\n        <CodeBlock\n          title=\"Data\"\n          code={JSON.stringify(inboxNotification, null, 2)}\n        />\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationCustomMissing = forwardRef<\n  HTMLAnchorElement,\n  Omit<InboxNotificationCustomProps, \"children\" | \"title\" | \"aside\">\n>(({ inboxNotification, ...props }, forwardedRef) => {\n  return (\n    <InboxNotificationCustom\n      inboxNotification={inboxNotification}\n      {...props}\n      title={\n        <>\n          Custom notification kind <code>{inboxNotification.kind}</code> is not\n          handled\n        </>\n      }\n      aside={\n        <InboxNotificationIcon>\n          <WarningIcon />\n        </InboxNotificationIcon>\n      }\n      ref={forwardedRef}\n      data-missing=\"\"\n    >\n      Notifications of this kind won’t be displayed in production. Use the{\" \"}\n      <code>kinds</code> prop to define how they should be rendered, learn more\n      in the console.\n    </InboxNotificationCustom>\n  );\n});\n\n/**\n * Displays a single inbox notification.\n *\n * @example\n * <>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification\n *       key={inboxNotification.id}\n *       inboxNotification={inboxNotification}\n *       href={`/rooms/${inboxNotification.roomId}`\n *     />\n *   ))}\n * </>\n */\nexport const InboxNotification = Object.assign(\n  forwardRef<HTMLAnchorElement, InboxNotificationProps>(\n    ({ inboxNotification, kinds, ...props }, forwardedRef) => {\n      switch (inboxNotification.kind) {\n        case \"thread\": {\n          const ResolvedInboxNotificationThread =\n            kinds?.thread ?? InboxNotificationThread;\n\n          return (\n            <ResolvedInboxNotificationThread\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        case \"textMention\": {\n          const ResolvedInboxNotificationTextMention =\n            kinds?.textMention ?? InboxNotificationTextMention;\n\n          return (\n            <ResolvedInboxNotificationTextMention\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        default: {\n          const ResolvedInboxNotificationCustom =\n            kinds?.[inboxNotification.kind];\n\n          if (!ResolvedInboxNotificationCustom) {\n            if (process.env.NODE_ENV !== \"production\") {\n              warnOnce(\n                `Custom notification kind \"${inboxNotification.kind}\" is not handled so notifications of this kind will not be displayed in production. Use the kinds prop to define how they should be rendered. Learn more: https://liveblocks.io/docs/api-reference/liveblocks-react-ui#Rendering-notification-kinds-differently.`\n              );\n\n              return (\n                <InboxNotificationCustomMissing\n                  inboxNotification={inboxNotification}\n                  {...props}\n                  ref={forwardedRef}\n                />\n              );\n            } else {\n              // Don't render anything in production if this inbox notification kind is not defined.\n              return null;\n            }\n          }\n\n          return (\n            <ResolvedInboxNotificationCustom\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n      }\n    }\n  ),\n  {\n    /**\n     * Displays a thread inbox notification kind.\n     */\n    Thread: InboxNotificationThread,\n\n    /**\n     * Displays a text mention inbox notification kind.\n     */\n    TextMention: InboxNotificationTextMention,\n\n    /**\n     * Displays a custom inbox notification kind.\n     */\n    Custom: InboxNotificationCustom,\n\n    /**\n     * Display the inbox notification's data, which can be useful during development.\n     *\n     * @example\n     * <InboxNotification\n     *   inboxNotification={inboxNotification}\n     *   kinds={{\n     *     $custom: InboxNotification.Inspector,\n     *   }}\n     * />\n     */\n    Inspector: InboxNotificationInspector,\n    Icon: InboxNotificationIcon,\n    Avatar: InboxNotificationAvatar,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2PA;AAAgC;AAK5B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AAEA;AACE;AAAgD;AAClD;AACF;AACA;AACE;AACkB;AAClB;AACA;AACA;AACA;AACF;AAGF;AACE;AAAsB;AAGxB;AAAyC;AAErC;AACA;AAAsB;AACxB;AACC;AAGH;AACE;AACA;AACA;AAAiC;AAGnC;AACE;AAAgD;AAGlD;AACE;AAA4C;AAG9C;AAEI;AAAC;AAAA;AACY;AACT;AAEE;AACkB;AACpB;AACF;AACO;AACoB;AACE;AACpB;AACT;AACI;AACC;AAEJ;AAA6D;AAE5D;AACE;AAAqD;AAGjD;AAAA;AAAC;AAAA;AACW;AACV;AACU;AAAA;AACZ;AAEE;AAAC;AAAA;AACW;AACL;AAAA;AACP;AAGN;AAGI;AAAC;AAAA;AACO;AACQ;AACR;AAGD;AAAA;AAEC;AAAC;AAAA;AACW;AACD;AACQ;AAEd;AAAA;AAEH;AACJ;AAAC;AAAA;AACW;AACD;AACS;AAEf;AAAA;AACL;AACC;AACH;AAKE;AAAC;AAAA;AACW;AACD;AACM;AACF;AACC;AACM;AAAA;AAG1B;AAAA;AAEJ;AAEJ;AACsD;AACxD;AAAA;AAAA;AAEJ;AAGN;AAEA;AAA+B;AAC7B;AAEF;AACE;AAGF;AAEA;AAAiC;AAC/B;AAEF;AACE;AACE;AAAC;AAAA;AACwD;AACnD;AAAA;AAGV;AAEA;AAAgC;AAK5B;AACE;AACA;AACe;AACC;AACE;AACJ;AACd;AACG;AAIL;AACA;AACA;AACA;AAAM;AACI;AACR;AACA;AAEF;AACA;AACA;AACE;AAAiB;AACf;AACA;AACA;AACiB;AAGnB;AACE;AAAO;AAGT;AAAuB;AAEnB;AACA;AAEA;AACA;AAAgB;AACd;AAAC;AAAA;AAGE;AACkB;AACgC;AACzC;AAAA;AACZ;AACiD;AACjC;AAElB;AAGM;AAAC;AAAA;AAEC;AACuC;AACvC;AACA;AACA;AAAA;AALa;AAWrB;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AAC2C;AAC9D;AACF;AAGE;AACA;AAEA;AACA;AAAgB;AACyC;AACN;AAEnD;AAEI;AAAC;AAAA;AAEU;AACG;AACZ;AACA;AACA;AAAA;AALoB;AAU1B;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AACS;AAC5B;AACF;AAGE;AAAO;AACL;AACA;AACF;AACJ;AACC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGF;AACE;AAEA;AAAO;AAAA;AAEqD;AACxD;AAGN;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AACE;AAAsB;AAGxB;AACE;AAAO;AAGT;AAEA;AACE;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACM;AACN;AACmB;AAEjB;AAAC;AAAA;AACW;AACD;AAKK;AAMR;AAAA;AACR;AAEE;AACC;AAEJ;AAAA;AACH;AAGN;AAEA;AAAqC;AAKjC;AACE;AACc;AACC;AACf;AACA;AACG;AAIL;AACA;AAEA;AACE;AAEA;AAEI;AAGN;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACqE;AAC5D;AACP;AAAC;AAAA;AAE2B;AAAA;AADH;AAEzB;AAC4D;AAC9D;AACwB;AACxB;AACA;AACA;AACM;AACF;AACJ;AAAA;AACF;AAGN;AAEA;AAAgC;AAK5B;AACE;AACc;AACd;AACA;AACA;AACA;AACG;AAIL;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACA;AACA;AACwB;AACxB;AACA;AACA;AACI;AACC;AAEJ;AAAA;AACH;AAGN;AAEA;AAAmC;AAQ/B;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACmC;AACX;AACxB;AACA;AACA;AACI;AACC;AACU;AAEf;AAAC;AAAA;AACO;AACyC;AAAA;AACjD;AAAA;AACF;AAGN;AAEA;AAIE;AACE;AAAC;AAAA;AACC;AACI;AAEA;AAAA;AACuD;AAAO;AAEhE;AAKA;AAEG;AACQ;AACd;AAAA;AACsE;AAC1D;AAAO;AAAA;AAAA;AAIxB;AAgBO;AAAiC;AACtC;AAEI;AAAgC;AAE5B;AAGA;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AAGE;AAGA;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AAGE;AAGA;AACE;AACE;AAAA;AACqD;AAGrD;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAIF;AAAO;AACT;AAGF;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AACF;AACF;AACF;AACA;AAAA;AAAA;AAAA;AAIU;AAAA;AAAA;AAAA;AAKK;AAAA;AAAA;AAAA;AAKL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaG;AACL;AACE;AAEZ;;"}
+{"version":3,"file":"InboxNotification.cjs","sources":["../../src/components/InboxNotification.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  InboxNotificationCustomData,\n  InboxNotificationData,\n  InboxNotificationTextMentionData,\n  InboxNotificationThreadData,\n  KDAD,\n} from \"@liveblocks/core\";\nimport {\n  assertNever,\n  generateUrl,\n  sanitizeUrl,\n  warnOnce,\n} from \"@liveblocks/core\";\nimport {\n  useClient,\n  useDeleteInboxNotification,\n  useInboxNotificationThread,\n  useMarkInboxNotificationAsRead,\n  useRoomInfo,\n} from \"@liveblocks/react\";\nimport { useRoomThreadSubscription } from \"@liveblocks/react/_private\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ComponentType,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n  SyntheticEvent,\n} from \"react\";\nimport { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { useComponents } from \"../components\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\nimport { CheckIcon } from \"../icons/Check\";\nimport { DeleteIcon } from \"../icons/Delete\";\nimport { EllipsisIcon } from \"../icons/Ellipsis\";\nimport { WarningIcon } from \"../icons/Warning\";\nimport type {\n  CommentOverrides,\n  GlobalOverrides,\n  InboxNotificationOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { SlotProp } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { UserAvatar } from \"./Avatar\";\nimport { Button } from \"./internal/Button\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\nimport { Dropdown, DropdownItem, DropdownTrigger } from \"./internal/Dropdown\";\nimport {\n  generateInboxNotificationThreadContents,\n  INBOX_NOTIFICATION_THREAD_MAX_COMMENTS,\n  InboxNotificationComment,\n} from \"./internal/InboxNotificationThread\";\nimport { List } from \"./internal/List\";\nimport { Room } from \"./internal/Room\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ntype ComponentTypeWithRef<\n  T extends keyof JSX.IntrinsicElements,\n  P,\n> = ComponentType<P & Pick<ComponentProps<T>, \"ref\">>;\n\ntype InboxNotificationKinds<KS extends KDAD = KDAD> = {\n  // For some reason, we cannot directly use KDAD in the mapped type line\n  // below, because it will result in '{}' rather than picking up the\n  // definition from the user-provided 'ActivitiesData'. Might be an internal\n  // TS optimization, so we're making it a param to defer the resolution.\n  [K in KS]: ComponentTypeWithRef<\"a\", InboxNotificationCustomKindProps<K>>;\n} & {\n  thread: ComponentTypeWithRef<\"a\", InboxNotificationThreadKindProps>;\n  textMention: ComponentTypeWithRef<\"a\", InboxNotificationTextMentionKindProps>;\n};\n\ninterface InboxNotificationSharedProps {\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: boolean | \"hover\";\n}\n\nexport interface InboxNotificationProps\n  extends\n    Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\n\n  /**\n   * Override specific kinds of inbox notifications.\n   */\n  kinds?: Partial<InboxNotificationKinds>;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      InboxNotificationOverrides &\n      ThreadOverrides &\n      CommentOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\nexport interface InboxNotificationThreadProps\n  extends\n    Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationThreadData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: 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\nexport interface InboxNotificationTextMentionProps\n  extends Omit<InboxNotificationProps, \"kinds\">, InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationTextMentionData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: boolean;\n}\n\nexport interface InboxNotificationInspectorProps\n  extends\n    Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\n}\n\nexport interface InboxNotificationCustomProps\n  extends\n    Omit<InboxNotificationProps, \"kinds\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationCustomData;\n\n  /**\n   * The inbox notification's content.\n   */\n  children: ReactNode;\n\n  /**\n   * The inbox notification's title.\n   */\n  title: ReactNode;\n\n  /**\n   * The inbox notification's aside content.\n   * Can be combined with `InboxNotification.Icon` or `InboxNotification.Avatar` to easily follow default styles.\n   */\n  aside?: ReactNode;\n\n  /**\n   * Whether to mark the inbox notification as read when clicked.\n   */\n  markAsReadOnClick?: boolean;\n}\n\nexport type InboxNotificationThreadKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationThreadData;\n};\n\nexport type InboxNotificationTextMentionKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationTextMentionData;\n};\n\nexport type InboxNotificationCustomKindProps<K extends KDAD = KDAD> = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationCustomData<K>;\n};\n\ninterface InboxNotificationLayoutProps\n  extends\n    Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  inboxNotification: InboxNotificationData;\n  aside?: ReactNode;\n  title: ReactNode;\n  date: Date | string | number;\n  unread?: boolean;\n  overrides?: Partial<GlobalOverrides & InboxNotificationOverrides>;\n  components?: Partial<GlobalComponents>;\n  markAsReadOnClick?: boolean;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsBefore?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsAfter?: ReactNode;\n}\n\nexport type InboxNotificationIconProps = ComponentProps<\"div\">;\n\nexport interface InboxNotificationAvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nconst InboxNotificationLayout = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationLayoutProps\n>(\n  (\n    {\n      inboxNotification,\n      children,\n      aside,\n      title,\n      date,\n      unread,\n      markAsReadOnClick,\n      onClick,\n      href,\n      showActions,\n      overrides,\n      components,\n      className,\n      asChild,\n      additionalDropdownItemsBefore,\n      additionalDropdownItemsAfter,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const { Anchor } = useComponents(components);\n    const Component = asChild ? SlotPrimitive.Slot : Anchor;\n    const [isMoreActionOpen, setMoreActionOpen] = useState(false);\n    const markInboxNotificationAsRead = useMarkInboxNotificationAsRead();\n    const deleteInboxNotification = useDeleteInboxNotification();\n\n    const handleClick = useCallback(\n      (event: ReactMouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        onClick?.(event);\n\n        const shouldMarkAsReadOnClick = markAsReadOnClick ?? Boolean(href);\n\n        if (unread && shouldMarkAsReadOnClick) {\n          markInboxNotificationAsRead(inboxNotification.id);\n        }\n      },\n      [\n        href,\n        inboxNotification.id,\n        markAsReadOnClick,\n        markInboxNotificationAsRead,\n        onClick,\n        unread,\n      ]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const preventDefaultAndStopPropagation = useCallback(\n      (event: SyntheticEvent) => {\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      []\n    );\n\n    const handleMoreClick = useCallback((event: ReactMouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setMoreActionOpen((open) => !open);\n    }, []);\n\n    const handleMarkAsRead = useCallback(() => {\n      markInboxNotificationAsRead(inboxNotification.id);\n    }, [inboxNotification.id, markInboxNotificationAsRead]);\n\n    const handleDelete = useCallback(() => {\n      deleteInboxNotification(inboxNotification.id);\n    }, [inboxNotification.id, deleteInboxNotification]);\n\n    return (\n      <TooltipProvider>\n        <Component\n          className={cn(\n            \"lb-root lb-inbox-notification\",\n            showActions === \"hover\" &&\n              \"lb-inbox-notification:show-actions-hover\",\n            isMoreActionOpen && \"lb-inbox-notification:action-open\",\n            className\n          )}\n          dir={$.dir}\n          data-unread={unread ? \"\" : undefined}\n          data-kind={inboxNotification.kind}\n          onClick={handleClick}\n          href={href}\n          {...props}\n          ref={forwardedRef}\n        >\n          {aside && <div className=\"lb-inbox-notification-aside\">{aside}</div>}\n          <div className=\"lb-inbox-notification-content\">\n            <div className=\"lb-inbox-notification-header\">\n              <span className=\"lb-inbox-notification-title\">{title}</span>\n              <div className=\"lb-inbox-notification-details\">\n                <span className=\"lb-inbox-notification-details-labels\">\n                  <Timestamp\n                    locale={$.locale}\n                    date={date}\n                    className=\"lb-date lb-inbox-notification-date\"\n                  />\n                  {unread && (\n                    <span\n                      className=\"lb-inbox-notification-unread-indicator\"\n                      role=\"presentation\"\n                    />\n                  )}\n                </span>\n              </div>\n              {showActions && (\n                <div className=\"lb-inbox-notification-actions\">\n                  <Dropdown\n                    open={isMoreActionOpen}\n                    onOpenChange={setMoreActionOpen}\n                    align=\"end\"\n                    content={\n                      <>\n                        {additionalDropdownItemsBefore}\n                        {unread ? (\n                          <DropdownItem\n                            onSelect={handleMarkAsRead}\n                            onClick={stopPropagation}\n                            icon={<CheckIcon />}\n                          >\n                            {$.INBOX_NOTIFICATION_MARK_AS_READ}\n                          </DropdownItem>\n                        ) : null}\n                        <DropdownItem\n                          onSelect={handleDelete}\n                          onClick={stopPropagation}\n                          icon={<DeleteIcon />}\n                        >\n                          {$.INBOX_NOTIFICATION_DELETE}\n                        </DropdownItem>\n                        {additionalDropdownItemsAfter}\n                      </>\n                    }\n                  >\n                    <Tooltip content={$.INBOX_NOTIFICATION_MORE}>\n                      <DropdownTrigger asChild>\n                        <Button\n                          className=\"lb-inbox-notification-action\"\n                          onClick={handleMoreClick}\n                          onPointerDown={preventDefaultAndStopPropagation}\n                          onPointerUp={preventDefaultAndStopPropagation}\n                          aria-label={$.INBOX_NOTIFICATION_MORE}\n                          icon={<EllipsisIcon />}\n                        />\n                      </DropdownTrigger>\n                    </Tooltip>\n                  </Dropdown>\n                </div>\n              )}\n            </div>\n            <div className=\"lb-inbox-notification-body\">{children}</div>\n          </div>\n        </Component>\n      </TooltipProvider>\n    );\n  }\n);\n\nfunction InboxNotificationIcon({\n  className,\n  ...props\n}: InboxNotificationIconProps) {\n  return (\n    <div className={cn(\"lb-inbox-notification-icon\", className)} {...props} />\n  );\n}\n\nfunction InboxNotificationAvatar({\n  className,\n  ...props\n}: InboxNotificationAvatarProps) {\n  return (\n    <UserAvatar\n      className={cn(\"lb-inbox-notification-avatar\", className)}\n      {...props}\n    />\n  );\n}\n\nconst InboxNotificationThread = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationThreadProps\n>(\n  (\n    {\n      inboxNotification,\n      href,\n      showRoomName = true,\n      showReactions = true,\n      showAttachments = true,\n      showActions = \"hover\",\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const client = useClient();\n    const thread = useInboxNotificationThread(inboxNotification.id);\n    const {\n      status: subscriptionStatus,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const currentUserId = useCurrentUserId();\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    const contents = useMemo(() => {\n      const contents = generateInboxNotificationThreadContents(\n        client,\n        inboxNotification,\n        thread,\n        currentUserId ?? \"\"\n      );\n\n      if (contents.comments.length === 0 || contents.userIds.length === 0) {\n        return null;\n      }\n\n      switch (contents.type) {\n        case \"comments\": {\n          const reversedUserIds = [...contents.userIds].reverse();\n          const firstUserId = reversedUserIds[0]!;\n\n          const aside = <InboxNotificationAvatar userId={firstUserId} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_COMMENTS_LIST(\n            <List\n              values={reversedUserIds.map((userId) => (\n                <User key={userId} userId={userId} replaceSelf />\n              ))}\n              formatRemaining={$.LIST_REMAINING_USERS}\n              truncate={INBOX_NOTIFICATION_THREAD_MAX_COMMENTS - 1}\n              locale={$.locale}\n            />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined,\n            reversedUserIds.length\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              {contents.comments.map((comment) => (\n                <InboxNotificationComment\n                  key={comment.id}\n                  comment={comment}\n                  showHeader={contents.comments.length > 1}\n                  showAttachments={showAttachments}\n                  showReactions={showReactions}\n                  overrides={overrides}\n                />\n              ))}\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: contents.comments[contents.comments.length - 1]!.id,\n          };\n        }\n\n        case \"mention\": {\n          const mentionCreatedBy = contents.userIds[0]!;\n          const mentionComment = contents.comments[0]!;\n\n          const aside = <InboxNotificationAvatar userId={mentionCreatedBy} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_MENTION(\n            <User key={mentionCreatedBy} userId={mentionCreatedBy} />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              <InboxNotificationComment\n                key={mentionComment.id}\n                comment={mentionComment}\n                showHeader={false}\n                showAttachments={showAttachments}\n                showReactions={showReactions}\n                overrides={overrides}\n              />\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: mentionComment.id,\n          };\n        }\n\n        default:\n          return assertNever(\n            contents,\n            \"Unexpected thread inbox notification type\"\n          );\n      }\n    }, [\n      $,\n      client,\n      currentUserId,\n      inboxNotification,\n      overrides,\n      showRoomName,\n      showAttachments,\n      showReactions,\n      thread,\n    ]);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? // Set the comment ID as the URL hash.\n          generateUrl(resolvedHref, undefined, contents?.commentId)\n        : undefined;\n    }, [contents?.commentId, href, info?.url]);\n\n    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    if (!contents) {\n      return null;\n    }\n\n    const { aside, title, content, date, unread } = contents;\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={date}\n        unread={unread}\n        overrides={overrides}\n        href={resolvedHref}\n        showActions={showActions}\n        markAsReadOnClick={false}\n        additionalDropdownItemsBefore={\n          <DropdownItem\n            onSelect={handleSubscribeChange}\n            onClick={stopPropagation}\n            icon={\n              subscriptionStatus === \"subscribed\" ? (\n                <BellCrossedIcon />\n              ) : (\n                <BellIcon />\n              )\n            }\n          >\n            {subscriptionStatus === \"subscribed\"\n              ? $.THREAD_UNSUBSCRIBE\n              : $.THREAD_SUBSCRIBE}\n          </DropdownItem>\n        }\n        {...props}\n        ref={forwardedRef}\n      >\n        {content}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationTextMention = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationTextMentionProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      showRoomName = true,\n      href,\n      overrides,\n      ...props\n    },\n    ref\n  ) => {\n    const $ = useOverrides(overrides);\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? (sanitizeUrl(resolvedHref) ?? undefined)\n        : undefined;\n    }, [href, info?.url]);\n\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={<InboxNotificationAvatar userId={inboxNotification.createdBy} />}\n        title={$.INBOX_NOTIFICATION_TEXT_MENTION(\n          <User\n            key={inboxNotification.createdBy}\n            userId={inboxNotification.createdBy}\n          />,\n          showRoomName ? <Room roomId={inboxNotification.roomId} /> : undefined\n        )}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        href={resolvedHref}\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n);\n\nconst InboxNotificationCustom = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationCustomProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      title,\n      aside,\n      children,\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationInspector = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationInspectorProps\n>(\n  (\n    { inboxNotification, showActions = \"hover\", overrides, ...props },\n    forwardedRef\n  ) => {\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        title={<code>{inboxNotification.id}</code>}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n        data-inspector=\"\"\n      >\n        <CodeBlock\n          title=\"Data\"\n          code={JSON.stringify(inboxNotification, null, 2)}\n        />\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationCustomMissing = forwardRef<\n  HTMLAnchorElement,\n  Omit<InboxNotificationCustomProps, \"children\" | \"title\" | \"aside\">\n>(({ inboxNotification, ...props }, forwardedRef) => {\n  return (\n    <InboxNotificationCustom\n      inboxNotification={inboxNotification}\n      {...props}\n      title={\n        <>\n          Custom notification kind <code>{inboxNotification.kind}</code> is not\n          handled\n        </>\n      }\n      aside={\n        <InboxNotificationIcon>\n          <WarningIcon />\n        </InboxNotificationIcon>\n      }\n      ref={forwardedRef}\n      data-missing=\"\"\n    >\n      Notifications of this kind won’t be displayed in production. Use the{\" \"}\n      <code>kinds</code> prop to define how they should be rendered, learn more\n      in the console.\n    </InboxNotificationCustom>\n  );\n});\n\n/**\n * Displays a single inbox notification.\n *\n * @example\n * <>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification\n *       key={inboxNotification.id}\n *       inboxNotification={inboxNotification}\n *       href={`/rooms/${inboxNotification.roomId}`\n *     />\n *   ))}\n * </>\n */\nexport const InboxNotification = Object.assign(\n  forwardRef<HTMLAnchorElement, InboxNotificationProps>(\n    ({ inboxNotification, kinds, ...props }, forwardedRef) => {\n      switch (inboxNotification.kind) {\n        case \"thread\": {\n          const ResolvedInboxNotificationThread =\n            kinds?.thread ?? InboxNotificationThread;\n\n          return (\n            <ResolvedInboxNotificationThread\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        case \"textMention\": {\n          const ResolvedInboxNotificationTextMention =\n            kinds?.textMention ?? InboxNotificationTextMention;\n\n          return (\n            <ResolvedInboxNotificationTextMention\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        default: {\n          const ResolvedInboxNotificationCustom =\n            kinds?.[inboxNotification.kind];\n\n          if (!ResolvedInboxNotificationCustom) {\n            if (process.env.NODE_ENV !== \"production\") {\n              warnOnce(\n                `Custom notification kind \"${inboxNotification.kind}\" is not handled so notifications of this kind will not be displayed in production. Use the kinds prop to define how they should be rendered. Learn more: https://liveblocks.io/docs/api-reference/liveblocks-react-ui#Rendering-notification-kinds-differently.`\n              );\n\n              return (\n                <InboxNotificationCustomMissing\n                  inboxNotification={inboxNotification}\n                  {...props}\n                  ref={forwardedRef}\n                />\n              );\n            } else {\n              // Don't render anything in production if this inbox notification kind is not defined.\n              return null;\n            }\n          }\n\n          return (\n            <ResolvedInboxNotificationCustom\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n      }\n    }\n  ),\n  {\n    /**\n     * Displays a thread inbox notification kind.\n     */\n    Thread: InboxNotificationThread,\n\n    /**\n     * Displays a text mention inbox notification kind.\n     */\n    TextMention: InboxNotificationTextMention,\n\n    /**\n     * Displays a custom inbox notification kind.\n     */\n    Custom: InboxNotificationCustom,\n\n    /**\n     * Display the inbox notification's data, which can be useful during development.\n     *\n     * @example\n     * <InboxNotification\n     *   inboxNotification={inboxNotification}\n     *   kinds={{\n     *     $custom: InboxNotification.Inspector,\n     *   }}\n     * />\n     */\n    Inspector: InboxNotificationInspector,\n    Icon: InboxNotificationIcon,\n    Avatar: InboxNotificationAvatar,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+PA;AAAgC;AAK5B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AAEA;AACE;AAAgD;AAClD;AACF;AACA;AACE;AACkB;AAClB;AACA;AACA;AACA;AACF;AAGF;AACE;AAAsB;AAGxB;AAAyC;AAErC;AACA;AAAsB;AACxB;AACC;AAGH;AACE;AACA;AACA;AAAiC;AAGnC;AACE;AAAgD;AAGlD;AACE;AAA4C;AAG9C;AAEI;AAAC;AAAA;AACY;AACT;AAEE;AACkB;AACpB;AACF;AACO;AACoB;AACE;AACpB;AACT;AACI;AACC;AAEJ;AAA6D;AAE5D;AACE;AAAqD;AAGjD;AAAA;AAAC;AAAA;AACW;AACV;AACU;AAAA;AACZ;AAEE;AAAC;AAAA;AACW;AACL;AAAA;AACP;AAGN;AAGI;AAAC;AAAA;AACO;AACQ;AACR;AAGD;AAAA;AAEC;AAAC;AAAA;AACW;AACD;AACQ;AAEd;AAAA;AAEH;AACJ;AAAC;AAAA;AACW;AACD;AACS;AAEf;AAAA;AACL;AACC;AACH;AAKE;AAAC;AAAA;AACW;AACD;AACM;AACF;AACC;AACM;AAAA;AAG1B;AAAA;AAEJ;AAEJ;AACsD;AACxD;AAAA;AAAA;AAEJ;AAGN;AAEA;AAA+B;AAC7B;AAEF;AACE;AAGF;AAEA;AAAiC;AAC/B;AAEF;AACE;AACE;AAAC;AAAA;AACwD;AACnD;AAAA;AAGV;AAEA;AAAgC;AAK5B;AACE;AACA;AACe;AACC;AACE;AACJ;AACd;AACG;AAIL;AACA;AACA;AACA;AAAM;AACI;AACR;AACA;AAEF;AACA;AACA;AACE;AAAiB;AACf;AACA;AACA;AACiB;AAGnB;AACE;AAAO;AAGT;AAAuB;AAEnB;AACA;AAEA;AACA;AAAgB;AACd;AAAC;AAAA;AAGE;AACkB;AACgC;AACzC;AAAA;AACZ;AACiD;AACjC;AAElB;AAGM;AAAC;AAAA;AAEC;AACuC;AACvC;AACA;AACA;AAAA;AALa;AAWrB;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AAC2C;AAC9D;AACF;AAGE;AACA;AAEA;AACA;AAAgB;AACyC;AACN;AAEnD;AAEI;AAAC;AAAA;AAEU;AACG;AACZ;AACA;AACA;AAAA;AALoB;AAU1B;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AACS;AAC5B;AACF;AAGE;AAAO;AACL;AACA;AACF;AACJ;AACC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGF;AACE;AAEA;AAAO;AAAA;AAEqD;AACxD;AAGN;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AACE;AAAsB;AAGxB;AACE;AAAO;AAGT;AAEA;AACE;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACM;AACN;AACmB;AAEjB;AAAC;AAAA;AACW;AACD;AAKK;AAMR;AAAA;AACR;AAEE;AACC;AAEJ;AAAA;AACH;AAGN;AAEA;AAAqC;AAKjC;AACE;AACc;AACC;AACf;AACA;AACG;AAIL;AACA;AAEA;AACE;AAEA;AAEI;AAGN;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACqE;AAC5D;AACP;AAAC;AAAA;AAE2B;AAAA;AADH;AAEzB;AAC4D;AAC9D;AACwB;AACxB;AACA;AACA;AACM;AACF;AACJ;AAAA;AACF;AAGN;AAEA;AAAgC;AAK5B;AACE;AACc;AACd;AACA;AACA;AACA;AACG;AAIL;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACA;AACA;AACwB;AACxB;AACA;AACA;AACI;AACC;AAEJ;AAAA;AACH;AAGN;AAEA;AAAmC;AAQ/B;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACmC;AACX;AACxB;AACA;AACA;AACI;AACC;AACU;AAEf;AAAC;AAAA;AACO;AACyC;AAAA;AACjD;AAAA;AACF;AAGN;AAEA;AAIE;AACE;AAAC;AAAA;AACC;AACI;AAEA;AAAA;AACuD;AAAO;AAEhE;AAKA;AAEG;AACQ;AACd;AAAA;AACsE;AAC1D;AAAO;AAAA;AAAA;AAIxB;AAgBO;AAAiC;AACtC;AAEI;AAAgC;AAE5B;AAGA;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AAGE;AAGA;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AAGE;AAGA;AACE;AACE;AAAA;AACqD;AAGrD;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAIF;AAAO;AACT;AAGF;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AACF;AACF;AACF;AACA;AAAA;AAAA;AAAA;AAIU;AAAA;AAAA;AAAA;AAKK;AAAA;AAAA;AAAA;AAKL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaG;AACL;AACE;AAEZ;;"}

package/dist/components/InboxNotification.js

@@ -16,11 +16,11 @@ import { useOverrides } from '../overrides.js';
 import { Timestamp } from '../primitives/Timestamp.js';
 import { useCurrentUserId } from '../shared.js';
 import { cn } from '../utils/cn.js';
+import { UserAvatar } from './Avatar.js';
 import { Button } from './internal/Button.js';
 import { CodeBlock } from './internal/CodeBlock.js';
 import { Dropdown, DropdownItem, DropdownTrigger } from './internal/Dropdown.js';
 import { generateInboxNotificationThreadContents, InboxNotificationComment, INBOX_NOTIFICATION_THREAD_MAX_COMMENTS } from './internal/InboxNotificationThread.js';
-import { UserAvatar } from './Avatar.js';
 import { List } from './internal/List.js';
 import { Room } from './internal/Room.js';
 import { TooltipProvider, Tooltip } from './internal/Tooltip.js';

package/dist/components/InboxNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotification.js","sources":["../../src/components/InboxNotification.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  InboxNotificationCustomData,\n  InboxNotificationData,\n  InboxNotificationTextMentionData,\n  InboxNotificationThreadData,\n  KDAD,\n} from \"@liveblocks/core\";\nimport {\n  assertNever,\n  generateUrl,\n  sanitizeUrl,\n  warnOnce,\n} from \"@liveblocks/core\";\nimport {\n  useClient,\n  useDeleteInboxNotification,\n  useInboxNotificationThread,\n  useMarkInboxNotificationAsRead,\n  useRoomInfo,\n} from \"@liveblocks/react\";\nimport { useRoomThreadSubscription } from \"@liveblocks/react/_private\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ComponentType,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n  SyntheticEvent,\n} from \"react\";\nimport { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { useComponents } from \"../components\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\nimport { CheckIcon } from \"../icons/Check\";\nimport { DeleteIcon } from \"../icons/Delete\";\nimport { EllipsisIcon } from \"../icons/Ellipsis\";\nimport { WarningIcon } from \"../icons/Warning\";\nimport type {\n  CommentOverrides,\n  GlobalOverrides,\n  InboxNotificationOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { SlotProp } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./internal/Button\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\nimport { Dropdown, DropdownItem, DropdownTrigger } from \"./internal/Dropdown\";\nimport {\n  generateInboxNotificationThreadContents,\n  INBOX_NOTIFICATION_THREAD_MAX_COMMENTS,\n  InboxNotificationComment,\n} from \"./internal/InboxNotificationThread\";\nimport { UserAvatar } from \"./Avatar\";\nimport { List } from \"./internal/List\";\nimport { Room } from \"./internal/Room\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ntype ComponentTypeWithRef<\n  T extends keyof JSX.IntrinsicElements,\n  P,\n> = ComponentType<P & Pick<ComponentProps<T>, \"ref\">>;\n\ntype InboxNotificationKinds<KS extends KDAD = KDAD> = {\n  // For some reason, we cannot directly use KDAD in the mapped type line\n  // below, because it will result in '{}' rather than picking up the\n  // definition from the user-provided 'ActivitiesData'. Might be an internal\n  // TS optimization, so we're making it a param to defer the resolution.\n  [K in KS]: ComponentTypeWithRef<\"a\", InboxNotificationCustomKindProps<K>>;\n} & {\n  thread: ComponentTypeWithRef<\"a\", InboxNotificationThreadKindProps>;\n  textMention: ComponentTypeWithRef<\"a\", InboxNotificationTextMentionKindProps>;\n};\n\ninterface InboxNotificationSharedProps {\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: boolean | \"hover\";\n}\n\nexport interface InboxNotificationProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\n\n  /**\n   * Override specific kinds of inbox notifications.\n   */\n  kinds?: Partial<InboxNotificationKinds>;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      InboxNotificationOverrides &\n      ThreadOverrides &\n      CommentOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\nexport interface InboxNotificationThreadProps\n  extends Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationThreadData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: 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\nexport interface InboxNotificationTextMentionProps\n  extends Omit<InboxNotificationProps, \"kinds\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationTextMentionData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: boolean;\n}\n\nexport interface InboxNotificationInspectorProps\n  extends Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\n}\n\nexport interface InboxNotificationCustomProps\n  extends Omit<InboxNotificationProps, \"kinds\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationCustomData;\n\n  /**\n   * The inbox notification's content.\n   */\n  children: ReactNode;\n\n  /**\n   * The inbox notification's title.\n   */\n  title: ReactNode;\n\n  /**\n   * The inbox notification's aside content.\n   * Can be combined with `InboxNotification.Icon` or `InboxNotification.Avatar` to easily follow default styles.\n   */\n  aside?: ReactNode;\n\n  /**\n   * Whether to mark the inbox notification as read when clicked.\n   */\n  markAsReadOnClick?: boolean;\n}\n\nexport type InboxNotificationThreadKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationThreadData;\n};\n\nexport type InboxNotificationTextMentionKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationTextMentionData;\n};\n\nexport type InboxNotificationCustomKindProps<K extends KDAD = KDAD> = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationCustomData<K>;\n};\n\ninterface InboxNotificationLayoutProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  inboxNotification: InboxNotificationData;\n  aside?: ReactNode;\n  title: ReactNode;\n  date: Date | string | number;\n  unread?: boolean;\n  overrides?: Partial<GlobalOverrides & InboxNotificationOverrides>;\n  components?: Partial<GlobalComponents>;\n  markAsReadOnClick?: boolean;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsBefore?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsAfter?: ReactNode;\n}\n\nexport type InboxNotificationIconProps = ComponentProps<\"div\">;\n\nexport interface InboxNotificationAvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nconst InboxNotificationLayout = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationLayoutProps\n>(\n  (\n    {\n      inboxNotification,\n      children,\n      aside,\n      title,\n      date,\n      unread,\n      markAsReadOnClick,\n      onClick,\n      href,\n      showActions,\n      overrides,\n      components,\n      className,\n      asChild,\n      additionalDropdownItemsBefore,\n      additionalDropdownItemsAfter,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const { Anchor } = useComponents(components);\n    const Component = asChild ? SlotPrimitive.Slot : Anchor;\n    const [isMoreActionOpen, setMoreActionOpen] = useState(false);\n    const markInboxNotificationAsRead = useMarkInboxNotificationAsRead();\n    const deleteInboxNotification = useDeleteInboxNotification();\n\n    const handleClick = useCallback(\n      (event: ReactMouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        onClick?.(event);\n\n        const shouldMarkAsReadOnClick = markAsReadOnClick ?? Boolean(href);\n\n        if (unread && shouldMarkAsReadOnClick) {\n          markInboxNotificationAsRead(inboxNotification.id);\n        }\n      },\n      [\n        href,\n        inboxNotification.id,\n        markAsReadOnClick,\n        markInboxNotificationAsRead,\n        onClick,\n        unread,\n      ]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const preventDefaultAndStopPropagation = useCallback(\n      (event: SyntheticEvent) => {\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      []\n    );\n\n    const handleMoreClick = useCallback((event: ReactMouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setMoreActionOpen((open) => !open);\n    }, []);\n\n    const handleMarkAsRead = useCallback(() => {\n      markInboxNotificationAsRead(inboxNotification.id);\n    }, [inboxNotification.id, markInboxNotificationAsRead]);\n\n    const handleDelete = useCallback(() => {\n      deleteInboxNotification(inboxNotification.id);\n    }, [inboxNotification.id, deleteInboxNotification]);\n\n    return (\n      <TooltipProvider>\n        <Component\n          className={cn(\n            \"lb-root lb-inbox-notification\",\n            showActions === \"hover\" &&\n              \"lb-inbox-notification:show-actions-hover\",\n            isMoreActionOpen && \"lb-inbox-notification:action-open\",\n            className\n          )}\n          dir={$.dir}\n          data-unread={unread ? \"\" : undefined}\n          data-kind={inboxNotification.kind}\n          onClick={handleClick}\n          href={href}\n          {...props}\n          ref={forwardedRef}\n        >\n          {aside && <div className=\"lb-inbox-notification-aside\">{aside}</div>}\n          <div className=\"lb-inbox-notification-content\">\n            <div className=\"lb-inbox-notification-header\">\n              <span className=\"lb-inbox-notification-title\">{title}</span>\n              <div className=\"lb-inbox-notification-details\">\n                <span className=\"lb-inbox-notification-details-labels\">\n                  <Timestamp\n                    locale={$.locale}\n                    date={date}\n                    className=\"lb-date lb-inbox-notification-date\"\n                  />\n                  {unread && (\n                    <span\n                      className=\"lb-inbox-notification-unread-indicator\"\n                      role=\"presentation\"\n                    />\n                  )}\n                </span>\n              </div>\n              {showActions && (\n                <div className=\"lb-inbox-notification-actions\">\n                  <Dropdown\n                    open={isMoreActionOpen}\n                    onOpenChange={setMoreActionOpen}\n                    align=\"end\"\n                    content={\n                      <>\n                        {additionalDropdownItemsBefore}\n                        {unread ? (\n                          <DropdownItem\n                            onSelect={handleMarkAsRead}\n                            onClick={stopPropagation}\n                            icon={<CheckIcon />}\n                          >\n                            {$.INBOX_NOTIFICATION_MARK_AS_READ}\n                          </DropdownItem>\n                        ) : null}\n                        <DropdownItem\n                          onSelect={handleDelete}\n                          onClick={stopPropagation}\n                          icon={<DeleteIcon />}\n                        >\n                          {$.INBOX_NOTIFICATION_DELETE}\n                        </DropdownItem>\n                        {additionalDropdownItemsAfter}\n                      </>\n                    }\n                  >\n                    <Tooltip content={$.INBOX_NOTIFICATION_MORE}>\n                      <DropdownTrigger asChild>\n                        <Button\n                          className=\"lb-inbox-notification-action\"\n                          onClick={handleMoreClick}\n                          onPointerDown={preventDefaultAndStopPropagation}\n                          onPointerUp={preventDefaultAndStopPropagation}\n                          aria-label={$.INBOX_NOTIFICATION_MORE}\n                          icon={<EllipsisIcon />}\n                        />\n                      </DropdownTrigger>\n                    </Tooltip>\n                  </Dropdown>\n                </div>\n              )}\n            </div>\n            <div className=\"lb-inbox-notification-body\">{children}</div>\n          </div>\n        </Component>\n      </TooltipProvider>\n    );\n  }\n);\n\nfunction InboxNotificationIcon({\n  className,\n  ...props\n}: InboxNotificationIconProps) {\n  return (\n    <div className={cn(\"lb-inbox-notification-icon\", className)} {...props} />\n  );\n}\n\nfunction InboxNotificationAvatar({\n  className,\n  ...props\n}: InboxNotificationAvatarProps) {\n  return (\n    <UserAvatar\n      className={cn(\"lb-inbox-notification-avatar\", className)}\n      {...props}\n    />\n  );\n}\n\nconst InboxNotificationThread = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationThreadProps\n>(\n  (\n    {\n      inboxNotification,\n      href,\n      showRoomName = true,\n      showReactions = true,\n      showAttachments = true,\n      showActions = \"hover\",\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const client = useClient();\n    const thread = useInboxNotificationThread(inboxNotification.id);\n    const {\n      status: subscriptionStatus,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const currentUserId = useCurrentUserId();\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    const contents = useMemo(() => {\n      const contents = generateInboxNotificationThreadContents(\n        client,\n        inboxNotification,\n        thread,\n        currentUserId ?? \"\"\n      );\n\n      if (contents.comments.length === 0 || contents.userIds.length === 0) {\n        return null;\n      }\n\n      switch (contents.type) {\n        case \"comments\": {\n          const reversedUserIds = [...contents.userIds].reverse();\n          const firstUserId = reversedUserIds[0]!;\n\n          const aside = <InboxNotificationAvatar userId={firstUserId} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_COMMENTS_LIST(\n            <List\n              values={reversedUserIds.map((userId) => (\n                <User key={userId} userId={userId} replaceSelf />\n              ))}\n              formatRemaining={$.LIST_REMAINING_USERS}\n              truncate={INBOX_NOTIFICATION_THREAD_MAX_COMMENTS - 1}\n              locale={$.locale}\n            />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined,\n            reversedUserIds.length\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              {contents.comments.map((comment) => (\n                <InboxNotificationComment\n                  key={comment.id}\n                  comment={comment}\n                  showHeader={contents.comments.length > 1}\n                  showAttachments={showAttachments}\n                  showReactions={showReactions}\n                  overrides={overrides}\n                />\n              ))}\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: contents.comments[contents.comments.length - 1]!.id,\n          };\n        }\n\n        case \"mention\": {\n          const mentionCreatedBy = contents.userIds[0]!;\n          const mentionComment = contents.comments[0]!;\n\n          const aside = <InboxNotificationAvatar userId={mentionCreatedBy} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_MENTION(\n            <User key={mentionCreatedBy} userId={mentionCreatedBy} />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              <InboxNotificationComment\n                key={mentionComment.id}\n                comment={mentionComment}\n                showHeader={false}\n                showAttachments={showAttachments}\n                showReactions={showReactions}\n                overrides={overrides}\n              />\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: mentionComment.id,\n          };\n        }\n\n        default:\n          return assertNever(\n            contents,\n            \"Unexpected thread inbox notification type\"\n          );\n      }\n    }, [\n      $,\n      client,\n      currentUserId,\n      inboxNotification,\n      overrides,\n      showRoomName,\n      showAttachments,\n      showReactions,\n      thread,\n    ]);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? // Set the comment ID as the URL hash.\n          generateUrl(resolvedHref, undefined, contents?.commentId)\n        : undefined;\n    }, [contents?.commentId, href, info?.url]);\n\n    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    if (!contents) {\n      return null;\n    }\n\n    const { aside, title, content, date, unread } = contents;\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={date}\n        unread={unread}\n        overrides={overrides}\n        href={resolvedHref}\n        showActions={showActions}\n        markAsReadOnClick={false}\n        additionalDropdownItemsBefore={\n          <DropdownItem\n            onSelect={handleSubscribeChange}\n            onClick={stopPropagation}\n            icon={\n              subscriptionStatus === \"subscribed\" ? (\n                <BellCrossedIcon />\n              ) : (\n                <BellIcon />\n              )\n            }\n          >\n            {subscriptionStatus === \"subscribed\"\n              ? $.THREAD_UNSUBSCRIBE\n              : $.THREAD_SUBSCRIBE}\n          </DropdownItem>\n        }\n        {...props}\n        ref={forwardedRef}\n      >\n        {content}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationTextMention = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationTextMentionProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      showRoomName = true,\n      href,\n      overrides,\n      ...props\n    },\n    ref\n  ) => {\n    const $ = useOverrides(overrides);\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? (sanitizeUrl(resolvedHref) ?? undefined)\n        : undefined;\n    }, [href, info?.url]);\n\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={<InboxNotificationAvatar userId={inboxNotification.createdBy} />}\n        title={$.INBOX_NOTIFICATION_TEXT_MENTION(\n          <User\n            key={inboxNotification.createdBy}\n            userId={inboxNotification.createdBy}\n          />,\n          showRoomName ? <Room roomId={inboxNotification.roomId} /> : undefined\n        )}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        href={resolvedHref}\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n);\n\nconst InboxNotificationCustom = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationCustomProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      title,\n      aside,\n      children,\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationInspector = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationInspectorProps\n>(\n  (\n    { inboxNotification, showActions = \"hover\", overrides, ...props },\n    forwardedRef\n  ) => {\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        title={<code>{inboxNotification.id}</code>}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n        data-inspector=\"\"\n      >\n        <CodeBlock\n          title=\"Data\"\n          code={JSON.stringify(inboxNotification, null, 2)}\n        />\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationCustomMissing = forwardRef<\n  HTMLAnchorElement,\n  Omit<InboxNotificationCustomProps, \"children\" | \"title\" | \"aside\">\n>(({ inboxNotification, ...props }, forwardedRef) => {\n  return (\n    <InboxNotificationCustom\n      inboxNotification={inboxNotification}\n      {...props}\n      title={\n        <>\n          Custom notification kind <code>{inboxNotification.kind}</code> is not\n          handled\n        </>\n      }\n      aside={\n        <InboxNotificationIcon>\n          <WarningIcon />\n        </InboxNotificationIcon>\n      }\n      ref={forwardedRef}\n      data-missing=\"\"\n    >\n      Notifications of this kind won’t be displayed in production. Use the{\" \"}\n      <code>kinds</code> prop to define how they should be rendered, learn more\n      in the console.\n    </InboxNotificationCustom>\n  );\n});\n\n/**\n * Displays a single inbox notification.\n *\n * @example\n * <>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification\n *       key={inboxNotification.id}\n *       inboxNotification={inboxNotification}\n *       href={`/rooms/${inboxNotification.roomId}`\n *     />\n *   ))}\n * </>\n */\nexport const InboxNotification = Object.assign(\n  forwardRef<HTMLAnchorElement, InboxNotificationProps>(\n    ({ inboxNotification, kinds, ...props }, forwardedRef) => {\n      switch (inboxNotification.kind) {\n        case \"thread\": {\n          const ResolvedInboxNotificationThread =\n            kinds?.thread ?? InboxNotificationThread;\n\n          return (\n            <ResolvedInboxNotificationThread\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        case \"textMention\": {\n          const ResolvedInboxNotificationTextMention =\n            kinds?.textMention ?? InboxNotificationTextMention;\n\n          return (\n            <ResolvedInboxNotificationTextMention\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        default: {\n          const ResolvedInboxNotificationCustom =\n            kinds?.[inboxNotification.kind];\n\n          if (!ResolvedInboxNotificationCustom) {\n            if (process.env.NODE_ENV !== \"production\") {\n              warnOnce(\n                `Custom notification kind \"${inboxNotification.kind}\" is not handled so notifications of this kind will not be displayed in production. Use the kinds prop to define how they should be rendered. Learn more: https://liveblocks.io/docs/api-reference/liveblocks-react-ui#Rendering-notification-kinds-differently.`\n              );\n\n              return (\n                <InboxNotificationCustomMissing\n                  inboxNotification={inboxNotification}\n                  {...props}\n                  ref={forwardedRef}\n                />\n              );\n            } else {\n              // Don't render anything in production if this inbox notification kind is not defined.\n              return null;\n            }\n          }\n\n          return (\n            <ResolvedInboxNotificationCustom\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n      }\n    }\n  ),\n  {\n    /**\n     * Displays a thread inbox notification kind.\n     */\n    Thread: InboxNotificationThread,\n\n    /**\n     * Displays a text mention inbox notification kind.\n     */\n    TextMention: InboxNotificationTextMention,\n\n    /**\n     * Displays a custom inbox notification kind.\n     */\n    Custom: InboxNotificationCustom,\n\n    /**\n     * Display the inbox notification's data, which can be useful during development.\n     *\n     * @example\n     * <InboxNotification\n     *   inboxNotification={inboxNotification}\n     *   kinds={{\n     *     $custom: InboxNotification.Inspector,\n     *   }}\n     * />\n     */\n    Inspector: InboxNotificationInspector,\n    Icon: InboxNotificationIcon,\n    Avatar: InboxNotificationAvatar,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2PA;AAAgC;AAK5B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AAEA;AACE;AAAgD;AAClD;AACF;AACA;AACE;AACkB;AAClB;AACA;AACA;AACA;AACF;AAGF;AACE;AAAsB;AAGxB;AAAyC;AAErC;AACA;AAAsB;AACxB;AACC;AAGH;AACE;AACA;AACA;AAAiC;AAGnC;AACE;AAAgD;AAGlD;AACE;AAA4C;AAG9C;AAEI;AAAC;AAAA;AACY;AACT;AAEE;AACkB;AACpB;AACF;AACO;AACoB;AACE;AACpB;AACT;AACI;AACC;AAEJ;AAA6D;AAE5D;AACE;AAAqD;AAGjD;AAAA;AAAC;AAAA;AACW;AACV;AACU;AAAA;AACZ;AAEE;AAAC;AAAA;AACW;AACL;AAAA;AACP;AAGN;AAGI;AAAC;AAAA;AACO;AACQ;AACR;AAGD;AAAA;AAEC;AAAC;AAAA;AACW;AACD;AACQ;AAEd;AAAA;AAEH;AACJ;AAAC;AAAA;AACW;AACD;AACS;AAEf;AAAA;AACL;AACC;AACH;AAKE;AAAC;AAAA;AACW;AACD;AACM;AACF;AACC;AACM;AAAA;AAG1B;AAAA;AAEJ;AAEJ;AACsD;AACxD;AAAA;AAAA;AAEJ;AAGN;AAEA;AAA+B;AAC7B;AAEF;AACE;AAGF;AAEA;AAAiC;AAC/B;AAEF;AACE;AACE;AAAC;AAAA;AACwD;AACnD;AAAA;AAGV;AAEA;AAAgC;AAK5B;AACE;AACA;AACe;AACC;AACE;AACJ;AACd;AACG;AAIL;AACA;AACA;AACA;AAAM;AACI;AACR;AACA;AAEF;AACA;AACA;AACE;AAAiB;AACf;AACA;AACA;AACiB;AAGnB;AACE;AAAO;AAGT;AAAuB;AAEnB;AACA;AAEA;AACA;AAAgB;AACd;AAAC;AAAA;AAGE;AACkB;AACgC;AACzC;AAAA;AACZ;AACiD;AACjC;AAElB;AAGM;AAAC;AAAA;AAEC;AACuC;AACvC;AACA;AACA;AAAA;AALa;AAWrB;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AAC2C;AAC9D;AACF;AAGE;AACA;AAEA;AACA;AAAgB;AACyC;AACN;AAEnD;AAEI;AAAC;AAAA;AAEU;AACG;AACZ;AACA;AACA;AAAA;AALoB;AAU1B;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AACS;AAC5B;AACF;AAGE;AAAO;AACL;AACA;AACF;AACJ;AACC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGF;AACE;AAEA;AAAO;AAAA;AAEqD;AACxD;AAGN;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AACE;AAAsB;AAGxB;AACE;AAAO;AAGT;AAEA;AACE;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACM;AACN;AACmB;AAEjB;AAAC;AAAA;AACW;AACD;AAKK;AAMR;AAAA;AACR;AAEE;AACC;AAEJ;AAAA;AACH;AAGN;AAEA;AAAqC;AAKjC;AACE;AACc;AACC;AACf;AACA;AACG;AAIL;AACA;AAEA;AACE;AAEA;AAEI;AAGN;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACqE;AAC5D;AACP;AAAC;AAAA;AAE2B;AAAA;AADH;AAEzB;AAC4D;AAC9D;AACwB;AACxB;AACA;AACA;AACM;AACF;AACJ;AAAA;AACF;AAGN;AAEA;AAAgC;AAK5B;AACE;AACc;AACd;AACA;AACA;AACA;AACG;AAIL;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACA;AACA;AACwB;AACxB;AACA;AACA;AACI;AACC;AAEJ;AAAA;AACH;AAGN;AAEA;AAAmC;AAQ/B;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACmC;AACX;AACxB;AACA;AACA;AACI;AACC;AACU;AAEf;AAAC;AAAA;AACO;AACyC;AAAA;AACjD;AAAA;AACF;AAGN;AAEA;AAIE;AACE;AAAC;AAAA;AACC;AACI;AAEA;AAAA;AACuD;AAAO;AAEhE;AAKA;AAEG;AACQ;AACd;AAAA;AACsE;AAC1D;AAAO;AAAA;AAAA;AAIxB;AAgBO;AAAiC;AACtC;AAEI;AAAgC;AAE5B;AAGA;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AAGE;AAGA;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AAGE;AAGA;AACE;AACE;AAAA;AACqD;AAGrD;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAIF;AAAO;AACT;AAGF;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AACF;AACF;AACF;AACA;AAAA;AAAA;AAAA;AAIU;AAAA;AAAA;AAAA;AAKK;AAAA;AAAA;AAAA;AAKL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaG;AACL;AACE;AAEZ;;"}
+{"version":3,"file":"InboxNotification.js","sources":["../../src/components/InboxNotification.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  InboxNotificationCustomData,\n  InboxNotificationData,\n  InboxNotificationTextMentionData,\n  InboxNotificationThreadData,\n  KDAD,\n} from \"@liveblocks/core\";\nimport {\n  assertNever,\n  generateUrl,\n  sanitizeUrl,\n  warnOnce,\n} from \"@liveblocks/core\";\nimport {\n  useClient,\n  useDeleteInboxNotification,\n  useInboxNotificationThread,\n  useMarkInboxNotificationAsRead,\n  useRoomInfo,\n} from \"@liveblocks/react\";\nimport { useRoomThreadSubscription } from \"@liveblocks/react/_private\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ComponentType,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n  SyntheticEvent,\n} from \"react\";\nimport { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { useComponents } from \"../components\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\nimport { CheckIcon } from \"../icons/Check\";\nimport { DeleteIcon } from \"../icons/Delete\";\nimport { EllipsisIcon } from \"../icons/Ellipsis\";\nimport { WarningIcon } from \"../icons/Warning\";\nimport type {\n  CommentOverrides,\n  GlobalOverrides,\n  InboxNotificationOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { SlotProp } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { UserAvatar } from \"./Avatar\";\nimport { Button } from \"./internal/Button\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\nimport { Dropdown, DropdownItem, DropdownTrigger } from \"./internal/Dropdown\";\nimport {\n  generateInboxNotificationThreadContents,\n  INBOX_NOTIFICATION_THREAD_MAX_COMMENTS,\n  InboxNotificationComment,\n} from \"./internal/InboxNotificationThread\";\nimport { List } from \"./internal/List\";\nimport { Room } from \"./internal/Room\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ntype ComponentTypeWithRef<\n  T extends keyof JSX.IntrinsicElements,\n  P,\n> = ComponentType<P & Pick<ComponentProps<T>, \"ref\">>;\n\ntype InboxNotificationKinds<KS extends KDAD = KDAD> = {\n  // For some reason, we cannot directly use KDAD in the mapped type line\n  // below, because it will result in '{}' rather than picking up the\n  // definition from the user-provided 'ActivitiesData'. Might be an internal\n  // TS optimization, so we're making it a param to defer the resolution.\n  [K in KS]: ComponentTypeWithRef<\"a\", InboxNotificationCustomKindProps<K>>;\n} & {\n  thread: ComponentTypeWithRef<\"a\", InboxNotificationThreadKindProps>;\n  textMention: ComponentTypeWithRef<\"a\", InboxNotificationTextMentionKindProps>;\n};\n\ninterface InboxNotificationSharedProps {\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: boolean | \"hover\";\n}\n\nexport interface InboxNotificationProps\n  extends\n    Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\n\n  /**\n   * Override specific kinds of inbox notifications.\n   */\n  kinds?: Partial<InboxNotificationKinds>;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      InboxNotificationOverrides &\n      ThreadOverrides &\n      CommentOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\nexport interface InboxNotificationThreadProps\n  extends\n    Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationThreadData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: 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\nexport interface InboxNotificationTextMentionProps\n  extends Omit<InboxNotificationProps, \"kinds\">, InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationTextMentionData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: boolean;\n}\n\nexport interface InboxNotificationInspectorProps\n  extends\n    Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\n}\n\nexport interface InboxNotificationCustomProps\n  extends\n    Omit<InboxNotificationProps, \"kinds\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationCustomData;\n\n  /**\n   * The inbox notification's content.\n   */\n  children: ReactNode;\n\n  /**\n   * The inbox notification's title.\n   */\n  title: ReactNode;\n\n  /**\n   * The inbox notification's aside content.\n   * Can be combined with `InboxNotification.Icon` or `InboxNotification.Avatar` to easily follow default styles.\n   */\n  aside?: ReactNode;\n\n  /**\n   * Whether to mark the inbox notification as read when clicked.\n   */\n  markAsReadOnClick?: boolean;\n}\n\nexport type InboxNotificationThreadKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationThreadData;\n};\n\nexport type InboxNotificationTextMentionKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationTextMentionData;\n};\n\nexport type InboxNotificationCustomKindProps<K extends KDAD = KDAD> = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationCustomData<K>;\n};\n\ninterface InboxNotificationLayoutProps\n  extends\n    Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  inboxNotification: InboxNotificationData;\n  aside?: ReactNode;\n  title: ReactNode;\n  date: Date | string | number;\n  unread?: boolean;\n  overrides?: Partial<GlobalOverrides & InboxNotificationOverrides>;\n  components?: Partial<GlobalComponents>;\n  markAsReadOnClick?: boolean;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsBefore?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsAfter?: ReactNode;\n}\n\nexport type InboxNotificationIconProps = ComponentProps<\"div\">;\n\nexport interface InboxNotificationAvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nconst InboxNotificationLayout = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationLayoutProps\n>(\n  (\n    {\n      inboxNotification,\n      children,\n      aside,\n      title,\n      date,\n      unread,\n      markAsReadOnClick,\n      onClick,\n      href,\n      showActions,\n      overrides,\n      components,\n      className,\n      asChild,\n      additionalDropdownItemsBefore,\n      additionalDropdownItemsAfter,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const { Anchor } = useComponents(components);\n    const Component = asChild ? SlotPrimitive.Slot : Anchor;\n    const [isMoreActionOpen, setMoreActionOpen] = useState(false);\n    const markInboxNotificationAsRead = useMarkInboxNotificationAsRead();\n    const deleteInboxNotification = useDeleteInboxNotification();\n\n    const handleClick = useCallback(\n      (event: ReactMouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        onClick?.(event);\n\n        const shouldMarkAsReadOnClick = markAsReadOnClick ?? Boolean(href);\n\n        if (unread && shouldMarkAsReadOnClick) {\n          markInboxNotificationAsRead(inboxNotification.id);\n        }\n      },\n      [\n        href,\n        inboxNotification.id,\n        markAsReadOnClick,\n        markInboxNotificationAsRead,\n        onClick,\n        unread,\n      ]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const preventDefaultAndStopPropagation = useCallback(\n      (event: SyntheticEvent) => {\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      []\n    );\n\n    const handleMoreClick = useCallback((event: ReactMouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setMoreActionOpen((open) => !open);\n    }, []);\n\n    const handleMarkAsRead = useCallback(() => {\n      markInboxNotificationAsRead(inboxNotification.id);\n    }, [inboxNotification.id, markInboxNotificationAsRead]);\n\n    const handleDelete = useCallback(() => {\n      deleteInboxNotification(inboxNotification.id);\n    }, [inboxNotification.id, deleteInboxNotification]);\n\n    return (\n      <TooltipProvider>\n        <Component\n          className={cn(\n            \"lb-root lb-inbox-notification\",\n            showActions === \"hover\" &&\n              \"lb-inbox-notification:show-actions-hover\",\n            isMoreActionOpen && \"lb-inbox-notification:action-open\",\n            className\n          )}\n          dir={$.dir}\n          data-unread={unread ? \"\" : undefined}\n          data-kind={inboxNotification.kind}\n          onClick={handleClick}\n          href={href}\n          {...props}\n          ref={forwardedRef}\n        >\n          {aside && <div className=\"lb-inbox-notification-aside\">{aside}</div>}\n          <div className=\"lb-inbox-notification-content\">\n            <div className=\"lb-inbox-notification-header\">\n              <span className=\"lb-inbox-notification-title\">{title}</span>\n              <div className=\"lb-inbox-notification-details\">\n                <span className=\"lb-inbox-notification-details-labels\">\n                  <Timestamp\n                    locale={$.locale}\n                    date={date}\n                    className=\"lb-date lb-inbox-notification-date\"\n                  />\n                  {unread && (\n                    <span\n                      className=\"lb-inbox-notification-unread-indicator\"\n                      role=\"presentation\"\n                    />\n                  )}\n                </span>\n              </div>\n              {showActions && (\n                <div className=\"lb-inbox-notification-actions\">\n                  <Dropdown\n                    open={isMoreActionOpen}\n                    onOpenChange={setMoreActionOpen}\n                    align=\"end\"\n                    content={\n                      <>\n                        {additionalDropdownItemsBefore}\n                        {unread ? (\n                          <DropdownItem\n                            onSelect={handleMarkAsRead}\n                            onClick={stopPropagation}\n                            icon={<CheckIcon />}\n                          >\n                            {$.INBOX_NOTIFICATION_MARK_AS_READ}\n                          </DropdownItem>\n                        ) : null}\n                        <DropdownItem\n                          onSelect={handleDelete}\n                          onClick={stopPropagation}\n                          icon={<DeleteIcon />}\n                        >\n                          {$.INBOX_NOTIFICATION_DELETE}\n                        </DropdownItem>\n                        {additionalDropdownItemsAfter}\n                      </>\n                    }\n                  >\n                    <Tooltip content={$.INBOX_NOTIFICATION_MORE}>\n                      <DropdownTrigger asChild>\n                        <Button\n                          className=\"lb-inbox-notification-action\"\n                          onClick={handleMoreClick}\n                          onPointerDown={preventDefaultAndStopPropagation}\n                          onPointerUp={preventDefaultAndStopPropagation}\n                          aria-label={$.INBOX_NOTIFICATION_MORE}\n                          icon={<EllipsisIcon />}\n                        />\n                      </DropdownTrigger>\n                    </Tooltip>\n                  </Dropdown>\n                </div>\n              )}\n            </div>\n            <div className=\"lb-inbox-notification-body\">{children}</div>\n          </div>\n        </Component>\n      </TooltipProvider>\n    );\n  }\n);\n\nfunction InboxNotificationIcon({\n  className,\n  ...props\n}: InboxNotificationIconProps) {\n  return (\n    <div className={cn(\"lb-inbox-notification-icon\", className)} {...props} />\n  );\n}\n\nfunction InboxNotificationAvatar({\n  className,\n  ...props\n}: InboxNotificationAvatarProps) {\n  return (\n    <UserAvatar\n      className={cn(\"lb-inbox-notification-avatar\", className)}\n      {...props}\n    />\n  );\n}\n\nconst InboxNotificationThread = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationThreadProps\n>(\n  (\n    {\n      inboxNotification,\n      href,\n      showRoomName = true,\n      showReactions = true,\n      showAttachments = true,\n      showActions = \"hover\",\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const client = useClient();\n    const thread = useInboxNotificationThread(inboxNotification.id);\n    const {\n      status: subscriptionStatus,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const currentUserId = useCurrentUserId();\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    const contents = useMemo(() => {\n      const contents = generateInboxNotificationThreadContents(\n        client,\n        inboxNotification,\n        thread,\n        currentUserId ?? \"\"\n      );\n\n      if (contents.comments.length === 0 || contents.userIds.length === 0) {\n        return null;\n      }\n\n      switch (contents.type) {\n        case \"comments\": {\n          const reversedUserIds = [...contents.userIds].reverse();\n          const firstUserId = reversedUserIds[0]!;\n\n          const aside = <InboxNotificationAvatar userId={firstUserId} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_COMMENTS_LIST(\n            <List\n              values={reversedUserIds.map((userId) => (\n                <User key={userId} userId={userId} replaceSelf />\n              ))}\n              formatRemaining={$.LIST_REMAINING_USERS}\n              truncate={INBOX_NOTIFICATION_THREAD_MAX_COMMENTS - 1}\n              locale={$.locale}\n            />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined,\n            reversedUserIds.length\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              {contents.comments.map((comment) => (\n                <InboxNotificationComment\n                  key={comment.id}\n                  comment={comment}\n                  showHeader={contents.comments.length > 1}\n                  showAttachments={showAttachments}\n                  showReactions={showReactions}\n                  overrides={overrides}\n                />\n              ))}\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: contents.comments[contents.comments.length - 1]!.id,\n          };\n        }\n\n        case \"mention\": {\n          const mentionCreatedBy = contents.userIds[0]!;\n          const mentionComment = contents.comments[0]!;\n\n          const aside = <InboxNotificationAvatar userId={mentionCreatedBy} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_MENTION(\n            <User key={mentionCreatedBy} userId={mentionCreatedBy} />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              <InboxNotificationComment\n                key={mentionComment.id}\n                comment={mentionComment}\n                showHeader={false}\n                showAttachments={showAttachments}\n                showReactions={showReactions}\n                overrides={overrides}\n              />\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: mentionComment.id,\n          };\n        }\n\n        default:\n          return assertNever(\n            contents,\n            \"Unexpected thread inbox notification type\"\n          );\n      }\n    }, [\n      $,\n      client,\n      currentUserId,\n      inboxNotification,\n      overrides,\n      showRoomName,\n      showAttachments,\n      showReactions,\n      thread,\n    ]);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? // Set the comment ID as the URL hash.\n          generateUrl(resolvedHref, undefined, contents?.commentId)\n        : undefined;\n    }, [contents?.commentId, href, info?.url]);\n\n    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    if (!contents) {\n      return null;\n    }\n\n    const { aside, title, content, date, unread } = contents;\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={date}\n        unread={unread}\n        overrides={overrides}\n        href={resolvedHref}\n        showActions={showActions}\n        markAsReadOnClick={false}\n        additionalDropdownItemsBefore={\n          <DropdownItem\n            onSelect={handleSubscribeChange}\n            onClick={stopPropagation}\n            icon={\n              subscriptionStatus === \"subscribed\" ? (\n                <BellCrossedIcon />\n              ) : (\n                <BellIcon />\n              )\n            }\n          >\n            {subscriptionStatus === \"subscribed\"\n              ? $.THREAD_UNSUBSCRIBE\n              : $.THREAD_SUBSCRIBE}\n          </DropdownItem>\n        }\n        {...props}\n        ref={forwardedRef}\n      >\n        {content}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationTextMention = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationTextMentionProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      showRoomName = true,\n      href,\n      overrides,\n      ...props\n    },\n    ref\n  ) => {\n    const $ = useOverrides(overrides);\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? (sanitizeUrl(resolvedHref) ?? undefined)\n        : undefined;\n    }, [href, info?.url]);\n\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={<InboxNotificationAvatar userId={inboxNotification.createdBy} />}\n        title={$.INBOX_NOTIFICATION_TEXT_MENTION(\n          <User\n            key={inboxNotification.createdBy}\n            userId={inboxNotification.createdBy}\n          />,\n          showRoomName ? <Room roomId={inboxNotification.roomId} /> : undefined\n        )}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        href={resolvedHref}\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n);\n\nconst InboxNotificationCustom = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationCustomProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      title,\n      aside,\n      children,\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationInspector = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationInspectorProps\n>(\n  (\n    { inboxNotification, showActions = \"hover\", overrides, ...props },\n    forwardedRef\n  ) => {\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        title={<code>{inboxNotification.id}</code>}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n        data-inspector=\"\"\n      >\n        <CodeBlock\n          title=\"Data\"\n          code={JSON.stringify(inboxNotification, null, 2)}\n        />\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationCustomMissing = forwardRef<\n  HTMLAnchorElement,\n  Omit<InboxNotificationCustomProps, \"children\" | \"title\" | \"aside\">\n>(({ inboxNotification, ...props }, forwardedRef) => {\n  return (\n    <InboxNotificationCustom\n      inboxNotification={inboxNotification}\n      {...props}\n      title={\n        <>\n          Custom notification kind <code>{inboxNotification.kind}</code> is not\n          handled\n        </>\n      }\n      aside={\n        <InboxNotificationIcon>\n          <WarningIcon />\n        </InboxNotificationIcon>\n      }\n      ref={forwardedRef}\n      data-missing=\"\"\n    >\n      Notifications of this kind won’t be displayed in production. Use the{\" \"}\n      <code>kinds</code> prop to define how they should be rendered, learn more\n      in the console.\n    </InboxNotificationCustom>\n  );\n});\n\n/**\n * Displays a single inbox notification.\n *\n * @example\n * <>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification\n *       key={inboxNotification.id}\n *       inboxNotification={inboxNotification}\n *       href={`/rooms/${inboxNotification.roomId}`\n *     />\n *   ))}\n * </>\n */\nexport const InboxNotification = Object.assign(\n  forwardRef<HTMLAnchorElement, InboxNotificationProps>(\n    ({ inboxNotification, kinds, ...props }, forwardedRef) => {\n      switch (inboxNotification.kind) {\n        case \"thread\": {\n          const ResolvedInboxNotificationThread =\n            kinds?.thread ?? InboxNotificationThread;\n\n          return (\n            <ResolvedInboxNotificationThread\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        case \"textMention\": {\n          const ResolvedInboxNotificationTextMention =\n            kinds?.textMention ?? InboxNotificationTextMention;\n\n          return (\n            <ResolvedInboxNotificationTextMention\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        default: {\n          const ResolvedInboxNotificationCustom =\n            kinds?.[inboxNotification.kind];\n\n          if (!ResolvedInboxNotificationCustom) {\n            if (process.env.NODE_ENV !== \"production\") {\n              warnOnce(\n                `Custom notification kind \"${inboxNotification.kind}\" is not handled so notifications of this kind will not be displayed in production. Use the kinds prop to define how they should be rendered. Learn more: https://liveblocks.io/docs/api-reference/liveblocks-react-ui#Rendering-notification-kinds-differently.`\n              );\n\n              return (\n                <InboxNotificationCustomMissing\n                  inboxNotification={inboxNotification}\n                  {...props}\n                  ref={forwardedRef}\n                />\n              );\n            } else {\n              // Don't render anything in production if this inbox notification kind is not defined.\n              return null;\n            }\n          }\n\n          return (\n            <ResolvedInboxNotificationCustom\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n      }\n    }\n  ),\n  {\n    /**\n     * Displays a thread inbox notification kind.\n     */\n    Thread: InboxNotificationThread,\n\n    /**\n     * Displays a text mention inbox notification kind.\n     */\n    TextMention: InboxNotificationTextMention,\n\n    /**\n     * Displays a custom inbox notification kind.\n     */\n    Custom: InboxNotificationCustom,\n\n    /**\n     * Display the inbox notification's data, which can be useful during development.\n     *\n     * @example\n     * <InboxNotification\n     *   inboxNotification={inboxNotification}\n     *   kinds={{\n     *     $custom: InboxNotification.Inspector,\n     *   }}\n     * />\n     */\n    Inspector: InboxNotificationInspector,\n    Icon: InboxNotificationIcon,\n    Avatar: InboxNotificationAvatar,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+PA;AAAgC;AAK5B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AAEA;AACE;AAAgD;AAClD;AACF;AACA;AACE;AACkB;AAClB;AACA;AACA;AACA;AACF;AAGF;AACE;AAAsB;AAGxB;AAAyC;AAErC;AACA;AAAsB;AACxB;AACC;AAGH;AACE;AACA;AACA;AAAiC;AAGnC;AACE;AAAgD;AAGlD;AACE;AAA4C;AAG9C;AAEI;AAAC;AAAA;AACY;AACT;AAEE;AACkB;AACpB;AACF;AACO;AACoB;AACE;AACpB;AACT;AACI;AACC;AAEJ;AAA6D;AAE5D;AACE;AAAqD;AAGjD;AAAA;AAAC;AAAA;AACW;AACV;AACU;AAAA;AACZ;AAEE;AAAC;AAAA;AACW;AACL;AAAA;AACP;AAGN;AAGI;AAAC;AAAA;AACO;AACQ;AACR;AAGD;AAAA;AAEC;AAAC;AAAA;AACW;AACD;AACQ;AAEd;AAAA;AAEH;AACJ;AAAC;AAAA;AACW;AACD;AACS;AAEf;AAAA;AACL;AACC;AACH;AAKE;AAAC;AAAA;AACW;AACD;AACM;AACF;AACC;AACM;AAAA;AAG1B;AAAA;AAEJ;AAEJ;AACsD;AACxD;AAAA;AAAA;AAEJ;AAGN;AAEA;AAA+B;AAC7B;AAEF;AACE;AAGF;AAEA;AAAiC;AAC/B;AAEF;AACE;AACE;AAAC;AAAA;AACwD;AACnD;AAAA;AAGV;AAEA;AAAgC;AAK5B;AACE;AACA;AACe;AACC;AACE;AACJ;AACd;AACG;AAIL;AACA;AACA;AACA;AAAM;AACI;AACR;AACA;AAEF;AACA;AACA;AACE;AAAiB;AACf;AACA;AACA;AACiB;AAGnB;AACE;AAAO;AAGT;AAAuB;AAEnB;AACA;AAEA;AACA;AAAgB;AACd;AAAC;AAAA;AAGE;AACkB;AACgC;AACzC;AAAA;AACZ;AACiD;AACjC;AAElB;AAGM;AAAC;AAAA;AAEC;AACuC;AACvC;AACA;AACA;AAAA;AALa;AAWrB;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AAC2C;AAC9D;AACF;AAGE;AACA;AAEA;AACA;AAAgB;AACyC;AACN;AAEnD;AAEI;AAAC;AAAA;AAEU;AACG;AACZ;AACA;AACA;AAAA;AALoB;AAU1B;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AACS;AAC5B;AACF;AAGE;AAAO;AACL;AACA;AACF;AACJ;AACC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGF;AACE;AAEA;AAAO;AAAA;AAEqD;AACxD;AAGN;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AACE;AAAsB;AAGxB;AACE;AAAO;AAGT;AAEA;AACE;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACM;AACN;AACmB;AAEjB;AAAC;AAAA;AACW;AACD;AAKK;AAMR;AAAA;AACR;AAEE;AACC;AAEJ;AAAA;AACH;AAGN;AAEA;AAAqC;AAKjC;AACE;AACc;AACC;AACf;AACA;AACG;AAIL;AACA;AAEA;AACE;AAEA;AAEI;AAGN;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACqE;AAC5D;AACP;AAAC;AAAA;AAE2B;AAAA;AADH;AAEzB;AAC4D;AAC9D;AACwB;AACxB;AACA;AACA;AACM;AACF;AACJ;AAAA;AACF;AAGN;AAEA;AAAgC;AAK5B;AACE;AACc;AACd;AACA;AACA;AACA;AACG;AAIL;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACA;AACA;AACwB;AACxB;AACA;AACA;AACI;AACC;AAEJ;AAAA;AACH;AAGN;AAEA;AAAmC;AAQ/B;AACE;AAEmD;AAIrD;AACE;AAAC;AAAA;AACC;AACmC;AACX;AACxB;AACA;AACA;AACI;AACC;AACU;AAEf;AAAC;AAAA;AACO;AACyC;AAAA;AACjD;AAAA;AACF;AAGN;AAEA;AAIE;AACE;AAAC;AAAA;AACC;AACI;AAEA;AAAA;AACuD;AAAO;AAEhE;AAKA;AAEG;AACQ;AACd;AAAA;AACsE;AAC1D;AAAO;AAAA;AAAA;AAIxB;AAgBO;AAAiC;AACtC;AAEI;AAAgC;AAE5B;AAGA;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AAGE;AAGA;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AAGE;AAGA;AACE;AACE;AAAA;AACqD;AAGrD;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAIF;AAAO;AACT;AAGF;AACE;AAAC;AAAA;AACC;AACI;AACC;AAAA;AACP;AAEJ;AACF;AACF;AACF;AACA;AAAA;AAAA;AAAA;AAIU;AAAA;AAAA;AAAA;AAKK;AAAA;AAAA;AAAA;AAKL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaG;AACL;AACE;AAEZ;;"}

package/dist/components/InboxNotificationList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotificationList.cjs","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef, useRef } from \"react\";\n\nimport { cn } from \"../utils/cn\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\n\nexport interface InboxNotificationListProps\n  extends ComponentPropsWithoutRef<\"ol\"> {\n  /**\n   * This API is *EXPERIMENTAL* and likely not going to be the final API. Do\n   * not rely on it.\n   *\n   * @private\n   */\n  onReachEnd?: () => void;\n}\n\nfunction ReachEndMarker({\n  enabled,\n  onReachEnd,\n}: {\n  enabled: boolean;\n  onReachEnd: () => void;\n}) {\n  const markerRef = useRef<HTMLDivElement>(null);\n\n  useIntersectionCallback(\n    markerRef,\n    (isIntersecting) => {\n      if (isIntersecting) {\n        onReachEnd();\n      }\n    },\n    {\n      enabled,\n    }\n  );\n\n  return <div ref={markerRef} style={{ height: 0 }} />;\n}\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ onReachEnd, children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={cn(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n      {/* Render an invisible marker at the end which is tied to an IntersectionObserver to be alerted when the end of the list has been reached */}\n      {onReachEnd && (\n        <ReachEndMarker\n          onReachEnd={onReachEnd}\n          enabled={Children.count(children) > 0}\n        />\n      )}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAmBA;AAAwB;AACtB;AAEF;AAIE;AAEA;AAAA;AACE;AAEE;AACE;AAAW;AACb;AACF;AACA;AACE;AACF;AAGF;AACF;AAYa;AAIX;AACE;AAAC;AAAA;AAC8D;AACzD;AACC;AAEJ;AAIA;AAGC;AAAC;AAAA;AACC;AACoC;AAAA;AACtC;AAAA;AAAA;AAIR;;"}
+{"version":3,"file":"InboxNotificationList.cjs","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef, useRef } from \"react\";\n\nimport { cn } from \"../utils/cn\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\n\nexport interface InboxNotificationListProps extends ComponentPropsWithoutRef<\"ol\"> {\n  /**\n   * This API is *EXPERIMENTAL* and likely not going to be the final API. Do\n   * not rely on it.\n   *\n   * @private\n   */\n  onReachEnd?: () => void;\n}\n\nfunction ReachEndMarker({\n  enabled,\n  onReachEnd,\n}: {\n  enabled: boolean;\n  onReachEnd: () => void;\n}) {\n  const markerRef = useRef<HTMLDivElement>(null);\n\n  useIntersectionCallback(\n    markerRef,\n    (isIntersecting) => {\n      if (isIntersecting) {\n        onReachEnd();\n      }\n    },\n    {\n      enabled,\n    }\n  );\n\n  return <div ref={markerRef} style={{ height: 0 }} />;\n}\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ onReachEnd, children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={cn(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n      {/* Render an invisible marker at the end which is tied to an IntersectionObserver to be alerted when the end of the list has been reached */}\n      {onReachEnd && (\n        <ReachEndMarker\n          onReachEnd={onReachEnd}\n          enabled={Children.count(children) > 0}\n        />\n      )}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAkBA;AAAwB;AACtB;AAEF;AAIE;AAEA;AAAA;AACE;AAEE;AACE;AAAW;AACb;AACF;AACA;AACE;AACF;AAGF;AACF;AAYa;AAIX;AACE;AAAC;AAAA;AAC8D;AACzD;AACC;AAEJ;AAIA;AAGC;AAAC;AAAA;AACC;AACoC;AAAA;AACtC;AAAA;AAAA;AAIR;;"}

package/dist/components/InboxNotificationList.js.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotificationList.js","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef, useRef } from \"react\";\n\nimport { cn } from \"../utils/cn\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\n\nexport interface InboxNotificationListProps\n  extends ComponentPropsWithoutRef<\"ol\"> {\n  /**\n   * This API is *EXPERIMENTAL* and likely not going to be the final API. Do\n   * not rely on it.\n   *\n   * @private\n   */\n  onReachEnd?: () => void;\n}\n\nfunction ReachEndMarker({\n  enabled,\n  onReachEnd,\n}: {\n  enabled: boolean;\n  onReachEnd: () => void;\n}) {\n  const markerRef = useRef<HTMLDivElement>(null);\n\n  useIntersectionCallback(\n    markerRef,\n    (isIntersecting) => {\n      if (isIntersecting) {\n        onReachEnd();\n      }\n    },\n    {\n      enabled,\n    }\n  );\n\n  return <div ref={markerRef} style={{ height: 0 }} />;\n}\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ onReachEnd, children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={cn(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n      {/* Render an invisible marker at the end which is tied to an IntersectionObserver to be alerted when the end of the list has been reached */}\n      {onReachEnd && (\n        <ReachEndMarker\n          onReachEnd={onReachEnd}\n          enabled={Children.count(children) > 0}\n        />\n      )}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAmBA;AAAwB;AACtB;AAEF;AAIE;AAEA;AAAA;AACE;AAEE;AACE;AAAW;AACb;AACF;AACA;AACE;AACF;AAGF;AACF;AAYa;AAIX;AACE;AAAC;AAAA;AAC8D;AACzD;AACC;AAEJ;AAIA;AAGC;AAAC;AAAA;AACC;AACoC;AAAA;AACtC;AAAA;AAAA;AAIR;;"}
+{"version":3,"file":"InboxNotificationList.js","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef, useRef } from \"react\";\n\nimport { cn } from \"../utils/cn\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\n\nexport interface InboxNotificationListProps extends ComponentPropsWithoutRef<\"ol\"> {\n  /**\n   * This API is *EXPERIMENTAL* and likely not going to be the final API. Do\n   * not rely on it.\n   *\n   * @private\n   */\n  onReachEnd?: () => void;\n}\n\nfunction ReachEndMarker({\n  enabled,\n  onReachEnd,\n}: {\n  enabled: boolean;\n  onReachEnd: () => void;\n}) {\n  const markerRef = useRef<HTMLDivElement>(null);\n\n  useIntersectionCallback(\n    markerRef,\n    (isIntersecting) => {\n      if (isIntersecting) {\n        onReachEnd();\n      }\n    },\n    {\n      enabled,\n    }\n  );\n\n  return <div ref={markerRef} style={{ height: 0 }} />;\n}\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ onReachEnd, children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={cn(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n      {/* Render an invisible marker at the end which is tied to an IntersectionObserver to be alerted when the end of the list has been reached */}\n      {onReachEnd && (\n        <ReachEndMarker\n          onReachEnd={onReachEnd}\n          enabled={Children.count(children) > 0}\n        />\n      )}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAkBA;AAAwB;AACtB;AAEF;AAIE;AAEA;AAAA;AACE;AAEE;AACE;AAAW;AACb;AACF;AACA;AACE;AACF;AAGF;AACF;AAYa;AAIX;AACE;AAAC;AAAA;AAC8D;AACzD;AACC;AAEJ;AAIA;AAGC;AAAC;AAAA;AACC;AACoC;AAAA;AACtC;AAAA;AAAA;AAIR;;"}

package/dist/components/internal/AiComposer.cjs

@@ -70,8 +70,7 @@ const AiComposer = react.forwardRef(
     const handleComposerSubmit = react.useCallback(
       (message, event) => {
         onComposerSubmit?.(message, event);
-        if (event.isDefaultPrevented())
-          return;
+        if (event.isDefaultPrevented()) return;
         const newMessage = sendAiMessage(message.text);
         onComposerSubmitted?.(newMessage);
       },

package/dist/components/internal/AiComposer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AiComposer.cjs","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n  type AiChatMessage,\n  type CopilotId,\n  type MessageId,\n} from \"@liveblocks/core\";\nimport { useSendAiMessage } from \"@liveblocks/react\";\nimport {\n  type ComponentProps,\n  type FormEvent,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n  type AiComposerOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n  AiComposerEditorProps,\n  AiComposerFormProps,\n  AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps\n  extends Omit<ComponentProps<\"form\">, \"defaultValue\"> {\n  /**\n   * The composer's initial value.\n   */\n  defaultValue?: string;\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: (\n    message: AiComposerSubmitMessage,\n    event: FormEvent<HTMLFormElement>\n  ) => void;\n\n  /**\n   * The event handler called after the composer is submitted.\n   *\n   * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n   */\n  onComposerSubmitted?: (message: AiChatMessage) => void;\n\n  /**\n   * Whether the composer is disabled.\n   */\n  disabled?: AiComposerFormProps[\"disabled\"];\n\n  /**\n   * Whether to focus the composer on mount.\n   */\n  autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n  /**\n   * The ID of the chat the composer belongs to.\n   */\n  chatId: string;\n\n  /**\n   * The ID of the copilot to use to send the message.\n   */\n  copilotId?: CopilotId;\n\n  /**\n   * The time, in milliseconds, before an AI response will timeout.\n   */\n  responseTimeout?: number;\n\n  /**\n   * @internal\n   */\n  branchId?: MessageId;\n\n  /**\n   * @internal\n   */\n  stream?: boolean;\n}\n\nfunction AiComposerAction({\n  overrides,\n}: {\n  overrides?: AiComposerProps[\"overrides\"];\n}) {\n  const { canAbort } = useAiComposer();\n  const $ = useOverrides(overrides);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return canAbort ? (\n    <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n      <AiComposerPrimitive.Abort asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"secondary\"\n          aria-label={$.AI_COMPOSER_ABORT}\n          icon={<StopIcon />}\n        />\n      </AiComposerPrimitive.Abort>\n    </ShortcutTooltip>\n  ) : (\n    <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n      <AiComposerPrimitive.Submit asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"primary\"\n          aria-label={$.AI_COMPOSER_SEND}\n          icon={<SendIcon />}\n        />\n      </AiComposerPrimitive.Submit>\n    </ShortcutTooltip>\n  );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n  (\n    {\n      defaultValue,\n      onComposerSubmit,\n      disabled,\n      autoFocus,\n      overrides,\n      className,\n      chatId,\n      branchId,\n      copilotId,\n      responseTimeout,\n      stream = true,\n      onComposerSubmitted,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const sendAiMessage = useSendAiMessage(chatId, {\n      stream,\n      copilotId,\n      timeout: responseTimeout,\n    });\n\n    const handleComposerSubmit = useCallback(\n      (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(message, event);\n\n        if (event.isDefaultPrevented()) return;\n\n        const newMessage = sendAiMessage(message.text);\n\n        onComposerSubmitted?.(newMessage);\n      },\n      [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n    );\n\n    return (\n      <TooltipProvider>\n        <AiComposerPrimitive.Form\n          className={cn(\n            \"lb-root lb-ai-composer lb-ai-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          disabled={disabled}\n          ref={forwardedRef}\n          onComposerSubmit={handleComposerSubmit}\n          chatId={chatId}\n          branchId={branchId}\n        >\n          <div className=\"lb-ai-composer-editor-container\">\n            <AiComposerPrimitive.Editor\n              autoFocus={autoFocus}\n              className=\"lb-ai-composer-editor\"\n              placeholder={$.AI_COMPOSER_PLACEHOLDER}\n              defaultValue={defaultValue}\n            />\n\n            <div className=\"lb-ai-composer-footer\">\n              <div className=\"lb-ai-composer-editor-actions\">\n                {/* No actions for now but it makes sense to keep the DOM structure */}\n              </div>\n\n              <div className=\"lb-ai-composer-actions\">\n                <AiComposerAction overrides={overrides} />\n              </div>\n            </div>\n          </div>\n        </AiComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":["overrides","useAiComposer","useOverrides","useCallback","jsx","ShortcutTooltip","AiComposerPrimitive.Abort","Button","StopIcon","AiComposerPrimitive.Submit","SendIcon","forwardRef","useSendAiMessage","TooltipProvider","AiComposerPrimitive.Form","cn","jsxs","AiComposerPrimitive.Editor"],"mappings":";;;;;;;;;;;;;;AAkGA,SAAS,gBAAiB,CAAA;AAAA,aACxBA,WAAA;AACF,CAEG,EAAA;AACD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,sBAAc,EAAA,CAAA;AACnC,EAAM,MAAA,CAAA,GAAIC,uBAAaF,WAAS,CAAA,CAAA;AAEhC,EAAM,MAAA,cAAA,GAAiBG,iBAAY,CAAA,CAAC,KAA0B,KAAA;AAC5D,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAAA,GACvB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,eAAA,GAAkBA,iBAAY,CAAA,CAAC,KAA0B,KAAA;AAC7D,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,GACxB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,QAAA,mBACJC,cAAA,CAAAC,uBAAA,EAAA,EAAgB,OAAS,EAAA,CAAA,CAAE,iBAC1B,EAAA,QAAA,kBAAAD,cAAA,CAACE,qBAAoB,EAApB,EAA0B,OAAA,EAAO,IAChC,EAAA,QAAA,kBAAAF,cAAA;AAAA,IAACG,aAAA;AAAA,IAAA;AAAA,MACC,aAAe,EAAA,cAAA;AAAA,MACf,OAAS,EAAA,eAAA;AAAA,MACT,SAAU,EAAA,uBAAA;AAAA,MACV,OAAQ,EAAA,WAAA;AAAA,MACR,cAAY,CAAE,CAAA,iBAAA;AAAA,MACd,IAAA,iCAAOC,aAAS,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAEpB,EAAA,CAAA,EACF,CAEA,mBAAAJ,cAAA,CAACC,2BAAgB,OAAS,EAAA,CAAA,CAAE,gBAAkB,EAAA,QAAA,EAAS,SACrD,QAAC,kBAAAD,cAAA,CAAAK,sBAAA,EAAA,EAA2B,SAAO,IACjC,EAAA,QAAA,kBAAAL,cAAA;AAAA,IAACG,aAAA;AAAA,IAAA;AAAA,MACC,aAAe,EAAA,cAAA;AAAA,MACf,OAAS,EAAA,eAAA;AAAA,MACT,SAAU,EAAA,uBAAA;AAAA,MACV,OAAQ,EAAA,SAAA;AAAA,MACR,cAAY,CAAE,CAAA,gBAAA;AAAA,MACd,IAAA,iCAAOG,aAAS,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,KAEpB,CACF,EAAA,CAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,CACE;AAAA,IACE,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,eACAX,WAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,MAAS,GAAA,IAAA;AAAA,IACT,mBAAA;AAAA,IACA,GAAG,KAAA;AAAA,KAEL,YACG,KAAA;AACH,IAAM,MAAA,CAAA,GAAIE,uBAAaF,WAAS,CAAA,CAAA;AAChC,IAAM,MAAA,aAAA,GAAgBY,yBAAiB,MAAQ,EAAA;AAAA,MAC7C,MAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAS,EAAA,eAAA;AAAA,KACV,CAAA,CAAA;AAED,IAAA,MAAM,oBAAuB,GAAAT,iBAAA;AAAA,MAC3B,CAAC,SAAkC,KAAsC,KAAA;AACvE,QAAA,gBAAA,GAAmB,SAAS,KAAK,CAAA,CAAA;AAEjC,QAAA,IAAI,MAAM,kBAAmB,EAAA;AAAG,UAAA,OAAA;AAEhC,QAAM,MAAA,UAAA,GAAa,aAAc,CAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAE7C,QAAA,mBAAA,GAAsB,UAAU,CAAA,CAAA;AAAA,OAClC;AAAA,MACA,CAAC,gBAAkB,EAAA,aAAA,EAAe,mBAAmB,CAAA;AAAA,KACvD,CAAA;AAEA,IAAA,sCACGU,uBACC,EAAA,EAAA,QAAA,kBAAAT,cAAA;AAAA,MAACU,oBAAoB;AAAA,MAApB;AAAA,QACC,SAAW,EAAAC,KAAA;AAAA,UACT,4CAAA;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QACA,KAAK,CAAE,CAAA,GAAA;AAAA,QACN,GAAG,KAAA;AAAA,QACJ,QAAA;AAAA,QACA,GAAK,EAAA,YAAA;AAAA,QACL,gBAAkB,EAAA,oBAAA;AAAA,QAClB,MAAA;AAAA,QACA,QAAA;AAAA,QAEA,QAAA,kBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCACb,EAAA,QAAA,EAAA;AAAA,0BAAAZ,cAAA;AAAA,YAACa,YAAoB;AAAA,YAApB;AAAA,cACC,SAAA;AAAA,cACA,SAAU,EAAA,uBAAA;AAAA,cACV,aAAa,CAAE,CAAA,uBAAA;AAAA,cACf,YAAA;AAAA,aAAA;AAAA,WACF;AAAA,0BAEAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,uBACb,EAAA,QAAA,EAAA;AAAA,4BAACZ,cAAA,CAAA,KAAA,EAAA,EAAI,WAAU,+BAEf,EAAA,CAAA;AAAA,2CAEC,KAAI,EAAA,EAAA,SAAA,EAAU,0BACb,QAAC,kBAAAA,cAAA,CAAA,gBAAA,EAAA,aAAiBJ,aAAsB,CAC1C,EAAA,CAAA;AAAA,WACF,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,OAAA;AAAA,KAEJ,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"AiComposer.cjs","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n  type AiChatMessage,\n  type CopilotId,\n  type MessageId,\n} from \"@liveblocks/core\";\nimport { useSendAiMessage } from \"@liveblocks/react\";\nimport {\n  type ComponentProps,\n  type FormEvent,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n  type AiComposerOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n  AiComposerEditorProps,\n  AiComposerFormProps,\n  AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps extends Omit<\n  ComponentProps<\"form\">,\n  \"defaultValue\"\n> {\n  /**\n   * The composer's initial value.\n   */\n  defaultValue?: string;\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: (\n    message: AiComposerSubmitMessage,\n    event: FormEvent<HTMLFormElement>\n  ) => void;\n\n  /**\n   * The event handler called after the composer is submitted.\n   *\n   * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n   */\n  onComposerSubmitted?: (message: AiChatMessage) => void;\n\n  /**\n   * Whether the composer is disabled.\n   */\n  disabled?: AiComposerFormProps[\"disabled\"];\n\n  /**\n   * Whether to focus the composer on mount.\n   */\n  autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n  /**\n   * The ID of the chat the composer belongs to.\n   */\n  chatId: string;\n\n  /**\n   * The ID of the copilot to use to send the message.\n   */\n  copilotId?: CopilotId;\n\n  /**\n   * The time, in milliseconds, before an AI response will timeout.\n   */\n  responseTimeout?: number;\n\n  /**\n   * @internal\n   */\n  branchId?: MessageId;\n\n  /**\n   * @internal\n   */\n  stream?: boolean;\n}\n\nfunction AiComposerAction({\n  overrides,\n}: {\n  overrides?: AiComposerProps[\"overrides\"];\n}) {\n  const { canAbort } = useAiComposer();\n  const $ = useOverrides(overrides);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return canAbort ? (\n    <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n      <AiComposerPrimitive.Abort asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"secondary\"\n          aria-label={$.AI_COMPOSER_ABORT}\n          icon={<StopIcon />}\n        />\n      </AiComposerPrimitive.Abort>\n    </ShortcutTooltip>\n  ) : (\n    <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n      <AiComposerPrimitive.Submit asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"primary\"\n          aria-label={$.AI_COMPOSER_SEND}\n          icon={<SendIcon />}\n        />\n      </AiComposerPrimitive.Submit>\n    </ShortcutTooltip>\n  );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n  (\n    {\n      defaultValue,\n      onComposerSubmit,\n      disabled,\n      autoFocus,\n      overrides,\n      className,\n      chatId,\n      branchId,\n      copilotId,\n      responseTimeout,\n      stream = true,\n      onComposerSubmitted,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const sendAiMessage = useSendAiMessage(chatId, {\n      stream,\n      copilotId,\n      timeout: responseTimeout,\n    });\n\n    const handleComposerSubmit = useCallback(\n      (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(message, event);\n\n        if (event.isDefaultPrevented()) return;\n\n        const newMessage = sendAiMessage(message.text);\n\n        onComposerSubmitted?.(newMessage);\n      },\n      [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n    );\n\n    return (\n      <TooltipProvider>\n        <AiComposerPrimitive.Form\n          className={cn(\n            \"lb-root lb-ai-composer lb-ai-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          disabled={disabled}\n          ref={forwardedRef}\n          onComposerSubmit={handleComposerSubmit}\n          chatId={chatId}\n          branchId={branchId}\n        >\n          <div className=\"lb-ai-composer-editor-container\">\n            <AiComposerPrimitive.Editor\n              autoFocus={autoFocus}\n              className=\"lb-ai-composer-editor\"\n              placeholder={$.AI_COMPOSER_PLACEHOLDER}\n              defaultValue={defaultValue}\n            />\n\n            <div className=\"lb-ai-composer-footer\">\n              <div className=\"lb-ai-composer-editor-actions\">\n                {/* No actions for now but it makes sense to keep the DOM structure */}\n              </div>\n\n              <div className=\"lb-ai-composer-actions\">\n                <AiComposerAction overrides={overrides} />\n              </div>\n            </div>\n          </div>\n        </AiComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":["overrides","useAiComposer","useOverrides","useCallback","jsx","ShortcutTooltip","AiComposerPrimitive.Abort","Button","StopIcon","AiComposerPrimitive.Submit","SendIcon","forwardRef","useSendAiMessage","TooltipProvider","AiComposerPrimitive.Form","cn","jsxs","AiComposerPrimitive.Editor"],"mappings":";;;;;;;;;;;;;;AAoGA,SAAS,gBAAiB,CAAA;AAAA,aACxBA,WAAA;AACF,CAEG,EAAA;AACD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,sBAAc,EAAA,CAAA;AACnC,EAAM,MAAA,CAAA,GAAIC,uBAAaF,WAAS,CAAA,CAAA;AAEhC,EAAM,MAAA,cAAA,GAAiBG,iBAAY,CAAA,CAAC,KAA0B,KAAA;AAC5D,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAAA,GACvB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,eAAA,GAAkBA,iBAAY,CAAA,CAAC,KAA0B,KAAA;AAC7D,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,GACxB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,QAAA,mBACJC,cAAA,CAAAC,uBAAA,EAAA,EAAgB,OAAS,EAAA,CAAA,CAAE,iBAC1B,EAAA,QAAA,kBAAAD,cAAA,CAACE,qBAAoB,EAApB,EAA0B,OAAA,EAAO,IAChC,EAAA,QAAA,kBAAAF,cAAA;AAAA,IAACG,aAAA;AAAA,IAAA;AAAA,MACC,aAAe,EAAA,cAAA;AAAA,MACf,OAAS,EAAA,eAAA;AAAA,MACT,SAAU,EAAA,uBAAA;AAAA,MACV,OAAQ,EAAA,WAAA;AAAA,MACR,cAAY,CAAE,CAAA,iBAAA;AAAA,MACd,IAAA,iCAAOC,aAAS,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAEpB,EAAA,CAAA,EACF,CAEA,mBAAAJ,cAAA,CAACC,2BAAgB,OAAS,EAAA,CAAA,CAAE,gBAAkB,EAAA,QAAA,EAAS,SACrD,QAAC,kBAAAD,cAAA,CAAAK,sBAAA,EAAA,EAA2B,SAAO,IACjC,EAAA,QAAA,kBAAAL,cAAA;AAAA,IAACG,aAAA;AAAA,IAAA;AAAA,MACC,aAAe,EAAA,cAAA;AAAA,MACf,OAAS,EAAA,eAAA;AAAA,MACT,SAAU,EAAA,uBAAA;AAAA,MACV,OAAQ,EAAA,SAAA;AAAA,MACR,cAAY,CAAE,CAAA,gBAAA;AAAA,MACd,IAAA,iCAAOG,aAAS,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,KAEpB,CACF,EAAA,CAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,CACE;AAAA,IACE,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,eACAX,WAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,MAAS,GAAA,IAAA;AAAA,IACT,mBAAA;AAAA,IACA,GAAG,KAAA;AAAA,KAEL,YACG,KAAA;AACH,IAAM,MAAA,CAAA,GAAIE,uBAAaF,WAAS,CAAA,CAAA;AAChC,IAAM,MAAA,aAAA,GAAgBY,yBAAiB,MAAQ,EAAA;AAAA,MAC7C,MAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAS,EAAA,eAAA;AAAA,KACV,CAAA,CAAA;AAED,IAAA,MAAM,oBAAuB,GAAAT,iBAAA;AAAA,MAC3B,CAAC,SAAkC,KAAsC,KAAA;AACvE,QAAA,gBAAA,GAAmB,SAAS,KAAK,CAAA,CAAA;AAEjC,QAAI,IAAA,KAAA,CAAM,oBAAsB,EAAA,OAAA;AAEhC,QAAM,MAAA,UAAA,GAAa,aAAc,CAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAE7C,QAAA,mBAAA,GAAsB,UAAU,CAAA,CAAA;AAAA,OAClC;AAAA,MACA,CAAC,gBAAkB,EAAA,aAAA,EAAe,mBAAmB,CAAA;AAAA,KACvD,CAAA;AAEA,IAAA,sCACGU,uBACC,EAAA,EAAA,QAAA,kBAAAT,cAAA;AAAA,MAACU,oBAAoB;AAAA,MAApB;AAAA,QACC,SAAW,EAAAC,KAAA;AAAA,UACT,4CAAA;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QACA,KAAK,CAAE,CAAA,GAAA;AAAA,QACN,GAAG,KAAA;AAAA,QACJ,QAAA;AAAA,QACA,GAAK,EAAA,YAAA;AAAA,QACL,gBAAkB,EAAA,oBAAA;AAAA,QAClB,MAAA;AAAA,QACA,QAAA;AAAA,QAEA,QAAA,kBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCACb,EAAA,QAAA,EAAA;AAAA,0BAAAZ,cAAA;AAAA,YAACa,YAAoB;AAAA,YAApB;AAAA,cACC,SAAA;AAAA,cACA,SAAU,EAAA,uBAAA;AAAA,cACV,aAAa,CAAE,CAAA,uBAAA;AAAA,cACf,YAAA;AAAA,aAAA;AAAA,WACF;AAAA,0BAEAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,uBACb,EAAA,QAAA,EAAA;AAAA,4BAACZ,cAAA,CAAA,KAAA,EAAA,EAAI,WAAU,+BAEf,EAAA,CAAA;AAAA,2CAEC,KAAI,EAAA,EAAA,SAAA,EAAU,0BACb,QAAC,kBAAAA,cAAA,CAAA,gBAAA,EAAA,aAAiBJ,aAAsB,CAC1C,EAAA,CAAA;AAAA,WACF,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,OAAA;AAAA,KAEJ,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/components/internal/AiComposer.js

@@ -68,8 +68,7 @@ const AiComposer = forwardRef(
     const handleComposerSubmit = useCallback(
       (message, event) => {
         onComposerSubmit?.(message, event);
-        if (event.isDefaultPrevented())
-          return;
+        if (event.isDefaultPrevented()) return;
         const newMessage = sendAiMessage(message.text);
         onComposerSubmitted?.(newMessage);
       },