@quidgest/chatbot 0.0.8 → 0.1.0

package/src/components/ChatBot.vue

@@ -1,338 +1,443 @@
-<script setup lang="ts">
-    import {
-        onMounted,
-        useTemplateRef,
-        nextTick,
-        ref,
-        watch,
-        defineOptions
-    } from 'vue'
-    import type { Ref } from 'vue'
-    import Axios from 'axios'
-    import type { AxiosResponse } from 'axios'
-    import { CBMessage } from '@/components'
-
-    import {
-        QButton,
-        QTextArea,
-        QIcon,
-        QLabel
-    } from '@quidgest/ui/components'
-
-    import type { ResourceStrings } from '@/types/texts.type'
-    import type {
-        ChatBotMessage,
-        ChatBotMessageContent
-    } from '@/types/message.type'
-
-    let messages: Ref<ChatBotMessage[]> = ref([])
-    let nextMessageId: number = 1
-    let userPrompt: Ref<string> = ref('')
-    let isLoading: Ref<boolean> = ref(false)
-    let isChatDisabled: boolean = false
-
-    // refs
-    const scrollElement = useTemplateRef('scrollElement')
-
-    export type ChatBotProps = {
-        /**
-         * API Enpoint URL
-         */
-        apiEndpoint?: string
-
-        /**
-         * Static resource texts used by ChatBot
-         */
-        texts?: ResourceStrings
-
-        /**
-         * Genio username
-         */
-        username: string
-
-        /**
-         * Project aplication path
-         */
-        projectPath: string
-
-        /**
-         * Project locale
-         */
-        dateFormat?: string
-    }
-
-    const props = withDefaults(defineProps<ChatBotProps>(), {
-        apiEndpoint: 'http://localhost:3000',
-        texts: () => ({
-            chatbotTitle: 'ChatBot',
-            qButtonTitle: 'Send message',
-            inputLabel: 'What can I help with?',
-            initialMessage:
-                "Howdy! I am GenioBot 👋, Quidgest's personal AI assistant! How can I help you?",
-            loginError:
-                'Uh oh, I could not authenticate with the Quidgest API endpoint 😓',
-            botIsSick:
-                '*cough cough* GenioBot is not feeling alright 🥴️🤒, looks like something failed!'
-        })
-    })
+<template>
+	<div class="q-chatbot">
+	  <div class="q-chatbot__content">
+		<!-- Chat tools -->
+		<div class="q-chatbot__tools">
+		  <q-button
+			:title="props.texts.clearChat"
+			b-style="secondary"
+			:disabled="isChatDisabled"
+			borderless
+			@click="clearChat">
+			<QIcon icon="bin" />
+		  </q-button>
+		</div>
+  
+		<!-- Attach ref to messages container -->
+		<div
+			ref="messagesContainer"
+			class="q-chatbot__messages-container" 
+			@scroll="handleScroll">
+			<div
+				v-for="message in messages"
+				:key="message.id"
+				:class="getMessageClasses(message.sender)">
+				<!-- Pass the streaming flag to CBMessage for animation -->
+				<c-b-message
+					v-bind="message"
+					:date-format="props.dateFormat"
+					:user-image="props.userImage"
+					:chatbot-image="props.chatbotImage"
+					: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"/>
+		  <div 
+			class="q-chatbot__footer"
+			: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>
+			<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="isSendButtonDisabled"
+				:readonly="isDisabled"
+				:loading="isLoading"
+				@click="sendMessage">
+				<q-icon icon="send" />
+			  </q-button>
+			</div>
+		  </div>
+		</div>
+	  </div>
+  </template>
+  
 
-    onMounted(() => {
-        initChat()
+<script setup lang="ts">
+	import { onMounted, nextTick, ref, watch, computed } from 'vue'
+	import type { Ref } from 'vue'
+	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'
+	import { ChatBotProps } from '@/types/chatbot.type'
+
+	const messages: Ref<ChatBotMessage[]> = ref([])
+	const nextMessageId = ref(1)
+	const userPrompt = ref('')
+	const isLoading = ref(false)
+	const isChatDisabled = ref(false)
+	
+	// Ref for the messages container
+	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
     })
 
-    function setDisabledState(state: boolean) {
-        isChatDisabled = state
-    }
-
-    function initChat() {
-        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)
-                    return console.log(
-                        `Unsuccessful login, endpoint gave status ${response.status}`
-                    )
-                }
-
-                loadChatData()
-            })
-            .catch((error: Error) => {
-                setDisabledState(true)
-                addChatMessage(props.texts.loginError)
-                console.log(
-                    'The following error ocurred while trying to login: \n' +
-                        error
-                )
-            })
-    }
-
-    function loadChatData() {
-        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)
-                    return console.log(
-                        `Unsuccessful load, endpoint gave status ${response.status}`
-                    )
-                }
-
-                sendInitialMessage()
-                response.data.history.forEach(
-                    (message: ChatBotMessageContent) => {
-                        addChatMessage(
-                            message.content,
-                            message.type === 'ai' ? 'bot' : 'user'
-                        )
-                    }
-                )
-            })
-            .catch((error: Error) => {
-                setDisabledState(true)
-                addChatMessage(props.texts.loginError)
-                console.log(
-                    'The following error ocurred while trying to login: \n' +
-                        error
-                )
-            })
-    }
-
-    function addChatMessage(message: string, sender: 'bot' | 'user' = 'bot') {
-        messages.value.push({
-            id: nextMessageId++,
-            message,
-            date: new Date(),
-            sender: sender
-        })
-
-        nextTick(scrollToBottom)
-    }
-
-    function getLastMessage() {
-        return messages.value.find(
-            (m: ChatBotMessage) => m.id === nextMessageId - 1
-        )
-    }
-
-    function sendInitialMessage() {
-        addChatMessage(props.texts.initialMessage)
-    }
-
-    function resetChat() {
-        messages.value = []
-        userPrompt.value = ''
-        isLoading.value = false
-        setDisabledState(false)
-    }
-
-    function scrollToBottom() {
-        scrollElement.value?.scrollIntoView({ behavior: 'smooth' })
-    }
-
-    function sendMessage() {
-        if (
-            userPrompt.value.trim().length == 0 ||
-            isLoading.value ||
-            isChatDisabled
-        )
-            return
-
-        addChatMessage(userPrompt.value, 'user')
-
-        setChatPrompt(userPrompt.value)
-
-        userPrompt.value = '' //Clear user input
-    }
-
-    function setChatPrompt(prompt: string) {
-        addChatMessage('') //Create empty bot message
-        let msg = getLastMessage()
-
-        //Send message request
-        let params = {
-            message: prompt,
-            project: props.projectPath,
-            user: props.username
-        }
-
-        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
-                scrollToBottom()
-            }
-        })
-            .then(({ data }) => {
-                if (msg) msg.message = data
-            })
-            .catch((error) => {
-                addChatMessage(props.texts.botIsSick)
-
-                setDisabledState(true)
-                console.log(error)
-            })
-            .finally(() => {
-                isLoading.value = false
-            })
-    }
-
-    function clearChat() {
-        Axios.post(props.apiEndpoint + '/prompt/clear', {
-            username: props.username,
-            project: props.projectPath
-        })
-            .then((response: AxiosResponse) => {
-                if (response.status != 200 || !response.data.success) {
-                    setDisabledState(true)
-                    addChatMessage(props.texts.loginError)
-                    return console.log(
-                        `Unsuccessful login, endpoint gave status ${response.status}`
-                    )
-                }
-
-                resetChat()
-                sendInitialMessage()
-            })
-            .catch((error: Error) => {
-                setDisabledState(true)
-                addChatMessage(props.texts.loginError)
-                console.log(
-                    'The following error ocurred while trying to communicate with the endpoint: \n' +
-                        error
-                )
-            })
-    }
-
-    function getMessageClasses(sender: 'user' | 'bot') {
-        const classes: string[] = ['q-chatbot__messages-wrapper']
-
-        if (sender == 'user') classes.push('q-chatbot__messages-wrapper_right')
-
-        return classes
-    }
-
-    watch(
-        () => props.apiEndpoint,
-        () => {
-            resetChat()
-            initChat()
-        }
-    )
-
-    defineOptions({ name: 'ChatBot' })
+	const props = withDefaults(defineProps<ChatBotProps>(), {
+		apiEndpoint: 'http://localhost:3000',
+		userImage: UserIcon,
+		chatbotImage: ChatBotIcon,
+		mode: 'chat',
+		texts: () => ({
+			chatbotTitle: 'ChatBot',
+			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',
+			loginError:
+				'Uh oh, I could not authenticate with the Quidgest API endpoint 😓',
+			botIsSick:
+				'*cough cough* GenioBot is not feeling alright 🥴️🤒, looks like something failed!'
+		})
+	})
+	
+	onMounted(() => {
+		initChat()
+		nextTick(() => {
+			messagesContainer.value?.addEventListener('scroll', handleScroll)
+		})
+	})
+	
+	const isDisabled = computed(() => {
+		return isChatDisabled.value || isLoading.value
+	})
+	
+	const chatBotFooterClasses = computed(() => {
+		return {
+			'q-chatbot__footer-disabled': isDisabled.value
+		}
+	})
+	
+	function setDisabledState(state: boolean) {
+		isChatDisabled.value = state
+	}
+	
+	function initChat() {
+		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) => {
+			setDisabledState(true)
+			addChatMessage(props.texts.loginError)
+			console.log('Error during login: ' + error)
+		})
+	}
+	
+	function loadChatData() {
+		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
+			}
+			sendInitialMessage()
+			response.data.history.forEach((message: ChatBotMessageContent) => {
+				const imgUrl = message.imageUrl ? props.controllerEndpoint + message.imageUrl : undefined
+				addChatMessage(
+					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)
+		})
+	}
+	
+	// Modified addChatMessage to add isStreaming flag for empty bot messages
+	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()
+		})
+	}
+	
+	function getLastMessage() {
+		return messages.value.find(
+			(m: ChatBotMessage) => m.id === nextMessageId.value - 1
+		)
+	}
+	
+	function sendInitialMessage() {
+		const message = props.mode === 'chat'
+			? props.texts.initialMessage
+			: props.texts.initialAgentMessage
+		addChatMessage(message, 'bot', null, undefined, true)
+	}
+	
+	function resetChat() {
+		messages.value = []
+		userPrompt.value = ''
+		isLoading.value = false
+		setDisabledState(false)
+		autoScrollEnabled.value = true
+	}
+	
+	function scrollToBottom() {
+		nextTick(() => {
+			if (messagesContainer.value) {
+				messagesContainer.value.scrollTo({
+					top: messagesContainer.value.scrollHeight,
+					behavior: 'smooth'
+				})
+			}
+		})
+	}
+	
+	function handleScroll() {
+		if (messagesContainer.value) {
+			const threshold = 20 // px threshold from the bottom
+			const { scrollTop, clientHeight, scrollHeight } = messagesContainer.value
+			if (scrollTop + clientHeight >= scrollHeight - threshold) {
+				autoScrollEnabled.value = true
+			} else {
+				autoScrollEnabled.value = false
+			}
+		}
+	}
+	
+	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 ||
+			isLoading.value ||
+			isChatDisabled.value
+		)
+			return
+	
+		// Add user's message and force scroll to bottom
+		addChatMessage(userPrompt.value, 'user', imagePreviewUrl.value)
+		scrollToBottom()
+	
+		// Send prompt to bot
+		setChatPrompt(userPrompt.value, imageInput.value?.files?.[0])
+		removeImage()
+		userPrompt.value = '' // Clear user input
+	}
+	
+	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 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
+		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
+		})
+		.catch((error) => {
+			addChatMessage(props.texts.botIsSick)
+			setDisabledState(true)
+			console.log(error)
+		})
+		.finally(() => {
+			isLoading.value = false
+		})
+}
+	
+	function clearChat() {
+		Axios.post(props.apiEndpoint + '/prompt/clear', {
+			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) => {
+				setDisabledState(true)
+				addChatMessage(props.texts.loginError)
+				console.log('Error clearing chat: ' + error)
+			})
+	}
+	
+	function getMessageClasses(sender: ChatBotMessageSender) {
+		const classes: string[] = ['q-chatbot__messages-wrapper']
+		if (sender === 'user') classes.push('q-chatbot__messages-wrapper_right')
+		return classes
+	}
+	
+	watch(
+		() => props.apiEndpoint,
+		() => {
+			resetChat()
+			initChat()
+		}
+	)
+	
+	defineOptions({ name: 'ChatBot' })
 </script>
-
-<template>
-    <div class="q-chatbot">
-        <div class="q-chatbot__content">
-            <!-- Chat tools -->
-            <div class="q-chatbot__tools">
-                <QButton
-                    :title="props.texts.qButtonTitle"
-                    b-style="secondary"
-                    :disabled="isChatDisabled"
-                    borderless
-                    @click="clearChat">
-                    <QIcon icon="bin" />
-                </QButton>
-            </div>
-
-            <div class="q-chatbot__messages-container">
-                <div
-                    v-for="message in messages"
-                    :key="message.id"
-                    :class="getMessageClasses(message.sender)">
-                    <CBMessage
-                        v-bind="message"
-                        :date-format="props.dateFormat"
-                        :loading="isLoading && !message.message" />
-                </div>
-            </div>
-
-            <div ref="scrollElement"></div>
-            
-            <div class="q-chatbot__footer-container">
-                <label> {{ props.texts.inputLabel }} </label>
-                <div class="q-chatbot__footer">
-                    <div class="q-chatbot__input">
-                        <QTextArea
-                            v-model="userPrompt"
-                            size="block"
-                            autosize
-                            resize="none"
-                            :rows="2"
-                            :disabled="isChatDisabled"
-                            @keyup.enter="sendMessage" />
-                    </div>
-                    <div class="q-chatbot__send-container">
-                        <QButton
-                            :title="props.texts.qButtonTitle"
-                            b-style="primary"
-                            class="q-chatbot__send"
-                            :disabled="isChatDisabled || isLoading"
-                            :loading="isLoading"
-                            @click="sendMessage">
-                            <QIcon icon="send" />
-                        </QButton>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-    </div>
-</template>