feat: tooltip

Co-Authored-By: Jannik S. <69747628+jannikstdl@users.noreply.github.com>

src/lib/components/chat/MessageInput.svelte

@@ -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"

src/lib/components/common/Tooltip.svelte

@@ -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>