@joewinke/jatui 0.1.22 → 0.1.24

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

@@ -1,452 +0,0 @@
-<!--
-  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} />
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<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-[color-mix(in_oklch,#180042_55%,transparent)] 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>