removed unneccesary imports

frontend/components/product/ChatBox/ChatBoxContainer.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-
 // import
 
 import AiLoading from "~/components/product/ChatBox/AiLoading.vue";
 import useGetChat from "~/composables/api/chat/useGetChat";
 import ChatInput from "~/components/product/ChatBox/ChatInput.vue";
-import { useInfiniteScroll, useScroll, useScrollLock, whenever } from "@vueuse/core";
 import { useIsMutating } from "@tanstack/vue-query";
 import { MUTATION_KEYS } from "~/constants";
 import CloseButton from "~/components/product/ChatBox/CloseButton.vue";
@@ -27,24 +25,26 @@ const {
     isPending: isChatPending,
     isFetchingNextPage: isNextChatPagePending,
     hasNextPage: hasMoreChat,
-    fetchNextPage: loadMoreChat
+    fetchNextPage: loadMoreChat,
 } = useGetChat(id, isOpen);
 const isCreateMessagePending = useIsMutating({
-    mutationKey: [MUTATION_KEYS.create_chat]
+    mutationKey: [MUTATION_KEYS.create_chat],
 });
 
 const canLoadMoreChat = ref(false);
 
 const isChatScrollLocked = useScrollLock(chatContainerEl);
 const { y: chatContainerScrollY } = useScroll(chatContainerEl, {
-    behavior: "smooth"
+    behavior: "smooth",
 });
 
 useInfiniteScroll(
     chatContainerEl,
     async () => {
         if (hasMoreChat.value && !isChatPending.value) {
-            lastMessageBeforeUpdate.value = chatMessages.value ? chatMessages.value[0].id : 0;
+            lastMessageBeforeUpdate.value = chatMessages.value
+                ? chatMessages.value[0].id
+                : 0;
             await loadMoreChat();
         }
     },
@@ -52,7 +52,7 @@ useInfiniteScroll(
         distance: 10,
         direction: "top",
         throttle: 1000,
-        canLoadMore: () => canLoadMoreChat.value
+        canLoadMore: () => canLoadMoreChat.value,
     }
 );
 
@@ -65,42 +65,56 @@ const scrollToBottom = () => {
 // computed
 
 const chatMessages = computed(() => {
-    return chat.value?.pages.flatMap(page => {
-        return page.results;
-    }).reverse();
+    return chat.value?.pages
+        .flatMap((page) => {
+            return page.results;
+        })
+        .reverse();
 });
 
 // watch
 
-watch(() => isCreateMessagePending.value, (newValue) => {
-    requestAnimationFrame(() => {
-        scrollToBottom();
-        isChatScrollLocked.value = !!newValue;
-    });
-});
-
-watch(() => chat.value, () => {
-    if (canLoadMoreChat.value) {
-        const scrollTopOld = chatContainerEl.value!.scrollTop - 100;
+watch(
+    () => isCreateMessagePending.value,
+    (newValue) => {
         requestAnimationFrame(() => {
-            const lastChatMessageEl = document.querySelector(`#message-container-${lastMessageBeforeUpdate.value}`) as HTMLElement;
-            lastChatMessageEl?.scrollIntoView();
-            chatContainerEl.value!.scrollTop = chatContainerEl.value!.scrollTop + scrollTopOld;
+            scrollToBottom();
+            isChatScrollLocked.value = !!newValue;
         });
     }
-});
+);
 
-whenever(() => !!chatContainerEl.value, () => {
-    requestAnimationFrame(() => {
-        scrollToBottom();
-    });
-    setTimeout(() => {
-        canLoadMoreChat.value = true;
-    }, 2000);
-}, {
-    once: true
-});
+watch(
+    () => chat.value,
+    () => {
+        if (canLoadMoreChat.value) {
+            const scrollTopOld = chatContainerEl.value!.scrollTop - 100;
+            requestAnimationFrame(() => {
+                const lastChatMessageEl = document.querySelector(
+                    `#message-container-${lastMessageBeforeUpdate.value}`
+                ) as HTMLElement;
+                lastChatMessageEl?.scrollIntoView();
+                chatContainerEl.value!.scrollTop =
+                    chatContainerEl.value!.scrollTop + scrollTopOld;
+            });
+        }
+    }
+);
 
+whenever(
+    () => !!chatContainerEl.value,
+    () => {
+        requestAnimationFrame(() => {
+            scrollToBottom();
+        });
+        setTimeout(() => {
+            canLoadMoreChat.value = true;
+        }, 2000);
+    },
+    {
+        once: true,
+    }
+);
 </script>
 
 <template>
@@ -109,33 +123,26 @@ whenever(() => !!chatContainerEl.value, () => {
             v-if="isOpen"
             class="fixed right-8 bottom-8 w-[450px] transition-all duration-500 overflow-hidden h-[700px] rounded-250 shadow-2xl shadow-black/30 pt-[40px] bg-white"
         >
+            <CloseButton :disabled="!!isCreateMessagePending" />
 
-            <CloseButton
-                :disabled="!!isCreateMessagePending"
-            />
-
-            <Transition
-                name="zoom"
-                mode="out-in"
-            >
-
+            <Transition name="zoom" mode="out-in">
                 <div
                     v-if="!isChatPending"
                     class="p-4.5 h-full flex flex-col justify-between gap-4"
                 >
-
                     <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"
                     >
-                        <div v-if="hasMoreChat" class="py-2 flex items-center justify-center">
-                            <Icon
-                                name="svg-spinners:3-dots-fade"
-                                size="24"
-                            />
+                        <div
+                            v-if="hasMoreChat"
+                            class="py-2 flex items-center justify-center"
+                        >
+                            <Icon name="svg-spinners:3-dots-fade" size="24" />
                         </div>
                         <ChatMessage
                             v-for="(message, index) in chatMessages"
@@ -166,9 +173,7 @@ whenever(() => !!chatContainerEl.value, () => {
                 >
                     <AiLoading />
                 </div>
-
             </Transition>
-
         </div>
     </Transition>
-</template>
+</template>