Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface IProps<T>

Type parameters

  • T

Hierarchy

  • object
  • object
    • IProps

Index

Properties

Methods

Properties

Optional FooterComponent

FooterComponent: FooterComponent

A component that renders at the bottom of the list, above the user input. Can be used to provide suggested inputs values. The Suggestions component is often used here

Optional HeaderComponent

HeaderComponent: HeaderComponent

A component that renders at the top of the list. Can be used to render a button that loads data.

example
const ref: List<string> | undefined = undefined;
const load = () => {
  if (ref) {
    ref.load();
  }
}
const header = <Button title="Load old Messages" onPress={load} />
<List<string>
  ref={(instance: List<string>) => ref = instance}
  loadThreshold={0}
  HeaderComponent={header}
/>

Optional InputComponent

InputComponent: InputComponent

The input component. The Input component is often used here

Optional MessagesEmptyComponent

MessagesEmptyComponent: MessagesEmptyComponent

The component to render when the messages array is empty

Optional MessagesLoadingComponent

MessagesLoadingComponent: MessagesLoadingComponent | null

The component to render when old messages are being loaded. Defaults to an ActivityIndicator

Optional animate

animate: undefined | false | true

Determines if the list should animate messages into view

Optional extraData

extraData: any

As the component is pure, this can be used to force a re-render. Often used when derived components require the header and footer callbacks to re-run.

Optional hint

hint: ResponsesInit | null

The hint that is passed to the Input. Can be set to null to remove the input bar

Optional length

length: undefined | number

The length of the messages array. This can be set explicitly to force a re-render of the Chat. Usually, this isn't needed as the component does a check of the length after the onSend/onLoad/etc functions run (which often update the messages array)

Optional loadThreshold

loadThreshold: undefined | number

The percentage threshold to use when older messages should automatically be loaded. Can be set to 0 to prevent automatic invoking of onLoad. The Chat#load function can be used to explicitly invoke onLoad

messages

messages: MessagesImmutable<T>

The list of messages. The message at the start of the array is shown first.

The Chat only does a shallow comparison of the messages property. To force a re-render set the length property as well. By default, after the onSend/onLoad/etc callbacks the length of the array is checked to see if it has changed.

example
export interface IState {
  messages: Array<IMessageImmutable<string>>;
}

class MyComponent extends React.PureComponent<IProps, IState> {
  render(): React.ReactNode {
    return <Chat
      messages={this.state.messages}
      onInput={this.handleInput}
      onSend={this.handleSend}
    />
  }

  private readonly handleInput = async (
    { data, ...rest }: IMessageMutable<IInputImmutable>
  ): Promise<IMessageImmutable<string>> => {
    const text = isIUserInputText(data) ? data.text : 'Unsupported Input...';
    return { ...rest, data: text };
  }

  private readonly handleSend = async (message: IMessageImmutable<string>): Promise<void> {
    this.setState(({ messages }) => {
      // Put new messages on to the **front** of the array!
      messages.unshift(message);
      return { messages};
    });
  }
}

The component

user

user: string | IGuidImmutable

The unique user identification value for this chat

Methods

onInput

  • onInput(input: IMessageMutable<IInputMutable>): Promise<IMessageImmutable<T>>

  • Invoked when the chat list receives user input

    Parameters

    • input: IMessageMutable<IInputMutable>

      the input from the user

    Returns Promise<IMessageImmutable<T>>

    a message where the user input has been converted into the typed message

Optional onLoad

  • onLoad(): Promise<void>

  • Invoked when more historical messages should be loaded. This occurs on mount and then when the user has scrolled back through the list of messages. The loadThreshold property can be used to customise when the function gets invoked. It can also be set to 0 to prevent automatic loading and the explicit Chat#load function can be used to invoke this callback.

    Returns Promise<void>

onRenderMessage

  • onRenderMessage(message: IMessageImmutable<T>, index: number, disabled: boolean): Element

  • Performs rendering of a message. The user property can be used to determine if the message is from the current user by comparing it with the user property set on the component.

    Parameters

    • message: IMessageImmutable<T>

      the message data to render

    • index: number

      the index of the message that is being rendered in the messages array. 0 is the current message, increasing values are historical messages

    • disabled: boolean

      the state of the chat messages

    Returns Element

    a rendered element to display

onSend

  • onSend(message: IMessageImmutable<T>, input?: IInputImmutable): Promise<void>

  • Invoked when the message is to be sent. Usually this unshifts the message into the messages array.

    example
      readonly handleSend = async (message: IMessageImmutable<T>): Promise<void> {
    this.setState(({ messages }) => {
      // Put new messages on to the **front** of the array!
      messages.unshift(message);
      return { messages};
    });
  }
}

    Parameters

    • message: IMessageImmutable<T>

      the converted, fully formed, sent message

    • Optional input: IInputImmutable

      the raw user input that was used to create the message

    Returns Promise<void>

Optional onTranslateBegin

  • onTranslateBegin(value: number): void

  • Invoked when the translation starts. Will be invoked with the size of the incoming message

    Parameters

    • value: number

      the starting translation value

    Returns void

Optional onTranslateEnd

  • onTranslateEnd(value: number | undefined): void

  • Invoked when the translation ends

    Parameters

    • value: number | undefined

      the ending translation value. Will be undefined if the animation was cancelled

    Returns void