Add support for private comments in comment widget

packages/comment-widget/package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@floating-ui/dom": "^1.7.3",
-    "@halo-dev/api-client": "^2.21.1",
+    "@halo-dev/api-client": "https://pkg.pr.new/@halo-dev/api-client@7679",
     "@lit/context": "^1.1.6",
     "@lit/localize": "^0.12.2",
     "@tiptap/core": "^3.1.0",

packages/comment-widget/src/base-comment-item.ts

@@ -33,7 +33,10 @@ export class BaseCommentItem extends LitElement {
   content = '';
 
   @property({ type: String })
-  ua: string = '';
+  ua: string | undefined;
+
+  @property({ type: Boolean })
+  private: boolean | undefined;
 
   @consume({ context: configMapDataContext })
   @state()
@@ -49,7 +52,7 @@ export class BaseCommentItem extends LitElement {
         ></user-avatar>
       </div>
       <div class="item-main flex-[1_1_auto] min-w-0 w-full">
-        <div class="item-meta flex items-center gap-3 flex-wrap">
+        <div class="item-meta flex items-center gap-2 flex-wrap">
           ${
             this.userWebsite
               ? html`<a
@@ -65,6 +68,18 @@ export class BaseCommentItem extends LitElement {
 
           ${this.ua && this.configMapData?.basic.showCommenterDevice ? html`<commenter-ua-bar .ua=${this.ua}></commenter-ua-bar>` : ''}
 
+
+          ${
+            this.private
+              ? html`
+              <div class="inline-flex items-center gap-1 bg-muted-3 rounded-base px-1.5 py-1">
+                <i class="i-ri-git-repository-private-line opacity-90 size-3" aria-hidden="true"></i>
+                <span class="text-xs text-text-2">${msg('Private')}</span>
+              </div>`
+              : ''
+          }
+
+
           <time class="item-meta-info text-xs text-text-3" title=${formatDate(this.creationTime)}>
             ${timeAgo(this.creationTime)}
           </time>

packages/comment-widget/src/base-form.ts

@@ -64,6 +64,9 @@ export class BaseForm extends LitElement {
   @state()
   toastManager: ToastManager | undefined;
 
+  @property({ type: Boolean })
+  hidePrivateCheckbox = false;
+
   textareaRef: Ref<HTMLTextAreaElement> = createRef<HTMLTextAreaElement>();
 
   editorRef: Ref<CommentEditor> = createRef<CommentEditor>();
@@ -150,13 +153,14 @@ export class BaseForm extends LitElement {
 
   renderAccountInfo() {
     return html`<div class="form-account flex items-center gap-2">
-    <div class="form-account-avatar avatar">
       ${
         this.currentUser?.spec.avatar
-          ? html`<img src=${this.currentUser.spec.avatar} class="size-full object-cover" />`
+          ? html`
+            <div class="form-account-avatar avatar">
+              <img src=${this.currentUser.spec.avatar} class="size-full object-cover" />
+            </div>`
           : ''
       }
-    </div>
       <span class="form-account-name text-base text-text-1 font-semibold">
         ${this.currentUser?.spec.displayName || this.currentUser?.metadata.name}
       </span>
@@ -238,7 +242,21 @@ export class BaseForm extends LitElement {
               </button> `
               : ''
           }
-          <div class="form-actions justify-end flex gap-2 flex-wrap items-center">
+          <div class="form-actions justify-end flex gap-3 flex-wrap items-center">
+
+            ${
+              !this.hidePrivateCheckbox &&
+              this.configMapData?.basic.enablePrivateComment
+                ? html`
+                  <div class="flex items-center gap-2">
+                    <input id="hidden" name="hidden" type="checkbox" />
+                    <label for="hidden" class="text-xs select-none text-text-3 hover:text-text-1 transition-all">${msg('Private')}</label>
+                  </div>
+                `
+                : ''
+            }
+
+
             ${
               this.showCaptcha && this.captcha
                 ? html`
@@ -293,6 +311,7 @@ export class BaseForm extends LitElement {
       detail: {
         ...data,
         content,
+        hidden: data.hidden === 'on',
       },
     });
     this.dispatchEvent(event);

packages/comment-widget/src/comment-form.ts

@@ -82,13 +82,14 @@ export class CommentForm extends LitElement {
 
     const data = e.detail;
 
-    const { displayName, email, website, content } = data || {};
+    const { displayName, email, website, content, hidden } = data || {};
 
     const commentRequest: CommentRequest = {
       raw: content,
       content: content,
       // TODO: support user input
       allowNotification: true,
+      hidden: hidden || false,
       subjectRef: {
         group: this.group,
         kind: this.kind,

packages/comment-widget/src/comment-item.ts

@@ -120,6 +120,7 @@ export class CommentItem extends LitElement {
       .approved=${this.comment?.spec.approved}
       .userWebsite=${this.comment?.spec.owner.annotations?.website}
       .ua=${this.comment?.spec.userAgent}
+      .private=${this.comment?.spec.hidden}
     >
       <button slot="action" class="icon-button group -ml-2" type="button" @click="${this.handleUpvote}" aria-label=${msg('Upvote')}>
         <div class="icon-button-icon">

packages/comment-widget/src/generated/locales/es.ts

@@ -41,6 +41,7 @@
 'sc8da3cc71de63832': `Iniciar sesión`,
 'sd1f44f1a8bc20e67': `Correo electrónico`,
 'sd5e242ab9574958a': `Error al comentar, por favor intente más tarde`,
+'se7bee6e9a9b5394c': `Íntimo`,
 'sea7e567ed89dc0d7': `Seleccionar emoticono`,
 'sf3ff78cc329d3528': `Anterior`,
 'sf77128b082955d42': `(O iniciar sesión)`,

packages/comment-widget/src/generated/locales/zh-CN.ts

@@ -41,6 +41,7 @@
 'sc8da3cc71de63832': `登录`,
 'sd1f44f1a8bc20e67': `电子邮件`,
 'sd5e242ab9574958a': `评论失败，请稍后重试`,
+'se7bee6e9a9b5394c': `私密`,
 'sea7e567ed89dc0d7': `选择表情`,
 'sf3ff78cc329d3528': `上一页`,
 'sf77128b082955d42': `（或登录账号）`,

packages/comment-widget/src/generated/locales/zh-TW.ts

@@ -41,6 +41,7 @@
 'sc8da3cc71de63832': `登入`,
 'sd1f44f1a8bc20e67': `電子郵件`,
 'sd5e242ab9574958a': `評論失敗，請稍後重試`,
+'se7bee6e9a9b5394c': `私密`,
 'sea7e567ed89dc0d7': `選擇表情`,
 'sf3ff78cc329d3528': `上一頁`,
 'sf77128b082955d42': `（或登入帳號）`,

packages/comment-widget/src/reply-form.ts

@@ -75,6 +75,7 @@ export class ReplyForm extends LitElement {
     return html` <base-form
       .submitting=${this.submitting}
       .captcha=${this.captcha}
+      .hidePrivateCheckbox=${this.comment?.spec.hidden || false}
       ${ref(this.baseFormRef)}
       @submit="${this.onSubmit}"
     ></base-form>`;
@@ -87,13 +88,14 @@ export class ReplyForm extends LitElement {
 
     const data = e.detail;
 
-    const { displayName, email, website, content } = data || {};
+    const { displayName, email, website, content, hidden } = data || {};
 
     const replyRequest: ReplyRequest = {
       raw: content,
       content: content,
       // TODO: support user input
       allowNotification: true,
+      hidden: hidden || false,
     };
 
     if (this.quoteReply) {

packages/comment-widget/src/reply-item.ts

@@ -123,6 +123,7 @@ export class ReplyItem extends LitElement {
         .breath=${this.isQuoteReplyHovered}
         .userWebsite=${this.reply?.spec.owner.annotations?.website}
         .ua=${this.reply?.spec.userAgent}
+        .private=${this.comment?.spec.hidden || this.reply?.spec.hidden}
       >
         <button slot="action" class="icon-button group -ml-2" type="button" @click="${this.handleUpvote}" aria-label=${msg('Upvote')}>
           <div class="icon-button-icon ">

packages/comment-widget/src/types/index.ts

@@ -11,6 +11,7 @@ interface BasicConfig {
   withReplySize: number;
   replySize: number;
   showCommenterDevice?: boolean;
+  enablePrivateComment?: boolean;
 }
 
 interface SecurityConfig {

packages/comment-widget/xliff/es.xlf

@@ -150,6 +150,10 @@
   <source>Show replies</source>
   <target>Mostrar respuestas</target>
 </trans-unit>
+<trans-unit id="se7bee6e9a9b5394c">
+  <source>Private</source>
+  <target>Íntimo</target>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/comment-widget/xliff/zh-CN.xlf

@@ -150,6 +150,10 @@
   <source>Show replies</source>
   <target>显示回复</target>
 </trans-unit>
+<trans-unit id="se7bee6e9a9b5394c">
+  <source>Private</source>
+  <target>私密</target>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/comment-widget/xliff/zh-TW.xlf

@@ -150,6 +150,10 @@
   <source>Show replies</source>
   <target>顯示回覆</target>
 </trans-unit>
+<trans-unit id="se7bee6e9a9b5394c">
+  <source>Private</source>
+  <target>私密</target>
+</trans-unit>
 </body>
 </file>
 </xliff>

src/main/resources/extensions/settings.yaml

@@ -35,6 +35,11 @@ spec:
           label: 显示评论者设备信息
           name: showCommenterDevice
           value: false
+        - $formkit: checkbox
+          label: 支持私密评论
+          name: enablePrivateComment
+          help: 开启之后，评论者可选是否私密评论，私密评论仅评论者（已登录）和网站管理员（包含评论查看权限）可见，
+          value: false
     - group: security
       label: 安全设置
       formSchema: