Skip to main content
Use config.ui to override how each state renders, add a wrapper class, or replace the quick actions. 
interface MindWidgetUiConfig {
  className?: string;                  // extra class on the widget root
  components?: MindWidgetUiComponents; // override per-state components
  quickActions?: QuickAction[];        // override quick actions
}

​
Override a state component

Provide your own React component for any state. Each component receives MindWidgetStateComponentProps: 
import type {MindWidgetStateComponentProps} from '@ulesson-education/mind-sdk';

function MyEngageView(props: MindWidgetStateComponentProps) {
  const {state, context, currentNudge, isVisible, theme, actions, widget} = props;

  return (
    <div>
      <h2>How can I help?</h2>
      <button onClick={() => actions.transitionTo('idle')}>Close</button>
    </div>
  );
}

const config: MindConfig = {
  authCookieKey: 'session',
  ui: {
    components: {
      engage: MyEngageView,
      // idle, nudge, and 'deep-help' are also overridable
    },
  },
};

​
State component props

Every state component receives: 
interface MindWidgetStateComponentProps {
  state: WidgetState;
  context?: LearningContext;
  currentNudge?: NudgeData;
  isVisible: boolean;
  lastError?: Error;
  stateContext?: Record<string, unknown>;
  theme?: ThemeConfig;
  actions: MindWidgetUiActions;  // close, hide, show, toggle, transitionTo, updateContext
  widget: MindWidget;            // full imperative instance
}