Enable discussion to any productin your text editor effortlessly

import cx from "classnames";import { Suspense } from "react";import {  Comment as CommentPrimitive,  Timestamp as TimestampPrimitive,} from "@liveblocks/react-comments/primitives";import { User } from "./User";
export function Comment({ comment, className, ...props }) {  return (    <div className={cx(className, "p-4")} {...props}>      <div className="flex items-center gap-3">        <span className="font-semibold">          <Suspense fallback={comment.userId}>            <User userId={comment.userId} />          </Suspense>        </span>        <TimestampPrimitive          date={comment.createdAt}          className="text-sm text-gray-500"        />      </div>      <CommentPrimitive.Body        className="prose mt-3"        body={comment.body}        components={{          Mention: ({ userId }) => (            <CommentPrimitive.Mention className="font-semibold text-blue-500">              @              <Suspense fallback={userId}>                <User userId={userId} />              </Suspense>            </CommentPrimitive.Mention>          ),        }}      />    </div>  );}