From 2adaf9ba3d7328179a41df8652cf9a6db0934aa8 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Sat, 21 Sep 2024 04:10:24 +0200 Subject: [PATCH] refac --- src/lib/components/chat/Chat.svelte | 8 +- src/lib/components/chat/ChatControls.svelte | 76 ++++++------ .../chat/MessageInput/CallOverlay.svelte | 116 ++++++++++-------- 3 files changed, 108 insertions(+), 92 deletions(-) diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte index 541ac5074..de7658998 100644 --- a/src/lib/components/chat/Chat.svelte +++ b/src/lib/components/chat/Chat.svelte @@ -28,7 +28,8 @@ showCallOverlay, currentChatPage, temporaryChatEnabled, - mobile + mobile, + showOverview } from '$lib/stores'; import { convertMessagesToHistory, @@ -292,6 +293,11 @@ controlPane.resize(0); } } + + if (!value) { + showCallOverlay.set(false); + showOverview.set(false); + } }); }); diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte index 12a9905b7..9e958f89b 100644 --- a/src/lib/components/chat/ChatControls.svelte +++ b/src/lib/components/chat/ChatControls.svelte @@ -133,48 +133,50 @@ } }} > -
-
- {#if $showCallOverlay} -
- +
+ {#if $showCallOverlay} +
+ { + showControls.set(false); + }} + /> +
+ {:else if $showOverview} + { + showMessage(e.detail.node.data.message); + }} on:close={() => { showControls.set(false); }} /> -
- {:else if $showOverview} - { - showMessage(e.detail.node.data.message); - }} - on:close={() => { - showControls.set(false); - }} - /> - {:else} - { - showControls.set(false); - }} - {models} - bind:chatFiles - bind:params - /> - {/if} + {:else} + { + showControls.set(false); + }} + {models} + bind:chatFiles + bind:params + /> + {/if} +
-
+ {/if} {/if} diff --git a/src/lib/components/chat/MessageInput/CallOverlay.svelte b/src/lib/components/chat/MessageInput/CallOverlay.svelte index 18427434a..5ad130239 100644 --- a/src/lib/components/chat/MessageInput/CallOverlay.svelte +++ b/src/lib/components/chat/MessageInput/CallOverlay.svelte @@ -525,6 +525,60 @@ console.log(`Audio monitoring and playing stopped for message ID ${id}`); }; + const chatStartHandler = async (e) => { + const { id } = e.detail; + + chatStreaming = true; + + if (currentMessageId !== id) { + console.log(`Received chat start event for message ID ${id}`); + + currentMessageId = id; + if (audioAbortController) { + audioAbortController.abort(); + } + audioAbortController = new AbortController(); + + assistantSpeaking = true; + // Start monitoring and playing audio for the message ID + monitorAndPlayAudio(id, audioAbortController.signal); + } + }; + + const chatEventHandler = async (e) => { + const { id, content } = e.detail; + // "id" here is message id + // if "id" is not the same as "currentMessageId" then do not process + // "content" here is a sentence from the assistant, + // there will be many sentences for the same "id" + + if (currentMessageId === id) { + console.log(`Received chat event for message ID ${id}: ${content}`); + + try { + if (messages[id] === undefined) { + messages[id] = [content]; + } else { + messages[id].push(content); + } + + console.log(content); + + fetchAudio(content); + } catch (error) { + console.error('Failed to fetch or play audio:', error); + } + } + }; + + const chatFinishHandler = async (e) => { + const { id, content } = e.detail; + // "content" here is the entire message from the assistant + finishedMessages[id] = true; + + chatStreaming = false; + }; + onMount(async () => { const setWakeLock = async () => { try { @@ -558,60 +612,6 @@ startRecording(); - const chatStartHandler = async (e) => { - const { id } = e.detail; - - chatStreaming = true; - - if (currentMessageId !== id) { - console.log(`Received chat start event for message ID ${id}`); - - currentMessageId = id; - if (audioAbortController) { - audioAbortController.abort(); - } - audioAbortController = new AbortController(); - - assistantSpeaking = true; - // Start monitoring and playing audio for the message ID - monitorAndPlayAudio(id, audioAbortController.signal); - } - }; - - const chatEventHandler = async (e) => { - const { id, content } = e.detail; - // "id" here is message id - // if "id" is not the same as "currentMessageId" then do not process - // "content" here is a sentence from the assistant, - // there will be many sentences for the same "id" - - if (currentMessageId === id) { - console.log(`Received chat event for message ID ${id}: ${content}`); - - try { - if (messages[id] === undefined) { - messages[id] = [content]; - } else { - messages[id].push(content); - } - - console.log(content); - - fetchAudio(content); - } catch (error) { - console.error('Failed to fetch or play audio:', error); - } - } - }; - - const chatFinishHandler = async (e) => { - const { id, content } = e.detail; - // "content" here is the entire message from the assistant - finishedMessages[id] = true; - - chatStreaming = false; - }; - eventTarget.addEventListener('chat:start', chatStartHandler); eventTarget.addEventListener('chat', chatEventHandler); eventTarget.addEventListener('chat:finish', chatFinishHandler); @@ -632,7 +632,15 @@ }); onDestroy(async () => { + eventTarget.removeEventListener('chat:start', chatStartHandler); + eventTarget.removeEventListener('chat', chatEventHandler); + eventTarget.removeEventListener('chat:finish', chatFinishHandler); + + audioAbortController.abort(); + await tick(); + await stopAllAudio(); + await stopRecordingCallback(false); await stopCamera(); });