@elizaos/client 1.5.5-alpha.10

package/src/components/array-input.tsx

@@ -0,0 +1,116 @@
+import { cn } from '@/lib/utils';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+
+type TagProps = {
+  tag: string;
+  onRemove: (tag: string) => void;
+};
+
+const Tag = ({ tag, onRemove }: TagProps) => (
+  <Badge
+    variant="outline"
+    className="flex items-center gap-1.5 pr-1.5 text-sm py-1 px-2 transition-colors hover:bg-accent hover:text-accent-foreground"
+  >
+    {tag}
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      onClick={() => onRemove(tag)}
+      className="hover:bg-accent/20 rounded-full p-0.5 transition-colors h-auto w-auto min-w-0 min-h-0"
+    >
+      <X className="h-3 w-3" />
+      <span className="sr-only">Remove {tag}</span>
+    </Button>
+  </Badge>
+);
+
+type TagListProps = {
+  tags: string[];
+  onRemove: (tag: string) => void;
+};
+
+const TagList = ({ tags, onRemove }: TagListProps) => (
+  <div className="flex flex-wrap gap-2 mb-2">
+    {tags.map((tag) => (
+      <Tag key={tag} tag={tag} onRemove={onRemove} />
+    ))}
+  </div>
+);
+
+type TagInputProps = {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onAdd: () => void;
+};
+
+const TagInput = ({ value, onChange, onKeyDown, onAdd }: TagInputProps) => (
+  <div className="relative">
+    <Input
+      value={value}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      placeholder="Type and press Enter or click Add..."
+      className={cn('bg-background pr-16', !value && 'text-muted-foreground')}
+    />
+    {value.trim() && (
+      <Button
+        size="sm"
+        onClick={onAdd}
+        className="absolute top-1/2 -translate-y-1/2 right-2 h-7 px-3"
+      >
+        Add
+      </Button>
+    )}
+  </div>
+);
+
+type ArrayInputProps = {
+  title?: string;
+  data: string[];
+  onChange: (newData: string[]) => void;
+};
+
+export default function ArrayInput({ title, data, onChange }: ArrayInputProps) {
+  const [inputValue, setInputValue] = useState('');
+
+  const addTag = () => {
+    const trimmedValue = inputValue.trim();
+    if (trimmedValue && !data.includes(trimmedValue)) {
+      onChange([...data, trimmedValue]);
+      setInputValue('');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      addTag();
+    }
+  };
+
+  const removeTag = (tagToRemove: string) => {
+    onChange(data.filter((tag) => tag !== tagToRemove));
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label>{title}</Label>
+      <div className="p-2 bg-card rounded border border-input">
+        <TagList tags={data} onRemove={removeTag} />
+        <TagInput
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onAdd={addTag}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/audio-recorder.tsx

@@ -0,0 +1,292 @@
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useToast } from '@/hooks/use-toast';
+import { createElizaClient } from '@/lib/api-client-config';
+import { cn } from '@/lib/utils';
+import type { UUID } from '@elizaos/core';
+import { useMutation } from '@tanstack/react-query';
+import { Ellipsis, Mic, Send, Trash } from 'lucide-react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+type Props = {
+  agentId: UUID;
+  onChange: (newInput: string) => void;
+  className?: string;
+  timerClassName?: string;
+};
+
+type Record = {
+  id: number;
+  name: string;
+  file: string | null;
+};
+
+let recorder: MediaRecorder;
+let recordingChunks: BlobPart[] = [];
+let timerTimeout: ReturnType<typeof setTimeout>;
+
+// Utility function to pad a number with leading zeros
+const padWithLeadingZeros = (num: number, length: number): string => {
+  return String(num).padStart(length, '0');
+};
+
+export const AudioRecorder = ({ className, timerClassName, agentId, onChange }: Props) => {
+  const { toast } = useToast();
+  // States
+  const [isRecording, setIsRecording] = useState<boolean>(false);
+  const [_, setIsRecordingFinished] = useState<boolean>(false);
+  const [timer, setTimer] = useState<number>(0);
+  const [currentRecord, setCurrentRecord] = useState<Record>({
+    id: -1,
+    name: '',
+    file: null,
+  });
+  // Calculate the hours, minutes, and seconds from the timer
+  const minutes = Math.floor((timer % 3600) / 60);
+  const seconds = timer % 60;
+
+  const [minuteLeft, minuteRight] = useMemo(
+    () => padWithLeadingZeros(minutes, 2).split(''),
+    [minutes]
+  );
+  const [secondLeft, secondRight] = useMemo(
+    () => padWithLeadingZeros(seconds, 2).split(''),
+    [seconds]
+  );
+  // Refs
+  const mediaRecorderRef = useRef<{
+    stream: MediaStream | null;
+    analyser: AnalyserNode | null;
+    mediaRecorder: MediaRecorder | null;
+    audioContext: AudioContext | null;
+  }>({
+    stream: null,
+    analyser: null,
+    mediaRecorder: null,
+    audioContext: null,
+  });
+
+  const elizaClient = createElizaClient();
+  const mutation = useMutation({
+    mutationKey: ['whisper'],
+    mutationFn: (file: Blob) => elizaClient.audio.transcribe(agentId, { audio: file }),
+    onSuccess: (data) => {
+      if (data?.text) {
+        onChange(data.text);
+      }
+    },
+    onError: (e) => {
+      toast({
+        variant: 'destructive',
+        title: 'Unable to start recording',
+        description: e.message,
+      });
+      console.log(e);
+    },
+  });
+
+  function startRecording() {
+    if (navigator.mediaDevices?.getUserMedia) {
+      navigator.mediaDevices
+        .getUserMedia({
+          audio: true,
+        })
+        .then((stream) => {
+          setIsRecording(true);
+          // ============ Analyzing ============
+          const AudioContext = window.AudioContext;
+          const audioCtx = new AudioContext();
+          const analyser = audioCtx.createAnalyser();
+          const source = audioCtx.createMediaStreamSource(stream);
+          source.connect(analyser);
+          mediaRecorderRef.current = {
+            stream,
+            analyser,
+            mediaRecorder: null,
+            audioContext: audioCtx,
+          };
+
+          const mimeType = MediaRecorder.isTypeSupported('audio/mpeg')
+            ? 'audio/mpeg'
+            : MediaRecorder.isTypeSupported('audio/webm')
+              ? 'audio/webm'
+              : 'audio/wav';
+
+          const options = { mimeType };
+          mediaRecorderRef.current.mediaRecorder = new MediaRecorder(stream, options);
+          mediaRecorderRef.current.mediaRecorder.start();
+          recordingChunks = [];
+          // ============ Recording ============
+          recorder = new MediaRecorder(stream);
+          recorder.start();
+          recorder.ondataavailable = (e) => {
+            recordingChunks.push(e.data);
+          };
+        })
+        .catch((e) => {
+          toast({
+            variant: 'destructive',
+            title: 'Unable to start recording',
+            description: e.message,
+          });
+          console.log(e);
+        });
+    }
+  }
+  function stopRecording() {
+    recorder.onstop = () => {
+      const recordBlob = new Blob(recordingChunks, {
+        type: 'audio/wav',
+      });
+      mutation.mutate(recordBlob);
+      setCurrentRecord({
+        ...currentRecord,
+        file: window.URL.createObjectURL(recordBlob),
+      });
+      recordingChunks = [];
+    };
+
+    recorder.stop();
+
+    setIsRecording(false);
+    setIsRecordingFinished(true);
+    setTimer(0);
+    clearTimeout(timerTimeout);
+  }
+  function resetRecording() {
+    const { mediaRecorder, stream, analyser, audioContext } = mediaRecorderRef.current;
+
+    if (mediaRecorder) {
+      mediaRecorder.onstop = () => {
+        recordingChunks = [];
+      };
+      mediaRecorder.stop();
+    }
+
+    // Stop the web audio context and the analyser node
+    if (analyser) {
+      analyser.disconnect();
+    }
+    if (stream) {
+      for (const track of stream.getTracks()) {
+        track.stop();
+      }
+    }
+    if (audioContext) {
+      audioContext.close();
+    }
+    setIsRecording(false);
+    setIsRecordingFinished(true);
+    setTimer(0);
+    clearTimeout(timerTimeout);
+  }
+  const handleSubmit = () => {
+    stopRecording();
+  };
+
+  // Effect to update the timer every second
+  useEffect(() => {
+    if (isRecording) {
+      timerTimeout = setTimeout(() => {
+        setTimer(timer + 1);
+      }, 1000);
+    }
+    return () => clearTimeout(timerTimeout);
+  }, [isRecording, timer]);
+
+  if (mutation?.isPending) {
+    return (
+      <Button variant="ghost" disabled size="icon">
+        <Ellipsis className="size-4" />
+      </Button>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-2 border-l border-l-transparent border-opacity-0 transition-all duration-300',
+        {
+          'border-opacity-100 border-l-border pl-2': isRecording,
+        },
+        className
+      )}
+    >
+      {isRecording ? (
+        <div className="flex gap-1 items-center">
+          <div className="bg-red-500 rounded-full h-2.5 w-2.5 animate-pulse" />
+          <Timer
+            minuteLeft={minuteLeft}
+            minuteRight={minuteRight}
+            secondLeft={secondLeft}
+            secondRight={secondRight}
+            timerClassName={timerClassName}
+          />
+        </div>
+      ) : null}
+
+      <div className="flex items-center gap-2">
+        {/* ========== Delete recording button ========== */}
+        {isRecording ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button onClick={resetRecording} size={'icon'} variant="ghost">
+                <Trash className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent className="m-2">
+              <span> Reset recording</span>
+            </TooltipContent>
+          </Tooltip>
+        ) : null}
+
+        {/* ========== Start and send recording button ========== */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            {!isRecording ? (
+              <Button variant="ghost" size="icon" onClick={() => startRecording()}>
+                <Mic className="size-4" />
+                <span className="sr-only">Use Microphone</span>
+              </Button>
+            ) : (
+              <Button onClick={handleSubmit} variant="ghost" size="icon">
+                <Send className="size-4" />
+              </Button>
+            )}
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            <span>{!isRecording ? 'Start' : 'Send'} </span>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+const Timer = React.memo(
+  ({
+    minuteLeft,
+    minuteRight,
+    secondLeft,
+    secondRight,
+    timerClassName,
+  }: {
+    minuteLeft: string;
+    minuteRight: string;
+    secondLeft: string;
+    secondRight: string;
+    timerClassName?: string;
+  }) => {
+    return (
+      <div className={cn('text-sm animate-in duration-1000 fade-in-0 select-none', timerClassName)}>
+        <p>
+          {minuteLeft}
+          {minuteRight}:{secondLeft}
+          {secondRight}
+        </p>
+      </div>
+    );
+  }
+);
+
+Timer.displayName = 'Timer';

package/src/components/avatar-panel.tsx

@@ -0,0 +1,141 @@
+import { Button } from '@/components/ui/button';
+import type { Agent } from '@elizaos/core';
+import { Image as ImageIcon, Upload, X, Info } from 'lucide-react';
+import { useRef, useState, useEffect } from 'react';
+import { compressImage } from '@/lib/utils';
+import { AVATAR_IMAGE_MAX_SIZE } from '@/constants';
+
+interface AvatarPanelProps {
+  characterValue: Agent;
+  setCharacterValue: {
+    updateAvatar?: (avatarUrl: string) => void;
+    updateSetting?: <T>(path: string, value: T) => void;
+    updateField?: <T>(path: string, value: T) => void;
+    [key: string]: any;
+  };
+}
+
+export default function AvatarPanel({ characterValue, setCharacterValue }: AvatarPanelProps) {
+  // Extract avatar as string, handling various types
+  const getAvatarUrl = () => {
+    const avatarSetting = characterValue?.settings?.avatar;
+    return typeof avatarSetting === 'string' ? avatarSetting : null;
+  };
+
+  const [avatar, setAvatar] = useState<string | null>(getAvatarUrl());
+  const [hasChanged, setHasChanged] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Reset the change flag when component initializes or character changes
+  useEffect(() => {
+    setAvatar(getAvatarUrl());
+    setHasChanged(false);
+  }, [characterValue.id]);
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      try {
+        const compressedImage = await compressImage(file);
+        setAvatar(compressedImage);
+        setHasChanged(true);
+
+        // Only update when there's a real change
+        updateCharacterAvatar(compressedImage);
+      } catch (error) {
+        console.error('Error compressing image:', error);
+      }
+    }
+  };
+
+  const handleRemoveAvatar = () => {
+    if (avatar) {
+      setAvatar(null);
+      setHasChanged(true);
+      updateCharacterAvatar('');
+    }
+  };
+
+  // Centralized update function to avoid code duplication
+  const updateCharacterAvatar = (avatarUrl: string) => {
+    if (setCharacterValue.updateAvatar) {
+      // Use the specialized method for avatar updates when available
+      setCharacterValue.updateAvatar(avatarUrl);
+    } else if (setCharacterValue.updateSetting) {
+      // Use updateSetting as fallback
+      setCharacterValue.updateSetting('avatar', avatarUrl);
+    } else if (setCharacterValue.updateField) {
+      // Last resort - use the generic field update
+      setCharacterValue.updateField('settings.avatar', avatarUrl);
+    }
+  };
+
+  return (
+    <div className="rounded-lg w-full">
+      <h2 className="text-xl font-bold mb-4 pb-5 ml-1">Avatar Settings</h2>
+
+      <div className="flex flex-col items-center gap-4 pb-4 max-w-sm mx-auto">
+        {/* Image preview area */}
+        {avatar ? (
+          <div className="w-64 h-64 mb-2">
+            <img
+              src={avatar}
+              alt="Agent Avatar"
+              className="object-cover w-full h-full rounded-lg border"
+            />
+          </div>
+        ) : (
+          <div
+            className="w-64 h-64 flex items-center justify-center border border-dashed rounded-lg text-gray-500 mb-2 cursor-pointer hover:bg-gray-50 transition-colors"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <div className="flex flex-col items-center gap-2">
+              <ImageIcon className="w-10 h-10" />
+              <span className="text-sm">Click to upload</span>
+            </div>
+          </div>
+        )}
+
+        {/* Controls area */}
+        <div className="flex flex-col gap-3 w-64">
+          <input
+            type="file"
+            accept="image/*"
+            className="hidden"
+            ref={fileInputRef}
+            onChange={handleFileUpload}
+          />
+
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              className="flex items-center gap-2 flex-1"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              <Upload className="w-5 h-5" />
+              {avatar ? 'Replace' : 'Upload'}
+            </Button>
+
+            {avatar && (
+              <Button
+                type="button"
+                variant="outline"
+                className="flex items-center"
+                onClick={handleRemoveAvatar}
+              >
+                <X className="w-5 h-5" />
+              </Button>
+            )}
+          </div>
+
+          <div className="flex items-center justify-center gap-1 text-xs text-muted-foreground mt-1">
+            <Info className="w-3.5 h-3.5" />
+            <span>
+              Images greater than {AVATAR_IMAGE_MAX_SIZE}x{AVATAR_IMAGE_MAX_SIZE} will be resized
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}