feat (comments): Allow user to delete and edit comment.

Signed-off-by: Kshitij Fadnis <cool.kshij@gmail.com>

VERSION

@@ -1 +1 @@
-1.0.1
+1.0.2

src/components/comments/CommentsViewer.tsx

@@ -23,9 +23,22 @@ import { Button, Tag } from '@carbon/react';
 import { Edit, TrashCan } from '@carbon/icons-react';
 
 import { TaskComment, Model } from '@/src/types';
+import EditCommentModal from '@/src/components/comments/EditCommentModal';
 
 import classes from './CommentViewer.module.scss';
 
+// ===================================================================================
+//                               TYPES
+// ===================================================================================
+interface Props {
+  comments: TaskComment[];
+  onUpdate: Function;
+  models: Map<string, Model> | undefined;
+}
+
+// ===================================================================================
+//                               RENDER FUNCTION
+// ===================================================================================
 function Comment({
   id,
   comment,
@@ -40,8 +53,6 @@ function Comment({
   models: Map<string, Model> | undefined;
 }) {
   const [editing, setEditing] = useState<boolean>(false);
-  const [editedCommentText, setEditedCommentText] = useState<string>('');
-  const [author, setAuthor] = useState<string>('');
 
   const [tag, tagType]: [string, string] = useMemo(() => {
     if (comment.provenance) {
@@ -63,66 +74,73 @@ function Comment({
   }, [comment.provenance, models]);
 
   return (
-    <div className={classes.comment}>
-      <div className={classes.commentHeader}>
-        <div className={classes.commentHeaderAuthor}>
-          <span className={classes.label}>Author</span>
-          <span>{comment.author}</span>
-        </div>
-        <div className={classes.commentHeaderProvenance}>
-          <span className={classes.label}>Provenance</span>
-          <Tag className={classes.commentTag} type={tagType}>
-            {tag}
-          </Tag>
-        </div>
+    <>
+      <EditCommentModal
+        comment={comment}
+        open={editing}
+        onClose={() => setEditing(false)}
+        onSubmit={(updatedComment) => {
+          // Step 1: Update comment
+          onEdit(updatedComment);
 
-        <span className={classes.commentHeaderTimestamp}>
-          <span className={classes.label}>Last updated</span>
-          <span>{new Date(comment.updated).toLocaleDateString()}</span>
-        </span>
-      </div>
+          // Step 2: Close editing modal
+          setEditing(false);
+        }}
+        models={models}
+      />
+      <div className={classes.comment}>
+        <div className={classes.commentHeader}>
+          <div className={classes.commentHeaderAuthor}>
+            <span className={classes.label}>Author</span>
+            <span>{comment.author}</span>
+          </div>
+          <div className={classes.commentHeaderProvenance}>
+            <span className={classes.label}>Provenance</span>
+            <Tag className={classes.commentTag} type={tagType}>
+              {tag}
+            </Tag>
+          </div>
+
+          <span className={classes.commentHeaderTimestamp}>
+            <span className={classes.label}>Last updated</span>
+            <span>{new Date(comment.updated).toLocaleDateString()}</span>
+          </span>
+        </div>
 
-      <div className={classes.commentBody}>{comment.comment}</div>
-      <div className={classes.commentActions}>
-        <Button
-          id={`${id}-editBtn`}
-          className={classes.commentBtn}
-          kind={'ghost'}
-          onClick={() => {
-            setEditing(true);
-          }}
-          disabled={true}
-        >
-          <span>Edit</span>
-          <Edit />
-        </Button>
-        <Button
-          id={`${id}-deleteBtn`}
-          className={classes.commentBtn}
-          kind={'ghost'}
-          onClick={onDelete}
-          disabled={true}
-        >
-          <span>Delete</span>
-          <TrashCan />
-        </Button>
+        <div className={classes.commentBody}>{comment.comment}</div>
+        <div className={classes.commentActions}>
+          <Button
+            id={`${id}-editBtn`}
+            className={classes.commentBtn}
+            kind={'ghost'}
+            onClick={() => {
+              setEditing(true);
+            }}
+          >
+            <span>Edit</span>
+            <Edit />
+          </Button>
+          <Button
+            id={`${id}-deleteBtn`}
+            className={classes.commentBtn}
+            kind={'ghost'}
+            onClick={onDelete}
+          >
+            <span>Delete</span>
+            <TrashCan />
+          </Button>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 
-interface Props {
-  comments: TaskComment[];
-  onSelect: Function;
-  onEdit: Function;
-  onDelete: Function;
-  models: Map<string, Model> | undefined;
-}
+// ===================================================================================
+//                               MAIN FUNCTION
+// ===================================================================================
 export default memo(function ViewComments({
   comments,
-  onSelect,
-  onEdit,
-  onDelete,
+  onUpdate,
   models,
 }: Props) {
   return (
@@ -134,8 +152,10 @@ export default memo(function ViewComments({
             key={`comment-${commentIdx}`}
             id={`comment-${commentIdx}`}
             comment={comment}
-            onEdit={onEdit}
-            onDelete={onDelete}
+            onEdit={(updatedComment) =>
+              onUpdate(comments.toSpliced(commentIdx, 1, updatedComment))
+            }
+            onDelete={() => onUpdate(comments.toSpliced(commentIdx, 1))}
             models={models}
           />
         );

src/components/comments/EditCommentModal.tsx

@@ -0,0 +1,126 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import { useState, useMemo } from 'react';
+import { Modal, TextArea, TextInput, Tag } from '@carbon/react';
+
+import { Model, TaskComment } from '@/src/types';
+import classes from './AddCommentModal.module.scss';
+
+// ===================================================================================
+//                               TYPES
+// ===================================================================================
+interface Props {
+  comment: TaskComment;
+  onSubmit: Function;
+  onClose: Function;
+  open: boolean;
+  models: Map<string, Model> | undefined;
+}
+
+// ===================================================================================
+//                               MAIN FUNCTION
+// ===================================================================================
+export default function EditCommentModal({
+  comment,
+  onSubmit,
+  onClose,
+  open = false,
+  models,
+}: Props) {
+  const [commentText, setCommentText] = useState<string>(comment.comment);
+  const [author, setAuthor] = useState<string>('');
+  const [tag, tagType] = useMemo(() => {
+    if (comment.provenance) {
+      if (comment.provenance.component.includes('input')) {
+        return ['Input', 'purple'];
+      } else if (comment.provenance.component.includes('document_')) {
+        return ['Contexts', 'cyan'];
+      } else if (
+        comment.provenance.component.includes('::evaluation::response')
+      ) {
+        const modelId = comment.provenance.component.split('::')[0];
+        return [`${models?.get(modelId)?.name || modelId}`, 'green'];
+      } else {
+        return ['Generic', 'gray'];
+      }
+    } else {
+      return ['Generic', 'gray'];
+    }
+  }, [comment.provenance, models]);
+
+  return (
+    <Modal
+      open={open}
+      modalHeading="Edit comment"
+      modalLabel="Comments"
+      primaryButtonText="Save"
+      secondaryButtonText="Cancel"
+      onRequestSubmit={() => {
+        onSubmit({ ...comment, comment: commentText, author: author });
+      }}
+      onRequestClose={() => {
+        onClose();
+      }}
+      primaryButtonDisabled={commentText === comment.comment || author === ''}
+    >
+      <div className={classes.commentProvenance}>
+        <span className={classes.label}>Provenance</span>
+        <Tag className={classes.commentProvenanceTag} type={tagType}>
+          {tag}
+        </Tag>
+      </div>
+
+      <TextArea
+        className={classes.commentBox}
+        labelText="Comment"
+        rows={4}
+        id="comment-area"
+        value={commentText}
+        invalid={commentText === ''}
+        invalidText={'comment cannot be empty'}
+        onChange={(event) => {
+          setCommentText(event.target.value);
+        }}
+      />
+
+      {tag !== 'Generic' && comment.provenance?.text && (
+        <div className={classes.reference}>
+          <div>
+            <span className={'cds--label'}>Reference</span>
+          </div>
+          <p>{comment.provenance?.text}</p>
+        </div>
+      )}
+
+      <TextInput
+        id="author-input"
+        type="text"
+        labelText="Author"
+        defaultValue={author}
+        invalid={author === ''}
+        invalidText={'author cannot be empty'}
+        onChange={(event) => {
+          setAuthor(event.target.value);
+        }}
+      />
+    </Modal>
+  );
+}

src/views/task/Task.module.scss

@@ -164,7 +164,7 @@
   position: absolute;
   bottom: $spacing-07;
   right: $spacing-05;
-  opacity: 0.5;
+  opacity: 0.8;
   z-index: 15;
   height: 3rem;
   width: 3rem;
@@ -173,6 +173,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: var(--cds-background-inverse);
+  color: var(--cds-background);
 }
 
 .addCommentBtn:hover {

src/views/task/Task.tsx

@@ -236,9 +236,11 @@ export default function Task({ taskId, onClose }: Props) {
             <div className={classes.commentsContainer}>
               <ViewComments
                 comments={task.comments}
-                onSelect={() => {}}
-                onEdit={() => {}}
-                onDelete={() => {}}
+                onUpdate={(updatedComments) => {
+                  updateTask(taskId, {
+                    comments: updatedComments,
+                  });
+                }}
                 models={models}
               ></ViewComments>
             </div>