4f: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"] 50: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"] 51: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 ( / ); }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@assistant-ui/react@^0.15.29",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40assistant-ui%2Freact","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@^0.15.29"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@assistant-ui","registryDependencies":["button","skeleton","https://r.assistant-ui.com/attachment.json","https://r.assistant-ui.com/file.json","https://r.assistant-ui.com/follow-up-suggestions.json","https://r.assistant-ui.com/image.json","https://r.assistant-ui.com/markdown-text.json","https://r.assistant-ui.com/reasoning.json","https://r.assistant-ui.com/tooltip-icon-button.json","https://r.assistant-ui.com/tool-fallback.json","https://r.assistant-ui.com/tool-group.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/assistant-ui/elements/thread.aui.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]