diff --git a/frontend/src/App.css b/frontend/src/App.css index c88346b..1577688 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -265,6 +265,11 @@ body { margin-bottom: 4px; } +.video-placeholder__hint { + font-size: 0.72rem; + opacity: 0.6; +} + .video-indicator { position: absolute; bottom: 16px; @@ -488,6 +493,32 @@ body { gap: 12px; } +.chat-panel__welcome { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; + gap: 12px; + color: var(--color-text-muted); + font-size: 0.85rem; + padding: 40px 0; +} + +.chat-panel__welcome-icon { + font-size: 2.4rem; + opacity: 0.12; + margin-bottom: 4px; +} + +.chat-panel__welcome-hint { + font-size: 0.75rem; + opacity: 0.6; + max-width: 240px; + text-align: center; + line-height: 1.5; +} + .chat-panel--empty { display: flex; flex-direction: column; diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 71517d7..58ac759 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -173,6 +173,16 @@ function App() { 点击下方按钮开始对话 )} + {isConnected && !isCameraOn && ( +
+ + + + + 摄像头未开启 + 可在右侧聊天框打字对话 +
+ )} {/* 视频下方控制栏 */} diff --git a/frontend/src/components/ChatPanel/index.tsx b/frontend/src/components/ChatPanel/index.tsx index b405ef5..5836226 100644 --- a/frontend/src/components/ChatPanel/index.tsx +++ b/frontend/src/components/ChatPanel/index.tsx @@ -51,22 +51,13 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText setInputText(""); }; - // 空状态 - if (messages.length === 0 && !currentReply) { - if (!isConnected) { - return ( -
- 💬 -

点击下方按钮开始对话

- 连接后可通过摄像头和麦克风与 AI 交互 -
- ); - } + // 未连接时的空状态 + if (!isConnected) { return (
- 🎙️ -

对着摄像头说话即可

- AI 会自动识别你的语音并分析画面 + 💬 +

点击下方按钮开始对话

+ 连接后可打字或语音与 AI 交互
); } @@ -74,6 +65,15 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText return (
+ {/* 空状态提示 */} + {messages.length === 0 && !currentReply && ( +
+ 💬 +

在下方输入文字开始对话

+ 也可以开启麦克风用语音对话 +
+ )} + {messages.map((msg, index) => (
@@ -104,8 +104,8 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
- {/* 文本输入框 */} - {isConnected && onSendText && ( + {/* 文本输入框 - 连接后始终显示 */} + {onSendText && (
{ - // 1. 获取摄像头和麦克风 - await startCamera(); - setIsCameraOn(true); - const micStream = await startMic(); - if (!micStream) { - showToast("无法获取麦克风权限", "error"); - return; - } - setIsMicOn(true); - - // 2. 连接 WebSocket + // 1. 连接 WebSocket(必须) connect(); - // 3. 启动 VAD(传入麦克风 stream) - await startVAD(micStream); + // 2. 尝试获取摄像头(可选) + try { + await startCamera(); + setIsCameraOn(true); + } catch { + console.warn("[Session] 无法获取摄像头权限,将以纯文本模式运行"); + } + + // 3. 尝试获取麦克风(可选) + const micStream = await startMic(); + if (micStream) { + setIsMicOn(true); + // 4. 启动 VAD(仅在麦克风可用时) + await startVAD(micStream); + } else { + console.warn("[Session] 无法获取麦克风权限,将以文本输入模式运行"); + } }, [startCamera, startMic, connect, startVAD]); /** 结束会话 */