lg-chat Input Bar
npm install @lg-chat/input-bar``shell`
pnpm add @g-chat/input-bar
`shell`
yarn add @lg-chat/input-bar
`shell`
npm install @lg-chat/input-bar
`tsx
import { useState } from 'react';
import { InputBar, State } from '@lg-chat/input-bar';
const Example = () => {
const [state, setState] = useState
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 (
onClickStopButton={handleClickStopButton}
state={state}
errorMessage="Failed to send message. Please try again."
/>
);
};
`
#### InputBar.AdditionalActions
`tsx
import { useState } from 'react';
import { InputBar, State } from '@lg-chat/input-bar';
import { Button } from '@leafygreen-ui/button';
const Example = () => {
const [state, setState] = useState
const handleMessageSend = (messageBody: string) => {
console.log('Sending:', messageBody);
setState(State.Loading);
// Simulate API call
};
return (
);
};
`
| 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 | 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 | |
| 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 | |
| Prop | Type | Description | Default |
| --------- | -------- | --------------------------------- | ------- |
| maxRows | number | maximum number of rows to display | 14 |minRows
| | number` | minimum number of rows to display | 1 |