@joewinke/jatui 0.1.0

package/src/lib/components/messaging/MessageItem.svelte

@@ -0,0 +1,338 @@
+<!--
+  MessageItem Component
+
+  Displays an individual message with sender info, timestamps, reactions, and actions.
+  All data operations are via callbacks — no direct API/store access.
+-->
+
+<script lang="ts">
+  import type {
+    Message,
+    ReactionSummary,
+    EmojiSelection,
+    StandardEmoji,
+    CustomEmoji,
+    ReactionCallbacks,
+    AttachmentCallbacks,
+  } from '../../types/messaging'
+  import { renderMentionsAsHTML, extractPlainText } from '../../utils/mentionParser'
+  import Avatar from './Avatar.svelte'
+  import QuotedMessageDisplay from './QuotedMessageDisplay.svelte'
+  import MessageAttachment from './MessageAttachment.svelte'
+  import EmojiSelector from './EmojiSelector.svelte'
+
+  interface Props {
+    message: Message
+    isOwn?: boolean
+    isConsecutive?: boolean
+    currentUserId?: string
+    currentUserRole?: 'admin' | 'moderator' | 'member'
+    channelId?: string
+    reactions?: ReactionSummary[]
+    quickReactions?: StandardEmoji[]
+    reactionCallbacks?: ReactionCallbacks
+    attachmentCallbacks?: AttachmentCallbacks
+    emojiSelectorProps?: {
+      emojis?: StandardEmoji[]
+      customEmojis?: CustomEmoji[]
+    }
+    onreply?: (data: { messageId: string }) => void
+    onedit?: (data: { messageId: string; content: string }) => void
+    ondelete?: (data: { messageId: string }) => void
+    onpin?: (data: { messageId: string; pinned: boolean }) => void
+    onopenthread?: (data: { messageId: string }) => void
+    onquotereply?: (data: { messageId: string }) => void
+    onreactionchange?: () => void
+  }
+
+  let {
+    message,
+    isOwn = false,
+    isConsecutive = false,
+    currentUserId,
+    currentUserRole = 'member',
+    channelId,
+    reactions = [],
+    quickReactions = [],
+    reactionCallbacks,
+    attachmentCallbacks,
+    emojiSelectorProps,
+    onreply,
+    onedit,
+    ondelete,
+    onpin,
+    onopenthread,
+    onquotereply,
+    onreactionchange,
+  }: Props = $props()
+
+  let isEditing = $state(false)
+  let editContent = $state('')
+  let editTextarea = $state<HTMLTextAreaElement | undefined>(undefined)
+  let showEmojiSelector = $state(false)
+  let emojiSelectorPosition = $state({ x: 0, y: 0 })
+
+  function formatTime(dateString: string): string {
+    const date = new Date(dateString)
+    const now = new Date()
+    if (date.toDateString() === now.toDateString()) {
+      return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
+    }
+    const yesterday = new Date(now)
+    yesterday.setDate(yesterday.getDate() - 1)
+    if (date.toDateString() === yesterday.toDateString()) {
+      return 'Yesterday ' + date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
+    }
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true })
+  }
+
+  async function handleCopyMessage() {
+    const plainTextContent = extractPlainText(message.content)
+    try { await navigator.clipboard.writeText(plainTextContent) } catch {}
+  }
+
+  async function handlePinToggle() {
+    onpin?.({ messageId: message.id, pinned: !message.isPinned })
+  }
+
+  const canPin = $derived(currentUserRole === 'admin' || currentUserRole === 'moderator')
+
+  function handleReply() { onreply?.({ messageId: message.id }) }
+  function handleQuoteReply() { onquotereply?.({ messageId: message.id }) }
+
+  function handleEdit() {
+    isEditing = true
+    editContent = message.content
+    setTimeout(() => {
+      if (editTextarea) {
+        editTextarea.focus()
+        editTextarea.setSelectionRange(editContent.length, editContent.length)
+      }
+    }, 50)
+  }
+
+  function cancelEdit() { isEditing = false; editContent = '' }
+
+  function saveEdit() {
+    const trimmedContent = editContent.trim()
+    if (!trimmedContent || trimmedContent === message.content) { cancelEdit(); return }
+    onedit?.({ messageId: message.id, content: trimmedContent })
+    isEditing = false
+    editContent = ''
+  }
+
+  function handleEditKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); saveEdit() }
+    else if (event.key === 'Escape') { event.preventDefault(); cancelEdit() }
+  }
+
+  function handleDelete() { ondelete?.({ messageId: message.id }) }
+
+  function handleMessageClick(event: MouseEvent) {
+    const target = event.target as HTMLElement
+    if (target.tagName === 'A' || target.tagName === 'BUTTON' || target.closest('a') || target.closest('button') || target.closest('details') || target.closest('.dropdown')) return
+    handleReply()
+  }
+
+  const renderedContent = $derived(renderMentionsAsHTML(message.content))
+
+  async function handleEmojiSelect(selection: EmojiSelection) {
+    if (!reactionCallbacks || !currentUserId) return
+    try {
+      await reactionCallbacks.addReaction(message.id, { unicode: selection.unicode, customEmojiId: selection.customEmojiId, skinTone: selection.skinTone })
+      onreactionchange?.()
+    } catch {}
+  }
+
+  async function toggleReaction(reaction: ReactionSummary) {
+    if (!reactionCallbacks || !currentUserId) return
+    try {
+      if (reaction.userReacted) {
+        await reactionCallbacks.removeReaction(message.id, { unicode: reaction.emojiUnicode, customEmojiId: reaction.customEmojiId })
+      } else {
+        await reactionCallbacks.addReaction(message.id, { unicode: reaction.emojiUnicode, customEmojiId: reaction.customEmojiId })
+      }
+      onreactionchange?.()
+    } catch {}
+  }
+
+  async function addQuickReaction(emoji: string, event: MouseEvent) {
+    event.stopPropagation()
+    if (!reactionCallbacks || !currentUserId) return
+    try {
+      await reactionCallbacks.addReaction(message.id, { unicode: emoji })
+      onreactionchange?.()
+    } catch {}
+  }
+
+  function showEmojiPicker(event: MouseEvent) {
+    const rect = (event.target as HTMLElement).getBoundingClientRect()
+    const messageContainer = (event.target as HTMLElement).closest('.group')
+    const messageRect = messageContainer?.getBoundingClientRect() || rect
+    const selectorWidth = 352
+    const selectorHeight = 320
+    const margin = 10
+    let x = messageRect.right - selectorWidth
+    let y = rect.bottom + margin
+    if (x + selectorWidth > window.innerWidth - margin) x = window.innerWidth - selectorWidth - margin
+    if (x < margin) x = margin
+    if (y + selectorHeight > window.innerHeight - margin) y = rect.top - selectorHeight - margin
+    emojiSelectorPosition = { x, y }
+    setTimeout(() => { showEmojiSelector = true }, 0)
+  }
+</script>
+
+<div
+  class="group flex gap-3 px-2 py-1 rounded relative transition-colors w-full text-left cursor-pointer {message.isPinned ? 'bg-warning/5 hover:bg-warning/10 border-l-4 border-warning pl-1' : 'hover:bg-base-200'}"
+  class:pt-2={!isConsecutive}
+  data-message-id={message.id}
+  onclick={handleMessageClick}
+  role="button"
+  tabindex="0"
+  onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleMessageClick(e as any) } }}
+>
+  <!-- Avatar -->
+  <div class="w-8 flex-shrink-0">
+    {#if !isConsecutive}
+      <Avatar name={message.senderName} avatarUrl={message.senderAvatar} size="small" />
+    {:else}
+      <div class="text-xs text-base-content/40 opacity-0 group-hover:opacity-100 transition-opacity text-center pt-0.5">
+        {formatTime(message.createdAt).split(' ')[1] || ''}
+      </div>
+    {/if}
+  </div>
+
+  <!-- Content -->
+  <div class="flex-1 min-w-0 relative">
+    <!-- Floating action buttons -->
+    <div class="absolute right-0 {!isConsecutive ? 'top-0' : 'top-1'} opacity-0 group-hover:opacity-100 transition-opacity bg-base-100/90 backdrop-blur-sm rounded-lg shadow-lg border border-base-300 p-1 z-10">
+      <div class="flex items-center">
+        {#if reactionCallbacks && currentUserId}
+          <div class="flex items-center gap-1 mr-1">
+            {#each quickReactions as emoji}
+              <button class="btn btn-ghost btn-xs btn-square hover:bg-base-300" onclick={(e) => addQuickReaction(emoji.unicode, e)} title="Add {emoji.unicode} reaction">{emoji.unicode}</button>
+            {/each}
+            <button class="btn btn-ghost btn-xs btn-square hover:bg-base-300" onclick={showEmojiPicker} title="Add reaction...">😊</button>
+          </div>
+        {/if}
+        <div class="flex items-center gap-1">
+          <button class="btn btn-ghost btn-xs btn-square hover:bg-base-300" onclick={handleQuoteReply} title="Quote reply">💬</button>
+          <button class="btn btn-ghost btn-xs btn-square hover:bg-base-300" onclick={handleReply} title="Reply in thread">↩</button>
+          {#if canPin}
+            <button class="btn btn-ghost btn-xs btn-square hover:bg-base-300" onclick={handlePinToggle} title={message.isPinned ? 'Unpin' : 'Pin'}>{message.isPinned ? '📌' : '📍'}</button>
+          {/if}
+          {#if isOwn}
+            <button class="btn btn-ghost btn-xs btn-square hover:bg-base-300" onclick={handleEdit} title="Edit">✏</button>
+          {/if}
+          <button class="btn btn-ghost btn-xs btn-square hover:bg-base-300" onclick={handleCopyMessage} title="Copy">📋</button>
+          {#if isOwn}
+            <button class="btn btn-ghost btn-xs btn-square hover:bg-base-300 text-error hover:text-error" onclick={handleDelete} title="Delete">🗑</button>
+          {/if}
+        </div>
+      </div>
+    </div>
+
+    <!-- Sender + timestamp -->
+    {#if !isConsecutive}
+      <div class="flex items-center gap-2 mb-1">
+        <span class="font-medium text-sm" class:text-primary={isOwn}>{message.senderName}</span>
+        <span class="text-xs text-base-content/50">{formatTime(message.createdAt)}</span>
+        {#if message.editedAt}<span class="text-xs text-base-content/40">(edited)</span>{/if}
+        {#if isOwn && message.readByCount !== undefined}
+          {#if message.readByCount > 0}
+            <span class="text-[11px] text-success/60" title="Read by {message.readByCount}">✓✓</span>
+          {:else}
+            <span class="text-[11px] text-base-content/30" title="Delivered">✓</span>
+          {/if}
+        {/if}
+      </div>
+    {/if}
+
+    <!-- Pinned indicator -->
+    {#if message.isPinned}
+      <div class="flex items-center gap-1 mb-2">
+        <span class="text-warning text-xs">📌</span>
+        <span class="text-xs text-warning font-medium">Pinned Message</span>
+        {#if message.pinnedAt}<span class="text-xs text-base-content/50">• {formatTime(message.pinnedAt)}</span>{/if}
+      </div>
+    {/if}
+
+    <!-- Edit form or content -->
+    {#if isEditing}
+      <div class="space-y-2">
+        <textarea bind:this={editTextarea} bind:value={editContent} class="textarea textarea-bordered w-full text-sm min-h-[60px] resize-none" placeholder="Edit your message..." onkeydown={handleEditKeydown}></textarea>
+        <div class="flex gap-2">
+          <button class="btn btn-primary btn-xs" onclick={saveEdit}>Save</button>
+          <button class="btn btn-ghost btn-xs" onclick={cancelEdit}>Cancel</button>
+          <span class="text-xs text-base-content/60 self-center">Enter to save • Escape to cancel</span>
+        </div>
+      </div>
+    {:else}
+      {#if message.quotedMessage}
+        <QuotedMessageDisplay quotedMessage={message.quotedMessage} mode="inline" class="mb-2" />
+      {/if}
+
+      {#if message.content}
+        <div class="text-sm whitespace-pre-wrap break-words message-content">
+          {@html renderedContent}
+        </div>
+      {/if}
+
+      <!-- Attachments -->
+      {#if message.attachments && message.attachments.length > 0 && attachmentCallbacks}
+        <div class="flex flex-wrap gap-2 mt-2">
+          {#each message.attachments as att (att.id)}
+            <MessageAttachment attachment={att} callbacks={attachmentCallbacks} {currentUserId} showDelete={isOwn} compact={message.attachments.length > 2} />
+          {/each}
+        </div>
+      {/if}
+
+      <!-- Thread indicator -->
+      {#if message.thread_reply_count && message.thread_reply_count > 0}
+        <button type="button" class="mt-2 p-2 bg-base-200/50 rounded-lg border-l-2 border-primary/30 hover:bg-base-300/50 transition-colors w-full text-left" onclick={(e) => { e.stopPropagation(); handleReply() }}>
+          <div class="flex items-center gap-2 text-xs">
+            {#if message.thread_last_sender}
+              <Avatar name={message.thread_last_sender.full_name} avatarUrl={message.thread_last_sender.avatar_url} size="xs" />
+            {/if}
+            <div class="flex items-center gap-1 text-primary">
+              <span class="font-medium">{message.thread_reply_count} {message.thread_reply_count === 1 ? 'reply' : 'replies'}</span>
+              {#if message.thread_last_reply_at}<span class="text-base-content/60">• Last reply {formatTime(message.thread_last_reply_at)}</span>{/if}
+            </div>
+          </div>
+        </button>
+      {/if}
+
+      <!-- Reactions -->
+      {#if reactions.length > 0}
+        <div class="flex flex-wrap gap-1 mt-2 items-center">
+          {#each reactions as reaction}
+            <button
+              class="reaction-pill inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs border transition-colors {reaction.userReacted ? 'bg-primary/10 border-primary text-primary' : 'bg-base-200 border-base-300 hover:bg-base-300'}"
+              onclick={() => toggleReaction(reaction)}
+              title="Toggle reaction"
+            >
+              <span class="text-sm">{reaction.emojiUnicode || '🎨'}</span>
+              <span class="font-medium">{reaction.reactionCount}</span>
+            </button>
+          {/each}
+        </div>
+      {/if}
+
+      {#if message.editedAt && isConsecutive}
+        <span class="text-xs text-base-content/40">(edited)</span>
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<!-- Emoji Selector -->
+{#if showEmojiSelector && currentUserId}
+  <EmojiSelector
+    visible={showEmojiSelector}
+    position={emojiSelectorPosition}
+    emojis={emojiSelectorProps?.emojis}
+    customEmojis={emojiSelectorProps?.customEmojis}
+    onselect={(selection) => { handleEmojiSelect(selection); showEmojiSelector = false }}
+    onclose={() => (showEmojiSelector = false)}
+  />
+{/if}

package/src/lib/components/messaging/MessageThread.svelte

@@ -0,0 +1,306 @@
+<!--
+  MessageThread Component
+
+  Displays a conversation thread (channel or DM).
+  All data operations are via callbacks — no Supabase/realtime dependencies.
+  The consuming app is responsible for:
+  - Loading messages (initial + pagination)
+  - Sending messages
+  - Subscribing to realtime updates and calling onNewMessage
+  - Presence tracking
+-->
+
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import type {
+    Message,
+    QuotedMessage,
+    ChannelMember,
+    ReactionSummary,
+    StandardEmoji,
+    PendingAttachment,
+    PresenceState,
+    MentionItem,
+    MessageCallbacks,
+    ReactionCallbacks,
+    AttachmentCallbacks,
+  } from '../../types/messaging'
+  import MessageItem from './MessageItem.svelte'
+  import MessageInput from './MessageInput.svelte'
+  import ChannelMemberAvatarStack from './ChannelMemberAvatarStack.svelte'
+  import Avatar from './Avatar.svelte'
+
+  interface Props {
+    type: 'channel' | 'dm'
+    channelId?: string
+    channelName?: string
+    channelEmoji?: string
+    dmUserId?: string
+    dmUserName?: string
+    dmUserAvatar?: string
+    currentUser: {
+      id: string
+      full_name: string
+      avatar_url?: string
+    }
+    messages?: Message[]
+    members?: ChannelMember[]
+    presenceState?: PresenceState
+    quickReactions?: StandardEmoji[]
+    messageCallbacks: MessageCallbacks
+    reactionCallbacks?: ReactionCallbacks
+    attachmentCallbacks?: AttachmentCallbacks
+    getReactions?: (messageId: string) => ReactionSummary[]
+    onsearchmentions?: (query: string) => Promise<MentionItem[]>
+    onmessagesent?: (message: Message) => void
+    onopenthread?: (messageId: string) => void
+    onopensidebar?: () => void
+  }
+
+  let {
+    type,
+    channelId,
+    channelName,
+    channelEmoji,
+    dmUserId,
+    dmUserName,
+    dmUserAvatar,
+    currentUser,
+    messages = [],
+    members = [],
+    presenceState = {},
+    quickReactions = [],
+    messageCallbacks,
+    reactionCallbacks,
+    attachmentCallbacks,
+    getReactions,
+    onsearchmentions,
+    onmessagesent,
+    onopenthread,
+    onopensidebar,
+  }: Props = $props()
+
+  let messagesContainer: HTMLElement
+  let loading = $state(false)
+  let sending = $state(false)
+  let quotedMessage = $state<QuotedMessage | undefined>(undefined)
+  let hasMoreMessages = $state(true)
+  let showSidebar = $state(false)
+
+  function isConsecutive(msg: Message, index: number): boolean {
+    if (index === 0) return false
+    const prev = messages[index - 1]
+    if (!prev || prev.senderId !== msg.senderId) return false
+    const diff = new Date(msg.createdAt).getTime() - new Date(prev.createdAt).getTime()
+    return diff < 5 * 60 * 1000 // 5 minutes
+  }
+
+  async function handleSend(data: {
+    content: string
+    priority?: string
+    quotedMessageId?: string
+    attachments?: PendingAttachment[]
+  }) {
+    if (sending) return
+    sending = true
+    try {
+      const newMessage = await messageCallbacks.sendMessage({
+        content: data.content,
+        channelId: type === 'channel' ? channelId : undefined,
+        dmUserId: type === 'dm' ? dmUserId : undefined,
+        quotedMessageId: data.quotedMessageId,
+        attachments: data.attachments,
+        priority: data.priority,
+      })
+      onmessagesent?.(newMessage)
+      quotedMessage = undefined
+      scrollToBottom()
+    } catch (err) {
+      console.error('Failed to send message:', err)
+    } finally {
+      sending = false
+    }
+  }
+
+  async function handleEdit(data: { messageId: string; content: string }) {
+    try {
+      await messageCallbacks.editMessage(data.messageId, data.content)
+    } catch (err) {
+      console.error('Failed to edit message:', err)
+    }
+  }
+
+  async function handleDelete(data: { messageId: string }) {
+    if (!confirm('Delete this message?')) return
+    try {
+      await messageCallbacks.deleteMessage(data.messageId)
+    } catch (err) {
+      console.error('Failed to delete message:', err)
+    }
+  }
+
+  async function handlePin(data: { messageId: string; pinned: boolean }) {
+    try {
+      if (data.pinned) await messageCallbacks.pinMessage(data.messageId, channelId || '')
+      else await messageCallbacks.unpinMessage(data.messageId, channelId || '')
+    } catch (err) {
+      console.error('Failed to toggle pin:', err)
+    }
+  }
+
+  function handleQuoteReply(data: { messageId: string }) {
+    const msg = messages.find((m) => m.id === data.messageId)
+    if (msg) {
+      quotedMessage = {
+        id: msg.id,
+        content: msg.content,
+        senderId: msg.senderId,
+        senderName: msg.senderName,
+        senderAvatar: msg.senderAvatar,
+        createdAt: msg.createdAt,
+      }
+    }
+  }
+
+  function handleOpenThread(data: { messageId: string }) {
+    onopenthread?.(data.messageId)
+  }
+
+  async function loadOlderMessages() {
+    if (loading || !hasMoreMessages || messages.length === 0) return
+    loading = true
+    try {
+      const olderMessages = await messageCallbacks.loadMessages({
+        channelId: type === 'channel' ? channelId : undefined,
+        dmUserId: type === 'dm' ? dmUserId : undefined,
+        before: messages[0]?.createdAt,
+        limit: 50,
+      })
+      if (olderMessages.length === 0) hasMoreMessages = false
+    } catch (err) {
+      console.error('Failed to load older messages:', err)
+    } finally {
+      loading = false
+    }
+  }
+
+  function scrollToBottom() {
+    setTimeout(() => {
+      if (messagesContainer) {
+        messagesContainer.scrollTop = messagesContainer.scrollHeight
+      }
+    }, 50)
+  }
+
+  function handleScroll() {
+    if (messagesContainer && messagesContainer.scrollTop < 100) {
+      loadOlderMessages()
+    }
+  }
+
+  // Scroll to bottom on mount and when new messages arrive
+  onMount(scrollToBottom)
+  $effect(() => {
+    if (messages.length > 0) {
+      const lastMsg = messages[messages.length - 1]
+      if (lastMsg.senderId === currentUser.id) scrollToBottom()
+    }
+  })
+</script>
+
+<div class="flex flex-col h-full">
+  <!-- Header -->
+  <div class="flex items-center justify-between px-4 py-3 border-b border-base-300">
+    <div class="flex items-center gap-3">
+      {#if type === 'channel'}
+        <span class="text-lg">{channelEmoji || '#'}</span>
+        <div>
+          <h2 class="font-semibold text-sm">{channelName}</h2>
+          <span class="text-xs text-base-content/50">{members.length} members</span>
+        </div>
+      {:else}
+        <Avatar name={dmUserName || ''} avatarUrl={dmUserAvatar} size="medium" />
+        <div>
+          <h2 class="font-semibold text-sm">{dmUserName}</h2>
+          <span class="text-xs text-base-content/50">
+            {presenceState[dmUserId || '']?.status === 'online' ? 'Online' : 'Offline'}
+          </span>
+        </div>
+      {/if}
+    </div>
+
+    <div class="flex items-center gap-2">
+      {#if type === 'channel' && members.length > 0}
+        <ChannelMemberAvatarStack {members} {presenceState} maxVisible={3} size="xs" />
+      {/if}
+      {#if onopensidebar}
+        <button class="btn btn-ghost btn-sm btn-square" onclick={onopensidebar} title="Toggle sidebar">
+          ☰
+        </button>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Messages -->
+  <div
+    bind:this={messagesContainer}
+    class="flex-1 overflow-y-auto px-4 py-2"
+    onscroll={handleScroll}
+  >
+    {#if loading && messages.length === 0}
+      <div class="flex items-center justify-center h-full">
+        <span class="loading loading-spinner loading-md"></span>
+      </div>
+    {:else if messages.length === 0}
+      <div class="flex flex-col items-center justify-center h-full text-base-content/50">
+        <div class="text-4xl mb-4">{type === 'channel' ? '#' : '💬'}</div>
+        <h3 class="text-lg font-medium">
+          {#if type === 'channel'}
+            Welcome to #{channelName}
+          {:else}
+            Start a conversation with {dmUserName}
+          {/if}
+        </h3>
+        <p class="text-sm">Send a message to get started.</p>
+      </div>
+    {:else}
+      {#if loading}
+        <div class="flex justify-center py-4">
+          <span class="loading loading-spinner loading-sm"></span>
+        </div>
+      {/if}
+
+      {#each messages as msg, index (msg.id)}
+        <MessageItem
+          message={msg}
+          isOwn={msg.senderId === currentUser.id}
+          isConsecutive={isConsecutive(msg, index)}
+          currentUserId={currentUser.id}
+          {channelId}
+          reactions={getReactions?.(msg.id) || []}
+          {quickReactions}
+          {reactionCallbacks}
+          {attachmentCallbacks}
+          onreply={(d) => handleOpenThread(d)}
+          onedit={handleEdit}
+          ondelete={handleDelete}
+          onpin={handlePin}
+          onopenthread={(d) => handleOpenThread(d)}
+          onquotereply={handleQuoteReply}
+        />
+      {/each}
+    {/if}
+  </div>
+
+  <!-- Input -->
+  <div class="px-4 py-3 border-t border-base-300">
+    <MessageInput
+      {quotedMessage}
+      disabled={sending}
+      onsend={handleSend}
+      onquoteremove={() => (quotedMessage = undefined)}
+      {onsearchmentions}
+      {attachmentCallbacks}
+    />
+  </div>
+</div>