@phonghq/go-chat 1.0.9 → 1.0.11

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

@@ -3,7 +3,7 @@ import IconPlan from '../../../assets/icons/IconPlan.vue';
 import EmojiPicker from 'vue3-emoji-picker';
 import 'vue3-emoji-picker/css';
 import dayjs from 'dayjs';
-import { DATE_FORMATS } from '../../../constant/datetime';
+import { DATE_FORMATS, TIME_ZONE_UTC } from '../../../constant/datetime';
 import { dataProfile } from '../../../utils/chat/auth';
 import { ref } from 'vue';
 import PopoverBase from '../../../components/chat/common/popover/PopoverBase.vue';
@@ -35,9 +35,10 @@ const handleSendMessage = async (type) => {
     keyword.value = '';
     chatId++;
     const id = props.data?.id.toString() + '-' + chatId;
+    console.log(dayjs().tz(TIME_ZONE_UTC).format(DATE_FORMATS['DATE_FORMAT_FULL']));
     const data = {
         conversation_id: 135,
-        created_at: dayjs().format(DATE_FORMATS['DATE_FORMAT_FULL']),
+        created_at: dayjs().tz(TIME_ZONE_UTC).format(DATE_FORMATS['DATE_FORMAT_FULL']),
         id,
         message: messageContent,
         receiver_id: props.data?.id || 0,

package/dist/test/components/chat/call/Calling.vue.js

@@ -1,15 +1,17 @@
 /// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import DrawerBase from '../../../components/common/drawer/DrawerBase.vue';
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
 import IconPhone from '../../../assets/icons/call/IconPhone.vue';
 import { dataProfile } from '../../../utils/chat/auth.js';
-import { addHandleMqttMessage, connectMqtt, removeHandleMqttMessage, subscribeToTopic, unsubscribeFromTopic } from '../../../plugins/mqtt.js';
-import { TOPIC_DETAIL_CALL } from '../../../constant/mqtt.js';
 import { useCallHelper } from '../../../composable/useCallHelper';
 import IconPhoneCancel from '../../../assets/icons/call/IconPhoneCancel.vue';
 import { addHandleWebSK, removeHandleWebSK } from '../../../plugins/websocket';
-import { callClient, callOutBound } from '../../../utils/chat/call';
-const { handleOffer, handleOfferResponse, call, end, endPc, addIceCandidate, sendOfferOk } = useCallHelper();
+import { callClient } from '../../../utils/chat/call';
+import { useAudioStream } from '../../../composable/TestSound';
+import DrawerBaseCustom from '../../../components/common/drawer/DrawerBaseCustom.vue';
+import Avatar from '../../../components/chat/customer/Avatar.vue';
+const { handleOffer, handleOfferResponse, call, end, userRemoter, handleMedia, startIncomingCall } = useCallHelper();
+const { enqueueSpeakerChunk, processSpeakerQueue } = useAudioStream('');
+const props = withDefaults(defineProps(), {});
 const STATUS = {
     CONNECTING: 'Connecting...',
     CALLING: 'calling',
@@ -18,18 +20,22 @@ const STATUS = {
     CALL_START: 'in-progress',
     CALL_END: 'completed'
 };
-const STATUS_LABEL = {
-    [STATUS.CONNECTING]: 'Connecting...',
-    [STATUS.CALLING]: 'Calling...',
-    [STATUS.RINGING]: 'Ringing...',
-    [STATUS.CONNECT_FAILED]: 'Connect Error',
-    [STATUS.CALL_START]: '',
-    [STATUS.CALL_END]: 'Call Ended'
-};
+const STATUS_LABEL = computed(() => {
+    return {
+        [STATUS.CONNECTING]: 'Connecting...',
+        [STATUS.CALLING]: 'Calling...',
+        [STATUS.RINGING]: 'Ringing...',
+        [STATUS.CONNECT_FAILED]: errorMessage.value || 'Connect Error',
+        [STATUS.CALL_START]: '',
+        [STATUS.CALL_END]: 'Call Ended'
+    };
+});
 const callStatus = ref(STATUS.CONNECTING);
 const duration = ref('00:00');
 const drawerVisible = ref(false);
 const disable = ref(false);
+const errorMessage = ref('');
+const drawerVisibleRef = ref(null);
 let timer = null;
 let timeOut = null;
 onMounted(() => {
@@ -43,6 +49,7 @@ onUnmounted(() => {
         clearInterval(timer);
     if (timeOut)
         clearTimeout(timeOut);
+    errorMessage.value = '';
 });
 let dataWebSK = null;
 function startTimer() {
@@ -66,21 +73,28 @@ function endCall() {
     clearInterval(timer);
     disable.value = false;
     drawerVisible.value = false;
+    drawerVisibleRef.value?.close();
+    if (timer)
+        clearInterval(timer);
+    if (timeOut)
+        clearTimeout(timeOut);
+    errorMessage.value = '';
 }
 const open = () => {
     drawerVisible.value = true;
     disable.value = true;
+    drawerVisibleRef.value?.open();
 };
 const startCall = async (data) => {
     try {
         callStatus.value = STATUS.CONNECTING;
         open();
-        await callOutBound(data);
-        // await call(data)
+        await call(data);
         callStatus.value = STATUS.CALLING;
     }
     catch (e) {
         console.log(e);
+        errorMessage.value = e?.message || JSON.stringify(e);
         callStatus.value = STATUS.CONNECT_FAILED;
     }
 };
@@ -90,6 +104,7 @@ const answer = async () => {
     // sendOfferOk()
 };
 const handleMqttMessage = async (message) => {
+    let da = true;
     if (message?.data?.status == STATUS.RINGING) {
         if (message?.data?.to_number == dataProfile.value?.phone) {
             callStatus.value = STATUS.RINGING;
@@ -101,89 +116,104 @@ const handleMqttMessage = async (message) => {
         }
     }
     else if (message?.data?.status == STATUS.CALL_START) {
-        callStatus.value = STATUS.CALL_START;
+        try {
+            await startIncomingCall();
+            startTimer();
+            callStatus.value = STATUS.CALL_START;
+        }
+        catch (e) {
+            console.log(e);
+            endCall();
+        }
     }
     else if (message?.data?.status == STATUS.CALL_END) {
         endCall();
     }
+    else {
+        da = false;
+        handleMedia(message);
+    }
+    if (da)
+        console.log(message);
 };
-// const handleMqttMessage = async (topic: string, message: any) => {
-//   if (topic == TOPIC_DETAIL_CALL + dataProfile.value?.id) {
-//     console.log(message)
-//     if (message?.type === 'offer') {
-//       const status = await handleOffer(message)
-//       if (status) {
-//         callStatus.value =  STATUS.CALLING
-//         open()
-//       }
-//     } else if (message?.type === 'offer-response') {
-//       await handleOfferResponse(message)
-//       callStatus.value =  STATUS.CALL_START
-//     } else if (message?.type === 'candidate') {
-//       addIceCandidate(message)
-//     } else if (message?.type === 'end-call') {
-//       endPc(message?.link)
-//       callStatus.value = STATUS.CALL_END
-//     }
-//   }
-// }
 const __VLS_exposed = { startCall, endCall };
 defineExpose(__VLS_exposed);
 watch(dataProfile, async (newValue, oldValue) => {
     if (oldValue?.id && oldValue?.id != newValue?.id) {
-        unsubscribeFromTopic(TOPIC_DETAIL_CALL + oldValue?.id);
-        removeHandleMqttMessage('call-message');
         removeHandleWebSK('call-message');
     }
     if (newValue?.id && oldValue?.id != newValue?.id) {
-        await connectMqtt();
-        subscribeToTopic(TOPIC_DETAIL_CALL + newValue?.id);
-        addHandleMqttMessage('call-message', TOPIC_DETAIL_CALL + newValue?.id, handleMqttMessage);
+        addHandleWebSK('call-message', handleMqttMessage);
         addHandleWebSK('call-message', handleMqttMessage);
     }
 }, { immediate: true });
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_defaults = {};
 const __VLS_ctx = {
     ...{},
     ...{},
+    ...{},
+    ...{},
 };
 let __VLS_elements;
 let __VLS_components;
 let __VLS_directives;
-/** @type {[typeof DrawerBase, typeof DrawerBase, ]} */ ;
+/** @type {[typeof DrawerBaseCustom, typeof DrawerBaseCustom, ]} */ ;
 // @ts-ignore
-const __VLS_0 = __VLS_asFunctionalComponent(DrawerBase, new DrawerBase({
-    open: (__VLS_ctx.drawerVisible),
+const __VLS_0 = __VLS_asFunctionalComponent(DrawerBaseCustom, new DrawerBaseCustom({
+    ref: "drawerVisibleRef",
     width: (500),
-    disableClose: (__VLS_ctx.disable),
+    disabledClose: (__VLS_ctx.disable),
+    responsive: (__VLS_ctx.responsive),
 }));
 const __VLS_1 = __VLS_0({
-    open: (__VLS_ctx.drawerVisible),
+    ref: "drawerVisibleRef",
     width: (500),
-    disableClose: (__VLS_ctx.disable),
+    disabledClose: (__VLS_ctx.disable),
+    responsive: (__VLS_ctx.responsive),
 }, ...__VLS_functionalComponentArgsRest(__VLS_0));
-const { default: __VLS_3 } = __VLS_2.slots;
+/** @type {typeof __VLS_ctx.drawerVisibleRef} */ ;
+var __VLS_3 = {};
+const { default: __VLS_5 } = __VLS_2.slots;
 // @ts-ignore
-[drawerVisible, disable,];
+[disable, responsive, drawerVisibleRef,];
 {
-    const { content: __VLS_4 } = __VLS_2.slots;
+    const { content: __VLS_6 } = __VLS_2.slots;
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "flex flex-col items-center justify-center h-screen bg-chat-haze-300 text-white relative" },
+        ...{ class: "flex flex-col items-center justify-center h-full bg-chat-haze-300 text-white relative" },
     });
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-gray-700" },
-    });
-    __VLS_asFunctionalElement(__VLS_elements.img)({
-        src: "https://i.pravatar.cc/300",
-        alt: "avatar",
-        ...{ class: "w-full h-full object-cover" },
+        ...{ class: "h-40 w-40 rounded-full overflow-hidden mb-4 border-4 border-gray-700 flex-center" },
     });
+    /** @type {[typeof Avatar, ]} */ ;
+    // @ts-ignore
+    const __VLS_7 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+        ...{ class: "" },
+        src: (__VLS_ctx.userRemoter?.avatar ?? ''),
+        id: (__VLS_ctx.userRemoter?.id ?? ''),
+        color: (__VLS_ctx.userRemoter?.color),
+        name: (__VLS_ctx.userRemoter?.username),
+        size: "xxl",
+    }));
+    const __VLS_8 = __VLS_7({
+        ...{ class: "" },
+        src: (__VLS_ctx.userRemoter?.avatar ?? ''),
+        id: (__VLS_ctx.userRemoter?.id ?? ''),
+        color: (__VLS_ctx.userRemoter?.color),
+        name: (__VLS_ctx.userRemoter?.username),
+        size: "xxl",
+    }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+    // @ts-ignore
+    [userRemoter, userRemoter, userRemoter, userRemoter,];
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "text-center" },
     });
     __VLS_asFunctionalElement(__VLS_elements.h2, __VLS_elements.h2)({
         ...{ class: "text-2xl font-semibold" },
     });
+    (__VLS_ctx.userRemoter?.username);
+    // @ts-ignore
+    [userRemoter,];
     __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
         ...{ class: "text-gray-400 mt-1" },
     });
@@ -204,8 +234,8 @@ const { default: __VLS_3 } = __VLS_2.slots;
         [answer,];
         /** @type {[typeof IconPhone, ]} */ ;
         // @ts-ignore
-        const __VLS_5 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
-        const __VLS_6 = __VLS_5({}, ...__VLS_functionalComponentArgsRest(__VLS_5));
+        const __VLS_11 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
+        const __VLS_12 = __VLS_11({}, ...__VLS_functionalComponentArgsRest(__VLS_11));
     }
     __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
         ...{ onClick: (__VLS_ctx.endCall) },
@@ -215,8 +245,8 @@ const { default: __VLS_3 } = __VLS_2.slots;
     [endCall,];
     /** @type {[typeof IconPhoneCancel, ]} */ ;
     // @ts-ignore
-    const __VLS_9 = __VLS_asFunctionalComponent(IconPhoneCancel, new IconPhoneCancel({}));
-    const __VLS_10 = __VLS_9({}, ...__VLS_functionalComponentArgsRest(__VLS_9));
+    const __VLS_15 = __VLS_asFunctionalComponent(IconPhoneCancel, new IconPhoneCancel({}));
+    const __VLS_16 = __VLS_15({}, ...__VLS_functionalComponentArgsRest(__VLS_15));
     __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
         ...{ class: "absolute bottom-6 text-gray-500 text-sm" },
     });
@@ -228,30 +258,28 @@ var __VLS_2;
 __VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
     id: "go-chat-local-audio",
     autoplay: true,
-    muted: true,
 });
 __VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
     id: "go-chat-remote-audio",
     autoplay: true,
 });
+/** @type {__VLS_StyleScopedClasses['']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['justify-center']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-screen']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-chat-haze-300']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-32']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-32']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-40']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-40']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['mb-4']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-4']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-gray-700']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['object-cover']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
@@ -285,7 +313,11 @@ __VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
 /** @type {__VLS_StyleScopedClasses['bottom-6']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-gray-500']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+// @ts-ignore
+var __VLS_4 = __VLS_3;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
+    __typeProps: {},
+    props: {},
 });
 export default {};

package/dist/test/components/common/drawer/DrawerBaseCustom.vue.js

@@ -0,0 +1,128 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { computed, ref } from 'vue';
+const props = withDefaults(defineProps(), {
+    position: 'right',
+    showTitle: true,
+    width: 550
+});
+const emits = defineEmits();
+const show = ref(false);
+const boxStyles = computed(() => {
+    let transform = '';
+    if (show.value) {
+        transform = 'translateX(0)';
+    }
+    else if (props.position === 'right') {
+        transform = 'translateX(100%)';
+    }
+    else if (props.position === 'left') {
+        transform = 'translateX(-100%)';
+    }
+    return {
+        width: props.responsive == 'mobile' ? '100%' : props.width + 'px',
+        [props.position]: '0',
+        transform
+    };
+});
+// CREATE FUNCTION
+const open = () => {
+    show.value = true;
+};
+const close = async () => {
+    await emits('afterClose');
+    show.value = false;
+};
+const __VLS_exposed = { close, open };
+defineExpose(__VLS_exposed);
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_defaults = {
+    position: 'right',
+    showTitle: true,
+    width: 550
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+/** @type {__VLS_StyleScopedClasses['drawer-box']} */ ;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "absolute top-0 bottom-0 right-0 left-0 z-[1500] drawer" },
+    ...{ class: (__VLS_ctx.show ? 'opacity-1' : 'pointer-events-none opacity-0 delay-300') },
+});
+// @ts-ignore
+[show,];
+if (!__VLS_ctx.disabledClose) {
+    // @ts-ignore
+    [disabledClose,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ onClick: (__VLS_ctx.close) },
+        ...{ onTouchstart: (__VLS_ctx.close) },
+        ...{ class: "absolute w-full h-full z-[1500]" },
+    });
+    // @ts-ignore
+    [close, close,];
+}
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "relative w-full h-full" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "duration-300 ease-out absolute top-0 bg-white flex flex-col drawer-box" },
+    ...{ style: (__VLS_ctx.boxStyles) },
+});
+// @ts-ignore
+[boxStyles,];
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "edit-scrollbar grow overflow-auto w-full min-w-full drawer-content" },
+});
+var __VLS_0 = {};
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex p-4 content" },
+});
+__VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({});
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['top-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['bottom-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['right-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['left-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['z-[1500]']} */ ;
+/** @type {__VLS_StyleScopedClasses['drawer']} */ ;
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['z-[1500]']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['duration-300']} */ ;
+/** @type {__VLS_StyleScopedClasses['ease-out']} */ ;
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['top-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['drawer-box']} */ ;
+/** @type {__VLS_StyleScopedClasses['edit-scrollbar']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-auto']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['min-w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['drawer-content']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['content']} */ ;
+// @ts-ignore
+var __VLS_1 = __VLS_0;
+const __VLS_base = (await import('vue')).defineComponent({
+    setup: () => (__VLS_exposed),
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+const __VLS_export = {};
+export default {};

package/dist/test/components/ui/drawer/DrawerOverlay.vue.js

@@ -21,11 +21,11 @@ DrawerOverlay;
 // @ts-ignore
 const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({
     ...(__VLS_ctx.delegatedProps),
-    ...{ class: (__VLS_ctx.cn('fixed inset-0 z-50 bg-black/60', props.class)) },
+    ...{ class: (__VLS_ctx.cn('absolute inset-0 z-50 bg-black/60', props.class)) },
 }));
 const __VLS_2 = __VLS_1({
     ...(__VLS_ctx.delegatedProps),
-    ...{ class: (__VLS_ctx.cn('fixed inset-0 z-50 bg-black/60', props.class)) },
+    ...{ class: (__VLS_ctx.cn('absolute inset-0 z-50 bg-black/60', props.class)) },
 }, ...__VLS_functionalComponentArgsRest(__VLS_1));
 var __VLS_4 = {};
 // @ts-ignore

package/dist/test/composable/TestSound.js

@@ -0,0 +1,196 @@
+import { ref, onBeforeUnmount } from 'vue';
+export function useAudioStream(wsUrl) {
+    const SAMPLE_RATE = 24000;
+    const CHUNK_SIZE = 480;
+    const PREBUFFER_SEC = 0.4;
+    let audioCtx;
+    let processor;
+    let input;
+    let stream;
+    const ws = ref(null);
+    const statusText = ref('Tap to Speak with Vico');
+    // Speaker queue
+    let speakerQueue = [];
+    let nextPlayTime = 0;
+    // UI state
+    const recording = ref(false);
+    const micLevel = ref(0);
+    // Status management
+    const STATUS = {
+        IDLE: 'Tap to Speak with Vico',
+        CONNECTING: 'Connecting...',
+        LISTENING: 'Listening...',
+        SPEAKING: 'Speaking...'
+    };
+    let currentStatus = STATUS.IDLE;
+    function setStatus(newStatus) {
+        if (currentStatus !== newStatus) {
+            currentStatus = newStatus;
+            statusText.value = newStatus;
+        }
+    }
+    // 🎤 Float32 → PCM16
+    function floatTo16BitPCM(float32Array) {
+        const buffer = new ArrayBuffer(float32Array.length * 2);
+        const view = new DataView(buffer);
+        for (let i = 0; i < float32Array.length; i++) {
+            let s = Math.max(-1, Math.min(1, float32Array[i]));
+            view.setInt16(i * 2, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+        }
+        return buffer;
+    }
+    // 🔊 PCM16 → Float32
+    function int16ToFloat32(int16Array) {
+        const float32 = new Float32Array(int16Array.length);
+        for (let i = 0; i < int16Array.length; i++) {
+            float32[i] = int16Array[i] / 32768;
+        }
+        return float32;
+    }
+    // 📥 enqueue speaker chunk
+    async function enqueueSpeakerChunk(arrayBuffer) {
+        const int16View = new Int16Array(arrayBuffer);
+        const float32Data = int16ToFloat32(int16View);
+        speakerQueue.push(float32Data);
+    }
+    // 🔊 process queue
+    function processSpeakerQueue() {
+        try {
+            if (speakerQueue.length > 0) {
+                const chunk = speakerQueue.shift();
+                if (chunk) {
+                    const audioBuffer = audioCtx.createBuffer(1, chunk.length, SAMPLE_RATE);
+                    audioBuffer.getChannelData(0).set(chunk);
+                    const source = audioCtx.createBufferSource();
+                    source.buffer = audioBuffer;
+                    source.connect(audioCtx.destination);
+                    if (nextPlayTime < audioCtx.currentTime + 0.05) {
+                        nextPlayTime = audioCtx.currentTime + PREBUFFER_SEC;
+                    }
+                    source.start();
+                    nextPlayTime += audioBuffer.duration;
+                    setStatus(STATUS.SPEAKING);
+                }
+            }
+            else if (recording.value) {
+                setStatus(STATUS.LISTENING);
+            }
+        }
+        catch (e) {
+            console.log(e);
+        }
+        requestAnimationFrame(processSpeakerQueue);
+    }
+    // 🎤 start mic
+    async function startRecording() {
+        audioCtx = new AudioContext({ sampleRate: SAMPLE_RATE });
+        return;
+        stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        input = audioCtx.createMediaStreamSource(stream);
+        processor = audioCtx.createScriptProcessor(1024, 1, 1);
+        processor.onaudioprocess = (e) => {
+            if (!ws.value || ws.value.readyState !== WebSocket.OPEN)
+                return;
+            const inputData = e.inputBuffer.getChannelData(0);
+            // calculate mic level
+            let sum = 0;
+            for (let i = 0; i < inputData.length; i++)
+                sum += inputData[i] ** 2;
+            micLevel.value = Math.sqrt(sum / inputData.length);
+            // chunking & send
+            for (let i = 0; i < inputData.length; i += CHUNK_SIZE) {
+                const slice = inputData.slice(i, i + CHUNK_SIZE);
+                const binaryChunk = floatTo16BitPCM(slice);
+                ws.value.send(binaryChunk);
+            }
+        };
+        input.connect(processor);
+        processor.connect(audioCtx.destination);
+        recording.value = true;
+        setStatus(STATUS.LISTENING);
+    }
+    // ⏹ stop mic
+    function stopRecording() {
+        recording.value = false;
+        processor?.disconnect();
+        input?.disconnect();
+        stream?.getTracks().forEach((t) => t.stop());
+        if (audioCtx && audioCtx.state !== 'closed') {
+            audioCtx
+                .close()
+                .then(() => console.log('AudioContext closed successfully.'))
+                .catch((err) => console.error('Error closing AudioContext:', err))
+                .finally(() => (micLevel.value = 0));
+        }
+        setStatus(STATUS.IDLE);
+    }
+    const getAudioContext = () => {
+        if (!audioCtx || audioCtx.state === 'closed') {
+            audioCtx = new AudioContext({ sampleRate: SAMPLE_RATE });
+        }
+        return audioCtx;
+    };
+    const safeResumeAudio = () => {
+        const ctx = getAudioContext();
+        if (ctx.state === 'suspended') {
+            ctx.resume().catch((err) => console.error('Error resuming AudioContext:', err));
+        }
+    };
+    function connect() {
+        if (ws.value && ws.value.readyState === WebSocket.OPEN)
+            return;
+        setStatus(STATUS.CONNECTING);
+        ws.value = new WebSocket(wsUrl);
+        ws.value.binaryType = 'arraybuffer';
+        ws.value.onopen = () => {
+            console.log('✅ WS connected');
+            startRecording();
+            processSpeakerQueue();
+        };
+        ws.value.onmessage = (event) => {
+            if (event.data instanceof ArrayBuffer) {
+                enqueueSpeakerChunk(event.data);
+                return;
+            }
+            if (typeof event.data === 'string') {
+                try {
+                    const msg = JSON.parse(event.data);
+                    if (msg.type === 'AudioStop' || msg.code === 'UserStartedSpeaking') {
+                        // speakerQueue.length = 0
+                        nextPlayTime = 0;
+                        setStatus(STATUS.LISTENING);
+                        return;
+                    }
+                }
+                catch (err) {
+                    console.warn('⚠️ Parse JSON error:', err, event.data);
+                }
+            }
+            console.log('⚠️ Unknown WS message, closing...');
+            disconnect();
+        };
+        ws.value.onclose = () => {
+            console.log('❌ WS closed');
+            stopRecording();
+        };
+    }
+    function disconnect() {
+        ws.value?.close();
+        stopRecording();
+    }
+    onBeforeUnmount(() => {
+        disconnect();
+    });
+    return {
+        ws,
+        statusText,
+        micLevel,
+        recording,
+        connect,
+        disconnect,
+        resumeAudio: safeResumeAudio,
+        enqueueSpeakerChunk,
+        processSpeakerQueue,
+        startRecording
+    };
+}