import { useState } from 'react';
import { InputBar, State } from '@lg-chat/input-bar';

const Example = () => {
  const [state, setState] = useState<State>(State.Unset);

  const handleMessageSend = (messageBody: string) => {
    console.log('Sending:', messageBody);
    setState(State.Loading);
    // Simulate API call
  };

  const handleClickStopButton = () => {
    console.log('Stopping request');
    setState(State.Unset);
    // Cancel your API request here
  };

  return (
    <InputBar
      onMessageSend={handleMessageSend}
      onClickStopButton={handleClickStopButton}
      state={state}
      errorMessage="Failed to send message. Please try again."
    />
  );
};

Compound Components

InputBar.AdditionalActions

import { useState } from 'react';
import { InputBar, State } from '@lg-chat/input-bar';
import { Button } from '@leafygreen-ui/button';

const Example = () => {
  const [state, setState] = useState<State>(State.Unset);

  const handleMessageSend = (messageBody: string) => {
    console.log('Sending:', messageBody);
    setState(State.Loading);
    // Simulate API call
  };

  return (
    <InputBar onMessageSend={handleMessageSend}>
      <InputBar.AdditionalActions>
        <Button onClick={() => console.log('Attach clicked')}>
          Attach file
        </Button>
      </InputBar.AdditionalActions>
    </InputBar>
  );
};

Properties

InputBar

Prop	Type	Description	Default
`darkMode`	`boolean`	Determines if the component will render in dark mode	`false`
`disabled`	`boolean`	Determines whether the user can interact with the InputBar	`false`
`disableSend`	`boolean`	When defined as `true`, disables the send action and button
`errorMessage`	`ReactNode`	Custom error message to display when `state='error'`
`onClickStopButton`	`() => void`	Callback fired when the stop button is clicked during a loading state. Restores the previous message body.
`onMessageSend`	`(messageBody: string, e?: FormEvent) => void`	Callback fired when the user sends a message.
`textareaProps`	`TextareaAutosizeProps`	Props passed to the TextareaAutosize component.
`textareaRef`	`RefObject<HTMLTextAreaElement>`	Ref object to access the textarea element directly
`state`	`'unset' \| 'error' \| 'loading'`	The current state of the InputBar.
`...`	`HTMLElementProps<'form'>`	Props spread on the root element

InputBar.AdditionalActions

Prop	Type	Description	Default
`children`	`ReactNode`	Content to render in the additional actions container. Appears to the left of send/stop button.
`...`	`HTMLElementProps<'div'>`	Props spread on the container div element

TextareaAutosizeProps

Prop	Type	Description	Default
`maxRows`	`number`	maximum number of rows to display	14
`minRows`	`number`	minimum number of rows to display	1

See react-textarea-autosize docs for more props