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

enh: voice input support for knowledge text content

Browse Source
This commit is contained in:
Timothy J. Baek
2024-10-20 01:49:44 -07:00
parent b9b670fcfb
commit 05c18cd664
4 changed files with 83 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/workspace/Knowledge/Collection.svelte
View File

@@ -698,7 +698,7 @@
<Pane>
<div class="flex-1 flex justify-start h-full max-h-full">
{#if selectedFile}
<div class=" flex flex-col w-full h-full max-h-full ml-2">
<div class=" flex flex-col w-full h-full max-h-full ml-2.5">
<div class="flex-shrink-0 mb-2 flex items-center">
{#if !showSidepanel}
<div class="-translate-x-2">

77
src/lib/components/workspace/Knowledge/Collection/AddTextContentModal.svelte
View File

@@ -9,10 +9,15 @@
import Modal from '$lib/components/common/Modal.svelte';
import RichTextInput from '$lib/components/common/RichTextInput.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
import Mic from '$lib/components/icons/Mic.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import VoiceRecording from '$lib/components/chat/MessageInput/VoiceRecording.svelte';
export let show = false;
let name = 'Untitled';
let content = '';
let voiceInput = false;
</script>
<Modal size="full" className="h-full bg-white dark:bg-gray-900" bind:show>
@@ -67,13 +72,71 @@
</div>
</div>
<div class="flex justify-end text-sm font-medium flex-shrink-0 mt-1 p-4">
<button
class=" px-3.5 py-2 bg-black text-white dark:bg-white dark:text-black transition rounded-full"
type="submit"
>
{$i18n.t('Save')}
</button>
<div
class="flex flex-row items-center justify-end text-sm font-medium flex-shrink-0 mt-1 p-4 gap-1.5"
>
<div class="">
{#if voiceInput}
<div class=" max-w-full w-64">
<VoiceRecording
bind:recording={voiceInput}
className="p-1"
on:cancel={() => {
voiceInput = false;
}}
on:confirm={(e) => {
const response = e.detail;
content = `${content}${response} `;
voiceInput = false;
}}
/>
</div>
{:else}
<Tooltip content={$i18n.t('Voice Input')}>
<button
class=" p-2 bg-gray-50 text-gray-700 dark:bg-gray-700 dark:text-white transition rounded-full"
type="button"
on:click={async () => {
try {
let stream = await navigator.mediaDevices
.getUserMedia({ audio: true })
.catch(function (err) {
toast.error(
$i18n.t(`Permission denied when accessing microphone: {{error}}`, {
error: err
})
);
return null;
});
if (stream) {
voiceInput = true;
const tracks = stream.getTracks();
tracks.forEach((track) => track.stop());
}
stream = null;
} catch {
toast.error($i18n.t('Permission denied when accessing microphone'));
}
}}
>
<Mic className="size-5" />
</button>
</Tooltip>
{/if}
</div>
<div class=" flex-shrink-0">
<Tooltip content={$i18n.t('Save')}>
<button
class=" px-3.5 py-2 bg-black text-white dark:bg-white dark:text-black transition rounded-full"
type="submit"
>
{$i18n.t('Save')}
</button>
</Tooltip>
</div>
</div>
</form>
</div>