Merge pull request #326 from CommandDash/web-agents-settings

Web agents settings

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

web/src/lib/components/SettingsAgent.svelte

@@ -0,0 +1,140 @@
+<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";
+    import { copyToClipboard } from "$lib/utils/copyToClipboard";
+    export let showModalSettings: boolean;
+    export let onClose: () => void;
+    export let agentDisplayName: string = "";
+    export let agentDescription: string = "";
+    export let agentLogo: string = "";
+    export let agentId: string = "";
+    export let agentDataSources: Array<any> = [];
+
+    $: selectedOption = "info";
+
+    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.");
+    }
+</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 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"
+            >
+                <div
+                    class="col-span-1 mb-4 flex items-center justify-between md:col-span-3"
+                >
+                    <h2 class="text-xl font-bold text-white">Settings</h2>
+                    <button
+                        class="btn rounded-lg"
+                        on:click={() => {
+                            onClose();
+                        }}
+                    >
+                        <CarbonClose
+                            class="text-xl text-white hover:text-gray-500"
+                        />
+                    </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"
+                >
+                    <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={() => {
+                            selectedOption = "info";
+                        }}
+                    >
+                        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"
+                >
+                    <div class="flex h-full flex-col gap-4">
+                        {#if selectedOption === "info"}
+                            <div class="flex gap-6">
+                                <img
+                                    alt="Avatar"
+                                    class="size-16 flex-none rounded-full object-cover sm:size-24"
+                                    src={agentLogo}
+                                />
+                                <div class="flex-1">
+                                    <div class="mb-1.5">
+                                        <h1
+                                            class="mr-1 inline text-xl font-semibold text-white"
+                                        >
+                                            {agentDisplayName}
+                                        </h1>
+                                    </div>
+                                    <p
+                                        class="mb-2 line-clamp-2 text-sm text-gray-500"
+                                    >
+                                        {agentDescription}
+                                    </p>
+                                </div>
+                            </div>
+                            <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/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>
+                                </div>
+                            </div>
+                            <div class="mt-6">
+                                <h2 class="text-lg font-semibold text-white">
+                                    Data Sources
+                                </h2>
+                                {#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="#"
+                                    >
+                                        <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>
+                        {:else if selectedOption === "share"}
+                            <span class="text-white">share</span>
+                        {/if}
+                    </div>
+                </div>
+            </div>
+        </dialog>
+    </div>
+{/if}

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

@@ -7,12 +7,16 @@
     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> = [
@@ -28,7 +32,6 @@
             recipient_mail: emailValue,
             notify_for: "data_index",
         };
-        debugger;
         try {
             const response = await fetch(
                 "https://api.commanddash.dev/agent/notify",
@@ -40,7 +43,6 @@
                     },
                 },
             );
-            debugger;
 
             const _response = await response.json();
 
@@ -119,21 +121,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"
-                on:click={trackLinkClick}
-            >
-                <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">
@@ -185,3 +191,15 @@
         </div>
     </div>
 </div>
+
+<SettingsAgent
+    bind:showModalSettings
+    bind:agentDisplayName
+    bind:agentDescription
+    bind:agentId
+    bind:agentLogo
+    bind:agentDataSources
+    onClose={() => {
+        showModalSettings = false;
+    }}
+/>

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

@@ -25,6 +25,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;
@@ -172,6 +173,7 @@
                         {agentLogo}
                         {agentIsDataSourceIndexed}
                         {agentId}
+                        {agentDataSources}
                     />
                 {/if}
             </div>

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,

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);
+}

web/src/routes/+page.svelte

@@ -5,6 +5,8 @@
     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";
@@ -16,6 +18,7 @@
     let filteredAgents: Agent[] = [];
     let searchValue: string = "";
     let showModal: boolean = false;
+    let currentAgent: Agent;
 
     $: loading = true;
 

web/src/routes/agent/+page.svelte

@@ -10,6 +10,10 @@
 
     let currentAgentDetails: Agent;
     let errorMessage: string = "Something went wrong";
+    let agentDataSources: Array<any> = [];
+    
+    const limit: number = 10;
+
     $: loading = true;
 
     onMount(async () => {
@@ -40,6 +44,7 @@
         }
 
         currentAgentDetails = _response as Agent;
+        agentDataSources = extractUris(currentAgentDetails?.data_sources)
         loading = false;
         // Track custom event for agent details loaded
         appInsights.trackEvent({
@@ -51,6 +56,26 @@
             },
         });
     });
+
+    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}
@@ -64,6 +89,7 @@
         agentLogo={currentAgentDetails?.metadata?.avatar_id}
         agentIsDataSourceIndexed={currentAgentDetails.data_sources_indexed}
         agentId={currentAgentDetails?.name}
+        agentDataSources={agentDataSources}
     />
 {/if}
 

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}