@wzh-/ai-chat-example 1.0.0 → 1.0.1

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

@@ -1,4 +0,0 @@
-export { default as Conversation } from './Conversation.vue'
-export { default as ConversationContent } from './ConversationContent.vue'
-export { default as ConversationEmptyState } from './ConversationEmptyState.vue'
-export { default as ConversationScrollButton } from './ConversationScrollButton.vue'

package/src/components/ai-elements/edge/Animated.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import type { EdgeProps, GraphNode, HandleElement } from '@vue-flow/core'
-import { BaseEdge, getBezierPath, Position } from '@vue-flow/core'
-import { computed } from 'vue'
-
-const props = defineProps<EdgeProps>()
-
-function getHandleCoordsByPosition(node: GraphNode, handlePosition: Position): readonly [number, number] {
-  // Choose the handle type based on position - Left is for target, Right is for source
-  const handleType: HandleElement['type'] = handlePosition === Position.Left ? 'target' : 'source'
-
-  const handle = node.handleBounds?.[handleType]?.find(
-    h => h.position === handlePosition,
-  )
-
-  if (!handle)
-    return [0, 0] as const
-
-  let offsetX = handle.width / 2
-  let offsetY = handle.height / 2
-
-  // this is a tiny detail to make the markerEnd of an edge visible.
-  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
-  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
-  switch (handlePosition) {
-    case Position.Left:
-      offsetX = 0
-      break
-    case Position.Right:
-      offsetX = handle.width
-      break
-    case Position.Top:
-      offsetY = 0
-      break
-    case Position.Bottom:
-      offsetY = handle.height
-      break
-    default:
-      throw new Error(`Invalid handle position: ${handlePosition}`)
-  }
-
-  const x = node.computedPosition.x + handle.x + offsetX
-  const y = node.computedPosition.y + handle.y + offsetY
-
-  return [x, y] as const
-}
-
-function getEdgeParams(source: GraphNode, target: GraphNode) {
-  const sourcePos = Position.Right
-  const [sx, sy] = getHandleCoordsByPosition(source, sourcePos)
-  const targetPos = Position.Left
-  const [tx, ty] = getHandleCoordsByPosition(target, targetPos)
-  return { sx, sy, tx, ty, sourcePos, targetPos }
-}
-
-const path = computed(() => {
-  const sourceNode = props.sourceNode
-  const targetNode = props.targetNode
-  if (!sourceNode || !targetNode)
-    return ''
-
-  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
-    sourceNode,
-    targetNode,
-  )
-
-  const [edgePath] = getBezierPath({
-    sourceX: sx,
-    sourceY: sy,
-    sourcePosition: sourcePos,
-    targetX: tx,
-    targetY: ty,
-    targetPosition: targetPos,
-  })
-  return edgePath
-})
-</script>
-
-<template>
-  <g v-if="path">
-    <BaseEdge
-      :id="props.id"
-      :marker-end="markerEnd"
-      :path="path"
-      :style="style"
-    />
-    <circle fill="var(--primary)" r="4">
-      <animateMotion dur="2s" :path="path" repeatCount="indefinite" />
-    </circle>
-  </g>
-</template>

package/src/components/ai-elements/edge/Temporary.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { EdgeProps } from '@vue-flow/core'
-import { BaseEdge, getSimpleBezierPath } from '@vue-flow/core'
-import { computed } from 'vue'
-
-const props = defineProps<EdgeProps>()
-
-const path = computed(() => {
-  const [edgePath] = getSimpleBezierPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  })
-  return edgePath
-})
-</script>
-
-<template>
-  <BaseEdge
-    :id="props.id"
-    :path="path"
-    class="stroke-1 stroke-ring"
-    :style="{ strokeDasharray: '5, 5' }"
-  />
-</template>

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

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

package/src/components/ai-elements/image/Image.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { Experimental_GeneratedImage } from 'ai'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { computed } from 'vue'
-
-interface Props extends Experimental_GeneratedImage {
-  class?: HTMLAttributes['class']
-  alt?: string
-}
-
-const props = defineProps<Props>()
-
-const classes = computed(() => cn(
-  'h-auto max-w-full overflow-hidden rounded-md',
-  props.class,
-))
-
-const src = computed(() => `data:${props.mediaType};base64,${props.base64}`)
-</script>
-
-<template>
-  <img
-    :alt="props.alt"
-    :class="classes"
-    :src="src"
-    v-bind="$attrs"
-  >
-</template>

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

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

package/src/components/ai-elements/inline-citation/InlineCitation.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <span :class="cn('group inline items-center gap-1', props.class)">
-    <slot />
-  </span>
-</template>

package/src/components/ai-elements/inline-citation/InlineCitationCard.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { HoverCard } from '@/components/ui/hover-card'
-
-const props = withDefaults(defineProps<{
-  closeDelay?: number
-  openDelay?: number
-}>(), {
-  closeDelay: 0,
-  openDelay: 0,
-})
-</script>
-
-<template>
-  <HoverCard :close-delay="props.closeDelay" :open-delay="props.openDelay">
-    <slot />
-  </HoverCard>
-</template>

package/src/components/ai-elements/inline-citation/InlineCitationCardBody.vue

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

package/src/components/ai-elements/inline-citation/InlineCitationCardTrigger.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Badge } from '@/components/ui/badge'
-import { HoverCardTrigger } from '@/components/ui/hover-card'
-import { cn } from '@/lib/utils'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  sources: string[]
-  class?: HTMLAttributes['class']
-}>()
-
-const displayText = computed(() => {
-  const firstSource = props.sources[0]
-  if (!firstSource)
-    return 'unknown'
-
-  try {
-    const hostname = new URL(firstSource).hostname
-    const additionalCount = props.sources.length - 1
-    return additionalCount > 0 ? `${hostname} +${additionalCount}` : hostname
-  }
-  catch {
-    return 'unknown'
-  }
-})
-</script>
-
-<template>
-  <HoverCardTrigger as-child>
-    <Badge :class="cn('ml-1 rounded-full', props.class)" variant="secondary">
-      {{ displayText }}
-    </Badge>
-  </HoverCardTrigger>
-</template>

package/src/components/ai-elements/inline-citation/InlineCitationCarousel.vue

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

package/src/components/ai-elements/inline-citation/InlineCitationCarouselContent.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { CarouselContent } from '@/components/ui/carousel'
-</script>
-
-<template>
-  <CarouselContent>
-    <slot />
-  </CarouselContent>
-</template>

package/src/components/ai-elements/inline-citation/InlineCitationCarouselHeader.vue

@@ -1,16 +0,0 @@
-<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('flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ai-elements/inline-citation/InlineCitationCarouselIndex.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { useCarousel } from '@/components/ui/carousel'
-import { cn } from '@/lib/utils'
-import { computed, nextTick, ref, watch } from 'vue'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const { carouselApi } = useCarousel()
-const current = ref(0)
-const count = ref(0)
-
-const displayText = computed(() => `${current.value}/${count.value}`)
-
-function updateState() {
-  if (!carouselApi.value)
-    return
-
-  count.value = carouselApi.value.scrollSnapList().length
-  current.value = carouselApi.value.selectedScrollSnap() + 1
-}
-
-const stop = watch(carouselApi, (api) => {
-  if (!api)
-    return
-
-  // Watch only once
-  nextTick(() => stop())
-
-  updateState()
-
-  api.on('select', () => {
-    updateState()
-  })
-})
-</script>
-
-<template>
-  <div
-    :class="cn('flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs', props.class)"
-  >
-    <slot>{{ displayText }}</slot>
-  </div>
-</template>

package/src/components/ai-elements/inline-citation/InlineCitationCarouselItem.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { CarouselItem } from '@/components/ui/carousel'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <CarouselItem :class="cn('w-full space-y-2 p-4 pl-8', props.class)">
-    <slot />
-  </CarouselItem>
-</template>

package/src/components/ai-elements/inline-citation/InlineCitationCarouselNext.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { useCarousel } from '@/components/ui/carousel'
-import { cn } from '@/lib/utils'
-import { ArrowRight } from 'lucide-vue-next'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const { scrollNext } = useCarousel()
-</script>
-
-<template>
-  <button
-    :class="cn('shrink-0', props.class)"
-    type="button"
-    aria-label="Next"
-    @click="scrollNext"
-  >
-    <ArrowRight class="size-4 text-muted-foreground" />
-  </button>
-</template>

package/src/components/ai-elements/inline-citation/InlineCitationCarouselPrev.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { useCarousel } from '@/components/ui/carousel'
-import { cn } from '@/lib/utils'
-import { ArrowLeft } from 'lucide-vue-next'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const { scrollPrev } = useCarousel()
-</script>
-
-<template>
-  <button
-    :class="cn('shrink-0', props.class)"
-    type="button"
-    aria-label="Previous"
-    @click="scrollPrev"
-  >
-    <ArrowLeft class="size-4 text-muted-foreground" />
-  </button>
-</template>

package/src/components/ai-elements/inline-citation/InlineCitationQuote.vue

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

package/src/components/ai-elements/inline-citation/InlineCitationSource.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  title?: string
-  url?: string
-  description?: string
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn('space-y-1', props.class)">
-    <h4 v-if="title" class="truncate font-medium text-sm leading-tight">
-      {{ title }}
-    </h4>
-    <p v-if="url" class="truncate break-all text-muted-foreground text-xs">
-      {{ url }}
-    </p>
-    <p v-if="description" class="line-clamp-3 text-muted-foreground text-sm leading-relaxed">
-      {{ description }}
-    </p>
-    <slot />
-  </div>
-</template>

package/src/components/ai-elements/inline-citation/InlineCitationText.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <span :class="cn('transition-colors group-hover:bg-accent', props.class)">
-    <slot />
-  </span>
-</template>

package/src/components/ai-elements/inline-citation/index.ts

@@ -1,14 +0,0 @@
-export { default as InlineCitation } from './InlineCitation.vue'
-export { default as InlineCitationCard } from './InlineCitationCard.vue'
-export { default as InlineCitationCardBody } from './InlineCitationCardBody.vue'
-export { default as InlineCitationCardTrigger } from './InlineCitationCardTrigger.vue'
-export { default as InlineCitationCarousel } from './InlineCitationCarousel.vue'
-export { default as InlineCitationCarouselContent } from './InlineCitationCarouselContent.vue'
-export { default as InlineCitationCarouselHeader } from './InlineCitationCarouselHeader.vue'
-export { default as InlineCitationCarouselIndex } from './InlineCitationCarouselIndex.vue'
-export { default as InlineCitationCarouselItem } from './InlineCitationCarouselItem.vue'
-export { default as InlineCitationCarouselNext } from './InlineCitationCarouselNext.vue'
-export { default as InlineCitationCarouselPrev } from './InlineCitationCarouselPrev.vue'
-export { default as InlineCitationQuote } from './InlineCitationQuote.vue'
-export { default as InlineCitationSource } from './InlineCitationSource.vue'
-export { default as InlineCitationText } from './InlineCitationText.vue'

package/src/components/ai-elements/loader/Loader.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import LoaderIcon from './LoaderIcon.vue'
-
-interface Props {
-  size?: number
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 16,
-})
-</script>
-
-<template>
-  <div
-    :class="cn('inline-flex animate-spin items-center justify-center', props.class)"
-    v-bind="$attrs"
-  >
-    <LoaderIcon :size="props.size" />
-  </div>
-</template>

package/src/components/ai-elements/loader/LoaderIcon.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  size?: number
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 16,
-})
-</script>
-
-<template>
-  <svg
-    :height="size"
-    stroke-linejoin="round"
-    :style="{ color: 'currentcolor' }"
-    viewBox="0 0 16 16"
-    :width="size"
-  >
-    <title>Loader</title>
-    <g clip-path="url(#clip0_2393_1490)">
-      <path d="M8 0V4" stroke="currentColor" stroke-width="1.5" />
-      <path d="M8 16V12" opacity="0.5" stroke="currentColor" stroke-width="1.5" />
-      <path d="M3.29773 1.52783L5.64887 4.7639" opacity="0.9" stroke="currentColor" stroke-width="1.5" />
-      <path d="M12.7023 1.52783L10.3511 4.7639" opacity="0.1" stroke="currentColor" stroke-width="1.5" />
-      <path d="M12.7023 14.472L10.3511 11.236" opacity="0.4" stroke="currentColor" stroke-width="1.5" />
-      <path d="M3.29773 14.472L5.64887 11.236" opacity="0.6" stroke="currentColor" stroke-width="1.5" />
-      <path d="M15.6085 5.52783L11.8043 6.7639" opacity="0.2" stroke="currentColor" stroke-width="1.5" />
-      <path d="M0.391602 10.472L4.19583 9.23598" opacity="0.7" stroke="currentColor" stroke-width="1.5" />
-      <path d="M15.6085 10.4722L11.8043 9.2361" opacity="0.3" stroke="currentColor" stroke-width="1.5" />
-      <path d="M0.391602 5.52783L4.19583 6.7639" opacity="0.8" stroke="currentColor" stroke-width="1.5" />
-    </g>
-    <defs>
-      <clipPath id="clip0_2393_1490">
-        <rect fill="white" height="16" width="16" />
-      </clipPath>
-    </defs>
-  </svg>
-</template>

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

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

package/src/components/ai-elements/message/Message.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { UIMessage } from 'ai'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-interface Props {
-  from: UIMessage['role']
-  class?: HTMLAttributes['class']
-}
-
-const props = defineProps<Props>()
-</script>
-
-<template>
-  <div
-    :class="
-      cn(
-        'group flex w-full max-w-[80%] gap-2',
-        props.from === 'user' ? 'is-user ml-auto justify-end' : 'is-assistant',
-        props.class,
-      )
-    "
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ai-elements/message/MessageAction.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import type { ButtonVariants } from '@/components/ui/button'
-import { Button } from '@/components/ui/button'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-
-interface Props {
-  tooltip?: string
-  label?: string
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'ghost',
-  size: 'icon-sm',
-})
-
-const buttonProps = {
-  variant: props.variant,
-  size: props.size,
-  type: 'button' as const,
-}
-</script>
-
-<template>
-  <TooltipProvider v-if="props.tooltip">
-    <Tooltip>
-      <TooltipTrigger as-child>
-        <Button v-bind="{ ...buttonProps, ...$attrs }">
-          <slot />
-          <span class="sr-only">
-            {{ props.label || props.tooltip }}</span>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>{{ props.tooltip }}</p>
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
-
-  <Button v-else v-bind="{ ...buttonProps, ...$attrs }">
-    <slot />
-    <span class="sr-only">{{ props.label || props.tooltip }}</span>
-  </Button>
-</template>

package/src/components/ai-elements/message/MessageActions.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-interface Props {
-  class?: HTMLAttributes['class']
-}
-
-const props = defineProps<Props>()
-</script>
-
-<template>
-  <div
-    :class="cn('flex items-center gap-1', props.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>