Skip to content
This repository has been archived by the owner on Sep 3, 2024. It is now read-only.

Twc updates wip #118

Open
wants to merge 38 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
367a2e0
Updating dependencies for compatability with node 16
eaili Jul 29, 2022
3256d5e
Updating dependencies for compatability with node 16
eaili Jul 29, 2022
cb45911
Started investigation of upgrading to node16
eaili Oct 21, 2022
6f477a3
Updated dependencies
eaili Nov 16, 2022
3a78ca6
Added dompurify to avoid xss vulnerability
JP-Artsol Nov 16, 2022
dd96967
Merge pull request #112 from artificialsolutions/SDSA-225
eaili Nov 16, 2022
70f6874
updates from TWC dev team
JP-Artsol Nov 17, 2022
16c17d3
Merge branch 'master' into twc-updates-wip
JP-Artsol Nov 17, 2022
cf4bdca
prepare for merge
JP-Artsol Nov 17, 2022
52eec1f
Merge branch 'node-16' into twc-updates-wip
JP-Artsol Nov 17, 2022
c054e3a
Updates for compatibility with node16
JP-Artsol Nov 17, 2022
8034b61
Merge branch 'master' into twc-updates-wip
JP-Artsol Nov 17, 2022
7244486
fixed dependencies for node16 and release v.3.7.5 merged
JP-Artsol Nov 17, 2022
df331f2
attachment panel refactoring
fermanco Dec 21, 2022
810ffef
Attachment panel CSS refactoring
fermanco Dec 21, 2022
d99f780
Fixing attachment typo
fermanco Dec 21, 2022
c0cc8ae
Uploading buttons CSS and new Colors
fermanco Dec 22, 2022
62f644c
Card Message CSS
fermanco Dec 22, 2022
ac50a47
Carousel CSS
fermanco Dec 22, 2022
2f6828e
CSS refactoring
fermanco Dec 23, 2022
f4c6b90
Upload Panel refactoring
fermanco Dec 23, 2022
f9ede71
Upload Panel CSS
fermanco Dec 23, 2022
c3e51e0
Uploading Rating Message
fermanco Dec 23, 2022
28650c6
Upload Panel: fixing scroll-bar and sizes
fermanco Dec 23, 2022
27d3adc
Upload message
Jan 31, 2023
990ef95
upload messages contd
Feb 2, 2023
8af905a
upload messages
Feb 3, 2023
673fcc8
upload message
Feb 7, 2023
7d4671f
upload message
Feb 8, 2023
58c442c
upload message
Feb 9, 2023
3104473
upload message
Feb 10, 2023
f44d8b6
upload message
Feb 15, 2023
8dcc296
upload
Feb 16, 2023
793d980
upload
Feb 21, 2023
78b1d56
suppressing user input when the upload panel is opened
Mar 6, 2023
d0c1831
locatization of upload
Mar 7, 2023
148160f
.
Apr 12, 2023
3a8bc16
local global variables
May 8, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
upload message
alpe authored and alpe committed Feb 10, 2023
commit 310447326c959e45bc0a6325d3100e54d01986bd
6 changes: 3 additions & 3 deletions src/components/ChatWindow.vue
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
<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" />
<UploadPreviewPanel />
<UploadPreviewPannel />
<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>
@@ -26,14 +26,14 @@ 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 UploadPreviewPannel from './UploadPreviewPannel.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: {
UploadPreviewPanel,
UploadPreviewPannel,
Header, MessageList, UserInput
},
props: {
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div v-if="idToItem != null"
class="twc-upload-preview-panel"
class="twc-upload-preview-pannel"
contenteditable="true"
style="caret-color:transparent"
onbeforeinput="return false"
@@ -60,8 +60,8 @@

<style scoped>

/* Parent: hall panel */
.twc-upload-preview-panel {
/* Parent: hall pannel */
.twc-upload-preview-pannel {
box-sizing: border-box;
height: auto;
border: none;
@@ -74,7 +74,7 @@
outline: 0px solid transparent;
}

.twc-upload-preview-panel-drag {
.twc-upload-preview-pannel-drag {
background-color: var(--user-input-fg-color, #565867);
opacity: 60%;
}
@@ -274,15 +274,15 @@ button:nth-child(4){
/* <![CDATA[ */

import { EventBus, events } from '../utils/event-bus.js';
import { API_ON_UPLOAD_PANEL_SUBMIT, API_ON_UPLOAD_PANEL_CANCEL } from '../utils/api-function-names.js';
import { API_ON_UPLOAD_PANNEL_SUBMIT, API_ON_UPLOAD_PANNEL_CANCEL } from '../utils/api-function-names.js';
import basePayload from '../utils/base-payload.js';
import handleExtension from '../utils/handle-extension.js';


var idToExtraData = null;


const bDebug = true, sName = 'UploadPreviewPanel',
const bDebug = true, sName = 'UploadPreviewPannel',

MAX_IMG_PREVIEW_WIDTH = 32, MAX_IMG_PREVIEW_HEIGHT = 32,

@@ -365,8 +365,8 @@ export default {

mounted() {
if (bDebug) console.log(sName, 'mounted');
EventBus.$on(events.SHOW_UPLOAD_PANEL, payload => this.open(payload));
EventBus.$on(events.HIDE_UPLOAD_PANEL, () => this.close());
EventBus.$on(events.SHOW_UPLOAD_PANNEL, payload => this.open(payload));
EventBus.$on(events.HIDE_UPLOAD_PANNEL, () => this.close());
},


@@ -386,8 +386,8 @@ export default {

unmounted() {
if (bDebug) console.log(sName, 'unmounted');
EventBus.$off(events.SHOW_UPLOAD_PANEL);
EventBus.$off(events.HIDE_UPLOAD_PANEL);
EventBus.$off(events.SHOW_UPLOAD_PANNEL);
EventBus.$off(events.HIDE_UPLOAD_PANNEL);
},


@@ -396,26 +396,26 @@ export default {
onDragOver(evt) {
if (bDebug) console.log(sName, 'onDragOver(), processing:', this.processing);
if (this.processing) return;
evt.currentTarget.classList.add("twc-upload-preview-panel-drag");
evt.currentTarget.classList.add("twc-upload-preview-pannel-drag");
},


onDragEnter(evt) {
if (bDebug) console.log(sName, 'onDragEnter(), processing:', this.processing);
if (this.processing) return;
evt.currentTarget.classList.add("twc-upload-preview-panel-drag");
evt.currentTarget.classList.add("twc-upload-preview-pannel-drag");
},


onDragLeave(evt) {
if (bDebug) console.log(sName, 'onDragLeave(), processing:', this.processing);
evt.currentTarget.classList.remove("twc-upload-preview-panel-drag");
evt.currentTarget.classList.remove("twc-upload-preview-pannel-drag");
},


addFilesFromDrop(evt) {
if (bDebug) console.log(sName, 'addFilesFromDrop(), processing:', this.processing);
evt.currentTarget.classList.remove("twc-upload-preview-panel-drag");
evt.currentTarget.classList.remove("twc-upload-preview-pannel-drag");
if (this.processing) return;
this.addFiles(evt.dataTransfer.files);
},
@@ -504,15 +504,15 @@ export default {
for (var item, i = 0; i < payload.items.length; i++) {
item = payload.items[i];
if (item == null) {
console.warn(sName, 'open(), item at index', i, 'is undefined when opening an upload panel');
console.warn(sName, 'open(), item at index', i, 'is undefined when opening an upload pannel');
continue;
}
if (item.id == null) {
console.warn(sName, 'open(), item.id at index', i, 'is undefined when opening an upload panel');
console.warn(sName, 'open(), item.id at index', i, 'is undefined when opening an upload pannel');
continue;
}
if (item.file == null) {
console.warn(sName, 'open(), item.file at index', i, 'is undefined when opening an upload panel');
console.warn(sName, 'open(), item.file at index', i, 'is undefined when opening an upload pannel');
continue;
}
if (!this.idToItem.hasOwnProperty(item.id)) this.itemsCount++;
@@ -556,7 +556,7 @@ export default {
const payload = basePayload();
payload.itemsCount = this.itemsCount;
try {
await handleExtension(API_ON_UPLOAD_PANEL_CANCEL, payload);
await handleExtension(API_ON_UPLOAD_PANNEL_CANCEL, payload);
} finally {
this.processing = false;
if (bDebug) console.log(sName, 'clickCancel() end, payload:', getPrintableDebugObject(payload));
@@ -591,7 +591,7 @@ export default {
}
payload.comment = this.comment;
try {
await handleExtension(API_ON_UPLOAD_PANEL_SUBMIT, payload);
await handleExtension(API_ON_UPLOAD_PANNEL_SUBMIT, payload);
} finally {
this.processing = false;
if (bDebug) console.log(sName, 'clickSubmit() end, payload:', getPrintableDebugObject(payload));
57 changes: 40 additions & 17 deletions src/components/messages/UploadMessage.vue
Original file line number Diff line number Diff line change
@@ -6,33 +6,33 @@
<span v-else class="twc-upload-file-representation twc-upload-file-representation-symbol">{{ message.data.fileSymbol || message.data.fileName || '#' }}</span>

<template v-if="status === 'SUCCEEDED'">
<a v-if="controlAllowed" @click="deleteFile" class="twc-upload-file-action-delete" role="button" title="Delete file">&#x2715;</a>
<a v-if="controlAllowed" role="button" @click="deleteFile" class="twc-upload-file-cta twc-upload-file-action-delete" title="Delete file">&#x2715;</a>
<span class="twc-upload-file-status">Succeeded</span>
</template>
<template v-else-if="status === 'IN_PROGRESS'">
<span ref="spinner" class="twc-upload-file-progress-spinner"></span>
<a v-if="controlAllowed" @click="stopUpload" class="twc-upload-file-middle-circle twc-upload-file-stop" role="button" title="Stop upload">&#10007;</a>
<a v-if="controlAllowed" role="button" @click="stopUpload" class="twc-upload-file-cta twc-upload-file-middle-circle twc-upload-file-stop" title="Stop upload">&#10007;</a>
<span v-else class="twc-upload-file-middle-circle"></span>
<span class="twc-upload-file-status">In progress</span>
</template>
<template v-else-if="status === 'INTERRUPTED'">
<template v-if="controlAllowed">
<span ref="spinner" class="twc-upload-file-progress-spinner"></span>
<a @click="restartUpload" class="twc-upload-file-middle-circle twc-upload-file-restart" role="button" title="Restart upload">&#8687;</a>
<a @click="restartUpload" role="button" class="twc-upload-file-cta twc-upload-file-middle-circle twc-upload-file-restart" title="Restart upload">&#8687;</a>
</template>
<span class="twc-upload-file-status">Interrupted</span>
</template>
<template v-else-if="status === 'FAILED'">
<template v-if="controlAllowed">
<span ref="spinner" class="twc-upload-file-progress-spinner"></span>
<a @click="restartUpload" class="twc-upload-file-middle-circle twc-upload-file-restart" role="button" title="Restart upload">&#8687;</a>
<a @click="restartUpload" role="button" class="twc-upload-file-cta twc-upload-file-middle-circle twc-upload-file-restart" title="Restart upload">&#8687;</a>
</template>
<span class="twc-upload-file-status">Failed</span>
</template>
<template v-else-if="status === 'DELETED'">
<template v-if="controlAllowed">
<span ref="spinner" class="twc-upload-file-progress-spinner"></span>
<a @click="restartUpload" class="twc-upload-file-middle-circle twc-upload-file-restart" role="button" title="Restart upload">&#8687;</a>
<a @click="restartUpload" role="button" class="twc-upload-file-cta twc-upload-file-middle-circle twc-upload-file-restart" title="Restart upload">&#8687;</a>
</template>
<span class="twc-upload-file-status">Deleted</span>
</template>
@@ -114,19 +114,17 @@
opacity: 1;
}

.twc-upload-file-cta {
cursor: pointer;
}

.twc-upload-file-action-delete {
position: absolute;
bottom: 0;
left: 0;
color: black;
background-color: red;
border: thin solid black;
/*
display: flex;
align-items: center;
align-content: center;
justify-content: center;
*/
padding: 0.1rem;
margin: 0.1rem;
}
@@ -166,7 +164,7 @@ import {

const bDebug = true, sName = 'UploadMessage';

let nUploadPercentage;
let nUploadPercentage, bProcessing;


export default {
@@ -203,7 +201,7 @@ export default {
* If this flag is undefined, it is ignored. Otherwise, if it evaluates to <code>true</code>,
* the corresponding button is displayed. If it evaluates to <code>false</code>, the button is suppressed.
* @param {?} [message.data.initialUploadState.imageUrl] the URL of the image to display in the message.
* If this value evaluates to <code>true</code>, the message will be disacarded
* If this value evaluates to <code>true</code>, the message will be discarded
* because image URLs are not allowed in messages.
* @param {number} [message.data.initialUploadState.uploadPercentage] the percentage of the file upload to display.
* Allowed values are from 0 to 100.
@@ -295,24 +293,49 @@ export default {
methods: {

async stopUpload() {
if (bProcessing) {
if (bDebug) console.log(sName, 'stopUpload(), already processing for itemId', this.message.data.itemId);
return;
}
bProcessing = true;
if (bDebug) console.log(sName, 'stopUpload() for itemId', this.message.data.itemId);
const payload = basePayload();
payload.itemId = this.message.data.itemId;
await handleExtension(API_ON_UPLOAD_FILE_STOP_CLICK, payload);
try {
await handleExtension(API_ON_UPLOAD_FILE_STOP_CLICK, payload);
} finally {
bProcessing = false;
}
},

async restartUpload() {
if (bProcessing) {
if (bDebug) console.log(sName, 'restartUpload(), already processing for itemId', this.message.data.itemId);
return;
}
if (bDebug) console.log(sName, 'restartUpload() for itemId', this.message.data.itemId);
const payload = basePayload();
payload.itemId = this.message.data.itemId;
await handleExtension(API_ON_UPLOAD_FILE_RESTART_CLICK, payload);
try {
await handleExtension(API_ON_UPLOAD_FILE_RESTART_CLICK, payload);
} finally {
bProcessing = false;
}
},

async deleteFile() {
if (bProcessing) {
if (bDebug) console.log(sName, 'deleteFile(), already processing for itemId', this.message.data.itemId);
return;
}
if (bDebug) console.log(sName, 'deleteFile() for itemId', this.message.data.itemId);
const payload = basePayload();
payload.itemId = this.message.data.itemId;
await handleExtension(API_ON_UPLOAD_FILE_DELETE_CLICK, payload);
try {
await handleExtension(API_ON_UPLOAD_FILE_DELETE_CLICK, payload);
} finally {
bProcessing = false;
}
},

assignSpinnerValue(n) {
@@ -321,7 +344,7 @@ export default {
this.$refs.spinner.style.background = 'conic-gradient(blue ' + n + '%, lightgrey ' + n + '%)';
if (bDebug) console.log(sName, 'Setting upload percentage', n);
} else {
console.log(sName, '!$refs.spinner, reStatus:', this.reStatus, ', mesaage:', this.message);
if (bDebug) console.log(sName, '!$refs.spinner, reStatus:', this.reStatus, ', mesaage:', this.message);
}
},

13 changes: 6 additions & 7 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -272,8 +272,7 @@ window.TeneoWebChat = {
}
},

call(function_name, payload = undefined, extraData = undefined) {
// TODO ALPE adding extraData
call(function_name, payload = undefined) {
switch (function_name) {
case apiConstants.API_CALL_SHOW_CALLOUT:
if (payload && typeof payload === 'string') {
@@ -355,7 +354,7 @@ window.TeneoWebChat = {
* TODO: check if message type is valid?
*/
if (Object.keys(payload).length > 0 && payload.constructor === Object) {
EventBus.$emit(events.ADD_MESSAGE, payload, extraData);
EventBus.$emit(events.ADD_MESSAGE, payload);
}
break;

@@ -526,12 +525,12 @@ window.TeneoWebChat = {
break;

// TODO ALPE
case apiConstants.API_CALL_SHOW_UPLOAD_PANEL:
EventBus.$emit(events.SHOW_UPLOAD_PANEL, payload);
case apiConstants.API_CALL_SHOW_UPLOAD_PANNEL:
EventBus.$emit(events.SHOW_UPLOAD_PANNEL, payload);
break;

case apiConstants.API_CALL_HIDE_UPLOAD_PANEL:
EventBus.$emit(events.HIDE_UPLOAD_PANEL);
case apiConstants.API_CALL_HIDE_UPLOAD_PANNEL:
EventBus.$emit(events.HIDE_UPLOAD_PANNEL);
break;

case apiConstants.API_ON_SET_UPLOAD_STATE:
8 changes: 4 additions & 4 deletions src/utils/api-function-names.js
Original file line number Diff line number Diff line change
@@ -46,8 +46,8 @@ export const API_SET_ENGINE_PARAMS = 'set_engine_params';
export const API_SET_MS_VOICE = 'set_ms_voice';

// TODO ALPE
export const API_CALL_HIDE_UPLOAD_PANEL = 'hide_upload_panel';
export const API_CALL_SHOW_UPLOAD_PANEL = 'show_upload_panel';
export const API_CALL_HIDE_UPLOAD_PANNEL = 'hide_upload_pannel';
export const API_CALL_SHOW_UPLOAD_PANNEL = 'show_upload_pannel';

// Add dedicated add typing indicator method
export const API_CALL_HIDE_TYPING_INDICATOR = 'hide_typing_indicator';
@@ -82,8 +82,8 @@ export const API_ON_TTS_BUTTON_CLICK = 'tts_button_clicked';
export const API_ON_RESET = 'reset';

// TODO ALPE
export const API_ON_UPLOAD_PANEL_SUBMIT = 'upload_panel_submit';
export const API_ON_UPLOAD_PANEL_CANCEL = 'upload_panel_cancel';
export const API_ON_UPLOAD_PANNEL_SUBMIT = 'upload_pannel_submit';
export const API_ON_UPLOAD_PANNEL_CANCEL = 'upload_pannel_cancel';

export const API_ON_SET_UPLOAD_STATE = 'set_upload_state';

4 changes: 2 additions & 2 deletions src/utils/event-bus.js
Original file line number Diff line number Diff line change
@@ -46,8 +46,8 @@ export const events = {
ZOOM_IMAGE: 'zoom_image',

// TODO ALPE
HIDE_UPLOAD_PANEL: 'hide_upload_panel',
SHOW_UPLOAD_PANEL: 'show_upload_panel',
HIDE_UPLOAD_PANNEL: 'hide_upload_pannel',
SHOW_UPLOAD_PANNEL: 'show_upload_pannel',
SET_UPLOAD_STATE: 'set_upload_state'
};

Loading