@wzh-/ai-chat-example 1.0.0

package/src/components/ai-elements/panel/Panel.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PanelPositionType } from '@vue-flow/core'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Panel as PanelPrimitive } from '@vue-flow/core'
+import { reactiveOmit } from '@vueuse/core'
+
+interface PanelProps {
+  class?: HTMLAttributes['class']
+  position?: PanelPositionType
+}
+
+const props = withDefaults(defineProps<PanelProps>(), {
+  position: 'top-right',
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <PanelPrimitive
+    data-slot="panel"
+    v-bind="delegatedProps"
+    :class="cn('m-4 overflow-hidden rounded-md border bg-card p-1', props.class)"
+  >
+    <slot />
+  </PanelPrimitive>
+</template>

package/src/components/ai-elements/panel/index.ts

@@ -0,0 +1 @@
+export { default as Panel } from './Panel.vue'

package/src/components/ai-elements/plan/Plan.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Card } from '@/components/ui/card'
+import { Collapsible } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+import { computed } from 'vue'
+import { providePlan } from './context'
+
+interface PlanProps {
+  isStreaming?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(
+  defineProps<PlanProps>(),
+  {
+    isStreaming: false,
+  },
+)
+
+providePlan({
+  isStreaming: computed(() => props.isStreaming),
+})
+</script>
+
+<template>
+  <Collapsible as-child data-slot="plan" v-bind="props">
+    <Card :class="cn('shadow-none', props.class)">
+      <slot />
+    </Card>
+  </Collapsible>
+</template>

package/src/components/ai-elements/plan/PlanAction.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CardAction } from '@/components/ui/card'
+</script>
+
+<template>
+  <CardAction data-slot="plan-action">
+    <slot />
+  </CardAction>
+</template>

package/src/components/ai-elements/plan/PlanContent.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { CardContent } from '@/components/ui/card'
+import { CollapsibleContent } from '@/components/ui/collapsible'
+</script>
+
+<template>
+  <CollapsibleContent as-child>
+    <CardContent data-slot="plan-content">
+      <slot />
+    </CardContent>
+  </CollapsibleContent>
+</template>

package/src/components/ai-elements/plan/PlanDescription.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CardDescription } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+import { Shimmer } from '../shimmer'
+import { usePlan } from './context'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { isStreaming } = usePlan()
+</script>
+
+<template>
+  <CardDescription
+    :class="cn('text-balance', props.class)"
+    data-slot="plan-description"
+  >
+    <Shimmer v-if="isStreaming">
+      <slot />
+    </Shimmer>
+    <slot v-else />
+  </CardDescription>
+</template>

package/src/components/ai-elements/plan/PlanFooter.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CardFooter } from '@/components/ui/card'
+</script>
+
+<template>
+  <CardFooter data-slot="plan-footer">
+    <slot />
+  </CardFooter>
+</template>

package/src/components/ai-elements/plan/PlanHeader.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CardHeader } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CardHeader
+    :class="cn('flex flex-row items-start justify-between', props.class)"
+    data-slot="plan-header"
+  >
+    <slot />
+  </CardHeader>
+</template>

package/src/components/ai-elements/plan/PlanTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { CardTitle } from '@/components/ui/card'
+import { Shimmer } from '../shimmer'
+import { usePlan } from './context'
+
+const { isStreaming } = usePlan()
+</script>
+
+<template>
+  <CardTitle data-slot="plan-title" v-bind="$attrs">
+    <Shimmer v-if="isStreaming">
+      <slot />
+    </Shimmer>
+    <slot v-else />
+  </CardTitle>
+</template>

package/src/components/ai-elements/plan/PlanTrigger.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@/components/ui/button'
+import { CollapsibleTrigger } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+import { ChevronsUpDownIcon } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CollapsibleTrigger as-child>
+    <Button
+      :class="cn('size-8', props.class)"
+      data-slot="plan-trigger"
+      size="icon"
+      variant="ghost"
+    >
+      <ChevronsUpDownIcon class="size-4" />
+      <span class="sr-only">Toggle plan</span>
+    </Button>
+  </CollapsibleTrigger>
+</template>

package/src/components/ai-elements/plan/context.ts

@@ -0,0 +1,20 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+import { inject, provide } from 'vue'
+
+export interface PlanContextValue {
+  isStreaming: ComputedRef<boolean>
+}
+
+export const PlanKey: InjectionKey<PlanContextValue> = Symbol('PlanContext')
+
+export function providePlan(value: PlanContextValue) {
+  provide(PlanKey, value)
+}
+
+export function usePlan() {
+  const context = inject(PlanKey)
+  if (!context) {
+    throw new Error('Plan components must be used within a Plan component')
+  }
+  return context
+}

package/src/components/ai-elements/plan/index.ts

@@ -0,0 +1,8 @@
+export { default as Plan } from './Plan.vue'
+export { default as PlanAction } from './PlanAction.vue'
+export { default as PlanContent } from './PlanContent.vue'
+export { default as PlanDescription } from './PlanDescription.vue'
+export { default as PlanFooter } from './PlanFooter.vue'
+export { default as PlanHeader } from './PlanHeader.vue'
+export { default as PlanTitle } from './PlanTitle.vue'
+export { default as PlanTrigger } from './PlanTrigger.vue'

package/src/components/ai-elements/prompt-input/PromptInput.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { PromptInputMessage } from './types'
+import { InputGroup } from '@/components/ui/input-group'
+import { cn } from '@/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
+  console.log(input.files);
+  
+  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>

package/src/components/ai-elements/prompt-input/PromptInputActionAddAttachments.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { DropdownMenuItem } from '@/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>

package/src/components/ai-elements/prompt-input/PromptInputActionMenu.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DropdownMenu } from '@/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>

package/src/components/ai-elements/prompt-input/PromptInputActionMenuContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuContent } from '@/components/ui/dropdown-menu'
+import { cn } from '@/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>

package/src/components/ai-elements/prompt-input/PromptInputActionMenuItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
+import { cn } from '@/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>

package/src/components/ai-elements/prompt-input/PromptInputActionMenuTrigger.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuTrigger } from '@/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>

package/src/components/ai-elements/prompt-input/PromptInputAttachment.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AttachmentFile } from './types'
+import { Button } from '@/components/ui/button'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card'
+import { cn } from '@/lib/utils'
+import { PaperclipIcon, XIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { usePromptInput } from './context'
+
+const props = defineProps<{
+  file: AttachmentFile
+  class?: HTMLAttributes['class']
+}>()
+
+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>

package/src/components/ai-elements/prompt-input/PromptInputAttachments.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/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>

package/src/components/ai-elements/prompt-input/PromptInputBody.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div :class="cn('contents', props.class)" v-bind="props">
+    <slot />
+  </div>
+</template>

package/src/components/ai-elements/prompt-input/PromptInputButton.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { InputGroupButton } from '@/components/ui/input-group'
+import { cn } from '@/lib/utils'
+import { Comment, computed, Text, toRef, 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 variant = toRef(props, 'variant')
+
+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>

package/src/components/ai-elements/prompt-input/PromptInputCommand.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Command } from '@/components/ui/command'
+import { cn } from '@/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>

package/src/components/ai-elements/prompt-input/PromptInputCommandEmpty.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandEmpty } from '@/components/ui/command'
+import { cn } from '@/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>