Input.chat

AWS CDK

Source

Displays an input field that can be used to interact with a chatbot.

Input.chat(props)

Usage

lib/MyStack.ts

import { ButtonizeApp, Input } from '@buttonize/cdk'

new ButtonizeApp(this, 'DemoApp', {
  name: 'Demo App'
}).page('DemoPage', {
  body: [
    Input.chat({
      id: 'chatInput',
      onMessage: {
        type: 'sendMessage',
        content: 'Hello, World!'
      },
      placeholder: 'Type your message...',
    })
  ]
})

Preview

app.buttonize.io

Props

id

Required

string

The name of the variable containing the selected option. This variable can then be referenced elsewhere in your Buttonize app.

onMessage

Required

function

A function to invoke when the user submits a message

placeholder

Optional

string

Placeholder for the input field.

disabled

Optional

boolean

Whether or not the input is disabled. Default is false.

spacingTop

Optional

’sm’ | ‘md’ | ‘lg’ | ‘xl’

The amount of space to give above the component.

spacingBottom

Optional

’sm’ | ‘md’ | ‘lg’ | ‘xl’

The amount of space to give below the component.

width

Optional

1 | 2 | 3 | 4

The width of the component.