inhance dropdown in ChatInput component

src/app/components/chat/ChatInput.tsx

@@ -159,24 +159,24 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
         const viewportWidth = window.innerWidth;
         const spaceBelow = viewportHeight - buttonRect.bottom;
         const spaceAbove = buttonRect.top;
-        const dropdownHeight = 400; // Approximate max height
+        const dropdownHeight = 500; // Approximate max height (increased from 400)
         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));
+          const maxHeight = Math.min(450, spaceAbove - minSpace - 60); // Increased from 320 to 450
+          setDropdownMaxHeight(Math.max(250, maxHeight)); // Increased minimum from 200 to 250
         } else {
           setDropdownPosition('below');
           // Calculate max height based on available space below
-          const maxHeight = Math.min(320, spaceBelow - minSpace - 60);
-          setDropdownMaxHeight(Math.max(200, maxHeight));
+          const maxHeight = Math.min(450, spaceBelow - minSpace - 60); // Increased from 320 to 450
+          setDropdownMaxHeight(Math.max(250, maxHeight)); // Increased minimum from 200 to 250
         }
 
         // Adjust horizontal position if dropdown would overflow
-        const dropdownWidth = 320; // w-80 = 320px
+        const dropdownWidth = 384; // w-96 = 384px (increased from w-80)
         const dropdownElement = dropdownRef.current?.querySelector('[data-dropdown-content]') as HTMLElement;
         if (dropdownElement) {
           if (buttonRect.left + dropdownWidth > viewportWidth - minSpace) {
@@ -204,6 +204,13 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
     }
   }, [showToolsDropdown]);
 
+  // Focus search input when dropdown opens
+  useEffect(() => {
+    if (showToolsDropdown && searchInputRef.current) {
+      setTimeout(() => searchInputRef.current?.focus(), 100);
+    }
+  }, [showToolsDropdown]);
+
   const toggleToolsDropdown = () => {
     const nextState = !showToolsDropdown;
     setShowToolsDropdown(nextState);
@@ -279,147 +286,150 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
                       )}
                     </button>
                     
-                    {showToolsDropdown && (
-                      <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>
+                      {showToolsDropdown && (
+                       <div
+                         ref={dropdownContentRef}
+                         data-dropdown-content
+                         className={`absolute left-0 w-96 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>
                           
-                          {/* 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 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="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>
+                          {/* 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 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>
-                            </div>
-                          ) : 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" />
+                            ) : error ? (
+                              <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>
-                                  <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>
+                            ) : 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>
-                            </div>
-                          ) : (
-                            <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 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)}
-                                  >
-                                    <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 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 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)}
+                                    >
+                                      <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>
-                                        {tool.description && (
-                                          <p className="text-xs text-zinc-600 dark:text-zinc-400 line-clamp-2 leading-relaxed">
-                                            {tool.description}
-                                          </p>
-                                        )}
                                       </div>
-                                    </div>
-                                  </button>
-                                ))}
+                                    </button>
+                                  ))}
+                              </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-between">
+                              <p className="text-xs text-zinc-500 dark:text-zinc-400">
+                                Use ↑↓ to navigate, Enter to select
+                              </p>
+                              <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>
-                        
-                        {/* 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>
 
                   <button
@@ -434,7 +444,7 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
                     type="button"
                     className="h-8 px-3 rounded-lg text-sm font-medium hover:opacity-90 transition-all duration-200 hover:scale-105 flex items-center justify-center bg-teal-900 dark:bg-[#032827] text-teal-300 dark:text-[#2DD4BF]"
                   >
-                    Agent
+                    LLM
                   </button>
                 </div>