Function MessageView

src/components/ConversationView/MessageView.tsx:20–179

(props: Props)

}

const MessageView = (props: Props) => {
  const message = props.message;
  const { data: session } = useSession();
  const { t } = useTranslation();
  const settingStore = useSettingStore();
  const userStore = useUserStore();
  const conversationStore = useConversationStore();
  const connectionStore = useConnectionStore();
  const messageStore = useMessageStore();
  const isCurrentUser = message.creatorId === userStore.currentUser.id;
  const connection = connectionStore.getConnectionById(conversationStore.getConversationById(message.conversationId)?.connectionId || "");

  const copyMessage = () => {
    navigator.clipboard.writeText(message.content);
    toast.success("Copied to clipboard");
  };

  const deleteMessage = (message: Message) => {
    messageStore.clearMessage((item) => item.id !== message.id);
  };

  return (
    <div
      className={`w-full max-w-full flex flex-row justify-start items-start my-4 group ${
        isCurrentUser ? "justify-end sm:pl-24" : "sm:pr-24"
      }`}
    >
      {isCurrentUser ? (
        <>
          <div className="invisible group-hover:visible">
            <Dropdown
              tigger={
                <button className="w-6 h-6 mr-1 mt-2 shrink-0 flex justify-center items-center text-gray-400 hover:text-gray-500">
                  <Icon.IoMdMore className="w-5 h-auto" />
                </button>
              }
            >
              <div className="p-1 flex flex-col justify-start items-start bg-white dark:bg-zinc-900 rounded-lg">
                <DropdownItem
                  className="w-full p-1 px-2 flex flex-row justify-start items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800"
                  onClick={copyMessage}
                >
                  <Icon.BiClipboard className="w-4 h-auto mr-2 opacity-70" />
                  {t("common.copy")}
                </DropdownItem>
                <DropdownItem
                  className="w-full p-1 px-2 flex flex-row justify-start items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800"
                  onClick={() => deleteMessage(message)}
                >
                  <Icon.BiTrash className="w-4 h-auto mr-2 opacity-70" />
                  {t("common.delete")}
                </DropdownItem>
              </div>
            </Dropdown>
          </div>
          <div className="w-auto max-w-[calc(100%-2rem)] flex flex-col justify-start items-start">
            <div className="w-full bg-indigo-600 text-white dark:text-gray-200 px-4 py-2 rounded-lg whitespace-pre-wrap break-all">
              {message.content}