web(coder UI): ChatInput migration + Thinking render + DiffPanel route fix
Bundles in-progress working-tree UI work not authored this session (CoderPane ChatInput migration, AgentComposerBar/CoderMessageList/tab-bar/sidebar/pane refinements, provider icons) with this session's changes to the same files: MessageBubble renders a collapsible 'Thinking' block from reasoning_text/reasoning_parts (surfacing ACP agent_thought_chunk + native reasoning), and the DiffPanel approve/reject calls are repointed to the real /api/coder/pending/:id/apply and /reject routes (the old /sessions/:id/pending/:id/approve|reject paths did not exist). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,185 +1,27 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Archive, MessageSquare, Send, ChevronDown, ChevronRight, RotateCcw, Trash2 } from 'lucide-react';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import type { Chat } from '@/api/types';
|
||||
import { api } from '@/api/client';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ChatInput } from '@/components/ChatInput';
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuTrigger,
|
||||
} from '@/components/ui/context-menu';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from '@/components/ui/dialog';
|
||||
import { formatTokens } from '@/lib/format';
|
||||
|
||||
interface Props {
|
||||
sessionId: string;
|
||||
projectId: string;
|
||||
chats: Chat[];
|
||||
onOpenChat: (chatId: string) => void;
|
||||
sessionId: string;
|
||||
agentId?: string | null;
|
||||
onAgentChange?: (agentId: string | null) => void | Promise<void>;
|
||||
onSend: (content: string) => void;
|
||||
/** Create a chat and return its id. Used by slash-command handler. */
|
||||
createChat: () => Promise<{ id: string }>;
|
||||
onReopenChat: (chatId: string) => Promise<void>;
|
||||
onArchiveChat: (chatId: string) => Promise<void>;
|
||||
onRenameChat: (chatId: string, name: string) => Promise<void>;
|
||||
onDeleteChat: (chatId: string) => Promise<void>;
|
||||
}
|
||||
|
||||
function relTime(iso: string): string {
|
||||
const now = Date.now();
|
||||
const t = Date.parse(iso);
|
||||
if (Number.isNaN(t)) return '';
|
||||
const sec = Math.max(0, Math.floor((now - t) / 1000));
|
||||
if (sec < 60) return `${sec}s ago`;
|
||||
const min = Math.floor(sec / 60);
|
||||
if (min < 60) return `${min}m ago`;
|
||||
const hr = Math.floor(min / 60);
|
||||
if (hr < 24) return `${hr}h ago`;
|
||||
const day = Math.floor(hr / 24);
|
||||
return `${day}d ago`;
|
||||
}
|
||||
|
||||
interface ChatRowProps {
|
||||
chat: Chat;
|
||||
onClick: () => void;
|
||||
dimmed?: boolean;
|
||||
trailing?: React.ReactNode;
|
||||
actions?: React.ReactNode;
|
||||
renamingId: string | null;
|
||||
renameValue: string;
|
||||
setRenameValue: (s: string) => void;
|
||||
onFinishRename: () => void;
|
||||
onCancelRename: () => void;
|
||||
onContextStartRename: () => void;
|
||||
onContextArchive: () => void;
|
||||
onContextDelete: () => void;
|
||||
showContextMenu: boolean;
|
||||
}
|
||||
|
||||
function ChatRow({
|
||||
chat,
|
||||
onClick,
|
||||
dimmed,
|
||||
trailing,
|
||||
actions,
|
||||
renamingId,
|
||||
renameValue,
|
||||
setRenameValue,
|
||||
onFinishRename,
|
||||
onCancelRename,
|
||||
onContextStartRename,
|
||||
onContextArchive,
|
||||
onContextDelete,
|
||||
showContextMenu,
|
||||
}: ChatRowProps) {
|
||||
const meta: string[] = [relTime(chat.updated_at)];
|
||||
if (chat.message_count !== undefined && chat.message_count > 0) {
|
||||
meta.push(`${chat.message_count} msg`);
|
||||
}
|
||||
const tokens = formatTokens(chat.effective_context_tokens);
|
||||
if (tokens) meta.push(tokens);
|
||||
const preview = chat.last_message_preview;
|
||||
const isRenaming = renamingId === chat.id;
|
||||
|
||||
const inner = (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="w-full flex flex-col gap-0.5 px-3 py-2 hover:bg-muted/50 text-left"
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<MessageSquare className={`size-3.5 shrink-0 ${dimmed ? 'opacity-40' : 'opacity-70'}`} />
|
||||
{isRenaming ? (
|
||||
<input
|
||||
autoFocus
|
||||
value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
onBlur={() => onFinishRename()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') onFinishRename();
|
||||
if (e.key === 'Escape') onCancelRename();
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="bg-transparent border-b border-border text-sm outline-none flex-1 min-w-0"
|
||||
/>
|
||||
) : (
|
||||
<span className={`truncate text-sm flex-1 ${dimmed ? 'text-muted-foreground' : ''}`}>
|
||||
{chat.name ?? 'New chat'}
|
||||
</span>
|
||||
)}
|
||||
{trailing && (
|
||||
<span className="text-xs text-muted-foreground shrink-0">{trailing}</span>
|
||||
)}
|
||||
{actions && (
|
||||
<div className="flex items-center gap-0.5 shrink-0">{actions}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="ml-5 text-xs text-muted-foreground tabular-nums">
|
||||
{meta.join(' · ')}
|
||||
</div>
|
||||
{preview && (
|
||||
<div className="ml-5 text-xs italic text-muted-foreground truncate">
|
||||
{preview}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
if (!showContextMenu) return inner;
|
||||
|
||||
return (
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>{inner}</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem onSelect={onClick}>Open</ContextMenuItem>
|
||||
<ContextMenuItem onSelect={onContextStartRename}>Rename</ContextMenuItem>
|
||||
<ContextMenuItem onSelect={onContextArchive}>Archive</ContextMenuItem>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem variant="destructive" onSelect={onContextDelete}>
|
||||
Delete
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
);
|
||||
}
|
||||
|
||||
export function SessionLandingPage({
|
||||
chats,
|
||||
onOpenChat,
|
||||
onSend,
|
||||
projectId,
|
||||
sessionId,
|
||||
agentId,
|
||||
onAgentChange,
|
||||
onSend,
|
||||
createChat,
|
||||
onReopenChat,
|
||||
onArchiveChat,
|
||||
onRenameChat,
|
||||
onDeleteChat,
|
||||
}: Props) {
|
||||
const [composerValue, setComposerValue] = useState('');
|
||||
const [chatId, setChatId] = useState<string | null>(null);
|
||||
const [showArchived, setShowArchived] = useState(false);
|
||||
const [renamingId, setRenamingId] = useState<string | null>(null);
|
||||
const [renameValue, setRenameValue] = useState('');
|
||||
const [archiveConfirm, setArchiveConfirm] = useState<Chat | null>(null);
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<Chat | null>(null);
|
||||
|
||||
const openChats = chats
|
||||
.filter((c) => c.status === 'open')
|
||||
.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
|
||||
const archivedChats = chats
|
||||
.filter((c) => c.status === 'archived')
|
||||
.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
|
||||
|
||||
// Create a chat lazily on first send or slash command.
|
||||
const ensureChat = useCallback(async (): Promise<string> => {
|
||||
if (chatId) return chatId;
|
||||
try {
|
||||
@@ -192,207 +34,46 @@ export function SessionLandingPage({
|
||||
}
|
||||
}, [chatId, createChat]);
|
||||
|
||||
async function handleSend() {
|
||||
const text = composerValue.trim();
|
||||
const handleSend = useCallback(async (content: string) => {
|
||||
const text = content.trim();
|
||||
if (!text) return;
|
||||
try {
|
||||
const cid = await ensureChat();
|
||||
await ensureChat();
|
||||
onSend(text);
|
||||
setComposerValue('');
|
||||
} catch {
|
||||
// Error already surfaced via toast.
|
||||
}
|
||||
}
|
||||
}, [ensureChat, onSend]);
|
||||
|
||||
// v2.3: slash-command dispatch on landing page. Creates a chat first if
|
||||
// one doesn't exist, then invokes the skill on that chat.
|
||||
const handleSlashCommand = useCallback(async (skillName: string, userMessage: string) => {
|
||||
try {
|
||||
const cid = await ensureChat();
|
||||
await api.chats.skillInvoke(cid, skillName, userMessage.length > 0 ? userMessage : null);
|
||||
setComposerValue('');
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : `/${skillName} failed`);
|
||||
}
|
||||
}, [ensureChat]);
|
||||
|
||||
function startRename(chat: Chat) {
|
||||
setRenamingId(chat.id);
|
||||
setRenameValue(chat.name ?? '');
|
||||
}
|
||||
|
||||
async function finishRename() {
|
||||
if (renamingId && renameValue.trim()) {
|
||||
await onRenameChat(renamingId, renameValue.trim());
|
||||
}
|
||||
setRenamingId(null);
|
||||
}
|
||||
|
||||
// TODO: Landing page chat counts are a snapshot at mount. New messages in
|
||||
// visible chats won't update the per-row stats until next mount/navigation.
|
||||
return (
|
||||
<div className="flex flex-col h-full min-h-0">
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
|
||||
{openChats.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-xs font-medium text-muted-foreground mb-2">Open chats</h3>
|
||||
<ul className="divide-y rounded-md border">
|
||||
{openChats.map((chat) => (
|
||||
<li key={chat.id}>
|
||||
<ChatRow
|
||||
chat={chat}
|
||||
onClick={() => onOpenChat(chat.id)}
|
||||
renamingId={renamingId}
|
||||
renameValue={renameValue}
|
||||
setRenameValue={setRenameValue}
|
||||
onFinishRename={() => void finishRename()}
|
||||
onCancelRename={() => setRenamingId(null)}
|
||||
onContextStartRename={() => startRename(chat)}
|
||||
onContextArchive={() => setArchiveConfirm(chat)}
|
||||
onContextDelete={() => setDeleteConfirm(chat)}
|
||||
showContextMenu
|
||||
actions={
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label="Archive chat"
|
||||
title="Archive chat"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setArchiveConfirm(chat);
|
||||
}}
|
||||
>
|
||||
<Archive size={14} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label="Delete chat"
|
||||
title="Delete chat"
|
||||
className="text-destructive hover:text-destructive"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteConfirm(chat);
|
||||
}}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{archivedChats.length > 0 && (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowArchived(!showArchived)}
|
||||
className="flex items-center gap-1 text-xs font-medium text-muted-foreground mb-2 hover:text-foreground"
|
||||
>
|
||||
{showArchived ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||||
Archived chats ({archivedChats.length})
|
||||
</button>
|
||||
{showArchived && (
|
||||
<ul className="divide-y rounded-md border">
|
||||
{archivedChats.map((chat) => (
|
||||
<li key={chat.id}>
|
||||
<ChatRow
|
||||
chat={chat}
|
||||
onClick={() => void onReopenChat(chat.id)}
|
||||
dimmed
|
||||
trailing={<><RotateCcw size={10} className="inline mr-1" />Restore</>}
|
||||
renamingId={null}
|
||||
renameValue=""
|
||||
setRenameValue={() => {}}
|
||||
onFinishRename={() => {}}
|
||||
onCancelRename={() => {}}
|
||||
onContextStartRename={() => {}}
|
||||
onContextArchive={() => {}}
|
||||
onContextDelete={() => {}}
|
||||
showContextMenu={false}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{openChats.length === 0 && archivedChats.length === 0 && (
|
||||
<div className="text-sm text-muted-foreground py-8 text-center">
|
||||
No chats yet. Type below to start a conversation.
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 flex items-center justify-center px-6">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Send a message to start.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* v2.3: ChatInput with slash-command support replaces the bare Textarea.
|
||||
chatId is created lazily on first send/slash. */}
|
||||
<div className="border-t px-4 py-3 shrink-0">
|
||||
<ChatInput
|
||||
projectId={projectId}
|
||||
onSend={handleSend}
|
||||
onSlashCommand={handleSlashCommand}
|
||||
chatId={chatId ?? undefined}
|
||||
chatLabel={chatId ? undefined : 'Chat'}
|
||||
disabled={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Dialog open={archiveConfirm !== null} onOpenChange={(open) => { if (!open) setArchiveConfirm(null); }}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Archive chat?</DialogTitle>
|
||||
<DialogDescription>
|
||||
Moves {archiveConfirm ? `"${archiveConfirm.name ?? 'New chat'}"` : 'this chat'} to the Archived chats section. You can restore it any time.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex gap-2 justify-end pt-2">
|
||||
<Button variant="outline" onClick={() => setArchiveConfirm(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (archiveConfirm) void onArchiveChat(archiveConfirm.id);
|
||||
setArchiveConfirm(null);
|
||||
}}
|
||||
>
|
||||
Archive
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={deleteConfirm !== null} onOpenChange={(open) => { if (!open) setDeleteConfirm(null); }}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete chat?</DialogTitle>
|
||||
<DialogDescription>
|
||||
Permanently delete{' '}
|
||||
<span className="font-mono font-medium text-foreground">{deleteConfirm?.name || '(unnamed)'}</span>
|
||||
{' '}and all its messages. This cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex gap-2 justify-end pt-2">
|
||||
<Button variant="outline" onClick={() => setDeleteConfirm(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
if (deleteConfirm) void onDeleteChat(deleteConfirm.id);
|
||||
setDeleteConfirm(null);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<ChatInput
|
||||
disabled={false}
|
||||
projectId={projectId}
|
||||
sessionId={sessionId}
|
||||
agentId={agentId ?? null}
|
||||
onAgentChange={onAgentChange}
|
||||
onSend={handleSend}
|
||||
onSlashCommand={handleSlashCommand}
|
||||
chatId={chatId ?? undefined}
|
||||
chatLabel="Chat"
|
||||
messages={[]}
|
||||
modelContextLimit={null}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user