ant-design / ant-design/x

Implement CTF Challenge Interface with Code Terminal and AI Assistant

Open
#987 0 comments 1 reaction 0 assignees View on GitHub
enhancement
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

![image1](image1)

### 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.