feat: add context component

apps/www/plugins/ai-elements.ts

@@ -7,6 +7,7 @@ import {
   Checkpoint,
   CodeBlock,
   CodeBlockDark,
+  Context,
   Confirmation,
   ConfirmationAccepted,
   ConfirmationRejected,
@@ -78,6 +79,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('CodeBlockDark', CodeBlockDark)
   vueApp.component('Checkpoint', Checkpoint)
   vueApp.component('Workflow', Workflow)
+  vueApp.component('Context', Context)
   vueApp.component('Confirmation', Confirmation)
   vueApp.component('ConfirmationAccepted', ConfirmationAccepted)
   vueApp.component('ConfirmationRejected', ConfirmationRejected)

packages/elements/package.json

@@ -18,6 +18,7 @@
     "motion-v": "^1.7.3",
     "shiki": "^3.14.0",
     "streamdown-vue": "^1.0.21",
+    "tokenlens": "^1.3.1",
     "vue": "^3.5.22",
     "vue-stick-to-bottom": "^0.1.0"
   },

packages/elements/src/context/Context.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { LanguageModelUsage } from 'ai'
+import type { ModelId } from './context'
+import { HoverCard } from '@repo/shadcn-vue/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>

packages/elements/src/context/ContextCacheUsage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { getUsage } from 'tokenlens'
+import { computed, useSlots } from 'vue'
+import { useContextValue } from './context'
+import TokensWithCost from './TokensWithCost.vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { usage, modelId } = useContextValue()
+const slots = useSlots()
+
+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>

packages/elements/src/context/ContextContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { HoverCardContent } from '@repo/shadcn-vue/components/ui/hover-card'
+import { cn } from '@repo/shadcn-vue/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>

packages/elements/src/context/ContextContentBody.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/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>

packages/elements/src/context/ContextContentFooter.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { getUsage } from 'tokenlens'
+import { computed, useSlots } from 'vue'
+import { useContextValue } from './context'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { modelId, usage } = useContextValue()
+const slots = useSlots()
+
+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>

packages/elements/src/context/ContextContentHeader.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Progress } from '@repo/shadcn-vue/components/ui/progress'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useSlots } from 'vue'
+import { useContextValue } from './context'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const PERCENT_MAX = 100
+
+const { usedTokens, maxTokens } = useContextValue()
+const slots = useSlots()
+
+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>

packages/elements/src/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>

packages/elements/src/context/ContextInputUsage.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { getUsage } from 'tokenlens'
+import { computed, useSlots } from 'vue'
+import { useContextValue } from './context'
+import TokensWithCost from './TokensWithCost.vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { usage, modelId } = useContextValue()
+const slots = useSlots()
+
+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>

packages/elements/src/context/ContextOutputUsage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { getUsage } from 'tokenlens'
+import { computed, useSlots } from 'vue'
+import { useContextValue } from './context'
+import TokensWithCost from './TokensWithCost.vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { usage, modelId } = useContextValue()
+const slots = useSlots()
+
+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>