commit 589ed5980acb1ac7a89a3c548b13700855dbe668
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 00:19:48 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d22d8d9
--- /dev/null
+++ b/body.html
@@ -0,0 +1,71 @@
+<header>
+ <nav>
+ <div class="logo">ChatFlow</div>
+ <button class="mobile-menu" aria-label="Toggle menu">☰</button>
+ <ul class="nav-links">
+ <li><a href="#agents">Agents</a></li>
+ <li><a href="#api">API</a></li>
+ <li><a href="#docs">Docs</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Orchestrate Multiple AI Agents</h1>
+ <p>Seamlessly manage and interact with multiple LLM chat agents through a single API</p>
+ <button class="cta">Get Started</button>
+ </section>
+
+ <section id="agents" class="agents">
+ <h2>Active Agents</h2>
+ <div class="agent-grid">
+ <div class="agent-card">
+ <div class="agent-status online"></div>
+ <h3>Assistant Alpha</h3>
+ <p>General purpose AI assistant</p>
+ <button class="chat-btn">Chat Now</button>
+ </div>
+ <div class="agent-card">
+ <div class="agent-status online"></div>
+ <h3>Code Beta</h3>
+ <p>Programming specialist</p>
+ <button class="chat-btn">Chat Now</button>
+ </div>
+ <div class="agent-card">
+ <div class="agent-status idle"></div>
+ <h3>Data Delta</h3>
+ <p>Data analysis expert</p>
+ <button class="chat-btn">Chat Now</button>
+ </div>
+ </div>
+ </section>
+
+ <section id="chat" class="chat-interface">
+ <h2>Chat Interface</h2>
+ <div class="chat-container">
+ <div class="chat-messages"></div>
+ <div class="chat-input">
+ <textarea placeholder="Type your message..."></textarea>
+ <button class="send-btn">Send</button>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>ChatFlow</h4>
+ <p>Next-generation AI agent management</p>
+ </div>
+ <div class="footer-section">
+ <h4>Links</h4>
+ <ul>
+ <li><a href="#docs">Documentation</a></li>
+ <li><a href="#api">API Reference</a></li>
+ <li><a href="#pricing">Pricing</a></li>
+ </ul>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..4d23377
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://chatflow.scroll.pub
+metaTags
+editButton /edit.html
+title ChatFlow - Multiple LLM Chat Agents
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..7a2d800
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01RHn9JFRLi6UpcwvyBX7wUu",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a website for managing multiple LLM chat agents via API. Here's a memorable domain name and implementation:\n\n---domain---\nchatflow.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://chatflow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ChatFlow - Multiple LLM Chat Agents\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">ChatFlow</div>\n <button class=\"mobile-menu\" aria-label=\"Toggle menu\">☰</button>\n <ul class=\"nav-links\">\n <li><a href=\"#agents\">Agents</a></li>\n <li><a href=\"#api\">API</a></li>\n <li><a href=\"#docs\">Docs</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Orchestrate Multiple AI Agents</h1>\n <p>Seamlessly manage and interact with multiple LLM chat agents through a single API</p>\n <button class=\"cta\">Get Started</button>\n </section>\n\n <section id=\"agents\" class=\"agents\">\n <h2>Active Agents</h2>\n <div class=\"agent-grid\">\n <div class=\"agent-card\">\n <div class=\"agent-status online\"></div>\n <h3>Assistant Alpha</h3>\n <p>General purpose AI assistant</p>\n <button class=\"chat-btn\">Chat Now</button>\n </div>\n <div class=\"agent-card\">\n <div class=\"agent-status online\"></div>\n <h3>Code Beta</h3>\n <p>Programming specialist</p>\n <button class=\"chat-btn\">Chat Now</button>\n </div>\n <div class=\"agent-card\">\n <div class=\"agent-status idle\"></div>\n <h3>Data Delta</h3>\n <p>Data analysis expert</p>\n <button class=\"chat-btn\">Chat Now</button>\n </div>\n </div>\n </section>\n\n <section id=\"chat\" class=\"chat-interface\">\n <h2>Chat Interface</h2>\n <div class=\"chat-container\">\n <div class=\"chat-messages\"></div>\n <div class=\"chat-input\">\n <textarea placeholder=\"Type your message...\"></textarea>\n <button class=\"send-btn\">Send</button>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>ChatFlow</h4>\n <p>Next-generation AI agent management</p>\n </div>\n <div class=\"footer-section\">\n <h4>Links</h4>\n <ul>\n <li><a href=\"#docs\">Documentation</a></li>\n <li><a href=\"#api\">API Reference</a></li>\n <li><a href=\"#pricing\">Pricing</a></li>\n </ul>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #6366f1;\n --secondary: #4f46e5;\n --background: #f8fafc;\n --text: #1e293b;\n --card: #ffffff;\n --accent: #818cf8;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n}\n\n/* Header & Navigation */\nheader {\n background: var(--card);\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n background: linear-gradient(45deg, var(--primary), var(--accent));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.mobile-menu {\n display: none;\n}\n\n/* Hero Section */\n.hero {\n margin-top: 80px;\n padding: 4rem 2rem;\n text-align: center;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.cta {\n padding: 1rem 2rem;\n font-size: 1.1rem;\n background: white;\n color: var(--primary);\n border: none;\n border-radius: 50px;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.cta:hover {\n transform: translateY(-2px);\n}\n\n/* Agents Grid */\n.agents {\n padding: 4rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.agent-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.agent-card {\n background: var(--card);\n padding: 2rem;\n border-radius: 15px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n position: relative;\n}\n\n.agent-card:hover {\n transform: translateY(-5px);\n}\n\n.agent-status {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n position: absolute;\n top: 1rem;\n right: 1rem;\n}\n\n.online {\n background: #22c55e;\n}\n\n.idle {\n background: #eab308;\n}\n\n/* Chat Interface */\n.chat-interface {\n max-width: 800px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.chat-container {\n background: var(--card);\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n}\n\n.chat-messages {\n height: 400px;\n padding: 1rem;\n overflow-y: auto;\n}\n\n.chat-input {\n display: flex;\n padding: 1rem;\n gap: 1rem;\n border-top: 1px solid rgba(0,0,0,0.1);\n}\n\n.chat-input textarea {\n flex: 1;\n padding: 0.5rem;\n border: 1px solid rgba(0,0,0,0.1);\n border-radius: 5px;\n resize: none;\n}\n\n.send-btn {\n padding: 0.5rem 1rem;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\n/* Footer */\nfooter {\n background: var(--card);\n padding: 3rem 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n.footer-section ul {\n list-style: none;\n}\n\n.footer-section a {\n color: var(--text);\n text-decoration: none;\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n .mobile-menu {\n display: block;\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--card);\n padding: 1rem;\n flex-direction: column;\n text-align: center;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .hero h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n });\n\n // Chat functionality\n const chatMessages = document.querySelector('.chat-messages');\n const chatInput = document.querySelector('.chat-input textarea');\n const sendButton = document.querySelector('.send-btn');\n\n const agents = {\n 'Assistant Alpha': { color: '#6366f1' },\n 'Code Beta': { color: '#4f46e5' },\n 'Data Delta': { color: '#818cf8' }\n };\n\n let currentAgent = 'Assistant Alpha';\n\n function addMessage(content, isUser = true) {\n const messageDiv = document.createElement('div');\n messageDiv.style.marginBottom = '1rem';\n messageDiv.style.padding = '0.5rem 1rem';\n messageDiv.style.borderRadius = '10px';\n messageDiv.style.maxWidth = '80%';\n messageDiv.style.wordWrap = 'break-word';\n\n if (isUser) {\n messageDiv.style.marginLeft = 'auto';\n messageDiv.style.background = '#e2e8f0';\n } else {\n messageDiv.style.marginRight = 'auto';\n messageDiv.style.background = agents[currentAgent].color;\n messageDiv.style.color = 'white';\n }\n\n messageDiv.textContent = content;\n chatMessages.appendChild(messageDiv);\n chatMessages.scrollTop = chatMessages.scrollHeight;\n }\n\n sendButton.addEventListener('click', () => {\n const message = chatInput.value.trim();\n if (message) {\n addMessage(message, true);\n chatInput.value = '';\n \n // Simulate agent response\n setTimeout(() => {\n addMessage(`${currentAgent}: I received your message: \"${message}\"`, false);\n }, 1000);\n }\n });\n\n // Agent card click handlers\n const chatButtons = document.querySelectorAll('.chat-btn');\n chatButtons.forEach(button => {\n button.addEventListener('click', (e) => {\n currentAgent = e.target.parentElement.querySelector('h3').textContent;\n document.querySelector('#chat').scrollIntoView({ behavior: 'smooth' });\n });\n });\n\n // Enter key to send message\n chatInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n sendButton.click();\n }\n });\n});\n\n---end---\n\nThis implementation creates a modern, responsive website for managing multiple LLM chat agents. Key features include:\n\n1. Clean, minimal design with a beautiful gradient color scheme\n2. Responsive navigation with mobile menu\n3. Hero section with engaging call-to-action\n4. Agent cards with status indicators\n5. Functional chat interface with simulated responses\n6. Smooth animations and transitions\n7. Accessibility features\n8. Mobile-first responsive design\n9. Modern CSS features like CSS Grid and Flexbox\n10. Interactive elements with hover effects\n\nThe website follows all best practices and requirements, using only vanilla HTML, CSS, and JavaScript without any external dependencies."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 278,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3196
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..ba36ae3
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# chatflow.scroll.pub
+Website generated by Claude from prompt: LLM multiple chat agents via api
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..19edbbd
--- /dev/null
+++ b/script.js
@@ -0,0 +1,74 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ });
+
+ // Chat functionality
+ const chatMessages = document.querySelector('.chat-messages');
+ const chatInput = document.querySelector('.chat-input textarea');
+ const sendButton = document.querySelector('.send-btn');
+
+ const agents = {
+ 'Assistant Alpha': { color: '#6366f1' },
+ 'Code Beta': { color: '#4f46e5' },
+ 'Data Delta': { color: '#818cf8' }
+ };
+
+ let currentAgent = 'Assistant Alpha';
+
+ function addMessage(content, isUser = true) {
+ const messageDiv = document.createElement('div');
+ messageDiv.style.marginBottom = '1rem';
+ messageDiv.style.padding = '0.5rem 1rem';
+ messageDiv.style.borderRadius = '10px';
+ messageDiv.style.maxWidth = '80%';
+ messageDiv.style.wordWrap = 'break-word';
+
+ if (isUser) {
+ messageDiv.style.marginLeft = 'auto';
+ messageDiv.style.background = '#e2e8f0';
+ } else {
+ messageDiv.style.marginRight = 'auto';
+ messageDiv.style.background = agents[currentAgent].color;
+ messageDiv.style.color = 'white';
+ }
+
+ messageDiv.textContent = content;
+ chatMessages.appendChild(messageDiv);
+ chatMessages.scrollTop = chatMessages.scrollHeight;
+ }
+
+ sendButton.addEventListener('click', () => {
+ const message = chatInput.value.trim();
+ if (message) {
+ addMessage(message, true);
+ chatInput.value = '';
+
+ // Simulate agent response
+ setTimeout(() => {
+ addMessage(`${currentAgent}: I received your message: "${message}"`, false);
+ }, 1000);
+ }
+ });
+
+ // Agent card click handlers
+ const chatButtons = document.querySelectorAll('.chat-btn');
+ chatButtons.forEach(button => {
+ button.addEventListener('click', (e) => {
+ currentAgent = e.target.parentElement.querySelector('h3').textContent;
+ document.querySelector('#chat').scrollIntoView({ behavior: 'smooth' });
+ });
+ });
+
+ // Enter key to send message
+ chatInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ sendButton.click();
+ }
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f4341eb
--- /dev/null
+++ b/style.css
@@ -0,0 +1,241 @@
+:root {
+ --primary: #6366f1;
+ --secondary: #4f46e5;
+ --background: #f8fafc;
+ --text: #1e293b;
+ --card: #ffffff;
+ --accent: #818cf8;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--background);
+}
+
+/* Header & Navigation */
+header {
+ background: var(--card);
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ background: linear-gradient(45deg, var(--primary), var(--accent));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary);
+}
+
+.mobile-menu {
+ display: none;
+}
+
+/* Hero Section */
+.hero {
+ margin-top: 80px;
+ padding: 4rem 2rem;
+ text-align: center;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: white;
+}
+
+.hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.cta {
+ padding: 1rem 2rem;
+ font-size: 1.1rem;
+ background: white;
+ color: var(--primary);
+ border: none;
+ border-radius: 50px;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+.cta:hover {
+ transform: translateY(-2px);
+}
+
+/* Agents Grid */
+.agents {
+ padding: 4rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.agent-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.agent-card {
+ background: var(--card);
+ padding: 2rem;
+ border-radius: 15px;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+ position: relative;
+}
+
+.agent-card:hover {
+ transform: translateY(-5px);
+}
+
+.agent-status {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+}
+
+.online {
+ background: #22c55e;
+}
+
+.idle {
+ background: #eab308;
+}
+
+/* Chat Interface */
+.chat-interface {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+}
+
+.chat-container {
+ background: var(--card);
+ border-radius: 15px;
+ overflow: hidden;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+}
+
+.chat-messages {
+ height: 400px;
+ padding: 1rem;
+ overflow-y: auto;
+}
+
+.chat-input {
+ display: flex;
+ padding: 1rem;
+ gap: 1rem;
+ border-top: 1px solid rgba(0,0,0,0.1);
+}
+
+.chat-input textarea {
+ flex: 1;
+ padding: 0.5rem;
+ border: 1px solid rgba(0,0,0,0.1);
+ border-radius: 5px;
+ resize: none;
+}
+
+.send-btn {
+ padding: 0.5rem 1rem;
+ background: var(--primary);
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+/* Footer */
+footer {
+ background: var(--card);
+ padding: 3rem 2rem;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+.footer-section ul {
+ list-style: none;
+}
+
+.footer-section a {
+ color: var(--text);
+ text-decoration: none;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: block;
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--card);
+ padding: 1rem;
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+}