@elizaos/client 1.5.5-alpha.10

package/src/components/env-settings.tsx

@@ -0,0 +1,261 @@
+import { useEffect, useRef, useState } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from './ui/input';
+import { Check, Eye, EyeOff, MoreVertical, Settings, X } from 'lucide-react';
+import { Button } from './ui/button';
+import { createElizaClient } from '@/lib/api-client-config';
+import { ApiKeyDialog } from './api-key-dialog';
+import { useToast } from '@/hooks/use-toast';
+
+export default function EnvSettings() {
+  const [name, setName] = useState('');
+  const [value, setValue] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [editedValue, setEditedValue] = useState('');
+  const [localEnvs, setLocalEnvs] = useState<Record<string, string>>({});
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [isApiKeyDialogOpen, setIsApiKeyDialogOpen] = useState(false);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setOpenIndex(null);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    fetchLocalEnvs();
+  }, []);
+
+  const fetchLocalEnvs = async () => {
+    const elizaClient = createElizaClient();
+    const data = await elizaClient.system.getEnvironment();
+    setLocalEnvs(data);
+  };
+
+  const handleReset = async () => {
+    await fetchLocalEnvs();
+
+    setEditingIndex(null);
+    setOpenIndex(null);
+    setName('');
+    setValue('');
+  };
+
+  const handleEdit = (key: string) => {
+    setEditingIndex(openIndex);
+    setEditedValue(localEnvs[key]);
+    setOpenIndex(null);
+  };
+
+  const handleRemove = (key: string) => {
+    const updatedData = { ...localEnvs };
+    delete updatedData[key];
+    setLocalEnvs(updatedData);
+    setOpenIndex(null);
+  };
+
+  const saveEdit = (key: string) => {
+    setLocalEnvs({
+      ...localEnvs,
+      [key]: editedValue,
+    });
+    setEditingIndex(null);
+  };
+
+  const addEnv = () => {
+    if (!name || !value) return;
+
+    setLocalEnvs({
+      ...localEnvs,
+      [name]: value,
+    });
+
+    setName('');
+    setValue('');
+    setEditingIndex(null);
+  };
+
+  // Dummy function for onApiKeySaved
+  const handleApiKeySaved = () => {
+    console.log('API Key was saved');
+    // Potentially refetch envs or perform other actions here
+  };
+
+  return (
+    <div className="container max-w-4xl mx-auto p-6">
+      <ApiKeyDialog
+        open={isApiKeyDialogOpen}
+        onOpenChange={setIsApiKeyDialogOpen}
+        onApiKeySaved={handleApiKeySaved}
+      />
+
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-bold">Env settings</h1>
+          <p className="text-muted-foreground mt-1">Env settings</p>
+        </div>
+        <Button onClick={() => setIsApiKeyDialogOpen(true)} aria-label="Manage API Key">
+          <Settings className="h-5 w-5" />
+          Manage API Key
+        </Button>
+      </div>
+
+      <Card>
+        <CardContent className="p-6">
+          <div className="space-y-6">
+            <div className="rounded-lg w-full flex flex-col gap-3">
+              <h2 className="text-xl font-bold mb-4 pb-5 ml-1">Environment Settings</h2>
+              <div className="grid grid-cols-[1fr_2fr_auto] gap-4 items-end w-full pb-4">
+                <div className="flex flex-col gap-1">
+                  <label htmlFor="secret-name" className="ml-2 text-xs font-medium text-gray-400">
+                    NAME
+                  </label>
+                  <Input
+                    id="secret-name"
+                    placeholder="VARIABLE_NAME"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                  />
+                </div>
+                <div className="flex flex-col gap-1 relative">
+                  <label htmlFor="secret-value" className="ml-2 text-xs font-medium text-gray-400">
+                    VALUE
+                  </label>
+                  <div className="relative">
+                    <Input
+                      id="secret-value"
+                      type={showPassword ? 'text' : 'password'}
+                      placeholder="i9ju23nfsdf56"
+                      value={value}
+                      onChange={(e) => setValue(e.target.value)}
+                      className="pr-10"
+                    />
+                    <div
+                      className="absolute inset-y-0 right-3 flex items-center cursor-pointer text-gray-500"
+                      onClick={() => setShowPassword(!showPassword)}
+                    >
+                      {showPassword ? <EyeOff /> : <Eye />}
+                    </div>
+                  </div>
+                </div>
+                <Button className="shrink-0" onClick={addEnv}>
+                  Add
+                </Button>
+              </div>
+
+              {Object.keys(localEnvs).length > 0 && (
+                <div className="grid grid-cols-[1fr_2fr_auto] gap-4 mt-6 font-medium text-gray-400 border-b pb-2 ml-1">
+                  <div>Name</div>
+                  <div>Value</div>
+                  <div>Action</div>
+                </div>
+              )}
+
+              <div className="mt-2">
+                {Object.entries(localEnvs).map(([key, value], index) => (
+                  <div
+                    key={index}
+                    className="grid grid-cols-[1fr_2fr_auto] gap-4 items-center border-b py-2 ml-1 relative"
+                  >
+                    <div className="truncate max-w-48">{key}</div>
+                    <div>
+                      {editingIndex === index ? (
+                        <div className="flex items-center gap-2">
+                          <Input
+                            value={editedValue}
+                            onChange={(e) => setEditedValue(e.target.value)}
+                            className="w-full"
+                          />
+                          <Button variant="ghost" onClick={() => saveEdit(key)}>
+                            <Check className="w-5 h-5 text-green-500" />
+                          </Button>
+                          <Button variant="ghost" onClick={() => setEditingIndex(null)}>
+                            <X className="w-5 h-5 text-red-500" />
+                          </Button>
+                        </div>
+                      ) : (
+                        <div className="truncate text-gray-500">Encrypted</div>
+                      )}
+                    </div>
+                    <div className="relative">
+                      <Button
+                        variant="ghost"
+                        className="p-2 text-gray-500"
+                        onClick={() => setOpenIndex(openIndex === index ? null : index)}
+                      >
+                        <MoreVertical className="h-5 w-5" />
+                      </Button>
+                      {openIndex === index && (
+                        <div
+                          ref={dropdownRef}
+                          className="absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-card ring-1 ring-black ring-opacity-5 z-10"
+                        >
+                          <div className="py-1">
+                            <button
+                              onClick={() => handleEdit(key)}
+                              className="w-full text-left px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                            >
+                              Edit
+                            </button>
+                            <button
+                              onClick={() => handleRemove(key)}
+                              className="w-full text-left px-4 py-2 text-sm text-red-500 hover:bg-accent"
+                            >
+                              Remove
+                            </button>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex gap-2 mt-4 justify-end">
+        <Button variant="outline" onClick={handleReset}>
+          Reset
+        </Button>
+        <Button
+          type="submit"
+          disabled={isUpdating}
+          onClick={async () => {
+            setIsUpdating(true);
+            try {
+              const elizaClient = createElizaClient();
+              await elizaClient.system.updateLocalEnvironment(localEnvs);
+              toast({
+                title: 'Success',
+                description: 'Environment variables updated successfully!',
+              });
+            } catch (error) {
+              toast({
+                title: 'Error',
+                description: 'Failed to update environment variables.',
+                variant: 'destructive',
+              });
+            } finally {
+              setIsUpdating(false);
+            }
+          }}
+        >
+          Save Changes
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/group-card.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Avatar } from '@/components/ui/avatar';
+import type { UUID, Agent } from '@elizaos/core';
+import type { MessageChannel as ClientMessageChannel } from '@/types';
+import { Settings } from 'lucide-react';
+import { formatAgentName, generateGroupName, getEntityId } from '@/lib/utils';
+import GroupPanel from './group-panel';
+import { useAgentsWithDetails, useChannelParticipants } from '@/hooks/use-query-hooks';
+
+// The group prop will be a central channel, enriched with server_id for navigation context
+// Assume group.participants might be available or added later.
+interface GroupCardProps {
+  group: ClientMessageChannel & { server_id: UUID; participants?: Partial<Agent>[] };
+  // onEdit?: (group: ClientMessageChannel) => void;
+}
+
+const GroupCard: React.FC<GroupCardProps> = ({ group /*, onEdit */ }) => {
+  const navigate = useNavigate();
+  const currentClientId = getEntityId(); // Get current client/user ID
+  const [showGroupPanel, setShowGroupPanel] = useState(false);
+
+  if (!group || !group.id) {
+    return (
+      <Card className="p-4 min-h-[180px] flex items-center justify-center text-muted-foreground">
+        Group data not available.
+      </Card>
+    );
+  }
+
+  const groupName = generateGroupName(group, group.participants || [], currentClientId);
+
+  const handleChatClick = () => {
+    navigate(`/group/${group.id}?serverId=${group.server_id}`);
+  };
+
+  const { data: agentsData } = useAgentsWithDetails();
+  const allAgents = agentsData?.agents || [];
+
+  const { data: participantsData } = useChannelParticipants(group.id);
+  const participants = participantsData?.data;
+  const participantsIds: UUID[] = participants && Array.isArray(participants) ? participants : [];
+
+  const groupAgents = participantsIds
+    ? allAgents.filter((agent) => agent.id && participantsIds.includes(agent.id))
+    : [];
+
+  const handleSettings = () => {
+    setShowGroupPanel(true);
+  };
+
+  const agentNames =
+    groupAgents
+      .map((agent) => agent.name)
+      .filter(Boolean)
+      .join(', ') || 'No members';
+
+  return (
+    <>
+      <Card
+        className="w-full transition-all bg-card border border-border/50 rounded-sm"
+        data-testid="agent-card"
+      >
+        <CardContent className="p-0 relative h-full">
+          <div className="flex flex-col justify-between h-full">
+            <div className="flex items-center gap-4 p-2 h-[90%]">
+              {/* Avatar */}
+              <Avatar className="bg-[#282829] h-16 w-16 flex-shrink-0 rounded-[3px] relative overflow-hidden">
+                {groupAgents && groupAgents.length > 0 ? (
+                  <div className="grid grid-cols-2 grid-rows-2 gap-1 w-full h-full p-1">
+                    {groupAgents.slice(0, 3).map((agent) => {
+                      const avatarUrl =
+                        typeof agent.settings?.avatar === 'string' ? agent.settings.avatar : null;
+                      return avatarUrl ? (
+                        <img
+                          key={agent.id}
+                          src={avatarUrl}
+                          alt={agent.name}
+                          className="object-cover w-full h-full rounded-[3px]"
+                        />
+                      ) : (
+                        <div
+                          key={agent.id}
+                          className="flex items-center justify-center bg-[#3F3F3F] text-xs font-medium w-full h-full rounded-[3px]"
+                        >
+                          {formatAgentName(agent.name)}
+                        </div>
+                      );
+                    })}
+                    {groupAgents.length > 3 ? (
+                      <div className="flex items-center justify-center bg-[#3F3F3F] text-xs font-medium w-full h-full rounded-[3px]">
+                        +{groupAgents.length - 3}
+                      </div>
+                    ) : (
+                      Array.from({ length: 4 - groupAgents.slice(0, 3).length }).map((_, idx) => (
+                        <div
+                          key={`empty-${idx}`}
+                          className="flex items-center justify-center bg-[#2D2D2D] text-xs font-medium w-full h-full rounded-[3px]"
+                        ></div>
+                      ))
+                    )}
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-center bg-muted text-lg font-medium w-full h-full">
+                    {formatAgentName(groupName)}
+                  </div>
+                )}
+              </Avatar>
+
+              {/* Content - Name and Description */}
+              <div className="flex-1 min-w-0">
+                <h3 className="font-semibold text-xl mb-1 truncate" title={groupName}>
+                  {groupName}
+                </h3>
+                <p className="text-sm text-muted-foreground line-clamp-2 leading-relaxed">
+                  {agentNames}
+                </p>
+              </div>
+            </div>
+            <div className="border-t border-muted" />
+            <div className="flex items-center justify-between py-1 px-2">
+              {/* Settings button */}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleSettings();
+                }}
+                className="h-8 w-8 p-0 hover:bg-muted/50 cursor-pointer"
+              >
+                <Settings className="h-4 w-4 text-muted-foreground" />
+              </Button>
+
+              {/* New Chat button - ghost variant */}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleChatClick();
+                }}
+                className="h-8 px-2 rounded-sm bg-muted hover:bg-muted/50 cursor-pointer"
+              >
+                Chat
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      {showGroupPanel && (
+        <GroupPanel onClose={() => setShowGroupPanel(false)} channelId={group.id} />
+      )}
+    </>
+  );
+};
+
+export default GroupCard;