feat: note chat

src/lib/components/notes/NoteEditor.svelte

@@ -99,6 +99,8 @@
 	let displayMediaRecord = false;
 
 	let showPanel = false;
+	let selectedPanel = 'chat';
+
 	let showDeleteConfirm = false;
 
 	let dragged = false;
@@ -677,6 +679,9 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 	import { PaneGroup, Pane, PaneResizer } from 'paneforge';
 	import XMark from '../icons/XMark.svelte';
 	import MenuLines from '../icons/MenuLines.svelte';
+	import ChatBubbleOval from '../icons/ChatBubbleOval.svelte';
+	import Settings from './NoteEditor/Settings.svelte';
+	import Chat from './NoteEditor/Chat.svelte';
 </script>
 
 <FilesOverlay show={dragged} />
@@ -709,7 +714,7 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 						<div class="w-full flex items-center">
 							<div
 								class="{$showSidebar
-									? 'md:hidden'
+									? 'md:hidden pl-0.5'
 									: ''} flex flex-none items-center pr-1 -translate-x-1"
 							>
 								<button
@@ -734,7 +739,7 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 								required
 							/>
 
-							<div class="flex items-center gap-2 translate-x-1">
+							<div class="flex items-center gap-0.5 translate-x-1">
 								{#if note.data?.versions?.length > 0}
 									<div>
 										<div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr">
@@ -780,17 +785,46 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 										showDeleteConfirm = true;
 									}}
 								>
-									<EllipsisHorizontal className="size-5" />
+									<div class="p-1 bg-transparent hover:bg-white/5 transition rounded-lg">
+										<EllipsisHorizontal className="size-5" />
+									</div>
 								</NoteMenu>
 
-								<button
-									class="p-1.5 bg-transparent hover:bg-white/5 transition rounded-lg"
-									on:click={() => {
-										showPanel = !showPanel;
-									}}
-								>
-									<Cog6 />
-								</button>
+								<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('Settings')} 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';
+											}
+										}}
+									>
+										<Cog6 />
+									</button>
+								</Tooltip>
 							</div>
 						</div>
 					</div>
@@ -998,36 +1032,10 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 		</div>
 	</Pane>
 	<NotePanel bind:show={showPanel}>
-		<div class="flex items-center mb-2">
-			<div class=" -translate-x-1.5">
-				<button
-					class="p-1.5 bg-transparent transition rounded-lg"
-					on:click={() => {
-						showPanel = !showPanel;
-					}}
-				>
-					<XMark className="size-5" strokeWidth="2.5" />
-				</button>
-			</div>
-
-			<div class=" font-medium text-base">Settings</div>
-		</div>
-
-		<div class="mt-1">
-			<div>
-				<div class=" text-xs font-medium mb-1">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>
+		{#if selectedPanel === 'chat'}
+			<Chat bind:show={showPanel} bind:selectedModelId />
+		{:else if selectedPanel === 'settings'}
+			<Settings bind:show={showPanel} bind:selectedModelId />
+		{/if}
 	</NotePanel>
 </PaneGroup>

src/lib/components/notes/NoteEditor/Chat.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	export let show = false;
+	export let selectedModelId = '';
+
+	import { toast } from 'svelte-sonner';
+
+	import { goto } from '$app/navigation';
+	import { onMount, tick, getContext } from 'svelte';
+
+	import {
+		OLLAMA_API_BASE_URL,
+		OPENAI_API_BASE_URL,
+		WEBUI_API_BASE_URL,
+		WEBUI_BASE_URL
+	} from '$lib/constants';
+	import { WEBUI_NAME, config, user, models, settings } from '$lib/stores';
+
+	import { chatCompletion, generateOpenAIChatCompletion } 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';
+
+	const i18n = getContext('i18n');
+
+	let loaded = false;
+
+	let loading = false;
+	let stopResponseFlag = false;
+
+	let systemTextareaElement: HTMLTextAreaElement;
+	let messagesContainerElement: HTMLDivElement;
+
+	let system = '';
+	let content = '';
+
+	let messages = [];
+	let chatInputElement = null;
+
+	const scrollToBottom = () => {
+		const element = messagesContainerElement;
+
+		if (element) {
+			element.scrollTop = element?.scrollHeight;
+		}
+	};
+
+	const stopHandler = () => {
+		stopResponseFlag = true;
+		console.log('stopResponse');
+	};
+
+	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;
+		}
+
+		const [res, controller] = await chatCompletion(
+			localStorage.token,
+			{
+				model: model.id,
+				stream: true,
+				messages: [
+					system
+						? {
+								role: 'system',
+								content: system
+							}
+						: undefined,
+					...messages
+				].filter((message) => message)
+			},
+			`${WEBUI_BASE_URL}/api`
+		);
+
+		let responseMessage;
+		if (messages.at(-1)?.role === 'assistant') {
+			responseMessage = messages.at(-1);
+		} else {
+			responseMessage = {
+				role: 'assistant',
+				content: ''
+			};
+			messages.push(responseMessage);
+			messages = messages;
+		}
+
+		await tick();
+		const textareaElement = document.getElementById(`assistant-${messages.length - 1}-textarea`);
+
+		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');
+					}
+					break;
+				}
+
+				try {
+					let lines = value.split('\n');
+
+					for (const line of lines) {
+						if (line !== '') {
+							console.log(line);
+							if (line === 'data: [DONE]') {
+								// responseMessage.done = true;
+								messages = messages;
+							} else {
+								let data = JSON.parse(line.replace(/^data: /, ''));
+								console.log(data);
+
+								if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
+									continue;
+								} else {
+									textareaElement.style.height = textareaElement.scrollHeight + 'px';
+
+									responseMessage.content += data.choices[0].delta.content ?? '';
+									messages = messages;
+
+									textareaElement.style.height = textareaElement.scrollHeight + 'px';
+
+									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();
+
+			loading = false;
+			stopResponseFlag = false;
+		}
+	};
+
+	onMount(async () => {
+		if ($user?.role !== 'admin') {
+			await goto('/');
+		}
+
+		if ($settings?.models) {
+			selectedModelId = $settings?.models[0];
+		} else if ($config?.default_models) {
+			selectedModelId = $config?.default_models.split(',')[0];
+		} else {
+			selectedModelId = '';
+		}
+		loaded = true;
+	});
+</script>
+
+<div class="flex items-center mb-2">
+	<div class=" -translate-x-1.5">
+		<button
+			class="p-1.5 bg-transparent transition rounded-lg"
+			on:click={() => {
+				show = !show;
+			}}
+		>
+			<XMark className="size-5" strokeWidth="2.5" />
+		</button>
+	</div>
+
+	<div class=" font-medium text-base flex items-center gap-1">
+		<div>
+			{$i18n.t('Chat')}
+		</div>
+
+		<div>
+			<Tooltip
+				content={$i18n.t('This is an experimental feature, it may not work as expected.')}
+				position="top"
+				className="inline-block"
+			>
+				<span class="text-gray-500 text-sm">({$i18n.t('Experimental')})</span>
+			</Tooltip>
+		</div>
+	</div>
+</div>
+
+<div class="flex flex-col items-center mb-2 flex-1">
+	<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"
+					id="messages-container"
+					bind:this={messagesContainerElement}
+				>
+					<div class=" h-full w-full flex flex-col">
+						<div class="flex-1 p-1">
+							<Messages bind:messages />
+						</div>
+					</div>
+				</div>
+
+				<div class=" pb-2">
+					<MessageInput
+						bind:chatInputElement
+						acceptFiles={false}
+						inputLoading={loading}
+						onSubmit={submitHandler}
+						onStop={stopHandler}
+					>
+						<div slot="menu">
+							<select
+								class=" bg-transparent rounded-lg py-1 px-2 -mx-0.5 text-sm outline-hidden w-50"
+								bind:value={selectedModelId}
+							>
+								{#each $models as model}
+									<option value={model.id} class="bg-gray-50 dark:bg-gray-700">{model.name}</option>
+								{/each}
+							</select>
+						</div>
+					</MessageInput>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/lib/components/notes/NoteEditor/Chat/Message.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	export let message;
+	export let idx;
+
+	export let onDelete;
+
+	let textAreaElement: HTMLTextAreaElement;
+
+	onMount(() => {
+		textAreaElement.style.height = '';
+		textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
+	});
+</script>
+
+<div class="flex flex-col gap-1 group">
+	<div class="flex items-start pt-1">
+		<div
+			class="px-2 py-1 text-sm font-semibold uppercase min-w-[6rem] text-left rounded-lg transition"
+		>
+			{$i18n.t(message.role)}
+		</div>
+	</div>
+
+	<div class="flex-1">
+		<!-- $i18n.t('a user') -->
+		<!-- $i18n.t('an assistant') -->
+		<textarea
+			id="{message.role}-{idx}-textarea"
+			bind:this={textAreaElement}
+			class="w-full bg-transparent outline-hidden rounded-lg px-2 text-sm resize-none overflow-hidden"
+			placeholder={$i18n.t(`Enter {{role}} message here`, {
+				role: message.role === 'user' ? $i18n.t('a user') : $i18n.t('an assistant')
+			})}
+			rows="1"
+			on:input={(e) => {
+				textAreaElement.style.height = '';
+				textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
+			}}
+			on:focus={(e) => {
+				textAreaElement.style.height = '';
+				textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
+
+				// e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
+			}}
+			bind:value={message.content}
+		/>
+	</div>
+</div>

src/lib/components/notes/NoteEditor/Chat/Messages.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { onMount, getContext } from 'svelte';
+	import Message from './Message.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let messages = [];
+</script>
+
+<div class="space-y-3">
+	{#each messages as message, idx}
+		<Message
+			{message}
+			{idx}
+			onDelete={() => {
+				messages = messages.filter((message, messageIdx) => messageIdx !== idx);
+			}}
+		/>
+	{/each}
+</div>

src/lib/components/notes/NoteEditor/Settings.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import { models } from '$lib/stores';
+
+	export let show = false;
+	export let selectedModelId = '';
+</script>
+
+<div class="flex items-center mb-2">
+	<div class=" -translate-x-1.5">
+		<button
+			class="p-1.5 bg-transparent transition rounded-lg"
+			on:click={() => {
+				show = !show;
+			}}
+		>
+			<XMark className="size-5" strokeWidth="2.5" />
+		</button>
+	</div>
+
+	<div class=" font-medium text-base">Settings</div>
+</div>
+
+<div class="mt-1">
+	<div>
+		<div class=" text-xs font-medium mb-1">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

@@ -61,8 +61,8 @@
 
 	<Pane
 		bind:pane
-		defaultSize={30}
-		minSize={30}
+		defaultSize={35}
+		minSize={35}
 		onCollapse={() => {
 			show = false;
 		}}
@@ -72,7 +72,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"
+					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"
 				>
 					<slot />
 				</div>