daarion-admin/microdao-daarion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement Matrix Presence & Typing indicators

Browse Source 
- MATRIX_PRESENCE_TYPING_SPEC.md documentation
- MatrixRestClient: sync-loop with presence+typing events
- MatrixChatRoom: onlineUsers and typingUsers state
- UI: Show N online in header
- UI: Typing indicator with animation
- ChatInput: onTyping callback support
This commit is contained in:
Apple
2025-11-26 13:32:51 -08:00
parent aa235e820b
commit 573afec40f
4 changed files with 545 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/web/src/components/chat/ChatInput.tsx
View File

@@ -6,11 +6,12 @@ import { cn } from '@/lib/utils'
interface ChatInputProps {
onSend: (message: string) => void
onTyping?: () => void
disabled?: boolean
placeholder?: string
}
export function ChatInput({ onSend, disabled = false, placeholder = 'Напишіть повідомлення...' }: ChatInputProps) {
export function ChatInput({ onSend, onTyping, disabled = false, placeholder = 'Напишіть повідомлення...' }: ChatInputProps) {
const [message, setMessage] = useState('')
const inputRef = useRef<HTMLTextAreaElement>(null)
@@ -28,6 +29,14 @@ export function ChatInput({ onSend, disabled = false, placeholder = 'Напиш
handleSubmit(e)
}
}
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setMessage(e.target.value)
// Notify about typing
if (e.target.value && onTyping) {
onTyping()
}
}
// Auto-resize textarea
useEffect(() => {
@@ -54,7 +63,7 @@ export function ChatInput({ onSend, disabled = false, placeholder = 'Напиш
<textarea
ref={inputRef}
value={message}
onChange={(e) => setMessage(e.target.value)}
onChange={handleChange}
onKeyDown={handleKeyDown}
placeholder={placeholder}
disabled={disabled}

122
apps/web/src/components/chat/MatrixChatRoom.tsx
View File

@@ -1,10 +1,10 @@
'use client'
import { useState, useEffect, useRef, useCallback } from 'react'
import { MessageSquare, Wifi, WifiOff, Loader2, RefreshCw, AlertCircle } from 'lucide-react'
import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import { MessageSquare, Wifi, WifiOff, Loader2, RefreshCw, AlertCircle, Users } from 'lucide-react'
import { ChatMessage } from './ChatMessage'
import { ChatInput } from './ChatInput'
import { MatrixRestClient, createMatrixClient, ChatMessage as MatrixChatMessage } from '@/lib/matrix-client'
import { MatrixRestClient, createMatrixClient, ChatMessage as MatrixChatMessage, PresenceEvent } from '@/lib/matrix-client'
import { cn } from '@/lib/utils'
import { useAuth } from '@/context/AuthContext'
import { getAccessToken } from '@/lib/auth'
@@ -30,6 +30,14 @@ interface BootstrapData {
}
}
// Helper to format user name from Matrix ID
function formatUserName(userId: string): string {
return userId
.split(':')[0]
.replace('@daarion_', 'User ')
.replace('@', '');
}
export function MatrixChatRoom({ roomSlug }: MatrixChatRoomProps) {
const { user } = useAuth()
const token = getAccessToken()
@@ -39,6 +47,11 @@ export function MatrixChatRoom({ roomSlug }: MatrixChatRoomProps) {
const [bootstrap, setBootstrap] = useState<BootstrapData | null>(null)
const messagesEndRef = useRef<HTMLDivElement>(null)
const matrixClient = useRef<MatrixRestClient | null>(null)
// Presence & Typing state
const [onlineUsers, setOnlineUsers] = useState<Map<string, 'online' | 'offline' | 'unavailable'>>(new Map())
const [typingUsers, setTypingUsers] = useState<Set<string>>(new Set())
const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
// Scroll to bottom when new messages arrive
const scrollToBottom = useCallback(() => {
@@ -97,7 +110,26 @@ export function MatrixChatRoom({ roomSlug }: MatrixChatRoomProps) {
setMessages(initialMessages)
// 5. Start sync for real-time updates
// 5. Set up presence and typing handlers
client.onPresence = (event: PresenceEvent) => {
if (!event.sender || !event.content?.presence) return;
setOnlineUsers(prev => {
const next = new Map(prev);
next.set(event.sender, event.content.presence);
return next;
});
};
client.onTyping = (roomId: string, userIds: string[]) => {
if (roomId !== data.matrix_room_id) return;
// Filter out current user
const others = userIds.filter(id => id !== data.matrix_user_id);
setTypingUsers(new Set(others));
};
// 6. Start sync for real-time updates
await client.initialSync()
client.startSync((newMessage) => {
setMessages(prev => {
@@ -121,14 +153,61 @@ export function MatrixChatRoom({ roomSlug }: MatrixChatRoomProps) {
initializeMatrix()
return () => {
matrixClient.current?.stopSync()
if (matrixClient.current) {
matrixClient.current.onPresence = undefined;
matrixClient.current.onTyping = undefined;
matrixClient.current.stopSync();
}
if (typingTimeoutRef.current) {
clearTimeout(typingTimeoutRef.current);
}
}
}, [initializeMatrix])
// Calculate online count
const onlineCount = useMemo(() => {
let count = 0;
onlineUsers.forEach((status, userId) => {
if (status === 'online' || status === 'unavailable') {
// Don't count current user
if (userId !== bootstrap?.matrix_user_id) {
count++;
}
}
});
return count;
}, [onlineUsers, bootstrap]);
// Handle typing notification
const handleTyping = useCallback(() => {
if (!matrixClient.current || !bootstrap) return;
// Send typing notification
matrixClient.current.sendTyping(bootstrap.matrix_room_id, true);
// Clear previous timeout
if (typingTimeoutRef.current) {
clearTimeout(typingTimeoutRef.current);
}
// Stop typing after 3 seconds of inactivity
typingTimeoutRef.current = setTimeout(() => {
if (matrixClient.current && bootstrap) {
matrixClient.current.sendTyping(bootstrap.matrix_room_id, false);
}
}, 3000);
}, [bootstrap]);
const handleSendMessage = async (body: string) => {
if (!matrixClient.current || !bootstrap) return
try {
// Stop typing indicator
matrixClient.current.sendTyping(bootstrap.matrix_room_id, false);
if (typingTimeoutRef.current) {
clearTimeout(typingTimeoutRef.current);
}
// Optimistically add message
const tempId = `temp_${Date.now()}`
const tempMessage: MatrixChatMessage = {
@@ -176,11 +255,17 @@ export function MatrixChatRoom({ roomSlug }: MatrixChatRoomProps) {
<div className="px-4 py-2 border-b border-white/10 flex items-center justify-between">
<div className="flex items-center gap-2">
<MessageSquare className="w-4 h-4 text-cyan-400" />
<span className="text-sm font-medium text-white">Matrix Chat</span>
{bootstrap?.matrix_room_alias && (
<span className="text-xs text-slate-500 font-mono">
{bootstrap.matrix_room_alias}
</span>
<span className="text-sm font-medium text-white">
{bootstrap?.room.name || 'Matrix Chat'}
</span>
{status === 'online' && (
<>
<span className="text-slate-500">·</span>
<div className="flex items-center gap-1 text-emerald-400 text-xs">
<Users className="w-3 h-3" />
<span>{onlineCount} online</span>
</div>
</>
)}
</div>
@@ -289,9 +374,26 @@ export function MatrixChatRoom({ roomSlug }: MatrixChatRoomProps) {
)}
</div>
{/* Typing indicator */}
{typingUsers.size > 0 && (
<div className="px-4 py-1.5 text-sm text-cyan-400/80 animate-pulse flex items-center gap-2">
<div className="flex gap-1">
<span className="w-1.5 h-1.5 bg-cyan-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
<span className="w-1.5 h-1.5 bg-cyan-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
<span className="w-1.5 h-1.5 bg-cyan-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
</div>
<span>
{typingUsers.size === 1
? `${formatUserName(Array.from(typingUsers)[0])} друкує...`
: 'Декілька учасників друкують...'}
</span>
</div>
)}
{/* Input area */}
<ChatInput
onSend={handleSendMessage}
onTyping={handleTyping}
disabled={status !== 'online'}
placeholder={
status === 'online'

82
apps/web/src/lib/matrix-client.ts
View File

@@ -32,6 +32,9 @@ export interface MatrixMessagesResponse {
export interface MatrixSyncResponse {
next_batch: string;
presence?: {
events: PresenceEvent[];
};
rooms?: {
join?: {
[roomId: string]: {
@@ -42,11 +45,34 @@ export interface MatrixSyncResponse {
state?: {
events: any[];
};
ephemeral?: {
events: EphemeralEvent[];
};
};
};
};
}
export interface PresenceEvent {
type: 'm.presence';
sender: string;
content: {
presence: 'online' | 'offline' | 'unavailable';
last_active_ago?: number;
currently_active?: boolean;
status_msg?: string;
};
}
export interface EphemeralEvent {
type: string;
content: any;
}
export interface TypingContent {
user_ids: string[];
}
export interface ChatMessage {
id: string;
senderId: string;
@@ -65,6 +91,10 @@ export class MatrixRestClient {
private syncAbortController: AbortController | null = null;
private onMessageCallback: ((message: ChatMessage) => void) | null = null;
private isSyncing: boolean = false;
// Presence & Typing callbacks
onPresence?: (event: PresenceEvent) => void;
onTyping?: (roomId: string, userIds: string[]) => void;
constructor(config: MatrixClientConfig) {
this.baseUrl = config.baseUrl;
@@ -214,9 +244,15 @@ export class MatrixRestClient {
const params = new URLSearchParams({
timeout: '30000',
filter: JSON.stringify({
presence: {
types: ['m.presence']
},
room: {
timeline: { limit: 50 },
state: { lazy_load_members: true }
state: { lazy_load_members: true },
ephemeral: {
types: ['m.typing', 'm.receipt']
}
}
})
});
@@ -243,9 +279,20 @@ export class MatrixRestClient {
const data: MatrixSyncResponse = await res.json();
this.syncToken = data.next_batch;
// Process new messages
// Process presence events
if (data.presence?.events && this.onPresence) {
for (const event of data.presence.events) {
if (event.type === 'm.presence') {
this.onPresence(event);
}
}
}
// Process room events
if (data.rooms?.join && this.roomId) {
const roomData = data.rooms.join[this.roomId];
// Process new messages
if (roomData?.timeline?.events) {
for (const event of roomData.timeline.events) {
if (event.type === 'm.room.message' && event.content?.body) {
@@ -254,6 +301,16 @@ export class MatrixRestClient {
}
}
}
// Process typing events
if (roomData?.ephemeral?.events && this.onTyping) {
for (const event of roomData.ephemeral.events) {
if (event.type === 'm.typing') {
const typingContent = event.content as TypingContent;
this.onTyping(this.roomId, typingContent.user_ids || []);
}
}
}
}
} catch (error) {
if (error instanceof Error && error.name === 'AbortError') {
@@ -266,6 +323,27 @@ export class MatrixRestClient {
}
}
}
/**
* Send typing notification
*/
async sendTyping(roomId: string, typing: boolean, timeout: number = 30000): Promise<void> {
try {
await fetch(
`${this.baseUrl}/_matrix/client/v3/rooms/${encodeURIComponent(roomId)}/typing/${encodeURIComponent(this.userId)}`,
{
method: 'PUT',
headers: this.authHeaders(),
body: JSON.stringify({
typing,
timeout
})
}
);
} catch (error) {
console.error('Failed to send typing notification:', error);
}
}
/**
* Map Matrix event to ChatMessage