Update step settings AI chat to display step metadata (#1650)

Fixes OPS-3103


Approved by Olga

## Additional Notes

<img width="1480" height="817" alt="Screenshot 2025-11-24 at 2 40 40 PM"
src="https://github.com/user-attachments/assets/9ada55e1-050f-4488-a2a9-1f81b30deabd"
/>




<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* AI assistant now shows step context (logo, step name, block display
name and 1-based position) when opened from step settings.

* **Improvements**
  * Assistant title changed to "Generate with AI".
* Top bar and chat layout reorganized for clearer history/new-chat/close
actions and step info.
* Docked chat height now adapts to available parent height for better
fit.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: ravikiranvm

packages/react-ui/src/app/features/builder/ai-chat/step-settings-assistant-ui-chat.tsx

@@ -1,12 +1,13 @@
 import { useTheme } from '@/app/common/providers/theme-provider';
+import { blocksHooks } from '@/app/features/blocks/lib/blocks-hook';
 import {
   AI_CHAT_CONTAINER_SIZES,
   AiCliChatContainerSizeState,
   cn,
   StepSettingsAssistantUiChatContainer,
 } from '@openops/components/ui';
-import { FlowVersion } from '@openops/shared';
-import { useCallback } from 'react';
+import { flowHelper, FlowVersion } from '@openops/shared';
+import { useCallback, useMemo } from 'react';
 import { useAiModelSelector } from '../../ai/lib/ai-model-selector-hook';
 import { useNetworkStatusWithWarning } from '../../ai/lib/hooks/use-network-status-with-warning';
 import { useStepSettingsAssistantChat } from '../assistant-ui/hooks/use-step-settings-assistant-chat';
@@ -81,6 +82,16 @@ const StepSettingsAssistantUiChat = ({
   const { isShowingSlowWarning, connectionError } =
     useNetworkStatusWithWarning(chatStatus);
 
+  const { step, stepIndex } = useMemo(
+    () => flowHelper.getStepWithIndex(flowVersion, selectedStep),
+    [flowVersion, selectedStep],
+  );
+
+  const { stepMetadata } = blocksHooks.useStepMetadata({
+    step: step,
+    enabled: !!step,
+  });
+
   return (
     <StepSettingsAssistantUiChatContainer
       parentHeight={middlePanelSize.height}
@@ -107,6 +118,10 @@ const StepSettingsAssistantUiChat = ({
       })}
       isShowingSlowWarning={isShowingSlowWarning}
       connectionError={connectionError}
+      stepLogoUrl={stepMetadata?.logoUrl}
+      stepDisplayName={step?.displayName}
+      stepIndex={stepIndex}
+      blockDisplayName={stepMetadata?.displayName}
     ></StepSettingsAssistantUiChatContainer>
   );
 };

packages/shared/src/lib/flows/flow-helper.ts

@@ -336,6 +336,25 @@ function getStep(
   );
 }
 
+function getStepWithIndex(
+  flowVersion: FlowVersion,
+  stepName: string,
+): {
+  step: Action | TriggerWithOptionalId | undefined;
+  stepIndex: number | undefined;
+} {
+  const step = getStep(flowVersion, stepName);
+
+  if (!step) {
+    return { step: undefined, stepIndex: undefined };
+  }
+
+  const steps = getAllSteps(flowVersion.trigger);
+  const stepIndex = steps.findIndex((s) => s.name === step.name) + 1;
+
+  return { step, stepIndex };
+}
+
 function getSplitBranches(step: SplitActionSchema): SplitBranch[] {
   return step.settings?.options.map((option) => ({
     optionId: option.id,
@@ -1295,6 +1314,7 @@ export const flowHelper = {
   },
 
   getStep,
+  getStepWithIndex,
   isAction,
   isTrigger,
   getAllSteps,

packages/shared/src/lib/flows/test/flow-helper.test.ts

@@ -1,5 +1,7 @@
-import { Action } from '../actions/action';
+import { Action, ActionType } from '../actions/action';
 import { flowHelper } from '../flow-helper';
+import { FlowVersion, FlowVersionState } from '../flow-version';
+import { Trigger, TriggerType } from '../triggers/trigger';
 
 describe('flowHelper', () => {
   describe('indexToAlphabetical', () => {
@@ -116,4 +118,252 @@ describe('flowHelper', () => {
       });
     });
   });
+
+  describe('getStepWithIndex', () => {
+    const createSimpleFlowVersion = (): FlowVersion => {
+      const trigger: Trigger = {
+        id: 'trigger_id',
+        name: 'trigger',
+        type: TriggerType.EMPTY,
+        valid: true,
+        settings: {},
+        displayName: 'Trigger',
+        nextAction: {
+          id: 'action_1',
+          name: 'action_1',
+          type: ActionType.CODE,
+          valid: true,
+          settings: {
+            sourceCode: {
+              code: 'test',
+              packageJson: '{}',
+            },
+            input: {},
+          },
+          displayName: 'Action 1',
+          nextAction: {
+            id: 'action_2',
+            name: 'action_2',
+            type: ActionType.CODE,
+            valid: true,
+            settings: {
+              sourceCode: {
+                code: 'test',
+                packageJson: '{}',
+              },
+              input: {},
+            },
+            displayName: 'Action 2',
+            nextAction: undefined,
+          },
+        },
+      };
+
+      return {
+        id: 'flow_version_id',
+        flowId: 'flow_id',
+        displayName: 'Test Flow',
+        created: '2023-01-01T00:00:00.000Z',
+        updated: '2023-01-01T00:00:00.000Z',
+        updatedBy: 'user_id',
+        trigger,
+        valid: true,
+        state: FlowVersionState.DRAFT,
+        testRunActionLimits: {
+          isEnabled: false,
+          limits: [],
+        },
+      };
+    };
+
+    it('should return step and correct index for trigger', () => {
+      const flowVersion = createSimpleFlowVersion();
+      const result = flowHelper.getStepWithIndex(flowVersion, 'trigger');
+
+      expect(result.step).toBeDefined();
+      expect(result.step?.name).toBe('trigger');
+      expect(result.stepIndex).toBe(1);
+    });
+
+    it('should return step and correct index for first action', () => {
+      const flowVersion = createSimpleFlowVersion();
+      const result = flowHelper.getStepWithIndex(flowVersion, 'action_1');
+
+      expect(result.step).toBeDefined();
+      expect(result.step?.name).toBe('action_1');
+      expect(result.stepIndex).toBe(2);
+    });
+
+    it('should return step and correct index for second action', () => {
+      const flowVersion = createSimpleFlowVersion();
+      const result = flowHelper.getStepWithIndex(flowVersion, 'action_2');
+
+      expect(result.step).toBeDefined();
+      expect(result.step?.name).toBe('action_2');
+      expect(result.stepIndex).toBe(3);
+    });
+
+    it('should return undefined for both step and stepIndex when step does not exist', () => {
+      const flowVersion = createSimpleFlowVersion();
+      const result = flowHelper.getStepWithIndex(
+        flowVersion,
+        'non_existent_step',
+      );
+
+      expect(result.step).toBeUndefined();
+      expect(result.stepIndex).toBeUndefined();
+    });
+
+    it('should return correct index for step in a branch action', () => {
+      const flowVersion: FlowVersion = {
+        id: 'flow_version_id',
+        flowId: 'flow_id',
+        displayName: 'Test Flow',
+        created: '2023-01-01T00:00:00.000Z',
+        updated: '2023-01-01T00:00:00.000Z',
+        updatedBy: 'user_id',
+        trigger: {
+          id: 'trigger_id',
+          name: 'trigger',
+          type: TriggerType.EMPTY,
+          valid: true,
+          settings: {},
+          displayName: 'Trigger',
+          nextAction: {
+            id: 'branch_action',
+            name: 'branch_action',
+            type: ActionType.BRANCH,
+            valid: true,
+            settings: {
+              conditions: [[]],
+            },
+            displayName: 'Branch',
+            onSuccessAction: {
+              id: 'success_action',
+              name: 'success_action',
+              type: ActionType.CODE,
+              valid: true,
+              settings: {
+                sourceCode: {
+                  code: 'test',
+                  packageJson: '{}',
+                },
+                input: {},
+              },
+              displayName: 'Success Action',
+              nextAction: undefined,
+            },
+            onFailureAction: {
+              id: 'failure_action',
+              name: 'failure_action',
+              type: ActionType.CODE,
+              valid: true,
+              settings: {
+                sourceCode: {
+                  code: 'test',
+                  packageJson: '{}',
+                },
+                input: {},
+              },
+              displayName: 'Failure Action',
+              nextAction: undefined,
+            },
+            nextAction: undefined,
+          },
+        },
+        valid: true,
+        state: FlowVersionState.DRAFT,
+        testRunActionLimits: {
+          isEnabled: false,
+          limits: [],
+        },
+      };
+
+      const branchResult = flowHelper.getStepWithIndex(
+        flowVersion,
+        'branch_action',
+      );
+      expect(branchResult.step?.name).toBe('branch_action');
+      expect(branchResult.stepIndex).toBe(2);
+
+      const successResult = flowHelper.getStepWithIndex(
+        flowVersion,
+        'success_action',
+      );
+      expect(successResult.step?.name).toBe('success_action');
+      expect(successResult.stepIndex).toBeGreaterThan(2);
+
+      const failureResult = flowHelper.getStepWithIndex(
+        flowVersion,
+        'failure_action',
+      );
+      expect(failureResult.step?.name).toBe('failure_action');
+      expect(failureResult.stepIndex).toBeGreaterThan(2);
+    });
+
+    it('should return correct index for step in a loop action', () => {
+      const flowVersion: FlowVersion = {
+        id: 'flow_version_id',
+        flowId: 'flow_id',
+        displayName: 'Test Flow',
+        created: '2023-01-01T00:00:00.000Z',
+        updated: '2023-01-01T00:00:00.000Z',
+        updatedBy: 'user_id',
+        trigger: {
+          id: 'trigger_id',
+          name: 'trigger',
+          type: TriggerType.EMPTY,
+          valid: true,
+          settings: {},
+          displayName: 'Trigger',
+          nextAction: {
+            id: 'loop_action',
+            name: 'loop_action',
+            type: ActionType.LOOP_ON_ITEMS,
+            valid: true,
+            settings: {
+              items: '',
+            },
+            displayName: 'Loop',
+            firstLoopAction: {
+              id: 'loop_child',
+              name: 'loop_child',
+              type: ActionType.CODE,
+              valid: true,
+              settings: {
+                sourceCode: {
+                  code: 'test',
+                  packageJson: '{}',
+                },
+                input: {},
+              },
+              displayName: 'Loop Child',
+              nextAction: undefined,
+            },
+            nextAction: undefined,
+          },
+        },
+        valid: true,
+        state: FlowVersionState.DRAFT,
+        testRunActionLimits: {
+          isEnabled: false,
+          limits: [],
+        },
+      };
+
+      const loopResult = flowHelper.getStepWithIndex(
+        flowVersion,
+        'loop_action',
+      );
+      expect(loopResult.step?.name).toBe('loop_action');
+      expect(loopResult.stepIndex).toBe(2);
+
+      const childResult = flowHelper.getStepWithIndex(
+        flowVersion,
+        'loop_child',
+      );
+      expect(childResult.step?.name).toBe('loop_child');
+      expect(childResult.stepIndex).toBeGreaterThan(2);
+    });
+  });
 });