fix: 修复无摄像头/麦克风时聊天框不显示的问题
- 重构 ChatPanel 逻辑,连接后始终显示输入框 - 将欢迎消息移入消息容器内 - 确保输入框在任何状态下都可见
This commit is contained in:
@@ -493,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;
|
||||
|
||||
@@ -51,8 +51,7 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
|
||||
setInputText("");
|
||||
};
|
||||
|
||||
// 空状态
|
||||
if (messages.length === 0 && !currentReply) {
|
||||
// 未连接时的空状态
|
||||
if (!isConnected) {
|
||||
return (
|
||||
<div className="chat-panel chat-panel--empty">
|
||||
@@ -62,18 +61,19 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
|
||||
</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 (
|
||||
<div className="chat-panel">
|
||||
<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) => (
|
||||
<div key={index} className={`chat-message chat-message--${msg.role}`}>
|
||||
<div className="chat-message__role">
|
||||
@@ -104,8 +104,8 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
|
||||
{/* 文本输入框 */}
|
||||
{isConnected && onSendText && (
|
||||
{/* 文本输入框 - 连接后始终显示 */}
|
||||
{onSendText && (
|
||||
<form className="chat-input" onSubmit={handleSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
|
||||
Reference in New Issue
Block a user