feat: user personalization with Honcho-backed preferences

- WelcomeScreen: first-time name entry with cute onboarding - identify WS message: sets user_id, loads saved prefs from Honcho - set_preference WS message: saves scene/outfit/accessory to Honcho metadata - Preferences auto-load on return visits via localStorage + Honcho peer meta - Kira uses the user's name in greeting and prompts - Backend: get/set preference methods in KiraMemory service - Frontend: optimistic preference updates, synced to backend on change
2026-06-04 11:00:58 -04:00
parent 97424cb98f
commit 78ea059f08
6 changed files with 396 additions and 80 deletions
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Clock from './components/Clock';
 import BackgroundScene from './components/BackgroundScene';
 import MusicPlayer from './components/MusicPlayer';
@@ -10,17 +10,54 @@ import PetZone from './components/PetZone';
 import Wardrobe from './components/Wardrobe';
 import Toolbar from './components/Toolbar';
 import Particles from './components/Particles';
+import WelcomeScreen from './components/WelcomeScreen';
 import { SCENES, type Scene } from './components/scenes';
 import { useConversation } from './hooks/useConversation';

 export default function App() {
+  const {
+    messages,
+    isConnected,
+    isKiraSpeaking,
+    isRecording,
+    identified,
+    preferences,
+    loadingPrefs,
+    identify,
+    setPreference,
+    sendText,
+    startRecording,
+    stopRecording,
+  } = useConversation();
+
  const [currentSceneId, setCurrentSceneId] = useState('cozy-room');
  const [currentOutfit, setCurrentOutfit] = useState('cozy-hoodie');
  const [currentAcc, setCurrentAcc] = useState<string | null>(null);
  const [textInput, setTextInput] = useState('');

+  // Apply saved preferences once they load
+  useEffect(() => {
+    if (preferences.scene) setCurrentSceneId(preferences.scene);
+    if (preferences.outfit) setCurrentOutfit(preferences.outfit);
+    if (preferences.accessory) setCurrentAcc(preferences.accessory);
+  }, [preferences.scene, preferences.outfit, preferences.accessory]);
+
  const currentScene: Scene = SCENES.find((s) => s.id === currentSceneId) ?? SCENES[0];
-  const { messages, isConnected, isKiraSpeaking, isRecording, sendText, startRecording, stopRecording } = useConversation();
+
+  const handleSceneChange = (id: string) => {
+    setCurrentSceneId(id);
+    setPreference('scene', id);
+  };
+
+  const handleOutfitChange = (id: string) => {
+    setCurrentOutfit(id);
+    setPreference('outfit', id);
+  };
+
+  const handleAccessoryChange = (id: string | null) => {
+    setCurrentAcc(id);
+    setPreference('accessory', id || '');
+  };

  const handleTalkToggle = () => {
    if (isRecording) stopRecording();
@@ -33,6 +70,42 @@ export default function App() {
    setTextInput('');
  };

+  const handleWelcome = (name: string) => {
+    identify(name);
+  };
+
+  // Show WelcomeScreen for first-time users
+  if (!identified && !loadingPrefs) {
+    const savedId = localStorage.getItem('kira-user-id');
+    if (!savedId) {
+      return <WelcomeScreen onComplete={handleWelcome} />;
+    }
+    // Has saved ID but not identified yet — show welcome with their name
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
+        <div className="glass-card max-w-sm w-full p-6 text-center space-y-4">
+          <div className="w-16 h-16 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 mx-auto animate-pulse-glow">
+            <div className="w-full h-full rounded-full bg-white flex items-center justify-center">
+              <span className="text-2xl">🌸</span>
+            </div>
+          </div>
+          <p className="text-kira-plum/60 text-sm">coming back? say your name to pick up where you left off</p>
+          <WelcomeScreen onComplete={handleWelcome} />
+        </div>
+        <style>{`
+          @keyframes pulse-glow {
+            0%, 100% { box-shadow: 0 0 12px rgba(255,182,193,0.3); }
+            50% { box-shadow: 0 0 28px rgba(216,180,254,0.5); }
+          }
+          .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
+        `}</style>
+      </div>
+    );
+  }
+
+  // Main app with user's name in the greeting
+  const userName = preferences.name || 'there';
+
  return (
    <div
      className="min-h-screen relative transition-all duration-1000"
@@ -43,10 +116,10 @@ export default function App() {
      <div className="relative z-20 h-screen flex flex-col">
        {/* Top toolbar */}
        <div className="px-4 pt-4">
-          <Toolbar currentScene={currentSceneId} onSceneChange={setCurrentSceneId} />
+          <Toolbar currentScene={currentSceneId} onSceneChange={handleSceneChange} />
        </div>

-        {/* Main grid — scrollable center */}
+        {/* Main grid */}
        <div className="flex-1 overflow-y-auto px-4 py-4 scrollbar-thin">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 max-w-7xl mx-auto">

@@ -70,26 +143,26 @@ export default function App() {

            {/* Column 3: Chat + Text Input */}
            <div className="space-y-4">
-              <ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} />
-              
+              <ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} userName={userName} />
+
              {/* Text input fallback */}
              <div className="glass-card p-3">
+                {/* Subtle greeting */}
+                <div className="text-[10px] text-kira-plum/30 mb-2">
+                  hey {userName} ✨
+                </div>
                <div className="flex gap-2">
                  <input
                    value={textInput}
                    onChange={(e) => setTextInput(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && handleTextSend()}
-                    placeholder="type a message..."
+                    placeholder={`what's up, ${userName}?`}
                    className="flex-1 bg-white/60 rounded-xl px-3 py-2 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50"
                  />
-                  <button
-                    onClick={handleTextSend}
-                    className="btn-kira px-3 text-sm"
-                  >
+                  <button onClick={handleTextSend} className="btn-kira px-3 text-sm">
                    Send
                  </button>
                </div>
-                {/* Connection indicator */}
                <div className="flex items-center gap-2 mt-2 text-[10px] text-kira-plum/30">
                  <span className={`w-1.5 h-1.5 rounded-full ${isConnected ? 'bg-kira-mint' : 'bg-red-300'}`} />
                  {isConnected ? 'connected' : 'connecting...'}
@@ -100,7 +173,7 @@ export default function App() {
            {/* Column 4: Cats + Wardrobe */}
            <div className="space-y-4">
              <PetZone />
-              <Wardrobe onOutfitChange={setCurrentOutfit} onAccessoryChange={setCurrentAcc} />
+              <Wardrobe onOutfitChange={handleOutfitChange} onAccessoryChange={handleAccessoryChange} />
            </div>

          </div>
@@ -111,10 +184,10 @@ export default function App() {
          <div className="glass-card px-4 py-2 flex items-center justify-between text-xs text-kira-plum/40">
            <div className="flex items-center gap-3">
              <span className={`w-2 h-2 rounded-full ${isRecording ? 'bg-red-400 animate-pulse' : isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'} inline-block`} />
-              <span>{isRecording ? 'listening...' : isKiraSpeaking ? 'kira speaking' : 'kira is here'}</span>
+              <span>{isRecording ? 'listening...' : isKiraSpeaking ? 'kira speaking' : `kira's here for you, ${userName}`}</span>
            </div>
            <div className="flex items-center gap-3">
-              <span className="hidden sm:inline">{isConnected ? 'body double mode' : 'offline'}</span>
+              <span className="hidden sm:inline">{identified ? `hi ${userName}` : 'body double mode'}</span>
              <span>🌸</span>
            </div>
          </div>
@@ -4,11 +4,13 @@ interface Message {
  id: string;
  role: 'user' | 'kira';
  text: string;
+  timestamp: number;
 }

 interface Props {
  messages: Message[];
  isKiraSpeaking: boolean;
+  userName?: string;
 }

 export default function ChatBubble({ messages, isKiraSpeaking }: Props) {
@@ -0,0 +1,75 @@
+import { useState } from 'react';
+
+interface Props {
+  onComplete: (name: string) => void;
+}
+
+export default function WelcomeScreen({ onComplete }: Props) {
+  const [name, setName] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = name.trim();
+    if (trimmed) onComplete(trimmed);
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
+      <div className="glass-card max-w-md w-full p-8 text-center space-y-6">
+        {/* Avatar preview */}
+        <div className="flex justify-center">
+          <div className="w-20 h-20 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 animate-pulse-glow">
+            <div className="w-full h-full rounded-full bg-white flex items-center justify-center">
+              <span className="text-3xl">🌸</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <h1 className="text-2xl font-extrabold text-kira-plum">Welcome to Kira!</h1>
+          <p className="text-sm text-kira-violet/60 leading-relaxed">
+            I'm your focus bestie. I'm here to body-double with you — 
+            keep you company, cheer you on, and help you get things done. 
+            Lo-fi beats, timers, cats, the whole deal.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-semibold text-kira-plum/70 mb-1.5 text-left">
+              What should I call you?
+            </label>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Your name..."
+              className="w-full bg-white/60 rounded-xl px-4 py-3 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50 transition-all"
+              autoFocus
+              maxLength={30}
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={!name.trim()}
+            className="btn-kira w-full py-3 text-base disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+          >
+            Let's Go! ✨
+          </button>
+        </form>
+
+        <p className="text-[10px] text-kira-plum/30">
+          everything stays between us — your name, your preferences, your focus vibes
+        </p>
+      </div>
+
+      <style>{`
+        @keyframes pulse-glow {
+          0%, 100% { box-shadow: 0 0 12px rgba(255,182,193,0.3); }
+          50% { box-shadow: 0 0 28px rgba(216,180,254,0.5); }
+        }
+        .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
+      `}</style>
+    </div>
+  );
+}
@@ -1,5 +1,12 @@
 import { useState, useCallback, useRef, useEffect } from 'react';

+export interface UserPreferences {
+  name: string;
+  scene: string;
+  outfit: string;
+  accessory: string;
+}
+
 interface Message {
  id: string;
  role: 'user' | 'kira';
@@ -8,25 +15,54 @@ interface Message {
 }

 const WS_URL = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/api/ws`;
+const USER_ID_KEY = 'kira-user-id';
+
+function loadUserId(): string {
+  return localStorage.getItem(USER_ID_KEY) || '';
+}
+
+function saveUserId(id: string) {
+  localStorage.setItem(USER_ID_KEY, id);
+}

 export function useConversation() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [isConnected, setIsConnected] = useState(false);
  const [isKiraSpeaking, setIsKiraSpeaking] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [identified, setIdentified] = useState(false);
+  const [preferences, setPreferences] = useState<UserPreferences>({
+    name: '',
+    scene: 'cozy-room',
+    outfit: 'cozy-hoodie',
+    accessory: '',
+  });
+  const [loadingPrefs, setLoadingPrefs] = useState(true);
+
  const wsRef = useRef<WebSocket | null>(null);
  const audioRef = useRef<HTMLAudioElement | null>(null);
  const recorderRef = useRef<MediaRecorder | null>(null);
  const streamRef = useRef<MediaStream | null>(null);
-  const [isRecording, setIsRecording] = useState(false);

  // Connect WebSocket
  const connect = useCallback(() => {
    if (wsRef.current?.readyState === WebSocket.OPEN) return;
+    setLoadingPrefs(true);

    const ws = new WebSocket(WS_URL);
    wsRef.current = ws;

-    ws.onopen = () => setIsConnected(true);
+    ws.onopen = () => {
+      setIsConnected(true);
+      // Auto-identify if returning user
+      const savedId = loadUserId();
+      if (savedId) {
+        ws.send(JSON.stringify({ type: 'identify', user_id: savedId }));
+      } else {
+        setLoadingPrefs(false);
+      }
+    };
+
    ws.onclose = () => {
      setIsConnected(false);
      setTimeout(connect, 3000);
@@ -51,6 +87,25 @@ export function useConversation() {
  // Handle incoming WS messages
  const handleMessage = useCallback((msg: any) => {
    switch (msg.type) {
+      case 'identified': {
+        setIdentified(true);
+        setLoadingPrefs(false);
+        if (msg.user_id) saveUserId(msg.user_id);
+        if (msg.preferences) {
+          setPreferences({
+            name: msg.preferences.name || '',
+            scene: msg.preferences.scene || 'cozy-room',
+            outfit: msg.preferences.outfit || 'cozy-hoodie',
+            accessory: msg.preferences.accessory || '',
+          });
+        }
+        break;
+      }
+
+      case 'preference_saved':
+        // Already optimistically updated locally
+        break;
+
      case 'transcript':
        addMessage('user', msg.text);
        break;
@@ -91,15 +146,52 @@ export function useConversation() {
    ]);
  }, []);

-  // Send text directly (no microphone)
-  const sendText = useCallback((text: string) => {
-    if (!text.trim()) return;
+  // ── Identity ──
+
+  const identify = useCallback((name: string) => {
+    const userId = `kira-${name.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
+    saveUserId(userId);
+    setPreferences((p) => ({ ...p, name }));
+
    if (wsRef.current?.readyState === WebSocket.OPEN) {
-      wsRef.current.send(JSON.stringify({ type: 'conversation_text', text: text.trim() }));
+      wsRef.current.send(JSON.stringify({
+        type: 'identify',
+        user_id: userId,
+        name,
+      }));
    }
  }, []);

-  // Push-to-talk: start recording
+  // ── Preferences ──
+
+  const setPreference = useCallback((key: string, value: string) => {
+    // Optimistic update
+    setPreferences((p) => ({ ...p, [key]: value }));
+
+    // Sync to backend
+    if (wsRef.current?.readyState === WebSocket.OPEN && identified) {
+      wsRef.current.send(JSON.stringify({
+        type: 'set_preference',
+        key,
+        value,
+      }));
+    }
+  }, [identified]);
+
+  // ── Text ──
+
+  const sendText = useCallback((text: string) => {
+    if (!text.trim()) return;
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({
+        type: 'conversation_text',
+        text: text.trim(),
+      }));
+    }
+  }, []);
+
+  // ── Audio ──
+
  const startRecording = useCallback(async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
@@ -117,16 +209,12 @@ export function useConversation() {
      };

      recorder.onstop = () => {
-        // Send all audio chunks as one blob
        const blob = new Blob(chunks, { type: 'audio/webm' });
        const reader = new FileReader();
        reader.onload = () => {
          const base64 = (reader.result as string).split(',')[1];
          if (wsRef.current?.readyState === WebSocket.OPEN) {
-            wsRef.current.send(JSON.stringify({
-              type: 'audio_chunk',
-              data: base64,
-            }));
+            wsRef.current.send(JSON.stringify({ type: 'audio_chunk', data: base64 }));
            wsRef.current.send(JSON.stringify({ type: 'transcribe' }));
          }
        };
@@ -144,7 +232,6 @@ export function useConversation() {
    }
  }, []);

-  // Push-to-talk: stop recording
  const stopRecording = useCallback(() => {
    recorderRef.current?.stop();
  }, []);
@@ -163,6 +250,11 @@ export function useConversation() {
    isConnected,
    isKiraSpeaking,
    isRecording,
+    identified,
+    preferences,
+    loadingPrefs,
+    identify,
+    setPreference,
    sendText,
    startRecording,
    stopRecording,