Skip to content

Commit 8eae600

Browse files
HectruendoHectruendo
committed
first iteration on spliting the content of the widget if an iframe is provided
1 parent 5769c53 commit 8eae600

File tree

4 files changed

+50
-23
lines changed

4 files changed

+50
-23
lines changed

‎widget/components/Widget.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ const props = defineProps({
7575
initialConversationMetadata: String,
7676
stateOverride: String,
7777
customIFramedMsgs: String,
78+
splitScreenIframe: String,
7879
stickInputPrompt: Boolean,
7980
speechRecognition: Boolean,
8081
speechRecognitionLang: String,
@@ -188,6 +189,7 @@ function initStore() {
188189
store.userId = getUserId()
189190
}
190191
store.customIFramedMsgs = data.customIFramedMsgs
192+
store.splitScreenIframe = data.splitScreenIframe
191193
store.initialConversationMetadata = data.initialConversationMetadata
192194
store.stateOverride = data.stateOverride
193195

‎widget/components/chat/Chat.vue‎

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,36 @@
11
<template>
2-
<div class="chat-wrapper" :class="{ 'dark-mode': store.darkMode, 'fit-to-parent': store.fitToParent, 'stick-input-prompt': store.stickInputPrompt }" @click="store.menuOpened = false">
3-
<div class="conversation-content" ref="conversationContent" :class="{'dark-mode': store.darkMode, 'fit-to-parent-conversation-content': store.fitToParent}">
4-
<div class="stacks" :class="{'merge-to-prev': getFirstLayerMergeToPrev(message)}" v-for="(message, index) in store.messages">
5-
<ChatMsgManager
6-
v-if="isRenderableStackType(message)"
7-
:message="message"
8-
:key="message.stack_id"
9-
:is-last-of-type="isLastOfType(index)"
10-
:is-first="index === 0"
11-
:is-last="index === store.messages.length - 1"
12-
></ChatMsgManager>
2+
<div class="chat-wrapper" :class="{ 'dark-mode': store.darkMode, 'fit-to-parent': store.fitToParent, 'stick-input-prompt': store.stickInputPrompt, 'split-screen': store.splitScreenIframe}" @click="store.menuOpened = false">
3+
<div class="right-content">
4+
<div class="conversation-content" ref="conversationContent" :class="{'dark-mode': store.darkMode, 'fit-to-parent-conversation-content': store.fitToParent}">
5+
<div class="stacks" :class="{'merge-to-prev': getFirstLayerMergeToPrev(message)}" v-for="(message, index) in store.messages">
6+
<ChatMsgManager
7+
v-if="isRenderableStackType(message)"
8+
:message="message"
9+
:key="message.stack_id"
10+
:is-last-of-type="isLastOfType(index)"
11+
:is-first="index === 0"
12+
:is-last="index === store.messages.length - 1"
13+
></ChatMsgManager>
14+
</div>
15+
<LoaderMsg v-if="store.waitingForResponse"></LoaderMsg>
1316
</div>
14-
<LoaderMsg v-if="store.waitingForResponse"></LoaderMsg>
15-
</div>
16-
<div class="alert-message" :class="{ 'fade-out': feedbackSentDisabled, 'dark-mode': store.darkMode }">
17-
{{ $t("feedbacksent") }}
17+
<div class="alert-message" :class="{ 'fade-out': feedbackSentDisabled, 'dark-mode': store.darkMode }">
18+
{{ $t("feedbacksent") }}
19+
</div>
20+
<div class="alert-message"
21+
:class="{ 'fade-out': !store.disconnected, 'dark-mode': store.darkMode, 'pulsating': store.disconnected }">
22+
{{ $t("connectingtoserver") }}
23+
</div>
24+
<ChatPrompt @send="(msg) => sendMessage(msg)"/>
1825
</div>
19-
<div class="alert-message"
20-
:class="{ 'fade-out': !store.disconnected, 'dark-mode': store.darkMode, 'pulsating': store.disconnected }">
21-
{{ $t("connectingtoserver") }}
26+
<div v-if="store.splitScreenIframe" class="split-screen-iframe-container">
27+
<iframe
28+
class="split-screen-iframe"
29+
:src="store.splitScreenIframe"
30+
frameborder="0"
31+
allowfullscreen
32+
></iframe>
2233
</div>
23-
<ChatPrompt @send="(msg) => sendMessage(msg)"/>
2434
</div>
2535
</template>
2636

@@ -236,8 +246,23 @@ function sendToGTM(msg) {
236246
width: 100%;
237247
display: flex;
238248
flex-direction: column;
239-
240249
background-color: $chatfaq-color-chat-background-light;
250+
&.split-screen {
251+
flex-direction: row;
252+
}
253+
.right-content {
254+
display: flex;
255+
flex-direction: column;
256+
justify-content: space-between;
257+
height: 100%;
258+
width: 100%;
259+
260+
}
261+
.split-screen-iframe-container {
262+
height: 100%;
263+
width: 100%;
264+
box-shadow: 0px 2px 18px 0px #0000001A;
265+
}
241266
242267
&.dark-mode {
243268
background-color: $chatfaq-color-chat-background-dark;
@@ -291,8 +316,6 @@ function sendToGTM(msg) {
291316
}
292317
293318
.conversation-content {
294-
height: 100%;
295-
width: 100%;
296319
overflow-x: hidden;
297320
298321
@include scroll-style();

‎widget/pages/index.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<template>
22
<client-only>
33
<Widget :chatfaqWs="chatfaqWS" :chatfaqApi="chatfaqAPI" :fsmDef="fsmDef" :title="title"
4-
:subtitle="subtitle" enable-logout :allow-attachments="true"
4+
:subtitle="subtitle" enable-logout :allow-attachments="true"
55
:hideSources="hideSources" :stateOverride="stateOverride" :widgetConfigId="widgetId"
6+
splitScreenIframe="http://localhost:3001/right-panel"
67
/>
78
</client-only>
89
</template>

‎widget/store/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const useGlobalStore = defineStore('globalStore', {
4141
initialConversationMetadata: {},
4242
stateOverride: undefined,
4343
customIFramedMsgs: {},
44+
splitScreenIframe: null,
4445
speechRecognition: false,
4546
speechRecognitionTranscribing: false,
4647
speechRecognitionAutoSend: false,

0 commit comments

Comments
 (0)