feat: myself side of message

src/lib/mock/messages.ts

@@ -1,5 +1,5 @@
 import type { BlahRichText } from '$lib/richText';
-import type { Message } from '$lib/types';
+import type { Message, User } from '$lib/types';
 import { getRandomUser } from './users';
 
 const messageContents: BlahRichText[] = [
@@ -50,13 +50,18 @@ const messageContents: BlahRichText[] = [
 		[''],
 		['非常好的视频。强烈推荐观看。']
 	],
-	[['pieces:[], attrs:[] 两者等长。然后判断合并就是 attrs 有没有相邻重复元素']]
+	[['pieces:[], attrs:[] 两者等长。然后判断合并就是 attrs 有没有相邻重复元素']],
+	[
+		[
+			'记้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎得้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎做้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎ ้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎o้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎v้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎e้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎r้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎f้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎l้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎o้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎w้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎ ้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎h้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎i้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎d้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎d้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎e้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎n้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎'
+		]
+	]
 ];
 
-export function createRandomMessage(): Message {
+export function createRandomMessage({ sender }: { sender?: User }): Message {
 	return {
 		id: Math.random().toString(),
-		sender: getRandomUser(),
+		sender: sender ?? getRandomUser(),
 		content: messageContents[Math.floor(Math.random() * messageContents.length)],
 		date: new Date()
 	};

src/routes/(app)/chats/[chatId]/+page.svelte

@@ -8,17 +8,22 @@
 	import ChatHistory from './ChatHistory.svelte';
 	import ChatInput from './ChatInput.svelte';
 
-	let messages: Message[] = Array.from({ length: 10 }).map(createRandomMessage);
+	let messages: Message[] = [
+		...Array.from({ length: 5 }).map(() => createRandomMessage({})),
+		...Array.from({ length: 2 }).map(() =>
+			createRandomMessage({ sender: { id: '_send', name: 'Shibo Lyu' } })
+		)
+	];
 
-	onMount(() => {
+	// onMount(() => {
-		const interval = setInterval(
+	// 	const interval = setInterval(
-			() => {
+	// 		() => {
-				messages = [...messages, createRandomMessage()];
+	// 			messages = [...messages, createRandomMessage({})];
-			},
+	// 		},
-			3000 + Math.random() * 10000
+	// 		3000 + Math.random() * 10000
-		);
+	// 	);
-		return () => clearInterval(interval);
+	// 	return () => clearInterval(interval);
-	});
+	// });
 </script>
 
 <div class="flex h-full w-full flex-col justify-stretch">

src/routes/(app)/chats/[chatId]/ChatMessage.svelte

@@ -12,16 +12,36 @@
 	<div>
 		<AvatarBeam size={30} name={message.sender.name} />
 	</div>
-	<div class="relative flex-1">
+	<div
+		class={tw(
+			'relative flex-1',
+			isMyself
+				? '[--weblah-chat-bubble-bg:theme(colors.accent.100)] [--weblah-chat-bubble-stroke:theme(colors.accent.200)] dark:[--weblah-chat-bubble-bg:theme(colors.accent.900)] dark:[--weblah-chat-bubble-stroke:theme(colors.accent.950)]'
+				: '[--weblah-chat-bubble-bg:theme(colors.sb.primary)] [--weblah-chat-bubble-stroke:theme(colors.ss.secondary)]',
+			isMyself && 'text-end'
+		)}
+	>
 		<div
-			class="
+			class={tw(
-			  relative inline-block max-w-[85%] rounded-2xl bg-sb-primary px-3 py-2 shadow-sm ring-1 ring-ss-secondary before:absolute
+				`relative inline-block max-w-[85%] rounded-2xl bg-[--weblah-chat-bubble-bg] shadow-sm ring-1 ring-[--weblah-chat-bubble-stroke]`,
-				before:-bottom-[1px] before:-start-5 before:z-0 before:box-content before:h-6 before:w-5 before:rounded-ee-[16px_12px] before:border-e-[10px] before:border-sb-primary before:text-ss-secondary before:drop-shadow-[-1px_0] after:absolute
+				// ::before: Fill of chat bubble tail
-				after:-bottom-[1px] after:-start-5 after:-z-10 after:box-content after:h-6 after:w-5 after:rounded-ee-[16px_12px] after:border-e-[10px] after:text-ss-secondary after:drop-shadow-[0_1px]
+				'before:absolute before:-bottom-[1px] before:box-content before:h-6 before:w-5 before:border-[--weblah-chat-bubble-bg] before:text-[--weblah-chat-bubble-stroke]',
-				sm:max-w-[70%] lg:max-w-[50%]
+				isMyself
-			"
+					? 'before:-end-5 before:rounded-es-[16px_12px] before:border-s-[10px] before:drop-shadow-[1px_0]'
+					: `before:-start-5 before:rounded-ee-[16px_12px] before:border-e-[10px] before:drop-shadow-[-1px_0]`,
+				// ::after: Stroke of chat bubble tail
+				'after:absolute after:-bottom-[1px] after:-z-10 after:box-content after:h-6 after:w-5 after:text-[--weblah-chat-bubble-stroke]',
+				isMyself
+					? 'after:-end-5 after:rounded-es-[16px_12px] after:border-s-[10px] after:drop-shadow-[0_1px]'
+					: `after:-start-5 after:rounded-ee-[16px_12px] after:border-e-[10px] after:drop-shadow-[0_1px]`,
+				'sm:max-w-[70%] lg:max-w-[50%]',
+				isMyself && 'text-start'
+			)}
 		>
-			<RichTextRenderer content={message.content} class="z-10 select-text" />
+			<RichTextRenderer
+				content={message.content}
+				class="z-10 select-text overflow-hidden px-3 py-2"
+			/>
 		</div>
 	</div>
 </div>