tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

feat: audio loading spinner added

Browse source
This commit is contained in:
Timothy J. Baek 2024-02-05 23:14:24 -08:00
parent 519e27978f
commit 3050267606
1 changed files with 40 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/lib/components/chat/Messages/ResponseMessage.svelte
View file

@ -30,13 +30,14 @@
export let copyToClipboard: Function;
export let regenerateResponse: Function;
let audioMap = {};
let edit = false;
let editedContent = '';
let tooltipInstance = null;
let audioMap = {};
let speaking = null;
let loadingSpeech = false;
$: tokens = marked.lexer(message.content);
@ -126,6 +127,7 @@
speaking = true;
if ($settings?.speech?.engine === 'openai') {
loadingSpeech = true;
const res = await synthesizeOpenAISpeech(
localStorage.token,
$settings?.speech?.speaker,
@ -140,6 +142,8 @@
const blobUrl = URL.createObjectURL(blob);
console.log(blobUrl);
loadingSpeech = false;
const audio = new Audio(blobUrl);
audioMap[message.id] = audio;
@ -458,10 +462,42 @@
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
on:click={() => {
if (!loadingSpeech) {
toggleSpeakMessage(message);
}
}}
>
{#if speaking}
{#if loadingSpeech}
<svg
class=" w-4 h-4"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
><style>
.spinner_S1WN {
animation: spinner_MGfb 0.8s linear infinite;
animation-delay: -0.8s;
}
.spinner_Km9P {
animation-delay: -0.65s;
}
.spinner_JApP {
animation-delay: -0.5s;
}
@keyframes spinner_MGfb {
93.75%,
100% {
opacity: 0.2;
}
}
</style><circle class="spinner_S1WN" cx="4" cy="12" r="3" /><circle
class="spinner_S1WN spinner_Km9P"
cx="12"
cy="12"
r="3"
/><circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" /></svg
>
{:else if speaking}
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"