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 && ( +
点击下方按钮开始对话
- 连接后可通过摄像头和麦克风与 AI 交互 -对着摄像头说话即可
- AI 会自动识别你的语音并分析画面 + 💬 +点击下方按钮开始对话
+ 连接后可打字或语音与 AI 交互在下方输入文字开始对话
+ 也可以开启麦克风用语音对话 +