ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-14 21:35:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-09-15 14:55:05 -05:00
parent 596be451ec
commit c744ae0d63
5 changed files with 52 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/app.css
View file

@ -70,23 +70,23 @@ textarea::placeholder {
} }
.input-prose { .input-prose {
@apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-1 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5 whitespace-pre-line; @apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-50 prose-hr:dark:border-gray-850 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-1 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5 whitespace-pre-line;
} }
.input-prose-sm { .input-prose-sm {
@apply prose dark:prose-invert prose-headings:font-medium prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-1 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-1 whitespace-pre-line text-sm; @apply prose dark:prose-invert prose-headings:font-medium prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-hr:my-4 prose-hr:border-gray-50 prose-hr:dark:border-gray-850 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-1 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-1 whitespace-pre-line text-sm;
} }
.markdown-prose { .markdown-prose {
@apply prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line; @apply prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-50 prose-hr:dark:border-gray-850 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
} }
.markdown-prose-sm { .markdown-prose-sm {
@apply text-sm prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-2 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line; @apply text-sm prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-2 prose-hr:border-gray-50 prose-hr:dark:border-gray-850 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
} }
.markdown-prose-xs { .markdown-prose-xs {
@apply text-xs prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-0.5 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line; @apply text-xs prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-0.5 prose-hr:border-gray-50 prose-hr:dark:border-gray-850 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
} }
.markdown a { .markdown a {

63
src/lib/components/chat/Messages/CodeBlock.svelte
View file

@ -40,7 +40,7 @@
export let code = ''; export let code = '';
export let attributes = {}; export let attributes = {};
export let className = 'my-2'; export let className = 'mb-2';
export let editorClassName = ''; export let editorClassName = '';
export let stickyButtonsClassName = 'top-0'; export let stickyButtonsClassName = 'top-0';
@ -416,11 +416,14 @@
</script> </script>
<div> <div>
<div class="relative {className} flex flex-col rounded-xl pt-2" dir="ltr"> <div
class="relative {className} flex flex-col rounded-3xl border border-gray-100 dark:border-gray-850 my-0.5"
dir="ltr"
>
{#if lang === 'mermaid'} {#if lang === 'mermaid'}
{#if mermaidHtml} {#if mermaidHtml}
<SvgPanZoom <SvgPanZoom
className=" border border-gray-100 dark:border-gray-850 rounded-xl max-h-fit overflow-hidden" className=" rounded-3xl max-h-fit overflow-hidden"
svg={mermaidHtml} svg={mermaidHtml}
content={_token.text} content={_token.text}
/> />
@ -428,16 +431,16 @@
<pre class="mermaid">{code}</pre> <pre class="mermaid">{code}</pre>
{/if} {/if}
{:else} {:else}
<div class="text-text-300 absolute pl-4 text-xs font-medium dark:text-white">
{lang}
</div>
<div <div
class="sticky {stickyButtonsClassName} mb-1 pr-2.5 flex items-center justify-end z-10 text-xs text-black dark:text-white" class="sticky {stickyButtonsClassName} left-0 right-0 py-2 pr-3 flex items-center justify-between w-full z-10 text-xs text-black dark:text-white"
> >
<div class="text-text-300 pl-4.5 text-xs font-medium dark:text-white">
{lang}
</div>
<div class="flex items-center gap-0.5"> <div class="flex items-center gap-0.5">
<button <button
class="flex gap-1 items-center bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5" class="flex gap-1 items-center bg-none border-none transition rounded-md px-1.5 py-0.5"
on:click={collapseCodeBlock} on:click={collapseCodeBlock}
> >
<div class=" -translate-y-[0.5px]"> <div class=" -translate-y-[0.5px]">
@ -449,21 +452,6 @@
</div> </div>
</button> </button>
{#if preview && ['html', 'svg'].includes(lang)}
<button
class="flex gap-1 items-center run-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5"
on:click={previewCode}
>
<div class=" -translate-y-[0.5px]">
<Cube className="size-3" />
</div>
<div>
{$i18n.t('Preview')}
</div>
</button>
{/if}
{#if ($config?.features?.enable_code_execution ?? true) && (lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code)))} {#if ($config?.features?.enable_code_execution ?? true) && (lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code)))}
{#if executing} {#if executing}
<div class="run-code-button bg-none border-none p-1 cursor-not-allowed"> <div class="run-code-button bg-none border-none p-1 cursor-not-allowed">
@ -471,7 +459,7 @@
</div> </div>
{:else if run} {:else if run}
<button <button
class="flex gap-1 items-center run-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5" class="flex gap-1 items-center run-code-button bg-none border-none transition rounded-md px-1.5 py-0.5"
on:click={async () => { on:click={async () => {
code = _code; code = _code;
await tick(); await tick();
@ -491,7 +479,7 @@
{#if save} {#if save}
<button <button
class="save-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5" class="save-code-button bg-none border-none transition rounded-md px-1.5 py-0.5"
on:click={saveCode} on:click={saveCode}
> >
{saved ? $i18n.t('Saved') : $i18n.t('Save')} {saved ? $i18n.t('Saved') : $i18n.t('Save')}
@ -499,20 +487,31 @@
{/if} {/if}
<button <button
class="copy-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5" class="copy-code-button bg-none border-none transition rounded-md px-1.5 py-0.5"
on:click={copyCode}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button on:click={copyCode}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button
> >
{#if preview && ['html', 'svg'].includes(lang)}
<button
class="flex gap-1 items-center run-code-button bg-none border-none transition rounded-md px-1.5 py-0.5"
on:click={previewCode}
>
<div>
{$i18n.t('Preview')}
</div>
</button>
{/if}
</div> </div>
</div> </div>
<div <div
class="language-{lang} rounded-t-xl -mt-8 {editorClassName class="language-{lang} rounded-t-3xl -mt-9 {editorClassName
? editorClassName ? editorClassName
: executing || stdout || stderr || result : executing || stdout || stderr || result
? '' ? ''
: 'rounded-b-xl'} overflow-hidden" : 'rounded-b-3xl'} overflow-hidden"
> >
<div class=" pt-8 bg-gray-50 dark:bg-black"></div> <div class=" pt-8 bg-white dark:bg-black"></div>
{#if !collapsed} {#if !collapsed}
{#if edit} {#if edit}
@ -542,7 +541,7 @@
{/if} {/if}
{:else} {:else}
<div <div
class="bg-gray-50 dark:bg-black dark:text-white rounded-b-xl! pt-2 pb-2 px-4 flex flex-col gap-2 text-xs" class="bg-gray-50 dark:bg-black dark:text-white rounded-b-3xl! pb-3 px-4 flex flex-col gap-2 text-xs"
> >
<span class="text-gray-500 italic"> <span class="text-gray-500 italic">
{$i18n.t('{{COUNT}} hidden lines', { {$i18n.t('{{COUNT}} hidden lines', {
@ -561,7 +560,7 @@
{#if executing || stdout || stderr || result || files} {#if executing || stdout || stderr || result || files}
<div <div
class="bg-gray-50 dark:bg-black dark:text-white rounded-b-xl! py-4 px-4 flex flex-col gap-2" class="bg-gray-50 dark:bg-black dark:text-white rounded-b-3xl! py-4 px-4 flex flex-col gap-2"
> >
{#if executing} {#if executing}
<div class=" "> <div class=" ">

2
src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
View file

@ -109,7 +109,7 @@
{save} {save}
{preview} {preview}
edit={editCodeBlock} edit={editCodeBlock}
stickyButtonsClassName={topPadding ? 'top-8' : 'top-0'} stickyButtonsClassName={topPadding ? 'top-6' : 'top-0'}
onSave={(value) => { onSave={(value) => {
onSave({ onSave({
raw: token.raw, raw: token.raw,

2
src/lib/components/common/SVGPanZoom.svelte
View file

@ -53,7 +53,7 @@
</div> </div>
{#if content} {#if content}
<div class=" absolute top-1 right-1"> <div class=" absolute top-2.5 right-2.5">
<div class="flex gap-1"> <div class="flex gap-1">
<Tooltip content={$i18n.t('Download as SVG')}> <Tooltip content={$i18n.t('Download as SVG')}>
<button <button

28
src/lib/components/layout/Navbar/Menu.svelte
View file

@ -282,7 +282,7 @@
transition={flyAndScale} transition={flyAndScale}
> >
<!-- <DropdownMenu.Item <!-- <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer dark:hover:bg-gray-800 rounded-lg" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer dark:hover:bg-gray-800 rounded-xl"
on:click={async () => { on:click={async () => {
await showSettings.set(!$showSettings); await showSettings.set(!$showSettings);
}} }}
@ -311,7 +311,7 @@
{#if $mobile} {#if $mobile}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
id="chat-controls-button" id="chat-controls-button"
on:click={async () => { on:click={async () => {
await showControls.set(true); await showControls.set(true);
@ -319,13 +319,13 @@
await showArtifacts.set(false); await showArtifacts.set(false);
}} }}
> >
<AdjustmentsHorizontal className=" size-4" strokeWidth="0.5" /> <AdjustmentsHorizontal className=" size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Controls')}</div> <div class="flex items-center">{$i18n.t('Controls')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
id="chat-overview-button" id="chat-overview-button"
on:click={async () => { on:click={async () => {
await showControls.set(true); await showControls.set(true);
@ -338,7 +338,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
id="chat-overview-button" id="chat-overview-button"
on:click={async () => { on:click={async () => {
await showControls.set(true); await showControls.set(true);
@ -354,7 +354,7 @@
{#if !$temporaryChatEnabled && ($user?.role === 'admin' || ($user.permissions?.chat?.share ?? true))} {#if !$temporaryChatEnabled && ($user?.role === 'admin' || ($user.permissions?.chat?.share ?? true))}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
id="chat-share-button" id="chat-share-button"
on:click={() => { on:click={() => {
shareHandler(); shareHandler();
@ -367,7 +367,7 @@
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
> >
<Download strokeWidth="1.5" /> <Download strokeWidth="1.5" />
@ -380,7 +380,7 @@
> >
{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)} {#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
on:click={() => { on:click={() => {
downloadJSONExport(); downloadJSONExport();
}} }}
@ -389,7 +389,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
on:click={() => { on:click={() => {
downloadTxt(); downloadTxt();
}} }}
@ -398,7 +398,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
on:click={() => { on:click={() => {
downloadPdf(); downloadPdf();
}} }}
@ -409,7 +409,7 @@
</DropdownMenu.Sub> </DropdownMenu.Sub>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
id="chat-copy-button" id="chat-copy-button"
on:click={async () => { on:click={async () => {
const res = await copyToClipboard(await getChatAsText()).catch((e) => { const res = await copyToClipboard(await getChatAsText()).catch((e) => {
@ -430,7 +430,7 @@
{#if chat?.id} {#if chat?.id}
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
> >
<Folder strokeWidth="1.5" /> <Folder strokeWidth="1.5" />
@ -443,7 +443,7 @@
> >
{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder} {#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
moveChatHandler(chat?.id, folder?.id); moveChatHandler(chat?.id, folder?.id);
}} }}
@ -458,7 +458,7 @@
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
archiveChatHandler(); archiveChatHandler();
}} }}