12.0 change ai search entry (#6180)

* change search UI

delete useless ai-search-ask

change search and ai-search

* LibView start queryLibraryIndexState

frontend/src/components/search/ai-search-ask.css

@@ -1,98 +0,0 @@
-.search-container.show.ai-search-ask {
-  width: 800px;
-}
-
-.ai-search-ask .ai-search-ask-header {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  border-bottom: 1px solid rgba(0, 40, 100, 0.12);
-}
-
-.ai-search-ask .ai-search-ask-header .ai-search-ask-return {
-  padding: 0 4px;
-  transform: rotate(180deg);
-  line-height: 10px;
-  cursor: pointer;
-}
-
-.ai-search-ask .ai-search-ask-header .ai-search-ask-return .seafile-multicolor-icon-arrow {
-  opacity: 0.6;
-}
-
-.ai-search-ask .ai-search-ask-header .ai-search-ask-return:hover .seafile-multicolor-icon-arrow {
-  opacity: 0.8;
-}
-
-.ai-search-ask .ai-search-ask-body {
-  display: flex;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.ai-search-ask .ai-search-ask-body .ai-search-ask-body-left {
-  flex-shrink: 0;
-  margin-right: 1rem;
-}
-
-.ai-search-ask .ai-search-ask-body .ai-search-ask-body-right {
-  line-height: 1.8;
-  font-size: 14px;
-  width: 100%;
-}
-
-.ai-search-ask .ai-search-ask-body .ai-search-ask-body-markdown .sf-slate-viewer-scroll-container {
-  padding: 0;
-  background: none;
-}
-
-.ai-search-ask .ai-search-ask-body .ai-search-ask-body-markdown .sf-slate-viewer-article-container {
-  margin: 0;
-}
-
-.ai-search-ask .ai-search-ask-body .ai-search-ask-body-markdown .article {
-  padding: 0;
-  border: none;
-}
-
-.ai-search-ask .ai-search-ask-body .ai-search-ask-body-markdown .article p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-.ai-search-ask .ai-search-ask-footer {
-  border-top: 1px solid rgba(0, 40, 100, 0.12);
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-
-.ai-search-ask .ai-search-ask-footer .ai-search-ask-footer-btn {
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  background-color: #fff;
-  cursor: pointer;
-}
-
-.ai-search-ask .ai-search-ask-footer .ai-search-ask-footer-btn .seafile-multicolor-icon-send {
-  color: #ff8000;
-}
-
-.ai-search-ask .ai-search-ask-footer .ai-search-ask-footer-btn:hover .seafile-multicolor-icon-send {
-  color: #d96d00;
-}
-
-@media (max-width: 768px) {
-
-  .search-container.show.ai-search-ask {
-    width: 100%;
-  }
-
-  .ai-search-ask .search-input {
-    box-shadow: none;
-    width: 100% !important;
-  }
-
-}

frontend/src/components/search/ai-search-ask.js

@@ -1,217 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import isHotkey from 'is-hotkey';
-import { MarkdownViewer } from '@seafile/seafile-editor';
-import { seafileAPI } from '../../utils/seafile-api';
-import { gettext } from '../../utils/constants';
-import toaster from '../toast';
-import Loading from '../loading';
-import Icon from '../icon';
-import { Utils } from '../../utils/utils';
-import { SEARCH_DELAY_TIME, getValueLength } from './constant';
-import AISearchRefrences from './ai-search-widgets/ai-search-refrences';
-//import AISearchHelp from './ai-search-widgets/ai-search-help';
-import AISearchRobot from './ai-search-widgets/ai-search-robot';
-
-import './ai-search-ask.css';
-
-const INDEX_STATE = {
-  RUNNING: 'running',
-  UNCREATED: 'uncreated',
-  FINISHED: 'finished'
-};
-
-export default class AISearchAsk extends Component {
-
-  static propTypes = {
-    value: PropTypes.string,
-    token: PropTypes.string,
-    repoID: PropTypes.string,
-    repoName: PropTypes.string,
-    indexState: PropTypes.string,
-    onItemClickHandler: PropTypes.func.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: props.value,
-      isLoading: false,
-      answeringResult: '',
-      hitFiles: [],
-    };
-    this.timer = null;
-    this.isChineseInput = false;
-  }
-
-  componentDidMount() {
-    document.addEventListener('compositionstart', this.onCompositionStart);
-    document.addEventListener('compositionend', this.onCompositionEnd);
-    this.onSearch();
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('compositionstart', this.onCompositionStart);
-    document.removeEventListener('compositionend', this.onCompositionEnd);
-    this.isChineseInput = false;
-    if (this.timer) {
-      clearTimeout(this.timer);
-      this.timer = null;
-    }
-  }
-
-  onCompositionStart = () => {
-    this.isChineseInput = true;
-    if (this.timer) {
-      clearTimeout(this.timer);
-      this.timer = null;
-    }
-  };
-
-  onCompositionEnd = () => {
-    this.isChineseInput = false;
-    if (this.timer) {
-      clearTimeout(this.timer);
-      this.timer = null;
-    }
-    this.timer = setTimeout(() => {
-      this.onSearch();
-    }, SEARCH_DELAY_TIME);
-  };
-
-  onChange = (event) => {
-    const newValue = event.target.value;
-    this.setState({ value: newValue }, () => {
-      if (!this.isChineseInput) {
-        if (this.timer) {
-          clearTimeout(this.timer);
-          this.timer = null;
-        }
-        this.timer = setTimeout(() => {
-          this.onSearch();
-        }, SEARCH_DELAY_TIME);
-      }
-    });
-  };
-
-  onKeydown = (event) => {
-    if (isHotkey('enter', event)) {
-      this.onSearch();
-    }
-  };
-
-  formatQuestionAnsweringItems(data) {
-    if (!Array.isArray(data)) return [];
-    let items = [];
-    for (let i = 0; i < data.length; i++) {
-      items[i] = {};
-      items[i]['index'] = [i];
-      items[i]['name'] = data[i].substring(data[i].lastIndexOf('/') + 1);
-      items[i]['path'] = data[i];
-      items[i]['repo_id'] = this.props.repoID;
-      items[i]['is_dir'] = false;
-      items[i]['link_content'] = decodeURI(data[i]).substring(1);
-      items[i]['content'] = data[i].sentence;
-      items[i]['thumbnail_url'] = '';
-    }
-    return items;
-  }
-
-  onSearch = () => {
-    const { indexState, repoID, token } = this.props;
-    if (indexState === INDEX_STATE.UNCREATED) {
-      toaster.warning(gettext('Please create index first.'));
-      return;
-    }
-    if (indexState === INDEX_STATE.RUNNING) {
-      toaster.warning(gettext('Indexing, please try again later.'));
-      return;
-    }
-    if (this.state.isLoading || getValueLength(this.state.value.trim()) < 3) {
-      return;
-    }
-    this.setState({ isLoading: true });
-    const searchParams = {
-      q: this.state.value.trim(),
-      search_repo: repoID || 'all',
-    };
-    seafileAPI.questionAnsweringFiles(searchParams, token).then(res => {
-      let { answering_result, hit_files } = res.data || {};
-      this.setState({
-        isLoading: false,
-        answeringResult: answering_result === 'false' ? '' : answering_result.trim(),
-        hitFiles: this.formatQuestionAnsweringItems(hit_files),
-      });
-    }).catch(error => {
-      /* eslint-disable */
-      console.log(error);
-      this.setState({ isLoading: false });
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  };
-
-  render() {
-    const { isLoading, answeringResult, hitFiles } = this.state;
-    return (
-      <div className="search">
-        <div className="search-mask show" onClick={this.props.closeAsk}></div>
-        <div className="ai-search-ask search-container show p-0">
-
-          <div className="ai-search-ask-header">
-            <span className="ai-search-ask-return" onClick={this.props.closeAsk}>
-              <Icon symbol='arrow' />
-            </span>
-            {gettext('Return')}
-          </div>        
-
-          {isLoading ?
-            <div className="d-flex align-items-center my-8">
-              <Loading />
-            </div>
-          :
-          <div className="ai-search-ask-body p-6 pb-4">
-            <div className="ai-search-ask-body-left">
-              <AISearchRobot/>
-            </div>
-            <div className="ai-search-ask-body-right">
-              {answeringResult.length > 0 ?
-                <div className="ai-search-ask-body-markdown">
-                  <MarkdownViewer value={answeringResult} isShowOutline={false}/>
-                </div>
-                :
-                <p>{gettext('No result')}</p>
-              }
-              {/*<AISearchHelp />*/}
-              {hitFiles.length > 0 &&
-                <AISearchRefrences
-                  hitFiles={hitFiles}
-                  onItemClickHandler={this.props.onItemClickHandler}
-                />
-              }
-            </div>
-          </div>
-          }
-
-          <div className="ai-search-ask-footer">
-            <div className="input-icon mb-1">
-              <input
-                type="text"
-                className="form-control search-input w-100"
-                name="query"
-                value={this.state.value}
-                onChange={this.onChange}
-                autoComplete="off"
-                onKeyDown={this.onKeydown}
-                placeholder={gettext('Ask a question') + '...'}
-              />
-              <span className="ai-search-ask-footer-btn" onClick={this.onSearch}>
-                <Icon symbol='send' />
-                </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}

frontend/src/components/search/ai-search-widgets/ai-search-help.css

@@ -1,25 +0,0 @@
-.ai-search-help {
-  padding: 20px 0 20px 0;
-  border-bottom: 1px solid rgba(0, 40, 100, 0.12);
-}
-
-.ai-search-help .ai-search-help-title {
-  margin-bottom: 10px;
-}
-
-.ai-search-help .ai-search-help-container {
-  display: flex;
-}
-
-.ai-search-help .ai-search-help-container .ai-search-help-detail {
-  border: 1px solid #ccc;
-  max-width: 200px;
-  margin-right: 8px;
-  padding: 4px 8px;
-  border-radius: 3px;
-}
-
-.ai-search-help .ai-search-help-detail:hover {
-  cursor: pointer;
-  background-color: rgb(245, 245, 245);
-}

frontend/src/components/search/ai-search-widgets/ai-search-help.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import Icon from '../../icon';
-import { gettext } from '../../../utils/constants';
-
-import './ai-search-help.css';
-
-export default function AISearchHelp() {
-  return (
-    <div className="ai-search-help">
-      <div className="ai-search-help-title">{gettext('Is this answer helpful to you?')}</div>
-      <div className='ai-search-help-container'>
-        <div className="ai-search-help-detail" key={1}>
-          <Icon symbol='helpful' />
-          <span className="pl-1">{gettext('Yes')}</span>
-        </div>
-        <div className="ai-search-help-detail" key={2}>
-          <Icon symbol='helpless' />
-          <span className="pl-1">{gettext('No')}</span>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/src/components/search/ai-search-widgets/ai-search-refrences.css

@@ -1,25 +0,0 @@
-.ai-search-refrences {
-  padding-top: 10px;
-  border-top: 1px solid rgba(0,40,100,.12);
-}
-
-.ai-search-refrences .ai-search-refrences-title {
-  margin-bottom: 6px;
-}
-
-.ai-search-refrences .ai-search-refrences-container {
-  display: flex;
-}
-
-.ai-search-refrences .ai-search-refrences-container .ai-search-refrences-detail {
-  border: 1px solid #ccc;
-  max-width: 200px;
-  margin-right: 8px;
-  padding: 4px 8px;
-  border-radius: 3px;
-}
-
-.ai-search-refrences .ai-search-refrences-detail:hover {
-  cursor: pointer;
-  background-color: rgb(245, 245, 245);
-}

frontend/src/components/search/ai-search-widgets/ai-search-refrences.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../../utils/constants';
-
-import './ai-search-refrences.css';
-
-function AISearchRefrences({hitFiles, onItemClickHandler}) {
-  return (
-    <div className="ai-search-refrences">
-      <div className="ai-search-refrences-title">{gettext('Reference documents')}{':'}</div>
-      <div className='ai-search-refrences-container'>
-        {hitFiles.map((hitFile, index) => {
-          return (
-            <div
-              className="ai-search-refrences-detail text-truncate"
-              onClick={() => onItemClickHandler(hitFile)}
-              key={index}
-            >
-              {`${index + 1}. ${hitFile.name}`}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-AISearchRefrences.propTypes = {
-  hitFiles: PropTypes.array.isRequired,
-  onItemClickHandler: PropTypes.func.isRequired,
-};
-
-export default AISearchRefrences;

frontend/src/components/search/ai-search-widgets/ai-search-robot.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { mediaUrl } from '../../../utils/constants';
-
-function AISearchRobot({style}) {
-  return (
-    <div style={style}>
-      <img src={`${mediaUrl}img/ask-ai.png`} alt="" width="32" height="32" />
-    </div>
-  );
-}
-
-AISearchRobot.propTypes = {
-  style: PropTypes.object,
-};
-
-export default AISearchRobot;

frontend/src/components/search/ai-search.js

@@ -1,7 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import isHotkey from 'is-hotkey';
-import classnames from 'classnames';
 import MediaQuery from 'react-responsive';
 import { seafileAPI } from '../../utils/seafile-api';
 import Icon from '../icon';
@@ -10,10 +9,8 @@ import SearchResultItem from './search-result-item';
 import { Utils } from '../../utils/utils';
 import { isMac } from '../../utils/extra-attributes';
 import toaster from '../toast';
+import Loading from '../loading';
 import Switch from '../common/switch';
-import { SEARCH_DELAY_TIME, getValueLength } from './constant';
-import AISearchAsk from './ai-search-ask';
-import AISearchRobot from './ai-search-widgets/ai-search-robot';
 
 const INDEX_STATE = {
   RUNNING: 'running',
@@ -21,11 +18,6 @@ const INDEX_STATE = {
   FINISHED: 'finished'
 };
 
-const SEARCH_MODE = {
-  QA: 'question-answering',
-  COMBINED: 'combined-search',
-};
-
 const PER_PAGE = 10;
 const controlKey = isMac() ? '⌘' : 'Ctrl';
 
@@ -33,10 +25,13 @@ export default class AISearch extends Component {
 
   static propTypes = {
     repoID: PropTypes.string,
+    path: PropTypes.string,
     placeholder: PropTypes.string,
     onSearchedClick: PropTypes.func.isRequired,
     repoName: PropTypes.string,
     currentRepoInfo: PropTypes.object,
+    isViewFile: PropTypes.bool,
+    isLibView: PropTypes.bool,
   };
 
   constructor(props) {
@@ -45,6 +40,7 @@ export default class AISearch extends Component {
     this.state = {
       width: 'default',
       value: '',
+      inputValue: '',
       resultItems: [],
       highlightIndex: 0,
       page: 0,
@@ -58,19 +54,23 @@ export default class AISearch extends Component {
       isSearchInputShow: false, // for mobile
       searchPageUrl: this.baseSearchPageURL,
       indexState: '',
-      searchMode: SEARCH_MODE.COMBINED,
+      searchTypesMax: 0,
+      highlightSearchTypesIndex: 0,
     };
-    this.inputValue = '';
     this.highlightRef = null;
     this.source = null; // used to cancel request;
     this.inputRef = React.createRef();
     this.searchContainer = React.createRef();
     this.searchResultListRef = React.createRef();
     this.indexStateTimer = null;
-    this.timer = null;
     this.isChineseInput = false;
-    this.isRepoOwner = props.currentRepoInfo.owner_email === username;
+    if (props.isLibView && props.currentRepoInfo) {
-    this.isAdmin = props.currentRepoInfo.is_admin;
+      this.isRepoOwner = props.currentRepoInfo.owner_email === username;
+      this.isAdmin = props.currentRepoInfo.is_admin;
+    } else {
+      this.isRepoOwner = false;
+      this.isAdmin = false;
+    }
   }
 
   componentDidMount() {
@@ -78,7 +78,9 @@ export default class AISearch extends Component {
     document.addEventListener('compositionstart', this.onCompositionStart);
     document.addEventListener('compositionend', this.onCompositionEnd);
     document.addEventListener('click', this.handleOutsideClick);
-    this.queryLibraryIndexState();
+    if (this.props.isLibView) {
+      this.queryLibraryIndexState();
+    }
   }
 
   queryLibraryIndexState() {
@@ -100,34 +102,18 @@ export default class AISearch extends Component {
     document.removeEventListener('compositionend', this.onCompositionEnd);
     document.removeEventListener('click', this.handleOutsideClick);
     this.isChineseInput = false;
-    this.clearTimer();
     if (this.indexStateTimer) {
       clearInterval(this.indexStateTimer);
       this.indexStateTimer = null;
     }
   }
 
-  clearTimer = () => {
-    if (this.timer) {
-      clearTimeout(this.timer);
-      this.timer = null;
-    }
-  };
-
   onCompositionStart = () => {
     this.isChineseInput = true;
-    this.clearTimer();
   };
 
   onCompositionEnd = () => {
     this.isChineseInput = false;
-    // chrome：compositionstart -> onChange -> compositionend
-    // not chrome：compositionstart -> compositionend -> onChange
-    // The onChange event will setState and change input value, then setTimeout to initiate the search
-    this.clearTimer();
-    this.timer = setTimeout(() => {
-      this.onSearch();
-    }, SEARCH_DELAY_TIME);
   };
 
   onDocumentKeydown = (e) => {
@@ -152,6 +138,7 @@ export default class AISearch extends Component {
 
   onFocusHandler = () => {
     this.setState({ width: '570px', isMaskShow: true, isCloseShow: true });
+    this.calculateHighlightType();
   };
 
   onCloseHandler = () => {
@@ -161,6 +148,14 @@ export default class AISearch extends Component {
   onUp = (e) => {
     e.preventDefault();
     e.stopPropagation();
+    if (!this.state.isResultGetted) {
+      let highlightSearchTypesIndex = this.state.highlightSearchTypesIndex - 1;
+      if (highlightSearchTypesIndex < 0) {
+        highlightSearchTypesIndex = this.state.searchTypesMax;
+      }
+      this.setState({ highlightSearchTypesIndex });
+      return;
+    }
     const { highlightIndex } = this.state;
     if (highlightIndex > 0) {
       this.setState({ highlightIndex: highlightIndex - 1 }, () => {
@@ -177,6 +172,14 @@ export default class AISearch extends Component {
   onDown = (e) => {
     e.preventDefault();
     e.stopPropagation();
+    if (!this.state.isResultGetted) {
+      let highlightSearchTypesIndex = this.state.highlightSearchTypesIndex + 1;
+      if (highlightSearchTypesIndex > this.state.searchTypesMax) {
+        highlightSearchTypesIndex = 0;
+      }
+      this.setState({ highlightSearchTypesIndex });
+      return;
+    }
     const { highlightIndex, resultItems } = this.state;
     if (highlightIndex < resultItems.length - 1) {
       this.setState({ highlightIndex: highlightIndex + 1 }, () => {
@@ -193,6 +196,21 @@ export default class AISearch extends Component {
 
   onEnter = (e) => {
     e.preventDefault();
+    if (!this.state.isResultGetted) {
+      let highlightDom = document.querySelector('.search-types-highlight');
+      if (highlightDom) {
+        if (highlightDom.classList.contains('search-types-folder')) {
+          this.searchFolder();
+        }
+        else if (highlightDom.classList.contains('search-types-repo')) {
+          this.searchRepo();
+        }
+        else if (highlightDom.classList.contains('search-types-repos')) {
+          this.searchAllRepos();
+        }
+        return;
+      }
+    }
     let item = this.state.resultItems[this.state.highlightIndex];
     if (item) {
       if (document.activeElement) {
@@ -208,6 +226,21 @@ export default class AISearch extends Component {
     this.props.onSearchedClick(item);
   };
 
+  calculateHighlightType = () => {
+    let searchTypesMax = 0;
+    const { repoID, path, isViewFile } = this.props;
+    if (repoID) {
+      searchTypesMax++;
+    }
+    if (path && path !== '/' && !isViewFile) {
+      searchTypesMax++;
+    }
+    this.setState({
+      searchTypesMax,
+      highlightSearchTypesIndex: 0,
+    });
+  };
+
   keepVisitedItem = (targetItem) => {
     const { repoID } = this.props;
     let targetIndex;
@@ -235,45 +268,22 @@ export default class AISearch extends Component {
   };
 
   onChangeHandler = (event) => {
+    const newValue = event.target.value;
     if (this.state.showRecent) {
       this.setState({ showRecent: false });
     }
-    const newValue = event.target.value;
+    this.setState({ value: newValue });
-    this.setState({ value: newValue }, () => {
+    setTimeout(() => {
-      if (this.inputValue === newValue.trim()) return;
+      if (this.isChineseInput === false && this.state.inputValue !== newValue) {
-      this.inputValue = newValue.trim();
+        this.setState({
-      if (!this.isChineseInput) {
+          inputValue: newValue,
-        this.clearTimer();
+          isLoading: false,
-        this.timer = setTimeout(() => {
+          highlightIndex: 0,
-          this.onSearch();
+          resultItems: [],
-        }, SEARCH_DELAY_TIME);
+          isResultGetted: false,
+        });
       }
-    });
+    }, 1);
-  };
-
-  onKeydownHandler = (event) => {
-    if (isHotkey('enter', event)) {
-      this.onSearch();
-    }
-  };
-
-  onSearch = () => {
-    const { value } = this.state;
-    const { repoID } = this.props;
-    if (this.inputValue === '' || getValueLength(this.inputValue) < 3) {
-      this.setState({
-        highlightIndex: 0,
-        resultItems: [],
-        isResultGetted: false
-      });
-      return;
-    }
-    const queryData = {
-      q: value,
-      search_repo: repoID ? repoID : 'all',
-      search_ftypes: 'all',
-    };
-    this.getSearchResult(queryData);
   };
 
   getSearchResult = (queryData) => {
@@ -281,6 +291,7 @@ export default class AISearch extends Component {
       this.source.cancel('prev request is cancelled');
     }
     this.setState({
+      isLoading: true,
       isResultGetted: false,
       resultItems: [],
       highlightIndex: 0,
@@ -355,10 +366,10 @@ export default class AISearch extends Component {
   }
 
   resetToDefault() {
-    this.inputValue = '';
     this.setState({
       width: '',
       value: '',
+      inputValue: '',
       isMaskShow: false,
       isCloseShow: false,
       isSettingsShown: false,
@@ -370,16 +381,6 @@ export default class AISearch extends Component {
     });
   }
 
-  openAsk = () => {
-    this.clearTimer();
-    this.setState({ searchMode: SEARCH_MODE.QA });
-  }
-
-  closeAsk = () => {
-    this.clearTimer();
-    this.setState({ searchMode: SEARCH_MODE.COMBINED });
-  }
-
   renderVisitedItems = (items) => {
     const { highlightIndex } = this.state;
     const results = (
@@ -390,11 +391,11 @@ export default class AISearch extends Component {
             const isHighlight = index === highlightIndex;
             return (
               <SearchResultItem
-              key={index}
+                key={index}
-              item={item}
+                item={item}
-              onItemClickHandler={this.onItemClickHandler}
+                onItemClickHandler={this.onItemClickHandler}
-              isHighlight={isHighlight}
+                isHighlight={isHighlight}
-              setRef={isHighlight ? (ref) => {this.highlightRef = ref;} : () => {}}
+                setRef={isHighlight ? (ref) => {this.highlightRef = ref;} : () => {}}
               />
             );
           })}
@@ -412,10 +413,94 @@ export default class AISearch extends Component {
         </MediaQuery>
       </>
     );
-  }
+  };
+
+  renderSearchTypes = (inputValue) => {
+    const highlightIndex = this.state.highlightSearchTypesIndex;
+    if (!this.props.repoID) {
+      return (
+        <div className="search-types">
+          <div className="search-types-repos search-types-highlight" onClick={this.searchAllRepos} tabIndex={0}>
+            <i className="search-icon-left input-icon-addon fas fa-search"></i>
+            {inputValue}
+            <span className="search-types-text">{gettext('in all libraries')}</span>
+          </div>
+        </div>
+      );
+    }
+    if (this.props.repoID) {
+      if (this.props.path && this.props.path !== '/' && !this.props.isViewFile) {
+        return (
+          <div className="search-types">
+            <div className={`search-types-repo ${highlightIndex === 0 ? 'search-types-highlight' : ''}`} onClick={this.searchRepo} tabIndex={0}>
+              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              {inputValue}
+              <span className="search-types-text">{gettext('in this library')}</span>
+            </div>
+            <div className={`search-types-folder ${highlightIndex === 1 ? 'search-types-highlight' : ''}`} onClick={this.searchFolder} tabIndex={0}>
+              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              {inputValue}
+              <span className="search-types-text">{gettext('in this folder')}</span>
+            </div>
+            <div className={`search-types-repos ${highlightIndex === 2 ? 'search-types-highlight' : ''}`} onClick={this.searchAllRepos} tabIndex={0}>
+              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              {inputValue}
+              <span className="search-types-text">{gettext('in all libraries')}</span>
+            </div>
+          </div>
+        );
+      } else {
+        return (
+          <div className="search-types">
+            <div className={`search-types-repo ${highlightIndex === 0 ? 'search-types-highlight' : ''}`} onClick={this.searchRepo} tabIndex={0}>
+              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              {inputValue}
+              <span className="search-types-text">{gettext('in this library')}</span>
+            </div>
+            <div className={`search-types-repos ${highlightIndex === 1 ? 'search-types-highlight' : ''}`} onClick={this.searchAllRepos} tabIndex={0}>
+              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              {inputValue}
+              <span className="search-types-text">{gettext('in all libraries')}</span>
+            </div>
+          </div>
+        );
+      }
+    }
+  };
+
+  searchRepo = () => {
+    const { value } = this.state;
+    const queryData = {
+      q: value,
+      search_repo: this.props.repoID,
+      search_ftypes: 'all',
+    };
+    this.getSearchResult(queryData);
+  };
+
+  searchFolder = () => {
+    const { value } = this.state;
+    const queryData = {
+      q: value,
+      search_repo: this.props.repoID,
+      search_ftypes: 'all',
+      search_path: this.props.path,
+    };
+    this.getSearchResult(queryData);
+  };
+
+  searchAllRepos = () => {
+    const { value } = this.state;
+    const queryData = {
+      q: value,
+      search_repo: 'all',
+      search_ftypes: 'all',
+    };
+    this.getSearchResult(queryData);
+  };
 
   renderSearchResult() {
-    const { resultItems, highlightIndex, width, isResultGetted } = this.state;
+    const { resultItems, highlightIndex, width, isResultGetted, isLoading } = this.state;
     if (!width || width === 'default') return null;
 
     if (this.state.showRecent) {
@@ -430,46 +515,23 @@ export default class AISearch extends Component {
       }
     }
 
-    const searchStrLength = getValueLength(this.inputValue);
+    if (isLoading) {
-
+      return <Loading />;
-    if (searchStrLength === 0) {
+    }
+    else if (this.state.inputValue.trim().length === 0) {
       return <div className="search-result-none">{gettext('Type characters to start search')}</div>;
     }
-    else if (searchStrLength < 3) {
-      return <div className="search-result-none">{gettext('Type more characters to start search')}</div>;
-    }
     else if (!isResultGetted) {
-      return <span className="loading-icon loading-tip"></span>;
+      return this.renderSearchTypes(this.state.inputValue.trim());
     }
-    else if (!resultItems.length) {
+    else if (resultItems.length === 0) {
-      return (
+      return <div className="search-result-none">{gettext('No results matching')}</div>;
-        <>
-          <li className='search-result-item align-items-center' onClick={this.openAsk}>
-            <AISearchRobot />
-            <div className="item-content">
-              <div className="item-name ellipsis">{gettext('Ask AI')}{': '}{this.state.value.trim()}</div>
-            </div>
-          </li>
-          <div className="search-result-none">{gettext('No results matching')}</div>
-        </>
-      );
     }
 
     const results = (
       <ul className="search-result-list" ref={this.searchResultListRef}>
-        <li
-          className={classnames('search-result-item align-items-center py-3', {'search-result-item-highlight': highlightIndex === 0 })}
-          onClick={this.openAsk}
-        >
-          <AISearchRobot style={{width: 36}}/>
-          <div className="item-content">
-            <div className="item-name ellipsis">
-            {gettext('Ask AI')}{': '}{this.state.value.trim()}
-            </div>
-          </div>
-        </li>
         {resultItems.map((item, index) => {
-          const isHighlight = (index + 1) === highlightIndex;
+          const isHighlight = index === highlightIndex;
           return (
             <SearchResultItem
               key={index}
@@ -547,7 +609,7 @@ export default class AISearch extends Component {
 
   setSettingsContainerRef = (ref) => {
     this.settingsContainer = ref;
-  }
+  };
 
   renderSwitch = () => {
     const { indexState } = this.state;
@@ -589,7 +651,7 @@ export default class AISearch extends Component {
       );
     }
     return null;
-  }
+  };
 
   renderSearchIcon = () => {
     const { indexState } = this.state;
@@ -598,13 +660,13 @@ export default class AISearch extends Component {
     } else {
       return <Icon symbol='search' className='input-icon-addon' />;
     }
-  }
+  };
 
   toggleSettingsShown = () => {
     this.setState({
       isSettingsShown: !this.state.isSettingsShown
     });
-  }
+  };
 
   handleOutsideClick = (e) => {
     const { isSettingsShown } = this.state;
@@ -618,22 +680,9 @@ export default class AISearch extends Component {
   render() {
     let width = this.state.width !== 'default' ? this.state.width : '';
     let style = {'width': width};
-    const { isMaskShow, searchMode } = this.state;
+    const { isMaskShow } = this.state;
     const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + f )`}`;
 
-    if (searchMode === SEARCH_MODE.QA) {
-      return (
-        <AISearchAsk
-          token={this.source ? this.source.token : null}
-          indexState={this.state.indexState}
-          repoID={this.props.repoID}
-          value={this.state.value.trim()}
-          closeAsk={this.closeAsk}
-          onItemClickHandler={this.onItemClickHandler}
-        />
-      );
-    }
-
     return (
       <Fragment>
         <MediaQuery query="(min-width: 768px)">
@@ -653,14 +702,24 @@ export default class AISearch extends Component {
                   onChange={this.onChangeHandler}
                   autoComplete="off"
                   ref={this.inputRef}
-                  onKeyDown={this.onKeydownHandler}
                 />
                 {this.state.isCloseShow &&
                   <>
-                  {(this.isRepoOwner || this.isAdmin) &&
+                    {(this.isRepoOwner || this.isAdmin) &&
-                    <button type="button" className="search-icon-right input-icon-addon sf3-font-set-up sf3-font border-0 bg-transparent mr-3" onClick={this.toggleSettingsShown} aria-label={gettext('Settings')} ref={ref => this.settingIcon = ref}></button>
+                    <button
-                  }
+                      type="button"
-                  <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent mr-4" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
+                      className="search-icon-right input-icon-addon sf3-font-set-up sf3-font border-0 bg-transparent mr-3"
+                      onClick={this.toggleSettingsShown}
+                      aria-label={gettext('Settings')}
+                      ref={ref => this.settingIcon = ref}
+                    ></button>
+                    }
+                    <button
+                      type="button"
+                      className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent mr-4"
+                      onClick={this.onCloseHandler}
+                      aria-label={gettext('Close')}
+                    ></button>
                   </>
                 }
               </div>

frontend/src/components/search/constant.js

@@ -1,5 +1,3 @@
-const SEARCH_DELAY_TIME = 1000;
-
 const getValueLength = (str) => {
   let code;
   let len = 0;
@@ -18,4 +16,4 @@ const getValueLength = (str) => {
   return len;
 };
 
-export { SEARCH_DELAY_TIME, getValueLength };
+export { getValueLength };

frontend/src/components/search/search.js

@@ -16,6 +16,7 @@ const propTypes = {
   placeholder: PropTypes.string,
   onSearchedClick: PropTypes.func.isRequired,
   isPublic: PropTypes.bool,
+  isViewFile: PropTypes.bool,
 };
 
 const PER_PAGE = 10;
@@ -189,11 +190,11 @@ class Search extends Component {
 
   calculateHighlightType = () => {
     let searchTypesMax = 0;
-    const { repoID, path } = this.props;
+    const { repoID, path, isViewFile } = this.props;
     if (repoID) {
       searchTypesMax++;
     }
-    if (path && path !== '/') {
+    if (path && path !== '/' && !isViewFile) {
       searchTypesMax++;
     }
     this.setState({
@@ -229,28 +230,24 @@ class Search extends Component {
   };
 
   onChangeHandler = (event) => {
+    const newValue = event.target.value;
     if (this.state.showRecent) {
       this.setState({ showRecent: false });
     }
-    this.setState({ value: event.target.value });
+    this.setState({ value: newValue });
     setTimeout(() => {
-      if (this.isChineseInput === false) {
+      if (this.isChineseInput === false && this.state.inputValue !== newValue) {
-        this.setState({ inputValue: event.target.value });
+        this.setState({
+          inputValue: newValue,
+          isLoading: false,
+          highlightIndex: 0,
+          resultItems: [],
+          isResultGetted: false,
+        });
       }
     }, 1);
   };
 
-  onKeydownHandler = (e) => {
-    if (!isEnter(e) && !isUp(e) && !isDown(e)) {
-      this.setState({
-        isLoading: false,
-        highlightIndex: 0,
-        resultItems: [],
-        isResultGetted: false
-      });
-    }
-  };
-
   getSearchResult = (queryData) => {
     if (this.source) {
       this.source.cancel('prev request is cancelled');
@@ -327,7 +324,7 @@ class Search extends Component {
       console.log(error);
       this.setState({ isLoading: false });
     });
-  }
+  };
 
   onResultListScroll = (e) => {
     // Load less than 100 results
@@ -403,7 +400,7 @@ class Search extends Component {
     if (isLoading) {
       return <Loading />;
     }
-    if (this.state.inputValue.trim().length === 0) {
+    else if (this.state.inputValue.trim().length === 0) {
       return <div className="search-result-none">{gettext('Type characters to start search')}</div>;
     }
     else if (!isResultGetted) {
@@ -431,7 +428,7 @@ class Search extends Component {
       );
     }
     if (this.props.repoID) {
-      if (this.props.path && this.props.path !== '/') {
+      if (this.props.path && this.props.path !== '/' && !this.props.isViewFile) {
         return (
           <div className="search-types">
             <div className={`search-types-repo ${highlightIndex === 0 ? 'search-types-highlight' : ''}`} onClick={this.searchRepo} tabIndex={0}>
@@ -566,7 +563,6 @@ class Search extends Component {
                   onChange={this.onChangeHandler}
                   autoComplete="off"
                   ref={this.inputRef}
-                  onKeyDown={this.onKeydownHandler}
                 />
                 {this.state.isCloseShow &&
                   <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent mr-4" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>

frontend/src/components/toolbar/common-toolbar.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isPro, gettext, showLogoutIcon } from '../../utils/constants';
+import { isPro, gettext, showLogoutIcon, enableSeafileAI } from '../../utils/constants';
 import Search from '../search/search';
-// import AISearch from '../search/ai-search';
+import AISearch from '../search/ai-search';
 import SearchByName from '../search/search-by-name';
 import Notification from '../common/notification';
 import Account from '../common/account';
@@ -16,35 +16,41 @@ const propTypes = {
   onSearchedClick: PropTypes.func.isRequired,
   searchPlaceholder: PropTypes.string,
   currentRepoInfo: PropTypes.object,
+  isViewFile: PropTypes.bool,
 };
 
 class CommonToolbar extends React.Component {
 
   renderSearch = () => {
-    const { repoID, repoName, isLibView, searchPlaceholder, path } = this.props;
+    const { repoID, repoName, isLibView, searchPlaceholder, path, isViewFile } = this.props;
     const placeholder = searchPlaceholder || gettext('Search files');
 
     if (isPro) {
-      return (
+      if (enableSeafileAI) {
-        <Search
+        return (
-          repoID={repoID}
+          <AISearch
-          placeholder={placeholder}
+            repoID={repoID}
-          onSearchedClick={this.props.onSearchedClick}
+            path={path}
-          isPublic={false}
+            isViewFile={isViewFile}
-          path={path}
+            placeholder={placeholder}
-        />
+            onSearchedClick={this.props.onSearchedClick}
-      );
+            repoName={repoName}
-      // if (enableSeafileAI && isLibView) {
+            currentRepoInfo={this.props.currentRepoInfo}
-      //   return (
+            isLibView={isLibView}
-      //     <AISearch
+          />
-      //       repoID={repoID}
+        );
-      //       placeholder={placeholder}
+      } else {
-      //       onSearchedClick={this.props.onSearchedClick}
+        return (
-      //       repoName={repoName}
+          <Search
-      //       currentRepoInfo={this.props.currentRepoInfo}
+            repoID={repoID}
-      //     />
+            placeholder={placeholder}
-      //   );
+            onSearchedClick={this.props.onSearchedClick}
-      // }
+            isViewFile={isViewFile}
+            isPublic={false}
+            path={path}
+          />
+        );
+      }
     } else {
       if (isLibView) {
         return (

frontend/src/pages/lib-content-view/lib-content-toolbar.js

@@ -10,6 +10,7 @@ const propTypes = {
   onSearchedClick: PropTypes.func.isRequired,
   currentRepoInfo: PropTypes.object,
   path: PropTypes.string,
+  isViewFile: PropTypes.bool,
 };
 
 class LibContentToolbar extends React.Component {
@@ -23,6 +24,7 @@ class LibContentToolbar extends React.Component {
         <CommonToolbar
           isLibView={true}
           path={this.props.path}
+          isViewFile={this.props.isViewFile}
           repoID={this.props.repoID}
           repoName={this.props.repoName}
           currentRepoInfo={this.props.currentRepoInfo}