Skip to content

Commit

Permalink
feat: Added messageStackDirection in Constant (#405)
Browse files Browse the repository at this point in the history 
## Changes
- 

ticket: [AC-4550]

## Additional Notes
- Added `messageStackDirection` in `Constant`

## Checklist
Before requesting a code review, please check the following:
- [ ] **[Required]** CI has passed all checks.
- [ ] **[Required]** A self-review has been conducted to ensure there
are no minor mistakes.
- [ ] **[Required]** Unnecessary comments/debugging code have been
removed.
- [ ] **[Required]** All requirements specified in the ticket have been
accurately implemented.
- [ ] Ensure the ticket has been updated with the sprint, status, and
story points.


[AC-4550]:
https://sendbird.atlassian.net/browse/AC-4550?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Hyungu Kang | Airen <[email protected]>
  • Loading branch information
@liamcho @bang9
liamcho and bang9 authored Dec 17, 2024
1 parent 86d1096 commit 429ee0f
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 18 deletions.
33 changes: 17 additions & 16 deletions README.md
View file
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
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
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

0 comments on commit 429ee0f

Please sign in to comment.