wx44wx/AI-VideoAssistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add core UI components, Assistants page, Dashscope and Volcengine agent configurations, and a WAV client example.

Browse Source
This commit is contained in:
Xin Wang
2026-03-10 03:31:39 +08:00
parent 373be4eb97
commit 47293ac46d
2 changed files with 16 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/UI.tsx
View File

@@ -219,14 +219,14 @@ export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, title, classNam
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" onClick={onClose} />
{/* Drawer Content */}
<div className={`relative ml-auto flex h-full w-full flex-col overflow-y-auto bg-background/95 border-l border-white/10 p-6 shadow-2xl animate-in slide-in-from-right ${className || 'max-w-md sm:max-w-lg'}`}>
<div className="flex items-center justify-between mb-4">
<div className={`relative ml-auto flex h-full w-full flex-col bg-background/95 border-l border-white/10 p-6 shadow-2xl animate-in slide-in-from-right ${className || 'max-w-md sm:max-w-lg'}`}>
<div className="flex items-center justify-between mb-4 shrink-0">
<h2 className="text-lg font-semibold text-foreground">{title}</h2>
<Button variant="ghost" size="icon" onClick={onClose}>
<X className="h-4 w-4" />
</Button>
</div>
<div className="flex-1">
<div className="flex-1 min-h-0 overflow-y-auto">
{children}
</div>
</div>

31
web/pages/Assistants.tsx
View File

@@ -2379,7 +2379,7 @@ export const DebugDrawer: React.FC<{
const [inputText, setInputText] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [callStatus, setCallStatus] = useState<'idle' | 'calling' | 'active'>('idle');
const [agentState, setAgentState] = useState<'waiting' | 'listening' | 'thinking' | 'speaking'>('waiting');
const [agentState, setAgentState] = useState<'listening' | 'thinking' | 'speaking'>('listening');
const [textPromptDialog, setTextPromptDialog] = useState<DebugTextPromptDialogState>({
open: false,
message: '',
@@ -2562,7 +2562,7 @@ export const DebugDrawer: React.FC<{
clearResponseTracking();
setMessages([]);
setCallStatus('idle');
setAgentState('waiting');
setAgentState('listening');
}
} else {
setMode('text');
@@ -2586,7 +2586,7 @@ export const DebugDrawer: React.FC<{
setSettingsDrawerOpen(false);
setIsSwapped(false);
setCallStatus('idle');
setAgentState('waiting');
setAgentState('listening');
}
}, [isOpen, assistant, mode]);
@@ -3112,7 +3112,7 @@ export const DebugDrawer: React.FC<{
console.error(e);
stopVoiceCapture();
setCallStatus('idle');
setAgentState('waiting');
setAgentState('listening');
const err = e as Error & { __dynamicVariables?: boolean };
if (err.__dynamicVariables) {
setWsStatus('disconnected');
@@ -3138,7 +3138,7 @@ export const DebugDrawer: React.FC<{
stopMedia();
closeWs();
setCallStatus('idle');
setAgentState('waiting');
setAgentState('listening');
clearResponseTracking();
setMessages([]);
setTextPromptDialog({ open: false, message: '', promptType: 'text' });
@@ -3590,7 +3590,7 @@ export const DebugDrawer: React.FC<{
}
if (type === 'output.audio.end') {
setAgentState('waiting');
setAgentState('listening');
return;
}
@@ -4516,36 +4516,31 @@ export const DebugDrawer: React.FC<{
</div>
<div className="text-center z-10">
<h3 className="text-xl font-bold text-white mb-2 tracking-tight">
{agentState === 'listening' ? '正在倾听...' :
agentState === 'thinking' ? '思考中...' :
{agentState === 'thinking' ? '思考中...' :
agentState === 'speaking' ? '正在回复...' :
'待机中'}
'正在倾听...'}
</h3>
<div className="flex items-center justify-center gap-2">
<span className="relative flex h-2.5 w-2.5">
<span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${
agentState === 'listening' ? 'bg-blue-400' :
agentState === 'thinking' ? 'bg-yellow-400' :
agentState === 'speaking' ? 'bg-green-400' :
'bg-gray-400'
'bg-blue-400'
}`}></span>
<span className={`relative inline-flex rounded-full h-2.5 w-2.5 ${
agentState === 'listening' ? 'bg-blue-500' :
agentState === 'thinking' ? 'bg-yellow-500' :
agentState === 'speaking' ? 'bg-green-500' :
'bg-gray-500'
'bg-blue-500'
}`}></span>
</span>
<p className={`text-sm font-medium ${
agentState === 'listening' ? 'text-blue-400' :
agentState === 'thinking' ? 'text-yellow-400' :
agentState === 'speaking' ? 'text-green-400' :
'text-gray-400'
'text-blue-400'
}`}>
{agentState === 'listening' ? 'Listening' :
agentState === 'thinking' ? 'Thinking' :
{agentState === 'thinking' ? 'Thinking' :
agentState === 'speaking' ? 'Speaking' :
'Waiting'}
'Listening'}
</p>
</div>
</div>