Merge pull request #119 from iceljc/features/refine-chat-window

Features/refine chat window

Author: Oceania2018

src/lib/common/FileDropZone.svelte

@@ -35,8 +35,10 @@
     export let inputElement = undefined;
     export let required = false;
     export let dropText = "Drag and drop some files here, or click to select files";
+    export let fileLimit = 5;
 
     let innerDropText = dropText;
+    let innerDisabled = disabled;
     let isLoading = false;
     let isError = false;
     let isSuccess = false;
@@ -48,16 +50,16 @@
     $: {
         if (isLoading) {
             innerDropText = "Uploading...";
-            disabled = true;
+            innerDisabled = true;
         } else if (isSuccess) {
             innerDropText = defaultSuccessMesssage;
-            disabled = true;
+            innerDisabled = true;
         } else if (isError) {
             innerDropText = reason;
-            disabled = true;
+            innerDisabled = true;
         } else {
             innerDropText = dropText;
-            disabled = false;
+            innerDisabled = disabled;
         }
     }
 
@@ -225,9 +227,9 @@
                 }
 
                 /** @type {any[]} */
-                const acceptedFiles = [];
+                let acceptedFiles = [];
                 /** @type {any[]} */
-                const fileRejections = [];
+                let fileRejections = [];
 
                 /** @type {Promise<any>[]} */
                 const promises = [];
@@ -236,12 +238,14 @@
                     promises.push(new Promise((resolve, reject) => {
                         const [accepted, acceptError] = fileAccepted(file, accept);
                         const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize);
-                        getBase64(file).then(res => {
+                        getBase64(file).then(data => {
                             if (accepted && sizeMatch) {
                                 acceptedFiles.push({
                                     file_name: file.name,
                                     file_path: file.path,
-                                    url: res
+                                    file_data: data,
+                                    content_type: file.type,
+                                    file_size: file.size
                                 });
                             } else {
                                 const errors = [acceptError, sizeError].filter(Boolean);
@@ -254,6 +258,9 @@
 
                 Promise.all(promises).then(() => {
                     isLoading = false;
+                    if (acceptedFiles.length >= fileLimit) {
+                        acceptedFiles = acceptedFiles.slice(0, Math.max(fileLimit, 0));
+                    }
 
                     if (!multiple && acceptedFiles.length > 1) {
                         // Reject everything and empty accepted files
@@ -310,7 +317,7 @@
         resetState();
     }
   
-    $: composeHandler = (/** @type {any} */ fn) => (disabled ? null : fn);
+    $: composeHandler = (/** @type {any} */ fn) => (innerDisabled ? null : fn);
   
     $: composeKeyboardHandler = (/** @type {any} */ fn) => (noKeyboard ? null : composeHandler(fn));
   

src/lib/common/FileGallery.svelte

@@ -43,7 +43,7 @@
                                     <i class="bx bx-trash" />
                                 </div>
                             {/if}
-                            <img class="gallery-item-image" src={file.url} alt={''}>
+                            <img class="gallery-item-image" src={file.file_data} alt={''}>
                         </div>
                     </GalleryThumbnail>
                 </div>
@@ -52,8 +52,10 @@
 
         {#each files as file, idx (idx)}
             <GalleryImage title={file.file_name}>
-                <img src={file.url} alt={''} />
+                <img src={file.file_data} alt={''} />
+                {#if !!file.file_name}
                 <div class="item-text">{file.file_name}</div>
+                {/if}
             </GalleryImage>
         {/each}
     </LightboxGallery>

src/lib/helpers/http.js

@@ -54,13 +54,20 @@ axios.interceptors.response.use(
 
 /** @param {import('axios').InternalAxiosRequestConfig<any>} config */
 function skipLoader(config) {
-    let regex = new RegExp('http(s*)://(.*?)/conversation/(.*?)/(.*?)', 'g');
-    if (config.method === 'post' && !!config.data && regex.test(config.url || '')) {
+    const postRegexes = [
+        new RegExp('http(s*)://(.*?)/conversation/(.*?)/(.*?)', 'g')
+    ];
+
+    const getRegexes = [
+        new RegExp('http(s*)://(.*?)/address/options(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g')
+    ];
+
+    if (config.method === 'post' && !!config.data && postRegexes.some(regex => regex.test(config.url || ''))) {
         return true;
     }
 
-    regex = new RegExp('http(s*)://(.*?)/address/options(.*?)', 'g');
-    if (config.method === 'get' && regex.test(config.url || '')) {
+    if (config.method === 'get' && getRegexes.some(regex => regex.test(config.url || ''))) {
         return true;
     }
 

src/lib/helpers/store.js

@@ -133,17 +133,22 @@ export const conversationUserMessageStore = createConversationUserMessageStore()
 
 
 const createConversationUserAttachmentStore = () => {
+    const { subscribe, set } = writable({ accepted_files: [] });
+
     return {
         reset: () => {
             localStorage.removeItem(conversationUserAttachmentKey);
+            set({ accepted_files: [] });
         },
         get: () => {
             const json = localStorage.getItem(conversationUserAttachmentKey);
             return json ? JSON.parse(json) : {};
         },
         put: (value) => {
             localStorage.setItem(conversationUserAttachmentKey, JSON.stringify(value));
-        }
+            set(value);
+        },
+        subscribe
     }
 };
 

src/lib/helpers/types.js

@@ -272,11 +272,13 @@ IRichContent.prototype.text;
  * @property {UserModel} sender - The message sender.
  * @property {string} message_id - The message id.
  * @property {string} text - The message content.
+ * @property {string} editor - The message editor.
  * @property {string} function - The function name.
  * @property {RichContent} rich_content - Rich content.
  * @property {string} post_action_disclaimer - The message disclaimer.
  * @property {string} data - The message data.
  * @property {Date} created_at - The message sent time.
+ * @property {boolean} is_load_images - Check of the message needs to load images.
  */
 
 /**

src/lib/scss/custom/components/_file.scss

@@ -15,12 +15,14 @@ $file-screen-max-width: 500px;
 
     .gallery-item-wrapper {
         position: relative;
+        width: 100%;
+        height: 100%;
 
         .gallery-item-icon {
             position: absolute;
-            color: white;
+            color: red;
             cursor: pointer;
-            z-index: 1000;
+            z-index: 500;
             right: 3px;
             font-size: 1.5em;
         }
@@ -72,4 +74,12 @@ $file-screen-max-width: 500px;
     .add-file-icon {
         font-size: 2em;
     }
+}
+
+.chat-file-upload-gallery {
+    margin: 5px 10px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+    justify-content: center;
 }

src/lib/scss/custom/pages/_chat.scss

@@ -387,19 +387,26 @@
     background-color: var(--#{$prefix}light) !important;
     border-color: var(--#{$prefix}light) !important;
     resize: none;
+    padding-right: 1rem;
+}
+
+.chat-input-image {
+    padding-right: 4em;
 }
 
 .chat-input-links {
     position: absolute;
-    right: 16px;
+    right: 3px;
     top: 50%;
     transform: translateY(-50%);
+    width: 3em;
     li {
-        a {
+        span {
             font-size: 16px;
             line-height: 36px;
             padding: 0px 4px;
             display: inline-block;
+            color: var(--bs-primary);
         }
     }
 }

src/lib/services/api-endpoints.js

@@ -41,6 +41,7 @@ export const endpoints = {
     conversationCountUrl: `${host}/conversations/count`,
     conversationDeletionUrl: `${host}/conversation/{conversationId}`,
     conversationDetailUrl: `${host}/conversation/{conversationId}`,
+    conversationAttachmentUrl: `${host}/conversation/{conversationId}/files/{messageId}`,
     dialogsUrl: `${host}/conversation/{conversationId}/dialogs`,
     conversationMessageDeletionUrl: `${host}/conversation/{conversationId}/message/{messageId}`,
 

src/lib/services/conversation-service.js

@@ -37,6 +37,17 @@ export async function getConversations(filter) {
     return response.data;
 }
 
+/**
+ * Get conversation files
+ * @param {string} conversationId
+ * @param {string} messageId
+ */
+export async function getConversationFiles(conversationId, messageId) {
+    const url = replaceUrl(endpoints.conversationAttachmentUrl, { conversationId: conversationId, messageId: messageId });
+    const response = await axios.get(url);
+    return response?.data;
+}
+
 /**
  * Delete conversation
  * @param {string} conversationId 
@@ -64,8 +75,9 @@ export async function GetDialogs(conversationId) {
  * @param {string} conversationId - The conversation id
  * @param {string} message - The text message sent to CSR
  * @param {import('$types').MessageData?} data - Additional data
+ * @param {any[]} files - The chat files
  */
-export async function sendMessageToHub(agentId, conversationId, message, data = null) {
+export async function sendMessageToHub(agentId, conversationId, message, data = null, files = []) {
     let url = replaceUrl(endpoints.conversationMessageUrl, {
         agentId: agentId,
         conversationId: conversationId
@@ -76,7 +88,8 @@ export async function sendMessageToHub(agentId, conversationId, message, data =
         text: message,
         truncateMessageId: data?.truncateMsgId,
         states: totalStates,
-        postback: data?.postback
+        postback: data?.postback,
+        files: files
     });
     return response.data;
 }