Merge pull request #1633 from solliancenet/ah-ui-chat-tooltips-access…

…ibility-cherry-picks (0.8.1) Chat Tooltip Accessibility Improvements
solliancenet · Aug 27, 2024 · ce73368 · ce73368
2 parents a9f6568 + 4e12b9d
commit ce73368
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 50 deletions.
diff --git a/src/ui/UserPortal/components/ChatInput.vue b/src/ui/UserPortal/components/ChatInput.vue
@@ -1,22 +1,36 @@
 <template>
 	<div class="chat-input p-inputgroup">
 		<div class="input-wrapper">
-			<i
-				v-tooltip.top="'Use Shift+Enter to add a new line'"
-				class="pi pi-info-circle tooltip-component"
-			></i>
-			<Button
-				v-tooltip.top="
-					`Attach files (${fileArrayFiltered.length === 1 ? '1 file' : fileArrayFiltered.length + ' files'})`
-				"
-				:badge="fileArrayFiltered.length.toString() || null"
-				:aria-label="'Upload file (' + fileArrayFiltered.length.toString() + ' files attached)'"
-				icon="pi pi-paperclip"
-				label=""
-				class="file-upload-button secondary-button"
-				style="height: 100%"
-				@click="showFileUploadDialog = true"
-			/>
+			<div class="tooltip-component">
+				<VTooltip
+					:autoHide="false"
+					:popperTriggers="['hover']"
+				>
+						<i
+							class="pi pi-info-circle"
+						></i>
+					<template #popper>
+						Use Shift+Enter to add a new line
+					</template>
+				</VTooltip>
+			</div>
+			<VTooltip
+				:autoHide="false"
+				:popperTriggers="['hover']"
+			>
+				<Button
+					:badge="fileArrayFiltered.length.toString() || null"
+					:aria-label="'Upload file (' + fileArrayFiltered.length.toString() + ' files attached)'"
+					icon="pi pi-paperclip"
+					label=""
+					class="file-upload-button secondary-button"
+					style="height: 100%"
+					@click="showFileUploadDialog = true"
+				/>
+				<template #popper>
+					Attach files ({{ fileArrayFiltered.length === 1 ? '1 file' : fileArrayFiltered.length + ' files' }})
+				</template>
+			</VTooltip>
 			<Dialog
 				v-model:visible="showFileUploadDialog"
 				header="Upload File(s)"
@@ -397,6 +411,7 @@ export default {
 }
 
 .tooltip-component {
+	height: 100%;
 	margin-right: 0.5rem;
 	display: flex;
 	align-items: center;

diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
@@ -27,9 +27,18 @@
 								},
 							}"
 						/>
-						<span v-tooltip="formatTimeStamp(message.timeStamp)" class="time-stamp">{{
-							$filters.timeAgo(new Date(message.timeStamp))
-						}}</span>
+
+						<VTooltip
+							:autoHide="false"
+							:popperTriggers="['hover']"
+						>
+							<span class="time-stamp">{{
+								$filters.timeAgo(new Date(message.timeStamp))
+							}}</span>
+							<template #popper>
+								{{formatTimeStamp(message.timeStamp)}}
+							</template>
+						</VTooltip>
 
 						<!-- Copy user message button -->
 						<Button
@@ -82,7 +91,7 @@
 						<span
 							v-for="citation in message.citations"
 							:key="citation.id"
-							v-tooltip.top="{ value: citation.filepath, showDelay: 500, hideDelay: 300 }"
+							v-tooltip.top="{ content: citation.filepath, showDelay: 500, hideDelay: 300 }"
 							class="citation"
 						>
 							<i class="pi pi-file"></i>

diff --git a/src/ui/UserPortal/components/ChatSidebar.vue b/src/ui/UserPortal/components/ChatSidebar.vue
@@ -44,31 +44,54 @@
 			>
 				<div class="chat" :class="{ 'chat--selected': currentSession?.id === session.id }">
 					<!-- Chat name -->
-					<span v-tooltip="{ value: session.name }" class="chat__name">{{ session.name }}</span>
+
+					<VTooltip
+							:autoHide="false"
+							:popperTriggers="['hover']"
+					>
+						<span class="chat__name">{{ session.name }}</span>
+						<template #popper>
+							{{session.name}}
+						</template>
+					</VTooltip>
 
 					<!-- Chat icons -->
 					<span v-if="currentSession?.id === session.id" class="chat__icons">
 						<!-- Rename session -->
-						<Button
-							v-tooltip="'Rename chat session'"
-							icon="pi pi-pencil"
-							size="small"
-							severity="secondary"
-							text
-							aria-label="Rename chat session"
-							@click.stop="openRenameModal(session)"
-						/>
+						<VTooltip
+								:autoHide="false"
+								:popperTriggers="['hover']"
+						>
+							<Button
+								icon="pi pi-pencil"
+								size="small"
+								severity="secondary"
+								text
+								aria-label="Rename chat session"
+								@click.stop="openRenameModal(session)"
+							/>
+							<template #popper>
+								Rename chat session
+							</template>
+						</VTooltip>
 
 						<!-- Delete session -->
-						<Button
-							v-tooltip="'Delete chat session'"
-							icon="pi pi-trash"
-							size="small"
-							severity="danger"
-							text
-							aria-label="Delete chat session"
-							@click.stop="sessionToDelete = session"
-						/>
+						<VTooltip
+								:autoHide="false"
+								:popperTriggers="['hover']"
+						>
+							<Button
+								icon="pi pi-trash"
+								size="small"
+								severity="danger"
+								text
+								aria-label="Delete chat session"
+								@click.stop="sessionToDelete = session"
+							/>
+							<template #popper>
+								Delete chat session
+							</template>
+						</VTooltip>
 					</span>
 				</div>
 			</div>

diff --git a/src/ui/UserPortal/components/NavBar.vue b/src/ui/UserPortal/components/NavBar.vue
@@ -23,6 +23,23 @@
 				<div class="navbar__content__left__item">
 					<template v-if="currentSession">
 						<span>{{ currentSession.name }}</span>
+						<VTooltip
+								:autoHide="false"
+								:popperTriggers="['hover']"
+						>
+							<Button
+								v-if="!$appConfigStore.isKioskMode"
+								class="button--share"
+								icon="pi pi-copy"
+								text
+								severity="secondary"
+								aria-label="Copy link to chat session"
+								@click="handleCopySession"
+							/>
+							<template #popper>
+								Copy link to chat session
+							</template>
+						</VTooltip>
 						<Toast position="top-center" />
 					</template>
 					<template v-else>
@@ -38,11 +55,18 @@
 			<div class="navbar__content__right">
 				<template v-if="currentSession">
 					<span class="header__dropdown">
-						<AgentIcon
-							:src="$appConfigStore.agentIconUrl || '~/assets/FLLM-Agent-Light.svg'"
-							alt="Select an agent"
-							tooltip="Select an agent"
-						/>
+						<VTooltip
+								:autoHide="false"
+								:popperTriggers="['hover']"
+						>
+							<AgentIcon
+								:src="$appConfigStore.agentIconUrl || '~/assets/FLLM-Agent-Light.svg'"
+								alt="Select an agent"
+							/>
+							<template #popper>
+								Select an agent
+							</template>
+						</VTooltip>
 						<Dropdown
 							v-model="agentSelection"
 							:options="agentOptionsGroup"

diff --git a/src/ui/UserPortal/nuxt.config.ts b/src/ui/UserPortal/nuxt.config.ts
@@ -17,7 +17,7 @@ export default defineNuxtConfig({
 	compatibilityDate: '2024-08-27',
 	ssr: false,
 	devtools: { enabled: true },
-	modules: ['@pinia/nuxt', '@nuxtjs/eslint-module'],
+	modules: ['@pinia/nuxt', '@nuxtjs/eslint-module', 'floating-vue/nuxt'],
 	components: true,
 	app: {
 		head: {

diff --git a/src/ui/UserPortal/package-lock.json b/src/ui/UserPortal/package-lock.json
diff --git a/src/ui/UserPortal/package.json b/src/ui/UserPortal/package.json
@@ -33,6 +33,7 @@
 		"@pinia/nuxt": "^0.5.1",
 		"dompurify": "^3.1.6",
 		"file-icons-js": "github:websemantics/file-icons-js",
+		"floating-vue": "^2.0.0",
 		"highlight.js": "^11.10.0",
 		"javascript-time-ago": "^2.5.9",
 		"katex": "^0.16.11",

diff --git a/src/ui/UserPortal/plugins/primevue.ts b/src/ui/UserPortal/plugins/primevue.ts
@@ -7,7 +7,6 @@ import Toast from 'primevue/toast';
 import Chip from 'primevue/chip';
 import Textarea from 'primevue/textarea';
 import ToastService from 'primevue/toastservice';
-import Tooltip from 'primevue/tooltip';
 import Divider from 'primevue/divider';
 import Dropdown from 'primevue/dropdown';
 import Avatar from 'primevue/avatar';
@@ -47,5 +46,4 @@ export default defineNuxtPlugin((nuxtApp) => {
 	nuxtApp.vueApp.use(ConfirmationService);
 
 	nuxtApp.vueApp.use(ToastService);
-	nuxtApp.vueApp.directive('tooltip', Tooltip);
 });