fix: 修复无摄像头/麦克风时聊天框不显示的问题
- 重构 ChatPanel 逻辑,连接后始终显示输入框 - 将欢迎消息移入消息容器内 - 确保输入框在任何状态下都可见
This commit is contained in:
@@ -51,22 +51,13 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
|
||||
setInputText("");
|
||||
};
|
||||
|
||||
// 空状态
|
||||
if (messages.length === 0 && !currentReply) {
|
||||
if (!isConnected) {
|
||||
return (
|
||||
<div className="chat-panel chat-panel--empty">
|
||||
<span className="chat-panel--empty-icon">💬</span>
|
||||
<p>点击下方按钮开始对话</p>
|
||||
<span className="chat-panel--empty-hint">连接后可打字或语音与 AI 交互</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// 未连接时的空状态
|
||||
if (!isConnected) {
|
||||
return (
|
||||
<div className="chat-panel chat-panel--empty">
|
||||
<span className="chat-panel--empty-icon">💬</span>
|
||||
<p>在下方输入文字开始对话</p>
|
||||
<span className="chat-panel--empty-hint">也可以开启麦克风用语音对话</span>
|
||||
<p>点击下方按钮开始对话</p>
|
||||
<span className="chat-panel--empty-hint">连接后可打字或语音与 AI 交互</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -74,6 +65,15 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
|
||||
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