@wzh-/ai-chat-example 1.0.0

package/src/components/ai-elements/chain-of-thought/ChainOfThoughtStep.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    description?: string
+    status?: 'complete' | 'active' | 'pending'
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    status: 'complete',
+    description: undefined,
+  },
+)
+
+const statusStyles = {
+  complete: 'text-muted-foreground',
+  active: 'text-foreground',
+  pending: 'text-muted-foreground/50',
+}
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex gap-2 text-sm',
+        statusStyles[props.status],
+        'fade-in-0 slide-in-from-top-2 animate-in',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <div class="relative mt-0.5">
+      <slot name="icon" />
+      <div
+        class="-mx-px absolute top-7 bottom-0 left-1/2 w-px bg-border"
+      />
+    </div>
+    <div class="flex-1 space-y-2">
+      <div>{{ props.label }}</div>
+      <div
+        v-if="props.description"
+        class="text-muted-foreground text-xs"
+      >
+        {{ props.description }}
+      </div>
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/ai-elements/chain-of-thought/context.ts

@@ -0,0 +1,22 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+
+export const ChainOfThoughtContextKey: InjectionKey<Ref<boolean>> = Symbol(
+  'ChainOfThoughtContext',
+)
+
+export function useChainOfThought() {
+  const isOpen = inject(ChainOfThoughtContextKey)
+
+  if (!isOpen) {
+    throw new Error(
+      'useChainOfThought must be used within a <ChainOfThought> component',
+    )
+  }
+
+  const setIsOpen = (open: boolean) => {
+    isOpen.value = open
+  }
+
+  return { isOpen, setIsOpen }
+}

package/src/components/ai-elements/chain-of-thought/index.ts

@@ -0,0 +1,7 @@
+export { default as ChainOfThought } from './ChainOfThought.vue'
+export { default as ChainOfThoughtContent } from './ChainOfThoughtContent.vue'
+export { default as ChainOfThoughtHeader } from './ChainOfThoughtHeader.vue'
+export { default as ChainOfThoughtImage } from './ChainOfThoughtImage.vue'
+export { default as ChainOfThoughtSearchResult } from './ChainOfThoughtSearchResult.vue'
+export { default as ChainOfThoughtSearchResults } from './ChainOfThoughtSearchResults.vue'
+export { default as ChainOfThoughtStep } from './ChainOfThoughtStep.vue'

package/src/components/ai-elements/checkpoint/Checkpoint.vue

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

package/src/components/ai-elements/checkpoint/CheckpointIcon.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { BookmarkIcon } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <slot v-if="$slots.default" />
+
+  <BookmarkIcon
+    v-else
+    :class="cn('size-4 shrink-0', props.class)"
+    v-bind="$attrs"
+  />
+</template>

package/src/components/ai-elements/checkpoint/CheckpointTrigger.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+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
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'ghost',
+  size: '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 />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent align="start" side="bottom">
+        <p>{{ props.tooltip }}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+
+  <Button v-else v-bind="{ ...buttonProps, ...$attrs }">
+    <slot />
+  </Button>
+</template>

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

@@ -0,0 +1,3 @@
+export { default as Checkpoint } from './Checkpoint.vue'
+export { default as CheckpointIcon } from './CheckpointIcon.vue'
+export { default as CheckpointTrigger } from './CheckpointTrigger.vue'

package/src/components/ai-elements/code-block/CodeBlock.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { BundledLanguage } from 'shiki'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { reactiveOmit, useDebounceFn } from '@vueuse/core'
+import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { CodeBlockKey } from './context'
+import { highlightCode } from './utils'
+
+const props = withDefaults(
+  defineProps<{
+    code: string
+    language: BundledLanguage
+    showLineNumbers?: boolean
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    showLineNumbers: false,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, 'code', 'language', 'showLineNumbers', 'class')
+
+const html = ref('')
+const darkHtml = ref('')
+
+provide(CodeBlockKey, {
+  code: computed(() => props.code),
+})
+
+let requestId = 0
+let isUnmounted = false
+
+const updateHighlight = useDebounceFn(async (code: string, language: BundledLanguage, showLineNumbers: boolean) => {
+  requestId += 1
+  const currentId = requestId
+
+  try {
+    const [light, dark] = await highlightCode(code, language, showLineNumbers)
+
+    if (currentId === requestId && !isUnmounted) {
+      html.value = light
+      darkHtml.value = dark
+    }
+  }
+  catch (error) {
+    console.error('[CodeBlock] highlight failed', error)
+  }
+}, 100)
+
+watch(
+  () => [props.code, props.language, props.showLineNumbers] as const,
+  ([code, language, showLineNumbers]) => {
+    updateHighlight(code, language, showLineNumbers)
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(() => {
+  isUnmounted = true
+})
+</script>
+
+<template>
+  <div
+    data-slot="code-block"
+    v-bind="delegatedProps"
+    :class="cn('group relative w-full overflow-hidden rounded-md border bg-background text-foreground', props.class)"
+  >
+    <div class="relative">
+      <div
+        class="overflow-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+        v-html="html"
+      />
+      <div
+        class="hidden overflow-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+        v-html="darkHtml"
+      />
+      <div v-if="$slots.default" class="absolute top-2 right-2 flex items-center gap-2">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/ai-elements/code-block/CodeBlockCopyButton.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { CheckIcon, CopyIcon } from 'lucide-vue-next'
+import { computed, inject, onBeforeUnmount, ref } from 'vue'
+import { CodeBlockKey } from './context'
+
+const props = withDefaults(
+  defineProps<{
+    timeout?: number
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    timeout: 2000,
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'copy'): void
+  (event: 'error', error: Error): void
+}>()
+
+const delegatedProps = reactiveOmit(props, 'timeout', 'class')
+
+const context = inject(CodeBlockKey)
+
+if (!context)
+  throw new Error('CodeBlockCopyButton must be used within a <CodeBlock />')
+
+const { code } = context
+
+const isCopied = ref(false)
+let resetTimer: ReturnType<typeof setTimeout> | undefined
+
+const icon = computed(() => (isCopied.value ? CheckIcon : CopyIcon))
+
+async function copyToClipboard() {
+  if (typeof window === 'undefined' || !navigator?.clipboard?.writeText) {
+    const error = new Error('Clipboard API not available')
+    emit('error', error)
+    return
+  }
+
+  try {
+    await navigator.clipboard.writeText(code.value)
+    isCopied.value = true
+    emit('copy')
+
+    if (resetTimer) {
+      clearTimeout(resetTimer)
+    }
+
+    resetTimer = setTimeout(() => {
+      isCopied.value = false
+    }, props.timeout)
+  }
+  catch (error) {
+    emit('error', error instanceof Error ? error : new Error('Copy failed'))
+  }
+}
+
+onBeforeUnmount(() => {
+  if (resetTimer) {
+    clearTimeout(resetTimer)
+  }
+})
+</script>
+
+<template>
+  <Button
+    data-slot="code-block-copy-button"
+    v-bind="delegatedProps"
+    :class="cn('shrink-0', props.class)"
+    size="icon"
+    variant="ghost"
+    @click="copyToClipboard"
+  >
+    <slot>
+      <component :is="icon" :size="14" />
+    </slot>
+  </Button>
+</template>

package/src/components/ai-elements/code-block/context.ts

@@ -0,0 +1,7 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export interface CodeBlockContext {
+  code: ComputedRef<string>
+}
+
+export const CodeBlockKey: InjectionKey<CodeBlockContext> = Symbol('CodeBlock')

package/src/components/ai-elements/code-block/index.ts

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

package/src/components/ai-elements/code-block/utils.ts

@@ -0,0 +1,46 @@
+import type { BundledLanguage, ShikiTransformer } from 'shiki'
+import { codeToHtml } from 'shiki'
+
+const lineNumberTransformer: ShikiTransformer = {
+  name: 'line-numbers',
+  line(node: any, line: number) {
+    node.children.unshift({
+      type: 'element',
+      tagName: 'span',
+      properties: {
+        className: [
+          'inline-block',
+          'min-w-10',
+          'mr-4',
+          'text-right',
+          'select-none',
+          'text-muted-foreground',
+        ],
+      },
+      children: [{ type: 'text', value: String(line) }],
+    })
+  },
+}
+
+export async function highlightCode(
+  code: string,
+  language: BundledLanguage,
+  showLineNumbers = false,
+) {
+  const transformers: ShikiTransformer[] = showLineNumbers
+    ? [lineNumberTransformer]
+    : []
+
+  return await Promise.all([
+    codeToHtml(code, {
+      lang: language,
+      theme: 'one-light',
+      transformers,
+    }),
+    codeToHtml(code, {
+      lang: language,
+      theme: 'one-dark-pro',
+      transformers,
+    }),
+  ])
+}

package/src/components/ai-elements/confirmation/Confirmation.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ToolUIPart } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import type { ToolUIPartApproval } from './context'
+import { Alert } from '@/components/ui/alert'
+import { cn } from '@/lib/utils'
+import { provide, toRef } from 'vue'
+import { ConfirmationKey } from './context'
+
+const props = defineProps<{
+  approval?: ToolUIPartApproval
+  state: ToolUIPart['state']
+  class?: HTMLAttributes['class']
+}>()
+
+provide(ConfirmationKey, {
+  approval: toRef(props, 'approval'),
+  state: toRef(props, 'state'),
+})
+</script>
+
+<template>
+  <Alert
+    v-if="approval && state !== 'input-streaming' && state !== 'input-available'"
+    :class="cn('flex flex-col gap-2', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Alert>
+</template>

package/src/components/ai-elements/confirmation/ConfirmationAccepted.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useConfirmationContext } from './context'
+
+const { approval, state } = useConfirmationContext()
+</script>
+
+<template>
+  <template
+    v-if="
+      approval?.approved
+        && (state === 'approval-responded'
+          || state === 'output-denied'
+          || state === 'output-available')
+    "
+  >
+    <slot />
+  </template>
+</template>

package/src/components/ai-elements/confirmation/ConfirmationAction.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+</script>
+
+<template>
+  <Button class="h-8 px-3 text-sm" type="button" v-bind="$attrs">
+    <slot />
+  </Button>
+</template>

package/src/components/ai-elements/confirmation/ConfirmationActions.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useConfirmationContext } from './context'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { state } = useConfirmationContext()
+</script>
+
+<template>
+  <div
+    v-if="state === 'approval-requested'"
+    :class="
+      cn('flex items-center justify-end gap-2 self-end', props.class)
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ai-elements/confirmation/ConfirmationRejected.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useConfirmationContext } from './context'
+
+const { approval, state } = useConfirmationContext()
+</script>
+
+<template>
+  <template
+    v-if="
+      approval?.approved === false
+        && (state === 'approval-responded'
+          || state === 'output-denied'
+          || state === 'output-available')
+    "
+  >
+    <slot />
+  </template>
+</template>

package/src/components/ai-elements/confirmation/ConfirmationRequest.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useConfirmationContext } from './context'
+
+const { state } = useConfirmationContext()
+</script>
+
+<template>
+  <template v-if="state === 'approval-requested'">
+    <slot />
+  </template>
+</template>

package/src/components/ai-elements/confirmation/ConfirmationTitle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { AlertDescription } from '@/components/ui/alert'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <AlertDescription
+    :class="cn('inline', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </AlertDescription>
+</template>

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

@@ -0,0 +1,46 @@
+import type { ToolUIPart } from 'ai'
+import type { InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+
+export type ToolUIPartApproval
+  = | {
+    id: string
+    approved?: never
+    reason?: never
+  }
+  | {
+    id: string
+    approved: boolean
+    reason?: string
+  }
+  | {
+    id: string
+    approved: true
+    reason?: string
+  }
+  | {
+    id: string
+    approved: true
+    reason?: string
+  }
+  | {
+    id: string
+    approved: false
+    reason?: string
+  }
+  | undefined
+
+export interface ConfirmationContextValue {
+  approval: Ref<ToolUIPartApproval>
+  state: Ref<ToolUIPart['state']>
+}
+
+export const ConfirmationKey: InjectionKey<ConfirmationContextValue>
+  = Symbol('ConfirmationContext')
+
+export function useConfirmationContext() {
+  const context = inject<ConfirmationContextValue | null>(ConfirmationKey, null)
+  if (!context)
+    throw new Error('Confirmation components must be used within <Confirmation>')
+  return context
+}

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

@@ -0,0 +1,7 @@
+export { default as Confirmation } from './Confirmation.vue'
+export { default as ConfirmationAccepted } from './ConfirmationAccepted.vue'
+export { default as ConfirmationAction } from './ConfirmationAction.vue'
+export { default as ConfirmationActions } from './ConfirmationActions.vue'
+export { default as ConfirmationRejected } from './ConfirmationRejected.vue'
+export { default as ConfirmationRequest } from './ConfirmationRequest.vue'
+export { default as ConfirmationTitle } from './ConfirmationTitle.vue'

package/src/components/ai-elements/connection/Connection.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ConnectionLineProps } from '@vue-flow/core'
+import { computed } from 'vue'
+
+const props = defineProps<ConnectionLineProps>()
+
+const HALF = 0.5
+
+const pathD = computed(() => {
+  const { sourceX, sourceY, targetX, targetY } = props
+  const controlX1 = sourceX + (targetX - sourceX) * HALF
+  const controlX2 = sourceX + (targetX - sourceX) * HALF
+  return `M${sourceX},${sourceY} C ${controlX1},${sourceY} ${controlX2},${targetY} ${targetX},${targetY}`
+})
+</script>
+
+<template>
+  <g>
+    <path
+      class="animated"
+      fill="none"
+      stroke="var(--color-ring)"
+      :stroke-width="1"
+      :d="pathD"
+    />
+
+    <circle
+      :cx="targetX"
+      :cy="targetY"
+      fill="#fff"
+      :r="3"
+      stroke="var(--color-ring)"
+      :stroke-width="1"
+    />
+  </g>
+</template>

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

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

package/src/components/ai-elements/context/Context.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { LanguageModelUsage } from 'ai'
+import type { ModelId } from './context'
+import { HoverCard } from '@/components/ui/hover-card'
+import { computed, provide } from 'vue'
+import { ContextKey } from './context'
+
+interface Props {
+  usedTokens: number
+  maxTokens: number
+  usage?: LanguageModelUsage
+  modelId?: ModelId
+}
+
+const props = defineProps<Props>()
+
+provide(ContextKey, {
+  usedTokens: computed(() => props.usedTokens),
+  maxTokens: computed(() => props.maxTokens),
+  usage: computed(() => props.usage),
+  modelId: computed(() => props.modelId),
+})
+</script>
+
+<template>
+  <HoverCard :close-delay="0" :open-delay="0" v-bind="{ ...$attrs, ...props }">
+    <slot />
+  </HoverCard>
+</template>