Implement CTF Challenge Interface with Code Terminal and AI Assistant

[Tinglv-Violet]

Overview

Create a modern CTF challenge interface using Ant Design components with a split layout:

Left Side - Code Terminal

• Code editor/viewer with syntax highlighting
• Dark theme consistent with CTF aesthetics
• Full-height terminal display

Right Side - AI Assistant Panel

• Chat interface with multiple function buttons
• Support for rendering:
  • Mathematics (KaTeX)
  • Code blocks
  • Tables
  • Markdown
  • Mermaid diagrams

Feature Buttons

1. Challenge Data Button

   • Display problem information
   • Show topic tags
   • Solution statistics
   • Average completion time

2. AI Assistant Button with sub-features:

   • File upload capability
   • Web search functionality
   • Deep thinking mode
   • MCP problem-solving (Priority implementation)

Technical Requirements

• Implement using Ant Design components
• Connect MCP solving functionality to port 23333
• Use blue-black color scheme for CTF theme
• Ensure responsive layout
• Support asynchronous rendering of special content

MCP Integration Details

• Port the existing MCP functionality from the HTML implementation
• Maintain SSE connection handling
• Preserve conversation history
• Support markdown and special content rendering

Color Scheme

Primary colors:

• Primary Blue: #1890ff
• Dark Background: #141414
• Secondary Blue: #096dd9
• Text Color: #ffffff / rgba(255, 255, 255, 0.85)

Tasks

• Set up basic layout with Ant Design
• Implement code terminal with syntax highlighting
• Create chat interface with message rendering
• Add function buttons with proper styling
• Port MCP functionality to new component
• Implement special content rendering (math, code, etc.)
• Add conversation history management
• Style theme according to CTF aesthetics