Implement CTF Challenge Interface with Code Terminal and AI Assistant
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.2k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 2
Description
## 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
Contributor guide
No contributing guide indexed for this repository
Research direction
Locate the existing HTML MCP implementation and trace its SSE connection and conversation-history handling first. Build the Ant Design split interface around the code terminal and assistant panel, then verify port 23333 connectivity, special-content rendering, responsive behavior, and the requested feature buttons.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- markdown, react, typescript
- Domain
- ai, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100