@wzh-/ai-chat-example 1.0.0

package/src/components/ai-elements/queue/QueueSectionContent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleContent } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CollapsibleContent :class="cn(props.class)">
+    <slot />
+  </CollapsibleContent>
+</template>

package/src/components/ai-elements/queue/QueueSectionLabel.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronDownIcon } from 'lucide-vue-next'
+
+interface QueueSectionLabelProps {
+  count?: number
+  label: string
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<QueueSectionLabelProps>()
+</script>
+
+<template>
+  <span :class="cn('flex items-center gap-2', props.class)">
+    <ChevronDownIcon
+      class="group-data-[state=closed]:-rotate-90 size-4 transition-transform"
+    />
+    <slot name="icon" />
+    <span>
+      {{ props.count }}
+      {{ props.label }}
+    </span>
+  </span>
+</template>

package/src/components/ai-elements/queue/QueueSectionTrigger.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleTrigger } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CollapsibleTrigger as-child>
+    <button
+      :class="
+        cn(
+          'group flex w-full items-center justify-between rounded-md bg-sidebar px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted',
+          props.class,
+        )
+      "
+      type="button"
+    >
+      <slot />
+    </button>
+  </CollapsibleTrigger>
+</template>

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

@@ -0,0 +1,15 @@
+export { default as Queue } from './Queue.vue'
+export { default as QueueItem } from './QueueItem.vue'
+export { default as QueueItemAction } from './QueueItemAction.vue'
+export { default as QueueItemActions } from './QueueItemActions.vue'
+export { default as QueueItemAttachment } from './QueueItemAttachment.vue'
+export { default as QueueItemContent } from './QueueItemContent.vue'
+export { default as QueueItemDescription } from './QueueItemDescription.vue'
+export { default as QueueItemFile } from './QueueItemFile.vue'
+export { default as QueueItemImage } from './QueueItemImage.vue'
+export { default as QueueItemIndicator } from './QueueItemIndicator.vue'
+export { default as QueueList } from './QueueList.vue'
+export { default as QueueSection } from './QueueSection.vue'
+export { default as QueueSectionContent } from './QueueSectionContent.vue'
+export { default as QueueSectionLabel } from './QueueSectionLabel.vue'
+export { default as QueueSectionTrigger } from './QueueSectionTrigger.vue'

package/src/components/ai-elements/reasoning/Reasoning.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Collapsible } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+import { computed, provide, ref, watch } from 'vue'
+import { ReasoningKey } from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  isStreaming?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+  duration?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isStreaming: false,
+  defaultOpen: true,
+  duration: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:duration', value: number): void
+}>()
+
+const isOpen = useVModel(props, 'open', emit, {
+  defaultValue: props.defaultOpen,
+  passive: true,
+})
+
+const internalDuration = ref<number | undefined>(props.duration)
+
+watch(() => props.duration, (newVal) => {
+  internalDuration.value = newVal
+})
+
+function updateDuration(val: number) {
+  internalDuration.value = val
+  emit('update:duration', val)
+}
+
+const hasAutoClosed = ref(false)
+const startTime = ref<number | null>(null)
+
+const MS_IN_S = 1000
+const AUTO_CLOSE_DELAY = 1000
+
+// Track duration when streaming starts and ends
+watch(() => props.isStreaming, (streaming) => {
+  if (streaming) {
+    // Auto-open when streaming starts
+    isOpen.value = true
+
+    if (startTime.value === null && props.duration === undefined) {
+      startTime.value = Date.now()
+    }
+  }
+  else if (startTime.value !== null) {
+    const calculatedDuration = Math.ceil((Date.now() - startTime.value) / MS_IN_S)
+    updateDuration(calculatedDuration)
+    startTime.value = null
+  }
+}, { immediate: true })
+
+// Auto-close logic
+watch([() => props.isStreaming, isOpen, () => props.defaultOpen, hasAutoClosed], (_, __, onCleanup) => {
+  if (props.defaultOpen && !props.isStreaming && isOpen.value && !hasAutoClosed.value) {
+    const timer = setTimeout(() => {
+      isOpen.value = false
+      hasAutoClosed.value = true
+    }, AUTO_CLOSE_DELAY)
+
+    onCleanup(() => clearTimeout(timer))
+  }
+}, { immediate: true })
+
+provide(ReasoningKey, {
+  isStreaming: computed(() => props.isStreaming),
+  isOpen,
+  setIsOpen: (val: boolean) => { isOpen.value = val },
+  duration: computed(() => internalDuration.value),
+})
+</script>
+
+<template>
+  <Collapsible
+    v-model:open="isOpen"
+    :class="cn('not-prose mb-4', props.class)"
+  >
+    <slot />
+  </Collapsible>
+</template>

package/src/components/ai-elements/reasoning/ReasoningContent.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleContent } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+import { StreamMarkdown } from 'streamdown-vue'
+import { computed, useSlots } from 'vue'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  content: string
+}
+
+const props = defineProps<Props>()
+const slots = useSlots()
+
+const slotContent = computed<string | undefined>(() => {
+  const nodes = slots.default?.() || []
+  let text = ''
+  for (const node of nodes) {
+    if (typeof node.children === 'string')
+      text += node.children
+  }
+  return text || undefined
+})
+
+const md = computed(() => (slotContent.value ?? props.content ?? '') as string)
+</script>
+
+<template>
+  <CollapsibleContent
+    :class="cn(
+      'mt-4 text-sm',
+      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2',
+      'data-[state=open]:slide-in-from-top-2 text-muted-foreground',
+      'outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+      props.class,
+    )"
+  >
+    <StreamMarkdown :content="md" />
+  </CollapsibleContent>
+</template>

package/src/components/ai-elements/reasoning/ReasoningTrigger.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleTrigger } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+import { BrainIcon, ChevronDownIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { Shimmer } from '../shimmer'
+import { useReasoningContext } from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const { isStreaming, isOpen, duration } = useReasoningContext()
+
+const thinkingMessage = computed(() => {
+  if (isStreaming.value || duration.value === 0) {
+    return 'thinking'
+  }
+  if (duration.value === undefined) {
+    return 'default_done'
+  }
+  return 'duration_done'
+})
+</script>
+
+<template>
+  <CollapsibleTrigger
+    :class="cn(
+      'flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground',
+      props.class,
+    )"
+  >
+    <slot>
+      <BrainIcon class="size-4" />
+
+      <template v-if="thinkingMessage === 'thinking'">
+        <Shimmer :duration="1">
+          Thinking...
+        </Shimmer>
+      </template>
+
+      <template v-else-if="thinkingMessage === 'default_done'">
+        <p>Thought for a few seconds</p>
+      </template>
+
+      <template v-else>
+        <p>Thought for {{ duration }} seconds</p>
+      </template>
+
+      <ChevronDownIcon
+        :class="cn(
+          'size-4 transition-transform',
+          isOpen ? 'rotate-180' : 'rotate-0',
+        )"
+      />
+    </slot>
+  </CollapsibleTrigger>
+</template>

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

@@ -0,0 +1,19 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+
+export interface ReasoningContextValue {
+  isStreaming: Ref<boolean>
+  isOpen: Ref<boolean>
+  setIsOpen: (open: boolean) => void
+  duration: Ref<number | undefined>
+}
+
+export const ReasoningKey: InjectionKey<ReasoningContextValue>
+  = Symbol('ReasoningContext')
+
+export function useReasoningContext() {
+  const ctx = inject<ReasoningContextValue>(ReasoningKey)
+  if (!ctx)
+    throw new Error('Reasoning components must be used within <Reasoning>')
+  return ctx
+}

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

@@ -0,0 +1,3 @@
+export { default as Reasoning } from './Reasoning.vue'
+export { default as ReasoningContent } from './ReasoningContent.vue'
+export { default as ReasoningTrigger } from './ReasoningTrigger.vue'

package/src/components/ai-elements/shimmer/Shimmer.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { CSSProperties, HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { motion } from 'motion-v'
+import { computed, useSlots } from 'vue'
+
+export interface TextShimmerProps {
+  as?: keyof HTMLElementTagNameMap
+  class?: HTMLAttributes['class']
+  duration?: number
+  spread?: number
+}
+
+const props = withDefaults(defineProps<TextShimmerProps>(), {
+  as: 'p',
+  duration: 2,
+  spread: 2,
+})
+
+const slots = useSlots()
+
+const textContent = computed(() => {
+  const defaultSlot = slots.default?.()
+  if (!defaultSlot || defaultSlot.length === 0)
+    return ''
+
+  return defaultSlot
+    .map((vnode) => {
+      if (typeof vnode.children === 'string') {
+        return vnode.children
+      }
+      return ''
+    })
+    .join('')
+})
+
+const dynamicSpread = computed(() => {
+  return (textContent.value?.length ?? 0) * props.spread
+})
+
+const componentClasses = computed(() => cn('relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent', '[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]', props.class))
+
+const componentStyle = computed((): CSSProperties => ({
+  '--spread': `${dynamicSpread.value}px`,
+  'backgroundImage':
+    'var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))',
+}))
+
+const MotionComponent = computed(() => {
+  return motion[props.as as keyof typeof motion] || motion.p
+})
+</script>
+
+<template>
+  <component
+    :is="MotionComponent"
+    :class="componentClasses"
+    :style="componentStyle"
+    :initial="{ backgroundPosition: '100% center' }"
+    :animate="{ backgroundPosition: '0% center' }"
+    :transition="{
+      repeat: Number.POSITIVE_INFINITY,
+      duration,
+      ease: 'linear',
+    }"
+  >
+    <slot />
+  </component>
+</template>

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

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

package/src/components/ai-elements/sources/Source.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { BookIcon } from 'lucide-vue-next'
+
+const props = defineProps<{
+  href: string
+  title: string
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <a
+    :class="cn('flex items-center gap-2', props.class)"
+    :href="props.href"
+    rel="noreferrer"
+    target="_blank"
+  >
+    <!-- Default slot content -->
+    <slot>
+      <BookIcon class="h-4 w-4" />
+      <span class="block font-medium">{{ props.title }}</span>
+    </slot>
+  </a>
+</template>

package/src/components/ai-elements/sources/Sources.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Collapsible } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Collapsible
+    :class="cn('not-prose mb-4 text-primary text-xs', props.class)"
+  >
+    <slot />
+  </Collapsible>
+</template>

package/src/components/ai-elements/sources/SourcesContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleContent } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CollapsibleContent
+    :class="
+      cn(
+        'mt-3 flex w-fit flex-col gap-2',
+        'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </CollapsibleContent>
+</template>

package/src/components/ai-elements/sources/SourcesTrigger.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleTrigger } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+import { ChevronDownIcon } from 'lucide-vue-next'
+
+const props = defineProps<{
+  count: number
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CollapsibleTrigger
+    :class="cn('flex items-center gap-2', props.class)"
+  >
+    <slot>
+      <p class="font-medium">
+        Used {{ props.count }} sources
+      </p>
+      <ChevronDownIcon class="h-4 w-4" />
+    </slot>
+  </CollapsibleTrigger>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as Source } from './Source.vue'
+export { default as Sources } from './Sources.vue'
+export { default as SourcesContent } from './SourcesContent.vue'
+export { default as SourcesTrigger } from './SourcesTrigger.vue'

package/src/components/ai-elements/suggestion/Suggestion.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+interface SuggestionProps {
+  suggestion: string
+  class?: HTMLAttributes['class']
+  variant?: 'outline' | 'default' | 'destructive' | 'secondary' | 'ghost' | 'link'
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+}
+
+const props = withDefaults(defineProps<SuggestionProps>(), {
+  variant: 'outline',
+  size: 'sm',
+})
+
+const emit = defineEmits<{
+  (e: 'click', suggestion: string): void
+}>()
+
+function handleClick() {
+  emit('click', props.suggestion)
+}
+</script>
+
+<template>
+  <Button
+    :class="cn('cursor-pointer rounded-full px-4', props.class)"
+    :size="props.size"
+    type="button"
+    :variant="props.variant"
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+    <slot>{{ props.suggestion }}</slot>
+  </Button>
+</template>

package/src/components/ai-elements/suggestion/Suggestions.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
+import { cn } from '@/lib/utils'
+
+interface SuggestionsProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<SuggestionsProps>()
+</script>
+
+<template>
+  <ScrollArea class="w-full overflow-x-auto whitespace-nowrap" v-bind="$attrs">
+    <div :class="cn('flex w-max flex-nowrap items-center gap-2', props.class)">
+      <slot />
+    </div>
+    <ScrollBar class="hidden" orientation="horizontal" />
+  </ScrollArea>
+</template>

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

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

package/src/components/ai-elements/task/Task.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import {
+  Collapsible,
+} from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+import { provide, ref } from 'vue'
+
+interface TaskProps {
+  defaultOpen?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<TaskProps>(), {
+  defaultOpen: true,
+})
+
+const isOpen = ref(props.defaultOpen)
+
+function toggleOpen() {
+  isOpen.value = !isOpen.value
+}
+
+provide('isOpen', isOpen)
+provide('toggle', toggleOpen)
+</script>
+
+<template>
+  <Collapsible :default-open="isOpen" :class="cn(props.class)" as-child v-bind="$attrs">
+    <slot :is-open="isOpen" :toggle="toggleOpen" />
+  </collapsible>
+</template>

package/src/components/ai-elements/task/TaskContent.vue

@@ -0,0 +1,27 @@
+<script setup lang='ts'>
+import type { HTMLAttributes } from 'vue'
+import {
+  CollapsibleContent,
+} from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+
+interface TaskContentProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<TaskContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent
+    :class="cn(
+      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+      props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <div class="mt-4 space-y-2 border-l-2 border-muted pl-4">
+      <slot />
+    </div>
+  </CollapsibleContent>
+</template>

package/src/components/ai-elements/task/TaskItem.vue

@@ -0,0 +1,16 @@
+<script setup lang='ts'>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface TaskItemProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<TaskItemProps>()
+</script>
+
+<template>
+  <div :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ai-elements/task/TaskItemFile.vue

@@ -0,0 +1,18 @@
+<script setup lang='ts'>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface TaskItemFileProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<TaskItemFileProps>()
+</script>
+
+<template>
+  <div
+    :class="cn('inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-foreground text-xs', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ai-elements/task/TaskTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import {
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+import { ChevronDown, Search } from 'lucide-vue-next'
+
+interface TaskTriggerProps {
+  title: string
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<TaskTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger as-child :class="cn('group', props.class)">
+    <slot>
+      <div
+        class="flex w-full cursor-pointer items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground"
+      >
+        <Search class="size-4" />
+        <p class="text-sm">
+          {{ props.title }}
+        </p>
+        <ChevronDown
+          class="size-4 transition-transform group-data-[state=open]:rotate-180"
+        />
+      </div>
+    </slot>
+  </CollapsibleTrigger>
+</template>