Realtime Chat

1<script setup lang="ts">
2import { ref, computed, watch } from 'vue'
3import { Send } from 'lucide-vue-next'
4 
5import ChatMessageItem from './chat-message-item.vue'
6import { useChatScroll } from '../composables/useChatScroll'
7import {
8  useRealtimeChat,
9  type ChatMessage,
10} from '../composables/useRealtimeChat'
11  // @ts-ignore
12import Button from '@/components/ui/Button.vue'
13  // @ts-ignore
14import Input from '@/components/ui/Input.vue'
15 
16interface RealtimeChatProps {
17  roomName: string
18  username: string
19  onMessage?: (messages: ChatMessage[]) => void
20  messages?: ChatMessage[]
21}
22 
23const props = defineProps<RealtimeChatProps>()
24 
25const initialMessages = computed(() => props.messages ?? [])
26 
27const { containerRef, scrollToBottom } = useChatScroll()
28 
29const { messages: realtimeMessages, sendMessage, isConnected } =
30  useRealtimeChat({
31    roomName: props.roomName,
32    username: props.username,
33  })
34 
35const newMessage = ref('')
36 
37/**
38 * Merge + dedupe + sort
39 */
40const allMessages = computed<ChatMessage[]>(() => {
41  const merged = [...initialMessages.value, ...realtimeMessages.value]
42 
43  const unique = merged.filter(
44    (message, index, self) =>
45      index === self.findIndex((m) => m.id === message.id)
46  )
47 
48  return unique.sort((a, b) =>
49    a.createdAt.localeCompare(b.createdAt)
50  )
51})
52 
53/**
54 * Emit messages to parent if callback provided
55 */
56watch(allMessages, (messages) => {
57  if (props.onMessage) {
58    props.onMessage(messages)
59  }
60 
61  scrollToBottom()
62}, { flush: 'post' })
63 
64function handleSendMessage() {
65  if (!newMessage.value.trim() || !isConnected.value) return
66 
67  sendMessage(newMessage.value)
68  newMessage.value = ''
69}
70</script>
71 
72<template>
73  <div class="flex flex-col h-full w-full bg-background text-foreground antialiased">
74    <!-- Messages -->
75    <div
76      ref="containerRef"
77      class="flex-1 overflow-y-auto p-4 space-y-4"
78    >
79      <div
80        v-if="allMessages.length === 0"
81        class="text-center text-sm text-muted-foreground"
82      >
83        No messages yet. Start the conversation!
84      </div>
85 
86      <div class="space-y-1">
87        <div
88          v-for="(message, index) in allMessages"
89          :key="message.id"
90          class="animate-in fade-in slide-in-from-bottom-4 duration-300"
91        >
92          <ChatMessageItem
93            :message="message"
94            :isOwnMessage="message.user.name === props.username"
95            :showHeader="
96              !allMessages[index - 1] ||
97// … truncated