@quidgest/chatbot 0.0.9 → 0.2.0

package/dist/style.css

@@ -1 +1 @@
-.q-chatbot{width:100%;padding:1rem;display:flex;flex-direction:column;height:100%}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;gap:.75rem;flex-direction:column;overflow:hidden}.q-chatbot__footer-container{padding:.8rem}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:flex-end}.q-chatbot__send-container .q-chatbot__send{border-radius:1rem}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer-disabled{background-color:rgb(var(--q-theme-neutral-light-rgb)/.25);cursor:not-allowed}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:end;max-width:100%}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:column;gap:.25rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-container{align-items:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-wrapper{display:flex;align-items:flex-end}.q-chatbot__profile.q-icon__img{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{display:flex;align-items:center;padding:.3rem .5rem;background-color:#eaebec;width:fit-content;white-space:normal;min-height:2rem;word-wrap:break-word;word-break:break-word;border-radius:0 .5rem .5rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233;border-radius:.5rem 0 .5rem .5rem}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}.pulsing-dots{display:flex;align-items:center;justify-content:center;gap:.1rem}.dot{font-size:20px;line-height:1;animation:pulse 1s infinite;color:var(--q-theme-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.6}50%{transform:scale(1);opacity:1}}
+.q-chatbot{width:100%;padding:1rem;display:flex;flex-direction:column;height:100%}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__text p{margin:0}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;gap:.75rem;flex-direction:column;overflow:hidden}.q-chatbot__footer-container{padding:.8rem}.q-chatbot__input-wrapper{display:flex;flex-direction:column;position:relative}.q-chatbot__image-preview{display:inline-flex;align-items:center;position:relative;margin-top:.5rem;width:fit-content}.q-chatbot__image-preview img{width:60px;height:60px;object-fit:cover;border-radius:4px;margin-right:.25rem;border:1px solid #eaebec;overflow:hidden}.q-chatbot__image-preview img:hover+.q-chatbot__remove-image,.q-chatbot__image-preview img:focus+.q-chatbot__remove-image{opacity:1;pointer-events:auto}.q-chatbot__image-preview img:focus{outline:solid rgb(var(--q-theme-info-rgb)/50%)}.q-chatbot .q-btn.q-chatbot__remove-image{position:absolute;top:-5px;right:-5px;background-color:#00000080;color:#fff;border-radius:50%;padding:5px;font-size:12px;border:none;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.q-chatbot .q-btn.q-chatbot__remove-image:hover,.q-chatbot .q-btn.q-chatbot__remove-image:focus{opacity:1;pointer-events:auto}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:space-between;width:100%}.q-chatbot__send-container .q-chatbot__send,.q-chatbot__send-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__send-container .spacer{flex-grow:1}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer-disabled{background-color:rgb(var(--q-theme-neutral-light-rgb)/.25);cursor:not-allowed}.q-chatbot__footer.drag-over{border:2px dashed rgb(var(--q-theme-primary-rgb)/.25);background-color:#018bd20d}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__upload-container{display:flex;justify-content:flex-start;padding:.25rem 0}.q-chatbot__upload-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:end;max-width:100%}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:column;gap:.25rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-container{align-items:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-wrapper{display:flex;align-items:flex-end}.q-chatbot__profile.q-icon__img{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{display:flex;align-items:center;padding:.3rem .5rem;background-color:#eaebec;width:fit-content;white-space:normal;min-height:2rem;word-wrap:break-word;word-break:break-word;border-radius:0 .5rem .5rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233;border-radius:.5rem 0 .5rem .5rem}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}.q-chatbot__retry-button{align-items:center;display:flex}.q-chatbot__dialog-title{margin:.5rem 0}#comment-dialog .q-dialog__header,.hidden-input{display:none}.pulsing-dots{display:flex;align-items:center;justify-content:center;gap:.1rem}.dot{font-size:20px;line-height:1;animation:pulse 1s infinite;color:var(--q-theme-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.6}50%{transform:scale(1);opacity:1}}

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

@@ -2,6 +2,7 @@ import { ResourceStrings } from './texts.type';
 
 export type ChatBotProps = {
     apiEndpoint?: string;
+    controllerEndpoint?: string;
     texts?: ResourceStrings;
     username: string;
     projectPath: string;

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

@@ -3,9 +3,32 @@ export type ChatBotMessage = {
     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?: ChatBotMessageSender;
+    message?: string;
+    date?: Date;
+    loading?: boolean;
+    /**
+     * Project locale
+     */
+    dateFormat?: string;
+    /**
+     * User image
+     */
+    userImage: string;
+    /**
+     * Chatbot image
+     */
+    chatbotImage: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@quidgest/chatbot",
     "private": false,
-    "version": "0.0.9",
+    "version": "0.2.0",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",
@@ -32,20 +32,23 @@
         "lint:fix": "eslint . --fix && prettier --write --list-different src"
     },
     "dependencies": {
-        "axios": "^1.6.7"
+        "axios": "^1.7.0",
+        "uuid": "^11.1.0",
+        "vue-markdown-render": "^2.2.1"
     },
     "devDependencies": {
+        "@types/markdown-it": "^14.1.2",
         "@types/node": "^20.11.13",
         "@vitejs/plugin-vue": "^4.5.2",
-        "eslint": "^9.8.0",
+        "eslint": "^9.9.0",
         "eslint-plugin-prettier": "^5.2.1",
         "prettier": "^3.3.3",
-        "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"
+        "rimraf": "^5.0.10",
+        "sass": "^1.77.8",
+        "typescript": "^5.5.4",
+        "vite": "^5.4.2",
+        "vite-plugin-dts": "^3.9.1",
+        "vue-tsc": "^1.8.27"
     },
     "peerDependencies": {
         "@quidgest/ui": "^0.14.19",

package/src/assets/styles/styles.scss

@@ -15,6 +15,12 @@
         flex: 1;
     }
 
+    &__text {
+        p {
+            margin: 0;
+        }
+    }
+
     &__content {
         background-color: white;
         border: 1px solid #eaebec;
@@ -27,53 +33,135 @@
         overflow: hidden;
     }
 
-
     &__footer-container {
         padding: 0.8rem;
     }
 
+    &__input-wrapper {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+    &__image-preview {
+        display: inline-flex;
+        align-items: center;
+        position: relative;
+        margin-top: 0.5rem;
+        width: fit-content;
+
+        img {
+            width: 60px;
+            height: 60px;
+            object-fit: cover;
+            border-radius: 4px;
+            margin-right: 0.25rem;
+            border: 1px solid #eaebec;
+            overflow: hidden;
+
+            &:hover,
+            &:focus {
+      
+                & + .q-chatbot__remove-image {
+                    opacity: 1;
+                    pointer-events: auto;
+                }
+            }
+
+            &:focus {
+                outline: solid rgb(var(--q-theme-info-rgb) / 50%);
+            }
+        }
+    }
+
+    .q-btn.q-chatbot__remove-image {
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+        border-radius: 50%;
+        padding: 5px;
+        font-size: 12px;
+        border: none;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease-in-out;
+
+        &:hover,
+        &:focus {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
     &__send-container {
-        padding-bottom: .25rem;
+        padding-bottom: 0.25rem;
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
+        width: 100%;
 
         & .q-chatbot__send {
             border-radius: 1rem;
         }
+
+        & .q-chatbot__upload {
+            border-radius: 1rem;
+        }
+
+        & .spacer {
+            flex-grow: 1;
+        }
     }
-    
+
     &__footer {
         position: sticky;
-        padding: 0 .5rem;
+        padding: 0 0.5rem;
         border: 1px solid #eaebec;
-        border-radius: .25rem;
+        border-radius: 0.25rem;
         bottom: 0;
         width: 100%;
         display: flex;
         flex-direction: column;
-        gap: .25rem;
+        gap: 0.25rem;
 
         &-disabled {
             background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
             cursor: not-allowed;
         }
-    
+
+        &.drag-over {
+            border: 2px dashed rgb(var(--q-theme-primary-rgb) / 0.25);
+            background-color: rgba(1, 139, 210, 0.05);
+        }
+
         & .q-chatbot__input {
-          min-height: 50px;
-          max-height: 100px;
-          border-bottom: 1px solid #eaebec;
-          overflow-y: auto;
+            min-height: 50px;
+            max-height: 100px;
+            border-bottom: 1px solid #eaebec;
+            overflow-y: auto;
         }
-    
+
         & .q-text-area {
             max-height: 100%;
             overflow-y: auto;
-            
+
             & .q-field__control {
                 border: none;
             }
         }
-      }
+    }
+
+    &__upload-container {
+        display: flex;
+        justify-content: flex-start;
+        padding: 0.25rem 0;
+
+        & .q-chatbot__upload {
+            border-radius: 1rem;
+        }
+    }
+
     &__messages-container {
         display: flex;
         flex-direction: column;
@@ -141,12 +229,12 @@
         min-height: 2rem;
         word-wrap: break-word;
         word-break: break-word;
-        border-radius: 0 0.5rem 0.5rem .5rem;
+        border-radius: 0 0.5rem 0.5rem 0.5rem;
     }
 
     &__messages-wrapper_right .q-chatbot__message {
         background-color: rgba(#018bd2, 20%);
-        border-radius: 0.5rem 0 0.5rem .5rem;
+        border-radius: 0.5rem 0 0.5rem 0.5rem;
     }
 
     &__sender {
@@ -154,29 +242,49 @@
         color: #7c858d;
         font-size: 0.7rem;
     }
+
+    &__retry-button {
+        align-items: center;
+        display: flex;
+    }
+
+    &__dialog-title{
+        margin: 0.5rem 0;
+    }
+}
+
+#comment-dialog {
+    .q-dialog__header {
+        display: none;
+    }
+}
+
+.hidden-input {
+    display: none;
 }
 
 .pulsing-dots {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.1rem;
 }
 
 .dot {
-  font-size: 20px;
-  line-height: 1;
-  animation: pulse 1s infinite;
-  color: var(--q-theme-primary);
+    font-size: 20px;
+    line-height: 1;
+    animation: pulse 1s infinite;
+    color: var(--q-theme-primary);
 }
 
 @keyframes pulse {
-    0%, 100% {
-      transform: scale(0.8);
-      opacity: 0.6;
+    0%,
+    100% {
+        transform: scale(0.8);
+        opacity: 0.6;
     }
     50% {
-      transform: scale(1);
-      opacity: 1;
+        transform: scale(1);
+        opacity: 1;
     }
-}
+}

package/src/components/CBMessage.vue

@@ -1,29 +1,84 @@
 <template>
     <div class="q-chatbot__message-container">
-        <!-- Chatbot Image -->
         <q-icon
             type="img"
             :icon="messageImage"
-            alt="Sender Image"
+            :alt="props.texts.senderImage"
             class="q-chatbot__profile" />
 
-        <div class="q-chatbot__message-wrapper">            
+        <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="props.texts.imagePreview" />
+            </div>
             <!-- Message body -->
             <div class="q-chatbot__message">
                 <!-- When loading is true, show bouncing dots animation -->
-                <pulse-dots v-if="loading"/>
+                <pulse-dots v-if="loading" />
                 <template v-else>
+                    <vue-markdown-render
+                        v-if="props.sender === 'bot'"
+                        class="q-chatbot__text"
+                        :source="props.message || ''" />
+
                     <div
-                    class="q-chatbot__text"
-                    v-if="props.sender === 'bot'"
-                    v-html="props.message"></div>
-                    <div class="q-chatbot__text" v-else>
+                        v-else
+                        class="q-chatbot__text">
                         {{ props.message }}
                     </div>
                 </template>
             </div>
-            <div 
-                class="q-chatbot__sender">
+            <q-dialog
+                id="comment-dialog"
+                v-model="showDialog"
+                :buttons="commentButtons">
+                <template #body.content>
+                    <div class="q-chatbot__dialog-title">
+                        {{ props.texts.commentDialogTitle }}
+                    </div>
+                    <q-text-field
+                        v-model="feedbackComment"
+                        :maxLength="150"
+                        size="large"
+                        :placeholder="props.texts.commentPlaceholder" />
+                </template>
+            </q-dialog>
+
+            <!-- Thumbs up and down buttons, only for bot messages -->
+            <div
+                v-if="isBotMessageAndNotDefault"
+                class="q-chatbot__feedback-buttons">
+                <q-button-group>
+                    <q-button
+                        :title="props.texts.goodResponse"
+                        borderless
+                        :disabled="loading"
+                        b-style="secondary"
+                        @click="openFeedbackDialog(1)">
+                        <q-icon icon="thumb-up" />
+                    </q-button>
+                    <q-button
+                        :title="props.texts.badResponse"
+                        borderless
+                        :disabled="loading"
+                        b-style="secondary"
+                        @click="openFeedbackDialog(0)">
+                        <q-icon icon="thumb-down" />
+                    </q-button>
+                    <q-button
+                        :title="props.texts.copyResponse"
+                        borderless
+                        :disabled="loading"
+                        b-style="secondary"
+                        @click="copyResponse">
+                        <q-icon icon="copy-content" />
+                    </q-button>
+                </q-button-group>
+            </div>
+            <div class="q-chatbot__sender">
                 {{ messageDate }}
             </div>
         </div>
@@ -31,10 +86,19 @@
 </template>
 
 <script setup lang="ts">
-    import { computed } from 'vue'
-    import { QIcon } from '@quidgest/ui/components'
+    import { computed, ref } from 'vue'
+    import {
+        QButton,
+        QIcon,
+        QDialog,
+        QTextField
+    } from '@quidgest/ui/components'
     import PulseDots from '@/components/PulseDots.vue'
     import type { ChatBotMessageSender } from '@/types/message.type'
+    import { ResourceStrings } from '@/types/texts.type'
+    import VueMarkdownRender from 'vue-markdown-render'
+    import Axios from 'axios'
+
     export interface CBMessageProps {
         /*
          * Sender of the message
@@ -59,7 +123,27 @@
         /**
          * Project locale
          */
-        dateFormat?: string,
+        dateFormat?: string
+
+        /**
+         * Image preview URL
+         */
+        imagePreviewUrl?: string
+
+        /**
+         * Default chatBot texts
+         */
+        texts?: ResourceStrings
+
+        /**
+         * Default api endpoint
+         */
+        apiEndpoint?: String
+
+        /**
+         * Session ID
+         */
+        sessionID?: String
 
         /**
          * User image
@@ -70,29 +154,78 @@
          * Chatbot image
          */
         chatbotImage: string
+
+        /**
+         * Flag to mark welcome messages
+         */
+        isWelcomeMessage?: boolean
     }
 
     const props = withDefaults(defineProps<CBMessageProps>(), {
         sender: 'user',
         userImage: undefined,
-        date: () => new Date()
+        date: () => new Date(),
+        texts: () => ({
+            commentDialogTitle: 'Would you like to add a comment?',
+            commentPlaceholder: 'Type your comment here (optional)...',
+            goodResponse: 'Good response',
+            badResponse: 'Bad response',
+            copyResponse: 'Copy response',
+            submitButton: 'Submit',
+            cancelButton: 'Cancel',
+            senderImage: 'Sender Image',
+            imagePreview: 'Image preview'
+        })
     })
 
-    const senderName = computed(() => {
-        return props.sender === 'bot' ? 'GenioBot' : 'You'
+    const showDialog = ref(false)
+    const feedbackComment = ref('')
+    const currentFeedback = ref<number | null>(null)
+    const commentButtons = [
+        {
+            id: 'confirm-btn',
+            action: submitFeedback,
+            props: {
+                label: props.texts.submitButton,
+                'b-style': 'primary',
+            },
+            icon: {
+                icon: 'submit'
+            }
+        },
+        {
+            id: 'cancel-btn',
+            props: {
+                label: props.texts.cancelButton,
+                'b-style': 'secondary',
+            },
+            icon: {
+                icon: 'cancel'
+            }
+        }
+    ]
+
+    const isBotMessageAndNotDefault = computed(() => {
+        return (
+            props.sender === 'bot' &&
+            !Object.values(props.texts || {}).includes(props.message || '') &&
+            !props.isWelcomeMessage
+        )
     })
 
     const getLocaleDate = computed(() => {
         if (!props.dateFormat) return props.date.toLocaleString()
 
-        return formatDate(props.date, props.dateFormat)
+        return formatDate(props.date, 'HH:mm')
     })
 
     const messageDate = computed(() => {
-        return `${senderName.value} ${getLocaleDate.value}`
+        return `${getLocaleDate.value}`
     })
 
-    const messageImage = computed(() => props.sender === 'bot' ? props.chatbotImage : props.userImage);
+    const messageImage = computed(() =>
+        props.sender === 'bot' ? props.chatbotImage : props.userImage
+    )
 
     function formatDate(date: Date, format: string) {
         const day = date.getDate().toString().padStart(2, '0')
@@ -110,4 +243,38 @@
             .replace('mm', minutes)
             .replace('ss', seconds)
     }
+
+    function openFeedbackDialog(feedback: number) {
+        showDialog.value = true
+        feedbackComment.value = ''
+        currentFeedback.value = feedback
+    }
+
+    function submitFeedback() {
+        if (currentFeedback.value != null) {
+            handleFeedback(currentFeedback.value, feedbackComment.value)
+        }
+    }
+    function handleFeedback(feedback: number, comment: string) {
+        Axios.post(props.apiEndpoint + '/prompt/feedback', {
+            messageSessionID: props.sessionID,
+            feedbackValue: feedback,
+            feedbackComment: comment
+        }).catch((error) => {
+            console.error('Error sending message feedback: ', error)
+        })
+    }
+
+    function copyResponse() {
+        if (!props.message) return
+
+        navigator.clipboard
+            .writeText(props.message)
+            .then(() => {
+                console.log('Message copied to clipboard')
+            })
+            .catch((error) => {
+                console.error('Failed to copy message to clipboard: ', error)
+            })
+    }
 </script>