- Slash command popover: add search box, group commands/skills with section headers, assign unique icons per built-in command, remove Built-in badge, show source labels for skills, deduplicate API skills with built-in names - Import CLI Session dialog: fix list overflow and enable scrolling by replacing Radix ScrollArea with native overflow-y-auto - New chat empty state: replace BotIcon with custom CodePilotLogo SVG component supporting light/dark theme Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import type { Message, PermissionRequestEvent } from '@/types';
|
|
import {
|
|
Conversation,
|
|
ConversationContent,
|
|
ConversationScrollButton,
|
|
ConversationEmptyState,
|
|
} from '@/components/ai-elements/conversation';
|
|
import { MessageItem } from './MessageItem';
|
|
import { StreamingMessage } from './StreamingMessage';
|
|
import { CodePilotLogo } from './CodePilotLogo';
|
|
|
|
interface ToolUseInfo {
|
|
id: string;
|
|
name: string;
|
|
input: unknown;
|
|
}
|
|
|
|
interface ToolResultInfo {
|
|
tool_use_id: string;
|
|
content: string;
|
|
is_error?: boolean;
|
|
}
|
|
|
|
interface MessageListProps {
|
|
messages: Message[];
|
|
streamingContent: string;
|
|
isStreaming: boolean;
|
|
toolUses?: ToolUseInfo[];
|
|
toolResults?: ToolResultInfo[];
|
|
streamingToolOutput?: string;
|
|
statusText?: string;
|
|
pendingPermission?: PermissionRequestEvent | null;
|
|
onPermissionResponse?: (decision: 'allow' | 'allow_session' | 'deny') => void;
|
|
permissionResolved?: 'allow' | 'deny' | null;
|
|
}
|
|
|
|
export function MessageList({
|
|
messages,
|
|
streamingContent,
|
|
isStreaming,
|
|
toolUses = [],
|
|
toolResults = [],
|
|
streamingToolOutput,
|
|
statusText,
|
|
pendingPermission,
|
|
onPermissionResponse,
|
|
permissionResolved,
|
|
}: MessageListProps) {
|
|
if (messages.length === 0 && !isStreaming) {
|
|
return (
|
|
<div className="flex flex-1 items-center justify-center">
|
|
<ConversationEmptyState
|
|
title="Claude Chat"
|
|
description="Start a conversation with Claude. Ask questions, get help with code, or explore ideas."
|
|
icon={<CodePilotLogo className="h-16 w-16" />}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Conversation>
|
|
<ConversationContent className="mx-auto max-w-3xl px-4 py-6 gap-6">
|
|
{messages.map((message) => (
|
|
<MessageItem key={message.id} message={message} />
|
|
))}
|
|
|
|
{isStreaming && (
|
|
<StreamingMessage
|
|
content={streamingContent}
|
|
isStreaming={isStreaming}
|
|
toolUses={toolUses}
|
|
toolResults={toolResults}
|
|
streamingToolOutput={streamingToolOutput}
|
|
statusText={statusText}
|
|
pendingPermission={pendingPermission}
|
|
onPermissionResponse={onPermissionResponse}
|
|
permissionResolved={permissionResolved}
|
|
/>
|
|
)}
|
|
</ConversationContent>
|
|
<ConversationScrollButton />
|
|
</Conversation>
|
|
);
|
|
}
|