Configuration reference

export type OpenCxComponentNameU =
  | 'ui_lib/btn'
  | 'trigger/btn'

  /* Sessions screen */
  | 'sessions/root'
  | 'sessions/header'
  | 'sessions/new_conversation_btn'

  /* Chat screen */
  | 'chat/root'
  | 'chat/header'
  | 'chat/main/root'
  | 'chat/canvas/root'
  | 'chat/msgs/root'

  /* Agent message */
  | 'chat/agent_msg_group/root'
  | 'chat/agent_msg_group/avatar_and_msgs/root'
  | 'chat/agent_msg_group/avatar_and_msgs/avatar'
  | 'chat/agent_msg_group/avatar_and_msgs/msgs'
  | 'chat/agent_msg_group/root/avatar'
  | 'chat/agent_msg_group/suggestions'
  | 'chat/agent_msg/root'
  | 'chat/agent_msg/msg'

  /* User message */
  | 'chat/user_msg_group/root'
  | 'chat/user_msg_group/avatar/root'
  | 'chat/user_msg/root'
  | 'chat/user_msg/msg'

  /* Chat input */
  | 'chat/input_box/root'
  | 'chat/input_box/inner_root'
  | 'chat/input_box/textarea_and_attachments_container'
  | 'chat/input_box/textarea'
  | 'chat/input_box/attachments_container'

  /* Chat utilities */
  | 'chat/bot_loading/root'
  | 'chat/bot_loading/bouncing_dots_container'
  | 'chat/suggested_reply_btn'
  | 'chat/might_solve_user_issue_suggested_replies_container';

{
  cssOverrides: `
    * {
      font-family: "Arial", sans-serif;
    }

    [data-component="ui_lib/btn"][data-variant="ghost"]:hover {
      background: rgba(68, 71, 70, 0.08);
    }

    [data-component="chat/agent_msg_group/root/avatar"] {
      border-width: 2px;
      border-color: white;
      display: initial;
    }
    [data-component="chat/agent_msg_group/avatar_and_msgs/avatar"] {
      display: none;
    }
    [data-component="chat/agent_msg_group/suggestions"] {
      padding-left: unset;
    }
  `,
}

export type TranslationInterface = {
  i_need_more_help: string;
  this_was_helpful: string;
  write_a_message_placeholder: string;
  your_issue_has_been_resolved: string;
  new_conversation: string;
  back_to_conversations: string;
  closed_conversations: string;
  no_conversations_yet: string;
  welcome_screen_title: string;
  welcome_screen_description: string;
  your_name_placeholder: string;
  your_email_placeholder: string;
  optional: string;
  start_chat_button: string;
  start_chat_button_loading: string;
};

{
  translationOverrides: {
    en: {
      i_need_more_help: `This didn't answer my question`,
      this_was_helpful: `It's all good!`,
    },
    ar: {
      start_chat_button: 'يلا ندردش',
    },
  },
}

type IconNameU =
  | 'Maximize'
  | 'Maximize2'
  | 'Minimize'
  | 'Minimize2'
  | 'Expand'
  | 'Shrink'
  | 'X'
  | 'SquareX'
  | 'CircleX'
  | 'Check'
  | 'CheckCheck'
  | 'CircleCheck'
  | 'CircleCheckBig'
  | 'SquareCheck'
  | 'SquareCheckBig';

type HeaderButtonBase = {
  icon?: IconNameU;
  hideOnSmallScreen?: boolean;
  hideOnLargeScreen?: boolean;
};

type HeaderButton =
  | (HeaderButtonBase & {
      functionality: 'expand-shrink';
      /** Overridden by HeaderButtonBase.icon if set. */
      expandIcon?: IconNameU;
      /** Overridden by HeaderButtonBase.icon if set. */
      shrinkIcon?: IconNameU;
    })
  | (HeaderButtonBase & {
      functionality: 'close-widget';
      /**
       * Side effect run on click. Overrides the default close behavior —
       * useful when the widget's open/closed state is controlled externally.
       */
      handleClick?: () => void;
    })
  | (HeaderButtonBase & {
      functionality: 'resolve-session';
      /** What happens after the session is resolved. @default 'stay-in-chat' */
      onResolved?:
        | 'stay-in-chat'
        | 'reset-chat'
        | 'close-widget'
        | 'reset-chat-and-close-widget';
      /** Optional confirmation dialog before resolving. */
      confirmation?: {
        type: 'modal';
        title?: string;
        description?: string;
        confirmButtonText?: string;
        cancelButtonText?: string;
      };
      /** Behavior before the session is created. @default 'disabled' */
      behaviorBeforeSessionCreation?: 'disabled' | 'close-widget';
      /** Behavior after the session is resolved. @default 'disabled' */
      behaviorIfSessionIsResolved?:
        | 'disabled'
        | 'reset-chat'
        | 'close-widget'
        | 'reset-chat-and-close-widget';
    });

{
  headerButtons: {
    sessionsScreen: [
      {
        functionality: 'expand-shrink',
        expandIcon: 'Expand',
        shrinkIcon: 'Shrink',
      },
    ],
    chatScreen: [
      {
        functionality: 'expand-shrink',
        expandIcon: 'Expand',
        shrinkIcon: 'Shrink',
      },
    ],
  },
}

{
  headerButtons: {
    chatScreen: [
      {
        functionality: 'resolve-session',
        icon: 'X',
        behaviorBeforeSessionCreation: 'close-widget',
        behaviorIfSessionIsResolved: 'reset-chat-and-close-widget',
        confirmation: {
          type: 'modal',
          title: 'Close conversation',
          description: 'Are you sure you want to close this conversation?',
          confirmButtonText: 'Yes',
          cancelButtonText: 'No',
        },
      },
    ],
  },
}

{
  headerButtons: {
    sessionsScreen: [
      {
        functionality: 'close-widget',
        icon: 'CircleX',
      },
    ],
    chatScreen: [
      {
        functionality: 'close-widget',
        icon: 'CircleX',
      },
    ],
  },
}

{
  advancedInitialMessages: [
    { message: 'Hello, how can I help you?', persistent: true },
    { message: 'Please select an option from the list below:', persistent: false },
  ],
}

{
  context: {
    page: { url: window.location.origin + window.location.pathname },
    product_id: '99836009',
    product_name: 'Ineffective painkiller',
    product_price: 12.99,
  },
}

{
  messageCustomData: {
    platform: 'MOBILE',
    version: '1.3.57',
  },
}

{
  sessionCustomData: {
    visit_id: '0199e212-d7fd-71d3-808b-48d860bfa469',
  },
}

{
  headers: {
    auth_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
  },
}

{
  queryParams: {
    session_id: '9de647ba-25b9-4d9e-b51a-7ab2f4c68d9d',
  },
}

{
  bodyProperties: {
    preferred_language: 'en',
  },
}

function Onboarding(props: ModeComponentProps) {
  const [monthlyVolume, setMonthlyVolume] = props.react.useState(0);
  const [targetMarket, setTargetMarket] = props.react.useState('');

  const handleSubmit = async () => {
    // Submit to your system here, then end the mode with a summary
    // message and an exit prompt for the AI.
    props.sendMessage({
      content: `My expected volume is ${monthlyVolume} per month.\nMy target market is ${targetMarket}`,
      exitModePrompt: `
        Tell the user something like this:
        "Great! I've now submitted your request.
        We are already checking whether you are eligible to join our service.
        We will notify you as soon as we review your request.
        You can always check the progress by looking at the notifications on the top right of your dashboard."
      `,
    });
  };

  return props.react.createElement(
    'div',
    null,
    props.react.createElement('input', {
      value: monthlyVolume,
      onChange: (e) => setMonthlyVolume(Number(e.target.value)),
    }),
    props.react.createElement('input', {
      value: targetMarket,
      onChange: (e) => setTargetMarket(e.target.value),
    }),
    props.react.createElement(
      'button',
      {
        onClick: handleSubmit,
        disabled: !monthlyVolume || !targetMarket || props.isSendingMessage,
      },
      'Submit',
    ),
  );
}

const options = {
  token: '<WIDGET_TOKEN>',
  modesComponents: [
    {
      key: 'onboarding',
      component: Onboarding,
    },
  ],
};

{
  accessibility: {
    widgetTriggerButton: {
      label: 'Open support chat',
    },
  },
}