supermemory/apps/web/app/components/plate-ui/comment-create-form.tsx

'use client';

import React from 'react';

import { cn } from '@udecode/cn';
import {
  CommentNewSubmitButton,
  CommentNewTextarea,
  CommentsPlugin,
} from '@udecode/plate-comments/react';
import { useEditorPlugin } from '@udecode/plate-common/react';

import { buttonVariants } from './button';
import { CommentAvatar } from './comment-avatar';
import { inputVariants } from './input';

export function CommentCreateForm() {
  const { useOption } = useEditorPlugin(CommentsPlugin);

  const myUserId = useOption('myUserId');

  return (
    <div className="flex w-full space-x-2">
      <CommentAvatar userId={myUserId} />

      <div className="flex grow flex-col items-end gap-2">
        <CommentNewTextarea className={inputVariants()} />

        <CommentNewSubmitButton
          className={cn(buttonVariants({ size: 'sm' }), 'w-[90px]')}
        >
          Comment
        </CommentNewSubmitButton>
      </div>
    </div>
  );
}