@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/components/NotificationToast.tsx

@@ -0,0 +1,488 @@
+/**
+ * NotificationToast Component
+ *
+ * Toast notifications for alerts, messages, and system events.
+ * Supports multiple toast types and auto-dismiss.
+ */
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { getAgentColor, getAgentInitials } from '../lib/colors';
+
+export interface Toast {
+  id: string;
+  type: 'info' | 'success' | 'warning' | 'error' | 'message';
+  title: string;
+  message?: string;
+  agentName?: string;
+  duration?: number;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export interface NotificationToastProps {
+  toasts: Toast[];
+  onDismiss: (id: string) => void;
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  maxVisible?: number;
+}
+
+export function NotificationToast({
+  toasts,
+  onDismiss,
+  position = 'top-right',
+  maxVisible = 5,
+}: NotificationToastProps) {
+  const visibleToasts = toasts.slice(0, maxVisible);
+
+  return (
+    <div className={`toast-container toast-${position}`}>
+      {visibleToasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onDismiss={onDismiss} />
+      ))}
+    </div>
+  );
+}
+
+interface ToastItemProps {
+  toast: Toast;
+  onDismiss: (id: string) => void;
+}
+
+function ToastItem({ toast, onDismiss }: ToastItemProps) {
+  const [isExiting, setIsExiting] = useState(false);
+
+  const handleDismiss = useCallback(() => {
+    setIsExiting(true);
+    setTimeout(() => onDismiss(toast.id), 200);
+  }, [toast.id, onDismiss]);
+
+  // Auto-dismiss
+  useEffect(() => {
+    if (toast.duration === 0) return;
+
+    const duration = toast.duration || 5000;
+    const timer = setTimeout(handleDismiss, duration);
+    return () => clearTimeout(timer);
+  }, [toast.duration, handleDismiss]);
+
+  const colors = toast.agentName ? getAgentColor(toast.agentName) : null;
+  const Icon = getToastIcon(toast.type);
+
+  return (
+    <div
+      className={`toast toast-${toast.type} ${isExiting ? 'toast-exit' : ''}`}
+      role="alert"
+    >
+      <div className="toast-icon-wrapper">
+        {toast.agentName ? (
+          <div
+            className="toast-agent-avatar"
+            style={{ backgroundColor: colors?.primary, color: colors?.text }}
+          >
+            {getAgentInitials(toast.agentName)}
+          </div>
+        ) : (
+          <div className={`toast-icon toast-icon-${toast.type}`}>
+            <Icon />
+          </div>
+        )}
+      </div>
+
+      <div className="toast-content">
+        <div className="toast-header">
+          <span className="toast-title">{toast.title}</span>
+          {toast.agentName && <span className="toast-agent">@{toast.agentName}</span>}
+        </div>
+        {toast.message && <p className="toast-message">{toast.message}</p>}
+        {toast.action && (
+          <button
+            className="toast-action"
+            onClick={() => {
+              toast.action?.onClick();
+              handleDismiss();
+            }}
+          >
+            {toast.action.label}
+          </button>
+        )}
+      </div>
+
+      <button className="toast-close" onClick={handleDismiss} aria-label="Dismiss">
+        <CloseIcon />
+      </button>
+
+      {toast.duration !== 0 && (
+        <div
+          className="toast-progress"
+          style={{ animationDuration: `${toast.duration || 5000}ms` }}
+        />
+      )}
+    </div>
+  );
+}
+
+// Hook for managing toasts
+export function useToasts() {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = useCallback((toast: Omit<Toast, 'id'>) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { ...toast, id }]);
+    return id;
+  }, []);
+
+  const dismissToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const clearToasts = useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  // Convenience methods
+  const info = useCallback(
+    (title: string, message?: string) => addToast({ type: 'info', title, message }),
+    [addToast]
+  );
+
+  const success = useCallback(
+    (title: string, message?: string) => addToast({ type: 'success', title, message }),
+    [addToast]
+  );
+
+  const warning = useCallback(
+    (title: string, message?: string) => addToast({ type: 'warning', title, message }),
+    [addToast]
+  );
+
+  const error = useCallback(
+    (title: string, message?: string) => addToast({ type: 'error', title, message }),
+    [addToast]
+  );
+
+  const message = useCallback(
+    (agentName: string, content: string, action?: Toast['action']) =>
+      addToast({ type: 'message', title: 'New Message', message: content, agentName, action }),
+    [addToast]
+  );
+
+  return {
+    toasts,
+    addToast,
+    dismissToast,
+    clearToasts,
+    info,
+    success,
+    warning,
+    error,
+    message,
+  };
+}
+
+// Helper function
+function getToastIcon(type: Toast['type']) {
+  switch (type) {
+    case 'success':
+      return CheckIcon;
+    case 'warning':
+      return WarningIcon;
+    case 'error':
+      return ErrorIcon;
+    case 'message':
+      return MessageIcon;
+    default:
+      return InfoIcon;
+  }
+}
+
+// Icon components
+function InfoIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+function WarningIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="15" y1="9" x2="9" y2="15" />
+      <line x1="9" y1="9" x2="15" y2="15" />
+    </svg>
+  );
+}
+
+function MessageIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+/**
+ * CSS styles for the notification toast
+ */
+export const notificationToastStyles = `
+.toast-container {
+  position: fixed;
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.toast-top-right {
+  top: 16px;
+  right: 16px;
+}
+
+.toast-top-left {
+  top: 16px;
+  left: 16px;
+}
+
+.toast-bottom-right {
+  bottom: 16px;
+  right: 16px;
+}
+
+.toast-bottom-left {
+  bottom: 16px;
+  left: 16px;
+}
+
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: 360px;
+  padding: 14px 16px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  pointer-events: auto;
+  animation: toastEnter 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.toast-exit {
+  animation: toastExit 0.2s ease forwards;
+}
+
+.toast-icon-wrapper {
+  flex-shrink: 0;
+}
+
+.toast-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toast-icon-info {
+  background: #dbeafe;
+  color: #2563eb;
+}
+
+.toast-icon-success {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.toast-icon-warning {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.toast-icon-error {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.toast-icon-message {
+  background: #f3e8ff;
+  color: #7c3aed;
+}
+
+.toast-agent-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toast-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.toast-agent {
+  font-size: 12px;
+  color: #888;
+}
+
+.toast-message {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: #555;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.toast-action {
+  margin-top: 8px;
+  padding: 6px 12px;
+  background: #f5f5f5;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #333;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s;
+}
+
+.toast-action:hover {
+  background: #e8e8e8;
+}
+
+.toast-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #888;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.toast-close:hover {
+  background: #f5f5f5;
+  color: #333;
+}
+
+.toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  background: currentColor;
+  opacity: 0.3;
+  animation: toastProgress linear forwards;
+}
+
+.toast-info .toast-progress {
+  color: #2563eb;
+}
+
+.toast-success .toast-progress {
+  color: #16a34a;
+}
+
+.toast-warning .toast-progress {
+  color: #d97706;
+}
+
+.toast-error .toast-progress {
+  color: #dc2626;
+}
+
+.toast-message .toast-progress {
+  color: #7c3aed;
+}
+
+@keyframes toastEnter {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes toastExit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes toastProgress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+`;

package/src/components/OnlineUsersIndicator.tsx

@@ -0,0 +1,164 @@
+/**
+ * OnlineUsersIndicator Component
+ *
+ * Shows a row of avatars for online users with a count indicator.
+ * Clicking reveals a dropdown list with all online users.
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import type { UserPresence } from './hooks/usePresence';
+
+export interface OnlineUsersIndicatorProps {
+  /** List of online users */
+  onlineUsers: UserPresence[];
+  /** Callback when a user is clicked (for profile viewing) */
+  onUserClick?: (user: UserPresence) => void;
+  /** Maximum avatars to show before "+N" */
+  maxAvatars?: number;
+}
+
+export function OnlineUsersIndicator({
+  onlineUsers,
+  onUserClick,
+  maxAvatars = 4,
+}: OnlineUsersIndicatorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen]);
+
+  if (onlineUsers.length === 0) {
+    return null;
+  }
+
+  const displayedUsers = onlineUsers.slice(0, maxAvatars);
+  const remainingCount = Math.max(0, onlineUsers.length - maxAvatars);
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Compact avatar row */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-white/[0.05] transition-colors"
+        title={`${onlineUsers.length} user${onlineUsers.length !== 1 ? 's' : ''} online`}
+      >
+        {/* Green online indicator */}
+        <div className="w-2 h-2 bg-green-500 rounded-full" />
+
+        {/* Stacked avatars */}
+        <div className="flex -space-x-1.5">
+          {displayedUsers.map((user) => (
+            <div
+              key={user.username}
+              className="relative ring-2 ring-[#1a1d21] rounded-full"
+              title={user.username}
+            >
+              {user.avatarUrl ? (
+                <img
+                  src={user.avatarUrl}
+                  alt={user.username}
+                  className="w-6 h-6 rounded-full object-cover"
+                />
+              ) : (
+                <div className="w-6 h-6 rounded-full bg-[#a855f7] flex items-center justify-center text-[10px] text-white font-medium">
+                  {user.username.charAt(0).toUpperCase()}
+                </div>
+              )}
+            </div>
+          ))}
+          {remainingCount > 0 && (
+            <div className="w-6 h-6 rounded-full bg-[#3d4043] ring-2 ring-[#1a1d21] flex items-center justify-center text-[10px] text-[#d1d2d3] font-medium">
+              +{remainingCount}
+            </div>
+          )}
+        </div>
+
+        {/* Count text */}
+        <span className="text-xs text-[#8d8d8e]">
+          {onlineUsers.length} online
+        </span>
+      </button>
+
+      {/* Dropdown list */}
+      {isOpen && (
+        <div className="absolute right-0 top-full mt-1 w-64 bg-[#1a1d21] border border-white/10 rounded-lg shadow-xl z-50 max-h-[300px] overflow-y-auto">
+          <div className="p-2 border-b border-white/10">
+            <h3 className="text-sm font-medium text-[#d1d2d3]">Online Users</h3>
+          </div>
+          <div className="py-1">
+            {onlineUsers.map((user) => (
+              <button
+                key={user.username}
+                onClick={() => {
+                  onUserClick?.(user);
+                  setIsOpen(false);
+                }}
+                className="w-full flex items-center gap-3 px-3 py-2 hover:bg-white/[0.05] transition-colors text-left"
+              >
+                {/* Avatar with online indicator */}
+                <div className="relative">
+                  {user.avatarUrl ? (
+                    <img
+                      src={user.avatarUrl}
+                      alt={user.username}
+                      className="w-8 h-8 rounded-full object-cover"
+                    />
+                  ) : (
+                    <div className="w-8 h-8 rounded-full bg-[#a855f7] flex items-center justify-center text-xs text-white font-medium">
+                      {user.username.charAt(0).toUpperCase()}
+                    </div>
+                  )}
+                  {/* Green online dot */}
+                  <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 rounded-full border-2 border-[#1a1d21]" />
+                </div>
+
+                {/* User info */}
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-[#d1d2d3] truncate">
+                    {user.username}
+                  </div>
+                  <div className="text-xs text-[#8d8d8e]">
+                    Online since {formatTime(user.connectedAt)}
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Format a timestamp to a readable time
+ */
+function formatTime(timestamp: string): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+
+  // If same day, show time only
+  if (date.toDateString() === now.toDateString()) {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+
+  // Otherwise show date and time
+  return date.toLocaleDateString([], {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}