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