{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "eve-chat", "type": "registry:item", "title": "Eve Chat", "description": "Chat page for an Eve agent, rendering the session through an assistant-ui thread.", "dependencies": [ "@assistant-ui/eve", "@assistant-ui/react", "lucide-react", "zustand", "class-variance-authority", "@assistant-ui/react-markdown", "remark-gfm", "tw-shimmer", "radix-ui" ], "docs": "Eve installs registry files without touching CSS, so add the reasoning and collapsible styles to app/globals.css, and replace the default auth policy in agent/channels/eve.ts before deploying: https://www.assistant-ui.com/docs/runtimes/eve/quickstart", "meta": { "eve": { "requires": ">=0.27.6" } }, "css": { "@import \"tw-shimmer\"": {}, "@custom-variant data-open (&:where([data-state=\"open\"], [data-open]:not([data-open=\"false\"])))": {}, "@custom-variant data-closed (&:where([data-state=\"closed\"], [data-closed]:not([data-closed=\"false\"])))": {}, "@keyframes collapsible-down": { "from": { "height": "0" }, "to": { "height": "var(--radix-collapsible-content-height, var(--collapsible-panel-height, auto))" } }, "@keyframes collapsible-up": { "from": { "height": "var(--radix-collapsible-content-height, var(--collapsible-panel-height, auto))" }, "to": { "height": "0" } } }, "files": [ { "type": "registry:file", "path": "app/page.tsx", "target": "app/page.tsx", "sourcePath": "apps/registry/templates/eve/app/page.tsx", "content": "\"use client\";\n\nimport { Thread } from \"@/components/assistant-ui/elements/thread.aui\";\nimport { AssistantRuntimeProvider } from \"@assistant-ui/react\";\nimport { useEveAgentRuntime } from \"@assistant-ui/eve\";\n\nexport default function Home() {\n const runtime = useEveAgentRuntime();\n\n return (\n \n
\n \n
\n \n );\n}\n" }, { "type": "registry:file", "path": "components/assistant-ui/elements/thread.aui.tsx", "target": "components/assistant-ui/elements/thread.aui.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/thread.aui.tsx", "content": "\"use client\";\n\nimport {\n ComposerAddAttachment,\n ComposerAttachments,\n UserMessageAttachments,\n} from \"@/components/assistant-ui/elements/attachment.aui\";\nimport { File } from \"@/components/assistant-ui/elements/file\";\nimport { ThreadFollowupSuggestions } from \"@/components/assistant-ui/elements/follow-up-suggestions.aui\";\nimport { Image } from \"@/components/assistant-ui/elements/image\";\nimport { MarkdownText } from \"@/components/assistant-ui/elements/markdown-text\";\nimport {\n Reasoning,\n ReasoningContent,\n ReasoningRoot,\n ReasoningText,\n ReasoningTrigger,\n} from \"@/components/assistant-ui/elements/reasoning.aui\";\nimport { ToolFallback } from \"@/components/assistant-ui/elements/tool-fallback.aui\";\nimport {\n ToolGroupContent,\n ToolGroupRoot,\n ToolGroupTrigger,\n} from \"@/components/assistant-ui/elements/tool-group.aui\";\nimport { TooltipIconButton } from \"@/components/assistant-ui/elements/tooltip-icon-button\";\nimport { Button } from \"@/components/ui/button\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { cn } from \"@/lib/utils\";\nimport {\n ActionBarMorePrimitive,\n ActionBarPrimitive,\n AuiIf,\n type AssistantState,\n BranchPickerPrimitive,\n ComposerPrimitive,\n ErrorPrimitive,\n groupPartByType,\n MessagePrimitive,\n SuggestionPrimitive,\n ThreadPrimitive,\n type FileMessagePartComponent,\n type ImageMessagePartComponent,\n type ToolCallMessagePartComponent,\n useAuiState,\n} from \"@assistant-ui/react\";\nimport {\n ArrowDownIcon,\n ArrowUpIcon,\n CheckIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n CopyIcon,\n DownloadIcon,\n MicIcon,\n MoreHorizontalIcon,\n PencilIcon,\n RefreshCwIcon,\n SquareIcon,\n} from \"lucide-react\";\nimport {\n createContext,\n useContext,\n type ComponentType,\n type FC,\n type PropsWithChildren,\n} from \"react\";\n\nexport type ThreadGroupPart = MessagePrimitive.GroupedParts.GroupPart;\n\n/**\n * Optional component overrides for the thread. `AssistantMessage` and\n * `Welcome` replace whole sections; the remaining slots override how the\n * assistant message renders tool calls and part groups. Tool UIs registered\n * by name (toolkit `render`, `useAssistantDataUI`) take precedence over\n * `ToolFallback`.\n */\nexport type ThreadComponents = {\n AssistantMessage?: ComponentType | undefined;\n Welcome?: ComponentType | undefined;\n ToolFallback?: ToolCallMessagePartComponent | undefined;\n ToolGroup?:\n | ComponentType>\n | undefined;\n ReasoningGroup?:\n | ComponentType>\n | undefined;\n};\n\nexport type ThreadProps = {\n components?: ThreadComponents | undefined;\n autoFocus?: boolean | undefined;\n};\n\nconst EMPTY_COMPONENTS: ThreadComponents = {};\n\nconst ThreadComponentsContext =\n createContext(EMPTY_COMPONENTS);\n\n// Startup exposes a loading placeholder thread; treat it as a new chat so\n// the composer mounts centered. Loads after startup keep the docked layout.\nconst isNewChatView = (s: AssistantState) =>\n s.thread.messages.length === 0 &&\n (!s.thread.isLoading || s.threads.isLoading);\n\n// A switched thread that is still fetching its history: skeleton, not welcome.\nconst isHistoryLoadingView = (s: AssistantState) =>\n s.thread.messages.length === 0 &&\n s.thread.isLoading &&\n !s.thread.isDisabled &&\n !s.threads.isLoading;\n\nconst ThreadHistorySkeleton: FC = () => (\n \n Loading conversation\n \n
\n \n \n \n
\n \n
\n \n \n
\n \n);\n\nexport const Thread: FC = ({\n components = EMPTY_COMPONENTS,\n autoFocus = true,\n}) => {\n const isEmpty = useAuiState(isNewChatView);\n\n return (\n \n \n \n );\n};\n\nconst ThreadRoot: FC<{ isEmpty: boolean; autoFocus: boolean }> = ({\n isEmpty,\n autoFocus,\n}) => {\n const { Welcome = ThreadWelcome } = useContext(ThreadComponentsContext);\n\n return (\n \n \n \n \n \n \n \n \n \n\n \n \n {() => }\n \n \n\n \n \n \n \n isNewChatView(s) && s.composer.isEmpty}>\n \n \n \n \n \n \n );\n};\n\nconst ThreadMessage: FC = () => {\n const { AssistantMessage: AssistantMessageComponent = AssistantMessage } =\n useContext(ThreadComponentsContext);\n const role = useAuiState((s) => s.message.role);\n const isEditing = useAuiState((s) => s.message.composer.isEditing);\n\n if (isEditing) return ;\n if (role === \"user\") return ;\n return ;\n};\n\nconst ThreadScrollToBottom: FC = () => {\n return (\n \n \n \n \n \n );\n};\n\nconst ThreadWelcome: FC = () => {\n return (\n
\n

\n How can I help you today?\n

\n
\n );\n};\n\nconst ThreadSuggestions: FC = () => {\n return (\n
\n \n {() => }\n \n
\n );\n};\n\nconst ThreadSuggestionItem: FC = () => {\n return (\n
\n \n \n \n \n \n \n
\n );\n};\n\nconst Composer: FC<{ autoFocus: boolean }> = ({ autoFocus }) => {\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n\nconst ComposerAction: FC = () => {\n return (\n
\n \n
\n s.thread.capabilities.dictation}>\n s.composer.dictation == null}>\n \n \n \n \n \n \n s.composer.dictation != null}>\n \n \n \n \n \n \n \n !s.thread.isRunning}>\n \n \n \n \n \n \n s.thread.isRunning}>\n \n \n \n \n \n \n
\n
\n );\n};\n\nconst MessageError: FC = () => {\n return (\n \n \n \n \n \n );\n};\n\nconst AssistantMessage: FC = () => {\n const {\n ToolFallback: ToolFallbackComponent = ToolFallback,\n ToolGroup,\n ReasoningGroup,\n } = useContext(ThreadComponentsContext);\n\n const ACTION_BAR_PT = \"pt-1.5\";\n // Keep the action bar inside the contained root's paint box, then cancel its reserved space in flow.\n const ACTION_BAR_HEIGHT = `min-h-7.5 ${ACTION_BAR_PT}`;\n\n return (\n \n \n \n {({ part, children }) => {\n switch (part.type) {\n case \"group-chainOfThought\":\n return
{children}
;\n case \"group-tool\":\n if (ToolGroup) {\n return {children};\n }\n return (\n \n \n {children}\n \n );\n case \"group-reasoning\": {\n if (ReasoningGroup) {\n return (\n {children}\n );\n }\n const running = part.status.type === \"running\";\n return (\n \n \n \n {children}\n \n \n );\n }\n case \"text\":\n return ;\n case \"reasoning\":\n return ;\n case \"tool-call\":\n return part.toolUI ?? ;\n case \"data\":\n return part.dataRendererUI;\n case \"file\":\n return (\n
\n \n
\n );\n case \"image\":\n return (\n
\n \n
\n );\n case \"indicator\":\n return (\n \n {\"●\"}\n \n );\n default:\n return null;\n }\n }}\n \n \n \n\n \n \n \n \n \n );\n};\n\nconst AssistantActionBar: FC = () => {\n return (\n \n \n \n s.message.isCopied}>\n \n \n !s.message.isCopied}>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Export as Markdown\n \n \n \n \n \n );\n};\n\nconst UserFilePart: FileMessagePartComponent = (part) => (\n
\n \n
\n);\n\nconst UserImagePart: ImageMessagePartComponent = (part) => (\n
\n \n
\n);\n\nconst UserMessage: FC = () => {\n return (\n *)]:col-start-2\"\n data-role=\"user\"\n >\n \n\n
\n
\n \n
\n
\n \n
\n
\n\n \n \n );\n};\n\nconst UserActionBar: FC = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nconst EditComposer: FC = () => {\n return (\n \n \n \n
\n \n \n Cancel\n \n \n \n \n \n
\n \n \n );\n};\n\nconst BranchPicker: FC = ({\n className,\n ...rest\n}) => {\n return (\n \n \n \n \n \n \n \n / \n \n \n \n \n \n \n \n );\n};\n" }, { "type": "registry:file", "path": "components/assistant-ui/elements/attachment.aui.tsx", "target": "components/assistant-ui/elements/attachment.aui.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/attachment.aui.radix.tsx", "content": "\"use client\";\n\nimport {\n type PropsWithChildren,\n useState,\n type FC,\n isValidElement,\n} from \"react\";\nimport {\n XIcon,\n PlusIcon,\n FileText,\n Loader2Icon,\n AlertCircleIcon,\n} from \"lucide-react\";\nimport {\n AttachmentPrimitive,\n ComposerPrimitive,\n MessagePrimitive,\n useAuiState,\n useAui,\n} from \"@assistant-ui/react\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n Dialog,\n DialogTitle,\n DialogContent,\n DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n} from \"@/components/ui/avatar\";\nimport { TooltipIconButton } from \"@/components/assistant-ui/elements/tooltip-icon-button\";\nimport { useAttachmentSrc } from \"@/hooks/use-attachment-src\";\nimport { cn } from \"@/lib/utils\";\n\ntype AttachmentPreviewProps = {\n src: string;\n};\n\nconst AttachmentPreview: FC = ({ src }) => {\n const [isLoaded, setIsLoaded] = useState(false);\n return (\n setIsLoaded(true)}\n />\n );\n};\n\nconst AttachmentPreviewDialog: FC = ({ children }) => {\n const src = useAttachmentSrc();\n\n if (!src) return children;\n\n return (\n \n \n {isValidElement(children) ? (\n children\n ) : (\n \n )}\n \n button]:bg-foreground/60 [&>button]:hover:bg-foreground/80 [&_svg]:text-background p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0!\">\n \n Image Attachment Preview\n \n
\n \n
\n \n \n );\n};\n\nconst AttachmentThumb: FC = () => {\n const src = useAttachmentSrc();\n\n return (\n \n \n \n \n \n \n );\n};\n\nconst AttachmentUI: FC = () => {\n const aui = useAui();\n const isComposer = aui.attachment.source !== \"message\";\n\n const isImage = useAuiState((s) => s.attachment.type === \"image\");\n const typeLabel = useAuiState((s) => {\n const type = s.attachment.type;\n switch (type) {\n case \"image\":\n return \"Image\";\n case \"document\":\n return \"Document\";\n case \"file\":\n return \"File\";\n default:\n return type;\n }\n });\n\n const uploadState = useAuiState((s) =>\n s.attachment.status.type === \"running\"\n ? \"uploading\"\n : s.attachment.status.type === \"incomplete\" &&\n s.attachment.status.reason === \"error\"\n ? \"error\"\n : undefined,\n );\n const isUploading = uploadState === \"uploading\";\n const isError = uploadState === \"error\";\n\n const errorMessage = useAuiState((s) =>\n s.attachment.status.type === \"incomplete\" &&\n s.attachment.status.reason === \"error\"\n ? (s.attachment.status.message ?? \"Upload failed\")\n : undefined,\n );\n\n return (\n \n \n \n \n \n {\n if (e.key === \"Enter\") {\n e.preventDefault();\n e.currentTarget.click();\n } else if (e.key === \" \") {\n e.preventDefault();\n }\n }}\n onKeyUp={(e) => {\n if (e.key === \" \") e.currentTarget.click();\n }}\n aria-label={`${typeLabel} attachment${\n isError ? \", upload failed\" : isUploading ? \", uploading\" : \"\"\n }`}\n >\n \n {isUploading && (\n \n \n \n )}\n {isError && (\n \n \n \n )}\n \n \n \n {isComposer && }\n \n \n \n {errorMessage && (\n

{errorMessage}

\n )}\n \n \n \n );\n};\n\nconst AttachmentRemove: FC = () => {\n return (\n \n \n \n \n \n );\n};\n\nexport const UserMessageAttachments: FC = () => {\n return (\n
\n \n {() => }\n \n
\n );\n};\n\nexport const ComposerAttachments: FC = () => {\n return (\n
\n \n {() => }\n \n
\n );\n};\n\nexport const ComposerAddAttachment: FC = () => {\n return (\n \n \n \n \n \n );\n};\n" }, { "type": "registry:file", "path": "components/assistant-ui/elements/tooltip-icon-button.tsx", "target": "components/assistant-ui/elements/tooltip-icon-button.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/tooltip-icon-button.radix.tsx", "content": "\"use client\";\n\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { Slot } from \"radix-ui\";\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TooltipIconButtonProps = ComponentPropsWithRef & {\n tooltip: string;\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n};\n\nexport const TooltipIconButton = forwardRef<\n HTMLButtonElement,\n TooltipIconButtonProps\n>(({ children, tooltip, side = \"bottom\", className, ...rest }, ref) => {\n return (\n \n \n \n \n {children}\n {tooltip}\n \n \n {tooltip}\n \n \n );\n});\n\nTooltipIconButton.displayName = \"TooltipIconButton\";\n" }, { "type": "registry:file", "path": "hooks/use-attachment-src.ts", "target": "hooks/use-attachment-src.ts", "sourcePath": "packages/ui/src/hooks/use-attachment-src.ts", "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { useAuiState } from \"@assistant-ui/react\";\nimport { useShallow } from \"zustand/react/shallow\";\n\nconst useFileSrc = (file: File | undefined) => {\n const [entry, setEntry] = useState<{ file: File; url: string } | undefined>(\n undefined,\n );\n\n useEffect(() => {\n if (!file) {\n setEntry(undefined);\n return;\n }\n\n const objectUrl = URL.createObjectURL(file);\n setEntry({ file, url: objectUrl });\n\n return () => {\n URL.revokeObjectURL(objectUrl);\n };\n }, [file]);\n\n return entry !== undefined && entry.file === file ? entry.url : undefined;\n};\n\nexport const useAttachmentSrc = () => {\n const { file, src } = useAuiState(\n useShallow((s): { file?: File; src?: string } => {\n if (s.attachment.type !== \"image\") return {};\n if (s.attachment.file) return { file: s.attachment.file };\n const src = s.attachment.content?.filter((c) => c.type === \"image\")[0]\n ?.image;\n if (!src) return {};\n return { src };\n }),\n );\n\n return useFileSrc(file) ?? src;\n};\n" }, { "type": "registry:file", "path": "components/assistant-ui/elements/file.tsx", "target": "components/assistant-ui/elements/file.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/file.tsx", "content": "\"use client\";\n\nimport { memo, type FC } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n FileIcon,\n FileTextIcon,\n ImageIcon,\n MusicIcon,\n VideoIcon,\n BracesIcon,\n DownloadIcon,\n} from \"lucide-react\";\nimport type { FileMessagePartComponent } from \"@assistant-ui/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst fileVariants = cva(\n \"aui-file-root inline-flex items-center gap-3 rounded-lg transition-colors\",\n {\n variants: {\n variant: {\n outline: \"border-border hover:bg-muted/50 border\",\n ghost: \"hover:bg-muted/50\",\n muted: \"bg-muted/50 hover:bg-muted/70\",\n },\n size: {\n sm: \"px-2.5 py-1.5 text-xs\",\n default: \"px-3 py-2 text-sm\",\n lg: \"px-4 py-3 text-base\",\n },\n },\n defaultVariants: {\n variant: \"outline\",\n size: \"default\",\n },\n },\n);\n\nfunction getMimeTypeIcon(mimeType: string): FC<{ className?: string }> {\n const type = mimeType.toLowerCase();\n if (type.startsWith(\"image/\")) {\n return ImageIcon;\n }\n if (type === \"application/pdf\") {\n return FileTextIcon;\n }\n if (type === \"application/json\") {\n return BracesIcon;\n }\n if (type.startsWith(\"text/\")) {\n return FileTextIcon;\n }\n if (type.startsWith(\"audio/\")) {\n return MusicIcon;\n }\n if (type.startsWith(\"video/\")) {\n return VideoIcon;\n }\n return FileIcon;\n}\n\nexport type FileDataKind = \"data-uri\" | \"url\" | \"base64\" | \"id\";\n\nfunction getFileDataKind(\n data: string,\n sourceType?: \"url\" | \"id\",\n): FileDataKind {\n if (sourceType === \"url\" && /^data:/i.test(data)) return \"data-uri\";\n if (sourceType) return sourceType;\n if (/^data:/i.test(data)) return \"data-uri\";\n if (/^https?:\\/\\//i.test(data)) return \"url\";\n return \"base64\";\n}\n\nfunction getBase64Size(base64: string): number {\n const commaIndex = base64.indexOf(\",\");\n const base64Data = commaIndex >= 0 ? base64.slice(commaIndex + 1) : base64;\n const padding = (base64Data.match(/=/g) || []).length;\n return Math.floor((base64Data.length * 3) / 4) - padding;\n}\n\nfunction formatFileSize(bytes: number): string {\n if (bytes < 1024) {\n return `${bytes} B`;\n }\n if (bytes < 1024 * 1024) {\n return `${(bytes / 1024).toFixed(1)} KB`;\n }\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\nexport type FileRootProps = React.ComponentProps<\"div\"> &\n VariantProps;\n\nfunction FileRoot({\n className,\n variant,\n size,\n children,\n ...props\n}: FileRootProps) {\n return (\n \n {children}\n \n );\n}\n\ntype FileIconDisplayProps = React.ComponentProps<\"span\"> & {\n mimeType?: string;\n};\n\nfunction FileIconDisplay({\n mimeType,\n className,\n children,\n ...props\n}: FileIconDisplayProps) {\n const IconComponent = mimeType ? getMimeTypeIcon(mimeType) : FileIcon;\n\n return (\n \n {children ?? }\n \n );\n}\n\nfunction FileName({\n className,\n children,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n {children || \"Unnamed file\"}\n \n );\n}\n\ntype FileSizeProps = React.ComponentProps<\"span\"> & {\n bytes: number;\n};\n\nfunction FileSize({ bytes, className, ...props }: FileSizeProps) {\n return (\n \n {formatFileSize(bytes)}\n \n );\n}\n\ntype FileDownloadProps = Omit, \"href\"> & {\n data: string;\n mimeType: string;\n filename?: string;\n sourceType?: \"url\" | \"id\";\n};\n\nfunction FileDownload({\n data,\n mimeType,\n filename,\n sourceType,\n className,\n children,\n ...props\n}: FileDownloadProps) {\n if (typeof data !== \"string\") return null;\n const kind = getFileDataKind(data, sourceType);\n if (kind === \"id\") return null;\n if (kind === \"url\" && !/^(https?:\\/\\/|blob:)/i.test(data)) return null;\n const href = kind === \"base64\" ? `data:${mimeType};base64,${data}` : data;\n\n return (\n \n {children || }\n \n );\n}\n\nconst FileImpl: FileMessagePartComponent = ({\n filename,\n data,\n mimeType,\n sourceType,\n}) => {\n const kind = getFileDataKind(data, sourceType);\n const showSize =\n typeof data === \"string\" && (kind === \"base64\" || kind === \"data-uri\");\n\n return (\n \n \n
\n {filename}\n {showSize && (\n \n )}\n
\n \n \n );\n};\n\nconst File = memo(FileImpl) as unknown as FileMessagePartComponent & {\n Root: typeof FileRoot;\n Icon: typeof FileIconDisplay;\n Name: typeof FileName;\n Size: typeof FileSize;\n Download: typeof FileDownload;\n};\n\nFile.displayName = \"File\";\nFile.Root = FileRoot;\nFile.Icon = FileIconDisplay;\nFile.Name = FileName;\nFile.Size = FileSize;\nFile.Download = FileDownload;\n\nexport {\n File,\n FileRoot,\n FileIconDisplay,\n FileName,\n FileSize,\n FileDownload,\n fileVariants,\n getMimeTypeIcon,\n getFileDataKind,\n getBase64Size,\n formatFileSize,\n};\n" }, { "type": "registry:file", "path": "components/assistant-ui/elements/follow-up-suggestions.aui.tsx", "target": "components/assistant-ui/elements/follow-up-suggestions.aui.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/follow-up-suggestions.aui.tsx", "content": "\"use client\";\n\nimport { AuiIf, useAuiState, ThreadPrimitive } from \"@assistant-ui/react\";\nimport { useCallback, useEffect, useRef, useState, type FC } from \"react\";\n\nconst FollowupSuggestionsRow: FC = () => {\n const suggestions = useAuiState((s) => s.thread.suggestions);\n const scrollRef = useRef(null);\n const rtlRef = useRef(null);\n const [fades, setFades] = useState({ left: false, right: false });\n\n const updateFades = useCallback(() => {\n const el = scrollRef.current;\n if (!el) return;\n const maxScroll = el.scrollWidth - el.clientWidth;\n // scrollLeft runs 0..-max in RTL; normalize to hidden width per physical edge.\n const fromStart = Math.abs(el.scrollLeft);\n // getComputedStyle forces a style recalc per scroll event; direction is stable, read it once.\n const rtl = (rtlRef.current ??= getComputedStyle(el).direction === \"rtl\");\n const [left, right] = rtl\n ? [maxScroll - fromStart, fromStart]\n : [fromStart, maxScroll - fromStart];\n setFades((prev) => {\n const next = { left: left > 1, right: right > 1 };\n return prev.left === next.left && prev.right === next.right ? prev : next;\n });\n }, []);\n\n useEffect(() => {\n updateFades();\n const el = scrollRef.current;\n if (!el?.firstElementChild) return undefined;\n const observer = new ResizeObserver(updateFades);\n observer.observe(el);\n observer.observe(el.firstElementChild);\n return () => observer.disconnect();\n }, [updateFades]);\n\n const maskImage = `linear-gradient(to right, ${\n fades.left ? \"transparent, black 2rem\" : \"black\"\n }, ${fades.right ? \"black calc(100% - 2rem), transparent\" : \"black\"})`;\n\n return (\n \n
\n {suggestions.map((suggestion, idx) => (\n \n {suggestion.title ?? suggestion.prompt}\n {suggestion.label && (\n \n {suggestion.label}\n \n )}\n \n ))}\n
\n \n );\n};\n\nexport const ThreadFollowupSuggestions: FC = () => (\n \n !s.thread.isEmpty &&\n !s.thread.isRunning &&\n s.thread.suggestions.length > 0\n }\n >\n \n \n);\n" }, { "type": "registry:file", "path": "components/assistant-ui/elements/image.tsx", "target": "components/assistant-ui/elements/image.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/image.tsx", "content": "\"use client\";\n\nimport {\n memo,\n useState,\n useEffect,\n useCallback,\n useRef,\n type PropsWithChildren,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n CopyIcon,\n DownloadIcon,\n ImageIcon,\n ImageOffIcon,\n Loader2Icon,\n RefreshCwIcon,\n ShieldAlertIcon,\n XIcon,\n} from \"lucide-react\";\nimport type {\n ImageMessagePart,\n ImageMessagePartComponent,\n} from \"@assistant-ui/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst extensionForMimeType = (mimeType?: string): string => {\n switch (mimeType) {\n case \"image/png\":\n return \"png\";\n case \"image/jpeg\":\n case \"image/jpg\":\n return \"jpg\";\n case \"image/webp\":\n return \"webp\";\n case \"image/gif\":\n return \"gif\";\n case \"image/svg+xml\":\n return \"svg\";\n default:\n return \"png\";\n }\n};\n\nconst dataUriToBlob = (dataUri: string): Blob => {\n const commaIndex = dataUri.indexOf(\",\");\n const meta = commaIndex >= 0 ? dataUri.slice(0, commaIndex) : dataUri;\n const data = commaIndex >= 0 ? dataUri.slice(commaIndex + 1) : \"\";\n const mime =\n meta.match(/data:([^;]+)/i)?.[1]?.toLowerCase() ??\n \"application/octet-stream\";\n if (!/;base64/i.test(meta)) {\n const text = data.replace(/(?:%[0-9A-Fa-f]{2})+/g, (seq) => {\n try {\n return decodeURIComponent(seq);\n } catch {\n return seq;\n }\n });\n return new Blob([text], { type: mime });\n }\n const bytes = atob(data);\n const arr = new Uint8Array(bytes.length);\n for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i);\n return new Blob([arr], { type: mime });\n};\n\nconst mimeFromImage = (image: string): string | undefined =>\n image.match(/^data:([^;,]+)/i)?.[1]?.toLowerCase();\n\nconst downloadImagePart = (\n part: Pick,\n): void => {\n if (typeof document === \"undefined\") return;\n const ext = extensionForMimeType(mimeFromImage(part.image));\n const filename = part.filename ?? `image.${ext}`;\n const isDataUri = /^data:/i.test(part.image);\n const objectUrl = isDataUri\n ? URL.createObjectURL(dataUriToBlob(part.image))\n : null;\n const href = objectUrl ?? part.image;\n const a = document.createElement(\"a\");\n a.href = href;\n a.download = filename;\n a.rel = \"noopener\";\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n if (objectUrl) setTimeout(() => URL.revokeObjectURL(objectUrl), 40_000);\n};\n\nconst copyImagePart = async (\n part: Pick,\n): Promise => {\n if (\n typeof navigator === \"undefined\" ||\n !navigator.clipboard ||\n typeof ClipboardItem === \"undefined\"\n ) {\n throw new Error(\"Clipboard API is not available in this environment.\");\n }\n const blob = /^data:/i.test(part.image)\n ? dataUriToBlob(part.image)\n : await fetch(part.image).then((r) => r.blob());\n const mime = mimeFromImage(part.image) ?? blob.type ?? \"image/png\";\n await navigator.clipboard.write([new ClipboardItem({ [mime]: blob })]);\n};\n\nconst imageVariants = cva(\n \"aui-image-root relative overflow-hidden rounded-lg\",\n {\n variants: {\n variant: {\n outline: \"border-border border\",\n ghost: \"\",\n muted: \"bg-muted/50\",\n },\n size: {\n sm: \"max-w-64\",\n default: \"max-w-96\",\n lg: \"max-w-[512px]\",\n full: \"w-full\",\n },\n },\n defaultVariants: {\n variant: \"outline\",\n size: \"default\",\n },\n },\n);\n\nexport type ImageRootProps = React.ComponentProps<\"div\"> &\n VariantProps;\n\nfunction ImageRoot({\n className,\n variant,\n size,\n children,\n ...props\n}: ImageRootProps) {\n return (\n \n {children}\n \n );\n}\n\ntype ImagePreviewProps = Omit, \"children\"> & {\n containerClassName?: string;\n};\n\nfunction ImagePreview({\n className,\n containerClassName,\n onLoad,\n onError,\n alt = \"Image content\",\n src,\n ...props\n}: ImagePreviewProps) {\n const imgRef = useRef(null);\n const [loadedSrc, setLoadedSrc] = useState(undefined);\n const [errorSrc, setErrorSrc] = useState(undefined);\n\n const loaded = loadedSrc === src;\n const error = errorSrc === src;\n\n useEffect(() => {\n const image = imgRef.current;\n if (typeof src !== \"string\" || !image?.complete) return;\n if (image.naturalWidth > 0) setLoadedSrc(src);\n else setErrorSrc(src);\n }, [src]);\n\n return (\n \n {!loaded && !error && (\n \n \n \n )}\n {error ? (\n \n \n \n ) : (\n {\n if (typeof src === \"string\") setLoadedSrc(src);\n onLoad?.(e);\n }}\n onError={(e) => {\n if (typeof src === \"string\") setErrorSrc(src);\n onError?.(e);\n }}\n {...props}\n />\n )}\n \n );\n}\n\nfunction ImageFilename({\n className,\n children,\n ...props\n}: React.ComponentProps<\"span\">) {\n if (!children) return null;\n\n return (\n \n {children}\n \n );\n}\n\ntype ImageZoomProps = PropsWithChildren<{\n src: string;\n alt?: string;\n}>;\n\nfunction ImageZoom({ src, alt = \"Image preview\", children }: ImageZoomProps) {\n const [isMounted, setIsMounted] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n const triggerRef = useRef(null);\n const closeRef = useRef(null);\n const overlayRef = useRef(null);\n\n useEffect(() => {\n setIsMounted(true);\n }, []);\n\n const handleOpen = useCallback(() => setIsOpen(true), []);\n const handleClose = useCallback(() => {\n setIsOpen(false);\n triggerRef.current?.focus();\n }, []);\n\n useEffect(() => {\n if (!isOpen) return;\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n handleClose();\n return;\n }\n if (e.key !== \"Tab\") return;\n const focusables = overlayRef.current?.querySelectorAll(\n 'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n );\n const first = focusables?.[0];\n const last = focusables?.[focusables.length - 1];\n if (!first || !last) return;\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n last.focus();\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [isOpen, handleClose]);\n\n useEffect(() => {\n if (!isOpen) return;\n const originalOverflow = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n return () => {\n document.body.style.overflow = originalOverflow;\n };\n }, [isOpen]);\n\n useEffect(() => {\n if (isOpen) closeRef.current?.focus();\n }, [isOpen]);\n\n return (\n <>\n e.key === \"Enter\" && handleOpen()}\n role=\"button\"\n tabIndex={0}\n className=\"aui-image-zoom-trigger cursor-zoom-in\"\n aria-label=\"Click to zoom image\"\n >\n {children}\n \n {isMounted &&\n isOpen &&\n createPortal(\n \n {\n e.stopPropagation();\n handleClose();\n }}\n />\n {\n e.stopPropagation();\n handleClose();\n }}\n className=\"text-muted-foreground hover:text-foreground bg-background/80 absolute end-4 top-4 cursor-pointer rounded-md p-2\"\n >\n \n \n ,\n document.body,\n )}\n \n );\n}\n\nfunction ImageGenerating({ className }: { className?: string }) {\n return (\n \n \n Generating image…\n \n );\n}\n\nfunction ImageContentFilterError({\n className,\n reason,\n}: {\n className?: string;\n reason?: string;\n}) {\n return (\n \n \n

Image could not be generated

\n {reason &&

{reason}

}\n \n );\n}\n\nexport type ImageActionsProps = {\n part: ImageMessagePart;\n /**\n * Wire to your own generation call to show a regenerate button. The button\n * renders only when this is set and the part carries a `prompt`.\n */\n onRegenerate?: () => void | Promise;\n className?: string;\n};\n\nfunction RegenerateButton({\n onRegenerate,\n}: {\n onRegenerate: () => void | Promise;\n}) {\n const [isRegenerating, setIsRegenerating] = useState(false);\n return (\n {\n setIsRegenerating(true);\n try {\n await onRegenerate();\n } catch {\n } finally {\n setIsRegenerating(false);\n }\n }}\n disabled={isRegenerating}\n data-slot=\"image-regenerate\"\n aria-label=\"Regenerate image\"\n className=\"hover:bg-muted inline-flex size-7 items-center justify-center rounded disabled:opacity-50\"\n >\n \n \n );\n}\n\nfunction ImageActions({ part, onRegenerate, className }: ImageActionsProps) {\n return (\n \n downloadImagePart(part)}\n data-slot=\"image-download\"\n aria-label=\"Download image\"\n className=\"hover:bg-muted inline-flex size-7 items-center justify-center rounded\"\n >\n \n \n {\n copyImagePart(part).catch(() => {});\n }}\n data-slot=\"image-copy\"\n aria-label=\"Copy image\"\n className=\"hover:bg-muted inline-flex size-7 items-center justify-center rounded\"\n >\n \n \n {onRegenerate && }\n \n );\n}\n\nconst ImageImpl: ImageMessagePartComponent = (props) => {\n const { image, filename, status } = props;\n\n if (status?.type === \"running\") {\n return (\n \n \n {filename}\n \n );\n }\n\n if (status?.type === \"incomplete\" && status.reason === \"content-filter\") {\n return (\n \n \n \n );\n }\n\n return (\n \n \n \n \n {filename}\n \n );\n};\n\nconst Image = memo(ImageImpl) as unknown as ImageMessagePartComponent & {\n Root: typeof ImageRoot;\n Preview: typeof ImagePreview;\n Filename: typeof ImageFilename;\n Zoom: typeof ImageZoom;\n Actions: typeof ImageActions;\n Generating: typeof ImageGenerating;\n ContentFilterError: typeof ImageContentFilterError;\n};\n\nImage.displayName = \"Image\";\nImage.Root = ImageRoot;\nImage.Preview = ImagePreview;\nImage.Filename = ImageFilename;\nImage.Zoom = ImageZoom;\nImage.Actions = ImageActions;\nImage.Generating = ImageGenerating;\nImage.ContentFilterError = ImageContentFilterError;\n\nexport {\n Image,\n ImageRoot,\n ImagePreview,\n ImageFilename,\n ImageZoom,\n ImageActions,\n ImageGenerating,\n ImageContentFilterError,\n imageVariants,\n};\n" }, { "type": "registry:file", "path": "components/assistant-ui/elements/markdown-text.tsx", "target": "components/assistant-ui/elements/markdown-text.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/markdown-text.tsx", "content": "\"use client\";\n\nimport \"@assistant-ui/react-markdown/styles/dot.css\";\n\nimport {\n type CodeHeaderProps,\n MarkdownTextPrimitive,\n unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,\n useIsMarkdownCodeBlock,\n} from \"@assistant-ui/react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport { type FC, memo, useMemo, useRef } from \"react\";\nimport type { TextMessagePartProps } from \"@assistant-ui/react\";\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\n\nimport { TooltipIconButton } from \"@/components/assistant-ui/elements/tooltip-icon-button\";\nimport { useCopyToClipboard } from \"@/hooks/use-copy-to-clipboard\";\nimport { cn } from \"@/lib/utils\";\n\ntype MarkdownTextProps = Partial & {\n components?: Parameters[0];\n};\n\nconst useShallowStable = | undefined>(\n value: T,\n): T => {\n const ref = useRef(value);\n if (value !== ref.current) {\n const prev = ref.current;\n const stable =\n value !== undefined &&\n prev !== undefined &&\n Object.keys(prev).length === Object.keys(value).length &&\n Object.keys(value).every((key) => prev[key] === value[key]);\n if (!stable) ref.current = value;\n }\n return ref.current;\n};\n\nconst MarkdownTextImpl: FC = ({ components }) => {\n const stableComponents = useShallowStable(components);\n const markdownComponents = useMemo(() => {\n if (!stableComponents) return defaultComponents;\n return {\n ...defaultComponents,\n ...memoizeMarkdownComponents(stableComponents),\n };\n }, [stableComponents]);\n\n return (\n \n );\n};\n\nexport const MarkdownText = memo(MarkdownTextImpl);\n\nconst CodeHeader: FC = ({ language, code }) => {\n const { isCopied, copyToClipboard } = useCopyToClipboard();\n const onCopy = () => {\n if (!code || isCopied) return;\n copyToClipboard(code);\n };\n\n return (\n
\n \n {language}\n \n \n {!isCopied && (\n \n )}\n {isCopied && (\n \n )}\n \n
\n );\n};\n\nconst defaultComponents = memoizeMarkdownComponents({\n h1: ({ className, ...props }) => (\n \n ),\n h2: ({ className, ...props }) => (\n \n ),\n h3: ({ className, ...props }) => (\n \n ),\n h4: ({ className, ...props }) => (\n \n ),\n h5: ({ className, ...props }) => (\n \n ),\n h6: ({ className, ...props }) => (\n \n ),\n p: ({ className, ...props }) => (\n \n ),\n a: ({ className, ...props }) => (\n \n ),\n blockquote: ({ className, ...props }) => (\n \n ),\n ul: ({ className, ...props }) => (\n li]:mt-1\",\n className,\n )}\n {...props}\n />\n ),\n ol: ({ className, ...props }) => (\n li]:mt-1\",\n className,\n )}\n {...props}\n />\n ),\n hr: ({ className, ...props }) => (\n \n ),\n table: ({ className, ...props }) => (\n
\n \n
\n ),\n th: ({ className, ...props }) => (\n \n ),\n td: ({ className, ...props }) => (\n \n ),\n tr: ({ className, ...props }) => (\n td:first-child]:rounded-es-lg [&:last-child>td:last-child]:rounded-ee-lg\",\n className,\n )}\n {...props}\n />\n ),\n li: ({ className, ...props }) => (\n
  • \n ),\n strong: ({ className, ...props }) => (\n \n ),\n sup: ({ className, ...props }) => (\n a]:text-xs [&>a]:no-underline\", className)}\n {...props}\n />\n ),\n pre: ({ className, ...props }) => (\n \n ),\n code: function Code({ className, ...props }) {\n const isCodeBlock = useIsMarkdownCodeBlock();\n return (\n \n );\n },\n CodeHeader,\n});\n" }, { "type": "registry:file", "path": "hooks/use-copy-to-clipboard.ts", "target": "hooks/use-copy-to-clipboard.ts", "sourcePath": "packages/ui/src/hooks/use-copy-to-clipboard.ts", "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nexport type UseCopyToClipboardOptions = {\n copiedDuration?: number;\n};\n\nexport const useCopyToClipboard = ({\n copiedDuration = 3000,\n}: UseCopyToClipboardOptions = {}) => {\n const [isCopied, setIsCopied] = useState(false);\n\n const copyToClipboard = (value: string) => {\n if (!value || typeof navigator === \"undefined\" || !navigator.clipboard) {\n return;\n }\n\n navigator.clipboard.writeText(value).then(\n () => {\n setIsCopied(true);\n setTimeout(() => setIsCopied(false), copiedDuration);\n },\n () => {},\n );\n };\n\n return { isCopied, copyToClipboard };\n};\n" }, { "type": "registry:file", "path": "components/assistant-ui/elements/reasoning.aui.tsx", "target": "components/assistant-ui/elements/reasoning.aui.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/reasoning.aui.tsx", "content": "\"use client\";\n\nimport { memo, useCallback, useRef } from \"react\";\nimport {\n useScrollLock,\n useAuiState,\n type ReasoningMessagePartComponent,\n type ReasoningGroupComponent,\n} from \"@assistant-ui/react\";\nimport { MarkdownText } from \"@/components/assistant-ui/elements/markdown-text\";\nimport {\n ANIMATION_DURATION,\n ReasoningRoot as ReasoningRootBase,\n ReasoningTrigger,\n ReasoningContent,\n ReasoningText,\n ReasoningFade,\n reasoningVariants,\n type ReasoningRootProps,\n} from \"./reasoning\";\n\nexport type { ReasoningRootProps } from \"./reasoning\";\n\n/** `ReasoningRoot` with the thread viewport scroll locked during disclosure animations. */\nfunction ReasoningRoot({\n ref,\n onAnimationStart,\n ...props\n}: ReasoningRootProps) {\n const collapsibleRef = useRef(null);\n const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);\n\n const handleAnimationStart = useCallback(() => {\n lockScroll();\n onAnimationStart?.();\n }, [lockScroll, onAnimationStart]);\n\n const composedRef = useCallback(\n (node: HTMLDivElement | null) => {\n collapsibleRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n },\n [ref],\n );\n\n return (\n \n );\n}\n\nconst ReasoningImpl: ReasoningMessagePartComponent = () => ;\n\nconst ReasoningGroupImpl: ReasoningGroupComponent = ({\n children,\n startIndex,\n endIndex,\n}) => {\n const isReasoningStreaming = useAuiState((s) => {\n if (s.message.status?.type !== \"running\") return false;\n for (let index = startIndex; index <= endIndex; index++) {\n if (s.message.parts[index]?.status.type === \"running\") return true;\n }\n return false;\n });\n\n return (\n \n \n \n {children}\n \n \n );\n};\n\nconst Reasoning = memo(\n ReasoningImpl,\n) as unknown as ReasoningMessagePartComponent & {\n Root: typeof ReasoningRoot;\n Trigger: typeof ReasoningTrigger;\n Content: typeof ReasoningContent;\n Text: typeof ReasoningText;\n Fade: typeof ReasoningFade;\n};\n\nReasoning.displayName = \"Reasoning\";\nReasoning.Root = ReasoningRoot;\nReasoning.Trigger = ReasoningTrigger;\nReasoning.Content = ReasoningContent;\nReasoning.Text = ReasoningText;\nReasoning.Fade = ReasoningFade;\n\n/**\n * @deprecated This wrapper targets the legacy `components.ReasoningGroup`\n * prop on ``. Use ``\n * with a `groupBy` returning `\"group-reasoning\"` and compose `ReasoningRoot`\n * / `ReasoningTrigger` / `ReasoningContent` / `ReasoningText` directly.\n * See `thread.aui.tsx` for an example.\n */\nconst ReasoningGroup = memo(ReasoningGroupImpl);\nReasoningGroup.displayName = \"ReasoningGroup\";\n\nexport {\n Reasoning,\n ReasoningGroup,\n ReasoningRoot,\n ReasoningTrigger,\n ReasoningContent,\n ReasoningText,\n ReasoningFade,\n reasoningVariants,\n};\n" }, { "type": "registry:file", "path": "components/assistant-ui/elements/reasoning.tsx", "target": "components/assistant-ui/elements/reasoning.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/reasoning.tsx", "content": "\"use client\";\n\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { BrainIcon, ChevronDownIcon } from \"lucide-react\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nexport const ANIMATION_DURATION = 200;\n\nconst ReasoningPreviewContext = createContext(false);\n\nconst reasoningVariants = cva(\"aui-reasoning-root mb-4 w-full\", {\n variants: {\n variant: {\n outline: \"rounded-lg border px-3 py-2\",\n ghost: \"\",\n muted: \"bg-muted/50 rounded-lg px-3 py-2\",\n },\n },\n defaultVariants: {\n variant: \"outline\",\n },\n});\n\nexport type ReasoningRootProps = Omit<\n React.ComponentProps,\n \"open\" | \"onOpenChange\"\n> &\n VariantProps & {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n defaultOpen?: boolean;\n /**\n * Whether the reasoning is currently streaming. While `true` the\n * disclosure is held open with a bottom-pinned live preview; when\n * streaming ends it returns to `defaultOpen`, and the first manual\n * toggle takes over the open/close state permanently. The live preview\n * keeps following the newest tokens while the disclosure is open during\n * streaming, even after a manual toggle, and pauses while the reader is\n * scrolled up.\n */\n streaming?: boolean;\n /** Called right before the disclosure animates, on toggle and on streaming transitions. */\n onAnimationStart?: () => void;\n };\n\nfunction ReasoningRoot({\n className,\n variant,\n open: controlledOpen,\n onOpenChange: controlledOnOpenChange,\n defaultOpen = false,\n streaming,\n onAnimationStart,\n children,\n ...props\n}: ReasoningRootProps) {\n const initialOpenRef = useRef(defaultOpen);\n const [userOpen, setUserOpen] = useState(null);\n\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled\n ? controlledOpen\n : (userOpen ?? (streaming || initialOpenRef.current));\n const isPreview = streaming === true && isOpen;\n\n const prevStreamingRef = useRef(streaming);\n useLayoutEffect(() => {\n if (prevStreamingRef.current === streaming) return;\n prevStreamingRef.current = streaming;\n // A streaming transition only animates the panel when the resting state\n // is collapsed; with `defaultOpen` the disclosure stays open across it.\n if (!isControlled && userOpen === null && !initialOpenRef.current) {\n onAnimationStart?.();\n }\n }, [streaming, isControlled, userOpen, onAnimationStart]);\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n onAnimationStart?.();\n if (!isControlled) {\n setUserOpen(open);\n }\n controlledOnOpenChange?.(open);\n },\n [onAnimationStart, isControlled, controlledOnOpenChange],\n );\n\n return (\n \n \n {children}\n \n \n );\n}\n\nfunction ReasoningFade({\n side = \"bottom\",\n className,\n ...props\n}: React.ComponentProps<\"div\"> & { side?: \"top\" | \"bottom\" }) {\n if (side === \"top\") {\n return (\n \n );\n }\n\n return (\n \n );\n}\n\nfunction ReasoningTrigger({\n active,\n duration,\n className,\n ...props\n}: React.ComponentProps & {\n active?: boolean;\n duration?: number;\n}) {\n const durationText = duration ? ` (${duration}s)` : \"\";\n\n return (\n \n \n \n Reasoning{durationText}\n \n \n \n );\n}\n\nfunction ReasoningContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n const isPreview = useContext(ReasoningPreviewContext);\n\n return (\n \n \n {children}\n {isPreview ? : null}\n \n );\n}\n\nfunction ReasoningText({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n const isPreview = useContext(ReasoningPreviewContext);\n const scrollRef = useRef(null);\n const contentRef = useRef(null);\n\n useEffect(() => {\n if (!isPreview) return;\n const scrollEl = scrollRef.current;\n const contentEl = contentRef.current;\n if (!scrollEl || !contentEl) return;\n\n let pinned = true;\n let lastScrollTop = scrollEl.scrollTop;\n let lastScrollHeight = scrollEl.scrollHeight;\n const isAtBottom = () =>\n Math.abs(\n scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight,\n ) <= 1 || scrollEl.scrollHeight <= scrollEl.clientHeight;\n\n const pin = () => {\n if (!pinned) return;\n scrollEl.scrollTop = scrollEl.scrollHeight;\n };\n // A pin's own scroll event can arrive after new content grew the scroll\n // height and read as \"not at bottom\"; only an upward move at unchanged\n // scroll height is user intent.\n const onScroll = () => {\n if (isAtBottom()) {\n pinned = true;\n } else if (\n scrollEl.scrollTop < lastScrollTop &&\n scrollEl.scrollHeight === lastScrollHeight\n ) {\n pinned = false;\n }\n lastScrollTop = scrollEl.scrollTop;\n lastScrollHeight = scrollEl.scrollHeight;\n };\n\n pin();\n scrollEl.addEventListener(\"scroll\", onScroll);\n const observer = new ResizeObserver(pin);\n observer.observe(contentEl);\n return () => {\n scrollEl.removeEventListener(\"scroll\", onScroll);\n observer.disconnect();\n };\n }, [isPreview]);\n\n return (\n \n
    \n {children}\n
    \n \n );\n}\n\nexport {\n ReasoningRoot,\n ReasoningTrigger,\n ReasoningContent,\n ReasoningText,\n ReasoningFade,\n reasoningVariants,\n};\n" }, { "type": "registry:file", "path": "components/assistant-ui/elements/tool-fallback.aui.tsx", "target": "components/assistant-ui/elements/tool-fallback.aui.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/tool-fallback.aui.tsx", "content": "\"use client\";\n\nimport { memo, useCallback, useRef, useState } from \"react\";\nimport {\n AlertCircleIcon,\n CheckIcon,\n ChevronDownIcon,\n LoaderIcon,\n XCircleIcon,\n} from \"lucide-react\";\nimport {\n toolApprovalAcceptsText,\n useScrollLock,\n useToolCallElapsed,\n type ToolApprovalOption,\n type ToolCallMessagePart,\n type ToolCallMessagePartProps,\n type ToolCallMessagePartStatus,\n type ToolCallMessagePartComponent,\n} from \"@assistant-ui/react\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nconst ANIMATION_DURATION = 200;\n\nconst pressable = \"active:scale-[0.98]\";\n\nexport type ToolFallbackRootProps = Omit<\n React.ComponentProps,\n \"open\" | \"onOpenChange\"\n> & {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n defaultOpen?: boolean;\n};\n\nfunction ToolFallbackRoot({\n className,\n open: controlledOpen,\n onOpenChange: controlledOnOpenChange,\n defaultOpen = false,\n children,\n ...props\n}: ToolFallbackRootProps) {\n const collapsibleRef = useRef(null);\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);\n\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n lockScroll();\n if (!isControlled) {\n setUncontrolledOpen(open);\n }\n controlledOnOpenChange?.(open);\n },\n [lockScroll, isControlled, controlledOnOpenChange],\n );\n\n return (\n \n {children}\n \n );\n}\n\ntype ToolStatus = ToolCallMessagePartStatus[\"type\"];\n\nconst statusIconMap: Record = {\n running: LoaderIcon,\n complete: CheckIcon,\n incomplete: XCircleIcon,\n \"requires-action\": AlertCircleIcon,\n};\n\nconst formatToolDuration = (ms: number) => {\n if (ms < 1000) return \"<1s\";\n const seconds = ms / 1000;\n if (seconds < 10) return `${(Math.floor(seconds * 10) / 10).toFixed(1)}s`;\n if (seconds < 60) return `${Math.floor(seconds)}s`;\n return `${Math.floor(seconds / 60)}m ${Math.floor(seconds % 60)}s`;\n};\n\nfunction ToolFallbackDuration({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n const elapsedMs = useToolCallElapsed();\n if (elapsedMs === undefined) return null;\n\n return (\n \n {formatToolDuration(elapsedMs)}\n \n );\n}\n\nfunction ToolFallbackTrigger({\n toolName,\n status,\n className,\n ...props\n}: React.ComponentProps & {\n toolName: string;\n status?: ToolCallMessagePartStatus;\n}) {\n const statusType = status?.type ?? \"complete\";\n const isRunning = statusType === \"running\";\n const isCancelled =\n status?.type === \"incomplete\" && status.reason === \"cancelled\";\n\n const Icon = statusIconMap[statusType];\n const label = isCancelled ? \"Cancelled tool\" : \"Used tool\";\n\n return (\n \n \n \n {label}: {toolName}\n \n \n \n \n );\n}\n\nfunction ToolFallbackContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n );\n}\n\nfunction ToolFallbackArgs({\n argsText,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n argsText?: string;\n}) {\n if (!argsText) return null;\n\n return (\n \n 
    \n        {argsText}\n
    \n \n );\n}\n\nfunction ToolFallbackResult({\n result,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n result?: unknown;\n}) {\n if (result === undefined) return null;\n\n return (\n \n

    \n Result:\n

    \n 
    \n        {typeof result === \"string\" ? result : JSON.stringify(result, null, 2)}\n
    \n \n );\n}\n\nfunction ToolFallbackError({\n status,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n status?: ToolCallMessagePartStatus;\n}) {\n if (status?.type !== \"incomplete\") return null;\n\n const error = status.error;\n const errorText = error\n ? typeof error === \"string\"\n ? error\n : JSON.stringify(error)\n : null;\n\n if (!errorText) return null;\n\n const isCancelled = status.reason === \"cancelled\";\n const headerText = isCancelled ? \"Cancelled reason:\" : \"Error:\";\n\n return (\n \n

    \n {headerText}\n

    \n

    \n {errorText}\n

    \n \n );\n}\n\nconst APPROVED_RESULT = \"Approved by user\";\nconst DENIED_RESULT = \"User denied tool execution\";\n\nconst APPROVAL_OPTION_DEFAULT_LABELS: Record = {\n \"allow-once\": \"Allow\",\n \"allow-always\": \"Always allow\",\n \"reject-once\": \"Deny\",\n \"reject-always\": \"Always deny\",\n};\n\nconst isKnownKind = (kind: string) =>\n Object.hasOwn(APPROVAL_OPTION_DEFAULT_LABELS, kind);\n\nconst isAllowKind = (kind: string) =>\n kind === \"allow-once\" || kind === \"allow-always\";\n\nconst approvalOptionLabel = (option: ToolApprovalOption) =>\n option.label ??\n (isKnownKind(option.kind)\n ? APPROVAL_OPTION_DEFAULT_LABELS[option.kind]\n : undefined) ??\n option.id;\n\n/**\n * A request that declares how it wants to be presented is asking a question,\n * not gating an action, so a refusal is not one of the answers it accepts.\n */\nconst isQuestion = (approval: ToolCallMessagePart[\"approval\"]) =>\n approval?.display === \"select\" || approval?.display === \"text\";\n\nconst offersInterruptAction = (\n status: ToolCallMessagePartStatus | undefined,\n approval: ToolCallMessagePart[\"approval\"],\n interrupt: ToolCallMessagePart[\"interrupt\"],\n) =>\n status?.type !== \"requires-action\" ||\n status.reason !== \"interrupt\" ||\n approval != null ||\n interrupt != null;\n\nfunction ToolFallbackApproval({\n className,\n addResult,\n resume,\n interrupt,\n approval,\n respondToApproval,\n status,\n ...props\n}: React.ComponentProps<\"div\"> &\n Partial<\n Pick<\n ToolCallMessagePartProps,\n \"addResult\" | \"resume\" | \"respondToApproval\" | \"status\"\n >\n > & {\n interrupt?: ToolCallMessagePart[\"interrupt\"];\n approval?: ToolCallMessagePart[\"approval\"];\n }) {\n const [submitted, setSubmitted] = useState(false);\n const [confirmingId, setConfirmingId] = useState(null);\n const [answer, setAnswer] = useState(\"\");\n const [error, setError] = useState(null);\n\n if (\n approval != null &&\n (approval.approved !== undefined || approval.resolution !== undefined)\n )\n return null;\n\n if (!offersInterruptAction(status, approval, interrupt)) return null;\n\n // A declared option list is a host constraint: the kit never adds an\n // approval path beyond it, and preserves a refusal path only where the\n // request is an action the user may refuse.\n const declaredOptions = respondToApproval ? approval?.options : undefined;\n const acceptsText =\n approval != null &&\n respondToApproval != null &&\n toolApprovalAcceptsText(approval);\n\n // A refused response leaves the request open, so the controls come back\n // rather than staying spent on a decision the runtime never recorded.\n const submit = (send: () => Promise | void) => {\n setSubmitted(true);\n setError(null);\n void (async () => {\n try {\n await send();\n } catch (sendError) {\n setSubmitted(false);\n setError(\n sendError instanceof Error ? sendError.message : String(sendError),\n );\n }\n })();\n };\n\n const respond = (approved: boolean) => {\n if (submitted) return;\n if (\n approval != null &&\n approval.approved === undefined &&\n respondToApproval\n ) {\n submit(() => respondToApproval({ approved, ...typedAnswer() }));\n } else if (interrupt) {\n submit(() => resume?.({ approved }));\n } else if (\n status?.type === \"requires-action\" &&\n status.reason === \"interrupt\"\n ) {\n return;\n } else {\n submit(() => addResult?.(approved ? APPROVED_RESULT : DENIED_RESULT));\n }\n };\n\n const respondWithOption = (option: ToolApprovalOption) => {\n if (submitted) return;\n setConfirmingId(null);\n // A custom kind has no decision class for the runtime to derive, and\n // responding without one throws; picking a declared option is an answer,\n // so it resolves as approved.\n submit(() =>\n respondToApproval?.(\n isKnownKind(option.kind)\n ? { optionId: option.id, ...typedAnswer() }\n : { optionId: option.id, approved: true, ...typedAnswer() },\n ),\n );\n };\n\n const typedAnswer = () => (answer.trim() ? { text: answer } : {});\n\n const submitAnswer = () => {\n if (submitted || !answer.trim()) return;\n submit(() => respondToApproval?.({ text: answer }));\n };\n\n const handleOption = (option: ToolApprovalOption) => {\n if (option.confirm) {\n setConfirmingId(option.id);\n } else {\n respondWithOption(option);\n }\n };\n\n const confirming =\n confirmingId != null\n ? declaredOptions?.find((o) => o.id === confirmingId)\n : undefined;\n\n const question = isQuestion(approval);\n\n const promptText = approval?.prompt ? (\n

    \n {approval.prompt}\n

    \n ) : null;\n\n const errorText = error ? (\n \n {error}\n

    \n ) : null;\n\n const answerField = acceptsText ? (\n
    \n setAnswer(event.target.value)}\n disabled={submitted}\n aria-label={question ? (approval?.prompt ?? \"Answer\") : \"Note\"}\n placeholder={\n question ? \"Type your answer\" : \"Add a note to your decision\"\n }\n />\n {question && (\n \n Send\n \n )}\n
    \n ) : null;\n\n if (confirming) {\n const confirmMeta =\n typeof confirming.confirm === \"object\" ? confirming.confirm : undefined;\n const confirmDescription =\n confirmMeta?.description ?? confirming.description;\n return (\n \n

    \n {confirmMeta?.title ?? `${approvalOptionLabel(confirming)}?`}\n

    \n {confirmDescription && (\n

    \n {confirmDescription}\n

    \n )}\n {confirming.grants && confirming.grants.length > 0 && (\n
      \n {confirming.grants.map((grant) => (\n
    • \n \n {grant}\n \n
      • \n ))}\n
    \n )}\n
    \n respondWithOption(confirming)}\n disabled={submitted}\n >\n Confirm\n \n setConfirmingId(null)}\n disabled={submitted}\n >\n Back\n \n
    \n \n );\n }\n\n if (declaredOptions && declaredOptions.length > 0) {\n const allowOptions = declaredOptions.filter((o) => isAllowKind(o.kind));\n const customOptions = declaredOptions.filter((o) => !isKnownKind(o.kind));\n const rejectOptions = declaredOptions.filter(\n (o) => isKnownKind(o.kind) && !isAllowKind(o.kind),\n );\n return (\n \n {promptText}\n
    \n {[...allowOptions, ...customOptions, ...rejectOptions].map(\n (option) => (\n handleOption(option)}\n disabled={submitted}\n >\n {approvalOptionLabel(option)}\n \n ),\n )}\n {rejectOptions.length === 0 && !question && (\n respond(false)}\n disabled={submitted}\n >\n Deny\n \n )}\n
    \n {answerField}\n {errorText}\n \n );\n }\n\n // A question carries no decision to fabricate, so it renders only what the\n // request declared, even when that leaves nothing to act on here.\n if (question) {\n return (\n \n {promptText}\n {answerField}\n {errorText}\n \n );\n }\n\n return (\n \n {promptText}\n
    \n respond(true)}\n disabled={submitted}\n >\n Allow\n \n respond(false)}\n disabled={submitted}\n >\n Deny\n \n
    \n {answerField}\n {errorText}\n \n );\n}\n\nconst ToolFallbackImpl: ToolCallMessagePartComponent = ({\n toolName,\n argsText,\n result,\n status,\n addResult,\n resume,\n interrupt,\n approval,\n respondToApproval,\n}) => {\n const isCancelled =\n status?.type === \"incomplete\" && status.reason === \"cancelled\";\n const isRequiresAction = status?.type === \"requires-action\";\n const shouldRenderApproval =\n isRequiresAction && offersInterruptAction(status, approval, interrupt);\n\n const [open, setOpen] = useState(isRequiresAction);\n const [prevRequiresAction, setPrevRequiresAction] =\n useState(isRequiresAction);\n if (isRequiresAction !== prevRequiresAction) {\n setPrevRequiresAction(isRequiresAction);\n if (isRequiresAction) setOpen(true);\n }\n\n return (\n \n \n \n \n \n {shouldRenderApproval && (\n \n )}\n {!isCancelled && }\n \n \n );\n};\n\nconst ToolFallback = memo(\n ToolFallbackImpl,\n) as unknown as ToolCallMessagePartComponent & {\n Root: typeof ToolFallbackRoot;\n Trigger: typeof ToolFallbackTrigger;\n Content: typeof ToolFallbackContent;\n Args: typeof ToolFallbackArgs;\n Result: typeof ToolFallbackResult;\n Error: typeof ToolFallbackError;\n Approval: typeof ToolFallbackApproval;\n};\n\nToolFallback.displayName = \"ToolFallback\";\nToolFallback.Root = ToolFallbackRoot;\nToolFallback.Trigger = ToolFallbackTrigger;\nToolFallback.Content = ToolFallbackContent;\nToolFallback.Args = ToolFallbackArgs;\nToolFallback.Result = ToolFallbackResult;\nToolFallback.Error = ToolFallbackError;\nToolFallback.Approval = ToolFallbackApproval;\n\nexport {\n ToolFallback,\n ToolFallbackRoot,\n ToolFallbackTrigger,\n ToolFallbackContent,\n ToolFallbackArgs,\n ToolFallbackResult,\n ToolFallbackError,\n ToolFallbackApproval,\n};\n" }, { "type": "registry:file", "path": "components/assistant-ui/elements/tool-group.aui.tsx", "target": "components/assistant-ui/elements/tool-group.aui.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/tool-group.aui.tsx", "content": "\"use client\";\n\nimport {\n memo,\n useCallback,\n useRef,\n useState,\n type FC,\n type PropsWithChildren,\n} from \"react\";\nimport { ChevronDownIcon, LoaderIcon } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useScrollLock } from \"@assistant-ui/react\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nconst ANIMATION_DURATION = 200;\n\nconst toolGroupVariants = cva(\"aui-tool-group-root group/tool-group w-full\", {\n variants: {\n variant: {\n outline: \"rounded-lg border py-3\",\n ghost: \"\",\n muted: \"border-muted-foreground/30 bg-muted/30 rounded-lg border py-3\",\n },\n },\n defaultVariants: { variant: \"outline\" },\n});\n\nexport type ToolGroupRootProps = Omit<\n React.ComponentProps,\n \"open\" | \"onOpenChange\"\n> &\n VariantProps & {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n defaultOpen?: boolean;\n };\n\nfunction ToolGroupRoot({\n className,\n variant,\n open: controlledOpen,\n onOpenChange: controlledOnOpenChange,\n defaultOpen = false,\n children,\n ...props\n}: ToolGroupRootProps) {\n const collapsibleRef = useRef(null);\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);\n\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n lockScroll();\n if (!isControlled) {\n setUncontrolledOpen(open);\n }\n controlledOnOpenChange?.(open);\n },\n [lockScroll, isControlled, controlledOnOpenChange],\n );\n\n return (\n \n {children}\n \n );\n}\n\nfunction ToolGroupTrigger({\n count,\n active = false,\n className,\n ...props\n}: React.ComponentProps & {\n count: number;\n active?: boolean;\n}) {\n const label = `${count} tool ${count === 1 ? \"call\" : \"calls\"}`;\n\n return (\n \n {active && (\n \n )}\n \n {label}\n \n \n \n );\n}\n\nfunction ToolGroupContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n *]:animate-in [&>*]:fade-in-0 [&>*]:blur-in-[2px] [&>*]:slide-in-from-top-1 [&>*]:animation-duration-(--animation-duration) [&>*]:ease-[cubic-bezier(0.32,0.72,0,1)]\",\n \"[&>*]:motion-reduce:animate-none\",\n \"[&>*:nth-child(2)]:[animation-delay:40ms]\",\n \"[&>*:nth-child(3)]:[animation-delay:80ms]\",\n \"[&>*:nth-child(4)]:[animation-delay:120ms]\",\n \"[&>*:nth-child(n+5)]:[animation-delay:160ms]\",\n )}\n >\n {children}\n \n \n );\n}\n\ntype ToolGroupComponent = FC<\n PropsWithChildren<{ startIndex: number; endIndex: number }>\n> & {\n Root: typeof ToolGroupRoot;\n Trigger: typeof ToolGroupTrigger;\n Content: typeof ToolGroupContent;\n};\n\nconst ToolGroupImpl: FC<\n PropsWithChildren<{ startIndex: number; endIndex: number }>\n> = ({ children, startIndex, endIndex }) => {\n const toolCount = endIndex - startIndex + 1;\n\n return (\n \n \n {children}\n \n );\n};\n\n/**\n * @deprecated This wrapper targets the legacy `components.ToolGroup` prop\n * on ``. Use `` with\n * a `groupBy` returning `\"group-tool\"` and compose `ToolGroupRoot` /\n * `ToolGroupTrigger` / `ToolGroupContent` directly. See `thread.tsx`.\n */\nconst ToolGroup = memo(ToolGroupImpl) as unknown as ToolGroupComponent;\n\nToolGroup.displayName = \"ToolGroup\";\nToolGroup.Root = ToolGroupRoot;\nToolGroup.Trigger = ToolGroupTrigger;\nToolGroup.Content = ToolGroupContent;\n\nexport {\n ToolGroup,\n ToolGroupRoot,\n ToolGroupTrigger,\n ToolGroupContent,\n toolGroupVariants,\n};\n" }, { "type": "registry:file", "path": "components/ui/avatar.tsx", "target": "components/ui/avatar.tsx", "sourcePath": "packages/ui/src/components/react/ui/radix/avatar.tsx", "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Avatar({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps & {\n size?: \"default\" | \"sm\" | \"lg\";\n}) {\n return (\n \n );\n}\n\nfunction AvatarImage({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n svg]:hidden\",\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n );\n}\n\nfunction AvatarGroupCount({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarBadge,\n AvatarGroup,\n AvatarGroupCount,\n};\n" }, { "type": "registry:file", "path": "components/ui/button.tsx", "target": "components/ui/button.tsx", "sourcePath": "packages/ui/src/components/react/ui/radix/button.tsx", "content": "import type * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex shrink-0 items-center justify-center gap-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 text-white\",\n outline:\n \"bg-muted/70 text-foreground hover:bg-muted dark:bg-muted/50 dark:hover:bg-muted border-transparent\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n xs: \"h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n \"icon-xs\": \"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean;\n }) {\n const Comp = asChild ? Slot.Root : \"button\";\n\n return (\n \n );\n}\n\nexport { Button, buttonVariants };\n" }, { "type": "registry:file", "path": "components/ui/collapsible.tsx", "target": "components/ui/collapsible.tsx", "sourcePath": "packages/ui/src/components/react/ui/radix/collapsible.tsx", "content": "\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\n\nfunction Collapsible({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction CollapsibleTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction CollapsibleContent({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n" }, { "type": "registry:file", "path": "components/ui/dialog.tsx", "target": "components/ui/dialog.tsx", "sourcePath": "packages/ui/src/components/react/ui/radix/dialog.tsx", "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\nfunction Dialog({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DialogTrigger({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DialogPortal({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DialogClose({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: React.ComponentProps & {\n showCloseButton?: boolean;\n}) {\n return (\n \n \n \n {children}\n {showCloseButton && (\n \n \n Close\n \n )}\n \n \n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n );\n}\n\nfunction DialogFooter({\n className,\n showCloseButton = false,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n showCloseButton?: boolean;\n}) {\n return (\n \n {children}\n {showCloseButton && (\n \n \n \n )}\n \n );\n}\n\nfunction DialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n" }, { "type": "registry:file", "path": "components/ui/skeleton.tsx", "target": "components/ui/skeleton.tsx", "sourcePath": "packages/ui/src/components/react/ui/radix/skeleton.tsx", "content": "import { cn } from \"@/lib/utils\";\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n );\n}\n\nexport { Skeleton };\n" }, { "type": "registry:file", "path": "components/ui/textarea.tsx", "target": "components/ui/textarea.tsx", "sourcePath": "packages/ui/src/components/react/ui/radix/textarea.tsx", "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n return (\n \n );\n}\n\nexport { Textarea };\n" }, { "type": "registry:file", "path": "components/ui/tooltip.tsx", "target": "components/ui/tooltip.tsx", "sourcePath": "packages/ui/src/components/react/ui/radix/tooltip.tsx", "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction TooltipProvider({\n delayDuration = 0,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction Tooltip({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction TooltipTrigger({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction TooltipContent({\n className,\n sideOffset = 0,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n \n );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n" } ] }