@quidgest/chatbot 0.5.0 → 0.5.3-dev.0

package/src/components/ChatBot/ChatBot.vue

@@ -1,375 +1,351 @@
 <template>
-    <div class="q-chatbot">
-        <div class="q-chatbot__content">
-            <chat-tool-bar
-                :disabled="isDisabled"
-                :available-agents="props.availableAgents"
-                :selected-agent-key="currentAgentId"
-                @clear="clearChat"
-                @change-chat="changeChat" />
-
-            <div
-                ref="messagesContainer"
-                class="q-chatbot__messages-container"
-                @scroll="handleScroll">
-                <div
-                    v-for="message in messages"
-                    :key="message.id"
-                    :class="getMessageClasses(message.sender)">
-                    <chat-bot-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"
-                        :fields="message.fields"
-                        @apply-fields="applyFields" />
-                </div>
-            </div>
-        </div>
-
-        <div class="q-chatbot__footer-container">
-            <chat-bot-input
-                :disabled="isDisabled"
-                :loading="isLoading"
-                @send-message="sendMessage" />
-        </div>
-    </div>
+	<div class="q-chatbot">
+		<div class="q-chatbot__content">
+			<chat-tool-bar
+				:disabled="isDisabled"
+				:available-agents="props.availableAgents"
+				:selected-agent-key="currentAgentId"
+				@clear="clearChat"
+				@change-chat="changeChat" />
+
+			<div
+				ref="messagesContainer"
+				class="q-chatbot__messages-container"
+				@scroll="handleScroll">
+				<div
+					v-for="message in messages"
+					:key="message.id"
+					:class="getMessageClasses(message.sender)">
+					<chat-bot-message
+						v-bind="message"
+						:date-format="props.dateFormat"
+						:user-image="props.userImage"
+						:chatbot-image="props.chatbotImage"
+						:loading="isLoading && !message.message"
+						:image-preview-url="message.imagePreviewUrl"
+						:api-endpoint="props.apiEndpoint"
+						:session-i-d="message.sessionID"
+						:fields="message.fields"
+						@regenerate="onFieldRegenerate"
+						@apply-fields="applyFields" />
+				</div>
+			</div>
+		</div>
+
+		<div class="q-chatbot__footer-container">
+			<chat-bot-input
+				:disabled="isDisabled"
+				:loading="isLoading"
+				@send-message="sendMessage" />
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-    // Components
-    import { ChatBotMessage } from '@/components/ChatBotMessage'
-    import { ChatToolBar } from '@/components/ChatToolBar'
-    import { ChatBotInput } from '@/components/ChatBotInput'
-
-    // Utils
-    import {
-        onMounted,
-        nextTick,
-        ref,
-        watch,
-        computed,
-        onBeforeMount
-    } from 'vue'
-    import { v4 as uuidv4 } from 'uuid'
-
-    // Types
-    import type {
-        ChatBotProps,
-        ChatBotMessageContent,
-        ChatBotMessageSender,
-        FieldData,
-        AppliedFieldData
-    } from './types'
-    import type { ChatBotImage } from '../ChatBotInput'
-
-    // Assets
-    import ChatBotIcon from '@/assets/chatbot_profile.svg'
-    import UserIcon from '@/assets/user_avatar.png'
-
-    // Composables
-    import { useTexts } from '@/composables/useTexts'
-    import { useChatApi } from '@/composables/useChatApi'
-    import { useChatMessages } from '@/composables/useChatMessages'
-
-    const emits = defineEmits<{
-        (e: 'apply-fields', fields: AppliedFieldData[]): void
-    }>()
-
-    const props = withDefaults(defineProps<ChatBotProps>(), {
-        apiEndpoint: 'http://localhost:3000',
-        userImage: UserIcon,
-        chatbotImage: ChatBotIcon,
-        userPrompt: '',
-        availableAgents: () => [],
-        agentData: () => {
-            return {
-                id: '',
-                formId: '',
-                jobId: ''
-            }
-        }
-    })
-
-    const isChatDisabled = ref(true)
-    const messagesContainer = ref<HTMLElement | null>(null)
-    const autoScrollEnabled = ref(true)
-
-    const currentAgentId = ref(props.agentData.id)
-    const currentFormId = ref(props.agentData.formId)
-
-    // Composables
-    const texts = useTexts()
-    const {
-        isLoading,
-        clearChatData,
-        getChatData,
-        getFieldSuggestionData,
-        sendPrompt
-    } = useChatApi(props.apiEndpoint)
-    const { messages, addChatMessage, clearMessages, getLastMessage } =
-        useChatMessages()
-
-    const isDisabled = computed(() => {
-        return isChatDisabled.value || isLoading.value
-    })
-
-    onBeforeMount(() => {
-        messagesContainer.value?.removeEventListener('scroll', handleScroll)
-    })
-
-    onMounted(() => {
-        initChat()
-    })
-
-    function setDisabledState(state: boolean) {
-        isChatDisabled.value = state
-    }
-
-    async function initChat() {
-        try {
-            await loadChatData()
-        } catch (error) {
-            addChatMessage(texts.loginError)
-            console.error('Error logging in: ' + error)
-        }
-    }
-
-    async function loadChatData() {
-        setDisabledState(true)
-        const { data, error } = await getChatData(
-            props.username,
-            props.projectPath,
-            currentAgentId.value,
-            currentFormId.value
-        )
-
-        if (error || !data || !data.success) {
-            setDisabledState(true)
-            addChatMessage(texts.botIsSick)
-            console.log('Error loading chat data: ' + error)
-            return
-        }
-
-        setDisabledState(false)
-        sendInitialMessage()
-
-        data.history.forEach(async (message: ChatBotMessageContent) => {
-            const imgUrl = message.imageUrl
-                ? props.controllerEndpoint + message.imageUrl
-                : undefined
-
-            addChatMessage(
-                message.content,
-                message.type === 'ai' ? 'bot' : 'user',
-                imgUrl,
-                message.sessionID
-            )
-        })
-    }
-
-    function sendInitialMessage() {
-        const message = texts.initialMessage
-        addChatMessage(message, 'bot', null, undefined, true)
-    }
-
-    function resetChat() {
-        // Only reset UI state here, message state is handled by composable
-        clearMessages()
-        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
-            autoScrollEnabled.value =
-                scrollTop + clientHeight >= scrollHeight - threshold
-        }
-    }
-
-    async function sendMessage(prompt: string, image?: ChatBotImage) {
-        if (messagesContainer.value) {
-            messagesContainer.value.scrollTo({
-                top: messagesContainer.value.scrollHeight,
-                behavior: 'smooth'
-            })
-        }
-
-        addChatMessage(prompt, 'user', image?.previewUrl)
-        nextTick(() => {
-            if (autoScrollEnabled.value) scrollToBottom()
-        })
-        setChatPrompt(prompt, image?.file)
-    }
-
-    async function getAgentJob(jobId: string) {
-        if (messagesContainer.value) {
-            messagesContainer.value.scrollTo({
-                top: messagesContainer.value.scrollHeight,
-                behavior: 'smooth'
-            })
-        }
-
-        // Add an empty bot message to trigger bouncing dots animation
-        addChatMessage('', 'bot')
-        nextTick(() => {
-            if (autoScrollEnabled.value) scrollToBottom()
-        })
-
-        const msg = getLastMessage()
-        if (!msg) return
-
-        await getFieldSuggestionData(
-            jobId,
-            (chunk: string) => {
-                msg.message += chunk
-                if (!msg.fields) msg.fields = []
-
-                const lastField = msg.fields[msg.fields.length - 1]
-                lastField.text = msg.message
-
-                if (autoScrollEnabled.value) scrollToBottom()
-            },
-            (metadata: Record<string, unknown>) => {
-                msg.message = ''
-                const data = metadata as FieldData
-                msg.fields?.push({
-                    type: data.type,
-                    name: data.name,
-                    text: data.text
-                })
-            }
-        )
-    }
-
-    async function setChatPrompt(prompt: string, image?: File) {
-        // Add an empty bot message marked as streaming to trigger bouncing dots animation
-        addChatMessage('', 'bot')
-        const msg = getLastMessage()
-        if (!msg) return
-
-        const currentSessionID = msg?.sessionID || uuidv4()
-
-        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)
-        formData.append('agentID', currentAgentId.value)
-        formData.append('formId', currentFormId.value)
-
-        await sendPrompt(
-            formData,
-            (chunk) => {
-                if (msg) msg.message += chunk
-
-                if (autoScrollEnabled.value) scrollToBottom()
-            },
-            (error) => {
-                setDisabledState(true)
-                addChatMessage(texts.botIsSick)
-                console.error('Error sending message: ' + error)
-            }
-        )
-    }
-
-    async function clearChat() {
-        const { data, error } = await clearChatData(
-            props.username,
-            props.projectPath,
-            currentAgentId.value,
-            currentFormId.value
-        )
-        if (error || !data || !data.success) {
-            setDisabledState(true)
-            addChatMessage(texts.loginError)
-            console.log('Error clearing chat: ' + error)
-            return
-        }
-
-        resetChat()
-        sendInitialMessage()
-    }
-
-    function getMessageClasses(sender: ChatBotMessageSender) {
-        const classes: string[] = ['q-chatbot__messages-wrapper']
-        if (sender === 'user') classes.push('q-chatbot__messages-wrapper_right')
-        return classes
-    }
-
-    function changeChat(chat: { formId: string; key: string }) {
-        ;(currentAgentId.value = chat.key), (currentFormId.value = chat.formId)
-        resetChat()
-        loadChatData()
-    }
-
-    function applyFields(fields: AppliedFieldData[]) {
-        if (!fields || fields.length === 0) return
-
-        emits('apply-fields', fields)
-    }
-
-    watch(
-        () => props.availableAgents,
-        (newValue, oldValue) => {
-            if (newValue.length === 0 && oldValue.length > 0) {
-                currentAgentId.value = ''
-                currentFormId.value = ''
-                resetChat()
-                initChat()
-            }
-        }
-    )
-
-    watch(
-        () => props.agentData,
-        async (newValue, oldValue) => {
-            if (isDisabled.value) return;
-
-            if (props.agentData?.id !== oldValue?.id) {
-                currentAgentId.value = newValue?.id || ''
-                currentFormId.value = newValue?.formId || ''
-                resetChat()
-                await initChat()
-            }
-
-            if (
-                newValue?.id !== '' &&
-                newValue &&
-                newValue.jobId !== oldValue.jobId
-            )
-                await getAgentJob(newValue.jobId)
-        }
-    )
-
-    watch(
-        () => [props.agentData.id, props.agentData.formId],
-        ([newId, newFormId]) => {
-            currentAgentId.value = newId
-            currentFormId.value = newFormId
-        },
-        { immediate: true }
-    )
-
-    defineOptions({ name: 'ChatBot' })
+	// Components
+	import { ChatBotMessage } from '@/components/ChatBotMessage'
+	import { ChatToolBar } from '@/components/ChatToolBar'
+	import { ChatBotInput } from '@/components/ChatBotInput'
+
+	// Utils
+	import { onMounted, ref, watch, computed, onBeforeMount } from 'vue'
+	import { v4 as uuidv4 } from 'uuid'
+
+	// Types
+	import type {
+		ChatBotProps,
+		ChatBotMessageContent,
+		ChatBotMessageSender,
+		FieldData,
+		AppliedFieldData
+	} from './types'
+	import type { ChatBotImage } from '../ChatBotInput'
+
+	// Assets
+	import ChatBotIcon from '@/assets/chatbot_profile.svg'
+	import UserIcon from '@/assets/user_avatar.png'
+
+	// Composables
+	import { useTexts } from '@/composables/useTexts'
+	import { useChatApi } from '@/composables/useChatApi'
+	import { useChatMessages } from '@/composables/useChatMessages'
+
+	const props = withDefaults(defineProps<ChatBotProps>(), {
+		apiEndpoint: 'http://localhost:3000',
+		userImage: UserIcon,
+		chatbotImage: ChatBotIcon,
+		userPrompt: '',
+		availableAgents: () => [],
+		agentData: () => {
+			return {
+				id: '',
+				formId: '',
+				jobId: ''
+			}
+		}
+	})
+
+	const emit = defineEmits<{
+		(e: 'apply-fields', fields: AppliedFieldData[]): void
+		(e: 'direct-agent-chat', agentId: string, prompt: string): void
+	}>()
+
+	const isChatDisabled = ref(true)
+	const messagesContainer = ref<HTMLElement | null>(null)
+	const autoScrollEnabled = ref(true)
+
+	const currentAgentId = ref(props.agentData.id)
+	const currentFormId = ref(props.agentData.formId)
+
+	// Composables
+	const texts = useTexts()
+	const { isLoading, clearChatData, getChatData, getJobResultData, sendPrompt } = useChatApi(
+		props.apiEndpoint
+	)
+	const { messages, addChatMessage, clearMessages, getLastMessage, deleteMessageById } =
+		useChatMessages()
+
+	const isDisabled = computed(() => {
+		return isChatDisabled.value || isLoading.value
+	})
+
+	onBeforeMount(() => {
+		messagesContainer.value?.removeEventListener('scroll', handleScroll)
+	})
+
+	onMounted(() => {
+		initChat()
+	})
+
+	function setDisabledState(state: boolean) {
+		isChatDisabled.value = state
+	}
+
+	async function initChat() {
+		try {
+			await loadChatData()
+		} catch (error) {
+			addChatMessage(texts.loginError)
+			console.error('Error logging in: ' + error)
+		}
+	}
+
+	async function loadChatData() {
+		setDisabledState(true)
+		const { data, error } = await getChatData(
+			props.username,
+			props.projectPath,
+			currentAgentId.value,
+			currentFormId.value
+		)
+
+		if (error || !data || !data.success) {
+			setDisabledState(true)
+			addChatMessage(texts.botIsSick)
+			console.log('Error loading chat data: ' + error)
+			return
+		}
+
+		setDisabledState(false)
+		sendInitialMessage()
+
+		data.history.forEach(async (message: ChatBotMessageContent) => {
+			const imgUrl = message.imageUrl
+				? props.controllerEndpoint + message.imageUrl
+				: undefined
+
+			addChatMessage(
+				message.content,
+				message.type === 'ai' ? 'bot' : 'user',
+				imgUrl,
+				message.sessionID
+			)
+		})
+	}
+
+	function sendInitialMessage() {
+		const message = texts.initialMessage
+		addChatMessage(message, 'bot', null, undefined, true)
+	}
+
+	function resetChat() {
+		// Only reset UI state here, message state is handled by composable
+		clearMessages()
+		setDisabledState(false)
+		autoScrollEnabled.value = true
+	}
+
+	function handleScroll() {
+		if (messagesContainer.value) {
+			const threshold = 20 // px threshold from the bottom
+			const { scrollTop, clientHeight, scrollHeight } = messagesContainer.value
+			autoScrollEnabled.value = scrollTop + clientHeight >= scrollHeight - threshold
+		}
+	}
+
+	async function sendMessage(prompt: string, image?: ChatBotImage) {
+		if (messagesContainer.value) {
+			messagesContainer.value.scrollTo({
+				top: messagesContainer.value.scrollHeight,
+				behavior: 'smooth'
+			})
+		}
+
+		addChatMessage(prompt, 'user', image?.previewUrl)
+		setChatPrompt(prompt, image?.file)
+	}
+
+	async function getAgentJob(jobId: string) {
+		if (messagesContainer.value) {
+			messagesContainer.value.scrollTo({
+				top: messagesContainer.value.scrollHeight,
+				behavior: 'smooth'
+			})
+		}
+
+		// Add an empty bot message to trigger bouncing dots animation
+		addChatMessage('', 'bot')
+
+		const msg = getLastMessage()
+		if (!msg) return
+
+		await getJobResultData(
+			jobId,
+			(chunk: string) => {
+				msg.message += chunk
+				if (!msg.fields) msg.fields = []
+
+				if (msg.fields.length > 0) {
+					const lastField = msg.fields[msg.fields.length - 1]
+					lastField.text = msg.message
+				}
+			},
+			(metadata: Record<string, unknown>) => {
+				msg.message = ''
+				const data = metadata as FieldData
+				msg.fields?.push({
+					id: data.id,
+					type: data.type,
+					name: data.name,
+					text: data.text
+				})
+			},
+			(error: Error) => {
+				setDisabledState(true)
+				addChatMessage(texts.botIsSick)
+				console.error('Error getting job result: ' + error)
+				deleteMessageById(msg.id)
+			}
+		)
+	}
+
+	async function setChatPrompt(prompt: string, image?: File) {
+		// Add an empty bot message marked as streaming to trigger bouncing dots animation
+		const currentSessionID = uuidv4()
+
+		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)
+
+		if (currentAgentId.value !== '') {
+			emit('direct-agent-chat', currentAgentId.value, prompt)
+		} else {
+			addChatMessage('', 'bot')
+			const msg = getLastMessage()
+			if (!msg) return
+
+			await sendPrompt(
+				formData,
+				(chunk) => {
+					if (msg) msg.message += chunk
+				},
+				(error) => {
+					setDisabledState(true)
+					addChatMessage(texts.botIsSick)
+					console.error('Error sending message: ' + error)
+					deleteMessageById(msg.id)
+				}
+			)
+		}
+	}
+
+	async function clearChat() {
+		const { data, error } = await clearChatData(
+			props.username,
+			props.projectPath,
+			currentAgentId.value,
+			currentFormId.value
+		)
+		if (error || !data || !data.success) {
+			setDisabledState(true)
+			addChatMessage(texts.loginError)
+			console.log('Error clearing chat: ' + error)
+			return
+		}
+
+		resetChat()
+		sendInitialMessage()
+	}
+
+	function getMessageClasses(sender: ChatBotMessageSender) {
+		const classes: string[] = ['q-chatbot__messages-wrapper']
+		if (sender === 'user') classes.push('q-chatbot__messages-wrapper_right')
+		return classes
+	}
+
+	async function changeChat(chat: { formId: string; key: string }) {
+		currentAgentId.value = chat.key
+		currentFormId.value = chat.formId
+
+		resetChat()
+		await initChat()
+	}
+
+	function applyFields(fields: AppliedFieldData[]) {
+		if (!fields || fields.length === 0) return
+
+		emit('apply-fields', fields)
+	}
+
+	function onFieldRegenerate(name: string) {
+		const prompt = texts.regenerateResponsePrompt.replace('{0}', name)
+		emit('direct-agent-chat', currentAgentId.value, prompt)
+	}
+
+	watch(
+		() => props.availableAgents,
+		(newValue, oldValue) => {
+			if (newValue.length === 0 && oldValue.length > 0) {
+				currentAgentId.value = ''
+				currentFormId.value = ''
+				resetChat()
+				initChat()
+			}
+		}
+	)
+
+	watch(
+		() => props.agentData,
+		async (newData, oldData) => {
+			if (isDisabled.value) return
+
+			const newJobId = newData.jobId
+			const oldJobId = oldData.jobId
+
+			const jobChanged = newJobId !== oldJobId
+			const agentChanged = newData.id !== currentAgentId.value
+			if (agentChanged) await changeChat({ formId: newData.formId, key: newData.id })
+
+			if (newJobId && jobChanged) await getAgentJob(newJobId)
+		},
+		{ deep: true }
+	)
+
+	defineOptions({ name: 'ChatBot' })
 </script>