\n {/* TOP BAR */}\n

\n {activeChannel.charAt(0).toUpperCase()}\n

{activeChannel}

\n \n \n

\n\n {/* CHAT MESSAGES */}\n

\n {messages.length === 0 ? (\n

\n \n

No messages yet in {activeChannel}. Be the first to say hello!

\n ) : (\n messages.map((msg) => (\n

\n {msg.username.charAt(0).toUpperCase()}\n

\n {msg.username}\n \n {new Date(msg.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n \n

\n {msg.content}\n

\n \n

\n \n \n

\n ))\n )}\n

\n\n {/* MESSAGE INPUT FORM */}\n

\n \n

\n \n \n \n \n

\n\n

setInputText(e.target.value)}\n                onKeyDown={handleKeyDown}\n                placeholder={`Message in #${activeChannel}`}\n                className=\"flex-1 bg-transparent border-none outline-none resize-none text-gray-200 placeholder-gray-500 max-h-32 focus:ring-0\"\n                rows={1}\n              />\n              <button \n                onClick={handleSendMessage}\n                disabled={!inputText.trim()}\n                className={`ml-2 p-2 rounded-full flex items-center justify-center transition-colors ${\n                  inputText.trim() ? 'bg-purple-600 text-white hover:bg-purple-500' : 'bg-[#3E3E42] text-gray-500 cursor-not-allowed'\n                }`}\n                aria-label=\"Send message\"\n              >\n                <i className=\"fa-solid fa-paper-plane text-sm\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n}\n\n// --- CLIENT-SIDE BOOTSTRAP --- //\n\n// This code block ensures that the React app is only rendered on the client-side.\nif (typeof document !== \"undefined\") {\n  const rootElement = document.getElementById(\"root\");\n  if (rootElement) {\n    const root = createRoot(rootElement);\n    root.render(<App />);\n  } else {\n    console.error(\"Root element not found. React app could not be mounted.\");\n  }\n}\n\n\n// --- SERVER-SIDE API HANDLER & HTML SERVING --- //\n\n/**\n * A serverless function that handles API requests and serves the initial HTML.\n * @param {Request} req The incoming request object.\n * @returns {Promise<Response>} The response to send back to the client.\n */\nexport default async function server(req: Request): Promise<Response> {\n  const url = new URL(req.url);\n\n  // Ensure the database table exists on startup.\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS macro_teams_msgs_v1 (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      channel TEXT NOT NULL,\n      username TEXT NOT NULL,\n      avatar_color TEXT,\n      content TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // API ROUTING\n  if (url.pathname === \"/api/messages\") {\n    // GET /api/messages?channel=...\n    if (req.method === \"GET\") {\n      const channel = url.searchParams.get(\"channel\") || \"General\";\n      const result = await sqlite.execute({\n        sql: `SELECT id, channel, username, avatar_color, content, created_at FROM macro_teams_msgs_v1 WHERE channel = ? ORDER BY created_at ASC`,\n        args: [channel],\n      });\n      return new Response(JSON.stringify(result.rows), {\n        headers: { \"Content-Type\": \"application/json\" },\n      });\n    }\n\n    // POST /api/messages\n    if (req.method === \"POST\") {\n      const body = await req.json();\n      if (!body.channel || !body.username || !body.content) {\n        return new Response(JSON.stringify({ error: \"Missing required fields\" }), { status: 400 });\n      }\n      await sqlite.execute({\n        sql: `INSERT INTO macro_teams_msgs_v1 (channel, username, avatar_color, content) VALUES (?, ?, ?, ?)`,\n        args: [body.channel, body.username, body.avatarColor, body.content],\n      });\n      return new Response(JSON.stringify({ success: true }), { status: 201 });\n    }\n    \n    // Handle other methods for this route\n    return new Response(\"Method Not Allowed\", { status: 405 });\n  }\n\n  // HTML SERVING (FALLBACK FOR ANY OTHER ROUTE)\n  return new Response(`\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n      <meta charset=\"UTF-8\">\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n      <title>MACROSOFT TEAMS</title>\n      <script src=\"https://cdn.tailwindcss.com\"></script>\n      <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css\" integrity=\"sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n      <style>\n        body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; overflow: hidden; }\n        ::-webkit-scrollbar { width: 6px; }\n        ::-webkit-scrollbar-track { background: transparent; }\n        ::-webkit-scrollbar-thumb { background: #3E3E42; border-radius: 4px; }\n        ::-webkit-scrollbar-thumb:hover { background: #55555A; }\n        /* Simple fix for textarea auto-height */\n        textarea {\n          height: auto;\n          min-height: 24px;\n        }\n      </style>\n    </head>\n    <body>\n      <div id=\"root\"></div>\n      \n      <script type=\"module\" src=\"${import.meta.url}\"></script>\n    </body>\n    </html>\n  `, {\n    headers: { \"Content-Type\": \"text/html\" },\n  });\n}","deleted","label",[102],"permalink","https://www.val.town/x/aibotcommander/Group-Chat/code/main.tsx","extension","actionData","errors"]
</article></body></html>