@quidgest/chatbot 0.0.1

package/dist/types/message.type.d.ts

@@ -0,0 +1,6 @@
+export type ChatBotMessage = {
+    id: number;
+    text: string;
+    timestamp: Date;
+    sender: 'bot' | 'user';
+};

package/dist/types/texts.type.d.ts

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

package/package.json

@@ -0,0 +1,50 @@
+{
+    "name": "@quidgest/chatbot",
+    "private": false,
+    "version": "0.0.1",
+    "type": "module",
+    "license": "UNLICENSED",
+    "main": "dist/index.cjs",
+    "module": "dist/index.mjs",
+    "publishConfig": {
+        "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.cjs"
+        },
+        "./*": "./*",
+        "./style.css": "./dist/style.css"
+    },
+    "typings": "types/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "build": "yarn build-lib",
+        "build-lib": "rimraf ./dist && vue-tsc --noEmit && vite build",
+        "build-types": "vue-tsc --emitDeclarationOnly --declaration -p tsconfig.json",
+        "lint": "eslint 'src/**/*.{ts,vue}'"
+    },
+    "dependencies": {
+        "axios": "^1.6.7",
+        "vue": "^3.3.11",
+        "cross-env": "5.0.5"
+    },
+    "devDependencies": {
+        "@types/node": "^20.11.13",
+        "@vitejs/plugin-vue": "^4.5.2",
+        "rimraf": "^5.0.5",
+        "sass": "^1.70.0",
+        "typescript": "^5.2.2",
+        "vite": "^5.0.8",
+        "vite-plugin-dts": "^3.7.3",
+        "vue-tsc": "^1.8.25"
+    },
+    "peerDependencies": {
+        "@quidgest/ui": "0.9.7"
+    }
+}

package/src/assets/styles/styles.scss

@@ -0,0 +1,116 @@
+@use '@quidgest/ui';
+
+.q-chatbot {
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+
+    & .q-input-group .i-text__field {
+        border-radius: 0;
+        flex: 1;
+    }
+
+    &__input {
+        flex: 1;
+    }
+
+    &__content {
+        background-color: white;
+        border: 1px solid #eaebec;
+        height: 100%;
+        width: 100%;
+        padding: 2rem 1rem;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        gap: 1.5rem;
+    }
+
+    &__message-wrapper {
+        display: flex;
+        max-width: 100%;
+        gap: 0.2rem;
+    }
+
+    &__message-wrapper_right {
+        justify-content: flex-end;
+    }
+
+    &__profile {
+        border-radius: 50%;
+        height: 2rem;
+        width: 2rem;
+    }
+
+    &__message {
+        position: relative;
+        margin: 0rem 0.5rem;
+        max-width: 75%;
+        display: flex;
+        align-items: center;
+        padding: 0.3rem 0.5rem;
+        background-color: #eaebec;
+        white-space: normal;
+    }
+
+    &__message-wrapper_right .q-chatbot__message {
+        background-color: rgba(#018bd2, 20%);
+    }
+
+    &__sender {
+        white-space: nowrap;
+        position: absolute;
+        color: #7c858d;
+        font-size: 0.7rem;
+        left: 0;
+        top: -1rem;
+    }
+
+    &__timestamp {
+        white-space: nowrap;
+        position: absolute;
+        color: #7c858d;
+        font-size: 0.7rem;
+        right: 0;
+        top: -1rem;
+    }
+
+    &__message-loading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.3rem;
+
+        div {
+            background-color: rgba(#018bd2, 20%);
+            border-radius: 50%;
+            width: 0.5rem;
+            height: 0.5rem;
+            animation: dotPulse 1.5s infinite;
+
+            &:nth-child(1) {
+                animation-delay: 0s;
+            }
+
+            &:nth-child(2) {
+                animation-delay: 0.5s;
+            }
+
+            &:nth-child(3) {
+                animation-delay: 1s;
+            }
+        }
+    }
+}
+
+@keyframes dotPulse {
+    0% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.5;
+    }
+}

package/src/components/ChatBot.vue

@@ -0,0 +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>

package/src/index.ts

@@ -0,0 +1,4 @@
+import ChatBot from '@/components/ChatBot.vue'
+import '@/assets/styles/styles.scss'
+
+export default ChatBot

package/src/shims-vue.d.ts

@@ -0,0 +1 @@
+declare module '*.vue'

package/src/types/message.type.ts

@@ -0,0 +1,6 @@
+export type ChatBotMessage = {
+    id: number,
+    text: string,
+    timestamp: Date,
+    sender: 'bot' | 'user'
+}

package/src/types/texts.type.ts

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

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />