Skip to content

Commit 1bd4666

Browse files
IlyaBondarIlyaBondar
authored
feat(overlay-sandbox): improve UI navigation in Overlay Sandbox (Issue #3072) (#3076)
1 parent 5221cf7 commit 1bd4666

File tree

6 files changed

+83
-129
lines changed

6 files changed

+83
-129
lines changed

Diff for: ‎apps/overlay-sandbox/app/cases/components/backToSelectOverlayMode.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Link from 'next/link';
2+
3+
export function BackToButton() {
4+
return (
5+
<Link href="/" className="button w-[300px]">
6+
Back to select Overlay mode
7+
</Link>
8+
);
9+
}

Diff for: ‎apps/overlay-sandbox/app/cases/components/chatOverlayManagerWrapper.tsx

+22-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
'use client';
22

3+
import { BackToButton } from './backToSelectOverlayMode';
4+
35
import {
46
ChatOverlayManager,
57
ChatOverlayManagerOptions,
@@ -16,6 +18,7 @@ export const ChatOverlayManagerWrapper: React.FC<
1618
const overlayManager = useRef<ChatOverlayManager | null>(null);
1719
const dialogRef = useRef<HTMLDialogElement | null>(null);
1820
const [dialogInfo, setDialogInfo] = useState('');
21+
const [created, setCreated] = useState(false);
1922
const [conversationIdInputValue, setConversationIdInputValue] = useState('');
2023

2124
const handleDisplayInformation = useCallback((textToShow: string) => {
@@ -31,9 +34,18 @@ export const ChatOverlayManagerWrapper: React.FC<
3134
...overlayManagerOptions,
3235
hostDomain: window.location.origin,
3336
});
37+
setCreated(true);
3438
}
3539
}, [overlayManagerOptions]);
3640

41+
useEffect(() => {
42+
return () => {
43+
if (overlayManager.current && created) {
44+
overlayManager.current?.removeOverlay(overlayManagerOptions.id);
45+
}
46+
};
47+
});
48+
3749
useEffect(() => {
3850
overlayManager.current?.subscribe(
3951
overlayManagerOptions.id,
@@ -59,7 +71,7 @@ export const ChatOverlayManagerWrapper: React.FC<
5971
<dialog ref={dialogRef} className="rounded p-5">
6072
<div className="flex justify-end">
6173
<button
62-
className="rounded bg-gray-200 p-2"
74+
className="button"
6375
autoFocus
6476
onClick={() => dialogRef.current?.close()}
6577
>
@@ -70,12 +82,13 @@ export const ChatOverlayManagerWrapper: React.FC<
7082
</dialog>
7183

7284
<div className="flex max-w-[300px] flex-col gap-2">
85+
<BackToButton />
7386
<details>
7487
<summary>Chat actions</summary>
7588

7689
<div className="flex flex-col gap-2">
7790
<button
78-
className="rounded bg-gray-200 p-2"
91+
className="button"
7992
onClick={() => {
8093
overlayManager.current?.sendMessage(
8194
overlayManagerOptions.id,
@@ -87,7 +100,7 @@ export const ChatOverlayManagerWrapper: React.FC<
87100
</button>
88101

89102
<button
90-
className="rounded bg-gray-200 p-2"
103+
className="button"
91104
onClick={() => {
92105
overlayManager.current?.setSystemPrompt(
93106
overlayManagerOptions.id,
@@ -99,7 +112,7 @@ export const ChatOverlayManagerWrapper: React.FC<
99112
</button>
100113

101114
<button
102-
className="rounded bg-gray-200 p-2"
115+
className="button"
103116
onClick={async () => {
104117
const messages = await overlayManager.current?.getMessages(
105118
overlayManagerOptions.id,
@@ -112,7 +125,7 @@ export const ChatOverlayManagerWrapper: React.FC<
112125
</button>
113126

114127
<button
115-
className="rounded bg-gray-200 p-2"
128+
className="button"
116129
onClick={async () => {
117130
const conversations =
118131
await overlayManager.current?.getConversations(
@@ -128,7 +141,7 @@ export const ChatOverlayManagerWrapper: React.FC<
128141
</button>
129142

130143
<button
131-
className="rounded bg-gray-200 p-2"
144+
className="button"
132145
onClick={async () => {
133146
const conversation =
134147
await overlayManager.current?.createConversation(
@@ -142,7 +155,7 @@ export const ChatOverlayManagerWrapper: React.FC<
142155
</button>
143156

144157
<button
145-
className="rounded bg-gray-200 p-2"
158+
className="button"
146159
onClick={async () => {
147160
const conversation =
148161
await overlayManager.current?.createConversation(
@@ -158,7 +171,7 @@ export const ChatOverlayManagerWrapper: React.FC<
158171

159172
<div className="flex flex-col gap-1 border p-1">
160173
<button
161-
className="rounded bg-gray-200 p-2"
174+
className="button"
162175
onClick={async () => {
163176
const conversation =
164177
await overlayManager.current?.selectConversation(
@@ -187,7 +200,7 @@ export const ChatOverlayManagerWrapper: React.FC<
187200

188201
<div>
189202
<button
190-
className="rounded bg-gray-200 p-2"
203+
className="button"
191204
onClick={() => {
192205
const newOptions = {
193206
...overlayManagerOptions,

Diff for: ‎apps/overlay-sandbox/app/cases/components/chatOverlayWrapper.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
'use client';
22

3+
import { BackToButton } from './backToSelectOverlayMode';
4+
35
import { ChatOverlay, ChatOverlayOptions } from '@epam/ai-dial-overlay';
46
import React, { useCallback, useEffect, useRef, useState } from 'react';
57

@@ -78,7 +80,7 @@ export const ChatOverlayWrapper: React.FC<ChatOverlayWrapperProps> = ({
7880
<dialog ref={dialogRef} className="rounded p-5">
7981
<div className="flex justify-end">
8082
<button
81-
className="rounded bg-gray-200 p-2"
83+
className="button"
8284
autoFocus
8385
onClick={() => dialogRef.current?.close()}
8486
>
@@ -97,12 +99,13 @@ export const ChatOverlayWrapper: React.FC<ChatOverlayWrapperProps> = ({
9799
></div>
98100

99101
<div className="flex max-w-[300px] flex-col gap-2">
102+
<BackToButton />
100103
<details>
101104
<summary>Chat actions</summary>
102105

103106
<div className="flex flex-col gap-2">
104107
<button
105-
className="rounded bg-gray-200 p-2"
108+
className="button"
106109
onClick={() => {
107110
overlay.current?.sendMessage('Hello');
108111
}}
@@ -111,7 +114,7 @@ export const ChatOverlayWrapper: React.FC<ChatOverlayWrapperProps> = ({
111114
</button>
112115

113116
<button
114-
className="rounded bg-gray-200 p-2"
117+
className="button"
115118
onClick={() => {
116119
overlay.current?.setSystemPrompt(
117120
'End each word with string "!?!?!"',
@@ -122,7 +125,7 @@ export const ChatOverlayWrapper: React.FC<ChatOverlayWrapperProps> = ({
122125
</button>
123126

124127
<button
125-
className="rounded bg-gray-200 p-2"
128+
className="button"
126129
onClick={async () => {
127130
const messages = await overlay.current?.getMessages();
128131

@@ -133,7 +136,7 @@ export const ChatOverlayWrapper: React.FC<ChatOverlayWrapperProps> = ({
133136
</button>
134137

135138
<button
136-
className="rounded bg-gray-200 p-2"
139+
className="button"
137140
onClick={async () => {
138141
const conversations = await overlay.current?.getConversations();
139142

@@ -146,7 +149,7 @@ export const ChatOverlayWrapper: React.FC<ChatOverlayWrapperProps> = ({
146149
</button>
147150

148151
<button
149-
className="rounded bg-gray-200 p-2"
152+
className="button"
150153
onClick={async () => {
151154
const conversation =
152155
await overlay.current?.createConversation();
@@ -158,7 +161,7 @@ export const ChatOverlayWrapper: React.FC<ChatOverlayWrapperProps> = ({
158161
</button>
159162

160163
<button
161-
className="rounded bg-gray-200 p-2"
164+
className="button"
162165
onClick={async () => {
163166
const conversation =
164167
await overlay.current?.createConversation(
@@ -172,10 +175,7 @@ export const ChatOverlayWrapper: React.FC<ChatOverlayWrapperProps> = ({
172175
</button>
173176

174177
<div className="flex flex-col gap-1 border p-1">
175-
<button
176-
className="rounded bg-gray-200 p-2"
177-
onClick={handleSelectConversation}
178-
>
178+
<button className="button" onClick={handleSelectConversation}>
179179
Select conversation by ID
180180
</button>
181181
<textarea
@@ -192,7 +192,7 @@ export const ChatOverlayWrapper: React.FC<ChatOverlayWrapperProps> = ({
192192

193193
<div>
194194
<button
195-
className="rounded bg-gray-200 p-2"
195+
className="button"
196196
onClick={() => {
197197
const newOptions = {
198198
...overlayOptions,

Diff for: ‎apps/overlay-sandbox/app/cases/overlay-manager/page.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { ChatOverlayManagerOptions, Feature } from '@epam/ai-dial-overlay';
66
const overlayOptions: Omit<ChatOverlayManagerOptions, 'hostDomain'> = {
77
id: 'test',
88
...commonOverlayProps,
9+
domain: process.env.NEXT_PUBLIC_OVERLAY_HOST!,
910
theme: 'light',
1011
modelId: 'gpt-4',
1112
enabledFeatures: [

Diff for: ‎apps/overlay-sandbox/app/global.css

+9-9
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
.link-container {
6-
display: flex;
7-
flex-wrap: wrap;
8-
gap: 1rem;
9-
}
10-
11-
@media (max-width: 768px) {
12-
.link-container {
13-
flex-direction: column;
5+
@layer components {
6+
.button {
7+
@apply rounded border border-gray-800 bg-gray-300 p-2 text-center hover:border-gray-600 hover:bg-gray-200;
8+
}
9+
details {
10+
cursor: pointer;
11+
}
12+
textarea {
13+
padding: 5px 10px;
1414
}
1515
}

Diff for: ‎apps/overlay-sandbox/app/page.tsx

+30-99
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,37 @@
11
import Link from 'next/link';
22

3+
enum OverlayCases {
4+
modelIdSetSandboxOverlay = '/cases/overlay/model-id-set-sandbox',
5+
OverlayManager = '/cases/overlay-manager',
6+
disabledHeaderOverlay = '/cases/overlay/disabled-header-sandbox',
7+
enabledHeaderOverlay = '/cases/overlay/enabled-header-sandbox',
8+
enabledOnlyHeaderOverlay = '/cases/overlay/enabled-only-header-sandbox',
9+
enabledOnlyHeaderFooterOverlay = '/cases/overlay/enabled-only-header-footer-sandbox',
10+
enabledOnlyFooterLinksAttachmentsOverlay = '/cases/overlay/enabled-only-footer-links-attachments-sandbox',
11+
enabledOnlyHeaderConversationsSectionOverlay = '/cases/overlay/enabled-only-header-conversations-section-sandbox',
12+
disableTopChatInfoOverlay = '/cases/overlay/disabled-top-chat-info-sandbox',
13+
enableDisallowChangeAgentOverlay = '/cases/overlay/enabled-disallow-change-agent-sandbox',
14+
enableHideTopContextMenuOverlay = '/cases/overlay/enabled-hide-top-context-menu-sandbox',
15+
enableEmptyChatSettingsOverlay = '/cases/overlay/enabled-empty-chat-settings-sandbox',
16+
enableInputFilesOverlay = '/cases/overlay/enabled-input-files-sandbox',
17+
enableHideEmptyChangeAgentOverlay = '/cases/overlay/enabled-hide-empty-change-agent-sandbox',
18+
disableAllFeaturesOverlay = '/cases/overlay/disabled-all-features-sandbox',
19+
enableMarketplaceOverlay = '/cases/overlay/enabled-marketplace-sandbox',
20+
disableMarketplaceOverlay = '/cases/overlay/disabled-marketplace-sandbox',
21+
conversationIdSetOverlay = '/cases/overlay/overlay-conversation-id-set-sandbox',
22+
}
23+
324
export default async function Index() {
425
return (
5-
<div>
6-
<div className="link-container">
7-
<span>
8-
<Link href={'/cases/overlay/model-id-set-sandbox'}>
9-
modelIdSetSandboxOverlay
10-
</Link>
11-
</span>
12-
<span>
13-
<Link href={'/cases/overlay-manager'}>OverlayManager</Link>
14-
</span>
15-
<span>
16-
<Link href={'/cases/overlay/disabled-header-sandbox'}>
17-
disabledHeaderOverlay
18-
</Link>
19-
</span>
20-
<span>
21-
<Link href={'/cases/overlay/enabled-header-sandbox'}>
22-
enabledHeaderOverlay
23-
</Link>
24-
</span>
25-
<span>
26-
<Link href={'/cases/overlay/enabled-only-header-sandbox'}>
27-
enabledOnlyHeaderOverlay
28-
</Link>
29-
</span>
30-
<span>
31-
<Link href={'/cases/overlay/enabled-only-header-footer-sandbox'}>
32-
enabledOnlyHeaderFooterOverlay
33-
</Link>
34-
</span>
35-
<span>
36-
<Link
37-
href={
38-
'/cases/overlay/enabled-only-footer-links-attachments-sandbox'
39-
}
40-
>
41-
enabledOnlyFooterLinksAttachmentsOverlay
42-
</Link>
43-
</span>
44-
<span>
45-
<Link
46-
href={
47-
'/cases/overlay/enabled-only-header-conversations-section-sandbox'
48-
}
49-
>
50-
enabledOnlyHeaderConversationsSectionOverlay
51-
</Link>
52-
</span>
53-
<span>
54-
<Link href={'/cases/overlay/disabled-top-chat-info-sandbox'}>
55-
disableTopChatInfoOverlay
56-
</Link>
57-
</span>
58-
<span>
59-
<Link href={'/cases/overlay/enabled-disallow-change-agent-sandbox'}>
60-
enableDisallowChangeAgentOverlay
61-
</Link>
62-
</span>
63-
<span>
64-
<Link href={'/cases/overlay/enabled-hide-top-context-menu-sandbox'}>
65-
enableHideTopContextMenuOverlay
66-
</Link>
67-
</span>
68-
<span>
69-
<Link href={'/cases/overlay/enabled-empty-chat-settings-sandbox'}>
70-
enableEmptyChatSettingsOverlay
71-
</Link>
72-
</span>
73-
<span>
74-
<Link href={'/cases/overlay/enabled-input-files-sandbox'}>
75-
enableInputFilesOverlay
76-
</Link>
77-
</span>
78-
<span>
79-
<Link href={'/cases/overlay/enabled-hide-empty-change-agent-sandbox'}>
80-
enableHideEmptyChangeAgentOverlay
81-
</Link>
82-
</span>
83-
<span>
84-
<Link href={'/cases/overlay/disabled-all-features-sandbox'}>
85-
disableAllFeaturesOverlay
86-
</Link>
87-
</span>
88-
<span>
89-
<Link href={'/cases/overlay/enabled-marketplace-sandbox'}>
90-
enableMarketplaceOverlay
91-
</Link>
92-
</span>
93-
<span>
94-
<Link href={'/cases/overlay/disabled-marketplace-sandbox'}>
95-
disableMarketplaceOverlay
96-
</Link>
97-
</span>
98-
<span>
99-
<Link href={'/cases/overlay/overlay-conversation-id-set-sandbox'}>
100-
conversationIdSetOverlay
101-
</Link>
102-
</span>
103-
</div>
26+
<div className="flex flex-col gap-2 p-2">
27+
<div className="font-semibold">Select mode/case for Overlay:</div>
28+
<ul className="flex h-full flex-wrap gap-2">
29+
{Object.entries(OverlayCases).map(([label, url]) => (
30+
<li key={label} className="button w-[380px]">
31+
<Link href={url}>{label}</Link>
32+
</li>
33+
))}
34+
</ul>
10435
</div>
10536
);
10637
}

0 commit comments

Comments
 (0)