agent-relay 2.0.21 → 2.0.23

package/packages/dashboard/ui/react-components/channels/MessageInput.tsx

@@ -1,288 +0,0 @@
-/**
- * MessageInput Component
- *
- * Rich text input for sending messages with:
- * - @-mention autocomplete
- * - Multi-line support (Shift+Enter)
- * - Typing indicator
- * - File attachment button (UI only)
- */
-
-import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import type { MessageInputProps } from './types';
-
-const TYPING_DEBOUNCE_MS = 1000;
-
-export function MessageInput({
-  channelId,
-  placeholder = 'Send a message...',
-  disabled = false,
-  onSend,
-  onTyping,
-  mentionSuggestions = [],
-}: MessageInputProps) {
-  const [value, setValue] = useState('');
-  const [showMentions, setShowMentions] = useState(false);
-  const [mentionQuery, setMentionQuery] = useState('');
-  const [selectedMentionIndex, setSelectedMentionIndex] = useState(0);
-  const [cursorPosition, setCursorPosition] = useState(0);
-
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const wasTypingRef = useRef(false);
-
-  // Filter mention suggestions based on query
-  const filteredMentions = useMemo(() => {
-    if (!mentionQuery) return mentionSuggestions.slice(0, 5);
-    const query = mentionQuery.toLowerCase();
-    return mentionSuggestions
-      .filter(name => name.toLowerCase().includes(query))
-      .slice(0, 5);
-  }, [mentionSuggestions, mentionQuery]);
-
-  // Handle typing indicator
-  const handleTyping = useCallback((isTyping: boolean) => {
-    if (!onTyping) return;
-
-    if (isTyping && !wasTypingRef.current) {
-      wasTypingRef.current = true;
-      onTyping(true);
-    }
-
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-
-    if (isTyping) {
-      typingTimeoutRef.current = setTimeout(() => {
-        wasTypingRef.current = false;
-        onTyping(false);
-      }, TYPING_DEBOUNCE_MS);
-    } else {
-      wasTypingRef.current = false;
-      onTyping(false);
-    }
-  }, [onTyping]);
-
-  // Clean up typing indicator on unmount
-  useEffect(() => {
-    return () => {
-      if (typingTimeoutRef.current) {
-        clearTimeout(typingTimeoutRef.current);
-      }
-      if (wasTypingRef.current && onTyping) {
-        onTyping(false);
-      }
-    };
-  }, [onTyping]);
-
-  // Handle value change
-  const handleChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const newValue = e.target.value;
-    const newPosition = e.target.selectionStart;
-
-    setValue(newValue);
-    setCursorPosition(newPosition);
-    handleTyping(newValue.length > 0);
-
-    // Check for mention trigger
-    const textBeforeCursor = newValue.slice(0, newPosition);
-    const mentionMatch = textBeforeCursor.match(/@(\w*)$/);
-
-    if (mentionMatch) {
-      setMentionQuery(mentionMatch[1]);
-      setShowMentions(true);
-      setSelectedMentionIndex(0);
-    } else {
-      setShowMentions(false);
-      setMentionQuery('');
-    }
-
-    // Auto-resize textarea
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.style.height = 'auto';
-      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
-    }
-  }, [handleTyping]);
-
-  // Insert mention at cursor
-  const insertMention = useCallback((name: string) => {
-    const textBeforeCursor = value.slice(0, cursorPosition);
-    const textAfterCursor = value.slice(cursorPosition);
-
-    // Find the @ trigger position
-    const mentionMatch = textBeforeCursor.match(/@(\w*)$/);
-    if (!mentionMatch) return;
-
-    const beforeMention = textBeforeCursor.slice(0, -mentionMatch[0].length);
-    const newValue = `${beforeMention}@${name} ${textAfterCursor}`;
-
-    setValue(newValue);
-    setShowMentions(false);
-    setMentionQuery('');
-
-    // Focus and set cursor position
-    setTimeout(() => {
-      if (textareaRef.current) {
-        textareaRef.current.focus();
-        const newPosition = beforeMention.length + name.length + 2; // @ + name + space
-        textareaRef.current.setSelectionRange(newPosition, newPosition);
-        setCursorPosition(newPosition);
-      }
-    }, 0);
-  }, [value, cursorPosition]);
-
-  // Handle keyboard navigation in mention list
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (showMentions && filteredMentions.length > 0) {
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          setSelectedMentionIndex(prev =>
-            prev < filteredMentions.length - 1 ? prev + 1 : 0
-          );
-          return;
-        case 'ArrowUp':
-          e.preventDefault();
-          setSelectedMentionIndex(prev =>
-            prev > 0 ? prev - 1 : filteredMentions.length - 1
-          );
-          return;
-        case 'Tab':
-        case 'Enter':
-          e.preventDefault();
-          insertMention(filteredMentions[selectedMentionIndex]);
-          return;
-        case 'Escape':
-          e.preventDefault();
-          setShowMentions(false);
-          return;
-      }
-    }
-
-    // Send on Enter (without Shift)
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  }, [showMentions, filteredMentions, selectedMentionIndex, insertMention]);
-
-  // Handle send
-  const handleSend = useCallback(() => {
-    const trimmed = value.trim();
-    if (!trimmed || disabled) return;
-
-    onSend(trimmed);
-    setValue('');
-    handleTyping(false);
-
-    // Reset textarea height
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-    }
-  }, [value, disabled, onSend, handleTyping]);
-
-  return (
-    <div className="relative flex-shrink-0 border-t border-border-subtle bg-bg-primary">
-      {/* Mention autocomplete */}
-      {showMentions && filteredMentions.length > 0 && (
-        <div className="absolute bottom-full left-4 mb-1 bg-bg-elevated border border-border-subtle rounded-lg shadow-lg py-1 min-w-[200px] max-h-[200px] overflow-y-auto">
-          {filteredMentions.map((name, index) => (
-            <button
-              key={name}
-              onClick={() => insertMention(name)}
-              className={`
-                w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors
-                ${index === selectedMentionIndex
-                  ? 'bg-accent-cyan/10 text-text-primary'
-                  : 'text-text-secondary hover:bg-bg-hover'}
-              `}
-            >
-              <div className="w-6 h-6 rounded-full bg-accent-cyan/20 flex items-center justify-center text-xs font-medium text-accent-cyan">
-                {name.charAt(0).toUpperCase()}
-              </div>
-              <span>{name}</span>
-            </button>
-          ))}
-        </div>
-      )}
-
-      {/* Input area */}
-      <div className="p-4">
-        <div className="flex items-end gap-3">
-          {/* Attachment button */}
-          <button
-            type="button"
-            disabled={disabled}
-            className="p-2 rounded-lg text-text-muted hover:text-text-primary hover:bg-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
-            title="Attach file"
-          >
-            <AttachIcon className="w-5 h-5" />
-          </button>
-
-          {/* Text input */}
-          <div className="flex-1 relative">
-            <textarea
-              ref={textareaRef}
-              value={value}
-              onChange={handleChange}
-              onKeyDown={handleKeyDown}
-              placeholder={placeholder}
-              disabled={disabled}
-              rows={1}
-              className="w-full px-4 py-2.5 bg-bg-tertiary border border-border-subtle rounded-lg text-text-primary text-sm resize-none focus:outline-none focus:border-accent-cyan/50 disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-text-muted"
-              style={{ maxHeight: '200px' }}
-            />
-          </div>
-
-          {/* Send button */}
-          <button
-            type="button"
-            onClick={handleSend}
-            disabled={!value.trim() || disabled}
-            className={`
-              p-2.5 rounded-lg transition-colors flex-shrink-0
-              ${value.trim() && !disabled
-                ? 'bg-accent-cyan text-bg-deep hover:bg-accent-cyan/90'
-                : 'bg-bg-tertiary text-text-muted cursor-not-allowed'}
-            `}
-            title="Send message"
-          >
-            <SendIcon className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* Helper text */}
-        <p className="mt-2 text-xs text-text-muted">
-          <kbd className="px-1 py-0.5 bg-bg-tertiary rounded text-[10px]">Enter</kbd> to send,{' '}
-          <kbd className="px-1 py-0.5 bg-bg-tertiary rounded text-[10px]">Shift+Enter</kbd> for new line,{' '}
-          <kbd className="px-1 py-0.5 bg-bg-tertiary rounded text-[10px]">@</kbd> to mention
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// =============================================================================
-// Icons
-// =============================================================================
-
-function AttachIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
-    </svg>
-  );
-}
-
-function SendIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <line x1="22" y1="2" x2="11" y2="13" />
-      <polygon points="22 2 15 22 11 13 2 9 22 2" />
-    </svg>
-  );
-}
-
-export default MessageInput;

package/packages/dashboard/ui/react-components/channels/SearchInput.tsx

@@ -1,172 +0,0 @@
-/**
- * SearchInput Component
- *
- * Search query input with debounce for channel message search.
- * Supports workspace-wide and channel-scoped search.
- */
-
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import type { SearchInputProps } from './types';
-
-const DEFAULT_DEBOUNCE_MS = 300;
-
-export function SearchInput({
-  initialQuery = '',
-  placeholder = 'Search messages...',
-  debounceMs = DEFAULT_DEBOUNCE_MS,
-  isSearching = false,
-  onSearch,
-  onClear,
-  channelId,
-}: SearchInputProps) {
-  const [value, setValue] = useState(initialQuery);
-  const debounceRef = useRef<NodeJS.Timeout | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Debounced search handler
-  const debouncedSearch = useCallback((query: string) => {
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-    }
-
-    debounceRef.current = setTimeout(() => {
-      onSearch(query);
-    }, debounceMs);
-  }, [onSearch, debounceMs]);
-
-  // Handle input change
-  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    setValue(newValue);
-
-    if (newValue.trim()) {
-      debouncedSearch(newValue.trim());
-    } else {
-      // Clear immediately when empty
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
-      onClear?.();
-    }
-  }, [debouncedSearch, onClear]);
-
-  // Handle clear button
-  const handleClear = useCallback(() => {
-    setValue('');
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-    }
-    onClear?.();
-    inputRef.current?.focus();
-  }, [onClear]);
-
-  // Handle keyboard shortcuts
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      handleClear();
-    } else if (e.key === 'Enter') {
-      // Trigger search immediately on Enter
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
-      if (value.trim()) {
-        onSearch(value.trim());
-      }
-    }
-  }, [handleClear, onSearch, value]);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <div className="relative">
-      {/* Search icon */}
-      <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
-        <SearchIcon className="w-4 h-4 text-text-muted" />
-      </div>
-
-      {/* Input field */}
-      <input
-        ref={inputRef}
-        type="text"
-        value={value}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        className="w-full pl-10 pr-10 py-2 bg-bg-tertiary border border-border-subtle rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent-cyan/50 placeholder:text-text-muted"
-      />
-
-      {/* Clear/Loading indicator */}
-      <div className="absolute right-3 top-1/2 -translate-y-1/2">
-        {isSearching ? (
-          <LoadingSpinner className="w-4 h-4 text-accent-cyan" />
-        ) : value ? (
-          <button
-            onClick={handleClear}
-            className="p-0.5 rounded text-text-muted hover:text-text-primary transition-colors"
-            title="Clear search"
-          >
-            <CloseIcon className="w-4 h-4" />
-          </button>
-        ) : null}
-      </div>
-
-      {/* Channel scope indicator */}
-      {channelId && (
-        <div className="absolute -top-6 left-0 text-xs text-text-muted">
-          Searching in #{channelId.replace('#', '')}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// =============================================================================
-// Icons
-// =============================================================================
-
-function SearchIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <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} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>
-  );
-}
-
-function LoadingSpinner({ className }: { className?: string }) {
-  return (
-    <svg className={`${className} animate-spin`} viewBox="0 0 24 24" fill="none">
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
-      />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  );
-}
-
-export default SearchInput;