4e: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"] 4f: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"] 50:T2dbc,import React, { memo, useMemo, type ReactNode, type Ref } from 'react'; import { Bot, Clock, X } from 'lucide-react'; import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'; import { Button } from '@/components/ui/button'; import { Inference, ChatMessageStatusReady, ChatMessageStatusFailed, ChatMessageStatusCancelled, ChatMessageStatusQueued, ChatMessageRoleUser, ChatMessageRoleAssistant, ChatMessageContentTypeReasoning, ChatMessageContentTypeText, type ChatMessageDTO, } from '@inferencesh/sdk'; import { AgentChatProvider, useAgentChat, useAgentActions, isAdHocConfig, type AgentOptions, } from '@inferencesh/sdk/agent'; import { ChatContainer } from '@/components/infsh/agent/chat-container'; import { VirtualizedChatMessages } from '@/components/infsh/agent/virtualized-chat-messages'; import { ChatInput, type ChatInputHandle } from '@/components/infsh/agent/chat-input'; import { MessageBubble } from '@/components/infsh/agent/message-bubble'; import { MessageContent } from '@/components/infsh/agent/message-content'; import { MessageReasoning } from '@/components/infsh/agent/message-reasoning'; import { MessageStatusIndicator } from '@/components/infsh/agent/message-status-indicator'; import { ToolInvocations } from '@/components/infsh/agent/tool-invocations'; // Component props interface AgentProps { proxyUrl?: string; apiKey?: string; baseUrl?: string; config: AgentOptions; name?: string; chatId?: string; className?: string; compact?: boolean; allowFiles?: boolean; allowImages?: boolean; onChatCreated?: (chatId: string) => void; description?: string; examplePrompts?: string[]; } // Check if message status is terminal (generation complete) function isTerminalStatus(status: string | undefined): boolean { return status === ChatMessageStatusReady || status === ChatMessageStatusFailed || status === ChatMessageStatusCancelled; } function getReasoningContent(message: ChatMessageDTO): string | undefined { const reasoningContent = message.content.find((c) => c.type === ChatMessageContentTypeReasoning); return reasoningContent?.text; } function hasTextContent(message: ChatMessageDTO): boolean { return message.content.some((c) => c.type === ChatMessageContentTypeText && c.text?.trim()); } // ============================================================================= // Internal Components // ============================================================================= const DefaultHeader = memo(function DefaultHeader() { return (

agent

); }); const ExamplePrompts = memo(function ExamplePrompts({ prompts, onSelect, }: { prompts: string[]; onSelect: (prompt: string) => void; }) { if (prompts.length === 0) return null; return (

{prompts.map((prompt, idx) => ( ))}

); }); const EmptyState = memo(function EmptyState({ description, examplePrompts = [], icon, title, }: { description?: string; examplePrompts?: string[]; /** Defaults to the bot glyph. Pass null for no icon. */ icon?: ReactNode; title?: string; }) { const { sendMessage } = useAgentActions(); return (

{icon === undefined ? : icon}

{title ?? 'how can I help?'}

{description || 'ask me anything'}

{examplePrompts.length > 0 && ( )}

); }); const MessageRow = memo(function MessageRow({ message }: { message: ChatMessageDTO }) { const isUser = message.role === ChatMessageRoleUser; const isAssistant = message.role === ChatMessageRoleAssistant; const reasoningContent = getReasoningContent(message); const isGenerating = !isTerminalStatus(message.status); const hasTools = message.tool_invocations && message.tool_invocations.length > 0; const hasContent = hasTextContent(message) || !!reasoningContent || !!hasTools; const { cancelMessage } = useAgentActions(); const isQueued = isUser && message.status === ChatMessageStatusQueued; if (message.role === 'tool') { return null; } // Empty terminal messages are invisible, but a generating assistant // message with no content yet still renders its status indicator. if (!hasContent && !(isAssistant && isGenerating)) { return null; } return ( cancelMessage(message.id) : undefined}> {isAssistant && reasoningContent && ( )} {(isUser || hasTextContent(message)) && } {isAssistant && } {isAssistant && isGenerating && } ); }); /** Render a single message — passed to VirtualizedChatMessages. */ function renderMessage(message: ChatMessageDTO) { return } const QueuedMessageStrip = memo(function QueuedMessageStrip() { const { messages } = useAgentChat(); const { cancelMessage } = useAgentActions(); const queued = useMemo( () => messages.filter(m => m.role === ChatMessageRoleUser && m.status === ChatMessageStatusQueued), [messages] ); if (queued.length === 0) return null; return (

{queued.map(msg => { const text = msg.content?.find(c => c.type === 'text')?.text || ''; return (

{text} {text}

); })}

); }); /** * The chat body: header, message list or empty state, and the input. * * Exported because it was not, and every panel that needed a chat surface * copied it instead — seven near-identical versions across the app, already * drifted on padding, prompt sizing and which message kinds render at all. * It depends only on provider context, so any caller inside its own * AgentChatProvider can use it directly. */ export const AgentContent = memo(function AgentContent({ /** * Sizing and padding are the caller's, not this component's. `h-full p-2` * used to be baked in here, so panels that wanted a different box passed * `h-auto p-0` to undo it — and that only worked because cn is twMerge. */ className, compact, allowFiles = true, allowImages = true, description, examplePrompts, header, emptyState, emptyIcon, emptyTitle, chatInputRef, }: { className?: string; compact?: boolean; allowFiles?: boolean; allowImages?: boolean; description?: string; examplePrompts?: string[]; /** Replaces the default header. Ignored when `compact` hides the header entirely. */ header?: ReactNode; /** Replaces the default empty state, for panels that need their own copy. */ emptyState?: ReactNode; /** Empty-state glyph. Defaults to the bot; pass null for none. */ emptyIcon?: ReactNode; /** Empty-state headline. Defaults to "how can I help?". */ emptyTitle?: string; /** * Handle on the composer. Panels that prefill the input rather than sending * outright — an embed wants the visitor to read and edit first — need this to * drive it from their own empty state. */ chatInputRef?: Ref; }) { const { chat, messages, agentInfo } = useAgentChat(); const hasMessages = messages.length > 0; const resolvedDescription = description ?? agentInfo?.description; const resolvedExamplePrompts = examplePrompts ?? agentInfo?.example_prompts; const hasGeneratingAssistant = messages.some( m => m.role === ChatMessageRoleAssistant && !isTerminalStatus(m.status) ); const showTyping = chat?.status === 'busy' && !hasGeneratingAssistant; return ( {!compact && (header ?? )} {hasMessages ? ( : undefined} /> ) : ( emptyState ?? ( ) )} ); }); // ============================================================================= // Main Component // ============================================================================= export function Agent({ proxyUrl, apiKey, baseUrl, config, name, chatId, className, compact = false, allowFiles = true, allowImages = true, onChatCreated, description, examplePrompts, }: AgentProps) { // Create client internally - memoized to prevent re-creation const client = useMemo(() => { if (!proxyUrl && !apiKey) { console.error('[Agent] Either proxyUrl or apiKey is required'); return null; } return new Inference({ proxyUrl, apiKey, baseUrl }); }, [proxyUrl, apiKey, baseUrl]); if (!client) { return null; } // Extract description and example prompts from ad-hoc config, or use props const effectiveDescription = description ?? (isAdHocConfig(config) ? config.description : undefined); const effectiveExamplePrompts = examplePrompts ?? (isAdHocConfig(config) ? config.example_prompts : undefined); return ( ); } Agent.displayName = 'Agent'; 4d:["$","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","@inferencesh/sdk",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40inferencesh%2Fsdk","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":"@inferencesh/sdk"}]]}]}]]}],["$","$L4e",null,{"namespace":"@inferencesh","registryDependencies":["button","https://inference.sh/ui/r/chat.json","https://inference.sh/ui/r/tools.json","https://inference.sh/ui/r/widgets.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/infsh/agent/agent.tsx","content":"$50","type":"registry:component","target":"components/infsh/agent/agent.tsx"}],"className":"h-[70svh] min-h-80"}]]}]