@quidgest/chatbot 0.4.0 → 0.5.0

package/src/components/ChatBotInput/ChatBotInput.vue

@@ -0,0 +1,195 @@
+<template>
+    <q-label :label="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="props.disabled"
+                    @keyup.enter="sendMessage" />
+            </div>
+        </div>
+        <div class="q-chatbot__send-container">
+            <q-button
+                :title="texts.imageUpload"
+                class="q-chatbot__upload"
+                :disabled="props.disabled || props.loading || 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" />
+
+            <q-button
+                :title="texts.sendMessage"
+                variant="bold"
+                class="q-chatbot__send"
+                :disabled="isSendButtonDisabled"
+                :readonly="isSendButtonDisabled"
+                @click="sendMessage">
+                <q-icon icon="send" />
+            </q-button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    // Components
+    import { QLabel } from '@quidgest/ui/components'
+
+    // Composables
+    import { useTexts } from '@/composables/useTexts'
+
+    // Utils
+    import { ref, computed } from 'vue'
+
+    // Types
+    import { ChatBotInputProps, ChatBotImage } from './types'
+
+    const texts = useTexts()
+
+    const props = defineProps<ChatBotInputProps>()
+
+    const imageInput = ref<HTMLInputElement | null>(null)
+    const imagePreviewUrl = ref<string>('')
+    const acceptedImageTypes = computed(() => '.png, .jpeg, .jpg, .svg, .webp')
+    const hasSelectedImage = ref<boolean>(false)
+
+    const isDragging = ref(false)
+    const userPrompt = ref(props.userPrompt ?? '')
+
+    const emits = defineEmits<{
+        (e: 'sendMessage', prompt: string, image?: ChatBotImage): void
+    }>()
+
+    const isSendButtonDisabled = computed(() => {
+        return (
+            props.disabled ||
+            props.loading ||
+            userPrompt.value.trim().length === 0
+        )
+    })
+
+    function onDragOver(event: DragEvent) {
+        event.preventDefault()
+        if (!props.disabled) {
+            isDragging.value = true
+        }
+    }
+
+    const chatBotFooterClasses = computed(() => {
+        return {
+            'q-chatbot__footer-disabled': props.disabled,
+            'drag-over': isDragging.value && !hasSelectedImage.value
+        }
+    })
+
+    function onDragLeave(event: DragEvent) {
+        event.preventDefault()
+        isDragging.value = false
+    }
+
+    function onDrop(event: DragEvent) {
+        event.preventDefault()
+        isDragging.value = false
+
+        if (props.disabled || hasSelectedImage.value) return
+
+        const files = event.dataTransfer?.files
+        if (!files) return
+
+        const file = files[0]
+        if (file.type.startsWith('image/')) {
+            if (!imageInput.value) return
+
+            // Create a new FileList-like object
+            const dataTransfer = new DataTransfer()
+            dataTransfer.items.add(file)
+            imageInput.value.files = dataTransfer.files
+
+            imagePreviewUrl.value = URL.createObjectURL(file)
+            hasSelectedImage.value = true
+        }
+    }
+
+    function sendMessage() {
+        if (userPrompt.value.trim() === '' || props.loading || props.disabled)
+            return
+
+        // Check if an image is selected
+        if (
+            imageInput.value &&
+            imageInput.value.files &&
+            imageInput.value.files.length > 0
+        ) {
+            const file = imageInput.value.files[0]
+
+            const fileData: ChatBotImage = {
+                file: file,
+                previewUrl: imagePreviewUrl.value
+            }
+
+            emits('sendMessage', userPrompt.value, fileData)
+            removeImage()
+        } else emits('sendMessage', userPrompt.value)
+
+        userPrompt.value = ''
+    }
+
+    function removeImage() {
+        imagePreviewUrl.value = ''
+
+        if (imageInput.value) {
+            imageInput.value.value = ''
+            imageInput.value.files = null
+        }
+        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
+        }
+    }
+</script>

package/src/components/ChatBotInput/index.ts

@@ -0,0 +1,5 @@
+import ChatBotInput from './ChatBotInput.vue'
+import type { ChatBotInputProps, ChatBotImage } from './types'
+
+export { ChatBotInput }
+export type { ChatBotInputProps, ChatBotImage }

package/src/components/ChatBotInput/types.ts

@@ -0,0 +1,33 @@
+export type ChatBotInputProps = {
+    /**
+     * If the footer is disabled or not
+     */
+    disabled?: boolean
+
+    /**
+     * If the footer is loading or not
+     */
+    loading?: boolean
+
+    /**
+     * The message to be sent
+     */
+    userPrompt?: string
+
+    /**
+     * The agent to be used
+     */
+    agentId?: string
+}
+
+export type ChatBotImage = {
+    /**
+     * The image URL
+     */
+    previewUrl: string
+
+    /**
+     * The file object
+     */
+    file: File
+}

package/src/components/ChatBotMessage/ChatBotMessage.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="q-chatbot__message-container">
+        <q-icon
+            type="img"
+            :icon="messageImage"
+            :alt="texts.senderImage"
+            class="q-chatbot__profile" />
+
+        <div class="q-chatbot__message-wrapper">
+            <div
+                v-if="props.imagePreviewUrl && props.imagePreviewUrl.length > 0"
+                class="q-chatbot__image-preview">
+                <img
+                    :src="props.imagePreviewUrl"
+                    :alt="texts.imagePreview" />
+            </div>
+            <div class="q-chatbot__message">
+                <pulse-dots v-if="loading" />
+                <template
+                    v-else-if="
+                        props.sender === 'bot' && props.fields.length > 0
+                    ">
+                    <field-preview
+                        v-for="(field, index) in props.fields"
+                        class="q-chatbot__text"
+                        :key="index"
+                        :text="field.text || ''"
+                        :name="field.name"
+                        :type="field.type"
+                        :disabled="loading"
+                        @apply="(text) => applyField(text, field)" />
+                </template>
+                <template v-else>
+                    <markdown-render
+                        v-if="props.sender === 'bot'"
+                        class="q-chatbot__text"
+                        :source="props.message || ''" />
+                    <div
+                        v-else
+                        class="q-chatbot__text">
+                        {{ props.message }}
+                    </div>
+                </template>
+            </div>
+        </div>
+
+        <chat-bot-message-buttons
+            :showButtons="isBotMessageAndNotDefault"
+            :loading="props.loading"
+            :date-format="props.dateFormat"
+            @copy-response="copyResponse"
+            @submit-feedback="onSubmitFeedback"
+            @apply-all="applyAllFields" />
+    </div>
+</template>
+
+<script setup lang="ts">
+    // Utils
+    import { computed } from 'vue'
+    import { QIcon } from '@quidgest/ui/components'
+
+    // Types
+    import type { ChatBotMessageProps } from './'
+    import { AppliedFieldData, FieldData } from '../ChatBot/types'
+
+    // Composables
+    import { useTexts } from '@/composables/useTexts'
+    import { useChatApi } from '@/composables/useChatApi'
+
+    // Components
+    import { MarkdownRender } from '../MarkdownRender'
+    import { FieldPreview } from '../FieldPreview'
+    import { ChatBotMessageButtons } from './'
+    import PulseDots from '@/components/PulseDots/PulseDots.vue'
+    import { parseFieldValue } from '@/utils/helper'
+
+    const emits = defineEmits<{
+        (e: 'apply-fields', fields: AppliedFieldData[]): void
+    }>()
+
+    const texts = useTexts()
+
+    const props = withDefaults(defineProps<ChatBotMessageProps>(), {
+        sender: 'user',
+        userImage: undefined,
+        date: () => new Date(),
+        fields: () => []
+    })
+
+    const { handleFeedback } = useChatApi(props.apiEndpoint)
+
+    const isBotMessageAndNotDefault = computed(() => {
+        return (
+            props.sender === 'bot' &&
+            !Object.values(texts || {}).includes(props.message || '') &&
+            !props.isWelcomeMessage
+        )
+    })
+
+    const messageImage = computed(() =>
+        props.sender === 'bot' ? props.chatbotImage : props.userImage
+    )
+
+    function copyResponse() {
+        if (!props.message) return
+
+        navigator.clipboard
+            .writeText(props.message)
+            .then(() => {
+                console.log('Response copied to clipboard')
+            })
+            .catch((err) => {
+                console.error('Failed to copy response: ', err)
+            })
+    }
+
+    function applyField(text: unknown, field: FieldData) {
+        emits('apply-fields', [{ name: field.name, text }])
+    }
+
+    function applyAllFields() {
+        if (!props.fields || props.fields.length === 0) return
+
+        const fieldsToApply = props.fields.map((field) => {
+            return {
+                name: field.name,
+                text: parseFieldValue(field.type, field.text)
+            }
+        })
+
+        emits('apply-fields', fieldsToApply)
+    }
+
+    function onSubmitFeedback(feedback: number, comment: string) {
+        if (feedback === null || comment === null || !props.sessionID) return
+
+        handleFeedback(feedback, comment, props.sessionID)
+    }
+</script>

package/src/components/ChatBotMessage/ChatBotMessageButtons.vue

@@ -0,0 +1,169 @@
+<template>
+    <q-dialog
+        v-model="showDialog"
+        :buttons="commentButtons">
+        <template #body>
+            <div class="q-chatbot__dialog-title">
+                {{ texts.commentDialogTitle }}
+            </div>
+            <q-text-field
+                v-model="feedbackComment"
+                :maxLength="150"
+                size="large"
+                :placeholder="texts.commentPlaceholder" />
+        </template>
+    </q-dialog>
+
+    <div
+        v-if="showButtons"
+        class="q-chatbot__feedback-buttons">
+        <q-button-group>
+            <q-button
+                :title="texts.goodResponse"
+                borderless
+                :disabled="props.loading"
+                @click="openFeedbackDialog(1)">
+                <q-icon icon="thumb-up" />
+            </q-button>
+            <q-button
+                :title="texts.badResponse"
+                borderless
+                :disabled="props.loading"
+                @click="openFeedbackDialog(0)">
+                <q-icon icon="thumb-down" />
+            </q-button>
+            <q-button
+                :title="texts.copyResponse"
+                borderless
+                :disabled="props.loading"
+                @click="copyResponse">
+                <q-icon icon="copy-content" />
+            </q-button>
+            <q-button
+                v-if="showApplyAll"
+                :title="texts.applyAll"
+                borderless
+                :disabled="blockApplyAllButton"
+                :readonly="blockApplyAllButton"
+                @click="onApplyAll">
+                <q-icon icon="apply-all" />
+            </q-button>
+        </q-button-group>
+    </div>
+    <div class="q-chatbot__sender">
+        {{ messageDate }}
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { computed, ref } from 'vue'
+    import { QDialog } from '@quidgest/ui/components'
+    import type { ChatBotMessageButtonsProps } from './'
+
+    // Composables
+    import { useTexts } from '@/composables/useTexts'
+    import { useChatMessages } from '@/composables/useChatMessages'
+
+    const texts = useTexts()
+    const { getLastMessage } = useChatMessages()
+
+    const props = defineProps<ChatBotMessageButtonsProps>()
+    const showDialog = ref(false)
+    const feedbackComment = ref('')
+    const currentFeedback = ref<number | null>(null)
+    const blockApplyAll = ref(false)
+    const blockApplyAllButton = computed(() => {
+        return props.loading || blockApplyAll.value
+    })
+
+    const date = props.date || new Date()
+
+    const emits = defineEmits<{
+        (e: 'submit-feedback', feedback: number, comment: string): void
+        (e: 'copy-response'): void
+        (e: 'apply-all'): void
+    }>()
+
+    const lastMessage = getLastMessage()
+
+    const showApplyAll = computed(() => {
+        if (!lastMessage) return false
+
+        return lastMessage.fields && lastMessage.fields.length > 1
+    })
+
+    const commentButtons = [
+        {
+            id: 'confirm-btn',
+            action: submitFeedback,
+            props: {
+                label: texts.submitButton
+            },
+            icon: {
+                icon: 'submit'
+            }
+        },
+        {
+            id: 'cancel-btn',
+            props: {
+                label: texts.cancelButton
+            },
+            icon: {
+                icon: 'cancel'
+            }
+        }
+    ]
+
+    const getLocaleDate = computed(() => {
+        if (!props.dateFormat) return date.toLocaleString()
+
+        return formatDate(date, 'HH:mm')
+    })
+
+    const messageDate = computed(() => {
+        return `${getLocaleDate.value}`
+    })
+
+    function formatDate(date: Date, format: string) {
+        const day = date.getDate().toString().padStart(2, '0')
+        const month = (date.getMonth() + 1).toString().padStart(2, '0')
+        const year = date.getFullYear().toString().padStart(2, '0')
+        const hours = date.getHours().toString().padStart(2, '0')
+        const minutes = date.getMinutes().toString().padStart(2, '0')
+        const seconds = date.getSeconds().toString().padStart(2, '0')
+
+        return format
+            .replace('dd', day)
+            .replace('MM', month)
+            .replace('yyyy', year)
+            .replace('HH', hours)
+            .replace('mm', minutes)
+            .replace('ss', seconds)
+    }
+
+    function openFeedbackDialog(feedback: number) {
+        showDialog.value = true
+        feedbackComment.value = ''
+        currentFeedback.value = feedback
+    }
+
+    function onApplyAll() {
+        if (blockApplyAll.value) return
+        blockApplyAll.value = true
+
+        emits('apply-all')
+    }
+
+    function submitFeedback() {
+        if (currentFeedback.value === null) return
+
+        emits('submit-feedback', currentFeedback.value, feedbackComment.value)
+        showDialog.value = false
+        feedbackComment.value = ''
+        currentFeedback.value = null
+    }
+
+    function copyResponse() {
+        emits('copy-response')
+    }
+</script>

package/src/components/ChatBotMessage/index.ts

@@ -0,0 +1,8 @@
+import ChatBotMessage from './ChatBotMessage.vue'
+import type { ChatBotMessageProps } from './types'
+
+import ChatBotMessageButtons from './ChatBotMessageButtons.vue'
+import type { ChatBotMessageButtonsProps } from './types'
+
+export { ChatBotMessage, ChatBotMessageButtons }
+export type { ChatBotMessageProps, ChatBotMessageButtonsProps }

package/src/components/ChatBotMessage/types.ts

@@ -0,0 +1,70 @@
+import { ChatBotMessageSender, FieldData } from '@/components/ChatBot/types'
+
+export type ChatBotMessageProps = {
+    /*
+     * 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
+
+    /**
+     * Image preview URL
+     */
+    imagePreviewUrl?: string
+
+    /**
+     * Default api endpoint
+     */
+    apiEndpoint: string
+
+    /**
+     * Session ID
+     */
+    sessionID?: string
+
+    /**
+     * User image
+     */
+    userImage: string
+
+    /**
+     * Chatbot image
+     */
+    chatbotImage: string
+
+    /**
+     * Flag to mark welcome messages
+     */
+    isWelcomeMessage?: boolean
+
+    /**
+     * Additional fields for the message
+     */
+    fields?: FieldData[]
+}
+
+export type ChatBotMessageButtonsProps = {
+    loading: boolean
+    showButtons: boolean
+    dateFormat: string
+    date?: Date
+}

package/src/components/ChatToolBar/ChatToolBar.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="q-chatbot__tools">
+        <div class="q-chatbot__tools__select">
+            <q-select
+                v-if="hasAgents"
+                v-model="selectedChat"
+                size="medium"
+                :items="availableChats"
+                @update:model-value="changeChat" />
+        </div>
+
+        <q-button
+            :title="clearChat"
+            :disabled="props.disabled"
+            borderless
+            @click="clear">
+            <q-icon icon="bin" />
+        </q-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { useTexts } from '@/composables/useTexts'
+    import { ChatToolBarProps } from './types'
+    import { computed, ref, watch } from 'vue'
+
+    const { clearChat } = useTexts()
+
+    const defaultChat = {
+        key: '',
+        value: 'Default Chat',
+        formId: ''
+    }
+
+    const props = withDefaults(defineProps<ChatToolBarProps>(), {
+        availableAgents: () => []
+    })
+
+    const emit = defineEmits<{
+        (e: 'clear'): void
+        (e: 'change-chat', value: { key: string; formId: string }): void
+    }>()
+
+    const hasAgents = computed(() => {
+        return props.availableAgents && props.availableAgents.length > 0
+    })
+
+    const selectedChat = ref(props.selectedAgentKey || defaultChat.key)
+    watch(
+        () => props.selectedAgentKey,
+        (newValue) => {
+            selectedChat.value = newValue || defaultChat.key
+        }
+    )
+
+    const availableChats = computed(() => {
+        const chats = props.availableAgents?.map((agent) => ({
+            key: agent.key,
+            value: agent.value,
+            formId: agent.formId
+        }))
+
+        chats?.push(defaultChat)
+        return chats || [defaultChat]
+    })
+
+    function clear() {
+        emit('clear')
+    }
+
+    function changeChat(value: string) {
+        const item = availableChats.value.find((chat) => chat.key === value)
+        if (!item) return
+
+        if (item.key === defaultChat.key) {
+            emit('change-chat', { key: '', formId: '' })
+            return
+        }
+
+        emit('change-chat', item)
+    }
+</script>