Components

Utility Components

MML

This component accepts an MML string and renders it as React components.

If there are any stateful tag, it will gather all the inital states and and expose them in MMLContext.

It also accepts custom convertor which allows you to exapand the default tags and add more compoennts.

Properties

source

string

required

converters

Record<string, ConvertorType> | undefined

onSubmit

((data: Record<string, any>) => any) | undefined

theme

string | undefined

className

string | undefined

FunctionComponent<LoadingProps> | ComponentClass<LoadingProps, any> | null | undefined

Error

FunctionComponent<ErrorProps> | ComponentClass<ErrorProps, any> | null | undefined

Success

FunctionComponent<SuccessProps> | ComponentClass<SuccessProps, any> | null | undefined

Basic usage

MrLahey | Service

Hi Ricky. I am Mr. Lahey’s messaging assistant

So, what can I help you with?

9:47 am

<MML source="<mml>hi</mml>" />

<MML source="<mml>hi</mml>" />

Basic usage with stateful components

MrLahey | Service

Hi Ricky. I am Mr. Lahey’s messaging assistant

So, what can I help you with?

9:47 am

<MML
  source={`
    <mml name="windows_form" type="card">
      <image src="https://getstream.github.io/mml-react/public/window.jpg" />
      <number name="windows" value="12" />
      <button name="confirm" value="Confirm">Confirm</button>
    </mml>
  `}
/>

<MML
  source={`
    <mml name="windows_form" type="card">
      <image src="https://getstream.github.io/mml-react/public/window.jpg" />
      <number name="windows" value="12" />
      <button name="confirm" value="Confirm">Confirm</button>
    </mml>
  `}
/>

Callback support

If onSubmit callback return a promise, it will be awaited.

MrLahey | Service

Hi Ricky. I am Mr. Lahey’s messaging assistant

So, what can I help you with?

9:47 am

<MML
  onSubmit={data => console.info(data)}
  source={`
    <mml type="card">
      <input name="answer" label="Enter your phone number" placeholder="e.g. 999-999-9999"></input>
      <button name="action" value="submit">Submit</button>
    </mml>
  `}
/>

<MML
  onSubmit={data => console.info(data)}
  source={`
    <mml type="card">
      <input name="answer" label="Enter your phone number" placeholder="e.g. 999-999-9999"></input>
      <button name="action" value="submit">Submit</button>
    </mml>
  `}
/>

Different use cases

MrLahey | Service

Hi Ricky. I am Mr. Lahey’s messaging assistant

So, what can I help you with?

9:47 am

<MML
  source={`
    <mml>
      <text>Hi Jack, I'm painting John's house, looks like they also need some plumbing work, do any of these times work for you on Saturday?</text>
      <button_list>
        <button name="time" value="9:30">9:30</button>
        <button name="time" value="10:00">10:00</button>
        <button name="time" value="11:30">11:30</button>
        <button name="cancel" value="cancel">Cancel</button>
      </button_list>
    </mml>
  `}
/>

<MML
  source={`
    <mml>
      <text>Hi Jack, I'm painting John's house, looks like they also need some plumbing work, do any of these times work for you on Saturday?</text>
      <button_list>
        <button name="time" value="9:30">9:30</button>
        <button name="time" value="10:00">10:00</button>
        <button name="time" value="11:30">11:30</button>
        <button name="cancel" value="cancel">Cancel</button>
      </button_list>
    </mml>
  `}
/>

MrLahey | Service

Hi Ricky. I am Mr. Lahey’s messaging assistant

So, what can I help you with?

9:47 am

<MML
  source={`
    <mml>
      <text>Hi Jack, I'm painting John's house, looks like they also need some plumbing work, do any of these times work for you on Saturday?</text>
      <button_list>
        <button name="time" value="9:30">9:30</button>
        <button name="time" value="10:00">10:00</button>
        <button name="time" value="11:30">11:30</button>
        <button name="cancel" value="cancel">Cancel</button>
      </button_list>
    </mml>
  `}
/>

<MML
  source={`
    <mml>
      <text>Hi Jack, I'm painting John's house, looks like they also need some plumbing work, do any of these times work for you on Saturday?</text>
      <button_list>
        <button name="time" value="9:30">9:30</button>
        <button name="time" value="10:00">10:00</button>
        <button name="time" value="11:30">11:30</button>
        <button name="cancel" value="cancel">Cancel</button>
      </button_list>
    </mml>
  `}
/>

Invalid MML string

In case of an error, you can override default Error component

MrLahey | Service

Hi Ricky. I am Mr. Lahey’s messaging assistant

So, what can I help you with?

9:47 am

This chat message has invalid formatting and can't be shown

<MML
  source="<mml><invalid /></mml>"
  Error={({ error }) => <div style={{ color: 'red' }}>{error}</div>}
/>

<MML
  source="<mml><invalid /></mml>"
  Error={({ error }) => <div style={{ color: 'red' }}>{error}</div>}
/>

With `card` type

Shows the mml content inside a card like UI, see the Number component usage as a further example. It automatically wraps the mml components in a <div class="mml-card">...</div>.

MrLahey | Service

Hi Ricky. I am Mr. Lahey’s messaging assistant

So, what can I help you with?

9:47 am

<MML
  source={`
    <mml type="card">
      <input name="answer" label="Enter your phone number" placeholder="e.g. 999-999-9999"></input>
      <button name="action" value="submit">Submit</button>
    </mml>
  `}
/>

<MML
  source={`
    <mml type="card">
      <input name="answer" label="Enter your phone number" placeholder="e.g. 999-999-9999"></input>
      <button name="action" value="submit">Submit</button>
    </mml>
  `}
/>

MML

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Properties

Basic usage

Basic usage with stateful components

Callback support

Different use cases

Invalid MML string

With card type

Properties

With `card` type