fix: 修复无摄像头/麦克风时聊天框不显示的问题
- 重构 ChatPanel 逻辑,连接后始终显示输入框 - 将欢迎消息移入消息容器内 - 确保输入框在任何状态下都可见
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user