ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-13 04:45:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refac: styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-07-12 22:14:41 +04:00
parent 60fb643109
commit 12edc3221e
6 changed files with 91 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
backend/open_webui/models/chats.py
View file

@ -67,6 +67,7 @@ class ChatModel(BaseModel):
class ChatForm(BaseModel):
chat: dict
folder_id: Optional[str] = None
class ChatImportForm(ChatForm):
@ -121,6 +122,7 @@ class ChatTable:
else "New Chat"
),
"chat": form_data.chat,
"folder_id": form_data.folder_id,
"created_at": int(time.time()),
"updated_at": int(time.time()),
}
@ -639,8 +641,7 @@ class ChatTable:
sqlite_content_clause = text(sqlite_content_sql)
query = query.filter(
or_(
Chat.title.ilike(bindparam('title_key')),
sqlite_content_clause
Chat.title.ilike(bindparam("title_key")), sqlite_content_clause
).params(title_key=f"%{search_text}%", content_key=search_text)
)
@ -686,8 +687,8 @@ class ChatTable:
postgres_content_clause = text(postgres_content_sql)
query = query.filter(
or_(
Chat.title.ilike(bindparam('title_key')),
postgres_content_clause
Chat.title.ilike(bindparam("title_key")),
postgres_content_clause,
).params(title_key=f"%{search_text}%", content_key=search_text)
)

4
src/app.css
View file

@ -475,7 +475,7 @@ input[type='number'] {
pointer-events: none;
}
.tiptap > pre > code {
.tiptap pre > code {
border-radius: 0.4rem;
font-size: 0.85rem;
padding: 0.25em 0.3em;
@ -483,7 +483,7 @@ input[type='number'] {
@apply dark:bg-gray-800 bg-gray-50;
}
.tiptap > pre {
.tiptap pre {
border-radius: 0.5rem;
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;

62
src/lib/components/notes/AIMenu.svelte Normal file
View file

@ -0,0 +1,62 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { createEventDispatcher, getContext, onMount } from 'svelte';
import { showSettings, mobile, showSidebar, user } from '$lib/stores';
import { fade, slide } from 'svelte/transition';
import PencilSquare from '../icons/PencilSquare.svelte';
import ChatBubbleOval from '../icons/ChatBubbleOval.svelte';
const i18n = getContext('i18n');
export let show = false;
export let className = 'max-w-[170px]';
export let onEdit = () => {};
export let onChat = () => {};
export let onChange = () => {};
</script>
<DropdownMenu.Root bind:open={show} onOpenChange={onChange}>
<DropdownMenu.Trigger>
<slot />
</DropdownMenu.Trigger>
<slot name="content">
<DropdownMenu.Content
class="w-full {className} text-sm rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
sideOffset={8}
side="bottom"
align="start"
transition={(e) => fade(e, { duration: 100 })}
>
<button
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
on:click={async () => {
onEdit();
show = false;
}}
>
<div class=" self-center mr-2">
<PencilSquare className="size-4" strokeWidth="2" />
</div>
<div class=" self-center truncate">{$i18n.t('Edit Note')}</div>
</button>
<button
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
on:click={() => {
onChat();
show = false;
}}
>
<div class=" self-center mr-2">
<ChatBubbleOval className="size-4" strokeWidth="2" />
</div>
<div class=" self-center truncate">{$i18n.t('Chat')}</div>
</button>
</DropdownMenu.Content>
</slot>
</DropdownMenu.Root>

44
src/lib/components/notes/NoteEditor.svelte
View file

@ -80,6 +80,7 @@
import Sidebar from '../common/Sidebar.svelte';
import ArrowRight from '../icons/ArrowRight.svelte';
import Cog6 from '../icons/Cog6.svelte';
import AiMenu from './AIMenu.svelte';
export let id: null | string = null;
@ -1005,8 +1006,8 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
</div>
{/if}
</div>
<div class="absolute z-20 bottom-0 right-0 p-3.5 max-w-full w-full flex justify-end">
<div class="flex gap-1 justify-between w-full max-w-full">
<div class="absolute z-20 bottom-0 right-0 p-3.5 max-w-full w-full flex">
<div class="flex gap-1 w-full min-w-full justify-between">
{#if recording}
<div class="flex-1 w-full">
<VoiceRecording
@ -1077,33 +1078,17 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
}}
>
<Tooltip content={$i18n.t('Record')} placement="top">
<button
<div
class="cursor-pointer p-2.5 flex rounded-full border border-gray-50 bg-white dark:border-none dark:bg-gray-850 hover:bg-gray-50 dark:hover:bg-gray-800 transition shadow-xl"
type="button"
>
<MicSolid className="size-4.5" />
</button>
</div>
</Tooltip>
</RecordMenu>
<div
class="cursor-pointer flex gap-0.5 rounded-full border border-gray-50 dark:border-gray-850 dark:bg-gray-850 transition shadow-xl"
>
<!-- <Tooltip content={$i18n.t('My Notes')} placement="top">
<button
class="p-2 size-8.5 flex justify-center items-center {selectedVersion === 'note'
? 'bg-gray-100 dark:bg-gray-800 '
: ' hover:bg-gray-50 dark:hover:bg-gray-800'} rounded-full transition shrink-0"
type="button"
on:click={() => {
selectedVersion = 'note';
versionToggleHandler();
}}
>
<Bars3BottomLeft />
</button>
</Tooltip> -->
<Tooltip content={$i18n.t('Enhance')} placement="top">
{#if editing}
<button
@ -1116,16 +1101,21 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
<Spinner className="size-5" />
</button>
{:else}
<button
class="p-2.5 flex justify-center items-center hover:bg-gray-50 dark:hover:bg-gray-800 rounded-full transition shrink-0"
on:click={() => {
<AiMenu
onEdit={() => {
enhanceNoteHandler();
}}
disabled={editing}
type="button"
onChat={() => {
showPanel = true;
selectedPanel = 'chat';
}}
>
<SparklesSolid />
</button>
<div
class="cursor-pointer p-2.5 flex rounded-full border border-gray-50 bg-white dark:border-none dark:bg-gray-850 hover:bg-gray-50 dark:hover:bg-gray-800 transition shadow-xl"
>
<SparklesSolid />
</div>
</AiMenu>
{/if}
</Tooltip>
</div>

4
src/lib/components/notes/NotePanel.svelte
View file

@ -78,7 +78,7 @@
{/if}
{:else if show}
<PaneResizer
class="relative flex w-2 items-center justify-center bg-background group bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-100 dark:border-gray-850"
class="relative flex w-2 items-center justify-center bg-background group bg-white dark:shadow-lg dark:bg-gray-850 border-l border-gray-50 dark:border-gray-850"
>
<div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs">
<EllipsisVertical className="size-4 invisible group-hover:visible" />
@ -98,7 +98,7 @@
{#if show}
<div class="flex max-h-full min-h-full">
<div
class="w-full pl-1.5 pr-2.5 pt-2 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-100 dark:border-gray-850 z-40 pointer-events-auto overflow-y-auto scrollbar-hidden flex flex-col"
class="w-full pl-1.5 pr-2.5 pt-2 bg-white dark:shadow-lg dark:bg-gray-850 z-40 pointer-events-auto overflow-y-auto scrollbar-hidden flex flex-col"
>
<slot />
</div>

6
src/lib/components/notes/RecordMenu.svelte
View file

@ -48,7 +48,7 @@
}}
>
<div class=" self-center mr-2">
<Mic className="size-5" strokeWidth="1.5" />
<Mic className="size-4" strokeWidth="2" />
</div>
<div class=" self-center truncate">{$i18n.t('Record')}</div>
</button>
@ -61,7 +61,7 @@
}}
>
<div class=" self-center mr-2">
<CursorArrowRays className="size-5" strokeWidth="1.5" />
<CursorArrowRays className="size-4" strokeWidth="2" />
</div>
<div class=" self-center truncate">{$i18n.t('Capture Audio')}</div>
</button>
@ -74,7 +74,7 @@
}}
>
<div class=" self-center mr-2">
<CloudArrowUp className="size-5" strokeWidth="1.5" />
<CloudArrowUp className="size-4" strokeWidth="2" />
</div>
<div class=" self-center truncate">{$i18n.t('Upload Audio')}</div>
</button>