Skip to content

Commit f7b0f2b

Browse files
sinediedsinedied
committed
feat: implement design
1 parent c8a5cf1 commit f7b0f2b

File tree

4 files changed

+84
-52
lines changed

4 files changed

+84
-52
lines changed

‎packages/agent-webapp/index.html‎

Lines changed: 2 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -6,58 +6,7 @@
66
<meta name="description" content="Contoso Burgers AI Agent" />
77
<link rel="icon" type="image/png" href="/favicon.png" />
88
<title>Contoso Burgers AI Agent</title>
9-
<style>
10-
:root {
11-
--azc-primary: #de471d;
12-
--azc-bg: #eee;
13-
--azc-border-radius: 16px;
14-
}
15-
html,
16-
body {
17-
font-size: 16px;
18-
margin: 0;
19-
background: var(--azc-bg);
20-
display: flex;
21-
flex-direction: column;
22-
width: 100%;
23-
height: 100%;
24-
}
25-
nav {
26-
display: flex;
27-
flex: 0 1 auto;
28-
background: #333;
29-
color: #fff;
30-
padding: 16px;
31-
font-family:
32-
'Segoe UI',
33-
-apple-system,
34-
BlinkMacSystemFont,
35-
Roboto,
36-
'Helvetica Neue',
37-
sans-serif;
38-
font-size: 1.25rem;
39-
align-items: center;
40-
41-
& img {
42-
height: 32px;
43-
margin-right: 0.5em;
44-
}
45-
}
46-
main {
47-
container-type: size;
48-
flex: 1;
49-
position: relative;
50-
display: flex;
51-
}
52-
azc-chat {
53-
flex: 1;
54-
max-width: 1024px;
55-
margin: 0 auto;
56-
}
57-
.spacer {
58-
flex: 100 1 0;
59-
}
60-
</style>
9+
<link rel="stylesheet" href="/src/styles.css" />
6110
</head>
6211
<body>
6312
<nav>
@@ -74,6 +23,7 @@
7423
</main>
7524
<script type="module" src="/src/index.ts"></script>
7625
<script>
26+
// TODO: use userId from API
7727
// Generate a unique ID and store it in local storage
7828
const userId = localStorage.getItem('userId') || crypto.randomUUID();
7929
localStorage.setItem('userId', userId);

‎packages/agent-webapp/src/components/auth.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,16 @@ export class AuthComponent extends LitElement {
163163
${unsafeSVG(logoutSvg)}
164164
</button>`;
165165

166+
protected override updated(changedProperties: Map<string | number | symbol, unknown>) {
167+
super.updated(changedProperties);
168+
169+
if (this._userDetails) {
170+
this.classList.add('authenticated');
171+
} else {
172+
this.classList.remove('authenticated');
173+
}
174+
}
175+
166176
protected override render() {
167177
switch (this.type) {
168178
case 'status':

‎packages/agent-webapp/src/components/history.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,7 @@ export class HistoryComponent extends LitElement {
322322
box-shadow: 0 var(--space-xs) var(--space-xs) var(--panel-bg);
323323
}
324324
.chats-panel {
325+
position: relative;
325326
width: var(--panel-width);
326327
height: 100%;
327328
background: var(--panel-bg);

‎packages/agent-webapp/src/styles.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
:root {
2+
--azc-primary: #de471d;
3+
--azc-bg: #eee;
4+
--azc-border-radius: 16px;
5+
}
6+
7+
html,
8+
body {
9+
font-size: 16px;
10+
margin: 0;
11+
background: var(--azc-bg);
12+
display: flex;
13+
flex-direction: column;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
18+
nav {
19+
display: flex;
20+
flex: 0 1 auto;
21+
background: #333;
22+
color: #fff;
23+
padding: 16px;
24+
font-family:
25+
'Segoe UI',
26+
-apple-system,
27+
BlinkMacSystemFont,
28+
Roboto,
29+
'Helvetica Neue',
30+
sans-serif;
31+
font-size: 1.25rem;
32+
align-items: center;
33+
justify-content: space-between;
34+
35+
& img {
36+
height: 38px;
37+
margin-right: 0.5em;
38+
margin-top: -6px;
39+
margin-bottom: -6px;
40+
}
41+
}
42+
43+
main {
44+
flex: 1;
45+
display: flex;
46+
container-type: size;
47+
position: relative;
48+
49+
& > azc-auth {
50+
flex: auto;
51+
52+
&.authenticated {
53+
display: flex;
54+
}
55+
}
56+
}
57+
58+
.spacer {
59+
flex: 100 1 0;
60+
}
61+
62+
azc-chat {
63+
flex: 1;
64+
max-width: 1024px;
65+
margin: 0 auto;
66+
}
67+
68+
azc-auth[type='status'] {
69+
font-size: 16px;
70+
}
71+

0 commit comments

Comments
 (0)