# Realtime Chat

Real-time chat component for collaborative applications

## Files

- `components/`
  - `chat-message-item.vue`
  - `realtime-chat.vue`
- `composables/`
  - `useChatScroll.ts`
  - `useRealtimeChat.ts`

External registry dependencies: button, input.

Full source: https://supabase.com/library/r/realtime-chat-vue.json

## Installation

### Set up the Supabase client

This block requires a Supabase client for Vue. If your project already has one, reuse it and update the block's imports to match your client. Otherwise, install the client:

Install this block:

```bash
npx shadcn-vue@latest add https://supabase.com/library/r/supabase-client-vue.json
```

Configure the environment variables described in the [Vue client guide](https://supabase.com/library/docs/vue/client.md#getting-started) before using the block.

### Install the block

Install this block:

```bash
npx shadcn-vue@latest add https://supabase.com/library/r/realtime-chat-vue.json
```

## Introduction

The Realtime Chat component provides a complete chat interface that enables users to exchange messages in real-time within a shared room.

## Usage

### Basic usage

```html
<script setup lang="ts">
  import RealtimeChat from '@/components/realtime-chat.vue'
</script>

<template>
  <RealtimeChat roomName="my-chat-room" username="john_doe" />
</template>
```

### With initial messages

```html
<script setup lang="ts">
  import RealtimeChat from '@/components/realtime-chat.vue'
  import { useMessagesQuery } from '@/composables/use-messages-query'

  const { data } = useMessagesQuery()
</script>

<template>
  <RealtimeChat roomName="my-chat-room" username="john_doe" :messages="data ?? []" />
</template>
```

### Storing messages

```html
<script setup lang="ts">
  import RealtimeChat from '@/components/realtime-chat.vue'
  import { useMessagesQuery } from '@/composables/use-messages-query'
  import { storeMessages } from '@/lib/store-messages'
  import type { ChatMessage } from '@/types'

  const { data } = useMessagesQuery()

  // Callback function for new messages
  const handleMessage = async (messages: ChatMessage[]) => {
    await storeMessages(messages)
  }
</script>

<template>
  <RealtimeChat
    roomName="my-chat-room"
    username="john_doe"
    :messages="data ?? []"
    :onMessage="handleMessage"
  />
</template>
```

## Features

- Real-time message synchronization
- Message persistence support with `onMessage` and `messages` props
- Customizable message appearance
- Automatic scroll-to-bottom on new messages
- Room-based isolation for scoped conversations
- Low-latency updates using Supabase Realtime

## Props

| Prop         | Type                                | Description                                                   |
| ------------ | ----------------------------------- | ------------------------------------------------------------- |
| `roomName`   | `string`                            | Unique identifier for the shared chat room.                   |
| `username`   | `string`                            | Name of the current user; used to identify message senders.   |
| `onMessage?` | `(messages: ChatMessage[]) => void` | Optional callback to handle messages, useful for persistence. |
| `messages?`  | `ChatMessage[]`                     | Optional initial messages to display in the chat.             |

### ChatMessage type

```typescript
interface ChatMessage {
  id: string
  content: string
  user: {
    name: string
  }
  createdAt: string
}
```

## Further reading

- [Realtime Broadcast](https://supabase.com/docs/guides/realtime/broadcast)
- [Realtime authorization](https://supabase.com/docs/guides/realtime/authorization)