@quidgest/chatbot 0.0.7 → 0.0.9

package/src/components/ChatBot.vue

@@ -1,387 +1,335 @@
-<script setup lang="ts">
-    import {
-        onMounted,
-        nextTick,
-        computed,
-        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,
-        QTextField,
-        QInputGroup,
-        QIcon
-    } 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 msgHistoryStack: string[] = []
-    let nextMessageId: number = 1
-    let userPrompt: Ref<string> = ref('')
-    let isLoading: Ref<boolean> = ref(false)
-    let isChatDisabled: boolean = false
-
-    // refs
-    const scrollElement = ref<HTMLElement | null>(null)
-    const promptInput = ref<HTMLInputElement | null>(null)
-
-    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',
-            placeholderMessage: 'Type your message here...',
-            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!'
-        })
-    })
-
-    onMounted(() => {
-        initChat()
-    })
-
-    const userMessages = computed(() => {
-        return messages.value.filter((m: ChatBotMessage) => m.sender === 'user')
-    })
-
-    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 = []
-        msgHistoryStack = []
-        userPrompt.value = ''
-        isLoading.value = false
-        setDisabledState(false)
-    }
-
-    function scrollToBottom() {
-        scrollElement.value?.scrollIntoView({ behavior: 'smooth' })
-    }
-
-    function handleKey(event: KeyboardEvent) {
-        if (promptInput.value == null) return
-
-        if (event.key == 'ArrowUp') {
-            //No user messages, no need to continue
-            if (userMessages.value.length == 0) return
-
-            //Get next message to read
-            let lastMsgObj =
-                userMessages.value[
-                    userMessages.value.length - 1 - msgHistoryStack.length
-                ]
-
-            //No more messages to go through
-            if (!lastMsgObj) return
-
-            //Save current prompt (even if modified) & update input
-            msgHistoryStack.push(userPrompt.value)
-            userPrompt.value = lastMsgObj.message
-
-            //Set the cursor to the end of text
-            nextTick(() =>
-                setCursorPosition(
-                    promptInput.value as HTMLInputElement,
-                    lastMsgObj.message.length
-                )
-            )
-        } else if (event.key == 'ArrowDown') {
-            let previousHistoryText = msgHistoryStack.pop()
-
-            if (!previousHistoryText) {
-                //No more prompts in the stack
-                userPrompt.value = ''
-                return
-            }
-
-            userPrompt.value = previousHistoryText
-        }
-    }
-
-    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 setCursorPosition(elem: HTMLInputElement, pos: number) {
-        elem.focus()
-        elem.setSelectionRange(pos, pos)
-    }
-
-    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' })
-</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>
+	<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" />
+			</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">
+			  <q-button
+				:title="props.texts.sendMessage"
+				b-style="primary"
+				class="q-chatbot__send"
+				:disabled="isDisabled"
+				:readonly="isDisabled"
+				:loading="isLoading"
+				@click="sendMessage">
+				<q-icon icon="send" />
+			  </q-button>
+			</div>
+		  </div>
+		</div>
+	  </div>
+	</div>
+  </template>
+  
 
-        <QInputGroup
-            size="block"
-            :disabled="isChatDisabled">
-            <QTextField
-                ref="promptInput"
-                v-model="userPrompt"
-                class="q-chatbot__input"
-                :placeholder="props.texts.placeholderMessage"
-                :disabled="isChatDisabled"
-                @keyup.enter="sendMessage"
-                @keydown="handleKey" />
-
-            <template #append>
-                <QButton
-                    :title="props.texts.qButtonTitle"
-                    b-style="primary"
-                    class="q-chatbot__send"
-                    :disabled="isChatDisabled || isLoading"
-                    :loading="isLoading"
-                    @click="sendMessage">
-                    <QIcon icon="send" />
-                </QButton>
-            </template>
-        </QInputGroup>
-    </div>
-</template>
+<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 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 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?',
+			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) => {
+				addChatMessage(
+					message.content,
+					message.type === 'ai' ? 'bot' : 'user'
+				)
+			})
+		})
+		.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') {
+		messages.value.push({
+			id: nextMessageId.value++,
+			message,
+			date: new Date(),
+			sender: sender,
+		})
+		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)
+	}
+	
+	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 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')
+		scrollToBottom()
+	
+		// Send prompt to bot
+		setChatPrompt(userPrompt.value)
+		userPrompt.value = '' // Clear user input
+	}
+	
+	function setChatPrompt(prompt: string) {
+		// 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
+		}
+	
+		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>