@wzh-/ai-chat-example

安装

pnpm

pnpm install @wzh-/ai-chat-example

使用

<template>
  <div class="fixed bottom-0 top-0 left-0 right-0 p-4">
    <div class="relative flex size-full flex-col overflow-hidden">
      <ChatConversation :messages="messages" :status="status" />
      <ChatPromptInputProvider :status="status" @submit="handleSubmit" :uploadImages="uploadImages" />
    </div>
  </div>
</template>

<script setup lang='ts'>
import { useChat, ChatConversation, ChatPromptInputProvider } from '@wzh-/ai-chat-example'
import '@wzh-/ai-chat-example/dist/css/index.css'

const Authorization = "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZmFjdG9yeV9pZCI6NiwiaWF0IjoxNzY2NzE0OTI4LCJleHAiOjE3NjczMTk3Mjh9.-G0mw-z0_JHq7VLB4jj_CV1oiNmbMNWWQ9U8ToadrfU"


const api = 'http://192.168.10.98:3090/main/xiao-mian/chat'

const { status, messages,handleSubmit } = useChat(api, Authorization)

/* 自定义上传图片 */
const uploadImages = async (files: File[]) => {
  const formData = new FormData();
  files.forEach(file => {
    formData.append('files', file);
  })
  const res = await request.post('/main/file/uploadImages', formData)
  return res.map((item: any) => ({ name: item.name, path: item.path }))
}

</script>