\\n {type === 'annotation' &&
;\\n }, [toggleSideBar]);\\n\\n const renderSideBarBody = useCallback((content) => {\\n const { type, value = {} } = content;\\n if (type === 'annotation') {\\n return References
}\\n {type === 'resource' && Product List
}\\n } style={{ padding: '0px', width: 24, height: 24 }} />\\n \\n {value.map((item, index) => (
;\\n } else if (type === 'resource') {\\n return \\n \\n 
\\n {item.title}\\n \\n {item.detail} \\n
))}\\n \\n
;\\n }\\n return \\n
\\n \\n\\n
;\\n }, []);\\n\\n const customRender = {\\n \\\"resource\\\": (item, message) => {\\n return {\\n changeSideBarContent({\\n type: 'resource',\\n value: item\\n });\\n }}\\n >\\n
;\\n },\\n };\\n\\n return (\\n \\n
\\n );\\n}\\n\\n\\nconst defaultMessages = [{\\n id: '1',\\n role: 'user',\\n content: 'I want to develop a chat application for a multi-agent scenario. Can you help me design it?',\\n status: 'completed',\\n}, {\\n id: '2',\\n role: 'assistant',\\n name: 'PM',\\n content: [{\\n type: 'message',\\n content: [{\\n type: 'input_text',\\n text: 'Received. To ensure the feasibility of the solution, I will first clarify the goals and scope:\\\\n\\\\n- Goal: Support multi-agent collaborative replies, where users can choose an agent or the system can automatically assign one.\\\\n- MVP Features:\\\\n 1) Basic conversation (text/image/file)\\\\n 2) Agent identification and avatar\\\\n 3) Input in progress and streaming output\\\\n 4) Display of cited sources and tool results\\\\n- Constraints: Focus on single-session implementation first, without cloud persistence; prioritize mobile adaptation.\\\\n\\\\nNext, I will organize the PRD key points and share them with the design and front-end teams.',\\n annotations: [\\n {\\n title: 'Semi Design',\\n url: 'https://semi.design/en-US/start/getting-started',\\n detail: 'Semi Design is a design system designed, developed, and maintained by the Douyin front-end team and the MED product design team. As a comprehensive, user-friendly, and high-quality modern application UI solution, Semi Design is derived from the complex scenarios across ByteDance various business lines. It currently supports nearly a thousand platform products and serves over 100,000 internal and external users.',\\n logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n },\\n {\\n title: 'Semi DSM',\\n url: 'https://semi.design/en-US/start/getting-started',\\n detail: 'Semi DSM supports global and component-level style customization and maintains synchronization between Figma and online code. Using DSM, Semi Design can be adapted to Any Design.',\\n logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n },\\n {\\n title: 'Semi D2C',\\n url: 'https://semi.design/en-US/start/getting-started',\\n detail: 'Semi D2C offers out-of-the-box design-to-code conversion: it supports one-click recognition of layer layouts and design system components in Figma pages, reproducing design drafts pixel-perfectly and translating them into React JSX and CSS code. Furthermore, it provides rich extensibility, allowing teams to quickly create their own custom design and development collaboration tools based on a custom plugin system.',\\n logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n }\\n ],\\n }],\\n }],\\n}, {\\n id: '3',\\n role: 'assistant',\\n name: 'PM',\\n content: [{\\n type: 'message',\\n content: [{\\n type: 'input_text',\\n text: 'The generated PRD is as follows. The designer will first use this summary to create the information architecture and key pages.',\\n }, {\\n type: 'resource',\\n name: 'PRD.doc',\\n size: '100KB',\\n }]\\n }],\\n}, {\\n id: '4',\\n role: 'assistant',\\n name: 'UI',\\n content: [{\\n id: \\\"rs_02175871288540800000000000000000000ffffac1598778c9aa5\\\",\\n type: \\\"reasoning\\\",\\n summary: [\\n {\\n \\\"type\\\": \\\"summary_text\\\",\\n \\\"text\\\": \\\"\\\\nBased on the PRD provided by the product manager, I need to draw the key pages.\\\"\\n }\\n ],\\n status: \\\"completed\\\"\\n }, {\\n type: 'function_call',\\n name: 'paint_key_pages',\\n arguments: \\\"{\\\\\\\"file\\\\\\\":\\\\\\\"PRD\\\\\\\"}\\\",\\n status: 'completed',\\n }, {\\n type: 'message',\\n content: [{\\n \\\"type\\\": \\\"output_text\\\",\\n \\\"text\\\": `The initial design draft is as follows:\\\\n\\\\n- Information Architecture: Dialogue Page (History List | Message Flow | Tool Card Area)\\\\n- Visuals: The left side displays Agent avatars and name tags, with color blocks distinguishing roles\\\\n- Interaction:\\\\n- Input area supports quick switching and suggestion prompts using @Agent\\\\n- During streaming output, a typing bubble and progress placeholder are displayed\\\\n- Tool results are inserted in the form of cards/step bars, which can be expanded for details and copied\\\\n\\\\nI'll start with a low-fidelity wireframe; high-fidelity and animation details will be added later.`,\\n }],\\n status: \\\"completed\\\"\\n }],\\n status: 'completed',\\n}, {\\n id: '5',\\n role: 'assistant',\\n name: 'FE',\\n content: `Technical Solution Suggestions:\\\\n\\\\n- Technology Stack: React + Semi UI, backend using WebSocket or SSE to support streaming responses\\\\n- Data Model: Messages include fields such as id, role, name, content, status, and references\\\\n- Component Splitting: AIChatInput + AIChatDialogue; content rendered using Markdown, supporting image and file clicks\\\\n- Performance: Virtual list and scroll-to-bottom; long text chunked rendering; lazy loading of images\\\\n- Observability: Message tracking latency, error rate, and tool call time\\\\n\\\\nIf confirmed, I can first build the page skeleton and integrate mock data for integration testing.`,\\n}];\\n\\nconst roleConfig = {\\n user: {\\n name: 'User',\\n avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/22606991eh7uhfups/img/user.png'\\n },\\n assistant: new Map([\\n ['PM', {\\n name: 'Product Manager',\\n avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/22606991eh7uhfups/PM.png'\\n }],\\n ['UI', {\\n name: 'Designer',\\n avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/22606991eh7uhfups/UI.png'\\n }],\\n ['FE', {\\n name: 'Front-end programmer',\\n avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/22606991eh7uhfups/FE.png'\\n }],\\n ]),\\n};\\n\\nconst uploadProps = {\\n action: \\\"https://api.semi.design/upload\\\"\\n};\\n\\nconst modelOptions = [\\n {\\n value: 'GPT-5',\\n label: 'GPT-5',\\n type: 'gpt',\\n },\\n {\\n value: 'GPT-4o',\\n label: 'GPT-4o',\\n type: 'gpt',\\n },\\n {\\n value: 'Claude 3.5 Sonnet',\\n label: 'Claude 3.5 Sonnet',\\n type: 'claude',\\n },\\n];\\n\\nconst mcpOptions = [\\n {\\n icon: \\n programmer\\uFF0CPlease help me implementa chat application in a Multi-Agent scenario '}\\n generating={generating}\\n references={references}\\n uploadProps={uploadProps}\\n renderConfigureArea={renderLeftMenu} \\n onContentChange={onContentChange}\\n onMessageSend={onMessageSend}\\n onStopGenerate={() => setGenerating(false)}\\n onReferenceDelete={handleReferenceDelete}\\n />\\n
\\n {sideBarVisible && \\n {renderSideBarTitle(sideBarContent)}\\n {renderSideBarBody(sideBarContent)}\\n
}\\n