From 1b7f576bafa97850eab8548b3c1e108113c2027c Mon Sep 17 00:00:00 2001 From: Aleksander Grygier Date: Tue, 27 Jan 2026 10:26:14 +0100 Subject: [PATCH] refactor: Components --- .../app/{misc => actions}/ActionButton.svelte | 0 .../CopyToClipboardIcon.svelte | 0 .../KeyboardShortcutInfo.svelte | 0 .../app/{misc => actions}/RemoveButton.svelte | 0 .../src/lib/components/app/actions/index.ts | 19 ++ .../BadgeChatStatistic.svelte | 0 .../app/{misc => badges}/BadgeInfo.svelte | 0 .../app/{misc => badges}/BadgeModality.svelte | 0 .../src/lib/components/app/badges/index.ts | 16 ++ .../app/content/CodeBlockActions.svelte | 54 ++++ .../CollapsibleContentBlock.svelte | 0 .../{misc => content}/MarkdownContent.svelte | 67 +---- .../SyntaxHighlightedCode.svelte | 0 .../src/lib/components/app/content/index.ts | 82 ++++++ .../DialogCodePreview.svelte} | 0 .../src/lib/components/app/dialogs/index.ts | 38 +++ .../app/{misc => forms}/KeyValuePairs.svelte | 0 .../app/{misc => forms}/SearchInput.svelte | 0 .../src/lib/components/app/forms/index.ts | 30 +++ .../webui/src/lib/components/app/index.ts | 5 + .../src/lib/components/app/misc/index.ts | 245 +----------------- .../DropdownMenuActions.svelte | 0 .../DropdownMenuSearchable.svelte | 0 .../lib/components/app/navigation/index.ts | 63 +++++ 24 files changed, 321 insertions(+), 298 deletions(-) rename tools/server/webui/src/lib/components/app/{misc => actions}/ActionButton.svelte (100%) rename tools/server/webui/src/lib/components/app/{misc => actions}/CopyToClipboardIcon.svelte (100%) rename tools/server/webui/src/lib/components/app/{misc => actions}/KeyboardShortcutInfo.svelte (100%) rename tools/server/webui/src/lib/components/app/{misc => actions}/RemoveButton.svelte (100%) create mode 100644 tools/server/webui/src/lib/components/app/actions/index.ts rename tools/server/webui/src/lib/components/app/{misc => badges}/BadgeChatStatistic.svelte (100%) rename tools/server/webui/src/lib/components/app/{misc => badges}/BadgeInfo.svelte (100%) rename tools/server/webui/src/lib/components/app/{misc => badges}/BadgeModality.svelte (100%) create mode 100644 tools/server/webui/src/lib/components/app/badges/index.ts create mode 100644 tools/server/webui/src/lib/components/app/content/CodeBlockActions.svelte rename tools/server/webui/src/lib/components/app/{misc => content}/CollapsibleContentBlock.svelte (100%) rename tools/server/webui/src/lib/components/app/{misc => content}/MarkdownContent.svelte (94%) rename tools/server/webui/src/lib/components/app/{misc => content}/SyntaxHighlightedCode.svelte (100%) create mode 100644 tools/server/webui/src/lib/components/app/content/index.ts rename tools/server/webui/src/lib/components/app/{misc/CodePreviewDialog.svelte => dialogs/DialogCodePreview.svelte} (100%) rename tools/server/webui/src/lib/components/app/{misc => forms}/KeyValuePairs.svelte (100%) rename tools/server/webui/src/lib/components/app/{misc => forms}/SearchInput.svelte (100%) create mode 100644 tools/server/webui/src/lib/components/app/forms/index.ts rename tools/server/webui/src/lib/components/app/{misc => navigation}/DropdownMenuActions.svelte (100%) rename tools/server/webui/src/lib/components/app/{misc => navigation}/DropdownMenuSearchable.svelte (100%) create mode 100644 tools/server/webui/src/lib/components/app/navigation/index.ts diff --git a/tools/server/webui/src/lib/components/app/misc/ActionButton.svelte b/tools/server/webui/src/lib/components/app/actions/ActionButton.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/ActionButton.svelte rename to tools/server/webui/src/lib/components/app/actions/ActionButton.svelte diff --git a/tools/server/webui/src/lib/components/app/misc/CopyToClipboardIcon.svelte b/tools/server/webui/src/lib/components/app/actions/CopyToClipboardIcon.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/CopyToClipboardIcon.svelte rename to tools/server/webui/src/lib/components/app/actions/CopyToClipboardIcon.svelte diff --git a/tools/server/webui/src/lib/components/app/misc/KeyboardShortcutInfo.svelte b/tools/server/webui/src/lib/components/app/actions/KeyboardShortcutInfo.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/KeyboardShortcutInfo.svelte rename to tools/server/webui/src/lib/components/app/actions/KeyboardShortcutInfo.svelte diff --git a/tools/server/webui/src/lib/components/app/misc/RemoveButton.svelte b/tools/server/webui/src/lib/components/app/actions/RemoveButton.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/RemoveButton.svelte rename to tools/server/webui/src/lib/components/app/actions/RemoveButton.svelte diff --git a/tools/server/webui/src/lib/components/app/actions/index.ts b/tools/server/webui/src/lib/components/app/actions/index.ts new file mode 100644 index 0000000000..e5fc04afc8 --- /dev/null +++ b/tools/server/webui/src/lib/components/app/actions/index.ts @@ -0,0 +1,19 @@ +/** + * + * ACTIONS + * + * Small interactive components for user actions. + * + */ + +/** Styled button for action triggers with icon support. */ +export { default as ActionButton } from './ActionButton.svelte'; + +/** Copy-to-clipboard button with success feedback. */ +export { default as CopyToClipboardIcon } from './CopyToClipboardIcon.svelte'; + +/** Remove/delete button with X icon. */ +export { default as RemoveButton } from './RemoveButton.svelte'; + +/** Display for keyboard shortcut hints (e.g., "⌘ + Enter"). */ +export { default as KeyboardShortcutInfo } from './KeyboardShortcutInfo.svelte'; diff --git a/tools/server/webui/src/lib/components/app/misc/BadgeChatStatistic.svelte b/tools/server/webui/src/lib/components/app/badges/BadgeChatStatistic.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/BadgeChatStatistic.svelte rename to tools/server/webui/src/lib/components/app/badges/BadgeChatStatistic.svelte diff --git a/tools/server/webui/src/lib/components/app/misc/BadgeInfo.svelte b/tools/server/webui/src/lib/components/app/badges/BadgeInfo.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/BadgeInfo.svelte rename to tools/server/webui/src/lib/components/app/badges/BadgeInfo.svelte diff --git a/tools/server/webui/src/lib/components/app/misc/BadgeModality.svelte b/tools/server/webui/src/lib/components/app/badges/BadgeModality.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/BadgeModality.svelte rename to tools/server/webui/src/lib/components/app/badges/BadgeModality.svelte diff --git a/tools/server/webui/src/lib/components/app/badges/index.ts b/tools/server/webui/src/lib/components/app/badges/index.ts new file mode 100644 index 0000000000..860afe3084 --- /dev/null +++ b/tools/server/webui/src/lib/components/app/badges/index.ts @@ -0,0 +1,16 @@ +/** + * + * BADGES & INDICATORS + * + * Small visual indicators for status and metadata. + * + */ + +/** Badge displaying chat statistics (tokens, timing). */ +export { default as BadgeChatStatistic } from './BadgeChatStatistic.svelte'; + +/** Generic info badge with optional tooltip and click handler. */ +export { default as BadgeInfo } from './BadgeInfo.svelte'; + +/** Badge indicating model modality (vision, audio, tools). */ +export { default as BadgeModality } from './BadgeModality.svelte'; diff --git a/tools/server/webui/src/lib/components/app/content/CodeBlockActions.svelte b/tools/server/webui/src/lib/components/app/content/CodeBlockActions.svelte new file mode 100644 index 0000000000..2995853a93 --- /dev/null +++ b/tools/server/webui/src/lib/components/app/content/CodeBlockActions.svelte @@ -0,0 +1,54 @@ + + +
+ + {#if showPreview} + + {/if} +
diff --git a/tools/server/webui/src/lib/components/app/misc/CollapsibleContentBlock.svelte b/tools/server/webui/src/lib/components/app/content/CollapsibleContentBlock.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/CollapsibleContentBlock.svelte rename to tools/server/webui/src/lib/components/app/content/CollapsibleContentBlock.svelte diff --git a/tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte b/tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte similarity index 94% rename from tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte rename to tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte index 4c93cde2d4..bc92a12c24 100644 --- a/tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte +++ b/tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte @@ -26,7 +26,8 @@ import githubDarkCss from 'highlight.js/styles/github-dark.css?inline'; import githubLightCss from 'highlight.js/styles/github.css?inline'; import { mode } from 'mode-watcher'; - import CodePreviewDialog from './CodePreviewDialog.svelte'; + import { DialogCodePreview } from '$lib/components/app/dialogs'; + import CodeBlockActions from './CodeBlockActions.svelte'; import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte'; import type { DatabaseMessage } from '$lib/types/database'; @@ -514,58 +515,16 @@
{incompleteCodeBlock.language || 'text'} -
- - {#if incompleteCodeBlock.language?.toLowerCase() === 'html'} - - {/if} -
+ { + previewCode = code; + previewLanguage = lang; + previewDialogOpen = true; + }} + />
- + * ``` + */ +export { default as MarkdownContent } from './MarkdownContent.svelte'; + +/** + * **SyntaxHighlightedCode** - Code syntax highlighting + * + * Renders code with syntax highlighting using highlight.js. + * Supports theme switching and scrollable containers. + * + * **Features:** + * - Auto language detection with fallback + * - Dark/light theme auto-switching + * - Scrollable container with configurable max dimensions + * - Monospace font styling + * - Preserves whitespace and formatting + * + * @example + * ```svelte + * + * ``` + */ +export { default as SyntaxHighlightedCode } from './SyntaxHighlightedCode.svelte'; + +/** + * **CollapsibleContentBlock** - Expandable content card + * + * Reusable collapsible card with header, icon, and auto-scroll. + * Used for tool calls and reasoning blocks in chat messages. + * + * **Features:** + * - Collapsible content with smooth animation + * - Custom icon and title display + * - Optional subtitle/status text + * - Auto-scroll during streaming (pauses on user scroll) + * - Configurable max height with overflow scroll + * + * @example + * ```svelte + * + * {reasoningContent} + * + * ``` + */ +export { default as CollapsibleContentBlock } from './CollapsibleContentBlock.svelte'; + +/** Code block actions component (copy, preview). */ +export { default as CodeBlockActions } from './CodeBlockActions.svelte'; diff --git a/tools/server/webui/src/lib/components/app/misc/CodePreviewDialog.svelte b/tools/server/webui/src/lib/components/app/dialogs/DialogCodePreview.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/CodePreviewDialog.svelte rename to tools/server/webui/src/lib/components/app/dialogs/DialogCodePreview.svelte diff --git a/tools/server/webui/src/lib/components/app/dialogs/index.ts b/tools/server/webui/src/lib/components/app/dialogs/index.ts index 9516120406..c9b664326a 100644 --- a/tools/server/webui/src/lib/components/app/dialogs/index.ts +++ b/tools/server/webui/src/lib/components/app/dialogs/index.ts @@ -136,6 +136,44 @@ export { default as DialogConfirmation } from './DialogConfirmation.svelte'; */ export { default as DialogConversationTitleUpdate } from './DialogConversationTitleUpdate.svelte'; +/** + * + * CONTENT PREVIEW DIALOGS + * + * Dialogs for previewing and displaying content in full-screen or modal views. + * + */ + +/** + * **DialogCodePreview** - Full-screen code/HTML preview + * + * Full-screen dialog for previewing HTML or code in an isolated iframe. + * Used by MarkdownContent component for previewing rendered HTML blocks + * from code blocks in chat messages. + * + * **Architecture:** + * - Uses ShadCN Dialog with full viewport layout + * - Sandboxed iframe execution (allow-scripts only) + * - Clears content when closed for security + * + * **Features:** + * - Full viewport iframe preview + * - Sandboxed execution environment + * - Close button with mix-blend-difference for visibility over any content + * - Automatic content cleanup on close + * - Supports HTML preview with proper isolation + * + * @example + * ```svelte + * + * ``` + */ +export { default as DialogCodePreview } from './DialogCodePreview.svelte'; + /** * * ATTACHMENT DIALOGS diff --git a/tools/server/webui/src/lib/components/app/misc/KeyValuePairs.svelte b/tools/server/webui/src/lib/components/app/forms/KeyValuePairs.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/KeyValuePairs.svelte rename to tools/server/webui/src/lib/components/app/forms/KeyValuePairs.svelte diff --git a/tools/server/webui/src/lib/components/app/misc/SearchInput.svelte b/tools/server/webui/src/lib/components/app/forms/SearchInput.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/SearchInput.svelte rename to tools/server/webui/src/lib/components/app/forms/SearchInput.svelte diff --git a/tools/server/webui/src/lib/components/app/forms/index.ts b/tools/server/webui/src/lib/components/app/forms/index.ts new file mode 100644 index 0000000000..b0280a20a9 --- /dev/null +++ b/tools/server/webui/src/lib/components/app/forms/index.ts @@ -0,0 +1,30 @@ +/** + * + * FORMS & INPUTS + * + * Form-related utility components. + * + */ + +/** + * **SearchInput** - Search field with clear button + * + * Input field optimized for search with clear button and keyboard handling. + * Supports placeholder, autofocus, and change callbacks. + */ +export { default as SearchInput } from './SearchInput.svelte'; + +/** + * **KeyValuePairs** - Editable key-value list + * + * Dynamic list of key-value pairs with add/remove functionality. + * Used for HTTP headers, metadata, and configuration. + * + * **Features:** + * - Add new pairs with button + * - Remove individual pairs + * - Customizable placeholders and labels + * - Empty state message + * - Auto-resize value textarea + */ +export { default as KeyValuePairs } from './KeyValuePairs.svelte'; diff --git a/tools/server/webui/src/lib/components/app/index.ts b/tools/server/webui/src/lib/components/app/index.ts index 589828daaa..56bd8a4852 100644 --- a/tools/server/webui/src/lib/components/app/index.ts +++ b/tools/server/webui/src/lib/components/app/index.ts @@ -1,6 +1,11 @@ +export * from './actions'; +export * from './badges'; export * from './chat'; +export * from './content'; export * from './dialogs'; +export * from './forms'; export * from './mcp'; export * from './misc'; export * from './models'; +export * from './navigation'; export * from './server'; diff --git a/tools/server/webui/src/lib/components/app/misc/index.ts b/tools/server/webui/src/lib/components/app/misc/index.ts index 39572300cb..dc61b519bb 100644 --- a/tools/server/webui/src/lib/components/app/misc/index.ts +++ b/tools/server/webui/src/lib/components/app/misc/index.ts @@ -2,113 +2,10 @@ * * MISC * - * Reusable utility components used across the application. - * Includes content rendering, UI primitives, and helper components. + * Miscellaneous utility components. * */ -/** - * - * CONTENT RENDERING - * - * Components for rendering rich content: markdown, code, and previews. - * - */ - -/** - * **MarkdownContent** - Rich markdown renderer - * - * Renders markdown content with syntax highlighting, LaTeX math, - * tables, links, and code blocks. Optimized for streaming with - * incremental block-based rendering. - * - * **Features:** - * - GFM (GitHub Flavored Markdown): tables, task lists, strikethrough - * - LaTeX math via KaTeX (`$inline$` and `$$block$$`) - * - Syntax highlighting (highlight.js) with language detection - * - Code copy buttons with click feedback - * - External links open in new tab with security attrs - * - Image attachment resolution from message extras - * - Dark/light theme support (auto-switching) - * - Streaming-optimized incremental rendering - * - Code preview dialog for large blocks - * - * @example - * ```svelte - * - * ``` - */ -export { default as MarkdownContent } from './MarkdownContent.svelte'; - -/** - * **SyntaxHighlightedCode** - Code syntax highlighting - * - * Renders code with syntax highlighting using highlight.js. - * Supports theme switching and scrollable containers. - * - * **Features:** - * - Auto language detection with fallback - * - Dark/light theme auto-switching - * - Scrollable container with configurable max dimensions - * - Monospace font styling - * - Preserves whitespace and formatting - * - * @example - * ```svelte - * - * ``` - */ -export { default as SyntaxHighlightedCode } from './SyntaxHighlightedCode.svelte'; - -/** - * **CodePreviewDialog** - Full-screen code preview - * - * Full-screen dialog for previewing HTML/code in an isolated iframe. - * Used by MarkdownContent for previewing rendered HTML blocks. - * - * **Features:** - * - Full viewport iframe preview - * - Sandboxed execution (allow-scripts only) - * - Close button with mix-blend-difference for visibility - * - Clears content when closed for security - */ -export { default as CodePreviewDialog } from './CodePreviewDialog.svelte'; - -/** - * - * COLLAPSIBLE & EXPANDABLE - * - * Components for showing/hiding content sections. - * - */ - -/** - * **CollapsibleContentBlock** - Expandable content card - * - * Reusable collapsible card with header, icon, and auto-scroll. - * Used for tool calls and reasoning blocks in chat messages. - * - * **Features:** - * - Collapsible content with smooth animation - * - Custom icon and title display - * - Optional subtitle/status text - * - Auto-scroll during streaming (pauses on user scroll) - * - Configurable max height with overflow scroll - * - * @example - * ```svelte - * - * {reasoningContent} - * - * ``` - */ -export { default as CollapsibleContentBlock } from './CollapsibleContentBlock.svelte'; - /** * **TruncatedText** - Text with ellipsis and tooltip * @@ -117,135 +14,6 @@ export { default as CollapsibleContentBlock } from './CollapsibleContentBlock.sv */ export { default as TruncatedText } from './TruncatedText.svelte'; -/** - * - * DROPDOWNS & MENUS - * - * Components for dropdown menus and action selection. - * - */ - -/** - * **DropdownMenuSearchable** - Filterable dropdown menu - * - * Generic dropdown with search input for filtering options. - * Uses Svelte snippets for flexible content rendering. - * - * **Features:** - * - Search/filter input with clear on close - * - Keyboard navigation support - * - Custom trigger, content, and footer via snippets - * - Empty state message - * - Disabled state - * - Configurable alignment and width - * - * @example - * ```svelte - * - * {#snippet trigger()}{/snippet} - * {#snippet children()}{#each items as item}{/each}{/snippet} - * - * ``` - */ -export { default as DropdownMenuSearchable } from './DropdownMenuSearchable.svelte'; - -/** - * **DropdownMenuActions** - Multi-action dropdown menu - * - * Dropdown menu for multiple action options with icons and shortcuts. - * Supports destructive variants and keyboard shortcut hints. - * - * **Features:** - * - Configurable trigger icon with tooltip - * - Action items with icons and labels - * - Destructive variant styling - * - Keyboard shortcut display - * - Separator support between groups - * - * @example - * ```svelte - * - * ``` - */ -export { default as DropdownMenuActions } from './DropdownMenuActions.svelte'; - -/** - * - * BUTTONS & ACTIONS - * - * Small interactive components for user actions. - * - */ - -/** Styled button for action triggers with icon support. */ -export { default as ActionButton } from './ActionButton.svelte'; - -/** Copy-to-clipboard button with success feedback. */ -export { default as CopyToClipboardIcon } from './CopyToClipboardIcon.svelte'; - -/** Remove/delete button with X icon. */ -export { default as RemoveButton } from './RemoveButton.svelte'; - -/** - * - * BADGES & INDICATORS - * - * Small visual indicators for status and metadata. - * - */ - -/** Badge displaying chat statistics (tokens, timing). */ -export { default as BadgeChatStatistic } from './BadgeChatStatistic.svelte'; - -/** Generic info badge with optional tooltip and click handler. */ -export { default as BadgeInfo } from './BadgeInfo.svelte'; - -/** Badge indicating model modality (vision, audio, tools). */ -export { default as BadgeModality } from './BadgeModality.svelte'; - -/** - * - * FORMS & INPUTS - * - * Form-related utility components. - * - */ - -/** - * **SearchInput** - Search field with clear button - * - * Input field optimized for search with clear button and keyboard handling. - * Supports placeholder, autofocus, and change callbacks. - */ -export { default as SearchInput } from './SearchInput.svelte'; - -/** - * **KeyValuePairs** - Editable key-value list - * - * Dynamic list of key-value pairs with add/remove functionality. - * Used for HTTP headers, metadata, and configuration. - * - * **Features:** - * - Add new pairs with button - * - Remove individual pairs - * - Customizable placeholders and labels - * - Empty state message - * - Auto-resize value textarea - */ -export { default as KeyValuePairs } from './KeyValuePairs.svelte'; - /** * **ConversationSelection** - Multi-select conversation picker * @@ -260,14 +28,3 @@ export { default as KeyValuePairs } from './KeyValuePairs.svelte'; * - Mode-specific UI (export vs import) */ export { default as ConversationSelection } from './ConversationSelection.svelte'; - -/** - * - * KEYBOARD & SHORTCUTS - * - * Components for displaying keyboard shortcuts. - * - */ - -/** Display for keyboard shortcut hints (e.g., "⌘ + Enter"). */ -export { default as KeyboardShortcutInfo } from './KeyboardShortcutInfo.svelte'; diff --git a/tools/server/webui/src/lib/components/app/misc/DropdownMenuActions.svelte b/tools/server/webui/src/lib/components/app/navigation/DropdownMenuActions.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/DropdownMenuActions.svelte rename to tools/server/webui/src/lib/components/app/navigation/DropdownMenuActions.svelte diff --git a/tools/server/webui/src/lib/components/app/misc/DropdownMenuSearchable.svelte b/tools/server/webui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/DropdownMenuSearchable.svelte rename to tools/server/webui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte diff --git a/tools/server/webui/src/lib/components/app/navigation/index.ts b/tools/server/webui/src/lib/components/app/navigation/index.ts new file mode 100644 index 0000000000..6a8a99c627 --- /dev/null +++ b/tools/server/webui/src/lib/components/app/navigation/index.ts @@ -0,0 +1,63 @@ +/** + * + * NAVIGATION & MENUS + * + * Components for dropdown menus and action selection. + * + */ + +/** + * **DropdownMenuSearchable** - Filterable dropdown menu + * + * Generic dropdown with search input for filtering options. + * Uses Svelte snippets for flexible content rendering. + * + * **Features:** + * - Search/filter input with clear on close + * - Keyboard navigation support + * - Custom trigger, content, and footer via snippets + * - Empty state message + * - Disabled state + * - Configurable alignment and width + * + * @example + * ```svelte + * + * {#snippet trigger()}{/snippet} + * {#snippet children()}{#each items as item}{/each}{/snippet} + * + * ``` + */ +export { default as DropdownMenuSearchable } from './DropdownMenuSearchable.svelte'; + +/** + * **DropdownMenuActions** - Multi-action dropdown menu + * + * Dropdown menu for multiple action options with icons and shortcuts. + * Supports destructive variants and keyboard shortcut hints. + * + * **Features:** + * - Configurable trigger icon with tooltip + * - Action items with icons and labels + * - Destructive variant styling + * - Keyboard shortcut display + * - Separator support between groups + * + * @example + * ```svelte + * + * ``` + */ +export { default as DropdownMenuActions } from './DropdownMenuActions.svelte';