feat: 添加后端接口

src/App.vue

@@ -7,10 +7,8 @@ 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">
-          <Chat />
-        </div>
+      <div class="h-full p-4">
+        <Chat />
       </div>
     </NaiveProvider>
   </NConfigProvider>

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,58 +43,64 @@ async function handleSubmit() {
     ms.warning('Please enter a message')
     return
   }
-  loading.value = true
-  list.value.push({ date: '1 minute ago', message: value.value, user: true })
-  const message = await mock()
-  value.value = ''
-  list.value.push({ date: '1 minute ago', message, user: false })
-  loading.value = false
+
+  addMessage(value.value, true)
+
+  try {
+    loading.value = true
+    const { text } = await fetchChatAPI(value.value)
+    value.value = ''
+    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>
+  <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>
+      <div>
+        <button
+          class="w-[40px] h-[40px] rounded-full hover:bg-neutral-100 transition flex justify-center items-center"
+          @click="handleClear"
+        >
+          <SvgIcon icon="ri:delete-bin-6-line" />
+        </button>
+      </div>
+    </header>
+    <main class="flex-1 overflow-hidden border-y">
+      <div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
         <div>
-          <button
-            class="w-[40px] h-[40px] rounded-full hover:bg-neutral-100 transition flex justify-center items-center"
-            @click="handleClear"
-          >
-            <SvgIcon icon="ri:delete-bin-6-line" />
-          </button>
+          <Message
+            v-for="(item, index) of list" :key="index" :date="item.date" :message="item.message"
+            :user="item.user"
+          />
         </div>
-      </header>
-      <main class="flex-1 overflow-hidden border-y">
-        <div class="h-full">
-          <NScrollbar class="h-full p-4">
-            <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">
-        <div class="flex items-center justify-between space-x-2">
-          <NInput v-model:value="value" placeholder="Type a message" :disabled="loading" @keyup="handleEnter" />
-          <NButton type="primary" :loading="loading" @click="handleSubmit">
-            <SvgIcon icon="ri:send-plane-fill" />
-          </NButton>
-        </div>
-      </footer>
-    </div>
+      </div>
+    </main>
+    <footer class="p-4">
+      <div class="flex items-center justify-between space-x-2">
+        <NInput v-model:value="value" placeholder="Type a message" :disabled="loading" @keyup="handleEnter" />
+        <NButton type="primary" :loading="loading" @click="handleSubmit">
+          <SvgIcon icon="ri:send-plane-fill" />
+        </NButton>
+      </div>
+    </footer>
   </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 }