feat: character system v2 — schema upgrade, memory system, per-character TTS routing
Character schema v2: background, dialogue_style, appearance, skills, gaze_presets with automatic v1→v2 migration. LLM-assisted character creation via Character MCP server. Two-tier memory system (personal per-character + general shared) with budget-based injection into LLM system prompt. Per-character TTS voice routing via state file — Wyoming TTS server reads active config to route between Kokoro (local) and ElevenLabs (cloud PCM 24kHz). Dashboard: memories page, conversation history, character profile on cards, auto-TTS engine selection from character config. Also includes VTube Studio expression bridge and ComfyUI API guide. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Aodhan Collins
@@ -24,6 +24,8 @@
|
||||
<string>/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin</string>
|
||||
<key>HOME</key>
|
||||
<string>/Users/aodhan</string>
|
||||
<key>GAZE_API_KEY</key>
|
||||
<string>e63401f17e4845e1059f830267f839fe7fc7b6083b1cb1730863318754d799f4</string>
|
||||
</dict>
|
||||
|
||||
<key>RunAtLoad</key>
|
||||
|
||||
@@ -1,15 +1,24 @@
|
||||
{
|
||||
"$schema": "http://json-schema.org/draft-07/schema#",
|
||||
"title": "HomeAI Character Config",
|
||||
"version": "1",
|
||||
"version": "2",
|
||||
"type": "object",
|
||||
"required": ["schema_version", "name", "system_prompt", "tts"],
|
||||
"properties": {
|
||||
"schema_version": { "type": "integer", "const": 1 },
|
||||
"schema_version": { "type": "integer", "enum": [1, 2] },
|
||||
"name": { "type": "string" },
|
||||
"display_name": { "type": "string" },
|
||||
"description": { "type": "string" },
|
||||
|
||||
"background": { "type": "string", "description": "Backstory, lore, or general prompt enrichment" },
|
||||
"dialogue_style": { "type": "string", "description": "How the persona speaks or reacts, with example lines" },
|
||||
"appearance": { "type": "string", "description": "Physical description, also used for image prompting" },
|
||||
"skills": {
|
||||
"type": "array",
|
||||
"description": "Topics the persona specialises in or enjoys talking about",
|
||||
"items": { "type": "string" }
|
||||
},
|
||||
|
||||
"system_prompt": { "type": "string" },
|
||||
|
||||
"model_overrides": {
|
||||
@@ -31,35 +40,21 @@
|
||||
"voice_ref_path": { "type": "string" },
|
||||
"kokoro_voice": { "type": "string" },
|
||||
"elevenlabs_voice_id": { "type": "string" },
|
||||
"elevenlabs_voice_name": { "type": "string" },
|
||||
"elevenlabs_model": { "type": "string", "default": "eleven_monolingual_v1" },
|
||||
"speed": { "type": "number", "default": 1.0 }
|
||||
}
|
||||
},
|
||||
|
||||
"live2d_expressions": {
|
||||
"type": "object",
|
||||
"description": "Maps semantic state to VTube Studio hotkey ID",
|
||||
"properties": {
|
||||
"idle": { "type": "string" },
|
||||
"listening": { "type": "string" },
|
||||
"thinking": { "type": "string" },
|
||||
"speaking": { "type": "string" },
|
||||
"happy": { "type": "string" },
|
||||
"sad": { "type": "string" },
|
||||
"surprised": { "type": "string" },
|
||||
"error": { "type": "string" }
|
||||
}
|
||||
},
|
||||
|
||||
"vtube_ws_triggers": {
|
||||
"type": "object",
|
||||
"description": "VTube Studio WebSocket actions keyed by event name",
|
||||
"additionalProperties": {
|
||||
"gaze_presets": {
|
||||
"type": "array",
|
||||
"description": "GAZE image generation presets with trigger conditions",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"required": ["preset"],
|
||||
"properties": {
|
||||
"type": { "type": "string", "enum": ["hotkey", "parameter"] },
|
||||
"id": { "type": "string" },
|
||||
"value": { "type": "number" }
|
||||
"preset": { "type": "string" },
|
||||
"trigger": { "type": "string", "default": "self-portrait" }
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -78,5 +73,6 @@
|
||||
},
|
||||
|
||||
"notes": { "type": "string" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"additionalProperties": true
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import Dashboard from './pages/Dashboard';
|
||||
import Chat from './pages/Chat';
|
||||
import Characters from './pages/Characters';
|
||||
import Editor from './pages/Editor';
|
||||
import Memories from './pages/Memories';
|
||||
|
||||
function NavItem({ to, children, icon }) {
|
||||
return (
|
||||
@@ -77,6 +78,17 @@ function Layout({ children }) {
|
||||
Characters
|
||||
</NavItem>
|
||||
|
||||
<NavItem
|
||||
to="/memories"
|
||||
icon={
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
|
||||
</svg>
|
||||
}
|
||||
>
|
||||
Memories
|
||||
</NavItem>
|
||||
|
||||
<NavItem
|
||||
to="/editor"
|
||||
icon={
|
||||
@@ -113,6 +125,7 @@ function App() {
|
||||
<Route path="/" element={<div className="flex-1 overflow-y-auto p-8"><div className="max-w-6xl mx-auto"><Dashboard /></div></div>} />
|
||||
<Route path="/chat" element={<Chat />} />
|
||||
<Route path="/characters" element={<div className="flex-1 overflow-y-auto p-8"><div className="max-w-6xl mx-auto"><Characters /></div></div>} />
|
||||
<Route path="/memories" element={<div className="flex-1 overflow-y-auto p-8"><div className="max-w-6xl mx-auto"><Memories /></div></div>} />
|
||||
<Route path="/editor" element={<div className="flex-1 overflow-y-auto p-8"><div className="max-w-6xl mx-auto"><Editor /></div></div>} />
|
||||
</Routes>
|
||||
</Layout>
|
||||
|
||||
@@ -2,8 +2,10 @@ import { useEffect, useRef } from 'react'
|
||||
import MessageBubble from './MessageBubble'
|
||||
import ThinkingIndicator from './ThinkingIndicator'
|
||||
|
||||
export default function ChatPanel({ messages, isLoading, onReplay }) {
|
||||
export default function ChatPanel({ messages, isLoading, onReplay, character }) {
|
||||
const bottomRef = useRef(null)
|
||||
const name = character?.name || 'AI'
|
||||
const image = character?.image || null
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
@@ -13,10 +15,14 @@ export default function ChatPanel({ messages, isLoading, onReplay }) {
|
||||
return (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-indigo-600/20 flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-indigo-400 text-2xl">AI</span>
|
||||
</div>
|
||||
<h2 className="text-xl font-medium text-gray-200 mb-2">Hi, I'm Aria</h2>
|
||||
{image ? (
|
||||
<img src={image} alt={name} className="w-20 h-20 rounded-full object-cover mx-auto mb-4 ring-2 ring-indigo-500/30" />
|
||||
) : (
|
||||
<div className="w-20 h-20 rounded-full bg-indigo-600/20 flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-indigo-400 text-2xl">{name[0]}</span>
|
||||
</div>
|
||||
)}
|
||||
<h2 className="text-xl font-medium text-gray-200 mb-2">Hi, I'm {name}</h2>
|
||||
<p className="text-gray-500 text-sm">Type a message or press the mic to talk</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,9 +32,9 @@ export default function ChatPanel({ messages, isLoading, onReplay }) {
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto py-4">
|
||||
{messages.map((msg) => (
|
||||
<MessageBubble key={msg.id} message={msg} onReplay={onReplay} />
|
||||
<MessageBubble key={msg.id} message={msg} onReplay={onReplay} character={character} />
|
||||
))}
|
||||
{isLoading && <ThinkingIndicator />}
|
||||
{isLoading && <ThinkingIndicator character={character} />}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
)
|
||||
|
||||
70
homeai-dashboard/src/components/ConversationList.jsx
Normal file
70
homeai-dashboard/src/components/ConversationList.jsx
Normal file
@@ -0,0 +1,70 @@
|
||||
function timeAgo(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
const diff = Date.now() - new Date(dateStr).getTime()
|
||||
const mins = Math.floor(diff / 60000)
|
||||
if (mins < 1) return 'just now'
|
||||
if (mins < 60) return `${mins}m ago`
|
||||
const hours = Math.floor(mins / 60)
|
||||
if (hours < 24) return `${hours}h ago`
|
||||
const days = Math.floor(hours / 24)
|
||||
return `${days}d ago`
|
||||
}
|
||||
|
||||
export default function ConversationList({ conversations, activeId, onCreate, onSelect, onDelete }) {
|
||||
return (
|
||||
<div className="w-72 border-r border-gray-800 flex flex-col bg-gray-950 shrink-0">
|
||||
{/* New chat button */}
|
||||
<div className="p-3 border-b border-gray-800">
|
||||
<button
|
||||
onClick={onCreate}
|
||||
className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-lg transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
New chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Conversation list */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{conversations.length === 0 ? (
|
||||
<p className="text-xs text-gray-600 text-center py-6">No conversations yet</p>
|
||||
) : (
|
||||
conversations.map(conv => (
|
||||
<div
|
||||
key={conv.id}
|
||||
onClick={() => onSelect(conv.id)}
|
||||
className={`group flex items-start gap-2 px-3 py-2.5 cursor-pointer border-b border-gray-800/50 transition-colors ${
|
||||
conv.id === activeId
|
||||
? 'bg-gray-800 text-white'
|
||||
: 'text-gray-400 hover:bg-gray-800/50 hover:text-gray-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm truncate">
|
||||
{conv.title || 'New conversation'}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
{conv.characterName && (
|
||||
<span className="text-xs text-indigo-400/70">{conv.characterName}</span>
|
||||
)}
|
||||
<span className="text-xs text-gray-600">{timeAgo(conv.updatedAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onDelete(conv.id) }}
|
||||
className="opacity-0 group-hover:opacity-100 p-1 text-gray-500 hover:text-red-400 transition-all shrink-0 mt-0.5"
|
||||
title="Delete"
|
||||
>
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,14 +1,100 @@
|
||||
export default function MessageBubble({ message, onReplay }) {
|
||||
import { useState } from 'react'
|
||||
|
||||
function Avatar({ character }) {
|
||||
const name = character?.name || 'AI'
|
||||
const image = character?.image || null
|
||||
|
||||
if (image) {
|
||||
return <img src={image} alt={name} className="w-8 h-8 rounded-full object-cover shrink-0 mt-0.5 ring-1 ring-gray-700" />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-8 h-8 rounded-full bg-indigo-600/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<span className="text-indigo-400 text-sm">{name[0]}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ImageOverlay({ src, onClose }) {
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center cursor-zoom-out"
|
||||
onClick={onClose}
|
||||
>
|
||||
<img
|
||||
src={src}
|
||||
alt="Full size"
|
||||
className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 text-white/70 hover:text-white transition-colors p-2"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const IMAGE_URL_RE = /(https?:\/\/[^\s]+\.(?:png|jpg|jpeg|gif|webp))/gi
|
||||
|
||||
function RichContent({ text }) {
|
||||
const [overlayImage, setOverlayImage] = useState(null)
|
||||
const parts = []
|
||||
let lastIndex = 0
|
||||
let match
|
||||
|
||||
IMAGE_URL_RE.lastIndex = 0
|
||||
while ((match = IMAGE_URL_RE.exec(text)) !== null) {
|
||||
if (match.index > lastIndex) {
|
||||
parts.push({ type: 'text', value: text.slice(lastIndex, match.index) })
|
||||
}
|
||||
parts.push({ type: 'image', value: match[1] })
|
||||
lastIndex = IMAGE_URL_RE.lastIndex
|
||||
}
|
||||
if (lastIndex < text.length) {
|
||||
parts.push({ type: 'text', value: text.slice(lastIndex) })
|
||||
}
|
||||
|
||||
if (parts.length === 1 && parts[0].type === 'text') {
|
||||
return <>{text}</>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{parts.map((part, i) =>
|
||||
part.type === 'image' ? (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setOverlayImage(part.value)}
|
||||
className="block my-2 cursor-zoom-in"
|
||||
>
|
||||
<img
|
||||
src={part.value}
|
||||
alt="Generated image"
|
||||
className="rounded-xl max-w-full max-h-80 object-contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
</button>
|
||||
) : (
|
||||
<span key={i}>{part.value}</span>
|
||||
)
|
||||
)}
|
||||
{overlayImage && <ImageOverlay src={overlayImage} onClose={() => setOverlayImage(null)} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default function MessageBubble({ message, onReplay, character }) {
|
||||
const isUser = message.role === 'user'
|
||||
|
||||
return (
|
||||
<div className={`flex ${isUser ? 'justify-end' : 'justify-start'} px-4 py-1.5`}>
|
||||
<div className={`flex items-start gap-3 max-w-[80%] ${isUser ? 'flex-row-reverse' : ''}`}>
|
||||
{!isUser && (
|
||||
<div className="w-8 h-8 rounded-full bg-indigo-600/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<span className="text-indigo-400 text-sm">AI</span>
|
||||
</div>
|
||||
)}
|
||||
{!isUser && <Avatar character={character} />}
|
||||
<div>
|
||||
<div
|
||||
className={`rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap ${
|
||||
@@ -19,7 +105,7 @@ export default function MessageBubble({ message, onReplay }) {
|
||||
: 'bg-gray-800 text-gray-100'
|
||||
}`}
|
||||
>
|
||||
{message.content}
|
||||
{isUser ? message.content : <RichContent text={message.content} />}
|
||||
</div>
|
||||
{!isUser && !message.isError && onReplay && (
|
||||
<button
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { VOICES } from '../lib/constants'
|
||||
import { VOICES, TTS_ENGINES } from '../lib/constants'
|
||||
|
||||
export default function SettingsDrawer({ isOpen, onClose, settings, onUpdate }) {
|
||||
if (!isOpen) return null
|
||||
|
||||
const isKokoro = !settings.ttsEngine || settings.ttsEngine === 'kokoro'
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed inset-0 bg-black/50 z-40" onClick={onClose} />
|
||||
@@ -16,18 +18,48 @@ export default function SettingsDrawer({ isOpen, onClose, settings, onUpdate })
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-5">
|
||||
{/* TTS Engine */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">TTS Engine</label>
|
||||
<select
|
||||
value={settings.ttsEngine || 'kokoro'}
|
||||
onChange={(e) => onUpdate('ttsEngine', e.target.value)}
|
||||
className="w-full bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
{TTS_ENGINES.map((e) => (
|
||||
<option key={e.id} value={e.id}>{e.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Voice */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Voice</label>
|
||||
<select
|
||||
value={settings.voice}
|
||||
onChange={(e) => onUpdate('voice', e.target.value)}
|
||||
className="w-full bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
{VOICES.map((v) => (
|
||||
<option key={v.id} value={v.id}>{v.label}</option>
|
||||
))}
|
||||
</select>
|
||||
{isKokoro ? (
|
||||
<select
|
||||
value={settings.voice}
|
||||
onChange={(e) => onUpdate('voice', e.target.value)}
|
||||
className="w-full bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
{VOICES.map((v) => (
|
||||
<option key={v.id} value={v.id}>{v.label}</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={settings.voice || ''}
|
||||
onChange={(e) => onUpdate('voice', e.target.value)}
|
||||
className="w-full bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500"
|
||||
placeholder={settings.ttsEngine === 'elevenlabs' ? 'ElevenLabs voice ID' : 'Voice identifier'}
|
||||
readOnly
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Set via active character profile
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Auto TTS */}
|
||||
|
||||
@@ -1,9 +1,16 @@
|
||||
export default function ThinkingIndicator() {
|
||||
export default function ThinkingIndicator({ character }) {
|
||||
const name = character?.name || 'AI'
|
||||
const image = character?.image || null
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-3 px-4 py-3">
|
||||
<div className="w-8 h-8 rounded-full bg-indigo-600/20 flex items-center justify-center shrink-0">
|
||||
<span className="text-indigo-400 text-sm">AI</span>
|
||||
</div>
|
||||
{image ? (
|
||||
<img src={image} alt={name} className="w-8 h-8 rounded-full object-cover shrink-0 ring-1 ring-gray-700" />
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-indigo-600/20 flex items-center justify-center shrink-0">
|
||||
<span className="text-indigo-400 text-sm">{name[0]}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1 pt-2.5">
|
||||
<span className="w-2 h-2 rounded-full bg-gray-400 animate-[bounce_1.4s_ease-in-out_infinite]" />
|
||||
<span className="w-2 h-2 rounded-full bg-gray-400 animate-[bounce_1.4s_ease-in-out_0.2s_infinite]" />
|
||||
|
||||
28
homeai-dashboard/src/hooks/useActiveCharacter.js
Normal file
28
homeai-dashboard/src/hooks/useActiveCharacter.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
const ACTIVE_KEY = 'homeai_active_character'
|
||||
|
||||
export function useActiveCharacter() {
|
||||
const [character, setCharacter] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
const activeId = localStorage.getItem(ACTIVE_KEY)
|
||||
if (!activeId) return
|
||||
|
||||
fetch(`/api/characters/${activeId}`)
|
||||
.then(r => r.ok ? r.json() : null)
|
||||
.then(profile => {
|
||||
if (profile) {
|
||||
setCharacter({
|
||||
id: profile.id,
|
||||
name: profile.data.display_name || profile.data.name || 'AI',
|
||||
image: profile.image || null,
|
||||
tts: profile.data.tts || null,
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
return character
|
||||
}
|
||||
@@ -1,45 +1,124 @@
|
||||
import { useState, useCallback } from 'react'
|
||||
import { useState, useCallback, useEffect, useRef } from 'react'
|
||||
import { sendMessage } from '../lib/api'
|
||||
import { getConversation, saveConversation } from '../lib/conversationApi'
|
||||
|
||||
export function useChat() {
|
||||
export function useChat(conversationId, conversationMeta, onConversationUpdate) {
|
||||
const [messages, setMessages] = useState([])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [isLoadingConv, setIsLoadingConv] = useState(false)
|
||||
const convRef = useRef(null)
|
||||
const idRef = useRef(conversationId)
|
||||
|
||||
const send = useCallback(async (text) => {
|
||||
// Keep idRef in sync
|
||||
useEffect(() => { idRef.current = conversationId }, [conversationId])
|
||||
|
||||
// Load conversation from server when ID changes
|
||||
useEffect(() => {
|
||||
if (!conversationId) {
|
||||
setMessages([])
|
||||
convRef.current = null
|
||||
return
|
||||
}
|
||||
|
||||
let cancelled = false
|
||||
setIsLoadingConv(true)
|
||||
|
||||
getConversation(conversationId).then(conv => {
|
||||
if (cancelled) return
|
||||
if (conv) {
|
||||
convRef.current = conv
|
||||
setMessages(conv.messages || [])
|
||||
} else {
|
||||
convRef.current = null
|
||||
setMessages([])
|
||||
}
|
||||
setIsLoadingConv(false)
|
||||
}).catch(() => {
|
||||
if (!cancelled) {
|
||||
convRef.current = null
|
||||
setMessages([])
|
||||
setIsLoadingConv(false)
|
||||
}
|
||||
})
|
||||
|
||||
return () => { cancelled = true }
|
||||
}, [conversationId])
|
||||
|
||||
// Persist conversation to server
|
||||
const persist = useCallback(async (updatedMessages, title, overrideId) => {
|
||||
const id = overrideId || idRef.current
|
||||
if (!id) return
|
||||
const now = new Date().toISOString()
|
||||
const conv = {
|
||||
id,
|
||||
title: title || convRef.current?.title || '',
|
||||
characterId: conversationMeta?.characterId || convRef.current?.characterId || '',
|
||||
characterName: conversationMeta?.characterName || convRef.current?.characterName || '',
|
||||
createdAt: convRef.current?.createdAt || now,
|
||||
updatedAt: now,
|
||||
messages: updatedMessages,
|
||||
}
|
||||
convRef.current = conv
|
||||
await saveConversation(conv).catch(() => {})
|
||||
if (onConversationUpdate) {
|
||||
onConversationUpdate(id, {
|
||||
title: conv.title,
|
||||
updatedAt: conv.updatedAt,
|
||||
messageCount: conv.messages.length,
|
||||
})
|
||||
}
|
||||
}, [conversationMeta, onConversationUpdate])
|
||||
|
||||
// send accepts an optional overrideId for when the conversation was just created
|
||||
const send = useCallback(async (text, overrideId) => {
|
||||
if (!text.trim() || isLoading) return null
|
||||
|
||||
const userMsg = { id: Date.now(), role: 'user', content: text.trim(), timestamp: new Date() }
|
||||
setMessages((prev) => [...prev, userMsg])
|
||||
const userMsg = { id: Date.now(), role: 'user', content: text.trim(), timestamp: new Date().toISOString() }
|
||||
const isFirstMessage = messages.length === 0
|
||||
const newMessages = [...messages, userMsg]
|
||||
setMessages(newMessages)
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
const response = await sendMessage(text.trim())
|
||||
const response = await sendMessage(text.trim(), conversationMeta?.characterId || null)
|
||||
const assistantMsg = {
|
||||
id: Date.now() + 1,
|
||||
role: 'assistant',
|
||||
content: response,
|
||||
timestamp: new Date(),
|
||||
timestamp: new Date().toISOString(),
|
||||
}
|
||||
setMessages((prev) => [...prev, assistantMsg])
|
||||
const allMessages = [...newMessages, assistantMsg]
|
||||
setMessages(allMessages)
|
||||
|
||||
const title = isFirstMessage
|
||||
? text.trim().slice(0, 80) + (text.trim().length > 80 ? '...' : '')
|
||||
: undefined
|
||||
await persist(allMessages, title, overrideId)
|
||||
|
||||
return response
|
||||
} catch (err) {
|
||||
const errorMsg = {
|
||||
id: Date.now() + 1,
|
||||
role: 'assistant',
|
||||
content: `Error: ${err.message}`,
|
||||
timestamp: new Date(),
|
||||
timestamp: new Date().toISOString(),
|
||||
isError: true,
|
||||
}
|
||||
setMessages((prev) => [...prev, errorMsg])
|
||||
const allMessages = [...newMessages, errorMsg]
|
||||
setMessages(allMessages)
|
||||
await persist(allMessages, undefined, overrideId)
|
||||
return null
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [isLoading])
|
||||
}, [isLoading, messages, persist])
|
||||
|
||||
const clearHistory = useCallback(() => {
|
||||
const clearHistory = useCallback(async () => {
|
||||
setMessages([])
|
||||
}, [])
|
||||
if (idRef.current) {
|
||||
await persist([], undefined)
|
||||
}
|
||||
}, [persist])
|
||||
|
||||
return { messages, isLoading, send, clearHistory }
|
||||
return { messages, isLoading, isLoadingConv, send, clearHistory }
|
||||
}
|
||||
|
||||
66
homeai-dashboard/src/hooks/useConversations.js
Normal file
66
homeai-dashboard/src/hooks/useConversations.js
Normal file
@@ -0,0 +1,66 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { listConversations, saveConversation, deleteConversation as deleteConv } from '../lib/conversationApi'
|
||||
|
||||
const ACTIVE_KEY = 'homeai_active_conversation'
|
||||
|
||||
export function useConversations() {
|
||||
const [conversations, setConversations] = useState([])
|
||||
const [activeId, setActiveId] = useState(() => localStorage.getItem(ACTIVE_KEY) || null)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
|
||||
const loadList = useCallback(async () => {
|
||||
try {
|
||||
const list = await listConversations()
|
||||
setConversations(list)
|
||||
} catch {
|
||||
setConversations([])
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => { loadList() }, [loadList])
|
||||
|
||||
const select = useCallback((id) => {
|
||||
setActiveId(id)
|
||||
if (id) {
|
||||
localStorage.setItem(ACTIVE_KEY, id)
|
||||
} else {
|
||||
localStorage.removeItem(ACTIVE_KEY)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const create = useCallback(async (characterId, characterName) => {
|
||||
const id = `conv_${Date.now()}`
|
||||
const now = new Date().toISOString()
|
||||
const conv = {
|
||||
id,
|
||||
title: '',
|
||||
characterId: characterId || '',
|
||||
characterName: characterName || '',
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
messages: [],
|
||||
}
|
||||
await saveConversation(conv)
|
||||
setConversations(prev => [{ ...conv, messageCount: 0 }, ...prev])
|
||||
select(id)
|
||||
return id
|
||||
}, [select])
|
||||
|
||||
const remove = useCallback(async (id) => {
|
||||
await deleteConv(id)
|
||||
setConversations(prev => prev.filter(c => c.id !== id))
|
||||
if (activeId === id) {
|
||||
select(null)
|
||||
}
|
||||
}, [activeId, select])
|
||||
|
||||
const updateMeta = useCallback((id, updates) => {
|
||||
setConversations(prev => prev.map(c =>
|
||||
c.id === id ? { ...c, ...updates } : c
|
||||
))
|
||||
}, [])
|
||||
|
||||
return { conversations, activeId, isLoading, select, create, remove, updateMeta, refresh: loadList }
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useRef, useCallback } from 'react'
|
||||
import { synthesize } from '../lib/api'
|
||||
|
||||
export function useTtsPlayback(voice) {
|
||||
export function useTtsPlayback(voice, engine = 'kokoro', model = null) {
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
const audioCtxRef = useRef(null)
|
||||
const sourceRef = useRef(null)
|
||||
@@ -23,7 +23,7 @@ export function useTtsPlayback(voice) {
|
||||
|
||||
setIsPlaying(true)
|
||||
try {
|
||||
const audioData = await synthesize(text, voice)
|
||||
const audioData = await synthesize(text, voice, engine, model)
|
||||
const ctx = getAudioContext()
|
||||
if (ctx.state === 'suspended') await ctx.resume()
|
||||
|
||||
@@ -42,7 +42,7 @@ export function useTtsPlayback(voice) {
|
||||
console.error('TTS playback error:', err)
|
||||
setIsPlaying(false)
|
||||
}
|
||||
}, [voice])
|
||||
}, [voice, engine, model])
|
||||
|
||||
const stop = useCallback(() => {
|
||||
if (sourceRef.current) {
|
||||
|
||||
@@ -4,7 +4,43 @@ import schema from '../../schema/character.schema.json'
|
||||
const ajv = new Ajv({ allErrors: true, strict: false })
|
||||
const validate = ajv.compile(schema)
|
||||
|
||||
/**
|
||||
* Migrate a v1 character config to v2 in-place.
|
||||
* Removes live2d/vtube fields, converts gaze_preset to gaze_presets array,
|
||||
* and initialises new persona fields.
|
||||
*/
|
||||
export function migrateV1toV2(config) {
|
||||
config.schema_version = 2
|
||||
|
||||
// Remove deprecated fields
|
||||
delete config.live2d_expressions
|
||||
delete config.vtube_ws_triggers
|
||||
|
||||
// Convert single gaze_preset string → gaze_presets array
|
||||
if ('gaze_preset' in config) {
|
||||
const old = config.gaze_preset
|
||||
config.gaze_presets = old ? [{ preset: old, trigger: 'self-portrait' }] : []
|
||||
delete config.gaze_preset
|
||||
}
|
||||
if (!config.gaze_presets) {
|
||||
config.gaze_presets = []
|
||||
}
|
||||
|
||||
// Initialise new fields if absent
|
||||
if (config.background === undefined) config.background = ''
|
||||
if (config.dialogue_style === undefined) config.dialogue_style = ''
|
||||
if (config.appearance === undefined) config.appearance = ''
|
||||
if (config.skills === undefined) config.skills = []
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
export function validateCharacter(config) {
|
||||
// Auto-migrate v1 → v2
|
||||
if (config.schema_version === 1 || config.schema_version === undefined) {
|
||||
migrateV1toV2(config)
|
||||
}
|
||||
|
||||
const valid = validate(config)
|
||||
if (!valid) {
|
||||
throw new Error(ajv.errorsText(validate.errors))
|
||||
|
||||
@@ -1,8 +1,30 @@
|
||||
export async function sendMessage(text) {
|
||||
const res = await fetch('/api/agent/message', {
|
||||
const MAX_RETRIES = 3
|
||||
const RETRY_DELAY_MS = 2000
|
||||
|
||||
async function fetchWithRetry(url, options, retries = MAX_RETRIES) {
|
||||
for (let attempt = 1; attempt <= retries; attempt++) {
|
||||
try {
|
||||
const res = await fetch(url, options)
|
||||
if (res.status === 502 && attempt < retries) {
|
||||
// Bridge unreachable — wait and retry
|
||||
await new Promise(r => setTimeout(r, RETRY_DELAY_MS * attempt))
|
||||
continue
|
||||
}
|
||||
return res
|
||||
} catch (err) {
|
||||
if (attempt >= retries) throw err
|
||||
await new Promise(r => setTimeout(r, RETRY_DELAY_MS * attempt))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function sendMessage(text, characterId = null) {
|
||||
const payload = { message: text, agent: 'main' }
|
||||
if (characterId) payload.character_id = characterId
|
||||
const res = await fetchWithRetry('/api/agent/message', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message: text, agent: 'main' }),
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: 'Request failed' }))
|
||||
@@ -12,11 +34,13 @@ export async function sendMessage(text) {
|
||||
return data.response
|
||||
}
|
||||
|
||||
export async function synthesize(text, voice) {
|
||||
export async function synthesize(text, voice, engine = 'kokoro', model = null) {
|
||||
const payload = { text, voice, engine }
|
||||
if (model) payload.model = model
|
||||
const res = await fetch('/api/tts', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text, voice }),
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
if (!res.ok) throw new Error('TTS failed')
|
||||
return await res.arrayBuffer()
|
||||
|
||||
@@ -30,7 +30,15 @@ export const VOICES = [
|
||||
{ id: 'bm_lewis', label: 'Lewis (M, UK)' },
|
||||
]
|
||||
|
||||
export const TTS_ENGINES = [
|
||||
{ id: 'kokoro', label: 'Kokoro (local)' },
|
||||
{ id: 'chatterbox', label: 'Chatterbox (voice clone)' },
|
||||
{ id: 'qwen3', label: 'Qwen3 TTS' },
|
||||
{ id: 'elevenlabs', label: 'ElevenLabs (cloud)' },
|
||||
]
|
||||
|
||||
export const DEFAULT_SETTINGS = {
|
||||
ttsEngine: 'kokoro',
|
||||
voice: DEFAULT_VOICE,
|
||||
autoTts: true,
|
||||
sttMode: 'bridge',
|
||||
|
||||
25
homeai-dashboard/src/lib/conversationApi.js
Normal file
25
homeai-dashboard/src/lib/conversationApi.js
Normal file
@@ -0,0 +1,25 @@
|
||||
export async function listConversations() {
|
||||
const res = await fetch('/api/conversations')
|
||||
if (!res.ok) throw new Error(`Failed to list conversations: ${res.status}`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function getConversation(id) {
|
||||
const res = await fetch(`/api/conversations/${encodeURIComponent(id)}`)
|
||||
if (!res.ok) return null
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function saveConversation(conversation) {
|
||||
const res = await fetch('/api/conversations', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(conversation),
|
||||
})
|
||||
if (!res.ok) throw new Error(`Failed to save conversation: ${res.status}`)
|
||||
}
|
||||
|
||||
export async function deleteConversation(id) {
|
||||
const res = await fetch(`/api/conversations/${encodeURIComponent(id)}`, { method: 'DELETE' })
|
||||
if (!res.ok) throw new Error(`Failed to delete conversation: ${res.status}`)
|
||||
}
|
||||
45
homeai-dashboard/src/lib/memoryApi.js
Normal file
45
homeai-dashboard/src/lib/memoryApi.js
Normal file
@@ -0,0 +1,45 @@
|
||||
export async function getPersonalMemories(characterId) {
|
||||
const res = await fetch(`/api/memories/personal/${encodeURIComponent(characterId)}`)
|
||||
if (!res.ok) return { characterId, memories: [] }
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function savePersonalMemory(characterId, memory) {
|
||||
const res = await fetch(`/api/memories/personal/${encodeURIComponent(characterId)}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(memory),
|
||||
})
|
||||
if (!res.ok) throw new Error(`Failed to save memory: ${res.status}`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function deletePersonalMemory(characterId, memoryId) {
|
||||
const res = await fetch(`/api/memories/personal/${encodeURIComponent(characterId)}/${encodeURIComponent(memoryId)}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
if (!res.ok) throw new Error(`Failed to delete memory: ${res.status}`)
|
||||
}
|
||||
|
||||
export async function getGeneralMemories() {
|
||||
const res = await fetch('/api/memories/general')
|
||||
if (!res.ok) return { memories: [] }
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function saveGeneralMemory(memory) {
|
||||
const res = await fetch('/api/memories/general', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(memory),
|
||||
})
|
||||
if (!res.ok) throw new Error(`Failed to save memory: ${res.status}`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function deleteGeneralMemory(memoryId) {
|
||||
const res = await fetch(`/api/memories/general/${encodeURIComponent(memoryId)}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
if (!res.ok) throw new Error(`Failed to delete memory: ${res.status}`)
|
||||
}
|
||||
@@ -1,23 +1,9 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { validateCharacter } from '../lib/SchemaValidator';
|
||||
|
||||
const STORAGE_KEY = 'homeai_characters';
|
||||
const ACTIVE_KEY = 'homeai_active_character';
|
||||
|
||||
function loadProfiles() {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
return raw ? JSON.parse(raw) : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function saveProfiles(profiles) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(profiles));
|
||||
}
|
||||
|
||||
function getActiveId() {
|
||||
return localStorage.getItem(ACTIVE_KEY) || null;
|
||||
}
|
||||
@@ -27,15 +13,52 @@ function setActiveId(id) {
|
||||
}
|
||||
|
||||
export default function Characters() {
|
||||
const [profiles, setProfiles] = useState(loadProfiles);
|
||||
const [profiles, setProfiles] = useState([]);
|
||||
const [activeId, setActive] = useState(getActiveId);
|
||||
const [error, setError] = useState(null);
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [satMap, setSatMap] = useState({ default: '', satellites: {} });
|
||||
const [newSatId, setNewSatId] = useState('');
|
||||
const [newSatChar, setNewSatChar] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Load profiles and satellite map on mount
|
||||
useEffect(() => {
|
||||
saveProfiles(profiles);
|
||||
}, [profiles]);
|
||||
Promise.all([
|
||||
fetch('/api/characters').then(r => r.json()),
|
||||
fetch('/api/satellite-map').then(r => r.json()),
|
||||
])
|
||||
.then(([chars, map]) => {
|
||||
setProfiles(chars);
|
||||
setSatMap(map);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(err => { setError(`Failed to load: ${err.message}`); setLoading(false); });
|
||||
}, []);
|
||||
|
||||
const saveSatMap = useCallback(async (updated) => {
|
||||
setSatMap(updated);
|
||||
await fetch('/api/satellite-map', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updated),
|
||||
});
|
||||
}, []);
|
||||
|
||||
const saveProfile = useCallback(async (profile) => {
|
||||
const res = await fetch('/api/characters', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(profile),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to save profile');
|
||||
}, []);
|
||||
|
||||
const deleteProfile = useCallback(async (id) => {
|
||||
const safeId = id.replace(/[^a-zA-Z0-9_\-\.]/g, '_');
|
||||
await fetch(`/api/characters/${safeId}`, { method: 'DELETE' });
|
||||
}, []);
|
||||
|
||||
const handleImport = (e) => {
|
||||
const files = Array.from(e.target?.files || []);
|
||||
@@ -47,12 +70,14 @@ export default function Characters() {
|
||||
files.forEach(file => {
|
||||
if (!file.name.endsWith('.json')) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (ev) => {
|
||||
reader.onload = async (ev) => {
|
||||
try {
|
||||
const data = JSON.parse(ev.target.result);
|
||||
validateCharacter(data);
|
||||
const id = data.name + '_' + Date.now();
|
||||
setProfiles(prev => [...prev, { id, data, image: null, addedAt: new Date().toISOString() }]);
|
||||
const profile = { id, data, image: null, addedAt: new Date().toISOString() };
|
||||
await saveProfile(profile);
|
||||
setProfiles(prev => [...prev, profile]);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(`Import failed for ${file.name}: ${err.message}`);
|
||||
@@ -73,15 +98,17 @@ export default function Characters() {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (ev) => {
|
||||
setProfiles(prev =>
|
||||
prev.map(p => p.id === profileId ? { ...p, image: ev.target.result } : p)
|
||||
);
|
||||
reader.onload = async (ev) => {
|
||||
const updated = profiles.map(p => p.id === profileId ? { ...p, image: ev.target.result } : p);
|
||||
const profile = updated.find(p => p.id === profileId);
|
||||
if (profile) await saveProfile(profile);
|
||||
setProfiles(updated);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const removeProfile = (id) => {
|
||||
const removeProfile = async (id) => {
|
||||
await deleteProfile(id);
|
||||
setProfiles(prev => prev.filter(p => p.id !== id));
|
||||
if (activeId === id) {
|
||||
setActive(null);
|
||||
@@ -92,6 +119,28 @@ export default function Characters() {
|
||||
const activateProfile = (id) => {
|
||||
setActive(id);
|
||||
setActiveId(id);
|
||||
|
||||
// Sync active character's TTS settings to chat settings
|
||||
const profile = profiles.find(p => p.id === id);
|
||||
if (profile?.data?.tts) {
|
||||
const tts = profile.data.tts;
|
||||
const engine = tts.engine || 'kokoro';
|
||||
let voice;
|
||||
if (engine === 'kokoro') voice = tts.kokoro_voice || 'af_heart';
|
||||
else if (engine === 'elevenlabs') voice = tts.elevenlabs_voice_id || '';
|
||||
else if (engine === 'chatterbox') voice = tts.voice_ref_path || '';
|
||||
else voice = '';
|
||||
|
||||
try {
|
||||
const raw = localStorage.getItem('homeai_dashboard_settings');
|
||||
const settings = raw ? JSON.parse(raw) : {};
|
||||
localStorage.setItem('homeai_dashboard_settings', JSON.stringify({
|
||||
...settings,
|
||||
ttsEngine: engine,
|
||||
voice: voice,
|
||||
}));
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
};
|
||||
|
||||
const exportProfile = (profile) => {
|
||||
@@ -125,13 +174,28 @@ export default function Characters() {
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg cursor-pointer transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Import JSON
|
||||
<input type="file" accept=".json" multiple className="hidden" onChange={handleImport} />
|
||||
</label>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
sessionStorage.removeItem('edit_character');
|
||||
sessionStorage.removeItem('edit_character_profile_id');
|
||||
navigate('/editor');
|
||||
}}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
New Character
|
||||
</button>
|
||||
<label className="flex items-center gap-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg cursor-pointer border border-gray-700 transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
|
||||
</svg>
|
||||
Import JSON
|
||||
<input type="file" accept=".json" multiple className="hidden" onChange={handleImport} />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
@@ -158,7 +222,11 @@ export default function Characters() {
|
||||
</div>
|
||||
|
||||
{/* Profile grid */}
|
||||
{profiles.length === 0 ? (
|
||||
{loading ? (
|
||||
<div className="text-center py-16">
|
||||
<p className="text-gray-500">Loading characters...</p>
|
||||
</div>
|
||||
) : profiles.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<svg className="w-16 h-16 mx-auto text-gray-700 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
|
||||
@@ -230,11 +298,32 @@ export default function Characters() {
|
||||
<span className="px-2 py-0.5 bg-gray-700/70 text-gray-400 text-xs rounded-full">
|
||||
{char.model_overrides?.primary || 'default'}
|
||||
</span>
|
||||
{char.tts?.kokoro_voice && (
|
||||
{char.tts?.engine === 'kokoro' && char.tts?.kokoro_voice && (
|
||||
<span className="px-2 py-0.5 bg-gray-700/70 text-gray-400 text-xs rounded-full">
|
||||
{char.tts.kokoro_voice}
|
||||
</span>
|
||||
)}
|
||||
{char.tts?.engine === 'elevenlabs' && char.tts?.elevenlabs_voice_id && (
|
||||
<span className="px-2 py-0.5 bg-gray-700/70 text-gray-400 text-xs rounded-full" title={char.tts.elevenlabs_voice_id}>
|
||||
{char.tts.elevenlabs_voice_name || char.tts.elevenlabs_voice_id.slice(0, 8) + '…'}
|
||||
</span>
|
||||
)}
|
||||
{char.tts?.engine === 'chatterbox' && char.tts?.voice_ref_path && (
|
||||
<span className="px-2 py-0.5 bg-gray-700/70 text-gray-400 text-xs rounded-full" title={char.tts.voice_ref_path}>
|
||||
{char.tts.voice_ref_path.split('/').pop()}
|
||||
</span>
|
||||
)}
|
||||
{(() => {
|
||||
const defaultPreset = char.gaze_presets?.find(gp => gp.trigger === 'self-portrait')?.preset
|
||||
|| char.gaze_presets?.[0]?.preset
|
||||
|| char.gaze_preset
|
||||
|| null;
|
||||
return defaultPreset ? (
|
||||
<span className="px-2 py-0.5 bg-violet-500/20 text-violet-300 text-xs rounded-full border border-violet-500/30" title={`GAZE: ${defaultPreset}`}>
|
||||
{defaultPreset}
|
||||
</span>
|
||||
) : null;
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-1">
|
||||
@@ -287,6 +376,96 @@ export default function Characters() {
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Satellite Assignment */}
|
||||
{!loading && profiles.length > 0 && (
|
||||
<div className="bg-gray-900 border border-gray-800 rounded-xl p-5 space-y-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-200">Satellite Routing</h2>
|
||||
<p className="text-xs text-gray-500 mt-1">Assign characters to voice satellites. Unmapped satellites use the default.</p>
|
||||
</div>
|
||||
|
||||
{/* Default character */}
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="text-sm text-gray-400 w-32 shrink-0">Default</label>
|
||||
<select
|
||||
value={satMap.default || ''}
|
||||
onChange={(e) => saveSatMap({ ...satMap, default: e.target.value })}
|
||||
className="flex-1 bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
<option value="">-- None --</option>
|
||||
{profiles.map(p => (
|
||||
<option key={p.id} value={p.id}>{p.data.display_name || p.data.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Per-satellite assignments */}
|
||||
{Object.entries(satMap.satellites || {}).map(([satId, charId]) => (
|
||||
<div key={satId} className="flex items-center gap-3">
|
||||
<span className="text-sm text-gray-300 w-32 shrink-0 truncate font-mono" title={satId}>{satId}</span>
|
||||
<select
|
||||
value={charId}
|
||||
onChange={(e) => {
|
||||
const updated = { ...satMap, satellites: { ...satMap.satellites, [satId]: e.target.value } };
|
||||
saveSatMap(updated);
|
||||
}}
|
||||
className="flex-1 bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
{profiles.map(p => (
|
||||
<option key={p.id} value={p.id}>{p.data.display_name || p.data.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={() => {
|
||||
const { [satId]: _, ...rest } = satMap.satellites;
|
||||
saveSatMap({ ...satMap, satellites: rest });
|
||||
}}
|
||||
className="px-2 py-1.5 bg-gray-700 hover:bg-red-600 text-gray-400 hover:text-white rounded-lg transition-colors"
|
||||
title="Remove"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add new satellite */}
|
||||
<div className="flex items-center gap-3 pt-2 border-t border-gray-800">
|
||||
<input
|
||||
type="text"
|
||||
value={newSatId}
|
||||
onChange={(e) => setNewSatId(e.target.value)}
|
||||
placeholder="Satellite ID (from bridge log)"
|
||||
className="w-32 shrink-0 bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500 font-mono"
|
||||
/>
|
||||
<select
|
||||
value={newSatChar}
|
||||
onChange={(e) => setNewSatChar(e.target.value)}
|
||||
className="flex-1 bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
<option value="">-- Select Character --</option>
|
||||
{profiles.map(p => (
|
||||
<option key={p.id} value={p.id}>{p.data.display_name || p.data.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (newSatId && newSatChar) {
|
||||
saveSatMap({ ...satMap, satellites: { ...satMap.satellites, [newSatId]: newSatChar } });
|
||||
setNewSatId('');
|
||||
setNewSatChar('');
|
||||
}
|
||||
}}
|
||||
disabled={!newSatId || !newSatChar}
|
||||
className="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm rounded-lg transition-colors"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,115 +1,146 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useState, useCallback } from 'react'
|
||||
import ChatPanel from '../components/ChatPanel'
|
||||
import InputBar from '../components/InputBar'
|
||||
import StatusIndicator from '../components/StatusIndicator'
|
||||
import SettingsDrawer from '../components/SettingsDrawer'
|
||||
import ConversationList from '../components/ConversationList'
|
||||
import { useSettings } from '../hooks/useSettings'
|
||||
import { useBridgeHealth } from '../hooks/useBridgeHealth'
|
||||
import { useChat } from '../hooks/useChat'
|
||||
import { useTtsPlayback } from '../hooks/useTtsPlayback'
|
||||
import { useVoiceInput } from '../hooks/useVoiceInput'
|
||||
import { useActiveCharacter } from '../hooks/useActiveCharacter'
|
||||
import { useConversations } from '../hooks/useConversations'
|
||||
|
||||
export default function Chat() {
|
||||
const { settings, updateSetting } = useSettings()
|
||||
const isOnline = useBridgeHealth()
|
||||
const { messages, isLoading, send, clearHistory } = useChat()
|
||||
const { isPlaying, speak, stop } = useTtsPlayback(settings.voice)
|
||||
const character = useActiveCharacter()
|
||||
const {
|
||||
conversations, activeId, isLoading: isLoadingList,
|
||||
select, create, remove, updateMeta,
|
||||
} = useConversations()
|
||||
|
||||
const convMeta = {
|
||||
characterId: character?.id || '',
|
||||
characterName: character?.name || '',
|
||||
}
|
||||
|
||||
const { messages, isLoading, isLoadingConv, send, clearHistory } = useChat(activeId, convMeta, updateMeta)
|
||||
|
||||
// Use character's TTS config if available, fall back to global settings
|
||||
const ttsEngine = character?.tts?.engine || settings.ttsEngine
|
||||
const ttsVoice = ttsEngine === 'elevenlabs'
|
||||
? (character?.tts?.elevenlabs_voice_id || settings.voice)
|
||||
: (character?.tts?.kokoro_voice || settings.voice)
|
||||
const ttsModel = ttsEngine === 'elevenlabs' ? (character?.tts?.elevenlabs_model || null) : null
|
||||
const { isPlaying, speak, stop } = useTtsPlayback(ttsVoice, ttsEngine, ttsModel)
|
||||
const { isRecording, isTranscribing, startRecording, stopRecording } = useVoiceInput(settings.sttMode)
|
||||
const [settingsOpen, setSettingsOpen] = useState(false)
|
||||
|
||||
// Send a message and optionally speak the response
|
||||
const handleSend = useCallback(async (text) => {
|
||||
const response = await send(text)
|
||||
// Auto-create a conversation if none is active
|
||||
let newId = null
|
||||
if (!activeId) {
|
||||
newId = await create(convMeta.characterId, convMeta.characterName)
|
||||
}
|
||||
const response = await send(text, newId)
|
||||
if (response && settings.autoTts) {
|
||||
speak(response)
|
||||
}
|
||||
}, [send, settings.autoTts, speak])
|
||||
}, [activeId, create, convMeta, send, settings.autoTts, speak])
|
||||
|
||||
// Toggle voice recording
|
||||
const handleVoiceToggle = useCallback(async () => {
|
||||
if (isRecording) {
|
||||
const text = await stopRecording()
|
||||
if (text) {
|
||||
handleSend(text)
|
||||
}
|
||||
if (text) handleSend(text)
|
||||
} else {
|
||||
startRecording()
|
||||
}
|
||||
}, [isRecording, stopRecording, startRecording, handleSend])
|
||||
|
||||
// Space bar push-to-talk when input not focused
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.code === 'Space' && e.target.tagName !== 'TEXTAREA' && e.target.tagName !== 'INPUT') {
|
||||
e.preventDefault()
|
||||
handleVoiceToggle()
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [handleVoiceToggle])
|
||||
const handleNewChat = useCallback(() => {
|
||||
create(convMeta.characterId, convMeta.characterName)
|
||||
}, [create, convMeta])
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col min-h-0">
|
||||
{/* Status bar */}
|
||||
<header className="flex items-center justify-between px-4 py-2 border-b border-gray-800/50 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusIndicator isOnline={isOnline} />
|
||||
<span className="text-xs text-gray-500">
|
||||
{isOnline === null ? 'Connecting...' : isOnline ? 'Connected' : 'Offline'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{messages.length > 0 && (
|
||||
<button
|
||||
onClick={clearHistory}
|
||||
className="text-xs text-gray-500 hover:text-gray-300 transition-colors px-2 py-1"
|
||||
title="Clear conversation"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
{isPlaying && (
|
||||
<button
|
||||
onClick={stop}
|
||||
className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors px-2 py-1"
|
||||
title="Stop speaking"
|
||||
>
|
||||
Stop audio
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setSettingsOpen(true)}
|
||||
className="text-gray-500 hover:text-gray-300 transition-colors p-1"
|
||||
title="Settings"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div className="flex-1 flex min-h-0">
|
||||
{/* Conversation sidebar */}
|
||||
<ConversationList
|
||||
conversations={conversations}
|
||||
activeId={activeId}
|
||||
onCreate={handleNewChat}
|
||||
onSelect={select}
|
||||
onDelete={remove}
|
||||
/>
|
||||
|
||||
{/* Chat area */}
|
||||
<ChatPanel messages={messages} isLoading={isLoading} onReplay={speak} />
|
||||
<div className="flex-1 flex flex-col min-h-0 min-w-0">
|
||||
{/* Status bar */}
|
||||
<header className="flex items-center justify-between px-4 py-2 border-b border-gray-800/50 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusIndicator isOnline={isOnline} />
|
||||
<span className="text-xs text-gray-500">
|
||||
{isOnline === null ? 'Connecting...' : isOnline ? 'Connected' : 'Offline'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{messages.length > 0 && (
|
||||
<button
|
||||
onClick={clearHistory}
|
||||
className="text-xs text-gray-500 hover:text-gray-300 transition-colors px-2 py-1"
|
||||
title="Clear conversation"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
{isPlaying && (
|
||||
<button
|
||||
onClick={stop}
|
||||
className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors px-2 py-1"
|
||||
title="Stop speaking"
|
||||
>
|
||||
Stop audio
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setSettingsOpen(true)}
|
||||
className="text-gray-500 hover:text-gray-300 transition-colors p-1"
|
||||
title="Settings"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Input */}
|
||||
<InputBar
|
||||
onSend={handleSend}
|
||||
onVoiceToggle={handleVoiceToggle}
|
||||
isLoading={isLoading}
|
||||
isRecording={isRecording}
|
||||
isTranscribing={isTranscribing}
|
||||
/>
|
||||
{/* Messages */}
|
||||
<ChatPanel
|
||||
messages={messages}
|
||||
isLoading={isLoading || isLoadingConv}
|
||||
onReplay={speak}
|
||||
character={character}
|
||||
/>
|
||||
|
||||
{/* Settings drawer */}
|
||||
<SettingsDrawer
|
||||
isOpen={settingsOpen}
|
||||
onClose={() => setSettingsOpen(false)}
|
||||
settings={settings}
|
||||
onUpdate={updateSetting}
|
||||
/>
|
||||
{/* Input */}
|
||||
<InputBar
|
||||
onSend={handleSend}
|
||||
onVoiceToggle={handleVoiceToggle}
|
||||
isLoading={isLoading}
|
||||
isRecording={isRecording}
|
||||
isTranscribing={isTranscribing}
|
||||
/>
|
||||
|
||||
{/* Settings drawer */}
|
||||
<SettingsDrawer
|
||||
isOpen={settingsOpen}
|
||||
onClose={() => setSettingsOpen(false)}
|
||||
settings={settings}
|
||||
onUpdate={updateSetting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { validateCharacter } from '../lib/SchemaValidator';
|
||||
import { validateCharacter, migrateV1toV2 } from '../lib/SchemaValidator';
|
||||
|
||||
const DEFAULT_CHARACTER = {
|
||||
schema_version: 1,
|
||||
name: "aria",
|
||||
display_name: "Aria",
|
||||
description: "Default HomeAI assistant persona",
|
||||
system_prompt: "You are Aria, a warm, curious, and helpful AI assistant living in the home. You speak naturally and conversationally — never robotic. You are knowledgeable but never condescending. You remember the people you live with and build on those memories over time. Keep responses concise when controlling smart home devices; be more expressive in casual conversation. Never break character.",
|
||||
schema_version: 2,
|
||||
name: "",
|
||||
display_name: "",
|
||||
description: "",
|
||||
background: "",
|
||||
dialogue_style: "",
|
||||
appearance: "",
|
||||
skills: [],
|
||||
system_prompt: "",
|
||||
model_overrides: {
|
||||
primary: "llama3.3:70b",
|
||||
primary: "qwen3.5:35b-a3b",
|
||||
fast: "qwen2.5:7b"
|
||||
},
|
||||
tts: {
|
||||
@@ -16,24 +20,8 @@ const DEFAULT_CHARACTER = {
|
||||
kokoro_voice: "af_heart",
|
||||
speed: 1.0
|
||||
},
|
||||
live2d_expressions: {
|
||||
idle: "expr_idle",
|
||||
listening: "expr_listening",
|
||||
thinking: "expr_thinking",
|
||||
speaking: "expr_speaking",
|
||||
happy: "expr_happy",
|
||||
sad: "expr_sad",
|
||||
surprised: "expr_surprised",
|
||||
error: "expr_error"
|
||||
},
|
||||
vtube_ws_triggers: {
|
||||
thinking: { type: "hotkey", id: "expr_thinking" },
|
||||
speaking: { type: "hotkey", id: "expr_speaking" },
|
||||
idle: { type: "hotkey", id: "expr_idle" }
|
||||
},
|
||||
custom_rules: [
|
||||
{ trigger: "good morning", response: "Good morning! How did you sleep?", condition: "time_of_day == morning" }
|
||||
],
|
||||
gaze_presets: [],
|
||||
custom_rules: [],
|
||||
notes: ""
|
||||
};
|
||||
|
||||
@@ -43,7 +31,12 @@ export default function Editor() {
|
||||
if (editData) {
|
||||
sessionStorage.removeItem('edit_character');
|
||||
try {
|
||||
return JSON.parse(editData);
|
||||
const parsed = JSON.parse(editData);
|
||||
// Auto-migrate v1 data
|
||||
if (parsed.schema_version === 1 || !parsed.schema_version) {
|
||||
migrateV1toV2(parsed);
|
||||
}
|
||||
return parsed;
|
||||
} catch {
|
||||
return DEFAULT_CHARACTER;
|
||||
}
|
||||
@@ -52,6 +45,7 @@ export default function Editor() {
|
||||
});
|
||||
const [error, setError] = useState(null);
|
||||
const [saved, setSaved] = useState(false);
|
||||
const isEditing = !!sessionStorage.getItem('edit_character_profile_id');
|
||||
|
||||
// TTS preview state
|
||||
const [ttsState, setTtsState] = useState('idle');
|
||||
@@ -65,6 +59,19 @@ export default function Editor() {
|
||||
const [elevenLabsModels, setElevenLabsModels] = useState([]);
|
||||
const [isLoadingElevenLabs, setIsLoadingElevenLabs] = useState(false);
|
||||
|
||||
// GAZE presets state (from API)
|
||||
const [availableGazePresets, setAvailableGazePresets] = useState([]);
|
||||
const [isLoadingGaze, setIsLoadingGaze] = useState(false);
|
||||
|
||||
// Character lookup state
|
||||
const [lookupName, setLookupName] = useState('');
|
||||
const [lookupFranchise, setLookupFranchise] = useState('');
|
||||
const [isLookingUp, setIsLookingUp] = useState(false);
|
||||
const [lookupDone, setLookupDone] = useState(false);
|
||||
|
||||
// Skills input state
|
||||
const [newSkill, setNewSkill] = useState('');
|
||||
|
||||
const fetchElevenLabsData = async (key) => {
|
||||
if (!key) return;
|
||||
setIsLoadingElevenLabs(true);
|
||||
@@ -95,6 +102,16 @@ export default function Editor() {
|
||||
}
|
||||
}, [character.tts.engine]);
|
||||
|
||||
// Fetch GAZE presets on mount
|
||||
useEffect(() => {
|
||||
setIsLoadingGaze(true);
|
||||
fetch('/api/gaze/presets')
|
||||
.then(r => r.ok ? r.json() : { presets: [] })
|
||||
.then(data => setAvailableGazePresets(data.presets || []))
|
||||
.catch(() => {})
|
||||
.finally(() => setIsLoadingGaze(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (audioRef.current) { audioRef.current.pause(); audioRef.current = null; }
|
||||
@@ -119,27 +136,35 @@ export default function Editor() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveToProfiles = () => {
|
||||
const handleSaveToProfiles = async () => {
|
||||
try {
|
||||
validateCharacter(character);
|
||||
setError(null);
|
||||
|
||||
const profileId = sessionStorage.getItem('edit_character_profile_id');
|
||||
const storageKey = 'homeai_characters';
|
||||
const raw = localStorage.getItem(storageKey);
|
||||
let profiles = raw ? JSON.parse(raw) : [];
|
||||
let profile;
|
||||
|
||||
if (profileId) {
|
||||
profiles = profiles.map(p =>
|
||||
p.id === profileId ? { ...p, data: character } : p
|
||||
);
|
||||
sessionStorage.removeItem('edit_character_profile_id');
|
||||
const res = await fetch('/api/characters');
|
||||
const profiles = await res.json();
|
||||
const existing = profiles.find(p => p.id === profileId);
|
||||
profile = existing
|
||||
? { ...existing, data: character }
|
||||
: { id: profileId, data: character, image: null, addedAt: new Date().toISOString() };
|
||||
// Keep the profile ID in sessionStorage so subsequent saves update the same file
|
||||
} else {
|
||||
const id = character.name + '_' + Date.now();
|
||||
profiles.push({ id, data: character, image: null, addedAt: new Date().toISOString() });
|
||||
profile = { id, data: character, image: null, addedAt: new Date().toISOString() };
|
||||
// Store the new ID so subsequent saves update the same file
|
||||
sessionStorage.setItem('edit_character_profile_id', profile.id);
|
||||
}
|
||||
|
||||
localStorage.setItem(storageKey, JSON.stringify(profiles));
|
||||
await fetch('/api/characters', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(profile),
|
||||
});
|
||||
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
} catch (err) {
|
||||
@@ -164,6 +189,59 @@ export default function Editor() {
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
// Character lookup from MCP
|
||||
const handleCharacterLookup = async () => {
|
||||
if (!lookupName || !lookupFranchise) return;
|
||||
setIsLookingUp(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch('/api/character-lookup', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: lookupName, franchise: lookupFranchise }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: 'Lookup failed' }));
|
||||
throw new Error(err.error || `Lookup returned ${res.status}`);
|
||||
}
|
||||
const data = await res.json();
|
||||
|
||||
// Build dialogue_style from personality + notable quotes
|
||||
let dialogueStyle = data.personality || '';
|
||||
if (data.notable_quotes?.length) {
|
||||
dialogueStyle += '\n\nExample dialogue:\n' + data.notable_quotes.map(q => `"${q}"`).join('\n');
|
||||
}
|
||||
|
||||
// Filter abilities to clean text-only entries (skip image captions)
|
||||
const skills = (data.abilities || [])
|
||||
.filter(a => a.length > 20 && !a.includes('.jpg') && !a.includes('.png'))
|
||||
.slice(0, 10);
|
||||
|
||||
// Auto-generate system prompt
|
||||
const promptName = character.display_name || lookupName;
|
||||
const personality = data.personality ? data.personality.split('.').slice(0, 3).join('.') + '.' : '';
|
||||
const systemPrompt = `You are ${promptName} from ${lookupFranchise}. ${personality} Stay in character at all times. Respond naturally and conversationally.`;
|
||||
|
||||
setCharacter(prev => ({
|
||||
...prev,
|
||||
name: prev.name || lookupName.toLowerCase().replace(/\s+/g, '_'),
|
||||
display_name: prev.display_name || lookupName,
|
||||
description: data.description ? data.description.split('.').slice(0, 2).join('.') + '.' : prev.description,
|
||||
background: data.background || prev.background,
|
||||
appearance: data.appearance || prev.appearance,
|
||||
dialogue_style: dialogueStyle || prev.dialogue_style,
|
||||
skills: skills.length > 0 ? skills : prev.skills,
|
||||
system_prompt: prev.system_prompt || systemPrompt,
|
||||
}));
|
||||
|
||||
setLookupDone(true);
|
||||
} catch (err) {
|
||||
setError(`Character lookup failed: ${err.message}`);
|
||||
} finally {
|
||||
setIsLookingUp(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (field, value) => {
|
||||
setCharacter(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
@@ -175,6 +253,50 @@ export default function Editor() {
|
||||
}));
|
||||
};
|
||||
|
||||
// Skills helpers
|
||||
const addSkill = () => {
|
||||
const trimmed = newSkill.trim();
|
||||
if (!trimmed) return;
|
||||
setCharacter(prev => ({
|
||||
...prev,
|
||||
skills: [...(prev.skills || []), trimmed]
|
||||
}));
|
||||
setNewSkill('');
|
||||
};
|
||||
|
||||
const removeSkill = (index) => {
|
||||
setCharacter(prev => {
|
||||
const updated = [...(prev.skills || [])];
|
||||
updated.splice(index, 1);
|
||||
return { ...prev, skills: updated };
|
||||
});
|
||||
};
|
||||
|
||||
// GAZE preset helpers
|
||||
const addGazePreset = () => {
|
||||
setCharacter(prev => ({
|
||||
...prev,
|
||||
gaze_presets: [...(prev.gaze_presets || []), { preset: '', trigger: 'self-portrait' }]
|
||||
}));
|
||||
};
|
||||
|
||||
const removeGazePreset = (index) => {
|
||||
setCharacter(prev => {
|
||||
const updated = [...(prev.gaze_presets || [])];
|
||||
updated.splice(index, 1);
|
||||
return { ...prev, gaze_presets: updated };
|
||||
});
|
||||
};
|
||||
|
||||
const handleGazePresetChange = (index, field, value) => {
|
||||
setCharacter(prev => {
|
||||
const updated = [...(prev.gaze_presets || [])];
|
||||
updated[index] = { ...updated[index], [field]: value };
|
||||
return { ...prev, gaze_presets: updated };
|
||||
});
|
||||
};
|
||||
|
||||
// Custom rules helpers
|
||||
const handleRuleChange = (index, field, value) => {
|
||||
setCharacter(prev => {
|
||||
const newRules = [...(prev.custom_rules || [])];
|
||||
@@ -198,37 +320,40 @@ export default function Editor() {
|
||||
});
|
||||
};
|
||||
|
||||
// TTS preview
|
||||
const stopPreview = () => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
audioRef.current = null;
|
||||
}
|
||||
if (objectUrlRef.current) {
|
||||
URL.revokeObjectURL(objectUrlRef.current);
|
||||
objectUrlRef.current = null;
|
||||
}
|
||||
if (audioRef.current) { audioRef.current.pause(); audioRef.current = null; }
|
||||
if (objectUrlRef.current) { URL.revokeObjectURL(objectUrlRef.current); objectUrlRef.current = null; }
|
||||
window.speechSynthesis.cancel();
|
||||
setTtsState('idle');
|
||||
};
|
||||
|
||||
const previewTTS = async () => {
|
||||
stopPreview();
|
||||
const text = previewText || `Hi, I am ${character.display_name}. This is a preview of my voice.`;
|
||||
const text = previewText || `Hi, I am ${character.display_name || character.name}. This is a preview of my voice.`;
|
||||
const engine = character.tts.engine;
|
||||
|
||||
if (character.tts.engine === 'kokoro') {
|
||||
let bridgeBody = null;
|
||||
if (engine === 'kokoro') {
|
||||
bridgeBody = { text, voice: character.tts.kokoro_voice, engine: 'kokoro' };
|
||||
} else if (engine === 'elevenlabs' && character.tts.elevenlabs_voice_id) {
|
||||
bridgeBody = { text, voice: character.tts.elevenlabs_voice_id, engine: 'elevenlabs', model: character.tts.elevenlabs_model };
|
||||
}
|
||||
|
||||
if (bridgeBody) {
|
||||
setTtsState('loading');
|
||||
let blob;
|
||||
try {
|
||||
const response = await fetch('/api/tts', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text, voice: character.tts.kokoro_voice })
|
||||
body: JSON.stringify(bridgeBody)
|
||||
});
|
||||
if (!response.ok) throw new Error('TTS bridge returned ' + response.status);
|
||||
blob = await response.blob();
|
||||
} catch (err) {
|
||||
setTtsState('idle');
|
||||
setError(`Kokoro preview failed: ${err.message}. Falling back to browser TTS.`);
|
||||
setError(`${engine} preview failed: ${err.message}. Falling back to browser TTS.`);
|
||||
runBrowserTTS(text);
|
||||
return;
|
||||
}
|
||||
@@ -269,7 +394,9 @@ export default function Editor() {
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-100">Character Editor</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Editing: {character.display_name || character.name}
|
||||
{character.display_name || character.name
|
||||
? `Editing: ${character.display_name || character.name}`
|
||||
: 'New character'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
@@ -311,6 +438,64 @@ export default function Editor() {
|
||||
{error && (
|
||||
<div className="bg-red-900/30 border border-red-500/50 text-red-300 px-4 py-3 rounded-lg text-sm">
|
||||
{error}
|
||||
<button onClick={() => setError(null)} className="ml-2 text-red-400 hover:text-red-300">×</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Character Lookup — auto-fill from fictional character wiki */}
|
||||
{!isEditing && (
|
||||
<div className={cardClass}>
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
||||
</svg>
|
||||
<h2 className="text-lg font-semibold text-gray-200">Auto-fill from Character</h2>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">Fetch character data from Fandom/Wikipedia to auto-populate fields. You can edit everything after.</p>
|
||||
<div className="flex gap-3 items-end">
|
||||
<div className="flex-1">
|
||||
<label className={labelClass}>Character Name</label>
|
||||
<input
|
||||
type="text"
|
||||
className={inputClass}
|
||||
value={lookupName}
|
||||
onChange={(e) => setLookupName(e.target.value)}
|
||||
placeholder="e.g. Tifa Lockhart"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className={labelClass}>Franchise / Series</label>
|
||||
<input
|
||||
type="text"
|
||||
className={inputClass}
|
||||
value={lookupFranchise}
|
||||
onChange={(e) => setLookupFranchise(e.target.value)}
|
||||
placeholder="e.g. Final Fantasy VII"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCharacterLookup}
|
||||
disabled={isLookingUp || !lookupName || !lookupFranchise}
|
||||
className={`flex items-center gap-2 px-5 py-2 rounded-lg text-white transition-colors whitespace-nowrap ${
|
||||
isLookingUp
|
||||
? 'bg-indigo-800 cursor-wait'
|
||||
: lookupDone
|
||||
? 'bg-emerald-600 hover:bg-emerald-500'
|
||||
: 'bg-indigo-600 hover:bg-indigo-500 disabled:bg-gray-700 disabled:text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{isLookingUp && (
|
||||
<svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
)}
|
||||
{isLookingUp ? 'Fetching...' : lookupDone ? 'Fetched' : 'Lookup'}
|
||||
</button>
|
||||
</div>
|
||||
{lookupDone && (
|
||||
<p className="text-xs text-emerald-400">Fields populated from wiki data. Review and edit below.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -324,11 +509,11 @@ export default function Editor() {
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Display Name</label>
|
||||
<input type="text" className={inputClass} value={character.display_name} onChange={(e) => handleChange('display_name', e.target.value)} />
|
||||
<input type="text" className={inputClass} value={character.display_name || ''} onChange={(e) => handleChange('display_name', e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Description</label>
|
||||
<input type="text" className={inputClass} value={character.description} onChange={(e) => handleChange('description', e.target.value)} />
|
||||
<input type="text" className={inputClass} value={character.description || ''} onChange={(e) => handleChange('description', e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -359,7 +544,14 @@ export default function Editor() {
|
||||
<div>
|
||||
<label className={labelClass}>Voice ID</label>
|
||||
{elevenLabsVoices.length > 0 ? (
|
||||
<select className={selectClass} value={character.tts.elevenlabs_voice_id || ''} onChange={(e) => handleNestedChange('tts', 'elevenlabs_voice_id', e.target.value)}>
|
||||
<select className={selectClass} value={character.tts.elevenlabs_voice_id || ''} onChange={(e) => {
|
||||
const voiceId = e.target.value;
|
||||
const voice = elevenLabsVoices.find(v => v.voice_id === voiceId);
|
||||
setCharacter(prev => ({
|
||||
...prev,
|
||||
tts: { ...prev.tts, elevenlabs_voice_id: voiceId, elevenlabs_voice_name: voice?.name || '' }
|
||||
}));
|
||||
}}>
|
||||
<option value="">-- Select Voice --</option>
|
||||
{elevenLabsVoices.map(v => (
|
||||
<option key={v.voice_id} value={v.voice_id}>{v.name} ({v.category})</option>
|
||||
@@ -439,7 +631,7 @@ export default function Editor() {
|
||||
className={inputClass}
|
||||
value={previewText}
|
||||
onChange={(e) => setPreviewText(e.target.value)}
|
||||
placeholder={`Hi, I am ${character.display_name}. This is a preview of my voice.`}
|
||||
placeholder={`Hi, I am ${character.display_name || character.name || 'your character'}. This is a preview of my voice.`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
@@ -474,7 +666,9 @@ export default function Editor() {
|
||||
<p className="text-xs text-gray-600">
|
||||
{character.tts.engine === 'kokoro'
|
||||
? 'Previews via local Kokoro TTS bridge (port 8081).'
|
||||
: 'Uses browser TTS for preview. Local TTS available with Kokoro engine.'}
|
||||
: character.tts.engine === 'elevenlabs'
|
||||
? 'Previews via ElevenLabs through bridge.'
|
||||
: 'Uses browser TTS for preview. Local TTS available with Kokoro engine.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -483,25 +677,154 @@ export default function Editor() {
|
||||
<div className={cardClass}>
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold text-gray-200">System Prompt</h2>
|
||||
<span className="text-xs text-gray-600">{character.system_prompt.length} chars</span>
|
||||
<span className="text-xs text-gray-600">{(character.system_prompt || '').length} chars</span>
|
||||
</div>
|
||||
<textarea
|
||||
className={inputClass + " h-32 resize-y"}
|
||||
value={character.system_prompt}
|
||||
onChange={(e) => handleChange('system_prompt', e.target.value)}
|
||||
placeholder="You are [character name]. Describe their personality, behaviour, and role..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Character Profile — new v2 fields */}
|
||||
<div className={cardClass}>
|
||||
<h2 className="text-lg font-semibold text-gray-200">Character Profile</h2>
|
||||
<div>
|
||||
<label className={labelClass}>Background / Backstory</label>
|
||||
<textarea
|
||||
className={inputClass + " h-28 resize-y text-sm"}
|
||||
value={character.background || ''}
|
||||
onChange={(e) => handleChange('background', e.target.value)}
|
||||
placeholder="Character history, origins, key life events..."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Appearance</label>
|
||||
<textarea
|
||||
className={inputClass + " h-24 resize-y text-sm"}
|
||||
value={character.appearance || ''}
|
||||
onChange={(e) => handleChange('appearance', e.target.value)}
|
||||
placeholder="Physical description — also used for image generation prompts..."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Dialogue Style & Examples</label>
|
||||
<textarea
|
||||
className={inputClass + " h-24 resize-y text-sm"}
|
||||
value={character.dialogue_style || ''}
|
||||
onChange={(e) => handleChange('dialogue_style', e.target.value)}
|
||||
placeholder="How the persona speaks, their tone, mannerisms, and example lines..."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Skills & Interests</label>
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
{(character.skills || []).map((skill, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center gap-1 px-3 py-1 bg-indigo-500/20 text-indigo-300 text-sm rounded-full border border-indigo-500/30"
|
||||
>
|
||||
{skill.length > 80 ? skill.slice(0, 80) + '...' : skill}
|
||||
<button
|
||||
onClick={() => removeSkill(idx)}
|
||||
className="ml-1 text-indigo-400 hover:text-red-400 transition-colors"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
className={inputClass + " text-sm"}
|
||||
value={newSkill}
|
||||
onChange={(e) => setNewSkill(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addSkill(); } }}
|
||||
placeholder="Add a skill or interest..."
|
||||
/>
|
||||
<button
|
||||
onClick={addSkill}
|
||||
disabled={!newSkill.trim()}
|
||||
className="px-3 py-2 bg-indigo-600 hover:bg-indigo-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm rounded-lg transition-colors whitespace-nowrap"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Live2D Expressions */}
|
||||
{/* Image Generation — GAZE presets */}
|
||||
<div className={cardClass}>
|
||||
<h2 className="text-lg font-semibold text-gray-200">Live2D Expressions</h2>
|
||||
{Object.entries(character.live2d_expressions).map(([key, val]) => (
|
||||
<div key={key} className="flex justify-between items-center gap-4">
|
||||
<label className="text-sm font-medium text-gray-400 w-1/3 capitalize">{key}</label>
|
||||
<input type="text" className={inputClass + " w-2/3"} value={val} onChange={(e) => handleNestedChange('live2d_expressions', key, e.target.value)} />
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold text-gray-200">GAZE Presets</h2>
|
||||
<button onClick={addGazePreset} className="flex items-center gap-1 bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-1.5 rounded-lg text-sm transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Add Preset
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">Image generation presets with trigger conditions. Default trigger is "self-portrait".</p>
|
||||
|
||||
{(!character.gaze_presets || character.gaze_presets.length === 0) ? (
|
||||
<p className="text-sm text-gray-600 italic">No GAZE presets configured.</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{character.gaze_presets.map((gp, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2 border border-gray-700 p-3 rounded-lg bg-gray-800/50">
|
||||
<div className="flex-1">
|
||||
<label className="block text-xs text-gray-500 mb-1">Preset</label>
|
||||
{isLoadingGaze ? (
|
||||
<p className="text-sm text-gray-500">Loading...</p>
|
||||
) : availableGazePresets.length > 0 ? (
|
||||
<select
|
||||
className={selectClass + " text-sm"}
|
||||
value={gp.preset || ''}
|
||||
onChange={(e) => handleGazePresetChange(idx, 'preset', e.target.value)}
|
||||
>
|
||||
<option value="">-- Select --</option>
|
||||
{availableGazePresets.map(p => (
|
||||
<option key={p.slug} value={p.slug}>{p.name} ({p.slug})</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
className={inputClass + " text-sm"}
|
||||
value={gp.preset || ''}
|
||||
onChange={(e) => handleGazePresetChange(idx, 'preset', e.target.value)}
|
||||
placeholder="Preset slug"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-xs text-gray-500 mb-1">Trigger</label>
|
||||
<input
|
||||
type="text"
|
||||
className={inputClass + " text-sm"}
|
||||
value={gp.trigger || ''}
|
||||
onChange={(e) => handleGazePresetChange(idx, 'trigger', e.target.value)}
|
||||
placeholder="e.g. self-portrait, battle scene"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeGazePreset(idx)}
|
||||
className="mt-5 px-2 py-1.5 text-gray-500 hover:text-red-400 transition-colors"
|
||||
title="Remove"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Model Overrides */}
|
||||
@@ -509,7 +832,7 @@ export default function Editor() {
|
||||
<h2 className="text-lg font-semibold text-gray-200">Model Overrides</h2>
|
||||
<div>
|
||||
<label className={labelClass}>Primary Model</label>
|
||||
<select className={selectClass} value={character.model_overrides?.primary || 'llama3.3:70b'} onChange={(e) => handleNestedChange('model_overrides', 'primary', e.target.value)}>
|
||||
<select className={selectClass} value={character.model_overrides?.primary || 'qwen3.5:35b-a3b'} onChange={(e) => handleNestedChange('model_overrides', 'primary', e.target.value)}>
|
||||
<option value="llama3.3:70b">llama3.3:70b</option>
|
||||
<option value="qwen3.5:35b-a3b">qwen3.5:35b-a3b</option>
|
||||
<option value="qwen2.5:7b">qwen2.5:7b</option>
|
||||
@@ -576,6 +899,17 @@ export default function Editor() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div className={cardClass}>
|
||||
<h2 className="text-lg font-semibold text-gray-200">Notes</h2>
|
||||
<textarea
|
||||
className={inputClass + " h-20 resize-y text-sm"}
|
||||
value={character.notes || ''}
|
||||
onChange={(e) => handleChange('notes', e.target.value)}
|
||||
placeholder="Internal notes, reminders, or references..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
346
homeai-dashboard/src/pages/Memories.jsx
Normal file
346
homeai-dashboard/src/pages/Memories.jsx
Normal file
@@ -0,0 +1,346 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
getPersonalMemories, savePersonalMemory, deletePersonalMemory,
|
||||
getGeneralMemories, saveGeneralMemory, deleteGeneralMemory,
|
||||
} from '../lib/memoryApi';
|
||||
|
||||
const PERSONAL_CATEGORIES = [
|
||||
{ value: 'personal_info', label: 'Personal Info', color: 'bg-blue-500/20 text-blue-300 border-blue-500/30' },
|
||||
{ value: 'preference', label: 'Preference', color: 'bg-amber-500/20 text-amber-300 border-amber-500/30' },
|
||||
{ value: 'interaction', label: 'Interaction', color: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/30' },
|
||||
{ value: 'emotional', label: 'Emotional', color: 'bg-pink-500/20 text-pink-300 border-pink-500/30' },
|
||||
{ value: 'other', label: 'Other', color: 'bg-gray-500/20 text-gray-300 border-gray-500/30' },
|
||||
];
|
||||
|
||||
const GENERAL_CATEGORIES = [
|
||||
{ value: 'system', label: 'System', color: 'bg-indigo-500/20 text-indigo-300 border-indigo-500/30' },
|
||||
{ value: 'tool_usage', label: 'Tool Usage', color: 'bg-cyan-500/20 text-cyan-300 border-cyan-500/30' },
|
||||
{ value: 'home_layout', label: 'Home Layout', color: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/30' },
|
||||
{ value: 'device', label: 'Device', color: 'bg-amber-500/20 text-amber-300 border-amber-500/30' },
|
||||
{ value: 'routine', label: 'Routine', color: 'bg-purple-500/20 text-purple-300 border-purple-500/30' },
|
||||
{ value: 'other', label: 'Other', color: 'bg-gray-500/20 text-gray-300 border-gray-500/30' },
|
||||
];
|
||||
|
||||
const ACTIVE_KEY = 'homeai_active_character';
|
||||
|
||||
function CategoryBadge({ category, categories }) {
|
||||
const cat = categories.find(c => c.value === category) || categories[categories.length - 1];
|
||||
return (
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full border ${cat.color}`}>
|
||||
{cat.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function MemoryCard({ memory, categories, onEdit, onDelete }) {
|
||||
return (
|
||||
<div className="border border-gray-700 rounded-lg p-4 bg-gray-800/50 space-y-2">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<p className="text-sm text-gray-200 flex-1 whitespace-pre-wrap">{memory.content}</p>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<button
|
||||
onClick={() => onEdit(memory)}
|
||||
className="p-1.5 text-gray-500 hover:text-gray-300 transition-colors"
|
||||
title="Edit"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(memory.id)}
|
||||
className="p-1.5 text-gray-500 hover:text-red-400 transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CategoryBadge category={memory.category} categories={categories} />
|
||||
<span className="text-xs text-gray-600">
|
||||
{memory.createdAt ? new Date(memory.createdAt).toLocaleDateString() : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MemoryForm({ categories, editing, onSave, onCancel }) {
|
||||
const [content, setContent] = useState(editing?.content || '');
|
||||
const [category, setCategory] = useState(editing?.category || categories[0].value);
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!content.trim()) return;
|
||||
const memory = {
|
||||
...(editing?.id ? { id: editing.id } : {}),
|
||||
content: content.trim(),
|
||||
category,
|
||||
};
|
||||
onSave(memory);
|
||||
setContent('');
|
||||
setCategory(categories[0].value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border border-indigo-500/30 rounded-lg p-4 bg-indigo-500/5 space-y-3">
|
||||
<textarea
|
||||
className="w-full bg-gray-800 border border-gray-700 text-gray-200 p-2 rounded-lg text-sm h-20 resize-y focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none"
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
placeholder="Enter memory content..."
|
||||
autoFocus
|
||||
/>
|
||||
<div className="flex items-center gap-3">
|
||||
<select
|
||||
className="bg-gray-800 border border-gray-700 text-gray-200 text-sm p-2 rounded-lg focus:border-indigo-500 outline-none"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
>
|
||||
{categories.map(c => (
|
||||
<option key={c.value} value={c.value}>{c.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="flex gap-2 ml-auto">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-gray-300 text-sm rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={!content.trim()}
|
||||
className="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm rounded-lg transition-colors"
|
||||
>
|
||||
{editing?.id ? 'Update' : 'Add Memory'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Memories() {
|
||||
const [tab, setTab] = useState('personal'); // 'personal' | 'general'
|
||||
const [characters, setCharacters] = useState([]);
|
||||
const [selectedCharId, setSelectedCharId] = useState('');
|
||||
const [memories, setMemories] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editing, setEditing] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
const [filter, setFilter] = useState('');
|
||||
|
||||
// Load characters list
|
||||
useEffect(() => {
|
||||
fetch('/api/characters')
|
||||
.then(r => r.json())
|
||||
.then(chars => {
|
||||
setCharacters(chars);
|
||||
const activeId = localStorage.getItem(ACTIVE_KEY);
|
||||
if (activeId && chars.some(c => c.id === activeId)) {
|
||||
setSelectedCharId(activeId);
|
||||
} else if (chars.length > 0) {
|
||||
setSelectedCharId(chars[0].id);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
// Load memories when tab or selected character changes
|
||||
const loadMemories = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (tab === 'personal' && selectedCharId) {
|
||||
const data = await getPersonalMemories(selectedCharId);
|
||||
setMemories(data.memories || []);
|
||||
} else if (tab === 'general') {
|
||||
const data = await getGeneralMemories();
|
||||
setMemories(data.memories || []);
|
||||
} else {
|
||||
setMemories([]);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [tab, selectedCharId]);
|
||||
|
||||
useEffect(() => { loadMemories(); }, [loadMemories]);
|
||||
|
||||
const handleSave = async (memory) => {
|
||||
try {
|
||||
if (tab === 'personal') {
|
||||
await savePersonalMemory(selectedCharId, memory);
|
||||
} else {
|
||||
await saveGeneralMemory(memory);
|
||||
}
|
||||
setShowForm(false);
|
||||
setEditing(null);
|
||||
await loadMemories();
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (memoryId) => {
|
||||
try {
|
||||
if (tab === 'personal') {
|
||||
await deletePersonalMemory(selectedCharId, memoryId);
|
||||
} else {
|
||||
await deleteGeneralMemory(memoryId);
|
||||
}
|
||||
await loadMemories();
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (memory) => {
|
||||
setEditing(memory);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const categories = tab === 'personal' ? PERSONAL_CATEGORIES : GENERAL_CATEGORIES;
|
||||
const filteredMemories = filter
|
||||
? memories.filter(m => m.content?.toLowerCase().includes(filter.toLowerCase()) || m.category === filter)
|
||||
: memories;
|
||||
|
||||
// Sort newest first
|
||||
const sortedMemories = [...filteredMemories].sort(
|
||||
(a, b) => (b.createdAt || '').localeCompare(a.createdAt || '')
|
||||
);
|
||||
|
||||
const selectedChar = characters.find(c => c.id === selectedCharId);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-100">Memories</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
{sortedMemories.length} {tab} memor{sortedMemories.length !== 1 ? 'ies' : 'y'}
|
||||
{tab === 'personal' && selectedChar && (
|
||||
<span className="ml-1 text-indigo-400">
|
||||
for {selectedChar.data?.display_name || selectedChar.data?.name || selectedCharId}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { setEditing(null); setShowForm(!showForm); }}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Add Memory
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-900/30 border border-red-500/50 text-red-300 px-4 py-3 rounded-lg text-sm">
|
||||
{error}
|
||||
<button onClick={() => setError(null)} className="ml-2 text-red-400 hover:text-red-300">×</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 bg-gray-900 p-1 rounded-lg border border-gray-800 w-fit">
|
||||
<button
|
||||
onClick={() => { setTab('personal'); setShowForm(false); setEditing(null); }}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
|
||||
tab === 'personal'
|
||||
? 'bg-gray-800 text-white'
|
||||
: 'text-gray-400 hover:text-gray-200'
|
||||
}`}
|
||||
>
|
||||
Personal
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setTab('general'); setShowForm(false); setEditing(null); }}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
|
||||
tab === 'general'
|
||||
? 'bg-gray-800 text-white'
|
||||
: 'text-gray-400 hover:text-gray-200'
|
||||
}`}
|
||||
>
|
||||
General
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Character selector (personal tab only) */}
|
||||
{tab === 'personal' && (
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="text-sm text-gray-400">Character</label>
|
||||
<select
|
||||
value={selectedCharId}
|
||||
onChange={(e) => setSelectedCharId(e.target.value)}
|
||||
className="bg-gray-800 border border-gray-700 text-gray-200 text-sm p-2 rounded-lg focus:border-indigo-500 outline-none"
|
||||
>
|
||||
{characters.map(c => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.data?.display_name || c.data?.name || c.id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search filter */}
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full bg-gray-800 border border-gray-700 text-gray-200 p-2 rounded-lg text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none"
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
placeholder="Search memories..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Add/Edit form */}
|
||||
{showForm && (
|
||||
<MemoryForm
|
||||
categories={categories}
|
||||
editing={editing}
|
||||
onSave={handleSave}
|
||||
onCancel={() => { setShowForm(false); setEditing(null); }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Memory list */}
|
||||
{loading ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500">Loading memories...</p>
|
||||
</div>
|
||||
) : sortedMemories.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<svg className="w-12 h-12 mx-auto text-gray-700 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
|
||||
</svg>
|
||||
<p className="text-gray-500 text-sm">
|
||||
{filter ? 'No memories match your search.' : 'No memories yet. Add one to get started.'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{sortedMemories.map(memory => (
|
||||
<MemoryCard
|
||||
key={memory.id}
|
||||
memory={memory}
|
||||
categories={categories}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,6 +2,267 @@ import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
const CHARACTERS_DIR = '/Users/aodhan/homeai-data/characters'
|
||||
const SATELLITE_MAP_PATH = '/Users/aodhan/homeai-data/satellite-map.json'
|
||||
const CONVERSATIONS_DIR = '/Users/aodhan/homeai-data/conversations'
|
||||
const MEMORIES_DIR = '/Users/aodhan/homeai-data/memories'
|
||||
const GAZE_HOST = 'http://10.0.0.101:5782'
|
||||
const GAZE_API_KEY = process.env.GAZE_API_KEY || ''
|
||||
|
||||
function characterStoragePlugin() {
|
||||
return {
|
||||
name: 'character-storage',
|
||||
configureServer(server) {
|
||||
const ensureDir = async () => {
|
||||
const { mkdir } = await import('fs/promises')
|
||||
await mkdir(CHARACTERS_DIR, { recursive: true })
|
||||
}
|
||||
|
||||
// GET /api/characters — list all profiles
|
||||
server.middlewares.use('/api/characters', async (req, res, next) => {
|
||||
if (req.method === 'OPTIONS') {
|
||||
res.writeHead(204, { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET,POST,DELETE', 'Access-Control-Allow-Headers': 'Content-Type' })
|
||||
res.end()
|
||||
return
|
||||
}
|
||||
|
||||
const { readdir, readFile, writeFile, unlink } = await import('fs/promises')
|
||||
await ensureDir()
|
||||
|
||||
// req.url has the mount prefix stripped by connect, so "/" means /api/characters
|
||||
const url = new URL(req.url, 'http://localhost')
|
||||
const subPath = url.pathname.replace(/^\/+/, '')
|
||||
|
||||
// GET /api/characters/:id — single profile
|
||||
if (req.method === 'GET' && subPath) {
|
||||
try {
|
||||
const safeId = subPath.replace(/[^a-zA-Z0-9_\-\.]/g, '_')
|
||||
const raw = await readFile(`${CHARACTERS_DIR}/${safeId}.json`, 'utf-8')
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(raw)
|
||||
} catch {
|
||||
res.writeHead(404, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ error: 'Not found' }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (req.method === 'GET' && !subPath) {
|
||||
try {
|
||||
const files = (await readdir(CHARACTERS_DIR)).filter(f => f.endsWith('.json'))
|
||||
const profiles = []
|
||||
for (const file of files) {
|
||||
try {
|
||||
const raw = await readFile(`${CHARACTERS_DIR}/${file}`, 'utf-8')
|
||||
profiles.push(JSON.parse(raw))
|
||||
} catch { /* skip corrupt files */ }
|
||||
}
|
||||
// Sort by addedAt descending
|
||||
profiles.sort((a, b) => (b.addedAt || '').localeCompare(a.addedAt || ''))
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify(profiles))
|
||||
} catch (err) {
|
||||
res.writeHead(500, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: err.message }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (req.method === 'POST' && !subPath) {
|
||||
try {
|
||||
const chunks = []
|
||||
for await (const chunk of req) chunks.push(chunk)
|
||||
const profile = JSON.parse(Buffer.concat(chunks).toString())
|
||||
if (!profile.id) {
|
||||
res.writeHead(400, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: 'Missing profile id' }))
|
||||
return
|
||||
}
|
||||
// Sanitize filename — only allow alphanumeric, underscore, dash, dot
|
||||
const safeId = profile.id.replace(/[^a-zA-Z0-9_\-\.]/g, '_')
|
||||
await writeFile(`${CHARACTERS_DIR}/${safeId}.json`, JSON.stringify(profile, null, 2))
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ ok: true }))
|
||||
} catch (err) {
|
||||
res.writeHead(500, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: err.message }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (req.method === 'DELETE' && subPath) {
|
||||
try {
|
||||
const safeId = subPath.replace(/[^a-zA-Z0-9_\-\.]/g, '_')
|
||||
await unlink(`${CHARACTERS_DIR}/${safeId}.json`).catch(() => {})
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ ok: true }))
|
||||
} catch (err) {
|
||||
res.writeHead(500, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: err.message }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function satelliteMapPlugin() {
|
||||
return {
|
||||
name: 'satellite-map',
|
||||
configureServer(server) {
|
||||
server.middlewares.use('/api/satellite-map', async (req, res, next) => {
|
||||
if (req.method === 'OPTIONS') {
|
||||
res.writeHead(204, { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET,POST', 'Access-Control-Allow-Headers': 'Content-Type' })
|
||||
res.end()
|
||||
return
|
||||
}
|
||||
|
||||
const { readFile, writeFile } = await import('fs/promises')
|
||||
|
||||
if (req.method === 'GET') {
|
||||
try {
|
||||
const raw = await readFile(SATELLITE_MAP_PATH, 'utf-8')
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(raw)
|
||||
} catch {
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ default: 'aria_default', satellites: {} }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (req.method === 'POST') {
|
||||
try {
|
||||
const chunks = []
|
||||
for await (const chunk of req) chunks.push(chunk)
|
||||
const data = JSON.parse(Buffer.concat(chunks).toString())
|
||||
await writeFile(SATELLITE_MAP_PATH, JSON.stringify(data, null, 2))
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ ok: true }))
|
||||
} catch (err) {
|
||||
res.writeHead(500, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: err.message }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function conversationStoragePlugin() {
|
||||
return {
|
||||
name: 'conversation-storage',
|
||||
configureServer(server) {
|
||||
const ensureDir = async () => {
|
||||
const { mkdir } = await import('fs/promises')
|
||||
await mkdir(CONVERSATIONS_DIR, { recursive: true })
|
||||
}
|
||||
|
||||
server.middlewares.use('/api/conversations', async (req, res, next) => {
|
||||
if (req.method === 'OPTIONS') {
|
||||
res.writeHead(204, { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET,POST,DELETE', 'Access-Control-Allow-Headers': 'Content-Type' })
|
||||
res.end()
|
||||
return
|
||||
}
|
||||
|
||||
const { readdir, readFile, writeFile, unlink } = await import('fs/promises')
|
||||
await ensureDir()
|
||||
|
||||
const url = new URL(req.url, 'http://localhost')
|
||||
const subPath = url.pathname.replace(/^\/+/, '')
|
||||
|
||||
// GET /api/conversations/:id — single conversation with messages
|
||||
if (req.method === 'GET' && subPath) {
|
||||
try {
|
||||
const safeId = subPath.replace(/[^a-zA-Z0-9_\-\.]/g, '_')
|
||||
const raw = await readFile(`${CONVERSATIONS_DIR}/${safeId}.json`, 'utf-8')
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(raw)
|
||||
} catch {
|
||||
res.writeHead(404, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ error: 'Not found' }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// GET /api/conversations — list metadata (no messages)
|
||||
if (req.method === 'GET' && !subPath) {
|
||||
try {
|
||||
const files = (await readdir(CONVERSATIONS_DIR)).filter(f => f.endsWith('.json'))
|
||||
const list = []
|
||||
for (const file of files) {
|
||||
try {
|
||||
const raw = await readFile(`${CONVERSATIONS_DIR}/${file}`, 'utf-8')
|
||||
const conv = JSON.parse(raw)
|
||||
list.push({
|
||||
id: conv.id,
|
||||
title: conv.title || '',
|
||||
characterId: conv.characterId || '',
|
||||
characterName: conv.characterName || '',
|
||||
createdAt: conv.createdAt || '',
|
||||
updatedAt: conv.updatedAt || '',
|
||||
messageCount: (conv.messages || []).length,
|
||||
})
|
||||
} catch { /* skip corrupt files */ }
|
||||
}
|
||||
list.sort((a, b) => (b.updatedAt || '').localeCompare(a.updatedAt || ''))
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify(list))
|
||||
} catch (err) {
|
||||
res.writeHead(500, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: err.message }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// POST /api/conversations — create or update
|
||||
if (req.method === 'POST' && !subPath) {
|
||||
try {
|
||||
const chunks = []
|
||||
for await (const chunk of req) chunks.push(chunk)
|
||||
const conv = JSON.parse(Buffer.concat(chunks).toString())
|
||||
if (!conv.id) {
|
||||
res.writeHead(400, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: 'Missing conversation id' }))
|
||||
return
|
||||
}
|
||||
const safeId = conv.id.replace(/[^a-zA-Z0-9_\-\.]/g, '_')
|
||||
await writeFile(`${CONVERSATIONS_DIR}/${safeId}.json`, JSON.stringify(conv, null, 2))
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ ok: true }))
|
||||
} catch (err) {
|
||||
res.writeHead(500, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: err.message }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// DELETE /api/conversations/:id
|
||||
if (req.method === 'DELETE' && subPath) {
|
||||
try {
|
||||
const safeId = subPath.replace(/[^a-zA-Z0-9_\-\.]/g, '_')
|
||||
await unlink(`${CONVERSATIONS_DIR}/${safeId}.json`).catch(() => {})
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ ok: true }))
|
||||
} catch (err) {
|
||||
res.writeHead(500, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: err.message }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function healthCheckPlugin() {
|
||||
return {
|
||||
name: 'health-check-proxy',
|
||||
@@ -121,6 +382,273 @@ function healthCheckPlugin() {
|
||||
};
|
||||
}
|
||||
|
||||
function gazeProxyPlugin() {
|
||||
return {
|
||||
name: 'gaze-proxy',
|
||||
configureServer(server) {
|
||||
server.middlewares.use('/api/gaze/presets', async (req, res) => {
|
||||
if (!GAZE_API_KEY) {
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ presets: [] }))
|
||||
return
|
||||
}
|
||||
try {
|
||||
const http = await import('http')
|
||||
const url = new URL(`${GAZE_HOST}/api/v1/presets`)
|
||||
const proxyRes = await new Promise((resolve, reject) => {
|
||||
const r = http.default.get(url, { headers: { 'X-API-Key': GAZE_API_KEY }, timeout: 5000 }, resolve)
|
||||
r.on('error', reject)
|
||||
r.on('timeout', () => { r.destroy(); reject(new Error('timeout')) })
|
||||
})
|
||||
const chunks = []
|
||||
for await (const chunk of proxyRes) chunks.push(chunk)
|
||||
res.writeHead(proxyRes.statusCode, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(Buffer.concat(chunks))
|
||||
} catch {
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ presets: [] }))
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function memoryStoragePlugin() {
|
||||
return {
|
||||
name: 'memory-storage',
|
||||
configureServer(server) {
|
||||
const ensureDirs = async () => {
|
||||
const { mkdir } = await import('fs/promises')
|
||||
await mkdir(`${MEMORIES_DIR}/personal`, { recursive: true })
|
||||
}
|
||||
|
||||
const readJsonFile = async (path, fallback) => {
|
||||
const { readFile } = await import('fs/promises')
|
||||
try {
|
||||
return JSON.parse(await readFile(path, 'utf-8'))
|
||||
} catch {
|
||||
return fallback
|
||||
}
|
||||
}
|
||||
|
||||
const writeJsonFile = async (path, data) => {
|
||||
const { writeFile } = await import('fs/promises')
|
||||
await writeFile(path, JSON.stringify(data, null, 2))
|
||||
}
|
||||
|
||||
// Personal memories: /api/memories/personal/:characterId[/:memoryId]
|
||||
server.middlewares.use('/api/memories/personal', async (req, res, next) => {
|
||||
if (req.method === 'OPTIONS') {
|
||||
res.writeHead(204, { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET,POST,DELETE', 'Access-Control-Allow-Headers': 'Content-Type' })
|
||||
res.end()
|
||||
return
|
||||
}
|
||||
|
||||
await ensureDirs()
|
||||
const url = new URL(req.url, 'http://localhost')
|
||||
const parts = url.pathname.replace(/^\/+/, '').split('/')
|
||||
const characterId = parts[0] ? parts[0].replace(/[^a-zA-Z0-9_\-\.]/g, '_') : null
|
||||
const memoryId = parts[1] || null
|
||||
|
||||
if (!characterId) {
|
||||
res.writeHead(400, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: 'Missing character ID' }))
|
||||
return
|
||||
}
|
||||
|
||||
const filePath = `${MEMORIES_DIR}/personal/${characterId}.json`
|
||||
|
||||
if (req.method === 'GET') {
|
||||
const data = await readJsonFile(filePath, { characterId, memories: [] })
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify(data))
|
||||
return
|
||||
}
|
||||
|
||||
if (req.method === 'POST') {
|
||||
try {
|
||||
const chunks = []
|
||||
for await (const chunk of req) chunks.push(chunk)
|
||||
const memory = JSON.parse(Buffer.concat(chunks).toString())
|
||||
const data = await readJsonFile(filePath, { characterId, memories: [] })
|
||||
if (memory.id) {
|
||||
const idx = data.memories.findIndex(m => m.id === memory.id)
|
||||
if (idx >= 0) {
|
||||
data.memories[idx] = { ...data.memories[idx], ...memory }
|
||||
} else {
|
||||
data.memories.push(memory)
|
||||
}
|
||||
} else {
|
||||
memory.id = 'm_' + Date.now()
|
||||
memory.createdAt = memory.createdAt || new Date().toISOString()
|
||||
data.memories.push(memory)
|
||||
}
|
||||
await writeJsonFile(filePath, data)
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ ok: true, memory }))
|
||||
} catch (err) {
|
||||
res.writeHead(500, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: err.message }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (req.method === 'DELETE' && memoryId) {
|
||||
try {
|
||||
const data = await readJsonFile(filePath, { characterId, memories: [] })
|
||||
data.memories = data.memories.filter(m => m.id !== memoryId)
|
||||
await writeJsonFile(filePath, data)
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ ok: true }))
|
||||
} catch (err) {
|
||||
res.writeHead(500, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: err.message }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
|
||||
// General memories: /api/memories/general[/:memoryId]
|
||||
server.middlewares.use('/api/memories/general', async (req, res, next) => {
|
||||
if (req.method === 'OPTIONS') {
|
||||
res.writeHead(204, { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET,POST,DELETE', 'Access-Control-Allow-Headers': 'Content-Type' })
|
||||
res.end()
|
||||
return
|
||||
}
|
||||
|
||||
await ensureDirs()
|
||||
const url = new URL(req.url, 'http://localhost')
|
||||
const memoryId = url.pathname.replace(/^\/+/, '') || null
|
||||
const filePath = `${MEMORIES_DIR}/general.json`
|
||||
|
||||
if (req.method === 'GET') {
|
||||
const data = await readJsonFile(filePath, { memories: [] })
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify(data))
|
||||
return
|
||||
}
|
||||
|
||||
if (req.method === 'POST') {
|
||||
try {
|
||||
const chunks = []
|
||||
for await (const chunk of req) chunks.push(chunk)
|
||||
const memory = JSON.parse(Buffer.concat(chunks).toString())
|
||||
const data = await readJsonFile(filePath, { memories: [] })
|
||||
if (memory.id) {
|
||||
const idx = data.memories.findIndex(m => m.id === memory.id)
|
||||
if (idx >= 0) {
|
||||
data.memories[idx] = { ...data.memories[idx], ...memory }
|
||||
} else {
|
||||
data.memories.push(memory)
|
||||
}
|
||||
} else {
|
||||
memory.id = 'm_' + Date.now()
|
||||
memory.createdAt = memory.createdAt || new Date().toISOString()
|
||||
data.memories.push(memory)
|
||||
}
|
||||
await writeJsonFile(filePath, data)
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ ok: true, memory }))
|
||||
} catch (err) {
|
||||
res.writeHead(500, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: err.message }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (req.method === 'DELETE' && memoryId) {
|
||||
try {
|
||||
const data = await readJsonFile(filePath, { memories: [] })
|
||||
data.memories = data.memories.filter(m => m.id !== memoryId)
|
||||
await writeJsonFile(filePath, data)
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ ok: true }))
|
||||
} catch (err) {
|
||||
res.writeHead(500, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: err.message }))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function characterLookupPlugin() {
|
||||
return {
|
||||
name: 'character-lookup',
|
||||
configureServer(server) {
|
||||
server.middlewares.use('/api/character-lookup', async (req, res) => {
|
||||
if (req.method === 'OPTIONS') {
|
||||
res.writeHead(204, { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'POST', 'Access-Control-Allow-Headers': 'Content-Type' })
|
||||
res.end()
|
||||
return
|
||||
}
|
||||
if (req.method !== 'POST') {
|
||||
res.writeHead(405, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: 'POST only' }))
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const chunks = []
|
||||
for await (const chunk of req) chunks.push(chunk)
|
||||
const { name, franchise } = JSON.parse(Buffer.concat(chunks).toString())
|
||||
if (!name || !franchise) {
|
||||
res.writeHead(400, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: 'Missing name or franchise' }))
|
||||
return
|
||||
}
|
||||
|
||||
const { execFile } = await import('child_process')
|
||||
const { promisify } = await import('util')
|
||||
const execFileAsync = promisify(execFile)
|
||||
|
||||
// Call the MCP fetcher inside the running Docker container
|
||||
const safeName = name.replace(/'/g, "\\'")
|
||||
const safeFranchise = franchise.replace(/'/g, "\\'")
|
||||
const pyScript = `
|
||||
import asyncio, json
|
||||
from character_details.fetcher import fetch_character
|
||||
c = asyncio.run(fetch_character('${safeName}', '${safeFranchise}'))
|
||||
print(json.dumps(c.model_dump(), default=str))
|
||||
`.trim()
|
||||
|
||||
const { stdout } = await execFileAsync(
|
||||
'docker',
|
||||
['exec', 'character-browser-character-mcp-1', 'python', '-c', pyScript],
|
||||
{ timeout: 30000 }
|
||||
)
|
||||
|
||||
const data = JSON.parse(stdout.trim())
|
||||
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({
|
||||
name: data.name || name,
|
||||
franchise: data.franchise || franchise,
|
||||
description: data.description || '',
|
||||
background: data.background || '',
|
||||
appearance: data.appearance || '',
|
||||
personality: data.personality || '',
|
||||
abilities: data.abilities || [],
|
||||
notable_quotes: data.notable_quotes || [],
|
||||
relationships: data.relationships || [],
|
||||
sources: data.sources || [],
|
||||
}))
|
||||
} catch (err) {
|
||||
console.error('[character-lookup] failed:', err?.message || err)
|
||||
const status = err?.message?.includes('timeout') ? 504 : 500
|
||||
res.writeHead(status, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
|
||||
res.end(JSON.stringify({ error: err?.message || 'Lookup failed' }))
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function bridgeProxyPlugin() {
|
||||
return {
|
||||
name: 'bridge-proxy',
|
||||
@@ -172,10 +700,11 @@ function bridgeProxyPlugin() {
|
||||
proxyReq.write(body)
|
||||
proxyReq.end()
|
||||
})
|
||||
} catch {
|
||||
} catch (err) {
|
||||
console.error(`[bridge-proxy] ${targetPath} failed:`, err?.message || err)
|
||||
if (!res.headersSent) {
|
||||
res.writeHead(502, { 'Content-Type': 'application/json' })
|
||||
res.end(JSON.stringify({ error: 'Bridge unreachable' }))
|
||||
res.end(JSON.stringify({ error: `Bridge unreachable: ${err?.message || 'unknown'}` }))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -189,6 +718,12 @@ function bridgeProxyPlugin() {
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
characterStoragePlugin(),
|
||||
satelliteMapPlugin(),
|
||||
conversationStoragePlugin(),
|
||||
memoryStoragePlugin(),
|
||||
gazeProxyPlugin(),
|
||||
characterLookupPlugin(),
|
||||
healthCheckPlugin(),
|
||||
bridgeProxyPlugin(),
|
||||
tailwindcss(),
|
||||
|
||||
Reference in New Issue
Block a user