[Chat] Support stop agent when it is streaming by SuZhou-Joe · Pull Request #11328 · opensearch-project/OpenSearch-Dashboards

SuZhou-Joe · 2026-02-11T08:11:50Z

Description

Support stop agent execution when it is streaming.

Issues Resolved

Screenshot

20260211161050192.mp4

Testing the changes

Changelog

feat: '[Chat] Support stop agent when it is streaming'

Check List

All tests pass
- yarn test:jest
- yarn test:jest_integration
New functionality includes testing.
New functionality has been documented.
Update CHANGELOG.md
Commits are signed per the DCO using --signoff

github-actions · 2026-02-11T08:12:22Z

❌ Changelog Entry Missing Hyphen

Changelog entries must begin with a hyphen (-).

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

coderabbitai · 2026-02-11T08:13:17Z

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

📝 Walkthrough

Walkthrough

The PR adds support for stopping agent execution during streaming in the Chat component. It introduces an activity messaging system with ActivityType and ActivityMessage types, a new ActivityRow component, a stop button with timing management in ChatInput, abort handling in ChatWindow for stream cancellation, server-side disconnect handling, and activity message filtering to prevent UI-only messages from reaching the agent.

Changes

Cohort / File(s)	Summary
Activity Type System `changelogs/fragments/11328.yml`, `src/core/public/chat/types.ts`, `src/core/public/chat/index.ts`, `src/core/public/index.ts`, `src/plugins/chat/common/types.ts`	Introduces `ActivityType` enum with STOP value and `ActivityMessage` interface (role: 'activity') for system-level messaging. Extends Message union, Role type, and exports across public API surfaces to expose these new types.
Activity Rendering `src/plugins/chat/public/components/activity_row.tsx`, `src/plugins/chat/public/components/activity_row.test.tsx`, `src/plugins/chat/public/components/chat_messages.tsx`, `src/plugins/chat/public/components/chat_messages.test.tsx`	Adds new `ActivityRow` component that renders activities as EUI callouts with color/icon mapping (STOP → warning). Integrates activity rendering into `ChatMessages` before system-message handling. Comprehensive test coverage for activity rendering with various content shapes.
Stop Button UI & Logic `src/plugins/chat/public/components/chat_input.tsx`, `src/plugins/chat/public/components/chat_input.test.tsx`, `src/plugins/chat/public/hooks/use_stop_button_timing.ts`, `src/plugins/chat/public/hooks/index.ts`	Adds `onStopExecution` callback to `ChatInputProps`. Introduces `useStopButtonTiming` hook to manage stop button visibility with 50ms show delay and 200ms hide delay for smooth UX. Conditionally renders stop button when streaming. Exports hooks via new index barrel.
Stream Abort & Filtering `src/plugins/chat/public/components/chat_window.tsx`, `src/plugins/chat/public/components/chat_window.test.tsx`	Implements `handleStopExecution` to abort active subscriptions, call `chatService.abort()`, append stop-activity message, and reset streaming state. Filters out activity messages from send/resend flows to prevent UI-only messages reaching the agent. Stores subscription reference for abort capability.
Server & Agent Integration `src/plugins/chat/server/routes/index.ts`, `packages/osd-agents/src/agents/langgraph/react_graph_nodes.ts`	Server: adds AbortController and client-disconnect handling via request.events.aborted$. Agent: filters out activity messages (role: 'activity') before sending to Bedrock, keeping them UI-only.

Sequence Diagram

sequenceDiagram
    actor User
    participant ChatUI as Chat Input
    participant ChatWindow as Chat Window
    participant ChatService as Chat Service
    participant Agent as Agent/Bedrock
    participant Server

    User->>ChatUI: Clicks Stop Button
    ChatUI->>ChatWindow: onStopExecution()
    ChatWindow->>ChatWindow: Abort activeSubscriptionRef
    ChatWindow->>ChatService: abort()
    ChatService->>Server: Send abort signal
    Server->>Agent: Cancel request (AbortController)
    ChatWindow->>ChatWindow: Reset streaming state
    ChatWindow->>ChatWindow: Append ActivityMessage (type: STOP)
    ChatWindow->>ChatUI: Update message list
    ChatUI->>User: Render ActivityRow (Stop activity)
    
    Note over ChatWindow: Activity messages filtered<br/>before sending to agent

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

opensearch-project/OpenSearch-Dashboards#11015: Modifies abort/stop flow with AbortController reuse handling and resetConnection in agent/service, directly related to this PR's stop-button wiring and abort logic.
opensearch-project/OpenSearch-Dashboards#10983: Introduces core chat public types and exports that overlap with this PR's ActivityType/ActivityMessage additions and public API surface extensions.

Suggested labels

ai, v3.4.0

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	PR description includes main sections but lacks critical details. 'Issues Resolved' and 'Testing the changes' sections are empty, and no explicit testing steps are provided.	Fill in the 'Issues Resolved' section with issue numbers/URLs, provide detailed testing steps in 'Testing the changes', and confirm checklist items are addressed before merge.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and directly summarizes the main change: adding support to stop agent execution when streaming, which matches the primary objective across all modified files.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-02-11T08:25:10Z

Codecov Report

❌ Patch coverage is 82.75862% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 60.30%. Comparing base (b1260be) to head (25e8d7e).

Files with missing lines	Patch %	Lines
src/plugins/chat/public/components/chat_window.tsx	66.66%	3 Missing ⚠️
src/plugins/chat/server/routes/index.ts	50.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11328      +/-   ##
==========================================
+ Coverage   60.29%   60.30%   +0.01%     
==========================================
  Files        4664     4665       +1     
  Lines      130372   130399      +27     
  Branches    22233    22238       +5     
==========================================
+ Hits        78603    78633      +30     
+ Misses      46161    46154       -7     
- Partials     5608     5612       +4

Flag	Coverage Δ
Linux_1	`24.80% <ø> (ø)`
Linux_2	`38.36% <ø> (ø)`
Linux_3	`?`
Linux_4	`33.61% <ø> (-0.01%)`	⬇️
Windows_1	`24.82% <ø> (+0.01%)`	⬆️
Windows_2	`38.34% <ø> (ø)`
Windows_3	`40.22% <82.75%> (+<0.01%)`	⬆️
Windows_4	`33.61% <ø> (+<0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

coderabbitai

Actionable comments posted: 6

🤖 Fix all issues with AI agents

In `@changelogs/fragments/11328.yml`:
- Around line 1-2: The YAML value in the feat list is being parsed as a flow
sequence because of unquoted brackets and a `#` character; update the list item
(the string starting with [Chat] Support stop agent when it is streaming) to be
a quoted scalar (e.g., wrap the entire message in double or single quotes) so
YAML treats it as a single string; ensure you quote the whole value for the
array element (the line beginning with `- [Chat] Support stop agent when it is
streaming`) and escape any internal quotes if needed.

In `@src/core/public/index.ts`:
- Line 449: You added ActivityType to the public API (exported in
src/core/public/index.ts) but didn't update the generated API docs; run the docs
generator and commit the changes by executing yarn docs:acceptApiChanges, review
the updated ./src/core/public/public.api.md to ensure ActivityType is
documented, and include those updated .api.md files in your commit alongside the
export change.

In `@src/plugins/chat/public/components/chat_input.tsx`:
- Around line 86-107: The stop button can be clicked during the 200ms linger
window causing handleStopExecution to append a spurious "Execution stopped by
user" activity; to fix this, guard the early exit in handleStopExecution (in
chat_window.tsx) by checking the streaming flag ref (isStreamingRef.current)
before calling chatService.abort() and appending the activity—if
isStreamingRef.current is false, simply return and do nothing; update any caller
(onStopExecution/shouldShowStopButton) to rely on this guard so clicks during
the linger window are ignored.

In `@src/plugins/chat/public/components/chat_window.test.tsx`:
- Around line 691-825: Tests in this block never invoke handleStopExecution;
update them to actually click the stop control so the stop flow is exercised:
render ChatWindow (ref: ChatWindowInstance) and call ref.current?.sendMessage to
start streaming (uses mockChatService.sendMessage and observable), ensure
mockChatService includes an abort: jest.fn() (or equivalent) and that the
observable's subscribe returns an unsubscribe mock, then find the DOM element
with test id/class chatStopExecutionButton and simulate a click to trigger
handleStopExecution, and finally assert that unsubscribe (or
mockChatService.abort) was called, an activity message with ActivityType.STOP
was appended, and loading/streaming state on ChatWindow was cleared; reference
functions/classes: handleStopExecution, chatStopExecutionButton,
mockChatService.sendMessage, ChatWindow, ChatWindowInstance,
observable.subscribe/unsubscribe.

In `@src/plugins/chat/public/components/chat_window.tsx`:
- Around line 69-70: activeSubscriptionRef (used by subscribeToMessageStream)
isn't cleaned up on component unmount which can leave the Observable
subscription active; add a useEffect with a cleanup return that checks
activeSubscriptionRef.current and calls unsubscribe() (or aborts via the
Subscription API) and sets it to null to avoid updates after unmount; place this
effect in the chat_window component alongside existing hooks so it runs once
(empty deps) and references activeSubscriptionRef and any abort logic used in
subscribeToMessageStream to ensure the stream is torn down on unmount.
- Around line 266-304: The mockChatService in chat_window.test.tsx is missing
the abort method, so handleStopExecution's abort flow isn't exercised; update
the mock (mockChatService) used by the chat window tests to include abort:
jest.fn() so the test invokes ChatService.abort() just like the real ChatService
(see ChatService.abort and the handleStopExecution function) and the
stop-execution tests can validate the full abort/cleanup path.

🧹 Nitpick comments (6)

src/core/public/chat/types.ts (1)
108-112: Use Record<string, unknown> instead of Record<string, any>.

The content field uses any, which bypasses type checking. Per project guidelines, prefer unknown over any.
Proposed fix
 export interface ActivityMessage extends Omit<BaseMessage, 'content'> {
   role: 'activity';
   activityType: ActivityType;
-  content: Record<string, any>;
+  content: Record<string, unknown>;
 }
As per coding guidelines, "Use TypeScript for all new code; avoid any type (use unknown or generics instead)".
src/plugins/chat/common/types.ts (1)
91-95: Use z.record(z.unknown()) instead of z.record(z.any()).

Same concern as in types.ts — z.any() disables validation for the record values. Use z.record(z.unknown()) to match the recommended Record<string, unknown> type.
Proposed fix
 export const ActivityMessageSchema = BaseMessageSchema.extend({
   role: z.literal('activity'),
   activityType: z.nativeEnum(ActivityType),
-  content: z.record(z.any()),
+  content: z.record(z.unknown()),
 });
As per coding guidelines, "Use TypeScript for all new code; avoid any type (use unknown or generics instead)".
src/plugins/chat/public/components/activity_row.tsx (1)

48-57: Consider using a CSS class instead of inline styles for margins.

Inline styles bypass the stylesheet cascade and are harder to override or maintain. A small scss file (or an existing one) with a class like .actRow__callout { margin: 8px 0; } would be more consistent with the project's pattern of importing .scss files in components. As per coding guidelines, import .scss files at the top of the component file and use 3-letter prefix on class names for scoping.

src/plugins/chat/public/components/activity_row.test.tsx (1)

75-122: Duplicate test cases that don't verify icons.

The tests "should render with cross icon for STOP activity" (Lines 75-90) and "should render with iInCircle icon for unknown activity types" (Lines 107-122) are effectively duplicates of the tests on Lines 60-73 and 92-105. They claim to verify icons but only check the callout color class — the same assertion as the preceding tests. Either remove these duplicates or add actual icon verification (e.g., querying for [data-euiicon-type="cross"]).
src/plugins/chat/public/components/chat_window.tsx (1)
280-294: Multiple setTimeline calls may cause an intermediate render without the cancel message.

Lines 282 and 294 both call setTimeline. In React 18 with automatic batching, synchronous calls within the same event handler are batched, so this should be safe. However, combining them into a single update would be more explicit and avoid any edge-case with future async boundaries.
Combined timeline update
-      // 4. Remove loading message
-      setTimeline((prev) => prev.filter((msg) => !msg.id.startsWith('loading-')));
-
-      // 5. Add cancellation feedback message
-      // Use 'activity' role (AG-UI standard) for system activities
-      const cancelMessage: Message = {
+      // 4. Remove loading messages and add cancellation feedback
+      const cancelMessage: Message = {
         id: `cancelled-${Date.now()}`,
         role: 'activity',
         activityType: ActivityType.STOP,
         content: {
           message: 'Execution stopped by user',
         },
       };
-      setTimeline((prev) => [...prev, cancelMessage]);
+      setTimeline((prev) => [
+        ...prev.filter((msg) => !msg.id.startsWith('loading-')),
+        cancelMessage,
+      ]);
src/plugins/chat/public/hooks/use_stop_button_timing.ts (1)
26-64: Including shouldShowStopButton in the dependency array causes redundant effect executions.

When the show timer fires and shouldShowStopButton becomes true, the effect re-runs while isStreaming is still true, creating another unnecessary 50ms timer. Similarly, when the hide timer fires, the effect re-runs one extra time. This is functionally harmless (React bails out on identical state) but wasteful.

An alternative is to read the current visibility from a ref inside the effect, removing it from the dependency array — then the effect only re-runs when isStreaming changes, which is the true trigger.
Refactor to eliminate redundant effect runs
 export const useStopButtonTiming = (isStreaming: boolean): boolean => {
   const [shouldShowStopButton, setShouldShowStopButton] = useState(false);
   const showTimerRef = useRef<NodeJS.Timeout | null>(null);
   const hideTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const isVisibleRef = useRef(false);
 
+  // Keep ref in sync
+  useEffect(() => {
+    isVisibleRef.current = shouldShowStopButton;
+  }, [shouldShowStopButton]);
+
   useEffect(() => {
     if (isStreaming) {
       if (hideTimerRef.current) {
         clearTimeout(hideTimerRef.current);
         hideTimerRef.current = null;
       }
       showTimerRef.current = setTimeout(() => {
         setShouldShowStopButton(true);
       }, 50);
     } else {
       if (showTimerRef.current) {
         clearTimeout(showTimerRef.current);
         showTimerRef.current = null;
       }
-      if (shouldShowStopButton) {
+      if (isVisibleRef.current) {
         hideTimerRef.current = setTimeout(() => {
           setShouldShowStopButton(false);
         }, 200);
       } else {
         setShouldShowStopButton(false);
       }
     }
 
     return () => {
       if (showTimerRef.current) clearTimeout(showTimerRef.current);
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
     };
-  }, [isStreaming, shouldShowStopButton]);
+  }, [isStreaming]);
 
   return shouldShowStopButton;
 };

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7538a07 and 72f0687.

📒 Files selected for processing (17)

changelogs/fragments/11328.yml
packages/osd-agents/src/agents/langgraph/react_graph_nodes.ts
src/core/public/chat/index.ts
src/core/public/chat/types.ts
src/core/public/index.ts
src/plugins/chat/common/types.ts
src/plugins/chat/public/components/activity_row.test.tsx
src/plugins/chat/public/components/activity_row.tsx
src/plugins/chat/public/components/chat_input.test.tsx
src/plugins/chat/public/components/chat_input.tsx
src/plugins/chat/public/components/chat_messages.test.tsx
src/plugins/chat/public/components/chat_messages.tsx
src/plugins/chat/public/components/chat_window.test.tsx
src/plugins/chat/public/components/chat_window.tsx
src/plugins/chat/public/hooks/index.ts
src/plugins/chat/public/hooks/use_stop_button_timing.ts
src/plugins/chat/server/routes/index.ts

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{ts,tsx,js,jsx,json,scss,css,html,yml,yaml}