@slexn/codecenter-ui 1.0.0

package/src/components/ui/prompt-input/PromptInput.vue

@@ -0,0 +1,1094 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
+import {
+  BotIcon,
+  BrainCircuitIcon,
+  FileIcon,
+  PaperclipIcon,
+  PlugIcon,
+  PlusIcon,
+  SendIcon,
+  SparklesIcon,
+  XIcon,
+} from "@lucide/vue"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ModelSelector, type ModelSelectorMode } from "@/components/ui/model-selector"
+import { Tag } from "@/components/ui/tag"
+import { cn } from "@/lib/utils"
+import type {
+  PromptInputAddAction,
+  PromptInputAttachment,
+  PromptInputCommand,
+  PromptInputCommandData,
+  PromptInputCommandPayload,
+  PromptInputCommandRemovePayload,
+  PromptInputModel,
+  PromptInputSubmitPayload,
+} from "./types"
+
+interface PromptInputProps {
+  addActions?: PromptInputAddAction[]
+  addLabel?: string
+  allowEmpty?: boolean
+  attachmentAccept?: string
+  attachments?: PromptInputAttachment[]
+  class?: HTMLAttributes["class"]
+  clearAttachmentsOnSubmit?: boolean
+  clearCommandPayloadOnSubmit?: boolean
+  commandEmptyText?: string
+  commandLabel?: string
+  commandMenuClass?: HTMLAttributes["class"]
+  commandPayload?: PromptInputCommandData
+  commandTagRemoveLabel?: string
+  commandTrigger?: string
+  commands?: PromptInputCommand[]
+  disabled?: boolean
+  id?: string
+  maxRows?: number | string
+  model?: string
+  modelDialogClass?: HTMLAttributes["class"]
+  modelEmptyText?: string
+  modelLabel?: string
+  modelMenuClass?: HTMLAttributes["class"]
+  modelModalThreshold?: number
+  modelSearchPlaceholder?: string
+  modelSelectorMode?: ModelSelectorMode
+  modelValue?: string
+  models?: PromptInputModel[]
+  multipleAttachments?: boolean
+  placeholder?: string
+  removeAttachmentLabel?: string
+  rows?: number | string
+  showAdd?: boolean
+  showCommands?: boolean
+  showCommandTags?: boolean
+  showModel?: boolean
+  showSubmit?: boolean
+  submitLabel?: string
+  submitOnEnter?: boolean
+  textareaClass?: HTMLAttributes["class"]
+  textareaLabel?: string
+  toolbarClass?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<PromptInputProps>(), {
+  addActions: () => [
+    {
+      icon: PaperclipIcon,
+      key: "attachment",
+      label: "사진/파일 추가",
+    },
+    {
+      icon: PlugIcon,
+      key: "mcp",
+      label: "MCP",
+    },
+  ],
+  addLabel: "추가",
+  allowEmpty: false,
+  clearAttachmentsOnSubmit: true,
+  clearCommandPayloadOnSubmit: true,
+  commandEmptyText: "명령어가 없습니다.",
+  commandLabel: "명령어",
+  commandTagRemoveLabel: "{label} 명령어 취소",
+  commandTrigger: "/",
+  commands: () => [],
+  modelEmptyText: "검색 결과가 없습니다.",
+  modelLabel: "모델 선택",
+  modelModalThreshold: 8,
+  modelSearchPlaceholder: "모델 검색",
+  modelSelectorMode: "dialog",
+  modelValue: "",
+  models: () => [
+    {
+      icon: SparklesIcon,
+      label: "GPT-5",
+      value: "gpt-5",
+    },
+    {
+      icon: BrainCircuitIcon,
+      label: "GPT-5 mini",
+      value: "gpt-5-mini",
+    },
+    {
+      icon: BotIcon,
+      label: "Claude Sonnet",
+      value: "claude-sonnet",
+    },
+    {
+      icon: BotIcon,
+      label: "Claude Haiku",
+      value: "claude-haiku",
+    },
+    {
+      icon: SparklesIcon,
+      label: "Gemini Pro",
+      value: "gemini-pro",
+    },
+    {
+      icon: BrainCircuitIcon,
+      label: "Gemini Flash",
+      value: "gemini-flash",
+    },
+    {
+      icon: BotIcon,
+      label: "Llama 4",
+      value: "llama-4",
+    },
+    {
+      icon: SparklesIcon,
+      label: "Mistral Large",
+      value: "mistral-large",
+    },
+    {
+      icon: BrainCircuitIcon,
+      label: "DeepSeek Chat",
+      value: "deepseek-chat",
+    },
+    {
+      icon: BotIcon,
+      label: "Command R",
+      value: "command-r",
+    },
+  ],
+  multipleAttachments: true,
+  placeholder: "메시지를 입력하세요",
+  removeAttachmentLabel: "첨부 삭제",
+  maxRows: 4,
+  rows: 2,
+  showAdd: true,
+  showCommands: true,
+  showCommandTags: true,
+  showModel: true,
+  showSubmit: true,
+  submitLabel: "전송",
+  submitOnEnter: true,
+  textareaLabel: "프롬프트 입력",
+})
+
+const emit = defineEmits<{
+  "attachments-change": [attachments: PromptInputAttachment[]]
+  "command-payload-change": [commandPayload: PromptInputCommandData]
+  "remove-attachment": [attachment: PromptInputAttachment]
+  "update:attachments": [attachments: PromptInputAttachment[]]
+  "update:commandPayload": [commandPayload: PromptInputCommandData]
+  "update:model": [value: string]
+  "update:modelValue": [value: string]
+  add: [action: PromptInputAddAction]
+  "add:attachment": [action: PromptInputAddAction]
+  "add:mcp": [action: PromptInputAddAction]
+  command: [payload: PromptInputCommandPayload]
+  "remove-command": [payload: PromptInputCommandRemovePayload]
+  submit: [payload: PromptInputSubmitPayload]
+  upload: [attachments: PromptInputAttachment[]]
+}>()
+
+interface CommandRange {
+  end: number
+  query: string
+  start: number
+}
+
+interface ActiveCommandEntry {
+  command: PromptInputCommand
+  payload: PromptInputCommandData
+}
+
+const generatedId = useId()
+const commandMenuElement = ref<HTMLElement | null>(null)
+const commandRange = ref<CommandRange | null>(null)
+const fileInputElement = ref<HTMLInputElement | null>(null)
+const highlightedCommandIndex = ref(0)
+const activeCommandEntries = ref<ActiveCommandEntry[]>([])
+const internalAttachments = ref<PromptInputAttachment[]>([])
+const internalCommandPayload = ref<PromptInputCommandData>({})
+const textareaElement = ref<HTMLTextAreaElement | null>(null)
+const textareaId = computed(() => props.id ?? generatedId)
+const promptValue = computed(() => props.modelValue ?? "")
+const resolvedAttachments = computed(() =>
+  props.attachments ?? internalAttachments.value,
+)
+const resolvedCommandPayload = computed(() =>
+  props.commandPayload ?? internalCommandPayload.value,
+)
+const selectedModelValue = computed({
+  get: () => props.model ?? props.models[0]?.value ?? "",
+  set: (value: string) => {
+    emit("update:model", value)
+  },
+})
+const selectedModel = computed(() =>
+  props.models.find((model) => model.value === selectedModelValue.value)
+  ?? props.models[0],
+)
+const filteredCommands = computed(() => {
+  const query = commandRange.value?.query.trim().toLocaleLowerCase() ?? ""
+
+  if (!query) return props.commands
+
+  return props.commands.filter((command) => {
+    const searchable = [
+      command.label,
+      command.value,
+      command.description,
+    ]
+      .filter(Boolean)
+      .join(" ")
+      .toLocaleLowerCase()
+
+    return searchable.includes(query)
+  })
+})
+const commandMenuVisible = computed(() =>
+  props.showCommands
+  && Boolean(commandRange.value)
+  && props.commands.length > 0,
+)
+const hasPromptMessage = computed(() => promptValue.value.trim().length > 0)
+const canSubmit = computed(() =>
+  !props.disabled
+  && (props.allowEmpty || hasPromptMessage.value),
+)
+const submitButtonActive = computed(() =>
+  !props.disabled
+  && (props.allowEmpty || hasPromptMessage.value),
+)
+const minRows = computed(() => normalizeRowCount(props.rows, 2))
+const maxRows = computed(() =>
+  Math.max(minRows.value, normalizeRowCount(props.maxRows, 4)),
+)
+const objectUrlSet = new Set<string>()
+
+function normalizeRowCount(value: number | string | undefined, fallback: number) {
+  const parsed = Number(value)
+
+  if (!Number.isFinite(parsed) || parsed < 1) return fallback
+
+  return Math.floor(parsed)
+}
+
+function resizeTextarea() {
+  const textarea = textareaElement.value
+
+  if (!textarea || typeof window === "undefined") return
+
+  const style = window.getComputedStyle(textarea)
+  const lineHeight = Number.parseFloat(style.lineHeight) || 24
+  const padding =
+    (Number.parseFloat(style.paddingTop) || 0)
+    + (Number.parseFloat(style.paddingBottom) || 0)
+  const border =
+    (Number.parseFloat(style.borderTopWidth) || 0)
+    + (Number.parseFloat(style.borderBottomWidth) || 0)
+  const minHeight = (lineHeight * minRows.value) + padding + border
+  const maxHeight = (lineHeight * maxRows.value) + padding + border
+
+  textarea.style.height = `${minHeight}px`
+
+  const nextHeight = Math.min(
+    Math.max(textarea.scrollHeight, minHeight),
+    maxHeight,
+  )
+
+  textarea.style.height = `${nextHeight}px`
+  textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden"
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLTextAreaElement
+
+  emit("update:modelValue", target.value)
+  updateCommandRange(target.value, target.selectionStart ?? target.value.length)
+  void nextTick(resizeTextarea)
+}
+
+function getCommandRange(value: string, cursor: number): CommandRange | null {
+  if (!props.showCommands || !props.commands.length) return null
+
+  const trigger = props.commandTrigger
+
+  if (!trigger) return null
+
+  const beforeCursor = value.slice(0, cursor)
+  const start = beforeCursor.lastIndexOf(trigger)
+
+  if (start === -1) return null
+
+  const previousCharacter = start > 0 ? value[start - 1] : ""
+
+  if (previousCharacter && !/\s/.test(previousCharacter)) return null
+
+  const query = value.slice(start + trigger.length, cursor)
+
+  if (/\s/.test(query)) return null
+
+  return {
+    end: cursor,
+    query,
+    start,
+  }
+}
+
+function updateCommandRange(value?: string, cursor?: number) {
+  const textarea = textareaElement.value
+  const nextValue = value ?? textarea?.value ?? promptValue.value
+  const nextCursor = cursor ?? textarea?.selectionStart ?? nextValue.length
+
+  commandRange.value = getCommandRange(nextValue, nextCursor)
+
+  if (!commandRange.value) {
+    highlightedCommandIndex.value = 0
+    return
+  }
+
+  highlightedCommandIndex.value = getFirstEnabledCommandIndex(filteredCommands.value)
+}
+
+function getFirstEnabledCommandIndex(commands = filteredCommands.value) {
+  const enabledIndex = commands.findIndex((command) => !command.disabled)
+
+  return enabledIndex === -1 ? 0 : enabledIndex
+}
+
+function moveHighlightedCommand(direction: 1 | -1) {
+  const commands = filteredCommands.value
+
+  if (!commands.length || commands.every((command) => command.disabled)) return
+
+  let nextIndex = highlightedCommandIndex.value
+
+  for (let offset = 0; offset < commands.length; offset += 1) {
+    nextIndex = (nextIndex + direction + commands.length) % commands.length
+
+    if (!commands[nextIndex]?.disabled) {
+      highlightedCommandIndex.value = nextIndex
+      scrollHighlightedCommandIntoView()
+      return
+    }
+  }
+}
+
+function scrollHighlightedCommandIntoView() {
+  void nextTick(() => {
+    commandMenuElement.value
+      ?.querySelector<HTMLElement>("[data-highlighted]")
+      ?.scrollIntoView({ block: "nearest" })
+  })
+}
+
+function closeCommandMenu() {
+  commandRange.value = null
+  highlightedCommandIndex.value = 0
+}
+
+function emitCommandPayload(nextCommandPayload: PromptInputCommandData) {
+  if (props.commandPayload === undefined) {
+    internalCommandPayload.value = nextCommandPayload
+  }
+
+  emit("update:commandPayload", nextCommandPayload)
+  emit("command-payload-change", nextCommandPayload)
+}
+
+function clearCommandPayload() {
+  activeCommandEntries.value = []
+  emitCommandPayload({})
+}
+
+function setActiveCommand(
+  command: PromptInputCommand,
+  commandPayloadPatch: PromptInputCommandData,
+) {
+  const patchKeys = new Set(Object.keys(commandPayloadPatch))
+  const nextEntry = {
+    command,
+    payload: { ...commandPayloadPatch },
+  }
+
+  activeCommandEntries.value = [
+    ...activeCommandEntries.value.filter((entry) => {
+      if (entry.command.value === command.value) return false
+      if (!patchKeys.size) return true
+
+      return !Object.keys(entry.payload).some((key) => patchKeys.has(key))
+    }),
+    nextEntry,
+  ]
+}
+
+function removeCommand(entry: ActiveCommandEntry) {
+  if (props.disabled) return
+
+  const commandPayload = { ...resolvedCommandPayload.value }
+  const nextCommandPayload = { ...commandPayload }
+
+  Object.keys(entry.payload).forEach((key) => {
+    delete nextCommandPayload[key]
+  })
+
+  activeCommandEntries.value = activeCommandEntries.value.filter(
+    (currentEntry) => currentEntry !== entry,
+  )
+
+  const payload: PromptInputCommandRemovePayload = {
+    command: entry.command,
+    commandPayload,
+    nextCommandPayload,
+    removedPayload: { ...entry.payload },
+  }
+
+  emitCommandPayload(nextCommandPayload)
+  emit("remove-command", payload)
+  entry.command.cancel?.(payload)
+  focusTextarea()
+}
+
+function resolveCommandPayloadPatch(
+  command: PromptInputCommand,
+  payload: PromptInputCommandPayload,
+) {
+  const commandPayloadPatch =
+    typeof command.payload === "function"
+      ? command.payload(payload)
+      : command.payload
+
+  return { ...(commandPayloadPatch ?? {}) }
+}
+
+function resolveCommandTagRemoveLabel(command: PromptInputCommand) {
+  return props.commandTagRemoveLabel.replace("{label}", command.label)
+}
+
+function selectCommand(command: PromptInputCommand) {
+  if (props.disabled || command.disabled || !commandRange.value) return
+
+  const textarea = textareaElement.value
+  const currentValue = textarea?.value ?? promptValue.value
+  const range = commandRange.value
+  const insertedValue = command.insert ?? ""
+  const nextValue =
+    currentValue.slice(0, range.start)
+    + insertedValue
+    + currentValue.slice(range.end)
+  const cursor = range.start + insertedValue.length
+  const commandPayload = { ...resolvedCommandPayload.value }
+  const basePayload: PromptInputCommandPayload = {
+    command,
+    commandPayload,
+    nextCommandPayload: commandPayload,
+    nextValue,
+    query: range.query,
+    trigger: props.commandTrigger,
+    value: currentValue,
+  }
+  const commandPayloadPatch = resolveCommandPayloadPatch(command, basePayload)
+  const nextCommandPayload = {
+    ...commandPayload,
+    ...commandPayloadPatch,
+  }
+  const payload: PromptInputCommandPayload = {
+    ...basePayload,
+    nextCommandPayload,
+  }
+
+  emit("update:modelValue", nextValue)
+  setActiveCommand(command, commandPayloadPatch)
+  emitCommandPayload(nextCommandPayload)
+  emit("command", payload)
+  command.action?.(payload)
+  closeCommandMenu()
+
+  void nextTick(() => {
+    focusTextarea()
+    textareaElement.value?.setSelectionRange(cursor, cursor)
+    resizeTextarea()
+  })
+}
+
+function selectHighlightedCommand() {
+  const command =
+    filteredCommands.value[highlightedCommandIndex.value]
+    ?? filteredCommands.value[getFirstEnabledCommandIndex()]
+
+  if (!command || command.disabled) return
+
+  selectCommand(command)
+}
+
+function emitAttachments(nextAttachments: PromptInputAttachment[]) {
+  if (props.attachments === undefined) {
+    internalAttachments.value = nextAttachments
+  }
+
+  emit("update:attachments", nextAttachments)
+  emit("attachments-change", nextAttachments)
+}
+
+function createAttachment(file: File): PromptInputAttachment {
+  const kind = file.type.startsWith("image/") ? "image" : "file"
+  const previewUrl = kind === "image" ? URL.createObjectURL(file) : undefined
+  const id =
+    globalThis.crypto?.randomUUID?.()
+    ?? `${Date.now()}-${Math.random().toString(36).slice(2)}`
+
+  if (previewUrl) {
+    objectUrlSet.add(previewUrl)
+  }
+
+  return {
+    file,
+    id: `${file.name}-${file.size}-${file.lastModified}-${id}`,
+    kind,
+    name: file.name,
+    previewUrl,
+    size: file.size,
+    type: file.type,
+  }
+}
+
+function revokeAttachmentPreview(attachment: PromptInputAttachment) {
+  if (!attachment.previewUrl || !objectUrlSet.has(attachment.previewUrl)) return
+
+  URL.revokeObjectURL(attachment.previewUrl)
+  objectUrlSet.delete(attachment.previewUrl)
+}
+
+function clearAttachments() {
+  resolvedAttachments.value.forEach(revokeAttachmentPreview)
+  emitAttachments([])
+}
+
+function formatAttachmentSize(size: number) {
+  if (size < 1024) return `${size} B`
+  if (size < 1024 * 1024) return `${Math.round(size / 1024)} KB`
+
+  return `${(size / 1024 / 1024).toFixed(1)} MB`
+}
+
+function isImageAttachment(attachment: PromptInputAttachment) {
+  return attachment.kind === "image" && Boolean(attachment.previewUrl)
+}
+
+function handleFileInputChange(event: Event) {
+  if (props.disabled) return
+
+  const input = event.target as HTMLInputElement
+  const files = Array.from(input.files ?? [])
+
+  if (!files.length) return
+
+  const uploadedAttachments = files.map(createAttachment)
+
+  emitAttachments([
+    ...resolvedAttachments.value,
+    ...uploadedAttachments,
+  ])
+  emit("upload", uploadedAttachments)
+
+  input.value = ""
+}
+
+function removeAttachment(attachment: PromptInputAttachment) {
+  revokeAttachmentPreview(attachment)
+
+  emitAttachments(
+    resolvedAttachments.value.filter((item) => item.id !== attachment.id),
+  )
+  emit("remove-attachment", attachment)
+}
+
+function handleAdd(action: PromptInputAddAction) {
+  if (props.disabled) return
+
+  emit("add", action)
+
+  if (action.key === "attachment") {
+    emit("add:attachment", action)
+    fileInputElement.value?.click()
+    return
+  }
+
+  if (action.key === "mcp") {
+    emit("add:mcp", action)
+  }
+}
+
+function focusTextarea() {
+  if (typeof document === "undefined") return
+
+  document.getElementById(textareaId.value)?.focus()
+}
+
+function handleSurfaceClick(event: MouseEvent) {
+  if (props.disabled) return
+
+  event.preventDefault()
+  focusTextarea()
+}
+
+function handleTextareaPointer() {
+  void nextTick(() => updateCommandRange())
+}
+
+function handleTextareaKeyup(event: KeyboardEvent) {
+  if (
+    event.key === "ArrowDown"
+    || event.key === "ArrowUp"
+    || event.key === "Enter"
+    || event.key === "Tab"
+    || event.key === "Escape"
+  ) {
+    return
+  }
+
+  updateCommandRange()
+}
+
+function handleSubmit() {
+  if (!canSubmit.value) return
+
+  const attachments = [...resolvedAttachments.value]
+  const commandPayload = { ...resolvedCommandPayload.value }
+
+  emit("submit", {
+    attachments,
+    commandPayload,
+    model: selectedModelValue.value,
+    modelOption: selectedModel.value,
+    value: promptValue.value,
+  })
+
+  if (props.clearAttachmentsOnSubmit && attachments.length) {
+    clearAttachments()
+  }
+
+  if (
+    props.clearCommandPayloadOnSubmit
+    && Object.keys(commandPayload).length
+  ) {
+    clearCommandPayload()
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (commandMenuVisible.value) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      moveHighlightedCommand(1)
+      return
+    }
+
+    if (event.key === "ArrowUp") {
+      event.preventDefault()
+      moveHighlightedCommand(-1)
+      return
+    }
+
+    if (event.key === "Escape") {
+      event.preventDefault()
+      closeCommandMenu()
+      return
+    }
+
+    if (event.key === "Enter" || event.key === "Tab") {
+      event.preventDefault()
+      selectHighlightedCommand()
+      return
+    }
+  }
+
+  if (
+    !props.submitOnEnter
+    || event.isComposing
+    || event.key !== "Enter"
+    || event.shiftKey
+    || event.altKey
+    || event.ctrlKey
+    || event.metaKey
+  ) {
+    return
+  }
+
+  event.preventDefault()
+  handleSubmit()
+}
+
+onMounted(() => {
+  void nextTick(resizeTextarea)
+})
+
+onBeforeUnmount(() => {
+  resolvedAttachments.value.forEach(revokeAttachmentPreview)
+})
+
+watch(
+  [promptValue, minRows, maxRows],
+  () => {
+    void nextTick(resizeTextarea)
+  },
+  { flush: "post" },
+)
+
+watch(
+  filteredCommands,
+  (commands) => {
+    if (!commandMenuVisible.value) return
+
+    const currentCommand = commands[highlightedCommandIndex.value]
+
+    if (currentCommand && !currentCommand.disabled) return
+
+    highlightedCommandIndex.value = getFirstEnabledCommandIndex(commands)
+  },
+)
+
+watch(
+  () => props.attachments,
+  (nextAttachments = [], previousAttachments = []) => {
+    const nextPreviewUrls = new Set(
+      nextAttachments
+        .map((attachment) => attachment.previewUrl)
+        .filter(Boolean),
+    )
+
+    previousAttachments.forEach((attachment) => {
+      if (
+        attachment.previewUrl
+        && !nextPreviewUrls.has(attachment.previewUrl)
+      ) {
+        revokeAttachmentPreview(attachment)
+      }
+    })
+  },
+)
+
+watch(
+  resolvedCommandPayload,
+  (nextCommandPayload) => {
+    if (Object.keys(nextCommandPayload).length > 0) return
+
+    activeCommandEntries.value = []
+  },
+  { deep: true },
+)
+</script>
+
+<template>
+  <form
+    data-slot="prompt-input"
+    :data-disabled="props.disabled ? '' : undefined"
+    :class="
+      cn(
+        'border-input bg-background text-foreground relative flex w-full max-w-3xl flex-col overflow-visible rounded-lg border data-[disabled]:opacity-60',
+        props.class,
+      )
+    "
+    @submit.prevent="handleSubmit"
+  >
+    <input
+      ref="fileInputElement"
+      data-slot="prompt-input-file-input"
+      class="sr-only"
+      type="file"
+      :accept="props.attachmentAccept"
+      :multiple="props.multipleAttachments"
+      :disabled="props.disabled"
+      @change="handleFileInputChange"
+    >
+
+    <div
+      v-if="resolvedAttachments.length"
+      data-slot="prompt-input-attachments"
+      class="flex flex-nowrap gap-2 overflow-x-auto overflow-y-hidden px-3 pt-3 pb-1"
+      @click="focusTextarea"
+    >
+      <div
+        v-for="attachment in resolvedAttachments"
+        :key="attachment.id"
+        data-slot="prompt-input-attachment"
+        class="bg-muted/70 text-foreground flex w-56 max-w-[calc(100vw-3rem)] shrink-0 items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs"
+      >
+        <img
+          v-if="isImageAttachment(attachment)"
+          data-slot="prompt-input-attachment-preview"
+          :src="attachment.previewUrl"
+          :alt="attachment.name"
+          class="size-8 shrink-0 rounded-sm object-cover"
+        >
+        <span
+          v-else
+          data-slot="prompt-input-attachment-icon"
+          class="bg-background text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-sm"
+        >
+          <FileIcon />
+        </span>
+        <span
+          data-slot="prompt-input-attachment-content"
+          class="grid min-w-0 flex-1"
+        >
+          <span
+            data-slot="prompt-input-attachment-name"
+            class="truncate font-medium"
+            :title="attachment.name"
+          >
+            {{ attachment.name }}
+          </span>
+          <span
+            data-slot="prompt-input-attachment-size"
+            class="text-muted-foreground"
+          >
+            {{ formatAttachmentSize(attachment.size) }}
+          </span>
+        </span>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          class="-mr-1 size-7 rounded-sm"
+          :aria-label="props.removeAttachmentLabel"
+          :disabled="props.disabled"
+          @click.stop="removeAttachment(attachment)"
+        >
+          <XIcon />
+        </Button>
+      </div>
+    </div>
+
+    <textarea
+      ref="textareaElement"
+      :id="textareaId"
+      data-slot="prompt-input-textarea"
+      :class="
+        cn(
+          'w-full resize-none border-0 bg-transparent px-4 py-3 text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',
+          props.textareaClass,
+        )
+      "
+      :disabled="props.disabled"
+      :aria-label="props.textareaLabel"
+      :placeholder="props.placeholder"
+      :rows="minRows"
+      :value="promptValue"
+      @click="handleTextareaPointer"
+      @focus="handleTextareaPointer"
+      @input="handleInput"
+      @keydown="handleKeydown"
+      @keyup="handleTextareaKeyup"
+      @select="handleTextareaPointer"
+    />
+
+    <div
+      v-if="commandMenuVisible"
+      ref="commandMenuElement"
+      data-slot="prompt-input-command-menu"
+      role="listbox"
+      :aria-label="props.commandLabel"
+      :class="
+        cn(
+          'absolute bottom-[calc(100%+0.5rem)] left-0 z-[999] flex max-h-56 w-full flex-col overflow-y-auto rounded-[12px] border border-border bg-popover/90 p-1 text-popover-foreground shadow-lg backdrop-blur-[15px] [-webkit-backdrop-filter:blur(15px)] [&_[data-slot=prompt-input-command-icon]]:size-3.5',
+          props.commandMenuClass,
+        )
+      "
+      @mousedown.stop
+    >
+      <button
+        v-for="(command, commandIndex) in filteredCommands"
+        :key="command.value"
+        type="button"
+        data-slot="prompt-input-command-item"
+        :data-highlighted="commandIndex === highlightedCommandIndex ? '' : undefined"
+        :disabled="command.disabled"
+        role="option"
+        :aria-selected="commandIndex === highlightedCommandIndex"
+        :class="
+          cn(
+            'flex w-full min-w-0 items-center gap-1.5 rounded-[8px] px-2 py-1.5 text-left text-xs outline-none transition-[background-color,color] hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
+          )
+        "
+        @click="selectCommand(command)"
+        @mouseenter="highlightedCommandIndex = commandIndex"
+        @mousedown.prevent
+      >
+        <component
+          :is="command.icon"
+          v-if="command.icon"
+          data-slot="prompt-input-command-icon"
+        />
+        <span
+          data-slot="prompt-input-command-content"
+          class="grid min-w-0 flex-1 grid-flow-col grid-cols-[minmax(0,max-content)_minmax(0,1fr)] items-baseline gap-1.5"
+        >
+          <span
+            data-slot="prompt-input-command-label"
+            class="min-w-0 truncate font-medium"
+          >
+            {{ command.label }}
+          </span>
+          <span
+            v-if="command.description"
+            data-slot="prompt-input-command-description"
+            class="min-w-0 truncate text-[11px] leading-4 text-muted-foreground max-[520px]:hidden"
+          >
+            {{ command.description }}
+          </span>
+        </span>
+        <span
+          data-slot="prompt-input-command-value"
+          class="shrink-0 text-[11px] leading-4 text-muted-foreground"
+        >
+          {{ props.commandTrigger }}{{ command.value }}
+        </span>
+      </button>
+
+      <div
+        v-if="!filteredCommands.length"
+        data-slot="prompt-input-command-empty"
+        class="px-2 py-2.5 text-xs text-muted-foreground"
+      >
+        {{ props.commandEmptyText }}
+      </div>
+    </div>
+
+    <div
+      data-slot="prompt-input-toolbar"
+      :class="
+        cn(
+          'relative flex min-h-12 items-center justify-between gap-3 px-2 py-2',
+          props.toolbarClass,
+        )
+      "
+    >
+      <label
+        data-slot="prompt-input-surface"
+        :for="textareaId"
+        class="absolute inset-0 z-10 cursor-text"
+        aria-hidden="true"
+        @click="handleSurfaceClick"
+      />
+
+      <div
+        data-slot="prompt-input-tools"
+        class="pointer-events-none relative z-20 flex min-w-0 flex-1 flex-wrap items-center gap-1 [&_*]:pointer-events-auto"
+      >
+        <DropdownMenu v-if="props.showAdd && props.addActions.length">
+          <DropdownMenuTrigger as-child>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              :aria-label="props.addLabel"
+              :disabled="props.disabled"
+            >
+              <PlusIcon />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" class="w-40">
+            <DropdownMenuItem
+              v-for="action in props.addActions"
+              :key="action.key"
+              :disabled="action.disabled"
+              @select="handleAdd(action)"
+            >
+              <component
+                :is="action.icon"
+                v-if="action.icon"
+                data-slot="prompt-input-add-action-icon"
+              />
+              {{ action.label }}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <div
+          v-if="props.showCommandTags && activeCommandEntries.length"
+          data-slot="prompt-input-command-tags"
+          class="flex min-w-0 flex-wrap items-center gap-1"
+        >
+          <Tag
+            v-for="entry in activeCommandEntries"
+            :key="entry.command.value"
+            :icon="entry.command.icon"
+            :remove-label="resolveCommandTagRemoveLabel(entry.command)"
+            :title="entry.command.label"
+            class="max-w-36"
+            removable
+            size="sm"
+            variant="secondary"
+            @remove="removeCommand(entry)"
+          >
+            {{ props.commandTrigger }}{{ entry.command.value }}
+          </Tag>
+        </div>
+
+        <ModelSelector
+          v-if="props.showModel && props.models.length"
+          v-model="selectedModelValue"
+          :disabled="props.disabled"
+          :content-class="cn('w-72', props.modelMenuClass)"
+          :dialog-class="props.modelDialogClass"
+          :empty-text="props.modelEmptyText"
+          :label="props.modelLabel"
+          :modal-threshold="props.modelModalThreshold"
+          :modal-title="props.modelLabel"
+          :mode="props.modelSelectorMode"
+          :models="props.models"
+          :placeholder="props.modelLabel"
+          :search-placeholder="props.modelSearchPlaceholder"
+          class="min-w-0"
+          size="sm"
+          trigger-class="h-8 min-w-0 max-w-52 border-transparent bg-transparent px-2 shadow-none transition-[background-color,color] hover:bg-accent hover:text-accent-foreground focus-visible:border-transparent focus-visible:bg-accent focus-visible:ring-0 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+        />
+
+        <slot
+          name="tools"
+          :attachments="resolvedAttachments"
+          :command-payload="resolvedCommandPayload"
+          :disabled="props.disabled"
+          :model="selectedModelValue"
+          :model-option="selectedModel"
+          :value="promptValue"
+        />
+      </div>
+
+      <div
+        data-slot="prompt-input-actions"
+        class="pointer-events-none relative z-20 flex shrink-0 items-center gap-1 [&_*]:pointer-events-auto"
+      >
+        <slot
+          name="actions"
+          :attachments="resolvedAttachments"
+          :command-payload="resolvedCommandPayload"
+          :disabled="props.disabled"
+          :model="selectedModelValue"
+          :model-option="selectedModel"
+          :submit="handleSubmit"
+          :value="promptValue"
+        />
+
+        <Button
+          v-if="props.showSubmit"
+          type="submit"
+          :variant="submitButtonActive ? 'default' : 'secondary'"
+          size="icon-sm"
+          :class="
+            cn(
+              'transition-[background-color,color,opacity]',
+              !submitButtonActive && 'bg-muted text-muted-foreground hover:bg-muted',
+            )
+          "
+          :aria-label="props.submitLabel"
+          :disabled="!canSubmit"
+        >
+          <SendIcon />
+        </Button>
+      </div>
+    </div>
+  </form>
+</template>