Merge pull request #1642 from solliancenet/sc-fix-ui-lint-errors-081

(0.8.1) Fix UI lint errors + minor fixes
solliancenet · Aug 28, 2024 · dce4b8c · dce4b8c
2 parents b1b2a96 + 78eb1f9
commit dce4b8c
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 49 deletions.
diff --git a/src/ui/UserPortal/components/ChatInput.vue b/src/ui/UserPortal/components/ChatInput.vue
@@ -7,10 +7,7 @@
 					<template #popper> Use Shift+Enter to add a new line </template>
 				</VTooltip>
 			</div>
-			<VTooltip
-				:autoHide="false"
-				:popperTriggers="['hover']"
-			>
+			<VTooltip :auto-hide="false" :popper-triggers="['hover']">
 				<Button
 					:badge="fileArrayFiltered.length.toString() || null"
 					:aria-label="'Upload file (' + fileArrayFiltered.length.toString() + ' files attached)'"
@@ -21,7 +18,9 @@
 					@click="showFileUploadDialog = true"
 				/>
 				<template #popper>
-					Attach files ({{ fileArrayFiltered.length === 1 ? '1 file' : fileArrayFiltered.length + ' files' }})
+					Attach files ({{
+						fileArrayFiltered.length === 1 ? '1 file' : fileArrayFiltered.length + ' files'
+					}})
 				</template>
 			</VTooltip>
 			<Dialog

diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
@@ -28,9 +28,11 @@
 							}"
 						/>
 						<VTooltip :auto-hide="false" :popper-triggers="['hover']">
-							<span class="time-stamp" tabindex="0">{{ $filters.timeAgo(new Date(message.timeStamp)) }}</span>
+							<span class="time-stamp" tabindex="0">{{
+								$filters.timeAgo(new Date(message.timeStamp))
+							}}</span>
 							<template #popper>
-								{{formatTimeStamp(message.timeStamp)}}
+								{{ formatTimeStamp(message.timeStamp) }}
 							</template>
 						</VTooltip>
 
@@ -131,6 +133,7 @@
 					<span>
 						<!-- Copy message button -->
 						<Button
+							:disabled="message.type === 'LoadingMessage'"
 							class="message__button"
 							size="small"
 							text
@@ -152,8 +155,8 @@
 
 						<!-- Prompt dialog -->
 						<Dialog
-							class="prompt-dialog"
 							v-model:visible="viewPrompt"
+							class="prompt-dialog"
 							modal
 							header="Completion Prompt"
 						>

diff --git a/src/ui/UserPortal/components/ChatSidebar.vue b/src/ui/UserPortal/components/ChatSidebar.vue
@@ -48,22 +48,18 @@
 				@keydown.enter="handleSessionSelected(session)"
 			>
 				<div class="chat" :class="{ 'chat--selected': currentSession?.id === session.id }">
-
 					<!-- Chat name -->
 					<VTooltip :auto-hide="false" :popper-triggers="['hover']">
 						<h2 class="chat__name" tabindex="0">{{ session.name }}</h2>
 						<template #popper>
-							{{session.name}}
+							{{ session.name }}
 						</template>
 					</VTooltip>
 
 					<!-- Chat icons -->
 					<span v-if="currentSession?.id === session.id" class="chat__icons">
 						<!-- Rename session -->
-						<VTooltip
-								:autoHide="false"
-								:popperTriggers="['hover']"
-						>
+						<VTooltip :auto-hide="false" :popper-triggers="['hover']">
 							<Button
 								icon="pi pi-pencil"
 								size="small"
@@ -72,16 +68,11 @@
 								aria-label="Rename chat session"
 								@click.stop="openRenameModal(session)"
 							/>
-							<template #popper>
-								Rename chat session
-							</template>
+							<template #popper> Rename chat session </template>
 						</VTooltip>
 
 						<!-- Delete session -->
-						<VTooltip
-								:autoHide="false"
-								:popperTriggers="['hover']"
-						>
+						<VTooltip :auto-hide="false" :popper-triggers="['hover']">
 							<Button
 								icon="pi pi-trash"
 								size="small"
@@ -90,9 +81,7 @@
 								aria-label="Delete chat session"
 								@click.stop="sessionToDelete = session"
 							/>
-							<template #popper>
-								Delete chat session
-							</template>
+							<template #popper> Delete chat session </template>
 						</VTooltip>
 					</span>
 				</div>
@@ -152,7 +141,12 @@
 		>
 			<div v-if="deleteProcessing" class="delete-dialog-content">
 				<div role="status">
-					<i class="pi pi-spin pi-spinner" style="font-size: 2rem;" role="img" aria-label="Loading"></i>
+					<i
+						class="pi pi-spin pi-spinner"
+						style="font-size: 2rem"
+						role="img"
+						aria-label="Loading"
+					></i>
 				</div>
 			</div>
 			<div v-else>

diff --git a/src/ui/UserPortal/components/ChatThread.vue b/src/ui/UserPortal/components/ChatThread.vue
@@ -1,12 +1,19 @@
 <template>
 	<div class="chat-thread">
 		<!-- Message list -->
-		<div class="chat-thread__messages"
+		<div
+			ref="messageContainer"
+			class="chat-thread__messages"
 			:class="messages.length === 0 && 'empty'"
-			ref="messageContainer">
+		>
 			<template v-if="isLoading">
 				<div class="chat-thread__loading" role="status">
-					<i class="pi pi-spin pi-spinner" style="font-size: 2rem" role="img" aria-label="Loading"></i>
+					<i
+						class="pi pi-spin pi-spinner"
+						style="font-size: 2rem"
+						role="img"
+						aria-label="Loading"
+					></i>
 				</div>
 			</template>
 
@@ -18,9 +25,11 @@
 						v-for="(message, index) in messages.slice()"
 						:key="`${message.id}-${componentKey}`"
 						:message="message"
-						:show-word-animation="index === 0 && userSentMessage && message.sender === 'Assistant'"
-						@rate="handleRateMessage($event.message, $event.isLiked)"
+						:show-word-animation="
+							index === messages.length - 1 && userSentMessage && message.sender === 'Assistant'
+						"
 						role="log"
+						@rate="handleRateMessage($event.message, $event.isLiked)"
 					/>
 				</template>
 
@@ -161,10 +170,10 @@ export default {
 		},
 
 		scrollToBottom() {
-            this.$nextTick(() => {
-                this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight;
-            });
-        },
+			this.$nextTick(() => {
+				this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight;
+			});
+		},
 	},
 };
 </script>

diff --git a/src/ui/UserPortal/components/NavBar.vue b/src/ui/UserPortal/components/NavBar.vue
@@ -2,7 +2,11 @@
 	<div class="navbar">
 		<!-- Sidebar header -->
 		<div class="navbar__header">
-			<img v-if="$appConfigStore.logoUrl !== ''" :src="$appConfigStore.logoUrl" :alt="$appConfigStore.logoText" />
+			<img
+				v-if="$appConfigStore.logoUrl !== ''"
+				:src="$appConfigStore.logoUrl"
+				:alt="$appConfigStore.logoText"
+			/>
 			<span v-else>{{ $appConfigStore.logoText }}</span>
 
 			<template v-if="!$appConfigStore.isKioskMode">
@@ -26,10 +30,7 @@
 				<div class="navbar__content__left__item">
 					<template v-if="currentSession">
 						<span>{{ currentSession.name }}</span>
-						<VTooltip
-								:autoHide="false"
-								:popperTriggers="['hover']"
-						>
+						<VTooltip :auto-hide="false" :popper-triggers="['hover']">
 							<Button
 								v-if="!$appConfigStore.isKioskMode"
 								class="button--share"
@@ -39,9 +40,7 @@
 								aria-label="Copy link to chat session"
 								@click="handleCopySession"
 							/>
-							<template #popper>
-								Copy link to chat session
-							</template>
+							<template #popper> Copy link to chat session </template>
 						</VTooltip>
 						<Toast position="top-center" />
 					</template>
@@ -58,18 +57,13 @@
 			<div class="navbar__content__right">
 				<template v-if="currentSession">
 					<span class="header__dropdown">
-						<VTooltip
-								:autoHide="false"
-								:popperTriggers="['hover']"
-						>
+						<VTooltip :auto-hide="false" :popper-triggers="['hover']">
 							<AgentIcon
 								:src="$appConfigStore.agentIconUrl || '~/assets/FLLM-Agent-Light.svg'"
 								alt="Select an agent"
 								tabindex="0"
 							/>
-							<template #popper>
-								Select an agent
-							</template>
+							<template #popper> Select an agent </template>
 						</VTooltip>
 						<Dropdown
 							v-model="agentSelection"