llama.cpp/tools/ui/src/lib/components/app/chat/index.ts

/**
 *
 * ATTACHMENTS
 *
 * Components for displaying and managing different attachment types in chat messages.
 * Supports two operational modes:
 * - **Readonly mode**: For displaying stored attachments in sent messages (DatabaseMessageExtra[])
 * - **Editable mode**: For managing pending uploads in the input form (ChatUploadedFile[])
 *
 * The attachment system uses `getAttachmentDisplayItems()` utility to normalize both
 * data sources into a unified display format, enabling consistent rendering regardless
 * of the attachment origin.
 *
 */

/**
 * **ChatAttachmentsList** - Unified display for file attachments in chat
 *
 * Central component for rendering file attachments in both ChatMessage (readonly)
 * and ChatForm (editable) contexts.
 *
 * **Architecture:**
 * - Delegates rendering to specialized thumbnail components based on attachment type
 * - Manages scroll state and navigation arrows for horizontal overflow
 * - Integrates with DialogChatAttachmentsPreview for full-size gallery/single viewing
 * - Validates vision modality support via `activeModelId` prop
 *
 * **Features:**
 * - Horizontal scroll with smooth navigation arrows
 * - Image thumbnails with lazy loading and error fallback
 * - File type icons for non-image files (PDF, text, audio, etc.)
 * - MCP prompt attachments with expandable content preview
 * - Click-to-preview with full-size dialog and download option
 * - "View All" button when `limitToSingleRow` is enabled and content overflows
 * - Vision modality validation to warn about unsupported image uploads
 * - Customizable thumbnail dimensions via `imageHeight`/`imageWidth` props
 *
 * @example
 * ```svelte
 * <!-- Readonly mode (in ChatMessage) -->
 * <ChatAttachmentsList attachments={message.extra} readonly />
 *
 * <!-- Editable mode (in ChatForm) -->
 * <ChatAttachmentsList
 *   bind:uploadedFiles
 *   onFileRemove={(id) => removeFile(id)}
 *   limitToSingleRow
 *   activeModelId={selectedModel}
 * />
 * ```
 */
export { default as ChatAttachmentsList } from './ChatAttachments/ChatAttachmentsList/ChatAttachmentsList.svelte';

/**
 * Renders a single attachment item based on its type (image, file, MCP prompt, or MCP resource).
 * Delegates to specialized sub-components: ChatAttachmentsListItemThumbnailImage, ChatAttachmentsListItemThumbnailFile,
 * ChatAttachmentsListItemMcpPrompt, or ChatAttachmentsListItemMcpResource.
 */
export { default as ChatAttachmentsListItem } from './ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItem.svelte';

/**
 * Displays MCP Prompt attachment with expandable content preview.
 * Shows server name, prompt name, and allows expanding to view full prompt arguments
 * and content. Used when user selects a prompt from ChatFormPickerMcpPrompts.
 */
export { default as ChatAttachmentsListItemMcpPrompt } from './ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpPrompt.svelte';

/**
 * Displays a single MCP Resource attachment with icon, name, and server info.
 * Shows loading/error states and supports remove action.
 * Used within ChatAttachmentMcpResources for individual resource display.
 */
export { default as ChatAttachmentsListItemMcpResource } from './ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpResource.svelte';

/**
 * Thumbnail for non-image file attachments. Displays file type icon based on extension,
 * file name (truncated), and file size.
 * Handles text files, PDFs, audio, and other document types.
 */
export { default as ChatAttachmentsListItemThumbnailFile } from './ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailFile.svelte';

/**
 * Thumbnail for image attachments with lazy loading and error fallback.
 * Displays image preview with configurable dimensions. Falls back to placeholder
 * on load error.
 */
export { default as ChatAttachmentsListItemThumbnailImage } from './ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailImage.svelte';

/**
 * Unified attachment preview component for dialog display. Shows a single file
 * preview without carousel, or a gallery/carousel view when multiple items exist.
 * Uses ChatAttachmentPreviewSingle internally for each item's content.
 */
export { default as ChatAttachmentsPreview } from './ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreview.svelte';
export { default as ChatAttachmentsPreviewNavButtons } from './ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewNavButtons.svelte';
export { default as ChatAttachmentsPreviewFileInfo } from './ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewFileInfo.svelte';
export { default as ChatAttachmentsPreviewThumbnailStrip } from './ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewThumbnailStrip.svelte';
export { default as ChatAttachmentsPreviewCurrentItem } from './ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItem.svelte';

/**
 *
 * FORM
 *
 * Components for the chat input area. The form handles user input, file attachments,
 * audio recording, and MCP prompts & resources selection. It integrates with multiple stores:
 * - `chatStore` for message submission and generation control
 * - `modelsStore` for model selection and validation
 * - `mcpStore` for MCP prompt browsing and loading
 *
 * The form exposes a public API for programmatic control from parent components
 * (focus, height reset, model selector, validation).
 *
 */

/**
 * **ChatForm** - Main chat input component with rich features
 *
 * The primary input interface for composing and sending chat messages.
 * Orchestrates text input, file attachments, audio recording, and MCP prompts.
 * Used by ChatScreenForm and ChatMessageEditForm for both new conversations and message editing.
 *
 * **Architecture:**
 * - Composes ChatFormInput (a plain textarea, or a ChatFormInputRich for
 *   messages with file mention links), ChatFormActions, and ChatFormPickerMcpPrompts
 * - Manages file upload state via `uploadedFiles` bindable prop
 * - Integrates with ModelsSelectorDropdown for model selection in router mode
 * - Communicates with parent via callbacks (onSubmit, onFilesAdd, onStop, etc.)
 *
 * **Input Handling:**
 * - IME-safe Enter key handling (waits for composition end)
 * - Shift+Enter for newline, Enter for submit
 * - Paste handler for files and long text (> {pasteLongTextToFileLen} chars → file conversion)
 * - Keyboard shortcut `/` triggers MCP prompt picker
 *
 * **Features:**
 * - Auto-resizing textarea with placeholder
 * - File upload via button dropdown (images/text/PDF), drag-drop, or paste
 * - Audio recording with WAV conversion (when model supports audio)
 * - MCP prompt picker with search and argument forms
 * - MCP reource picker with component to list attached resources at the bottom of Chat Form
 * - Model selector integration (router mode)
 * - Loading state with stop button, disabled state for errors
 *
 * **Exported API:**
 * - `focus()` - Focus the textarea programmatically
 * - `resetTextareaHeight()` - Reset textarea to default height after submit
 * - `openModelSelector()` - Open model selection dropdown
 * - `checkModelSelected(): boolean` - Validate model selection, show error if none
 *
 * @example
 * ```svelte
 * <ChatForm
 *   bind:this={chatFormRef}
 *   bind:value={message}
 *   bind:uploadedFiles
 *   {isLoading}
 *   onSubmit={handleSubmit}
 *   onFilesAdd={processFiles}
 *   onStop={handleStop}
 * />
 * ```
 */
export { default as ChatForm } from './ChatForm/ChatForm.svelte';

/**
 * Wrapper component for the "add to chat" button (Plus icon).
 * Exposes a `button` snippet that can be used inside DropdownMenu.Trigger (desktop)
 * or Sheet.Root (mobile) to maintain consistent styling while allowing
 * platform-specific trigger wrappers.
 */
export { default as ChatFormActionsAdd } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionsAdd.svelte';

/**
 * Audio recording button with real-time recording indicator. Records audio
 * and converts to WAV format for upload. Only visible when the active model
 * supports audio modality and setting for automatic audio input is enabled. Shows recording duration while active.
 */
export { default as ChatFormActionRecord } from './ChatForm/ChatFormActions/ChatFormActionRecord.svelte';

/**
 * Container for chat form action buttons. Arranges file attachment, audio record,
 * and submit/stop buttons in a horizontal layout. Handles conditional visibility
 * based on model capabilities and loading state.
 */
export { default as ChatFormActions } from './ChatForm/ChatFormActions/ChatFormActions.svelte';

/**
 * Submit/stop button with loading state. Shows send icon normally, transforms
 * to stop icon during generation. Disabled when input is empty or form is disabled.
 * Triggers onSubmit or onStop callbacks based on current state.
 */
export { default as ChatFormActionSubmit } from './ChatForm/ChatFormActions/ChatFormActionSubmit.svelte';

/**
 * Model selector component for the chat form action bar. Renders either a dropdown
 * (desktop) or bottom sheet (mobile) for selecting the conversation model in router mode.
 * Exposes an `open` method for programmatically opening the selector.
 */
export { default as ChatFormActionModels } from './ChatForm/ChatFormActions/ChatFormActionModels.svelte';

/**
 * Dropdown submenu for managing tool permissions in the chat form.
 *
 * Displays a collapsible list of available tools organized by group (Built-in / JSON Schema).
 * Each group can be expanded to show individual tools with checkboxes for enabling/disabling.
 * Provides bulk enable/disable controls per group and shows enabled/total tool counts.
 * Opens the tools panel on the server when the menu opens.
 *
 * Features:
 * - Grouped tools with collapsible sections
 * - Group favicon display (MCP server icons)
 * - Per-group and per-tool toggle checkboxes
 * - Loading/error states for tool discovery
 * - Integration with toolsPanel for state management
 *
 * @example
 * ```svelte
 * <ChatFormActionAddToolsSubmenu />
 * ```
 */
export { default as ChatFormActionAddToolsSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddToolsSubmenu.svelte';

/**
 * Dropdown submenu for MCP prompts and resources in the chat form.
 *
 * Shows an "MCP" sub-menu item with entries for MCP Prompts and MCP
 * Resources. Only visible when the server supports them.
 *
 * @example
 * ```svelte
 * <ChatFormActionAddMcpSubmenu />
 * ```
 */
export { default as ChatFormActionAddMcpSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpSubmenu.svelte';

/**
 * Dropdown submenu for selecting reasoning effort level.
 *
 * Shows a "Reasoning" sub-menu item with a lightbulb icon indicating
 * thinking status, and a nested list of effort levels.
 * Only visible when the current model supports thinking.
 */
export { default as ChatFormActionAddReasoningSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte';

/**
 * Compact context-usage gauge with per-turn and cumulative breakdown in the tooltip.
 */
export { default as ChatFormContextGauge } from './ChatForm/ChatFormContextGauge/ChatFormContextGauge.svelte';

/**
 * Hidden file input element for programmatic file selection.
 */
export { default as ChatFormInputFileInputInvisible } from './ChatForm/ChatFormInput/ChatFormInputFileInputInvisible.svelte';

/**
 * Displays MCP Resource attachments as a horizontal carousel.
 * Shows resource name, URI, and allows clicking to view resource content.
 */
export { default as ChatFormMcpResourcesList } from './ChatForm/ChatFormMcpResourcesList.svelte';

/**
 * The message editor. Renders a plain auto-resizing textarea by default,
 * or a ChatFormInputRich that renders `[name](file://...)` mention links as
 * inline chips (keeping the value as the markdown source string) once a
 * mention link lands in the buffer. The variant is selected via the
 * `useRichInput` prop; both share one imperative handle.
 */
export { default as ChatFormInput } from './ChatForm/ChatFormInput/ChatFormInput.svelte';

/**
 * Working directory selector for agent mode. Renders a chip below the chat
 * form; clicking it opens a popover with a directory picker backed by the
 * server's `file_glob_search` server tool (POST /tools). The picked
 * directory is exposed via `bind:directory`; changing it records a
 * synthetic "Set working directory to ..." user message into chat history
 * and is enforced on tool calls via the `x-tool-cwd` request header.
 */
export { default as ChatFormCurrentWorkingDirectory } from './ChatForm/ChatFormCurrentWorkingDirectory/ChatFormCurrentWorkingDirectory.svelte';

/**
 * **ChatFormPickerMcpPrompts** - MCP prompt selection interface
 *
 * Floating picker for browsing and selecting MCP Server Prompts.
 * Triggered by typing `/` in the chat input or choosing `MCP Prompt` option in ChatFormActionAddDropdown.
 * Loads prompts from connected MCP servers and allows users to select and configure them.
 *
 * **Architecture:**
 * - Fetches available prompts from mcpStore
 * - Manages selection state and keyboard navigation internally
 * - Delegates argument input to ChatFormPromptPickerArgumentForm
 * - Communicates prompt loading lifecycle via callbacks
 *
 * **Prompt Loading Flow:**
 * 1. User selects prompt → `onPromptLoadStart` called with placeholder ID
 * 2. Prompt content fetched from MCP server asynchronously
 * 3. On success → `onPromptLoadComplete` with full prompt data
 * 4. On failure → `onPromptLoadError` with error details
 *
 * **Features:**
 * - Search/filter prompts by name across all connected servers
 * - Keyboard navigation (↑/↓ to navigate, Enter to select, Esc to close)
 * - Argument input forms for prompts with required parameters
 * - Autocomplete suggestions for argument values
 * - Loading states with skeleton placeholders
 * - Server information header per prompt for visual identification
 *
 * **Exported API:**
 * - `handleKeydown(event): boolean` - Process keyboard events, returns true if handled
 *
 * @example
 * ```svelte
 * <ChatFormPickerMcpPrompts
 *   bind:this={pickerRef}
 *   isOpen={showPicker}
 *   searchQuery={promptQuery}
 *   onClose={() => showPicker = false}
 *   onPromptLoadStart={(id, info) => addPlaceholder(id, info)}
 *   onPromptLoadComplete={(id, result) => replacePlaceholder(id, result)}
 *   onPromptLoadError={(id, error) => handleError(id, error)}
 * />
 * ```
 */
export { default as ChatFormPickerMcpPrompts } from './ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte';

/**
 * Form for entering MCP prompt arguments. Displays input fields for each
 * required argument defined by the prompt. Validates input and submits
 * when all required fields are filled. Shows argument descriptions as hints.
 */
export { default as ChatFormPromptPickerArgumentForm } from './ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPromptPickerArgumentForm.svelte';

/**
 * Single argument input field with autocomplete suggestions. Fetches suggestions
 * from MCP server based on argument type. Supports keyboard navigation through
 * suggestions list. Used within ChatFormPromptPickerArgumentForm.
 */
export { default as ChatFormPromptPickerArgumentInput } from './ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPromptPickerArgumentInput.svelte';

/**
 * Shared popover wrapper for inline picker popovers (prompts, resources).
 * Provides consistent positioning, styling, and open/close behavior.
 */
export { default as ChatFormPickerPopover } from './ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerPopover.svelte';

/**
 * Generic scrollable list for picker popovers. Provides search input,
 * scroll-into-view for keyboard navigation, loading skeletons, empty state,
 * and optional footer. Uses Svelte 5 snippets for item/skeleton/footer rendering.
 * Shared by ChatFormPickerMcpPrompts and ChatFormPickerMention.
 */
export { default as ChatFormPickerList } from './ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerList.svelte';

/**
 * Generic button wrapper for picker list items. Provides consistent styling,
 * hover/selected states, and data-picker-index attribute for scroll-into-view.
 * Shared by ChatFormPickerMcpPrompts and ChatFormPickerMention.
 */
export { default as ChatFormPickerListItem } from './ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItem.svelte';

/**
 * Generic header for picker items displaying server favicon, label, item title,
 * and optional description. Accepts `titleExtra` and `subtitle` snippets for
 * custom content like badges or URIs. Shared by both pickers.
 */
export { default as ChatFormPickerItemHeader } from './ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerItemHeader.svelte';

/**
 * Generic skeleton loading placeholder for picker list items. Configurable
 * title width and optional badge skeleton. Shared by both pickers.
 */
export { default as ChatFormPickerListItemSkeleton } from './ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItemSkeleton.svelte';

/**
 * `@`-triggered file/folder mention picker. Resolves `@<query>` in the chat
 * input to a filesystem match via the server's `file_glob_search` server tool
 * tool, scoped to the conversation cwd (or server home when unset).
 * Selection splices a `[name](file:///<abs path>)` link into the input.
 */
export { default as ChatFormPickerMention } from './ChatForm/ChatFormPickers/ChatFormPickerMention.svelte';

/**
 * `/`-triggered slash-command picker. Lists the available slash commands
 * (`/prompt`, `/cwd`, `/model`) filtered by the typed query; selection
 * hands the command to the parent for dispatch.
 */
export { default as ChatFormPickerCommand } from './ChatForm/ChatFormPickers/ChatFormPickerCommand.svelte';

/**
 * Hosts the chat-form pickers (slash-command, MCP prompt, file mention)
 * and delegates keyboard events to the active one.
 */
export { default as ChatFormPickers } from './ChatForm/ChatFormPickers/ChatFormPickers.svelte';

/**
 *
 * MESSAGES
 *
 * Components for displaying chat messages. The message system supports:
 * - **Conversation branching**: Messages can have siblings (alternative versions)
 *   created by editing or regenerating. Users can navigate between branches.
 * - **Role-based rendering**: Different layouts for user, assistant, and system messages
 * - **Streaming support**: Real-time display of assistant responses as they generate
 * - **Agentic workflows**: Special rendering for tool calls and reasoning blocks
 *
 * The branching system uses `getMessageSiblings()` utility to compute sibling info
 * for each message based on the full conversation tree stored in the database.
 *
 */

/**
 * **ChatMessages** - Message list container with branching support
 *
 * Container component that renders the list of messages in a conversation.
 * Computes sibling information for each message to enable branch navigation.
 * Integrates with conversationsStore for message operations.
 *
 * **Architecture:**
 * - Fetches all conversation messages to compute sibling relationships
 * - Filters system messages based on user config (`showSystemMessage`)
 * - Delegates rendering to ChatMessage for each message
 * - Propagates all message operations to chatStore via callbacks
 *
 * **Branching Logic:**
 * - Uses `getMessageSiblings()` to find all messages with same parent
 * - Computes `siblingInfo: { currentIndex, totalSiblings, siblingIds }`
 * - Enables navigation between alternative message versions
 *
 * **Message Operations (delegated to chatStore):**
 * - Edit with branching: Creates new message branch, preserves original
 * - Edit with replacement: Modifies message in place
 * - Regenerate: Creates new assistant response as sibling
 * - Delete: Removes message and all descendants (cascade)
 * - Continue: Appends to incomplete assistant message
 *
 * @example
 * ```svelte
 * <ChatMessages
 *   messages={activeMessages()}
 *   onUserAction={resetAutoScroll}
 * />
 * ```
 */
export { default as ChatMessages } from './ChatMessages/ChatMessages.svelte';

/**
 * **ChatMessage** - Single message display with actions
 *
 * Renders a single chat message with role-specific styling and full action
 * support. Delegates to specialized components based on message role:
 * ChatMessageUser, ChatMessageAssistant, or ChatMessageSystem.
 *
 * **Architecture:**
 * - Routes to role-specific component based on `message.type`
 * - Manages edit mode state and inline editing UI
 * - Handles action callbacks (copy, edit, delete, regenerate)
 * - Displays branching controls when message has siblings
 *
 * **User Messages:**
 * - Shows attachments via ChatAttachments
 * - Displays MCP prompts if present
 * - Edit creates new branch or preserves responses
 *
 * **Assistant Messages:**
 * - Renders content via MarkdownContent or ChatMessageAgenticContent
 * - Shows model info badge (when enabled)
 * - Regenerate creates sibling with optional model override
 * - Continue action for incomplete responses
 *
 * **Features:**
 * - Inline editing with file attachments support
 * - Copy formatted content to clipboard
 * - Delete with confirmation (shows cascade delete count)
 * - Branching controls for sibling navigation
 * - Statistics display (tokens, timing)
 *
 * @example
 * ```svelte
 * <ChatMessage
 *   {message}
 *   {siblingInfo}
 *   onEditWithBranching={handleEdit}
 *   onRegenerateWithBranching={handleRegenerate}
 *   onNavigateToSibling={handleNavigate}
 * />
 * ```
 */
export { default as ChatMessage } from './ChatMessages/ChatMessage/ChatMessage.svelte';

/**
 * **ChatMessageAgenticContent** - Agentic workflow output display
 *
 * Specialized renderer for assistant messages with tool calls and reasoning.
 * Derives display sections from structured message data (toolCalls, reasoningContent,
 * and child tool result messages) and renders them as interactive collapsible sections.
 *
 * **Architecture:**
 * - Uses `deriveAgenticSections()` from `$lib/utils` to build sections from structured data
 * - Renders sections as CollapsibleContentBlock components
 * - Handles streaming state for progressive content display
 * - Falls back to MarkdownContent for plain text sections
 *
 * **Execution States:**
 * - **Streaming**: Animated spinner, block expanded, auto-scroll enabled
 * - **Pending**: Waiting indicator for queued tool calls
 * - **Completed**: Static display, block collapsed by default
 *
 * **Features:**
 * - JSON arguments syntax highlighting via SyntaxHighlightedCode
 * - Tool results display with formatting
 * - Plain text sections between markers rendered as markdown
 * - Smart collapse defaults (expanded while streaming, collapsed when done)
 *
 * @example
 * ```svelte
 * <ChatMessageAgenticContent
 *   content={message.content}
 *   {message}
 *   isStreaming={isGenerating}
 * />
 * ```
 */
export { default as ChatMessageAgenticContent } from './ChatMessages/ChatMessageAgenticContent.svelte';
export { default as ChatMessageActionCardPermissionRequest } from './ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardPermissionRequest.svelte';
export { default as ChatMessageActionCard } from './ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCard.svelte';
export { default as ChatMessageActionCardContinueRequest } from './ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardContinueRequest.svelte';

/**
 * Action buttons toolbar for messages. Displays copy, edit, delete, and regenerate
 * buttons based on message role. Includes branching controls when message has siblings.
 * Shows delete confirmation dialog with cascade delete count. Handles raw output toggle
 * for assistant messages.
 */
export { default as ChatMessageActionIcons } from './ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIcons.svelte';

/**
 * Navigation controls for message siblings (conversation branches). Displays
 * prev/next arrows with current position counter (e.g., "2/5"). Enables users
 * to navigate between alternative versions of a message created by editing
 * or regenerating. Uses `conversationsStore.navigateToSibling()` for navigation.
 */
export { default as ChatMessageActionIconsBranchingControls } from './ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIconsBranchingControls.svelte';

/**
 * Statistics display for assistant messages. Shows token counts (prompt/completion),
 * generation timing, tokens per second, and model name (when enabled in settings).
 * Data sourced from message.timings stored during generation.
 */
export { default as ChatMessageStatistics } from './ChatMessages/ChatMessageStatistics/ChatMessageStatistics.svelte';
export { default as ChatMessageStatisticsBadge } from './ChatMessages/ChatMessageStatistics/ChatMessageStatisticsBadge.svelte';

/**
 * MCP prompt display in user messages. Shows when user selected an MCP prompt
 * via ChatFormPickerMcpPrompts. Displays server name, prompt name, and expandable
 * content preview. Stored in message.extra as DatabaseMessageExtraMcpPrompt.
 */
export { default as ChatMessageMcpPrompt } from './ChatMessages/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPrompt.svelte';

/**
 * Synthetic working-directory-change message. Rendered in place of a user
 * bubble when the message content parses as a cwd message (see
 * parseCwdMessage); shows the new cwd with the same folder-row treatment
 * the tool-call UI used.
 */
export { default as ChatMessageCwdChange } from './ChatMessages/ChatMessage/ChatMessageCwdChange.svelte';

/**
 * Generic wrapper for UI-generated (synthetic) messages. Routes the
 * working-directory change to ChatMessageCwdChange and renders a muted
 * fallback for any other synthetic text, so no synthetic message ever
 * surfaces as a user bubble.
 */
export { default as ChatMessageSynthetic } from './ChatMessages/ChatMessage/ChatMessageSynthetic.svelte';

/**
 * Formatted content display for MCP prompt messages. Renders the full prompt
 * content with arguments in a readable format. Used within ChatMessageMcpPrompt
 * for the expanded view.
 */
export { default as ChatMessageMcpPromptContent } from './ChatMessages/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPromptContent.svelte';

/**
 * Assistant message display component. Renders assistant responses with left-aligned styling.
 * Supports both plain markdown content (via MarkdownContent) and agentic content with tool calls
 * (via ChatMessageAgenticContent). Shows model info badge, statistics, and action buttons.
 * Handles streaming state with real-time content updates.
 */
export { default as ChatMessageAssistant } from './ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte';
export { default as ChatMessageAssistantModel } from './ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistantModel.svelte';
export { default as ChatMessageAssistantProcessingInfo } from './ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistantProcessingInfo.svelte';
export { default as ChatMessageAssistantRawOutput } from './ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistantRawOutput.svelte';
export { default as ChatMessageAssistantStatistics } from './ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistantStatistics.svelte';

/**
 * Inline message editing form. Provides textarea for editing message content with
 * attachment management. Shows save/cancel buttons and optional "Save only" button
 * for editing without regenerating responses. Used within ChatMessage components
 * when user enters edit mode.
 */
export { default as ChatMessageEditForm } from './ChatMessages/ChatMessageEditForm.svelte';

/**
 * User message display component. Renders user messages with right-aligned bubble styling.
 * Shows message content, attachments via ChatAttachmentsList, and MCP prompts if present.
 * Supports inline editing mode with ChatMessageEditForm integration.
 */
export { default as ChatMessageUser } from './ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUser.svelte';
export { default as ChatMessageUserBubble } from './ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserBubble.svelte';
export { default as ChatMessageUserPending } from './ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserPending.svelte';

/**
 * System message display component. Renders system messages with distinct styling.
 * Visibility controlled by `showSystemMessage` config setting.
 */
export { default as ChatMessageSystem } from './ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte';

/**
 *
 * SCREEN
 *
 * Top-level chat interface components. ChatScreen is the main container that
 * orchestrates all chat functionality. It integrates with multiple stores:
 * - `chatStore` for message operations and generation control
 * - `conversationsStore` for conversation management
 * - `serverStore` for server connection state
 * - `modelsStore` for model capabilities (vision, audio modalities)
 *
 * The screen handles the complete chat lifecycle from empty state to active
 * conversation with streaming responses.
 *
 */

/**
 * **ChatScreen** - Main chat interface container
 *
 * Top-level component that orchestrates the entire chat interface. Manages
 * messages display, input form, file handling, auto-scroll, error dialogs,
 * and server state. Used as the main content area in chat routes.
 *
 * **Architecture:**
 * - Composes ChatMessages, ChatScreenForm, and dialogs
 * - Manages auto-scroll via `createAutoScrollController()` hook
 * - Handles file upload pipeline (validation → processing → state update)
 * - Integrates with serverStore for loading/error/warning states
 * - Tracks active model for modality validation (vision, audio)
 *
 * **File Upload Pipeline:**
 * 1. Files received via drag-drop, paste, or file picker
 * 2. Validated against supported types (`isFileTypeSupported()`)
 * 3. Filtered by model modalities (`filterFilesByModalities()`)
 * 4. Empty files detected and reported via DialogEmptyFileAlert
 * 5. Valid files processed to ChatUploadedFile[] format
 * 6. Unsupported files shown in error dialog with reasons
 *
 * **State Management:**
 * - `isEmpty`: Shows centered welcome UI when no conversation active
 * - `isCurrentConversationLoading`: Tracks generation state for current chat
 * - `activeModelId`: Determines available modalities for file validation
 * - `uploadedFiles`: Pending file attachments for next message
 *
 * **Features:**
 * - Messages display with smart auto-scroll (pauses on user scroll up)
 * - File drag-drop with visual overlay indicator
 * - File validation with detailed error messages
 * - Error dialog management (chat errors, model unavailable)
 * - Server loading/error/warning states with appropriate UI
 * - Conversation deletion with confirmation dialog
 * - Processing info display (tokens/sec, timing) during generation
 * - Keyboard shortcuts (Ctrl+Shift+Backspace to delete conversation)
 *
 * @example
 * ```svelte
 * <!-- In chat route -->
 * <ChatScreen showCenteredEmpty />
 *
 * <!-- In conversation route -->
 * <ChatScreen showCenteredEmpty={false} />
 * ```
 */
export { default as ChatScreen } from './ChatScreen/ChatScreen.svelte';

/**
 * **ChatTabs** - Browser-style tab bar for open conversations
 *
 * Horizontal strip of tabs rendered above ChatScreen in the chat layout,
 * one per conversation tracked by tabsStore. The active tab follows the
 * route's conversation id; clicking a tab navigates to it, middle-click or
 * the close button closes it (switching to the left neighbor when closing
 * the active tab), and a trailing "+" button starts a new chat. Shows a
 * spinner on tabs with a running generation. Desktop-only.
 */
export { default as ChatTabs } from './ChatTabs/ChatTabs.svelte';

/**
 * Visual overlay displayed when user drags files over the chat screen.
 * Shows drop zone indicator to guide users where to release files.
 * Integrated with ChatScreen's drag-drop file upload handling.
 */
export { default as ChatScreenDragOverlay } from './ChatScreen/ChatScreenDragOverlay.svelte';

/**
 * Chat form wrapper within ChatScreen. Positions the ChatForm component at the
 * bottom of the screen with proper padding and max-width constraints. Handles
 * the visual container styling for the input area.
 */
export { default as ChatScreenForm } from './ChatScreen/ChatScreenForm.svelte';

/**
 * Server error alert displayed when the server is unreachable.
 * Shows the error message with a retry button.
 * Rendered inside ChatScreen when `serverError` store has a value.
 */
export { default as ChatScreenServerError } from './ChatScreen/ChatScreenServerError.svelte';

/**
 * Stream resume status indicator. Shows a small "Reconnecting to the stream..."
 * banner with a spinner while `chatStore.streamConnectionState` is `resuming`,
 * i.e. after a dropped connection is reattaching to the live SSE replay buffer.
 * Renders nothing otherwise. Shown inside ChatScreen only on an active conversation route.
 */
export { default as ChatScreenStreamResumeStatus } from './ChatScreen/ChatScreenStreamResumeStatus.svelte';