refac: styling

src/app.css

@@ -76,8 +76,12 @@ textarea::placeholder {
 	@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-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 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;
 }
 
+.markdown-prose-sm {
+	@apply text-sm 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-semibold prose-hr:my-2  prose-hr:border-gray-100 prose-hr:dark:border-gray-800 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;
+}
+
 .markdown-prose-xs {
-	@apply text-xs 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-semibold prose-hr:my-0  prose-hr:border-gray-100 prose-hr:dark:border-gray-800 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 text-xs 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-semibold prose-hr:my-0.5  prose-hr:border-gray-100 prose-hr:dark:border-gray-800 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;
 }
 
 .markdown a {

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

@@ -129,17 +129,9 @@
 								if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
 									continue;
 								} else {
-									if (textareaElement) {
-										textareaElement.style.height = textareaElement.scrollHeight + 'px';
-									}
-
 									responseMessage.content += data.choices[0].delta.content ?? '';
 									messages = messages;
 
-									if (textareaElement) {
-										textareaElement.style.height = textareaElement.scrollHeight + 'px';
-									}
-
 									await tick();
 								}
 							}

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

@@ -4,29 +4,35 @@
 	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';
 
 	export let message;
 	export let idx;
 
 	export let onDelete;
+	export let onEdit;
 
 	let textAreaElement: HTMLTextAreaElement;
-
-	onMount(() => {
-		if (textAreaElement) {
-			textAreaElement.style.height = '';
-			textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
-		}
-	});
 </script>
 
 <div class="flex flex-col gap-1 group">
-	<div class="flex items-center justify-between pt-1 px-2">
+	<div class="flex items-center justify-between pt-1">
 		<div class="py-1 text-sm font-semibold uppercase min-w-[6rem] text-left rounded-lg transition">
 			{$i18n.t(message.role)}
 		</div>
 
-		<div class="flex items-center">
+		<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={() => {
@@ -56,30 +62,21 @@
 		<!-- $i18n.t('an assistant') -->
 
 		{#if !(message?.done ?? true) && message?.content === ''}
-			<div class="px-2">
+			<div class="">
 				<Skeleton size="sm" />
 			</div>
-		{:else}
+		{:else if message?.edit === true}
-			<textarea
+			<Textarea
-				id="{message.role}-{idx}-textarea"
+				class="w-full bg-transparent outline-hidden rounded-lg text-sm resize-none overflow-hidden"
-				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}
 			/>
+		{:else}
+			<div class=" markdown-prose-sm">
+				<Markdown id={`note-message-${idx}`} content={message.content} />
+			</div>
 		{/if}
 	</div>
 </div>

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

@@ -7,11 +7,19 @@
 	export let messages = [];
 </script>
 
-<div class="space-y-3 pb-20">
+<div class="space-y-3 pb-12">
 	{#each messages as message, idx}
 		<Message
 			{message}
 			{idx}
+			onEdit={() => {
+				messages = messages.map((msg, messageIdx) => {
+					if (messageIdx === idx) {
+						return { ...msg, edit: true };
+					}
+					return msg;
+				});
+			}}
 			onDelete={() => {
 				messages = messages.filter((message, messageIdx) => messageIdx !== idx);
 			}}