@quidgest/chatbot 0.0.1 → 0.0.2

package/src/components/ChatBot.vue

@@ -1,365 +1,365 @@
-<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 {
-        QButton,
-        QTextField,        
-        QInputGroup,
-        QIcon
-    } from '@quidgest/ui'
-
-    import type { ResourceStrings } from '@/types/texts.type'
-    import type { ChatBotMessage } from '@/types/message.type'    
-    import ChatBotIcon from '@/assets/chatbot.png'
-
-    let messages: Ref<ChatBotMessage[]> = ref([])
-    let msgHistoryStack: string[] = []
-    let nextMessageId: number = 1
-    let userPrompt: Ref<string> = ref('');
-    let isChatDisabled: boolean = false
-    let isLoading: boolean = false
-    
-    // refs
-    const messagesContainer = 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
-    }
-
-    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()
-        nextTick(scrollChatToBottom)
-    })
-
-    const getParsedEndpoint = computed(() => {
-		try {
-            let url = new URL(props.apiEndpoint).href
-
-            if (url.charAt(url.length - 1) == '/') {
-                url = url.slice(0, -1)
-            }
-            return url
-        } catch (ex) {
-            addChatMessage(props.texts.botIsSick)
-
-            isChatDisabled = true
-            throw Error('Could not parse Endpoint URL:\n' + ex)
-        }
-	})
-
-    const sortedMessages = computed(() => {
-        return messages.value.toSorted((a: ChatBotMessage, b: ChatBotMessage) => {
-            const diff = new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
-            return diff !== 0 ? diff : a.sender === 'user' ? -1 : 1
-        })
-    })
-
-    const userMessages = computed(() => {
-        return messages.value.filter((m: ChatBotMessage) => m.sender === 'user')
-    })
-    
-    function initChat() {
-        Axios.post(getParsedEndpoint.value + '/auth/login', {
-            username: props.username,
-            password: 'test'
-        })
-        .then((response: AxiosResponse) => {
-            if (response.status != 200 || !response.data.success) {
-                isChatDisabled = true
-                addChatMessage(props.texts.loginError)
-                return console.log(
-                    `Unsuccessful login, endpoint gave status ${response.status}`
-                )
-            }
-
-            sendInitialMessage()
-        })
-        .catch((error: Error) => {
-            if (error) {
-                isChatDisabled = 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++,
-            text: message,
-            timestamp: new Date(),
-            sender: sender
-        })
-    }
-
-    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 = false
-        isChatDisabled = false
-
-        sendInitialMessage()
-    }
-
-    function scrollChatToBottom() {
-        if(messagesContainer.value == null) return;
-        
-        const element = messagesContainer.value
-        setTimeout(
-            () =>
-                (element.scrollIntoView(false)),
-            100
-        )
-    }
-
-    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.text
-
-            //Set the cursor to the end of text
-            nextTick(() =>
-                setCursorPosition(
-                    promptInput.value as HTMLInputElement,
-                    lastMsgObj.text.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 ||
-            isChatDisabled
-        )
-            return
-
-        addChatMessage(userPrompt.value, 'user')
-
-        scrollChatToBottom()
-        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: 'GenIO',
-            user: props.username
-        }
-
-        isLoading = true
-        Axios({
-            url: getParsedEndpoint.value + '/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.text = chunk
-            }
-        })
-        .then(({ data }) => {
-            if (msg) msg.text = data
-        })
-        .catch((error) => {
-            addChatMessage(props.texts.botIsSick)
-
-            isChatDisabled = true
-            console.log(error)
-        })
-        .finally(() => {
-            isLoading = false
-        })
-    }
-
-    function getSenderName(sender: 'bot' | 'user') {
-        return sender === 'bot' ? 'GenioBot' : 'You'
-    }
-
-    function getConvertedTime(date: Date) {
-        return date.toLocaleString()
-    }
-
-    function setCursorPosition(elem: HTMLInputElement, pos: number) {
-        elem.focus()
-        elem.setSelectionRange(pos, pos)
-    }
-
-    watch(() => props.apiEndpoint, () => {
-        resetChat()
-    })
-
-    defineOptions({ name: 'ChatBot' })
-</script>
-
-<template>
-    <div class="q-chatbot">
-        <div class="c-sidebar__subtitle">
-            <span>{{ props.texts.chatbotTitle }}</span>
-        </div>
-
-        <div
-            class="q-chatbot__content"
-            ref="messagesContainer">
-            <div
-                v-for="message in sortedMessages"
-                :key="message.id"
-                :class="[
-                    'q-chatbot__message-wrapper',
-                    {
-                        'q-chatbot__message-wrapper_right':
-                            message.sender == 'user'
-                    }
-                ]">
-                <img
-                    v-if="message.sender == 'bot'"
-                    :src="ChatBotIcon"
-                    alt=""
-                    class="q-chatbot__profile" />
-
-                <div class="q-chatbot__message">
-                    <div
-                        v-if="isLoading && !message.text"
-                        class="q-chatbot__message-loading">
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                    </div>
-
-                    <template v-else>
-                        <div
-                            class="q-chatbot__sender"
-                            v-if="message.text && message.sender == 'bot'">
-                            {{
-                                getSenderName(message.sender) +
-                                ' ' +
-                                getConvertedTime(message.timestamp)
-                            }}
-                        </div>
-                        <div
-                            class="q-chatbot__timestamp"
-                            v-if="message.text && message.sender == 'user'">
-                            {{ getConvertedTime(message.timestamp) }}
-                        </div>
-                        <div
-                            class="q-chatbot__text"
-                            v-if="message.sender == 'bot'"
-                            v-html="message.text"></div>
-                        <div
-                            class="q-chatbot__text"
-                            v-else>
-                            {{ message.text }}
-                        </div>
-                    </template>
-                </div>
-            </div>
-        </div>
-
-        <q-input-group
-            size="block"
-            :disabled="isChatDisabled">
-            <q-text-field
-                ref="promptInput"
-                v-model="userPrompt"
-                class="q-chatbot__input"
-                :placeholder="props.texts.placeholderMessage"
-                :disabled="isChatDisabled"
-                @keyup.enter="sendMessage"
-                @keydown="handleKey" />
-
-            <template #append>
-                <q-button
-                    :title="props.texts.qButtonTitle"
-                    b-style="primary"
-                    class="q-chatbot__send"
-                    :disabled="isChatDisabled"
-                    @click="sendMessage">
-                    <q-icon icon="send" />
-                </q-button>
-            </template>
-        </q-input-group>
-    </div>
-</template>
+<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 {
+        QButton,
+        QTextField,        
+        QInputGroup,
+        QIcon
+    } from '@quidgest/ui'
+
+    import type { ResourceStrings } from '@/types/texts.type'
+    import type { ChatBotMessage } from '@/types/message.type'    
+    import ChatBotIcon from '@/assets/chatbot.png'
+
+    let messages: Ref<ChatBotMessage[]> = ref([])
+    let msgHistoryStack: string[] = []
+    let nextMessageId: number = 1
+    let userPrompt: Ref<string> = ref('');
+    let isChatDisabled: boolean = false
+    let isLoading: boolean = false
+    
+    // refs
+    const messagesContainer = 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
+    }
+
+    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()
+        nextTick(scrollChatToBottom)
+    })
+
+    const getParsedEndpoint = computed(() => {
+		try {
+            let url = new URL(props.apiEndpoint).href
+
+            if (url.charAt(url.length - 1) == '/') {
+                url = url.slice(0, -1)
+            }
+            return url
+        } catch (ex) {
+            addChatMessage(props.texts.botIsSick)
+
+            isChatDisabled = true
+            throw Error('Could not parse Endpoint URL:\n' + ex)
+        }
+	})
+
+    const sortedMessages = computed(() => {
+        return messages.value.toSorted((a: ChatBotMessage, b: ChatBotMessage) => {
+            const diff = new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+            return diff !== 0 ? diff : a.sender === 'user' ? -1 : 1
+        })
+    })
+
+    const userMessages = computed(() => {
+        return messages.value.filter((m: ChatBotMessage) => m.sender === 'user')
+    })
+    
+    function initChat() {
+        Axios.post(getParsedEndpoint.value + '/auth/login', {
+            username: props.username,
+            password: 'test'
+        })
+        .then((response: AxiosResponse) => {
+            if (response.status != 200 || !response.data.success) {
+                isChatDisabled = true
+                addChatMessage(props.texts.loginError)
+                return console.log(
+                    `Unsuccessful login, endpoint gave status ${response.status}`
+                )
+            }
+
+            sendInitialMessage()
+        })
+        .catch((error: Error) => {
+            if (error) {
+                isChatDisabled = 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++,
+            text: message,
+            timestamp: new Date(),
+            sender: sender
+        })
+    }
+
+    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 = false
+        isChatDisabled = false
+
+        sendInitialMessage()
+    }
+
+    function scrollChatToBottom() {
+        if(messagesContainer.value == null) return;
+        
+        const element = messagesContainer.value
+        setTimeout(
+            () =>
+                (element.scrollIntoView(false)),
+            100
+        )
+    }
+
+    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.text
+
+            //Set the cursor to the end of text
+            nextTick(() =>
+                setCursorPosition(
+                    promptInput.value as HTMLInputElement,
+                    lastMsgObj.text.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 ||
+            isChatDisabled
+        )
+            return
+
+        addChatMessage(userPrompt.value, 'user')
+
+        scrollChatToBottom()
+        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: 'GenIO',
+            user: props.username
+        }
+
+        isLoading = true
+        Axios({
+            url: getParsedEndpoint.value + '/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.text = chunk
+            }
+        })
+        .then(({ data }) => {
+            if (msg) msg.text = data
+        })
+        .catch((error) => {
+            addChatMessage(props.texts.botIsSick)
+
+            isChatDisabled = true
+            console.log(error)
+        })
+        .finally(() => {
+            isLoading = false
+        })
+    }
+
+    function getSenderName(sender: 'bot' | 'user') {
+        return sender === 'bot' ? 'GenioBot' : 'You'
+    }
+
+    function getConvertedTime(date: Date) {
+        return date.toLocaleString()
+    }
+
+    function setCursorPosition(elem: HTMLInputElement, pos: number) {
+        elem.focus()
+        elem.setSelectionRange(pos, pos)
+    }
+
+    watch(() => props.apiEndpoint, () => {
+        resetChat()
+    })
+
+    defineOptions({ name: 'ChatBot' })
+</script>
+
+<template>
+    <div class="q-chatbot">
+        <div class="c-sidebar__subtitle">
+            <span>{{ props.texts.chatbotTitle }}</span>
+        </div>
+
+        <div
+            class="q-chatbot__content"
+            ref="messagesContainer">
+            <div
+                v-for="message in sortedMessages"
+                :key="message.id"
+                :class="[
+                    'q-chatbot__message-wrapper',
+                    {
+                        'q-chatbot__message-wrapper_right':
+                            message.sender == 'user'
+                    }
+                ]">
+                <img
+                    v-if="message.sender == 'bot'"
+                    :src="ChatBotIcon"
+                    alt=""
+                    class="q-chatbot__profile" />
+
+                <div class="q-chatbot__message">
+                    <div
+                        v-if="isLoading && !message.text"
+                        class="q-chatbot__message-loading">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
+
+                    <template v-else>
+                        <div
+                            class="q-chatbot__sender"
+                            v-if="message.text && message.sender == 'bot'">
+                            {{
+                                getSenderName(message.sender) +
+                                ' ' +
+                                getConvertedTime(message.timestamp)
+                            }}
+                        </div>
+                        <div
+                            class="q-chatbot__timestamp"
+                            v-if="message.text && message.sender == 'user'">
+                            {{ getConvertedTime(message.timestamp) }}
+                        </div>
+                        <div
+                            class="q-chatbot__text"
+                            v-if="message.sender == 'bot'"
+                            v-html="message.text"></div>
+                        <div
+                            class="q-chatbot__text"
+                            v-else>
+                            {{ message.text }}
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+
+        <q-input-group
+            size="block"
+            :disabled="isChatDisabled">
+            <q-text-field
+                ref="promptInput"
+                v-model="userPrompt"
+                class="q-chatbot__input"
+                :placeholder="props.texts.placeholderMessage"
+                :disabled="isChatDisabled"
+                @keyup.enter="sendMessage"
+                @keydown="handleKey" />
+
+            <template #append>
+                <q-button
+                    :title="props.texts.qButtonTitle"
+                    b-style="primary"
+                    class="q-chatbot__send"
+                    :disabled="isChatDisabled"
+                    @click="sendMessage">
+                    <q-icon icon="send" />
+                </q-button>
+            </template>
+        </q-input-group>
+    </div>
+</template>