OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-25 09:47:41 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac: artifacts styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-04-12 17:01:45 -07:00
parent 540c27c589
commit af0d99b2a3
1 changed files with 107 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/lib/components/chat/Artifacts.svelte
View File

@ -184,12 +184,11 @@
</script> </script>
<div class=" w-full h-full relative flex flex-col bg-gray-50 dark:bg-gray-850"> <div class=" w-full h-full relative flex flex-col bg-gray-50 dark:bg-gray-850">
<div class="w-full h-full flex-1 relative"> <div class="w-full h-full flex flex-col flex-1 relative">
{#if overlay} {#if contents.length > 0}
<div class=" absolute top-0 left-0 right-0 bottom-0 z-10"></div> <div
{/if} class="pointer-events-auto z-20 flex justify-between items-center p-2.5 font-primar text-gray-900 dark:text-white"
>
<div class="absolute pointer-events-none z-50 w-full flex items-center justify-start p-4">
<button <button
class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850" class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
on:click={() => { on:click={() => {
@ -198,52 +197,8 @@
> >
<ArrowLeft className="size-3.5 text-gray-900 dark:text-white" /> <ArrowLeft className="size-3.5 text-gray-900 dark:text-white" />
</button> </button>
</div>
<div class=" absolute pointer-events-none z-50 w-full flex items-center justify-end p-4"> <div class="flex-1 flex items-center justify-between">
<button
class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
on:click={() => {
dispatch('close');
showControls.set(false);
showArtifacts.set(false);
}}
>
<XMark className="size-3.5 text-gray-900 dark:text-white" />
</button>
</div>
<div class="flex-1 w-full h-full">
<div class=" h-full flex flex-col">
{#if contents.length > 0}
<div class="max-w-full w-full h-full">
{#if contents[selectedContentIdx].type === 'iframe'}
<iframe
bind:this={iframeElement}
title="Content"
srcdoc={contents[selectedContentIdx].content}
class="w-full border-0 h-full rounded-none"
sandbox="allow-scripts allow-forms allow-same-origin"
on:load={iframeLoadHandler}
></iframe>
{:else if contents[selectedContentIdx].type === 'svg'}
<SvgPanZoom
className=" w-full h-full max-h-full overflow-hidden"
svg={contents[selectedContentIdx].content}
/>
{/if}
</div>
{:else}
<div class="m-auto font-medium text-xs text-gray-900 dark:text-white">
{$i18n.t('No HTML, CSS, or JavaScript content found.')}
</div>
{/if}
</div>
</div>
</div>
{#if contents.length > 0}
<div class="flex justify-between items-center p-2.5 font-primar text-gray-900 dark:text-white">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr"> <div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr">
<button <button
@ -287,7 +242,11 @@
stroke-width="2.5" stroke-width="2.5"
class="size-3.5" class="size-3.5"
> >
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /> <path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
/>
</svg> </svg>
</button> </button>
</div> </div>
@ -318,5 +277,50 @@
{/if} {/if}
</div> </div>
</div> </div>
<button
class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
on:click={() => {
dispatch('close');
showControls.set(false);
showArtifacts.set(false);
}}
>
<XMark className="size-3.5 text-gray-900 dark:text-white" />
</button>
</div>
{/if}
{#if overlay}
<div class=" absolute top-0 left-0 right-0 bottom-0 z-10"></div>
{/if}
<div class="flex-1 w-full h-full">
<div class=" h-full flex flex-col">
{#if contents.length > 0}
<div class="max-w-full w-full h-full">
{#if contents[selectedContentIdx].type === 'iframe'}
<iframe
bind:this={iframeElement}
title="Content"
srcdoc={contents[selectedContentIdx].content}
class="w-full border-0 h-full rounded-none"
sandbox="allow-scripts allow-forms allow-same-origin"
on:load={iframeLoadHandler}
></iframe>
{:else if contents[selectedContentIdx].type === 'svg'}
<SvgPanZoom
className=" w-full h-full max-h-full overflow-hidden"
svg={contents[selectedContentIdx].content}
/>
{/if} {/if}
</div> </div>
{:else}
<div class="m-auto font-medium text-xs text-gray-900 dark:text-white">
{$i18n.t('No HTML, CSS, or JavaScript content found.')}
</div>
{/if}
</div>
</div>
</div>
</div>