From 6383cf9d2c25350be608d8533eaf2d2ddadbca42 Mon Sep 17 00:00:00 2001 From: "Alvaro S. P. Silva" Date: Fri, 17 Jan 2025 04:39:57 -0300 Subject: [PATCH 1/3] feature: Creating Archetype Selector --- client/src/App.tsx | 5 + client/src/components/app-sidebar.tsx | 42 ++++--- client/src/components/archetype-selector.tsx | 116 +++++++++++++++++ client/src/lib/api.ts | 6 + client/src/lib/info.json | 2 +- client/src/types/archetypes.ts | 124 +++++++++++++++++++ packages/client-direct/src/api.ts | 44 ++++--- 7 files changed, 303 insertions(+), 36 deletions(-) create mode 100644 client/src/components/archetype-selector.tsx create mode 100644 client/src/types/archetypes.ts diff --git a/client/src/App.tsx b/client/src/App.tsx index e7c13846c4f..126d9d423c8 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -9,6 +9,7 @@ import Chat from "./routes/chat"; import Overview from "./routes/overview"; import Home from "./routes/home"; import useVersion from "./hooks/use-version"; +import { ArchetypeSelector } from "./components/archetype-selector"; const queryClient = new QueryClient({ defaultOptions: { @@ -44,6 +45,10 @@ function App() { path="settings/:agentId" element={} /> + } + /> diff --git a/client/src/components/app-sidebar.tsx b/client/src/components/app-sidebar.tsx index 1f7f949ca72..46ff5b81414 100644 --- a/client/src/components/app-sidebar.tsx +++ b/client/src/components/app-sidebar.tsx @@ -73,22 +73,34 @@ export function AppSidebar() {
{agents?.map( (agent: { id: UUID; name: string }) => ( - - - + + - - - {agent.name} - - - - + + + + {agent.name} + + + + + + + + Change + Agent's Archetype + + + + ) )}
diff --git a/client/src/components/archetype-selector.tsx b/client/src/components/archetype-selector.tsx new file mode 100644 index 00000000000..1c10b38dd1e --- /dev/null +++ b/client/src/components/archetype-selector.tsx @@ -0,0 +1,116 @@ +import React, { useState } from "react"; +import { ArchetypeName, archetypes } from "../types/archetypes"; +import { apiClient } from "@/lib/api"; +import { useParams } from "react-router"; +import { type UUID } from "@elizaos/core"; + +export const ArchetypeSelector: React.FC = () => { + const { agentId } = useParams<{ agentId: UUID }>(); + + const [selectedArchetype, setSelectedArchetype] = + useState(null); + const [applyStatus, setApplyStatus] = useState(null); + + const handleDownload = () => { + if (!selectedArchetype) return; + + const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent( + JSON.stringify(archetypes[selectedArchetype], null, 2) + )}`; + const downloadAnchorNode = document.createElement("a"); + downloadAnchorNode.setAttribute("href", dataStr); + downloadAnchorNode.setAttribute( + "download", + `${selectedArchetype}.json` + ); + document.body.appendChild(downloadAnchorNode); + downloadAnchorNode.click(); + downloadAnchorNode.remove(); + }; + + const handleApply = async () => { + if (!selectedArchetype) return; + + try { + await apiClient.applyArchetype( + agentId, + archetypes[selectedArchetype] + ); + setApplyStatus("success"); + } catch (error) { + console.error("Failed to apply archetype:", error); + setApplyStatus("error"); + } + + setTimeout(() => setApplyStatus(null), 3000); + }; + + return ( +
+

+ Character Archetype Selector +

+
+ + +
+ + {selectedArchetype && ( +
+

Preview

+ 
+                        {JSON.stringify(archetypes[selectedArchetype], null, 2)}
+
+
+ )} + +
+ + + +
+ + {applyStatus === "success" && ( +
+ Archetype applied successfully! +
+ )} + + {applyStatus === "error" && ( +
+ Failed to apply archetype. Please try again. +
+ )} +
+ ); +}; diff --git a/client/src/lib/api.ts b/client/src/lib/api.ts index 703a5181bf1..b1f51b074f6 100644 --- a/client/src/lib/api.ts +++ b/client/src/lib/api.ts @@ -102,4 +102,10 @@ export const apiClient = { body: formData, }); }, + applyArchetype: (agentId: string, archetype: Character) => + fetcher({ + url: `/agents/${agentId}/set`, + method: "POST", + body: archetype, + }), }; diff --git a/client/src/lib/info.json b/client/src/lib/info.json index de0516e20d6..18f2047dcae 100644 --- a/client/src/lib/info.json +++ b/client/src/lib/info.json @@ -1 +1 @@ -{"version": "0.1.8+build.1"} +{"version": "0.1.9-alpha.1"} diff --git a/client/src/types/archetypes.ts b/client/src/types/archetypes.ts new file mode 100644 index 00000000000..c0c4322eb26 --- /dev/null +++ b/client/src/types/archetypes.ts @@ -0,0 +1,124 @@ +import { Character, ModelProviderName } from "../../../packages/core/src/types"; + +export enum ArchetypeName { + Friendly = "Friendly", + Sarcastic = "Sarcastic", + Formal = "Formal", +} + +export const archetypes: Record = { + [ArchetypeName.Friendly]: { + name: "FriendlyBot", + modelProvider: ModelProviderName.ANTHROPIC, + settings: { + voice: { model: "en_US-happy-medium" }, + }, + bio: ["A friendly bot who always looks on the bright side."], + style: { + all: ["Optimistic", "Encouraging", "Kind"], + chat: ["Optimistic", "Encouraging", "Kind"], + post: ["Optimistic", "Encouraging", "Kind"], + }, + knowledge: ["Basic human etiquette", "Empathy strategies"], + messageExamples: [ + [{ user: "{{user1}}", content: { text: "Hello!" } }], + [ + { + user: "FriendlyBot", + content: { text: "Hi there! How can I brighten your day?" }, + }, + ], + ], + postExamples: ["Stay positive! Every day is a new opportunity!"], + lore: [ + "A cheerful assistant who spreads positivity and joy in every interaction.", + ], + topics: ["Positive thinking", "Encouragement", "Empathy"], + adjectives: ["Optimistic", "Cheerful", "Supportive", "Warm"], + clients: [], + plugins: [], + }, + [ArchetypeName.Sarcastic]: { + name: "SarcasticBot", + modelProvider: ModelProviderName.ANTHROPIC, + settings: { + voice: { model: "en_US-sarcastic-medium" }, + }, + bio: ["A bot with a sharp tongue and dry humor."], + style: { + all: ["Witty", "Cynical", "Dry"], + chat: ["Witty", "Cynical", "Dry"], + post: ["Witty", "Cynical", "Dry"], + }, + knowledge: ["Pop culture references", "Puns and witty remarks"], + messageExamples: [ + [ + { + user: "{{user1}}", + content: { text: "What’s the weather like?" }, + }, + ], + [ + { + user: "SarcasticBot", + content: { + text: "Oh, it’s just perfect for staying indoors and questioning your life choices.", + }, + }, + ], + ], + postExamples: ["Life is a joke, and I’m the punchline."], + lore: ["A quick-witted assistant with a penchant for humor and irony."], + topics: ["Pop culture", "Humor", "Satire"], + adjectives: ["Witty", "Cynical", "Dry", "Sharp"], + clients: [], + plugins: [], + }, + [ArchetypeName.Formal]: { + name: "FormalBot", + modelProvider: ModelProviderName.ANTHROPIC, + settings: { + voice: { model: "en_US-formal-medium" }, + }, + bio: [ + "A professional and courteous bot with a refined communication style.", + ], + style: { + all: ["Polite", "Professional", "Articulate"], + chat: ["Polite", "Professional", "Articulate"], + post: ["Polite", "Professional", "Articulate"], + }, + knowledge: ["Business etiquette", "Formal writing conventions"], + messageExamples: [ + [ + { + user: "{{user1}}", + content: { text: "Can you assist me with a task?" }, + }, + ], + [ + { + user: "FormalBot", + content: { + text: "Certainly. Please provide the necessary details, and I will assist you to the best of my ability.", + }, + }, + ], + ], + postExamples: [ + "Remember, professionalism and politeness pave the way to effective communication.", + "A thoughtful approach often leads to the best outcomes.", + ], + lore: [ + "Experienced in formal communication and professional environments.", + ], + topics: [ + "Business communication", + "Professional development", + "Etiquette", + ], + adjectives: ["Polite", "Courteous", "Respectful", "Detailed"], + clients: [], + plugins: [], + }, +}; diff --git a/packages/client-direct/src/api.ts b/packages/client-direct/src/api.ts index ff97d23f0e7..43b4e28fa92 100644 --- a/packages/client-direct/src/api.ts +++ b/packages/client-direct/src/api.ts @@ -115,8 +115,7 @@ export function createApiRouter( agent.stop(); directClient.unregisterAgent(agent); res.status(204).send(); - } - else { + } else { res.status(404).json({ error: "Agent not found" }); } }); @@ -269,18 +268,20 @@ export function createApiRouter( for (const agentRuntime of agents.values()) { const teeLogService = agentRuntime - .getService( - ServiceType.TEE_LOG - ) - .getInstance(); + .getService(ServiceType.TEE_LOG) + .getInstance(); const agents = await teeLogService.getAllAgents(); - allAgents.push(...agents) + allAgents.push(...agents); } const runtime: AgentRuntime = agents.values().next().value; - const teeLogService = runtime.getService(ServiceType.TEE_LOG).getInstance(); - const attestation = await teeLogService.generateAttestation(JSON.stringify(allAgents)); + const teeLogService = runtime + .getService(ServiceType.TEE_LOG) + .getInstance(); + const attestation = await teeLogService.generateAttestation( + JSON.stringify(allAgents) + ); res.json({ agents: allAgents, attestation: attestation }); } catch (error) { elizaLogger.error("Failed to get TEE agents:", error); @@ -300,13 +301,13 @@ export function createApiRouter( } const teeLogService = agentRuntime - .getService( - ServiceType.TEE_LOG - ) - .getInstance(); + .getService(ServiceType.TEE_LOG) + .getInstance(); const teeAgent = await teeLogService.getAgent(agentId); - const attestation = await teeLogService.generateAttestation(JSON.stringify(teeAgent)); + const attestation = await teeLogService.generateAttestation( + JSON.stringify(teeAgent) + ); res.json({ agent: teeAgent, attestation: attestation }); } catch (error) { elizaLogger.error("Failed to get TEE agent:", error); @@ -335,12 +336,16 @@ export function createApiRouter( }; const agentRuntime: AgentRuntime = agents.values().next().value; const teeLogService = agentRuntime - .getService( - ServiceType.TEE_LOG - ) + .getService(ServiceType.TEE_LOG) .getInstance(); - const pageQuery = await teeLogService.getLogs(teeLogQuery, page, pageSize); - const attestation = await teeLogService.generateAttestation(JSON.stringify(pageQuery)); + const pageQuery = await teeLogService.getLogs( + teeLogQuery, + page, + pageSize + ); + const attestation = await teeLogService.generateAttestation( + JSON.stringify(pageQuery) + ); res.json({ logs: pageQuery, attestation: attestation, @@ -356,4 +361,3 @@ export function createApiRouter( return router; } - From ec3fcf22349e5c302ea9645b268637a6fe4af868 Mon Sep 17 00:00:00 2001 From: "Alvaro S. P. Silva" Date: Fri, 17 Jan 2025 14:29:12 -0300 Subject: [PATCH 2/3] feature: Archetype Selector - Addressing PR comments requests to fix potential issues and improving the code --- client/src/App.tsx | 8 +-- client/src/components/app-sidebar.tsx | 11 ++-- client/src/components/archetype-selector.tsx | 53 ++++++++++++++------ client/src/types/archetypes.ts | 10 ++-- 4 files changed, 55 insertions(+), 27 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index 126d9d423c8..9aff62f9176 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -41,14 +41,14 @@ function App() { path="chat/:agentId" element={} /> - } - /> } /> + } + /> diff --git a/client/src/components/app-sidebar.tsx b/client/src/components/app-sidebar.tsx index 46ff5b81414..530d83e3b3f 100644 --- a/client/src/components/app-sidebar.tsx +++ b/client/src/components/app-sidebar.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { useQuery } from "@tanstack/react-query"; import info from "@/lib/info.json"; import { @@ -73,8 +74,8 @@ export function AppSidebar() {
{agents?.map( (agent: { id: UUID; name: string }) => ( - <> - + + @@ -90,7 +91,9 @@ export function AppSidebar() { - + @@ -100,7 +103,7 @@ export function AppSidebar() { - + ) )}
diff --git a/client/src/components/archetype-selector.tsx b/client/src/components/archetype-selector.tsx index 1c10b38dd1e..837a1e10f64 100644 --- a/client/src/components/archetype-selector.tsx +++ b/client/src/components/archetype-selector.tsx @@ -7,6 +7,7 @@ import { type UUID } from "@elizaos/core"; export const ArchetypeSelector: React.FC = () => { const { agentId } = useParams<{ agentId: UUID }>(); + const [isApplying, setIsApplying] = useState(false); const [selectedArchetype, setSelectedArchetype] = useState(null); const [applyStatus, setApplyStatus] = useState(null); @@ -14,24 +15,44 @@ export const ArchetypeSelector: React.FC = () => { const handleDownload = () => { if (!selectedArchetype) return; - const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent( - JSON.stringify(archetypes[selectedArchetype], null, 2) - )}`; - const downloadAnchorNode = document.createElement("a"); - downloadAnchorNode.setAttribute("href", dataStr); - downloadAnchorNode.setAttribute( - "download", - `${selectedArchetype}.json` + // const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent( + // JSON.stringify(archetypes[selectedArchetype], null, 2) + // )}`; + // const downloadAnchorNode = document.createElement("a"); + // downloadAnchorNode.setAttribute("href", dataStr); + // downloadAnchorNode.setAttribute( + // "download", + // `${selectedArchetype}.json` + // ); + // document.body.appendChild(downloadAnchorNode); + // downloadAnchorNode.click(); + // downloadAnchorNode.remove(); + + // + const blob = new Blob( + [JSON.stringify(archetypes[selectedArchetype], null, 2)], + { type: "application/json" } ); - document.body.appendChild(downloadAnchorNode); - downloadAnchorNode.click(); - downloadAnchorNode.remove(); + const url = URL.createObjectURL(blob); + const link = document.createElement("a"); + link.href = url; + link.download = `${selectedArchetype}.json`; + link.click(); + URL.revokeObjectURL(url); }; const handleApply = async () => { if (!selectedArchetype) return; + if ( + !window.confirm( + `Are you sure you want to apply the ${selectedArchetype} archetype?` + ) + ) + return; + try { + setIsApplying(true); await apiClient.applyArchetype( agentId, archetypes[selectedArchetype] @@ -39,7 +60,11 @@ export const ArchetypeSelector: React.FC = () => { setApplyStatus("success"); } catch (error) { console.error("Failed to apply archetype:", error); - setApplyStatus("error"); + setApplyStatus( + `Error: ${error instanceof Error ? error.message : "Unknown error"}` + ); + } finally { + setIsApplying(false); } setTimeout(() => setApplyStatus(null), 3000); @@ -94,9 +119,9 @@ export const ArchetypeSelector: React.FC = () => { diff --git a/client/src/types/archetypes.ts b/client/src/types/archetypes.ts index c0c4322eb26..272f54c5273 100644 --- a/client/src/types/archetypes.ts +++ b/client/src/types/archetypes.ts @@ -11,13 +11,13 @@ export const archetypes: Record = { name: "FriendlyBot", modelProvider: ModelProviderName.ANTHROPIC, settings: { - voice: { model: "en_US-happy-medium" }, + voice: { model: "en_US-lessac-medium" }, }, bio: ["A friendly bot who always looks on the bright side."], style: { all: ["Optimistic", "Encouraging", "Kind"], - chat: ["Optimistic", "Encouraging", "Kind"], - post: ["Optimistic", "Encouraging", "Kind"], + chat: [], + post: [], }, knowledge: ["Basic human etiquette", "Empathy strategies"], messageExamples: [ @@ -42,7 +42,7 @@ export const archetypes: Record = { name: "SarcasticBot", modelProvider: ModelProviderName.ANTHROPIC, settings: { - voice: { model: "en_US-sarcastic-medium" }, + voice: { model: "en_US-amy-medium" }, }, bio: ["A bot with a sharp tongue and dry humor."], style: { @@ -78,7 +78,7 @@ export const archetypes: Record = { name: "FormalBot", modelProvider: ModelProviderName.ANTHROPIC, settings: { - voice: { model: "en_US-formal-medium" }, + voice: { model: "en_US-ryan-medium" }, }, bio: [ "A professional and courteous bot with a refined communication style.", From 826a24df57fd3b2a2ab218c499e8149453ff5f64 Mon Sep 17 00:00:00 2001 From: "Alvaro S. P. Silva" Date: Fri, 17 Jan 2025 15:27:08 -0300 Subject: [PATCH 3/3] feature: Archetype Selector - refactoring the component --- client/src/components/archetype-selector.tsx | 136 +++--------------- .../ui/archetype/archetype-apply-status.tsx | 19 +++ .../ui/archetype/archetype-buttons.tsx | 85 +++++++++++ .../ui/archetype/archetype-display.tsx | 16 +++ .../ui/archetype/archetype-no-agent.tsx | 7 + .../ui/archetype/archetype-selection.tsx | 31 ++++ 6 files changed, 177 insertions(+), 117 deletions(-) create mode 100644 client/src/components/ui/archetype/archetype-apply-status.tsx create mode 100644 client/src/components/ui/archetype/archetype-buttons.tsx create mode 100644 client/src/components/ui/archetype/archetype-display.tsx create mode 100644 client/src/components/ui/archetype/archetype-no-agent.tsx create mode 100644 client/src/components/ui/archetype/archetype-selection.tsx diff --git a/client/src/components/archetype-selector.tsx b/client/src/components/archetype-selector.tsx index 837a1e10f64..03aa06830c3 100644 --- a/client/src/components/archetype-selector.tsx +++ b/client/src/components/archetype-selector.tsx @@ -1,141 +1,43 @@ import React, { useState } from "react"; -import { ArchetypeName, archetypes } from "../types/archetypes"; -import { apiClient } from "@/lib/api"; +import { ArchetypeName } from "../types/archetypes"; import { useParams } from "react-router"; import { type UUID } from "@elizaos/core"; +import ArcheTypeButtons from "./ui/archetype/archetype-buttons"; +import ArchetypeDisplay from "./ui/archetype/archetype-display"; +import ArchetypeSelection from "./ui/archetype/archetype-selection"; +import ArchetypeApplyStatus from "./ui/archetype/archetype-apply-status"; +import ArchetypeNoAgent from "./ui/archetype/archetype-no-agent"; export const ArchetypeSelector: React.FC = () => { const { agentId } = useParams<{ agentId: UUID }>(); - const [isApplying, setIsApplying] = useState(false); + if (!agentId) { + return ; + } + const [selectedArchetype, setSelectedArchetype] = useState(null); const [applyStatus, setApplyStatus] = useState(null); - const handleDownload = () => { - if (!selectedArchetype) return; - - // const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent( - // JSON.stringify(archetypes[selectedArchetype], null, 2) - // )}`; - // const downloadAnchorNode = document.createElement("a"); - // downloadAnchorNode.setAttribute("href", dataStr); - // downloadAnchorNode.setAttribute( - // "download", - // `${selectedArchetype}.json` - // ); - // document.body.appendChild(downloadAnchorNode); - // downloadAnchorNode.click(); - // downloadAnchorNode.remove(); - - // - const blob = new Blob( - [JSON.stringify(archetypes[selectedArchetype], null, 2)], - { type: "application/json" } - ); - const url = URL.createObjectURL(blob); - const link = document.createElement("a"); - link.href = url; - link.download = `${selectedArchetype}.json`; - link.click(); - URL.revokeObjectURL(url); - }; - - const handleApply = async () => { - if (!selectedArchetype) return; - - if ( - !window.confirm( - `Are you sure you want to apply the ${selectedArchetype} archetype?` - ) - ) - return; - - try { - setIsApplying(true); - await apiClient.applyArchetype( - agentId, - archetypes[selectedArchetype] - ); - setApplyStatus("success"); - } catch (error) { - console.error("Failed to apply archetype:", error); - setApplyStatus( - `Error: ${error instanceof Error ? error.message : "Unknown error"}` - ); - } finally { - setIsApplying(false); - } - - setTimeout(() => setApplyStatus(null), 3000); - }; - return (

Character Archetype Selector

-
- - -
+ + {selectedArchetype && ( -
-

Preview

- 
-                        {JSON.stringify(archetypes[selectedArchetype], null, 2)}
-
-
+ )} -
- - - -
+ - {applyStatus === "success" && ( -
- Archetype applied successfully! -
- )} - - {applyStatus === "error" && ( -
- Failed to apply archetype. Please try again. -
- )} +
); }; diff --git a/client/src/components/ui/archetype/archetype-apply-status.tsx b/client/src/components/ui/archetype/archetype-apply-status.tsx new file mode 100644 index 00000000000..04301ba3ea0 --- /dev/null +++ b/client/src/components/ui/archetype/archetype-apply-status.tsx @@ -0,0 +1,19 @@ +type ArchetypeApplyStatusProps = { + applyStatus: string | null; +}; + +const ArchetypeApplyStatus = ({ applyStatus }: ArchetypeApplyStatusProps) => { + let message; + let containerClass; + if (applyStatus === "success") { + message = "Archetype applied successfully!"; + containerClass = "text-green-600"; + } else { + message = "Failed to apply archetype. Please try again"; + containerClass = "text-red-600"; + } + + return
{message}
; +}; + +export default ArchetypeApplyStatus; diff --git a/client/src/components/ui/archetype/archetype-buttons.tsx b/client/src/components/ui/archetype/archetype-buttons.tsx new file mode 100644 index 00000000000..949aadc94b9 --- /dev/null +++ b/client/src/components/ui/archetype/archetype-buttons.tsx @@ -0,0 +1,85 @@ +import { apiClient } from "@/lib/api"; +import { ArchetypeName, archetypes } from "@/types/archetypes"; +import { type UUID } from "@elizaos/core"; +import { Button } from "../button"; +import { useState } from "react"; + +type ArcheTypeButtonsProps = { + agentId: UUID; + selectedArchetype: ArchetypeName | null; + setApplyStatus: (status: string | null) => void; +}; + +const ArcheTypeButtons = ({ + agentId, + selectedArchetype, + setApplyStatus, +}: ArcheTypeButtonsProps) => { + const [isApplying, setIsApplying] = useState(false); + + const handleApply = async () => { + if (!selectedArchetype) return; + + if ( + !window.confirm( + `Are you sure you want to apply the ${selectedArchetype} archetype?` + ) + ) + return; + + try { + setIsApplying(true); + await apiClient.applyArchetype( + agentId as UUID, + archetypes[selectedArchetype] + ); + setApplyStatus("success"); + } catch (error) { + console.error("Failed to apply archetype:", error); + setApplyStatus( + `Error: ${error instanceof Error ? error.message : "Unknown error"}` + ); + } finally { + setIsApplying(false); + } + + setTimeout(() => setApplyStatus(null), 3000); + }; + + const handleDownload = () => { + if (!selectedArchetype) return; + + const blob = new Blob( + [JSON.stringify(archetypes[selectedArchetype], null, 2)], + { type: "application/json" } + ); + const url = URL.createObjectURL(blob); + const link = document.createElement("a"); + link.href = url; + link.download = `${selectedArchetype}.json`; + link.click(); + URL.revokeObjectURL(url); + }; + + return ( +
+ + + +
+ ); +}; + +export default ArcheTypeButtons; diff --git a/client/src/components/ui/archetype/archetype-display.tsx b/client/src/components/ui/archetype/archetype-display.tsx new file mode 100644 index 00000000000..46a73f6c658 --- /dev/null +++ b/client/src/components/ui/archetype/archetype-display.tsx @@ -0,0 +1,16 @@ +import { ArchetypeName, archetypes } from "@/types/archetypes"; + +type ArchetypeDisplayProps = { + selectedArchetype: ArchetypeName; +}; + +const ArchetypeDisplay = ({ selectedArchetype }: ArchetypeDisplayProps) => ( +
+

Preview

+ 
+            {JSON.stringify(archetypes[selectedArchetype], null, 2)}
+
+
+); + +export default ArchetypeDisplay; diff --git a/client/src/components/ui/archetype/archetype-no-agent.tsx b/client/src/components/ui/archetype/archetype-no-agent.tsx new file mode 100644 index 00000000000..33ff3a0b5db --- /dev/null +++ b/client/src/components/ui/archetype/archetype-no-agent.tsx @@ -0,0 +1,7 @@ +const ArchetypeNoAgent = () => ( +
+ Agent ID not found, Archetype Selector not available. +
+); + +export default ArchetypeNoAgent; diff --git a/client/src/components/ui/archetype/archetype-selection.tsx b/client/src/components/ui/archetype/archetype-selection.tsx new file mode 100644 index 00000000000..4b5b016cd4d --- /dev/null +++ b/client/src/components/ui/archetype/archetype-selection.tsx @@ -0,0 +1,31 @@ +import { ArchetypeName } from "@/types/archetypes"; + +type ArchetypeSelectionProps = { + setSelectedArchetype: (selectedArchetype: ArchetypeName) => void; +}; + +const ArchetypeSelection = ({ + setSelectedArchetype, +}: ArchetypeSelectionProps) => ( +
+ + +
+); + +export default ArchetypeSelection;