<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mobile Chat Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        height: 100vh;
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
      }
    </style>
    <script type="module">
      import "../mobile-chat.js";

      const chatElement = document.querySelector("mobile-chat");

      // Simulate multiple messages to test scroll behavior
      const messages = [
        {
          id: "1",
          type: "user",
          content: "Hello, I need help with setting up a project.",
          timestamp: new Date().toISOString(),
        },
        {
          id: "2",
          type: "agent",
          content:
            "Hello! I'd be happy to help you set up a project. What kind of project are you working on?",
          timestamp: new Date().toISOString(),
        },
        {
          id: "3",
          type: "user",
          content:
            "I'm trying to build a web application using React and TypeScript.",
          timestamp: new Date().toISOString(),
        },
        {
          id: "4",
          type: "agent",
          content:
            "Great choice! React with TypeScript is a powerful combination. Let me help you get started. First, we'll need to set up the project structure. Here are the steps:\n\n1. Create a new React app with TypeScript template\n2. Install additional dependencies\n3. Set up the folder structure\n4. Configure the development environment\n\nWould you like me to walk you through each step?",
          timestamp: new Date().toISOString(),
        },
        {
          id: "5",
          type: "user",
          content:
            "Yes, please walk me through each step. I want to make sure I understand everything.",
          timestamp: new Date().toISOString(),
        },
        {
          id: "6",
          type: "agent",
          content:
            "Perfect! Let's start with step 1:\n\n**Step 1: Create a new React app with TypeScript template**\n\nOpen your terminal and run:\n```bash\nnpx create-react-app my-app --template typescript\ncd my-app\n```\n\nThis will create a new React application with TypeScript already configured. The `--template typescript` flag tells Create React App to set up TypeScript for you automatically.",
          timestamp: new Date().toISOString(),
        },
        {
          id: "7",
          type: "user",
          content:
            "Okay, I ran that command and it created the project. What's next?",
          timestamp: new Date().toISOString(),
        },
        {
          id: "8",
          type: "agent",
          content:
            "Excellent! Now let's move to step 2:\n\n**Step 2: Install additional dependencies**\n\nYou might want to install some commonly used packages. Here are some recommendations:\n\n```bash\n# For routing\nnpm install react-router-dom\nnpm install @types/react-router-dom\n\n# For styling (choose one)\nnpm install styled-components  # or\nnpm install @mui/material\n\n# For state management (if needed)\nnpm install redux @reduxjs/toolkit react-redux\n```\n\nWhich of these sound useful for your project?",
          timestamp: new Date().toISOString(),
        },
        {
          id: "9",
          type: "user",
          content:
            "I think I'll need routing and probably Material-UI for styling. Should I install both?",
          timestamp: new Date().toISOString(),
        },
        {
          id: "10",
          type: "agent",
          content:
            "Absolutely! React Router and Material-UI work great together. Run these commands:\n\n```bash\nnpm install react-router-dom @types/react-router-dom\nnpm install @mui/material @emotion/react @emotion/styled\nnpm install @mui/icons-material\n```\n\nMaterial-UI (now called MUI) requires @emotion packages for styling, and the icons package gives you access to thousands of Material Design icons.",
          timestamp: new Date().toISOString(),
        },
      ];

      setTimeout(() => {
        chatElement.messages = messages;
      }, 100);
    </script>
  </head>
  <body>
    <mobile-chat style="height: 100vh; display: block"></mobile-chat>
  </body>
</html>