@liveblocks/react-ui 2.25.0-aiprivatebeta8 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (181) hide show
  1. package/_private/package.json +2 -2
  2. package/dist/_private/index.cjs +14 -12
  3. package/dist/_private/index.cjs.map +1 -1
  4. package/dist/_private/index.d.cts +146 -113
  5. package/dist/_private/index.d.ts +146 -113
  6. package/dist/_private/index.js +10 -5
  7. package/dist/_private/index.js.map +1 -1
  8. package/dist/components/AiChat.cjs +85 -121
  9. package/dist/components/AiChat.cjs.map +1 -1
  10. package/dist/components/AiChat.js +87 -123
  11. package/dist/components/AiChat.js.map +1 -1
  12. package/dist/components/AiTool.cjs +188 -0
  13. package/dist/components/AiTool.cjs.map +1 -0
  14. package/dist/components/AiTool.js +186 -0
  15. package/dist/components/AiTool.js.map +1 -0
  16. package/dist/components/Comment.cjs +259 -238
  17. package/dist/components/Comment.cjs.map +1 -1
  18. package/dist/components/Comment.js +261 -240
  19. package/dist/components/Comment.js.map +1 -1
  20. package/dist/components/Composer.cjs +42 -30
  21. package/dist/components/Composer.cjs.map +1 -1
  22. package/dist/components/Composer.js +44 -32
  23. package/dist/components/Composer.js.map +1 -1
  24. package/dist/components/InboxNotificationList.cjs +11 -3
  25. package/dist/components/InboxNotificationList.cjs.map +1 -1
  26. package/dist/components/InboxNotificationList.js +12 -4
  27. package/dist/components/InboxNotificationList.js.map +1 -1
  28. package/dist/components/Thread.cjs +7 -1
  29. package/dist/components/Thread.cjs.map +1 -1
  30. package/dist/components/Thread.js +8 -2
  31. package/dist/components/Thread.js.map +1 -1
  32. package/dist/components/internal/AiChatAssistantMessage.cjs +75 -199
  33. package/dist/components/internal/AiChatAssistantMessage.cjs.map +1 -1
  34. package/dist/components/internal/AiChatAssistantMessage.js +77 -201
  35. package/dist/components/internal/AiChatAssistantMessage.js.map +1 -1
  36. package/dist/components/internal/AiChatComposer.cjs +1 -1
  37. package/dist/components/internal/AiChatComposer.cjs.map +1 -1
  38. package/dist/components/internal/AiChatComposer.js +1 -1
  39. package/dist/components/internal/AiChatComposer.js.map +1 -1
  40. package/dist/components/internal/AiChatUserMessage.cjs +17 -10
  41. package/dist/components/internal/AiChatUserMessage.cjs.map +1 -1
  42. package/dist/components/internal/AiChatUserMessage.js +17 -10
  43. package/dist/components/internal/AiChatUserMessage.js.map +1 -1
  44. package/dist/components/internal/Button.cjs.map +1 -1
  45. package/dist/components/internal/Button.js.map +1 -1
  46. package/dist/components/internal/CodeBlock.cjs +75 -0
  47. package/dist/components/internal/CodeBlock.cjs.map +1 -0
  48. package/dist/components/internal/CodeBlock.js +73 -0
  49. package/dist/components/internal/CodeBlock.js.map +1 -0
  50. package/dist/components/internal/Dropdown.cjs +1 -1
  51. package/dist/components/internal/Dropdown.cjs.map +1 -1
  52. package/dist/components/internal/Dropdown.js +2 -2
  53. package/dist/components/internal/Dropdown.js.map +1 -1
  54. package/dist/components/internal/Emoji.cjs +12 -4
  55. package/dist/components/internal/Emoji.cjs.map +1 -1
  56. package/dist/components/internal/Emoji.js +12 -4
  57. package/dist/components/internal/Emoji.js.map +1 -1
  58. package/dist/components/internal/EmojiPicker.cjs +1 -1
  59. package/dist/components/internal/EmojiPicker.cjs.map +1 -1
  60. package/dist/components/internal/EmojiPicker.js +2 -2
  61. package/dist/components/internal/EmojiPicker.js.map +1 -1
  62. package/dist/components/internal/InboxNotificationThread.cjs +5 -2
  63. package/dist/components/internal/InboxNotificationThread.cjs.map +1 -1
  64. package/dist/components/internal/InboxNotificationThread.js +6 -3
  65. package/dist/components/internal/InboxNotificationThread.js.map +1 -1
  66. package/dist/components/internal/Prose.cjs +37 -0
  67. package/dist/components/internal/Prose.cjs.map +1 -0
  68. package/dist/components/internal/Prose.js +35 -0
  69. package/dist/components/internal/Prose.js.map +1 -0
  70. package/dist/components/internal/Tooltip.cjs +1 -1
  71. package/dist/components/internal/Tooltip.cjs.map +1 -1
  72. package/dist/components/internal/Tooltip.js +2 -2
  73. package/dist/components/internal/Tooltip.js.map +1 -1
  74. package/dist/config.cjs +9 -9
  75. package/dist/config.cjs.map +1 -1
  76. package/dist/config.js +8 -8
  77. package/dist/config.js.map +1 -1
  78. package/dist/icons/CrossCircleFill.cjs +25 -0
  79. package/dist/icons/CrossCircleFill.cjs.map +1 -0
  80. package/dist/icons/CrossCircleFill.js +23 -0
  81. package/dist/icons/CrossCircleFill.js.map +1 -0
  82. package/dist/icons/MinusCircle.cjs +23 -0
  83. package/dist/icons/MinusCircle.cjs.map +1 -0
  84. package/dist/icons/MinusCircle.js +21 -0
  85. package/dist/icons/MinusCircle.js.map +1 -0
  86. package/dist/icons/index.cjs +4 -0
  87. package/dist/icons/index.cjs.map +1 -1
  88. package/dist/icons/index.js +2 -0
  89. package/dist/icons/index.js.map +1 -1
  90. package/dist/index.cjs +3 -3
  91. package/dist/index.cjs.map +1 -1
  92. package/dist/index.d.cts +270 -22
  93. package/dist/index.d.ts +270 -22
  94. package/dist/index.js +2 -2
  95. package/dist/index.js.map +1 -1
  96. package/dist/overrides.cjs +6 -4
  97. package/dist/overrides.cjs.map +1 -1
  98. package/dist/overrides.js +6 -4
  99. package/dist/overrides.js.map +1 -1
  100. package/dist/primitives/AiMessage/contexts.cjs +18 -0
  101. package/dist/primitives/AiMessage/contexts.cjs.map +1 -0
  102. package/dist/primitives/AiMessage/contexts.js +15 -0
  103. package/dist/primitives/AiMessage/contexts.js.map +1 -0
  104. package/dist/primitives/AiMessage/index.cjs +77 -0
  105. package/dist/primitives/AiMessage/index.cjs.map +1 -0
  106. package/dist/primitives/AiMessage/index.js +75 -0
  107. package/dist/primitives/AiMessage/index.js.map +1 -0
  108. package/dist/primitives/AiMessage/tool-invocation.cjs +70 -0
  109. package/dist/primitives/AiMessage/tool-invocation.cjs.map +1 -0
  110. package/dist/primitives/AiMessage/tool-invocation.js +68 -0
  111. package/dist/primitives/AiMessage/tool-invocation.js.map +1 -0
  112. package/dist/primitives/{internal/Collapsible → Collapsible}/index.cjs +39 -17
  113. package/dist/primitives/Collapsible/index.cjs.map +1 -0
  114. package/dist/primitives/{internal/Collapsible → Collapsible}/index.js +37 -15
  115. package/dist/primitives/Collapsible/index.js.map +1 -0
  116. package/dist/primitives/Comment/index.cjs +5 -4
  117. package/dist/primitives/Comment/index.cjs.map +1 -1
  118. package/dist/primitives/Comment/index.js +5 -4
  119. package/dist/primitives/Comment/index.js.map +1 -1
  120. package/dist/primitives/Composer/index.cjs +49 -41
  121. package/dist/primitives/Composer/index.cjs.map +1 -1
  122. package/dist/primitives/Composer/index.js +50 -42
  123. package/dist/primitives/Composer/index.js.map +1 -1
  124. package/dist/primitives/Composer/slate/plugins/mentions.cjs +4 -4
  125. package/dist/primitives/Composer/slate/plugins/mentions.cjs.map +1 -1
  126. package/dist/primitives/Composer/slate/plugins/mentions.js +4 -4
  127. package/dist/primitives/Composer/slate/plugins/mentions.js.map +1 -1
  128. package/dist/primitives/Composer/utils.cjs +3 -6
  129. package/dist/primitives/Composer/utils.cjs.map +1 -1
  130. package/dist/primitives/Composer/utils.js +3 -6
  131. package/dist/primitives/Composer/utils.js.map +1 -1
  132. package/dist/primitives/{internal/Markdown.cjs → Markdown.cjs} +105 -65
  133. package/dist/primitives/Markdown.cjs.map +1 -0
  134. package/dist/primitives/{internal/Markdown.js → Markdown.js} +106 -65
  135. package/dist/primitives/Markdown.js.map +1 -0
  136. package/dist/primitives/index.cjs +4 -6
  137. package/dist/primitives/index.cjs.map +1 -1
  138. package/dist/primitives/index.d.cts +20 -93
  139. package/dist/primitives/index.d.ts +20 -93
  140. package/dist/primitives/index.js +4 -6
  141. package/dist/primitives/index.js.map +1 -1
  142. package/dist/utils/ErrorBoundary.cjs +48 -0
  143. package/dist/utils/ErrorBoundary.cjs.map +1 -0
  144. package/dist/utils/ErrorBoundary.js +45 -0
  145. package/dist/utils/ErrorBoundary.js.map +1 -0
  146. package/dist/utils/use-controllable-state.cjs +25 -2
  147. package/dist/utils/use-controllable-state.cjs.map +1 -1
  148. package/dist/utils/use-controllable-state.js +25 -3
  149. package/dist/utils/use-controllable-state.js.map +1 -1
  150. package/dist/utils/use-visible.cjs +65 -45
  151. package/dist/utils/use-visible.cjs.map +1 -1
  152. package/dist/utils/use-visible.js +66 -46
  153. package/dist/utils/use-visible.js.map +1 -1
  154. package/dist/version.cjs +1 -1
  155. package/dist/version.cjs.map +1 -1
  156. package/dist/version.js +1 -1
  157. package/dist/version.js.map +1 -1
  158. package/package.json +16 -5
  159. package/primitives/package.json +2 -2
  160. package/src/styles/constants.css +1 -1
  161. package/src/styles/dark/index.css +7 -3
  162. package/src/styles/index.css +572 -252
  163. package/src/styles/utils.css +1 -1
  164. package/styles/dark/attributes.css +1 -1
  165. package/styles/dark/attributes.css.map +1 -1
  166. package/styles/dark/media-query.css +1 -1
  167. package/styles/dark/media-query.css.map +1 -1
  168. package/styles.css +1 -1
  169. package/styles.css.map +1 -1
  170. package/dist/components/AiToolDebugger.cjs +0 -74
  171. package/dist/components/AiToolDebugger.cjs.map +0 -1
  172. package/dist/components/AiToolDebugger.js +0 -72
  173. package/dist/components/AiToolDebugger.js.map +0 -1
  174. package/dist/primitives/internal/Collapsible/index.cjs.map +0 -1
  175. package/dist/primitives/internal/Collapsible/index.js.map +0 -1
  176. package/dist/primitives/internal/Emoji.cjs +0 -32
  177. package/dist/primitives/internal/Emoji.cjs.map +0 -1
  178. package/dist/primitives/internal/Emoji.js +0 -30
  179. package/dist/primitives/internal/Emoji.js.map +0 -1
  180. package/dist/primitives/internal/Markdown.cjs.map +0 -1
  181. package/dist/primitives/internal/Markdown.js.map +0 -1
@@ -0,0 +1,77 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var reactSlot = require('@radix-ui/react-slot');
5
+ var react = require('react');
6
+ var ErrorBoundary = require('../../utils/ErrorBoundary.cjs');
7
+ var Markdown = require('../Markdown.cjs');
8
+ var toolInvocation = require('./tool-invocation.cjs');
9
+
10
+ const AI_MESSAGE_CONTENT_NAME = "AiMessageContent";
11
+ const defaultMessageContentComponents = {
12
+ TextPart: ({ part }) => {
13
+ return /* @__PURE__ */ jsxRuntime.jsx(Markdown.Markdown, {
14
+ content: part.text
15
+ });
16
+ },
17
+ ReasoningPart: ({ part }) => {
18
+ return /* @__PURE__ */ jsxRuntime.jsx(Markdown.Markdown, {
19
+ content: part.text
20
+ });
21
+ },
22
+ ToolInvocationPart: ({ part, message }) => {
23
+ return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
24
+ fallback: null,
25
+ children: /* @__PURE__ */ jsxRuntime.jsx(toolInvocation.AiMessageToolInvocation, {
26
+ part,
27
+ message
28
+ })
29
+ });
30
+ }
31
+ };
32
+ const AiMessageContent = react.forwardRef(
33
+ ({ message, components, asChild, ...props }, forwardedRef) => {
34
+ const Component = asChild ? reactSlot.Slot : "div";
35
+ const { TextPart, ReasoningPart, ToolInvocationPart } = react.useMemo(
36
+ () => ({ ...defaultMessageContentComponents, ...components }),
37
+ [components]
38
+ );
39
+ const content = message.content ?? message.contentSoFar;
40
+ const numParts = content.length;
41
+ const isGenerating = message.role === "assistant" && message.status === "generating";
42
+ return /* @__PURE__ */ jsxRuntime.jsx(Component, {
43
+ ...props,
44
+ ref: forwardedRef,
45
+ children: content.map((part, index) => {
46
+ const isStreaming = isGenerating && index === numParts - 1;
47
+ const extra = { index, isStreaming };
48
+ switch (part.type) {
49
+ case "text":
50
+ return /* @__PURE__ */ jsxRuntime.jsx(TextPart, {
51
+ part,
52
+ ...extra
53
+ }, index);
54
+ case "reasoning":
55
+ return /* @__PURE__ */ jsxRuntime.jsx(ReasoningPart, {
56
+ part,
57
+ ...extra
58
+ }, index);
59
+ case "tool-invocation":
60
+ return /* @__PURE__ */ jsxRuntime.jsx(ToolInvocationPart, {
61
+ part,
62
+ ...extra,
63
+ message
64
+ }, index);
65
+ default:
66
+ return null;
67
+ }
68
+ })
69
+ });
70
+ }
71
+ );
72
+ if (process.env.NODE_ENV !== "production") {
73
+ AiMessageContent.displayName = AI_MESSAGE_CONTENT_NAME;
74
+ }
75
+
76
+ exports.Content = AiMessageContent;
77
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sources":["../../../src/primitives/AiMessage/index.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { ErrorBoundary } from \"../../utils/ErrorBoundary\";\nimport { Markdown } from \"../Markdown\";\nimport { AiMessageToolInvocation } from \"./tool-invocation\";\nimport type {\n AiMessageContentComponents,\n AiMessageContentProps,\n} from \"./types\";\n\nconst AI_MESSAGE_CONTENT_NAME = \"AiMessageContent\";\n\nconst defaultMessageContentComponents: AiMessageContentComponents = {\n TextPart: ({ part }) => {\n return <Markdown content={part.text} />;\n },\n ReasoningPart: ({ part }) => {\n return <Markdown content={part.text} />;\n },\n ToolInvocationPart: ({ part, message }) => {\n return (\n <ErrorBoundary fallback={null}>\n <AiMessageToolInvocation part={part} message={message} />\n </ErrorBoundary>\n );\n },\n};\n\n/**\n * --------------------------------------------------------------------------\n * @private The API for this component is not yet stable.\n * --------------------------------------------------------------------------\n *\n * Primitive to help display an user or assistant message’s content, which is\n * an array of parts.\n *\n * @example\n * <AiMessage.Content message={message} components={{ TextPart }} />\n */\nconst AiMessageContent = forwardRef<HTMLDivElement, AiMessageContentProps>(\n ({ message, components, asChild, ...props }, forwardedRef) => {\n const Component = asChild ? Slot : \"div\";\n const { TextPart, ReasoningPart, ToolInvocationPart } = useMemo(\n () => ({ ...defaultMessageContentComponents, ...components }),\n [components]\n );\n\n const content = message.content ?? message.contentSoFar;\n const numParts = content.length;\n const isGenerating =\n message.role === \"assistant\" && message.status === \"generating\";\n return (\n <Component {...props} ref={forwardedRef}>\n {content.map((part, index) => {\n // A part is considered to be still \"streaming in\" if it's the last\n // part in the content array, and the message is in \"generating\"\n // state.\n const isStreaming = isGenerating && index === numParts - 1;\n const extra = { index, isStreaming };\n switch (part.type) {\n case \"text\":\n return <TextPart key={index} part={part} {...extra} />;\n case \"reasoning\":\n return <ReasoningPart key={index} part={part} {...extra} />;\n case \"tool-invocation\":\n return (\n <ToolInvocationPart\n key={index}\n part={part}\n {...extra}\n message={message}\n />\n );\n default:\n return null;\n }\n })}\n </Component>\n );\n }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n AiMessageContent.displayName = AI_MESSAGE_CONTENT_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as AiMessage.*\nexport { AiMessageContent as Content };\n"],"names":["jsx","Markdown","ErrorBoundary","AiMessageToolInvocation","forwardRef","Slot","useMemo"],"mappings":"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"}
@@ -0,0 +1,75 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { Slot } from '@radix-ui/react-slot';
3
+ import { forwardRef, useMemo } from 'react';
4
+ import { ErrorBoundary } from '../../utils/ErrorBoundary.js';
5
+ import { Markdown } from '../Markdown.js';
6
+ import { AiMessageToolInvocation } from './tool-invocation.js';
7
+
8
+ const AI_MESSAGE_CONTENT_NAME = "AiMessageContent";
9
+ const defaultMessageContentComponents = {
10
+ TextPart: ({ part }) => {
11
+ return /* @__PURE__ */ jsx(Markdown, {
12
+ content: part.text
13
+ });
14
+ },
15
+ ReasoningPart: ({ part }) => {
16
+ return /* @__PURE__ */ jsx(Markdown, {
17
+ content: part.text
18
+ });
19
+ },
20
+ ToolInvocationPart: ({ part, message }) => {
21
+ return /* @__PURE__ */ jsx(ErrorBoundary, {
22
+ fallback: null,
23
+ children: /* @__PURE__ */ jsx(AiMessageToolInvocation, {
24
+ part,
25
+ message
26
+ })
27
+ });
28
+ }
29
+ };
30
+ const AiMessageContent = forwardRef(
31
+ ({ message, components, asChild, ...props }, forwardedRef) => {
32
+ const Component = asChild ? Slot : "div";
33
+ const { TextPart, ReasoningPart, ToolInvocationPart } = useMemo(
34
+ () => ({ ...defaultMessageContentComponents, ...components }),
35
+ [components]
36
+ );
37
+ const content = message.content ?? message.contentSoFar;
38
+ const numParts = content.length;
39
+ const isGenerating = message.role === "assistant" && message.status === "generating";
40
+ return /* @__PURE__ */ jsx(Component, {
41
+ ...props,
42
+ ref: forwardedRef,
43
+ children: content.map((part, index) => {
44
+ const isStreaming = isGenerating && index === numParts - 1;
45
+ const extra = { index, isStreaming };
46
+ switch (part.type) {
47
+ case "text":
48
+ return /* @__PURE__ */ jsx(TextPart, {
49
+ part,
50
+ ...extra
51
+ }, index);
52
+ case "reasoning":
53
+ return /* @__PURE__ */ jsx(ReasoningPart, {
54
+ part,
55
+ ...extra
56
+ }, index);
57
+ case "tool-invocation":
58
+ return /* @__PURE__ */ jsx(ToolInvocationPart, {
59
+ part,
60
+ ...extra,
61
+ message
62
+ }, index);
63
+ default:
64
+ return null;
65
+ }
66
+ })
67
+ });
68
+ }
69
+ );
70
+ if (process.env.NODE_ENV !== "production") {
71
+ AiMessageContent.displayName = AI_MESSAGE_CONTENT_NAME;
72
+ }
73
+
74
+ export { AiMessageContent as Content };
75
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../src/primitives/AiMessage/index.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { ErrorBoundary } from \"../../utils/ErrorBoundary\";\nimport { Markdown } from \"../Markdown\";\nimport { AiMessageToolInvocation } from \"./tool-invocation\";\nimport type {\n AiMessageContentComponents,\n AiMessageContentProps,\n} from \"./types\";\n\nconst AI_MESSAGE_CONTENT_NAME = \"AiMessageContent\";\n\nconst defaultMessageContentComponents: AiMessageContentComponents = {\n TextPart: ({ part }) => {\n return <Markdown content={part.text} />;\n },\n ReasoningPart: ({ part }) => {\n return <Markdown content={part.text} />;\n },\n ToolInvocationPart: ({ part, message }) => {\n return (\n <ErrorBoundary fallback={null}>\n <AiMessageToolInvocation part={part} message={message} />\n </ErrorBoundary>\n );\n },\n};\n\n/**\n * --------------------------------------------------------------------------\n * @private The API for this component is not yet stable.\n * --------------------------------------------------------------------------\n *\n * Primitive to help display an user or assistant message’s content, which is\n * an array of parts.\n *\n * @example\n * <AiMessage.Content message={message} components={{ TextPart }} />\n */\nconst AiMessageContent = forwardRef<HTMLDivElement, AiMessageContentProps>(\n ({ message, components, asChild, ...props }, forwardedRef) => {\n const Component = asChild ? Slot : \"div\";\n const { TextPart, ReasoningPart, ToolInvocationPart } = useMemo(\n () => ({ ...defaultMessageContentComponents, ...components }),\n [components]\n );\n\n const content = message.content ?? message.contentSoFar;\n const numParts = content.length;\n const isGenerating =\n message.role === \"assistant\" && message.status === \"generating\";\n return (\n <Component {...props} ref={forwardedRef}>\n {content.map((part, index) => {\n // A part is considered to be still \"streaming in\" if it's the last\n // part in the content array, and the message is in \"generating\"\n // state.\n const isStreaming = isGenerating && index === numParts - 1;\n const extra = { index, isStreaming };\n switch (part.type) {\n case \"text\":\n return <TextPart key={index} part={part} {...extra} />;\n case \"reasoning\":\n return <ReasoningPart key={index} part={part} {...extra} />;\n case \"tool-invocation\":\n return (\n <ToolInvocationPart\n key={index}\n part={part}\n {...extra}\n message={message}\n />\n );\n default:\n return null;\n }\n })}\n </Component>\n );\n }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n AiMessageContent.displayName = AI_MESSAGE_CONTENT_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as AiMessage.*\nexport { AiMessageContent as Content };\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,uBAA0B,GAAA,kBAAA,CAAA;AAEhC,MAAM,+BAA8D,GAAA;AAAA,EAClE,QAAU,EAAA,CAAC,EAAE,IAAA,EAAW,KAAA;AACtB,IAAA,uBAAQ,GAAA,CAAA,QAAA,EAAA;AAAA,MAAS,SAAS,IAAK,CAAA,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GACvC;AAAA,EACA,aAAe,EAAA,CAAC,EAAE,IAAA,EAAW,KAAA;AAC3B,IAAA,uBAAQ,GAAA,CAAA,QAAA,EAAA;AAAA,MAAS,SAAS,IAAK,CAAA,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GACvC;AAAA,EACA,kBAAoB,EAAA,CAAC,EAAE,IAAA,EAAM,SAAc,KAAA;AACzC,IAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,MAAc,QAAU,EAAA,IAAA;AAAA,MACvB,QAAC,kBAAA,GAAA,CAAA,uBAAA,EAAA;AAAA,QAAwB,IAAA;AAAA,QAAY,OAAA;AAAA,OAAkB,CAAA;AAAA,KACzD,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA,CAAA;AAaA,MAAM,gBAAmB,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,OAAA,EAAS,YAAY,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AAC5D,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,KAAA,CAAA;AACnC,IAAA,MAAM,EAAE,QAAA,EAAU,aAAe,EAAA,kBAAA,EAAuB,GAAA,OAAA;AAAA,MACtD,OAAO,EAAE,GAAG,+BAAA,EAAiC,GAAG,UAAW,EAAA,CAAA;AAAA,MAC3D,CAAC,UAAU,CAAA;AAAA,KACb,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,OAAQ,CAAA,OAAA,IAAW,OAAQ,CAAA,YAAA,CAAA;AAC3C,IAAA,MAAM,WAAW,OAAQ,CAAA,MAAA,CAAA;AACzB,IAAA,MAAM,YACJ,GAAA,OAAA,CAAQ,IAAS,KAAA,WAAA,IAAe,QAAQ,MAAW,KAAA,YAAA,CAAA;AACrD,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MAAW,GAAG,KAAA;AAAA,MAAO,GAAK,EAAA,YAAA;AAAA,MACxB,QAAQ,EAAA,OAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KAAU,KAAA;AAI5B,QAAM,MAAA,WAAA,GAAc,YAAgB,IAAA,KAAA,KAAU,QAAW,GAAA,CAAA,CAAA;AACzD,QAAM,MAAA,KAAA,GAAQ,EAAE,KAAA,EAAO,WAAY,EAAA,CAAA;AACnC,QAAA,QAAQ,KAAK,IAAM;AAAA,UACjB,KAAK,MAAA;AACH,YAAA,uBAAQ,GAAA,CAAA,QAAA,EAAA;AAAA,cAAqB,IAAA;AAAA,cAAa,GAAG,KAAA;AAAA,aAAA,EAAvB,KAA8B,CAAA,CAAA;AAAA,UACtD,KAAK,WAAA;AACH,YAAA,uBAAQ,GAAA,CAAA,aAAA,EAAA;AAAA,cAA0B,IAAA;AAAA,cAAa,GAAG,KAAA;AAAA,aAAA,EAAvB,KAA8B,CAAA,CAAA;AAAA,UAC3D,KAAK,iBAAA;AACH,YAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,cAEC,IAAA;AAAA,cACC,GAAG,KAAA;AAAA,cACJ,OAAA;AAAA,aAAA,EAHK,KAIP,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,gBAAA,CAAiB,WAAc,GAAA,uBAAA,CAAA;AACjC;;;;"}
@@ -0,0 +1,70 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var core = require('@liveblocks/core');
5
+ var react = require('@liveblocks/react');
6
+ var _private = require('@liveblocks/react/_private');
7
+ var react$1 = require('react');
8
+ var contexts = require('./contexts.cjs');
9
+
10
+ function StableRenderFn(props) {
11
+ return props.renderFn(props.props);
12
+ }
13
+ function AiMessageToolInvocation({
14
+ message,
15
+ part
16
+ }) {
17
+ const client = react.useClient();
18
+ const ai = client[core.kInternal].ai;
19
+ const tool = _private.useSignal(ai.signals.getTool\u03A3(part.name, message.chatId));
20
+ const respond = react$1.useCallback(
21
+ (result) => {
22
+ if (message.status !== "awaiting-tool") {
23
+ } else if (part.stage === "receiving") {
24
+ } else if (part.stage === "executed") {
25
+ console.log(
26
+ `Ignoring respond(): tool '${part.name}' (${part.invocationId}) has already executed`
27
+ );
28
+ } else {
29
+ ai.setToolResult(
30
+ message.chatId,
31
+ message.id,
32
+ part.invocationId,
33
+ result ?? { data: {} }
34
+ );
35
+ }
36
+ },
37
+ [
38
+ ai,
39
+ message.chatId,
40
+ message.id,
41
+ message.status,
42
+ part.invocationId,
43
+ part.name,
44
+ part.stage
45
+ ]
46
+ );
47
+ const props = react$1.useMemo(() => {
48
+ const { type: _, ...rest } = part;
49
+ return {
50
+ ...rest,
51
+ respond,
52
+ types: void 0,
53
+ [core.kInternal]: {
54
+ execute: tool?.execute
55
+ }
56
+ };
57
+ }, [part, respond, tool?.execute]);
58
+ if (tool?.render === void 0)
59
+ return null;
60
+ return /* @__PURE__ */ jsxRuntime.jsx(contexts.AiToolInvocationContext.Provider, {
61
+ value: props,
62
+ children: /* @__PURE__ */ jsxRuntime.jsx(StableRenderFn, {
63
+ renderFn: tool.render,
64
+ props
65
+ })
66
+ });
67
+ }
68
+
69
+ exports.AiMessageToolInvocation = AiMessageToolInvocation;
70
+ //# sourceMappingURL=tool-invocation.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tool-invocation.cjs","sources":["../../../src/primitives/AiMessage/tool-invocation.tsx"],"sourcesContent":["import type {\n AiChatMessage,\n AiToolInvocationPart,\n AiToolInvocationProps,\n JsonObject,\n ToolResultResponse,\n} from \"@liveblocks/core\";\nimport { kInternal } 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 JsonObject\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 | undefined) => {\n if (message.status !== \"awaiting-tool\") {\n // console.log(\"Ignoring respond(): message not awaiting tool result\");\n } else 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 [\n ai,\n message.chatId,\n message.id,\n message.status,\n part.invocationId,\n part.name,\n part.stage,\n ]\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":["useClient","kInternal","useSignal","useCallback","useMemo","jsx","AiToolInvocationContext"],"mappings":";;;;;;;;;AAmBA,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,SAASA,eAAU,EAAA,CAAA;AACzB,EAAM,MAAA,EAAA,GAAK,OAAOC,cAAW,CAAA,CAAA,EAAA,CAAA;AAC7B,EAAM,MAAA,IAAA,GAAOC,mBAAU,EAAG,CAAA,OAAA,CAAQ,cAAS,IAAK,CAAA,IAAA,EAAM,OAAQ,CAAA,MAAM,CAAC,CAAA,CAAA;AAErE,EAAA,MAAM,OAAU,GAAAC,mBAAA;AAAA,IACd,CAAC,MAA2C,KAAA;AAC1C,MAAI,IAAA,OAAA,CAAQ,WAAW,eAAiB,EAAA;AAAA,OAExC,MAAA,IAAW,IAAK,CAAA,KAAA,KAAU,WAAa,EAAA;AAAA,OAIvC,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,MAAU,IAAA,EAAE,IAAM,EAAA,EAAG,EAAA;AAAA,SAEvB,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAA;AAAA,MACA,OAAQ,CAAA,MAAA;AAAA,MACR,OAAQ,CAAA,EAAA;AAAA,MACR,OAAQ,CAAA,MAAA;AAAA,MACR,IAAK,CAAA,YAAA;AAAA,MACL,IAAK,CAAA,IAAA;AAAA,MACL,IAAK,CAAA,KAAA;AAAA,KACP;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,KAAA,GAAQC,gBAAQ,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,CAACH,cAAY,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,uBAAAI,cAAA,CAACC,iCAAwB,QAAxB,EAAA;AAAA,IAAiC,KAAO,EAAA,KAAA;AAAA,IACvC,QAAC,kBAAAD,cAAA,CAAA,cAAA,EAAA;AAAA,MACC,UAAU,IAAK,CAAA,MAAA;AAAA,MACf,KAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
@@ -0,0 +1,68 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { kInternal } from '@liveblocks/core';
3
+ import { useClient } from '@liveblocks/react';
4
+ import { useSignal } from '@liveblocks/react/_private';
5
+ import { useCallback, useMemo } from 'react';
6
+ import { AiToolInvocationContext } from './contexts.js';
7
+
8
+ function StableRenderFn(props) {
9
+ return props.renderFn(props.props);
10
+ }
11
+ function AiMessageToolInvocation({
12
+ message,
13
+ part
14
+ }) {
15
+ const client = useClient();
16
+ const ai = client[kInternal].ai;
17
+ const tool = useSignal(ai.signals.getTool\u03A3(part.name, message.chatId));
18
+ const respond = useCallback(
19
+ (result) => {
20
+ if (message.status !== "awaiting-tool") {
21
+ } else if (part.stage === "receiving") {
22
+ } else if (part.stage === "executed") {
23
+ console.log(
24
+ `Ignoring respond(): tool '${part.name}' (${part.invocationId}) has already executed`
25
+ );
26
+ } else {
27
+ ai.setToolResult(
28
+ message.chatId,
29
+ message.id,
30
+ part.invocationId,
31
+ result ?? { data: {} }
32
+ );
33
+ }
34
+ },
35
+ [
36
+ ai,
37
+ message.chatId,
38
+ message.id,
39
+ message.status,
40
+ part.invocationId,
41
+ part.name,
42
+ part.stage
43
+ ]
44
+ );
45
+ const props = useMemo(() => {
46
+ const { type: _, ...rest } = part;
47
+ return {
48
+ ...rest,
49
+ respond,
50
+ types: void 0,
51
+ [kInternal]: {
52
+ execute: tool?.execute
53
+ }
54
+ };
55
+ }, [part, respond, tool?.execute]);
56
+ if (tool?.render === void 0)
57
+ return null;
58
+ return /* @__PURE__ */ jsx(AiToolInvocationContext.Provider, {
59
+ value: props,
60
+ children: /* @__PURE__ */ jsx(StableRenderFn, {
61
+ renderFn: tool.render,
62
+ props
63
+ })
64
+ });
65
+ }
66
+
67
+ export { AiMessageToolInvocation };
68
+ //# sourceMappingURL=tool-invocation.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tool-invocation.js","sources":["../../../src/primitives/AiMessage/tool-invocation.tsx"],"sourcesContent":["import type {\n AiChatMessage,\n AiToolInvocationPart,\n AiToolInvocationProps,\n JsonObject,\n ToolResultResponse,\n} from \"@liveblocks/core\";\nimport { kInternal } 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 JsonObject\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 | undefined) => {\n if (message.status !== \"awaiting-tool\") {\n // console.log(\"Ignoring respond(): message not awaiting tool result\");\n } else 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 [\n ai,\n message.chatId,\n message.id,\n message.status,\n part.invocationId,\n part.name,\n part.stage,\n ]\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":";;;;;;;AAmBA,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,MAA2C,KAAA;AAC1C,MAAI,IAAA,OAAA,CAAQ,WAAW,eAAiB,EAAA;AAAA,OAExC,MAAA,IAAW,IAAK,CAAA,KAAA,KAAU,WAAa,EAAA;AAAA,OAIvC,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,MAAU,IAAA,EAAE,IAAM,EAAA,EAAG,EAAA;AAAA,SAEvB,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAA;AAAA,MACA,OAAQ,CAAA,MAAA;AAAA,MACR,OAAQ,CAAA,EAAA;AAAA,MACR,OAAQ,CAAA,MAAA;AAAA,MACR,IAAK,CAAA,YAAA;AAAA,MACL,IAAK,CAAA,IAAA;AAAA,MACL,IAAK,CAAA,KAAA;AAAA,KACP;AAAA,GACF,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;;;;"}
@@ -3,29 +3,45 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var reactSlot = require('@radix-ui/react-slot');
5
5
  var react = require('react');
6
+ var useControllableState = require('../../utils/use-controllable-state.cjs');
6
7
 
7
- const RootContext = react.createContext(null);
8
- const Root = react.forwardRef(
9
- ({ open, onOpenChange, disabled = false, asChild, ...props }, forwardedRef) => {
8
+ const COLLAPSIBLE_ROOT_NAME = "CollapsibleRoot";
9
+ const COLLAPSIBLE_TRIGGER_NAME = "CollapsibleTrigger";
10
+ const COLLAPSIBLE_CONTENT_NAME = "CollapsibleContent";
11
+ const CollapsibleContext = react.createContext(null);
12
+ const CollapsibleRoot = react.forwardRef(
13
+ ({
14
+ open: controlledOpen,
15
+ onOpenChange: controlledOnOpenChange,
16
+ defaultOpen,
17
+ disabled = false,
18
+ asChild,
19
+ ...props
20
+ }, forwardedRef) => {
21
+ const [isOpen, onOpenChange] = useControllableState.useControllableState(
22
+ defaultOpen ?? true,
23
+ controlledOpen,
24
+ controlledOnOpenChange
25
+ );
10
26
  const Component = asChild ? reactSlot.Slot : "div";
11
27
  const id = react.useId();
12
- return /* @__PURE__ */ jsxRuntime.jsx(RootContext.Provider, {
13
- value: { open, onOpenChange, disabled, contentId: id },
28
+ return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.Provider, {
29
+ value: { open: isOpen, onOpenChange, disabled, contentId: id },
14
30
  children: /* @__PURE__ */ jsxRuntime.jsx(Component, {
15
31
  ...props,
16
32
  ref: forwardedRef,
17
- "data-state": open ? "open" : "closed",
33
+ "data-state": isOpen ? "open" : "closed",
18
34
  "data-disabled": disabled ? "" : void 0
19
35
  })
20
36
  });
21
37
  }
22
38
  );
23
- const Trigger = react.forwardRef(
39
+ const CollapsibleTrigger = react.forwardRef(
24
40
  ({ onClick, asChild, ...props }, forwardedRef) => {
25
41
  const Component = asChild ? reactSlot.Slot : "button";
26
- const context = react.useContext(RootContext);
42
+ const context = react.useContext(CollapsibleContext);
27
43
  if (!context) {
28
- throw new Error("Collapsible.Trigger must be a descendant of Root");
44
+ throw new Error("Collapsible.Root is missing from the React tree.");
29
45
  }
30
46
  const { open, disabled, contentId, onOpenChange } = context;
31
47
  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
@@ -48,14 +64,15 @@ const Trigger = react.forwardRef(
48
64
  });
49
65
  }
50
66
  );
51
- const Content = react.forwardRef(
67
+ const CollapsibleContent = react.forwardRef(
52
68
  ({ asChild, ...props }, forwardedRef) => {
53
69
  const Component = asChild ? reactSlot.Slot : "div";
54
- const rootContext = react.useContext(RootContext);
70
+ const context = react.useContext(CollapsibleContext);
55
71
  const divRef = react.useRef(null);
56
- if (!rootContext)
57
- throw new Error("Missing RootContext Provider");
58
- const { open, onOpenChange, disabled, contentId } = rootContext;
72
+ if (!context) {
73
+ throw new Error("Collapsible.Root is missing from the React tree.");
74
+ }
75
+ const { open, onOpenChange, disabled, contentId } = context;
59
76
  react.useEffect(() => {
60
77
  const element = divRef.current;
61
78
  if (element === null)
@@ -98,8 +115,13 @@ const Content = react.forwardRef(
98
115
  });
99
116
  }
100
117
  );
118
+ if (process.env.NODE_ENV !== "production") {
119
+ CollapsibleContent.displayName = COLLAPSIBLE_CONTENT_NAME;
120
+ CollapsibleRoot.displayName = COLLAPSIBLE_ROOT_NAME;
121
+ CollapsibleTrigger.displayName = COLLAPSIBLE_TRIGGER_NAME;
122
+ }
101
123
 
102
- exports.Content = Content;
103
- exports.Root = Root;
104
- exports.Trigger = Trigger;
124
+ exports.Content = CollapsibleContent;
125
+ exports.Root = CollapsibleRoot;
126
+ exports.Trigger = CollapsibleTrigger;
105
127
  //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sources":["../../../src/primitives/Collapsible/index.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport {\n createContext,\n forwardRef,\n useContext,\n useEffect,\n useId,\n useImperativeHandle,\n useRef,\n} from \"react\";\n\nimport { useControllableState } from \"../../utils/use-controllable-state\";\nimport type { ContentProps, RootProps, TriggerProps } from \"./types\";\n\nconst COLLAPSIBLE_ROOT_NAME = \"CollapsibleRoot\";\nconst COLLAPSIBLE_TRIGGER_NAME = \"CollapsibleTrigger\";\nconst COLLAPSIBLE_CONTENT_NAME = \"CollapsibleContent\";\n\nconst CollapsibleContext = createContext<{\n open?: boolean;\n onOpenChange: (open: boolean) => void;\n disabled: boolean;\n contentId: string;\n} | null>(null);\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\nconst CollapsibleRoot = forwardRef<HTMLDivElement, RootProps>(\n (\n {\n open: controlledOpen,\n onOpenChange: controlledOnOpenChange,\n defaultOpen,\n disabled = false,\n asChild,\n ...props\n },\n forwardedRef\n ) => {\n const [isOpen, onOpenChange] = useControllableState(\n defaultOpen ?? true,\n controlledOpen,\n controlledOnOpenChange\n );\n const Component = asChild ? Slot : \"div\";\n const id = useId();\n\n return (\n <CollapsibleContext.Provider\n value={{ open: isOpen, onOpenChange, disabled, contentId: id }}\n >\n <Component\n {...props}\n ref={forwardedRef}\n data-state={isOpen ? \"open\" : \"closed\"}\n data-disabled={disabled ? \"\" : undefined}\n />\n </CollapsibleContext.Provider>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Trigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst CollapsibleTrigger = forwardRef<HTMLButtonElement, TriggerProps>(\n ({ onClick, asChild, ...props }, forwardedRef) => {\n const Component = asChild ? Slot : \"button\";\n const context = useContext(CollapsibleContext);\n\n if (!context) {\n throw new Error(\"Collapsible.Root is missing from the React tree.\");\n }\n\n const { open, disabled, contentId, onOpenChange } = context;\n\n return (\n <Component\n {...props}\n ref={forwardedRef}\n type=\"button\"\n aria-controls={contentId}\n aria-expanded={open || false}\n data-state={open ? \"open\" : \"closed\"}\n data-disabled={disabled ? \"\" : undefined}\n disabled={disabled}\n onClick={(event) => {\n onClick?.(event);\n if (event.defaultPrevented) return;\n if (disabled) return;\n onOpenChange(!open);\n }}\n />\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\nconst CollapsibleContent = forwardRef<HTMLDivElement, ContentProps>(\n ({ asChild, ...props }, forwardedRef) => {\n const Component = asChild ? Slot : \"div\";\n const context = useContext(CollapsibleContext);\n const divRef = useRef<HTMLDivElement>(null);\n\n if (!context) {\n throw new Error(\"Collapsible.Root is missing from the React tree.\");\n }\n\n const { open, onOpenChange, disabled, contentId } = context;\n\n useEffect(() => {\n const element = divRef.current;\n if (element === null) return;\n\n const isHiddenUntilFoundSupported = \"onbeforematch\" in document.body;\n if (!isHiddenUntilFoundSupported) return;\n\n function handleBeforeMatch() {\n onOpenChange(true);\n }\n\n // https://developer.chrome.com/articles/hidden-until-found/\n element.addEventListener(\"beforematch\", handleBeforeMatch);\n return () => {\n element.removeEventListener(\"beforematch\", handleBeforeMatch);\n };\n }, [onOpenChange]);\n\n // Passing `string` to `hidden` in JSX is not currently supported: https://github.com/facebook/react/issues/24740\n useEffect(() => {\n const element = divRef.current;\n if (element === null) return;\n\n if (open) return;\n\n const isHiddenUntilFoundSupported = \"onbeforematch\" in document.body;\n if (!isHiddenUntilFoundSupported) return;\n\n element.setAttribute(\"hidden\", \"until-found\");\n return () => {\n element.removeAttribute(\"hidden\");\n };\n }, [open]);\n\n useImperativeHandle<\n HTMLDivElement | null,\n HTMLDivElement | null\n >(forwardedRef, () => {\n return divRef.current;\n }, []);\n\n return (\n <Component\n {...props}\n ref={divRef}\n data-state={open ? \"open\" : \"closed\"}\n data-disabled={disabled ? \"\" : undefined}\n id={contentId}\n hidden={!open}\n />\n );\n }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n CollapsibleContent.displayName = COLLAPSIBLE_CONTENT_NAME;\n CollapsibleRoot.displayName = COLLAPSIBLE_ROOT_NAME;\n CollapsibleTrigger.displayName = COLLAPSIBLE_TRIGGER_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Collapsible.*\nexport {\n CollapsibleContent as Content,\n CollapsibleRoot as Root,\n CollapsibleTrigger as Trigger,\n};\n"],"names":["createContext","forwardRef","useControllableState","Slot","useId","jsx","useContext","useRef","useEffect","useImperativeHandle"],"mappings":"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"}
@@ -1,29 +1,45 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { Slot } from '@radix-ui/react-slot';
3
3
  import { createContext, forwardRef, useId, useContext, useRef, useEffect, useImperativeHandle } from 'react';
4
+ import { useControllableState } from '../../utils/use-controllable-state.js';
4
5
 
5
- const RootContext = createContext(null);
6
- const Root = forwardRef(
7
- ({ open, onOpenChange, disabled = false, asChild, ...props }, forwardedRef) => {
6
+ const COLLAPSIBLE_ROOT_NAME = "CollapsibleRoot";
7
+ const COLLAPSIBLE_TRIGGER_NAME = "CollapsibleTrigger";
8
+ const COLLAPSIBLE_CONTENT_NAME = "CollapsibleContent";
9
+ const CollapsibleContext = createContext(null);
10
+ const CollapsibleRoot = forwardRef(
11
+ ({
12
+ open: controlledOpen,
13
+ onOpenChange: controlledOnOpenChange,
14
+ defaultOpen,
15
+ disabled = false,
16
+ asChild,
17
+ ...props
18
+ }, forwardedRef) => {
19
+ const [isOpen, onOpenChange] = useControllableState(
20
+ defaultOpen ?? true,
21
+ controlledOpen,
22
+ controlledOnOpenChange
23
+ );
8
24
  const Component = asChild ? Slot : "div";
9
25
  const id = useId();
10
- return /* @__PURE__ */ jsx(RootContext.Provider, {
11
- value: { open, onOpenChange, disabled, contentId: id },
26
+ return /* @__PURE__ */ jsx(CollapsibleContext.Provider, {
27
+ value: { open: isOpen, onOpenChange, disabled, contentId: id },
12
28
  children: /* @__PURE__ */ jsx(Component, {
13
29
  ...props,
14
30
  ref: forwardedRef,
15
- "data-state": open ? "open" : "closed",
31
+ "data-state": isOpen ? "open" : "closed",
16
32
  "data-disabled": disabled ? "" : void 0
17
33
  })
18
34
  });
19
35
  }
20
36
  );
21
- const Trigger = forwardRef(
37
+ const CollapsibleTrigger = forwardRef(
22
38
  ({ onClick, asChild, ...props }, forwardedRef) => {
23
39
  const Component = asChild ? Slot : "button";
24
- const context = useContext(RootContext);
40
+ const context = useContext(CollapsibleContext);
25
41
  if (!context) {
26
- throw new Error("Collapsible.Trigger must be a descendant of Root");
42
+ throw new Error("Collapsible.Root is missing from the React tree.");
27
43
  }
28
44
  const { open, disabled, contentId, onOpenChange } = context;
29
45
  return /* @__PURE__ */ jsx(Component, {
@@ -46,14 +62,15 @@ const Trigger = forwardRef(
46
62
  });
47
63
  }
48
64
  );
49
- const Content = forwardRef(
65
+ const CollapsibleContent = forwardRef(
50
66
  ({ asChild, ...props }, forwardedRef) => {
51
67
  const Component = asChild ? Slot : "div";
52
- const rootContext = useContext(RootContext);
68
+ const context = useContext(CollapsibleContext);
53
69
  const divRef = useRef(null);
54
- if (!rootContext)
55
- throw new Error("Missing RootContext Provider");
56
- const { open, onOpenChange, disabled, contentId } = rootContext;
70
+ if (!context) {
71
+ throw new Error("Collapsible.Root is missing from the React tree.");
72
+ }
73
+ const { open, onOpenChange, disabled, contentId } = context;
57
74
  useEffect(() => {
58
75
  const element = divRef.current;
59
76
  if (element === null)
@@ -96,6 +113,11 @@ const Content = forwardRef(
96
113
  });
97
114
  }
98
115
  );
116
+ if (process.env.NODE_ENV !== "production") {
117
+ CollapsibleContent.displayName = COLLAPSIBLE_CONTENT_NAME;
118
+ CollapsibleRoot.displayName = COLLAPSIBLE_ROOT_NAME;
119
+ CollapsibleTrigger.displayName = COLLAPSIBLE_TRIGGER_NAME;
120
+ }
99
121
 
100
- export { Content, Root, Trigger };
122
+ export { CollapsibleContent as Content, CollapsibleRoot as Root, CollapsibleTrigger as Trigger };
101
123
  //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../src/primitives/Collapsible/index.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport {\n createContext,\n forwardRef,\n useContext,\n useEffect,\n useId,\n useImperativeHandle,\n useRef,\n} from \"react\";\n\nimport { useControllableState } from \"../../utils/use-controllable-state\";\nimport type { ContentProps, RootProps, TriggerProps } from \"./types\";\n\nconst COLLAPSIBLE_ROOT_NAME = \"CollapsibleRoot\";\nconst COLLAPSIBLE_TRIGGER_NAME = \"CollapsibleTrigger\";\nconst COLLAPSIBLE_CONTENT_NAME = \"CollapsibleContent\";\n\nconst CollapsibleContext = createContext<{\n open?: boolean;\n onOpenChange: (open: boolean) => void;\n disabled: boolean;\n contentId: string;\n} | null>(null);\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\nconst CollapsibleRoot = forwardRef<HTMLDivElement, RootProps>(\n (\n {\n open: controlledOpen,\n onOpenChange: controlledOnOpenChange,\n defaultOpen,\n disabled = false,\n asChild,\n ...props\n },\n forwardedRef\n ) => {\n const [isOpen, onOpenChange] = useControllableState(\n defaultOpen ?? true,\n controlledOpen,\n controlledOnOpenChange\n );\n const Component = asChild ? Slot : \"div\";\n const id = useId();\n\n return (\n <CollapsibleContext.Provider\n value={{ open: isOpen, onOpenChange, disabled, contentId: id }}\n >\n <Component\n {...props}\n ref={forwardedRef}\n data-state={isOpen ? \"open\" : \"closed\"}\n data-disabled={disabled ? \"\" : undefined}\n />\n </CollapsibleContext.Provider>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Trigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst CollapsibleTrigger = forwardRef<HTMLButtonElement, TriggerProps>(\n ({ onClick, asChild, ...props }, forwardedRef) => {\n const Component = asChild ? Slot : \"button\";\n const context = useContext(CollapsibleContext);\n\n if (!context) {\n throw new Error(\"Collapsible.Root is missing from the React tree.\");\n }\n\n const { open, disabled, contentId, onOpenChange } = context;\n\n return (\n <Component\n {...props}\n ref={forwardedRef}\n type=\"button\"\n aria-controls={contentId}\n aria-expanded={open || false}\n data-state={open ? \"open\" : \"closed\"}\n data-disabled={disabled ? \"\" : undefined}\n disabled={disabled}\n onClick={(event) => {\n onClick?.(event);\n if (event.defaultPrevented) return;\n if (disabled) return;\n onOpenChange(!open);\n }}\n />\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\nconst CollapsibleContent = forwardRef<HTMLDivElement, ContentProps>(\n ({ asChild, ...props }, forwardedRef) => {\n const Component = asChild ? Slot : \"div\";\n const context = useContext(CollapsibleContext);\n const divRef = useRef<HTMLDivElement>(null);\n\n if (!context) {\n throw new Error(\"Collapsible.Root is missing from the React tree.\");\n }\n\n const { open, onOpenChange, disabled, contentId } = context;\n\n useEffect(() => {\n const element = divRef.current;\n if (element === null) return;\n\n const isHiddenUntilFoundSupported = \"onbeforematch\" in document.body;\n if (!isHiddenUntilFoundSupported) return;\n\n function handleBeforeMatch() {\n onOpenChange(true);\n }\n\n // https://developer.chrome.com/articles/hidden-until-found/\n element.addEventListener(\"beforematch\", handleBeforeMatch);\n return () => {\n element.removeEventListener(\"beforematch\", handleBeforeMatch);\n };\n }, [onOpenChange]);\n\n // Passing `string` to `hidden` in JSX is not currently supported: https://github.com/facebook/react/issues/24740\n useEffect(() => {\n const element = divRef.current;\n if (element === null) return;\n\n if (open) return;\n\n const isHiddenUntilFoundSupported = \"onbeforematch\" in document.body;\n if (!isHiddenUntilFoundSupported) return;\n\n element.setAttribute(\"hidden\", \"until-found\");\n return () => {\n element.removeAttribute(\"hidden\");\n };\n }, [open]);\n\n useImperativeHandle<\n HTMLDivElement | null,\n HTMLDivElement | null\n >(forwardedRef, () => {\n return divRef.current;\n }, []);\n\n return (\n <Component\n {...props}\n ref={divRef}\n data-state={open ? \"open\" : \"closed\"}\n data-disabled={disabled ? \"\" : undefined}\n id={contentId}\n hidden={!open}\n />\n );\n }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n CollapsibleContent.displayName = COLLAPSIBLE_CONTENT_NAME;\n CollapsibleRoot.displayName = COLLAPSIBLE_ROOT_NAME;\n CollapsibleTrigger.displayName = COLLAPSIBLE_TRIGGER_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Collapsible.*\nexport {\n CollapsibleContent as Content,\n CollapsibleRoot as Root,\n CollapsibleTrigger as Trigger,\n};\n"],"names":[],"mappings":";;;;;AAcA,MAAM,qBAAwB,GAAA,iBAAA,CAAA;AAC9B,MAAM,wBAA2B,GAAA,oBAAA,CAAA;AACjC,MAAM,wBAA2B,GAAA,oBAAA,CAAA;AAEjC,MAAM,kBAAA,GAAqB,cAKjB,IAAI,CAAA,CAAA;AAMd,MAAM,eAAkB,GAAA,UAAA;AAAA,EACtB,CACE;AAAA,IACE,IAAM,EAAA,cAAA;AAAA,IACN,YAAc,EAAA,sBAAA;AAAA,IACd,WAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,YACG,KAAA;AACH,IAAM,MAAA,CAAC,MAAQ,EAAA,YAAY,CAAI,GAAA,oBAAA;AAAA,MAC7B,WAAe,IAAA,IAAA;AAAA,MACf,cAAA;AAAA,MACA,sBAAA;AAAA,KACF,CAAA;AACA,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,KAAA,CAAA;AACnC,IAAA,MAAM,KAAK,KAAM,EAAA,CAAA;AAEjB,IACE,uBAAA,GAAA,CAAC,mBAAmB,QAAnB,EAAA;AAAA,MACC,OAAO,EAAE,IAAA,EAAM,QAAQ,YAAc,EAAA,QAAA,EAAU,WAAW,EAAG,EAAA;AAAA,MAE7D,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAK,EAAA,YAAA;AAAA,QACL,YAAA,EAAY,SAAS,MAAS,GAAA,QAAA;AAAA,QAC9B,eAAA,EAAe,WAAW,EAAK,GAAA,KAAA,CAAA;AAAA,OACjC,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAMA,MAAM,kBAAqB,GAAA,UAAA;AAAA,EACzB,CAAC,EAAE,OAAA,EAAS,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AAChD,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,QAAA,CAAA;AACnC,IAAM,MAAA,OAAA,GAAU,WAAW,kBAAkB,CAAA,CAAA;AAE7C,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAM,MAAA,IAAI,MAAM,kDAAkD,CAAA,CAAA;AAAA,KACpE;AAEA,IAAA,MAAM,EAAE,IAAA,EAAM,QAAU,EAAA,SAAA,EAAW,cAAiB,GAAA,OAAA,CAAA;AAEpD,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MACL,IAAK,EAAA,QAAA;AAAA,MACL,eAAe,EAAA,SAAA;AAAA,MACf,iBAAe,IAAQ,IAAA,KAAA;AAAA,MACvB,YAAA,EAAY,OAAO,MAAS,GAAA,QAAA;AAAA,MAC5B,eAAA,EAAe,WAAW,EAAK,GAAA,KAAA,CAAA;AAAA,MAC/B,QAAA;AAAA,MACA,OAAA,EAAS,CAAC,KAAU,KAAA;AAClB,QAAA,OAAA,GAAU,KAAK,CAAA,CAAA;AACf,QAAA,IAAI,KAAM,CAAA,gBAAA;AAAkB,UAAA,OAAA;AAC5B,QAAI,IAAA,QAAA;AAAU,UAAA,OAAA;AACd,QAAA,YAAA,CAAa,CAAC,IAAI,CAAA,CAAA;AAAA,OACpB;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAMA,MAAM,kBAAqB,GAAA,UAAA;AAAA,EACzB,CAAC,EAAE,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACvC,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,KAAA,CAAA;AACnC,IAAM,MAAA,OAAA,GAAU,WAAW,kBAAkB,CAAA,CAAA;AAC7C,IAAM,MAAA,MAAA,GAAS,OAAuB,IAAI,CAAA,CAAA;AAE1C,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAM,MAAA,IAAI,MAAM,kDAAkD,CAAA,CAAA;AAAA,KACpE;AAEA,IAAA,MAAM,EAAE,IAAA,EAAM,YAAc,EAAA,QAAA,EAAU,WAAc,GAAA,OAAA,CAAA;AAEpD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,UAAU,MAAO,CAAA,OAAA,CAAA;AACvB,MAAA,IAAI,OAAY,KAAA,IAAA;AAAM,QAAA,OAAA;AAEtB,MAAM,MAAA,2BAAA,GAA8B,mBAAmB,QAAS,CAAA,IAAA,CAAA;AAChE,MAAA,IAAI,CAAC,2BAAA;AAA6B,QAAA,OAAA;AAElC,MAAA,SAAS,iBAAoB,GAAA;AAC3B,QAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,OACnB;AAGA,MAAQ,OAAA,CAAA,gBAAA,CAAiB,eAAe,iBAAiB,CAAA,CAAA;AACzD,MAAA,OAAO,MAAM;AACX,QAAQ,OAAA,CAAA,mBAAA,CAAoB,eAAe,iBAAiB,CAAA,CAAA;AAAA,OAC9D,CAAA;AAAA,KACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAGjB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,UAAU,MAAO,CAAA,OAAA,CAAA;AACvB,MAAA,IAAI,OAAY,KAAA,IAAA;AAAM,QAAA,OAAA;AAEtB,MAAI,IAAA,IAAA;AAAM,QAAA,OAAA;AAEV,MAAM,MAAA,2BAAA,GAA8B,mBAAmB,QAAS,CAAA,IAAA,CAAA;AAChE,MAAA,IAAI,CAAC,2BAAA;AAA6B,QAAA,OAAA;AAElC,MAAQ,OAAA,CAAA,YAAA,CAAa,UAAU,aAAa,CAAA,CAAA;AAC5C,MAAA,OAAO,MAAM;AACX,QAAA,OAAA,CAAQ,gBAAgB,QAAQ,CAAA,CAAA;AAAA,OAClC,CAAA;AAAA,KACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,IAAA,mBAAA,CAGE,cAAc,MAAM;AACpB,MAAA,OAAO,MAAO,CAAA,OAAA,CAAA;AAAA,KAChB,EAAG,EAAE,CAAA,CAAA;AAEL,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,MAAA;AAAA,MACL,YAAA,EAAY,OAAO,MAAS,GAAA,QAAA;AAAA,MAC5B,eAAA,EAAe,WAAW,EAAK,GAAA,KAAA,CAAA;AAAA,MAC/B,EAAI,EAAA,SAAA;AAAA,MACJ,QAAQ,CAAC,IAAA;AAAA,KACX,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,kBAAA,CAAmB,WAAc,GAAA,wBAAA,CAAA;AACjC,EAAA,eAAA,CAAgB,WAAc,GAAA,qBAAA,CAAA;AAC9B,EAAA,kBAAA,CAAmB,WAAc,GAAA,wBAAA,CAAA;AACnC;;;;"}
@@ -32,11 +32,11 @@ const CommentLink = react.forwardRef(
32
32
  }
33
33
  );
34
34
  const defaultBodyComponents = {
35
- Mention: ({ userId }) => {
35
+ Mention: ({ mention }) => {
36
36
  return /* @__PURE__ */ jsxRuntime.jsxs(CommentMention, {
37
37
  children: [
38
38
  constants.MENTION_CHARACTER,
39
- userId
39
+ mention.id
40
40
  ]
41
41
  });
42
42
  },
@@ -68,8 +68,9 @@ const CommentBody = react.forwardRef(
68
68
  style: { minHeight: "1lh" },
69
69
  children: block.children.map((inline, index2) => {
70
70
  if (utils.isCommentBodyMention(inline)) {
71
- return inline.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, {
72
- userId: inline.id
71
+ const { type: _, ...mention } = inline;
72
+ return mention.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, {
73
+ mention
73
74
  }, index2) : null;
74
75
  }
75
76
  if (utils.isCommentBodyLink(inline)) {