Co-authored-by: Steve Dudenhoeffer <[email protected]>
This commit was merged in pull request #71.
This commit is contained in:
@@ -0,0 +1,239 @@
|
||||
import { useEffect, useRef, useState, type ReactNode } from 'react'
|
||||
import { Alert } from '@/components/ui/Alert'
|
||||
import { errorMessage } from '@/lib/api'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { TextArea } from '@/components/ui/TextArea'
|
||||
import { cn } from '@/lib/cn'
|
||||
import {
|
||||
describeStep,
|
||||
streamChat,
|
||||
useAgentHistory,
|
||||
useAgentRefresh,
|
||||
useClearAgentHistory,
|
||||
type AgentStep,
|
||||
type AgentTurn,
|
||||
} from '@/lib/agent'
|
||||
import { useUndo } from '@/lib/history'
|
||||
import { UndoButton } from './UndoButton'
|
||||
|
||||
/**
|
||||
* Talk to the garden assistant, in the editor beside the canvas.
|
||||
*
|
||||
* Here rather than on its own page because watching the garden change as the
|
||||
* agent works IS the confirmation — which is what makes acting without asking
|
||||
* first tolerable. It also means the agent never has to guess which garden you
|
||||
* mean.
|
||||
*/
|
||||
export function ChatPanel({ gardenId, canEdit }: { gardenId: number; canEdit: boolean }) {
|
||||
const history = useAgentHistory(gardenId, true)
|
||||
const clear = useClearAgentHistory(gardenId)
|
||||
const refresh = useAgentRefresh(gardenId)
|
||||
const undo = useUndo(gardenId)
|
||||
|
||||
const [input, setInput] = useState('')
|
||||
// The turn in flight: what we sent, the steps so far, and how it ended.
|
||||
const [pending, setPending] = useState<{ message: string; steps: AgentStep[] } | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [warning, setWarning] = useState<string | null>(null)
|
||||
const abort = useRef<AbortController | null>(null)
|
||||
const bottom = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Deliberately NOT aborted on unmount. Selecting an object auto-switches the
|
||||
// rail to the inspector, so aborting here would mean clicking the canvas
|
||||
// mid-turn silently killed the turn — and the canvas is exactly what you're
|
||||
// meant to be watching. The request continues, the exchange is persisted
|
||||
// server-side, and coming back to this tab shows it. Only Stop aborts, and
|
||||
// even that only stops us READING: the turn keeps running server-side, which
|
||||
// is why its work still lands in History either way.
|
||||
|
||||
// Follow the conversation as it grows, including mid-turn as steps arrive.
|
||||
useEffect(() => {
|
||||
bottom.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })
|
||||
}, [history.data, pending])
|
||||
|
||||
const send = () => {
|
||||
const message = input.trim()
|
||||
if (!message || pending) return
|
||||
setInput('')
|
||||
setError(null)
|
||||
setWarning(null)
|
||||
setPending({ message, steps: [] })
|
||||
|
||||
const controller = new AbortController()
|
||||
abort.current = controller
|
||||
|
||||
void streamChat(
|
||||
gardenId,
|
||||
message,
|
||||
{
|
||||
onStep: (step) => {
|
||||
setPending((p) => (p ? { ...p, steps: [...p.steps, step] } : p))
|
||||
// The canvas updating under the conversation is the whole point of
|
||||
// putting the chat here, so refresh it as each step lands — but only
|
||||
// it: nothing else can have changed until the turn commits.
|
||||
refresh.canvas()
|
||||
},
|
||||
onDone: (turn: AgentTurn) => {
|
||||
setPending(null)
|
||||
refresh.everything()
|
||||
if (turn.truncated) {
|
||||
setError('That turned into more steps than I should take at once — check what changed before continuing.')
|
||||
}
|
||||
},
|
||||
onWarning: setWarning,
|
||||
onError: (message) => {
|
||||
setPending(null)
|
||||
setError(message)
|
||||
// Something may still have landed before it failed.
|
||||
refresh.everything()
|
||||
},
|
||||
},
|
||||
controller.signal,
|
||||
)
|
||||
}
|
||||
|
||||
const messages = history.data ?? []
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-3">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h2 className="text-sm font-semibold text-fg">Assistant</h2>
|
||||
{messages.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
clear.mutate(undefined, {
|
||||
onError: (err) => setError(errorMessage(err, "Couldn't clear the conversation.")),
|
||||
})
|
||||
}
|
||||
disabled={clear.isPending}
|
||||
className="rounded px-1.5 py-0.5 text-xs text-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
|
||||
>
|
||||
Start over
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!canEdit && (
|
||||
<p className="rounded-md bg-border/40 px-2 py-1 text-xs text-muted">
|
||||
You can only view this garden, so the assistant can't change anything in it.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
|
||||
{history.isPending && <p className="text-sm text-muted">Loading the conversation…</p>}
|
||||
{/* A failed load rendering as an empty thread would look like the
|
||||
conversation had been lost, which is a much worse thing to believe. */}
|
||||
{history.isError && (
|
||||
<Alert>{errorMessage(history.error, "Couldn't load the conversation.")}</Alert>
|
||||
)}
|
||||
|
||||
{history.isSuccess && messages.length === 0 && !pending && (
|
||||
<p className="text-sm text-muted">
|
||||
Ask for what you want and it'll do it — “change the garlic bed to cucumbers this year”, “fill the
|
||||
north half of the west bed with beans”, “what's in here?”. Everything it does lands as one change you
|
||||
can undo.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{messages.map((m) => (
|
||||
<Bubble key={m.id} role={m.role} body={m.body}>
|
||||
{/* Undo on the turn itself, so the common case never involves
|
||||
opening the History panel. Same hook #49 uses, not a second
|
||||
implementation. */}
|
||||
{m.role === 'assistant' && m.changeSetId != null && canEdit && (
|
||||
<UndoButton changeSet={{ id: m.changeSetId }} undo={undo} className="mt-1 items-start" />
|
||||
)}
|
||||
</Bubble>
|
||||
))}
|
||||
|
||||
{pending && (
|
||||
<>
|
||||
<Bubble role="user" body={pending.message} />
|
||||
<div className="rounded-lg border border-border px-2.5 py-2 text-sm">
|
||||
<ol className="flex flex-col gap-0.5">
|
||||
{pending.steps.map((s) => (
|
||||
<li key={s.index} className="text-xs text-muted">
|
||||
{describeStep(s)}…
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<p className="mt-1 flex items-center gap-1.5 text-xs text-muted">
|
||||
<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
|
||||
{pending.steps.length === 0 ? 'Thinking…' : 'Working…'}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{warning && <Alert tone="info">{warning}</Alert>}
|
||||
{error && <Alert>{error}</Alert>}
|
||||
<div ref={bottom} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 border-t border-border pt-2">
|
||||
<TextArea
|
||||
label="Message"
|
||||
name="agentMessage"
|
||||
rows={2}
|
||||
placeholder="Change the garlic bed to cucumbers this year"
|
||||
value={input}
|
||||
disabled={!!pending}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
// Enter sends, Shift+Enter breaks the line — the convention every
|
||||
// chat box uses, and typing a newline by accident mid-thought is a
|
||||
// worse failure than the reverse.
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
send()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
{pending && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="px-2 py-1 text-xs"
|
||||
onClick={() => {
|
||||
abort.current?.abort()
|
||||
setPending(null)
|
||||
refresh.everything()
|
||||
}}
|
||||
>
|
||||
Stop
|
||||
</Button>
|
||||
)}
|
||||
<Button className="px-3 py-1.5 text-sm" disabled={!!pending || input.trim() === ''} onClick={send}>
|
||||
{pending ? 'Working…' : 'Send'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Bubble({
|
||||
role,
|
||||
body,
|
||||
children,
|
||||
}: {
|
||||
role: 'user' | 'assistant'
|
||||
body: string
|
||||
children?: ReactNode
|
||||
}) {
|
||||
const mine = role === 'user'
|
||||
return (
|
||||
<div className={cn('flex flex-col', mine ? 'items-end' : 'items-start')}>
|
||||
<div
|
||||
className={cn(
|
||||
'max-w-[90%] whitespace-pre-wrap rounded-lg px-2.5 py-2 text-sm',
|
||||
mine ? 'bg-accent/15 text-fg' : 'border border-border text-fg',
|
||||
)}
|
||||
>
|
||||
{body}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user