@rubytech/create-maxy 1.0.0

package/payload/maxy/app/public/page.tsx

@@ -0,0 +1,266 @@
+'use client'
+
+import { useState, useRef, useEffect, useCallback, FormEvent } from 'react'
+
+interface Message {
+  role: 'maxy' | 'visitor'
+  content: string
+}
+
+const suggestions: string[] = []
+
+/** Generate a random session ID (Taskmaster prepends its own anon- prefix). */
+function generateSessionId(): string {
+  return crypto.randomUUID()
+}
+
+export default function ChatPage() {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [remainingSuggestions, setRemainingSuggestions] = useState(suggestions)
+  const [input, setInput] = useState('')
+  const [isStreaming, setIsStreaming] = useState(false)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const nudgeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const sessionKeyRef = useRef<string | null>(null)
+  const sessionPendingRef = useRef<Promise<string | null> | null>(null)
+
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  // Nudge timer — if no input after 15s, show gentle prompt
+  useEffect(() => {
+    nudgeTimerRef.current = setTimeout(() => {
+      setMessages(prev => {
+        if (prev.length > 0) return prev // user already started chatting
+        return [{ role: 'maxy', content: 'No wrong answers. Just tell me what\'s on your mind.' }]
+      })
+    }, 15000)
+    return () => {
+      if (nudgeTimerRef.current) clearTimeout(nudgeTimerRef.current)
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Focus input on mount
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  /** Ensure we have a Taskmaster session, creating one if needed. */
+  const ensureSession = useCallback(async (): Promise<string | null> => {
+    if (sessionKeyRef.current) return sessionKeyRef.current
+
+    // Deduplicate concurrent calls
+    if (sessionPendingRef.current) return sessionPendingRef.current
+
+    const promise = (async () => {
+      try {
+        const res = await fetch('/api/session', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ session_id: generateSessionId() }),
+        })
+        if (!res.ok) return null
+        const data = await res.json()
+        sessionKeyRef.current = data.session_key
+        return data.session_key as string
+      } catch {
+        return null
+      } finally {
+        sessionPendingRef.current = null
+      }
+    })()
+
+    sessionPendingRef.current = promise
+    return promise
+  }, [])
+
+  async function sendMessage(text: string) {
+    if (!text || isStreaming) return
+
+    // Clear nudge timer
+    if (nudgeTimerRef.current) {
+      clearTimeout(nudgeTimerRef.current)
+      nudgeTimerRef.current = null
+    }
+
+    // Remove this suggestion if it was from the list
+    setRemainingSuggestions(prev => prev.filter(s => s !== text))
+
+    // Add visitor message
+    const visitorMessage: Message = { role: 'visitor', content: text }
+    const updatedMessages = [...messages, visitorMessage]
+    setMessages(updatedMessages)
+    setInput('')
+    setIsStreaming(true)
+
+    // Add placeholder for Maxy's response
+    const placeholderIndex = updatedMessages.length
+    setMessages(prev => [...prev, { role: 'maxy', content: '' }])
+
+    try {
+      // Ensure we have a session before sending
+      const sessionKey = await ensureSession()
+      if (!sessionKey) {
+        throw new Error('session')
+      }
+
+      const res = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: text, session_key: sessionKey }),
+      })
+
+      if (!res.ok) {
+        const errorData = await res.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Something went wrong')
+      }
+
+      const reader = res.body?.getReader()
+      const decoder = new TextDecoder()
+
+      if (!reader) throw new Error('No response stream')
+
+      let accumulated = ''
+      let sseBuffer = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        sseBuffer += decoder.decode(value, { stream: true })
+        const parts = sseBuffer.split('\n')
+        sseBuffer = parts.pop()! // keep incomplete trailing segment
+
+        for (const line of parts) {
+          if (!line.startsWith('data: ')) continue
+          const data = line.slice(6)
+          if (data === '[DONE]') continue
+
+          let parsed
+          try { parsed = JSON.parse(data) } catch { continue }
+
+          if (parsed.error) throw new Error(parsed.error)
+          if (parsed.text) {
+            accumulated += parsed.text
+            setMessages(prev => {
+              const updated = [...prev]
+              updated[placeholderIndex] = {
+                role: 'maxy',
+                content: accumulated,
+              }
+              return updated
+            })
+          }
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Something went wrong'
+      setMessages(prev => {
+        const updated = [...prev]
+        updated[placeholderIndex] = {
+          role: 'maxy',
+          content: errorMessage === 'session'
+            ? "I'm having trouble connecting right now. Try refreshing the page."
+            : "Sorry, I hit a snag. Try again in a moment.",
+        }
+        return updated
+      })
+    } finally {
+      setIsStreaming(false)
+      inputRef.current?.focus()
+    }
+  }
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    sendMessage(input.trim())
+  }
+
+  return (
+    <div className="chat-page">
+      <header className="chat-header">
+        <img src="/brand/maxy-black.png" alt="Maxy" className="chat-logo" />
+        <h1 className="chat-tagline">No Stress. Quiet Life.</h1>
+        <p className="chat-intro">
+          Hey, I{'\u2019'}m Maxy. I{'\u2019'}m a personal AI that handles the
+          stuff you don{'\u2019'}t want to think about. I{'\u2019'}m not a product
+          yet{'\u2009'}{'\u2014'}{'\u2009'}I{'\u2019'}m learning what stresses people
+          most so I can be built right. Tell me what{'\u2019'}s on your mind.
+          No advice, no judgment, just a conversation.
+        </p>
+        <div className="chat-trust">
+          <span className="chat-trust-item">Anonymous</span>
+          <span className="chat-trust-sep">{'\u00B7'}</span>
+          <span className="chat-trust-item">Private</span>
+          <span className="chat-trust-sep">{'\u00B7'}</span>
+          <span className="chat-trust-item">No sign-up</span>
+          <span className="chat-trust-sep">{'\u00B7'}</span>
+          <span className="chat-trust-item">Free</span>
+        </div>
+      </header>
+
+      <div className="chat-messages">
+        {messages.map((msg, i) => (
+          <div key={i} className={`message ${msg.role}`}>
+            <div className="bubble">
+              {msg.content || (
+                <span className="typing-indicator">
+                  <span className="typing-dot" />
+                  <span className="typing-dot" />
+                  <span className="typing-dot" />
+                </span>
+              )}
+            </div>
+          </div>
+        ))}
+        {!isStreaming && remainingSuggestions.length > 0 && (
+          <div className="chat-suggestions">
+            {remainingSuggestions.map(s => (
+              <button
+                key={s}
+                className="chat-suggestion"
+                onClick={() => sendMessage(s)}
+              >
+                {s}
+              </button>
+            ))}
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="chat-input-area">
+        <form className="chat-form" onSubmit={handleSubmit}>
+          <input
+            ref={inputRef}
+            className="chat-input"
+            type="text"
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            placeholder="Tell me what you need taking care of in your life!"
+            disabled={isStreaming}
+            aria-label="Type your message"
+          />
+          <button
+            className="chat-send"
+            type="submit"
+            disabled={isStreaming || !input.trim()}
+            aria-label="Send message"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="5" y1="12" x2="19" y2="12" />
+              <polyline points="12 5 19 12 12 19" />
+            </svg>
+          </button>
+        </form>
+      </div>
+
+      <footer className="chat-footer">
+        <a href="https://maxy.bot">maxy.bot {'\u2197'}</a>
+      </footer>
+    </div>
+  )
+}

package/payload/maxy/next.config.mjs

@@ -0,0 +1,26 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  poweredByHeader: false,
+  devIndicators: { appIsrStatus: false },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          { key: 'X-Content-Type-Options', value: 'nosniff' },
+          { key: 'X-Frame-Options', value: 'DENY' },
+          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
+        ],
+      },
+      {
+        // VNC viewer is loaded in an iframe on the same origin — allow same-origin framing
+        source: '/vnc-viewer.html',
+        headers: [
+          { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
+        ],
+      },
+    ]
+  },
+}
+
+export default nextConfig