@quidgest/chatbot 0.1.0 → 0.2.0

package/src/components/ChatBot.vue

@@ -34,44 +34,50 @@
 					:sessionID="message.sessionID"/>
 			</div>
 		</div>
-		<!--show image preview if exists-->
-		<div
-			v-if="imagePreviewUrl"
-			class="q-chatbot__image-preview">
-			<img
-				:src="imagePreviewUrl"
-				alt="Image preview" />
-			<q-button
-				class="q-chatbot__remove-image"
-				b-style="secondary"
-				flat
-				round
-				@click="removeImage">
-				<q-icon icon="bin" />
-			</q-button>
-		</div>
 	</div>
   
 		<div class="q-chatbot__footer-container">
 		  <q-label :label="props.texts.inputLabel"/>
 		  <div 
 			class="q-chatbot__footer"
+			@dragover.prevent="onDragOver"
+			@dragleave.prevent="onDragLeave"
+			@drop.prevent="onDrop"
 			:class="chatBotFooterClasses">
-			<div class="q-chatbot__input">
-			  <q-text-area
-				v-model="userPrompt"
-				size="block"
-				autosize
-				resize="none"
-				:rows="2"
-				:disabled="isDisabled"
-				@keyup.enter="sendMessage" />
+			<div class="q-chatbot__input-wrapper">
+				<div
+					v-if="imagePreviewUrl"
+					class="q-chatbot__image-preview">
+					<img
+						:src="imagePreviewUrl"
+						tabindex="0"
+						alt="Image preview" />
+					<q-button
+						class="q-chatbot__remove-image"
+						tabindex="0"
+						b-style="secondary"
+						flat
+						round
+						@click="removeImage">
+						<q-icon icon="bin" />
+					</q-button>
+				</div>
+				<div class="q-chatbot__input">
+				<q-text-area
+					v-model="userPrompt"
+					size="block"
+					autosize
+					resize="none"
+					:rows="2"
+					:disabled="isDisabled"
+					@keyup.enter="sendMessage" />
+				</div>
 			</div>
 			<div class="q-chatbot__send-container">
 			  <!-- Upload button moved to the same container as send, but positioned to the left -->
 			  <q-button
 				:title="props.texts.imageUpload"
-				b-style="primary"
+				b-style="secondary"
 				class="q-chatbot__upload"
 				:disabled="isChatDisabled || isLoading || hasSelectedImage"
 				@click="triggerImageUpload">
@@ -86,15 +92,13 @@
 				@change="handleImageUpload"
 				:accept="acceptedImageTypes"
 				class="hidden-input" style="display: none;" />
-				
-			  <div class="spacer"></div>
 			  
 			  <q-button
 				:title="props.texts.sendMessage"
 				b-style="primary"
 				class="q-chatbot__send"
 				:disabled="isSendButtonDisabled"
-				:readonly="isDisabled"
+				:readonly="isSendButtonDisabled"
 				:loading="isLoading"
 				@click="sendMessage">
 				<q-icon icon="send" />
@@ -109,7 +113,7 @@
 <script setup lang="ts">
 	import { onMounted, nextTick, ref, watch, computed } from 'vue'
 	import type { Ref } from 'vue'
-	import Axios from 'axios'
+	import axios from 'axios'
 	import type { AxiosResponse } from 'axios'
 	import { CBMessage } from '@/components'
 
@@ -136,6 +140,7 @@
     const imagePreviewUrl = ref<string | null>(null)
     const acceptedImageTypes = computed(() => '.png, .jpeg, .jpg, .svg, .webp')
     const hasSelectedImage = ref<boolean>(false)
+    const isDragging = ref(false)
     
     // Computed property to check if the send button should be enabled
     const isSendButtonDisabled = computed(() => {
@@ -179,7 +184,8 @@
 	
 	const chatBotFooterClasses = computed(() => {
 		return {
-			'q-chatbot__footer-disabled': isDisabled.value
+			'q-chatbot__footer-disabled': isDisabled.value,
+			'drag-over' : isDragging.value && !hasSelectedImage.value,
 		}
 	})
 	
@@ -187,39 +193,50 @@
 		isChatDisabled.value = state
 	}
 	
-	function initChat() {
-		Axios.post(props.apiEndpoint + '/auth/login', {
+	async function initChat() {
+		const response = await axios.post(props.apiEndpoint + '/auth/login', {
 			username: props.username,
 			password: 'test'
 		})
-		.then((response: AxiosResponse) => {
-			if (response.status !== 200 || !response.data.success) {
-				setDisabledState(true)
-				addChatMessage(props.texts.loginError)
-				console.log(`Unsuccessful login, endpoint gave status ${response.status}`)
-				return
-			}
-			loadChatData()
-		})
-		.catch((error: Error) => {
+
+		if(!response.data) {
+			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('Error during login: ' + error)
-		})
-	}
+			console.log(`Unsuccessful login, endpoint gave status ${response.status}`)
+			return
+		}
+
+		loadChatData()
+	};
 	
-	function loadChatData() {
-		Axios.post(props.apiEndpoint + '/prompt/load', {
+	async function loadChatData() {
+		const response = await axios.post(props.apiEndpoint + '/prompt/load', {
 			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 load, endpoint gave status ${response.status}`)
-				return
+
+		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
 			}
+
 			sendInitialMessage()
 			response.data.history.forEach((message: ChatBotMessageContent) => {
 				const imgUrl = message.imageUrl ? props.controllerEndpoint + message.imageUrl : undefined
@@ -227,14 +244,8 @@
 					message.content,
 					message.type === 'ai' ? 'bot' : 'user',
 					imgUrl,
-					message.sessionID
-				)
-			})
-		})
-		.catch((error: Error) => {
-			setDisabledState(true)
-			addChatMessage(props.texts.loginError)
-			console.log('Error loading chat data: ' + error)
+				message.sessionID
+			)
 		})
 	}
 	
@@ -284,10 +295,7 @@
 	function scrollToBottom() {
 		nextTick(() => {
 			if (messagesContainer.value) {
-				messagesContainer.value.scrollTo({
-					top: messagesContainer.value.scrollHeight,
-					behavior: 'smooth'
-				})
+				messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
 			}
 		})
 	}
@@ -335,9 +343,14 @@
 		)
 			return
 	
-		// Add user's message and force scroll to bottom
+
+		if(messagesContainer.value) {
+			messagesContainer.value.scrollTo({
+				top: messagesContainer.value.scrollHeight,
+				behavior: 'smooth'
+			})
+		}
 		addChatMessage(userPrompt.value, 'user', imagePreviewUrl.value)
-		scrollToBottom()
 	
 		// Send prompt to bot
 		setChatPrompt(userPrompt.value, imageInput.value?.files?.[0])
@@ -345,7 +358,7 @@
 		userPrompt.value = '' // Clear user input
 	}
 	
-	function setChatPrompt(prompt: string, image?: File) {
+	async function setChatPrompt(prompt: string, image?: File) {
 		// Add an empty bot message marked as streaming to trigger bouncing dots animation
 		addChatMessage('', 'bot')
 		let msg = getLastMessage()
@@ -353,58 +366,64 @@
 
 		const currentSessionID: string = msg?.sessionID || ''
 
-		let params = null
-
+		const formData = new FormData()
 		if (image) {
-			params = new FormData()
-			// Create the FormData
-			params.append('message', prompt)
-			params.append('project', props.projectPath)
-			params.append('user', props.username)
-			params.append('image', image)
-			params.append('sessionID', currentSessionID)
-		} else {
-			//Send message request
-			params = {
-				message: prompt,
-				project: props.projectPath,
-				user: props.username,
-				sessionID: currentSessionID
-			}
+			formData.append('image', image)
 		}
-	
+		
+		formData.append('message', prompt)
+		formData.append('project', props.projectPath)
+		formData.append('user', props.username)
+		formData.append('sessionID', currentSessionID)
+
+
 		isLoading.value = true
-		Axios({
-			url: props.apiEndpoint + '/prompt/message',
-			method: 'POST',
-			data: params,
-			onDownloadProgress: (progressEvent) => {
-				const chunk = progressEvent.event?.currentTarget.response
-				const status = progressEvent.event?.currentTarget.status
-	
-				if (status !== 200) return
-	
-				if (msg) {
-					msg.message = chunk
-				}
-				if (autoScrollEnabled.value) scrollToBottom()
-			}
-		})
-		.then(({ data }) => {
-			if (msg) msg.message = data
+		
+		const response = await axios.post(props.apiEndpoint + '/prompt/submit', formData, {
+			headers: {
+				'Content-Type': 'text/event-stream',
+				'Accept': 'text/event-stream',
+			},
+			responseType: 'stream',
+			adapter: 'fetch',
 		})
-		.catch((error) => {
+		
+		if(!response.data) {
 			addChatMessage(props.texts.botIsSick)
 			setDisabledState(true)
-			console.log(error)
-		})
-		.finally(() => {
 			isLoading.value = false
-		})
-}
+			return
+		}
+
+		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
+
+			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)
+				}
+			}
+			if(autoScrollEnabled.value) scrollToBottom()
+		}
+		isLoading.value = false
+	}
 	
 	function clearChat() {
-		Axios.post(props.apiEndpoint + '/prompt/clear', {
+		axios.post(props.apiEndpoint + '/prompt/clear', {
 			username: props.username,
 			project: props.projectPath
 		})
@@ -430,7 +449,48 @@
 		if (sender === 'user') classes.push('q-chatbot__messages-wrapper_right')
 		return classes
 	}
+
+
+	function onDragOver(event: DragEvent) {
+        event.preventDefault()
+        if (!isDisabled.value) {
+            isDragging.value = true
+        }
+    }
+
+    function onDragLeave(event: DragEvent) {
+        event.preventDefault()
+        isDragging.value = false
+    }
+
+    function onDrop(event: DragEvent) {
+        event.preventDefault()
+        isDragging.value = false
+        
+        if (isDisabled.value || hasSelectedImage.value)
+            return
+        
+        const files = event.dataTransfer?.files
+        if (files && files.length > 0) {
+            // Check if file is an image
+            const file = files[0]
+            if (file.type.startsWith('image/')) {
+                // Create a file input event
+                if (imageInput.value) {
+                    // Create a new FileList-like object 
+                    const dataTransfer = new DataTransfer()
+                    dataTransfer.items.add(file)
+                    imageInput.value.files = dataTransfer.files
+                    
+                    // Set the preview URL
+                    imagePreviewUrl.value = URL.createObjectURL(file)
+                    hasSelectedImage.value = true
+                }
+            }
+        }
 	
+	}
+
 	watch(
 		() => props.apiEndpoint,
 		() => {

package/src/components/index.ts

@@ -1,4 +1,4 @@
 import CBMessage from './CBMessage.vue'
-import type { CBMessageProps } from './CBMessage.vue'
+import type { CBMessageProps } from '../types/message.type'
 
 export { CBMessage, CBMessageProps }

package/src/types/message.type.ts

@@ -16,3 +16,40 @@ export type ChatBotMessageContent = {
 }
 
 export type ChatBotMessageSender = 'bot' | 'user'
+
+export interface CBMessageProps {
+    /*
+     * Sender of the message
+     */
+    sender?: ChatBotMessageSender
+
+    /*
+     * Message to be displayed
+     */
+    message?: string
+
+    /*
+     * Date of when the message was sent
+     */
+    date?: Date
+
+    /*
+     * If the message is loading
+     */
+    loading?: boolean
+
+    /**
+     * Project locale
+     */
+    dateFormat?: string
+
+    /**
+     * User image
+     */
+    userImage: string
+
+    /**
+     * Chatbot image
+     */
+    chatbotImage: string
+}

package/src/assets/copy.svg

@@ -1,7 +0,0 @@
-<svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24">
-    <path
-        fill="currentColor"
-        d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
-</svg>

package/src/assets/thumbDown.svg

@@ -1,9 +0,0 @@
-<svg
-    id="Layer_1"
-    class="q-icon q-icon__svg"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 21.86 19.87">
-    <path
-        fill="currentColor"
-        d="M17.89,11.92h3.97V0h-3.97M13.91,0H4.97c-.82,0-1.53.5-1.83,1.21L.14,8.22c-.09.23-.14.47-.14.73v1.99c0,1.1.89,1.99,1.99,1.99h6.27l-.94,4.54c-.02.1-.03.2-.03.31,0,.42.17.78.44,1.05l1.05,1.05,6.54-6.55c.37-.36.59-.85.59-1.4V1.99c0-1.1-.89-1.99-1.99-1.99Z" />
-</svg>

package/src/assets/thumbUp.svg

@@ -1,9 +0,0 @@
-<svg
-    id="Layer_1"
-    class="q-icon q-icon__svg"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 21.7 19.73">
-    <path
-        fill="currentColor"
-        d="M21.7,8.88c0-1.09-.89-1.97-1.97-1.97h-6.23l.95-4.51c.02-.1.03-.21.03-.32,0-.4-.17-.78-.43-1.05l-1.05-1.04-6.49,6.49c-.36.36-.58.86-.58,1.4v9.86c0,1.09.88,1.97,1.97,1.97h8.88c.82,0,1.52-.49,1.82-1.2l2.98-6.95c.09-.23.14-.46.14-.72v-1.97M0,19.73h3.95V7.89H0v11.84Z" />
-</svg>