Merge pull request #321 from CommandDash/web-marketplace

Integration of the web marketplace

web/src/lib/components/ExpandNavigation.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import CarbonClose from "~icons/carbon/close";
+    import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
+
+    export let isCollapsed: boolean;
+    export let classNames: string;
+</script>
+
+<button
+    on:click
+    class="{classNames} group flex h-16 w-6 flex-col items-center justify-center -space-y-1 outline-none max-md:hidden ml-2"
+>
+    {#if isCollapsed}
+        <CarbonTextAlignJustify color="white" height="2em" width="2em" />
+    {:else}
+        <CarbonClose color="white" height="2em" width="2em" />
+    {/if}
+</button>

web/src/lib/components/MobileNav.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { navigating } from "$app/stores";
+	import { createEventDispatcher } from "svelte";
+	import { page } from "$app/stores";
+	import { browser } from "$app/environment";
+
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
+	import IconNew from "$lib/components/icons/IconNew.svelte";
+
+	export let isOpen = false;
+	export let title: string | undefined;
+
+    $: title = title ?? "CommandDash";
+
+    let closeEl: HTMLButtonElement;
+	let openEl: HTMLButtonElement;
+
+    const dispatch = createEventDispatcher();
+
+    $: if ($navigating) {
+		dispatch("toggle", false);
+	}
+
+    $: if (isOpen && closeEl) {
+		closeEl.focus();
+	} else if (!isOpen && browser && document.activeElement === closeEl) {
+		openEl.focus();
+	}
+
+</script>
+
+<nav
+	class="flex h-12 items-center justify-between border-b bg-gray-50 px-3 md:hidden dark:border-gray-800 dark:bg-gray-800/70"
+>
+	<button
+		type="button"
+		class="-ml-3 flex size-12 shrink-0 items-center justify-center text-lg"
+		on:click={() => dispatch("toggle", true)}
+		aria-label="Open menu"
+        bind:this={openEl}><CarbonTextAlignJustify /></button
+	>
+	<span class="truncate px-4">{title}</span>
+	<div
+		class="-mr-3 flex size-12 shrink-0 items-center justify-center text-lg" />
+</nav>
+<nav
+	class="fixed inset-0 z-30 grid max-h-screen grid-cols-1 grid-rows-[auto,auto,1fr,auto] bg-white dark:bg-gray-900 {isOpen
+		? 'block'
+		: 'hidden'}"
+>
+	<div class="flex h-12 items-center px-4">
+		<button
+			type="button"
+			class="-mr-3 ml-auto flex size-12 items-center justify-center text-lg"
+			on:click={() => dispatch("toggle", false)}
+			aria-label="Close menu"
+            bind:this={closeEl}><CarbonClose /></button
+		>
+	</div>
+	<slot />
+</nav>
+

web/src/lib/components/NavMenu.svelte

@@ -1,40 +1,51 @@
 <script lang="ts">
-    import NavConversationItem from "./NavConversationItem.svelte";
+	import { base } from "$app/paths";
 </script>
 
-<div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
-	<a
-		class="flex items-center rounded-xl text-lg font-semibold"
-		href="#"
-	>
-		CommandDash
-	</a>
+<div
+    class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0"
+>
+    <a class="flex items-center rounded-xl text-lg font-semibold" href="#">
+        CommandDash
+    </a>
+    <!-- <a
+        href="#"
+        class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none sm:text-smd dark:border-gray-600 dark:bg-gray-700"
+    >
+        Create Agent
+    </a> -->
 </div>
 
 <div
     class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 max-sm:bg-gradient-to-t md:bg-gradient-to-l dark:from-gray-800/30"
 >
-    <h4
+    <!-- <h4
         class="mb-1.5 mt-4 pl-0.5 text-sm text-gray-400 first:mt-0 dark:text-gray-500"
     >
         Today
     </h4>
-    <NavConversationItem />
+    <NavConversationItem /> -->
 </div>
 <div
     class="mt-0.5 flex flex-col gap-1 rounded-r-xl p-3 text-sm md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"
 >
     <button
+        type="submit"
+        class="flex h-9 w-full flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+    >
+        Login
+    </button>
+    <!-- <button
         type="button"
         class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
     >
         Theme
-    </button>
+    </button> -->
     <a
-        href="#"
+        href="{base}/marketplace"
         class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
     >
-        Assistants
+        Explore agents
         <span
             class="ml-auto rounded-full border border-gray-300 px-2 py-0.5 text-xs text-gray-500 dark:border-gray-500 dark:text-gray-400"
             >New</span

web/src/lib/components/Toast.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import { ToastType } from "$lib/types/Toast";
+
+	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
+
+	import CarbonError from "~icons/carbon/error";
+	import CarbonInformation from "~icons/carbon/information-filled";
+	import CarbonCheck from "~icons/carbon/checkmark-filled";
+
+	export let message: string | null = "";
+	export let toastType: ToastType | null = ToastType.INFO;
+
+</script>
+
+<div
+	transition:fade|global={{ duration: 300 }}
+	class="pointer-events-none fixed right-0 top-12 z-20 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 md:top-0 md:pr-8 md:pt-5"
+>
+	<div
+		class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
+	>
+		{#if ToastType.SUCCESS === toastType}
+		<CarbonCheck color="green" height="1.5em" width="1.5em" class="mx-2" />
+		{:else if ToastType.INFO === toastType}
+		<CarbonInformation color="#f5b70c" height="1.5em" width="1.5em" class="mx-2" />
+		{:else if ToastType.ERROR === toastType}
+		<CarbonError color="red" height="1.5em" width="1.5em" class="mx-2" />
+		{/if}
+		<h2 class="font-semibold mx-2">{message}</h2>
+	</div>
+</div>

web/src/lib/components/chat/ChatIntroduction.svelte

@@ -1,46 +1,46 @@
 <script lang="ts">
     import IconVisualStudio from "../icons/IconVisualStudio.svelte";
+    import {toastStore} from "$lib/stores/ToastStores";
+
     import Icon from "@iconify/svelte";
+    import { ToastType } from "$lib/types/Toast";
+    import Toast from "../Toast.svelte";
 
     export let agentDisplayName: string = "";
     export let agentDescription: string = "";
     export let agentLogo: string = "";
+    export let agentId: string = "";
     export let agentIsDataSourceIndexed: boolean = true;
 
-    const questionnaires: Array<{
-        id: string;
-        message: string;
-        icon: { svg: string };
-    }> = [
-        {
-            id: "explore-marketplace",
-            message: "Explore marketplace",
-            icon: {
-                svg: `<svg width="20px" height="20px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m10.25 8c0 3.25 4 3.25 4 0 0-3.45178-2.7982-6.25-6.25-6.25-3.45178 0-6.25 2.79822-6.25 6.25s2.79822 6.25 6.25 6.25c2.25 0 3.25-1 3.25-1"/><circle cx="8" cy="8" r="2.25"/></svg>`,
-            },
-        },
-        {
-            id: "commanddash-questionaire",
-            message: "What can CommandDash do?",
-            icon: {
-                svg: `<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 14C12 14 12 13.3223 12 12.5C12 11.6777 15.5 11.5 15.5 9C15.5 7.5 14 6.5 12 6.5C10.5 6.5 9 7.5 9 9" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.2271 16.9535C13.2271 17.6313 12.6777 18.1807 11.9999 18.1807C11.3221 18.1807 10.7726 17.6313 10.7726 16.9535C10.7726 16.2757 11.3221 15.7262 11.9999 15.7262C12.6777 15.7262 13.2271 16.2757 13.2271 16.9535Z" fill="#000000"/></svg>`,
-            },
-        },
-        {
-            id: "attach-code",
-            message: "How to attach code snippets",
-            icon: {
-                svg: `<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 17L22 12L17 7M7 7L2 12L7 17M14 3L10 21" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
-            },
-        },
-        {
-            id: "create-agents",
-            message: "Can I create my own agents?",
-            icon: {
-                svg: "",
-            },
-        },
-    ];
+    let emailValue: string = "";
+
+    const notify = async () => {
+        const data = {"name": agentId, "recipient_mail": emailValue, "notify_for": "data_index"};
+        debugger;
+        try {
+            const response = await fetch("https://api.commanddash.dev/agent/notify", {
+                method: "POST",
+                body: JSON.stringify(data),
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            });
+            debugger;
+
+            const _response = await response.json();
+
+            if (!response.ok) {
+                toastStore.set({message: _response.message, type: ToastType.ERROR});
+                return;
+            }
+
+            console.log('response', _response);
+            toastStore.set({message: 'Notification sent successfully', type: ToastType.SUCCESS});
+        } catch (error) {
+            console.log("error", error);
+            toastStore.set({message: 'Ops! Something went wrong', type: ToastType.ERROR});
+        }
+    }
 </script>
 
 <div class="my-auto grid gap-4 lg:grid-cols-2">
@@ -82,7 +82,8 @@
                     <div
                         class="flex items-center gap-1.5 font-semibold max-sm:text-smd"
                     >
-                        Data source is currently being indexed. Please visit us again later. Thank you for your patience.
+                        Data source is currently being indexed. Please visit us
+                        again later. Thank you for your patience.
                     </div>
                     <p
                         class="btn ml-auto flex self-start rounded-full bg-gray-100 p-1 text-xs hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-600"
@@ -94,6 +95,23 @@
                         />
                     </p>
                 </div>
+                <div class="flex px-3 pb-3">
+                    <input
+                        bind:value={emailValue}
+                        autocomplete="email"
+                        autocorrect="off"
+                        autocapitalize="none"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                        name="email"
+                        placeholder="Email address"
+                        type="text"
+                    />
+                    <button
+                        on:click={notify}
+                        class="flex items-center justify-center w-full md:w-auto h-12 px-8 mx-2 font-medium text-white transition-colors duration-150 ease-in-out bg-blue-800 rounded-md hover:bg-blue-700 space-x-2 shadow-lg"
+                        >Notify</button
+                    >
+                </div>
             </div>
         {/if}
         <div class="grid gap-3 lg:grid-cols-2 lg:gap-5">

web/src/lib/components/chat/ChatWindow.svelte

@@ -13,6 +13,7 @@
     export let loading = false;
     export let agentName: string = "dash";
     export let agentDisplayName: string = "Dash";
+    export let agentId: string = "";
     export let agentDescription: string = "Default Agent Dash";
     export let agentLogo: string = "";
     export let agentVersion: string = "1.0.3";
@@ -65,6 +66,8 @@
                 ...messages,
                 { role: "model", text: modelResponse.response, references: modelResponse.references },
             ];
+
+            console.log('model response', modelResponse);
         } catch (error) {
             console.log("error", error);
         }
@@ -113,6 +116,7 @@
                         {agentDisplayName}
                         {agentLogo}
                         {agentIsDataSourceIndexed}
+                        {agentId}
                     />
                 {/if}
             </div>

web/src/lib/components/icons/IconDazzled.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	class={classNames}
+	fill="none"
+	viewBox="0 0 26 23"
+>
+	<path
+		fill="url(#a)"
+		d="M.93 10.65A10.17 10.17 0 0 1 11.11.48h4.67a9.45 9.45 0 0 1 0 18.89H4.53L1.62 22.2a.38.38 0 0 1-.69-.28V10.65Z"
+	/>
+	<path
+		fill="#000"
+		fill-rule="evenodd"
+		d="M11.52 7.4a1.86 1.86 0 1 1-3.72 0 1.86 1.86 0 0 1 3.72 0Zm7.57 0a1.86 1.86 0 1 1-3.73 0 1.86 1.86 0 0 1 3.73 0ZM8.9 12.9a.55.55 0 0 0-.11.35.76.76 0 0 1-1.51 0c0-.95.67-1.94 1.76-1.94 1.09 0 1.76 1 1.76 1.94H9.3a.55.55 0 0 0-.12-.35c-.06-.07-.1-.08-.13-.08s-.08 0-.14.08Zm4.04 0a.55.55 0 0 0-.12.35h-1.51c0-.95.68-1.94 1.76-1.94 1.1 0 1.77 1 1.77 1.94h-1.51a.55.55 0 0 0-.12-.35c-.06-.07-.11-.08-.14-.08-.02 0-.07 0-.13.08Zm-1.89.79c-.02 0-.07-.01-.13-.08a.55.55 0 0 1-.12-.36h-1.5c0 .95.67 1.95 1.75 1.95 1.1 0 1.77-1 1.77-1.95h-1.51c0 .16-.06.28-.12.36-.06.07-.11.08-.14.08Zm4.04 0c-.03 0-.08-.01-.14-.08a.55.55 0 0 1-.12-.36h-1.5c0 .95.67 1.95 1.76 1.95 1.08 0 1.76-1 1.76-1.95h-1.51c0 .16-.06.28-.12.36-.06.07-.11.08-.13.08Zm1.76-.44c0-.16.05-.28.12-.35.06-.07.1-.08.13-.08s.08 0 .14.08c.06.07.11.2.11.35a.76.76 0 0 0 1.51 0c0-.95-.67-1.94-1.76-1.94-1.09 0-1.76 1-1.76 1.94h1.5Z"
+		clip-rule="evenodd"
+	/>
+	<defs>
+		<radialGradient
+			id="a"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientTransform="matrix(0 31.37 -34.85 0 13.08 -9.02)"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD21E" />
+			<stop offset="1" stop-color="red" />
+		</radialGradient>
+	</defs>
+</svg>

web/src/lib/components/icons/IconNew.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class={classNames}
+	width="1em"
+	height="1em"
+	fill="none"
+	viewBox="0 0 32 32"
+	><path
+		fill="currentColor"
+		fill-rule="evenodd"
+		d="M3.143 20.286h4.286v2.142H3.143A2.143 2.143 0 0 1 1 20.287V3.143A2.143 2.143 0 0 1 3.143 1h17.143a2.143 2.143 0 0 1 2.142 2.143v4.286h-2.142V3.143H3.143v17.143Zm9.643-12.857v3.214H16v2.143h-3.214V16h-2.143v-3.214H7.429v-2.143h3.214V7.429h2.143Zm14.185 2.639 3.533 3.532a1.7 1.7 0 0 1 0 2.4L15.5 31H9.57v-5.928l15-15.004a1.7 1.7 0 0 1 2.4 0Zm-15.257 18.79h2.897l10.116-10.116-2.899-2.897L11.714 25.96v2.897ZM23.346 14.33l2.897 2.897 2.429-2.43-2.897-2.896-2.43 2.429Z"
+		clip-rule="evenodd"
+	/></svg
+>

web/src/lib/stores/ToastStores.ts

@@ -0,0 +1,9 @@
+import type { ToastType } from "$lib/types/Toast";
+import { writable } from "svelte/store";
+
+interface Toast {
+    message: string;
+    type: ToastType
+}
+
+export const toastStore = writable<Toast | null>(null);

web/src/lib/types/Agent.ts

@@ -1,4 +1,10 @@
 export type Agent = {
+    author: {
+        github_id: string,
+        id: string,
+        name: string,
+        source_url: string | null
+    },
     chat_mode: {
         data_sources: string[],
         system_prompt: string,