AmityUiKitChat - activate first channel in the list

Web
1

Hello,

Using AmityUiKitChat Web UI Kit is it possible to activate the first chat from the list by default? It looks a bit empty on the right so I would like to have the first chat/channel automatically selected.

Is there maybe a setting for this?

Thanks,
Lorand

2

Hello there! To customize the UIKIT and make the first channel automatically open when a user logs in, you’ll need to make some changes to the code in the
Amity-Social-Cloud-UIKit-Web-OpenSource/src/chat/components/RecentChat/index.js file.
Here are the steps to do that:

First, you’ll need to add an import statement for useState at the beginning of the file. Add this line to the top of the file along with other import statements:

import React, { useEffect, useState } from 'react';

Next, you’ll need to add some code inside the RecentChat component. Here’s the code you need to add:

const RecentChat = ({ onChannelSelect, onAddNewChannelClick, selectedChannelId }) => {
  // This line retrieves the list of channels, along with some additional information.
  const [channels, hasMore, loadMore] = useChannelsList();

  // This line initializes a state variable to keep track of whether the component has been initialized.
  const [hasInitialized, setHasInitialized] = useState(false);

  // This useEffect function will run when the component is first mounted and whenever 'channels' or 'hasInitialized' changes.
  useEffect(() => {
    // Check if the component hasn't been initialized and there are channels available.
    if (!hasInitialized && channels?.length) {
      // If the conditions are met, select the first channel in the list.
      onChannelSelect(channels[0]);
      
      // Mark the component as initialized to prevent this from happening again.
      setHasInitialized(true);
    }
  }, [channels, hasInitialized]);

  // The rest of your component code goes here...

  return (
    // JSX code for your component...
  );
};

That’s it! By adding this code, you’re ensuring that when the component loads and there are channels available, it will automatically select the first channel in the list and set the hasInitialized state to true to prevent it from happening again.

I hope this helps you customize the UIKIT as desired! If you have any more questions or need further assistance, feel free to ask.

3

Hey @naphat This works great! Thanks