From 1cb6a4572979bf0db375c6e342e14bc6e62a0c68 Mon Sep 17 00:00:00 2001
From: Hentry Martin <hentrymartin.p@gmail.com>
Date: Fri, 21 Nov 2025 03:27:01 +0100
Subject: [PATCH 1/3] feat: comments implementation

---
 .../src/lib/assets/icons/icon-reply.svg       |  3 +
 src/apps/review/src/lib/assets/icons/index.ts |  2 +
 .../FieldMarkdownEditor.tsx                   | 32 ++++++-
 .../AiFeedback/AiFeedback.tsx                 | 35 ++++++-
 .../AiFeedbackActions/AiFeedbackActions.tsx   | 11 +++
 .../AiFeedbackComments/AiFeedbackComment.tsx  | 76 +++++++++++++++
 .../AiFeedbackComments.module.scss            |  5 +
 .../AiFeedbackComments/AiFeedbackComments.tsx | 34 ++-----
 .../AiFeedbackReply.module.scss               | 19 ++++
 .../AiFeedbackReply/AiFeedbackReply.tsx       | 94 +++++++++++++++++++
 .../src/lib/models/FormFeedbackReply.model.ts |  6 ++
 .../src/lib/services/scorecards.service.ts    | 13 +++
 src/apps/review/src/lib/utils/validation.ts   | 10 ++
 13 files changed, 306 insertions(+), 34 deletions(-)
 create mode 100644 src/apps/review/src/lib/assets/icons/icon-reply.svg
 create mode 100644 src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComment.tsx
 create mode 100644 src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.module.scss
 create mode 100644 src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx
 create mode 100644 src/apps/review/src/lib/models/FormFeedbackReply.model.ts

diff --git a/src/apps/review/src/lib/assets/icons/icon-reply.svg b/src/apps/review/src/lib/assets/icons/icon-reply.svg
new file mode 100644
index 000000000..91ed863a2
--- /dev/null
+++ b/src/apps/review/src/lib/assets/icons/icon-reply.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1458 15H12.5C12.2639 15 12.066 14.9202 11.9062 14.7605C11.7465 14.6007 11.6667 14.4028 11.6667 14.1667C11.6667 13.9306 11.7465 13.7327 11.9062 13.573C12.066 13.4132 12.2639 13.3334 12.5 13.3334H15.1458L14.4167 12.6042C14.2639 12.4375 14.184 12.2396 14.1771 12.0105C14.1701 11.7813 14.25 11.5834 14.4167 11.4167C14.5833 11.25 14.7778 11.1667 15 11.1667C15.2222 11.1667 15.4167 11.25 15.5833 11.4167L17.75 13.5834C17.9167 13.75 18 13.9445 18 14.1667C18 14.3889 17.9167 14.5834 17.75 14.75L15.5833 16.9167C15.4167 17.0834 15.2222 17.1667 15 17.1667C14.7778 17.1667 14.5833 17.0834 14.4167 16.9167C14.25 16.75 14.1701 16.5521 14.1771 16.323C14.184 16.0938 14.2639 15.8959 14.4167 15.7292L15.1458 15ZM5 15L3.20833 16.7917C3.06944 16.9306 2.91667 16.9653 2.75 16.8959C2.58333 16.8264 2.5 16.6945 2.5 16.5V5.00004C2.5 4.54171 2.66319 4.14935 2.98958 3.82296C3.31597 3.49657 3.70833 3.33337 4.16667 3.33337H14.1667C14.625 3.33337 15.0174 3.49657 15.3438 3.82296C15.6701 4.14935 15.8333 4.54171 15.8333 5.00004V8.33337C15.8333 8.56949 15.7535 8.7674 15.5938 8.92712C15.434 9.08685 15.2361 9.16671 15 9.16671C14.7639 9.16671 14.566 9.08685 14.4062 8.92712C14.2465 8.7674 14.1667 8.56949 14.1667 8.33337V5.00004H4.16667V13.3334H9.16667C9.40278 13.3334 9.60069 13.4132 9.76042 13.573C9.92014 13.7327 10 13.9306 10 14.1667C10 14.4028 9.92014 14.6007 9.76042 14.7605C9.60069 14.9202 9.40278 15 9.16667 15H5Z" fill="#0D61BF"/>
+</svg>
diff --git a/src/apps/review/src/lib/assets/icons/index.ts b/src/apps/review/src/lib/assets/icons/index.ts
index de1e549c0..d1c6b61fd 100644
--- a/src/apps/review/src/lib/assets/icons/index.ts
+++ b/src/apps/review/src/lib/assets/icons/index.ts
@@ -4,6 +4,7 @@ import { ReactComponent as IconChevronDown } from './selector.svg'
 import { ReactComponent as IconError } from './icon-error.svg'
 import { ReactComponent as IconAiReview } from './icon-ai-review.svg'
 import { ReactComponent as IconSubmission } from './icon-phase-submission.svg'
+import { ReactComponent as IconReply } from './icon-reply.svg'
 import { ReactComponent as IconRegistration } from './icon-phase-registration.svg'
 import { ReactComponent as IconPhaseReview } from './icon-phase-review.svg'
 import { ReactComponent as IconAppeal } from './icon-phase-appeal.svg'
@@ -47,6 +48,7 @@ export {
     IconAppeal,
     IconAppealResponse,
     IconPhaseWinners,
+    IconReply,
     IconDeepseekAi,
     IconClock,
     IconPremium,
diff --git a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
index 966b321c2..ef258aef5 100644
--- a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
+++ b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
@@ -1,9 +1,9 @@
 /**
  * Field Markdown Editor.
  */
-import { FC, useCallback, useContext, useEffect, useRef } from 'react'
+import { FC, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import _ from 'lodash'
-import CodeMirror from 'codemirror'
+import CodeMirror, { EditorChange, EditorChangeCancellable } from 'codemirror'
 import EasyMDE from 'easymde'
 import classNames from 'classnames'
 import 'easymde/dist/easymde.min.css'
@@ -44,6 +44,7 @@ interface Props {
     showBorder?: boolean
     disabled?: boolean
     uploadCategory?: string
+    maxCharactersAllowed?: number
 }
 const errorMessages = {
     fileTooLarge:
@@ -149,6 +150,7 @@ type CodeMirrorType = keyof typeof stateStrategy | 'variable-2'
 export const FieldMarkdownEditor: FC<Props> = (props: Props) => {
     const elementRef = useRef<HTMLTextAreaElement>(null)
     const easyMDE = useRef<any>(null)
+    const [remainingCharacters, setRemainingCharacters] = useState((props.maxCharactersAllowed || 0) - (props.initialValue?.length || 0))
     const { challengeId }: ChallengeDetailContextModel = useContext(ChallengeDetailContext)
     const uploadCategory: string = props.uploadCategory ?? 'general'
 
@@ -825,8 +827,30 @@ export const FieldMarkdownEditor: FC<Props> = (props: Props) => {
             uploadImage: true,
         })
 
+        easyMDE.current.codemirror.on("beforeChange", (cm: CodeMirror.Editor, change: EditorChangeCancellable) => {
+            if (change.update) {
+              const current = cm.getValue().length;
+              const incoming = change.text.join("\n").length;
+              const replaced = cm.indexFromPos(change.to) - cm.indexFromPos(change.from);
+          
+              const newLength = current + incoming - replaced;
+          
+              if (props.maxCharactersAllowed) {
+                if (newLength > props.maxCharactersAllowed) {
+                    change.cancel();
+                  }
+              }
+            }
+          });
+
         easyMDE.current.codemirror.on('change', (cm: CodeMirror.Editor) => {
-            props.onChange?.(cm.getValue())
+            if (props.maxCharactersAllowed) {
+                const remainingCharacters = (props.maxCharactersAllowed || 0) - cm.getValue().length
+                setRemainingCharacters(remainingCharacters)
+                props.onChange?.(cm.getValue())
+            } else {
+                props.onChange?.(cm.getValue())
+            }
         })
 
         easyMDE.current.codemirror.on('blur', () => {
@@ -856,7 +880,7 @@ export const FieldMarkdownEditor: FC<Props> = (props: Props) => {
             })}
         >
             <textarea ref={elementRef} placeholder={props.placeholder} />
-
+            {props.maxCharactersAllowed && <div>{remainingCharacters} characters remaining</div>}
             {props.error && (
                 <div className={classNames(styles.error, 'errorMessage')}>
                     {props.error}
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx
index 2e1007dd5..9d1e2ad81 100644
--- a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx
@@ -1,7 +1,7 @@
-import { FC, useMemo } from 'react'
+import { FC, useCallback, useMemo, useState } from 'react'
 
 import { IconAiReview } from '~/apps/review/src/lib/assets/icons'
-import { ScorecardQuestion } from '~/apps/review/src/lib/models'
+import { ReviewsContextModel, ScorecardQuestion } from '~/apps/review/src/lib/models'
 
 import { ScorecardViewerContextValue, useScorecardViewerContext } from '../../ScorecardViewer.context'
 import { ScorecardQuestionRow } from '../ScorecardQuestionRow'
@@ -11,6 +11,11 @@ import { AiFeedbackActions } from '../AiFeedbackActions/AiFeedbackActions'
 import { AiFeedbackComments } from '../AiFeedbackComments/AiFeedbackComments'
 
 import styles from './AiFeedback.module.scss'
+import { AiFeedbackReply } from '../AiFeedbackReply/AiFeedbackReply'
+import { createFeedbackComment } from '~/apps/review/src/lib/services'
+import { useReviewsContext } from '~/apps/review/src/pages/reviews/ReviewsContext'
+import { mutate } from 'swr'
+import { EnvironmentConfig } from '~/config'
 
 interface AiFeedbackProps {
     question: ScorecardQuestion
@@ -21,9 +26,23 @@ const AiFeedback: FC<AiFeedbackProps> = props => {
     const feedback: any = useMemo(() => (
         aiFeedbackItems?.find((r: any) => r.scorecardQuestionId === props.question.id)
     ), [props.question.id, aiFeedbackItems])
+    const { workflowId, workflowRun }: ReviewsContextModel = useReviewsContext()
+    const [showReply, setShowReply] = useState(false)
 
     const commentsArr: any[] = (feedback?.comments) || []
 
+    const onShowReply = useCallback(() => {
+        setShowReply(!showReply)
+    }, [])
+
+    const onSubmitReply = useCallback(async (content: string) => {
+        await createFeedbackComment(workflowId as string, workflowRun?.id as string, feedback?.id, {
+            content,
+        })
+        await mutate(`${EnvironmentConfig.API.V6}/workflows/${workflowId}/runs/${workflowRun?.id}/items`)
+        setShowReply(false)
+    }, [workflowId, workflowRun?.id, feedback?.id])
+
     if (!aiFeedbackItems?.length || !feedback) {
         return <></>
     }
@@ -50,10 +69,18 @@ const AiFeedback: FC<AiFeedbackProps> = props => {
 
             <MarkdownReview value={feedback.content} />
 
-            <AiFeedbackActions feedback={feedback} actionType='runItem' />
+            <AiFeedbackActions feedback={feedback} actionType='runItem' onPressReply={onShowReply} />
+
+            {
+                showReply && (
+                    <AiFeedbackReply onSubmitReply={onSubmitReply} onCloseReply={function closeReply() {
+                        setShowReply(false)
+                    }} />
+                )
+            }
 
             {commentsArr.length > 0 && (
-                <AiFeedbackComments comments={commentsArr} feedback={feedback} />
+                <AiFeedbackComments comments={commentsArr} feedback={feedback} isRoot />
             )}
         </ScorecardQuestionRow>
     )
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackActions/AiFeedbackActions.tsx b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackActions/AiFeedbackActions.tsx
index ab89c9263..a69c84c91 100644
--- a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackActions/AiFeedbackActions.tsx
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackActions/AiFeedbackActions.tsx
@@ -3,6 +3,7 @@ import { FC, useCallback, useContext, useEffect, useState } from 'react'
 import { mutate } from 'swr'
 
 import {
+    IconReply,
     IconThumbsDown,
     IconThumbsDownFilled,
     IconThumbsUp,
@@ -27,6 +28,7 @@ interface AiFeedbackActionsProps {
     actionType: 'comment' | 'runItem'
     comment?: AiFeedbackComment
     feedback?: any
+    onPressReply: () => void
 }
 
 export const AiFeedbackActions: FC<AiFeedbackActionsProps> = props => {
@@ -222,6 +224,15 @@ export const AiFeedbackActions: FC<AiFeedbackActionsProps> = props => {
                 {userVote === 'DOWNVOTE' ? <IconThumbsDownFilled /> : <IconThumbsDown />}
                 <span className={styles.count}>{downVotes}</span>
             </button>
+
+            <button
+                type='button'
+                className={styles.actionBtn}
+                onClick={props.onPressReply}
+            >
+                <IconReply />
+                <span className={styles.count}>Reply</span>
+            </button>
         </div>
     )
 }
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComment.tsx b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComment.tsx
new file mode 100644
index 000000000..519051b7e
--- /dev/null
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComment.tsx
@@ -0,0 +1,76 @@
+import { FC, useCallback, useState } from "react"
+import { AiFeedbackComments, AiFeedbackComment as AiFeedbackCommentType } from "./AiFeedbackComments"
+import { mutate } from "swr"
+import moment from "moment"
+import classNames from "classnames"
+
+import { useReviewsContext } from "~/apps/review/src/pages/reviews/ReviewsContext"
+import { createFeedbackComment } from "~/apps/review/src/lib/services"
+import { AiFeedbackItem, ReviewsContextModel } from "~/apps/review/src/lib/models"
+import { EnvironmentConfig } from "~/config"
+
+import { AiFeedbackActions } from "../AiFeedbackActions/AiFeedbackActions"
+import { AiFeedbackReply } from "../AiFeedbackReply/AiFeedbackReply"
+import { MarkdownReview } from "../../../../MarkdownReview"
+
+import styles from "./AiFeedbackComments.module.scss"
+
+interface AiFeedbackCommentProps {
+    comment: AiFeedbackCommentType
+    feedback: AiFeedbackItem
+    isRoot: boolean
+}
+
+export const AiFeedbackComment: FC<AiFeedbackCommentProps> = (props) => {
+    const { workflowId, workflowRun }: ReviewsContextModel = useReviewsContext()
+    const [showReply, setShowReply] = useState(false)
+
+    const onShowReply = useCallback(() => {
+        setShowReply(!showReply)
+    }, [])
+
+    const onSubmitReply = useCallback(async (content: string, comment: AiFeedbackCommentType) => {
+        await createFeedbackComment(workflowId as string, workflowRun?.id as string, props.feedback?.id, {
+            content,
+            parentId: comment.id,
+        })
+        await mutate(`${EnvironmentConfig.API.V6}/workflows/${workflowId}/runs/${workflowRun?.id}/items`)
+        setShowReply(false)
+    }, [workflowId, workflowRun?.id, props.feedback?.id])
+    return (
+        <div key={props.comment.id} className={classNames(styles.comment, {
+            [styles.noMarginTop]: !props.isRoot,
+        })}>
+            <div className={styles.info}>
+                <span className={styles.reply}>Reply</span>
+                <span className={styles.text}> by </span>
+                <span
+                    style={{
+                        color: props.comment.createdUser.ratingColor || '#0A0A0A',
+                    }}
+                    className={styles.name}
+                >
+                    {props.comment.createdUser.handle}
+                </span>
+                <span className={styles.text}> on </span>
+                <span className={styles.date}>
+                    { moment(props.comment.createdAt)
+                        .local()
+                        .format('MMM DD, hh:mm A')}
+                </span>
+            </div>
+            <MarkdownReview value={props.comment.content} />
+            <AiFeedbackActions feedback={props.feedback} comment={props.comment} actionType='comment' onPressReply={onShowReply}/>
+            {
+                showReply && (
+                    <AiFeedbackReply onSubmitReply={function submitReply(content: string) {
+                        return onSubmitReply(content, props.comment)
+                    }} onCloseReply={function closeReply() {
+                        setShowReply(false)
+                    }} />
+                )
+            }
+            <AiFeedbackComments comments={props.comment.comments} feedback={props.feedback} isRoot={false} />
+        </div>
+    )
+}
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.module.scss b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.module.scss
index 1a465a9b1..de5466d4e 100644
--- a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.module.scss
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.module.scss
@@ -6,6 +6,11 @@
         margin-top: 32px;
         background-color: #E0E4E8;
         padding: 16px;
+        &.noMarginTop {
+            margin-top: 0;
+            padding: 0;
+            padding-left: 16px;
+        }
         .info {
             margin: 16px 0;
             font-size: 14px;
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.tsx b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.tsx
index 46bb0ec91..92bb254d8 100644
--- a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.tsx
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.tsx
@@ -1,9 +1,9 @@
 import { FC } from 'react'
-import moment from 'moment'
 
-import { AiFeedbackActions } from '../AiFeedbackActions/AiFeedbackActions'
+import { AiFeedbackComment } from './AiFeedbackComment'
 
 import styles from './AiFeedbackComments.module.scss'
+import classNames from 'classnames'
 
 export interface AiFeedbackVote {
     id: string
@@ -12,6 +12,7 @@ export interface AiFeedbackVote {
     createdAt: string
     createdBy: string
 }
+
 export interface AiFeedbackComment {
     id: string
     content: string
@@ -23,40 +24,21 @@ export interface AiFeedbackComment {
         handle: string
         ratingColor: string
     }
+    comments: AiFeedbackComment[]
     votes: AiFeedbackVote[]
 }
 
 interface AiFeedbackCommentsProps {
     comments: AiFeedbackComment[]
     feedback: any
+    isRoot: boolean
 }
 
 export const AiFeedbackComments: FC<AiFeedbackCommentsProps> = props => (
-    <div className={styles.comments}>
-        {props.comments.filter(c => !c.parentId)
+    <div className={classNames(styles.comments)}>
+        {props.comments
             .map((comment: AiFeedbackComment) => (
-                <div key={comment.id} className={styles.comment}>
-                    <div className={styles.info}>
-                        <span className={styles.reply}>Reply</span>
-                        <span className={styles.text}> by </span>
-                        <span
-                            style={{
-                                color: comment.createdUser.ratingColor || '#0A0A0A',
-                            }}
-                            className={styles.name}
-                        >
-                            {comment.createdUser.handle}
-                        </span>
-                        <span className={styles.text}> on </span>
-                        <span className={styles.date}>
-                            { moment(comment.createdAt)
-                                .local()
-                                .format('MMM DD, hh:mm A')}
-                        </span>
-                    </div>
-                    <div className={styles.commentContent}>{comment.content}</div>
-                    <AiFeedbackActions feedback={props.feedback} comment={comment} actionType='comment' />
-                </div>
+                <AiFeedbackComment isRoot={props.isRoot} comment={comment} feedback={props.feedback} />
             ))}
     </div>
 )
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.module.scss b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.module.scss
new file mode 100644
index 000000000..15366a2fd
--- /dev/null
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.module.scss
@@ -0,0 +1,19 @@
+@import '@libs/ui/styles/includes';
+
+.replyWrapper {
+    background-color: #E0E4E8;
+    padding: 16px;
+    margin-top: 16px;
+    .title {
+       font-family: "Nunito Sans", sans-serif; 
+       font-weight: 700;
+       color: #0A0A0A;
+       margin-bottom: 16px;
+    }
+    .blockBtns {
+        margin-top: 24px;
+        .cancelButton {
+            margin-left: 16px;
+        }
+    }
+}
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx
new file mode 100644
index 000000000..767eb9f1f
--- /dev/null
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx
@@ -0,0 +1,94 @@
+import {
+    Controller,
+    ControllerRenderProps,
+    useForm,
+    UseFormReturn,
+} from 'react-hook-form'
+import { get } from 'lodash'
+
+import styles from "./AiFeedbackReply.module.scss"
+import { formFeedbackReplySchema } from '~/apps/review/src/lib/utils'
+import { yupResolver } from '@hookform/resolvers/yup'
+import { FormFeedbackReply } from '~/apps/review/src/lib/models/FormFeedbackReply.model'
+import { FC, useCallback, useState } from 'react'
+import { FieldMarkdownEditor } from '../../../../FieldMarkdownEditor'
+import classNames from 'classnames'
+
+interface AiFeedbackReplyProps {
+    onCloseReply: () => void
+    onSubmitReply: (content: string) => Promise<void>
+}
+
+export const AiFeedbackReply: FC<AiFeedbackReplyProps> = (props) => {
+    const [reply, setReply] = useState('')
+    const [isSavingReply, setSavingReply] = useState(false)
+    const {
+            handleSubmit,
+            control,
+            formState: { errors },
+        }: UseFormReturn<FormFeedbackReply> = useForm({
+            defaultValues: {
+                reply: '',
+            },
+            mode: 'all',
+            resolver: yupResolver(formFeedbackReplySchema),
+        })
+    
+    const onSubmit = useCallback(async (data: FormFeedbackReply) => {
+        await props.onSubmitReply(data.reply)
+        setReply('')
+    }, [props.onSubmitReply, setReply])
+
+    return (
+        <div className={styles.replyWrapper}>
+            <div className={styles.title}>Reply</div>
+            <form
+                className={styles.blockForm}
+                onSubmit={handleSubmit(onSubmit)}
+            >
+                <Controller
+                    name='reply'
+                    control={control}
+                    render={function render(controlProps: {
+                        field: ControllerRenderProps<
+                            FormFeedbackReply,
+                            'reply'
+                        >
+                    }) {
+                        return (
+                            <FieldMarkdownEditor
+                                initialValue={reply}
+                                className={styles.markdownEditor}
+                                onChange={controlProps.field.onChange}
+                                showBorder
+                                onBlur={controlProps.field.onBlur}
+                                error={get(errors, 'reply.message')}
+                                disabled={isSavingReply}
+                                uploadCategory='appeal'
+                                maxCharactersAllowed={10}
+                            />
+                        )
+                    }}
+                />
+                <div className={styles.blockBtns}>
+                    <button
+                        disabled={isSavingReply}
+                        className='filledButton'
+                        type='submit'
+                    >
+                        Submit Reply
+                    </button>
+                    <button
+                        type='button'
+                        className={classNames('borderButton', styles.cancelButton)}
+                        onClick={function onClick() {
+                            props.onCloseReply()
+                        }}
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </form>
+        </div>
+    )
+}
diff --git a/src/apps/review/src/lib/models/FormFeedbackReply.model.ts b/src/apps/review/src/lib/models/FormFeedbackReply.model.ts
new file mode 100644
index 000000000..72424a502
--- /dev/null
+++ b/src/apps/review/src/lib/models/FormFeedbackReply.model.ts
@@ -0,0 +1,6 @@
+/**
+ * Form Feedback Reply
+ */
+export interface FormFeedbackReply {
+    reply: string
+}
diff --git a/src/apps/review/src/lib/services/scorecards.service.ts b/src/apps/review/src/lib/services/scorecards.service.ts
index 6ff09fb73..6b1b0051d 100644
--- a/src/apps/review/src/lib/services/scorecards.service.ts
+++ b/src/apps/review/src/lib/services/scorecards.service.ts
@@ -56,3 +56,16 @@ export const updateLikesOrDislikesOnRunItemComment = (
     `${EnvironmentConfig.API.V6}/workflows/${workflowId}/runs/${runId}/items/${feedbackId}/comments/${commentId}`,
     body,
 )
+
+export const createFeedbackComment = (
+    workflowId: string,
+    runId: string,
+    feedbackId: string,
+    body: {
+        content: string
+        parentId?: string
+    },
+): Promise<void> => xhrPostAsync(
+    `${EnvironmentConfig.API.V6}/workflows/${workflowId}/runs/${runId}/items/${feedbackId}/comments`,
+    body,
+)
diff --git a/src/apps/review/src/lib/utils/validation.ts b/src/apps/review/src/lib/utils/validation.ts
index e3adca91a..9f8295963 100644
--- a/src/apps/review/src/lib/utils/validation.ts
+++ b/src/apps/review/src/lib/utils/validation.ts
@@ -5,6 +5,7 @@
 import * as Yup from 'yup'
 
 import { FormAppealResponse, FormContactManager, FormManagerComment, FormReviews } from '../models'
+import { FormFeedbackReply } from '../models/FormFeedbackReply.model'
 
 /**
  * Validation schema for form appeal response
@@ -23,6 +24,15 @@ export const formManagerCommentSchema: Yup.ObjectSchema<FormManagerComment>
             .required('Response is mandatory'),
     })
 
+/**
+ * Validation schema for form appeal response
+ */
+export const formFeedbackReplySchema: Yup.ObjectSchema<FormFeedbackReply>
+    = Yup.object({
+        reply: Yup.string()
+            .required('Reply text is mandatory'),
+    })
+
 /**
  * validation schema for form reviews
  */

From d244076c9fb49701bdfd92451cbd3b7719aadda2 Mon Sep 17 00:00:00 2001
From: Hentry Martin <hentrymartin.p@gmail.com>
Date: Fri, 21 Nov 2025 16:52:46 +0100
Subject: [PATCH 2/3] fix: lint

---
 .../FieldMarkdownEditor.tsx                   | 44 ++++++++------
 .../AiFeedback/AiFeedback.tsx                 | 18 +++---
 .../AiFeedbackComments/AiFeedbackComment.tsx  | 57 +++++++++++--------
 .../AiFeedbackComments/AiFeedbackComments.tsx |  3 +-
 .../AiFeedbackReply/AiFeedbackReply.tsx       | 36 ++++++------
 5 files changed, 91 insertions(+), 67 deletions(-)

diff --git a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
index ef258aef5..39b4311df 100644
--- a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
+++ b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
@@ -3,7 +3,7 @@
  */
 import { FC, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import _ from 'lodash'
-import CodeMirror, { EditorChange, EditorChangeCancellable } from 'codemirror'
+import CodeMirror, { EditorChangeCancellable } from 'codemirror'
 import EasyMDE from 'easymde'
 import classNames from 'classnames'
 import 'easymde/dist/easymde.min.css'
@@ -150,7 +150,9 @@ type CodeMirrorType = keyof typeof stateStrategy | 'variable-2'
 export const FieldMarkdownEditor: FC<Props> = (props: Props) => {
     const elementRef = useRef<HTMLTextAreaElement>(null)
     const easyMDE = useRef<any>(null)
-    const [remainingCharacters, setRemainingCharacters] = useState((props.maxCharactersAllowed || 0) - (props.initialValue?.length || 0))
+    const [remainingCharacters, setRemainingCharacters] = useState(
+        (props.maxCharactersAllowed || 0) - (props.initialValue?.length || 0),
+    )
     const { challengeId }: ChallengeDetailContextModel = useContext(ChallengeDetailContext)
     const uploadCategory: string = props.uploadCategory ?? 'general'
 
@@ -827,26 +829,26 @@ export const FieldMarkdownEditor: FC<Props> = (props: Props) => {
             uploadImage: true,
         })
 
-        easyMDE.current.codemirror.on("beforeChange", (cm: CodeMirror.Editor, change: EditorChangeCancellable) => {
+        easyMDE.current.codemirror.on('beforeChange', (cm: CodeMirror.Editor, change: EditorChangeCancellable) => {
             if (change.update) {
-              const current = cm.getValue().length;
-              const incoming = change.text.join("\n").length;
-              const replaced = cm.indexFromPos(change.to) - cm.indexFromPos(change.from);
-          
-              const newLength = current + incoming - replaced;
-          
-              if (props.maxCharactersAllowed) {
-                if (newLength > props.maxCharactersAllowed) {
-                    change.cancel();
-                  }
-              }
+                const current = cm.getValue().length
+                const incoming = change.text.join('\n').length
+                const replaced = cm.indexFromPos(change.to) - cm.indexFromPos(change.from)
+
+                const newLength = current + incoming - replaced
+
+                if (props.maxCharactersAllowed) {
+                    if (newLength > props.maxCharactersAllowed) {
+                        change.cancel()
+                    }
+                }
             }
-          });
+        })
 
         easyMDE.current.codemirror.on('change', (cm: CodeMirror.Editor) => {
             if (props.maxCharactersAllowed) {
-                const remainingCharacters = (props.maxCharactersAllowed || 0) - cm.getValue().length
-                setRemainingCharacters(remainingCharacters)
+                const remaining = (props.maxCharactersAllowed || 0) - cm.getValue().length
+                setRemainingCharacters(remaining)
                 props.onChange?.(cm.getValue())
             } else {
                 props.onChange?.(cm.getValue())
@@ -880,7 +882,13 @@ export const FieldMarkdownEditor: FC<Props> = (props: Props) => {
             })}
         >
             <textarea ref={elementRef} placeholder={props.placeholder} />
-            {props.maxCharactersAllowed && <div>{remainingCharacters} characters remaining</div>}
+            {props.maxCharactersAllowed && (
+                <div>
+                    {remainingCharacters}
+                    {' '}
+                    characters remaining
+                </div>
+            )}
             {props.error && (
                 <div className={classNames(styles.error, 'errorMessage')}>
                     {props.error}
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx
index 9d1e2ad81..0fb2912c8 100644
--- a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx
@@ -2,6 +2,9 @@ import { FC, useCallback, useMemo, useState } from 'react'
 
 import { IconAiReview } from '~/apps/review/src/lib/assets/icons'
 import { ReviewsContextModel, ScorecardQuestion } from '~/apps/review/src/lib/models'
+import { createFeedbackComment } from '~/apps/review/src/lib/services'
+import { useReviewsContext } from '~/apps/review/src/pages/reviews/ReviewsContext'
+import { EnvironmentConfig } from '~/config'
 
 import { ScorecardViewerContextValue, useScorecardViewerContext } from '../../ScorecardViewer.context'
 import { ScorecardQuestionRow } from '../ScorecardQuestionRow'
@@ -9,13 +12,9 @@ import { ScorecardScore } from '../../ScorecardScore'
 import { MarkdownReview } from '../../../../MarkdownReview'
 import { AiFeedbackActions } from '../AiFeedbackActions/AiFeedbackActions'
 import { AiFeedbackComments } from '../AiFeedbackComments/AiFeedbackComments'
+import { AiFeedbackReply } from '../AiFeedbackReply/AiFeedbackReply'
 
 import styles from './AiFeedback.module.scss'
-import { AiFeedbackReply } from '../AiFeedbackReply/AiFeedbackReply'
-import { createFeedbackComment } from '~/apps/review/src/lib/services'
-import { useReviewsContext } from '~/apps/review/src/pages/reviews/ReviewsContext'
-import { mutate } from 'swr'
-import { EnvironmentConfig } from '~/config'
 
 interface AiFeedbackProps {
     question: ScorecardQuestion
@@ -73,9 +72,12 @@ const AiFeedback: FC<AiFeedbackProps> = props => {
 
             {
                 showReply && (
-                    <AiFeedbackReply onSubmitReply={onSubmitReply} onCloseReply={function closeReply() {
-                        setShowReply(false)
-                    }} />
+                    <AiFeedbackReply
+                        onSubmitReply={onSubmitReply}
+                        onCloseReply={function closeReply() {
+                            setShowReply(false)
+                        }}
+                    />
                 )
             }
 
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComment.tsx b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComment.tsx
index 519051b7e..ad03040d7 100644
--- a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComment.tsx
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComment.tsx
@@ -1,19 +1,19 @@
-import { FC, useCallback, useState } from "react"
-import { AiFeedbackComments, AiFeedbackComment as AiFeedbackCommentType } from "./AiFeedbackComments"
-import { mutate } from "swr"
-import moment from "moment"
-import classNames from "classnames"
+import { FC, useCallback, useState } from 'react'
+import { mutate } from 'swr'
+import classNames from 'classnames'
+import moment from 'moment'
 
-import { useReviewsContext } from "~/apps/review/src/pages/reviews/ReviewsContext"
-import { createFeedbackComment } from "~/apps/review/src/lib/services"
-import { AiFeedbackItem, ReviewsContextModel } from "~/apps/review/src/lib/models"
-import { EnvironmentConfig } from "~/config"
+import { useReviewsContext } from '~/apps/review/src/pages/reviews/ReviewsContext'
+import { createFeedbackComment } from '~/apps/review/src/lib/services'
+import { AiFeedbackItem, ReviewsContextModel } from '~/apps/review/src/lib/models'
+import { EnvironmentConfig } from '~/config'
 
-import { AiFeedbackActions } from "../AiFeedbackActions/AiFeedbackActions"
-import { AiFeedbackReply } from "../AiFeedbackReply/AiFeedbackReply"
-import { MarkdownReview } from "../../../../MarkdownReview"
+import { AiFeedbackActions } from '../AiFeedbackActions/AiFeedbackActions'
+import { AiFeedbackReply } from '../AiFeedbackReply/AiFeedbackReply'
+import { MarkdownReview } from '../../../../MarkdownReview'
 
-import styles from "./AiFeedbackComments.module.scss"
+import { AiFeedbackComment as AiFeedbackCommentType, AiFeedbackComments } from './AiFeedbackComments'
+import styles from './AiFeedbackComments.module.scss'
 
 interface AiFeedbackCommentProps {
     comment: AiFeedbackCommentType
@@ -21,7 +21,7 @@ interface AiFeedbackCommentProps {
     isRoot: boolean
 }
 
-export const AiFeedbackComment: FC<AiFeedbackCommentProps> = (props) => {
+export const AiFeedbackComment: FC<AiFeedbackCommentProps> = props => {
     const { workflowId, workflowRun }: ReviewsContextModel = useReviewsContext()
     const [showReply, setShowReply] = useState(false)
 
@@ -38,9 +38,12 @@ export const AiFeedbackComment: FC<AiFeedbackCommentProps> = (props) => {
         setShowReply(false)
     }, [workflowId, workflowRun?.id, props.feedback?.id])
     return (
-        <div key={props.comment.id} className={classNames(styles.comment, {
-            [styles.noMarginTop]: !props.isRoot,
-        })}>
+        <div
+            key={props.comment.id}
+            className={classNames(styles.comment, {
+                [styles.noMarginTop]: !props.isRoot,
+            })}
+        >
             <div className={styles.info}>
                 <span className={styles.reply}>Reply</span>
                 <span className={styles.text}> by </span>
@@ -60,14 +63,22 @@ export const AiFeedbackComment: FC<AiFeedbackCommentProps> = (props) => {
                 </span>
             </div>
             <MarkdownReview value={props.comment.content} />
-            <AiFeedbackActions feedback={props.feedback} comment={props.comment} actionType='comment' onPressReply={onShowReply}/>
+            <AiFeedbackActions
+                feedback={props.feedback}
+                comment={props.comment}
+                actionType='comment'
+                onPressReply={onShowReply}
+            />
             {
                 showReply && (
-                    <AiFeedbackReply onSubmitReply={function submitReply(content: string) {
-                        return onSubmitReply(content, props.comment)
-                    }} onCloseReply={function closeReply() {
-                        setShowReply(false)
-                    }} />
+                    <AiFeedbackReply
+                        onSubmitReply={function submitReply(content: string) {
+                            return onSubmitReply(content, props.comment)
+                        }}
+                        onCloseReply={function closeReply() {
+                            setShowReply(false)
+                        }}
+                    />
                 )
             }
             <AiFeedbackComments comments={props.comment.comments} feedback={props.feedback} isRoot={false} />
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.tsx b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.tsx
index 92bb254d8..c4cf5171b 100644
--- a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.tsx
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComments.tsx
@@ -1,9 +1,8 @@
 import { FC } from 'react'
+import classNames from 'classnames'
 
 import { AiFeedbackComment } from './AiFeedbackComment'
-
 import styles from './AiFeedbackComments.module.scss'
-import classNames from 'classnames'
 
 export interface AiFeedbackVote {
     id: string
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx
index 767eb9f1f..db64b5164 100644
--- a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx
@@ -5,38 +5,42 @@ import {
     UseFormReturn,
 } from 'react-hook-form'
 import { get } from 'lodash'
+import { FC, useCallback, useState } from 'react'
+import classNames from 'classnames'
 
-import styles from "./AiFeedbackReply.module.scss"
-import { formFeedbackReplySchema } from '~/apps/review/src/lib/utils'
 import { yupResolver } from '@hookform/resolvers/yup'
+import { formFeedbackReplySchema } from '~/apps/review/src/lib/utils'
 import { FormFeedbackReply } from '~/apps/review/src/lib/models/FormFeedbackReply.model'
-import { FC, useCallback, useState } from 'react'
+
 import { FieldMarkdownEditor } from '../../../../FieldMarkdownEditor'
-import classNames from 'classnames'
+
+import styles from './AiFeedbackReply.module.scss'
 
 interface AiFeedbackReplyProps {
     onCloseReply: () => void
     onSubmitReply: (content: string) => Promise<void>
 }
 
-export const AiFeedbackReply: FC<AiFeedbackReplyProps> = (props) => {
+export const AiFeedbackReply: FC<AiFeedbackReplyProps> = props => {
     const [reply, setReply] = useState('')
     const [isSavingReply, setSavingReply] = useState(false)
     const {
-            handleSubmit,
-            control,
-            formState: { errors },
-        }: UseFormReturn<FormFeedbackReply> = useForm({
-            defaultValues: {
-                reply: '',
-            },
-            mode: 'all',
-            resolver: yupResolver(formFeedbackReplySchema),
-        })
-    
+        handleSubmit,
+        control,
+        formState: { errors },
+    }: UseFormReturn<FormFeedbackReply> = useForm({
+        defaultValues: {
+            reply: '',
+        },
+        mode: 'all',
+        resolver: yupResolver(formFeedbackReplySchema),
+    })
+
     const onSubmit = useCallback(async (data: FormFeedbackReply) => {
+        setSavingReply(true)
         await props.onSubmitReply(data.reply)
         setReply('')
+        setSavingReply(false)
     }, [props.onSubmitReply, setReply])
 
     return (

From 5e6dc93937bafa45382e0594313309a16aa4ceda Mon Sep 17 00:00:00 2001
From: Hentry Martin <hentrymartin.p@gmail.com>
Date: Fri, 21 Nov 2025 17:11:29 +0100
Subject: [PATCH 3/3] fix: lint

---
 .../FieldMarkdownEditor/FieldMarkdownEditor.module.scss    | 7 +++++++
 .../components/FieldMarkdownEditor/FieldMarkdownEditor.tsx | 2 +-
 .../ScorecardQuestion/AiFeedback/AiFeedback.tsx            | 1 +
 .../ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx  | 2 +-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.module.scss b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.module.scss
index 309361ade..e4fa554e1 100644
--- a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.module.scss
+++ b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.module.scss
@@ -157,6 +157,13 @@ $error-line-height: 14px;
     }
 }
 
+.remainingCharacters {
+    font-family: "Nunito Sans", sans-serif;
+    color: var(--GrayFontColor);
+    font-size: 14px;
+    line-height: 20px;
+}
+
 .error {
     display: flex;
     align-items: center;
diff --git a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
index 39b4311df..58897ba0c 100644
--- a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
+++ b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
@@ -883,7 +883,7 @@ export const FieldMarkdownEditor: FC<Props> = (props: Props) => {
         >
             <textarea ref={elementRef} placeholder={props.placeholder} />
             {props.maxCharactersAllowed && (
-                <div>
+                <div className={styles.remainingCharacters}>
                     {remainingCharacters}
                     {' '}
                     characters remaining
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx
index 0fb2912c8..10da6bbb5 100644
--- a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx
@@ -1,4 +1,5 @@
 import { FC, useCallback, useMemo, useState } from 'react'
+import { mutate } from 'swr'
 
 import { IconAiReview } from '~/apps/review/src/lib/assets/icons'
 import { ReviewsContextModel, ScorecardQuestion } from '~/apps/review/src/lib/models'
diff --git a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx
index db64b5164..0fa8a4485 100644
--- a/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx
+++ b/src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx
@@ -69,7 +69,7 @@ export const AiFeedbackReply: FC<AiFeedbackReplyProps> = props => {
                                 error={get(errors, 'reply.message')}
                                 disabled={isSavingReply}
                                 uploadCategory='appeal'
-                                maxCharactersAllowed={10}
+                                maxCharactersAllowed={5000}
                             />
                         )
                     }}