diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx index bfc63f74d..031b47838 100644 --- a/src/components/Chat.tsx +++ b/src/components/Chat.tsx @@ -25,7 +25,6 @@ const SBComponent = () => { userId, userNickName, configureSession, - enableEmojiFeedback, enableMention, customUserAgentParam, } = useConstantState(); @@ -76,7 +75,6 @@ const SBComponent = () => { configureSession={configureSession} customExtensionParams={userAgentCustomParams.current} breakPoint={isMobile} - isReactionEnabled={enableEmojiFeedback} isMentionEnabled={enableMention} theme={theme} colorSet={customColorSet} diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx index a75545a8b..08b43ba64 100644 --- a/src/components/CustomChannelComponent.tsx +++ b/src/components/CustomChannelComponent.tsx @@ -131,6 +131,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) { (lastMessage as ClientUserMessage)?.sender?.userId === botUser.userId; const [activeSpinnerId, setActiveSpinnerId] = useState(-1); + const messageCount = allMessages?.length ?? 0; const lastMessageMeta = useMemo(() => { let messageMeta: MessageMeta | null; @@ -151,7 +152,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) { const isStaticReplyVisible = allMessages && - allMessages.length > 1 && + messageCount > 1 && !(lastMessage?.messageType === 'admin') && lastMessage.sender?.userId === botUser.userId && // in streaming @@ -193,12 +194,12 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) { const grouppedMessages = useMemo( () => groupMessagesByShortSpanTime(allMessages), - [allMessages.length] + [messageCount] ); const botWelcomeMessages = useMemo(() => { return getBotWelcomeMessages(allMessages, botUser.userId); - }, [allMessages.length]); + }, [messageCount]); return ( {message.messageId === lastMessage.messageId && dynamicReplyOptions.length > 0 && ( diff --git a/src/components/CustomMessage.tsx b/src/components/CustomMessage.tsx index 8f3d51b21..e7ac42c40 100644 --- a/src/components/CustomMessage.tsx +++ b/src/components/CustomMessage.tsx @@ -1,6 +1,5 @@ import { User } from '@sendbird/chat'; import { UserMessage } from '@sendbird/chat/message'; -import { useChannelContext } from '@sendbird/uikit-react/Channel/context'; // eslint-disable-next-line import/no-unresolved import { EveryMessage } from 'SendbirdUIKitGlobal'; @@ -29,9 +28,10 @@ type Props = { activeSpinnerId: number; botUser: User; lastMessageRef: React.RefObject; + isBotWelcomeMessage: boolean; + messageCount: number; chainTop?: boolean; chainBottom?: boolean; - isBotWelcomeMessage: boolean; }; export default function CustomMessage(props: Props) { @@ -43,11 +43,10 @@ export default function CustomMessage(props: Props) { chainTop, chainBottom, isBotWelcomeMessage, + messageCount, } = props; const { replacementTextList, userId } = useConstantState(); - const { allMessages } = useChannelContext(); - // admin message if (message.messageType === 'admin') { return
{}
; @@ -60,7 +59,7 @@ export default function CustomMessage(props: Props) { botUser={botUser} message={message} bodyComponent={} - messageCount={allMessages.length} + messageCount={messageCount} chainTop={chainTop} chainBottom={chainBottom} isBotWelcomeMessage={isBotWelcomeMessage} @@ -111,7 +110,7 @@ export default function CustomMessage(props: Props) { bodyComponent={ } - messageCount={allMessages.length} + messageCount={messageCount} chainTop={chainTop} chainBottom={chainBottom} isBotWelcomeMessage={isBotWelcomeMessage} @@ -137,7 +136,7 @@ export default function CustomMessage(props: Props) { ` - width: ${(props: InputProps) => - props.isActive ? 'calc(100% - 66px)' : '100%'}; - transition: ${(props: InputProps) => - props.isActive ? 'none' : 'width 0.5s'}; - transition-timing-function: ease; - padding: 8px 16px; - resize: none; - border: none; - outline: none; - max-height: 116px; - background: #eeeeee; - border-radius: 20px; - height: auto; - ::placeholder { - color: var(--sendbird-dark-onlight-03); - } -`; - -const InputContainer = styled.div` - width: 100%; -`; - -const InnerContainer = styled.div` - padding: 12px 16px; - display: flex; - justify-content: space-between; - align-items: center; -`; - -const Button = styled.div` - padding: 4px; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - - svg { - path { - fill: ${({ theme }) => theme.accentColor}; - } - } -`; - -export function MessageInput({ - onSendMessage, -}: { - onSendMessage: (message: string) => void; -}) { - const inputRef = useRef(null); - const [showSendButton, setShowSendButton] = useState(false); - const [message, setMessage] = useState(''); - - useEffect(() => { - if (!message) { - setShowSendButton(false); - if (inputRef.current) { - inputRef.current.style.height = 'auto'; - } - } - }, [message]); - - const throttledIncrement = useThrottle((e?) => { - if (inputRef.current) { - inputRef.current.style.height = 'auto'; - inputRef.current.style.height = `${e.target.scrollHeight - 16}px`; - } - }, 10); - - function handleMessageChange(event: React.ChangeEvent) { - const value = event.target.value; - setMessage(value); - setShowSendButton(value.length > 0); - } - - function onPressEnter(event: React.KeyboardEvent) { - if (!event.shiftKey && event.charCode === 13) { - event.preventDefault(); - onSendMessage(message); - setMessage(''); - } - } - - return ( - - - - {showSendButton && ( - - )} - - - ); -} -export default function CustomMessageInput() { - const store = useSendbirdStateContext(); - const sendUserMessage = sendbirdSelectors.getSendUserMessage(store); - const { currentGroupChannel } = useChannelContext(); - - function sendInputAsUserMessage(message: string) { - if (message.length > 0 && currentGroupChannel) { - const params: UserMessageCreateParams = { - message, - }; - sendUserMessage(currentGroupChannel, params) - .onPending(() => { - // console.log('## onPending', message); - }) - .onSucceeded(() => { - // console.log('## onSucceeded', message); - }) - .onFailed(() => { - // console.log('## onFailed', error); - }); - } - } - return ( - { - sendInputAsUserMessage(message); - }} - /> - ); -} diff --git a/src/hooks/useChannelStyle.ts b/src/hooks/useChannelStyle.ts index 9f36b0e35..4d6942e4e 100644 --- a/src/hooks/useChannelStyle.ts +++ b/src/hooks/useChannelStyle.ts @@ -2,7 +2,6 @@ import { useQuery } from '@tanstack/react-query'; import { useMemo } from 'react'; const DEFAULT_CHANNEL_STYLE = { - autoOpen: true, theme: 'light', accentColor: '#742DDD', botMessageBGColor: '#EEEEEE', diff --git a/src/hooks/useSendLocalMessage.ts b/src/hooks/useSendLocalMessage.ts deleted file mode 100644 index 6a248d169..000000000 --- a/src/hooks/useSendLocalMessage.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { GroupChannel } from '@sendbird/chat/groupChannel'; -import { UserMessage } from '@sendbird/chat/message'; -import { useChannelContext } from '@sendbird/uikit-react/Channel/context'; -import { useCallback } from 'react'; - -import { scrollUtil } from '../utils'; - -type OnMessageRecivedPayload = { - channel: GroupChannel; - message: UserMessage; -}; - -type OnMessageRecivedDispatcher = ({ - type, - payload, -}: { - type: 'ON_MESSAGE_RECEIVED'; - payload: OnMessageRecivedPayload; -}) => void; - -export function useSendLocalMessage() { - const channelStore = useChannelContext(); - const currentGroupChannel = channelStore.currentGroupChannel; - // this is the magic function that adds the message to channelStore - const messagesDispatcher = - channelStore.messagesDispatcher as OnMessageRecivedDispatcher; - const useSendLocalMessage = useCallback( - (message: UserMessage) => { - if (currentGroupChannel) { - // https://github.com/sendbird/sendbird-uikit-react/blob/main/src/modules/Channel/context/dux/actionTypes.js - // dispatcher({ - // type: channelActions.ON_MESSAGE_DELETED, - // payload: messageId, - // }); // For deleting local message - messagesDispatcher({ - type: 'ON_MESSAGE_RECEIVED', - payload: { - channel: currentGroupChannel, - message, - }, - }); - scrollUtil(); - } - }, - [currentGroupChannel, messagesDispatcher] - ); - return useSendLocalMessage; -}