@wzh-/ai-chat-example 1.0.0

package/src/components/ai-elements/prompt-input/PromptInputTextarea.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { InputGroupTextarea } from "@/components/ui/input-group";
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+import { computed, ref } from "vue";
+import { usePromptInput } from "./context";
+
+type PromptInputTextareaProps = InstanceType<
+  typeof InputGroupTextarea
+>["$props"];
+
+interface Props extends /* @vue-ignore */ PromptInputTextareaProps {
+  class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+
+const { textInput, setTextInput, submitForm, addFiles, files, removeFile } =
+  usePromptInput();
+const isComposing = ref(false);
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.key === "Enter") {
+    if (isComposing.value || e.shiftKey) return;
+    e.preventDefault();
+    submitForm();
+  }
+
+  // Remove last attachment on backspace if input is empty
+  if (
+    e.key === "Backspace" &&
+    textInput.value === "" &&
+    files.value.length > 0
+  ) {
+    const lastFile = files.value[files.value.length - 1];
+    if (lastFile) {
+      removeFile(lastFile.id);
+    }
+  }
+}
+
+function handlePaste(e: ClipboardEvent) {
+  const items = e.clipboardData?.items;
+  if (!items) return;
+
+  const pastedFiles: File[] = [];
+  for (const item of Array.from(items)) {
+    if (item.kind === "file") {
+      const file = item.getAsFile();
+      if (file) pastedFiles.push(file);
+    }
+  }
+
+  if (pastedFiles.length > 0) {
+    e.preventDefault();
+    addFiles(pastedFiles);
+  }
+}
+
+const modelValue = computed({
+  get: () => textInput.value,
+  set: (val) => setTextInput(val),
+});
+</script>
+
+<template>
+  <InputGroupTextarea
+    v-model="modelValue"
+    placeholder="What would you like to know?"
+    name="message"
+    :class="cn('field-sizing-content max-h-48 min-h-16', props.class)"
+    v-bind="props"
+    @keydown="handleKeyDown"
+    @paste="handlePaste"
+    @compositionstart="isComposing = true"
+    @compositionend="isComposing = false"
+  />
+</template>

package/src/components/ai-elements/prompt-input/PromptInputTools.vue

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

package/src/components/ai-elements/prompt-input/context.ts

@@ -0,0 +1,223 @@
+import type { AttachmentFile, PromptInputContext } from "./types";
+import { nanoid } from "nanoid";
+import { inject, onBeforeUnmount, provide, ref } from "vue";
+import { PROMPT_INPUT_KEY } from "./types";
+import request from "@/request";
+
+export function usePromptInputProvider(
+  props: {
+    initialInput?: string;
+    maxFiles?: number;
+    maxFileSize?: number;
+    accept?: string;
+    onSubmit?: (message: {
+      text: string;
+      files: any[];
+    }) => void | Promise<void>;
+    onError?: (err: { code: string; message: string }) => void;
+  },
+  uploadImages?: (
+    files: File[]
+  ) =>
+    | { name: string; path: string }[]
+    | Promise<{ name: string; path: string }[]>
+) {
+  const textInput = ref(props.initialInput || "");
+
+  const files = ref<AttachmentFile[]>([]);
+  const fileInputRef = ref<HTMLInputElement | null>(null);
+  const isLoading = ref(false);
+
+  // Cleanup object URLs to avoid memory leaks
+  onBeforeUnmount(() => {
+    files.value.forEach((f) => {
+      if (f.url && f.url.startsWith("blob:")) {
+        URL.revokeObjectURL(f.url);
+      }
+    });
+  });
+
+  const setTextInput = (val: string) => {
+    textInput.value = val;
+  };
+
+  const matchesAccept = (file: File) => {
+    if (!props.accept || props.accept.trim() === "") return true;
+    if (props.accept.includes("image/*")) return file.type.startsWith("image/");
+    // Add more mime-type checks here if necessary
+    return true;
+  };
+
+  const addFiles = async (incoming: File[] | FileList) => {
+    const fileList = Array.from(incoming);
+
+    // Validate Accept
+    const accepted = fileList.filter(matchesAccept);
+    if (fileList.length && accepted.length === 0) {
+      props.onError?.({
+        code: "accept",
+        message: "No files match the accepted types.",
+      });
+      return;
+    }
+
+    // Validate Size
+    const withinSize = (f: File) =>
+      props.maxFileSize ? f.size <= props.maxFileSize : true;
+    const sized = accepted.filter(withinSize);
+    if (accepted.length > 0 && sized.length === 0) {
+      props.onError?.({
+        code: "max_file_size",
+        message: "All files exceed the maximum size.",
+      });
+      return;
+    }
+
+    // Validate Count
+    const currentCount = files.value.length;
+    const capacity = props.maxFiles
+      ? Math.max(0, props.maxFiles - currentCount)
+      : undefined;
+    const capped =
+      typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+
+    if (typeof capacity === "number" && sized.length > capacity) {
+      props.onError?.({
+        code: "max_files",
+        message: "Too many files. Some were not added.",
+      });
+    }
+
+    let images: { name: string; path: string }[] = [];
+
+    if (uploadImages) {
+      const res = uploadImages(capped);
+      images = await res;
+    }
+
+    const newAttachments: AttachmentFile[] = capped.map((file, index) => ({
+      id: nanoid(),
+      type: "file",
+      // url: URL.createObjectURL(file),
+      url: images[index]?.path ?? URL.createObjectURL(file), //转成文件上传
+      mediaType: file.type,
+      filename: images[index]?.name ?? file.name,
+      file,
+    }));
+
+    files.value = [...files.value, ...newAttachments];
+  };
+
+  const removeFile = (id: string) => {
+    const file = files.value.find((f) => f.id === id);
+    if (file?.url && file.url.startsWith("blob:")) {
+      URL.revokeObjectURL(file.url);
+    }
+    files.value = files.value.filter((f) => f.id !== id);
+  };
+
+  const clearFiles = () => {
+    files.value.forEach((f) => {
+      if (f.url && f.url.startsWith("blob:")) {
+        URL.revokeObjectURL(f.url);
+      }
+    });
+    files.value = [];
+  };
+
+  const clearInput = () => {
+    textInput.value = "";
+  };
+
+  const openFileDialog = () => {
+    fileInputRef.value?.click();
+  };
+
+  const convertBlobUrlToDataUrl = async (
+    url: string
+  ): Promise<string | null> => {
+    try {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result as string);
+        reader.onerror = () => resolve(null);
+        reader.readAsDataURL(blob);
+      });
+    } catch {
+      return null;
+    }
+  };
+
+  const submitForm = async () => {
+    if (!props.onSubmit) return;
+
+    // Process files (convert blobs to base64 if needed for AI SDK)
+    const processedFiles = await Promise.all(
+      files.value.map(async (item) => {
+        if (item.url && item.url.startsWith("blob:")) {
+          const dataUrl = await convertBlobUrlToDataUrl(item.url);
+          return { ...item, url: dataUrl ?? item.url };
+        }
+        return item;
+      })
+    );
+
+    const message = {
+      text: textInput.value,
+      files: processedFiles,
+    };
+
+    try {
+      isLoading.value = true;
+      const result = props.onSubmit(message);
+      if (result instanceof Promise) {
+        await result;
+      }
+      clearInput();
+      clearFiles();
+    } catch (e) {
+      if (props.onError) {
+        const errorMessage =
+          e instanceof Error
+            ? e.message
+            : String(e) || "An unknown error occurred during submission.";
+        props.onError({
+          code: "submit_error",
+          message: errorMessage,
+        });
+      }
+      console.error("Submission failed:", e);
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  const context: PromptInputContext = {
+    textInput,
+    files,
+    fileInputRef,
+    isLoading,
+    setTextInput,
+    addFiles,
+    removeFile,
+    clearFiles,
+    clearInput,
+    openFileDialog,
+    submitForm,
+  };
+
+  provide(PROMPT_INPUT_KEY, context);
+  return context;
+}
+
+export function usePromptInput() {
+  const context = inject<PromptInputContext>(PROMPT_INPUT_KEY);
+  if (!context) {
+    throw new Error(
+      "usePromptInput must be used within a PromptInput component"
+    );
+  }
+  return context;
+}

package/src/components/ai-elements/prompt-input/index.ts

@@ -0,0 +1,39 @@
+export * from './context'
+export { default as PromptInput } from './PromptInput.vue'
+export { default as PromptInputActionAddAttachments } from './PromptInputActionAddAttachments.vue'
+export { default as PromptInputActionMenu } from './PromptInputActionMenu.vue'
+export { default as PromptInputActionMenuContent } from './PromptInputActionMenuContent.vue'
+export { default as PromptInputActionMenuItem } from './PromptInputActionMenuItem.vue'
+export { default as PromptInputActionMenuTrigger } from './PromptInputActionMenuTrigger.vue'
+export { default as PromptInputAttachment } from './PromptInputAttachment.vue'
+export { default as PromptInputAttachments } from './PromptInputAttachments.vue'
+export { default as PromptInputBody } from './PromptInputBody.vue'
+export { default as PromptInputButton } from './PromptInputButton.vue'
+export { default as PromptInputCommand } from './PromptInputCommand.vue'
+export { default as PromptInputCommandEmpty } from './PromptInputCommandEmpty.vue'
+export { default as PromptInputCommandGroup } from './PromptInputCommandGroup.vue'
+export { default as PromptInputCommandInput } from './PromptInputCommandInput.vue'
+export { default as PromptInputCommandItem } from './PromptInputCommandItem.vue'
+export { default as PromptInputCommandList } from './PromptInputCommandList.vue'
+export { default as PromptInputCommandSeparator } from './PromptInputCommandSeparator.vue'
+export { default as PromptInputFooter } from './PromptInputFooter.vue'
+export { default as PromptInputHeader } from './PromptInputHeader.vue'
+export { default as PromptInputHoverCard } from './PromptInputHoverCard.vue'
+export { default as PromptInputHoverCardContent } from './PromptInputHoverCardContent.vue'
+export { default as PromptInputHoverCardTrigger } from './PromptInputHoverCardTrigger.vue'
+export { default as PromptInputProvider } from './PromptInputProvider.vue'
+export { default as PromptInputSelect } from './PromptInputSelect.vue'
+export { default as PromptInputSelectContent } from './PromptInputSelectContent.vue'
+export { default as PromptInputSelectItem } from './PromptInputSelectItem.vue'
+export { default as PromptInputSelectTrigger } from './PromptInputSelectTrigger.vue'
+export { default as PromptInputSelectValue } from './PromptInputSelectValue.vue'
+export { default as PromptInputSpeechButton } from './PromptInputSpeechButton.vue'
+export { default as PromptInputSubmit } from './PromptInputSubmit.vue'
+export { default as PromptInputTab } from './PromptInputTab.vue'
+export { default as PromptInputTabBody } from './PromptInputTabBody.vue'
+export { default as PromptInputTabItem } from './PromptInputTabItem.vue'
+export { default as PromptInputTabLabel } from './PromptInputTabLabel.vue'
+export { default as PromptInputTabsList } from './PromptInputTabsList.vue'
+export { default as PromptInputTextarea } from './PromptInputTextarea.vue'
+export { default as PromptInputTools } from './PromptInputTools.vue'
+export * from './types'

package/src/components/ai-elements/prompt-input/types.ts

@@ -0,0 +1,28 @@
+import type { FileUIPart } from 'ai'
+import type { Ref } from 'vue'
+
+export interface PromptInputMessage {
+  text: string
+  files: FileUIPart[]
+}
+
+export interface AttachmentFile extends FileUIPart {
+  id: string
+  file?: File
+}
+
+export interface PromptInputContext {
+  textInput: Ref<string>
+  files: Ref<AttachmentFile[]>
+  isLoading: Ref<boolean>
+  fileInputRef: Ref<HTMLInputElement | null>
+  setTextInput: (val: string) => void
+  addFiles: (files: File[] | FileList) => void
+  removeFile: (id: string) => void
+  clearFiles: () => void
+  clearInput: () => void
+  openFileDialog: () => void
+  submitForm: () => void
+}
+
+export const PROMPT_INPUT_KEY = Symbol('PromptInputContext')

package/src/components/ai-elements/queue/Queue.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ai-elements/queue/QueueItem.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    :class="
+      cn(
+        'group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </li>
+</template>

package/src/components/ai-elements/queue/QueueItemAction.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Button
+    :class="
+      cn(
+        'size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100',
+        props.class,
+      )
+    "
+    size="icon"
+    type="button"
+    variant="ghost"
+  >
+    <slot />
+  </Button>
+</template>

package/src/components/ai-elements/queue/QueueItemActions.vue

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

package/src/components/ai-elements/queue/QueueItemAttachment.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('mt-1 flex flex-wrap gap-2', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ai-elements/queue/QueueItemContent.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface QueueItemContentProps {
+  completed?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(
+  defineProps<QueueItemContentProps>(),
+  {
+    completed: false,
+  },
+)
+</script>
+
+<template>
+  <span
+    :class="
+      cn(
+        'line-clamp-1 grow break-words',
+        props.completed
+          ? 'text-muted-foreground/50 line-through'
+          : 'text-muted-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </span>
+</template>

package/src/components/ai-elements/queue/QueueItemDescription.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface QueueItemDescriptionProps {
+  completed?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(
+  defineProps<QueueItemDescriptionProps>(),
+  {
+    completed: false,
+  },
+)
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'ml-6 text-xs',
+        props.completed
+          ? 'text-muted-foreground/40 line-through'
+          : 'text-muted-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ai-elements/queue/QueueItemFile.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { PaperclipIcon } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    :class="
+      cn(
+        'flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs',
+        props.class,
+      )
+    "
+  >
+    <PaperclipIcon :size="12" />
+    <span class="max-w-[100px] truncate">
+      <slot />
+    </span>
+  </span>
+</template>

package/src/components/ai-elements/queue/QueueItemImage.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <img
+    alt=""
+    :class="cn('h-8 w-8 rounded border object-cover', props.class)"
+    height="32"
+    width="32"
+    v-bind="$attrs"
+  >
+</template>

package/src/components/ai-elements/queue/QueueItemIndicator.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface QueueItemIndicatorProps {
+  completed?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(
+  defineProps<QueueItemIndicatorProps>(),
+  {
+    completed: false,
+  },
+)
+</script>
+
+<template>
+  <span
+    :class="
+      cn(
+        'mt-0.5 inline-block size-2.5 rounded-full border',
+        props.completed
+          ? 'border-muted-foreground/20 bg-muted-foreground/10'
+          : 'border-muted-foreground/50',
+        props.class,
+      )
+    "
+  />
+</template>

package/src/components/ai-elements/queue/QueueList.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ScrollArea
+    :class="cn('-mb-1 mt-2', props.class)"
+    v-bind="$attrs"
+  >
+    <div class="max-h-40 pr-4">
+      <ul>
+        <slot />
+      </ul>
+    </div>
+  </ScrollArea>
+</template>

package/src/components/ai-elements/queue/QueueSection.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Collapsible } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+
+interface QueueSectionProps {
+  defaultOpen?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(
+  defineProps<QueueSectionProps>(),
+  {
+    defaultOpen: true,
+  },
+)
+</script>
+
+<template>
+  <Collapsible
+    :class="cn(props.class)"
+    :default-open="props.defaultOpen"
+  >
+    <slot />
+  </Collapsible>
+</template>