From 5cb831e848898aa37aa4de573188c57409f3b290 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 16 Jan 2025 16:00:35 +0330
Subject: [PATCH] Add auth for chat

---
 .../product/ChatBox/ChatBoxContainer.vue      | 90 ++++++++++---------
 1 file changed, 50 insertions(+), 40 deletions(-)

diff --git a/frontend/components/product/ChatBox/ChatBoxContainer.vue b/frontend/components/product/ChatBox/ChatBoxContainer.vue
index a0c2d63..cedb98c 100644
--- a/frontend/components/product/ChatBox/ChatBoxContainer.vue
+++ b/frontend/components/product/ChatBox/ChatBoxContainer.vue
@@ -7,6 +7,7 @@ import ChatInput from "~/components/product/ChatBox/ChatInput.vue";
 import { useIsMutating } from "@tanstack/vue-query";
 import { MUTATION_KEYS } from "~/constants";
 import CloseButton from "~/components/product/ChatBox/CloseButton.vue";
+import { useAuth } from "~/composables/api/auth/useAuth";
 
 // provide-inject
 
@@ -14,6 +15,8 @@ const { isOpen } = inject("isOpen") as any;
 
 // state
 
+const { isLoggedIn } = useAuth();
+
 const route = useRoute();
 const id = route.params.id as string | number;
 
@@ -126,55 +129,62 @@ whenever(
         >
             <CloseButton :disabled="!!isCreateMessagePending" />
 
-            <Transition name="zoom" mode="out-in">
-                <div
-                    v-if="!isChatPending"
-                    class="p-4.5 h-full flex flex-col justify-between gap-4"
-                >
+            <template v-if="isLoggedIn">
+                <Transition name="zoom" mode="out-in">
+
                     <div
-                        :style="{
+                        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)',
                         }"
-                        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"
+                            class="hide-scrollbar flex flex-col py-7 gap-6 h-full overflow-y-auto"
+                            ref="chatContainerEl"
                         >
-                            <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"
+                                :key="message.id"
+                                :id="message.id"
+                                :reverse="message.sender === 'ai'"
+                                :content="message.content"
+                                :isLast="chatMessages?.length === index + 1"
+                                @textUpdate="scrollToBottom"
+                            />
+                            <ChatMessage
+                                v-if="!!isCreateMessagePending"
+                                :id="Date.now() + 1"
+                                reverse
+                                content=""
+                                isLast
+                                @textUpdate="scrollToBottom"
+                                :loadingContent="!!isCreateMessagePending"
+                            />
                         </div>
-                        <ChatMessage
-                            v-for="(message, index) in chatMessages"
-                            :key="message.id"
-                            :id="message.id"
-                            :reverse="message.sender === 'ai'"
-                            :content="message.content"
-                            :isLast="chatMessages?.length === index + 1"
-                            @textUpdate="scrollToBottom"
-                        />
-                        <ChatMessage
-                            v-if="!!isCreateMessagePending"
-                            :id="Date.now() + 1"
-                            reverse
-                            content=""
-                            isLast
-                            @textUpdate="scrollToBottom"
-                            :loadingContent="!!isCreateMessagePending"
-                        />
+
+                        <ChatInput />
                     </div>
 
-                    <ChatInput />
-                </div>
 
-                <div
-                    v-else
-                    class="w-full h-full flex items-center justify-center absolute inset-0"
-                >
-                    <AiLoading />
-                </div>
-            </Transition>
+                    <div
+                        v-else
+                        class="w-full h-full flex items-center justify-center absolute inset-0"
+                    >
+                        <AiLoading />
+                    </div>
+                </Transition>
+            </template>
+            <div class="text-black p-4.5 size-full flex justify-center items-center" v-else>
+                Please sign in first
+            </div>
         </div>
     </Transition>
 </template>