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

feat: receive messages

Browse source
This commit is contained in:
Shibo Lyu 2024-09-01 17:51:07 +08:00
parent a0fd2df1e5
commit cd68c982c8
19 changed files with 276 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,35 +2,43 @@
import { page } from '$app/stores';
import BgPattern from '$lib/components/BgPattern.svelte';
import { createRandomMessage } from '$lib/mock/messages';
import type { Message } from '$lib/types';
import { messageFromBlah, type Chat, type Message } from '$lib/types';
import { onMount } from 'svelte';
import ChatHeader from './ChatHeader.svelte';
import ChatHistory from './ChatHistory.svelte';
import ChatInput from './ChatInput.svelte';
import { BlahChatServerConnection } from '$lib/blah/connection/chatServer';
let messages: Message[] = [
...Array.from({ length: 5 }).map(() => createRandomMessage({})),
...Array.from({ length: 2 }).map(() =>
createRandomMessage({ sender: { id: '_send', name: 'Shibo Lyu' } })
)
];
const roomId = $page.params.chatId;
// onMount(() => {
// const interval = setInterval(
// () => {
// messages = [...messages, createRandomMessage({})];
// },
// 3000 + Math.random() * 10000
// );
// return () => clearInterval(interval);
// });
let chat: Chat = {
id: roomId,
name: '',
type: 'group'
};
let messages: Message[] = [];
async function loadChat(server: BlahChatServerConnection) {
const { room, messages: blahMessages } = await server.fetchRoom(roomId);
chat = {
id: roomId,
name: room.title,
type: 'group'
};
messages = [...blahMessages.map(messageFromBlah), ...messages];
}
onMount(() => {
const server = new BlahChatServerConnection('https://blah.oxa.li/api');
loadChat(server);
return server.subscribeRoom(roomId, (message) => {
messages = [...messages, messageFromBlah(message)];
});
});
</script>
<div class="flex h-full w-full flex-col justify-stretch">
<ChatHeader
chat={{ id: 'blah', name: 'Blah IM Interest Group', type: 'group' }}
outsideUnreadCount={263723}
/>
<ChatHeader {chat} outsideUnreadCount={263723} />
<BgPattern class="flex-1" pattern="charlieBrown">
<ChatHistory {messages} mySenderId={'_send'} />
</BgPattern>

6
src/routes/(app)/chats/[chatId]/ChatInput.svelte
View file

@ -25,14 +25,12 @@
<span class="sr-only">Attach</span>
</Button>
<RichTextInput bind:delta placeholder="Message" class="max-h-40 flex-1" />
<Button
class="before:from-accent-400 before:to-accent-500 duraion-200 relative p-1.5 ring-0 before:absolute before:-inset-px before:rounded-[7px] before:bg-gradient-to-b before:from-40% before:ring-1 before:ring-inset before:ring-black/10 before:transition-shadow active:before:shadow-inner"
>
<Button class="p-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="z-10 size-5 text-slate-50 drop-shadow-[0_-1px_0_theme(colors.black/0.2)]"
class="z-10 size-5"
>
<path
d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z"