@tencent-rtc/mcp 1.2.9 → 1.3.1

package/resource/doc/chatuikit/react/workflow.md

@@ -0,0 +1,258 @@
+# React Chat TUIKit Code Generation Workflow Instructions
+
+## 📋 Purpose
+
+This document provides a **code generation blueprint** for implementing React Chat TUIKit core features, guiding the Agent to **prioritize real-time documentation** retrieved from tools.
+
+---
+
+## 🛑 Mandatory Execution Constraints (Guardrails)
+
+The Agent MUST strictly follow these rules when generating code:
+
+### 1. Documentation-Driven Integration
+- **MUST** strictly follow the `llm_code_generation_instructions_md` steps from tool results
+
+### 2. Silent Execution
+- **MUST** automatically install dependencies and start the project after all code generation is complete
+
+### 3. Zero External Configuration
+- **FORBIDDEN** to create any `config.js` or `.env` files
+- Credentials (SDKAppID, UserID, UserSig) **MUST** be directly injected into code variables
+
+### 4. Auto-Retrieve Authentication Credentials
+- **MUST** call `get_usersig` tool to obtain test credentials
+- **FORBIDDEN** to ask users to manually input credentials
+- UserID generation should be simple (e.g., `test001`), **AVOID** dynamic timestamps to prevent logic errors
+
+### 5. Default Active Conversation
+- Integration logic **MUST** include `setActiveConversation` call
+- **MUST** activate `C2Cadministrator` conversation by default
+
+### 6. React Version Constraint
+- When creating projects, React and React-DOM versions **MUST** be `18.2.0`
+- **FORBIDDEN** to use React 19
+
+---
+
+## 📦 TUIKit Version & Dependency Automation
+
+After generating code, the Agent **MUST** automatically execute the following dependency chain:
+
+### 1. Core Dependency Versions (Recommended)
+
+```json
+{
+  "react": "18.2.0",
+  "react-dom": "18.2.0",
+  "@tencentcloud/chat-uikit-react": "latest",
+  "@tencentcloud/call-uikit-react": "latest"
+}
+```
+
+### 2. Build Environment Patch (Vite/esbuild)
+
+If Vite project is detected, Agent **MUST** add patch configuration to `package.json` for esbuild-wasm compatibility:
+
+```json
+{
+  "overrides": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  },
+  "resolutions": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  }
+}
+```
+
+---
+
+## 🛠️ Integration Mode Selection (Goals)
+
+Based on user's `goals`, Agent **MUST** choose the corresponding execution path:
+
+### 1. Full-Featured Integration
+
+**Goal**: Implement a complete IM application similar to WeChat
+
+**Core Components**: 
+- `ConversationList` (conversation list)
+- `Chat` (chat container)
+- `ContactList` (contact list)
+- `Search` (cloud search)
+
+**Execution Reference**: 
+- Follow the `integration.md` instructions retrieved in real-time from tool results
+
+**Use Cases**:
+- Building standalone chat applications
+- Requiring complete conversation management, contacts, and group management features
+- Serving as core functional module of web applications
+
+---
+
+### 2. Chat-Only Integration
+
+**Goal**: Suitable for customer service, consultation, detail page private chat, and other pure conversation scenarios
+
+**Core Components**: 
+- `Chat` (chat container)
+- `MessageList` (message list)
+- `ChatHeader` (chat header)
+- `MessageInput` (input box)
+
+**Execution Reference**: 
+- Follow the `integration.md` instructions retrieved in real-time from tool results
+
+**Use Cases**:
+- Customer service scenarios (users click consultation button to enter chat page)
+- Medical online consultation (patient-doctor one-on-one communication)
+- Order detail page private chat (buyer-seller communication)
+- Private messaging in social applications
+
+**🔴 Default Excluded Features (Agent MUST Comply)**:
+
+When generating chat-only mode code, Agent **MUST exclude by default** the following features and components:
+
+1. **Default NO Sidebar Integration**
+   - DO NOT generate any sidebar-related code by default
+   - DO NOT import conversation list, contacts, or other sidebar components by default
+   - Chat window should be standalone, pure chat interface WITHOUT sidebar by default
+
+2. **Default NO ChatSetting Integration**
+   - DO NOT generate conversation settings or group management features by default
+   - DO NOT add settings button on ChatHeader right side by default
+   - DO NOT import ChatSetting component by default
+
+3. **Default NO In-Conversation Search**
+   - DO NOT add message search functionality by default
+   - DO NOT add search entry in chat interface by default
+   - DO NOT import Search component by default
+
+4. **Default NO ConversationList Integration**
+   - In chat-only mode, users specify conversation ID through external routes/parameters
+   - DO NOT need conversation switching functionality by default
+
+---
+
+**⚠️ Exception Handling When User Explicitly Requests**:
+
+If user **explicitly requests** adding extended features in chat-only mode, Agent **SHOULD allow and execute**:
+
+**Trigger Conditions** (any one satisfied):
+- User explicitly states: "need ChatSetting", "integrate chat settings", "add conversation settings feature"
+- User explicitly states: "need Search", "add search functionality", "integrate in-conversation search"
+- User explicitly states: "need Sidebar", "add sidebar"
+- User explicitly requests other extended features
+
+**Agent Execution Flow**:
+1. ✅ **Confirm User Needs**: Recognize that user actively requests extended features
+2. ✅ **Allow Integration**: On top of chat-only mode foundation, additionally integrate components requested by user
+3. ✅ **Stay Restrained**: Only add features explicitly requested by user, DO NOT arbitrarily expand other features
+4. ✅ **Follow Documentation**: Correctly integrate required components according to integration documentation
+
+**Example Scenarios**:
+
+**Scenario 1: User Explicitly Requests ChatSetting**
+```
+User: "Help me build a chat-only chat window with Vue, need to integrate ChatSetting functionality"
+Agent Execution:
+  ✅ Integrate core chat components (Chat, MessageList, ChatHeader, MessageInput)
+  ✅ Additionally integrate ChatSetting component (because user explicitly requested)
+  ❌ DO NOT integrate Sidebar, Search, or other features not requested by user
+```
+
+**Scenario 2: User Explicitly Requests In-Conversation Search**
+```
+User: "Build a chat-only chat window with message search functionality"
+Agent Execution:
+  ✅ Integrate core chat components
+  ✅ Additionally integrate Search component (because user explicitly requested)
+  ❌ DO NOT integrate Sidebar, ChatSetting, or other features not requested by user
+```
+
+**Scenario 3: User Does NOT Explicitly Request Extended Features**
+```
+User: "Help me build a chat-only chat window with Vue"
+Agent Execution:
+  ✅ Only integrate core chat components (Chat, MessageList, ChatHeader, MessageInput)
+  ❌ DO NOT integrate any extended features (Sidebar, ChatSetting, Search, etc.)
+```
+
+---
+
+**Agent Code Generation Constraints**:
+- ✅ **Generate by Default**: Only `Chat`, `MessageList`, `ChatHeader`, `MessageInput` core chat components
+- ✅ **When User Explicitly Requests**: On top of core components, additionally integrate extended features explicitly requested by user
+- ⚠️ **Judgment Criteria**: Check if user requirements contain explicit feature keywords (e.g., "ChatSetting", "search", "settings", etc.)
+- ✅ **Stay Restrained**: DO NOT arbitrarily add features not explicitly requested by user
+- ✅ **Stay Simple**: Core philosophy of chat-only mode is lightweight conversation interface
+
+---
+
+## 📞 Extended Feature: Audio/Video Calling (TUICallKit)
+
+If requirements include "calling" or "video" functionality, Agent **MUST** execute:
+
+### Component Mounting
+- Use React Portal to mount TUICallKit component to body
+
+### Interaction Injection
+
+**Inject call buttons in ChatHeader's right slot (ChatHeaderRight)**
+- Icons: phone, camera, etc.
+
+**Private Chat Logic**:
+- Initiate calls via `TUICallKitServer.calls`
+- UserID automatically extracted from current active conversation
+
+**Group Chat Logic**:
+- Need to integrate `UserPicker` component
+- Guide user to select group members before initiating call
+
+---
+
+## 🔄 Complete Automation Flow Summary
+
+```mermaid
+graph TD
+    A[Receive Goals Requirements] --> B[Call get_web_chat_uikit_integration to Fetch Documentation]
+    B --> C[Auto Execute npm install]
+    C --> D[Agent Generates Code Files Based on Real-Time Documentation]
+    D --> E[Call get_usersig to Obtain Test Credentials]
+    E --> F[Inject Credentials & Auto Activate C2Cadministrator Conversation]
+    F --> G{Check Call Requirements}
+    G -->|Yes| H[Integrate TUICallKit & Mounting Logic]
+    G -->|No| I[Skip]
+    H --> J[record_result & Prompt User to Run]
+    I --> J
+```
+
+---
+
+## ✍️ Agent Code Generation Example Instructions (Prompts)
+
+When Agent starts writing code, should follow this semantic logic:
+
+> "Following `full-featured` mode, generate a React TUIKit integration page for me. Please auto-configure `C2Cadministrator` default activation, and inject credentials obtained from `get_usersig` tool. FORBIDDEN to create config files."
+
+---
+
+## 📝 Key Points Summary
+
+| Category | Requirements |
+|----------|--------------|
+| **Documentation First** | Strictly follow latest documentation instructions from tool results |
+| **Silent Integration** | Start development server AFTER code generation is complete |
+| **Credential Injection** | Auto call `get_usersig`, directly inject into code |
+| **Default Conversation** | Auto activate `C2Cadministrator` conversation |
+| **Dependency Management** | Auto detect and install required dependency packages |
+| **React Version** | Use React 18.2.0, AVOID React 19 |
+
+---
+
+## 🔗 Related Tool References
+
+- `get_usersig` - Obtain test credentials
+- `get_web_chat_uikit_integration` - Retrieve real-time integration documentation
+- `record_result` - Record integration results