OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-05-24 06:44:24 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy J. Baek 2024-09-21 04:10:24 +02:00
parent f381850bb2
commit 2adaf9ba3d
3 changed files with 108 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/chat/Chat.svelte
View File

@ -28,7 +28,8 @@
showCallOverlay, showCallOverlay,
currentChatPage, currentChatPage,
temporaryChatEnabled, temporaryChatEnabled,
mobile mobile,
showOverview
} from '$lib/stores'; } from '$lib/stores';
import { import {
convertMessagesToHistory, convertMessagesToHistory,
@ -292,6 +293,11 @@
controlPane.resize(0); controlPane.resize(0);
} }
} }
if (!value) {
showCallOverlay.set(false);
showOverview.set(false);
}
}); });
}); });

76
src/lib/components/chat/ChatControls.svelte
View File

@ -133,48 +133,50 @@
} }
}} }}
> >
<div class="pr-4 pb-8 flex max-h-full min-h-full" in:slide={{ duration: 200, axis: 'x' }}> {#if $showControls}
<div <div class="pr-4 pb-8 flex max-h-full min-h-full">
class="w-full {$showOverview && !$showCallOverlay <div
? ' ' class="w-full {$showOverview && !$showCallOverlay
: 'px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-800'} rounded-lg z-50 pointer-events-auto overflow-y-auto scrollbar-hidden" ? ' '
> : 'px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-800'} rounded-lg z-50 pointer-events-auto overflow-y-auto scrollbar-hidden"
{#if $showCallOverlay} >
<div class="w-full h-full flex justify-center"> {#if $showCallOverlay}
<CallOverlay <div class="w-full h-full flex justify-center">
bind:files <CallOverlay
{submitPrompt} bind:files
{stopResponse} {submitPrompt}
{modelId} {stopResponse}
{chatId} {modelId}
{eventTarget} {chatId}
{eventTarget}
on:close={() => {
showControls.set(false);
}}
/>
</div>
{:else if $showOverview}
<Overview
{history}
on:nodeclick={(e) => {
showMessage(e.detail.node.data.message);
}}
on:close={() => { on:close={() => {
showControls.set(false); showControls.set(false);
}} }}
/> />
</div> {:else}
{:else if $showOverview} <Controls
<Overview on:close={() => {
{history} showControls.set(false);
on:nodeclick={(e) => { }}
showMessage(e.detail.node.data.message); {models}
}} bind:chatFiles
on:close={() => { bind:params
showControls.set(false); />
}} {/if}
/> </div>
{:else}
<Controls
on:close={() => {
showControls.set(false);
}}
{models}
bind:chatFiles
bind:params
/>
{/if}
</div> </div>
</div> {/if}
</Pane> </Pane>
{/if} {/if}
</SvelteFlowProvider> </SvelteFlowProvider>

116
src/lib/components/chat/MessageInput/CallOverlay.svelte
View File

@ -525,6 +525,60 @@
console.log(`Audio monitoring and playing stopped for message ID ${id}`); 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 () => { onMount(async () => {
const setWakeLock = async () => { const setWakeLock = async () => {
try { try {
@ -558,60 +612,6 @@
startRecording(); 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:start', chatStartHandler);
eventTarget.addEventListener('chat', chatEventHandler); eventTarget.addEventListener('chat', chatEventHandler);
eventTarget.addEventListener('chat:finish', chatFinishHandler); eventTarget.addEventListener('chat:finish', chatFinishHandler);
@ -632,7 +632,15 @@
}); });
onDestroy(async () => { onDestroy(async () => {
eventTarget.removeEventListener('chat:start', chatStartHandler);
eventTarget.removeEventListener('chat', chatEventHandler);
eventTarget.removeEventListener('chat:finish', chatFinishHandler);
audioAbortController.abort();
await tick();
await stopAllAudio(); await stopAllAudio();
await stopRecordingCallback(false); await stopRecordingCallback(false);
await stopCamera(); await stopCamera();
}); });