@orchestrator-ui/orchestrator-ui-components 6.7.2 → 6.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "6.7.2",
+    "version": "6.7.4",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -35,9 +35,10 @@
     },
     "dependencies": {
         "@ag-ui/client": "0.0.39",
-        "@copilotkit/react-core": "^1.3.18",
-        "@copilotkit/react-ui": "^1.3.18",
-        "@copilotkit/runtime": "^1.3.18",
+        "@copilotkit/react-core": "1.10.6",
+        "@copilotkit/react-ui": "1.10.6",
+        "@copilotkit/runtime": "1.10.6",
+        "@elastic/charts": "^64.1.0",
         "@elastic/eui": "101.3.0",
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.4",
@@ -47,13 +48,13 @@
         "invariant": "^2.2.4",
         "lodash": "^4.17.21",
         "moment": "^2.29.4",
-        "moment-timezone": "^0.6.0",
+        "moment-timezone": "^0.5.32",
         "next-auth": "^4.24.5",
         "next-intl": "^3.26.5",
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^0.9.4",
+        "pydantic-forms": "^0.10.0",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

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

@@ -6,7 +6,7 @@ export const getExportButtonStyles = ({ theme }: WfoTheme) => {
     const containerStyle = css({
         marginTop: theme.size.xl,
         marginBottom: theme.size.xl,
-        width: '100%',
+        width: '50%',
     });
 
     const buttonWrapperStyle = css({

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

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
+import { useTranslations } from 'next-intl';
+
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 
 import { useWithOrchestratorTheme } from '@/hooks';
@@ -43,6 +45,7 @@ export const ToolProgress = ({
     result,
 }: ToolProgressProps) => {
     const [isExpanded, setIsExpanded] = useState(false);
+    const tPage = useTranslations('agent.page');
 
     const {
         containerStyle,
@@ -56,6 +59,13 @@ export const ToolProgress = ({
 
     const { theme } = useOrchestratorTheme();
 
+    const getToolLabel = (toolName: string) => {
+        const toolKey = `tools.${toolName}`;
+        const translated = tPage(toolKey);
+        const fullKey = `agent.page.${toolKey}`;
+        return translated === fullKey ? toolName : translated;
+    };
+
     const renderStatus = () => {
         if (status === 'complete') {
             return (
@@ -82,13 +92,13 @@ export const ToolProgress = ({
     };
 
     const DisplayComponent = TOOL_DISPLAY_COMPONENTS[name];
-    const hasArgs = DisplayComponent && args;
+    const hasContent = DisplayComponent && (args || result);
 
     return (
         <div css={containerStyle}>
             <div
-                css={hasArgs && containerClickableStyle}
-                onClick={() => hasArgs && setIsExpanded(!isExpanded)}
+                css={hasContent && containerClickableStyle}
+                onClick={() => hasContent && setIsExpanded(!isExpanded)}
             >
                 <EuiFlexGroup
                     gutterSize="m"
@@ -101,7 +111,7 @@ export const ToolProgress = ({
                         </div>
                     </EuiFlexItem>
                     <EuiFlexItem grow={true}>
-                        <span css={nameStyle}>{name}</span>
+                        <span css={nameStyle}>{getToolLabel(name)}</span>
                     </EuiFlexItem>
                     <EuiFlexItem
                         grow={false}
@@ -113,7 +123,7 @@ export const ToolProgress = ({
                         grow={false}
                         style={{ minWidth: `${iconSize}px` }}
                     >
-                        {hasArgs &&
+                        {hasContent &&
                             (isExpanded ? (
                                 <WfoChevronUp
                                     width={iconSize}
@@ -128,7 +138,7 @@ export const ToolProgress = ({
                     </EuiFlexItem>
                 </EuiFlexGroup>
             </div>
-            {hasArgs && isExpanded && (
+            {hasContent && isExpanded && (
                 <div css={expandedContentStyle}>
                     <DisplayComponent parameters={args} result={result} />
                 </div>

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

@@ -8,6 +8,8 @@ export const getToolProgressStyles = ({ theme }: WfoTheme) => {
         borderRadius: theme.border.radius.medium,
         backgroundColor: theme.colors.emptyShade,
         transition: `all ${theme.animation.normal} ease`,
+        maxWidth: '50%',
+        marginRight: 'auto',
     });
 
     const containerClickableStyle = css({

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

@@ -4,59 +4,68 @@ import { useTranslations } from 'next-intl';
 
 import {
     CatchAllActionRenderProps,
-    useCoAgent,
-    useCoAgentStateRender,
     useCopilotAction,
+    useRenderToolCall,
 } from '@copilotkit/react-core';
-import { CopilotSidebar } from '@copilotkit/react-ui';
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { CopilotChat } from '@copilotkit/react-ui';
 
 import { WfoAvailabilityCheck } from '@/components/WfoAvailabilityCheck';
-import { WfoSearchResults } from '@/components/WfoSearchPage/WfoSearchResults';
+import { getPageTemplateStyles } from '@/components/WfoPageTemplate/WfoPageTemplate/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
 import { useAgentAvailability } from '@/hooks/useBackendAvailability';
-import { AnySearchParameters, SearchResult } from '@/types';
+import { AggregationResultsData } from '@/types';
 
 import { ExportButton, ExportData } from '../ExportButton';
 import { ToolProgress } from '../ToolProgress';
-
-type SearchResultsData = {
-    action: string;
-    query_id: string;
-    results_url: string;
-    total_count: number;
-    message: string;
-    results: SearchResult[];
-};
-
-type SearchState = {
-    run_id: string | null;
-    query_id: string | null;
-    parameters: AnySearchParameters | null;
-    results_data: SearchResultsData | null;
-    export_data: ExportData | null;
-};
-
-const initialState: SearchState = {
-    run_id: null,
-    query_id: null,
-    parameters: null,
-    results_data: null,
-    export_data: null,
-};
+import { WfoAgentVisualization } from '../WfoAgentVisualization';
 
 export function WfoAgent() {
-    const t = useTranslations('agent');
     const tPage = useTranslations('agent.page');
 
+    const { NAVIGATION_HEIGHT } = useWithOrchestratorTheme(
+        getPageTemplateStyles,
+    );
     const agentAvailability = useAgentAvailability();
 
-    const { state } = useCoAgent<SearchState>({
-        name: 'query_agent',
-        initialState,
+    useRenderToolCall({
+        name: 'run_search',
+        render: ({ result }) => {
+            if (!result) {
+                return '';
+            }
+            return (
+                <WfoAgentVisualization
+                    aggregationData={result as AggregationResultsData}
+                />
+            );
+        },
+    });
+
+    useRenderToolCall({
+        name: 'run_aggregation',
+        render: ({ result }) => {
+            if (!result) {
+                return '';
+            }
+            return (
+                <WfoAgentVisualization
+                    aggregationData={result as AggregationResultsData}
+                />
+            );
+        },
+    });
+
+    useRenderToolCall({
+        name: 'prepare_export',
+        render: ({ result }) => {
+            if (!result) {
+                return '';
+            }
+            return <ExportButton exportData={result as ExportData} />;
+        },
     });
-    const { results_data } = state;
 
-    // Automatically render all tool calls
+    // Automatically render all other tool calls
     useCopilotAction({
         name: '*',
         render: ({
@@ -76,61 +85,56 @@ export function WfoAgent() {
         },
     });
 
-    // Render export button from state
-    useCoAgentStateRender<SearchState>({
-        name: 'query_agent',
-        render: ({ state }) => {
-            if (!state?.export_data || state.export_data.action !== 'export') {
-                return null;
-            }
-            return <ExportButton exportData={state.export_data} />;
-        },
-    });
-
     return (
         <WfoAvailabilityCheck
             featureType="agent"
             availability={agentAvailability}
         >
-            <EuiFlexGroup gutterSize="l" alignItems="stretch">
-                <EuiFlexItem grow={2}>
-                    <EuiText>
-                        <h1>{t('title')}</h1>
-                    </EuiText>
-
-                    <EuiSpacer size="m" />
-
-                    {results_data && results_data.action === 'view_results' && (
-                        <>
-                            {results_data.message && (
-                                <>
-                                    <EuiText size="s">
-                                        <p>{results_data.message}</p>
-                                    </EuiText>
-                                    <EuiSpacer size="s" />
-                                </>
-                            )}
-                            <WfoSearchResults
-                                results={results_data.results}
-                                loading={false}
-                                selectedRecordIndex={-1}
-                                onRecordSelect={() => {}}
-                            />
-                        </>
-                    )}
-                </EuiFlexItem>
-
-                <EuiFlexItem grow={1}>
-                    <CopilotSidebar
-                        defaultOpen
-                        clickOutsideToClose={false}
-                        labels={{
-                            title: tPage('copilot.title'),
-                            initial: tPage('copilot.initial'),
-                        }}
-                    />
-                </EuiFlexItem>
-            </EuiFlexGroup>
+            <div style={{ height: `calc(90vh - ${NAVIGATION_HEIGHT}px)` }}>
+                <style>{`
+                .copilotKitChat {
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                }
+            `}</style>
+                <CopilotChat
+                    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/WfoAgentChart/WfoAgentLineChart.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import {
+    Axis,
+    Chart,
+    DARK_THEME,
+    LIGHT_THEME,
+    LineSeries,
+    Position,
+    Settings,
+} from '@elastic/charts';
+
+import { useOrchestratorTheme } from '@/hooks';
+import { AggregationResultsData } from '@/types';
+
+export type WfoAgentLineChartProps = {
+    aggregationData: AggregationResultsData;
+};
+
+export function WfoAgentLineChart({ aggregationData }: WfoAgentLineChartProps) {
+    const { results } = aggregationData;
+    const { isDarkThemeActive, multiplyByBaseUnit } = useOrchestratorTheme();
+    const chartBaseTheme = isDarkThemeActive ? 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

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import {
+    Chart,
+    DARK_THEME,
+    LIGHT_THEME,
+    Partition,
+    PartitionLayout,
+    Position,
+    Settings,
+} from '@elastic/charts';
+
+import { AggregationResultsData } from '@/types';
+
+import { useOrchestratorTheme } from '../../../hooks';
+import { containerStyle } from './styles';
+
+export type WfoAgentPieChartProps = {
+    aggregationData: AggregationResultsData;
+};
+
+export function WfoAgentPieChart({ aggregationData }: WfoAgentPieChartProps) {
+    const { results } = aggregationData;
+    const { isDarkThemeActive, multiplyByBaseUnit } = useOrchestratorTheme();
+    const chartBaseTheme = isDarkThemeActive ? 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

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

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

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

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

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui';
+
+import { AggregationResult, AggregationResultsData } from '@/types';
+
+export type WfoAgentTableProps = {
+    aggregationData: AggregationResultsData;
+};
+
+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<AggregationResult>[] =
+        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<AggregationResult>[] =
+                groupKeys.map((key) => ({
+                    field: 'group_values' as keyof AggregationResult,
+                    name: formatColumnName(key),
+                    render: (_: unknown, record: AggregationResult) =>
+                        record.group_values[key],
+                }));
+
+            const aggColumns: EuiBasicTableColumn<AggregationResult>[] =
+                aggKeys.map((key) => ({
+                    field: 'aggregations' as keyof AggregationResult,
+                    name: formatColumnName(key),
+                    render: (_: unknown, record: AggregationResult) =>
+                        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

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

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

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiText } from '@elastic/eui';
+
+import { AggregationResultsData, VisualizationType } from '@/types';
+
+import { WfoAgentLineChart } from '../WfoAgentChart/WfoAgentLineChart';
+import { WfoAgentPieChart } from '../WfoAgentChart/WfoAgentPieChart';
+import { WfoAgentTable } from '../WfoAgentTable';
+
+export type WfoAgentVisualizationProps = {
+    aggregationData: AggregationResultsData;
+};
+
+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

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

package/src/components/WfoAgent/index.ts

@@ -1 +1,5 @@
 export * from './WfoAgent';
+export * from './WfoAgentTable';
+export * from './WfoAgentChart/WfoAgentLineChart';
+export * from './WfoAgentChart/WfoAgentPieChart';
+export * from './WfoAgentVisualization';

package/src/components/WfoForms/UserInputForm.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
 /*
  * Copyright 2019-2023 SURF.
  * Licensed under the Apache License, Version 2.0 (the "License");

package/src/components/WfoForms/formFields/AcceptField.tsx

@@ -114,8 +114,8 @@ function Accept({
                 state.skip
                     ? 'SKIPPED'
                     : state.allChecked
-                      ? 'ACCEPTED'
-                      : 'INCOMPLETE',
+                    ? 'ACCEPTED'
+                    : 'INCOMPLETE',
             );
 
             return { ...state };

package/src/components/WfoForms/formFields/ListSelectField.tsx

@@ -12,6 +12,7 @@
  * limitations under the License.
  *
  */
+
 /* NOTE: This component is only needed to avoid the circular import that started to be a problem
 after the upgrade to react-script 5.0. The original SelectField would import itself to handle the list:
 that seems to be impossible with the new webpack.

package/src/components/WfoForms/formFields/deprecated/ImsNodeIdField.tsx

@@ -80,8 +80,8 @@ function ImsNodeId({
         isLoading && locationCode
             ? t('widgets.node_select.nodes_loading')
             : nodes.length
-              ? t('widgets.node_select.select_node')
-              : t('forms.widgets.node_select.no_nodes_placeholder');
+            ? t('widgets.node_select.select_node')
+            : t('forms.widgets.node_select.no_nodes_placeholder');
 
     const imsNodeIdLabelLookup =
         nodes?.reduce<{ [index: string]: string }>(function (mapping, node) {