mirror of
https://github.com/siteboon/claudecodeui.git
synced 2025-12-12 21:29:42 +00:00
refactor: Simplify input area layout and remove unused provider selection components in ChatInterface
This commit is contained in:
simos
@@ -3037,120 +3037,10 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
|
|||||||
|
|
||||||
|
|
||||||
{/* Input Area - Fixed Bottom */}
|
{/* 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'
|
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 */}
|
{/* Permission Mode Selector with scroll to bottom button - Above input, clickable for mobile */}
|
||||||
<div className="max-w-4xl mx-auto mb-3">
|
<div className="max-w-4xl mx-auto mb-3">
|
||||||
|
|||||||
Reference in New Issue
Block a user