@wzh-/ai-chat-example 1.0.0

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { FileUIPart } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
+import { PaperclipIcon, XIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+
+interface Props {
+  data: FileUIPart
+  class?: HTMLAttributes['class']
+}
+const props = defineProps<Props>()
+
+const emits = defineEmits<{
+  (e: 'remove'): void
+}>()
+
+const filename = computed(() => props.data.filename || '')
+const mediaType = computed(() =>
+  props.data.mediaType?.startsWith('image/') && props.data.url ? 'image' : 'file',
+)
+const isImage = computed(() => mediaType.value === 'image')
+const attachmentLabel = computed(() =>
+  filename.value || (isImage.value ? 'Image' : 'Attachment'),
+)
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'group relative size-24 overflow-hidden rounded-lg',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <template v-if="isImage">
+      <img
+        :src="props.data.url"
+        :alt="filename || 'attachment'"
+        class="size-full object-cover"
+        height="100"
+        width="100"
+      >
+      <Button
+        aria-label="Remove attachment"
+        class="absolute top-2 right-2 size-6 rounded-full bg-background/80 p-0 opacity-0 backdrop-blur-sm transition-opacity hover:bg-background group-hover:opacity-100 [&>svg]:size-3"
+        type="button"
+        variant="ghost"
+        @click.stop="emits('remove')"
+      >
+        <XIcon />
+        <span class="sr-only">Remove</span>
+      </Button>
+    </template>
+
+    <template v-else>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <div
+              class="flex size-full shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground"
+            >
+              <PaperclipIcon class="size-4" />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{{ attachmentLabel }}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <Button
+        aria-label="Remove attachment"
+        class="size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100 [&>svg]:size-3"
+        type="button"
+        variant="ghost"
+        @click.stop="emits('remove')"
+      >
+        <XIcon />
+        <span class="sr-only">Remove</span>
+      </Button>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,25 @@
+<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
+    v-if="$slots.default"
+    :class="
+      cn(
+        'ml-auto flex w-fit flex-wrap items-start gap-2',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { computed } from 'vue'
+
+interface Props {
+  src: string
+  name?: string
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const fallbackText = computed(() => props.name?.slice(0, 2) ?? 'ME')
+</script>
+
+<template>
+  <Avatar class="size-8 ring-1 ring-border" :class="[props.class]" v-bind="$attrs">
+    <AvatarImage alt="" class="mt-0 mb-0" :src="props.src" />
+    <AvatarFallback>{{ fallbackText }}</AvatarFallback>
+  </Avatar>
+</template>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { HTMLAttributes, VNode } from 'vue'
+import type { MessageBranchContextType } from './context'
+import { cn } from '@/lib/utils'
+import { provide, readonly, ref } from 'vue'
+import { MessageBranchKey } from './context'
+
+interface Props {
+  defaultBranch?: number
+  class?: HTMLAttributes['class']
+}
+const props = withDefaults(defineProps<Props>(), {
+  defaultBranch: 0,
+})
+
+const emits = defineEmits<{
+  (e: 'branchChange', branchIndex: number): void
+}>()
+
+const currentBranch = ref<number>(props.defaultBranch)
+const branches = ref<VNode[]>([])
+const totalBranches = ref<number>(0)
+
+function handleBranchChange(index: number) {
+  currentBranch.value = index
+  emits('branchChange', index)
+}
+
+function goToPrevious() {
+  if (totalBranches.value === 0)
+    return
+  const next = currentBranch.value > 0 ? currentBranch.value - 1 : totalBranches.value - 1
+  handleBranchChange(next)
+}
+
+function goToNext() {
+  if (totalBranches.value === 0)
+    return
+  const next = currentBranch.value < totalBranches.value - 1 ? currentBranch.value + 1 : 0
+  handleBranchChange(next)
+}
+
+function setBranches(count: number) {
+  totalBranches.value = count
+}
+
+const contextValue: MessageBranchContextType = {
+  currentBranch: readonly(currentBranch),
+  totalBranches: readonly(totalBranches),
+  goToPrevious,
+  goToNext,
+  branches,
+  setBranches,
+}
+
+provide(MessageBranchKey, contextValue)
+</script>
+
+<template>
+  <div
+    :class="cn('grid w-full gap-2 [&>div]:pb-0', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { computed, Fragment, isVNode, onMounted, useSlots, watch } from 'vue'
+import { useMessageBranchContext } from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+const slots = useSlots()
+
+const { currentBranch, setBranches } = useMessageBranchContext()
+
+const branchVNodes = computed(() => {
+  const nodes = slots.default?.() ?? []
+
+  const extractChildren = (node: any): any[] => {
+    if (isVNode(node) && node.type === Fragment) {
+      return Array.isArray(node.children) ? node.children : []
+    }
+    return [node]
+  }
+
+  const allNodes = nodes.flatMap(extractChildren)
+
+  return allNodes.filter((node) => {
+    if (!isVNode(node))
+      return false
+    return node.type && typeof node.type === 'object'
+  })
+})
+
+const sync = () => setBranches(branchVNodes.value.length)
+onMounted(sync)
+watch(branchVNodes, sync)
+
+const baseClasses = computed(() => cn('grid gap-2 overflow-hidden [&>div]:pb-0', props.class))
+</script>
+
+<template>
+  <template v-for="(node, index) in branchVNodes" :key="(node.key as any) ?? index">
+    <div
+      :class="cn(baseClasses, index === currentBranch ? 'block' : 'hidden')"
+      v-bind="$attrs"
+    >
+      <component :is="node" />
+    </div>
+  </template>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { ChevronRightIcon } from 'lucide-vue-next'
+import { useMessageBranchContext } from './context'
+
+const { goToNext, totalBranches } = useMessageBranchContext()
+</script>
+
+<template>
+  <Button
+    aria-label="Next branch"
+    :disabled="totalBranches <= 1"
+    size="icon-sm"
+    type="button"
+    variant="ghost"
+    v-bind="$attrs"
+    @click="goToNext"
+  >
+    <slot>
+      <ChevronRightIcon :size="14" />
+    </slot>
+  </Button>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { ButtonGroupText } from '@/components/ui/button-group'
+import { cn } from '@/lib/utils'
+import { useMessageBranchContext } from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const { currentBranch, totalBranches } = useMessageBranchContext()
+</script>
+
+<template>
+  <ButtonGroupText
+    :class="
+      cn(
+        'border-none bg-transparent text-muted-foreground shadow-none',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    {{ currentBranch + 1 }} of {{ totalBranches }}
+  </ButtonGroupText>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { ChevronLeftIcon } from 'lucide-vue-next'
+import { useMessageBranchContext } from './context'
+
+const { goToPrevious, totalBranches } = useMessageBranchContext()
+</script>
+
+<template>
+  <Button
+    aria-label="Previous branch"
+    :disabled="totalBranches <= 1"
+    size="icon-sm"
+    type="button"
+    variant="ghost"
+    v-bind="$attrs"
+    @click="goToPrevious"
+  >
+    <slot>
+      <ChevronLeftIcon :size="14" />
+    </slot>
+  </Button>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { UIMessage } from 'ai'
+import { ButtonGroup } from '@/components/ui/button-group'
+import { useMessageBranchContext } from './context'
+
+interface Props {
+  from: UIMessage['role']
+}
+defineProps<Props>()
+
+const { totalBranches } = useMessageBranchContext()
+</script>
+
+<template>
+  <ButtonGroup
+    v-if="totalBranches > 1"
+    class="[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md"
+    orientation="horizontal"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ButtonGroup>
+</template>

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

@@ -0,0 +1,26 @@
+<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(
+        'is-user:dark flex w-fit flex-col gap-2 overflow-hidden text-sm',
+        'group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground',
+        'group-[.is-assistant]:text-foreground',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { StreamMarkdown } from 'streamdown-vue'
+import { computed, useSlots } from 'vue'
+
+interface Props {
+  content?: string
+  class?: HTMLAttributes['class']
+}
+const props = defineProps<Props>()
+
+const slots = useSlots()
+const slotContent = computed<string | undefined>(() => {
+  const nodes = slots.default?.() || []
+  let text = ''
+  for (const node of nodes) {
+    if (typeof node.children === 'string')
+      text += node.children
+  }
+  return text || undefined
+})
+
+const md = computed(() => (slotContent.value ?? props.content ?? '') as string)
+</script>
+
+<template>
+  <StreamMarkdown
+    :shiki-theme="{
+      light: 'github-light',
+      dark: 'github-dark',
+    }"
+    :content="md"
+    :class="
+      cn(
+        'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  />
+</template>

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

@@ -0,0 +1,24 @@
+<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(
+        'mt-4 flex w-full items-center justify-between gap-4',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,22 @@
+import type { InjectionKey, Ref, VNode } from 'vue'
+import { inject } from 'vue'
+
+export interface MessageBranchContextType<T = VNode[]> {
+  currentBranch: Readonly<Ref<number>>
+  totalBranches: Readonly<Ref<number>>
+  goToPrevious: () => void
+  goToNext: () => void
+  branches: Ref<T>
+  setBranches: (count: number) => void
+}
+
+export const MessageBranchKey: InjectionKey<MessageBranchContextType>
+  = Symbol('MessageBranch')
+
+export function useMessageBranchContext(): MessageBranchContextType {
+  const ctx = inject(MessageBranchKey)
+  if (!ctx) {
+    throw new Error('Message Branch components must be used within Message Branch')
+  }
+  return ctx
+}

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

@@ -0,0 +1,15 @@
+export { default as Message } from './Message.vue'
+export { default as MessageAction } from './MessageAction.vue'
+export { default as MessageActions } from './MessageActions.vue'
+export { default as MessageAttachment } from './MessageAttachment.vue'
+export { default as MessageAttachments } from './MessageAttachments.vue'
+export { default as MessageAvatar } from './MessageAvatar.vue'
+export { default as MessageBranch } from './MessageBranch.vue'
+export { default as MessageBranchContent } from './MessageBranchContent.vue'
+export { default as MessageBranchNext } from './MessageBranchNext.vue'
+export { default as MessageBranchPage } from './MessageBranchPage.vue'
+export { default as MessageBranchPrevious } from './MessageBranchPrevious.vue'
+export { default as MessageBranchSelector } from './MessageBranchSelector.vue'
+export { default as MessageContent } from './MessageContent.vue'
+export { default as MessageResponse } from './MessageResponse.vue'
+export { default as MessageToolbar } from './MessageToolbar.vue'

package/src/components/ai-elements/model-selector/ModelSelector.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Dialog } from '@/components/ui/dialog'
+</script>
+
+<template>
+  <Dialog v-bind="$attrs">
+    <slot />
+  </Dialog>
+</template>

package/src/components/ai-elements/model-selector/ModelSelectorContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Command } from '@/components/ui/command'
+import { DialogContent, DialogTitle } from '@/components/ui/dialog'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  title?: string
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Model Selector',
+})
+</script>
+
+<template>
+  <DialogContent
+    :class="cn('p-0', props.class)"
+    v-bind="$attrs"
+  >
+    <DialogTitle class="sr-only">
+      {{ props.title }}
+    </DialogTitle>
+    <Command class="**:data-[slot=command-input-wrapper]:h-auto">
+      <slot />
+    </Command>
+  </DialogContent>
+</template>

package/src/components/ai-elements/model-selector/ModelSelectorDialog.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CommandDialog } from '@/components/ui/command'
+</script>
+
+<template>
+  <CommandDialog v-bind="$attrs">
+    <slot />
+  </CommandDialog>
+</template>

package/src/components/ai-elements/model-selector/ModelSelectorEmpty.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CommandEmpty } from '@/components/ui/command'
+</script>
+
+<template>
+  <CommandEmpty v-bind="$attrs">
+    <slot />
+  </CommandEmpty>
+</template>

package/src/components/ai-elements/model-selector/ModelSelectorGroup.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CommandGroup } from '@/components/ui/command'
+</script>
+
+<template>
+  <CommandGroup v-bind="$attrs">
+    <slot />
+  </CommandGroup>
+</template>

package/src/components/ai-elements/model-selector/ModelSelectorInput.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandInput } from '@/components/ui/command'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandInput
+    :class="cn('h-auto py-3.5', props.class)"
+    v-bind="$attrs"
+  />
+</template>

package/src/components/ai-elements/model-selector/ModelSelectorItem.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  // @ts-ignore
+import { CommandItem } from '@/components/ui/command'
+</script>
+
+<template>
+  <CommandItem v-bind="$attrs">
+    <slot />
+  </CommandItem>
+</template>

package/src/components/ai-elements/model-selector/ModelSelectorList.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CommandList } from '@/components/ui/command'
+</script>
+
+<template>
+  <CommandList v-bind="$attrs">
+    <slot />
+  </CommandList>
+</template>

package/src/components/ai-elements/model-selector/ModelSelectorLogo.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  provider: string
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <img
+    v-bind="$attrs"
+    :alt="`${props.provider} logo`"
+    :class="cn('size-3 dark:invert', props.class)"
+    height="12"
+    :src="`https://models.dev/logos/${props.provider}.svg`"
+    width="12"
+  >
+</template>

package/src/components/ai-elements/model-selector/ModelSelectorLogoGroup.vue

@@ -0,0 +1,24 @@
+<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(
+        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ai-elements/model-selector/ModelSelectorName.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>
+  <span
+    :class="cn('flex-1 truncate text-left', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </span>
+</template>