agent-relay 1.6.0 → 2.0.0

package/packages/dashboard/ui/react-components/MessageSenderName.tsx

@@ -0,0 +1,91 @@
+/**
+ * MessageSenderName Component
+ *
+ * Clickable sender name for chat messages.
+ * Opens agent profile panel for agents, user profile panel for humans.
+ * Maintains existing color styling while adding hover feedback.
+ */
+
+import React, { useCallback } from 'react';
+import type { Agent } from '../types';
+import type { UserPresence } from './hooks/usePresence';
+
+export interface MessageSenderNameProps {
+  /** Display name to show */
+  displayName: string;
+  /** Color for the name text */
+  color: string;
+  /** Whether this sender is the current user */
+  isCurrentUser?: boolean;
+  /** Agent object if sender is an agent */
+  agent?: Agent;
+  /** User presence object if sender is a human user */
+  userPresence?: UserPresence;
+  /** Callback when an agent name is clicked */
+  onAgentClick?: (agent: Agent) => void;
+  /** Callback when a human user name is clicked */
+  onUserClick?: (user: UserPresence) => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Clickable sender name component for chat messages.
+ * Provides visual feedback on hover and opens the appropriate profile panel on click.
+ */
+export function MessageSenderName({
+  displayName,
+  color,
+  isCurrentUser = false,
+  agent,
+  userPresence,
+  onAgentClick,
+  onUserClick,
+  className = '',
+}: MessageSenderNameProps) {
+  const handleClick = useCallback(() => {
+    if (agent && onAgentClick) {
+      onAgentClick(agent);
+    } else if (userPresence && onUserClick) {
+      onUserClick(userPresence);
+    }
+  }, [agent, userPresence, onAgentClick, onUserClick]);
+
+  // Determine if the name should be clickable
+  const isClickable = (agent && onAgentClick) || (userPresence && onUserClick);
+
+  // If not clickable, render as plain text
+  if (!isClickable) {
+    return (
+      <span
+        className={`font-display font-semibold text-sm ${className}`}
+        style={{ color }}
+      >
+        {displayName}
+      </span>
+    );
+  }
+
+  // Render as interactive button
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className={`
+        font-display font-semibold text-sm
+        bg-transparent border-none p-0 m-0
+        cursor-pointer
+        transition-all duration-150
+        hover:underline hover:decoration-current hover:decoration-1 hover:underline-offset-2
+        focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-accent-cyan/50 focus:rounded-sm
+        ${className}
+      `}
+      style={{ color }}
+      title={`View ${agent ? 'agent' : 'user'} profile: ${displayName}`}
+    >
+      {displayName}
+    </button>
+  );
+}
+
+export default MessageSenderName;

package/packages/dashboard/ui/react-components/MessageStatusIndicator.tsx

@@ -0,0 +1,142 @@
+/**
+ * MessageStatusIndicator Component
+ *
+ * Shows the delivery status of a message:
+ * - Sending/Unread: Animated clock/pending icon
+ * - Acked/Read: Checkmark icon (success)
+ * - Failed: Exclamation icon (error - NACK or timeout)
+ *
+ * Used to indicate when a message was received by an agent
+ * before they start responding (fills the gap before ThinkingIndicator).
+ */
+
+import React from 'react';
+import type { MessageStatus } from '../types';
+
+export interface MessageStatusIndicatorProps {
+  /** Message delivery status */
+  status?: MessageStatus;
+  /** Size variant */
+  size?: 'small' | 'medium';
+}
+
+export function MessageStatusIndicator({
+  status,
+  size = 'small',
+}: MessageStatusIndicatorProps) {
+  // Don't show anything if no status
+  if (!status) return null;
+
+  const sizeClasses = {
+    small: 'w-3.5 h-3.5',
+    medium: 'w-4 h-4',
+  };
+
+  const sizeClass = sizeClasses[size];
+
+  // Sending/Unread - show pending indicator
+  if (status === 'sending' || status === 'unread') {
+    return (
+      <span
+        className={`inline-flex items-center justify-center ${sizeClass} text-text-muted`}
+        title="Sending..."
+      >
+        <SendingIcon className={sizeClass} />
+      </span>
+    );
+  }
+
+  // Acked/Read - show checkmark
+  if (status === 'acked' || status === 'read') {
+    return (
+      <span
+        className={`inline-flex items-center justify-center ${sizeClass} text-success`}
+        title="Delivered"
+      >
+        <CheckIcon className={sizeClass} />
+      </span>
+    );
+  }
+
+  // Failed - show error indicator
+  if (status === 'failed') {
+    return (
+      <span
+        className={`inline-flex items-center justify-center ${sizeClass} text-error`}
+        title="Delivery failed"
+      >
+        <FailedIcon className={sizeClass} />
+      </span>
+    );
+  }
+
+  return null;
+}
+
+function SendingIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={`animate-pulse ${className}`}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      {/* Clock/pending icon */}
+      <circle cx="8" cy="8" r="6" />
+      <path d="M8 5v3l2 1" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      {/* Single checkmark for delivered */}
+      <path d="M3 8l3 3 7-7" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function FailedIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      {/* Exclamation mark in circle for failed delivery */}
+      <circle cx="8" cy="8" r="6" />
+      <line x1="8" y1="5" x2="8" y2="8" strokeLinecap="round" />
+      <circle cx="8" cy="11" r="0.5" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+/**
+ * Double checkmark variant for when message has been read
+ * (not currently used, but available for future enhancement)
+ */
+export function DoubleCheckIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 20 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      {/* Double checkmark for read */}
+      <path d="M1 8l3 3 7-7" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M7 8l3 3 7-7" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

package/packages/dashboard/ui/react-components/NewConversationModal.tsx

@@ -0,0 +1,400 @@
+/**
+ * NewConversationModal Component
+ *
+ * Modal for starting a new conversation with an agent.
+ * Allows selecting a target agent and composing an initial message.
+ */
+
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import type { Agent } from '../types';
+import { getAgentColor, getAgentInitials } from '../lib/colors';
+
+export interface NewConversationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSend: (to: string, content: string) => Promise<boolean>;
+  agents: Agent[];
+  isSending?: boolean;
+  error?: string | null;
+  /** Optional: Pre-select an agent */
+  preselectedAgent?: string;
+}
+
+export function NewConversationModal({
+  isOpen,
+  onClose,
+  onSend,
+  agents,
+  isSending = false,
+  error,
+  preselectedAgent,
+}: NewConversationModalProps) {
+  const [selectedAgent, setSelectedAgent] = useState<string>('');
+  const [message, setMessage] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [localError, setLocalError] = useState<string | null>(null);
+  const messageInputRef = useRef<HTMLTextAreaElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Filter agents based on search query
+  const filteredAgents = useMemo(() => {
+    if (!searchQuery.trim()) return agents;
+    const query = searchQuery.toLowerCase();
+    return agents.filter(
+      (agent) =>
+        agent.name.toLowerCase().includes(query) ||
+        agent.role?.toLowerCase().includes(query) ||
+        agent.team?.toLowerCase().includes(query)
+    );
+  }, [agents, searchQuery]);
+
+  // Reset state when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedAgent(preselectedAgent || '');
+      setMessage('');
+      setSearchQuery('');
+      setLocalError(null);
+      setTimeout(() => {
+        if (preselectedAgent) {
+          messageInputRef.current?.focus();
+        } else {
+          searchInputRef.current?.focus();
+        }
+      }, 100);
+    }
+  }, [isOpen, preselectedAgent]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!selectedAgent) {
+      setLocalError('Please select an agent');
+      return;
+    }
+
+    if (!message.trim()) {
+      setLocalError('Please enter a message');
+      return;
+    }
+
+    setLocalError(null);
+    const success = await onSend(selectedAgent, message.trim());
+
+    if (success) {
+      onClose();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
+    }
+  };
+
+  const handleAgentSelect = useCallback((agentName: string) => {
+    setSelectedAgent(agentName);
+    setLocalError(null);
+    setTimeout(() => messageInputRef.current?.focus(), 50);
+  }, []);
+
+  if (!isOpen) return null;
+
+  const displayError = error || localError;
+  const selectedAgentData = agents.find((a) => a.name === selectedAgent);
+  const selectedColors = selectedAgentData ? getAgentColor(selectedAgentData.name) : null;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-[1000] animate-fade-in"
+      onClick={onClose}
+    >
+      <div
+        className="bg-bg-primary border border-border rounded-xl w-[520px] max-w-[90vw] max-h-[85vh] overflow-hidden shadow-modal animate-slide-up flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-5 border-b border-border shrink-0">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-lg bg-accent/10 flex items-center justify-center">
+              <MessageIcon />
+            </div>
+            <div>
+              <h2 className="m-0 text-lg font-semibold text-text-primary">New Conversation</h2>
+              <p className="m-0 text-xs text-text-muted">Start a direct message with an agent</p>
+            </div>
+          </div>
+          <button
+            className="flex items-center justify-center w-8 h-8 bg-transparent border-none rounded-md text-text-muted cursor-pointer transition-all duration-150 hover:bg-bg-hover hover:text-text-primary"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="flex flex-col flex-1 overflow-hidden">
+          {/* Agent Selection */}
+          <div className="p-5 border-b border-border">
+            <label className="block text-sm font-semibold text-text-primary mb-2">
+              To
+            </label>
+
+            {selectedAgent ? (
+              <div className="flex items-center gap-3 p-3 bg-bg-hover rounded-lg">
+                <div
+                  className="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center text-sm font-semibold"
+                  style={{ backgroundColor: selectedColors?.primary, color: selectedColors?.text }}
+                >
+                  {getAgentInitials(selectedAgent)}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="font-semibold text-text-primary">{selectedAgent}</div>
+                  {selectedAgentData?.role && (
+                    <div className="text-xs text-text-muted truncate">{selectedAgentData.role}</div>
+                  )}
+                </div>
+                <button
+                  type="button"
+                  className="flex items-center justify-center w-8 h-8 bg-bg-active border-none rounded-md text-text-muted cursor-pointer transition-all duration-150 hover:bg-bg-tertiary hover:text-text-primary"
+                  onClick={() => {
+                    setSelectedAgent('');
+                    setTimeout(() => searchInputRef.current?.focus(), 50);
+                  }}
+                  aria-label="Change agent"
+                >
+                  <ChangeIcon />
+                </button>
+              </div>
+            ) : (
+              <>
+                {/* Search Input */}
+                <div className="relative mb-3">
+                  <div className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted">
+                    <SearchIcon />
+                  </div>
+                  <input
+                    ref={searchInputRef}
+                    type="text"
+                    className="w-full py-2.5 pl-10 pr-3.5 border border-border rounded-md text-sm font-sans outline-none bg-transparent text-text-primary transition-colors duration-150 focus:border-accent placeholder:text-text-muted"
+                    placeholder="Search agents..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                  />
+                </div>
+
+                {/* Agent List */}
+                <div className="max-h-[200px] overflow-y-auto border border-border rounded-lg">
+                  {filteredAgents.length === 0 ? (
+                    <div className="p-4 text-center text-text-muted text-sm">
+                      {searchQuery ? 'No agents found' : 'No agents available'}
+                    </div>
+                  ) : (
+                    <div className="divide-y divide-border">
+                      {/* Broadcast option */}
+                      <button
+                        type="button"
+                        className="w-full flex items-center gap-3 p-3 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:bg-bg-hover text-left"
+                        onClick={() => handleAgentSelect('*')}
+                      >
+                        <div className="shrink-0 w-9 h-9 rounded-lg bg-warning/20 flex items-center justify-center">
+                          <BroadcastIcon />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div className="font-semibold text-text-primary">Everyone</div>
+                          <div className="text-xs text-text-muted">Broadcast to all agents</div>
+                        </div>
+                      </button>
+
+                      {/* Agent options */}
+                      {filteredAgents.map((agent) => {
+                        const colors = getAgentColor(agent.name);
+                        return (
+                          <button
+                            key={agent.name}
+                            type="button"
+                            className="w-full flex items-center gap-3 p-3 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:bg-bg-hover text-left"
+                            onClick={() => handleAgentSelect(agent.name)}
+                          >
+                            <div
+                              className="shrink-0 w-9 h-9 rounded-lg flex items-center justify-center text-xs font-semibold"
+                              style={{ backgroundColor: colors.primary, color: colors.text }}
+                            >
+                              {getAgentInitials(agent.name)}
+                            </div>
+                            <div className="flex-1 min-w-0">
+                              <div className="flex items-center gap-2">
+                                <span className="font-semibold text-text-primary">{agent.name}</span>
+                                <span
+                                  className={`w-2 h-2 rounded-full ${
+                                    agent.status === 'online' ? 'bg-success' : 'bg-text-muted'
+                                  }`}
+                                />
+                              </div>
+                              {(agent.role || agent.team) && (
+                                <div className="text-xs text-text-muted truncate">
+                                  {agent.role}
+                                  {agent.role && agent.team && ' - '}
+                                  {agent.team}
+                                </div>
+                              )}
+                            </div>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* Message Input */}
+          <div className="p-5 flex-1 overflow-hidden flex flex-col">
+            <label className="block text-sm font-semibold text-text-primary mb-2" htmlFor="message">
+              Message
+            </label>
+            <textarea
+              ref={messageInputRef}
+              id="message"
+              className="flex-1 min-h-[120px] w-full py-3 px-3.5 border border-border rounded-md text-sm font-sans outline-none bg-transparent text-text-primary transition-colors duration-150 focus:border-accent resize-none placeholder:text-text-muted"
+              placeholder={
+                selectedAgent === '*'
+                  ? 'Write a message to all agents...'
+                  : selectedAgent
+                  ? `Write a message to ${selectedAgent}...`
+                  : 'Select an agent first...'
+              }
+              value={message}
+              onChange={(e) => {
+                setMessage(e.target.value);
+                setLocalError(null);
+              }}
+              disabled={isSending || !selectedAgent}
+            />
+          </div>
+
+          {/* Error Display */}
+          {displayError && (
+            <div className="flex items-center gap-2 mx-5 mb-4 p-3 bg-error/10 border border-error/30 rounded-md text-error text-sm">
+              <ErrorIcon />
+              <span>{displayError}</span>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 p-5 pt-0 border-t border-border">
+            <button
+              type="button"
+              className="flex items-center gap-1.5 py-2.5 px-4 border-none rounded-md text-sm font-medium cursor-pointer font-sans transition-all duration-150 bg-bg-hover text-text-secondary hover:bg-bg-active hover:text-text-primary disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={onClose}
+              disabled={isSending}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="flex items-center gap-1.5 py-2.5 px-4 border-none rounded-md text-sm font-medium cursor-pointer font-sans transition-all duration-150 bg-accent text-white hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled={isSending || !selectedAgent || !message.trim()}
+            >
+              {isSending ? (
+                <>
+                  <Spinner />
+                  Sending...
+                </>
+              ) : (
+                <>
+                  <SendIcon />
+                  Send Message
+                </>
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+function MessageIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-accent">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+      <line x1="9" y1="10" x2="15" y2="10" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg width="20" height="20" 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>
+  );
+}
+
+function SearchIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+  );
+}
+
+function ChangeIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="1 4 1 10 7 10" />
+      <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
+    </svg>
+  );
+}
+
+function BroadcastIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-warning">
+      <circle cx="12" cy="12" r="2" />
+      <path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14" />
+    </svg>
+  );
+}
+
+function SendIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="22" y1="2" x2="11" y2="13" />
+      <polygon points="22 2 15 22 11 13 2 9 22 2" />
+    </svg>
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg className="shrink-0" 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="8" x2="12" y2="12" />
+      <line x1="12" y1="16" x2="12.01" y2="16" />
+    </svg>
+  );
+}
+
+function Spinner() {
+  return (
+    <svg className="animate-spin" width="16" height="16" viewBox="0 0 24 24">
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="2"
+        fill="none"
+        strokeDasharray="32"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}