refac: styling

src/lib/components/channel/Messages/Message.svelte

@@ -388,8 +388,9 @@
 							<Markdown
 								id={message.id}
 								content={message.content}
+								paragraphTag="span"
 							/>{#if message.created_at !== message.updated_at && (message?.meta?.model_id ?? null) === null}<span
-									class="text-gray-500 text-[10px]">({$i18n.t('edited')})</span
+									class="text-gray-500 text-[10px] pl-1 self-center">({$i18n.t('edited')})</span
 								>{/if}
 						{/if}
 					</div>

src/lib/components/chat/Messages/CodeBlock.svelte

@@ -42,7 +42,7 @@
 	export let code = '';
 	export let attributes = {};
 
-	export let className = 'mb-2';
+	export let className = '';
 	export let editorClassName = '';
 	export let stickyButtonsClassName = 'top-0';
 

src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { decode } from 'html-entities';
-	import DOMPurify from 'dompurify';
 	import { onMount, getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
@@ -35,6 +34,8 @@
 	export let save = false;
 	export let preview = false;
 
+	export let paragraphTag = 'p';
+
 	export let editCodeBlock = true;
 	export let topPadding = false;
 
@@ -351,6 +352,17 @@
 			}}
 		></iframe>
 	{:else if token.type === 'paragraph'}
+		{#if paragraphTag == 'span'}
+			<span dir="auto">
+				<MarkdownInlineTokens
+					id={`${id}-${tokenIdx}-p`}
+					tokens={token.tokens ?? []}
+					{done}
+					{sourceIds}
+					{onSourceClick}
+				/>
+			</span>
+		{:else}
 			<p dir="auto">
 				<MarkdownInlineTokens
 					id={`${id}-${tokenIdx}-p`}
@@ -360,6 +372,7 @@
 					{onSourceClick}
 				/>
 			</p>
+		{/if}
 	{:else if token.type === 'text'}
 		{#if top}
 			<p>