+ {fallbackText}
+
+ )
+}
diff --git a/frontend/src/components/CallDock.tsx b/frontend/src/components/CallDock.tsx
new file mode 100644
index 0000000..b9b6b12
--- /dev/null
+++ b/frontend/src/components/CallDock.tsx
@@ -0,0 +1,123 @@
+import { LiveKitRoom, VideoConference, useRemoteParticipants } from '@livekit/components-react'
+import { AudioPresets, ScreenSharePresets, type RoomOptions } from 'livekit-client'
+import { useEffect, useState } from 'react'
+import { useApi } from '../api/useApi'
+import { ApiError } from '../api/client'
+import { useChatHub } from '../hub/ChatHubProvider'
+import { useCallStore } from '../store/callStore'
+import { useCallInviteStore } from '../store/callInviteStore'
+import { useToastStore } from '../store/toastStore'
+
+const LIVEKIT_URL = import.meta.env.VITE_LIVEKIT_URL
+
+const roomOptions: RoomOptions = {
+ adaptiveStream: true,
+ dynacast: true,
+ publishDefaults: {
+ videoCodec: 'vp9',
+ screenShareEncoding: ScreenSharePresets.h1080fps30.encoding,
+ audioPreset: AudioPresets.musicHighQualityStereo,
+ dtx: false,
+ },
+}
+
+function RingingWatcher() {
+ const remoteParticipants = useRemoteParticipants()
+ const outgoingCall = useCallInviteStore((s) => s.outgoingCall)
+ const setOutgoingCall = useCallInviteStore((s) => s.setOutgoingCall)
+
+ useEffect(() => {
+ if (outgoingCall && remoteParticipants.length > 0) {
+ setOutgoingCall(null)
+ }
+ }, [remoteParticipants.length, outgoingCall, setOutgoingCall])
+
+ return null
+}
+
+export function CallDock() {
+ const api = useApi()
+ const connection = useChatHub()
+ const activeChannelId = useCallStore((s) => s.activeChannelId)
+ const activeChannelLabel = useCallStore((s) => s.activeChannelLabel)
+ const leave = useCallStore((s) => s.leave)
+ const outgoingCall = useCallInviteStore((s) => s.outgoingCall)
+ const setOutgoingCall = useCallInviteStore((s) => s.setOutgoingCall)
+ const pushToast = useToastStore((s) => s.push)
+ const [token, setToken] = useState
+
+
+ ) : (
+
+ )
+}
diff --git a/frontend/src/components/CallSignaling.tsx b/frontend/src/components/CallSignaling.tsx
new file mode 100644
index 0000000..284500a
--- /dev/null
+++ b/frontend/src/components/CallSignaling.tsx
@@ -0,0 +1,96 @@
+import { useCallback } from 'react'
+import { useApi } from '../api/useApi'
+import { useChatHub } from '../hub/ChatHubProvider'
+import { useHubEvent } from '../hub/useHubEvent'
+import { useCallStore } from '../store/callStore'
+import { useCallInviteStore } from '../store/callInviteStore'
+import { useToastStore } from '../store/toastStore'
+import { Modal } from './Modal'
+import { Avatar } from './Avatar'
+
+export function CallSignaling() {
+ const api = useApi()
+ const connection = useChatHub()
+ const activeChannelId = useCallStore((s) => s.activeChannelId)
+ const join = useCallStore((s) => s.join)
+ const leave = useCallStore((s) => s.leave)
+ const incomingCall = useCallInviteStore((s) => s.incomingCall)
+ const outgoingCall = useCallInviteStore((s) => s.outgoingCall)
+ const setIncomingCall = useCallInviteStore((s) => s.setIncomingCall)
+ const setOutgoingCall = useCallInviteStore((s) => s.setOutgoingCall)
+ const push = useToastStore((s) => s.push)
+
+ const onIncomingCall = useCallback(
+ (channelId: string, callerId: string) => {
+ void api.getUserById(callerId).then((caller) => {
+ setIncomingCall({
+ channelId,
+ callerId,
+ callerName: caller.displayName ?? caller.username,
+ callerAvatarUrl: caller.avatarUrl,
+ })
+ })
+ },
+ [api, setIncomingCall],
+ )
+
+ const onCallDeclined = useCallback(
+ (channelId: string) => {
+ if (outgoingCall?.channelId !== channelId) return
+ push(`${outgoingCall.calleeName} declined the call`, 'info')
+ setOutgoingCall(null)
+ if (activeChannelId === channelId) leave()
+ },
+ [outgoingCall, push, setOutgoingCall, activeChannelId, leave],
+ )
+
+ const onCallCancelled = useCallback(
+ (channelId: string) => {
+ if (incomingCall?.channelId === channelId) setIncomingCall(null)
+ },
+ [incomingCall, setIncomingCall],
+ )
+
+ useHubEvent('IncomingCall', onIncomingCall)
+ useHubEvent('CallDeclined', onCallDeclined)
+ useHubEvent('CallCancelled', onCallCancelled)
+
+ function acceptCall() {
+ if (!incomingCall) return
+ join(incomingCall.channelId, incomingCall.callerName)
+ setIncomingCall(null)
+ }
+
+ async function declineCall() {
+ if (!incomingCall) return
+ const { channelId, callerId } = incomingCall
+ setIncomingCall(null)
+ try {
+ await connection?.invoke('DeclineCall', channelId, callerId)
+ } catch (error) {
+ console.error('Failed to send DeclineCall', error)
+ }
+ }
+
+ if (!incomingCall) return null
+
+ return (
+
+
+ 🔊 {activeChannelLabel}
+ {isRinging && Ringing…}
+
+
+
+ {token ? (
+ Connecting…
+ )} +
+
+ {incomingCall.callerName} is calling you…
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/components/ConfirmModal.tsx b/frontend/src/components/ConfirmModal.tsx
new file mode 100644
index 0000000..627ff7f
--- /dev/null
+++ b/frontend/src/components/ConfirmModal.tsx
@@ -0,0 +1,23 @@
+import { Modal } from './Modal'
+
+interface Props {
+ title: string
+ message: string
+ confirmLabel?: string
+ onConfirm: () => void
+ onCancel: () => void
+}
+
+export function ConfirmModal({ title, message, confirmLabel = 'Confirm', onConfirm, onCancel }: Props) {
+ return (
+
+ {messages.length === 0 &&
+ No messages yet. Say hi!
} + {messages.map((message, index) => { + const previous = messages[index - 1] + const showHeader = + !previous || + previous.author.id !== message.author.id || + new Date(message.createdAt).getTime() - new Date(previous.createdAt).getTime() > GROUP_WINDOW_MS + + return ( +{message}
+
+
+
+
+
+ {errorMessage &&
+
+
+ {incoming.length > 0 && (
+
+
+ )}
+
+ {outgoing.length > 0 && (
+
+
+ )}
+
+
+
+
+ {pendingConfirm && (
+ setPendingConfirm(null)}
+ onConfirm={() => {
+ const action = pendingConfirm
+ setPendingConfirm(null)
+ void runAction(action.kind === 'remove' ? api.removeFriend(action.friendshipId) : api.blockUser(action.userId))
+ }}
+ />
+ )}
+
+ )
+}
diff --git a/frontend/src/components/MessageComposer.tsx b/frontend/src/components/MessageComposer.tsx
new file mode 100644
index 0000000..a2e805f
--- /dev/null
+++ b/frontend/src/components/MessageComposer.tsx
@@ -0,0 +1,132 @@
+import { useRef, useState } from 'react'
+import { useApi } from '../api/useApi'
+import { ApiError, uploadFileToPresignedUrl } from '../api/client'
+import type { MessageAttachmentInput } from '../api/client'
+import type { AttachmentKind } from '../types/api'
+import { useToastStore } from '../store/toastStore'
+
+interface PendingAttachment {
+ file: File | Blob
+ fileName: string
+ contentType: string
+ kind: AttachmentKind
+}
+
+function guessKind(contentType: string): AttachmentKind {
+ if (contentType.startsWith('image/')) return 'Image'
+ if (contentType.startsWith('audio/')) return 'Audio'
+ return 'File'
+}
+
+export function MessageComposer({ onSend }: { onSend: (content: string, attachments: MessageAttachmentInput[]) => Promise{errorMessage}
} + +Add friend
+ setQuery(e.target.value)} /> +-
+ {results.map((user) => (
+
-
+
+ {userLabel(user)} + +
+ ))}
+
Incoming requests
+-
+ {incoming.map((r) => (
+
-
+
+ {userLabel(r.otherUser)} + + +
+ ))}
+
Outgoing requests
+-
+ {outgoing.map((r) => (
+
-
+
+ {userLabel(r.otherUser)} + Pending +
+ ))}
+
Friends
+ {friends.length === 0 ? ( +No friends yet — search a username above to add one.
+ ) : ( +-
+ {friends.map((f) => (
+
-
+
+ + {userLabel(f.otherUser)} + + + +
+ ))}
+
+ {pending.length > 0 && (
+
+ )
+}
diff --git a/frontend/src/components/MessageItem.tsx b/frontend/src/components/MessageItem.tsx
new file mode 100644
index 0000000..e3ba092
--- /dev/null
+++ b/frontend/src/components/MessageItem.tsx
@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import type { MessageResponse } from '../types/api'
+import { ConfirmModal } from './ConfirmModal'
+import { Avatar } from './Avatar'
+import { formatMessageTimestamp, formatShortTime } from '../utils/formatTimestamp'
+
+interface Props {
+ message: MessageResponse
+ isOwn: boolean
+ showHeader: boolean
+ onEdit: (id: string, content: string) => Promise-
+ {pending.map((attachment, index) => (
+
- + {attachment.fileName} + + + ))} +
+ onFilesPicked(e.target.files)} />
+
+
+ setContent(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault()
+ void handleSend()
+ }
+ }}
+ />
+
+
+
+ {showHeader ? (
+ setIsConfirmingDelete(false)}
+ onConfirm={() => {
+ setIsConfirmingDelete(false)
+ void onDelete(message.id)
+ }}
+ />
+ )}
+
+ )
+}
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
new file mode 100644
index 0000000..ce2b996
--- /dev/null
+++ b/frontend/src/components/Modal.tsx
@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react'
+
+export function Modal({ title, onClose, children }: { title: string; onClose: () => void; children: ReactNode }) {
+ return (
+
+ {showHeader && (
+
+
+ {isConfirmingDelete && (
+
+ {authorName}
+ {formatMessageTimestamp(message.createdAt)}
+ {message.editedAt && (edited)}
+
+ )}
+
+ {isEditing ? (
+
+ setDraft(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') void saveEdit()
+ if (e.key === 'Escape') setIsEditing(false)
+ }}
+ autoFocus
+ />
+
+
+
+ ) : (
+ + {message.content} + {!showHeader && message.editedAt && (edited)} +
+ )} + + {message.attachments.length > 0 && ( +-
+ {message.attachments.map((attachment) => (
+
- + {attachment.kind === 'Audio' ? '🎤' : attachment.kind === 'Image' ? '🖼' : '📎'} {attachment.fileName} + + ))} +
+
+
+
+ )}
+
+
+ )
+}
diff --git a/frontend/src/components/PresenceDot.tsx b/frontend/src/components/PresenceDot.tsx
new file mode 100644
index 0000000..76a5492
--- /dev/null
+++ b/frontend/src/components/PresenceDot.tsx
@@ -0,0 +1,19 @@
+import { usePresenceStore } from '../store/presenceStore'
+import type { PresenceStatus } from '../types/api'
+
+const LABELS: Record e.stopPropagation()}>
+
+ {title}
+ {children} +
+ {toasts.map((toast) => (
+
+ )
+}
diff --git a/frontend/src/hub/ChatHubProvider.tsx b/frontend/src/hub/ChatHubProvider.tsx
new file mode 100644
index 0000000..5aff123
--- /dev/null
+++ b/frontend/src/hub/ChatHubProvider.tsx
@@ -0,0 +1,50 @@
+import { HubConnection, HubConnectionBuilder, LogLevel } from '@microsoft/signalr'
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
+import { useAuth } from 'react-oidc-context'
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL as string
+
+const ChatHubContext = createContext dismiss(toast.id)}>
+ {toast.message}
+
+ ))}
+
+
+ )
+ }
+
+ if (auth.error) {
+ return (
+ Signing in…
+
+
+ )
+ }
+
+ return Sign-in failed: {auth.error.message}
+
+
+ )
+}
diff --git a/frontend/src/store/callInviteStore.ts b/frontend/src/store/callInviteStore.ts
new file mode 100644
index 0000000..e0765b5
--- /dev/null
+++ b/frontend/src/store/callInviteStore.ts
@@ -0,0 +1,28 @@
+import { create } from 'zustand'
+
+export interface IncomingCall {
+ channelId: string
+ callerId: string
+ callerName: string
+ callerAvatarUrl: string | null
+}
+
+export interface OutgoingCall {
+ channelId: string
+ calleeId: string
+ calleeName: string
+}
+
+interface CallInviteState {
+ incomingCall: IncomingCall | null
+ outgoingCall: OutgoingCall | null
+ setIncomingCall: (call: IncomingCall | null) => void
+ setOutgoingCall: (call: OutgoingCall | null) => void
+}
+
+export const useCallInviteStore = create
+
+ Ping
+Chat, voice and video, self-hosted.
+ + {auth.error &&{auth.error.message}
} +