heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add auth for chat

Browse Source
This commit is contained in:
marzban-dev
2025-01-16 16:00:35 +03:30
parent 389edd9317
commit 5cb831e848
1 changed files with 50 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/product/ChatBox/ChatBoxContainer.vue
+50 -40
View File
@@ -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>