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..7d450f7 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.
+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="PromptInput" componentName="PromptInput"}
+:::ComponentLoader{label="Preview" componentName="PromptInput"}
 :::
 
 ## Install using CLI
@@ -30,281 +30,1485 @@ 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
 
-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:
 
-```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/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/packages/elements/src/prompt-input/PromptInput.vue b/packages/elements/src/prompt-input/PromptInput.vue
index a2bf275..a63c55e 100644
--- a/packages/elements/src/prompt-input/PromptInput.vue
+++ b/packages/elements/src/prompt-input/PromptInput.vue
@@ -1,21 +1,113 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+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'
 
-interface Props {
-  class?: string
+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)
+  }
 }
 
-const props = defineProps<Props>()
-const attrs = useAttrs()
+onMounted(() => {
+  if (props.globalDrop) {
+    document.addEventListener('dragover', handleDragOver)
+    document.addEventListener('drop', handleDrop)
+  }
+})
+
+onUnmounted(() => {
+  if (props.globalDrop) {
+    document.removeEventListener('dragover', handleDragOver)
+    document.removeEventListener('drop', handleDrop)
+  }
+})
 
-const classes = computed(() => [
-  'w-full divide-y overflow-hidden rounded-xl border bg-background shadow-sm',
-  props.class,
-])
+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>
-  <form :class="classes" v-bind="attrs">
-    <slot />
-  </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
new file mode 100644
index 0000000..9ab534a
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputActionAddAttachments.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { DropdownMenuItem } from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { ImageIcon } from 'lucide-vue-next'
+import { usePromptInput } from './context'
+
+type PromptInputActionAddAttachmentsProps = InstanceType<typeof DropdownMenuItem>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputActionAddAttachmentsProps {
+  label?: string
+}
+
+const props = defineProps<Props>()
+
+const { openFileDialog } = usePromptInput()
+</script>
+
+<template>
+  <DropdownMenuItem @select.prevent="openFileDialog">
+    <ImageIcon class="mr-2 size-4" />
+    {{ props.label || 'Add photos or files' }}
+  </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..b4cbf60
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputActionMenuItem.vue
@@ -0,0 +1,19 @@
+<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>
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..a4e66d6
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputAttachment.vue
@@ -0,0 +1,93 @@
+<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>
diff --git a/packages/elements/src/prompt-input/PromptInputAttachments.vue b/packages/elements/src/prompt-input/PromptInputAttachments.vue
new file mode 100644
index 0000000..2deeabf
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputAttachments.vue
@@ -0,0 +1,22 @@
+<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>
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..35def93
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputCommandList.vue
@@ -0,0 +1,17 @@
+<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>
+
+<template>
+  <CommandList :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..bfe6a19
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputHoverCard.vue
@@ -0,0 +1,23 @@
+<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>
diff --git a/packages/elements/src/prompt-input/PromptInputHoverCardContent.vue b/packages/elements/src/prompt-input/PromptInputHoverCardContent.vue
new file mode 100644
index 0000000..d2aced0
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputHoverCardContent.vue
@@ -0,0 +1,19 @@
+<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>
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/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
new file mode 100644
index 0000000..7edbe36
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputProvider.vue
@@ -0,0 +1,29 @@
+<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>
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..bbd4140
--- /dev/null
+++ b/packages/elements/src/prompt-input/PromptInputSpeechButton.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+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
+  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: SpeechRecognitionEvent) => any) | null
+  onerror: ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => any) | null
+}
+
+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)
+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>
+  <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" />
+  </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..c7c4a16 100644
--- a/packages/elements/src/prompt-input/PromptInputTextarea.vue
+++ b/packages/elements/src/prompt-input/PromptInputTextarea.vue
@@ -1,43 +1,74 @@
 <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 { computed, ref } from 'vue'
+import { usePromptInput } from './context'
 
-interface Props {
-  class?: string
-  placeholder?: string
+type PromptInputTextareaProps = InstanceType<typeof InputGroupTextarea>['$props']
+
+interface Props extends /* @vue-ignore */ PromptInputTextareaProps {
+  class?: HTMLAttributes['class']
 }
 
 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,
-])
+const { textInput, setTextInput, submitForm, addFiles, files, removeFile } = usePromptInput()
+const isComposing = ref(false)
 
 function handleKeyDown(e: KeyboardEvent) {
   if (e.key === 'Enter') {
-    if ((e as any).nativeEvent?.isComposing)
-      return
-    if (e.shiftKey)
+    if (isComposing.value || e.shiftKey)
       return
     e.preventDefault()
-    const form = (e.target as HTMLTextAreaElement).form
-    form?.requestSubmit()
+    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>
-  <Textarea
-    :class="classes"
+  <InputGroupTextarea
+    v-model="modelValue"
+    placeholder="What would you like to know?"
     name="message"
-    :placeholder="placeholder"
-    v-bind="attrs"
+    :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>
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/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/context.ts b/packages/elements/src/prompt-input/context.ts
new file mode 100644
index 0000000..9b4917a
--- /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,
+    }))
+
+    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 be87dfe..2cf8e23 100644
--- a/packages/elements/src/prompt-input/index.ts
+++ b/packages/elements/src/prompt-input/index.ts
@@ -1,11 +1,39 @@
+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 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 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 PromptInputToolbar } from './PromptInputToolbar.vue'
 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
new file mode 100644
index 0000000..54b29a6
--- /dev/null
+++ b/packages/elements/src/prompt-input/types.ts
@@ -0,0 +1,28 @@
+import type { FileUIPart } from 'ai'
+import type { Ref } from 'vue'
+
+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')
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 2c2a1d7..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'
@@ -28,7 +29,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/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>
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..6a58a4a
--- /dev/null
+++ b/packages/examples/src/prompt-input-header-controls.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { usePromptInput } from '@repo/elements/prompt-input'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+
+const { setTextInput, clearInput, clearFiles } = usePromptInput()
+</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>
+
+    <div class="flex items-center -space-x-px">
+      <Button
+        variant="outline"
+        size="sm"
+        class="rounded-r-none focus:z-10"
+        @click="clearInput"
+      >
+        Clear input
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        class="rounded-none focus:z-10"
+        @click="setTextInput('Inserted via PromptInputProvider')"
+      >
+        Set input
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        class="rounded-l-none focus:z-10"
+        @click="clearFiles"
+      >
+        Clear attachments
+      </Button>
+    </div>
+  </header>
+</template>
diff --git a/packages/examples/src/prompt-input.vue b/packages/examples/src/prompt-input.vue
index c87704d..3267af7 100644
--- a/packages/examples/src/prompt-input.vue
+++ b/packages/examples/src/prompt-input.vue
@@ -1,89 +1,202 @@
 <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,
 } from '@repo/elements/prompt-input'
-import { Globe, Mic, Plus } from 'lucide-vue-next'
-import { ref } from 'vue'
 
-type Status = 'submitted' | 'streaming' | 'ready' | 'error'
+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-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 modelId = ref<string>(models[0].id)
+const modelSelectorOpen = ref(false)
+const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready')
+const selectedModelData = computed(() => models.find(m => m.id === modelId.value))
+
+function handleSubmit(message: PromptInputMessage) {
+  const hasText = !!message.text
+  const hasAttachments = message.files?.length > 0
 
-function onSubmit(event: Event) {
-  event.preventDefault()
-  if (!text.value)
+  if (!hasText && !hasAttachments) {
     return
+  }
 
   status.value = 'submitted'
 
+  // eslint-disable-next-line no-console
+  console.log('Submitting message:', 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>
-
-      <PromptInputSubmit :disabled="!text" :status="status" />
-    </PromptInputToolbar>
-  </PromptInput>
+  <div class="size-full">
+    <PromptInputProvider
+      @submit="handleSubmit"
+    >
+      <PromptInput
+        multiple
+        global-drop class="w-full"
+      >
+        <PromptInputAttachments>
+          <template #default="{ file }">
+            <PromptInputAttachment :file="file" />
+          </template>
+        </PromptInputAttachments>
+
+        <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>
+
+      <HeaderControls />
+    </PromptInputProvider>
+  </div>
 </template>
diff --git a/packages/examples/src/queue-prompt-input.vue b/packages/examples/src/queue-prompt-input.vue
index 80846a0..cf8b012 100644
--- a/packages/examples/src/queue-prompt-input.vue
+++ b/packages/examples/src/queue-prompt-input.vue
@@ -1,19 +1,36 @@
 <!-- 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,
+  PromptInputSpeechButton,
   PromptInputSubmit,
   PromptInputTextarea,
-  PromptInputToolbar,
   PromptInputTools,
 } from '@repo/elements/prompt-input'
-
 import {
   Queue,
   QueueItem,
@@ -24,10 +41,9 @@ import {
   QueueItemIndicator,
   QueueSection,
   QueueSectionContent,
-
 } from '@repo/elements/queue'
-import { Globe, Mic, Plus, Send, Trash2 } from 'lucide-vue-next'
-import { onBeforeUnmount, ref } from 'vue'
+import { CheckIcon, GlobeIcon, Trash2Icon } from 'lucide-vue-next'
+import { computed, onBeforeUnmount, ref } from 'vue'
 
 export interface QueueMessagePart {
   type: string
@@ -49,23 +65,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 +134,15 @@ 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 timeoutRef = ref<ReturnType<typeof setTimeout> | null>(null)
-const textareaRef = ref<HTMLTextAreaElement | null>(null)
 
-// ---- Methods ----
+const selectedModelData = computed(() => models.find(m => m.id === modelId.value))
+
 function handleRemoveTodo(id: string) {
   todos.value = todos.value.filter(todo => todo.id !== id)
 }
@@ -116,7 +156,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 +181,6 @@ function handleSubmit(message: any) {
   }, STREAMING_TIMEOUT)
 }
 
-// ---- Cleanup ----
 onBeforeUnmount(() => {
   if (timeoutRef.value)
     clearTimeout(timeoutRef.value)
@@ -148,16 +188,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 +204,7 @@ onBeforeUnmount(() => {
                     aria-label="Remove todo"
                     @click="handleRemoveTodo(todo.id)"
                   >
-                    <Trash2 :size="12" />
+                    <Trash2Icon :size="12" />
                   </QueueItemAction>
                 </QueueItemActions>
               </div>
@@ -184,43 +220,93 @@ onBeforeUnmount(() => {
       </QueueSection>
     </Queue>
 
-    <!-- Prompt Input -->
-    <PromptInput @submit="handleSubmit">
-      <PromptInputTextarea ref="textareaRef" v-model="text" placeholder="Ask me about anything..." />
+    <PromptInput
+      global-drop
+      multiple
+      @submit="handleSubmit"
+    >
+      <PromptInputHeader>
+        <PromptInputAttachments>
+          <template #default="{ file }">
+            <PromptInputAttachment :file="file" />
+          </template>
+        </PromptInputAttachments>
+      </PromptInputHeader>
+
+      <PromptInputBody>
+        <PromptInputTextarea />
+      </PromptInputBody>
 
-      <PromptInputToolbar>
+      <PromptInputFooter>
         <PromptInputTools>
+          <PromptInputActionMenu>
+            <PromptInputActionMenuTrigger />
+            <PromptInputActionMenuContent>
+              <PromptInputActionAddAttachments />
+            </PromptInputActionMenuContent>
+          </PromptInputActionMenu>
+
+          <PromptInputSpeechButton />
+
           <PromptInputButton>
-            <Plus class="size-4" />
-          </PromptInputButton>
-          <PromptInputButton>
-            <Mic class="size-4" />
-          </PromptInputButton>
-          <PromptInputButton>
-            <Globe class="size-4" />
+            <GlobeIcon :size="16" />
             <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>
+          <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 :disabled="!text" :status="status">
-          <Send :size="32" />
-        </PromptInputSubmit>
-      </PromptInputToolbar>
+        <PromptInputSubmit :status="status" />
+      </PromptInputFooter>
     </PromptInput>
   </div>
 </template>
diff --git a/packages/examples/src/suggestion-ai-input.vue b/packages/examples/src/suggestion-input.vue
similarity index 72%
rename from packages/examples/src/suggestion-ai-input.vue
rename to packages/examples/src/suggestion-input.vue
index 89b5905..00633e1 100644
--- a/packages/examples/src/suggestion-ai-input.vue
+++ b/packages/examples/src/suggestion-input.vue
@@ -1,25 +1,21 @@
 <!-- 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,
+  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 +49,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 +76,44 @@ function handleSuggestionClick(suggestion: string) {
       />
     </Suggestions>
 
+    <!-- <PromptInputProvider @submit="handleSubmit"> -->
     <PromptInput @submit="handleSubmit">
       <PromptInputTextarea ref="textareaRef" v-model="text" placeholder="Ask me about anything..." />
 
-      <PromptInputToolbar>
+      <PromptInputFooter>
         <PromptInputTools>
           <PromptInputButton>
-            <Plus class="size-4" />
+            <PlusIcon class="size-4" />
           </PromptInputButton>
           <PromptInputButton>
-            <Mic class="size-4" />
+            <MicIcon class="size-4" />
           </PromptInputButton>
           <PromptInputButton>
-            <Globe class="size-4" />
+            <GlobeIcon class="size-4" />
             <span>Search</span>
           </PromptInputButton>
 
-          <PromptInputModelSelect v-model="defaultModel">
-            <PromptInputModelSelectTrigger>
-              <PromptInputModelSelectValue />
-            </PromptInputModelSelectTrigger>
-            <PromptInputModelSelectContent>
-              <PromptInputModelSelectItem
+          <PromptInputSelect v-model="defaultModel">
+            <PromptInputSelectTrigger>
+              <PromptInputSelectValue />
+            </PromptInputSelectTrigger>
+            <PromptInputSelectContent>
+              <PromptInputSelectItem
                 v-for="model in models"
                 :key="model.id"
                 :value="model.id"
               >
                 {{ model.name }}
-              </PromptInputModelSelectItem>
-            </PromptInputModelSelectContent>
-          </PromptInputModelSelect>
+              </PromptInputSelectItem>
+            </PromptInputSelectContent>
+          </PromptInputSelect>
         </PromptInputTools>
 
         <PromptInputSubmit :disabled="!text" :status="status">
-          <Send :size="32" />
+          <SendIcon :size="32" />
         </PromptInputSubmit>
-      </PromptInputToolbar>
+      </PromptInputFooter>
     </PromptInput>
+    <!-- </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']
+}
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,