@quidgest/chatbot 0.0.9 → 0.1.0

package/src/components/ChatBot.vue

@@ -28,9 +28,29 @@
 					: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>
+		<!--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"/>
@@ -48,11 +68,32 @@
 				@keyup.enter="sendMessage" />
 			</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"
+				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;" />
+				
+			  <div class="spacer"></div>
+			  
 			  <q-button
 				:title="props.texts.sendMessage"
 				b-style="primary"
 				class="q-chatbot__send"
-				:disabled="isDisabled"
+				:disabled="isSendButtonDisabled"
 				:readonly="isDisabled"
 				:loading="isLoading"
 				@click="sendMessage">
@@ -62,7 +103,6 @@
 		  </div>
 		</div>
 	  </div>
-	</div>
   </template>
   
 
@@ -75,6 +115,7 @@
 
 	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 +131,16 @@
 	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)
+    
+    // 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 +152,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',
@@ -167,9 +222,12 @@
 			}
 			sendInitialMessage()
 			response.data.history.forEach((message: ChatBotMessageContent) => {
+				const imgUrl = message.imageUrl ? props.controllerEndpoint + message.imageUrl : undefined
 				addChatMessage(
 					message.content,
-					message.type === 'ai' ? 'bot' : 'user'
+					message.type === 'ai' ? 'bot' : 'user',
+					imgUrl,
+					message.sessionID
 				)
 			})
 		})
@@ -181,12 +239,21 @@
 	}
 	
 	// 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 +270,7 @@
 		const message = props.mode === 'chat'
 			? props.texts.initialMessage
 			: props.texts.initialAgentMessage
-		addChatMessage(message)
+		addChatMessage(message, 'bot', null, undefined, true)
 	}
 	
 	function resetChat() {
@@ -237,6 +304,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 ||
@@ -246,23 +336,41 @@
 			return
 	
 		// Add user's message and force scroll to bottom
-		addChatMessage(userPrompt.value, 'user')
+		addChatMessage(userPrompt.value, 'user', imagePreviewUrl.value)
 		scrollToBottom()
 	
 		// Send prompt to bot
-		setChatPrompt(userPrompt.value)
+		setChatPrompt(userPrompt.value, imageInput.value?.files?.[0])
+		removeImage()
 		userPrompt.value = '' // Clear user input
 	}
 	
-	function setChatPrompt(prompt: string) {
+	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 || ''
+
+		let params = null
+
+		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
+			}
 		}
 	
 		isLoading.value = true

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/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,16 @@ 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'