// Main chat screen — real send with attachment support
function Chat({
model, tier, onOpenHistory, onOpenModelPicker, onOpenSettings, onNewChat,
messages, isStreaming, onSend, onVoice, onUpgrade, attachOpen, setAttachOpen,
}) {
const S = window.SOL;
const [input, setInput] = React.useState('');
const [pendingAttachments, setPendingAttachments] = React.useState([]);
const scrollRef = React.useRef(null);
const fileImgRef = React.useRef(null);
const fileCamRef = React.useRef(null);
const fileVidRef = React.useRef(null);
React.useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [messages, isStreaming]);
const currentModel = model === 'apollo'
? { name:'Apollo 1', variant:'apollo', tier:'Plus' }
: { name:'Solus X5', variant:'solus', tier:'Free' };
const send = () => {
if (!input.trim() && pendingAttachments.length === 0) return;
onSend(input.trim(), pendingAttachments);
setInput(''); setPendingAttachments([]);
};
const readFile = (file) => new Promise((resolve, reject) => {
const r = new FileReader();
r.onload = e => resolve({ dataUrl: e.target.result, name: file.name, type: file.type });
r.onerror = reject;
r.readAsDataURL(file);
});
const handleFileChange = async (e) => {
const files = Array.from(e.target.files || []);
if (!files.length) return;
const attachments = await Promise.all(files.map(readFile));
setPendingAttachments(prev => [...prev, ...attachments]);
setAttachOpen(false);
e.target.value = '';
};
const removeAttachment = (i) => setPendingAttachments(prev => prev.filter((_,idx) => idx !== i));
return (
{/* Hidden file inputs */}
{/* Status bar spacer */}
{/* Header */}
{currentModel.name}
{currentModel.tier.toUpperCase()}
{/* Messages */}
{messages.length === 0
? { setInput(t); setTimeout(() => onSend(t, []), 60); }}/>
: messages.map(m => )
}
{isStreaming &&
{/* Floating composer */}
{/* Pending attachment thumbnails */}
{pendingAttachments.length > 0 && (
{pendingAttachments.map((a, i) => (
{a.type.startsWith('video/') ? (
) : (
)}
removeAttachment(i)} style={{ position:'absolute', top:2, right:2, width:18, height:18, borderRadius:'50%', border:'none', background:'rgba(28,26,23,0.7)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
))}
)}
setAttachOpen(true)}
onVoice={onVoice} isStreaming={isStreaming}
/>
{/* Attach sheet */}
{attachOpen && (
setAttachOpen(false)} onUpgrade={onUpgrade}
onCamera={() => fileCamRef.current?.click()}
onPhoto={() => fileImgRef.current?.click()}
onVideo={() => fileVidRef.current?.click()}
onFile={() => fileImgRef.current?.click()}
/>
)}
{greeting}
Ask anything. Paste a draft. Share a file.
{suggestions.map((s,i) => (
onSuggest(s)} style={{ padding:'12px 14px', borderRadius:14, background:S.paper, border:`1px solid ${S.line}`, fontFamily:S.sans, fontSize:14, color:S.ink2, textAlign:'left', cursor:'pointer', display:'flex', alignItems:'center', gap:10 }}>
{s}
))}
);
}
// Single message
function Message({ msg }) {
const S = window.SOL;
if (msg.role === 'switch') {
const fromName = msg.from==='apollo'?'Apollo 1':'Solus X5';
const toName = msg.to==='apollo' ?'Apollo 1':'Solus X5';
return (
);
}
if (msg.role === 'user') {
return (
{msg.attachments?.map((a,i) => (
a.type?.startsWith('video/')
?
{a.name||'Video'}
:
))}
{msg.text &&
{msg.text}
}
{!msg.streaming && msg.text && (
{['copy','refresh','thumbUp','thumbDown'].map(ic => (
ic==='copy' && navigator.clipboard?.writeText(msg.text)} style={{ width:32, height:32, borderRadius:8, border:'none', background:'transparent', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
))}
)}
);
}
// Render assistant text with basic markdown: **bold**, *italic*, `code`, bullet lists
function AssistantText({ text }) {
const lines = text.split('\n');
return lines.map((line, li) => {
const parts = line.split(/(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g);
const rendered = parts.map((p, i) => {
if (p.startsWith('**') && p.endsWith('**')) return {p.slice(2,-2)} ;
if (p.startsWith('*') && p.endsWith('*')) return {p.slice(1,-1)} ;
if (p.startsWith('`') && p.endsWith('`')) return {p.slice(1,-1)};
return {p} ;
});
return {rendered}{li < lines.length-1 ? ;
});
}
function StreamingIndicator() {
const S = window.SOL;
return (
);
}
function Composer({ value, setValue, onSend, onAttachClick, onVoice, isStreaming }) {
const S = window.SOL;
const hasText = value.trim().length > 0;
const textareaRef = React.useRef(null);
const handleInput = (e) => {
setValue(e.target.value);
const el = e.target;
el.style.height = 'auto';
el.style.height = Math.min(el.scrollHeight, 120) + 'px';
};
return (
)}