@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/components/DirectMessageView.tsx

@@ -0,0 +1,164 @@
+/**
+ * DirectMessageView Component
+ *
+ * Handles direct message conversations with humans and optional agent participants.
+ * Manages agent invitations, message deduplication, and group DM functionality.
+ */
+
+import React, { useMemo, useCallback } from 'react';
+import type { Agent, Message } from '../types';
+
+export interface DirectMessageViewProps {
+  /** The human user being DM'd */
+  currentHuman: { name: string; isHuman: boolean } | null;
+  /** All messages */
+  messages: Message[];
+  /** All agents */
+  agents: Agent[];
+  /** Currently selected agents for this DM */
+  selectedAgents: string[];
+  /** Agents removed from this DM */
+  removedAgents: string[];
+  /** Callback to toggle agent participation */
+  onAgentToggle: (agentName: string) => void;
+  /** Children to render (message list, composer, etc.) */
+  children: (props: {
+    visibleMessages: Message[];
+    participantAgents: string[];
+  }) => React.ReactNode;
+}
+
+export function DirectMessageView({
+  currentHuman,
+  messages,
+  agents,
+  selectedAgents,
+  removedAgents,
+  onAgentToggle,
+  children,
+}: DirectMessageViewProps) {
+  const agentNameSet = useMemo(() => new Set(agents.map((a) => a.name)), [agents]);
+
+  // Derive agents participating in this conversation from message history
+  const dmParticipantAgents = useMemo(() => {
+    if (!currentHuman) return [];
+    const humanName = currentHuman.name;
+    const derived = new Set<string>();
+
+    for (const msg of messages) {
+      const { from, to } = msg;
+      if (!from || !to) continue;
+      if (from === humanName && agentNameSet.has(to)) derived.add(to);
+      if (to === humanName && agentNameSet.has(from)) derived.add(from);
+      if (selectedAgents.includes(from) && agentNameSet.has(to)) derived.add(to);
+      if (selectedAgents.includes(to) && agentNameSet.has(from)) derived.add(from);
+    }
+
+    const participants = new Set<string>([...selectedAgents, ...derived]);
+    removedAgents.forEach((a) => participants.delete(a));
+    return Array.from(participants);
+  }, [agentNameSet, currentHuman, messages, removedAgents, selectedAgents]);
+
+  // Filter messages for this DM conversation
+  const visibleMessages = useMemo(() => {
+    if (!currentHuman) return messages;
+    const participants = new Set<string>([currentHuman.name, ...dmParticipantAgents]);
+    return messages.filter(
+      (msg) => msg.from && msg.to && participants.has(msg.from) && participants.has(msg.to)
+    );
+  }, [currentHuman, dmParticipantAgents, messages]);
+
+  // Deduplicate DM messages (merge duplicates sent to multiple participants)
+  const dedupedVisibleMessages = useMemo(() => {
+    if (!currentHuman) return visibleMessages;
+
+    const normalizeBody = (content?: string) => (content ?? '').trim().replace(/\s+/g, ' ');
+    const rank = (msg: Message) => (msg.status === 'sending' ? 1 : 0);
+    const choose = (current: Message, incoming: Message) => {
+      const currentRank = rank(current);
+      const incomingRank = rank(incoming);
+      const currentTs = new Date(current.timestamp).getTime();
+      const incomingTs = new Date(incoming.timestamp).getTime();
+      if (incomingRank < currentRank) return incoming;
+      if (incomingRank > currentRank) return current;
+      return incomingTs >= currentTs ? incoming : current;
+    };
+
+    const sorted = [...visibleMessages].sort(
+      (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+    );
+
+    const byId = new Map<string, Message>();
+    const byFuzzy = new Map<string, Message>();
+
+    for (const msg of sorted) {
+      if (msg.id) {
+        const existing = byId.get(msg.id);
+        byId.set(msg.id, existing ? choose(existing, msg) : msg);
+        continue;
+      }
+
+      const sender = msg.from?.toLowerCase() ?? '';
+      const bucket = Math.floor(new Date(msg.timestamp).getTime() / 5000);
+      const key = `${sender}|${bucket}|${normalizeBody(msg.content)}`;
+      const existing = byFuzzy.get(key);
+      byFuzzy.set(key, existing ? choose(existing, msg) : msg);
+    }
+
+    const merged = [...byId.values(), ...byFuzzy.values()];
+
+    // Final pass: deduplicate by sender + recipient + content (no time bucket)
+    const finalDedup = new Map<string, Message>();
+    for (const msg of merged) {
+      const sender = msg.from?.toLowerCase() ?? '';
+      const recipient = msg.to?.toLowerCase() ?? '';
+      const key = `${sender}|${recipient}|${normalizeBody(msg.content)}`;
+      const existing = finalDedup.get(key);
+      finalDedup.set(key, existing ? choose(existing, msg) : msg);
+    }
+
+    return Array.from(finalDedup.values()).sort(
+      (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+    );
+  }, [currentHuman, visibleMessages]);
+
+  if (!currentHuman) return null;
+
+  return (
+    <>
+      {/* DM Header with Agent Invites */}
+      <div className="px-4 py-2 border-b border-border-subtle bg-bg-secondary flex flex-col gap-2 sticky top-0 z-10">
+        <div className="text-xs text-text-muted">
+          DM with <span className="font-semibold text-text-primary">{currentHuman.name}</span>. Invite agents:
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {agents
+            .filter((a) => !a.isHuman)
+            .map((agent) => {
+              const isSelected = selectedAgents.includes(agent.name);
+              return (
+                <button
+                  key={agent.name}
+                  onClick={() => onAgentToggle(agent.name)}
+                  className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
+                    isSelected
+                      ? 'bg-accent-cyan text-bg-deep'
+                      : 'bg-bg-tertiary text-text-secondary hover:bg-bg-tertiary/80'
+                  }`}
+                  title={agent.name}
+                >
+                  {isSelected ? '✓ ' : ''}{agent.name}
+                </button>
+              );
+            })}
+        </div>
+      </div>
+
+      {/* Render children with deduped messages */}
+      {children({
+        visibleMessages: dedupedVisibleMessages,
+        participantAgents: dmParticipantAgents,
+      })}
+    </>
+  );
+}

package/src/components/FileAutocomplete.tsx

@@ -0,0 +1,368 @@
+/**
+ * FileAutocomplete Component
+ *
+ * Provides @-file autocomplete for the message composer.
+ * Shows a dropdown list of files when typing @ followed by a path pattern.
+ * Triggered by @path/to/file or @filename patterns containing / or .
+ */
+
+import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { getApiUrl } from '../lib/api';
+
+export interface FileAutocompleteProps {
+  /** Current input value */
+  inputValue: string;
+  /** Cursor position in input */
+  cursorPosition: number;
+  /** Called when a file is selected */
+  onSelect: (filePath: string, newValue: string) => void;
+  /** Called when autocomplete should be hidden */
+  onClose: () => void;
+  /** Whether the autocomplete is visible */
+  isVisible: boolean;
+  /** API base URL for fetching files */
+  apiBase?: string;
+}
+
+interface FileOption {
+  path: string;
+  name: string;
+  isDirectory: boolean;
+}
+
+/**
+ * Check if the input has an @-file path being typed at the cursor position.
+ * Returns the query if it looks like a file path.
+ * Works for @ at any position in the text, not just the start.
+ *
+ * Trigger conditions (to avoid conflict with agent mentions):
+ * - Contains `/` (path separator) - e.g., @src/components
+ * - Contains `.` with more characters after (file extension) - e.g., @package.json
+ * - Starts with `./` or `../` (relative path) - e.g., @./src
+ *
+ * Does NOT trigger for:
+ * - Simple names like @Alice (could be an agent name)
+ * - Names with trailing dot like @config. (user still typing)
+ */
+export function getFileQuery(value: string, cursorPos: number): string | null {
+  // Search backwards from cursor to find @
+  const textBeforeCursor = value.substring(0, cursorPos);
+
+  // Find the last @ before cursor that starts a mention
+  // A mention starts after whitespace, at start of string, or after certain punctuation
+  const mentionMatch = textBeforeCursor.match(/(?:^|[\s(])@(\S*)$/);
+  if (mentionMatch) {
+    const query = mentionMatch[1];
+
+    // Trigger file autocomplete only for unambiguous file patterns:
+    // 1. Contains path separator: @src/components, @./file
+    if (query.includes('/')) {
+      return query;
+    }
+
+    // 2. Has file extension (dot followed by 1-10 chars): @file.ts, @package.json
+    // But not just a trailing dot (user still typing)
+    if (/\.[a-zA-Z0-9]{1,10}$/.test(query)) {
+      return query;
+    }
+  }
+  return null;
+}
+
+/**
+ * Complete a file path in the input value at the cursor position.
+ */
+export function completeFileInValue(
+  value: string,
+  filePath: string,
+  cursorPos: number
+): string {
+  const textBeforeCursor = value.substring(0, cursorPos);
+  const textAfterCursor = value.substring(cursorPos);
+
+  // Find the @ and partial text before cursor
+  const mentionMatch = textBeforeCursor.match(/(?:^|[\s(])@(\S*)$/);
+  if (mentionMatch) {
+    // Calculate where the @ starts (accounting for whitespace/punctuation before it)
+    const matchStart = mentionMatch.index || 0;
+    const prefixChar = mentionMatch[0].charAt(0);
+    const atStart = prefixChar === '@' ? matchStart : matchStart + 1;
+
+    // Build the new value
+    const beforeMention = value.substring(0, atStart);
+    const completedFile = `@${filePath} `;
+    return beforeMention + completedFile + textAfterCursor;
+  }
+  return value;
+}
+
+// Cache for file search results
+const fileCache = new Map<string, { files: FileOption[]; timestamp: number }>();
+const CACHE_TTL_MS = 30000; // 30 seconds cache
+
+export function FileAutocomplete({
+  inputValue,
+  cursorPosition,
+  onSelect,
+  onClose,
+  isVisible,
+  apiBase = '',
+}: FileAutocompleteProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [files, setFiles] = useState<FileOption[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Get the current file query
+  const query = useMemo(
+    () => getFileQuery(inputValue, cursorPosition),
+    [inputValue, cursorPosition]
+  );
+
+  // Fetch files when query changes
+  useEffect(() => {
+    if (!isVisible || query === null) {
+      setFiles([]);
+      return;
+    }
+
+    // Check cache first
+    const cacheKey = query || '__root__';
+    const cached = fileCache.get(cacheKey);
+    if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
+      setFiles(cached.files);
+      setError(null);
+      return;
+    }
+
+    // Cancel previous request
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+
+    const fetchFiles = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const searchQuery = query || '';
+        // Use getApiUrl for cloud mode support (routes through workspace proxy)
+        const url = apiBase
+          ? `${apiBase}/api/files?q=${encodeURIComponent(searchQuery)}&limit=15`
+          : getApiUrl(`/api/files?q=${encodeURIComponent(searchQuery)}&limit=15`);
+        const response = await fetch(url, { signal: controller.signal });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch files');
+        }
+
+        const data = await response.json();
+        const fileList: FileOption[] = (data.files || []).map((f: { path: string; name: string; isDirectory?: boolean }) => ({
+          path: f.path,
+          name: f.name,
+          isDirectory: f.isDirectory || false,
+        }));
+
+        // Update cache
+        fileCache.set(cacheKey, { files: fileList, timestamp: Date.now() });
+        setFiles(fileList);
+      } catch (err: unknown) {
+        if (err instanceof Error && err.name === 'AbortError') return;
+        setError('Failed to load files');
+        setFiles([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    // Debounce the search
+    const timeoutId = setTimeout(fetchFiles, 150);
+    return () => {
+      clearTimeout(timeoutId);
+      controller.abort();
+    };
+  }, [isVisible, query, apiBase]);
+
+  // Reset selection when files change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [files.length]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (!listRef.current) return;
+    const selected = listRef.current.querySelector('[data-selected="true"]');
+    if (selected) {
+      selected.scrollIntoView({ block: 'nearest' });
+    }
+  }, [selectedIndex]);
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!isVisible || files.length === 0) return;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setSelectedIndex((prev) => (prev + 1) % files.length);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setSelectedIndex((prev) => (prev - 1 + files.length) % files.length);
+          break;
+        case 'Enter':
+        case 'Tab':
+          e.preventDefault();
+          const selected = files[selectedIndex];
+          if (selected) {
+            const newValue = completeFileInValue(inputValue, selected.path, cursorPosition);
+            onSelect(selected.path, newValue);
+          }
+          break;
+        case 'Escape':
+          e.preventDefault();
+          onClose();
+          break;
+      }
+    },
+    [isVisible, files, selectedIndex, inputValue, cursorPosition, onSelect, onClose]
+  );
+
+  // Register keyboard listener
+  useEffect(() => {
+    if (isVisible) {
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [isVisible, handleKeyDown]);
+
+  // Handle click on option
+  const handleClick = useCallback(
+    (file: FileOption) => {
+      const newValue = completeFileInValue(inputValue, file.path, cursorPosition);
+      onSelect(file.path, newValue);
+    },
+    [inputValue, cursorPosition, onSelect]
+  );
+
+  if (!isVisible || (files.length === 0 && !isLoading && !error)) {
+    return null;
+  }
+
+  return (
+    <div
+      className="absolute bottom-full left-0 right-0 max-h-[240px] overflow-y-auto bg-bg-card border border-border rounded-lg shadow-modal z-[100] mb-1"
+      ref={listRef}
+    >
+      {/* Header */}
+      <div className="px-3 py-1.5 text-[10px] uppercase tracking-wider text-text-muted border-b border-border-subtle flex items-center gap-2">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+          <polyline points="13 2 13 9 20 9" />
+        </svg>
+        Files {query && <span className="text-text-dim">matching "{query}"</span>}
+      </div>
+
+      {/* Loading state */}
+      {isLoading && files.length === 0 && (
+        <div className="px-3 py-4 text-sm text-text-muted text-center">
+          <svg className="animate-spin mx-auto mb-2" 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>
+          Searching files...
+        </div>
+      )}
+
+      {/* Error state */}
+      {error && (
+        <div className="px-3 py-4 text-sm text-red-400 text-center">
+          {error}
+        </div>
+      )}
+
+      {/* File list */}
+      {files.map((file, index) => (
+        <div
+          key={file.path}
+          data-selected={index === selectedIndex}
+          className={`flex items-center gap-2.5 py-2 px-3 cursor-pointer transition-colors duration-150 ${
+            index === selectedIndex ? 'bg-bg-hover' : 'hover:bg-bg-hover'
+          }`}
+          onClick={() => handleClick(file)}
+          onMouseEnter={() => setSelectedIndex(index)}
+        >
+          {/* File/Folder icon */}
+          <div
+            className="w-7 h-7 rounded-md flex items-center justify-center text-text-muted"
+            style={{ background: file.isDirectory ? 'rgba(251, 191, 36, 0.15)' : 'rgba(96, 165, 250, 0.15)' }}
+          >
+            {file.isDirectory ? (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" strokeWidth="2">
+                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+              </svg>
+            ) : (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" strokeWidth="2">
+                <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+                <polyline points="13 2 13 9 20 9" />
+              </svg>
+            )}
+          </div>
+          <div className="flex flex-col gap-0.5 min-w-0 flex-1">
+            <span className="text-sm font-medium text-text-primary truncate">{file.name}</span>
+            <span className="text-xs text-text-dim truncate">{file.path}</span>
+          </div>
+        </div>
+      ))}
+
+      {/* Empty state (no results after search) */}
+      {!isLoading && !error && files.length === 0 && query && (
+        <div className="px-3 py-4 text-sm text-text-muted text-center">
+          No files found matching "{query}"
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Hook to manage file autocomplete state
+ */
+export function useFileAutocomplete() {
+  const [isVisible, setIsVisible] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [cursorPosition, setCursorPosition] = useState(0);
+
+  const handleInputChange = useCallback((value: string, cursorPos: number) => {
+    setInputValue(value);
+    setCursorPosition(cursorPos);
+
+    // Show autocomplete if typing @file pattern
+    const query = getFileQuery(value, cursorPos);
+    setIsVisible(query !== null);
+  }, []);
+
+  const handleSelect = useCallback((filePath: string, newValue: string) => {
+    setInputValue(newValue);
+    setCursorPosition(newValue.indexOf(' ') + 1);
+    setIsVisible(false);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  return {
+    isVisible,
+    inputValue,
+    cursorPosition,
+    setInputValue: handleInputChange,
+    handleSelect,
+    handleClose,
+  };
+}