Display query router reasoning in the chat (#1541)

Part of OPS-2935.

<img width="402" height="919" alt="Screenshot 2025-10-29 at 15 18 11"
src="https://github.com/user-attachments/assets/95f9ba90-fe37-4aae-83c2-664ad2202381"
/>
<img width="403" height="920" alt="Screenshot 2025-10-29 at 15 18 35"
src="https://github.com/user-attachments/assets/dbf2234a-8e64-44f0-a593-c60b65c627b4"
/>

---------

Co-authored-by: Copilot <[email protected]>
Co-authored-by: Alexandru-Dan Pop <[email protected]>

Author: 3 people

packages/react-ui/src/app/features/builder/step-settings/code-settings/index.tsx

@@ -1,4 +1,5 @@
 import {
+  ExpandableContent,
   FormField,
   FormItem,
   FormLabel,
@@ -17,7 +18,6 @@ import { useTheme } from '@/app/common/providers/theme-provider';
 import { aiSettingsHooks } from '@/app/features/ai/lib/ai-settings-hooks';
 import { PropertyType } from '@openops/blocks-framework';
 import { useSafeBuilderStateContext } from '../../builder-hooks';
-import { ExpandableContent } from '../expandable-markdown';
 import { CodeEditior } from './code-editior';
 
 const markdown = `

packages/react-ui/src/app/features/builder/step-settings/loops-settings.tsx

@@ -1,4 +1,5 @@
 import {
+  ExpandableContent,
   FormField,
   FormItem,
   FormLabel,
@@ -11,7 +12,6 @@ import { useFormContext } from 'react-hook-form';
 
 import { useTheme } from '@/app/common/providers/theme-provider';
 import { TextInputWithMentions } from '../block-properties/text-input-with-mentions';
-import { ExpandableContent } from './expandable-markdown';
 
 const markdown = t(
   'Select the items to iterate over from the previous step by clicking on the **Items** input, which should be a **list** of items.\n\nThe loop will iterate over each item in the list and execute the next step for every item.',

packages/server/api/src/app/ai/chat/stream-message-builder.ts

@@ -90,3 +90,35 @@ export function sendTextMessageToStream(
   responseStream.write(buildTextDeltaPart(message, messageId));
   responseStream.write(buildTextEndMessage(messageId));
 }
+
+function buildReasoningStartPart(id: string): string {
+  return createStreamMessage({
+    type: 'reasoning-start',
+    id,
+  });
+}
+
+function buildReasoningDeltaPart(delta: string, id: string): string {
+  return createStreamMessage({
+    type: 'reasoning-delta',
+    id,
+    delta,
+  });
+}
+
+function buildReasoningEndPart(id: string): string {
+  return createStreamMessage({
+    type: 'reasoning-end',
+    id,
+  });
+}
+
+export function sendReasoningToStream(
+  responseStream: NodeJS.WritableStream,
+  reasoning: string,
+  messageId: string,
+): void {
+  responseStream.write(buildReasoningStartPart(messageId));
+  responseStream.write(buildReasoningDeltaPart(reasoning, messageId));
+  responseStream.write(buildReasoningEndPart(messageId));
+}

packages/server/api/src/app/ai/mcp/llm-query-router.ts

@@ -12,6 +12,7 @@ const MAX_SELECTED_TOOLS = 128;
 export type ToolsAndQueryResult = {
   tools?: ToolSet;
   queryClassification: QueryClassification[];
+  reasoning?: string;
 };
 
 const queryClassificationDescriptions: Record<QueryClassification, string> = {
@@ -44,6 +45,11 @@ const coreWithReasoningSchema = z.object({
     .describe(
       'The reasoning for the tool selection and classification. Fill this field first',
     ),
+  user_facing_reasoning: z
+    .string()
+    .describe(
+      'Short non-technical description to show the next steps to the user',
+    ),
   tool_names: z.array(z.string()).describe('Array of selected tool names'),
   query_classification: z
     .array(queryClassificationUnionSchema)
@@ -69,6 +75,7 @@ export async function routeQuery({
     return {
       tools: undefined,
       queryClassification: [QueryClassification.general],
+      reasoning: undefined,
     };
   }
 
@@ -114,6 +121,7 @@ export async function routeQuery({
     return {
       queryClassification,
       tools: selectedTools,
+      reasoning: selectionResult.user_facing_reasoning,
     };
   } catch (error) {
     const isAbortError = error instanceof Error && error.name === 'AbortError';
@@ -123,6 +131,7 @@ export async function routeQuery({
     return {
       tools: undefined,
       queryClassification: [QueryClassification.general],
+      reasoning: undefined,
     };
   }
 }

packages/server/api/src/app/ai/mcp/tools-context-builder.ts

@@ -3,10 +3,12 @@ import { AiConfigParsed, ChatFlowContext } from '@openops/shared';
 import { LanguageModel, ModelMessage, ToolSet } from 'ai';
 import { FastifyInstance } from 'fastify';
 import { MCPChatContext } from '../chat/ai-chat.service';
+import { generateMessageId } from '../chat/ai-id-generators';
 import {
   getBlockSystemPrompt,
   getMcpSystemPrompt,
 } from '../chat/prompts.service';
+import { sendReasoningToStream } from '../chat/stream-message-builder';
 import { routeQuery } from './llm-query-router';
 import {
   collectToolsByProvider,
@@ -65,7 +67,11 @@ export async function getMCPToolsContext({
       projectId,
     );
 
-    const { tools: filteredTools, queryClassification } = await routeQuery({
+    const {
+      tools: filteredTools,
+      queryClassification,
+      reasoning,
+    } = await routeQuery({
       messages,
       tools,
       languageModel,
@@ -74,6 +80,11 @@ export async function getMCPToolsContext({
       abortSignal,
     });
 
+    if (reasoning && stream) {
+      const messageId = generateMessageId();
+      sendReasoningToStream(stream, reasoning, messageId);
+    }
+
     const systemPrompt = await getMcpSystemPrompt({
       queryClassification,
       selectedTools: filteredTools,

packages/ui-components/src/components/assistant-ui/thread/index.ts

@@ -1 +1,2 @@
+export * from './reasoning-part';
 export * from './thread';

packages/ui-components/src/components/assistant-ui/thread/reasoning-part.tsx

@@ -0,0 +1,29 @@
+import { LoaderPinwheelIcon } from 'lucide-react';
+import { FC } from 'react';
+import { ExpandableContent } from '../../expandable-markdown';
+
+type ReasoningPartProps = {
+  text: string;
+};
+
+export const ReasoningPart: FC<ReasoningPartProps> = ({ text }) => {
+  return (
+    <div className="my-2">
+      <ExpandableContent
+        fullContent={text}
+        buttonClassName="text-sm ml-6 font-normal"
+      >
+        {(content) => (
+          <div className="flex items-center gap-2 pt-2">
+            <LoaderPinwheelIcon className="h-4 w-4 flex-shrink-0 text-border-300 dark:text-blue-400 mt-0.5" />
+            <div className="flex-grow">
+              <div className="text-sm text-primary-700 dark:text-blue-100 whitespace-pre-wrap">
+                {content}
+              </div>
+            </div>
+          </div>
+        )}
+      </ExpandableContent>
+    </div>
+  );
+};

packages/ui-components/src/components/assistant-ui/thread/thread.tsx

@@ -27,6 +27,7 @@ import { ToolFallback } from '../tool-fallback';
 import { TooltipIconButton } from '../tooltip-icon-button';
 import { ConnectionError } from './connection-error';
 import { ConnectionSlowWarning } from './connection-slow-warning';
+import { ReasoningPart } from './reasoning-part';
 
 const MarkdownTextWrapper = memo(({ theme, ...props }: any) => {
   const { codeVariation, handleInject } = useThreadExtraContext();
@@ -234,6 +235,7 @@ const AssistantMessage: FC<{ theme: Theme }> = ({ theme }) => {
   const messageComponents = useMemo(
     () => ({
       Text: (props: any) => <MarkdownTextWrapper {...props} theme={theme} />,
+      Reasoning: (props: any) => <ReasoningPart {...props} />,
       tools: {
         Fallback: (props: any) => <ToolFallback {...props} theme={theme} />,
         by_name: {

…er/step-settings/expandable-markdown.tsx …s/src/components/expandable-markdown.tsxpackages/react-ui/src/app/features/builder/step-settings/expandable-markdown.tsx renamed to packages/ui-components/src/components/expandable-markdown.tsx packages/react-ui/src/app/features/builder/step-settings/expandable-markdown.tsx renamed to packages/ui-components/src/components/expandable-markdown.tsx

@@ -1,5 +1,6 @@
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import { ReactNode, useState } from 'react';
+import { cn } from '../lib/cn';
 
 type ExpandableContentProps = {
   fullContent: string;
@@ -47,7 +48,7 @@ export const ExpandableContent = ({
       <button
         type="button"
         onClick={() => setIsExpanded(!isExpanded)}
-        className={`${defaultButtonClass} ${buttonClassName}`}
+        className={cn(defaultButtonClass, buttonClassName)}
       >
         {isExpanded ? (
           <>

packages/ui-components/src/components/index.ts

@@ -15,6 +15,7 @@ export * from './confirmation-dialog/confirmation-dialog';
 export * from './custom';
 export * from './dashboard-overview';
 export * from './dismissible-panel/dismissible-panel';
+export * from './expandable-markdown';
 export * from './explore-templates';
 export * from './flow-canvas/ai-widget';
 export * from './flow-canvas/canvas-context';