Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Added messageStackDirection in Constant #405

Merged
merged 5 commits into from
Dec 17, 2024
+30 −18
Merged

feat: Added messageStackDirection in Constant #405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9fc159e
feat: Added messageStackDirection in Constant
liamcho Dec 17, 2024
f507a6a
minor
liamcho Dec 17, 2024
677f07f
minor
liamcho Dec 17, 2024
411e086
Update README.md
bang9 Dec 17, 2024
ca8770b
Merge branch 'develop' into feat/AC-4550-add-messageStackDirection-op…
liamcho Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 17 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,25 +108,26 @@ export default App;
```

### Available props
| Prop Name | Type | Required | Default Value | Description |
|-------------------------|-----------------------------------------|----------|---------------|----------------------------------------------------------------------------------------------------------------|
| `applicationId` | `string` | Yes | N/A | Your Sendbird application ID |
| `botId` | `string` | Yes | N/A | Your Sendbird bot ID | |
| `userNickName` | `string` | No | N/A | The nickname of the user | |
| `enableEmojiFeedback` | `boolean` | No | `true` | Enables emoji feedback functionality. |
| `enableMention` | `boolean` | No | `true` | Enables mention functionality. |
| `deviceType` | `'desktop' \| 'mobile'` | No | N/A | Device type to be used in the widget |
| `stringSet` | `{ [key: string]: string }` | No | N/A | Customizable string set. Available string sets can be found [here](https://github.com/sendbird/sendbird-uikit-react/blob/main/src/ui/Label/stringSet.ts). |
| `customRefreshComponent` | `{ icon: string, style: React.CSSProperties, width: string, height: string, onClick: () => void }` | No | N/A | Customizable refresh component. You can set properties such as `icon`, `style`, `width`, `height`, and `onClick`. |
| `userId` | `string` | No | N/A | User ID to be used in the widget connect. Must be used with `sessionToken` and `configureSession`. The example usage can be found [here](./custom-session-guide.md). |
| `sessionToken` | `string` | No | N/A | Session token to be used in the widget connect. Must be used with `userId` and `configureSession`. The example usage can be found [here](./custom-session-guide.md). |
| `configureSession` | `() => SessionHandler` | No | N/A | Session configuration function. Must be used with `userId` and `sessionToken`. The example usage can be found [here](./custom-session-guide.md). |
| `autoOpen` | `boolean` | No | N/A | Determines whether the chatbot widget automatically opens when the browser window is opened. This property is being ignored in mobile view. |
| `enableResetHistoryOnConnect` | `boolean` | No | `false` | Determines whether the chatbot widget history is reset when the user connects. |
| Prop Name | Type | Required | Default Value | Description |
|-------------------------|---------------------------------------|----------|------------|----------------------------------------------------------------------------------------------------------------|
| `applicationId` | `string` | Yes | N/A | Your Sendbird application ID |
| `botId` | `string` | Yes | N/A | Your Sendbird bot ID | |
| `userNickName` | `string` | No | N/A | The nickname of the user | |
| `enableEmojiFeedback` | `boolean` | No | `true` | Enables emoji feedback functionality. |
| `enableMention` | `boolean` | No | `true` | Enables mention functionality. |
| `deviceType` | `'desktop' \| 'mobile'` | No | N/A | Device type to be used in the widget |
| `stringSet` | `{ [key: string]: string }` | No | N/A | Customizable string set. Available string sets can be found [here](https://github.com/sendbird/sendbird-uikit-react/blob/main/src/ui/Label/stringSet.ts). |
| `customRefreshComponent` | `{ icon: string, style: React.CSSProperties, width: string, height: string, onClick: () => void }` | No | N/A | Customizable refresh component. You can set properties such as `icon`, `style`, `width`, `height`, and `onClick`. |
| `userId` | `string` | No | N/A | User ID to be used in the widget connect. Must be used with `sessionToken` and `configureSession`. The example usage can be found [here](./custom-session-guide.md). |
| `sessionToken` | `string` | No | N/A | Session token to be used in the widget connect. Must be used with `userId` and `configureSession`. The example usage can be found [here](./custom-session-guide.md). |
| `configureSession` | `() => SessionHandler` | No | N/A | Session configuration function. Must be used with `userId` and `sessionToken`. The example usage can be found [here](./custom-session-guide.md). |
| `autoOpen` | `boolean` | No | N/A | Determines whether the chatbot widget automatically opens when the browser window is opened. This property is being ignored in mobile view. |
| `enableResetHistoryOnConnect` | `boolean` | No | `false` | Determines whether the chatbot widget history is reset when the user connects. |
| `messageInputControls.blockWhileBotResponding` | `boolean \| number` | No | N/A | Allows to control enabled/disabled state of the message input for waiting for the bot's reply mesage. If number value is given, a timer will be set to force unblock the message input. |
| `dateLocale` | `Locale` | No | `enUS` | Locale value to be applied to string values of message timestamp and date separator. Locale values must be imported from `date-fns`. |
| `enableHideWidgetForDeactivatedUser` | `boolean` | No | `false` | Determines whether the chatbot widget is hidden when the user is deactivated. |
| `enableHideWidgetForDeactivatedUser` | `boolean` | No | `false` | Determines whether the chatbot widget is hidden when the user is deactivated. |
| `enableWidgetExpandButton` | `boolean` | No | `false` | Determines whether the expand button is displayed in the chatbot widget. |
| `messageStackDirection` | `'top' \| 'bottom'` | No | `'bottom'` | Determines direction at which message stack starts in the message list. |

## For internal contributors
- [Release guide](./release-guide.md)
11 changes: 9 additions & 2 deletions src/components/chat/ui/ChatMessageList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,14 @@ import { useTypingTargetMessageId } from '../hooks/useTypingTargetMessageId';

export const ChatMessageList = () => {
const { channel, dataSource, scrollSource, handlers } = useChatContext();
const { botStudioEditProps, customUserAgentParam, stringSet, dateLocale, enableMessageGrouping } = useConstantState();
const {
botStudioEditProps,
customUserAgentParam,
stringSet,
dateLocale,
enableMessageGrouping,
messageStackDirection = 'bottom',
} = useConstantState();

const typingTargetMessageId = useTypingTargetMessageId();
const { filteredMessages, shouldShowOriginalDate, renderBotStudioWelcomeMessages } = useBotStudioView();
Expand All @@ -42,7 +49,7 @@ export const ChatMessageList = () => {
scrollPositionRef={scrollSource.scrollPositionRef}
scrollDistanceFromBottomRef={scrollSource.scrollDistanceFromBottomRef}
onScrollPosition={(it) => scrollSource.setIsScrollBottomReached(it === 'bottom')}
stackDirection={'bottom'}
stackDirection={messageStackDirection}
messages={filteredMessages}
onLoadPrev={dataSource.loadPrevious}
onLoadNext={dataSource.loadNext}
Expand Down
4 changes: 4 additions & 0 deletions src/const.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,10 @@ export interface Constant extends ConstantFeatureFlags, ConstantAIFeatures, Cons
* @description Message input state controlling properties.
*/
messageInputControls?: MessageInputControls;
/**
* @public
* */
messageStackDirection?: 'top' | 'bottom';
/**
* @private
* @description Whether to show the beta mark.
Expand Down
Loading