@quidgest/chatbot 0.2.0 → 0.3.1

package/dist/style.css

@@ -1 +1 @@
-.q-chatbot{width:100%;padding:1rem;display:flex;flex-direction:column;height:100%}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__text p{margin:0}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;gap:.75rem;flex-direction:column;overflow:hidden}.q-chatbot__footer-container{padding:.8rem}.q-chatbot__input-wrapper{display:flex;flex-direction:column;position:relative}.q-chatbot__image-preview{display:inline-flex;align-items:center;position:relative;margin-top:.5rem;width:fit-content}.q-chatbot__image-preview img{width:60px;height:60px;object-fit:cover;border-radius:4px;margin-right:.25rem;border:1px solid #eaebec;overflow:hidden}.q-chatbot__image-preview img:hover+.q-chatbot__remove-image,.q-chatbot__image-preview img:focus+.q-chatbot__remove-image{opacity:1;pointer-events:auto}.q-chatbot__image-preview img:focus{outline:solid rgb(var(--q-theme-info-rgb)/50%)}.q-chatbot .q-btn.q-chatbot__remove-image{position:absolute;top:-5px;right:-5px;background-color:#00000080;color:#fff;border-radius:50%;padding:5px;font-size:12px;border:none;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.q-chatbot .q-btn.q-chatbot__remove-image:hover,.q-chatbot .q-btn.q-chatbot__remove-image:focus{opacity:1;pointer-events:auto}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:space-between;width:100%}.q-chatbot__send-container .q-chatbot__send,.q-chatbot__send-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__send-container .spacer{flex-grow:1}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer-disabled{background-color:rgb(var(--q-theme-neutral-light-rgb)/.25);cursor:not-allowed}.q-chatbot__footer.drag-over{border:2px dashed rgb(var(--q-theme-primary-rgb)/.25);background-color:#018bd20d}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__upload-container{display:flex;justify-content:flex-start;padding:.25rem 0}.q-chatbot__upload-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:end;max-width:100%}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:column;gap:.25rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-container{align-items:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-wrapper{display:flex;align-items:flex-end}.q-chatbot__profile.q-icon__img{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{display:flex;align-items:center;padding:.3rem .5rem;background-color:#eaebec;width:fit-content;white-space:normal;min-height:2rem;word-wrap:break-word;word-break:break-word;border-radius:0 .5rem .5rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233;border-radius:.5rem 0 .5rem .5rem}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}.q-chatbot__retry-button{align-items:center;display:flex}.q-chatbot__dialog-title{margin:.5rem 0}#comment-dialog .q-dialog__header,.hidden-input{display:none}.pulsing-dots{display:flex;align-items:center;justify-content:center;gap:.1rem}.dot{font-size:20px;line-height:1;animation:pulse 1s infinite;color:var(--q-theme-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.6}50%{transform:scale(1);opacity:1}}
+.q-chatbot{width:100%;padding:1rem;display:flex;flex-direction:column;height:100%}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__text p{margin:0}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;gap:.75rem;flex-direction:column;overflow:hidden}.q-chatbot__footer-container{padding:.8rem}.q-chatbot__input-wrapper{display:flex;flex-direction:column;position:relative}.q-chatbot__image-preview{display:inline-flex;align-items:center;position:relative;margin-top:.5rem;width:fit-content}.q-chatbot__image-preview img{width:60px;height:60px;object-fit:cover;border-radius:4px;margin-right:.25rem;border:1px solid #eaebec;overflow:hidden}.q-chatbot__image-preview img:hover+.q-chatbot__remove-image,.q-chatbot__image-preview img:focus+.q-chatbot__remove-image{opacity:1;pointer-events:auto}.q-chatbot__image-preview img:focus{outline:solid rgb(var(--q-theme-info-rgb)/50%)}.q-chatbot .q-button.q-chatbot__remove-image{position:absolute;top:-5px;right:-5px;background-color:#00000080;color:#fff;border-radius:50%;padding:5px;font-size:12px;border:none;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.q-chatbot .q-button.q-chatbot__remove-image:hover,.q-chatbot .q-button.q-chatbot__remove-image:focus{opacity:1;pointer-events:auto}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:space-between;width:100%}.q-chatbot__send-container .q-chatbot__send,.q-chatbot__send-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__send-container .spacer{flex-grow:1}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer-disabled{background-color:rgb(var(--q-theme-neutral-light-rgb)/.25);cursor:not-allowed}.q-chatbot__footer.drag-over{border:2px dashed rgb(var(--q-theme-primary-rgb)/.25);background-color:#018bd20d}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__upload-container{display:flex;justify-content:flex-start;padding:.25rem 0}.q-chatbot__upload-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:end;max-width:100%}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:column;gap:.25rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-container{align-items:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-wrapper{display:flex;align-items:flex-end}.q-chatbot__profile.q-icon__img{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{display:flex;align-items:center;padding:.3rem .5rem;background-color:#eaebec;width:fit-content;white-space:normal;min-height:2rem;word-wrap:break-word;word-break:break-word;border-radius:0 .5rem .5rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233;border-radius:.5rem 0 .5rem .5rem}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}.q-chatbot__retry-button{align-items:center;display:flex}.q-chatbot__dialog-title{margin:.5rem 0}#comment-dialog .q-dialog__header,.hidden-input{display:none}.pulsing-dots{display:flex;align-items:center;justify-content:center;gap:.1rem}.dot{font-size:20px;line-height:1;animation:pulse 1s infinite;color:var(--q-theme-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.6}50%{transform:scale(1);opacity:1}}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@quidgest/chatbot",
     "private": false,
-    "version": "0.2.0",
+    "version": "0.3.1",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",
@@ -51,7 +51,7 @@
         "vue-tsc": "^1.8.27"
     },
     "peerDependencies": {
-        "@quidgest/ui": "^0.14.19",
-        "vue": "3.5.13"
+        "@quidgest/ui": "^0.15.9",
+        "vue": "^3.5.13"
     }
 }

package/src/assets/styles/styles.scss

@@ -74,7 +74,7 @@
         }
     }
 
-    .q-btn.q-chatbot__remove-image {
+    .q-button.q-chatbot__remove-image {
         position: absolute;
         top: -5px;
         right: -5px;

package/src/components/CBMessage.vue

@@ -56,7 +56,6 @@
                         :title="props.texts.goodResponse"
                         borderless
                         :disabled="loading"
-                        b-style="secondary"
                         @click="openFeedbackDialog(1)">
                         <q-icon icon="thumb-up" />
                     </q-button>
@@ -64,7 +63,6 @@
                         :title="props.texts.badResponse"
                         borderless
                         :disabled="loading"
-                        b-style="secondary"
                         @click="openFeedbackDialog(0)">
                         <q-icon icon="thumb-down" />
                     </q-button>
@@ -72,7 +70,6 @@
                         :title="props.texts.copyResponse"
                         borderless
                         :disabled="loading"
-                        b-style="secondary"
                         @click="copyResponse">
                         <q-icon icon="copy-content" />
                     </q-button>
@@ -187,7 +184,7 @@
             action: submitFeedback,
             props: {
                 label: props.texts.submitButton,
-                'b-style': 'primary',
+                'variant': 'bold',
             },
             icon: {
                 icon: 'submit'
@@ -196,8 +193,7 @@
         {
             id: 'cancel-btn',
             props: {
-                label: props.texts.cancelButton,
-                'b-style': 'secondary',
+                label: props.texts.cancelButton
             },
             icon: {
                 icon: 'cancel'

package/src/components/ChatBot.vue

@@ -5,7 +5,6 @@
 		<div class="q-chatbot__tools">
 		  <q-button
 			:title="props.texts.clearChat"
-			b-style="secondary"
 			:disabled="isChatDisabled"
 			borderless
 			@click="clearChat">
@@ -55,7 +54,6 @@
 					<q-button
 						class="q-chatbot__remove-image"
 						tabindex="0"
-						b-style="secondary"
 						flat
 						round
 						@click="removeImage">
@@ -77,7 +75,6 @@
 			  <!-- Upload button moved to the same container as send, but positioned to the left -->
 			  <q-button
 				:title="props.texts.imageUpload"
-				b-style="secondary"
 				class="q-chatbot__upload"
 				:disabled="isChatDisabled || isLoading || hasSelectedImage"
 				@click="triggerImageUpload">
@@ -95,7 +92,7 @@
 			  
 			  <q-button
 				:title="props.texts.sendMessage"
-				b-style="primary"
+				variant="bold"
 				class="q-chatbot__send"
 				:disabled="isSendButtonDisabled"
 				:readonly="isSendButtonDisabled"
@@ -194,49 +191,36 @@
 	}
 	
 	async function initChat() {
-		const response = await axios.post(props.apiEndpoint + '/auth/login', {
-			username: props.username,
-			password: 'test'
-		})
-
-		if(!response.data) {
-			addChatMessage(props.texts.loginError)
-			setDisabledState(true)
-			isLoading.value = false
-			return
-		}
+		try {
+			await axios.post(props.apiEndpoint + '/auth/login', {
+				username: props.username,
+				password: 'test'
+			})
 
-		if (response.status !== 200 || !response.data.success) {
+			loadChatData()
+		} catch (error) {
 			setDisabledState(true)
 			addChatMessage(props.texts.loginError)
-			console.log(`Unsuccessful login, endpoint gave status ${response.status}`)
-			return
+			console.log('Error logging in: ' + error)
 		}
-
-		loadChatData()
 	};
 	
 	async function loadChatData() {
-		const response = await axios.post(props.apiEndpoint + '/prompt/load', {
-			username: props.username,
-			project: props.projectPath
-		})
+		try {
+			const response = await axios.post(props.apiEndpoint + '/prompt/load', {
+				username: props.username,
+				project: props.projectPath
+			});
 
-		if(!response.data) {
-			setDisabledState(true)
-			addChatMessage(props.texts.loginError)
-			setDisabledState(true)
-			isLoading.value = false
-			return
-		}	
-
-		if (response.status !== 200 || !response.data.success) {
-			setDisabledState(true)
-			addChatMessage(props.texts.loginError)
-			console.log(`Unsuccessful load, endpoint gave status ${response.status}`)
-			return
+			if(!response) return console.error('No response from server');
+	
+			if (response.status !== 200 || !response.data.success) {
+				setDisabledState(true)
+				addChatMessage(props.texts.botIsSick)
+				console.log(`Unsuccessful load, endpoint gave status ${response.status}`)
+				return
 			}
-
+	
 			sendInitialMessage()
 			response.data.history.forEach((message: ChatBotMessageContent) => {
 				const imgUrl = message.imageUrl ? props.controllerEndpoint + message.imageUrl : undefined
@@ -244,9 +228,15 @@
 					message.content,
 					message.type === 'ai' ? 'bot' : 'user',
 					imgUrl,
-				message.sessionID
-			)
-		})
+				message.sessionID)
+			})
+			
+		} catch(error) {
+			setDisabledState(true)
+			addChatMessage(props.texts.botIsSick)
+			console.log('Error loading: ' + error)
+		}
+
 	}
 	
 	// Modified addChatMessage to add isStreaming flag for empty bot messages
@@ -379,47 +369,50 @@
 
 		isLoading.value = true
 		
-		const response = await axios.post(props.apiEndpoint + '/prompt/submit', formData, {
-			headers: {
-				'Content-Type': 'text/event-stream',
-				'Accept': 'text/event-stream',
-			},
-			responseType: 'stream',
-			adapter: 'fetch',
-		})
+		try {
+			const response = await axios.post(props.apiEndpoint + '/prompt/submit', formData, {
+				headers: {
+					'Content-Type': 'text/event-stream',
+					'Accept': 'text/event-stream',
+				},
+				responseType: 'stream',
+				adapter: 'fetch',
+			})
 		
-		if(!response.data) {
-			addChatMessage(props.texts.botIsSick)
-			setDisabledState(true)
-			isLoading.value = false
-			return
-		}
+			if(!response) return console.error('No response from server')
 
-		const reader = response.data.getReader()
-		const decoder = new TextDecoder("utf-8")
+			const reader = response.data.getReader()
+			const decoder = new TextDecoder("utf-8")
 
-		while(true) {
-			const { done, value } = await reader.read()
-			if(done) break
-			
-			const chunk = decoder.decode(value, { stream: true })
-			const eventList = chunk.match(/data:\s*({.*?})/g)
-			if(!eventList) continue
+			while(true) {
+				const { done, value } = await reader.read()
+				if(done) break
+				
+				const chunk = decoder.decode(value, { stream: true })
+				const eventList = chunk.match(/data:\s*({.*?})/g)
+				if(!eventList) continue
 
-			for(const event of eventList) {
-				try {
-					const rawData = event.split('data:')[1].trim()
-					const data = JSON.parse(rawData)
-					if(msg) {
-						msg.message += data.value
+				for(const event of eventList) {
+					try {
+						const rawData = event.split('data:')[1].trim()
+						const data = JSON.parse(rawData)
+						if(msg) {
+							msg.message += data.value
+						}
+					} catch (error) {
+						console.error('Error parsing match:', error)
 					}
-				} catch (error) {
-					console.error('Error parsing match:', error)
 				}
+				if(autoScrollEnabled.value) scrollToBottom()
 			}
-			if(autoScrollEnabled.value) scrollToBottom()
+
+			isLoading.value = false
+		} catch (error) {
+			setDisabledState(true)
+			addChatMessage(props.texts.botIsSick)
+			console.log('Error setting chat prompt: ' + error)
+			return
 		}
-		isLoading.value = false
 	}
 	
 	function clearChat() {
@@ -427,21 +420,21 @@
 			username: props.username,
 			project: props.projectPath
 		})
-			.then((response: AxiosResponse) => {
-				if (response.status !== 200 || !response.data.success) {
-					setDisabledState(true)
-					addChatMessage(props.texts.loginError)
-					console.log(`Unsuccessful clear, endpoint gave status ${response.status}`)
-					return
-				}
-				resetChat()
-				sendInitialMessage()
-			})
-			.catch((error: Error) => {
+		.then((response: AxiosResponse) => {
+			if (response.status !== 200 || !response.data.success) {
 				setDisabledState(true)
 				addChatMessage(props.texts.loginError)
-				console.log('Error clearing chat: ' + error)
-			})
+				console.log(`Unsuccessful clear, endpoint gave status ${response.status}`)
+				return
+			}
+			resetChat()
+			sendInitialMessage()
+		})
+		.catch((error: Error) => {
+			setDisabledState(true)
+			addChatMessage(props.texts.loginError)
+			console.log('Error clearing chat: ' + error)
+		})
 	}
 	
 	function getMessageClasses(sender: ChatBotMessageSender) {