diff --git a/src/index.d.ts b/src/index.d.ts index 03634bfc9..43c2027c8 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -387,6 +387,7 @@ interface ChannelProps { renderChatHeader?: (props: RenderChatHeaderProps) => React.ReactNode; renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode; queries?: ChannelQueries; + replyType?: ReplyType; } interface sendBirdSelectorsInterface { getSdk: (store: SendBirdState) => SendBirdSelectors.GetSdk; @@ -448,6 +449,7 @@ interface AppProps { resizingWidth?: number | string, resizingHeight?: number | string, }; + replyType?: ReplyType; } interface ClientMessage { diff --git a/src/smart-components/App/stories/index.stories.js b/src/smart-components/App/stories/index.stories.js index 483dcce6d..0af0e787a 100644 --- a/src/smart-components/App/stories/index.stories.js +++ b/src/smart-components/App/stories/index.stories.js @@ -220,6 +220,7 @@ export const user2 = () => fitPageSize( showSearchIcon allowProfileEdit profileUrl={addProfile} + config={{ logLevel: 'all' }} replyType="QUOTE_REPLY" useMessageGrouping={false} imageCompression={{ @@ -238,6 +239,7 @@ export const user3 = () => fitPageSize( showSearchIcon allowProfileEdit profileUrl={addProfile} + config={{ logLevel: 'all' }} replyType="QUOTE_REPLY" /> ); @@ -251,6 +253,7 @@ export const user4 = () => fitPageSize( allowProfileEdit useMessageGrouping={false} profileUrl={addProfile} + config={{ logLevel: 'all' }} replyType="QUOTE_REPLY" /> ); diff --git a/src/ui/MessageContent/__tests__/MessageContent.spec.js b/src/ui/MessageContent/__tests__/MessageContent.spec.js index 4b0e8ef30..273c6e12b 100644 --- a/src/ui/MessageContent/__tests__/MessageContent.spec.js +++ b/src/ui/MessageContent/__tests__/MessageContent.spec.js @@ -72,7 +72,7 @@ describe('MessageContent', () => { component.find('.sendbird-message-content__left__avatar').hostNodes().exists() ).toBe(true); expect( - component.find('.sendbird-message-content__left__created-at').hostNodes().exists() + component.find('.sendbird-message-content__middle__body-container__created-at.left').hostNodes().exists() ).toBe(false); expect( component.find('.sendbird-message-content-menu.outgoing').hostNodes().exists() @@ -87,7 +87,7 @@ describe('MessageContent', () => { component.find('.sendbird-message-content__right.chain-top').hostNodes().exists() ).toBe(false); expect( - component.find('.sendbird-message-content__right__created-at').hostNodes().exists() + component.find('.sendbird-message-content__middle__body-container__created-at.right').hostNodes().exists() ).toBe(true); expect( component.find('.sendbird-message-content-menu.incoming').hostNodes().exists() @@ -198,10 +198,7 @@ describe('MessageContent', () => { outgoingMessage.find('.sendbird-message-content__left__avatar').hostNodes().exists() ).toBe(false); expect( - outgoingMessage.find('.sendbird-message-content__left__created-at').hostNodes().exists() - ).toBe(false); - expect( - outgoingMessage.find('.sendbird-message-content__right__created-at').hostNodes().exists() + outgoingMessage.find('.sendbird-message-content__middle__body-container__created-at').hostNodes().exists() ).toBe(false); const incomingMessage = mount( { incomingMessage.find('.sendbird-message-content__left__avatar').hostNodes().exists() ).toBe(false); expect( - incomingMessage.find('.sendbird-message-content__left__created-at').hostNodes().exists() - ).toBe(false); - expect( - incomingMessage.find('.sendbird-message-content__right__created-at').hostNodes().exists() + incomingMessage.find('.sendbird-message-content__middle__body-container__created-at').hostNodes().exists() ).toBe(false); }); diff --git a/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap b/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap index 8af93db64..220db1a05 100644 --- a/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap +++ b/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap @@ -80,25 +80,25 @@ exports[`MessageContent should do a snapshot test of the MessageContent DOM 1`]
-
- First second third - -
+

+ + + mock-date +
- - mock-date -
diff --git a/src/ui/MessageContent/index.scss b/src/ui/MessageContent/index.scss index d43af7890..7a243f143 100644 --- a/src/ui/MessageContent/index.scss +++ b/src/ui/MessageContent/index.scss @@ -36,11 +36,28 @@ flex-direction: column; max-width: 400px; align-items: flex-start; + + .sendbird-message-content__middle__body-container { + .sendbird-message-content__middle__body-container__created-at { + position: absolute; + bottom: 6px; + right: -84px; + white-space: nowrap; + display: flex; + flex-direction: row; + min-width: 80px; + &.supposed-hover { + display: none; + } + } + } + .sendbird-message-content__middle__sender-name { position: relative; margin-left: 12px; margin-bottom: 4px; } + .sendbird-message-content__middle__quote-message { position: relative; width: 100%; @@ -64,16 +81,6 @@ } } - .sendbird-message-content__right__created-at { - position: absolute; - bottom: 2px; - white-space: nowrap; - display: inline-flex; - &.supposed-hover { - display: none; - } - } - .sendbird-message-content-menu { position: relative; flex-direction: row; @@ -87,13 +94,17 @@ &:hover { .sendbird-message-content__right { - .sendbird-message-content__right__created-at { - display: none; - } .sendbird-message-content-menu { display: inline-flex; } } + .sendbird-message-content__middle { + .sendbird-message-content__middle__body-container { + .sendbird-message-content__middle__body-container__created-at { + display: none; + } + } + } } } @@ -112,20 +123,6 @@ } } - .sendbird-message-content__left__created-at { - position: absolute; - bottom: 2px; - right: 4px; - white-space: nowrap; - display: flex; - box-sizing: content-box; - min-width: 16px; - min-height: 16px; - &.supposed-hover { - display: none; - } - } - .sendbird-message-content-menu { position: absolute; top: 2px; @@ -144,6 +141,7 @@ flex-direction: column; max-width: 400px; align-items: flex-end; + .sendbird-message-content__middle__quote-message { position: relative; width: 100%; @@ -153,7 +151,27 @@ } .sendbird-message-content__middle__body-container { + position: relative; width: fit-content; + + .sendbird-message-content__middle__body-container__created-at { + position: absolute; + bottom: 2px; + left: -84px; + white-space: nowrap; + display: flex; + justify-content: flex-end; + box-sizing: content-box; + min-width: 80px; + min-height: 16px; + &.supposed-hover { + display: none; + } + .sendbird-message-content__middle__body-container__created-at__component-container { + position: relative; + display: inline-flex; + } + } } } @@ -163,19 +181,26 @@ &:hover { .sendbird-message-content__left { - .sendbird-message-content__left__created-at { - display: none; - } .sendbird-message-content-menu { display: inline-flex; } } + .sendbird-message-content__middle { + .sendbird-message-content__middle__body-container { + .sendbird-message-content__middle__body-container__created-at { + display: none; + } + } + } } } .sendbird-message-content__middle__body-container { position: relative; width: fit-content; + display: flex; + flex-direction: column; + .sendbird-message-content__middle__message-item-body { width: 100%; box-sizing: border-box; diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx index 5b81168cd..8bea1f590 100644 --- a/src/ui/MessageContent/index.tsx +++ b/src/ui/MessageContent/index.tsx @@ -132,15 +132,6 @@ export default function MessageContent({ )} /> )} - {(isByMe && !chainBottom) && ( -
- -
- )} {/* outgoing menu */} {isByMe && (
@@ -200,6 +191,18 @@ export default function MessageContent({ ) : null} {/* container: message item body + emoji reactions */}
+ {/* message status component */} + {(isByMe && !chainBottom) && ( +
+
+ +
+
+ )} {/* message item body components */} {isTextMessage(message as UserMessage) && (
)} + {(!isByMe && !chainBottom) && ( + + )}
{/* right */}
- {(!isByMe && !chainBottom) && ( - - )} {/* incoming menu */} {!isByMe && (
diff --git a/src/ui/MessageInput/index.jsx b/src/ui/MessageInput/index.jsx index a6dc6ecf5..72c590a62 100644 --- a/src/ui/MessageInput/index.jsx +++ b/src/ui/MessageInput/index.jsx @@ -79,7 +79,9 @@ const MessageInput = React.forwardRef((props, ref) => { }, [inputValue]); // clear input value when channel changes useEffect(() => { - setInputValue(''); + if (!isEdit) { + setInputValue(''); + } }, [channelUrl]); const sendMessage = () => { diff --git a/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap b/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap index dad1b13a1..1f1dc3c7b 100644 --- a/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap +++ b/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap @@ -4,9 +4,13 @@ exports[`OGMessageItemBody should do a snapshot test of the OGMessageItemBody DO
-
+ +

+

0 ? 'reactions' : '', ])}> -
- { - message?.message.split(' ').map((word: string) => ( - isUrl(word) - ? ( - - {word} - - ) - : ( - - ) - )) - } - { - isEditedMessage(message) && ( - - ) - } -
+
{ }))} /> ); - expect( - component.find('.sendbird-text-message-item-body__message').hostNodes().length - ).toBe(messageText.split(/\r/).length); expect( component.find('.sendbird-text-message-item-body__message.edited').hostNodes().exists() ).toBe(false); @@ -131,9 +128,6 @@ describe('TextMessageItemBody', () => { }))} /> ); - expect( - editedMessage.find('.sendbird-text-message-item-body__message').hostNodes().length - ).toBe(messageText.split(/\r/).length + 1); expect( editedMessage.find('.sendbird-text-message-item-body__message.edited').hostNodes().exists() ).toBe(true); diff --git a/src/ui/TextMessageItemBody/__tests__/__snapshots__/TextMessageItemBody.spec.js.snap b/src/ui/TextMessageItemBody/__tests__/__snapshots__/TextMessageItemBody.spec.js.snap index 83fb800db..3d8519e6e 100644 --- a/src/ui/TextMessageItemBody/__tests__/__snapshots__/TextMessageItemBody.spec.js.snap +++ b/src/ui/TextMessageItemBody/__tests__/__snapshots__/TextMessageItemBody.spec.js.snap @@ -1,18 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TextMessageItemBody should do a snapshot test of the TextMessageItemBody DOM 1`] = ` -
- First second third fourth fifth - - - (edited) - -
+ + (edited) + +

+ `; diff --git a/src/ui/TextMessageItemBody/index.scss b/src/ui/TextMessageItemBody/index.scss index 16d22c621..68a1b8312 100644 --- a/src/ui/TextMessageItemBody/index.scss +++ b/src/ui/TextMessageItemBody/index.scss @@ -6,6 +6,10 @@ box-sizing: content-box; padding: 8px 12px; border-radius: 16px; + + white-space: pre-line; + word-break: break-word; + &.reactions { border-radius: 16px 16px 0px 0px; } @@ -24,9 +28,8 @@ @include themed() { background-color: t(primary-4) } } } +} - .sendbird-text-message-item-body__message { - white-space: pre-wrap; - word-break: break-all; - } +p.sendbird-text-message-item-body { + margin: 0px; } diff --git a/src/ui/TextMessageItemBody/index.tsx b/src/ui/TextMessageItemBody/index.tsx index 7aed648bb..ebdddced1 100644 --- a/src/ui/TextMessageItemBody/index.tsx +++ b/src/ui/TextMessageItemBody/index.tsx @@ -24,40 +24,30 @@ export default function TextMessageItemBody({ }: Props): ReactElement { const { stringSet } = useContext(LocalizationContext); return ( -
0 ? 'reactions' : '', - ])}> - { - message?.message.split(/\r/).map((word) => ( - (word === '') - ?
- : ( - - ) - )) - } - { - isEditedMessage(message) && ( - - ) - } -
+ ); }