Michael/EveFlow
1
0 Fork 0
mirror of https://github.com/R0m1k3/EveFlow.git synced 2026-10-11 17:29:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Release EveFlow 1.0.3 visual cockpit update

Browse Source
This commit is contained in:
Michael committed 2026-05-21 14:11:19 +02:00
1 parent 17e573911d
commit 6d4499f78f
13 files changed
+2234 -306
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.github/workflows/windows-release.yml
+56
View File
@@ -0,0 +1,56 @@
name: Windows EXE
on:
push:
branches:
- main
- master
tags:
- "v*"
workflow_dispatch:
permissions:
contents: write
jobs:
build-windows:
name: Build Windows installer
runs-on: windows-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- name: Install dependencies
run: npm ci
- name: Build app
run: npm run build
- name: Build Windows EXE
run: npm run dist
- name: Upload Windows artifact
uses: actions/upload-artifact@v4
with:
name: EveFlow-Windows-${{ github.ref_name }}
path: |
out/*.exe
out/*.exe.blockmap
out/latest.yml
if-no-files-found: error
- name: Publish GitHub release
if: startsWith(github.ref, 'refs/tags/v')
uses: softprops/action-gh-release@v2
with:
files: |
out/*.exe
out/*.exe.blockmap
out/latest.yml
.gitignore
+1
View File
@@ -1,5 +1,6 @@
node_modules/
dist/
out/
.env
.env.local
*.log
main.js
+30 -6
View File
@@ -199,10 +199,10 @@ async function loadApp() {
function createWindow() {
mainWindow = new BrowserWindow({
width: 1000,
height: 700,
minWidth: 400,
minHeight: 500,
width: 1120,
height: 860,
minWidth: 900,
minHeight: 680,
frame: false, // Supprime la barre de titre classique pour un style rétro-futuriste personnalisé
transparent: true, // Permet la transparence (fond de fenêtre transparent)
backgroundColor: '#00000000', // Fond transparent
@@ -294,14 +294,38 @@ ipcMain.on('set-window-mode', (event, mode) => {
} else {
// Mode normal : chat complet
mainWindow.setAlwaysOnTop(false);
mainWindow.setMinimumSize(400, 500);
mainWindow.setSize(1000, 700);
mainWindow.setMinimumSize(900, 680);
mainWindow.setSize(1120, 860);
mainWindow.center();
event.reply('window-mode-changed', 'normal');
}
});
// IPC Handler pour ouvrir/fermer le cockpit sans ecraser Eve.
ipcMain.on('set-cockpit-mode', (_event, isOpen) => {
if (!mainWindow) return;
if (mainWindow.isMaximized()) return;
const { screen } = require('electron');
const display = screen.getDisplayMatching(mainWindow.getBounds());
const workArea = display.workArea;
const bounds = mainWindow.getBounds();
const targetWidth = isOpen ? 1460 : 1120;
const nextWidth = Math.min(targetWidth, Math.max(900, workArea.width - 40));
const nextHeight = Math.min(Math.max(bounds.height, 820), workArea.height - 40);
const nextX = Math.min(bounds.x, workArea.x + workArea.width - nextWidth - 20);
const nextY = Math.min(bounds.y, workArea.y + workArea.height - nextHeight - 20);
mainWindow.setMinimumSize(isOpen ? 1180 : 900, 680);
mainWindow.setBounds({
x: Math.max(workArea.x + 20, nextX),
y: Math.max(workArea.y + 20, nextY),
width: nextWidth,
height: nextHeight
}, true);
});
// ── IPC Handler : écriture des logs du renderer vers disque ─────────────────
ipcMain.on('write-log', (event, entry) => {
writeLogEntry(entry);
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "eveflow",
"version": "1.0.2",
"version": "1.0.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "eveflow",
"version": "1.0.2",
"version": "1.0.3",
"dependencies": {
"@react-three/drei": "^9.105.0",
"@react-three/fiber": "^8.16.0",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "eveflow",
"version": "1.0.2",
"version": "1.0.3",
"description": "Retro-futuristic Windows companion with 3D Eve bot, local TTS/STT, and multi-agent connectivity",
"main": "main.js",
"scripts": {
preload.js
+1
View File
@@ -4,6 +4,7 @@ const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
windowControl: (action) => ipcRenderer.send('window-control', action),
setWindowMode: (mode) => ipcRenderer.send('set-window-mode', mode),
setCockpitMode: (isOpen) => ipcRenderer.send('set-cockpit-mode', isOpen),
onWindowModeChanged: (callback) => {
const subscription = (event, mode) => callback(mode);
ipcRenderer.on('window-mode-changed', subscription);
public/avatars/eve-round.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 621 KiB

src/App.tsx
+279 -249
View File
@@ -3,9 +3,10 @@ import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
Send, Mic, MicOff, Settings, MessageSquare, Volume2, VolumeX,
Sparkles, Cpu, Minimize2, X, AlertCircle, StopCircle, Paperclip,
Cpu, Minimize2, X, AlertCircle, StopCircle, Paperclip,
CalendarClock, History, Wrench, Play, Pause, RefreshCw, Trash2, Plus,
CheckCircle2, WifiOff, Edit3, Save
CheckCircle2, WifiOff, Edit3, Save, ChevronUp, ExternalLink,
BriefcaseBusiness, AlertTriangle
} from 'lucide-react';
import { ThreeCanvas, ToolEvent } from './components/ThreeCanvas';
import { AudioService } from './services/audioService';
@@ -13,7 +14,6 @@ import { AgentService, AgentConfig, AgentProvider } from './services/agentServic
import { EmotionService, EveAvatar, EveEmotion } from './services/emotionService';
import { HermesJob, HermesJobDraft, PollingService } from './services/pollingService';
import { AppCallbacks } from './services/toolRegistry';
import { version } from '../package.json';
interface Message {
id: string;
@@ -585,6 +585,7 @@ const HermesCockpitWindow: React.FC<{
onRun: (job: HermesJob) => void;
onDelete: (job: HermesJob) => void;
onOpenRun: (run: HermesRunRecord) => void;
onClose: () => void;
}> = ({
events,
isWorking,
@@ -606,7 +607,8 @@ const HermesCockpitWindow: React.FC<{
onResume,
onRun,
onDelete,
onOpenRun
onOpenRun,
onClose
}) => {
const latestEvents = events.slice(-8).reverse();
const [activeTab, setActiveTab] = useState<HermesCockpitTab>('tools');
@@ -726,9 +728,14 @@ const HermesCockpitWindow: React.FC<{
<div className="tool-screen-header">
<span className={`tool-screen-led ${syncState}`} />
<span>COCKPIT HERMES</span>
<button className="hermes-icon-btn" onClick={onRefresh} title="Synchroniser Hermes">
<RefreshCw size={12} />
</button>
<div className="hermes-header-actions">
<button className="hermes-icon-btn" onClick={onRefresh} title="Synchroniser Hermes">
<RefreshCw size={12} />
</button>
<button className="hermes-icon-btn" onClick={onClose} title="Refermer le cockpit Hermes">
<X size={12} />
</button>
</div>
</div>
<div className="hermes-cockpit-status">
{syncState === 'offline' ? <WifiOff size={12} /> : <CheckCircle2 size={12} />}
@@ -863,11 +870,12 @@ export const App: React.FC = () => {
const [currentEmotion, setCurrentEmotion] = useState<EveEmotion>('neutral');
const [isSpeaking, setIsSpeaking] = useState(false);
const [isListening, setIsListening] = useState(false);
const [isMuted, setIsMuted] = useState(false);
const [isMuted] = useState(false);
// Fenêtre & Navigation
const [isFloatingMode, setIsFloatingMode] = useState(false);
const [showSettings, setShowSettings] = useState(false);
const [showHermesCockpit, setShowHermesCockpit] = useState(false);
// Paramètres d'Agents et de Voix (sauvegardés localement)
const [agentConfig, setAgentConfig] = useState<AgentConfig>({
@@ -886,6 +894,12 @@ export const App: React.FC = () => {
const [sttLang, setSttLang] = useState<string>('fr-FR');
const [ttsProvider, setTtsProvider] = useState<'system' | 'google-free'>('google-free');
const activeAvatar = AVATAR_PROFILES[avatarId];
const hermesUnreadRuns = hermesRunHistory.filter(run => !run.read).length;
const hermesSyncLabel = hermesSyncState === 'offline'
? 'Hermes offline'
: hermesSyncState === 'syncing'
? 'Hermes sync'
: 'Hermes OK';
const pushToolEvent = (event: Omit<ToolEvent, 'id' | 'ts'>) => {
setToolEvents(prev => [
...prev.slice(-11),
@@ -1296,6 +1310,17 @@ export const App: React.FC = () => {
}
};
const toggleHermesCockpit = () => {
const nextOpen = !showHermesCockpit;
setShowHermesCockpit(nextOpen);
window.electronAPI?.setCockpitMode?.(nextOpen);
};
const closeHermesCockpit = () => {
setShowHermesCockpit(false);
window.electronAPI?.setCockpitMode?.(false);
};
const handleSendMessage = async (text: string) => {
if (!text.trim() && attachments.length === 0) return;
if (isSending) return;
@@ -1540,6 +1565,8 @@ export const App: React.FC = () => {
const handlePlayLongMessage = (messageId: string, content: string) => {
if (!audioServiceRef.current) return;
@@ -1567,8 +1594,8 @@ export const App: React.FC = () => {
setIsSpeaking(false);
setCurrentEmotion('neutral');
})
.catch((err) => {
console.error("[TTS] Échec de la lecture audio complète :", err);
.catch(err => {
console.error("Long message audio speak error:", err);
setCurrentlyPlayingMsgId(null);
setIsSpeaking(false);
setCurrentEmotion('neutral');
@@ -1576,84 +1603,55 @@ export const App: React.FC = () => {
}
};
return (
<div className={`app-container ${isFloatingMode ? 'transparent-bg' : ''}`}>
{/* 1. APP HEADER */}
{!isFloatingMode && (
<header className="app-header" style={{ WebkitAppRegion: 'drag' } as any}>
<div className="flex-row">
<div className="h-3 w-3 rounded-full pulsing-led" style={{ width: '12px', height: '12px', borderRadius: '50%', backgroundColor: activeAvatar.accent, boxShadow: `0 0 12px ${activeAvatar.accent}` }}></div>
<h1 className="neon-title" style={{ fontFamily: 'var(--font-title)', letterSpacing: '2px', color: 'var(--text-primary)', fontSize: '18px', fontWeight: 800, display: 'flex', alignItems: 'center', gap: '10px', lineHeight: 1 }}>
EVEFLOW
<span className="header-subtitle" style={{ color: 'var(--text-secondary)', fontWeight: 500, fontSize: '14px' }}>// ANALOG SPACE OS</span>
<span className="sys-ready-badge" style={{ fontSize: '9px', padding: '3px 10px', backgroundColor: 'var(--accent-light)', color: 'var(--text-neon)', border: '1px solid rgba(0,212,245,0.4)', borderRadius: '20px', fontWeight: 'bold', fontFamily: 'var(--font-mono)' }}>SYS_READY_V{version}</span>
</h1>
<div className="flex-row" style={{ display: 'flex', alignItems: 'center', gap: '6px', WebkitAppRegion: 'no-drag' } as any}>
<span className="logo-dot" />
<span className="logo-text">EVEFLOW</span>
</div>
<div className="flex-row" style={{ WebkitAppRegion: 'no-drag' } as any}>
{/* Statut Agent */}
<div className="flex-row agent-status-badge" style={{ padding: '6px 14px', backgroundColor: 'var(--bg-primary)', fontSize: '11px', fontWeight: '800', color: 'var(--text-neon)', border: '2px solid var(--text-primary)', borderRadius: '20px', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '1px' }}>
<Cpu style={{ width: '13px', height: '13px', color: 'var(--accent-cyan)' }} />
<span>[ RECEIVER: {agentConfig.provider} ]</span>
{agentConfig.provider === 'hermes' && (
<div className="header-hermes-status" style={{
color: hermesSyncState === 'offline' ? '#ef4444' : '#10b981',
borderColor: hermesSyncState === 'offline' ? 'rgba(239, 68, 68, 0.2)' : 'rgba(0, 242, 255, 0.2)',
WebkitAppRegion: 'no-drag'
} as any}>
<span className="status-dot" style={{
backgroundColor: hermesSyncState === 'offline' ? '#ef4444' : '#10b981',
boxShadow: hermesSyncState === 'offline' ? '0 0 10px #ef4444' : '0 0 10px #10b981'
}} />
<span>{hermesSyncState === 'offline' ? 'Hermes OFFLINE' : 'Hermes OK'}</span>
</div>
)}
{/* Sourdine */}
<button
onClick={() => {
if (audioServiceRef.current && isSpeaking) {
audioServiceRef.current.stopSpeaking();
setIsSpeaking(false);
}
setIsMuted(!isMuted);
}}
className="glow-input"
style={{ padding: '8px 12px', width: 'auto', borderRadius: '20px', display: 'flex', alignItems: 'center', cursor: 'pointer', borderColor: isMuted ? '#ef4444' : 'rgba(0,212,245,0.3)', backgroundColor: isMuted ? 'rgba(239,68,68,0.15)' : 'var(--bg-secondary)' }}
title={isMuted ? `Activer la voix de ${activeAvatar.name}` : `Couper la voix de ${activeAvatar.name}`}
>
{isMuted ? <VolumeX style={{ width: '16px', height: '16px', color: '#ef4444' }} /> : <Volume2 style={{ width: '16px', height: '16px', color: 'var(--text-primary)' }} />}
</button>
{/* Paramètres */}
<button
<div className="window-controls" style={{ WebkitAppRegion: 'no-drag' } as any}>
<button
className="control-btn"
onClick={() => setShowSettings(!showSettings)}
className="glow-input"
style={{ padding: '8px 12px', width: 'auto', borderRadius: '20px', display: 'flex', alignItems: 'center', cursor: 'pointer', borderColor: showSettings ? 'var(--accent-cyan)' : 'rgba(0,212,245,0.3)', backgroundColor: showSettings ? 'var(--accent-light)' : 'var(--bg-secondary)' }}
title="Paramètres de configuration"
title="Configuration globale"
>
<Settings style={{ width: '16px', height: '16px', color: 'var(--text-primary)' }} />
<Settings size={16} />
</button>
{/* Mode Widget Flottant */}
<button
onClick={toggleWindowMode}
className="glow-input"
style={{ padding: '8px 12px', width: 'auto', borderRadius: '20px', borderColor: 'rgba(0,212,245,0.3)', backgroundColor: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', cursor: 'pointer' }}
title="Activer le mode compagnon flottant"
>
<Minimize2 style={{ width: '16px', height: '16px', color: 'var(--text-primary)' }} />
</button>
{/* Electron Controls */}
{window.electronAPI && (
<div className="flex-row" style={{ borderLeft: '2px solid var(--text-primary)', paddingLeft: '12px' }}>
<button
onClick={() => handleWindowControl('minimize')}
className="glow-input"
style={{ padding: '8px 12px', width: 'auto', cursor: 'pointer', border: 'none', background: 'transparent', color: 'var(--text-primary)', fontWeight: 'bold' }}
<>
<button
className="control-btn"
onClick={() => handleWindowControl('minimize')}
title="Réduire"
>
—
<Minimize2 size={16} />
</button>
<button
onClick={() => handleWindowControl('close')}
className="glow-input"
style={{ padding: '8px 12px', width: 'auto', cursor: 'pointer', border: 'none', background: 'transparent', color: '#ef4444', fontWeight: 'bold' }}
<button
className="control-btn close"
onClick={() => handleWindowControl('close')}
title="Fermer"
>
<X style={{ width: '16px', height: '16px' }} />
<X size={16} />
</button>
</div>
</>
)}
</div>
</header>
@@ -1661,130 +1659,165 @@ export const App: React.FC = () => {
{/* 2. MAIN LAYOUT CONTAINER */}
<div className="app-main">
{/* CHAT SECTION (De gauche) */}
{!isFloatingMode && !showSettings && (
<section className="chat-section">
<div className="messages-container">
{messages.map((msg) => (
<div
key={msg.id}
className={`message-row ${msg.role === 'user' ? 'user' : 'assistant'}`}
{agentConfig.provider === 'hermes' && (
<div className="chat-status-bar">
<div className={`status-item ${hermesSyncState === 'offline' ? 'red' : 'green'}`}>
{hermesSyncState === 'offline' ? <WifiOff size={14} /> : <CheckCircle2 size={14} />}
<span>{hermesSyncLabel}</span>
</div>
<span className="status-separator">|</span>
<div className="status-item blue">
<BriefcaseBusiness size={14} />
<span>{hermesJobs.length} job{hermesJobs.length > 1 ? 's' : ''}</span>
</div>
<span className="status-separator">|</span>
<div className={`status-item ${hermesUnreadRuns > 0 ? 'red' : 'blue'}`}>
<AlertTriangle size={14} />
<span>{hermesUnreadRuns} alerte{hermesUnreadRuns > 1 ? 's' : ''}</span>
</div>
<button
className="cockpit-btn"
onClick={toggleHermesCockpit}
title={showHermesCockpit ? 'Refermer le cockpit Hermes' : 'Ouvrir le cockpit Hermes'}
>
<div className={`message-bubble ${msg.role === 'user' ? 'user' : 'assistant'}`}>
{msg.role === 'assistant' ? (
<div className="message-meta" style={{ fontFamily: 'var(--font-mono)', letterSpacing: '1.5px', color: 'var(--text-neon)', display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap' }}>
<Sparkles style={{ width: '12px', height: '12px', color: 'var(--accent-cyan)', flexShrink: 0 }} />
<span>[TRANSMISSION: {activeAvatar.name.toUpperCase()} // TELEMETRY: {msg.emotion?.toUpperCase() || 'NEUTRAL'}]</span>
{msg.source && msg.source !== 'eveflow' && (
<span style={{ fontSize: '9px', padding: '2px 7px', backgroundColor: 'rgba(0,212,245,0.15)', border: '1px solid rgba(0,212,245,0.35)', borderRadius: '10px', color: 'var(--accent-cyan)', fontWeight: 800, letterSpacing: '1px', textTransform: 'uppercase' }}>
{msg.source}
</span>
)}
</div>
) : (
<div className="message-meta" style={{ fontFamily: 'var(--font-mono)', letterSpacing: '1.5px', color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap' }}>
<span>[TELECOMMANDE // CONSOLE_INPUT]</span>
{msg.source && msg.source !== 'eveflow' && (
<span style={{ fontSize: '9px', padding: '2px 7px', backgroundColor: 'rgba(255,160,0,0.15)', border: '1px solid rgba(255,160,0,0.35)', borderRadius: '10px', color: '#ffb84d', fontWeight: 800, letterSpacing: '1px', textTransform: 'uppercase' }}>
{msg.source}
</span>
)}
<span>Cockpit</span>
<ChevronUp size={12} className={`chevron ${showHermesCockpit ? 'rotated' : ''}`} />
</button>
</div>
)}
<div className="messages-container">
{messages.map((msg) => {
const isUser = msg.role === 'user';
const markdownAndMedia = (
<div className="markdown-content">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
img: ({ node, ...props }) => (
<ResilientImage
src={props.src || ''}
alt={props.alt}
agentUrl={agentConfig.hermesUrl}
provider={agentConfig.provider}
hermesApiKey={agentConfig.hermesApiKey}
hermesSessionKey={agentConfig.hermesSessionKey}
/>
),
a: ({ node, ...props }) => {
const isLocal = props.href?.startsWith('file://') || /^[a-zA-Z]:/.test(props.href || '');
if (isLocal) {
return (
<a
href="#"
onClick={(e) => {
e.preventDefault();
let cleanPath = props.href || '';
if (cleanPath.startsWith('file:///')) {
cleanPath = cleanPath.substring(8);
} else if (cleanPath.startsWith('file://')) {
cleanPath = cleanPath.substring(7);
}
cleanPath = cleanPath.replace(/\//g, '\\');
(window as any).electronAPI?.openLocalFile?.(cleanPath)
.catch((err: any) => console.error("Impossible d'ouvrir le fichier :", err));
}}
className="markdown-link-local"
style={{ color: 'var(--text-neon)', textDecoration: 'underline', fontWeight: 'bold' }}
title={`Ouvrir le fichier local : ${props.href}`}
>
{props.children}
</a>
);
}
return <a href={props.href} target="_blank" rel="noopener noreferrer">{props.children}</a>;
}
}}
>
{preprocessMessageContent(msg.content)}
</ReactMarkdown>
{msg.images && msg.images.length > 0 && (
<div className="message-images-gallery" style={{ marginTop: '12px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
{msg.images.map((imgUrl, i) => (
<ResilientImage
key={i}
src={imgUrl}
alt="Image jointe"
agentUrl={agentConfig.hermesUrl}
provider={agentConfig.provider}
hermesApiKey={agentConfig.hermesApiKey}
hermesSessionKey={agentConfig.hermesSessionKey}
/>
))}
</div>
)}
<div className="markdown-content">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
img: ({ node, ...props }) => (
<ResilientImage
src={props.src || ''}
alt={props.alt}
agentUrl={agentConfig.hermesUrl}
provider={agentConfig.provider}
hermesApiKey={agentConfig.hermesApiKey}
hermesSessionKey={agentConfig.hermesSessionKey}
/>
),
a: ({ node, ...props }) => {
const isLocal = props.href?.startsWith('file://') || /^[a-zA-Z]:/.test(props.href || '');
if (isLocal) {
return (
<a
href="#"
onClick={(e) => {
e.preventDefault();
let cleanPath = props.href || '';
if (cleanPath.startsWith('file:///')) {
cleanPath = cleanPath.substring(8);
} else if (cleanPath.startsWith('file://')) {
cleanPath = cleanPath.substring(7);
}
cleanPath = cleanPath.replace(/\//g, '\\');
(window as any).electronAPI?.openLocalFile?.(cleanPath)
.catch((err: any) => console.error("Impossible d'ouvrir le fichier :", err));
}}
className="markdown-link-local"
style={{ color: 'var(--text-neon)', textDecoration: 'underline', fontWeight: 'bold' }}
title={`Ouvrir le fichier local : ${props.href}`}
>
{props.children}
</a>
);
}
return <a href={props.href} target="_blank" rel="noopener noreferrer">{props.children}</a>;
}
}}
>
{preprocessMessageContent(msg.content)}
</ReactMarkdown>
{msg.images && msg.images.length > 0 && (
<div className="message-images-gallery" style={{ marginTop: '12px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
{msg.images.map((imgUrl, i) => (
<ResilientImage
key={i}
src={imgUrl}
alt="Image jointe"
agentUrl={agentConfig.hermesUrl}
provider={agentConfig.provider}
hermesApiKey={agentConfig.hermesApiKey}
hermesSessionKey={agentConfig.hermesSessionKey}
/>
))}
</div>
)}
{msg.role === 'assistant' && msg.content.length >= TTS_LONG_TEXT_THRESHOLD && (
<div className="long-message-audio-controls">
<button
onClick={() => handlePlayLongMessage(msg.id, msg.content)}
className={`audio-control-btn ${currentlyPlayingMsgId === msg.id ? 'playing' : ''}`}
title={currentlyPlayingMsgId === msg.id ? "Arrêter la lecture vocale complète" : "Écouter la lecture vocale complète"}
>
{currentlyPlayingMsgId === msg.id ? (
<>
<VolumeX style={{ width: '13px', height: '13px' }} />
<span>[ STOP_AUDIO ]</span>
</>
) : (
<>
<Volume2 style={{ width: '13px', height: '13px' }} />
<span>[ LIRE_MESSAGE_COMPLET ]</span>
</>
)}
</button>
</div>
)}
</div>
<span className="message-time">
{msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</span>
{!isUser && msg.content.length >= TTS_LONG_TEXT_THRESHOLD && (
<div className="long-message-audio-controls">
<button
onClick={() => handlePlayLongMessage(msg.id, msg.content)}
className={`audio-control-btn ${currentlyPlayingMsgId === msg.id ? 'playing' : ''}`}
title={currentlyPlayingMsgId === msg.id ? "Arrêter la lecture vocale complète" : "Écouter la lecture vocale complète"}
>
{currentlyPlayingMsgId === msg.id ? (
<>
<VolumeX style={{ width: '13px', height: '13px' }} />
<span>[ STOP_AUDIO ]</span>
</>
) : (
<>
<Volume2 style={{ width: '13px', height: '13px' }} />
<span>[ LIRE_MESSAGE_COMPLET ]</span>
</>
)}
</button>
</div>
)}
</div>
</div>
))}
);
if (isUser) {
return (
<div key={msg.id} className="message-row user">
<div className="message-bubble user">
{markdownAndMedia}
<div className="message-time">
<span>{msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
<span className="double-check">✓✓</span>
</div>
</div>
</div>
);
} else {
return (
<div key={msg.id} style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
<div className="transmission-tag">
# [TRANSMISSION: {activeAvatar.name.toUpperCase()} // TELEMETRY: {msg.emotion?.toUpperCase() || 'NEUTRAL'}]
{msg.source && msg.source !== 'eveflow' && (
<span style={{ marginLeft: '8px', fontSize: '9px', padding: '1px 6px', backgroundColor: 'rgba(0,212,245,0.15)', border: '1px solid rgba(0,212,245,0.35)', borderRadius: '10px', color: 'var(--accent-cyan)', fontWeight: 800, letterSpacing: '1px', textTransform: 'uppercase' }}>
{msg.source}
</span>
)}
</div>
<div className="message-row assistant">
<div className="avatar-wrapper">
<img src="/avatars/eve-round.png" alt={activeAvatar.name} className="avatar-img" />
</div>
<div className="message-bubble assistant">
{markdownAndMedia}
<div className="message-time" style={{ color: 'rgba(226, 240, 255, 0.4)', fontSize: '9px', marginTop: '6px', textAlign: 'right' }}>
{msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</div>
</div>
</div>
</div>
);
}
})}
{errorMessage && (
<div className="settings-card" style={{ backgroundColor: 'rgba(239,68,68,0.1)', borderColor: 'rgba(239,68,68,0.4)', color: '#ff6b6b', padding: '16px', display: 'flex', flexDirection: 'row', gap: '12px', alignItems: 'flex-start' }}>
@@ -1848,7 +1881,7 @@ export const App: React.FC = () => {
value={inputText}
onChange={(e) => setInputText(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSendMessage(inputText)}
placeholder="Tape ton message ici..."
placeholder="Message a Eve..."
className="glow-input"
disabled={isSending}
/>
@@ -1857,14 +1890,10 @@ export const App: React.FC = () => {
{isSpeaking && (
<button
onClick={handleStopTTS}
className="glow-input"
className="input-circle-btn"
style={{
padding: '12px',
width: 'auto',
cursor: 'pointer',
borderColor: '#ef4444',
backgroundColor: 'rgba(239,68,68,0.15)',
flexShrink: 0
backgroundColor: 'rgba(239, 68, 68, 0.15)',
}}
title="Arrêter la lecture vocale"
>
@@ -1874,42 +1903,35 @@ export const App: React.FC = () => {
<button
onClick={() => fileInputRef.current?.click()}
className="glow-input"
className="input-circle-btn"
style={{
padding: '12px',
width: 'auto',
cursor: 'pointer',
borderColor: attachments.length > 0 ? 'var(--accent-cyan)' : 'var(--text-primary)',
backgroundColor: attachments.length > 0 ? 'var(--accent-light)' : 'var(--bg-secondary)',
flexShrink: 0
borderColor: attachments.length > 0 ? 'var(--accent-cyan)' : 'rgba(226, 240, 255, 0.12)',
backgroundColor: attachments.length > 0 ? 'rgba(0, 242, 255, 0.1)' : '#050914',
}}
title="Ajouter des pièces jointes (Images, Fichiers texte...)"
>
<Paperclip style={{ width: '18px', height: '18px', color: attachments.length > 0 ? 'var(--accent-cyan)' : 'var(--text-primary)' }} />
<Paperclip style={{ width: '18px', height: '18px', color: attachments.length > 0 ? 'var(--accent-cyan)' : 'var(--text-secondary)' }} />
</button>
<button
onClick={isListening ? handleStopListening : handleStartVocalRecord}
className="glow-input"
className="input-circle-btn"
style={{
padding: '12px',
width: 'auto',
cursor: 'pointer',
borderColor: isListening ? '#ef4444' : 'var(--text-primary)',
backgroundColor: isListening ? 'rgba(239,68,68,0.15)' : 'var(--bg-secondary)'
borderColor: isListening ? '#ef4444' : 'rgba(226, 240, 255, 0.12)',
backgroundColor: isListening ? 'rgba(239, 68, 68, 0.15)' : '#050914'
}}
title={isListening ? "Arrêter l'écoute" : "Démarrer la saisie vocale"}
>
{isListening ? <MicOff style={{ width: '18px', height: '18px', color: '#ef4444' }} /> : <Mic style={{ width: '18px', height: '18px', color: 'var(--text-primary)' }} />}
{isListening ? <MicOff style={{ width: '18px', height: '18px', color: '#ef4444' }} /> : <Mic style={{ width: '18px', height: '18px', color: 'var(--text-secondary)' }} />}
</button>
<button
onClick={() => handleSendMessage(inputText)}
disabled={(!inputText.trim() && attachments.length === 0) || isSending}
className="neon-btn"
className="input-send-btn"
title="Envoyer le message"
>
<Send style={{ width: '14px', height: '14px' }} />
<span className="btn-text">Envoyer</span>
<Send style={{ width: '16px', height: '16px' }} />
</button>
</div>
</section>
@@ -2165,17 +2187,21 @@ export const App: React.FC = () => {
)}
{/* COMPAGNON 3D SECTION (De droite) */}
<section className={`eve-section ${isFloatingMode ? 'floating-widget' : ''}`}>
<div className={`avatar-ambient-field ${currentEmotion === 'thinking' || isSending ? 'thinking' : 'idle'}`}>
<span className="ambient-scanline scanline-a" />
<span className="ambient-scanline scanline-b" />
<span className="ambient-data data-a" />
<span className="ambient-data data-b" />
<span className="ambient-data data-c" />
<span className="ambient-node node-a" />
<span className="ambient-node node-b" />
<span className="ambient-node node-c" />
</div>
<section className={`eve-section ${isFloatingMode ? 'floating-widget' : ''} ${isListening || isSpeaking || isSending ? 'eve-active' : ''}`}>
{!isFloatingMode && (
<div className="eve-status-pill">
<span className="status-led" />
<span>{isListening ? 'Eve ecoute' : isSpeaking ? 'Eve parle' : isSending ? 'Eve reflechit' : 'Eve ecoute'}</span>
</div>
)}
{!isFloatingMode && (
<button onClick={toggleWindowMode} className="eve-popout-btn" title="Mode Widget flottant">
<ExternalLink size={14} />
</button>
)}
{/* Header flottant discret pour contrôle en mode Widget */}
{isFloatingMode && (
@@ -2207,37 +2233,12 @@ export const App: React.FC = () => {
)}
{/* Rendu Canvas 3D */}
<div style={{ flex: 1, width: '100%', position: 'relative' }}>
<div style={{ flex: 1, width: '100%', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<ThreeCanvas
emotion={currentEmotion}
isSpeaking={isSpeaking}
avatarId={avatarId}
/>
{agentConfig.provider === 'hermes' && (
<HermesCockpitWindow
events={toolEvents}
isWorking={isSending}
jobs={hermesJobs}
runs={hermesRunHistory}
syncState={hermesSyncState}
syncDetail={hermesSyncDetail}
lastSyncAt={hermesLastSyncAt}
draft={hermesCronDraft}
editingJobId={editingHermesJobId}
isSaving={isSavingHermesCron}
onDraftChange={setHermesCronDraft}
onCreate={handleCreateHermesCron}
onCancelEdit={handleCancelEditHermesCron}
onStartEdit={handleStartEditHermesCron}
onUpdate={handleUpdateHermesCron}
onRefresh={refreshHermesJobs}
onPause={(job) => runHermesCronAction(job, 'pause')}
onResume={(job) => runHermesCronAction(job, 'resume')}
onRun={(job) => runHermesCronAction(job, 'run')}
onDelete={(job) => runHermesCronAction(job, 'delete')}
onOpenRun={openHermesRunInChat}
/>
)}
{avatarId !== 'eve' && activeAvatar.assetPath && (
<div style={{ position: 'absolute', top: '16px', left: '50%', transform: 'translateX(-50%)', padding: '7px 14px', borderRadius: '18px', backgroundColor: 'var(--bg-secondary)', border: '1px solid rgba(0,212,245,0.25)', boxShadow: '0 0 20px rgba(0,212,245,0.1)', fontSize: '9px', fontFamily: 'var(--font-mono)', fontWeight: 800, letterSpacing: '0.8px', color: 'var(--text-secondary)', textTransform: 'uppercase', pointerEvents: 'none' }}>
{activeAvatar.name}: asset premium attendu
@@ -2245,7 +2246,7 @@ export const App: React.FC = () => {
)}
{/* Badge d'humeur en bas */}
{!isFloatingMode && (
{!isFloatingMode && false && (
<div style={{ position: 'absolute', bottom: '16px', left: '50%', transform: 'translateX(-50%)', padding: '8px 20px', borderRadius: '30px', backgroundColor: 'var(--bg-secondary)', border: '2px solid var(--text-primary)', display: 'flex', alignItems: 'center', gap: '8px', boxShadow: '0 4px 15px rgba(45, 30, 24, 0.08)', fontSize: '12px', fontWeight: '700' }}>
<span className="h-3 w-3 rounded-full pulsing-led" style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: activeAvatar.accent, boxShadow: `0 0 10px ${activeAvatar.accent}` }}></span>
<span style={{ color: 'var(--text-secondary)', textTransform: 'uppercase', fontSize: '9px', letterSpacing: '1px', fontFamily: 'var(--font-title)' }}>Humeur:</span>
@@ -2281,8 +2282,37 @@ export const App: React.FC = () => {
</div>
</div>
)}
</section>
{!isFloatingMode && !showSettings && agentConfig.provider === 'hermes' && showHermesCockpit && (
<HermesCockpitWindow
events={toolEvents}
isWorking={isSending}
jobs={hermesJobs}
runs={hermesRunHistory}
syncState={hermesSyncState}
syncDetail={hermesSyncDetail}
lastSyncAt={hermesLastSyncAt}
draft={hermesCronDraft}
editingJobId={editingHermesJobId}
isSaving={isSavingHermesCron}
onDraftChange={setHermesCronDraft}
onCreate={handleCreateHermesCron}
onCancelEdit={handleCancelEditHermesCron}
onStartEdit={handleStartEditHermesCron}
onUpdate={handleUpdateHermesCron}
onRefresh={refreshHermesJobs}
onPause={(job) => runHermesCronAction(job, 'pause')}
onResume={(job) => runHermesCronAction(job, 'resume')}
onRun={(job) => runHermesCronAction(job, 'run')}
onDelete={(job) => runHermesCronAction(job, 'delete')}
onOpenRun={openHermesRunInChat}
onClose={closeHermesCockpit}
/>
)}
</div>
</div>
);
src/components/AvatarModelLoader.tsx
+6 -2
View File
@@ -22,7 +22,11 @@ const LoadedGlbAvatar: React.FC<{
isSpeaking: boolean;
}> = ({ path, avatarId, emotion, isSpeaking }) => {
const gltf = useLoader(GLTFLoader, path);
const scene = useMemo(() => gltf.scene.clone(true), [gltf.scene]);
const scene = useMemo(() => {
const cloned = gltf.scene.clone(true);
cloned.position.y = 0.27;
return cloned;
}, [gltf.scene]);
useEffect(() => {
const style = EmotionService.getEmotionStyle(emotion, avatarId);
@@ -48,7 +52,7 @@ const LoadedGlbAvatar: React.FC<{
useFrame((state) => {
const t = state.clock.getElapsedTime();
scene.position.y = Math.sin(t * 1.4) * 0.05 + 0.22;
scene.position.y = Math.sin(t * 1.4) * 0.05 + 0.27;
scene.rotation.y = Math.sin(t * 0.45) * 0.05;
if (isSpeaking) {
src/components/EveModel.tsx
+3 -3
View File
@@ -555,8 +555,8 @@ export const EveModel: React.FC<EveModelProps> = ({ emotion, isSpeaking, avatarI
// 1. Animation globale de flottaison (Lévitation magnétique)
if (modelRef.current) {
// Oscillation en hauteur stabilisée autour de y = 0.22 (remonté pour un centrage élégant)
modelRef.current.position.y = Math.sin(t * 1.5) * 0.06 + 0.22;
// Oscillation en hauteur stabilisée autour de y = 0.27 pour mieux occuper la fenetre avatar.
modelRef.current.position.y = Math.sin(t * 1.5) * 0.06 + 0.27;
// Légère rotation sur elle-même (mouvement de veille)
modelRef.current.rotation.y = Math.sin(t * 0.5) * 0.05;
}
@@ -760,7 +760,7 @@ export const EveModel: React.FC<EveModelProps> = ({ emotion, isSpeaking, avatarI
});
return (
<group ref={modelRef} scale={1.0} position={[0, -0.28, 0]}>
<group ref={modelRef} scale={1.0} position={[0, 0.27, 0]}>
<primitive object={clonedObj} />
</group>
);
src/components/ThreeCanvas.tsx
+565 -7
View File
@@ -1,6 +1,7 @@
import React, { Suspense } from 'react';
import { Canvas } from '@react-three/fiber';
import React, { Suspense, useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import * as THREE from 'three';
import { AvatarModelLoader } from './AvatarModelLoader';
import { EveEmotion, EveAvatar } from '../services/emotionService';
@@ -18,11 +19,566 @@ interface ThreeCanvasProps {
avatarId?: EveAvatar;
}
interface HologramProjectionProps {
emotion: EveEmotion;
isSpeaking: boolean;
avatarId?: EveAvatar;
}
interface ParticleInstance {
x: number;
y: number;
z: number;
speed: number;
scale: number;
phase: number;
}
/**
* 3D Holographic rising particles representing active data streams.
* Flowing upwards in an expanding spiral fashion, strictly confined within the restricted projection space (below the avatar).
* Restrained dynamically to the avatar's real-time bottom baseline to prevent overlapping with the avatar's body.
*/
const HologramParticles: React.FC<{ color: THREE.Color; avatarId?: EveAvatar }> = ({ color, avatarId = 'eve' }) => {
const count = 54; // restrained density so the projector stays clean and readable
const particlesRef = useRef<THREE.Group>(null);
// Persist random initial coordinates within the cone volume, speed modifiers, and scaling factors
const particleData = React.useMemo<ParticleInstance[]>(() => {
const data: ParticleInstance[] = [];
for (let i = 0; i < count; i++) {
const y = -0.8 + Math.random() * 0.6;
const ratio = (y + 0.8) / 0.6;
const radiusAtY = 0.17 + 0.17 * ratio;
const angle = Math.random() * Math.PI * 2;
const radius = Math.random() * radiusAtY;
data.push({
x: Math.cos(angle) * radius,
y: y,
z: Math.sin(angle) * radius,
speed: 0.002 + Math.random() * 0.004, // Elegant floating speed below EVE
scale: 0.16 + Math.random() * 0.4,
phase: Math.random() * Math.PI * 2
});
}
return data;
}, []);
useFrame((state) => {
if (!particlesRef.current) return;
const children = particlesRef.current.children;
const t = state.clock.getElapsedTime();
// Compute dynamic avatar bottom in real-time
const isEve = avatarId === 'eve';
const avatarY = isEve
? Math.sin(t * 1.5) * 0.06 + 0.27
: Math.sin(t * 1.4) * 0.05 + 0.27;
const yBottomLocal = (avatarY + 0.1) - 0.59;
for (let i = 0; i < children.length; i++) {
const child = children[i] as THREE.Mesh;
const data = particleData[i];
// Rise animation
data.y += data.speed;
// Spiral micro-rotation effect
const currentRadius = Math.sqrt(data.x * data.x + data.z * data.z);
const angle = Math.atan2(data.z, data.x) + 0.014;
data.x = Math.cos(angle) * currentRadius;
data.z = Math.sin(angle) * currentRadius;
// Radial constraints: inverted cone is narrower at the bottom (0.17 radius) than top (0.34 radius)
const ratio = (data.y + 0.8) / 0.6;
const radiusAtY = 0.17 + 0.17 * ratio;
// Reset position if exceeding top or radial boundaries
if (data.y > yBottomLocal || currentRadius > radiusAtY) {
data.y = -0.8;
const newAngle = Math.random() * Math.PI * 2;
const newRadius = Math.random() * 0.11; // Start close to the lens focal point
data.x = Math.cos(newAngle) * newRadius;
data.z = Math.sin(newAngle) * newRadius;
}
child.position.set(data.x, data.y, data.z);
// Sinuous individual flickering
if (child.material) {
const mat = child.material as THREE.MeshBasicMaterial;
mat.opacity = 0.45 + Math.sin(t * 5.0 + data.phase) * 0.15;
}
}
});
return (
<group ref={particlesRef}>
{particleData.map((data, i) => (
<mesh key={i} scale={data.scale}>
{/* Energy crystals shape using Dodecahedron for premium specular feel */}
<dodecahedronGeometry args={[0.018, 0]} />
<meshBasicMaterial
color={color}
transparent
opacity={0.5}
blending={THREE.AdditiveBlending}
/>
</mesh>
))}
</group>
);
};
/**
* Animated holographic chamber behind Eve.
* Strong enough to be visible, but abstract enough to avoid the old planet/star look.
*/
const TechnicalBackdrop: React.FC = () => {
const haloRef = useRef<THREE.Group>(null);
const sweepRef = useRef<THREE.Group>(null);
const gateRef = useRef<THREE.Group>(null);
const nodeMat = React.useMemo(() => (
new THREE.MeshBasicMaterial({
color: '#00f2ff',
transparent: true,
opacity: 0.72,
depthWrite: false,
blending: THREE.AdditiveBlending
})
), []);
const dataLines = React.useMemo(() => ([
{ y: 1.02, width: 2.15, phase: 0.1, speed: 0.36, opacity: 0.34 },
{ y: 0.68, width: 2.55, phase: 1.6, speed: 0.28, opacity: 0.26 },
{ y: 0.24, width: 2.18, phase: 2.8, speed: 0.42, opacity: 0.32 },
{ y: -0.22, width: 2.44, phase: 4.2, speed: 0.31, opacity: 0.24 },
{ y: -0.68, width: 1.92, phase: 5.4, speed: 0.48, opacity: 0.31 }
]), []);
const orbitNodes = React.useMemo(() => ([
{ radius: 1.04, angle: 0.18, size: 0.034 },
{ radius: 1.36, angle: 1.7, size: 0.024 },
{ radius: 1.68, angle: 2.78, size: 0.028 },
{ radius: 1.28, angle: 4.35, size: 0.022 },
{ radius: 1.52, angle: 5.52, size: 0.026 }
]), []);
useFrame((state) => {
const t = state.clock.getElapsedTime();
if (haloRef.current) {
haloRef.current.rotation.z = t * 0.035;
haloRef.current.scale.setScalar(1 + Math.sin(t * 0.7) * 0.025);
}
if (gateRef.current) {
gateRef.current.rotation.z = Math.sin(t * 0.22) * 0.035;
}
if (sweepRef.current) {
sweepRef.current.children.forEach((child, index) => {
const line = dataLines[index];
child.position.x = Math.sin(t * line.speed + line.phase) * 0.82;
const mesh = child as THREE.Mesh;
const material = mesh.material as THREE.MeshBasicMaterial;
material.opacity = line.opacity + (Math.sin(t * 1.4 + line.phase) + 1) * 0.08;
});
}
});
return (
<group position={[0, 0.02, -1.72]}>
<mesh position={[0, 0, -0.12]}>
<planeGeometry args={[3.5, 3.85]} />
<meshBasicMaterial
color="#005e78"
transparent
opacity={0.16}
depthWrite={false}
blending={THREE.AdditiveBlending}
/>
</mesh>
<group ref={sweepRef} position={[0, 0, -0.01]}>
{dataLines.map((line, index) => (
<mesh key={index} position={[0, line.y, 0]} rotation={[0, 0, index % 2 === 0 ? 0.05 : -0.06]}>
<planeGeometry args={[line.width, 0.018]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={line.opacity}
depthWrite={false}
blending={THREE.AdditiveBlending}
/>
</mesh>
))}
</group>
<group ref={gateRef}>
{[-1.28, -0.86, 0.86, 1.28].map((x, index) => (
<mesh key={x} position={[x, 0, -0.03]}>
<planeGeometry args={[0.028, 3.35 - index % 2 * 0.34]} />
<meshBasicMaterial
color={index < 2 ? '#00f2ff' : '#8af7ff'}
transparent
opacity={index % 2 === 0 ? 0.19 : 0.13}
depthWrite={false}
blending={THREE.AdditiveBlending}
/>
</mesh>
))}
</group>
<group ref={haloRef}>
{[0.86, 1.14, 1.48, 1.78].map((radius, index) => (
<mesh key={radius} rotation={[0, 0, index * 0.18]}>
<ringGeometry args={[radius, radius + 0.012, 128]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={0.28 - index * 0.045}
side={THREE.DoubleSide}
depthWrite={false}
blending={THREE.AdditiveBlending}
/>
</mesh>
))}
<mesh>
<ringGeometry args={[0.58, 0.592, 96]} />
<meshBasicMaterial
color="#8af7ff"
transparent
opacity={0.27}
side={THREE.DoubleSide}
depthWrite={false}
blending={THREE.AdditiveBlending}
/>
</mesh>
{orbitNodes.map((node, index) => (
<mesh
key={index}
position={[
Math.cos(node.angle) * node.radius,
Math.sin(node.angle) * node.radius,
0.01
]}
material={nodeMat}
>
<circleGeometry args={[node.size, 24]} />
</mesh>
))}
</group>
<mesh position={[0, 0, -0.08]}>
<circleGeometry args={[1.28, 96]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={0.07}
depthWrite={false}
blending={THREE.AdditiveBlending}
/>
</mesh>
{[
[0, -0.94, 0]
].map((position, index) => (
<mesh key={index} position={position as [number, number, number]}>
<planeGeometry args={[1.55, 0.014]} />
<meshBasicMaterial
color="#8af7ff"
transparent
opacity={0.28}
depthWrite={false}
blending={THREE.AdditiveBlending}
/>
</mesh>
))}
</group>
);
};
/**
* 3D Hologram Projection platform and light cone visualizer.
* Fully interactive and reactive to speech and emotional state.
* Fixed to a premium cyan hue (#00f2ff) to align perfectly with the EVEFLOW brand.
* Confines the light cone strictly below the avatar's body, stretching to touch her base dynamically.
*/
const HologramProjection: React.FC<HologramProjectionProps> = ({ emotion, isSpeaking, avatarId = 'eve' }) => {
const beamRef = useRef<THREE.Mesh>(null);
const glowRef = useRef<THREE.Mesh>(null);
const baseRef = useRef<THREE.Group>(null);
// Cybernetic rotative diagnostic ring groups
const ringGroup1Ref = useRef<THREE.Group>(null);
const ringGroup2Ref = useRef<THREE.Group>(null);
const ringGroup3Ref = useRef<THREE.Group>(null);
// Permanently fixed to signature premium cyan to preserve brand identity and theme consistency
const stateColor = React.useMemo(() => new THREE.Color('#00f2ff'), []);
const isThinking = emotion === 'thinking';
// Custom ShaderMaterial to generate a smooth, high-fidelity opacity gradient fading towards the top
const coneMaterial = React.useMemo(() => {
return new THREE.ShaderMaterial({
uniforms: {
color: { value: stateColor },
opacity: { value: 0.42 },
},
vertexShader: `
varying vec3 vLocalPosition;
void main() {
vLocalPosition = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 color;
uniform float opacity;
varying vec3 vLocalPosition;
void main() {
// Normalizing local Y from -0.3 (bottom) to 0.3 (top) for a total height of 0.6
float factor = (vLocalPosition.y + 0.3) / 0.6;
// Smooth progressive fade out to absolute transparency at the top
float grad = clamp(1.0 - factor, 0.0, 1.0);
// Cubic curve for ultra-soft, premium cinematic light scattering
grad = pow(grad, 1.6);
gl_FragColor = vec4(color, grad * opacity);
}
`,
transparent: true,
side: THREE.DoubleSide,
depthWrite: false,
blending: THREE.AdditiveBlending,
});
}, [stateColor]);
useFrame((state) => {
const t = state.clock.getElapsedTime();
// Dynamic tracking of avatar's float baseline to keep perfect visual contact
const isEve = avatarId === 'eve';
const avatarY = isEve
? Math.sin(t * 1.5) * 0.06 + 0.27
: Math.sin(t * 1.4) * 0.05 + 0.27;
// The bottom of the avatar shell is approximately Y_avatar - 0.59
const yBottomLocal = (avatarY + 0.1) - 0.59;
// Lens source is at Y = -0.80 local (aligned to the new flat holographic emitter lens)
const yLensLocal = -0.80;
const currentHeight = yBottomLocal - yLensLocal;
const currentCenterY = yLensLocal + currentHeight / 2;
// Scale vertically relative to the default geometry height of 0.6
if (beamRef.current) {
beamRef.current.scale.y = currentHeight / 0.6;
beamRef.current.position.y = currentCenterY;
}
// Volumetric base flicker intensity simulation (high-fidelity holographic noise) - Boosted for pronounced cyan look
let baseFlicker = 0.42 + Math.sin(t * 7.5) * 0.05 + Math.cos(t * 3.2) * 0.025;
if (isThinking) {
baseFlicker += Math.sin(t * 22.0) * 0.035;
}
if (isSpeaking) {
const voiceFrequencyOscillation = Math.sin(t * 18.0) * 0.08 + Math.abs(Math.cos(t * 12.0)) * 0.05;
baseFlicker += voiceFrequencyOscillation;
}
// Volumetric soft cone opacity adjustment through custom shader uniforms
if (beamRef.current && beamRef.current.material) {
const mat = beamRef.current.material as THREE.ShaderMaterial;
if (mat.uniforms && mat.uniforms.opacity && mat.uniforms.color) {
mat.uniforms.opacity.value = baseFlicker;
mat.uniforms.color.value.lerp(stateColor, 0.08);
}
}
// Smooth cybernetic diagnostics rotations
if (ringGroup1Ref.current) ringGroup1Ref.current.rotation.z = t * 0.16;
if (ringGroup2Ref.current) ringGroup2Ref.current.rotation.z = -t * 0.10;
if (ringGroup3Ref.current) ringGroup3Ref.current.rotation.z = t * 0.06;
if (baseRef.current) baseRef.current.scale.setScalar(1 + Math.sin(t * 2.2) * 0.018);
// Glow plate adjustment - Pulsing emission intensity simulated via opacity for BasicMaterial
if (glowRef.current && glowRef.current.material) {
const mat = glowRef.current.material as THREE.MeshBasicMaterial;
mat.opacity = 0.70 + Math.sin(t * 5.0) * 0.15;
}
});
return (
<group position={[0, -0.1, 0]}>
{/* 1. Volumetric hologram light cone - Dynamically scaled and positioned to touch EVE's bottom */}
<mesh ref={beamRef} position={[0, -0.50, 0]}>
<cylinderGeometry args={[0.34, 0.15, 0.6, 48, 1, true]} />
<primitive object={coneMaterial} attach="material" />
</mesh>
{/* High-fidelity upward particle flow synchronized to avatar bottom limit */}
<HologramParticles color={stateColor} avatarId={avatarId} />
{/* 2. Émetteur Holographique Pur (100% Lumineux & Intégré) */}
<group position={[0, -0.05, 0]}>
<group ref={baseRef}>
<mesh position={[0, -0.93, 0]}>
<cylinderGeometry args={[0.32, 0.38, 0.08, 72]} />
<meshPhysicalMaterial
color="#dff8ff"
roughness={0.18}
metalness={0.18}
clearcoat={1}
clearcoatRoughness={0.08}
emissive="#4defff"
emissiveIntensity={0.25}
/>
</mesh>
<mesh position={[0, -0.835, 0]} rotation={[-Math.PI / 2, 0, 0]}>
<circleGeometry args={[0.28, 72]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={0.48}
blending={THREE.AdditiveBlending}
side={THREE.DoubleSide}
/>
</mesh>
<mesh position={[0, -0.828, 0]} rotation={[-Math.PI / 2, 0, 0]}>
<ringGeometry args={[0.25, 0.27, 72]} />
<meshBasicMaterial
color="#ffffff"
transparent
opacity={0.58}
blending={THREE.AdditiveBlending}
side={THREE.DoubleSide}
/>
</mesh>
<mesh position={[0, -1.01, 0]} rotation={[-Math.PI / 2, 0, 0]}>
<circleGeometry args={[0.44, 72]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={0.13}
blending={THREE.AdditiveBlending}
side={THREE.DoubleSide}
/>
</mesh>
</group>
<pointLight position={[0, -0.76, 0.35]} intensity={0.95} color="#00f2ff" distance={2.4} />
{/* A. Lentille émissive centrale - Source principale de lumière */}
<mesh
ref={glowRef}
position={[0, -0.80, 0]}
rotation={[-Math.PI / 2, 0, 0]}
>
<ringGeometry args={[0, 0.14, 32]} />
<meshBasicMaterial
color="#ffffff"
transparent
opacity={0.88}
blending={THREE.AdditiveBlending}
side={THREE.DoubleSide}
/>
</mesh>
{/* B. Premier anneau concentrique de confinement d'énergie */}
<mesh position={[0, -0.798, 0]} rotation={[-Math.PI / 2, 0, 0]}>
<ringGeometry args={[0.155, 0.16, 64]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={0.45}
blending={THREE.AdditiveBlending}
side={THREE.DoubleSide}
/>
</mesh>
{/* C. Anneau segmenté rotatif interne (Sens horaire) */}
<group ref={ringGroup1Ref} position={[0, -0.796, 0]} rotation={[-Math.PI / 2, 0, 0]}>
<mesh>
<ringGeometry args={[0.18, 0.19, 32, 1, 0, Math.PI * 0.45]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={0.65}
blending={THREE.AdditiveBlending}
side={THREE.DoubleSide}
/>
</mesh>
<mesh rotation={[0, 0, Math.PI]}>
<ringGeometry args={[0.18, 0.19, 32, 1, 0, Math.PI * 0.45]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={0.65}
blending={THREE.AdditiveBlending}
side={THREE.DoubleSide}
/>
</mesh>
</group>
{/* D. Anneau segmenté rotatif externe (Sens anti-horaire) */}
<group ref={ringGroup2Ref} position={[0, -0.794, 0]} rotation={[-Math.PI / 2, 0, 0]}>
<mesh>
<ringGeometry args={[0.22, 0.23, 32, 1, Math.PI * 0.2, Math.PI * 0.5]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={0.40}
blending={THREE.AdditiveBlending}
side={THREE.DoubleSide}
/>
</mesh>
<mesh rotation={[0, 0, Math.PI]}>
<ringGeometry args={[0.22, 0.23, 32, 1, Math.PI * 0.2, Math.PI * 0.5]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={0.40}
blending={THREE.AdditiveBlending}
side={THREE.DoubleSide}
/>
</mesh>
</group>
{/* E. Anneau de ciblage tech externe avec micro-graduations */}
<group ref={ringGroup3Ref} position={[0, -0.792, 0]} rotation={[-Math.PI / 2, 0, 0]}>
{[0, 1, 2, 3, 4, 5].map((i) => (
<mesh key={i} rotation={[0, 0, (i * Math.PI) / 3]}>
<ringGeometry args={[0.26, 0.264, 16, 1, 0, Math.PI * 0.04]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={0.28}
blending={THREE.AdditiveBlending}
side={THREE.DoubleSide}
/>
</mesh>
))}
</group>
{/* F. Grand anneau de balayage de diagnostic extérieur pulsant */}
<mesh position={[0, -0.798, 0]} rotation={[-Math.PI / 2, 0, 0]}>
<ringGeometry args={[0.31, 0.313, 64]} />
<meshBasicMaterial
color="#00f2ff"
transparent
opacity={0.18}
blending={THREE.AdditiveBlending}
side={THREE.DoubleSide}
/>
</mesh>
</group>
</group>
);
};
export const ThreeCanvas: React.FC<ThreeCanvasProps> = ({ emotion, isSpeaking, avatarId = 'eve' }) => {
return (
<div style={{ width: '100%', height: '100%', position: 'relative' }}>
<Canvas
camera={{ position: [0, 0.05, 6.2], fov: 36 }}
camera={{ position: [0, 1.1, 5.8], fov: 36 }}
gl={{ alpha: true, antialias: true, premultipliedAlpha: false }}
onCreated={({ gl }) => {
gl.setClearColor(0x000000, 0);
@@ -41,24 +597,26 @@ export const ThreeCanvas: React.FC<ThreeCanvasProps> = ({ emotion, isSpeaking, a
color="#e8f4ff"
/>
{/* Cyan atmosphere rim — far enough to avoid harsh specular band on helmet */}
{/* Cyan atmosphere rim */}
<pointLight position={[-5, 3, 2]} intensity={1.0} color="#60c8e8" />
{/* Desaturated blue fill — subtle depth without coloring the white lacquer */}
{/* Desaturated blue fill */}
<pointLight position={[4, -2, 2]} intensity={0.45} color="#8ab4d8" />
{/* Soft white back fill to keep geometry readable */}
<pointLight position={[0, 3, -4]} intensity={1.0} color="#ffffff" />
<Suspense fallback={null}>
<TechnicalBackdrop />
<HologramProjection emotion={emotion} isSpeaking={isSpeaking} avatarId={avatarId} />
<AvatarModelLoader avatarId={avatarId} emotion={emotion} isSpeaking={isSpeaking} />
</Suspense>
{/* OrbitControls calibrated to prevent clipping or losing focus */}
<OrbitControls
enableZoom={true}
minDistance={5.2}
maxDistance={7.2}
minDistance={4.8}
maxDistance={6.8}
enablePan={false}
autoRotate={false}
maxPolarAngle={Math.PI / 1.7}
src/index.css
+1289 -36
View File
File diff suppressed because it is too large. Load diff
src/vite-env.d.ts
Vendored
+1
View File
@@ -4,6 +4,7 @@ interface Window {
electronAPI?: {
windowControl: (action: 'minimize' | 'maximize' | 'close') => void;
setWindowMode: (mode: 'floating' | 'normal') => void;
setCockpitMode: (isOpen: boolean) => void;
onWindowModeChanged: (callback: (mode: 'floating' | 'normal') => void) => () => void;
onHermesPush: (callback: (event: any) => void) => () => void;
writeLog: (entry: any) => void;