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

feat: tooltip

Browse source 
Co-Authored-By: Jannik S. <69747628+jannikstdl@users.noreply.github.com>
This commit is contained in:
Timothy J. Baek 2024-03-02 01:00:20 -08:00
parent edb63c2280
commit 63c0927022
2 changed files with 139 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/lib/components/chat/MessageInput.svelte
View file

@ -12,6 +12,7 @@
import Documents from './MessageInput/Documents.svelte';
import Models from './MessageInput/Models.svelte';
import { transcribeAudio } from '$lib/apis/audio';
import Tooltip from '../common/Tooltip.svelte';
export let submitPrompt: Function;
export let stopResponse: Function;
@ -637,6 +638,7 @@
<div class=" flex">
{#if fileUploadEnabled}
<div class=" self-end mb-2 ml-1">
<Tooltip content="Upload files">
<button
class="bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5"
type="button"
@ -655,6 +657,7 @@
/>
</svg>
</button>
</Tooltip>
</div>
{/if}
@ -806,6 +809,7 @@
<div class="self-end mb-2 flex space-x-1 mr-1">
{#if messages.length == 0 || messages.at(-1).done == true}
<Tooltip content="Record voice">
{#if speechRecognitionEnabled}
<button
id="voice-input-button"
@ -850,7 +854,12 @@
cx="12"
cy="12"
r="2.5"
/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
/><circle
class="spinner_qM83 spinner_ZTLf"
cx="20"
cy="12"
r="2.5"
/></svg
>
{:else}
<svg
@ -867,6 +876,9 @@
{/if}
</button>
{/if}
</Tooltip>
<Tooltip content="Send message">
<button
class="{prompt !== ''
? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
@ -887,6 +899,7 @@
/>
</svg>
</button>
</Tooltip>
{:else}
<button
class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5"

31
src/lib/components/common/Tooltip.svelte Normal file
View file

@ -0,0 +1,31 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import tippy from 'tippy.js';
export let placement = 'top';
export let content = `I'm a tooltip!`;
let tooltipElement;
let tooltipInstance;
$: if (tooltipElement && content) {
if (tooltipInstance) {
tooltipInstance[0]?.destroy();
}
tooltipInstance = tippy(tooltipElement, {
content: content,
placement: placement,
allowHTML: true
});
}
onDestroy(() => {
if (tooltipInstance) {
tooltipInstance[0]?.destroy();
}
});
</script>
<div bind:this={tooltipElement}>
<slot />
</div>