Skip to content

Commit 8e710db

Browse files
author
Jicheng Lu
committed
add like message
1 parent b336fd0 commit 8e710db

File tree

8 files changed

+124
-52
lines changed

8 files changed

+124
-52
lines changed

‎src/lib/common/LiveChatEntry.svelte‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,20 @@
1010
1111
onMount(async () => {
1212
const agentSettings = await getSettingDetail("Agent");
13-
chatUrl = `${PUBLIC_LIVECHAT_HOST}chat/${agentSettings.hostAgentId}?isFrame=true`;
13+
chatUrl = `${PUBLIC_LIVECHAT_HOST}chat/${agentSettings.hostAgentId}`;
1414
});
1515
1616
// Handle event from iframe
1717
window.onmessage = async function(e) {
1818
if (e.data.action == 'close') {
19-
chatBotStore.set({
20-
showChatBox: false
21-
});
19+
chatBotStore.set({ showChatBox: false });
20+
} else if (e.data.action == 'open') {
21+
chatBotStore.set({ showChatBox: true });
2222
}
2323
};
2424
2525
function openChatBox() {
26-
chatBotStore.set({
27-
showChatBox: true
28-
});
26+
chatBotStore.set({ showChatBox: true });
2927
}
3028
</script>
3129

@@ -51,7 +49,6 @@
5149
src={chatUrl}
5250
width="0px"
5351
height="0px"
54-
class={`border border-2 rounded-3 m-3 float-end chat-iframe`}
5552
title="live chat"
5653
id={CHAT_FRAME_ID}
5754
/>

‎src/lib/common/ProfileDropdown.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import { PUBLIC_SERVICE_URL } from '$env/static/public';
88
import { _ } from 'svelte-i18n';
99
import { buildUrl } from '$lib/helpers/utils/common';
10+
import { ChatAction } from '$lib/helpers/enums';
1011
1112
/** @type {any} */
1213
export let user;
@@ -19,7 +20,7 @@
1920
const chatFrame = document.getElementById('chat-frame');
2021
if (chatFrame) {
2122
// @ts-ignore
22-
chatFrame.contentWindow.postMessage({ action: "logout" }, "*");
23+
chatFrame.contentWindow.postMessage({ action: ChatAction.Logout }, "*");
2324
}
2425
2526
goto('login');

‎src/lib/common/audio-player/AudioSpeaker.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,14 +84,14 @@
8484
<!-- svelte-ignore a11y-click-events-have-key-events -->
8585
<!-- svelte-ignore a11y-no-static-element-interactions -->
8686
<div
87-
class="{disableDefaultStyles ? '' : 'chat-speaker-container'} {containerClasses}"
87+
class="{disableDefaultStyles ? '' : 'chat-speaker-container'} line-align-center {containerClasses}"
8888
style={`${containerStyles}`}
8989
>
90-
<span style="display: inline-block;" on:click={() => speak()}>
90+
<div on:click={() => speak()}>
9191
{#if !speaking}
92-
<i class="bx bx-volume-full" />
92+
<i class="bx bx-volume-full clickable" />
9393
{:else}
9494
<Stretch unit='px' size='5' gap='5' color="var(--bs-primary)" />
9595
{/if}
96-
</span>
96+
</div>
9797
</div>

‎src/lib/helpers/enums.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,11 @@ const knowledgeDocSource = {
9898
User: 'user',
9999
Web: 'web'
100100
};
101-
export const KnowledgeDocSource = Object.freeze(knowledgeDocSource);
101+
export const KnowledgeDocSource = Object.freeze(knowledgeDocSource);
102+
103+
const chatAction = {
104+
Logout: 'logout',
105+
Chat: 'chat',
106+
NewChat: 'new-chat'
107+
};
108+
export const ChatAction = Object.freeze(chatAction);

‎src/lib/helpers/utils/chat.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
/**
2+
* @param {string} action
23
* @param {string} chatFrameId
3-
* @param {string} text
4+
* @param {string | null} text
45
* @param {import('$conversationTypes').MessageData | null} data
56
*/
6-
export function sendToChatBot(chatFrameId, text, data = null) {
7+
export function sendToChatBot(action, chatFrameId, text = null, data = null) {
78
const chatFrame = document.getElementById(chatFrameId);
8-
const content = { action: "chat", text: text, data: data };
9+
const content = { action: action, text: text, data: data };
910

1011
if (chatFrame) {
1112
// @ts-ignore

‎src/routes/chat/[agentId]/+page.svelte‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,23 +40,15 @@
4040
}
4141
4242
conversationId = conversation.id;
43-
let chatUrl = `chat/${agentId}/${conversationId}`;
44-
let query = "";
45-
43+
const chatUrl = new URL(`chat/${agentId}/${conversationId}`, window.location.origin);
44+
45+
const searchParams = new URLSearchParams();
4646
if (agentId === LERNER_ID) {
47-
query += `mode=${TRAINING_MODE}`;
48-
}
49-
50-
const isFrame = $page.url.searchParams.get('isFrame');
51-
if (isFrame === 'true') {
52-
query += "isFrame=true";
53-
}
54-
55-
if (!!query) {
56-
chatUrl = `${chatUrl}?${query}`;
47+
searchParams.append('mode', TRAINING_MODE);
5748
}
5849
59-
window.location.href = chatUrl;
50+
chatUrl.search = searchParams?.toString();
51+
window.location.href = chatUrl.toString();
6052
});
6153
</script>
6254

‎src/routes/chat/[agentId]/[conversationId]/chat-box.svelte‎

Lines changed: 91 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
import { utcToLocal } from '$lib/helpers/datetime';
4545
import { replaceNewLine } from '$lib/helpers/http';
4646
import { isAudio, isExcel, isPdf } from '$lib/helpers/utils/file';
47-
import { EditorType, FileSourceType, SenderAction, UserRole } from '$lib/helpers/enums';
47+
import { ChatAction, EditorType, FileSourceType, SenderAction, UserRole } from '$lib/helpers/enums';
4848
import RichContent from './rich-content/rich-content.svelte';
4949
import RcMessage from "./rich-content/rc-message.svelte";
5050
import RcDisclaimer from './rich-content/rc-disclaimer.svelte';
@@ -55,6 +55,7 @@
5555
import ChatBigMessage from './chat-util/chat-big-message.svelte';
5656
import PersistLog from './persist-log/persist-log.svelte';
5757
import InstantLog from './instant-log/instant-log.svelte';
58+
import Loader from '$lib/common/Loader.svelte';
5859
5960
6061
const options = {
@@ -151,6 +152,7 @@
151152
let disableAction = false;
152153
let loadChatUtils = false;
153154
let disableSpeech = false;
155+
let isLoading = false;
154156
155157
156158
$: {
@@ -192,19 +194,38 @@
192194
refresh();
193195
autoScrollLog = false;
194196
195-
window.addEventListener('message', e => {
196-
if (e.data.action === 'logout') {
197+
window.addEventListener('message', async e => {
198+
if (e.data.action === ChatAction.Logout) {
197199
resetLocalStorage(true);
200+
return;
198201
}
199202
200-
if (e.data.action === 'chat' && !isThinking && !isSendingMsg) {
201-
sendChatMessage(e.data.text, e.data.data || null);
203+
if (e.data.action === ChatAction.NewChat) {
204+
const conv = await createNewConversation();
205+
if (!!e.data.text && !isThinking && !isSendingMsg) {
206+
isLoading = true;
207+
sendChatMessage(e.data.text, e.data.data || null, conv.id).then(() => {
208+
redirectToNewConversation(conv);
209+
isLoading = false;
210+
openFrame();
211+
});
212+
}
213+
return;
214+
}
215+
216+
if (e.data.action === ChatAction.Chat && !!e.data.text && !isThinking && !isSendingMsg) {
217+
sendChatMessage(e.data.text, e.data.data || null).then(() => {
218+
openFrame();
219+
});
220+
return;
202221
}
203222
});
204-
205-
// window.parent.postMessage({ event: "chat-box-mounted" }, "*");
206223
});
207224
225+
function openFrame() {
226+
window.parent.postMessage({ action: "open" }, "*");
227+
}
228+
208229
function resizeChatWindow() {
209230
isLite = Viewport.Width <= screenWidthThreshold;
210231
if (!isLite) {
@@ -219,7 +240,7 @@
219240
}
220241
221242
function initChatView() {
222-
isFrame = $page.url.searchParams.get('isFrame') === 'true';
243+
isFrame = window.location != window.parent.location;
223244
mode = $page.url.searchParams.get('mode') || '';
224245
// initial condition
225246
isPersistLogClosed = false;
@@ -430,10 +451,22 @@
430451
}
431452
432453
async function handleNewConversation() {
454+
const conv = await createNewConversation();
455+
redirectToNewConversation(conv);
456+
}
457+
458+
async function createNewConversation() {
433459
const conversation = await newConversation(params.agentId);
434460
conversationStore.set(conversation);
435-
const url = `chat/${params.agentId}/${conversation.id}`;
436-
window.location.href = url;
461+
return conversation;
462+
}
463+
464+
/** @param {import('$conversationTypes').ConversationModel} conversation */
465+
function redirectToNewConversation(conversation) {
466+
const url = new URL(`chat/${params.agentId}/${conversation.id}`, window.location.origin);
467+
const searchParams = $page.url.searchParams;
468+
url.search = searchParams?.toString();
469+
window.location.href = url.toString();
437470
}
438471
439472
function handleSaveKnowledge() {
@@ -443,8 +476,9 @@
443476
/**
444477
* @param {string} msgText
445478
* @param {import('$conversationTypes').MessageData?} data
479+
* @param {string?} conversationId
446480
*/
447-
function sendChatMessage(msgText, data = null) {
481+
function sendChatMessage(msgText, data = null, conversationId = null) {
448482
isSendingMsg = true;
449483
autoScrollLog = true;
450484
clearInstantLogs();
@@ -471,7 +505,7 @@
471505
if (files?.length > 0 && !!!messageData.inputMessageId) {
472506
const filePayload = buildFilePayload(files);
473507
return new Promise((resolve, reject) => {
474-
uploadConversationFiles(params.agentId, params.conversationId, files).then(resMessageId => {
508+
uploadConversationFiles(params.agentId, conversationId || params.conversationId, files).then(resMessageId => {
475509
messageData = { ...messageData, inputMessageId: resMessageId };
476510
if (!!filePayload) {
477511
messageData = {
@@ -484,7 +518,7 @@
484518
};
485519
}
486520
487-
sendMessageToHub(params.agentId, params.conversationId, msgText, messageData).then(res => {
521+
sendMessageToHub(params.agentId, conversationId || params.conversationId, msgText, messageData).then(res => {
488522
resolve(res);
489523
}).catch(err => {
490524
reject(err);
@@ -510,7 +544,7 @@
510544
};
511545
}
512546
513-
sendMessageToHub(params.agentId, params.conversationId, msgText, messageData).then(res => {
547+
sendMessageToHub(params.agentId, conversationId || params.conversationId, msgText, messageData).then(res => {
514548
resolve(res);
515549
}).catch(err => {
516550
reject(err);
@@ -520,7 +554,7 @@
520554
});
521555
});
522556
} else {
523-
sendMessageToHub(params.agentId, params.conversationId, msgText, messageData).then(res => {
557+
sendMessageToHub(params.agentId, conversationId || params.conversationId, msgText, messageData).then(res => {
524558
resolve(res);
525559
}).catch(err => {
526560
reject(err);
@@ -1003,11 +1037,34 @@
10031037
bigText = '';
10041038
sendChatMessage(text);
10051039
}
1040+
1041+
/**
1042+
* @param {any} e
1043+
* @param {any} message
1044+
*/
1045+
function likeMessage(e, message) {
1046+
e.preventDefault();
1047+
1048+
const text = 'I like this message.';
1049+
const data = {
1050+
postback: {
1051+
functionName: 'like_response',
1052+
payload: 'I really like this message!',
1053+
parentId: message?.id
1054+
},
1055+
states: []
1056+
};
1057+
sendChatMessage(text, data);
1058+
}
10061059
</script>
10071060
10081061
10091062
<svelte:window on:resize={() => resizeChatWindow()}/>
10101063
1064+
{#if isLoading}
1065+
<Loader size={35} />
1066+
{/if}
1067+
10111068
<DialogModal
10121069
title={'Edit message'}
10131070
size={'md'}
@@ -1217,10 +1274,25 @@
12171274
<div class="msg-container">
12181275
<RcMessage message={message} />
12191276
{#if message?.message_id === lastBotMsg?.message_id}
1220-
<AudioSpeaker
1221-
id={message?.message_id}
1222-
text={message?.rich_content?.message?.text || message?.text}
1223-
/>
1277+
<div style="display: flex; gap: 10px;">
1278+
<AudioSpeaker
1279+
id={message?.message_id}
1280+
text={message?.rich_content?.message?.text || message?.text}
1281+
/>
1282+
<div class="line-align-center" style="font-size: 17px;">
1283+
<!-- svelte-ignore a11y-click-events-have-key-events -->
1284+
<!-- svelte-ignore a11y-no-static-element-interactions -->
1285+
<div
1286+
class="clickable"
1287+
style="height: 95%;"
1288+
on:click={e => likeMessage(e, message)}
1289+
>
1290+
<i
1291+
class="mdi mdi-thumb-up-outline text-primary"
1292+
/>
1293+
</div>
1294+
</div>
1295+
</div>
12241296
{/if}
12251297
{#if !!message.is_chat_message || !!message.has_message_files}
12261298
<MessageFileGallery

‎src/routes/page/plugin/plugin-list.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
import { installPlugin, removePlugin } from '$lib/services/plugin-service';
1111
import Swal from 'sweetalert2';
1212
import { sendToChatBot } from '$lib/helpers/utils/chat';
13-
1413
import { CHAT_FRAME_ID } from '$lib/helpers/constants';
14+
import { ChatAction } from '$lib/helpers/enums';
1515
1616
/** @type {import('$pluginTypes').PluginDefModel[]} */
1717
export let plugins;
@@ -59,7 +59,9 @@
5959
},
6060
states: []
6161
};
62-
sendToChatBot(CHAT_FRAME_ID, text, data);
62+
// ChatAction.Chat: send to current chat
63+
// ChatAction.NewChat: init a new conversation, and then send the message
64+
sendToChatBot(ChatAction.Chat, CHAT_FRAME_ID, text, data);
6365
}
6466
</script>
6567

0 commit comments

Comments
 (0)