Merge pull request #26 from Chanzhaoyu/dev

chore: version 2.2.0

CHANGELOG.md

@@ -1,3 +1,10 @@
+## v2.2.0
+
+`2023-02-14`
+### Feature
+- 会话和上下文本地储存
+- 侧边栏本地储存
+
 ## v2.1.0
 
 `2023-02-14`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-web",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": false,
   "description": "ChatGPT Web",
   "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "naive-ui": "^2.34.3",
+    "pinia": "^2.0.30",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
@@ -31,10 +32,12 @@
     "@commitlint/cli": "^17.4.3",
     "@commitlint/config-conventional": "^17.4.3",
     "@iconify/vue": "^4.1.0",
+    "@types/crypto-js": "^4.1.1",
     "@types/node": "^18.13.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
     "axios": "^1.3.2",
+    "crypto-js": "^4.1.1",
     "eslint": "^8.34.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.1",

src/api/index.ts

@@ -1,17 +1,16 @@
+import type { GenericAbortSignal } from 'axios'
 import { post } from '@/utils/request'
 
+export const controller = new AbortController()
+
 export function fetchChatAPI<T = any>(
   prompt: string,
   options?: { conversationId?: string; parentMessageId?: string },
+  signal?: GenericAbortSignal,
 ) {
   return post<T>({
     url: '/chat',
     data: { prompt, options },
-  })
-}
-
-export function clearConversations<T = any>() {
-  return post<T>({
-    url: '/clear',
+    signal,
   })
 }

src/components/business/Chat/hooks/useChat.ts

@@ -0,0 +1,28 @@
+import { useHistoryStore } from '@/store'
+
+export function useChat() {
+  const historyStore = useHistoryStore()
+
+  function addChat(
+    message: string,
+    args?: { reversal?: boolean; error?: boolean; options?: Chat.ChatOptions },
+    uuid?: number | null,
+  ) {
+    historyStore.addChat(
+      {
+        dateTime: new Date().toLocaleString(),
+        message,
+        reversal: args?.reversal ?? false,
+        error: args?.error ?? false,
+        options: args?.options ?? undefined,
+      },
+      uuid,
+    )
+  }
+
+  function clearChat() {
+    historyStore.clearChat()
+  }
+
+  return { addChat, clearChat }
+}

src/components/business/Chat/index.vue

@@ -1,27 +1,31 @@
 <script setup lang='ts'>
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { NButton, NInput, useMessage } from 'naive-ui'
-import type { ChatOptions, ChatProps } from './types'
 import { Message } from './components'
 import { Layout } from './layout'
+import { useChat } from './hooks/useChat'
 import { fetchChatAPI } from '@/api'
 import { HoverButton, SvgIcon } from '@/components/common'
+import { useHistoryStore } from '@/store'
+import { isNumber } from '@/utils/is'
 
-const scrollRef = ref<HTMLDivElement>()
+let controller = new AbortController()
 
 const ms = useMessage()
 
+const historyStore = useHistoryStore()
+
+const scrollRef = ref<HTMLDivElement>()
+
+const { addChat, clearChat: handleClear } = useChat()
+
 const prompt = ref('')
 const loading = ref(false)
 
-const list = ref<ChatProps[]>([])
-const chatList = computed(() => list.value.filter(item => (!item.reversal && !item.error)))
+const currentActive = computed(() => historyStore.active)
 
-function initChat() {
-  addMessage('Hi, I am ChatGPT, a chatbot based on GPT-3.')
-}
-
-onMounted(initChat)
+const list = computed<Chat.Chat[]>(() => historyStore.getCurrentChat)
+const chatList = computed<Chat.Chat[]>(() => list.value.filter(item => (!item.reversal && !item.error)))
 
 async function handleSubmit() {
   if (loading.value)
@@ -37,19 +41,20 @@ async function handleSubmit() {
   addMessage(message, { reversal: true })
   prompt.value = ''
 
-  let options: ChatOptions = {}
+  let options: Chat.ChatOptions = {}
   const lastContext = chatList.value[chatList.value.length - 1]?.options
 
   if (lastContext)
     options = { ...lastContext }
 
   try {
     loading.value = true
-    const { data } = await fetchChatAPI(message, options)
+    const { data } = await fetchChatAPI(message, options, controller.signal)
     addMessage(data?.text ?? '', { options: { conversationId: data.conversationId, parentMessageId: data.id } })
   }
   catch (error: any) {
-    addMessage(`Error: ${error.message ?? 'Request failed, please try again later.'}`, { error: true })
+    if (error.message !== 'cancelled')
+      addMessage(`Error: ${error.message ?? 'Request failed, please try again later.'}`, { error: true })
   }
   finally {
     loading.value = false
@@ -63,22 +68,37 @@ function handleEnter(event: KeyboardEvent) {
 
 function addMessage(
   message: string,
-  args?: { reversal?: boolean; error?: boolean; options?: ChatOptions },
+  args?: { reversal?: boolean; error?: boolean; options?: Chat.ChatOptions },
+  uuid?: number | null,
 ) {
-  list.value.push({
-    dateTime: new Date().toLocaleString(),
-    message,
-    reversal: args?.reversal ?? false,
-    error: args?.error ?? false,
-    options: args?.options ?? undefined,
-  })
+  addChat(message, args, uuid)
+  scrollToBottom()
+}
+
+function scrollToBottom() {
   nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
 }
 
-function handleClear() {
-  list.value = []
-  setTimeout(initChat, 100)
+function handleCancel() {
+  // 取消之后一定要重新赋值，否则会报错
+  controller.abort()
+  controller = new AbortController()
+  loading.value = false
 }
+
+onMounted(() => {
+  scrollToBottom()
+})
+
+watch(
+  currentActive,
+  (active) => {
+    if (isNumber(active)) {
+      handleCancel()
+      scrollToBottom()
+    }
+  },
+)
 </script>
 
 <template>
@@ -96,13 +116,13 @@ function handleClear() {
       </main>
       <footer class="p-4">
         <div class="flex items-center justify-between space-x-2">
-          <HoverButton tooltip="Clear conversations" @click="handleClear">
-            <span class="text-xl text-[#4f555e]">
+          <HoverButton tooltip="Clear conversations">
+            <span class="text-xl text-[#4f555e]" @click="handleClear">
               <SvgIcon icon="ri:delete-bin-line" />
             </span>
           </HoverButton>
           <NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />
-          <NButton type="primary" :loading="loading" @click="handleSubmit">
+          <NButton type="primary" :loading="loading" @click="handleCancel">
             <template #icon>
               <SvgIcon icon="ri:send-plane-fill" />
             </template>

src/components/business/Chat/layout/sider/Footer.vue

@@ -3,9 +3,8 @@ import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
 </script>
 
 <template>
-  <footer class="flex items-center justify-between p-4 overflow-hidden border-t">
-    <UserAvatar />
-
+  <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t h-[70px]">
+    <UserAvatar class="flex-1" />
     <HoverButton tooltip="Setting">
       <span class="text-xl text-[#4f555e]">
         <SvgIcon icon="ri:settings-4-line" />