bug: Lost Member in channel after open Thread

[minhth1529]

Describe the bug

After upgrade to v11.23.6 fix the bug character markdown affect lost data in channel.state.members.

I'm using it to allow typing, please help to fix it

To Reproduce

Steps to reproduce the behavior:

1. Upgrade to 11.23.6
2. Click on reply button aim to open Thread
3. members data in channel.state.members was lost

Expected behavior

keep data members like before upgrade

Screenshots

Package version

• stream-chat-react: v11.23.6
• stream-chat-js: v8.39.0

[vihan85]

@MartinCupela
I got the same issue

[TMuthu]

I am also facing the same issue. If i reply to the thread messages, then in the channel data, i am not getting members and few other fields data.

const { channel } = useChannelStateContext()

[MartinCupela]

Hey team, could you please try to upgrade to the newest versions of the SDK and the client? Testing on the latest versions and cannot reproduce the issue. Steps performed:

1. click on the reply button next to a message
2. check the presence of an object channel.state.members confirmed
3. send a reply in a thread
4. check the presence of an object channel.state.members confirmed

[minhth1529]

Hi @MartinCupela you need us try with the last version SDK?

[MartinCupela]

I cannot reproduce it with the latest version so I expect the upgrade should solve your issue.

[minhth1529]

Hi @MartinCupela I tried it and it's still occur, please take a look video.

https://drive.google.com/drive/folders/167QQMg3l8bb18NhBo0wH6wbMxGlnSwFi

stream-chat-react: v12.5.0
stream-chat: v8.42.0

[minhth1529]

@MartinCupela can you reproduce yet?

[MartinCupela]

I cannot reproduce this issue. Sounds like there is happening something more on your side.

[minhth1529]

@MartinCupela currently, i'm using "stream-chat-react": "^11.23.5" after upgrade to ^11.23.6 it's occur, so I reverted it not occur, take a look https://drive.google.com/drive/folders/167QQMg3l8bb18NhBo0wH6wbMxGlnSwFi

[MartinCupela]

@minhth1529 the only video available at the above link is about call session. Please bear in mind that I will probably not be able to debug an issue that is not reproducible in a example app using the default SDK components from a video showing what is shown on the above screenshots.

[MartinCupela]

@minhth1529 in order to proceed with this request I would need some more details on how to reproduce the issue.

[vihan85]

Hi @MartinCupela,

Currently, i'm using "stream-chat-react": "^11.23.5" after upgrade to ^12.5.2 it's occur, so I reverted it not occur, take a look https://drive.google.com/drive/folders/10XF7L_XOWrFm0IJ6hzN8CoIvmv4fghV9

[MartinCupela]

Hey @vihan85 ,

I have recorded the steps you demonstrated in your latest video using the latest version of the source code. I am logging the channel state inside MessageSimple component. As you can see, the members array is present even if I open a thread. I think this may be an integration issue on your side, but I have not setup where could I reproduce it.

dX14.webm

[vihan85]

Hi @MartinCupela,

After double check, I founded the field was lost after using

await client.getThread(threadId, {
      reply_limit: 0 // optional
    });

Version:
stream-chat-react: v12.5.2
stream-chat: v8.44.0

Video:
https://drive.google.com/drive/folders/1C-Gk1qNj_fvgNk51cnrgOWkJ3AayGtZ2

Steps:
1/ Custom ThreadHeader component

2/ Use client.getThread in Custom ThreadHeader component

const ThreadHeader: React.FC<ThreadHeaderProps> = ({ closeThread, thread }) => {
  //-----------HOOKS-----------
  const { client } = useChatContext();
  // ---------- STATE ----------
  const [threadState, setThread] = useState<Thread>();
  //-----------VARIABLES-----------
  const threadId = thread?.id;
  const isThreadForm = isNumber(thread?.reply_count) && thread?.reply_count === 0;
  const title = isThreadForm ? thread.text : threadState?.data.title;
  const ticketInternalId = get(threadState, 'data.metadata.crm.ticket_internal_id', undefined);
  //-----------function-----------
  const getCurrentThread = useCallback(async () => {
    const threadResponse = await client.getThread(threadId, {
      reply_limit: 0 // optional
    });

    setThread(threadResponse);

    // eslint-disable-next-line
  }, [client]);

  useEffect(() => {
    if (!isThreadForm) {
      getCurrentThread().then();
    }
    // eslint-disable-next-line
  }, [threadId]);

  return (
    <div className="str-thread__header flex items-center justify-between rounded-tr-2xl border border-x-0 border-t-0 border-solid border-[#d3d3d3] bg-white px-3 pb-4 pt-3">
      <div>
        <div className={'text-base font-bold'}>{isThreadForm ? 'Create thread' : 'Thread'}</div>
        <Tooltip placement={'leftBottom'} title={title}>
          <p className={'mb-1.5 min-h-4 max-w-48 truncate text-[#979797]'}>{title}</p>
        </Tooltip>
      </div>
      <Space split={<Divider className={'bg-[var(--border-color)]'} type="vertical" />}>
        {!isThreadForm && <ViewThreadTicketButton ticketInternalId={ticketInternalId} />}

        <Button
          type={'text'}
          shape={'circle'}
          icon={<CloseOutlined className={'text-[#979797] transition-all duration-300 ease-in-out hover:text-[#151515]'} />}
          onClick={closeThread}
        />
      </Space>
    </div>
  );
};

[MartinCupela]

Hello @vihan85 , why are you:

1. using client.getThread?
2. why are you querying with reply limit set to 0?

The Thread component already loads the replies for a given message.

[vihan85]

Hello @MartinCupela,

• Because I would like to update the topic title , to get thread title i have to use client.getThread with number of latest replies to fetch per thread >= 0 instead defaul is 2

Steps I took to create a threaded and custom the title:

Step 1: Create thread

 await channel.sendMessage({
    text: "The thread has been created. at 11/20/2024 11:46 AM",
    parent_id: parentID,
    show_in_channel: false,
});

Step 2: update thread title

 client.partialUpdateThread(parentID, {
  set: {
    title: thread title'
  },
})

Step 3: At Thread header component i use code below just to get the title

await client.getThread(threadId, {
      reply_limit: 0 // optional
    });

you can take a look: https://drive.google.com/drive/folders/15_HyF1qHaIgT1hPvkCaejvrHLHFcqMdn

[MartinCupela]

Hello @vihan85 may I ask you to prepare a repro in a codesandbox forked from this codesandbox? That way I would have something to work with

[vihan85]

Hello @MartinCupela

After double check, I think it is not bug because when i passed key member_limit?: number follow your PR below, I got the results I wanted. But I don't understand the purpose of allow hydrating thread's channel with an empty members list what to do?

await client.getThread(threadId, {
      reply_limit: 0 ,
      member_limit: 10
    });

fix: allow hydrating thread's channel with an empty members list#1359