feat: Creating Archetype Selector

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: {
@@ -40,6 +41,10 @@ function App() {
                                             path="chat/:agentId"
                                             element={<Chat />}
                                         />
+                                        <Route
+                                            path="settings/archetypes/:agentId"
+                                            element={<ArchetypeSelector />}
+                                        />
                                         <Route
                                             path="settings/:agentId"
                                             element={<Overview />}

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,22 +74,36 @@ export function AppSidebar() {
                                 <div>
                                     {agents?.map(
                                         (agent: { id: UUID; name: string }) => (
-                                            <SidebarMenuItem key={agent.id}>
-                                                <NavLink
-                                                    to={`/chat/${agent.id}`}
+                                            <React.Fragment key={agent.id}>
+                                                <SidebarMenuItem>
+                                                    <NavLink
+                                                        to={`/chat/${agent.id}`}
+                                                    >
+                                                        <SidebarMenuButton
+                                                            isActive={location.pathname.includes(
+                                                                agent.id
+                                                            )}
+                                                        >
+                                                            <User />
+                                                            <span>
+                                                                {agent.name}
+                                                            </span>
+                                                        </SidebarMenuButton>
+                                                    </NavLink>
+                                                </SidebarMenuItem>
+                                                <SidebarMenuItem
+                                                    key={`${agent.id}-archetype`}
                                                 >
-                                                    <SidebarMenuButton
-                                                        isActive={location.pathname.includes(
-                                                            agent.id
-                                                        )}
+                                                    <NavLink
+                                                        to={`/settings/archetypes/${agent.id}`}
                                                     >
-                                                        <User />
-                                                        <span>
-                                                            {agent.name}
-                                                        </span>
-                                                    </SidebarMenuButton>
-                                                </NavLink>
-                                            </SidebarMenuItem>
+                                                        <SidebarMenuButton>
+                                                            <Cog /> Change
+                                                            Agent's Archetype
+                                                        </SidebarMenuButton>
+                                                    </NavLink>
+                                                </SidebarMenuItem>
+                                            </React.Fragment>
                                         )
                                     )}
                                 </div>

client/src/components/archetype-selector.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+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 }>();
+
+    if (!agentId) {
+        return <ArchetypeNoAgent />;
+    }
+
+    const [selectedArchetype, setSelectedArchetype] =
+        useState<ArchetypeName | null>(null);
+    const [applyStatus, setApplyStatus] = useState<string | null>(null);
+
+    return (
+        <div className="p-4">
+            <h2 className="text-lg font-bold mb-4">
+                Character Archetype Selector
+            </h2>
+
+            <ArchetypeSelection setSelectedArchetype={setSelectedArchetype} />
+
+            {selectedArchetype && (
+                <ArchetypeDisplay selectedArchetype={selectedArchetype} />
+            )}
+
+            <ArcheTypeButtons
+                agentId={agentId}
+                selectedArchetype={selectedArchetype}
+                setApplyStatus={setApplyStatus}
+            />
+
+            <ArchetypeApplyStatus applyStatus={applyStatus} />
+        </div>
+    );
+};

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 <div className={`mt-2 ${containerClass}`}>{message}</div>;
+};
+
+export default ArchetypeApplyStatus;

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 (
+        <div className="flex gap-4 mt-4">
+            <Button
+                onClick={handleDownload}
+                className="bg-blue-600 text-white rounded disabled:opacity-50"
+                disabled={!selectedArchetype}
+            >
+                Download Archetype
+            </Button>
+
+            <Button
+                onClick={handleApply}
+                className="bg-green-600 text-white rounded disabled:opacity-50"
+                disabled={!selectedArchetype || !agentId || isApplying}
+            >
+                {isApplying ? "Applying..." : "Apply Archetype"}
+            </Button>
+        </div>
+    );
+};
+
+export default ArcheTypeButtons;

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) => (
+    <div>
+        <h3 className="text-md font-semibold">Preview</h3>
+        <pre className="p-4 bg-gray-800 text-white rounded border overflow-auto">
+            {JSON.stringify(archetypes[selectedArchetype], null, 2)}
+        </pre>
+    </div>
+);
+
+export default ArchetypeDisplay;

client/src/components/ui/archetype/archetype-no-agent.tsx

@@ -0,0 +1,7 @@
+const ArchetypeNoAgent = () => (
+    <div className="p-4">
+        Agent ID not found, Archetype Selector not available.
+    </div>
+);
+
+export default ArchetypeNoAgent;

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) => (
+    <div className="mb-4">
+        <label htmlFor="archetype-select" className="block text-sm font-medium">
+            Select an Archetype
+        </label>
+        <select
+            id="archetype-select"
+            className="mt-2 p-2 border rounded"
+            onChange={(e) =>
+                setSelectedArchetype(e.target.value as ArchetypeName)
+            }
+        >
+            <option value="">-- Select --</option>
+            {Object.keys(ArchetypeName).map((key) => (
+                <option key={key} value={key}>
+                    {key}
+                </option>
+            ))}
+        </select>
+    </div>
+);
+
+export default ArchetypeSelection;

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