@elizaos/client 1.5.5-alpha.10

package/src/components/media-content.tsx

@@ -0,0 +1,385 @@
+'use client';
+
+import { useState } from 'react';
+import { Play, Volume2, FileText, ExternalLink, AlertCircle, Download } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface MediaContentProps {
+  url: string;
+  title?: string;
+  className?: string;
+  maxWidth?: number;
+  maxHeight?: number;
+}
+
+// Utility functions to detect media types
+const getYouTubeId = (url: string): string | null => {
+  const patterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+    /youtube\.com\/watch\?.*v=([^&\n?#]+)/,
+  ];
+
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match) return match[1];
+  }
+  return null;
+};
+
+const getSpotifyId = (url: string): { type: string; id: string } | null => {
+  const match = url.match(
+    /spotify\.com\/(track|album|playlist|episode|show)\/([a-zA-Z0-9]+)(?:\?.*)?/
+  );
+  if (match) {
+    return { type: match[1], id: match[2] };
+  }
+  return null;
+};
+
+const isImageUrl = (url: string): boolean => {
+  return /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/i.test(url);
+};
+
+const isVideoUrl = (url: string): boolean => {
+  return /\.(mp4|webm|ogg|mov|avi|wmv|flv|mkv)(\?.*)?$/i.test(url);
+};
+
+const isAudioUrl = (url: string): boolean => {
+  return /\.(mp3|wav|ogg|aac|flac|m4a|wma)(\?.*)?$/i.test(url);
+};
+
+const isPdfUrl = (url: string): boolean => {
+  return /\.pdf(\?.*)?$/i.test(url) || url.includes('pdf');
+};
+
+const isDocumentUrl = (url: string): boolean => {
+  return /\.(pdf|doc|docx|ppt|pptx|xls|xlsx|txt)(\?.*)?$/i.test(url);
+};
+
+export default function MediaContent({
+  url,
+  title,
+  className,
+  maxWidth = 600,
+  maxHeight = 400,
+}: MediaContentProps) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  const handleLoad = () => setIsLoading(false);
+  const handleError = () => {
+    setIsLoading(false);
+    setHasError(true);
+  };
+
+  // YouTube Video
+  const youtubeId = getYouTubeId(url);
+  if (youtubeId) {
+    return (
+      <div
+        className={cn('relative rounded-lg overflow-hidden bg-muted', className)}
+        style={{ maxWidth, maxHeight }}
+      >
+        {isLoading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-muted">
+            <div className="flex items-center space-x-2 text-muted-foreground">
+              <Play className="w-6 h-6" />
+              <span>Loading video...</span>
+            </div>
+          </div>
+        )}
+        <iframe
+          src={`https://www.youtube.com/embed/${youtubeId}`}
+          title={title || 'YouTube video'}
+          className="w-full aspect-video"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          onLoad={handleLoad}
+          onError={handleError}
+        />
+      </div>
+    );
+  }
+
+  // Spotify Content
+  const spotifyData = getSpotifyId(url);
+  if (spotifyData) {
+    const height = spotifyData.type === 'track' ? 152 : spotifyData.type === 'episode' ? 232 : 352;
+    return (
+      <div
+        className={cn('relative rounded-lg overflow-hidden bg-muted', className)}
+        style={{ maxWidth }}
+      >
+        {isLoading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-muted">
+            <div className="flex items-center space-x-2 text-muted-foreground">
+              <Volume2 className="w-6 h-6" />
+              <span>Loading Spotify content...</span>
+            </div>
+          </div>
+        )}
+        <iframe
+          src={`https://open.spotify.com/embed/${spotifyData.type}/${spotifyData.id}?utm_source=generator`}
+          width="100%"
+          height={height}
+          frameBorder="0"
+          allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+          loading="lazy"
+          title={title || 'Spotify content'}
+          onLoad={handleLoad}
+          onError={handleError}
+        />
+      </div>
+    );
+  }
+
+  // Direct Image
+  if (isImageUrl(url)) {
+    return (
+      <div
+        className={cn('relative rounded-lg overflow-hidden bg-muted', className)}
+        style={{ maxWidth, maxHeight }}
+      >
+        {isLoading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-muted">
+            <div className="animate-pulse w-full h-32 bg-muted-foreground/20 rounded" />
+          </div>
+        )}
+        {hasError ? (
+          <div className="flex items-center justify-center p-4 text-muted-foreground">
+            <AlertCircle className="w-6 h-6 mr-2" />
+            <span>Failed to load image</span>
+          </div>
+        ) : (
+          <img
+            src={url || '/placeholder.svg'}
+            alt={title || 'Image'}
+            width={maxWidth}
+            height={maxHeight}
+            className="w-full h-auto object-contain"
+            onLoad={handleLoad}
+            onError={handleError}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // Direct Video
+  if (isVideoUrl(url)) {
+    return (
+      <div
+        className={cn('relative rounded-lg overflow-hidden bg-muted', className)}
+        style={{ maxWidth, maxHeight }}
+      >
+        {hasError ? (
+          <div className="flex items-center justify-center p-4 text-muted-foreground">
+            <AlertCircle className="w-6 h-6 mr-2" />
+            <span>Failed to load video</span>
+          </div>
+        ) : (
+          <video
+            controls
+            preload="metadata"
+            className="w-full h-auto"
+            onLoadedData={handleLoad}
+            onError={handleError}
+            crossOrigin="anonymous"
+          >
+            <source src={url} />
+            Your browser does not support the video tag.
+          </video>
+        )}
+      </div>
+    );
+  }
+
+  // Direct Audio
+  if (isAudioUrl(url)) {
+    return (
+      <div className={cn('relative rounded-lg bg-card border p-4', className)} style={{ maxWidth }}>
+        <div className="flex items-center space-x-3 mb-3 overflow-hidden">
+          <Volume2 className="w-5 h-5 text-muted-foreground" />
+          <span className="text-sm text-primary font-medium truncate whitespace-nowrap overflow-hidden text-ellipsis max-w-44">
+            {title || 'Audio File'}
+          </span>
+        </div>
+        {hasError ? (
+          <div className="flex items-center text-muted-foreground">
+            <AlertCircle className="w-4 h-4 mr-2" />
+            <span className="text-sm">Failed to load audio</span>
+          </div>
+        ) : (
+          <audio
+            controls
+            className="w-full"
+            preload="metadata"
+            onLoadedData={handleLoad}
+            onError={handleError}
+            crossOrigin="anonymous"
+          >
+            <source src={url} />
+            Your browser does not support the audio tag.
+          </audio>
+        )}
+      </div>
+    );
+  }
+
+  // PDF Document
+  if (isPdfUrl(url)) {
+    return (
+      <div
+        className={cn('relative rounded-lg overflow-hidden bg-card border', className)}
+        style={{ maxWidth }}
+      >
+        <div className="flex items-center justify-between p-3 bg-muted/50 border-b gap-10">
+          <div className="flex items-center space-x-2 overflow-hidden">
+            <FileText className="w-5 h-5 text-muted-foreground" />
+            <span className="text-sm text-primary font-medium truncate whitespace-nowrap overflow-hidden text-ellipsis max-w-44">
+              {title || 'PDF Document'}
+            </span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <a
+              href={`https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center space-x-1 text-primary hover:text-primary/80 text-sm"
+            >
+              <ExternalLink className="w-4 h-4" />
+              <span>View</span>
+            </a>
+            <a
+              href={url}
+              download
+              className="flex items-center space-x-1 text-primary hover:text-primary/80 text-sm"
+            >
+              <Download className="w-4 h-4" />
+              <span>Download</span>
+            </a>
+          </div>
+        </div>
+
+        {/* Try multiple PDF viewing methods */}
+        <div className="relative" style={{ height: Math.min(maxHeight, 500) }}>
+          {hasError ? (
+            <div className="flex flex-col items-center justify-center p-8 text-muted-foreground h-full">
+              <AlertCircle className="w-8 h-8 mb-2" />
+              <span className="text-center mb-4">PDF preview not available</span>
+              <div className="flex space-x-2">
+                <a
+                  href={`https://docs.google.com/viewer?url=${encodeURIComponent(url)}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="px-3 py-2 bg-primary text-primary-foreground rounded text-sm hover:bg-primary/90"
+                >
+                  Open in Google Viewer
+                </a>
+                <a
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="px-3 py-2 bg-secondary text-secondary-foreground rounded text-sm hover:bg-secondary/90"
+                >
+                  Open Original
+                </a>
+              </div>
+            </div>
+          ) : (
+            <>
+              {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-muted">
+                  <div className="flex items-center space-x-2 text-muted-foreground">
+                    <FileText className="w-6 h-6" />
+                    <span>Loading PDF...</span>
+                  </div>
+                </div>
+              )}
+
+              {/* Try Google Docs Viewer first */}
+              <iframe
+                src={`https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true`}
+                className="w-full h-full border-0"
+                title={title || 'PDF Document'}
+                onLoad={handleLoad}
+                onError={() => {
+                  // Fallback to direct PDF if Google Viewer fails
+                  const iframe = document.createElement('iframe');
+                  iframe.src = `${url}#toolbar=0&navpanes=0&scrollbar=0`;
+                  iframe.className = 'w-full h-full border-0';
+                  iframe.title = title || 'PDF Document';
+                  iframe.onload = handleLoad;
+                  iframe.onerror = handleError;
+
+                  const container = document.querySelector(`[data-pdf-container="${url}"]`);
+                  if (container) {
+                    container.innerHTML = '';
+                    container.appendChild(iframe);
+                  }
+                }}
+              />
+
+              <div data-pdf-container={url} className="hidden" />
+            </>
+          )}
+        </div>
+
+        {/* PDF Info Footer */}
+        <div className="p-2 bg-muted/50 border-t text-xs text-muted-foreground">
+          <span>PDF Document • Click "View" or "Download" if preview doesn't load</span>
+        </div>
+      </div>
+    );
+  }
+
+  // Other Documents
+  if (isDocumentUrl(url)) {
+    return (
+      <div className={cn('rounded-lg bg-card border p-4', className)} style={{ maxWidth }}>
+        <div className="flex items-center space-x-3">
+          <FileText className="w-8 h-8 text-muted-foreground" />
+          <div className="flex-1 overflow-hidden mr-6">
+            <p className="text-sm text-primary font-medium truncate whitespace-nowrap overflow-hidden text-ellipsis max-w-44">
+              {title || 'Document'}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {url.split('.').pop()?.toUpperCase()} file
+            </p>
+          </div>
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center space-x-1 text-primary hover:text-primary/80 text-sm font-medium"
+          >
+            <ExternalLink className="w-4 h-4" />
+            <span>Open</span>
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  // Fallback for unknown URLs
+  return (
+    <div className={cn('rounded-lg bg-card border p-4', className)} style={{ maxWidth }}>
+      <div className="flex items-center space-x-3">
+        <ExternalLink className="w-8 h-8 text-muted-foreground" />
+        <div className="flex-1">
+          <p className="text-sm text-primary font-medium">{title || 'External Link'}</p>
+          <p className="text-xs text-muted-foreground truncate">{url}</p>
+        </div>
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center space-x-1 text-primary hover:text-primary/80 text-sm font-medium"
+        >
+          <ExternalLink className="w-4 h-4" />
+          <span>Open</span>
+        </a>
+      </div>
+    </div>
+  );
+}

package/src/components/memory-graph.tsx

@@ -0,0 +1,170 @@
+import { useMemo, useRef, useEffect, useState } from 'react';
+import ForceGraph2D from 'react-force-graph-2d';
+import type { Memory } from '@elizaos/core';
+import { computePca } from '@/lib/pca';
+
+export default function MemoryGraph({
+  memories,
+  onSelect,
+}: {
+  memories: Memory[];
+  onSelect: (m: Memory) => void;
+}) {
+  const graphRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (graphRef.current) {
+      setDimensions({
+        width: graphRef.current.offsetWidth,
+        height: graphRef.current.offsetHeight,
+      });
+    }
+    const handleResize = () => {
+      if (graphRef.current) {
+        setDimensions({
+          width: graphRef.current.offsetWidth,
+          height: graphRef.current.offsetHeight,
+        });
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const data = useMemo(() => {
+    console.log('Processing memories for graph:', memories.length);
+
+    // Filter memories with valid embeddings
+    const memoriesWithEmbeddings = memories.filter(
+      (m) => m.embedding && Array.isArray(m.embedding) && m.embedding.length > 0
+    );
+
+    console.log('Memories with embeddings:', memoriesWithEmbeddings.length);
+
+    if (memoriesWithEmbeddings.length === 0) {
+      return { nodes: [], links: [], hasEmbeddings: false };
+    }
+
+    const embeddings = memoriesWithEmbeddings.map((m) => m.embedding as number[]);
+
+    // Compute PCA coordinates
+    const coords = computePca(embeddings, 2);
+
+    // Scale coordinates to fit the graph area with some padding
+    const padding = 50;
+    const scale = Math.min(dimensions.width - 2 * padding, dimensions.height - 2 * padding) * 0.3;
+    const centerX = dimensions.width / 2;
+    const centerY = dimensions.height / 2;
+
+    const nodes = memoriesWithEmbeddings.map((m, i) => ({
+      id: m.id || String(i),
+      memory: m,
+      x: coords[i][0] * scale + centerX,
+      y: coords[i][1] * scale + centerY,
+      fx: coords[i][0] * scale + centerX, // Fixed position
+      fy: coords[i][1] * scale + centerY, // Fixed position
+      val: 8, // Slightly larger node size
+      color: m.entityId === m.agentId ? '#3b82f6' : '#10b981', // Blue for agent, green for user
+    }));
+
+    // Create links between temporally adjacent memories
+    const links: any[] = [];
+    const sortedMemories = [...memoriesWithEmbeddings].sort(
+      (a, b) => (a.createdAt || 0) - (b.createdAt || 0)
+    );
+
+    // Only create links if there are enough memories
+    if (sortedMemories.length > 1) {
+      for (let i = 0; i < sortedMemories.length - 1; i++) {
+        const sourceNode = nodes.find((n) => n.memory.id === sortedMemories[i].id);
+        const targetNode = nodes.find((n) => n.memory.id === sortedMemories[i + 1].id);
+
+        if (sourceNode && targetNode) {
+          links.push({
+            source: sourceNode.id,
+            target: targetNode.id,
+            value: 0.2,
+          });
+        }
+      }
+    }
+
+    return { nodes, links, hasEmbeddings: true };
+  }, [memories, dimensions]);
+
+  // Loading or empty state
+  if (!data.hasEmbeddings) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-muted-foreground mb-2">No embeddings available for visualization</p>
+          <p className="text-sm text-muted-foreground">
+            Embeddings are required to display the memory graph
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={graphRef} className="w-full h-full bg-muted/10 rounded-lg relative">
+      {/* Legend */}
+      <div className="absolute top-4 left-4 bg-background/90 backdrop-blur-sm border rounded-lg p-3 z-10">
+        <h4 className="text-sm font-medium mb-2">Legend</h4>
+        <div className="space-y-1">
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 rounded-full bg-blue-500"></div>
+            <span className="text-xs">Agent Messages</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 rounded-full bg-green-500"></div>
+            <span className="text-xs">User Messages</span>
+          </div>
+        </div>
+        <p className="text-xs text-muted-foreground mt-2">Click nodes to view details</p>
+      </div>
+
+      {dimensions.width > 0 && dimensions.height > 0 && data.nodes.length > 0 && (
+        <ForceGraph2D
+          width={dimensions.width}
+          height={dimensions.height}
+          graphData={data}
+          nodeLabel={(node: any) => {
+            const content = node.memory?.content;
+            const text = content?.text || '';
+            const truncated = text.length > 100 ? text.substring(0, 100) + '...' : text;
+            return truncated || node.memory?.id || 'Memory';
+          }}
+          onNodeClick={(node: any) => {
+            console.log('Node clicked:', node);
+            if (node.memory) {
+              onSelect(node.memory);
+            }
+          }}
+          nodeCanvasObject={(node: any, ctx, globalScale) => {
+            const label = node.memory?.entityId === node.memory?.agentId ? 'A' : 'U';
+            const fontSize = 12 / globalScale;
+            ctx.font = `${fontSize}px Sans-Serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+
+            // Draw node circle
+            ctx.beginPath();
+            ctx.arc(node.x, node.y, node.val, 0, 2 * Math.PI, false);
+            ctx.fillStyle = node.color;
+            ctx.fill();
+
+            // Draw label
+            ctx.fillStyle = 'white';
+            ctx.fillText(label, node.x, node.y);
+          }}
+          linkColor={() => '#64748b'}
+          backgroundColor="#00000000"
+          enableZoomInteraction={true}
+          enableNodeDrag={false}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/missing-secrets-dialog.tsx

@@ -0,0 +1,72 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { AlertCircle } from 'lucide-react';
+
+interface MissingSecretsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  missingSecrets: Array<{
+    name: string;
+    plugin?: string;
+    description?: string;
+  }>;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function MissingSecretsDialog({
+  open,
+  onOpenChange,
+  missingSecrets,
+  onConfirm,
+  onCancel,
+}: MissingSecretsDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2">
+            <AlertCircle className="h-5 w-5 text-yellow-500" />
+            Missing Required Configuration
+          </AlertDialogTitle>
+          <AlertDialogDescription className="space-y-3">
+            <p>
+              The following required secrets are missing or empty. Your agent may not function
+              properly without these values.
+            </p>
+            <div className="bg-muted rounded-md p-3 space-y-2">
+              {missingSecrets.map((secret) => (
+                <div key={secret.name} className="text-sm">
+                  <code className="font-mono font-semibold">{secret.name}</code>
+                  {secret.plugin && (
+                    <span className="text-muted-foreground ml-2">
+                      (required by {secret.plugin})
+                    </span>
+                  )}
+                  {secret.description && (
+                    <div className="text-xs text-muted-foreground mt-1">{secret.description}</div>
+                  )}
+                </div>
+              ))}
+            </div>
+            <p className="text-sm">Do you want to save anyway?</p>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onCancel}>Go Back</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm} className="bg-yellow-600 hover:bg-yellow-700">
+            Save Anyway
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}