diff --git a/frontend/src/components/dialog/file-participant-dialog.js b/frontend/src/components/dialog/file-participant-dialog.js
index 54f311b7ae..d894eae9d5 100644
--- a/frontend/src/components/dialog/file-participant-dialog.js
+++ b/frontend/src/components/dialog/file-participant-dialog.js
@@ -5,6 +5,7 @@ import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import UserSelect from '../user-select';
 import toaster from '../toast';
+import { Utils } from '../../utils/utils';
 import '../../css/participants-list.css';
 
 const fileParticipantListItemPropTypes = {
@@ -75,8 +76,9 @@ class FileParticipantDialog extends Component {
     const { repoID, filePath } = this.props;
     seafileAPI.deleteFileParticipant(repoID, filePath, email).then((res) => {
       this.props.onParticipantsChange(repoID, filePath);
-    }).catch((error) => {
-      this.handleError(error);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
     });
     this.refs.userSelect.clearSelect();
   };
@@ -90,22 +92,15 @@ class FileParticipantDialog extends Component {
     for (let i = 0; i < selectedOption.length; i++) {
       seafileAPI.addFileParticipant(repoID, filePath, selectedOption[i].email).then((res) => {
         this.props.onParticipantsChange(repoID, filePath);
-      }).catch((error) => {
-        this.handleError(error);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
       });
     }
     this.setState({ selectedOption: null });
     this.refs.userSelect.clearSelect();
   };
 
-  handleError = (e) => {
-    if (e.response) {
-      toaster.danger(e.response.data.error_msg || e.response.data.detail || gettext('Error'), {duration: 3});
-    } else {
-      toaster.danger(gettext('Please check the network.'), {duration: 3});
-    }
-  };
-
   render() {
     const renderParticipantList = this.props.fileParticipantList.map((participant, index) => {
       return (
diff --git a/frontend/src/components/dirent-detail/detail-comments-list.js b/frontend/src/components/dirent-detail/detail-comments-list.js
index 5b49d0a110..da3fe4bf69 100644
--- a/frontend/src/components/dirent-detail/detail-comments-list.js
+++ b/frontend/src/components/dirent-detail/detail-comments-list.js
@@ -3,15 +3,13 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import { processor } from '@seafile/seafile-editor/dist/utils/seafile-markdown2html';
 import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-import { gettext } from '../../utils/constants';
+import { gettext, username } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import ParticipantsList from '../file-view/participants-list';
 import '../../css/comments-list.css';
 
-const { username } = window.app.pageOptions;
-
 const DetailCommentListPropTypes = {
   repoID: PropTypes.string.isRequired,
   filePath: PropTypes.string.isRequired,
@@ -26,10 +24,12 @@ class DetailCommentList extends React.Component {
     this.state = {
       commentsList: [],
     };
+    this.isParticipant = false;
   }
 
   componentDidMount() {
     this.listComments();
+    this.checkParticipant();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -38,6 +38,17 @@ class DetailCommentList extends React.Component {
     }
   }
 
+  checkParticipant = () => {
+    const fileParticipantList = this.props.fileParticipantList;
+    if (fileParticipantList.length === 0) {
+      this.isParticipant = false;
+    } else {
+      this.isParticipant = fileParticipantList.some((participant) => {
+        return participant.email === username;
+      });
+    }
+  }
+
   listComments = (filePath) => {
     seafileAPI.listComments(this.props.repoID, (filePath || this.props.filePath)).then((res) => {
       this.setState({ commentsList: res.data.comments });
@@ -61,10 +72,23 @@ class DetailCommentList extends React.Component {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
       });
+      this.addParticipant();
     }
     this.refs.commentTextarea.value = '';
   }
 
+  addParticipant = () => {
+    const { repoID, filePath } = this.props;
+    if (this.isParticipant) return;
+    seafileAPI.addFileParticipant(repoID, filePath, username).then((res) => {
+      this.isParticipant = true;
+      this.props.onParticipantsChange(repoID, filePath);
+    }).catch((err) => {
+      let errMessage = Utils.getErrorMsg(err);
+      toaster.danger(errMessage);
+    });
+  }
+
   resolveComment = (event) => {
     const { repoID } = this.props;
     seafileAPI.updateComment(repoID, event.target.id, 'true').then(() => {
diff --git a/frontend/src/components/file-view/comment-panel.js b/frontend/src/components/file-view/comment-panel.js
index 171a8969f4..523d250706 100644
--- a/frontend/src/components/file-view/comment-panel.js
+++ b/frontend/src/components/file-view/comment-panel.js
@@ -28,6 +28,7 @@ class CommentPanel extends React.Component {
       showResolvedComment: true,
       participants: null,
     };
+    this.isParticipant = false;
   }
 
   toggleResolvedComment = () => {
@@ -62,10 +63,22 @@ class CommentPanel extends React.Component {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
       });
+      this.addParticipant();
     }
     this.refs.commentTextarea.value = '';
   }
 
+  addParticipant = () => {
+    if (this.isParticipant) return;
+    seafileAPI.addFileParticipant(repoID, filePath, username).then((res) => {
+      this.isParticipant = true;
+      this.onParticipantsChange(repoID, filePath);
+    }).catch((err) => {
+      let errMessage = Utils.getErrorMsg(err);
+      toaster.danger(errMessage);
+    });
+  }
+
   resolveComment = (event) => {
     seafileAPI.updateComment(repoID, event.target.id, 'true').then(() => {
       this.listComments();
@@ -103,10 +116,25 @@ class CommentPanel extends React.Component {
 
   getParticipants = () => {
     if (this.props.participants) {
-      this.setState({ participants: this.props.participants });
+      this.setState({ participants: this.props.participants }, () => {
+        this.checkParticipant();
+      });
     } else {
       seafileAPI.listFileParticipants(repoID, filePath).then((res) => {
-        this.setState({ participants: res.data.participant_list });
+        this.setState({ participants: res.data.participant_list }, () => {
+          this.checkParticipant();
+        });
+      });
+    }
+  }
+
+  checkParticipant = () => {
+    const participants = this.state.participants;
+    if (participants.length === 0) {
+      this.isParticipant = false;
+    } else {
+      this.isParticipant = participants.some((participant) => {
+        return participant.email === username;
       });
     }
   }
@@ -120,6 +148,9 @@ class CommentPanel extends React.Component {
     if (this.props.commentsNumber !== nextProps.commentsNumber) {
       this.listComments();
     }
+    if (this.props.participants !== nextProps.participants) {
+      this.setState({ participants: nextProps.participants });
+    }
   }
 
   render() {