57:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 58:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 59:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 5a:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}] 50:["$","li","tw-shimmer@^0.4.14",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tw-shimmer","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tw-shimmer@^0.4.14"}]]}]}] 51:["$","li","@assistant-ui/react-markdown@^0.14.23",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40assistant-ui%2Freact-markdown","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@assistant-ui/react-markdown@^0.14.23"}]]}]}] 52:["$","li","remark-gfm",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remark-gfm","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remark-gfm"}]]}]}] 53:["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui"}]]}]}] 54:["$","$L57",null,{"namespace":"@assistant-ui","registryDependencies":[]}] 55:["$","$L58",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L59",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"tw-shimmer\" {\n\n}\n\n@custom-variant data-open (&:where([data-state=\"open\"], [data-open]:not([data-open=\"false\"]))) {\n\n}\n\n@custom-variant data-closed (&:where([data-state=\"closed\"], [data-closed]:not([data-closed=\"false\"]))) {\n\n}\n\n@keyframes collapsible-down {\n\tfrom {\n\t\theight: 0;\n\t}\n\tto {\n\t\theight: var(--radix-collapsible-content-height, var(--collapsible-panel-height, auto));\n\t}\n}\n\n@keyframes collapsible-up {\n\tfrom {\n\t\theight: var(--radix-collapsible-content-height, var(--collapsible-panel-height, auto));\n\t}\n\tto {\n\t\theight: 0;\n\t}\n}"}]}]]}]]}]}]}] 5b:T81ea,"use client"; import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments, } from "@/components/assistant-ui/elements/attachment.aui"; import { File, getFileHref } from "@/components/assistant-ui/elements/file"; import { ThreadFollowupSuggestions } from "@/components/assistant-ui/elements/follow-up-suggestions.aui"; import { Image } from "@/components/assistant-ui/elements/image"; import { MarkdownText } from "@/components/assistant-ui/elements/markdown-text"; import { Reasoning, ReasoningContent, ReasoningRoot, ReasoningText, ReasoningTrigger, } from "@/components/assistant-ui/elements/reasoning.aui"; import { ToolFallback } from "@/components/assistant-ui/elements/tool-fallback.aui"; import { ToolGroupContent, ToolGroupRoot, ToolGroupTrigger, } from "@/components/assistant-ui/elements/tool-group.aui"; import { TooltipIconButton } from "@/components/assistant-ui/elements/tooltip-icon-button"; import { Button } from "@/components/ui/button"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { ActionBarMorePrimitive, ActionBarPrimitive, AuiIf, type AssistantState, BranchPickerPrimitive, ComposerPrimitive, ErrorPrimitive, groupPartByType, MessagePrimitive, SuggestionPrimitive, ThreadPrimitive, type FileMessagePartComponent, type ImageMessagePartComponent, type TextMessagePartComponent, type ToolCallMessagePartComponent, useAuiState, } from "@assistant-ui/react"; import { ArrowDownIcon, ArrowUpIcon, AudioLinesIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DownloadIcon, MicIcon, MoreHorizontalIcon, PencilIcon, PhoneIcon, RefreshCwIcon, SquareIcon, ThumbsDownIcon, ThumbsUpIcon, } from "lucide-react"; import { createContext, useContext, useLayoutEffect, useRef, type ComponentType, type FC, type PropsWithChildren, } from "react"; export type ThreadGroupPart = MessagePrimitive.GroupedParts.GroupPart; const reasoningDuration = (timing: ThreadGroupPart["timing"]) => timing?.completedAt === undefined ? undefined : Math.round((timing.completedAt - timing.startedAt) / 1000); /** * Optional component overrides for the thread. `AssistantMessage` and * `Welcome` replace whole sections; the remaining slots override how the * assistant message renders tool calls and part groups. Tool UIs registered * by name (toolkit `render`, `useAssistantDataUI`) take precedence over * `ToolFallback`. When `TaskGroup` is set, tool calls that carry a nested * conversation and have no registered UI render through it instead of the * tool group; without it they render like any other tool call. */ export type ThreadComponents = { AssistantMessage?: ComponentType | undefined; Welcome?: ComponentType | undefined; ToolFallback?: ToolCallMessagePartComponent | undefined; ToolGroup?: | ComponentType> | undefined; ReasoningGroup?: | ComponentType> | undefined; TaskGroup?: ComponentType<{ group: ThreadGroupPart }> | undefined; }; const messageGroupBy = groupPartByType({ reasoning: ["group-chainOfThought", "group-reasoning"], "tool-call": ["group-chainOfThought", "group-tool"], "standalone-tool-call": [], }); type ThreadGroupKey = | "group-chainOfThought" | "group-reasoning" | "group-tool" | "group-task"; const TASK_GROUP_PATH: readonly ThreadGroupKey[] = [ "group-chainOfThought", "group-task", ]; const taskAwareGroupBy = ( part: Parameters[0], context?: Parameters[1], ): readonly ThreadGroupKey[] => { const path = messageGroupBy(part, context); return part.type === "tool-call" && part.messages !== undefined && path.length > 0 && !context?.toolUIs?.[part.toolName]?.length ? TASK_GROUP_PATH : path; }; export type ThreadProps = { components?: ThreadComponents | undefined; autoFocus?: boolean | undefined; }; const EMPTY_COMPONENTS: ThreadComponents = {}; const ThreadComponentsContext = createContext(EMPTY_COMPONENTS); // Startup exposes a loading placeholder thread; treat it as a new chat so // the composer mounts centered. Loads after startup keep the docked layout. const isNewChatView = (s: AssistantState) => s.thread.messages.length === 0 && (!s.thread.isLoading || s.threads.isLoading); // A switched thread that is still fetching its history: skeleton, not welcome. const isHistoryLoadingView = (s: AssistantState) => s.thread.messages.length === 0 && s.thread.isLoading && !s.thread.isDisabled && !s.threads.isLoading; const ThreadHistorySkeleton: FC = () => (

Loading conversation

); export const Thread: FC = ({ components = EMPTY_COMPONENTS, autoFocus = true, }) => { const isEmpty = useAuiState(isNewChatView); return ( ); }; const ThreadRoot: FC<{ isEmpty: boolean; autoFocus: boolean }> = ({ isEmpty, autoFocus, }) => { const { Welcome = ThreadWelcome } = useContext(ThreadComponentsContext); return (

{() => }

isNewChatView(s) && s.composer.isEmpty}>

); }; const ThreadMessage: FC = () => { 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 ; if (isSpoken) return ; if (role === "user") return ; return ; }; type VoiceRunPosition = "single" | "start" | "middle" | "end"; const useVoiceRunPosition = (): VoiceRunPosition => 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: TextMessagePartComponent = ({ text }) => (

{text}

); const SpokenMessage: FC = () => { 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 ( {opensExchange && (

Voice conversation

)}

{role === "user" ? ( ) : ( )} {role === "user" ? "You said" : "Assistant said"}

{isSpeaking && ( ● )}

); }; const SpokenActionBar: FC = () => { return ( s.message.isCopied}> !s.message.isCopied}> ); }; const FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1']):not([disabled])"; const nextFocusable = (start: Element) => { for ( let element = start.nextElementSibling; element; element = element.nextElementSibling ) { const target = element.matches(FOCUSABLE_SELECTOR) ? element : element.querySelector(FOCUSABLE_SELECTOR); if (target instanceof HTMLElement) return target; } return null; }; const ThreadLoadEarlier: FC = () => { const visible = useAuiState( (s) => s.thread.hasEarlier || s.thread.isLoadingEarlier, ); const loading = useAuiState((s) => s.thread.isLoadingEarlier); const slotRef = useRef(null); const focusedRef = useRef(null); // The last page removes the button; a keyboard user on it continues from the // next control in tab order rather than from the document body. useLayoutEffect(() => { const focused = focusedRef.current; const slot = slotRef.current; if (visible || !focused || focused.isConnected || !slot) return; focusedRef.current = null; const active = document.activeElement; if (active && active !== document.body) return; nextFocusable(slot)?.focus(); }, [visible]); return (

{ focusedRef.current = event.target; }} > {loading ? "Loading earlier messages" : ""} {visible && ( )}

); }; const ThreadScrollToBottom: FC = () => { return ( ); }; const ThreadWelcome: FC = () => { return (

How can I help you today?

); }; const ThreadSuggestions: FC = () => { return (

{() => }

); }; const ThreadSuggestionItem: FC = () => { return (

); }; const Composer: FC<{ autoFocus: boolean }> = ({ autoFocus }) => { return (

); }; const ComposerAction: FC = () => { // The stop control only cancels the send while no run it could stop is going. const isSending = useAuiState( (s) => s.composer.submission !== undefined && !(s.thread.isRunning && s.thread.capabilities.cancel), ); return (

s.thread.capabilities.dictation}> s.composer.dictation == null}> s.composer.dictation != null}> !s.composer.canCancel || (s.thread.voice !== undefined && s.composer.submission === undefined) } > s.composer.canCancel && (s.thread.voice === undefined || s.composer.submission !== undefined) } >

); }; const MessageError: FC = () => { return ( ); }; const AssistantMessage: FC = () => { const { ToolFallback: ToolFallbackComponent = ToolFallback, ToolGroup, ReasoningGroup, TaskGroup: TaskGroupComponent, } = useContext(ThreadComponentsContext); const groupBy = TaskGroupComponent ? taskAwareGroupBy : messageGroupBy; const ACTION_BAR_PT = "pt-1.5"; // Keep the action bar inside the contained root's paint box, then cancel its reserved space in flow. const ACTION_BAR_HEIGHT = `min-h-7.5 ${ACTION_BAR_PT}`; return (

{({ part, children }) => { switch (part.type) { case "group-chainOfThought": return

{children}

; case "group-task": return TaskGroupComponent ? ( ) : null; case "group-tool": if (ToolGroup) { return {children}; } return ( {children} ); case "group-reasoning": { if (ReasoningGroup) { return ( {children} ); } const running = part.status.type === "running"; return ( {children} ); } case "text": return ; case "reasoning": return ; case "tool-call": return part.toolUI ?? ; case "data": return part.dataRendererUI; case "file": return (

); case "image": return (

); case "indicator": return ( {"●"} ); default: return null; } }}

); }; const AssistantActionBar: FC = () => { return ( s.message.isCopied}> !s.message.isCopied}> s.thread.capabilities.feedback}> Export as Markdown ); }; const MessageFile: FileMessagePartComponent = (part) => { const image = part.mimeType.toLowerCase().startsWith("image/") ? getFileHref(part.data, part.mimeType, part.sourceType) : null; if (!image) return ; return ( ); }; const UserFilePart: FileMessagePartComponent = (part) => (

); const UserImagePart: ImageMessagePartComponent = (part) => (

); const UserMessage: FC = () => { return (

); }; const UserActionBar: FC = () => { return ( ); }; const EditComposer: FC = () => { return (

); }; const BranchPicker: FC = ({ className, ...rest }) => { return ( / ); }; 5c:T268c,"use client"; import { type PropsWithChildren, useState, type FC, isValidElement, } from "react"; import { XIcon, PlusIcon, FileText, Loader2Icon, AlertCircleIcon, } from "lucide-react"; import { AttachmentPrimitive, ComposerPrimitive, MessagePrimitive, useAuiState, useAui, } from "@assistant-ui/react"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { Dialog, DialogTitle, DialogContent, DialogTrigger, } from "@/components/ui/dialog"; import { Avatar, AvatarImage, AvatarFallback, } from "@/components/ui/avatar"; import { TooltipIconButton } from "@/components/assistant-ui/elements/tooltip-icon-button"; import { useAttachmentSrc } from "@/hooks/use-attachment-src"; import { cn } from "@/lib/utils"; type AttachmentPreviewProps = { src: string; name: string; }; const AttachmentPreview: FC = ({ src, name }) => { const [isLoaded, setIsLoaded] = useState(false); return ( {`Preview

setIsLoaded(true)} /> ); }; type AttachmentPreviewDialogProps = PropsWithChildren<{ src: string | undefined; name: string; }>; const AttachmentPreviewDialog: FC = ({ children, src, name, }) => { if (!src) return children; return ( ); }; const AttachmentThumb: FC<{ src: string | undefined }> = ({ src }) => { return ( ); }; const AttachmentUI: FC = () => { const aui = useAui(); const isComposer = aui.attachment.source !== "message"; const src = useAttachmentSrc(); const isImage = useAuiState((s) => s.attachment.type === "image"); const name = useAuiState((s) => s.attachment.name); const typeLabel = useAuiState((s) => { const type = s.attachment.type; switch (type) { case "image": return "Image"; case "document": return "Document"; case "file": return "File"; default: return type; } }); // An attachment on a submission is still being prepared, whether or not the // adapter reports progress while it uploads. const uploadState = useAuiState((s) => s.attachment.status.type === "incomplete" && s.attachment.status.reason === "error" ? "error" : s.attachment.status.type === "running" || (s.optional.message?.submission !== undefined && s.attachment.status.type !== "complete") ? "uploading" : undefined, ); const isUploading = uploadState === "uploading"; const isError = uploadState === "error"; const errorMessage = useAuiState((s) => s.attachment.status.type === "incomplete" && s.attachment.status.reason === "error" ? (s.attachment.status.message ?? "Upload failed") : undefined, ); return (

{ if (e.key === "Enter") { e.preventDefault(); e.currentTarget.click(); } else if (e.key === " ") { e.preventDefault(); } } : undefined } onKeyUp={ src ? (e) => { if (e.key === " ") e.currentTarget.click(); } : undefined } aria-label={`${src ? `Preview ${name}` : `${typeLabel} attachment ${name}`}${ isError ? ", upload failed" : isUploading ? ", uploading" : "" }`} > {isUploading && ( )} {isError && ( )}

{isComposer && } {errorMessage && (

{errorMessage}

)} ); }; const AttachmentRemove: FC<{ name: string }> = ({ name }) => { return ( ); }; export const UserMessageAttachments: FC = () => { return (

{() => }

); }; export const ComposerAttachments: FC = () => { return (

{() => }

); }; export const ComposerAddAttachment: FC = () => { return ( ); }; 5d:T519,"use client"; import { type ComponentPropsWithRef, forwardRef } from "react"; import { Slot } from "radix-ui"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export type TooltipIconButtonProps = ComponentPropsWithRef & { tooltip: string; side?: "top" | "bottom" | "left" | "right"; }; export const TooltipIconButton = forwardRef< HTMLButtonElement, TooltipIconButtonProps >(({ children, tooltip, side = "bottom", className, ...rest }, ref) => { return ( {tooltip} ); }); TooltipIconButton.displayName = "TooltipIconButton"; 5e:T54b,"use client"; import { useEffect, useState } from "react"; import { useAuiState } from "@assistant-ui/react"; import { useShallow } from "zustand/react/shallow"; const useFileSrc = (file: File | undefined) => { const [entry, setEntry] = useState<{ file: File; url: string } | undefined>( undefined, ); useEffect(() => { // The object URL is a browser resource whose lifetime has to straddle // commit, so allocation, revocation, and clearing the entry that names a // revoked URL all belong to the effect. if (!file) { // eslint-disable-next-line react-hooks/set-state-in-effect setEntry(undefined); return; } const objectUrl = URL.createObjectURL(file); setEntry({ file, url: objectUrl }); return () => { URL.revokeObjectURL(objectUrl); }; }, [file]); return entry !== undefined && entry.file === file ? entry.url : undefined; }; export const useAttachmentSrc = () => { const { file, src } = useAuiState( useShallow((s): { file?: File; src?: string } => { if (s.attachment.type !== "image") return {}; if (s.attachment.file) return { file: s.attachment.file }; const src = s.attachment.content?.filter((c) => c.type === "image")[0] ?.image; if (!src) return {}; return { src }; }), ); return useFileSrc(file) ?? src; }; 5f:T28ce,"use client"; import { memo, type FC } from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { FileIcon, FileTextIcon, ImageIcon, MusicIcon, VideoIcon, BracesIcon, DownloadIcon, } from "lucide-react"; import type { FileMessagePartComponent } from "@assistant-ui/react"; import { cn } from "@/lib/utils"; import { AudioPlayer, VideoPlayer } from "./media-player"; const fileVariants = cva( "aui-file-root inline-flex items-center gap-3 rounded-lg transition-colors", { variants: { variant: { outline: "border-border hover:bg-muted/50 border", ghost: "hover:bg-muted/50", muted: "bg-muted/50 hover:bg-muted/70", }, size: { sm: "px-2.5 py-1.5 text-xs", default: "px-3 py-2 text-sm", lg: "px-4 py-3 text-base", }, }, defaultVariants: { variant: "outline", size: "default", }, }, ); function getMimeTypeIcon(mimeType: string): FC<{ className?: string }> { const type = mimeType.toLowerCase(); if (type.startsWith("image/")) { return ImageIcon; } if (type === "application/pdf") { return FileTextIcon; } if (type === "application/json") { return BracesIcon; } if (type.startsWith("text/")) { return FileTextIcon; } if (type.startsWith("audio/")) { return MusicIcon; } if (type.startsWith("video/")) { return VideoIcon; } return FileIcon; } export type FileDataKind = "data-uri" | "url" | "base64" | "id"; function getFileDataKind( data: string, sourceType?: "url" | "id", ): FileDataKind { if (sourceType === "url" && /^data:/i.test(data)) return "data-uri"; if (sourceType) return sourceType; if (/^data:/i.test(data)) return "data-uri"; if (/^(https?:\/\/|blob:)/i.test(data)) return "url"; return "base64"; } function isUnsafeScheme(data: string): boolean { return ( /^[a-z][a-z\d+.-]*:/i.test(data) && !/^(data:|https?:\/\/|blob:)/i.test(data) ); } function getFileHref( data: string, mimeType: string, sourceType?: "url" | "id", ): string | null { if (isUnsafeScheme(data)) return null; const kind = getFileDataKind(data, sourceType); if (kind === "id") return null; if (kind === "data-uri") return /^data:[^,]*,/i.test(data) ? data : null; if (kind === "url") return /^(https?:\/\/|blob:)/i.test(data) ? data : null; return `data:${mimeType};base64,${data}`; } function getBase64PayloadSize(payload: string): number { const padding = payload.endsWith("==") ? 2 : payload.endsWith("=") ? 1 : 0; const firstNonBase64 = payload.search(/[^A-Za-z\d+/]/); if ( (firstNonBase64 !== -1 && firstNonBase64 !== payload.length - padding) || payload.length % 4 === 1 || (padding > 0 && payload.length % 4 !== 0) ) { return 0; } return Math.floor((payload.length * 3) / 4) - padding; } function getBase64Size(base64: string): number { const payload = /[\t\n\f\r ]/.test(base64) ? base64.replace(/[\t\n\f\r ]/g, "") : base64; return getBase64PayloadSize(payload); } function getDataUrlSize(data: string): number { const fragment = data.indexOf("#"); const end = fragment < 0 ? data.length : fragment; const comma = data.indexOf(","); if (comma < 0 || comma >= end) { return 0; } let payload = data.slice(comma + 1, end); if (/;base64$/i.test(data.slice(0, comma))) { if (/[%\t\n\f\r ]/.test(payload)) { payload = payload .replace(/%([\da-f]{2})/gi, (_match, hex: string) => String.fromCharCode(Number.parseInt(hex, 16)), ) .replace(/[\t\n\f\r ]/g, ""); } return getBase64PayloadSize(payload); } // Each percent escape is one byte, including octets that are not valid UTF-8. return new TextEncoder().encode(payload.replace(/%[\da-f]{2}/gi, "_")) .byteLength; } function getFileLabel(mimeType: string): string { const subtype = /^[^/;]+\/(?:x-)?(?:[^;+]*\.)?([^;+.\s]+)/.exec( mimeType.toLowerCase(), )?.[1]; if (!subtype || subtype === "octet-stream") return "File"; if (subtype === "plain") return "Text file"; return `${subtype.toUpperCase()} file`; } function formatFileSize(bytes: number): string { if (bytes < 1024) { return `${bytes} B`; } if (bytes < 1024 * 1024) { return `${(bytes / 1024).toFixed(1)} KB`; } return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; } export type FileRootProps = React.ComponentProps<"div"> & VariantProps; function FileRoot({ className, variant, size, children, ...props }: FileRootProps) { return (

{children}

); } type FileIconDisplayProps = React.ComponentProps<"span"> & { mimeType?: string; }; function FileIconDisplay({ mimeType, className, children, ...props }: FileIconDisplayProps) { const IconComponent = mimeType ? getMimeTypeIcon(mimeType) : FileIcon; return ( {/* eslint-disable-next-line react-hooks/static-components -- The helper only selects module-level icon components. */} {children ?? } ); } function FileName({ className, children, ...props }: React.ComponentProps<"span">) { return ( {children || "Unnamed file"} ); } type FileSizeProps = React.ComponentProps<"span"> & { bytes: number; }; function FileSize({ bytes, className, ...props }: FileSizeProps) { return ( {formatFileSize(bytes)} ); } type FileDownloadProps = Omit, "href"> & { data: string; mimeType: string; filename?: string; sourceType?: "url" | "id"; }; function FileDownload({ data, mimeType, filename, sourceType, className, children, ...props }: FileDownloadProps) { if (typeof data !== "string") return null; const kind = getFileDataKind(data, sourceType); const href = getFileHref(data, mimeType, sourceType); if (!href) return null; return ( {children || } ); } export interface FilePlayerProps extends Omit< React.ComponentProps<"div">, "children" > { data: string; mimeType: string; filename?: string | undefined; sourceType?: "url" | "id" | undefined; } function FilePlayer({ data, mimeType, filename, sourceType, className, ...props }: FilePlayerProps) { const src = getFileHref(data, mimeType, sourceType); const normalizedMimeType = mimeType.toLowerCase(); if ( !src || (!normalizedMimeType.startsWith("audio/") && !normalizedMimeType.startsWith("video/")) ) { return null; } return (

{normalizedMimeType.startsWith("audio/") ? ( ) : ( )}

); } const FileImpl: FileMessagePartComponent = ({ filename, data, mimeType, sourceType, }) => { const kind = getFileDataKind(data, sourceType); const showSize = typeof data === "string" && (kind === "base64" || kind === "data-uri"); const mediaSource = getFileHref(data, mimeType, sourceType); const isMedia = mimeType.toLowerCase().startsWith("audio/") || mimeType.toLowerCase().startsWith("video/"); if (mediaSource && isMedia) { return (

{showSize && ( )}

); } return (

{filename || getFileLabel(mimeType)} {showSize && ( )}

); }; const File = memo(FileImpl) as unknown as FileMessagePartComponent & { Root: typeof FileRoot; Icon: typeof FileIconDisplay; Name: typeof FileName; Size: typeof FileSize; Download: typeof FileDownload; Player: typeof FilePlayer; }; File.displayName = "File"; File.Root = FileRoot; File.Icon = FileIconDisplay; File.Name = FileName; File.Size = FileSize; File.Download = FileDownload; File.Player = FilePlayer; export { File, FileRoot, FileIconDisplay, FileName, FileSize, FileDownload, FilePlayer, fileVariants, getMimeTypeIcon, getFileDataKind, getFileHref, getBase64Size, formatFileSize, }; 60:T1fe1,"use client"; import { useEffect, useRef, useState, type ComponentProps, type RefObject, } from "react"; import { PauseIcon, PlayIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { field, inkButton, mono, paper } from "./surfaces"; export interface AudioPlayerProps extends Omit< ComponentProps<"div">, "children" > { src: string; title?: string | undefined; artwork?: string | undefined; durationMs?: number | undefined; } export interface VideoPlayerProps extends Omit< ComponentProps<"div">, "children" > { src: string; poster?: string | undefined; title?: string | undefined; ratio?: "16:9" | "4:3" | "1:1" | "9:16" | "auto" | undefined; durationMs?: number | undefined; } function formatDuration(seconds: number): string { const wholeSeconds = Math.max(0, Math.floor(seconds)); const minutes = Math.floor(wholeSeconds / 60); const remainingSeconds = wholeSeconds % 60; return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`; } function useMediaDuration( mediaRef: RefObject, src: string, durationMs?: number | undefined, ) { const [metadata, setMetadata] = useState<{ src: string; duration?: number }>({ src, }); // A server-rendered media element can load metadata before hydration attaches onLoadedMetadata. useEffect(() => { const media = mediaRef.current; if (!media || media.readyState < HTMLMediaElement.HAVE_METADATA) return; if (Number.isFinite(media.duration) && media.duration >= 0) { setMetadata({ src, duration: media.duration }); } }, [mediaRef, src]); const fallbackDuration = durationMs !== undefined && Number.isFinite(durationMs) ? Math.max(0, durationMs / 1000) : undefined; return { duration: metadata.src === src ? (metadata.duration ?? fallbackDuration) : fallbackDuration, setDurationFromMetadata: (duration: number) => { if (Number.isFinite(duration) && duration >= 0) { setMetadata({ src, duration }); } }, }; } export function AudioPlayer({ src, title, artwork, durationMs, className, ...props }: AudioPlayerProps) { const audioRef = useRef(null); const [playback, setPlayback] = useState({ src, currentTime: 0, playing: false, hasError: false, }); const { duration, setDurationFromMetadata } = useMediaDuration( audioRef, src, durationMs, ); const playbackState = playback.src === src ? playback : { src, currentTime: 0, playing: false, hasError: false }; const { currentTime, playing, hasError } = playbackState; const update = (patch: Partial>) => setPlayback((current) => ({ ...(current.src === src ? current : { src, currentTime: 0, playing: false, hasError: false }), ...patch, })); const displayTitle = title ?? "Audio"; const playbackLabel = title ? ` ${title}` : " audio"; const durationLabel = duration === undefined ? "--:--" : formatDuration(duration); useEffect(() => { if (audioRef.current?.error) { setPlayback({ src, currentTime: 0, playing: false, hasError: true }); } }, [src]); const togglePlayback = () => { const audio = audioRef.current; if (!audio || hasError) return; if (playing) { audio.pause(); update({ playing: false }); return; } void audio.play().then( () => update({ playing: true }), () => update( audio.error ? { hasError: true, playing: false } : { playing: false }, ), ); }; return (

{artwork ? (

) : null}

{displayTitle} { const nextTime = Number(event.currentTarget.value); if (!Number.isFinite(nextTime)) return; const resolvedTime = Math.min(nextTime, duration ?? nextTime); if (audioRef.current) audioRef.current.currentTime = resolvedTime; update({ currentTime: resolvedTime }); }} className="accent-foreground w-full cursor-pointer disabled:cursor-default" />

{formatDuration(currentTime)} / {durationLabel}

); } export function VideoPlayer({ src, poster, title, ratio = "16:9", durationMs, className, ...props }: VideoPlayerProps) { const videoRef = useRef(null); const { duration, setDurationFromMetadata } = useMediaDuration( videoRef, src, durationMs, ); const ratioClassName = ratio === "1:1" ? "aspect-square" : ratio === "4:3" ? "aspect-[4/3]" : ratio === "16:9" ? "aspect-video" : ratio === "9:16" ? "aspect-[9/16]" : undefined; return (

{(title || duration !== undefined) && (

{title ? ( {title} ) : null} {duration !== undefined ? ( {formatDuration(duration)} ) : null}

)}

); } 61:T116e,"use client"; import type { ComponentProps } from "react"; import { useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { useIsomorphicLayoutEffect } from "../utils/useIsomorphicLayoutEffect"; export const paper = "bg-background border border-border/60 dark:bg-popover"; export const floating = "bg-background border border-border/60 dark:bg-popover"; export const field = "bg-foreground/[0.04] forced-colors:border dark:bg-foreground/[0.06]"; export const fieldInteractive = "bg-foreground/[0.04] transition-colors hover:bg-foreground/[0.07] forced-colors:border dark:bg-foreground/[0.06] dark:hover:bg-foreground/[0.09]"; export const pressable = "transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.96] motion-reduce:transition-none"; export const ghostButton = "flex items-center justify-center rounded-full text-muted-foreground outline-hidden transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]"; export const inkButton = "bg-foreground text-background transition-[opacity,scale] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:opacity-90 active:scale-[0.96] motion-reduce:transition-none forced-colors:border"; export const iconSwap = "[grid-area:1/1] transition-[opacity,scale,filter] duration-200 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none"; export const iconSwapIn = "scale-100 opacity-100 blur-none"; export const iconSwapOut = "scale-[0.25] opacity-0 blur-[4px]"; export const labelSwap = "col-start-1 row-start-1 flex w-max items-center gap-1.5 leading-none transition-[opacity,filter] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none"; export const labelSwapIn = "opacity-100 blur-none"; export const labelSwapOut = "pointer-events-none select-none opacity-0 blur-[2px]"; export const collapsePanel = "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none"; export const live = "text-blue-500 dark:text-blue-400"; export const mono = "font-mono text-[11px] tracking-tight"; export function ShimmerLabel({ active = true, className, ...props }: ComponentProps<"span"> & { active?: boolean }) { return ( ); } /** * Scroll region for content that keeps its own whitespace. `whitespace-pre` in * a bounded box clips a long line with no way to reach it, so the rows scroll * instead. * * `codeSurface` wraps all the rows as one block, and the rows are its children. * It cannot go on each row: `min-width: 100%` resolves against the scroll * container's visible width rather than its scroll width, so a per-row width * leaves every row except the longest ending its background at the fold. */ export const codeScroll = "overflow-x-auto"; export const codeSurface = "w-max min-w-full"; export function SwapLabel({ active, children, className, }: { active: 0 | 1; children: [React.ReactNode, React.ReactNode]; className?: string; }) { const layers = [useRef(null), useRef(null)]; const [width, setWidth] = useState(null); useIsomorphicLayoutEffect(() => { const target = layers[active]?.current; if (!target) return undefined; const measure = () => setWidth(Math.ceil(target.getBoundingClientRect().width)); measure(); const observer = new ResizeObserver(measure); observer.observe(target); return () => observer.disconnect(); }, [active]); return ( {children.map((layer, index) => ( {layer} ))} ); } 62:Tc5b,"use client"; import { AuiIf, useAuiState, ThreadPrimitive } from "@assistant-ui/react"; import { useCallback, useEffect, useRef, useState, type FC } from "react"; const FollowupSuggestionsRow: FC = () => { const suggestions = useAuiState((s) => s.thread.suggestions); const scrollRef = useRef(null); const rtlRef = useRef(null); const [fades, setFades] = useState({ left: false, right: false }); const updateFades = useCallback(() => { const el = scrollRef.current; if (!el) return; const maxScroll = el.scrollWidth - el.clientWidth; // scrollLeft runs 0..-max in RTL; normalize to hidden width per physical edge. const fromStart = Math.abs(el.scrollLeft); // getComputedStyle forces a style recalc per scroll event; direction is stable, read it once. const rtl = (rtlRef.current ??= getComputedStyle(el).direction === "rtl"); const [left, right] = rtl ? [maxScroll - fromStart, fromStart] : [fromStart, maxScroll - fromStart]; setFades((prev) => { const next = { left: left > 1, right: right > 1 }; return prev.left === next.left && prev.right === next.right ? prev : next; }); }, []); useEffect(() => { updateFades(); const el = scrollRef.current; if (!el?.firstElementChild) return undefined; const observer = new ResizeObserver(updateFades); observer.observe(el); observer.observe(el.firstElementChild); return () => observer.disconnect(); }, [updateFades]); const maskImage = `linear-gradient(to right, ${ fades.left ? "transparent, black 2rem" : "black" }, ${fades.right ? "black calc(100% - 2rem), transparent" : "black"})`; return (

{suggestions.map((suggestion, idx) => ( {suggestion.title ?? suggestion.prompt} {suggestion.label && ( {suggestion.label} )} ))}

); }; export const ThreadFollowupSuggestions: FC = () => ( !s.thread.isEmpty && !s.thread.isRunning && s.thread.suggestions.length > 0 } > ); 63:T47e5,"use client"; import { memo, useState, useEffect, useCallback, useRef, type PropsWithChildren, } from "react"; import { createPortal } from "react-dom"; import { cva, type VariantProps } from "class-variance-authority"; import { CopyIcon, DownloadIcon, ImageIcon, ImageOffIcon, Loader2Icon, RefreshCwIcon, ShieldAlertIcon, XIcon, } from "lucide-react"; import type { ImageMessagePart, ImageMessagePartComponent, } from "@assistant-ui/react"; import { cn } from "@/lib/utils"; import { hostOf, safeHref } from "../utils/href"; const extensionForMimeType = (mimeType?: string): string => { switch (mimeType) { case "image/png": return "png"; case "image/jpeg": case "image/jpg": return "jpg"; case "image/webp": return "webp"; case "image/gif": return "gif"; case "image/svg+xml": return "svg"; default: return "png"; } }; const dataUriToBlob = (dataUri: string): Blob | null => { const commaIndex = dataUri.indexOf(","); const meta = commaIndex >= 0 ? dataUri.slice(0, commaIndex) : dataUri; const data = commaIndex >= 0 ? dataUri.slice(commaIndex + 1) : ""; const mime = meta.match(/data:([^;]+)/i)?.[1]?.toLowerCase() ?? "application/octet-stream"; if (!/;base64/i.test(meta)) { const parts: BlobPart[] = []; let last = 0; for (const match of data.matchAll(/(?:%[\da-f]{2})+/gi)) { if (match.index > last) parts.push(data.slice(last, match.index)); const run = match[0]; const escaped = new Uint8Array(run.length / 3); for (let index = 0; index < escaped.length; index++) { escaped[index] = Number.parseInt( run.slice(index * 3 + 1, index * 3 + 3), 16, ); } parts.push(escaped); last = match.index + run.length; } parts.push(data.slice(last)); return new Blob(parts, { type: mime }); } let bytes: string; try { const base64 = data.replace(/%([\da-f]{2})/gi, (_match, hex: string) => String.fromCharCode(Number.parseInt(hex, 16)), ); bytes = atob(base64); } catch { return null; } const arr = new Uint8Array(bytes.length); for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i); return new Blob([arr], { type: mime }); }; const mimeFromImage = (image: string): string | undefined => image.match(/^data:([^;,]+)/i)?.[1]?.toLowerCase(); const defaultFilenameFromImage = (image: string): string => { const mime = mimeFromImage(image); if (mime) return `image.${extensionForMimeType(mime)}`; try { const path = new URL(image, document.baseURI).pathname; const encodedBasename = path.split("/").pop() ?? ""; let basename = encodedBasename; try { basename = decodeURIComponent(encodedBasename); } catch {} if (/\.(png|jpe?g|webp|gif|svg)$/i.test(basename)) return basename; } catch {} return "image.png"; }; const safeImageDownloadHref = (image: string): string | null => { try { const url = new URL(image, document.baseURI); return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "blob:" ? image : null; } catch { return null; } }; const downloadImagePart = ( part: Pick, ): void => { if (typeof document === "undefined") return; const filename = part.filename ?? defaultFilenameFromImage(part.image); const isDataUri = /^data:/i.test(part.image); const blob = isDataUri ? dataUriToBlob(part.image) : null; if (isDataUri && !blob) return; const objectUrl = blob ? URL.createObjectURL(blob) : null; const href = objectUrl ?? safeImageDownloadHref(part.image); if (!href) return; const a = document.createElement("a"); a.href = href; a.download = filename; a.rel = "noopener"; document.body.appendChild(a); a.click(); document.body.removeChild(a); if (objectUrl) setTimeout(() => URL.revokeObjectURL(objectUrl), 40_000); }; const copyImagePart = async ( part: Pick, ): Promise => { if ( typeof navigator === "undefined" || !navigator.clipboard || typeof ClipboardItem === "undefined" ) { throw new Error("Clipboard API is not available in this environment."); } const blob = /^data:/i.test(part.image) ? dataUriToBlob(part.image) : await fetch(part.image).then((r) => r.blob()); if (!blob) return; const mime = mimeFromImage(part.image) ?? blob.type ?? "image/png"; await navigator.clipboard.write([new ClipboardItem({ [mime]: blob })]); }; const imageVariants = cva( "aui-image-root relative overflow-hidden rounded-lg", { variants: { variant: { outline: "border-border border", ghost: "", muted: "bg-muted/50", }, size: { sm: "max-w-64", default: "max-w-96", lg: "max-w-[512px]", full: "w-full", }, }, defaultVariants: { variant: "outline", size: "default", }, }, ); export type ImageRootProps = React.ComponentProps<"div"> & VariantProps; function ImageRoot({ className, variant, size, children, ...props }: ImageRootProps) { return (

{children}

); } type ImagePreviewProps = Omit, "children"> & { containerClassName?: string | undefined; ratio?: "auto" | "1:1" | "4:3" | "16:9" | "9:16" | undefined; fit?: "cover" | "contain" | undefined; }; function ImagePreview({ className, containerClassName, ratio = "auto", fit = "contain", onLoad, onError, alt = "Image content", src, ...props }: ImagePreviewProps) { const imgRef = useRef(null); const [loadedSrc, setLoadedSrc] = useState(undefined); const [errorSrc, setErrorSrc] = useState(undefined); const loaded = loadedSrc === src; const error = errorSrc === src; const fixedRatio = ratio !== "auto"; const ratioClassName = ratio === "1:1" ? "aspect-square" : ratio === "4:3" ? "aspect-[4/3]" : ratio === "16:9" ? "aspect-video" : ratio === "9:16" ? "aspect-[9/16]" : undefined; useEffect(() => { const image = imgRef.current; if (typeof src !== "string" || !image?.complete) return; if (image.naturalWidth > 0) setLoadedSrc(src); else setErrorSrc(src); }, [src]); return (

{!loaded && !error && (

)} {error ? (

) : (

{ if (typeof src === "string") setLoadedSrc(src); onLoad?.(e); }} onError={(e) => { if (typeof src === "string") setErrorSrc(src); onError?.(e); }} {...props} /> )}

); } export type ImageSourceProps = { label?: string | undefined; url?: string | undefined; iconUrl?: string | undefined; } & React.ComponentProps<"div">; function ImageSource({ className, label, url, iconUrl, ...props }: ImageSourceProps) { const href = safeHref(url); const host = hostOf(url); const displayLabel = label || host; const [failedIconUrl, setFailedIconUrl] = useState(); if (!displayLabel) return null; const showIcon = iconUrl !== undefined && failedIconUrl !== iconUrl; return (

{showIcon ? (

setFailedIconUrl(iconUrl)} /> ) : ( )} {href ? ( {displayLabel} (opens in a new tab) ) : ( {displayLabel} )}

); } function ImageFilename({ className, children, ...props }: React.ComponentProps<"span">) { if (!children) return null; return ( {children} ); } type ImageZoomProps = PropsWithChildren<{ src: string; alt?: string; }>; function ImageZoom({ src, alt = "Image preview", children }: ImageZoomProps) { const [isOpen, setIsOpen] = useState(false); const triggerRef = useRef(null); const closeRef = useRef(null); const overlayRef = useRef(null); const handleOpen = useCallback(() => setIsOpen(true), []); const handleClose = useCallback(() => { setIsOpen(false); triggerRef.current?.focus(); }, []); useEffect(() => { if (!isOpen) return; const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape") { handleClose(); return; } if (e.key !== "Tab") return; const focusables = overlayRef.current?.querySelectorAll( 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])', ); const first = focusables?.[0]; const last = focusables?.[focusables.length - 1]; if (!first || !last) return; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }; document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); }, [isOpen, handleClose]); useEffect(() => { if (!isOpen) return; const originalOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = originalOverflow; }; }, [isOpen]); useEffect(() => { if (isOpen) closeRef.current?.focus(); }, [isOpen]); return ( <>

{ if (e.key === "Enter") { e.preventDefault(); e.currentTarget.click(); } else if (e.key === " ") { e.preventDefault(); } }} onKeyUp={(e) => { if (e.key === " ") e.currentTarget.click(); }} role="button" tabIndex={0} className="aui-image-zoom-trigger cursor-zoom-in" aria-label="Click to zoom image" > {children}

{isOpen && createPortal( , document.body, )} ); } function ImageGenerating({ className }: { className?: string }) { return (

Generating image…

); } function ImageContentFilterError({ className, reason, }: { className?: string; reason?: string; }) { return (

Image could not be generated

{reason &&

{reason}

}

); } export type ImageActionsProps = { part: ImageMessagePart; /** * Wire to your own generation call to show a regenerate button. The button * renders only when this is set and the part carries a `prompt`. */ onRegenerate?: () => void | Promise; className?: string; }; function RegenerateButton({ onRegenerate, }: { onRegenerate: () => void | Promise; }) { const [isRegenerating, setIsRegenerating] = useState(false); return ( ); } function ImageActions({ part, onRegenerate, className }: ImageActionsProps) { return (

{onRegenerate && }

); } const ImageImpl: ImageMessagePartComponent = (props) => { const { image, filename, status } = props; if (status?.type === "running") { return ( {filename} ); } if (status?.type === "incomplete" && status.reason === "content-filter") { return ( ); } return ( {filename} ); }; const Image = memo(ImageImpl) as unknown as ImageMessagePartComponent & { Root: typeof ImageRoot; Preview: typeof ImagePreview; Source: typeof ImageSource; Filename: typeof ImageFilename; Zoom: typeof ImageZoom; Actions: typeof ImageActions; Generating: typeof ImageGenerating; ContentFilterError: typeof ImageContentFilterError; }; Image.displayName = "Image"; Image.Root = ImageRoot; Image.Preview = ImagePreview; Image.Source = ImageSource; Image.Filename = ImageFilename; Image.Zoom = ImageZoom; Image.Actions = ImageActions; Image.Generating = ImageGenerating; Image.ContentFilterError = ImageContentFilterError; export { Image, ImageRoot, ImagePreview, ImageSource, ImageFilename, ImageZoom, ImageActions, ImageGenerating, ImageContentFilterError, imageVariants, }; 64:T576,/** * Link targets the elements take from a model or a tool. * * React 19 refuses a `javascript:` href but React 18 only warns, and neither * blocks `data:` or `vbscript:`, so an element passes a caller's URL through * here before it becomes an `href` or a navigation target. */ const RELATIVE = /^(?:[/?#]|\.{1,2}\/)/; const ALLOWED_PROTOCOLS = new Set(["http:", "https:", "mailto:"]); const parse = (url: string) => { try { return new URL(url); } catch { return undefined; } }; /** * `url` when a browser following it runs no script: an `http:`, `https:`, or * `mailto:` URL, or one relative to the page. Anything else, including a * string that is not a URL at all, is `undefined`. */ export function safeHref(url: string | undefined): string | undefined { if (typeof url !== "string") return undefined; const trimmed = url.trim(); if (trimmed === "") return undefined; const parsed = parse(trimmed); if (parsed) { return ALLOWED_PROTOCOLS.has(parsed.protocol) ? trimmed : undefined; } return RELATIVE.test(trimmed) ? trimmed : undefined; } /** The host `url` points at, without a leading `www.`, or `undefined`. */ export function hostOf(url: string | undefined): string | undefined { const href = safeHref(url); const hostname = href === undefined ? "" : (parse(href)?.hostname ?? ""); return hostname.replace(/^www\./, "") || undefined; } 65:T1d82,"use client"; import "@assistant-ui/react-markdown/styles/dot.css"; import { type CodeHeaderProps, MarkdownTextPrimitive, type MarkdownTextPrimitiveProps, memoizeMarkdownComponents, useIsMarkdownCodeBlock, } from "@assistant-ui/react-markdown"; import remarkGfm from "remark-gfm"; import { type FC, memo, useMemo, useRef } from "react"; import type { TextMessagePartProps } from "@assistant-ui/react"; import { CheckIcon, CopyIcon } from "lucide-react"; import { TooltipIconButton } from "@/components/assistant-ui/elements/tooltip-icon-button"; import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"; import { cn } from "@/lib/utils"; type MarkdownTextProps = Partial & { components?: Parameters[0]; componentsByLanguage?: MarkdownTextPrimitiveProps["componentsByLanguage"]; }; const useShallowStable = | undefined>( value: T, ): T => { const ref = useRef(value); if (value !== ref.current) { const prev = ref.current; const stable = value !== undefined && prev !== undefined && Object.keys(prev).length === Object.keys(value).length && Object.keys(value).every((key) => prev[key] === value[key]); if (!stable) ref.current = value; } return ref.current; }; const MarkdownTextImpl: FC = ({ components, componentsByLanguage, }) => { const stableComponents = useShallowStable(components); const stableComponentsByLanguage = useShallowStable(componentsByLanguage); const markdownComponents = useMemo(() => { if (!stableComponents) return defaultComponents; return { ...defaultComponents, ...memoizeMarkdownComponents(stableComponents), }; }, [stableComponents]); return ( ); }; export const MarkdownText = memo(MarkdownTextImpl); const CodeHeader: FC = ({ language, code }) => { const { isCopied, copyToClipboard } = useCopyToClipboard(); const onCopy = () => { if (!code || isCopied) return; copyToClipboard(code); }; return (

{language} {!isCopied && ( )} {isCopied && ( )}

); }; const defaultComponents = memoizeMarkdownComponents({ h1: ({ className, ...props }) => (

), h2: ({ className, ...props }) => (

), h3: ({ className, ...props }) => (

), h4: ({ className, ...props }) => (

), h5: ({ className, ...props }) => (

), h6: ({ className, ...props }) => (

), p: ({ className, ...props }) => (

), a: ({ className, ...props }) => ( ), blockquote: ({ className, ...props }) => (

), ul: ({ className, ...props }) => (

), th: ({ className, ...props }) => ( td:first-child]:rounded-es-lg [&:last-child>td:last-child]:rounded-ee-lg", className, )} {...props} /> ), li: ({ className, ...props }) => (

), td: ({ className, ...props }) => (	), tr: ({ className, ...props }) => (