@phonghq/go-chat 1.0.4 → 1.0.5

package/dist/test/chat/page/customer-detail/SubInformation.vue.js

@@ -0,0 +1,102 @@
+/// <reference types="C:/phonghq/go-chat/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import IconArrow from '../../../assets/icons/customer-detail/IconArrow.vue';
+const props = withDefaults(defineProps(), {
+    information: [],
+    title: ''
+});
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_defaults = {
+    information: [],
+    title: ''
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "w-full" },
+});
+__VLS_asFunctionalElement(__VLS_elements.h2, __VLS_elements.h2)({
+    ...{ class: "text-chat-haze-500 font-semibold" },
+});
+(__VLS_ctx.title);
+// @ts-ignore
+[title,];
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "bg-white rounded-xl border border-chat-haze-100 mt-1 p-4 space-y-4" },
+});
+for (const [item, x] of __VLS_getVForSourceType((__VLS_ctx.information))) {
+    (x);
+    // @ts-ignore
+    [information,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ onClick: (...[$event]) => {
+                item.click?.();
+            } },
+        ...{ class: "flex items-center gap-1 " },
+        ...{ class: ({ 'cursor-pointer': item.click }) },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "flex items-center gap-1 grow text-chat-haze-900" },
+    });
+    const __VLS_0 = ((item.icon));
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({}));
+    const __VLS_2 = __VLS_1({}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
+    (item.label);
+    if (item.value) {
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "flex items-center text-chat-haze-300" },
+        });
+        (item.value);
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+            ...{ class: "ml-1" },
+        });
+        /** @type {[typeof IconArrow, ]} */ ;
+        // @ts-ignore
+        const __VLS_5 = __VLS_asFunctionalComponent(IconArrow, new IconArrow({}));
+        const __VLS_6 = __VLS_5({}, ...__VLS_functionalComponentArgsRest(__VLS_5));
+    }
+    __VLS_asFunctionalElement(__VLS_elements.hr)({
+        ...{ class: "border-chat-haze-100 mx-6" },
+    });
+    __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (x < __VLS_ctx.information.length - 1) }, null, null);
+    // @ts-ignore
+    [information,];
+}
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-500']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['border']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-chat-haze-100']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['space-y-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-900']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-300']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-chat-haze-100']} */ ;
+/** @type {__VLS_StyleScopedClasses['mx-6']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/test/chat/page/error/Error.vue.js

@@ -0,0 +1,64 @@
+/// <reference types="C:/phonghq/go-chat/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { logout } from '../../../utils/chat/auth.js';
+const reload = () => window.location.reload();
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "m-auto w-max" },
+});
+__VLS_asFunctionalElement(__VLS_elements.h1, __VLS_elements.h1)({
+    ...{ class: "font-bold text-chat-haze-900 text-center mb-2" },
+    ...{ style: {} },
+});
+__VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+    ...{ class: "text-chat-haze-500 text-center mb-8" },
+    ...{ style: {} },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex gap-4" },
+});
+__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.reload();
+            // @ts-ignore
+            [reload,];
+        } },
+    ...{ class: "px-6 py-2 bg-[#004AB3] text-white rounded-lg" },
+});
+__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.logout();
+            // @ts-ignore
+            [logout,];
+        } },
+    ...{ class: "px-6 py-2 bg-[#004AB3] text-white rounded-lg" },
+});
+/** @type {__VLS_StyleScopedClasses['m-auto']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-max']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-900']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-500']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-8']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#004AB3]']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#004AB3]']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-lg']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({});
+export default {};

package/dist/test/chat/page/home/ChatList.vue.js

@@ -0,0 +1,387 @@
+import InputSearch from '../../../components/chat/common/input/InputSearch.vue';
+import IconPlus from '../../../assets/icons/IconPlus.vue';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import Avatar from '../../../components/chat/customer/Avatar.vue';
+import { getConversation } from '../../../utils/chat/conversation';
+import BaseSpin from '../../../components/chat/common/spin/BaseSpin.vue';
+import ScrollEvent from '../../../components/chat/ScrollEvent/ScrollEvent.vue';
+import { useDebounce } from '../../../utils/debounce';
+import { addHandleMqttMessage, connectMqtt, removeHandleMqttMessage, subscribeToTopic, unsubscribeFromTopic } from '../../../plugins/mqtt';
+import { TOPIC_HOME, TOPIC_STATUS_USER } from '../../../constant/mqtt';
+import { dataProfile } from '../../../utils/chat/auth';
+import { readMessages } from '../../../utils/chat/message';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { useDigibot } from '../../../composable/useDigibot';
+dayjs.extend(relativeTime);
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+const { digibotData, digibotId } = useDigibot();
+const receiver_id = defineModel('receiverId');
+const isOpen = ref(false);
+const keyword = ref('');
+const scrollEventRef = ref(null);
+const listConversations = ref([]);
+const params = ref({
+    page: 1,
+    search: ''
+});
+let pageCount = 0;
+const isLoadingSearch = ref(false);
+onMounted(() => {
+    handleConnectMqtt();
+});
+onUnmounted(() => {
+    handleDisconnectMqtt;
+});
+const handleDisconnectMqtt = () => {
+    TOPIC_HOME.forEach((item) => {
+        unsubscribeFromTopic(item + dataProfile.value?.id);
+        removeHandleMqttMessage('chat-list-' + item);
+    });
+    if (dataProfile.value?.user_type == 'tenant') {
+        subscribeToTopic(TOPIC_STATUS_USER + dataProfile.value?.id);
+        removeHandleMqttMessage('chat-list-' + TOPIC_STATUS_USER);
+    }
+};
+const handleConnectMqtt = async () => {
+    try {
+        if (dataProfile.value) {
+            await connectMqtt();
+            TOPIC_HOME.forEach((item) => {
+                subscribeToTopic(item + dataProfile.value?.id);
+                addHandleMqttMessage('chat-list-' + item, item + dataProfile.value?.id, mqttMessageHandler);
+            });
+            subscribeToTopic(TOPIC_STATUS_USER + dataProfile.value?.id);
+            addHandleMqttMessage('chat-list-' + TOPIC_STATUS_USER, TOPIC_STATUS_USER + dataProfile.value?.id, mqttMessageHandler);
+        }
+    }
+    catch (error) {
+        console.error(error);
+    }
+};
+const mqttMessageHandler = (topic, data) => {
+    getDataMqtt();
+    if (topic === TOPIC_HOME[0] + dataProfile.value?.id) {
+        const index = listConversations.value.findIndex((item) => item.id === data.id);
+        if (index != -1) {
+            listConversations.value.splice(index, 1);
+        }
+        listConversations.value.unshift(data);
+    }
+    if (topic === TOPIC_HOME[1] + dataProfile.value?.id) {
+        const index = listConversations.value.findIndex((item) => item.id === data.id);
+        if (index != -1) {
+            listConversations.value[index].unread_count = 0;
+        }
+    }
+    if (topic === TOPIC_HOME[2] + dataProfile.value?.id) {
+        listConversations.value.unshift(data?.conversations);
+    }
+    if (topic === TOPIC_STATUS_USER + dataProfile.value?.id) {
+        const index = listConversations.value.findIndex((e) => e.receiver_id == Number(data?.customer_id));
+        if (index != -1) {
+            listConversations.value[index].status = data.is_online ? 1 : 0;
+        }
+    }
+};
+const getDataMqtt = useDebounce(() => {
+    getData(undefined, { hideLoading: true, reset: true });
+}, 5000);
+const getData = async (data, option) => {
+    try {
+        if (!option?.hideLoading)
+            isLoadingSearch.value = true;
+        params.value = { ...params.value, ...(data ?? {}) };
+        const res = await getConversation(params.value);
+        if (option?.reset) {
+            listConversations.value = [];
+            console.log(digibotData);
+            listConversations.value.push(digibotData);
+            await nextTick();
+        }
+        listConversations.value.push(...(res?.items ?? []));
+        console.log(listConversations.value);
+        checkHasReceiveId();
+        params.value.page = res?._meta?.currentPage || 1;
+        pageCount = res?._meta?.pageCount || 1;
+    }
+    catch (error) {
+        console.error(error);
+    }
+    finally {
+        isLoadingSearch.value = false;
+    }
+};
+const checkHasReceiveId = () => {
+    const hasReceiveId = listConversations.value?.some((e) => e.receiver_id === receiver_id.value && receiver_id.value);
+    if (props.response == 'tablet') {
+        if (!hasReceiveId && listConversations.value?.length)
+            emit('selectReceiver', listConversations.value[0]);
+    }
+};
+const handleSearch = (value) => {
+    // listConversations.value = []
+    getData({ search: value }, { reset: true });
+};
+const handleScroll = useDebounce(async () => {
+    if (params.value.page >= pageCount) {
+        scrollEventRef.value?.hideLoading();
+        return;
+    }
+    let page = params.value.page + 1;
+    await getData({ page });
+    scrollEventRef.value?.hideLoading();
+}, 200);
+const selectUser = (user) => {
+    emit('selectReceiver', user);
+};
+const handleReadMessage = () => {
+    const index = listConversations.value.findIndex((e) => e.receiver_id == receiver_id.value);
+    if (index > -1) {
+        if (listConversations.value[index].unread_count) {
+            readMessages(listConversations.value[index].id);
+            listConversations.value[index].unread_count = 0;
+        }
+    }
+};
+getData({}, { reset: true });
+const __VLS_exposed = { handleReadMessage };
+defineExpose(__VLS_exposed);
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_modelEmit = defineEmits();
+const __VLS_defaults = {};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "h-full flex flex-col chat-box-white pt-6" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "shrink-0 w-full px-6 flex gap-2 mb-6" },
+});
+/** @type {[typeof InputSearch, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(InputSearch, new InputSearch({
+    ...{ 'onSearch': {} },
+    ...{ class: "h-[45px] grow" },
+    response: (__VLS_ctx.response),
+    modelValue: (__VLS_ctx.keyword),
+}));
+const __VLS_1 = __VLS_0({
+    ...{ 'onSearch': {} },
+    ...{ class: "h-[45px] grow" },
+    response: (__VLS_ctx.response),
+    modelValue: (__VLS_ctx.keyword),
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+let __VLS_3;
+let __VLS_4;
+const __VLS_5 = ({ search: {} },
+    { onSearch: (__VLS_ctx.handleSearch) });
+// @ts-ignore
+[response, keyword, handleSearch,];
+var __VLS_2;
+__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+    ...{ class: "h-[45px] w-[45px] rounded-full flex-center bg-[#C7DEFF]" },
+});
+/** @type {[typeof IconPlus, ]} */ ;
+// @ts-ignore
+const __VLS_7 = __VLS_asFunctionalComponent(IconPlus, new IconPlus({
+    ...{ class: "text-[#004AB3]" },
+}));
+const __VLS_8 = __VLS_7({
+    ...{ class: "text-[#004AB3]" },
+}, ...__VLS_functionalComponentArgsRest(__VLS_7));
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "grow relative overflow-hidden" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "absolute sc-full flex-center bg-black/10" },
+});
+__VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.isLoadingSearch) }, null, null);
+// @ts-ignore
+[isLoadingSearch,];
+/** @type {[typeof BaseSpin, ]} */ ;
+// @ts-ignore
+const __VLS_11 = __VLS_asFunctionalComponent(BaseSpin, new BaseSpin({}));
+const __VLS_12 = __VLS_11({}, ...__VLS_functionalComponentArgsRest(__VLS_11));
+/** @type {[typeof ScrollEvent, typeof ScrollEvent, ]} */ ;
+// @ts-ignore
+const __VLS_15 = __VLS_asFunctionalComponent(ScrollEvent, new ScrollEvent({
+    ...{ 'onGetDataBottom': {} },
+    ref: "scrollEventRef",
+    ...{ class: "h-full overflow-auto" },
+    bottom: true,
+}));
+const __VLS_16 = __VLS_15({
+    ...{ 'onGetDataBottom': {} },
+    ref: "scrollEventRef",
+    ...{ class: "h-full overflow-auto" },
+    bottom: true,
+}, ...__VLS_functionalComponentArgsRest(__VLS_15));
+let __VLS_18;
+let __VLS_19;
+const __VLS_20 = ({ getDataBottom: {} },
+    { onGetDataBottom: (__VLS_ctx.handleScroll) });
+/** @type {typeof __VLS_ctx.scrollEventRef} */ ;
+var __VLS_21 = {};
+const { default: __VLS_23 } = __VLS_17.slots;
+// @ts-ignore
+[handleScroll, scrollEventRef,];
+for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
+    // @ts-ignore
+    [listConversations,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ onClick: (...[$event]) => {
+                __VLS_ctx.selectUser(user);
+                // @ts-ignore
+                [selectUser,];
+            } },
+        ...{ class: "" },
+        key: (user.id),
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "w-full overflow-hidden flex items-center hover:bg-[#EDF5FF] cursor-pointer px-6 py-2" },
+        ...{ class: ({ 'bg-[#EDF5FF]': __VLS_ctx.receiver_id == user.receiver_id && __VLS_ctx.response == 'tablet' }) },
+    });
+    // @ts-ignore
+    [response, receiver_id,];
+    /** @type {[typeof Avatar, ]} */ ;
+    // @ts-ignore
+    const __VLS_24 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+        id: (user.id),
+        ...{ class: "shrink-0" },
+        src: (user.avatar ?? ''),
+        color: (user.color),
+        name: (user.username ?? ''),
+    }));
+    const __VLS_25 = __VLS_24({
+        id: (user.id),
+        ...{ class: "shrink-0" },
+        src: (user.avatar ?? ''),
+        color: (user.color),
+        name: (user.username ?? ''),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_24));
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "grow ml-3 overflow-hidden" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "flex justify-between items-center gap-4" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "truncate" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "flex items-center" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+        ...{ class: "font-semibold" },
+    });
+    (user.username);
+    if (user.unread_count) {
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+            ...{ class: "ml-2 bg-[#E60000] text-white text-xs font-bold px-2 py-[1px] flex-center rounded-full" },
+        });
+        (user.unread_count);
+    }
+    __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+        ...{ class: "text-sm truncate" },
+        ...{ class: ({
+                'font-semibold': user.unread_count,
+                'text-chat-gray-3': !user.unread_count
+            }) },
+    });
+    (user.last_message ?? 'No messages');
+    __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+        ...{ class: "text-sm text-right text-chat-gray-4 w-[130px]" },
+    });
+    (__VLS_ctx.dayjs(user.last_message_time).isValid()
+        ? __VLS_ctx.dayjs(user.last_message_time).fromNow()
+        : (user.last_message_time ?? ''));
+    // @ts-ignore
+    [dayjs, dayjs,];
+}
+var __VLS_17;
+/** @type {__VLS_StyleScopedClasses['']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['chat-box-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['pt-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-[45px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-[45px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-[45px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#C7DEFF]']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-[#004AB3]']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['sc-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-black/10']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-auto']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:bg-[#EDF5FF]']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#EDF5FF]']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-between']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['truncate']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#E60000]']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-xs']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-[1px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['truncate']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-gray-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-right']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-gray-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-[130px]']} */ ;
+// @ts-ignore
+var __VLS_22 = __VLS_21;
+const __VLS_export = (await import('vue')).defineComponent({
+    setup: () => (__VLS_exposed),
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};