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

Commit

Permalink
linkpreview in combo
Browse files Browse the repository at this point in the history
  • Loading branch information
Alexander committed Aug 11, 2022
1 parent 44d2880 commit cf34578
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 24 deletions.
28 changes: 18 additions & 10 deletions src/components/ChatWindow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,16 @@ export default {
this.isIosSafari = detectIosSafari();
if (this.isIosSafari === true) {
EventBus.$on(events.USER_INPUT_FOCUS_CHANGED, (onoff) => {
if (!(this.lastScrollY === window.scrollY)) {
this.keyboardUp = onoff;
} else {
this.keyboardUp = true; // Reactive variable, will update style
}
this.lastScrollY = window.scrollY;
});
//TODO setTimeout
//setTimeout(() => {
if (!(this.lastScrollY === window.scrollY)) {
this.keyboardUp = onoff;
} else {
this.keyboardUp = true; // Reactive variable, will update style
}
this.lastScrollY = window.scrollY;
//}, 1000);
})
}
},
mounted() {
Expand Down Expand Up @@ -153,12 +156,17 @@ export default {
.twc-ios-keyboard-shown {
transition: 0.3s ease-in-out !important;
height: calc(66% - 60px);
/* top: 0px; */
height: calc(66% - 62px) !important;
border: 5px solid green;
top: calc(34% + 63px) !important;
position: fixed !important;
}
.twc-ios-keyboard-hidden {
transition: 0.2s ease-in-out !important;
height: 100%;
height: 100% !important;
border: 5px solid red;
top: 0px !important;
position: fixed !important;
}
.twc-spinner {
Expand Down
31 changes: 31 additions & 0 deletions src/components/messages/ComboMessage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,28 @@
<template>
<ul class="twc-combo">
<li v-for="(message, idx) in comboitems" :key="idx">
<div class="twc-combo-message" v-if="message.type==='linkpreview'">
<a :href="message.url || undefined"
:title="message.description || this.$t('message.preview_description_not_available')"
target="_blank" class="twc-link-preview">
<div class="twc-link-preview-left-column">
<img :src="message.image || 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTE1LjE5IDEyMy4zOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTE1LjE5IDEyMy4zOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLW1pdGVybGltaXQ6Mi42MTMxO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05My4xMyw3OS41YzEyLjA1LDAsMjEuODIsOS43NywyMS44MiwyMS44MmMwLDEyLjA1LTkuNzcsMjEuODItMjEuODIsMjEuODJjLTEyLjA1LDAtMjEuODItOS43Ny0yMS44Mi0yMS44MiBDNzEuMzEsODkuMjcsODEuMDgsNzkuNSw5My4xMyw3OS41TDkzLjEzLDc5LjV6IE04LjA4LDAuMjVoOTUuMjhjMi4xNywwLDQuMTEsMC44OSw1LjUzLDIuM2MxLjQyLDEuNDIsMi4zLDMuMzksMi4zLDUuNTN2NzAuMDEgYy0yLjQ2LTEuOTEtNS4yNC0zLjQ0LTguMjUtNC40OFY5Ljk4YzAtMC40My0wLjE2LTAuNzktMC40Ni0xLjA1Yy0wLjI2LTAuMjYtMC42Ni0wLjQ2LTEuMDUtMC40Nkg5Ljk0IGMtMC40MywwLTAuNzksMC4xNi0xLjA1LDAuNDZDOC42Myw5LjE5LDguNDMsOS41OCw4LjQzLDkuOTh2NzAuMDJoMC4wM2wzMS45Ny0zMC42MWMxLjI4LTEuMTgsMy4yOS0xLjA1LDQuNDQsMC4yMyBjMC4wMywwLjAzLDAuMDMsMC4wNywwLjA3LDAuMDdsMjYuODgsMzEuOGMtNC43Myw1LjE4LTcuNjIsMTIuMDgtNy42MiwxOS42NWMwLDMuMjksMC41NSw2LjQ1LDEuNTUsOS40SDguMDggYy0yLjE3LDAtNC4xMS0wLjg5LTUuNTMtMi4zcy0yLjMtMy4zOS0yLjMtNS41M1Y4LjA4YzAtMi4xNywwLjg5LTQuMTEsMi4zLTUuNTNTNS45NCwwLjI1LDguMDgsMC4yNUw4LjA4LDAuMjV6IE03My45OCw3OS4zNSBsMy43MS0yMi43OWMwLjMtMS43MSwxLjkxLTIuOSwzLjYyLTIuNmMwLjY2LDAuMSwxLjI1LDAuNDMsMS43MSwwLjg2bDE3LjEsMTcuOTdjLTIuMTgtMC41Mi00LjQ0LTAuNzktNi43OC0wLjc5IEM4NS45MSw3MS45OSw3OS4xMyw3NC43Nyw3My45OCw3OS4zNUw3My45OCw3OS4zNXogTTgxLjk4LDE4LjE5YzMuMTMsMCw1Ljk5LDEuMjgsOC4wMywzLjMyYzIuMDcsMi4wNywzLjMyLDQuOSwzLjMyLDguMDMgYzAsMy4xMy0xLjI4LDUuOTktMy4zMiw4LjAzYy0yLjA3LDIuMDctNC45LDMuMzItOC4wMywzLjMyYy0zLjEzLDAtNS45OS0xLjI4LTguMDMtMy4zMmMtMi4wNy0yLjA3LTMuMzItNC45LTMuMzItOC4wMyBjMC0zLjEzLDEuMjgtNS45OSwzLjMyLTguMDNDNzYuMDIsMTkuNDQsNzguODYsMTguMTksODEuOTgsMTguMTlMODEuOTgsMTguMTl6IE04NS44Miw4OC4wNWwxOS45NiwyMS42IGMxLjU4LTIuMzksMi41LTUuMjUsMi41LTguMzNjMC04LjM2LTYuNzgtMTUuMTQtMTUuMTQtMTUuMTRDOTAuNDgsODYuMTcsODcuOTksODYuODUsODUuODIsODguMDVMODUuODIsODguMDV6IE0xMDAuNDQsMTE0LjU4IGwtMTkuOTYtMjEuNmMtMS41OCwyLjM5LTIuNSw1LjI1LTIuNSw4LjMzYzAsOC4zNiw2Ljc4LDE1LjE0LDE1LjE0LDE1LjE0Qzk1Ljc4LDExNi40Niw5OC4yNywxMTUuNzgsMTAwLjQ0LDExNC41OEwxMDAuNDQsMTE0LjU4eiIvPjwvZz48L3N2Zz4='"
:alt="message.title || this.$t('message.preview_title_not_available')"
class="twc-link-preview-img"/>
</div>
<div class="twc-link-preview-right-column">
<p class="twc-link-preview-title">{{ message.title || this.$t('message.preview_title_not_available') }}</p>
<p class="twc-link-preview-description">{{ message.description ? (message.description.length > 144 ? message.description.substr(0, 144) + '...' : message.description) : this.$t('message.preview_description_not_available') }}</p>
<p class="twc-link-preview-domain">{{ (()=>{
var s = message.url, n = s.indexOf('://');
if (n !== -1) s = s.substring(n + 3);
n = s.indexOf('/');
return n === -1 ? s : s.substring(0, n);
})() }}</p>
</div>
</a>
</div>

<div class="twc-combo-message" v-if="message.type==='text'">
<div class="twc-text-message">
<p class="twc-text-message__text" v-html="message.text"></p>
Expand Down Expand Up @@ -242,6 +264,15 @@ export default {
},
},
computed: {
previewDomain(m) {
const s = m.url;
if (s) {
console.log('t URL', s);
s = s.toString();
if (s.indexOf('://') === -1) s = "http://" + s;
return new URL(s).hostname;
}
},
comboitems() {
return this.message.data.components;
},
Expand Down
100 changes: 86 additions & 14 deletions views/index.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Teneo Web Chat</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0 user-scalable=no">
<style>
body {
background: #E5F5FE;
}
</style>
</head>
<meta charset="UTF-8"/>
<title>Teneo Web Chat</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0 user-scalable=no">
<style>
<body>
<button onclick="TeneoWebChat.call('reset')">Reset Chat</button>
<br>
body {
background: #E5F5FE;
}
.centerimage {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px;
margin-left: -200px;
z-index: -10;
}
.btn {
margin-bottom: 5px;
}
@media (max-width: 500px) {
.centerimage {
opacity: 0.3;
transition-property: opacity;
transition-duration: 0.2s;
transition-timing-function: linear;
}
}
div.scroll {
width: 600px;
overflow-x: hidden;
text-align: justify;
}
</style>

<script src="teneo-web-chat.js"></script> <!-- needed for Heroku -->
<!--<% if(process.env.NODE_ENV === 'development') { %>-->


<!--<% } %>-->
<div id="teneo-web-chat"></div>

<script>
/* <![CDATA[ */
window.addEventListener('load', () => {
const element = document.getElementById('teneo-web-chat');
const teneoProps = {
'teneoEngineUrl': '<%= process.env.TENEO_ENGINE_URL %>',
Expand Down Expand Up @@ -54,22 +82,66 @@ window.addEventListener('load', () => {
};
<% if(process.env.NODE_ENV === 'development') { %>
//Keep last input on up arrow for rapid testing
/*
TeneoWebChat.on('input_submitted', (payload) => {
window.sessionStorage.setItem('lastSentPhrase', payload.text);
})
});
document.addEventListener('keydown', function(e){
if(e.code === 'ArrowUp') {
let inputField = document.getElementById('twc-user-input-field');
inputField.value = window.sessionStorage.getItem('lastSentPhrase')
}
});
*/
<% } %>
window.TeneoWebChat.initialize(element, teneoProps);
});
/* ]]> */
</script>
</head>

<body>
<button onclick="TeneoWebChat.call('reset')">Reset Chat</button>

<!--
<br/>
<h3>Messages</h3>
<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageAgent)">Message from agent</button><br>
<h3>Messages with avatar</h3>
<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageUserAvatar)">Message from user</button><br>
<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageBotAvatar)">Message from bot</button><br>
<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageAgentAvatar)">Message from agent</button><br>
<h3>Messages with avatar and dateline</h3>
<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageUserAvatarDateline)">Message from user</button><br>
<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageBotAvatarDateline)">Message from bot</button><br>
<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageAgentAvatarDateline)">Message from agent</button><br>
<h3>Typing indicators</h3>
<button class="btn" onclick="TeneoWebChat.call('show_typing_indicator',typingIndicatorAgent)">Show agent typing indicator</button><br>
<button class="btn" onclick="TeneoWebChat.call('show_typing_indicator',typingIndicatorBot)">Show bot typing indicator</button><br>
<button class="btn" onclick="TeneoWebChat.call('show_typing_indicator',typingIndicatorUser)">Show user typing indicator</button><br>
<button class="btn" onclick="TeneoWebChat.call('hide_typing_indicator',{'author': 'agent'})">Hide agent typing indicator</button><br>
<button class="btn" onclick="TeneoWebChat.call('hide_typing_indicator',{'author': 'bot'})">Hide bot typing indicator</button><br>
<button class="btn" onclick="TeneoWebChat.call('hide_typing_indicator',{'author': 'user'})">Hide user typing indicator</button><br>
<h3>Other</h3>
<button class="btn" onclick="TeneoWebChat.call('disable_user_input')">Disable user input</button><br>
<button class="btn" onclick="TeneoWebChat.call('enable_user_input')">Enable user input</button><br>
<button class="btn" onclick="TeneoWebChat.call('maximize')">Maximize</button><br>
<button class="btn" onclick="TeneoWebChat.on('visibility_changed', function(){console.log('Bad button')})">Bad button!</button>
-->

<div class="scroll">
This is a Dummy Paragraph to test vertical and horizontal scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokruous maximus et blandit diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris non ex eget augue lobortis iaculis id a mauris. Sed auctor est quis lectus fringilla pharetra. Mauris efficitur nulla at augue porttitor laoreet. Duis pharetra lectus et fermentum commodo. Sed ullamcorper ante lectus, sit amet facilisis erat auctor quis. Mauris varius pharetra velit, in varius leo consequat sed. Aenean porta lorem non neque feugiat, nec ultrices est commodo. Ut vulputate quis neque sed tincidunt. Suspendisse in ligula accumsan, pharetra libero id, dignissim felis. Morbi scelerisque lacus sed ipsum faucibus suscipit. Vestibulum vitae efficitur nunc. Etiam ornare, risus nec dictum condimentum, ipsum tellus condimentum neque, vitae tempus velit tortor et magna. Vivamus egestas porta lacinia. Aenean interdum, dui ut maximus varius, massa ligula efficitur ex, eget cursus dui diam eget est.
Nam quis felis quis ipsum vulputate lobortis vel laoreet mauris. Sed vel nisi quam. Enean id vestibulum lacus, ac faucibus velit. Donec blandit eros dui, ac imperdiet leo convallis vel. Integer molestie purus in placerat varius. Morbi porta porta varius. Nam odio quam, porttitor quis scelerisque nec, sollicitudin a orci. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</div>

<div id="teneo-web-chat"></div>
</body>
</html>

0 comments on commit cf34578

Please sign in to comment.