feat(coding): complete PI conversation UI
This commit is contained in:
147
src/pages/Chat/CodingInteractionPanel.tsx
Normal file
147
src/pages/Chat/CodingInteractionPanel.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
import { useState } from 'react';
|
||||
import { Check, CircleHelp, LoaderCircle, X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { respondCodingConversationInteraction } from '@/lib/coding-conversations';
|
||||
import type {
|
||||
ConversationInteraction,
|
||||
ConversationInteractionResponse,
|
||||
} from '@/types/coding-conversation';
|
||||
|
||||
function settledLabel(status: ConversationInteraction['status']): string {
|
||||
if (status === 'answered') return '已回答';
|
||||
if (status === 'cancelled') return '已取消';
|
||||
if (status === 'rejected') return '已失效';
|
||||
return '等待回答';
|
||||
}
|
||||
|
||||
export function CodingInteractionPanel({
|
||||
conversationId,
|
||||
interactions,
|
||||
onSettled,
|
||||
}: {
|
||||
conversationId: string;
|
||||
interactions: ConversationInteraction[];
|
||||
onSettled?(): Promise<void> | void;
|
||||
}) {
|
||||
const [values, setValues] = useState<Record<string, string>>({});
|
||||
const [busyId, setBusyId] = useState<string | null>(null);
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
if (interactions.length === 0) return null;
|
||||
|
||||
const respond = (response: ConversationInteractionResponse) => {
|
||||
if (busyId) return;
|
||||
setBusyId(response.interactionId);
|
||||
setErrors((current) => {
|
||||
const next = { ...current };
|
||||
delete next[response.interactionId];
|
||||
return next;
|
||||
});
|
||||
void respondCodingConversationInteraction(conversationId, response)
|
||||
.then(() => onSettled?.())
|
||||
.catch((error) => {
|
||||
setErrors((current) => ({
|
||||
...current,
|
||||
[response.interactionId]: `${error instanceof Error ? error.message : String(error)}。请求可能已失效，请刷新对话。`,
|
||||
}));
|
||||
})
|
||||
.finally(() => setBusyId((current) => current === response.interactionId ? null : current));
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
className="mx-auto w-[calc(100%_-_2rem)] max-w-[46rem] shrink-0 space-y-2 pt-2"
|
||||
aria-label="等待回答的 Agent 交互"
|
||||
data-testid="coding-interactions"
|
||||
>
|
||||
{interactions.map((interaction) => {
|
||||
const pending = interaction.status === 'pending';
|
||||
const busy = busyId === interaction.id;
|
||||
const value = values[interaction.id] ?? '';
|
||||
return (
|
||||
<div key={interaction.id} className="rounded-2xl bg-brand-soft/70 p-3 shadow-[0_0_0_1px_rgba(0,0,0,0.06)]">
|
||||
<div className="flex items-start gap-2">
|
||||
<CircleHelp className="mt-0.5 h-4 w-4 shrink-0 text-brand" aria-hidden="true" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex gap-2">
|
||||
<p className="min-w-0 flex-1 text-sm font-semibold">{interaction.title}</p>
|
||||
<span className="text-xs text-muted-foreground">{settledLabel(interaction.status)}</span>
|
||||
</div>
|
||||
{interaction.message && <p className="mt-1 text-pretty text-xs leading-5 text-muted-foreground">{interaction.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{pending && interaction.kind === 'select' && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{(interaction.options ?? []).map((option) => (
|
||||
<Button
|
||||
key={option.id}
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="h-auto min-h-10 rounded-xl px-3 py-2 text-left"
|
||||
disabled={Boolean(busyId)}
|
||||
title={option.description}
|
||||
onClick={() => respond({ interactionId: interaction.id, optionId: option.id })}
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pending && interaction.kind === 'confirm' && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<Button type="button" className="min-h-10 rounded-xl" disabled={Boolean(busyId)} onClick={() => respond({ interactionId: interaction.id, confirmed: true })}>
|
||||
<Check className="mr-1.5 h-4 w-4" aria-hidden="true" />确认
|
||||
</Button>
|
||||
<Button type="button" variant="outline" className="min-h-10 rounded-xl" disabled={Boolean(busyId)} onClick={() => respond({ interactionId: interaction.id, confirmed: false })}>
|
||||
不确认
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pending && (interaction.kind === 'input' || interaction.kind === 'editor') && (
|
||||
<div className="mt-3 space-y-2">
|
||||
{interaction.kind === 'editor'
|
||||
? (
|
||||
<Textarea
|
||||
value={value}
|
||||
rows={5}
|
||||
disabled={Boolean(busyId)}
|
||||
aria-label={`${interaction.title}的回答`}
|
||||
className="resize-y rounded-xl bg-background"
|
||||
onChange={(event) => setValues((current) => ({ ...current, [interaction.id]: event.target.value }))}
|
||||
/>
|
||||
)
|
||||
: (
|
||||
<Input
|
||||
value={value}
|
||||
disabled={Boolean(busyId)}
|
||||
aria-label={`${interaction.title}的回答`}
|
||||
className="rounded-xl bg-background"
|
||||
onChange={(event) => setValues((current) => ({ ...current, [interaction.id]: event.target.value }))}
|
||||
/>
|
||||
)}
|
||||
<Button type="button" className="min-h-10 rounded-xl" disabled={Boolean(busyId) || !value.trim()} onClick={() => respond({ interactionId: interaction.id, value })}>
|
||||
提交回答
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pending && (
|
||||
<div className="mt-2 flex items-center justify-between gap-2">
|
||||
<Button type="button" variant="ghost" className="min-h-10 rounded-xl px-3 text-muted-foreground" disabled={Boolean(busyId)} onClick={() => respond({ interactionId: interaction.id, cancelled: true })}>
|
||||
<X className="mr-1.5 h-4 w-4" aria-hidden="true" />取消请求
|
||||
</Button>
|
||||
{busy && <LoaderCircle className="h-4 w-4 animate-spin text-muted-foreground" aria-label="正在提交回答" />}
|
||||
</div>
|
||||
)}
|
||||
{errors[interaction.id] && <p className="mt-2 text-xs text-destructive" role="alert">{errors[interaction.id]}</p>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user