| import { useCallback, useRef, useState } from 'react'; |
| import { useAgent } from './client/useAgent'; |
| import { ChatPanel } from './components/Chat'; |
| import { ModelDialog } from './components/ModelDialog'; |
| import { TopBar } from './components/TopBar'; |
| import { WorkspacePanel } from './components/Workspace'; |
|
|
| const embedded = typeof window !== 'undefined' && window.self !== window.top; |
| const noWebGpu = typeof navigator !== 'undefined' && !('gpu' in navigator); |
|
|
| export default function App() { |
| const { state, pending, shell, actions } = useAgent(); |
| const [draft, setDraft] = useState(''); |
| const [split, setSplit] = useState(55); |
| const mainRef = useRef<HTMLElement>(null); |
|
|
| const send = useCallback(() => { |
| void actions.send(draft, () => setDraft('')); |
| }, [actions, draft]); |
|
|
| const loadClick = () => { |
| actions.loadModel(false).catch((e: Error) => { |
| if (e.name !== 'AbortError') actions.setError(e.message); |
| }); |
| }; |
|
|
| const startDrag = (e: React.PointerEvent) => { |
| const el = mainRef.current; |
| if (!el) return; |
| (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); |
| const move = (ev: PointerEvent) => { |
| const r = el.getBoundingClientRect(); |
| setSplit(Math.min(80, Math.max(25, ((ev.clientX - r.left) / r.width) * 100))); |
| }; |
| const up = () => { |
| window.removeEventListener('pointermove', move); |
| window.removeEventListener('pointerup', up); |
| }; |
| window.addEventListener('pointermove', move); |
| window.addEventListener('pointerup', up); |
| }; |
|
|
| const message = state.error || state.notice; |
|
|
| return ( |
| <div className="app"> |
| <TopBar meter={state.meter} modelLoaded={state.modelLoaded} busy={state.busy} load={state.load} onLoad={loadClick} /> |
| |
| {(embedded || noWebGpu) && ( |
| <div className="banner" role="note"> |
| <span> |
| {noWebGpu |
| ? 'WebGPU is not available in this browser or frame. Use a recent Chrome or Edge.' |
| : 'This app is running inside a frame. If model loading fails because WebGPU or browser storage is blocked, open it in its own tab.'} |
| </span> |
| <a href={window.location.href} target="_blank" rel="noopener noreferrer">Open in a new tab ↗</a> |
| </div> |
| )} |
| {message && ( |
| <div className={`banner${state.error ? ' error' : ''}`} role="status"> |
| <span>{message}</span> |
| <button className="quiet" onClick={actions.dismissNotice}>Dismiss</button> |
| </div> |
| )} |
| |
| <main ref={mainRef} style={{ gridTemplateColumns: `${split}fr 10px ${100 - split}fr` }}> |
| <ChatPanel |
| messages={state.messages} |
| streaming={state.streaming} |
| busy={state.busy} |
| draft={draft} |
| contextTokens={state.context.input + state.context.output} |
| onDraft={setDraft} |
| onSend={send} |
| onStop={actions.stop} |
| onNewChat={actions.newChat} |
| /> |
| <div |
| className="resizer" |
| role="separator" |
| aria-orientation="vertical" |
| aria-label="Resize chat and workspace" |
| tabIndex={0} |
| onPointerDown={startDrag} |
| onDoubleClick={() => setSplit(55)} |
| onKeyDown={(e) => { |
| if (e.key === 'ArrowLeft') setSplit((s) => Math.max(25, s - 3)); |
| if (e.key === 'ArrowRight') setSplit((s) => Math.min(80, s + 3)); |
| }} |
| /> |
| <WorkspacePanel |
| files={state.files} |
| shell={shell} |
| busy={state.busy} |
| onSave={actions.writeFile} |
| onRun={actions.runShell} |
| onClearShell={actions.clearShell} |
| onError={actions.setError} |
| /> |
| </main> |
| |
| <ModelDialog |
| pending={pending} |
| load={state.load} |
| loading={state.busy === 'load'} |
| onConfirm={actions.confirmPending} |
| onCancel={actions.cancelPending} |
| /> |
| </div> |
| ); |
| } |
|
|
