Skip to content

Commit e35e983

Browse files
stephl3stephl3
committed
docs(input-bar): README
1 parent 43204fc commit e35e983

File tree

1 file changed

+43
-38
lines changed

1 file changed

+43
-38
lines changed

‎chat/input-bar/README.md‎

Lines changed: 43 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -22,54 +22,59 @@ npm install @lg-chat/input-bar
2222

2323
## Example
2424

25-
### Compact
26-
27-
```tsx
28-
import { InputBar } from '@lg-chat/input-bar';
29-
import {
30-
LeafyGreenChatProvider,
31-
Variant,
32-
} from '@lg-chat/leafygreen-chat-provider';
33-
34-
return (
35-
<LeafyGreenChatProvider variant={Variant.Compact}>
36-
<InputBar />
37-
</LeafyGreenChatProvider>
38-
);
39-
```
40-
41-
### Spacious
42-
4325
```tsx
44-
import { InputBar } from '@lg-chat/input-bar';
26+
import { useState } from 'react';
27+
import { InputBar, State } from '@lg-chat/input-bar';
4528
import {
4629
LeafyGreenChatProvider,
4730
Variant,
4831
} from '@lg-chat/leafygreen-chat-provider';
4932

50-
return (
51-
<LeafyGreenChatProvider variant={Variant.Spacious}>
52-
<InputBar />
53-
</LeafyGreenChatProvider>
54-
);
33+
const Example = () => {
34+
const [state, setState] = useState<State>(State.Unset);
35+
36+
const handleMessageSend = (messageBody: string) => {
37+
console.log('Sending:', messageBody);
38+
setState(State.Loading);
39+
// Simulate API call
40+
};
41+
42+
const handleClickStop = () => {
43+
console.log('Stopping request');
44+
setState(State.Unset);
45+
// Cancel your API request here
46+
};
47+
48+
return (
49+
<LeafyGreenChatProvider variant={Variant.Compact}>
50+
<InputBar
51+
onMessageSend={handleMessageSend}
52+
onClickStop={handleClickStop}
53+
state={state}
54+
errorMessage="Failed to send message. Please try again."
55+
/>
56+
</LeafyGreenChatProvider>
57+
);
58+
};
5559
```
5660

5761
## Properties
5862

59-
| Prop | Type | Description | Default |
60-
| ----------------------------- | ---------------------------------------------- | ----------------------------------------------------------- | ------- |
61-
| `badgeText` | `string` | Determines the text inside the rendered Badge | |
62-
| `darkMode` | `boolean` | Determines if the component will render in dark mode | `false` |
63-
| `disabled` | `boolean` | Determines whether the user can interact with the InputBar | `false` |
64-
| `disableSend` | `boolean` | When defined as `true`, disables the send action and button | |
65-
| `errorMessage` | `ReactNode` | Custom error message to display when `state='error'` | |
66-
| `onMessageSend` | `(messageBody: string, e?: FormEvent) => void` | Submit event handler. | |
67-
| `shouldRenderGradient` | `boolean` | Toggles the gradient animation around the input | `true` |
68-
| `shouldRenderHotkeyIndicator` | `boolean` | Toggles the hotkey indicator on the right side of the input | `false` |
69-
| `textareaProps` | `TextareaAutosizeProps` | Props passed to the TextareaAutosize component. | |
70-
| `textareaRef` | `RefObject<HTMLTextAreaElement>` | Ref object to access the textarea element directly | |
71-
| `state` | `'unset' \| 'error' \| 'loading'` | The current state of the InputBar. | |
72-
| `...` | `HTMLElementProps<'form'>` | Props spread on the root element | |
63+
| Prop | Type | Description | Default |
64+
| ----------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------- |
65+
| `badgeText` | `string` | Determines the text inside the rendered Badge | |
66+
| `darkMode` | `boolean` | Determines if the component will render in dark mode | `false` |
67+
| `disabled` | `boolean` | Determines whether the user can interact with the InputBar | `false` |
68+
| `disableSend` | `boolean` | When defined as `true`, disables the send action and button | |
69+
| `errorMessage` | `ReactNode` | Custom error message to display when `state='error'` | |
70+
| `onClickStop` | `() => void` | Callback fired when the stop button is clicked during a loading state. Restores the previous message body. | |
71+
| `onMessageSend` | `(messageBody: string, e?: FormEvent) => void` | Callback fired when the user sends a message. | |
72+
| `shouldRenderGradient` | `boolean` | Toggles the gradient animation around the input | `true` |
73+
| `shouldRenderHotkeyIndicator` | `boolean` | Toggles the hotkey indicator on the right side of the input | `false` |
74+
| `textareaProps` | `TextareaAutosizeProps` | Props passed to the TextareaAutosize component. | |
75+
| `textareaRef` | `RefObject<HTMLTextAreaElement>` | Ref object to access the textarea element directly | |
76+
| `state` | `'unset' \| 'error' \| 'loading'` | The current state of the InputBar. | |
77+
| `...` | `HTMLElementProps<'form'>` | Props spread on the root element | |
7378

7479
## TextareaAutosizeProps
7580

0 commit comments

Comments
 (0)