@quidgest/chatbot 0.4.0 → 0.5.0

package/src/components/ChatBot.vue

@@ -1,496 +0,0 @@
-<template>
-	<div class="q-chatbot">
-	  <div class="q-chatbot__content">
-		<!-- Chat tools -->
-		<div class="q-chatbot__tools">
-		  <q-button
-			:title="props.texts.clearChat"
-			: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>
-	</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-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"
-						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"
-				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"
-				variant="bold"
-				class="q-chatbot__send"
-				:disabled="isSendButtonDisabled"
-				:readonly="isSendButtonDisabled"
-				:loading="isLoading"
-				@click="sendMessage">
-				<q-icon icon="send" />
-			  </q-button>
-			</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 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)
-    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',
-		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,
-			'drag-over' : isDragging.value && !hasSelectedImage.value,
-		}
-	})
-	
-	function setDisabledState(state: boolean) {
-		isChatDisabled.value = state
-	}
-	
-	async function initChat() {
-		try {
-			await axios.post(props.apiEndpoint + '/auth/login', {
-				username: props.username,
-				password: 'test'
-			})
-
-			loadChatData()
-		} catch (error) {
-			setDisabledState(true)
-			addChatMessage(props.texts.loginError)
-			console.log('Error logging in: ' + error)
-		}
-	};
-	
-	async function loadChatData() {
-		try {
-			const response = await axios.post(props.apiEndpoint + '/prompt/load', {
-				username: props.username,
-				project: props.projectPath
-			});
-
-			if(!response) return console.error('No response from server');
-	
-			if (response.status !== 200 || !response.data.success) {
-				setDisabledState(true)
-				addChatMessage(props.texts.botIsSick)
-				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) {
-			setDisabledState(true)
-			addChatMessage(props.texts.botIsSick)
-			console.log('Error loading: ' + 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.scrollTop = messagesContainer.value.scrollHeight
-			}
-		})
-	}
-	
-	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
-	
-
-		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, imageInput.value?.files?.[0])
-		removeImage()
-		userPrompt.value = '' // Clear user input
-	}
-	
-	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 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
-		
-		try {
-			const response = await axios.post(props.apiEndpoint + '/prompt/submit', formData, {
-				headers: {
-					'Content-Type': 'text/event-stream',
-					'Accept': 'text/event-stream',
-				},
-				responseType: 'stream',
-				adapter: 'fetch',
-			})
-		
-			if(!response) return console.error('No response from server')
-
-			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
-		} catch (error) {
-			setDisabledState(true)
-			addChatMessage(props.texts.botIsSick)
-			console.log('Error setting chat prompt: ' + error)
-			return
-		}
-	}
-	
-	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
-	}
-
-
-	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,
-		() => {
-			resetChat()
-			initChat()
-		}
-	)
-	
-	defineOptions({ name: 'ChatBot' })
-</script>

package/src/components/PulseDots.vue

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

package/src/components/index.ts

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

package/src/types/chatbot.type.ts

@@ -1,15 +0,0 @@
-import { ResourceStrings } from './texts.type'
-
-export type ChatBotProps = {
-    apiEndpoint?: string
-    controllerEndpoint?: string
-    texts?: ResourceStrings
-    username: string
-    projectPath: string
-    userImage?: string
-    chatbotImage?: string
-    dateFormat?: string
-    mode?: ChatBotMode
-}
-
-export type ChatBotMode = 'chat' | 'agent'

package/src/types/message.type.ts

@@ -1,55 +0,0 @@
-export type ChatBotMessage = {
-    id: number
-    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
-}

package/src/types/texts.type.ts

@@ -1,3 +0,0 @@
-export type ResourceStrings = {
-    [key: string]: string
-}