diff --git a/frontend/src/components/file-chooser/file-chooser.js b/frontend/src/components/file-chooser/file-chooser.js
index dac329aa2f9..5115385455d 100644
--- a/frontend/src/components/file-chooser/file-chooser.js
+++ b/frontend/src/components/file-chooser/file-chooser.js
@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
-import { gettext, isPro } from '../../utils/constants';
+import { gettext, isPro, enableSeasearch, enableElasticsearch } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import RepoInfo from '../../models/repo-info';
@@ -242,23 +242,23 @@ class FileChooser extends React.Component {
   };
 
   sendRequest = (queryData, cancelToken) => {
-    seafileAPI.searchFiles(queryData, cancelToken).then(res => {
-      if (!res.data.total) {
-        this.setState({
-          searchResults: [],
-          isResultGot: true
-        });
-        this.source = null;
-        return;
-      }
-
-      let items = this.formatResultItems(res.data.results);
-      this.setState({
-        searchResults: items,
-        isResultGot: true
+    if (isPro && enableSeasearch && !enableElasticsearch) {
+      seafileAPI.aiSearchFiles(queryData, cancelToken).then(res => {
+        this.handleSearchResult(res);
+      });
+    } else {
+      seafileAPI.searchFiles(queryData, cancelToken).then(res => {
+        this.handleSearchResult(res);
       });
-      this.source = null;
+    }
+  };
+
+  handleSearchResult = (res) => {
+    this.setState({
+      searchResults: res.data.total ? this.formatResultItems(res.data.results) : [],
+      isResultGot: true
     });
+    this.source = null;
   };
 
   cancelRequest = () => {
@@ -324,7 +324,8 @@ class FileChooser extends React.Component {
           searchResults={this.state.searchResults}
           onItemClick={this.onSearchedItemClick}
           onSearchedItemDoubleClick={this.onSearchedItemDoubleClick}
-        />);
+        />
+      );
     }
   };
 
diff --git a/frontend/src/components/file-chooser/searched-list-item.js b/frontend/src/components/file-chooser/searched-list-item.js
index 260f6163336..3f5cea73589 100644
--- a/frontend/src/components/file-chooser/searched-list-item.js
+++ b/frontend/src/components/file-chooser/searched-list-item.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Utils } from '../../utils/utils';
 
 const propTypes = {
@@ -41,16 +42,23 @@ class SearchedListItem extends React.Component {
     let { item, currentItem } = this.props;
     let folderIconUrl = item.link_content ? Utils.getFolderIconUrl(false, 192) : Utils.getDefaultLibIconUrl(false);
     let fileIconUrl = item.is_dir ? folderIconUrl : Utils.getFileIconUrl(item.name);
-    let trClass = this.state.highlight ? 'tr-highlight' : '';
-    if (currentItem) {
-      if (item.repo_id === currentItem.repo_id && item.path === currentItem.path) {
-        trClass = 'tr-active';
-      }
-    }
     return (
-      <tr className={trClass} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onDoubleClick={this.searchItemDoubleClick}>
-        <td className="text-center"><img className="item-img" src={fileIconUrl} alt="" width="24"/></td>
-        <td><span className="item-link">{item.repo_name}/{item.link_content}</span></td>
+      <tr
+        className={classnames('searched-list-item', {
+          'tr-highlight': this.state.highlight,
+          'tr-active': currentItem && item.repo_id === currentItem.repo_id && item.path === currentItem.path
+        })}
+        onClick={this.onClick}
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}
+        onDoubleClick={this.searchItemDoubleClick}
+      >
+        <td className="text-center">
+          <img className="item-img" src={fileIconUrl} alt="" width="24"/>
+        </td>
+        <td>
+          <span className="item-link">{item.repo_name}/{item.link_content}</span>
+        </td>
       </tr>
     );
   }
diff --git a/frontend/src/css/file-chooser.css b/frontend/src/css/file-chooser.css
index 82718403f75..ab78a4d9704 100644
--- a/frontend/src/css/file-chooser.css
+++ b/frontend/src/css/file-chooser.css
@@ -98,13 +98,17 @@
   background-color: #f5f5f5;
 }
 
+.file-chooser-search-container .searched-list-item {
+  cursor: pointer;
+}
+
 .file-chooser-search-input {
   position: relative;
 }
 
 .file-chooser-search-input .search-control {
   position: absolute;
-  top: 0.5rem;
+  top: 13px;
   right: 1.5rem;
 }