From a81c087a9366d11be593206949447bde9bffd8a2 Mon Sep 17 00:00:00 2001
From: Hao Wu <wuhaoecho@gmail.com>
Date: Sun, 8 Sep 2024 19:58:23 +0800
Subject: [PATCH] =?UTF-8?q?Refactor=20chat=20conversation=20component=20to?=
 =?UTF-8?q?=20improve=20modularity=20and=20readab=E2=80=A6=20(#526)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Refactor chat conversation component to improve modularity and readability.

* Remove deprecated `conversation.vue` and update import path in `index.vue`

* Refactor import paths in Conversation.vue and MessageList.vue to use absolute paths for consistency.

* Refactor Conversation component to accept sessionUuid as prop instead of using route params.

* Refactor chat helper functions and update related store methods.
---
 web/src/store/modules/chat/helper.ts          |  15 +-
 web/src/store/modules/chat/index.ts           |  17 +-
 .../views/chat/components/Conversation.vue    | 567 ++++++++++++++++
 web/src/views/chat/components/MessageList.vue |  87 +++
 web/src/views/chat/index.vue                  | 629 +-----------------
 5 files changed, 670 insertions(+), 645 deletions(-)
 create mode 100644 web/src/views/chat/components/Conversation.vue
 create mode 100644 web/src/views/chat/components/MessageList.vue

diff --git a/web/src/store/modules/chat/helper.ts b/web/src/store/modules/chat/helper.ts
index f9d588cb..1dc05b05 100644
--- a/web/src/store/modules/chat/helper.ts
+++ b/web/src/store/modules/chat/helper.ts
@@ -1,19 +1,14 @@
 const default_chat_data: Chat.ChatState = {
-  active: null,
-  history: [],
-  chat: {},
+  active: null, // uuid | null
+  history: [], // Chat.Session[]
+  chat: {}, // { [key: string]: Chat.ChatMessage[] }
 }
 
 export function getLocalState(): Chat.ChatState {
   return default_chat_data
 }
 
-export function check_chat(chat: Chat.ChatState['chat'], need_length = true) {
+export function getChatKeys(chat: Chat.ChatState['chat'], includeLength = true) {
   const keys = Object.keys(chat)
-  const data: [Array<string>, number?] = [keys]
-  if (need_length) {
-    const keys_length = keys.length
-    data.push(keys_length)
-  }
-  return data
+  return includeLength ? [keys, keys.length] as const : [keys]
 }
diff --git a/web/src/store/modules/chat/index.ts b/web/src/store/modules/chat/index.ts
index ccb43501..f3d9269e 100644
--- a/web/src/store/modules/chat/index.ts
+++ b/web/src/store/modules/chat/index.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { check_chat, getLocalState, } from './helper'
+import { getChatKeys, getLocalState, } from './helper'
 import { router } from '@/router'
 import {
   clearSessionChatMessages,
@@ -159,7 +159,7 @@ export const useChatStore = defineStore('chat-store', {
     },
 
     getChatByUuidAndIndex(uuid: string, index: number) {
-      const [keys, keys_length] = check_chat(this.chat)
+      const [keys, keys_length] = getChatKeys(this.chat)
       if (!uuid) {
         if (keys_length)
           return this.chat[keys[0]][index]
@@ -173,7 +173,7 @@ export const useChatStore = defineStore('chat-store', {
 
     async addChatByUuid(uuid: string, chat: Chat.Message) {
       const new_chat_text = t('chat.new')
-      const [keys] = check_chat(this.chat, false)
+      const [keys] = getChatKeys(this.chat, false)
       if (!uuid) {
         if (this.history.length === 0) {
           const default_model_parameters = await getChatSessionDefault(new_chat_text)
@@ -210,8 +210,7 @@ export const useChatStore = defineStore('chat-store', {
     },
 
     async updateChatByUuid(uuid: string, index: number, chat: Chat.Message) {
-      // TODO: sync with server
-      const [keys, keys_length] = check_chat(this.chat)
+      const [keys, keys_length] = getChatKeys(this.chat)
       if (!uuid) {
         if (keys_length) {
           this.chat[keys[0]][index] = chat
@@ -230,7 +229,7 @@ export const useChatStore = defineStore('chat-store', {
       index: number,
       chat: Partial<Chat.Message>,
     ) {
-      const [keys, keys_length] = check_chat(this.chat)
+      const [keys, keys_length] = getChatKeys(this.chat)
       if (!uuid) {
         if (keys_length) {
           this.chat[keys[0]][index] = { ...this.chat[keys[0]][index], ...chat }
@@ -248,7 +247,7 @@ export const useChatStore = defineStore('chat-store', {
     },
 
     async deleteChatByUuid(uuid: string, index: number) {
-      const [keys, keys_length] = check_chat(this.chat)
+      const [keys, keys_length] = getChatKeys(this.chat)
       if (!uuid) {
         if (keys_length) {
           const chatData = this.chat[keys[0]]
@@ -272,15 +271,13 @@ export const useChatStore = defineStore('chat-store', {
 
     clearChatByUuid(uuid: string) {
       // does this every happen?
-      const [keys, keys_length] = check_chat(this.chat)
+      const [keys, keys_length] = getChatKeys(this.chat)
       if (!uuid) {
         if (keys_length) {
           this.chat[keys[0]] = []
         }
         return
       }
-
-      // const index = this.chat.findIndex(item => item.uuid === uuid)
       if (keys.includes(uuid)) {
         const data: Chat.Message[] = []
         for (const chat of this.chat[uuid]) {
diff --git a/web/src/views/chat/components/Conversation.vue b/web/src/views/chat/components/Conversation.vue
new file mode 100644
index 00000000..9baed463
--- /dev/null
+++ b/web/src/views/chat/components/Conversation.vue
@@ -0,0 +1,567 @@
+<script lang='ts' setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+// @ts-ignore
+import { v7 as uuidv7 } from 'uuid'
+import { NAutoComplete, NButton, NInput, NModal, useDialog, useMessage } from 'naive-ui'
+import { storeToRefs } from 'pinia'
+import html2canvas from 'html2canvas'
+import { type OnSelect } from 'naive-ui/es/auto-complete/src/interface'
+import { useScroll } from '@/views/chat/hooks/useScroll'
+import { useChat } from '@/views/chat/hooks/useChat'
+import { useCopyCode } from '@/views/chat/hooks/useCopyCode'
+import HeaderComponent from '@/views/chat/components/Header/index.vue'
+import SessionConfig from '@/views/chat/components/Session/SessionConfig.vue'
+import { createChatBot, createChatSnapshot, fetchChatStream } from '@/api'
+import { HoverButton, SvgIcon } from '@/components/common'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { useChatStore, usePromptStore } from '@/store'
+import { t } from '@/locales'
+import { genTempDownloadLink } from '@/utils/download'
+import { nowISO } from '@/utils/date'
+import UploadModal from '@/views/chat/components/UploadModal.vue'
+import UploaderReadOnly from '@/views/chat/components/UploaderReadOnly.vue'
+import ModelSelector from '@/views/chat/components/ModelSelector.vue'
+import MessageList from '@/views/chat/components/MessageList.vue'
+import PromptGallery from '@/views/chat/components/PromptGallery/index.vue'
+import { getDataFromResponseText } from '@/utils/string'
+let controller = new AbortController()
+
+const dialog = useDialog()
+const nui_msg = useMessage()
+
+const chatStore = useChatStore()
+
+const { sessionUuid } = defineProps({
+        sessionUuid: {
+                type: String,
+                required: true
+        },
+});
+
+useCopyCode()
+
+const { isMobile } = useBasicLayout()
+const { addChat, updateChat, updateChatPartial } = useChat()
+const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
+// session uuid
+chatStore.syncChatMessages(sessionUuid)
+
+const dataSources = computed(() => chatStore.getChatSessionDataByUuid(sessionUuid))
+const chatSession = computed(() => chatStore.getChatSessionByUuid(sessionUuid))
+
+const prompt = ref<string>('')
+const loading = ref<boolean>(false)
+const showUploadModal = ref<boolean>(false)
+const showModal = ref<boolean>(false)
+
+
+// 添加PromptStore
+const promptStore = usePromptStore()
+
+// 使用storeToRefs，保证store修改后，联想部分能够重新渲染
+const { promptList: promptTemplate } = storeToRefs<any>(promptStore)
+
+// 可优化部分
+// 搜索选项计算，这里使用value作为索引项，所以当出现重复value时渲染异常(多项同时出现选中效果)
+// 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现
+const searchOptions = computed(() => {
+  function filterItemsByPrompt(item: { key: string }): boolean {
+    const lowerCaseKey = item.key.toLowerCase()
+    const lowerCasePrompt = prompt.value.substring(1).toLowerCase()
+    return lowerCaseKey.includes(lowerCasePrompt)
+  }
+  function filterItemsByTitle(item: { title: string }): boolean {
+    const lowerCaseKey = item.title.toLowerCase()
+    const lowerCasePrompt = prompt.value.substring(1).toLowerCase()
+    return lowerCaseKey.includes(lowerCasePrompt)
+  }
+  if (prompt.value.startsWith('/')) {
+    const filterStores = chatStore.history.filter(filterItemsByTitle).map((obj: { uuid: any }) => {
+      return {
+        label: `UUID|$|${obj.uuid}`,
+        value: `UUID|$|${obj.uuid}`,
+      }
+    })
+
+    const filterPrompts = promptTemplate.value.filter(filterItemsByPrompt).map((obj: { value: any }) => {
+      return {
+        label: obj.value,
+        value: obj.value,
+      }
+    })
+    const all = filterStores.concat(filterPrompts)
+    return all
+  }
+  else {
+    return []
+  }
+})
+// value反渲染key
+const renderOption = (option: { label: string }) => {
+  for (const i of promptTemplate.value) {
+    if (i.value === option.label)
+      return [i.key]
+  }
+  for (const chat of chatStore.history) {
+    if (`UUID|$|${chat.uuid}` === option.label)
+      return [chat.title]
+  }
+  return []
+}
+
+function handleSubmit() {
+  onConversationStream()
+}
+
+async function onConversationStream() {
+  const message = prompt.value
+
+  if (loading.value)
+    return
+
+  if (!message || message.trim() === '')
+    return
+
+  const chatUuid = uuidv7()
+
+  addChat(
+    sessionUuid,
+    {
+      uuid: chatUuid,
+      dateTime: nowISO(),
+      text: message,
+      inversion: true,
+      error: false,
+    },
+  )
+  scrollToBottom()
+
+  loading.value = true
+  prompt.value = ''
+
+  // add a blank response
+  addChat(
+    sessionUuid,
+    {
+      uuid: '',
+      dateTime: nowISO(),
+      text: '',
+      loading: true,
+      inversion: false,
+      error: false,
+    },
+  )
+  scrollToBottomIfAtBottom()
+  const subscribleStrem = async () => {
+    try {
+      // Send the request with axios
+      const response = fetchChatStream(
+        sessionUuid,
+        chatUuid,
+        false,
+        message,
+        (progress: any) => {
+          const xhr = progress.event.target
+          const {
+            responseText,
+            status,
+          } = xhr
+          if (status >= 400) {
+            const error_json: { code: number; message: string; details: any } = JSON.parse(responseText)
+            updateChatPartial(
+              sessionUuid,
+              dataSources.value.length - 1,
+              {
+                loading: false,
+                error: true,
+                text: t(error_json.message), // how to add params to i18n
+              },
+            )
+            loading.value = false
+          }
+          else {
+            const chunk = getDataFromResponseText(responseText)
+            // Check if the chunk is not empty
+            if (chunk) {
+              // Parse the JSON data chunk
+              try {
+                const data = JSON.parse(chunk)
+                const answer = data.choices[0].delta.content
+                const answer_uuid = data.id.replace('chatcmpl-', '') // use answer id as uuid
+                updateChat(
+                  sessionUuid,
+                  dataSources.value.length - 1,
+                  {
+                    uuid: answer_uuid,
+                    dateTime: nowISO(),
+                    text: answer,
+                    inversion: false,
+                    error: false,
+                    loading: false,
+                  },
+                )
+                scrollToBottomIfAtBottom()
+              }
+              catch (error) {
+                // eslint-disable-next-line no-console
+                console.log(error)
+              }
+            }
+          }
+        },
+      )
+      return response
+    }
+    catch (error: any) {
+      // eslint-disable-next-line no-console
+      console.log(error)
+      const response = error.response
+      if (response.status >= 400) {
+        nui_msg.error(response.data.message)
+        loading.value = false
+      }
+    }
+  }
+
+  await subscribleStrem()
+  loading.value = false
+}
+
+async function onRegenerate(index: number) {
+  if (loading.value)
+    return
+
+  controller = new AbortController()
+
+  const chat = dataSources.value[index]
+
+  const chatUuid = chat.uuid
+  const message = chat.text
+
+  loading.value = true
+  updateChat(
+    sessionUuid,
+    index,
+    {
+      uuid: chatUuid,
+      dateTime: nowISO(),
+      text: '',
+      inversion: false,
+      error: false,
+      loading: false,
+    },
+  )
+
+  try {
+    const subscribleStrem = async () => {
+      try {
+        // Send the request with axios
+        const response = fetchChatStream(
+          sessionUuid,
+          chatUuid,
+          true,
+          message,
+          (progress: any) => {
+            const xhr = progress.event.target
+            const {
+              responseText,
+            } = xhr
+            // Extract the JSON data chunk from the responseText
+            const chunk = getDataFromResponseText(responseText)
+
+            // Check if the chunk is not empty
+            if (chunk) {
+              // Parse the JSON data chunk
+              const data = JSON.parse(chunk)
+              const answer = data.choices[0].delta.content
+              const answer_uuid = data.id.replace('chatcmpl-', '') // use answer id as uuid
+              updateChat(
+                sessionUuid,
+                index,
+                {
+                  uuid: answer_uuid,
+                  dateTime: nowISO(),
+                  text: answer,
+                  inversion: false,
+                  error: false,
+                  loading: false,
+                },
+              )
+            }
+          },
+        )
+        return response
+      }
+      catch (error) {
+        console.error('Error:', error)
+        throw error
+      }
+      finally {
+        console.log(loading.value)
+        loading.value = false
+        console.log(loading.value)
+      }
+    }
+
+    await subscribleStrem()
+  }
+  catch (error: any) {
+    // TODO: fix  error
+    if (error.message === 'canceled') {
+      updateChatPartial(
+        sessionUuid,
+        index,
+        {
+          loading: false,
+        },
+      )
+      return
+    }
+
+    const errorMessage = error?.message ?? t('common.wrong')
+
+    updateChat(
+      sessionUuid,
+      index,
+      {
+        uuid: chatUuid,
+        dateTime: nowISO(),
+        text: errorMessage,
+        inversion: false,
+        error: true,
+        loading: false,
+      },
+    )
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function handleExport() {
+  if (loading.value)
+    return
+
+  const dialogBox = dialog.warning({
+    title: t('chat.exportImage'),
+    content: t('chat.exportImageConfirm'),
+    positiveText: t('common.yes'),
+    negativeText: t('common.no'),
+    onPositiveClick: async () => {
+      try {
+        dialogBox.loading = true
+        const ele = document.getElementById('image-wrapper')
+        const canvas = await html2canvas(ele as HTMLDivElement, {
+          useCORS: true,
+        })
+        const imgUrl = canvas.toDataURL('image/png')
+        const tempLink = genTempDownloadLink(imgUrl)
+        document.body.appendChild(tempLink)
+        tempLink.click()
+        document.body.removeChild(tempLink)
+        window.URL.revokeObjectURL(imgUrl)
+        dialogBox.loading = false
+        nui_msg.success(t('chat.exportSuccess'))
+        Promise.resolve()
+      }
+      catch (error: any) {
+        nui_msg.error(t('chat.exportFailed'))
+      }
+      finally {
+        dialogBox.loading = false
+      }
+    },
+  })
+}
+
+async function handleSnapshot() {
+  // Get title input from user
+  // Call API to create chat snapshot and get UUID
+  const snapshot = await createChatSnapshot(sessionUuid)
+  const snapshot_uuid = snapshot.uuid
+  // Open new tab with snapshot UUID
+  window.open(`#/snapshot/${snapshot_uuid}`, '_blank')
+  nui_msg.success(t('chat.snapshotSuccess'))
+  // ask user to input the a title for the chat
+
+  // then call createChatSnapshot
+
+  // open new link in new tab with the chat snapshot uuid
+  // #/snapshot/<uuid>
+}
+async function handleCreateBot() {
+  const snapshot = await createChatBot(sessionUuid)
+  const snapshot_uuid = snapshot.uuid
+  window.open(`#/snapshot/${snapshot_uuid}`, '_blank')
+}
+
+
+
+
+
+
+function handleClear() {
+  if (loading.value)
+    return
+
+  dialog.warning({
+    title: t('chat.clearChat'),
+    content: t('chat.clearChatConfirm'),
+    positiveText: t('common.yes'),
+    negativeText: t('common.no'),
+    onPositiveClick: () => {
+      chatStore.clearChatByUuid(sessionUuid)
+    },
+  })
+}
+
+function handleEnter(event: KeyboardEvent) {
+  if (!isMobile.value) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+      handleSubmit()
+    }
+  }
+  else {
+    if (event.key === 'Enter' && event.ctrlKey) {
+      event.preventDefault()
+      handleSubmit()
+    }
+  }
+}
+
+// function handleStop() {
+//   if (loading.value) {
+//     controller.abort()
+//     loading.value = false
+//   }
+// }
+
+const handleSelectAutoComplete: OnSelect = function (v: string | number) {
+  if (typeof v === 'string' && v.startsWith('UUID|$|')) {
+    // set active session to the selected uuid
+    chatStore.setActive(v.split('|$|')[1])
+  }
+}
+
+const placeholder = computed(() => {
+  if (isMobile.value)
+    return t('chat.placeholderMobile')
+  return t('chat.placeholder')
+})
+
+const sendButtonDisabled = computed(() => {
+  return loading.value || !prompt.value || prompt.value.trim() === ''
+})
+
+const footerClass = computed(() => {
+  let classes = ['m-2', 'p-2']
+  if (isMobile.value)
+    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
+  return classes
+})
+
+onMounted(() => {
+  scrollToBottom()
+  // init default prompts
+  promptStore.getPromptList()
+})
+
+onUnmounted(() => {
+  if (loading.value)
+    controller.abort()
+})
+
+const handleUsePrompt = (_: string, value: string): void => {
+  prompt.value = value
+}
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full">
+    <div>
+      <UploadModal :sessionUuid="sessionUuid" :showUploadModal="showUploadModal"
+        @update:showUploadModal="showUploadModal = $event" />
+    </div>
+    <HeaderComponent v-if="isMobile" @export="handleExport" @snapshot="handleSnapshot" @toggle="showModal = true" />
+    <main class="flex-1 overflow-hidden">
+      <NModal ref="sessionConfigModal" v-model:show="showModal" :title="$t('chat.sessionConfig')" preset="dialog">
+        <SessionConfig id="session-config" ref="sessionConfig" :uuid="sessionUuid" />
+      </NModal>
+      <div class="flex items-center justify-center mt-4 ">
+        <div class="w-4/5 md:w-1/3">
+          <ModelSelector :uuid="sessionUuid" :model="chatSession?.model"></ModelSelector>
+        </div>
+      </div>
+      <UploaderReadOnly v-if="!!sessionUuid" class="px-40" :sessionUuid="sessionUuid" :showUploaderButton="false">
+      </UploaderReadOnly>
+      <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
+        <div id="image-wrapper" class="w-full max-w-screen-xl mx-auto dark:bg-[#101014] mb-8"
+          :class="[isMobile ? 'p-2' : 'p-4']">
+          <template v-if="!dataSources.length">
+            <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
+              <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
+              <span>{{ $t('common.help') }}</span>
+            </div>
+            <PromptGallery @usePrompt="handleUsePrompt"></PromptGallery>
+          </template>
+          <template v-else>
+            <div>
+              <MessageList :session-uuid="sessionUuid" :on-regenerate="onRegenerate"/>
+            </div>
+          </template>
+        </div>
+      </div>
+    </main>
+    <footer :class="footerClass">
+      <div class="w-full max-w-screen-xl m-auto">
+        <div class="flex items-center justify-between space-x-1">
+          <HoverButton :tooltip="$t('chat.clearChat')" @click="handleClear">
+            <span class="text-xl text-[#4b9e5f] dark:text-white">
+              <SvgIcon icon="icon-park-outline:clear" />
+            </span>
+          </HoverButton>
+          <HoverButton v-if="!isMobile" data-testid="snpashot-button" :tooltip="$t('chat.createBot')"
+            @click="handleCreateBot">
+            <span class="text-xl text-[#4b9e5f] dark:text-white">
+              <SvgIcon icon="fluent:bot-add-24-regular" />
+            </span>
+          </HoverButton>
+
+          <HoverButton v-if="!isMobile" data-testid="snpashot-button" :tooltip="$t('chat.chatSnapshot')"
+            @click="handleSnapshot">
+            <span class="text-xl text-[#4b9e5f] dark:text-white">
+              <SvgIcon icon="ic:twotone-ios-share" />
+            </span>
+          </HoverButton>
+          <HoverButton v-if="!isMobile" @click="showModal = true" :tooltip="$t('chat.chatSettings')">
+            <span class="text-xl text-[#4b9e5f]">
+              <SvgIcon icon="teenyicons:adjust-horizontal-solid" />
+            </span>
+          </HoverButton>
+          <NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption"
+            :on-select="handleSelectAutoComplete">
+            <template #default="{ handleInput, handleBlur, handleFocus }">
+              <NInput id="message_textarea" v-model:value="prompt" type="textarea" :placeholder="placeholder"
+                data-testid="message_textarea" :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
+                @input="handleInput" @focus="handleFocus" @blur="handleBlur" @keypress="handleEnter" />
+            </template>
+          </NAutoComplete>
+          <button class="!-ml-8 z-10" @click="showUploadModal = true">
+            <span class="text-xl text-[#4b9e5f]">
+              <SvgIcon icon="clarity:attachment-line" />
+            </span>
+          </button>
+          <NButton id="send_message_button" class="!ml-4" data-testid="send_message_button" type="primary"
+            :disabled="sendButtonDisabled" @click="handleSubmit">
+            <template #icon>
+              <span class="dark:text-black">
+                <SvgIcon icon="ri:send-plane-fill" />
+              </span>
+            </template>
+          </NButton>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
\ No newline at end of file
diff --git a/web/src/views/chat/components/MessageList.vue b/web/src/views/chat/components/MessageList.vue
new file mode 100644
index 00000000..61634b58
--- /dev/null
+++ b/web/src/views/chat/components/MessageList.vue
@@ -0,0 +1,87 @@
+<template>
+        <Message v-for="(item, index) of dataSources" :key="index" :date-time="item.dateTime"
+                :model="chatSession?.model" :text="item.text" :inversion="item.inversion" :error="item.error"
+                :is-prompt="item.isPrompt" :is-pin="item.isPin" :loading="item.loading" :index="index"
+                @regenerate="onRegenerate(index)" @toggle-pin="handleTogglePin(index)" @delete="handleDelete(index)" @after-edit="handleAfterEdit" />
+</template>
+
+<script lang='ts' setup>
+import Message from './Message/index.vue';
+import { computed, ref } from 'vue';
+import { useChatStore } from '@/store';
+import { useChat } from '@/views/chat/hooks/useChat'
+import { updateChatData } from '@/api'
+import { useDialog } from 'naive-ui'
+
+
+import { t } from '@/locales'
+const dialog = useDialog()
+const { updateChatText, updateChat } = useChat()
+
+const props = defineProps({
+        sessionUuid: {
+                type: String,
+                required: true
+        },
+        onRegenerate: {
+                type: Function,
+                required: true
+        },
+});
+
+const chatStore = useChatStore()
+const dataSources = computed(() => chatStore.getChatSessionDataByUuid(props.sessionUuid))
+const chatSession = computed(() => chatStore.getChatSessionByUuid(props.sessionUuid))
+
+// The user wants to delete the message with the given index.
+// If the message is already being deleted, we ignore the request.
+// If the user confirms that they want to delete the message, we call
+// the deleteChatByUuid function from the chat store.
+function handleDelete(index: number) {
+        dialog.warning({
+                title: t('chat.deleteMessage'),
+                content: t('chat.deleteMessageConfirm'),
+                positiveText: t('common.yes'),
+                negativeText: t('common.no'),
+                onPositiveClick: async () => {
+                        chatStore.deleteChatByUuid(props.sessionUuid, index)
+                },
+        })
+}
+
+
+function handleAfterEdit(index: number, text: string) {
+        console.log(index, text)
+        updateChatText(
+                props.sessionUuid,
+                index,
+                text,
+        )
+}
+
+const pining = ref<boolean>(false)
+
+async function handleTogglePin(index: number) {
+        if (pining.value)
+                return
+        const chat = chatStore.getChatByUuidAndIndex(props.sessionUuid, index)
+        if (chat == null)
+                return
+
+        chat.isPin = !chat.isPin
+        try {
+                pining.value = true
+                await updateChatData(chat)
+                updateChat(
+                        props.sessionUuid,
+                        index,
+                        chat,
+                )
+        }
+        finally {
+                pining.value = false
+        }
+}
+
+
+</script>
diff --git a/web/src/views/chat/index.vue b/web/src/views/chat/index.vue
index 568fb704..25c9895b 100644
--- a/web/src/views/chat/index.vue
+++ b/web/src/views/chat/index.vue
@@ -1,635 +1,14 @@
 <script lang='ts' setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-// @ts-ignore
-import { v7 as uuidv7 } from 'uuid'
-import { useRoute } from 'vue-router'
-import { NAutoComplete, NButton, NInput, NModal, useDialog, useMessage } from 'naive-ui'
-import { storeToRefs } from 'pinia'
-import html2canvas from 'html2canvas'
-import { type OnSelect } from 'naive-ui/es/auto-complete/src/interface'
-import Message from './components/Message/index.vue'
-import { useScroll } from './hooks/useScroll'
-import { useChat } from './hooks/useChat'
-import { useCopyCode } from './hooks/useCopyCode'
-import HeaderComponent from './components/Header/index.vue'
-import SessionConfig from './components/Session/SessionConfig.vue'
-import { createChatBot, createChatSnapshot, fetchChatStream, updateChatData } from '@/api'
-import { HoverButton, SvgIcon } from '@/components/common'
-import { useBasicLayout } from '@/hooks/useBasicLayout'
-import { useChatStore, usePromptStore } from '@/store'
-import { t } from '@/locales'
-import { genTempDownloadLink } from '@/utils/download'
-import { nowISO } from '@/utils/date'
-import UploadModal from './components/UploadModal.vue'
-import UploaderReadOnly from './components/UploaderReadOnly.vue'
-import ModelSelector from './components/ModelSelector.vue'
-
-import PromptGallery from '@/views/chat/components/PromptGallery/index.vue'
-import { getDataFromResponseText } from '@/utils/string'
-let controller = new AbortController()
+import Conversation from './components/Conversation.vue';
+import { useRoute } from 'vue-router';
 
 const route = useRoute()
-const dialog = useDialog()
-const nui_msg = useMessage()
-
-const chatStore = useChatStore()
-
-useCopyCode()
-
-const { isMobile } = useBasicLayout()
-const { addChat, updateChat, updateChatPartial, updateChatText } = useChat()
-const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
-// session uuid
 const { uuid: sessionUuid } = route.params as { uuid: string }
-chatStore.syncChatMessages(sessionUuid)
-
-const dataSources = computed(() => chatStore.getChatSessionDataByUuid(sessionUuid))
-const chatSession = computed(() => chatStore.getChatSessionByUuid(sessionUuid))
-
-const prompt = ref<string>('')
-const loading = ref<boolean>(false)
-const showUploadModal = ref<boolean>(false)
-const showModal = ref<boolean>(false)
-
-
-// 添加PromptStore
-const promptStore = usePromptStore()
-
-// 使用storeToRefs，保证store修改后，联想部分能够重新渲染
-const { promptList: promptTemplate } = storeToRefs<any>(promptStore)
-
-// 可优化部分
-// 搜索选项计算，这里使用value作为索引项，所以当出现重复value时渲染异常(多项同时出现选中效果)
-// 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现
-const searchOptions = computed(() => {
-  function filterItemsByPrompt(item: { key: string }): boolean {
-    const lowerCaseKey = item.key.toLowerCase()
-    const lowerCasePrompt = prompt.value.substring(1).toLowerCase()
-    return lowerCaseKey.includes(lowerCasePrompt)
-  }
-  function filterItemsByTitle(item: { title: string }): boolean {
-    const lowerCaseKey = item.title.toLowerCase()
-    const lowerCasePrompt = prompt.value.substring(1).toLowerCase()
-    return lowerCaseKey.includes(lowerCasePrompt)
-  }
-  if (prompt.value.startsWith('/')) {
-    const filterStores = chatStore.history.filter(filterItemsByTitle).map((obj: { uuid: any }) => {
-      return {
-        label: `UUID|$|${obj.uuid}`,
-        value: `UUID|$|${obj.uuid}`,
-      }
-    })
-
-    const filterPrompts = promptTemplate.value.filter(filterItemsByPrompt).map((obj: { value: any }) => {
-      return {
-        label: obj.value,
-        value: obj.value,
-      }
-    })
-    const all = filterStores.concat(filterPrompts)
-    return all
-  }
-  else {
-    return []
-  }
-})
-// value反渲染key
-const renderOption = (option: { label: string }) => {
-  for (const i of promptTemplate.value) {
-    if (i.value === option.label)
-      return [i.key]
-  }
-  for (const chat of chatStore.history) {
-    if (`UUID|$|${chat.uuid}` === option.label)
-      return [chat.title]
-  }
-  return []
-}
-
-function handleSubmit() {
-  onConversationStream()
-}
-
-async function onConversationStream() {
-  const message = prompt.value
-
-  if (loading.value)
-    return
-
-  if (!message || message.trim() === '')
-    return
-
-  const chatUuid = uuidv7()
-
-  addChat(
-    sessionUuid,
-    {
-      uuid: chatUuid,
-      dateTime: nowISO(),
-      text: message,
-      inversion: true,
-      error: false,
-    },
-  )
-  scrollToBottom()
-
-  loading.value = true
-  prompt.value = ''
-
-  // add a blank response
-  addChat(
-    sessionUuid,
-    {
-      uuid: '',
-      dateTime: nowISO(),
-      text: '',
-      loading: true,
-      inversion: false,
-      error: false,
-    },
-  )
-  scrollToBottomIfAtBottom()
-  const subscribleStrem = async () => {
-    try {
-      // Send the request with axios
-      const response = fetchChatStream(
-        sessionUuid,
-        chatUuid,
-        false,
-        message,
-        (progress: any) => {
-          const xhr = progress.event.target
-          const {
-            responseText,
-            status,
-          } = xhr
-          if (status >= 400) {
-            const error_json: { code: number; message: string; details: any } = JSON.parse(responseText)
-            updateChatPartial(
-              sessionUuid,
-              dataSources.value.length - 1,
-              {
-                loading: false,
-                error: true,
-                text: t(error_json.message), // how to add params to i18n
-              },
-            )
-            loading.value = false
-          }
-          else {
-            const chunk = getDataFromResponseText(responseText)
-            // Check if the chunk is not empty
-            if (chunk) {
-              // Parse the JSON data chunk
-              try {
-                const data = JSON.parse(chunk)
-                const answer = data.choices[0].delta.content
-                const answer_uuid = data.id.replace('chatcmpl-', '') // use answer id as uuid
-                updateChat(
-                  sessionUuid,
-                  dataSources.value.length - 1,
-                  {
-                    uuid: answer_uuid,
-                    dateTime: nowISO(),
-                    text: answer,
-                    inversion: false,
-                    error: false,
-                    loading: false,
-                  },
-                )
-                scrollToBottomIfAtBottom()
-              }
-              catch (error) {
-                // eslint-disable-next-line no-console
-                console.log(error)
-              }
-            }
-          }
-        },
-      )
-      return response
-    }
-    catch (error: any) {
-      // eslint-disable-next-line no-console
-      console.log(error)
-      const response = error.response
-      if (response.status >= 400) {
-        nui_msg.error(response.data.message)
-        loading.value = false
-      }
-    }
-  }
-
-  await subscribleStrem()
-  loading.value = false
-}
-
-async function onRegenerate(index: number) {
-  if (loading.value)
-    return
-
-  controller = new AbortController()
-
-  const chat = dataSources.value[index]
-
-  const chatUuid = chat.uuid
-  const message = chat.text
-
-  loading.value = true
-  updateChat(
-    sessionUuid,
-    index,
-    {
-      uuid: chatUuid,
-      dateTime: nowISO(),
-      text: '',
-      inversion: false,
-      error: false,
-      loading: false,
-    },
-  )
-
-  try {
-    const subscribleStrem = async () => {
-      try {
-        // Send the request with axios
-        const response = fetchChatStream(
-          sessionUuid,
-          chatUuid,
-          true,
-          message,
-          (progress: any) => {
-            const xhr = progress.event.target
-            const {
-              responseText,
-            } = xhr
-            // Extract the JSON data chunk from the responseText
-            const chunk = getDataFromResponseText(responseText)
-
-            // Check if the chunk is not empty
-            if (chunk) {
-              // Parse the JSON data chunk
-              const data = JSON.parse(chunk)
-              const answer = data.choices[0].delta.content
-              const answer_uuid = data.id.replace('chatcmpl-', '') // use answer id as uuid
-              updateChat(
-                sessionUuid,
-                index,
-                {
-                  uuid: answer_uuid,
-                  dateTime: nowISO(),
-                  text: answer,
-                  inversion: false,
-                  error: false,
-                  loading: false,
-                },
-              )
-            }
-          },
-        )
-        return response
-      }
-      catch (error) {
-        console.error('Error:', error)
-        throw error
-      }
-      finally {
-        console.log(loading.value)
-        loading.value = false
-        console.log(loading.value)
-      }
-    }
-
-    await subscribleStrem()
-  }
-  catch (error: any) {
-    // TODO: fix  error
-    if (error.message === 'canceled') {
-      updateChatPartial(
-        sessionUuid,
-        index,
-        {
-          loading: false,
-        },
-      )
-      return
-    }
-
-    const errorMessage = error?.message ?? t('common.wrong')
-
-    updateChat(
-      sessionUuid,
-      index,
-      {
-        uuid: chatUuid,
-        dateTime: nowISO(),
-        text: errorMessage,
-        inversion: false,
-        error: true,
-        loading: false,
-      },
-    )
-  }
-  finally {
-    loading.value = false
-  }
-}
 
-function handleExport() {
-  if (loading.value)
-    return
-
-  const dialogBox = dialog.warning({
-    title: t('chat.exportImage'),
-    content: t('chat.exportImageConfirm'),
-    positiveText: t('common.yes'),
-    negativeText: t('common.no'),
-    onPositiveClick: async () => {
-      try {
-        dialogBox.loading = true
-        const ele = document.getElementById('image-wrapper')
-        const canvas = await html2canvas(ele as HTMLDivElement, {
-          useCORS: true,
-        })
-        const imgUrl = canvas.toDataURL('image/png')
-        const tempLink = genTempDownloadLink(imgUrl)
-        document.body.appendChild(tempLink)
-        tempLink.click()
-        document.body.removeChild(tempLink)
-        window.URL.revokeObjectURL(imgUrl)
-        dialogBox.loading = false
-        nui_msg.success(t('chat.exportSuccess'))
-        Promise.resolve()
-      }
-      catch (error: any) {
-        nui_msg.error(t('chat.exportFailed'))
-      }
-      finally {
-        dialogBox.loading = false
-      }
-    },
-  })
-}
-
-async function handleSnapshot() {
-  // Get title input from user
-  // Call API to create chat snapshot and get UUID
-  const snapshot = await createChatSnapshot(sessionUuid)
-  const snapshot_uuid = snapshot.uuid
-  // Open new tab with snapshot UUID
-  window.open(`#/snapshot/${snapshot_uuid}`, '_blank')
-  nui_msg.success(t('chat.snapshotSuccess'))
-  // ask user to input the a title for the chat
-
-  // then call createChatSnapshot
-
-  // open new link in new tab with the chat snapshot uuid
-  // #/snapshot/<uuid>
-}
-async function handleCreateBot() {
-  const snapshot = await createChatBot(sessionUuid)
-  const snapshot_uuid = snapshot.uuid
-  window.open(`#/snapshot/${snapshot_uuid}`, '_blank')
-}
-
-
-
-// The user wants to delete the message with the given index.
-// If the message is already being deleted, we ignore the request.
-// If the user confirms that they want to delete the message, we call
-// the deleteChatByUuid function from the chat store.
-function handleDelete(index: number) {
-  if (loading.value)
-    return
-
-  dialog.warning({
-    title: t('chat.deleteMessage'),
-    content: t('chat.deleteMessageConfirm'),
-    positiveText: t('common.yes'),
-    negativeText: t('common.no'),
-    onPositiveClick: async () => {
-      chatStore.deleteChatByUuid(sessionUuid, index)
-    },
-  })
-}
-
-const pining = ref<boolean>(false)
-async function handleTogglePin(index: number) {
-  if (pining.value)
-    return
-
-  const chat = chatStore.getChatByUuidAndIndex(sessionUuid, index)
-  if (chat == null)
-    return
-
-  chat.isPin = !chat.isPin
-  try {
-    pining.value = true
-    await updateChatData(chat)
-    updateChat(
-      sessionUuid,
-      index,
-      chat,
-    )
-  }
-  finally {
-    pining.value = false
-  }
-}
-
-function handleAfterEdit(index: number, text: string) {
-  if (loading.value)
-    return
-
-  updateChatText(
-    sessionUuid,
-    index,
-    text,
-  )
-}
-
-function handleClear() {
-  if (loading.value)
-    return
-
-  dialog.warning({
-    title: t('chat.clearChat'),
-    content: t('chat.clearChatConfirm'),
-    positiveText: t('common.yes'),
-    negativeText: t('common.no'),
-    onPositiveClick: () => {
-      chatStore.clearChatByUuid(sessionUuid)
-    },
-  })
-}
-
-function handleEnter(event: KeyboardEvent) {
-  if (!isMobile.value) {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault()
-      handleSubmit()
-    }
-  }
-  else {
-    if (event.key === 'Enter' && event.ctrlKey) {
-      event.preventDefault()
-      handleSubmit()
-    }
-  }
-}
-
-// function handleStop() {
-//   if (loading.value) {
-//     controller.abort()
-//     loading.value = false
-//   }
-// }
-
-const handleSelectAutoComplete: OnSelect = function (v: string | number) {
-  if (typeof v === 'string' && v.startsWith('UUID|$|')) {
-    // set active session to the selected uuid
-    chatStore.setActive(v.split('|$|')[1])
-  }
-}
-
-const placeholder = computed(() => {
-  if (isMobile.value)
-    return t('chat.placeholderMobile')
-  return t('chat.placeholder')
-})
-
-const sendButtonDisabled = computed(() => {
-  return loading.value || !prompt.value || prompt.value.trim() === ''
-})
-
-const footerClass = computed(() => {
-  let classes = ['m-2', 'p-2']
-  if (isMobile.value)
-    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
-  return classes
-})
-
-onMounted(() => {
-  scrollToBottom()
-  // init default prompts
-  promptStore.getPromptList()
-})
-
-onUnmounted(() => {
-  if (loading.value)
-    controller.abort()
-})
-
-const handleUsePrompt = (_: string, value: string): void => {
-  prompt.value = value
-}
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-full">
-    <div>
-      <UploadModal :sessionUuid="sessionUuid" :showUploadModal="showUploadModal"
-        @update:showUploadModal="showUploadModal = $event" />
-    </div>
-    <HeaderComponent v-if="isMobile" @export="handleExport" @snapshot="handleSnapshot" @toggle="showModal = true" />
-    <main class="flex-1 overflow-hidden">
-      <NModal ref="sessionConfigModal" v-model:show="showModal" :title="$t('chat.sessionConfig')" preset="dialog">
-        <SessionConfig id="session-config" ref="sessionConfig" :uuid="sessionUuid" />
-      </NModal>
-      <div class="flex items-center justify-center mt-4 ">
-        <div class="w-4/5 md:w-1/3">
-          <ModelSelector :uuid="sessionUuid" :model="chatSession?.model"></ModelSelector>
-        </div>
-      </div>
-      <UploaderReadOnly v-if="!!sessionUuid" class="px-40" :sessionUuid="sessionUuid" :showUploaderButton="false">
-      </UploaderReadOnly>
-      <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
-        <div id="image-wrapper" class="w-full max-w-screen-xl mx-auto dark:bg-[#101014] mb-8"
-          :class="[isMobile ? 'p-2' : 'p-4']">
-          <template v-if="!dataSources.length">
-            <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
-              <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
-              <span>{{ $t('common.help') }}</span>
-            </div>
-            <PromptGallery @usePrompt="handleUsePrompt"></PromptGallery>
-          </template>
-          <template v-else>
-            <div>
-              <Message v-for="(item, index) of dataSources" :key="index" :date-time="item.dateTime"
-                :model="chatSession?.model" :text="item.text" :inversion="item.inversion" :error="item.error"
-                :is-prompt="item.isPrompt" :is-pin="item.isPin" :loading="item.loading" :pining="pining" :index="index"
-                @regenerate="onRegenerate(index)" @delete="handleDelete(index)" @toggle-pin="handleTogglePin(index)"
-                @after-edit="handleAfterEdit" />
-
-              <!--
-              <div class="sticky bottom-0 left-0 flex justify-center">
-                <NButton v-if="loading" type="warning" @click="handleStop">
-                  <template #icon>
-                    <SvgIcon icon="ri:stop-circle-line" />
-                  </template>
-{{ $t('chat.stopAnswer') }}
-</NButton>
-</div>
--->
-            </div>
-          </template>
-        </div>
-      </div>
-    </main>
-    <footer :class="footerClass">
-      <div class="w-full max-w-screen-xl m-auto">
-        <div class="flex items-center justify-between space-x-1">
-          <HoverButton :tooltip="$t('chat.clearChat')" @click="handleClear">
-            <span class="text-xl text-[#4b9e5f] dark:text-white">
-              <SvgIcon icon="icon-park-outline:clear" />
-            </span>
-          </HoverButton>
-          <HoverButton v-if="!isMobile" data-testid="snpashot-button" :tooltip="$t('chat.createBot')"
-            @click="handleCreateBot">
-            <span class="text-xl text-[#4b9e5f] dark:text-white">
-              <SvgIcon icon="fluent:bot-add-24-regular" />
-            </span>
-          </HoverButton>
-
-          <HoverButton v-if="!isMobile" data-testid="snpashot-button" :tooltip="$t('chat.chatSnapshot')"
-            @click="handleSnapshot">
-            <span class="text-xl text-[#4b9e5f] dark:text-white">
-              <SvgIcon icon="ic:twotone-ios-share" />
-            </span>
-          </HoverButton>
-
-          <HoverButton v-if="!isMobile" @click="showModal = true" :tooltip="$t('chat.chatSettings')">
-            <span class="text-xl text-[#4b9e5f]">
-              <SvgIcon icon="teenyicons:adjust-horizontal-solid" />
-            </span>
-          </HoverButton>
-
-
-      
-          <NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption"
-            :on-select="handleSelectAutoComplete">
-            <template #default="{ handleInput, handleBlur, handleFocus }">
-              <NInput id="message_textarea" v-model:value="prompt" type="textarea" :placeholder="placeholder"
-                data-testid="message_textarea" :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
-                @input="handleInput" @focus="handleFocus" @blur="handleBlur" @keypress="handleEnter" />
-            </template>
-          </NAutoComplete>
-          <button class="!-ml-8 z-10" @click="showUploadModal = true">
-            <span class="text-xl text-[#4b9e5f]">
-              <SvgIcon icon="clarity:attachment-line" />
-            </span>
-          </button>
-          <NButton id="send_message_button" class="!ml-4" data-testid="send_message_button" type="primary"
-            :disabled="sendButtonDisabled" @click="handleSubmit">
-            <template #icon>
-              <span class="dark:text-black">
-                <SvgIcon icon="ri:send-plane-fill" />
-              </span>
-            </template>
-          </NButton>
-
-        </div>
-      </div>
-    </footer>
+  <div class="h-full flex">
+      <Conversation :session-uuid="sessionUuid" />
   </div>
 </template>
\ No newline at end of file