@wzh-/ai-chat-example 1.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { PromptInputMessage } from './types'
+import { usePromptInputProvider } from './context'
+
+const props = defineProps<{
+  initialInput?: string
+  maxFiles?: number
+  maxFileSize?: number
+  accept?: string
+  uploadImages?: (files: File[]) => { name: string; path: string }[] | Promise<{ name: string; path: 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),
+}, props.uploadImages)
+</script>
+
+<template>
+  <slot />
+</template>

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// import type { InputGroupButtonVariants } from '@/components/ui/input-group'
+import type { ChatStatus } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import { InputGroupButton } from '@/components/ui/input-group'
+import { cn } from '@/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
+  variant?: InputGroupButtonProps['variant']
+  size?: InputGroupButtonProps['size']
+}
+
+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>

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

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

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

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

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

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

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

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

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

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