agent-relay 2.0.22 → 2.0.24

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

@@ -1,385 +0,0 @@
-/**
- * ChannelBrowser Component
- *
- * A modal for browsing, searching, and joining public channels.
- * Includes search with debouncing and pagination.
- */
-
-import React, { useState, useCallback, useEffect, useRef } from 'react';
-import { useChannelBrowser, type BrowseChannel } from './hooks/useChannelBrowser';
-import { Pagination } from './Pagination';
-
-export interface ChannelBrowserProps {
-  /** Workspace ID for API calls */
-  workspaceId: string;
-  isOpen: boolean;
-  onClose: () => void;
-  onChannelJoined?: (channel: BrowseChannel) => void;
-  currentUserId?: string;
-}
-
-export function ChannelBrowser({
-  workspaceId,
-  isOpen,
-  onClose,
-  onChannelJoined,
-}: ChannelBrowserProps) {
-  const {
-    channels,
-    isLoading,
-    error,
-    searchQuery,
-    setSearchQuery,
-    currentPage,
-    totalPages,
-    totalCount,
-    goToPage,
-    joinChannel,
-    leaveChannel,
-    refresh,
-  } = useChannelBrowser({ workspaceId, autoFetch: isOpen });
-
-  const [joiningChannelId, setJoiningChannelId] = useState<string | null>(null);
-  const [leavingChannelId, setLeavingChannelId] = useState<string | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Focus search input when modal opens
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
-  // Handle escape key
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, onClose]);
-
-  // Handle join channel
-  const handleJoin = useCallback(async (channel: BrowseChannel) => {
-    setJoiningChannelId(channel.id);
-    try {
-      await joinChannel(channel.id);
-      onChannelJoined?.({ ...channel, isJoined: true });
-    } catch (err) {
-      console.error('Failed to join channel:', err);
-    } finally {
-      setJoiningChannelId(null);
-    }
-  }, [joinChannel, onChannelJoined]);
-
-  // Handle leave channel
-  const handleLeave = useCallback(async (channel: BrowseChannel) => {
-    setLeavingChannelId(channel.id);
-    try {
-      await leaveChannel(channel.id);
-    } catch (err) {
-      console.error('Failed to leave channel:', err);
-    } finally {
-      setLeavingChannelId(null);
-    }
-  }, [leaveChannel]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div
-      className="fixed inset-0 bg-black/60 flex items-start justify-center pt-[10vh] z-[1000] animate-fade-in"
-      onClick={onClose}
-    >
-      <div
-        className="bg-sidebar-bg border border-sidebar-border rounded-xl w-[600px] max-w-[90vw] max-h-[75vh] flex flex-col shadow-modal animate-slide-down"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-sidebar-border">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-accent-cyan/20 to-blue-500/20 flex items-center justify-center border border-accent-cyan/30">
-              <HashIcon />
-            </div>
-            <div>
-              <h2 className="text-lg font-semibold text-text-primary m-0">
-                Browse Channels
-              </h2>
-              <p className="text-xs text-text-muted m-0">
-                {totalCount} channel{totalCount !== 1 ? 's' : ''} available
-              </p>
-            </div>
-          </div>
-          <button
-            onClick={onClose}
-            className="w-8 h-8 rounded-lg flex items-center justify-center text-text-muted hover:text-text-primary hover:bg-sidebar-border transition-colors"
-            title="Close (Esc)"
-          >
-            <CloseIcon />
-          </button>
-        </div>
-
-        {/* Search */}
-        <div className="p-4 border-b border-sidebar-border">
-          <div className="relative">
-            <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" />
-            <input
-              ref={inputRef}
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search channels..."
-              className="w-full pl-10 pr-4 py-2.5 bg-bg-tertiary border border-sidebar-border rounded-lg text-sm text-text-primary placeholder:text-text-muted outline-none focus:border-accent-cyan/50 transition-colors"
-            />
-            {searchQuery && (
-              <button
-                onClick={() => setSearchQuery('')}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary"
-                title="Clear search"
-              >
-                <CloseIcon className="w-4 h-4" />
-              </button>
-            )}
-          </div>
-        </div>
-
-        {/* Channel List */}
-        <div className="flex-1 overflow-y-auto p-2">
-          {isLoading && channels.length === 0 ? (
-            <div className="py-12 text-center">
-              <LoadingSpinner />
-              <p className="text-sm text-text-muted mt-2">Loading channels...</p>
-            </div>
-          ) : error ? (
-            <div className="py-12 text-center">
-              <ErrorIcon />
-              <p className="text-sm text-error mt-2">{error}</p>
-              <button
-                onClick={refresh}
-                className="mt-3 px-4 py-2 text-sm text-accent-cyan hover:underline"
-              >
-                Try again
-              </button>
-            </div>
-          ) : channels.length === 0 ? (
-            <div className="py-12 text-center">
-              <EmptyIcon />
-              <p className="text-sm text-text-muted mt-2">
-                {searchQuery
-                  ? `No channels matching "${searchQuery}"`
-                  : 'No channels available'}
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-1">
-              {channels.map((channel) => (
-                <ChannelCard
-                  key={channel.id}
-                  channel={channel}
-                  isJoining={joiningChannelId === channel.id}
-                  isLeaving={leavingChannelId === channel.id}
-                  onJoin={() => handleJoin(channel)}
-                  onLeave={() => handleLeave(channel)}
-                />
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Pagination */}
-        {totalPages > 1 && (
-          <div className="p-4 border-t border-sidebar-border">
-            <Pagination
-              currentPage={currentPage}
-              totalPages={totalPages}
-              onPageChange={goToPage}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-interface ChannelCardProps {
-  channel: BrowseChannel;
-  isJoining: boolean;
-  isLeaving: boolean;
-  onJoin: () => void;
-  onLeave: () => void;
-}
-
-function ChannelCard({ channel, isJoining, isLeaving, onJoin, onLeave }: ChannelCardProps) {
-  const isProcessing = isJoining || isLeaving;
-
-  return (
-    <div className="flex items-center gap-3 p-3 rounded-lg hover:bg-sidebar-border/50 transition-colors">
-      {/* Channel icon */}
-      <div className={`
-        w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0
-        ${channel.isPrivate
-          ? 'bg-warning/10 text-warning border border-warning/20'
-          : 'bg-accent-cyan/10 text-accent-cyan border border-accent-cyan/20'
-        }
-      `}>
-        {channel.isPrivate ? <LockIcon /> : <HashIcon />}
-      </div>
-
-      {/* Channel info */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-text-primary truncate">
-            #{channel.name}
-          </span>
-          {channel.isPrivate && (
-            <span className="px-1.5 py-0.5 text-[10px] font-medium bg-warning/20 text-warning rounded">
-              Private
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-3 mt-0.5">
-          {channel.description && (
-            <span className="text-xs text-text-muted truncate flex-1">
-              {channel.description}
-            </span>
-          )}
-          <span className="text-xs text-text-muted flex-shrink-0">
-            {channel.memberCount} member{channel.memberCount !== 1 ? 's' : ''}
-          </span>
-        </div>
-      </div>
-
-      {/* Action button */}
-      {channel.isJoined ? (
-        <button
-          onClick={onLeave}
-          disabled={isProcessing}
-          className="px-3 py-1.5 text-xs font-medium text-text-muted border border-sidebar-border rounded-md hover:text-error hover:border-error/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-        >
-          {isLeaving ? (
-            <span className="flex items-center gap-1">
-              <MiniSpinner />
-              Leaving...
-            </span>
-          ) : (
-            'Leave'
-          )}
-        </button>
-      ) : (
-        <button
-          onClick={onJoin}
-          disabled={isProcessing}
-          className="px-3 py-1.5 text-xs font-medium bg-accent-cyan text-bg-deep rounded-md hover:bg-accent-cyan/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-        >
-          {isJoining ? (
-            <span className="flex items-center gap-1">
-              <MiniSpinner />
-              Joining...
-            </span>
-          ) : (
-            'Join'
-          )}
-        </button>
-      )}
-    </div>
-  );
-}
-
-// Icons
-function HashIcon({ className = '' }: { className?: string }) {
-  return (
-    <svg className={className} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <line x1="4" y1="9" x2="20" y2="9" />
-      <line x1="4" y1="15" x2="20" y2="15" />
-      <line x1="10" y1="3" x2="8" y2="21" />
-      <line x1="16" y1="3" x2="14" y2="21" />
-    </svg>
-  );
-}
-
-function SearchIcon({ className = '' }: { className?: string }) {
-  return (
-    <svg className={className} 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 CloseIcon({ className = '' }: { className?: string }) {
-  return (
-    <svg className={className} width="18" height="18" 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 LockIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-    </svg>
-  );
-}
-
-function LoadingSpinner() {
-  return (
-    <svg className="animate-spin mx-auto text-accent-cyan" width="24" height="24" viewBox="0 0 24 24">
-      <circle
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="2"
-        fill="none"
-        strokeDasharray="32"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-function MiniSpinner() {
-  return (
-    <svg className="animate-spin" width="12" height="12" viewBox="0 0 24 24">
-      <circle
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="2"
-        fill="none"
-        strokeDasharray="32"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-function ErrorIcon() {
-  return (
-    <svg className="mx-auto text-error" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <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 EmptyIcon() {
-  return (
-    <svg className="mx-auto text-text-muted" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <circle cx="12" cy="12" r="10" />
-      <line x1="8" y1="15" x2="16" y2="15" strokeLinecap="round" />
-      <circle cx="9" cy="9" r="1" fill="currentColor" stroke="none" />
-      <circle cx="15" cy="9" r="1" fill="currentColor" stroke="none" />
-    </svg>
-  );
-}

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

@@ -1,261 +0,0 @@
-/**
- * ChannelChat Component
- *
- * Chat view for a channel or DM conversation.
- * Displays messages and provides input for sending new messages.
- * Uses shared MessageComposer for consistent attachment/paste support.
- */
-
-import React, { useCallback, useRef, useEffect } from 'react';
-import type { ChannelMessage } from './hooks/useChannels';
-import type { Agent } from '../types';
-import type { UserPresence } from './hooks/usePresence';
-import { MessageSenderName } from './MessageSenderName';
-import { MessageComposer } from './MessageComposer';
-import type { HumanUser } from './MentionAutocomplete';
-
-export interface ChannelChatProps {
-  /** Current channel name */
-  channel: string;
-  /** Messages in this channel */
-  messages: ChannelMessage[];
-  /** Current user's username */
-  currentUser: string;
-  /** Send a message (now supports attachments) */
-  onSendMessage: (body: string, thread?: string, attachmentIds?: string[]) => void;
-  /** Online users for mentions */
-  onlineUsers?: string[];
-  /** Agents list for profile lookup */
-  agents?: Agent[];
-  /** Online user presence list for profile lookup */
-  onlineUserPresence?: UserPresence[];
-  /** Callback when agent name is clicked */
-  onAgentClick?: (agent: Agent) => void;
-  /** Callback when user name is clicked */
-  onUserClick?: (user: UserPresence) => void;
-  /** Whether message sending is in progress */
-  isSending?: boolean;
-}
-
-export function ChannelChat({
-  channel,
-  messages,
-  currentUser,
-  onSendMessage,
-  onlineUsers = [],
-  agents = [],
-  onlineUserPresence = [],
-  onAgentClick,
-  onUserClick,
-  isSending = false,
-}: ChannelChatProps) {
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  // Filter messages for this channel
-  const channelMessages = messages.filter(m => {
-    if (m.type === 'channel_message') {
-      return m.channel === channel;
-    }
-    // For DMs, check if this is the right conversation
-    if (m.type === 'direct_message' && channel.startsWith('dm:')) {
-      const participants = channel.split(':').slice(1);
-      return participants.includes(m.from) || participants.includes(m.to || '');
-    }
-    return false;
-  });
-
-  // Scroll to bottom on new messages
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [channelMessages.length]);
-
-  // Handle message send with attachments
-  const handleSend = useCallback(async (content: string, attachmentIds?: string[]): Promise<boolean> => {
-    if (!content.trim() && (!attachmentIds || attachmentIds.length === 0)) return false;
-    onSendMessage(content, undefined, attachmentIds);
-    return true;
-  }, [onSendMessage]);
-
-  const isDm = channel.startsWith('dm:');
-  const channelDisplay = isDm
-    ? channel.split(':').slice(1).filter(u => u !== currentUser).join(', ')
-    : channel;
-
-  // Convert online user presence to HumanUser format for mentions
-  const humanUsers: HumanUser[] = onlineUserPresence.map(u => ({
-    username: u.username,
-    avatarUrl: u.avatarUrl,
-  }));
-
-  return (
-    <div style={{
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      backgroundColor: 'var(--bg-primary, #11111b)',
-    }}>
-      {/* Header */}
-      <div style={{
-        padding: '16px 20px',
-        borderBottom: '1px solid var(--border-color, #313244)',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-      }}>
-        <span style={{
-          fontSize: '16px',
-          fontWeight: 600,
-          color: 'var(--text-primary, #cdd6f4)',
-        }}>
-          {isDm ? '@' : ''}{channelDisplay}
-        </span>
-        {!isDm && (
-          <span style={{
-            fontSize: '13px',
-            color: 'var(--text-muted, #6c7086)',
-          }}>
-            Channel
-          </span>
-        )}
-      </div>
-
-      {/* Messages */}
-      <div style={{
-        flex: 1,
-        overflow: 'auto',
-        padding: '16px 20px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-      }}>
-        {channelMessages.length === 0 ? (
-          <div style={{
-            textAlign: 'center',
-            color: 'var(--text-muted, #6c7086)',
-            padding: '40px 20px',
-          }}>
-            <div style={{ fontSize: '32px', marginBottom: '12px' }}>
-              {isDm ? '👋' : '💬'}
-            </div>
-            <div style={{ fontSize: '16px', fontWeight: 500, marginBottom: '4px' }}>
-              {isDm
-                ? `Start a conversation with ${channelDisplay}`
-                : `Welcome to ${channel}`}
-            </div>
-            <div style={{ fontSize: '13px' }}>
-              {isDm
-                ? 'Send a message to get started'
-                : 'This is the beginning of the channel'}
-            </div>
-          </div>
-        ) : (
-          channelMessages.map((msg) => (
-            <MessageBubble
-              key={msg.id}
-              message={msg}
-              isOwn={msg.from === currentUser}
-              agents={agents}
-              onlineUserPresence={onlineUserPresence}
-              onAgentClick={onAgentClick}
-              onUserClick={onUserClick}
-            />
-          ))
-        )}
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input - Using shared MessageComposer for attachment support */}
-      <div style={{
-        padding: '16px 20px',
-        borderTop: '1px solid var(--border-color, #313244)',
-      }}>
-        <MessageComposer
-          onSend={handleSend}
-          isSending={isSending}
-          placeholder={`Message ${channelDisplay}...`}
-          agents={agents}
-          humanUsers={humanUsers}
-        />
-      </div>
-    </div>
-  );
-}
-
-interface MessageBubbleProps {
-  message: ChannelMessage;
-  isOwn: boolean;
-  agents?: Agent[];
-  onlineUserPresence?: UserPresence[];
-  onAgentClick?: (agent: Agent) => void;
-  onUserClick?: (user: UserPresence) => void;
-}
-
-function MessageBubble({
-  message,
-  isOwn,
-  agents = [],
-  onlineUserPresence = [],
-  onAgentClick,
-  onUserClick,
-}: MessageBubbleProps) {
-  const time = new Date(message.timestamp).toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-
-  // Look up agent or user for the sender
-  const senderAgent = agents.find(a => a.name.toLowerCase() === message.from.toLowerCase() && !a.isHuman);
-  const senderUser = onlineUserPresence.find(u => u.username.toLowerCase() === message.from.toLowerCase());
-
-  const nameColor = isOwn
-    ? 'var(--accent-color, #89b4fa)'
-    : 'var(--text-primary, #cdd6f4)';
-
-  return (
-    <div style={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: isOwn ? 'flex-end' : 'flex-start',
-    }}>
-      <div style={{
-        display: 'flex',
-        alignItems: 'baseline',
-        gap: '8px',
-        marginBottom: '4px',
-      }}>
-        <MessageSenderName
-          displayName={message.from}
-          color={nameColor}
-          isCurrentUser={isOwn}
-          agent={senderAgent}
-          userPresence={senderUser}
-          onAgentClick={onAgentClick}
-          onUserClick={onUserClick}
-        />
-        <span style={{
-          fontSize: '11px',
-          color: 'var(--text-muted, #6c7086)',
-        }}>
-          {time}
-        </span>
-      </div>
-      <div style={{
-        maxWidth: '70%',
-        padding: '10px 14px',
-        backgroundColor: isOwn
-          ? 'var(--accent-color, #89b4fa)'
-          : 'var(--bg-secondary, #1e1e2e)',
-        color: isOwn ? '#11111b' : 'var(--text-primary, #cdd6f4)',
-        borderRadius: isOwn ? '16px 16px 4px 16px' : '16px 16px 16px 4px',
-        fontSize: '14px',
-        lineHeight: '1.4',
-        wordBreak: 'break-word',
-        whiteSpace: 'pre-wrap',
-      }}>
-        {message.body}
-      </div>
-    </div>
-  );
-}
-
-export default ChannelChat;