CallChatComposite "is typing" is missing "user"

[lovedota]

Hi Team

I am using

    "@azure/communication-calling": "^1.24.3",
    "@azure/communication-common": "^2.3.1",
    "@azure/communication-identity": "^1.3.1",
    "@azure/communication-react": "^1.16.0",

When other users typing, the ChatUI is missing user in is typing

Screenshot

[JoshuaLai]

Thanks @lovedota I will begin looking into this issue and keep you posted on what we find

[JoshuaLai]

Hey @lovedota I am having some trouble reproducing this on our end with our sample app, can you share a code snippet of how you are using the CallWithChat composite and passing in the display name?

[lovedota]

Hi @JoshuaLai Do we any guideline how to run the samples in https://github.com/Azure/communication-ui-library ? I tried but it is not working

I also tried to debug the display name. Everything is passing correctly.

[JoshuaLai]

Hi @lovedota in our contribution guide we have a quick page on it: https://github.com/Azure/communication-ui-library/blob/main/docs/contributing-guide/3.%20running-a-sample-or-storybook.md Typically we favour / recommend using rush commands instead of npm. The reason is that our rushx commands just group and chain a bunch of npm commands together for easier use.

[JoshuaLai]

Just trying to think about things that may be causing things problem. It looks like you have confirmed that you are assigning the display name into the adapter correctly. Are you doing anything with the stateful layer that to override the send message like this: https://azure.github.io/communication-ui-library/?path=/docs/statefulclient-overview--page#access-the-chat-thread-client You can also listen on our adapter the typingIndicatorReceived event and console log the sender display name.

One side note, I don't think this applies to you, but we have a known issue on the Android browsers the typing indicators do not work as expected.

[lovedota]

Hi @JoshuaLai I cannot find the typingIndicatorReceived in the adapter.

[JoshuaLai]

@lovedota Sorry this was my mistake I was looking at our internal ChatContext. Our composite has a method onRenderTypingIndicator https://azure.github.io/communication-ui-library/?path=/docs/composites-chat-custombehaviorexample--custom-behavior-example#chat-composite-props

In that method, we send a props back with all the participants that a currently typing, are you able to verify that in that callback you get the display name returned back to you properly?

[lovedota]

Hi @JoshuaLai CallWithChatComposite doesn't have onRenderTypingIndicator callback, only ChatComposite has

export declare interface ChatCompositeProps extends BaseCompositeProps<ChatCompositeIcons> {
    /**
     * An adapter provides logic and data to the composite.
     * Composite can also be controlled using the adapter.
     */
    adapter: ChatAdapter;
    /**
     * `(messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element`
     * A callback for customizing the message renderer.
     */
    onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;
    /**
     * `(typingUsers: CommunicationParticipant[]) => JSX.Element`
     * A callback for customizing the typing indicator renderer.
     */
    onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;
    /**
     * Flags to enable/disable visual elements of the {@link ChatComposite}.
     */
    options?: ChatCompositeOptions;
}

[JoshuaLai]

@lovedota we should always be able to access the underlying ChatAdapter methods and State from within CallWithChat.

const handler = (state: CallWithChatAdapterState): void => { console.log(state.chat?.typingIndicators); }; callWithChatAdapter.onStateChange(handler);

This might help you debug and confirm that the underlying users display name is set correct.

[lovedota]

Hi @JoshuaLai It seems that the senderDisplayName is empty, i just wonder if it is empty how does the video-tile showing exactly the name of all the participants ?

[JoshuaLai]

Hi @lovedota I wanted to ask if you are using the Rooms feature in your sample? Is it possible for you to show us a small code sample of how you are init-ing the call with chat composite as well to help you debug further.

[JoshuaLai]

Hi @lovedota was wondering if you are still running into issues? And follow up on the above comments? If you have managed to resolve the issue, feel free to let us know and we can close this issue.

[AmyL219]

Close the issue right now since long time no response. Please be free to re-open the issue if you have more questions