@orchestrator-ui/orchestrator-ui-components 8.3.0 → 8.4.1

package/src/components/WfoAgent/WfoAgent/WfoAgent.tsx

@@ -1,147 +0,0 @@
-import React, { useCallback, useRef } from 'react';
-
-import { useTranslations } from 'next-intl';
-
-import { useRenderToolCall } from '@copilotkit/react-core';
-import { CopilotChat } from '@copilotkit/react-ui';
-import type { RenderMessageProps } from '@copilotkit/react-ui';
-
-import { WfoAvailabilityCheck } from '@/components/WfoAvailabilityCheck';
-import { getPageTemplateStyles } from '@/components/WfoPageTemplate/WfoPageTemplate/styles';
-import { useWithOrchestratorTheme } from '@/hooks';
-import { type PlanExecutionState, useAgentPlanEvents } from '@/hooks/useAgentPlanEvents';
-import { useAgentAvailability } from '@/hooks/useBackendAvailability';
-import { ExportArtifact, QueryArtifact } from '@/types';
-
-import { ExportButton } from '../ExportButton';
-import { WfoPlanProgress } from '../WfoPlanProgress';
-import { WfoQueryArtifact } from '../WfoQueryArtifact';
-
-export function WfoAgent() {
-  const tPage = useTranslations('agent.page');
-
-  const { NAVIGATION_HEIGHT } = useWithOrchestratorTheme(getPageTemplateStyles);
-  const agentAvailability = useAgentAvailability();
-  const planProgress = useAgentPlanEvents();
-
-  // Use a ref so the RenderMessage callback stays stable (no blink)
-  // while always reading the latest plan progress
-  const planProgressRef = useRef<PlanExecutionState>(planProgress);
-  planProgressRef.current = planProgress;
-
-  const RenderMessage = useCallback(
-    ({
-      message,
-      messages,
-      inProgress,
-      index,
-      isCurrentMessage,
-      AssistantMessage,
-      UserMessage,
-      ImageRenderer,
-      onRegenerate,
-      ...rest
-    }: RenderMessageProps) => {
-      if (message.role === 'user') {
-        return UserMessage ?
-            <UserMessage key={index} rawData={message} message={message} ImageRenderer={ImageRenderer!} />
-          : null;
-      }
-
-      if (message.role === 'assistant') {
-        const progress = planProgressRef.current;
-
-        // Show plan progress on the first assistant message
-        // after the last user message (the active response)
-        const lastUserIndex = [...messages].reverse().findIndex((msg) => msg.role === 'user');
-        const firstAssistantAfterUser = lastUserIndex >= 0 ? messages.length - lastUserIndex : -1;
-        const showPlanProgress = index === firstAssistantAfterUser && (progress.planning || progress.steps.length > 0);
-
-        return (
-          <>
-            {showPlanProgress && <WfoPlanProgress executionState={progress} />}
-            {AssistantMessage && (
-              <AssistantMessage
-                key={index}
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- generativeUI is an internal CopilotKit property not in public types
-                subComponent={(message as any).generativeUI?.()}
-                rawData={message}
-                message={message}
-                messages={messages}
-                isLoading={inProgress && isCurrentMessage && !message.content}
-                isGenerating={inProgress && isCurrentMessage && !!message.content}
-                isCurrentMessage={isCurrentMessage}
-                onRegenerate={() => onRegenerate?.(message.id)}
-                feedback={rest.messageFeedback?.[message.id] || null}
-                ImageRenderer={ImageRenderer!}
-                {...rest}
-              />
-            )}
-          </>
-        );
-      }
-
-      return null;
-    },
-    [],
-  );
-
-  const renderQueryResult = ({ result }: { result?: unknown }) => {
-    if (!result) {
-      return <></>;
-    }
-    return <WfoQueryArtifact artifact={result as QueryArtifact} />;
-  };
-
-  useRenderToolCall({ name: 'run_search', render: renderQueryResult });
-  useRenderToolCall({ name: 'run_aggregation', render: renderQueryResult });
-
-  useRenderToolCall({
-    name: 'prepare_export',
-    render: ({ result }) => {
-      if (!result) {
-        return <></>;
-      }
-      return <ExportButton artifact={result as ExportArtifact} />;
-    },
-  });
-
-  return (
-    <WfoAvailabilityCheck featureType="agent" availability={agentAvailability}>
-      <div style={{ height: `calc(90vh - ${NAVIGATION_HEIGHT}px)` }}>
-        <style>{`
-                .copilotKitChat {
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                }
-            `}</style>
-        <CopilotChat
-          RenderMessage={RenderMessage}
-          labels={{
-            title: tPage('copilot.title'),
-            initial: tPage('copilot.initial'),
-          }}
-          suggestions={[
-            {
-              title: tPage('suggestions.findActiveSubscriptions'),
-              message: tPage('suggestions.findActiveSubscriptions'),
-            },
-            {
-              title: tPage('suggestions.showTerminatedWorkflows'),
-              message: tPage('suggestions.showTerminatedWorkflows'),
-            },
-            {
-              title: tPage('suggestions.listAllSubscriptionsAndExport'),
-              message: tPage('suggestions.listAllSubscriptionsAndExport'),
-            },
-            {
-              title: tPage('suggestions.showActiveSubscriptionsPerMonth'),
-              message: tPage('suggestions.showActiveSubscriptionsPerMonth'),
-            },
-          ]}
-        />
-      </div>
-    </WfoAvailabilityCheck>
-  );
-}

package/src/components/WfoAgent/WfoAgent/index.ts

@@ -1 +0,0 @@
-export * from './WfoAgent';

package/src/components/WfoAgent/WfoAgentChart/WfoAgentLineChart.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-import { Axis, Chart, DARK_THEME, LIGHT_THEME, LineSeries, Position, Settings } from '@elastic/charts';
-import '@elastic/charts/dist/theme_only_dark.css';
-import '@elastic/charts/dist/theme_only_light.css';
-
-import { useOrchestratorTheme } from '@/hooks';
-import { QueryResultsData } from '@/types';
-
-export type WfoAgentLineChartProps = {
-  aggregationData: QueryResultsData;
-};
-
-export function WfoAgentLineChart({ aggregationData }: WfoAgentLineChartProps) {
-  const { results } = aggregationData;
-  const { isDarkModeActive, multiplyByBaseUnit } = useOrchestratorTheme();
-  const chartBaseTheme = isDarkModeActive ? DARK_THEME : LIGHT_THEME;
-
-  const firstResult = results[0];
-  const groupKeys = Object.keys(firstResult.group_values);
-  const aggKeys = Object.keys(firstResult.aggregations);
-
-  const xKey = groupKeys[0];
-  const chartData = results.map((result, index) => ({
-    x: index,
-    xLabel: result.group_values[xKey],
-    ...result.aggregations,
-  }));
-
-  return (
-    <Chart size={{ height: multiplyByBaseUnit(30) }}>
-      <Settings showLegend baseTheme={chartBaseTheme} />
-      <Axis
-        id="bottom"
-        position={Position.Bottom}
-        title={xKey.replace(/_/g, ' ')}
-        tickFormat={(d) => chartData[d]?.xLabel?.split(' ')[0] || d}
-      />
-      <Axis id="left" position={Position.Left} title="Count" />
-      {aggKeys.map((aggKey) => (
-        <LineSeries
-          key={aggKey}
-          id={aggKey}
-          name={aggKey.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())}
-          data={chartData}
-          xAccessor="x"
-          yAccessors={[aggKey]}
-        />
-      ))}
-    </Chart>
-  );
-}

package/src/components/WfoAgent/WfoAgentChart/WfoAgentPieChart.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-
-import { Chart, DARK_THEME, LIGHT_THEME, Partition, PartitionLayout, Position, Settings } from '@elastic/charts';
-import '@elastic/charts/dist/theme_only_dark.css';
-import '@elastic/charts/dist/theme_only_light.css';
-
-import { QueryResultsData } from '@/types';
-
-import { useOrchestratorTheme } from '../../../hooks';
-import { containerStyle } from './styles';
-
-export type WfoAgentPieChartProps = {
-  aggregationData: QueryResultsData;
-};
-
-export function WfoAgentPieChart({ aggregationData }: WfoAgentPieChartProps) {
-  const { results } = aggregationData;
-  const { isDarkModeActive, multiplyByBaseUnit } = useOrchestratorTheme();
-  const chartBaseTheme = isDarkModeActive ? DARK_THEME : LIGHT_THEME;
-
-  const firstResult = results[0];
-  const groupKeys = Object.keys(firstResult.group_values);
-  const aggKeys = Object.keys(firstResult.aggregations);
-
-  // Use the first group key for labels and first aggregation for values
-  const groupKey = groupKeys[0];
-  const aggKey = aggKeys[0];
-  const pieData = results.map((result) => ({
-    label: result.group_values[groupKey],
-    value: result.aggregations[aggKey],
-  }));
-
-  return (
-    <div css={containerStyle}>
-      <Chart size={{ height: multiplyByBaseUnit(25) }}>
-        <Settings showLegend legendPosition={Position.Right} baseTheme={chartBaseTheme} />
-        <Partition
-          id="pieByPR"
-          data={pieData}
-          layout={PartitionLayout.sunburst}
-          valueAccessor={(d) => d.value}
-          layers={[
-            {
-              groupByRollup: (d: (typeof pieData)[0]) => d.label,
-              shape: {
-                fillColor: (_, sortIndex) => chartBaseTheme.colors.vizColors![sortIndex],
-              },
-            },
-          ]}
-          clockwiseSectors={false}
-        />
-      </Chart>
-    </div>
-  );
-}

package/src/components/WfoAgent/WfoAgentChart/index.ts

@@ -1,2 +0,0 @@
-export * from './WfoAgentLineChart';
-export * from './WfoAgentPieChart';

package/src/components/WfoAgent/WfoAgentChart/styles.ts

@@ -1,6 +0,0 @@
-import { css } from '@emotion/react';
-
-export const containerStyle = css({
-  maxWidth: '50%',
-  marginRight: 'auto',
-});

package/src/components/WfoAgent/WfoAgentTable/WfoAgentTable.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-
-import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui';
-
-import { QueryResultsData, ResultRow } from '@/types';
-
-export type WfoAgentTableProps = {
-  aggregationData: QueryResultsData;
-};
-
-const formatColumnName = (key: string) => key.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
-
-export function WfoAgentTable({ aggregationData }: WfoAgentTableProps) {
-  const { results } = aggregationData;
-  const [pageIndex, setPageIndex] = React.useState(0);
-  const [pageSize, setPageSize] = React.useState(5);
-
-  const columns: EuiBasicTableColumn<ResultRow>[] = React.useMemo(() => {
-    if (results.length === 0) return [];
-
-    const firstResult = results[0];
-    const groupKeys = Object.keys(firstResult.group_values);
-    const aggKeys = Object.keys(firstResult.aggregations);
-
-    const groupColumns: EuiBasicTableColumn<ResultRow>[] = groupKeys.map((key) => ({
-      field: 'group_values' as keyof ResultRow,
-      name: formatColumnName(key),
-      render: (_: unknown, record: ResultRow) => record.group_values[key],
-    }));
-
-    const aggColumns: EuiBasicTableColumn<ResultRow>[] = aggKeys.map((key) => ({
-      field: 'aggregations' as keyof ResultRow,
-      name: formatColumnName(key),
-      render: (_: unknown, record: ResultRow) => record.aggregations[key],
-    }));
-
-    return [...groupColumns, ...aggColumns];
-  }, [results]);
-
-  const startIndex = pageIndex * pageSize;
-  const paginatedItems = results.slice(startIndex, startIndex + pageSize);
-
-  const pagination = {
-    pageIndex,
-    pageSize,
-    totalItemCount: results.length,
-    pageSizeOptions: [5, 10, 25, 50],
-  };
-
-  const onTableChange = ({ page }: { page?: { index: number; size: number } }) => {
-    if (page) {
-      setPageIndex(page.index);
-      setPageSize(page.size);
-    }
-  };
-
-  return (
-    <EuiBasicTable
-      items={paginatedItems}
-      columns={columns}
-      tableLayout="auto"
-      pagination={pagination}
-      onChange={onTableChange}
-    />
-  );
-}

package/src/components/WfoAgent/WfoAgentTable/index.ts

@@ -1 +0,0 @@
-export * from './WfoAgentTable';

package/src/components/WfoAgent/WfoAgentVisualization/WfoAgentVisualization.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { useTranslations } from 'next-intl';
-
-import { EuiText } from '@elastic/eui';
-
-import { QueryResultsData, VisualizationType } from '@/types';
-
-import { WfoAgentLineChart } from '../WfoAgentChart/WfoAgentLineChart';
-import { WfoAgentPieChart } from '../WfoAgentChart/WfoAgentPieChart';
-import { WfoAgentTable } from '../WfoAgentTable';
-
-export type WfoAgentVisualizationProps = {
-  aggregationData: QueryResultsData;
-};
-
-export function WfoAgentVisualization({ aggregationData }: WfoAgentVisualizationProps) {
-  const { visualization_type, results } = aggregationData;
-  const t = useTranslations('agent.page.visualization');
-
-  if (!results || results.length === 0) {
-    return (
-      <EuiText size="s">
-        <p>{t('noDataAvailable')}</p>
-      </EuiText>
-    );
-  }
-
-  // For charts (pie/line), validate data structure
-  const visualizationType = visualization_type?.type;
-  if (visualizationType === VisualizationType.PIE || visualizationType === VisualizationType.LINE) {
-    const firstResult = results[0];
-    const groupKeys = Object.keys(firstResult.group_values);
-    const aggKeys = Object.keys(firstResult.aggregations);
-
-    if (groupKeys.length === 0 || aggKeys.length === 0) {
-      return (
-        <EuiText size="s">
-          <p>{t('invalidDataStructure')}</p>
-        </EuiText>
-      );
-    }
-  }
-
-  switch (visualizationType) {
-    case VisualizationType.PIE:
-      return <WfoAgentPieChart aggregationData={aggregationData} />;
-    case VisualizationType.LINE:
-      return <WfoAgentLineChart aggregationData={aggregationData} />;
-    case VisualizationType.TABLE:
-    default:
-      return <WfoAgentTable aggregationData={aggregationData} />;
-  }
-}

package/src/components/WfoAgent/WfoAgentVisualization/index.ts

@@ -1 +0,0 @@
-export * from './WfoAgentVisualization';

package/src/components/WfoAgent/WfoPlanProgress/WfoPlanProgress.tsx

@@ -1,107 +0,0 @@
-import React, { useState } from 'react';
-
-import { useTranslations } from 'next-intl';
-
-import { EuiLoadingSpinner, EuiPanel, EuiText } from '@elastic/eui';
-
-import { useWithOrchestratorTheme } from '@/hooks';
-import type { PlanExecutionState } from '@/hooks/useAgentPlanEvents';
-import { useOrchestratorTheme } from '@/hooks/useOrchestratorTheme';
-import { WfoCheckmarkCircleFill, WfoChevronDown, WfoChevronUp, WfoMinusCircleOutline } from '@/icons';
-
-import { getWfoPlanProgressStyles } from './styles';
-
-type WfoPlanProgressProps = {
-  executionState: PlanExecutionState;
-};
-
-export const WfoPlanProgress = ({ executionState }: WfoPlanProgressProps) => {
-  const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set());
-  const t = useTranslations('agent.page.planProgress');
-  const { theme } = useOrchestratorTheme();
-
-  const { containerStyle, headerStyle, rowStyle, reasoningStyle, toolCallsToggleStyle, toolCallsListStyle, iconSize } =
-    useWithOrchestratorTheme(getWfoPlanProgressStyles);
-
-  if (!executionState.planning && executionState.steps.length === 0) {
-    return null;
-  }
-
-  const toggleStep = (stepName: string) => {
-    setExpandedSteps((prev) => {
-      const next = new Set(prev);
-      if (next.has(stepName)) {
-        next.delete(stepName);
-      } else {
-        next.add(stepName);
-      }
-      return next;
-    });
-  };
-
-  const completedCount = executionState.steps.filter((s) => s.status === 'completed').length;
-  const totalCount = executionState.steps.length;
-  const allDone = totalCount > 0 && completedCount === totalCount;
-
-  const headerLabel =
-    executionState.planning ? t('planning')
-    : allDone ? t('completed')
-    : t('executing', { completed: completedCount, total: totalCount });
-
-  const StatusIcon = ({ status }: { status: string }) => {
-    if (status === 'completed')
-      return <WfoCheckmarkCircleFill color={theme.colors.success} width={iconSize} height={iconSize} />;
-    if (status === 'pending')
-      return <WfoMinusCircleOutline color={theme.colors.textSubdued} width={iconSize} height={iconSize} />;
-    return <EuiLoadingSpinner size="s" />;
-  };
-
-  return (
-    <EuiPanel hasBorder paddingSize="s" css={containerStyle}>
-      <div css={headerStyle}>
-        {allDone ?
-          <WfoCheckmarkCircleFill color={theme.colors.success} width={iconSize} height={iconSize} />
-        : <EuiLoadingSpinner size="s" />}
-        <span>{headerLabel}</span>
-      </div>
-      {executionState.steps.map((step) => {
-        const isExpanded = expandedSteps.has(step.step_name);
-        const hasToolCalls = step.tool_calls.length > 0;
-
-        return (
-          <div key={step.step_name}>
-            <div css={rowStyle}>
-              <StatusIcon status={step.status} />
-              <EuiText size="s" color={step.status === 'pending' ? 'subdued' : undefined}>
-                {step.step_name}
-              </EuiText>
-              {hasToolCalls && (
-                <span css={toolCallsToggleStyle} onClick={() => toggleStep(step.step_name)}>
-                  {step.tool_calls.length}
-                  {isExpanded ?
-                    <WfoChevronUp width={iconSize} height={iconSize} />
-                  : <WfoChevronDown width={iconSize} height={iconSize} />}
-                </span>
-              )}
-            </div>
-            {step.reasoning && (
-              <EuiText size="xs" color="subdued" css={reasoningStyle}>
-                {step.reasoning}
-              </EuiText>
-            )}
-            {isExpanded && hasToolCalls && (
-              <div css={toolCallsListStyle}>
-                {step.tool_calls.map((tc) => (
-                  <EuiText size="xs" key={tc.id} css={rowStyle}>
-                    <StatusIcon status={tc.status === 'complete' ? 'completed' : 'active'} />
-                    <span>{tc.name}</span>
-                  </EuiText>
-                ))}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </EuiPanel>
-  );
-};

package/src/components/WfoAgent/WfoPlanProgress/index.ts

@@ -1 +0,0 @@
-export { WfoPlanProgress } from './WfoPlanProgress';

package/src/components/WfoAgent/WfoPlanProgress/styles.ts

@@ -1,62 +0,0 @@
-import { css } from '@emotion/react';
-
-import { WfoThemeHelpers } from '@/hooks';
-
-export const getWfoPlanProgressStyles = ({ theme }: WfoThemeHelpers) => {
-  const iconSize = 14;
-
-  const containerStyle = css({
-    maxWidth: '50%',
-    marginRight: 'auto',
-    marginBottom: theme.size.s,
-    fontSize: theme.size.m,
-  });
-
-  const headerStyle = css({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.size.s,
-    paddingBottom: theme.size.s,
-    marginBottom: theme.size.xs,
-    borderBottom: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
-    fontWeight: theme.font.weight.semiBold,
-  });
-
-  const rowStyle = css({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.size.s,
-    padding: `${theme.size.xxs} 0`,
-  });
-
-  const reasoningStyle = css({
-    marginLeft: `calc(${iconSize}px + ${theme.size.s})`,
-  });
-
-  const toolCallsToggleStyle = css({
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: theme.size.xxs,
-    cursor: 'pointer',
-    fontSize: theme.size.s,
-    color: theme.colors.textSubdued,
-    marginLeft: 'auto',
-    '&:hover': {
-      color: theme.colors.textParagraph,
-    },
-  });
-
-  const toolCallsListStyle = css({
-    paddingLeft: `calc(${iconSize}px + ${theme.size.s})`,
-  });
-
-  return {
-    containerStyle,
-    headerStyle,
-    rowStyle,
-    reasoningStyle,
-    toolCallsToggleStyle,
-    toolCallsListStyle,
-    iconSize,
-  };
-};

package/src/components/WfoAgent/WfoQueryArtifact/WfoQueryArtifact.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import { useTranslations } from 'next-intl';
-
-import { EuiText } from '@elastic/eui';
-
-import { WfoLoading } from '@/components';
-import { useGetAgentQueryResultsQuery } from '@/rtk/endpoints/agentQueryResults';
-import { QueryArtifact } from '@/types';
-
-import { WfoAgentVisualization } from '../WfoAgentVisualization';
-
-export type WfoQueryArtifactProps = {
-  artifact: QueryArtifact;
-};
-
-export function WfoQueryArtifact({ artifact }: WfoQueryArtifactProps) {
-  const t = useTranslations('agent.page.visualization');
-  const { data, isLoading, isError } = useGetAgentQueryResultsQuery(artifact.query_id);
-
-  if (isLoading) {
-    return <WfoLoading />;
-  }
-
-  if (isError || !data) {
-    return (
-      <EuiText size="s" color="danger">
-        <p>{t('noDataAvailable')}</p>
-      </EuiText>
-    );
-  }
-
-  // Use the visualization_type from the artifact (set by the LLM) rather than the response
-  const aggregationData = {
-    ...data,
-    visualization_type: artifact.visualization_type,
-  };
-
-  return <WfoAgentVisualization aggregationData={aggregationData} />;
-}

package/src/components/WfoAgent/WfoQueryArtifact/index.ts

@@ -1 +0,0 @@
-export * from './WfoQueryArtifact';

package/src/components/WfoAgent/index.ts

@@ -1,7 +0,0 @@
-export * from './WfoAgent';
-export * from './WfoAgentTable';
-export * from './WfoAgentChart/WfoAgentLineChart';
-export * from './WfoAgentChart/WfoAgentPieChart';
-export * from './WfoAgentVisualization';
-export * from './WfoPlanProgress';
-export * from './WfoQueryArtifact';