From 5290db2579cf8fcbe2961e558531ac67e6c70842 Mon Sep 17 00:00:00 2001
From: Robert <robert@hjortsholm.com>
Date: Mon, 19 Feb 2024 09:03:49 +0100
Subject: [PATCH] - Added create skill functionality

---
 functions/lib/api/skills/skill_router.py      |  2 +-
 website/src/lib/api.ts                        |  3 +-
 website/src/lib/services/repositories.ts      | 30 ++++++++++++-
 website/src/lib/services/workshop-service.ts  | 41 ++++++++++++++---
 .../workshop/tabs/skills-tab.svelte           | 36 +++++----------
 .../tabs/skills/create-skill-dialog.svelte    | 44 +++++++------------
 .../workshop/tabs/skills/editor.svelte        |  4 +-
 .../workshop/tabs/skills/skill-card.svelte    | 10 +++++
 8 files changed, 104 insertions(+), 66 deletions(-)

diff --git a/functions/lib/api/skills/skill_router.py b/functions/lib/api/skills/skill_router.py
index ca7fa8a..599e576 100644
--- a/functions/lib/api/skills/skill_router.py
+++ b/functions/lib/api/skills/skill_router.py
@@ -30,7 +30,7 @@ def list_skills(user: FirebaseUser = Depends(user_scope)) -> list[SavedSkillSpec
 def create_skill(skill: SkillSpecification, user: FirebaseUser = Depends(user_scope)) -> SavedSkillSpecification:
     print("Create skill: {0}".format(skill))
     skill.name = skill.name.strip()
-    document = db().collection(f"v1/public/users/{user.uid}/agents").document()
+    document = db().collection(f"v1/public/users/{user.uid}/skills").document()
     document.set(skill.model_dump())
     return SavedSkillSpecification(id=document.id, **skill.model_dump())
 
diff --git a/website/src/lib/api.ts b/website/src/lib/api.ts
index acf5e30..2a8e9d4 100644
--- a/website/src/lib/api.ts
+++ b/website/src/lib/api.ts
@@ -8,7 +8,7 @@ import {
     type RequestContext,
     type ResponseContext,
     server1,
-    SessionApi,
+    SessionApi, SkillsApi,
 } from 'api-client';
 import moment from "moment";
 
@@ -47,3 +47,4 @@ const config = createConfiguration(configurationParameters);
 export const agentApi = new AgentApi(config);
 export const authApi = new AuthApi(config);
 export const sessionApi = new SessionApi(config);
+export const skillsApi = new SkillsApi(config);
diff --git a/website/src/lib/services/repositories.ts b/website/src/lib/services/repositories.ts
index 6c98c8f..6f76e49 100644
--- a/website/src/lib/services/repositories.ts
+++ b/website/src/lib/services/repositories.ts
@@ -14,8 +14,8 @@ import {
     AgentSpecification,
     SavedAgentSpecification,
     SavedMessageModel,
-    SavedSessionSpecification,
-    SessionSpecification
+    SavedSessionSpecification, SavedSkillSpecification,
+    SessionSpecification, SkillSpecification
 } from "restClient";
 import type {User} from "firebase/auth";
 import {type Readable, type Writable, writable} from "svelte/store";
@@ -147,3 +147,29 @@ export class MessagesRepository extends Repository<SavedMessageModel, String> {
         return message;
     }
 }
+
+export class SkillRepository extends Repository<SavedSkillSpecification, SkillSpecification> {
+    readonly user: User;
+    readonly org: string;
+
+    constructor(user: User, org?: string) {
+        super();
+        this.user = user;
+        this.org = org ?? "public";
+    }
+
+    get collection(): string {
+        return `v1/${this.org}/users/${this.user.uid}/skills`;
+    }
+
+
+    factory(doc: DocumentData): SavedSkillSpecification {
+        const skill = new SavedSkillSpecification();
+        const data = doc.data();
+        skill.id = doc.id;
+        skill.name = data.name;
+        skill.requirements = data.requirements;
+        skill.code = data.code;
+        return skill;
+    }
+}
diff --git a/website/src/lib/services/workshop-service.ts b/website/src/lib/services/workshop-service.ts
index de2f744..d1b4876 100644
--- a/website/src/lib/services/workshop-service.ts
+++ b/website/src/lib/services/workshop-service.ts
@@ -1,8 +1,11 @@
 import {derived, get, readable, type Readable, type Writable, writable} from "svelte/store";
-import {type SavedAgentSpecification} from "api-client";
+import {type SavedAgentSpecification, SavedSkillSpecification, SkillSpecification} from "api-client";
 import {authenticatedState} from "$lib/firebase";
-import {AgentRepository} from "$lib/services/repositories";
+import {AgentRepository, SkillRepository} from "$lib/services/repositories";
 import type {ApiValue} from "$lib/services/util";
+import {toast} from "svelte-sonner";
+import type {User} from "firebase/auth";
+import {skillsApi} from "$lib/api";
 
 
 export enum WorkshopTab {
@@ -10,12 +13,36 @@ export enum WorkshopTab {
 }
 
 class WorkshopState {
+    private user: User;
     tabStore: Writable<WorkshopTab> = writable(WorkshopTab.AGENTS);
     agentsStore: Readable<ApiValue<SavedAgentSpecification[]>>;
+    skillsStore: Readable<ApiValue<SavedSkillSpecification[]>>;
 
 
-    constructor(agents: Readable<ApiValue<SavedAgentSpecification[]>>) {
+    constructor(user: User, agents: Readable<ApiValue<SavedAgentSpecification[]>>, skills: Readable<ApiValue<SavedSkillSpecification[]>>) {
+        this.user = user;
         this.agentsStore = agents;
+        this.skillsStore = skills
+    }
+
+
+    setTab(tab: WorkshopTab) {
+        this.tabStore.set(tab);
+    }
+
+
+   public async creteSkill(skill: SkillSpecification) {
+        console.log('create skill');
+        const promise = skillsApi.createSkillSkillsPost(skill);
+        toast.promise(
+            promise,
+            {
+                loading: "Creating skill...",
+                success: "Skill created!",
+                error: "Failed to create skill."
+            }
+        );
+        return await promise;
     }
 }
 
@@ -23,9 +50,11 @@ export const activeTab: Writable<WorkshopTab> = writable(WorkshopTab.AGENTS);
 // export const agentsStore: Writable<ApiValue<SavedAgentSpecification[]>> = writable({value: [], isLoaded: false});
 export const workshopStore: Readable<WorkshopState> = derived(
     authenticatedState, (user) => {
-        const repository = new AgentRepository(user);
-        return new WorkshopState(
-            derived(repository.streamList(), (agents) => ({value: agents, isLoaded: true}))
+        const agents = new AgentRepository(user);
+        const skills = new SkillRepository(user);
+        return new WorkshopState(user,
+            derived(agents.streamList(), (agents) => ({value: agents, isLoaded: true})),
+            derived(skills.streamList(), (skills) => ({value: skills, isLoaded: true}))
         );
     }
 );
diff --git a/website/src/routes/(dashboard)/workshop/tabs/skills-tab.svelte b/website/src/routes/(dashboard)/workshop/tabs/skills-tab.svelte
index d471471..86e883a 100644
--- a/website/src/routes/(dashboard)/workshop/tabs/skills-tab.svelte
+++ b/website/src/routes/(dashboard)/workshop/tabs/skills-tab.svelte
@@ -1,36 +1,22 @@
 <script lang="ts">
-    // import {agentsStore, refreshAgents, workshopStore} from "$lib/services/workshop-service";
     import CreateSkillCard from "./skills/create-skill-card.svelte";
-    import Editor from "./skills/editor.svelte";
-    // $: ({agentsStore} = $workshopStore);
-    // $: agents = $agentsStore;
+    import SkillCard from "./skills/skill-card.svelte";
+    import {workshopStore} from "$lib/services";
+
+    $: ({skillsStore} = $workshopStore);
+    $: skills = $skillsStore;
 
 </script>
 
 <h2 class="text-2xl font-semibold mb-2">Skills</h2>
 <!--{#if agents.isLoaded ?? true }-->
-    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <CreateSkillCard/>
-        <!--{#each agents.value as agent}-->
-        <!--    <AgentCard {agent}/>-->
-        <!--{/each}-->
-        <div class="w-[300px] h-[300px]">
-            <!--            <CodeMirror-->
-            <!--                    value={code}-->
-            <!--                    options={{-->
-            <!--                        mode: 'python',-->
-            <!--                        theme: 'vscode-dark',-->
-            <!--                        lineNumbers: true,-->
-            <!--                    }}-->
-            <!--            />-->
-            <Editor/>
-
-            <!--                    lang={python()}-->
-            <!--                    theme={vscodeDark}-->
-            <!--                    class="h-[10rem] w-[20rem]"-->
-        </div>
+<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+    <CreateSkillCard/>
+    {#each skills.value as skill}
+        <SkillCard {skill}/>
+    {/each}
 
-    </div>
+</div>
 <!--{:else if agents.error}-->
 <!--    <div class="flex h-[450px] shrink-0 items-center justify-center">-->
 <!--        <div class="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">-->
diff --git a/website/src/routes/(dashboard)/workshop/tabs/skills/create-skill-dialog.svelte b/website/src/routes/(dashboard)/workshop/tabs/skills/create-skill-dialog.svelte
index 02014ff..88e9c0c 100644
--- a/website/src/routes/(dashboard)/workshop/tabs/skills/create-skill-dialog.svelte
+++ b/website/src/routes/(dashboard)/workshop/tabs/skills/create-skill-dialog.svelte
@@ -3,33 +3,19 @@
     import {Button} from "$lib/components/ui/button";
     import {Label} from "$lib/components/ui/label";
     import {Input} from "$lib/components/ui/input";
-    import {PipRequirement, SkillSpecification} from "restClient";
     import Editor from "./editor.svelte"
+    import {SkillSpecification} from "restClient";
 
-    let open = false;
-    let name = "";
-    let requirement: PipRequirement[] = [];
-    let code = "import autogen";
+    import {workshopStore} from "$lib/services";
 
-    async function createSkill() {
-        let skill = new SkillSpecification();
-        skill.name = name;
-        skill.requirements = requirement;
-        skill.code = code;
+    $: ({creteSkill} = $workshopStore);
+    let open = false;
+    let skill = new SkillSpecification();
 
-        try {
-            // toast.promise(
-            //     agentApi.createAgentAgentsPost(null), {
-            //         loading: "Creating agent...",
-            //         success: "Agent created successfully",
-            //         error: "Failed to create agent",
-            //         description: "This might take some seconds. Please wait..."
-            //     }
-            // );
-            open = false;
-        } catch (e: any) {
-            console.error("Error creating skill: ", e);
-        }
+    const createAndClose = () => {
+        skill.requirements = [{name: "pip", version: "20.3.4"}]
+        creteSkill(skill);
+        open = false;
     }
 </script>
 
@@ -37,7 +23,7 @@
     <Dialog.Trigger asChild let:builder>
         <Button size="sm" builders={[builder]} class="relative">Create</Button>
     </Dialog.Trigger>
-    <Dialog.Content>
+    <Dialog.Content class="sm:max-w-[1000px]">
         <Dialog.Header>
             <Dialog.Title>Create an agent</Dialog.Title>
             <Dialog.Description>Define a new agent and its capabilities.</Dialog.Description>
@@ -52,27 +38,27 @@
                             type="text"
                             autocapitalize="words"
                             autocorrect="off"
-                            bind:value={name}
+                            bind:value={skill.name}
                     />
                 </div>
                 <div class="grid gap-2">
                     <Label for="url">Requirements</Label>
-<!--                    Todo: Make a select box where you can delete/add reqs and change their version-->
+                    <!--                    Todo: Make a select box where you can delete/add reqs and change their version-->
                     <Input
                             id="requirements"
                             placeholder="A list of requirements that the skill needs to be able to run. E.g. pip install wikipedia."
                             autocorrect="on"
-                            bind:value={requirement}
+                            bind:value={skill.requirements}
                     />
                 </div>
                 <div class=" h-[25rem] flex space-y-2 flex-col">
                     <Label for="code">Code</Label>
-                    <Editor bind:code={code} class="flex-grow h-100 justify-stretch flex overflow-y-scroll"/>
+                    <Editor bind:code={skill.code} class="flex-grow h-100 justify-stretch flex overflow-y-scroll"/>
                 </div>
             </div>
         </form>
         <Dialog.Footer>
-            <Button on:click={createSkill}>Create</Button>
+            <Button on:click={createAndClose}>Create</Button>
         </Dialog.Footer>
     </Dialog.Content>
 </Dialog.Root>
\ No newline at end of file
diff --git a/website/src/routes/(dashboard)/workshop/tabs/skills/editor.svelte b/website/src/routes/(dashboard)/workshop/tabs/skills/editor.svelte
index 53ba779..49724e7 100644
--- a/website/src/routes/(dashboard)/workshop/tabs/skills/editor.svelte
+++ b/website/src/routes/(dashboard)/workshop/tabs/skills/editor.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import {onMount} from 'svelte';
     import {EditorState} from '@codemirror/state';
-    import {EditorView, lineNumbers, keymap, hasHoverTooltips} from '@codemirror/view';
+    import {EditorView, lineNumbers, keymap} from '@codemirror/view';
     import {defaultKeymap} from '@codemirror/commands';
-    import {python, pythonLanguage} from '@codemirror/lang-python';
+    import {python} from '@codemirror/lang-python';
     import {oneDark} from '@codemirror/theme-one-dark';
     import {autocompletion, completionKeymap} from '@codemirror/autocomplete';
 
diff --git a/website/src/routes/(dashboard)/workshop/tabs/skills/skill-card.svelte b/website/src/routes/(dashboard)/workshop/tabs/skills/skill-card.svelte
index e69de29..e74a50d 100644
--- a/website/src/routes/(dashboard)/workshop/tabs/skills/skill-card.svelte
+++ b/website/src/routes/(dashboard)/workshop/tabs/skills/skill-card.svelte
@@ -0,0 +1,10 @@
+
+<script lang="ts">
+    import {SavedSkillSpecification} from "restClient";
+
+    export let skill: SavedSkillSpecification;
+</script>
+
+<div>
+    {skill.name}
+</div>
\ No newline at end of file