@liveblocks/react-ui 2.25.0-aiprivatebeta14 → 2.25.0-aiprivatebeta16

package/dist/primitives/AiMessage/tool-invocation.js

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import { kInternal } from '@liveblocks/core';
+import { useClient } from '@liveblocks/react';
+import { useSignal } from '@liveblocks/react/_private';
+import { useCallback, useMemo } from 'react';
+import { AiToolInvocationContext } from './contexts.js';
+
+function StableRenderFn(props) {
+  return props.renderFn(props.props);
+}
+function AiMessageToolInvocation({
+  message,
+  part
+}) {
+  const client = useClient();
+  const ai = client[kInternal].ai;
+  const tool = useSignal(ai.signals.getTool\u03A3(part.name, message.chatId));
+  const respond = useCallback(
+    (result) => {
+      if (part.stage === "receiving") {
+        console.log(
+          `Ignoring respond(): tool '${part.name}' (${part.invocationId}) is still receiving`
+        );
+      } else if (part.stage === "executed") {
+        console.log(
+          `Ignoring respond(): tool '${part.name}' (${part.invocationId}) has already executed`
+        );
+      } else {
+        ai.setToolResult(
+          message.chatId,
+          message.id,
+          part.invocationId,
+          result.data
+        );
+      }
+    },
+    [ai, message.chatId, message.id, part.stage, part.name, part.invocationId]
+  );
+  const props = useMemo(() => {
+    const { type: _, ...rest } = part;
+    return {
+      ...rest,
+      respond,
+      types: void 0,
+      [kInternal]: {
+        execute: tool?.execute
+      }
+    };
+  }, [part, respond, tool?.execute]);
+  if (tool?.render === void 0)
+    return null;
+  return /* @__PURE__ */ jsx(AiToolInvocationContext.Provider, {
+    value: props,
+    children: /* @__PURE__ */ jsx(StableRenderFn, {
+      renderFn: tool.render,
+      props
+    })
+  });
+}
+
+export { AiMessageToolInvocation };
+//# sourceMappingURL=tool-invocation.js.map

package/dist/primitives/AiMessage/tool-invocation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-invocation.js","sources":["../../../src/primitives/AiMessage/tool-invocation.tsx"],"sourcesContent":["import {\n  type AiChatMessage,\n  type AiToolInvocationPart,\n  type AiToolInvocationProps,\n  type JsonObject,\n  kInternal,\n  type ToolResultData,\n  type ToolResultResponse,\n} from \"@liveblocks/core\";\nimport { useClient } from \"@liveblocks/react\";\nimport { useSignal } from \"@liveblocks/react/_private\";\nimport { type FunctionComponent, useCallback, useMemo } from \"react\";\n\nimport { AiToolInvocationContext } from \"./contexts\";\n\ntype OpaqueAiToolInvocationProps = AiToolInvocationProps<\n  JsonObject,\n  ToolResultData\n>;\n\nfunction StableRenderFn(props: {\n  renderFn: FunctionComponent<OpaqueAiToolInvocationProps>;\n  props: OpaqueAiToolInvocationProps;\n}) {\n  return props.renderFn(props.props);\n}\n\n/**\n * @internal\n *\n * This could become publicly exposed as <AiMessage.ToolInvocation /> in the future,\n * but because namespace exports can't be marked `@internal`, we're keeping it in its\n * own file for now.\n */\nexport function AiMessageToolInvocation({\n  message,\n  part,\n}: {\n  message: AiChatMessage;\n  part: AiToolInvocationPart;\n}) {\n  const client = useClient();\n  const ai = client[kInternal].ai;\n  const tool = useSignal(ai.signals.getToolΣ(part.name, message.chatId));\n\n  const respond = useCallback(\n    (result: ToolResultResponse) => {\n      if (part.stage === \"receiving\") {\n        console.log(\n          `Ignoring respond(): tool '${part.name}' (${part.invocationId}) is still receiving`\n        );\n      } else if (part.stage === \"executed\") {\n        console.log(\n          `Ignoring respond(): tool '${part.name}' (${part.invocationId}) has already executed`\n        );\n      } else {\n        ai.setToolResult(\n          message.chatId,\n          message.id,\n          part.invocationId,\n          result.data\n          // TODO Pass in AiGenerationOptions here?\n        );\n      }\n    },\n    [ai, message.chatId, message.id, part.stage, part.name, part.invocationId]\n  );\n\n  const props = useMemo(() => {\n    const { type: _, ...rest } = part;\n    return {\n      ...rest,\n      respond,\n      types: undefined as never,\n      [kInternal]: {\n        execute: tool?.execute,\n      },\n    };\n  }, [part, respond, tool?.execute]);\n\n  if (tool?.render === undefined) return null;\n  return (\n    <AiToolInvocationContext.Provider value={props}>\n      <StableRenderFn\n        renderFn={tool.render as FunctionComponent<OpaqueAiToolInvocationProps>}\n        props={props}\n      />\n    </AiToolInvocationContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAoBA,SAAS,eAAe,KAGrB,EAAA;AACD,EAAO,OAAA,KAAA,CAAM,QAAS,CAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACnC,CAAA;AASO,SAAS,uBAAwB,CAAA;AAAA,EACtC,OAAA;AAAA,EACA,IAAA;AACF,CAGG,EAAA;AACD,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,EAAA,GAAK,OAAO,SAAW,CAAA,CAAA,EAAA,CAAA;AAC7B,EAAM,MAAA,IAAA,GAAO,UAAU,EAAG,CAAA,OAAA,CAAQ,cAAS,IAAK,CAAA,IAAA,EAAM,OAAQ,CAAA,MAAM,CAAC,CAAA,CAAA;AAErE,EAAA,MAAM,OAAU,GAAA,WAAA;AAAA,IACd,CAAC,MAA+B,KAAA;AAC9B,MAAI,IAAA,IAAA,CAAK,UAAU,WAAa,EAAA;AAC9B,QAAQ,OAAA,CAAA,GAAA;AAAA,UACN,CAAA,0BAAA,EAA6B,IAAK,CAAA,IAAA,CAAA,GAAA,EAAU,IAAK,CAAA,YAAA,CAAA,oBAAA,CAAA;AAAA,SACnD,CAAA;AAAA,OACF,MAAA,IAAW,IAAK,CAAA,KAAA,KAAU,UAAY,EAAA;AACpC,QAAQ,OAAA,CAAA,GAAA;AAAA,UACN,CAAA,0BAAA,EAA6B,IAAK,CAAA,IAAA,CAAA,GAAA,EAAU,IAAK,CAAA,YAAA,CAAA,sBAAA,CAAA;AAAA,SACnD,CAAA;AAAA,OACK,MAAA;AACL,QAAG,EAAA,CAAA,aAAA;AAAA,UACD,OAAQ,CAAA,MAAA;AAAA,UACR,OAAQ,CAAA,EAAA;AAAA,UACR,IAAK,CAAA,YAAA;AAAA,UACL,MAAO,CAAA,IAAA;AAAA,SAET,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,EAAI,EAAA,OAAA,CAAQ,MAAQ,EAAA,OAAA,CAAQ,EAAI,EAAA,IAAA,CAAK,KAAO,EAAA,IAAA,CAAK,IAAM,EAAA,IAAA,CAAK,YAAY,CAAA;AAAA,GAC3E,CAAA;AAEA,EAAM,MAAA,KAAA,GAAQ,QAAQ,MAAM;AAC1B,IAAA,MAAM,EAAE,IAAA,EAAM,CAAM,EAAA,GAAA,IAAA,EAAS,GAAA,IAAA,CAAA;AAC7B,IAAO,OAAA;AAAA,MACL,GAAG,IAAA;AAAA,MACH,OAAA;AAAA,MACA,KAAO,EAAA,KAAA,CAAA;AAAA,MACP,CAAC,SAAY,GAAA;AAAA,QACX,SAAS,IAAM,EAAA,OAAA;AAAA,OACjB;AAAA,KACF,CAAA;AAAA,KACC,CAAC,IAAA,EAAM,OAAS,EAAA,IAAA,EAAM,OAAO,CAAC,CAAA,CAAA;AAEjC,EAAA,IAAI,MAAM,MAAW,KAAA,KAAA,CAAA;AAAW,IAAO,OAAA,IAAA,CAAA;AACvC,EACE,uBAAA,GAAA,CAAC,wBAAwB,QAAxB,EAAA;AAAA,IAAiC,KAAO,EAAA,KAAA;AAAA,IACvC,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA;AAAA,MACC,UAAU,IAAK,CAAA,MAAA;AAAA,MACf,KAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/primitives/Comment/index.cjs

@@ -32,11 +32,11 @@ const CommentLink = react.forwardRef(
   }
 );
 const defaultBodyComponents = {
-  Mention: ({ userId }) => {
+  Mention: ({ mention }) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(CommentMention, {
       children: [
         constants.MENTION_CHARACTER,
-        userId
+        mention.id
       ]
     });
   },
@@ -68,8 +68,9 @@ const CommentBody = react.forwardRef(
               style: { minHeight: "1lh" },
               children: block.children.map((inline, index2) => {
                 if (utils.isCommentBodyMention(inline)) {
-                  return inline.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, {
-                    userId: inline.id
+                  const { type: _, ...mention } = inline;
+                  return mention.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, {
+                    mention
                   }, index2) : null;
                 }
                 if (utils.isCommentBodyLink(inline)) {

package/dist/primitives/Comment/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/primitives/Comment/index.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { MENTION_CHARACTER } from \"../../constants\";\nimport type {\n  CommentBodyComponents,\n  CommentBodyProps,\n  CommentLinkProps,\n  CommentMentionProps,\n} from \"./types\";\nimport {\n  isCommentBodyLink,\n  isCommentBodyMention,\n  toAbsoluteUrl,\n} from \"./utils\";\n\nconst COMMENT_MENTION_NAME = \"CommentMention\";\nconst COMMENT_BODY_NAME = \"CommentBody\";\nconst COMMENT_LINK_NAME = \"CommentLink\";\n\n/**\n * Displays mentions within `Comment.Body`.\n *\n * @example\n * <Comment.Mention>@{userId}</Comment.Mention>\n */\nconst CommentMention = forwardRef<HTMLSpanElement, CommentMentionProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"span\";\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * Displays links within `Comment.Body`.\n *\n * @example\n * <Comment.Link href={href}>{children}</Comment.Link>\n */\nconst CommentLink = forwardRef<HTMLAnchorElement, CommentLinkProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"a\";\n\n    return (\n      <Component\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow\"\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nconst defaultBodyComponents: CommentBodyComponents = {\n  Mention: ({ userId }) => {\n    return (\n      <CommentMention>\n        {MENTION_CHARACTER}\n        {userId}\n      </CommentMention>\n    );\n  },\n  Link: ({ href, children }) => {\n    return <CommentLink href={href}>{children}</CommentLink>;\n  },\n};\n\n/**\n * Displays a comment body.\n *\n * @example\n * <Comment.Body body={comment.body} />\n */\nconst CommentBody = forwardRef<HTMLDivElement, CommentBodyProps>(\n  ({ body, components, style, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n    const { Mention, Link } = useMemo(\n      () => ({ ...defaultBodyComponents, ...components }),\n      [components]\n    );\n\n    if (!body || !body?.content) {\n      return null;\n    }\n\n    return (\n      <Component\n        {...props}\n        style={{ whiteSpace: \"break-spaces\", ...style }}\n        ref={forwardedRef}\n      >\n        {body.content.map((block, index) => {\n          switch (block.type) {\n            case \"paragraph\":\n              return (\n                <p key={index} style={{ minHeight: \"1lh\" }}>\n                  {block.children.map((inline, index) => {\n                    if (isCommentBodyMention(inline)) {\n                      return inline.id ? (\n                        <Mention userId={inline.id} key={index} />\n                      ) : null;\n                    }\n\n                    if (isCommentBodyLink(inline)) {\n                      const href = toAbsoluteUrl(inline.url) ?? inline.url;\n\n                      return (\n                        <Link href={href} key={index}>\n                          {inline.text ?? inline.url}\n                        </Link>\n                      );\n                    }\n\n                    // <code><s><em><strong>text</strong></s></em></code>\n                    let children: ReactNode = inline.text;\n\n                    if (inline.bold) {\n                      children = <strong key={index}>{children}</strong>;\n                    }\n\n                    if (inline.italic) {\n                      children = <em key={index}>{children}</em>;\n                    }\n\n                    if (inline.strikethrough) {\n                      children = <s key={index}>{children}</s>;\n                    }\n\n                    if (inline.code) {\n                      children = <code key={index}>{children}</code>;\n                    }\n\n                    return <span key={index}>{children}</span>;\n                  })}\n                </p>\n              );\n            default:\n              return null;\n          }\n        })}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  CommentBody.displayName = COMMENT_BODY_NAME;\n  CommentMention.displayName = COMMENT_MENTION_NAME;\n  CommentLink.displayName = COMMENT_LINK_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Comment.*\nexport { CommentBody as Body, CommentLink as Link, CommentMention as Mention };\n"],"names":["forwardRef","Slot","jsx","jsxs","MENTION_CHARACTER","useMemo","index","isCommentBodyMention","isCommentBodyLink","toAbsoluteUrl"],"mappings":";;;;;;;;AAiBA,MAAM,oBAAuB,GAAA,gBAAA,CAAA;AAC7B,MAAM,iBAAoB,GAAA,aAAA,CAAA;AAC1B,MAAM,iBAAoB,GAAA,aAAA,CAAA;AAQ1B,MAAM,cAAiB,GAAAA,gBAAA;AAAA,EACrB,CAAC,EAAE,QAAA,EAAU,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACjD,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,MAAA,CAAA;AAEnC,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MAAW,GAAG,KAAA;AAAA,MAAO,GAAK,EAAA,YAAA;AAAA,MACxB,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAQA,MAAM,WAAc,GAAAF,gBAAA;AAAA,EAClB,CAAC,EAAE,QAAA,EAAU,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACjD,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,GAAA,CAAA;AAEnC,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,GAAI,EAAA,8BAAA;AAAA,MACH,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,MAAM,qBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AACvB,IAAA,uBACGC,eAAA,CAAA,cAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,QAAAC,2BAAA;AAAA,QACA,MAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,IAAM,EAAA,CAAC,EAAE,IAAA,EAAM,UAAe,KAAA;AAC5B,IAAA,uBAAQF,cAAA,CAAA,WAAA,EAAA;AAAA,MAAY,IAAA;AAAA,MAAa,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GAC5C;AACF,CAAA,CAAA;AAQA,MAAM,WAAc,GAAAF,gBAAA;AAAA,EAClB,CAAC,EAAE,IAAM,EAAA,UAAA,EAAY,OAAO,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AAChE,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,KAAA,CAAA;AACnC,IAAM,MAAA,EAAE,OAAS,EAAA,IAAA,EAAS,GAAAI,aAAA;AAAA,MACxB,OAAO,EAAE,GAAG,qBAAA,EAAuB,GAAG,UAAW,EAAA,CAAA;AAAA,MACjD,CAAC,UAAU,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,IAAA,EAAM,OAAS,EAAA;AAC3B,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACGH,cAAA,CAAA,SAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,KAAO,EAAA,EAAE,UAAY,EAAA,cAAA,EAAgB,GAAG,KAAM,EAAA;AAAA,MAC9C,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAK,EAAA,IAAA,CAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AAClC,QAAA,QAAQ,MAAM,IAAM;AAAA,UAClB,KAAK,WAAA;AACH,YAAA,uBACGA,cAAA,CAAA,GAAA,EAAA;AAAA,cAAc,KAAA,EAAO,EAAE,SAAA,EAAW,KAAM,EAAA;AAAA,cACtC,QAAM,EAAA,KAAA,CAAA,QAAA,CAAS,GAAI,CAAA,CAAC,QAAQI,MAAU,KAAA;AACrC,gBAAI,IAAAC,0BAAA,CAAqB,MAAM,CAAG,EAAA;AAChC,kBAAO,OAAA,MAAA,CAAO,qBACXL,cAAA,CAAA,OAAA,EAAA;AAAA,oBAAQ,QAAQ,MAAO,CAAA,EAAA;AAAA,mBAAA,EAASI,MAAO,CACtC,GAAA,IAAA,CAAA;AAAA,iBACN;AAEA,gBAAI,IAAAE,uBAAA,CAAkB,MAAM,CAAG,EAAA;AAC7B,kBAAA,MAAM,IAAO,GAAAC,mBAAA,CAAc,MAAO,CAAA,GAAG,KAAK,MAAO,CAAA,GAAA,CAAA;AAEjD,kBAAA,uBACGP,cAAA,CAAA,IAAA,EAAA;AAAA,oBAAK,IAAA;AAAA,oBACH,QAAA,EAAA,MAAA,CAAO,QAAQ,MAAO,CAAA,GAAA;AAAA,mBAAA,EADFI,MAEvB,CAAA,CAAA;AAAA,iBAEJ;AAGA,gBAAA,IAAI,WAAsB,MAAO,CAAA,IAAA,CAAA;AAEjC,gBAAA,IAAI,OAAO,IAAM,EAAA;AACf,kBAAA,QAAA,mBAAYJ,cAAA,CAAA,QAAA,EAAA;AAAA,oBAAoB,QAAA;AAAA,mBAAA,EAARI,MAAiB,CAAA,CAAA;AAAA,iBAC3C;AAEA,gBAAA,IAAI,OAAO,MAAQ,EAAA;AACjB,kBAAA,QAAA,mBAAYJ,cAAA,CAAA,IAAA,EAAA;AAAA,oBAAgB,QAAA;AAAA,mBAAA,EAARI,MAAiB,CAAA,CAAA;AAAA,iBACvC;AAEA,gBAAA,IAAI,OAAO,aAAe,EAAA;AACxB,kBAAA,QAAA,mBAAYJ,cAAA,CAAA,GAAA,EAAA;AAAA,oBAAe,QAAA;AAAA,mBAAA,EAARI,MAAiB,CAAA,CAAA;AAAA,iBACtC;AAEA,gBAAA,IAAI,OAAO,IAAM,EAAA;AACf,kBAAA,QAAA,mBAAYJ,cAAA,CAAA,MAAA,EAAA;AAAA,oBAAkB,QAAA;AAAA,mBAAA,EAARI,MAAiB,CAAA,CAAA;AAAA,iBACzC;AAEA,gBAAA,uBAAQJ,cAAA,CAAA,MAAA,EAAA;AAAA,kBAAkB,QAAA;AAAA,iBAAA,EAARI,MAAiB,CAAA,CAAA;AAAA,eACpC,CAAA;AAAA,aAAA,EAtCK,KAuCR,CAAA,CAAA;AAAA,UAEJ;AACE,YAAO,OAAA,IAAA,CAAA;AAAA,SACX;AAAA,OACD,CAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,WAAA,CAAY,WAAc,GAAA,iBAAA,CAAA;AAC1B,EAAA,cAAA,CAAe,WAAc,GAAA,oBAAA,CAAA;AAC7B,EAAA,WAAA,CAAY,WAAc,GAAA,iBAAA,CAAA;AAC5B;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/primitives/Comment/index.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { MENTION_CHARACTER } from \"../../constants\";\nimport type {\n  CommentBodyComponents,\n  CommentBodyProps,\n  CommentLinkProps,\n  CommentMentionProps,\n} from \"./types\";\nimport {\n  isCommentBodyLink,\n  isCommentBodyMention,\n  toAbsoluteUrl,\n} from \"./utils\";\n\nconst COMMENT_MENTION_NAME = \"CommentMention\";\nconst COMMENT_BODY_NAME = \"CommentBody\";\nconst COMMENT_LINK_NAME = \"CommentLink\";\n\n/**\n * Displays mentions within `Comment.Body`.\n *\n * @example\n * <Comment.Mention>@{mention.id}</Comment.Mention>\n */\nconst CommentMention = forwardRef<HTMLSpanElement, CommentMentionProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"span\";\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * Displays links within `Comment.Body`.\n *\n * @example\n * <Comment.Link href={href}>{children}</Comment.Link>\n */\nconst CommentLink = forwardRef<HTMLAnchorElement, CommentLinkProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"a\";\n\n    return (\n      <Component\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow\"\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nconst defaultBodyComponents: CommentBodyComponents = {\n  Mention: ({ mention }) => {\n    return (\n      <CommentMention>\n        {MENTION_CHARACTER}\n        {mention.id}\n      </CommentMention>\n    );\n  },\n  Link: ({ href, children }) => {\n    return <CommentLink href={href}>{children}</CommentLink>;\n  },\n};\n\n/**\n * Displays a comment body.\n *\n * @example\n * <Comment.Body body={comment.body} />\n */\nconst CommentBody = forwardRef<HTMLDivElement, CommentBodyProps>(\n  ({ body, components, style, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n    const { Mention, Link } = useMemo(\n      () => ({ ...defaultBodyComponents, ...components }),\n      [components]\n    );\n\n    if (!body || !body?.content) {\n      return null;\n    }\n\n    return (\n      <Component\n        {...props}\n        style={{ whiteSpace: \"break-spaces\", ...style }}\n        ref={forwardedRef}\n      >\n        {body.content.map((block, index) => {\n          switch (block.type) {\n            case \"paragraph\":\n              return (\n                <p key={index} style={{ minHeight: \"1lh\" }}>\n                  {block.children.map((inline, index) => {\n                    if (isCommentBodyMention(inline)) {\n                      const { type: _, ...mention } = inline;\n\n                      return mention.id ? (\n                        <Mention mention={mention} key={index} />\n                      ) : null;\n                    }\n\n                    if (isCommentBodyLink(inline)) {\n                      const href = toAbsoluteUrl(inline.url) ?? inline.url;\n\n                      return (\n                        <Link href={href} key={index}>\n                          {inline.text ?? inline.url}\n                        </Link>\n                      );\n                    }\n\n                    // <code><s><em><strong>text</strong></s></em></code>\n                    let children: ReactNode = inline.text;\n\n                    if (inline.bold) {\n                      children = <strong key={index}>{children}</strong>;\n                    }\n\n                    if (inline.italic) {\n                      children = <em key={index}>{children}</em>;\n                    }\n\n                    if (inline.strikethrough) {\n                      children = <s key={index}>{children}</s>;\n                    }\n\n                    if (inline.code) {\n                      children = <code key={index}>{children}</code>;\n                    }\n\n                    return <span key={index}>{children}</span>;\n                  })}\n                </p>\n              );\n            default:\n              return null;\n          }\n        })}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  CommentBody.displayName = COMMENT_BODY_NAME;\n  CommentMention.displayName = COMMENT_MENTION_NAME;\n  CommentLink.displayName = COMMENT_LINK_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Comment.*\nexport { CommentBody as Body, CommentLink as Link, CommentMention as Mention };\n"],"names":["forwardRef","Slot","jsx","jsxs","MENTION_CHARACTER","useMemo","index","isCommentBodyMention","isCommentBodyLink","toAbsoluteUrl"],"mappings":";;;;;;;;AAiBA,MAAM,oBAAuB,GAAA,gBAAA,CAAA;AAC7B,MAAM,iBAAoB,GAAA,aAAA,CAAA;AAC1B,MAAM,iBAAoB,GAAA,aAAA,CAAA;AAQ1B,MAAM,cAAiB,GAAAA,gBAAA;AAAA,EACrB,CAAC,EAAE,QAAA,EAAU,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACjD,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,MAAA,CAAA;AAEnC,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MAAW,GAAG,KAAA;AAAA,MAAO,GAAK,EAAA,YAAA;AAAA,MACxB,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAQA,MAAM,WAAc,GAAAF,gBAAA;AAAA,EAClB,CAAC,EAAE,QAAA,EAAU,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACjD,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,GAAA,CAAA;AAEnC,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,GAAI,EAAA,8BAAA;AAAA,MACH,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,MAAM,qBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,CAAC,EAAE,OAAA,EAAc,KAAA;AACxB,IAAA,uBACGC,eAAA,CAAA,cAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,QAAAC,2BAAA;AAAA,QACA,OAAQ,CAAA,EAAA;AAAA,OAAA;AAAA,KACX,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,IAAM,EAAA,CAAC,EAAE,IAAA,EAAM,UAAe,KAAA;AAC5B,IAAA,uBAAQF,cAAA,CAAA,WAAA,EAAA;AAAA,MAAY,IAAA;AAAA,MAAa,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GAC5C;AACF,CAAA,CAAA;AAQA,MAAM,WAAc,GAAAF,gBAAA;AAAA,EAClB,CAAC,EAAE,IAAM,EAAA,UAAA,EAAY,OAAO,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AAChE,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,KAAA,CAAA;AACnC,IAAM,MAAA,EAAE,OAAS,EAAA,IAAA,EAAS,GAAAI,aAAA;AAAA,MACxB,OAAO,EAAE,GAAG,qBAAA,EAAuB,GAAG,UAAW,EAAA,CAAA;AAAA,MACjD,CAAC,UAAU,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,IAAA,EAAM,OAAS,EAAA;AAC3B,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACGH,cAAA,CAAA,SAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,KAAO,EAAA,EAAE,UAAY,EAAA,cAAA,EAAgB,GAAG,KAAM,EAAA;AAAA,MAC9C,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAK,EAAA,IAAA,CAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AAClC,QAAA,QAAQ,MAAM,IAAM;AAAA,UAClB,KAAK,WAAA;AACH,YAAA,uBACGA,cAAA,CAAA,GAAA,EAAA;AAAA,cAAc,KAAA,EAAO,EAAE,SAAA,EAAW,KAAM,EAAA;AAAA,cACtC,QAAM,EAAA,KAAA,CAAA,QAAA,CAAS,GAAI,CAAA,CAAC,QAAQI,MAAU,KAAA;AACrC,gBAAI,IAAAC,0BAAA,CAAqB,MAAM,CAAG,EAAA;AAChC,kBAAA,MAAM,EAAE,IAAA,EAAM,CAAM,EAAA,GAAA,OAAA,EAAY,GAAA,MAAA,CAAA;AAEhC,kBAAO,OAAA,OAAA,CAAQ,qBACZL,cAAA,CAAA,OAAA,EAAA;AAAA,oBAAQ,OAAA;AAAA,mBAAA,EAAuBI,MAAO,CACrC,GAAA,IAAA,CAAA;AAAA,iBACN;AAEA,gBAAI,IAAAE,uBAAA,CAAkB,MAAM,CAAG,EAAA;AAC7B,kBAAA,MAAM,IAAO,GAAAC,mBAAA,CAAc,MAAO,CAAA,GAAG,KAAK,MAAO,CAAA,GAAA,CAAA;AAEjD,kBAAA,uBACGP,cAAA,CAAA,IAAA,EAAA;AAAA,oBAAK,IAAA;AAAA,oBACH,QAAA,EAAA,MAAA,CAAO,QAAQ,MAAO,CAAA,GAAA;AAAA,mBAAA,EADFI,MAEvB,CAAA,CAAA;AAAA,iBAEJ;AAGA,gBAAA,IAAI,WAAsB,MAAO,CAAA,IAAA,CAAA;AAEjC,gBAAA,IAAI,OAAO,IAAM,EAAA;AACf,kBAAA,QAAA,mBAAYJ,cAAA,CAAA,QAAA,EAAA;AAAA,oBAAoB,QAAA;AAAA,mBAAA,EAARI,MAAiB,CAAA,CAAA;AAAA,iBAC3C;AAEA,gBAAA,IAAI,OAAO,MAAQ,EAAA;AACjB,kBAAA,QAAA,mBAAYJ,cAAA,CAAA,IAAA,EAAA;AAAA,oBAAgB,QAAA;AAAA,mBAAA,EAARI,MAAiB,CAAA,CAAA;AAAA,iBACvC;AAEA,gBAAA,IAAI,OAAO,aAAe,EAAA;AACxB,kBAAA,QAAA,mBAAYJ,cAAA,CAAA,GAAA,EAAA;AAAA,oBAAe,QAAA;AAAA,mBAAA,EAARI,MAAiB,CAAA,CAAA;AAAA,iBACtC;AAEA,gBAAA,IAAI,OAAO,IAAM,EAAA;AACf,kBAAA,QAAA,mBAAYJ,cAAA,CAAA,MAAA,EAAA;AAAA,oBAAkB,QAAA;AAAA,mBAAA,EAARI,MAAiB,CAAA,CAAA;AAAA,iBACzC;AAEA,gBAAA,uBAAQJ,cAAA,CAAA,MAAA,EAAA;AAAA,kBAAkB,QAAA;AAAA,iBAAA,EAARI,MAAiB,CAAA,CAAA;AAAA,eACpC,CAAA;AAAA,aAAA,EAxCK,KAyCR,CAAA,CAAA;AAAA,UAEJ;AACE,YAAO,OAAA,IAAA,CAAA;AAAA,SACX;AAAA,OACD,CAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,WAAA,CAAY,WAAc,GAAA,iBAAA,CAAA;AAC1B,EAAA,cAAA,CAAe,WAAc,GAAA,oBAAA,CAAA;AAC7B,EAAA,WAAA,CAAY,WAAc,GAAA,iBAAA,CAAA;AAC5B;;;;;;"}

package/dist/primitives/Comment/index.js

@@ -30,11 +30,11 @@ const CommentLink = forwardRef(
   }
 );
 const defaultBodyComponents = {
-  Mention: ({ userId }) => {
+  Mention: ({ mention }) => {
     return /* @__PURE__ */ jsxs(CommentMention, {
       children: [
         MENTION_CHARACTER,
-        userId
+        mention.id
       ]
     });
   },
@@ -66,8 +66,9 @@ const CommentBody = forwardRef(
               style: { minHeight: "1lh" },
               children: block.children.map((inline, index2) => {
                 if (isCommentBodyMention(inline)) {
-                  return inline.id ? /* @__PURE__ */ jsx(Mention, {
-                    userId: inline.id
+                  const { type: _, ...mention } = inline;
+                  return mention.id ? /* @__PURE__ */ jsx(Mention, {
+                    mention
                   }, index2) : null;
                 }
                 if (isCommentBodyLink(inline)) {

package/dist/primitives/Comment/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/primitives/Comment/index.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { MENTION_CHARACTER } from \"../../constants\";\nimport type {\n  CommentBodyComponents,\n  CommentBodyProps,\n  CommentLinkProps,\n  CommentMentionProps,\n} from \"./types\";\nimport {\n  isCommentBodyLink,\n  isCommentBodyMention,\n  toAbsoluteUrl,\n} from \"./utils\";\n\nconst COMMENT_MENTION_NAME = \"CommentMention\";\nconst COMMENT_BODY_NAME = \"CommentBody\";\nconst COMMENT_LINK_NAME = \"CommentLink\";\n\n/**\n * Displays mentions within `Comment.Body`.\n *\n * @example\n * <Comment.Mention>@{userId}</Comment.Mention>\n */\nconst CommentMention = forwardRef<HTMLSpanElement, CommentMentionProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"span\";\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * Displays links within `Comment.Body`.\n *\n * @example\n * <Comment.Link href={href}>{children}</Comment.Link>\n */\nconst CommentLink = forwardRef<HTMLAnchorElement, CommentLinkProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"a\";\n\n    return (\n      <Component\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow\"\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nconst defaultBodyComponents: CommentBodyComponents = {\n  Mention: ({ userId }) => {\n    return (\n      <CommentMention>\n        {MENTION_CHARACTER}\n        {userId}\n      </CommentMention>\n    );\n  },\n  Link: ({ href, children }) => {\n    return <CommentLink href={href}>{children}</CommentLink>;\n  },\n};\n\n/**\n * Displays a comment body.\n *\n * @example\n * <Comment.Body body={comment.body} />\n */\nconst CommentBody = forwardRef<HTMLDivElement, CommentBodyProps>(\n  ({ body, components, style, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n    const { Mention, Link } = useMemo(\n      () => ({ ...defaultBodyComponents, ...components }),\n      [components]\n    );\n\n    if (!body || !body?.content) {\n      return null;\n    }\n\n    return (\n      <Component\n        {...props}\n        style={{ whiteSpace: \"break-spaces\", ...style }}\n        ref={forwardedRef}\n      >\n        {body.content.map((block, index) => {\n          switch (block.type) {\n            case \"paragraph\":\n              return (\n                <p key={index} style={{ minHeight: \"1lh\" }}>\n                  {block.children.map((inline, index) => {\n                    if (isCommentBodyMention(inline)) {\n                      return inline.id ? (\n                        <Mention userId={inline.id} key={index} />\n                      ) : null;\n                    }\n\n                    if (isCommentBodyLink(inline)) {\n                      const href = toAbsoluteUrl(inline.url) ?? inline.url;\n\n                      return (\n                        <Link href={href} key={index}>\n                          {inline.text ?? inline.url}\n                        </Link>\n                      );\n                    }\n\n                    // <code><s><em><strong>text</strong></s></em></code>\n                    let children: ReactNode = inline.text;\n\n                    if (inline.bold) {\n                      children = <strong key={index}>{children}</strong>;\n                    }\n\n                    if (inline.italic) {\n                      children = <em key={index}>{children}</em>;\n                    }\n\n                    if (inline.strikethrough) {\n                      children = <s key={index}>{children}</s>;\n                    }\n\n                    if (inline.code) {\n                      children = <code key={index}>{children}</code>;\n                    }\n\n                    return <span key={index}>{children}</span>;\n                  })}\n                </p>\n              );\n            default:\n              return null;\n          }\n        })}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  CommentBody.displayName = COMMENT_BODY_NAME;\n  CommentMention.displayName = COMMENT_MENTION_NAME;\n  CommentLink.displayName = COMMENT_LINK_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Comment.*\nexport { CommentBody as Body, CommentLink as Link, CommentMention as Mention };\n"],"names":["index"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/primitives/Comment/index.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { MENTION_CHARACTER } from \"../../constants\";\nimport type {\n  CommentBodyComponents,\n  CommentBodyProps,\n  CommentLinkProps,\n  CommentMentionProps,\n} from \"./types\";\nimport {\n  isCommentBodyLink,\n  isCommentBodyMention,\n  toAbsoluteUrl,\n} from \"./utils\";\n\nconst COMMENT_MENTION_NAME = \"CommentMention\";\nconst COMMENT_BODY_NAME = \"CommentBody\";\nconst COMMENT_LINK_NAME = \"CommentLink\";\n\n/**\n * Displays mentions within `Comment.Body`.\n *\n * @example\n * <Comment.Mention>@{mention.id}</Comment.Mention>\n */\nconst CommentMention = forwardRef<HTMLSpanElement, CommentMentionProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"span\";\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * Displays links within `Comment.Body`.\n *\n * @example\n * <Comment.Link href={href}>{children}</Comment.Link>\n */\nconst CommentLink = forwardRef<HTMLAnchorElement, CommentLinkProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"a\";\n\n    return (\n      <Component\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow\"\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nconst defaultBodyComponents: CommentBodyComponents = {\n  Mention: ({ mention }) => {\n    return (\n      <CommentMention>\n        {MENTION_CHARACTER}\n        {mention.id}\n      </CommentMention>\n    );\n  },\n  Link: ({ href, children }) => {\n    return <CommentLink href={href}>{children}</CommentLink>;\n  },\n};\n\n/**\n * Displays a comment body.\n *\n * @example\n * <Comment.Body body={comment.body} />\n */\nconst CommentBody = forwardRef<HTMLDivElement, CommentBodyProps>(\n  ({ body, components, style, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n    const { Mention, Link } = useMemo(\n      () => ({ ...defaultBodyComponents, ...components }),\n      [components]\n    );\n\n    if (!body || !body?.content) {\n      return null;\n    }\n\n    return (\n      <Component\n        {...props}\n        style={{ whiteSpace: \"break-spaces\", ...style }}\n        ref={forwardedRef}\n      >\n        {body.content.map((block, index) => {\n          switch (block.type) {\n            case \"paragraph\":\n              return (\n                <p key={index} style={{ minHeight: \"1lh\" }}>\n                  {block.children.map((inline, index) => {\n                    if (isCommentBodyMention(inline)) {\n                      const { type: _, ...mention } = inline;\n\n                      return mention.id ? (\n                        <Mention mention={mention} key={index} />\n                      ) : null;\n                    }\n\n                    if (isCommentBodyLink(inline)) {\n                      const href = toAbsoluteUrl(inline.url) ?? inline.url;\n\n                      return (\n                        <Link href={href} key={index}>\n                          {inline.text ?? inline.url}\n                        </Link>\n                      );\n                    }\n\n                    // <code><s><em><strong>text</strong></s></em></code>\n                    let children: ReactNode = inline.text;\n\n                    if (inline.bold) {\n                      children = <strong key={index}>{children}</strong>;\n                    }\n\n                    if (inline.italic) {\n                      children = <em key={index}>{children}</em>;\n                    }\n\n                    if (inline.strikethrough) {\n                      children = <s key={index}>{children}</s>;\n                    }\n\n                    if (inline.code) {\n                      children = <code key={index}>{children}</code>;\n                    }\n\n                    return <span key={index}>{children}</span>;\n                  })}\n                </p>\n              );\n            default:\n              return null;\n          }\n        })}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  CommentBody.displayName = COMMENT_BODY_NAME;\n  CommentMention.displayName = COMMENT_MENTION_NAME;\n  CommentLink.displayName = COMMENT_LINK_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Comment.*\nexport { CommentBody as Body, CommentLink as Link, CommentMention as Mention };\n"],"names":["index"],"mappings":"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"}

package/dist/primitives/Composer/index.cjs

@@ -101,11 +101,12 @@ function ComposerEditorMentionWrapper({
   element
 }) {
   const isSelected = slateReact.useSelected();
+  const { children: _, ...mention } = element;
   return /* @__PURE__ */ jsxRuntime.jsxs("span", {
     ...attributes,
     children: [
       element.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, {
-        userId: element.id,
+        mention,
         isSelected
       }) : null,
       children
@@ -133,9 +134,9 @@ function ComposerEditorLinkWrapper({
 function ComposerEditorMentionSuggestionsWrapper({
   id,
   itemId,
-  userIds,
-  selectedUserId,
-  setSelectedUserId,
+  mentions: mentions$1,
+  selectedMentionId,
+  setSelectedMentionId,
   mentionDraft,
   setMentionDraft,
   onItemSelect,
@@ -146,9 +147,9 @@ function ComposerEditorMentionSuggestionsWrapper({
   const editor = slateReact.useSlateStatic();
   const { onEditorChange } = contexts.useComposerEditorContext();
   const { isFocused } = contexts.useComposer();
-  const { portalContainer } = config.useLiveblocksUIConfig();
+  const { portalContainer } = config.useLiveblocksUiConfig();
   const [contentRef, contentZIndex] = utils$1.useContentZIndex();
-  const isOpen = isFocused && mentionDraft?.range !== void 0 && userIds !== void 0;
+  const isOpen = isFocused && mentionDraft?.range !== void 0 && mentions$1 !== void 0;
   const {
     refs: { setReference, setFloating },
     strategy,
@@ -192,14 +193,14 @@ function ComposerEditorMentionSuggestionsWrapper({
     return () => {
       cancelAnimationFrame(animationFrame);
     };
-  }, [userIds?.length, isOpen, elements.floating, update]);
+  }, [mentions$1?.length, isOpen, elements.floating, update]);
   return /* @__PURE__ */ jsxRuntime.jsx(Persist.Persist, {
     children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerSuggestionsContext.Provider, {
       value: {
         id,
         itemId,
-        selectedValue: selectedUserId,
-        setSelectedValue: setSelectedUserId,
+        selectedValue: selectedMentionId,
+        setSelectedValue: setSelectedMentionId,
         onItemSelect,
         placement,
         dir,
@@ -217,8 +218,8 @@ function ComposerEditorMentionSuggestionsWrapper({
           zIndex: contentZIndex
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(MentionSuggestions, {
-          userIds,
-          selectedUserId
+          mentions: mentions$1,
+          selectedMentionId
         })
       })
     }) : null
@@ -235,7 +236,7 @@ function ComposerEditorFloatingToolbarWrapper({
   const editor = slateReact.useSlateStatic();
   const { onEditorChange } = contexts.useComposerEditorContext();
   const { isFocused } = contexts.useComposer();
-  const { portalContainer } = config.useLiveblocksUIConfig();
+  const { portalContainer } = config.useLiveblocksUiConfig();
   const [contentRef, contentZIndex] = utils$1.useContentZIndex();
   const [isPointerDown, setPointerDown] = react.useState(false);
   const isOpen = isFocused && !isPointerDown && hasFloatingToolbarRange;
@@ -561,21 +562,21 @@ const defaultEditorComponents = {
       children
     });
   },
-  Mention: ({ userId }) => {
+  Mention: ({ mention }) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(ComposerMention, {
       children: [
         constants.MENTION_CHARACTER,
-        userId
+        mention.id
       ]
     });
   },
-  MentionSuggestions: ({ userIds }) => {
-    return userIds.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestions, {
+  MentionSuggestions: ({ mentions }) => {
+    return mentions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestions, {
       children: /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsList, {
-        children: userIds.map((userId) => /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsListItem, {
-          value: userId,
-          children: userId
-        }, userId))
+        children: mentions.map((mention) => /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsListItem, {
+          value: mention.id,
+          children: mention.id
+        }, mention.id))
       })
     }) : null;
   }
@@ -630,7 +631,7 @@ const ComposerEditor = react.forwardRef(
     const floatingToolbarId = `liveblocks-floating-toolbar-${id}`;
     const suggestionsListId = `liveblocks-suggestions-list-${id}`;
     const suggestionsListItemId = react.useCallback(
-      (userId) => userId ? `liveblocks-suggestions-list-item-${id}-${userId}` : void 0,
+      (mentionId) => mentionId ? `liveblocks-suggestions-list-item-${id}-${mentionId}` : void 0,
       [id]
     );
     const renderElement = react.useCallback(
@@ -651,12 +652,12 @@ const ComposerEditor = react.forwardRef(
       [validate, onEditorChange]
     );
     const createMention = react.useCallback(
-      (userId) => {
-        if (!mentionDraft || !userId) {
+      (mention) => {
+        if (!mentionDraft || !mention) {
           return;
         }
         slate.Transforms.select(editor, mentionDraft.range);
-        mentions.insertMention(editor, userId);
+        mentions.insertMention(editor, mention);
         setMentionDraft(void 0);
         setSelectedMentionSuggestionIndex(0);
       },
@@ -685,8 +686,8 @@ const ComposerEditor = react.forwardRef(
           }
           if (isKey.isKey(event, "Enter") || isKey.isKey(event, "Tab")) {
             event.preventDefault();
-            const userId = mentionSuggestions?.[selectedMentionSuggestionIndex];
-            createMention(userId);
+            const mention = mentionSuggestions?.[selectedMentionSuggestionIndex];
+            createMention(mention);
           }
           if (isKey.isKey(event, "Escape")) {
             event.preventDefault();
@@ -765,13 +766,13 @@ const ComposerEditor = react.forwardRef(
       },
       [onBlur, setFocused]
     );
-    const selectedMentionSuggestionUserId = react.useMemo(
-      () => mentionSuggestions?.[selectedMentionSuggestionIndex],
-      [selectedMentionSuggestionIndex, mentionSuggestions]
-    );
-    const setSelectedMentionSuggestionUserId = react.useCallback(
-      (userId) => {
-        const index = mentionSuggestions?.indexOf(userId);
+    const selectedMention = mentionSuggestions?.[selectedMentionSuggestionIndex];
+    const selectedMentionId = selectedMention?.id;
+    const setSelectedMentionId = react.useCallback(
+      (mentionId) => {
+        const index = mentionSuggestions?.findIndex(
+          (mention) => mention.id === mentionId
+        );
         if (index !== void 0 && index >= 0) {
           setSelectedMentionSuggestionIndex(index);
         }
@@ -784,9 +785,7 @@ const ComposerEditor = react.forwardRef(
         "aria-autocomplete": "list",
         "aria-expanded": true,
         "aria-controls": suggestionsListId,
-        "aria-activedescendant": suggestionsListItemId(
-          selectedMentionSuggestionUserId
-        )
+        "aria-activedescendant": suggestionsListItemId(selectedMentionId)
       } : hasFloatingToolbarRange ? {
         "aria-haspopup": true,
         "aria-controls": floatingToolbarId
@@ -795,7 +794,7 @@ const ComposerEditor = react.forwardRef(
         mentionDraft,
         suggestionsListId,
         suggestionsListItemId,
-        selectedMentionSuggestionUserId,
+        selectedMentionId,
         hasFloatingToolbarRange,
         floatingToolbarId
       ]
@@ -813,6 +812,15 @@ const ComposerEditor = react.forwardRef(
         select();
       }
     }, [editor, select, isFocused]);
+    const handleMentionSelect = react.useCallback(
+      (mentionId) => {
+        const mention = mentionSuggestions?.find(
+          (mention2) => mention2.id === mentionId
+        );
+        createMention(mention);
+      },
+      [createMention, mentionSuggestions]
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs(slateReact.Slate, {
       editor,
       initialValue: initialEditorValue,
@@ -840,12 +848,12 @@ const ComposerEditor = react.forwardRef(
           dir,
           mentionDraft,
           setMentionDraft,
-          selectedUserId: selectedMentionSuggestionUserId,
-          setSelectedUserId: setSelectedMentionSuggestionUserId,
-          userIds: mentionSuggestions,
+          selectedMentionId,
+          setSelectedMentionId,
+          mentions: mentionSuggestions,
           id: suggestionsListId,
           itemId: suggestionsListItemId,
-          onItemSelect: createMention,
+          onItemSelect: handleMentionSelect,
           MentionSuggestions
         }),
         FloatingToolbar && /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorFloatingToolbarWrapper, {