From 847da731980ad1ab682b5e4f699da679c81b1602 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Thu, 9 Feb 2023 11:57:57 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0=E6=A8=A1=E6=8B=9F?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Chat/index.vue | 86 +++++++++++++++++++++++++++++++++-------
 1 file changed, 72 insertions(+), 14 deletions(-)

diff --git a/src/views/Chat/index.vue b/src/views/Chat/index.vue
index fc742eb..a6f1abd 100644
--- a/src/views/Chat/index.vue
+++ b/src/views/Chat/index.vue
@@ -1,7 +1,64 @@
 <script setup lang='ts'>
-import { NButton, NInput, NScrollbar } from 'naive-ui'
+import { onMounted, ref } from 'vue'
+import { NButton, NInput, NScrollbar, useMessage } from 'naive-ui'
 import Message from './components/Message.vue'
 import { SvgIcon } from '@/components'
+
+const ms = useMessage()
+
+const value = ref('')
+
+const loading = ref(false)
+
+const list = ref<{
+  date: string
+  message: string
+  user?: boolean
+}[]>([])
+
+onMounted(initChat)
+
+function initChat() {
+  list.value = [
+    {
+      date: '1 minute ago',
+      message: 'Hi, I am ChatGPT, a chatbot based on GPT-3.',
+      user: false,
+    },
+  ]
+}
+
+function handleClear() {
+  list.value = []
+  setTimeout(initChat, 500)
+}
+
+function handleEnter(event: KeyboardEvent) {
+  if (event.key === 'Enter')
+    handleSubmit()
+}
+
+async function handleSubmit() {
+  if (!value.value) {
+    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
+}
+
+function mock(): Promise<string> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const message = 'ChatGPT 是一个基于深度学习的对话系统，可以用于自动生成聊天机器人的回答。它可以用于一些客服的工作，可以帮助客服团队处理大量的常见问题，从而提高工作效率。'
+      resolve(message)
+    }, 2000)
+  })
+}
 </script>
 
 <template>
@@ -9,30 +66,31 @@ import { SvgIcon } from '@/components'
     <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>&nbsp;</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 class="h-full">
           <NScrollbar class="h-full p-4">
             <div>
-              <Message date="10 hours ago" message="hello world" />
-              <Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
-              <Message date="10 hours ago" message="hello world" />
-              <Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
-              <Message date="10 hours ago" message="hello world" />
-              <Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
-              <Message date="10 hours ago" message="hello world" />
-              <Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
-              <Message date="10 hours ago" message="hello world" />
-              <Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
+              <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 placeholder="Type a message" />
-          <NButton type="primary">
+          <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>