h

src/app/components/chat/ChatInput.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Plus, ArrowUp, Settings2, Mic, X, Check, Loader2 } from 'lucide-react';
+import { Plus, ArrowUp, Settings2, Mic, X, Check, Loader2, Search, Sparkles } from 'lucide-react';
 import { useMCPTools } from '../../hooks/useMCPTools.ts';
 import type { MCPTool } from '../../types/index.ts';
 
@@ -18,7 +18,13 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
   const [isRecording, setIsRecording] = useState(false);
   const [showToolsDropdown, setShowToolsDropdown] = useState(false);
   const [selectedTool, setSelectedTool] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [dropdownPosition, setDropdownPosition] = useState<'below' | 'above'>('below');
+  const [dropdownMaxHeight, setDropdownMaxHeight] = useState(320);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownContentRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
   const { tools, loading, error, refetch } = useMCPTools();
 
   const handleSubmit = (e: any) => {
@@ -90,6 +96,7 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
         setShowToolsDropdown(false);
+        setFocusedIndex(-1);
       }
     };
 
@@ -99,9 +106,109 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
     };
   }, []);
 
+  // Handle keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!showToolsDropdown) return;
+
+      const filteredTools = tools.filter(isMCPTool).filter(tool =>
+        tool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (tool.description && tool.description.toLowerCase().includes(searchQuery.toLowerCase()))
+      );
+
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          setFocusedIndex(prev => (prev + 1) % filteredTools.length);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setFocusedIndex(prev => prev <= 0 ? filteredTools.length - 1 : prev - 1);
+          break;
+        case 'Enter':
+          event.preventDefault();
+          if (focusedIndex >= 0 && filteredTools[focusedIndex]) {
+            setSelectedTool(filteredTools[focusedIndex].name);
+            setShowToolsDropdown(false);
+            setFocusedIndex(-1);
+          }
+          break;
+        case 'Escape':
+          event.preventDefault();
+          setShowToolsDropdown(false);
+          setFocusedIndex(-1);
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [showToolsDropdown, focusedIndex, tools, searchQuery]);
+
+  // Calculate dropdown position and max height based on viewport
+  useEffect(() => {
+    if (showToolsDropdown && dropdownRef.current) {
+      const calculatePosition = () => {
+        const buttonElement = dropdownRef.current?.querySelector('button');
+        if (!buttonElement) return;
+
+        const buttonRect = buttonElement.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        const spaceBelow = viewportHeight - buttonRect.bottom;
+        const spaceAbove = buttonRect.top;
+        const dropdownHeight = 400; // Approximate max height
+        const minSpace = 20; // Minimum space from viewport edge
+
+        // Determine if dropdown should be above or below
+        if (spaceBelow < dropdownHeight + minSpace && spaceAbove > spaceBelow) {
+          setDropdownPosition('above');
+          // Calculate max height based on available space above
+          const maxHeight = Math.min(320, spaceAbove - minSpace - 60); // 60px for padding/margins
+          setDropdownMaxHeight(Math.max(200, maxHeight));
+        } else {
+          setDropdownPosition('below');
+          // Calculate max height based on available space below
+          const maxHeight = Math.min(320, spaceBelow - minSpace - 60);
+          setDropdownMaxHeight(Math.max(200, maxHeight));
+        }
+
+        // Adjust horizontal position if dropdown would overflow
+        const dropdownWidth = 320; // w-80 = 320px
+        const dropdownElement = dropdownRef.current?.querySelector('[data-dropdown-content]') as HTMLElement;
+        if (dropdownElement) {
+          if (buttonRect.left + dropdownWidth > viewportWidth - minSpace) {
+            // Would overflow on the right, align to right edge
+            dropdownElement.style.right = '0';
+            dropdownElement.style.left = 'auto';
+          } else {
+            // Reset to left alignment
+            dropdownElement.style.right = 'auto';
+            dropdownElement.style.left = '0';
+          }
+        }
+      };
+
+      calculatePosition();
+
+      // Recalculate on window resize or scroll
+      window.addEventListener('resize', calculatePosition);
+      window.addEventListener('scroll', calculatePosition, true);
+
+      return () => {
+        window.removeEventListener('resize', calculatePosition);
+        window.removeEventListener('scroll', calculatePosition, true);
+      };
+    }
+  }, [showToolsDropdown]);
+
   const toggleToolsDropdown = () => {
     const nextState = !showToolsDropdown;
     setShowToolsDropdown(nextState);
+    setSearchQuery('');
+    setFocusedIndex(-1);
 
     if (nextState) {
       refetch();
@@ -162,49 +269,155 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
                     <button
                       type="button"
                       onClick={toggleToolsDropdown}
-                      className={`h-8 w-8 p-0 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center ${selectedTool ? 'bg-teal-500/15 text-teal-600 dark:bg-teal-500/20 dark:text-teal-300 hover:bg-teal-500/25 dark:hover:bg-teal-500/30' : 'text-zinc-800 dark:text-white hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700'}`}
+                      className={`h-8 w-8 p-0 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center relative ${selectedTool ? 'bg-teal-500/15 text-teal-600 dark:bg-teal-500/20 dark:text-teal-300 hover:bg-teal-500/25 dark:hover:bg-teal-500/30' : 'text-zinc-800 dark:text-white hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700'}`}
                       aria-expanded={showToolsDropdown}
                       aria-haspopup="true"
                     >
                       <Settings2 className="h-5 w-5" />
+                      {selectedTool && (
+                        <div className="absolute -top-1 -right-1 h-2 w-2 bg-teal-500 rounded-full animate-pulse"></div>
+                      )}
                     </button>
                     
                     {showToolsDropdown && (
-                      <div className="absolute top-[calc(100%+0.6rem)] left-0 w-fit min-w-[9rem] max-w-[20rem] rounded-2xl border border-zinc-200/70 dark:border-zinc-700/60 bg-white/95 dark:bg-zinc-900/90 backdrop-blur-xl shadow-[0_20px_45px_-20px_rgba(12,12,12,0.75)] z-50 overflow-hidden">
-                        <div className="px-3 py-3 max-h-64 overflow-y-auto scrollbar-hide">
+                      <div
+                        ref={dropdownContentRef}
+                        data-dropdown-content
+                        className={`absolute left-0 w-80 rounded-2xl border border-zinc-200/70 dark:border-zinc-700/60 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl shadow-[0_20px_45px_-20px_rgba(12,12,12,0.75)] z-50 overflow-hidden animate-fade-in flex flex-col ${
+                          dropdownPosition === 'above' 
+                            ? 'bottom-[calc(100%+0.6rem)]' 
+                            : 'top-[calc(100%+0.6rem)]'
+                        }`}
+                        style={{ maxHeight: `${dropdownMaxHeight}px` }}
+                      >
+                        {/* Header */}
+                        <div className="px-4 py-3 border-b border-zinc-200/50 dark:border-zinc-700/50 flex-shrink-0">
+                          <div className="flex items-center gap-2 mb-3">
+                            <Sparkles className="h-4 w-4 text-teal-500 dark:text-teal-400" />
+                            <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Available Tools</h3>
+                            <div className="ml-auto">
+                              <span className="text-xs text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-full">
+                                {tools.filter(isMCPTool).length} tools
+                              </span>
+                            </div>
+                          </div>
+                          
+                          {/* Search input */}
+                          <div className="relative">
+                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-zinc-400 dark:text-zinc-500" />
+                            <input
+                              ref={searchInputRef}
+                              type="text"
+                              placeholder="Search tools..."
+                              value={searchQuery}
+                              onChange={(e) => {
+                                setSearchQuery(e.target.value);
+                                setFocusedIndex(-1);
+                              }}
+                              className="w-full pl-10 pr-4 py-2 text-sm bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-zinc-100 placeholder-zinc-500 dark:placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-teal-500/50 transition-all duration-200"
+                            />
+                          </div>
+                        </div>
+                        
+                        {/* Tools list */}
+                        <div 
+                          className="overflow-y-auto scrollbar-hide flex-1"
+                          style={{ maxHeight: `${dropdownMaxHeight - 140}px` }}
+                        >
                           {loading ? (
-                            <div className="flex items-center justify-center gap-3 rounded-xl bg-zinc-100/80 dark:bg-zinc-800/70 px-4 py-3 text-sm text-zinc-500 dark:text-zinc-300">
-                              <Loader2 className="h-4 w-4 animate-spin" />
-                              Loading tools…
+                            <div className="flex items-center justify-center gap-3 px-4 py-8">
+                              <Loader2 className="h-5 w-5 animate-spin text-teal-500 dark:text-teal-400" />
+                              <span className="text-sm text-zinc-600 dark:text-zinc-300">Loading tools…</span>
                             </div>
                           ) : error ? (
-                            <div className="rounded-xl border border-red-400/50 bg-red-50/80 px-4 py-3 text-sm text-red-600 dark:border-red-500/40 dark:bg-red-900/20 dark:text-red-300">
-                              Failed to load tools. Please try again.
+                            <div className="px-4 py-6">
+                              <div className="flex flex-col items-center gap-3 text-center">
+                                <div className="h-12 w-12 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center">
+                                  <X className="h-6 w-6 text-red-500 dark:text-red-400" />
+                                </div>
+                                <div>
+                                  <p className="text-sm font-medium text-red-600 dark:text-red-400">Failed to load tools</p>
+                                  <p className="text-xs text-red-500 dark:text-red-500 mt-1">Please try again later</p>
+                                </div>
+                              </div>
                             </div>
-                          ) : tools.length === 0 ? (
-                            <div className="rounded-xl bg-zinc-100/70 px-4 py-3 text-sm text-zinc-500 dark:bg-zinc-800/70 dark:text-zinc-300">
-                              No tools available yet.
+                          ) : tools.filter(isMCPTool).length === 0 ? (
+                            <div className="px-4 py-6">
+                              <div className="flex flex-col items-center gap-3 text-center">
+                                <div className="h-12 w-12 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
+                                  <Settings2 className="h-6 w-6 text-zinc-400 dark:text-zinc-500" />
+                                </div>
+                                <div>
+                                  <p className="text-sm font-medium text-zinc-600 dark:text-zinc-300">No tools available</p>
+                                  <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1">Check back later for updates</p>
+                                </div>
+                              </div>
                             </div>
                           ) : (
-                            <ul className="space-y-2">
-                              {tools.slice(0, 6).filter(isMCPTool).map((tool, index) => (
-                                <li key={tool.name || index}>
+                            <div className="p-2">
+                              {tools
+                                .filter(isMCPTool)
+                                .filter(tool =>
+                                  tool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                                  (tool.description && tool.description.toLowerCase().includes(searchQuery.toLowerCase()))
+                                )
+                                .map((tool, index) => (
                                   <button
+                                    key={tool.name || index}
                                     type="button"
-                                    className={`w-full rounded-xl border border-transparent bg-gradient-to-r from-zinc-100/70 via-white to-zinc-100/70 px-4 py-3 text-left text-sm font-semibold text-zinc-800 transition-all duration-200 hover:-translate-y-0.5 hover:border-teal-300/80 hover:bg-white/90 hover:shadow-lg dark:from-zinc-800/50 dark:via-zinc-900/60 dark:to-zinc-800/50 dark:text-zinc-50 dark:hover:border-teal-400/70 dark:hover:bg-zinc-700/70 flex items-center justify-between gap-3 whitespace-nowrap ${selectedTool === tool.name ? 'border-teal-300/70 dark:border-teal-400/70' : ''}`}
+                                    className={`w-full rounded-xl px-4 py-3 text-left transition-all duration-200 group ${
+                                      focusedIndex === index
+                                        ? 'bg-teal-50 dark:bg-teal-900/20 border border-teal-300/80 dark:border-teal-400/60'
+                                        : selectedTool === tool.name
+                                        ? 'bg-teal-50/50 dark:bg-teal-900/10 border border-teal-200/60 dark:border-teal-400/40'
+                                        : 'hover:bg-zinc-50 dark:hover:bg-zinc-800/50 border border-transparent'
+                                    }`}
                                     onClick={() => {
                                       setSelectedTool((current) => (current === tool.name ? null : tool.name));
                                       setShowToolsDropdown(false);
+                                      setFocusedIndex(-1);
                                     }}
+                                    onMouseEnter={() => setFocusedIndex(index)}
                                   >
-                                    <span className="truncate">{tool.name}</span>
-                                    {selectedTool === tool.name && <Check className="h-4 w-4 text-teal-400 dark:text-teal-300" />}
+                                    <div className="flex items-start justify-between gap-3">
+                                      <div className="flex-1 min-w-0">
+                                        <div className="flex items-center gap-2 mb-1">
+                                          <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 truncate">
+                                            {tool.name}
+                                          </h4>
+                                          {selectedTool === tool.name && (
+                                            <Check className="h-3.5 w-3.5 text-teal-500 dark:text-teal-400 flex-shrink-0" />
+                                          )}
+                                        </div>
+                                        {tool.description && (
+                                          <p className="text-xs text-zinc-600 dark:text-zinc-400 line-clamp-2 leading-relaxed">
+                                            {tool.description}
+                                          </p>
+                                        )}
+                                      </div>
+                                    </div>
                                   </button>
-                                </li>
-                              ))}
-                            </ul>
+                                ))}
+                            </div>
                           )}
                         </div>
+                        
+                        {/* Footer */}
+                        <div className="px-4 py-2 border-t border-zinc-200/50 dark:border-zinc-700/50 bg-zinc-50/50 dark:bg-zinc-800/30 flex-shrink-0">
+                          <div className="flex items-center justify-end">
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setSelectedTool(null);
+                                setShowToolsDropdown(false);
+                                setFocusedIndex(-1);
+                              }}
+                              className="text-xs text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors duration-200"
+                            >
+                              Clear selection
+                            </button>
+                          </div>
+                        </div>
                       </div>
                     )}
                   </div>