137 lines
4.3 KiB
React
137 lines
4.3 KiB
React
import React, { useEffect, useRef } from 'react';
|
|
import MessageBubble from './MessageBubble';
|
|
|
|
export default function ChatWindow({ messages, loadingHistory, streaming, onSendMessage, onCancel, activeSession, onTogglePanel }) {
|
|
const bottomRef = useRef(null);
|
|
const inputRef = useRef(null);
|
|
const [input, setInput] = React.useState('');
|
|
|
|
useEffect(() => {
|
|
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
|
|
}, [messages]);
|
|
|
|
function handleSend() {
|
|
const text = input.trim();
|
|
if (!text || streaming) return;
|
|
setInput('');
|
|
onSendMessage(text);
|
|
}
|
|
|
|
function handleKeyDown(e) {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSend();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex-col flex-1 overflow-hidden" style={{ background: 'var(--bg-base)' }}>
|
|
|
|
{/* Header */}
|
|
<div className="panel-header" style={{ padding: '0 12px 0 20px', justifyContent: 'space-between' }}>
|
|
<span className="text-base text-secondary">
|
|
{activeSession ? (activeSession.name || activeSession.external_id) : 'No session selected'}
|
|
</span>
|
|
<button className="btn-icon" onClick={onTogglePanel} title="Session info">⊹</button>
|
|
</div>
|
|
|
|
{/* Message thread */}
|
|
<div className="flex-1 scroll-y" style={{ padding: '20px 0' }}>
|
|
{!activeSession && (
|
|
<div className="flex-col items-center justify-center" style={{
|
|
height: '100%',
|
|
color: 'var(--text-muted)',
|
|
gap: '12px',
|
|
}}>
|
|
<div style={{ fontSize: '32px', opacity: 0.4 }}>✦</div>
|
|
<p className="text-base">Select a session or start a new chat</p>
|
|
</div>
|
|
)}
|
|
|
|
{loadingHistory && (
|
|
<div className="flex justify-center text-muted" style={{ padding: '40px', fontSize: '13px' }}>
|
|
Loading history...
|
|
</div>
|
|
)}
|
|
|
|
{!loadingHistory && messages.map(msg => (
|
|
<MessageBubble key={msg.id} message={msg} />
|
|
))}
|
|
|
|
<div ref={bottomRef} />
|
|
</div>
|
|
|
|
{/* Input bar */}
|
|
<div style={{
|
|
borderTop: '1px solid var(--border)',
|
|
padding: '12px 16px',
|
|
background: 'var(--bg-surface)',
|
|
flexShrink: 0,
|
|
}}>
|
|
<div className="flex items-end" style={{
|
|
gap: '10px',
|
|
background: 'var(--bg-elevated)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: 'var(--radius-lg)',
|
|
padding: '8px 12px',
|
|
}}>
|
|
<textarea
|
|
ref={inputRef}
|
|
value={input}
|
|
onChange={e => setInput(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
disabled={!activeSession}
|
|
placeholder={activeSession ? 'Message NexusAI...' : 'Select a session to start chatting'}
|
|
rows={1}
|
|
style={{
|
|
flex: 1,
|
|
background: 'transparent',
|
|
border: 'none',
|
|
outline: 'none',
|
|
color: 'var(--text-primary)',
|
|
fontSize: '14px',
|
|
lineHeight: '1.6',
|
|
resize: 'none',
|
|
fontFamily: 'inherit',
|
|
maxHeight: '120px',
|
|
overflowY: 'auto',
|
|
}}
|
|
onInput={e => {
|
|
e.target.style.height = 'auto';
|
|
e.target.style.height = `${e.target.scrollHeight}px`;
|
|
}}
|
|
/>
|
|
|
|
{streaming ? (
|
|
<button onClick={onCancel} className="btn-reset" style={{
|
|
background: 'var(--text-muted)',
|
|
borderRadius: 'var(--radius-md)',
|
|
width: '32px',
|
|
height: '32px',
|
|
flexShrink: 0,
|
|
color: 'white',
|
|
fontSize: '12px',
|
|
}}>■</button>
|
|
) : (
|
|
<button
|
|
onClick={handleSend}
|
|
disabled={!activeSession || !input.trim()}
|
|
className="btn-primary"
|
|
style={{
|
|
width: '32px',
|
|
height: '32px',
|
|
flexShrink: 0,
|
|
fontSize: '16px',
|
|
border: '1px solid var(--border)',
|
|
}}
|
|
>↑</button>
|
|
)}
|
|
</div>
|
|
|
|
<p className="text-xs text-muted" style={{ textAlign: 'center', marginTop: '8px' }}>
|
|
Enter to send · Shift+Enter for new line
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |