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

package/src/components/ai-elements/artifact/ArtifactAction.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import type { ButtonVariants } from '@/components/ui/button'
-import type { LucideIcon } from 'lucide-vue-next'
-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 { computed } from 'vue'
-
-interface ArtifactActionProps {
-  class?: HTMLAttributes['class']
-  tooltip?: string
-  label?: string
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  icon?: LucideIcon
-}
-
-const props = withDefaults(defineProps<ArtifactActionProps>(), {
-  variant: 'ghost',
-  size: 'sm',
-})
-
-const classes = computed(() => cn(
-  'size-8 p-0 text-muted-foreground hover:text-foreground',
-  props.class,
-))
-</script>
-
-<template>
-  <TooltipProvider v-if="props.tooltip">
-    <Tooltip>
-      <TooltipTrigger as-child>
-        <Button
-          type="button"
-          v-bind="{
-            ...props,
-            class: classes,
-          }"
-        >
-          <component
-            :is="props.icon"
-            v-if="props.icon"
-            class="size-4"
-          />
-          <slot v-else />
-          <span class="sr-only">{{ props.label || props.tooltip }}</span>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>{{ props.tooltip }}</p>
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
-
-  <Button
-    v-else
-    type="button"
-    v-bind="{
-      ...props,
-      class: classes,
-    }"
-  >
-    <component
-      :is="props.icon"
-      v-if="props.icon"
-      class="size-4"
-    />
-    <slot v-else />
-    <span class="sr-only">{{ props.label || props.tooltip }}</span>
-  </Button>
-</template>

package/src/components/ai-elements/artifact/ArtifactActions.vue

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

package/src/components/ai-elements/artifact/ArtifactClose.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { ButtonVariants } from '@/components/ui/button'
-import type { HTMLAttributes } from 'vue'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-import { X } from 'lucide-vue-next'
-import { computed } from 'vue'
-
-interface ArtifactCloseProps {
-  class?: HTMLAttributes['class']
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-}
-
-const props = withDefaults(defineProps<ArtifactCloseProps>(), {
-  variant: 'ghost',
-  size: 'sm',
-})
-
-const classes = computed(() => cn(
-  'size-8 p-0 text-muted-foreground hover:text-foreground',
-  props.class,
-))
-</script>
-
-<template>
-  <Button
-    type="button"
-    v-bind="{
-      ...props,
-      class: classes,
-    }"
-  >
-    <slot>
-      <X class="size-4" />
-    </slot>
-    <span class="sr-only">Close</span>
-  </Button>
-</template>

package/src/components/ai-elements/artifact/ArtifactContent.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const classes = computed(() => cn('flex-1 overflow-auto p-4', props.class))
-</script>
-
-<template>
-  <div
-    :class="classes"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ai-elements/artifact/ArtifactDescription.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const classes = computed(() => cn('text-muted-foreground text-sm', props.class))
-</script>
-
-<template>
-  <p
-    :class="classes"
-    v-bind="$attrs"
-  >
-    <slot />
-  </p>
-</template>

package/src/components/ai-elements/artifact/ArtifactHeader.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const classes = computed(() => cn(
-  'flex items-center justify-between border-b bg-muted/50 px-4 py-3',
-  props.class,
-))
-</script>
-
-<template>
-  <div
-    :class="classes"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ai-elements/artifact/ArtifactTitle.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const classes = computed(() => cn('font-medium text-foreground text-sm', props.class))
-</script>
-
-<template>
-  <p
-    v-bind="$attrs"
-    :class="classes"
-  >
-    <slot />
-  </p>
-</template>

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

@@ -1,8 +0,0 @@
-export { default as Artifact } from './Artifact.vue'
-export { default as ArtifactAction } from './ArtifactAction.vue'
-export { default as ArtifactActions } from './ArtifactActions.vue'
-export { default as ArtifactClose } from './ArtifactClose.vue'
-export { default as ArtifactContent } from './ArtifactContent.vue'
-export { default as ArtifactDescription } from './ArtifactDescription.vue'
-export { default as ArtifactHeader } from './ArtifactHeader.vue'
-export { default as ArtifactTitle } from './ArtifactTitle.vue'

package/src/components/ai-elements/canvas/Canvas.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import type { FlowEmits, FlowProps, FlowSlots } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { VueFlow } from '@vue-flow/core'
-import { useForwardPropsEmits } from 'reka-ui'
-import '@vue-flow/core/dist/style.css'
-import '@vue-flow/core/dist/theme-default.css'
-
-const props = withDefaults(defineProps<FlowProps>(), {
-  deleteKeyCode: () => ['Backspace', 'Delete'],
-  fitViewOnInit: true,
-  panOnDrag: false,
-  panOnScroll: true,
-  selectNodesOnDrag: true,
-  zoomOnDoubleClick: false,
-})
-
-const emits = defineEmits<FlowEmits>()
-const slots = defineSlots<FlowSlots>()
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <VueFlow data-slot="canvas" v-bind="forwarded">
-    <Background />
-
-    <template v-if="slots['connection-line']" #connection-line="connectionLineProps">
-      <slot name="connection-line" v-bind="connectionLineProps" />
-    </template>
-
-    <template v-if="slots['zoom-pane']" #zoom-pane>
-      <slot name="zoom-pane" />
-    </template>
-
-    <slot />
-  </VueFlow>
-</template>

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

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

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

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes, Ref } from 'vue'
-import { cn } from '@/lib/utils'
-import { useVModel } from '@vueuse/core'
-import { provide } from 'vue'
-import { ChainOfThoughtContextKey } from './context'
-
-interface ChainOfThoughtProps {
-  modelValue?: boolean
-  defaultOpen?: boolean
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(
-  defineProps<ChainOfThoughtProps>(),
-  {
-    defaultOpen: false,
-    modelValue: undefined,
-  },
-)
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-}>()
-
-const isOpen = useVModel(props, 'modelValue', emit, {
-  defaultValue: props.defaultOpen,
-  passive: true,
-})
-
-provide(ChainOfThoughtContextKey, isOpen as Ref<boolean>)
-</script>
-
-<template>
-  <div
-    :class="cn('not-prose max-w-prose space-y-4', props.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>

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

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import {
-  Collapsible,
-  CollapsibleContent,
-} from '@/components/ui/collapsible'
-import { cn } from '@/lib/utils'
-import { useChainOfThought } from './context'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const { isOpen } = useChainOfThought()
-</script>
-
-<template>
-  <Collapsible :open="isOpen">
-    <CollapsibleContent
-      :class="
-        cn(
-          'mt-2 space-y-3',
-          'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
-          props.class,
-        )
-      "
-      v-bind="$attrs"
-    >
-      <slot />
-    </CollapsibleContent>
-  </Collapsible>
-</template>

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

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import type { HtmlHTMLAttributes } from 'vue'
-import {
-  Collapsible,
-  CollapsibleTrigger,
-} from '@/components/ui/collapsible'
-import { cn } from '@/lib/utils'
-import { BrainIcon, ChevronDownIcon } from 'lucide-vue-next'
-import { useChainOfThought } from './context'
-
-const props = defineProps<{
-  class?: HtmlHTMLAttributes['class']
-}>()
-
-const { isOpen, setIsOpen } = useChainOfThought()
-</script>
-
-<template>
-  <Collapsible :open="isOpen" @update:open="setIsOpen">
-    <CollapsibleTrigger
-      :class="
-        cn(
-          'flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground',
-          props.class,
-        )
-      "
-      v-bind="$attrs"
-    >
-      <BrainIcon class="size-4" />
-      <span class="flex-1 text-left">
-        <slot>Chain of Thought</slot>
-      </span>
-      <ChevronDownIcon
-        :class="
-          cn(
-            'size-4 transition-transform',
-            isOpen ? 'rotate-180' : 'rotate-0',
-          )
-        "
-      />
-    </CollapsibleTrigger>
-  </Collapsible>
-</template>

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

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  caption?: string
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    :class="cn('mt-2 space-y-2', props.class)"
-    v-bind="$attrs"
-  >
-    <div
-      class="relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3"
-    >
-      <slot />
-    </div>
-    <p v-if="caption" class="text-muted-foreground text-xs">
-      {{ props.caption }}
-    </p>
-  </div>
-</template>

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

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Badge } from '@/components/ui/badge'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <Badge
-    :class="
-      cn(
-        'gap-1 px-2 py-0.5 font-normal text-xs',
-        props.class,
-      )
-    "
-    variant="secondary"
-    v-bind="$attrs"
-  >
-    <slot />
-  </Badge>
-</template>

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

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  class?: HtmlHTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    :class="cn('flex items-center gap-2', props.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>

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

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

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

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

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

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

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

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