Merge pull request #1644 from solliancenet/sc-fix-chat-thread-scroll-…

…behavior-081 (0.8.1) Fix chat thread scroll behavior with accessibility
solliancenet · Aug 28, 2024 · 87930f6 · 87930f6
2 parents dce4b8c + 4353b13
commit 87930f6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 23 deletions.
diff --git a/src/ui/UserPortal/components/ChatThread.vue b/src/ui/UserPortal/components/ChatThread.vue
@@ -20,15 +20,17 @@
 			<template v-else>
 				<!-- Messages -->
 				<template v-if="messages.length !== 0">
-					<div class="spacer" />
 					<ChatMessage
-						v-for="(message, index) in messages.slice()"
+						v-for="(message, index) in messages.slice().reverse()"
+						:id="`message-${getMessageOrderFromReversedIndex(index)}`"
 						:key="`${message.id}-${componentKey}`"
 						:message="message"
-						:show-word-animation="
-							index === messages.length - 1 && userSentMessage && message.sender === 'Assistant'
-						"
+						:show-word-animation="index === 0 && userSentMessage && message.sender === 'Assistant'"
 						role="log"
+						:tabindex="getMessageOrderFromReversedIndex(index)"
+						:aria-flowto="
+							index === 0 ? null : `message-${getMessageOrderFromReversedIndex(index) + 1}`
+						"
 						@rate="handleRateMessage($event.message, $event.isLiked)"
 					/>
 				</template>
@@ -99,14 +101,13 @@ export default {
 
 	mounted() {
 		eventBus.on('operation-completed', this.handleOperationCompleted);
-		this.scrollToBottom();
-	},
-
-	updated() {
-		this.scrollToBottom();
 	},
 
 	methods: {
+		getMessageOrderFromReversedIndex(index) {
+			return this.messages.length - 1 - index;
+		},
+
 		async handleRateMessage(message: Message, isLiked: Message['rating']) {
 			await this.$appStore.rateMessage(message, isLiked);
 		},
@@ -168,12 +169,6 @@ export default {
 				await this.$appStore.getMessages();
 			}
 		},
-
-		scrollToBottom() {
-			this.$nextTick(() => {
-				this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight;
-			});
-		},
 	},
 };
 </script>
@@ -205,7 +200,7 @@ export default {
 
 .chat-thread__messages {
 	display: flex;
-	flex-direction: column;
+	flex-direction: column-reverse;
 	flex: 1;
 	overflow-y: auto;
 	overscroll-behavior: auto;
@@ -222,6 +217,7 @@ export default {
 .empty {
 	flex-direction: column;
 }
+
 .new-chat-alert {
 	background-color: #fafafa;
 	margin: 10px;
@@ -258,8 +254,4 @@ footer {
 	font-size: 0.85rem;
 	padding-right: 24px;
 }
-
-.spacer {
-	flex-grow: 1;
-}
 </style>
diff --git a/src/ui/UserPortal/components/NavBar.vue b/src/ui/UserPortal/components/NavBar.vue
@@ -30,7 +30,7 @@
 				<div class="navbar__content__left__item">
 					<template v-if="currentSession">
 						<span>{{ currentSession.name }}</span>
-						<VTooltip :auto-hide="false" :popper-triggers="['hover']">
+						<!-- <VTooltip :auto-hide="false" :popper-triggers="['hover']">
 							<Button
 								v-if="!$appConfigStore.isKioskMode"
 								class="button--share"
@@ -41,7 +41,7 @@
 								@click="handleCopySession"
 							/>
 							<template #popper> Copy link to chat session </template>
-						</VTooltip>
+						</VTooltip> -->
 						<Toast position="top-center" />
 					</template>
 					<template v-else>