feat: 添加后端接口

.env

@@ -0,0 +1,3 @@
+OPENAI_API_KEY=''
+
+VITE_GLOB_API_URL='http://192.168.110.170:3002'

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "vite",
+    "service": "esno ./service/index.ts",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
     "build-only": "vite build",
@@ -22,12 +23,17 @@
     "@iconify/json": "^2.2.19",
     "@iconify/vue": "^4.1.0",
     "@types/babel__core": "^7.20.0",
+    "@types/express": "^4.17.17",
     "@types/node": "^18.11.12",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "axios": "^1.3.2",
+    "chatgpt": "^4.2.0",
+    "dotenv": "^16.0.3",
     "eslint": "^8.22.0",
+    "esno": "^0.16.3",
+    "express": "^4.18.2",
     "less": "^4.1.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",

service/index.ts

@@ -0,0 +1,41 @@
+import dotenv from 'dotenv'
+import { ChatGPTAPI } from 'chatgpt'
+import express from 'express'
+
+dotenv.config()
+
+const app = express()
+
+app.use(express.json())
+
+async function chatAPI(message: string) {
+  if (!message)
+    throw new Error('Message is not defined')
+
+  if (!process.env.OPENAI_API_KEY)
+    throw new Error('OPENAI_API_KEY is not defined in .env file')
+
+  try {
+    const api = new ChatGPTAPI({ apiKey: process.env.OPENAI_API_KEY })
+    const res = await api.sendMessage(message)
+    return res
+  }
+  catch (error) {
+    return error
+  }
+}
+
+app.all('*', (req, res, next) => {
+  res.header('Access-Control-Allow-Origin', '*')
+  res.header('Access-Control-Allow-Headers', 'Content-Type')
+  res.header('Access-Control-Allow-Methods', '*')
+  next()
+})
+
+app.listen(3002, () => globalThis.console.log('Server is running on port 3002'))
+
+app.post('/chat', async (req, res) => {
+  const { message } = req.body
+  const response = await chatAPI(message)
+  res.send(response)
+})

src/App.vue

@@ -7,11 +7,9 @@ import Chat from '@/views/Chat/index.vue'
 <template>
   <NConfigProvider :locale="zhCN" :date-locale="dateZhCN" class="h-full" preflight-style-disabled>
     <NaiveProvider>
-      <div class="flex h-full">
-        <div class="w-[700px] h-[600px] m-auto">
+      <div class="h-full p-4">
         <Chat />
       </div>
-      </div>
     </NaiveProvider>
   </NConfigProvider>
 </template>

src/typings/env.d.ts

@@ -0,0 +1,4 @@
+interface ImportMetaEnv {
+	/** api url */
+	readonly VITE_GLOB_API_URL: string;
+}

src/views/Chat/Message.vue

@@ -5,6 +5,7 @@ interface Props {
   user?: boolean
   date?: string
   message?: string
+  error?: boolean
 }
 
 defineProps<Props>()
@@ -19,12 +20,12 @@ defineProps<Props>()
       <img v-if="user" src="@/assets/avatar.jpg" class="object-cover w-full h-full " alt="avatar">
       <SvgIcon v-else local-icon="logo" class="text-[26px]" />
     </div>
-    <div class="flex flex-col text-sm" :class="[{ 'items-end': user }]">
+    <div class="flex flex-col flex-1 text-sm" :class="[{ 'items-end': user }]">
       <span class="text-xs text-[#b4bbc4]">
         {{ date }}
       </span>
       <div class="p-2 mt-2 rounded-md" :class="[user ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
-        {{ message }}
+        <span class="leading-relaxed" :class="error ?? 'text-red-500'" v-html="message" />
       </div>
     </div>
   </div>

src/views/Chat/index.vue

@@ -1,36 +1,36 @@
 <script setup lang='ts'>
 import { onMounted, ref } from 'vue'
-import { NButton, NInput, NScrollbar, useMessage } from 'naive-ui'
-import Message from './components/Message.vue'
+import { NButton, NInput, useMessage } from 'naive-ui'
+import Message from './Message.vue'
+import { fetchChatAPI } from './request'
 import { SvgIcon } from '@/components'
 
+interface ListProps {
+  date: string
+  message: string
+  user?: boolean
+  error?: boolean
+}
+
+const scrollRef = ref<HTMLDivElement>()
+
 const ms = useMessage()
 
 const value = ref('')
 
 const loading = ref(false)
 
-const list = ref<{
-  date: string
-  message: string
-  user?: boolean
-}[]>([])
+const list = ref<ListProps[]>([])
 
 onMounted(initChat)
 
 function initChat() {
-  list.value = [
-    {
-      date: '1 minute ago',
-      message: 'Hi, I am ChatGPT, a chatbot based on GPT-3.',
-      user: false,
-    },
-  ]
+  addMessage('Hi, I am ChatGPT, a chatbot based on GPT-3.', false)
 }
 
 function handleClear() {
   list.value = []
-  setTimeout(initChat, 500)
+  setTimeout(initChat, 200)
 }
 
 function handleEnter(event: KeyboardEvent) {
@@ -43,26 +43,35 @@ async function handleSubmit() {
     ms.warning('Please enter a message')
     return
   }
+
+  addMessage(value.value, true)
+
+  try {
     loading.value = true
-  list.value.push({ date: '1 minute ago', message: value.value, user: true })
-  const message = await mock()
+    const { text } = await fetchChatAPI(value.value)
     value.value = ''
-  list.value.push({ date: '1 minute ago', message, user: false })
+    addMessage(text, false)
+  }
+  catch (error: any) {
+    addMessage(error.message ?? 'Request failed, please try again later.', false, true)
+  }
+  finally {
     loading.value = false
+    scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight)
+  }
 }
 
-function mock(): Promise<string> {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const message = 'ChatGPT 是一个基于深度学习的对话系统，可以用于自动生成聊天机器人的回答。它可以用于一些客服的工作，可以帮助客服团队处理大量的常见问题，从而提高工作效率。'
-      resolve(message)
-    }, 2000)
+function addMessage(message: string, user = false, error = false) {
+  list.value.push({
+    date: new Date().toLocaleString(),
+    message,
+    user,
+    error,
   })
 }
 </script>
 
 <template>
-  <div class="h-full p-4">
   <div class="flex flex-col h-full overflow-hidden border rounded-md shadow-md">
     <header class="flex items-center justify-between p-4">
       <div>会话</div>
@@ -76,15 +85,13 @@ function mock(): Promise<string> {
       </div>
     </header>
     <main class="flex-1 overflow-hidden border-y">
-        <div class="h-full">
-          <NScrollbar class="h-full p-4">
+      <div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
         <div>
           <Message
             v-for="(item, index) of list" :key="index" :date="item.date" :message="item.message"
             :user="item.user"
           />
         </div>
-          </NScrollbar>
       </div>
     </main>
     <footer class="p-4">
@@ -96,5 +103,4 @@ function mock(): Promise<string> {
       </div>
     </footer>
   </div>
-  </div>
 </template>

src/views/Chat/request.ts

@@ -0,0 +1,27 @@
+import axios from 'axios'
+
+async function fetchChatAPI(message: string) {
+  if (!message || message.trim() === '')
+    return Promise.reject(new Error('Message is empty'))
+
+  try {
+    const { status, data } = await axios.post(
+      'http://192.168.110.170:3002/chat',
+      { message },
+    )
+
+    if (status === 200) {
+      if (data.text)
+        return Promise.resolve(data)
+      else if (data.statusText)
+        return Promise.reject(new Error(data.statusText))
+    }
+
+    return Promise.reject(new Error('Request failed'))
+  }
+  catch (error) {
+    return Promise.reject(error)
+  }
+}
+
+export { fetchChatAPI }