@liveblocks/react-ui 3.1.4 → 3.2.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.
- package/dist/_private/index.d.cts +279 -38
- package/dist/_private/index.d.ts +279 -38
- package/dist/components/AiChat.cjs +213 -63
- package/dist/components/AiChat.cjs.map +1 -1
- package/dist/components/AiChat.js +215 -65
- package/dist/components/AiChat.js.map +1 -1
- package/dist/components/Composer.cjs +2 -0
- package/dist/components/Composer.cjs.map +1 -1
- package/dist/components/Composer.js +2 -0
- package/dist/components/Composer.js.map +1 -1
- package/dist/components/Thread.cjs +2 -0
- package/dist/components/Thread.cjs.map +1 -1
- package/dist/components/Thread.js +2 -0
- package/dist/components/Thread.js.map +1 -1
- package/dist/components/internal/AiChatAssistantMessage.cjs +21 -15
- package/dist/components/internal/AiChatAssistantMessage.cjs.map +1 -1
- package/dist/components/internal/AiChatAssistantMessage.js +20 -14
- package/dist/components/internal/AiChatAssistantMessage.js.map +1 -1
- package/dist/components/internal/AiChatUserMessage.cjs +2 -1
- package/dist/components/internal/AiChatUserMessage.cjs.map +1 -1
- package/dist/components/internal/AiChatUserMessage.js +2 -1
- package/dist/components/internal/AiChatUserMessage.js.map +1 -1
- package/dist/components/internal/Prose.cjs +15 -7
- package/dist/components/internal/Prose.cjs.map +1 -1
- package/dist/components/internal/Prose.js +16 -8
- package/dist/components/internal/Prose.js.map +1 -1
- package/dist/index.d.cts +284 -5
- package/dist/index.d.ts +284 -5
- package/dist/primitives/Composer/index.cjs +5 -2
- package/dist/primitives/Composer/index.cjs.map +1 -1
- package/dist/primitives/Composer/index.js +5 -2
- package/dist/primitives/Composer/index.js.map +1 -1
- package/dist/primitives/Composer/utils.cjs +1 -2
- package/dist/primitives/Composer/utils.cjs.map +1 -1
- package/dist/primitives/Composer/utils.js +1 -2
- package/dist/primitives/Composer/utils.js.map +1 -1
- package/dist/primitives/Markdown.cjs +268 -336
- package/dist/primitives/Markdown.cjs.map +1 -1
- package/dist/primitives/Markdown.js +270 -338
- package/dist/primitives/Markdown.js.map +1 -1
- package/dist/primitives/index.d.cts +4 -0
- package/dist/primitives/index.d.ts +4 -0
- package/dist/utils/use-observable.cjs +2 -2
- package/dist/utils/use-observable.cjs.map +1 -1
- package/dist/utils/use-observable.js +1 -1
- package/dist/utils/use-observable.js.map +1 -1
- package/dist/utils/use-visible.cjs +8 -6
- package/dist/utils/use-visible.cjs.map +1 -1
- package/dist/utils/use-visible.js +7 -5
- package/dist/utils/use-visible.js.map +1 -1
- package/dist/version.cjs +1 -1
- package/dist/version.js +1 -1
- package/package.json +4 -4
- package/src/styles/constants.css +2 -2
- package/src/styles/index.css +15 -2
- package/styles/dark/attributes.css +1 -1
- package/styles/dark/media-query.css +1 -1
- package/styles.css +1 -1
- package/styles.css.map +1 -1
- package/dist/utils/use-latest.cjs +0 -14
- package/dist/utils/use-latest.cjs.map +0 -1
- package/dist/utils/use-latest.js +0 -12
- package/dist/utils/use-latest.js.map +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ComponentProps, ReactNode, ElementType, ComponentPropsWithoutRef, Ref, RefCallback, FormEvent
|
|
3
|
+
import { ComponentProps, ReactNode, ElementType, ComponentPropsWithoutRef, ComponentType, Ref, RefCallback, FormEvent } from 'react';
|
|
4
|
+
import { Relax, AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
|
|
4
5
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
5
6
|
export { TooltipProvider } from '@radix-ui/react-tooltip';
|
|
6
|
-
import { AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
|
|
7
7
|
|
|
8
8
|
interface AvatarProps extends ComponentProps<"div"> {
|
|
9
9
|
/**
|
|
@@ -38,14 +38,289 @@ interface ListProps extends ComponentPropsWithSlot<"span"> {
|
|
|
38
38
|
}
|
|
39
39
|
declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttributes<HTMLSpanElement>>;
|
|
40
40
|
|
|
41
|
+
interface GlobalComponents {
|
|
42
|
+
Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
type MarkdownComponents = {
|
|
46
|
+
/**
|
|
47
|
+
* The component used to render paragraphs.
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```md
|
|
51
|
+
* A paragraph.
|
|
52
|
+
*
|
|
53
|
+
* Another paragraph.
|
|
54
|
+
* ```
|
|
55
|
+
* ```tsx
|
|
56
|
+
* <Markdown
|
|
57
|
+
* components={{
|
|
58
|
+
* Paragraph: ({ children }) => <p className="...">{children}</p>
|
|
59
|
+
* }}
|
|
60
|
+
* />
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
63
|
+
Paragraph: ComponentType<MarkdownComponentsParagraphProps>;
|
|
64
|
+
/**
|
|
65
|
+
* The component used to render inline elements (bold, italic, strikethrough, and inline code).
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* ```md
|
|
69
|
+
* **Bold**, _italic_, ~~strikethrough~~, and `inline code`.
|
|
70
|
+
* ```
|
|
71
|
+
* ```tsx
|
|
72
|
+
* <Markdown
|
|
73
|
+
* components={{
|
|
74
|
+
* Inline: ({ type, children }) => {
|
|
75
|
+
* const Component = type;
|
|
76
|
+
* return <Component className="...">{children}</Component>;
|
|
77
|
+
* }
|
|
78
|
+
* }}
|
|
79
|
+
* />
|
|
80
|
+
* ```
|
|
81
|
+
*/
|
|
82
|
+
Inline: ComponentType<MarkdownComponentsInlineProps>;
|
|
83
|
+
/**
|
|
84
|
+
* The component used to render links.
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* ```md
|
|
88
|
+
* A [link](https://liveblocks.io).
|
|
89
|
+
* ```
|
|
90
|
+
* ```tsx
|
|
91
|
+
* <Markdown
|
|
92
|
+
* components={{
|
|
93
|
+
* Link: ({ href, children }) => <a href={href} className="...">{children}</a>
|
|
94
|
+
* }}
|
|
95
|
+
* />
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
Link: ComponentType<MarkdownComponentsLinkProps>;
|
|
99
|
+
/**
|
|
100
|
+
* The component used to render headings.
|
|
101
|
+
*
|
|
102
|
+
* @example
|
|
103
|
+
* ```md
|
|
104
|
+
* # Heading 1
|
|
105
|
+
* ## Heading 2
|
|
106
|
+
* ### Heading 3
|
|
107
|
+
* ```
|
|
108
|
+
* ```tsx
|
|
109
|
+
* <Markdown
|
|
110
|
+
* components={{
|
|
111
|
+
* Heading: ({ level, children }) => {
|
|
112
|
+
* const Heading = `h${level}` as const;
|
|
113
|
+
* return <Heading className="...">{children}</Heading>;
|
|
114
|
+
* }
|
|
115
|
+
* }}
|
|
116
|
+
* />
|
|
117
|
+
* ```
|
|
118
|
+
*/
|
|
119
|
+
Heading: ComponentType<MarkdownComponentsHeadingProps>;
|
|
120
|
+
/**
|
|
121
|
+
* The component used to render blockquotes.
|
|
122
|
+
*
|
|
123
|
+
* @example
|
|
124
|
+
* ```md
|
|
125
|
+
* > A blockquote.
|
|
126
|
+
* ```
|
|
127
|
+
* ```tsx
|
|
128
|
+
* <Markdown
|
|
129
|
+
* components={{
|
|
130
|
+
* Blockquote: ({ children }) => <blockquote className="...">{children}</blockquote>
|
|
131
|
+
* }}
|
|
132
|
+
* />
|
|
133
|
+
* ```
|
|
134
|
+
*/
|
|
135
|
+
Blockquote: ComponentType<MarkdownComponentsBlockquoteProps>;
|
|
136
|
+
/**
|
|
137
|
+
* The component used to render code blocks.
|
|
138
|
+
*
|
|
139
|
+
* @example
|
|
140
|
+
* ```md
|
|
141
|
+
* ```javascript
|
|
142
|
+
* const a = 1;
|
|
143
|
+
* ```
|
|
144
|
+
* ```
|
|
145
|
+
* ```tsx
|
|
146
|
+
* <Markdown
|
|
147
|
+
* components={{
|
|
148
|
+
* CodeBlock: ({ language, code }) => (
|
|
149
|
+
* <pre data-language={language} className="...">
|
|
150
|
+
* <code className="...">{code}</code>
|
|
151
|
+
* </pre>
|
|
152
|
+
* )
|
|
153
|
+
* }}
|
|
154
|
+
* />
|
|
155
|
+
* ```
|
|
156
|
+
*/
|
|
157
|
+
CodeBlock: ComponentType<MarkdownComponentsCodeBlockProps>;
|
|
158
|
+
/**
|
|
159
|
+
* The component used to render images.
|
|
160
|
+
*
|
|
161
|
+
* @example
|
|
162
|
+
* ```md
|
|
163
|
+
* 
|
|
164
|
+
* ```
|
|
165
|
+
* ```tsx
|
|
166
|
+
* <Markdown
|
|
167
|
+
* components={{
|
|
168
|
+
* Image: ({ src, alt }) => <img src={src} alt={alt} className="...">
|
|
169
|
+
* }}
|
|
170
|
+
* />
|
|
171
|
+
* ```
|
|
172
|
+
*/
|
|
173
|
+
Image: ComponentType<MarkdownComponentsImageProps>;
|
|
174
|
+
/**
|
|
175
|
+
* The component used to render lists.
|
|
176
|
+
*
|
|
177
|
+
* @example
|
|
178
|
+
* ```md
|
|
179
|
+
* 1. An ordered list item
|
|
180
|
+
* - An unordered list item
|
|
181
|
+
* - [x] A checked list item
|
|
182
|
+
* ```
|
|
183
|
+
* ```tsx
|
|
184
|
+
* <Markdown
|
|
185
|
+
* components={{
|
|
186
|
+
* List: ({ type, items, start }) => {
|
|
187
|
+
* const List = type === "ordered" ? "ol" : "ul";
|
|
188
|
+
* return (
|
|
189
|
+
* <List start={start}>
|
|
190
|
+
* {items.map((item, index) => (
|
|
191
|
+
* <li key={index}>
|
|
192
|
+
* {item.checked !== undefined && (
|
|
193
|
+
* <input type="checkbox" disabled checked={item.checked} />{" "}
|
|
194
|
+
* )}
|
|
195
|
+
* {item.children}
|
|
196
|
+
* </li>
|
|
197
|
+
* ))}
|
|
198
|
+
* </List>
|
|
199
|
+
* );
|
|
200
|
+
* }
|
|
201
|
+
* }}
|
|
202
|
+
* />
|
|
203
|
+
* ```
|
|
204
|
+
*/
|
|
205
|
+
List: ComponentType<MarkdownComponentsListProps>;
|
|
206
|
+
/**
|
|
207
|
+
* The component used to render tables.
|
|
208
|
+
*
|
|
209
|
+
* @example
|
|
210
|
+
* ```md
|
|
211
|
+
* | Heading 1 | Heading 2 |
|
|
212
|
+
* |-----------|-----------|
|
|
213
|
+
* | Cell 1 | Cell 2 |
|
|
214
|
+
* | Cell 3 | Cell 4 |
|
|
215
|
+
* ```
|
|
216
|
+
* ```tsx
|
|
217
|
+
* <Markdown
|
|
218
|
+
* components={{
|
|
219
|
+
* Table: ({ headings, rows }) => (
|
|
220
|
+
* <table>
|
|
221
|
+
* <thead>
|
|
222
|
+
* <tr>
|
|
223
|
+
* {headings.map(({ children }, index) => (
|
|
224
|
+
* <th key={index}>{children}</th>
|
|
225
|
+
* ))}
|
|
226
|
+
* </tr>
|
|
227
|
+
* </thead>
|
|
228
|
+
* <tbody>
|
|
229
|
+
* {rows.map((row, index) => (
|
|
230
|
+
* <tr key={index}>
|
|
231
|
+
* {row.map(({ children }, index) => (
|
|
232
|
+
* <td key={index}>{children}</td>
|
|
233
|
+
* ))}
|
|
234
|
+
* </tr>
|
|
235
|
+
* ))}
|
|
236
|
+
* </tbody>
|
|
237
|
+
* </table>
|
|
238
|
+
* )
|
|
239
|
+
* }}
|
|
240
|
+
* />
|
|
241
|
+
* ```
|
|
242
|
+
*/
|
|
243
|
+
Table: ComponentType<MarkdownComponentsTableProps>;
|
|
244
|
+
/**
|
|
245
|
+
* The component used to render separators.
|
|
246
|
+
*
|
|
247
|
+
* @example
|
|
248
|
+
* ```md
|
|
249
|
+
* ---
|
|
250
|
+
* ```
|
|
251
|
+
* ```tsx
|
|
252
|
+
* <Markdown components={{ Separator: () => <hr className="..." /> }} />
|
|
253
|
+
* ```
|
|
254
|
+
*/
|
|
255
|
+
Separator: ComponentType;
|
|
256
|
+
};
|
|
257
|
+
interface MarkdownComponentsInlineProps {
|
|
258
|
+
type: "strong" | "em" | "code" | "del";
|
|
259
|
+
children: ReactNode;
|
|
260
|
+
}
|
|
261
|
+
interface MarkdownComponentsParagraphProps {
|
|
262
|
+
children: ReactNode;
|
|
263
|
+
}
|
|
264
|
+
interface MarkdownComponentsTableCell {
|
|
265
|
+
align?: "left" | "center" | "right";
|
|
266
|
+
children: ReactNode;
|
|
267
|
+
}
|
|
268
|
+
interface MarkdownComponentsTableProps {
|
|
269
|
+
headings: MarkdownComponentsTableCell[];
|
|
270
|
+
rows: MarkdownComponentsTableCell[][];
|
|
271
|
+
}
|
|
272
|
+
interface MarkdownComponentsListItem {
|
|
273
|
+
checked?: boolean;
|
|
274
|
+
children: ReactNode;
|
|
275
|
+
}
|
|
276
|
+
type MarkdownComponentsListProps = Relax<MarkdownComponentsOrderedListProps | MarkdownComponentsUnorderedListProps>;
|
|
277
|
+
interface MarkdownComponentsOrderedListProps {
|
|
278
|
+
type: "ordered";
|
|
279
|
+
items: MarkdownComponentsListItem[];
|
|
280
|
+
start: number;
|
|
281
|
+
}
|
|
282
|
+
interface MarkdownComponentsUnorderedListProps {
|
|
283
|
+
type: "unordered";
|
|
284
|
+
items: MarkdownComponentsListItem[];
|
|
285
|
+
}
|
|
286
|
+
interface MarkdownComponentsBlockquoteProps {
|
|
287
|
+
children: ReactNode;
|
|
288
|
+
}
|
|
289
|
+
interface MarkdownComponentsImageProps {
|
|
290
|
+
src: string;
|
|
291
|
+
alt: string;
|
|
292
|
+
title?: string;
|
|
293
|
+
}
|
|
294
|
+
interface MarkdownComponentsHeadingProps {
|
|
295
|
+
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
296
|
+
children: ReactNode;
|
|
297
|
+
}
|
|
298
|
+
interface MarkdownComponentsLinkProps {
|
|
299
|
+
href: string;
|
|
300
|
+
title?: string;
|
|
301
|
+
children: ReactNode;
|
|
302
|
+
}
|
|
303
|
+
interface MarkdownComponentsCodeBlockProps {
|
|
304
|
+
code: string;
|
|
305
|
+
language?: string;
|
|
306
|
+
}
|
|
307
|
+
interface MarkdownProps extends ComponentPropsWithSlot<"div"> {
|
|
308
|
+
content: string;
|
|
309
|
+
components?: Partial<MarkdownComponents>;
|
|
310
|
+
}
|
|
311
|
+
declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
|
|
312
|
+
|
|
41
313
|
interface ProseProps extends ComponentProps<"div"> {
|
|
42
314
|
content: string;
|
|
315
|
+
components?: Partial<GlobalComponents & {
|
|
316
|
+
markdown?: Partial<MarkdownComponents>;
|
|
317
|
+
}>;
|
|
43
318
|
}
|
|
44
319
|
/**
|
|
45
320
|
* This component renders Markdown content with `lb-prose`
|
|
46
321
|
* styles and custom components (code blocks, etc)
|
|
47
322
|
*/
|
|
48
|
-
declare function Prose({ content, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
|
|
323
|
+
declare function Prose({ content, components, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
|
|
49
324
|
|
|
50
325
|
interface TooltipProps extends Pick<TooltipPrimitive.TooltipTriggerProps, "children">, Omit<TooltipPrimitive.TooltipContentProps, "content"> {
|
|
51
326
|
content: ReactNode;
|
|
@@ -330,38 +605,4 @@ declare namespace index {
|
|
|
330
605
|
};
|
|
331
606
|
}
|
|
332
607
|
|
|
333
|
-
|
|
334
|
-
CodeBlock: ComponentType<MarkdownComponentsCodeBlockProps>;
|
|
335
|
-
Link: ComponentType<MarkdownComponentsLinkProps>;
|
|
336
|
-
Heading: ComponentType<MarkdownComponentsHeadingProps>;
|
|
337
|
-
Image: ComponentType<MarkdownComponentsImageProps>;
|
|
338
|
-
Blockquote: ComponentType<MarkdownComponentsBlockquoteProps>;
|
|
339
|
-
};
|
|
340
|
-
interface MarkdownComponentsBlockquoteProps {
|
|
341
|
-
children: ReactNode;
|
|
342
|
-
}
|
|
343
|
-
interface MarkdownComponentsImageProps {
|
|
344
|
-
src: string;
|
|
345
|
-
alt: string;
|
|
346
|
-
title?: string;
|
|
347
|
-
}
|
|
348
|
-
interface MarkdownComponentsHeadingProps {
|
|
349
|
-
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
350
|
-
children: ReactNode;
|
|
351
|
-
}
|
|
352
|
-
interface MarkdownComponentsLinkProps {
|
|
353
|
-
href: string;
|
|
354
|
-
title?: string;
|
|
355
|
-
children: ReactNode;
|
|
356
|
-
}
|
|
357
|
-
interface MarkdownComponentsCodeBlockProps {
|
|
358
|
-
code: string;
|
|
359
|
-
language?: string;
|
|
360
|
-
}
|
|
361
|
-
interface MarkdownProps extends ComponentPropsWithSlot<"div"> {
|
|
362
|
-
content: string;
|
|
363
|
-
components?: Partial<MarkdownComponents>;
|
|
364
|
-
}
|
|
365
|
-
declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
|
|
366
|
-
|
|
367
|
-
export { index$2 as AiChatComposer, AiChatComposerEditorProps, AiChatComposerFormProps, AiChatComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsLinkProps, MarkdownProps, MentionIcon, MinusCircleIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, cn, useInitial, useRefs };
|
|
608
|
+
export { index$2 as AiChatComposer, AiChatComposerEditorProps, AiChatComposerFormProps, AiChatComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, cn, useInitial, useRefs };
|
package/dist/_private/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ComponentProps, ReactNode, ElementType, ComponentPropsWithoutRef, Ref, RefCallback, FormEvent
|
|
3
|
+
import { ComponentProps, ReactNode, ElementType, ComponentPropsWithoutRef, ComponentType, Ref, RefCallback, FormEvent } from 'react';
|
|
4
|
+
import { Relax, AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
|
|
4
5
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
5
6
|
export { TooltipProvider } from '@radix-ui/react-tooltip';
|
|
6
|
-
import { AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
|
|
7
7
|
|
|
8
8
|
interface AvatarProps extends ComponentProps<"div"> {
|
|
9
9
|
/**
|
|
@@ -38,14 +38,289 @@ interface ListProps extends ComponentPropsWithSlot<"span"> {
|
|
|
38
38
|
}
|
|
39
39
|
declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttributes<HTMLSpanElement>>;
|
|
40
40
|
|
|
41
|
+
interface GlobalComponents {
|
|
42
|
+
Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
type MarkdownComponents = {
|
|
46
|
+
/**
|
|
47
|
+
* The component used to render paragraphs.
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```md
|
|
51
|
+
* A paragraph.
|
|
52
|
+
*
|
|
53
|
+
* Another paragraph.
|
|
54
|
+
* ```
|
|
55
|
+
* ```tsx
|
|
56
|
+
* <Markdown
|
|
57
|
+
* components={{
|
|
58
|
+
* Paragraph: ({ children }) => <p className="...">{children}</p>
|
|
59
|
+
* }}
|
|
60
|
+
* />
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
63
|
+
Paragraph: ComponentType<MarkdownComponentsParagraphProps>;
|
|
64
|
+
/**
|
|
65
|
+
* The component used to render inline elements (bold, italic, strikethrough, and inline code).
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* ```md
|
|
69
|
+
* **Bold**, _italic_, ~~strikethrough~~, and `inline code`.
|
|
70
|
+
* ```
|
|
71
|
+
* ```tsx
|
|
72
|
+
* <Markdown
|
|
73
|
+
* components={{
|
|
74
|
+
* Inline: ({ type, children }) => {
|
|
75
|
+
* const Component = type;
|
|
76
|
+
* return <Component className="...">{children}</Component>;
|
|
77
|
+
* }
|
|
78
|
+
* }}
|
|
79
|
+
* />
|
|
80
|
+
* ```
|
|
81
|
+
*/
|
|
82
|
+
Inline: ComponentType<MarkdownComponentsInlineProps>;
|
|
83
|
+
/**
|
|
84
|
+
* The component used to render links.
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* ```md
|
|
88
|
+
* A [link](https://liveblocks.io).
|
|
89
|
+
* ```
|
|
90
|
+
* ```tsx
|
|
91
|
+
* <Markdown
|
|
92
|
+
* components={{
|
|
93
|
+
* Link: ({ href, children }) => <a href={href} className="...">{children}</a>
|
|
94
|
+
* }}
|
|
95
|
+
* />
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
Link: ComponentType<MarkdownComponentsLinkProps>;
|
|
99
|
+
/**
|
|
100
|
+
* The component used to render headings.
|
|
101
|
+
*
|
|
102
|
+
* @example
|
|
103
|
+
* ```md
|
|
104
|
+
* # Heading 1
|
|
105
|
+
* ## Heading 2
|
|
106
|
+
* ### Heading 3
|
|
107
|
+
* ```
|
|
108
|
+
* ```tsx
|
|
109
|
+
* <Markdown
|
|
110
|
+
* components={{
|
|
111
|
+
* Heading: ({ level, children }) => {
|
|
112
|
+
* const Heading = `h${level}` as const;
|
|
113
|
+
* return <Heading className="...">{children}</Heading>;
|
|
114
|
+
* }
|
|
115
|
+
* }}
|
|
116
|
+
* />
|
|
117
|
+
* ```
|
|
118
|
+
*/
|
|
119
|
+
Heading: ComponentType<MarkdownComponentsHeadingProps>;
|
|
120
|
+
/**
|
|
121
|
+
* The component used to render blockquotes.
|
|
122
|
+
*
|
|
123
|
+
* @example
|
|
124
|
+
* ```md
|
|
125
|
+
* > A blockquote.
|
|
126
|
+
* ```
|
|
127
|
+
* ```tsx
|
|
128
|
+
* <Markdown
|
|
129
|
+
* components={{
|
|
130
|
+
* Blockquote: ({ children }) => <blockquote className="...">{children}</blockquote>
|
|
131
|
+
* }}
|
|
132
|
+
* />
|
|
133
|
+
* ```
|
|
134
|
+
*/
|
|
135
|
+
Blockquote: ComponentType<MarkdownComponentsBlockquoteProps>;
|
|
136
|
+
/**
|
|
137
|
+
* The component used to render code blocks.
|
|
138
|
+
*
|
|
139
|
+
* @example
|
|
140
|
+
* ```md
|
|
141
|
+
* ```javascript
|
|
142
|
+
* const a = 1;
|
|
143
|
+
* ```
|
|
144
|
+
* ```
|
|
145
|
+
* ```tsx
|
|
146
|
+
* <Markdown
|
|
147
|
+
* components={{
|
|
148
|
+
* CodeBlock: ({ language, code }) => (
|
|
149
|
+
* <pre data-language={language} className="...">
|
|
150
|
+
* <code className="...">{code}</code>
|
|
151
|
+
* </pre>
|
|
152
|
+
* )
|
|
153
|
+
* }}
|
|
154
|
+
* />
|
|
155
|
+
* ```
|
|
156
|
+
*/
|
|
157
|
+
CodeBlock: ComponentType<MarkdownComponentsCodeBlockProps>;
|
|
158
|
+
/**
|
|
159
|
+
* The component used to render images.
|
|
160
|
+
*
|
|
161
|
+
* @example
|
|
162
|
+
* ```md
|
|
163
|
+
* 
|
|
164
|
+
* ```
|
|
165
|
+
* ```tsx
|
|
166
|
+
* <Markdown
|
|
167
|
+
* components={{
|
|
168
|
+
* Image: ({ src, alt }) => <img src={src} alt={alt} className="...">
|
|
169
|
+
* }}
|
|
170
|
+
* />
|
|
171
|
+
* ```
|
|
172
|
+
*/
|
|
173
|
+
Image: ComponentType<MarkdownComponentsImageProps>;
|
|
174
|
+
/**
|
|
175
|
+
* The component used to render lists.
|
|
176
|
+
*
|
|
177
|
+
* @example
|
|
178
|
+
* ```md
|
|
179
|
+
* 1. An ordered list item
|
|
180
|
+
* - An unordered list item
|
|
181
|
+
* - [x] A checked list item
|
|
182
|
+
* ```
|
|
183
|
+
* ```tsx
|
|
184
|
+
* <Markdown
|
|
185
|
+
* components={{
|
|
186
|
+
* List: ({ type, items, start }) => {
|
|
187
|
+
* const List = type === "ordered" ? "ol" : "ul";
|
|
188
|
+
* return (
|
|
189
|
+
* <List start={start}>
|
|
190
|
+
* {items.map((item, index) => (
|
|
191
|
+
* <li key={index}>
|
|
192
|
+
* {item.checked !== undefined && (
|
|
193
|
+
* <input type="checkbox" disabled checked={item.checked} />{" "}
|
|
194
|
+
* )}
|
|
195
|
+
* {item.children}
|
|
196
|
+
* </li>
|
|
197
|
+
* ))}
|
|
198
|
+
* </List>
|
|
199
|
+
* );
|
|
200
|
+
* }
|
|
201
|
+
* }}
|
|
202
|
+
* />
|
|
203
|
+
* ```
|
|
204
|
+
*/
|
|
205
|
+
List: ComponentType<MarkdownComponentsListProps>;
|
|
206
|
+
/**
|
|
207
|
+
* The component used to render tables.
|
|
208
|
+
*
|
|
209
|
+
* @example
|
|
210
|
+
* ```md
|
|
211
|
+
* | Heading 1 | Heading 2 |
|
|
212
|
+
* |-----------|-----------|
|
|
213
|
+
* | Cell 1 | Cell 2 |
|
|
214
|
+
* | Cell 3 | Cell 4 |
|
|
215
|
+
* ```
|
|
216
|
+
* ```tsx
|
|
217
|
+
* <Markdown
|
|
218
|
+
* components={{
|
|
219
|
+
* Table: ({ headings, rows }) => (
|
|
220
|
+
* <table>
|
|
221
|
+
* <thead>
|
|
222
|
+
* <tr>
|
|
223
|
+
* {headings.map(({ children }, index) => (
|
|
224
|
+
* <th key={index}>{children}</th>
|
|
225
|
+
* ))}
|
|
226
|
+
* </tr>
|
|
227
|
+
* </thead>
|
|
228
|
+
* <tbody>
|
|
229
|
+
* {rows.map((row, index) => (
|
|
230
|
+
* <tr key={index}>
|
|
231
|
+
* {row.map(({ children }, index) => (
|
|
232
|
+
* <td key={index}>{children}</td>
|
|
233
|
+
* ))}
|
|
234
|
+
* </tr>
|
|
235
|
+
* ))}
|
|
236
|
+
* </tbody>
|
|
237
|
+
* </table>
|
|
238
|
+
* )
|
|
239
|
+
* }}
|
|
240
|
+
* />
|
|
241
|
+
* ```
|
|
242
|
+
*/
|
|
243
|
+
Table: ComponentType<MarkdownComponentsTableProps>;
|
|
244
|
+
/**
|
|
245
|
+
* The component used to render separators.
|
|
246
|
+
*
|
|
247
|
+
* @example
|
|
248
|
+
* ```md
|
|
249
|
+
* ---
|
|
250
|
+
* ```
|
|
251
|
+
* ```tsx
|
|
252
|
+
* <Markdown components={{ Separator: () => <hr className="..." /> }} />
|
|
253
|
+
* ```
|
|
254
|
+
*/
|
|
255
|
+
Separator: ComponentType;
|
|
256
|
+
};
|
|
257
|
+
interface MarkdownComponentsInlineProps {
|
|
258
|
+
type: "strong" | "em" | "code" | "del";
|
|
259
|
+
children: ReactNode;
|
|
260
|
+
}
|
|
261
|
+
interface MarkdownComponentsParagraphProps {
|
|
262
|
+
children: ReactNode;
|
|
263
|
+
}
|
|
264
|
+
interface MarkdownComponentsTableCell {
|
|
265
|
+
align?: "left" | "center" | "right";
|
|
266
|
+
children: ReactNode;
|
|
267
|
+
}
|
|
268
|
+
interface MarkdownComponentsTableProps {
|
|
269
|
+
headings: MarkdownComponentsTableCell[];
|
|
270
|
+
rows: MarkdownComponentsTableCell[][];
|
|
271
|
+
}
|
|
272
|
+
interface MarkdownComponentsListItem {
|
|
273
|
+
checked?: boolean;
|
|
274
|
+
children: ReactNode;
|
|
275
|
+
}
|
|
276
|
+
type MarkdownComponentsListProps = Relax<MarkdownComponentsOrderedListProps | MarkdownComponentsUnorderedListProps>;
|
|
277
|
+
interface MarkdownComponentsOrderedListProps {
|
|
278
|
+
type: "ordered";
|
|
279
|
+
items: MarkdownComponentsListItem[];
|
|
280
|
+
start: number;
|
|
281
|
+
}
|
|
282
|
+
interface MarkdownComponentsUnorderedListProps {
|
|
283
|
+
type: "unordered";
|
|
284
|
+
items: MarkdownComponentsListItem[];
|
|
285
|
+
}
|
|
286
|
+
interface MarkdownComponentsBlockquoteProps {
|
|
287
|
+
children: ReactNode;
|
|
288
|
+
}
|
|
289
|
+
interface MarkdownComponentsImageProps {
|
|
290
|
+
src: string;
|
|
291
|
+
alt: string;
|
|
292
|
+
title?: string;
|
|
293
|
+
}
|
|
294
|
+
interface MarkdownComponentsHeadingProps {
|
|
295
|
+
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
296
|
+
children: ReactNode;
|
|
297
|
+
}
|
|
298
|
+
interface MarkdownComponentsLinkProps {
|
|
299
|
+
href: string;
|
|
300
|
+
title?: string;
|
|
301
|
+
children: ReactNode;
|
|
302
|
+
}
|
|
303
|
+
interface MarkdownComponentsCodeBlockProps {
|
|
304
|
+
code: string;
|
|
305
|
+
language?: string;
|
|
306
|
+
}
|
|
307
|
+
interface MarkdownProps extends ComponentPropsWithSlot<"div"> {
|
|
308
|
+
content: string;
|
|
309
|
+
components?: Partial<MarkdownComponents>;
|
|
310
|
+
}
|
|
311
|
+
declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
|
|
312
|
+
|
|
41
313
|
interface ProseProps extends ComponentProps<"div"> {
|
|
42
314
|
content: string;
|
|
315
|
+
components?: Partial<GlobalComponents & {
|
|
316
|
+
markdown?: Partial<MarkdownComponents>;
|
|
317
|
+
}>;
|
|
43
318
|
}
|
|
44
319
|
/**
|
|
45
320
|
* This component renders Markdown content with `lb-prose`
|
|
46
321
|
* styles and custom components (code blocks, etc)
|
|
47
322
|
*/
|
|
48
|
-
declare function Prose({ content, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
|
|
323
|
+
declare function Prose({ content, components, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
|
|
49
324
|
|
|
50
325
|
interface TooltipProps extends Pick<TooltipPrimitive.TooltipTriggerProps, "children">, Omit<TooltipPrimitive.TooltipContentProps, "content"> {
|
|
51
326
|
content: ReactNode;
|
|
@@ -330,38 +605,4 @@ declare namespace index {
|
|
|
330
605
|
};
|
|
331
606
|
}
|
|
332
607
|
|
|
333
|
-
|
|
334
|
-
CodeBlock: ComponentType<MarkdownComponentsCodeBlockProps>;
|
|
335
|
-
Link: ComponentType<MarkdownComponentsLinkProps>;
|
|
336
|
-
Heading: ComponentType<MarkdownComponentsHeadingProps>;
|
|
337
|
-
Image: ComponentType<MarkdownComponentsImageProps>;
|
|
338
|
-
Blockquote: ComponentType<MarkdownComponentsBlockquoteProps>;
|
|
339
|
-
};
|
|
340
|
-
interface MarkdownComponentsBlockquoteProps {
|
|
341
|
-
children: ReactNode;
|
|
342
|
-
}
|
|
343
|
-
interface MarkdownComponentsImageProps {
|
|
344
|
-
src: string;
|
|
345
|
-
alt: string;
|
|
346
|
-
title?: string;
|
|
347
|
-
}
|
|
348
|
-
interface MarkdownComponentsHeadingProps {
|
|
349
|
-
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
350
|
-
children: ReactNode;
|
|
351
|
-
}
|
|
352
|
-
interface MarkdownComponentsLinkProps {
|
|
353
|
-
href: string;
|
|
354
|
-
title?: string;
|
|
355
|
-
children: ReactNode;
|
|
356
|
-
}
|
|
357
|
-
interface MarkdownComponentsCodeBlockProps {
|
|
358
|
-
code: string;
|
|
359
|
-
language?: string;
|
|
360
|
-
}
|
|
361
|
-
interface MarkdownProps extends ComponentPropsWithSlot<"div"> {
|
|
362
|
-
content: string;
|
|
363
|
-
components?: Partial<MarkdownComponents>;
|
|
364
|
-
}
|
|
365
|
-
declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
|
|
366
|
-
|
|
367
|
-
export { index$2 as AiChatComposer, AiChatComposerEditorProps, AiChatComposerFormProps, AiChatComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsLinkProps, MarkdownProps, MentionIcon, MinusCircleIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, cn, useInitial, useRefs };
|
|
608
|
+
export { index$2 as AiChatComposer, AiChatComposerEditorProps, AiChatComposerFormProps, AiChatComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, cn, useInitial, useRefs };
|