@wzh-/ai-chat-example 1.0.0

package/src/components/ChatConversation/ChatConversation.vue

@@ -0,0 +1,97 @@
+<template>
+  <Conversation class="mb-4">
+    <ConversationContent>
+      <Message v-for="(message, messageIndex) in messages" :key="message.id" :from="message.role">
+        <MessageContent>
+          <template v-for="(part, partIndex) in message.parts" :key="`${message.id}-${part.type}-${partIndex}`">
+            <template v-if="part.type === 'text'">
+              <MessageResponse :content="part.text" />
+            </template>
+            <template v-else-if="part.type === 'reasoning'">
+              <Reasoning class="w-full" :is-streaming="isStreamingPart(messageIndex, partIndex)">
+                <ReasoningTrigger />
+                <ReasoningContent :content="part.text" />
+              </Reasoning>
+            </template>
+            <template v-else-if="part.type === 'file'">
+              <img v-if="part.mediaType.startsWith('image/')" :alt="part.filename" :src="part.url" />
+              <div v-else>{{ part.filename }}</div>
+            </template>
+            <template v-else-if="part.type === 'source-document'">
+              <div>{{ part.title }}</div>
+            </template>
+            <template v-else-if="part.type === 'source-url'">
+              <Sources>
+                <SourcesContent>
+                  <Source :href="part.url" :title="part.title ?? part.url" />
+                </SourcesContent>
+              </Sources>
+            </template>
+            <template v-else-if="part.type === 'step-start'"></template>
+            <template v-else-if="isDataPart(part.type)">
+              <CodeBlock :code="JSON.stringify(dataPart(part).data ?? {}, null, 2)" language="json" />
+            </template>
+            <template v-else-if="part.type === 'dynamic-tool'">
+              <Tool default-open>
+                <ToolHeader :state="part.state" :title="part.toolName" type="tool-dynamic-tool" />
+                <ToolContent>
+                  <ToolInput :input="part.input" />
+                  <ToolOutput :output="part.output" :error-text="part.errorText" />
+                </ToolContent>
+              </Tool>
+            </template>
+            <template v-else-if="isToolPart(part.type)">
+              <!-- 这里可以根据 part.type 来决定使用什么组件, 可以自定义 -->
+              <Tool class="w-full" :default-open="false">
+                <ToolHeader :state="toolPart(part).state" :type="part.type" />
+                <ToolContent>
+                  <ToolInput :input="toolPart(part).input" />
+                  <ToolOutput :output="toolPart(part).output" :error-text="toolPart(part).errorText" />
+                </ToolContent>
+              </Tool>
+            </template>
+          </template>
+        </MessageContent>
+      </Message>
+      <Loader v-if="status === 'submitted'" />
+    </ConversationContent>
+    <ConversationScrollButton />
+  </Conversation>
+</template>
+
+<script setup lang='ts'>
+import type { DataUIPart, ToolUIPart, UIDataTypes, UIMessagePart, UITools ,UIMessage,ChatStatus} from "ai";
+
+const props = defineProps<{messages:UIMessage[],status:ChatStatus}>();
+
+const messages = computed(() => props.messages);
+const status = computed(() => props.status);
+
+function isStreamingPart(messageIndex: number, partIndex: number) {
+  const lastMsg = messages.value[messages.value.length - 1];
+  const msg = messages.value[messageIndex];
+
+  if (!lastMsg || msg?.id !== lastMsg.id) return false;
+
+  const isLastPart =
+    msg?.parts?.length > 0 && partIndex === msg?.parts?.length - 1;
+  return status.value === "streaming" && isLastPart;
+}
+
+function isToolPart(partType: string): partType is `tool-${string}` {
+  return partType.startsWith("tool-");
+}
+
+function isDataPart(partType: string): partType is `data-${string}` {
+  return partType.startsWith("data-");
+}
+
+function toolPart(part: UIMessagePart<UIDataTypes, UITools>) {
+  return part as ToolUIPart<UITools>;
+}
+
+function dataPart(part: UIMessagePart<UIDataTypes, UITools>) {
+  return part as DataUIPart<UIDataTypes>;
+}
+</script>
+<style scoped lang='scss'></style>

package/src/components/ChatConversation/index.ts

@@ -0,0 +1 @@
+export { default as ChatConversation } from "./ChatConversation.vue";

package/src/components/ChatPromptInputProvider/ChatPromptInputProvider.vue

@@ -0,0 +1,47 @@
+<template>
+  <PromptInputProvider @submit="handleSubmit" :uploadImages="uploadImages">
+    <PromptInput multiple global-drop class="w-full">
+      <PromptInputAttachments>
+        <template #default="{ file }">
+          <PromptInputAttachment :file="file" />
+        </template>
+      </PromptInputAttachments>
+
+      <PromptInputBody>
+        <PromptInputTextarea placeholder="你想知道什么?" />
+      </PromptInputBody>
+
+      <PromptInputFooter>
+        <PromptInputTools>
+          <PromptInputActionMenu>
+            <!-- icon -->
+            <PromptInputActionMenuTrigger />
+            <PromptInputActionMenuContent>
+              <PromptInputActionAddAttachments />
+            </PromptInputActionMenuContent>
+          </PromptInputActionMenu>
+        </PromptInputTools>
+
+        <PromptInputSubmit :status="status" />
+      </PromptInputFooter>
+    </PromptInput>
+  </PromptInputProvider>
+</template>
+
+<script setup lang='ts'>
+import type { ChatStatus } from "ai";
+
+const props = defineProps<{
+  status: ChatStatus,
+  uploadImages?: (files: File[]) => { name: string; path: string }[] | Promise<{ name: string; path: string }[]>
+}>();
+
+const status = computed(() => props.status);
+
+const emits = defineEmits(['submit']);
+
+const handleSubmit = (msg: { text: string; files: any[]; }) => {
+  emits('submit', msg);
+}
+
+</script>

package/src/components/ChatPromptInputProvider/index.ts

@@ -0,0 +1 @@
+export { default as ChatPromptInputProvider } from "./ChatPromptInputProvider.vue";

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

@@ -0,0 +1,23 @@
+<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 flex-col overflow-hidden rounded-lg border bg-background shadow-sm',
+  props.class,
+))
+</script>
+
+<template>
+  <div
+    :class="classes"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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