Attachment Feature

.gitignore

@@ -4,3 +4,5 @@ stats-prod.json
 .env
 /.idea/
 /dist/
+src/.DS_Store
+.DS_Store

.nvmrc

@@ -1 +1 @@
-v10.15.0
+v16.16.0

package.json

@@ -20,29 +20,29 @@
   "license": "Apache-2.0",
   "dependencies": {
     "dotenv": "^10.0.0",
-    "ejs": "^3.1.6",
+    "ejs": "^3.1.8",
     "express": "^4.17.1",
     "install": "^0.13.0",
     "isomorphic-dompurify": "^0.24.0",
-    "microsoft-cognitiveservices-speech-sdk": "^1.19.0",
-    "vue": "^2.6.14"
+    "microsoft-cognitiveservices-speech-sdk": "^1.22.0",
+    "vue": "^2.7.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/node": "^7.16.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.16.0",
-    "@babel/polyfill": "^7.11.5",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/register": "^7.16.0",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@vue/cli-plugin-unit-jest": "^4.5.0",
-    "@vue/cli-service": "^4.5.15",
-    "@vue/test-utils": "^1.2.2",
+    "@babel/core": "^7.18.9",
+    "@babel/node": "^7.18.9",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.18.9",
+    "@babel/register": "^7.18.9",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/test-utils": "^1.3.0",
     "autoprefixer": "^10.4.0",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.2.5",
     "body-scroll-lock": "^3.1.5",
     "core-js": "^3.19.1",
-    "css-loader": "^6.5.1",
+    "css-loader": "^6.7.1",
     "es6-promise": "^4.2.8",
     "eslint": "^8.1.0",
     "eslint-plugin-vue": "^8.0.3",
@@ -52,7 +52,7 @@
     "jest": "^27.3.1",
     "jsdom": "^18.0.1",
     "jsdom-global": "^3.0.2",
-    "node-sass": "^6.0.1",
+    "node-sass": "^7.0.1",
     "postcss": "^8.3.11",
     "postcss-cli": "^9.0.2",
     "postcss-loader": "^6.2.0",

src/TeneoWebChat.vue

@@ -131,7 +131,6 @@ export default {
     EventBus.$emit(events.API_STATE_READY);
   },
   methods: {
-    // Encapsulating dependency methods makes Testing easier
     async _onMessageReceived(message) {
       await this.$teneoApi._onMessageReceived(message);
     },
@@ -267,22 +266,40 @@ export default {
 
 <style scoped>
 .teneo-web-chat {
+  /** New variables: */
+  --line-light-color: #e0e0e0;
+  --link-button-color-: #2f286e;
+
+  /** Basic colors */
   --light-fg-color: #ffffff;
   --light-bg-color: #eceff1;
   --light-border-color: #c9c9c9;
   --dark-fg-color: #263238;
   --dark-bg-color: #7b7b7b;
-  --primary-color: #4e8cff;
+
+  /** Button colors */
+  --primary-color: #2f286e;
+  --primary-color-dark:#160d27; /** */
   --secondary-color: #6c757d;
+  --secondary-color-dark: #4e5459; /** */
   --danger-color: #dc3545;
+  --danger-color-dark: #ac2936; /** */
   --success-color: #28a745;
-  --warning-color: #ffc107;
+  --success-color-dark: #1c7932; /** */
+  --warning-color: #e2ab07;
+  --warning-color-dark: #c79605; /** */
   --warning-fg-text-color: #d19d00;
   --info-color: #17a2b8;
+  --info-color-dark: #0e798a;
+
   --expired-color: #a9a9a9;
-  --text-link-color: #007bff;
+  --expired-bg-color: #f0f0f0;
+
+  --text-link-color: var(--primary-color);
+
   --user-input-bg-color: #f4f7f9;
   --user-input-fg-color: #565867;
+
   --spinner-color: var(--light-border-color);
   --sendicon-fg-color: var(--dark-fg-color);
   --uploadicon-fg-color: var(--dark-fg-color);
@@ -310,33 +327,58 @@ export default {
   --agent-typing-indicator-bg-color: var(--agent-message-bg-color);
   --user-typing-indicator-fg-color: var(--user-message-fg-color);
   --user-typing-indicator-bg-color: var(--user-message-bg-color);
+
+
+  /** Messages colors */
+
+  /**buttons */
   --buttons-title-color: var(--dark-fg-color);
   --button-fg-color: var(--light-fg-color);
   --button-bg-color: var(--primary-color);
+
+  /**Cards */
   --card-bg-color: var(--light-fg-color);
   --card-link-color: var(--text-link-color);
+
+  /**links */
   --link-button-fg-color: var(--text-link-color);
   --link-button-bg-color: var(--light-fg-color);
-  --link-button-border-color: var(--light-border-color);
+  --link-button-border-color: var(--primary-color);
+
+  /**Clickablelist */
   --clickablelist-title-color: var(--dark-fg-color);
   --clickablelist-bg-color: var(--light-fg-color);
   --clickablelist-fg-color: var(--dark-fg-color);
   --clickablelist-selected-bg-color: var(--bot-message-bg-color);
   --clickablelist-selected-fg-color: var(--dark-fg-color);
+
+  /**quickreply */
   --quickreply-fg-color: var(--primary-color);
   --quickreply-bg-color: var(--light-fg-color);
   --quickreply-border-color: var(--primary-color);
   --quickreply-expired-color: var(--expired-color);
+
+  /**light box */
   --lightbox-overlay-color: rgba(0, 0, 0, 0.8);
   --lightbox-image-background-color: #ffffff;
+
+  /**Modal */
   --modal-overlay-color: rgba(0, 0, 0, 0.5);
+
+  /**Carrousel */
   --carousel-ctrl-panel-bg-color: var(--primary-color);
   --carousel-ctrl-panel-fg-color: var(--light-fg-color);
   --carousel-ctrl-panel-active-color: var(--secondary-color);
   --carousel-ctrl-panel-disabled-color: var(--expired-color);
+  --carousel-arrows-bg-color: #74728f;
+  --carousel-ctrl-dots-bg-color: #808080;
+
+  /**Link preview */
   --link-preview-background-color: var(--light-bg-color);
   --link-preview-text-color: var(--dark-fg-color);
   --link-preview-image-background-color: var(--dark-bg-color);
+
+  /**Table */
   --table-border-color: var(--light-border-color);
   --table-title-text-color: var(--dark-fg-color);
   --table-title-background-color: var(--light-bg-color);
@@ -348,6 +390,8 @@ export default {
   --table-body-even-background-color: #aaa;
   --table-footer-text-color: var(--primary-color);
   --table-footer-background-color: var(--light-bg-color);
+
+  /**Form */
   --form-background-color: var(--light-bg-color);
   --form-title-text-color: var(--dark-fg-color);
   --form-subtitle-text-color: var(--dark-fg-color);
@@ -361,6 +405,7 @@ export default {
   --form-reset-text-color: var(--dark-fg-color);
   --form-reset-background-color: var(--warning-color);
 
+  /**Font */
   --primary-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 

src/components/ChatWindow.vue

@@ -2,11 +2,14 @@
   <div ref="chatWindowId" :class="chatWindowStyles()" role="group" :aria-label="$t('message.chat_window_group_aria_label')">
     <Header :on-close="onClose" :on-minimize="onMinimize" />
     <MessageList id="twc-message-list" :message-list="$teneoApi.messageList" />
+
     <div v-if="spinnerIsLoading" class="twc-spinner" role="progressbar" aria-valuemin="0" :aria-valuetext="$t('message.chat_window_spinner_aria_valuetext')" aria-valuemax="100">
       <div class="twc-bounce1" aria-hidden="true"></div>
       <div class="twc-bounce2" aria-hidden="true"></div>
       <div class="twc-bounce3" aria-hidden="true"></div>
     </div>
+
+    <UploadPreviewPanel />    
     <UserInput :on-submit="sendMessage" />
 
     <div v-if="isImageZoomed" href="#" class="twc-lightbox" @click="zoomOut">
@@ -24,12 +27,16 @@ import Vue from 'vue';
 import Header from './Header.vue';
 import MessageList from './MessageList.vue';
 import UserInput from './UserInput.vue';
+import UploadPreviewPanel from './UploadPreviewPanel.vue';
 import { EventBus, events } from '../utils/event-bus.js';
 import { API_CALL_SEND_INPUT } from '../utils/constants';
 import detectIosSafari from '../utils/detect-ios-safari';
 
 export default {
-  components: { Header, MessageList, UserInput },
+  components: {
+    UploadPreviewPanel, 
+    Header, MessageList, UserInput 
+  },
   props: {
     onClose: {
       type: Function,
@@ -80,8 +87,8 @@ export default {
       this.isImageZoomed = true;
 
       setTimeout(() => {
- document.getElementById('twc-lightbox-close').focus();
-}, 50);
+        document.getElementById('twc-lightbox-close').focus();
+      }, 50);
     });
     // Send an empty init message to trigger a welcoming message from Teneo
     if (this.$teneoApi.messageList.length === 0) {
@@ -119,6 +126,9 @@ export default {
 };
 </script>
 
+
+<!--Changes: resize and overflow added to be resizable by the user
+We need to change the corner from it's resizable-->
 <style scoped>
 .twc-chat-window {
   font-family: var(--primary-font, 'Helvetica Neue', Helvetica, Arial, sans-serif);
@@ -131,7 +141,7 @@ export default {
   bottom: 25px;
   box-sizing: border-box;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
-  background: var(--chat-window-bg-color, #ffffff);
+  background: white;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -143,6 +153,7 @@ export default {
   z-index: 2699; /* Sit on top, but right below modal messages */
 }
 
+
 @media (max-width: 450px) {
   .twc-chat-window {
     width: 100%;
@@ -156,15 +167,12 @@ export default {
 
 .twc-ios-keyboard-shown {
   transition: 0.3s ease-in-out !important;
-  height: calc(66% - 62px) !important;
-  top: calc(34% + 63px) !important;
-  position: fixed !important;
+  height: calc(66% - 60px);
+  /* top: 0px; */
 }
 .twc-ios-keyboard-hidden {
   transition: 0.2s ease-in-out !important;
-  height: 100% !important;
-  top: 0px !important;
-  position: fixed !important;
+  height: 100%;
 }
 
 .twc-spinner {

src/components/LaunchButton.vue

@@ -103,7 +103,7 @@ export default {
   bottom: 25px;
   border-radius: 50%;
   border: none;
-  box-shadow: none;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   transition: box-shadow 0.2s ease-in-out;
   cursor: pointer;
   display: flex;
@@ -127,6 +127,8 @@ export default {
 
 .twc-launch-button:hover {
   box-shadow: 0 0px 27px 1.5px rgba(0, 0, 0, 0.2) !important;
+  width: 65px;
+  height: 65px;
 }
 
 .twc-launch-button:hover .twc-launch-button__open-icon, .twc-launch-button:focus .twc-launch-button__open-icon {