blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-05-01 08:41:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: myself side of message

Browse source
This commit is contained in:
Shibo Lyu 2024-08-31 18:34:26 +08:00
parent e6f15605ff
commit 9f05926c67
3 changed files with 52 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/lib/mock/messages.ts
View file

@ -1,5 +1,5 @@
import type { BlahRichText } from '$lib/richText'; import type { BlahRichText } from '$lib/richText';
import type { Message } from '$lib/types'; import type { Message, User } from '$lib/types';
import { getRandomUser } from './users'; import { getRandomUser } from './users';
const messageContents: BlahRichText[] = [ 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 { return {
id: Math.random().toString(), id: Math.random().toString(),
sender: getRandomUser(), sender: sender ?? getRandomUser(),
content: messageContents[Math.floor(Math.random() * messageContents.length)], content: messageContents[Math.floor(Math.random() * messageContents.length)],
date: new Date() date: new Date()
}; };

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

@ -8,17 +8,22 @@
import ChatHistory from './ChatHistory.svelte'; import ChatHistory from './ChatHistory.svelte';
import ChatInput from './ChatInput.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> </script>
<div class="flex h-full w-full flex-col justify-stretch"> <div class="flex h-full w-full flex-col justify-stretch">

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

@ -12,16 +12,36 @@
<div> <div>
<AvatarBeam size={30} name={message.sender.name} /> <AvatarBeam size={30} name={message.sender.name} />
</div> </div>
<div class="relative flex-1">
<div <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 flex-1',
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 isMyself
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] ? '[--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)]'
sm:max-w-[70%] lg:max-w-[50%] : '[--weblah-chat-bubble-bg:theme(colors.sb.primary)] [--weblah-chat-bubble-stroke:theme(colors.ss.secondary)]',
" isMyself && 'text-end'
)}
> >
<RichTextRenderer content={message.content} class="z-10 select-text" /> <div
class={tw(
`relative inline-block max-w-[85%] rounded-2xl bg-[--weblah-chat-bubble-bg] shadow-sm ring-1 ring-[--weblah-chat-bubble-stroke]`,
// ::before: Fill of chat bubble tail
'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]',
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 overflow-hidden px-3 py-2"
/>
</div> </div>
</div> </div>
</div> </div>