@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/components/channels/MessageInput.tsx

@@ -0,0 +1,302 @@
+/**
+ * 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;
+      }
+    }
+
+    // Option/Alt+Enter: insert newline manually (browser doesn't do this by default)
+    if (e.key === 'Enter' && e.altKey) {
+      e.preventDefault();
+      const textarea = e.target as HTMLTextAreaElement;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const newValue = value.slice(0, start) + '\n' + value.slice(end);
+      setValue(newValue);
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 1;
+      }, 0);
+      return;
+    }
+
+    // Send on Enter (without Shift or Option/Alt)
+    if (e.key === 'Enter' && !e.shiftKey && !e.altKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }, [showMentions, filteredMentions, selectedMentionIndex, insertMention, value]);
+
+  // 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/Option+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/src/components/channels/SearchInput.tsx

@@ -0,0 +1,172 @@
+/**
+ * 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;