@lark-apaas/coding-template-nestjs-react-fullstack 0.1.60-alpha.20261105142153 → 0.1.60-beta.0

package/template/client/src/components/business-ui/record-comments/app-source.ts

@@ -1,93 +0,0 @@
-import type { CommentDataSource, MentionOption, MentionResult } from './types';
-import { getI18nText } from '../utils/user';
-import { listUsersByIds, searchUsers } from '../api/users/service';
-
-function avatarUrl(avatar: unknown): string | undefined {
-  if (typeof avatar === 'string') return avatar;
-  if (avatar && typeof avatar === 'object' && 'image' in avatar) {
-    const image = avatar.image;
-    if (
-      image &&
-      typeof image === 'object' &&
-      'large' in image &&
-      typeof image.large === 'string'
-    )
-      return image.large;
-  }
-  return undefined;
-}
-
-/** The same Miaoda user IDs and built-in service used by UserDisplay. */
-export function createAppCommentSource(scopeKey: string): CommentDataSource {
-  return {
-    scopeKey,
-    async search({ query, cursor, signal }) {
-      signal.throwIfAborted();
-      // The built-in directory has no empty-query recommendations. In a mixed
-      // source, leave that branch empty so document recommendations still load.
-      if (!query) return { items: [] };
-      const offset = Number(cursor || 0);
-      if (!Number.isSafeInteger(offset) || offset < 0)
-        throw new Error('分页参数无效');
-      const response = await searchUsers({ query, offset, pageSize: 20 });
-      signal.throwIfAborted();
-      if (String(response.status_code) !== '0')
-        throw new Error('人员搜索失败，请重试');
-      const users = response.data.userList ?? [];
-      const items: MentionOption[] = users.flatMap((user) => {
-        // Unregistered contacts have no Miaoda ID; never substitute a Lark ID.
-        const id = String(user.userID || '');
-        if (!/^[1-9]\d*$/.test(id)) return [];
-        return [
-          {
-            ref: { kind: 'user' as const, idType: 'apaas-user' as const, id },
-            label: getI18nText(user.name) || '未命名人员',
-            avatarUrl: avatarUrl(user.avatar),
-            description: getI18nText(user.department?.name) || user.tenantName,
-            isExternal: user.userType === '_externalUser',
-          },
-        ];
-      });
-      const nextOffset = offset + users.length;
-      return {
-        items,
-        nextCursor:
-          users.length && nextOffset < response.data.total
-            ? String(nextOffset)
-            : undefined,
-      };
-    },
-    async resolve(refs, signal) {
-      signal.throwIfAborted();
-      const ids = refs.flatMap((ref) =>
-        ref.kind === 'user' && ref.idType === 'apaas-user' ? [ref.id] : [],
-      );
-      const response = ids.length ? await listUsersByIds(ids) : undefined;
-      signal.throwIfAborted();
-      const base = response?.data?.baseResp;
-      if (base?.statusCode)
-        throw new Error(base.statusMessage || '人员信息加载失败');
-      if (ids.length && !response?.data?.userInfoMap)
-        throw new Error('人员信息返回格式无效');
-      const people = response?.data?.userInfoMap || {};
-      return refs.map((ref): MentionResult => {
-        if (ref.kind !== 'user' || ref.idType !== 'apaas-user')
-          return { ref, status: 'error' };
-        const user = people[ref.id];
-        if (!user) return { ref, status: 'not-found' };
-        return {
-          ref,
-          status: 'resolved',
-          label: getI18nText(user.name) || '未命名人员',
-          avatarUrl: avatarUrl(user.avatar),
-          description: getI18nText(user.department?.name),
-          isExternal: user.userType === '_externalUser',
-        };
-      });
-    },
-  };
-}
-
-export { withDocumentSource } from './extensions';
-
-export { documentRefFromUrl, safeUrl } from './internal/model';

package/template/client/src/components/business-ui/record-comments/comment-panel.contract.ts

@@ -1,240 +0,0 @@
-import type { CommentDataSource, CommentMentionClickHandler } from './types';
-import type { CommentExtension } from './extensions';
-import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
-
-/**
- * Public contract for the controlled CommentPanel entry point.
- * Requests, credentials, pagination cursors and server caches belong to the host.
- * The panel owns optimistic drafts and per-message mutation state.
- */
-
-
-
-
-export type CommentReadContent =
-  | { type: 'text'; text: string }
-  | { type: 'mention'; userID?: number }
-  | { type: 'link'; url: string };
-
-export type CommentWriteContent =
-  | { type: 'text'; text: string }
-  | { type: 'mention'; userID: number }
-  | { type: 'link'; url: string };
-
-export interface RecordCommentReply {
-  replyID: string;
-  creator?: number;
-  /** Unix seconds, not milliseconds. */
-  createTime: number;
-  /** Authoritative per-reply last update, Unix seconds. Omit when unavailable. */
-  updateTime?: number;
-  content: CommentReadContent[];
-  /** Omission means reactions were not loaded or are unavailable in this identity mode. */
-  reactions?: Array<{ key: string; count: number; mine: boolean; userIDs: number[] }>;
-}
-
-export interface RecordComment {
-  commentID: string;
-  creator?: number;
-  createTime: number;
-  isSolved: boolean;
-  /** First reply is the body; subsequent replies belong to the same discussion. */
-  replies: RecordCommentReply[];
-}
-
-export interface ListRecordCommentsInput {
-  recordID: string;
-  commentID?: string;
-  needReaction?: boolean;
-  pageSize?: number;
-  pageToken?: string;
-}
-
-export interface RecordCommentPage {
-  comments: RecordComment[];
-  hasMore: boolean;
-  pageToken: string;
-}
-
-export interface AddRecordCommentInput {
-  recordID: string;
-  /** Omit for a new discussion. Never send an empty string. */
-  commentID?: string;
-  content: CommentWriteContent[];
-}
-
-export interface UpdateRecordCommentInput {
-  recordID: string;
-  commentID: string;
-  replyID: string;
-  content: CommentWriteContent[];
-}
-
-export interface DeleteRecordCommentInput {
-  recordID: string;
-  commentID: string;
-  /** Always supplied by the panel to delete one message, including the body.
-   * Omission is a legacy explicit whole-discussion command for external callers. */
-  replyID?: string;
-}
-
-export interface CommentIDs {
-  commentID: string;
-  replyID: string;
-}
-
-export interface DeleteCommentResult {
-  commentID: string;
-  commentDeleted: boolean;
-}
-
-export interface CommentTarget {
-  recordID: string;
-  commentID: string;
-  replyID: string;
-}
-
-export interface CommentPermissionContext extends CommentTarget {
-  comment: RecordComment;
-  reply: RecordCommentReply;
-  isBody: boolean;
-}
-
-export interface CommentPagination {
-  hasMore: boolean;
-  /** Host state, in addition to the panel's immediate in-flight guard. */
-  loading?: boolean;
-  /** An external page-load failure. Does not replace already loaded comments. */
-  error?: string;
-  /** Append to comments before resolving; reject on failure. Cursors stay outside. */
-  onLoadMore: () => Promise<void>;
-}
-
-export interface CommentReaction {
-  emojiKey: string;
-  count: number;
-  /** Authoritative membership. Never infer this from a truncated users list. */
-  reactedByMe: boolean;
-  previewUserIDs?: readonly number[];
-}
-
-export interface ChangeCommentReactionInput extends CommentTarget {
-  emojiKey: string;
-  action: 'add' | 'remove';
-}
-
-export interface CommentReactionFeature {
-  canChange?: (target: CommentTarget) => boolean;
-  getReactions: (target: CommentTarget) => readonly CommentReaction[];
-  /** Host updates its controlled reaction data before resolving. */
-  onChange?: (input: ChangeCommentReactionInput) => Promise<void>;
-  /** Optional paginated users; an absent loader means no complete-members claim. */
-  loadUsers?: (
-    input: CommentTarget & { emojiKey: string; cursor?: string },
-    signal: AbortSignal,
-  ) => Promise<{ userIDs: number[]; nextCursor?: string }>;
-}
-
-export interface CommentImage {
-  id: string;
-  url: string;
-  name?: string;
-  width?: number;
-  height?: number;
-}
-
-/** A retained image or a newly selected local file. Never a Bitable Action element. */
-export type CommentImageInput =
-  | { kind: 'existing'; image: CommentImage }
-  | { kind: 'local'; localID: string; file: File };
-
-/** Separate image-bearing command: content may be empty when images are present. */
-export interface AddImageCommentInput {
-  recordID: string;
-  commentID?: string;
-  content: CommentWriteContent[];
-  images: readonly CommentImageInput[];
-}
-
-export interface UpdateImageCommentInput extends AddImageCommentInput {
-  commentID: string;
-  replyID: string;
-}
-
-export interface CommentImageFeature {
-  /** UI cannot derive images from the official plugin's empty content array. */
-  getImages: (target: CommentTarget) => readonly CommentImage[];
-  /** Enables file selection for new comments/replies. Owns the entire command. */
-  onAddComment?: (input: AddImageCommentInput) => Promise<CommentIDs>;
-  /** Required to edit an existing image-bearing reply without losing its images. */
-  onUpdateComment?: (input: UpdateImageCommentInput) => Promise<CommentIDs>;
-}
-
-/** Plain Error means a rejected write. Mark outcome=unknown for a timeout or
- * transport failure that may have committed; the panel then prevents blind retry. */
-export interface CommentMutationFailure extends Error {
-  outcome?: 'not-applied' | 'unknown';
-}
-
-export interface CommentPanelProps {
-  /** Stable app/tenant/identity/data-source scope. No credentials. */
-  scopeKey: string;
-  recordID: string;
-  /** Controlled server data; the panel never mutates this array. */
-  comments: readonly RecordComment[];
-  /** Externally supplied @ lookup/resolution; contains no comment CRUD methods. */
-  mentionSource: CommentDataSource;
-  /** Enable document suggestions only with a user-authorized document source. Writes remain link elements. */
-  enableDocuments?: boolean;
-  /** Miaoda user ID; used for presentation, not authorization. */
-  currentUserID?: number;
-
-  /** Initial read is initiated by the host. */
-  loading?: boolean;
-  /** Initial/background read error; existing comments remain visible. */
-  error?: string;
-  onRetry?: () => Promise<void>;
-  /** Omit when the host has already supplied the entire list. */
-  pagination?: CommentPagination;
-
-  /** Resolve with real IDs on write success; comments may be updated later.
-   * The panel immediately renders a local overlay, owns pending/error/retry state,
-   * and reconciles it when matching controlled data arrives. Refresh failures must
-   * not reject a committed write. Mark ambiguous failures with outcome=unknown. */
-  onAddComment?: (input: AddRecordCommentInput) => Promise<CommentIDs>;
-  onUpdateComment?: (input: UpdateRecordCommentInput) => Promise<CommentIDs>;
-  onDeleteComment?: (input: DeleteRecordCommentInput) => Promise<DeleteCommentResult>;
-  /** Absent policy means edit/delete are hidden. Backend remains authoritative. */
-  getReplyPermissions?: (
-    context: CommentPermissionContext,
-  ) => { canEdit: boolean; canDelete: boolean };
-
-  /** Absent callback means no copy-link menu item. */
-  getCommentLink?: (target: CommentTarget) => string | undefined;
-  onMentionClick?: CommentMentionClickHandler;
-  /** Requests remain external. Prefer extensions; direct feature props remain compatible. */
-  reactions?: CommentReactionFeature;
-  images?: CommentImageFeature;
-  /** Stable, per-session registrations. One of each kind; registered kinds override legacy props. */
-  extensions?: readonly CommentExtension[];
-
-  /** Default: nearest scrollable ancestor of the bottom sentinel, else viewport. */
-  getScrollContainer?: () => HTMLElement | null;
-  className?: string;
-  /** Layout only; current internal design tokens and visual styles are preserved. */
-  style?: CSSProperties;
-}
-
-/** One record/identity session. Shares behavior without rendering a layout element. */
-export interface CommentsProviderProps extends Omit<CommentPanelProps, 'className' | 'style'> {
-  children: ReactNode;
-}
-
-/** The host owns the heading, outer scroll region and surrounding layout. */
-export type CommentListProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'dangerouslySetInnerHTML'>;
-
-/** One primary composer per provider; inline edit composers stay inside the list. */
-export interface CommentComposerProps extends CommentListProps {
-  placeholder?: string;
-  disabled?: boolean;
-}

package/template/client/src/components/business-ui/record-comments/comment-panel.tsx

@@ -1,231 +0,0 @@
-import type { CommentComposerProps, CommentListProps, CommentPanelProps, CommentsProviderProps, CommentTarget } from './comment-panel.contract';
-import { CommentMutations } from './internal/mutations';
-import { buildPanelThreads, CommentPageLoader, preparePanelDeletion, preparePanelEdit, loadPanelReactionDetails, preparePanelComment } from './internal/model';
-import { DiscussionComposerView, DiscussionLayout, DiscussionList, DiscussionProvider } from './internal/discussion';
-import { commentExtensionFeatures, withDocumentSource } from './extensions';
-import { COMMENT_THEME_CLASS } from './internal/model';
-import { LoaderCircle } from 'lucide-react';
-import { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from 'react';
-import './internal/styles.css';
-
-export function ReadStatus({ loading, error, onRetry, empty, hasMore }: Pick<CommentPanelProps, 'loading' | 'error' | 'onRetry'> & { empty: boolean; hasMore?: boolean }) {
-  const [failure, setFailure] = useState('');
-  const [retrying, setRetrying] = useState(false);
-  const busy = useRef(false);
-  // A successful external read must clear a previous retry failure as well.
-  useEffect(() => setFailure(''), [error]);
-  const pending = loading || retrying;
-  const message = failure || error;
-  if (!empty && !pending && !message) return null;
-  const state = pending ? 'loading' : message ? 'error' : 'empty';
-  return <div className={`replica-panel-status${empty ? ' replica-panel-placeholder' : ''}`}
-    data-state={state} role={state === 'error' ? 'alert' : 'status'} aria-busy={pending}>
-    <div className="replica-panel-status-content">
-      <span>{pending ? <LoaderCircle className="size-4 animate-spin text-primary" aria-label="正在加载评论" />
-        : message || (empty && !hasMore ? '当前记录暂无评论' : null)}</span>
-      {!pending && message && onRetry && <button type="button" onClick={async () => {
-        if (busy.current) return;
-        busy.current = true; setRetrying(true); setFailure('');
-        try { await onRetry(); }
-        catch (cause) { setFailure(cause instanceof Error ? cause.message : '刷新失败，请重试'); }
-        finally { busy.current = false; setRetrying(false); }
-      }}>重试刷新</button>}
-    </div>
-  </div>;
-}
-
-function nearestScrollContainer(node: HTMLElement): HTMLElement | null {
-  for (let parent = node.parentElement; parent; parent = parent.parentElement) {
-    if (/(auto|scroll)/.test(getComputedStyle(parent).overflowY) && parent.clientHeight > 0) return parent;
-  }
-  return null;
-}
-
-export function PaginationFooter({ pagination, loading, getScrollContainer }: Pick<CommentPanelProps, 'pagination' | 'loading' | 'getScrollContainer'>) {
-  const sentinel = useRef<HTMLDivElement>(null);
-  const root = useRef<HTMLElement | null>(null);
-  const [gate] = useState(() => new CommentPageLoader());
-  const [, refresh] = useReducer((value: number) => value + 1, 0);
-  const latest = useRef({ pagination, loading });
-  latest.current = { pagination, loading };
-  const alive = useRef(true);
-  const run = useRef((manual = false) => { void manual; });
-  run.current = (manual = false) => {
-    const current = latest.current;
-    if (!alive.current || current.loading || !current.pagination?.hasMore || current.pagination.loading || gate.pending) return;
-    if (!manual && (gate.error || current.pagination.error || gate.automaticLoads >= 3)) return;
-    const promise = gate.load(current.pagination, manual);
-    refresh();
-    void promise.finally(() => { if (alive.current) refresh(); });
-  };
-  const check = useCallback(() => {
-    const element = sentinel.current;
-    if (!element) return;
-    const bounds = element.getBoundingClientRect();
-    const viewport = root.current?.getBoundingClientRect();
-    const visibleTop = Math.max(0, viewport?.top ?? 0);
-    const visibleBottom = Math.min(window.innerHeight, viewport?.bottom ?? window.innerHeight);
-    if (visibleBottom > visibleTop && bounds.top <= visibleBottom + 200 && bounds.bottom >= visibleTop)
-      run.current();
-  }, []);
-  useEffect(() => {
-    alive.current = true;
-    const element = sentinel.current;
-    if (!element) return;
-    root.current = getScrollContainer ? getScrollContainer() : nearestScrollContainer(element);
-    const container = root.current ?? window;
-    const observer = new IntersectionObserver(() => check(), { root: root.current, rootMargin: '0px 0px 200px 0px' });
-    observer.observe(element);
-    const resize = new ResizeObserver(check);
-    resize.observe(root.current ?? document.documentElement);
-    const resume = (event: Event) => {
-      if (event instanceof WheelEvent && event.deltaY > 0) gate.automaticLoads = 0;
-      if (event instanceof KeyboardEvent && ['PageDown', 'End', 'ArrowDown'].includes(event.key)) gate.automaticLoads = 0;
-      check();
-    };
-    container.addEventListener('scroll', check, { passive: true });
-    if (root.current) window.addEventListener('scroll', check, { passive: true });
-    container.addEventListener('wheel', resume, { passive: true });
-    container.addEventListener('keydown', resume);
-    return () => {
-      alive.current = false;
-      observer.disconnect(); resize.disconnect();
-      container.removeEventListener('scroll', check);
-      window.removeEventListener('scroll', check);
-      container.removeEventListener('wheel', resume);
-      container.removeEventListener('keydown', resume);
-    };
-  }, [check, gate, getScrollContainer]);
-  useEffect(() => {
-    const frame = requestAnimationFrame(check);
-    return () => cancelAnimationFrame(frame);
-  });
-  const error = pagination?.hasMore && (gate.error || pagination.error);
-  const pending = gate.pending || pagination?.loading;
-  return <div ref={sentinel} className={pagination?.hasMore ? 'replica-panel-pagination' : undefined} aria-live="polite">
-    {pagination?.hasMore && (error ? <><span role="alert">{error}</span><button type="button" disabled={pending} onClick={() => run.current(true)}>重试加载</button></>
-      : pending ? <LoaderCircle className="size-4 animate-spin text-primary" aria-label="正在加载更多评论" />
-        : pagination?.hasMore ? <button type="button" disabled={loading} onClick={() => run.current(true)}>继续加载</button>
-          : null)}
-  </div>;
-}
-
-function PanelSession(props: CommentsProviderProps) {
-  const latest = useRef(props);
-  latest.current = props;
-  const locks = useRef(new Set<string>());
-  const [submitted, setSubmitted] = useState<string>();
-  const [mutations] = useState(() => new CommentMutations());
-  useSyncExternalStore(mutations.subscribe, mutations.getVersion, mutations.getVersion);
-  const base = buildPanelThreads(props);
-  const comments = mutations.view(base);
-  useEffect(() => {
-    mutations.activate();
-    return () => mutations.dispose();
-  }, [mutations]);
-  useEffect(() => { mutations.reconcile(base); }, [base, mutations]);
-  async function locked<T>(key: string, action: () => Promise<T>): Promise<T> {
-    if (locks.current.has(key)) throw new Error('该评论正在处理中，请稍后重试');
-    locks.current.add(key);
-    try { return await action(); }
-    finally { locks.current.delete(key); }
-  }
-  const allowCompose = Boolean(props.onAddComment || props.images?.onAddComment);
-  const currentUser = props.currentUserID == null ? undefined
-    : { kind: 'user' as const, idType: 'apaas-user' as const, id: String(props.currentUserID) };
-  return <DiscussionProvider panel={{
-    source: props.mentionSource,
-    currentUser,
-    comments,
-    allowCompose,
-    optimisticMutations: true,
-    onRetryMutation: (id) => mutations.retry(id),
-    showReactions: Boolean(props.reactions),
-    allowReact: Boolean(props.reactions?.onChange),
-    enableImages: Boolean(props.images?.onAddComment),
-    enableEditImages: Boolean(props.images?.onUpdateComment),
-    enablePrivateComments: false,
-    enableDocuments: props.enableDocuments ?? false,
-    autoScrollNewReplies: false,
-    emptyState: null,
-    submittedReplyID: submitted ? mutations.replyID(submitted) : undefined,
-    onScrolledToReply: () => setSubmitted(undefined),
-    listHeader: <ReadStatus loading={props.loading} error={props.error} onRetry={props.onRetry}
-      empty={!comments.some((thread) => thread.replies.length > 0)} hasMore={props.pagination?.hasMore} />,
-    listFooter: props.pagination && <PaginationFooter pagination={props.pagination}
-      loading={props.loading || Boolean(props.error)} getScrollContainer={props.getScrollContainer} />,
-    onMentionClick: props.onMentionClick,
-    getCommentLink: (commentID, reply) => props.getCommentLink?.({ recordID: props.recordID, commentID, replyID: reply.replyID }) ?? '',
-    onSubmit: (draft) => {
-      const current = latest.current;
-      preparePanelComment(current, draft); // Validate before accepting/clearing the draft.
-      const thread = base.find((item) => item.commentID === draft.commentID);
-      const id = mutations.add(thread, draft, currentUser, () => preparePanelComment(latest.current, draft)());
-      setSubmitted(id);
-    },
-    onEdit: (commentID, replyID, value, images) => {
-      const draft = { value, images, private: false };
-      preparePanelEdit(latest.current, commentID, replyID, draft);
-      const thread = base.find((item) => item.commentID === commentID)!;
-      mutations.edit(thread, replyID, draft, () => preparePanelEdit(latest.current, commentID, replyID, draft)());
-    },
-    onDelete: (commentID, replyID) => {
-      if (!replyID) throw new Error('未选择要删除的评论');
-      preparePanelDeletion(latest.current, commentID, replyID);
-      const thread = base.find((item) => item.commentID === commentID)!;
-      mutations.delete(thread, replyID, () => preparePanelDeletion(latest.current, commentID, replyID)());
-    },
-    onToggleReaction: async (commentID, replyID, emojiKey) => {
-      await locked(replyID, async () => {
-        const current = latest.current;
-        const feature = current.reactions;
-        if (!feature?.onChange) throw new Error('未提供回应写入能力');
-        const target: CommentTarget = { recordID: current.recordID, commentID, replyID };
-        if (feature.canChange?.(target) === false) throw new Error('表情状态尚未加载或当前身份不可用');
-        const existing = feature.getReactions(target).find((reaction) => reaction.emojiKey === emojiKey ||
-          (emojiKey === 'THUMBSUP' && reaction.emojiKey === 'MediumThumbsup'));
-        await feature.onChange({ ...target, emojiKey: existing?.emojiKey ?? emojiKey, action: existing?.reactedByMe ? 'remove' : 'add' });
-      });
-    },
-    loadReactionDetails: props.reactions?.loadUsers ? (commentID, replyID, signal) => loadPanelReactionDetails(
-      latest.current, { recordID: props.recordID, commentID, replyID }, signal,
-    ) : undefined,
-  }}>{props.children}</DiscussionProvider>;
-}
-
-/** Shared record session, with no layout DOM and no persistence implementation. */
-export function CommentsProvider(props: CommentsProviderProps) {
-  const features = useMemo(() => commentExtensionFeatures(props.extensions), [props.extensions]);
-  const mentionSource = useMemo(() => features.documents
-    ? withDocumentSource(props.mentionSource, features.documents) : props.mentionSource,
-  [props.mentionSource, features.documents]);
-  return <PanelSession key={JSON.stringify([props.scopeKey, props.recordID])} {...props}
-    mentionSource={mentionSource} reactions={features.reactions ?? props.reactions}
-    images={features.images ?? props.images} enableDocuments={Boolean(features.documents) || props.enableDocuments} />;
-}
-
-/** The theme is scoped to this leaf; no panel heading, card or fixed height. */
-export const CommentList = forwardRef<HTMLDivElement, CommentListProps>(function CommentList(
-  { className = '', style, ...props }, ref,
-) {
-  return <div {...props} ref={ref} data-slot="comment-list"
-    className={`${COMMENT_THEME_CLASS} replica-comment-panel replica-discussion ${className}`} style={{ height: 'auto', ...style }}>
-    <DiscussionList style={{ overflowY: 'visible' }} />
-  </div>;
-});
-
-export const CommentComposer = forwardRef<HTMLDivElement, CommentComposerProps>(function CommentComposer(
-  { placeholder, disabled, className = '', style, ...props }, ref,
-) {
-  return <div {...props} ref={ref} data-slot="comment-composer"
-    className={`${COMMENT_THEME_CLASS} replica-discussion ${className}`} style={{ height: 'auto', ...style }}>
-    <DiscussionComposerView placeholder={placeholder} disabled={disabled} />
-  </div>;
-});
-
-/** Compatibility composition with the existing heading, list and footer layout. */
-export function CommentPanel({ className, style, ...props }: CommentPanelProps) {
-  return <CommentsProvider {...props}>
-    <div className={`replica-comment-panel ${className ?? ''}`} style={style}><DiscussionLayout /></div>
-  </CommentsProvider>;
-}