Web UI Components

This document lists the core components under indusagi/src/webui/components and the behaviors that matter when integrating them. Most components render in light DOM via createRenderRoot() so global styles in app.css apply.

AgentInterface (`agent-interface`)

File: indusagi/src/webui/components/AgentInterface.ts

Purpose: Primary chat UI component. It binds an Agent instance to UI controls, streaming, and storage.

Key properties:

• session?: Agent to bind an external agent instance.
• enableAttachments, enableModelSelector, enableThinkingSelector, showThemeToggle.
• onApiKeyRequired(provider) to override the default API key prompt.
• onBeforeSend() to run before sending user input.
• onBeforeToolCall(toolName, args) to gate tool execution (return false to block).
• onCostClick() for usage-cost click handling.

Public methods:

• setInput(text, attachments?) to prefill the editor and attachments.
• setAutoScroll(enabled) to control scroll behavior.
• sendMessage(input, attachments?) to send a message programmatically.

Behavior notes:

• Auto-scroll is managed with a ResizeObserver and scroll heuristics.
• If session.streamFn is the default streamSimple, it swaps to a proxy-aware stream from createStreamFn.
• If session.getApiKey is unset, it pulls keys from AppStorage.providerKeys.

MessageEditor (`message-editor`)

File: indusagi/src/webui/components/MessageEditor.ts

Purpose: Input composer with attachments, model selector, and thinking selector.

Key properties:

• value, isStreaming, currentModel, thinkingLevel.
• showAttachmentButton, showModelSelector, showThinkingSelector.
• Callbacks: onInput, onSend, onAbort, onModelSelect, onThinkingChange, onFilesChange.
• Attachment limits: maxFiles (default 10), maxFileSize (default 20 MB), acceptedTypes.

Behavior notes:

• Enter sends, Shift+Enter inserts a newline, Escape aborts streaming.
• Supports drag and drop, paste image capture, and file input selection.
• Uses loadAttachment() to normalize files into Attachment objects.

MessageList (`message-list`)

File: indusagi/src/webui/components/MessageList.ts

Purpose: Renders stable message history from AgentMessage[].

Key properties:

• messages, tools, pendingToolCalls, isStreaming, onCostClick.

Behavior notes:

• Tool results are indexed by tool call ID and passed into assistant renderers.
• Custom message roles are rendered via renderMessage() from the message renderer registry.
• artifact messages are ignored in the UI (used for session persistence only).

Messages (`user-message`, `assistant-message`, `tool-message`)

File: indusagi/src/webui/components/Messages.ts

Purpose: Built-in message renderers for standard agent roles.

Highlights:

• UserMessage supports plain text or UserMessageWithAttachments.
• AssistantMessage renders text, thinking blocks, tool calls, usage, and errors.
• Tool call blocks delegate to renderTool() for registered tool renderers.
• Additional message types are added via declaration merging on CustomAgentMessages.

StreamingMessageContainer (`streaming-message-container`)

File: indusagi/src/webui/components/StreamingMessageContainer.ts

Purpose: Renders the current streaming assistant message with batching for performance.

Behavior notes:

• Uses setMessage(message, immediate?) to update; clones messages to trigger re-renders.
• Displays a small pulsing cursor when streaming.

AttachmentTile (`attachment-tile`)

File: indusagi/src/webui/components/AttachmentTile.ts

Purpose: Attachment preview tile with optional delete control.

Behavior notes:

• Opens AttachmentOverlay when clicked.
• Uses image previews when available and fallback icons for documents.
• showDelete and onDelete are used by the message editor.

ThinkingBlock (`thinking-block`)

File: indusagi/src/webui/components/ThinkingBlock.ts

Purpose: Collapsible reasoning block for thinking content.

Behavior notes:

• Shows a shimmer animation while streaming.
• Expands on click to show rendered markdown.

ConsoleBlock (`console-block`)

File: indusagi/src/webui/components/ConsoleBlock.ts

Purpose: Console output view with copy-to-clipboard.

Key properties:

• content and variant (default or error).

Behavior notes:

• Auto-scrolls to the bottom when content changes.
• Displays a compact header with a copy button.

ExpandableSection (`expandable-section`)

File: indusagi/src/webui/components/ExpandableSection.ts

Purpose: Expand/collapse wrapper used in tool renderers.

Behavior notes:

• Captures child nodes on connect and re-inserts them when expanded.

ProviderKeyInput (`provider-key-input`)

File: indusagi/src/webui/components/ProviderKeyInput.ts

Purpose: UI for saving and validating API keys.

Behavior notes:

• Validates keys by calling complete() on a provider-specific test model.
• Stores keys in AppStorage.providerKeys.

CustomProviderCard (`custom-provider-card`)

File: indusagi/src/webui/components/CustomProviderCard.ts

Purpose: Shows a custom provider with status and actions.

Behavior notes:

• Shows model counts and status for auto-discovery providers.
• Emits onRefresh, onEdit, onDelete callbacks.

Input (functional component)

File: indusagi/src/webui/components/Input.ts

Purpose: Reusable input field for dialogs and forms.

Key props:

• type, size, value, placeholder, label, error.
• onInput, onChange, onKeyDown, onKeyUp.

SandboxedIframe (`sandbox-iframe`)

File: indusagi/src/webui/components/SandboxedIframe.ts

Purpose: Executes JavaScript or HTML in a sandboxed iframe.

Key methods:

• loadContent() for HTML artifact rendering.
• execute() for REPL execution with runtime providers.
• prepareHtmlDocument() for HTML generation.

See indusagi/docs/webui/sandbox.md for detailed behavior.

Message Renderer Registry

File: indusagi/src/webui/components/message-renderer-registry.ts

Purpose: Allows custom rendering per message role.

Key API:

• registerMessageRenderer(role, renderer)
• renderMessage(message)