bhetherman/open-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-15 23:21:06 -04:00
parent f7af03ff26
commit ee000c503c
7 changed files with 382 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Chat.svelte
+12 -85
View File
@@ -107,8 +107,6 @@
import EventConfirmDialog from '../common/ConfirmDialog.svelte';
import DeleteConfirmDialog from '../common/ConfirmDialog.svelte';
import WebSearchConfirmDialog from '../common/ConfirmDialog.svelte';
import Dropdown from '../common/Dropdown.svelte';
import DropdownMenu from '../common/DropdownMenu.svelte';
import Placeholder from './Placeholder.svelte';
import FilesOverlay from './MessageInput/FilesOverlay.svelte';
import NotificationToast from '../NotificationToast.svelte';
@@ -118,9 +116,7 @@
import Sidebar from '../icons/Sidebar.svelte';
import Image from '../common/Image.svelte';
import XMark from '../icons/XMark.svelte';
import EditPencilIcon from '../layout/Sidebar/icons/EditPencil.svelte';
import ChevronRight from '../icons/ChevronRight.svelte';
import EmbeddedChatHistoryItem from './EmbeddedChatHistoryItem.svelte';
import EmbeddedChatHistoryDropdown from './EmbeddedChatHistoryDropdown.svelte';
export let chatIdProp = '';
export let embedded = false;
@@ -146,9 +142,6 @@
'Extract action items from this note.',
'Rewrite the selected text.'
];
let showEmbeddedChatHistory = false;
let embeddedChatOptionsId = '';
let deletingEmbeddedChatId = '';
const eventTarget = new EventTarget();
let controlPane: Pane | undefined;
@@ -402,7 +395,7 @@
};
const withSelectedText = (text: string) =>
embedded && selectedText?.trim()
? `${text}\n\nSelected note text:\n${selectedText.trim()}`
? `${text}\n\nSelected note text for replace_note_content operations:\n${selectedText.trim()}`
: text;
const noteChatDebug = (message: string, data: Record<string, unknown> = {}) => {
if (!embedded) return;
@@ -3622,82 +3615,16 @@
class="h-10 shrink-0 flex items-center justify-between gap-2 border-b border-gray-50/80 px-3 text-gray-700 dark:border-gray-850/40 dark:text-gray-200"
>
<div class="flex min-w-0 items-center gap-2">
<Dropdown
bind:show={showEmbeddedChatHistory}
align="start"
sideOffset={6}
closeOnOutsideClick={embeddedChatOptionsId === ''}
onOpenChange={(state) => {
if (!state) embeddedChatOptionsId = '';
}}
>
<button
type="button"
class="group flex min-w-0 items-center gap-1 text-[13px] font-normal text-gray-600 transition hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
aria-label={$i18n.t('Chat history')}
>
<span class="min-w-0 truncate">{embeddedHeaderTitle}</span>
<ChevronRight
className="size-3.5 shrink-0 text-gray-400/70 opacity-0 transition-opacity group-hover:opacity-100 dark:text-gray-500/70"
strokeWidth="2"
/>
</button>
<div slot="content">
<DropdownMenu
className="min-w-56 max-w-72 max-h-80 overflow-y-auto scrollbar-hidden"
>
{#if onNewEmbeddedChat && Object.keys(history?.messages ?? {}).length > 0 && !loading}
<button
type="button"
class="text-left"
on:click={async () => {
showEmbeddedChatHistory = false;
await onNewEmbeddedChat?.();
}}
>
<EditPencilIcon className="size-3.5" strokeWidth="1.5" />
<span class="min-w-0 truncate">{$i18n.t('New chat')}</span>
</button>
<hr class="border-gray-100/70 dark:border-gray-800/60" />
{/if}
{#if embeddedChats.length > 0}
{#each embeddedChats as item}
<EmbeddedChatHistoryItem
{item}
title={item?.id === $chatId
? embeddedHeaderTitle
: item?.title || item?.chat?.title || $i18n.t('Chat')}
selected={item.id === $chatId}
deleting={deletingEmbeddedChatId === item.id}
onSelect={async () => {
showEmbeddedChatHistory = false;
await onSelectEmbeddedChat?.(item.id);
}}
onDelete={async (id) => {
if (!id || deletingEmbeddedChatId) return;
deletingEmbeddedChatId = id;
embeddedChatOptionsId = '';
try {
await onDeleteEmbeddedChat?.(id);
} finally {
deletingEmbeddedChatId = '';
}
}}
onMenuOpenChange={(id, state) => {
embeddedChatOptionsId = state ? id : '';
}}
/>
{/each}
{:else}
<div class="px-2 py-1.5 text-[13px] text-gray-400 dark:text-gray-500">
{$i18n.t('No chat history')}
</div>
{/if}
</DropdownMenu>
</div>
</Dropdown>
<EmbeddedChatHistoryDropdown
title={embeddedHeaderTitle}
chats={embeddedChats}
canCreateNew={!!onNewEmbeddedChat &&
Object.keys(history?.messages ?? {}).length > 0}
{loading}
onNewChat={onNewEmbeddedChat}
onSelectChat={onSelectEmbeddedChat}
onDeleteChat={onDeleteEmbeddedChat}
/>
</div>
<Tooltip content={$i18n.t('Close')} placement="bottom">
<button
src/lib/components/chat/EmbeddedChatHistoryDropdown.svelte
+101
View File
@@ -0,0 +1,101 @@
<script lang="ts">
import { getContext } from 'svelte';
import { chatId } from '$lib/stores';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
import EditPencilIcon from '$lib/components/layout/Sidebar/icons/EditPencil.svelte';
import EmbeddedChatHistoryItem from './EmbeddedChatHistoryItem.svelte';
const i18n = getContext('i18n');
export let title = '';
export let chats = [];
export let canCreateNew = false;
export let loading = false;
export let onNewChat: (() => void | Promise<void>) | null = null;
export let onSelectChat: ((chatId: string) => void | Promise<void>) | null = null;
export let onDeleteChat: ((chatId: string) => void | Promise<void>) | null = null;
let show = false;
let optionsChatId = '';
let deletingChatId = '';
</script>
<Dropdown
bind:show
align="start"
sideOffset={6}
closeOnOutsideClick={optionsChatId === ''}
onOpenChange={(state) => {
if (!state) optionsChatId = '';
}}
>
<button
type="button"
class="group flex min-w-0 items-center gap-1 text-[13px] font-normal text-gray-600 transition hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
aria-label={$i18n.t('Chat history')}
>
<span class="min-w-0 truncate">{title}</span>
<ChevronRight
className="size-3.5 shrink-0 text-gray-400/70 opacity-0 transition-opacity group-hover:opacity-100 dark:text-gray-500/70"
strokeWidth="2"
/>
</button>
<div slot="content">
<DropdownMenu className="min-w-56 max-w-72 max-h-80 overflow-y-auto scrollbar-hidden">
{#if canCreateNew && !loading}
<button
type="button"
class="text-left"
on:click={async () => {
show = false;
await onNewChat?.();
}}
>
<EditPencilIcon className="size-3.5" strokeWidth="1.5" />
<span class="min-w-0 truncate">{$i18n.t('New chat')}</span>
</button>
<hr class="border-gray-100/70 dark:border-gray-800/60" />
{/if}
{#if chats.length > 0}
{#each chats as item}
<EmbeddedChatHistoryItem
{item}
title={item?.id === $chatId
? title
: item?.title || item?.chat?.title || $i18n.t('Chat')}
selected={item.id === $chatId}
deleting={deletingChatId === item.id}
onSelect={async () => {
show = false;
await onSelectChat?.(item.id);
}}
onDelete={async (id) => {
if (!id || deletingChatId) return;
deletingChatId = id;
optionsChatId = '';
try {
await onDeleteChat?.(id);
} finally {
deletingChatId = '';
}
}}
onMenuOpenChange={(id, state) => {
optionsChatId = state ? id : '';
}}
/>
{/each}
{:else}
<div class="px-2 py-1.5 text-[13px] text-gray-400 dark:text-gray-500">
{$i18n.t('No chat history')}
</div>
{/if}
</DropdownMenu>
</div>
</Dropdown>
src/lib/components/chat/EmbeddedChatHistoryItem.svelte
+15 -9
View File
@@ -21,14 +21,16 @@
let showMenu = false;
</script>
<button
type="button"
class="group/item flex h-8 w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[13px] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 {selected
<div
class="group/item flex h-[1.6875rem] w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[13px] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 [&_button:hover]:bg-transparent! dark:[&_button:hover]:bg-transparent! {selected
? 'bg-gray-50/70 dark:bg-gray-800/60'
: ''}"
on:click={() => onSelect(item.id)}
>
<div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
<button
type="button"
class="flex h-full min-w-0 flex-1 items-center gap-2 overflow-hidden p-0 text-left outline-hidden"
on:click={() => onSelect(item.id)}
>
<div class="min-w-0 truncate">{title}</div>
{#if selected}
@@ -36,9 +38,13 @@
{$i18n.t('Current')}
</div>
{/if}
</div>
</button>
<div class="ml-auto flex shrink-0 items-center gap-1.5 pl-2">
<div
class="{showMenu
? 'visible'
: 'invisible group-hover/item:visible'} ml-auto flex shrink-0 items-center gap-1.5 pl-2"
>
<Dropdown
bind:show={showMenu}
align="end"
@@ -52,7 +58,7 @@
<button
type="button"
aria-label={$i18n.t('More Options')}
class="flex"
class="flex size-5 items-center justify-center self-center transition dark:hover:text-white"
on:click={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -85,4 +91,4 @@
</div>
</Dropdown>
</div>
</button>
</div>