@joewinke/jatui 0.1.0

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

@@ -0,0 +1,451 @@
+<!--
+  MessageInput Component
+
+  Rich text input for composing and sending messages.
+  Supports mentions, attachments, and drag/drop.
+  All searches and uploads are via callbacks.
+-->
+
+<script lang="ts">
+  import type { QuotedMessage, PendingAttachment, MentionItem, AttachmentCallbacks } from '../../types/messaging'
+  import {
+    findPartialMention,
+    createMentionString,
+    replaceMentionInContent,
+    renderMentionsAsHTML,
+    extractPlainText,
+    parseMentions,
+  } from '../../utils/mentionParser'
+  import MentionAutocomplete from './MentionAutocomplete.svelte'
+  import QuotedMessageDisplay from './QuotedMessageDisplay.svelte'
+
+  interface Props {
+    placeholder?: string
+    disabled?: boolean
+    maxLength?: number
+    compact?: boolean
+    quotedMessage?: QuotedMessage
+    showPrioritySelector?: boolean
+    attachmentCallbacks?: AttachmentCallbacks
+    organizationId?: string
+    onsend?: (data: {
+      content: string
+      priority?: string
+      quotedMessageId?: string
+      attachments?: PendingAttachment[]
+    }) => void
+    ontyping?: (data: { isTyping: boolean }) => void
+    onquoteremove?: () => void
+    onsearchmentions?: (query: string) => Promise<MentionItem[]>
+  }
+
+  let {
+    placeholder = 'Type a message...',
+    disabled = false,
+    maxLength = 4000,
+    compact = false,
+    quotedMessage,
+    showPrioritySelector = false,
+    attachmentCallbacks,
+    organizationId,
+    onsend,
+    ontyping,
+    onquoteremove,
+    onsearchmentions,
+  }: Props = $props()
+
+  let selectedPriority = $state<'low' | 'normal' | 'high' | 'urgent'>('normal')
+  let attachments = $state<PendingAttachment[]>([])
+  let isDragging = $state(false)
+  let fileInputRef = $state<HTMLInputElement | null>(null)
+  let inputText = $state('')
+  let contentEditableDiv: HTMLDivElement
+  let isTyping = $state(false)
+  let typingTimeout: ReturnType<typeof setTimeout>
+
+  let showMentionAutocomplete = $state(false)
+  let mentionQuery = $state('')
+  let mentionStartIndex = $state(0)
+  let cursorPosition = $state(0)
+  let autocompletePosition = $state({ x: 0, y: 0 })
+  let isInternalUpdate = false
+
+  function autoResize() {
+    if (contentEditableDiv) {
+      const maxHeight = compact ? 120 : 200
+      if (contentEditableDiv.scrollHeight > maxHeight) {
+        contentEditableDiv.style.maxHeight = maxHeight + 'px'
+        contentEditableDiv.style.overflowY = 'auto'
+      } else {
+        contentEditableDiv.style.maxHeight = 'none'
+        contentEditableDiv.style.overflowY = 'visible'
+      }
+    }
+  }
+
+  export function focus() {
+    if (contentEditableDiv) {
+      contentEditableDiv.focus()
+      const selection = window.getSelection()
+      if (selection) {
+        const range = document.createRange()
+        range.selectNodeContents(contentEditableDiv)
+        range.collapse(false)
+        selection.removeAllRanges()
+        selection.addRange(range)
+      }
+    }
+  }
+
+  export async function addFiles(files: FileList | File[]) {
+    await processFiles(files)
+  }
+
+  function handleInput() {
+    if (!contentEditableDiv || isInternalUpdate) return
+
+    const newText = contentEditableDiv.innerText || ''
+    const updatedInputText = reconstructMarkdownWithNewText(inputText, newText)
+    inputText = updatedInputText
+
+    const hasMentions = inputText.includes('[@')
+    if (hasMentions) {
+      isInternalUpdate = true
+      const renderedHTML = renderMentionsWithDegradedStyling(inputText)
+      if (contentEditableDiv.innerHTML !== renderedHTML) {
+        const selection = window.getSelection()
+        const cursorOffset = selection?.rangeCount ? getAbsoluteCursorPosition(selection.getRangeAt(0)) : 0
+        contentEditableDiv.innerHTML = renderedHTML
+        setContentEditableCursor(cursorOffset)
+      }
+      isInternalUpdate = false
+    }
+
+    autoResize()
+    updateCursorPosition()
+    checkForMentions()
+
+    if (!isTyping && inputText.trim()) {
+      isTyping = true
+      ontyping?.({ isTyping: true })
+    }
+    if (typingTimeout) clearTimeout(typingTimeout)
+    typingTimeout = setTimeout(() => { isTyping = false; ontyping?.({ isTyping: false }) }, 3000)
+  }
+
+  function reconstructMarkdownWithNewText(currentMarkdown: string, newPlainText: string): string {
+    const existingMentions = parseMentions(currentMarkdown)
+    if (existingMentions.length === 0) return newPlainText
+
+    const currentPlainText = extractPlainText(currentMarkdown)
+    if (newPlainText.startsWith(currentPlainText)) return currentMarkdown + newPlainText.substring(currentPlainText.length)
+    if (currentPlainText.startsWith(newPlainText)) {
+      const deletedLength = currentPlainText.length - newPlainText.length
+      return currentMarkdown.substring(0, currentMarkdown.length - deletedLength)
+    }
+
+    // Complex edit — try to preserve mentions
+    const mentionMap = new Map<string, string>()
+    existingMentions.forEach((m) => {
+      mentionMap.set(`@${m.displayName}`, `[@${m.displayName}](${m.type}:${m.id})`)
+    })
+    let result = newPlainText
+    mentionMap.forEach((markdownSyntax, displayName) => {
+      if (result.includes(displayName)) result = result.replace(displayName, markdownSyntax)
+    })
+    return result
+  }
+
+  function updateCursorPosition() {
+    if (contentEditableDiv) {
+      const selection = window.getSelection()
+      if (selection && selection.rangeCount > 0) cursorPosition = getAbsoluteCursorPosition(selection.getRangeAt(0))
+    }
+  }
+
+  function getAbsoluteCursorPosition(range: Range): number {
+    const walker = document.createTreeWalker(contentEditableDiv, NodeFilter.SHOW_TEXT)
+    let pos = 0
+    let node = walker.nextNode()
+    while (node) {
+      if (node === range.startContainer) return pos + range.startOffset
+      pos += node.textContent?.length || 0
+      node = walker.nextNode()
+    }
+    return pos
+  }
+
+  function checkForMentions() {
+    const partialMention = findPartialMention(inputText, cursorPosition)
+    if (partialMention) {
+      mentionStartIndex = partialMention.start
+      mentionQuery = partialMention.query
+      updateAutocompletePosition()
+      showMentionAutocomplete = true
+    } else {
+      showMentionAutocomplete = false
+    }
+  }
+
+  function renderMentionsWithDegradedStyling(content: string): string {
+    let result = renderMentionsAsHTML(content)
+    const degradedMentionRegex = /(?<!>)[@$#!~>/+]\w+(?![^<]*<\/a>)/g
+    result = result.replace(degradedMentionRegex, (match) => `<span class="degraded-mention">${match}</span>`)
+    return result
+  }
+
+  function updateAutocompletePosition() {
+    if (!contentEditableDiv) return
+    const selection = window.getSelection()
+    if (!selection || selection.rangeCount === 0) return
+    try {
+      const range = selection.getRangeAt(0)
+      const rect = range.getBoundingClientRect()
+      autocompletePosition = { x: rect.left, y: rect.bottom + window.scrollY }
+    } catch {
+      const rect = contentEditableDiv.getBoundingClientRect()
+      autocompletePosition = { x: rect.left, y: rect.bottom + window.scrollY }
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (showMentionAutocomplete && ['ArrowUp', 'ArrowDown', 'Tab', 'Enter', 'Escape'].includes(event.key)) return
+    if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage() }
+  }
+
+  function handleMentionSelect(event: { result: MentionItem }) {
+    const { result } = event
+    const mentionString = createMentionString(result.type, result.id, result.name) + ' '
+    const endIndex = mentionStartIndex + 1 + mentionQuery.length
+    const { newContent, newCursorPosition } = replaceMentionInContent(inputText, mentionStartIndex, endIndex, mentionString)
+
+    isInternalUpdate = true
+    inputText = newContent
+    if (contentEditableDiv) {
+      contentEditableDiv.innerHTML = renderMentionsWithDegradedStyling(inputText)
+      setTimeout(() => {
+        setContentEditableCursor(newCursorPosition)
+        contentEditableDiv.focus()
+        setTimeout(() => { isInternalUpdate = false; updateCursorPosition() }, 10)
+      }, 0)
+    }
+    showMentionAutocomplete = false
+  }
+
+  function setContentEditableCursor(position: number) {
+    if (!contentEditableDiv) return
+    const textContent = contentEditableDiv.innerText || ''
+    if (position >= textContent.length - 1) {
+      const range = document.createRange()
+      const selection = window.getSelection()
+      try { range.selectNodeContents(contentEditableDiv); range.collapse(false); selection?.removeAllRanges(); selection?.addRange(range) } catch {}
+      return
+    }
+    const walker = document.createTreeWalker(contentEditableDiv, NodeFilter.SHOW_TEXT)
+    let currentPos = 0
+    while (walker.nextNode()) {
+      const node = walker.currentNode
+      const nodeLength = node.textContent?.length || 0
+      if (currentPos + nodeLength >= position) {
+        const range = document.createRange()
+        const selection = window.getSelection()
+        try {
+          const offset = Math.min(position - currentPos, nodeLength)
+          range.setStart(node, offset); range.setEnd(node, offset)
+          selection?.removeAllRanges(); selection?.addRange(range)
+        } catch {}
+        return
+      }
+      currentPos += nodeLength
+    }
+  }
+
+  function sendMessage() {
+    const content = inputText.trim()
+    if ((!content && attachments.length === 0) || disabled) return
+
+    onsend?.({
+      content,
+      priority: showPrioritySelector ? selectedPriority : undefined,
+      quotedMessageId: quotedMessage?.id,
+      attachments: attachments.length > 0 ? attachments : undefined,
+    })
+
+    inputText = ''
+    selectedPriority = 'normal'
+    attachments = []
+    if (contentEditableDiv) contentEditableDiv.innerHTML = ''
+    autoResize()
+    if (quotedMessage) onquoteremove?.()
+    if (isTyping) { isTyping = false; ontyping?.({ isTyping: false }) }
+    if (typingTimeout) clearTimeout(typingTimeout)
+  }
+
+  function handleFileUpload() { fileInputRef?.click() }
+
+  function handleFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement
+    if (input.files && input.files.length > 0) { processFiles(input.files); input.value = '' }
+  }
+
+  async function processFiles(files: FileList | File[]) {
+    if (disabled) return
+    const fileArray = Array.from(files)
+    const acceptedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'video/mp4', 'video/webm', 'video/quicktime', 'application/pdf']
+    const maxSize = 25 * 1024 * 1024
+
+    for (const file of fileArray) {
+      if (!acceptedTypes.includes(file.type) || file.size > maxSize) continue
+      let preview: string | undefined
+      if (file.type.startsWith('image/')) {
+        preview = await new Promise<string | undefined>((resolve) => {
+          const reader = new FileReader()
+          reader.onload = (e) => resolve(e.target?.result as string)
+          reader.onerror = () => resolve(undefined)
+          reader.readAsDataURL(file)
+        })
+      }
+      attachments = [...attachments, { id: crypto.randomUUID(), file, preview, uploading: false, progress: 0 }]
+    }
+  }
+
+  function removeAttachment(id: string) { attachments = attachments.filter((a) => a.id !== id) }
+
+  function handleDragEnter(e: DragEvent) { e.preventDefault(); e.stopPropagation(); isDragging = true }
+  function handleDragLeave(e: DragEvent) {
+    e.preventDefault(); e.stopPropagation()
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    if (e.clientX <= rect.left || e.clientX >= rect.right || e.clientY <= rect.top || e.clientY >= rect.bottom) isDragging = false
+  }
+  function handleDragOver(e: DragEvent) { e.preventDefault(); e.stopPropagation() }
+  async function handleDrop(e: DragEvent) {
+    e.preventDefault(); e.stopPropagation(); isDragging = false
+    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) await processFiles(e.dataTransfer.files)
+  }
+
+  function getFileTypeIcon(file: File): string { if (file.type.startsWith('image/')) return '🖼'; if (file.type.startsWith('video/')) return '🎬'; return '📄' }
+
+  const characterCount = $derived(inputText.length)
+  const showCharacterCount = $derived(characterCount > maxLength * 0.8)
+  const isOverLimit = $derived(characterCount > maxLength)
+
+  $effect(() => { if (inputText) autoResize() })
+</script>
+
+<input bind:this={fileInputRef} type="file" accept="image/jpeg,image/png,image/gif,image/webp,video/mp4,video/webm,video/quicktime,application/pdf" multiple class="hidden" onchange={handleFileSelect} {disabled} />
+
+<div class="flex flex-col gap-2 relative" ondragenter={handleDragEnter} ondragleave={handleDragLeave} ondragover={handleDragOver} ondrop={handleDrop}>
+  {#if isDragging}
+    <div class="absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary rounded-lg flex items-center justify-center pointer-events-none">
+      <div class="text-center">
+        <div class="text-2xl mb-2">📎</div>
+        <p class="text-sm font-medium text-primary">Drop files to attach</p>
+      </div>
+    </div>
+  {/if}
+
+  {#if quotedMessage}
+    <QuotedMessageDisplay {quotedMessage} mode="preview" onremove={onquoteremove} />
+  {/if}
+
+  {#if attachments.length > 0}
+    <div class="flex flex-wrap gap-2 p-2 bg-base-200 rounded-lg">
+      {#each attachments as att (att.id)}
+        <div class="relative group bg-base-100 rounded-lg overflow-hidden border border-base-300 w-16 h-16">
+          {#if att.preview}
+            <img src={att.preview} alt={att.file.name} class="w-full h-full object-cover" />
+          {:else}
+            <div class="w-full h-full flex items-center justify-center bg-base-200">
+              <span class="text-xl">{getFileTypeIcon(att.file)}</span>
+            </div>
+          {/if}
+          <button type="button" class="absolute top-0.5 right-0.5 btn btn-circle btn-xs bg-base-100/80 hover:bg-error hover:text-error-content opacity-0 group-hover:opacity-100 transition-opacity" onclick={() => removeAttachment(att.id)} title="Remove">✕</button>
+          {#if att.uploading}
+            <div class="absolute inset-0 bg-black/50 flex items-center justify-center"><span class="loading loading-spinner loading-xs text-white"></span></div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if showCharacterCount}
+    <div class="text-right">
+      <span class="text-xs" class:text-warning={characterCount > maxLength * 0.9} class:text-error={isOverLimit}>{characterCount} / {maxLength}</span>
+    </div>
+  {/if}
+
+  <div class="flex items-end gap-2 {compact ? 'p-2' : 'p-3'} border border-base-300 rounded-lg focus-within:border-primary transition-colors">
+    {#if !compact}
+      <button type="button" class="btn btn-ghost btn-sm btn-circle flex-shrink-0" onclick={handleFileUpload} title="Attach file" {disabled}>📎</button>
+    {/if}
+
+    <div
+      bind:this={contentEditableDiv}
+      contenteditable={!disabled}
+      class="flex-1 bg-transparent border-none outline-none {compact ? 'min-h-[20px]' : 'min-h-[24px]'} leading-6 message-content"
+      class:text-error={isOverLimit}
+      class:opacity-50={disabled}
+      class:pointer-events-none={disabled}
+      data-placeholder={placeholder}
+      style="max-height: {compact ? '120px' : '200px'}; overflow-y: auto;"
+      oninput={handleInput}
+      onkeydown={handleKeyDown}
+      onclick={updateCursorPosition}
+      onkeyup={updateCursorPosition}
+      onpaste={(e) => {
+        e.preventDefault()
+        const text = e.clipboardData?.getData('text/plain') || ''
+        const selection = window.getSelection()
+        if (selection && selection.rangeCount > 0) {
+          const range = selection.getRangeAt(0)
+          range.deleteContents()
+          range.insertNode(document.createTextNode(text))
+          range.collapse(false)
+        }
+        handleInput()
+      }}
+      aria-label={placeholder}
+      role="textbox"
+      aria-multiline="true"
+      tabindex="0"
+    ></div>
+
+    {#if showPrioritySelector}
+      <select bind:value={selectedPriority} class="select select-sm {selectedPriority === 'urgent' ? 'select-error' : selectedPriority === 'high' ? 'select-warning' : 'select-ghost'} flex-shrink-0 max-w-[100px]" {disabled}>
+        <option value="normal">Normal</option>
+        <option value="high">High</option>
+        <option value="urgent">Urgent</option>
+      </select>
+    {/if}
+
+    <button type="button" class="btn btn-primary {compact ? 'btn-xs' : 'btn-sm'} btn-circle flex-shrink-0" onclick={sendMessage} disabled={disabled || (!inputText.trim() && attachments.length === 0) || isOverLimit} title="Send message (Enter)">
+      ➤
+    </button>
+  </div>
+
+  <div class="text-xs text-base-content/50">
+    <span class="font-medium">Enter</span> to send •
+    <span class="font-medium">Shift + Enter</span> for new line •
+    <span class="font-medium">@ $ # +</span> to mention
+  </div>
+</div>
+
+{#if onsearchmentions}
+  <MentionAutocomplete
+    query={mentionQuery}
+    position={autocompletePosition}
+    visible={showMentionAutocomplete}
+    onsearch={onsearchmentions}
+    onselect={handleMentionSelect}
+    onclose={() => (showMentionAutocomplete = false)}
+  />
+{/if}
+
+<style>
+  div[contenteditable='true'] { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }
+  div[contenteditable='true']:empty:before { content: attr(data-placeholder); color: oklch(var(--bc) / 0.5); pointer-events: none; }
+  div[contenteditable='true']:focus:empty:before { content: attr(data-placeholder); color: oklch(var(--bc) / 0.3); }
+  div[contenteditable='true']::-webkit-scrollbar { width: 6px; }
+  div[contenteditable='true']::-webkit-scrollbar-track { background: transparent; }
+  div[contenteditable='true']::-webkit-scrollbar-thumb { background-color: oklch(var(--bc) / 0.2); border-radius: 3px; }
+</style>