Spaces:
Running
Running
| import React, { useEffect, useRef, useState } from 'react'; | |
| import type { OutputField as OutputFieldData } from '../types'; | |
| import { KEYBOARD_HINT, useDragResize } from '../hooks/useDragResize'; | |
| import { useUIF } from './UIFContext'; | |
| import { ResizeCorners } from './ResizeCorners'; | |
| interface ViewProps { | |
| field: OutputFieldData; | |
| active: boolean; | |
| flash: number; | |
| popped?: boolean; | |
| onHeaderPointerDown?: (e: React.PointerEvent) => void; | |
| /** Keyboard move/resize for the header; makes the header focusable. */ | |
| onHeaderKeyDown?: (e: React.KeyboardEvent) => void; | |
| onRename?: (title: string) => void; | |
| /** Send a chat message into this output. Shows a reply box when set. */ | |
| onSubmit?: (text: string) => void; | |
| /** Keep a reply in .memory. Shows a ◈ button on replies when set. */ | |
| onRemember?: (text: string) => void; | |
| onPopOut?: () => void; | |
| /** Read replies aloud: shows a 🔊 toggle when set. */ | |
| onSpeak?: () => void; | |
| onHome?: () => void; | |
| /** Fill the screen or shrink back: a ⤢ button, and a double-click on the header (the title still renames). */ | |
| onMaximize?: () => void; | |
| onClose: () => void; | |
| } | |
| /** Header and message list, shared by the in-page panel and the pop-out window. */ | |
| export function OutputView({ | |
| field, | |
| active, | |
| flash, | |
| popped, | |
| onHeaderPointerDown, | |
| onHeaderKeyDown, | |
| onRename, | |
| onSubmit, | |
| onRemember, | |
| onPopOut, | |
| onSpeak, | |
| onHome, | |
| onMaximize, | |
| onClose, | |
| }: ViewProps) { | |
| const [kept, setKept] = useState<Record<string, boolean>>({}); | |
| const listRef = useRef<HTMLDivElement>(null); | |
| const [editing, setEditing] = useState(false); | |
| const [reply, setReply] = useState(''); | |
| const busy = field.messages.some(m => m.pending); | |
| const finishRename = (title: string | null) => { | |
| setEditing(false); | |
| if (title !== null && title.trim() && title.trim() !== field.title) onRename?.(title); | |
| }; | |
| const submit = (e: React.FormEvent) => { | |
| e.preventDefault(); | |
| if (!reply.trim() || busy) return; | |
| onSubmit?.(reply); | |
| setReply(''); | |
| }; | |
| const last = field.messages[field.messages.length - 1]; | |
| useEffect(() => { | |
| const el = listRef.current; | |
| if (el) el.scrollTop = el.scrollHeight; | |
| }, [field.messages.length, last?.text]); | |
| return ( | |
| <> | |
| {flash > 0 && <div key={flash} className="uif-flash" style={{ '--uif-color': field.color } as React.CSSProperties} />} | |
| <div | |
| className={`uif-output-header ${busy ? 'is-busy' : ''}`} | |
| onPointerDown={editing ? undefined : onHeaderPointerDown} | |
| onKeyDown={editing ? undefined : onHeaderKeyDown} | |
| onDoubleClick={e => { | |
| // the title's own double-click renames; anywhere else on the header maximizes or shrinks back | |
| if (!editing && onMaximize && !(e.target as HTMLElement).closest('.uif-output-title, .uif-output-buttons')) onMaximize(); | |
| }} | |
| tabIndex={onHeaderKeyDown ? 0 : undefined} | |
| role={onHeaderKeyDown ? 'group' : undefined} | |
| aria-label={onHeaderKeyDown ? `${field.title} output. ${KEYBOARD_HINT}` : undefined} | |
| > | |
| <span className="uif-output-dot" style={{ background: field.color }} /> | |
| <span className="uif-output-avatar" aria-hidden="true" /> | |
| {editing ? ( | |
| <input | |
| className="uif-output-rename" | |
| defaultValue={field.title} | |
| aria-label="Output name" | |
| autoFocus | |
| onFocus={e => e.currentTarget.select()} | |
| onPointerDown={e => e.stopPropagation()} | |
| onKeyDown={e => { | |
| e.stopPropagation(); | |
| if (e.key === 'Enter') finishRename(e.currentTarget.value); | |
| if (e.key === 'Escape') finishRename(null); | |
| }} | |
| onBlur={e => finishRename(e.currentTarget.value)} | |
| /> | |
| ) : ( | |
| <span | |
| className="uif-output-title" | |
| title={onRename ? 'Double-click to rename' : undefined} | |
| onDoubleClick={onRename ? () => setEditing(true) : undefined} | |
| > | |
| {field.title} | |
| </span> | |
| )} | |
| {active && <span className="uif-output-badge">active</span>} | |
| <span className="uif-output-buttons" onPointerDown={e => e.stopPropagation()}> | |
| {onSpeak && ( | |
| <button | |
| type="button" | |
| className={field.speak ? 'is-on' : ''} | |
| title={field.speak ? 'Stop reading replies aloud' : 'Read replies aloud'} | |
| aria-pressed={!!field.speak} | |
| onClick={onSpeak} | |
| > | |
| {field.speak ? '🔊' : '🔈'} | |
| </button> | |
| )} | |
| {onPopOut && ( | |
| <button type="button" title="Pop out to a window" onClick={onPopOut}>⧉</button> | |
| )} | |
| {onHome && ( | |
| <button type="button" title={popped ? 'Call home' : 'Back beside the field'} onClick={onHome}>⌂</button> | |
| )} | |
| {onMaximize && ( | |
| <button type="button" title={field.maximized ? 'Shrink back (or double-click the header, or Esc)' : 'Fill the screen (or double-click the header)'} | |
| aria-pressed={!!field.maximized} onClick={onMaximize}>{field.maximized ? '⤡' : '⤢'}</button> | |
| )} | |
| <button type="button" title="Close" onClick={onClose}>✕</button> | |
| </span> | |
| </div> | |
| <div className="uif-output-body" ref={listRef}> | |
| {field.messages.length === 0 && <div className="uif-output-empty">No messages yet.</div>} | |
| {field.messages.map(m => { | |
| if (m.role === 'system' && !m.text && !m.pending) return null; // a status line the engine cleared | |
| const keep = onRemember && m.role === 'assistant' && !m.pending && !m.undelivered && m.text; | |
| const msg = ( | |
| <div key={m.id} className={['uif-msg', `uif-msg-${m.role}`, m.kind && `is-${m.kind}`, m.tone && `is-${m.tone}`, m.undelivered && 'is-undelivered'].filter(Boolean).join(' ')}> | |
| {m.text} | |
| {m.pending && <span className="uif-caret">▍</span>} | |
| {m.media && ( | |
| <span className="uif-msg-media"> | |
| {m.media.kind === 'video' | |
| ? <video src={m.media.url} controls playsInline loop className="uif-media" aria-label={m.text || 'video'} /> | |
| : <img src={m.media.url} alt={m.text || 'image'} className="uif-media" />} | |
| <a className="uif-media-save" href={m.media.url} download={m.media.name || (m.media.kind === 'video' ? 'video.mp4' : 'image.png')}>⤓ save</a> | |
| </span> | |
| )} | |
| {m.silent && field.speak && ( | |
| <span className="uif-msg-silent" title="Not read aloud: the engine did not vouch for this reply" aria-label="not read aloud"> | |
| {' '}🔇 | |
| </span> | |
| )} | |
| </div> | |
| ); | |
| if (!keep) return msg; | |
| // The keep button sits beside the reply, not inside it, so copying the reply copies only the reply. | |
| return ( | |
| <div key={m.id} className="uif-msg-row"> | |
| {msg} | |
| <button | |
| type="button" | |
| className={`uif-msg-keep ${kept[m.id] ? 'is-kept' : ''}`} | |
| title={kept[m.id] ? 'Kept in .memory' : 'Keep this reply in .memory'} | |
| aria-label="Remember this reply" | |
| disabled={kept[m.id]} | |
| onClick={() => { | |
| onRemember(m.text); | |
| setKept(k => ({ ...k, [m.id]: true })); | |
| }} | |
| > | |
| ◈ | |
| </button> | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| {onSubmit && ( | |
| <form className="uif-output-reply" onSubmit={submit}> | |
| <input | |
| value={reply} | |
| onChange={e => setReply(e.target.value)} | |
| placeholder={`Reply in ${field.title}…`} | |
| aria-label={`Message ${field.title}`} | |
| className="uif-output-reply-input" | |
| /> | |
| <button type="submit" disabled={!reply.trim() || busy} aria-label="Send"> | |
| ➤ | |
| </button> | |
| </form> | |
| )} | |
| </> | |
| ); | |
| } | |
| /** A floating, draggable output panel inside the hub page. */ | |
| export function OutputField({ field }: { field: OutputFieldData }) { | |
| const { outputs, setRect, flashes, raise, zIndexOf, sendTo, context } = useUIF(); | |
| const { position, size, setPosition, setSize, startDrag, startResize, onHandleKeyDown, isDragging } = useDragResize({ | |
| initialPosition: { x: field.rect.x, y: field.rect.y }, | |
| initialSize: { width: field.rect.width, height: field.rect.height }, | |
| minWidth: 220, | |
| minHeight: 120, | |
| onCommit: rect => setRect(field.id, rect), | |
| }); | |
| // Follow rect changes made elsewhere (call home restacks the panels). | |
| useEffect(() => { | |
| setPosition({ x: field.rect.x, y: field.rect.y }); | |
| setSize({ width: field.rect.width, height: field.rect.height }); | |
| }, [field.rect, setPosition, setSize]); | |
| const active = outputs.activeId === field.id; | |
| const max = !!field.maximized; | |
| // Esc shrinks the window that fills the screen back to where it was | |
| useEffect(() => { | |
| if (!max) return; | |
| const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && outputs.activeId === field.id) outputs.maximize(field.id, false); }; | |
| document.addEventListener('keydown', onKey); | |
| return () => document.removeEventListener('keydown', onKey); | |
| }, [max, field.id, outputs]); | |
| return ( | |
| <div | |
| className={`uif-output ${active ? 'is-active' : ''} ${isDragging ? 'is-dragging' : ''} ${max ? 'is-maximized' : ''}`} | |
| data-uif-output={field.id} | |
| style={ | |
| { | |
| left: max ? 0 : position.x, | |
| top: max ? 0 : position.y, | |
| width: max ? '100vw' : size.width, | |
| height: max ? '100vh' : size.height, | |
| zIndex: zIndexOf(field.id), | |
| '--uif-color': field.color, | |
| } as React.CSSProperties | |
| } | |
| onPointerDownCapture={() => { | |
| outputs.setActive(field.id); | |
| raise(field.id); | |
| }} | |
| > | |
| <OutputView | |
| field={field} | |
| active={active} | |
| flash={flashes[field.id] ?? 0} | |
| onHeaderPointerDown={max ? undefined : startDrag} | |
| onHeaderKeyDown={onHandleKeyDown} | |
| onMaximize={() => outputs.maximize(field.id)} | |
| onRename={title => outputs.rename(field.id, title)} | |
| onSubmit={text => sendTo(text, field.id)} | |
| onRemember={text => void context.remember(text, 'response')} | |
| onPopOut={() => outputs.popOut(field.id)} | |
| onSpeak={() => outputs.setSpeak(field.id, !field.speak)} | |
| onClose={() => outputs.close(field.id)} | |
| /> | |
| {!max && <ResizeCorners onStart={startResize} />} | |
| </div> | |
| ); | |
| } | |