@wzh-/ai-chat-example 1.0.0 → 1.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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