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

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

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

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

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

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

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

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

@@ -1,14 +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 :class="cn('flex gap-1', props.class)">
-    <slot />
-  </div>
-</template>

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

@@ -1,14 +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 :class="cn('mt-1 flex flex-wrap gap-2', props.class)">
-    <slot />
-  </div>
-</template>

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

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

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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-<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(props.class)">
-    <slot />
-  </CollapsibleContent>
-</template>

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

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { ChevronDownIcon } from 'lucide-vue-next'
-
-interface QueueSectionLabelProps {
-  count?: number
-  label: string
-  class?: HTMLAttributes['class']
-}
-
-const props = defineProps<QueueSectionLabelProps>()
-</script>
-
-<template>
-  <span :class="cn('flex items-center gap-2', props.class)">
-    <ChevronDownIcon
-      class="group-data-[state=closed]:-rotate-90 size-4 transition-transform"
-    />
-    <slot name="icon" />
-    <span>
-      {{ props.count }}
-      {{ props.label }}
-    </span>
-  </span>
-</template>

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

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { CollapsibleTrigger } from '@/components/ui/collapsible'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <CollapsibleTrigger as-child>
-    <button
-      :class="
-        cn(
-          'group flex w-full items-center justify-between rounded-md bg-sidebar px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted',
-          props.class,
-        )
-      "
-      type="button"
-    >
-      <slot />
-    </button>
-  </CollapsibleTrigger>
-</template>

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

@@ -1,15 +0,0 @@
-export { default as Queue } from './Queue.vue'
-export { default as QueueItem } from './QueueItem.vue'
-export { default as QueueItemAction } from './QueueItemAction.vue'
-export { default as QueueItemActions } from './QueueItemActions.vue'
-export { default as QueueItemAttachment } from './QueueItemAttachment.vue'
-export { default as QueueItemContent } from './QueueItemContent.vue'
-export { default as QueueItemDescription } from './QueueItemDescription.vue'
-export { default as QueueItemFile } from './QueueItemFile.vue'
-export { default as QueueItemImage } from './QueueItemImage.vue'
-export { default as QueueItemIndicator } from './QueueItemIndicator.vue'
-export { default as QueueList } from './QueueList.vue'
-export { default as QueueSection } from './QueueSection.vue'
-export { default as QueueSectionContent } from './QueueSectionContent.vue'
-export { default as QueueSectionLabel } from './QueueSectionLabel.vue'
-export { default as QueueSectionTrigger } from './QueueSectionTrigger.vue'