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

package/src/components/ai-elements/tool/ToolHeader.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { ToolUIPart } from 'ai'
-import type { HTMLAttributes } from 'vue'
-import { CollapsibleTrigger } from '@/components/ui/collapsible'
-import { cn } from '@/lib/utils'
-import { ChevronDownIcon, WrenchIcon } from 'lucide-vue-next'
-import StatusBadge from './ToolStatusBadge.vue'
-
-const props = defineProps<{
-  title?: string
-  type: ToolUIPart['type']
-  state: ToolUIPart['state']
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <CollapsibleTrigger
-    :class="
-      cn(
-        'flex w-full items-center justify-between gap-4 p-3',
-        props.class,
-      )
-    "
-    v-bind="$attrs"
-  >
-    <div class="flex items-center gap-2">
-      <WrenchIcon class="size-4 text-muted-foreground" />
-      <span class="font-medium text-sm">
-        {{ props.title ?? props.type.split('-').slice(1).join(' ') }}
-      </span>
-      <StatusBadge :state="props.state" />
-    </div>
-    <ChevronDownIcon
-      class="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
-    />
-  </CollapsibleTrigger>
-</template>

package/src/components/ai-elements/tool/ToolInput.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { ToolUIPart } from 'ai'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { computed } from 'vue'
-import { CodeBlock } from '../code-block'
-
-const props = defineProps<{
-  input: ToolUIPart['input']
-  class?: HTMLAttributes['class']
-}>()
-
-const formattedInput = computed(() => {
-  return JSON.stringify(props.input, null, 2)
-})
-</script>
-
-<template>
-  <div
-    :class="cn('space-y-2 overflow-hidden p-4', props.class)"
-    v-bind="$attrs"
-  >
-    <h4
-      class="font-medium text-muted-foreground text-xs uppercase tracking-wide"
-    >
-      Parameters
-    </h4>
-    <div class="rounded-md bg-muted/50">
-      <CodeBlock :code="formattedInput" language="json" />
-    </div>
-  </div>
-</template>

package/src/components/ai-elements/tool/ToolOutput.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import type { ToolUIPart } from 'ai'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { computed } from 'vue'
-import { CodeBlock } from '../code-block'
-
-const props = defineProps<{
-  output: ToolUIPart['output']
-  errorText: ToolUIPart['errorText']
-  class?: HTMLAttributes['class']
-}>()
-
-const showOutput = computed(() => props.output || props.errorText)
-
-const isObjectOutput = computed(
-  () => typeof props.output === 'object' && props.output !== null,
-)
-const isStringOutput = computed(() => typeof props.output === 'string')
-
-const formattedOutput = computed(() => {
-  if (isObjectOutput.value) {
-    return JSON.stringify(props.output, null, 2)
-  }
-  return props.output as string
-})
-</script>
-
-<template>
-  <div
-    v-if="showOutput"
-    :class="cn('space-y-2 p-4', props.class)"
-    v-bind="$attrs"
-  >
-    <h4
-      class="font-medium text-muted-foreground text-xs uppercase tracking-wide"
-    >
-      {{ props.errorText ? "Error" : "Result" }}
-    </h4>
-    <div
-      :class="
-        cn(
-          'overflow-x-auto rounded-md text-xs [&_table]:w-full',
-          props.errorText
-            ? 'bg-destructive/10 text-destructive'
-            : 'bg-muted/50 text-foreground',
-        )
-      "
-    >
-      <div v-if="errorText" class="p-3">
-        {{ props.errorText }}
-      </div>
-
-      <CodeBlock
-        v-else-if="isObjectOutput"
-        :code="formattedOutput"
-        language="json"
-      />
-      <CodeBlock
-        v-else-if="isStringOutput"
-        :code="formattedOutput"
-        language="json"
-      />
-      <div v-else class="p-3">
-        {{ props.output }}
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/ai-elements/tool/ToolStatusBadge.vue

@@ -1,63 +0,0 @@
-<!-- StatusBadge.vue -->
-<script setup lang="ts">
-import type { ToolUIPart } from 'ai'
-import type { Component } from 'vue'
-import { Badge } from '@/components/ui/badge'
-import {
-  CheckCircleIcon,
-  CircleIcon,
-  ClockIcon,
-  XCircleIcon,
-} from 'lucide-vue-next'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  state: ToolUIPart['state']
-}>()
-
-const label = computed(() => {
-  const labels: Record<ToolUIPart['state'], string> = {
-    'input-streaming': 'Pending',
-    'input-available': 'Running',
-    'approval-requested': 'Awaiting Approval',
-    'approval-responded': 'Responded',
-    'output-available': 'Completed',
-    'output-error': 'Error',
-    'output-denied': 'Denied',
-  }
-  return labels[props.state]
-})
-
-const icon = computed<Component>(() => {
-  const icons: Record<ToolUIPart['state'], Component> = {
-    'input-streaming': CircleIcon,
-    'input-available': ClockIcon,
-    'approval-requested': ClockIcon,
-    'approval-responded': CheckCircleIcon,
-    'output-available': CheckCircleIcon,
-    'output-error': XCircleIcon,
-    'output-denied': XCircleIcon,
-  }
-  return icons[props.state]
-})
-
-const iconClass = computed(() => {
-  const classes: Record<string, boolean> = {
-    'size-4': true,
-    'animate-pulse': props.state === 'input-available',
-    'text-yellow-600': props.state === 'approval-requested',
-    'text-blue-600': props.state === 'approval-responded',
-    'text-green-600': props.state === 'output-available',
-    'text-red-600': props.state === 'output-error',
-    'text-orange-600': props.state === 'output-denied',
-  }
-  return classes
-})
-</script>
-
-<template>
-  <Badge class="gap-1.5 rounded-full text-xs" variant="secondary">
-    <component :is="icon" :class="iconClass" />
-    <span>{{ label }}</span>
-  </Badge>
-</template>

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

@@ -1,5 +0,0 @@
-export { default as Tool } from './Tool.vue'
-export { default as ToolContent } from './ToolContent.vue'
-export { default as ToolHeader } from './ToolHeader.vue'
-export { default as ToolInput } from './ToolInput.vue'
-export { default as ToolOutput } from './ToolOutput.vue'

package/src/components/ai-elements/toolbar/Toolbar.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Position } from '@vue-flow/core'
-import { NodeToolbar } from '@vue-flow/node-toolbar'
-import { reactiveOmit } from '@vueuse/core'
-
-const props = withDefaults(
-  defineProps<{
-    class?: HTMLAttributes['class']
-    position?: Position
-  }>(),
-  {
-    position: Position.Bottom,
-  },
-)
-
-const delegatedProps = reactiveOmit(props, 'class')
-</script>
-
-<template>
-  <NodeToolbar
-    data-slot="toolbar"
-    v-bind="delegatedProps"
-    :class="cn(
-      'flex items-center gap-1 rounded-sm border bg-background p-1.5',
-      props.class,
-    )"
-  >
-    <slot />
-  </NodeToolbar>
-</template>

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

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

package/src/components/ai-elements/web-preview/WebPreview.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { computed, ref } from 'vue'
-import {
-  provideWebPreviewContext,
-} from './context'
-
-interface Props extends /* @vue-ignore */ HTMLAttributes {
-  class?: HTMLAttributes['class']
-  defaultUrl?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  defaultUrl: '',
-})
-
-const emit = defineEmits<{
-  (e: 'update:url', value: string): void
-  (e: 'urlChange', value: string): void
-  (e: 'update:consoleOpen', value: boolean): void
-  (e: 'consoleOpenChange', value: boolean): void
-}>()
-
-const url = ref(props.defaultUrl)
-const consoleOpen = ref(false)
-
-function setUrl(value: string) {
-  url.value = value
-  emit('update:url', value)
-  emit('urlChange', value)
-}
-
-function setConsoleOpen(value: boolean) {
-  consoleOpen.value = value
-  emit('update:consoleOpen', value)
-  emit('consoleOpenChange', value)
-}
-
-provideWebPreviewContext({
-  url,
-  setUrl,
-  consoleOpen,
-  setConsoleOpen,
-})
-
-const vBind = computed(() => {
-  const { class: _, ...rest } = props
-  return {
-    class: cn('flex size-full flex-col rounded-lg border bg-card', props.class),
-    ...rest,
-  }
-})
-</script>
-
-<template>
-  <div v-bind="vBind">
-    <slot />
-  </div>
-</template>

package/src/components/ai-elements/web-preview/WebPreviewBody.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import type { IframeHTMLAttributes, VNodeChild } from 'vue'
-import { cn } from '@/lib/utils'
-import { computed } from 'vue'
-import { useWebPreviewContext } from './context'
-
-interface Props extends /* @vue-ignore */ IframeHTMLAttributes {
-  class?: IframeHTMLAttributes['class']
-  src?: string
-}
-
-const props = defineProps<Props>()
-
-defineSlots<{
-  loading: () => VNodeChild
-}>()
-
-const { url } = useWebPreviewContext()
-
-const frameSrc = computed(() => (props.src ?? url.value) || undefined)
-</script>
-
-<template>
-  <div class="flex-1">
-    <iframe
-      :class="cn('size-full', props.class)"
-      sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
-      :src="frameSrc"
-      title="Preview"
-      v-bind="$attrs"
-    />
-    <slot name="loading" />
-  </div>
-</template>

package/src/components/ai-elements/web-preview/WebPreviewConsole.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Button } from '@/components/ui/button'
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@/components/ui/collapsible'
-import { cn } from '@/lib/utils'
-import { ChevronDownIcon } from 'lucide-vue-next'
-import { computed } from 'vue'
-import { useWebPreviewContext } from './context'
-
-type LogLevel = 'log' | 'warn' | 'error'
-
-interface ConsoleLog {
-  level: LogLevel
-  message: string
-  timestamp: Date
-}
-
-interface Props {
-  class?: HTMLAttributes['class']
-  logs?: ConsoleLog[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  logs: () => [],
-})
-
-const context = useWebPreviewContext()
-
-const isConsoleOpen = computed(() => context.consoleOpen.value)
-
-function levelClass(level: LogLevel) {
-  if (level === 'error')
-    return 'text-destructive'
-  if (level === 'warn')
-    return 'text-yellow-600'
-  return 'text-foreground'
-}
-</script>
-
-<template>
-  <Collapsible
-    :class="cn('border-t bg-muted/50 font-mono text-sm', props.class)"
-    :open="isConsoleOpen"
-    v-bind="$attrs"
-    @update:open="context.setConsoleOpen"
-  >
-    <CollapsibleTrigger as-child>
-      <Button
-        class="flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50"
-        type="button"
-        variant="ghost"
-      >
-        Console
-        <ChevronDownIcon
-          :class="
-            cn(
-              'h-4 w-4 transition-transform duration-200',
-              isConsoleOpen ? 'rotate-180' : 'rotate-0',
-            )
-          "
-        />
-      </Button>
-    </CollapsibleTrigger>
-    <CollapsibleContent
-      class="px-4 pb-4 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
-    >
-      <div class="max-h-48 space-y-1 overflow-y-auto">
-        <p v-if="!props.logs.length" class="text-muted-foreground">
-          No console output
-        </p>
-        <template v-else>
-          <div
-            v-for="(log, index) in props.logs"
-            :key="`${log.timestamp.getTime?.() ?? index}-${index}`"
-            :class="cn('text-xs', levelClass(log.level))"
-          >
-            <span class="text-muted-foreground">
-              {{ log.timestamp.toLocaleTimeString() }}
-            </span>
-            {{ ' ' }}
-            {{ log.message }}
-          </div>
-        </template>
-        <slot />
-      </div>
-    </CollapsibleContent>
-  </Collapsible>
-</template>

package/src/components/ai-elements/web-preview/WebPreviewNavigation.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-interface Props extends /* @vue-ignore */ HTMLAttributes {
-  class?: HTMLAttributes['class']
-}
-
-const props = defineProps<Props>()
-</script>
-
-<template>
-  <div
-    v-bind="{
-      ...props,
-      class: cn('flex items-center gap-1 border-b p-2', props.class),
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ai-elements/web-preview/WebPreviewNavigationButton.vue

@@ -1,45 +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 {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-
-interface Props extends /* @vue-ignore */ HTMLAttributes {
-  size?: ButtonVariants['size']
-  variant?: ButtonVariants['variant']
-  tooltip?: string
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  tooltip: '',
-  disabled: false,
-  size: 'sm',
-  variant: 'ghost',
-})
-</script>
-
-<template>
-  <TooltipProvider>
-    <Tooltip>
-      <TooltipTrigger as-child>
-        <Button
-          class="h-8 w-8 p-0 hover:text-foreground"
-          type="button"
-          v-bind="{ ...props, ...$attrs }"
-        >
-          <slot />
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent v-if="props.tooltip">
-        <p>{{ props.tooltip }}</p>
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
-</template>

package/src/components/ai-elements/web-preview/WebPreviewUrl.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Input } from '@/components/ui/input'
-import { cn } from '@/lib/utils'
-import { ref, watch } from 'vue'
-import { useWebPreviewContext } from './context'
-
-interface Props {
-  class?: HTMLAttributes['class']
-  placeholder?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: 'Enter URL...',
-})
-
-const context = useWebPreviewContext()
-
-const inputValue = ref(context.url.value)
-
-watch(
-  () => context.url.value,
-  (value) => {
-    inputValue.value = value
-  },
-  { immediate: true },
-)
-
-function handleKeydown() {
-  context.setUrl(inputValue.value)
-}
-</script>
-
-<template>
-  <Input
-    v-model="inputValue"
-    data-testid="web-preview-url-input"
-    :class="cn('h-8 flex-1 text-sm', props.class)"
-    :placeholder="props.placeholder"
-    v-bind="$attrs"
-    @keydown.enter="handleKeydown"
-  />
-</template>

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

@@ -1,25 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-import { inject, provide } from 'vue'
-
-export interface WebPreviewContextValue {
-  url: Ref<string>
-  setUrl: (url: string) => void
-  consoleOpen: Ref<boolean>
-  setConsoleOpen: (open: boolean) => void
-}
-
-const WebPreviewContextKey: InjectionKey<WebPreviewContextValue> = Symbol('WebPreviewContext')
-
-export function provideWebPreviewContext(value: WebPreviewContextValue) {
-  provide(WebPreviewContextKey, value)
-}
-
-export function useWebPreviewContext() {
-  const context = inject(WebPreviewContextKey, null)
-
-  if (!context) {
-    throw new Error('WebPreview components must be used within WebPreview')
-  }
-
-  return context
-}

package/src/components/ai-elements/web-preview/index.ts

@@ -1,7 +0,0 @@
-export { provideWebPreviewContext, useWebPreviewContext } from './context'
-export { default as WebPreview } from './WebPreview.vue'
-export { default as WebPreviewBody } from './WebPreviewBody.vue'
-export { default as WebPreviewConsole } from './WebPreviewConsole.vue'
-export { default as WebPreviewNavigation } from './WebPreviewNavigation.vue'
-export { default as WebPreviewNavigationButton } from './WebPreviewNavigationButton.vue'
-export { default as WebPreviewUrl } from './WebPreviewUrl.vue'

package/src/components/ui/alert/Alert.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { AlertVariants } from "."
-import { cn } from "@/lib/utils"
-import { alertVariants } from "."
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  variant?: AlertVariants["variant"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="alert"
-    :class="cn(alertVariants({ variant }), props.class)"
-    role="alert"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ui/alert/AlertDescription.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="alert-description"
-    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ui/alert/AlertTitle.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="alert-title"
-    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ui/alert/index.ts

@@ -1,24 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
-
-export { default as Alert } from "./Alert.vue"
-export { default as AlertDescription } from "./AlertDescription.vue"
-export { default as AlertTitle } from "./AlertTitle.vue"
-
-export const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-)
-
-export type AlertVariants = VariantProps<typeof alertVariants>