feat(Marketplace): Marketplace is on landing page, Users can create github agents using create agent button

web/package.json

@@ -36,6 +36,8 @@
 	"dependencies": {
 		"@lottiefiles/svelte-lottie-player": "^0.3.1",
 		"@tailwindcss/typography": "^0.5.13",
+		"highlight.js": "^11.10.0",
+		"isomorphic-dompurify": "^2.14.0",
 		"showdown": "^2.1.0",
 		"tailwind-scrollbar": "^3.1.0"
 	}

web/src/lib/actions/clickOutside.ts

@@ -0,0 +1,18 @@
+export function clickOutside(element: HTMLElement, callbackFunction: () => void) {
+	function onClick(event: MouseEvent) {
+		if (!element.contains(event.target as Node)) {
+			callbackFunction();
+		}
+	}
+
+	document.body.addEventListener("click", onClick);
+
+	return {
+		update(newCallbackFunction: () => void) {
+			callbackFunction = newCallbackFunction;
+		},
+		destroy() {
+			document.body.removeEventListener("click", onClick);
+		},
+	};
+}

web/src/lib/components/CreateAgentDialog.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { base } from "$app/paths";
+    import { clickOutside } from "$lib/actions/clickOutside";
+    import { goto } from "$app/navigation";
+    import { toastStore } from "$lib/stores/ToastStores";
+    import { ToastType } from "$lib/types/Toast";
+	import IconClose from "~icons/carbon/close";
+    import CarbonSearch from "~icons/carbon/search";
+    import CarbonGithub from "~icons/carbon/logo-github";
+
+    export let showModal: boolean;
+    export let onClose: () => void;
+
+    let dialog: HTMLDialogElement;
+    let value: string = "";
+
+    const validateGithubURL = (url: string): boolean => {
+        const githubUrlPattern =
+            /^(https:\/\/github\.com\/[A-Za-z0-9_.-]+\/[A-Za-z0-9_.-]+\/?)$/;
+        return githubUrlPattern.test(url);
+    };
+
+    const addGithubURL = (url: string) => {
+        value = url;
+    };
+
+    const onCreateAgent = () => {
+        if (validateGithubURL(value)) {
+            goto(`${base}/agent?github=${value}`);
+        } else {
+            toastStore.set({
+                message: "Please enter valid Github URL",
+                type: ToastType.ERROR,
+            });
+        }
+    };
+</script>
+
+{#if showModal}
+    <div
+        class="fixed inset-0 z-20 flex items-center justify-center bg-transparent backdrop-blur-sm"
+    >
+        <dialog
+            bind:this={dialog}
+            class="flex flex-col content-center items-center gap-x-10 gap-y-3 overflow-hidden rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950 dark:hover:bg-gray-950 max-sm:w-[85dvw] max-sm:px-6 md:w-96 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8"
+            on:close={() => dialog.close()}
+            open={showModal}
+        >
+            <div class="absolute right-0 top-0 mr-2 mt-2">
+                <button
+					class="flex items-center px-2.5 py-1 text-sm text-white"
+					on:click={onClose}
+				>
+					<IconClose class="mr-1.5 text-xl" />
+				</button>
+            </div>
+            <h1 class="text-xl font-bold text-white">Create Agent with Github</h1>
+            <div
+                class="relative flex h-[50px] min-w-full items-center rounded-md border px-2 has-[:focus]:border-gray-400 sm:w-64 dark:border-gray-600"
+            >
+                <CarbonGithub
+                    height="1.5em"
+                    width="1.5em"
+                    class="pointer-events-none absolute left-2 text-xs text-gray-400"
+                />
+                <input
+                    class="h-[50px] w-full bg-transparent pl-7 focus:outline-none text-white"
+                    placeholder="Github Repo URL"
+                    type="url"
+                    {value}
+                    on:input={(e) => addGithubURL(e.currentTarget.value)}
+                />
+            </div>
+            <button
+                on:click={onCreateAgent}
+                class="mt-4 w-full rounded-full bg-gray-300 px-4 py-3 font-semibold text-black"
+            >
+                Submit
+            </button>
+        </dialog>
+    </div>
+{/if}

web/src/lib/components/Toast.svelte

@@ -15,7 +15,7 @@
 
 <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"
+	class="pointer-events-none fixed right-0 top-12 z-30 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"
@@ -27,6 +27,6 @@
 		{: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>
+		<h2 class="font-semibold mx-2 text-white">{message}</h2>
 	</div>
 </div>

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

@@ -1,65 +1,64 @@
 <script lang="ts">
-    import { isDesktop } from "$lib/utils/isDesktop";
-    import { onMount, createEventDispatcher } from "svelte";
+	import { isDesktop } from "$lib/utils/isDesktop";
+	import { createEventDispatcher, onMount } from "svelte";
 
-    export let value: string = "";
-    export let placeholder: string = "";
-    export let minRows = 1;
-    export let maxRows: null | number = null;
-    export let disabled: boolean = false;
+	export let value = "";
+	export let minRows = 1;
+	export let maxRows: null | number = null;
+	export let placeholder = "";
+	export let disabled = false;
 
-    let textareaElement: HTMLTextAreaElement;
+	let textareaElement: HTMLTextAreaElement;
 
-    const dispatch = createEventDispatcher<{ submit: void }>();
+	const dispatch = createEventDispatcher<{ submit: void }>();
 
-    $: minHeight = `${1 + minRows * 1.5}em`;
-    $: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
+	$: minHeight = `${1 + minRows * 1.5}em`;
+	$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
 
-    function handleKeydown(event: KeyboardEvent) {
-        //submit on enter
-        if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			textareaElement.blur();
+			if (isDesktop(window)) {
+				textareaElement.focus();
+			}
+			dispatch("submit");
+		}
+	}
 
-            textareaElement.blur();
-
-            if (isDesktop(window)) {
-                textareaElement.focus();
-            }
-
-            dispatch("submit");
-        }
-    }
-
-    onMount(() => {
-        if (isDesktop(window)) {
-            textareaElement.focus();
-        }
-    });
+	onMount(() => {
+		if (isDesktop(window)) {
+			textareaElement.focus();
+		}
+	});
 </script>
 
 <div class="relative min-w-0 flex-1" on:paste>
-    <pre
-        class="scrollbar-custom invisible overflow-x-hidden overflow-y-scroll whitespace-pre-wrap break-words p-3"
-        aria-hidden="true"
-        style="min-height: {minHeight}; max-height: {maxHeight}"></pre>
-    <textarea
-        enterkeyhint="send"
-        tabindex="0"
-        rows="1"
-        bind:value
-        bind:this={textareaElement}
-        class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
-        {placeholder}
-        {disabled}
-        on:keydown={handleKeydown}
-    />
+	<pre
+		class="scrollbar-custom invisible overflow-x-hidden overflow-y-scroll whitespace-pre-wrap break-words p-3"
+		aria-hidden="true"
+		style="min-height: {minHeight}; max-height: {maxHeight}">{(value || " ") + "\n"}</pre>
+
+	<textarea
+		enterkeyhint="send"
+		tabindex="0"
+		rows="1"
+		class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
+		class:text-gray-400={disabled}
+		bind:value
+		bind:this={textareaElement}
+		{disabled}
+		on:keydown={handleKeydown}
+		on:beforeinput
+		{placeholder}
+	/>
 </div>
 
 <style>
-    pre,
-    textarea {
-        font-family: inherit;
-        box-sizing: border-box;
-        line-height: 1.5;
-    }
+	pre,
+	textarea {
+		font-family: inherit;
+		box-sizing: border-box;
+		line-height: 1.5;
+	}
 </style>

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

@@ -4,7 +4,6 @@
 
     import Icon from "@iconify/svelte";
     import { ToastType } from "$lib/types/Toast";
-    import Toast from "../Toast.svelte";
 
     export let agentDisplayName: string = "";
     export let agentDescription: string = "";
@@ -34,7 +33,6 @@
                 return;
             }
 
-            console.log('response', _response);
             toastStore.set({message: 'Notification sent successfully', type: ToastType.SUCCESS});
         } catch (error) {
             console.log("error", error);

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

@@ -64,10 +64,10 @@
             const modelResponse = await response.json();
             messages = [
                 ...messages,
-                { role: "model", text: modelResponse.response, references: modelResponse.references },
+                { role: "model", text: modelResponse.response },
             ];
+            agentReferences = modelResponse?.references
 
-            console.log('model response', modelResponse);
         } catch (error) {
             console.log("error", error);
         }

web/src/lib/types/Message.ts

@@ -1,5 +1,4 @@
 export type Message = {
     role: "user" | "model";
     text: string,
-    references?: any[],
 }

web/src/routes/+layout.svelte

@@ -2,15 +2,10 @@
     import "../styles/main.css";
     import { onDestroy, onMount } from "svelte";
     import { browser } from "$app/environment";
-    import NavMenu from "$lib/components/NavMenu.svelte";
-    import MobileNav from "$lib/components/MobileNav.svelte";
-    import ExpandNavigation from "$lib/components/ExpandNavigation.svelte";
     import Toast from "$lib/components/Toast.svelte";
     import { ToastType } from "$lib/types/Toast";
     import { toastStore } from "$lib/stores/ToastStores";
 
-    let isNavCollapsed = true;
-    let isNavOpen = false;
     let toastMessage: string | null = null;
     let toastType: ToastType | null = null;
     let toastTimeout: ReturnType<typeof setTimeout>;