@liveblocks/react-ui 3.2.1 → 3.3.1

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 (56) hide show
  1. package/dist/_private/index.cjs +4 -2
  2. package/dist/_private/index.cjs.map +1 -1
  3. package/dist/_private/index.d.cts +100 -33
  4. package/dist/_private/index.d.ts +100 -33
  5. package/dist/_private/index.js +3 -2
  6. package/dist/_private/index.js.map +1 -1
  7. package/dist/components/AiChat.cjs +11 -9
  8. package/dist/components/AiChat.cjs.map +1 -1
  9. package/dist/components/AiChat.js +12 -10
  10. package/dist/components/AiChat.js.map +1 -1
  11. package/dist/components/Composer.cjs +1 -1
  12. package/dist/components/Composer.cjs.map +1 -1
  13. package/dist/components/Composer.js +1 -1
  14. package/dist/components/Composer.js.map +1 -1
  15. package/dist/components/Thread.cjs +58 -0
  16. package/dist/components/Thread.cjs.map +1 -1
  17. package/dist/components/Thread.js +59 -1
  18. package/dist/components/Thread.js.map +1 -1
  19. package/dist/components/internal/AiComposer.cjs +132 -0
  20. package/dist/components/internal/AiComposer.cjs.map +1 -0
  21. package/dist/components/internal/AiComposer.js +130 -0
  22. package/dist/components/internal/AiComposer.js.map +1 -0
  23. package/dist/components/internal/Button.cjs.map +1 -1
  24. package/dist/components/internal/Button.js.map +1 -1
  25. package/dist/index.cjs.map +1 -1
  26. package/dist/index.d.cts +113 -11
  27. package/dist/index.d.ts +113 -11
  28. package/dist/index.js.map +1 -1
  29. package/dist/overrides.cjs +4 -3
  30. package/dist/overrides.cjs.map +1 -1
  31. package/dist/overrides.js +4 -3
  32. package/dist/overrides.js.map +1 -1
  33. package/dist/primitives/AiComposer/contexts.cjs +24 -0
  34. package/dist/primitives/AiComposer/contexts.cjs.map +1 -0
  35. package/dist/primitives/AiComposer/contexts.js +19 -0
  36. package/dist/primitives/AiComposer/contexts.js.map +1 -0
  37. package/dist/primitives/AiComposer/index.cjs +348 -0
  38. package/dist/primitives/AiComposer/index.cjs.map +1 -0
  39. package/dist/primitives/AiComposer/index.js +340 -0
  40. package/dist/primitives/AiComposer/index.js.map +1 -0
  41. package/dist/primitives/index.d.cts +8 -1
  42. package/dist/primitives/index.d.ts +8 -1
  43. package/dist/version.cjs +1 -1
  44. package/dist/version.js +1 -1
  45. package/package.json +4 -4
  46. package/src/styles/index.css +36 -10
  47. package/styles.css +1 -1
  48. package/styles.css.map +1 -1
  49. package/dist/components/internal/AiChatComposer.cjs +0 -161
  50. package/dist/components/internal/AiChatComposer.cjs.map +0 -1
  51. package/dist/components/internal/AiChatComposer.js +0 -159
  52. package/dist/components/internal/AiChatComposer.js.map +0 -1
  53. package/dist/primitives/AiChatComposer/index.cjs +0 -202
  54. package/dist/primitives/AiChatComposer/index.cjs.map +0 -1
  55. package/dist/primitives/AiChatComposer/index.js +0 -195
  56. package/dist/primitives/AiChatComposer/index.js.map +0 -1
@@ -0,0 +1,132 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react$1 = require('@liveblocks/react');
5
+ var react = require('react');
6
+ var Send = require('../../icons/Send.cjs');
7
+ var Stop = require('../../icons/Stop.cjs');
8
+ var overrides = require('../../overrides.cjs');
9
+ var index = require('../../primitives/AiComposer/index.cjs');
10
+ var contexts = require('../../primitives/AiComposer/contexts.cjs');
11
+ var cn = require('../../utils/cn.cjs');
12
+ var Button = require('./Button.cjs');
13
+ var Tooltip = require('./Tooltip.cjs');
14
+ var TooltipPrimitive = require('@radix-ui/react-tooltip');
15
+
16
+ function AiComposerAction({
17
+ overrides: overrides$1
18
+ }) {
19
+ const { canAbort } = contexts.useAiComposer();
20
+ const $ = overrides.useOverrides(overrides$1);
21
+ const preventDefault = react.useCallback((event) => {
22
+ event.preventDefault();
23
+ }, []);
24
+ const stopPropagation = react.useCallback((event) => {
25
+ event.stopPropagation();
26
+ }, []);
27
+ return canAbort ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
28
+ content: $.AI_COMPOSER_ABORT,
29
+ children: /* @__PURE__ */ jsxRuntime.jsx(index.AiComposerAbort, {
30
+ asChild: true,
31
+ children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
32
+ onPointerDown: preventDefault,
33
+ onClick: stopPropagation,
34
+ className: "lb-ai-composer-action",
35
+ variant: "secondary",
36
+ "aria-label": $.AI_COMPOSER_ABORT,
37
+ icon: /* @__PURE__ */ jsxRuntime.jsx(Stop.StopIcon, {})
38
+ })
39
+ })
40
+ }) : /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
41
+ content: $.AI_COMPOSER_SEND,
42
+ shortcut: "Enter",
43
+ children: /* @__PURE__ */ jsxRuntime.jsx(index.AiComposerSubmit, {
44
+ asChild: true,
45
+ children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
46
+ onPointerDown: preventDefault,
47
+ onClick: stopPropagation,
48
+ className: "lb-ai-composer-action",
49
+ variant: "primary",
50
+ "aria-label": $.AI_COMPOSER_SEND,
51
+ icon: /* @__PURE__ */ jsxRuntime.jsx(Send.SendIcon, {})
52
+ })
53
+ })
54
+ });
55
+ }
56
+ const AiComposer = react.forwardRef(
57
+ ({
58
+ defaultValue,
59
+ onComposerSubmit,
60
+ disabled,
61
+ autoFocus,
62
+ overrides: overrides$1,
63
+ className,
64
+ chatId,
65
+ knowledge: localKnowledge,
66
+ branchId,
67
+ copilotId,
68
+ stream = true,
69
+ onComposerSubmitted,
70
+ ...props
71
+ }, forwardedRef) => {
72
+ const $ = overrides.useOverrides(overrides$1);
73
+ const sendAiMessage = react$1.useSendAiMessage(chatId, {
74
+ stream,
75
+ copilotId,
76
+ knowledge: localKnowledge
77
+ });
78
+ const handleComposerSubmit = react.useCallback(
79
+ (message, event) => {
80
+ onComposerSubmit?.(message, event);
81
+ if (event.isDefaultPrevented())
82
+ return;
83
+ const newMessage = sendAiMessage(message.text);
84
+ onComposerSubmitted?.(newMessage);
85
+ },
86
+ [onComposerSubmit, sendAiMessage, onComposerSubmitted]
87
+ );
88
+ return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
89
+ children: /* @__PURE__ */ jsxRuntime.jsx(index.AiComposerForm, {
90
+ className: cn.cn(
91
+ "lb-root lb-ai-composer lb-ai-composer-form",
92
+ className
93
+ ),
94
+ dir: $.dir,
95
+ ...props,
96
+ disabled,
97
+ ref: forwardedRef,
98
+ onComposerSubmit: handleComposerSubmit,
99
+ chatId,
100
+ branchId,
101
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
102
+ className: "lb-ai-composer-editor-container",
103
+ children: [
104
+ /* @__PURE__ */ jsxRuntime.jsx(index.Editor, {
105
+ autoFocus,
106
+ className: "lb-ai-composer-editor",
107
+ placeholder: $.AI_COMPOSER_PLACEHOLDER,
108
+ defaultValue
109
+ }),
110
+ /* @__PURE__ */ jsxRuntime.jsxs("div", {
111
+ className: "lb-ai-composer-footer",
112
+ children: [
113
+ /* @__PURE__ */ jsxRuntime.jsx("div", {
114
+ className: "lb-ai-composer-editor-actions"
115
+ }),
116
+ /* @__PURE__ */ jsxRuntime.jsx("div", {
117
+ className: "lb-ai-composer-actions",
118
+ children: /* @__PURE__ */ jsxRuntime.jsx(AiComposerAction, {
119
+ overrides: overrides$1
120
+ })
121
+ })
122
+ ]
123
+ })
124
+ ]
125
+ })
126
+ })
127
+ });
128
+ }
129
+ );
130
+
131
+ exports.AiComposer = AiComposer;
132
+ //# sourceMappingURL=AiComposer.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AiComposer.cjs","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n type AiChatMessage,\n type AiKnowledgeSource,\n type CopilotId,\n type MessageId,\n} from \"@liveblocks/core\";\nimport {\n useSendAiMessage,\n type UseSendAiMessageOptions,\n} from \"@liveblocks/react\";\nimport {\n type ComponentProps,\n type FormEvent,\n forwardRef,\n type SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n type AiComposerOverrides,\n type GlobalOverrides,\n useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n AiComposerEditorProps,\n AiComposerFormProps,\n AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps\n extends Omit<ComponentProps<\"form\">, \"defaultValue\"> {\n /**\n * The composer's initial value.\n */\n defaultValue?: string;\n\n /**\n * The event handler called when the composer is submitted.\n */\n onComposerSubmit?: (\n message: AiComposerSubmitMessage,\n event: FormEvent<HTMLFormElement>\n ) => void;\n\n /**\n * The event handler called after the composer is submitted.\n *\n * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n */\n onComposerSubmitted?: (message: AiChatMessage) => void;\n\n /**\n * Whether the composer is disabled.\n */\n disabled?: AiComposerFormProps[\"disabled\"];\n\n /**\n * Whether to focus the composer on mount.\n */\n autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n /**\n * Override the component's strings.\n */\n overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n /**\n * The ID of the chat the composer belongs to.\n */\n chatId: string;\n\n /**\n * The ID of the copilot to use to send the message.\n */\n copilotId?: CopilotId;\n\n /**\n * @internal\n */\n knowledge?: AiKnowledgeSource[];\n\n /**\n * @internal\n */\n branchId?: MessageId;\n\n /**\n * @internal\n */\n stream?: boolean;\n}\n\nfunction AiComposerAction({\n overrides,\n}: {\n overrides?: AiComposerProps[\"overrides\"];\n}) {\n const { canAbort } = useAiComposer();\n const $ = useOverrides(overrides);\n\n const preventDefault = useCallback((event: SyntheticEvent) => {\n event.preventDefault();\n }, []);\n\n const stopPropagation = useCallback((event: SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return canAbort ? (\n <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n <AiComposerPrimitive.Abort asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"secondary\"\n aria-label={$.AI_COMPOSER_ABORT}\n icon={<StopIcon />}\n />\n </AiComposerPrimitive.Abort>\n </ShortcutTooltip>\n ) : (\n <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n <AiComposerPrimitive.Submit asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"primary\"\n aria-label={$.AI_COMPOSER_SEND}\n icon={<SendIcon />}\n />\n </AiComposerPrimitive.Submit>\n </ShortcutTooltip>\n );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n (\n {\n defaultValue,\n onComposerSubmit,\n disabled,\n autoFocus,\n overrides,\n className,\n chatId,\n knowledge: localKnowledge,\n branchId,\n copilotId,\n stream = true,\n onComposerSubmitted,\n ...props\n },\n forwardedRef\n ) => {\n const $ = useOverrides(overrides);\n const sendAiMessage = useSendAiMessage(chatId, {\n stream,\n copilotId,\n\n // TODO: We shouldn't need to pass knowledge from AiChat to AiComposer\n // to useSendAiMessage, ideally it would be attached to a chat ID\n // behind the scenes inside AiChat.\n knowledge: localKnowledge,\n } as UseSendAiMessageOptions);\n\n const handleComposerSubmit = useCallback(\n (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n onComposerSubmit?.(message, event);\n\n if (event.isDefaultPrevented()) return;\n\n const newMessage = sendAiMessage(message.text);\n\n onComposerSubmitted?.(newMessage);\n },\n [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n );\n\n return (\n <TooltipProvider>\n <AiComposerPrimitive.Form\n className={cn(\n \"lb-root lb-ai-composer lb-ai-composer-form\",\n className\n )}\n dir={$.dir}\n {...props}\n disabled={disabled}\n ref={forwardedRef}\n onComposerSubmit={handleComposerSubmit}\n chatId={chatId}\n branchId={branchId}\n >\n <div className=\"lb-ai-composer-editor-container\">\n <AiComposerPrimitive.Editor\n autoFocus={autoFocus}\n className=\"lb-ai-composer-editor\"\n placeholder={$.AI_COMPOSER_PLACEHOLDER}\n defaultValue={defaultValue}\n />\n\n <div className=\"lb-ai-composer-footer\">\n <div className=\"lb-ai-composer-editor-actions\">\n {/* No actions for now but it makes sense to keep the DOM structure */}\n </div>\n\n <div className=\"lb-ai-composer-actions\">\n <AiComposerAction overrides={overrides} />\n </div>\n </div>\n </div>\n </AiComposerPrimitive.Form>\n </TooltipProvider>\n );\n }\n);\n"],"names":["overrides","useAiComposer","useOverrides","useCallback","jsx","ShortcutTooltip","AiComposerPrimitive.Abort","Button","StopIcon","AiComposerPrimitive.Submit","SendIcon","forwardRef","useSendAiMessage","TooltipProvider","AiComposerPrimitive.Form","cn","jsxs","AiComposerPrimitive.Editor"],"mappings":"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"}
@@ -0,0 +1,130 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import { useSendAiMessage } from '@liveblocks/react';
3
+ import { useCallback, forwardRef } from 'react';
4
+ import { SendIcon } from '../../icons/Send.js';
5
+ import { StopIcon } from '../../icons/Stop.js';
6
+ import { useOverrides } from '../../overrides.js';
7
+ import { AiComposerAbort, AiComposerSubmit, AiComposerForm, Editor as AiComposerEditor } from '../../primitives/AiComposer/index.js';
8
+ import { useAiComposer } from '../../primitives/AiComposer/contexts.js';
9
+ import { cn } from '../../utils/cn.js';
10
+ import { Button } from './Button.js';
11
+ import { ShortcutTooltip } from './Tooltip.js';
12
+ import { TooltipProvider } from '@radix-ui/react-tooltip';
13
+
14
+ function AiComposerAction({
15
+ overrides
16
+ }) {
17
+ const { canAbort } = useAiComposer();
18
+ const $ = useOverrides(overrides);
19
+ const preventDefault = useCallback((event) => {
20
+ event.preventDefault();
21
+ }, []);
22
+ const stopPropagation = useCallback((event) => {
23
+ event.stopPropagation();
24
+ }, []);
25
+ return canAbort ? /* @__PURE__ */ jsx(ShortcutTooltip, {
26
+ content: $.AI_COMPOSER_ABORT,
27
+ children: /* @__PURE__ */ jsx(AiComposerAbort, {
28
+ asChild: true,
29
+ children: /* @__PURE__ */ jsx(Button, {
30
+ onPointerDown: preventDefault,
31
+ onClick: stopPropagation,
32
+ className: "lb-ai-composer-action",
33
+ variant: "secondary",
34
+ "aria-label": $.AI_COMPOSER_ABORT,
35
+ icon: /* @__PURE__ */ jsx(StopIcon, {})
36
+ })
37
+ })
38
+ }) : /* @__PURE__ */ jsx(ShortcutTooltip, {
39
+ content: $.AI_COMPOSER_SEND,
40
+ shortcut: "Enter",
41
+ children: /* @__PURE__ */ jsx(AiComposerSubmit, {
42
+ asChild: true,
43
+ children: /* @__PURE__ */ jsx(Button, {
44
+ onPointerDown: preventDefault,
45
+ onClick: stopPropagation,
46
+ className: "lb-ai-composer-action",
47
+ variant: "primary",
48
+ "aria-label": $.AI_COMPOSER_SEND,
49
+ icon: /* @__PURE__ */ jsx(SendIcon, {})
50
+ })
51
+ })
52
+ });
53
+ }
54
+ const AiComposer = forwardRef(
55
+ ({
56
+ defaultValue,
57
+ onComposerSubmit,
58
+ disabled,
59
+ autoFocus,
60
+ overrides,
61
+ className,
62
+ chatId,
63
+ knowledge: localKnowledge,
64
+ branchId,
65
+ copilotId,
66
+ stream = true,
67
+ onComposerSubmitted,
68
+ ...props
69
+ }, forwardedRef) => {
70
+ const $ = useOverrides(overrides);
71
+ const sendAiMessage = useSendAiMessage(chatId, {
72
+ stream,
73
+ copilotId,
74
+ knowledge: localKnowledge
75
+ });
76
+ const handleComposerSubmit = useCallback(
77
+ (message, event) => {
78
+ onComposerSubmit?.(message, event);
79
+ if (event.isDefaultPrevented())
80
+ return;
81
+ const newMessage = sendAiMessage(message.text);
82
+ onComposerSubmitted?.(newMessage);
83
+ },
84
+ [onComposerSubmit, sendAiMessage, onComposerSubmitted]
85
+ );
86
+ return /* @__PURE__ */ jsx(TooltipProvider, {
87
+ children: /* @__PURE__ */ jsx(AiComposerForm, {
88
+ className: cn(
89
+ "lb-root lb-ai-composer lb-ai-composer-form",
90
+ className
91
+ ),
92
+ dir: $.dir,
93
+ ...props,
94
+ disabled,
95
+ ref: forwardedRef,
96
+ onComposerSubmit: handleComposerSubmit,
97
+ chatId,
98
+ branchId,
99
+ children: /* @__PURE__ */ jsxs("div", {
100
+ className: "lb-ai-composer-editor-container",
101
+ children: [
102
+ /* @__PURE__ */ jsx(AiComposerEditor, {
103
+ autoFocus,
104
+ className: "lb-ai-composer-editor",
105
+ placeholder: $.AI_COMPOSER_PLACEHOLDER,
106
+ defaultValue
107
+ }),
108
+ /* @__PURE__ */ jsxs("div", {
109
+ className: "lb-ai-composer-footer",
110
+ children: [
111
+ /* @__PURE__ */ jsx("div", {
112
+ className: "lb-ai-composer-editor-actions"
113
+ }),
114
+ /* @__PURE__ */ jsx("div", {
115
+ className: "lb-ai-composer-actions",
116
+ children: /* @__PURE__ */ jsx(AiComposerAction, {
117
+ overrides
118
+ })
119
+ })
120
+ ]
121
+ })
122
+ ]
123
+ })
124
+ })
125
+ });
126
+ }
127
+ );
128
+
129
+ export { AiComposer };
130
+ //# sourceMappingURL=AiComposer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AiComposer.js","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n type AiChatMessage,\n type AiKnowledgeSource,\n type CopilotId,\n type MessageId,\n} from \"@liveblocks/core\";\nimport {\n useSendAiMessage,\n type UseSendAiMessageOptions,\n} from \"@liveblocks/react\";\nimport {\n type ComponentProps,\n type FormEvent,\n forwardRef,\n type SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n type AiComposerOverrides,\n type GlobalOverrides,\n useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n AiComposerEditorProps,\n AiComposerFormProps,\n AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps\n extends Omit<ComponentProps<\"form\">, \"defaultValue\"> {\n /**\n * The composer's initial value.\n */\n defaultValue?: string;\n\n /**\n * The event handler called when the composer is submitted.\n */\n onComposerSubmit?: (\n message: AiComposerSubmitMessage,\n event: FormEvent<HTMLFormElement>\n ) => void;\n\n /**\n * The event handler called after the composer is submitted.\n *\n * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n */\n onComposerSubmitted?: (message: AiChatMessage) => void;\n\n /**\n * Whether the composer is disabled.\n */\n disabled?: AiComposerFormProps[\"disabled\"];\n\n /**\n * Whether to focus the composer on mount.\n */\n autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n /**\n * Override the component's strings.\n */\n overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n /**\n * The ID of the chat the composer belongs to.\n */\n chatId: string;\n\n /**\n * The ID of the copilot to use to send the message.\n */\n copilotId?: CopilotId;\n\n /**\n * @internal\n */\n knowledge?: AiKnowledgeSource[];\n\n /**\n * @internal\n */\n branchId?: MessageId;\n\n /**\n * @internal\n */\n stream?: boolean;\n}\n\nfunction AiComposerAction({\n overrides,\n}: {\n overrides?: AiComposerProps[\"overrides\"];\n}) {\n const { canAbort } = useAiComposer();\n const $ = useOverrides(overrides);\n\n const preventDefault = useCallback((event: SyntheticEvent) => {\n event.preventDefault();\n }, []);\n\n const stopPropagation = useCallback((event: SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return canAbort ? (\n <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n <AiComposerPrimitive.Abort asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"secondary\"\n aria-label={$.AI_COMPOSER_ABORT}\n icon={<StopIcon />}\n />\n </AiComposerPrimitive.Abort>\n </ShortcutTooltip>\n ) : (\n <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n <AiComposerPrimitive.Submit asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"primary\"\n aria-label={$.AI_COMPOSER_SEND}\n icon={<SendIcon />}\n />\n </AiComposerPrimitive.Submit>\n </ShortcutTooltip>\n );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n (\n {\n defaultValue,\n onComposerSubmit,\n disabled,\n autoFocus,\n overrides,\n className,\n chatId,\n knowledge: localKnowledge,\n branchId,\n copilotId,\n stream = true,\n onComposerSubmitted,\n ...props\n },\n forwardedRef\n ) => {\n const $ = useOverrides(overrides);\n const sendAiMessage = useSendAiMessage(chatId, {\n stream,\n copilotId,\n\n // TODO: We shouldn't need to pass knowledge from AiChat to AiComposer\n // to useSendAiMessage, ideally it would be attached to a chat ID\n // behind the scenes inside AiChat.\n knowledge: localKnowledge,\n } as UseSendAiMessageOptions);\n\n const handleComposerSubmit = useCallback(\n (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n onComposerSubmit?.(message, event);\n\n if (event.isDefaultPrevented()) return;\n\n const newMessage = sendAiMessage(message.text);\n\n onComposerSubmitted?.(newMessage);\n },\n [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n );\n\n return (\n <TooltipProvider>\n <AiComposerPrimitive.Form\n className={cn(\n \"lb-root lb-ai-composer lb-ai-composer-form\",\n className\n )}\n dir={$.dir}\n {...props}\n disabled={disabled}\n ref={forwardedRef}\n onComposerSubmit={handleComposerSubmit}\n chatId={chatId}\n branchId={branchId}\n >\n <div className=\"lb-ai-composer-editor-container\">\n <AiComposerPrimitive.Editor\n autoFocus={autoFocus}\n className=\"lb-ai-composer-editor\"\n placeholder={$.AI_COMPOSER_PLACEHOLDER}\n defaultValue={defaultValue}\n />\n\n <div className=\"lb-ai-composer-footer\">\n <div className=\"lb-ai-composer-editor-actions\">\n {/* No actions for now but it makes sense to keep the DOM structure */}\n </div>\n\n <div className=\"lb-ai-composer-actions\">\n <AiComposerAction overrides={overrides} />\n </div>\n </div>\n </div>\n </AiComposerPrimitive.Form>\n </TooltipProvider>\n );\n }\n);\n"],"names":["AiComposerPrimitive.Abort","AiComposerPrimitive.Submit","AiComposerPrimitive.Form","AiComposerPrimitive.Editor"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.cjs","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n variant?:\n | \"default\"\n | \"toolbar\"\n | \"outline\"\n | \"primary\"\n | \"secondary\"\n | \"destructive\";\n size?: \"default\" | \"large\";\n disableable?: boolean;\n icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n HTMLButtonElement,\n Omit<ButtonProps, \"icon\">\n>(\n (\n {\n variant = \"default\",\n size = \"default\",\n disableable = true,\n className,\n children,\n ...props\n },\n forwardedRef\n ) => {\n return (\n <button\n type=\"button\"\n className={cn(\n \"lb-button\",\n !disableable && \"lb-button:non-disableable\",\n className\n )}\n data-variant={variant}\n data-size={size}\n {...props}\n ref={forwardedRef}\n >\n {children}\n </button>\n );\n }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ icon, children, ...props }, forwardedRef) => {\n return (\n <CustomButton {...props} ref={forwardedRef}>\n {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n {children ? <span className=\"lb-button-label\">{children}</span> : null}\n </CustomButton>\n );\n }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ icon, children, className, ...props }, forwardedRef) => {\n return (\n <CustomButton\n {...props}\n type=\"button\"\n className={cn(\"lb-select-button\", className)}\n ref={forwardedRef}\n >\n {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n {children ? <span className=\"lb-button-label\">{children}</span> : null}\n <span className=\"lb-select-button-chevron\">\n <ChevronDownIcon />\n </span>\n </CustomButton>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;AAqBO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AACsC;AACtC;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;;;"}
1
+ {"version":3,"file":"Button.cjs","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n variant?:\n | \"default\"\n | \"toolbar\"\n | \"outline\"\n | \"ghost\"\n | \"primary\"\n | \"secondary\"\n | \"destructive\";\n size?: \"default\" | \"large\";\n disableable?: boolean;\n icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n HTMLButtonElement,\n Omit<ButtonProps, \"icon\">\n>(\n (\n {\n variant = \"default\",\n size = \"default\",\n disableable = true,\n className,\n children,\n ...props\n },\n forwardedRef\n ) => {\n return (\n <button\n type=\"button\"\n className={cn(\n \"lb-button\",\n !disableable && \"lb-button:non-disableable\",\n className\n )}\n data-variant={variant}\n data-size={size}\n {...props}\n ref={forwardedRef}\n >\n {children}\n </button>\n );\n }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ icon, children, ...props }, forwardedRef) => {\n return (\n <CustomButton {...props} ref={forwardedRef}>\n {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n {children ? <span className=\"lb-button-label\">{children}</span> : null}\n </CustomButton>\n );\n }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ icon, children, className, ...props }, forwardedRef) => {\n return (\n <CustomButton\n {...props}\n type=\"button\"\n className={cn(\"lb-select-button\", className)}\n ref={forwardedRef}\n >\n {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n {children ? <span className=\"lb-button-label\">{children}</span> : null}\n <span className=\"lb-select-button-chevron\">\n <ChevronDownIcon />\n </span>\n </CustomButton>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;AAsBO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AACsC;AACtC;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n variant?:\n | \"default\"\n | \"toolbar\"\n | \"outline\"\n | \"primary\"\n | \"secondary\"\n | \"destructive\";\n size?: \"default\" | \"large\";\n disableable?: boolean;\n icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n HTMLButtonElement,\n Omit<ButtonProps, \"icon\">\n>(\n (\n {\n variant = \"default\",\n size = \"default\",\n disableable = true,\n className,\n children,\n ...props\n },\n forwardedRef\n ) => {\n return (\n <button\n type=\"button\"\n className={cn(\n \"lb-button\",\n !disableable && \"lb-button:non-disableable\",\n className\n )}\n data-variant={variant}\n data-size={size}\n {...props}\n ref={forwardedRef}\n >\n {children}\n </button>\n );\n }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ icon, children, ...props }, forwardedRef) => {\n return (\n <CustomButton {...props} ref={forwardedRef}>\n {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n {children ? <span className=\"lb-button-label\">{children}</span> : null}\n </CustomButton>\n );\n }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ icon, children, className, ...props }, forwardedRef) => {\n return (\n <CustomButton\n {...props}\n type=\"button\"\n className={cn(\"lb-select-button\", className)}\n ref={forwardedRef}\n >\n {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n {children ? <span className=\"lb-button-label\">{children}</span> : null}\n <span className=\"lb-select-button-chevron\">\n <ChevronDownIcon />\n </span>\n </CustomButton>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;AAqBO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AACsC;AACtC;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;"}
1
+ {"version":3,"file":"Button.js","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n variant?:\n | \"default\"\n | \"toolbar\"\n | \"outline\"\n | \"ghost\"\n | \"primary\"\n | \"secondary\"\n | \"destructive\";\n size?: \"default\" | \"large\";\n disableable?: boolean;\n icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n HTMLButtonElement,\n Omit<ButtonProps, \"icon\">\n>(\n (\n {\n variant = \"default\",\n size = \"default\",\n disableable = true,\n className,\n children,\n ...props\n },\n forwardedRef\n ) => {\n return (\n <button\n type=\"button\"\n className={cn(\n \"lb-button\",\n !disableable && \"lb-button:non-disableable\",\n className\n )}\n data-variant={variant}\n data-size={size}\n {...props}\n ref={forwardedRef}\n >\n {children}\n </button>\n );\n }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ icon, children, ...props }, forwardedRef) => {\n return (\n <CustomButton {...props} ref={forwardedRef}>\n {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n {children ? <span className=\"lb-button-label\">{children}</span> : null}\n </CustomButton>\n );\n }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ icon, children, className, ...props }, forwardedRef) => {\n return (\n <CustomButton\n {...props}\n type=\"button\"\n className={cn(\"lb-select-button\", className)}\n ref={forwardedRef}\n >\n {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n {children ? <span className=\"lb-button-label\">{children}</span> : null}\n <span className=\"lb-select-button-chevron\">\n <ChevronDownIcon />\n </span>\n </CustomButton>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;AAsBO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AACsC;AACtC;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type {\n AiChatComponents,\n AiChatComponentsEmptyProps,\n AiChatComponentsLoadingProps,\n AiChatProps,\n} from \"./components/AiChat\";\nexport { AiChat } from \"./components/AiChat\";\nexport type { AiToolIconProps, AiToolProps } from \"./components/AiTool\";\nexport { AiTool } from \"./components/AiTool\";\nexport type { CommentProps } from \"./components/Comment\";\nexport { Comment } from \"./components/Comment\";\nexport type { ComposerProps } from \"./components/Composer\";\nexport { Composer } from \"./components/Composer\";\nexport type { HistoryVersionSummaryProps } from \"./components/HistoryVersionSummary\";\nexport { HistoryVersionSummary } from \"./components/HistoryVersionSummary\";\nexport type { HistoryVersionSummaryListProps } from \"./components/HistoryVersionSummaryList\";\nexport { HistoryVersionSummaryList } from \"./components/HistoryVersionSummaryList\";\nexport type {\n InboxNotificationAvatarProps,\n InboxNotificationCustomKindProps,\n InboxNotificationCustomProps,\n InboxNotificationIconProps,\n InboxNotificationInspectorProps,\n InboxNotificationProps,\n InboxNotificationTextMentionKindProps,\n InboxNotificationTextMentionProps,\n InboxNotificationThreadKindProps,\n InboxNotificationThreadProps,\n} from \"./components/InboxNotification\";\nexport { InboxNotification } from \"./components/InboxNotification\";\nexport type { InboxNotificationListProps } from \"./components/InboxNotificationList\";\nexport { InboxNotificationList } from \"./components/InboxNotificationList\";\nexport type { ThreadProps } from \"./components/Thread\";\nexport { Thread } from \"./components/Thread\";\nexport { LiveblocksUiConfig } from \"./config\";\nexport * as Icon from \"./icon\";\nexport type {\n CommentOverrides,\n ComposerOverrides,\n GlobalOverrides,\n InboxNotificationOverrides,\n LocalizationOverrides,\n Overrides,\n ThreadOverrides,\n} from \"./overrides\";\nexport { useOverrides } from \"./overrides\";\nexport type { ComposerSubmitComment } from \"./primitives\";\nexport type {\n CommentAttachmentArgs,\n ComposerBodyMark,\n ComposerBodyMarks,\n} from \"./types\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type {\n AiChatComponents,\n AiChatComponentsEmptyProps,\n AiChatComponentsLoadingProps,\n AiChatProps,\n} from \"./components/AiChat\";\nexport { AiChat } from \"./components/AiChat\";\nexport type { AiToolIconProps, AiToolProps } from \"./components/AiTool\";\nexport { AiTool } from \"./components/AiTool\";\nexport type { CommentProps } from \"./components/Comment\";\nexport { Comment } from \"./components/Comment\";\nexport type { ComposerProps } from \"./components/Composer\";\nexport { Composer } from \"./components/Composer\";\nexport type { HistoryVersionSummaryProps } from \"./components/HistoryVersionSummary\";\nexport { HistoryVersionSummary } from \"./components/HistoryVersionSummary\";\nexport type { HistoryVersionSummaryListProps } from \"./components/HistoryVersionSummaryList\";\nexport { HistoryVersionSummaryList } from \"./components/HistoryVersionSummaryList\";\nexport type {\n InboxNotificationAvatarProps,\n InboxNotificationCustomKindProps,\n InboxNotificationCustomProps,\n InboxNotificationIconProps,\n InboxNotificationInspectorProps,\n InboxNotificationProps,\n InboxNotificationTextMentionKindProps,\n InboxNotificationTextMentionProps,\n InboxNotificationThreadKindProps,\n InboxNotificationThreadProps,\n} from \"./components/InboxNotification\";\nexport { InboxNotification } from \"./components/InboxNotification\";\nexport type { InboxNotificationListProps } from \"./components/InboxNotificationList\";\nexport { InboxNotificationList } from \"./components/InboxNotificationList\";\nexport type { ThreadProps } from \"./components/Thread\";\nexport { Thread } from \"./components/Thread\";\nexport { LiveblocksUiConfig } from \"./config\";\nexport * as Icon from \"./icon\";\nexport type {\n CommentOverrides,\n ComposerOverrides,\n GlobalOverrides,\n InboxNotificationOverrides,\n LocalizationOverrides,\n Overrides,\n ThreadOverrides,\n} from \"./overrides\";\nexport { useOverrides } from \"./overrides\";\nexport type {\n AiComposerSubmitMessage,\n ComposerSubmitComment,\n} from \"./primitives\";\nexport type {\n CommentAttachmentArgs,\n ComposerBodyMark,\n ComposerBodyMarks,\n} from \"./types\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;;;;;;;"}
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react from 'react';
2
- import { ComponentType, ComponentPropsWithoutRef, ElementType, ReactNode, ComponentProps, FormEvent, RefAttributes, MouseEvent, PropsWithChildren } from 'react';
3
- import { CommentAttachment, Relax, AiKnowledgeSource, AiOpaqueToolDefinition, AiToolTypePack, JsonObject, AiToolExecuteCallback, NoInfr, CommentBody, MentionData, BaseMetadata, DM, CommentData, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD, ThreadData } from '@liveblocks/core';
2
+ import { ComponentType, ComponentPropsWithoutRef, ElementType, ReactNode, FormEvent, ComponentProps, RefAttributes, MouseEvent, PropsWithChildren } from 'react';
3
+ import { CommentAttachment, Relax, CopilotId, AiKnowledgeSource, AiOpaqueToolDefinition, AiToolTypePack, JsonObject, AiToolExecuteCallback, NoInfr, CommentBody, MentionData, BaseMetadata, DM, CommentData, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD, ThreadData } from '@liveblocks/core';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
 
6
6
  interface GlobalComponents {
@@ -83,10 +83,10 @@ interface AiToolConfirmationOverrides {
83
83
  AI_TOOL_CONFIRMATION_CONFIRM: string;
84
84
  AI_TOOL_CONFIRMATION_CANCEL: string;
85
85
  }
86
- interface AiChatComposerOverrides {
87
- AI_CHAT_COMPOSER_PLACEHOLDER: string;
88
- AI_CHAT_COMPOSER_SEND: string;
89
- AI_CHAT_COMPOSER_ABORT: string;
86
+ interface AiComposerOverrides {
87
+ AI_COMPOSER_PLACEHOLDER: string;
88
+ AI_COMPOSER_SEND: string;
89
+ AI_COMPOSER_ABORT: string;
90
90
  }
91
91
  interface AiChatMessageOverrides {
92
92
  AI_CHAT_MESSAGE_DELETED: string;
@@ -103,6 +103,7 @@ interface ThreadOverrides {
103
103
  THREAD_UNSUBSCRIBE: string;
104
104
  THREAD_NEW_INDICATOR: string;
105
105
  THREAD_NEW_INDICATOR_DESCRIPTION: string;
106
+ THREAD_SHOW_MORE_COMMENTS: (count: number) => string;
106
107
  THREAD_COMPOSER_PLACEHOLDER: string;
107
108
  THREAD_COMPOSER_SEND: string;
108
109
  }
@@ -120,7 +121,7 @@ interface HistoryVersionPreviewOverrides {
120
121
  HISTORY_VERSION_PREVIEW_EMPTY: ReactNode;
121
122
  HISTORY_VERSION_PREVIEW_ERROR: (error: Error) => ReactNode;
122
123
  }
123
- type Overrides = LocalizationOverrides & GlobalOverrides & ComposerOverrides & CommentOverrides & ThreadOverrides & InboxNotificationOverrides & HistoryVersionPreviewOverrides & AiChatComposerOverrides & AiChatMessageOverrides & AiChatOverrides & AiToolConfirmationOverrides;
124
+ type Overrides = LocalizationOverrides & GlobalOverrides & ComposerOverrides & CommentOverrides & ThreadOverrides & InboxNotificationOverrides & HistoryVersionPreviewOverrides & AiComposerOverrides & AiChatMessageOverrides & AiChatOverrides & AiToolConfirmationOverrides;
124
125
  declare function useOverrides(overrides?: Partial<Overrides>): Overrides;
125
126
 
126
127
  type MarkdownComponents = {
@@ -386,6 +387,80 @@ interface MarkdownComponentsCodeBlockProps {
386
387
  language?: string;
387
388
  }
388
389
 
390
+ interface AiComposerSubmitMessage {
391
+ /**
392
+ * The submitted message text.
393
+ */
394
+ text: string;
395
+ }
396
+ interface AiComposerFormProps extends ComponentPropsWithSlot<"form"> {
397
+ /**
398
+ * The ID of the chat the composer belongs to.
399
+ */
400
+ chatId?: string;
401
+ /**
402
+ * The event handler called when the composer is submitted.
403
+ */
404
+ onComposerSubmit?: (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => Promise<void> | void;
405
+ /**
406
+ * Whether the composer is disabled.
407
+ */
408
+ disabled?: boolean;
409
+ }
410
+ interface AiComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "children"> {
411
+ /**
412
+ * The reading direction of the editor and related elements.
413
+ */
414
+ dir?: Direction;
415
+ /**
416
+ * The editor's initial value.
417
+ */
418
+ defaultValue?: string;
419
+ /**
420
+ * The text to display when the editor is empty.
421
+ */
422
+ placeholder?: string;
423
+ /**
424
+ * Whether the editor is disabled.
425
+ */
426
+ disabled?: boolean;
427
+ /**
428
+ * Whether to focus the editor on mount.
429
+ */
430
+ autoFocus?: boolean;
431
+ }
432
+
433
+ interface AiComposerProps extends Omit<ComponentProps<"form">, "defaultValue"> {
434
+ /**
435
+ * The composer's initial value.
436
+ */
437
+ defaultValue?: string;
438
+ /**
439
+ * The event handler called when the composer is submitted.
440
+ */
441
+ onComposerSubmit?: (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => void;
442
+ /**
443
+ * Whether the composer is disabled.
444
+ */
445
+ disabled?: AiComposerFormProps["disabled"];
446
+ /**
447
+ * Whether to focus the composer on mount.
448
+ */
449
+ autoFocus?: AiComposerEditorProps["autoFocus"];
450
+ /**
451
+ * Override the component's strings.
452
+ */
453
+ overrides?: Partial<GlobalOverrides & AiComposerOverrides>;
454
+ /**
455
+ * The ID of the chat the composer belongs to.
456
+ */
457
+ chatId: string;
458
+ /**
459
+ * The ID of the copilot to use to send the message.
460
+ */
461
+ copilotId?: CopilotId;
462
+ }
463
+
389
464
  type AiChatComponentsEmptyProps = {
390
465
  /**
391
466
  * The chat ID provided to the `AiChat` component.
@@ -425,14 +500,20 @@ interface AiChatProps extends ComponentProps<"div"> {
425
500
  */
426
501
  copilotId?: string;
427
502
  /**
428
- * The contextual knowledge to include in the chat. May be used by the assistant when generating responses.
429
- * Any knowledge you provide via this prop will be added to any already globally registered knowledge via <RegisterAiKnowledge />.
503
+ * The contextual knowledge to include in the chat. May be used by the
504
+ * assistant when generating responses. In addition to the knowledge passed
505
+ * in via this prop, the AiChat instance will also have access to any
506
+ * globally registered knowledge via <RegisterAiKnowledge />.
430
507
  */
431
508
  knowledge?: AiKnowledgeSource[];
432
509
  /**
433
510
  * Tool definitions to make available within this chat. May be used by the assistant when generating responses.
434
511
  */
435
512
  tools?: Record<string, AiOpaqueToolDefinition>;
513
+ /**
514
+ * The event handler called when the composer is submitted.
515
+ */
516
+ onComposerSubmit?: AiComposerProps["onComposerSubmit"];
436
517
  /**
437
518
  * The layout of the chat and its composer.
438
519
  */
@@ -440,7 +521,7 @@ interface AiChatProps extends ComponentProps<"div"> {
440
521
  /**
441
522
  * Override the component's strings.
442
523
  */
443
- overrides?: Partial<GlobalOverrides & AiChatMessageOverrides & AiChatComposerOverrides & AiChatOverrides>;
524
+ overrides?: Partial<GlobalOverrides & AiComposerOverrides & AiChatMessageOverrides & AiChatOverrides>;
444
525
  /**
445
526
  * Override the component's components.
446
527
  */
@@ -1174,6 +1255,27 @@ interface ThreadProps<M extends BaseMetadata = DM> extends ComponentPropsWithout
1174
1255
  * Whether to show the composer's formatting controls.
1175
1256
  */
1176
1257
  showComposerFormattingControls?: ComposerProps["showFormattingControls"];
1258
+ /**
1259
+ * The maximum number of comments to show.
1260
+ *
1261
+ * The first and last comments are always shown and by default if some comments
1262
+ * are hidden, only the first comment will be shown before the "show more" button
1263
+ * and after it will be shown all the newest comments to fit the limit set.
1264
+ *
1265
+ * It's possible to customize this by setting `maxVisibleComments` to an object:
1266
+ *
1267
+ * @example
1268
+ * // Only show the last comment, and all the older ones to fit the limit.
1269
+ * <Thread maxVisibleComments={{ max: 5, show: "oldest" }} />
1270
+ *
1271
+ * @example
1272
+ * // Show as many old comments as new ones to fit the limit.
1273
+ * <Thread maxVisibleComments={{ max: 5, show: "both" }} />
1274
+ */
1275
+ maxVisibleComments?: number | {
1276
+ max: number;
1277
+ show: "oldest" | "both" | "newest";
1278
+ };
1177
1279
  /**
1178
1280
  * Whether to blur the composer editor when the composer is submitted.
1179
1281
  */
@@ -1435,4 +1537,4 @@ declare namespace icon {
1435
1537
  };
1436
1538
  }
1437
1539
 
1438
- export { AiChat, AiChatComponents, AiChatComponentsEmptyProps, AiChatComponentsLoadingProps, AiChatProps, AiTool, AiToolIconProps, AiToolProps, Comment, CommentAttachmentArgs, CommentOverrides, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, icon as Icon, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationInspectorProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUiConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };
1540
+ export { AiChat, AiChatComponents, AiChatComponentsEmptyProps, AiChatComponentsLoadingProps, AiChatProps, AiComposerSubmitMessage, AiTool, AiToolIconProps, AiToolProps, Comment, CommentAttachmentArgs, CommentOverrides, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, icon as Icon, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationInspectorProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUiConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };