@vllnt/ui 0.2.1-canary.9e6a7be → 0.2.1-canary.d6a58c6
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/components/conversation-thread/conversation-thread.js +348 -0
- package/dist/components/conversation-thread/index.js +20 -0
- package/dist/components/index.js +30 -0
- package/dist/components/presence-stack/index.js +6 -0
- package/dist/components/presence-stack/presence-stack.js +108 -0
- package/dist/components/selection-presence/index.js +6 -0
- package/dist/components/selection-presence/selection-presence.js +50 -0
- package/dist/components/thread-bubble/index.js +6 -0
- package/dist/components/thread-bubble/thread-bubble.js +85 -0
- package/dist/index.d.ts +338 -2
- package/package.json +1 -1
|
@@ -0,0 +1,348 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import {
|
|
4
|
+
createContext,
|
|
5
|
+
forwardRef,
|
|
6
|
+
useCallback,
|
|
7
|
+
useContext,
|
|
8
|
+
useEffect,
|
|
9
|
+
useMemo,
|
|
10
|
+
useRef,
|
|
11
|
+
useState
|
|
12
|
+
} from "react";
|
|
13
|
+
import { ArrowDown, RefreshCw, ThumbsDown, ThumbsUp } from "lucide-react";
|
|
14
|
+
import { cn } from "../../lib/utils";
|
|
15
|
+
import { ThinkingBlock } from "../thinking-block";
|
|
16
|
+
const ConversationThreadContext = createContext(null);
|
|
17
|
+
function useConversationThreadContext() {
|
|
18
|
+
const ctx = useContext(ConversationThreadContext);
|
|
19
|
+
if (!ctx) {
|
|
20
|
+
throw new Error(
|
|
21
|
+
"ConversationThread compound components must be used within <ConversationThread>"
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
return ctx;
|
|
25
|
+
}
|
|
26
|
+
function MessageActions({ messageId }) {
|
|
27
|
+
const { onFeedback, onRetry } = useConversationThreadContext();
|
|
28
|
+
return /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-1", children: [
|
|
29
|
+
onRetry ? /* @__PURE__ */ jsx(
|
|
30
|
+
"button",
|
|
31
|
+
{
|
|
32
|
+
"aria-label": "Retry message",
|
|
33
|
+
className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
|
|
34
|
+
onClick: () => {
|
|
35
|
+
onRetry(messageId);
|
|
36
|
+
},
|
|
37
|
+
type: "button",
|
|
38
|
+
children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" })
|
|
39
|
+
}
|
|
40
|
+
) : null,
|
|
41
|
+
onFeedback ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
42
|
+
/* @__PURE__ */ jsx(
|
|
43
|
+
"button",
|
|
44
|
+
{
|
|
45
|
+
"aria-label": "Positive feedback",
|
|
46
|
+
className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
|
|
47
|
+
onClick: () => {
|
|
48
|
+
onFeedback(messageId, "positive");
|
|
49
|
+
},
|
|
50
|
+
type: "button",
|
|
51
|
+
children: /* @__PURE__ */ jsx(ThumbsUp, { className: "h-3 w-3" })
|
|
52
|
+
}
|
|
53
|
+
),
|
|
54
|
+
/* @__PURE__ */ jsx(
|
|
55
|
+
"button",
|
|
56
|
+
{
|
|
57
|
+
"aria-label": "Negative feedback",
|
|
58
|
+
className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
|
|
59
|
+
onClick: () => {
|
|
60
|
+
onFeedback(messageId, "negative");
|
|
61
|
+
},
|
|
62
|
+
type: "button",
|
|
63
|
+
children: /* @__PURE__ */ jsx(ThumbsDown, { className: "h-3 w-3" })
|
|
64
|
+
}
|
|
65
|
+
)
|
|
66
|
+
] }) : null
|
|
67
|
+
] });
|
|
68
|
+
}
|
|
69
|
+
function MessageItem({ message }) {
|
|
70
|
+
const isUser = message.role === "user";
|
|
71
|
+
return /* @__PURE__ */ jsx(
|
|
72
|
+
"div",
|
|
73
|
+
{
|
|
74
|
+
className: cn(
|
|
75
|
+
"mb-4 flex gap-3",
|
|
76
|
+
isUser ? "justify-end" : "justify-start"
|
|
77
|
+
),
|
|
78
|
+
children: /* @__PURE__ */ jsxs(
|
|
79
|
+
"div",
|
|
80
|
+
{
|
|
81
|
+
className: cn(
|
|
82
|
+
"max-w-[80%] rounded-2xl px-4 py-3 text-sm",
|
|
83
|
+
isUser ? "rounded-br-sm bg-primary text-primary-foreground" : "rounded-bl-sm bg-muted text-foreground"
|
|
84
|
+
),
|
|
85
|
+
children: [
|
|
86
|
+
!isUser && message.thinking ? /* @__PURE__ */ jsx(
|
|
87
|
+
ThinkingBlock,
|
|
88
|
+
{
|
|
89
|
+
isStreaming: message.isStreaming,
|
|
90
|
+
thinking: message.thinking
|
|
91
|
+
}
|
|
92
|
+
) : null,
|
|
93
|
+
message.toolCalls && message.toolCalls.length > 0 ? /* @__PURE__ */ jsx(
|
|
94
|
+
"ul",
|
|
95
|
+
{
|
|
96
|
+
"aria-label": "Tool calls",
|
|
97
|
+
className: "mb-2 flex flex-col gap-1 text-xs text-muted-foreground",
|
|
98
|
+
children: message.toolCalls.map((toolCall) => /* @__PURE__ */ jsx("li", { className: "font-mono", children: toolCall.name }, toolCall.id))
|
|
99
|
+
}
|
|
100
|
+
) : null,
|
|
101
|
+
/* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap leading-relaxed", children: message.content }),
|
|
102
|
+
isUser ? null : /* @__PURE__ */ jsx(MessageActions, { messageId: message.id })
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
)
|
|
106
|
+
}
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
function useConversationScroll(messages, isStreaming) {
|
|
110
|
+
const scrollContainerRef = useRef(null);
|
|
111
|
+
const messagesEndRef = useRef(null);
|
|
112
|
+
const isAtBottomRef = useRef(true);
|
|
113
|
+
const [isAtBottom, setIsAtBottom] = useState(true);
|
|
114
|
+
const scrollToBottom = useCallback(() => {
|
|
115
|
+
const element = messagesEndRef.current;
|
|
116
|
+
if (element && typeof element.scrollIntoView === "function") {
|
|
117
|
+
element.scrollIntoView({ behavior: "smooth" });
|
|
118
|
+
}
|
|
119
|
+
}, []);
|
|
120
|
+
const scrollToBottomInstant = useCallback(() => {
|
|
121
|
+
const element = messagesEndRef.current;
|
|
122
|
+
if (element && typeof element.scrollIntoView === "function") {
|
|
123
|
+
element.scrollIntoView({ behavior: "instant" });
|
|
124
|
+
}
|
|
125
|
+
}, []);
|
|
126
|
+
const handleScroll = useCallback(() => {
|
|
127
|
+
const container = scrollContainerRef.current;
|
|
128
|
+
if (!container) return;
|
|
129
|
+
const { clientHeight, scrollHeight, scrollTop } = container;
|
|
130
|
+
const nearBottom = scrollHeight - scrollTop - clientHeight <= 100;
|
|
131
|
+
isAtBottomRef.current = nearBottom;
|
|
132
|
+
setIsAtBottom(nearBottom);
|
|
133
|
+
}, []);
|
|
134
|
+
useEffect(() => {
|
|
135
|
+
if (!isAtBottomRef.current) return;
|
|
136
|
+
scrollToBottomInstant();
|
|
137
|
+
}, [messages, scrollToBottomInstant]);
|
|
138
|
+
useEffect(() => {
|
|
139
|
+
if (!isStreaming || !isAtBottomRef.current) return;
|
|
140
|
+
scrollToBottomInstant();
|
|
141
|
+
}, [isStreaming, scrollToBottomInstant]);
|
|
142
|
+
return {
|
|
143
|
+
handleScroll,
|
|
144
|
+
isAtBottom,
|
|
145
|
+
messagesEndRef,
|
|
146
|
+
scrollContainerRef,
|
|
147
|
+
scrollToBottom
|
|
148
|
+
};
|
|
149
|
+
}
|
|
150
|
+
const ConversationThread = forwardRef(
|
|
151
|
+
({
|
|
152
|
+
children,
|
|
153
|
+
className,
|
|
154
|
+
isStreaming = false,
|
|
155
|
+
messages,
|
|
156
|
+
onFeedback,
|
|
157
|
+
onRetry,
|
|
158
|
+
onSend
|
|
159
|
+
}, reference) => {
|
|
160
|
+
const {
|
|
161
|
+
handleScroll,
|
|
162
|
+
isAtBottom,
|
|
163
|
+
messagesEndRef,
|
|
164
|
+
scrollContainerRef,
|
|
165
|
+
scrollToBottom
|
|
166
|
+
} = useConversationScroll(messages, isStreaming);
|
|
167
|
+
const contextValue = useMemo(
|
|
168
|
+
() => ({
|
|
169
|
+
handleScroll,
|
|
170
|
+
isAtBottom,
|
|
171
|
+
isStreaming,
|
|
172
|
+
messages,
|
|
173
|
+
messagesEndRef,
|
|
174
|
+
onFeedback,
|
|
175
|
+
onRetry,
|
|
176
|
+
onSend,
|
|
177
|
+
scrollContainerRef,
|
|
178
|
+
scrollToBottom
|
|
179
|
+
}),
|
|
180
|
+
[
|
|
181
|
+
handleScroll,
|
|
182
|
+
isAtBottom,
|
|
183
|
+
isStreaming,
|
|
184
|
+
messages,
|
|
185
|
+
messagesEndRef,
|
|
186
|
+
onFeedback,
|
|
187
|
+
onRetry,
|
|
188
|
+
onSend,
|
|
189
|
+
scrollContainerRef,
|
|
190
|
+
scrollToBottom
|
|
191
|
+
]
|
|
192
|
+
);
|
|
193
|
+
return /* @__PURE__ */ jsx(ConversationThreadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
|
|
194
|
+
"div",
|
|
195
|
+
{
|
|
196
|
+
className: cn("flex h-full flex-col overflow-hidden", className),
|
|
197
|
+
ref: reference,
|
|
198
|
+
children
|
|
199
|
+
}
|
|
200
|
+
) });
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
ConversationThread.displayName = "ConversationThread";
|
|
204
|
+
const ConversationHeader = forwardRef(({ children, className }, reference) => {
|
|
205
|
+
return /* @__PURE__ */ jsx(
|
|
206
|
+
"div",
|
|
207
|
+
{
|
|
208
|
+
className: cn("flex shrink-0 items-center border-b px-4 py-3", className),
|
|
209
|
+
ref: reference,
|
|
210
|
+
children
|
|
211
|
+
}
|
|
212
|
+
);
|
|
213
|
+
});
|
|
214
|
+
ConversationHeader.displayName = "ConversationHeader";
|
|
215
|
+
const ConversationTitle = forwardRef(({ children, className }, reference) => {
|
|
216
|
+
return /* @__PURE__ */ jsx(
|
|
217
|
+
"h2",
|
|
218
|
+
{
|
|
219
|
+
className: cn("text-sm font-semibold leading-none", className),
|
|
220
|
+
ref: reference,
|
|
221
|
+
children
|
|
222
|
+
}
|
|
223
|
+
);
|
|
224
|
+
});
|
|
225
|
+
ConversationTitle.displayName = "ConversationTitle";
|
|
226
|
+
const ConversationMessages = forwardRef(({ children, className }, reference) => {
|
|
227
|
+
const { handleScroll, messages, messagesEndRef, scrollContainerRef } = useConversationThreadContext();
|
|
228
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("relative min-h-0 flex-1", className), ref: reference, children: [
|
|
229
|
+
/* @__PURE__ */ jsx(
|
|
230
|
+
"div",
|
|
231
|
+
{
|
|
232
|
+
"aria-label": "Conversation messages",
|
|
233
|
+
"aria-live": "polite",
|
|
234
|
+
className: "absolute inset-0 overflow-y-auto",
|
|
235
|
+
onScroll: handleScroll,
|
|
236
|
+
ref: scrollContainerRef,
|
|
237
|
+
role: "log",
|
|
238
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-4", children: [
|
|
239
|
+
messages.map((message) => /* @__PURE__ */ jsx(MessageItem, { message }, message.id)),
|
|
240
|
+
/* @__PURE__ */ jsx("div", { "aria-hidden": "true", ref: messagesEndRef })
|
|
241
|
+
] })
|
|
242
|
+
}
|
|
243
|
+
),
|
|
244
|
+
children
|
|
245
|
+
] });
|
|
246
|
+
});
|
|
247
|
+
ConversationMessages.displayName = "ConversationMessages";
|
|
248
|
+
const ConversationEmpty = forwardRef(({ children, className }, reference) => {
|
|
249
|
+
const { messages } = useConversationThreadContext();
|
|
250
|
+
if (messages.length > 0) return null;
|
|
251
|
+
return /* @__PURE__ */ jsx(
|
|
252
|
+
"div",
|
|
253
|
+
{
|
|
254
|
+
className: cn(
|
|
255
|
+
"pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-4 p-8",
|
|
256
|
+
className
|
|
257
|
+
),
|
|
258
|
+
ref: reference,
|
|
259
|
+
children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto flex flex-col items-center gap-4", children })
|
|
260
|
+
}
|
|
261
|
+
);
|
|
262
|
+
});
|
|
263
|
+
ConversationEmpty.displayName = "ConversationEmpty";
|
|
264
|
+
const ConversationSuggestions = forwardRef(({ className, suggestions = [] }, reference) => {
|
|
265
|
+
const { onSend } = useConversationThreadContext();
|
|
266
|
+
return /* @__PURE__ */ jsx(
|
|
267
|
+
"div",
|
|
268
|
+
{
|
|
269
|
+
className: cn("flex flex-wrap justify-center gap-2", className),
|
|
270
|
+
ref: reference,
|
|
271
|
+
children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(
|
|
272
|
+
"button",
|
|
273
|
+
{
|
|
274
|
+
className: "rounded-full border bg-background px-4 py-2 text-sm transition-colors hover:bg-muted",
|
|
275
|
+
onClick: () => onSend?.(suggestion),
|
|
276
|
+
type: "button",
|
|
277
|
+
children: suggestion
|
|
278
|
+
},
|
|
279
|
+
suggestion
|
|
280
|
+
))
|
|
281
|
+
}
|
|
282
|
+
);
|
|
283
|
+
});
|
|
284
|
+
ConversationSuggestions.displayName = "ConversationSuggestions";
|
|
285
|
+
const ConversationScrollButton = forwardRef(({ className }, reference) => {
|
|
286
|
+
const { isAtBottom, scrollToBottom } = useConversationThreadContext();
|
|
287
|
+
if (isAtBottom) return null;
|
|
288
|
+
return /* @__PURE__ */ jsx(
|
|
289
|
+
"button",
|
|
290
|
+
{
|
|
291
|
+
"aria-label": "Scroll to bottom",
|
|
292
|
+
className: cn(
|
|
293
|
+
"absolute bottom-4 right-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background shadow-md transition-colors hover:bg-muted",
|
|
294
|
+
className
|
|
295
|
+
),
|
|
296
|
+
onClick: scrollToBottom,
|
|
297
|
+
ref: reference,
|
|
298
|
+
type: "button",
|
|
299
|
+
children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" })
|
|
300
|
+
}
|
|
301
|
+
);
|
|
302
|
+
});
|
|
303
|
+
ConversationScrollButton.displayName = "ConversationScrollButton";
|
|
304
|
+
const ConversationLoading = forwardRef(({ className }, reference) => {
|
|
305
|
+
const { isStreaming, messages } = useConversationThreadContext();
|
|
306
|
+
const lastMessage = messages.at(-1);
|
|
307
|
+
if (!isStreaming || lastMessage?.role !== "assistant") return null;
|
|
308
|
+
return /* @__PURE__ */ jsxs(
|
|
309
|
+
"div",
|
|
310
|
+
{
|
|
311
|
+
"aria-label": "Assistant is typing",
|
|
312
|
+
className: cn(
|
|
313
|
+
"absolute bottom-4 left-4 flex items-center gap-1",
|
|
314
|
+
className
|
|
315
|
+
),
|
|
316
|
+
ref: reference,
|
|
317
|
+
role: "status",
|
|
318
|
+
children: [
|
|
319
|
+
/* @__PURE__ */ jsx(
|
|
320
|
+
"span",
|
|
321
|
+
{
|
|
322
|
+
className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground",
|
|
323
|
+
style: { animationDelay: "-0.3s" }
|
|
324
|
+
}
|
|
325
|
+
),
|
|
326
|
+
/* @__PURE__ */ jsx(
|
|
327
|
+
"span",
|
|
328
|
+
{
|
|
329
|
+
className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground",
|
|
330
|
+
style: { animationDelay: "-0.15s" }
|
|
331
|
+
}
|
|
332
|
+
),
|
|
333
|
+
/* @__PURE__ */ jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground" })
|
|
334
|
+
]
|
|
335
|
+
}
|
|
336
|
+
);
|
|
337
|
+
});
|
|
338
|
+
ConversationLoading.displayName = "ConversationLoading";
|
|
339
|
+
export {
|
|
340
|
+
ConversationEmpty,
|
|
341
|
+
ConversationHeader,
|
|
342
|
+
ConversationLoading,
|
|
343
|
+
ConversationMessages,
|
|
344
|
+
ConversationScrollButton,
|
|
345
|
+
ConversationSuggestions,
|
|
346
|
+
ConversationThread,
|
|
347
|
+
ConversationTitle
|
|
348
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ConversationEmpty,
|
|
3
|
+
ConversationHeader,
|
|
4
|
+
ConversationLoading,
|
|
5
|
+
ConversationMessages,
|
|
6
|
+
ConversationScrollButton,
|
|
7
|
+
ConversationSuggestions,
|
|
8
|
+
ConversationThread,
|
|
9
|
+
ConversationTitle
|
|
10
|
+
} from "./conversation-thread";
|
|
11
|
+
export {
|
|
12
|
+
ConversationEmpty,
|
|
13
|
+
ConversationHeader,
|
|
14
|
+
ConversationLoading,
|
|
15
|
+
ConversationMessages,
|
|
16
|
+
ConversationScrollButton,
|
|
17
|
+
ConversationSuggestions,
|
|
18
|
+
ConversationThread,
|
|
19
|
+
ConversationTitle
|
|
20
|
+
};
|
package/dist/components/index.js
CHANGED
|
@@ -539,6 +539,25 @@ import {
|
|
|
539
539
|
ObjectCard
|
|
540
540
|
} from "./object-card";
|
|
541
541
|
import { ObjectHandle } from "./object-handle";
|
|
542
|
+
import {
|
|
543
|
+
PresenceStack
|
|
544
|
+
} from "./presence-stack";
|
|
545
|
+
import {
|
|
546
|
+
SelectionPresence
|
|
547
|
+
} from "./selection-presence";
|
|
548
|
+
import {
|
|
549
|
+
ThreadBubble
|
|
550
|
+
} from "./thread-bubble";
|
|
551
|
+
import {
|
|
552
|
+
ConversationEmpty,
|
|
553
|
+
ConversationHeader,
|
|
554
|
+
ConversationLoading,
|
|
555
|
+
ConversationMessages,
|
|
556
|
+
ConversationScrollButton,
|
|
557
|
+
ConversationSuggestions,
|
|
558
|
+
ConversationThread,
|
|
559
|
+
ConversationTitle
|
|
560
|
+
} from "./conversation-thread";
|
|
542
561
|
import { InlineInput } from "./inline-input";
|
|
543
562
|
import {
|
|
544
563
|
ModelSelector
|
|
@@ -644,6 +663,14 @@ export {
|
|
|
644
663
|
ContextMenuSubContent,
|
|
645
664
|
ContextMenuSubTrigger,
|
|
646
665
|
ContextMenuTrigger,
|
|
666
|
+
ConversationEmpty,
|
|
667
|
+
ConversationHeader,
|
|
668
|
+
ConversationLoading,
|
|
669
|
+
ConversationMessages,
|
|
670
|
+
ConversationScrollButton,
|
|
671
|
+
ConversationSuggestions,
|
|
672
|
+
ConversationThread,
|
|
673
|
+
ConversationTitle,
|
|
647
674
|
CookieConsent,
|
|
648
675
|
CountdownTimer,
|
|
649
676
|
CreditBadge,
|
|
@@ -780,6 +807,7 @@ export {
|
|
|
780
807
|
PopoverContent,
|
|
781
808
|
PopoverTrigger,
|
|
782
809
|
Prerequisites,
|
|
810
|
+
PresenceStack,
|
|
783
811
|
ProTip,
|
|
784
812
|
ProfileSection,
|
|
785
813
|
ProgressBar,
|
|
@@ -817,6 +845,7 @@ export {
|
|
|
817
845
|
SelectSeparator,
|
|
818
846
|
SelectTrigger,
|
|
819
847
|
SelectValue,
|
|
848
|
+
SelectionPresence,
|
|
820
849
|
Separator,
|
|
821
850
|
SeverityBadge,
|
|
822
851
|
ShareDialog,
|
|
@@ -872,6 +901,7 @@ export {
|
|
|
872
901
|
ThemeProvider,
|
|
873
902
|
ThemeToggle,
|
|
874
903
|
ThinkingBlock,
|
|
904
|
+
ThreadBubble,
|
|
875
905
|
TickerTape,
|
|
876
906
|
Toast,
|
|
877
907
|
ToastAction,
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import {
|
|
4
|
+
forwardRef
|
|
5
|
+
} from "react";
|
|
6
|
+
import { cn } from "../../lib/utils";
|
|
7
|
+
const STATUS_DOT = {
|
|
8
|
+
active: "bg-emerald-500",
|
|
9
|
+
away: "bg-amber-500",
|
|
10
|
+
idle: "bg-muted-foreground",
|
|
11
|
+
offline: "bg-muted-foreground/40"
|
|
12
|
+
};
|
|
13
|
+
const DEFAULT_LABELS = {
|
|
14
|
+
overflowSuffix: "more",
|
|
15
|
+
region: "Live presence"
|
|
16
|
+
};
|
|
17
|
+
const Avatar = (props) => {
|
|
18
|
+
const { user } = props;
|
|
19
|
+
const status = user.status ?? "active";
|
|
20
|
+
return /* @__PURE__ */ jsxs(
|
|
21
|
+
"span",
|
|
22
|
+
{
|
|
23
|
+
className: "relative -ml-2 inline-flex h-7 w-7 items-center justify-center rounded-full border-2 border-background text-[11px] font-semibold text-white shadow-sm first:ml-0",
|
|
24
|
+
"data-presence-stack-status": status,
|
|
25
|
+
"data-presence-stack-user": user.id,
|
|
26
|
+
style: { backgroundColor: user.color ?? "var(--foreground)" },
|
|
27
|
+
title: user.name,
|
|
28
|
+
children: [
|
|
29
|
+
user.initial,
|
|
30
|
+
/* @__PURE__ */ jsx(
|
|
31
|
+
"span",
|
|
32
|
+
{
|
|
33
|
+
"aria-hidden": "true",
|
|
34
|
+
className: cn(
|
|
35
|
+
"absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border border-background",
|
|
36
|
+
STATUS_DOT[status]
|
|
37
|
+
),
|
|
38
|
+
"data-presence-stack-dot": true
|
|
39
|
+
}
|
|
40
|
+
)
|
|
41
|
+
]
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
const PresenceStack = forwardRef(
|
|
46
|
+
(props, ref) => {
|
|
47
|
+
const {
|
|
48
|
+
className,
|
|
49
|
+
labels,
|
|
50
|
+
max = 5,
|
|
51
|
+
onOverflowActivate,
|
|
52
|
+
users,
|
|
53
|
+
...rest
|
|
54
|
+
} = props;
|
|
55
|
+
const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
|
|
56
|
+
const visible = max >= users.length ? users : users.slice(0, max);
|
|
57
|
+
const hidden = users.length - visible.length;
|
|
58
|
+
const handleOverflow = () => {
|
|
59
|
+
onOverflowActivate?.();
|
|
60
|
+
};
|
|
61
|
+
return /* @__PURE__ */ jsxs(
|
|
62
|
+
"div",
|
|
63
|
+
{
|
|
64
|
+
"aria-label": resolvedLabels.region,
|
|
65
|
+
className: cn("inline-flex items-center pl-2", className),
|
|
66
|
+
"data-presence-stack": true,
|
|
67
|
+
ref,
|
|
68
|
+
role: "group",
|
|
69
|
+
...rest,
|
|
70
|
+
children: [
|
|
71
|
+
visible.map((user) => /* @__PURE__ */ jsx(Avatar, { user }, user.id)),
|
|
72
|
+
hidden > 0 ? renderOverflow({
|
|
73
|
+
count: hidden,
|
|
74
|
+
handleClick: handleOverflow,
|
|
75
|
+
handlerProvided: Boolean(onOverflowActivate),
|
|
76
|
+
labels: resolvedLabels
|
|
77
|
+
}) : null
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
PresenceStack.displayName = "PresenceStack";
|
|
84
|
+
const renderOverflow = (input) => {
|
|
85
|
+
const text = `+${input.count}`;
|
|
86
|
+
const aria = `${input.count} ${input.labels.overflowSuffix}`;
|
|
87
|
+
const className = "relative -ml-2 inline-flex h-7 min-w-7 items-center justify-center rounded-full border-2 border-background bg-muted px-1.5 text-[10px] font-semibold text-muted-foreground shadow-sm";
|
|
88
|
+
if (input.handlerProvided) {
|
|
89
|
+
return /* @__PURE__ */ jsx(
|
|
90
|
+
"button",
|
|
91
|
+
{
|
|
92
|
+
"aria-label": aria,
|
|
93
|
+
className: cn(
|
|
94
|
+
className,
|
|
95
|
+
"transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
96
|
+
),
|
|
97
|
+
"data-presence-stack-overflow": true,
|
|
98
|
+
onClick: input.handleClick,
|
|
99
|
+
type: "button",
|
|
100
|
+
children: text
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
return /* @__PURE__ */ jsx("span", { "aria-label": aria, className, "data-presence-stack-overflow": true, children: text });
|
|
105
|
+
};
|
|
106
|
+
export {
|
|
107
|
+
PresenceStack
|
|
108
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import {
|
|
4
|
+
forwardRef
|
|
5
|
+
} from "react";
|
|
6
|
+
import { cn } from "../../lib/utils";
|
|
7
|
+
const DEFAULT_LABELS = {
|
|
8
|
+
region: "Selection presence"
|
|
9
|
+
};
|
|
10
|
+
const SelectionPresence = forwardRef((props, ref) => {
|
|
11
|
+
const { className, color, height, labels, name, width, x, y, ...rest } = props;
|
|
12
|
+
const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
|
|
13
|
+
const accent = color ?? "var(--foreground)";
|
|
14
|
+
const ariaLabel = typeof name === "string" ? `${resolvedLabels.region}: ${name}` : resolvedLabels.region;
|
|
15
|
+
return /* @__PURE__ */ jsx(
|
|
16
|
+
"div",
|
|
17
|
+
{
|
|
18
|
+
"aria-label": ariaLabel,
|
|
19
|
+
className: cn(
|
|
20
|
+
"pointer-events-none absolute z-20 rounded-md border-2 border-dashed",
|
|
21
|
+
className
|
|
22
|
+
),
|
|
23
|
+
"data-selection-presence": true,
|
|
24
|
+
ref,
|
|
25
|
+
role: "img",
|
|
26
|
+
style: {
|
|
27
|
+
backgroundColor: `color-mix(in srgb, ${accent} 10%, transparent)`,
|
|
28
|
+
borderColor: accent,
|
|
29
|
+
height,
|
|
30
|
+
left: x,
|
|
31
|
+
top: y,
|
|
32
|
+
width
|
|
33
|
+
},
|
|
34
|
+
...rest,
|
|
35
|
+
children: name === null || name === void 0 ? null : /* @__PURE__ */ jsx(
|
|
36
|
+
"span",
|
|
37
|
+
{
|
|
38
|
+
className: "absolute -top-5 left-0 inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm",
|
|
39
|
+
"data-selection-presence-chip": true,
|
|
40
|
+
style: { backgroundColor: accent },
|
|
41
|
+
children: name
|
|
42
|
+
}
|
|
43
|
+
)
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
});
|
|
47
|
+
SelectionPresence.displayName = "SelectionPresence";
|
|
48
|
+
export {
|
|
49
|
+
SelectionPresence
|
|
50
|
+
};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import {
|
|
4
|
+
forwardRef
|
|
5
|
+
} from "react";
|
|
6
|
+
import { cn } from "../../lib/utils";
|
|
7
|
+
const DEFAULT_LABELS = {
|
|
8
|
+
empty: "No replies yet",
|
|
9
|
+
region: "Comment thread"
|
|
10
|
+
};
|
|
11
|
+
const Message = (props) => {
|
|
12
|
+
const { message } = props;
|
|
13
|
+
return /* @__PURE__ */ jsxs("li", { className: "space-y-0.5", "data-thread-bubble-message": message.id, children: [
|
|
14
|
+
/* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-2 text-[10px]", children: [
|
|
15
|
+
/* @__PURE__ */ jsx(
|
|
16
|
+
"span",
|
|
17
|
+
{
|
|
18
|
+
className: "font-semibold",
|
|
19
|
+
"data-thread-bubble-author": true,
|
|
20
|
+
style: message.authorColor ? { color: message.authorColor } : void 0,
|
|
21
|
+
children: message.author
|
|
22
|
+
}
|
|
23
|
+
),
|
|
24
|
+
message.ts ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "data-thread-bubble-ts": true, children: message.ts }) : null
|
|
25
|
+
] }),
|
|
26
|
+
/* @__PURE__ */ jsx("p", { className: "text-xs text-foreground", "data-thread-bubble-body": true, children: message.body })
|
|
27
|
+
] });
|
|
28
|
+
};
|
|
29
|
+
const ThreadBubble = forwardRef(
|
|
30
|
+
(props, ref) => {
|
|
31
|
+
const { className, footer, labels, messages, onResolve, title, ...rest } = props;
|
|
32
|
+
const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
|
|
33
|
+
const handleResolve = () => {
|
|
34
|
+
onResolve?.();
|
|
35
|
+
};
|
|
36
|
+
return /* @__PURE__ */ jsxs(
|
|
37
|
+
"section",
|
|
38
|
+
{
|
|
39
|
+
"aria-label": resolvedLabels.region,
|
|
40
|
+
className: cn(
|
|
41
|
+
"flex w-72 flex-col gap-2 rounded-lg border border-border bg-background p-3 text-foreground shadow-md",
|
|
42
|
+
className
|
|
43
|
+
),
|
|
44
|
+
"data-thread-bubble": true,
|
|
45
|
+
ref,
|
|
46
|
+
...rest,
|
|
47
|
+
children: [
|
|
48
|
+
title || onResolve ? /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-2 text-[11px] uppercase tracking-wide text-muted-foreground", children: [
|
|
49
|
+
title ? /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", "data-thread-bubble-title": true, children: title }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
|
|
50
|
+
onResolve ? /* @__PURE__ */ jsx(
|
|
51
|
+
"button",
|
|
52
|
+
{
|
|
53
|
+
className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
54
|
+
"data-thread-bubble-resolve": true,
|
|
55
|
+
onClick: handleResolve,
|
|
56
|
+
type: "button",
|
|
57
|
+
children: "Resolve"
|
|
58
|
+
}
|
|
59
|
+
) : null
|
|
60
|
+
] }) : null,
|
|
61
|
+
messages.length === 0 ? /* @__PURE__ */ jsx(
|
|
62
|
+
"p",
|
|
63
|
+
{
|
|
64
|
+
className: "px-1 py-2 text-center text-[11px] text-muted-foreground",
|
|
65
|
+
"data-thread-bubble-state": "empty",
|
|
66
|
+
children: resolvedLabels.empty
|
|
67
|
+
}
|
|
68
|
+
) : /* @__PURE__ */ jsx("ul", { className: "space-y-2 overflow-y-auto", "data-thread-bubble-list": true, children: messages.map((message) => /* @__PURE__ */ jsx(Message, { message }, message.id)) }),
|
|
69
|
+
footer ? /* @__PURE__ */ jsx(
|
|
70
|
+
"footer",
|
|
71
|
+
{
|
|
72
|
+
className: "border-t border-border pt-2",
|
|
73
|
+
"data-thread-bubble-footer": true,
|
|
74
|
+
children: footer
|
|
75
|
+
}
|
|
76
|
+
) : null
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
ThreadBubble.displayName = "ThreadBubble";
|
|
83
|
+
export {
|
|
84
|
+
ThreadBubble
|
|
85
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
|
|
|
3
3
|
import * as class_variance_authority from 'class-variance-authority';
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
5
|
import * as react from 'react';
|
|
6
|
-
import react__default, { ReactNode, Component, ErrorInfo } from 'react';
|
|
6
|
+
import react__default, { ReactNode, Component, ErrorInfo, ComponentPropsWithoutRef } from 'react';
|
|
7
7
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
8
8
|
import { DayPicker } from 'react-day-picker';
|
|
9
9
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
@@ -3460,6 +3460,342 @@ declare const ObjectHandle: react.ForwardRefExoticComponent<Omit<Omit<react.Deta
|
|
|
3460
3460
|
label?: ReactNode;
|
|
3461
3461
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
3462
3462
|
|
|
3463
|
+
/**
|
|
3464
|
+
* Presence status — drives the corner dot color.
|
|
3465
|
+
*
|
|
3466
|
+
* @public
|
|
3467
|
+
*/
|
|
3468
|
+
type PresenceStatus = "active" | "away" | "idle" | "offline";
|
|
3469
|
+
/**
|
|
3470
|
+
* One user in the presence stack.
|
|
3471
|
+
*
|
|
3472
|
+
* @public
|
|
3473
|
+
*/
|
|
3474
|
+
type PresenceUser = {
|
|
3475
|
+
/** Optional accent color (hex / oklch / var). Drives the avatar fill. */
|
|
3476
|
+
color?: string;
|
|
3477
|
+
/** Stable identifier — used as the React key. */
|
|
3478
|
+
id: string;
|
|
3479
|
+
/** Avatar initial / glyph. */
|
|
3480
|
+
initial: ReactNode;
|
|
3481
|
+
/** Display name shown on hover (`title` attribute). */
|
|
3482
|
+
name?: string;
|
|
3483
|
+
/** Optional status. Defaults to `"active"`. */
|
|
3484
|
+
status?: PresenceStatus;
|
|
3485
|
+
};
|
|
3486
|
+
/**
|
|
3487
|
+
* Localizable strings.
|
|
3488
|
+
*
|
|
3489
|
+
* @public
|
|
3490
|
+
*/
|
|
3491
|
+
type PresenceStackLabels = {
|
|
3492
|
+
/** Suffix for the overflow chip. Defaults to `"more"`. */
|
|
3493
|
+
overflowSuffix?: string;
|
|
3494
|
+
/** Aria-label override. Defaults to `"Live presence"`. */
|
|
3495
|
+
region?: string;
|
|
3496
|
+
};
|
|
3497
|
+
/**
|
|
3498
|
+
* Props for {@link PresenceStack}.
|
|
3499
|
+
*
|
|
3500
|
+
* @public
|
|
3501
|
+
*/
|
|
3502
|
+
type PresenceStackProps = {
|
|
3503
|
+
/** Localizable strings. */
|
|
3504
|
+
labels?: PresenceStackLabels;
|
|
3505
|
+
/** Cap the rendered users; the rest collapse into a `+N` chip. Defaults to `5`. */
|
|
3506
|
+
max?: number;
|
|
3507
|
+
/** Optional click handler for the overflow chip. */
|
|
3508
|
+
onOverflowActivate?: () => void;
|
|
3509
|
+
/** Users sorted in render order (most-relevant first). */
|
|
3510
|
+
users: PresenceUser[];
|
|
3511
|
+
} & ComponentPropsWithoutRef<"div">;
|
|
3512
|
+
/**
|
|
3513
|
+
* Overlapping live-presence avatars showing who is in the canvas right
|
|
3514
|
+
* now. Each avatar carries an accent color, an initial, and a status
|
|
3515
|
+
* dot. Distinct from `AvatarGroup` (a static participant grouping):
|
|
3516
|
+
* this primitive centers on live status, a sane overflow, and
|
|
3517
|
+
* interactive expansion.
|
|
3518
|
+
*
|
|
3519
|
+
* Pure presentation; the host owns the websocket roster + maps user
|
|
3520
|
+
* ids to colors.
|
|
3521
|
+
*
|
|
3522
|
+
* @example
|
|
3523
|
+
* ```tsx
|
|
3524
|
+
* <PresenceStack
|
|
3525
|
+
* max={4}
|
|
3526
|
+
* users={[
|
|
3527
|
+
* { id: "1", initial: "B", color: "#5b8def", name: "Bea" },
|
|
3528
|
+
* { id: "2", initial: "L", color: "#10b981", name: "Lior", status: "away" },
|
|
3529
|
+
* { id: "3", initial: "S", color: "#f59e0b", name: "Sam", status: "idle" },
|
|
3530
|
+
* ]}
|
|
3531
|
+
* onOverflowActivate={() => openRoster()}
|
|
3532
|
+
* />
|
|
3533
|
+
* ```
|
|
3534
|
+
*
|
|
3535
|
+
* @public
|
|
3536
|
+
*/
|
|
3537
|
+
declare const PresenceStack: react.ForwardRefExoticComponent<{
|
|
3538
|
+
/** Localizable strings. */
|
|
3539
|
+
labels?: PresenceStackLabels;
|
|
3540
|
+
/** Cap the rendered users; the rest collapse into a `+N` chip. Defaults to `5`. */
|
|
3541
|
+
max?: number;
|
|
3542
|
+
/** Optional click handler for the overflow chip. */
|
|
3543
|
+
onOverflowActivate?: () => void;
|
|
3544
|
+
/** Users sorted in render order (most-relevant first). */
|
|
3545
|
+
users: PresenceUser[];
|
|
3546
|
+
} & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
3547
|
+
|
|
3548
|
+
/**
|
|
3549
|
+
* Localizable strings.
|
|
3550
|
+
*
|
|
3551
|
+
* @public
|
|
3552
|
+
*/
|
|
3553
|
+
type SelectionPresenceLabels = {
|
|
3554
|
+
/** Aria-label override. Defaults to `"Selection presence"`. */
|
|
3555
|
+
region?: string;
|
|
3556
|
+
};
|
|
3557
|
+
/**
|
|
3558
|
+
* Props for {@link SelectionPresence}.
|
|
3559
|
+
*
|
|
3560
|
+
* @public
|
|
3561
|
+
*/
|
|
3562
|
+
type SelectionPresenceProps = {
|
|
3563
|
+
/** Tailwind / CSS color used for the border + chip. Defaults to `var(--foreground)`. */
|
|
3564
|
+
color?: string;
|
|
3565
|
+
/** Selection rectangle height in pixels. */
|
|
3566
|
+
height: number;
|
|
3567
|
+
/** Localizable strings. */
|
|
3568
|
+
labels?: SelectionPresenceLabels;
|
|
3569
|
+
/** Optional name shown in the corner chip (e.g. owner of the selection). */
|
|
3570
|
+
name?: ReactNode;
|
|
3571
|
+
/** Selection rectangle width in pixels. */
|
|
3572
|
+
width: number;
|
|
3573
|
+
/** Selection rectangle X (top-left) in canvas pixels. */
|
|
3574
|
+
x: number;
|
|
3575
|
+
/** Selection rectangle Y (top-left) in canvas pixels. */
|
|
3576
|
+
y: number;
|
|
3577
|
+
} & ComponentPropsWithoutRef<"div">;
|
|
3578
|
+
/**
|
|
3579
|
+
* Overlay marking what another user has selected on the canvas. The
|
|
3580
|
+
* dashed border + soft fill stay calm so they communicate
|
|
3581
|
+
* "someone-else's-selection" without blocking primary content. Pure
|
|
3582
|
+
* presentation; the host computes the rect from the remote user's
|
|
3583
|
+
* viewport and supplies an accent color per user.
|
|
3584
|
+
*
|
|
3585
|
+
* The wrapper is `pointer-events: none` so host gestures pass through.
|
|
3586
|
+
*
|
|
3587
|
+
* @example
|
|
3588
|
+
* ```tsx
|
|
3589
|
+
* <div className="relative h-screen w-screen">
|
|
3590
|
+
* <Canvas />
|
|
3591
|
+
* <SelectionPresence
|
|
3592
|
+
* x={120} y={80} width={240} height={120}
|
|
3593
|
+
* color="#5b8def"
|
|
3594
|
+
* name="Bea"
|
|
3595
|
+
* />
|
|
3596
|
+
* </div>
|
|
3597
|
+
* ```
|
|
3598
|
+
*
|
|
3599
|
+
* @public
|
|
3600
|
+
*/
|
|
3601
|
+
declare const SelectionPresence: react.ForwardRefExoticComponent<{
|
|
3602
|
+
/** Tailwind / CSS color used for the border + chip. Defaults to `var(--foreground)`. */
|
|
3603
|
+
color?: string;
|
|
3604
|
+
/** Selection rectangle height in pixels. */
|
|
3605
|
+
height: number;
|
|
3606
|
+
/** Localizable strings. */
|
|
3607
|
+
labels?: SelectionPresenceLabels;
|
|
3608
|
+
/** Optional name shown in the corner chip (e.g. owner of the selection). */
|
|
3609
|
+
name?: ReactNode;
|
|
3610
|
+
/** Selection rectangle width in pixels. */
|
|
3611
|
+
width: number;
|
|
3612
|
+
/** Selection rectangle X (top-left) in canvas pixels. */
|
|
3613
|
+
x: number;
|
|
3614
|
+
/** Selection rectangle Y (top-left) in canvas pixels. */
|
|
3615
|
+
y: number;
|
|
3616
|
+
} & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
3617
|
+
|
|
3618
|
+
/**
|
|
3619
|
+
* One message in a thread bubble.
|
|
3620
|
+
*
|
|
3621
|
+
* @public
|
|
3622
|
+
*/
|
|
3623
|
+
type ThreadMessage = {
|
|
3624
|
+
/** Author display name. */
|
|
3625
|
+
author: ReactNode;
|
|
3626
|
+
/** Optional accent color for the author chip. */
|
|
3627
|
+
authorColor?: string;
|
|
3628
|
+
/** Message body — rendered as-is, can be plain text or a `ReactNode`. */
|
|
3629
|
+
body: ReactNode;
|
|
3630
|
+
/** Stable identifier — used as the React key + analytics hook. */
|
|
3631
|
+
id: string;
|
|
3632
|
+
/** Pre-formatted timestamp (host owns formatting). */
|
|
3633
|
+
ts?: ReactNode;
|
|
3634
|
+
};
|
|
3635
|
+
/**
|
|
3636
|
+
* Localizable strings.
|
|
3637
|
+
*
|
|
3638
|
+
* @public
|
|
3639
|
+
*/
|
|
3640
|
+
type ThreadBubbleLabels = {
|
|
3641
|
+
/** Empty-state copy. Defaults to `"No replies yet"`. */
|
|
3642
|
+
empty?: string;
|
|
3643
|
+
/** Aria-label override. Defaults to `"Comment thread"`. */
|
|
3644
|
+
region?: string;
|
|
3645
|
+
};
|
|
3646
|
+
/**
|
|
3647
|
+
* Props for {@link ThreadBubble}.
|
|
3648
|
+
*
|
|
3649
|
+
* @public
|
|
3650
|
+
*/
|
|
3651
|
+
type ThreadBubbleProps = {
|
|
3652
|
+
/** Optional footer slot — typically a reply input. */
|
|
3653
|
+
footer?: ReactNode;
|
|
3654
|
+
/** Localizable strings. */
|
|
3655
|
+
labels?: ThreadBubbleLabels;
|
|
3656
|
+
/** Messages newest-last. */
|
|
3657
|
+
messages: ThreadMessage[];
|
|
3658
|
+
/** Optional resolve handler. When provided, a "Resolve" button appears in the header. */
|
|
3659
|
+
onResolve?: () => void;
|
|
3660
|
+
/** Optional thread title (e.g. anchored object name). */
|
|
3661
|
+
title?: ReactNode;
|
|
3662
|
+
} & ComponentPropsWithoutRef<"section">;
|
|
3663
|
+
/**
|
|
3664
|
+
* Expanded discussion bubble for an anchored canvas comment thread.
|
|
3665
|
+
* Renders a stacked message list plus an optional reply slot via
|
|
3666
|
+
* `footer`. Pair with {@link "../comment-pin/comment-pin".CommentPin}: pin marks the location,
|
|
3667
|
+
* bubble holds the conversation.
|
|
3668
|
+
*
|
|
3669
|
+
* Pure presentation; the host owns the message store + supplies the
|
|
3670
|
+
* resolve handler for hosts that allow threading.
|
|
3671
|
+
*
|
|
3672
|
+
* @example
|
|
3673
|
+
* ```tsx
|
|
3674
|
+
* <ThreadBubble
|
|
3675
|
+
* title="research-2025"
|
|
3676
|
+
* messages={[
|
|
3677
|
+
* { id: "1", author: "Bea", authorColor: "#5b8def", body: "Why fallback?", ts: "12s" },
|
|
3678
|
+
* { id: "2", author: "Lior", authorColor: "#10b981", body: "p95 spike — see graph", ts: "9s" },
|
|
3679
|
+
* ]}
|
|
3680
|
+
* footer={<ReplyInput onSubmit={post} />}
|
|
3681
|
+
* onResolve={resolve}
|
|
3682
|
+
* />
|
|
3683
|
+
* ```
|
|
3684
|
+
*
|
|
3685
|
+
* @public
|
|
3686
|
+
*/
|
|
3687
|
+
declare const ThreadBubble: react.ForwardRefExoticComponent<{
|
|
3688
|
+
/** Optional footer slot — typically a reply input. */
|
|
3689
|
+
footer?: ReactNode;
|
|
3690
|
+
/** Localizable strings. */
|
|
3691
|
+
labels?: ThreadBubbleLabels;
|
|
3692
|
+
/** Messages newest-last. */
|
|
3693
|
+
messages: ThreadMessage[];
|
|
3694
|
+
/** Optional resolve handler. When provided, a "Resolve" button appears in the header. */
|
|
3695
|
+
onResolve?: () => void;
|
|
3696
|
+
/** Optional thread title (e.g. anchored object name). */
|
|
3697
|
+
title?: ReactNode;
|
|
3698
|
+
} & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
3699
|
+
|
|
3700
|
+
/** A single tool call made by the assistant. */
|
|
3701
|
+
type ToolCall = {
|
|
3702
|
+
id: string;
|
|
3703
|
+
input?: Record<string, unknown>;
|
|
3704
|
+
name: string;
|
|
3705
|
+
result?: string;
|
|
3706
|
+
};
|
|
3707
|
+
/** A single message in the conversation. */
|
|
3708
|
+
type ConversationMessage = {
|
|
3709
|
+
content: string;
|
|
3710
|
+
id: string;
|
|
3711
|
+
/** Whether the assistant still streams this individual message. */
|
|
3712
|
+
isStreaming?: boolean;
|
|
3713
|
+
role: "assistant" | "user";
|
|
3714
|
+
/** AI reasoning/thinking content. The component renders this via ThinkingBlock. */
|
|
3715
|
+
thinking?: string;
|
|
3716
|
+
toolCalls?: ToolCall[];
|
|
3717
|
+
};
|
|
3718
|
+
type ConversationThreadProps = {
|
|
3719
|
+
children?: ReactNode;
|
|
3720
|
+
className?: string;
|
|
3721
|
+
/** Whether the assistant generates a response. */
|
|
3722
|
+
isStreaming?: boolean;
|
|
3723
|
+
messages: ConversationMessage[];
|
|
3724
|
+
onFeedback?: (messageId: string, feedback: "negative" | "positive") => void;
|
|
3725
|
+
onRetry?: (messageId: string) => void;
|
|
3726
|
+
/** Calls onSend with the suggestion text after the user clicks a ConversationSuggestions chip. */
|
|
3727
|
+
onSend?: (message: string) => void;
|
|
3728
|
+
};
|
|
3729
|
+
type ConversationHeaderProps = {
|
|
3730
|
+
children?: ReactNode;
|
|
3731
|
+
className?: string;
|
|
3732
|
+
};
|
|
3733
|
+
type ConversationTitleProps = {
|
|
3734
|
+
children?: ReactNode;
|
|
3735
|
+
className?: string;
|
|
3736
|
+
};
|
|
3737
|
+
type ConversationMessagesProps = {
|
|
3738
|
+
/** Overlay children: ConversationEmpty, ConversationScrollButton, ConversationLoading. */
|
|
3739
|
+
children?: ReactNode;
|
|
3740
|
+
className?: string;
|
|
3741
|
+
};
|
|
3742
|
+
type ConversationEmptyProps = {
|
|
3743
|
+
children?: ReactNode;
|
|
3744
|
+
className?: string;
|
|
3745
|
+
};
|
|
3746
|
+
type ConversationSuggestionsProps = {
|
|
3747
|
+
className?: string;
|
|
3748
|
+
suggestions?: string[];
|
|
3749
|
+
};
|
|
3750
|
+
type ConversationScrollButtonProps = {
|
|
3751
|
+
className?: string;
|
|
3752
|
+
};
|
|
3753
|
+
type ConversationLoadingProps = {
|
|
3754
|
+
className?: string;
|
|
3755
|
+
};
|
|
3756
|
+
/**
|
|
3757
|
+
* Root provider for the ConversationThread compound component family.
|
|
3758
|
+
*
|
|
3759
|
+
* @example
|
|
3760
|
+
* ```tsx
|
|
3761
|
+
* <ConversationThread messages={messages} isStreaming={isStreaming} onSend={handleSend}>
|
|
3762
|
+
* <ConversationHeader><ConversationTitle>Chat</ConversationTitle></ConversationHeader>
|
|
3763
|
+
* <ConversationMessages>
|
|
3764
|
+
* <ConversationEmpty>
|
|
3765
|
+
* <ConversationSuggestions suggestions={["Hello!", "Help me with..."]} />
|
|
3766
|
+
* </ConversationEmpty>
|
|
3767
|
+
* <ConversationScrollButton />
|
|
3768
|
+
* <ConversationLoading />
|
|
3769
|
+
* </ConversationMessages>
|
|
3770
|
+
* </ConversationThread>
|
|
3771
|
+
* ```
|
|
3772
|
+
*/
|
|
3773
|
+
declare const ConversationThread: react.ForwardRefExoticComponent<ConversationThreadProps & react.RefAttributes<HTMLDivElement>>;
|
|
3774
|
+
/** Optional header slot, rendered above the message list. */
|
|
3775
|
+
declare const ConversationHeader: react.ForwardRefExoticComponent<ConversationHeaderProps & react.RefAttributes<HTMLDivElement>>;
|
|
3776
|
+
/** Title text for use inside ConversationHeader. */
|
|
3777
|
+
declare const ConversationTitle: react.ForwardRefExoticComponent<ConversationTitleProps & react.RefAttributes<HTMLHeadingElement>>;
|
|
3778
|
+
/**
|
|
3779
|
+
* Scrollable message list container. Renders messages from context.
|
|
3780
|
+
* Pass ConversationEmpty, ConversationScrollButton, and ConversationLoading as children —
|
|
3781
|
+
* the component renders these as absolute overlays that read state from context.
|
|
3782
|
+
*/
|
|
3783
|
+
declare const ConversationMessages: react.ForwardRefExoticComponent<ConversationMessagesProps & react.RefAttributes<HTMLDivElement>>;
|
|
3784
|
+
/**
|
|
3785
|
+
* Shown when the message list is empty. Hides automatically once messages exist.
|
|
3786
|
+
* Renders as a centered overlay — pass ConversationSuggestions or custom content as children.
|
|
3787
|
+
*/
|
|
3788
|
+
declare const ConversationEmpty: react.ForwardRefExoticComponent<ConversationEmptyProps & react.RefAttributes<HTMLDivElement>>;
|
|
3789
|
+
/** Suggested prompt chips displayed in the empty state. Calls onSend when clicked. */
|
|
3790
|
+
declare const ConversationSuggestions: react.ForwardRefExoticComponent<ConversationSuggestionsProps & react.RefAttributes<HTMLDivElement>>;
|
|
3791
|
+
/** Floating button that appears when the user scrolls up, to jump back to the bottom. */
|
|
3792
|
+
declare const ConversationScrollButton: react.ForwardRefExoticComponent<ConversationScrollButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
3793
|
+
/**
|
|
3794
|
+
* Typing indicator shown while the assistant is streaming a response.
|
|
3795
|
+
* Visible when isStreaming is true and the last message role is "assistant".
|
|
3796
|
+
*/
|
|
3797
|
+
declare const ConversationLoading: react.ForwardRefExoticComponent<ConversationLoadingProps & react.RefAttributes<HTMLDivElement>>;
|
|
3798
|
+
|
|
3463
3799
|
type InlineInputProps = {
|
|
3464
3800
|
className?: string;
|
|
3465
3801
|
/** Called when user presses Escape or blurs without changes. */
|
|
@@ -3624,4 +3960,4 @@ declare function useHorizontalScroll(): UseHorizontalScrollReturn;
|
|
|
3624
3960
|
|
|
3625
3961
|
declare function cn(...inputs: ClassValue[]): string;
|
|
3626
3962
|
|
|
3627
|
-
export { AIChatInput, type AIChatInputProps, AIMessageBubble, type AIMessageBubbleProps, AISourceCitation, type AISourceCitationProps, AIStreamingText, type AIStreamingTextProps, AIToolCallDisplay, type AIToolCallDisplayProps, type AIToolCallStatus, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActivityHeatmap, type ActivityHeatmapItem, type ActivityHeatmapProps, ActivityLog, type ActivityLogItem, type ActivityLogProps, type ActivityLogTone, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnchorPort, type AnchorPortProps, AnimatedText, type AnimatedTextProps, Annotation, type AnnotationProps, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, BarChart, BeforeAfter, type BeforeAfterProps, BlogCard, BorderBeam, type BorderBeamProps, BottomBar, type BottomBarProps, Breadcrumb, type BreadcrumbItem, Button, type ButtonProps, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutVariant, CandlestickChart, type CandlestickChartProps, type CandlestickDatum, CanvasShell, type CanvasShellInsets, type CanvasShellProps, type CanvasShellRouteConfig, CanvasView, type CanvasViewHandle, type CanvasViewProps, type CanvasViewport, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryFilter, type ChatDockMessage, ChatDockSection, type ChatDockSectionProps, Checkbox, Checklist, type ChecklistItem, type ChecklistProps, CodeBlock, CodePlayground, type CodePlaygroundProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommonMistake, type CommonMistakeProps, Comparison, type ComparisonProps, CompletionDialog, type CompletionDialogProps, ConnectorEdge, type ConnectorEdgePoint, type ConnectorEdgeProps, Content, ContentCard$1 as ContentCard, ContentIntro, type ContentIntroLabels, type ContentIntroProps, type ContentIntroSection, type ContentMeta, type ContentProgress, type ContentSection, type ContentSectionMinimal, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CookieConsent, type CookieConsentProps, type CopyStatus, CountdownTimer, type CountdownTimerProps, CreditBadge, type CreditBadgeProps, type CreditBadgeStatus, Curriculum, CurriculumLesson, type CurriculumLessonProps, CurriculumModule, type CurriculumModuleProps, type CurriculumProps, DataList, DataListItem, type DataListItemProps, DataListLabel, type DataListProps, DataListValue, DataTableComponent as DataTable, type DataTableFilter, type DataTableFilterOption, type DataTableProps, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type DifficultyLevel, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EdgeLabel, type EdgeLabelProps, Exercise, type ExerciseProps, FAQ, FAQItem, type FAQItemProps, type FAQProps, FileTree, type FileTreeProps, FileUpload, type FileUploadProps, FilterBar, type FilterBarLabels, type FilterBarProps, type FilterOption, type FilterUpdates, Flashcard, type FlashcardProps, FloatingActionButton, type FloatingActionButtonProps, FlowControls, type FlowControlsProps, FlowDiagram, type FlowDiagramEdge, type FlowDiagramNode, type FlowDiagramProps, FlowErrorBoundary, FlowFullscreen, type FlowFullscreenProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type FormProps, GlassPanel, type GlassPanelProps, Glossary, type GlossaryProps, GroupHull, type GroupHullProps, Highlight, type HighlightProps, HorizontalScrollRow, type HorizontalScrollRowProps, HoverCard, HoverCardContent, HoverCardTrigger, InlineInput, type InlineInputProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, KeyConcept, type KeyConceptProps, type KeyboardShortcut, KeyboardShortcutsHelp, type KeyboardShortcutsHelpProps, LANGUAGE_NAMES, Label, LangProvider, LearningObjectives, type LearningObjectivesProps, LeftRail, type LeftRailProps, type LessonDifficulty, type LessonStatus, LineChart, LiveFeed, type LiveFeedEvent, type LiveFeedProps, MDXContent, MarketTreemap, type MarketTreemapItem, type MarketTreemapProps, Marquee, type MarqueeProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricGauge, type MetricGaugeProps, type MetricGaugeThreshold, type MiniMapMarker, MiniMapPanel, type MiniMapPanelProps, type ModelInfo, ModelSelector, type ModelSelectorProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, type NavItem, NavbarSaas, type NavbarSaasProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, type NumberInputProps, NumberTicker, type NumberTickerProps, ObjectCard, type ObjectCardAction, type ObjectCardMetric, type ObjectCardProps, ObjectHandle, type ObjectHandleProps, OrderBook, type OrderBookLevel, type OrderBookProps, OverviewBoard, type OverviewBoardItem, type OverviewBoardProps, OverviewCard, type OverviewCardProps, type OverviewCardTone, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PlanBadge, type PlanBadgeProps, type PlanBadgeState, type PlanBadgeTier, type PlatformConfig, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Prerequisites, type PrerequisitesProps, ProTip, type ProTipProps, type ProTipVariant, ProfileSection, ProgressBar, type ProgressBarProps, ContentCard as ProgressCard, type ContentCardProgress as ProgressCardProgress, type ContentCardProps as ProgressCardProps, ProgressTracker, ProgressTrackerBadge, type ProgressTrackerBadgeProps, ProgressTrackerModule, type ProgressTrackerModuleItem, type ProgressTrackerModuleProps, type ProgressTrackerModuleStatus, ProgressTrackerModules, type ProgressTrackerModulesProps, ProgressTrackerOverview, type ProgressTrackerOverviewProps, type ProgressTrackerProps, ProgressTrackerStat, type ProgressTrackerStatProps, ProgressTrackerStats, type ProgressTrackerStatsProps, Quiz, type QuizOption, type QuizProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, RightDock, type RightDockProps, RoleBadge, type RoleBadgeProps, type RoleBadgeRole, ScopeSelector, type ScopeSelectorNode, type ScopeSelectorProps, type ScopeSelectorSelection, ScrollArea, ScrollBar, SearchBar, SearchDialog, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeverityBadge, type SeverityBadgeLevel, type SeverityBadgeProps, ShareDialog, type ShareDialogLabels, type SharePlatform as ShareDialogPlatform, type ShareDialogProps, type SharePlatform$1 as SharePlatform, type SharePlatformConfig, ShareSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, type SidebarItem, SidebarProvider, type SidebarSection, SidebarToggle, type SidebarToggleProps, SimpleTerminal, type SimpleTerminalProps, Skeleton, Slider, Slideshow, type SlideshowLabels, type SlideshowProps, type SlideshowSection, SocialFAB, type SocialFabActionConfig, type SocialFabLabels, type SocialFabProps, SparklineGrid, type SparklineGridItem, type SparklineGridProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, StatusBoard, type StatusBoardItem, type StatusBoardProps, type StatusBoardStatus, StatusIndicator, type StatusIndicatorProps, Step, StepByStep, type StepByStepProps, StepNavigation, type StepNavigationProps, type StepProps, Stepper, type StepperProps, type StepperStep, SubscriptionCard, type SubscriptionCardProps, type SubscriptionCardStatus, Summary, type SummaryProps, Switch, TLDRSection, type TOCSection, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableOfContentsPanel, type TableOfContentsPanelProps, TableRow, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagsInput, type TagsInputProps, Terminal, type TerminalLine, type TerminalProps, Textarea, type TextareaProps, ThemeProvider, ThemeToggle, ThinkingBlock, type ThinkingBlockProps, TickerTape, type TickerTapeItem, type TickerTapeProps, Toast, ToastAction, ToastClose, ToastDescription, type ToastProps, ToastTitle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, Tour, type TourProps, type TourStep, TruncatedText, type TruncatedTextProps, TutorialCard, type TutorialCardLabels, type TutorialCardMeta, type TutorialCardProgress, type TutorialCardProps, TutorialComplete, type TutorialCompleteLabels, type TutorialCompleteProps, type TutorialCompleteRelatedContent, type TutorialCompleteSection, TutorialFilters, type TutorialFiltersLabels, type TutorialFiltersProps, TutorialIntroContent, type TutorialIntroContentProps, TutorialMDX, type TutorialMDXProps, type SupportedLanguage as UISupportedLanguage, UnicodeSpinner, type UnicodeSpinnerAnimation, type UnicodeSpinnerProps, UsageBreakdown, type UsageBreakdownItem, type UsageBreakdownProps, type UsageBreakdownTone, type UseFlowDiagramOptions, type UseFlowDiagramReturn, VideoEmbed, type VideoEmbedProps, type ViewOption, ViewSwitcher, type ViewSwitcherProps, WalletCard, type WalletCardProps, Watchlist, type WatchlistItem, type WatchlistProps, type WorkspaceOption, WorkspaceSwitcher, type WorkspaceSwitcherProps, WorldClockBar, type WorldClockBarProps, type WorldClockBarZone, ZoomHUD, type ZoomHUDProps, alertVariants, avatarGroupVariants, avatarItemVariants, badgeVariants, buttonVariants, cn, cookieConsentVariants, dataListItemVariants, dataListVariants, dotVariants, getOtherLanguage, mdxComponents, navigationMenuTriggerStyle, segmentedControlItemVariants, segmentedControlVariants, severityBadgeVariants, statCardVariants, statusIndicatorVariants, toggleVariants, useDebounce, useFlowDiagram, useFormField, useHorizontalScroll, useMobile, useProgressTrackerContext, useSidebar, useSocialFab };
|
|
3963
|
+
export { AIChatInput, type AIChatInputProps, AIMessageBubble, type AIMessageBubbleProps, AISourceCitation, type AISourceCitationProps, AIStreamingText, type AIStreamingTextProps, AIToolCallDisplay, type AIToolCallDisplayProps, type AIToolCallStatus, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActivityHeatmap, type ActivityHeatmapItem, type ActivityHeatmapProps, ActivityLog, type ActivityLogItem, type ActivityLogProps, type ActivityLogTone, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnchorPort, type AnchorPortProps, AnimatedText, type AnimatedTextProps, Annotation, type AnnotationProps, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, BarChart, BeforeAfter, type BeforeAfterProps, BlogCard, BorderBeam, type BorderBeamProps, BottomBar, type BottomBarProps, Breadcrumb, type BreadcrumbItem, Button, type ButtonProps, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutVariant, CandlestickChart, type CandlestickChartProps, type CandlestickDatum, CanvasShell, type CanvasShellInsets, type CanvasShellProps, type CanvasShellRouteConfig, CanvasView, type CanvasViewHandle, type CanvasViewProps, type CanvasViewport, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryFilter, type ChatDockMessage, ChatDockSection, type ChatDockSectionProps, Checkbox, Checklist, type ChecklistItem, type ChecklistProps, CodeBlock, CodePlayground, type CodePlaygroundProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommonMistake, type CommonMistakeProps, Comparison, type ComparisonProps, CompletionDialog, type CompletionDialogProps, ConnectorEdge, type ConnectorEdgePoint, type ConnectorEdgeProps, Content, ContentCard$1 as ContentCard, ContentIntro, type ContentIntroLabels, type ContentIntroProps, type ContentIntroSection, type ContentMeta, type ContentProgress, type ContentSection, type ContentSectionMinimal, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationEmpty, type ConversationEmptyProps, ConversationHeader, type ConversationHeaderProps, ConversationLoading, type ConversationLoadingProps, type ConversationMessage, ConversationMessages, type ConversationMessagesProps, ConversationScrollButton, type ConversationScrollButtonProps, ConversationSuggestions, type ConversationSuggestionsProps, ConversationThread, type ConversationThreadProps, ConversationTitle, type ConversationTitleProps, CookieConsent, type CookieConsentProps, type CopyStatus, CountdownTimer, type CountdownTimerProps, CreditBadge, type CreditBadgeProps, type CreditBadgeStatus, Curriculum, CurriculumLesson, type CurriculumLessonProps, CurriculumModule, type CurriculumModuleProps, type CurriculumProps, DataList, DataListItem, type DataListItemProps, DataListLabel, type DataListProps, DataListValue, DataTableComponent as DataTable, type DataTableFilter, type DataTableFilterOption, type DataTableProps, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type DifficultyLevel, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EdgeLabel, type EdgeLabelProps, Exercise, type ExerciseProps, FAQ, FAQItem, type FAQItemProps, type FAQProps, FileTree, type FileTreeProps, FileUpload, type FileUploadProps, FilterBar, type FilterBarLabels, type FilterBarProps, type FilterOption, type FilterUpdates, Flashcard, type FlashcardProps, FloatingActionButton, type FloatingActionButtonProps, FlowControls, type FlowControlsProps, FlowDiagram, type FlowDiagramEdge, type FlowDiagramNode, type FlowDiagramProps, FlowErrorBoundary, FlowFullscreen, type FlowFullscreenProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type FormProps, GlassPanel, type GlassPanelProps, Glossary, type GlossaryProps, GroupHull, type GroupHullProps, Highlight, type HighlightProps, HorizontalScrollRow, type HorizontalScrollRowProps, HoverCard, HoverCardContent, HoverCardTrigger, InlineInput, type InlineInputProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, KeyConcept, type KeyConceptProps, type KeyboardShortcut, KeyboardShortcutsHelp, type KeyboardShortcutsHelpProps, LANGUAGE_NAMES, Label, LangProvider, LearningObjectives, type LearningObjectivesProps, LeftRail, type LeftRailProps, type LessonDifficulty, type LessonStatus, LineChart, LiveFeed, type LiveFeedEvent, type LiveFeedProps, MDXContent, MarketTreemap, type MarketTreemapItem, type MarketTreemapProps, Marquee, type MarqueeProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricGauge, type MetricGaugeProps, type MetricGaugeThreshold, type MiniMapMarker, MiniMapPanel, type MiniMapPanelProps, type ModelInfo, ModelSelector, type ModelSelectorProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, type NavItem, NavbarSaas, type NavbarSaasProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, type NumberInputProps, NumberTicker, type NumberTickerProps, ObjectCard, type ObjectCardAction, type ObjectCardMetric, type ObjectCardProps, ObjectHandle, type ObjectHandleProps, OrderBook, type OrderBookLevel, type OrderBookProps, OverviewBoard, type OverviewBoardItem, type OverviewBoardProps, OverviewCard, type OverviewCardProps, type OverviewCardTone, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PlanBadge, type PlanBadgeProps, type PlanBadgeState, type PlanBadgeTier, type PlatformConfig, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Prerequisites, type PrerequisitesProps, PresenceStack, type PresenceStackLabels, type PresenceStackProps, type PresenceStatus, type PresenceUser, ProTip, type ProTipProps, type ProTipVariant, ProfileSection, ProgressBar, type ProgressBarProps, ContentCard as ProgressCard, type ContentCardProgress as ProgressCardProgress, type ContentCardProps as ProgressCardProps, ProgressTracker, ProgressTrackerBadge, type ProgressTrackerBadgeProps, ProgressTrackerModule, type ProgressTrackerModuleItem, type ProgressTrackerModuleProps, type ProgressTrackerModuleStatus, ProgressTrackerModules, type ProgressTrackerModulesProps, ProgressTrackerOverview, type ProgressTrackerOverviewProps, type ProgressTrackerProps, ProgressTrackerStat, type ProgressTrackerStatProps, ProgressTrackerStats, type ProgressTrackerStatsProps, Quiz, type QuizOption, type QuizProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, RightDock, type RightDockProps, RoleBadge, type RoleBadgeProps, type RoleBadgeRole, ScopeSelector, type ScopeSelectorNode, type ScopeSelectorProps, type ScopeSelectorSelection, ScrollArea, ScrollBar, SearchBar, SearchDialog, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectionPresence, type SelectionPresenceLabels, type SelectionPresenceProps, Separator, SeverityBadge, type SeverityBadgeLevel, type SeverityBadgeProps, ShareDialog, type ShareDialogLabels, type SharePlatform as ShareDialogPlatform, type ShareDialogProps, type SharePlatform$1 as SharePlatform, type SharePlatformConfig, ShareSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, type SidebarItem, SidebarProvider, type SidebarSection, SidebarToggle, type SidebarToggleProps, SimpleTerminal, type SimpleTerminalProps, Skeleton, Slider, Slideshow, type SlideshowLabels, type SlideshowProps, type SlideshowSection, SocialFAB, type SocialFabActionConfig, type SocialFabLabels, type SocialFabProps, SparklineGrid, type SparklineGridItem, type SparklineGridProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, StatusBoard, type StatusBoardItem, type StatusBoardProps, type StatusBoardStatus, StatusIndicator, type StatusIndicatorProps, Step, StepByStep, type StepByStepProps, StepNavigation, type StepNavigationProps, type StepProps, Stepper, type StepperProps, type StepperStep, SubscriptionCard, type SubscriptionCardProps, type SubscriptionCardStatus, Summary, type SummaryProps, Switch, TLDRSection, type TOCSection, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableOfContentsPanel, type TableOfContentsPanelProps, TableRow, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagsInput, type TagsInputProps, Terminal, type TerminalLine, type TerminalProps, Textarea, type TextareaProps, ThemeProvider, ThemeToggle, ThinkingBlock, type ThinkingBlockProps, ThreadBubble, type ThreadBubbleLabels, type ThreadBubbleProps, type ThreadMessage, TickerTape, type TickerTapeItem, type TickerTapeProps, Toast, ToastAction, ToastClose, ToastDescription, type ToastProps, ToastTitle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, type ToolCall, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, Tour, type TourProps, type TourStep, TruncatedText, type TruncatedTextProps, TutorialCard, type TutorialCardLabels, type TutorialCardMeta, type TutorialCardProgress, type TutorialCardProps, TutorialComplete, type TutorialCompleteLabels, type TutorialCompleteProps, type TutorialCompleteRelatedContent, type TutorialCompleteSection, TutorialFilters, type TutorialFiltersLabels, type TutorialFiltersProps, TutorialIntroContent, type TutorialIntroContentProps, TutorialMDX, type TutorialMDXProps, type SupportedLanguage as UISupportedLanguage, UnicodeSpinner, type UnicodeSpinnerAnimation, type UnicodeSpinnerProps, UsageBreakdown, type UsageBreakdownItem, type UsageBreakdownProps, type UsageBreakdownTone, type UseFlowDiagramOptions, type UseFlowDiagramReturn, VideoEmbed, type VideoEmbedProps, type ViewOption, ViewSwitcher, type ViewSwitcherProps, WalletCard, type WalletCardProps, Watchlist, type WatchlistItem, type WatchlistProps, type WorkspaceOption, WorkspaceSwitcher, type WorkspaceSwitcherProps, WorldClockBar, type WorldClockBarProps, type WorldClockBarZone, ZoomHUD, type ZoomHUDProps, alertVariants, avatarGroupVariants, avatarItemVariants, badgeVariants, buttonVariants, cn, cookieConsentVariants, dataListItemVariants, dataListVariants, dotVariants, getOtherLanguage, mdxComponents, navigationMenuTriggerStyle, segmentedControlItemVariants, segmentedControlVariants, severityBadgeVariants, statCardVariants, statusIndicatorVariants, toggleVariants, useDebounce, useFlowDiagram, useFormField, useHorizontalScroll, useMobile, useProgressTrackerContext, useSidebar, useSocialFab };
|
package/package.json
CHANGED