From 003e8f4be33f0b1eea6ae6d8b67e9c9b354fb2df Mon Sep 17 00:00:00 2001
From: simos <simosmik@gmail.com>
Date: Tue, 12 Aug 2025 13:11:24 +0300
Subject: [PATCH] refactor: Simplify input area layout and remove unused
 provider selection components in ChatInterface

---
 src/components/ChatInterface.jsx | 114 +------------------------------
 1 file changed, 2 insertions(+), 112 deletions(-)

diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index 58f761d..bf30dfc 100644
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -3037,120 +3037,10 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
 
 
       {/* Input Area - Fixed Bottom */}
-      <div className={`p-2 sm:p-4 md:p-6 flex-shrink-0 ${
+      <div className={`p-2 sm:p-4 md:p-4 flex-shrink-0 ${
         isInputFocused ? 'pb-2 sm:pb-4 md:pb-6' : 'pb-16 sm:pb-4 md:pb-6'
       }`}>
-        {/* Provider Selection and Working Status - positioned above the input form */}
-        <div className="max-w-4xl mx-auto mb-2">
-          <div className="flex items-center justify-between gap-3">
-            {/* Provider & Model Selection or Fixed Provider for existing session */}
-            <div className="flex items-center gap-2">
-              {selectedSession?.__provider ? (
-                <div className="flex items-center gap-2 px-2 py-1 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg">
-                  {selectedSession.__provider === 'cursor' ? (
-                    <CursorLogo className="w-4 h-4" />
-                  ) : (
-                    <ClaudeLogo className="w-4 h-4" />
-                  )}
-                  <span className="text-sm capitalize">{selectedSession.__provider}</span>
-                </div>
-              ) : chatMessages.length === 0 ? (
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={() => {
-                      setProvider('claude');
-                      localStorage.setItem('selected-provider', 'claude');
-                    }}
-                    className={`flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg transition-all ${
-                      provider === 'claude'
-                        ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-300 dark:border-blue-700'
-                        : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700'
-                    }`}
-                    disabled={isLoading}
-                  >
-                    <ClaudeLogo className="w-4 h-4" />
-                    <span>Claude</span>
-                  </button>
-                  <button
-                    onClick={() => {
-                      setProvider('cursor');
-                      localStorage.setItem('selected-provider', 'cursor');
-                    }}
-                    className={`flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg transition-all ${
-                      provider === 'cursor'
-                        ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-300 dark:border-purple-700'
-                        : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700'
-                    }`}
-                    disabled={isLoading}
-                  >
-                    <CursorLogo className="w-4 h-4" />
-                    <span>Cursor</span>
-                  </button>
-                  {/* Always reserve space for model dropdown to prevent jumping */}
-                  <div className={`transition-opacity duration-200 ${provider === 'cursor' ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
-                    <select
-                      value={cursorModel}
-                      onChange={(e) => {
-                        const newModel = e.target.value;
-                        setCursorModel(newModel);
-                        localStorage.setItem('cursor-model', newModel);
-                      }}
-                      className="pl-3 pr-8 py-1.5 text-sm bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 min-w-[120px]"
-                      disabled={isLoading || provider !== 'cursor'}
-                    >
-                      <option value="gpt-5">GPT-5</option>
-                      <option value="sonnet-4">Sonnet-4</option>
-                      <option value="opus-4.1">Opus 4.1</option>
-                    </select>
-                  </div>
-                </div>
-              ) : (
-                <>
-                  <select
-                    value={provider}
-                    onChange={(e) => {
-                      const newProvider = e.target.value;
-                      setProvider(newProvider);
-                      localStorage.setItem('selected-provider', newProvider);
-                    }}
-                    className="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    disabled={isLoading}
-                  >
-                    <option value="claude">Claude</option>
-                    <option value="cursor">Cursor</option>
-                  </select>
-                  {/* Always reserve space for model dropdown to prevent jumping */}
-                  <div className={`transition-opacity duration-200 ${provider === 'cursor' ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
-                    <select
-                      value={cursorModel}
-                      onChange={(e) => {
-                        const newModel = e.target.value;
-                        setCursorModel(newModel);
-                        localStorage.setItem('cursor-model', newModel);
-                      }}
-                      className="pl-3 pr-8 py-1.5 text-sm bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-w-[120px]"
-                      disabled={isLoading || provider !== 'cursor'}
-                    >
-                      <option value="gpt-5">GPT-5</option>
-                      <option value="sonnet-4">Sonnet-4</option>
-                      <option value="opus-4.1">Opus 4.1</option>
-                    </select>
-                  </div>
-                </>
-              )}
-            </div>
-            
-            {/* Status Display */}
-            <div className="flex-1">
-              <ClaudeStatus 
-                status={claudeStatus}
-                isLoading={isLoading}
-                onAbort={handleAbortSession}
-                provider={provider}
-              />
-            </div>
-          </div>
-        </div>
+    
         
         {/* Permission Mode Selector with scroll to bottom button - Above input, clickable for mobile */}
         <div className="max-w-4xl mx-auto mb-3">