Skip to content

Commit 004052b

Browse files
kevinpiackevinpiac
committed
Agent list
1 parent be14884 commit 004052b

File tree

11 files changed

+128
-68
lines changed

11 files changed

+128
-68
lines changed

‎console/src/lib/components/common/card/Card.svelte

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
1+
<script lang="ts">
2+
export let clickable = false;
3+
4+
const clickableClass = clickable ? "cursor-pointer hover:shadow-xl transition-shadow" : "";
5+
// import svelte event dispatcher and dispatch onclick event
6+
import { createEventDispatcher } from "svelte";
7+
const dispatch = createEventDispatcher();
8+
const handleClick = () => {
9+
if (clickable) {
10+
dispatch("click");
11+
}
12+
};
13+
</script>
14+
115
<div
2-
class="w-full rounded-2xl border border-stroke-base dark:border-stroke-base-dark bg-background-tertiary dark:bg-background-tertiary-dark">
16+
on:click={handleClick}
17+
class="{clickableClass} w-full rounded-2xl border border-stroke-base dark:border-stroke-base-dark bg-background-tertiary dark:bg-background-tertiary-dark">
318
<slot />
419
</div>

‎console/src/lib/components/common/spacer/Spacer.svelte

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script lang="ts">
2-
type Size = "sm" | "md";
2+
type Size = "sm" | "md" | "lg";
33
export let size: Size = "sm";
44
55
export const sizeClassMap: Record<Size, string> = {
66
sm: "my-5",
7-
md: "my-10"
7+
md: "my-10",
8+
lg: "my-20"
89
};
910
</script>
1011

‎console/src/lib/components/common/table/Table.svelte

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,11 @@
2222
<div
2323
class="py-5 px-6 grid grid-cols-5 w-full border-b border-stroke-base dark:border-stroke-base-dark hover:bg-background-accent dark:hover:bg-background-accent-dark cursor-pointer">
2424
{#each columns as column}
25-
<Typography type="body">{row[column.key]}</Typography>
25+
{#if typeof column.format === "function"}
26+
<Typography type="body">{column.format(row[column.key])}</Typography>
27+
{:else}
28+
<Typography type="body">{row[column.key]}</Typography>
29+
{/if}
2630
{/each}
2731
</div>
2832
{/each}

‎console/src/lib/components/common/table/types.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
export type TableColumn = {
1+
export type TableColumn<T> = {
22
name: string;
33
key: string;
4+
format?: (rowValue: T) => string;
45
};
56

6-
export type TableRow = Record<string, any>;
7+
export type TableRow<T> = Record<string, T>;

‎console/src/lib/components/common/typography/Typography.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
mainSectionTitle: "text-body-accent dark:text-body-accent-dark font-medium text-2xl",
1717
sectionTitle: "text-body-accent dark:text-body-accent-dark font-medium text-xl",
1818
subTitle: "text-sm text-body-base dark:text-body-base-dark",
19-
label: "text-body-subdued-dark dark:text-body-subdued-dark uppercase font-medium text-sm",
19+
label: "text-body-subdued dark:text-body-subdued-dark uppercase font-medium text-sm",
2020
body: "text-sm text-body-base dark:text-body-base-dark"
2121
};
2222

‎console/src/lib/entities/agent/agent.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export interface Agent {
2+
id: string;
3+
name: string;
4+
createdAt: Date;
5+
updatedAt: Date;
6+
}

‎console/src/lib/entities/user/user.ts

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,6 @@
1-
import dayjs from "dayjs";
2-
3-
export type InitUser = {
1+
export interface User {
42
id: string;
53
name: string;
64
email: string;
75
createdAt: Date;
8-
};
9-
10-
export class User {
11-
constructor(private data: InitUser) {}
12-
13-
get id(): string {
14-
return this.data.id;
15-
}
16-
17-
get name(): string {
18-
return this.data.name;
19-
}
20-
21-
get email(): string {
22-
return this.data.email;
23-
}
24-
25-
get createdAtForHuman(): string {
26-
return dayjs(this.data.createdAt).format("MMMM D, YYYY");
27-
}
286
}

‎console/src/routes/+page.svelte

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22
import LoadingFrame from "$lib/components/common/loading-frame/LoadingFrame.svelte";
33
import { onMount } from "svelte";
44
import { goto } from "$app/navigation";
5+
import { homeRoute } from "$lib/routes/routes";
6+
57
export const csr = true;
68
7-
onMount(() => {
9+
onMount(async () => {
810
console.log("GOTO MAIN");
9-
goto("/main");
11+
await goto(homeRoute.path());
1012
});
1113
</script>
1214

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

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,56 @@
44
import Spacer from "$lib/components/common/spacer/Spacer.svelte";
55
import Button from "$lib/components/common/button/Button.svelte";
66
import Table from "$lib/components/common/table/Table.svelte";
7-
8-
import { User } from "$lib/entities/user/user";
9-
7+
import type { User } from "$lib/entities/user/user";
108
import { PlusSmall } from "svelte-hero-icons";
9+
import dayjs from "dayjs";
10+
import type { TableColumn } from "$lib/components/common/table/types";
1111
1212
let searchValue = "";
1313
1414
let users = [
15-
new User({
15+
{
1616
id: "123456789",
1717
name: "John Doe",
1818
email: "john@doe.com",
1919
createdAt: new Date()
20-
}),
21-
new User({
20+
},
21+
{
2222
id: "123456789",
2323
name: "John Doe",
2424
email: "john@doe.com",
2525
createdAt: new Date()
26-
}),
27-
new User({
26+
},
27+
{
2828
id: "123456789",
2929
name: "John Doe",
3030
email: "john@doe.com",
3131
createdAt: new Date()
32-
})
32+
}
33+
];
34+
35+
const columns: TableColumn<User>[] = [
36+
{
37+
name: "Name",
38+
key: "name"
39+
},
40+
{
41+
name: "Email",
42+
key: "email"
43+
},
44+
{
45+
name: "Is Verified",
46+
key: "isVerified"
47+
},
48+
{
49+
name: "ID",
50+
key: "id"
51+
},
52+
{
53+
name: "Created at",
54+
key: "createdAt",
55+
format: (user: User) => dayjs(user.createdAt).format("MMMM D, YYYY")
56+
}
3357
];
3458
</script>
3559

@@ -66,31 +90,7 @@
6690
</div>
6791
<Spacer size="md" />
6892

69-
<Table
70-
totalCount={3}
71-
columns={[
72-
{
73-
name: "Name",
74-
key: "name"
75-
},
76-
{
77-
name: "Email",
78-
key: "email"
79-
},
80-
{
81-
name: "Is Verified",
82-
key: "isVerified"
83-
},
84-
{
85-
name: "ID",
86-
key: "id"
87-
},
88-
{
89-
name: "Created at",
90-
key: "createdAtForHuman"
91-
}
92-
]}
93-
rows={users} />
93+
<Table totalCount={3} columns={columns} rows={users} />
9494
</div>
9595
</div>
9696
</div>

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

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,29 @@
22
import { Icon, DocumentDuplicate, CodeBracket } from "svelte-hero-icons";
33
import TopCover from "$lib/components/common/top-cover/TopCover.svelte";
44
import Typography from "$lib/components/common/typography/Typography.svelte";
5+
import Spacer from "$lib/components/common/spacer/Spacer.svelte";
6+
import Card from "$lib/components/common/card/Card.svelte";
7+
import type { Agent } from "$lib/entities/agent/agent";
8+
import dayjs from "dayjs";
9+
10+
let agents: Agent[] = [
11+
{
12+
id: "my-agent",
13+
name: "My Demo Agent",
14+
createdAt: new Date(),
15+
updatedAt: new Date()
16+
},
17+
{
18+
id: "my-agent",
19+
name: "My Demo Agent",
20+
createdAt: new Date(),
21+
updatedAt: new Date()
22+
}
23+
];
24+
25+
const handleOpenAgent = (agent: Agent) => {
26+
console.log(agent);
27+
};
528
</script>
629

730
<div>
@@ -16,7 +39,7 @@
1639
</div>
1740
</section>
1841
</TopCover>
19-
<div class="w-full">
42+
<div class="w-full p-10 pb-32">
2043
<div class="max-w-6xl m-auto mt-10">
2144
<div
2245
class="w-full rounded-2xl border border-stroke-base dark:border-stroke-base-dark bg-background-tertiary dark:bg-background-tertiary-dark">
@@ -54,6 +77,35 @@
5477
</div>
5578
</section>
5679
</div>
80+
81+
<Spacer size="lg" />
82+
83+
<section class="antialiased">
84+
<Typography type="mainSectionTitle">Your AI Agents</Typography>
85+
<Typography type="subTitle"
86+
>Configure a AI agent so you can use it with your frontend.</Typography>
87+
</section>
88+
89+
<Spacer size="md" />
90+
91+
<div class="grid grid-cols-6 gap-4">
92+
{#each agents as agent}
93+
<div class="col-span-2">
94+
<Card clickable on:click={() => handleOpenAgent(agent)}>
95+
<div class="p-8 h-[160px] flex flex-col justify-between">
96+
<Typography type="sectionTitle">{agent.name}</Typography>
97+
<div>
98+
<Typography type="label">Created at</Typography>
99+
<Typography type="subTitle"
100+
>{dayjs(agent.createdAt).format(
101+
"MMMM D, YYYY"
102+
)}</Typography>
103+
</div>
104+
</div>
105+
</Card>
106+
</div>
107+
{/each}
108+
</div>
57109
</div>
58110
</div>
59111
</div>

‎frontend/src/routes/login/+page.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import Input from "$lib/components/common/input/Input.svelte";
44
import AuthProviderButton from "$lib/components/auth/button/AuthProviderButton.svelte";
55
import { z } from "zod";
6+
import { homeRoute } from "$lib/routes";
67
78
import { getContext } from "svelte";
89
import { goto } from "$app/navigation";
@@ -36,7 +37,7 @@
3637
} else {
3738
login("John Doe", "pass");
3839
console.log("goto!", $currentUser);
39-
await goto("/main");
40+
await goto(homeRoute.path());
4041
form.email.error = "";
4142
}
4243
isLoading = false;

0 commit comments

Comments
 (0)