From f084460d1cdca973ae26ca47869dfc3178ebe1c1 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Thu, 9 Mar 2023 18:57:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=9B=BE=E7=89=87=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chat/components/Message/Text.vue |  2 +-
 src/views/chat/hooks/useScroll.ts          | 11 +++++------
 src/views/chat/index.vue                   |  9 ++++++---
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue
index 61736a1..cca4d1a 100644
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -38,7 +38,7 @@ const wrapClass = computed(() => {
     'text-wrap',
     'min-w-[20px]',
     'rounded-md',
-    isMobile.value ? 'p-2' : 'p-3',
+    isMobile.value ? 'p-2' : 'px-3 py-2',
     props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
     props.inversion ? 'dark:bg-[#a1dc95]' : 'dark:bg-[#1e1e20]',
     { 'text-red-500': props.error },
diff --git a/src/views/chat/hooks/useScroll.ts b/src/views/chat/hooks/useScroll.ts
index 9edddbf..e5e4b35 100644
--- a/src/views/chat/hooks/useScroll.ts
+++ b/src/views/chat/hooks/useScroll.ts
@@ -7,7 +7,7 @@ interface ScrollReturn {
   scrollRef: Ref<ScrollElement>
   scrollToBottom: () => Promise<void>
   scrollToTop: () => Promise<void>
-	scrollToBottomIfAtBottom: () => Promise<void>
+  scrollToBottomIfAtBottom: () => Promise<void>
 }
 
 export function useScroll(): ScrollReturn {
@@ -26,20 +26,19 @@ export function useScroll(): ScrollReturn {
   }
 
   const scrollToBottomIfAtBottom = async () => {
-		await nextTick()
+    await nextTick()
     if (scrollRef.value) {
       const threshold = 50 // 阈值，表示滚动条到底部的距离阈值
       const distanceToBottom = scrollRef.value.scrollHeight - scrollRef.value.scrollTop - scrollRef.value.clientHeight
-      if (distanceToBottom <= threshold) {
+      if (distanceToBottom <= threshold)
         scrollRef.value.scrollTop = scrollRef.value.scrollHeight
-      }
     }
   }
-	
+
   return {
     scrollRef,
     scrollToBottom,
     scrollToTop,
-		scrollToBottomIfAtBottom,
+    scrollToBottomIfAtBottom,
   }
 }
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index b837a2f..7ac5275 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -120,7 +120,6 @@ async function onConversation() {
         }
       },
     })
-    scrollToBottomIfAtBottom()
   }
   catch (error: any) {
     const errorMessage = error?.message ?? t('common.wrong')
@@ -165,10 +164,10 @@ async function onConversation() {
         requestOptions: { prompt: message, options: { ...options } },
       },
     )
-    scrollToBottom()
   }
   finally {
     loading.value = false
+    scrollToBottom()
   }
 }
 
@@ -406,7 +405,11 @@ onUnmounted(() => {
         ref="scrollRef"
         class="h-full overflow-hidden overflow-y-auto"
       >
-        <div id="image-wrapper" class="w-full max-w-screen-xl m-auto" :class="[isMobile ? 'p-2' : 'p-4']">
+        <div
+          id="image-wrapper"
+          class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
+          :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" />