ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-16 06:15:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refac

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-09-18 21:25:26 -05:00
parent 07c5b25bc8
commit a5d8882bba
3 changed files with 217 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/lib/components/chat/Chat.svelte
View file

@ -465,6 +465,15 @@
return; return;
} }
if (event.data.type === 'action:submit') {
console.debug(event.data.text);
if (prompt !== '') {
await tick();
submitPrompt(prompt);
}
}
// Replace with your iframe's origin // Replace with your iframe's origin
if (event.data.type === 'input:prompt') { if (event.data.type === 'input:prompt') {
console.debug(event.data.text); console.debug(event.data.text);
@ -477,15 +486,6 @@
} }
} }
if (event.data.type === 'action:submit') {
console.debug(event.data.text);
if (prompt !== '') {
await tick();
submitPrompt(prompt);
}
}
if (event.data.type === 'input:prompt:submit') { if (event.data.type === 'input:prompt:submit') {
console.debug(event.data.text); console.debug(event.data.text);

195
src/lib/components/common/Collapsible.svelte
View file

@ -89,6 +89,124 @@
</script> </script>
<div {id} class={className}> <div {id} class={className}>
{#if attributes?.type === 'tool_calls'}
{@const args = decode(attributes?.arguments)}
{@const result = decode(attributes?.result ?? '')}
{@const files = parseJSONString(decode(attributes?.files ?? ''))}
{@const embeds = parseJSONString(decode(attributes?.embeds ?? ''))}
{#if embeds && Array.isArray(embeds) && embeds.length > 0}
<div class="py-1 w-full cursor-pointer">
<div class=" w-full text-xs text-gray-500">
<div class="">
{attributes.name}
</div>
</div>
{#each embeds as embed, idx}
<div class="my-2" id={`${collapsibleId}-tool-calls-${attributes?.id}-embed-${idx}`}>
<FullHeightIframe
src={embed}
allowScripts={true}
allowForms={true}
allowSameOrigin={true}
allowPopups={true}
/>
</div>
{/each}
</div>
{:else}
<div
class="{buttonClassName} cursor-pointer"
on:pointerup={() => {
if (!disabled) {
open = !open;
}
}}
>
<div
class=" w-full font-medium flex items-center justify-between gap-2 {attributes?.done &&
attributes?.done !== 'true'
? 'shimmer'
: ''}
"
>
{#if attributes?.done && attributes?.done !== 'true'}
<div>
<Spinner className="size-4" />
</div>
{/if}
<div class="">
{#if attributes?.done === 'true'}
<Markdown
id={`${collapsibleId}-tool-calls-${attributes?.id}`}
content={$i18n.t('View Result from **{{NAME}}**', {
NAME: attributes.name
})}
/>
{:else}
<Markdown
id={`${collapsibleId}-tool-calls-${attributes?.id}-executing`}
content={$i18n.t('Executing **{{NAME}}**...', {
NAME: attributes.name
})}
/>
{/if}
</div>
<div class="flex self-center translate-y-[1px]">
{#if open}
<ChevronUp strokeWidth="3.5" className="size-3.5" />
{:else}
<ChevronDown strokeWidth="3.5" className="size-3.5" />
{/if}
</div>
</div>
</div>
{#if !grow}
{#if open && !hide}
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
{#if attributes?.type === 'tool_calls'}
{#if attributes?.done === 'true'}
<Markdown
id={`${collapsibleId}-tool-calls-${attributes?.id}-result`}
content={`> \`\`\`json
> ${formatJSONString(args)}
> ${formatJSONString(result)}
> \`\`\``}
/>
{:else}
<Markdown
id={`${collapsibleId}-tool-calls-${attributes?.id}-result`}
content={`> \`\`\`json
> ${formatJSONString(args)}
> \`\`\``}
/>
{/if}
{:else}
<slot name="content" />
{/if}
</div>
{/if}
{#if attributes?.done === 'true'}
{#if typeof files === 'object'}
{#each files ?? [] as file, idx}
{#if file.startsWith('data:image/')}
<Image
id={`${collapsibleId}-tool-calls-${attributes?.id}-result-${idx}`}
src={file}
alt="Image"
/>
{/if}
{/each}
{/if}
{/if}
{/if}
{/if}
{:else}
{#if title !== null} {#if title !== null}
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
@ -136,22 +254,6 @@
{:else} {:else}
{$i18n.t('Analyzing...')} {$i18n.t('Analyzing...')}
{/if} {/if}
{:else if attributes?.type === 'tool_calls'}
{#if attributes?.done === 'true'}
<Markdown
id={`${collapsibleId}-tool-calls-${attributes?.id}`}
content={$i18n.t('View Result from **{{NAME}}**', {
NAME: attributes.name
})}
/>
{:else}
<Markdown
id={`${collapsibleId}-tool-calls-${attributes?.id}-executing`}
content={$i18n.t('Executing **{{NAME}}**...', {
NAME: attributes.name
})}
/>
{/if}
{:else} {:else}
{title} {title}
{/if} {/if}
@ -211,71 +313,12 @@
</div> </div>
{/if} {/if}
{#if attributes?.type === 'tool_calls'}
{@const args = decode(attributes?.arguments)}
{@const result = decode(attributes?.result ?? '')}
{@const files = parseJSONString(decode(attributes?.files ?? ''))}
{@const embeds = parseJSONString(decode(attributes?.embeds ?? ''))}
{#if embeds && Array.isArray(embeds) && embeds.length > 0}
{#each embeds as embed, idx}
<div class="my-2" id={`${collapsibleId}-tool-calls-${attributes?.id}-embed-${idx}`}>
<FullHeightIframe
src={embed}
allowScripts={true}
allowForms={$settings?.iframeSandboxAllowForms ?? false}
allowSameOrigin={$settings?.iframeSandboxAllowSameOrigin ?? false}
allowPopups={$settings?.iframeSandboxAllowPopups ?? false}
/>
</div>
{/each}
{/if}
{#if !grow} {#if !grow}
{#if open && !hide}
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
{#if attributes?.type === 'tool_calls'}
{#if attributes?.done === 'true'}
<Markdown
id={`${collapsibleId}-tool-calls-${attributes?.id}-result`}
content={`> \`\`\`json
> ${formatJSONString(args)}
> ${formatJSONString(result)}
> \`\`\``}
/>
{:else}
<Markdown
id={`${collapsibleId}-tool-calls-${attributes?.id}-result`}
content={`> \`\`\`json
> ${formatJSONString(args)}
> \`\`\``}
/>
{/if}
{:else}
<slot name="content" />
{/if}
</div>
{/if}
{#if attributes?.done === 'true'}
{#if typeof files === 'object'}
{#each files ?? [] as file, idx}
{#if file.startsWith('data:image/')}
<Image
id={`${collapsibleId}-tool-calls-${attributes?.id}-result-${idx}`}
src={file}
alt="Image"
/>
{/if}
{/each}
{/if}
{/if}
{/if}
{:else if !grow}
{#if open && !hide} {#if open && !hide}
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}> <div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
<slot name="content" /> <slot name="content" />
</div> </div>
{/if} {/if}
{/if} {/if}
{/if}
</div> </div>

66
src/lib/components/common/FullHeightIframe.svelte
View file

@ -4,7 +4,8 @@
// Props // Props
export let src: string | null = null; // URL or raw HTML (auto-detected) export let src: string | null = null; // URL or raw HTML (auto-detected)
export let title = 'Embedded Content'; export let title = 'Embedded Content';
export let initialHeight = 400; // fallback height if we can't measure export let initialHeight: number | null = null; // initial height in px, null = auto
export let allowScripts = true; export let allowScripts = true;
export let allowForms = false; export let allowForms = false;
@ -33,13 +34,14 @@
// Detect URL vs raw HTML and prep src/srcdoc // Detect URL vs raw HTML and prep src/srcdoc
$: isUrl = typeof src === 'string' && /^(https?:)?\/\//i.test(src); $: isUrl = typeof src === 'string' && /^(https?:)?\/\//i.test(src);
$: iframeSrc = isUrl ? (src as string) : null; $: iframeSrc = isUrl ? (src as string) : null;
$: iframeDoc = !isUrl && src ? ensureAutosizer(src) : null; $: iframeDoc = !isUrl ? src : null;
// Try to measure same-origin content safely // Try to measure same-origin content safely
function resizeSameOrigin() { function resizeSameOrigin() {
if (!iframe) return; if (!iframe) return;
try { try {
const doc = iframe.contentDocument || iframe.contentWindow?.document; const doc = iframe.contentDocument || iframe.contentWindow?.document;
console.log('iframe doc:', doc);
if (!doc) return; if (!doc) return;
const h = Math.max(doc.documentElement?.scrollHeight ?? 0, doc.body?.scrollHeight ?? 0); const h = Math.max(doc.documentElement?.scrollHeight ?? 0, doc.body?.scrollHeight ?? 0);
if (h > 0) iframe.style.height = h + 20 + 'px'; if (h > 0) iframe.style.height = h + 20 + 'px';
@ -57,6 +59,11 @@
} }
} }
// When the iframe loads, try same-origin resize (cross-origin will noop)
function onLoad() {
requestAnimationFrame(resizeSameOrigin);
}
// Ensure event listener bound only while component lives // Ensure event listener bound only while component lives
onMount(() => { onMount(() => {
window.addEventListener('message', onMessage); window.addEventListener('message', onMessage);
@ -65,52 +72,6 @@
onDestroy(() => { onDestroy(() => {
window.removeEventListener('message', onMessage); window.removeEventListener('message', onMessage);
}); });
// When the iframe loads, try same-origin resize (cross-origin will noop)
function onLoad() {
// schedule after layout
requestAnimationFrame(resizeSameOrigin);
}
/**
* If user passes raw HTML, we inject a tiny autosizer that posts height.
* This helps both same-origin and "about:srcdoc" cases.
* (No effect if the caller already includes their own autosizer.)
*/
function ensureAutosizer(html: string): string {
const hasOurHook = /iframe:height/.test(html) || /postMessage\(.+height/i.test(html);
if (hasOurHook) return html;
// This script uses ResizeObserver to post the document height
const autosizer = `
<script>
(function () {
function send() {
try {
var h = Math.max(
document.documentElement.scrollHeight || 0,
document.body ? document.body.scrollHeight : 0
);
parent.postMessage({ type: 'iframe:height', height: h + 20 }, '*');
} catch (e) {}
}
var ro = new ResizeObserver(function(){ send(); });
ro.observe(document.documentElement);
window.addEventListener('load', send);
// Also observe body if present
if (document.body) ro.observe(document.body);
// Periodic guard in case of late content
setTimeout(send, 0);
setTimeout(send, 250);
setTimeout(send, 1000);
})();
<\/script>`;
// inject before </body> if present, else append
return (
html.replace(/<\/body\s*>/i, autosizer + '</body>') +
(/<\/body\s*>/i.test(html) ? '' : autosizer)
);
}
</script> </script>
{#if iframeDoc} {#if iframeDoc}
@ -118,12 +79,11 @@
bind:this={iframe} bind:this={iframe}
srcdoc={iframeDoc} srcdoc={iframeDoc}
{title} {title}
class="w-full rounded-xl" class="w-full rounded-2xl"
style={`height:${initialHeight}px;`} style={`${initialHeight ? `height:${initialHeight}px;` : ''}`}
width="100%" width="100%"
frameborder="0" frameborder="0"
{sandbox} {sandbox}
referrerpolicy={referrerPolicy}
{allowFullscreen} {allowFullscreen}
on:load={onLoad} on:load={onLoad}
/> />
@ -132,8 +92,8 @@
bind:this={iframe} bind:this={iframe}
src={iframeSrc} src={iframeSrc}
{title} {title}
class="w-full rounded-xl" class="w-full rounded-2xl"
style={`height:${initialHeight}px;`} style={`${initialHeight ? `height:${initialHeight}px;` : ''}`}
width="100%" width="100%"
frameborder="0" frameborder="0"
{sandbox} {sandbox}