Merge pull request #319 from CommandDash/web-app-github-badge

Web app GitHub badge

web/package.json

@@ -15,6 +15,7 @@
 	},
 	"devDependencies": {
 		"@iconify-json/carbon": "^1.1.36",
+		"@iconify/svelte": "^4.0.2",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-node": "^5.2.0",
 		"@sveltejs/kit": "^2.0.0",

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

@@ -1,9 +1,11 @@
 <script lang="ts">
     import IconVisualStudio from "../icons/IconVisualStudio.svelte";
+    import Icon from "@iconify/svelte";
 
     export let agentDisplayName: string = "";
     export let agentDescription: string = "";
     export let agentLogo: string = "";
+    export let agentIsDataSourceIndexed: boolean = true;
 
     const questionnaires: Array<{
         id: string;
@@ -60,15 +62,40 @@
         </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">
-			<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">
+        <div
+            class="overflow-hidden rounded border dark:border-gray-800 cursor-pointer"
+        >
+            <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>
+        </div>
     </div>
     <div class="lg:col-span-3 lg:mt-6">
-        <!-- <p class="mb-3 text-gray-600 dark:text-gray-300">Use case</p> -->
+        {#if !agentIsDataSourceIndexed}
+            <div class="overflow-hidden rounded-xl border dark:border-gray-800">
+                <div class="flex p-3">
+                    <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.
+                    </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"
+                    >
+                        <Icon
+                            icon="material-symbols:info"
+                            width="24px"
+                            height="24px"
+                        />
+                    </p>
+                </div>
+            </div>
+        {/if}
         <div class="grid gap-3 lg:grid-cols-2 lg:gap-5">
             <!-- {#each questionnaires as questionnaire}
                 <button

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

@@ -1,19 +1,29 @@
 <script lang="ts">
     import showdown from "showdown";
+    import { writable } from "svelte/store";
+    import Icon from "@iconify/svelte";
     import IconVisualStudio from "../icons/IconVisualStudio.svelte";
     import type { Message } from "$lib/types/Message";
 
     export let messages: Message[] = [];
     export let agentLogo: string = "";
     export let agentDisplayName: string = "";
-    export let agentReferences: Array<any> = [];
 
     let showAllLinks: boolean = false;
 
-    $: validReferences = agentReferences.filter((link) => link.url);
-
-    const toggleShowLinks = () => {
-        showAllLinks = !showAllLinks;
+    // Store to track which messages have their links expanded
+    const expandedMessages = writable(new Set<string>());
+
+    // Toggle the expanded state for a specific message
+    const toggleShowLinks = (id: string) => {
+        expandedMessages.update((expanded) => {
+            if (expanded.has(id)) {
+                expanded.delete(id);
+            } else {
+                expanded.add(id);
+            }
+            return expanded;
+        });
     };
 
     const markdownToPlain = (message: string) => {
@@ -32,6 +42,28 @@
         return converter.makeHtml(message);
     };
 
+    // Helper function to format URLs
+    const formatUrl = (url: string) => {
+        const truncateText = (text: string, maxLength: number) => {
+            return text.length > maxLength
+                ? "..." + text.slice(-maxLength)
+                : text;
+        };
+
+        const githubMatch = url.match(/github\.com\/(.+)/);
+        if (githubMatch) {
+            const formattedText = githubMatch[1].replace(/\//g, "-");
+            return {
+                icon: "mdi:github",
+                text: truncateText(formattedText, 50),
+            };
+        } else {
+            const urlObj = new URL(url);
+            const formattedText = urlObj.pathname.slice(1).replace(/\//g, "/");
+            return { icon: "mdi:web", text: truncateText(formattedText, 50) };
+        }
+    };
+
     const isInsideCodeBlock = (line: string, codeBlockRegex: RegExp) => {
         return codeBlockRegex.test(line);
     };
@@ -97,8 +129,8 @@
     };
 </script>
 
-{#each messages as message}
-    {#if message?.role === "user"}
+{#each messages as message, index}
+    {#if message.role === "user"}
         <div
             class="group relative w-full items-start justify-start gap-4 max-sm:text-sm"
             role="presentation"
@@ -140,24 +172,35 @@
                 </div>
                 <div class="mx-auto grid gap-4 md:grid-cols-2">
                     <div class="md:col-span-1 inline-flex flex-col">
-                        {#if validReferences.length > 0}
+                        {#if (message.references || []).length > 0}
                             <span> Source </span>
-                            {#each validReferences.slice(0, showAllLinks ? validReferences.length : 2) as link}
+                            {#each (message.references || []).slice(0, $expandedMessages.has(message.role + index) ? message?.references?.length : 2) as link}
                                 {#if link.url}
-                                    <a
-                                        href={link.url}
-                                        target="_blank"
-                                        class="cursor-pointer hover:text-violet-500 underline"
-                                        >{link.url}</a
-                                    >
+                                    {#await Promise.resolve(formatUrl(link.url)) then { icon, text }}
+                                        <a
+                                            href={link.url}
+                                            target="_blank"
+                                            class="cursor-pointer hover:text-violet-500 underline"
+                                        >
+                                            <span
+                                                class="icon inline-flex flex-row items-center"
+                                            >
+                                                <Icon {icon} />
+                                                /{text}
+                                            </span>
+                                        </a>
+                                    {/await}
                                 {/if}
                             {/each}
-                            {#if validReferences.length > 2}
+                            {#if (message.references || []).length > 2}
                                 <span
-                                    on:click={toggleShowLinks}
+                                    on:click={() =>
+                                        toggleShowLinks(message.role + index)}
                                     class="mt-2 text-blue-500 hover:text-blue-700 underline cursor-pointer"
                                 >
-                                    {showAllLinks ? "Read Less" : "Read More"}
+                                    {$expandedMessages.has(message.role + index)
+                                        ? "Read Less"
+                                        : "Read More"}
                                 </span>
                             {/if}
                         {/if}

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

@@ -17,6 +17,7 @@
     export let agentLogo: string = "";
     export let agentVersion: string = "1.0.3";
     export let agentPrivate: boolean = false;
+    export let agentIsDataSourceIndexed: boolean = true;
 
     let agentReferences: Array<any> = [];
     let messageLoading: boolean = false;
@@ -35,7 +36,6 @@
         messageLoading = true;
 
         messages = [...messages, { role: "user", text: message }];
-        debugger;
 
 
         const agentData = {
@@ -49,7 +49,6 @@
         message = "";
 
         try {
-            debugger;
             const response = await fetch(
                 "https://api.commanddash.dev/v2/ai/agent/answer",
                 {
@@ -64,9 +63,8 @@
             const modelResponse = await response.json();
             messages = [
                 ...messages,
-                { role: "model", text: modelResponse.response },
+                { role: "model", text: modelResponse.response, references: modelResponse.references },
             ];
-            agentReferences = modelResponse.references;
         } catch (error) {
             console.log("error", error);
         }
@@ -83,7 +81,7 @@
             <div class="flex h-max flex-col gap-6 pb-40 2xl:gap-7">
                 {#if messages.length > 0}
                     {#if !loading}
-                        <ChatMessage {messages} {agentLogo} {agentDisplayName} {agentReferences} />
+                        <ChatMessage {messages} {agentLogo} {agentDisplayName} />
                         {#if messageLoading}
                             {#if LottiePlayer}
                                 <div
@@ -114,6 +112,7 @@
                         {agentDescription}
                         {agentDisplayName}
                         {agentLogo}
+                        {agentIsDataSourceIndexed}
                     />
                 {/if}
             </div>

web/src/lib/types/Agent.ts

@@ -4,6 +4,7 @@ export type Agent = {
         system_prompt: string,
         version: string
     },
+    data_sources_indexed: boolean,
     description: string,
     metadata: {
         avatar_id: string,

web/src/lib/types/Message.ts

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

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { error as pageError } from "@sveltejs/kit";
+    import { page } from "$app/stores";
+
+    import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
+    import { type Agent } from "$lib/types/Agent";
+    import LoadingPage from "$lib/components/LoadingPage.svelte";
+
+    let currentAgentDetails: Agent;
+    $: loading = true;
+
+    onMount(async () => {
+        loading = true;
+        const ref: string = $page.url.searchParams.get('github') || "";
+        console.log('ref', ref);
+        try {
+            const response = await fetch(
+                "https://api.commanddash.dev/agent/get-latest-agent",
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ referrer: ref }),
+                },
+            );
+
+            if (!response.ok) {
+                loading = false;
+                throw pageError(404, "Agent not found");
+            }
+
+            currentAgentDetails = (await response.json()) as Agent;
+        } catch (error) {
+            console.log("error", error);
+        } finally {
+            loading = false;
+        }
+    });
+</script>
+
+{#if currentAgentDetails}
+    <ChatWindow
+        {loading}
+        agentName={currentAgentDetails?.name}
+        agentPrivate={currentAgentDetails?.testing}
+        agentVersion={currentAgentDetails?.version}
+        agentDisplayName={currentAgentDetails?.metadata?.display_name}
+        agentDescription={currentAgentDetails?.metadata?.description}
+        agentLogo={currentAgentDetails?.metadata?.avatar_id}
+        agentIsDataSourceIndexed={currentAgentDetails.data_sources_indexed}
+    />
+{/if}
+
+{#if loading}
+    <LoadingPage />
+{:else if !loading && !currentAgentDetails}
+    <div
+        class="h-screen w-screen inline-flex justify-center items-center flex-col">
+        <h1 class="text-2xl">Error:</h1>
+        <h1 class="text-xl">Something went wrong</h1>
+    </div>
+{/if}

web/src/routes/agent/[id]/+page.svelte

@@ -13,6 +13,7 @@
     onMount(async () => {
         loading = true;
         const id: string = $page.params?.id;
+        const ref: string = $page.url.searchParams.get('github') || "";
         try {
             const response = await fetch(
                 "https://api.commanddash.dev/agent/get-latest-agent",
@@ -21,7 +22,7 @@
                     headers: {
                         "Content-Type": "application/json",
                     },
-                    body: JSON.stringify({ name: id }),
+                    body: JSON.stringify({ name: id, referrer: ref }),
                 },
             );
 
@@ -55,8 +56,7 @@
     <LoadingPage />
 {:else if !loading && !currentAgentDetails}
     <div
-        class="h-screen w-screen inline-flex justify-center items-center flex-col"
-    >
+        class="h-screen w-screen inline-flex justify-center items-center flex-col">
         <h1 class="text-2xl">404</h1>
         <h1 class="text-xl">No agent found</h1>
     </div>