@wzh-/ai-chat-example 1.0.0

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { getUsage } from 'tokenlens'
+import { computed } from 'vue'
+import { useContextValue } from './context'
+import TokensWithCost from './TokensWithCost.vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { usage, modelId } = useContextValue()
+
+const cacheTokens = computed(() => usage.value?.cachedInputTokens ?? 0)
+
+const cacheCostText = computed(() => {
+  if (!modelId.value || !cacheTokens.value)
+    return undefined
+
+  const cacheCost = getUsage({
+    modelId: modelId.value,
+    usage: { cacheReads: cacheTokens.value, input: 0, output: 0 },
+  }).costUSD?.totalUSD
+
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(cacheCost ?? 0)
+})
+</script>
+
+<template>
+  <slot v-if="$slots.default" />
+  <div
+    v-else-if="cacheTokens > 0"
+    :class="
+      cn('flex items-center justify-between text-xs', props.class)
+    "
+    v-bind="$attrs"
+  >
+    <span class="text-muted-foreground">Cache</span>
+    <TokensWithCost :cost-text="cacheCostText" :tokens="cacheTokens" />
+  </div>
+</template>

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

@@ -0,0 +1,20 @@
+<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('min-w-60 divide-y overflow-hidden p-0', props.class)
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </HoverCardContent>
+</template>

package/src/components/ai-elements/context/ContextContentBody.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>
+  <div :class="cn('w-full p-3', props.class)" v-bind="$attrs">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { getUsage } from 'tokenlens'
+import { computed } from 'vue'
+import { useContextValue } from './context'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { modelId, usage } = useContextValue()
+
+const totalCost = computed(() => {
+  if (!modelId.value)
+    return 0
+
+  const costUSD = getUsage({
+    modelId: modelId.value,
+    usage: {
+      input: usage.value?.inputTokens ?? 0,
+      output: usage.value?.outputTokens ?? 0,
+    },
+  }).costUSD?.totalUSD
+
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(costUSD ?? 0)
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs',
+        props.class,
+      )
+    "
+  >
+    <slot v-if="$slots.default" />
+
+    <template v-else>
+      <span class="text-muted-foreground">Total cost</span>
+      <span>{{ totalCost }}</span>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Progress } from '@/components/ui/progress'
+import { cn } from '@/lib/utils'
+import { computed } from 'vue'
+import { useContextValue } from './context'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const PERCENT_MAX = 100
+
+const { usedTokens, maxTokens } = useContextValue()
+
+const formatter = new Intl.NumberFormat('en-US', { notation: 'compact' })
+
+const usedPercent = computed(() => {
+  if (maxTokens.value === 0)
+    return 0
+  return usedTokens.value / maxTokens.value
+})
+const displayPct = computed(() => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'percent',
+    maximumFractionDigits: 1,
+  }).format(usedPercent.value)
+})
+const used = computed(() => formatter.format(usedTokens.value))
+const total = computed(() => formatter.format(maxTokens.value))
+</script>
+
+<template>
+  <div :class="cn('w-full space-y-2 p-3', props.class)">
+    <slot v-if="$slots.default" />
+
+    <template v-else>
+      <div class="flex items-center justify-between gap-3 text-xs">
+        <p>{{ displayPct }}</p>
+        <p class="font-mono text-muted-foreground">
+          {{ used }} / {{ total }}
+        </p>
+      </div>
+      <div class="space-y-2">
+        <Progress class="bg-muted" :model-value="usedPercent * PERCENT_MAX" />
+      </div>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useContextValue } from './context'
+
+const ICON_RADIUS = 10
+const ICON_VIEWBOX = 24
+const ICON_CENTER = 12
+const ICON_STROKE_WIDTH = 2
+
+const { usedTokens, maxTokens } = useContextValue()
+
+const circumference = 2 * Math.PI * ICON_RADIUS
+
+const usedPercent = computed(() => {
+  if (maxTokens.value === 0)
+    return 0
+  return usedTokens.value / maxTokens.value
+})
+
+const dashOffset = computed(() => {
+  return circumference * (1 - usedPercent.value)
+})
+
+const svgStyle = {
+  transformOrigin: 'center',
+  transform: 'rotate(-90deg)',
+}
+</script>
+
+<template>
+  <svg
+    aria-label="Model context usage"
+    height="20"
+    role="img"
+    style="color: currentcolor"
+    :viewBox="`0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`"
+    width="20"
+  >
+    <circle
+      :cx="ICON_CENTER"
+      :cy="ICON_CENTER"
+      fill="none"
+      opacity="0.25"
+      :r="ICON_RADIUS"
+      stroke="currentColor"
+      :stroke-width="ICON_STROKE_WIDTH"
+    />
+    <circle
+      :cx="ICON_CENTER"
+      :cy="ICON_CENTER"
+      fill="none"
+      opacity="0.7"
+      :r="ICON_RADIUS"
+      stroke="currentColor"
+      :stroke-dasharray="`${circumference} ${circumference}`"
+      :stroke-dashoffset="dashOffset"
+      stroke-linecap="round"
+      :stroke-width="ICON_STROKE_WIDTH"
+      :style="svgStyle"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { getUsage } from 'tokenlens'
+import { computed } from 'vue'
+import { useContextValue } from './context'
+import TokensWithCost from './TokensWithCost.vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { usage, modelId } = useContextValue()
+
+const inputTokens = computed(() => usage.value?.inputTokens ?? 0)
+
+const inputCostText = computed(() => {
+  if (!modelId.value || !inputTokens.value)
+    return undefined
+
+  const inputCost = getUsage({
+    modelId: modelId.value,
+    usage: { input: inputTokens.value, output: 0 },
+  }).costUSD?.totalUSD
+
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(inputCost ?? 0)
+})
+</script>
+
+<template>
+  <slot v-if="$slots.default" />
+
+  <div
+    v-else-if="inputTokens > 0"
+    :class="
+      cn('flex items-center justify-between text-xs', props.class)
+    "
+    v-bind="$attrs"
+  >
+    <span class="text-muted-foreground">Input</span>
+    <TokensWithCost :cost-text="inputCostText" :tokens="inputTokens" />
+  </div>
+</template>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { getUsage } from 'tokenlens'
+import { computed } from 'vue'
+import { useContextValue } from './context'
+import TokensWithCost from './TokensWithCost.vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { usage, modelId } = useContextValue()
+
+const outputTokens = computed(() => usage.value?.outputTokens ?? 0)
+
+const outputCostText = computed(() => {
+  if (!modelId.value || !outputTokens.value)
+    return undefined
+
+  const outputCost = getUsage({
+    modelId: modelId.value,
+    usage: { input: 0, output: outputTokens.value },
+  }).costUSD?.totalUSD
+
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(outputCost ?? 0)
+})
+</script>
+
+<template>
+  <slot v-if="$slots.default" />
+  <div
+    v-else-if="outputTokens > 0"
+    :class="
+      cn('flex items-center justify-between text-xs', props.class)
+    "
+    v-bind="$attrs"
+  >
+    <span class="text-muted-foreground">Output</span>
+    <TokensWithCost :cost-text="outputCostText" :tokens="outputTokens" />
+  </div>
+</template>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { getUsage } from 'tokenlens'
+import { computed } from 'vue'
+import { useContextValue } from './context'
+import TokensWithCost from './TokensWithCost.vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { usage, modelId } = useContextValue()
+
+const reasoningTokens = computed(() => usage.value?.reasoningTokens ?? 0)
+
+const reasoningCostText = computed(() => {
+  if (!modelId.value || !reasoningTokens.value)
+    return undefined
+
+  const reasoningCost = getUsage({
+    modelId: modelId.value,
+    usage: { reasoningTokens: reasoningTokens.value },
+  }).costUSD?.totalUSD
+
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(reasoningCost ?? 0)
+})
+</script>
+
+<template>
+  <slot v-if="$slots.default" />
+  <div
+    v-else-if="reasoningTokens > 0"
+    :class="
+      cn('flex items-center justify-between text-xs', props.class)
+    "
+    v-bind="$attrs"
+  >
+    <span class="text-muted-foreground">Reasoning</span>
+    <TokensWithCost
+      :cost-text="reasoningCostText"
+      :tokens="reasoningTokens"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { HoverCardTrigger } from '@/components/ui/hover-card'
+import { computed } from 'vue'
+import { useContextValue } from './context'
+import ContextIcon from './ContextIcon.vue'
+
+const { usedTokens, maxTokens } = useContextValue()
+
+const renderedPercent = computed(() => {
+  if (maxTokens.value === 0)
+    return '0%'
+  const usedPercent = usedTokens.value / maxTokens.value
+  return new Intl.NumberFormat('en-US', {
+    style: 'percent',
+    maximumFractionDigits: 1,
+  }).format(usedPercent)
+})
+</script>
+
+<template>
+  <HoverCardTrigger as-child>
+    <slot v-if="$slots.default" />
+
+    <Button v-else type="button" variant="ghost" v-bind="$attrs">
+      <span class="font-medium text-muted-foreground">
+        {{ renderedPercent }}
+      </span>
+      <ContextIcon />
+    </Button>
+  </HoverCardTrigger>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  tokens?: number
+  costText?: string
+}>()
+
+const formattedTokens = computed(() => {
+  return props.tokens === undefined
+    ? '—'
+    : new Intl.NumberFormat('en-US', {
+        notation: 'compact',
+      }).format(props.tokens)
+})
+</script>
+
+<template>
+  <span>
+    {{ formattedTokens }}
+    <span v-if="costText" class="ml-2 text-muted-foreground">
+      • {{ costText }}
+    </span>
+  </span>
+</template>

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

@@ -0,0 +1,23 @@
+import type { LanguageModelUsage } from 'ai'
+import type { ComputedRef, InjectionKey } from 'vue'
+import { inject } from 'vue'
+
+export type ModelId = string
+
+export interface ContextContextValue {
+  usedTokens: ComputedRef<number>
+  maxTokens: ComputedRef<number>
+  usage: ComputedRef<LanguageModelUsage | undefined>
+  modelId: ComputedRef<ModelId | undefined>
+}
+
+export const ContextKey: InjectionKey<ContextContextValue>
+  = Symbol('ContextContext')
+
+export function useContextValue(): ContextContextValue {
+  const context = inject<ContextContextValue>(ContextKey)
+  if (!context) {
+    throw new Error('Context components must be used within Context')
+  }
+  return context
+}

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

@@ -0,0 +1,12 @@
+export { default as Context } from './Context.vue'
+export { default as ContextCacheUsage } from './ContextCacheUsage.vue'
+export { default as ContextContent } from './ContextContent.vue'
+export { default as ContextContentBody } from './ContextContentBody.vue'
+export { default as ContextContentFooter } from './ContextContentFooter.vue'
+export { default as ContextContentHeader } from './ContextContentHeader.vue'
+export { default as ContextIcon } from './ContextIcon.vue'
+export { default as ContextInputUsage } from './ContextInputUsage.vue'
+export { default as ContextOutputUsage } from './ContextOutputUsage.vue'
+export { default as ContextReasoningUsage } from './ContextReasoningUsage.vue'
+export { default as ContextTrigger } from './ContextTrigger.vue'
+export { default as TokensWithCost } from './TokensWithCost.vue'

package/src/components/ai-elements/controls/Controls.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Controls as ControlsPrimitive } from '@vue-flow/controls'
+import { reactiveOmit } from '@vueuse/core'
+import '@vue-flow/controls/dist/style.css'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ControlsPrimitive
+    data-slot="controls"
+    v-bind="delegatedProps"
+    :class="cn(
+      'gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!',
+      '[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!',
+      props.class,
+    )"
+  />
+</template>

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

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

package/src/components/ai-elements/conversation/Conversation.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { StickToBottom } from 'vue-stick-to-bottom'
+
+interface Props {
+  ariaLabel?: string
+  class?: HTMLAttributes['class']
+  initial?: boolean | 'instant' | { damping?: number, stiffness?: number, mass?: number }
+  resize?: 'instant' | { damping?: number, stiffness?: number, mass?: number }
+  damping?: number
+  stiffness?: number
+  mass?: number
+  anchor?: 'auto' | 'none'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  ariaLabel: 'Conversation',
+  initial: true,
+  damping: 0.7,
+  stiffness: 0.05,
+  mass: 1.25,
+  anchor: 'none',
+})
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <StickToBottom
+    v-bind="delegatedProps"
+    :class="cn('relative flex-1 overflow-y-hidden', props.class)"
+    role="log"
+  >
+    <slot />
+  </StickToBottom>
+</template>

package/src/components/ai-elements/conversation/ConversationContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const classes = computed(() => [
+  'flex flex-col gap-8 p-4',
+  props.class,
+])
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>

package/src/components/ai-elements/conversation/ConversationEmptyState.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  title?: string
+  description?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'No messages yet',
+  description: 'Start a conversation to see messages here',
+})
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'flex size-full flex-col items-center justify-center gap-3 p-8 text-center',
+      props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot>
+      <div v-if="$slots.icon" class="text-muted-foreground">
+        <slot name="icon" />
+      </div>
+
+      <div class="space-y-1">
+        <h3 class="font-medium text-sm">
+          {{ props.title }}
+        </h3>
+        <p v-if="props.description" class="text-muted-foreground text-sm">
+          {{ props.description }}
+        </p>
+      </div>
+    </slot>
+  </div>
+</template>

package/src/components/ai-elements/conversation/ConversationScrollButton.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { ArrowDownIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { useStickToBottomContext } from 'vue-stick-to-bottom'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+const { isAtBottom, scrollToBottom } = useStickToBottomContext()
+const showScrollButton = computed(() => !isAtBottom.value)
+
+function handleClick() {
+  scrollToBottom()
+}
+</script>
+
+<template>
+  <Button
+    v-if="showScrollButton"
+    :class="cn('absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full', props.class)"
+    size="icon"
+    type="button"
+    variant="outline"
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+    <ArrowDownIcon class="size-4" />
+  </Button>
+</template>

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

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