@joewinke/jatui 0.1.22 → 0.1.24

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

@@ -1,341 +0,0 @@
-<!--
-  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' : '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-200 rounded-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 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">
-            <svg class="w-3.5 h-3.5 text-primary/50 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-            </svg>
-            {#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

@@ -1,306 +0,0 @@
-<!--
-  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>