@orchestrator-ui/orchestrator-ui-components 5.9.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "5.9.0",
+    "version": "6.0.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -34,6 +34,10 @@
         "dev": "npm run build -- --watch"
     },
     "dependencies": {
+        "@ag-ui/client": "^0.0.39",
+        "@copilotkit/react-core": "^1.3.18",
+        "@copilotkit/react-ui": "^1.3.18",
+        "@copilotkit/runtime": "^1.3.18",
         "@elastic/eui": "101.3.0",
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.4",

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

@@ -0,0 +1,182 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiPanel,
+    EuiSpacer,
+    EuiText,
+} from '@elastic/eui';
+
+import { WfoBadge } from '@/components/WfoBadges';
+import { WfoPathBreadcrumb } from '@/components/WfoSearchPage/WfoSearchResults/WfoPathBreadcrumb';
+import {
+    getOperatorDisplay,
+    isCondition,
+} from '@/components/WfoSearchPage/utils';
+import { useWithOrchestratorTheme } from '@/index';
+import { AnySearchParameters, Condition, Group, PathDataType } from '@/types';
+
+import { getFilterDisplayStyles } from './styles';
+
+const DEPTH_INDENT = 16;
+
+type FilterDisplayProps = {
+    parameters: {
+        action?: AnySearchParameters['action'] | string;
+        entity_type?: AnySearchParameters['entity_type'] | string;
+        filters?: Group | null;
+        query?: string | null;
+    };
+};
+
+interface BetweenValue {
+    start?: string | number;
+    end?: string | number;
+    from?: string | number;
+    to?: string | number;
+}
+
+export function FilterDisplay({ parameters }: FilterDisplayProps) {
+    const t = useTranslations('agent.page');
+
+    const {
+        wrapStyle,
+        columnGroupWrapStyle,
+        chipStyle,
+        groupStyle,
+        operatorStyle,
+        valueStyle,
+    } = useWithOrchestratorTheme(getFilterDisplayStyles);
+    const { action, entity_type, filters, query } = parameters ?? {};
+
+    if (!parameters || Object.keys(parameters).length === 0) return null;
+
+    const sectionTitle = (text: string) => (
+        <EuiText size="xs" color="subdued">
+            <strong>{text}</strong>
+        </EuiText>
+    );
+
+    const formatFilterValue = (condition: Condition['condition']): string => {
+        if ('value' in condition && condition.value !== undefined) {
+            if (
+                condition.op === 'between' &&
+                condition.value &&
+                typeof condition.value === 'object'
+            ) {
+                const { start, end, from, to } =
+                    condition.value as BetweenValue;
+                const fromVal = start || from;
+                const toVal = end || to;
+                return `${fromVal} … ${toVal}`;
+            }
+            return String(condition.value);
+        }
+        return '—';
+    };
+
+    const renderFilterGroup = (group: Group, depth = 0): React.ReactNode => {
+        if (!group.children || group.children.length === 0) {
+            return (
+                <EuiText size="s" color="subdued">
+                    <em>{t('emptyGroup')}</em>
+                </EuiText>
+            );
+        }
+
+        const areChildrenGroups =
+            group.children.length > 0 && !isCondition(group.children[0]);
+
+        return (
+            <div css={groupStyle} style={{ marginLeft: depth * DEPTH_INDENT }}>
+                <div css={operatorStyle}>{group.op}</div>
+                <div css={areChildrenGroups ? columnGroupWrapStyle : wrapStyle}>
+                    {group.children.map((child, i) => (
+                        <div key={i}>
+                            {isCondition(child) ? (
+                                <div css={chipStyle}>
+                                    <WfoPathBreadcrumb
+                                        path={child.path}
+                                        size="s"
+                                        showArrows={true}
+                                    />
+                                    <WfoBadge
+                                        textColor="default"
+                                        color="hollow"
+                                    >
+                                        {
+                                            getOperatorDisplay(
+                                                child.condition.op,
+                                                child.value_kind
+                                                    ? {
+                                                          path: child.path,
+                                                          type: child.value_kind as PathDataType,
+                                                          operators: [],
+                                                          value_schema: {},
+                                                          group: 'leaf' as const,
+                                                      }
+                                                    : undefined,
+                                            ).symbol
+                                        }
+                                    </WfoBadge>
+                                    <span css={valueStyle}>
+                                        {formatFilterValue(child.condition)}
+                                    </span>
+                                </div>
+                            ) : (
+                                renderFilterGroup(child, depth + 1)
+                            )}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <EuiPanel hasBorder paddingSize="m">
+            <EuiFlexGroup gutterSize="m" wrap responsive>
+                <EuiFlexItem grow={false}>
+                    {sectionTitle(t('action'))}
+                    <EuiSpacer size="xs" />
+                    <WfoBadge textColor="default" color="hollow">
+                        {action || 'N/A'}
+                    </WfoBadge>
+                </EuiFlexItem>
+
+                <EuiFlexItem grow={false}>
+                    {sectionTitle(t('entityType'))}
+                    <EuiSpacer size="xs" />
+                    <WfoBadge textColor="default" color="hollow">
+                        {entity_type || 'N/A'}
+                    </WfoBadge>
+                </EuiFlexItem>
+
+                {query ? (
+                    <EuiFlexItem grow={false}>
+                        {sectionTitle(t('searchQuery'))}
+                        <EuiSpacer size="xs" />
+                        <EuiText size="s">
+                            <em>"{query}"</em>
+                        </EuiText>
+                    </EuiFlexItem>
+                ) : null}
+            </EuiFlexGroup>
+
+            <EuiSpacer size="m" />
+            {sectionTitle(t('activeFilters'))}
+            <EuiSpacer size="s" />
+
+            {filters && filters.children && filters.children.length > 0 ? (
+                renderFilterGroup(filters)
+            ) : (
+                <EuiText size="s" color="subdued">
+                    <em>{t('noFiltersApplied')}</em>
+                </EuiText>
+            )}
+        </EuiPanel>
+    );
+}

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

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

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

@@ -0,0 +1,62 @@
+import { css } from '@emotion/react';
+
+import { WfoTheme } from '@/hooks';
+
+export const getFilterDisplayStyles = ({ theme }: WfoTheme) => {
+    const wrapStyle = css({
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: theme.size.s,
+    });
+
+    const columnGroupWrapStyle = css({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.size.s,
+        alignItems: 'flex-start',
+    });
+
+    const chipStyle = css({
+        display: 'inline-flex',
+        alignItems: 'center',
+        borderRadius: theme.size.xl,
+        border: `1px solid ${theme.border.color}`,
+        backgroundColor: theme.colors.body,
+        padding: `${theme.size.s} ${theme.size.m}`,
+        lineHeight: 1.1,
+        gap: theme.size.s,
+    });
+
+    const groupStyle = css({
+        border: `1px solid ${theme.colors.lightShade}`,
+        borderRadius: theme.border.radius.medium,
+        padding: theme.size.s,
+        margin: theme.size.xs,
+        backgroundColor: theme.colors.body,
+    });
+
+    const operatorStyle = css({
+        fontFamily: theme.font.familyCode,
+        padding: `${theme.size.xs}px ${theme.size.s}px`,
+        borderRadius: theme.size.s,
+        backgroundColor: theme.colors.primary,
+        color: theme.colors.ghost,
+        fontSize: theme.size.m,
+        fontWeight: theme.font.weight.bold,
+        margin: `${theme.size.xs} 0`,
+    });
+
+    const valueStyle = css({
+        fontWeight: theme.font.weight.semiBold,
+        color: theme.colors.warning,
+    });
+
+    return {
+        wrapStyle,
+        columnGroupWrapStyle,
+        chipStyle,
+        groupStyle,
+        operatorStyle,
+        valueStyle,
+    };
+};

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

@@ -0,0 +1,100 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { useCoAgent } from '@copilotkit/react-core';
+import { CopilotSidebar } from '@copilotkit/react-ui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+
+import { WfoSearchResults } from '@/components/WfoSearchPage/WfoSearchResults';
+import { AnySearchParameters, AnySearchResult, PathFilter } from '@/types';
+
+import { FilterDisplay } from '../FilterDisplay';
+
+type SearchState = {
+    parameters: AnySearchParameters;
+    results: AnySearchResult[];
+};
+
+const initialState: SearchState = {
+    parameters: {
+        action: 'select',
+        entity_type: 'SUBSCRIPTION',
+        filters: [] as PathFilter[],
+        query: null,
+    },
+    results: [],
+};
+
+export function WfoAgent() {
+    const t = useTranslations('agent');
+    const tPage = useTranslations('agent.page');
+
+    const { state } = useCoAgent<SearchState>({
+        name: 'query_agent',
+        initialState,
+    });
+    const { parameters, results } = state;
+
+    const hasStarted = !!(
+        state.parameters &&
+        Array.isArray(state.parameters.filters) &&
+        state.parameters.filters.length > 0
+    );
+
+    const isLoadingResults =
+        hasStarted && (!state.results || state.results.length === 0);
+
+    const displayParameters = parameters && {
+        ...parameters,
+        filters: Array.isArray(parameters.filters)
+            ? { op: 'AND' as const, children: parameters.filters }
+            : parameters.filters,
+    };
+
+    return (
+        <EuiFlexGroup gutterSize="l" alignItems="stretch">
+            <EuiFlexItem grow={2}>
+                <EuiText>
+                    <h1>{t('title')}</h1>
+                </EuiText>
+
+                <EuiSpacer size="m" />
+                <EuiText size="s">
+                    <h2>{tPage('filledParameters')}</h2>
+                </EuiText>
+                <EuiSpacer size="s" />
+                {displayParameters && (
+                    <FilterDisplay parameters={displayParameters} />
+                )}
+
+                <EuiSpacer size="m" />
+                <EuiText size="s">
+                    <h2>
+                        {tPage('results')}{' '}
+                        {results ? `(${results.length})` : ''}
+                    </h2>
+                </EuiText>
+                <EuiSpacer size="s" />
+
+                <WfoSearchResults
+                    results={results ?? []}
+                    loading={isLoadingResults}
+                    selectedRecordIndex={-1}
+                    onRecordSelect={() => {}}
+                />
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={1}>
+                <CopilotSidebar
+                    defaultOpen
+                    clickOutsideToClose={false}
+                    labels={{
+                        title: tPage('copilot.title'),
+                        initial: tPage('copilot.initial'),
+                    }}
+                />
+            </EuiFlexItem>
+        </EuiFlexGroup>
+    );
+}

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

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

package/src/components/WfoAgent/index.ts

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