[chore] Split AgentConversation into hooks and views - #5569
Conversation
dosubot
Bot
added
the
size:XXL
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughSummary by CodeRabbit
Walkthrough
ChangesAgent chat refactor
Estimated code review effort: 4 (Complex) | ~60 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
dosubot
Bot
added
Frontend
refactoring
AgentConversation.tsx: 2692 -> 679 lines, across 22 modules.
The seam that made this possible: four mutable scroll refs (stick,
armBottom, animateBottom, programmaticScroll) were written from five call
sites and read by two sets of effects. useScrollIntent owns them behind
three verbs — armGlide() on submit, armJump() on restore/adopt, follow()
for a send that leaves now — so producers never touch raw refs and the two
scroll engines can be lifted out whole.
assets/ conversationLayout, runError, messageParts, scrollGeometry
hooks/ useScrollIntent, useTranscriptScroll, useVirtuosoTranscript,
useAgentChatSession, useSessionHydration, useComposerDraft,
useComposerAttachments, useVoiceComposer, useTurnInspector,
useOnboardingChat, useFirstRunSeed
components/ MessageRow, TurnActivity, AgentTurn, AgentTranscript,
TranscriptPlaceholder, AgentComposerDock
AgentTurn is memoized and turn numbers are precomputed once per message
set — previously every settled turn re-rendered on each streamed token and
the turn lookup was an O(n^2) scan.
Split against current content so the voice-input and file-upload features
survive: useVoiceComposer is a new module for the recorder state (it has no
home in the pre-feature structure), and useComposerAttachments owns
uploadsEnabled plus bindDropTarget(isBlocked) — a predicate read at event
time, since the blocked-drop guard depends on the recorder which depends on
addFiles. Verified line-by-line against the upstream diff.
fc14b8f to
c3dc179
Compare
Railway Preview Environment
|
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (11)
web/oss/src/components/AgentChatSlice/AgentConversation.tsx (1)
417-427: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider assigning
handleSubmitReffrom an effect (or memoizinghandleSubmit).Line 427 mutates the ref during render. It happens to be safe here (consumers read it inside effects/events, which run after commit), but a render-phase side effect is fragile if a future consumer reads it during render.
useEffect(() => { handleSubmitRef.current = handleSubmit })makes the contract explicit.web/oss/src/components/AgentChatSlice/hooks/useAgentChatSession.ts (3)
202-221: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueReuse
markLiveGatehere instead of writingliveGateInteractionRefdirectly.Line 204 duplicates the only other write path (
markLiveGate, line 194); routing both through one setter keeps the "live gate" invariant in one place.
307-333: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winFull transcript scan on every commit.
This effect re-walks every message and part on each throttled commit (~20×/s while streaming).
data-committed-revisiononly ever arrives on the streaming tail, so scanning the last message (or messages after a cursor index) keeps the hot path O(1) in transcript length.
344-367: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winSwallowed control-plane failures leave no trace.
Both
killSession(line 359) andcommandSessionStream(line 366) discard errors silently, so a failed cancel — where the runner keeps running and billing — is invisible. Aconsole.warnin the catch keeps the UX unchanged while making the failure diagnosable.🛠️ Proposed change
- .catch(() => {}) + .catch((err) => console.warn("[AgentChat] killSession failed:", err)) return } - commandSessionStream({sessionId, projectId}).catch(() => {}) + commandSessionStream({sessionId, projectId}).catch((err) => + console.warn("[AgentChat] cancel command failed:", err), + )web/oss/src/components/AgentChatSlice/components/AgentComposerDock.tsx (3)
259-259: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDerive one blocked flag instead of re-deriving it per control.
composerDisabledis documented as "IDE hand-off / no model key", which is exactly whatonboardingActive ? ideHandoffActive : modelBlockedrecomputes at Lines 259 and 303-305. Two sources of truth for the same state will drift; prefer passing (and using) the single flag for input, mic and attach.Also applies to: 303-305, 327-327
250-396: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valueConsider memoizing the
prefix/header/trailingJSX slots.These element trees are rebuilt on every dock render and handed to the lazily-loaded Lexical input as props, defeating any memoization inside it.
useMemoper slot (plus a stableonSubmit/onPasteFileviauseCallback) keeps the heavy editor from re-rendering on unrelated state changes such asbusyor queue updates.As per coding guidelines, "Memoize inline arrays containing objects or JSX when passing them as props to avoid unnecessary rerenders."
Source: Coding guidelines
37-49: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueTrim the narrative comment blocks.
Several of these blocks are multi-paragraph design rationale rather than surprising-constraint notes (the layout-shift and lazy-ref ordering notes do qualify; the "Owner call" / strip-rhythm prose does not).
As per coding guidelines, "Keep in-code comments to at most one short line; use longer comments only for genuinely surprising constraints such as bugs, races, or ordering requirements."
Also applies to: 169-177, 219-224
Source: Coding guidelines
web/oss/src/components/AgentChatSlice/hooks/useComposerDraft.ts (2)
51-62: 🗄️ Data Integrity & Integration | 🔵 Trivial | 💤 Low valueUnmount capture also fires on
sessionIdchange.The effect is keyed on
sessionId, so a session switch within a mounted pane runs this cleanup with the previoussessionIdwhile reading the new editor content — persisting text under the wrong key. If panes are strictly one-per-session (as the doc comment implies) this is unreachable today; asessionIdref snapshot would make it order-independent.
17-19: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valuePrefer
RefObject<boolean>overReact.MutableRefObject.In React 19's type definitions, ref types are unified under
RefObject, makingMutableRefObjecta deprecated shorthand. UsingRefObjectalso matchesrichInputRefand removes an unimportedReact.namespace reference.♻️ Proposed change
@@ - revealPlayedRef: React.MutableRefObject<boolean> + revealPlayedRef: RefObject<boolean>web/oss/src/components/AgentChatSlice/hooks/useVoiceComposer.ts (2)
29-40: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDoc block is attached to the wrong declaration.
The send-vs-attach rationale sits above
voiceEnabled(Line 40), whose own one-liner then follows it; move it ontovoiceWillSend/startVoiceMessagewhere the decision actually lives.
46-73: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valueWrap
startVoiceMessage/dismissMicErrorinuseCallback.Both are handed down as props (
onStartAudio,onDismiss) fromAgentComposerDock; new identities each render block any memoization of the voice controls.As per coding guidelines, "Minimize React re-renders with
useMemo,useCallback, andReact.memowhere appropriate; avoid unstable inline functions and objects".Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 763bfad5-e5ff-4f7d-99b0-4081a1fe4d77
📒 Files selected for processing (22)
web/oss/src/components/AgentChatSlice/AgentConversation.tsxweb/oss/src/components/AgentChatSlice/assets/conversationLayout.tsweb/oss/src/components/AgentChatSlice/assets/messageParts.tsweb/oss/src/components/AgentChatSlice/assets/runError.tsweb/oss/src/components/AgentChatSlice/assets/scrollGeometry.tsweb/oss/src/components/AgentChatSlice/components/AgentComposerDock.tsxweb/oss/src/components/AgentChatSlice/components/AgentTranscript.tsxweb/oss/src/components/AgentChatSlice/components/AgentTurn.tsxweb/oss/src/components/AgentChatSlice/components/MessageRow.tsxweb/oss/src/components/AgentChatSlice/components/TranscriptPlaceholder.tsxweb/oss/src/components/AgentChatSlice/components/TurnActivity.tsxweb/oss/src/components/AgentChatSlice/hooks/useAgentChatSession.tsweb/oss/src/components/AgentChatSlice/hooks/useComposerAttachments.tsweb/oss/src/components/AgentChatSlice/hooks/useComposerDraft.tsweb/oss/src/components/AgentChatSlice/hooks/useFirstRunSeed.tsweb/oss/src/components/AgentChatSlice/hooks/useOnboardingChat.tsweb/oss/src/components/AgentChatSlice/hooks/useScrollIntent.tsweb/oss/src/components/AgentChatSlice/hooks/useSessionHydration.tsweb/oss/src/components/AgentChatSlice/hooks/useTranscriptScroll.tsweb/oss/src/components/AgentChatSlice/hooks/useTurnInspector.tsweb/oss/src/components/AgentChatSlice/hooks/useVirtuosoTranscript.tsxweb/oss/src/components/AgentChatSlice/hooks/useVoiceComposer.ts
| useEffect(() => { | ||
| if (!error) return | ||
| const parsed = parseAgentRunError(error) | ||
| setMessages((prev) => { | ||
| const last = prev.length > 0 ? prev[prev.length - 1] : undefined | ||
| const existing = (last?.metadata as {runError?: {message?: string}} | undefined) | ||
| ?.runError | ||
| if (last?.role === "assistant") { | ||
| if (existing?.message === parsed.message) return prev // already stamped | ||
| const next = [...prev] | ||
| next[next.length - 1] = { | ||
| ...last, | ||
| metadata: {...(last.metadata as object | undefined), runError: parsed}, | ||
| } | ||
| return next | ||
| } | ||
| // No trailing assistant turn (failed before one existed) — add a minimal carrier. | ||
| return [ | ||
| ...prev, | ||
| { | ||
| id: `run-error-${generateId()}`, | ||
| role: "assistant", | ||
| parts: [], | ||
| metadata: {runError: parsed}, | ||
| } as (typeof prev)[number], | ||
| ] | ||
| }) | ||
| }, [error, setMessages]) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🌐 Web query:
@ai-sdk/react useChat error reset on new sendMessage
💡 Result:
In the AI SDK (specifically starting from newer versions), the error state returned by the useChat hook does not automatically reset when you call sendMessage [1][2][3]. If an error occurs, it persists in the state, often requiring explicit handling to clear it so that subsequent interactions can proceed smoothly [1][2][4]. To manage this, you have a few options: 1. Use clearError: Most recent versions of the @ai-sdk/react package provide a clearError function directly from the useChat hook [3][5][6]. You can call this method before or during your submission logic to reset the error state [1][3]. const { sendMessage, error, clearError } = useChat; const handleSubmit = (e) => { e.preventDefault; if (error) clearError; // Clear the error before sending a new message sendMessage({ text: input }); }; 2. Manual State Reset: If you are on an older version that lacks clearError, or if you need custom behavior, you can use the setMessages function to manipulate the message array. A common pattern is to remove the last (failed) message if the assistant stream was interrupted before sending a new request [2][4]. 3. Error Handling Callback: You can also use the onError callback provided in the useChat options to handle side effects when an error occurs, though this does not automatically clear the state for the UI [2][4][7]. If you find that your UI remains stuck or disabled due to the error, ensure that you are checking the error state in your conditional rendering (e.g., to enable/disable input fields or show/hide retry buttons) and explicitly invoking a reset mechanism [2][4].
Citations:
- 1: useChat: add a clearError handler vercel/ai#4742
- 2: https://ai-sdk.dev/docs/ai-sdk-ui/error-handling
- 3: https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat
- 4: https://ai-sdk.dev/v5/docs/ai-sdk-ui/error-handling
- 5: https://ai-sdk.dev/v5/docs/reference/ai-sdk-ui/use-chat
- 6: https://ai-play.vercel.app/docs/reference/ai-sdk-ui/use-chat
- 7: https://ai-play.vercel.app/docs/ai-sdk-ui/error-handling
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== locate file and package info =="
git ls-files | rg '(^|/)useAgentChatSession\.ts$|(^|/)package\.json$|pnpm-lock\.yaml$|package-lock\.json$|yarn\.lock$' || true
echo
echo "== useAgentChatSession outline/sections =="
if [ -f web/oss/src/components/AgentChatSlice/hooks/useAgentChatSession.ts ]; then
wc -l web/oss/src/components/AgentChatSlice/hooks/useAgentChatSession.ts
sed -n '1,340p' web/oss/src/components/AgentChatSlice/hooks/useAgentChatSession.ts | cat -n
fi
echo
echo "== dependency declarations for `@ai-sdk/react` ai package =="
rg -n '"(`@ai-sdk/react`|ai)"|(`@ai-sdk/react`|ai)\@' package.json web/package.json pnpm-lock.yaml web/pnpm-lock.yaml . 2>/dev/null | head -120Repository: Agenta-AI/agenta
Length of output: 36704
🌐 Web query:
vercel ai useChat clearError reset error new submission @ai-sdk/react 3
💡 Result:
In the Vercel AI SDK (specifically @ai-sdk/react), you can manage error states in the useChat hook using the built-in clearError function [1][2]. The clearError function is available on the object returned by useChat and allows you to programmatically clear any existing error state without needing to trigger a reload or perform a new submission [1][3]. Usage: const { error, clearError } = useChat; // To clear the error: clearError; This is particularly useful when you want to reset the UI or allow the user to try again after a failed attempt without leaving the error message permanently displayed [4]. If you are using an older version of the SDK where clearError is not available, common workarounds include using the regenerate function to attempt a retry, or re-initializing the chat state if necessary [5][6]. For full control, you can also process errors via the onError callback option provided when initializing useChat [5][6].
Citations:
- 1: https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat
- 2: https://ai-sdk.dev/v5/docs/reference/ai-sdk-ui/use-chat
- 3: https://ai-play.vercel.app/docs/reference/ai-sdk-ui/use-chat
- 4: useChat: add a clearError handler vercel/ai#4742
- 5: https://ai-sdk.dev/v5/docs/ai-sdk-ui/error-handling
- 6: https://ai-play.vercel.app/docs/ai-sdk-ui/error-handling
Clear the previous error before submitting again, or track the stamped error separately.
useChat keeps error until it is cleared explicitly, and the tail-based dedupe only prevents overwriting the same message. If the last turn changes to user before error and messages update, this effect can append another run-error-* assistant carrier; call clearError(error) before sendMessage, or store the parsed error identity in a ref and avoid appending while it remains stamped.
| const toUploadFile = (file: File): UploadFile => ({ | ||
| uid: `${file.name}-${file.lastModified}-${file.size}`, | ||
| name: file.name, | ||
| status: "done", | ||
| originFileObj: file as UploadFile["originFileObj"], | ||
| }) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Inspect validateIncoming for any dedupe-by-uid behavior, and how uploads keys files.
fd -t f 'attachments.ts' web/oss/src/components/AgentChatSlice/assets --exec cat -n
fd -t f 'useAttachmentUploads.ts' --exec cat -nRepository: Agenta-AI/agenta
Length of output: 11596
🏁 Script executed:
#!/bin/bash
set -euo pipefail
fd -t f 'useComposerAttachments.ts' --exec sh -c '
echo "===== $1 ====="
wc -l "$1"
cat -n "$1"
echo
' sh {}
echo "===== references to validateIncoming / removeFile ====="
rg -n "validateIncoming|removeFile|toUploadFile|uploads\.enqueue|attachments\.tsx" web/oss/src/components/AgentChatSlice web -g '*.{ts,tsx,js,jsx}' | head -200Repository: Agenta-AI/agenta
Length of output: 12461
Mint uid once and make it unique.
file.name-file.lastModified-file.size can produce the same identifier for the same file added via paste and drop, and for distinct files with matching name/size/mtime. That makes removeFile(uid) remove both tray rows, and upload handlers keyed by uid can race or patch the wrong entry. Store the generated uid on the UploadFile, reuse it when enqueueing uploads, and use it as the removal key.
Also applies to: 61-74
| autoStartedSeedRef.current = true | ||
| handleSubmitRef.current(firstRunPrompt) |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
Unhandled rejection from the seeded auto-send.
handleSubmitRef.current is typed void | Promise<void> and the concrete handleSubmit in AgentConversation.tsx is async (it awaits filesToParts). A rejection here escapes as an unhandled promise rejection — the same case the codebase already handles via ignoreStreamRejection.
🛡️ Proposed fix
- handleSubmitRef.current(firstRunPrompt)
+ void Promise.resolve(handleSubmitRef.current(firstRunPrompt)).catch((err) =>
+ console.warn("[AgentChat] first-run seed send failed:", err),
+ )📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| autoStartedSeedRef.current = true | |
| handleSubmitRef.current(firstRunPrompt) | |
| autoStartedSeedRef.current = true | |
| void Promise.resolve(handleSubmitRef.current(firstRunPrompt)).catch((err) => | |
| console.warn("[AgentChat] first-run seed send failed:", err), | |
| ) |
| const streamIdeBubble = useCallback(() => { | ||
| const prompt = richInputRef.current?.getMarkdown().trim() ?? "" | ||
| const promptQuote = prompt | ||
| .split("\n") | ||
| .map((line) => `> ${line}`) | ||
| .join("\n") | ||
| const full = prompt | ||
| ? `Prefer to build in your IDE? Install the Agenta skill for Claude Code, Cursor, or any coding agent:\n\n\`\`\`bash\n${IDE_INSTALL_COMMAND}\n\`\`\`\n\nThen hand it your prompt:\n\n${promptQuote}` | ||
| : `Prefer to build in your IDE? Install the Agenta skill for Claude Code, Cursor, or any coding agent:\n\n\`\`\`bash\n${IDE_INSTALL_COMMAND}\n\`\`\`\n\nThen describe the agent you want it to build.` | ||
| const id = `ide-${generateId()}` | ||
| const userId = `ide-user-${generateId()}` | ||
| intent.armGlide() | ||
| setStopped(false) | ||
| // Clear the composer — the prompt is now the sent user turn (and the editor is disabled after this). | ||
| richInputRef.current?.setMarkdown("") | ||
| setMessages( | ||
| (prev) => | ||
| [ | ||
| ...prev, | ||
| ...(prompt | ||
| ? [{id: userId, role: "user", parts: [{type: "text", text: prompt}]}] | ||
| : []), | ||
| {id, role: "assistant", parts: [{type: "text", text: ""}]}, | ||
| ] as typeof prev, | ||
| ) | ||
| let shown = 0 | ||
| const chunk = Math.max(3, Math.ceil(full.length / 36)) | ||
| const tick = () => { | ||
| shown = Math.min(full.length, shown + chunk) | ||
| const text = full.slice(0, shown) | ||
| setMessages( | ||
| (prev) => | ||
| prev.map((m) => | ||
| m.id === id ? {...m, parts: [{type: "text", text}]} : m, | ||
| ) as typeof prev, | ||
| ) | ||
| if (shown < full.length) ideBubbleTimerRef.current = window.setTimeout(tick, 28) | ||
| } | ||
| ideBubbleTimerRef.current = window.setTimeout(tick, 120) | ||
| }, [setMessages]) |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
A second streamIdeBubble (or a Start-over mid-animation) orphans the previous timer chain.
ideBubbleTimerRef.current is overwritten on each start, so an already-running chain becomes uncancellable: the unmount cleanup (line 227) only clears the newest handle, leaving the older chain to call setMessages after unmount. handleStartOver (line 235) likewise leaves the chain scheduling ticks against a wiped transcript.
🛠️ Proposed fix
+ const cancelIdeBubble = useCallback(() => {
+ if (ideBubbleTimerRef.current) window.clearTimeout(ideBubbleTimerRef.current)
+ ideBubbleTimerRef.current = null
+ }, [])
const streamIdeBubble = useCallback(() => {
+ cancelIdeBubble()
const prompt = richInputRef.current?.getMarkdown().trim() ?? "" const handleStartOver = useCallback(() => {
+ cancelIdeBubble()
setMessages(() => [])
richInputRef.current?.setMarkdown("")
- }, [setMessages])
+ }, [setMessages, cancelIdeBubble])📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const streamIdeBubble = useCallback(() => { | |
| const prompt = richInputRef.current?.getMarkdown().trim() ?? "" | |
| const promptQuote = prompt | |
| .split("\n") | |
| .map((line) => `> ${line}`) | |
| .join("\n") | |
| const full = prompt | |
| ? `Prefer to build in your IDE? Install the Agenta skill for Claude Code, Cursor, or any coding agent:\n\n\`\`\`bash\n${IDE_INSTALL_COMMAND}\n\`\`\`\n\nThen hand it your prompt:\n\n${promptQuote}` | |
| : `Prefer to build in your IDE? Install the Agenta skill for Claude Code, Cursor, or any coding agent:\n\n\`\`\`bash\n${IDE_INSTALL_COMMAND}\n\`\`\`\n\nThen describe the agent you want it to build.` | |
| const id = `ide-${generateId()}` | |
| const userId = `ide-user-${generateId()}` | |
| intent.armGlide() | |
| setStopped(false) | |
| // Clear the composer — the prompt is now the sent user turn (and the editor is disabled after this). | |
| richInputRef.current?.setMarkdown("") | |
| setMessages( | |
| (prev) => | |
| [ | |
| ...prev, | |
| ...(prompt | |
| ? [{id: userId, role: "user", parts: [{type: "text", text: prompt}]}] | |
| : []), | |
| {id, role: "assistant", parts: [{type: "text", text: ""}]}, | |
| ] as typeof prev, | |
| ) | |
| let shown = 0 | |
| const chunk = Math.max(3, Math.ceil(full.length / 36)) | |
| const tick = () => { | |
| shown = Math.min(full.length, shown + chunk) | |
| const text = full.slice(0, shown) | |
| setMessages( | |
| (prev) => | |
| prev.map((m) => | |
| m.id === id ? {...m, parts: [{type: "text", text}]} : m, | |
| ) as typeof prev, | |
| ) | |
| if (shown < full.length) ideBubbleTimerRef.current = window.setTimeout(tick, 28) | |
| } | |
| ideBubbleTimerRef.current = window.setTimeout(tick, 120) | |
| }, [setMessages]) | |
| const cancelIdeBubble = useCallback(() => { | |
| if (ideBubbleTimerRef.current) window.clearTimeout(ideBubbleTimerRef.current) | |
| ideBubbleTimerRef.current = null | |
| }, []) | |
| const streamIdeBubble = useCallback(() => { | |
| cancelIdeBubble() | |
| const prompt = richInputRef.current?.getMarkdown().trim() ?? "" | |
| const promptQuote = prompt | |
| .split("\n") | |
| .map((line) => `> ${line}`) | |
| .join("\n") | |
| const full = prompt | |
| ? `Prefer to build in your IDE? Install the Agenta skill for Claude Code, Cursor, or any coding agent:\n\n\`\`\`bash\n${IDE_INSTALL_COMMAND}\n\`\`\`\n\nThen hand it your prompt:\n\n${promptQuote}` | |
| : `Prefer to build in your IDE? Install the Agenta skill for Claude Code, Cursor, or any coding agent:\n\n\`\`\`bash\n${IDE_INSTALL_COMMAND}\n\`\`\`\n\nThen describe the agent you want it to build.` | |
| const id = `ide-${generateId()}` | |
| const userId = `ide-user-${generateId()}` | |
| intent.armGlide() | |
| setStopped(false) | |
| // Clear the composer — the prompt is now the sent user turn (and the editor is disabled after this). | |
| richInputRef.current?.setMarkdown("") | |
| setMessages( | |
| (prev) => | |
| [ | |
| ...prev, | |
| ...(prompt | |
| ? [{id: userId, role: "user", parts: [{type: "text", text: prompt}]}] | |
| : []), | |
| {id, role: "assistant", parts: [{type: "text", text: ""}]}, | |
| ] as typeof prev, | |
| ) | |
| let shown = 0 | |
| const chunk = Math.max(3, Math.ceil(full.length / 36)) | |
| const tick = () => { | |
| shown = Math.min(full.length, shown + chunk) | |
| const text = full.slice(0, shown) | |
| setMessages( | |
| (prev) => | |
| prev.map((m) => | |
| m.id === id ? {...m, parts: [{type: "text", text}]} : m, | |
| ) as typeof prev, | |
| ) | |
| if (shown < full.length) ideBubbleTimerRef.current = window.setTimeout(tick, 28) | |
| } | |
| ideBubbleTimerRef.current = window.setTimeout(tick, 120) | |
| }, [setMessages, cancelIdeBubble]) |
| const adopt = (serverMsgs: UIMessage[] | null) => { | ||
| if (cancelled || !serverMsgs || serverMsgs.length === 0) return | ||
| const prev = messagesRef.current | ||
| if (busyRef.current) return | ||
| // Adopt the server transcript when it is strictly ahead by count, OR when our LOCAL tail | ||
| // is stuck paused (mid-approval) while the server has moved past it to a terminal turn — a | ||
| // resume that completed on another device. Count alone misses the latter (same bubble | ||
| // count) and was silently propped up by the now-removed duplicate user row; the server's | ||
| // `paused` flag rides the runner's `done.stopReason` through `transcriptToMessages`. | ||
| const serverAheadByCount = serverMsgs.length > prev.length | ||
| const localTailPaused = getPendingApprovals(prev).length > 0 | ||
| const serverTail = serverMsgs[serverMsgs.length - 1] as | ||
| | {role?: string; metadata?: {paused?: boolean}} | ||
| | undefined | ||
| // The paused-tail exception adopts a resume that completed elsewhere, so the server must | ||
| // NOT be behind (>= guards against a lagging snapshot discarding newer local approval | ||
| // state) and its tail must be a finished assistant turn — not a shorter, older stream. | ||
| const serverTailComplete = | ||
| serverMsgs.length >= prev.length && | ||
| serverTail?.role === "assistant" && | ||
| !serverTail.metadata?.paused && | ||
| getPendingApprovals(serverMsgs).length === 0 | ||
| if (!serverAheadByCount && !(localTailPaused && serverTailComplete)) return | ||
| serverMsgs.forEach((m) => { | ||
| seenIdsRef.current.add(m.id) | ||
| restoredIdsRef.current.add(m.id) | ||
| }) | ||
| intent.armJump() | ||
| setMessages(serverMsgs) | ||
| persistMessages({id: sessionId, messages: serverMsgs}) | ||
| } | ||
| // The first result may itself be the disk-restored records log; the callback re-applies | ||
| // the same guarded adoption when the guaranteed background revalidation lands. | ||
| loadSessionMessages(sessionId, adopt).then(adopt) |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
adopt compares against messagesRef.current, which lags an un-committed setMessages.
adopt is wired both as the refresh callback and as the then handler (line 151). If both fire before React commits the first setMessages, the second call still sees the pre-adoption prev, so a shorter/stale snapshot can win the race and overwrite the newer transcript. Tracking the last adopted length in a local variable/ref alongside messagesRef would make the guard order-independent.
| useEffect(() => { | ||
| const el = scrollRef.current | ||
| if (!el) return | ||
| const release = () => { | ||
| if (!stickRef.current) return | ||
| stickRef.current = false | ||
| setShowJump(!atLiveEdge(el)) | ||
| } | ||
| const onSelectionChange = () => { | ||
| if (!stickRef.current) return | ||
| const sel = window.getSelection() | ||
| if (!sel || sel.isCollapsed || sel.rangeCount === 0) return | ||
| if (sel.anchorNode && el.contains(sel.anchorNode)) release() | ||
| } | ||
| const onClick = (e: MouseEvent) => { | ||
| if ((e.target as HTMLElement | null)?.closest("a")) release() | ||
| } | ||
| document.addEventListener("selectionchange", onSelectionChange) | ||
| el.addEventListener("click", onClick) | ||
| return () => { | ||
| document.removeEventListener("selectionchange", onSelectionChange) | ||
| el.removeEventListener("click", onClick) | ||
| } | ||
| }, []) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
SC-4 select/click follow-release is inert once Virtuoso takes over.
This effect has [] deps and captures el = scrollRef.current once at mount, with no useVirtuoso gate. scrollRef is only attached when the plain container renders (!useVirtuoso || messages.length === 0 in AgentTranscript.tsx). For a conversation that starts empty with virtualization on, the plain div mounts once while messages.length === 0 (so this effect wires up listeners to it), then unmounts permanently as soon as the first message arrives and Virtuoso takes over. The el-bound click listener becomes inert (detached node) and el.contains(...) inside onSelectionChange will never match live selections again — text-selection/link-click no longer releases follow while streaming under Virtuoso, for the entire session.
🐛 Suggested direction
Re-run (or re-bind) this effect whenever the container is (re)attached, e.g. by tracking mount via a callback ref/state instead of only reading scrollRef.current inside a mount-only effect, and/or add the equivalent release logic to useVirtuosoTranscript's scroller (setVirtScroller already has the node).
1 participant
Context
AgentConversation.tsxhad grown to 2692 lines. One component body held the chat stream, two scroll engines, history hydration, onboarding, the composer, attachments, voice input, and the whole transcript render. Touching any one of those meant reading all of them, and the file was still growing (two feature branches landed in it this cycle).Changes
The blocker was never the length. It was four mutable scroll refs (
stick,armBottom,animateBottom,programmaticScroll) written from five call sites and read by two separate sets of effects. Nothing could be lifted out while those refs were shared ambient state.useScrollIntentnow owns them behind three verbs, one per call-site shape:Producers state intent. They never touch a ref. With that seam the rest moves out whole:
AgentConversation.tsxis 679 lines and reads as a composition root.Two changes are not pure moves, both deliberate:
AgentTurnis memoized. PreviouslyrenderMessagebuilt every row inline, so each streamed token re-rendered every settled turn above the active one. Turn numbers are also precomputed once per message set. The oldturnOfAssistantrescanned the message list per rendered row, which made the transcript O(n^2) on every commit.useComposerAttachmentsreturnsbindDropTarget(isBlocked)rather than a static handler object. The blocked-drop guard depends on the recorder, which depends onaddFiles, which would be circular. The predicate is read at event time, so no ref crosses the boundary.Tests
pnpm --filter @agenta/oss exec tsc --noEmitpasses with zero errors, as do@agenta/entity-uiand@agenta/ee.pnpm lint-fixacross the repo makes no changes. Prettier clean.useStatelazy initializers moved verbatim, comments included. Several of those comments document real races and StrictMode hazards, so they were not rewritten.release/v0.106.1rather than rebased, because the voice input and file upload features landed inside the regions this refactor deletes. Verified line by line: of 357 lines those features added, every behavioural one is present.NEXT_PUBLIC_AGENT_VOICE_INPUTandNEXT_PUBLIC_AGENT_FILE_UPLOADSboth still reach live code.Not runtime verified. The gates above are static.
What to QA
NEXT_PUBLIC_AGENT_VOICE_INPUTon. Empty composer sends it. Composer with text attaches it instead.