Skip to content

Commit 3f2137b

Browse files
IlyaBondarIlyaBondar
committed
feat(overlay-sandbox): improve UI navigation (Issue #3072)
1 parent 5221cf7 commit 3f2137b

File tree

5 files changed

+52
-113
lines changed

5 files changed

+52
-113
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Link from 'next/link';
2+
3+
export function BackToButton() {
4+
return (
5+
<Link
6+
href="/"
7+
className="w-[300px] rounded bg-gray-200 p-2 text-center hover:bg-gray-400"
8+
>
9+
Back to select Overlay mode
10+
</Link>
11+
);
12+
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
'use client';
22

3+
import React, { useCallback, useEffect, useRef, useState } from 'react';
4+
5+
import { BackToButton } from './backToSelectOverlayMode';
6+
37
import {
48
ChatOverlayManager,
59
ChatOverlayManagerOptions,
610
} from '@epam/ai-dial-overlay';
7-
import React, { useCallback, useEffect, useRef, useState } from 'react';
811

912
interface ChatOverlayManagerWrapperProps {
1013
overlayManagerOptions: Omit<ChatOverlayManagerOptions, 'hostDomain'>;
@@ -70,6 +73,7 @@ export const ChatOverlayManagerWrapper: React.FC<
7073
</dialog>
7174

7275
<div className="flex max-w-[300px] flex-col gap-2">
76+
<BackToButton />
7377
<details>
7478
<summary>Chat actions</summary>
7579

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
'use client';
22

3-
import { ChatOverlay, ChatOverlayOptions } from '@epam/ai-dial-overlay';
43
import React, { useCallback, useEffect, useRef, useState } from 'react';
54

5+
import { BackToButton } from './backToSelectOverlayMode';
6+
7+
import { ChatOverlay, ChatOverlayOptions } from '@epam/ai-dial-overlay';
8+
69
export const commonOverlayProps = {
710
domain: process.env.NEXT_PUBLIC_OVERLAY_HOST!,
811
requestTimeout: 20000,
@@ -97,6 +100,7 @@ export const ChatOverlayWrapper: React.FC<ChatOverlayWrapperProps> = ({
97100
></div>
98101

99102
<div className="flex max-w-[300px] flex-col gap-2">
103+
<BackToButton />
100104
<details>
101105
<summary>Chat actions</summary>
102106

‎apps/overlay-sandbox/app/global.css

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,3 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4-
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;
14-
}
15-
}

‎apps/overlay-sandbox/app/page.tsx

Lines changed: 30 additions & 99 deletions
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">
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 className="w-[380px] rounded bg-gray-200 p-2 text-center hover:bg-gray-400">
31+
<Link href={url}>{label}</Link>
32+
</li>
33+
))}
34+
</ul>
10435
</div>
10536
);
10637
}

0 commit comments

Comments
 (0)