| Philip Zeyliger | 61a0f67 | 2025-06-21 15:33:18 -0700 | [diff] [blame] | 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>Mobile Chat Demo</title> |
| 7 | <style> |
| 8 | body { |
| 9 | margin: 0; |
| 10 | padding: 0; |
| 11 | height: 100vh; |
| 12 | font-family: |
| 13 | -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; |
| 14 | } |
| 15 | </style> |
| 16 | <script type="module"> |
| 17 | import "../mobile-chat.js"; |
| 18 | |
| 19 | const chatElement = document.querySelector("mobile-chat"); |
| 20 | |
| 21 | // Simulate multiple messages to test scroll behavior |
| 22 | const messages = [ |
| 23 | { |
| 24 | id: "1", |
| 25 | type: "user", |
| 26 | content: "Hello, I need help with setting up a project.", |
| 27 | timestamp: new Date().toISOString(), |
| 28 | }, |
| 29 | { |
| 30 | id: "2", |
| 31 | type: "agent", |
| 32 | content: |
| 33 | "Hello! I'd be happy to help you set up a project. What kind of project are you working on?", |
| 34 | timestamp: new Date().toISOString(), |
| 35 | }, |
| 36 | { |
| 37 | id: "3", |
| 38 | type: "user", |
| 39 | content: |
| 40 | "I'm trying to build a web application using React and TypeScript.", |
| 41 | timestamp: new Date().toISOString(), |
| 42 | }, |
| 43 | { |
| 44 | id: "4", |
| 45 | type: "agent", |
| 46 | content: |
| 47 | "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?", |
| 48 | timestamp: new Date().toISOString(), |
| 49 | }, |
| 50 | { |
| 51 | id: "5", |
| 52 | type: "user", |
| 53 | content: |
| 54 | "Yes, please walk me through each step. I want to make sure I understand everything.", |
| 55 | timestamp: new Date().toISOString(), |
| 56 | }, |
| 57 | { |
| 58 | id: "6", |
| 59 | type: "agent", |
| 60 | content: |
| 61 | "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.", |
| 62 | timestamp: new Date().toISOString(), |
| 63 | }, |
| 64 | { |
| 65 | id: "7", |
| 66 | type: "user", |
| 67 | content: |
| 68 | "Okay, I ran that command and it created the project. What's next?", |
| 69 | timestamp: new Date().toISOString(), |
| 70 | }, |
| 71 | { |
| 72 | id: "8", |
| 73 | type: "agent", |
| 74 | content: |
| 75 | "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?", |
| 76 | timestamp: new Date().toISOString(), |
| 77 | }, |
| 78 | { |
| 79 | id: "9", |
| 80 | type: "user", |
| 81 | content: |
| 82 | "I think I'll need routing and probably Material-UI for styling. Should I install both?", |
| 83 | timestamp: new Date().toISOString(), |
| 84 | }, |
| 85 | { |
| 86 | id: "10", |
| 87 | type: "agent", |
| 88 | content: |
| 89 | "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.", |
| 90 | timestamp: new Date().toISOString(), |
| 91 | }, |
| 92 | ]; |
| 93 | |
| 94 | setTimeout(() => { |
| 95 | chatElement.messages = messages; |
| 96 | }, 100); |
| 97 | </script> |
| 98 | </head> |
| 99 | <body> |
| 100 | <mobile-chat style="height: 100vh; display: block"></mobile-chat> |
| 101 | </body> |
| 102 | </html> |