Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-02-15 22:49:56 -06:00
parent e10e7d056e
commit d215e46315
2 changed files with 61 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Messages/CodeBlock.svelte
+9 -9
View File
@@ -417,13 +417,13 @@
<div>
<div
class="relative {className} flex flex-col rounded-3xl border border-gray-100/30 dark:border-gray-850/30 my-0.5"
class="relative {className} flex flex-col rounded-2xl border border-gray-100/30 dark:border-gray-850/30 my-0.5"
dir="ltr"
>
{#if ['mermaid', 'vega', 'vega-lite'].includes(lang)}
{#if renderHTML}
<SvgPanZoom
className=" rounded-3xl max-h-fit overflow-hidden"
className=" rounded-2xl max-h-fit overflow-hidden"
svg={renderHTML}
content={_token.text}
/>
@@ -441,13 +441,13 @@
{/if}
{:else}
<div
class="absolute left-0 right-0 py-2.5 pr-3 text-text-300 pl-4.5 text-xs font-medium dark:text-white"
class="absolute left-0 right-0 py-1.5 pr-3 text-text-300 pl-4.5 text-xs font-medium dark:text-white"
>
{lang}
</div>
<div
class="sticky {stickyButtonsClassName} left-0 right-0 py-2 pr-3 flex items-center justify-end w-full z-10 text-xs text-black dark:text-white"
class="sticky {stickyButtonsClassName} left-0 right-0 py-1.5 pr-3 flex items-center justify-end w-full z-10 text-xs text-black dark:text-white"
>
<div class="flex items-center gap-0.5">
<button
@@ -514,13 +514,13 @@
</div>
<div
class="language-{lang} rounded-t-3xl -mt-9 {editorClassName
class="language-{lang} rounded-t-2xl -mt-8 {editorClassName
? editorClassName
: executing || stdout || stderr || result
? ''
: 'rounded-b-3xl'} overflow-hidden"
: 'rounded-b-2xl'} overflow-hidden"
>
<div class=" pt-8 bg-white dark:bg-black"></div>
<div class=" pt-6.5 bg-white dark:bg-black"></div>
{#if !collapsed}
{#if edit}
@@ -550,7 +550,7 @@
{/if}
{:else}
<div
class="bg-white dark:bg-black dark:text-white rounded-b-3xl! pt-0.5 pb-3 px-4 flex flex-col gap-2 text-xs"
class="bg-white dark:bg-black dark:text-white rounded-b-2xl! pt-0.5 pb-3 px-4 flex flex-col gap-2 text-xs"
>
<span class="text-gray-500 italic">
{$i18n.t('{{COUNT}} hidden lines', {
@@ -569,7 +569,7 @@
{#if executing || stdout || stderr || result || files}
<div
class="bg-gray-50 dark:bg-black dark:text-white rounded-b-3xl! py-4 px-4 flex flex-col gap-2"
class="bg-gray-50 dark:bg-black dark:text-white rounded-b-2xl! py-4 px-4 flex flex-col gap-2"
>
{#if executing}
<div class=" ">
src/lib/components/common/ToolCallDisplay.svelte
+52 -30
View File
@@ -12,6 +12,8 @@
import ChevronDown from '../icons/ChevronDown.svelte';
import Spinner from './Spinner.svelte';
import Markdown from '../chat/Messages/Markdown.svelte';
import WrenchSolid from '../icons/WrenchSolid.svelte';
import CheckCircle from '../icons/CheckCircle.svelte';
import Image from './Image.svelte';
import FullHeightIframe from './FullHeightIframe.svelte';
@@ -45,20 +47,16 @@
function formatJSONString(str: string) {
try {
const parsed = parseJSONString(str);
// If parsed is an object/array, then it's valid JSON
if (typeof parsed === 'object') {
return JSON.stringify(parsed, null, 2);
} else {
// It's a primitive value like a number, boolean, etc.
return `${JSON.stringify(String(parsed))}`;
}
} catch (e) {
// Not valid JSON, return as-is
return str;
}
}
// Decode and parse attributes
$: args = decode(attributes?.arguments ?? '');
$: result = decode(attributes?.result ?? '');
$: files = parseJSONString(decode(attributes?.files ?? ''));
@@ -72,11 +70,8 @@
<!-- Embed Mode: Show iframes without collapsible behavior -->
<div class="py-1 w-full cursor-pointer">
<div class="w-full text-xs text-gray-500">
<div class="">
{attributes.name}
</div>
{attributes.name}
</div>
{#each embeds as embed, idx}
<div class="my-2" id={`${componentId}-tool-call-embed-${idx}`}>
<FullHeightIframe
@@ -91,24 +86,31 @@
{/each}
</div>
{:else}
<!-- Standard collapsible tool call display -->
<!-- Tool call display -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="{buttonClassName} cursor-pointer"
on:pointerup={() => {
open = !open;
}}
>
<div
class="w-full font-medium flex items-center justify-between gap-2 {isExecuting
? 'shimmer'
: ''}"
>
<div class="w-full font-medium flex items-center gap-1.5 {isExecuting ? 'shimmer' : ''}">
<!-- Status icon -->
{#if isExecuting}
<div>
<Spinner className="size-4" />
</div>
{:else if isDone}
<div class="text-emerald-500 dark:text-emerald-400">
<CheckCircle className="size-4" strokeWidth="2" />
</div>
{:else}
<div class="text-gray-400 dark:text-gray-500">
<WrenchSolid className="size-3.5" />
</div>
{/if}
<!-- Label -->
<div class="">
{#if isDone}
<Markdown
@@ -127,6 +129,7 @@
{/if}
</div>
<!-- Chevron -->
<div class="flex self-center translate-y-[1px]">
{#if open}
<ChevronUp strokeWidth="3.5" className="size-3.5" />
@@ -139,22 +142,41 @@
{#if open}
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
{#if isDone}
<Markdown
id={`${componentId}-tool-call-result`}
content={`> \`\`\`json
> ${formatJSONString(args)}
> ${formatJSONString(result)}
> \`\`\``}
/>
{:else}
<Markdown
id={`${componentId}-tool-call-args`}
content={`> \`\`\`json
> ${formatJSONString(args)}
> \`\`\``}
/>
{/if}
<div class="border border-gray-50 dark:border-gray-850/30 rounded-2xl my-1.5 p-3 space-y-3">
<!-- Input -->
{#if args}
<div>
<div
class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 dark:text-gray-500 mb-1.5 px-1"
>
{$i18n.t('Input')}
</div>
<div class="tool-call-body w-full max-w-none!">
<Markdown
id={`${componentId}-tool-call-args`}
content={`\`\`\`json\n${formatJSONString(args)}\n\`\`\``}
/>
</div>
</div>
{/if}
<!-- Output -->
{#if isDone && result}
<div>
<div
class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 dark:text-gray-500 mb-1.5 px-1"
>
{$i18n.t('Output')}
</div>
<div class="w-full max-w-none!">
<Markdown
id={`${componentId}-tool-call-result`}
content={`\`\`\`json\n${formatJSONString(result)}\n\`\`\``}
/>
</div>
</div>
{/if}
</div>
</div>
{/if}
{/if}