From ade4b0d691f1cfaacf5adef5bfe4479abb3e3c56 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 7 Jul 2025 21:22:07 +0400
Subject: [PATCH] feat: insert chat message to notes

---
 .../components/common/RichTextInput.svelte    | 17 ++++
 src/lib/components/common/Textarea.svelte     |  2 +
 src/lib/components/notes/NoteEditor.svelte    | 16 +++-
 .../components/notes/NoteEditor/Chat.svelte   |  4 +-
 .../notes/NoteEditor/Chat/Message.svelte      | 80 ++++++++++++-------
 .../notes/NoteEditor/Chat/Messages.svelte     |  4 +
 6 files changed, 91 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/common/RichTextInput.svelte b/src/lib/components/common/RichTextInput.svelte
index 420f288771..1631731966 100644
--- a/src/lib/components/common/RichTextInput.svelte
+++ b/src/lib/components/common/RichTextInput.svelte
@@ -204,6 +204,23 @@
 		focus();
 	};
 
+	export const insertContent = (content) => {
+		if (!editor) return;
+		const { state, view } = editor;
+		const { schema, tr } = state;
+
+		// If content is a string, convert it to a ProseMirror node
+		const htmlContent = marked.parse(content, {
+			breaks: true,
+			gfm: true
+		});
+
+		// insert the HTML content at the current selection
+		editor.commands.insertContent(htmlContent);
+
+		focus();
+	};
+
 	export const replaceVariables = (variables) => {
 		if (!editor) return;
 		const { state, view } = editor;
diff --git a/src/lib/components/common/Textarea.svelte b/src/lib/components/common/Textarea.svelte
index 612ae1937d..9a1a182398 100644
--- a/src/lib/components/common/Textarea.svelte
+++ b/src/lib/components/common/Textarea.svelte
@@ -10,6 +10,7 @@
 	export let className =
 		'w-full rounded-lg px-3.5 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden  h-full';
 
+	export let onBlur = () => {};
 	let textareaElement;
 
 	// Adjust height on mount and after setting the element.
@@ -59,4 +60,5 @@
 	on:focus={() => {
 		resize();
 	}}
+	on:blur={onBlur}
 />
diff --git a/src/lib/components/notes/NoteEditor.svelte b/src/lib/components/notes/NoteEditor.svelte
index fa8b924387..fbc3c4816a 100644
--- a/src/lib/components/notes/NoteEditor.svelte
+++ b/src/lib/components/notes/NoteEditor.svelte
@@ -111,6 +111,8 @@
 	let enhancing = false;
 	let streaming = false;
 
+	let inputElement = null;
+
 	const init = async () => {
 		loading = true;
 		const res = await getNoteById(localStorage.token, id).catch((error) => {
@@ -638,6 +640,10 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 		dragged = false;
 	};
 
+	const insertHandler = (content) => {
+		inputElement?.insertContent(content);
+	};
+
 	onMount(async () => {
 		await tick();
 
@@ -896,6 +902,7 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 						{/if}
 
 						<RichTextInput
+							bind:this={inputElement}
 							className="input-prose-sm px-0.5"
 							bind:value={note.data.content.json}
 							html={note.data?.content?.html}
@@ -1035,7 +1042,14 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 	</Pane>
 	<NotePanel bind:show={showPanel}>
 		{#if selectedPanel === 'chat'}
-			<Chat bind:show={showPanel} bind:selectedModelId bind:messages {files} {note} />
+			<Chat
+				bind:show={showPanel}
+				bind:selectedModelId
+				bind:messages
+				{files}
+				{note}
+				onInsert={insertHandler}
+			/>
 		{:else if selectedPanel === 'settings'}
 			<Settings bind:show={showPanel} bind:selectedModelId />
 		{/if}
diff --git a/src/lib/components/notes/NoteEditor/Chat.svelte b/src/lib/components/notes/NoteEditor/Chat.svelte
index ae8561ae3e..6afaacfc78 100644
--- a/src/lib/components/notes/NoteEditor/Chat.svelte
+++ b/src/lib/components/notes/NoteEditor/Chat.svelte
@@ -30,6 +30,8 @@
 	export let files = [];
 	export let messages = [];
 
+	export let onInsert = (content) => {};
+
 	let loaded = false;
 
 	let loading = false;
@@ -245,7 +247,7 @@
 				>
 					<div class=" h-full w-full flex flex-col">
 						<div class="flex-1 p-1">
-							<Messages bind:messages />
+							<Messages bind:messages {onInsert} />
 						</div>
 					</div>
 				</div>
diff --git a/src/lib/components/notes/NoteEditor/Chat/Message.svelte b/src/lib/components/notes/NoteEditor/Chat/Message.svelte
index b4d5d58fa5..fda8593c8f 100644
--- a/src/lib/components/notes/NoteEditor/Chat/Message.svelte
+++ b/src/lib/components/notes/NoteEditor/Chat/Message.svelte
@@ -7,12 +7,15 @@
 	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 DocumentArrowUp from '$lib/components/icons/DocumentArrowUp.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	export let message;
 	export let idx;
 
 	export let onDelete;
 	export let onEdit;
+	export let onInsert;
 
 	let textAreaElement: HTMLTextAreaElement;
 </script>
@@ -24,36 +27,51 @@
 		</div>
 
 		<div class="flex items-center gap-2">
-			<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>
-
-			<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"
+			<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();
+					}}
 				>
-					<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>
+					<DocumentArrowUp 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>
 
@@ -67,11 +85,13 @@
 			</div>
 		{:else if message?.edit === true}
 			<Textarea
-				class="w-full bg-transparent outline-hidden rounded-lg 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">
diff --git a/src/lib/components/notes/NoteEditor/Chat/Messages.svelte b/src/lib/components/notes/NoteEditor/Chat/Messages.svelte
index c0bcf51c86..c959ea0453 100644
--- a/src/lib/components/notes/NoteEditor/Chat/Messages.svelte
+++ b/src/lib/components/notes/NoteEditor/Chat/Messages.svelte
@@ -5,6 +5,7 @@
 	const i18n = getContext('i18n');
 
 	export let messages = [];
+	export let onInsert = (content: string) => {};
 </script>
 
 <div class="space-y-3 pb-12">
@@ -12,6 +13,9 @@
 		<Message
 			{message}
 			{idx}
+			onInsert={() => {
+				onInsert(message?.content ?? '');
+			}}
 			onEdit={() => {
 				messages = messages.map((msg, messageIdx) => {
 					if (messageIdx === idx) {