@quidgest/chatbot 0.0.9 → 0.2.0

package/src/components/ChatBot.vue

@@ -28,32 +28,77 @@
 					:date-format="props.dateFormat"
 					:user-image="props.userImage"
 					:chatbot-image="props.chatbotImage"
-					:loading="isLoading && !message.message" />
+					:loading="isLoading && !message.message"
+					:imagePreviewUrl="message.imagePreviewUrl"
+					:apiEndpoint="props.apiEndpoint"
+					:sessionID="message.sessionID"/>
 			</div>
 		</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="secondary"
+				class="q-chatbot__upload"
+				:disabled="isChatDisabled || isLoading || hasSelectedImage"
+				@click="triggerImageUpload">
+				<q-icon icon="upload" />
+			  </q-button>
+
+			  <!-- Hidden file input -->
+			  <input
+				id="image-upload"
+				type="file"
+				ref="imageInput"
+				@change="handleImageUpload"
+				:accept="acceptedImageTypes"
+				class="hidden-input" style="display: none;" />
+			  
 			  <q-button
 				:title="props.texts.sendMessage"
 				b-style="primary"
 				class="q-chatbot__send"
-				:disabled="isDisabled"
-				:readonly="isDisabled"
+				:disabled="isSendButtonDisabled"
+				:readonly="isSendButtonDisabled"
 				:loading="isLoading"
 				@click="sendMessage">
 				<q-icon icon="send" />
@@ -62,19 +107,19 @@
 		  </div>
 		</div>
 	  </div>
-	</div>
   </template>
   
 
 <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'
 
 	import { QButton, QTextArea, QIcon, QLabel } from '@quidgest/ui/components'
 	import type { ChatBotMessage, ChatBotMessageContent, ChatBotMessageSender } from '@/types/message.type'
+	import { v4 as uuidv4 } from 'uuid'
 		
 	import ChatBotIcon from '@/assets/chatbot.png'
 	import UserIcon from '@/assets/user_avatar.png'
@@ -90,6 +135,17 @@
 	const messagesContainer = ref<HTMLElement | null>(null)
 	// Flag to control auto-scrolling
 	const autoScrollEnabled = ref(true)
+	
+    const imageInput = ref<HTMLInputElement | null>(null)
+    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(() => {
+        return userPrompt.value.trim().length === 0 || isLoading.value || isChatDisabled.value
+    })
 
 	const props = withDefaults(defineProps<ChatBotProps>(), {
 		apiEndpoint: 'http://localhost:3000',
@@ -101,6 +157,10 @@
 			sendMessage: 'Send message',
 			clearChat: 'Clear chat',
 			inputLabel: 'What can I help with?',
+			imageUpload: 'Upload Image',
+			imageUploadQButton: 'Upload Image',
+			goodResponse: 'Good response',
+			badResponse: 'Bad response',
 			initialMessage:
 				"Howdy! I am GenioBot 👋, Quidgest's personal AI assistant! How can I help you?",
 			initialAgentMessage: 'Just a temporary message while we are working on the agent mode',
@@ -124,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,
 		}
 	})
 	
@@ -132,61 +193,78 @@
 		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
 				addChatMessage(
 					message.content,
-					message.type === 'ai' ? 'bot' : 'user'
-				)
-			})
-		})
-		.catch((error: Error) => {
-			setDisabledState(true)
-			addChatMessage(props.texts.loginError)
-			console.log('Error loading chat data: ' + error)
+					message.type === 'ai' ? 'bot' : 'user',
+					imgUrl,
+				message.sessionID
+			)
 		})
 	}
 	
 	// Modified addChatMessage to add isStreaming flag for empty bot messages
-	function addChatMessage(message: string, sender: 'bot' | 'user' = 'bot') {
+	function addChatMessage(
+		message: string,
+		sender: 'bot' | 'user' = 'bot',
+		imagePreviewUrl: string | null = null,
+		sessionID?: string,
+		isWelcomeMessage?: boolean
+	) {
 		messages.value.push({
 			id: nextMessageId.value++,
 			message,
 			date: new Date(),
 			sender: sender,
+			imagePreviewUrl: imagePreviewUrl ?? undefined,
+			sessionID: sessionID || uuidv4(),
+			isWelcomeMessage: isWelcomeMessage ?? false
 		})
 		nextTick(() => {
 			if (autoScrollEnabled.value) scrollToBottom()
@@ -203,7 +281,7 @@
 		const message = props.mode === 'chat'
 			? props.texts.initialMessage
 			: props.texts.initialAgentMessage
-		addChatMessage(message)
+		addChatMessage(message, 'bot', null, undefined, true)
 	}
 	
 	function resetChat() {
@@ -217,10 +295,7 @@
 	function scrollToBottom() {
 		nextTick(() => {
 			if (messagesContainer.value) {
-				messagesContainer.value.scrollTo({
-					top: messagesContainer.value.scrollHeight,
-					behavior: 'smooth'
-				})
+				messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
 			}
 		})
 	}
@@ -237,6 +312,29 @@
 		}
 	}
 	
+	function removeImage() {
+		imagePreviewUrl.value = ''
+		if (imageInput.value) {
+			imageInput.value.value = ''
+		}
+		hasSelectedImage.value = false
+	}
+
+	function triggerImageUpload() {
+		imageInput.value?.click()
+	}
+
+	function handleImageUpload(event: Event) {
+		// Store the selected image in imageInput
+		const target = event.target as HTMLInputElement
+		imageInput.value = target
+
+		if (target.files && target.files[0]) {
+			imagePreviewUrl.value = URL.createObjectURL(target.files[0])
+			hasSelectedImage.value = true
+		}
+	}
+
 	function sendMessage() {
 		if (
 			userPrompt.value.trim().length === 0 ||
@@ -245,58 +343,87 @@
 		)
 			return
 	
-		// Add user's message and force scroll to bottom
-		addChatMessage(userPrompt.value, 'user')
-		scrollToBottom()
+
+		if(messagesContainer.value) {
+			messagesContainer.value.scrollTo({
+				top: messagesContainer.value.scrollHeight,
+				behavior: 'smooth'
+			})
+		}
+		addChatMessage(userPrompt.value, 'user', imagePreviewUrl.value)
 	
 		// Send prompt to bot
-		setChatPrompt(userPrompt.value)
+		setChatPrompt(userPrompt.value, imageInput.value?.files?.[0])
+		removeImage()
 		userPrompt.value = '' // Clear user input
 	}
 	
-	function setChatPrompt(prompt: string) {
+	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()
 	
-		const params = {
-			message: prompt,
-			project: props.projectPath,
-			user: props.username
+
+		const currentSessionID: string = msg?.sessionID || ''
+
+		const formData = new FormData()
+		if (image) {
+			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
 		})
@@ -322,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/PulseDots.vue

@@ -1,16 +1,15 @@
 <template>
     <div class="pulsing-dots">
-      <span
-        v-for="(_, index) in dots"
-        :key="index"
-        class="dot"
-        :style="{ animationDelay: (index * 0.2) + 's' }">
-        &bull;
-      </span>
+        <span
+            v-for="(_, index) in dots"
+            :key="index"
+            class="dot"
+            :style="{ animationDelay: index * 0.2 + 's' }">
+            &bull;
+        </span>
     </div>
-  </template>
-  
-  <script setup lang="ts">
+</template>
+
+<script setup lang="ts">
     const dots = [1, 2, 3]
-  </script>
-  
+</script>

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/chatbot.type.ts

@@ -1,7 +1,8 @@
-import { ResourceStrings } from "./texts.type"
+import { ResourceStrings } from './texts.type'
 
 export type ChatBotProps = {
     apiEndpoint?: string
+    controllerEndpoint?: string
     texts?: ResourceStrings
     username: string
     projectPath: string
@@ -11,4 +12,4 @@ export type ChatBotProps = {
     mode?: ChatBotMode
 }
 
-export type ChatBotMode = 'chat' | 'agent'
+export type ChatBotMode = 'chat' | 'agent'

package/src/types/message.type.ts

@@ -3,11 +3,53 @@ export type ChatBotMessage = {
     message: string
     date: Date
     sender: ChatBotMessageSender
+    sessionID: string
+    imagePreviewUrl?: string
+    isWelcomeMessage?: boolean
 }
 
 export type ChatBotMessageContent = {
     content: string
     type: string
+    sessionID: string
+    imageUrl?: string
 }
 
 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
+}