Message List

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

    const getOnThreadRepliesClick = () => {
      //your custom actions
     }

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          onThreadRepliesClick={getOnThreadRepliesClick}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

   function handleError(error: CometChat.CometChatException) {
      throw new Error("your custom error action");
    }

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          onError={handleError}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          messagesRequestBuilder={new CometChat.MessagesRequestBuilder().setLimit(5)}
        />
      </div>
    ) : null;
  }

mport {CometChatMessageEvents, CometChatUIEvents} from "@cometchat/chat-uikit-react";

const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe(
() => {
// Your Code
}
);

const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(
() => {
// Your Code
}
);

const ccMessageDeleted = CometChatMessageEvents.ccMessageDeleted.subscribe(
() => {
// Your Code
}
);

const ccActiveChatChanged = CometChatUIEvents.ccActiveChatChanged.subscribe(
() => {
// Your Code
}
);

const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(
() => {
// Your Code
}
);

const ccLiveReaction = CometChatMessageEvents.ccLiveReaction.subscribe(
() => {
// Your Code
}
);

ccMessageEdited?.unsubscribe();
ccActiveChatChanged?.unsubscribe();

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList, MessageListStyle } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

    const messageListStyle = new MessageListStyle({
      background:"transparent",
      border:"1px solid black",
      borderRadius:"20px",
      height:"100%",
      width:"100%",
      loadingIconTint:"red",
      nameTextColor:"pink",
      threadReplyTextColor:"green"
    });

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          messageListStyle={messageListStyle}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList, AvatarStyle } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

  const avatarStyle = new AvatarStyle({
    backgroundColor:"#cdc2ff",
    border:"2px solid #6745ff",
    borderRadius:"10px",
    outerViewBorderColor:"#ca45ff",
    outerViewBorderRadius:"5px",
    nameTextColor:"#4554ff"
  })

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          avatarStyle={avatarStyle}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList, DateStyle } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

  const dateSeparatorStyle = new DateStyle({
    backgroundColor: "#cdc2ff",
    border: "2px solid #6745ff",
    borderRadius: "15px",
  });

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
           dateSeparatorStyle={dateSeparatorStyle}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList, EmojiKeyboardStyle } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

  const emojiKeyboardStyle = new EmojiKeyboardStyle({
    background:'red',
    border:'2px solid green',
    borderRadius:'15px',
    activeIconTint:'yellow',
    textColor:'#8830f2'
  });

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          emojiKeyboardStyle={emojiKeyboardStyle}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          hideError={true}
          hideReceipt={true}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList, CometChatTheme, ChatConfigurator, CometChatActionsIcon } from "@cometchat/chat-uikit-react";

export function MessageListDemo() {
  const [chatUser, setChatUser] = React.useState<CometChat.User>()
  React.useEffect(() => {
    CometChat.getUser("uid").then((user) => {
      setChatUser(user);
    })
  }, [])

  const getCustomOptions = (
    loggedInUser: CometChat.User,
    message: CometChat.BaseMessage,
    theme: CometChatTheme,
    group?: CometChat.Group
  ) => {
    const defaultOptions: any =
      ChatConfigurator.getDataSource().getMessageOptions(
        loggedInUser,
        message,
        theme,
        group
      );
    const myView: any = new CometChatActionsIcon({
      id: "custom id",
      title: "your custom title for options",
      iconURL: "your custom icon url for options",
      iconTint: "#7316f5",
      onClick: () => console.log("custom action"),
    });
    defaultOptions.push(myView);
    return defaultOptions;
  };

  const getTemplates = () => {
    let templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
    templates.map((data) => {
      data.options = (
        loggedInUser: CometChat.User,
        message: CometChat.BaseMessage,
        theme: CometChatTheme,
        group?: CometChat.Group
      ) => getCustomOptions(loggedInUser, message, theme, group);
    });
    return templates;
  };

  return chatUser ? (
    <div>
      <CometChatMessageList
        user={chatUser}
        templates={getTemplates()}
      />
    </div>
  ) : null;
}

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList, DatePatterns } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          DateSeparatorPattern={DatePatterns.DateTime}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList, DatePatterns } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          datePattern={DatePatterns.DateTime}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

  const getHeaderView = () => {
    return (
      <div style={{ height: '40px', width: '100px', background: '#a46efa', borderRadius: '20px', display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px' }}>
        <button style={{ height: '40px', width: '40px', background: '#a46efa', border: 'none', display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: "pointer" }}>
          <img src="img" style={{ height: 'auto', width: '100%', maxWidth: '100%', maxHeight: '100%', borderRadius: '50%' }} alt="bot" />
          <span>Chat Bot</span>
        </button>
      </div>
    )
  }

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          headerView={getHeaderView()}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])

  const getFooterView = () => {
    return (
      <div style={{ height: '40px', width: '100px', background: '#a46efa', borderRadius: '20px', display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px' }}>
        <button style={{ height: '40px', width: '40px', background: '#a46efa', border: 'none', display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: "pointer" }}>
          <img src="img" style={{ height: 'auto', width: '100%', maxWidth: '100%', maxHeight: '100%', borderRadius: '50%' }} alt="bot" />
          <span>Chat Bot</span>
        </button>
      </div>
    )
  }

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          footerview={getFooterView()}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])
    const getErrorStateView = () => {
      return(
        <div style={{height:"100vh", width:"100vw"}}>
          <img src="custom image" alt="error icon" style=  {{height:"100px", width:"100px", marginTop:"250px", justifyContent:"center"}}></img>
        </div>
      );
    };

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          errorStateView={getErrorStateView()}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])
    const getEmptyStateView = () => {

    return(
      <div>
        Your Custom Empty State
      </div>
    );
  };

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          emptyStateView={getEmptyStateView()}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList, LoaderStyle } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])
  const getLoadingStateView = () => {
    const getLoaderStyle = new LoaderStyle({
      iconTint: "#890aff",
      background:"transparent",
      height: "100vh",
      width: "100vw",
      border: "none",
      borderRadius: "0",
    });
    return(
      <cometchat-loader
      iconURL="your custom icon url"
      loaderStyle={JSON.stringify(getLoaderStyle)}
      ></cometchat-loader>
    );
  };


    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          loadingStateView={getLoadingStateView()}
        />
      </div>
    ) : null;
  }

import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
import DialogHelper from "./Dialog";
import { CometChat } from "@cometchat/chat-sdk-javascript";

class ShortcutFormatter extends CometChatTextFormatter {
  private shortcuts: { [key: string]: string } = {};
  private dialogIsOpen: boolean = false;
  private dialogHelper = new DialogHelper();
  private currentShortcut: string | null = null; // Track the currently open shortcut

  constructor() {
    super();
    this.setTrackingCharacter("!");
    CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
      .then((data: any) => {
        if (data && data.shortcuts) {
          this.shortcuts = data.shortcuts;
        }
      })
      .catch((error) => console.log("error fetching shortcuts", error));
  }

  onKeyDown(event: KeyboardEvent) {
    const caretPosition =
      this.currentCaretPosition instanceof Selection
        ? this.currentCaretPosition.anchorOffset
        : 0;
    const textBeforeCaret = this.getTextBeforeCaret(caretPosition);

    const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
    if (match) {
      const shortcut = match[0];
      const replacement = this.shortcuts[shortcut];
      if (replacement) {
        // Close the currently open dialog, if any
        if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
          this.closeDialog();
        }
        this.openDialog(replacement, shortcut);
      }
    }
  }

  getCaretPosition() {
    if (!this.currentCaretPosition?.rangeCount) return { x: 0, y: 0 };
    const range = this.currentCaretPosition?.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    return {
      x: rect.left,
      y: rect.top,
    };
  }

  openDialog(buttonText: string, shortcut: string) {
    this.dialogHelper.createDialog(
      () => this.handleButtonClick(buttonText),
      buttonText
    );
    this.dialogIsOpen = true;
    this.currentShortcut = shortcut;
  }

  closeDialog() {
    this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog
    this.dialogIsOpen = false;
    this.currentShortcut = null;
  }

  handleButtonClick = (buttonText: string) => {
    if (this.currentCaretPosition && this.currentRange) {
      // Inserting the replacement text corresponding to the shortcut
      const shortcut = Object.keys(this.shortcuts).find(
        (key) => this.shortcuts[key] === buttonText
      );
      if (shortcut) {
        const replacement = this.shortcuts[shortcut];
        this.addAtCaretPosition(
          replacement,
          this.currentCaretPosition,
          this.currentRange
        );
      }
    }
    if (this.dialogIsOpen) {
      this.closeDialog();
    }
  };

  getFormattedText(text: string): string {
    return text;
  }

  private getTextBeforeCaret(caretPosition: number): string {
    if (
      this.currentRange &&
      this.currentRange.startContainer &&
      typeof this.currentRange.startContainer.textContent === "string"
    ) {
      const textContent = this.currentRange.startContainer.textContent;
      if (textContent.length >= caretPosition) {
        return textContent.substring(0, caretPosition);
      }
    }
    return "";
  }
}

export default ShortcutFormatter;

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList, MessageInformationStyle } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])
  const messageInformationStyle = new MessageInformationStyle({
    background:"#f7f2fa",
    border:"2px solid #d895fc",
    borderRadius:"20px",
    captionTextColor:"#8629e3",
    titleTextColor:"#908deb",
  })

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          messageInformationConfiguration={new MessageInformationConfiguration({
          messageInformationStyle: messageInformationStyle
          })}
        />
      </div>
    ) : null;
  }

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList, ReactionsStyle, ReactionsConfiguration } from "@cometchat/chat-uikit-react";

  export function MessageListDemo() {
    const [chatUser, setChatUser] = React.useState<CometChat.User>()
    React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
            setChatUser(user);
        })
    }, [])
  const reactionsStyle = new ReactionsStyle({
    border:'2px solid #8742f5',
    activeReactionBackground:'#b88cff',
    background:'#7b34ed',
    baseReactionBackground:'#ebe3ff',
    borderRadius:'20px'
  })

    return chatUser ? (
      <div>
        <CometChatMessageList
          user={chatUser}
          reactionsConfiguration={new ReactionsConfiguration({
          reactionsStyle: reactionsStyle
          //properties of reactions
        })}
        />
      </div>
    ) : null;
  }