@e-llm-studio/watch-me-work

A React component library that renders a live, animated view of multi-agent orchestration — showing each agent's thinking steps, streaming status, and time taken in a collapsible accordion UI.

Installation

npm install @e-llm-studio/watch-me-work

Usage

import { WatchMeWork } from '@e-llm-studio/watch-me-work';

<WatchMeWork
  orchestratorAndAgentsMessages={message?.orchestratorAndAgentsMessages}
  isStreamEnd={isStreamEnd}
  finalTimeTaken={message?.finalTimeTaken}
/>

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | orchestratorAndAgentsMessages | ThinkingResponseData[] | ✅ Yes | Array of agent messages to render as steps | | isStreamEnd | boolean | ✅ Yes | Whether the stream has finished. Controls step finalization and timer stop | | finalTimeTaken | number | ✅ Yes | Total time taken (in sec) displayed after stream ends | | thinkingStartTime | number \| null | ❌ Optional | Timestamp (ms) when thinking started. Used for elapsed timer | | streamEndTime | number \| null | ❌ Optional | Timestamp (ms) when the stream ended | | storeTime | number | ❌ Optional | Timestamp (in sec) used for storage-related timing metrics |

ThinkingResponseData shape

Each item in orchestratorAndAgentsMessages should conform to:

interface ThinkingResponseData {
  responseFrom: string;         // Agent or orchestrator name
  responseMessage?: string;     // Optional message string
  header_message: string;       // Step label shown in the accordion header
  finalResponseStatus: boolean; // Whether this step has completed
  responsedata?: string;        // Markdown content shown in the expanded step body
}

Full Example

import { WatchMeWork } from '@e-llm-studio/watch-me-work';

const agentMessages = [
  {
    responseFrom: 'orchestrator',
    header_message: 'Analyzing your request...',
    finalResponseStatus: false,
    responsedata: '',
  },
  {
    responseFrom: 'search-agent',
    header_message: 'Fetching relevant documents',
    finalResponseStatus: true,
    responsedata: '**Found 3 relevant sources.** Summarizing content now.',
  },
];

export default function ChatMessage() {
  return (
    <WatchMeWork
      orchestratorAndAgentsMessages={agentMessages}
      isStreamEnd={false}
      finalTimeTaken={0}
      thinkingStartTime={Date.now()}
      streamEndTime={null}
      storeTime={undefined}
    />
  );
}

Behaviour

• While isStreamEnd is false, an elapsed timer runs showing how long the agents have been working.
• Each step renders as a collapsible accordion row with a shimmer animation on the header label while the step is in progress.
• When finalResponseStatus is true on a step, the header transitions to a gradient style indicating completion.
• When isStreamEnd becomes true, the total time taken (finalTimeTaken) is displayed and all timers stop.

Styling

WatchMeWork is a highly customizable component for rendering AI reasoning flows, including:

🧠 Thinking indicator 📄 Step detail view (accordion) 🔄 Multi-step agent timeline (Watch Me Work)

You can fully control its UI using the customStyles prop.

🧩 Basic Usage

<WatchMeWork
  orchestratorAndAgentsMessages={data}
  isStreamEnd={true}
  finalTimeTaken={1200}
  customStyles={styles}
/>

🎨 Custom Styles customStyles = { container?: CSSProperties, stepDetail?: StepDetailStyles, agentSteps?: AgentStepsStyles }

🟦 1. Container Styling

Controls the outer wrapper of the component.

```ts
container: {
  border: '1px solid #E4E7EC',
  padding: '8px',
  borderRadius: '12px',
  background: '#F9FAFB'

} 🟣 2. Step Detail View (Accordion)

Used when displaying a single reasoning step.

Structure stepDetail: { wrapper?: CSSProperties header?: CSSProperties stepLabel?: CSSProperties body?: CSSProperties bodyInner?: CSSProperties scroll?: CSSProperties chevron?: CSSProperties markdownInner?: CSSProperties chevronSize?: number bodyMaxHeight?: string mdCustomStyles?: { p?: CSSProperties code?: CSSProperties pre?: CSSProperties strong?: CSSProperties } } Example

stepDetail: {
  header: {
    background: '#7F56D9',
    color: '#FFFFFF',
    padding: '6px 10px'
  },
  stepLabel: {
    color: '#FFFFFF', 
    fontWeight: 600
  },
  body: {
    background: '#F4EBFF'
  },
  bodyInner: {
    borderRadius: '10px'
  },
  scroll: {
    maxHeight: '300px'
  },
    mdCustomStyles: {
    p: {
      color: '#DC2626'
    },
    code: {
      color: '#2563EB',
      background: '#000'
    },
    pre: {
      background: '#111827',
      color: '#F9FAFB'
    }
  }
}

🟢 3. Agent Steps View (Timeline)

Used when displaying multiple reasoning steps.

Structure agentSteps: { wrapper?: CSSProperties header?: CSSProperties headerInner?: CSSProperties label?: CSSProperties stepList?: CSSProperties stepListInner?: CSSProperties stepItem?: StepItemStyles }

Example

agentSteps: {
  wrapper: {
    border: '1px solid #D1FADF',
    borderRadius: '10px'
  },
  header: {
    background: '#ECFDF5',
    padding: '8px'
  },
  label: {
    color: '#065F46',
    fontWeight: 600
  },
  stepList: {
    background: '#F0FFF5'
  }
}

🧱 4. Step Item (Deep Customization)

Controls individual steps inside the timeline.

Structure stepItem: { stepWrapper?: CSSProperties stepRow?: CSSProperties spineCol?: CSSProperties spineLine?: CSSProperties contentCol?: CSSProperties headerRow?: CSSProperties headerLabel?: CSSProperties contentBox?: CSSProperties markdownBox?: CSSProperties markdownInner?: CSSProperties showMoreBtn?: CSSProperties Dot?: CSSProperties mdExpandedCustomStyles?: { p?: CSSProperties code?: CSSProperties pre?: CSSProperties } } Example

stepItem: {
  headerLabel: {
    color: '#101828'
  },
  spineLine: {
    background: '#22C55E'
  },
  markdownBox: {
    background: '#F9FAFB'
  },
  markdownInner: {
    color: '#667085'
  },
  showMoreBtn: {
    color: '#2563EB'
  },
  Dot: {
    width: '10px',
    backgroundColor: '#22C55E'
  },
    mdExpandedCustomStyles: {
    p: {
      color: '#7C3AED'
    },
    code: {
      color: '#06B6D4',
      background: '#000'
    },
    pre: {
      background: '#020617',
      color: '#E2E8F0'
    }
  }
}

🔥 Full Example

const styles = {
  container: {
    border: '2px solid #007AFF',
    background: '#EAF2FF',
    padding: '10px'
  },

  stepDetail: {
    header: {
      background: '#AF52DE',
      color: '#fff'
    },
    stepLabel: {
      color: '#fff'
    },
    body: {
      background: '#F9F0FF'
    },
    mdCustomStyles: {
      p: { color: 'red' },
      code: { color: 'blue' },
      pre: { background: 'black', color: 'white' }
    }
  },

  agentSteps: {
    wrapper: {
      border: '2px solid #34C759'
    },
    label: {
      color: '#065F46'
    },
    stepItem: {
      headerLabel: {
        color: '#101828'
      }
    }
  }
};

Peer Dependencies

{
  "react": ">=16.8.0 <19.0.0",
  "react-dom": "^17.0.2"
}

Repository

github.com/Techolution/e-llm-studio-lib

License

MIT © Techolution