@wzh-/ai-chat-example 1.0.0

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

@@ -0,0 +1,5 @@
+export { default as Task } from './Task.vue'
+export { default as TaskContent } from './TaskContent.vue'
+export { default as TaskItem } from './TaskItem.vue'
+export { default as TaskItemFile } from './TaskItemFile.vue'
+export { default as TaskTrigger } from './TaskTrigger.vue'

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Collapsible } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Collapsible
+    :class="cn('not-prose mb-4 w-full rounded-md border', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Collapsible>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleContent } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CollapsibleContent
+    :class="
+      cn(
+        '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>
+</template>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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