From 4ed77de5d6d33b787274eaafaeecaa66d8b39e1a Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Fri, 28 Nov 2025 03:16:06 +0100
Subject: [PATCH 1/7] feat: update prompt input component

---
 .../3.components/1.chatbot/prompt-input.md    |   6 +-
 .../elements/src/prompt-input/PromptInput.vue | 340 +++++++++++++++++-
 .../PromptInputActionAddAttachments.vue       |  36 ++
 .../prompt-input/PromptInputActionMenu.vue    |  15 +
 .../PromptInputActionMenuContent.vue          |  21 ++
 .../PromptInputActionMenuItem.vue             |  13 +
 .../PromptInputActionMenuTrigger.vue          |  22 ++
 .../prompt-input/PromptInputAttachment.vue    | 112 ++++++
 .../prompt-input/PromptInputAttachments.vue   |  29 ++
 .../src/prompt-input/PromptInputBody.vue      |  12 +
 .../src/prompt-input/PromptInputButton.vue    |  54 +--
 .../src/prompt-input/PromptInputCommand.vue   |  19 +
 .../prompt-input/PromptInputCommandEmpty.vue  |  19 +
 .../prompt-input/PromptInputCommandGroup.vue  |  19 +
 .../prompt-input/PromptInputCommandInput.vue  |  17 +
 .../prompt-input/PromptInputCommandItem.vue   |  19 +
 .../prompt-input/PromptInputCommandList.vue   |  17 +
 .../PromptInputCommandSeparator.vue           |  16 +
 .../src/prompt-input/PromptInputFooter.vue    |  23 ++
 .../src/prompt-input/PromptInputHeader.vue    |  23 ++
 .../src/prompt-input/PromptInputHoverCard.vue |  18 +
 .../PromptInputHoverCardContent.vue           |  17 +
 .../PromptInputHoverCardTrigger.vue           |  15 +
 .../src/prompt-input/PromptInputProvider.vue  | 113 ++++++
 .../src/prompt-input/PromptInputSelect.vue    |  15 +
 .../prompt-input/PromptInputSelectContent.vue |  19 +
 .../prompt-input/PromptInputSelectItem.vue    |  19 +
 .../prompt-input/PromptInputSelectTrigger.vue |  26 ++
 .../prompt-input/PromptInputSelectValue.vue   |  19 +
 .../prompt-input/PromptInputSpeechButton.vue  | 159 ++++++++
 .../src/prompt-input/PromptInputSubmit.vue    |  61 ++--
 .../src/prompt-input/PromptInputTab.vue       |  16 +
 .../src/prompt-input/PromptInputTabBody.vue   |  16 +
 .../src/prompt-input/PromptInputTabItem.vue   |  16 +
 .../src/prompt-input/PromptInputTabLabel.vue  |  16 +
 .../src/prompt-input/PromptInputTabsList.vue  |  16 +
 .../src/prompt-input/PromptInputTextarea.vue  | 117 ++++--
 .../src/prompt-input/PromptInputTools.vue     |  18 +-
 packages/elements/src/prompt-input/index.ts   |  37 ++
 packages/elements/src/prompt-input/types.ts   |  37 ++
 .../prompt-input/usePromptInputAttachments.ts |  30 ++
 .../prompt-input/usePromptInputController.ts  |  56 +++
 .../prompt-input/useProviderAttachments.ts    |  25 ++
 .../src/prompt-input-header-controls.vue      |  44 +++
 packages/examples/src/prompt-input.vue        | 230 ++++++++----
 .../components/ui/input-group/InputGroup.vue  |  35 ++
 .../ui/input-group/InputGroupAddon.vue        |  36 ++
 .../ui/input-group/InputGroupButton.vue       |  21 ++
 .../ui/input-group/InputGroupInput.vue        |  19 +
 .../ui/input-group/InputGroupText.vue         |  19 +
 .../ui/input-group/InputGroupTextarea.vue     |  19 +
 .../components/ui/input-group/index.ts        |  59 +++
 52 files changed, 2045 insertions(+), 150 deletions(-)
 create mode 100644 packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputActionMenu.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputActionMenuContent.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputActionMenuItem.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputActionMenuTrigger.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputAttachment.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputAttachments.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputBody.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputCommand.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputCommandEmpty.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputCommandGroup.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputCommandInput.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputCommandItem.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputCommandList.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputCommandSeparator.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputFooter.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputHeader.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputHoverCard.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputHoverCardContent.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputHoverCardTrigger.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputProvider.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputSelect.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputSelectContent.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputSelectItem.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputSelectTrigger.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputSelectValue.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputSpeechButton.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputTab.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputTabBody.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputTabItem.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputTabLabel.vue
 create mode 100644 packages/elements/src/prompt-input/PromptInputTabsList.vue
 create mode 100644 packages/elements/src/prompt-input/types.ts
 create mode 100644 packages/elements/src/prompt-input/usePromptInputAttachments.ts
 create mode 100644 packages/elements/src/prompt-input/usePromptInputController.ts
 create mode 100644 packages/elements/src/prompt-input/useProviderAttachments.ts
 create mode 100644 packages/examples/src/prompt-input-header-controls.vue
 create mode 100644 packages/shadcn-vue/components/ui/input-group/InputGroup.vue
 create mode 100644 packages/shadcn-vue/components/ui/input-group/InputGroupAddon.vue
 create mode 100644 packages/shadcn-vue/components/ui/input-group/InputGroupButton.vue
 create mode 100644 packages/shadcn-vue/components/ui/input-group/InputGroupInput.vue
 create mode 100644 packages/shadcn-vue/components/ui/input-group/InputGroupText.vue
 create mode 100644 packages/shadcn-vue/components/ui/input-group/InputGroupTextarea.vue
 create mode 100644 packages/shadcn-vue/components/ui/input-group/index.ts

diff --git a/apps/www/content/3.components/1.chatbot/prompt-input.md b/apps/www/content/3.components/1.chatbot/prompt-input.md
index aa604e6..8c137ff 100644
--- a/apps/www/content/3.components/1.chatbot/prompt-input.md
+++ b/apps/www/content/3.components/1.chatbot/prompt-input.md
@@ -1,12 +1,12 @@
 ---
 title: Prompt Input
-description:
-icon: lucide:send
+description: Allows a user to send a message with file attachments to a large language model. It includes a textarea, file upload capabilities, a submit button, and a dropdown for selecting the model.
+icon: lucide:corner-down-left
 ---
 
 The `PromptInput` component allows a user to send a message to a large language model. It includes a textarea, a submit button, and a dropdown for selecting the model.
 
-:::ComponentLoader{label="PromptInput" componentName="PromptInput"}
+:::ComponentLoader{label="Preview" componentName="PromptInput"}
 :::
 
 ## Install using CLI
diff --git a/packages/elements/src/prompt-input/PromptInput.vue b/packages/elements/src/prompt-input/PromptInput.vue
index a2bf275..85721bb 100644
--- a/packages/elements/src/prompt-input/PromptInput.vue
+++ b/packages/elements/src/prompt-input/PromptInput.vue
@@ -1,21 +1,345 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import type { FileUIPart } from 'ai'
+import type { AttachmentsContext } from './usePromptInputController'
+import { InputGroup } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { nanoid } from 'nanoid'
+import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { LocalAttachmentsKey } from './usePromptInputAttachments'
+import { useOptionalPromptInputController } from './usePromptInputController'
+
+export interface PromptInputMessage {
+  text: string
+  files: FileUIPart[]
+}
 
 interface Props {
   class?: string
+  accept?: string
+  multiple?: boolean
+  globalDrop?: boolean
+  syncHiddenInput?: boolean
+  maxFiles?: number
+  maxFileSize?: number
+  onError?: (err: {
+    code: 'max_files' | 'max_file_size' | 'accept'
+    message: string
+  }) => void
+  onSubmit: (
+    message: PromptInputMessage,
+    event: Event
+  ) => void | Promise<void>
 }
 
 const props = defineProps<Props>()
-const attrs = useAttrs()
 
-const classes = computed(() => [
-  'w-full divide-y overflow-hidden rounded-xl border bg-background shadow-sm',
-  props.class,
-])
+// Try to use provider controller if present
+const controller = useOptionalPromptInputController()
+const usingProvider = !!controller
+
+// Refs
+const inputRef = ref<HTMLInputElement | null>(null)
+const formRef = ref<HTMLFormElement | null>(null)
+
+// ----- Local attachments (only used when no provider) -----
+const items = ref<(FileUIPart & { id: string })[]>([])
+const files = computed(() =>
+  usingProvider ? controller!.attachments.files : items.value,
+)
+
+function matchesAccept(f: File): boolean {
+  if (!props.accept || props.accept.trim() === '') {
+    return true
+  }
+  if (props.accept.includes('image/*')) {
+    return f.type.startsWith('image/')
+  }
+  return true
+}
+
+function addLocal(fileList: File[] | FileList) {
+  const incoming = Array.from(fileList)
+  const accepted = incoming.filter(f => matchesAccept(f))
+
+  if (incoming.length && accepted.length === 0) {
+    props.onError?.({
+      code: 'accept',
+      message: 'No files match the accepted types.',
+    })
+    return
+  }
+
+  const withinSize = (f: File) =>
+    props.maxFileSize ? f.size <= props.maxFileSize : true
+  const sized = accepted.filter(withinSize)
+
+  if (accepted.length > 0 && sized.length === 0) {
+    props.onError?.({
+      code: 'max_file_size',
+      message: 'All files exceed the maximum size.',
+    })
+    return
+  }
+
+  items.value = (() => {
+    const prev = items.value
+    const capacity
+      = typeof props.maxFiles === 'number'
+        ? Math.max(0, props.maxFiles - prev.length)
+        : undefined
+    const capped
+      = typeof capacity === 'number' ? sized.slice(0, capacity) : sized
+
+    if (typeof capacity === 'number' && sized.length > capacity) {
+      props.onError?.({
+        code: 'max_files',
+        message: 'Too many files. Some were not added.',
+      })
+    }
+
+    const next: (FileUIPart & { id: string })[] = []
+    for (const file of capped) {
+      next.push({
+        id: nanoid(),
+        type: 'file',
+        url: URL.createObjectURL(file),
+        mediaType: file.type,
+        filename: file.name,
+      })
+    }
+    return prev.concat(next)
+  })()
+}
+
+function removeLocal(id: string) {
+  const found = items.value.find(file => file.id === id)
+  if (found?.url) {
+    URL.revokeObjectURL(found.url)
+  }
+  items.value = items.value.filter(file => file.id !== id)
+}
+
+function clearLocal() {
+  for (const file of items.value) {
+    if (file.url) {
+      URL.revokeObjectURL(file.url)
+    }
+  }
+  items.value = []
+}
+
+function openFileDialogLocal() {
+  inputRef.value?.click()
+}
+
+const add = usingProvider ? controller!.attachments.add : addLocal
+const remove = usingProvider ? controller!.attachments.remove : removeLocal
+const clear = usingProvider ? controller!.attachments.clear : clearLocal
+const openFileDialog = usingProvider
+  ? controller!.attachments.openFileDialog
+  : openFileDialogLocal
+
+// Register file input with provider
+onMounted(() => {
+  if (usingProvider) {
+    controller!.__registerFileInput(inputRef, () => inputRef.value?.click())
+  }
+})
+
+// Sync hidden input
+watch(files, () => {
+  if (props.syncHiddenInput && inputRef.value && files.value.length === 0) {
+    inputRef.value.value = ''
+  }
+})
+
+// Form drag and drop
+onMounted(() => {
+  const form = formRef.value
+  if (!form)
+    return
+
+  const onDragOver = (e: DragEvent) => {
+    if (e.dataTransfer?.types?.includes('Files')) {
+      e.preventDefault()
+    }
+  }
+  const onDrop = (e: DragEvent) => {
+    if (e.dataTransfer?.types?.includes('Files')) {
+      e.preventDefault()
+    }
+    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+      add(e.dataTransfer.files)
+    }
+  }
+
+  form.addEventListener('dragover', onDragOver)
+  form.addEventListener('drop', onDrop)
+
+  onUnmounted(() => {
+    form.removeEventListener('dragover', onDragOver)
+    form.removeEventListener('drop', onDrop)
+  })
+})
+
+// Global drop (opt-in)
+onMounted(() => {
+  if (!props.globalDrop)
+    return
+
+  const onDragOver = (e: DragEvent) => {
+    if (e.dataTransfer?.types?.includes('Files')) {
+      e.preventDefault()
+    }
+  }
+  const onDrop = (e: DragEvent) => {
+    if (e.dataTransfer?.types?.includes('Files')) {
+      e.preventDefault()
+    }
+    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+      add(e.dataTransfer.files)
+    }
+  }
+
+  document.addEventListener('dragover', onDragOver)
+  document.addEventListener('drop', onDrop)
+
+  onUnmounted(() => {
+    document.removeEventListener('dragover', onDragOver)
+    document.removeEventListener('drop', onDrop)
+  })
+})
+
+// Cleanup on unmount (only if not using provider)
+onUnmounted(() => {
+  if (!usingProvider) {
+    for (const f of items.value) {
+      if (f.url)
+        URL.revokeObjectURL(f.url)
+    }
+  }
+})
+
+function handleChange(event: Event) {
+  const target = event.currentTarget as HTMLInputElement
+  if (target.files) {
+    add(target.files)
+  }
+  // Reset to allow selecting same files again
+  target.value = ''
+}
+
+async function convertBlobUrlToDataUrl(url: string): Promise<string | null> {
+  try {
+    const response = await fetch(url)
+    const blob = await response.blob()
+    return new Promise((resolve) => {
+      const reader = new FileReader()
+      reader.onloadend = () => resolve(reader.result as string)
+      reader.onerror = () => resolve(null)
+      reader.readAsDataURL(blob)
+    })
+  }
+  catch {
+    return null
+  }
+}
+
+function handleSubmit(event: Event) {
+  event.preventDefault()
+
+  const form = event.currentTarget as HTMLFormElement
+  const text = usingProvider
+    ? controller!.textInput.value
+    : (() => {
+        const formData = new FormData(form)
+        return (formData.get('message') as string) || ''
+      })()
+
+  // Reset form immediately
+  if (!usingProvider) {
+    form.reset()
+  }
+
+  // Convert blob URLs to data URLs
+  Promise.all(
+    files.value.map(async ({ id, ...item }) => {
+      if (item.url && item.url.startsWith('blob:')) {
+        const dataUrl = await convertBlobUrlToDataUrl(item.url)
+        return {
+          ...item,
+          url: dataUrl ?? item.url,
+        }
+      }
+      return item
+    }),
+  )
+    .then((convertedFiles: FileUIPart[]) => {
+      try {
+        const result = props.onSubmit({ text, files: convertedFiles }, event)
+
+        if (result instanceof Promise) {
+          result
+            .then(() => {
+              clear()
+              if (usingProvider) {
+                controller!.textInput.clear()
+              }
+            })
+            .catch(() => {
+              // Don't clear on error
+            })
+        }
+        else {
+          clear()
+          if (usingProvider) {
+            controller!.textInput.clear()
+          }
+        }
+      }
+      catch {
+        // Don't clear on error
+      }
+    })
+    .catch(() => {
+      // Don't clear on error
+    })
+}
+
+// Create attachments context for children
+const ctx = computed<AttachmentsContext>(() => ({
+  files: files.value.map(item => ({ ...item, id: item.id })),
+  add,
+  remove,
+  clear,
+  openFileDialog,
+  fileInputRef: inputRef,
+}))
+
+// Only provide local context if not using provider
+if (!usingProvider) {
+  provide(LocalAttachmentsKey, ctx.value)
+}
 </script>
 
 <template>
-  <form :class="classes" v-bind="attrs">
-    <slot />
+  <input
+    ref="inputRef"
+    :accept="props.accept"
+    :multiple="props.multiple"
+    type="file"
+    class="hidden"
+    aria-label="Upload files"
+    title="Upload files"
+    @change="handleChange"
+  >
+  <form
+    ref="formRef"
+    :class="cn('w-full', props.class)"
+    @submit="handleSubmit"
+  >
+    <InputGroup class="overflow-hidden">
+      <slot />
+    </InputGroup>
   </form>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue b/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue
new file mode 100644
index 0000000..4f666f8
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuItem } from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { ImageIcon } from 'lucide-vue-next'
+import { usePromptInputAttachments } from './usePromptInputAttachments'
+
+type DropdownMenuItemProps = InstanceType<typeof DropdownMenuItem>['$props']
+
+interface Props extends /* @vue-ignore */ DropdownMenuItemProps {
+  class?: HTMLAttributes['class']
+  label?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Add photos or files',
+})
+
+const attachments = usePromptInputAttachments()
+
+function handleSelect(e: Event) {
+  e.preventDefault()
+  attachments.openFileDialog()
+}
+
+const { label, class: _, ...restProps } = props
+</script>
+
+<template>
+  <DropdownMenuItem
+    :class="props.class"
+    v-bind="restProps"
+    @select="handleSelect"
+  >
+    <ImageIcon class="mr-2 size-4" /> {{ props.label }}
+  </DropdownMenuItem>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputActionMenu.vue b/packages/elements/src/prompt-input/PromptInputActionMenu.vue
new file mode 100644
index 0000000..f07edaf
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputActionMenu.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DropdownMenu } from '@repo/shadcn-vue/components/ui/dropdown-menu'
+
+type DropdownMenuProps = InstanceType<typeof DropdownMenu>['$props']
+
+interface Props extends /* @vue-ignore */ DropdownMenuProps {}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <DropdownMenu v-bind="props">
+    <slot />
+  </DropdownMenu>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputActionMenuContent.vue b/packages/elements/src/prompt-input/PromptInputActionMenuContent.vue
new file mode 100644
index 0000000..d165cfe
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputActionMenuContent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuContent } from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type DropdownMenuContentProps = InstanceType<typeof DropdownMenuContent>['$props']
+
+interface Props extends /* @vue-ignore */ DropdownMenuContentProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const { align, class: _, ...restProps } = props
+</script>
+
+<template>
+  <DropdownMenuContent align="start" :class="cn(props.class)" v-bind="restProps">
+    <slot />
+  </DropdownMenuContent>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputActionMenuItem.vue b/packages/elements/src/prompt-input/PromptInputActionMenuItem.vue
new file mode 100644
index 0000000..25119d7
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputActionMenuItem.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuItem } from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <DropdownMenuItem :class="cn(props.class)">
+    <slot />
+  </DropdownMenuItem>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputActionMenuTrigger.vue b/packages/elements/src/prompt-input/PromptInputActionMenuTrigger.vue
new file mode 100644
index 0000000..47da64a
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputActionMenuTrigger.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuTrigger } from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { PlusIcon } from 'lucide-vue-next'
+import PromptInputButton from './PromptInputButton.vue'
+
+type DropdownMenuTriggerProps = InstanceType<typeof DropdownMenuTrigger>['$props']
+
+interface Props extends /* @vue-ignore */ DropdownMenuTriggerProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <DropdownMenuTrigger as-child>
+    <PromptInputButton :class="props.class" v-bind="props">
+      <slot><PlusIcon class="size-4" /></slot>
+    </PromptInputButton>
+  </DropdownMenuTrigger>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputAttachment.vue b/packages/elements/src/prompt-input/PromptInputAttachment.vue
new file mode 100644
index 0000000..3c8535d
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputAttachment.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { FileUIPart } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { HoverCardTrigger } from '@repo/shadcn-vue/components/ui/hover-card'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { PaperclipIcon, XIcon } from 'lucide-vue-next'
+import PromptInputHoverCard from './PromptInputHoverCard.vue'
+import PromptInputHoverCardContent from './PromptInputHoverCardContent.vue'
+import { usePromptInputAttachments } from './usePromptInputAttachments'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  data: FileUIPart & { id: string }
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const attachments = usePromptInputAttachments()
+
+const filename = props.data.filename || ''
+
+const mediaType
+  = props.data.mediaType?.startsWith('image/') && props.data.url ? 'image' : 'file'
+const isImage = mediaType === 'image'
+
+const attachmentLabel = filename || (isImage ? 'Image' : 'Attachment')
+
+function handleRemove(e: Event) {
+  e.stopPropagation()
+  attachments.remove(props.data.id)
+}
+
+const { data, class: _, ...restProps } = props
+</script>
+
+<template>
+  <PromptInputHoverCard>
+    <HoverCardTrigger as-child>
+      <div
+        :key="props.data.id"
+        :class="cn(
+          'group relative flex h-8 cursor-pointer select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+          props.class,
+        )"
+        v-bind="restProps"
+      >
+        <div class="relative size-5 shrink-0">
+          <div
+            class="absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded bg-background transition-opacity group-hover:opacity-0"
+          >
+            <img
+              v-if="isImage"
+              :alt="filename || 'attachment'"
+              class="size-5 object-cover"
+              :height="20"
+              :src="props.data.url"
+              :width="20"
+            >
+            <div
+              v-else
+              class="flex size-5 items-center justify-center text-muted-foreground"
+            >
+              <PaperclipIcon class="size-3" />
+            </div>
+          </div>
+          <Button
+            aria-label="Remove attachment"
+            class="absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5"
+            type="button"
+            variant="ghost"
+            @click="handleRemove"
+          >
+            <XIcon />
+            <span class="sr-only">Remove</span>
+          </Button>
+        </div>
+
+        <span class="flex-1 truncate">{{ attachmentLabel }}</span>
+      </div>
+    </HoverCardTrigger>
+    <PromptInputHoverCardContent class="w-auto p-2">
+      <div class="w-auto space-y-3">
+        <div
+          v-if="isImage"
+          class="flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border"
+        >
+          <img
+            :alt="filename || 'attachment preview'"
+            class="max-h-full max-w-full object-contain"
+            :height="384"
+            :src="props.data.url"
+            :width="448"
+          >
+        </div>
+        <div class="flex items-center gap-2.5">
+          <div class="min-w-0 flex-1 space-y-1 px-0.5">
+            <h4 class="truncate font-semibold text-sm leading-none">
+              {{ filename || (isImage ? 'Image' : 'Attachment') }}
+            </h4>
+            <p
+              v-if="props.data.mediaType"
+              class="truncate font-mono text-muted-foreground text-xs"
+            >
+              {{ props.data.mediaType }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </PromptInputHoverCardContent>
+  </PromptInputHoverCard>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputAttachments.vue b/packages/elements/src/prompt-input/PromptInputAttachments.vue
new file mode 100644
index 0000000..fc6dd94
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputAttachments.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { usePromptInputAttachments } from './usePromptInputAttachments'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const attachments = usePromptInputAttachments()
+
+const { class: _, ...restProps } = props
+</script>
+
+<template>
+  <div
+    v-if="attachments.files.length > 0"
+    :class="cn('flex flex-wrap items-center gap-2 p-3 w-full', props.class)"
+    v-bind="restProps"
+  >
+    <slot
+      v-for="file in attachments.files"
+      :key="file.id"
+      :attachment="file"
+    />
+  </div>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputBody.vue b/packages/elements/src/prompt-input/PromptInputBody.vue
new file mode 100644
index 0000000..fedc6e7
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputBody.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div :class="cn('contents', props.class)" v-bind="props">
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputButton.vue b/packages/elements/src/prompt-input/PromptInputButton.vue
index 8cec8cb..87ea8b8 100644
--- a/packages/elements/src/prompt-input/PromptInputButton.vue
+++ b/packages/elements/src/prompt-input/PromptInputButton.vue
@@ -1,44 +1,54 @@
 <script setup lang="ts">
-import { Button } from '@repo/shadcn-vue/components/ui/button'
-import { computed, useAttrs, useSlots } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { InputGroupButton } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useSlots } from 'vue'
 
-interface Props {
-  class?: string
-  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'
-  size?: 'default' | 'sm' | 'lg' | 'icon'
+type InputGroupButtonProps = InstanceType<typeof InputGroupButton>['$props']
+
+interface Props extends /* @vue-ignore */ InputGroupButtonProps {
+  class?: HTMLAttributes['class']
+  variant?: InputGroupButtonProps['variant']
+  size?: InputGroupButtonProps['size']
 }
 
 const props = withDefaults(defineProps<Props>(), {
   variant: 'ghost',
 })
 
-const attrs = useAttrs()
-
 const slots = useSlots()
 
 const computedSize = computed(() => {
   if (props.size)
     return props.size
-  const count = slots.default?.().length ?? 0
-  return count > 1 ? 'default' : 'icon'
+
+  const slotNodes = slots.default?.()
+
+  if (!slotNodes)
+    return 'icon-sm'
+
+  const validChildren = slotNodes.filter((node) => {
+    if (node.type === Comment)
+      return false
+    if (node.type === Text && !node.children?.toString().trim())
+      return false
+    return true
+  })
+
+  return validChildren.length > 1 ? 'sm' : 'icon-sm'
 })
 
-const classes = computed(() => [
-  'shrink-0 gap-1.5 rounded-lg',
-  props.variant === 'ghost' && 'text-muted-foreground',
-  computedSize.value === 'default' && 'px-3',
-  props.class,
-])
+const { size, variant, class: _, ...restProps } = props
 </script>
 
 <template>
-  <Button
-    :class="classes"
-    :size="computedSize"
-    :variant="props.variant"
+  <InputGroupButton
     type="button"
-    v-bind="attrs"
+    :size="computedSize"
+    :class="cn($props.class)"
+    :variant="variant"
+    v-bind="restProps"
   >
     <slot />
-  </Button>
+  </InputGroupButton>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputCommand.vue b/packages/elements/src/prompt-input/PromptInputCommand.vue
new file mode 100644
index 0000000..da05435
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputCommand.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Command } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandProps = InstanceType<typeof Command>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <Command :class="cn(props.class)" v-bind="props">
+    <slot />
+  </Command>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputCommandEmpty.vue b/packages/elements/src/prompt-input/PromptInputCommandEmpty.vue
new file mode 100644
index 0000000..4f2fafb
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputCommandEmpty.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandEmpty } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandEmptyProps = InstanceType<typeof CommandEmpty>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandEmptyProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandEmpty :class="cn(props.class)" v-bind="props">
+    <slot />
+  </CommandEmpty>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputCommandGroup.vue b/packages/elements/src/prompt-input/PromptInputCommandGroup.vue
new file mode 100644
index 0000000..3d30dab
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputCommandGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandGroup } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandGroupProps = InstanceType<typeof CommandGroup>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandGroupProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandGroup :class="cn(props.class)" v-bind="props">
+    <slot />
+  </CommandGroup>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputCommandInput.vue b/packages/elements/src/prompt-input/PromptInputCommandInput.vue
new file mode 100644
index 0000000..c3759f3
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputCommandInput.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandInput } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandInputProps = InstanceType<typeof CommandInput>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandInputProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandInput :class="cn(props.class)" v-bind="props" />
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputCommandItem.vue b/packages/elements/src/prompt-input/PromptInputCommandItem.vue
new file mode 100644
index 0000000..aeaf239
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputCommandItem.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandItem } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandItemProps = InstanceType<typeof CommandItem>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandItemProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandItem v-bind="props" :class="cn(props.class)">
+    <slot />
+  </CommandItem>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputCommandList.vue b/packages/elements/src/prompt-input/PromptInputCommandList.vue
new file mode 100644
index 0000000..b6987e9
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputCommandList.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandInput } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandListProps = InstanceType<typeof CommandInput>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandListProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandInput :class="cn(props.class)" v-bind="props" />
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputCommandSeparator.vue b/packages/elements/src/prompt-input/PromptInputCommandSeparator.vue
new file mode 100644
index 0000000..4c0d243
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputCommandSeparator.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandSeparator } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandSeparatorProps = InstanceType<typeof CommandSeparator>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandSeparatorProps {
+  class?: HTMLAttributes['class']
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandSeparator :class="cn(props.class)" v-bind="props" />
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputFooter.vue b/packages/elements/src/prompt-input/PromptInputFooter.vue
new file mode 100644
index 0000000..af5a768
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputFooter.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { InputGroupAddon } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputFooterProps = InstanceType<typeof InputGroupAddon>['$props']
+
+interface Props extends /* @vue-ignore */ Omit<PromptInputFooterProps, 'align'> {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <InputGroupAddon
+    align="block-end"
+    :class="cn('justify-between gap-1', props.class)"
+    v-bind="props"
+  >
+    <slot />
+  </InputGroupAddon>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputHeader.vue b/packages/elements/src/prompt-input/PromptInputHeader.vue
new file mode 100644
index 0000000..46bc0d5
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputHeader.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { InputGroupAddon } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputHeaderProps = InstanceType<typeof InputGroupAddon>['$props']
+
+interface Props extends /* @vue-ignore */ Omit<PromptInputHeaderProps, 'align'> {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <InputGroupAddon
+    align="block-end"
+    :class="cn('order-first flex-wrap gap-1', props.class)"
+    v-bind="props"
+  >
+    <slot />
+  </InputGroupAddon>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputHoverCard.vue b/packages/elements/src/prompt-input/PromptInputHoverCard.vue
new file mode 100644
index 0000000..a4858f8
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputHoverCard.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { HoverCard } from '@repo/shadcn-vue/components/ui/hover-card'
+
+type PromptInputHoverCardProps = InstanceType<typeof HoverCard>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputHoverCardProps {}
+
+const props = withDefaults(defineProps<Props>(), {
+  openDelay: 0,
+  closeDelay: 0,
+})
+</script>
+
+<template>
+  <HoverCard v-bind="props">
+    <slot />
+  </HoverCard>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputHoverCardContent.vue b/packages/elements/src/prompt-input/PromptInputHoverCardContent.vue
new file mode 100644
index 0000000..2eeb2de
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputHoverCardContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { HoverCardContent } from '@repo/shadcn-vue/components/ui/hover-card'
+
+type PromptInputHoverCardContentProps = InstanceType<typeof HoverCardContent>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputHoverCardContentProps {}
+
+const props = withDefaults(defineProps<Props>(), {
+  align: 'start',
+})
+</script>
+
+<template>
+  <HoverCardContent v-bind="props">
+    <slot />
+  </HoverCardContent>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputHoverCardTrigger.vue b/packages/elements/src/prompt-input/PromptInputHoverCardTrigger.vue
new file mode 100644
index 0000000..3282d73
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputHoverCardTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { HoverCardTrigger } from '@repo/shadcn-vue/components/ui/hover-card'
+
+type PromptInputHoverCardTriggerProps = InstanceType<typeof HoverCardTrigger>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputHoverCardTriggerProps {}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputProvider.vue b/packages/elements/src/prompt-input/PromptInputProvider.vue
new file mode 100644
index 0000000..acc4f08
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputProvider.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { FileUIPart } from 'ai'
+import type { Ref } from 'vue'
+import type { AttachmentsContext, PromptInputControllerContext } from './usePromptInputController'
+import { nanoid } from 'nanoid'
+import { computed, onUnmounted, provide, ref } from 'vue'
+import {
+
+  PromptInputControllerKey,
+  ProviderAttachmentsKey,
+} from './usePromptInputController'
+
+interface Props {
+  initialInput?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  initialInput: '',
+})
+
+// ----- Text input state -----
+const textInput = ref(props.initialInput)
+function setInput(v: string) {
+  textInput.value = v
+}
+function clearInput() {
+  textInput.value = ''
+}
+
+// ----- Attachments state -----
+const attachmentFiles = ref<(FileUIPart & { id: string })[]>([])
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const openRef = ref<() => void>(() => {})
+
+function add(files: File[] | FileList) {
+  const incoming = Array.from(files)
+  if (incoming.length === 0) {
+    return
+  }
+
+  const newFiles: (FileUIPart & { id: string })[] = incoming.map(file => ({
+    id: nanoid(),
+    type: 'file' as const,
+    url: URL.createObjectURL(file),
+    mediaType: file.type,
+    filename: file.name,
+  }))
+
+  attachmentFiles.value = [...attachmentFiles.value, ...newFiles]
+}
+
+function remove(id: string) {
+  const found = attachmentFiles.value.find(f => f.id === id)
+  if (found?.url) {
+    URL.revokeObjectURL(found.url)
+  }
+  attachmentFiles.value = attachmentFiles.value.filter(f => f.id !== id)
+}
+
+function clear() {
+  for (const f of attachmentFiles.value) {
+    if (f.url) {
+      URL.revokeObjectURL(f.url)
+    }
+  }
+  attachmentFiles.value = []
+}
+
+function openFileDialog() {
+  openRef.value?.()
+}
+
+const attachments = computed<AttachmentsContext>(() => ({
+  files: attachmentFiles.value,
+  add,
+  remove,
+  clear,
+  openFileDialog,
+  fileInputRef,
+}))
+
+function __registerFileInput(ref: Ref<HTMLInputElement | null>, open: () => void) {
+  fileInputRef.value = ref.value
+  openRef.value = open
+}
+
+const controller = computed<PromptInputControllerContext>(() => ({
+  textInput: {
+    value: textInput.value,
+    setInput,
+    clear: clearInput,
+  },
+  attachments: attachments.value,
+  __registerFileInput,
+}))
+
+// Provide contexts
+provide(PromptInputControllerKey, controller.value)
+provide(ProviderAttachmentsKey, attachments.value)
+
+// Cleanup blob URLs on unmount
+onUnmounted(() => {
+  for (const f of attachmentFiles.value) {
+    if (f.url) {
+      URL.revokeObjectURL(f.url)
+    }
+  }
+})
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputSelect.vue b/packages/elements/src/prompt-input/PromptInputSelect.vue
new file mode 100644
index 0000000..47be6d5
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputSelect.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Select } from '@repo/shadcn-vue/components/ui/select'
+
+type PromptInputSelectProps = InstanceType<typeof Select>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputSelectProps {}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <Select v-bind="props">
+    <slot />
+  </Select>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputSelectContent.vue b/packages/elements/src/prompt-input/PromptInputSelectContent.vue
new file mode 100644
index 0000000..37a3b5e
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputSelectContent.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectContent } from '@repo/shadcn-vue/components/ui/select'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type SelectContentProps = InstanceType<typeof SelectContent>['$props']
+
+interface Props extends /* @vue-ignore */ SelectContentProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <SelectContent :class="cn(props.class)" v-bind="props">
+    <slot />
+  </SelectContent>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputSelectItem.vue b/packages/elements/src/prompt-input/PromptInputSelectItem.vue
new file mode 100644
index 0000000..3ee31b6
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputSelectItem.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectItem } from '@repo/shadcn-vue/components/ui/select'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputSelectItemProps = InstanceType<typeof SelectItem>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputSelectItemProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <SelectItem :class="cn(props.class)" v-bind="props">
+    <slot />
+  </SelectItem>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputSelectTrigger.vue b/packages/elements/src/prompt-input/PromptInputSelectTrigger.vue
new file mode 100644
index 0000000..39a4806
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputSelectTrigger.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectTrigger } from '@repo/shadcn-vue/components/ui/select'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type SelectTriggerProps = InstanceType<typeof SelectTrigger>['$props']
+
+interface Props extends /* @vue-ignore */ SelectTriggerProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <SelectTrigger
+    :class="cn(
+      'border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors',
+      'hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground',
+      props.class,
+    )"
+    v-bind="props"
+  >
+    <slot />
+  </SelectTrigger>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputSelectValue.vue b/packages/elements/src/prompt-input/PromptInputSelectValue.vue
new file mode 100644
index 0000000..f0ae98c
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputSelectValue.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectValue } from '@repo/shadcn-vue/components/ui/select'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputSelectValueProps = InstanceType<typeof SelectValue>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputSelectValueProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <SelectValue :class="cn(props.class)" v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputSpeechButton.vue b/packages/elements/src/prompt-input/PromptInputSpeechButton.vue
new file mode 100644
index 0000000..3e9ce97
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputSpeechButton.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { MicIcon } from 'lucide-vue-next'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import PromptInputButton from './PromptInputButton.vue'
+
+declare global {
+  interface Window {
+    SpeechRecognition: {
+      new (): SpeechRecognition
+    }
+    webkitSpeechRecognition: {
+      new (): SpeechRecognition
+    }
+  }
+}
+
+interface SpeechRecognitionEvent extends /* @vue-ignore */ Event {
+  results: SpeechRecognitionResultList
+  resultIndex: number
+}
+
+interface SpeechRecognitionErrorEvent extends /* @vue-ignore */ Event {
+  error: string
+}
+
+interface SpeechRecognition extends /* @vue-ignore */ EventTarget {
+  continuous: boolean
+  interimResults: boolean
+  lang: string
+  start: () => void
+  stop: () => void
+  abort: () => void
+  onresult: ((ev: SpeechRecognitionEvent) => any) | null
+  onend: ((ev: Event) => any) | null
+  onerror: ((ev: SpeechRecognitionErrorEvent) => any) | null
+  onstart: ((ev: Event) => any) | null
+}
+
+type PromptInputButtonProps = InstanceType<typeof PromptInputButton>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputButtonProps {
+  class?: HTMLAttributes['class']
+  textareaRef?: HTMLTextAreaElement | null
+  onTranscriptionChange?: (text: string) => void
+}
+
+const props = defineProps<Props>()
+
+const isListening = ref(false)
+const recognition = ref<SpeechRecognition | null>(null)
+
+function setupSpeechRecognition() {
+  if (
+    typeof window !== 'undefined'
+    && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)
+  ) {
+    const SpeechRecognition
+      = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
+    const speechRecognition = new SpeechRecognition()
+
+    speechRecognition.continuous = true
+    speechRecognition.interimResults = true
+    speechRecognition.lang = 'en-US'
+
+    speechRecognition.onstart = () => {
+      isListening.value = true
+    }
+
+    speechRecognition.onend = () => {
+      isListening.value = false
+    }
+
+    speechRecognition.onresult = (event: any) => {
+      let finalTranscript = ''
+
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const result = event.results[i]
+        if (result.isFinal) {
+          finalTranscript += result[0]?.transcript ?? ''
+        }
+      }
+
+      if (finalTranscript && props.textareaRef) {
+        const textarea = props.textareaRef
+        const currentValue = textarea.value
+        const newValue
+          = currentValue + (currentValue ? ' ' : '') + finalTranscript
+
+        textarea.value = newValue
+        textarea.dispatchEvent(new Event('input', { bubbles: true }))
+        props.onTranscriptionChange?.(newValue)
+      }
+    }
+
+    speechRecognition.onerror = (event: any) => {
+      console.error('Speech recognition error:', event.error)
+      isListening.value = false
+    }
+
+    recognition.value = speechRecognition
+  }
+}
+
+function toggleListening() {
+  if (!recognition.value) {
+    return
+  }
+
+  if (isListening.value) {
+    recognition.value.stop()
+  }
+  else {
+    recognition.value.start()
+  }
+}
+
+onMounted(() => {
+  setupSpeechRecognition()
+})
+
+onUnmounted(() => {
+  if (recognition.value) {
+    recognition.value.stop()
+  }
+})
+
+watch(
+  () => [props.textareaRef, props.onTranscriptionChange],
+  () => {
+    if (recognition.value) {
+      recognition.value.stop()
+    }
+    setupSpeechRecognition()
+  },
+)
+
+const buttonClass = computed(() =>
+  cn(
+    'relative transition-all duration-200',
+    isListening.value && 'animate-pulse bg-accent text-accent-foreground',
+    props.class,
+  ),
+)
+
+const { class: _, textareaRef, onTranscriptionChange, ...restProps } = props
+</script>
+
+<template>
+  <PromptInputButton
+    :class="buttonClass"
+    :disabled="!recognition"
+    v-bind="restProps"
+    @click="toggleListening"
+  >
+    <MicIcon class="size-4" />
+  </PromptInputButton>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputSubmit.vue b/packages/elements/src/prompt-input/PromptInputSubmit.vue
index 1cb4f08..274009c 100644
--- a/packages/elements/src/prompt-input/PromptInputSubmit.vue
+++ b/packages/elements/src/prompt-input/PromptInputSubmit.vue
@@ -1,40 +1,57 @@
 <script setup lang="ts">
 import type { ChatStatus } from 'ai'
-import { Button } from '@repo/shadcn-vue/components/ui/button'
-import { Loader2, Send, Square, X } from 'lucide-vue-next'
-import { computed, useAttrs } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { InputGroupButton } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { CornerDownLeftIcon, Loader2Icon, SquareIcon, XIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
 
-interface Props {
-  class?: string
+type InputGroupButtonProps = InstanceType<typeof InputGroupButton>['$props']
+
+interface Props extends /* @vue-ignore */ InputGroupButtonProps {
+  class?: HTMLAttributes['class']
   status?: ChatStatus
-  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'
-  size?: 'default' | 'sm' | 'lg' | 'icon'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
-  size: 'icon',
+  size: 'icon-sm',
 })
 
-const attrs = useAttrs()
-
-const classes = computed(() => ['gap-1.5 rounded-lg', props.class])
-
 const icon = computed(() => {
-  if (props.status === 'submitted')
-    return Loader2
-  if (props.status === 'streaming')
-    return Square
-  if (props.status === 'error')
-    return X
-  return Send
+  if (props.status === 'submitted') {
+    return Loader2Icon
+  }
+  else if (props.status === 'streaming') {
+    return SquareIcon
+  }
+  else if (props.status === 'error') {
+    return XIcon
+  }
+  return CornerDownLeftIcon
 })
+
+const iconClass = computed(() => {
+  if (props.status === 'submitted') {
+    return 'size-4 animate-spin'
+  }
+  return 'size-4'
+})
+
+const { status, size, variant, class: _, ...restProps } = props
 </script>
 
 <template>
-  <Button :class="classes" :size="props.size" :variant="props.variant" type="submit" v-bind="attrs">
+  <InputGroupButton
+    aria-label="Submit"
+    :class="cn(props.class)"
+    :size="size"
+    :variant="variant"
+    type="submit"
+    v-bind="restProps"
+  >
     <slot>
-      <component :is="icon" class="size-4" />
+      <component :is="icon" :class="iconClass" />
     </slot>
-  </Button>
+  </InputGroupButton>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputTab.vue b/packages/elements/src/prompt-input/PromptInputTab.vue
new file mode 100644
index 0000000..c0cc3e1
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputTab.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn(props.class)" v-bind="props">
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputTabBody.vue b/packages/elements/src/prompt-input/PromptInputTabBody.vue
new file mode 100644
index 0000000..0cc5def
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputTabBody.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('space-y-1', props.class)" v-bind="props">
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputTabItem.vue b/packages/elements/src/prompt-input/PromptInputTabItem.vue
new file mode 100644
index 0000000..bc9d6fe
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputTabItem.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent', props.class)" v-bind="props">
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputTabLabel.vue b/packages/elements/src/prompt-input/PromptInputTabLabel.vue
new file mode 100644
index 0000000..2a9341a
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputTabLabel.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <h3 :class="cn('mb-2 px-3 font-medium text-muted-foreground text-xs', props.class)" v-bind="props">
+    <slot />
+  </h3>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputTabsList.vue b/packages/elements/src/prompt-input/PromptInputTabsList.vue
new file mode 100644
index 0000000..c0cc3e1
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputTabsList.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn(props.class)" v-bind="props">
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/prompt-input/PromptInputTextarea.vue b/packages/elements/src/prompt-input/PromptInputTextarea.vue
index 57573e9..e50b7d0 100644
--- a/packages/elements/src/prompt-input/PromptInputTextarea.vue
+++ b/packages/elements/src/prompt-input/PromptInputTextarea.vue
@@ -1,43 +1,120 @@
 <script setup lang="ts">
-import { Textarea } from '@repo/shadcn-vue/components/ui/textarea'
-import { computed, useAttrs } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { InputGroupTextarea } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ref } from 'vue'
+import { usePromptInputAttachments } from './usePromptInputAttachments'
+import { useOptionalPromptInputController } from './usePromptInputController'
 
-interface Props {
-  class?: string
+type InputGroupTextareaProps = InstanceType<typeof InputGroupTextarea>['$props']
+
+interface Props extends /* @vue-ignore */ InputGroupTextareaProps {
+  class?: HTMLAttributes['class']
   placeholder?: string
 }
 
-const props = defineProps<Props>()
-const attrs = useAttrs()
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'What would you like to know?',
+})
 
-const placeholder = props.placeholder ?? 'What would you like to know?'
+const emit = defineEmits<{
+  change: [event: Event]
+}>()
 
-const classes = computed(() => [
-  'w-full resize-none rounded-none border-none p-3 shadow-none outline-none ring-0',
-  'field-sizing-content max-h-[6lh] bg-transparent dark:bg-transparent',
-  'focus-visible:ring-0',
-  props.class,
-])
+const controller = useOptionalPromptInputController()
+const attachments = usePromptInputAttachments()
+const isComposing = ref(false)
 
 function handleKeyDown(e: KeyboardEvent) {
   if (e.key === 'Enter') {
-    if ((e as any).nativeEvent?.isComposing)
+    if (isComposing.value || e.isComposing) {
       return
-    if (e.shiftKey)
+    }
+    if (e.shiftKey) {
       return
+    }
     e.preventDefault()
-    const form = (e.target as HTMLTextAreaElement).form
+
+    // Check if submit button is disabled
+    const target = e.currentTarget as HTMLTextAreaElement
+    const form = target.form
+    const submitButton = form?.querySelector(
+      'button[type="submit"]',
+    ) as HTMLButtonElement | null
+
+    if (submitButton?.disabled) {
+      return
+    }
+
     form?.requestSubmit()
   }
+
+  // Remove last attachment when Backspace is pressed and textarea is empty
+  const target = e.currentTarget as HTMLTextAreaElement
+  if (
+    e.key === 'Backspace'
+    && target.value === ''
+    && attachments.files.length > 0
+  ) {
+    e.preventDefault()
+    const lastAttachment = attachments.files[attachments.files.length - 1]
+    if (lastAttachment) {
+      attachments.remove(lastAttachment.id)
+    }
+  }
+}
+
+function handlePaste(event: ClipboardEvent) {
+  const items = event.clipboardData?.items
+
+  if (!items) {
+    return
+  }
+
+  const files: File[] = []
+
+  for (const item of Array.from(items)) {
+    if (item.kind === 'file') {
+      const file = item.getAsFile()
+      if (file) {
+        files.push(file)
+      }
+    }
+  }
+
+  if (files.length > 0) {
+    event.preventDefault()
+    attachments.add(files)
+  }
 }
+
+function handleChange(e: Event) {
+  const target = e.currentTarget as HTMLTextAreaElement
+  if (controller) {
+    controller.textInput.setInput(target.value)
+  }
+  emit('change', e)
+}
+
+// Controlled vs uncontrolled
+const controlledProps = controller
+  ? {
+      value: controller.textInput.value,
+    }
+  : {}
+
+const { class: _, ...restProps } = props
 </script>
 
 <template>
-  <Textarea
-    :class="classes"
+  <InputGroupTextarea
+    :class="cn('field-sizing-content max-h-48 min-h-16', props.class)"
     name="message"
-    :placeholder="placeholder"
-    v-bind="attrs"
+    v-bind="{ ...restProps, ...controlledProps }"
+    @change="handleChange"
     @keydown="handleKeyDown"
+    @paste="handlePaste"
+    @compositionstart="isComposing = true"
+    @compositionend="isComposing = false"
   />
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputTools.vue b/packages/elements/src/prompt-input/PromptInputTools.vue
index d9fafa4..dd90bcf 100644
--- a/packages/elements/src/prompt-input/PromptInputTools.vue
+++ b/packages/elements/src/prompt-input/PromptInputTools.vue
@@ -1,22 +1,12 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
 
-interface Props {
-  class?: string
-}
-
-const props = defineProps<Props>()
-const attrs = useAttrs()
-
-const classes = computed(() => [
-  'flex items-center gap-1',
-  '[&_button:first-child]:rounded-bl-xl',
-  props.class,
-])
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <div :class="classes" v-bind="attrs">
+  <div :class="cn('flex items-center gap-1', props.class)">
     <slot />
   </div>
 </template>
diff --git a/packages/elements/src/prompt-input/index.ts b/packages/elements/src/prompt-input/index.ts
index be87dfe..7f73f06 100644
--- a/packages/elements/src/prompt-input/index.ts
+++ b/packages/elements/src/prompt-input/index.ts
@@ -1,11 +1,48 @@
 export { default as PromptInput } from './PromptInput.vue'
+export { default as PromptInputActionAddAttachments } from './PromptInputActionAddAttachments.vue'
+export { default as PromptInputActionMenu } from './PromptInputActionMenu.vue'
+export { default as PromptInputActionMenuContent } from './PromptInputActionMenuContent.vue'
+export { default as PromptInputActionMenuItem } from './PromptInputActionMenuItem.vue'
+export { default as PromptInputActionMenuTrigger } from './PromptInputActionMenuTrigger.vue'
+export { default as PromptInputAttachment } from './PromptInputAttachment.vue'
+export { default as PromptInputAttachments } from './PromptInputAttachments.vue'
+export { default as PromptInputBody } from './PromptInputBody.vue'
 export { default as PromptInputButton } from './PromptInputButton.vue'
+export { default as PromptInputCommand } from './PromptInputCommand.vue'
+export { default as PromptInputCommandEmpty } from './PromptInputCommandEmpty.vue'
+export { default as PromptInputCommandGroup } from './PromptInputCommandGroup.vue'
+export { default as PromptInputCommandInput } from './PromptInputCommandInput.vue'
+export { default as PromptInputCommandItem } from './PromptInputCommandItem.vue'
+export { default as PromptInputCommandList } from './PromptInputCommandList.vue'
+export { default as PromptInputCommandSeparator } from './PromptInputCommandSeparator.vue'
+export { default as PromptInputFooter } from './PromptInputFooter.vue'
+export { default as PromptInputHeader } from './PromptInputHeader.vue'
+export { default as PromptInputHoverCard } from './PromptInputHoverCard.vue'
+export { default as PromptInputHoverCardContent } from './PromptInputHoverCardContent.vue'
+export { default as PromptInputHoverCardTrigger } from './PromptInputHoverCardTrigger.vue'
 export { default as PromptInputModelSelect } from './PromptInputModelSelect.vue'
 export { default as PromptInputModelSelectContent } from './PromptInputModelSelectContent.vue'
 export { default as PromptInputModelSelectItem } from './PromptInputModelSelectItem.vue'
 export { default as PromptInputModelSelectTrigger } from './PromptInputModelSelectTrigger.vue'
 export { default as PromptInputModelSelectValue } from './PromptInputModelSelectValue.vue'
+export { default as PromptInputProvider } from './PromptInputProvider.vue'
+export { default as PromptInputSelect } from './PromptInputSelect.vue'
+export { default as PromptInputSelectContent } from './PromptInputSelectContent.vue'
+export { default as PromptInputSelectItem } from './PromptInputSelectItem.vue'
+export { default as PromptInputSelectTrigger } from './PromptInputSelectTrigger.vue'
+export { default as PromptInputSelectValue } from './PromptInputSelectValue.vue'
+export { default as PromptInputSpeechButton } from './PromptInputSpeechButton.vue'
 export { default as PromptInputSubmit } from './PromptInputSubmit.vue'
+export { default as PromptInputTab } from './PromptInputTab.vue'
+export { default as PromptInputTabBody } from './PromptInputTabBody.vue'
+export { default as PromptInputTabItem } from './PromptInputTabItem.vue'
+export { default as PromptInputTabLabel } from './PromptInputTabLabel.vue'
+export { default as PromptInputTabsList } from './PromptInputTabsList.vue'
 export { default as PromptInputTextarea } from './PromptInputTextarea.vue'
 export { default as PromptInputToolbar } from './PromptInputToolbar.vue'
 export { default as PromptInputTools } from './PromptInputTools.vue'
+
+// export * from './types'
+export * from './usePromptInputAttachments'
+export * from './usePromptInputController'
+export * from './useProviderAttachments'
diff --git a/packages/elements/src/prompt-input/types.ts b/packages/elements/src/prompt-input/types.ts
new file mode 100644
index 0000000..60dec48
--- /dev/null
+++ b/packages/elements/src/prompt-input/types.ts
@@ -0,0 +1,37 @@
+import type { FileUIPart as AIFileUIPart } from 'ai'
+import type { InjectionKey, Ref } from 'vue'
+
+// Mimicking the AI SDK type
+export type FileUIPart = AIFileUIPart & {
+  id: string
+  file?: File // Keep original file reference handy
+}
+
+export interface PromptInputMessage {
+  text: string
+  files: FileUIPart[]
+}
+
+export interface AttachmentsContext {
+  files: Ref<FileUIPart[]>
+  add: (files: File[] | FileList) => void
+  remove: (id: string) => void
+  clear: () => void
+  openFileDialog: () => void
+  fileInputRef: Ref<HTMLInputElement | null>
+}
+
+export interface TextInputContext {
+  value: Ref<string>
+  setInput: (v: string) => void
+  clear: () => void
+}
+
+export interface PromptInputControllerContext {
+  textInput: TextInputContext
+  attachments: AttachmentsContext
+  registerFileInput: (el: HTMLInputElement | null, openFn: () => void) => void
+}
+
+export const PromptInputControllerKey: InjectionKey<PromptInputControllerContext> = Symbol('PromptInputController')
+export const AttachmentsContextKey: InjectionKey<AttachmentsContext> = Symbol('AttachmentsContext')
diff --git a/packages/elements/src/prompt-input/usePromptInputAttachments.ts b/packages/elements/src/prompt-input/usePromptInputAttachments.ts
new file mode 100644
index 0000000..b0bd523
--- /dev/null
+++ b/packages/elements/src/prompt-input/usePromptInputAttachments.ts
@@ -0,0 +1,30 @@
+import type { InjectionKey } from 'vue'
+import type { AttachmentsContext } from './usePromptInputController'
+import { inject } from 'vue'
+import { useOptionalProviderAttachments } from './useProviderAttachments'
+
+export const LocalAttachmentsKey: InjectionKey<AttachmentsContext>
+  = Symbol('LocalAttachments')
+
+/**
+ * Dual-mode hook that works with either provider or local attachments.
+ * Prefers provider context if available, falls back to local context.
+ * Throws error if used outside both contexts.
+ */
+export function usePromptInputAttachments(): AttachmentsContext {
+  // Try provider first
+  const provider = useOptionalProviderAttachments()
+
+  // Fall back to local context
+  const local = inject(LocalAttachmentsKey, undefined)
+
+  const context = provider ?? local
+
+  if (!context) {
+    throw new Error(
+      'usePromptInputAttachments must be used within a PromptInput or PromptInputProvider',
+    )
+  }
+
+  return context
+}
diff --git a/packages/elements/src/prompt-input/usePromptInputController.ts b/packages/elements/src/prompt-input/usePromptInputController.ts
new file mode 100644
index 0000000..dc92143
--- /dev/null
+++ b/packages/elements/src/prompt-input/usePromptInputController.ts
@@ -0,0 +1,56 @@
+import type { FileUIPart } from 'ai'
+import type { InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+
+export interface AttachmentsContext {
+  files: (FileUIPart & { id: string })[]
+  add: (files: File[] | FileList) => void
+  remove: (id: string) => void
+  clear: () => void
+  openFileDialog: () => void
+  fileInputRef: Ref<HTMLInputElement | null>
+}
+
+export interface TextInputContext {
+  value: string
+  setInput: (v: string) => void
+  clear: () => void
+}
+
+export interface PromptInputControllerContext {
+  textInput: TextInputContext
+  attachments: AttachmentsContext
+  /** INTERNAL: Allows PromptInput to register its file input + "open" callback */
+  __registerFileInput: (
+    ref: Ref<HTMLInputElement | null>,
+    open: () => void
+  ) => void
+}
+
+export const PromptInputControllerKey: InjectionKey<PromptInputControllerContext>
+  = Symbol('PromptInputController')
+
+export const ProviderAttachmentsKey: InjectionKey<AttachmentsContext>
+  = Symbol('ProviderAttachments')
+
+/**
+ * Main hook to access the prompt input controller.
+ * Throws error if used outside PromptInputProvider.
+ */
+export function usePromptInputController(): PromptInputControllerContext {
+  const ctx = inject(PromptInputControllerKey)
+  if (!ctx) {
+    throw new Error(
+      'Wrap your component inside <PromptInputProvider> to use usePromptInputController().',
+    )
+  }
+  return ctx
+}
+
+/**
+ * Optional variant that doesn't throw.
+ * Useful for dual-mode components.
+ */
+export function useOptionalPromptInputController(): PromptInputControllerContext | undefined {
+  return inject(PromptInputControllerKey, undefined)
+}
diff --git a/packages/elements/src/prompt-input/useProviderAttachments.ts b/packages/elements/src/prompt-input/useProviderAttachments.ts
new file mode 100644
index 0000000..3fa9485
--- /dev/null
+++ b/packages/elements/src/prompt-input/useProviderAttachments.ts
@@ -0,0 +1,25 @@
+import type { AttachmentsContext } from './usePromptInputController'
+import { inject } from 'vue'
+import { ProviderAttachmentsKey } from './usePromptInputController'
+
+/**
+ * Hook to access provider-level attachments.
+ * Throws error if used outside PromptInputProvider.
+ */
+export function useProviderAttachments(): AttachmentsContext {
+  const ctx = inject(ProviderAttachmentsKey)
+  if (!ctx) {
+    throw new Error(
+      'Wrap your component inside <PromptInputProvider> to use useProviderAttachments().',
+    )
+  }
+  return ctx
+}
+
+/**
+ * Optional variant that doesn't throw.
+ * Useful for dual-mode components.
+ */
+export function useOptionalProviderAttachments(): AttachmentsContext | undefined {
+  return inject(ProviderAttachmentsKey, undefined)
+}
diff --git a/packages/examples/src/prompt-input-header-controls.vue b/packages/examples/src/prompt-input-header-controls.vue
new file mode 100644
index 0000000..37c936f
--- /dev/null
+++ b/packages/examples/src/prompt-input-header-controls.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { usePromptInputController } from '@repo/elements/prompt-input'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { ButtonGroup } from '@repo/shadcn-vue/components/ui/button-group'
+
+const controller = usePromptInputController()
+</script>
+
+<template>
+  <header class="mt-8 flex items-center justify-between">
+    <p class="text-sm">
+      Header Controls via
+      <code class="rounded-md bg-muted p-1 font-bold">
+        PromptInputProvider
+      </code>
+    </p>
+    <ButtonGroup>
+      <Button
+        size="sm"
+        type="button"
+        variant="outline"
+        @click="controller.textInput.clear()"
+      >
+        Clear input
+      </Button>
+      <Button
+        size="sm"
+        type="button"
+        variant="outline"
+        @click="controller.textInput.setInput('Inserted via PromptInputProvider')"
+      >
+        Set input
+      </Button>
+      <Button
+        size="sm"
+        type="button"
+        variant="outline"
+        @click="controller.attachments.clear()"
+      >
+        Clear attachments
+      </Button>
+    </ButtonGroup>
+  </header>
+</template>
diff --git a/packages/examples/src/prompt-input.vue b/packages/examples/src/prompt-input.vue
index c87704d..f6cb0a7 100644
--- a/packages/examples/src/prompt-input.vue
+++ b/packages/examples/src/prompt-input.vue
@@ -1,89 +1,197 @@
+<!-- eslint-disable no-console -->
 <script setup lang="ts">
+// import type { PromptInputMessage } from '@repo/elements/prompt-input'
+import {
+  ModelSelector,
+  ModelSelectorContent,
+  ModelSelectorEmpty,
+  ModelSelectorGroup,
+  ModelSelectorInput,
+  ModelSelectorItem,
+  ModelSelectorList,
+  ModelSelectorLogo,
+  ModelSelectorLogoGroup,
+  ModelSelectorName,
+  ModelSelectorTrigger,
+} from '@repo/elements/model-selector'
 import {
   PromptInput,
+  PromptInputActionAddAttachments,
+  PromptInputActionMenu,
+  PromptInputActionMenuContent,
+  PromptInputActionMenuTrigger,
+  PromptInputAttachment,
+  PromptInputAttachments,
+  PromptInputBody,
   PromptInputButton,
-  PromptInputModelSelect,
-  PromptInputModelSelectContent,
-  PromptInputModelSelectItem,
-  PromptInputModelSelectTrigger,
-  PromptInputModelSelectValue,
+  PromptInputFooter,
+
+  PromptInputProvider,
+  PromptInputSpeechButton,
   PromptInputSubmit,
   PromptInputTextarea,
-  PromptInputToolbar,
   PromptInputTools,
+  // usePromptInputController,
 } from '@repo/elements/prompt-input'
-import { Globe, Mic, Plus } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-type Status = 'submitted' | 'streaming' | 'ready' | 'error'
+// import { Button } from '@repo/shadcn-vue/components/ui/button'
+// import { ButtonGroup } from '@repo/shadcn-vue/components/ui/button-group'
+import { CheckIcon, GlobeIcon } from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+import HeaderControls from './prompt-input-header-controls.vue'
 
 const models = [
-  { id: 'gpt-4', name: 'GPT-4' },
-  { id: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo' },
-  { id: 'claude-2', name: 'Claude 2' },
-  { id: 'claude-instant', name: 'Claude Instant' },
-  { id: 'palm-2', name: 'PaLM 2' },
-  { id: 'llama-2-70b', name: 'Llama 2 70B' },
-  { id: 'llama-2-13b', name: 'Llama 2 13B' },
-  { id: 'cohere-command', name: 'Command' },
-  { id: 'mistral-7b', name: 'Mistral 7B' },
+  {
+    id: 'gpt-4o',
+    name: 'GPT-4o',
+    chef: 'OpenAI',
+    chefSlug: 'openai',
+    providers: ['openai', 'azure'],
+  },
+  {
+    id: 'gpt-4o-mini',
+    name: 'GPT-4o Mini',
+    chef: 'OpenAI',
+    chefSlug: 'openai',
+    providers: ['openai', 'azure'],
+  },
+  {
+    id: 'claude-opus-4-20250514',
+    name: 'Claude 4 Opus',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google', 'amazon-bedrock'],
+  },
+  {
+    id: 'claude-sonnet-4-20250514',
+    name: 'Claude 4 Sonnet',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google', 'amazon-bedrock'],
+  },
+  {
+    id: 'gemini-2.0-flash-exp',
+    name: 'Gemini 2.0 Flash',
+    chef: 'Google',
+    chefSlug: 'google',
+    providers: ['google'],
+  },
 ]
 
-const text = ref('')
-const model = ref(models[0]!.id)
-const status = ref<Status>('ready')
+const SUBMITTING_TIMEOUT = 200
+const STREAMING_TIMEOUT = 2000
+
+const model = ref<string>(models[0].id)
+const modelSelectorOpen = ref(false)
+const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready')
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+const selectedModelData = computed(() => models.find(m => m.id === model.value))
 
-function onSubmit(event: Event) {
-  event.preventDefault()
-  if (!text.value)
+function handleSubmit(message: any) {
+  // function handleSubmit(message: PromptInputMessage) {
+  console.log(message)
+  const hasText = Boolean(message.text)
+  const hasAttachments = Boolean(message.files?.length)
+
+  if (!(hasText || hasAttachments)) {
     return
+  }
 
   status.value = 'submitted'
 
+  console.log('Submitting message:', message)
+
+  console.log('Submitting message:')
+
   setTimeout(() => {
     status.value = 'streaming'
-  }, 200)
+  }, SUBMITTING_TIMEOUT)
 
   setTimeout(() => {
     status.value = 'ready'
-  }, 2000)
+  }, STREAMING_TIMEOUT)
 }
 </script>
 
 <template>
-  <PromptInput @submit="onSubmit">
-    <PromptInputTextarea v-model="text" />
-
-    <PromptInputToolbar>
-      <PromptInputTools>
-        <PromptInputButton>
-          <Plus class="size-4" />
-        </PromptInputButton>
-        <PromptInputButton>
-          <Mic class="size-4" />
-        </PromptInputButton>
-        <PromptInputButton>
-          <Globe class="size-4" />
-          <span>Search</span>
-        </PromptInputButton>
-
-        <PromptInputModelSelect v-model="model">
-          <PromptInputModelSelectTrigger>
-            <PromptInputModelSelectValue />
-          </PromptInputModelSelectTrigger>
-          <PromptInputModelSelectContent>
-            <PromptInputModelSelectItem
-              v-for="m in models"
-              :key="m.id"
-              :value="m.id"
-            >
-              {{ m.name }}
-            </PromptInputModelSelectItem>
-          </PromptInputModelSelectContent>
-        </PromptInputModelSelect>
-      </PromptInputTools>
+  <div class="size-full">
+    <PromptInputProvider>
+      <PromptInput global-drop multiple @submit="handleSubmit">
+        <PromptInputAttachments>
+          <template #default="{ attachment }">
+            <PromptInputAttachment :data="attachment" />
+          </template>
+        </PromptInputAttachments>
+        <PromptInputBody>
+          <PromptInputTextarea ref="textareaRef" placeholder="What can I do for you?" />
+        </PromptInputBody>
+        <PromptInputFooter>
+          <PromptInputTools>
+            <PromptInputActionMenu>
+              <PromptInputActionMenuTrigger />
+              <PromptInputActionMenuContent>
+                <PromptInputActionAddAttachments />
+              </PromptInputActionMenuContent>
+            </PromptInputActionMenu>
+            <PromptInputSpeechButton :textarea-ref="textareaRef" />
+            <PromptInputButton>
+              <GlobeIcon :size="16" />
+              <span>Search</span>
+            </PromptInputButton>
+            <ModelSelector v-model:open="modelSelectorOpen">
+              <ModelSelectorTrigger as-child>
+                <PromptInputButton>
+                  <ModelSelectorLogo
+                    v-if="selectedModelData?.chefSlug"
+                    :provider="selectedModelData.chefSlug"
+                  />
+                  <ModelSelectorName v-if="selectedModelData?.name">
+                    {{ selectedModelData.name }}
+                  </ModelSelectorName>
+                </PromptInputButton>
+              </ModelSelectorTrigger>
+              <ModelSelectorContent>
+                <ModelSelectorInput placeholder="Search models..." />
+                <ModelSelectorList>
+                  <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
+                  <ModelSelectorGroup
+                    v-for="chef in ['OpenAI', 'Anthropic', 'Google']"
+                    :key="chef"
+                    :heading="chef"
+                  >
+                    <ModelSelectorItem
+                      v-for="m in models.filter((model) => model.chef === chef)"
+                      :key="m.id"
+                      :value="m.id"
+                      @select="
+                        () => {
+                          model = m.id
+                          modelSelectorOpen = false
+                        }
+                      "
+                    >
+                      <ModelSelectorLogo :provider="m.chefSlug" />
+                      <ModelSelectorName>{{ m.name }}</ModelSelectorName>
+                      <ModelSelectorLogoGroup>
+                        <ModelSelectorLogo
+                          v-for="provider in m.providers"
+                          :key="provider"
+                          :provider="provider"
+                        />
+                      </ModelSelectorLogoGroup>
+                      <CheckIcon v-if="model === m.id" class="ml-auto size-4" />
+                      <div v-else class="ml-auto size-4" />
+                    </ModelSelectorItem>
+                  </ModelSelectorGroup>
+                </ModelSelectorList>
+              </ModelSelectorContent>
+            </ModelSelector>
+          </PromptInputTools>
+          <PromptInputSubmit :status="status" />
+        </PromptInputFooter>
+      </PromptInput>
 
-      <PromptInputSubmit :disabled="!text" :status="status" />
-    </PromptInputToolbar>
-  </PromptInput>
+      <HeaderControls />
+    </PromptInputProvider>
+  </div>
 </template>
diff --git a/packages/shadcn-vue/components/ui/input-group/InputGroup.vue b/packages/shadcn-vue/components/ui/input-group/InputGroup.vue
new file mode 100644
index 0000000..0515587
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/input-group/InputGroup.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="input-group"
+    role="group"
+    :class="cn(
+      'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+      'h-9 min-w-0 has-[>textarea]:h-auto',
+
+      // Variants based on alignment.
+      'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+      'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+      'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+      'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+      // Focus state.
+      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+      // Error state.
+      'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/shadcn-vue/components/ui/input-group/InputGroupAddon.vue b/packages/shadcn-vue/components/ui/input-group/InputGroupAddon.vue
new file mode 100644
index 0000000..6096037
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/input-group/InputGroupAddon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { InputGroupVariants } from '.'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { inputGroupAddonVariants } from '.'
+
+const props = withDefaults(defineProps<{
+  align?: InputGroupVariants['align']
+  class?: HTMLAttributes['class']
+}>(), {
+  align: 'inline-start',
+})
+
+function handleInputGroupAddonClick(e: MouseEvent) {
+  const currentTarget = e.currentTarget as HTMLElement | null
+  const target = e.target as HTMLElement | null
+  if (target && target.closest('button')) {
+    return
+  }
+  if (currentTarget && currentTarget?.parentElement) {
+    currentTarget.parentElement?.querySelector('input')?.focus()
+  }
+}
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="input-group-addon"
+    :data-align="props.align"
+    :class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
+    @click="handleInputGroupAddonClick"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/shadcn-vue/components/ui/input-group/InputGroupButton.vue b/packages/shadcn-vue/components/ui/input-group/InputGroupButton.vue
new file mode 100644
index 0000000..6896201
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/input-group/InputGroupButton.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { InputGroupButtonProps } from '.'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { inputGroupButtonVariants } from '.'
+
+const props = withDefaults(defineProps<InputGroupButtonProps>(), {
+  size: 'xs',
+  variant: 'ghost',
+})
+</script>
+
+<template>
+  <Button
+    :data-size="props.size"
+    :variant="props.variant"
+    :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)"
+  >
+    <slot />
+  </Button>
+</template>
diff --git a/packages/shadcn-vue/components/ui/input-group/InputGroupInput.vue b/packages/shadcn-vue/components/ui/input-group/InputGroupInput.vue
new file mode 100644
index 0000000..3000f68
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/input-group/InputGroupInput.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Input } from '@repo/shadcn-vue/components/ui/input'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Input
+    data-slot="input-group-control"
+    :class="cn(
+      'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+      props.class,
+    )"
+  />
+</template>
diff --git a/packages/shadcn-vue/components/ui/input-group/InputGroupText.vue b/packages/shadcn-vue/components/ui/input-group/InputGroupText.vue
new file mode 100644
index 0000000..eaa32c9
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/input-group/InputGroupText.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    :class="cn(
+      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/packages/shadcn-vue/components/ui/input-group/InputGroupTextarea.vue b/packages/shadcn-vue/components/ui/input-group/InputGroupTextarea.vue
new file mode 100644
index 0000000..2078f74
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/input-group/InputGroupTextarea.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Textarea } from '@repo/shadcn-vue/components/ui/textarea'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Textarea
+    data-slot="input-group-control"
+    :class="cn(
+      'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+      props.class,
+    )"
+  />
+</template>
diff --git a/packages/shadcn-vue/components/ui/input-group/index.ts b/packages/shadcn-vue/components/ui/input-group/index.ts
new file mode 100644
index 0000000..fd8edc7
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/input-group/index.ts
@@ -0,0 +1,59 @@
+import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+import { cva } from 'class-variance-authority'
+
+export { default as InputGroup } from './InputGroup.vue'
+export { default as InputGroupAddon } from './InputGroupAddon.vue'
+export { default as InputGroupButton } from './InputGroupButton.vue'
+export { default as InputGroupInput } from './InputGroupInput.vue'
+export { default as InputGroupText } from './InputGroupText.vue'
+export { default as InputGroupTextarea } from './InputGroupTextarea.vue'
+
+export const inputGroupAddonVariants = cva(
+  'text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*=\'size-\'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50',
+  {
+    variants: {
+      align: {
+        'inline-start':
+          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+        'inline-end':
+          'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+        'block-start':
+          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+        'block-end':
+          'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+)
+
+export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>
+
+export const inputGroupButtonVariants = cva(
+  'text-sm shadow-none flex gap-2 items-center',
+  {
+    variants: {
+      size: {
+        'xs': 'h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*=\'size-\'])]:size-3.5 has-[>svg]:px-2',
+        'sm': 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
+        'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+      },
+    },
+    defaultVariants: {
+      size: 'xs',
+    },
+  },
+)
+
+export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>
+
+export interface InputGroupButtonProps {
+  variant?: ButtonVariants['variant']
+  size?: InputGroupButtonVariants['size']
+  class?: HTMLAttributes['class']
+}

From f9cf75cda3975196c952d71bdf692ab89c813d89 Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Sun, 30 Nov 2025 01:02:30 +0100
Subject: [PATCH 2/7] fix: state management into a new context module and
 remove model selection components

---
 .../elements/src/prompt-input/PromptInput.vue | 360 +++---------------
 .../PromptInputActionAddAttachments.vue       |  32 +-
 .../prompt-input/PromptInputAttachment.vue    |  95 ++---
 .../prompt-input/PromptInputAttachments.vue   |  23 +-
 .../prompt-input/PromptInputModelSelect.vue   |  12 -
 .../PromptInputModelSelectContent.vue         |  17 -
 .../PromptInputModelSelectItem.vue            |  18 -
 .../PromptInputModelSelectTrigger.vue         |  23 --
 .../PromptInputModelSelectValue.vue           |  15 -
 .../src/prompt-input/PromptInputProvider.vue  | 124 +-----
 .../prompt-input/PromptInputSpeechButton.vue  | 149 ++------
 .../src/prompt-input/PromptInputTextarea.vue  | 101 ++---
 .../src/prompt-input/PromptInputToolbar.vue   |  18 -
 packages/elements/src/prompt-input/context.ts | 191 ++++++++++
 packages/elements/src/prompt-input/index.ts   |  14 +-
 packages/elements/src/prompt-input/types.ts   |  45 +--
 .../prompt-input/usePromptInputAttachments.ts |  30 --
 .../prompt-input/usePromptInputController.ts  |  56 ---
 .../prompt-input/useProviderAttachments.ts    |  25 --
 .../src/prompt-input-header-controls.vue      |  28 +-
 packages/examples/src/prompt-input.vue        |  75 ++--
 21 files changed, 461 insertions(+), 990 deletions(-)
 delete mode 100644 packages/elements/src/prompt-input/PromptInputModelSelect.vue
 delete mode 100644 packages/elements/src/prompt-input/PromptInputModelSelectContent.vue
 delete mode 100644 packages/elements/src/prompt-input/PromptInputModelSelectItem.vue
 delete mode 100644 packages/elements/src/prompt-input/PromptInputModelSelectTrigger.vue
 delete mode 100644 packages/elements/src/prompt-input/PromptInputModelSelectValue.vue
 delete mode 100644 packages/elements/src/prompt-input/PromptInputToolbar.vue
 create mode 100644 packages/elements/src/prompt-input/context.ts
 delete mode 100644 packages/elements/src/prompt-input/usePromptInputAttachments.ts
 delete mode 100644 packages/elements/src/prompt-input/usePromptInputController.ts
 delete mode 100644 packages/elements/src/prompt-input/useProviderAttachments.ts

diff --git a/packages/elements/src/prompt-input/PromptInput.vue b/packages/elements/src/prompt-input/PromptInput.vue
index 85721bb..b7e9794 100644
--- a/packages/elements/src/prompt-input/PromptInput.vue
+++ b/packages/elements/src/prompt-input/PromptInput.vue
@@ -1,345 +1,87 @@
 <script setup lang="ts">
-import type { FileUIPart } from 'ai'
-import type { AttachmentsContext } from './usePromptInputController'
+import type { HTMLAttributes } from 'vue'
 import { InputGroup } from '@repo/shadcn-vue/components/ui/input-group'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { nanoid } from 'nanoid'
-import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
-import { LocalAttachmentsKey } from './usePromptInputAttachments'
-import { useOptionalPromptInputController } from './usePromptInputController'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { usePromptInput } from './context'
 
-export interface PromptInputMessage {
-  text: string
-  files: FileUIPart[]
-}
-
-interface Props {
-  class?: string
+const props = defineProps<{
+  class?: HTMLAttributes['class']
   accept?: string
   multiple?: boolean
   globalDrop?: boolean
-  syncHiddenInput?: boolean
   maxFiles?: number
   maxFileSize?: number
-  onError?: (err: {
-    code: 'max_files' | 'max_file_size' | 'accept'
-    message: string
-  }) => void
-  onSubmit: (
-    message: PromptInputMessage,
-    event: Event
-  ) => void | Promise<void>
-}
-
-const props = defineProps<Props>()
+  initialInput?: string
+}>()
 
-// Try to use provider controller if present
-const controller = useOptionalPromptInputController()
-const usingProvider = !!controller
-
-// Refs
-const inputRef = ref<HTMLInputElement | null>(null)
 const formRef = ref<HTMLFormElement | null>(null)
 
-// ----- Local attachments (only used when no provider) -----
-const items = ref<(FileUIPart & { id: string })[]>([])
-const files = computed(() =>
-  usingProvider ? controller!.attachments.files : items.value,
-)
-
-function matchesAccept(f: File): boolean {
-  if (!props.accept || props.accept.trim() === '') {
-    return true
-  }
-  if (props.accept.includes('image/*')) {
-    return f.type.startsWith('image/')
-  }
-  return true
-}
-
-function addLocal(fileList: File[] | FileList) {
-  const incoming = Array.from(fileList)
-  const accepted = incoming.filter(f => matchesAccept(f))
-
-  if (incoming.length && accepted.length === 0) {
-    props.onError?.({
-      code: 'accept',
-      message: 'No files match the accepted types.',
-    })
-    return
-  }
-
-  const withinSize = (f: File) =>
-    props.maxFileSize ? f.size <= props.maxFileSize : true
-  const sized = accepted.filter(withinSize)
+const { fileInputRef, addFiles, submitForm } = usePromptInput()
 
-  if (accepted.length > 0 && sized.length === 0) {
-    props.onError?.({
-      code: 'max_file_size',
-      message: 'All files exceed the maximum size.',
-    })
-    return
+function handleDragOver(e: DragEvent) {
+  if (e.dataTransfer?.types?.includes('Files')) {
+    e.preventDefault()
   }
-
-  items.value = (() => {
-    const prev = items.value
-    const capacity
-      = typeof props.maxFiles === 'number'
-        ? Math.max(0, props.maxFiles - prev.length)
-        : undefined
-    const capped
-      = typeof capacity === 'number' ? sized.slice(0, capacity) : sized
-
-    if (typeof capacity === 'number' && sized.length > capacity) {
-      props.onError?.({
-        code: 'max_files',
-        message: 'Too many files. Some were not added.',
-      })
-    }
-
-    const next: (FileUIPart & { id: string })[] = []
-    for (const file of capped) {
-      next.push({
-        id: nanoid(),
-        type: 'file',
-        url: URL.createObjectURL(file),
-        mediaType: file.type,
-        filename: file.name,
-      })
-    }
-    return prev.concat(next)
-  })()
 }
 
-function removeLocal(id: string) {
-  const found = items.value.find(file => file.id === id)
-  if (found?.url) {
-    URL.revokeObjectURL(found.url)
+function handleDrop(e: DragEvent) {
+  if (e.dataTransfer?.types?.includes('Files')) {
+    e.preventDefault()
   }
-  items.value = items.value.filter(file => file.id !== id)
-}
-
-function clearLocal() {
-  for (const file of items.value) {
-    if (file.url) {
-      URL.revokeObjectURL(file.url)
-    }
+  if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+    addFiles(e.dataTransfer.files)
   }
-  items.value = []
-}
-
-function openFileDialogLocal() {
-  inputRef.value?.click()
 }
 
-const add = usingProvider ? controller!.attachments.add : addLocal
-const remove = usingProvider ? controller!.attachments.remove : removeLocal
-const clear = usingProvider ? controller!.attachments.clear : clearLocal
-const openFileDialog = usingProvider
-  ? controller!.attachments.openFileDialog
-  : openFileDialogLocal
-
-// Register file input with provider
-onMounted(() => {
-  if (usingProvider) {
-    controller!.__registerFileInput(inputRef, () => inputRef.value?.click())
-  }
-})
-
-// Sync hidden input
-watch(files, () => {
-  if (props.syncHiddenInput && inputRef.value && files.value.length === 0) {
-    inputRef.value.value = ''
-  }
-})
-
-// Form drag and drop
 onMounted(() => {
-  const form = formRef.value
-  if (!form)
-    return
-
-  const onDragOver = (e: DragEvent) => {
-    if (e.dataTransfer?.types?.includes('Files')) {
-      e.preventDefault()
-    }
-  }
-  const onDrop = (e: DragEvent) => {
-    if (e.dataTransfer?.types?.includes('Files')) {
-      e.preventDefault()
-    }
-    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
-      add(e.dataTransfer.files)
-    }
+  if (props.globalDrop) {
+    document.addEventListener('dragover', handleDragOver)
+    document.addEventListener('drop', handleDrop)
   }
-
-  form.addEventListener('dragover', onDragOver)
-  form.addEventListener('drop', onDrop)
-
-  onUnmounted(() => {
-    form.removeEventListener('dragover', onDragOver)
-    form.removeEventListener('drop', onDrop)
-  })
-})
-
-// Global drop (opt-in)
-onMounted(() => {
-  if (!props.globalDrop)
-    return
-
-  const onDragOver = (e: DragEvent) => {
-    if (e.dataTransfer?.types?.includes('Files')) {
-      e.preventDefault()
-    }
-  }
-  const onDrop = (e: DragEvent) => {
-    if (e.dataTransfer?.types?.includes('Files')) {
-      e.preventDefault()
-    }
-    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
-      add(e.dataTransfer.files)
-    }
-  }
-
-  document.addEventListener('dragover', onDragOver)
-  document.addEventListener('drop', onDrop)
-
-  onUnmounted(() => {
-    document.removeEventListener('dragover', onDragOver)
-    document.removeEventListener('drop', onDrop)
-  })
 })
 
-// Cleanup on unmount (only if not using provider)
 onUnmounted(() => {
-  if (!usingProvider) {
-    for (const f of items.value) {
-      if (f.url)
-        URL.revokeObjectURL(f.url)
-    }
+  if (props.globalDrop) {
+    document.removeEventListener('dragover', handleDragOver)
+    document.removeEventListener('drop', handleDrop)
   }
 })
 
-function handleChange(event: Event) {
-  const target = event.currentTarget as HTMLInputElement
-  if (target.files) {
-    add(target.files)
+function onFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (input.files) {
+    addFiles(input.files)
   }
-  // Reset to allow selecting same files again
-  target.value = ''
+  input.value = ''
 }
 
-async function convertBlobUrlToDataUrl(url: string): Promise<string | null> {
-  try {
-    const response = await fetch(url)
-    const blob = await response.blob()
-    return new Promise((resolve) => {
-      const reader = new FileReader()
-      reader.onloadend = () => resolve(reader.result as string)
-      reader.onerror = () => resolve(null)
-      reader.readAsDataURL(blob)
-    })
-  }
-  catch {
-    return null
-  }
-}
-
-function handleSubmit(event: Event) {
-  event.preventDefault()
-
-  const form = event.currentTarget as HTMLFormElement
-  const text = usingProvider
-    ? controller!.textInput.value
-    : (() => {
-        const formData = new FormData(form)
-        return (formData.get('message') as string) || ''
-      })()
-
-  // Reset form immediately
-  if (!usingProvider) {
-    form.reset()
-  }
-
-  // Convert blob URLs to data URLs
-  Promise.all(
-    files.value.map(async ({ id, ...item }) => {
-      if (item.url && item.url.startsWith('blob:')) {
-        const dataUrl = await convertBlobUrlToDataUrl(item.url)
-        return {
-          ...item,
-          url: dataUrl ?? item.url,
-        }
-      }
-      return item
-    }),
-  )
-    .then((convertedFiles: FileUIPart[]) => {
-      try {
-        const result = props.onSubmit({ text, files: convertedFiles }, event)
-
-        if (result instanceof Promise) {
-          result
-            .then(() => {
-              clear()
-              if (usingProvider) {
-                controller!.textInput.clear()
-              }
-            })
-            .catch(() => {
-              // Don't clear on error
-            })
-        }
-        else {
-          clear()
-          if (usingProvider) {
-            controller!.textInput.clear()
-          }
-        }
-      }
-      catch {
-        // Don't clear on error
-      }
-    })
-    .catch(() => {
-      // Don't clear on error
-    })
-}
-
-// Create attachments context for children
-const ctx = computed<AttachmentsContext>(() => ({
-  files: files.value.map(item => ({ ...item, id: item.id })),
-  add,
-  remove,
-  clear,
-  openFileDialog,
-  fileInputRef: inputRef,
-}))
-
-// Only provide local context if not using provider
-if (!usingProvider) {
-  provide(LocalAttachmentsKey, ctx.value)
+function onSubmit(e: Event) {
+  e.preventDefault()
+  submitForm()
 }
 </script>
 
 <template>
-  <input
-    ref="inputRef"
-    :accept="props.accept"
-    :multiple="props.multiple"
-    type="file"
-    class="hidden"
-    aria-label="Upload files"
-    title="Upload files"
-    @change="handleChange"
-  >
-  <form
-    ref="formRef"
-    :class="cn('w-full', props.class)"
-    @submit="handleSubmit"
-  >
-    <InputGroup class="overflow-hidden">
-      <slot />
-    </InputGroup>
-  </form>
+  <div>
+    <input
+      ref="fileInputRef"
+      type="file"
+      class="hidden"
+      :accept="accept"
+      :multiple="multiple"
+      @change="onFileChange"
+    >
+    <form
+      ref="formRef"
+      :class="cn('w-full', props.class)"
+      @submit="onSubmit"
+      @dragover.prevent="handleDragOver"
+      @drop.prevent="handleDrop"
+    >
+      <InputGroup class="overflow-hidden">
+        <slot />
+      </InputGroup>
+    </form>
+  </div>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue b/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue
index 4f666f8..34e91aa 100644
--- a/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue
+++ b/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue
@@ -1,36 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
 import { DropdownMenuItem } from '@repo/shadcn-vue/components/ui/dropdown-menu'
 import { ImageIcon } from 'lucide-vue-next'
-import { usePromptInputAttachments } from './usePromptInputAttachments'
+import { usePromptInput } from './context'
 
-type DropdownMenuItemProps = InstanceType<typeof DropdownMenuItem>['$props']
+defineProps<{ label?: string }>()
 
-interface Props extends /* @vue-ignore */ DropdownMenuItemProps {
-  class?: HTMLAttributes['class']
-  label?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label: 'Add photos or files',
-})
-
-const attachments = usePromptInputAttachments()
-
-function handleSelect(e: Event) {
-  e.preventDefault()
-  attachments.openFileDialog()
-}
-
-const { label, class: _, ...restProps } = props
+const { openFileDialog } = usePromptInput()
 </script>
 
 <template>
-  <DropdownMenuItem
-    :class="props.class"
-    v-bind="restProps"
-    @select="handleSelect"
-  >
-    <ImageIcon class="mr-2 size-4" /> {{ props.label }}
+  <DropdownMenuItem @select.prevent="openFileDialog">
+    <ImageIcon class="mr-2 size-4" />
+    {{ label || 'Add photos or files' }}
   </DropdownMenuItem>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputAttachment.vue b/packages/elements/src/prompt-input/PromptInputAttachment.vue
index 3c8535d..a4e66d6 100644
--- a/packages/elements/src/prompt-input/PromptInputAttachment.vue
+++ b/packages/elements/src/prompt-input/PromptInputAttachment.vue
@@ -1,74 +1,62 @@
 <script setup lang="ts">
-import type { FileUIPart } from 'ai'
-import type { HTMLAttributes } from 'vue'
+import type { AttachmentFile } from './types'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
-import { HoverCardTrigger } from '@repo/shadcn-vue/components/ui/hover-card'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@repo/shadcn-vue/components/ui/hover-card'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { PaperclipIcon, XIcon } from 'lucide-vue-next'
-import PromptInputHoverCard from './PromptInputHoverCard.vue'
-import PromptInputHoverCardContent from './PromptInputHoverCardContent.vue'
-import { usePromptInputAttachments } from './usePromptInputAttachments'
+import { computed } from 'vue'
+import { usePromptInput } from './context'
 
-interface Props extends /* @vue-ignore */ HTMLAttributes {
-  data: FileUIPart & { id: string }
-  class?: HTMLAttributes['class']
-}
-
-const props = defineProps<Props>()
-
-const attachments = usePromptInputAttachments()
+const props = defineProps<{
+  file: AttachmentFile
+  class?: string
+}>()
 
-const filename = props.data.filename || ''
+const { removeFile } = usePromptInput()
 
-const mediaType
-  = props.data.mediaType?.startsWith('image/') && props.data.url ? 'image' : 'file'
-const isImage = mediaType === 'image'
-
-const attachmentLabel = filename || (isImage ? 'Image' : 'Attachment')
+const filename = computed(() => props.file.filename || '')
+const isImage = computed(() =>
+  props.file.mediaType?.startsWith('image/') && props.file.url,
+)
+const label = computed(() => filename.value || (isImage.value ? 'Image' : 'Attachment'))
 
 function handleRemove(e: Event) {
   e.stopPropagation()
-  attachments.remove(props.data.id)
+  removeFile(props.file.id)
 }
-
-const { data, class: _, ...restProps } = props
 </script>
 
 <template>
-  <PromptInputHoverCard>
+  <HoverCard :open-delay="0" :close-delay="0">
     <HoverCardTrigger as-child>
       <div
-        :key="props.data.id"
         :class="cn(
           'group relative flex h-8 cursor-pointer select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
           props.class,
         )"
-        v-bind="restProps"
       >
         <div class="relative size-5 shrink-0">
-          <div
-            class="absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded bg-background transition-opacity group-hover:opacity-0"
-          >
+          <div class="absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded bg-background transition-opacity group-hover:opacity-0">
             <img
               v-if="isImage"
-              :alt="filename || 'attachment'"
+              :src="file.url"
+              :alt="label"
               class="size-5 object-cover"
-              :height="20"
-              :src="props.data.url"
-              :width="20"
-            >
-            <div
-              v-else
-              class="flex size-5 items-center justify-center text-muted-foreground"
             >
+            <div v-else class="flex size-5 items-center justify-center text-muted-foreground">
               <PaperclipIcon class="size-3" />
             </div>
           </div>
+
           <Button
-            aria-label="Remove attachment"
-            class="absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5"
             type="button"
             variant="ghost"
+            size="icon"
+            class="absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5"
             @click="handleRemove"
           >
             <XIcon />
@@ -76,37 +64,30 @@ const { data, class: _, ...restProps } = props
           </Button>
         </div>
 
-        <span class="flex-1 truncate">{{ attachmentLabel }}</span>
+        <span class="flex-1 truncate max-w-[150px]">{{ label }}</span>
       </div>
     </HoverCardTrigger>
-    <PromptInputHoverCardContent class="w-auto p-2">
+
+    <HoverCardContent class="w-auto p-2" align="start">
       <div class="w-auto space-y-3">
-        <div
-          v-if="isImage"
-          class="flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border"
-        >
+        <div v-if="isImage" class="flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border">
           <img
-            :alt="filename || 'attachment preview'"
+            :src="file.url"
+            :alt="label"
             class="max-h-full max-w-full object-contain"
-            :height="384"
-            :src="props.data.url"
-            :width="448"
           >
         </div>
         <div class="flex items-center gap-2.5">
           <div class="min-w-0 flex-1 space-y-1 px-0.5">
             <h4 class="truncate font-semibold text-sm leading-none">
-              {{ filename || (isImage ? 'Image' : 'Attachment') }}
+              {{ label }}
             </h4>
-            <p
-              v-if="props.data.mediaType"
-              class="truncate font-mono text-muted-foreground text-xs"
-            >
-              {{ props.data.mediaType }}
+            <p v-if="file.mediaType" class="truncate font-mono text-muted-foreground text-xs">
+              {{ file.mediaType }}
             </p>
           </div>
         </div>
       </div>
-    </PromptInputHoverCardContent>
-  </PromptInputHoverCard>
+    </HoverCardContent>
+  </HoverCard>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputAttachments.vue b/packages/elements/src/prompt-input/PromptInputAttachments.vue
index fc6dd94..2deeabf 100644
--- a/packages/elements/src/prompt-input/PromptInputAttachments.vue
+++ b/packages/elements/src/prompt-input/PromptInputAttachments.vue
@@ -1,29 +1,22 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { usePromptInputAttachments } from './usePromptInputAttachments'
+import { usePromptInput } from './context'
 
-interface Props extends /* @vue-ignore */ HTMLAttributes {
+const props = defineProps<{
   class?: HTMLAttributes['class']
-}
+}>()
 
-const props = defineProps<Props>()
-
-const attachments = usePromptInputAttachments()
-
-const { class: _, ...restProps } = props
+const { files } = usePromptInput()
 </script>
 
 <template>
   <div
-    v-if="attachments.files.length > 0"
+    v-if="files.length > 0"
     :class="cn('flex flex-wrap items-center gap-2 p-3 w-full', props.class)"
-    v-bind="restProps"
   >
-    <slot
-      v-for="file in attachments.files"
-      :key="file.id"
-      :attachment="file"
-    />
+    <template v-for="file in files" :key="file.id">
+      <slot :file="file" />
+    </template>
   </div>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputModelSelect.vue b/packages/elements/src/prompt-input/PromptInputModelSelect.vue
deleted file mode 100644
index 1cf23bc..0000000
--- a/packages/elements/src/prompt-input/PromptInputModelSelect.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { Select } from '@repo/shadcn-vue/components/ui/select'
-import { useAttrs } from 'vue'
-
-const attrs = useAttrs()
-</script>
-
-<template>
-  <Select v-bind="attrs">
-    <slot />
-  </Select>
-</template>
diff --git a/packages/elements/src/prompt-input/PromptInputModelSelectContent.vue b/packages/elements/src/prompt-input/PromptInputModelSelectContent.vue
deleted file mode 100644
index e3eb514..0000000
--- a/packages/elements/src/prompt-input/PromptInputModelSelectContent.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { SelectContent } from '@repo/shadcn-vue/components/ui/select'
-import { useAttrs } from 'vue'
-
-interface Props {
-  class?: string
-}
-
-const props = defineProps<Props>()
-const attrs = useAttrs()
-</script>
-
-<template>
-  <SelectContent :class="props.class" v-bind="attrs">
-    <slot />
-  </SelectContent>
-</template>
diff --git a/packages/elements/src/prompt-input/PromptInputModelSelectItem.vue b/packages/elements/src/prompt-input/PromptInputModelSelectItem.vue
deleted file mode 100644
index d72f546..0000000
--- a/packages/elements/src/prompt-input/PromptInputModelSelectItem.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { SelectItem } from '@repo/shadcn-vue/components/ui/select'
-import { useAttrs } from 'vue'
-
-interface Props {
-  class?: string
-  value: string | number
-}
-
-const props = defineProps<Props>()
-const attrs = useAttrs()
-</script>
-
-<template>
-  <SelectItem :class="props.class" :value="props.value" v-bind="attrs">
-    <slot />
-  </SelectItem>
-</template>
diff --git a/packages/elements/src/prompt-input/PromptInputModelSelectTrigger.vue b/packages/elements/src/prompt-input/PromptInputModelSelectTrigger.vue
deleted file mode 100644
index 31f5a44..0000000
--- a/packages/elements/src/prompt-input/PromptInputModelSelectTrigger.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { SelectTrigger } from '@repo/shadcn-vue/components/ui/select'
-import { computed, useAttrs } from 'vue'
-
-interface Props {
-  class?: string
-}
-
-const props = defineProps<Props>()
-const attrs = useAttrs()
-
-const classes = computed(() => [
-  'border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors',
-  'hover:bg-accent hover:text-foreground [&[aria-expanded="true"]]:bg-accent [&[aria-expanded="true"]]:text-foreground',
-  props.class,
-])
-</script>
-
-<template>
-  <SelectTrigger :class="classes" v-bind="attrs">
-    <slot />
-  </SelectTrigger>
-</template>
diff --git a/packages/elements/src/prompt-input/PromptInputModelSelectValue.vue b/packages/elements/src/prompt-input/PromptInputModelSelectValue.vue
deleted file mode 100644
index faa3b6d..0000000
--- a/packages/elements/src/prompt-input/PromptInputModelSelectValue.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { SelectValue } from '@repo/shadcn-vue/components/ui/select'
-import { useAttrs } from 'vue'
-
-interface Props {
-  class?: string
-}
-
-const props = defineProps<Props>()
-const attrs = useAttrs()
-</script>
-
-<template>
-  <SelectValue :class="props.class" v-bind="attrs" />
-</template>
diff --git a/packages/elements/src/prompt-input/PromptInputProvider.vue b/packages/elements/src/prompt-input/PromptInputProvider.vue
index acc4f08..7edbe36 100644
--- a/packages/elements/src/prompt-input/PromptInputProvider.vue
+++ b/packages/elements/src/prompt-input/PromptInputProvider.vue
@@ -1,110 +1,26 @@
 <script setup lang="ts">
-import type { FileUIPart } from 'ai'
-import type { Ref } from 'vue'
-import type { AttachmentsContext, PromptInputControllerContext } from './usePromptInputController'
-import { nanoid } from 'nanoid'
-import { computed, onUnmounted, provide, ref } from 'vue'
-import {
+import type { PromptInputMessage } from './types'
+import { usePromptInputProvider } from './context'
 
-  PromptInputControllerKey,
-  ProviderAttachmentsKey,
-} from './usePromptInputController'
-
-interface Props {
+const props = defineProps<{
   initialInput?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  initialInput: '',
-})
-
-// ----- Text input state -----
-const textInput = ref(props.initialInput)
-function setInput(v: string) {
-  textInput.value = v
-}
-function clearInput() {
-  textInput.value = ''
-}
-
-// ----- Attachments state -----
-const attachmentFiles = ref<(FileUIPart & { id: string })[]>([])
-const fileInputRef = ref<HTMLInputElement | null>(null)
-const openRef = ref<() => void>(() => {})
-
-function add(files: File[] | FileList) {
-  const incoming = Array.from(files)
-  if (incoming.length === 0) {
-    return
-  }
-
-  const newFiles: (FileUIPart & { id: string })[] = incoming.map(file => ({
-    id: nanoid(),
-    type: 'file' as const,
-    url: URL.createObjectURL(file),
-    mediaType: file.type,
-    filename: file.name,
-  }))
-
-  attachmentFiles.value = [...attachmentFiles.value, ...newFiles]
-}
-
-function remove(id: string) {
-  const found = attachmentFiles.value.find(f => f.id === id)
-  if (found?.url) {
-    URL.revokeObjectURL(found.url)
-  }
-  attachmentFiles.value = attachmentFiles.value.filter(f => f.id !== id)
-}
-
-function clear() {
-  for (const f of attachmentFiles.value) {
-    if (f.url) {
-      URL.revokeObjectURL(f.url)
-    }
-  }
-  attachmentFiles.value = []
-}
-
-function openFileDialog() {
-  openRef.value?.()
-}
-
-const attachments = computed<AttachmentsContext>(() => ({
-  files: attachmentFiles.value,
-  add,
-  remove,
-  clear,
-  openFileDialog,
-  fileInputRef,
-}))
-
-function __registerFileInput(ref: Ref<HTMLInputElement | null>, open: () => void) {
-  fileInputRef.value = ref.value
-  openRef.value = open
-}
-
-const controller = computed<PromptInputControllerContext>(() => ({
-  textInput: {
-    value: textInput.value,
-    setInput,
-    clear: clearInput,
-  },
-  attachments: attachments.value,
-  __registerFileInput,
-}))
-
-// Provide contexts
-provide(PromptInputControllerKey, controller.value)
-provide(ProviderAttachmentsKey, attachments.value)
-
-// Cleanup blob URLs on unmount
-onUnmounted(() => {
-  for (const f of attachmentFiles.value) {
-    if (f.url) {
-      URL.revokeObjectURL(f.url)
-    }
-  }
+  maxFiles?: number
+  maxFileSize?: number
+  accept?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'submit', payload: PromptInputMessage): void
+  (e: 'error', payload: { code: string, message: string }): void
+}>()
+
+usePromptInputProvider({
+  initialInput: props.initialInput,
+  maxFiles: props.maxFiles,
+  maxFileSize: props.maxFileSize,
+  accept: props.accept,
+  onSubmit: msg => emit('submit', msg),
+  onError: err => emit('error', err),
 })
 </script>
 
diff --git a/packages/elements/src/prompt-input/PromptInputSpeechButton.vue b/packages/elements/src/prompt-input/PromptInputSpeechButton.vue
index 3e9ce97..fcd236e 100644
--- a/packages/elements/src/prompt-input/PromptInputSpeechButton.vue
+++ b/packages/elements/src/prompt-input/PromptInputSpeechButton.vue
@@ -1,80 +1,43 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
+import { InputGroupButton } from '@repo/shadcn-vue/components/ui/input-group'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { MicIcon } from 'lucide-vue-next'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import PromptInputButton from './PromptInputButton.vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { usePromptInput } from './context'
 
-declare global {
-  interface Window {
-    SpeechRecognition: {
-      new (): SpeechRecognition
-    }
-    webkitSpeechRecognition: {
-      new (): SpeechRecognition
-    }
-  }
-}
-
-interface SpeechRecognitionEvent extends /* @vue-ignore */ Event {
-  results: SpeechRecognitionResultList
-  resultIndex: number
-}
-
-interface SpeechRecognitionErrorEvent extends /* @vue-ignore */ Event {
-  error: string
-}
-
-interface SpeechRecognition extends /* @vue-ignore */ EventTarget {
+interface SpeechRecognition extends EventTarget {
   continuous: boolean
   interimResults: boolean
   lang: string
   start: () => void
   stop: () => void
-  abort: () => void
-  onresult: ((ev: SpeechRecognitionEvent) => any) | null
-  onend: ((ev: Event) => any) | null
-  onerror: ((ev: SpeechRecognitionErrorEvent) => any) | null
-  onstart: ((ev: Event) => any) | null
+  onstart: ((this: SpeechRecognition, ev: Event) => any) | null
+  onend: ((this: SpeechRecognition, ev: Event) => any) | null
+  onresult: ((this: SpeechRecognition, ev: any) => any) | null
+  onerror: ((this: SpeechRecognition, ev: any) => any) | null
 }
 
-type PromptInputButtonProps = InstanceType<typeof PromptInputButton>['$props']
-
-interface Props extends /* @vue-ignore */ PromptInputButtonProps {
-  class?: HTMLAttributes['class']
-  textareaRef?: HTMLTextAreaElement | null
-  onTranscriptionChange?: (text: string) => void
-}
-
-const props = defineProps<Props>()
+const props = defineProps<{ class?: string }>()
 
+const { textInput, setTextInput } = usePromptInput()
 const isListening = ref(false)
 const recognition = ref<SpeechRecognition | null>(null)
 
-function setupSpeechRecognition() {
-  if (
-    typeof window !== 'undefined'
-    && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)
-  ) {
-    const SpeechRecognition
-      = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
-    const speechRecognition = new SpeechRecognition()
+onMounted(() => {
+  const Win = window as any
+  const SpeechRecognition = Win.SpeechRecognition || Win.webkitSpeechRecognition
 
-    speechRecognition.continuous = true
-    speechRecognition.interimResults = true
-    speechRecognition.lang = 'en-US'
+  if (SpeechRecognition) {
+    const sr = new SpeechRecognition()
+    sr.continuous = true
+    sr.interimResults = true
+    sr.lang = 'en-US'
 
-    speechRecognition.onstart = () => {
-      isListening.value = true
-    }
+    sr.onstart = () => isListening.value = true
+    sr.onend = () => isListening.value = false
 
-    speechRecognition.onend = () => {
-      isListening.value = false
-    }
-
-    speechRecognition.onresult = (event: any) => {
+    sr.onresult = (event: any) => {
       let finalTranscript = ''
-
       for (let i = event.resultIndex; i < event.results.length; i++) {
         const result = event.results[i]
         if (result.isFinal) {
@@ -82,32 +45,28 @@ function setupSpeechRecognition() {
         }
       }
 
-      if (finalTranscript && props.textareaRef) {
-        const textarea = props.textareaRef
-        const currentValue = textarea.value
-        const newValue
-          = currentValue + (currentValue ? ' ' : '') + finalTranscript
-
-        textarea.value = newValue
-        textarea.dispatchEvent(new Event('input', { bubbles: true }))
-        props.onTranscriptionChange?.(newValue)
+      if (finalTranscript) {
+        const newValue = textInput.value + (textInput.value ? ' ' : '') + finalTranscript
+        setTextInput(newValue)
       }
     }
 
-    speechRecognition.onerror = (event: any) => {
+    sr.onerror = (event: any) => {
       console.error('Speech recognition error:', event.error)
       isListening.value = false
     }
 
-    recognition.value = speechRecognition
+    recognition.value = sr
   }
-}
+})
+
+onUnmounted(() => {
+  recognition.value?.stop()
+})
 
 function toggleListening() {
-  if (!recognition.value) {
+  if (!recognition.value)
     return
-  }
-
   if (isListening.value) {
     recognition.value.stop()
   }
@@ -115,45 +74,21 @@ function toggleListening() {
     recognition.value.start()
   }
 }
-
-onMounted(() => {
-  setupSpeechRecognition()
-})
-
-onUnmounted(() => {
-  if (recognition.value) {
-    recognition.value.stop()
-  }
-})
-
-watch(
-  () => [props.textareaRef, props.onTranscriptionChange],
-  () => {
-    if (recognition.value) {
-      recognition.value.stop()
-    }
-    setupSpeechRecognition()
-  },
-)
-
-const buttonClass = computed(() =>
-  cn(
-    'relative transition-all duration-200',
-    isListening.value && 'animate-pulse bg-accent text-accent-foreground',
-    props.class,
-  ),
-)
-
-const { class: _, textareaRef, onTranscriptionChange, ...restProps } = props
 </script>
 
 <template>
-  <PromptInputButton
-    :class="buttonClass"
+  <InputGroupButton
+    type="button"
+    variant="ghost"
+    size="icon-sm"
     :disabled="!recognition"
-    v-bind="restProps"
+    :class="cn(
+      'relative transition-all duration-200',
+      isListening && 'animate-pulse bg-accent text-accent-foreground',
+      props.class,
+    )"
     @click="toggleListening"
   >
     <MicIcon class="size-4" />
-  </PromptInputButton>
+  </InputGroupButton>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputTextarea.vue b/packages/elements/src/prompt-input/PromptInputTextarea.vue
index e50b7d0..b047746 100644
--- a/packages/elements/src/prompt-input/PromptInputTextarea.vue
+++ b/packages/elements/src/prompt-input/PromptInputTextarea.vue
@@ -2,13 +2,12 @@
 import type { HTMLAttributes } from 'vue'
 import { InputGroupTextarea } from '@repo/shadcn-vue/components/ui/input-group'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { ref } from 'vue'
-import { usePromptInputAttachments } from './usePromptInputAttachments'
-import { useOptionalPromptInputController } from './usePromptInputController'
+import { computed, ref } from 'vue'
+import { usePromptInput } from './context'
 
-type InputGroupTextareaProps = InstanceType<typeof InputGroupTextarea>['$props']
+type PromptInputTextareaProps = InstanceType<typeof InputGroupTextarea>['$props']
 
-interface Props extends /* @vue-ignore */ InputGroupTextareaProps {
+interface Props extends /* @vue-ignore */ PromptInputTextareaProps {
   class?: HTMLAttributes['class']
   placeholder?: string
 }
@@ -17,101 +16,61 @@ const props = withDefaults(defineProps<Props>(), {
   placeholder: 'What would you like to know?',
 })
 
-const emit = defineEmits<{
-  change: [event: Event]
-}>()
-
-const controller = useOptionalPromptInputController()
-const attachments = usePromptInputAttachments()
+const { textInput, setTextInput, submitForm, addFiles, files, removeFile } = usePromptInput()
 const isComposing = ref(false)
 
 function handleKeyDown(e: KeyboardEvent) {
   if (e.key === 'Enter') {
-    if (isComposing.value || e.isComposing) {
-      return
-    }
-    if (e.shiftKey) {
+    if (isComposing.value || e.shiftKey)
       return
-    }
     e.preventDefault()
-
-    // Check if submit button is disabled
-    const target = e.currentTarget as HTMLTextAreaElement
-    const form = target.form
-    const submitButton = form?.querySelector(
-      'button[type="submit"]',
-    ) as HTMLButtonElement | null
-
-    if (submitButton?.disabled) {
-      return
-    }
-
-    form?.requestSubmit()
+    submitForm()
   }
 
-  // Remove last attachment when Backspace is pressed and textarea is empty
-  const target = e.currentTarget as HTMLTextAreaElement
-  if (
-    e.key === 'Backspace'
-    && target.value === ''
-    && attachments.files.length > 0
-  ) {
-    e.preventDefault()
-    const lastAttachment = attachments.files[attachments.files.length - 1]
-    if (lastAttachment) {
-      attachments.remove(lastAttachment.id)
+  // Remove last attachment on backspace if input is empty
+  if (e.key === 'Backspace' && textInput.value === '' && files.value.length > 0) {
+    const lastFile = files.value[files.value.length - 1]
+    if (lastFile) {
+      removeFile(lastFile.id)
     }
   }
 }
 
-function handlePaste(event: ClipboardEvent) {
-  const items = event.clipboardData?.items
-
-  if (!items) {
+function handlePaste(e: ClipboardEvent) {
+  const items = e.clipboardData?.items
+  if (!items)
     return
-  }
-
-  const files: File[] = []
 
+  const pastedFiles: File[] = []
   for (const item of Array.from(items)) {
     if (item.kind === 'file') {
       const file = item.getAsFile()
-      if (file) {
-        files.push(file)
-      }
+      if (file)
+        pastedFiles.push(file)
     }
   }
 
-  if (files.length > 0) {
-    event.preventDefault()
-    attachments.add(files)
-  }
-}
-
-function handleChange(e: Event) {
-  const target = e.currentTarget as HTMLTextAreaElement
-  if (controller) {
-    controller.textInput.setInput(target.value)
+  if (pastedFiles.length > 0) {
+    e.preventDefault()
+    addFiles(pastedFiles)
   }
-  emit('change', e)
 }
 
-// Controlled vs uncontrolled
-const controlledProps = controller
-  ? {
-      value: controller.textInput.value,
-    }
-  : {}
+const modelValue = computed({
+  get: () => textInput.value,
+  set: val => setTextInput(val),
+})
 
-const { class: _, ...restProps } = props
+const { placeholder, class: _, ...restProps } = props
 </script>
 
 <template>
   <InputGroupTextarea
-    :class="cn('field-sizing-content max-h-48 min-h-16', props.class)"
+    v-model="modelValue"
     name="message"
-    v-bind="{ ...restProps, ...controlledProps }"
-    @change="handleChange"
+    :placeholder="placeholder"
+    :class="cn('field-sizing-content max-h-48 min-h-16', props.class)"
+    v-bind="restProps"
     @keydown="handleKeyDown"
     @paste="handlePaste"
     @compositionstart="isComposing = true"
diff --git a/packages/elements/src/prompt-input/PromptInputToolbar.vue b/packages/elements/src/prompt-input/PromptInputToolbar.vue
deleted file mode 100644
index 7b53e4a..0000000
--- a/packages/elements/src/prompt-input/PromptInputToolbar.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { computed, useAttrs } from 'vue'
-
-interface Props {
-  class?: string
-}
-
-const props = defineProps<Props>()
-const attrs = useAttrs()
-
-const classes = computed(() => ['flex items-center justify-between p-1', props.class])
-</script>
-
-<template>
-  <div :class="classes" v-bind="attrs">
-    <slot />
-  </div>
-</template>
diff --git a/packages/elements/src/prompt-input/context.ts b/packages/elements/src/prompt-input/context.ts
new file mode 100644
index 0000000..2d59b46
--- /dev/null
+++ b/packages/elements/src/prompt-input/context.ts
@@ -0,0 +1,191 @@
+import type { AttachmentFile, PromptInputContext } from './types'
+import { nanoid } from 'nanoid'
+import { inject, onBeforeUnmount, provide, ref } from 'vue'
+import { PROMPT_INPUT_KEY } from './types'
+
+export function usePromptInputProvider(props: {
+  initialInput?: string
+  maxFiles?: number
+  maxFileSize?: number
+  accept?: string
+  onSubmit?: (message: { text: string, files: any[] }) => void | Promise<void>
+  onError?: (err: { code: string, message: string }) => void
+}) {
+  const textInput = ref(props.initialInput || '')
+  const files = ref<AttachmentFile[]>([])
+  const fileInputRef = ref<HTMLInputElement | null>(null)
+  const isLoading = ref(false)
+
+  // Cleanup object URLs to avoid memory leaks
+  onBeforeUnmount(() => {
+    files.value.forEach((f) => {
+      if (f.url && f.url.startsWith('blob:')) {
+        URL.revokeObjectURL(f.url)
+      }
+    })
+  })
+
+  const setTextInput = (val: string) => {
+    textInput.value = val
+  }
+
+  const matchesAccept = (file: File) => {
+    if (!props.accept || props.accept.trim() === '')
+      return true
+    if (props.accept.includes('image/*'))
+      return file.type.startsWith('image/')
+    // Add more mime-type checks here if necessary
+    return true
+  }
+
+  const addFiles = (incoming: File[] | FileList) => {
+    const fileList = Array.from(incoming)
+
+    // Validate Accept
+    const accepted = fileList.filter(matchesAccept)
+    if (fileList.length && accepted.length === 0) {
+      props.onError?.({ code: 'accept', message: 'No files match the accepted types.' })
+      return
+    }
+
+    // Validate Size
+    const withinSize = (f: File) => (props.maxFileSize ? f.size <= props.maxFileSize : true)
+    const sized = accepted.filter(withinSize)
+    if (accepted.length > 0 && sized.length === 0) {
+      props.onError?.({ code: 'max_file_size', message: 'All files exceed the maximum size.' })
+      return
+    }
+
+    // Validate Count
+    const currentCount = files.value.length
+    const capacity = props.maxFiles ? Math.max(0, props.maxFiles - currentCount) : undefined
+    const capped = typeof capacity === 'number' ? sized.slice(0, capacity) : sized
+
+    if (typeof capacity === 'number' && sized.length > capacity) {
+      props.onError?.({ code: 'max_files', message: 'Too many files. Some were not added.' })
+    }
+
+    const newAttachments: AttachmentFile[] = capped.map(file => ({
+      id: nanoid(),
+      type: 'file',
+      url: URL.createObjectURL(file),
+      mediaType: file.type,
+      filename: file.name,
+      file, // Store original file for later use
+    }))
+
+    files.value = [...files.value, ...newAttachments]
+  }
+
+  const removeFile = (id: string) => {
+    const file = files.value.find(f => f.id === id)
+    if (file?.url && file.url.startsWith('blob:')) {
+      URL.revokeObjectURL(file.url)
+    }
+    files.value = files.value.filter(f => f.id !== id)
+  }
+
+  const clearFiles = () => {
+    files.value.forEach((f) => {
+      if (f.url && f.url.startsWith('blob:')) {
+        URL.revokeObjectURL(f.url)
+      }
+    })
+    files.value = []
+  }
+
+  const clearInput = () => {
+    textInput.value = ''
+  }
+
+  const openFileDialog = () => {
+    fileInputRef.value?.click()
+  }
+
+  const convertBlobUrlToDataUrl = async (url: string): Promise<string | null> => {
+    try {
+      const response = await fetch(url)
+      const blob = await response.blob()
+      return new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.onloadend = () => resolve(reader.result as string)
+        reader.onerror = () => resolve(null)
+        reader.readAsDataURL(blob)
+      })
+    }
+    catch {
+      return null
+    }
+  }
+
+  const submitForm = async () => {
+    if (!props.onSubmit)
+      return
+
+    // Process files (convert blobs to base64 if needed for AI SDK)
+    const processedFiles = await Promise.all(
+      files.value.map(async (item) => {
+        if (item.url && item.url.startsWith('blob:')) {
+          const dataUrl = await convertBlobUrlToDataUrl(item.url)
+          return { ...item, url: dataUrl ?? item.url }
+        }
+        return item
+      }),
+    )
+
+    const message = {
+      text: textInput.value,
+      files: processedFiles,
+    }
+
+    try {
+      isLoading.value = true
+      const result = props.onSubmit(message)
+      if (result instanceof Promise) {
+        await result
+      }
+      clearInput()
+      clearFiles()
+    }
+    catch (e) {
+      if (props.onError) {
+        const errorMessage = e instanceof Error
+          ? e.message
+          : String(e) || 'An unknown error occurred during submission.'
+        props.onError({
+          code: 'submit_error',
+          message: errorMessage,
+        })
+      }
+      console.error('Submission failed:', e)
+    }
+    finally {
+      isLoading.value = false
+    }
+  }
+
+  const context: PromptInputContext = {
+    textInput,
+    files,
+    fileInputRef,
+    isLoading,
+    setTextInput,
+    addFiles,
+    removeFile,
+    clearFiles,
+    clearInput,
+    openFileDialog,
+    submitForm,
+  }
+
+  provide(PROMPT_INPUT_KEY, context)
+  return context
+}
+
+export function usePromptInput() {
+  const context = inject<PromptInputContext>(PROMPT_INPUT_KEY)
+  if (!context) {
+    throw new Error('usePromptInput must be used within a PromptInput component')
+  }
+  return context
+}
diff --git a/packages/elements/src/prompt-input/index.ts b/packages/elements/src/prompt-input/index.ts
index 7f73f06..6b29e75 100644
--- a/packages/elements/src/prompt-input/index.ts
+++ b/packages/elements/src/prompt-input/index.ts
@@ -1,3 +1,4 @@
+export * from './context'
 export { default as PromptInput } from './PromptInput.vue'
 export { default as PromptInputActionAddAttachments } from './PromptInputActionAddAttachments.vue'
 export { default as PromptInputActionMenu } from './PromptInputActionMenu.vue'
@@ -20,11 +21,6 @@ export { default as PromptInputHeader } from './PromptInputHeader.vue'
 export { default as PromptInputHoverCard } from './PromptInputHoverCard.vue'
 export { default as PromptInputHoverCardContent } from './PromptInputHoverCardContent.vue'
 export { default as PromptInputHoverCardTrigger } from './PromptInputHoverCardTrigger.vue'
-export { default as PromptInputModelSelect } from './PromptInputModelSelect.vue'
-export { default as PromptInputModelSelectContent } from './PromptInputModelSelectContent.vue'
-export { default as PromptInputModelSelectItem } from './PromptInputModelSelectItem.vue'
-export { default as PromptInputModelSelectTrigger } from './PromptInputModelSelectTrigger.vue'
-export { default as PromptInputModelSelectValue } from './PromptInputModelSelectValue.vue'
 export { default as PromptInputProvider } from './PromptInputProvider.vue'
 export { default as PromptInputSelect } from './PromptInputSelect.vue'
 export { default as PromptInputSelectContent } from './PromptInputSelectContent.vue'
@@ -39,10 +35,6 @@ export { default as PromptInputTabItem } from './PromptInputTabItem.vue'
 export { default as PromptInputTabLabel } from './PromptInputTabLabel.vue'
 export { default as PromptInputTabsList } from './PromptInputTabsList.vue'
 export { default as PromptInputTextarea } from './PromptInputTextarea.vue'
-export { default as PromptInputToolbar } from './PromptInputToolbar.vue'
-export { default as PromptInputTools } from './PromptInputTools.vue'
 
-// export * from './types'
-export * from './usePromptInputAttachments'
-export * from './usePromptInputController'
-export * from './useProviderAttachments'
+export { default as PromptInputTools } from './PromptInputTools.vue'
+export * from './types'
diff --git a/packages/elements/src/prompt-input/types.ts b/packages/elements/src/prompt-input/types.ts
index 60dec48..54b29a6 100644
--- a/packages/elements/src/prompt-input/types.ts
+++ b/packages/elements/src/prompt-input/types.ts
@@ -1,37 +1,28 @@
-import type { FileUIPart as AIFileUIPart } from 'ai'
-import type { InjectionKey, Ref } from 'vue'
-
-// Mimicking the AI SDK type
-export type FileUIPart = AIFileUIPart & {
-  id: string
-  file?: File // Keep original file reference handy
-}
+import type { FileUIPart } from 'ai'
+import type { Ref } from 'vue'
 
 export interface PromptInputMessage {
   text: string
   files: FileUIPart[]
 }
 
-export interface AttachmentsContext {
-  files: Ref<FileUIPart[]>
-  add: (files: File[] | FileList) => void
-  remove: (id: string) => void
-  clear: () => void
-  openFileDialog: () => void
-  fileInputRef: Ref<HTMLInputElement | null>
-}
-
-export interface TextInputContext {
-  value: Ref<string>
-  setInput: (v: string) => void
-  clear: () => void
+export interface AttachmentFile extends FileUIPart {
+  id: string
+  file?: File
 }
 
-export interface PromptInputControllerContext {
-  textInput: TextInputContext
-  attachments: AttachmentsContext
-  registerFileInput: (el: HTMLInputElement | null, openFn: () => void) => void
+export interface PromptInputContext {
+  textInput: Ref<string>
+  files: Ref<AttachmentFile[]>
+  isLoading: Ref<boolean>
+  fileInputRef: Ref<HTMLInputElement | null>
+  setTextInput: (val: string) => void
+  addFiles: (files: File[] | FileList) => void
+  removeFile: (id: string) => void
+  clearFiles: () => void
+  clearInput: () => void
+  openFileDialog: () => void
+  submitForm: () => void
 }
 
-export const PromptInputControllerKey: InjectionKey<PromptInputControllerContext> = Symbol('PromptInputController')
-export const AttachmentsContextKey: InjectionKey<AttachmentsContext> = Symbol('AttachmentsContext')
+export const PROMPT_INPUT_KEY = Symbol('PromptInputContext')
diff --git a/packages/elements/src/prompt-input/usePromptInputAttachments.ts b/packages/elements/src/prompt-input/usePromptInputAttachments.ts
deleted file mode 100644
index b0bd523..0000000
--- a/packages/elements/src/prompt-input/usePromptInputAttachments.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { InjectionKey } from 'vue'
-import type { AttachmentsContext } from './usePromptInputController'
-import { inject } from 'vue'
-import { useOptionalProviderAttachments } from './useProviderAttachments'
-
-export const LocalAttachmentsKey: InjectionKey<AttachmentsContext>
-  = Symbol('LocalAttachments')
-
-/**
- * Dual-mode hook that works with either provider or local attachments.
- * Prefers provider context if available, falls back to local context.
- * Throws error if used outside both contexts.
- */
-export function usePromptInputAttachments(): AttachmentsContext {
-  // Try provider first
-  const provider = useOptionalProviderAttachments()
-
-  // Fall back to local context
-  const local = inject(LocalAttachmentsKey, undefined)
-
-  const context = provider ?? local
-
-  if (!context) {
-    throw new Error(
-      'usePromptInputAttachments must be used within a PromptInput or PromptInputProvider',
-    )
-  }
-
-  return context
-}
diff --git a/packages/elements/src/prompt-input/usePromptInputController.ts b/packages/elements/src/prompt-input/usePromptInputController.ts
deleted file mode 100644
index dc92143..0000000
--- a/packages/elements/src/prompt-input/usePromptInputController.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { FileUIPart } from 'ai'
-import type { InjectionKey, Ref } from 'vue'
-import { inject } from 'vue'
-
-export interface AttachmentsContext {
-  files: (FileUIPart & { id: string })[]
-  add: (files: File[] | FileList) => void
-  remove: (id: string) => void
-  clear: () => void
-  openFileDialog: () => void
-  fileInputRef: Ref<HTMLInputElement | null>
-}
-
-export interface TextInputContext {
-  value: string
-  setInput: (v: string) => void
-  clear: () => void
-}
-
-export interface PromptInputControllerContext {
-  textInput: TextInputContext
-  attachments: AttachmentsContext
-  /** INTERNAL: Allows PromptInput to register its file input + "open" callback */
-  __registerFileInput: (
-    ref: Ref<HTMLInputElement | null>,
-    open: () => void
-  ) => void
-}
-
-export const PromptInputControllerKey: InjectionKey<PromptInputControllerContext>
-  = Symbol('PromptInputController')
-
-export const ProviderAttachmentsKey: InjectionKey<AttachmentsContext>
-  = Symbol('ProviderAttachments')
-
-/**
- * Main hook to access the prompt input controller.
- * Throws error if used outside PromptInputProvider.
- */
-export function usePromptInputController(): PromptInputControllerContext {
-  const ctx = inject(PromptInputControllerKey)
-  if (!ctx) {
-    throw new Error(
-      'Wrap your component inside <PromptInputProvider> to use usePromptInputController().',
-    )
-  }
-  return ctx
-}
-
-/**
- * Optional variant that doesn't throw.
- * Useful for dual-mode components.
- */
-export function useOptionalPromptInputController(): PromptInputControllerContext | undefined {
-  return inject(PromptInputControllerKey, undefined)
-}
diff --git a/packages/elements/src/prompt-input/useProviderAttachments.ts b/packages/elements/src/prompt-input/useProviderAttachments.ts
deleted file mode 100644
index 3fa9485..0000000
--- a/packages/elements/src/prompt-input/useProviderAttachments.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { AttachmentsContext } from './usePromptInputController'
-import { inject } from 'vue'
-import { ProviderAttachmentsKey } from './usePromptInputController'
-
-/**
- * Hook to access provider-level attachments.
- * Throws error if used outside PromptInputProvider.
- */
-export function useProviderAttachments(): AttachmentsContext {
-  const ctx = inject(ProviderAttachmentsKey)
-  if (!ctx) {
-    throw new Error(
-      'Wrap your component inside <PromptInputProvider> to use useProviderAttachments().',
-    )
-  }
-  return ctx
-}
-
-/**
- * Optional variant that doesn't throw.
- * Useful for dual-mode components.
- */
-export function useOptionalProviderAttachments(): AttachmentsContext | undefined {
-  return inject(ProviderAttachmentsKey, undefined)
-}
diff --git a/packages/examples/src/prompt-input-header-controls.vue b/packages/examples/src/prompt-input-header-controls.vue
index 37c936f..6a58a4a 100644
--- a/packages/examples/src/prompt-input-header-controls.vue
+++ b/packages/examples/src/prompt-input-header-controls.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { usePromptInputController } from '@repo/elements/prompt-input'
+import { usePromptInput } from '@repo/elements/prompt-input'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
-import { ButtonGroup } from '@repo/shadcn-vue/components/ui/button-group'
 
-const controller = usePromptInputController()
+const { setTextInput, clearInput, clearFiles } = usePromptInput()
 </script>
 
 <template>
@@ -14,31 +13,32 @@ const controller = usePromptInputController()
         PromptInputProvider
       </code>
     </p>
-    <ButtonGroup>
+
+    <div class="flex items-center -space-x-px">
       <Button
-        size="sm"
-        type="button"
         variant="outline"
-        @click="controller.textInput.clear()"
+        size="sm"
+        class="rounded-r-none focus:z-10"
+        @click="clearInput"
       >
         Clear input
       </Button>
       <Button
-        size="sm"
-        type="button"
         variant="outline"
-        @click="controller.textInput.setInput('Inserted via PromptInputProvider')"
+        size="sm"
+        class="rounded-none focus:z-10"
+        @click="setTextInput('Inserted via PromptInputProvider')"
       >
         Set input
       </Button>
       <Button
-        size="sm"
-        type="button"
         variant="outline"
-        @click="controller.attachments.clear()"
+        size="sm"
+        class="rounded-l-none focus:z-10"
+        @click="clearFiles"
       >
         Clear attachments
       </Button>
-    </ButtonGroup>
+    </div>
   </header>
 </template>
diff --git a/packages/examples/src/prompt-input.vue b/packages/examples/src/prompt-input.vue
index f6cb0a7..3267af7 100644
--- a/packages/examples/src/prompt-input.vue
+++ b/packages/examples/src/prompt-input.vue
@@ -1,6 +1,5 @@
-<!-- eslint-disable no-console -->
 <script setup lang="ts">
-// import type { PromptInputMessage } from '@repo/elements/prompt-input'
+import type { PromptInputMessage } from '@repo/elements/prompt-input/'
 import {
   ModelSelector,
   ModelSelectorContent,
@@ -25,20 +24,21 @@ import {
   PromptInputBody,
   PromptInputButton,
   PromptInputFooter,
-
   PromptInputProvider,
   PromptInputSpeechButton,
   PromptInputSubmit,
   PromptInputTextarea,
   PromptInputTools,
-  // usePromptInputController,
 } from '@repo/elements/prompt-input'
-// import { Button } from '@repo/shadcn-vue/components/ui/button'
-// import { ButtonGroup } from '@repo/shadcn-vue/components/ui/button-group'
+
 import { CheckIcon, GlobeIcon } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
+
 import HeaderControls from './prompt-input-header-controls.vue'
 
+const SUBMITTING_TIMEOUT = 200
+const STREAMING_TIMEOUT = 2000
+
 const models = [
   {
     id: 'gpt-4o',
@@ -77,32 +77,24 @@ const models = [
   },
 ]
 
-const SUBMITTING_TIMEOUT = 200
-const STREAMING_TIMEOUT = 2000
-
-const model = ref<string>(models[0].id)
+const modelId = ref<string>(models[0].id)
 const modelSelectorOpen = ref(false)
 const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready')
-const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const selectedModelData = computed(() => models.find(m => m.id === modelId.value))
 
-const selectedModelData = computed(() => models.find(m => m.id === model.value))
+function handleSubmit(message: PromptInputMessage) {
+  const hasText = !!message.text
+  const hasAttachments = message.files?.length > 0
 
-function handleSubmit(message: any) {
-  // function handleSubmit(message: PromptInputMessage) {
-  console.log(message)
-  const hasText = Boolean(message.text)
-  const hasAttachments = Boolean(message.files?.length)
-
-  if (!(hasText || hasAttachments)) {
+  if (!hasText && !hasAttachments) {
     return
   }
 
   status.value = 'submitted'
 
+  // eslint-disable-next-line no-console
   console.log('Submitting message:', message)
 
-  console.log('Submitting message:')
-
   setTimeout(() => {
     status.value = 'streaming'
   }, SUBMITTING_TIMEOUT)
@@ -115,16 +107,23 @@ function handleSubmit(message: any) {
 
 <template>
   <div class="size-full">
-    <PromptInputProvider>
-      <PromptInput global-drop multiple @submit="handleSubmit">
+    <PromptInputProvider
+      @submit="handleSubmit"
+    >
+      <PromptInput
+        multiple
+        global-drop class="w-full"
+      >
         <PromptInputAttachments>
-          <template #default="{ attachment }">
-            <PromptInputAttachment :data="attachment" />
+          <template #default="{ file }">
+            <PromptInputAttachment :file="file" />
           </template>
         </PromptInputAttachments>
+
         <PromptInputBody>
-          <PromptInputTextarea ref="textareaRef" placeholder="What can I do for you?" />
+          <PromptInputTextarea />
         </PromptInputBody>
+
         <PromptInputFooter>
           <PromptInputTools>
             <PromptInputActionMenu>
@@ -133,11 +132,14 @@ function handleSubmit(message: any) {
                 <PromptInputActionAddAttachments />
               </PromptInputActionMenuContent>
             </PromptInputActionMenu>
-            <PromptInputSpeechButton :textarea-ref="textareaRef" />
+
+            <PromptInputSpeechButton />
+
             <PromptInputButton>
               <GlobeIcon :size="16" />
               <span>Search</span>
             </PromptInputButton>
+
             <ModelSelector v-model:open="modelSelectorOpen">
               <ModelSelectorTrigger as-child>
                 <PromptInputButton>
@@ -150,28 +152,29 @@ function handleSubmit(message: any) {
                   </ModelSelectorName>
                 </PromptInputButton>
               </ModelSelectorTrigger>
+
               <ModelSelectorContent>
                 <ModelSelectorInput placeholder="Search models..." />
                 <ModelSelectorList>
                   <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
+
                   <ModelSelectorGroup
                     v-for="chef in ['OpenAI', 'Anthropic', 'Google']"
                     :key="chef"
                     :heading="chef"
                   >
                     <ModelSelectorItem
-                      v-for="m in models.filter((model) => model.chef === chef)"
+                      v-for="m in models.filter((item) => item.chef === chef)"
                       :key="m.id"
                       :value="m.id"
-                      @select="
-                        () => {
-                          model = m.id
-                          modelSelectorOpen = false
-                        }
-                      "
+                      @select="() => {
+                        modelId = m.id;
+                        modelSelectorOpen = false;
+                      }"
                     >
                       <ModelSelectorLogo :provider="m.chefSlug" />
                       <ModelSelectorName>{{ m.name }}</ModelSelectorName>
+
                       <ModelSelectorLogoGroup>
                         <ModelSelectorLogo
                           v-for="provider in m.providers"
@@ -179,7 +182,8 @@ function handleSubmit(message: any) {
                           :provider="provider"
                         />
                       </ModelSelectorLogoGroup>
-                      <CheckIcon v-if="model === m.id" class="ml-auto size-4" />
+
+                      <CheckIcon v-if="modelId === m.id" class="ml-auto size-4" />
                       <div v-else class="ml-auto size-4" />
                     </ModelSelectorItem>
                   </ModelSelectorGroup>
@@ -187,6 +191,7 @@ function handleSubmit(message: any) {
               </ModelSelectorContent>
             </ModelSelector>
           </PromptInputTools>
+
           <PromptInputSubmit :status="status" />
         </PromptInputFooter>
       </PromptInput>

From aa905f8d9f481f64fa0e444236a6cc64394370d7 Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Sun, 30 Nov 2025 01:57:44 +0100
Subject: [PATCH 3/7] fix: queue and suggestion examples to use the updated
 prompt-input components

---
 .../3.components/1.chatbot/suggestion.md      |   2 +-
 apps/www/plugins/ai-elements.ts               |   4 +-
 packages/examples/src/index.ts                |   2 +-
 packages/examples/src/queue-prompt-input.vue  | 244 ++++++++++++------
 ...tion-ai-input.vue => suggestion-input.vue} |  95 ++++---
 5 files changed, 221 insertions(+), 126 deletions(-)
 rename packages/examples/src/{suggestion-ai-input.vue => suggestion-input.vue} (53%)

diff --git a/apps/www/content/3.components/1.chatbot/suggestion.md b/apps/www/content/3.components/1.chatbot/suggestion.md
index 5c27924..9432f56 100644
--- a/apps/www/content/3.components/1.chatbot/suggestion.md
+++ b/apps/www/content/3.components/1.chatbot/suggestion.md
@@ -191,7 +191,7 @@ function handleSuggestionClick(suggestion: string) {
 
 ### Usage with AI Input
 
-:::ComponentLoader{label="Preview" componentName="SuggestionAiInput"}
+:::ComponentLoader{label="Preview" componentName="SuggestionInput"}
 :::
 
 ## Props
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index 3458ea3..ae553b0 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -30,7 +30,7 @@ import {
   Sources,
   SourcesCustomRendering,
   Suggestion,
-  SuggestionAiInput,
+  SuggestionInput,
   Task,
   Tool,
   ToolInputAvailable,
@@ -62,7 +62,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('SourcesCustomRendering', SourcesCustomRendering)
   vueApp.component('Task', Task)
   vueApp.component('Suggestion', Suggestion)
-  vueApp.component('SuggestionAiInput', SuggestionAiInput)
+  vueApp.component('SuggestionInput', SuggestionInput)
   vueApp.component('OpenInChat', OpenInChat)
   vueApp.component('Loader', Loader)
   vueApp.component('LoaderCustomStyling', LoaderCustomStyling)
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 2c2a1d7..255c784 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -28,7 +28,7 @@ export { default as ShimmerDurations } from './shimmer-durations.vue'
 export { default as Shimmer } from './shimmer.vue'
 export { default as SourcesCustomRendering } from './sources-custom-rendering.vue'
 export { default as Sources } from './sources.vue'
-export { default as SuggestionAiInput } from './suggestion-ai-input.vue'
+export { default as SuggestionInput } from './suggestion-input.vue'
 export { default as Suggestion } from './suggestion.vue'
 export { default as Task } from './task.vue'
 export { default as ToolInputAvailable } from './tool-input-available.vue'
diff --git a/packages/examples/src/queue-prompt-input.vue b/packages/examples/src/queue-prompt-input.vue
index 80846a0..125ef26 100644
--- a/packages/examples/src/queue-prompt-input.vue
+++ b/packages/examples/src/queue-prompt-input.vue
@@ -1,19 +1,37 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
+import type { PromptInputMessage } from '@repo/elements/prompt-input/'
+import {
+  ModelSelector,
+  ModelSelectorContent,
+  ModelSelectorEmpty,
+  ModelSelectorGroup,
+  ModelSelectorInput,
+  ModelSelectorItem,
+  ModelSelectorList,
+  ModelSelectorLogo,
+  ModelSelectorLogoGroup,
+  ModelSelectorName,
+  ModelSelectorTrigger,
+} from '@repo/elements/model-selector'
 import {
   PromptInput,
+  PromptInputActionAddAttachments,
+  PromptInputActionMenu,
+  PromptInputActionMenuContent,
+  PromptInputActionMenuTrigger,
+  PromptInputAttachment,
+  PromptInputAttachments,
+  PromptInputBody,
   PromptInputButton,
-  PromptInputModelSelect,
-  PromptInputModelSelectContent,
-  PromptInputModelSelectItem,
-  PromptInputModelSelectTrigger,
-  PromptInputModelSelectValue,
+  PromptInputFooter,
+  PromptInputHeader,
+  PromptInputProvider,
+  PromptInputSpeechButton,
   PromptInputSubmit,
   PromptInputTextarea,
-  PromptInputToolbar,
   PromptInputTools,
 } from '@repo/elements/prompt-input'
-
 import {
   Queue,
   QueueItem,
@@ -24,10 +42,10 @@ import {
   QueueItemIndicator,
   QueueSection,
   QueueSectionContent,
-
 } from '@repo/elements/queue'
-import { Globe, Mic, Plus, Send, Trash2 } from 'lucide-vue-next'
-import { onBeforeUnmount, ref } from 'vue'
+// import { Globe, Mic, Plus, Send, Trash2 } from 'lucide-vue-next'
+import { CheckIcon, GlobeIcon, Trash2Icon } from 'lucide-vue-next'
+import { computed, onBeforeUnmount, ref } from 'vue'
 
 export interface QueueMessagePart {
   type: string
@@ -49,23 +67,47 @@ export interface QueueTodo {
   status?: 'pending' | 'completed'
 }
 
-// ---- Constants ----
 const models = [
-  { id: 'gpt-4', name: 'GPT-4' },
-  { id: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo' },
-  { id: 'claude-2', name: 'Claude 2' },
-  { id: 'claude-instant', name: 'Claude Instant' },
-  { id: 'palm-2', name: 'PaLM 2' },
-  { id: 'llama-2-70b', name: 'Llama 2 70B' },
-  { id: 'llama-2-13b', name: 'Llama 2 13B' },
-  { id: 'cohere-command', name: 'Command' },
-  { id: 'mistral-7b', name: 'Mistral 7B' },
+  {
+    id: 'gpt-4o',
+    name: 'GPT-4o',
+    chef: 'OpenAI',
+    chefSlug: 'openai',
+    providers: ['openai', 'azure'],
+  },
+  {
+    id: 'gpt-4o-mini',
+    name: 'GPT-4o Mini',
+    chef: 'OpenAI',
+    chefSlug: 'openai',
+    providers: ['openai', 'azure'],
+  },
+  {
+    id: 'claude-opus-4-20250514',
+    name: 'Claude 4 Opus',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google', 'amazon-bedrock'],
+  },
+  {
+    id: 'claude-sonnet-4-20250514',
+    name: 'Claude 4 Sonnet',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google', 'amazon-bedrock'],
+  },
+  {
+    id: 'gemini-2.0-flash-exp',
+    name: 'Gemini 2.0 Flash',
+    chef: 'Google',
+    chefSlug: 'google',
+    providers: ['google'],
+  },
 ]
 
 const SUBMITTING_TIMEOUT = 200
 const STREAMING_TIMEOUT = 2000
 
-// ---- Sample Data ----
 const sampleTodos: QueueTodo[] = [
   {
     id: 'todo-1',
@@ -94,15 +136,22 @@ const sampleTodos: QueueTodo[] = [
   },
 ]
 
-// ---- Reactive State ----
 const todos = ref<QueueTodo[]>(sampleTodos)
-const text = ref('')
-const defaultModel = ref(models[0].id)
+const modelId = ref<string>(models[0].id)
+const modelSelectorOpen = ref(false)
 const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready')
+
+// const text = ref('')
+// const defaultModel = ref(models[0].id)
+// const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready')
 const timeoutRef = ref<ReturnType<typeof setTimeout> | null>(null)
-const textareaRef = ref<HTMLTextAreaElement | null>(null)
+// const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+// let timeoutHandle: ReturnType<typeof setTimeout> | null = null
+
+// --- Computed ---
+const selectedModelData = computed(() => models.find(m => m.id === modelId.value))
 
-// ---- Methods ----
 function handleRemoveTodo(id: string) {
   todos.value = todos.value.filter(todo => todo.id !== id)
 }
@@ -116,7 +165,8 @@ function stop() {
   status.value = 'ready'
 }
 
-function handleSubmit(message: any) {
+function handleSubmit(message: PromptInputMessage) {
+  // If currently streaming or submitted, stop instead of submitting
   if (status.value === 'streaming' || status.value === 'submitted') {
     stop()
     return
@@ -140,7 +190,6 @@ function handleSubmit(message: any) {
   }, STREAMING_TIMEOUT)
 }
 
-// ---- Cleanup ----
 onBeforeUnmount(() => {
   if (timeoutRef.value)
     clearTimeout(timeoutRef.value)
@@ -148,16 +197,12 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="flex flex-col justify-end size-full">
-    <!-- Queue Section -->
-    <Queue class="max-h-[150px] w-[95%] border-input mx-auto overflow-y-auto rounded-b-none border-b-0">
+  <div class="flex size-full flex-col justify-end">
+    <Queue class="mx-auto max-h-[150px] w-[95%] overflow-y-auto rounded-b-none border-b-0 border-input">
       <QueueSection v-if="todos.length > 0">
         <QueueSectionContent>
           <div>
-            <QueueItem
-              v-for="todo in todos"
-              :key="todo.id"
-            >
+            <QueueItem v-for="todo in todos" :key="todo.id">
               <div class="flex items-center gap-2">
                 <QueueItemIndicator :completed="todo.status === 'completed'" />
                 <QueueItemContent :completed="todo.status === 'completed'">
@@ -168,7 +213,7 @@ onBeforeUnmount(() => {
                     aria-label="Remove todo"
                     @click="handleRemoveTodo(todo.id)"
                   >
-                    <Trash2 :size="12" />
+                    <Trash2Icon :size="12" />
                   </QueueItemAction>
                 </QueueItemActions>
               </div>
@@ -184,43 +229,94 @@ onBeforeUnmount(() => {
       </QueueSection>
     </Queue>
 
-    <!-- Prompt Input -->
-    <PromptInput @submit="handleSubmit">
-      <PromptInputTextarea ref="textareaRef" v-model="text" placeholder="Ask me about anything..." />
-
-      <PromptInputToolbar>
-        <PromptInputTools>
-          <PromptInputButton>
-            <Plus class="size-4" />
-          </PromptInputButton>
-          <PromptInputButton>
-            <Mic class="size-4" />
-          </PromptInputButton>
-          <PromptInputButton>
-            <Globe class="size-4" />
-            <span>Search</span>
-          </PromptInputButton>
-
-          <PromptInputModelSelect v-model="defaultModel">
-            <PromptInputModelSelectTrigger>
-              <PromptInputModelSelectValue />
-            </PromptInputModelSelectTrigger>
-            <PromptInputModelSelectContent>
-              <PromptInputModelSelectItem
-                v-for="model in models"
-                :key="model.id"
-                :value="model.id"
-              >
-                {{ model.name }}
-              </PromptInputModelSelectItem>
-            </PromptInputModelSelectContent>
-          </PromptInputModelSelect>
-        </PromptInputTools>
-
-        <PromptInputSubmit :disabled="!text" :status="status">
-          <Send :size="32" />
-        </PromptInputSubmit>
-      </PromptInputToolbar>
-    </PromptInput>
+    <PromptInputProvider @submit="handleSubmit">
+      <PromptInput
+        global-drop
+        multiple
+      >
+        <PromptInputHeader>
+          <PromptInputAttachments>
+            <template #default="{ file }">
+              <PromptInputAttachment :file="file" />
+            </template>
+          </PromptInputAttachments>
+        </PromptInputHeader>
+
+        <PromptInputBody>
+          <PromptInputTextarea />
+        </PromptInputBody>
+
+        <PromptInputFooter>
+          <PromptInputTools>
+            <PromptInputActionMenu>
+              <PromptInputActionMenuTrigger />
+              <PromptInputActionMenuContent>
+                <PromptInputActionAddAttachments />
+              </PromptInputActionMenuContent>
+            </PromptInputActionMenu>
+
+            <PromptInputSpeechButton />
+
+            <PromptInputButton>
+              <GlobeIcon :size="16" />
+              <span>Search</span>
+            </PromptInputButton>
+
+            <ModelSelector v-model:open="modelSelectorOpen">
+              <ModelSelectorTrigger as-child>
+                <PromptInputButton>
+                  <ModelSelectorLogo
+                    v-if="selectedModelData?.chefSlug"
+                    :provider="selectedModelData.chefSlug"
+                  />
+                  <ModelSelectorName v-if="selectedModelData?.name">
+                    {{ selectedModelData.name }}
+                  </ModelSelectorName>
+                </PromptInputButton>
+              </ModelSelectorTrigger>
+
+              <ModelSelectorContent>
+                <ModelSelectorInput placeholder="Search models..." />
+                <ModelSelectorList>
+                  <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
+
+                  <ModelSelectorGroup
+                    v-for="chef in ['OpenAI', 'Anthropic', 'Google']"
+                    :key="chef"
+                    :heading="chef"
+                  >
+                    <ModelSelectorItem
+                      v-for="m in models.filter((item) => item.chef === chef)"
+                      :key="m.id"
+                      :value="m.id"
+                      @select="() => {
+                        modelId = m.id;
+                        modelSelectorOpen = false;
+                      }"
+                    >
+                      <ModelSelectorLogo :provider="m.chefSlug" />
+                      <ModelSelectorName>{{ m.name }}</ModelSelectorName>
+
+                      <ModelSelectorLogoGroup>
+                        <ModelSelectorLogo
+                          v-for="provider in m.providers"
+                          :key="provider"
+                          :provider="provider"
+                        />
+                      </ModelSelectorLogoGroup>
+
+                      <CheckIcon v-if="modelId === m.id" class="ml-auto size-4" />
+                      <div v-else class="ml-auto size-4" />
+                    </ModelSelectorItem>
+                  </ModelSelectorGroup>
+                </ModelSelectorList>
+              </ModelSelectorContent>
+            </ModelSelector>
+          </PromptInputTools>
+
+          <PromptInputSubmit :status="status" />
+        </PromptInputFooter>
+      </PromptInput>
+    </PromptInputProvider>
   </div>
 </template>
diff --git a/packages/examples/src/suggestion-ai-input.vue b/packages/examples/src/suggestion-input.vue
similarity index 53%
rename from packages/examples/src/suggestion-ai-input.vue
rename to packages/examples/src/suggestion-input.vue
index 89b5905..2330ac0 100644
--- a/packages/examples/src/suggestion-ai-input.vue
+++ b/packages/examples/src/suggestion-input.vue
@@ -1,25 +1,22 @@
 <!-- eslint-disable no-console -->
 <script lang="ts" setup>
+import type { PromptInputMessage } from '@repo/elements/prompt-input'
 import {
   PromptInput,
   PromptInputButton,
-  PromptInputModelSelect,
-  PromptInputModelSelectContent,
-  PromptInputModelSelectItem,
-  PromptInputModelSelectTrigger,
-  PromptInputModelSelectValue,
+  PromptInputFooter,
+  PromptInputProvider,
+  PromptInputSelect,
+  PromptInputSelectContent,
+  PromptInputSelectItem,
+  PromptInputSelectTrigger,
+  PromptInputSelectValue,
   PromptInputSubmit,
   PromptInputTextarea,
-  PromptInputToolbar,
   PromptInputTools,
 } from '@repo/elements/prompt-input'
-
-import {
-  Suggestion,
-  Suggestions,
-} from '@repo/elements/suggestion'
-
-import { Globe, Mic, Plus, Send } from 'lucide-vue-next'
+import { Suggestion, Suggestions } from '@repo/elements/suggestion'
+import { GlobeIcon, MicIcon, PlusIcon, SendIcon } from 'lucide-vue-next'
 import { nanoid } from 'nanoid'
 import { ref } from 'vue'
 
@@ -53,7 +50,7 @@ const defaultModel = ref(models[0].id)
 const text = ref('')
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
 
-function handleSubmit(message: any) {
+function handleSubmit(message: PromptInputMessage) {
   const hasText = !!message.text
   const hasAttachments = !!(message.files?.length)
 
@@ -80,42 +77,44 @@ function handleSuggestionClick(suggestion: string) {
       />
     </Suggestions>
 
-    <PromptInput @submit="handleSubmit">
-      <PromptInputTextarea ref="textareaRef" v-model="text" placeholder="Ask me about anything..." />
+    <PromptInputProvider @submit="handleSubmit">
+      <PromptInput>
+        <PromptInputTextarea ref="textareaRef" v-model="text" placeholder="Ask me about anything..." />
 
-      <PromptInputToolbar>
-        <PromptInputTools>
-          <PromptInputButton>
-            <Plus class="size-4" />
-          </PromptInputButton>
-          <PromptInputButton>
-            <Mic class="size-4" />
-          </PromptInputButton>
-          <PromptInputButton>
-            <Globe class="size-4" />
-            <span>Search</span>
-          </PromptInputButton>
+        <PromptInputFooter>
+          <PromptInputTools>
+            <PromptInputButton>
+              <PlusIcon class="size-4" />
+            </PromptInputButton>
+            <PromptInputButton>
+              <MicIcon class="size-4" />
+            </PromptInputButton>
+            <PromptInputButton>
+              <GlobeIcon class="size-4" />
+              <span>Search</span>
+            </PromptInputButton>
 
-          <PromptInputModelSelect v-model="defaultModel">
-            <PromptInputModelSelectTrigger>
-              <PromptInputModelSelectValue />
-            </PromptInputModelSelectTrigger>
-            <PromptInputModelSelectContent>
-              <PromptInputModelSelectItem
-                v-for="model in models"
-                :key="model.id"
-                :value="model.id"
-              >
-                {{ model.name }}
-              </PromptInputModelSelectItem>
-            </PromptInputModelSelectContent>
-          </PromptInputModelSelect>
-        </PromptInputTools>
+            <PromptInputSelect v-model="defaultModel">
+              <PromptInputSelectTrigger>
+                <PromptInputSelectValue />
+              </PromptInputSelectTrigger>
+              <PromptInputSelectContent>
+                <PromptInputSelectItem
+                  v-for="model in models"
+                  :key="model.id"
+                  :value="model.id"
+                >
+                  {{ model.name }}
+                </PromptInputSelectItem>
+              </PromptInputSelectContent>
+            </PromptInputSelect>
+          </PromptInputTools>
 
-        <PromptInputSubmit :disabled="!text" :status="status">
-          <Send :size="32" />
-        </PromptInputSubmit>
-      </PromptInputToolbar>
-    </PromptInput>
+          <PromptInputSubmit :disabled="!text" :status="status">
+            <SendIcon :size="32" />
+          </PromptInputSubmit>
+        </PromptInputFooter>
+      </PromptInput>
+    </PromptInputProvider>
   </div>
 </template>

From 322eaad5c960fba399e2d4b5a86f759de6e881fc Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Sun, 30 Nov 2025 02:31:35 +0100
Subject: [PATCH 4/7] feat: prompt-input now manages its own context making the
 need for an external provider optional

---
 .../elements/src/prompt-input/PromptInput.vue |  32 +++-
 packages/examples/src/queue-prompt-input.vue  | 164 ++++++++----------
 packages/examples/src/suggestion-input.vue    |  73 ++++----
 3 files changed, 142 insertions(+), 127 deletions(-)

diff --git a/packages/elements/src/prompt-input/PromptInput.vue b/packages/elements/src/prompt-input/PromptInput.vue
index b7e9794..a63c55e 100644
--- a/packages/elements/src/prompt-input/PromptInput.vue
+++ b/packages/elements/src/prompt-input/PromptInput.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import type { PromptInputMessage } from './types'
 import { InputGroup } from '@repo/shadcn-vue/components/ui/input-group'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { onMounted, onUnmounted, ref } from 'vue'
-import { usePromptInput } from './context'
+import { inject, onMounted, onUnmounted, ref } from 'vue'
+import { usePromptInputProvider } from './context'
+import { PROMPT_INPUT_KEY } from './types'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
@@ -15,9 +17,33 @@ const props = defineProps<{
   initialInput?: string
 }>()
 
+const emit = defineEmits<{
+  (e: 'submit', payload: PromptInputMessage): void
+  (e: 'error', payload: { code: string, message: string }): void
+}>()
+
 const formRef = ref<HTMLFormElement | null>(null)
 
-const { fileInputRef, addFiles, submitForm } = usePromptInput()
+// --- Dual-mode context handling ---
+const inheritedContext = inject(PROMPT_INPUT_KEY, null)
+const localContext = inheritedContext
+  ? null
+  : usePromptInputProvider({
+      initialInput: props.initialInput,
+      maxFiles: props.maxFiles,
+      maxFileSize: props.maxFileSize,
+      accept: props.accept,
+      onSubmit: msg => emit('submit', msg as any),
+      onError: err => emit('error', err),
+    })
+
+const context = inheritedContext || localContext
+
+if (!context) {
+  throw new Error('PromptInput context is missing.')
+}
+
+const { fileInputRef, addFiles, submitForm } = context
 
 function handleDragOver(e: DragEvent) {
   if (e.dataTransfer?.types?.includes('Files')) {
diff --git a/packages/examples/src/queue-prompt-input.vue b/packages/examples/src/queue-prompt-input.vue
index 125ef26..cf8b012 100644
--- a/packages/examples/src/queue-prompt-input.vue
+++ b/packages/examples/src/queue-prompt-input.vue
@@ -26,7 +26,6 @@ import {
   PromptInputButton,
   PromptInputFooter,
   PromptInputHeader,
-  PromptInputProvider,
   PromptInputSpeechButton,
   PromptInputSubmit,
   PromptInputTextarea,
@@ -43,7 +42,6 @@ import {
   QueueSection,
   QueueSectionContent,
 } from '@repo/elements/queue'
-// import { Globe, Mic, Plus, Send, Trash2 } from 'lucide-vue-next'
 import { CheckIcon, GlobeIcon, Trash2Icon } from 'lucide-vue-next'
 import { computed, onBeforeUnmount, ref } from 'vue'
 
@@ -141,15 +139,8 @@ const modelId = ref<string>(models[0].id)
 const modelSelectorOpen = ref(false)
 const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready')
 
-// const text = ref('')
-// const defaultModel = ref(models[0].id)
-// const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready')
 const timeoutRef = ref<ReturnType<typeof setTimeout> | null>(null)
-// const textareaRef = ref<HTMLTextAreaElement | null>(null)
 
-// let timeoutHandle: ReturnType<typeof setTimeout> | null = null
-
-// --- Computed ---
 const selectedModelData = computed(() => models.find(m => m.id === modelId.value))
 
 function handleRemoveTodo(id: string) {
@@ -229,94 +220,93 @@ onBeforeUnmount(() => {
       </QueueSection>
     </Queue>
 
-    <PromptInputProvider @submit="handleSubmit">
-      <PromptInput
-        global-drop
-        multiple
-      >
-        <PromptInputHeader>
-          <PromptInputAttachments>
-            <template #default="{ file }">
-              <PromptInputAttachment :file="file" />
-            </template>
-          </PromptInputAttachments>
-        </PromptInputHeader>
+    <PromptInput
+      global-drop
+      multiple
+      @submit="handleSubmit"
+    >
+      <PromptInputHeader>
+        <PromptInputAttachments>
+          <template #default="{ file }">
+            <PromptInputAttachment :file="file" />
+          </template>
+        </PromptInputAttachments>
+      </PromptInputHeader>
 
-        <PromptInputBody>
-          <PromptInputTextarea />
-        </PromptInputBody>
+      <PromptInputBody>
+        <PromptInputTextarea />
+      </PromptInputBody>
 
-        <PromptInputFooter>
-          <PromptInputTools>
-            <PromptInputActionMenu>
-              <PromptInputActionMenuTrigger />
-              <PromptInputActionMenuContent>
-                <PromptInputActionAddAttachments />
-              </PromptInputActionMenuContent>
-            </PromptInputActionMenu>
+      <PromptInputFooter>
+        <PromptInputTools>
+          <PromptInputActionMenu>
+            <PromptInputActionMenuTrigger />
+            <PromptInputActionMenuContent>
+              <PromptInputActionAddAttachments />
+            </PromptInputActionMenuContent>
+          </PromptInputActionMenu>
 
-            <PromptInputSpeechButton />
+          <PromptInputSpeechButton />
 
-            <PromptInputButton>
-              <GlobeIcon :size="16" />
-              <span>Search</span>
-            </PromptInputButton>
+          <PromptInputButton>
+            <GlobeIcon :size="16" />
+            <span>Search</span>
+          </PromptInputButton>
 
-            <ModelSelector v-model:open="modelSelectorOpen">
-              <ModelSelectorTrigger as-child>
-                <PromptInputButton>
-                  <ModelSelectorLogo
-                    v-if="selectedModelData?.chefSlug"
-                    :provider="selectedModelData.chefSlug"
-                  />
-                  <ModelSelectorName v-if="selectedModelData?.name">
-                    {{ selectedModelData.name }}
-                  </ModelSelectorName>
-                </PromptInputButton>
-              </ModelSelectorTrigger>
+          <ModelSelector v-model:open="modelSelectorOpen">
+            <ModelSelectorTrigger as-child>
+              <PromptInputButton>
+                <ModelSelectorLogo
+                  v-if="selectedModelData?.chefSlug"
+                  :provider="selectedModelData.chefSlug"
+                />
+                <ModelSelectorName v-if="selectedModelData?.name">
+                  {{ selectedModelData.name }}
+                </ModelSelectorName>
+              </PromptInputButton>
+            </ModelSelectorTrigger>
 
-              <ModelSelectorContent>
-                <ModelSelectorInput placeholder="Search models..." />
-                <ModelSelectorList>
-                  <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
+            <ModelSelectorContent>
+              <ModelSelectorInput placeholder="Search models..." />
+              <ModelSelectorList>
+                <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
 
-                  <ModelSelectorGroup
-                    v-for="chef in ['OpenAI', 'Anthropic', 'Google']"
-                    :key="chef"
-                    :heading="chef"
+                <ModelSelectorGroup
+                  v-for="chef in ['OpenAI', 'Anthropic', 'Google']"
+                  :key="chef"
+                  :heading="chef"
+                >
+                  <ModelSelectorItem
+                    v-for="m in models.filter((item) => item.chef === chef)"
+                    :key="m.id"
+                    :value="m.id"
+                    @select="() => {
+                      modelId = m.id;
+                      modelSelectorOpen = false;
+                    }"
                   >
-                    <ModelSelectorItem
-                      v-for="m in models.filter((item) => item.chef === chef)"
-                      :key="m.id"
-                      :value="m.id"
-                      @select="() => {
-                        modelId = m.id;
-                        modelSelectorOpen = false;
-                      }"
-                    >
-                      <ModelSelectorLogo :provider="m.chefSlug" />
-                      <ModelSelectorName>{{ m.name }}</ModelSelectorName>
+                    <ModelSelectorLogo :provider="m.chefSlug" />
+                    <ModelSelectorName>{{ m.name }}</ModelSelectorName>
 
-                      <ModelSelectorLogoGroup>
-                        <ModelSelectorLogo
-                          v-for="provider in m.providers"
-                          :key="provider"
-                          :provider="provider"
-                        />
-                      </ModelSelectorLogoGroup>
+                    <ModelSelectorLogoGroup>
+                      <ModelSelectorLogo
+                        v-for="provider in m.providers"
+                        :key="provider"
+                        :provider="provider"
+                      />
+                    </ModelSelectorLogoGroup>
 
-                      <CheckIcon v-if="modelId === m.id" class="ml-auto size-4" />
-                      <div v-else class="ml-auto size-4" />
-                    </ModelSelectorItem>
-                  </ModelSelectorGroup>
-                </ModelSelectorList>
-              </ModelSelectorContent>
-            </ModelSelector>
-          </PromptInputTools>
+                    <CheckIcon v-if="modelId === m.id" class="ml-auto size-4" />
+                    <div v-else class="ml-auto size-4" />
+                  </ModelSelectorItem>
+                </ModelSelectorGroup>
+              </ModelSelectorList>
+            </ModelSelectorContent>
+          </ModelSelector>
+        </PromptInputTools>
 
-          <PromptInputSubmit :status="status" />
-        </PromptInputFooter>
-      </PromptInput>
-    </PromptInputProvider>
+        <PromptInputSubmit :status="status" />
+      </PromptInputFooter>
+    </PromptInput>
   </div>
 </template>
diff --git a/packages/examples/src/suggestion-input.vue b/packages/examples/src/suggestion-input.vue
index 2330ac0..00633e1 100644
--- a/packages/examples/src/suggestion-input.vue
+++ b/packages/examples/src/suggestion-input.vue
@@ -5,7 +5,6 @@ import {
   PromptInput,
   PromptInputButton,
   PromptInputFooter,
-  PromptInputProvider,
   PromptInputSelect,
   PromptInputSelectContent,
   PromptInputSelectItem,
@@ -77,44 +76,44 @@ function handleSuggestionClick(suggestion: string) {
       />
     </Suggestions>
 
-    <PromptInputProvider @submit="handleSubmit">
-      <PromptInput>
-        <PromptInputTextarea ref="textareaRef" v-model="text" placeholder="Ask me about anything..." />
+    <!-- <PromptInputProvider @submit="handleSubmit"> -->
+    <PromptInput @submit="handleSubmit">
+      <PromptInputTextarea ref="textareaRef" v-model="text" placeholder="Ask me about anything..." />
 
-        <PromptInputFooter>
-          <PromptInputTools>
-            <PromptInputButton>
-              <PlusIcon class="size-4" />
-            </PromptInputButton>
-            <PromptInputButton>
-              <MicIcon class="size-4" />
-            </PromptInputButton>
-            <PromptInputButton>
-              <GlobeIcon class="size-4" />
-              <span>Search</span>
-            </PromptInputButton>
+      <PromptInputFooter>
+        <PromptInputTools>
+          <PromptInputButton>
+            <PlusIcon class="size-4" />
+          </PromptInputButton>
+          <PromptInputButton>
+            <MicIcon class="size-4" />
+          </PromptInputButton>
+          <PromptInputButton>
+            <GlobeIcon class="size-4" />
+            <span>Search</span>
+          </PromptInputButton>
 
-            <PromptInputSelect v-model="defaultModel">
-              <PromptInputSelectTrigger>
-                <PromptInputSelectValue />
-              </PromptInputSelectTrigger>
-              <PromptInputSelectContent>
-                <PromptInputSelectItem
-                  v-for="model in models"
-                  :key="model.id"
-                  :value="model.id"
-                >
-                  {{ model.name }}
-                </PromptInputSelectItem>
-              </PromptInputSelectContent>
-            </PromptInputSelect>
-          </PromptInputTools>
+          <PromptInputSelect v-model="defaultModel">
+            <PromptInputSelectTrigger>
+              <PromptInputSelectValue />
+            </PromptInputSelectTrigger>
+            <PromptInputSelectContent>
+              <PromptInputSelectItem
+                v-for="model in models"
+                :key="model.id"
+                :value="model.id"
+              >
+                {{ model.name }}
+              </PromptInputSelectItem>
+            </PromptInputSelectContent>
+          </PromptInputSelect>
+        </PromptInputTools>
 
-          <PromptInputSubmit :disabled="!text" :status="status">
-            <SendIcon :size="32" />
-          </PromptInputSubmit>
-        </PromptInputFooter>
-      </PromptInput>
-    </PromptInputProvider>
+        <PromptInputSubmit :disabled="!text" :status="status">
+          <SendIcon :size="32" />
+        </PromptInputSubmit>
+      </PromptInputFooter>
+    </PromptInput>
+    <!-- </PromptInputProvider> -->
   </div>
 </template>

From 7c537c0b8f8e815afcd23b1dd74efb115d441de9 Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Sun, 30 Nov 2025 23:28:20 +0100
Subject: [PATCH 5/7] chore(docs): update prompt-input component docs

---
 .../3.components/1.chatbot/prompt-input.md    | 2097 ++++++++++++++---
 apps/www/plugins/ai-elements.ts               |    2 +
 .../PromptInputActionAddAttachments.vue       |   10 +-
 .../PromptInputActionMenuItem.vue             |    8 +-
 .../prompt-input/PromptInputCommandList.vue   |    6 +-
 .../src/prompt-input/PromptInputHoverCard.vue |    9 +-
 .../PromptInputHoverCardContent.vue           |    4 +-
 .../prompt-input/PromptInputSpeechButton.vue  |   61 +-
 .../src/prompt-input/PromptInputTextarea.vue  |   11 +-
 packages/elements/src/prompt-input/context.ts |    2 +-
 packages/elements/src/prompt-input/index.ts   |    1 -
 packages/examples/src/index.ts                |    1 +
 packages/examples/src/prompt-input-cursor.vue |  391 +++
 13 files changed, 2284 insertions(+), 319 deletions(-)
 create mode 100644 packages/examples/src/prompt-input-cursor.vue

diff --git a/apps/www/content/3.components/1.chatbot/prompt-input.md b/apps/www/content/3.components/1.chatbot/prompt-input.md
index 8c137ff..bff4672 100644
--- a/apps/www/content/3.components/1.chatbot/prompt-input.md
+++ b/apps/www/content/3.components/1.chatbot/prompt-input.md
@@ -30,249 +30,1444 @@ The `PromptInput` component allows a user to send a message to a large language
 Copy and paste the following code in the same folder.
 
 :::code-group
-  ```vue [PromptInput.vue]
-  <script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
+```vue [PromptInputProvider.vue] height=300 collapse
+<script setup lang="ts">
+import type { PromptInputMessage } from './types'
+import { usePromptInputProvider } from './context'
+
+const props = defineProps<{
+  initialInput?: string
+  maxFiles?: number
+  maxFileSize?: number
+  accept?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'submit', payload: PromptInputMessage): void
+  (e: 'error', payload: { code: string, message: string }): void
+}>()
+
+usePromptInputProvider({
+  initialInput: props.initialInput,
+  maxFiles: props.maxFiles,
+  maxFileSize: props.maxFileSize,
+  accept: props.accept,
+  onSubmit: msg => emit('submit', msg),
+  onError: err => emit('error', err),
+})
+</script>
+
+<template>
+  <slot />
+</template>
+```
+
+```vue [PromptInput.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { PromptInputMessage } from './types'
+import { InputGroup } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { inject, onMounted, onUnmounted, ref } from 'vue'
+import { usePromptInputProvider } from './context'
+import { PROMPT_INPUT_KEY } from './types'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  accept?: string
+  multiple?: boolean
+  globalDrop?: boolean
+  maxFiles?: number
+  maxFileSize?: number
+  initialInput?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'submit', payload: PromptInputMessage): void
+  (e: 'error', payload: { code: string, message: string }): void
+}>()
+
+const formRef = ref<HTMLFormElement | null>(null)
+
+// --- Dual-mode context handling ---
+const inheritedContext = inject(PROMPT_INPUT_KEY, null)
+const localContext = inheritedContext
+  ? null
+  : usePromptInputProvider({
+      initialInput: props.initialInput,
+      maxFiles: props.maxFiles,
+      maxFileSize: props.maxFileSize,
+      accept: props.accept,
+      onSubmit: msg => emit('submit', msg as any),
+      onError: err => emit('error', err),
+    })
+
+const context = inheritedContext || localContext
+
+if (!context) {
+  throw new Error('PromptInput context is missing.')
+}
+
+const { fileInputRef, addFiles, submitForm } = context
+
+function handleDragOver(e: DragEvent) {
+  if (e.dataTransfer?.types?.includes('Files')) {
+    e.preventDefault()
+  }
+}
+
+function handleDrop(e: DragEvent) {
+  if (e.dataTransfer?.types?.includes('Files')) {
+    e.preventDefault()
+  }
+  if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+    addFiles(e.dataTransfer.files)
+  }
+}
+
+onMounted(() => {
+  if (props.globalDrop) {
+    document.addEventListener('dragover', handleDragOver)
+    document.addEventListener('drop', handleDrop)
+  }
+})
+
+onUnmounted(() => {
+  if (props.globalDrop) {
+    document.removeEventListener('dragover', handleDragOver)
+    document.removeEventListener('drop', handleDrop)
+  }
+})
+
+function onFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (input.files) {
+    addFiles(input.files)
+  }
+  input.value = ''
+}
+
+function onSubmit(e: Event) {
+  e.preventDefault()
+  submitForm()
+}
+</script>
+
+<template>
+  <div>
+    <input
+      ref="fileInputRef"
+      type="file"
+      class="hidden"
+      :accept="accept"
+      :multiple="multiple"
+      @change="onFileChange"
+    >
+    <form
+      ref="formRef"
+      :class="cn('w-full', props.class)"
+      @submit="onSubmit"
+      @dragover.prevent="handleDragOver"
+      @drop.prevent="handleDrop"
+    >
+      <InputGroup class="overflow-hidden">
+        <slot />
+      </InputGroup>
+    </form>
+  </div>
+</template>
+```
+
+```vue [PromptInputTextarea.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { InputGroupTextarea } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, ref } from 'vue'
+import { usePromptInput } from './context'
+
+type PromptInputTextareaProps = InstanceType<typeof InputGroupTextarea>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputTextareaProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const { textInput, setTextInput, submitForm, addFiles, files, removeFile } = usePromptInput()
+const isComposing = ref(false)
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    if (isComposing.value || e.shiftKey)
+      return
+    e.preventDefault()
+    submitForm()
+  }
+
+  // Remove last attachment on backspace if input is empty
+  if (e.key === 'Backspace' && textInput.value === '' && files.value.length > 0) {
+    const lastFile = files.value[files.value.length - 1]
+    if (lastFile) {
+      removeFile(lastFile.id)
+    }
+  }
+}
+
+function handlePaste(e: ClipboardEvent) {
+  const items = e.clipboardData?.items
+  if (!items)
+    return
+
+  const pastedFiles: File[] = []
+  for (const item of Array.from(items)) {
+    if (item.kind === 'file') {
+      const file = item.getAsFile()
+      if (file)
+        pastedFiles.push(file)
+    }
+  }
+
+  if (pastedFiles.length > 0) {
+    e.preventDefault()
+    addFiles(pastedFiles)
+  }
+}
+
+const modelValue = computed({
+  get: () => textInput.value,
+  set: val => setTextInput(val),
+})
+</script>
+
+<template>
+  <InputGroupTextarea
+    v-model="modelValue"
+    placeholder="What would you like to know?"
+    name="message"
+    :class="cn('field-sizing-content max-h-48 min-h-16', props.class)"
+    v-bind="props"
+    @keydown="handleKeyDown"
+    @paste="handlePaste"
+    @compositionstart="isComposing = true"
+    @compositionend="isComposing = false"
+  />
+</template>
+```
+
+```vue [PromptInputTools.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center gap-1', props.class)">
+    <slot />
+  </div>
+</template>
+```
+
+```vue [PromptInputButton.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { InputGroupButton } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useSlots } from 'vue'
+
+type InputGroupButtonProps = InstanceType<typeof InputGroupButton>['$props']
+
+interface Props extends /* @vue-ignore */ InputGroupButtonProps {
+  class?: HTMLAttributes['class']
+  variant?: InputGroupButtonProps['variant']
+  size?: InputGroupButtonProps['size']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'ghost',
+})
+
+const slots = useSlots()
+
+const computedSize = computed(() => {
+  if (props.size)
+    return props.size
+
+  const slotNodes = slots.default?.()
+
+  if (!slotNodes)
+    return 'icon-sm'
+
+  const validChildren = slotNodes.filter((node) => {
+    if (node.type === Comment)
+      return false
+    if (node.type === Text && !node.children?.toString().trim())
+      return false
+    return true
+  })
+
+  return validChildren.length > 1 ? 'sm' : 'icon-sm'
+})
+
+const { size, variant, class: _, ...restProps } = props
+</script>
+
+<template>
+  <InputGroupButton
+    type="button"
+    :size="computedSize"
+    :class="cn($props.class)"
+    :variant="variant"
+    v-bind="restProps"
+  >
+    <slot />
+  </InputGroupButton>
+</template>
+```
+
+```vue [PromptInputSubmit.vue] height=300 collapse
+<script setup lang="ts">
+import type { ChatStatus } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import { InputGroupButton } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { CornerDownLeftIcon, Loader2Icon, SquareIcon, XIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+
+type InputGroupButtonProps = InstanceType<typeof InputGroupButton>['$props']
+
+interface Props extends /* @vue-ignore */ InputGroupButtonProps {
+  class?: HTMLAttributes['class']
+  status?: ChatStatus
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'icon-sm',
+})
+
+const icon = computed(() => {
+  if (props.status === 'submitted') {
+    return Loader2Icon
+  }
+  else if (props.status === 'streaming') {
+    return SquareIcon
+  }
+  else if (props.status === 'error') {
+    return XIcon
+  }
+  return CornerDownLeftIcon
+})
+
+const iconClass = computed(() => {
+  if (props.status === 'submitted') {
+    return 'size-4 animate-spin'
+  }
+  return 'size-4'
+})
+
+const { status, size, variant, class: _, ...restProps } = props
+</script>
+
+<template>
+  <InputGroupButton
+    aria-label="Submit"
+    :class="cn(props.class)"
+    :size="size"
+    :variant="variant"
+    type="submit"
+    v-bind="restProps"
+  >
+    <slot>
+      <component :is="icon" :class="iconClass" />
+    </slot>
+  </InputGroupButton>
+</template>
+```
+
+```vue [PromptInputBody.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div :class="cn('contents', props.class)" v-bind="props">
+    <slot />
+  </div>
+</template>
+```
+
+```vue [PromptInputAttachments.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { usePromptInput } from './context'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { files } = usePromptInput()
+</script>
+
+<template>
+  <div
+    v-if="files.length > 0"
+    :class="cn('flex flex-wrap items-center gap-2 p-3 w-full', props.class)"
+  >
+    <template v-for="file in files" :key="file.id">
+      <slot :file="file" />
+    </template>
+  </div>
+</template>
+```
+
+```vue [PromptInputAttachment.vue] height=300 collapse
+<script setup lang="ts">
+import type { AttachmentFile } from './types'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@repo/shadcn-vue/components/ui/hover-card'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { PaperclipIcon, XIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { usePromptInput } from './context'
+
+const props = defineProps<{
+  file: AttachmentFile
+  class?: string
+}>()
+
+const { removeFile } = usePromptInput()
+
+const filename = computed(() => props.file.filename || '')
+const isImage = computed(() =>
+  props.file.mediaType?.startsWith('image/') && props.file.url,
+)
+const label = computed(() => filename.value || (isImage.value ? 'Image' : 'Attachment'))
+
+function handleRemove(e: Event) {
+  e.stopPropagation()
+  removeFile(props.file.id)
+}
+</script>
+
+<template>
+  <HoverCard :open-delay="0" :close-delay="0">
+    <HoverCardTrigger as-child>
+      <div
+        :class="cn(
+          'group relative flex h-8 cursor-pointer select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+          props.class,
+        )"
+      >
+        <div class="relative size-5 shrink-0">
+          <div class="absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded bg-background transition-opacity group-hover:opacity-0">
+            <img
+              v-if="isImage"
+              :src="file.url"
+              :alt="label"
+              class="size-5 object-cover"
+            >
+            <div v-else class="flex size-5 items-center justify-center text-muted-foreground">
+              <PaperclipIcon class="size-3" />
+            </div>
+          </div>
+
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            class="absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5"
+            @click="handleRemove"
+          >
+            <XIcon />
+            <span class="sr-only">Remove</span>
+          </Button>
+        </div>
+
+        <span class="flex-1 truncate max-w-[150px]">{{ label }}</span>
+      </div>
+    </HoverCardTrigger>
+
+    <HoverCardContent class="w-auto p-2" align="start">
+      <div class="w-auto space-y-3">
+        <div v-if="isImage" class="flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border">
+          <img
+            :src="file.url"
+            :alt="label"
+            class="max-h-full max-w-full object-contain"
+          >
+        </div>
+        <div class="flex items-center gap-2.5">
+          <div class="min-w-0 flex-1 space-y-1 px-0.5">
+            <h4 class="truncate font-semibold text-sm leading-none">
+              {{ label }}
+            </h4>
+            <p v-if="file.mediaType" class="truncate font-mono text-muted-foreground text-xs">
+              {{ file.mediaType }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+</template>
+```
+
+```vue [PromptInputHeader.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { InputGroupAddon } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputHeaderProps = InstanceType<typeof InputGroupAddon>['$props']
+
+interface Props extends /* @vue-ignore */ Omit<PromptInputHeaderProps, 'align'> {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <InputGroupAddon
+    align="block-end"
+    :class="cn('order-first flex-wrap gap-1', props.class)"
+    v-bind="props"
+  >
+    <slot />
+  </InputGroupAddon>
+</template>
+```
+
+```vue [PromptInputFooter.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { InputGroupAddon } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputFooterProps = InstanceType<typeof InputGroupAddon>['$props']
+
+interface Props extends /* @vue-ignore */ Omit<PromptInputFooterProps, 'align'> {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <InputGroupAddon
+    align="block-end"
+    :class="cn('justify-between gap-1', props.class)"
+    v-bind="props"
+  >
+    <slot />
+  </InputGroupAddon>
+</template>
+```
+
+```vue [PromptInputActionMenu.vue] height=300 collapse
+<script setup lang="ts">
+import { DropdownMenu } from '@repo/shadcn-vue/components/ui/dropdown-menu'
+
+type DropdownMenuProps = InstanceType<typeof DropdownMenu>['$props']
+
+interface Props extends /* @vue-ignore */ DropdownMenuProps {}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <DropdownMenu v-bind="props">
+    <slot />
+  </DropdownMenu>
+</template>
+```
+
+```vue [PromptInputActionMenuTrigger.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuTrigger } from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { PlusIcon } from 'lucide-vue-next'
+import PromptInputButton from './PromptInputButton.vue'
+
+type DropdownMenuTriggerProps = InstanceType<typeof DropdownMenuTrigger>['$props']
+
+interface Props extends /* @vue-ignore */ DropdownMenuTriggerProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <DropdownMenuTrigger as-child>
+    <PromptInputButton :class="props.class" v-bind="props">
+      <slot><PlusIcon class="size-4" /></slot>
+    </PromptInputButton>
+  </DropdownMenuTrigger>
+</template>
+```
+
+```vue [PromptInputActionMenuContent.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuContent } from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type DropdownMenuContentProps = InstanceType<typeof DropdownMenuContent>['$props']
+
+interface Props extends /* @vue-ignore */ DropdownMenuContentProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const { align, class: _, ...restProps } = props
+</script>
+
+<template>
+  <DropdownMenuContent align="start" :class="cn(props.class)" v-bind="restProps">
+    <slot />
+  </DropdownMenuContent>
+</template>
+```
+
+```vue [PromptInputActionMenuItem.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuItem } from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputActionMenuItemProps = InstanceType<typeof DropdownMenuItem>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputActionMenuItemProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <DropdownMenuItem :class="cn(props.class)">
+    <slot />
+  </DropdownMenuItem>
+</template>
+```
+
+```vue [PromptInputActionAddAttachments.vue] height=300 collapse
+<script setup lang="ts">
+import { DropdownMenuItem } from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { ImageIcon } from 'lucide-vue-next'
+import { usePromptInput } from './context'
+
+defineProps<{ label?: string }>()
+
+const { openFileDialog } = usePromptInput()
+</script>
+
+<template>
+  <DropdownMenuItem @select.prevent="openFileDialog">
+    <ImageIcon class="mr-2 size-4" />
+    {{ label || 'Add photos or files' }}
+  </DropdownMenuItem>
+</template>
+```
+
+```vue [PromptInputSpeechButton.vue] height=300 collapse
+<script setup lang="ts">
+import { InputGroupButton } from '@repo/shadcn-vue/components/ui/input-group'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { MicIcon } from 'lucide-vue-next'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { usePromptInput } from './context'
+
+interface SpeechRecognition extends EventTarget {
+  continuous: boolean
+  interimResults: boolean
+  lang: string
+  start: () => void
+  stop: () => void
+  onstart: ((this: SpeechRecognition, ev: Event) => any) | null
+  onend: ((this: SpeechRecognition, ev: Event) => any) | null
+  onresult: ((this: SpeechRecognition, ev: any) => any) | null
+  onerror: ((this: SpeechRecognition, ev: any) => any) | null
+}
+
+const props = defineProps<{ class?: string }>()
+
+const { textInput, setTextInput } = usePromptInput()
+const isListening = ref(false)
+const recognition = ref<SpeechRecognition | null>(null)
+
+onMounted(() => {
+  const Win = window as any
+  const SpeechRecognition = Win.SpeechRecognition || Win.webkitSpeechRecognition
+
+  if (SpeechRecognition) {
+    const sr = new SpeechRecognition()
+    sr.continuous = true
+    sr.interimResults = true
+    sr.lang = 'en-US'
+
+    sr.onstart = () => isListening.value = true
+    sr.onend = () => isListening.value = false
+
+    sr.onresult = (event: any) => {
+      let finalTranscript = ''
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const result = event.results[i]
+        if (result.isFinal) {
+          finalTranscript += result[0]?.transcript ?? ''
+        }
+      }
+
+      if (finalTranscript) {
+        const newValue = textInput.value + (textInput.value ? ' ' : '') + finalTranscript
+        setTextInput(newValue)
+      }
+    }
+
+    sr.onerror = (event: any) => {
+      console.error('Speech recognition error:', event.error)
+      isListening.value = false
+    }
+
+    recognition.value = sr
+  }
+})
+
+onUnmounted(() => {
+  recognition.value?.stop()
+})
+
+function toggleListening() {
+  if (!recognition.value)
+    return
+  if (isListening.value) {
+    recognition.value.stop()
+  }
+  else {
+    recognition.value.start()
+  }
+}
+</script>
+
+<template>
+  <InputGroupButton
+    type="button"
+    variant="ghost"
+    size="icon-sm"
+    :disabled="!recognition"
+    :class="cn(
+      'relative transition-all duration-200',
+      isListening && 'animate-pulse bg-accent text-accent-foreground',
+      props.class,
+    )"
+    @click="toggleListening"
+  >
+    <MicIcon class="size-4" />
+  </InputGroupButton>
+</template>
+```
+
+```vue [PromptInputSelect.vue] height=300 collapse
+<script setup lang="ts">
+import { Select } from '@repo/shadcn-vue/components/ui/select'
+
+type PromptInputSelectProps = InstanceType<typeof Select>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputSelectProps {}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <Select v-bind="props">
+    <slot />
+  </Select>
+</template>
+```
+
+```vue [PromptInputSelectTrigger.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectTrigger } from '@repo/shadcn-vue/components/ui/select'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type SelectTriggerProps = InstanceType<typeof SelectTrigger>['$props']
+
+interface Props extends /* @vue-ignore */ SelectTriggerProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <SelectTrigger
+    :class="cn(
+      'border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors',
+      'hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground',
+      props.class,
+    )"
+    v-bind="props"
+  >
+    <slot />
+  </SelectTrigger>
+</template>
+```
+
+```vue [PromptInputSelectContent.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectContent } from '@repo/shadcn-vue/components/ui/select'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type SelectContentProps = InstanceType<typeof SelectContent>['$props']
+
+interface Props extends /* @vue-ignore */ SelectContentProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <SelectContent :class="cn(props.class)" v-bind="props">
+    <slot />
+  </SelectContent>
+</template>
+```
+
+```vue [PromptInputSelectItem.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectItem } from '@repo/shadcn-vue/components/ui/select'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputSelectItemProps = InstanceType<typeof SelectItem>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputSelectItemProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <SelectItem :class="cn(props.class)" v-bind="props">
+    <slot />
+  </SelectItem>
+</template>
+```
+
+```vue [PromptInputSelectValue.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectValue } from '@repo/shadcn-vue/components/ui/select'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputSelectValueProps = InstanceType<typeof SelectValue>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputSelectValueProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <SelectValue :class="cn(props.class)" v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
+```
+
+```vue [PromptInputHoverCard.vue] height=300 collapse
+<script setup lang="ts">
+import { HoverCard } from '@repo/shadcn-vue/components/ui/hover-card'
+
+type PromptInputHoverCardProps = InstanceType<typeof HoverCard>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputHoverCardProps {
+  openDelay?: number
+  closeDelay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  openDelay: 0,
+  closeDelay: 0,
+})
+
+const { openDelay, closeDelay, ...restProps } = props
+</script>
+
+<template>
+  <HoverCard :open-delay="openDelay" :close-delay="closeDelay" v-bind="restProps">
+    <slot />
+  </HoverCard>
+</template>
+```
+
+```vue [PromptInputHoverCardTrigger.vue] height=300 collapse
+<script setup lang="ts">
+import { HoverCardTrigger } from '@repo/shadcn-vue/components/ui/hover-card'
+
+type PromptInputHoverCardTriggerProps = InstanceType<typeof HoverCardTrigger>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputHoverCardTriggerProps {}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>
+```
+
+```vue [PromptInputHoverCardContent.vue] height=300 collapse
+<script setup lang="ts">
+import { HoverCardContent } from '@repo/shadcn-vue/components/ui/hover-card'
+
+type PromptInputHoverCardContentProps = InstanceType<typeof HoverCardContent>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputHoverCardContentProps {}
+
+const props = withDefaults(defineProps<Props>(), {
+  align: 'start',
+})
+
+const { align, ...restProps } = props
+</script>
+
+<template>
+  <HoverCardContent :align="props.align" v-bind="restProps">
+    <slot />
+  </HoverCardContent>
+</template>
+```
+
+```vue [PromptInputTabsList.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn(props.class)" v-bind="props">
+    <slot />
+  </div>
+</template>
+```
+
+```vue [PromptInputTab.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn(props.class)" v-bind="props">
+    <slot />
+  </div>
+</template>
+```
+
+```vue [PromptInputTabLabel.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <h3 :class="cn('mb-2 px-3 font-medium text-muted-foreground text-xs', props.class)" v-bind="props">
+    <slot />
+  </h3>
+</template>
+```
+
+```vue [PromptInputTabBody.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('space-y-1', props.class)" v-bind="props">
+    <slot />
+  </div>
+</template>
+```
+
+```vue [PromptInputTabItem.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent', props.class)" v-bind="props">
+    <slot />
+  </div>
+</template>
+```
+
+```vue [PromptInputCommand.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Command } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandProps = InstanceType<typeof Command>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <Command :class="cn(props.class)" v-bind="props">
+    <slot />
+  </Command>
+</template>
+```
+
+```vue [PromptInputCommandInput.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandInput } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandInputProps = InstanceType<typeof CommandInput>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandInputProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandInput :class="cn(props.class)" v-bind="props" />
+</template>
+```
+
+```vue [PromptInputCommandList.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandList } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandListProps = InstanceType<typeof CommandList>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandListProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
 
-  interface Props {
-    class?: string
-  }
+<template>
+  <CommandList :class="cn(props.class)" v-bind="props" />
+</template>
+```
 
-  const props = defineProps<Props>()
-  const attrs = useAttrs()
+```vue [PromptInputCommandEmpty.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandEmpty } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
 
-  const classes = computed(() => [
-    'w-full divide-y overflow-hidden rounded-xl border bg-background shadow-sm',
-    props.class,
-  ])
-  </script>
+type PromptInputCommandEmptyProps = InstanceType<typeof CommandEmpty>['$props']
 
-  <template>
-    <form :class="classes" v-bind="attrs">
-      <slot />
-    </form>
-  </template>
-  ```
+interface Props extends /* @vue-ignore */ PromptInputCommandEmptyProps {
+  class?: HTMLAttributes['class']
+}
 
-  ```vue [PromptInputTextarea.vue]
-  <script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-  import { Textarea } from '@/components/ui/textarea'
+const props = defineProps<Props>()
+</script>
 
-  interface Props {
-    class?: string
-    placeholder?: string
-  }
+<template>
+  <CommandEmpty :class="cn(props.class)" v-bind="props">
+    <slot />
+  </CommandEmpty>
+</template>
+```
 
-  const props = defineProps<Props>()
-  const attrs = useAttrs()
-
-  const placeholder = props.placeholder ?? 'What would you like to know?'
-
-  const classes = computed(() => [
-    'w-full resize-none rounded-none border-none p-3 shadow-none outline-none ring-0',
-    'field-sizing-content max-h-[6lh] bg-transparent dark:bg-transparent',
-    'focus-visible:ring-0',
-    props.class,
-  ])
-
-  function handleKeyDown(e: KeyboardEvent) {
-    if (e.key === 'Enter') {
-      if ((e as any).nativeEvent?.isComposing)
-        return
-      if (e.shiftKey)
-        return
-      e.preventDefault()
-      const form = (e.target as HTMLTextAreaElement).form
-      form?.requestSubmit()
-    }
-  }
-  </script>
-
-  <template>
-    <Textarea
-      :class="classes"
-      name="message"
-      :placeholder="placeholder"
-      v-bind="attrs"
-      @keydown="handleKeyDown"
-    />
-  </template>
-  ```
+```vue [PromptInputCommandGroup.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandGroup } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
 
-  ```vue [PromptInputToolbar.vue]
-  <script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
+type PromptInputCommandGroupProps = InstanceType<typeof CommandGroup>['$props']
 
-  interface Props {
-    class?: string
-  }
+interface Props extends /* @vue-ignore */ PromptInputCommandGroupProps {
+  class?: HTMLAttributes['class']
+}
 
-  const props = defineProps<Props>()
-  const attrs = useAttrs()
+const props = defineProps<Props>()
+</script>
 
-  const classes = computed(() => ['flex items-center justify-between p-1', props.class])
-  </script>
+<template>
+  <CommandGroup :class="cn(props.class)" v-bind="props">
+    <slot />
+  </CommandGroup>
+</template>
+```
 
-  <template>
-    <div :class="classes" v-bind="attrs">
-      <slot />
-    </div>
-  </template>
-  ```
+```vue [PromptInputCommandItem.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandItem } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandItemProps = InstanceType<typeof CommandItem>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandItemProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandItem v-bind="props" :class="cn(props.class)">
+    <slot />
+  </CommandItem>
+</template>
+```
+
+```vue [PromptInputCommandSeparator.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandSeparator } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+type PromptInputCommandSeparatorProps = InstanceType<typeof CommandSeparator>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputCommandSeparatorProps {
+  class?: HTMLAttributes['class']
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandSeparator :class="cn(props.class)" v-bind="props" />
+</template>
+```
 
-  ```vue [PromptInputTools.vue]
-  <script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
+```ts [context.ts] height=300 collapse
+import type { AttachmentFile, PromptInputContext } from './types'
+import { nanoid } from 'nanoid'
+import { inject, onBeforeUnmount, provide, ref } from 'vue'
+import { PROMPT_INPUT_KEY } from './types'
+
+export function usePromptInputProvider(props: {
+  initialInput?: string
+  maxFiles?: number
+  maxFileSize?: number
+  accept?: string
+  onSubmit?: (message: { text: string, files: any[] }) => void | Promise<void>
+  onError?: (err: { code: string, message: string }) => void
+}) {
+  const textInput = ref(props.initialInput || '')
+  const files = ref<AttachmentFile[]>([])
+  const fileInputRef = ref<HTMLInputElement | null>(null)
+  const isLoading = ref(false)
+
+  // Cleanup object URLs to avoid memory leaks
+  onBeforeUnmount(() => {
+    files.value.forEach((f) => {
+      if (f.url && f.url.startsWith('blob:')) {
+        URL.revokeObjectURL(f.url)
+      }
+    })
+  })
 
-  interface Props {
-    class?: string
+  const setTextInput = (val: string) => {
+    textInput.value = val
   }
 
-  const props = defineProps<Props>()
-  const attrs = useAttrs()
+  const matchesAccept = (file: File) => {
+    if (!props.accept || props.accept.trim() === '')
+      return true
+    if (props.accept.includes('image/*'))
+      return file.type.startsWith('image/')
+    // Add more mime-type checks here if necessary
+    return true
+  }
 
-  const classes = computed(() => [
-    'flex items-center gap-1',
-    '[&_button:first-child]:rounded-bl-xl',
-    props.class,
-  ])
-  </script>
+  const addFiles = (incoming: File[] | FileList) => {
+    const fileList = Array.from(incoming)
 
-  <template>
-    <div :class="classes" v-bind="attrs">
-      <slot />
-    </div>
-  </template>
-  ```
+    // Validate Accept
+    const accepted = fileList.filter(matchesAccept)
+    if (fileList.length && accepted.length === 0) {
+      props.onError?.({ code: 'accept', message: 'No files match the accepted types.' })
+      return
+    }
+
+    // Validate Size
+    const withinSize = (f: File) => (props.maxFileSize ? f.size <= props.maxFileSize : true)
+    const sized = accepted.filter(withinSize)
+    if (accepted.length > 0 && sized.length === 0) {
+      props.onError?.({ code: 'max_file_size', message: 'All files exceed the maximum size.' })
+      return
+    }
 
-  ```vue [PromptInputButton.vue]
-  <script setup lang="ts">
-  import { computed, useAttrs, useSlots } from 'vue'
-  import { Button } from '@/components/ui/button'
+    // Validate Count
+    const currentCount = files.value.length
+    const capacity = props.maxFiles ? Math.max(0, props.maxFiles - currentCount) : undefined
+    const capped = typeof capacity === 'number' ? sized.slice(0, capacity) : sized
 
-  interface Props {
-    class?: string
-    variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'
-    size?: 'default' | 'sm' | 'lg' | 'icon'
+    if (typeof capacity === 'number' && sized.length > capacity) {
+      props.onError?.({ code: 'max_files', message: 'Too many files. Some were not added.' })
+    }
+
+    const newAttachments: AttachmentFile[] = capped.map(file => ({
+      id: nanoid(),
+      type: 'file',
+      url: URL.createObjectURL(file),
+      mediaType: file.type,
+      filename: file.name,
+      file,
+    }))
+
+    files.value = [...files.value, ...newAttachments]
   }
 
-  const props = withDefaults(defineProps<Props>(), {
-    variant: 'ghost',
-  })
+  const removeFile = (id: string) => {
+    const file = files.value.find(f => f.id === id)
+    if (file?.url && file.url.startsWith('blob:')) {
+      URL.revokeObjectURL(file.url)
+    }
+    files.value = files.value.filter(f => f.id !== id)
+  }
 
-  const attrs = useAttrs()
-  const slots = useSlots()
+  const clearFiles = () => {
+    files.value.forEach((f) => {
+      if (f.url && f.url.startsWith('blob:')) {
+        URL.revokeObjectURL(f.url)
+      }
+    })
+    files.value = []
+  }
 
-  const computedSize = computed(() => {
-    if (props.size)
-      return props.size
-    const count = slots.default?.().length ?? 0
-    return count > 1 ? 'default' : 'icon'
-  })
+  const clearInput = () => {
+    textInput.value = ''
+  }
 
-  const classes = computed(() => [
-    'shrink-0 gap-1.5 rounded-lg',
-    props.variant === 'ghost' && 'text-muted-foreground',
-    computedSize.value === 'default' && 'px-3',
-    props.class,
-  ])
-  </script>
-
-  <template>
-    <Button
-      :class="classes"
-      :size="computedSize"
-      :variant="props.variant"
-      type="button"
-      v-bind="attrs"
-    >
-      <slot />
-    </Button>
-  </template>
-  ```
+  const openFileDialog = () => {
+    fileInputRef.value?.click()
+  }
 
-  ```vue [PromptInputSubmit.vue]
-  <script setup lang="ts">
-  import type { ChatStatus } from 'ai'
-  import { Loader2, Send, Square, X } from 'lucide-vue-next'
-  import { computed, useAttrs } from 'vue'
-  import { Button } from '@/components/ui/button'
-
-  interface Props {
-    class?: string
-    status?: ChatStatus
-    variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'
-    size?: 'default' | 'sm' | 'lg' | 'icon'
+  const convertBlobUrlToDataUrl = async (url: string): Promise<string | null> => {
+    try {
+      const response = await fetch(url)
+      const blob = await response.blob()
+      return new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.onloadend = () => resolve(reader.result as string)
+        reader.onerror = () => resolve(null)
+        reader.readAsDataURL(blob)
+      })
+    }
+    catch {
+      return null
+    }
   }
 
-  const props = withDefaults(defineProps<Props>(), {
-    variant: 'default',
-    size: 'icon',
-  })
+  const submitForm = async () => {
+    if (!props.onSubmit)
+      return
+
+    // Process files (convert blobs to base64 if needed for AI SDK)
+    const processedFiles = await Promise.all(
+      files.value.map(async (item) => {
+        if (item.url && item.url.startsWith('blob:')) {
+          const dataUrl = await convertBlobUrlToDataUrl(item.url)
+          return { ...item, url: dataUrl ?? item.url }
+        }
+        return item
+      }),
+    )
+
+    const message = {
+      text: textInput.value,
+      files: processedFiles,
+    }
 
-  const attrs = useAttrs()
+    try {
+      isLoading.value = true
+      const result = props.onSubmit(message)
+      if (result instanceof Promise) {
+        await result
+      }
+      clearInput()
+      clearFiles()
+    }
+    catch (e) {
+      if (props.onError) {
+        const errorMessage = e instanceof Error
+          ? e.message
+          : String(e) || 'An unknown error occurred during submission.'
+        props.onError({
+          code: 'submit_error',
+          message: errorMessage,
+        })
+      }
+      console.error('Submission failed:', e)
+    }
+    finally {
+      isLoading.value = false
+    }
+  }
 
-  const classes = computed(() => ['gap-1.5 rounded-lg', props.class])
+  const context: PromptInputContext = {
+    textInput,
+    files,
+    fileInputRef,
+    isLoading,
+    setTextInput,
+    addFiles,
+    removeFile,
+    clearFiles,
+    clearInput,
+    openFileDialog,
+    submitForm,
+  }
 
-  const icon = computed(() => {
-    if (props.status === 'submitted')
-      return Loader2
-    if (props.status === 'streaming')
-      return Square
-    if (props.status === 'error')
-      return X
-    return Send
-  })
-  </script>
-
-  <template>
-    <Button :class="classes" :size="props.size" :variant="props.variant" type="submit" v-bind="attrs">
-      <slot>
-        <component :is="icon" class="size-4" />
-      </slot>
-    </Button>
-  </template>
-  ```
+  provide(PROMPT_INPUT_KEY, context)
+  return context
+}
 
-  ```ts [index.ts]
-  export { default as PromptInput } from './PromptInput.vue'
-  export { default as PromptInputButton } from './PromptInputButton.vue'
-  export { default as PromptInputModelSelect } from './PromptInputModelSelect.vue'
-  export { default as PromptInputModelSelectContent } from './PromptInputModelSelectContent.vue'
-  export { default as PromptInputModelSelectItem } from './PromptInputModelSelectItem.vue'
-  export { default as PromptInputModelSelectTrigger } from './PromptInputModelSelectTrigger.vue'
-  export { default as PromptInputModelSelectValue } from './PromptInputModelSelectValue.vue'
-  export { default as PromptInputSubmit } from './PromptInputSubmit.vue'
-  export { default as PromptInputTextarea } from './PromptInputTextarea.vue'
-  export { default as PromptInputToolbar } from './PromptInputToolbar.vue'
-  export { default as PromptInputTools } from './PromptInputTools.vue'
-  ```
-:::
+export function usePromptInput() {
+  const context = inject<PromptInputContext>(PROMPT_INPUT_KEY)
+  if (!context) {
+    throw new Error('usePromptInput must be used within a PromptInput component')
+  }
+  return context
+}
+```
 
-## Usage
+```ts [types.ts] height=300 collapse
+import type { FileUIPart } from 'ai'
+import type { Ref } from 'vue'
 
-```ts
-import {
-  PromptInput,
-  PromptInputSubmit,
-  PromptInputTextarea,
-  PromptInputToolbar,
-} from '@/components/ai-elements/prompt-input'
+export interface PromptInputMessage {
+  text: string
+  files: FileUIPart[]
+}
+
+export interface AttachmentFile extends FileUIPart {
+  id: string
+  file?: File
+}
+
+export interface PromptInputContext {
+  textInput: Ref<string>
+  files: Ref<AttachmentFile[]>
+  isLoading: Ref<boolean>
+  fileInputRef: Ref<HTMLInputElement | null>
+  setTextInput: (val: string) => void
+  addFiles: (files: File[] | FileList) => void
+  removeFile: (id: string) => void
+  clearFiles: () => void
+  clearInput: () => void
+  openFileDialog: () => void
+  submitForm: () => void
+}
+
+export const PROMPT_INPUT_KEY = Symbol('PromptInputContext')
 ```
 
-```vue
-<PromptInput @submit="() => {}" class="mt-4 relative">
-  <PromptInputTextarea @input="() => {}" :value="''" />
-  <PromptInputToolbar>
-    <PromptInputSubmit
-      class="absolute right-1 bottom-1"
-      :disabled="false"
-      status="ready"
-    />
-  </PromptInputToolbar>
-</PromptInput>
+```ts [index.ts] height=300 collapse
+export * from './context'
+export { default as PromptInput } from './PromptInput.vue'
+export { default as PromptInputActionAddAttachments } from './PromptInputActionAddAttachments.vue'
+export { default as PromptInputActionMenu } from './PromptInputActionMenu.vue'
+export { default as PromptInputActionMenuContent } from './PromptInputActionMenuContent.vue'
+export { default as PromptInputActionMenuItem } from './PromptInputActionMenuItem.vue'
+export { default as PromptInputActionMenuTrigger } from './PromptInputActionMenuTrigger.vue'
+export { default as PromptInputAttachment } from './PromptInputAttachment.vue'
+export { default as PromptInputAttachments } from './PromptInputAttachments.vue'
+export { default as PromptInputBody } from './PromptInputBody.vue'
+export { default as PromptInputButton } from './PromptInputButton.vue'
+export { default as PromptInputCommand } from './PromptInputCommand.vue'
+export { default as PromptInputCommandEmpty } from './PromptInputCommandEmpty.vue'
+export { default as PromptInputCommandGroup } from './PromptInputCommandGroup.vue'
+export { default as PromptInputCommandInput } from './PromptInputCommandInput.vue'
+export { default as PromptInputCommandItem } from './PromptInputCommandItem.vue'
+export { default as PromptInputCommandList } from './PromptInputCommandList.vue'
+export { default as PromptInputCommandSeparator } from './PromptInputCommandSeparator.vue'
+export { default as PromptInputFooter } from './PromptInputFooter.vue'
+export { default as PromptInputHeader } from './PromptInputHeader.vue'
+export { default as PromptInputHoverCard } from './PromptInputHoverCard.vue'
+export { default as PromptInputHoverCardContent } from './PromptInputHoverCardContent.vue'
+export { default as PromptInputHoverCardTrigger } from './PromptInputHoverCardTrigger.vue'
+export { default as PromptInputProvider } from './PromptInputProvider.vue'
+export { default as PromptInputSelect } from './PromptInputSelect.vue'
+export { default as PromptInputSelectContent } from './PromptInputSelectContent.vue'
+export { default as PromptInputSelectItem } from './PromptInputSelectItem.vue'
+export { default as PromptInputSelectTrigger } from './PromptInputSelectTrigger.vue'
+export { default as PromptInputSelectValue } from './PromptInputSelectValue.vue'
+export { default as PromptInputSpeechButton } from './PromptInputSpeechButton.vue'
+export { default as PromptInputSubmit } from './PromptInputSubmit.vue'
+export { default as PromptInputTab } from './PromptInputTab.vue'
+export { default as PromptInputTabBody } from './PromptInputTabBody.vue'
+export { default as PromptInputTabItem } from './PromptInputTabItem.vue'
+export { default as PromptInputTabLabel } from './PromptInputTabLabel.vue'
+export { default as PromptInputTabsList } from './PromptInputTabsList.vue'
+export { default as PromptInputTextarea } from './PromptInputTextarea.vue'
+export { default as PromptInputTools } from './PromptInputTools.vue'
+export * from './types'
 ```
+:::
 
 ## Usage with AI SDK
 
@@ -280,31 +1475,40 @@ Built a fully functional chat app using `PromptInput`, [`Conversation`](/compone
 
 Add the following component to your frontend:
 
-```vue [pages/index.vue]
+```vue [pages/index.vue] height=300 collapse
 <script setup lang="ts">
+import type { PromptInputMessage } from '@/components/ai-elements/prompt-input'
 import { useChat } from '@ai-sdk/vue'
-import { Globe, Mic } from 'lucide-vue-next'
+import { GlobeIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
 import {
   Conversation,
   ConversationContent,
   ConversationScrollButton,
 } from '@/components/ai-elements/conversation'
-import { Message, MessageContent } from '@/components/ai-elements/message'
+import { Message, MessageContent, MessageResponse } from '@/components/ai-elements/message'
 import {
   PromptInput,
+  PromptInputActionAddAttachments,
+  PromptInputActionMenu,
+  PromptInputActionMenuContent,
+  PromptInputActionMenuTrigger,
+  PromptInputAttachment,
+  PromptInputAttachments,
+  PromptInputBody,
   PromptInputButton,
-  PromptInputModelSelect,
-  PromptInputModelSelectContent,
-  PromptInputModelSelectItem,
-  PromptInputModelSelectTrigger,
-  PromptInputModelSelectValue,
+  PromptInputFooter,
+  PromptInputHeader,
+  PromptInputSelect,
+  PromptInputSelectContent,
+  PromptInputSelectItem,
+  PromptInputSelectTrigger,
+  PromptInputSelectValue,
+  PromptInputSpeechButton,
   PromptInputSubmit,
   PromptInputTextarea,
-  PromptInputToolbar,
-  PromptInputTools,
+  PromptInputTools
 } from '@/components/ai-elements/prompt-input'
-import { Response } from '@/components/ai-elements/response'
 
 const models = [
   { id: 'gpt-4o', name: 'GPT-4o' },
@@ -313,16 +1517,32 @@ const models = [
 
 const text = ref<string>('')
 const model = ref<string>(models[0].id)
+const useWebSearch = ref<boolean>(false)
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
 const { messages, status, sendMessage } = useChat()
 
-function handleSubmit(e: Event) {
-  e.preventDefault()
-  if (!text.value)
+function handleSubmit(message: PromptInputMessage) {
+  const hasText = Boolean(message.text)
+  const hasAttachments = Boolean(message.files?.length)
+
+  if (!(hasText || hasAttachments)) {
     return
+  }
+
   sendMessage(
-    { text: text.value },
-    { body: { model: model.value } },
+    {
+      text: message.text || 'Sent with attachments',
+      files: message.files
+    },
+    {
+      body: {
+        model: model.value,
+        webSearch: useWebSearch.value,
+      },
+    },
   )
+
   text.value = ''
 }
 </script>
@@ -332,51 +1552,88 @@ function handleSubmit(e: Event) {
     <div class="flex flex-col h-full">
       <Conversation>
         <ConversationContent>
-          <Message v-for="m in messages" :key="m.id" :from="m.role">
+          <Message
+            v-for="message in messages"
+            :key="message.id"
+            :from="message.role"
+          >
             <MessageContent>
-              <Response v-for="(p, i) in m.parts" :key="i">
-                {{ p.type === 'text' ? p.text : '' }}
-              </Response>
+              <template v-for="(part, i) in message.parts" :key="`${message.id}-${i}`">
+                <MessageResponse v-if="part.type === 'text'">
+                  {{ part.text }}
+                </MessageResponse>
+              </template>
             </MessageContent>
           </Message>
         </ConversationContent>
         <ConversationScrollButton />
       </Conversation>
 
-      <PromptInput class="mt-4" @submit="handleSubmit">
-        <PromptInputTextarea
-          :value="text"
-          @input="(e: any) => (text = e?.target?.value ?? '')"
-        />
-        <PromptInputToolbar>
+      <PromptInput
+        class="mt-4"
+        global-drop
+        multiple
+        @submit="handleSubmit"
+      >
+        <PromptInputHeader>
+          <PromptInputAttachments>
+            <template #default="{ attachment }">
+              <PromptInputAttachment :data="attachment" />
+            </template>
+          </PromptInputAttachments>
+        </PromptInputHeader>
+
+        <PromptInputBody>
+          <PromptInputTextarea
+            ref="textareaRef"
+            :model-value="text"
+            @update:model-value="text = $event"
+          />
+        </PromptInputBody>
+
+        <PromptInputFooter>
           <PromptInputTools>
-            <PromptInputButton>
-              <Mic class="size-4" />
-            </PromptInputButton>
-            <PromptInputButton>
-              <Globe class="size-4" />
+            <PromptInputActionMenu>
+              <PromptInputActionMenuTrigger />
+              <PromptInputActionMenuContent>
+                <PromptInputActionAddAttachments />
+              </PromptInputActionMenuContent>
+            </PromptInputActionMenu>
+
+            <PromptInputSpeechButton
+              :textarea-ref="textareaRef?.$el || null"
+              @transcription-change="text = $event"
+            />
+
+            <PromptInputButton
+              :variant="useWebSearch ? 'default' : 'ghost'"
+              @click="useWebSearch = !useWebSearch"
+            >
+              <GlobeIcon :size="16" />
               <span>Search</span>
             </PromptInputButton>
-            <PromptInputModelSelect
-              :value="model"
-              @update:value="(v: string) => (model = v)"
-            >
-              <PromptInputModelSelectTrigger>
-                <PromptInputModelSelectValue />
-              </PromptInputModelSelectTrigger>
-              <PromptInputModelSelectContent>
-                <PromptInputModelSelectItem
+
+            <PromptInputSelect v-model="model">
+              <PromptInputSelectTrigger>
+                <PromptInputSelectValue />
+              </PromptInputSelectTrigger>
+              <PromptInputSelectContent>
+                <PromptInputSelectItem
                   v-for="m in models"
                   :key="m.id"
                   :value="m.id"
                 >
                   {{ m.name }}
-                </PromptInputModelSelectItem>
-              </PromptInputModelSelectContent>
-            </PromptInputModelSelect>
+                </PromptInputSelectItem>
+              </PromptInputSelectContent>
+            </PromptInputSelect>
           </PromptInputTools>
-          <PromptInputSubmit :disabled="!text" :status="status" />
-        </PromptInputToolbar>
+
+          <PromptInputSubmit
+            :disabled="!text && !status"
+            :status="status"
+          />
+        </PromptInputFooter>
       </PromptInput>
     </div>
   </div>
@@ -385,71 +1642,105 @@ function handleSubmit(e: Event) {
 
 Add the following route to your backend:
 
-```ts [app/api/chat/route.ts]
+```ts [server/api/chat/route.ts] height=300 collapse
 import { convertToModelMessages, streamText, UIMessage } from 'ai'
 
 // Allow streaming responses up to 30 seconds
 export const maxDuration = 30
 
-export async function POST(req: Request) {
-  const { model, messages }: { messages: UIMessage[], model: string }
-    = await req.json()
+export default defineEventHandler(async (event) => {
+  const {
+    model,
+    messages,
+    webSearch
+  }: {
+    messages: UIMessage[]
+    model: string
+    webSearch?: boolean
+  } = await readBody(event)
 
   const result = streamText({
-    model,
+    model: webSearch ? 'perplexity/sonar' : model,
     messages: convertToModelMessages(messages),
   })
 
   return result.toUIMessageStreamResponse()
-}
+})
 ```
 
 ## Features
 
 - Auto-resizing textarea that adjusts height based on content
+- File attachment support with drag-and-drop
+- Image preview for image attachments
+- Configurable file constraints (max files, max size, accepted types)
 - Automatic submit button icons based on status
-- Support for keyboard shortcuts (Cmd/Ctrl + Enter to submit)
+- Support for keyboard shortcuts (Enter to submit, Shift+Enter for new line)
 - Customizable min/max height for the textarea
 - Flexible toolbar with support for custom actions and tools
 - Built-in model selection dropdown
+- Built-in native speech recognition button (Web Speech API)
+- Optional provider for lifted state management
+- Form automatically resets on submit
 - Responsive design with mobile-friendly controls
 - Clean, modern styling with customizable themes
 - Form-based submission handling
+- Hidden file input sync for native form posts
+- Global document drop support (opt-in)
+
+## Examples
+
+### Cursor Style
+
+:::ComponentLoader{label="Preview" componentName="PromptInputCursor"}
+:::
 
 ## Props
 
-### `<PromptInput />`
+### `<PromptInputProvider />`
 
 :::field-group
-  ::field{name="class" type="string"}
-  Additional classes applied to the root form.
+  ::field{name="initialInput" type="string"}
+  Initial text input value.
   ::
 :::
 
-### `<PromptInputTextarea />`
+### `<PromptInput />`
 
 :::field-group
-  ::field{name="placeholder" type="string" defaultValue="'What would you like to know?'"}
-  Placeholder text for the textarea.
+  ::field{name="accept" type="string" optional}
+  File types to accept (e.g., "image/*"). Leave undefined for any.
+  ::
+  ::field{name="multiple" type="boolean"}
+  Whether to allow multiple file selection.
+  ::
+  ::field{name="globalDrop" type="boolean"}
+  When true, accepts file drops anywhere on the document.
   ::
-  ::field{name="class" type="string"}
-  Additional classes applied to the underlying textarea.
+  ::field{name="maxFiles" type="number"}
+  Maximum number of files allowed.
+  ::
+  ::field{name="maxFileSize" type="number"}
+  Maximum size of files in bytes.
+  ::
+   ::field{name="...props" type="HTMLAttributes"}
+  Additional props are spread to the root form element.
   ::
 :::
 
-### `<PromptInputToolbar />`
+### `<PromptInputTextarea />`
 
 :::field-group
-  ::field{name="class" type="string"}
-  Additional classes applied to the toolbar.
+  ::field{name="...props" type="InstanceType<typeof InputGroupTextarea>" optional}
+  Any other props are spread to the underlying Textarea component.
   ::
 :::
 
 ### `<PromptInputTools />`
 
 :::field-group
-  ::field{name="class" type="string"}
-  Additional classes applied to the tools container.
+  ::field{name="...props" type="HTMLAttributes"}
+  Additional props are spread to the underlying div.
   ::
 :::
 
@@ -462,8 +1753,8 @@ export async function POST(req: Request) {
   ::field{name="size" type="'default' | 'sm' | 'lg' | 'icon'" defaultValue="auto"}
   Button size. Defaults to 'icon' when a single child is provided, otherwise 'default'.
   ::
-  ::field{name="class" type="string"}
-  Additional classes applied to the button.
+  ::field{name="...props" type="InstanceType<typeof InputGroupButton>"}
+  Additional props are spread to the underlying InputGroupButton component.
   ::
 :::
 
@@ -479,46 +1770,270 @@ export async function POST(req: Request) {
   ::field{name="size" type="'default' | 'sm' | 'lg' | 'icon'" defaultValue="'icon'"}
   Size of the submit button.
   ::
-  ::field{name="class" type="string"}
-  Additional classes applied to the submit button.
+  ::field{name="...props" type="InstanceType<typeof InputGroupButton>"}
+  Additional props are spread to the underlying InputGroupButton component.
+  ::
+:::
+
+### `<PromptInputBody />`
+
+:::field-group
+  ::field{name="...props" type="HTMLAttributes"}
+  Any other props are spread to the underlying body div.
+  ::
+:::
+
+### `<PromptInputAttachments />`
+
+:::field-group
+  ::field{name="...props" type="HTMLAttributes"}
+  Any other props are spread to the underlying attachments container.
+  ::
+:::
+
+### `<PromptInputAttachment />`
+
+:::field-group
+  ::field{name="file" type="AttachmentFile"}
+  The attachment data to display.
+  ::
+  ::field{name="...props" type="HTMLAttributes"}
+  Any other props are spread to the underlying attachment div.
+  ::
+:::
+
+### `<PromptInputHeader />`
+
+:::field-group
+  ::field{name="...props" type=" InstanceType<typeof InputGroupAddon>"}
+  Any other props (except align) are spread to the underlying InputGroupAddon component.
+  ::
+:::
+
+### `<PromptInputFooter />`
+
+:::field-group
+  ::field{name="...props" type=" InstanceType<typeof InputGroupAddon>"}
+  Any other props (except align) are spread to the underlying InputGroupAddon component.
+  ::
+:::
+
+### `<PromptInputActionMenu />`
+
+:::field-group
+  ::field{name="...props" type=" InstanceType<typeof DropdownMenu>"}
+  Any other props are spread to the underlying DropdownMenu component.
+  ::
+:::
+
+### `<PromptInputActionMenuTrigger />`
+
+:::field-group
+  ::field{name="...props" type=" InstanceType<typeof DropdownMenuTrigger>"}
+  Any other props are spread to the underlying  DropdownMenuTrigger component.
+  ::
+:::
+
+### `<PromptInputActionMenuContent />`
+
+:::field-group
+  ::field{name="...props" type=" InstanceType<typeof DropdownMenuContent>"}
+  Any other props are spread to the underlying  DropdownMenuContent component.
+  ::
+:::
+
+### `<PromptInputActionMenuItem />`
+
+:::field-group
+  ::field{name="...props" type=" InstanceType<typeof DropdownMenuItem>"}
+  Any other props are spread to the underlying  DropdownMenuItem component.
+  ::
+:::
+
+### `<PromptInputActionAddAttachments />`
+
+:::field-group
+  ::field{name="label" type="string" optional}
+  Label for the menu item.
+  ::
+  ::field{name="...props" type=" InstanceType<typeof DropdownMenuItem>"}
+  Any other props are spread to the underlying DropdownMenuItem component.
+  ::
+:::
+
+### `<PromptInputSpeechButton />`
+
+:::field-group
+  ::field{name="...props" type=" InstanceType<typeof PromptInputButton >"}
+  Any other props are spread to the underlying PromptInputButton component.
+  ::
+:::
+
+### `<PromptInputSelect />`
+
+:::field-group
+  ::field{name="...props" type=" InstanceType<typeof Select>"}
+  Any other props are spread to the underlying  Select component.
+  ::
+:::
+
+### `<PromptInputSelectTrigger />`
+
+:::field-group
+  ::field{name="...props" type="InstanceType<typeof SelectTrigger>"}
+  Any other props are spread to the underlying SelectTrigger component.
+  ::
+:::
+
+### `<PromptInputSelectContent />`
+
+:::field-group
+  ::field{name="...props" type="InstanceType<typeof SelectContent>"}
+  Any other props are spread to the underlying SelectContent component.
+  ::
+:::
+
+### `<PromptInputSelectItem />`
+
+:::field-group
+  ::field{name="...props" type="InstanceType<typeof SelectItem>"}
+  Any other props are spread to the underlying SelectItem component.
+  ::
+:::
+
+### `<PromptInputSelectValue />`
+
+:::field-group
+  ::field{name="...props" type="InstanceType<typeof SelectValue>"}
+  Any other props are spread to the underlying SelectValue component.
+  ::
+:::
+
+### `<PromptInputHoverCard />`
+
+:::field-group
+  ::field{name="openDelay" type="number" defaultValue="0"}
+  Delay in milliseconds before opening.
+  ::
+  ::field{name="closeDelay" type="number" defaultValue="0"}
+  Delay in milliseconds before closing.
+  ::
+  ::field{name="...props" type="InstanceType<typeof HoverCard>"}
+  Any other props are spread to the HoverCard component.
+  ::
+:::
+
+### `<PromptInputHoverCardTrigger />`
+
+:::field-group
+  ::field{name="...props" type="InstanceType<typeof HoverCardTrigger>"}
+  Any other props are spread to the HoverCardTrigger component.
+  ::
+:::
+
+### `<PromptInputHoverCardContent />`
+
+:::field-group
+  ::field{name="align" type="'start' | 'center' | 'end'" defaultValue="'start'"}
+  Alignment of the hover card content.
+  ::
+  ::field{name="...props" type="InstanceType<typeof HoverCardContent>"}
+  Any other props are spread to the HoverCardContent component.
+  ::
+:::
+
+### `<PromptInputTabsList />`
+
+:::field-group
+  ::field{name="...props" type="HTMLAttributes"}
+  Any other props are spread to the div element.
   ::
 :::
 
-### `<PromptInputModelSelect />`
+### `<PromptInputTab />`
 
-Pass-through wrapper for the shadcn Select component. No component props are defined; all attributes and v-model bindings are forwarded to the underlying Select.
+:::field-group
+  ::field{name="...props" type="HTMLAttributes"}
+  Any other props are spread to the div element.
+  ::
+:::
+
+### `<PromptInputTabLabel />`
+
+:::field-group
+  ::field{name="...props" type="HTMLAttributes"}
+  Any other props are spread to the h3 element.
+  ::
+:::
+
+### `<PromptInputTabBody />`
+
+:::field-group
+  ::field{name="...props" type="HTMLAttributes"}
+  Any other props are spread to the div element.
+  ::
+:::
+
+### `<PromptInputTabItem />`
+
+:::field-group
+  ::field{name="...props" type="HTMLAttributes"}
+  Any other props are spread to the div element.
+  ::
+:::
+
+### `<PromptInputCommand />`
+
+:::field-group
+  ::field{name="...props" type="InstanceType<typeof Command>" optional}
+  Any other props are spread to the Command component.
+  ::
+:::
+
+### `<PromptInputCommandInput />`
 
-### `<PromptInputModelSelectTrigger />`
+:::field-group
+  ::field{name="...props" type="InstanceType<typeof CommandInput"> optional}
+  Any other props are spread to the CommandInput component.
+  ::
+:::
+
+### `<PromptInputCommandList />`
 
 :::field-group
-  ::field{name="class" type="string"}
-  Additional classes applied to the trigger.
+  ::field{name="...props" type="InstanceType<typeof CommandList>" optional}
+  Any other props are spread to the CommandList component.
   ::
 :::
 
-### `<PromptInputModelSelectContent />`
+### `<PromptInputCommandEmpty />`
 
 :::field-group
-  ::field{name="class" type="string"}
-  Additional classes applied to the content panel.
+  ::field{name="...props" type="InstanceType<typeof CommandEmpty>" optional}
+  Any other props are spread to the CommandEmpty component.
   ::
 :::
 
-### `<PromptInputModelSelectValue />`
+### `<PromptInputCommandGroup />`
 
 :::field-group
-  ::field{name="class" type="string"}
-  Additional classes applied to the value display.
+  ::field{name="...props" type="InstanceType<typeof CommandGroup>" optional}
+  Any other props are spread to the CommandGroup component.
   ::
 :::
 
-### `<PromptInputModelSelectItem />`
+### `<PromptInputCommandItem />`
 
 :::field-group
-  ::field{name="value" type="string | number" required}
-  Item value.
+  ::field{name="...props" type="InstanceType<typeof CommandItem>" optional}
+  Any other props are spread to the CommandItem component.
   ::
-  ::field{name="class" type="string"}
-  Additional classes applied to the item.
+:::
+
+### `<PromptInputCommandSeparator />`
+
+:::field-group
+  ::field{name="...props" type="InstanceType<typeof CommandSeparator>" optional}
+  Any other props are spread to the CommandSeparator component.
   ::
 :::
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index ae553b0..06cc2e7 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -20,6 +20,7 @@ import {
   OpenInChat,
   Plan,
   PromptInput,
+  PromptInputCursor,
   Queue,
   QueueCustom,
   QueuePromptInput,
@@ -90,4 +91,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('ConfirmationRequest', ConfirmationRequest)
   vueApp.component('Reasoning', Reasoning)
   vueApp.component('WebPreview', WebPreview)
+  vueApp.component('PromptInputCursor', PromptInputCursor)
 })
diff --git a/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue b/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue
index 34e91aa..9ab534a 100644
--- a/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue
+++ b/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue
@@ -3,7 +3,13 @@ import { DropdownMenuItem } from '@repo/shadcn-vue/components/ui/dropdown-menu'
 import { ImageIcon } from 'lucide-vue-next'
 import { usePromptInput } from './context'
 
-defineProps<{ label?: string }>()
+type PromptInputActionAddAttachmentsProps = InstanceType<typeof DropdownMenuItem>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputActionAddAttachmentsProps {
+  label?: string
+}
+
+const props = defineProps<Props>()
 
 const { openFileDialog } = usePromptInput()
 </script>
@@ -11,6 +17,6 @@ const { openFileDialog } = usePromptInput()
 <template>
   <DropdownMenuItem @select.prevent="openFileDialog">
     <ImageIcon class="mr-2 size-4" />
-    {{ label || 'Add photos or files' }}
+    {{ props.label || 'Add photos or files' }}
   </DropdownMenuItem>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputActionMenuItem.vue b/packages/elements/src/prompt-input/PromptInputActionMenuItem.vue
index 25119d7..b4cbf60 100644
--- a/packages/elements/src/prompt-input/PromptInputActionMenuItem.vue
+++ b/packages/elements/src/prompt-input/PromptInputActionMenuItem.vue
@@ -3,7 +3,13 @@ import type { HTMLAttributes } from 'vue'
 import { DropdownMenuItem } from '@repo/shadcn-vue/components/ui/dropdown-menu'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+type PromptInputActionMenuItemProps = InstanceType<typeof DropdownMenuItem>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputActionMenuItemProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
 </script>
 
 <template>
diff --git a/packages/elements/src/prompt-input/PromptInputCommandList.vue b/packages/elements/src/prompt-input/PromptInputCommandList.vue
index b6987e9..35def93 100644
--- a/packages/elements/src/prompt-input/PromptInputCommandList.vue
+++ b/packages/elements/src/prompt-input/PromptInputCommandList.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { CommandInput } from '@repo/shadcn-vue/components/ui/command'
+import { CommandList } from '@repo/shadcn-vue/components/ui/command'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 
-type PromptInputCommandListProps = InstanceType<typeof CommandInput>['$props']
+type PromptInputCommandListProps = InstanceType<typeof CommandList>['$props']
 
 interface Props extends /* @vue-ignore */ PromptInputCommandListProps {
   class?: HTMLAttributes['class']
@@ -13,5 +13,5 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-  <CommandInput :class="cn(props.class)" v-bind="props" />
+  <CommandList :class="cn(props.class)" v-bind="props" />
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputHoverCard.vue b/packages/elements/src/prompt-input/PromptInputHoverCard.vue
index a4858f8..bfe6a19 100644
--- a/packages/elements/src/prompt-input/PromptInputHoverCard.vue
+++ b/packages/elements/src/prompt-input/PromptInputHoverCard.vue
@@ -3,16 +3,21 @@ import { HoverCard } from '@repo/shadcn-vue/components/ui/hover-card'
 
 type PromptInputHoverCardProps = InstanceType<typeof HoverCard>['$props']
 
-interface Props extends /* @vue-ignore */ PromptInputHoverCardProps {}
+interface Props extends /* @vue-ignore */ PromptInputHoverCardProps {
+  openDelay?: number
+  closeDelay?: number
+}
 
 const props = withDefaults(defineProps<Props>(), {
   openDelay: 0,
   closeDelay: 0,
 })
+
+const { openDelay, closeDelay, ...restProps } = props
 </script>
 
 <template>
-  <HoverCard v-bind="props">
+  <HoverCard :open-delay="openDelay" :close-delay="closeDelay" v-bind="restProps">
     <slot />
   </HoverCard>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputHoverCardContent.vue b/packages/elements/src/prompt-input/PromptInputHoverCardContent.vue
index 2eeb2de..d2aced0 100644
--- a/packages/elements/src/prompt-input/PromptInputHoverCardContent.vue
+++ b/packages/elements/src/prompt-input/PromptInputHoverCardContent.vue
@@ -8,10 +8,12 @@ interface Props extends /* @vue-ignore */ PromptInputHoverCardContentProps {}
 const props = withDefaults(defineProps<Props>(), {
   align: 'start',
 })
+
+const { align, ...restProps } = props
 </script>
 
 <template>
-  <HoverCardContent v-bind="props">
+  <HoverCardContent :align="props.align" v-bind="restProps">
     <slot />
   </HoverCardContent>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputSpeechButton.vue b/packages/elements/src/prompt-input/PromptInputSpeechButton.vue
index fcd236e..bbd4140 100644
--- a/packages/elements/src/prompt-input/PromptInputSpeechButton.vue
+++ b/packages/elements/src/prompt-input/PromptInputSpeechButton.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { InputGroupButton } from '@repo/shadcn-vue/components/ui/input-group'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { MicIcon } from 'lucide-vue-next'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { usePromptInput } from './context'
+import PromptInputButton from './PromptInputButton.vue'
 
 interface SpeechRecognition extends EventTarget {
   continuous: boolean
@@ -13,11 +14,55 @@ interface SpeechRecognition extends EventTarget {
   stop: () => void
   onstart: ((this: SpeechRecognition, ev: Event) => any) | null
   onend: ((this: SpeechRecognition, ev: Event) => any) | null
-  onresult: ((this: SpeechRecognition, ev: any) => any) | null
-  onerror: ((this: SpeechRecognition, ev: any) => any) | null
+  onresult: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any) | null
+  onerror: ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => any) | null
 }
 
-const props = defineProps<{ class?: string }>()
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList
+  resultIndex: number
+}
+
+interface SpeechRecognitionResultList {
+  readonly length: number
+  item: (index: number) => SpeechRecognitionResult
+  [index: number]: SpeechRecognitionResult
+}
+
+interface SpeechRecognitionResult {
+  readonly length: number
+  item: (index: number) => SpeechRecognitionAlternative
+  [index: number]: SpeechRecognitionAlternative
+  isFinal: boolean
+}
+
+interface SpeechRecognitionAlternative {
+  transcript: string
+  confidence: number
+}
+
+interface SpeechRecognitionErrorEvent extends Event {
+  error: string
+}
+
+declare global {
+  interface Window {
+    SpeechRecognition: {
+      new (): SpeechRecognition
+    }
+    webkitSpeechRecognition: {
+      new (): SpeechRecognition
+    }
+  }
+}
+
+type PromptInputSpeechButtonProps = InstanceType<typeof PromptInputButton>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputSpeechButtonProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
 
 const { textInput, setTextInput } = usePromptInput()
 const isListening = ref(false)
@@ -77,18 +122,16 @@ function toggleListening() {
 </script>
 
 <template>
-  <InputGroupButton
-    type="button"
-    variant="ghost"
-    size="icon-sm"
+  <PromptInputButton
     :disabled="!recognition"
     :class="cn(
       'relative transition-all duration-200',
       isListening && 'animate-pulse bg-accent text-accent-foreground',
       props.class,
     )"
+    v-bind="props"
     @click="toggleListening"
   >
     <MicIcon class="size-4" />
-  </InputGroupButton>
+  </PromptInputButton>
 </template>
diff --git a/packages/elements/src/prompt-input/PromptInputTextarea.vue b/packages/elements/src/prompt-input/PromptInputTextarea.vue
index b047746..c7c4a16 100644
--- a/packages/elements/src/prompt-input/PromptInputTextarea.vue
+++ b/packages/elements/src/prompt-input/PromptInputTextarea.vue
@@ -9,12 +9,9 @@ type PromptInputTextareaProps = InstanceType<typeof InputGroupTextarea>['$props'
 
 interface Props extends /* @vue-ignore */ PromptInputTextareaProps {
   class?: HTMLAttributes['class']
-  placeholder?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: 'What would you like to know?',
-})
+const props = defineProps<Props>()
 
 const { textInput, setTextInput, submitForm, addFiles, files, removeFile } = usePromptInput()
 const isComposing = ref(false)
@@ -60,17 +57,15 @@ const modelValue = computed({
   get: () => textInput.value,
   set: val => setTextInput(val),
 })
-
-const { placeholder, class: _, ...restProps } = props
 </script>
 
 <template>
   <InputGroupTextarea
     v-model="modelValue"
+    placeholder="What would you like to know?"
     name="message"
-    :placeholder="placeholder"
     :class="cn('field-sizing-content max-h-48 min-h-16', props.class)"
-    v-bind="restProps"
+    v-bind="props"
     @keydown="handleKeyDown"
     @paste="handlePaste"
     @compositionstart="isComposing = true"
diff --git a/packages/elements/src/prompt-input/context.ts b/packages/elements/src/prompt-input/context.ts
index 2d59b46..9b4917a 100644
--- a/packages/elements/src/prompt-input/context.ts
+++ b/packages/elements/src/prompt-input/context.ts
@@ -71,7 +71,7 @@ export function usePromptInputProvider(props: {
       url: URL.createObjectURL(file),
       mediaType: file.type,
       filename: file.name,
-      file, // Store original file for later use
+      file,
     }))
 
     files.value = [...files.value, ...newAttachments]
diff --git a/packages/elements/src/prompt-input/index.ts b/packages/elements/src/prompt-input/index.ts
index 6b29e75..2cf8e23 100644
--- a/packages/elements/src/prompt-input/index.ts
+++ b/packages/elements/src/prompt-input/index.ts
@@ -35,6 +35,5 @@ export { default as PromptInputTabItem } from './PromptInputTabItem.vue'
 export { default as PromptInputTabLabel } from './PromptInputTabLabel.vue'
 export { default as PromptInputTabsList } from './PromptInputTabsList.vue'
 export { default as PromptInputTextarea } from './PromptInputTextarea.vue'
-
 export { default as PromptInputTools } from './PromptInputTools.vue'
 export * from './types'
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 255c784..4d1e205 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -18,6 +18,7 @@ export { default as Message } from './message.vue'
 export { default as ModelSelector } from './model-selector.vue'
 export { default as OpenInChat } from './open-in-chat.vue'
 export { default as Plan } from './plan.vue'
+export { default as PromptInputCursor } from './prompt-input-cursor.vue'
 export { default as PromptInput } from './prompt-input.vue'
 export { default as QueueCustom } from './queue-custom.vue'
 export { default as QueuePromptInput } from './queue-prompt-input.vue'
diff --git a/packages/examples/src/prompt-input-cursor.vue b/packages/examples/src/prompt-input-cursor.vue
new file mode 100644
index 0000000..f61674a
--- /dev/null
+++ b/packages/examples/src/prompt-input-cursor.vue
@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import type { PromptInputMessage } from '@repo/elements/prompt-input'
+import {
+  ModelSelector,
+  ModelSelectorContent,
+  ModelSelectorEmpty,
+  ModelSelectorGroup,
+  ModelSelectorInput,
+  ModelSelectorItem,
+  ModelSelectorList,
+  ModelSelectorLogo,
+  ModelSelectorLogoGroup,
+  ModelSelectorName,
+  ModelSelectorTrigger,
+} from '@repo/elements/model-selector'
+import {
+  PromptInput,
+  PromptInputAttachment,
+  PromptInputAttachments,
+  PromptInputBody,
+  PromptInputButton,
+  PromptInputCommand,
+  PromptInputCommandEmpty,
+  PromptInputCommandGroup,
+  PromptInputCommandInput,
+  PromptInputCommandItem,
+  PromptInputCommandList,
+  PromptInputCommandSeparator,
+  PromptInputFooter,
+  PromptInputHeader,
+  PromptInputHoverCard,
+  PromptInputHoverCardContent,
+  PromptInputHoverCardTrigger,
+  PromptInputProvider,
+  PromptInputSubmit,
+  PromptInputTab,
+  PromptInputTabBody,
+  PromptInputTabItem,
+  PromptInputTabLabel,
+  PromptInputTextarea,
+  PromptInputTools,
+} from '@repo/elements/prompt-input'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import {
+  AtSignIcon,
+  CheckIcon,
+  FilesIcon,
+  GlobeIcon,
+  ImageIcon,
+  RulerIcon,
+} from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+
+const models = [
+  {
+    id: 'gpt-4o',
+    name: 'GPT-4o',
+    chef: 'OpenAI',
+    chefSlug: 'openai',
+    providers: ['openai', 'azure'],
+  },
+  {
+    id: 'gpt-4o-mini',
+    name: 'GPT-4o Mini',
+    chef: 'OpenAI',
+    chefSlug: 'openai',
+    providers: ['openai', 'azure'],
+  },
+  {
+    id: 'claude-opus-4-20250514',
+    name: 'Claude 4 Opus',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google', 'amazon-bedrock'],
+  },
+  {
+    id: 'claude-sonnet-4-20250514',
+    name: 'Claude 4 Sonnet',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google', 'amazon-bedrock'],
+  },
+  {
+    id: 'gemini-2.0-flash-exp',
+    name: 'Gemini 2.0 Flash',
+    chef: 'Google',
+    chefSlug: 'google',
+    providers: ['google'],
+  },
+]
+
+const SUBMITTING_TIMEOUT = 200
+const STREAMING_TIMEOUT = 2000
+
+const sampleFiles = {
+  activeTabs: [{ path: 'prompt-input.tsx', location: 'packages/elements/src' }],
+  recents: [
+    { path: 'queue.tsx', location: 'apps/test/app/examples' },
+    { path: 'queue.tsx', location: 'packages/elements/src' },
+  ],
+  added: [
+    { path: 'prompt-input.tsx', location: 'packages/elements/src' },
+    { path: 'queue.tsx', location: 'apps/test/app/examples' },
+    { path: 'queue.tsx', location: 'packages/elements/src' },
+  ],
+  filesAndFolders: [
+    { path: 'prompt-input.tsx', location: 'packages/elements/src' },
+    { path: 'queue.tsx', location: 'apps/test/app/examples' },
+  ],
+  code: [{ path: 'prompt-input.tsx', location: 'packages/elements/src' }],
+  docs: [{ path: 'README.md', location: 'packages/elements' }],
+}
+
+const sampleTabs = {
+  active: [{ path: 'packages/elements/src/task-queue-panel.tsx' }],
+  recents: [
+    { path: 'apps/test/app/examples/task-queue-panel.tsx' },
+    { path: 'apps/test/app/page.tsx' },
+    { path: 'packages/elements/src/task.tsx' },
+    { path: 'apps/test/app/examples/prompt-input.tsx' },
+    { path: 'packages/elements/src/queue.tsx' },
+    { path: 'apps/test/app/examples/queue.tsx' },
+  ],
+}
+
+const model = ref<string>(models[0].id)
+const modelSelectorOpen = ref(false)
+const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready')
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+const selectedModelData = computed(() => models.find(m => m.id === model.value))
+
+function handleSubmit(message: PromptInputMessage) {
+  const hasText = !!message.text
+  const hasAttachments = !!message.files?.length
+
+  if (!hasText && !hasAttachments) {
+    return
+  }
+
+  status.value = 'submitted'
+
+  // eslint-disable-next-line no-console
+  console.log('Submitting message:', message)
+
+  setTimeout(() => {
+    status.value = 'streaming'
+  }, SUBMITTING_TIMEOUT)
+
+  setTimeout(() => {
+    status.value = 'ready'
+  }, STREAMING_TIMEOUT)
+}
+</script>
+
+<template>
+  <div class="flex size-full flex-col justify-end">
+    <PromptInputProvider @submit="handleSubmit">
+      <PromptInput
+        global-drop
+        multiple
+      >
+        <PromptInputHeader>
+          <PromptInputHoverCard>
+            <PromptInputHoverCardTrigger>
+              <PromptInputButton
+                class="!h-8"
+                size="icon-sm"
+                variant="outline"
+              >
+                <AtSignIcon
+                  class="text-muted-foreground"
+                  :size="12"
+                />
+              </PromptInputButton>
+            </PromptInputHoverCardTrigger>
+            <PromptInputHoverCardContent class="w-[400px] p-0">
+              <PromptInputCommand>
+                <PromptInputCommandInput
+                  class="border-none focus-visible:ring-0"
+                  placeholder="Add files, folders, docs..."
+                />
+                <PromptInputCommandList>
+                  <PromptInputCommandEmpty class="p-3 text-muted-foreground text-sm">
+                    No results found.
+                  </PromptInputCommandEmpty>
+                  <PromptInputCommandGroup heading="Added">
+                    <PromptInputCommandItem value="active-tabs">
+                      <GlobeIcon />
+                      <span>Active Tabs</span>
+                      <span class="ml-auto text-muted-foreground">✓</span>
+                    </PromptInputCommandItem>
+                  </PromptInputCommandGroup>
+                  <PromptInputCommandSeparator />
+                  <PromptInputCommandGroup heading="Other Files">
+                    <PromptInputCommandItem
+                      v-for="(file, index) in sampleFiles.added"
+                      :key="`${file.path}-${index}`"
+                      :value="file.path"
+                    >
+                      <GlobeIcon class="text-primary" />
+                      <div class="flex flex-col">
+                        <span class="font-medium text-sm">
+                          {{ file.path }}
+                        </span>
+                        <span class="text-muted-foreground text-xs">
+                          {{ file.location }}
+                        </span>
+                      </div>
+                    </PromptInputCommandItem>
+                  </PromptInputCommandGroup>
+                </PromptInputCommandList>
+              </PromptInputCommand>
+            </PromptInputHoverCardContent>
+          </PromptInputHoverCard>
+          <PromptInputHoverCard>
+            <PromptInputHoverCardTrigger>
+              <PromptInputButton
+                size="sm"
+                variant="outline"
+              >
+                <RulerIcon
+                  class="text-muted-foreground"
+                  :size="12"
+                />
+                <span>1</span>
+              </PromptInputButton>
+            </PromptInputHoverCardTrigger>
+            <PromptInputHoverCardContent class="divide-y overflow-hidden p-0">
+              <div class="space-y-2 p-3">
+                <p class="font-medium text-muted-foreground text-sm">
+                  Attached Project Rules
+                </p>
+                <p class="ml-4 text-muted-foreground text-sm">
+                  Always Apply:
+                </p>
+                <p class="ml-8 text-sm">
+                  ultracite.mdc
+                </p>
+              </div>
+              <p class="bg-sidebar px-4 py-3 text-muted-foreground text-sm">
+                Click to manage
+              </p>
+            </PromptInputHoverCardContent>
+          </PromptInputHoverCard>
+          <PromptInputHoverCard>
+            <PromptInputHoverCardTrigger>
+              <PromptInputButton
+                size="sm"
+                variant="outline"
+              >
+                <FilesIcon
+                  class="text-muted-foreground"
+                  :size="12"
+                />
+                <span>1 Tab</span>
+              </PromptInputButton>
+            </PromptInputHoverCardTrigger>
+            <PromptInputHoverCardContent class="w-[300px] space-y-4 px-0 py-3">
+              <PromptInputTab>
+                <PromptInputTabLabel>Active Tabs</PromptInputTabLabel>
+                <PromptInputTabBody>
+                  <PromptInputTabItem
+                    v-for="tab in sampleTabs.active"
+                    :key="tab.path"
+                  >
+                    <GlobeIcon
+                      class="text-primary"
+                      :size="16"
+                    />
+                    <span
+                      class="truncate"
+                      dir="rtl"
+                    >
+                      {{ tab.path }}
+                    </span>
+                  </PromptInputTabItem>
+                </PromptInputTabBody>
+              </PromptInputTab>
+              <PromptInputTab>
+                <PromptInputTabLabel>Recents</PromptInputTabLabel>
+                <PromptInputTabBody>
+                  <PromptInputTabItem
+                    v-for="tab in sampleTabs.recents"
+                    :key="tab.path"
+                  >
+                    <GlobeIcon
+                      class="text-primary"
+                      :size="16"
+                    />
+                    <span
+                      class="truncate"
+                      dir="rtl"
+                    >
+                      {{ tab.path }}
+                    </span>
+                  </PromptInputTabItem>
+                </PromptInputTabBody>
+              </PromptInputTab>
+              <div class="border-t px-3 pt-2 text-muted-foreground text-xs">
+                Only file paths are included
+              </div>
+            </PromptInputHoverCardContent>
+          </PromptInputHoverCard>
+          <PromptInputAttachments>
+            <template #default="{ file }">
+              <PromptInputAttachment :file="file" />
+            </template>
+          </PromptInputAttachments>
+        </PromptInputHeader>
+        <PromptInputBody>
+          <PromptInputTextarea
+            ref="textareaRef"
+            placeholder="Plan, search, build anything"
+          />
+        </PromptInputBody>
+        <PromptInputFooter>
+          <PromptInputTools>
+            <ModelSelector v-model:open="modelSelectorOpen">
+              <ModelSelectorTrigger as-child>
+                <PromptInputButton>
+                  <ModelSelectorLogo
+                    v-if="selectedModelData?.chefSlug"
+                    :provider="selectedModelData.chefSlug"
+                  />
+                  <ModelSelectorName v-if="selectedModelData?.name">
+                    {{ selectedModelData.name }}
+                  </ModelSelectorName>
+                </PromptInputButton>
+              </ModelSelectorTrigger>
+              <ModelSelectorContent>
+                <ModelSelectorInput placeholder="Search models..." />
+                <ModelSelectorList>
+                  <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
+                  <ModelSelectorGroup
+                    v-for="chef in ['OpenAI', 'Anthropic', 'Google']"
+                    :key="chef"
+                    :heading="chef"
+                  >
+                    <ModelSelectorItem
+                      v-for="m in models.filter(item => item.chef === chef)"
+                      :key="m.id"
+                      :value="m.id"
+                      @select="() => {
+                        model = m.id;
+                        modelSelectorOpen = false;
+                      }"
+                    >
+                      <ModelSelectorLogo :provider="m.chefSlug" />
+                      <ModelSelectorName>{{ m.name }}</ModelSelectorName>
+                      <ModelSelectorLogoGroup>
+                        <ModelSelectorLogo
+                          v-for="provider in m.providers"
+                          :key="provider"
+                          :provider="provider"
+                        />
+                      </ModelSelectorLogoGroup>
+                      <CheckIcon
+                        v-if="model === m.id"
+                        class="ml-auto size-4"
+                      />
+                      <div
+                        v-else
+                        class="ml-auto size-4"
+                      />
+                    </ModelSelectorItem>
+                  </ModelSelectorGroup>
+                </ModelSelectorList>
+              </ModelSelectorContent>
+            </ModelSelector>
+          </PromptInputTools>
+          <div class="flex items-center gap-2">
+            <Button
+              size="icon-sm"
+              variant="ghost"
+            >
+              <ImageIcon
+                class="text-muted-foreground"
+                :size="16"
+              />
+            </Button>
+            <PromptInputSubmit
+              class="!h-8"
+              :status="status"
+            />
+          </div>
+        </PromptInputFooter>
+      </PromptInput>
+    </PromptInputProvider>
+  </div>
+</template>

From 5ca73f681436604d33e07ea9854cd030ccc01519 Mon Sep 17 00:00:00 2001
From: cwandev <18888351756@163.com>
Date: Mon, 1 Dec 2025 13:49:27 +0800
Subject: [PATCH 6/7] chore: update prompt-input.md

---
 apps/www/content/3.components/1.chatbot/prompt-input.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/www/content/3.components/1.chatbot/prompt-input.md b/apps/www/content/3.components/1.chatbot/prompt-input.md
index bff4672..7d450f7 100644
--- a/apps/www/content/3.components/1.chatbot/prompt-input.md
+++ b/apps/www/content/3.components/1.chatbot/prompt-input.md
@@ -4,7 +4,7 @@ description: Allows a user to send a message with file attachments to a large la
 icon: lucide:corner-down-left
 ---
 
-The `PromptInput` component allows a user to send a message to a large language model. It includes a textarea, a submit button, and a dropdown for selecting the model.
+The `PromptInput` component allows a user to send a message with file attachments to a large language model. It includes a textarea, file upload capabilities, a submit button, and a dropdown for selecting the model.
 
 :::ComponentLoader{label="Preview" componentName="PromptInput"}
 :::
@@ -1471,7 +1471,7 @@ export * from './types'
 
 ## Usage with AI SDK
 
-Built a fully functional chat app using `PromptInput`, [`Conversation`](/components/conversation) with a model picker:
+Built a fully functional chat app using `PromptInput`, [`Conversation`](/components/chatbot/conversation) with a model picker:
 
 Add the following component to your frontend:
 
@@ -1993,7 +1993,7 @@ export default defineEventHandler(async (event) => {
 ### `<PromptInputCommandInput />`
 
 :::field-group
-  ::field{name="...props" type="InstanceType<typeof CommandInput"> optional}
+  ::field{name="...props" type="InstanceType<typeof CommandInput>" optional}
   Any other props are spread to the CommandInput component.
   ::
 :::

From 4474bfff2f4e2250c47008afc8227017056b012a Mon Sep 17 00:00:00 2001
From: cwandev <18888351756@163.com>
Date: Mon, 1 Dec 2025 14:04:56 +0800
Subject: [PATCH 7/7] chore(shadcn-vue): update input component

---
 packages/shadcn-vue/components/ui/input/Input.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shadcn-vue/components/ui/input/Input.vue b/packages/shadcn-vue/components/ui/input/Input.vue
index 117857b..6b27ecb 100644
--- a/packages/shadcn-vue/components/ui/input/Input.vue
+++ b/packages/shadcn-vue/components/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     data-slot="input"
     :class="cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
       'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
       'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
       props.class,