refac: styling

backend/open_webui/models/chats.py

@@ -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)
                 )
 

src/app.css

@@ -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;

src/lib/components/notes/AIMenu.svelte

@@ -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>

src/lib/components/notes/NoteEditor.svelte

@@ -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>

src/lib/components/notes/NotePanel.svelte

@@ -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>

src/lib/components/notes/RecordMenu.svelte

@@ -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>