diff --git a/web/src/lib/components/ExpandNavigation.svelte b/web/src/lib/components/ExpandNavigation.svelte new file mode 100644 index 00000000..03bdf83f --- /dev/null +++ b/web/src/lib/components/ExpandNavigation.svelte @@ -0,0 +1,18 @@ + + + diff --git a/web/src/lib/components/MobileNav.svelte b/web/src/lib/components/MobileNav.svelte new file mode 100644 index 00000000..4076d9d1 --- /dev/null +++ b/web/src/lib/components/MobileNav.svelte @@ -0,0 +1,63 @@ + + + + + diff --git a/web/src/lib/components/NavMenu.svelte b/web/src/lib/components/NavMenu.svelte index 061ee668..5a20909b 100644 --- a/web/src/lib/components/NavMenu.svelte +++ b/web/src/lib/components/NavMenu.svelte @@ -1,40 +1,51 @@ -
- - CommandDash - +
+ + CommandDash + +
-

Today

- + -->
+ - Assistants + Explore agents New + import { fade } from "svelte/transition"; + import { ToastType } from "$lib/types/Toast"; + + import IconDazzled from "$lib/components/icons/IconDazzled.svelte"; + + import CarbonError from "~icons/carbon/error"; + import CarbonInformation from "~icons/carbon/information-filled"; + import CarbonCheck from "~icons/carbon/checkmark-filled"; + + export let message: string | null = ""; + export let toastType: ToastType | null = ToastType.INFO; + + + +
+
+ {#if ToastType.SUCCESS === toastType} + + {:else if ToastType.INFO === toastType} + + {:else if ToastType.ERROR === toastType} + + {/if} +

{message}

+
+
diff --git a/web/src/lib/components/chat/ChatIntroduction.svelte b/web/src/lib/components/chat/ChatIntroduction.svelte index cfac8f0c..068cfa86 100644 --- a/web/src/lib/components/chat/ChatIntroduction.svelte +++ b/web/src/lib/components/chat/ChatIntroduction.svelte @@ -1,46 +1,46 @@
@@ -82,7 +82,8 @@
- Data source is currently being indexed. Please visit us again later. Thank you for your patience. + Data source is currently being indexed. Please visit us + again later. Thank you for your patience.

+
+ + +
{/if}
diff --git a/web/src/lib/components/chat/ChatWindow.svelte b/web/src/lib/components/chat/ChatWindow.svelte index f58d3d91..5953b6de 100644 --- a/web/src/lib/components/chat/ChatWindow.svelte +++ b/web/src/lib/components/chat/ChatWindow.svelte @@ -13,6 +13,7 @@ export let loading = false; export let agentName: string = "dash"; export let agentDisplayName: string = "Dash"; + export let agentId: string = ""; export let agentDescription: string = "Default Agent Dash"; export let agentLogo: string = ""; export let agentVersion: string = "1.0.3"; @@ -65,6 +66,8 @@ ...messages, { role: "model", text: modelResponse.response, references: modelResponse.references }, ]; + + console.log('model response', modelResponse); } catch (error) { console.log("error", error); } @@ -113,6 +116,7 @@ {agentDisplayName} {agentLogo} {agentIsDataSourceIndexed} + {agentId} /> {/if}
diff --git a/web/src/lib/components/icons/IconDazzled.svelte b/web/src/lib/components/icons/IconDazzled.svelte new file mode 100644 index 00000000..a57479e3 --- /dev/null +++ b/web/src/lib/components/icons/IconDazzled.svelte @@ -0,0 +1,36 @@ + + + + + + + + + + + + diff --git a/web/src/lib/components/icons/IconNew.svelte b/web/src/lib/components/icons/IconNew.svelte new file mode 100644 index 00000000..581f76b8 --- /dev/null +++ b/web/src/lib/components/icons/IconNew.svelte @@ -0,0 +1,18 @@ + + + diff --git a/web/src/lib/stores/ToastStores.ts b/web/src/lib/stores/ToastStores.ts new file mode 100644 index 00000000..ebe95560 --- /dev/null +++ b/web/src/lib/stores/ToastStores.ts @@ -0,0 +1,9 @@ +import type { ToastType } from "$lib/types/Toast"; +import { writable } from "svelte/store"; + +interface Toast { + message: string; + type: ToastType +} + +export const toastStore = writable(null); diff --git a/web/src/lib/types/Agent.ts b/web/src/lib/types/Agent.ts index 816ae6a0..8c2b2de4 100644 --- a/web/src/lib/types/Agent.ts +++ b/web/src/lib/types/Agent.ts @@ -1,4 +1,10 @@ export type Agent = { + author: { + github_id: string, + id: string, + name: string, + source_url: string | null + }, chat_mode: { data_sources: string[], system_prompt: string, diff --git a/web/src/lib/types/MarketPlace.ts b/web/src/lib/types/MarketPlace.ts new file mode 100644 index 00000000..772e8312 --- /dev/null +++ b/web/src/lib/types/MarketPlace.ts @@ -0,0 +1,5 @@ +export enum SortKey { + POPULAR = "popular", + TRENDING = "trending", + NEW = "new" +} \ No newline at end of file diff --git a/web/src/lib/types/Toast.ts b/web/src/lib/types/Toast.ts new file mode 100644 index 00000000..9473ecd9 --- /dev/null +++ b/web/src/lib/types/Toast.ts @@ -0,0 +1,5 @@ +export enum ToastType { + ERROR = "error", + INFO = "info", + SUCCESS = "success" +} \ No newline at end of file diff --git a/web/src/lib/utils/debounce.ts b/web/src/lib/utils/debounce.ts new file mode 100644 index 00000000..c8b7560a --- /dev/null +++ b/web/src/lib/utils/debounce.ts @@ -0,0 +1,17 @@ +/** + * A debounce function that works in both browser and Nodejs. + * For pure Nodejs work, prefer the `Debouncer` class. + */ +export function debounce( + callback: (...rest: T) => unknown, + limit: number +): (...rest: T) => void { + let timer: ReturnType; + + return function (...rest) { + clearTimeout(timer); + timer = setTimeout(() => { + callback(...rest); + }, limit); + }; +} diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index ceb01fe9..7130b104 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -1,21 +1,81 @@ -
- + + + + + + - -
+ {#if toastMessage} + + {/if} +
+ +
+ diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte index a34bb5c7..7ef48e96 100644 --- a/web/src/routes/+page.svelte +++ b/web/src/routes/+page.svelte @@ -5,7 +5,7 @@ import ChatWindow from "$lib/components/chat/ChatWindow.svelte"; onMount(() => { - goto('agent/dash'); + goto('/marketplace'); }); diff --git a/web/src/routes/agent/+page.svelte b/web/src/routes/agent/+page.svelte index 616f1658..3cb99f74 100644 --- a/web/src/routes/agent/+page.svelte +++ b/web/src/routes/agent/+page.svelte @@ -8,35 +8,33 @@ import LoadingPage from "$lib/components/LoadingPage.svelte"; let currentAgentDetails: Agent; + let errorMessage: string = "Something went wrong"; $: 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 }), - }, - ); + const ref: string = $page.url.searchParams.get("github") || ""; - if (!response.ok) { - loading = false; - throw pageError(404, "Agent not found"); - } + const response = await fetch( + "https://api.commanddash.dev/agent/get-latest-agent", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ referrer: ref }), + }, + ); - currentAgentDetails = (await response.json()) as Agent; - } catch (error) { - console.log("error", error); - } finally { + const _response = await response.json(); + if (!response.ok) { loading = false; + errorMessage = _response.message; + throw pageError(response.status, _response.message); } + + currentAgentDetails = _response as Agent; + loading = false; }); @@ -50,6 +48,7 @@ agentDescription={currentAgentDetails?.metadata?.description} agentLogo={currentAgentDetails?.metadata?.avatar_id} agentIsDataSourceIndexed={currentAgentDetails.data_sources_indexed} + agentId={currentAgentDetails?.name} /> {/if} @@ -57,8 +56,9 @@ {:else if !loading && !currentAgentDetails}
+ class="h-screen inline-flex justify-center items-center flex-col" + >

Error:

-

Something went wrong

+

{errorMessage}

{/if} diff --git a/web/src/routes/agent/[id]/+page.svelte b/web/src/routes/agent/[id]/+page.svelte index 08fa1dca..c4f6b0bf 100644 --- a/web/src/routes/agent/[id]/+page.svelte +++ b/web/src/routes/agent/[id]/+page.svelte @@ -8,35 +8,36 @@ import LoadingPage from "$lib/components/LoadingPage.svelte"; let currentAgentDetails: Agent; + let errorMessage: string = "Something went wrong"; + let errorStatus: number = 0; $: loading = true; 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", - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ name: id, referrer: ref }), - }, - ); - - if (!response.ok) { - loading = false; - throw error(404, "Agent not found"); - } + const ref: string = $page.url.searchParams.get("github") || ""; - currentAgentDetails = (await response.json()) as Agent; - } catch (error) { - console.log("error", error); - } finally { + const response = await fetch( + "https://api.commanddash.dev/agent/get-latest-agent", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ name: id, referrer: ref }), + }, + ); + const _response = await response.json(); + if (!response.ok) { loading = false; + errorMessage = _response.message; + errorStatus = response.status; + throw error(response.status, _response.message); } + + currentAgentDetails = _response as Agent; + + loading = false; }); @@ -49,6 +50,7 @@ agentDisplayName={currentAgentDetails?.metadata?.display_name} agentDescription={currentAgentDetails?.metadata?.description} agentLogo={currentAgentDetails?.metadata?.avatar_id} + agentId={currentAgentDetails?.name} /> {/if} @@ -56,8 +58,9 @@ {:else if !loading && !currentAgentDetails}
-

404

-

No agent found

+ class="h-screen inline-flex justify-center items-center flex-col" + > +

{errorStatus}

+

{errorMessage}

{/if} diff --git a/web/src/routes/marketplace/+page.svelte b/web/src/routes/marketplace/+page.svelte new file mode 100644 index 00000000..e183eb08 --- /dev/null +++ b/web/src/routes/marketplace/+page.svelte @@ -0,0 +1,192 @@ + + + + CommandDash - Explore Agents + + + + + +
+
+
+

Marketplace

+
+

+ Explore the agents in the marketplace made by dev community +

+
+
+ + search(e.currentTarget.value)} + /> +
+ +
+ {#if loading} +
+
+ Loading results +
+
+
+ {:else} +
+
+ {#each filteredAgents as agent} + + {/each} +
+ {/if} +
+
+ \ No newline at end of file