Files
CodePilot/src/components/chat/MessageList.tsx
T
7418andClaude Opus 4.6 f861b3fca1 feat: slash command popover redesign, import dialog scroll fix, and new logo
- 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>
2026-02-09 16:57:49 +08:00

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>
);
}