Added a great tooltip library to use "Tippy.js"

Updated the ToolTip component to use the new tippy library.

Added tooltips in various places to help explain things to newer users

Author: TannerMidd

README.md

@@ -1,6 +1,6 @@
 # [**MinimalChat: A Simple and Customizable LLM Chat App (public site link)**](https://minimalgpt.app)
 
-![Version](https://img.shields.io/badge/version-5.1.7-blue)
+![Version](https://img.shields.io/badge/version-5.1.8-blue)
 ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/fingerthief/minimal-chat/firebase-hosting-merge.yml)
 ![License](https://img.shields.io/badge/license-MIT-green)
 ![Website](https://img.shields.io/website?url=https%3A%2F%2Fminimalgpt.app)

package-lock.json

@@ -26,6 +26,7 @@
     "markdown-it": "^14.1.0",
     "pwacompat": "^2.0.17",
     "swiped-events": "^1.1.9",
+    "tippy.js": "^6.3.7",
     "toastify-js": "^1.12.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

package.json

@@ -1,78 +1,53 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
+import tippy from 'tippy.js';
+import 'tippy.js/animations/shift-away-subtle.css';
 
 const props = defineProps({
-    targetId: String,
-    alignment: {
-        type: String,
-        default: 'center',
-        validator: (value) => ['left', 'center', 'right'].includes(value)
-    }
+    targetId: String
 });
 
-const visible = ref(false);
 const tooltipElement = ref(null);
+let tippyInstance = null;
 
-const showTooltip = () => {
-    visible.value = true;
-    updatePosition();
-};
-
-const hideTooltip = () => {
-    visible.value = false;
-};
-
-const updatePosition = () => {
+const createTooltip = () => {
     const target = document.getElementById(props.targetId);
-    const targetRect = target.getBoundingClientRect();
-    const tooltipRect = tooltipElement.value.getBoundingClientRect();
 
-    let x = 0;
-    if (props.alignment === 'left') {
-        x = targetRect.left;
-    } else if (props.alignment === 'center') {
-        x = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
-    } else if (props.alignment === 'right') {
-        x = targetRect.right - tooltipRect.width;
+    if (target && tooltipElement.value) {
+        tippyInstance = tippy(target, {
+            content: tooltipElement.value,
+            placement: 'top',
+            trigger: 'mouseenter focus',
+            appendTo: document.body,
+            arrow: true,
+            animation: 'shift-away-subtle',
+            interactive: true,
+            onHidden: (instance) => {
+                instance.destroy();
+            }
+        });
     }
-
-    const y = targetRect.bottom + 10; // Adjust the offset as needed
-
-    tooltipElement.value.style.left = `${x}px`;
-    tooltipElement.value.style.top = `${y}px`;
 };
 
 onMounted(() => {
-    const target = document.getElementById(props.targetId);
-
-    if (target) {
-        target.addEventListener('mouseenter', showTooltip);
-        target.addEventListener('mouseleave', hideTooltip);
-        window.addEventListener('resize', updatePosition);
-    }
+    createTooltip();
 });
 
 onUnmounted(() => {
-    const target = document.getElementById(props.targetId);
-
-    if (target) {
-        target.removeEventListener('mouseenter', showTooltip);
-        target.removeEventListener('mouseleave', hideTooltip);
-        window.removeEventListener('resize', updatePosition);
+    if (tippyInstance) {
+        tippyInstance.destroy();
     }
-
 });
 </script>
 
 <template>
-    <div ref="tooltipElement" class="tooltip-container" v-show="visible">
+    <div ref="tooltipElement" class="tooltip-container">
         <slot></slot>
     </div>
 </template>
 
 <style>
 .tooltip-container {
-    position: fixed;
     padding: 8px;
     background-color: #333;
     color: white;

src/components/ToolTip.vue

@@ -2,7 +2,7 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-import { Settings, Trash2, MessagesSquare, MessageSquareDiff, Github } from 'lucide-vue-next';
+import { Settings, Trash2, MessagesSquare, Github, SquarePlus } from 'lucide-vue-next';
 
 // Define props
 const props = defineProps({
@@ -72,7 +72,7 @@ function onShowConversationsClick() {
             <MessagesSquare :stroke-width="1.00" :size="30" />
         </div>
         <span class="save-icon" @click="clearMessages">
-            <MessageSquareDiff :stroke-width="1.00" :size="30" />
+            <SquarePlus :stroke-width="1.00" :size="30" />
         </span>
     </div>
 </template>

src/components/chat-header.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, watch, defineEmits } from 'vue';
 import { SendHorizontal, ImageUp, CircleStop } from 'lucide-vue-next';
+import ToolTip from './ToolTip.vue';
 import "swiped-events";
 
 // Define props and emits
@@ -77,7 +78,9 @@ async function abortStream() {
         <textarea class="user-input-text" id="user-input" rows="1" v-model="localUserInput" ref="userInputRef"
             @input="autoResize" @focus="autoResize" @blur="autoResize" @keydown="handleKeyDown"
             placeholder="Enter your prompt"></textarea>
-        <div class="image-button" @click="visionImageUploadClick">
+        <ToolTip :targetId="'imageButton'">
+            Upload image for vision processing</ToolTip>
+        <div class="image-button" id="imageButton" @click="visionImageUploadClick">
             <span>
                 <ImageUp />
             </span>

src/components/chat-input.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
 import { Eraser, Download, Upload, MessageSquarePlus, MessageSquareX, Settings } from 'lucide-vue-next';
+import ToolTip from './ToolTip.vue';
 
 const props = defineProps({
     isSidebarOpen: Boolean,
@@ -102,9 +103,15 @@ function purgeConversations() {
             <h2>
                 Conversations
                 &nbsp;
-                <Eraser @click="purgeConversations" :size="25" :stroke-width="1.00" />&nbsp;
-                <Download @click="exportConversations" :size="25" :stroke-width="1.00" />&nbsp;
-                <Upload @click="importConversations" :size="25" :stroke-width="1.00" />
+                <ToolTip :targetId="'purgeConversations'">
+                    Purge all conversations</ToolTip>
+                <Eraser @click="purgeConversations" id="purgeConversations" :size="25" :stroke-width="1.00" />&nbsp;
+                <ToolTip :targetId="'exportConversations'">
+                    Export conversations</ToolTip>
+                <Download @click="exportConversations" id="exportConversations" :size="25" :stroke-width="1.00" />&nbsp;
+                <ToolTip :targetId="'importConversations'">
+                    Ixport conversations</ToolTip>
+                <Upload @click="importConversations" id="importConversations" :size="25" :stroke-width="1.00" />
             </h2>
         </div>
         <div class="sidebar-content-container">

src/components/conversations-dialog.vue

@@ -8,6 +8,7 @@ import { defineEmits, ref, nextTick } from 'vue';
 import "/node_modules/highlight.js/scss/github-dark-dimmed.scss";
 import ToolTip from './ToolTip.vue';
 
+
 const props = defineProps({
     messages: Array,
     isLoading: Boolean,
@@ -105,7 +106,9 @@ const saveEditedMessage = (message, event) => {
 <template>
     <div>
         <div v-for="(message, index) in messages" :key="index" :class="messageClass(message.role)">
-            <div class="label" @click="copyText(message)">
+            <ToolTip :targetId="'message-label-' + index">
+                Copy Text</ToolTip>
+            <div class="label" @click="copyText(message)" :id="'message-label-' + index">
                 <RefreshCcw v-if="message.role === 'user'" class="icon"
                     :class="{ 'loading': isLoading && loadingIcon === index }"
                     @click="$emit('regenerate-response', message.content), startLoading(index)" />
@@ -114,10 +117,11 @@ const saveEditedMessage = (message, event) => {
                     @click="$emit('delete-response', message.content), startLoading(index)" />
                 {{ message.role === 'user' ? 'User' : modelDisplayName }}
             </div>
+
             <div class="message-contents" :id="'message-' + index" :contenteditable="message.isEditing"
                 @dblclick="editMessage(message)" @blur="saveEditedMessage(message, $event)"
                 v-html="formatMessage(message.content)"></div>
-            <ToolTip v-if="message.role === 'user'" :alignment="'left'" :targetId="'message-' + index">
+            <ToolTip v-if="message.role === 'user'" :targetId="'message-' + index">
                 Double click to
                 edit message</ToolTip>
         </div>

src/components/message-item.vue

@@ -3,7 +3,6 @@
 import { RefreshCcw } from 'lucide-vue-next';
 import InputField from './InputField.vue';
 import { ref } from 'vue';
-import ToolTip from './ToolTip.vue';
 
 const props = defineProps({
     isSidebarOpen: Boolean,
@@ -74,7 +73,7 @@ function toggleSidebar() {
             <span @click="reloadPage">
                 <RefreshCcw :size="23" :stroke-width="2" />
             </span>
-            Settings | V5.1.7
+            Settings | V5.1.8
         </h2>
     </div>
     <div class="sidebar-content-container">