From e20a1e9b6249b542536fe6434294806268356087 Mon Sep 17 00:00:00 2001 From: Samyak Jain <56000318+samyakkkk@users.noreply.github.com> Date: Sun, 25 Aug 2024 23:22:46 +0530 Subject: [PATCH] (feat): show highlighted agents --- .../lib/components/CreateAgentDialog.svelte | 11 +- web/src/routes/+page.svelte | 275 +++++++----------- 2 files changed, 110 insertions(+), 176 deletions(-) diff --git a/web/src/lib/components/CreateAgentDialog.svelte b/web/src/lib/components/CreateAgentDialog.svelte index 02d6805..a709b2a 100644 --- a/web/src/lib/components/CreateAgentDialog.svelte +++ b/web/src/lib/components/CreateAgentDialog.svelte @@ -27,7 +27,15 @@ // Preload the sound effect soundEffect = new Audio('whoosh.mp3'); soundEffect.preload = 'auto'; - soundEffect.volume = 0.5 + soundEffect.volume = 0.5; + + // Preload the images + platforms.forEach(platform => { + if (platform.id !== 'github') { + const img = new Image(); + img.src = platform.icon; + } + }); } const onCreateAgent = () => { @@ -78,7 +86,6 @@ {:else} {/if} - {platform.label} diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte index 128da48..1866357 100644 --- a/web/src/routes/+page.svelte +++ b/web/src/routes/+page.svelte @@ -18,6 +18,7 @@ let searchValue: string = ""; let showModal: boolean = false; let currentAgent: Agent; + let sections: { [key: string]: Agent[] } = {}; const promotedAgent: Agent = { name: "promoted-agent", @@ -36,33 +37,51 @@ onMount(async () => { loading = true; - const response = await fetch( - "https://api.commanddash.dev/agent/web/get-agent-list", - { - headers: { - "Content-Type": "application/json", - }, - method: "POST", - body: JSON.stringify({ cli_version: "0.0.1" }), - }, - ); + try { + const [existingResponse, newResponse] = await Promise.all([ + fetch("https://api.commanddash.dev/agent/web/get-agent-list", { + headers: { + "Content-Type": "application/json", + }, + method: "POST", + body: JSON.stringify({ cli_version: "0.0.1" }), + }), + fetch("https://api.commanddash.dev/agent/web/get-highlighted-agent-list", { + headers: { + "Content-Type": "application/json", + }, + method: "POST", + body: JSON.stringify({ cli_version: "0.0.1" }), + }) + ]); - const _response = await response.json(); - if (!response.ok) { - loading = false; - appInsights.trackException({ - error: new Error("Failed to fetch agents"), - }); // Track - } - agents = _response; - filteredAgents = _response; - loading = false; - appInsights.trackEvent({ name: "AgentsLoaded" }); // Track custom event + const existingAgents = await existingResponse.json(); + const newAgents = await newResponse.json(); + + if (!existingResponse.ok || !newResponse.ok) { + throw new Error("Failed to fetch agents"); + } + + agents = existingAgents; + filteredAgents = existingAgents; + + // Combine agents from new API into sections + sections = newAgents; + + // Add existing agents under "All Agents" section + sections["All Agents"] = existingAgents; + + appInsights.trackEvent({ name: "AgentsLoaded" }); // Track custom event - // Check if the 'create' query parameter is set to 'true' - const urlParams = new URLSearchParams(window.location.search); - if (urlParams.get('create') === 'true') { - showModal = true; + // Check if the 'create' query parameter is set to 'true' + const urlParams = new URLSearchParams(window.location.search); + if (urlParams.get('create') === 'true') { + showModal = true; + } + } catch (error) { + appInsights.trackException({ error }); + } finally { + loading = false; } }); @@ -81,11 +100,11 @@ agent.metadata.display_name .toLowerCase() .includes(searchValue) || - agent.author.name.toLowerCase().includes(searchValue) || - agent.author.source_url?.toLowerCase().includes(searchValue) + agent.author?.name.toLowerCase().includes(searchValue) || + agent.author?.source_url?.toLowerCase().includes(searchValue) ); }); - appInsights.trackEvent({ name: "Search", properties: { searchValue } }); // Track cus + appInsights.trackEvent({ name: "Search", properties: { searchValue } }); // Track custom event }, SEARCH_DEBOUNCE_DELAY); const formatGithubUrl = (url: string) => { @@ -122,10 +141,10 @@