From 4acd278624f0005d5dd83a8b7b466ebbb34b72d6 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 3 May 2025 22:53:23 +0400
Subject: [PATCH] refac

---
 .../components/channel/MessageInput.svelte    |   6 +-
 src/lib/components/chat/MessageInput.svelte   |   6 +-
 .../chat/MessageInput/VoiceRecording.svelte   | 149 +++++++++-------
 .../components/common/RichTextInput.svelte    | 164 +++++++++--------
 src/lib/components/icons/Calendar.svelte      |  19 ++
 src/lib/components/icons/CalendarSolid.svelte |  11 ++
 src/lib/components/icons/Users.svelte         |  19 ++
 src/lib/components/notes/NoteEditor.svelte    | 167 ++++++++++++------
 src/lib/components/notes/Notes.svelte         |  39 ++--
 src/lib/components/playground/Notes.svelte    |   6 +-
 .../KnowledgeBase/AddTextContentModal.svelte  |   6 +-
 11 files changed, 370 insertions(+), 222 deletions(-)
 create mode 100644 src/lib/components/icons/Calendar.svelte
 create mode 100644 src/lib/components/icons/CalendarSolid.svelte
 create mode 100644 src/lib/components/icons/Users.svelte

diff --git a/src/lib/components/channel/MessageInput.svelte b/src/lib/components/channel/MessageInput.svelte
index 9f495a8de..d60851fc8 100644
--- a/src/lib/components/channel/MessageInput.svelte
+++ b/src/lib/components/channel/MessageInput.svelte
@@ -357,14 +357,14 @@
 			{#if recording}
 				<VoiceRecording
 					bind:recording
-					on:cancel={async () => {
+					onCancel={async () => {
 						recording = false;
 
 						await tick();
 						document.getElementById(`chat-input-${id}`)?.focus();
 					}}
-					on:confirm={async (e) => {
-						const { text, filename } = e.detail;
+					onConfirm={async (data) => {
+						const { text, filename } = data;
 						content = `${content}${text} `;
 						recording = false;
 
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index d31861459..bcf28f61c 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -479,14 +479,14 @@
 					{#if recording}
 						<VoiceRecording
 							bind:recording
-							on:cancel={async () => {
+							onCancel={async () => {
 								recording = false;
 
 								await tick();
 								document.getElementById('chat-input')?.focus();
 							}}
-							on:confirm={async (e) => {
-								const { text, filename } = e.detail;
+							onConfirm={async (data) => {
+								const { text, filename } = data;
 								prompt = `${prompt}${text} `;
 
 								recording = false;
diff --git a/src/lib/components/chat/MessageInput/VoiceRecording.svelte b/src/lib/components/chat/MessageInput/VoiceRecording.svelte
index 70472055f..726e26bbb 100644
--- a/src/lib/components/chat/MessageInput/VoiceRecording.svelte
+++ b/src/lib/components/chat/MessageInput/VoiceRecording.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { createEventDispatcher, tick, getContext, onMount, onDestroy } from 'svelte';
+	import { tick, getContext, onMount, onDestroy } from 'svelte';
 	import { config, settings } from '$lib/stores';
 	import { blobToFile, calculateSHA256, extractCurlyBraceWords } from '$lib/utils';
 
@@ -8,11 +8,13 @@
 
 	const i18n = getContext('i18n');
 
-	const dispatch = createEventDispatcher();
-
 	export let recording = false;
+	export let transcribe = true;
 	export let className = ' p-2.5 w-full max-w-full';
 
+	export let onCancel = () => {};
+	export let onConfirm = (data) => {};
+
 	let loading = false;
 	let confirmed = false;
 
@@ -130,20 +132,32 @@
 		detectSound();
 	};
 
-	const transcribeHandler = async (audioBlob) => {
+	const onStopHandler = async (audioBlob) => {
 		// Create a blob from the audio chunks
 
 		await tick();
 		const file = blobToFile(audioBlob, 'recording.wav');
 
-		const res = await transcribeAudio(localStorage.token, file).catch((error) => {
-			toast.error(`${error}`);
-			return null;
-		});
+		if (transcribe) {
+			if ($config.audio.stt.engine === 'web' || ($settings?.audio?.stt?.engine ?? '') === 'web') {
+				// with web stt, we don't need to send the file to the server
+				return;
+			}
 
-		if (res) {
-			console.log(res);
-			dispatch('confirm', res);
+			const res = await transcribeAudio(localStorage.token, file).catch((error) => {
+				toast.error(`${error}`);
+				return null;
+			});
+
+			if (res) {
+				console.log(res);
+				onConfirm(res);
+			}
+		} else {
+			onConfirm({
+				file: file,
+				blob: audioBlob
+			});
 		}
 	};
 
@@ -168,6 +182,7 @@
 				autoGainControl: true
 			}
 		});
+
 		mediaRecorder = new MediaRecorder(stream);
 		mediaRecorder.onstart = () => {
 			console.log('Recording started');
@@ -180,77 +195,79 @@
 		mediaRecorder.ondataavailable = (event) => audioChunks.push(event.data);
 		mediaRecorder.onstop = async () => {
 			console.log('Recording stopped');
-			if ($config.audio.stt.engine === 'web' || ($settings?.audio?.stt?.engine ?? '') === 'web') {
-				audioChunks = [];
-			} else {
-				if (confirmed) {
-					const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
 
-					await transcribeHandler(audioBlob);
+			if (confirmed) {
+				const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+				await onStopHandler(audioBlob);
 
-					confirmed = false;
-					loading = false;
-				}
-				audioChunks = [];
-				recording = false;
+				confirmed = false;
+				loading = false;
 			}
+
+			audioChunks = [];
+			recording = false;
 		};
 		mediaRecorder.start();
-		if ($config.audio.stt.engine === 'web' || ($settings?.audio?.stt?.engine ?? '') === 'web') {
-			if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
-				// Create a SpeechRecognition object
-				speechRecognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
 
-				// Set continuous to true for continuous recognition
-				speechRecognition.continuous = true;
+		if (transcribe) {
+			if ($config.audio.stt.engine === 'web' || ($settings?.audio?.stt?.engine ?? '') === 'web') {
+				if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
+					// Create a SpeechRecognition object
+					speechRecognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
 
-				// Set the timeout for turning off the recognition after inactivity (in milliseconds)
-				const inactivityTimeout = 2000; // 3 seconds
+					// Set continuous to true for continuous recognition
+					speechRecognition.continuous = true;
 
-				let timeoutId;
-				// Start recognition
-				speechRecognition.start();
+					// Set the timeout for turning off the recognition after inactivity (in milliseconds)
+					const inactivityTimeout = 2000; // 3 seconds
 
-				// Event triggered when speech is recognized
-				speechRecognition.onresult = async (event) => {
-					// Clear the inactivity timeout
-					clearTimeout(timeoutId);
+					let timeoutId;
+					// Start recognition
+					speechRecognition.start();
 
-					// Handle recognized speech
-					console.log(event);
-					const transcript = event.results[Object.keys(event.results).length - 1][0].transcript;
+					// Event triggered when speech is recognized
+					speechRecognition.onresult = async (event) => {
+						// Clear the inactivity timeout
+						clearTimeout(timeoutId);
 
-					transcription = `${transcription}${transcript}`;
+						// Handle recognized speech
+						console.log(event);
+						const transcript = event.results[Object.keys(event.results).length - 1][0].transcript;
 
-					await tick();
-					document.getElementById('chat-input')?.focus();
+						transcription = `${transcription}${transcript}`;
 
-					// Restart the inactivity timeout
-					timeoutId = setTimeout(() => {
-						console.log('Speech recognition turned off due to inactivity.');
-						speechRecognition.stop();
-					}, inactivityTimeout);
-				};
+						await tick();
+						document.getElementById('chat-input')?.focus();
 
-				// Event triggered when recognition is ended
-				speechRecognition.onend = function () {
-					// Restart recognition after it ends
-					console.log('recognition ended');
+						// Restart the inactivity timeout
+						timeoutId = setTimeout(() => {
+							console.log('Speech recognition turned off due to inactivity.');
+							speechRecognition.stop();
+						}, inactivityTimeout);
+					};
 
-					confirmRecording();
-					dispatch('confirm', { text: transcription });
-					confirmed = false;
-					loading = false;
-				};
+					// Event triggered when recognition is ended
+					speechRecognition.onend = function () {
+						// Restart recognition after it ends
+						console.log('recognition ended');
 
-				// Event triggered when an error occurs
-				speechRecognition.onerror = function (event) {
-					console.log(event);
-					toast.error($i18n.t(`Speech recognition error: {{error}}`, { error: event.error }));
-					dispatch('cancel');
+						confirmRecording();
+						onConfirm({
+							text: transcription
+						});
+						confirmed = false;
+						loading = false;
+					};
 
-					stopRecording();
-				};
+					// Event triggered when an error occurs
+					speechRecognition.onerror = function (event) {
+						console.log(event);
+						toast.error($i18n.t(`Speech recognition error: {{error}}`, { error: event.error }));
+						onCancel();
+
+						stopRecording();
+					};
+				}
 			}
 		}
 	};
@@ -339,7 +356,7 @@
              rounded-full"
 			on:click={async () => {
 				stopRecording();
-				dispatch('cancel');
+				onCancel();
 			}}
 		>
 			<svg
diff --git a/src/lib/components/common/RichTextInput.svelte b/src/lib/components/common/RichTextInput.svelte
index 3a30eb646..bfcc37860 100644
--- a/src/lib/components/common/RichTextInput.svelte
+++ b/src/lib/components/common/RichTextInput.svelte
@@ -29,15 +29,19 @@
 
 	export let oncompositionstart = (e) => {};
 	export let oncompositionend = (e) => {};
+	export let onChange = (e) => {};
 
 	// create a lowlight instance with all languages loaded
 	const lowlight = createLowlight(all);
 
 	export let className = 'input-prose';
 	export let placeholder = 'Type here...';
-	export let value = '';
-	export let id = '';
 
+	export let id = '';
+	export let value = '';
+	export let html = '';
+
+	export let json = false;
 	export let raw = false;
 
 	export let preserveBreaks = false;
@@ -128,41 +132,43 @@
 	};
 
 	onMount(async () => {
-		console.log(value);
-
-		if (preserveBreaks) {
-			turndownService.addRule('preserveBreaks', {
-				filter: 'br', // Target <br> elements
-				replacement: function (content) {
-					return '<br/>';
-				}
-			});
-		}
-
 		let content = value;
 
-		if (!raw) {
-			async function tryParse(value, attempts = 3, interval = 100) {
-				try {
-					// Try parsing the value
-					return marked.parse(value.replaceAll(`\n<br/>`, `<br/>`), {
-						breaks: false
-					});
-				} catch (error) {
-					// If no attempts remain, fallback to plain text
-					if (attempts <= 1) {
-						return value;
+		if (!json) {
+			if (preserveBreaks) {
+				turndownService.addRule('preserveBreaks', {
+					filter: 'br', // Target <br> elements
+					replacement: function (content) {
+						return '<br/>';
 					}
-					// Wait for the interval, then retry
-					await new Promise((resolve) => setTimeout(resolve, interval));
-					return tryParse(value, attempts - 1, interval); // Recursive call
-				}
+				});
 			}
 
-			// Usage example
-			content = await tryParse(value);
+			if (!raw) {
+				async function tryParse(value, attempts = 3, interval = 100) {
+					try {
+						// Try parsing the value
+						return marked.parse(value.replaceAll(`\n<br/>`, `<br/>`), {
+							breaks: false
+						});
+					} catch (error) {
+						// If no attempts remain, fallback to plain text
+						if (attempts <= 1) {
+							return value;
+						}
+						// Wait for the interval, then retry
+						await new Promise((resolve) => setTimeout(resolve, interval));
+						return tryParse(value, attempts - 1, interval); // Recursive call
+					}
+				}
+
+				// Usage example
+				content = await tryParse(value);
+			}
 		}
 
+		console.log('content', content);
+
 		editor = new Editor({
 			element: element,
 			extensions: [
@@ -198,32 +204,44 @@
 				// force re-render so `editor.isActive` works as expected
 				editor = editor;
 
-				if (!raw) {
-					let newValue = turndownService
-						.turndown(
-							editor
-								.getHTML()
-								.replace(/<p><\/p>/g, '<br/>')
-								.replace(/ {2,}/g, (m) => m.replace(/ /g, '\u00a0'))
-						)
-						.replace(/\u00a0/g, ' ');
+				html = editor.getHTML();
 
-					if (!preserveBreaks) {
-						newValue = newValue.replace(/<br\/>/g, '');
-					}
+				onChange({
+					html: editor.getHTML(),
+					json: editor.getJSON(),
+					md: turndownService.turndown(editor.getHTML())
+				});
 
-					if (value !== newValue) {
-						value = newValue;
+				if (json) {
+					value = editor.getJSON();
+				} else {
+					if (!raw) {
+						let newValue = turndownService
+							.turndown(
+								editor
+									.getHTML()
+									.replace(/<p><\/p>/g, '<br/>')
+									.replace(/ {2,}/g, (m) => m.replace(/ /g, '\u00a0'))
+							)
+							.replace(/\u00a0/g, ' ');
 
-						// check if the node is paragraph as well
-						if (editor.isActive('paragraph')) {
-							if (value === '') {
-								editor.commands.clearContent();
+						if (!preserveBreaks) {
+							newValue = newValue.replace(/<br\/>/g, '');
+						}
+
+						if (value !== newValue) {
+							value = newValue;
+
+							// check if the node is paragraph as well
+							if (editor.isActive('paragraph')) {
+								if (value === '') {
+									editor.commands.clearContent();
+								}
 							}
 						}
+					} else {
+						value = editor.getHTML();
 					}
-				} else {
-					value = editor.getHTML();
 				}
 			},
 			editorProps: {
@@ -356,35 +374,25 @@
 		}
 	});
 
-	// Update the editor content if the external `value` changes
-	$: if (
-		editor &&
-		(raw
-			? value !== editor.getHTML()
-			: value !==
-				turndownService
-					.turndown(
-						(preserveBreaks
-							? editor.getHTML().replace(/<p><\/p>/g, '<br/>')
-							: editor.getHTML()
-						).replace(/ {2,}/g, (m) => m.replace(/ /g, '\u00a0'))
-					)
-					.replace(/\u00a0/g, ' '))
-	) {
-		if (raw) {
-			editor.commands.setContent(value);
-		} else {
-			preserveBreaks
-				? editor.commands.setContent(value)
-				: editor.commands.setContent(
-						marked.parse(value.replaceAll(`\n<br/>`, `<br/>`), {
-							breaks: false
-						})
-					); // Update editor content
-		}
-
-		selectTemplate();
+	$: if (value && editor) {
+		onValueChange();
 	}
+
+	const onValueChange = () => {
+		if (!editor) return;
+
+		if (json) {
+			if (JSON.stringify(value) !== JSON.stringify(editor.getJSON())) {
+				editor.commands.setContent(value);
+				selectTemplate();
+			}
+		} else {
+			if (value !== editor.getHTML()) {
+				editor.commands.setContent(value);
+				selectTemplate();
+			}
+		}
+	};
 </script>
 
 <div bind:this={element} class="relative w-full min-w-full h-full min-h-fit {className}" />
diff --git a/src/lib/components/icons/Calendar.svelte b/src/lib/components/icons/Calendar.svelte
new file mode 100644
index 000000000..4406015fd
--- /dev/null
+++ b/src/lib/components/icons/Calendar.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-3';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+	/>
+</svg>
diff --git a/src/lib/components/icons/CalendarSolid.svelte b/src/lib/components/icons/CalendarSolid.svelte
new file mode 100644
index 000000000..3f75fc91b
--- /dev/null
+++ b/src/lib/components/icons/CalendarSolid.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let className = 'size-4';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class={className}>
+	<path
+		fill-rule="evenodd"
+		d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z"
+		clip-rule="evenodd"
+	/>
+</svg>
diff --git a/src/lib/components/icons/Users.svelte b/src/lib/components/icons/Users.svelte
new file mode 100644
index 000000000..9ef032dd7
--- /dev/null
+++ b/src/lib/components/icons/Users.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-3';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+	/>
+</svg>
diff --git a/src/lib/components/notes/NoteEditor.svelte b/src/lib/components/notes/NoteEditor.svelte
index c12511e04..3d2ebf837 100644
--- a/src/lib/components/notes/NoteEditor.svelte
+++ b/src/lib/components/notes/NoteEditor.svelte
@@ -3,26 +3,58 @@
 	const i18n = getContext('i18n');
 
 	import { toast } from 'svelte-sonner';
-	import { getNoteById } from '$lib/apis/notes';
+
+	import { showSidebar } from '$lib/stores';
+	import { goto } from '$app/navigation';
+
+	import dayjs from '$lib/dayjs';
+	import calendar from 'dayjs/plugin/calendar';
+	import duration from 'dayjs/plugin/duration';
+	import relativeTime from 'dayjs/plugin/relativeTime';
+
+	dayjs.extend(calendar);
+	dayjs.extend(duration);
+	dayjs.extend(relativeTime);
+
+	async function loadLocale(locales) {
+		for (const locale of locales) {
+			try {
+				dayjs.locale(locale);
+				break; // Stop after successfully loading the first available locale
+			} catch (error) {
+				console.error(`Could not load locale '${locale}':`, error);
+			}
+		}
+	}
+
+	// Assuming $i18n.languages is an array of language codes
+	$: loadLocale($i18n.languages);
+
+	import { getNoteById, updateNoteById } from '$lib/apis/notes';
 
 	import RichTextInput from '../common/RichTextInput.svelte';
 	import Spinner from '../common/Spinner.svelte';
-	import Sparkles from '../icons/Sparkles.svelte';
-	import SparklesSolid from '../icons/SparklesSolid.svelte';
 	import Mic from '../icons/Mic.svelte';
 	import VoiceRecording from '../chat/MessageInput/VoiceRecording.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
-	import { showSidebar } from '$lib/stores';
+
+	import Calendar from '../icons/Calendar.svelte';
+	import Users from '../icons/Users.svelte';
 
 	export let id: null | string = null;
 
-	let title = '';
-	let data = {
-		content: '',
-		files: []
+	let note = {
+		title: '',
+		data: {
+			content: {
+				json: null,
+				html: '',
+				md: ''
+			}
+		},
+		meta: null,
+		access_control: null
 	};
-	let meta = null;
-	let accessControl = null;
 
 	let voiceInput = false;
 	let loading = false;
@@ -35,15 +67,38 @@
 		});
 
 		if (res) {
-			title = res.title;
-			data = res.data;
-			meta = res.meta;
-			accessControl = res.access_control;
+			note = res;
+		} else {
+			toast.error($i18n.t('Note not found'));
+			goto('/notes');
+			return;
 		}
 
 		loading = false;
 	};
 
+	let debounceTimeout: NodeJS.Timeout | null = null;
+
+	const changeDebounceHandler = () => {
+		console.log('debounce');
+		if (debounceTimeout) {
+			clearTimeout(debounceTimeout);
+		}
+
+		debounceTimeout = setTimeout(async () => {
+			const res = await updateNoteById(localStorage.token, id, {
+				...note,
+				title: note.title === '' ? $i18n.t('Untitled') : note.title
+			}).catch((e) => {
+				toast.error(`${e}`);
+			});
+		}, 200);
+	};
+
+	$: if (note) {
+		changeDebounceHandler();
+	}
+
 	$: if (id) {
 		init();
 	}
@@ -56,35 +111,55 @@
 				<Spinner />
 			</div>
 		</div>
-	{/if}
+	{:else}
+		<div class=" w-full flex flex-col {loading ? 'opacity-20' : ''}">
+			<div class="shrink-0 w-full flex justify-between items-center px-4.5 mb-1">
+				<div class="w-full">
+					<input
+						class="w-full text-2xl font-medium bg-transparent outline-hidden"
+						type="text"
+						bind:value={note.title}
+						placeholder={$i18n.t('Title')}
+						required
+					/>
+				</div>
+			</div>
 
-	<div class=" w-full flex flex-col gap-2 {loading ? 'opacity-20' : ''}">
-		<div class="shrink-0 w-full flex justify-between items-center px-4.5">
-			<div class="w-full">
-				<input
-					class="w-full text-2xl font-medium bg-transparent outline-hidden"
-					type="text"
-					bind:value={title}
-					placeholder={$i18n.t('Title')}
-					required
+			<div
+				class="flex gap-1 px-3.5 items-center text-xs font-medium text-gray-500 dark:text-gray-500 mb-4"
+			>
+				<button class=" flex items-center gap-1 w-fit py-1 px-1.5 rounded-lg">
+					<Calendar className="size-3.5" strokeWidth="2" />
+
+					<span>{dayjs(note.created_at / 1000000).calendar()}</span>
+				</button>
+
+				<button class=" flex items-center gap-1 w-fit py-1 px-1.5 rounded-lg">
+					<Users className="size-3.5" strokeWidth="2" />
+
+					<span> You </span>
+				</button>
+			</div>
+
+			<div class=" flex-1 w-full h-full overflow-auto px-4.5 pb-5">
+				<RichTextInput
+					className="input-prose-sm"
+					bind:value={note.data.content.json}
+					placeholder={$i18n.t('Write something...')}
+					json={true}
+					onChange={(content) => {
+						note.data.html = content.html;
+						note.data.md = content.md;
+					}}
 				/>
 			</div>
 		</div>
-
-		<div class=" flex-1 w-full h-full overflow-auto px-4.5">
-			<RichTextInput
-				className="input-prose-sm"
-				bind:value={data.content}
-				placeholder={$i18n.t('Write something...')}
-				preserveBreaks={true}
-			/>
-		</div>
-	</div>
+	{/if}
 </div>
 
-<div class="absolute bottom-0 left-0 right-0 p-5 max-w-full flex justify-end">
+<div class="absolute bottom-0 right-0 p-5 max-w-full flex justify-end">
 	<div
-		class="flex gap-0.5 justify-end w-full {$showSidebar
+		class="flex gap-0.5 justify-end w-full {$showSidebar && voiceInput
 			? 'md:max-w-[calc(100%-260px)]'
 			: ''} max-w-full"
 	>
@@ -93,24 +168,12 @@
 				<VoiceRecording
 					bind:recording={voiceInput}
 					className="p-1 w-full max-w-full"
-					on:cancel={() => {
+					transcribe={false}
+					onCancel={() => {
 						voiceInput = false;
 					}}
-					on:confirm={(e) => {
-						const { text, filename } = e.detail;
-
-						// url is hostname + /cache/audio/transcription/ + filename
-						const url = `${window.location.origin}/cache/audio/transcription/${filename}`;
-
-						// Open in new tab
-
-						if (content.trim() !== '') {
-							content = `${content}\n\n${text}\n\nRecording: ${url}\n\n`;
-						} else {
-							content = `${content}${text}\n\nRecording: ${url}\n\n`;
-						}
-
-						voiceInput = false;
+					onConfirm={(data) => {
+						console.log(data);
 					}}
 				/>
 			</div>
diff --git a/src/lib/components/notes/Notes.svelte b/src/lib/components/notes/Notes.svelte
index 2ff3503fb..fd8ff6b1b 100644
--- a/src/lib/components/notes/Notes.svelte
+++ b/src/lib/components/notes/Notes.svelte
@@ -58,7 +58,11 @@
 		const res = await createNewNote(localStorage.token, {
 			title: $i18n.t('New Note'),
 			data: {
-				content: ''
+				content: {
+					json: null,
+					html: '',
+					md: ''
+				}
 			},
 			meta: null,
 			access_control: null
@@ -95,30 +99,37 @@
 		</div>
 	</DeleteConfirmDialog>
 
-	<div class="px-4.5">
+	<div class="px-4.5 @container h-full">
 		{#if Object.keys(notes).length > 0}
 			{#each Object.keys(notes) as timeRange}
 				<div class="w-full text-xs text-gray-500 dark:text-gray-500 font-medium pb-2">
 					{$i18n.t(timeRange)}
 				</div>
 
-				<div class="mb-5 gap-2 grid @lg:grid-cols-2 @2xl:grid-cols-3">
+				<div class="mb-5 gap-2 grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4">
 					{#each notes[timeRange] as note, idx (note.id)}
 						<div
-							class=" flex space-x-4 cursor-pointer w-full px-4 py-3.5 bg-gray-50 dark:bg-gray-850 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl transition"
+							class=" flex space-x-4 cursor-pointer w-full px-4.5 py-4 bg-gray-50 dark:bg-gray-850 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl transition"
 						>
 							<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
-								<a href={`/notes/${note.id}`} class="w-full -translate-y-0.5">
-									<div class=" flex-1 flex items-center gap-2 self-center">
-										<div class=" font-semibold line-clamp-1 capitalize">{note.title}</div>
-									</div>
+								<a
+									href={`/notes/${note.id}`}
+									class="w-full -translate-y-0.5 flex flex-col justify-between"
+								>
+									<div class="flex-1">
+										<div class="  flex items-center gap-2 self-center mb-1">
+											<div class=" font-semibold line-clamp-1 capitalize">{note.title}</div>
+										</div>
 
-									<div class=" text-xs text-gray-500 dark:text-gray-500 line-clamp-2 pb-2">
-										{#if note.data?.content}
-											{note.data?.content}
-										{:else}
-											{$i18n.t('No content')}
-										{/if}
+										<div
+											class=" text-xs text-gray-500 dark:text-gray-500 mb-3 line-clamp-5 min-h-18"
+										>
+											{#if note.data?.md}
+												{note.data?.md}
+											{:else}
+												{$i18n.t('No content')}
+											{/if}
+										</div>
 									</div>
 
 									<div class=" text-xs px-0.5 w-full flex justify-between items-center">
diff --git a/src/lib/components/playground/Notes.svelte b/src/lib/components/playground/Notes.svelte
index 8e41e2cde..8db333e69 100644
--- a/src/lib/components/playground/Notes.svelte
+++ b/src/lib/components/playground/Notes.svelte
@@ -57,11 +57,11 @@
 					<VoiceRecording
 						bind:recording={voiceInput}
 						className="p-1 w-full max-w-full"
-						on:cancel={() => {
+						onCancel={() => {
 							voiceInput = false;
 						}}
-						on:confirm={(e) => {
-							const { text, filename } = e.detail;
+						onConfirm={(data) => {
+							const { text, filename } = data;
 
 							// url is hostname + /cache/audio/transcription/ + filename
 							const url = `${window.location.origin}/cache/audio/transcription/${filename}`;
diff --git a/src/lib/components/workspace/Knowledge/KnowledgeBase/AddTextContentModal.svelte b/src/lib/components/workspace/Knowledge/KnowledgeBase/AddTextContentModal.svelte
index 3ada1c192..4762d5d97 100644
--- a/src/lib/components/workspace/Knowledge/KnowledgeBase/AddTextContentModal.svelte
+++ b/src/lib/components/workspace/Knowledge/KnowledgeBase/AddTextContentModal.svelte
@@ -85,11 +85,11 @@
 							<VoiceRecording
 								bind:recording={voiceInput}
 								className="p-1"
-								on:cancel={() => {
+								onCancel={() => {
 									voiceInput = false;
 								}}
-								on:confirm={(e) => {
-									const { text, filename } = e.detail;
+								onConfirm={(data) => {
+									const { text, filename } = data;
 									content = `${content}${text} `;
 
 									voiceInput = false;