happyz
/
llama.cpp
mirror of https://github.com/ggerganov/llama.cpp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: Improve styling and overflow handling for ChatMessageMcpPromptContent

This commit is contained in:
Aleksander Grygier 2026-01-27 11:56:02 +01:00
parent 8ca3ffa076
commit 8a8cd78237
1 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte
View File

@ -103,9 +103,7 @@
let isAttachment = $derived(variant === McpPromptVariant.ATTACHMENT);
let textSizeClass = $derived(isAttachment ? 'text-sm' : 'text-md');
let maxHeightStyle = $derived(
isAttachment
? 'max-height: 10rem; overflow-wrap: anywhere; word-break: break-word;'
: 'max-height: var(--max-message-height); overflow-wrap: anywhere; word-break: break-word;'
isAttachment ? 'max-height: 10rem;' : 'max-height: var(--max-message-height);'
);
</script>
@ -148,39 +146,51 @@
{#if loadError}
<Card
class="relative overflow-y-auto rounded-[1.125rem] border border-destructive/50 bg-destructive/10 px-3.75 py-2.5 backdrop-blur-md"
style={maxHeightStyle}
class="relative overflow-hidden rounded-[1.125rem] border border-destructive/50 bg-destructive/10 backdrop-blur-md"
>
<span class="{textSizeClass} text-destructive">{loadError}</span>
<div
class="overflow-y-auto px-3.75 py-2.5"
style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
>
<span class="{textSizeClass} text-destructive">{loadError}</span>
</div>
</Card>
{:else if isLoading}
<Card
class="relative overflow-y-auto rounded-[1.125rem] border border-purple-200 bg-purple-500/10 px-3.75 py-2.5 text-foreground backdrop-blur-md dark:border-purple-800 dark:bg-purple-500/20"
style={maxHeightStyle}
class="relative overflow-hidden rounded-[1.125rem] border border-purple-200 bg-purple-500/10 text-foreground backdrop-blur-md dark:border-purple-800 dark:bg-purple-500/20"
>
<span class="{textSizeClass} text-purple-500 italic dark:text-purple-400">
Loading prompt content...
</span>
<div
class="overflow-y-auto px-3.75 py-2.5"
style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
>
<span class="{textSizeClass} text-purple-500 italic dark:text-purple-400">
Loading prompt content...
</span>
</div>
</Card>
{:else if hasContent}
<Card
class="relative overflow-y-auto rounded-[1.125rem] border border-purple-200 bg-purple-500/10 px-3.75 py-2.5 text-foreground backdrop-blur-md dark:border-purple-800 dark:bg-purple-500/20"
style={maxHeightStyle}
class="relative overflow-hidden rounded-[1.125rem] border border-purple-200 bg-purple-500/10 py-0 text-foreground backdrop-blur-md dark:border-purple-800 dark:bg-purple-500/20"
>
<span class="{textSizeClass} whitespace-pre-wrap">
<!-- This formatting is needed to keep the text in proper shape -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
{#each contentParts as part, i (i)}{#if part.argKey}<span
class="rounded-sm bg-purple-300/50 px-0.5 text-purple-900 transition-opacity dark:bg-purple-700/50 dark:text-purple-100 {hoveredArgKey &&
hoveredArgKey !== part.argKey
? 'opacity-30'
: ''}"
onmouseenter={() => (hoveredArgKey = part.argKey)}
onmouseleave={() => (hoveredArgKey = null)}>{part.text}</span
>{:else}<span class="transition-opacity {hoveredArgKey ? 'opacity-30' : ''}"
>{part.text}</span
>{/if}{/each}</span
<div
class="overflow-y-auto px-3.75 py-2.5"
style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
>
<span class="{textSizeClass} whitespace-pre-wrap">
<!-- This formatting is needed to keep the text in proper shape -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
{#each contentParts as part, i (i)}{#if part.argKey}<span
class="rounded-sm bg-purple-300/50 px-0.5 text-purple-900 transition-opacity dark:bg-purple-700/50 dark:text-purple-100 {hoveredArgKey &&
hoveredArgKey !== part.argKey
? 'opacity-30'
: ''}"
onmouseenter={() => (hoveredArgKey = part.argKey)}
onmouseleave={() => (hoveredArgKey = null)}>{part.text}</span
>{:else}<span class="transition-opacity {hoveredArgKey ? 'opacity-30' : ''}"
>{part.text}</span
>{/if}{/each}</span
>
</div>
</Card>
{/if}
</div>