@lark-apaas/coding-template-nestjs-react-fullstack 0.1.59 → 0.1.60-alpha.20261105123111

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-template-nestjs-react-fullstack",
-  "version": "0.1.59",
+  "version": "0.1.60-alpha.20261105123111",
   "description": "NestJS + React fullstack template for miaoda coding",
   "type": "module",
   "files": [

package/template/client/src/components/business-ui/README.md

@@ -1,5 +1,7 @@
 # 业务组件文档
 
+记录评论组件入口：`@/components/business-ui/record-comments`。使用前阅读 [组件接口与接入说明](record-comments/README.md)。评论请求与分页游标留在宿主，组件负责回复、编辑删除、人员提及、乐观更新及可选表情/文档引用。
+
 本文档包含用户选择、部门选择、群组选择、用户展示等业务组件的使用说明。
 
 ---

package/template/client/src/components/business-ui/comments/README.md

@@ -0,0 +1,36 @@
+# 通用评论入口（OpenAPI pilot）
+
+与 `record-comments` 共享 UI/CSS 和乐观更新逻辑。新的公开数据契约不包含 Action、插件实例或飞书数字用户 ID。旧入口继续兼容；此试接入不搬迁全部内部文件，不自动迁移应用。
+
+```tsx
+import { CommentsProvider, CommentList, CommentComposer, commentReactions } from '@/components/business-ui/comments';
+
+<CommentsProvider
+  scopeKey="feishu:my-app:account"
+  subjectKey={documentToken}
+  threads={threads}
+  currentUser={currentUser}
+  actions={adapter.actions}
+  input={{ userMentions: ref => ref.namespace === userNamespace, links: true }}
+  actors={directory}
+  extensions={[commentReactions({ allowedKeys: ['THUMBSUP'], onChange: adapter.changeReaction })]}
+>
+  <div className="min-h-0 flex-1 overflow-y-auto"><CommentList /></div>
+  <CommentComposer />
+</CommentsProvider>
+```
+
+`CommentsProvider` 不输出布局 DOM。也可用 `CommentPanel` 提供默认完整布局。类型以 `contracts.ts` 为准。
+
+- `threads[].messages[]` 中第一条为正文。删除只针对选中消息；剩余消息原位提升，讨论 ID 不变。`canReply:false` 隐藏回复入口（例如 OpenAPI 整篇文档评论）。
+- ID 一律非空字符串；人员用 `{kind:'user',namespace,id}`，namespace 应包含提供方、应用及 ID 类型。不能把 `ou_...` 转数字。时间为毫秒，缺 `updatedAt` 可以正常展示，不伪造编辑时间。
+- 读取、权限、分页、缓存和认证在宿主。加载更多通过外部 `pagination.onLoadMore` / `repliesPagination` 请求。权限未知就不显示修改入口；后端仍须鉴权。
+- `actions.create/update` 返回真实 `{threadId,messageId,message?}`。可选 message 为权威回读，用于接管乐观内容。`remove` 返回 `{threadId,threadDeleted?}`，缺少讨论状态时等待外部回读，不凭局部列表为空认定整串删除。
+- 写成功就 resolve；后续刷新失败不能把成功写入 reject。确定未写入的失败可抛 `{outcome:'not-applied'}`；超时/响应丢失等抛 `{outcome:'unknown'}`，不能盲目重发。`context.operationId` 在一次重试中稳定，但宿主只有下游确实支持时才能把它当幂等保证。
+- 外部读取需要请求序号和写入屏障：忽略写入前开始的过期读取。组件无法判断任意新数组是否更新，也不能独自解决远端最终一致性。
+- 作者快照可只有 ref；姓名缺失交 `actors.resolve`。开启输入 @ 要同时提供目录及 `input.userMentions` 策略；自己回复不自动插入本人 @。
+- 文档用 `commentDocuments({source,canInsert:true})`；source 负责解析 URL、搜索和权限状态。普通链接受 `input.links` 控制。无法解析、未授权、无权限是不同结果，不能把解析失败标成无权限。
+- 回应用 `commentReactions({allowedKeys,onChange})`。`reactions:undefined` 表示未加载，`[]` 表示已知为空，`mine:undefined` 表示本人状态未知，不根据截断名单推断 false。此次 pilot 在任意回应 membership 未知时保守禁用该消息的回应修改；写入结果未知时保留本地状态并锁定，等待权威回读确认。
+- `commentImages()` 只启用选择 UI，不提供上传。宿主自行完成上传、持久化和授权，再在 create/update 返回完整消息。此 OpenAPI 试接入没有图片功能；通用文件附件暂不编辑，避免丢失内容。
+
+真实 OpenAPI 示例和验收工具在 `scripts/__tests__/fixtures/record-comments/openapi/`（仓库测试资产，不随模板运行时携带）。不要让部署后的应用执行 lark-cli，也不要把 token/app secret 放到浏览器。生产应用用自己的后端 OAuth/OpenAPI SDK 替换示例 request。

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

@@ -0,0 +1,626 @@
+import type {
+  CommentsProviderProps,
+  CommentThread,
+  CommentContent,
+  CommentDraft,
+  EntityRef,
+  UserRef,
+  CommentEntitySource,
+  CommentReaction,
+  CommentTarget,
+  CommentWriteResult,
+  CommentMessage,
+} from './contracts';
+import type {
+  CommentDataSource,
+  CommentValue,
+  MentionRef,
+  MentionOption,
+} from '../record-comments/types';
+import type {
+  DiscussionThread,
+  DiscussionDraft,
+  DiscussionReply,
+} from '../record-comments/internal/view-types';
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { CommentMutations } from '../record-comments/internal/mutations';
+import {
+  DiscussionProvider,
+  DiscussionLayout,
+} from '../record-comments/internal/discussion';
+import { ReadStatus, PaginationFooter } from '../record-comments/comment-panel';
+import { withDocumentSource } from '../record-comments/extensions';
+import { DEFAULT_REACTION_EMOJIS } from '../record-comments/internal/reactions';
+import { normalizeValue } from '../record-comments/internal/model';
+
+// Encoding is private UI identity, not a backend ID conversion. Namespace stays lossless.
+const toRef = (ref: EntityRef): MentionRef => {
+  if (!ref.id || !ref.namespace) throw new Error('引用标识不能为空');
+  return ref.kind === 'user'
+    ? {
+        kind: 'user',
+        idType: 'generic',
+        id: JSON.stringify([ref.namespace, ref.id]),
+      }
+    : { kind: 'document', resourceType: ref.namespace, id: ref.id };
+};
+const fromRef = (ref: MentionRef): EntityRef => {
+  if (ref.kind === 'document')
+    return { kind: 'document', namespace: ref.resourceType, id: ref.id };
+  if (ref.idType !== 'generic')
+    return { kind: 'user', namespace: ref.idType, id: ref.id };
+  const [namespace, id] = JSON.parse(ref.id);
+  return { kind: 'user', namespace, id };
+};
+const value = (content: CommentContent): CommentValue =>
+  normalizeValue({
+    version: 1,
+    content: content.nodes.map((n) =>
+      n.type === 'mention'
+        ? { ...n, ref: toRef(n.ref) }
+        : n.type === 'unsupported'
+          ? { type: 'text', text: n.label }
+          : n,
+    ),
+  });
+const content = (v: CommentValue): CommentContent => ({
+  version: 1,
+  nodes: normalizeValue(v).content.map((n) =>
+    n.type === 'mention' ? { ...n, ref: fromRef(n.ref) } : n,
+  ),
+});
+const fail = (message: string) =>
+  Object.assign(new Error(message), { outcome: 'not-applied' });
+const reactionState = (items: CommentReaction[]) =>
+  JSON.stringify(
+    items
+      .map((r) => [r.key, r.count, r.mine])
+      .sort((a, b) => String(a[0]).localeCompare(String(b[0]))),
+  );
+const key = (ref: EntityRef) =>
+  JSON.stringify([ref.kind, ref.namespace, ref.id]);
+export function CommentsProvider(props: CommentsProviderProps) {
+  return (
+    <Session
+      key={JSON.stringify([props.scopeKey, props.subjectKey])}
+      {...props}
+    />
+  );
+}
+function Session(props: CommentsProviderProps) {
+  const latest = useRef(props);
+  latest.current = props;
+  const [mutations] = useState(
+    () =>
+      new CommentMutations({
+        opaqueIDs: true,
+        unknownDeletion: true,
+        unknownErrors: true,
+        removePending: true,
+      }),
+  );
+  useSyncExternalStore(
+    mutations.subscribe,
+    mutations.getVersion,
+    mutations.getVersion,
+  );
+  useEffect(() => {
+    mutations.activate();
+    return () => mutations.dispose();
+  }, [mutations]);
+  const abort = useRef(new AbortController());
+  useEffect(() => {
+    const controller = new AbortController();
+    abort.current = controller;
+    return () => controller.abort();
+  }, []);
+  const context = () => ({
+    operationId: crypto.randomUUID(),
+    signal: abort.current.signal,
+  });
+  const extensions = new Map(props.extensions?.map((x) => [x.type, x]));
+  if (extensions.size !== (props.extensions?.length ?? 0))
+    throw new Error('同种评论扩展只能注册一次');
+  const documents = props.extensions?.find((x) => x.type === 'documents');
+  const reactions = props.extensions?.find((x) => x.type === 'reactions');
+  const images = extensions.has('images');
+  const names = useRef(new Map<string, MentionOption>());
+  names.current = new Map();
+  for (const author of [
+    props.currentUser,
+    ...props.threads.flatMap((t) =>
+      t.messages.flatMap((m) => [
+        m.author,
+        ...(m.reactions ?? []).flatMap((r) => r.previewUsers ?? []),
+      ]),
+    ),
+  ])
+    if (author?.name)
+      names.current.set(key(author.ref), {
+        ref: toRef(author.ref),
+        label: author.name || '用户',
+        avatarUrl: author.avatarUrl,
+      });
+  const source = useMemo(() => {
+    function wrap(
+      external: CommentEntitySource | undefined,
+      user: boolean,
+    ): CommentDataSource {
+      const option = (o: import('./contracts').CommentEntityOption) => ({
+        ...o,
+        ref: toRef(o.ref),
+      });
+      const allowed = (o: import('./contracts').CommentEntityOption) =>
+        o.ref.kind === 'user'
+          ? Boolean(latest.current.input?.userMentions?.(o.ref as UserRef))
+          : true;
+      return {
+        scopeKey: props.scopeKey + (user ? ':actors' : ':documents'),
+        allowLinks: props.input?.links ?? false,
+        search: async (args) => {
+          if (user && !latest.current.input?.userMentions) return { items: [] };
+          const result = await external?.search?.(args);
+          return {
+            items: (result?.items ?? []).filter(allowed).map(option),
+            nextCursor: result?.nextCursor,
+          };
+        },
+        ...(external?.recommend
+          ? {
+              recommend: async (args) => {
+                if (user && !latest.current.input?.userMentions)
+                  return { items: [] };
+                const r = await external.recommend!(args);
+                return {
+                  items: r.items.filter(allowed).map(option),
+                  nextCursor: r.nextCursor,
+                };
+              },
+            }
+          : {}),
+        parseLink: (url) => {
+          const ref = external?.parseUrl?.(url);
+          return ref
+            ? { type: 'mention', ref: toRef(ref), href: url }
+            : undefined;
+        },
+        resolve: async (refs, signal) => {
+          const found = new Map(
+            refs.flatMap((ref) => {
+              const r = names.current.get(key(fromRef(ref)));
+              return r
+                ? [
+                    [
+                      key(fromRef(ref)),
+                      { ...r, status: 'resolved' as const },
+                    ] as const,
+                  ]
+                : [];
+            }),
+          );
+          const missing = refs.filter((r) => !found.has(key(fromRef(r))));
+          if (missing.length && external)
+            for (const r of await external.resolve(
+              missing.map(fromRef),
+              signal,
+            ))
+              found.set(key(r.ref), { ...r, ref: toRef(r.ref) } as never);
+          signal.throwIfAborted();
+          return refs.map(
+            (ref) =>
+              found.get(key(fromRef(ref))) ?? { ref, status: 'error' as const },
+          );
+        },
+      };
+    }
+    const people = wrap(props.actors, true);
+    return documents
+      ? {
+          ...withDocumentSource(people, wrap(documents.source, false)),
+          allowLinks: props.input?.links ?? false,
+        }
+      : people;
+  }, [props.actors, props.scopeKey, props.input?.links, documents?.source]);
+  const [submitted, setSubmitted] = useState<string>();
+  const [reactionVersion, setReactionVersion] = useState(0);
+  const reactionOverlays = useRef(
+    new Map<
+      string,
+      {
+        data: CommentReaction[];
+        before: CommentReaction[];
+        confirmed: boolean;
+        uncertain?: boolean;
+        key: string;
+        action: 'add' | 'remove';
+      }
+    >(),
+  );
+  const reactionBusy = useRef(new Set<string>());
+  const reactKey = (target: CommentTarget) =>
+    JSON.stringify([target.threadId, target.messageId]);
+  const dataToReaction = (data: CommentReaction[]) =>
+    data
+      .filter((r) => r.count > 0)
+      .map((r) => ({
+        key: r.key,
+        count: r.count,
+        mine: r.mine === true,
+        users: (r.previewUsers ?? []).map((u) => toRef(u.ref).id),
+      }));
+  const toMessage = (m: CommentMessage, threadId: string): DiscussionReply => {
+    const target = { threadId, messageId: m.id };
+    const overlay = reactionOverlays.current.get(reactKey(target));
+    const canEdit = Boolean(
+      m.permissions?.edit &&
+      props.actions?.update &&
+      !m.content.nodes.some((n) => n.type === 'unsupported') &&
+      (!m.attachments?.length ||
+        (images &&
+          m.attachments.every((a) => a.kind === 'image' && Boolean(a.url)))),
+    );
+    return {
+      replyID: m.id,
+      author: m.author ? toRef(m.author.ref) : null,
+      createTime: m.createdAt / 1000,
+      updateTime: m.updatedAt === undefined ? undefined : m.updatedAt / 1000,
+      edited: m.edited || Boolean(m.updatedAt && m.updatedAt > m.createdAt),
+      value: value({
+        version: 1,
+        nodes: [
+          ...m.content.nodes,
+          ...(m.attachments ?? [])
+            .filter((a) => a.kind !== 'image' || !a.url)
+            .map((a) => ({
+              type: 'unsupported' as const,
+              label: `[附件暂未接入：${a.name}]`,
+            })),
+        ],
+      }),
+      images: (m.attachments ?? [])
+        .filter((a) => a.kind === 'image' && a.url)
+        .map((a) => ({ ...a, url: a.url! })),
+      reactions: dataToReaction(overlay?.data ?? m.reactions ?? []),
+      permissions: {
+        canEdit,
+        canDelete: Boolean(m.permissions?.delete && props.actions?.remove),
+        canCopyLink: Boolean(props.getMessageLink?.(target)),
+        canReact: Boolean(
+          reactions?.options.onChange &&
+          m.permissions?.react &&
+          !overlay?.uncertain &&
+          m.reactions !== undefined &&
+          !m.reactions.some((r) => r.mine === undefined),
+        ),
+      },
+    };
+  };
+  const base: DiscussionThread[] = props.threads.map((t) => ({
+    commentID: t.id,
+    canReply: t.canReply,
+    creator: t.messages[0]?.author ? toRef(t.messages[0].author.ref) : null,
+    createTime: (t.messages[0]?.createdAt ?? 0) / 1000,
+    isSolved: !!t.resolved,
+    listFooter: t.repliesPagination?.hasMore ? (
+      <PaginationFooter pagination={t.repliesPagination} />
+    ) : undefined,
+    replies: t.messages.map((m) => toMessage(m, t.id)),
+  }));
+  useEffect(() => {
+    mutations.reconcile(base);
+  });
+  useEffect(() => {
+    for (const [k, o] of reactionOverlays.current)
+      if (o.confirmed) {
+        const [tid, mid] = JSON.parse(k);
+        const data = props.threads
+          .find((t) => t.id === tid)
+          ?.messages.find((m) => m.id === mid)?.reactions;
+        if (
+          data &&
+          (reactionState(data) === reactionState(o.data) ||
+            (o.action === 'add'
+              ? data.find((r) => r.key === o.key)?.mine === true
+              : !data.some((r) => r.key === o.key) ||
+                data.find((r) => r.key === o.key)?.mine === false))
+        ) {
+          reactionOverlays.current.delete(k);
+          reactionBusy.current.delete(k);
+          setReactionVersion((v) => v + 1);
+        }
+      }
+  }, [props.threads, reactionVersion]);
+  const readDraft = (
+    draft: DiscussionDraft,
+    mode: 'create' | 'update',
+    target: Partial<CommentTarget>,
+  ): CommentDraft => {
+    const result: CommentDraft = {
+      content: content(draft.value),
+      attachments: draft.images.map((i) =>
+        i.file
+          ? { kind: 'local', localId: i.id, file: i.file }
+          : {
+              kind: 'existing',
+              attachment: {
+                id: i.id,
+                kind: 'image',
+                name: i.name,
+                url: i.url,
+                width: i.width,
+                height: i.height,
+              },
+            },
+      ),
+    };
+    for (const n of result.content.nodes) {
+      if (n.type === 'link' && !latest.current.input?.links)
+        throw fail('当前接口不支持结构化链接');
+      if (
+        n.type === 'mention' &&
+        n.ref.kind === 'document' &&
+        !documents?.canInsert
+      )
+        throw fail('当前接口不支持插入文档引用');
+      if (n.type === 'unresolved-mention' || n.type === 'unsupported')
+        throw fail('请重新选择无法识别的引用');
+      if (
+        n.type === 'mention' &&
+        n.ref.kind === 'user' &&
+        !latest.current.input?.userMentions?.(n.ref as UserRef)
+      )
+        throw fail('当前接口不支持此人员引用');
+    }
+    const error = latest.current.validateDraft?.(result, { mode, ...target });
+    if (error) throw fail(error);
+    return result;
+  };
+  const accept = async (result: CommentWriteResult, target?: CommentTarget) => {
+    if (
+      target &&
+      (result.threadId !== target.threadId ||
+        result.messageId !== target.messageId)
+    )
+      throw Object.assign(new Error('写入目标不匹配'), { outcome: 'unknown' });
+    if (result.message && result.message.id !== result.messageId)
+      throw Object.assign(new Error('回读消息 ID 不匹配'), {
+        outcome: 'unknown',
+      });
+    return {
+      commentID: result.threadId,
+      replyID: result.messageId,
+      ...(result.message
+        ? { authoritativeReply: toMessage(result.message, result.threadId) }
+        : {}),
+    };
+  };
+  return (
+    <DiscussionProvider
+      panel={{
+        source,
+        currentUser: props.currentUser
+          ? toRef(props.currentUser.ref)
+          : undefined,
+        comments: mutations.view(base),
+        allowCompose: !!props.actions?.create,
+        optimisticMutations: true,
+        canMentionUser: (r) =>
+          r.kind === 'user' &&
+          Boolean(latest.current.input?.userMentions?.(fromRef(r) as UserRef)),
+        reactionEmojis: reactions?.options.allowedKeys
+          ? DEFAULT_REACTION_EMOJIS.filter((e) =>
+              reactions.options.allowedKeys!.includes(e.key),
+            )
+          : undefined,
+        showReactions: !!reactions,
+        allowReact: !!reactions?.options.onChange,
+        enableImages: images && !!props.actions?.create,
+        enableEditImages: images && !!props.actions?.update,
+        enableDocuments: documents?.canInsert ?? false,
+        submittedReplyID: submitted ? mutations.replyID(submitted) : undefined,
+        onScrolledToReply: () => setSubmitted(undefined),
+        onRetryMutation: (id) => mutations.retry(id),
+        autoScrollNewReplies: false,
+        listHeader: (
+          <ReadStatus
+            loading={props.loading}
+            error={props.error}
+            onRetry={props.onRetry}
+            empty={
+              !base.some((t) => t.replies.length) &&
+              !mutations.view(base).length
+            }
+            hasMore={props.pagination?.hasMore}
+          />
+        ),
+        listFooter: props.pagination ? (
+          <PaginationFooter
+            pagination={props.pagination}
+            loading={props.loading || !!props.error}
+          />
+        ) : undefined,
+        emptyState: null,
+        onMentionClick: (ref, anchor) => {
+          if (ref.kind === 'user')
+            props.onActorClick?.(fromRef(ref) as UserRef, anchor);
+        },
+        getCommentLink: (threadId, m) =>
+          props.getMessageLink?.({ threadId, messageId: m.replyID }) ?? '',
+        resolveUserRef: (id) => ({ kind: 'user', idType: 'generic', id }),
+        onSubmit: (draft) => {
+          if (
+            draft.commentID &&
+            !latest.current.threads.some(
+              (t) =>
+                t.id === draft.commentID && t.canReply !== false && !t.resolved,
+            )
+          )
+            throw fail('该讨论当前不可回复');
+          const input = readDraft(
+            draft,
+            'create',
+            draft.commentID ? { threadId: draft.commentID } : {},
+          );
+          const ctx = context();
+          const id = mutations.add(
+            base.find((t) => t.commentID === draft.commentID),
+            draft,
+            props.currentUser ? toRef(props.currentUser.ref) : undefined,
+            async () =>
+              accept(
+                await latest.current.actions!.create!(
+                  {
+                    ...input,
+                    ...(draft.commentID ? { threadId: draft.commentID } : {}),
+                  },
+                  ctx,
+                ),
+              ),
+          );
+          setSubmitted(id);
+        },
+        onEdit: (threadId, messageId, v, attachments) => {
+          const input = readDraft(
+            { value: v, images: attachments, private: false },
+            'update',
+            { threadId, messageId },
+          );
+          const ctx = context();
+          mutations.edit(
+            base.find((t) => t.commentID === threadId)!,
+            messageId,
+            { value: v, images: attachments, private: false },
+            async () =>
+              accept(
+                await latest.current.actions!.update!(
+                  { ...input, threadId, messageId },
+                  ctx,
+                ),
+                { threadId, messageId },
+              ),
+          );
+        },
+        onDelete: (threadId, messageId) => {
+          if (!messageId) throw fail('未选择消息');
+          const ctx = context();
+          mutations.delete(
+            base.find((t) => t.commentID === threadId)!,
+            messageId,
+            async () => {
+              const r = await latest.current.actions!.remove!(
+                { threadId, messageId },
+                ctx,
+              );
+              return {
+                commentID: r.threadId,
+                ...(r.threadDeleted === undefined
+                  ? {}
+                  : { commentDeleted: r.threadDeleted }),
+              } as never;
+            },
+          );
+        },
+        onToggleReaction: async (threadId, messageId, emoji) => {
+          const target = { threadId, messageId };
+          const k = reactKey(target);
+          if (reactionBusy.current.has(k)) return;
+          const m = latest.current.threads
+            .find((t) => t.id === threadId)
+            ?.messages.find((m) => m.id === messageId);
+          if (
+            !m?.permissions?.react ||
+            !m.reactions ||
+            m.reactions.some((r) => r.mine === undefined) ||
+            !reactions?.options.onChange
+          )
+            throw fail('回应状态或权限未知');
+          const before = reactionOverlays.current.get(k)?.data ?? m.reactions;
+          const old = before.find((r) => r.key === emoji);
+          const action = old?.mine ? 'remove' : 'add';
+          const next = before.filter((r) => r.key !== emoji);
+          const count = (old?.count ?? 0) + (action === 'add' ? 1 : -1);
+          if (count > 0)
+            next.push({
+              key: emoji,
+              count,
+              mine: action === 'add',
+              previewUsers:
+                action === 'add' && props.currentUser
+                  ? [
+                      props.currentUser,
+                      ...(old?.previewUsers ?? []).filter(
+                        (u) => key(u.ref) !== key(props.currentUser!.ref),
+                      ),
+                    ]
+                  : (old?.previewUsers ?? []).filter(
+                      (u) =>
+                        !props.currentUser ||
+                        key(u.ref) !== key(props.currentUser.ref),
+                    ),
+            });
+          reactionBusy.current.add(k);
+          reactionOverlays.current.set(k, {
+            data: next,
+            before,
+            confirmed: false,
+            key: emoji,
+            action,
+          });
+          setReactionVersion((v) => v + 1);
+          try {
+            const r = await reactions.options.onChange(
+              { ...target, key: emoji, action },
+              context(),
+            );
+            if (!abort.current.signal.aborted) {
+              reactionOverlays.current.set(k, {
+                data: r.reactions ?? next,
+                before,
+                confirmed: true,
+                key: emoji,
+                action,
+              });
+              setReactionVersion((v) => v + 1);
+            }
+          } catch (e) {
+            if (!abort.current.signal.aborted) {
+              if ((e as { outcome?: string })?.outcome === 'not-applied')
+                reactionOverlays.current.delete(k);
+              else
+                reactionOverlays.current.set(k, {
+                  data: next,
+                  before,
+                  confirmed: true,
+                  uncertain: true,
+                  key: emoji,
+                  action,
+                });
+              setReactionVersion((v) => v + 1);
+            }
+            throw e;
+          } finally {
+            if (!reactionOverlays.current.get(k)?.uncertain)
+              reactionBusy.current.delete(k);
+          }
+        },
+      }}
+    >
+      {props.children}
+    </DiscussionProvider>
+  );
+}
+export function CommentPanel(props: Omit<CommentsProviderProps, 'children'>) {
+  return (
+    <CommentsProvider {...props}>
+      <div className="replica-comment-panel">
+        <DiscussionLayout />
+      </div>
+    </CommentsProvider>
+  );
+}