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

refac: styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-07-07 19:56:31 +04:00
parent d04d0c0510
commit 8cd7de3740
4 changed files with 37 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app.css
View file

@ -76,8 +76,12 @@ textarea::placeholder {
@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;
}
.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;
}
.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 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-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;
}
.markdown a {

8
src/lib/components/notes/NoteEditor/Chat.svelte
View file

@ -129,17 +129,9 @@
if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
continue;
} else {
if (textareaElement) {
textareaElement.style.height = textareaElement.scrollHeight + 'px';
}
responseMessage.content += data.choices[0].delta.content ?? '';
messages = messages;
if (textareaElement) {
textareaElement.style.height = textareaElement.scrollHeight + 'px';
}
await tick();
}
}

49
src/lib/components/notes/NoteEditor/Chat/Message.svelte
View file

@ -4,29 +4,35 @@
const i18n = getContext('i18n');
import Skeleton from '$lib/components/chat/Messages/Skeleton.svelte';
import Markdown from '$lib/components/chat/Messages/Markdown.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte';
import Textarea from '$lib/components/common/Textarea.svelte';
export let message;
export let idx;
export let onDelete;
export let onEdit;
let textAreaElement: HTMLTextAreaElement;
onMount(() => {
if (textAreaElement) {
textAreaElement.style.height = '';
textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
}
});
</script>
<div class="flex flex-col gap-1 group">
<div class="flex items-center justify-between pt-1 px-2">
<div class="flex items-center justify-between pt-1">
<div class="py-1 text-sm font-semibold uppercase min-w-[6rem] text-left rounded-lg transition">
{$i18n.t(message.role)}
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<button
class=" text-transparent group-hover:text-gray-500 dark:hover:text-gray-300 transition"
on:click={() => {
onEdit();
}}
>
<Pencil className="size-3.5" strokeWidth="2" />
</button>
<button
class=" text-transparent group-hover:text-gray-500 dark:hover:text-gray-300 transition"
on:click={() => {
@ -56,30 +62,21 @@
<!-- $i18n.t('an assistant') -->
{#if !(message?.done ?? true) && message?.content === ''}
<div class="px-2">
<div class="">
<Skeleton size="sm" />
</div>
{:else}
<textarea
id="{message.role}-{idx}-textarea"
bind:this={textAreaElement}
class="w-full bg-transparent outline-hidden rounded-lg px-2 text-sm resize-none overflow-hidden"
{:else if message?.edit === true}
<Textarea
class="w-full bg-transparent outline-hidden rounded-lg text-sm resize-none overflow-hidden"
placeholder={$i18n.t(`Enter {{role}} message here`, {
role: message.role === 'user' ? $i18n.t('a user') : $i18n.t('an assistant')
})}
rows="1"
on:input={(e) => {
textAreaElement.style.height = '';
textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
}}
on:focus={(e) => {
textAreaElement.style.height = '';
textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
// e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
}}
bind:value={message.content}
/>
{:else}
<div class=" markdown-prose-sm">
<Markdown id={`note-message-${idx}`} content={message.content} />
</div>
{/if}
</div>
</div>

10
src/lib/components/notes/NoteEditor/Chat/Messages.svelte
View file

@ -7,11 +7,19 @@
export let messages = [];
</script>
<div class="space-y-3 pb-20">
<div class="space-y-3 pb-12">
{#each messages as message, idx}
<Message
{message}
{idx}
onEdit={() => {
messages = messages.map((msg, messageIdx) => {
if (messageIdx === idx) {
return { ...msg, edit: true };
}
return msg;
});
}}
onDelete={() => {
messages = messages.filter((message, messageIdx) => messageIdx !== idx);
}}