Skip to content

Commit 3eb8c15

Browse files
mohamadch91mohamadch91
authored
Merge pull request #301 from opengovern/ui-changes
UI changes
2 parents 86e54ff + 58df1e1 commit 3eb8c15

File tree

7 files changed

+523
-289
lines changed

7 files changed

+523
-289
lines changed

‎services/webui/src/components/AIComponents/Agents/index.tsx‎

Lines changed: 67 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -8,118 +8,73 @@ import { Button, Modal } from '@cloudscape-design/components'
88
import Cal, { getCalApi } from '@calcom/embed-react'
99
import { Flex } from '@tremor/react'
1010
function Agents() {
11-
const [open,setOpen] = useState(false)
12-
const [openCal, setOpenCal] = useState(false)
13-
14-
const [agents, setAgents] = useState<Agent[]>([
15-
{
16-
name: 'Identity & Access',
17-
description:
18-
'Delivers information on user identities, access controls, and activity.',
19-
welcome_message:
20-
'Hi there! This is your Identity & Access Agent. I can help you with anything related to identity management and access tools. What can I assist you with today? For example, you can ask me things like:',
21-
sample_questions: [
22-
'Get me the list of users who have access to Azure Subscriptions.',
23-
'Get me all SPNs with expired passwords.',
24-
'Show me the access activity for user John Doe.',
25-
],
26-
id: 'identity_access',
27-
enabled: true,
28-
is_available: true,
29-
},
30-
{
31-
name: 'DevOps',
32-
description:
33-
'Provides data on secure code, deployment, and automation workflows.',
34-
welcome_message:
35-
'Hello! This is your DevOps Agent. I can provide insights into secure code, deployment, and automation workflows. How can I assist you today? For instance, you could ask me:',
36-
sample_questions: [
37-
'What are the latest secure code scan results?',
38-
'Show me the deployment status for the production environment.',
39-
'Provide a report on automated workflow execution times.',
40-
],
41-
id: 'devops',
42-
enabled: true,
43-
is_available: true,
44-
},
45-
46-
])
47-
const selected_agent = {
48-
id: 'identity_access',
49-
}
50-
const navigate = useNavigate()
51-
52-
53-
54-
return (
55-
<>
56-
<div className=" bg-slate-200 dark:bg-gray-950 h-full w-full max-w-sm justify-start items-start max-h-[90vh] flex flex-col gap-2 ">
57-
<div
58-
id="k-agent-bar"
59-
className="flex flex-col gap-2 max-h-[90vh] overflow-y-scroll mt-2 "
60-
>
61-
{agents?.map((agent) => {
62-
return (
63-
<div
64-
key={agent.id}
65-
onClick={() => {
66-
setOpen(true)
67-
}}
68-
className={`rounded-sm flex flex-col justify-start items-start gap-2 hover:dark:bg-gray-700 hover:bg-gray-400 cursor-pointer p-2 ${
69-
selected_agent?.id == agent.id &&
70-
' bg-slate-400 dark:bg-slate-800'
71-
}`}
72-
>
73-
<span className="text-base text-slate-950 dark:text-slate-200">
74-
{agent.name}
75-
</span>
76-
<span className="text-sm text-slate-500 dark:text-slate-400">
77-
{agent.description}
78-
</span>
79-
</div>
80-
)
81-
})}
82-
</div>
83-
</div>
84-
<Modal
85-
size="medium"
86-
visible={open}
87-
onDismiss={() => setOpen(false)}
88-
header="Not available"
89-
>
90-
<Flex className="flex-col gap-2">
91-
<span>
92-
{' '}
93-
This feature is only available on commercial version.
94-
</span>
95-
<Button
96-
onClick={() => {
97-
setOpenCal(true)
98-
}}
99-
>
100-
Contact us
101-
</Button>
102-
</Flex>
103-
</Modal>
104-
<Modal
105-
size="large"
106-
visible={openCal}
107-
onDismiss={() => setOpenCal(false)}
108-
header="Not available"
109-
>
110-
<Cal
111-
namespace="try-enterprise"
112-
calLink="team/clearcompass/try-enterprise"
113-
style={{
114-
width: '100%',
115-
height: '100%',
116-
overflow: 'scroll',
117-
}}
118-
config={{ layout: 'month_view' }}
119-
/>
120-
</Modal>
121-
</>
122-
)
11+
const [agents, setAgents] = useState<Agent[]>([
12+
{
13+
name: 'Identity & Access',
14+
description:
15+
'Delivers information on user identities, access controls, and activity.',
16+
welcome_message:
17+
'Hi there! This is your Identity & Access Agent. I can help you with anything related to identity management and access tools. What can I assist you with today? For example, you can ask me things like:',
18+
sample_questions: [
19+
'Get me the list of users who have access to Azure Subscriptions.',
20+
'Get me all SPNs with expired passwords.',
21+
'Show me the access activity for user John Doe.',
22+
],
23+
id: 'identity_access',
24+
enabled: true,
25+
is_available: true,
26+
},
27+
{
28+
name: 'DevOps',
29+
description:
30+
'Provides data on secure code, deployment, and automation workflows.',
31+
welcome_message:
32+
'Hello! This is your DevOps Agent. I can provide insights into secure code, deployment, and automation workflows. How can I assist you today? For instance, you could ask me:',
33+
sample_questions: [
34+
'What are the latest secure code scan results?',
35+
'Show me the deployment status for the production environment.',
36+
'Provide a report on automated workflow execution times.',
37+
],
38+
id: 'devops',
39+
enabled: true,
40+
is_available: true,
41+
},
42+
])
43+
44+
const [agent, setAgent] = useState<Agent | null>(localStorage.getItem('agent') ? JSON.parse(localStorage.getItem('agent') as string) : agents[0])
45+
return (
46+
<>
47+
<div className=" bg-slate-200 dark:bg-gray-950 h-full w-full max-w-sm justify-start items-start max-h-[90vh] flex flex-col gap-2 ">
48+
<div
49+
id="k-agent-bar"
50+
className="flex flex-col gap-2 max-h-[90vh] overflow-y-scroll mt-2 "
51+
>
52+
{agents?.map((Fagent) => {
53+
return (
54+
<div
55+
key={Fagent.id}
56+
onClick={() => {
57+
localStorage.setItem('agent', JSON.stringify(Fagent))
58+
window.location.reload()
59+
}}
60+
className={`rounded-sm flex flex-col justify-start items-start gap-2 hover:dark:bg-gray-700 hover:bg-gray-400 cursor-pointer p-2 ${
61+
agent?.id == Fagent.id &&
62+
' bg-slate-400 dark:bg-slate-800'
63+
}`}
64+
>
65+
<span className="text-base text-slate-950 dark:text-slate-200">
66+
{Fagent.name}
67+
</span>
68+
<span className="text-sm text-slate-500 dark:text-slate-400">
69+
{Fagent.description}
70+
</span>
71+
</div>
72+
)
73+
})}
74+
</div>
75+
</div>
76+
</>
77+
)
12378
}
12479

12580
export default Agents;

‎services/webui/src/components/AIComponents/ResponseCard/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const KResponseCard: FunctionComponent<any> = ({
5353

5454
const [loadingText, setText] = useState('Running sql query');
5555
const [showText, setShowText] = useState(' ');
56-
const animatedtText = useAnimatedText(showText, 3);
56+
const animatedtText = useAnimatedText(showText, 1);
5757
useEffect(() => {
5858
setShowText(text);
5959
}, [text]);
@@ -104,7 +104,7 @@ const KResponseCard: FunctionComponent<any> = ({
104104
) : (
105105
<>
106106
<span className="text-slate-800 dark:text-slate-200">
107-
{pre_loaded ? showText : useAnimatedText(showText, 2).text}
107+
{pre_loaded ? showText : useAnimatedText(showText, 3).text}
108108
</span>
109109
</>
110110
)}

‎services/webui/src/components/AIComponents/Table/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ export const getTable = (
6363
for (let i = 0; i < details.length; i += 1) {
6464
const row: any = {};
6565
for (let j = 0; j < columns.length; j += 1) {
66-
console.log(typeof details[i][j]);
6766
row[headerField?.at(j) || ''] =
6867
typeof details[i][j] == 'string'
6968
? // @ts-ignore

0 commit comments

Comments
 (0)