Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: gui enhancements #3727

Merged
merged 1 commit into from
Feb 28, 2025
Merged

chore: gui enhancements #3727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
233 changes: 147 additions & 86 deletions packages/client/src/components/app-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,95 +13,156 @@ import {
} from "@/components/ui/sidebar";
import { useAgents } from "@/hooks/use-query-hooks";
import info from "@/lib/info.json";
import { Book, Cog, User } from "lucide-react";
import { Book, Bot, BotIcon, Cog, User } from "lucide-react";
import { NavLink, useLocation } from "react-router";
import ConnectionStatus from "./connection-status";

export function AppSidebar() {
const location = useLocation();

const { data: agentsData, isPending: isAgentsPending } = useAgents();

return (
<Sidebar>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<NavLink to="/">
<img
alt="elizaos-icon"
src="/elizaos-icon.png"
width="100%"
height="100%"
className="size-7"
/>

<div className="flex flex-col gap-0.5 leading-none">
<span className="font-semibold">ElizaOS</span>
<span className="">v{info?.version}</span>
</div>
</NavLink>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Agents</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{isAgentsPending ? (
<div>
{Array.from({ length: 5 }).map((_, _index) => (
<SidebarMenuItem key={`skeleton-item-${_index}`}>
<SidebarMenuSkeleton />
</SidebarMenuItem>
))}
</div>
) : (
<div>
{agentsData?.agents?.map(
(agent) => (
<SidebarMenuItem key={agent.id}>
<NavLink to={`/chat/${agent.id}`}>
<SidebarMenuButton
isActive={location.pathname.includes(agent.id)}
>
<User />
<span>{agent.character.name}</span>
</SidebarMenuButton>
</NavLink>
</SidebarMenuItem>
)
)}
</div>
)}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<NavLink
to="https://elizaos.github.io/eliza/docs/intro/"
target="_blank"
>
<SidebarMenuButton>
<Book /> Documentation
</SidebarMenuButton>
export function AppSidebar() {
const location = useLocation();
const { data: agentsData, isPending: isAgentsPending } = useAgents();

return (
<Sidebar className="bg-background">
<SidebarHeader className="pb-4">
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<NavLink to="/" className="px-6 py-4">
<img
alt="elizaos-icon"
src="/elizaos-icon.png"
width="100%"
height="100%"
className="size-9"
/>

<div className="flex flex-col leading-none ">
<span className="font-semibold text-lg">ElizaOS</span>
<span className="text-sm -mt-0.5 text-muted-foreground">v{info?.version}</span>
</div>
</NavLink>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton disabled>
<Cog /> Settings
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel className="px-6 py-2 text-sm font-medium text-muted-foreground">
AGENTS
</SidebarGroupLabel>
<SidebarGroupContent className="px-2">
<SidebarMenu>
{isAgentsPending ? (
<div>
{Array.from({ length: 5 }).map((_, _index) => (
<SidebarMenuItem key={`skeleton-item-${_index}`}>
<SidebarMenuSkeleton />
</SidebarMenuItem>
))}
</div>
) : (
<div>
{(() => {
// Sort agents: enabled first, then disabled
const sortedAgents = [...(agentsData?.agents || [])].sort((a, b) => {
// Sort by enabled status (enabled agents first)
if (a.enabled && !b.enabled) return -1;
if (!a.enabled && b.enabled) return 1;
// If both have same enabled status, sort alphabetically by name
return a.character.name.localeCompare(b.character.name);
});

// Split into enabled and disabled groups
const enabledAgents = sortedAgents.filter(agent => agent.enabled);
const disabledAgents = sortedAgents.filter(agent => !agent.enabled);

return (
<>
{/* Render active section */}
{enabledAgents.length > 0 && (
<div className="px-4 py-2 mt-4">
<div className="flex items-center space-x-2">
<div className="size-2.5 rounded-full bg-green-500" />
<span className="text-sm font-medium text-muted-foreground">Active</span>
</div>
</div>
)}

{/* Render enabled agents */}
{enabledAgents.map((agent) => (
<SidebarMenuItem key={agent.id}>
<NavLink to={`/chat/${agent.id}`}>
<SidebarMenuButton
isActive={location.pathname.includes(agent.id)}
className="transition-colors px-4 py-2 my-1 rounded-md"
>
<div className="flex items-center gap-2">

<User className="size-5" />

<span className="text-base">{agent.character.name}</span>
</div>
</SidebarMenuButton>
</NavLink>
</SidebarMenuItem>
))}

{/* Render inactive section */}
{disabledAgents.length > 0 && (
<div className="px-4 py-2 mt-4">
<div className="flex items-center space-x-2">
<div className="size-2.5 rounded-full bg-muted-foreground/50" />
<span className="text-sm font-medium text-muted-foreground">Inactive</span>
</div>
</div>
)}

{/* Render disabled agents */}
{disabledAgents.map((agent) => (
<SidebarMenuItem key={agent.id}>
<NavLink to={`/chat/${agent.id}`}>
<SidebarMenuButton
isActive={location.pathname.includes(agent.id)}
className="transition-colors px-4 py-2 my-1 rounded-md text-muted-foreground"
>
<User className="size-5" />
<span className="text-base">{agent.character.name}</span>
</SidebarMenuButton>
</NavLink>
</SidebarMenuItem>
))}
</>
);
})()}
</div>
)}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter className="px-4 py-4">
<SidebarMenu>
<SidebarMenuItem>
<NavLink
to="https://elizaos.github.io/eliza/docs/intro/"
target="_blank"
>
<SidebarMenuButton className="text-muted-foreground rounded-md">
<Book className="size-5" />
<span>Documentation</span>
</SidebarMenuButton>
</SidebarMenuItem>
<ConnectionStatus />
</SidebarMenu>
</SidebarFooter>
</Sidebar>
);
}
</NavLink>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton disabled className="text-muted-foreground/50 rounded-md">
<Cog className="size-5" />
<span>Settings</span>
</SidebarMenuButton>
</SidebarMenuItem>
<ConnectionStatus />
</SidebarMenu>
</SidebarFooter>
</Sidebar>
);
}

90 changes: 88 additions & 2 deletions packages/client/src/components/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { WorldManager } from "@/lib/world-manager";
import type { IAttachment } from "@/types";
import type { Content, UUID } from "@elizaos/core";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Paperclip, Send, X } from "lucide-react";
import { Paperclip, Play, Send, Square, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import AIWriter from "react-aiwriter";
import { AudioRecorder } from "./audio-recorder";
Expand All @@ -23,7 +23,7 @@ import { Badge } from "./ui/badge";
import ChatTtsButton from "./ui/chat/chat-tts-button";
import { useAutoScroll } from "./ui/chat/hooks/useAutoScroll";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
import { useAgentMessages } from "@/hooks/use-query-hooks";
import { useAgent, useAgentMessages, useStartAgent, useStopAgent } from "@/hooks/use-query-hooks";

type ExtraContentFields = {
user: string;
Expand Down Expand Up @@ -108,6 +108,9 @@ export default function Page({ agentId }: { agentId: UUID }) {
const worldId = WorldManager.getWorldId();

const { messages } = useAgentMessages(agentId);
const { data: agentData, isLoading: isAgentLoading } = useAgent(agentId);
const startAgentMutation = useStartAgent();
const stopAgentMutation = useStopAgent();

const getMessageVariant = (role: string) =>
role !== "user" ? "received" : "sent";
Expand Down Expand Up @@ -221,8 +224,91 @@ export default function Page({ agentId }: { agentId: UUID }) {
}
};

const handleStartAgent = async () => {
if (!agentData?.character?.name) return;

try {
await startAgentMutation.mutateAsync(agentData.character.name);
} catch (error) {
console.error("Failed to start agent:", error);
}
};

const handleStopAgent = async () => {
try {
await stopAgentMutation.mutateAsync(agentId);
} catch (error) {
console.error("Failed to stop agent:", error);
}
};

return (
<div className="flex flex-col w-full h-[calc(100dvh)] p-4">
{/* Agent Header */}
<div className="flex items-center justify-between mb-4 p-3 bg-card rounded-lg border">
<div className="flex items-center gap-3">
<Avatar className="size-10 border rounded-full">
<AvatarImage src="/elizaos-icon.png" />
</Avatar>
<div className="flex flex-col">
<div className="flex items-center gap-2">
<h2 className="font-semibold text-lg">
{agentData?.character?.name || "Agent"}
</h2>
{agentData?.enabled ? (
<Tooltip>
<TooltipTrigger asChild>
<div className="size-2.5 rounded-full bg-green-500 ring-2 ring-green-500/20 animate-pulse" />
</TooltipTrigger>
<TooltipContent side="right">
<p>Agent is active</p>
</TooltipContent>
</Tooltip>
) : (
<Tooltip>
<TooltipTrigger asChild>
<div className="size-2.5 rounded-full bg-gray-300 ring-2 ring-gray-300/20" />
</TooltipTrigger>
<TooltipContent side="right">
<p>Agent is inactive</p>
</TooltipContent>
</Tooltip>
)}
</div>
{agentData?.character?.bio && (
<p className="text-sm text-muted-foreground line-clamp-1">
{Array.isArray(agentData.character.bio)
? agentData.character.bio[0]
: agentData.character.bio}
</p>
)}
</div>
</div>
<div>
{agentData?.enabled ? (
<Button
variant="destructive"
size="sm"
className="gap-1"
onClick={handleStopAgent}
disabled={stopAgentMutation.isPending}
>
{stopAgentMutation.isPending ? "Stopping..." : "Stop"}
</Button>
) : (
<Button
variant="default"
size="sm"
className="gap-1"
onClick={handleStartAgent}
disabled={startAgentMutation.isPending}
>
{startAgentMutation.isPending ? "Starting..." : "Start"}
</Button>
)}
</div>
</div>

<div className="flex-1 overflow-y-auto">
<ChatMessageList
scrollRef={scrollRef}
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/lib/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export const apiClient = {
});
},
getAgents: () => fetcher({ url: "/agents" }),
getAgent: (agentId: string): Promise<{ id: UUID; character: Character }> =>
getAgent: (agentId: string): Promise<{ id: UUID; character: Character; enabled: boolean }> =>
fetcher({ url: `/agents/${agentId}` }),
tts: (agentId: string, text: string) =>
fetcher({
Expand Down
Loading