Add ability to close tooltip with escape button

solliancenet · Sep 10, 2024 · 997076a · 997076a
1 parent 73f6ba7
commit 997076a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 3 deletions.
diff --git a/src/ui/UserPortal/components/ChatInput.vue b/src/ui/UserPortal/components/ChatInput.vue
@@ -3,7 +3,7 @@
 		<div class="input-wrapper">
 			<div class="tooltip-component">
 				<VTooltip :auto-hide="isMobile" :popper-triggers="isMobile ? [] : ['hover']">
-					<i class="pi pi-info-circle" tabindex="0"></i>
+					<i class="pi pi-info-circle" tabindex="0" @keydown.esc="hideAllPoppers"></i>
 					<template #popper> Use Shift+Enter to add a new line </template>
 				</VTooltip>
 			</div>
@@ -16,6 +16,7 @@
 					class="file-upload-button secondary-button"
 					style="height: 100%"
 					@click="showFileUploadDialog = true"
+					@keydown.esc="hideAllPoppers"
 				/>
 				<template #popper>
 					Attach files ({{
@@ -182,6 +183,7 @@
 <script lang="ts">
 import { Mentionable } from 'vue-mention';
 import 'floating-vue/dist/style.css';
+import { hideAllPoppers } from 'floating-vue';
 
 export default {
 	name: 'ChatInput',
@@ -387,6 +389,10 @@ export default {
 				}
 			});
 		},
+
+		hideAllPoppers() {
+			hideAllPoppers();
+		},
 	},
 };
 </script>

diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
@@ -28,7 +28,7 @@
 							}"
 						/>
 						<VTooltip :auto-hide="isMobile" :popper-triggers="isMobile ? [] : ['hover']">
-							<span class="time-stamp" tabindex="0">{{
+							<span class="time-stamp" tabindex="0" @keydown.esc="hideAllPoppers">{{
 								$filters.timeAgo(new Date(message.timeStamp))
 							}}</span>
 							<template #popper>
@@ -46,6 +46,7 @@
 								icon="pi pi-copy"
 								aria-label="Copy Message"
 								@click.stop="handleCopyMessageContent"
+								@keydown.esc="hideAllPoppers"
 							/>
 							<template #popper>Copy Message</template>
 						</VTooltip>
@@ -210,6 +211,8 @@ import { fetchBlobUrl } from '@/js/fileService';
 import CodeBlockHeader from '@/components/CodeBlockHeader.vue';
 import ChatMessageContentBlock from '@/components/ChatMessageContentBlock.vue';
 
+import { hideAllPoppers } from 'floating-vue';
+
 function processLatex(content) {
 	const blockLatexPattern = /\\\[\s*([\s\S]+?)\s*\\\]/g;
 	const inlineLatexPattern = /\\\(([\s\S]+?)\\\)/g;
@@ -483,6 +486,10 @@ export default {
 			this.viewPrompt = true;
 		},
 
+		hideAllPoppers() {
+			hideAllPoppers();
+		},
+
 		handleFileLinkInText(event: MouseEvent) {
 			const link = (event.target as HTMLElement).closest('a.file-download-link');
 			if (link && link.dataset.href) {

diff --git a/src/ui/UserPortal/components/ChatSidebar.vue b/src/ui/UserPortal/components/ChatSidebar.vue
@@ -16,6 +16,7 @@
 					class="secondary-button"
 					aria-label="Toggle sidebar"
 					@click="$appStore.toggleSidebar"
+					@keydown.esc="hideAllPoppers"
 				/>
 				<template #popper>Toggle sidebar</template>
 			</VTooltip>
@@ -30,6 +31,7 @@
 					aria-label="Add new chat"
 					:disabled="createProcessing"
 					@click="handleAddSession"
+					@keydown.esc="hideAllPoppers"
 				/>
 				<template #popper>Add new chat</template>
 			</VTooltip>
@@ -49,7 +51,7 @@
 					<!-- Chat name -->
 
 					<VTooltip :auto-hide="isMobile" :popper-triggers="isMobile ? [] : ['hover']">
-						<span class="chat__name" tabindex="0">{{ session.name }}</span>
+						<span class="chat__name" tabindex="0" @keydown.esc="hideAllPoppers">{{ session.name }}</span>
 						<template #popper>
 							{{ session.name }}
 						</template>
@@ -66,6 +68,7 @@
 								text
 								aria-label="Rename chat session"
 								@click.stop="openRenameModal(session)"
+								@keydown.esc="hideAllPoppers"
 							/>
 							<template #popper> Rename chat session </template>
 						</VTooltip>
@@ -79,6 +82,7 @@
 								text
 								aria-label="Delete chat session"
 								@click.stop="sessionToDelete = session"
+								@keydown.esc="hideAllPoppers"
 							/>
 							<template #popper> Delete chat session </template>
 						</VTooltip>
@@ -168,6 +172,7 @@
 
 <script lang="ts">
 import type { Session } from '@/js/types';
+import { hideAllPoppers } from 'floating-vue';
 declare const process: any;
 
 export default {
@@ -273,6 +278,10 @@ export default {
 				this.sessionToDelete = null;
 			}
 		},
+
+		hideAllPoppers() {
+			hideAllPoppers();
+		},
 	},
 };
 </script>

diff --git a/src/ui/UserPortal/components/NavBar.vue b/src/ui/UserPortal/components/NavBar.vue
@@ -18,6 +18,7 @@
 						class="secondary-button"
 						aria-label="Toggle sidebar"
 						@click="$appStore.toggleSidebar"
+						@keydown.esc="hideAllPoppers"
 					/>
 					<template #popper>Toggle sidebar</template>
 				</VTooltip>
@@ -62,6 +63,7 @@
 								:src="$appConfigStore.agentIconUrl || '~/assets/FLLM-Agent-Light.svg'"
 								alt="Select an agent"
 								tabindex="0"
+								@keydown.esc="hideAllPoppers"
 							/>
 							<template #popper> Select an agent </template>
 						</VTooltip>
@@ -87,6 +89,7 @@
 
 <script lang="ts">
 import type { Session } from '@/js/types';
+import { hideAllPoppers } from 'floating-vue';
 
 interface AgentDropdownOption {
 	label: string;
@@ -209,6 +212,10 @@ export default {
 					(option) => option.value.resource.object_id === agent.resource.object_id,
 				) || null;
 		},
+
+		hideAllPoppers() {
+			hideAllPoppers();
+		},
 	},
 };
 </script>