diff --git a/msrp_demo/index.html b/msrp_demo/index.html
new file mode 100644
index 0000000..128a67b
--- /dev/null
+++ b/msrp_demo/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>opensips-js MSRP Demo</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+</body>
+</html>
diff --git a/msrp_demo/package.json b/msrp_demo/package.json
new file mode 100644
index 0000000..f0c49e4
--- /dev/null
+++ b/msrp_demo/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "opensips-msrp-demo",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Standalone Vue demo for opensips-js MSRP module.",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.18.1",
+    "emojibase-data": "^17.0.0",
+    "vue": "3.2.25"
+  },
+  "devDependencies": {
+    "@types/node": "^18.14.2",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "typescript": "^4.9.5",
+    "vite": "4.4.11"
+  }
+}
diff --git a/msrp_demo/src/App.vue b/msrp_demo/src/App.vue
new file mode 100644
index 0000000..f44f7cc
--- /dev/null
+++ b/msrp_demo/src/App.vue
@@ -0,0 +1,1811 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { vsipAPI } from './composables'
+import { MODULES } from '../../src/enum/modules'
+import { MSRP_EVT } from '../../src/modules/msrp'
+import { exportConversation, hasApiToken, setApiToken } from './api'
+import EmojiPicker from './components/EmojiPicker.vue'
+
+const QUICK_REACTION_EMOJIS = [ '👍', '❤️', '😂', '😮', '😢', '🙏' ] as const
+
+const LS_DOMAIN = 'sipDomain'
+const LS_USERNAME = 'sipUsername'
+const LS_PASSWORD = 'sipPassword'
+const LS_MSRP_DOMAIN = 'msrpDomain'
+const LS_API_TOKEN = 'voicenterApiToken'
+
+const domain = ref<string>(localStorage.getItem(LS_DOMAIN) ?? '')
+const username = ref<string>(localStorage.getItem(LS_USERNAME) ?? '')
+const password = ref<string>(localStorage.getItem(LS_PASSWORD) ?? '')
+const msrpDomain = ref<string>(localStorage.getItem(LS_MSRP_DOMAIN) ?? '')
+const apiToken = ref<string>(localStorage.getItem(LS_API_TOKEN) ?? '')
+
+if (apiToken.value.trim()) {
+    setApiToken(apiToken.value.trim())
+}
+
+const connectError = ref<string>('')
+const isConnecting = ref<boolean>(false)
+
+const { state, actions } = vsipAPI
+
+async function handleConnect () {
+    connectError.value = ''
+    const d = domain.value.trim()
+    const u = username.value.trim()
+    const p = password.value.trim()
+    if (!d || !u || !p) {
+        connectError.value = 'Please fill all SIP connection fields.'
+        return
+    }
+
+    localStorage.setItem(LS_DOMAIN, d)
+    localStorage.setItem(LS_USERNAME, u)
+    localStorage.setItem(LS_PASSWORD, p)
+    if (msrpDomain.value.trim()) {
+        localStorage.setItem(LS_MSRP_DOMAIN, msrpDomain.value.trim())
+    }
+
+    const trimmedToken = apiToken.value.trim()
+    if (trimmedToken) {
+        localStorage.setItem(LS_API_TOKEN, trimmedToken)
+        setApiToken(trimmedToken)
+    } else {
+        localStorage.removeItem(LS_API_TOKEN)
+        setApiToken(null)
+    }
+
+    isConnecting.value = true
+    try {
+        await actions.init(
+            {
+                username: u,
+                password: p,
+                domain: d,
+                modules: [ MODULES.MSRP ],
+                msrpDomain: msrpDomain.value.trim() || undefined,
+                msrpWs: !!msrpDomain.value.trim()
+            },
+            undefined,
+            { session_timers: false },
+            console
+        )
+    } catch (e) {
+        connectError.value = e instanceof Error ? e.message : String(e)
+    } finally {
+        isConnecting.value = false
+    }
+}
+
+function handleLogout () {
+    actions.disconnect()
+    localStorage.removeItem(LS_PASSWORD)
+    password.value = ''
+}
+
+function handleForget () {
+    localStorage.removeItem(LS_DOMAIN)
+    localStorage.removeItem(LS_USERNAME)
+    localStorage.removeItem(LS_PASSWORD)
+    localStorage.removeItem(LS_MSRP_DOMAIN)
+    localStorage.removeItem(LS_API_TOKEN)
+    domain.value = ''
+    username.value = ''
+    password.value = ''
+    msrpDomain.value = ''
+    apiToken.value = ''
+    setApiToken(null)
+}
+
+function handleStartMSRPSession () {
+    actions.initMSRP()
+}
+
+const newConversationTarget = ref<string>('')
+
+function handleCreateConversation () {
+    const target = newConversationTarget.value.trim()
+    if (!target) return
+    const ok = actions.sendCreateConversationMessage(target)
+    if (ok) newConversationTarget.value = ''
+}
+
+function handleSelectConversation (id: number | string) {
+    actions.setActiveConversation(String(id))
+}
+
+function handleLeaveConversation (id: number | string) {
+    actions.leaveConversation(id)
+}
+
+function handleCloseConversation (id: number | string) {
+    actions.closeConversation(id)
+}
+
+const isExporting = ref<boolean>(false)
+const exportError = ref<string>('')
+
+async function handleExportConversation (id: number | string) {
+    if (!hasApiToken()) {
+        exportError.value = 'API token missing - fill the "Token" field on the login form and reconnect.'
+        return
+    }
+
+    exportError.value = ''
+    isExporting.value = true
+    try {
+        const blob = await exportConversation(id, 'json')
+        const filename = `conversation-${id}-${new Date().toISOString().replace(/[:.]/g, '-')}.json`
+        const url = URL.createObjectURL(blob)
+        const anchor = document.createElement('a')
+        anchor.href = url
+        anchor.download = filename
+        document.body.appendChild(anchor)
+        anchor.click()
+        anchor.remove()
+        URL.revokeObjectURL(url)
+    } catch (e) {
+        exportError.value = e instanceof Error ? e.message : String(e)
+    } finally {
+        isExporting.value = false
+    }
+}
+
+function handleAcceptInvite (id: number | string) {
+    actions.acceptInvite(id)
+    actions.setActiveConversation(String(id))
+}
+
+function handleRejectInvite (id: number | string) {
+    actions.rejectInvite(id)
+}
+
+const isCurrentConversationClosed = computed<boolean>(() => {
+    const c = state.currentConversation.value
+    if (!c?.state_events) return false
+    return !!c.state_events['m.conversation.closed']?.['']
+})
+
+const myRoleLabel = computed<string>(() => {
+    const c = state.currentConversation.value
+    if (!c) return ''
+    switch (c.currentUserRole) {
+        case 'in_charge': return '⚡ in_charge'
+        case 'manager': return '👁 manager'
+        default: return '👤 assigned'
+    }
+})
+
+const canSend = computed<boolean>(() => {
+    const c = state.currentConversation.value
+    if (!c) return false
+    if (isCurrentConversationClosed.value) return false
+    return c.currentUserRole !== 'manager'
+})
+
+const draft = ref<string>('')
+const chatMessagesEl = ref<HTMLDivElement | null>(null)
+const draftEl = ref<HTMLTextAreaElement | null>(null)
+
+const DRAFT_MAX_LINES = 3
+
+function autoResizeDraft () {
+    const el = draftEl.value
+    if (!el) return
+    el.style.height = 'auto'
+    const style = window.getComputedStyle(el)
+    const lineHeight = parseFloat(style.lineHeight) || 20
+    const paddingY = (parseFloat(style.paddingTop) || 0)
+        + (parseFloat(style.paddingBottom) || 0)
+    const borderY = (parseFloat(style.borderTopWidth) || 0)
+        + (parseFloat(style.borderBottomWidth) || 0)
+    const maxHeight = lineHeight * DRAFT_MAX_LINES + paddingY + borderY
+    const nextHeight = Math.min(el.scrollHeight + borderY, maxHeight)
+    el.style.height = `${nextHeight}px`
+    el.style.overflowY = el.scrollHeight + borderY > maxHeight ? 'auto' : 'hidden'
+}
+
+const replyingToMessage = ref<any | null>(null)
+
+const editingMessageId = ref<string | null>(null)
+
+const sendAsInternalNote = ref<boolean>(false)
+
+function isMyMessage (msg: any): boolean {
+    return !!msg?.sender && extractSipUser(msg.sender) === username.value
+}
+
+function messageBodyText (msg: any): string {
+    return String(msg?.content?.content ?? '')
+}
+
+function beginReply (msg: any) {
+    if (!msg?.event_id) return
+    editingMessageId.value = null
+    replyingToMessage.value = msg
+}
+
+function cancelReply () {
+    replyingToMessage.value = null
+}
+
+function beginEdit (msg: any) {
+    if (!msg?.event_id || !isMyMessage(msg)) return
+    replyingToMessage.value = null
+    editingMessageId.value = msg.event_id
+    draft.value = messageBodyText(msg)
+    nextTick(() => {
+        autoResizeDraft()
+        draftEl.value?.focus()
+    })
+}
+
+function cancelEdit () {
+    editingMessageId.value = null
+    draft.value = ''
+    nextTick(() => autoResizeDraft())
+}
+
+function handleDelete (msg: any) {
+    if (!msg?.event_id || !isMyMessage(msg)) return
+    const key = state.currentConversationId.value
+    if (!key) return
+    if (!window.confirm('Delete this message for everyone?')) return
+    actions.deleteMessage(key, msg.event_id)
+}
+
+const sendError = ref<string>('')
+
+function handleSend () {
+    sendError.value = ''
+    const key = state.currentConversationId.value
+    const text = draft.value.trim()
+    if (!key || !text) return
+
+    let ok = false
+    let mode: 'edit' | 'note' | 'reply' | 'text' = 'text'
+    if (editingMessageId.value) {
+        mode = 'edit'
+        ok = actions.editMessage(key, editingMessageId.value, text)
+        if (ok) editingMessageId.value = null
+    } else if (sendAsInternalNote.value) {
+        mode = 'note'
+        ok = actions.sendInternalNote(key, text, {
+            replyToEventId: replyingToMessage.value?.event_id
+        })
+    } else {
+        mode = replyingToMessage.value?.event_id ? 'reply' : 'text'
+        ok = actions.sendTextMessage(key, text, {
+            replyToEventId: replyingToMessage.value?.event_id
+        })
+    }
+
+    if (ok) {
+        draft.value = ''
+        replyingToMessage.value = null
+        actions.stopTypingKeepAlive()
+        nextTick(() => autoResizeDraft())
+    } else {
+        sendError.value = `Send failed (mode: ${mode}). SDK returned false — the MSRP session may be down, or the module rejected the payload. Check console.`
+    }
+}
+
+function handleDraftInput () {
+    autoResizeDraft()
+    const key = state.currentConversationId.value
+    if (!key) return
+    if (draft.value.trim()) {
+        actions.startTypingKeepAlive(key)
+    } else {
+        actions.stopTypingKeepAlive()
+    }
+}
+
+function handleDraftFocus () {
+    const key = state.currentConversationId.value
+    if (!key) return
+    if (draft.value.trim()) actions.startTypingKeepAlive(key)
+}
+
+function handleDraftBlur () {
+    actions.stopTypingKeepAlive()
+}
+
+function handleDraftKeydown (e: KeyboardEvent) {
+    if (e.key !== 'Enter') return
+    if (e.isComposing || e.shiftKey) return
+    e.preventDefault()
+    handleSend()
+}
+
+const uploadInputRef = ref<HTMLInputElement | null>(null)
+const isUploading = ref<boolean>(false)
+const uploadError = ref<string>('')
+
+async function handleFileSelected (event: Event) {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+    if (!file) return
+    const key = state.currentConversationId.value
+    if (!key) {
+        uploadError.value = 'Select a conversation first.'
+        return
+    }
+
+    isUploading.value = true
+    uploadError.value = ''
+    try {
+        await actions.uploadFile(key, file)
+    } catch (e) {
+        uploadError.value = e instanceof Error ? e.message : String(e)
+    } finally {
+        isUploading.value = false
+        if (uploadInputRef.value) uploadInputRef.value.value = ''
+    }
+}
+
+function handleAddReaction (eventId: string, emoji: string) {
+    const key = state.currentConversationId.value
+    if (!key || !eventId) return
+    actions.sendReaction(key, eventId, emoji)
+}
+
+function handleToggleReaction (msg: any, emoji: string) {
+    const key = state.currentConversationId.value
+    if (!key || !msg?.event_id) return
+    const summary = (msg.content?.reactions_summary || []) as any[]
+    const existing = summary.find((r) => (r?.emoji || r?.key) === emoji)
+    if (existing?.viewer_reacted) {
+        actions.removeReaction(key, msg.event_id, emoji)
+    } else {
+        actions.sendReaction(key, msg.event_id, emoji, 'add')
+    }
+}
+
+const emojiPickerOpen = ref<boolean>(false)
+const emojiPickerTargetEventId = ref<string | null>(null)
+const emojiPickerPos = ref<{ x: number, y: number }>({ x: 0, y: 0 })
+const EMOJI_PICKER_WIDTH = 320
+const EMOJI_PICKER_HEIGHT = 360
+
+function openEmojiPicker (msg: any, e: MouseEvent) {
+    if (!msg?.event_id) return
+    const trigger = e.currentTarget as HTMLElement | null
+    if (!trigger) return
+    const rect = trigger.getBoundingClientRect()
+
+    const viewportH = window.innerHeight
+    const viewportW = window.innerWidth
+    const spaceAbove = rect.top
+    const openAbove = spaceAbove >= EMOJI_PICKER_HEIGHT + 8
+
+    let y = openAbove
+        ? rect.top - EMOJI_PICKER_HEIGHT - 6
+        : rect.bottom + 6
+
+    let x = rect.left
+    if (x + EMOJI_PICKER_WIDTH > viewportW - 8) {
+        x = Math.max(8, viewportW - EMOJI_PICKER_WIDTH - 8)
+    }
+    if (y < 8) y = 8
+    if (y + EMOJI_PICKER_HEIGHT > viewportH - 8) {
+        y = Math.max(8, viewportH - EMOJI_PICKER_HEIGHT - 8)
+    }
+
+    emojiPickerPos.value = { x, y }
+    emojiPickerTargetEventId.value = msg.event_id
+    emojiPickerOpen.value = true
+}
+
+function closeEmojiPicker () {
+    emojiPickerOpen.value = false
+    emojiPickerTargetEventId.value = null
+}
+
+function handleEmojiPicked (emoji: string) {
+    const targetId = emojiPickerTargetEventId.value
+    if (targetId) handleAddReaction(targetId, emoji)
+    closeEmojiPicker()
+}
+
+const forwardPickerOpen = ref<boolean>(false)
+const forwardPickerSourceMsg = ref<any | null>(null)
+const forwardPickerPos = ref<{ x: number, y: number }>({ x: 0, y: 0 })
+const FORWARD_PICKER_WIDTH = 260
+const FORWARD_PICKER_MAX_HEIGHT = 320
+
+function messageHasAttachments (msg: any): boolean {
+    return !!msg?.content?.attachments?.length
+}
+
+function isClosedConversation (c: any): boolean {
+    return !!c?.state_events?.['m.conversation.closed']?.['']
+}
+
+const forwardEligibleConversations = computed(() => {
+    return state.sortedConversations.value.filter((c) => {
+        if (!c || c.currentUserStatus !== 'join') return false
+        if (isClosedConversation(c)) return false
+        if (c.currentUserRole === 'manager') return false
+        return true
+    })
+})
+
+function openForwardPicker (msg: any, e: MouseEvent) {
+    if (!msg?.event_id) return
+    if (messageHasAttachments(msg)) return
+    closeEmojiPicker()
+
+    const trigger = e.currentTarget as HTMLElement | null
+    if (!trigger) return
+    const rect = trigger.getBoundingClientRect()
+    const viewportH = window.innerHeight
+    const viewportW = window.innerWidth
+
+    let y = rect.bottom + 6
+    if (y + FORWARD_PICKER_MAX_HEIGHT > viewportH - 8) {
+        y = Math.max(8, rect.top - FORWARD_PICKER_MAX_HEIGHT - 6)
+    }
+    if (y < 8) y = 8
+
+    let x = rect.left
+    if (x + FORWARD_PICKER_WIDTH > viewportW - 8) {
+        x = Math.max(8, viewportW - FORWARD_PICKER_WIDTH - 8)
+    }
+
+    forwardPickerPos.value = { x, y }
+    forwardPickerSourceMsg.value = msg
+    forwardPickerOpen.value = true
+}
+
+function closeForwardPicker () {
+    forwardPickerOpen.value = false
+    forwardPickerSourceMsg.value = null
+}
+
+function handleForwardToConversation (targetConversationId: number | string) {
+    const src = forwardPickerSourceMsg.value
+    if (!src) return
+    const label = extractSipUser(src.sender)
+    const ok = actions.forwardMessage(src, targetConversationId, label)
+    if (!ok) {
+        sendError.value = 'Forward failed. The SDK returned false — check the MSRP session or console.'
+    }
+    closeForwardPicker()
+}
+
+function handleChangeRole (targetUri: string, newRole: string) {
+    const key = state.currentConversationId.value
+    if (!key) return
+    actions.changeMemberRole(key, targetUri, newRole as 'in_charge' | 'manager' | 'assigned')
+}
+
+const sortedMessages = computed(() => {
+    return [ ...state.currentMessages.value ].sort(
+        (a, b) => (a.origin_server_ts || 0) - (b.origin_server_ts || 0)
+    )
+})
+
+const sortedRealMessages = computed(() =>
+    sortedMessages.value.filter((m: any) => m?.type === MSRP_EVT.MESSAGE)
+)
+
+const currentReadPointer = computed<string | null | undefined>(() => {
+    return state.currentConversation.value?.currentUserLastReadMessageId
+})
+
+const currentReadPointerIndex = computed<number>(() => {
+    const pointer = currentReadPointer.value
+    if (pointer === null || pointer === undefined) return -1
+    const list = sortedRealMessages.value
+    for (let i = list.length - 1; i >= 0; i--) {
+        if (list[i]?.event_id === pointer) return i
+    }
+    return -1
+})
+
+const firstUnreadEventIdInCurrent = computed<string | null>(() => {
+    const cid = state.currentConversationId.value
+    if (!cid) return null
+    return state.firstUnreadByConversation.value[cid] ?? null
+})
+
+function canMarkMessageAsUnread (msg: any): boolean {
+    if (!msg?.event_id) return false
+    const pointer = currentReadPointer.value
+    // Absent pointer means the backend hasn't shared read state yet — hide
+    // to avoid confusing the user with an action of unclear effect.
+    if (pointer === undefined) return false
+    // Already whole-conversation unread → nothing would change.
+    if (pointer === null) return false
+    const list = sortedRealMessages.value
+    if (!list.length) return false
+    const pointerIdx = currentReadPointerIndex.value
+    const msgIdx = list.findIndex((m: any) => m?.event_id === msg.event_id)
+    if (msgIdx === -1) return false
+    // Must be a message the agent already read AND must not be the most-
+    // recent message (per FRONTEND_MARK_AS_UNREAD_GUIDE §7b).
+    if (msgIdx > pointerIdx) return false
+    if (msgIdx === list.length - 1) return false
+    return true
+}
+
+function canMarkConversationAsUnread (conv: any): boolean {
+    if (!conv) return false
+    if (conv.currentUserStatus !== 'join') return false
+    // Guide §7b: hidden when already fully unread.
+    return conv.currentUserLastReadMessageId !== null
+}
+
+function handleMarkConversationAsUnread (
+    conversationId: number | string | undefined,
+    e?: MouseEvent
+) {
+    if (e) e.stopPropagation()
+    if (conversationId === undefined || conversationId === null) return
+    actions.markConversationAsUnread(conversationId as any)
+}
+
+function handleMarkAsUnreadFromMessage (msg: any) {
+    const cid = state.currentConversationId.value
+    if (!cid || !msg?.event_id) return
+    actions.markAsUnreadFromMessage(cid, msg.event_id)
+}
+
+watch(sortedMessages, async () => {
+    await nextTick()
+    if (chatMessagesEl.value) {
+        chatMessagesEl.value.scrollTop = chatMessagesEl.value.scrollHeight
+    }
+})
+
+function extractSipUser (uri: string | null | undefined): string {
+    if (!uri) return 'unknown'
+    const match = String(uri).match(/^sip:([^@]+)@/)
+    return match ? match[1] : String(uri)
+}
+
+function formatTime (ts: number | undefined): string {
+    if (!ts) return ''
+    return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+function statusIcon (status: string | undefined): string {
+    switch (status) {
+        case 'pending': return '⏳'
+        case 'sent': return '✓'
+        case 'delivered': return '✓✓'
+        case 'read': return '✓✓ (read)'
+        case 'failed': return '⚠️'
+        default: return ''
+    }
+}
+
+function quickReactions () {
+    return QUICK_REACTION_EMOJIS
+}
+
+function isEdited (msg: any): boolean {
+    if (msg?.content?.edited_at) return true
+    return !!msg?.unsigned?.['m.relations']?.['m.replace']
+}
+
+function isDeleted (msg: any): boolean {
+    return !!msg?.content?.is_deleted
+}
+
+function isInternalNote (msg: any): boolean {
+    return msg?.content?.message_type === 'internal_note'
+}
+
+function forwardedFromLabel (msg: any): string | null {
+    const label = msg?.content?.forwarded_from
+    if (typeof label !== 'string') return null
+    const trimmed = label.trim()
+    return trimmed || null
+}
+
+function replyPreviewFor (msg: any): { sender: string, text: string } | null {
+    const parentId = msg?.content?.in_reply_to?.event_id
+    if (!parentId) return null
+    const parent = state.currentMessages.value.find((m: any) => m.event_id === parentId)
+    if (!parent) {
+        return { sender: 'unknown', text: '(message not loaded)' }
+    }
+    return {
+        sender: extractSipUser(parent.sender),
+        text: isDeleted(parent) ? '(deleted)' : messageBodyText(parent).slice(0, 120)
+    }
+}
+
+function presenceClass (uri: string): string {
+    const p = state.presenceBySender.value[uri]?.presence
+    switch (p) {
+        case 'online': return 'presence online'
+        case 'away': return 'presence away'
+        case 'offline': return 'presence offline'
+        default: return 'presence unknown'
+    }
+}
+
+function debugReplacer (_key: string, value: unknown): unknown {
+    if (value instanceof Map) return Object.fromEntries(value.entries())
+    if (value instanceof Set) return Array.from(value)
+    return value
+}
+
+const debugConversations = computed(() =>
+    JSON.stringify(state.conversations.value, debugReplacer, 2)
+)
+const debugCurrentConversationId = computed(() =>
+    JSON.stringify(state.currentConversationId.value, debugReplacer, 2)
+)
+const debugCurrentConversation = computed(() =>
+    JSON.stringify(state.currentConversation.value, debugReplacer, 2)
+)
+const debugCurrentMessages = computed(() =>
+    JSON.stringify(state.currentMessages.value, debugReplacer, 2)
+)
+const debugMessagesByConversation = computed(() =>
+    JSON.stringify(state.messagesByConversation.value, debugReplacer, 2)
+)
+
+watch(() => state.currentConversationId.value, (next, prev) => {
+    if (prev) actions.stopTypingKeepAlive()
+    draft.value = ''
+    editingMessageId.value = null
+    replyingToMessage.value = null
+    sendAsInternalNote.value = false
+    nextTick(() => autoResizeDraft())
+})
+
+onBeforeUnmount(() => {
+    actions.stopTypingKeepAlive()
+})
+</script>
+
+<template>
+    <div class="app">
+        <header class="app-header">
+            <h1>opensips-js MSRP Demo</h1>
+            <div class="conn-status">
+                <span class="dot" :class="{
+                    ready: state.isOpenSIPSReady.value,
+                    reconnecting: state.isOpenSIPSReconnecting.value
+                }" />
+                {{
+                    state.isOpenSIPSReconnecting.value
+                        ? 'Reconnecting...'
+                        : state.isOpenSIPSReady.value
+                            ? 'Connected'
+                            : state.isInitialized.value
+                                ? 'Disconnected'
+                                : 'Not connected'
+                }}
+                <span v-if="state.hasActiveMsrpSession.value" class="badge ok">MSRP session live</span>
+                <span v-else-if="state.isMSRPInitializing.value" class="badge pending">MSRP initializing...</span>
+            </div>
+        </header>
+
+        <section v-if="!state.isInitialized.value" class="login-card">
+            <h2>Connect</h2>
+            <p class="hint">Credentials are persisted to localStorage (same keys as demo_example/main.js).</p>
+            <label>
+                <span>SIP Domain</span>
+                <input v-model="domain" placeholder="sip07.voicenter.co" autocomplete="off" />
+            </label>
+            <label>
+                <span>Username</span>
+                <input v-model="username" placeholder="extension or user" autocomplete="username" />
+            </label>
+            <label>
+                <span>Password</span>
+                <input v-model="password" type="password" autocomplete="current-password" />
+            </label>
+            <label>
+                <span>MSRP Domain (optional)</span>
+                <input v-model="msrpDomain" placeholder="185.138.169.99:2856" autocomplete="off" />
+            </label>
+            <label>
+                <span>Token</span>
+                <input
+                    v-model="apiToken"
+                    type="password"
+                    placeholder="Voicenter Login JWT (Bearer)"
+                    autocomplete="off"
+                />
+                <small class="hint">Used as <code>Authorization: Bearer &lt;token&gt;</code> for requests to
+                    <code>wbi.voicenter.co/api/v1</code>.</small>
+            </label>
+
+            <div class="row">
+                <button class="primary" :disabled="isConnecting" @click="handleConnect">
+                    {{ isConnecting ? 'Connecting...' : 'Connect' }}
+                </button>
+                <button class="ghost" @click="handleForget">Forget credentials</button>
+            </div>
+
+            <p v-if="connectError" class="error">{{ connectError }}</p>
+        </section>
+
+        <main v-else class="main">
+            <aside class="sidebar">
+                <div class="sidebar-actions">
+                    <button
+                        v-if="!state.hasActiveMsrpSession.value"
+                        class="primary block"
+                        :disabled="state.isMSRPInitializing.value"
+                        @click="handleStartMSRPSession"
+                    >
+                        {{ state.isMSRPInitializing.value ? 'Starting...' : 'Start MSRP session' }}
+                    </button>
+
+                    <div v-else class="create-conversation">
+                        <input
+                            v-model="newConversationTarget"
+                            placeholder="SIP URI or extension to invite"
+                            @keypress.enter="handleCreateConversation"
+                        />
+                        <button class="primary" @click="handleCreateConversation">
+                            + New Conversation
+                        </button>
+                    </div>
+
+                    <button class="ghost block" @click="handleLogout">Disconnect</button>
+                </div>
+
+                <h3 class="sidebar-title">Conversations</h3>
+                <ul v-if="state.sortedConversations.value.length" class="conversation-list">
+                    <li
+                        v-for="conv in state.sortedConversations.value"
+                        :key="conv.conversation_id"
+                        :class="{
+                            active: String(conv.conversation_id) === state.currentConversationId.value,
+                            invite: conv.currentUserStatus === 'invite'
+                        }"
+                    >
+                        <div v-if="conv.currentUserStatus === 'invite'" class="invite-card">
+                            <div class="invite-title">📨 {{ conv.conversation_id }}</div>
+                            <div v-if="conv.creator" class="invite-from">
+                                From: {{ extractSipUser(conv.creator) }}
+                            </div>
+                            <div class="invite-actions">
+                                <button class="primary small" @click="handleAcceptInvite(conv.conversation_id)">
+                                    Accept
+                                </button>
+                                <button class="ghost small" @click="handleRejectInvite(conv.conversation_id)">
+                                    Reject
+                                </button>
+                            </div>
+                        </div>
+                        <div v-else class="conv-row">
+                            <button
+                                class="conversation-btn"
+                                @click="handleSelectConversation(conv.conversation_id)"
+                            >
+                                <span class="name">{{ conv.conversation_id }}</span>
+                                <span
+                                    v-if="state.unreadByConversation.value[String(conv.conversation_id)]"
+                                    class="unread"
+                                >
+                                    {{ state.unreadByConversation.value[String(conv.conversation_id)] }}
+                                </span>
+                            </button>
+                            <button
+                                v-if="canMarkConversationAsUnread(conv)"
+                                class="conv-row-action"
+                                title="Mark conversation as unread"
+                                @click="handleMarkConversationAsUnread(conv.conversation_id, $event)"
+                            >
+                                ✉
+                            </button>
+                        </div>
+                    </li>
+                </ul>
+                <p v-else class="hint">
+                    No conversations yet. {{
+                        state.hasActiveMsrpSession.value
+                            ? 'Invite someone to start.'
+                            : 'Start an MSRP session first.'
+                    }}
+                </p>
+
+                <details class="debug-panel" open>
+                    <summary>Debug · reactive state</summary>
+                    <div class="debug-block">
+                        <div class="debug-label">currentConversationId</div>
+                        <pre class="debug-json">{{ debugCurrentConversationId }}</pre>
+                    </div>
+                    <div class="debug-block">
+                        <div class="debug-label">currentConversation</div>
+                        <pre class="debug-json">{{ debugCurrentConversation }}</pre>
+                    </div>
+                    <div class="debug-block">
+                        <div class="debug-label">currentMessages</div>
+                        <pre class="debug-json">{{ debugCurrentMessages }}</pre>
+                    </div>
+                    <div class="debug-block">
+                        <div class="debug-label">conversations</div>
+                        <pre class="debug-json">{{ debugConversations }}</pre>
+                    </div>
+                    <div class="debug-block">
+                        <div class="debug-label">messagesByConversation</div>
+                        <pre class="debug-json">{{ debugMessagesByConversation }}</pre>
+                    </div>
+                </details>
+            </aside>
+
+            <section class="chat-panel">
+                <div v-if="!state.currentConversation.value" class="empty-state">
+                    <p>Select or create a conversation to start chatting.</p>
+                </div>
+
+                <template v-else>
+                    <header class="chat-header">
+                        <div>
+                            <h2>{{ state.currentConversation.value.conversation_id }}</h2>
+                            <p class="subtitle">
+                                {{ state.currentConversation.value.members.size }}
+                                member{{ state.currentConversation.value.members.size === 1 ? '' : 's' }}
+                                <span v-if="myRoleLabel"> · You: {{ myRoleLabel }}</span>
+                                <span v-if="isCurrentConversationClosed" class="badge warn">closed</span>
+                            </p>
+                        </div>
+                        <div class="header-actions">
+                            <button
+                                class="ghost small"
+                                :disabled="isExporting"
+                                :title="isExporting ? 'Preparing…' : 'Download transcript (.json)'"
+                                @click="handleExportConversation(state.currentConversation.value.conversation_id)"
+                            >
+                                {{ isExporting ? 'Preparing…' : 'Export' }}
+                            </button>
+                            <button
+                                v-if="!isCurrentConversationClosed
+                                    && (state.currentConversation.value.currentUserRole === 'in_charge'
+                                        || state.currentConversation.value.currentUserRole === 'manager')"
+                                class="ghost small"
+                                @click="handleCloseConversation(state.currentConversation.value.conversation_id)"
+                            >
+                                Close
+                            </button>
+                            <button
+                                class="ghost small"
+                                @click="handleLeaveConversation(state.currentConversation.value.conversation_id)"
+                            >
+                                Leave
+                            </button>
+                        </div>
+                    </header>
+
+                    <details v-if="state.currentConversation.value.memberRoles.size > 0" class="members-panel">
+                        <summary>👥 Members ({{ state.currentConversation.value.memberRoles.size }})</summary>
+                        <div
+                            v-for="[uri, role] in state.currentConversation.value.memberRoles"
+                            :key="uri"
+                            class="member-row"
+                        >
+                            <span
+                                :class="presenceClass(uri)"
+                                :title="state.presenceBySender.value[uri]?.presence || 'unknown presence'"
+                            />
+                            <span class="name">{{ extractSipUser(uri) }}</span>
+                            <span class="role-tag" :class="role">{{ role }}</span>
+                            <select
+                                v-if="state.currentConversation.value.currentUserRole === 'in_charge'
+                                    || state.currentConversation.value.currentUserRole === 'manager'"
+                                :value="role"
+                                @change="(e) => handleChangeRole(uri, (e.target as HTMLSelectElement).value)"
+                            >
+                                <option value="in_charge">⚡ in_charge</option>
+                                <option value="manager">👁 manager</option>
+                                <option value="assigned">👤 assigned</option>
+                            </select>
+                        </div>
+                    </details>
+
+                    <div ref="chatMessagesEl" class="chat-messages">
+                        <template
+                            v-for="msg in sortedMessages"
+                            :key="msg.event_id ?? `${msg.origin_server_ts}-${msg.sender}`"
+                        >
+                            <div
+                                v-if="msg.event_id
+                                    && firstUnreadEventIdInCurrent
+                                    && msg.event_id === firstUnreadEventIdInCurrent"
+                                class="unread-divider"
+                            >
+                                <span>New messages</span>
+                            </div>
+                        <div
+                            class="message"
+                            :class="{
+                                mine: isMyMessage(msg),
+                                'internal-note': isInternalNote(msg),
+                                'is-deleted': isDeleted(msg),
+                                editing: editingMessageId === msg.event_id
+                            }"
+                        >
+                            <div class="message-meta">
+                                <span class="sender">{{ extractSipUser(msg.sender) }}</span>
+                                <span v-if="isInternalNote(msg)" class="tag note-tag">note</span>
+                                <span class="time">{{ formatTime(msg.origin_server_ts) }}</span>
+                                <span v-if="isEdited(msg) && !isDeleted(msg)" class="tag edited-tag" title="Edited">edited</span>
+                                <span class="status">{{ statusIcon(msg.content?.status) }}</span>
+                            </div>
+
+                            <div v-if="replyPreviewFor(msg)" class="reply-quote">
+                                <span class="reply-quote-sender">
+                                    ↩ {{ replyPreviewFor(msg)?.sender }}
+                                </span>
+                                <span class="reply-quote-body">
+                                    {{ replyPreviewFor(msg)?.text }}
+                                </span>
+                            </div>
+
+                            <div v-if="forwardedFromLabel(msg)" class="forwarded-label">
+                                ↪ Forwarded from <b>{{ forwardedFromLabel(msg) }}</b>
+                            </div>
+
+                            <div v-if="isDeleted(msg)" class="message-body deleted-body">
+                                🗑 This message was deleted
+                            </div>
+                            <div v-else class="message-body">{{ msg.content?.content }}</div>
+
+                            <div
+                                v-if="!isDeleted(msg) && msg.content?.attachments?.length"
+                                class="attachments"
+                            >
+                                <span
+                                    v-for="(att, idx) in msg.content.attachments"
+                                    :key="idx"
+                                    class="attachment"
+                                >
+                                    📎 {{ att.filename ?? att.kind }}
+                                </span>
+                            </div>
+
+                            <div
+                                v-if="!isDeleted(msg) && msg.content?.reactions_summary?.length"
+                                class="reactions"
+                            >
+                                <button
+                                    v-for="r in msg.content.reactions_summary"
+                                    :key="r.emoji ?? r.key"
+                                    class="reaction"
+                                    :class="{ 'viewer-reacted': r.viewer_reacted }"
+                                    :title="r.viewer_reacted ? 'Remove your reaction' : 'React with ' + (r.emoji ?? r.key)"
+                                    @click="handleToggleReaction(msg, r.emoji ?? r.key)"
+                                >
+                                    {{ r.emoji ?? r.key }} {{ r.count }}
+                                </button>
+                            </div>
+
+                            <div v-if="msg.event_id && !isDeleted(msg)" class="msg-actions">
+                                <button
+                                    v-for="emoji in quickReactions()"
+                                    :key="emoji"
+                                    class="emoji-btn"
+                                    :title="'React ' + emoji"
+                                    @click="handleAddReaction(msg.event_id, emoji)"
+                                >
+                                    {{ emoji }}
+                                </button>
+                                <button
+                                    class="action-btn"
+                                    title="More emoji…"
+                                    :class="{ active: emojiPickerOpen && emojiPickerTargetEventId === msg.event_id }"
+                                    @click="openEmojiPicker(msg, $event)"
+                                >
+                                    ➕
+                                </button>
+                                <button
+                                    class="action-btn"
+                                    title="Reply"
+                                    @click="beginReply(msg)"
+                                >
+                                    ↩
+                                </button>
+                                <button
+                                    class="action-btn"
+                                    :title="messageHasAttachments(msg)
+                                        ? 'Forwarding media is not supported yet'
+                                        : 'Forward'"
+                                    :disabled="messageHasAttachments(msg)"
+                                    :class="{ active: forwardPickerOpen
+                                        && forwardPickerSourceMsg?.event_id === msg.event_id }"
+                                    @click="openForwardPicker(msg, $event)"
+                                >
+                                    ➡
+                                </button>
+                                <button
+                                    v-if="canMarkMessageAsUnread(msg)"
+                                    class="action-btn"
+                                    title="Mark as unread from here"
+                                    @click="handleMarkAsUnreadFromMessage(msg)"
+                                >
+                                    ✉
+                                </button>
+                                <template v-if="isMyMessage(msg)">
+                                    <button
+                                        class="action-btn"
+                                        title="Edit"
+                                        @click="beginEdit(msg)"
+                                    >
+                                        ✎
+                                    </button>
+                                    <button
+                                        class="action-btn danger"
+                                        title="Delete"
+                                        @click="handleDelete(msg)"
+                                    >
+                                        🗑
+                                    </button>
+                                </template>
+                            </div>
+                        </div>
+                        </template>
+                        <p v-if="!sortedMessages.length" class="hint center">
+                            No messages yet. Say hello.
+                        </p>
+                    </div>
+
+                    <div
+                        v-if="state.typingByConversation.value[String(state.currentConversation.value.conversation_id)]"
+                        class="typing-indicator"
+                    >
+                        {{ extractSipUser(
+                            state.typingByConversation.value[String(state.currentConversation.value.conversation_id)].sender
+                        ) }} is typing…
+                    </div>
+
+                    <div v-if="canSend" class="compose-wrap">
+                        <div v-if="editingMessageId" class="compose-banner edit">
+                            <span class="banner-label">✎ Editing message</span>
+                            <button class="ghost small" @click="cancelEdit">Cancel</button>
+                        </div>
+                        <div v-else-if="replyingToMessage" class="compose-banner reply">
+                            <span class="banner-label">
+                                ↩ Replying to <b>{{ extractSipUser(replyingToMessage.sender) }}</b>:
+                                <span class="banner-preview">
+                                    {{ messageBodyText(replyingToMessage).slice(0, 80) }}
+                                </span>
+                            </span>
+                            <button class="ghost small" @click="cancelReply">Cancel</button>
+                        </div>
+
+                        <footer class="compose-bar" :class="{ note: sendAsInternalNote }">
+                            <label class="upload-btn" :class="{ disabled: isUploading || !!editingMessageId }">
+                                📎
+                                <input
+                                    ref="uploadInputRef"
+                                    type="file"
+                                    hidden
+                                    :disabled="isUploading || !!editingMessageId"
+                                    @change="handleFileSelected"
+                                />
+                            </label>
+                            <label
+                                v-if="!editingMessageId"
+                                class="note-toggle"
+                                :class="{ on: sendAsInternalNote }"
+                                title="Internal note - operators only, never fanned out to external channels"
+                            >
+                                <input
+                                    v-model="sendAsInternalNote"
+                                    type="checkbox"
+                                    hidden
+                                />
+                                📝 Note
+                            </label>
+                            <textarea
+                                ref="draftEl"
+                                v-model="draft"
+                                class="draft"
+                                rows="1"
+                                :placeholder="editingMessageId
+                                    ? 'Edit your message…'
+                                    : sendAsInternalNote
+                                        ? 'Internal note (not sent to customer)…'
+                                        : 'Type a message…  (Shift+Enter = new line)'"
+                                @input="handleDraftInput"
+                                @keydown="handleDraftKeydown"
+                                @focus="handleDraftFocus"
+                                @blur="handleDraftBlur"
+                            />
+                            <button class="primary" :disabled="!draft.trim()" @click="handleSend">
+                                {{ editingMessageId ? 'Save' : '➤' }}
+                            </button>
+                        </footer>
+                    </div>
+                    <footer v-else class="compose-bar disabled">
+                        <span class="hint">
+                            {{
+                                isCurrentConversationClosed
+                                    ? 'This conversation is closed.'
+                                    : 'Managers cannot send customer-visible messages.'
+                            }}
+                        </span>
+                    </footer>
+
+                    <p v-if="sendError" class="error small">{{ sendError }}</p>
+                    <p v-if="uploadError" class="error small">{{ uploadError }}</p>
+                    <p v-if="exportError" class="error small">{{ exportError }}</p>
+                    <p v-if="isUploading" class="hint small">Uploading…</p>
+                </template>
+            </section>
+        </main>
+
+        <EmojiPicker
+            :open="emojiPickerOpen"
+            :x="emojiPickerPos.x"
+            :y="emojiPickerPos.y"
+            @select="handleEmojiPicked"
+            @close="closeEmojiPicker"
+        />
+
+        <template v-if="forwardPickerOpen">
+            <div class="fp-backdrop" @click="closeForwardPicker" />
+            <div
+                class="forward-picker"
+                :style="{ top: forwardPickerPos.y + 'px', left: forwardPickerPos.x + 'px' }"
+                @click.stop
+            >
+                <div class="fp-header">
+                    <span>Forward to…</span>
+                    <button class="ghost small" @click="closeForwardPicker">✕</button>
+                </div>
+                <div v-if="forwardEligibleConversations.length" class="fp-list">
+                    <button
+                        v-for="c in forwardEligibleConversations"
+                        :key="c.conversation_id"
+                        class="fp-item"
+                        :class="{ current: String(c.conversation_id) === state.currentConversationId.value }"
+                        @click="handleForwardToConversation(c.conversation_id)"
+                    >
+                        <span class="fp-item-name">
+                            #{{ c.conversation_id }}
+                            <span
+                                v-if="String(c.conversation_id) === state.currentConversationId.value"
+                                class="fp-item-current-tag"
+                            >
+                                current
+                            </span>
+                        </span>
+                        <span class="fp-item-meta">
+                            {{ c.members.size }} member{{ c.members.size === 1 ? '' : 's' }}
+                        </span>
+                    </button>
+                </div>
+                <p v-else class="fp-empty hint small">
+                    No other conversations available to forward to.
+                </p>
+            </div>
+        </template>
+    </div>
+</template>
+
+<style scoped>
+.app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: #1f2937;
+    background: #f3f4f6;
+}
+
+.app-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1.5rem;
+    background: #111827;
+    color: #f9fafb;
+    border-bottom: 1px solid #1f2937;
+}
+
+.app-header h1 { margin: 0; font-size: 1.1rem; font-weight: 600; }
+
+.conn-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+}
+
+.dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: #9ca3af;
+}
+.dot.ready { background: #10b981; }
+.dot.reconnecting { background: #f59e0b; }
+
+.badge {
+    padding: 1px 7px;
+    font-size: 0.7rem;
+    border-radius: 999px;
+    background: #374151;
+    color: #f9fafb;
+}
+.badge.ok { background: #065f46; }
+.badge.pending { background: #92400e; }
+.badge.warn { background: #b91c1c; }
+
+.login-card {
+    margin: 2rem auto;
+    background: #ffffff;
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
+    max-width: 420px;
+    width: calc(100% - 2rem);
+}
+
+.login-card h2 { margin: 0 0 0.25rem; }
+.login-card label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin: 0.75rem 0;
+    font-size: 0.85rem;
+    color: #374151;
+}
+.login-card input {
+    padding: 0.5rem 0.7rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    font-size: 0.95rem;
+}
+.login-card small {
+    color: #6b7280;
+    font-size: 0.7rem;
+    line-height: 1.35;
+}
+.login-card code {
+    background: #f3f4f6;
+    padding: 0 3px;
+    border-radius: 3px;
+    font-size: 0.68rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
+
+.main {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 1rem;
+    padding: 1rem;
+    min-height: 0;
+}
+
+.sidebar {
+    background: #ffffff;
+    border-radius: 0.75rem;
+    padding: 1rem;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+.sidebar-actions { display: flex; flex-direction: column; gap: 0.5rem; }
+.sidebar-title {
+    margin: 1rem 0 0.5rem;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #6b7280;
+}
+.create-conversation { display: flex; flex-direction: column; gap: 0.25rem; }
+.create-conversation input {
+    padding: 0.45rem 0.6rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    font-size: 0.85rem;
+}
+
+.conversation-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    flex: 1;
+}
+.conversation-list li { margin-bottom: 0.35rem; }
+.conversation-btn {
+    width: 100%;
+    text-align: left;
+    background: #f9fafb;
+    border: 1px solid transparent;
+    padding: 0.5rem 0.7rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.conversation-btn:hover { background: #f3f4f6; }
+.conversation-list li.active .conversation-btn {
+    background: #eef2ff;
+    border-color: #6366f1;
+}
+.conversation-list .unread {
+    background: #ef4444;
+    color: white;
+    border-radius: 999px;
+    padding: 0 6px;
+    font-size: 0.75rem;
+}
+
+.conv-row {
+    display: flex;
+    align-items: stretch;
+    gap: 0.25rem;
+}
+.conv-row .conversation-btn { flex: 1; min-width: 0; }
+.conv-row-action {
+    background: transparent;
+    border: 1px solid transparent;
+    padding: 0 0.55rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    color: #6b7280;
+    font-size: 0.95rem;
+    opacity: 0;
+    transition: opacity 0.15s ease, background 0.15s ease;
+}
+.conv-row:hover .conv-row-action { opacity: 1; }
+.conv-row-action:hover {
+    background: #f3f4f6;
+    color: #111827;
+    border-color: #e5e7eb;
+}
+
+.invite-card {
+    background: #fef3c7;
+    border: 1px solid #fbbf24;
+    border-radius: 0.5rem;
+    padding: 0.6rem;
+}
+.invite-title { font-weight: 600; }
+.invite-from { font-size: 0.8rem; color: #6b7280; margin: 0.25rem 0; }
+.invite-actions { display: flex; gap: 0.35rem; }
+
+.chat-panel {
+    background: #ffffff;
+    border-radius: 0.75rem;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+}
+.chat-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.85rem 1rem;
+    border-bottom: 1px solid #e5e7eb;
+}
+.chat-header h2 { margin: 0; font-size: 1rem; }
+.subtitle { margin: 0; font-size: 0.8rem; color: #6b7280; display: flex; gap: 0.5rem; align-items: center; }
+.header-actions { display: flex; gap: 0.3rem; }
+
+.members-panel {
+    border-bottom: 1px solid #e5e7eb;
+    padding: 0.4rem 1rem;
+    font-size: 0.85rem;
+}
+.member-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+}
+.member-row .name { flex: 1; }
+.role-tag {
+    font-size: 0.7rem;
+    padding: 2px 6px;
+    border-radius: 999px;
+    background: #e5e7eb;
+}
+.role-tag.in_charge { background: #fef3c7; }
+.role-tag.manager { background: #dbeafe; }
+
+.presence {
+    width: 0.55rem;
+    height: 0.55rem;
+    border-radius: 50%;
+    background: #9ca3af;
+    flex-shrink: 0;
+}
+.presence.online { background: #10b981; }
+.presence.away { background: #f59e0b; }
+.presence.offline { background: #6b7280; }
+.presence.unknown { background: #d1d5db; }
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+.unread-divider {
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #ef4444;
+    font-size: 0.72rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin: 0.25rem 0;
+}
+.unread-divider::before,
+.unread-divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #ef4444;
+    opacity: 0.35;
+}
+.unread-divider span { white-space: nowrap; }
+.message {
+    background: #f3f4f6;
+    border-radius: 0.6rem;
+    padding: 0.5rem 0.7rem;
+    max-width: 80%;
+    align-self: flex-start;
+    border: 1px solid transparent;
+}
+.message.mine {
+    background: #eef2ff;
+    border-color: #c7d2fe;
+    align-self: flex-end;
+}
+.message.internal-note {
+    background: #fef9c3;
+    border-color: #fde68a;
+}
+.message.internal-note.mine {
+    background: #fde68a;
+    border-color: #f59e0b;
+}
+.message.editing {
+    outline: 2px dashed #6366f1;
+    outline-offset: 1px;
+}
+.message.is-deleted { opacity: 0.7; }
+.deleted-body { font-style: italic; color: #6b7280; }
+.tag {
+    font-size: 0.65rem;
+    padding: 1px 6px;
+    border-radius: 999px;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+.note-tag { background: #f59e0b; color: white; }
+.edited-tag { background: #e5e7eb; color: #4b5563; }
+.reply-quote {
+    border-left: 3px solid #6366f1;
+    padding: 0.15rem 0.4rem;
+    margin: 0.15rem 0 0.25rem;
+    background: rgba(99, 102, 241, 0.06);
+    border-radius: 0.25rem;
+    font-size: 0.78rem;
+    color: #4b5563;
+    display: flex;
+    flex-direction: column;
+    gap: 0.05rem;
+}
+.reply-quote-sender { font-weight: 600; color: #4338ca; }
+.reply-quote-body { white-space: pre-wrap; word-break: break-word; }
+.forwarded-label {
+    font-size: 0.72rem;
+    color: #475569;
+    background: rgba(148, 163, 184, 0.15);
+    border-left: 3px solid #94a3b8;
+    padding: 2px 6px;
+    border-radius: 0.25rem;
+    margin: 0.1rem 0 0.25rem;
+}
+.forwarded-label b { color: #1e293b; }
+.message-meta {
+    display: flex;
+    gap: 0.5rem;
+    font-size: 0.7rem;
+    color: #6b7280;
+    margin-bottom: 0.15rem;
+}
+.message-meta .sender { font-weight: 600; color: #374151; }
+.message-body { font-size: 0.95rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
+.attachments { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.25rem; }
+.attachment {
+    font-size: 0.78rem;
+    padding: 2px 6px;
+    background: #ffffff;
+    border-radius: 0.3rem;
+    border: 1px solid #e5e7eb;
+}
+.reactions { display: flex; gap: 0.25rem; margin-top: 0.3rem; flex-wrap: wrap; }
+.reaction {
+    font-size: 0.8rem;
+    padding: 1px 6px;
+    background: #ffffff;
+    border-radius: 999px;
+    border: 1px solid #e5e7eb;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+}
+.reaction:hover { background: #f3f4f6; }
+.reaction.viewer-reacted {
+    background: #eef2ff;
+    border-color: #6366f1;
+    font-weight: 600;
+}
+.msg-actions {
+    display: flex;
+    gap: 0.15rem;
+    margin-top: 0.3rem;
+    opacity: 0;
+    transition: opacity 0.15s;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.message:hover .msg-actions { opacity: 1; }
+.message.editing .msg-actions { opacity: 1; }
+.emoji-btn,
+.action-btn {
+    background: transparent;
+    border: 1px solid transparent;
+    padding: 1px 5px;
+    font-size: 0.95rem;
+    cursor: pointer;
+    border-radius: 0.3rem;
+}
+.emoji-btn:hover,
+.action-btn:hover { background: #f3f4f6; border-color: #e5e7eb; }
+.action-btn.active {
+    background: #eef2ff;
+    border-color: #6366f1;
+}
+.action-btn.danger:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
+
+.typing-indicator {
+    padding: 0.25rem 1rem;
+    font-size: 0.8rem;
+    color: #6b7280;
+    font-style: italic;
+}
+
+.compose-wrap {
+    border-top: 1px solid #e5e7eb;
+    display: flex;
+    flex-direction: column;
+}
+.compose-banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.35rem 0.75rem;
+    font-size: 0.78rem;
+    background: #f3f4f6;
+    border-bottom: 1px solid #e5e7eb;
+    gap: 0.5rem;
+}
+.compose-banner.reply { background: #eef2ff; color: #4338ca; }
+.compose-banner.edit { background: #fef3c7; color: #92400e; }
+.banner-label { display: inline-flex; gap: 0.35rem; align-items: center; flex: 1; overflow: hidden; }
+.banner-preview {
+    color: #4b5563;
+    font-style: italic;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 240px;
+}
+.compose-bar {
+    display: flex;
+    gap: 0.4rem;
+    padding: 0.6rem 0.75rem;
+    align-items: flex-end;
+    border-top: 1px solid #e5e7eb;
+}
+.compose-wrap .compose-bar { border-top: none; }
+.compose-bar.disabled { color: #6b7280; align-items: center; }
+.compose-bar.note { background: #fef9c3; }
+.compose-bar .draft {
+    flex: 1;
+    padding: 0.5rem 0.7rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    font-size: 0.95rem;
+    font-family: inherit;
+    line-height: 1.35;
+    resize: none;
+    overflow-y: hidden;
+    min-height: calc(1.35em + 1rem + 2px);
+    max-height: calc(1.35em * 3 + 1rem + 2px);
+    display: block;
+    box-sizing: border-box;
+}
+.upload-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.4rem 0.55rem;
+    background: #f9fafb;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    cursor: pointer;
+}
+.upload-btn.disabled { opacity: 0.6; cursor: not-allowed; }
+.note-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
+    padding: 0.4rem 0.55rem;
+    background: #f9fafb;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    font-size: 0.82rem;
+    color: #4b5563;
+    user-select: none;
+}
+.note-toggle:hover { background: #f3f4f6; }
+.note-toggle.on {
+    background: #fef3c7;
+    border-color: #f59e0b;
+    color: #92400e;
+    font-weight: 600;
+}
+
+.empty-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6b7280;
+}
+
+button {
+    cursor: pointer;
+    border: 1px solid #d1d5db;
+    background: #f9fafb;
+    padding: 0.45rem 0.8rem;
+    border-radius: 0.5rem;
+    font-size: 0.85rem;
+}
+button:disabled { opacity: 0.6; cursor: not-allowed; }
+button.primary {
+    background: #4f46e5;
+    color: white;
+    border-color: #4338ca;
+}
+button.primary:hover:not(:disabled) { background: #4338ca; }
+button.ghost { background: transparent; }
+button.small { padding: 0.3rem 0.55rem; font-size: 0.78rem; }
+button.block { width: 100%; }
+
+.hint { color: #6b7280; font-size: 0.85rem; }
+.hint.small { font-size: 0.75rem; }
+.hint.center { text-align: center; margin: auto; }
+.error { color: #b91c1c; font-size: 0.85rem; margin: 0.5rem 0 0; }
+.error.small { font-size: 0.75rem; padding: 0 0.75rem 0.5rem; }
+
+.debug-panel {
+    margin-top: 1rem;
+    border: 1px dashed #cbd5e1;
+    border-radius: 0.5rem;
+    background: #f8fafc;
+    font-size: 0.75rem;
+}
+.debug-panel > summary {
+    cursor: pointer;
+    padding: 0.4rem 0.6rem;
+    font-weight: 600;
+    color: #475569;
+    user-select: none;
+}
+.debug-block { padding: 0 0.6rem 0.5rem; }
+.debug-label {
+    font-weight: 600;
+    color: #1e293b;
+    margin: 0.4rem 0 0.2rem;
+}
+.debug-json {
+    background: #0f172a;
+    color: #e2e8f0;
+    margin: 0;
+    padding: 0.5rem;
+    border-radius: 0.35rem;
+    max-height: 200px;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.7rem;
+    line-height: 1.3;
+}
+
+.fp-backdrop {
+    position: fixed;
+    inset: 0;
+    background: transparent;
+    z-index: 40;
+}
+.forward-picker {
+    position: fixed;
+    z-index: 50;
+    width: 260px;
+    max-height: 320px;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.6rem;
+    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.fp-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.4rem 0.6rem;
+    border-bottom: 1px solid #e5e7eb;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: #374151;
+    background: #f9fafb;
+}
+.fp-list {
+    overflow-y: auto;
+    padding: 0.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+}
+.fp-item {
+    width: 100%;
+    text-align: left;
+    background: transparent;
+    border: 1px solid transparent;
+    padding: 0.4rem 0.5rem;
+    border-radius: 0.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+}
+.fp-item:hover {
+    background: #eef2ff;
+    border-color: #c7d2fe;
+}
+.fp-item-name {
+    font-weight: 600;
+    color: #1f2937;
+    font-size: 0.85rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+.fp-item-current-tag {
+    font-size: 0.62rem;
+    padding: 1px 5px;
+    border-radius: 999px;
+    background: #eef2ff;
+    color: #4338ca;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+.fp-item-meta { font-size: 0.7rem; color: #6b7280; }
+.fp-empty { padding: 0.75rem; text-align: center; }
+</style>
diff --git a/msrp_demo/src/api/channels.ts b/msrp_demo/src/api/channels.ts
new file mode 100644
index 0000000..4cd0bb6
--- /dev/null
+++ b/msrp_demo/src/api/channels.ts
@@ -0,0 +1,103 @@
+import {
+    apiDelete,
+    apiGet,
+    apiPost,
+    buildApiUrl,
+    getApiToken
+} from './client'
+import type {
+    Channel,
+    GreenApiProvisionCompleteBody,
+    GreenApiProvisionStartResponse,
+    GreenApiProvisionStatusResponse,
+    MetaProvisionCompleteBody,
+    MetaProvisionPhonesResponse,
+    Provider,
+    SmsProvisionCompleteBody,
+    SmsProvisionStartResponse
+} from './types'
+
+// ---------- Provider catalogue ----------
+
+export function listProviders (): Promise<Provider[]> {
+    return apiGet<Provider[]>('/providers')
+}
+
+// ---------- Channels ----------
+
+export function listChannels (): Promise<Channel[]> {
+    return apiGet<Channel[]>('/channels')
+}
+
+export function deleteChannel (channelId: string | number): Promise<void> {
+    return apiDelete<void>(`/channels/${encodeURIComponent(String(channelId))}`)
+}
+
+export function deactivateChannel (channelId: string | number): Promise<void> {
+    return apiPost<void>(`/channels/${encodeURIComponent(String(channelId))}/deactivate`)
+}
+
+// ---------- Meta (WhatsApp Cloud API) provisioning ----------
+// The Meta OAuth flow runs in a popup window. The consumer opens
+// `getMetaProvisionStartUrl()` in a popup, waits for the callback to
+// message back a `sessionId`, then continues with `listMetaProvisionPhones()`
+// + `completeMetaProvision()`.
+
+export function getMetaProvisionStartUrl (): string {
+    const token = getApiToken()
+    if (!token) {
+        throw new Error('API token is not set - cannot build Meta provisioning URL')
+    }
+    return buildApiUrl('/provision/meta/start', { token })
+}
+
+export function listMetaProvisionPhones (sessionId: string): Promise<MetaProvisionPhonesResponse> {
+    return apiGet<MetaProvisionPhonesResponse>(
+        `/provision/meta/${encodeURIComponent(sessionId)}/phones`
+    )
+}
+
+export function completeMetaProvision (
+    sessionId: string,
+    body: MetaProvisionCompleteBody
+): Promise<Channel> {
+    return apiPost<Channel>(
+        `/provision/meta/${encodeURIComponent(sessionId)}/complete`,
+        body
+    )
+}
+
+// ---------- GreenAPI (WhatsApp via QR) provisioning ----------
+// The GreenAPI flow returns a session_id + QR code. The consumer polls
+// `getGreenApiProvisionStatus()` until it flips to 'authorized', then
+// calls `completeGreenApiProvision()` to persist the new channel.
+
+export function startGreenApiProvision (body?: Record<string, unknown>): Promise<GreenApiProvisionStartResponse> {
+    return apiPost<GreenApiProvisionStartResponse>('/provision/greenapi/start', body ?? {})
+}
+
+export function getGreenApiProvisionStatus (sessionId: string): Promise<GreenApiProvisionStatusResponse> {
+    return apiGet<GreenApiProvisionStatusResponse>(
+        `/provision/greenapi/${encodeURIComponent(sessionId)}/status`
+    )
+}
+
+export function completeGreenApiProvision (
+    sessionId: string,
+    body?: GreenApiProvisionCompleteBody
+): Promise<Channel> {
+    return apiPost<Channel>(
+        `/provision/greenapi/${encodeURIComponent(sessionId)}/complete`,
+        body ?? {}
+    )
+}
+
+// ---------- SMS provisioning (DID select) ----------
+
+export function startSmsProvision (body?: Record<string, unknown>): Promise<SmsProvisionStartResponse> {
+    return apiPost<SmsProvisionStartResponse>('/provision/sms/start', body ?? {})
+}
+
+export function completeSmsProvision (body: SmsProvisionCompleteBody): Promise<Channel> {
+    return apiPost<Channel>('/provision/sms/complete', body)
+}
diff --git a/msrp_demo/src/api/client.ts b/msrp_demo/src/api/client.ts
new file mode 100644
index 0000000..7b12ce5
--- /dev/null
+++ b/msrp_demo/src/api/client.ts
@@ -0,0 +1,95 @@
+import axios, { AxiosHeaders, AxiosInstance, AxiosRequestConfig } from 'axios'
+
+// Backend base URL. All routes documented under
+// https://wbi.voicenter.co/api/v1/... require a Voicenter Login JWT.
+export const API_BASE_URL = 'https://wbi.voicenter.co/api/v1'
+export const API_ORIGIN = 'https://wbi.voicenter.co'
+
+// Module-scoped token cache. `setApiToken(null)` clears it. The value is
+// injected into every outgoing request via the interceptor below.
+let apiToken: string | null = null
+
+export function setApiToken (token: string | null | undefined): void {
+    apiToken = token ? token.trim() : null
+}
+
+export function getApiToken (): string | null {
+    return apiToken
+}
+
+export function hasApiToken (): boolean {
+    return !!apiToken
+}
+
+// Single shared axios instance. Individual endpoint modules import this
+// instance instead of constructing their own so token / interceptor
+// changes propagate everywhere.
+export const apiClient: AxiosInstance = axios.create({
+    baseURL: API_BASE_URL,
+    timeout: 15000
+})
+
+apiClient.interceptors.request.use((config) => {
+    if (apiToken) {
+        const headers = AxiosHeaders.from(config.headers)
+        headers.set('Authorization', `Bearer ${apiToken}`)
+        config.headers = headers
+    }
+    return config
+})
+
+apiClient.interceptors.response.use(
+    (response) => response,
+    (error) => {
+        // Preserve the raw axios error but surface backend `{ error }`
+        // envelopes as the primary error message so demo UI can render
+        // something readable.
+        const payload = error?.response?.data
+        if (payload && typeof payload === 'object') {
+            const backendMessage =
+                (typeof payload.error === 'string' && payload.error) ||
+                (typeof payload.message === 'string' && payload.message) ||
+                null
+            if (backendMessage) {
+                error.message = backendMessage
+            }
+        }
+        return Promise.reject(error)
+    }
+)
+
+/**
+ * Build an absolute URL to an API path. Handy for OAuth popup URLs that
+ * must be handed off to `window.open()` rather than fetched via axios
+ * (e.g. Meta provisioning).
+ */
+export function buildApiUrl (path: string, queryParams?: Record<string, string | number | boolean | undefined>): string {
+    const cleanPath = path.startsWith('/') ? path : `/${path}`
+    const url = new URL(`${API_BASE_URL}${cleanPath}`)
+    if (queryParams) {
+        Object.entries(queryParams).forEach(([ key, value ]) => {
+            if (value === undefined || value === null) return
+            url.searchParams.set(key, String(value))
+        })
+    }
+    return url.toString()
+}
+
+/**
+ * Small helper for endpoint modules to standardize their call sites.
+ * Returns `response.data` unwrapped and typed.
+ */
+export async function apiGet<T> (url: string, config?: AxiosRequestConfig): Promise<T> {
+    const { data } = await apiClient.get<T>(url, config)
+    return data
+}
+
+export async function apiPost<T> (url: string, body?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const { data } = await apiClient.post<T>(url, body, config)
+    return data
+}
+
+export async function apiDelete<T> (url: string, config?: AxiosRequestConfig): Promise<T> {
+    const { data } = await apiClient.delete<T>(url, config)
+    return data
+}
diff --git a/msrp_demo/src/api/conversations.ts b/msrp_demo/src/api/conversations.ts
new file mode 100644
index 0000000..32cc477
--- /dev/null
+++ b/msrp_demo/src/api/conversations.ts
@@ -0,0 +1,107 @@
+import { apiClient, apiGet, buildApiUrl } from './client'
+import type {
+    ConversationListParams,
+    ConversationListResponse,
+    ConversationSearchResponse,
+    ExportFormat,
+    MembersResponse,
+    MessagesListParams,
+    MessagesListResponse,
+    MessagesSearchResponse
+} from './types'
+
+function encodeId (id: string | number): string {
+    return encodeURIComponent(String(id))
+}
+
+// ---------- Conversation list ----------
+
+export function listConversations (
+    params?: ConversationListParams
+): Promise<ConversationListResponse> {
+    return apiGet<ConversationListResponse>('/conversations', { params })
+}
+
+// ---------- Messages (paginated) ----------
+
+export function listMessages (
+    conversationId: string | number,
+    params?: MessagesListParams
+): Promise<MessagesListResponse> {
+    return apiGet<MessagesListResponse>(
+        `/conversations/${encodeId(conversationId)}/messages`,
+        { params }
+    )
+}
+
+// ---------- Search within a conversation ----------
+
+export function searchMessagesInConversation (
+    conversationId: string | number,
+    query: string,
+    params?: { limit?: number, cursor?: string }
+): Promise<MessagesSearchResponse> {
+    return apiGet<MessagesSearchResponse>(
+        `/conversations/${encodeId(conversationId)}/messages/search`,
+        { params: { q: query, ...(params ?? {}) } }
+    )
+}
+
+// ---------- Members / participants ----------
+
+export function listConversationMembers (
+    conversationId: string | number
+): Promise<MembersResponse> {
+    return apiGet<MembersResponse>(
+        `/conversations/${encodeId(conversationId)}/members`
+    )
+}
+
+// ---------- Export / download transcript ----------
+
+/**
+ * Fetch the raw export payload. Returns a Blob so the caller can
+ * hand it straight to `URL.createObjectURL()` and trigger a
+ * download-as-file link.
+ */
+export async function exportConversation (
+    conversationId: string | number,
+    format: ExportFormat = 'txt'
+): Promise<Blob> {
+    const { data } = await apiClient.get<Blob>(
+        `/conversations/${encodeId(conversationId)}/export`,
+        {
+            params: { format },
+            responseType: 'blob'
+        }
+    )
+    return data
+}
+
+/**
+ * Direct download URL for the transcript. Useful when the caller wants
+ * to hand the browser an <a href download> rather than fetch the blob
+ * itself (note: the browser will need the JWT — usually attached via
+ * cookie or a signed URL; this helper simply builds the URL string).
+ */
+export function getConversationExportUrl (
+    conversationId: string | number,
+    format: ExportFormat = 'txt'
+): string {
+    return buildApiUrl(
+        `/conversations/${encodeId(conversationId)}/export`,
+        { format }
+    )
+}
+
+// ---------- Global full-text search ----------
+
+export function searchConversations (
+    query: string,
+    params?: { limit?: number, cursor?: string }
+): Promise<ConversationSearchResponse> {
+    return apiGet<ConversationSearchResponse>(
+        '/conversations/search',
+        { params: { q: query, ...(params ?? {}) } }
+    )
+}
diff --git a/msrp_demo/src/api/index.ts b/msrp_demo/src/api/index.ts
new file mode 100644
index 0000000..98269c9
--- /dev/null
+++ b/msrp_demo/src/api/index.ts
@@ -0,0 +1,16 @@
+export {
+    API_BASE_URL,
+    API_ORIGIN,
+    apiClient,
+    apiDelete,
+    apiGet,
+    apiPost,
+    buildApiUrl,
+    getApiToken,
+    hasApiToken,
+    setApiToken
+} from './client'
+
+export * from './channels'
+export * from './conversations'
+export * from './types'
diff --git a/msrp_demo/src/api/types.ts b/msrp_demo/src/api/types.ts
new file mode 100644
index 0000000..9310102
--- /dev/null
+++ b/msrp_demo/src/api/types.ts
@@ -0,0 +1,199 @@
+// Shared response DTOs. The backend has not published a formal schema
+// for these endpoints yet, so shapes below capture the fields we expect
+// based on route names + provisioning flow descriptions. Unknown extra
+// fields are preserved via the `[key: string]: unknown` index signature
+// so consumers can display them without type friction.
+
+export type ProvisioningType = 'oauth_popup' | 'qr_polling' | 'did_select' | string
+
+export interface Provider {
+    id: string | number
+    type: string
+    name?: string
+    display_name?: string
+    enabled?: boolean
+    provisioning_type?: ProvisioningType
+    icon_url?: string
+    [key: string]: unknown
+}
+
+export interface Channel {
+    id: string | number
+    channel_id?: string | number
+    provider_id?: string | number
+    provider_type?: string
+    display_name?: string
+    phone_number?: string
+    status?: string
+    created_at?: string
+    updated_at?: string
+    [key: string]: unknown
+}
+
+// ---------- Provisioning ----------
+
+export interface MetaProvisionPhone {
+    id: string | number
+    phone_number: string
+    display_name?: string
+    verified_name?: string
+    quality_rating?: string
+    [key: string]: unknown
+}
+
+export interface MetaProvisionPhonesResponse {
+    session_id: string
+    phones: MetaProvisionPhone[]
+    [key: string]: unknown
+}
+
+export interface MetaProvisionCompleteBody {
+    phone_id: string | number
+    display_name?: string
+    [key: string]: unknown
+}
+
+export interface GreenApiProvisionStartResponse {
+    session_id: string
+    qr_code?: string
+    qr_code_base64?: string
+    expires_in?: number
+    [key: string]: unknown
+}
+
+export type GreenApiProvisionStatus = 'pending' | 'scanned' | 'authorized' | 'expired' | 'failed' | string
+
+export interface GreenApiProvisionStatusResponse {
+    status: GreenApiProvisionStatus
+    qr_code?: string
+    qr_code_base64?: string
+    phone_number?: string
+    display_name?: string
+    [key: string]: unknown
+}
+
+export interface GreenApiProvisionCompleteBody {
+    display_name?: string
+    [key: string]: unknown
+}
+
+export interface SmsProvisionStartResponse {
+    session_id: string
+    available_dids?: Array<{ did: string, country?: string, price?: string, [key: string]: unknown }>
+    [key: string]: unknown
+}
+
+export interface SmsProvisionCompleteBody {
+    session_id: string
+    did: string
+    display_name?: string
+    [key: string]: unknown
+}
+
+// ---------- Conversations ----------
+
+export interface ConversationSummary {
+    conversation_id: number | string
+    display_name?: string
+    channel_type?: string
+    channel_id?: string | number
+    last_message_preview?: string
+    last_message_at?: string | number
+    unread_count?: number
+    status?: string
+    created_at?: string | number
+    updated_at?: string | number
+    [key: string]: unknown
+}
+
+export interface ConversationListResponse {
+    conversations: ConversationSummary[]
+    next_cursor?: string
+    total?: number
+    [key: string]: unknown
+}
+
+// The message shape mirrors the MSRP `m.conversation.message` payload
+// received over WebSocket. Not narrowing further here — the demo
+// re-uses the same rendering pipeline as MSRP messages.
+export interface MessageDto {
+    event_id: string
+    conversation_id: number | string
+    sender: string
+    origin_server_ts?: number
+    type?: string
+    content?: {
+        message_type?: string
+        content?: string
+        in_reply_to?: { event_id: string, [key: string]: unknown }
+        attachments?: unknown[]
+        reactions_summary?: unknown[]
+        is_deleted?: boolean
+        edited_at?: number
+        status?: string
+        [key: string]: unknown
+    }
+    unsigned?: Record<string, unknown>
+    [key: string]: unknown
+}
+
+export interface MessagesListResponse {
+    messages: MessageDto[]
+    next_cursor?: string
+    total?: number
+    [key: string]: unknown
+}
+
+export interface MessagesSearchResponse {
+    results: MessageDto[]
+    total?: number
+    [key: string]: unknown
+}
+
+export interface Member {
+    uri: string
+    display_name?: string
+    role?: string
+    membership?: string
+    last_seen_at?: string | number
+    [key: string]: unknown
+}
+
+export interface MembersResponse {
+    members: Member[]
+    [key: string]: unknown
+}
+
+export interface ConversationSearchHit {
+    conversation_id: number | string
+    match?: MessageDto
+    snippet?: string
+    [key: string]: unknown
+}
+
+export interface ConversationSearchResponse {
+    results: ConversationSearchHit[]
+    total?: number
+    [key: string]: unknown
+}
+
+// ---------- Common query params ----------
+
+export interface PaginationParams {
+    limit?: number
+    cursor?: string
+    before?: string | number
+    after?: string | number
+}
+
+export interface ConversationListParams extends PaginationParams {
+    status?: string
+    channel_type?: string
+    unread_only?: boolean
+}
+
+export interface MessagesListParams extends PaginationParams {
+    include_deleted?: boolean
+}
+
+export type ExportFormat = 'txt' | 'json'
diff --git a/msrp_demo/src/components/EmojiPicker.helpers.ts b/msrp_demo/src/components/EmojiPicker.helpers.ts
new file mode 100644
index 0000000..d048a16
--- /dev/null
+++ b/msrp_demo/src/components/EmojiPicker.helpers.ts
@@ -0,0 +1,110 @@
+// Loads and normalizes emojibase-data on demand. Kept out of the SFC so
+// the (heavy) JSON import is a separate chunk that Vite can lazy-load
+// the first time the picker opens.
+
+export interface EmojiCompactEntry {
+    hexcode: string
+    label: string
+    unicode: string
+    order?: number
+    /**
+     * Group index (0-9), mapped via meta/groups.json:
+     * 0=smileys-emotion, 1=people-body, 2=component (skin/hair),
+     * 3=animals-nature, 4=food-drink, 5=travel-places, 6=activities,
+     * 7=objects, 8=symbols, 9=flags.
+     * Entries WITHOUT a group are pure skin-tone / hair-style
+     * components and are filtered out.
+     */
+    group?: number
+    tags?: string[]
+    emoticon?: string | string[]
+    skins?: EmojiCompactEntry[]
+}
+
+export interface EmojiGroup {
+    id: number
+    key: string
+    label: string
+    /** Emoji shown on the group tab (usually the first entry in the group). */
+    representative: string
+    emojis: EmojiCompactEntry[]
+}
+
+export interface EmojiDataset {
+    all: EmojiCompactEntry[]
+    groups: EmojiGroup[]
+}
+
+const SKIP_GROUPS = new Set<number>([ 2 ]) // component (skin-tone / hair-style) — not useful as reactions
+
+let cachedDataset: EmojiDataset | null = null
+let inflight: Promise<EmojiDataset> | null = null
+
+export function loadEmojiDataset (): Promise<EmojiDataset> {
+    if (cachedDataset) return Promise.resolve(cachedDataset)
+    if (inflight) return inflight
+
+    inflight = Promise.all([
+        import('emojibase-data/en/compact.json') as Promise<{ default: EmojiCompactEntry[] }>,
+        import('emojibase-data/meta/groups.json') as Promise<{ default: { groups: Record<string, string> } }>,
+        import('emojibase-data/en/messages.json') as Promise<{ default: { groups: Array<{ key: string, message: string, order: number }> } }>
+    ]).then(([ compactMod, groupsMod, messagesMod ]) => {
+        const compact = compactMod.default
+        const groupIdToKey = groupsMod.default.groups
+        const groupKeyToLabel: Record<string, string> = {}
+        messagesMod.default.groups.forEach((g) => {
+            groupKeyToLabel[g.key] = g.message
+        })
+
+        const all = compact.filter((e) => e.group !== undefined && !SKIP_GROUPS.has(e.group))
+
+        const byGroup = new Map<number, EmojiCompactEntry[]>()
+        all.forEach((e) => {
+            const gid = e.group as number
+            if (!byGroup.has(gid)) byGroup.set(gid, [])
+            byGroup.get(gid)!.push(e)
+        })
+
+        const groups: EmojiGroup[] = []
+        Object.entries(groupIdToKey).forEach(([ idStr, key ]) => {
+            const id = Number(idStr)
+            if (SKIP_GROUPS.has(id)) return
+            const emojis = (byGroup.get(id) ?? []).sort(
+                (a, b) => (a.order ?? 0) - (b.order ?? 0)
+            )
+            if (emojis.length === 0) return
+            groups.push({
+                id,
+                key,
+                label: groupKeyToLabel[key] ?? key,
+                representative: emojis[0].unicode,
+                emojis
+            })
+        })
+
+        cachedDataset = { all, groups }
+        return cachedDataset
+    }).finally(() => {
+        inflight = null
+    })
+
+    return inflight
+}
+
+/** Fuzzy-ish search over label + tags. Case-insensitive, whitespace-tolerant. */
+export function searchEmojis (dataset: EmojiDataset, query: string, limit = 200): EmojiCompactEntry[] {
+    const trimmed = query.trim().toLowerCase()
+    if (!trimmed) return []
+    const terms = trimmed.split(/\s+/).filter(Boolean)
+    if (terms.length === 0) return []
+
+    const results: EmojiCompactEntry[] = []
+    for (const emoji of dataset.all) {
+        const haystack = [ emoji.label, ...(emoji.tags ?? []) ].join(' ').toLowerCase()
+        if (terms.every((term) => haystack.includes(term))) {
+            results.push(emoji)
+            if (results.length >= limit) break
+        }
+    }
+    return results
+}
diff --git a/msrp_demo/src/components/EmojiPicker.vue b/msrp_demo/src/components/EmojiPicker.vue
new file mode 100644
index 0000000..8f0e204
--- /dev/null
+++ b/msrp_demo/src/components/EmojiPicker.vue
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+    loadEmojiDataset,
+    searchEmojis,
+    type EmojiCompactEntry,
+    type EmojiDataset,
+    type EmojiGroup
+} from './EmojiPicker.helpers'
+
+interface Props {
+    /** Whether the picker is visible. Parent controls open/close. */
+    open: boolean
+    /** Optional CSS-pixel offsets from the top-left of the parent overlay slot. */
+    x?: number
+    y?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    x: 0,
+    y: 0
+})
+
+const emit = defineEmits<{
+    (e: 'select', emoji: string): void
+    (e: 'close'): void
+}>()
+
+const dataset = ref<EmojiDataset | null>(null)
+const isLoading = ref<boolean>(false)
+const loadError = ref<string>('')
+
+const activeGroupId = ref<number | null>(null)
+const query = ref<string>('')
+
+const searchInputRef = ref<HTMLInputElement | null>(null)
+const rootRef = ref<HTMLDivElement | null>(null)
+
+const currentGroup = computed<EmojiGroup | null>(() => {
+    if (!dataset.value) return null
+    if (activeGroupId.value === null) return dataset.value.groups[0] ?? null
+    return dataset.value.groups.find((g) => g.id === activeGroupId.value) ?? null
+})
+
+const searchResults = computed<EmojiCompactEntry[]>(() => {
+    if (!dataset.value) return []
+    return searchEmojis(dataset.value, query.value)
+})
+
+const visibleEmojis = computed<EmojiCompactEntry[]>(() => {
+    if (query.value.trim()) return searchResults.value
+    return currentGroup.value?.emojis ?? []
+})
+
+function selectGroup (gid: number) {
+    activeGroupId.value = gid
+    query.value = ''
+}
+
+function pick (emoji: EmojiCompactEntry) {
+    emit('select', emoji.unicode)
+}
+
+function handleDocumentClick (e: MouseEvent) {
+    if (!props.open) return
+    const el = rootRef.value
+    if (el && e.target instanceof Node && !el.contains(e.target)) {
+        emit('close')
+    }
+}
+
+function handleKeydown (e: KeyboardEvent) {
+    if (!props.open) return
+    if (e.key === 'Escape') {
+        e.preventDefault()
+        emit('close')
+    }
+}
+
+// First-open lazy load
+watch(() => props.open, async (isOpen) => {
+    if (!isOpen) return
+    query.value = ''
+    if (!dataset.value && !isLoading.value) {
+        isLoading.value = true
+        loadError.value = ''
+        try {
+            dataset.value = await loadEmojiDataset()
+            if (activeGroupId.value === null && dataset.value.groups.length > 0) {
+                activeGroupId.value = dataset.value.groups[0].id
+            }
+        } catch (err) {
+            loadError.value = err instanceof Error ? err.message : String(err)
+        } finally {
+            isLoading.value = false
+        }
+    }
+    await nextTick()
+    searchInputRef.value?.focus()
+}, { immediate: true })
+
+onMounted(() => {
+    document.addEventListener('mousedown', handleDocumentClick, true)
+    document.addEventListener('keydown', handleKeydown)
+})
+
+onBeforeUnmount(() => {
+    document.removeEventListener('mousedown', handleDocumentClick, true)
+    document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+    <div
+        v-if="open"
+        ref="rootRef"
+        class="emoji-picker"
+        :style="{ left: x + 'px', top: y + 'px' }"
+        role="dialog"
+        aria-label="Emoji picker"
+    >
+        <div class="emoji-picker-header">
+            <input
+                ref="searchInputRef"
+                v-model="query"
+                type="text"
+                class="emoji-search"
+                placeholder="Search emoji…"
+                autocomplete="off"
+            />
+        </div>
+
+        <div v-if="isLoading && !dataset" class="emoji-loading">Loading emojis…</div>
+        <div v-else-if="loadError" class="emoji-error">Failed to load emoji dataset: {{ loadError }}</div>
+
+        <template v-else-if="dataset">
+            <div v-if="!query.trim()" class="emoji-tabs">
+                <button
+                    v-for="group in dataset.groups"
+                    :key="group.id"
+                    class="emoji-tab"
+                    :class="{ active: group.id === (activeGroupId ?? dataset.groups[0]?.id) }"
+                    :title="group.label"
+                    @click="selectGroup(group.id)"
+                >
+                    {{ group.representative }}
+                </button>
+            </div>
+
+            <div class="emoji-group-label">
+                <template v-if="query.trim()">
+                    {{ searchResults.length }}
+                    result{{ searchResults.length === 1 ? '' : 's' }} for "{{ query.trim() }}"
+                </template>
+                <template v-else>
+                    {{ currentGroup?.label }}
+                </template>
+            </div>
+
+            <div
+                v-if="visibleEmojis.length"
+                class="emoji-grid"
+                role="listbox"
+            >
+                <button
+                    v-for="emoji in visibleEmojis"
+                    :key="emoji.hexcode"
+                    class="emoji-cell"
+                    :title="emoji.label"
+                    :aria-label="emoji.label"
+                    type="button"
+                    @click="pick(emoji)"
+                >
+                    {{ emoji.unicode }}
+                </button>
+            </div>
+            <div v-else class="emoji-empty">
+                No emoji matches "{{ query.trim() }}".
+            </div>
+        </template>
+    </div>
+</template>
+
+<style scoped>
+.emoji-picker {
+    position: fixed;
+    z-index: 1000;
+    width: 320px;
+    height: 360px;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.6rem;
+    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    font-family: inherit;
+}
+.emoji-picker-header {
+    padding: 0.4rem 0.5rem;
+    border-bottom: 1px solid #f1f5f9;
+}
+.emoji-search {
+    width: 100%;
+    padding: 0.35rem 0.55rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.4rem;
+    font-size: 0.85rem;
+    box-sizing: border-box;
+}
+.emoji-tabs {
+    display: flex;
+    gap: 0.05rem;
+    padding: 0.25rem 0.35rem;
+    border-bottom: 1px solid #f1f5f9;
+    background: #f9fafb;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-shrink: 0;
+}
+.emoji-tab {
+    flex: 0 0 auto;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 0.35rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 1.1rem;
+    line-height: 1.4;
+    text-align: center;
+    cursor: pointer;
+}
+.emoji-tab:hover { background: #eef2ff; }
+.emoji-tab.active {
+    background: #eef2ff;
+    border-color: #6366f1;
+}
+.emoji-group-label {
+    padding: 0.3rem 0.6rem;
+    font-size: 0.7rem;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-bottom: 1px solid #f1f5f9;
+}
+.emoji-grid {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0.35rem;
+    display: grid;
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+    gap: 0.15rem;
+    align-content: start;
+    box-sizing: border-box;
+}
+.emoji-cell {
+    box-sizing: border-box;
+    min-width: 0;
+    background: transparent;
+    border: 1px solid transparent;
+    padding: 0.3rem 0;
+    font-size: 1.35rem;
+    line-height: 1.4;
+    cursor: pointer;
+    border-radius: 0.3rem;
+    text-align: center;
+}
+.emoji-cell:hover {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+}
+.emoji-loading,
+.emoji-error,
+.emoji-empty {
+    padding: 1rem;
+    text-align: center;
+    color: #6b7280;
+    font-size: 0.85rem;
+}
+.emoji-error { color: #b91c1c; }
+
+/* ---------- thin, subtle scrollbars ---------- */
+.emoji-grid,
+.emoji-tabs {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 transparent;
+}
+.emoji-grid::-webkit-scrollbar,
+.emoji-tabs::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+.emoji-grid::-webkit-scrollbar-track,
+.emoji-tabs::-webkit-scrollbar-track {
+    background: transparent;
+}
+.emoji-grid::-webkit-scrollbar-thumb,
+.emoji-tabs::-webkit-scrollbar-thumb {
+    background-color: #cbd5e1;
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+.emoji-grid::-webkit-scrollbar-thumb:hover,
+.emoji-tabs::-webkit-scrollbar-thumb:hover {
+    background-color: #94a3b8;
+}
+</style>
diff --git a/msrp_demo/src/composables/index.ts b/msrp_demo/src/composables/index.ts
new file mode 100644
index 0000000..9d66a49
--- /dev/null
+++ b/msrp_demo/src/composables/index.ts
@@ -0,0 +1,702 @@
+import { computed, ref, watch } from 'vue'
+
+import OpenSIPSJS from '../../../src/index'
+import type {
+    CustomLoggerType,
+    IOpenSIPSConfiguration,
+    IOpenSIPSJSOptions
+} from '../../../src/types/rtc'
+import type { IMessage } from '../../../src/types/msrp'
+import type {
+    MSRPConversationRef,
+    MSRPConversationState,
+    MSRPMemberRole,
+    MSRPReactionAction,
+    MSRPSendMessageOptions,
+    MSRPUploadResult
+} from '../../../src/modules/msrp'
+import { MSRP_EVT } from '../../../src/modules/msrp'
+
+import type {
+    ConnectOptions,
+    MSRPPresenceState,
+    MSRPTypingState,
+    PnExtraHeaders,
+    UnreadCounts,
+    VsipAPI
+} from '../types'
+
+let openSIPSJS: OpenSIPSJS | undefined = undefined
+let currentUserUri = ''
+
+const isInitialized = ref<boolean>(false)
+const isOpenSIPSReady = ref<boolean>(false)
+const isOpenSIPSReconnecting = ref<boolean>(false)
+
+const currentMsrpSession = ref<IMessage | null>(null)
+const isMSRPInitializing = ref<boolean>(false)
+
+const conversations = ref<{ [conversationId: string]: MSRPConversationState }>({})
+const messagesByConversation = ref<{ [conversationId: string]: any[] }>({})
+const typingByConversation = ref<{ [conversationId: string]: MSRPTypingState }>({})
+const presenceBySender = ref<{ [sender: string]: MSRPPresenceState }>({})
+
+const currentConversationId = ref<string | null>(null)
+
+const hasActiveMsrpSession = computed(() => currentMsrpSession.value !== null)
+
+function onlyRealMessages (list: any[] | undefined) {
+    if (!list?.length) return [] as any[]
+    return list.filter((e: any) => e?.type === MSRP_EVT.MESSAGE)
+}
+
+function findLastIndexByEventId (list: any[], eventId: string): number {
+    for (let i = list.length - 1; i >= 0; i--) {
+        if (list[i]?.event_id === eventId) return i
+    }
+    return -1
+}
+
+function mergeMessagesByEventId (existing: any[], incoming: any[]): any[] {
+    const byId = new Map<string, any>()
+    const orphans: any[] = []
+    const consume = (msg: any) => {
+        const id = msg?.event_id
+        if (typeof id === 'string' && id) {
+            byId.set(id, msg)
+        } else {
+            orphans.push(msg)
+        }
+    }
+    for (const msg of existing) consume(msg)
+    for (const msg of incoming) consume(msg)
+    return [ ...byId.values(), ...orphans ].sort(
+        (a, b) => (a?.origin_server_ts || 0) - (b?.origin_server_ts || 0)
+    )
+}
+
+function computeUnreadCount (
+    messages: any[] | undefined,
+    lastReadMessageId: string | null | undefined
+): number {
+    const real = onlyRealMessages(messages)
+    if (!real.length) return 0
+    if (lastReadMessageId === null) return real.length
+    if (lastReadMessageId === undefined) return 0
+    const idx = findLastIndexByEventId(real, lastReadMessageId)
+    if (idx === -1) return real.length
+    return real.length - idx - 1
+}
+
+function computeFirstUnreadEventId (
+    messages: any[] | undefined,
+    lastReadMessageId: string | null | undefined
+): string | null {
+    const real = onlyRealMessages(messages)
+    if (!real.length) return null
+    if (lastReadMessageId === null) return real[0]?.event_id ?? null
+    if (lastReadMessageId === undefined) return null
+    const idx = findLastIndexByEventId(real, lastReadMessageId)
+    if (idx === -1) return real[0]?.event_id ?? null
+    return real[idx + 1]?.event_id ?? null
+}
+
+const unreadByConversation = computed<UnreadCounts>(() => {
+    const result: UnreadCounts = {}
+    for (const [ cid, conv ] of Object.entries(conversations.value)) {
+        const count = computeUnreadCount(
+            messagesByConversation.value[cid],
+            conv?.currentUserLastReadMessageId
+        )
+        if (count > 0) result[cid] = count
+    }
+    return result
+})
+
+const firstUnreadByConversation = computed<Record<string, string>>(() => {
+    const result: Record<string, string> = {}
+    for (const [ cid, conv ] of Object.entries(conversations.value)) {
+        const eventId = computeFirstUnreadEventId(
+            messagesByConversation.value[cid],
+            conv?.currentUserLastReadMessageId
+        )
+        if (eventId) result[cid] = eventId
+    }
+    return result
+})
+
+const currentConversation = computed<MSRPConversationState | null>(() => {
+    const id = currentConversationId.value
+    if (!id) return null
+    return conversations.value[id] ?? null
+})
+
+const currentMessages = computed<any[]>(() => {
+    const id = currentConversationId.value
+    if (!id) return []
+    return messagesByConversation.value[id] ?? []
+})
+
+const sortedConversations = computed<MSRPConversationState[]>(() => {
+    return Object.values(conversations.value).sort(
+        (a, b) => (b.updated_at || 0) - (a.updated_at || 0)
+    )
+})
+
+function findMessage (messages: any[], eventId: string) {
+    return messages.find((msg: any) => msg.event_id === eventId)
+}
+
+function applyReaction (
+    target: any,
+    emoji: string,
+    action: 'add' | 'remove',
+    sender: string,
+    viewerUri: string
+): void {
+    if (!target?.content) return
+    if (!Array.isArray(target.content.reactions_summary)) {
+        target.content.reactions_summary = []
+    }
+    const summary = target.content.reactions_summary as any[]
+    const existing = summary.find((r) => (r?.emoji || r?.key) === emoji)
+
+    if (action === 'remove') {
+        if (!existing) return
+        const userIds: string[] = Array.isArray(existing.user_ids) ? existing.user_ids : []
+        if (!userIds.includes(sender)) return
+        existing.user_ids = userIds.filter((u) => u !== sender)
+        existing.count = existing.user_ids.length
+        if (existing.count === 0) {
+            target.content.reactions_summary = summary.filter(
+                (r) => (r?.emoji || r?.key) !== emoji
+            )
+            return
+        }
+        existing.viewer_reacted = existing.user_ids.includes(viewerUri)
+        return
+    }
+
+    if (existing) {
+        const userIds: string[] = Array.isArray(existing.user_ids) ? existing.user_ids : []
+        if (userIds.includes(sender)) return
+        existing.user_ids = [ ...userIds, sender ]
+        existing.count = existing.user_ids.length
+        if (!existing.emoji) existing.emoji = emoji
+        existing.viewer_reacted = existing.user_ids.includes(viewerUri)
+        return
+    }
+
+    summary.push({
+        emoji,
+        count: 1,
+        user_ids: [ sender ],
+        viewer_reacted: sender === viewerUri
+    })
+}
+
+function idKey (id: number | null | undefined): string | null {
+    return id === undefined || id === null ? null : String(id)
+}
+
+const INCOMING_TYPING_EXPIRY_MS = 5000
+const incomingTypingTimers = new Map<string, ReturnType<typeof setTimeout>>()
+
+function typingTimerKey (cid: string, sender: string): string {
+    return `${cid}:${sender}`
+}
+
+function clearTypingIndicator (cid: string, sender: string): void {
+    const key = typingTimerKey(cid, sender)
+    const existing = incomingTypingTimers.get(key)
+    if (existing) {
+        clearTimeout(existing)
+        incomingTypingTimers.delete(key)
+    }
+    const current = typingByConversation.value[cid]
+    if (current?.sender !== sender) return
+    const next = { ...typingByConversation.value }
+    delete next[cid]
+    typingByConversation.value = next
+}
+
+function restartTypingTimeout (cid: string, sender: string): void {
+    const key = typingTimerKey(cid, sender)
+    const existing = incomingTypingTimers.get(key)
+    if (existing) clearTimeout(existing)
+    incomingTypingTimers.set(
+        key,
+        setTimeout(() => clearTypingIndicator(cid, sender), INCOMING_TYPING_EXPIRY_MS)
+    )
+}
+
+function clearAllTypingTimersForConversation (cid: string): void {
+    const prefix = `${cid}:`
+    for (const key of incomingTypingTimers.keys()) {
+        if (key.startsWith(prefix)) {
+            clearTimeout(incomingTypingTimers.get(key)!)
+            incomingTypingTimers.delete(key)
+        }
+    }
+}
+
+function clearAllTypingTimers (): void {
+    incomingTypingTimers.forEach((handle) => clearTimeout(handle))
+    incomingTypingTimers.clear()
+}
+
+function resolveLastEventId (conversationId: string): string | null {
+    const messages = messagesByConversation.value[conversationId]
+    if (!messages?.length) return null
+    const lastMsg = [ ...messages ]
+        .filter((m: any) => m.type === MSRP_EVT.MESSAGE && m.event_id)
+        .sort((a: any, b: any) => (a.origin_server_ts || 0) - (b.origin_server_ts || 0))
+        .pop()
+    return lastMsg?.event_id ?? null
+}
+
+let lastRequestedReadEventIdByConv: Record<string, string> = {}
+
+const autoReadExclusions = new Set<string>()
+
+watch(currentConversationId, (_newId, oldId) => {
+    if (oldId) autoReadExclusions.delete(oldId)
+})
+
+watch(
+    () => {
+        const cid = currentConversationId.value
+        if (!cid) return null
+        if (autoReadExclusions.has(cid)) return null
+        const conv = conversations.value[cid]
+        if (!conv) return null
+        const latestEventId = resolveLastEventId(cid)
+        if (!latestEventId) return null
+        return {
+            cid,
+            pointer: conv.currentUserLastReadMessageId,
+            latestEventId
+        }
+    },
+    (payload) => {
+        if (!openSIPSJS || !payload) return
+        const { cid, pointer, latestEventId } = payload
+        if (pointer === latestEventId) return
+        if (lastRequestedReadEventIdByConv[cid] === latestEventId) return
+        lastRequestedReadEventIdByConv[cid] = latestEventId
+        const ok = openSIPSJS.msrp.sendReadReceipt(cid, latestEventId)
+        if (ok) applyOptimisticPointer(cid, latestEventId)
+    },
+    { immediate: true }
+)
+
+function applyOptimisticPointer (cid: string, pointerValue: string | null): void {
+    const conv = conversations.value[cid]
+    if (!conv) return
+    if (conv.currentUserLastReadMessageId === pointerValue) return
+    conv.currentUserLastReadMessageId = pointerValue
+}
+
+function beginUnreadOverride (cid: string): void {
+    autoReadExclusions.add(cid)
+    delete lastRequestedReadEventIdByConv[cid]
+}
+
+export const vsipAPI: VsipAPI = {
+    state: {
+        isInitialized,
+        isOpenSIPSReady,
+        isOpenSIPSReconnecting,
+        isMSRPInitializing,
+        currentMsrpSession,
+        hasActiveMsrpSession,
+        conversations,
+        messagesByConversation,
+        currentConversationId,
+        currentConversation,
+        currentMessages,
+        sortedConversations,
+        typingByConversation,
+        presenceBySender,
+        unreadByConversation,
+        firstUnreadByConversation
+    },
+    actions: {
+        init (
+            connectOptions: ConnectOptions,
+            pnExtraHeaders?: PnExtraHeaders,
+            opensipsConfiguration: Partial<IOpenSIPSConfiguration> = {},
+            logger?: CustomLoggerType
+        ) {
+            return new Promise<OpenSIPSJS>((resolve, reject) => {
+                try {
+                    const configuration: IOpenSIPSConfiguration = {
+                        ...opensipsConfiguration,
+                        session_timers: false,
+                        uri: `sip:${connectOptions.username}@${connectOptions.domain}`,
+                        password: connectOptions.password
+                    }
+
+                    currentUserUri = `sip:${connectOptions.username}@${connectOptions.domain}`
+
+                    if (connectOptions.authorization_jwt) {
+                        configuration.authorization_jwt = connectOptions.authorization_jwt
+                    }
+
+                    const additionalOptions: Partial<IOpenSIPSJSOptions> = {}
+
+                    if (connectOptions.msrpDomain) {
+                        additionalOptions.msrpDomain = connectOptions.msrpDomain
+                    }
+
+                    if (connectOptions.msrpWs) {
+                        additionalOptions.msrpWs = connectOptions.msrpWs
+                    }
+
+                    openSIPSJS = new OpenSIPSJS({
+                        configuration,
+                        socketInterfaces: [ `wss://${connectOptions.domain}` ],
+                        sipDomain: `${connectOptions.domain}`,
+                        sipOptions: {
+                            session_timers: false,
+                            extraHeaders: [ 'X-Bar: bar' ],
+                            pcConfig: {}
+                        },
+                        modules: connectOptions.modules,
+                        pnExtraHeaders,
+                        ...additionalOptions
+                    }, logger)
+
+                    openSIPSJS
+                        .on('connection', (value: boolean) => {
+                            isInitialized.value = true
+                            isOpenSIPSReady.value = value
+
+                            resolve(openSIPSJS as OpenSIPSJS)
+                        })
+                        .on('reconnecting', (value: boolean) => {
+                            isOpenSIPSReconnecting.value = value
+                        })
+                        .on('changeMsrpSession', (session: IMessage | null) => {
+                            currentMsrpSession.value = session
+                            if (!session) {
+                                clearAllTypingTimers()
+                                typingByConversation.value = {}
+                            }
+                        })
+                        .on('isMSRPInitializingChanged', (value: boolean) => {
+                            isMSRPInitializing.value = value
+                        })
+                        .on('msrpSyncCompleted', (payload) => {
+                            conversations.value = { ...payload.conversations }
+                            const nextMessages = { ...messagesByConversation.value }
+                            const incoming = payload.messagesByConversation ?? {}
+                            for (const [ cid, historicalList ] of Object.entries(incoming)) {
+                                nextMessages[cid] = mergeMessagesByEventId(
+                                    nextMessages[cid] ?? [],
+                                    historicalList as any[]
+                                )
+                            }
+                            messagesByConversation.value = nextMessages
+                        })
+                        .on('msrpConversationCreated', (payload) => {
+                            const cid = idKey(payload.conversation.conversation_id)
+                            if (!cid) return
+                            conversations.value = {
+                                ...conversations.value,
+                                [cid]: payload.conversation
+                            }
+                            if (!messagesByConversation.value[cid]) {
+                                messagesByConversation.value = {
+                                    ...messagesByConversation.value,
+                                    [cid]: []
+                                }
+                            }
+                        })
+                        .on('msrpConversationRemoved', (payload) => {
+                            const cid = idKey(payload.conversation_id)
+                            if (!cid) return
+                            if (cid in conversations.value) {
+                                const next = { ...conversations.value }
+                                delete next[cid]
+                                conversations.value = next
+                            }
+                            if (cid in messagesByConversation.value) {
+                                const nextMsgs = { ...messagesByConversation.value }
+                                delete nextMsgs[cid]
+                                messagesByConversation.value = nextMsgs
+                            }
+                            if (cid in lastRequestedReadEventIdByConv) {
+                                const next = { ...lastRequestedReadEventIdByConv }
+                                delete next[cid]
+                                lastRequestedReadEventIdByConv = next
+                            }
+                            clearAllTypingTimersForConversation(cid)
+                            if (cid in typingByConversation.value) {
+                                const nextTyping = { ...typingByConversation.value }
+                                delete nextTyping[cid]
+                                typingByConversation.value = nextTyping
+                            }
+                        })
+                        .on('msrpConversationUpdated', (payload) => {
+                            const cid = idKey(payload.conversation_id)
+                            if (!cid) return
+                            const c = conversations.value[cid]
+                            if (!c) return
+                            Object.assign(c, payload.patch)
+                        })
+                        .on('msrpMessageAdded', (payload) => {
+                            const cid = idKey(payload.conversation_id)
+                            if (!cid) return
+                            const c = conversations.value[cid]
+                            if (!c) return
+                            if (!messagesByConversation.value[cid]) {
+                                messagesByConversation.value[cid] = []
+                            }
+                            const list = messagesByConversation.value[cid]
+                            const incomingEventId = payload.message?.event_id
+                            if (incomingEventId) {
+                                const existingIdx = list.findIndex(
+                                    (m: any) => m?.event_id === incomingEventId
+                                )
+                                if (existingIdx !== -1) {
+                                    list.splice(existingIdx, 1, {
+                                        ...list[existingIdx],
+                                        ...payload.message,
+                                        content: {
+                                            ...(list[existingIdx]?.content ?? {}),
+                                            ...(payload.message?.content ?? {})
+                                        }
+                                    })
+                                    c.updated_at = payload.message.origin_server_ts || Date.now()
+                                    return
+                                }
+                            }
+                            list.push(payload.message)
+                            c.updated_at = payload.message.origin_server_ts || Date.now()
+                            const senderUri = payload.message?.sender
+                            if (senderUri) clearTypingIndicator(cid, senderUri)
+                        })
+                        .on('msrpReceiptChanged', (payload) => {
+                            const cid = idKey(payload.conversation_id)
+                            if (!cid) return
+                            const messages = messagesByConversation.value[cid]
+                            if (messages) {
+                                const m = findMessage(messages, payload.eventId)
+                                if (m?.content) m.content.status = payload.status
+                            }
+                            const c = conversations.value[cid]
+                            if (c) c.updated_at = payload.updatedAt
+                        })
+                        .on('msrpReactionChanged', (payload) => {
+                            const cid = idKey(payload.conversation_id)
+                            if (!cid) return
+                            const messages = messagesByConversation.value[cid]
+                            if (messages) {
+                                const m = findMessage(messages, payload.eventId)
+                                applyReaction(m, payload.emoji, payload.action, payload.sender, currentUserUri)
+                                if (m?.content) m.content.updated_at = payload.updatedAt
+                            }
+                            const c = conversations.value[cid]
+                            if (c) c.updated_at = payload.updatedAt
+                        })
+                        .on('msrpMessageEdited', (payload) => {
+                            const cid = idKey(payload.conversation_id)
+                            if (!cid) return
+                            const messages = messagesByConversation.value[cid]
+                            if (messages) {
+                                const m = findMessage(messages, payload.eventId)
+                                if (m?.content) {
+                                    const newText = payload.newContent?.content
+                                    if (typeof newText === 'string') m.content.content = newText
+                                    m.content.edited_at = payload.updatedAt
+                                    m.unsigned = m.unsigned || {}
+                                    m.unsigned['m.relations'] = {
+                                        'm.replace': {
+                                            event_id: payload.editEvent?.event_id,
+                                            sender: payload.editEvent?.sender,
+                                            origin_server_ts: payload.updatedAt,
+                                            content: payload.newContent
+                                        }
+                                    }
+                                }
+                            }
+                            const c = conversations.value[cid]
+                            if (c) c.updated_at = payload.updatedAt
+                        })
+                        .on('msrpMessageDeleted', (payload) => {
+                            const cid = idKey(payload.conversation_id)
+                            if (!cid) return
+                            const messages = messagesByConversation.value[cid]
+                            if (messages) {
+                                const m = findMessage(messages, payload.eventId)
+                                if (m?.content) {
+                                    m.content.is_deleted = true
+                                    m.content.deleted_at = payload.updatedAt
+                                    m.content.deleted_by = payload.deletedBy
+                                }
+                            }
+                            const c = conversations.value[cid]
+                            if (c) c.updated_at = payload.updatedAt
+                        })
+                        .on('msrpTyping', (payload: { conversation_id?: number, sender: string, isTyping: boolean }) => {
+                            const cid = idKey(payload.conversation_id)
+                            if (!cid || !payload.sender) return
+                            if (payload.isTyping) {
+                                typingByConversation.value = {
+                                    ...typingByConversation.value,
+                                    [cid]: {
+                                        sender: payload.sender,
+                                        isTyping: true,
+                                        updatedAt: Date.now()
+                                    }
+                                }
+                                restartTypingTimeout(cid, payload.sender)
+                            } else {
+                                clearTypingIndicator(cid, payload.sender)
+                            }
+                        })
+                        .on('msrpPresence', (payload) => {
+                            if (!payload?.sender) return
+                            presenceBySender.value = {
+                                ...presenceBySender.value,
+                                [payload.sender]: {
+                                    presence: payload.presence,
+                                    lastActiveAt: payload.lastActiveAt,
+                                    updatedAt: payload.updatedAt
+                                }
+                            }
+                        })
+                        .begin()
+
+                    resolve(openSIPSJS)
+                } catch (e) {
+                    console.error(e)
+
+                    reject(e)
+                }
+            })
+        },
+        unregister () {
+            openSIPSJS?.unregister()
+        },
+        register () {
+            openSIPSJS?.register()
+        },
+        disconnect () {
+            openSIPSJS?.disconnect()
+        },
+        initMSRP (options: object = {}) {
+            openSIPSJS?.msrp.initMSRP(options)
+        },
+        initMSRPAndSendMessage (target: string, body: string, options: object = {}) {
+            openSIPSJS?.msrp.initMSRPAndSendMessage(target, body, options)
+        },
+        msrpAnswer (callId: string) {
+            openSIPSJS?.msrp.msrpAnswer(callId)
+        },
+        messageTerminate (callId: string) {
+            openSIPSJS?.msrp.messageTerminate(callId)
+        },
+        sendMSRP (msrpSessionId: string, body: string) {
+            openSIPSJS?.msrp.sendMSRP(msrpSessionId, body)
+        },
+        safeSendMSRP (body: string) {
+            return openSIPSJS?.msrp.safeSendMSRP(body) ?? false
+        },
+        sendCreateConversationMessage (targetSip: string | string[]) {
+            return openSIPSJS?.msrp.sendCreateConversationMessage(targetSip) ?? false
+        },
+        sendTextMessage (conversationRef: MSRPConversationRef, text: string, options: MSRPSendMessageOptions = {}) {
+            return openSIPSJS?.msrp.sendTextMessage(conversationRef, text, options) ?? false
+        },
+        sendInternalNote (conversationRef: MSRPConversationRef, text: string, options: Omit<MSRPSendMessageOptions, 'messageType'> = {}) {
+            return openSIPSJS?.msrp.sendInternalNote(conversationRef, text, options) ?? false
+        },
+        editMessage (conversationRef: MSRPConversationRef, targetEventId: string, newText: string) {
+            return openSIPSJS?.msrp.editMessage(conversationRef, targetEventId, newText) ?? false
+        },
+        deleteMessage (conversationRef: MSRPConversationRef, targetEventId: string) {
+            return openSIPSJS?.msrp.deleteMessage(conversationRef, targetEventId) ?? false
+        },
+        forwardMessage (
+            sourceMessage: any,
+            targetConversationRef: MSRPConversationRef,
+            forwardedFromLabel?: string
+        ) {
+            return openSIPSJS?.msrp.forwardMessage(sourceMessage, targetConversationRef, forwardedFromLabel) ?? false
+        },
+        sendMediaMessage (conversationRef: MSRPConversationRef, uploadResult: MSRPUploadResult, caption = '') {
+            return openSIPSJS?.msrp.sendMediaMessage(conversationRef, uploadResult, caption) ?? false
+        },
+        sendReaction (conversationRef: MSRPConversationRef, targetEventId: string, emoji: string, action: MSRPReactionAction = 'add') {
+            return openSIPSJS?.msrp.sendReaction(conversationRef, targetEventId, emoji, action) ?? false
+        },
+        removeReaction (conversationRef: MSRPConversationRef, targetEventId: string, emoji: string) {
+            return openSIPSJS?.msrp.removeReaction(conversationRef, targetEventId, emoji) ?? false
+        },
+        sendTypingIndicator (conversationRef: MSRPConversationRef) {
+            return openSIPSJS?.msrp.sendTypingIndicator(conversationRef) ?? false
+        },
+        startTypingKeepAlive (conversationRef: MSRPConversationRef) {
+            openSIPSJS?.msrp.startTypingKeepAlive(conversationRef)
+        },
+        stopTypingKeepAlive () {
+            openSIPSJS?.msrp.stopTypingKeepAlive()
+        },
+        markConversationAsUnread (conversationRef: MSRPConversationRef) {
+            const cid = idKey(Number(conversationRef))
+            if (cid) beginUnreadOverride(cid)
+            const ok = openSIPSJS?.msrp.markAsUnread(conversationRef, null) ?? false
+            if (ok && cid) applyOptimisticPointer(cid, null)
+            return ok
+        },
+        markAsUnreadFromMessage (
+            conversationRef: MSRPConversationRef,
+            targetEventId: string
+        ) {
+            const cid = idKey(Number(conversationRef))
+            if (!cid || !targetEventId) return false
+            const real = onlyRealMessages(messagesByConversation.value[cid])
+            if (!real.length) return false
+            const idx = findLastIndexByEventId(real, targetEventId)
+            if (idx === -1) return false
+            const prevEventId = idx > 0 ? real[idx - 1].event_id : null
+            beginUnreadOverride(cid)
+            const ok = openSIPSJS?.msrp.markAsUnread(conversationRef, prevEventId) ?? false
+            if (ok) applyOptimisticPointer(cid, prevEventId)
+            return ok
+        },
+        closeConversation (conversationRef: MSRPConversationRef, reason?: string, cause?: string) {
+            return openSIPSJS?.msrp.closeConversation(conversationRef, reason, cause) ?? false
+        },
+        changeMemberRole (conversationRef: MSRPConversationRef, targetUri: string, newRole: MSRPMemberRole) {
+            return openSIPSJS?.msrp.changeMemberRole(conversationRef, targetUri, newRole) ?? false
+        },
+        acceptInvite (conversationRef: MSRPConversationRef) {
+            return openSIPSJS?.msrp.acceptInvite(conversationRef) ?? false
+        },
+        rejectInvite (conversationRef: MSRPConversationRef) {
+            return openSIPSJS?.msrp.rejectInvite(conversationRef) ?? false
+        },
+        leaveConversation (conversationRef: MSRPConversationRef) {
+            return openSIPSJS?.msrp.leaveConversation(conversationRef) ?? false
+        },
+        setActiveConversation (conversationId: string | null) {
+            if (currentConversationId.value === conversationId) return
+            currentConversationId.value = conversationId
+        },
+        requestUploadUrl (conversationRef: MSRPConversationRef, filename: string, mimeType: string, fileSize: number) {
+            if (!openSIPSJS) return Promise.reject(new Error('OpenSIPSJS not initialized'))
+            return openSIPSJS.msrp.requestUploadUrl(conversationRef, filename, mimeType, fileSize)
+        },
+        requestFileAccess (conversationRef: MSRPConversationRef, eventId: string) {
+            if (!openSIPSJS) return Promise.reject(new Error('OpenSIPSJS not initialized'))
+            return openSIPSJS.msrp.requestFileAccess(conversationRef, eventId)
+        },
+        uploadFile (conversationRef: MSRPConversationRef, file: File, caption = '') {
+            if (!openSIPSJS) return Promise.reject(new Error('OpenSIPSJS not initialized'))
+            return openSIPSJS.msrp.uploadFile(conversationRef, file, caption)
+        }
+    }
+}
diff --git a/msrp_demo/src/env.d.ts b/msrp_demo/src/env.d.ts
new file mode 100644
index 0000000..bc40445
--- /dev/null
+++ b/msrp_demo/src/env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<Record<string, never>, Record<string, never>, unknown>
+    export default component
+}
diff --git a/msrp_demo/src/main.ts b/msrp_demo/src/main.ts
new file mode 100644
index 0000000..01433bc
--- /dev/null
+++ b/msrp_demo/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/msrp_demo/src/types/index.ts b/msrp_demo/src/types/index.ts
new file mode 100644
index 0000000..1f25c4b
--- /dev/null
+++ b/msrp_demo/src/types/index.ts
@@ -0,0 +1,149 @@
+import type { ComputedRef, Ref } from 'vue'
+import type {
+    CustomLoggerType,
+    IOpenSIPSConfiguration
+} from '../../../src/types/rtc'
+import type { IMessage } from '../../../src/types/msrp'
+import type {
+    MSRPConversationRef,
+    MSRPConversationState,
+    MSRPMemberRole,
+    MSRPReactionAction,
+    MSRPSendMessageOptions,
+    MSRPUploadResult
+} from '../../../src/modules/msrp'
+
+export type UnreadCounts = Record<string, number>
+import type { MODULES } from '../../../src/enum/modules'
+import type OpenSIPSJS from '../../../src/index'
+
+export type ModuleName = typeof MODULES[keyof typeof MODULES]
+
+export interface ConnectOptions {
+    username: string
+    password: string
+    domain: string
+    authorization_jwt?: string
+    modules: Array<ModuleName>
+    msrpDomain?: string
+    msrpWs?: boolean
+}
+
+export type PnExtraHeaders = Record<string, string> | undefined
+
+export interface MSRPTypingState {
+    sender: string
+    isTyping: boolean
+    updatedAt: number
+}
+
+export interface MSRPPresenceState {
+    presence: string | null
+    lastActiveAt: number | null
+    updatedAt: number
+}
+
+export interface VsipAPIState {
+    isInitialized: Ref<boolean>
+    isOpenSIPSReady: Ref<boolean>
+    isOpenSIPSReconnecting: Ref<boolean>
+    isMSRPInitializing: Ref<boolean>
+    currentMsrpSession: Ref<IMessage | null>
+    hasActiveMsrpSession: ComputedRef<boolean>
+    conversations: Ref<{ [conversationId: string]: MSRPConversationState }>
+    messagesByConversation: Ref<{ [conversationId: string]: any[] }>
+    currentConversationId: Ref<string | null>
+    currentConversation: ComputedRef<MSRPConversationState | null>
+    currentMessages: ComputedRef<any[]>
+    sortedConversations: ComputedRef<MSRPConversationState[]>
+    typingByConversation: Ref<{ [conversationId: string]: MSRPTypingState }>
+    presenceBySender: Ref<{ [sender: string]: MSRPPresenceState }>
+    /**
+     * Per-conversation unread count, derived from
+     * `MSRPConversationState.currentUserLastReadMessageId` + local timeline.
+     * Only conversations with count > 0 appear in the map.
+     */
+    unreadByConversation: ComputedRef<UnreadCounts>
+    /**
+     * event_id of the first unread message per conversation. Consumers use
+     * this to place a "— New messages —" divider inside the open chat.
+     */
+    firstUnreadByConversation: ComputedRef<Record<string, string>>
+}
+
+export interface VsipAPIActions {
+    init (
+        connectOptions: ConnectOptions,
+        pnExtraHeaders?: PnExtraHeaders,
+        opensipsConfiguration?: Partial<IOpenSIPSConfiguration>,
+        logger?: CustomLoggerType
+    ): Promise<OpenSIPSJS>
+    register (): void
+    unregister (): void
+    disconnect (): void
+    initMSRP (options?: object): void
+    initMSRPAndSendMessage (target: string, body: string, options?: object): void
+    msrpAnswer (callId: string): void
+    messageTerminate (callId: string): void
+    sendMSRP (msrpSessionId: string, body: string): void
+    safeSendMSRP (body: string): boolean
+    sendCreateConversationMessage (targetSip: string | string[]): boolean
+    sendTextMessage (conversationRef: MSRPConversationRef, text: string, options?: MSRPSendMessageOptions): boolean
+    sendInternalNote (
+        conversationRef: MSRPConversationRef,
+        text: string,
+        options?: Omit<MSRPSendMessageOptions, 'messageType'>
+    ): boolean
+    editMessage (conversationRef: MSRPConversationRef, targetEventId: string, newText: string): boolean
+    deleteMessage (conversationRef: MSRPConversationRef, targetEventId: string): boolean
+    forwardMessage (
+        sourceMessage: any,
+        targetConversationRef: MSRPConversationRef,
+        forwardedFromLabel?: string
+    ): boolean
+    sendMediaMessage (
+        conversationRef: MSRPConversationRef,
+        uploadResult: MSRPUploadResult,
+        caption?: string
+    ): boolean
+    sendReaction (
+        conversationRef: MSRPConversationRef,
+        targetEventId: string,
+        emoji: string,
+        action?: MSRPReactionAction
+    ): boolean
+    removeReaction (conversationRef: MSRPConversationRef, targetEventId: string, emoji: string): boolean
+    sendTypingIndicator (conversationRef: MSRPConversationRef): boolean
+    startTypingKeepAlive (conversationRef: MSRPConversationRef): void
+    stopTypingKeepAlive (): void
+    /**
+     * Mark the whole conversation as unread (server-side pointer → null).
+     */
+    markConversationAsUnread (conversationRef: MSRPConversationRef): boolean
+    /**
+     * Mark the given message and every later message as unread. The pointer
+     * is moved to the message immediately preceding `targetEventId` in the
+     * local timeline; if the target is the very first message the pointer
+     * becomes null (whole conversation unread).
+     */
+    markAsUnreadFromMessage (conversationRef: MSRPConversationRef, targetEventId: string): boolean
+    closeConversation (conversationRef: MSRPConversationRef, reason?: string, cause?: string): boolean
+    changeMemberRole (conversationRef: MSRPConversationRef, targetUri: string, newRole: MSRPMemberRole): boolean
+    acceptInvite (conversationRef: MSRPConversationRef): boolean
+    rejectInvite (conversationRef: MSRPConversationRef): boolean
+    leaveConversation (conversationRef: MSRPConversationRef): boolean
+    setActiveConversation (conversationId: string | null): void
+    requestUploadUrl (
+        conversationRef: MSRPConversationRef,
+        filename: string,
+        mimeType: string,
+        fileSize: number
+    ): Promise<MSRPUploadResult>
+    requestFileAccess (conversationRef: MSRPConversationRef, eventId: string): Promise<string>
+    uploadFile (conversationRef: MSRPConversationRef, file: File, caption?: string): Promise<MSRPUploadResult>
+}
+
+export interface VsipAPI {
+    state: VsipAPIState
+    actions: VsipAPIActions
+}
diff --git a/msrp_demo/tsconfig.json b/msrp_demo/tsconfig.json
new file mode 100644
index 0000000..1f7618a
--- /dev/null
+++ b/msrp_demo/tsconfig.json
@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "lib": [ "ES2020", "DOM", "DOM.Iterable" ],
+        "jsx": "preserve",
+        "strict": false,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "useDefineForClassFields": true,
+        "allowSyntheticDefaultImports": true,
+        "types": [ "vite/client" ],
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [ "../src/*" ]
+        },
+        "noEmit": true
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.d.ts",
+        "src/**/*.vue"
+    ],
+    "references": [ { "path": "./tsconfig.node.json" } ]
+}
diff --git a/msrp_demo/tsconfig.node.json b/msrp_demo/tsconfig.node.json
new file mode 100644
index 0000000..e2d6db9
--- /dev/null
+++ b/msrp_demo/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "skipLibCheck": true
+    },
+    "include": [ "vite.config.ts" ]
+}
diff --git a/msrp_demo/vite.config.ts b/msrp_demo/vite.config.ts
new file mode 100644
index 0000000..f9ba070
--- /dev/null
+++ b/msrp_demo/vite.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+const rootDir = resolve(__dirname, '..')
+const rootSrc = resolve(rootDir, 'src')
+
+export default defineConfig({
+    plugins: [ vue() ],
+    resolve: {
+        alias: {
+            '@': rootSrc
+        },
+        dedupe: [ 'vue' ]
+    },
+    server: {
+        port: 5174,
+        host: true,
+        fs: {
+            allow: [ rootDir ]
+        }
+    },
+    optimizeDeps: {
+        include: [ 'jssip', 'sdp-transform', 'loglevel', 'p-iteration', 'uuid', 'generate-unique-id' ]
+    }
+})
diff --git a/msrp_demo/yarn.lock b/msrp_demo/yarn.lock
new file mode 100644
index 0000000..e0f461c
--- /dev/null
+++ b/msrp_demo/yarn.lock
@@ -0,0 +1,557 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/helper-string-parser@^7.29.7":
+  version "7.29.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz#7f0871d99824d23137d60f86fcf6130fd5a1b51f"
+  integrity sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==
+
+"@babel/helper-validator-identifier@^7.29.7":
+  version "7.29.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz#bd87084ced0c796ec46bda492de6e83d29e89fc2"
+  integrity sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==
+
+"@babel/parser@^7.16.4":
+  version "7.29.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.29.7.tgz#837b87387cbf5ec5530cb634b3c622f68edb9334"
+  integrity sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==
+  dependencies:
+    "@babel/types" "^7.29.7"
+
+"@babel/types@^7.29.7":
+  version "7.29.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.29.7.tgz#8005e31d82712ee7adaef6e23c63b71a62770a92"
+  integrity sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.29.7"
+    "@babel/helper-validator-identifier" "^7.29.7"
+
+"@esbuild/android-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
+  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
+
+"@esbuild/android-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
+  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
+
+"@esbuild/android-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
+  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
+
+"@esbuild/darwin-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
+  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
+
+"@esbuild/darwin-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
+  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
+
+"@esbuild/freebsd-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
+  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
+
+"@esbuild/freebsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
+  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
+
+"@esbuild/linux-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
+  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
+
+"@esbuild/linux-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
+  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
+
+"@esbuild/linux-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
+  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
+
+"@esbuild/linux-loong64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
+  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
+
+"@esbuild/linux-mips64el@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
+  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
+
+"@esbuild/linux-ppc64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
+  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
+
+"@esbuild/linux-riscv64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
+  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
+
+"@esbuild/linux-s390x@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
+  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
+
+"@esbuild/linux-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
+  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
+
+"@esbuild/netbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
+  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
+
+"@esbuild/openbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
+  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
+
+"@esbuild/sunos-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
+  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
+
+"@esbuild/win32-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
+  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
+
+"@esbuild/win32-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
+  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
+
+"@esbuild/win32-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
+  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+
+"@types/node@^18.14.2":
+  version "18.19.130"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.130.tgz#da4c6324793a79defb7a62cba3947ec5add00d59"
+  integrity sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg==
+  dependencies:
+    undici-types "~5.26.4"
+
+"@vitejs/plugin-vue@^4.2.3":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz#057d2ded94c4e71b94e9814f92dcd9306317aa46"
+  integrity sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==
+
+"@vue/compiler-core@3.2.25":
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.25.tgz#3fa88debc97a89a513e1d9b771e0802b9a006734"
+  integrity sha512-FlffKezIqztTCTyG0klkYRwhdyL6b1PTTCIerPb4p2R9qQaczccTX5g9ysi9w6tpLQ48a1WiXnFDJhWD7XoqwA==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.25"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
+"@vue/compiler-dom@3.2.25":
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.25.tgz#b1a3b1ef057aeacea5ee00f7b20dc3edb8bd1ed2"
+  integrity sha512-4JrburkRg4VWbc8AKpzKFWbNY4MDXshqjFl53+vINq7zaw3Z7aSqnLv0EkKh8B8ynf/MYsAdygGutyVbEWYxOw==
+  dependencies:
+    "@vue/compiler-core" "3.2.25"
+    "@vue/shared" "3.2.25"
+
+"@vue/compiler-sfc@3.2.25":
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.25.tgz#6a5ae9e3c8db6a462d0bada53364108c9ba8f379"
+  integrity sha512-PminuOYIcFI7UZn+mdy2OPbogyAb0IHkVuqwmLDJiSRFhc/QAXQnO9KdS4nez3bQ9XlQmoAveQzcZuekHzdb5w==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.25"
+    "@vue/compiler-dom" "3.2.25"
+    "@vue/compiler-ssr" "3.2.25"
+    "@vue/reactivity-transform" "3.2.25"
+    "@vue/shared" "3.2.25"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
+"@vue/compiler-ssr@3.2.25":
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.25.tgz#aa0ceb4dc46326ca839b90b572e0309fae6f367a"
+  integrity sha512-+BAl8U5D3JkGR6086PFx1BQQ5km3z9fT88hy/7lzf8i3vEDdPQodadnX2t6tndFjIux05MEKg43DeocOojT0mw==
+  dependencies:
+    "@vue/compiler-dom" "3.2.25"
+    "@vue/shared" "3.2.25"
+
+"@vue/reactivity-transform@3.2.25":
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.25.tgz#d211fd14bb677345ac9921d9e65976d80d67a742"
+  integrity sha512-fOiW67PUalicMfMr4Sc9l8mUtkN7ZD+G1/zJV8blzQ8GEZSeRcJm11gqve6Ps623ju5YORu7V/Q1gZoOJ9WO4g==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.25"
+    "@vue/shared" "3.2.25"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
+"@vue/reactivity@3.2.25":
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.25.tgz#71c5ea9f3c7b71ee40085328c9198a1dc26da71f"
+  integrity sha512-Dxc/u/dxoneIDqyfmuwPVBR0G3OQJqe3Dtz4z3NGt+CGj4UuOZQfN5raJPmp6xGYgrtC6PAWoCgHhyrgr1qCtg==
+  dependencies:
+    "@vue/shared" "3.2.25"
+
+"@vue/runtime-core@3.2.25":
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.25.tgz#9a2087239d0b1d9dec6532cb801a2a95e1019b73"
+  integrity sha512-2+fo5+lofT4xr8W2rtjyz+AM+UB1U/UNLH6ISFdHWNWuveSWxF+vkCQaATmhp6O3XA7QJAbHoRqIZor20EWSfQ==
+  dependencies:
+    "@vue/reactivity" "3.2.25"
+    "@vue/shared" "3.2.25"
+
+"@vue/runtime-dom@3.2.25":
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.25.tgz#3c0812faa1374ab6d03bd5006ef478f2c414bf74"
+  integrity sha512-3gGeyHnygn4yG6bssRKhQIxnE8vgB8FtYUUwoYoA/Pm0vZ+bGPoZax4TbtZD9eW9rvs8CY8boNp4t/sJaPJrRQ==
+  dependencies:
+    "@vue/runtime-core" "3.2.25"
+    "@vue/shared" "3.2.25"
+    csstype "^2.6.8"
+
+"@vue/server-renderer@3.2.25":
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.25.tgz#c0853ade8fae115b5a44cab7d78d46bd5793befb"
+  integrity sha512-qFRmcyeyyhWbnTPn6cbCZ4bjeuPLSkUpFa98p4LEJtFBFbxjGnrHXHOjYxCY3Lznmxe0kMM3qG4t3GnjcXP12w==
+  dependencies:
+    "@vue/compiler-ssr" "3.2.25"
+    "@vue/shared" "3.2.25"
+
+"@vue/shared@3.2.25":
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.25.tgz#22818aa3638e15c0ff9fc8042d935e4b42ae3c0f"
+  integrity sha512-DkHJFV2gw9WBRmUCa21eyG0WvlF0l1QFOgTkWj29O4mt2Tv3BSE5PQOKhUruZIym4bBYCqx9ZGtoD1WohDprow==
+
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^1.18.1:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.18.1.tgz#d63f9863bcd8938815c86f9e2abd380189d96dfe"
+  integrity sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==
+  dependencies:
+    follow-redirects "^1.16.0"
+    form-data "^4.0.5"
+    https-proxy-agent "^5.0.1"
+    proxy-from-env "^2.1.0"
+
+call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6"
+  integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+csstype@^2.6.8:
+  version "2.6.21"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
+  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
+
+debug@4:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
+  integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
+  dependencies:
+    ms "^2.1.3"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
+emojibase-data@^17.0.0:
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/emojibase-data/-/emojibase-data-17.0.0.tgz#5816fba6395da6b567fbd54b029ca6b5de2d9255"
+  integrity sha512-Yvgb5AWoHViHV/gq1qr5ZAarcBip+B27/ZLRsUJkbgAEaLlZ/fof9g882LTpmEpyhBNEC0m2SEmItljHsTygjA==
+
+es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-object-atoms@^1.0.0, es-object-atoms@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.2.tgz#a2d0b373205724dfa525d23b0c3e1b1ca582c99b"
+  integrity sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+esbuild@^0.18.10:
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
+  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
+  optionalDependencies:
+    "@esbuild/android-arm" "0.18.20"
+    "@esbuild/android-arm64" "0.18.20"
+    "@esbuild/android-x64" "0.18.20"
+    "@esbuild/darwin-arm64" "0.18.20"
+    "@esbuild/darwin-x64" "0.18.20"
+    "@esbuild/freebsd-arm64" "0.18.20"
+    "@esbuild/freebsd-x64" "0.18.20"
+    "@esbuild/linux-arm" "0.18.20"
+    "@esbuild/linux-arm64" "0.18.20"
+    "@esbuild/linux-ia32" "0.18.20"
+    "@esbuild/linux-loong64" "0.18.20"
+    "@esbuild/linux-mips64el" "0.18.20"
+    "@esbuild/linux-ppc64" "0.18.20"
+    "@esbuild/linux-riscv64" "0.18.20"
+    "@esbuild/linux-s390x" "0.18.20"
+    "@esbuild/linux-x64" "0.18.20"
+    "@esbuild/netbsd-x64" "0.18.20"
+    "@esbuild/openbsd-x64" "0.18.20"
+    "@esbuild/sunos-x64" "0.18.20"
+    "@esbuild/win32-arm64" "0.18.20"
+    "@esbuild/win32-ia32" "0.18.20"
+    "@esbuild/win32-x64" "0.18.20"
+
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+follow-redirects@^1.16.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.16.0.tgz#28474a159d3b9d11ef62050a14ed60e4df6d61bc"
+  integrity sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==
+
+form-data@^4.0.5:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.6.tgz#28e864e1b786dbebb68db1f452f9635278665827"
+  integrity sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    es-set-tostringtag "^2.1.0"
+    hasown "^2.0.4"
+    mime-types "^2.1.35"
+
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+get-intrinsic@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz#743f0e3b6964a93a5491ed1bffaae054d7f98d01"
+  integrity sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    function-bind "^1.1.2"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
+get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+has-symbols@^1.0.3, has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+hasown@^2.0.2, hasown@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.4.tgz#8c62d8cb90beb2aad5d0a5b67581ad9854c3f003"
+  integrity sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==
+  dependencies:
+    function-bind "^1.1.2"
+
+https-proxy-agent@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
+magic-string@^0.25.7:
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.35:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+nanoid@^3.3.12:
+  version "3.3.15"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.15.tgz#36c490fad8c6e86c824c940dfdde999b69ed4316"
+  integrity sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==
+
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+postcss@^8.1.10, postcss@^8.4.27:
+  version "8.5.15"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.15.tgz#d1eaf677a324e9ec02196da2d3fecf4a0b9a735c"
+  integrity sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==
+  dependencies:
+    nanoid "^3.3.12"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
+proxy-from-env@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-2.1.0.tgz#a7487568adad577cfaaa7e88c49cab3ab3081aba"
+  integrity sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==
+
+rollup@^3.27.1:
+  version "3.30.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.30.0.tgz#3fa506fee2c5ba9d540a38da87067376cd55966d"
+  integrity sha512-kQvGasUgN+AlWGliFn2POSajRQEsULVYFGTvOZmK06d7vCD+YhZztt70kGk3qaeAXeWYL5eO7zx+rAubBc55eA==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+typescript@^4.9.5:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
+vite@4.4.11:
+  version "4.4.11"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.4.11.tgz#babdb055b08c69cfc4c468072a2e6c9ca62102b0"
+  integrity sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==
+  dependencies:
+    esbuild "^0.18.10"
+    postcss "^8.4.27"
+    rollup "^3.27.1"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+vue@3.2.25:
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.25.tgz#d271214000feeefb4a4ec1f3063f76fc1c701eb4"
+  integrity sha512-jU3t7fyQDHoCWCqhmRrnSmYZvHC35tOJTP704di7HGfq5EcFA1cU/1ZPjUV1eCxJev65Khjyfni+vk9oa+eTtw==
+  dependencies:
+    "@vue/compiler-dom" "3.2.25"
+    "@vue/compiler-sfc" "3.2.25"
+    "@vue/runtime-dom" "3.2.25"
+    "@vue/server-renderer" "3.2.25"
+    "@vue/shared" "3.2.25"
diff --git a/package.json b/package.json
index 93ce60e..a62adb3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opensips-js",
-  "version": "0.1.46",
+  "version": "0.1.50",
   "description": "The JS package for opensips",
   "default": "src/index.ts",
   "jsdelivr": "dist/opensips-js.iife.js",
diff --git a/src/index.ts b/src/index.ts
index d01552d..82f8d2f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1559,3 +1559,49 @@ export {
     BaseProcessStreamPlugin,
     BaseNewStreamPlugin
 }
+
+export type {
+    IMessage,
+    MSRPSessionExtended,
+    TriggerMSRPListenerOptions,
+    ListenerEventType,
+    MSRPMemberRole,
+    MSRPMembership,
+    MSRPMessageStatus,
+    MSRPConversationState,
+    MSRPUploadResult
+} from '@/types/msrp'
+
+export { MSRP_EVT } from '@/modules/msrp'
+
+export type {
+    MSRPConversationRef,
+    MSRPReactionAction,
+    MSRPSendMessageOptions
+} from '@/modules/msrp'
+
+export type {
+    OpenSIPSEventMap,
+    ListenerCallbackFnType,
+    MSRPMessageEventType,
+    ChangeVolumeEventType,
+    ConnectionStateChangeType
+} from '@/types/listeners'
+
+export type {
+    ICall,
+    IRoom,
+    ICallStatus,
+    IOpenSIPSConfiguration,
+    IOpenSIPSJSOptions,
+    NoiseReductionOptions,
+    NoiseReductionOptionsWithoutVadModule,
+    NoiseReductionMode,
+    CustomLoggerType
+} from '@/types/rtc'
+
+// Call-timer payload
+export type { ITimeData } from '@/types/timer'
+
+// WebRTC metrics config (accepted by OpenSIPSJS options)
+export type { WebrtcMetricsConfigType } from '@/types/webrtcmetrics'
diff --git a/src/modules/msrp.ts b/src/modules/msrp.ts
index dc56cf3..480a86b 100644
--- a/src/modules/msrp.ts
+++ b/src/modules/msrp.ts
@@ -1,155 +1,232 @@
 import { simplifyMessageObject } from '@/helpers/audio.helper'
 import { CALL_EVENT_LISTENER_TYPE } from '@/enum/call.event.listener.type'
 import { EndEvent, IncomingAckEvent, OutgoingAckEvent } from 'jssip/lib/RTCSession'
-import { IMessage, MSRPSessionExtended, TriggerMSRPListenerOptions } from '@/types/msrp'
+import {
+    IMessage,
+    MSRPSessionExtended,
+    TriggerMSRPListenerOptions,
+    MSRPMemberRole,
+    MSRPMembership,
+    MSRPMessageStatus,
+    MSRPConversationState,
+    MSRPUploadResult
+} from '@/types/msrp'
 import MSRPMessage from '@/lib/msrp/message'
 import { MSRPSessionEvent } from '@/helpers/UA'
 
-export class MSRPModule {
-    private context: any
+export type {
+    MSRPMemberRole,
+    MSRPMembership,
+    MSRPMessageStatus,
+    MSRPConversationState,
+    MSRPUploadResult
+}
 
-    private activeMessages: { [key: string]: IMessage } = {}
-    private extendedMessages: { [key: string]: IMessage } = {}
-    private msrpHistory: { [key: string]: Array<MSRPMessage> } = {}
+export const MSRP_EVT = {
+    CREATE: 'm.conversation.create',
+    MESSAGE: 'm.conversation.message',
+    MEMBER: 'm.conversation.member',
+    CLOSED: 'm.conversation.closed',
+    REOPEN: 'm.conversation.reopen',
+    DELETE: 'm.conversation.delete',
+    SYNC: 'm.sync',
+    UPLOAD_REQUEST: 'm.upload.request',
+    UPLOAD_RESPONSE: 'm.upload.response',
+    FILE_ACCESS_REQUEST: 'm.file.access.request',
+    FILE_ACCESS_RESPONSE: 'm.file.access.response',
+    REACTION: 'm.reaction',
+    TYPING: 'm.typing',
+    PRESENCE: 'm.presence',
+    SENT: 'm.sent',
+    DELIVERED: 'm.delivered',
+    READ: 'm.read',
+    UNREAD: 'm.unread',
+    FAILED: 'm.failed',
+    SENDING: 'm.sending'
+} as const
 
-    private isMSRPInitializingValue: boolean | undefined
+export const MSRP_RELATION = {
+    RELATES_TO: 'm.relates_to',
+    NEW_CONTENT: 'm.new_content',
+    RELATIONS: 'm.relations',
+    REPLACE: 'm.replace'
+} as const
 
-    constructor (context) {
-        this.context = context
+export const MSRP_MESSAGE_TYPE = {
+    TEXT: 'text',
+    INTERNAL_NOTE: 'internal_note'
+} as const
 
-        this.context.on(
-            this.context.newMSRPSessionEventName,
-            // this.newMSRPSessionCallback.bind(this.context)
-            this.newMSRPSessionCallback.bind(this)
-        )
+export type MSRPReactionAction = 'add' | 'remove'
+
+/**
+ * A conversation is addressed exclusively by its public numeric
+ * `conversation_id`. A stringified id is also accepted for convenience.
+ */
+export type MSRPConversationRef = number | string
+
+/** Optional modifiers for an outgoing text/note message. */
+export interface MSRPSendMessageOptions {
+    /** event_id of the message being replied to — becomes `content.in_reply_to`. */
+    replyToEventId?: string
+    /** Overrides `content.message_type` (defaults to 'text'). */
+    messageType?: string
+    /** Attribution label for a forwarded message — becomes `content.forwarded_from`. */
+    forwardedFrom?: string
+}
+
+export const MSRP_STATE_MEMBER = 'm.conversation.member'
+export const MSRP_STATE_CREATE = 'm.conversation.create'
+export const MSRP_STATE_CLOSED = 'm.conversation.closed'
+
+interface PendingPromise<T> {
+    resolve: (value: T) => void
+    reject: (reason?: any) => void
+}
+
+function generateUuid (): string {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID()
     }
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16) | 0
+        const v = c === 'x' ? r : (r & 0x3) | 0x8
+        return v.toString(16)
+    })
+}
 
-    /*public begin () {
-        if (this.context.isConnected()) {
-            console.error('Connection is already established')
-            return
-        }
+function generateRequestId (prefix = 'req'): string {
+    return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
+}
 
-        this.context.on(
-            this.context.registeredEventName,
-            () => {
-                this.context.logger.log('Successfully registered to', this.context.options.socketInterfaces[0])
-                this.context.setInitialized(true)
-            }
-        )
+function normalizeMessageContent (content: any) {
+    if (!content) return content
+    if (!Array.isArray(content.attachments)) {
+        content.attachments = []
+    }
+    return content
+}
 
-        this.context.on(
-            this.context.unregisteredEventName,
-            () => {
-                this.context.logger.log('Unregistered from', this.context.options.socketInterfaces[0])
-                this.context.setInitialized(false)
-            }
-        )
+function normalizeIncomingEvent (event: any) {
+    if (!event) return event
+    if (event.content) normalizeMessageContent(event.content)
+    return event
+}
 
-        this.context.on(
-            this.context.connectedEventName,
-            () => {
-                this.context.logger.log('Connected to', this.context.options.socketInterfaces[0])
-                this.context.isReconnecting = false
-            }
-        )
+function normalizeStateEvents (stateEvents: any) {
+    return stateEvents ?? {}
+}
 
-        this.context.on(
-            this.context.disconnectedEventName,
-            () => {
-                if (this.context.isReconnecting) {
-                    return
-                }
-                this.context.logger.log('Disconnected from', this.context.options.socketInterfaces[0])
-                this.context.logger.log('Reconnecting to', this.context.options.socketInterfaces[0])
-                this.context.isReconnecting = true
-                this.context.stop()
-                this.context.setInitialized(false)
-                setTimeout(this.context.start.bind(this.context), 5000)
-            }
-        )
+function messageHasContent (content: any): boolean {
+    if (!content) return false
+    normalizeMessageContent(content)
+    return !!(content.content || content.attachments?.length)
+}
+
+function getMessageTypeFromMime (mimeType?: string): string {
+    if (!mimeType) return 'file'
+    if (mimeType.startsWith('image/')) return 'image'
+    if (mimeType.startsWith('video/')) return 'video'
+    if (mimeType.startsWith('audio/')) return 'audio'
+    return 'file'
+}
+
+export class MSRPModule {
+    private context: any
+
+    private msrpSession: IMessage | null = null
+    private extendedSession: IMessage | null = null
+
+    private isMSRPInitializingValue: boolean | undefined
+
+    private conversationsMap: Map<string, MSRPConversationState> = new Map()
+
+    private pendingUploads: Map<string, PendingPromise<MSRPUploadResult>> = new Map()
+    private pendingFileAccessRequests: Map<string, PendingPromise<string>> = new Map()
+    private uploadRequestTimeoutMs = 30000
+    private fileAccessTimeoutMs = 30000
+
+    private typingKeepAliveInterval: ReturnType<typeof setInterval> | null = null
+    private typingKeepAliveConversationId: number | null = null
+    private typingKeepAliveIntervalMs = 2000
+
+    constructor (context: any) {
+        this.context = context
 
         this.context.on(
             this.context.newMSRPSessionEventName,
-            this.newMSRPSessionCallback.bind(this.context)
+            this.newMSRPSessionCallback.bind(this)
         )
-
-        this.context.logger.log('Connecting to', this.context.options.socketInterfaces[0])
-        this.context.start()
-
-        return this.context
-    }*/
+    }
 
     public get isMSRPInitializing () {
         return this.isMSRPInitializingValue
     }
 
-    public get getActiveMessages () {
-        return this.activeMessages
+    public get getMsrpSession () {
+        return this.msrpSession
+    }
+
+    public get hasActiveSession (): boolean {
+        return this.extendedSession !== null
+    }
+
+    public get conversations (): { [key: string]: MSRPConversationState } {
+        const result: { [key: string]: MSRPConversationState } = {}
+        this.conversationsMap.forEach((value, key) => {
+            result[key] = value
+        })
+        return result
     }
 
-    public msrpAnswer (callId: string) {
-        const call = this.extendedMessages[callId]
+    public msrpAnswer (_callId: string) {
+        if (!this.extendedSession) {
+            return
+        }
 
         // TODO: uncomment
-        //call.answer(this.sipOptions)
-        this.updateMSRPSession(call)
+        //this.extendedSession.answer(this.sipOptions)
+        this.updateMSRPSession(this.extendedSession)
     }
 
     public updateMSRPSession (value: IMessage) {
-        this.activeMessages[value._id] = simplifyMessageObject(value) as IMessage
-        this.context.emit('changeActiveMessages', this.activeMessages)
+        this.msrpSession = simplifyMessageObject(value) as IMessage
+        this.context.emit('changeMsrpSession', this.msrpSession)
     }
 
-    private addMMSRPSession (value: IMessage) {
-        this.activeMessages = {
-            ...this.activeMessages,
-            [value._id]: simplifyMessageObject(value) as IMessage
-        }
-
-        this.extendedMessages[value._id] = value
-        this.context.emit('changeActiveMessages', this.activeMessages)
+    private setMSRPSession (value: IMessage) {
+        this.msrpSession = simplifyMessageObject(value) as IMessage
+        this.extendedSession = value
+        this.context.emit('changeMsrpSession', this.msrpSession)
     }
 
     private addMSRPMessage (value: MSRPMessage, session: MSRPSessionExtended) {
-        const sessionMessages = this.msrpHistory[session.id] || []
-        sessionMessages.push(value)
-
-        this.msrpHistory = {
-            ...this.msrpHistory,
-            [session.id]: [ ...sessionMessages ]
-        }
         this.context.emit('newMSRPMessage', {
             message: value,
             session: session
         })
     }
 
-    public messageTerminate (callId: string) {
-        const call = this.extendedMessages[callId]
+    public messageTerminate (_callId: string) {
+        if (!this.extendedSession) {
+            return
+        }
 
-        if (call._status !== 8) {
-            call.terminate()
-            //this.removeMMSRPSession(call._id)
+        if (this.extendedSession._status !== 8) {
+            this.extendedSession.terminate()
         }
     }
 
     private addMessageSession (session: MSRPSessionExtended) {
-        // For cases when session.direction === 'outgoing' and all the
-        // session properties are missing before answer
         if (!session._id) {
             return
         }
 
-        const sessionAlreadyInActiveMessages = this.getActiveMessages[session._id]
-
-        if (sessionAlreadyInActiveMessages !== undefined) {
+        if (this.extendedSession?._id === session._id) {
             return
         }
 
-        const MSRPSession = session as IMessage
-
-        this.addMMSRPSession(MSRPSession)
+        this.setMSRPSession(session as IMessage)
     }
 
     private triggerMSRPListener ({ listenerType, session, event }: TriggerMSRPListenerOptions) {
@@ -159,50 +236,33 @@ export class MSRPModule {
             return
         }
 
-        listeners.forEach((listener) => {
+        listeners.forEach((listener: any) => {
             listener(session, event)
         })
     }
 
-    private removeMMSRPSession (value: string) {
-        const stateActiveMessagesCopy = { ...this.activeMessages }
-        delete stateActiveMessagesCopy[value]
-
-        this.activeMessages = {
-            ...stateActiveMessagesCopy,
-        }
+    private clearMSRPSession () {
+        this.msrpSession = null
+        this.extendedSession = null
 
-        const stateExtendedMessagesCopy = { ...this.extendedMessages }
-        delete stateExtendedMessagesCopy[value]
-        this.extendedMessages = {
-            ...stateExtendedMessagesCopy,
-        }
-
-        this.context.emit('changeActiveMessages', this.activeMessages)
-    }
-
-    private activeMessageListRemove (call: IMessage) {
-        this.removeMMSRPSession(call._id)
+        this.context.emit('changeMsrpSession', this.msrpSession)
     }
 
     private newMSRPSessionCallback (event: MSRPSessionEvent) {
-        if(!event.session._id) event.session._id = event.request.call_id + event.request.from._parameters.tag;
+        if (!event.session._id) {
+            event.session._id = event.request.call_id + event.request.from._parameters.tag
+        }
         const session = event.session as MSRPSessionExtended
 
-        /*if (this.isDND) {
-            session.terminate({ status_code: 486, reason_phrase: 'Do Not Disturb' })
-            return
-        }*/
-
-        // stop timers on ended and failed
         session.on('ended', (event: EndEvent) => {
             this.triggerMSRPListener({
                 listenerType: CALL_EVENT_LISTENER_TYPE.CALL_ENDED,
                 session,
                 event
             })
-            const s = this.getActiveMessages[session.id]
-            this.activeMessageListRemove(s)
+            if (this.extendedSession?._id === session._id) {
+                this.clearMSRPSession()
+            }
         })
 
         session.on('failed', (event: EndEvent) => {
@@ -212,8 +272,9 @@ export class MSRPModule {
                 event
             })
 
-            const s = this.getActiveMessages[session.id]
-            this.activeMessageListRemove(s)
+            if (this.extendedSession?._id === session._id) {
+                this.clearMSRPSession()
+            }
         })
         session.on('confirmed', (event: IncomingAckEvent | OutgoingAckEvent) => {
             this.triggerMSRPListener({
@@ -226,6 +287,7 @@ export class MSRPModule {
 
         session.on('newMessage', (msg: unknown) => {
             this.addMSRPMessage(msg as MSRPMessage, session)
+            this.processIncomingMSRPMessage(msg)
         })
 
         this.addMessageSession(session)
@@ -236,9 +298,30 @@ export class MSRPModule {
         this.context.emit('isMSRPInitializingChanged', value)
     }
 
-    public initMSRP (target: string, body: string, options: any) {
-        //this.checkInitialized()
+    private getUserUri (): string {
+        if (!this.context.configuration?.uri) return ''
+        return typeof this.context.configuration.uri === 'string'
+            ? this.context.configuration.uri
+            : this.context.configuration.uri.toString()
+    }
+
+    public initMSRP (options: any = {}) {
+        const identity = this.extractSipUser(this.getUserUri())
+        if (!identity) {
+            return console.error('Cannot init MSRP: current user SIP identity not available')
+        }
 
+        const session = this.context.startMSRP(identity, options) as MSRPSessionExtended
+        session.on('active', () => {
+            this.addMessageSession(session)
+            session.sendMSRP('')
+            this.setIsMSRPInitializing(false)
+        })
+
+        this.setIsMSRPInitializing(true)
+    }
+
+    public initMSRPAndSendMessage (target: string, body: string, options: any = {}) {
         if (target.length === 0) {
             return console.error('Target must be a valid string')
         }
@@ -253,13 +336,1148 @@ export class MSRPModule {
         this.setIsMSRPInitializing(true)
     }
 
-    public sendMSRP (msrpSessionId: string, body: string) {
-        const msrpSession = this.extendedMessages[msrpSessionId]
-        if (!msrpSession) {
-            throw new Error(`MSRP session with id ${msrpSessionId} doesn't exist!`)
+    public sendMSRP (_msrpSessionId: string, body: string) {
+        if (!this.extendedSession) {
+            throw new Error('No active MSRP session')
         }
 
-        msrpSession.sendMSRP(body)
+        this.extendedSession.sendMSRP(body)
+    }
+
+    /**
+     * Safe wrapper around session.sendMSRP. Returns true when the message was
+     * handed off to the session; false when there is no active session or the
+     * underlying send threw.
+     */
+    public safeSendMSRP (body: string): boolean {
+        if (!this.msrpSession || !this.extendedSession) {
+            console.warn('safeSendMSRP: no active MSRP session - message dropped', body)
+            return false
+        }
+        try {
+            this.extendedSession.sendMSRP(body)
+            return true
+        } catch (err) {
+            console.error('safeSendMSRP error:', err)
+            this.clearMSRPSession()
+            return false
+        }
+    }
+
+    private buildCreateConversationEvent (inviteeSipUris: string[]) {
+        return {
+            type: MSRP_EVT.CREATE,
+            sender: this.getUserUri(),
+            origin_server_ts: Date.now(),
+            content: {
+                creator: this.getUserUri(),
+                invitee: inviteeSipUris
+            }
+        }
+    }
+
+    private buildTextMessageEvent (
+        conversationId: number,
+        text: string,
+        options: MSRPSendMessageOptions = {}
+    ) {
+        const content: Record<string, any> = {
+            message_type: options.messageType || MSRP_MESSAGE_TYPE.TEXT,
+            content: text,
+            txn_id: generateUuid()
+        }
+        if (options.replyToEventId) {
+            content.in_reply_to = { event_id: options.replyToEventId }
+        }
+        if (options.forwardedFrom) {
+            content.forwarded_from = options.forwardedFrom
+        }
+        return {
+            type: MSRP_EVT.MESSAGE,
+            conversation_id: conversationId,
+            sender: this.getUserUri(),
+            origin_server_ts: Date.now(),
+            content
+        }
+    }
+
+    private buildEditMessageEvent (conversationId: number, targetEventId: string, newText: string) {
+        return {
+            type: MSRP_EVT.MESSAGE,
+            conversation_id: conversationId,
+            sender: this.getUserUri(),
+            origin_server_ts: Date.now(),
+            content: {
+                [MSRP_RELATION.RELATES_TO]: {
+                    rel_type: MSRP_RELATION.REPLACE,
+                    event_id: targetEventId
+                },
+                [MSRP_RELATION.NEW_CONTENT]: {
+                    message_type: MSRP_MESSAGE_TYPE.TEXT,
+                    content: newText
+                },
+                message_type: MSRP_MESSAGE_TYPE.TEXT,
+                content: newText,
+                txn_id: generateUuid()
+            }
+        }
+    }
+
+    private buildDeleteMessageEvent (conversationId: number, targetEventId: string) {
+        return {
+            type: MSRP_EVT.DELETE,
+            conversation_id: conversationId,
+            sender: this.getUserUri(),
+            origin_server_ts: Date.now(),
+            content: { target_event_id: targetEventId }
+        }
+    }
+
+    private buildMediaMessageEvent (conversationId: number, uploadResult: MSRPUploadResult, caption = '') {
+        const messageType = uploadResult.media_type || getMessageTypeFromMime(uploadResult.mime_type)
+        const attachment: Record<string, any> = {
+            kind: messageType,
+            mime_type: uploadResult.mime_type,
+            filename: uploadResult.filename
+        }
+        if (uploadResult.preview_url) attachment.preview_url = uploadResult.preview_url
+        if (uploadResult.icon_url) attachment.icon_url = uploadResult.icon_url
+        if (uploadResult.transcription) attachment.transcription = uploadResult.transcription
+
+        return {
+            type: MSRP_EVT.MESSAGE,
+            conversation_id: conversationId,
+            sender: this.getUserUri(),
+            origin_server_ts: Date.now(),
+            content: {
+                message_type: messageType,
+                content: caption || uploadResult.filename || '',
+                attachments: [ attachment ],
+                txn_id: generateUuid()
+            }
+        }
+    }
+
+    private buildMemberEvent (
+        conversationId: number,
+        stateKey: string,
+        membership: MSRPMembership,
+        role?: MSRPMemberRole
+    ) {
+        const evt: Record<string, any> = {
+            type: MSRP_EVT.MEMBER,
+            conversation_id: conversationId,
+            sender: this.getUserUri(),
+            state_key: stateKey,
+            origin_server_ts: Date.now(),
+            content: { membership }
+        }
+        if (role) evt.content.role = role
+        return evt
+    }
+
+    private buildCloseConversationEvent (
+        conversationId: number,
+        reason?: string,
+        cause?: string
+    ) {
+        const now = Date.now()
+        const content: Record<string, any> = {
+            closed_by: this.getUserUri(),
+            closed_at: now
+        }
+        if (reason !== undefined) content.reason = reason
+        if (cause !== undefined) content.cause = cause
+        return {
+            type: MSRP_EVT.CLOSED,
+            conversation_id: conversationId,
+            sender: this.getUserUri(),
+            origin_server_ts: now,
+            content
+        }
+    }
+
+    private buildReactionEvent (
+        conversationId: number,
+        targetEventId: string,
+        emoji: string,
+        action: MSRPReactionAction = 'add'
+    ) {
+        return {
+            type: MSRP_EVT.REACTION,
+            conversation_id: conversationId,
+            sender: this.getUserUri(),
+            origin_server_ts: Date.now(),
+            content: {
+                action,
+                relates_to: { event_id: targetEventId, key: emoji }
+            }
+        }
+    }
+
+    private buildTypingEvent (conversationId: number, isTyping: boolean) {
+        return {
+            type: MSRP_EVT.TYPING,
+            conversation_id: conversationId,
+            sender: this.getUserUri(),
+            origin_server_ts: Date.now(),
+            content: { typing: isTyping }
+        }
+    }
+
+    private buildReadReceiptEvent (conversationId: number, lastEventId: string) {
+        return {
+            type: MSRP_EVT.READ,
+            event_id: lastEventId,
+            conversation_id: conversationId,
+            sender: this.getUserUri(),
+            origin_server_ts: Date.now(),
+            content: { ts: Date.now(), up_to: true }
+        }
+    }
+
+    private buildUnreadEvent (conversationId: number, lastReadEventId: string | null) {
+        const evt: Record<string, any> = {
+            type: MSRP_EVT.UNREAD,
+            conversation_id: conversationId,
+            sender: this.getUserUri(),
+            origin_server_ts: Date.now(),
+            content: {}
+        }
+        if (lastReadEventId) evt.event_id = lastReadEventId
+        return evt
+    }
+
+    public sendCreateConversationMessage (targetSip: string | string[]): boolean {
+        if (!this.extendedSession) {
+            console.warn('No MSRP session available for creating conversation')
+            return false
+        }
+
+        const targets = Array.isArray(targetSip) ? targetSip : [ targetSip ]
+        const sipUris = targets
+            .map((t) => (t ?? '').trim())
+            .filter((t) => t.length > 0)
+            .map((t) => (t.startsWith('sip:') ? t : `sip:${t}@${this.context.sipDomain}`))
+
+        if (sipUris.length === 0) {
+            console.log('Room creation cancelled - invitee required')
+            return false
+        }
+
+        return this.safeSendMSRP(JSON.stringify(this.buildCreateConversationEvent(sipUris)))
+    }
+
+    public sendTextMessage (
+        conversationRef: MSRPConversationRef,
+        text: string,
+        options: MSRPSendMessageOptions = {}
+    ): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        const trimmed = (text ?? '').trim()
+        if (conversationId === null || !trimmed) return false
+        return this.sendEvent(this.buildTextMessageEvent(conversationId, trimmed, options))
+    }
+
+    /**
+     * Send an internal note — a message only visible to operators. The backend
+     * fan-out layer skips WhatsApp/SMS members when
+     * `content.message_type === 'internal_note'`, so it is never delivered to
+     * the customer channel.
+     */
+    public sendInternalNote (
+        conversationRef: MSRPConversationRef,
+        text: string,
+        options: Omit<MSRPSendMessageOptions, 'messageType'> = {}
+    ): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        const trimmed = (text ?? '').trim()
+        if (conversationId === null || !trimmed) return false
+        return this.sendEvent(
+            this.buildTextMessageEvent(conversationId, trimmed, {
+                ...options,
+                messageType: MSRP_MESSAGE_TYPE.INTERNAL_NOTE
+            })
+        )
+    }
+
+    /**
+     * Edit a previously sent message. Only the original author may edit, and
+     * only within the per-channel edit window enforced by the backend.
+     */
+    public editMessage (conversationRef: MSRPConversationRef, targetEventId: string, newText: string): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        const trimmed = (newText ?? '').trim()
+        if (conversationId === null || !targetEventId || !trimmed) return false
+        return this.sendEvent(this.buildEditMessageEvent(conversationId, targetEventId, trimmed))
+    }
+
+    /**
+     * Soft-delete a message ("delete for everyone"). Only the original author
+     * may delete; the backend marks it `is_deleted` and fans out the deletion.
+     */
+    public deleteMessage (conversationRef: MSRPConversationRef, targetEventId: string): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null || !targetEventId) return false
+        return this.sendEvent(this.buildDeleteMessageEvent(conversationId, targetEventId))
+    }
+
+    /**
+     * Forward the text of an existing message into another conversation.
+     * The caller owns `forwardedFromLabel`; when omitted the raw sender URI
+     * of the source message is used. The SDK never invents a display name.
+     */
+    public forwardMessage (
+        sourceMessage: any,
+        targetConversationRef: MSRPConversationRef,
+        forwardedFromLabel?: string
+    ): boolean {
+        const targetConversationId = this.toConversationId(targetConversationRef)
+        if (targetConversationId === null || !sourceMessage?.content) return false
+
+        if (Array.isArray(sourceMessage.content.attachments) && sourceMessage.content.attachments.length > 0) {
+            console.warn('forwardMessage: media forwarding is not supported yet (backend gap)')
+            return false
+        }
+
+        const text = typeof sourceMessage.content.content === 'string'
+            ? sourceMessage.content.content
+            : ''
+        if (!text.trim()) return false
+
+        const label = forwardedFromLabel ?? (sourceMessage.sender ?? '')
+
+        return this.sendTextMessage(targetConversationId, text, {
+            forwardedFrom: label
+        })
+    }
+
+    public sendMediaMessage (
+        conversationRef: MSRPConversationRef,
+        uploadResult: MSRPUploadResult,
+        caption = ''
+    ): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null || !uploadResult) return false
+        return this.sendEvent(this.buildMediaMessageEvent(conversationId, uploadResult, caption))
+    }
+
+    public sendReaction (
+        conversationRef: MSRPConversationRef,
+        targetEventId: string,
+        emoji: string,
+        action: MSRPReactionAction = 'add'
+    ): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null || !targetEventId || !emoji) return false
+        return this.sendEvent(this.buildReactionEvent(conversationId, targetEventId, emoji, action))
+    }
+
+    /** Convenience wrapper to remove a previously added reaction. */
+    public removeReaction (conversationRef: MSRPConversationRef, targetEventId: string, emoji: string): boolean {
+        return this.sendReaction(conversationRef, targetEventId, emoji, 'remove')
+    }
+
+    /**
+     * Emit a single `m.typing` heartbeat. Prefer {@link startTypingKeepAlive}
+     * — the heartbeat protocol requires a stream of `true` events.
+     */
+    public sendTypingIndicator (conversationRef: MSRPConversationRef): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null) return false
+        return this.sendEvent(this.buildTypingEvent(conversationId, true))
+    }
+
+    public startTypingKeepAlive (conversationRef: MSRPConversationRef): void {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null) return
+        this.stopTypingKeepAlive()
+        this.typingKeepAliveConversationId = conversationId
+        this.sendEvent(this.buildTypingEvent(conversationId, true))
+        this.typingKeepAliveInterval = setInterval(() => {
+            if (this.typingKeepAliveConversationId !== null && this.hasActiveSession) {
+                this.sendEvent(this.buildTypingEvent(this.typingKeepAliveConversationId, true))
+            } else {
+                this.stopTypingKeepAlive()
+            }
+        }, this.typingKeepAliveIntervalMs)
+    }
+
+    /**
+     * Stop our own heartbeat stream. Does NOT send a `typing=false` event —
+     * peers clear our indicator via their own silence-timeout, which also
+     * covers crash / network-drop / session-end cases.
+     */
+    public stopTypingKeepAlive (): void {
+        if (this.typingKeepAliveInterval) {
+            clearInterval(this.typingKeepAliveInterval)
+            this.typingKeepAliveInterval = null
+        }
+        this.typingKeepAliveConversationId = null
+    }
+
+    public sendReadReceipt (conversationRef: MSRPConversationRef, lastEventId: string): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null || !lastEventId || !this.hasActiveSession) return false
+        return this.sendEvent(this.buildReadReceiptEvent(conversationId, lastEventId))
+    }
+
+    /**
+     * Set the caller's per-user read pointer.
+     * - `lastReadEventId` = the last event to remain read (everything after
+     *   becomes unread).
+     * - `null` (or omitted) = mark the whole conversation as unread.
+     */
+    public markAsUnread (
+        conversationRef: MSRPConversationRef,
+        lastReadEventId?: string | null
+    ): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null || !this.hasActiveSession) return false
+        return this.sendEvent(this.buildUnreadEvent(conversationId, lastReadEventId ?? null))
+    }
+
+    /**
+     * Close a conversation. Only callers with role 'in_charge' or 'manager'
+     * are allowed by the backend.
+     */
+    public closeConversation (
+        conversationRef: MSRPConversationRef,
+        reason?: string,
+        cause?: string
+    ): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null) return false
+        const conversation = this.conversationsMap.get(String(conversationId))
+        if (!conversation || this.isConversationClosed(conversation)) return false
+
+        const myRole = conversation.currentUserRole || 'assigned'
+        if (myRole !== 'in_charge' && myRole !== 'manager') return false
+
+        return this.sendEvent(this.buildCloseConversationEvent(conversationId, reason, cause))
+    }
+
+    /**
+     * Change another member's role. Only callers with role 'in_charge' or
+     * 'manager' are allowed by the backend.
+     */
+    public changeMemberRole (
+        conversationRef: MSRPConversationRef,
+        targetUri: string,
+        newRole: MSRPMemberRole
+    ): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null) return false
+        const conversation = this.conversationsMap.get(String(conversationId))
+        const myRole = conversation?.currentUserRole || 'assigned'
+        if (myRole !== 'in_charge' && myRole !== 'manager') {
+            console.warn('Not authorized to change roles (role:', myRole, ')')
+            return false
+        }
+        return this.sendEvent(this.buildMemberEvent(conversationId, targetUri, 'join', newRole))
     }
 
+    public acceptInvite (conversationRef: MSRPConversationRef): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null) return false
+        return this.sendEvent(this.buildMemberEvent(conversationId, this.getUserUri(), 'join'))
+    }
+
+    public rejectInvite (conversationRef: MSRPConversationRef): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null) return false
+        const sent = this.sendEvent(this.buildMemberEvent(conversationId, this.getUserUri(), 'leave'))
+        if (sent && this.conversationsMap.delete(String(conversationId))) {
+            this.context.emit('msrpConversationRemoved', { conversation_id: conversationId })
+        }
+        return sent
+    }
+
+    public leaveConversation (conversationRef: MSRPConversationRef): boolean {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null) return false
+        const sent = this.sendEvent(this.buildMemberEvent(conversationId, this.getUserUri(), 'leave'))
+        if (sent && this.conversationsMap.delete(String(conversationId))) {
+            this.context.emit('msrpConversationRemoved', { conversation_id: conversationId })
+        }
+        return sent
+    }
+
+    /**
+     * Ask the server for a presigned upload URL. Resolves with the upload
+     * metadata once the matching `m.upload.response` arrives, or rejects
+     * after `uploadRequestTimeoutMs`.
+     */
+    public requestUploadUrl (
+        conversationRef: MSRPConversationRef,
+        filename: string,
+        mimeType: string,
+        fileSize: number
+    ): Promise<MSRPUploadResult> {
+        return new Promise<MSRPUploadResult>((resolve, reject) => {
+            if (!this.hasActiveSession) {
+                reject(new Error('No MSRP session available'))
+                return
+            }
+
+            const conversationId = this.toConversationId(conversationRef)
+            if (conversationId === null) {
+                reject(new Error('Unknown conversation'))
+                return
+            }
+
+            const requestId = generateRequestId('upload')
+            const uploadRequest = {
+                type: MSRP_EVT.UPLOAD_REQUEST,
+                conversation_id: conversationId,
+                sender: this.getUserUri(),
+                origin_server_ts: Date.now(),
+                content: {
+                    request_id: requestId,
+                    filename,
+                    mime_type: mimeType,
+                    file_size: fileSize
+                }
+            }
+
+            this.pendingUploads.set(requestId, { resolve, reject })
+
+            setTimeout(() => {
+                if (this.pendingUploads.has(requestId)) {
+                    this.pendingUploads.delete(requestId)
+                    reject(new Error('Upload request timeout'))
+                }
+            }, this.uploadRequestTimeoutMs)
+
+            if (!this.sendEvent(uploadRequest)) {
+                this.pendingUploads.delete(requestId)
+                reject(new Error('Failed to send upload request'))
+            }
+        })
+    }
+
+    /**
+     * Ask the server for a one-shot download URL. Resolves with the URL,
+     * rejects on timeout or explicit server error.
+     */
+    public requestFileAccess (conversationRef: MSRPConversationRef, eventId: string): Promise<string> {
+        return new Promise<string>((resolve, reject) => {
+            if (!this.hasActiveSession) {
+                reject(new Error('No MSRP session available'))
+                return
+            }
+
+            const conversationId = this.toConversationId(conversationRef)
+            if (conversationId === null) {
+                reject(new Error('Unknown conversation'))
+                return
+            }
+
+            const requestId = generateRequestId('file-access-req')
+            const accessRequest = {
+                type: MSRP_EVT.FILE_ACCESS_REQUEST,
+                event_id: requestId,
+                conversation_id: conversationId,
+                sender: this.getUserUri(),
+                content: {
+                    request_id: requestId,
+                    event_id: eventId
+                }
+            }
+
+            this.pendingFileAccessRequests.set(requestId, { resolve, reject })
+
+            setTimeout(() => {
+                if (this.pendingFileAccessRequests.has(requestId)) {
+                    this.pendingFileAccessRequests.delete(requestId)
+                    reject(new Error('File access request timed out'))
+                }
+            }, this.fileAccessTimeoutMs)
+
+            if (!this.sendEvent(accessRequest)) {
+                this.pendingFileAccessRequests.delete(requestId)
+                reject(new Error('Failed to send file access request'))
+            }
+        })
+    }
+
+    /**
+     * High-level helper: request a presigned URL, POST the file to it, then
+     * send the resulting media message into the conversation in one go.
+     */
+    public async uploadFile (
+        conversationRef: MSRPConversationRef,
+        file: File,
+        caption = ''
+    ): Promise<MSRPUploadResult> {
+        const conversationId = this.toConversationId(conversationRef)
+        if (conversationId === null) throw new Error('conversation_id is required')
+        if (!file) throw new Error('file is required')
+
+        const uploadMeta = await this.requestUploadUrl(
+            conversationId,
+            file.name,
+            file.type || 'application/octet-stream',
+            file.size
+        )
+
+        const formData = new FormData()
+        formData.append('file', file)
+
+        const response = await fetch(uploadMeta.upload_url, { method: 'POST', body: formData })
+        if (!response.ok) {
+            const err: any = await response.json().catch(() => ({}))
+            throw new Error(err?.error || `Upload failed: HTTP ${response.status}`)
+        }
+
+        const result = (await response.json()) as MSRPUploadResult
+        this.sendMediaMessage(conversationId, result, caption)
+        return result
+    }
+
+    private processIncomingMSRPMessage (msg: any) {
+        if (!msg || msg.direction === 'outgoing') return
+
+        let event: any
+        try {
+            event = JSON.parse(msg.body)
+        } catch (e) {
+            console.warn('Received non-JSON MSRP message', msg.body)
+            return
+        }
+
+        this.handleIncomingEvent(event)
+    }
+
+    private handleIncomingEvent (rawEvent: any) {
+        const event = normalizeIncomingEvent(rawEvent)
+        if (!event || !event.type) return
+
+        switch (event.type) {
+            case MSRP_EVT.SYNC:
+                this.handleIncomingSync(event)
+                break
+            case MSRP_EVT.CREATE:
+                this.handleIncomingConversationCreate(event)
+                break
+            case MSRP_EVT.MESSAGE:
+                this.handleIncomingConversationMessage(event)
+                break
+            case MSRP_EVT.MEMBER:
+                this.handleIncomingConversationMember(event)
+                break
+            case MSRP_EVT.CLOSED:
+                this.handleIncomingConversationClosed(event)
+                break
+            case MSRP_EVT.REOPEN:
+                this.handleIncomingConversationReopen(event)
+                break
+            case MSRP_EVT.DELETE:
+                this.handleIncomingMessageDelete(event)
+                break
+            case MSRP_EVT.REACTION:
+                this.handleIncomingReaction(event)
+                break
+            case MSRP_EVT.TYPING:
+                this.handleIncomingTyping(event)
+                break
+            case MSRP_EVT.PRESENCE:
+                this.handleIncomingPresence(event)
+                break
+            case MSRP_EVT.SENT:
+            case MSRP_EVT.SENDING:
+            case MSRP_EVT.DELIVERED:
+            case MSRP_EVT.READ:
+            case MSRP_EVT.FAILED:
+                this.handleIncomingReceipt(event)
+                break
+            case MSRP_EVT.UPLOAD_RESPONSE:
+                this.handleIncomingUploadResponse(event)
+                break
+            case MSRP_EVT.FILE_ACCESS_RESPONSE:
+                this.handleIncomingFileAccessResponse(event)
+                break
+            default:
+                console.warn('Unhandled MSRP event:', event.type, event)
+        }
+    }
+
+    private handleIncomingSync (event: any) {
+        if (!event.content) return
+        const conversations = event.content.conversations ?? []
+        const currentUserUri = this.getUserUri()
+        const currentUserName = this.extractSipUser(currentUserUri)
+
+        const messagesByConversation: { [key: string]: any[] } = {}
+
+        conversations.forEach((conv: any) => {
+            const key = this.conversationIdOf(conv)
+            if (!key) return
+            const { creator, timeline, created_at, updated_at } = conv
+            const stateEvents = normalizeStateEvents(conv.state_events)
+
+            const members = new Set<string>()
+            const memberRoles = new Map<string, MSRPMemberRole>()
+            let currentUserStatus: MSRPMembership | null = null
+            let currentUserRole: MSRPMemberRole = 'assigned'
+            let currentUserLastReadMessageId: string | null | undefined = undefined
+
+            if (stateEvents[MSRP_STATE_MEMBER]) {
+                Object.entries<any>(stateEvents[MSRP_STATE_MEMBER]).forEach(([ userId, memberEvent ]) => {
+                    const membership = memberEvent.content?.membership as MSRPMembership | undefined
+                    const role = (memberEvent.content?.role || 'assigned') as MSRPMemberRole
+
+                    const userName = this.extractSipUser(userId)
+                    if (userName === currentUserName) {
+                        currentUserStatus = membership ?? null
+                        if (membership === 'join') {
+                            currentUserRole = role
+                        }
+                        const pointer = this.readLastReadEventIdFromMemberContent(memberEvent.content)
+                        if (pointer !== undefined) {
+                            currentUserLastReadMessageId = pointer
+                        }
+                    }
+
+                    if (membership === 'join') {
+                        members.add(userId)
+                        memberRoles.set(userId, role)
+                    }
+                })
+            }
+
+            const historicalMessages = (timeline || [])
+                .filter((e: any) => e.type === MSRP_EVT.MESSAGE)
+                .map((e: any) => normalizeIncomingEvent({ ...e }))
+            if (historicalMessages.length > 0 && conv.conversation_id !== undefined && conv.conversation_id !== null) {
+                messagesByConversation[String(conv.conversation_id)] = historicalMessages
+            }
+
+            this.upsertConversationState(key, {
+                conversation_id: conv.conversation_id,
+                creator: creator ?? null,
+                members,
+                memberRoles,
+                currentUserRole,
+                currentUserStatus,
+                currentUserLastReadMessageId,
+                state_events: stateEvents,
+                created_at: created_at || Date.now(),
+                updated_at: updated_at || Date.now(),
+                status: conv.status
+            })
+        })
+
+        this.context.emit('msrpSyncCompleted', {
+            conversations: this.snapshotConversationsMap(),
+            messagesByConversation
+        })
+    }
+
+    private handleIncomingConversationCreate (event: any) {
+        const conversationId = this.conversationIdOf(event)
+        if (!conversationId) return
+
+        if (this.conversationsMap.has(conversationId)) return
+
+        const userUri = this.getUserUri()
+        this.upsertConversationState(conversationId, {
+            conversation_id: event.conversation_id,
+            creator: event.content?.creator || event.sender || null,
+            members: new Set([ userUri ]),
+            memberRoles: new Map([ [ userUri, 'in_charge' ] ]),
+            currentUserRole: 'in_charge',
+            state_events: { [MSRP_STATE_CREATE]: { '': event } },
+            created_at: event.origin_server_ts || Date.now(),
+            updated_at: event.origin_server_ts || Date.now(),
+            currentUserStatus: 'join'
+        })
+        this.context.emit('msrpConversationCreated', {
+            conversation: this.snapshotConversation(this.conversationsMap.get(conversationId)!)
+        })
+    }
+
+    private handleIncomingConversationMessage (event: any) {
+        const conversationId = this.conversationIdOf(event)
+        if (!conversationId) return
+
+        const conversation = this.conversationsMap.get(conversationId)
+        if (!conversation) return
+
+        const relatesTo = event.content?.[MSRP_RELATION.RELATES_TO]
+        if (relatesTo?.rel_type === MSRP_RELATION.REPLACE && relatesTo.event_id) {
+            const newContent = event.content?.[MSRP_RELATION.NEW_CONTENT] ?? { content: event.content?.content }
+            conversation.updated_at = event.origin_server_ts || Date.now()
+            this.context.emit('msrpMessageEdited', {
+                conversation_id: conversation.conversation_id,
+                eventId: relatesTo.event_id,
+                newContent,
+                editEvent: event,
+                updatedAt: conversation.updated_at
+            })
+            return
+        }
+
+        if (!messageHasContent(event.content)) return
+
+        conversation.updated_at = event.origin_server_ts || Date.now()
+
+        this.context.emit('msrpMessageAdded', {
+            conversation_id: conversation.conversation_id,
+            message: event
+        })
+    }
+
+    private handleIncomingMessageDelete (event: any) {
+        const conversationId = this.conversationIdOf(event)
+        if (!conversationId) return
+        const targetEventId =
+            event.content?.target_event_id ?? event.content?.[MSRP_RELATION.RELATES_TO]?.event_id
+        if (!targetEventId) return
+
+        const updatedAt = event.origin_server_ts || Date.now()
+        const conversation = this.conversationsMap.get(conversationId)
+        if (conversation) conversation.updated_at = updatedAt
+
+        this.context.emit('msrpMessageDeleted', {
+            conversation_id: conversation?.conversation_id ?? Number(conversationId),
+            eventId: targetEventId,
+            deletedBy: event.sender,
+            updatedAt
+        })
+    }
+
+    private handleIncomingConversationReopen (event: any) {
+        const conversationId = this.conversationIdOf(event)
+        if (!conversationId) return
+
+        const conversation = this.conversationsMap.get(conversationId)
+        if (!conversation) return
+
+        if (conversation.state_events?.[MSRP_STATE_CLOSED]) {
+            delete conversation.state_events[MSRP_STATE_CLOSED]
+        }
+        conversation.status = 'active'
+        conversation.updated_at = event.origin_server_ts || Date.now()
+
+        this.context.emit('msrpConversationUpdated', {
+            conversation_id: conversation.conversation_id,
+            patch: {
+                status: conversation.status,
+                state_events: { ...conversation.state_events },
+                updated_at: conversation.updated_at
+            }
+        })
+    }
+
+    private handleIncomingPresence (event: any) {
+        const conversationId = this.conversationIdOf(event)
+        this.context.emit('msrpPresence', {
+            conversation_id: conversationId ? Number(conversationId) : undefined,
+            sender: event.sender,
+            presence: event.content?.presence ?? null,
+            lastActiveAt: event.content?.last_active_ts ?? event.content?.last_active_at ?? null,
+            updatedAt: event.origin_server_ts || Date.now()
+        })
+    }
+
+    private handleIncomingConversationClosed (event: any) {
+        const conversationId = this.conversationIdOf(event)
+        if (!conversationId) return
+
+        const conversation = this.conversationsMap.get(conversationId)
+        if (!conversation) return
+
+        if (!conversation.state_events) conversation.state_events = {}
+        conversation.state_events[MSRP_STATE_CLOSED] = conversation.state_events[MSRP_STATE_CLOSED] || {}
+        conversation.state_events[MSRP_STATE_CLOSED][''] = event
+        conversation.status = 'closed'
+        conversation.updated_at = event.origin_server_ts || Date.now()
+
+        this.context.emit('msrpConversationUpdated', {
+            conversation_id: conversation.conversation_id,
+            patch: {
+                status: conversation.status,
+                state_events: { ...conversation.state_events },
+                updated_at: conversation.updated_at
+            }
+        })
+    }
+
+    private handleIncomingReceipt (event: any) {
+        const conversationId = this.conversationIdOf(event)
+        const targetEventId = event.event_id
+        if (!conversationId || !targetEventId) return
+
+        const statusMap: Record<string, MSRPMessageStatus> = {
+            [MSRP_EVT.SENDING]: 'pending',
+            [MSRP_EVT.SENT]: 'sent',
+            [MSRP_EVT.DELIVERED]: 'delivered',
+            [MSRP_EVT.READ]: 'read',
+            [MSRP_EVT.FAILED]: 'failed'
+        }
+        const status = statusMap[event.type]
+        if (!status) return
+
+        const updatedAt = event.origin_server_ts || Date.now()
+        const conversation = this.conversationsMap.get(conversationId)
+        if (conversation) conversation.updated_at = updatedAt
+
+        this.context.emit('msrpReceiptChanged', {
+            conversation_id: conversation?.conversation_id ?? Number(conversationId),
+            eventId: targetEventId,
+            status,
+            updatedAt
+        })
+    }
+
+    private handleIncomingTyping (event: any) {
+        const conversationId = this.conversationIdOf(event)
+        if (!conversationId) return
+        if (event.sender === this.getUserUri()) return
+
+        this.context.emit('msrpTyping', {
+            conversation_id: Number(conversationId),
+            sender: event.sender,
+            isTyping: !!event.content?.typing
+        })
+    }
+
+    private handleIncomingReaction (event: any) {
+        const conversationId = this.conversationIdOf(event)
+        const relatesTo = event.content?.relates_to
+        const emoji = relatesTo?.key || relatesTo?.emoji
+        if (!conversationId || !relatesTo?.event_id || !emoji) return
+
+        const action: 'add' | 'remove' = event.content?.action === 'remove' ? 'remove' : 'add'
+        const updatedAt = event.origin_server_ts || Date.now()
+
+        const conversation = this.conversationsMap.get(conversationId)
+        if (conversation) conversation.updated_at = updatedAt
+
+        this.context.emit('msrpReactionChanged', {
+            conversation_id: conversation?.conversation_id ?? Number(conversationId),
+            eventId: relatesTo.event_id,
+            emoji,
+            action,
+            sender: event.sender,
+            updatedAt
+        })
+    }
+
+    private handleIncomingConversationMember (event: any) {
+        const conversationId = this.conversationIdOf(event)
+        if (!conversationId) return
+        const { state_key, content } = event
+        const membership = content?.membership as MSRPMembership | undefined
+        const role = (content?.role || 'assigned') as MSRPMemberRole
+
+        const conversationExisted = this.conversationsMap.has(conversationId)
+        let conversation = this.conversationsMap.get(conversationId)
+        if (!conversation) {
+            conversation = {
+                conversation_id: event.conversation_id,
+                creator: null,
+                members: new Set<string>(),
+                memberRoles: new Map<string, MSRPMemberRole>(),
+                currentUserRole: 'assigned',
+                state_events: {},
+                created_at: event.origin_server_ts || Date.now(),
+                updated_at: event.origin_server_ts || Date.now(),
+                currentUserStatus: null
+            }
+            this.conversationsMap.set(conversationId, conversation)
+        }
+
+        const userUri = this.getUserUri()
+        const stateKeyUsername = this.extractSipUser(state_key)
+        const currentUsername = this.extractSipUser(userUri)
+        const isCurrentUser =
+            state_key === userUri ||
+            (!!stateKeyUsername && !!currentUsername && stateKeyUsername === currentUsername)
+
+        let removedSelf = false
+
+        if (membership === 'join') {
+            conversation.members.add(state_key)
+            conversation.memberRoles.set(state_key, role)
+            if (isCurrentUser) {
+                conversation.currentUserStatus = 'join'
+                conversation.currentUserRole = role
+                const pointer = this.readLastReadEventIdFromMemberContent(content)
+                if (pointer !== undefined) {
+                    conversation.currentUserLastReadMessageId = pointer
+                }
+            }
+        } else if (membership === 'leave' || membership === 'ban') {
+            conversation.members.delete(state_key)
+            conversation.memberRoles.delete(state_key)
+            if (isCurrentUser) {
+                conversation.currentUserStatus = 'leave'
+                this.conversationsMap.delete(conversationId)
+                removedSelf = true
+            }
+        } else if (membership === 'invite') {
+            if (!isCurrentUser) return
+            conversation.currentUserStatus = 'invite'
+            conversation.memberRoles.set(state_key, role)
+        }
+
+        conversation.updated_at = event.origin_server_ts || Date.now()
+
+        if (removedSelf) {
+            this.context.emit('msrpConversationRemoved', {
+                conversation_id: conversation.conversation_id
+            })
+            return
+        }
+
+        if (!conversationExisted) {
+            this.context.emit('msrpConversationCreated', {
+                conversation: this.snapshotConversation(conversation)
+            })
+            return
+        }
+
+        this.context.emit('msrpConversationUpdated', {
+            conversation_id: conversation.conversation_id,
+            patch: {
+                members: new Set(conversation.members),
+                memberRoles: new Map(conversation.memberRoles),
+                currentUserRole: conversation.currentUserRole,
+                currentUserStatus: conversation.currentUserStatus,
+                currentUserLastReadMessageId: conversation.currentUserLastReadMessageId,
+                updated_at: conversation.updated_at
+            }
+        })
+    }
+
+    private handleIncomingUploadResponse (event: any) {
+        const content = event.content || {}
+        const requestId = content.request_id
+        const pending = this.pendingUploads.get(requestId)
+        if (!pending) return
+        this.pendingUploads.delete(requestId)
+
+        if (content.error) {
+            pending.reject(new Error(content.error))
+        } else {
+            pending.resolve({
+                upload_url: content.upload_url,
+                expires_in: content.expires_in,
+                mime_type: content.mime_type,
+                request_id: content.request_id,
+                filename: content.filename,
+                preview_url: content.preview_url,
+                icon_url: content.icon_url,
+                transcription: content.transcription,
+                media_type: content.media_type
+            })
+        }
+    }
+
+    private handleIncomingFileAccessResponse (event: any) {
+        const content = event.content || {}
+        const requestId = content.request_id
+        const pending = this.pendingFileAccessRequests.get(requestId)
+        if (!pending) return
+        this.pendingFileAccessRequests.delete(requestId)
+
+        if (content.error) {
+            pending.reject(content.error)
+        } else if (content.download_url) {
+            pending.resolve(content.download_url)
+        } else {
+            pending.reject(new Error('No download URL in response'))
+        }
+    }
+
+    private upsertConversationState (key: string, data: MSRPConversationState) {
+        this.conversationsMap.set(key, { ...data })
+    }
+
+    private toConversationId (ref: MSRPConversationRef | null | undefined): number | null {
+        if (ref === null || ref === undefined) return null
+        if (typeof ref === 'number') return Number.isFinite(ref) ? ref : null
+        const value = String(ref).trim()
+        if (!/^\d+$/.test(value)) return null
+        return Number(value)
+    }
+
+    private sendEvent (evt: object): boolean {
+        return this.safeSendMSRP(JSON.stringify(evt))
+    }
+
+    private snapshotConversation (c: MSRPConversationState): MSRPConversationState {
+        return {
+            ...c,
+            members: new Set(c.members),
+            memberRoles: new Map(c.memberRoles),
+            state_events: { ...c.state_events }
+        }
+    }
+
+    private snapshotConversationsMap (): { [conversationId: string]: MSRPConversationState } {
+        const out: { [conversationId: string]: MSRPConversationState } = {}
+        this.conversationsMap.forEach((conv) => {
+            if (conv.conversation_id === undefined || conv.conversation_id === null) return
+            out[String(conv.conversation_id)] = this.snapshotConversation(conv)
+        })
+        return out
+    }
+
+    public isConversationClosed (conversation: MSRPConversationState | undefined | null): boolean {
+        return !!conversation?.state_events?.[MSRP_STATE_CLOSED]?.['']
+    }
+
+    private conversationIdOf (source: any): string | null {
+        if (source === null || source === undefined) return null
+        if (typeof source === 'number') return String(source)
+        if (typeof source === 'string') return /^\d+$/.test(source) ? source : null
+        const id = source.conversation_id
+        return id === undefined || id === null ? null : String(id)
+    }
+
+    public extractSipUser (sipUri: string | null | undefined): string | null {
+        if (!sipUri) return null
+        const uriString = typeof sipUri === 'string' ? sipUri : String(sipUri)
+        const match = uriString.match(/^sip:([^@]+)@/)
+        return match ? match[1] : null
+    }
+
+    private readLastReadEventIdFromMemberContent (
+        content: any
+    ): string | null | undefined {
+        if (!content) return undefined
+        if ('last_read_event_id' in content
+            && content.last_read_event_id != null) {
+            return content.last_read_event_id
+        }
+        if ('last_read_message_id' in content
+            && content.last_read_message_id != null) {
+            return content.last_read_message_id
+        }
+        if ('last_read_event_id' in content
+            || 'last_read_message_id' in content) {
+            return null
+        }
+        return undefined
+    }
+
+    public extractDisplayName (uri: string | null | undefined): string {
+        if (!uri) return 'Unknown'
+        const uriString = typeof uri === 'string' ? uri : String(uri)
+
+        if (uriString.startsWith('sip:')) {
+            const match = uriString.match(/^sip:([^@]+)@/)
+            return match ? match[1] : uriString
+        }
+
+        if (uriString.startsWith('whatsapp:')) return uriString.slice('whatsapp:'.length)
+        if (uriString.startsWith('wa:')) return uriString.slice('wa:'.length)
+        if (uriString.startsWith('greenapi:')) return uriString.slice('greenapi:'.length)
+        if (uriString.startsWith('sms:')) return uriString.slice('sms:'.length)
+
+        return uriString
+    }
 }
diff --git a/src/types/listeners.d.ts b/src/types/listeners.d.ts
index 3864cee..ce51218 100644
--- a/src/types/listeners.d.ts
+++ b/src/types/listeners.d.ts
@@ -1,6 +1,11 @@
 import { UAEventMap } from 'jssip/lib/UA'
 
-import { IMessage, MSRPSessionExtended } from '@/types/msrp'
+import {
+    IMessage,
+    MSRPSessionExtended,
+    MSRPConversationState,
+    MSRPMessageStatus
+} from '@/types/msrp'
 import { ICall, RoomChangeEmitType, ICallStatus, RTCSessionExtended } from '@/types/rtc'
 import MSRPMessage from '@/lib/msrp/message'
 import { ITimeData } from '@/types/timer'
@@ -30,7 +35,7 @@ export type changeActiveMessagesListener = (event: { [key: string]: IMessage })
 export type TestEventListener = (event: { test: string }) => void
 export type ActiveRoomListener = (event: number | undefined) => void
 export type CallAddingProgressListener = (callId: string | undefined) => void
-export type MSRPInitializingListener = (sessionId: string | undefined) => void
+export type MSRPInitializingListener = (value: boolean) => void
 export type RoomDeletedListener = (roomId: number) => void
 export type changeActiveInputMediaDeviceListener = (event: string) => void
 export type changeActiveOutputMediaDeviceListener = (event: string) => void
@@ -65,6 +70,66 @@ export type memberHangupListener = (event: object) => void
 export type changeAudioStateListener = (state: boolean) => void
 export type changeVideoStateListener = (state: boolean) => void
 
+/* MSRP event listeners */
+export type changeMsrpSessionListener = (session: IMessage | null) => void
+export type msrpSyncCompletedListener = (payload: {
+    conversations: { [key: string]: MSRPConversationState }
+    messagesByConversation: { [key: string]: any[] }
+}) => void
+export type msrpConversationCreatedListener = (payload: {
+    conversation: MSRPConversationState
+}) => void
+export type msrpConversationRemovedListener = (payload: {
+    conversation_id?: number
+}) => void
+export type msrpConversationUpdatedListener = (payload: {
+    conversation_id?: number
+    patch: Partial<MSRPConversationState>
+}) => void
+export type msrpMessageAddedListener = (payload: {
+    conversation_id?: number
+    message: any
+}) => void
+export type msrpReceiptChangedListener = (payload: {
+    conversation_id?: number
+    eventId: string
+    status: MSRPMessageStatus
+    updatedAt: number
+}) => void
+export type msrpReactionChangedListener = (payload: {
+    conversation_id?: number
+    eventId: string
+    emoji: string
+    action: 'add' | 'remove'
+    sender: string
+    updatedAt: number
+}) => void
+export type msrpTypingListener = (payload: {
+    conversation_id?: number
+    sender: string
+    isTyping: boolean
+}) => void
+export type msrpMessageEditedListener = (payload: {
+    conversation_id?: number
+    eventId: string
+    newContent: any
+    editEvent: any
+    updatedAt: number
+}) => void
+export type msrpMessageDeletedListener = (payload: {
+    conversation_id?: number
+    eventId: string
+    deletedBy: string
+    updatedAt: number
+}) => void
+export type msrpPresenceListener = (payload: {
+    conversation_id?: number
+    sender: string
+    presence: string | null
+    lastActiveAt: number | null
+    updatedAt: number
+}) => void
+
 export interface OpenSIPSEventMap extends UAEventMap {
     ready: readyListener
     connection: connectionListener
@@ -97,6 +162,19 @@ export interface OpenSIPSEventMap extends UAEventMap {
     connectionStateChange: connectionStateChangeListener
     newMSRPMessage: MSRPMessageListener
     newMSRPSession: MSRPSessionListener
+    // MSRP events listeners
+    changeMsrpSession: changeMsrpSessionListener
+    msrpSyncCompleted: msrpSyncCompletedListener
+    msrpConversationCreated: msrpConversationCreatedListener
+    msrpConversationRemoved: msrpConversationRemovedListener
+    msrpConversationUpdated: msrpConversationUpdatedListener
+    msrpMessageAdded: msrpMessageAddedListener
+    msrpReceiptChanged: msrpReceiptChangedListener
+    msrpReactionChanged: msrpReactionChangedListener
+    msrpTyping: msrpTypingListener
+    msrpMessageEdited: msrpMessageEditedListener
+    msrpMessageDeleted: msrpMessageDeletedListener
+    msrpPresence: msrpPresenceListener
     // JANUS
     conferenceStart: conferenceStartListener
     conferenceEnd: conferenceEndListener
diff --git a/src/types/msrp.d.ts b/src/types/msrp.d.ts
index 1b1f34e..a4aff06 100644
--- a/src/types/msrp.d.ts
+++ b/src/types/msrp.d.ts
@@ -53,3 +53,51 @@ export interface TriggerMSRPListenerOptions {
     session: MSRPSessionExtended
     event?:  ListenerEventType
 }
+
+/* ---------- MSRP conversation shape types (backend v3 - June 2026) ----------
+ * These are the public data structures produced by MSRPModule at runtime and
+ * consumed by external subscribers (Vue wrappers, tests, etc.). Kept in this
+ * shipped `src/types/` file so they resolve cleanly for consumers without
+ * needing internal module paths.
+ */
+
+export type MSRPMemberRole = 'in_charge' | 'manager' | 'assigned'
+export type MSRPMembership = 'join' | 'leave' | 'invite' | 'ban'
+export type MSRPMessageStatus = 'pending' | 'sent' | 'delivered' | 'read' | 'failed'
+
+export interface MSRPConversationState {
+    /**
+     * Public, stable numeric conversation identifier assigned by the backend.
+     * This is the only identifier exposed to application code — conversations
+     * are addressed exclusively by `conversation_id`.
+     */
+    conversation_id?: number
+    creator: string | null
+    members: Set<string>
+    memberRoles: Map<string, MSRPMemberRole>
+    currentUserRole: MSRPMemberRole
+    currentUserStatus: MSRPMembership | null
+    /**
+     * Per-user read pointer (backend `last_read_message_id` in the current
+     * user's member state). `null` means the whole conversation is unread;
+     * an event_id means everything after that event is unread. Consumers
+     * derive the unread count from this pointer + the local timeline.
+     */
+    currentUserLastReadMessageId?: string | null
+    state_events: { [key: string]: { [stateKey: string]: any } }
+    created_at: number
+    updated_at: number
+    status?: string
+}
+
+export interface MSRPUploadResult {
+    upload_url: string
+    expires_in?: number
+    mime_type: string
+    request_id: string
+    filename?: string
+    preview_url?: string
+    icon_url?: string
+    transcription?: string
+    media_type?: string
+}
