d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2025-12-10 14:59:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Simplify input area layout and remove unused provider selection components in ChatInterface

Browse Source
This commit is contained in:
simos
2025-08-12 13:11:24 +03:00
parent 0a39079c5c
commit 003e8f4be3
1 changed files with 2 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/ChatInterface.jsx
View File

@@ -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">