@orchestrator-ui/orchestrator-ui-components 7.5.1 → 7.7.0

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

@@ -1,99 +0,0 @@
-import React from 'react';
-
-import { EuiSpacer, EuiText } from '@elastic/eui';
-
-import { WfoBadge } from '@/components/WfoBadges';
-import { WfoPathBreadcrumb } from '@/components/WfoSearchPage/WfoSearchResults/WfoPathBreadcrumb';
-
-interface DiscoverFilterPathsResult {
-  status?: string;
-  leaves?: Array<{
-    paths?: string[];
-    name?: string;
-  }>;
-}
-
-type DiscoverFilterPathsDisplayProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  result?: any;
-  parameters: {
-    field_names?: string[];
-    entity_type?: string;
-  };
-};
-
-export const DiscoverFilterPathsDisplay = ({ parameters, result }: DiscoverFilterPathsDisplayProps) => {
-  const { field_names = [] } = parameters;
-
-  const foundFields: [string, DiscoverFilterPathsResult][] =
-    result ?
-      Object.entries(result as Record<string, DiscoverFilterPathsResult>).filter(
-        ([, fieldResult]) => fieldResult.status !== 'NOT_FOUND',
-      )
-    : [];
-
-  // Count total paths across all found fields
-  const totalPaths = foundFields.reduce((count, [, fieldResult]) => {
-    const pathCount =
-      fieldResult.leaves?.reduce((leafCount: number, leaf) => {
-        return leafCount + (leaf.paths?.length || 1);
-      }, 0) || 0;
-    return count + pathCount;
-  }, 0);
-
-  return (
-    <div>
-      {field_names.length > 0 && (
-        <>
-          <EuiText size="xs" color="subdued">
-            Looking for{' '}
-            {field_names.map((name, idx) => (
-              <React.Fragment key={name}>
-                {idx > 0 && ', '}
-                <WfoBadge color="hollow" textColor="default">
-                  {name}
-                </WfoBadge>
-              </React.Fragment>
-            ))}
-          </EuiText>
-          <EuiSpacer size="s" />
-        </>
-      )}
-
-      {result && totalPaths > 0 && (
-        <div>
-          <EuiText size="xs" color="subdued">
-            <strong>
-              Found {totalPaths} path
-              {totalPaths > 1 ? 's' : ''}:
-            </strong>
-          </EuiText>
-          <EuiSpacer size="xs" />
-          {foundFields.map(([fieldName, fieldResult]) => (
-            <div key={fieldName} style={{ marginBottom: '8px' }}>
-              {fieldResult.leaves
-                && fieldResult.leaves.length > 0
-                && fieldResult.leaves.map((leaf, leafIdx: number) => {
-                  const paths = leaf.paths || (leaf.name ? [leaf.name] : []);
-                  return (
-                    <React.Fragment key={leafIdx}>
-                      {paths.map((path: string, pathIdx: number) => (
-                        <div
-                          key={pathIdx}
-                          style={{
-                            marginBottom: '4px',
-                          }}
-                        >
-                          <WfoPathBreadcrumb path={path} size="s" />
-                        </div>
-                      ))}
-                    </React.Fragment>
-                  );
-                })}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};

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

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
-
-import { WfoBadge } from '@/components/WfoBadges';
-
-type RunSearchDisplayProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  result?: any;
-  parameters: {
-    limit?: number;
-  };
-};
-
-export const RunSearchDisplay = ({ parameters }: RunSearchDisplayProps) => {
-  const { limit = 10 } = parameters;
-
-  return (
-    <div>
-      <EuiFlexGroup gutterSize="s" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiText size="xs" color="subdued">
-            <strong>Results Limit</strong>
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <WfoBadge textColor="default" color="hollow">
-            {limit}
-          </WfoBadge>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
-  );
-};

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

@@ -1,62 +0,0 @@
-import { css } from '@emotion/react';
-
-import { WfoThemeHelpers } from '@/hooks';
-
-export const getFilterDisplayStyles = ({ theme }: WfoThemeHelpers) => {
-  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.backgroundBasePlain,
-    padding: `${theme.size.s} ${theme.size.m}`,
-    lineHeight: 1.1,
-    gap: theme.size.s,
-  });
-
-  const groupStyle = css({
-    border: `1px solid ${theme.colors.borderBaseSubdued}`,
-    borderRadius: theme.border.radius.medium,
-    padding: theme.size.s,
-    margin: theme.size.xs,
-    backgroundColor: theme.colors.backgroundBasePlain,
-  });
-
-  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.textGhost,
-    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/ToolProgress/SetFilterTreeDisplay.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-
-import { useTranslations } from 'next-intl';
-
-import { 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 '@/hooks';
-import { Condition, Group, PathDataType } from '@/types';
-
-import { getFilterDisplayStyles } from './SetFilterTreeDisplay.styles';
-
-const DEPTH_INDENT = 16;
-
-interface BetweenValue {
-  start?: string | number;
-  end?: string | number;
-  from?: string | number;
-  to?: string | number;
-}
-
-type SetFilterTreeDisplayProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  result?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  parameters: any;
-};
-
-export const SetFilterTreeDisplay = ({ parameters }: SetFilterTreeDisplayProps) => {
-  const t = useTranslations('agent.page');
-  const { wrapStyle, columnGroupWrapStyle, chipStyle, groupStyle, operatorStyle, valueStyle } =
-    useWithOrchestratorTheme(getFilterDisplayStyles);
-
-  // Parameters might be the Group directly, or wrapped in a filters property
-  const filters = (parameters?.filters || parameters) as Group;
-
-  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>
-    );
-  };
-
-  if (!filters || !filters.children || filters.children.length === 0) {
-    return (
-      <EuiText size="s" color="subdued">
-        <em>{t('noFiltersApplied')}</em>
-      </EuiText>
-    );
-  }
-
-  return <div>{renderFilterGroup(filters)}</div>;
-};

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

@@ -1,60 +0,0 @@
-import React from 'react';
-
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
-
-import { WfoBadge } from '@/components/WfoBadges';
-
-type StartNewSearchDisplayProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  result?: any;
-  parameters: {
-    entity_type?: string;
-    action?: string;
-    query?: string;
-  };
-};
-
-export const StartNewSearchDisplay = ({ parameters }: StartNewSearchDisplayProps) => {
-  const { entity_type, action, query } = parameters;
-
-  return (
-    <div>
-      <EuiFlexGroup gutterSize="s" wrap>
-        {entity_type && (
-          <EuiFlexItem grow={false}>
-            <EuiText size="xs" color="subdued">
-              <strong>Entity Type</strong>
-            </EuiText>
-            <EuiSpacer size="xs" />
-            <WfoBadge textColor="default" color="hollow">
-              {entity_type}
-            </WfoBadge>
-          </EuiFlexItem>
-        )}
-        {action && (
-          <EuiFlexItem grow={false}>
-            <EuiText size="xs" color="subdued">
-              <strong>Action</strong>
-            </EuiText>
-            <EuiSpacer size="xs" />
-            <WfoBadge textColor="default" color="hollow">
-              {action}
-            </WfoBadge>
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-      {query && (
-        <>
-          <EuiSpacer size="s" />
-          <EuiText size="xs" color="subdued">
-            <strong>Query</strong>
-          </EuiText>
-          <EuiSpacer size="xs" />
-          <EuiText size="s">
-            <em>"{query}"</em>
-          </EuiText>
-        </>
-      )}
-    </div>
-  );
-};

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

@@ -1,98 +0,0 @@
-import React, { useState } from 'react';
-
-import { useTranslations } from 'next-intl';
-
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
-
-import { useWithOrchestratorTheme } from '@/hooks';
-import { useOrchestratorTheme } from '@/hooks/useOrchestratorTheme';
-import { WfoCheckmarkCircleFill, WfoChevronDown, WfoChevronUp, WfoXCircleFill } from '@/icons';
-import { WfoWrench } from '@/icons/heroicons';
-
-import { DiscoverFilterPathsDisplay } from './DiscoverFilterPathsDisplay';
-import { RunSearchDisplay } from './RunSearchDisplay';
-import { SetFilterTreeDisplay } from './SetFilterTreeDisplay';
-import { StartNewSearchDisplay } from './StartNewSearchDisplay';
-import { getToolProgressStyles } from './styles';
-
-type ToolProgressProps = {
-  name: string;
-  status: 'executing' | 'inProgress' | 'complete' | 'failed';
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  args?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  result?: any;
-};
-
-// Mapping of tool names to their display components
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TOOL_DISPLAY_COMPONENTS: Record<string, React.ComponentType<any>> = {
-  set_filter_tree: SetFilterTreeDisplay,
-  start_new_search: StartNewSearchDisplay,
-  run_search: RunSearchDisplay,
-  discover_filter_paths: DiscoverFilterPathsDisplay,
-};
-
-export const ToolProgress = ({ name, status, args, result }: ToolProgressProps) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const tPage = useTranslations('agent.page');
-
-  const { containerStyle, containerClickableStyle, headerStyle, nameStyle, expandedContentStyle, iconSize, iconStyle } =
-    useWithOrchestratorTheme(getToolProgressStyles);
-
-  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 <WfoCheckmarkCircleFill color={theme.colors.success} width={iconSize} height={iconSize} />;
-    }
-    if (status === 'inProgress' || status === 'executing') {
-      return <EuiLoadingSpinner size="s" />;
-    }
-    if (status === 'failed') {
-      return <WfoXCircleFill color={theme.colors.danger} width={iconSize} height={iconSize} />;
-    }
-    return null;
-  };
-
-  const DisplayComponent = TOOL_DISPLAY_COMPONENTS[name];
-  const hasContent = DisplayComponent && (args || result);
-
-  return (
-    <div css={containerStyle}>
-      <div css={hasContent && containerClickableStyle} onClick={() => hasContent && setIsExpanded(!isExpanded)}>
-        <EuiFlexGroup gutterSize="m" alignItems="center" css={headerStyle}>
-          <EuiFlexItem grow={false}>
-            <div css={iconStyle}>
-              <WfoWrench width={iconSize} height={iconSize} />
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem grow={true}>
-            <span css={nameStyle}>{getToolLabel(name)}</span>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false} style={{ minWidth: `${iconSize}px` }}>
-            {renderStatus()}
-          </EuiFlexItem>
-          <EuiFlexItem grow={false} style={{ minWidth: `${iconSize}px` }}>
-            {hasContent
-              && (isExpanded ?
-                <WfoChevronUp width={iconSize} height={iconSize} />
-              : <WfoChevronDown width={iconSize} height={iconSize} />)}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </div>
-      {hasContent && isExpanded && (
-        <div css={expandedContentStyle}>
-          <DisplayComponent parameters={args} result={result} />
-        </div>
-      )}
-    </div>
-  );
-};

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

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

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

@@ -1,52 +0,0 @@
-import { css } from '@emotion/react';
-
-import { WfoThemeHelpers } from '@/hooks';
-
-export const getToolProgressStyles = ({ theme }: WfoThemeHelpers) => {
-  const containerStyle = css({
-    border: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
-    borderRadius: theme.border.radius.medium,
-    backgroundColor: theme.colors.backgroundBaseNeutral,
-    transition: `all ${theme.animation.normal} ease`,
-    maxWidth: '50%',
-    marginRight: 'auto',
-  });
-
-  const containerClickableStyle = css({
-    cursor: 'pointer',
-    '&:hover': {
-      borderColor: theme.colors.primary,
-      backgroundColor: theme.colors.backgroundBasePlain,
-    },
-  });
-
-  const headerStyle = css({
-    padding: `${theme.size.base} ${theme.size.l}`,
-  });
-
-  const nameStyle = css({
-    fontSize: theme.size.m,
-    fontWeight: theme.font.weight.medium,
-  });
-
-  const expandedContentStyle = css({
-    borderTop: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
-    padding: `${theme.size.base} ${theme.size.l}`,
-  });
-
-  const iconSize = 18;
-
-  const iconStyle = css({
-    color: theme.colors.textSubdued,
-  });
-
-  return {
-    containerStyle,
-    containerClickableStyle,
-    headerStyle,
-    nameStyle,
-    expandedContentStyle,
-    iconSize,
-    iconStyle,
-  };
-};