SendbirdでUIKit for Reactを利用する際に困ったこと
SendbirdでUIKit for Reactを利用し、既存のアプリケーションにチャットUIを組み込む際の困りポイントです。
特別言及がない限り、バージョンは3.15.3を利用していた時のものです。
🚨GroupChannelSettingsのMessageInputWrapperコンポーネントに日本語をペーストするとASCIIコードに変換される
対象コンポーネント
事象
- 日本語をコピーしてMessageInput欄にペーストするとASCIIコードに変換される
- アルファベットは問題なくペースト可能
対応策
あまり好ましくないのですが、useRefを使って要素を走査し、pasteイベントをカスタマイズすることで無理くり回避することはできました。
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
customPaste(inputRef);
}, [inputRef.current]);
const customPaste = (ref: React.RefObject<HTMLInputElement>) => {
if (ref.current) {
const elm = ref.current.getElementsByClassName('sendbird-message-input-text-field')[0];
elm.addEventListener('paste', (event) => {
event.stopPropagation();
event.preventDefault();
const paste = (event.clipboardData || window.clipboardData).getData('text');
const selection = window.getSelection();
if (selection && selection.rangeCount) {
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));
selection.collapseToEnd();
}
});
}
return (
<div ref={inputRef}>
<GroupChannelUI
renderMessageInput={() => <MessageInputWrapper />}
/>
</div>
)
🚨MessageSearchモジュールで2文字以上のひらがな検索ができない
対象コンポーネント
事象
- ひらがな2文字以上で検索すると条件にマッチするメッセージがヒットしない（1文字ならヒットする）
- カタカナは2文字以上でもヒットする
対応策
日本語検索を前提とする場合、現状MessageSearchモジュールの利用は難しいと感じます。
単一グループ内の検索であれば、PlatformAPIのsearchMessagesAPIを利用してコンポーネントごと開発するという方法が考えられます。
🚨Group channel settingsのLeaveChannelコンポーネントでUncaught Errorが発生する
該当CHANGELOG
事象
Group-channel-settingsコンポーネントを利用し、レンダリングさせようとすることで以下のエラーが発生します。
厳密に言うと、Group-channel-settings内のleavechannelレンダリング時に発生します。
react-dom.development.js:14169 Uncaught Error: MenuItemAction(...):
Nothing was returned from render. This usually means a return statement is missing.
Or, to render nothing, return null.
これはサンプルアプリケーション上では発生しておらず、GroupChannelUIなど他コンポーネントのカスタマイズとの組み合わせで発生します。
対応策
renderLeaveChannelでleavechannelコンポーネントをカスタマイズしてあげれば回避することができます。
<ChannelSettingsProvider
channelUrl={channel.url}
onCloseClick={() => onCloseClickAction()}
>
<ChannelSettingsUI
renderLeaveChannel={() => <Box/>}
/>
</ChannelSettingsProvider>
🚨Group channel listのチャンネル取得が不安定（時々no channels）になる
これはバージョンは3.15.3に上げる前に3.14.14を利用していた時発生していました。
直近の3.15.3リリースで修正がなされたので良かったですが、このようにクリティカルな問題もちらほらありそうです。
Fixed the issue where the channel list appears empty when the UIKit is rendered for the first time.
感想
今回はGroupChannel周りのモジュールを中心に触っていましたが、アプリケーションに組み込むにはところどころクリティカルな問題がまだ残っているように感じました。OpenChannel側は触っていないので、GroupChannel側でこれだけ問題があるとすれば、全体としてはまだ未成熟感があるのかなあと思います。
とはいえ、UIKitを利用することによって結果的にアプリケーションへの組み込みはかなり早くなったと感じます。
全てスクラッチで構築しようとすると、動画のプレビューやリプライ（スレッド）表示、リアクション（スタンプ）、既読表示など、チャット画面だけでも開発しなければいけない細かな部分が沢山あります。
コンポーネント単位でカスタマイズできるようになっているので、うまくスクラッチしていく部分と組み合わせて使いこなしていくのが良いかと思います。
また、MessageSearchモジュールやMessageInputWrapperコンポーネントでの問題など日本語対応が遅れているようにも見受けられますが、Localization機能におけるテキストの置き換えなど抜け漏れはなさそうでしたし、sendbird社と打ち合わせをする際にも日本語ネイティブな通訳を用意してくださったりとかなり気を遣ってくれているように感じました。
Discussion