dictation mechanics everywhere: graph view + new-session view
Consistency ruling (owner, 2026-10-01): the finish-first send and the run-end focus are properties of the COMPOSER, not of one page. - home (graph view, raw textarea): topicRef mirror; start() finishes dictation first (before the setup/key guards, so an intercepted draft is the complete one) then reads the mirror; the start square stays live while a run holds deferred speech; run end focuses the topic input. - new-session: the shell owns the dictation instance — handleSend wraps the parent's send with finish-first, the composer stays sendable during a run, and run end focuses it via the Composer's inputRef. The parent's send reads a textRef mirror (applyText at every write): the flush lands via setState after the shell's await, and the parent's closure must not read a stale draft.
This commit is contained in:
+47
-7
@@ -1,12 +1,12 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { CornerDownLeftIcon } from "lucide-react";
|
import { CornerDownLeftIcon } from "lucide-react";
|
||||||
import { GraphView } from "@/components/graph-view";
|
import { GraphView } from "@/components/graph-view";
|
||||||
import { SetupDialog } from "@/components/setup-dialog";
|
import { SetupDialog } from "@/components/setup-dialog";
|
||||||
import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
|
import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
|
||||||
import { DictationBar, useDictation } from "@/components/dictation";
|
import { DictationBar, joinDictation, useDictation } from "@/components/dictation";
|
||||||
import { SidebarToggle } from "@/components/sidebar";
|
import { SidebarToggle } from "@/components/sidebar";
|
||||||
import { StatsBar } from "@/components/stats-bar";
|
import { StatsBar } from "@/components/stats-bar";
|
||||||
import type { TurnUsage } from "@/src/core";
|
import type { TurnUsage } from "@/src/core";
|
||||||
@@ -20,6 +20,11 @@ import type { TurnUsage } from "@/src/core";
|
|||||||
export function Home({ initialConfigured }: { initialConfigured: boolean }) {
|
export function Home({ initialConfigured }: { initialConfigured: boolean }) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [topic, setTopic] = useState("");
|
const [topic, setTopic] = useState("");
|
||||||
|
/* The topic MIRROR ("nothing gets lost" round, 2026-10-01 — same
|
||||||
|
* mechanics as the chat composer, owner's consistency ruling): a
|
||||||
|
* dictation flush lands via setState, invisible to a closure that
|
||||||
|
* waited through `await finish()`. Kept current at every write. */
|
||||||
|
const topicRef = useRef("");
|
||||||
// First-run gate (model-slots wave, owner 2026-09-20): chats cannot
|
// First-run gate (model-slots wave, owner 2026-09-20): chats cannot
|
||||||
// start until the user has picked all three slots — no defaults for
|
// start until the user has picked all three slots — no defaults for
|
||||||
// 33 providers. The dock shows the CTA while unconfigured; submitting
|
// 33 providers. The dock shows the CTA while unconfigured; submitting
|
||||||
@@ -37,12 +42,43 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
|
|||||||
// Voice dictation (STT wave, 2026-09-17): finals append at the end of the
|
// Voice dictation (STT wave, 2026-09-17): finals append at the end of the
|
||||||
// topic draft; the strip lives in the stats bar's middle slot.
|
// topic draft; the strip lives in the stats bar's middle slot.
|
||||||
const dictation = useDictation({
|
const dictation = useDictation({
|
||||||
append: (t) => setTopic((v) => (v ? v.replace(/\s+$/, "") + " " + t : t)),
|
// Ref-first: the join reads the mirror so the send resuming after
|
||||||
|
// `await finish()` sees the dictated tail.
|
||||||
|
append: (t) => {
|
||||||
|
const v = joinDictation(topicRef.current, t);
|
||||||
|
topicRef.current = v;
|
||||||
|
setTopic(v);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const [busy, setBusy] = useState(false);
|
const [busy, setBusy] = useState(false);
|
||||||
|
/* Run end focuses the topic input (owner, 2026-10-01): the hands are on
|
||||||
|
* the keyboard from the stop. Falling edge only; this surface's only
|
||||||
|
* dictation target IS this textarea, so no case-split is needed. */
|
||||||
|
const topicInputRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
const dictationWasActiveRef = useRef(false);
|
||||||
|
useEffect(() => {
|
||||||
|
if (dictation.active) {
|
||||||
|
dictationWasActiveRef.current = true;
|
||||||
|
} else if (dictationWasActiveRef.current) {
|
||||||
|
dictationWasActiveRef.current = false;
|
||||||
|
topicInputRef.current?.focus();
|
||||||
|
}
|
||||||
|
}, [dictation.active]);
|
||||||
|
|
||||||
const start = async (force = false) => {
|
/* FINISH DICTATION FIRST (owner, 2026-10-01): Enter may arrive while a
|
||||||
const t = topic.trim();
|
* run is live with the topic still deferred in the run's buffer — stop
|
||||||
|
* the run, let the last finals land, THEN read the REF mirror (not the
|
||||||
|
* state closure) and run. Applies before the setup/key guards too, so
|
||||||
|
* an intercepted draft is the complete one. */
|
||||||
|
const start = (force = false) => {
|
||||||
|
if (!dictation.active) {
|
||||||
|
void begin(force);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
void dictation.finish().then(() => begin(force));
|
||||||
|
};
|
||||||
|
const begin = async (force = false) => {
|
||||||
|
const t = topicRef.current.trim();
|
||||||
if (!t || busy) return;
|
if (!t || busy) return;
|
||||||
// Unconfigured: the send INTERCEPTS into the setup flow (the draft
|
// Unconfigured: the send INTERCEPTS into the setup flow (the draft
|
||||||
// stays in the textarea; Save completes and this re-runs). `force`
|
// stays in the textarea; Save completes and this re-runs). `force`
|
||||||
@@ -141,8 +177,12 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<textarea
|
<textarea
|
||||||
|
ref={topicInputRef}
|
||||||
value={topic}
|
value={topic}
|
||||||
onChange={(e) => setTopic(e.target.value)}
|
onChange={(e) => {
|
||||||
|
topicRef.current = e.target.value;
|
||||||
|
setTopic(e.target.value);
|
||||||
|
}}
|
||||||
onKeyDown={(e) => {
|
onKeyDown={(e) => {
|
||||||
// Esc ends dictation (the dictate decisions: click-again or
|
// Esc ends dictation (the dictate decisions: click-again or
|
||||||
// Esc) — stopPropagation claims it (keyboard wave A) so
|
// Esc) — stopPropagation claims it (keyboard wave A) so
|
||||||
@@ -168,7 +208,7 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
aria-label="Start session"
|
aria-label="Start session"
|
||||||
disabled={!topic.trim() || busy}
|
disabled={(!topic.trim() && !dictation.active) || busy}
|
||||||
className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-primary text-primary-foreground transition-colors hover:opacity-90 disabled:opacity-40"
|
className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-primary text-primary-foreground transition-colors hover:opacity-90 disabled:opacity-40"
|
||||||
>
|
>
|
||||||
<CornerDownLeftIcon className="size-5" />
|
<CornerDownLeftIcon className="size-5" />
|
||||||
|
|||||||
+52
-10
@@ -1,10 +1,10 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useCallback, useState, type ReactNode } from "react";
|
import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { Conversation, ConversationContent, ConversationEmptyState } from "@/components/ai-elements/conversation";
|
import { Conversation, ConversationContent, ConversationEmptyState } from "@/components/ai-elements/conversation";
|
||||||
import { Composer } from "@/components/composer";
|
import { Composer } from "@/components/composer";
|
||||||
import { DictationBar, useDictation } from "@/components/dictation";
|
import { DictationBar, joinDictation, useDictation } from "@/components/dictation";
|
||||||
import { TopBar } from "@/components/top-bar";
|
import { TopBar } from "@/components/top-bar";
|
||||||
import { SetupDialog } from "@/components/setup-dialog";
|
import { SetupDialog } from "@/components/setup-dialog";
|
||||||
import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
|
import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
|
||||||
@@ -52,6 +52,9 @@ export async function startDraftSession(
|
|||||||
|
|
||||||
/** The pure shell (no router) — the render-test seam: the draft view's
|
/** The pure shell (no router) — the render-test seam: the draft view's
|
||||||
* visible surface, assembled from the same pieces a fresh chat shows. */
|
* visible surface, assembled from the same pieces a fresh chat shows. */
|
||||||
|
/* FINISH-FIRST SEND + RUN-END FOCUS live in the shell (it owns the
|
||||||
|
* dictation instance); the truth of the text stays in the parent, whose
|
||||||
|
* send reads a REF mirror — see NewSession below. */
|
||||||
export function DraftShell({
|
export function DraftShell({
|
||||||
busy,
|
busy,
|
||||||
text,
|
text,
|
||||||
@@ -68,12 +71,40 @@ export function DraftShell({
|
|||||||
* NewSession, which owns the configured state and the SetupDialog. */
|
* NewSession, which owns the configured state and the SetupDialog. */
|
||||||
setupCta?: ReactNode;
|
setupCta?: ReactNode;
|
||||||
}) {
|
}) {
|
||||||
const canSend = text.trim().length > 0;
|
|
||||||
// Voice dictation (STT wave, 2026-09-17): finals append at the end of the
|
// Voice dictation (STT wave, 2026-09-17): finals append at the end of the
|
||||||
// draft text; the strip lives in the stats bar's middle slot.
|
// draft text (via the parent's onChange — the truth lives there); the
|
||||||
|
// strip lives in the stats bar's middle slot.
|
||||||
const dictation = useDictation({
|
const dictation = useDictation({
|
||||||
append: (t) => onChange(text ? text.replace(/\s+$/, "") + " " + t : t),
|
append: (t) => onChange(joinDictation(text, t)),
|
||||||
});
|
});
|
||||||
|
// A LIVE dictation keeps the composer sendable ("nothing gets lost"
|
||||||
|
// round, owner 2026-10-01): the spoken text is deferred in the run's
|
||||||
|
// buffer — Enter must reach the finish-first send, not be gated out by
|
||||||
|
// an empty textarea. Nothing said → the send no-ops.
|
||||||
|
const canSend = text.trim().length > 0 || dictation.active;
|
||||||
|
/* FINISH DICTATION FIRST (owner, 2026-10-01): stop the run, let the
|
||||||
|
* last finals land through onChange, THEN call the parent's send —
|
||||||
|
* which reads its REF mirror, so the post-await timing of React's
|
||||||
|
* re-render cannot eat the dictated tail. */
|
||||||
|
const handleSend = () => {
|
||||||
|
if (dictation.active) {
|
||||||
|
void dictation.finish().then(onSend);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onSend();
|
||||||
|
};
|
||||||
|
/* Run end focuses the composer (owner, 2026-10-01): the hands are on
|
||||||
|
* the keyboard from the stop — falling edge of `active` only. */
|
||||||
|
const composerInputRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
const dictationWasActiveRef = useRef(false);
|
||||||
|
useEffect(() => {
|
||||||
|
if (dictation.active) {
|
||||||
|
dictationWasActiveRef.current = true;
|
||||||
|
} else if (dictationWasActiveRef.current) {
|
||||||
|
dictationWasActiveRef.current = false;
|
||||||
|
composerInputRef.current?.focus();
|
||||||
|
}
|
||||||
|
}, [dictation.active]);
|
||||||
return (
|
return (
|
||||||
<div className="flex h-dvh">
|
<div className="flex h-dvh">
|
||||||
<div className="flex min-w-0 flex-1 flex-col">
|
<div className="flex min-w-0 flex-1 flex-col">
|
||||||
@@ -106,9 +137,10 @@ export function DraftShell({
|
|||||||
busy={busy}
|
busy={busy}
|
||||||
value={text}
|
value={text}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
onSend={onSend}
|
onSend={handleSend}
|
||||||
onStop={() => {}}
|
onStop={() => {}}
|
||||||
canSend={canSend}
|
canSend={canSend}
|
||||||
|
inputRef={composerInputRef}
|
||||||
autoFocus
|
autoFocus
|
||||||
onEscape={dictation.active ? dictation.cancel : undefined}
|
onEscape={dictation.active ? dictation.cancel : undefined}
|
||||||
// The opening question, same as the graph view's new-session
|
// The opening question, same as the graph view's new-session
|
||||||
@@ -134,6 +166,15 @@ export function DraftShell({
|
|||||||
export function NewSession({ initialConfigured }: { initialConfigured: boolean }) {
|
export function NewSession({ initialConfigured }: { initialConfigured: boolean }) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [text, setText] = useState("");
|
const [text, setText] = useState("");
|
||||||
|
/* The draft MIRROR ("nothing gets lost" round, 2026-10-01): the shell's
|
||||||
|
* finish-first send calls THIS send after the dictation flush — which
|
||||||
|
* landed via setState and may not have re-rendered yet. The send reads
|
||||||
|
* the mirror; every write keeps it current. */
|
||||||
|
const textRef = useRef("");
|
||||||
|
const applyText = (v: string) => {
|
||||||
|
textRef.current = v;
|
||||||
|
setText(v);
|
||||||
|
};
|
||||||
const [busy, setBusy] = useState(false);
|
const [busy, setBusy] = useState(false);
|
||||||
|
|
||||||
// First-run gate (model-slots wave, owner 2026-09-20): the send
|
// First-run gate (model-slots wave, owner 2026-09-20): the send
|
||||||
@@ -151,7 +192,8 @@ export function NewSession({ initialConfigured }: { initialConfigured: boolean }
|
|||||||
const [setupOpen, setSetupOpen] = useState(false);
|
const [setupOpen, setSetupOpen] = useState(false);
|
||||||
|
|
||||||
const send = useCallback((force = false) => {
|
const send = useCallback((force = false) => {
|
||||||
if (!text.trim() || busy) return;
|
const draft = textRef.current.trim();
|
||||||
|
if (!draft || busy) return;
|
||||||
// `force` is the onDone path — the captured `configured` is still
|
// `force` is the onDone path — the captured `configured` is still
|
||||||
// the pre-save value; the state update hasn't landed yet.
|
// the pre-save value; the state update hasn't landed yet.
|
||||||
if (!configured && !force) {
|
if (!configured && !force) {
|
||||||
@@ -169,20 +211,20 @@ export function NewSession({ initialConfigured }: { initialConfigured: boolean }
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setBusy(true);
|
setBusy(true);
|
||||||
void startDraftSession(text, fetch)
|
void startDraftSession(draft, fetch)
|
||||||
.then((target) => {
|
.then((target) => {
|
||||||
if (target) router.push(target);
|
if (target) router.push(target);
|
||||||
else setBusy(false);
|
else setBusy(false);
|
||||||
})
|
})
|
||||||
.catch(() => setBusy(false));
|
.catch(() => setBusy(false));
|
||||||
}, [text, busy, router, configured, zeroKeys, strongKeyless]);
|
}, [busy, router, configured, zeroKeys, strongKeyless]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DraftShell
|
<DraftShell
|
||||||
busy={busy}
|
busy={busy}
|
||||||
text={text}
|
text={text}
|
||||||
onChange={setText}
|
onChange={applyText}
|
||||||
onSend={send}
|
onSend={send}
|
||||||
setupCta={
|
setupCta={
|
||||||
zeroKeys ? (
|
zeroKeys ? (
|
||||||
|
|||||||
Reference in New Issue
Block a user