@wzh-/ai-chat-example 1.0.0

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

@@ -0,0 +1,91 @@
+<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

@@ -0,0 +1,28 @@
+<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

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

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

@@ -0,0 +1,29 @@
+<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

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

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

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,9 @@
+<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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,46 @@
+<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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,26 @@
+<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

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,38 @@
+<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

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

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

@@ -0,0 +1,27 @@
+<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

@@ -0,0 +1,45 @@
+<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

@@ -0,0 +1,19 @@
+<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>