File size: 35,122 Bytes

7312c42

import { useEffect, useMemo, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
import { AudioLines, Clapperboard, ImageIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { CUSTOM_NODE_CLASS } from '@/lib/constants'
import { useT } from '@/lib/i18n'
import { cn } from '@/lib/utils'

export type PromptReferenceType = 'image' | 'audio' | 'video'

export interface PromptReferenceResource {
  id: string
  type: PromptReferenceType
  index: number
  label: string
  detail: string
  token: string
  color: string
  thumbnailUrl?: string
}

interface PromptContentEditorProps {
  value: string
  onChange: (value: string) => void
  ariaLabel: string
  placeholder: string
  resources?: PromptReferenceResource[]
  mentionsEnabled?: boolean
  interactivePlaceholder?: boolean
  highlightSystemVariables?: boolean
  highlightPromptSemantics?: boolean
  highlightPipes?: boolean
  className?: string
  testId?: string
}

interface MentionState {
  start: number
  end: number
  query: string
  left: number
  top: number
  activeIndex: number
}

const H3_LANGUAGE_LABELS = new Set([
  'arabic',
  'chinese',
  'english',
  'french',
  'german',
  'hindi',
  'indonesian',
  'italian',
  'japanese',
  'korean',
  'malay',
  'portuguese',
  'russian',
  'spanish',
  'thai',
  'turkish',
  'vietnamese',
])
const TOKEN_PATTERN = /<[^<>\n]*>|@(?:图片|音频|视频|Picture|Image|Audio|Video)\s*\d+|\{[^{}\n]*\}|\[[^\[\]\n]*\]|\(S\d+(?:\s*,\s*S?\d+)*\)|(?:subject_definitions|summary|retention_analysis|detailed_description|overall_soundscape|non_diegetic_music)\s*:\s*|(?:主体定义|摘要|留存分析|详细描述|整体声景|非叙事性音乐)\s*[:：]\s*|[|｜]/gi
const PROMPT_CHIP_CLASS = 'prompt-reference-chip inline-flex h-[1.6em] max-w-full items-center gap-1 rounded-md border px-1.5 py-0.5 mx-1 align-middle font-semibold leading-none shadow-sm'
const EMPHASIS_CLASS = 'font-semibold text-muted-foreground'

function isH3PromptSemantic(token: string): boolean {
  if (/^<Subject\s+\d+>$/i.test(token)) return true
  if (/^<\/?d>$/i.test(token) || /^<(?:scenetrans|cutoff)>$/i.test(token)) return true
  if (/^\[Shot\s+\d+\]$/i.test(token) || /^\(S\d+(?:\s*,\s*S?\d+)*\)$/i.test(token)) return true
  return isH3LanguageSemantic(token)
}

function isH3LanguageSemantic(token: string): boolean {
  const language = token.match(/^\[([A-Za-z]+)\]$/)?.[1].toLowerCase()
  return language !== undefined && H3_LANGUAGE_LABELS.has(language)
}

function isH3ThemeSemantic(token: string): boolean {
  return /^\[Shot\s+\d+\]$/i.test(token)
}

function isH3SectionHeading(token: string): boolean {
  return /^(?:(?:subject_definitions|summary|retention_analysis|detailed_description|overall_soundscape|non_diegetic_music)\s*:|(?:主体定义|摘要|留存分析|详细描述|整体声景|非叙事性音乐)\s*[:：])\s*$/i.test(token)
}

function referenceColor(reference: { type: PromptReferenceType }, resource?: PromptReferenceResource): string {
  if (resource?.color) return resource.color
  if (reference.type === 'audio') return 'var(--multitrack-audio-waveform)'
  if (reference.type === 'video') return 'var(--multitrack-video-waveform)'
  return 'var(--multitrack-task-bg)'
}

function applyChipColor(chip: HTMLElement, color: string) {
  chip.style.color = color
  chip.style.borderColor = color
  chip.style.backgroundColor = `color-mix(in srgb, ${color} 10%, transparent)`
}

function replacementReferenceToken(currentToken: string, resource: PromptReferenceResource): string {
  const type = resource.type === 'image' ? 'Picture' : resource.type === 'audio' ? 'Audio' : 'Video'
  if (/^<(?:Picture|Image|Audio|Video)\s+\d+>$/i.test(currentToken)) {
    return `<${type} ${resource.index}>`
  }
  if (/^@(?:Picture|Image|Audio|Video)\s*\d+$/i.test(currentToken)) {
    return `@${type} ${resource.index}`
  }
  return resource.token
}

function normalizedReference(token: string): { type: PromptReferenceType; index: number } | null {
  const match = token.match(/^@?(图片|音频|视频|Picture|Image|Audio|Video)\s*(\d+)>?$/i)
    ?? token.match(/^<(Picture|Audio|Video)\s+(\d+)>$/i)
  if (!match) return null
  const rawType = match[1].toLowerCase()
  const type: PromptReferenceType = rawType === '图片' || rawType === 'picture' || rawType === 'image'
    ? 'image'
    : rawType === '音频' || rawType === 'audio'
      ? 'audio'
      : 'video'
  return { type, index: Number(match[2]) }
}

function serializePromptContent(container: ParentNode): string {
  let value = ''
  const append = (text: string) => {
    value += text.replaceAll('\u200B', '')
  }
  const visit = (node: Node) => {
    if (node.nodeType === Node.TEXT_NODE) {
      append(node.textContent ?? '')
      return
    }
    if (!(node instanceof HTMLElement)) return
    const atomicToken = node.dataset.promptReferenceToken
      ?? node.dataset.promptSemanticToken
    if (atomicToken !== undefined) {
      append(atomicToken)
      return
    }
    if (node.dataset.promptEmphasisText !== undefined) {
      append(node.textContent ?? '')
      return
    }
    if (node.tagName === 'BR') {
      append('\n')
      return
    }
    const block = node.tagName === 'DIV' || node.tagName === 'P'
    if (block && value && !value.endsWith('\n')) append('\n')
    node.childNodes.forEach(visit)
  }
  container.childNodes.forEach(visit)
  return value
}

function serializeEditor(editor: HTMLElement): string {
  return serializePromptContent(editor)
}

function normalizeSerializedEditorValue(value: string): string {
  return /^\n*$/.test(value) ? '' : value
}

function caretOffset(editor: HTMLElement): number {
  const selection = window.getSelection()
  if (!selection?.rangeCount) return serializeEditor(editor).length
  const range = selection.getRangeAt(0)
  if (!editor.contains(range.endContainer)) return serializeEditor(editor).length
  const before = range.cloneRange()
  before.selectNodeContents(editor)
  before.setEnd(range.endContainer, range.endOffset)
  return serializePromptContent(before.cloneContents()).length
}

function valueDecorationKey(
  value: string,
  highlightSystemVariables: boolean,
  highlightPromptSemantics: boolean,
  highlightPipes: boolean,
): string {
  const decorations: string[] = []
  TOKEN_PATTERN.lastIndex = 0
  for (const match of value.matchAll(TOKEN_PATTERN)) {
    const token = match[0]
    const reference = normalizedReference(token)
    if (reference && !highlightSystemVariables) {
      decorations.push(`reference:${reference.type}:${reference.index}`)
    } else if (highlightPromptSemantics && isH3PromptSemantic(token)) {
      decorations.push(`semantic:${token.toLowerCase()}`)
    } else if (highlightPromptSemantics && isH3SectionHeading(token)) {
      decorations.push(`emphasis:${token.toLowerCase()}`)
    } else if (highlightSystemVariables && (token.startsWith('{') || token.startsWith('<'))) {
      decorations.push('system')
    } else if (highlightPipes && (token === '|' || token === '｜')) {
      decorations.push('pipe')
    }
  }
  return decorations.join('|')
}

function editorDecorationKey(editor: HTMLElement): string {
  return Array.from(editor.querySelectorAll<HTMLElement>(
    '[data-prompt-reference-token], [data-prompt-semantic-token], [data-prompt-emphasis-text], [data-system-prompt-variable], [data-pipe]',
  )).map((element) => {
    const token = element.dataset.promptReferenceToken
    if (token !== undefined) {
      const reference = normalizedReference(token)
      return reference ? `reference:${reference.type}:${reference.index}` : 'reference:unknown'
    }
    if (element.dataset.systemPromptVariable !== undefined) return 'system'
    if (element.dataset.promptSemanticToken !== undefined) {
      return `semantic:${element.dataset.promptSemanticToken.toLowerCase()}`
    }
    if (element.dataset.promptEmphasisText !== undefined) {
      return `emphasis:${element.dataset.promptEmphasisText.toLowerCase()}`
    }
    return 'pipe'
  }).join('|')
}

function setCaretOffset(editor: HTMLElement, targetOffset: number) {
  const selection = window.getSelection()
  if (!selection) return
  let offset = Math.max(0, targetOffset)
  for (const node of editor.childNodes) {
    const element = node instanceof HTMLElement ? node : null
    const decoratedToken = element?.dataset.promptReferenceToken
      ?? element?.dataset.promptSemanticToken
      ?? element?.dataset.promptEmphasisText
    const length = decoratedToken !== undefined
      ? decoratedToken.length
      : element?.tagName === 'BR'
        ? 1
        : node.textContent?.replaceAll('\u200B', '').length ?? 0
    if (offset <= length) {
      const range = document.createRange()
      if (decoratedToken !== undefined) {
        offset === 0 ? range.setStartBefore(node) : range.setStartAfter(node)
      } else if (element?.tagName === 'BR') {
        offset === 0 ? range.setStartBefore(node) : range.setStartAfter(node)
      } else if (node.nodeType === Node.TEXT_NODE) {
        range.setStart(node, Math.min(offset, node.textContent?.length ?? 0))
      } else {
        const textNode = document.createTreeWalker(node, NodeFilter.SHOW_TEXT).nextNode()
        if (textNode) range.setStart(textNode, Math.min(offset, textNode.textContent?.length ?? 0))
        else range.setStartAfter(node)
      }
      range.collapse(true)
      selection.removeAllRanges()
      selection.addRange(range)
      return
    }
    offset -= length
  }
  const range = document.createRange()
  range.selectNodeContents(editor)
  range.collapse(false)
  selection.removeAllRanges()
  selection.addRange(range)
}

function referenceDeletionRange(
  value: string,
  offset: number,
  key: 'Backspace' | 'Delete',
): { start: number; end: number } | null {
  TOKEN_PATTERN.lastIndex = 0
  for (const match of value.matchAll(TOKEN_PATTERN)) {
    if (!normalizedReference(match[0])) continue
    const start = match.index ?? 0
    const end = start + match[0].length
    if (key === 'Backspace' && offset > start && offset <= end) return { start, end }
    if (key === 'Delete' && offset >= start && offset < end) return { start, end }
  }
  return null
}

function appendText(container: HTMLElement | DocumentFragment, text: string) {
  text.split('\n').forEach((part, index) => {
    if (index > 0) container.append(document.createElement('br'))
    if (part) container.append(document.createTextNode(part))
  })
}

function appendDialogueText(container: HTMLElement, text: string) {
  text.split('\n').forEach((part, index) => {
    if (index > 0) container.append(document.createElement('br'))
    if (!part) return
    const dialogue = document.createElement('span')
    dialogue.dataset.promptDialogueContent = 'true'
    dialogue.className = EMPHASIS_CLASS
    dialogue.textContent = part
    container.append(dialogue)
  })
}

function insertPlainTextAtSelection(editor: HTMLElement, text: string): boolean {
  const selection = window.getSelection()
  if (!selection?.rangeCount) return false
  const range = selection.getRangeAt(0)
  if (!editor.contains(range.commonAncestorContainer)) return false
  range.deleteContents()
  const fragment = document.createDocumentFragment()
  appendText(fragment, text)
  const caretMarker = document.createTextNode('\u200B')
  fragment.append(caretMarker)
  range.insertNode(fragment)
  const caret = document.createRange()
  caret.setStart(caretMarker, caretMarker.textContent?.length ?? 0)
  caret.collapse(true)
  selection.removeAllRanges()
  selection.addRange(caret)
  return true
}

function selectedPromptText(editor: HTMLElement): string | null {
  const selection = window.getSelection()
  if (!selection?.rangeCount || selection.isCollapsed) return null
  const range = selection.getRangeAt(0)
  if (!editor.contains(range.commonAncestorContainer)) return null
  return serializePromptContent(range.cloneContents())
}

function appendReferenceChip(
  container: HTMLElement,
  token: string,
  resource: PromptReferenceResource | undefined,
) {
  const parsed = normalizedReference(token)
  const chip = document.createElement('span')
  chip.contentEditable = 'false'
  chip.dataset.promptReferenceToken = token
  chip.dataset.promptReferenceType = parsed?.type ?? ''
  chip.className = `${PROMPT_CHIP_CLASS} cursor-pointer`
  applyChipColor(chip, parsed ? referenceColor(parsed, resource) : 'var(--muted-foreground)')

  if (resource?.type === 'image' && resource.thumbnailUrl) {
    const image = document.createElement('img')
    image.src = resource.thumbnailUrl
    image.alt = ''
    image.draggable = false
    image.className = 'h-4 w-4 shrink-0 rounded-sm object-cover align-middle'
    chip.append(image)
  } else {
    const icon = document.createElement('span')
    icon.className = 'prompt-reference-icon inline-flex h-4 w-4 shrink-0 items-center justify-center'
    icon.dataset.referenceIcon = resource?.type ?? parsed?.type ?? 'image'
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
    svg.setAttribute('viewBox', '0 0 24 24')
    svg.setAttribute('fill', 'none')
    svg.setAttribute('stroke', 'currentColor')
    svg.setAttribute('stroke-width', '2')
    svg.setAttribute('stroke-linecap', 'round')
    svg.setAttribute('stroke-linejoin', 'round')
    svg.setAttribute('aria-hidden', 'true')
    svg.classList.add('lucide', 'h-4', 'w-4')
    const type = resource?.type ?? parsed?.type ?? 'image'
    const paths = type === 'audio'
      ? ['M2 10v3', 'M6 6v11', 'M10 3v18', 'M14 8v7', 'M18 5v13', 'M22 10v3']
      : type === 'video'
        ? ['m16 13 5.223-3.482a.5.5 0 0 1 .777.416v8.132a.5.5 0 0 1-.777.416L16 15', 'M2 6h14v12H2z', 'm2 6 3-4', 'm7 6 3-4', 'm12 6 3-4']
        : ['M14.5 4h-9A2.5 2.5 0 0 0 3 6.5v11A2.5 2.5 0 0 0 5.5 20h13a2.5 2.5 0 0 0 2.5-2.5v-8', 'm3 16 5-5c.928-.893 2.072-.893 3 0l4 4', 'm14 14 1-1c.928-.893 2.072-.893 3 0l3 3', 'M14 7h.01']
    paths.forEach((pathData) => {
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
      path.setAttribute('d', pathData)
      svg.append(path)
    })
    icon.append(svg)
    chip.append(icon)
  }

  const label = document.createElement('span')
  label.className = 'inline-flex h-full items-center leading-none'
  label.textContent = token
  chip.append(label)
  chip.title = resource?.detail ?? token
  container.append(chip)
}

function appendSemanticIcon(chip: HTMLElement, type: 'subject' | 'dialogue') {
  const icon = document.createElement('span')
  icon.className = 'inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center'
  icon.dataset.semanticIcon = type
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  svg.setAttribute('viewBox', '0 0 24 24')
  svg.setAttribute('fill', 'none')
  svg.setAttribute('stroke', 'currentColor')
  svg.setAttribute('stroke-width', '2')
  svg.setAttribute('stroke-linecap', 'round')
  svg.setAttribute('stroke-linejoin', 'round')
  svg.setAttribute('aria-hidden', 'true')
  svg.classList.add('lucide', 'h-3.5', 'w-3.5')
  const paths = type === 'subject'
    ? ['M18 21a8 8 0 0 0-16 0', 'M10 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8', 'M19 8v6', 'M22 11h-6']
    : ['M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z']
  paths.forEach((pathData) => {
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
    path.setAttribute('d', pathData)
    svg.append(path)
  })
  icon.append(svg)
  chip.append(icon)
}

function appendSemanticChip(container: HTMLElement, token: string) {
  const chip = document.createElement('span')
  chip.contentEditable = 'false'
  chip.dataset.promptSemanticToken = token
  chip.className = PROMPT_CHIP_CLASS
  const subject = /^<Subject\s+\d+>$/i.test(token)
  const dialogue = /^<\/?d>$/i.test(token)
  const usesDefaultChipSurface = isH3ThemeSemantic(token) || isH3LanguageSemantic(token)
  const color = subject || isH3ThemeSemantic(token)
    ? 'var(--highlight)'
    : dialogue
      ? 'var(--prompt-dialogue)'
      : 'var(--prompt-semantic)'
  if (usesDefaultChipSurface) {
    chip.classList.add('border-border', 'bg-background', 'text-foreground')
  } else {
    applyChipColor(chip, color)
  }
  if (subject) appendSemanticIcon(chip, 'subject')
  if (dialogue) appendSemanticIcon(chip, 'dialogue')
  const label = document.createElement('span')
  label.className = 'inline-flex h-full items-center leading-none'
  label.textContent = token
  chip.append(label)
  container.append(chip)
}

function appendEmphasisText(container: HTMLElement, token: string) {
  const emphasis = document.createElement('span')
  emphasis.dataset.promptEmphasisText = token
  emphasis.className = EMPHASIS_CLASS
  emphasis.textContent = token
  container.append(emphasis)
}

function renderValue(
  editor: HTMLElement,
  value: string,
  resources: PromptReferenceResource[],
  highlightSystemVariables: boolean,
  highlightPromptSemantics: boolean,
  highlightPipes: boolean,
) {
  editor.textContent = ''
  let cursor = 0
  let inDialogue = false
  TOKEN_PATTERN.lastIndex = 0
  for (const match of value.matchAll(TOKEN_PATTERN)) {
    const index = match.index ?? 0
    const precedingText = value.slice(cursor, index)
    if (inDialogue) appendDialogueText(editor, precedingText)
    else appendText(editor, precedingText)
    const token = match[0]
    const opensDialogue = /^<d>$/i.test(token)
    const closesDialogue = /^<\/d>$/i.test(token)
    if (closesDialogue) inDialogue = false
    const reference = normalizedReference(token)
    if (reference && !highlightSystemVariables) {
      const resource = resources.find((item) => item.type === reference.type && item.index === reference.index)
      appendReferenceChip(editor, token, resource)
    } else if (highlightPromptSemantics && isH3PromptSemantic(token)) {
      appendSemanticChip(editor, token)
    } else if (highlightPromptSemantics && isH3SectionHeading(token)) {
      appendEmphasisText(editor, token)
    } else if (highlightSystemVariables && (token.startsWith('{') || token.startsWith('<'))) {
      const variable = document.createElement('span')
      variable.dataset.systemPromptVariable = 'true'
      variable.className = 'text-highlight'
      variable.textContent = token
      editor.append(variable)
    } else if (highlightPipes && (token === '|' || token === '｜')) {
      const pipe = document.createElement('span')
      pipe.dataset.pipe = 'true'
      pipe.className = 'text-highlight'
      pipe.textContent = '|'
      editor.append(pipe)
    } else if (inDialogue) {
      appendDialogueText(editor, token)
    } else {
      appendText(editor, token)
    }
    if (highlightPromptSemantics && opensDialogue) inDialogue = true
    cursor = index + token.length
  }
  const trailingText = value.slice(cursor)
  if (inDialogue) appendDialogueText(editor, trailingText)
  else appendText(editor, trailingText)
}

function ReferenceIcon({ type }: Readonly<{ type: PromptReferenceType }>) {
  if (type === 'audio') return <AudioLines className="h-4 w-4" />
  if (type === 'video') return <Clapperboard className="h-4 w-4" />
  return <ImageIcon className="h-4 w-4" />
}

export function PromptContentEditor({
  value,
  onChange,
  ariaLabel,
  placeholder,
  resources = [],
  mentionsEnabled = false,
  interactivePlaceholder = false,
  highlightSystemVariables = false,
  highlightPromptSemantics = false,
  highlightPipes = false,
  className,
  testId,
}: Readonly<PromptContentEditorProps>) {
  const t = useT()
  const wrapperRef = useRef<HTMLDivElement>(null)
  const editorRef = useRef<HTMLDivElement>(null)
  const composingRef = useRef(false)
  const lastRenderKeyRef = useRef('')
  const [mention, setMention] = useState<MentionState | null>(null)
  const [editorEmpty, setEditorEmpty] = useState(value.length === 0)
  const filteredResources = useMemo(() => {
    if (!mention) return resources
    const query = mention.query.toLocaleLowerCase()
    return resources.filter((resource) => (
      !query || `${resource.label} ${resource.detail}`.toLocaleLowerCase().includes(query)
    ))
  }, [mention, resources])
  const renderKey = useMemo(() => JSON.stringify({
    value,
    highlightSystemVariables,
    highlightPromptSemantics,
    highlightPipes,
    resources: resources.map((resource) => [
      resource.id,
      resource.index,
      resource.label,
      resource.detail,
      resource.token,
      resource.color,
      resource.thumbnailUrl,
    ]),
  }), [highlightPipes, highlightPromptSemantics, highlightSystemVariables, resources, value])

  useEffect(() => {
    setEditorEmpty(value.length === 0)
    const editor = editorRef.current
    if (!editor || lastRenderKeyRef.current === renderKey) return
    const focused = document.activeElement === editor
    const offset = focused ? caretOffset(editor) : 0
    renderValue(editor, value, resources, highlightSystemVariables, highlightPromptSemantics, highlightPipes)
    if (focused) setCaretOffset(editor, Math.min(offset, value.length))
    lastRenderKeyRef.current = renderKey
  }, [highlightPipes, highlightPromptSemantics, highlightSystemVariables, renderKey, resources, value])

  function syncMention(valueText: string, offset: number) {
    if (!mentionsEnabled) {
      setMention(null)
      return
    }
    const beforeCaret = valueText.slice(0, offset)
    const match = beforeCaret.match(/@([^\s@|<>]*)$/)
    if (!match) {
      setMention(null)
      return
    }
    if (normalizedReference(match[0])) {
      setMention(null)
      return
    }
    const wrapper = wrapperRef.current
    const selection = window.getSelection()
    const range = selection?.rangeCount ? selection.getRangeAt(0) : null
    const caretRect = range?.getBoundingClientRect?.()
    const wrapperRect = wrapper?.getBoundingClientRect()
    const caretLeft = caretRect?.left ?? wrapperRect?.left ?? 0
    const caretTop = caretRect?.top ?? wrapperRect?.top ?? 0
    const caretBottom = caretRect?.bottom ?? wrapperRect?.bottom ?? 0
    const left = Math.min(Math.max(8, caretLeft), Math.max(8, window.innerWidth - 264))
    const top = caretBottom + 214 <= window.innerHeight
      ? caretBottom + 6
      : Math.max(8, caretTop - 214)
    const start = offset - match[0].length
    setMention((current) => ({
      start,
      end: offset,
      query: match[1],
      left,
      top,
      activeIndex: current?.start === start ? current.activeIndex : 0,
    }))
  }

  function openPlaceholderMention(anchor: HTMLElement) {
    if (!mentionsEnabled || !editorEmpty) return
    const rect = anchor.getBoundingClientRect()
    const left = Math.min(Math.max(8, rect.left), Math.max(8, window.innerWidth - 264))
    const top = rect.bottom + 214 <= window.innerHeight
      ? rect.bottom + 6
      : Math.max(8, rect.top - 214)
    setMention({ start: 0, end: 0, query: '', left, top, activeIndex: 0 })
  }

  function openReferenceMention(chip: HTMLElement) {
    const editor = editorRef.current
    const token = chip.dataset.promptReferenceToken
    if (!mentionsEnabled || !editor || token === undefined) return
    const beforeChip = document.createRange()
    beforeChip.selectNodeContents(editor)
    beforeChip.setEndBefore(chip)
    const start = serializePromptContent(beforeChip.cloneContents()).length
    const rect = chip.getBoundingClientRect()
    const left = Math.min(Math.max(8, rect.left), Math.max(8, window.innerWidth - 264))
    const top = rect.bottom + 214 <= window.innerHeight
      ? rect.bottom + 6
      : Math.max(8, rect.top - 214)
    setMention({ start, end: start + token.length, query: '', left, top, activeIndex: 0 })
  }

  function commitEditorChange() {
    const editor = editorRef.current
    if (!editor) return
    const nextValue = normalizeSerializedEditorValue(serializeEditor(editor))
    const offset = nextValue.length === 0 ? 0 : caretOffset(editor)
    const needsDecorationRender = nextValue.length === 0 || editorDecorationKey(editor) !== valueDecorationKey(
      nextValue,
      highlightSystemVariables,
      highlightPromptSemantics,
      highlightPipes,
    )
    if (needsDecorationRender) {
      const scrollTop = editor.scrollTop
      const scrollLeft = editor.scrollLeft
      renderValue(editor, nextValue, resources, highlightSystemVariables, highlightPromptSemantics, highlightPipes)
      setCaretOffset(editor, offset)
      editor.scrollTop = scrollTop
      editor.scrollLeft = scrollLeft
    }
    setEditorEmpty(nextValue.length === 0)
    lastRenderKeyRef.current = JSON.stringify({
      value: nextValue,
      highlightSystemVariables,
      highlightPromptSemantics,
      highlightPipes,
      resources: resources.map((resource) => [
        resource.id,
        resource.index,
        resource.label,
        resource.detail,
        resource.token,
        resource.color,
        resource.thumbnailUrl,
      ]),
    })
    onChange(nextValue)
    syncMention(nextValue, offset)
  }

  function chooseResource(resource: PromptReferenceResource) {
    const editor = editorRef.current
    if (!editor || !mention) return
    const currentValue = serializeEditor(editor)
    const currentToken = currentValue.slice(mention.start, mention.end)
    const replacementToken = replacementReferenceToken(currentToken, resource)
    const nextValue = `${currentValue.slice(0, mention.start)}${replacementToken}${currentValue.slice(mention.end)}`
    renderValue(editor, nextValue, resources, highlightSystemVariables, highlightPromptSemantics, highlightPipes)
    setEditorEmpty(false)
    setCaretOffset(editor, mention.start + replacementToken.length)
    lastRenderKeyRef.current = ''
    onChange(nextValue)
    setMention(null)
    editor.focus()
  }

  function deleteAdjacentReference(key: 'Backspace' | 'Delete'): boolean {
    const editor = editorRef.current
    if (!editor) return false
    const currentValue = serializeEditor(editor)
    const deletion = referenceDeletionRange(currentValue, caretOffset(editor), key)
    if (!deletion) return false
    const nextValue = `${currentValue.slice(0, deletion.start)}${currentValue.slice(deletion.end)}`
    renderValue(editor, nextValue, resources, highlightSystemVariables, highlightPromptSemantics, highlightPipes)
    setEditorEmpty(nextValue.length === 0)
    setCaretOffset(editor, deletion.start)
    lastRenderKeyRef.current = ''
    setMention(null)
    onChange(nextValue)
    return true
  }

  return (
    <div
      ref={wrapperRef}
      className="relative h-full min-h-0 max-h-full overflow-hidden [contain:size_layout_paint]"
    >
      <div
        ref={editorRef}
        role="textbox"
        aria-label={ariaLabel}
        aria-multiline="true"
        data-testid={testId}
        data-placeholder={placeholder}
        contentEditable
        suppressContentEditableWarning
        className={cn(
          'prompt-content-editor h-full min-h-0 max-h-full overflow-auto whitespace-pre-wrap wrap-break-word rounded-md px-3 py-2 text-[10px] leading-normal text-foreground caret-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring',
          !interactivePlaceholder && 'empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]',
          className,
        )}
        onInput={() => {
          if (!composingRef.current) commitEditorChange()
        }}
        onCompositionStart={() => {
          composingRef.current = true
        }}
        onCompositionEnd={() => {
          composingRef.current = false
          commitEditorChange()
        }}
        onPaste={(event) => {
          event.preventDefault()
          event.stopPropagation()
          event.nativeEvent.stopImmediatePropagation?.()
          const editor = editorRef.current
          const text = event.clipboardData.getData('text/plain')
          if (editor && insertPlainTextAtSelection(editor, text)) commitEditorChange()
        }}
        onCopy={(event) => {
          event.stopPropagation()
          const editor = editorRef.current
          const text = editor ? selectedPromptText(editor) : null
          if (text === null) return
          event.preventDefault()
          event.clipboardData.setData('text/plain', text)
        }}
        onKeyDown={(event) => {
          if ((event.key === 'Backspace' || event.key === 'Delete') && deleteAdjacentReference(event.key)) {
            event.preventDefault()
            return
          }
          if (mention) {
            if (event.key === 'Escape') {
              event.preventDefault()
              setMention(null)
            } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
              event.preventDefault()
              setMention((current) => current && filteredResources.length > 0 ? {
                ...current,
                activeIndex: (
                  current.activeIndex + (event.key === 'ArrowDown' ? 1 : -1) + filteredResources.length
                ) % filteredResources.length,
              } : current)
            } else if (event.key === 'Enter' && filteredResources.length > 0) {
              event.preventDefault()
              chooseResource(filteredResources[Math.min(mention.activeIndex, filteredResources.length - 1)])
              return
            }
          }
          if (
            event.key === 'Enter'
            && !composingRef.current
            && !event.nativeEvent.isComposing
          ) {
            event.preventDefault()
            const editor = editorRef.current
            if (editor && insertPlainTextAtSelection(editor, '\n')) commitEditorChange()
            return
          }
          if ((event.ctrlKey || event.metaKey) && ['a', 'c', 'v', 'x'].includes(event.key.toLowerCase())) {
            event.stopPropagation()
          }
        }}
        onClick={(event) => {
          const target = event.target instanceof Element ? event.target : null
          const referenceChip = target?.closest<HTMLElement>('[data-prompt-reference-token]')
          if (referenceChip && editorRef.current?.contains(referenceChip)) {
            openReferenceMention(referenceChip)
          } else {
            setMention(null)
          }
        }}
        onBlur={(event) => {
          if (wrapperRef.current?.contains(event.relatedTarget as Node | null)) return
          setMention(null)
        }}
      />

      {interactivePlaceholder && editorEmpty && (() => {
        const triggerIndex = placeholder.indexOf('@')
        const beforeTrigger = triggerIndex >= 0 ? placeholder.slice(0, triggerIndex) : placeholder
        const afterTrigger = triggerIndex >= 0 ? placeholder.slice(triggerIndex + 1) : ''
        return (
          <div className="pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap wrap-break-word px-3 py-2 text-[10px] leading-normal text-muted-foreground">
            {beforeTrigger}
            {triggerIndex >= 0 && (
              <Button
                type="button"
                variant="ghost"
                aria-label={t('multitrack.openReferenceResources')}
                className={cn(PROMPT_CHIP_CLASS, 'pointer-events-auto min-w-0 border-border bg-background text-highlight text-[10px]')}
                onPointerDown={(event) => event.preventDefault()}
                onClick={(event) => openPlaceholderMention(event.currentTarget)}
              >
                @
              </Button>
            )}
            {afterTrigger}
          </div>
        )
      })()}

      {mention && createPortal((
        <div className={CUSTOM_NODE_CLASS}>
          <div
            role="listbox"
            aria-label={t('multitrack.referenceResources')}
            className={cn(
              'fixed z-50 flex w-64 flex-col overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
              filteredResources.length === 0 ? 'h-64' : 'max-h-52',
            )}
            style={{ left: mention.left, top: mention.top }}
          >
            <div className="shrink-0 px-2 py-1.5 text-[10px] font-semibold text-muted-foreground">
              {t('multitrack.referenceResources')}
            </div>
            {filteredResources.length === 0 ? (
              <div
                data-testid="reference-resources-empty"
                className="flex min-h-0 flex-1 flex-col items-center justify-center gap-4 px-5 pb-7 text-center text-muted-foreground"
              >
                <div aria-hidden="true" className="relative h-14 w-20 opacity-60">
                  <span className="absolute left-8 -top-2 flex h-10 w-10 -rotate-12 items-center justify-center rounded-md border border-border bg-muted shadow-sm">
                    <ImageIcon className="h-5 w-5" />
                  </span>
                  <span className="absolute -left-2 top-1 flex h-10 w-10 rotate-3 items-center justify-center rounded-md border border-border bg-muted shadow-sm">
                    <AudioLines className="h-5 w-5" />
                  </span>
                  <span className="absolute left-6 top-4 flex h-10 w-10 rotate-6 items-center justify-center rounded-md border border-border bg-muted shadow-sm">
                    <Clapperboard className="h-5 w-5" />
                  </span>
                </div>
                <span className=" text-[10px] leading-relaxed">
                  {t('multitrack.referenceResourcesEmpty')}
                </span>
              </div>
            ) : filteredResources.map((resource, index) => (
              <Button
                key={resource.id}
                type="button"
                variant="ghost"
                role="option"
                aria-selected={index === mention.activeIndex}
                className={cn(
                  'h-auto w-full justify-start gap-2 px-2 py-1.5 text-left',
                  index === mention.activeIndex && 'bg-accent text-accent-foreground',
                )}
                onPointerDown={(event) => event.preventDefault()}
                onPointerMove={() => setMention((current) => current ? { ...current, activeIndex: index } : current)}
                onClick={() => chooseResource(resource)}
              >
                {resource.type === 'image' && resource.thumbnailUrl ? (
                  <img
                    src={resource.thumbnailUrl}
                    alt=""
                    className="h-8 w-8 shrink-0 rounded-sm object-cover"
                  />
                ) : (
                  <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-sm bg-muted">
                    <ReferenceIcon type={resource.type} />
                  </span>
                )}
                <span className="min-w-0">
                  <span className="block truncate text-[11px] font-semibold" style={{ color: resource.color }}>
                    {resource.label}
                  </span>
                  <span className="block truncate text-[9px] text-muted-foreground">{resource.detail}</span>
                </span>
              </Button>
            ))}
          </div>
        </div>
      ), document.body)}
    </div>
  )
}