make the chat input box similar

This commit is contained in:
Arjun 2026-06-12 14:23:03 +05:30
parent 65f0d518eb
commit 0ace16ede6

View file

@ -203,48 +203,63 @@ export function CodeChat({
<ConversationScrollButton /> <ConversationScrollButton />
</Conversation> </Conversation>
{/* Composer */} {/* Composer mirrors the assistant chat input's look (rounded card,
<div className="border-t p-3"> borderless textarea, round primary send / destructive stop). */}
<div className="mx-auto flex w-full max-w-3xl items-end gap-2"> <div className="p-3">
<Textarea <div className="rowboat-chat-input mx-auto w-full max-w-3xl rounded-lg border border-border bg-background shadow-none">
ref={textareaRef} <div className="px-4 pb-2 pt-4">
value={draft} <Textarea
onChange={(e) => setDraft(e.target.value)} ref={textareaRef}
onKeyDown={(e) => { value={draft}
if (e.key === 'Enter' && !e.shiftKey) { onChange={(e) => setDraft(e.target.value)}
e.preventDefault() onKeyDown={(e) => {
void handleSend() if (e.key === 'Enter' && !e.shiftKey) {
} e.preventDefault()
}} void handleSend()
placeholder={`Message ${AGENT_LABEL[session.agent]}`} }
className="max-h-40 min-h-[44px] flex-1 resize-none" }}
rows={1} placeholder="Type your message..."
/> className="max-h-40 min-h-[24px] w-full resize-none border-0 bg-transparent p-0 text-sm shadow-none outline-none focus-visible:ring-0"
{busy ? ( rows={2}
<Button />
variant="outline" </div>
size="icon" <div className="flex items-center gap-2 px-3 pb-3">
className="shrink-0" <span className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
onClick={() => void handleStop()} <Terminal className="size-3.5 shrink-0" />
disabled={stopping} <span className="truncate">Direct straight to {AGENT_LABEL[session.agent]}</span>
title="Stop the agent" </span>
> <div className="flex-1" />
<Square className={cn('size-4', stopping && 'animate-pulse')} /> {busy ? (
</Button> <Button
) : ( size="icon"
<Button onClick={() => void handleStop()}
size="icon" disabled={stopping}
className="shrink-0" title="Stop the agent"
onClick={() => void handleSend()} className="h-7 w-7 shrink-0 rounded-full bg-destructive text-destructive-foreground transition-all hover:bg-destructive/90"
disabled={!draft.trim()} >
title="Send" {stopping ? (
> <Loader2 className="h-4 w-4 animate-spin" />
<ArrowUp className="size-4" /> ) : (
</Button> <Square className="h-3 w-3 fill-current" />
)} )}
</div> </Button>
<div className="mx-auto mt-1.5 w-full max-w-3xl text-[10px] text-muted-foreground"> ) : (
Direct messages go straight to {AGENT_LABEL[session.agent]} <Button
size="icon"
onClick={() => void handleSend()}
disabled={!draft.trim()}
title="Send"
className={cn(
'h-7 w-7 shrink-0 rounded-full transition-all',
draft.trim()
? 'bg-primary text-primary-foreground hover:bg-primary/90'
: 'bg-muted text-muted-foreground',
)}
>
<ArrowUp className="h-4 w-4" />
</Button>
)}
</div>
</div> </div>
</div> </div>
</div> </div>