Skip to content

Commit 701f664

Browse files
kevinpiackevinpiac
committed
Update agent page
1 parent 004052b commit 701f664

File tree

6 files changed

+170
-10
lines changed

6 files changed

+170
-10
lines changed

‎console/src/lib/components/common/button/Button.svelte

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
99
type ButtonSize = "default" | "bigger";
1010
11-
export let type: "primary" | "secondary" = "primary";
11+
export let type: "primary" | "secondary" | "danger" = "primary";
1212
export let leftIcon: IconSource = undefined;
1313
export let rightIcon: IconSource = undefined;
1414
export let submit = false;
@@ -26,7 +26,8 @@
2626
primary:
2727
"bg-button-bg-primary text-button-label-primary border border-button-stroke-primary hover:bg-button-bg-primary/90",
2828
secondary:
29-
"bg-button-bg-secondary text-button-label-secondary border border-button-stroke-secondary hover:bg-button-bg-secondary/90"
29+
"bg-button-bg-secondary text-button-label-secondary border border-button-stroke-secondary hover:bg-button-bg-secondary/90",
30+
danger: "bg-button-bg-destructive text-button-label-destructive border border-button-stroke-destructive hover:bg-button-bg-destructive/90"
3031
};
3132
3233
const statusClassMap: Record<ButtonStatus, string> = {

‎console/src/routes/onboarding/new/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
import Card from "$lib/components/common/card/Card.svelte";
55
import Button from "$lib/components/common/button/Button.svelte";
66
import Input from "$lib/components/common/input/Input.svelte";
7-
import type { PageData } from "../../../../.svelte-kit/types/src/routes";
87
import { z as zod } from "zod";
8+
import type { PageData } from "$lib/types";
99
import { superForm } from "sveltekit-superforms/client";
1010
export let data: PageData;
1111

‎console/src/routes/project/agents/[agentId]/+page.server.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { z } from "zod";
2+
import type { Load } from "@sveltejs/kit";
3+
4+
import { superValidate } from "sveltekit-superforms/server";
5+
6+
const schema = z.object({
7+
name: z.string().email()
8+
});
9+
10+
export const load: Load = async (event) => {
11+
const form = await superValidate(schema);
12+
return {
13+
form: {
14+
name: "My super cool agent"
15+
}
16+
};
17+
};

‎console/src/routes/project/agents/[agentId]/+page.svelte

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<script lang="ts">
2+
import { Icon, DocumentDuplicate, CodeBracket } from "svelte-hero-icons";
3+
import TopCover from "$lib/components/common/top-cover/TopCover.svelte";
4+
import Typography from "$lib/components/common/typography/Typography.svelte";
5+
import Card from "$lib/components/common/card/Card.svelte";
6+
import Button from "$lib/components/common/button/Button.svelte";
7+
import Input from "$lib/components/common/input/Input.svelte";
8+
import type { PageData } from "$lib/types";
9+
import { z as zod } from "zod";
10+
import { superForm } from "sveltekit-superforms/client";
11+
import Spacer from "$lib/components/common/spacer/Spacer.svelte";
12+
export let data: PageData;
13+
14+
const { form, errors, validate } = superForm(data.form, {
15+
validators: zod.object({
16+
name: zod.string().min(3).max(20)
17+
}),
18+
validationMethod: "oninput"
19+
});
20+
21+
const handleValidation = async (e: Event) => {
22+
e.preventDefault();
23+
const res = await validate();
24+
25+
if (!res.valid) {
26+
errors.set(res.errors);
27+
return;
28+
}
29+
};
30+
</script>
31+
32+
<div>
33+
<TopCover>
34+
<section class="p-12 flex items-center gap-4">
35+
<span class="text-body-accent dark:text-body-accent-dark font-semibold text-2xl"
36+
>My super cool agent</span>
37+
<div
38+
class="bg-background-accent dark:bg-background-accent-dark flex items-center gap-2 border border-stroke-accent dark:border-stroke-accent-dark rounded-full py-1.5 px-5 text-body-base dark:text-body-base-dark text-sm antialiased">
39+
<Icon src={DocumentDuplicate} width="15" />
40+
Copy Agent ID
41+
</div>
42+
</section>
43+
</TopCover>
44+
<div class="w-full p-10 pb-32">
45+
<div class="max-w-6xl m-auto mt-10">
46+
<Card>
47+
<section class="p-10 antialiased min-h-[200px]">
48+
<Typography type="mainSectionTitle">Getting started</Typography>
49+
<Typography type="subTitle">Setup your project like a boss</Typography>
50+
</section>
51+
<section
52+
class="p-10 antialiased min-h-[200px] border-t border-stroke-base dark:border-stroke-base-dark">
53+
<div class="grid grid-cols-5 gap-10">
54+
<div class="col-span-2">
55+
<Typography type="sectionTitle">Integrate in your server</Typography>
56+
<Typography type="subTitle"
57+
>Our SDKs let you control your agent frontend with bidirectionnal
58+
streaming and even more features.</Typography>
59+
</div>
60+
<div class="col-span-3 grid grid-cols-2 gap-5">
61+
<div
62+
class="antialiased border rounded-xl py-7 px-7 border-stroke-base dark:border-stroke-base-dark flex items-center justify-center gap-3 text-body-base dark:text-body-base-dark hover:bg-background-accent dark:hover:bg-background-accent-dark cursor-pointer">
63+
<div
64+
class="rounded-full border border-stroke-base dark:border-stroke-base-dark p-3 bg-background-secondary dark:bg-background-secondary-dark">
65+
<Icon src={CodeBracket} width="20" class="text-body-subdued" />
66+
</div>
67+
<div>NodeJS SDK</div>
68+
</div>
69+
<div
70+
class="antialiased border rounded-xl py-7 px-7 border-stroke-base dark:border-stroke-base-dark flex items-center justify-center gap-3 text-body-base dark:text-body-base-dark hover:bg-background-accent dark:hover:bg-background-accent-dark cursor-pointer">
71+
<div
72+
class="rounded-full border border-stroke-base dark:border-stroke-base-dark p-3 bg-background-secondary dark:bg-background-secondary-dark">
73+
<Icon src={CodeBracket} width="20" class="text-body-subdued" />
74+
</div>
75+
<div>Python SDK</div>
76+
</div>
77+
</div>
78+
</div>
79+
</section>
80+
</Card>
81+
<Spacer size="md" />
82+
<Card>
83+
<section class="p-10 antialiased">
84+
<div class="grid grid-cols-5 gap-10">
85+
<div class="col-span-2">
86+
<Typography type="sectionTitle">Rename your agent</Typography>
87+
<Typography type="subTitle"
88+
>This will change the named displayed on your UI interface.</Typography>
89+
</div>
90+
<div class="col-span-3 gap-5">
91+
<form on:submit={handleValidation}>
92+
<Input
93+
bind:value={$form.name}
94+
label="Agent name"
95+
required
96+
name="name"
97+
errors={$errors?.name}
98+
type="text"
99+
placeholder="Project name" />
100+
</form>
101+
</div>
102+
</div>
103+
</section>
104+
<Spacer size="md" />
105+
<section
106+
class="px-10 py-5 antialiased border-t border-stroke-base dark:border-stroke-base-dark flex justify-end">
107+
<div>
108+
<Button
109+
disabled={!$form.name || !!$errors?.name}
110+
submit
111+
type="primary"
112+
center>Update</Button>
113+
</div>
114+
</section>
115+
</Card>
116+
<Spacer size="md" />
117+
<Card>
118+
<section class="p-10 antialiased">
119+
<div class="flex flex-col gap-3">
120+
<Typography type="sectionTitle">Danger zone</Typography>
121+
<div
122+
class="border-l-2 border-stroke-warning dark:border-stroke-warning-dark p-5 bg-background-warning dark:bg-background-warning-dark text-body-warning dark:text-body-warning-dark text-sm">
123+
Removing an agent will instantly make it unavailable for all your users
124+
and result in losing all data and events related to this agent. We
125+
assume you know what you are doing.
126+
</div>
127+
</div>
128+
</section>
129+
<Spacer size="md" />
130+
<section
131+
class="px-10 py-5 antialiased border-t border-stroke-base dark:border-stroke-base-dark flex justify-end">
132+
<div>
133+
<Button
134+
disabled={!$form.name || !!$errors?.name}
135+
submit
136+
type="danger"
137+
center>Delete forever</Button>
138+
</div>
139+
</section>
140+
</Card>
141+
</div>
142+
</div>
143+
</div>

‎console/src/routes/project/overview/+page.svelte

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,7 @@
4141
</TopCover>
4242
<div class="w-full p-10 pb-32">
4343
<div class="max-w-6xl m-auto mt-10">
44-
<div
45-
class="w-full rounded-2xl border border-stroke-base dark:border-stroke-base-dark bg-background-tertiary dark:bg-background-tertiary-dark">
44+
<Card>
4645
<section class="p-10 antialiased min-h-[200px]">
4746
<Typography type="mainSectionTitle">Getting started</Typography>
4847
<Typography type="subTitle">Setup your project like a boss</Typography>
@@ -76,7 +75,7 @@
7675
</div>
7776
</div>
7877
</section>
79-
</div>
78+
</Card>
8079

8180
<Spacer size="lg" />
8281

‎console/tailwind.config.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default {
1919
"background-accent": "#F2F2F8",
2020
"background-success": "#00C48C",
2121
"background-error": "#ef434b",
22-
"background-warning": "#FFC82C",
22+
"background-warning": "#fff6e0",
2323
"background-info": "#272A3A",
2424

2525
// Colors for background in all situations
@@ -30,7 +30,7 @@ export default {
3030
"background-accent-dark": "#272A3A",
3131
"background-success-dark": "#00C48C",
3232
"background-error-dark": "#ef434b",
33-
"background-warning-dark": "#FFC82C",
33+
"background-warning-dark": "#342e17",
3434
"background-info-dark": "#272A3A",
3535

3636
// Colors for text elements
@@ -40,7 +40,7 @@ export default {
4040
"body-accent": "#383C4E",
4141
"body-info": "#FAFAFF",
4242
"body-error": "#DB1A5B",
43-
"body-warning": "#F58801",
43+
"body-warning": "#5d5440",
4444
"body-success": "#00C48C",
4545

4646
// Colors for text elements
@@ -50,7 +50,7 @@ export default {
5050
"body-accent-dark": "#F2F2F8",
5151
"body-info-dark": "#FAFAFF",
5252
"body-error-dark": "#DB1A5B",
53-
"body-warning-dark": "#F58801",
53+
"body-warning-dark": "#d9d6c9",
5454
"body-success-dark": "#00C48C",
5555

5656
// Colors for borders

0 commit comments

Comments
 (0)