@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/thread.aui.js

@@ -0,0 +1,625 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { MarkdownText } from "./markdown-text.js";
+import { ToolFallback } from "./tool-fallback.aui.js";
+import { ReasoningContent, ReasoningText, ReasoningTrigger } from "./reasoning.js";
+import { Reasoning, ReasoningRoot } from "./reasoning.aui.js";
+import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments } from "./attachment.aui.js";
+import { File } from "./file.js";
+import { ThreadFollowupSuggestions } from "./follow-up-suggestions.aui.js";
+import { Image } from "./image.js";
+import { ToolGroupContent, ToolGroupRoot, ToolGroupTrigger } from "./tool-group.aui.js";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon, AudioLinesIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DownloadIcon, MicIcon, MoreHorizontalIcon, PencilIcon, PhoneIcon, RefreshCwIcon, SquareIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";
+import { ActionBarMorePrimitive, ActionBarPrimitive, AuiIf, BranchPickerPrimitive, ComposerPrimitive, ErrorPrimitive, MessagePrimitive, SuggestionPrimitive, ThreadPrimitive, groupPartByType, useAuiState } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/thread.aui.tsx
+var thread_aui_exports = /* @__PURE__ */ __exportAll({ Thread: () => Thread });
+const messageGroupBy = groupPartByType({
+	reasoning: ["group-chainOfThought", "group-reasoning"],
+	"tool-call": ["group-chainOfThought", "group-tool"],
+	"standalone-tool-call": []
+});
+const TASK_GROUP_PATH = ["group-chainOfThought", "group-task"];
+const taskAwareGroupBy = (part, context) => {
+	const path = messageGroupBy(part, context);
+	return part.type === "tool-call" && part.messages !== void 0 && path.length > 0 && !context?.toolUIs?.[part.toolName]?.length ? TASK_GROUP_PATH : path;
+};
+const EMPTY_COMPONENTS = {};
+const ThreadComponentsContext = createContext(EMPTY_COMPONENTS);
+const isNewChatView = (s) => s.thread.messages.length === 0 && (!s.thread.isLoading || s.threads.isLoading);
+const isHistoryLoadingView = (s) => s.thread.messages.length === 0 && s.thread.isLoading && !s.thread.isDisabled && !s.threads.isLoading;
+const ThreadHistorySkeleton = () => /* @__PURE__ */ jsxs("div", {
+	"data-slot": "aui_thread-history-skeleton",
+	role: "status",
+	className: "animate-in fade-in fill-mode-both flex flex-col gap-y-6 [animation-delay:150ms] [animation-duration:200ms]",
+	children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Loading conversation"
+		}),
+		/* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-9 w-2/5 rounded-xl motion-reduce:animate-none" }),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-y-2",
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-11/12 motion-reduce:animate-none" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4/5 motion-reduce:animate-none" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/5 motion-reduce:animate-none" })
+			]
+		}),
+		/* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-9 w-1/3 rounded-xl motion-reduce:animate-none" }),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-y-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-10/12 motion-reduce:animate-none" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3 motion-reduce:animate-none" })]
+		})
+	]
+});
+const Thread = ({ components = EMPTY_COMPONENTS, autoFocus = true }) => {
+	const isEmpty = useAuiState(isNewChatView);
+	return /* @__PURE__ */ jsx(ThreadComponentsContext.Provider, {
+		value: components,
+		children: /* @__PURE__ */ jsx(ThreadRoot, {
+			isEmpty,
+			autoFocus
+		})
+	});
+};
+const ThreadRoot = ({ isEmpty, autoFocus }) => {
+	const { Welcome = ThreadWelcome } = useContext(ThreadComponentsContext);
+	return /* @__PURE__ */ jsx(ThreadPrimitive.Root, {
+		className: "aui-root aui-thread-root bg-background @container flex h-full flex-col",
+		style: {
+			["--thread-max-width"]: "44rem",
+			["--composer-bg"]: "color-mix(in oklab, var(--color-muted) 30%, transparent)",
+			["--composer-radius"]: "1rem",
+			["--composer-padding"]: "8px"
+		},
+		children: /* @__PURE__ */ jsx(ThreadPrimitive.Viewport, {
+			turnAnchor: "top",
+			"data-slot": "aui_thread-viewport",
+			className: "relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth [mask-image:linear-gradient(to_bottom,transparent,black_1.5rem)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1.5rem)]",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("mx-auto flex w-full max-w-(--thread-max-width) flex-1 flex-col px-4 pt-6", isEmpty && "justify-center"),
+				children: [
+					/* @__PURE__ */ jsx(AuiIf, {
+						condition: isNewChatView,
+						children: /* @__PURE__ */ jsx(Welcome, {})
+					}),
+					/* @__PURE__ */ jsx(AuiIf, {
+						condition: isHistoryLoadingView,
+						children: /* @__PURE__ */ jsx(ThreadHistorySkeleton, {})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "aui_message-group",
+						className: "mb-14 flex flex-col gap-y-6 empty:hidden",
+						children: /* @__PURE__ */ jsx(ThreadPrimitive.Messages, { children: () => /* @__PURE__ */ jsx(ThreadMessage, {}) })
+					}),
+					/* @__PURE__ */ jsxs(ThreadPrimitive.ViewportFooter, {
+						className: cn("aui-thread-viewport-footer bg-background flex flex-col gap-4 overflow-visible pb-4 md:pb-6", !isEmpty && "sticky bottom-0 mt-auto rounded-t-(--composer-radius)"),
+						children: [
+							/* @__PURE__ */ jsx(ThreadScrollToBottom, {}),
+							/* @__PURE__ */ jsx(ThreadFollowupSuggestions, {}),
+							/* @__PURE__ */ jsx(Composer, { autoFocus }),
+							/* @__PURE__ */ jsx(AuiIf, {
+								condition: (s) => isNewChatView(s) && s.composer.isEmpty,
+								children: /* @__PURE__ */ jsx(ThreadSuggestions, {})
+							})
+						]
+					})
+				]
+			})
+		})
+	});
+};
+const ThreadMessage = () => {
+	const { AssistantMessage: AssistantMessageComponent = AssistantMessage } = useContext(ThreadComponentsContext);
+	const role = useAuiState((s) => s.message.role);
+	const isEditing = useAuiState((s) => s.message.composer.isEditing);
+	const isSpoken = useAuiState((s) => s.message.metadata.modality === "voice");
+	if (isEditing) return /* @__PURE__ */ jsx(EditComposer, {});
+	if (isSpoken) return /* @__PURE__ */ jsx(SpokenMessage, {});
+	if (role === "user") return /* @__PURE__ */ jsx(UserMessage, {});
+	return /* @__PURE__ */ jsx(AssistantMessageComponent, {});
+};
+const useVoiceRunPosition = () => useAuiState((s) => {
+	const before = s.thread.messages[s.message.index - 1]?.metadata.modality === "voice";
+	const after = s.thread.messages[s.message.index + 1]?.metadata.modality === "voice";
+	if (before) return after ? "middle" : "end";
+	return after ? "start" : "single";
+});
+const SpokenText = ({ text }) => /* @__PURE__ */ jsx("p", {
+	className: "aui-spoken-message-text m-0",
+	children: text
+});
+const SpokenMessage = () => {
+	const role = useAuiState((s) => s.message.role);
+	const position = useVoiceRunPosition();
+	const isSpeaking = useAuiState((s) => s.message.role === "assistant" && s.message.status?.type === "running");
+	const opensExchange = position === "start" || position === "single";
+	return /* @__PURE__ */ jsxs(MessagePrimitive.Root, {
+		"data-slot": "aui_spoken-message-root",
+		"data-role": role,
+		"data-voice-run": position,
+		className: cn("aui-spoken-message bg-muted/40 mx-2 px-3 py-1.5 [contain-intrinsic-size:auto_48px] [content-visibility:auto]", position === "single" && "rounded-xl py-2", position === "start" && "rounded-t-xl pt-2", position === "middle" && "-mt-6", position === "end" && "-mt-6 rounded-b-xl pb-2"),
+		children: [opensExchange && /* @__PURE__ */ jsxs("div", {
+			"data-slot": "aui_spoken-exchange-header",
+			className: "text-muted-foreground mb-1.5 flex items-center gap-1.5 text-xs",
+			children: [/* @__PURE__ */ jsx(PhoneIcon, {
+				className: "size-3",
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", { children: "Voice conversation" })]
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-slot": "aui_spoken-message-content",
+			className: "text-foreground flex items-start gap-2 text-sm leading-relaxed",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground mt-1 shrink-0",
+					"aria-hidden": true,
+					children: role === "user" ? /* @__PURE__ */ jsx(MicIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(AudioLinesIcon, { className: "size-3.5" })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: role === "user" ? "You said" : "Assistant said"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1 wrap-break-word",
+					children: [/* @__PURE__ */ jsx(MessagePrimitive.Parts, { components: { Text: SpokenText } }), isSpeaking && /* @__PURE__ */ jsx("span", {
+						"data-slot": "aui_spoken-message-indicator",
+						role: "status",
+						className: "text-muted-foreground ms-1 animate-pulse font-sans",
+						"aria-label": "Assistant is speaking",
+						children: "●"
+					})]
+				}),
+				/* @__PURE__ */ jsx(SpokenActionBar, {})
+			]
+		})]
+	});
+};
+const SpokenActionBar = () => {
+	return /* @__PURE__ */ jsx(ActionBarPrimitive.Root, {
+		hideWhenRunning: true,
+		autohide: "always",
+		className: "aui-spoken-action-bar text-muted-foreground flex shrink-0 gap-1",
+		children: /* @__PURE__ */ jsxs(ActionBarPrimitive.Copy, {
+			render: /* @__PURE__ */ jsx(TooltipIconButton, {
+				tooltip: "Copy",
+				className: "size-6"
+			}),
+			children: [/* @__PURE__ */ jsx(AuiIf, {
+				condition: (s) => s.message.isCopied,
+				children: /* @__PURE__ */ jsx(CheckIcon, { className: "animate-in zoom-in-50 fade-in duration-200 ease-out" })
+			}), /* @__PURE__ */ jsx(AuiIf, {
+				condition: (s) => !s.message.isCopied,
+				children: /* @__PURE__ */ jsx(CopyIcon, { className: "animate-in zoom-in-75 fade-in duration-150" })
+			})]
+		})
+	});
+};
+/**
+* Whether the last message already ends above the viewport footer (the
+* composer), so nothing is hidden below. The viewport can still scroll then:
+* through the message group's bottom margin, or a top-anchored turn's
+* reserve, which are blank.
+*/
+function useLastMessageInView(ref) {
+	const [inView, setInView] = useState(false);
+	useEffect(() => {
+		const button = ref.current;
+		const viewport = button?.closest("[data-slot=\"aui_thread-viewport\"]");
+		const footer = button?.parentElement;
+		const group = viewport?.querySelector("[data-slot=\"aui_message-group\"]");
+		if (!viewport || !footer || !group) return;
+		const measure = () => {
+			const last = [...group.children].filter((child) => !child.hasAttribute("data-aui-top-anchor-reserve")).at(-1);
+			const bottom = last ? last.getBoundingClientRect().bottom - Number.parseFloat(getComputedStyle(last).paddingBottom) : Number.POSITIVE_INFINITY;
+			setInView(bottom <= footer.getBoundingClientRect().top + 1);
+		};
+		measure();
+		viewport.addEventListener("scroll", measure, { passive: true });
+		const observer = new ResizeObserver(measure);
+		observer.observe(viewport);
+		observer.observe(group);
+		return () => {
+			viewport.removeEventListener("scroll", measure);
+			observer.disconnect();
+		};
+	}, [ref]);
+	return inView;
+}
+const ThreadScrollToBottom = () => {
+	const ref = useRef(null);
+	const lastMessageInView = useLastMessageInView(ref);
+	return /* @__PURE__ */ jsx(ThreadPrimitive.ScrollToBottom, {
+		ref,
+		render: /* @__PURE__ */ jsx(TooltipIconButton, {
+			tooltip: "Scroll to bottom",
+			variant: "outline",
+			className: cn("aui-thread-scroll-to-bottom border-border bg-background shadow-sm hover:bg-accent absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible", lastMessageInView && "invisible")
+		}),
+		children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+	});
+};
+const ThreadWelcome = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "aui-thread-welcome-root mb-6 flex flex-col px-2",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-2xl font-medium tracking-tight duration-200",
+			children: "How can I help you today?"
+		})
+	});
+};
+const ThreadSuggestions = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "aui-thread-welcome-suggestions flex w-full flex-col",
+		children: /* @__PURE__ */ jsx(ThreadPrimitive.Suggestions, { children: () => /* @__PURE__ */ jsx(ThreadSuggestionItem, {}) })
+	});
+};
+const ThreadSuggestionItem = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 animate-in fill-mode-both duration-200",
+		children: /* @__PURE__ */ jsxs(SuggestionPrimitive.Trigger, {
+			send: true,
+			render: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "aui-thread-welcome-suggestion group hover:bg-foreground/[0.03] focus-visible:ring-ring/50 flex w-full items-baseline gap-2.5 rounded-md px-2 py-2 text-start text-sm transition-colors outline-none focus-visible:ring-1 motion-reduce:transition-none"
+			}),
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "text-muted-foreground/60 group-hover:text-foreground font-mono text-xs transition-colors motion-reduce:transition-none",
+				children: ">"
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: [
+					/* @__PURE__ */ jsx(SuggestionPrimitive.Title, { className: "aui-thread-welcome-suggestion-text-1 text-foreground" }),
+					" ",
+					/* @__PURE__ */ jsx(SuggestionPrimitive.Description, { className: "aui-thread-welcome-suggestion-text-2 text-muted-foreground empty:hidden" })
+				]
+			})]
+		})
+	});
+};
+const Composer = ({ autoFocus }) => {
+	const isDisabled = useAuiState((s) => s.thread.isDisabled);
+	return /* @__PURE__ */ jsx(ComposerPrimitive.Root, {
+		className: "aui-composer-root relative flex w-full flex-col",
+		children: /* @__PURE__ */ jsxs(ComposerPrimitive.AttachmentDropzone, {
+			render: /* @__PURE__ */ jsx("div", {
+				"data-slot": "aui_composer-shell",
+				"data-disabled": isDisabled || void 0,
+				className: cn("border-foreground/10 focus-within:border-foreground/25 data-[dragging=true]:border-ring flex w-full cursor-text flex-col gap-2 rounded-(--composer-radius) border bg-(--composer-bg) p-(--composer-padding) transition-[border-color,opacity] data-[dragging=true]:border-dashed data-[dragging=true]:bg-[color-mix(in_oklab,var(--color-accent)_50%,var(--color-background))]", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50")
+			}),
+			children: [
+				/* @__PURE__ */ jsx(ComposerAttachments, {}),
+				/* @__PURE__ */ jsx(ComposerPrimitive.Input, {
+					placeholder: "Send a message...",
+					className: "aui-composer-input caret-primary placeholder:text-muted-foreground/60 disabled:placeholder:text-muted-foreground/40 max-h-48 min-h-10 w-full resize-none bg-transparent px-2.5 py-1 text-base leading-6 outline-none",
+					rows: 1,
+					autoFocus,
+					enterKeyHint: "send",
+					"aria-label": "Message input"
+				}),
+				/* @__PURE__ */ jsx(ComposerAction, {})
+			]
+		})
+	});
+};
+const ComposerAction = () => {
+	const isSending = useAuiState((s) => s.composer.submission !== void 0 && !(s.thread.isRunning && s.thread.capabilities.cancel));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "aui-composer-action-wrapper relative flex items-center justify-between",
+		children: [/* @__PURE__ */ jsx(ComposerAddAttachment, {}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ jsxs(AuiIf, {
+					condition: (s) => s.thread.capabilities.dictation,
+					children: [/* @__PURE__ */ jsx(AuiIf, {
+						condition: (s) => s.composer.dictation == null,
+						children: /* @__PURE__ */ jsx(ComposerPrimitive.Dictate, {
+							render: /* @__PURE__ */ jsx(TooltipIconButton, {
+								tooltip: "Voice input",
+								side: "bottom",
+								type: "button",
+								variant: "ghost",
+								size: "icon",
+								className: "aui-composer-dictate text-muted-foreground hover:text-foreground size-7 rounded-full",
+								"aria-label": "Start voice input"
+							}),
+							children: /* @__PURE__ */ jsx(MicIcon, { className: "aui-composer-dictate-icon size-4" })
+						})
+					}), /* @__PURE__ */ jsx(AuiIf, {
+						condition: (s) => s.composer.dictation != null,
+						children: /* @__PURE__ */ jsx(ComposerPrimitive.StopDictation, {
+							render: /* @__PURE__ */ jsx(TooltipIconButton, {
+								tooltip: "Stop dictation",
+								side: "bottom",
+								type: "button",
+								variant: "ghost",
+								size: "icon",
+								className: "aui-composer-stop-dictation text-destructive size-7 rounded-full",
+								"aria-label": "Stop voice input"
+							}),
+							children: /* @__PURE__ */ jsx(SquareIcon, { className: "aui-composer-stop-dictation-icon size-3.5 animate-pulse fill-current" })
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx(AuiIf, {
+					condition: (s) => !s.composer.canCancel || s.thread.voice !== void 0 && s.composer.submission === void 0,
+					children: /* @__PURE__ */ jsx(ComposerPrimitive.Send, {
+						render: /* @__PURE__ */ jsx(TooltipIconButton, {
+							tooltip: "Send message",
+							side: "bottom",
+							type: "button",
+							variant: "default",
+							size: "icon",
+							className: "aui-composer-send size-7 rounded-full",
+							"aria-label": "Send message"
+						}),
+						children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
+					})
+				}),
+				/* @__PURE__ */ jsx(AuiIf, {
+					condition: (s) => s.composer.canCancel && (s.thread.voice === void 0 || s.composer.submission !== void 0),
+					children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, {
+						render: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "default",
+							size: "icon",
+							className: "aui-composer-cancel size-7 rounded-full",
+							"aria-label": isSending ? "Cancel sending" : "Stop generating"
+						}),
+						children: /* @__PURE__ */ jsx(SquareIcon, { className: "aui-composer-cancel-icon size-3.5 fill-current" })
+					})
+				})
+			]
+		})]
+	});
+};
+const MessageError = () => {
+	return /* @__PURE__ */ jsx(MessagePrimitive.Error, { children: /* @__PURE__ */ jsx(ErrorPrimitive.Root, {
+		className: "aui-message-error-root border-destructive bg-destructive/10 text-destructive dark:bg-destructive/5 mt-2 rounded-md border p-3 text-sm dark:text-red-200",
+		children: /* @__PURE__ */ jsx(ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" })
+	}) });
+};
+const AssistantMessage = () => {
+	const { ToolFallback: ToolFallbackComponent = ToolFallback, ToolGroup, ReasoningGroup, TaskGroup: TaskGroupComponent } = useContext(ThreadComponentsContext);
+	const groupBy = TaskGroupComponent ? taskAwareGroupBy : messageGroupBy;
+	return /* @__PURE__ */ jsxs(MessagePrimitive.Root, {
+		"data-slot": "aui_assistant-message-root",
+		"data-role": "assistant",
+		className: "fade-in slide-in-from-bottom-1 animate-in relative -mb-7.5 pb-7.5 duration-150 [contain-intrinsic-size:auto_200px] [content-visibility:auto]",
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "aui_assistant-message-content",
+			className: "text-foreground px-2 leading-relaxed wrap-break-word",
+			children: [/* @__PURE__ */ jsx(MessagePrimitive.GroupedParts, {
+				groupBy,
+				children: ({ part, children }) => {
+					switch (part.type) {
+						case "group-chainOfThought": return /* @__PURE__ */ jsx("div", {
+							"data-slot": "aui_chain-of-thought",
+							children
+						});
+						case "group-task": return TaskGroupComponent ? /* @__PURE__ */ jsx(TaskGroupComponent, { group: part }) : null;
+						case "group-tool":
+							if (ToolGroup) return /* @__PURE__ */ jsx(ToolGroup, {
+								group: part,
+								children
+							});
+							return /* @__PURE__ */ jsxs(ToolGroupRoot, {
+								variant: "ghost",
+								children: [/* @__PURE__ */ jsx(ToolGroupTrigger, {
+									count: part.indices.length,
+									active: part.status.type === "running"
+								}), /* @__PURE__ */ jsx(ToolGroupContent, { children })]
+							});
+						case "group-reasoning": {
+							if (ReasoningGroup) return /* @__PURE__ */ jsx(ReasoningGroup, {
+								group: part,
+								children
+							});
+							const running = part.status.type === "running";
+							return /* @__PURE__ */ jsxs(ReasoningRoot, {
+								streaming: running,
+								children: [/* @__PURE__ */ jsx(ReasoningTrigger, { active: running }), /* @__PURE__ */ jsx(ReasoningContent, {
+									"aria-busy": running,
+									children: /* @__PURE__ */ jsx(ReasoningText, { children })
+								})]
+							});
+						}
+						case "text": return /* @__PURE__ */ jsx(MarkdownText, {});
+						case "reasoning": return /* @__PURE__ */ jsx(Reasoning, { ...part });
+						case "tool-call": return part.toolUI ?? /* @__PURE__ */ jsx(ToolFallbackComponent, { ...part });
+						case "data": return part.dataRendererUI;
+						case "file": return /* @__PURE__ */ jsx("div", {
+							"data-slot": "aui_assistant-message-file",
+							className: "py-1",
+							children: /* @__PURE__ */ jsx(File, { ...part })
+						});
+						case "image": return /* @__PURE__ */ jsx("div", {
+							"data-slot": "aui_assistant-message-image",
+							className: "py-1",
+							children: /* @__PURE__ */ jsx(Image, { ...part })
+						});
+						case "indicator": return /* @__PURE__ */ jsx("span", {
+							"data-slot": "aui_assistant-message-indicator",
+							className: "animate-pulse font-sans",
+							"aria-label": "Assistant is working",
+							children: "●"
+						});
+						default: return null;
+					}
+				}
+			}), /* @__PURE__ */ jsx(MessageError, {})]
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-slot": "aui_assistant-message-footer",
+			className: cn("ms-2 flex items-center", `min-h-7.5 pt-1.5`),
+			children: [/* @__PURE__ */ jsx(BranchPicker, {}), /* @__PURE__ */ jsx(AssistantActionBar, {})]
+		})]
+	});
+};
+const AssistantActionBar = () => {
+	return /* @__PURE__ */ jsxs(ActionBarPrimitive.Root, {
+		hideWhenRunning: true,
+		autohide: "not-last",
+		className: "aui-assistant-action-bar-root text-muted-foreground animate-in fade-in col-start-3 row-start-2 -ms-1 flex gap-1 duration-200",
+		children: [
+			/* @__PURE__ */ jsxs(ActionBarPrimitive.Copy, {
+				render: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Copy" }),
+				children: [/* @__PURE__ */ jsx(AuiIf, {
+					condition: (s) => s.message.isCopied,
+					children: /* @__PURE__ */ jsx(CheckIcon, { className: "animate-in zoom-in-50 fade-in duration-200 ease-out" })
+				}), /* @__PURE__ */ jsx(AuiIf, {
+					condition: (s) => !s.message.isCopied,
+					children: /* @__PURE__ */ jsx(CopyIcon, { className: "animate-in zoom-in-75 fade-in duration-150" })
+				})]
+			}),
+			/* @__PURE__ */ jsxs(AuiIf, {
+				condition: (s) => s.thread.capabilities.feedback,
+				children: [/* @__PURE__ */ jsx(ActionBarPrimitive.FeedbackPositive, {
+					render: /* @__PURE__ */ jsx(TooltipIconButton, {
+						tooltip: "Helpful",
+						className: "data-[submitted=true]:bg-accent data-[submitted=true]:text-accent-foreground"
+					}),
+					children: /* @__PURE__ */ jsx(ThumbsUpIcon, {})
+				}), /* @__PURE__ */ jsx(ActionBarPrimitive.FeedbackNegative, {
+					render: /* @__PURE__ */ jsx(TooltipIconButton, {
+						tooltip: "Not helpful",
+						className: "data-[submitted=true]:bg-accent data-[submitted=true]:text-accent-foreground"
+					}),
+					children: /* @__PURE__ */ jsx(ThumbsDownIcon, {})
+				})]
+			}),
+			/* @__PURE__ */ jsx(ActionBarPrimitive.Reload, {
+				render: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Refresh" }),
+				children: /* @__PURE__ */ jsx(RefreshCwIcon, {})
+			}),
+			/* @__PURE__ */ jsxs(ActionBarMorePrimitive.Root, { children: [/* @__PURE__ */ jsx(ActionBarMorePrimitive.Trigger, {
+				render: /* @__PURE__ */ jsx(TooltipIconButton, {
+					tooltip: "More",
+					className: "data-[state=open]:bg-accent"
+				}),
+				children: /* @__PURE__ */ jsx(MoreHorizontalIcon, {})
+			}), /* @__PURE__ */ jsx(ActionBarMorePrimitive.Content, {
+				side: "bottom",
+				align: "start",
+				sideOffset: 6,
+				className: "aui-action-bar-more-content bg-popover text-popover-foreground data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-xl border p-1.5",
+				children: /* @__PURE__ */ jsxs(ActionBarPrimitive.ExportMarkdown, {
+					render: /* @__PURE__ */ jsx(ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm outline-none select-none" }),
+					children: [/* @__PURE__ */ jsx(DownloadIcon, { className: "size-4" }), "Export as Markdown"]
+				})
+			})] })
+		]
+	});
+};
+const UserFilePart = (part) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "aui_user-message-file",
+	className: "py-1",
+	children: /* @__PURE__ */ jsx(File, { ...part })
+});
+const UserImagePart = (part) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "aui_user-message-image",
+	className: "py-1",
+	children: /* @__PURE__ */ jsx(Image, { ...part })
+});
+const UserMessage = () => {
+	return /* @__PURE__ */ jsxs(MessagePrimitive.Root, {
+		"data-slot": "aui_user-message-root",
+		className: "fade-in slide-in-from-bottom-1 animate-in -mt-6 grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 pt-6 duration-150 [contain-intrinsic-size:auto_200px] [content-visibility:auto] [&:where(>*)]:col-start-2",
+		"data-role": "user",
+		children: [
+			/* @__PURE__ */ jsx(UserMessageAttachments, {}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "aui-user-message-content-wrapper relative col-start-2 min-w-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "aui-user-message-content peer bg-muted text-foreground rounded-(--composer-radius) px-4 py-2 wrap-break-word empty:hidden",
+					children: /* @__PURE__ */ jsx(MessagePrimitive.Parts, { components: {
+						File: UserFilePart,
+						Image: UserImagePart
+					} })
+				}), /* @__PURE__ */ jsx("div", {
+					className: "aui-user-action-bar-wrapper absolute start-0 top-1/2 -translate-x-full -translate-y-1/2 pe-2 peer-empty:hidden rtl:translate-x-full",
+					children: /* @__PURE__ */ jsx(UserActionBar, {})
+				})]
+			}),
+			/* @__PURE__ */ jsx(BranchPicker, {
+				"data-slot": "aui_user-branch-picker",
+				className: "col-span-full col-start-1 -me-1 justify-end"
+			})
+		]
+	});
+};
+const UserActionBar = () => {
+	return /* @__PURE__ */ jsx(ActionBarPrimitive.Root, {
+		hideWhenRunning: true,
+		autohide: "not-last",
+		className: "aui-user-action-bar-root flex flex-col items-end",
+		children: /* @__PURE__ */ jsx(ActionBarPrimitive.Edit, {
+			render: /* @__PURE__ */ jsx(TooltipIconButton, {
+				tooltip: "Edit",
+				className: "aui-user-action-edit"
+			}),
+			children: /* @__PURE__ */ jsx(PencilIcon, {})
+		})
+	});
+};
+const EditComposer = () => {
+	return /* @__PURE__ */ jsx(MessagePrimitive.Root, {
+		"data-slot": "aui_edit-composer-wrapper",
+		className: "flex flex-col px-2 [contain-intrinsic-size:auto_200px] [content-visibility:auto]",
+		children: /* @__PURE__ */ jsxs(ComposerPrimitive.Root, {
+			className: "aui-edit-composer-root border-foreground/10 focus-within:border-foreground/25 ms-auto flex w-full max-w-[85%] cursor-text flex-col rounded-(--composer-radius) border bg-(--composer-bg) transition-[border-color]",
+			children: [/* @__PURE__ */ jsx(ComposerPrimitive.Input, {
+				className: "aui-edit-composer-input text-foreground min-h-14 w-full resize-none bg-transparent px-4 pt-3 pb-1 text-base outline-none",
+				autoFocus: true
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "aui-edit-composer-footer mx-2.5 mb-2.5 flex items-center gap-1.5 self-end",
+				children: [/* @__PURE__ */ jsx(ComposerPrimitive.Cancel, {
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						className: "h-8 px-3"
+					}),
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(ComposerPrimitive.Send, {
+					render: /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						className: "h-8 px-3"
+					}),
+					children: "Update"
+				})]
+			})]
+		})
+	});
+};
+const BranchPicker = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsxs(BranchPickerPrimitive.Root, {
+		hideWhenSingleBranch: true,
+		className: cn("aui-branch-picker-root text-muted-foreground -ms-2 me-2 inline-flex items-center text-xs", className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(BranchPickerPrimitive.Previous, {
+				render: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Previous" }),
+				children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "aui-branch-picker-state font-medium",
+				children: [
+					/* @__PURE__ */ jsx(BranchPickerPrimitive.Number, {}),
+					" / ",
+					/* @__PURE__ */ jsx(BranchPickerPrimitive.Count, {})
+				]
+			}),
+			/* @__PURE__ */ jsx(BranchPickerPrimitive.Next, {
+				render: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Next" }),
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			})
+		]
+	});
+};
+//#endregion
+export { Thread, thread_aui_exports };

package/dist/components/assistant-ui/elements/threadlist-sidebar.aui.d.ts

@@ -0,0 +1,19 @@
+import { Sidebar } from "../../ui/sidebar.js";
+import * as React from "react";
+declare namespace threadlist_sidebar_aui_d_exports {
+  export { ThreadListSidebar };
+}
+/**
+ * The runtime thread list in an app sidebar. `header` and `footer` replace
+ * the registry demo's assistant-ui branding and GitHub links; they default to
+ * that demo content, so the vanilla item is unchanged until an app overrides
+ * them. Pass `null` (or `false`) to drop the footer.
+ */
+export declare function ThreadListSidebar({ header, footer, ...props }: React.ComponentProps<typeof Sidebar> & {
+  /** Sidebar header content; defaults to the registry demo branding. */
+  header?: React.ReactNode;
+  /** Sidebar footer content; defaults to the registry demo links. */
+  footer?: React.ReactNode;
+}): React.JSX.Element;
+//#endregion
+export { threadlist_sidebar_aui_d_exports };