From f9a4034764f874d20ba32920d307054a9fb4b417 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 27 Mar 2025 22:20:52 +0330
Subject: [PATCH] Add login assist state Add debounce effect for scroll to
 bottom

---
 .../product/ChatBox/ChatBoxContainer.vue      | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/components/product/ChatBox/ChatBoxContainer.vue b/frontend/components/product/ChatBox/ChatBoxContainer.vue
index 677dcb2..3e40912 100644
--- a/frontend/components/product/ChatBox/ChatBoxContainer.vue
+++ b/frontend/components/product/ChatBox/ChatBoxContainer.vue
@@ -20,6 +20,8 @@ const { isLoggedIn } = useAuth();
 const route = useRoute();
 const id = route.params.id as string | number;
 
+const scrollToBottomTimer = ref<NodeJS.Timeout | null>(null);
+
 const chatContainerEl = ref<HTMLElement | null>(null);
 
 const lastMessageBeforeUpdate = ref(0);
@@ -63,7 +65,10 @@ useInfiniteScroll(
 // methods
 
 const scrollToBottom = () => {
-    chatContainerScrollY.value = chatContainerEl.value?.scrollHeight ?? 0;
+    if (scrollToBottomTimer.value) clearTimeout(scrollToBottomTimer.value);
+    scrollToBottomTimer.value = setTimeout(() => {
+        chatContainerScrollY.value = chatContainerEl.value?.scrollHeight ?? 0;
+    }, 50);
 };
 
 // computed
@@ -137,8 +142,7 @@ whenever(
                     >
                         <div
                             :style="{
-                                maskImage:
-                                    'linear-gradient(to top, transparent, black 5%, black, black)',
+                                maskImage: 'linear-gradient(to top, transparent, black 5%, black, black)'
                             }"
                             class="hide-scrollbar flex flex-col py-7 gap-6 h-full overflow-y-auto"
                             ref="chatContainerEl"
@@ -184,11 +188,20 @@ whenever(
                 </Transition>
             </template>
             <div
-                class="text-black p-4.5 size-full flex justify-center items-center"
+                class="text-black p-6 size-full flex justify-center items-center flex-col"
                 v-else
             >
-                <img class="size-[50px]" src="/img/heymlz/heymlz-idle.gif" alt="" />
-                Please sign in first
+                <NuxtImg class="size-[250px]" src="/img/heymlz/heymlz-loading-1.gif" alt="" />
+                <div class="flex flex-col gap-4 items-center">
+                    <span class="text-center typo-p-xl font-bold">سلام دوست عزیز!</span>
+                    <p class="text-center typo-p-md">
+                        من میتونم هر سوالی رو درمورد این محصول جواب بدم
+                        اگه میخوای شروع کنیم روی دکمه زیر کلیک کن
+                    </p>
+                </div>
+                <NuxtLink to="/signin">
+                    <Button class="mt-8 rounded-full px-10">ورود به فروشگاه</Button>
+                </NuxtLink>
             </div>
         </div>
     </Transition>