607 lines
22 KiB
TypeScript
607 lines
22 KiB
TypeScript
|
import React, { useEffect, useRef, useState, useSyncExternalStore } from "react";
|
||
|
|
import {
|
||
|
|
type Item,
|
||
|
|
type Request,
|
||
|
|
type Question,
|
||
|
|
type ThreadController,
|
||
|
|
type Profiles,
|
||
|
|
itemKey,
|
||
|
|
terminal,
|
||
|
|
} from "./protocol.js";
|
||
|
|
import { LocalInput, LocalTextArea, LocalSelect, Markdown } from "@quixos/camino-react/ui";
|
||
|
|
import { draftKey } from "./http.js";
|
||
|
|
|
||
|
|
const labels: Record<string, string> = {
|
||
|
|
queued: "Queued",
|
||
|
|
blocked: "Waiting to start",
|
||
|
|
running: "Working",
|
||
|
|
waiting_input: "Needs your answer",
|
||
|
|
recovering: "Checking execution status",
|
||
|
|
recording: "Recording result",
|
||
|
|
pending_graph: "Awaiting graph recording",
|
||
|
|
awaiting_graph: "Awaiting graph recording",
|
||
|
|
completed: "Completed",
|
||
|
|
failed: "Failed",
|
||
|
|
cancelled: "Cancelled",
|
||
|
|
uncertain: "Outcome uncertain",
|
||
|
|
parked: "Needs your answer",
|
||
|
|
};
|
||
|
|
function ResultValue({ value }: { value: unknown }) {
|
||
|
|
if (Array.isArray(value))
|
||
|
|
return (
|
||
|
|
<ol>
|
||
|
|
{value.map((entry, index) => (
|
||
|
|
<li key={index}>
|
||
|
|
<ResultValue value={entry} />
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ol>
|
||
|
|
);
|
||
|
|
if (value && typeof value === "object")
|
||
|
|
return (
|
||
|
|
<dl>
|
||
|
|
{Object.entries(value).map(([key, entry]) => (
|
||
|
|
<React.Fragment key={key}>
|
||
|
|
<dt>{key}</dt>
|
||
|
|
<dd>
|
||
|
|
<ResultValue value={entry} />
|
||
|
|
</dd>
|
||
|
|
</React.Fragment>
|
||
|
|
))}
|
||
|
|
</dl>
|
||
|
|
);
|
||
|
|
return <span>{value === null ? "null" : String(value)}</span>;
|
||
|
|
}
|
||
|
|
export function StructuredResult({ value }: { value: string }) {
|
||
|
|
let parsed: unknown;
|
||
|
|
try {
|
||
|
|
parsed = JSON.parse(value);
|
||
|
|
} catch {
|
||
|
|
return <pre>{value}</pre>;
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div className="agent-result" aria-label="Structured result">
|
||
|
|
<ResultValue value={parsed} />
|
||
|
|
<details>
|
||
|
|
<summary>Raw JSON</summary>
|
||
|
|
<pre>{value}</pre>
|
||
|
|
<button onClick={() => void navigator.clipboard.writeText(value)}>Copy JSON</button>
|
||
|
|
</details>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
function QuestionForm({
|
||
|
|
question,
|
||
|
|
request,
|
||
|
|
controller,
|
||
|
|
}: {
|
||
|
|
question: Question;
|
||
|
|
request: Request;
|
||
|
|
controller: ThreadController;
|
||
|
|
}) {
|
||
|
|
const [answer, setAnswer] = useState(""),
|
||
|
|
[busy, setBusy] = useState(false),
|
||
|
|
[error, setError] = useState("");
|
||
|
|
let options: string[] = [];
|
||
|
|
try {
|
||
|
|
options = JSON.parse(question.data.options);
|
||
|
|
} catch {}
|
||
|
|
const open =
|
||
|
|
question.data.status === "open" &&
|
||
|
|
!terminal.has(request.progress.status) &&
|
||
|
|
!request.progress.cancelRequested &&
|
||
|
|
Date.parse(question.data.expiresAt) > Date.now();
|
||
|
|
return (
|
||
|
|
<form
|
||
|
|
className="agent-question"
|
||
|
|
onSubmit={(event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
if (!open || !answer.trim() || busy) return;
|
||
|
|
setBusy(true);
|
||
|
|
setError("");
|
||
|
|
void controller
|
||
|
|
.control({
|
||
|
|
kind: "answer",
|
||
|
|
question: question._camino.ref.object,
|
||
|
|
attempt: question.data.attempt,
|
||
|
|
generation: question.data.generation,
|
||
|
|
answer,
|
||
|
|
})
|
||
|
|
.catch((error) => setError(String(error)))
|
||
|
|
.finally(() => setBusy(false));
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<fieldset disabled={!open || busy}>
|
||
|
|
<legend>{question.data.title}</legend>
|
||
|
|
{options.map((option) => (
|
||
|
|
<label key={option}>
|
||
|
|
<LocalInput
|
||
|
|
type="radio"
|
||
|
|
name={question._camino.ref.object}
|
||
|
|
value={option}
|
||
|
|
checked={answer === option}
|
||
|
|
onChange={() => setAnswer(option)}
|
||
|
|
/>
|
||
|
|
{option}
|
||
|
|
</label>
|
||
|
|
))}
|
||
|
|
<label>
|
||
|
|
Your answer
|
||
|
|
<LocalInput aria-label="Your answer" value={answer} onChange={(event) => setAnswer(event.target.value)} />
|
||
|
|
</label>
|
||
|
|
<button disabled={!answer.trim()}>{busy ? "Sending answer…" : "Answer"}</button>
|
||
|
|
</fieldset>
|
||
|
|
{!open && (
|
||
|
|
<p>
|
||
|
|
{question.data.answer
|
||
|
|
? `Answered: ${question.data.answer}`
|
||
|
|
: question.data.status === "open"
|
||
|
|
? "This question is no longer accepting answers."
|
||
|
|
: question.data.status}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
{error && <p role="alert">{error}</p>}
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
function Activity({ item }: { item: Item }) {
|
||
|
|
let value: any;
|
||
|
|
try {
|
||
|
|
value = JSON.parse(item.data.activity ?? "null");
|
||
|
|
} catch {}
|
||
|
|
const title = value?.command ?? value?.label ?? item.data.text ?? "Activity";
|
||
|
|
return (
|
||
|
|
<details className="agent-activity-card">
|
||
|
|
<summary>{String(title).slice(0, 300)}</summary>
|
||
|
|
<pre>{value?.aggregatedOutput ?? value?.output ?? value?.detail ?? item.data.text}</pre>
|
||
|
|
{value?.exitCode !== undefined && <p>Exit code: {value.exitCode}</p>}
|
||
|
|
</details>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
function RequestCard({
|
||
|
|
request,
|
||
|
|
controller,
|
||
|
|
inspection,
|
||
|
|
}: {
|
||
|
|
request: Request;
|
||
|
|
controller: ThreadController;
|
||
|
|
inspection: boolean;
|
||
|
|
}) {
|
||
|
|
const [busy, setBusy] = useState(false),
|
||
|
|
[error, setError] = useState(""),
|
||
|
|
[details, setDetails] = useState<unknown>();
|
||
|
|
const p = request.progress,
|
||
|
|
cancel = () => {
|
||
|
|
setBusy(true);
|
||
|
|
setError("");
|
||
|
|
const action =
|
||
|
|
request.pendingGraph && request.repair
|
||
|
|
? import("./http.js").then(({ api }) =>
|
||
|
|
api("/repair-control", {
|
||
|
|
operationId: crypto.randomUUID(),
|
||
|
|
repair: request.repair,
|
||
|
|
attempt: p.attempt,
|
||
|
|
generation: p.generation,
|
||
|
|
kind: "cancel",
|
||
|
|
}),
|
||
|
|
)
|
||
|
|
: controller.control({ kind: "cancel", request: request._camino.ref.object });
|
||
|
|
void action.catch((error) => setError(String(error))).finally(() => setBusy(false));
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<footer className={`agent-request-card agent-request-${p.status}`} data-request={request._camino.ref.object}>
|
||
|
|
<div>
|
||
|
|
{(inspection || p.status !== "completed") && <strong>{labels[p.status] ?? p.status}</strong>}
|
||
|
|
{request.pendingGraph && <span> · Awaiting graph recording</span>}
|
||
|
|
{p.cancelRequested && !terminal.has(p.status) && <span> · Stop requested</span>}
|
||
|
|
{!terminal.has(p.status) && (
|
||
|
|
<button disabled={busy || p.cancelRequested || (request.pendingGraph && !p.attempt)} onClick={cancel}>
|
||
|
|
Stop request
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{!request.pendingGraph && (inspection || p.status !== "completed") && (
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
void controller
|
||
|
|
.details(request._camino.ref.object)
|
||
|
|
.then(setDetails)
|
||
|
|
.catch((error) => setError(String(error)));
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Request details
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{p.reason && <p>{p.reason}</p>}
|
||
|
|
{p.status === "uncertain" && <p>Execution may have occurred. Check activity before starting another request.</p>}
|
||
|
|
{p.status === "completed" && request.admission?.responseKind === "json" && p.result && (
|
||
|
|
<StructuredResult value={p.result} />
|
||
|
|
)}
|
||
|
|
{p.status === "completed" && request.admission?.responseKind === "unit" && <p>Actions completed.</p>}
|
||
|
|
{["failed", "cancelled", "uncertain"].includes(p.status) && request.admission?.text && (
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
setBusy(true);
|
||
|
|
void controller
|
||
|
|
.submit(request.admission!.text!, { retryOf: request._camino.ref.object })
|
||
|
|
.catch((error) => setError(String(error)))
|
||
|
|
.finally(() => setBusy(false));
|
||
|
|
}}
|
||
|
|
disabled={busy}
|
||
|
|
>
|
||
|
|
Try again with current settings
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{p.status === "failed" && p.rawOutput && (
|
||
|
|
<details>
|
||
|
|
<summary>Returned output</summary>
|
||
|
|
<pre>{p.rawOutput}</pre>
|
||
|
|
</details>
|
||
|
|
)}
|
||
|
|
{details !== undefined && (
|
||
|
|
<details open>
|
||
|
|
<summary>Captured request and execution</summary>
|
||
|
|
<pre>{JSON.stringify(details, null, 2)}</pre>
|
||
|
|
</details>
|
||
|
|
)}
|
||
|
|
{error && <p role="alert">{error}</p>}
|
||
|
|
</footer>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
export function ThreadView({
|
||
|
|
controller,
|
||
|
|
thread,
|
||
|
|
profiles = {},
|
||
|
|
workspace = false,
|
||
|
|
defaultProfile = "balanced",
|
||
|
|
allowRepair = false,
|
||
|
|
renderWidget,
|
||
|
|
renderItem,
|
||
|
|
}: {
|
||
|
|
controller: ThreadController;
|
||
|
|
thread: string;
|
||
|
|
profiles?: Profiles;
|
||
|
|
workspace?: boolean;
|
||
|
|
defaultProfile?: string;
|
||
|
|
allowRepair?: boolean;
|
||
|
|
renderWidget?(item: Item): React.ReactNode;
|
||
|
|
/** Return undefined for normal rendering; null hides an item. */
|
||
|
|
renderItem?(item: Item, request: Request): React.ReactNode | undefined;
|
||
|
|
}) {
|
||
|
|
const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot),
|
||
|
|
[draft, setDraft] = useState(() => sessionStorage.getItem(draftKey(thread)) ?? ""),
|
||
|
|
[busy, setBusy] = useState(false),
|
||
|
|
[error, setError] = useState(""),
|
||
|
|
[profile, setProfile] = useState(() => sessionStorage.getItem(`${draftKey(thread)}:profile`) ?? ""),
|
||
|
|
[response, setResponse] = useState(""),
|
||
|
|
[repair, setRepair] = useState(false),
|
||
|
|
[latest, setLatest] = useState(true),
|
||
|
|
[now, setNow] = useState(Date.now()),
|
||
|
|
scroll = useRef<HTMLDivElement>(null),
|
||
|
|
previousSize = useRef(0);
|
||
|
|
useEffect(() => {
|
||
|
|
const timer = setInterval(() => setNow(Date.now()), 1000);
|
||
|
|
return () => clearInterval(timer);
|
||
|
|
}, []);
|
||
|
|
useEffect(() => {
|
||
|
|
sessionStorage.setItem(draftKey(thread), draft);
|
||
|
|
}, [thread, draft]);
|
||
|
|
useEffect(() => {
|
||
|
|
if (latest && scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight;
|
||
|
|
}, [state.items, latest]);
|
||
|
|
const active =
|
||
|
|
(state.thread?.active &&
|
||
|
|
state.requests.find(
|
||
|
|
(request) =>
|
||
|
|
request._camino.ref.object === state.thread!.active!._camino.ref.object &&
|
||
|
|
!terminal.has(request.progress.status),
|
||
|
|
)) ??
|
||
|
|
state.requests.find((request) =>
|
||
|
|
["running", "waiting_input", "stopping", "parked"].includes(request.progress.status),
|
||
|
|
),
|
||
|
|
pending = state.requests.filter((request) => !terminal.has(request.progress.status)),
|
||
|
|
archived = state.thread?.data.archived;
|
||
|
|
const run = async (steer = false) => {
|
||
|
|
if (!draft.trim() || busy) return;
|
||
|
|
setBusy(true);
|
||
|
|
setError("");
|
||
|
|
const text = draft;
|
||
|
|
try {
|
||
|
|
if (steer && active)
|
||
|
|
await controller.control({
|
||
|
|
kind: "steer",
|
||
|
|
request: active._camino.ref.object,
|
||
|
|
attempt: active.progress.attempt,
|
||
|
|
generation: active.progress.generation,
|
||
|
|
text,
|
||
|
|
});
|
||
|
|
else
|
||
|
|
await controller.submit(text, {
|
||
|
|
...(profile ? { profile } : {}),
|
||
|
|
...(response ? { response: { kind: response } } : {}),
|
||
|
|
repair: state.maintenance && repair,
|
||
|
|
});
|
||
|
|
setDraft((current) => (current === text ? "" : current));
|
||
|
|
} catch (error) {
|
||
|
|
setError(String(error));
|
||
|
|
} finally {
|
||
|
|
setBusy(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const selected = profile || defaultProfile;
|
||
|
|
const route = profiles[selected];
|
||
|
|
const standard = route?.standardProfile ?? selected;
|
||
|
|
const changeProfile = async (next: string) => {
|
||
|
|
setProfile(next);
|
||
|
|
sessionStorage.setItem(`${draftKey(thread)}:profile`, next);
|
||
|
|
if (active?.progress.status !== "running" || state.maintenance) return;
|
||
|
|
setBusy(true);
|
||
|
|
setError("");
|
||
|
|
try {
|
||
|
|
await controller.control({
|
||
|
|
kind: "steer",
|
||
|
|
request: active._camino.ref.object,
|
||
|
|
attempt: active.progress.attempt,
|
||
|
|
generation: active.progress.generation,
|
||
|
|
text: "",
|
||
|
|
profile: next,
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
setError(String(error));
|
||
|
|
} finally {
|
||
|
|
setBusy(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const grouped = new Map<string, { request: Request; items: Item[] }>();
|
||
|
|
for (const item of state.items) {
|
||
|
|
const key = item.request._camino.ref.object,
|
||
|
|
group = grouped.get(key) ?? { request: item.request, items: [] };
|
||
|
|
group.items.push(item);
|
||
|
|
group.request = item.request;
|
||
|
|
grouped.set(key, group);
|
||
|
|
}
|
||
|
|
for (const request of pending)
|
||
|
|
if (!grouped.has(request._camino.ref.object)) grouped.set(request._camino.ref.object, { request, items: [] });
|
||
|
|
return (
|
||
|
|
<section className="agent-thread" aria-label="Agent conversation">
|
||
|
|
<div className="agent-thread-status" role="status">
|
||
|
|
{state.loading
|
||
|
|
? "Loading thread…"
|
||
|
|
: state.maintenance
|
||
|
|
? "Workspace graph unavailable. Known activity remains visible."
|
||
|
|
: state.connected
|
||
|
|
? "Connected"
|
||
|
|
: "Reconnecting…"}
|
||
|
|
{active?.progress.startedAt && (
|
||
|
|
<span> · Working for {Math.max(0, Math.floor((now - Date.parse(active.progress.startedAt)) / 1000))}s</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className="agent-thread-history"
|
||
|
|
ref={scroll}
|
||
|
|
onScroll={() => {
|
||
|
|
const element = scroll.current!;
|
||
|
|
setLatest(element.scrollHeight - element.scrollTop - element.clientHeight < 80);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{state.pageInfo?.hasNextPage && (
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
const element = scroll.current!,
|
||
|
|
height = element.scrollHeight;
|
||
|
|
previousSize.current = height;
|
||
|
|
setLatest(false);
|
||
|
|
void controller
|
||
|
|
.refresh(true)
|
||
|
|
.then(() =>
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
element.scrollTop += element.scrollHeight - previousSize.current;
|
||
|
|
}),
|
||
|
|
)
|
||
|
|
.catch((error) => setError(String(error)));
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Load earlier messages
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{grouped.size === 0 && !state.loading && (
|
||
|
|
<div className="agent-empty">
|
||
|
|
<h2>A new conversation</h2>
|
||
|
|
<p>Send a message or a task to this Agent.</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{[...grouped.values()].map(({ request, items }) => (
|
||
|
|
<article className="agent-request" key={request._camino.ref.object}>
|
||
|
|
<div className="agent-request-source">
|
||
|
|
{request.admission?.sourceLabel ?? "Agent request"} ·{" "}
|
||
|
|
{request.admission?.createdAt && (
|
||
|
|
<time dateTime={request.admission.createdAt}>
|
||
|
|
{new Date(request.admission.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
|
||
|
|
</time>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{items.map((item) => {
|
||
|
|
const custom = renderItem?.(item, request);
|
||
|
|
return (
|
||
|
|
<React.Fragment key={itemKey(item)}>
|
||
|
|
{custom !== undefined ? (
|
||
|
|
custom
|
||
|
|
) : item.data.kind === "steering" && item.data.activity ? (
|
||
|
|
<aside className="agent-routing-change" role="status">
|
||
|
|
Model profile · {JSON.parse(item.data.activity).profile} ·{" "}
|
||
|
|
{item.data.control?.status === "accepted"
|
||
|
|
? "Applied to subsequent inference"
|
||
|
|
: item.data.control?.status === "rejected"
|
||
|
|
? "Change rejected by Codex"
|
||
|
|
: item.data.control?.status === "uncertain"
|
||
|
|
? "Change outcome uncertain"
|
||
|
|
: "Changing…"}
|
||
|
|
{item.data.control?.reason && <p>{item.data.control.reason}</p>}
|
||
|
|
{item.data.text && <p>{item.data.text}</p>}
|
||
|
|
</aside>
|
||
|
|
) : item.data.kind === "activity" ? (
|
||
|
|
<Activity item={item} />
|
||
|
|
) : item.data.kind === "widget" ? (
|
||
|
|
<div className="agent-widget">
|
||
|
|
{renderWidget ? (
|
||
|
|
renderWidget(item)
|
||
|
|
) : (
|
||
|
|
<p>
|
||
|
|
Widget unavailable in this view.{" "}
|
||
|
|
<a href={`/entity/${encodeURIComponent(item.subject?._camino.ref.object ?? "")}`}>
|
||
|
|
Open object
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
) : item.data.kind === "status" ? (
|
||
|
|
<aside className="agent-status-card">
|
||
|
|
{item.data.text}
|
||
|
|
<Activity item={item} />
|
||
|
|
</aside>
|
||
|
|
) : item.data.phase === "commentary" ? (
|
||
|
|
<details className="agent-commentary">
|
||
|
|
<summary>Agent commentary</summary>
|
||
|
|
<Markdown text={item.data.text} />
|
||
|
|
</details>
|
||
|
|
) : request.admission?.responseKind === "json" && item.data.kind === "assistant" ? null : (
|
||
|
|
<div className={`agent-message agent-message-${item.data.kind}`}>
|
||
|
|
{item.data.kind === "assistant" ? <Markdown text={item.data.text} /> : item.data.text}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
{(request.questions?.entries ?? []).map(({ node }) => (
|
||
|
|
<QuestionForm key={node._camino.ref.object} question={node} request={request} controller={controller} />
|
||
|
|
))}
|
||
|
|
<RequestCard request={request} controller={controller} inspection={!workspace} />
|
||
|
|
</article>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
{!latest && (
|
||
|
|
<button
|
||
|
|
className="agent-jump"
|
||
|
|
onClick={() => {
|
||
|
|
setLatest(true);
|
||
|
|
if (scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight;
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Jump to latest
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
<form
|
||
|
|
className="agent-thread-composer"
|
||
|
|
onSubmit={(event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
void run();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{state.maintenance && allowRepair && (
|
||
|
|
<label>
|
||
|
|
<LocalInput type="checkbox" checked={repair} onChange={(event) => setRepair(event.target.checked)} />
|
||
|
|
Source repair in the Workspace thread
|
||
|
|
</label>
|
||
|
|
)}
|
||
|
|
<label className="agent-compose-label">
|
||
|
|
Message
|
||
|
|
<LocalTextArea
|
||
|
|
aria-label="Message"
|
||
|
|
rows={3}
|
||
|
|
value={draft}
|
||
|
|
disabled={archived || busy}
|
||
|
|
onChange={(event) => setDraft(event.target.value)}
|
||
|
|
onKeyDown={(event) => {
|
||
|
|
if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
|
||
|
|
event.preventDefault();
|
||
|
|
void run();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
<div className="agent-compose-actions">
|
||
|
|
{workspace && Object.keys(profiles).length > 0 && (
|
||
|
|
<div className="agent-model-controls">
|
||
|
|
<label>
|
||
|
|
Model
|
||
|
|
<LocalSelect
|
||
|
|
aria-label="Model"
|
||
|
|
disabled={busy}
|
||
|
|
value={standard}
|
||
|
|
onChange={(event) => {
|
||
|
|
const name = event.target.value;
|
||
|
|
void changeProfile(
|
||
|
|
route?.standardProfile && profiles[name]?.fastProfile ? profiles[name].fastProfile! : name,
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{Object.entries(profiles)
|
||
|
|
.filter(([, p]) => !p.standardProfile)
|
||
|
|
.map(([name, p]) => (
|
||
|
|
<option key={name} value={name} disabled={p.available === false}>
|
||
|
|
{p.description ?? p.model ?? name}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</LocalSelect>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<LocalInput
|
||
|
|
type="checkbox"
|
||
|
|
aria-label="Fast mode"
|
||
|
|
checked={!!route?.standardProfile}
|
||
|
|
disabled={busy || !(route?.fastProfile || route?.standardProfile)}
|
||
|
|
onChange={(event) =>
|
||
|
|
void changeProfile(event.target.checked ? route!.fastProfile! : route!.standardProfile!)
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
Fast
|
||
|
|
</label>
|
||
|
|
{active?.progress.status === "running" && <small>Changes apply between inference steps.</small>}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<details>
|
||
|
|
<summary>Next request options</summary>
|
||
|
|
<label>
|
||
|
|
Profile
|
||
|
|
<LocalSelect aria-label="Profile" value={profile} onChange={(event) => setProfile(event.target.value)}>
|
||
|
|
<option value="">Agent default</option>
|
||
|
|
{Object.keys(profiles).map((value) => (
|
||
|
|
<option key={value} disabled={profiles[value].available === false}>
|
||
|
|
{value}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</LocalSelect>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
Response
|
||
|
|
<LocalSelect aria-label="Response" value={response} onChange={(event) => setResponse(event.target.value)}>
|
||
|
|
<option value="">Agent default</option>
|
||
|
|
<option value="text">Text follow-up</option>
|
||
|
|
<option value="unit">Actions only</option>
|
||
|
|
</LocalSelect>
|
||
|
|
</label>
|
||
|
|
</details>
|
||
|
|
<span>{pending.length ? `${pending.length} outstanding request${pending.length === 1 ? "" : "s"}` : ""}</span>
|
||
|
|
{active?.progress.status === "running" && !state.maintenance && (
|
||
|
|
<button type="button" disabled={!draft.trim() || busy} onClick={() => void run(true)}>
|
||
|
|
Steer current
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
<button disabled={!draft.trim() || busy || archived || (state.maintenance && !(allowRepair && repair))}>
|
||
|
|
{busy ? "Sending…" : state.maintenance ? "Submit source repair" : pending.length ? "Send to queue" : "Send"}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{archived && <p>This thread is archived. Reopen it to send a message.</p>}
|
||
|
|
{(error || state.error) && (
|
||
|
|
<p role="alert">
|
||
|
|
{error || state.error}{" "}
|
||
|
|
<button type="button" onClick={() => void run()}>
|
||
|
|
Retry retained submission
|
||
|
|
</button>
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|