Skip to content

Commit 128edcd

Browse files
Fr4nc3Fr4nc3
committed
api services implementation
1 parent 728649e commit 128edcd

25 files changed

+21958
-11247
lines changed

‎src/frontend_react/package-lock.json‎

Lines changed: 20575 additions & 10890 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/frontend_react/package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@fluentui/merge-styles": "^8.6.14",
7+
"@fluentui/react-components": "^9.64.0",
8+
"@fluentui/react-icons": "^2.0.300",
69
"@testing-library/dom": "^10.4.0",
710
"@testing-library/jest-dom": "^6.6.3",
811
"@testing-library/react": "^16.3.0",
@@ -11,9 +14,11 @@
1114
"@types/node": "^16.18.126",
1215
"@types/react": "^19.1.4",
1316
"@types/react-dom": "^19.1.5",
17+
"axios": "^1.9.0",
1418
"react": "^19.1.0",
1519
"react-dom": "^19.1.0",
16-
"react-scripts": "5.0.1",
20+
"react-router-dom": "^7.6.0",
21+
"react-scripts": "^3.0.1",
1722
"typescript": "^4.9.5",
1823
"web-vitals": "^2.1.4"
1924
},

‎src/frontend_react/src/App.css‎

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,55 @@
11
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
2+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
3+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
4+
-webkit-font-smoothing: antialiased;
5+
-moz-osx-font-smoothing: grayscale;
86
}
97

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
8+
/* Global styles */
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
background-color: #f9f9f9;
1413
}
1514

16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
15+
/* Utility classes */
16+
.text-center {
17+
text-align: center;
2518
}
2619

27-
.App-link {
28-
color: #61dafb;
20+
.pre-wrap {
21+
white-space: pre-wrap;
2922
}
3023

31-
@keyframes App-logo-spin {
24+
/* Animation */
25+
@keyframes fade-in {
3226
from {
33-
transform: rotate(0deg);
27+
opacity: 0;
3428
}
3529
to {
36-
transform: rotate(360deg);
30+
opacity: 1;
3731
}
3832
}
33+
34+
.fade-in {
35+
animation: fade-in 0.3s ease-in-out;
36+
}
37+
38+
/* Custom scrollbar */
39+
::-webkit-scrollbar {
40+
width: 8px;
41+
height: 8px;
42+
}
43+
44+
::-webkit-scrollbar-track {
45+
background: #f1f1f1;
46+
}
47+
48+
::-webkit-scrollbar-thumb {
49+
background: #d4d4d4;
50+
border-radius: 4px;
51+
}
52+
53+
::-webkit-scrollbar-thumb:hover {
54+
background: #b8b8b8;
55+
}

‎src/frontend_react/src/App.tsx‎

Lines changed: 142 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,150 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
1+
import React, { useState } from 'react';
32
import './App.css';
3+
import AppProvider from './components/AppProvider';
4+
import FluentPlanViewV8 from './components/FluentPlanViewV8';
5+
import {
6+
Stack,
7+
Text,
8+
PrimaryButton,
9+
TextField,
10+
IStackStyles,
11+
ITextStyles,
12+
Spinner,
13+
SpinnerSize,
14+
Card as FluentCard,
15+
ICardStyles,
16+
Label,
17+
DefaultButton,
18+
mergeStyles
19+
} from '@fluentui/react';
20+
21+
// Define styles
22+
const containerStyles: IStackStyles = {
23+
root: {
24+
maxWidth: '1200px',
25+
margin: '0 auto',
26+
padding: '20px',
27+
}
28+
};
29+
30+
const headerStyles: IStackStyles = {
31+
root: {
32+
marginBottom: '20px'
33+
}
34+
};
35+
36+
const cardStyles: ICardStyles = {
37+
root: {
38+
marginBottom: '20px',
39+
}
40+
};
41+
42+
const titleStyles: ITextStyles = {
43+
root: {
44+
fontSize: '28px',
45+
fontWeight: 600,
46+
marginBottom: '0',
47+
}
48+
};
49+
50+
const formStyles: IStackStyles = {
51+
root: {
52+
marginTop: '20px',
53+
marginBottom: '20px'
54+
}
55+
};
56+
57+
const instructionTextStyles: ITextStyles = {
58+
root: {
59+
marginBottom: '8px'
60+
}
61+
};
62+
63+
const cardTitleStyles: ITextStyles = {
64+
root: {
65+
fontSize: '20px',
66+
fontWeight: 600,
67+
marginBottom: '16px'
68+
}
69+
};
470

571
function App() {
72+
const [sessionId, setSessionId] = useState('');
73+
const [planId, setPlanId] = useState('');
74+
const [loading, setLoading] = useState(false);
75+
const [submitted, setSubmitted] = useState(false);
76+
77+
const handleSubmit = (e: React.FormEvent) => {
78+
e.preventDefault();
79+
if (sessionId && planId) {
80+
setLoading(true);
81+
// Simulate loading
82+
setTimeout(() => {
83+
setLoading(false);
84+
setSubmitted(true);
85+
}, 500);
86+
}
87+
};
88+
689
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.tsx</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
90+
<AppProvider>
91+
<Stack styles={containerStyles}>
92+
<Stack horizontal horizontalAlign="space-between" verticalAlign="center" styles={headerStyles}>
93+
<Text styles={titleStyles}>
94+
Multi-Agent Custom Automation Engine
95+
</Text>
96+
</Stack>
97+
98+
{!submitted ? (
99+
<>
100+
<FluentCard styles={cardStyles}>
101+
<Stack tokens={{ padding: 16 }}>
102+
<Text styles={cardTitleStyles}>Welcome to MACAE</Text>
103+
<Text styles={instructionTextStyles}>
104+
Enter your session ID and plan ID to view your plan and approve/reject steps.
105+
</Text>
106+
<Text styles={instructionTextStyles}>
107+
These IDs would typically be provided to you when a plan is created by the system.
108+
</Text>
109+
</Stack>
110+
</FluentCard>
111+
112+
<form onSubmit={handleSubmit}>
113+
<Stack styles={formStyles} tokens={{ childrenGap: 12 }}>
114+
<TextField
115+
label="Session ID"
116+
value={sessionId}
117+
onChange={(_, newValue) => setSessionId(newValue || '')}
118+
placeholder="Enter Session ID"
119+
required
120+
/>
121+
<TextField
122+
label="Plan ID"
123+
value={planId}
124+
onChange={(_, newValue) => setPlanId(newValue || '')}
125+
placeholder="Enter Plan ID"
126+
required
127+
/>
128+
<Stack horizontal tokens={{ childrenGap: 8 }}>
129+
<PrimaryButton
130+
type="submit"
131+
text={loading ? 'Loading...' : 'View Plan'}
132+
iconProps={{ iconName: loading ? undefined : 'Forward' }}
133+
disabled={loading || !sessionId || !planId}
134+
/>
135+
{loading && <Spinner size={SpinnerSize.small} />}
136+
</Stack>
137+
</Stack>
138+
</form>
139+
</>
140+
) : (
141+
<FluentPlanViewV8 sessionId={sessionId} planId={planId} />
142+
)}
143+
</Stack>
144+
</AppProvider>
23145
);
24146
}
25147

26148
export default App;
149+
150+
export default App;

‎src/frontend_react/src/api/agentMessageService.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { apiClient } from './apiClient';
2+
import { AgentMessage } from '../models';
3+
4+
/**
5+
* Service for interacting with agent messages
6+
*/
7+
export const agentMessageService = {
8+
/**
9+
* Get all agent messages for a specific session
10+
* @param sessionId The session ID
11+
* @returns Promise with an array of agent messages
12+
*/
13+
async getAgentMessages(sessionId: string): Promise<AgentMessage[]> {
14+
return apiClient.get<AgentMessage[]>(`/agent_messages/${sessionId}`);
15+
}
16+
};

0 commit comments

Comments
 (0)