mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-06-12 19:55:19 +02:00
make the chat input box similar
This commit is contained in:
parent
65f0d518eb
commit
0ace16ede6
1 changed files with 57 additions and 42 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue