sitesmith: chat modal (messages, input, banner, scope confirm)

2026-05-23 14:25:28 -07:00
parent b4d71340e1
commit e651becdbe
4 changed files with 153 additions and 8 deletions
@@ -0,0 +1,32 @@
+import React from 'react';
+import { SitesmithMessage } from '../../types/sitesmith';
+
+export const MessageList: React.FC<{ messages: SitesmithMessage[] }> = ({ messages }) => {
+  const extract = (m: SitesmithMessage): string => {
+    if (m.role === 'user') return m.content;
+    try { const obj = JSON.parse(m.content); if (obj.type === 'ask') return obj.question; if (obj.message) return obj.message; } catch {}
+    return m.content;
+  };
+  return (
+    <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
+      {messages.length === 0 && (
+        <div style={{ color: '#71717a', fontSize: 13, textAlign: 'center', padding: 30 }}>
+          Describe the site you want and Sitesmith builds it. e.g. "A two-page site for a small bakery, friendly tone, photo of cupcakes in the hero."
+        </div>
+      )}
+      {messages.map((m, i) => {
+        const isUser = m.role === 'user';
+        return (
+          <div key={i} style={{
+            alignSelf: isUser ? 'flex-end' : 'flex-start',
+            maxWidth: '80%', padding: '10px 14px', borderRadius: 10,
+            background: isUser ? '#312e81' : '#1f2937', color: '#f3f4f6',
+            fontSize: 14, whiteSpace: 'pre-wrap',
+          }}>
+            {extract(m)}
+          </div>
+        );
+      })}
+    </div>
+  );
+};