Skip to content

Commit 6b1e124

Browse files
artemdemoartemdemo
committed
Updated themes example and screenshots
1 parent 8ff1e6d commit 6b1e124

15 files changed

+250
-110
lines changed

‎demo/examle-embedded.html

-104
This file was deleted.

‎demo/example-embedded.html

+202
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Chat-UI | Example - Embedded</title>
6+
<script async src="../lib/chat-ui.js"></script>
7+
<link href="../lib/chat-ui.css" rel="stylesheet" media="all" />
8+
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/darkula.min.css">
10+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
11+
12+
<style>
13+
.input-container {
14+
width: 370px;
15+
border-radius: 5px;
16+
position: relative;
17+
box-shadow: 0 0 7px #DCDCDC;
18+
border: 1px solid #BFBFBF;
19+
}
20+
#chat {
21+
height: 500px;
22+
margin: 20px auto 0 auto;
23+
overflow: auto;
24+
}
25+
#input {
26+
padding: 5px;
27+
margin: 5px auto 0 auto;
28+
}
29+
#chat-ui-dialog {
30+
background: transparent;
31+
}
32+
.code-example {
33+
margin: 20px 0 20px 0;
34+
}
35+
.code-example__code {
36+
position: relative;
37+
}
38+
.code-example__code_short {
39+
max-height: 200px;
40+
overflow: hidden;
41+
}
42+
.code-example__code_short:after {
43+
position: absolute;
44+
content: '';
45+
height: 100px;
46+
width: 100%;
47+
bottom: 0;
48+
left: 0;
49+
background: linear-gradient(to bottom, rgba(43,43,43,0) 0%,rgb(0, 0, 0) 100%);
50+
}
51+
</style>
52+
53+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
54+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/javascript.min.js"></script>
55+
</head>
56+
<body>
57+
<div class="container">
58+
<h3>Embedded chat</h3>
59+
<div id="chat" class="input-container"></div>
60+
<div id="input" class="input-container">
61+
<form class="input-table">
62+
<div class="input-table__cell">
63+
<input type="text" class="input-table__input-field" placeholder="Enter your message">
64+
</div>
65+
<div class="input-table__cell">
66+
<button type="submit" class="input-table__send">Send</button>
67+
</div>
68+
</form>
69+
</div>
70+
</div>
71+
72+
<div class="container">
73+
<pre class="code-example">
74+
<code class="code-example__code code-example__code_short javascript">
75+
$(document).ready(function() {
76+
var phrases = [
77+
'Ok',
78+
'How can I help you?',
79+
'Nice weather today, don\'t you think?',
80+
'Do you want one of our representative will call you back?',
81+
'Do you like our product?',
82+
'Where have you heard about us?',
83+
'Glad you still use our products',
84+
'thank you for waiting',
85+
'Hello again!',
86+
':)',
87+
'^_^'
88+
];
89+
90+
var chat = ChatUI().render('#chat', 'dialog');
91+
92+
var chatIcon = document.getElementById('chat-icon');
93+
94+
chat.trigger('open-chat');
95+
96+
chat.trigger('add-phrase', 'Hello');
97+
98+
var timeoutId = null;
99+
var chatMessage = function(msg) {
100+
if (msg === 'close') {
101+
chat.trigger('close-chat');
102+
} else if (msg === 'clear') {
103+
chat.trigger('clear-dialog');
104+
} else if (!timeoutId) {
105+
var waitTime = Math.floor(Math.random() * 2000) + 600;
106+
setTimeout(function() {
107+
chat.trigger('is-typing');
108+
}, 500);
109+
timeoutId = setTimeout(function() {
110+
var phraseNumber = Math.floor(Math.random() * (phrases.length - 1));
111+
chat.trigger('add-phrase', phrases[phraseNumber]);
112+
timeoutId = null;
113+
}, waitTime);
114+
}
115+
};
116+
117+
chat.trigger('add-phrase', '<img src="./smile-hi.gif">');
118+
119+
chat.on('user-send-message', chatMessage);
120+
121+
chat.on('chat-closed', function(data) {
122+
console.log('chat-closed', data);
123+
chatIcon.style.display = 'block';
124+
});
125+
});
126+
</code>
127+
</pre>
128+
129+
<button type="button" class="btn btn-info show-full-code">
130+
Show full code
131+
</button>
132+
133+
</div>
134+
135+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
136+
<script>
137+
hljs.initHighlightingOnLoad();
138+
139+
$('.show-full-code').click(function() {
140+
$('.code-example__code').toggleClass('code-example__code_short')
141+
});
142+
143+
$(document).ready(function() {
144+
var phrases = [
145+
'Ok',
146+
'How can I help you?',
147+
'Nice weather today, don\'t you think?',
148+
'Do you want one of our representative will call you back?',
149+
'Do you like our product?',
150+
'Where have you heard about us?',
151+
'Glad you still use our products',
152+
'thank you for waiting',
153+
'Hello again!',
154+
':)',
155+
'^_^'
156+
];
157+
158+
var chat = ChatUI({
159+
title: 'John Doe',
160+
avatar: './john-doe.jpg',
161+
subtitle: 'consultant'
162+
}).render('#chat', 'dialog');
163+
164+
var chatIcon = document.getElementById('chat-icon');
165+
166+
chat.trigger('open-chat');
167+
168+
// chat.trigger('add-phrase', {side: 'chat', message:'Hello'});
169+
// chat.trigger('add-phrase', {message:'Hello'});
170+
chat.trigger('add-phrase', 'Hello');
171+
172+
var timeoutId = null;
173+
var chatMessage = function(msg) {
174+
if (msg === 'close') {
175+
chat.trigger('close-chat');
176+
} else if (msg === 'clear') {
177+
chat.trigger('clear-dialog');
178+
} else if (!timeoutId) {
179+
var waitTime = Math.floor(Math.random() * 2000) + 600;
180+
setTimeout(function() {
181+
chat.trigger('is-typing');
182+
}, 500);
183+
timeoutId = setTimeout(function() {
184+
var phraseNumber = Math.floor(Math.random() * (phrases.length - 1));
185+
chat.trigger('add-phrase', phrases[phraseNumber]);
186+
timeoutId = null;
187+
}, waitTime);
188+
}
189+
};
190+
191+
chat.trigger('add-phrase', '<img src="./smile-hi.gif">');
192+
193+
chat.on('user-send-message', chatMessage);
194+
195+
chat.on('chat-closed', function(data) {
196+
console.log('chat-closed', data);
197+
chatIcon.style.display = 'block';
198+
});
199+
});
200+
</script>
201+
</body>
202+
</html>

‎demo/example-themes.html

+36-4
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@
5252
background-color: #ffffff;
5353
border-radius: 8px;
5454
}
55+
.bubble-image {
56+
width: 100%;
57+
}
5558
</style>
5659

5760
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
@@ -97,9 +100,12 @@ <h3>Themes:</h3>
97100
subtitle: 'consultant'
98101
}).render('#chat');
99102

100-
var chatIcon = document.getElementById('chat-icon');
103+
var $chatIcon = $('#chat-icon');
101104

102-
chat.trigger('open-chat');
105+
$chatIcon.click(function() {
106+
chat.trigger('open-chat');
107+
$chatIcon.hide();
108+
});
103109

104110
// chat.trigger('add-phrase', {side: 'chat', message:'Hello'});
105111
// chat.trigger('add-phrase', {message:'Hello'});
@@ -109,6 +115,9 @@ <h3>Themes:</h3>
109115
var chatMessage = function(msg) {
110116
if (msg === 'close') {
111117
chat.trigger('close-chat');
118+
} else if (msg === 'image') {
119+
var imgNumber = Math.floor(Math.random() * 3) + 1;
120+
chat.trigger('add-phrase', '&lt;img class="bubble-image" src="./image-0' + imgNumber + '.jpg"&gt;');
112121
} else if (msg === 'clear') {
113122
chat.trigger('clear-dialog');
114123
} else if (!timeoutId) {
@@ -123,12 +132,23 @@ <h3>Themes:</h3>
123132
}, waitTime);
124133
}
125134
};
126-
chatMessage();
135+
136+
chat.trigger('add-phrase', '<img src="./smile-hi.gif">');
137+
chat.trigger('add-phrase', [
138+
'You can use different commands:',
139+
'&lt;ul&gt;',
140+
'&lt;li&gt;image&lt;/li&gt;',
141+
'&lt;li&gt;clear&lt;/li&gt;',
142+
'&lt;li&gt;close&lt;/li&gt;',
143+
'&lt;/ul&gt;',
144+
'Just type them in input below'
145+
].join(''));
146+
127147
chat.on('user-send-message', chatMessage);
128148

129149
chat.on('chat-closed', function(data) {
130150
console.log('chat-closed', data);
131-
chatIcon.style.display = 'block';
151+
$chatIcon.show();
132152
});
133153
});
134154
</code>
@@ -214,6 +234,9 @@ <h3>Themes:</h3>
214234
var chatMessage = function(msg) {
215235
if (msg === 'close') {
216236
chat.trigger('close-chat');
237+
} else if (msg === 'image') {
238+
var imgNumber = Math.floor(Math.random() * 3) + 1;
239+
chat.trigger('add-phrase', '<img class="bubble-image" src="./image-0' + imgNumber + '.jpg">');
217240
} else if (msg === 'clear') {
218241
chat.trigger('clear-dialog');
219242
} else if (!timeoutId) {
@@ -230,6 +253,15 @@ <h3>Themes:</h3>
230253
};
231254

232255
chat.trigger('add-phrase', '<img src="./smile-hi.gif">');
256+
chat.trigger('add-phrase', [
257+
'You can use different commands:',
258+
'<ul>',
259+
'<li>image</li>',
260+
'<li>clear</li>',
261+
'<li>close</li>',
262+
'</ul>',
263+
'Just type them in input below'
264+
].join(''));
233265

234266
chat.on('user-send-message', chatMessage);
235267

‎demo/image-01.jpg

211 KB
Loading

‎demo/image-02.jpg

79.8 KB
Loading

‎demo/image-03.jpg

267 KB
Loading

‎img/chat-basic.png

44.4 KB
Loading

‎img/chat-dark-star.png

67.6 KB
Loading

‎img/chat-green-leaf.png

41.5 KB
Loading

‎img/chat-screens.png

-97.8 KB
Binary file not shown.

‎img/chat-themes.png

202 KB
Loading

‎img/chat-white-bill.png

45.1 KB
Loading

0 commit comments

Comments
 (0)