storme/nexusAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chat client clean up and switch to llama.cpp with models folder network sharing

Browse Source
This commit is contained in:
Storme-bit
2026-04-09 04:13:21 -07:00
parent 541e664da1
commit 5c6e027fc1
15 changed files with 305 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
packages/chat-client/src/components/ChatWindow.jsx
View File

@@ -6,7 +6,6 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
const inputRef = useRef(null);
const [input, setInput] = React.useState('');
// Auto-scroll to bottom when messages change
useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);
@@ -26,58 +25,30 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
}
return (
<div style={{
flex: 1,
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
background: 'var(--bg-base)',
}}>
<div className="flex-col flex-1 overflow-hidden" style={{ background: 'var(--bg-base)' }}>
{/* Header */}
<div style={{
height: 'var(--header-height)',
borderBottom: '1px solid var(--border)',
display: 'flex',
alignItems: 'center',
padding: '0 20px',
background: 'var(--bg-surface)',
flexShrink: 0,
}}>
<span style={{ color: 'var(--text-secondary)', fontSize: '13px' }}>
<div className="panel-header" style={{ padding: '0 20px' }}>
<span className="text-base text-secondary">
{activeSession ? activeSession.external_id : 'No session selected'}
</span>
</div>
{/* Message thread */}
<div style={{
flex: 1,
overflowY: 'auto',
padding: '20px 0',
}}>
<div className="flex-1 scroll-y" style={{ padding: '20px 0' }}>
{!activeSession && (
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
<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 style={{ fontSize: '14px' }}>Select a session or start a new chat</p>
<p className="text-base">Select a session or start a new chat</p>
</div>
)}
{loadingHistory && (
<div style={{
display: 'flex',
justifyContent: 'center',
padding: '40px',
color: 'var(--text-muted)',
fontSize: '13px',
}}>
<div className="flex justify-center text-muted" style={{ padding: '40px', fontSize: '13px' }}>
Loading history...
</div>
)}
@@ -96,13 +67,11 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
background: 'var(--bg-surface)',
flexShrink: 0,
}}>
<div style={{
display: 'flex',
<div className="flex items-end" style={{
gap: '10px',
alignItems: 'flex-end',
background: 'var(--bg-elevated)',
border: '1px solid var(--border)',
borderRadius: '12px',
borderRadius: 'var(--radius-lg)',
padding: '8px 12px',
}}>
<textarea
@@ -127,23 +96,17 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
overflowY: 'auto',
}}
onInput={e => {
// Auto-grow textarea
e.target.style.height = 'auto';
e.target.style.height = `${e.target.scrollHeight}px`;
}}
/>
{streaming ? (
<button onClick={onCancel} style={{
<button onClick={onCancel} className="btn-reset" style={{
background: 'var(--text-muted)',
border: 'none',
borderRadius: '8px',
borderRadius: 'var(--radius-md)',
width: '32px',
height: '32px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
color: 'white',
fontSize: '12px',
@@ -152,29 +115,19 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
<button
onClick={handleSend}
disabled={!activeSession || !input.trim()}
className="btn-primary"
style={{
background: activeSession && input.trim() ? 'var(--accent)' : 'var(--bg-elevated)',
border: '1px solid var(--border)',
borderRadius: '8px',
width: '32px',
height: '32px',
cursor: activeSession && input.trim() ? 'pointer' : 'default',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
color: activeSession && input.trim() ? 'white' : 'var(--text-muted)',
fontSize: '16px',
transition: 'background 0.15s',
}}>↑</button>
border: '1px solid var(--border)',
}}
>↑</button>
)}
</div>
<p style={{
fontSize: '11px',
color: 'var(--text-muted)',
textAlign: 'center',
marginTop: '8px',
}}>
<p className="text-xs text-muted" style={{ textAlign: 'center', marginTop: '8px' }}>
Enter to send · Shift+Enter for new line
</p>
</div>

85
packages/chat-client/src/components/InfoPanel.jsx
View File

@@ -1,54 +1,28 @@
import React from 'react';
import { MODELS } from '../config/constants';
export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel, lastTokenCount, selectedModel, onModelChange }) {
export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel, lastTokenCount, selectedModel, onModelChange, models }) {
return (
<div style={{
<div className="flex-col" style={{
width: isOpen ? 'var(--panel-width)' : '56px',
flexShrink: 0,
background: 'var(--bg-surface)',
borderLeft: '1px solid var(--border)',
display: 'flex',
flexDirection: 'column',
transition: 'width 0.2s ease',
overflow: 'hidden',
}}>
{/* Header */}
<div style={{
height: 'var(--header-height)',
display: 'flex',
alignItems: 'center',
<div className="panel-header" style={{
justifyContent: isOpen ? 'space-between' : 'center',
padding: isOpen ? '0 16px 0 12px' : '0',
borderBottom: '1px solid var(--border)',
flexShrink: 0,
}}>
<button onClick={onToggle} style={{
background: 'none',
border: 'none',
color: 'var(--text-muted)',
cursor: 'pointer',
padding: '6px',
borderRadius: '6px',
fontSize: '16px',
lineHeight: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
{isOpen ? '▶' : '◀'}
</button>
{isOpen && (
<span style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-secondary)' }}>
Session Info
</span>
)}
<button className="btn-icon" onClick={onToggle}>{isOpen ? '▶' : '◀'}</button>
{isOpen && <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Session Info</span>}
</div>
{isOpen && (
<div style={{ flex: 1, overflowY: 'auto', padding: '16px' }}>
<div className="flex-1 scroll-y" style={{ padding: '16px' }}>
{/* Model selector */}
<Section title="Model">
@@ -60,14 +34,14 @@ export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel,
padding: '8px 10px',
background: 'var(--bg-elevated)',
border: '1px solid var(--border)',
borderRadius: '8px',
borderRadius: 'var(--radius-md)',
color: 'var(--text-primary)',
fontSize: '13px',
cursor: 'pointer',
outline: 'none',
}}
>
{MODELS.map(m => (
{models.map(m => (
<option key={m.value} value={m.value}>{m.label}</option>
))}
</select>
@@ -76,44 +50,32 @@ export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel,
{/* Session details */}
<Section title="Session">
{activeSession ? (
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<div className="flex-col" style={{ gap: '8px' }}>
<InfoRow label="ID" value={activeSession.external_id} mono truncate />
<InfoRow
label="Status"
value={activeSession.isNew ? 'Unsaved' : 'Active'}
accent={activeSession.isNew}
/>
<InfoRow label="Status" value={activeSession.isNew ? 'Unsaved' : 'Active'} accent={activeSession.isNew} />
</div>
) : (
<p style={{ fontSize: '12px', color: 'var(--text-muted)' }}>No session selected</p>
<p className="text-sm text-muted">No session selected</p>
)}
</Section>
{/* Last response stats */}
<Section title="Last Response">
{lastModel ? (
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<div className="flex-col" style={{ gap: '8px' }}>
<InfoRow label="Model" value={lastModel} />
<InfoRow label="Tokens" value={lastTokenCount > 0 ? lastTokenCount.toLocaleString() : '—'} />
</div>
) : (
<p style={{ fontSize: '12px', color: 'var(--text-muted)' }}>No response yet</p>
<p className="text-sm text-muted">No response yet</p>
)}
</Section>
</div>
)}
{/* Collapsed — show icon indicators */}
{!isOpen && (
<div style={{
flex: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
paddingTop: '16px',
gap: '16px',
}}>
<div className="flex-col items-center" style={{ flex: 1, paddingTop: '16px', gap: '16px' }}>
<IconHint title="Model">M</IconHint>
<IconHint title="Session">S</IconHint>
</div>
@@ -122,21 +84,10 @@ export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel,
);
}
// ── Internal sub-components ──────────────────────────────────
function Section({ title, children }) {
return (
<div style={{ marginBottom: '24px' }}>
<p style={{
fontSize: '11px',
fontWeight: 500,
color: 'var(--text-muted)',
textTransform: 'uppercase',
letterSpacing: '0.08em',
marginBottom: '10px',
}}>
{title}
</p>
<p className="label-upper" style={{ marginBottom: '10px' }}>{title}</p>
{children}
</div>
);
@@ -144,8 +95,8 @@ function Section({ title, children }) {
function InfoRow({ label, value, mono, truncate, accent }) {
return (
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px' }}>
<span style={{ fontSize: '12px', color: 'var(--text-muted)', flexShrink: 0 }}>{label}</span>
<div className="flex items-center" style={{ justifyContent: 'space-between', gap: '8px' }}>
<span className="text-sm text-muted flex-shrink">{label}</span>
<span style={{
fontSize: '12px',
color: accent ? 'var(--accent)' : 'var(--text-secondary)',
@@ -167,7 +118,7 @@ function IconHint({ title, children }) {
<div title={title} style={{
width: '32px',
height: '32px',
borderRadius: '8px',
borderRadius: 'var(--radius-md)',
background: 'var(--bg-elevated)',
border: '1px solid var(--border)',
display: 'flex',

17
packages/chat-client/src/components/MessageBubble.jsx
View File

@@ -4,25 +4,20 @@ export default function MessageBubble({ message }) {
const isUser = message.role === 'user';
return (
<div style={{
display: 'flex',
<div className="flex" style={{
justifyContent: isUser ? 'flex-end' : 'flex-start',
marginBottom: '12px',
padding: '0 16px',
}}>
{!isUser && (
<div style={{
<div className="flex items-center justify-center flex-shrink" style={{
width: '28px',
height: '28px',
borderRadius: '50%',
background: 'var(--accent)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '12px',
fontWeight: 600,
marginRight: '8px',
flexShrink: 0,
alignSelf: 'flex-end',
}}>N</div>
)}
@@ -47,16 +42,12 @@ export default function MessageBubble({ message }) {
height: '14px',
background: 'var(--text-secondary)',
marginLeft: '2px',
borderRadius: '2px',
borderRadius: 'var(--radius-sm)',
animation: 'blink 1s step-end infinite',
}} />
)}
{message.error && (
<div style={{
marginTop: '6px',
fontSize: '12px',
color: '#ff6b6b',
}}>
<div className="text-xs" style={{ marginTop: '6px', color: '#ff6b6b' }}>
⚠ Failed to complete response
</div>
)}

84
packages/chat-client/src/components/SessionList.jsx
View File

@@ -23,89 +23,51 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
flexShrink: 0,
background: 'var(--bg-surface)',
borderRight: '1px solid var(--border)',
display: 'flex',
flexDirection: 'column',
transition: 'width 0.2s ease',
overflow: 'hidden',
}}>
}} className="flex-col">
{/* Header */}
<div style={{
height: 'var(--header-height)',
display: 'flex',
alignItems: 'center',
<div className="panel-header" style={{
justifyContent: isOpen ? 'space-between' : 'center',
padding: isOpen ? '0 12px 0 16px' : '0',
borderBottom: '1px solid var(--border)',
flexShrink: 0,
}}>
{isOpen && (
<span style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-secondary)' }}>
Conversations
</span>
)}
<button onClick={onToggle} style={{
background: 'none',
border: 'none',
color: 'var(--text-muted)',
cursor: 'pointer',
padding: '6px',
borderRadius: '6px',
fontSize: '16px',
lineHeight: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
{isOpen ? '◀' : '▶'}
</button>
{isOpen && <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Conversations</span>}
<button className="btn-icon" onClick={onToggle}>{isOpen ? '◀' : '▶'}</button>
</div>
{/* New chat button */}
<div style={{ padding: isOpen ? '12px' : '12px 8px', flexShrink: 0 }}>
<button onClick={onNewChat} style={{
<button className="btn-primary" onClick={onNewChat} style={{
width: '100%',
padding: isOpen ? '8px 12px' : '8px',
background: 'var(--accent)',
border: 'none',
borderRadius: '8px',
color: 'white',
fontSize: '13px',
fontWeight: 500,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: isOpen ? 'flex-start' : 'center',
gap: '8px',
transition: 'background 0.15s',
whiteSpace: 'nowrap',
overflow: 'hidden',
}}
onMouseEnter={e => e.currentTarget.style.background = 'var(--accent-hover)'}
onMouseLeave={e => e.currentTarget.style.background = 'var(--accent)'}
>
}}>
<span style={{ fontSize: '18px', lineHeight: 1, flexShrink: 0 }}>+</span>
{isOpen && <span>New Chat</span>}
</button>
</div>
{/* Session list */}
<div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>
<div className="flex-1 scroll-y">
{isOpen && sessions.map(session => {
const isActive = activeSession?.external_id === session.external_id;
return (
<button
key={session.external_id}
onClick={() => onSelectSession(session)}
className="btn-reset"
style={{
width: '100%',
padding: '10px 16px',
background: isActive ? 'var(--bg-elevated)' : 'transparent',
border: 'none',
borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
textAlign: 'left',
cursor: 'pointer',
display: 'flex',
flexDirection: 'column',
gap: '3px',
transition: 'background 0.1s',
@@ -113,45 +75,25 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-elevated)'; }}
onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}
>
<div style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '8px',
}}>
<span style={{
fontSize: '13px',
<div className="flex truncate" style={{ justifyContent: 'space-between', gap: '8px' }}>
<span className="text-base truncate" style={{
color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
fontWeight: isActive ? 500 : 400,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
flex: 1,
}}>
{getPreview(session)}
</span>
<span style={{ fontSize: '11px', color: 'var(--text-muted)', flexShrink: 0 }}>
{formatDate(session.updated_at)}
</span>
<span className="text-xs text-muted flex-shrink">{formatDate(session.updated_at)}</span>
</div>
{session.isNew && (
<span style={{
fontSize: '11px',
color: 'var(--accent)',
fontStyle: 'italic',
}}>Unsaved</span>
<span className="text-xs text-accent" style={{ fontStyle: 'italic' }}>Unsaved</span>
)}
</button>
);
})}
{isOpen && sessions.length === 0 && (
<div style={{
padding: '24px 16px',
color: 'var(--text-muted)',
fontSize: '13px',
textAlign: 'center',
}}>
<div className="text-base text-muted" style={{ padding: '24px 16px', textAlign: 'center' }}>
No conversations yet
</div>
)}