fix: 修复无摄像头/麦克风时聊天框不显示的问题

- 重构 ChatPanel 逻辑,连接后始终显示输入框
- 将欢迎消息移入消息容器内
- 确保输入框在任何状态下都可见
This commit is contained in:
2026-06-14 13:17:14 +08:00
parent dffc8aa538
commit 81c2b64e5f
2 changed files with 41 additions and 15 deletions

View File

@@ -493,6 +493,32 @@ body {
gap: 12px; 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 { .chat-panel--empty {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@@ -51,8 +51,7 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
setInputText(""); setInputText("");
}; };
// 空状态 // 未连接时的空状态
if (messages.length === 0 && !currentReply) {
if (!isConnected) { if (!isConnected) {
return ( return (
<div className="chat-panel chat-panel--empty"> <div className="chat-panel chat-panel--empty">
@@ -62,18 +61,19 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
</div> </div>
); );
} }
return (
<div className="chat-panel chat-panel--empty">
<span className="chat-panel--empty-icon">💬</span>
<p></p>
<span className="chat-panel--empty-hint"></span>
</div>
);
}
return ( return (
<div className="chat-panel"> <div className="chat-panel">
<div className="chat-panel__messages" ref={containerRef}> <div className="chat-panel__messages" ref={containerRef}>
{/* 空状态提示 */}
{messages.length === 0 && !currentReply && (
<div className="chat-panel__welcome">
<span className="chat-panel__welcome-icon">💬</span>
<p></p>
<span className="chat-panel__welcome-hint"></span>
</div>
)}
{messages.map((msg, index) => ( {messages.map((msg, index) => (
<div key={index} className={`chat-message chat-message--${msg.role}`}> <div key={index} className={`chat-message chat-message--${msg.role}`}>
<div className="chat-message__role"> <div className="chat-message__role">
@@ -104,8 +104,8 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
<div ref={bottomRef} /> <div ref={bottomRef} />
</div> </div>
{/* 文本输入框 */} {/* 文本输入框 - 连接后始终显示 */}
{isConnected && onSendText && ( {onSendText && (
<form className="chat-input" onSubmit={handleSubmit}> <form className="chat-input" onSubmit={handleSubmit}>
<input <input
type="text" type="text"