Multi-Agent Debate Simulation

\n {/* Setup Panel */}\n {!isDebateActive && (\n

Setup Debate

\n\n

\n \n Number of Agents:\n \n setAgentCount(parseInt(e.target.value))}\n className=\"w-full\"\n />\n

{agentCount}

\n\n

\n \n Select a Topic:\n \n

\n {SAMPLE_TOPICS.map((topic) => (\n setSelectedTopic(topic)}\n className={`p-2 border rounded-md text-left hover:bg-indigo-50 transition ${\n selectedTopic?.id === topic.id\n ? \"border-indigo-500 bg-indigo-50\"\n : \"border-gray-300\"\n }`}\n >\n

{topic.title}

\n {topic.description}\n

\n \n ))}\n

\n\n

\n OR\n

\n\n

\n \n Custom Topic:\n \n setCustomTopic(e.target.value)}\n placeholder=\"Enter a debate topic\"\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n />\n

\n\n

\n \n Description:\n \n setCustomDescription(e.target.value)}\n placeholder=\"Describe the topic in more detail\"\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n rows={3}\n />\n

\n\n \n {isSettingUp ? \"Setting up debate...\" : \"Start Debate\"}\n \n

\n )}\n\n {/* Debate Area */}\n {isDebateActive && (\n

\n {selectedTopic?.title || customTopic}\n

\n {selectedTopic?.description || customDescription}\n

\n \n New Round\n \n \n Summarize\n \n \n Reset\n \n

\n\n {/* Message Area */}\n

\n {messages.map((message) => {\n const agent = getAgent(message.agentId);\n return (\n \n \n

\n {agent?.avatar}\n \n {agent?.name}\n \n {message.handRaised && (\n \n ✋ Hand raised\n \n )}\n

{message.content}

\n );\n })}\n\n {/* Show thinking indicator for current speaker */}\n {currentSpeaker && (\n

\n \n

\n \n {getAgent(currentSpeaker)?.avatar}\n \n \n {getAgent(currentSpeaker)?.name}\n \n \n Thinking...\n \n

\n \n \n \n \n \n

Participants

\n {agents.map((agent) => (\n \n

\n {agent.avatar}\n \n {agent.id}\n \n {agent.handRaised && ✋}\n {agent.thinking && (\n \n 💭\n \n )}\n

\n\n \n {agent.perspective}\n