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
This commit is contained in:
+88
-15
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user