From 4297579d368b229b61c7e9e6db30ddc8576c9241 Mon Sep 17 00:00:00 2001
From: wadhia-yash <aarushwadhia@gmail.com>
Date: Fri, 9 Aug 2024 16:01:09 +0530
Subject: [PATCH 1/4] feat(Agent settings): Showing list of data sources in the
 settings popup

---
 web/src/lib/components/SettingsAgent.svelte | 167 ++++++++++++++++++++
 web/src/lib/types/Agent.ts                  |   7 +
 web/src/routes/+page.svelte                 |  26 +++
 3 files changed, 200 insertions(+)
 create mode 100644 web/src/lib/components/SettingsAgent.svelte

diff --git a/web/src/lib/components/SettingsAgent.svelte b/web/src/lib/components/SettingsAgent.svelte
new file mode 100644
index 00000000..384c5e26
--- /dev/null
+++ b/web/src/lib/components/SettingsAgent.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import type { Agent } from "$lib/types/Agent";
+    import { fade, fly } from "svelte/transition";
+    import CarbonClose from "~icons/carbon/close";
+    import CarbonGithub from "~icons/carbon/logo-github";
+    import CarbonCode from "~icons/carbon/code";
+    import CarbonWorld from "~icons/carbon/wikis";
+
+    export let showModalSettings: boolean;
+    export let onClose: () => void;
+    export let currentAgent: Agent;
+
+    let errorMessage: string = "Something went wrong";
+    let errorStatus: number = 0;
+    let limit: number = 10;
+
+    $: sourceDatas = [];
+
+    $: if (showModalSettings) {
+        fetchAgentDetails();
+    }
+
+    const fetchAgentDetails = async () => {
+        const id = currentAgent?.name;
+        const response = await fetch(
+            "https://api.commanddash.dev/agent/get-latest-agent",
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ name: id }),
+            },
+        );
+
+        const _response = await response.json();
+        if (!response.ok) {
+            errorMessage = _response.message;
+            errorStatus = response.status;
+        }
+        const agentData = _response as Agent;
+        sourceDatas = extractUris(agentData.data_sources);
+    };
+
+    const extractUris = (
+        data: { id: string; uri: { type: string; uri: string }[] }[],
+    ): { type: string; uri: string }[] => {
+        const result: { type: string; uri: string }[] = [];
+        data.forEach((item) => {
+            item.uri.forEach((uriItem) => {
+                if (result.length < limit) {
+                    result.push({
+                        type: uriItem.type,
+                        uri: uriItem.uri,
+                    });
+                } else {
+                    return result;
+                }
+            });
+        });
+        return result;
+    };
+</script>
+
+{#if showModalSettings}
+    <div
+        class="fixed inset-0 z-20 flex items-center justify-center bg-black/80 backdrop-blur-sm dark:bg-black/50"
+        in:fade
+    >
+        <dialog
+            in:fly={{ y: 100 }}
+            open
+            class="h-[95dvh] w-[90dvw] overflow-hidden rounded-2xl bg-white shadow-2xl outline-none sm:h-[85dvh] xl:w-[1200px] 2xl:h-[75dvh]"
+        >
+            <div
+                class="grid h-full w-full grid-cols-1 grid-rows-[auto,1fr] content-start gap-x-4 overflow-hidden p-4 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8"
+            >
+                <div
+                    class="col-span-1 mb-4 flex items-center justify-between md:col-span-3"
+                >
+                    <h2 class="text-xl font-bold">Settings</h2>
+                    <button
+                        class="btn rounded-lg"
+                        on:click={() => {
+                            onClose();
+                        }}
+                    >
+                        <CarbonClose
+                            class="text-xl text-gray-900 hover:text-black"
+                        />
+                    </button>
+                </div>
+                <div
+                    class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[245px] max-md:border max-md:border-b-2 md:pr-6"
+                >
+                    <h3
+                        class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1"
+                    >
+                        Options
+                    </h3>
+                </div>
+                <div
+                    class="col-span-1 w-full overflow-y-auto overflow-x-clip px-1 max-md:pt-4 md:col-span-2 md:row-span-2"
+                >
+                    <div class="flex h-full flex-col gap-2">
+                        <div class="flex gap-6">
+                            <img
+                                alt="Avatar"
+                                class="size-16 flex-none rounded-full object-cover sm:size-24"
+                                src={currentAgent.metadata.avatar_id}
+                            />
+                            <div class="flex-1">
+                                <div class="mb-1.5">
+                                    <h1
+                                        class="mr-1 inline text-xl font-semibold"
+                                    >
+                                        {currentAgent.metadata.display_name}
+                                    </h1>
+                                    <!-- <span
+                                        class="ml-1 rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500">{currentAgent.version}</span> -->
+                                </div>
+                                <p
+                                    class="mb-2 line-clamp-2 text-sm text-gray-500"
+                                >
+                                    {currentAgent.description}
+                                </p>
+                                <p class="text-sm text-gray-500">
+                                    Created by <a
+                                        class="underline"
+                                        target="_blank"
+                                        href={currentAgent.author.source_url}
+                                        >{currentAgent.author.name}</a
+                                    >
+                                </p>
+                            </div>
+                        </div>
+                        <div>
+                            <h2 class="text-lg font-semibold">Data sources</h2>
+                            {#each sourceDatas as sourceData}
+                                <a
+                                    class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm hover:bg-gray-100 md:rounded-xl !bg-gray-100 !text-gray-800 mt-1"
+                                    href="#"
+                                >
+                                    <div class="truncate">
+                                        {sourceData.uri}
+                                    </div>
+                                    <div
+                                        class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
+                                    >
+                                        {#if sourceData.type === "github"}
+                                            <CarbonGithub />
+                                        {:else if sourceData.type === "web_page"}
+                                            <CarbonWorld />
+                                        {:else}
+                                        <CarbonCode />
+                                        {/if}
+                                    </div>
+                                </a>
+                            {/each}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </dialog>
+    </div>
+{/if}
diff --git a/web/src/lib/types/Agent.ts b/web/src/lib/types/Agent.ts
index 8c2b2de4..aaf33bbe 100644
--- a/web/src/lib/types/Agent.ts
+++ b/web/src/lib/types/Agent.ts
@@ -19,6 +19,13 @@ export type Agent = {
         tags: string [],
         version: string,
     },
+    data_sources: {
+        id: string,
+        uri: {
+            type: string,
+            uri: string
+        }[]
+    }[],
     min_cli_version: string,
     name: string,
     publisher_id: string,
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 1cc797da..346dc05b 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -5,17 +5,22 @@
     import CarbonSearch from "~icons/carbon/search";
     import CarbonAdd from "~icons/carbon/add";
     import CarbonGithub from "~icons/carbon/logo-github";
+    import CarbonSettings from "~icons/carbon/settings";
+
     import type { Agent } from "$lib/types/Agent";
     import { goto } from "$app/navigation";
     import { debounce } from "$lib/utils/debounce";
     import { base } from "$app/paths";
     import CreateAgentDialog from "$lib/components/CreateAgentDialog.svelte";
+    import SettingsAgent from "$lib/components/SettingsAgent.svelte";
 
     const SEARCH_DEBOUNCE_DELAY = 400;
     let agents: Agent[] = [];
     let filteredAgents: Agent[] = [];
     let searchValue: string = "";
     let showModal: boolean = false;
+    let showModalSettings: boolean = false;
+    let currentAgent: Agent;
 
     $: loading = true;
 
@@ -72,6 +77,12 @@
             ? formattedText.slice(0, maxLength) + "..."
             : formattedText;
     };
+
+    const onSettingsClicked = (e: MouseEvent, _agent: Agent) => {
+        e.stopPropagation();
+        showModalSettings = true;
+        currentAgent = _agent
+    };
 </script>
 
 <svelte:head>
@@ -152,6 +163,13 @@
                         class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
                         on:click={() => navigateAgents(agent)}
                     >
+                        <div
+                            class="absolute right-3 top-3 flex items-center gap-1 text-xs text-gray-400"
+                            title="Settings"
+                            on:click={(e) => onSettingsClicked(e, agent)}
+                        >
+                            <CarbonSettings />
+                        </div>
                         <img
                             src={agent.metadata.avatar_id}
                             alt="Avatar"
@@ -218,6 +236,14 @@
     }}
 />
 
+<SettingsAgent
+    bind:showModalSettings
+    bind:currentAgent
+    onClose={() => {
+        showModalSettings = false;
+    }}
+/>
+
 <style>
     .typing-loader {
         width: 4px;

From 6650b9738ea876043531d01e301e9883ae6a9860 Mon Sep 17 00:00:00 2001
From: wadhia-yash <aarushwadhia@gmail.com>
Date: Mon, 12 Aug 2024 11:17:18 +0530
Subject: [PATCH 2/4] fix(Data sources, Agent settings): Switched agent's
 settings from list of agents to agent details page. WIP

---
 web/src/lib/components/SettingsAgent.svelte   | 74 ++++---------------
 .../components/chat/ChatIntroduction.svelte   | 58 ++++++++++-----
 web/src/lib/components/chat/ChatWindow.svelte |  2 +
 web/src/routes/+page.svelte                   | 23 ------
 web/src/routes/agent/+page.svelte             | 26 +++++++
 web/src/routes/agent/[id]/+page.svelte        | 27 ++++++-
 6 files changed, 108 insertions(+), 102 deletions(-)

diff --git a/web/src/lib/components/SettingsAgent.svelte b/web/src/lib/components/SettingsAgent.svelte
index 384c5e26..ee70d13d 100644
--- a/web/src/lib/components/SettingsAgent.svelte
+++ b/web/src/lib/components/SettingsAgent.svelte
@@ -9,58 +9,11 @@
 
     export let showModalSettings: boolean;
     export let onClose: () => void;
-    export let currentAgent: Agent;
-
-    let errorMessage: string = "Something went wrong";
-    let errorStatus: number = 0;
-    let limit: number = 10;
-
-    $: sourceDatas = [];
-
-    $: if (showModalSettings) {
-        fetchAgentDetails();
-    }
-
-    const fetchAgentDetails = async () => {
-        const id = currentAgent?.name;
-        const response = await fetch(
-            "https://api.commanddash.dev/agent/get-latest-agent",
-            {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({ name: id }),
-            },
-        );
-
-        const _response = await response.json();
-        if (!response.ok) {
-            errorMessage = _response.message;
-            errorStatus = response.status;
-        }
-        const agentData = _response as Agent;
-        sourceDatas = extractUris(agentData.data_sources);
-    };
-
-    const extractUris = (
-        data: { id: string; uri: { type: string; uri: string }[] }[],
-    ): { type: string; uri: string }[] => {
-        const result: { type: string; uri: string }[] = [];
-        data.forEach((item) => {
-            item.uri.forEach((uriItem) => {
-                if (result.length < limit) {
-                    result.push({
-                        type: uriItem.type,
-                        uri: uriItem.uri,
-                    });
-                } else {
-                    return result;
-                }
-            });
-        });
-        return result;
-    };
+    export let agentDisplayName: string = "";
+    export let agentDescription: string = "";
+    export let agentLogo: string = "";
+    export let agentId: string = "";
+    export let agentDataSources: Array<any> = [];
 </script>
 
 {#if showModalSettings}
@@ -99,6 +52,9 @@
                     >
                         Options
                     </h3>
+                    <button class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl  !bg-gray-100 !text-gray-800">
+                        Info
+                    </button>
                 </div>
                 <div
                     class="col-span-1 w-full overflow-y-auto overflow-x-clip px-1 max-md:pt-4 md:col-span-2 md:row-span-2"
@@ -108,14 +64,14 @@
                             <img
                                 alt="Avatar"
                                 class="size-16 flex-none rounded-full object-cover sm:size-24"
-                                src={currentAgent.metadata.avatar_id}
+                                src={agentLogo}
                             />
                             <div class="flex-1">
                                 <div class="mb-1.5">
                                     <h1
                                         class="mr-1 inline text-xl font-semibold"
                                     >
-                                        {currentAgent.metadata.display_name}
+                                        {agentDisplayName}
                                     </h1>
                                     <!-- <span
                                         class="ml-1 rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500">{currentAgent.version}</span> -->
@@ -123,21 +79,21 @@
                                 <p
                                     class="mb-2 line-clamp-2 text-sm text-gray-500"
                                 >
-                                    {currentAgent.description}
+                                    {agentDescription}
                                 </p>
-                                <p class="text-sm text-gray-500">
+                                <!-- <p class="text-sm text-gray-500">
                                     Created by <a
                                         class="underline"
                                         target="_blank"
                                         href={currentAgent.author.source_url}
                                         >{currentAgent.author.name}</a
                                     >
-                                </p>
+                                </p> -->
                             </div>
                         </div>
                         <div>
                             <h2 class="text-lg font-semibold">Data sources</h2>
-                            {#each sourceDatas as sourceData}
+                            {#each agentDataSources as sourceData}
                                 <a
                                     class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm hover:bg-gray-100 md:rounded-xl !bg-gray-100 !text-gray-800 mt-1"
                                     href="#"
@@ -153,7 +109,7 @@
                                         {:else if sourceData.type === "web_page"}
                                             <CarbonWorld />
                                         {:else}
-                                        <CarbonCode />
+                                            <CarbonCode />
                                         {/if}
                                     </div>
                                 </a>
diff --git a/web/src/lib/components/chat/ChatIntroduction.svelte b/web/src/lib/components/chat/ChatIntroduction.svelte
index 621c484d..1c4f9514 100644
--- a/web/src/lib/components/chat/ChatIntroduction.svelte
+++ b/web/src/lib/components/chat/ChatIntroduction.svelte
@@ -1,17 +1,22 @@
 <script lang="ts">
-    import IconVisualStudio from "../icons/IconVisualStudio.svelte";
-    import { toastStore } from "$lib/stores/ToastStores";
 
     import Icon from "@iconify/svelte";
+
+    import IconVisualStudio from "../icons/IconVisualStudio.svelte";
+    import { toastStore } from "$lib/stores/ToastStores";
     import { ToastType } from "$lib/types/Toast";
     import type { Questionnaire } from "$lib/types/Questionnaires";
     import { questionnaireStore } from "$lib/stores/QuestionnaireStores";
+    import SettingsAgent from "$lib/components/SettingsAgent.svelte";
 
     export let agentDisplayName: string = "";
     export let agentDescription: string = "";
     export let agentLogo: string = "";
     export let agentId: string = "";
     export let agentIsDataSourceIndexed: boolean = true;
+    export let agentDataSources: Array<any> = [];
+
+    let showModalSettings: boolean = false;
 
     let emailValue: string = "";
     let questionnaires: Array<Questionnaire> = [
@@ -27,7 +32,6 @@
             recipient_mail: emailValue,
             notify_for: "data_index",
         };
-        debugger;
         try {
             const response = await fetch(
                 "https://api.commanddash.dev/agent/notify",
@@ -39,7 +43,6 @@
                     },
                 },
             );
-            debugger;
 
             const _response = await response.json();
 
@@ -66,8 +69,7 @@
 
     const onQuestionnaire = (questionnaire: Questionnaire) => {
         questionnaireStore.set(questionnaire);
-    }
-
+    };
 </script>
 
 <div class="my-auto grid gap-4 lg:grid-cols-2">
@@ -88,20 +90,25 @@
             </p>
         </div>
     </div>
-    <div class="lg:col-span-2 lg:pl-24 hidden md:block">
-        <div
-            class="overflow-hidden rounded border dark:border-gray-800 cursor-pointer"
+    <div
+        class="lg:col-span-2 lg:pl-24 flex justify-between sm:justify-end space-x-2"
+    >
+        <a
+            href="https://marketplace.visualstudio.com/items?itemName=WelltestedAI.fluttergpt"
+            target="_blank"
+            class="flex items-center justify-center h-12 px-6 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"
         >
-            <a
-                href="https://marketplace.visualstudio.com/items?itemName=WelltestedAI.fluttergpt"
-                target="_blank"
-                class="flex items-center justify-center w-full md:w-auto h-12 px-6 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"
-            >
-                <IconVisualStudio />
-                <div class="text-sm text-white">VSCode</div>
-            </a>
-        </div>
+            <IconVisualStudio />
+            <div class="text-sm text-white">VSCode</div>
+        </a>
+        <button
+            class="flex items-center justify-center h-12 px-6 font-medium transition-colors duration-150 ease-in-out border bg-gray-50 dark:bg-gray-800 dark:text-gray-300 rounded-md dark:hover:bg-gray-700 text-gray-600 hover:bg-gray-100 border-gray-800 space-x-2 shadow-lg"
+            on:click={() => showModalSettings = true}>
+            <Icon icon="bi:gear-fill" width="24px" height="24px" />
+            <div class="text-sm text-white">Settings</div>
+        </button>
     </div>
+
     <div class="lg:col-span-3 lg:mt-6">
         {#if !agentIsDataSourceIndexed}
             <div class="overflow-hidden rounded-xl border dark:border-gray-800">
@@ -145,10 +152,23 @@
             {#each questionnaires as questionnaire}
                 <button
                     class={`relative rounded-xl border ${questionnaire.id === "generate-summary" ? "bg-[#497BEF] text-gray-300 border-[#497BEF] hover:bg-[#287CEB] hover:border-[#287CEB]" : "bg-gray-50 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 text-gray-600 hover:bg-gray-100"} p-3 max-xl:text-sm xl:p-3.5`}
-                    on:click={() => onQuestionnaire(questionnaire)}>
+                    on:click={() => onQuestionnaire(questionnaire)}
+                >
                     {questionnaire.message}
                 </button>
             {/each}
         </div>
     </div>
 </div>
+
+<SettingsAgent
+    bind:showModalSettings
+    bind:agentDisplayName
+    bind:agentDescription
+    bind:agentId
+    bind:agentLogo
+    bind:agentDataSources
+    onClose={() => {
+        showModalSettings = false;
+    }}
+/>
\ No newline at end of file
diff --git a/web/src/lib/components/chat/ChatWindow.svelte b/web/src/lib/components/chat/ChatWindow.svelte
index b9f4b420..13cc5b08 100644
--- a/web/src/lib/components/chat/ChatWindow.svelte
+++ b/web/src/lib/components/chat/ChatWindow.svelte
@@ -24,6 +24,7 @@
     export let agentVersion: string = "1.0.3";
     export let agentPrivate: boolean = false;
     export let agentIsDataSourceIndexed: boolean = true;
+    export let agentDataSources: Array<any> = [];
 
     let agentReferences: Array<any> = [];
     let messageLoading: boolean = false;
@@ -155,6 +156,7 @@
                         {agentLogo}
                         {agentIsDataSourceIndexed}
                         {agentId}
+                        {agentDataSources}
                     />
                 {/if}
             </div>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 346dc05b..b4819672 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -12,14 +12,12 @@
     import { debounce } from "$lib/utils/debounce";
     import { base } from "$app/paths";
     import CreateAgentDialog from "$lib/components/CreateAgentDialog.svelte";
-    import SettingsAgent from "$lib/components/SettingsAgent.svelte";
 
     const SEARCH_DEBOUNCE_DELAY = 400;
     let agents: Agent[] = [];
     let filteredAgents: Agent[] = [];
     let searchValue: string = "";
     let showModal: boolean = false;
-    let showModalSettings: boolean = false;
     let currentAgent: Agent;
 
     $: loading = true;
@@ -77,12 +75,6 @@
             ? formattedText.slice(0, maxLength) + "..."
             : formattedText;
     };
-
-    const onSettingsClicked = (e: MouseEvent, _agent: Agent) => {
-        e.stopPropagation();
-        showModalSettings = true;
-        currentAgent = _agent
-    };
 </script>
 
 <svelte:head>
@@ -163,13 +155,6 @@
                         class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
                         on:click={() => navigateAgents(agent)}
                     >
-                        <div
-                            class="absolute right-3 top-3 flex items-center gap-1 text-xs text-gray-400"
-                            title="Settings"
-                            on:click={(e) => onSettingsClicked(e, agent)}
-                        >
-                            <CarbonSettings />
-                        </div>
                         <img
                             src={agent.metadata.avatar_id}
                             alt="Avatar"
@@ -236,14 +221,6 @@
     }}
 />
 
-<SettingsAgent
-    bind:showModalSettings
-    bind:currentAgent
-    onClose={() => {
-        showModalSettings = false;
-    }}
-/>
-
 <style>
     .typing-loader {
         width: 4px;
diff --git a/web/src/routes/agent/+page.svelte b/web/src/routes/agent/+page.svelte
index 3cb99f74..44147fd7 100644
--- a/web/src/routes/agent/+page.svelte
+++ b/web/src/routes/agent/+page.svelte
@@ -9,6 +9,10 @@
 
     let currentAgentDetails: Agent;
     let errorMessage: string = "Something went wrong";
+    let agentDataSources: Array<any> = [];
+    
+    const limit: number = 10;
+
     $: loading = true;
 
     onMount(async () => {
@@ -34,8 +38,29 @@
         }
 
         currentAgentDetails = _response as Agent;
+        agentDataSources = extractUris(currentAgentDetails?.data_sources)
         loading = false;
     });
+
+    const extractUris = (
+        data: { id: string; uri: { type: string; uri: string }[] }[],
+    ): { type: string; uri: string }[] => {
+        const result: { type: string; uri: string }[] = [];
+        data.forEach((item) => {
+            item.uri.forEach((uriItem) => {
+                if (result.length < limit) {
+                    result.push({
+                        type: uriItem.type,
+                        uri: uriItem.uri,
+                    });
+                } else {
+                    return result;
+                }
+            });
+        });
+        return result;
+    };
+
 </script>
 
 {#if currentAgentDetails}
@@ -49,6 +74,7 @@
         agentLogo={currentAgentDetails?.metadata?.avatar_id}
         agentIsDataSourceIndexed={currentAgentDetails.data_sources_indexed}
         agentId={currentAgentDetails?.name}
+        agentDataSources={agentDataSources}
     />
 {/if}
 
diff --git a/web/src/routes/agent/[id]/+page.svelte b/web/src/routes/agent/[id]/+page.svelte
index 267eb871..c735cbe1 100644
--- a/web/src/routes/agent/[id]/+page.svelte
+++ b/web/src/routes/agent/[id]/+page.svelte
@@ -10,6 +10,10 @@
     let currentAgentDetails: Agent;
     let errorMessage: string = "Something went wrong";
     let errorStatus: number = 0;
+    let agentDataSources: Array<any> = [];
+    
+    const limit: number = 10;
+
     $: loading = true;
 
     onMount(async () => {
@@ -36,9 +40,29 @@
         }
 
         currentAgentDetails = _response as Agent;
-
+        agentDataSources = extractUris(currentAgentDetails?.data_sources);
         loading = false;
     });
+
+    const extractUris = (
+        data: { id: string; uri: { type: string; uri: string }[] }[],
+    ): { type: string; uri: string }[] => {
+        const result: { type: string; uri: string }[] = [];
+        data.forEach((item) => {
+            item.uri.forEach((uriItem) => {
+                if (result.length < limit) {
+                    result.push({
+                        type: uriItem.type,
+                        uri: uriItem.uri,
+                    });
+                } else {
+                    return result;
+                }
+            });
+        });
+        return result;
+    };
+
 </script>
 
 {#if currentAgentDetails}
@@ -52,6 +76,7 @@
         agentLogo={currentAgentDetails?.metadata?.avatar_id}
         agentIsDataSourceIndexed={currentAgentDetails.data_sources_indexed}
         agentId={currentAgentDetails?.name}
+        agentDataSources={agentDataSources}
     />
 {/if}
 

From 81fae5b14fd7c6159a8abc5c253c8a2f1d81f99d Mon Sep 17 00:00:00 2001
From: Samyak Jain <56000318+samyakkkk@users.noreply.github.com>
Date: Mon, 12 Aug 2024 12:50:58 +0530
Subject: [PATCH 3/4] (feat): copy badge button added

---
 web/src/lib/components/SettingsAgent.svelte | 61 +++++++++++----------
 web/src/lib/utils/copyToClipboard.ts        |  9 +++
 2 files changed, 40 insertions(+), 30 deletions(-)
 create mode 100644 web/src/lib/utils/copyToClipboard.ts

diff --git a/web/src/lib/components/SettingsAgent.svelte b/web/src/lib/components/SettingsAgent.svelte
index 7998e84d..da10d1f2 100644
--- a/web/src/lib/components/SettingsAgent.svelte
+++ b/web/src/lib/components/SettingsAgent.svelte
@@ -6,7 +6,7 @@
     import CarbonGithub from "~icons/carbon/logo-github";
     import CarbonCode from "~icons/carbon/code";
     import CarbonWorld from "~icons/carbon/wikis";
-
+    import { copyToClipboard } from "$lib/utils/copyToClipboard";
     export let showModalSettings: boolean;
     export let onClose: () => void;
     export let agentDisplayName: string = "";
@@ -16,6 +16,19 @@
     export let agentDataSources: Array<any> = [];
 
     $: selectedOption = "info";
+
+    const badgeMarkdown = `<a href="https://app.commanddash.io/agent/${agentId}"><img src="https://img.shields.io/badge/Ask-AI%20Assist-EB9FDA?style=for-the-badge"></a>`;
+    const badgeUrl = `https://app.commanddash.io/agent/${agentId}`;
+
+    function copyBadgeCode() {
+        copyToClipboard(badgeMarkdown);
+        alert("Badge code copied to clipboard!");
+    }
+
+    function copyBadgeUrl() {
+        copyToClipboard(badgeUrl);
+        alert("URL copied to clipboard!");
+    }
 </script>
 
 {#if showModalSettings}
@@ -26,7 +39,7 @@
         <dialog
             in:fly={{ y: 100 }}
             open
-            class="h-[95dvh] w-[90dvw] overflow-hidden rounded-2xl border-gray-800/70 bg-gray-950 hover:bg-gray-950 shadow-2xl outline-none sm:h-[85dvh] xl:w-[1200px] 2xl:h-[75dvh]"
+            class="h-[95dvh] w-[90dvw] overflow-hidden rounded-2xl border-gray-800/70 bg-gray-950 shadow-2xl outline-none sm:h-[85dvh] xl:w-[1200px] 2xl:h-[75dvh]"
         >
             <div
                 class="grid h-full w-full grid-cols-1 grid-rows-[auto,1fr] content-start gap-x-4 overflow-hidden p-4 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8"
@@ -49,11 +62,6 @@
                 <div
                     class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[245px] max-md:border max-md:border-b-2 md:pr-6"
                 >
-                    <!-- <h3
-                        class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1"
-                    >
-                        Options
-                    </h3> -->
                     <button
                         class={`group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 hover:text-gray-800 md:rounded-xl ${selectedOption === "info" ? "!bg-gray-100 !text-gray-800" : "text-white"}`}
                         on:click={() => {
@@ -62,19 +70,11 @@
                     >
                         Info
                     </button>
-                    <button
-                        class={`group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 hover:text-gray-800 md:rounded-xl ${selectedOption === "share" ? "!bg-gray-100 !text-gray-800" : "text-white"}`}
-                        on:click={() => {
-                            selectedOption = "share";
-                        }}
-                    >
-                        Share
-                    </button>
                 </div>
                 <div
                     class="col-span-1 w-full overflow-y-auto overflow-x-clip px-1 max-md:pt-4 md:col-span-2 md:row-span-2"
                 >
-                    <div class="flex h-full flex-col gap-2">
+                    <div class="flex h-full flex-col gap-4">
                         {#if selectedOption === "info"}
                             <div class="flex gap-6">
                                 <img
@@ -89,27 +89,28 @@
                                         >
                                             {agentDisplayName}
                                         </h1>
-                                        <!-- <span
-                                        class="ml-1 rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500">{currentAgent.version}</span> -->
                                     </div>
                                     <p
                                         class="mb-2 line-clamp-2 text-sm text-gray-500"
                                     >
                                         {agentDescription}
                                     </p>
-                                    <!-- <p class="text-sm text-gray-500">
-                                    Created by <a
-                                        class="underline"
-                                        target="_blank"
-                                        href={currentAgent.author.source_url}
-                                        >{currentAgent.author.name}</a
-                                    >
-                                </p> -->
                                 </div>
                             </div>
-                            <div>
-                                <h2 class="text-lg font-semibold">
-                                    Data sources
+                            <div class="flex flex-col gap-4">
+                                <div>
+                                    <h2 class="text-lg font-semibold text-white">Link Badge in README or Documentation</h2>
+                                    <div class="flex items-center gap-4">
+                                        <a href={badgeUrl}>
+                                            <img src="https://img.shields.io/badge/Ask-AI%20Assist-EB9FDA?style=for-the-badge" alt="Ask AI Assist Badge">
+                                        </a>
+                                        <button class="btn text-gray-500" on:click={copyBadgeCode}>Copy Badge Code</button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="mt-6">
+                                <h2 class="text-lg font-semibold text-white">
+                                    Data Sources
                                 </h2>
                                 {#each agentDataSources as sourceData}
                                     <a
@@ -133,7 +134,7 @@
                                     </a>
                                 {/each}
                             </div>
-                            {:else if selectedOption === "share"}
+                        {:else if selectedOption === "share"}
                             <span class="text-white">share</span>
                         {/if}
                     </div>
diff --git a/web/src/lib/utils/copyToClipboard.ts b/web/src/lib/utils/copyToClipboard.ts
new file mode 100644
index 00000000..0481bfb3
--- /dev/null
+++ b/web/src/lib/utils/copyToClipboard.ts
@@ -0,0 +1,9 @@
+// src/lib/utils/copyToClipboard.ts
+export function copyToClipboard(text: string) {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textarea);
+}
\ No newline at end of file

From 579cfb34fa90343e7ce37a7d3f7ac78d371ff5cb Mon Sep 17 00:00:00 2001
From: Samyak Jain <56000318+samyakkkk@users.noreply.github.com>
Date: Mon, 12 Aug 2024 13:03:54 +0530
Subject: [PATCH 4/4] (feat): renamed to AI Code Agent

---
 web/README.md                               |  2 +-
 web/src/lib/components/SettingsAgent.svelte | 11 +++--------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/web/README.md b/web/README.md
index 5ce67661..33f21478 100644
--- a/web/README.md
+++ b/web/README.md
@@ -1,5 +1,5 @@
 # create-svelte
-
+<a href="https://app.commanddash.io/agent/github_abpframework_abp"><img src="https://img.shields.io/badge/AI-Code%20Agent-EB9FDA"></a>
 Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
 
 ## Creating a project
diff --git a/web/src/lib/components/SettingsAgent.svelte b/web/src/lib/components/SettingsAgent.svelte
index da10d1f2..80787c10 100644
--- a/web/src/lib/components/SettingsAgent.svelte
+++ b/web/src/lib/components/SettingsAgent.svelte
@@ -17,17 +17,12 @@
 
     $: selectedOption = "info";
 
-    const badgeMarkdown = `<a href="https://app.commanddash.io/agent/${agentId}"><img src="https://img.shields.io/badge/Ask-AI%20Assist-EB9FDA?style=for-the-badge"></a>`;
+    const badgeMarkdown = `<a href="https://app.commanddash.io/agent/${agentId}"><img src="https://img.shields.io/badge/AI-Code%20Agent-EB9FDA"></a>`;
     const badgeUrl = `https://app.commanddash.io/agent/${agentId}`;
 
     function copyBadgeCode() {
         copyToClipboard(badgeMarkdown);
-        alert("Badge code copied to clipboard!");
-    }
-
-    function copyBadgeUrl() {
-        copyToClipboard(badgeUrl);
-        alert("URL copied to clipboard!");
+        alert("Badge code copied.");
     }
 </script>
 
@@ -102,7 +97,7 @@
                                     <h2 class="text-lg font-semibold text-white">Link Badge in README or Documentation</h2>
                                     <div class="flex items-center gap-4">
                                         <a href={badgeUrl}>
-                                            <img src="https://img.shields.io/badge/Ask-AI%20Assist-EB9FDA?style=for-the-badge" alt="Ask AI Assist Badge">
+                                            <img src="https://img.shields.io/badge/AI-Code%20Agent-EB9FDA?style=for-the-badge" alt="AI Code Agent Badge">
                                         </a>
                                         <button class="btn text-gray-500" on:click={copyBadgeCode}>Copy Badge Code</button>
                                     </div>