ewilliams28/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-08-28 00:14:53 -06:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-15 21:43:47 -04:00
parent 4d11553a6b
commit 423cafd4e7
21 changed files with 803 additions and 1158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/open_webui/models/chats.py
+17
View File
@@ -412,6 +412,23 @@ class ChatTable:
)
return list(result.scalars().all())
async def get_internal_chat_by_note_id(
self, note_id: str, user_id: str, db: AsyncSession | None = None
) -> ChatModel | None:
async with get_async_db_context(db) as session:
result = await session.execute(
select(Chat)
.where(
Chat.user_id == user_id,
Chat.meta['internal'].as_boolean().is_(True),
Chat.meta['type'].as_string() == 'note',
Chat.meta['note_id'].as_string() == note_id,
)
.order_by(Chat.created_at.asc())
)
chat = result.scalars().first()
return ChatModel.model_validate(chat) if chat else None
def _chat_import_form_to_chat_model(self, user_id: str, form_data: ChatImportForm) -> ChatModel:
id = str(uuid.uuid4())
chat = ChatModel(
backend/open_webui/routers/notes.py
+98
View File
@@ -1,6 +1,7 @@
import json
import logging
from typing import Optional
from uuid import uuid4
from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException, Request, status
from open_webui.config import (
@@ -12,6 +13,7 @@ from open_webui.constants import ERROR_MESSAGES
from open_webui.events import EVENTS, publish_event
from open_webui.internal.db import get_async_session
from open_webui.models.access_grants import AccessGrants
from open_webui.models.chats import ChatForm, ChatResponse, Chats
from open_webui.models.config import Config
from open_webui.models.groups import Groups
from open_webui.models.notes import (
@@ -45,6 +47,39 @@ def _truncate_note_data(data: Optional[dict], max_length: int = 1000) -> Optiona
return {'content': {'md': md[:max_length]}}
def _note_chat_system_prompt(note_id: str) -> str:
return (
f'You are chatting with note {note_id}. Use view_note with this note id to read the current note. '
'For edits, use replace_note_content for whole-note changes or replace_note_text '
'for targeted exact text replacement.'
)
async def _normalize_note_chat_payload(chat: ChatResponse, note_id: str, db: AsyncSession) -> ChatResponse:
payload = {**(chat.chat or {})}
params = {**(payload.get('params') or {})}
changed = False
if params.pop('note_id', None) is not None:
changed = True
system = _note_chat_system_prompt(note_id)
if params.get('system') != system:
params['system'] = system
changed = True
if payload.pop('system', None) is not None:
changed = True
payload['params'] = params
if changed:
updated_chat = await Chats.update_chat_by_id(chat.id, payload, db=db, touch=False)
if updated_chat:
return updated_chat
return chat
############################
# GetNotes
############################
@@ -303,6 +338,69 @@ async def get_note_by_id(
)
@router.get('/{id}/chat', response_model=ChatResponse)
async def get_note_chat_by_id(
request: Request,
id: str,
user=Depends(get_verified_user),
db: AsyncSession = Depends(get_async_session),
):
log.info('[note-chat] get-or-create requested note_id=%s user_id=%s', id, user.id)
if user.role != 'admin' and not await has_permission(
user.id, 'features.notes', await Config.get('user.permissions'), db=db
):
raise HTTPException(
status_code=status.HTTP_401_UNAUTHORIZED,
detail=ERROR_MESSAGES.UNAUTHORIZED,
)
note = await Notes.get_note_by_id(id, db=db)
if not note:
raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND)
if user.role != 'admin' and (
user.id != note.user_id
and not await AccessGrants.has_access(
user_id=user.id,
resource_type='note',
resource_id=note.id,
permission='read',
db=db,
)
):
raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT())
chat = await Chats.get_internal_chat_by_note_id(note.id, user.id, db=db)
if chat:
log.info('[note-chat] reusing hidden chat note_id=%s chat_id=%s user_id=%s', note.id, chat.id, user.id)
return await _normalize_note_chat_payload(chat, note.id, db)
meta = {'internal': True, 'type': 'note', 'note_id': note.id}
chat_id = str(uuid4())
chat = await Chats.insert_new_chat(
chat_id,
user.id,
ChatForm(
chat={
'id': chat_id,
'title': 'Chat',
'models': [''],
'params': {'system': _note_chat_system_prompt(note.id)},
'history': {'messages': {}, 'currentId': None},
'messages': [],
'tags': [],
}
),
db=db,
internal_meta=meta,
)
if not chat:
log.error('[note-chat] failed creating hidden chat note_id=%s user_id=%s', note.id, user.id)
raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail=ERROR_MESSAGES.DEFAULT())
log.info('[note-chat] created hidden chat note_id=%s chat_id=%s user_id=%s', note.id, chat.id, user.id)
return chat
############################
# UpdateNoteById
############################
backend/open_webui/tools/builtin.py
+125 -14
View File
@@ -49,6 +49,8 @@ from open_webui.routers.memories import (
add_memory as _add_memory,
)
from open_webui.routers.retrieval import search_web as _search_web
from open_webui.events import EVENTS, publish_event
from open_webui.socket.main import sio
from open_webui.utils.sanitize import sanitize_code
log = logging.getLogger(__name__)
@@ -56,6 +58,33 @@ log = logging.getLogger(__name__)
MAX_KNOWLEDGE_BASE_SEARCH_ITEMS = 10_000
async def _has_write_access_to_note(note, user_id: str) -> bool:
if note.user_id == user_id:
return True
from open_webui.models.access_grants import AccessGrants
user_group_ids = [group.id for group in await Groups.get_groups_by_member_id(user_id)]
return await AccessGrants.has_access(
user_id=user_id,
resource_type='note',
resource_id=note.id,
permission='write',
user_group_ids=set(user_group_ids),
)
async def _emit_note_updated(request: Request, user: dict, note) -> None:
await sio.emit('note-events', note.model_dump(), to=f'note:{note.id}')
await publish_event(
request,
EVENTS.NOTE_UPDATED,
actor=user,
subject_id=note.id,
data={'title': note.title},
)
async def _has_read_access_to_file(
file,
user_id: str,
@@ -1155,23 +1184,21 @@ async def replace_note_content(
if not note:
return json.dumps({'error': 'Note not found'})
# Check write permission
user_id = __user__.get('id')
user_group_ids = [group.id for group in await Groups.get_groups_by_member_id(user_id)]
from open_webui.models.access_grants import AccessGrants
if note.user_id != user_id and not await AccessGrants.has_access(
user_id=user_id,
resource_type='note',
resource_id=note.id,
permission='write',
user_group_ids=set(user_group_ids),
):
if not await _has_write_access_to_note(note, user_id):
return json.dumps({'error': 'Write access denied'})
# Build update form
update_data = {'data': {'content': {'md': content}}}
update_data = {
'data': {
**(note.data or {}),
'content': {
**((note.data or {}).get('content') or {}),
'json': None,
'html': '',
'md': content,
},
}
}
if title:
update_data['title'] = title
@@ -1181,6 +1208,8 @@ async def replace_note_content(
if not updated_note:
return json.dumps({'error': 'Failed to update note'})
await _emit_note_updated(__request__, __user__, updated_note)
return json.dumps(
{
'status': 'success',
@@ -1195,6 +1224,88 @@ async def replace_note_content(
return json.dumps({'error': str(e)})
async def replace_note_text(
note_id: str,
target_text: str,
replacement_text: str,
title: Optional[str] = None,
__request__: Request = None,
__user__: dict = None,
) -> str:
"""
Replace an exact text span in a note when it occurs exactly once.
:param note_id: The ID of the note to update
:param target_text: Exact text to replace
:param replacement_text: Replacement text
:param title: Optional new title for the note
:return: JSON with success status or a clear match-count error
"""
if __request__ is None:
return json.dumps({'error': 'Request context not available'})
if not __user__:
return json.dumps({'error': 'User context not available'})
try:
from open_webui.models.notes import NoteUpdateForm
note = await Notes.get_note_by_id(note_id)
if not note:
return json.dumps({'error': 'Note not found'})
user_id = __user__.get('id')
if not await _has_write_access_to_note(note, user_id):
return json.dumps({'error': 'Write access denied'})
if target_text == '':
return json.dumps({'error': 'target_text must not be empty'})
content = ((note.data or {}).get('content') or {}).get('md') or ''
match_count = content.count(target_text)
if match_count != 1:
return json.dumps(
{
'error': 'target_text must occur exactly once',
'match_count': match_count,
},
ensure_ascii=False,
)
update_data = {
'data': {
**(note.data or {}),
'content': {
**((note.data or {}).get('content') or {}),
'json': None,
'html': '',
'md': content.replace(target_text, replacement_text, 1),
},
}
}
if title:
update_data['title'] = title
updated_note = await Notes.update_note_by_id(note_id, NoteUpdateForm(**update_data))
if not updated_note:
return json.dumps({'error': 'Failed to update note'})
await _emit_note_updated(__request__, __user__, updated_note)
return json.dumps(
{
'status': 'success',
'id': updated_note.id,
'title': updated_note.title,
'updated_at': updated_note.updated_at,
},
ensure_ascii=False,
)
except Exception as e:
log.exception(f'replace_note_text error: {e}')
return json.dumps({'error': str(e)})
# =============================================================================
# CHATS TOOLS
# =============================================================================
backend/open_webui/utils/middleware.py
+1
View File
@@ -1881,6 +1881,7 @@ def apply_params_to_form_data(form_data, model):
'reasoning_tags': list,
'compact_token_threshold': int,
'system': str,
'note_id': str,
}
for key in list(params.keys()):
backend/open_webui/utils/tools.py
+2 -1
View File
@@ -72,6 +72,7 @@ from open_webui.tools.builtin import (
read_memory_path,
replace_memory_content,
replace_note_content,
replace_note_text,
search_calendar_events,
search_channel_messages,
search_channels,
@@ -635,7 +636,7 @@ async def get_builtin_tools(
# Notes tools - search, view, create, and update user's notes
if is_builtin_tool_enabled('notes') and config.get('notes.enable') and await has_user_permission('notes'):
builtin_functions.extend([search_notes, view_note, write_note, replace_note_content])
builtin_functions.extend([search_notes, view_note, write_note, replace_note_content, replace_note_text])
# Channels tools - search channels and messages
if is_builtin_tool_enabled('channels') and config.get('channels.enable') and await has_user_permission('channels'):
src/app.css
+1 -1
View File
@@ -122,7 +122,7 @@ textarea::-webkit-scrollbar-corner {
}
.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-normal 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;
@apply prose dark:prose-invert max-w-none break-words font-normal leading-relaxed prose-p:my-0 prose-p:font-normal prose-p:leading-relaxed prose-headings:my-1 prose-headings:font-normal prose-headings:leading-snug prose-strong:font-medium prose-code:before:content-none prose-code:after:content-none prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 prose-li:font-normal prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-blockquote:font-normal prose-hr:my-4 prose-img:my-1 [&>:first-child]:mt-0 [&>:last-child]:mb-0;
}
.markdown-prose-sm {
src/lib/apis/notes/index.ts
+36
View File
@@ -218,6 +218,42 @@ export const getNoteById = async (token: string, id: string) => {
return res;
};
export const getNoteChatById = async (token: string, id: string) => {
let error = null;
const url = `${WEBUI_API_BASE_URL}/notes/${id}/chat`;
console.info('[note-chat] fetching linked chat', { noteId: id, url });
const res = await fetch(url, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
}
})
.then(async (res) => {
console.info('[note-chat] linked chat response', {
noteId: id,
status: res.status,
ok: res.ok
});
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
error = err.detail;
console.error('[note-chat] linked chat request failed', { noteId: id, error: err });
return null;
});
if (error) {
throw error;
}
return res;
};
export const updateNoteById = async (token: string, id: string, note: NoteItem) => {
let error = null;
src/lib/components/chat/Chat.svelte
+349 -97
View File
@@ -115,10 +115,24 @@
import Tooltip from '../common/Tooltip.svelte';
import Sidebar from '../icons/Sidebar.svelte';
import Image from '../common/Image.svelte';
import XMark from '../icons/XMark.svelte';
export let chatIdProp = '';
export let embedded = false;
export let embeddedTitle = '';
export let initialFiles = [];
export let selectedText = '';
export let onInsertToNote: ((content: string) => void) | null = null;
export let onCloseEmbedded: (() => void) | null = null;
let loading = true;
$: chatContainerId = embedded ? 'note-chat-container' : 'chat-container';
const embeddedSuggestedPrompts = [
'Enhance this note and update it.',
'Summarize this note.',
'Extract action items from this note.',
'Rewrite the selected text.'
];
const eventTarget = new EventTarget();
let controlPane: Pane | undefined;
@@ -155,6 +169,30 @@
let serverContextUsage = null;
let contextUsage = null;
const getAvailableModelIds = () =>
$models.filter((m) => !(m?.info?.meta?.hidden ?? false)).map((m) => m.id);
const getDefaultModelIds = () =>
$config?.default_models ? $config.default_models.split(',') : [];
const normalizeSelectedModels = (modelIds = []) => {
const availableModels = getAvailableModelIds();
const defaultModels = getDefaultModelIds();
let normalized = (modelIds ?? []).filter(
(modelId) => modelId && availableModels.includes(modelId)
);
if (normalized.length === 0 && $settings?.models?.length) {
normalized = $settings.models.filter((modelId) => availableModels.includes(modelId));
}
if (normalized.length === 0 && defaultModels.length > 0) {
normalized = defaultModels.filter((modelId) => availableModels.includes(modelId));
}
if (normalized.length === 0) {
normalized = availableModels.length > 0 ? [availableModels[0]] : [''];
}
return normalized;
};
const estimateTokens = (value) => {
if (value === null || value === undefined || value === '') {
return 0;
@@ -240,6 +278,10 @@
};
$: contextUsage = getContextUsage() ?? serverContextUsage;
$: embeddedHeaderTitle =
embeddedTitle ||
($chatTitle && !$chatTitle.startsWith('Chat:') ? $chatTitle : '') ||
$i18n.t('Chat');
let selectedToolIds = [];
let selectedSkillIds = [];
@@ -320,8 +362,56 @@
let chatFiles = [];
let files = [];
let params = {};
let appliedInitialFilesKey = '';
let loadedChatIdProp = '';
$: if (chatIdProp) {
const fileKey = (file) => `${file?.type ?? ''}:${file?.id ?? file?.url ?? file?.name ?? ''}`;
const mergeFiles = (current, incoming) => {
const seen = new Set();
return [...(incoming ?? []), ...(current ?? [])].filter((file) => {
const key = fileKey(file);
if (seen.has(key)) return false;
seen.add(key);
return true;
});
};
const applyInitialFiles = () => {
if (!embedded || !initialFiles?.length) return;
const key = JSON.stringify(initialFiles.map(fileKey));
if (key === appliedInitialFilesKey) return;
files = mergeFiles(files, initialFiles);
chatFiles = mergeFiles(chatFiles, initialFiles);
appliedInitialFilesKey = key;
};
const withSelectedText = (text: string) =>
embedded && selectedText?.trim()
? `${text}\n\nSelected note text:\n${selectedText.trim()}`
: text;
const submitEmbeddedPrompt = async (text: string) => {
await tick();
await submitHandler(withSelectedText(text));
};
const noteChatDebug = (message: string, data: Record<string, unknown> = {}) => {
if (!embedded) return;
console.info('[note-chat]', message, {
chatIdProp,
activeChatId: $chatId,
loading,
...data
});
};
$: if (embedded && !loading) {
applyInitialFiles();
}
$: if (chatIdProp && chatIdProp !== loadedChatIdProp) {
noteChatDebug('chatIdProp changed; loading linked chat', {
previousChatIdProp: loadedChatIdProp
});
loadedChatIdProp = chatIdProp;
navigateHandler();
}
@@ -332,9 +422,11 @@
}
const navigateHandler = async () => {
noteChatDebug('navigateHandler start');
// Mark the outgoing chat as read before loading the new one.
// $chatId still holds the previous chat here — loadChat() updates it.
if ($chatId && $chatId !== chatIdProp && !$temporaryChatEnabled) {
noteChatDebug('marking outgoing chat read', { outgoingChatId: $chatId });
updateLastReadAt($chatId);
}
@@ -356,9 +448,12 @@
`chat-input${chatIdProp ? `-${chatIdProp}` : ''}`
);
if (chatIdProp && (await loadChat())) {
const loaded = chatIdProp ? await loadChat() : false;
noteChatDebug('loadChat completed inside navigateHandler', { loaded });
if (loaded) {
await tick();
loading = false;
noteChatDebug('embedded chat loading false');
window.setTimeout(() => scrollToBottom(), 0);
await tick();
@@ -396,8 +491,14 @@
const chatInput = document.getElementById('chat-input');
chatInput?.focus();
} else {
} else if (!embedded) {
await goto('/');
} else {
loading = false;
console.warn('[note-chat] embedded load failed; clearing spinner', {
chatIdProp,
activeChatId: $chatId
});
}
};
@@ -1548,7 +1649,7 @@
await showCallOverlay.set(false);
await showArtifacts.set(false);
if ($page.url.pathname.includes('/c/')) {
if (!embedded && $page.url.pathname.includes('/c/')) {
window.history.replaceState(history.state, '', `/`);
}
@@ -1676,27 +1777,53 @@
};
const loadChat = async () => {
noteChatDebug('loadChat start');
// chatIdProp is empty for chats started from the home page (URL set via replaceState)
chatId.set(chatIdProp || $chatId);
noteChatDebug('loadChat set active chat id');
if ($temporaryChatEnabled) {
noteChatDebug('loadChat disabling temporary chat');
temporaryChatEnabled.set(false);
}
chat = await getChatById(localStorage.token, $chatId).catch(async (error) => {
await goto('/');
console.error('[note-chat] getChatById failed', {
chatIdProp,
activeChatId: $chatId,
error
});
if (!embedded) {
await goto('/');
}
return null;
});
noteChatDebug('getChatById completed', {
found: !!chat,
chatId: chat?.id,
hasChatPayload: !!chat?.chat,
title: chat?.title
});
if (chat) {
tags = await getTagsById(localStorage.token, $chatId).catch(async (error) => {
console.warn('[note-chat] getTagsById failed; continuing without tags', {
chatIdProp,
activeChatId: $chatId,
error
});
return [];
});
noteChatDebug('getTagsById completed', { tagCount: tags?.length ?? 0 });
const chatContent = chat.chat;
if (chatContent) {
console.log(chatContent);
noteChatDebug('chat payload found', {
models: chatContent?.models,
hasHistory: !!chatContent?.history,
messageCount: Object.keys(chatContent?.history?.messages ?? {}).length
});
selectedModels =
(chatContent?.models ?? undefined) !== undefined
@@ -1706,6 +1833,13 @@
if (!($user?.role === 'admin' || ($user?.permissions?.chat?.multiple_models ?? true))) {
selectedModels = selectedModels.length > 0 ? [selectedModels[0]] : [''];
}
if (
selectedModels.length === 0 ||
(selectedModels.length === 1 && selectedModels[0] === '')
) {
selectedModels = normalizeSelectedModels(selectedModels);
noteChatDebug('normalized empty selected models after load', { selectedModels });
}
oldSelectedModelIds = structuredClone(selectedModels);
@@ -1721,6 +1855,7 @@
chatTitle.set(chatContent.title);
params = structuredClone(chatContent?.params ?? {});
delete params.note_id;
chatFiles = structuredClone(chatContent?.files ?? []);
// Load tasks from chat-level DB field
@@ -1748,13 +1883,25 @@
// If the response is already done, remaining tasks are just background
// work (follow-ups, title gen) that shouldn't block the input.
const activeTaskIds = taskIds;
const currentMessage = history.currentId ? history.messages[history.currentId] : null;
const pendingTaskIds = await getTaskIdsByChatId(localStorage.token, $chatId)
.then((res) => res?.task_ids ?? [])
.catch(() => []);
.catch((error) => {
console.warn('[note-chat] getTaskIdsByChatId failed; continuing without tasks', {
chatIdProp,
activeChatId: $chatId,
error
});
return [];
});
noteChatDebug('task reconciliation completed', {
pendingTaskCount: pendingTaskIds.length,
hasCurrentMessage: !!currentMessage
});
if (taskIds !== activeTaskIds) {
noteChatDebug('task ids changed during load; aborting stale load');
return;
}
const currentMessage = history.currentId ? history.messages[history.currentId] : null;
const responseComplete = currentMessage?.role === 'assistant' && currentMessage?.done;
if (pendingTaskIds.length > 0 && !responseComplete) {
@@ -1771,9 +1918,18 @@
return true;
} else {
console.warn('[note-chat] chat response missing chat payload', {
chatIdProp,
activeChatId: $chatId,
chat
});
return null;
}
}
console.warn('[note-chat] no chat returned from getChatById', {
chatIdProp,
activeChatId: $chatId
});
};
const scrollToBottom = async (behavior = 'auto') => {
@@ -2298,8 +2454,10 @@
);
if (result?.id) {
await goto(`/c/${result.id}`);
await refreshChatList(localStorage.token, { refreshPinned: true });
if (!embedded) {
await goto(`/c/${result.id}`);
await refreshChatList(localStorage.token, { refreshPinned: true });
}
toast.success($i18n.t('Chat forked'), { id: toastId });
} else {
toast.error($i18n.t('Failed to fork chat'), { id: toastId });
@@ -2857,7 +3015,7 @@
// and causing spurious toast notifications / state duplication).
if (res.chat_id && $chatId !== res.chat_id && $chatId === _chatId) {
await chatId.set(res.chat_id);
if (!$temporaryChatEnabled) {
if (!$temporaryChatEnabled && !embedded) {
window.history.replaceState(history.state, '', `/c/${res.chat_id}`);
await refreshChatList(localStorage.token);
@@ -3134,11 +3292,15 @@
_chatId = chat.id;
await chatId.set(_chatId);
window.history.replaceState(history.state, '', `/c/${_chatId}`);
if (!embedded) {
window.history.replaceState(history.state, '', `/c/${_chatId}`);
}
await tick();
await refreshChatList(localStorage.token);
if (!embedded) {
await refreshChatList(localStorage.token);
}
selectedFolder.set(null);
} else {
@@ -3340,14 +3502,17 @@
/>
<div
class="h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
class="{embedded
? 'h-full'
: 'h-screen max-h-[100dvh]'} transition-width duration-200 ease-in-out {$showSidebar &&
!embedded
? ' md:max-w-[calc(100%-var(--sidebar-width))]'
: ' '} w-full max-w-full flex flex-col"
id="chat-container"
id={chatContainerId}
>
{#if !loading}
<div in:fade={{ duration: 50 }} class="w-full h-full flex flex-col">
{#if $selectedFolder && $selectedFolder?.meta?.background_image_url}
{#if !embedded && $selectedFolder && $selectedFolder?.meta?.background_image_url}
<div
class="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
style="background-image: url({$selectedFolder?.meta?.background_image_url}) "
@@ -3356,7 +3521,7 @@
<div
class="absolute top-0 left-0 w-full h-full bg-linear-to-t from-white to-white/85 dark:from-gray-900 dark:to-gray-900/90 z-0"
/>
{:else if $settings?.backgroundImageUrl ?? $config?.license_metadata?.background_image_url ?? null}
{:else if !embedded && ($settings?.backgroundImageUrl ?? $config?.license_metadata?.background_image_url ?? null)}
<div
class="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
style="background-image: url({$settings?.backgroundImageUrl ??
@@ -3371,66 +3536,86 @@
<PaneGroup direction="horizontal" class="w-full h-full">
<Pane defaultSize={50} minSize={30} class="h-full flex relative max-w-full flex-col">
<FilesOverlay show={dragged} />
<Navbar
bind:this={navbarElement}
{readOnly}
chat={{
id: $chatId,
chat: {
title: $chatTitle,
models: selectedModels,
system: $settings.system ?? undefined,
params: params,
history: history,
timestamp: Date.now()
}
}}
{history}
title={$chatTitle}
shareEnabled={!!history.currentId}
{initNewChat}
scrollToTop={!isNearTop ? scrollToTop : null}
{archiveChatHandler}
{deleteChatHandler}
{moveChatHandler}
onSaveTempChat={async () => {
try {
if (!history?.currentId || !Object.keys(history.messages).length) {
toast.error($i18n.t('No conversation to save'));
return;
{#if embedded}
<div
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="min-w-0 truncate text-[13px] font-medium">
{embeddedHeaderTitle}
</div>
<Tooltip content={$i18n.t('Close')} placement="bottom">
<button
type="button"
class="rounded-md p-1 text-gray-500 transition hover:bg-black/5 hover:text-gray-900 dark:hover:bg-white/5 dark:hover:text-white"
on:click={() => onCloseEmbedded?.()}
aria-label={$i18n.t('Close')}
>
<XMark className="size-4" strokeWidth="2" />
</button>
</Tooltip>
</div>
{:else}
<Navbar
bind:this={navbarElement}
{readOnly}
chat={{
id: $chatId,
chat: {
title: $chatTitle,
models: selectedModels,
system: $settings.system ?? undefined,
params: params,
history: history,
timestamp: Date.now()
}
const messages = createMessagesList(history, history.currentId);
const title =
messages.find((m) => m.role === 'user')?.content ?? $i18n.t('New Chat');
}}
{history}
title={$chatTitle}
shareEnabled={!!history.currentId}
{initNewChat}
scrollToTop={!isNearTop ? scrollToTop : null}
{archiveChatHandler}
{deleteChatHandler}
{moveChatHandler}
onSaveTempChat={async () => {
try {
if (!history?.currentId || !Object.keys(history.messages).length) {
toast.error($i18n.t('No conversation to save'));
return;
}
const messages = createMessagesList(history, history.currentId);
const title =
messages.find((m) => m.role === 'user')?.content ?? $i18n.t('New Chat');
const savedChat = await createNewChat(
localStorage.token,
{
id: uuidv4(),
title: title.length > 50 ? `${title.slice(0, 50)}...` : title,
models: selectedModels,
params: params,
history: history,
messages: messages,
timestamp: Date.now()
},
null
);
const savedChat = await createNewChat(
localStorage.token,
{
id: uuidv4(),
title: title.length > 50 ? `${title.slice(0, 50)}...` : title,
models: selectedModels,
params: params,
history: history,
messages: messages,
timestamp: Date.now()
},
null
);
if (savedChat) {
temporaryChatEnabled.set(false);
chatId.set(savedChat.id);
await refreshChatList(localStorage.token);
if (savedChat) {
temporaryChatEnabled.set(false);
chatId.set(savedChat.id);
await refreshChatList(localStorage.token);
await goto(`/c/${savedChat.id}`);
toast.success($i18n.t('Conversation saved successfully'));
await goto(`/c/${savedChat.id}`);
toast.success($i18n.t('Conversation saved successfully'));
}
} catch (error) {
console.error('Error saving conversation:', error);
toast.error($i18n.t('Failed to save conversation'));
}
} catch (error) {
console.error('Error saving conversation:', error);
toast.error($i18n.t('Failed to save conversation'));
}
}}
/>
}}
/>
{/if}
<div id="chat-pane" class="flex flex-col flex-auto z-10 w-full @container overflow-auto">
{#if ($settings?.landingPageMode === 'chat' && !$selectedFolder) || createMessagesList(history, history.currentId).length > 0}
@@ -3458,6 +3643,7 @@
}}
bind:selectedModels
{atSelectedModel}
className={embedded ? 'h-full flex pt-4' : 'h-full flex pt-18'}
{sendMessage}
{showMessage}
{submitMessage}
@@ -3466,9 +3652,10 @@
{mergeResponses}
{chatActionHandler}
{addMessages}
topPadding={true}
topPadding={!embedded}
bottomPadding={files.length > 0}
{onSelect}
{onInsertToNote}
/>
</div>
</div>
@@ -3557,7 +3744,7 @@
if (e.detail || files.length > 0) {
await tick();
submitHandler(e.detail);
submitHandler(withSelectedText(e.detail));
}
}}
/>
@@ -3569,6 +3756,68 @@
</div>
</div>
{/if}
{:else if embedded}
<div class="flex h-full min-h-0 flex-col justify-end">
<div class="flex flex-1 items-end px-5 pb-3">
<div class="w-full">
<div class="mb-2 text-[12px] text-gray-400 dark:text-gray-500">
{$i18n.t('Suggested prompts')}
</div>
<div class="flex flex-col">
{#each embeddedSuggestedPrompts as suggestion}
<button
type="button"
class="flex min-h-8 w-full items-center justify-between py-1 text-left text-[13px] leading-5 text-gray-500 transition hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
on:click={() => submitEmbeddedPrompt(suggestion)}
>
<span class="min-w-0 truncate">{$i18n.t(suggestion)}</span>
</button>
{/each}
</div>
</div>
</div>
<div class="pb-2 z-10">
<MessageInput
bind:this={messageInput}
{history}
{taskIds}
bind:selectedModels
bind:files
bind:prompt
bind:autoScroll
bind:selectedToolIds
bind:selectedSkillIds
bind:selectedFilterIds
bind:imageGenerationEnabled
bind:codeInterpreterEnabled
{pendingOAuthTools}
bind:webSearchEnabled
bind:atSelectedModel
bind:showCommands
bind:dragged
chatId={$chatId}
{contextUsage}
compactHandler={handleManualCompact}
statusHandler={handleStatusCommand}
forkHandler={handleForkChat}
toolServers={$toolServers}
{generating}
{stopResponse}
{createMessagePair}
{onUpload}
messageQueue={$chatRequestQueues[$chatId] ?? []}
{chatTasks}
onWebSearchToggle={handleWebSearchToggle}
on:submit={async (e) => {
clearDraft($chatId);
if (e.detail || files.length > 0) {
await tick();
submitHandler(withSelectedText(e.detail));
}
}}
/>
</div>
</div>
{:else}
<div class="flex items-center h-full">
<Placeholder
@@ -3603,7 +3852,7 @@
clearDraft();
if (e.detail || files.length > 0) {
await tick();
submitHandler(e.detail);
submitHandler(withSelectedText(e.detail));
}
}}
/>
@@ -3612,28 +3861,31 @@
</div>
</Pane>
<ChatControls
bind:this={controlPaneComponent}
bind:history
bind:chatFiles
bind:params
bind:files
bind:pane={controlPane}
chatId={$chatId}
modelId={selectedModelIds?.at(0) ?? null}
models={selectedModelIds.reduce((a, e, i, arr) => {
const model = $models.find((m) => m.id === e);
if (model) {
return [...a, model];
}
return a;
}, [])}
submitPrompt={submitHandler}
{stopResponse}
{showMessage}
{eventTarget}
{codeInterpreterEnabled}
/>
{#if !embedded}
<ChatControls
bind:this={controlPaneComponent}
bind:history
bind:chatFiles
bind:params
bind:files
bind:pane={controlPane}
chatId={$chatId}
modelId={selectedModelIds?.at(0) ?? null}
models={selectedModelIds.reduce((a, e, i, arr) => {
const model = $models.find((m) => m.id === e);
if (model) {
return [...a, model];
}
return a;
}, [])}
submitPrompt={submitHandler}
{stopResponse}
{showMessage}
{eventTarget}
{codeInterpreterEnabled}
containerId={chatContainerId}
/>
{/if}
</PaneGroup>
</div>
{:else if loading}
src/lib/components/chat/ChatControls.svelte
+4 -3
View File
@@ -55,6 +55,7 @@
export let codeInterpreterEnabled = false;
export let pane: Pane | null = null;
export let containerId = 'chat-container';
let largeScreen = false;
let dragged = false;
@@ -159,7 +160,7 @@
export const openPane = () => {
if (parseInt(localStorage?.chatControlsSize)) {
const container = document.getElementById('chat-container');
const container = document.getElementById(containerId);
let size = Math.floor(
(parseInt(localStorage?.chatControlsSize) / container.clientWidth) * 100
);
@@ -218,7 +219,7 @@
paneReady = true;
}, 0);
const container = document.getElementById('chat-container') as HTMLElement;
const container = document.getElementById(containerId) as HTMLElement;
if (!container) return;
minSize = Math.floor((350 / container.clientWidth) * 100);
@@ -407,7 +408,7 @@
if (size < minSize) {
localStorage.chatControlsSize = 0;
} else {
const container = document.getElementById('chat-container');
const container = document.getElementById(containerId);
localStorage.chatControlsSize = Math.floor((size / 100) * container.clientWidth);
}
}
src/lib/components/chat/Messages.svelte
+2
View File
@@ -49,6 +49,7 @@
export let autoScroll;
export let onSelect = (e) => {};
export let onInsertToNote: ((content: string) => void) | null = null;
export let messagesCount: number | null = 8;
let messagesLoading = false;
@@ -542,6 +543,7 @@
{readOnly}
{editCodeBlock}
{topPadding}
{onInsertToNote}
/>
{/each}
</ul>
src/lib/components/chat/Messages/Message.svelte
+3
View File
@@ -43,6 +43,7 @@
export let readOnly = false;
export let editCodeBlock = true;
export let topPadding = false;
export let onInsertToNote: ((content: string) => void) | null = null;
</script>
<div
@@ -72,6 +73,7 @@
{readOnly}
{editCodeBlock}
{topPadding}
{onInsertToNote}
/>
{:else if (history.messages[history.messages[messageId].parentId]?.models?.length ?? 1) === 1}
<ResponseMessage
@@ -123,6 +125,7 @@
{readOnly}
{editCodeBlock}
{topPadding}
{onInsertToNote}
/>
{/key}
{/if}
src/lib/components/chat/Messages/MultiResponseMessages.svelte
+6 -1
View File
@@ -49,6 +49,7 @@
export let triggerScroll: Function;
export let topPadding = false;
export let onInsertToNote: ((content: string) => void) | null = null;
const dispatch = createEventDispatcher();
@@ -320,6 +321,7 @@
{addMessages}
{readOnly}
{topPadding}
{onInsertToNote}
/>
{/if}
{/key}
@@ -377,6 +379,7 @@
{readOnly}
{editCodeBlock}
{topPadding}
{onInsertToNote}
/>
{/if}
{/key}
@@ -411,7 +414,9 @@
</div>
{#if message.timestamp}
<div class="mt-0.5 flex justify-start whitespace-nowrap text-gray-600 dark:text-gray-500">
<div
class="mt-0.5 flex justify-start whitespace-nowrap text-gray-600 dark:text-gray-500"
>
<Tooltip
className="flex self-center"
content={formatMessageTimestampFull(message.timestamp * 1000)}
src/lib/components/chat/Messages/ResponseMessage.svelte
+17
View File
@@ -166,6 +166,7 @@
export let readOnly = false;
export let editCodeBlock = true;
export let topPadding = false;
export let onInsertToNote: ((content: string) => void) | null = null;
let citationsElement: HTMLDivElement;
@@ -1051,6 +1052,22 @@
</button>
</Tooltip>
{#if onInsertToNote && visibleResponseContent}
<Tooltip content={$i18n.t('Insert into note')} placement="bottom">
<button
aria-label={$i18n.t('Insert into note')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} rounded-lg px-2 py-1.5 text-xs text-gray-500 transition hover:bg-black/5 hover:text-black dark:hover:bg-white/5 dark:hover:text-white"
on:click={() => {
onInsertToNote?.(visibleResponseContent);
}}
>
{$i18n.t('Insert')}
</button>
</Tooltip>
{/if}
{#if !readOnly && ($user?.role === 'admin' || ($user?.permissions?.chat?.tts ?? true))}
<Tooltip content={$i18n.t('Read Aloud')} placement="bottom">
<button
src/lib/components/common/ToolCallDisplay.svelte
+7 -18
View File
@@ -11,7 +11,6 @@
import ChevronUp from '../icons/ChevronUp.svelte';
import ChevronDown from '../icons/ChevronDown.svelte';
import Spinner from './Spinner.svelte';
import Markdown from '../chat/Messages/Markdown.svelte';
import WrenchSolid from '../icons/WrenchSolid.svelte';
import CheckCircle from '../icons/CheckCircle.svelte';
import Image from './Image.svelte';
@@ -154,19 +153,9 @@
<!-- Full label (md and above) -->
<span class="hidden @md:inline font-normal">
{#if isDone}
<Markdown
id={`${componentId}-tool-call-title`}
content={$i18n.t('View Result from **{{NAME}}**', {
NAME: attributes.name
})}
/>
{$i18n.t('View Result from {{NAME}}', { NAME: attributes.name })}
{:else}
<Markdown
id={`${componentId}-tool-call-executing`}
content={$i18n.t('Executing **{{NAME}}**...', {
NAME: attributes.name
})}
/>
{$i18n.t('Executing {{NAME}}...', { NAME: attributes.name })}
{/if}
</span>
</div>
@@ -174,9 +163,9 @@
<!-- Chevron -->
<div class="flex shrink-0 self-center translate-y-[1px]">
{#if open}
<ChevronUp strokeWidth="3.5" className="size-3.5" />
<ChevronUp strokeWidth="3.5" className="size-3" />
{:else}
<ChevronDown strokeWidth="3.5" className="size-3.5" />
<ChevronDown strokeWidth="3.5" className="size-3" />
{/if}
</div>
</div>
@@ -184,7 +173,7 @@
{#if open}
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
<div class="border border-gray-50 dark:border-gray-850/30 rounded-2xl my-1.5 p-3 space-y-3">
<div class="border border-gray-50 dark:border-gray-850/30 rounded-2xl my-1.5 p-2.5 space-y-2">
<!-- Input -->
{#if args}
<div>
@@ -210,7 +199,7 @@
{:else}
<div class="tool-call-body w-full max-w-none!">
<pre
class="text-xs text-gray-600 dark:text-gray-300 whitespace-pre font-mono bg-gray-50 dark:bg-gray-900 rounded-lg p-2.5 overflow-x-auto">{formatJSONString(
class="text-xs text-gray-600 dark:text-gray-300 whitespace-pre font-mono bg-gray-50 dark:bg-gray-900 rounded-lg p-2 overflow-x-auto">{formatJSONString(
args
)}</pre>
</div>
@@ -229,7 +218,7 @@
<div class="w-full max-w-none!">
{#if typeof parsedResult === 'object' && parsedResult !== null}
<pre
class="text-xs text-gray-600 dark:text-gray-300 whitespace-pre font-mono bg-gray-50 dark:bg-gray-900 rounded-lg p-2.5 overflow-x-auto">{JSON.stringify(
class="text-xs text-gray-600 dark:text-gray-300 whitespace-pre font-mono bg-gray-50 dark:bg-gray-900 rounded-lg p-2 overflow-x-auto">{JSON.stringify(
parsedResult,
null,
2
src/lib/components/notes/NoteEditor.svelte
+117 -335
View File
@@ -23,10 +23,10 @@
import { PaneGroup, Pane, PaneResizer } from 'paneforge';
import { compressImage, copyToClipboard, splitStream, convertHeicToJpeg } from '$lib/utils';
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import { compressImage, copyToClipboard, convertHeicToJpeg } from '$lib/utils';
import { WEBUI_BASE_URL } from '$lib/constants';
import { getFileById, uploadFile } from '$lib/apis/files';
import { chatCompletion, generateOpenAIChatCompletion } from '$lib/apis/openai';
import { generateOpenAIChatCompletion } from '$lib/apis/openai';
import {
config,
@@ -42,8 +42,7 @@
import { downloadPdf } from './utils';
import Controls from './NoteEditor/Controls.svelte';
import Chat from './NoteEditor/Chat.svelte';
import Chat from '$lib/components/chat/Chat.svelte';
import NotePanel from '$lib/components/notes/NotePanel.svelte';
import AccessControlModal from '$lib/components/workspace/common/AccessControlModal.svelte';
@@ -65,6 +64,7 @@
import {
deleteNoteById,
getNoteById,
getNoteChatById,
updateNoteById,
updateNoteAccessGrants,
toggleNotePinnedStatusById,
@@ -76,28 +76,18 @@
import Mic from '../icons/Mic.svelte';
import VoiceRecording from '../chat/MessageInput/VoiceRecording.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import ChatBubbleOval from '../icons/ChatBubbleOval.svelte';
import Calendar from '../icons/Calendar.svelte';
import Users from '../icons/Users.svelte';
import AccessButton from '../common/AccessButton.svelte';
import Image from '../common/Image.svelte';
import FileItem from '../common/FileItem.svelte';
import FilesOverlay from '../chat/MessageInput/FilesOverlay.svelte';
import RecordMenu from './RecordMenu.svelte';
import NoteMenu from './Notes/NoteMenu.svelte';
import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
import Sparkles from '../icons/Sparkles.svelte';
import SparklesSolid from '../icons/SparklesSolid.svelte';
import Tooltip from '../common/Tooltip.svelte';
import Bars3BottomLeft from '../icons/Bars3BottomLeft.svelte';
import ArrowUturnLeft from '../icons/ArrowUturnLeft.svelte';
import ArrowUturnRight from '../icons/ArrowUturnRight.svelte';
import Sidebar from '../icons/Sidebar.svelte';
import ArrowRight from '../icons/ArrowRight.svelte';
import Cog6 from '../icons/Cog6.svelte';
import AiMenu from './AIMenu.svelte';
import AdjustmentsHorizontalOutline from '../icons/AdjustmentsHorizontalOutline.svelte';
export let id: null | string = null;
@@ -131,7 +121,6 @@
);
let files = [];
let messages = [];
let wordCount = 0;
let charCount = 0;
@@ -142,8 +131,9 @@
let recording = false;
let displayMediaRecord = false;
let showPanel = false;
let selectedPanel = 'chat';
let showNoteChat = false;
let noteChatId = null;
let noteChatLoading = false;
let selectedContent = null;
@@ -157,11 +147,6 @@
let dragged = false;
let loading = false;
let editing = false;
let streaming = false;
let stopResponseFlag = false;
let inputElement = null;
// Computed HTML for editor: fall back to markdown if HTML is missing
@@ -176,8 +161,6 @@
return null;
});
messages = [];
if (res) {
note = res;
if (!Array.isArray(note?.access_grants)) {
@@ -249,11 +232,6 @@
return false;
}
const onEdited = async () => {
if (!editor) return;
editor.commands.setContent(note.data.content.html);
};
const generateTitleHandler = async () => {
const content = note.data.content.md;
const DEFAULT_TITLE_GENERATION_PROMPT_TEMPLATE = `### Task:
@@ -328,34 +306,6 @@ ${content}
changeDebounceHandler();
};
async function enhanceNoteHandler() {
if (selectedModelId === '') {
toast.error($i18n.t('Please select a model.'));
return;
}
const model = $models
.filter((model) => model.id === selectedModelId && !(model?.info?.meta?.hidden ?? false))
.find((model) => model.id === selectedModelId);
if (!model) {
selectedModelId = '';
return;
}
editing = true;
await enhanceCompletionHandler(model);
editing = false;
onEdited();
versionIdx = null;
}
const stopResponseHandler = async () => {
stopResponseFlag = true;
console.log('stopResponse', stopResponseFlag);
};
function setContentByVersion(versionIdx) {
if (!note.data.versions?.length) return;
let idx = versionIdx;
@@ -433,13 +383,6 @@ ${content}
files = [...files, fileItem];
// open the settings panel if it is not open
selectedPanel = 'settings';
if (!showPanel) {
showPanel = true;
}
try {
// If the file is an audio file, provide the language for STT.
let metadata = null;
@@ -597,6 +540,51 @@ ${content}
});
};
const noteChatFileKey = (file) =>
`${file?.type ?? ''}:${file?.id ?? file?.url ?? file?.name ?? ''}`;
const getNoteChatFiles = () => {
if (!note) return [];
const seen = new Set();
return (note?.data?.files ?? files ?? []).filter((file) => {
const key = noteChatFileKey(file);
if (seen.has(key)) return false;
seen.add(key);
return true;
});
};
const openNoteChat = async () => {
console.info('[note-chat] open requested', {
noteId: note?.id,
alreadyLoading: noteChatLoading,
currentChatId: noteChatId,
sidebarOpen: showNoteChat
});
if (!note?.id || noteChatLoading) return;
noteChatLoading = true;
const chat = await getNoteChatById(localStorage.token, note.id).catch((error) => {
console.error('[note-chat] open failed', { noteId: note?.id, error });
toast.error(`${error}`);
return null;
});
noteChatLoading = false;
if (chat?.id) {
console.info('[note-chat] open resolved', {
noteId: note.id,
chatId: chat.id,
title: chat.title,
hasChatPayload: !!chat.chat
});
noteChatId = chat.id;
showNoteChat = true;
} else {
console.warn('[note-chat] open returned no chat id', { noteId: note.id, chat });
}
};
const downloadHandler = async (type) => {
console.log('downloadHandler', type);
if (type === 'txt') {
@@ -629,113 +617,6 @@ ${content}
}
};
const scrollToBottom = () => {
const element = document.getElementById('note-content-container');
if (element) {
element.scrollTop = element?.scrollHeight;
}
};
const enhanceCompletionHandler = async (model) => {
stopResponseFlag = false;
let enhancedContent = {
json: null,
html: '',
md: ''
};
const systemPrompt = `Enhance existing notes using additional context provided from audio transcription or uploaded file content in the content's primary language. Your task is to make the notes more useful and comprehensive by incorporating relevant information from the provided context.
Input will be provided within <notes> and <context> XML tags, providing a structure for the existing notes and context respectively.
# Output Format
Provide the enhanced notes in markdown format. Use markdown syntax for headings, lists, task lists ([ ]) where tasks or checklists are strongly implied, and emphasis to improve clarity and presentation. Ensure that all integrated content from the context is accurately reflected. Return only the markdown formatted note.
`;
const [res, controller] = await chatCompletion(
localStorage.token,
{
model: model.id,
stream: true,
messages: [
{
role: 'system',
content: systemPrompt
},
{
role: 'user',
content:
`<notes>${note.data.content.md}</notes>` +
(files && files.length > 0
? `\n<context>${files.map((file) => `${file.name}: ${file?.file?.data?.content ?? 'Could not extract content'}\n`).join('')}</context>`
: '')
}
]
},
`${WEBUI_BASE_URL}/api`
);
await tick();
streaming = true;
if (res && res.ok) {
const reader = res.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n'))
.getReader();
while (true) {
const { value, done } = await reader.read();
if (done || stopResponseFlag) {
if (stopResponseFlag) {
controller.abort('User: Stop Response');
}
editing = false;
streaming = false;
break;
}
try {
let lines = value.split('\n');
for (const line of lines) {
if (line !== '') {
console.log(line);
if (line === 'data: [DONE]') {
console.log(line);
} else {
let data = JSON.parse(line.replace(/^data: /, ''));
console.log(data);
if (data.choices && data.choices.length > 0) {
const choice = data.choices[0];
if (choice.delta && choice.delta.content) {
enhancedContent.md += choice.delta.content;
enhancedContent.html = marked.parse(enhancedContent.md);
note.data.content.md = enhancedContent.md;
note.data.content.html = enhancedContent.html;
note.data.content.json = null;
scrollToBottom();
}
}
}
}
}
} catch (error) {
console.log(error);
}
}
}
streaming = false;
};
const onDragOver = (e) => {
e.preventDefault();
@@ -800,6 +681,18 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
note.data.files = files;
}
if (_note.data?.content) {
note.data.content = {
...note.data.content,
..._note.data.content
};
if (editor) {
editor.commands.setContent(
_note.data.content.html || marked.parse(_note.data.content.md ?? '')
);
}
}
if (_note.title && _note.title) {
note.title = _note.title;
}
@@ -1025,44 +918,19 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
</div>
</div>
{/if}
<Tooltip placement="top" content={$i18n.t('Chat')} className="cursor-pointer">
<button
class="p-1.5 bg-transparent hover:bg-white/5 transition rounded-lg"
on:click={() => {
if (showPanel && selectedPanel === 'chat') {
showPanel = false;
} else {
if (!showPanel) {
showPanel = true;
}
selectedPanel = 'chat';
}
}}
>
<ChatBubbleOval />
</button>
</Tooltip>
<Tooltip placement="top" content={$i18n.t('Controls')} className="cursor-pointer">
<button
class="p-1.5 bg-transparent hover:bg-white/5 transition rounded-lg"
on:click={() => {
if (showPanel && selectedPanel === 'settings') {
showPanel = false;
} else {
if (!showPanel) {
showPanel = true;
}
selectedPanel = 'settings';
}
}}
>
<AdjustmentsHorizontalOutline />
</button>
</Tooltip>
{/if}
<Tooltip content={$i18n.t('Controls')} placement="top">
<button
type="button"
class="p-1 bg-transparent hover:bg-white/5 transition rounded-lg"
aria-label={$i18n.t('Controls')}
on:click={openNoteChat}
>
<AdjustmentsHorizontalOutline className="size-4" />
</button>
</Tooltip>
{#if note?.write_access}
<RecordMenu
onRecord={async () => {
@@ -1150,6 +1018,7 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
onDelete={() => {
showDeleteConfirm = true;
}}
onChat={openNoteChat}
isPinned={$pinnedNotes.some((n) => n.id === note.id)}
onPin={async () => {
await toggleNotePinnedStatusById(localStorage.token, note.id);
@@ -1239,14 +1108,6 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
class=" flex-1 w-full h-full overflow-auto px-2.5 relative"
id="note-content-container"
>
{#if editing}
<div
class="w-full h-full fixed top-0 left-0 {streaming
? ''
: ' backdrop-blur-xs bg-white/10 dark:bg-gray-900/10'} flex items-center justify-center z-10 cursor-not-allowed"
></div>
{/if}
<RichTextInput
bind:this={inputElement}
bind:editor
@@ -1264,7 +1125,7 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
image={true}
{files}
placeholder={$i18n.t('Write something...')}
editable={versionIdx === null && !editing && note?.write_access}
editable={versionIdx === null && note?.write_access}
onSelectionUpdate={({ editor }) => {
const { from, to } = editor.state.selection;
const selectedText = editor.state.doc.textBetween(from, to, ' ');
@@ -1349,126 +1210,47 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
</div>
{/if}
</div>
<div class="absolute z-50 bottom-0 right-0 p-3.5 flex select-none">
<div class="flex flex-col gap-2 justify-end">
{#if recording}
<div class="flex-1 w-full">
<VoiceRecording
bind:recording
className="p-1 w-full max-w-full"
transcribe={false}
displayMedia={displayMediaRecord}
echoCancellation={false}
noiseSuppression={false}
onCancel={() => {
recording = false;
displayMediaRecord = false;
}}
onConfirm={(data) => {
if (data?.file) {
uploadFileHandler(data?.file);
}
recording = false;
displayMediaRecord = false;
}}
/>
</div>
{:else}
<div
class="cursor-pointer flex gap-0.5 rounded-full border border-gray-50 dark:border-gray-850/30 dark:bg-gray-850 transition shadow-xl"
>
<Tooltip content={$i18n.t('AI')} placement="top">
{#if editing}
<button
class="p-2 flex justify-center items-center hover:bg-gray-50 dark:hover:bg-gray-800 rounded-full transition shrink-0"
on:click={() => {
stopResponseHandler();
}}
type="button"
>
<Spinner className="size-5" />
</button>
{:else}
<AiMenu
onEdit={() => {
enhanceNoteHandler();
}}
onChat={() => {
showPanel = true;
selectedPanel = 'chat';
}}
>
<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>
{/if}
</div>
</div>
</Pane>
<NotePanel bind:show={showPanel}>
{#if selectedPanel === 'chat'}
<Chat
bind:show={showPanel}
bind:selectedModelId
bind:messages
bind:note
bind:editing
bind:streaming
bind:stopResponseFlag
{editor}
{inputElement}
{selectedContent}
{files}
onInsert={insertHandler}
onStop={stopResponseHandler}
{onEdited}
insertNoteHandler={() => {
insertNoteVersion(note);
}}
scrollToBottomHandler={scrollToBottom}
/>
{:else if selectedPanel === 'settings'}
<Controls
bind:show={showPanel}
bind:selectedModelId
bind:files
onUpdate={(updatedFiles) => {
files = updatedFiles;
note.data.files = files.length > 0 ? files : null;
if (editor) {
editor.storage.files = files;
const fileIds = new Set(files.map((file) => file.id));
const ranges = [];
editor.state.doc.descendants((node, pos) => {
const src = node.attrs.src;
if (
node.type.name === 'image' &&
src?.startsWith('data://') &&
!fileIds.has(src.slice('data://'.length))
) {
ranges.push([pos, pos + node.nodeSize]);
{#if recording}
<div class="absolute z-50 bottom-0 right-0 p-3.5 flex select-none">
<div class="flex-1 w-full">
<VoiceRecording
bind:recording
className="p-1 w-full max-w-full"
transcribe={false}
displayMedia={displayMediaRecord}
echoCancellation={false}
noiseSuppression={false}
onCancel={() => {
recording = false;
displayMediaRecord = false;
}}
onConfirm={(data) => {
if (data?.file) {
uploadFileHandler(data?.file);
}
});
if (ranges.length > 0) {
let transaction = editor.state.tr;
ranges.reverse().forEach(([from, to]) => {
transaction = transaction.delete(from, to);
});
editor.view.dispatch(transaction);
}
}
changeDebounceHandler();
recording = false;
displayMediaRecord = false;
}}
/>
</div>
</div>
{/if}
</Pane>
<NotePanel bind:show={showNoteChat}>
{#if noteChatLoading}
<div class="flex h-full items-center justify-center">
<Spinner className="size-5" />
</div>
{:else if noteChatId}
<Chat
embedded={true}
chatIdProp={noteChatId}
initialFiles={getNoteChatFiles()}
selectedText={selectedContent?.text ?? ''}
onInsertToNote={insertHandler}
onCloseEmbedded={() => {
showNoteChat = false;
}}
/>
{/if}
src/lib/components/notes/NoteEditor/Chat.svelte
-445
View File
@@ -1,445 +0,0 @@
<script lang="ts">
export let show = false;
export let selectedModelId = '';
import { marked } from 'marked';
// Configure marked with extensions
marked.use({
breaks: true,
gfm: true,
renderer: {
list(body, ordered, start) {
const isTaskList = body.includes('data-checked=');
if (isTaskList) {
return `<ul data-type="taskList">${body}</ul>`;
}
const type = ordered ? 'ol' : 'ul';
const startatt = ordered && start !== 1 ? ` start="${start}"` : '';
return `<${type}${startatt}>${body}</${type}>`;
},
listitem(text, task, checked) {
if (task) {
const checkedAttr = checked ? 'true' : 'false';
return `<li data-type="taskItem" data-checked="${checkedAttr}">${text}</li>`;
}
return `<li>${text}</li>`;
}
}
});
import { toast } from 'svelte-sonner';
import { goto } from '$app/navigation';
import { onMount, tick, getContext } from 'svelte';
import { WEBUI_BASE_URL } from '$lib/constants';
import { WEBUI_NAME, config, user, models, settings } from '$lib/stores';
import { chatCompletion } from '$lib/apis/openai';
import { splitStream } from '$lib/utils';
import Messages from '$lib/components/notes/NoteEditor/Chat/Messages.svelte';
import MessageInput from '$lib/components/channel/MessageInput.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte';
import PencilSquare from '$lib/components/icons/PencilSquare.svelte';
const i18n = getContext('i18n');
export let editor = null;
export let editing = false;
export let streaming = false;
export let stopResponseFlag = false;
export let note = null;
export let selectedContent = null;
export let files = [];
export let messages = [];
export let onInsert = (content) => {};
export let onStop = () => {};
export let onEdited = () => {};
export let insertNoteHandler = () => {};
export let scrollToBottomHandler = () => {};
let loaded = false;
let loading = false;
let messagesContainerElement: HTMLDivElement;
let system = '';
let editEnabled = false;
let chatInputElement = null;
const DEFAULT_DOCUMENT_EDITOR_PROMPT = `You are an expert document editor.
## Task
Based on the user's instruction, update and enhance the existing notes or selection by incorporating relevant and accurate information from the provided context in the content's primary language. Ensure all edits strictly follow the user’s intent.
## Input Structure
- Existing notes: Enclosed within <notes></notes> XML tags.
- Additional context: Enclosed within <context></context> XML tags.
- Current note selection: Enclosed within <selection></selection> XML tags.
- Editing instruction: Provided in the user message.
## Output Instructions
- If a selection is provided, edit **only** the content within <selection></selection>. Leave unselected parts unchanged.
- If no selection is provided, edit the entire notes.
- Deliver a single, rewritten version of the notes in markdown format.
- Integrate information from the context only if it directly supports the user's instruction.
- Use clear, organized markdown elements: headings, lists, task lists ([ ]) where tasks or checklists are strongly implied, bold and italic text as appropriate.
- Focus on improving clarity, completeness, and usefulness of the notes.
- Return only the final, fully-edited markdown notes—do not include explanations, reasoning, or XML tags.
`;
let scrolledToBottom = true;
const scrollToBottom = () => {
if (messagesContainerElement) {
if (scrolledToBottom) {
messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
}
}
};
const onScroll = () => {
if (messagesContainerElement) {
scrolledToBottom =
messagesContainerElement.scrollHeight - messagesContainerElement.scrollTop <=
messagesContainerElement.clientHeight + 10;
}
};
const chatCompletionHandler = async () => {
if (selectedModelId === '') {
toast.error($i18n.t('Please select a model.'));
return;
}
const model = $models.find((model) => model.id === selectedModelId);
if (!model) {
selectedModelId = '';
return;
}
let responseMessage;
if (messages.at(-1)?.role === 'assistant') {
responseMessage = messages.at(-1);
} else {
responseMessage = {
role: 'assistant',
content: '',
done: false
};
messages.push(responseMessage);
messages = messages;
}
await tick();
scrollToBottom();
stopResponseFlag = false;
let enhancedContent = {
json: null,
html: '',
md: ''
};
system = '';
if (editEnabled) {
system = `${DEFAULT_DOCUMENT_EDITOR_PROMPT}\n\n`;
} else {
system = `You are a helpful assistant. Please answer the user's questions based on the context provided.\n\n`;
}
system +=
`<notes>${note?.data?.content?.md ?? ''}</notes>` +
(files && files.length > 0
? `\n<context>${files.map((file) => `${file.name}: ${file?.file?.data?.content ?? 'Could not extract content'}\n`).join('')}</context>`
: '') +
(selectedContent ? `\n<selection>${selectedContent?.text}</selection>` : '');
// Filter out empty assistant placeholder messages to avoid sending
// an empty trailing assistant message as "response prefill", which is
// incompatible with enable_thinking in llama.cpp and similar backends.
const filteredMessages = messages.filter((m) => !(m.role === 'assistant' && m.content === ''));
const chatMessages = JSON.parse(
JSON.stringify([
{
role: 'system',
content: `${system}`
},
...filteredMessages
])
);
const [res, controller] = await chatCompletion(
localStorage.token,
{
model: model.id,
stream: true,
messages: chatMessages.map((m) => ({
role: m.role,
content: m.content
}))
// ...(files && files.length > 0 ? { files } : {}) // TODO: Decide whether to use native file handling or not
},
`${WEBUI_BASE_URL}/api`
);
await tick();
scrollToBottom();
let messageContent = '';
if (res && res.ok) {
const reader = res.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n'))
.getReader();
while (true) {
const { value, done } = await reader.read();
if (done || stopResponseFlag) {
if (stopResponseFlag) {
controller.abort('User: Stop Response');
}
if (editEnabled) {
editing = false;
streaming = false;
onEdited();
}
break;
}
try {
let lines = value.split('\n');
for (const line of lines) {
if (line !== '') {
console.log(line);
if (line === 'data: [DONE]') {
if (editEnabled) {
responseMessage.content = `<status title="${$i18n.t('Edited')}" done="true" />`;
if (selectedContent && selectedContent?.text && editor) {
editor.commands.insertContentAt(
{
from: selectedContent.from,
to: selectedContent.to
},
enhancedContent.html || enhancedContent.md || ''
);
selectedContent = null;
}
}
responseMessage.done = true;
messages = messages;
} else {
let data = JSON.parse(line.replace(/^data: /, ''));
console.log(data);
let deltaContent = data.choices[0]?.delta?.content ?? '';
if (responseMessage.content == '' && deltaContent == '\n') {
continue;
} else {
if (editEnabled) {
editing = true;
streaming = true;
enhancedContent.md += deltaContent;
enhancedContent.html = marked.parse(enhancedContent.md);
if (!selectedContent || !selectedContent?.text) {
note.data.content.md = enhancedContent.md;
note.data.content.html = enhancedContent.html;
note.data.content.json = null;
}
scrollToBottomHandler();
responseMessage.content = `<status title="${$i18n.t('Editing')}" done="false" />`;
messages = messages;
} else {
messageContent += deltaContent;
responseMessage.content = messageContent;
messages = messages;
}
await tick();
}
}
}
}
} catch (error) {
console.log(error);
}
scrollToBottom();
}
}
};
const submitHandler = async (e) => {
const { content, data } = e;
if (selectedModelId && content) {
messages.push({
role: 'user',
content: content
});
messages = messages;
await tick();
scrollToBottom();
loading = true;
await chatCompletionHandler();
messages = messages.map((message) => {
message.done = true;
return message;
});
loading = false;
stopResponseFlag = false;
}
};
onMount(async () => {
editEnabled = localStorage.getItem('noteEditEnabled') === 'true';
loaded = true;
await tick();
scrollToBottom();
});
</script>
<div class="flex items-center mb-1.5 pt-1.5">
<div class="flex items-center mr-1">
<button
class="p-0.5 bg-transparent transition rounded-lg"
on:click={() => {
show = !show;
}}
>
<XMark className="size-5" strokeWidth="2.5" />
</button>
</div>
<div class=" font-normal text-base flex items-center gap-1">
<div>
{$i18n.t('Chat')}
</div>
<div>
<Tooltip
content={$i18n.t(
'This feature is experimental and may be modified or discontinued without notice.'
)}
position="top"
className="inline-block"
>
<span
class="inline-flex items-center text-[0.625rem] font-normal uppercase leading-none text-gray-400 dark:text-gray-600"
>{$i18n.t('Experimental')}</span
>
</Tooltip>
</div>
</div>
</div>
<div class="flex flex-col items-center flex-1 @container">
<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
<div class="mx-auto w-full md:px-0 h-full relative">
<div class=" flex flex-col h-full">
<div
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 scrollbar-hidden"
id="messages-container"
bind:this={messagesContainerElement}
on:scroll={onScroll}
>
<div class=" h-full w-full flex flex-col">
<div class="flex-1 p-1">
<Messages bind:messages {onInsert} />
</div>
</div>
</div>
<div class=" pb-[1rem]">
{#if selectedContent}
<div class="text-xs rounded-xl px-2.5 py-3 w-full markdown-prose-xs">
<blockquote>
<div class=" line-clamp-3">
{selectedContent?.text}
</div>
</blockquote>
</div>
{/if}
<MessageInput
bind:chatInputElement
acceptFiles={false}
inputLoading={loading}
showFormattingToolbar={false}
onSubmit={submitHandler}
{onStop}
>
<div slot="menu" class="flex items-center justify-between gap-2 w-full pr-1">
<div>
<Tooltip content={$i18n.t('Edit')} placement="top">
<button
on:click|preventDefault={() => {
editEnabled = !editEnabled;
localStorage.setItem('noteEditEnabled', editEnabled ? 'true' : 'false');
}}
disabled={streaming || loading}
type="button"
class="px-2 @xl:px-2.5 py-2 flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden hover:bg-gray-50 dark:hover:bg-gray-800 {editEnabled
? ' text-sky-500 dark:text-sky-300 bg-sky-50 dark:bg-sky-200/5'
: 'bg-transparent text-gray-600 dark:text-gray-300 '} disabled:opacity-50 disabled:pointer-events-none"
>
<PencilSquare className="size-4" strokeWidth="1.75" />
<span
class="block whitespace-nowrap overflow-hidden text-ellipsis leading-none pr-0.5"
>{$i18n.t('Edit')}</span
>
</button>
</Tooltip>
</div>
<Tooltip content={selectedModelId}>
<select
class=" bg-transparent rounded-lg py-1 px-2 -mx-0.5 text-sm outline-hidden w-full text-right pr-5"
bind:value={selectedModelId}
>
{#each $models.filter((model) => !(model?.info?.meta?.hidden ?? false)) as model}
<option value={model.id} class="bg-gray-50 dark:bg-gray-700"
>{model.name}</option
>
{/each}
</select>
</Tooltip>
</div>
</MessageInput>
</div>
</div>
</div>
</div>
</div>
src/lib/components/notes/NoteEditor/Chat/Message.svelte
-103
View File
@@ -1,103 +0,0 @@
<script lang="ts">
import { onMount, getContext } from 'svelte';
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';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArrowUpLeft from '$lib/components/icons/ArrowUpLeft.svelte';
export let message;
export let idx;
export let onDelete;
export let onEdit;
export let onInsert;
let textAreaElement: HTMLTextAreaElement;
</script>
<div class="flex flex-col gap-1 group">
<div class="flex items-center justify-between pt-1">
<div class="py-1 text-sm font-normal uppercase min-w-[6rem] text-left rounded-lg transition">
{$i18n.t(message.role)}
</div>
<div class="flex items-center gap-2">
<Tooltip placement="top" content={$i18n.t('Insert')}>
<button
class=" text-transparent group-hover:text-gray-500 dark:hover:text-gray-300 transition"
on:click={() => {
onInsert();
}}
>
<ArrowUpLeft className="size-3.5" strokeWidth="2" />
</button>
</Tooltip>
<Tooltip placement="top" content={$i18n.t('Edit')}>
<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>
</Tooltip>
<Tooltip placement="top" content={$i18n.t('Delete')}>
<button
class=" text-transparent group-hover:text-gray-500 dark:hover:text-gray-300 transition"
on:click={() => {
onDelete();
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
</button>
</Tooltip>
</div>
</div>
<div class="flex-1">
<!-- $i18n.t('a user') -->
<!-- $i18n.t('an assistant') -->
{#if !(message?.done ?? true) && message?.content === ''}
<div class="">
<Skeleton size="sm" />
</div>
{:else if message?.edit === true}
<Textarea
className="w-full bg-transparent outline-hidden 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')
})}
bind:value={message.content}
onBlur={() => {
message.edit = false;
}}
/>
{:else}
<div class=" markdown-prose-sm text-sm">
<Markdown id={`note-message-${idx}`} content={message.content} />
</div>
{/if}
</div>
</div>
src/lib/components/notes/NoteEditor/Chat/Messages.svelte
-32
View File
@@ -1,32 +0,0 @@
<script lang="ts">
import { onMount, getContext } from 'svelte';
import Message from './Message.svelte';
const i18n = getContext('i18n');
export let messages = [];
export let onInsert = (content: string) => {};
</script>
<div class="space-y-3 pb-12">
{#each messages as message, idx}
<Message
{message}
{idx}
onInsert={() => {
onInsert(message?.content ?? '');
}}
onEdit={() => {
messages = messages.map((msg, messageIdx) => {
if (messageIdx === idx) {
return { ...msg, edit: true };
}
return msg;
});
}}
onDelete={() => {
messages = messages.filter((message, messageIdx) => messageIdx !== idx);
}}
/>
{/each}
</div>
src/lib/components/notes/NoteEditor/Controls.svelte
-103
View File
@@ -1,103 +0,0 @@
<script lang="ts">
import { getContext } from 'svelte';
const i18n = getContext('i18n');
import XMark from '$lib/components/icons/XMark.svelte';
import { models } from '$lib/stores';
import Collapsible from '$lib/components/common/Collapsible.svelte';
import FileItem from '$lib/components/common/FileItem.svelte';
import Image from '$lib/components/common/Image.svelte';
export let show = false;
export let selectedModelId = '';
export let files = [];
export let onUpdate = (files: any[]) => {
// Default no-op function
};
</script>
<div class="flex items-center mb-1.5 pt-1.5">
<div class=" mr-1 flex items-center">
<button
class="p-0.5 bg-transparent transition rounded-lg"
on:click={() => {
show = !show;
}}
>
<XMark className="size-5" strokeWidth="2.5" />
</button>
</div>
<div class=" font-normal text-base flex items-center gap-1">
<div>
{$i18n.t('Controls')}
</div>
</div>
</div>
<div class="mt-1 px-1.5">
<div class="pb-10">
{#if files.length > 0}
<div class=" text-xs font-normal mb-2">{$i18n.t('Files')}</div>
<div class="flex flex-col gap-1">
{#each files.filter((file) => file.type !== 'image') as file, fileIdx}
<FileItem
className="w-full"
item={file}
small={true}
edit={true}
dismissible={true}
url={file.url}
name={file.name}
type={file.type}
size={file?.size}
loading={file.status === 'uploading'}
on:dismiss={() => {
// Remove the file from the files array
files = files.filter((item) => item.id !== file.id);
files = files;
onUpdate(files);
}}
on:click={() => {
console.log(file);
}}
/>
{/each}
<div class="flex items-center flex-wrap gap-2 mt-1.5">
{#each files.filter((file) => file.type === 'image' || (file?.content_type ?? '').startsWith('image/')) as file, fileIdx}
<Image
src={file.url}
imageClassName=" size-14 rounded-xl object-cover"
dismissible={true}
onDismiss={() => {
files = files.filter((item) => item.id !== file.id);
files = files;
onUpdate(files);
}}
/>
{/each}
</div>
</div>
<hr class="my-2 border-gray-50 dark:border-gray-700/10" />
{/if}
<div class=" text-xs font-normal mb-1">{$i18n.t('Model')}</div>
<div class="w-full">
<select class="w-full bg-transparent text-sm outline-hidden" bind:value={selectedModelId}>
<option value="" class="bg-gray-50 dark:bg-gray-700" disabled>
{$i18n.t('Select a model')}
</option>
{#each $models.filter((model) => !(model?.info?.meta?.hidden ?? false)) as model}
<option value={model.id} class="bg-gray-50 dark:bg-gray-700">{model.name}</option>
{/each}
</select>
</div>
</div>
</div>
src/lib/components/notes/NotePanel.svelte
+3 -5
View File
@@ -3,7 +3,6 @@
import { Pane, PaneResizer } from 'paneforge';
import Drawer from '../common/Drawer.svelte';
import EllipsisVertical from '../icons/EllipsisVertical.svelte';
export let show = false;
export let pane = null;
@@ -35,14 +34,13 @@
const container = document.getElementById(containerId);
// initialize the minSize based on the container width
minSize = Math.floor((400 / container.clientWidth) * 100);
minSize = Math.floor((350 / container.clientWidth) * 100);
// Create a new ResizeObserver instance
const resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
const width = entry.contentRect.width;
// calculate the percentage of 200px
const percentage = (400 / width) * 100;
const percentage = (350 / width) * 100;
// set the minSize to the percentage, must be an integer
minSize = Math.floor(percentage);
@@ -99,7 +97,7 @@
{#if show}
<div class="flex max-h-full min-h-full">
<div
class="w-full pt-2 bg-white dark:shadow-lg dark:bg-gray-850 z-40 pointer-events-auto overflow-y-auto scrollbar-hidden flex flex-col px-2"
class="w-full bg-white dark:bg-gray-900 z-40 pointer-events-auto overflow-hidden scrollbar-hidden flex flex-col"
>
<slot />
</div>
src/lib/components/notes/Notes/NoteMenu.svelte
+15
View File
@@ -11,6 +11,7 @@
import Link from '$lib/components/icons/Link.svelte';
import Pin from '$lib/components/icons/Pin.svelte';
import PinSlash from '$lib/components/icons/PinSlash.svelte';
import ChatBubbleOval from '$lib/components/icons/ChatBubbleOval.svelte';
const i18n = getContext('i18n');
@@ -21,6 +22,7 @@
export let onDelete = () => {};
export let onPin = null;
export let isPinned = false;
export let onChat = null;
export let onCopyLink = null;
export let onCopyToClipboard = null;
@@ -40,6 +42,19 @@
<div slot="content">
<DropdownMenu className="min-w-[180px]">
{#if onChat}
<button
class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[13px] hover:text-gray-900 dark:hover:text-gray-100"
on:click={() => {
onChat();
show = false;
}}
>
<ChatBubbleOval className="size-3.5" strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Chat with note')}</div>
</button>
{/if}
<DropdownSub contentClass="select-none z-50">
<button
slot="trigger"