webui: Add setting to have full height Code Blocks in Chat Messages (#19829)

diff --git a/tools/server/public/index.html.gz b/tools/server/public/index.html.gz
index 2ead90dfbc2c1cc331ec0b946fa8a124d401a97e..e508a15081d275df54160f6c4ffc919a54abe996 100644 (file)
Binary files a/tools/server/public/index.html.gz and b/tools/server/public/index.html.gz differ

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
index c3cb8343fc23109058de3b62fbd09594b4b7c444..2130658dda50f31a12dbea5b14f5f621d010eb1c 100644 (file)
--- a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
@@ -114,6 +114,11 @@
                                        label: 'Render user content as Markdown',
                                        type: SettingsFieldType.CHECKBOX
                                },
+                               {
+                                       key: SETTINGS_KEYS.FULL_HEIGHT_CODE_BLOCKS,
+                                       label: 'Use full height code blocks',
+                                       type: SettingsFieldType.CHECKBOX
+                               },
                                {
                                        key: SETTINGS_KEYS.DISABLE_AUTO_SCROLL,
                                        label: 'Disable automatic scroll',

diff --git a/tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte b/tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte
index 0bc69a739f797173753cd50abaf0e893281e050a..a0944e18a07ff285a9e2ee6d33ee7c4024c6022e 100644 (file)
--- a/tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte
+++ b/tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte
@@ -38,6 +38,8 @@
        import { ActionIconsCodeBlock, DialogCodePreview } from '$lib/components/app';
        import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
        import type { DatabaseMessageExtra } from '$lib/types/database';
+       import { config } from '$lib/stores/settings.svelte';
+       import { SETTINGS_KEYS } from '$lib/constants/settings-keys';
 
        interface Props {
                attachments?: DatabaseMessageExtra[];
@@ -593,7 +595,12 @@
        });
 </script>
 
-<div bind:this={containerRef} class={className}>
+<div
+       bind:this={containerRef}
+       class="{className}{config()[SETTINGS_KEYS.FULL_HEIGHT_CODE_BLOCKS]
+               ? ' full-height-code-blocks'
+               : ''}"
+>
        {#each renderedBlocks as block (block.id)}
                <div class="markdown-block" data-block-id={block.id}>
                        <!-- eslint-disable-next-line no-at-html-tags -->
@@ -914,6 +921,16 @@
                line-height: 1.3;
        }
 
+       .full-height-code-blocks :global(.code-block-wrapper) {
+               max-height: none;
+       }
+
+       .full-height-code-blocks :global(.code-block-scroll-container),
+       .full-height-code-blocks .streaming-code-scroll-container {
+               max-height: none;
+               overflow-y: visible;
+       }
+
        div :global(.code-block-header) {
                display: flex;
                justify-content: space-between;

diff --git a/tools/server/webui/src/lib/constants/settings-config.ts b/tools/server/webui/src/lib/constants/settings-config.ts
index 6f6dbea2ec107039527959249f2a3750b4f2bb9b..00dac3d6e9a6ed12b4b52c32b7ae2d312a4f3df3 100644 (file)
--- a/tools/server/webui/src/lib/constants/settings-config.ts
+++ b/tools/server/webui/src/lib/constants/settings-config.ts
@@ -22,6 +22,7 @@ export const SETTING_CONFIG_DEFAULT: Record<string, string | number | boolean> =
        alwaysShowSidebarOnDesktop: false,
        autoShowSidebarOnNewChat: true,
        autoMicOnEmpty: false,
+       fullHeightCodeBlocks: false,
        // make sure these default values are in sync with `common.h`
        samplers: 'top_k;typ_p;top_p;min_p;temperature',
        backend_sampling: false,
@@ -113,6 +114,8 @@ export const SETTING_CONFIG_INFO: Record<string, string> = {
                'Automatically show sidebar when starting a new chat. Disable to keep the sidebar hidden until you click on it.',
        autoMicOnEmpty:
                'Automatically show microphone button instead of send button when textarea is empty for models with audio modality support.',
+       fullHeightCodeBlocks:
+               'Always display code blocks at their full natural height, overriding any height limits.',
        pyInterpreterEnabled:
                'Enable Python interpreter using Pyodide. Allows running Python code in markdown code blocks.',
        enableContinueGeneration:

diff --git a/tools/server/webui/src/lib/constants/settings-keys.ts b/tools/server/webui/src/lib/constants/settings-keys.ts
index 63960d4d5679d00b51325d8807591abee76e3444..38de41ffee37dee5309e099ac8e44b6c58a05f8f 100644 (file)
--- a/tools/server/webui/src/lib/constants/settings-keys.ts
+++ b/tools/server/webui/src/lib/constants/settings-keys.ts
@@ -23,6 +23,7 @@ export const SETTINGS_KEYS = {
        DISABLE_AUTO_SCROLL: 'disableAutoScroll',
        ALWAYS_SHOW_SIDEBAR_ON_DESKTOP: 'alwaysShowSidebarOnDesktop',
        AUTO_SHOW_SIDEBAR_ON_NEW_CHAT: 'autoShowSidebarOnNewChat',
+       FULL_HEIGHT_CODE_BLOCKS: 'fullHeightCodeBlocks',
        // Sampling
        TEMPERATURE: 'temperature',
        DYNATEMP_RANGE: 'dynatemp_range',