Headless widget setup and hooks

import type {
  WidgetComponentProps,
  WidgetComponentType,
} from '@opencx/widget-react-headless';

export function TextMessage(props: WidgetComponentProps) {
  if (props.type === 'SYSTEM') return null;
  return <p>{props.data.message}</p>;
}

export const components: WidgetComponentType[] = [
  { key: 'fallback', component: TextMessage },
  { key: 'bot_message', component: TextMessage },
  { key: 'agent_message', component: TextMessage },
];

import { WidgetProvider } from '@opencx/widget-react-headless';
import type { ExternalStorage } from '@opencx/widget-core';
import { components } from './widget-components';
import { CustomWidget } from './CustomWidget';

const storage: ExternalStorage = {
  async get(key) { return localStorage.getItem(key); },
  async set(key, value) { localStorage.setItem(key, value); },
  async remove(key) { localStorage.removeItem(key); },
};

export function Support() {
  return (
    <WidgetProvider
      options={{ token: '<WIDGET_TOKEN>', streaming: false }}
      components={components}
      storage={storage}
      loadingComponent={<p>Loading support…</p>}
      errorComponent={() => <p>Support could not load. Please try again.</p>}
    >
      <CustomWidget />
    </WidgetProvider>
  );
}

import { useState } from 'react';
import {
  useMessages,
  useSessions,
  useWidget,
} from '@opencx/widget-react-headless';

export function CustomWidget() {
  const { messagesState, sendMessage } = useMessages();
  const { sessionState } = useSessions();
  const { componentStore } = useWidget();
  const [text, setText] = useState('');
  const [failed, setFailed] = useState(false);
  const disabled = messagesState.isSendingMessage ||
    sessionState.session?.isOpened === false;

  return (
    <section aria-label="Support">
      {messagesState.messages.map((message) => {
        if (message.type === 'USER') {
          return <p key={message.id}>{message.content}</p>;
        }
        if (message.type === 'SYSTEM') return null;
        const Component = componentStore.getComponent(message.component) ??
          componentStore.getComponent('fallback');
        return Component ? <Component key={message.id} {...message} /> : null;
      })}
      <form onSubmit={async (event) => {
        event.preventDefault();
        if (disabled || !text.trim()) return;
        setFailed(false);
        try {
          await sendMessage({ content: text });
          setText('');
        } catch {
          setFailed(true);
        }
      }}>
        <input
          aria-label="Message"
          value={text}
          disabled={disabled}
          onChange={(event) => setText(event.target.value)}
        />
        <button disabled={disabled || !text.trim()}>Send</button>
      </form>
      {failed && <p role="alert">Message could not be sent. Please try again.</p>}
    </section>
  );
}

import { polyfillGlobal } from 'react-native/Libraries/Utilities/PolyfillFunctions';
import structuredClone from '@ungap/structured-clone';
import { TextDecoderStream } from '@stardazed/streams-text-encoding';

if (!('structuredClone' in globalThis)) {
  polyfillGlobal('structuredClone', () => structuredClone);
}
if (!('TextDecoderStream' in globalThis)) {
  polyfillGlobal('TextDecoderStream', () => TextDecoderStream);
}

import '../polyfills';

import { fetch as expoFetch } from 'expo/fetch';
import { WidgetProvider } from '@opencx/widget-react-headless';

<WidgetProvider
  components={components}
  options={{
    token: '<WIDGET_TOKEN>',
    streaming: true,
    streamingFetch: expoFetch as typeof fetch,
  }}
>
  <YourChat />
</WidgetProvider>;

import { useEffect } from 'react';
import { AppState } from 'react-native';
import { useAgentChatUi } from '@opencx/widget-react-headless';

export function ResumeOnForeground() {
  const { resumeInterruptedTurn } = useAgentChatUi();
  useEffect(() => {
    const subscription = AppState.addEventListener('change', (state) => {
      if (state === 'active') resumeInterruptedTurn();
    });
    return () => subscription.remove();
  }, [resumeInterruptedTurn]);
  return null;
}

import type { WidgetComponentProps } from '@opencx/widget-react-headless';

export function BalanceMessage(props: WidgetComponentProps) {
  if (props.type !== 'AI') return null;
  const result = props.data.action?.data;
  if (typeof result !== 'object' || result === null ||
      !('balance' in result) || typeof result.balance !== 'number' ||
      !('currency' in result) || typeof result.currency !== 'string') {
    return <p>{props.data.message}</p>;
  }
  return <p>{result.balance} {result.currency}</p>;
}