Skip to content

Commit 8c8ce7d

Browse files
mohamadch91mohamadch91
committed
feat: move modal to main component
1 parent 3a54604 commit 8c8ce7d

File tree

2 files changed

+96
-89
lines changed

2 files changed

+96
-89
lines changed

‎services/webui/src/pages/AI/chat/AIChat.tsx‎

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,9 @@ import { dateTimeDisplay } from '../../../utilities/dateDisplay';
55
import KChatCard from '../../../components/AIComponents/ChatCard';
66
import KResponseCard from '../../../components/AIComponents/ResponseCard';
77
import KInput from '../../../components/AIComponents/Input'
8-
import { Button, Modal } from '@cloudscape-design/components';
9-
import Cal, { getCalApi } from '@calcom/embed-react'
10-
import { Flex } from '@tremor/react';
8+
119
function AIChat() {
1210
const [message, setMessage] = useState('')
13-
const [open,setOpen] = useState(false)
14-
const [openCal, setOpenCal] = useState(false)
1511

1612

1713
const [chats, setChats] = useState<ChatList>({
@@ -140,43 +136,7 @@ function AIChat() {
140136
}}
141137
/>
142138
</div>
143-
<Modal
144-
size="medium"
145-
visible={open}
146-
onDismiss={() => setOpen(false)}
147-
header="Not available"
148-
>
149-
<Flex className="flex-col gap-2">
150-
<span>
151-
{' '}
152-
This feature is only available on commercial version.
153-
</span>
154-
<Button
155-
onClick={() => {
156-
setOpenCal(true)
157-
}}
158-
>
159-
Contact us
160-
</Button>
161-
</Flex>
162-
</Modal>
163-
<Modal
164-
size="large"
165-
visible={openCal}
166-
onDismiss={() => setOpenCal(false)}
167-
header="Not available"
168-
>
169-
<Cal
170-
namespace="try-enterprise"
171-
calLink="team/clearcompass/try-enterprise"
172-
style={{
173-
width: '100%',
174-
height: '100%',
175-
overflow: 'scroll',
176-
}}
177-
config={{ layout: 'month_view' }}
178-
/>
179-
</Modal>
139+
180140
</>
181141
)
182142
}

‎services/webui/src/pages/AI/index.tsx‎

Lines changed: 94 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,62 +3,109 @@ import Agents from "../../components/AIComponents/Agents"
33
import AIChat from "./chat/AIChat"
44
import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline"
55
import { RiArrowLeftLine, RiArrowRightLine } from "@remixicon/react"
6-
6+
import { Button, Modal } from '@cloudscape-design/components';
7+
import Cal, { getCalApi } from '@calcom/embed-react'
8+
import { Flex } from '@tremor/react';
79

810
export default function AI() {
911
const [isOpen, setIsOpen] = useState(true)
1012
const is_ai_page = true
13+
const [open, setOpen] = useState(false)
14+
const [openCal, setOpenCal] = useState(false)
15+
16+
1117
return (
12-
<div className=" sm:px-12 px-2 w-full flex items-start justify-center flex-row overflow-x-hidden ">
13-
<div
14-
className={` rounded-xl border-slate-500 p-4 pt-8 bg-slate-200 dark:bg-gray-950 w-full max-w-[75rem] px-2 ${
15-
is_ai_page
16-
? ` grid grid-cols-12 border ${
17-
isOpen ? ' gap-12' : ' gap-1'
18-
}`
19-
: 'flex items-start justify-center flex-row'
20-
} max-h-[90vh] overflow-x-hidden `}
21-
>
22-
{is_ai_page && (
18+
<>
19+
<div className=" sm:px-12 px-2 w-full flex items-start justify-center flex-row overflow-x-hidden ">
20+
<div
21+
className={` rounded-xl border-slate-500 p-4 pt-8 bg-slate-200 dark:bg-gray-950 w-full max-w-[75rem] px-2 ${
22+
is_ai_page
23+
? ` grid grid-cols-12 border ${
24+
isOpen ? ' gap-12' : ' gap-1'
25+
}`
26+
: 'flex items-start justify-center flex-row'
27+
} max-h-[90vh] overflow-x-hidden `}
28+
>
29+
{is_ai_page && (
30+
<div
31+
className={`sm:inline-block hidden bg-slate-200 ${
32+
isOpen
33+
? 'col-span-4 border-r-2 border-slate-500'
34+
: 'col-span-1'
35+
} dark:bg-gray-950 w-full max-w-sm pr-2 h-full max-h-[75vh] overflow-hidden `}
36+
>
37+
<div className="w-full">
38+
{isOpen ? (
39+
<>
40+
<span
41+
className="text-slate-950 dark:text-slate-200 w-full justify-end flex pr-2 cursor-pointer"
42+
onClick={() => setIsOpen(false)}
43+
>
44+
<RiArrowLeftLine className="w-5" />
45+
</span>
46+
</>
47+
) : (
48+
<>
49+
<span
50+
className="text-slate-950 dark:text-slate-200 w-full justify-start flex pr-2 cursor-pointer"
51+
onClick={() => setIsOpen(true)}
52+
>
53+
<RiArrowRightLine className="w-5" />
54+
</span>
55+
</>
56+
)}
57+
</div>
58+
{isOpen && <Agents />}
59+
</div>
60+
)}
2361
<div
24-
className={`sm:inline-block hidden bg-slate-200 ${
25-
isOpen
26-
? 'col-span-4 border-r-2 border-slate-500'
27-
: 'col-span-1'
28-
} dark:bg-gray-950 w-full max-w-sm pr-2 h-full max-h-[75vh] overflow-hidden `}
62+
className={`w-full overflow-x-scroll relative max-h-[75vh] min-h-[75vh] ${
63+
is_ai_page &&
64+
`${isOpen ? 'col-span-8' : 'col-span-10'}`
65+
} `}
2966
>
30-
<div className="w-full">
31-
{isOpen ? (
32-
<>
33-
<span
34-
className="text-slate-950 dark:text-slate-200 w-full justify-end flex pr-2 cursor-pointer"
35-
onClick={() => setIsOpen(false)}
36-
>
37-
<RiArrowLeftLine className="w-5" />
38-
</span>
39-
</>
40-
) : (
41-
<>
42-
<span
43-
className="text-slate-950 dark:text-slate-200 w-full justify-start flex pr-2 cursor-pointer"
44-
onClick={() => setIsOpen(true)}
45-
>
46-
<RiArrowRightLine className="w-5" />
47-
</span>
48-
</>
49-
)}
50-
</div>
51-
{isOpen && <Agents />}
67+
<AIChat />
5268
</div>
53-
)}
54-
<div
55-
className={`w-full overflow-x-scroll relative max-h-[75vh] min-h-[75vh] ${
56-
is_ai_page && `${isOpen ? 'col-span-8' : 'col-span-10'}`
57-
} `}
58-
>
59-
<AIChat />
6069
</div>
6170
</div>
62-
</div>
71+
72+
<Modal
73+
size="medium"
74+
visible={open}
75+
onDismiss={() => setOpen(false)}
76+
header="Not available"
77+
>
78+
<Flex className="flex-col gap-2">
79+
<span>
80+
{' '}
81+
This feature is only available on commercial version.
82+
</span>
83+
<Button
84+
onClick={() => {
85+
setOpenCal(true)
86+
}}
87+
>
88+
Contact us
89+
</Button>
90+
</Flex>
91+
</Modal>
92+
<Modal
93+
size="large"
94+
visible={openCal}
95+
onDismiss={() => setOpenCal(false)}
96+
header="Not available"
97+
>
98+
<Cal
99+
namespace="try-enterprise"
100+
calLink="team/clearcompass/try-enterprise"
101+
style={{
102+
width: '100%',
103+
height: '100%',
104+
overflow: 'scroll',
105+
}}
106+
config={{ layout: 'month_view' }}
107+
/>
108+
</Modal>
109+
</>
63110
)
64111
}

0 commit comments

Comments
 (0)