agent-relay 1.6.0 → 2.0.4

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

@@ -0,0 +1,198 @@
+/**
+ * ThreadList Component
+ *
+ * Displays a list of active threads in the sidebar with unread indicators.
+ * Features a refined design with subtle glows and smooth transitions.
+ */
+
+import React from 'react';
+import type { ThreadInfo } from './hooks/useMessages';
+
+export interface ThreadListProps {
+  threads: ThreadInfo[];
+  currentThread?: string | null;
+  onThreadSelect: (threadId: string) => void;
+  /** Total unread count for the threads section header badge */
+  totalUnreadCount?: number;
+  /** Whether the threads section is collapsed */
+  isCollapsed?: boolean;
+  /** Callback to toggle the collapsed state */
+  onToggleCollapse?: () => void;
+}
+
+export function ThreadList({
+  threads,
+  currentThread,
+  onThreadSelect,
+  totalUnreadCount = 0,
+  isCollapsed = false,
+  onToggleCollapse,
+}: ThreadListProps) {
+  if (threads.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="px-2 py-2">
+      {/* Section Header */}
+      <button
+        className="w-full flex items-center justify-between px-2 py-2 mb-1.5 bg-transparent border-none cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(255,255,255,0.03)] hover:to-transparent"
+        onClick={onToggleCollapse}
+        aria-expanded={!isCollapsed}
+        aria-label={isCollapsed ? 'Expand threads' : 'Collapse threads'}
+      >
+        <div className="flex items-center gap-2">
+          <CollapseIcon isCollapsed={isCollapsed} />
+          <span className="text-xs font-semibold uppercase tracking-wider text-text-muted">
+            Threads
+          </span>
+          <span className="text-xs text-text-dim font-mono">({threads.length})</span>
+        </div>
+        {totalUnreadCount > 0 && (
+          <span
+            className="min-w-[18px] h-[18px] flex items-center justify-center text-[10px] font-bold bg-accent-cyan text-bg-deep rounded-full px-1.5"
+            style={{ boxShadow: '0 0 8px rgba(0, 217, 255, 0.5)' }}
+          >
+            {totalUnreadCount > 99 ? '99+' : totalUnreadCount}
+          </span>
+        )}
+      </button>
+
+      {/* Thread Items - only show when not collapsed */}
+      {!isCollapsed && (
+        <div className="space-y-1">
+          {threads.map((thread) => (
+            <ThreadItem
+              key={thread.id}
+              thread={thread}
+              isSelected={currentThread === thread.id}
+              onClick={() => onThreadSelect(thread.id)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ThreadItemProps {
+  thread: ThreadInfo;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+function ThreadItem({ thread, isSelected, onClick }: ThreadItemProps) {
+  const hasUnread = thread.unreadCount > 0;
+  const timestamp = formatRelativeTime(thread.lastMessage.timestamp);
+
+  return (
+    <button
+      className={`
+        group w-full flex items-center gap-3 px-2.5 py-2.5 rounded-lg text-left transition-all duration-200 cursor-pointer border-none
+        hover:bg-gradient-to-r hover:from-[rgba(255,255,255,0.03)] hover:to-transparent
+        ${isSelected
+          ? 'bg-gradient-to-r from-[rgba(255,255,255,0.06)] to-transparent'
+          : 'bg-transparent'
+        }
+      `}
+      onClick={onClick}
+      style={{
+        borderLeft: isSelected ? '2px solid #00d9ff' : '2px solid transparent',
+        boxShadow: isSelected ? 'inset 4px 0 12px -4px rgba(0, 217, 255, 0.25)' : 'none',
+      }}
+    >
+      {/* Thread Icon */}
+      <div
+        className={`
+          relative shrink-0 w-8 h-8 rounded-lg flex items-center justify-center overflow-hidden transition-all duration-200
+          ${hasUnread ? 'text-accent-cyan' : 'text-text-muted'}
+        `}
+        style={{
+          background: hasUnread
+            ? 'linear-gradient(135deg, rgba(0, 217, 255, 0.2), rgba(0, 217, 255, 0.1))'
+            : 'rgba(255, 255, 255, 0.03)',
+          boxShadow: hasUnread ? '0 0 8px rgba(0, 217, 255, 0.2)' : 'none',
+        }}
+      >
+        {/* Subtle shine overlay */}
+        <div
+          className="absolute inset-0 opacity-20"
+          style={{
+            background: 'linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%)',
+          }}
+        />
+        <ThreadIcon />
+      </div>
+
+      {/* Thread Info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className={`
+            text-[13px] truncate transition-colors duration-200
+            ${hasUnread ? 'font-semibold text-text-primary' : 'text-text-secondary group-hover:text-text-primary'}
+          `}>
+            {thread.name}
+          </span>
+          {hasUnread && (
+            <span
+              className="shrink-0 min-w-[16px] h-[16px] flex items-center justify-center text-[9px] font-bold bg-accent-cyan text-bg-deep rounded-full px-1"
+              style={{ boxShadow: '0 0 6px rgba(0, 217, 255, 0.4)' }}
+            >
+              {thread.unreadCount > 99 ? '99+' : thread.unreadCount}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1.5 text-[11px] text-text-muted font-mono">
+          <span className="truncate">{thread.participants.slice(0, 2).join(', ')}</span>
+          {thread.participants.length > 2 && (
+            <span className="text-text-dim">+{thread.participants.length - 2}</span>
+          )}
+          <span className="text-text-dim opacity-50">·</span>
+          <span className="text-text-dim">{timestamp}</span>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+function formatRelativeTime(timestamp: string | number): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / (1000 * 60));
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffMins < 1) return 'now';
+  if (diffMins < 60) return `${diffMins}m`;
+  if (diffHours < 24) return `${diffHours}h`;
+  if (diffDays < 7) return `${diffDays}d`;
+
+  return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+}
+
+function ThreadIcon() {
+  return (
+    <svg width="14" height="14" 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 CollapseIcon({ isCollapsed }: { isCollapsed: boolean }) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={`text-text-muted transition-transform duration-200 ${isCollapsed ? '' : 'rotate-90'}`}
+    >
+      <polyline points="9 18 15 12 9 6" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,346 @@
+/**
+ * ThreadPanel Component
+ *
+ * Displays a thread view with the original message and all replies.
+ * Includes a reply composer for adding messages to the thread.
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import type { Message, Attachment } from '../types';
+import { getAgentColor, getAgentInitials } from '../lib/colors';
+import type { CurrentUser } from './MessageList';
+import { formatMessageBody } from './utils/messageFormatting';
+
+export interface ThreadPanelProps {
+  /** The original message that started the thread */
+  originalMessage: Message | null;
+  /** All replies in this thread */
+  replies: Message[];
+  /** Called when user wants to close the thread panel */
+  onClose: () => void;
+  /** Called when user sends a reply */
+  onReply: (content: string) => Promise<boolean>;
+  /** Whether a reply is currently being sent */
+  isSending?: boolean;
+  /** Current user info (for cloud mode - shows avatar/username instead of "Dashboard") */
+  currentUser?: CurrentUser;
+  /** Show timestamps for messages */
+  showTimestamps?: boolean;
+}
+
+export function ThreadPanel({
+  originalMessage,
+  replies,
+  onClose,
+  onReply,
+  isSending = false,
+  currentUser,
+  showTimestamps = true,
+}: ThreadPanelProps) {
+  const [replyContent, setReplyContent] = useState('');
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-scroll when new replies arrive
+  useEffect(() => {
+    // Use requestAnimationFrame to ensure DOM has been updated
+    requestAnimationFrame(() => {
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    });
+  }, [replies.length]);
+
+  // Focus input when panel opens
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [originalMessage?.id]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!replyContent.trim() || isSending) return;
+
+    const success = await onReply(replyContent.trim());
+    if (success) {
+      setReplyContent('');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  if (!originalMessage) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-bg-primary border-l border-border">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-bg-secondary">
+        <div className="flex items-center gap-2">
+          <ThreadIcon />
+          <span className="font-semibold text-sm text-text-primary">Thread</span>
+          <span className="text-text-muted text-xs">
+            {replies.length} {replies.length === 1 ? 'reply' : 'replies'}
+          </span>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1.5 rounded hover:bg-bg-hover transition-colors text-text-muted hover:text-text-primary"
+          title="Close thread"
+        >
+          <CloseIcon />
+        </button>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto">
+        {/* Original Message */}
+        <div className="p-4 border-b border-border">
+          <ThreadMessage
+            message={originalMessage}
+            isOriginal
+            currentUser={currentUser}
+            showTimestamps={showTimestamps}
+          />
+        </div>
+
+        {/* Replies */}
+        <div className="p-4 space-y-3">
+          {replies.length === 0 ? (
+            <div className="text-center text-text-muted text-sm py-8">
+              No replies yet. Be the first to reply!
+            </div>
+          ) : (
+            replies.map((reply) => (
+              <ThreadMessage
+                key={reply.id}
+                message={reply}
+                currentUser={currentUser}
+                showTimestamps={showTimestamps}
+              />
+            ))
+          )}
+          <div ref={bottomRef} />
+        </div>
+      </div>
+
+      {/* Reply Composer */}
+      <div className="p-4 border-t border-border bg-bg-secondary">
+        <form onSubmit={handleSubmit} className="flex gap-2">
+          <textarea
+            ref={inputRef}
+            value={replyContent}
+            onChange={(e) => setReplyContent(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Reply to thread..."
+            disabled={isSending}
+            rows={1}
+            className="flex-1 py-2 px-3 bg-bg-primary border border-border rounded-md text-sm text-text-primary resize-none min-h-[40px] max-h-[100px] overflow-y-auto focus:outline-none focus:border-accent transition-colors placeholder:text-text-muted"
+          />
+          <button
+            type="submit"
+            disabled={!replyContent.trim() || isSending}
+            className="px-4 py-2 bg-accent text-white rounded-md text-sm font-medium transition-colors hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isSending ? 'Sending...' : 'Reply'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+interface ThreadMessageProps {
+  message: Message;
+  isOriginal?: boolean;
+  currentUser?: CurrentUser;
+  showTimestamps?: boolean;
+}
+
+function ThreadMessage({ message, isOriginal, currentUser, showTimestamps = true }: ThreadMessageProps) {
+  const colors = getAgentColor(message.from);
+  const timestamp = formatTimestamp(message.timestamp);
+
+  // Check if this message is from the current user (Dashboard or their GitHub username)
+  const isFromCurrentUser = message.from === 'Dashboard' ||
+    (currentUser && message.from === currentUser.displayName);
+
+  // Display name: use GitHub username if available, otherwise message.from
+  const displayName = isFromCurrentUser && currentUser
+    ? currentUser.displayName
+    : message.from;
+
+  return (
+    <div className={`flex gap-3 ${isOriginal ? '' : 'pl-2'}`}>
+      {/* Avatar/Icon */}
+      {isFromCurrentUser && currentUser?.avatarUrl ? (
+        <img
+          src={currentUser.avatarUrl}
+          alt={displayName}
+          className="shrink-0 w-8 h-8 rounded-lg object-cover"
+        />
+      ) : (
+        <div
+          className="shrink-0 w-8 h-8 rounded-lg flex items-center justify-center font-semibold text-xs"
+          style={{ backgroundColor: colors.primary, color: colors.text }}
+        >
+          {getAgentInitials(message.from)}
+        </div>
+      )}
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1">
+          <span className="font-semibold text-sm text-text-primary">{displayName}</span>
+          {message.to !== '*' && !isOriginal && (
+            <>
+              <span className="text-text-muted text-xs">→</span>
+              <span className="text-sm text-accent">{message.to}</span>
+            </>
+          )}
+          {showTimestamps && (
+            <span className="text-text-muted text-xs">{timestamp}</span>
+          )}
+          {isOriginal && (
+            <span className="text-[10px] py-0.5 px-1.5 rounded bg-accent-light text-accent font-medium">
+              Original
+            </span>
+          )}
+        </div>
+
+        <div className="text-sm leading-relaxed text-text-primary whitespace-pre-wrap break-words">
+          {formatMessageBody(message.content)}
+        </div>
+
+        {/* Attachments */}
+        {message.attachments && message.attachments.length > 0 && (
+          <ThreadAttachments attachments={message.attachments} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Thread Attachments Component
+ * Displays image attachments with lightbox functionality
+ */
+interface ThreadAttachmentsProps {
+  attachments: Attachment[];
+}
+
+function ThreadAttachments({ attachments }: ThreadAttachmentsProps) {
+  const [lightboxImage, setLightboxImage] = useState<Attachment | null>(null);
+
+  const imageAttachments = attachments.filter(a =>
+    a.mimeType.startsWith('image/')
+  );
+
+  if (imageAttachments.length === 0) return null;
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-2 mt-2">
+        {imageAttachments.map((attachment) => (
+          <button
+            key={attachment.id}
+            type="button"
+            onClick={() => setLightboxImage(attachment)}
+            className="relative group cursor-pointer bg-transparent border-0 p-0"
+            title={`View ${attachment.filename}`}
+          >
+            <img
+              src={attachment.data || attachment.url}
+              alt={attachment.filename}
+              className="max-h-32 max-w-[200px] rounded-lg border border-border object-cover transition-all duration-150 group-hover:border-accent/50 group-hover:shadow-md"
+              loading="lazy"
+            />
+            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 rounded-lg transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="white"
+                strokeWidth="2"
+                className="drop-shadow-lg"
+              >
+                <circle cx="11" cy="11" r="8" />
+                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                <line x1="11" y1="8" x2="11" y2="14" />
+                <line x1="8" y1="11" x2="14" y2="11" />
+              </svg>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* Lightbox Modal */}
+      {lightboxImage && (
+        <div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-sm"
+          onClick={() => setLightboxImage(null)}
+        >
+          <div className="relative max-w-[90vw] max-h-[90vh]">
+            <img
+              src={lightboxImage.data || lightboxImage.url}
+              alt={lightboxImage.filename}
+              className="max-w-full max-h-[90vh] rounded-lg shadow-2xl"
+              onClick={(e) => e.stopPropagation()}
+            />
+            <button
+              type="button"
+              onClick={() => setLightboxImage(null)}
+              className="absolute -top-3 -right-3 w-8 h-8 bg-bg-primary border border-border rounded-full flex items-center justify-center text-text-muted hover:text-text-primary hover:bg-bg-secondary transition-colors shadow-lg"
+              title="Close"
+            >
+              <svg width="16" height="16" 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>
+            </button>
+            <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/60 to-transparent rounded-b-lg">
+              <p className="text-white text-sm truncate">{lightboxImage.filename}</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+function formatTimestamp(timestamp: string | number): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const isToday = date.toDateString() === now.toDateString();
+
+  if (isToday) {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+
+  return date.toLocaleDateString([], {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function ThreadIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-text-primary">
+      <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="16" height="16" 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>
+  );
+}