haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-08 18:30:53 +00:00
Code Issues Releases Wiki Activity

12.0 change ai search entry (#6180)

Browse Source 
* change search UI

delete useless ai-search-ask

change search and ai-search

* LibView start queryLibraryIndexState
This commit is contained in:
Michael An
2024-06-13 11:34:51 +08:00
committed by GitHub
parent 0e5fac32da
commit fef6e2d5b5
13 changed files with 245 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/src/components/search/ai-search-ask.css
View File

@@ -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;
}
}

217
frontend/src/components/search/ai-search-ask.js
View File

@@ -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>
)
}
}

25
frontend/src/components/search/ai-search-widgets/ai-search-help.css
View File

@@ -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);
}

23
frontend/src/components/search/ai-search-widgets/ai-search-help.js
View File

@@ -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>
);
}

25
frontend/src/components/search/ai-search-widgets/ai-search-refrences.css
View File

@@ -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);
}

33
frontend/src/components/search/ai-search-widgets/ai-search-refrences.js
View File

@@ -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;

17
frontend/src/components/search/ai-search-widgets/ai-search-robot.js
View File

@@ -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;

335
frontend/src/components/search/ai-search.js
View File

@@ -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;
this.isAdmin = props.currentRepoInfo.is_admin;
if (props.isLibView && props.currentRepoInfo) {
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 }, () => {
if (this.inputValue === newValue.trim()) return;
this.inputValue = newValue.trim();
if (!this.isChineseInput) {
this.clearTimer();
this.timer = setTimeout(() => {
this.onSearch();
}, SEARCH_DELAY_TIME);
this.setState({ value: newValue });
setTimeout(() => {
if (this.isChineseInput === false && this.state.inputValue !== newValue) {
this.setState({
inputValue: newValue,
isLoading: false,
highlightIndex: 0,
resultItems: [],
isResultGetted: false,
});
}
});
};
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);
}, 1);
};
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}
item={item}
onItemClickHandler={this.onItemClickHandler}
isHighlight={isHighlight}
setRef={isHighlight ? (ref) => {this.highlightRef = ref;} : () => {}}
key={index}
item={item}
onItemClickHandler={this.onItemClickHandler}
isHighlight={isHighlight}
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 (searchStrLength === 0) {
if (isLoading) {
return <Loading />;
}
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) {
return (
<>
<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>
</>
);
else if (resultItems.length === 0) {
return <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) &&
<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" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent mr-4" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
{(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"
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>

4
frontend/src/components/search/constant.js
View File

@@ -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 };

36
frontend/src/components/search/search.js
View File

@@ -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) {
this.setState({ inputValue: event.target.value });
if (this.isChineseInput === false && this.state.inputValue !== newValue) {
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>

52
frontend/src/components/toolbar/common-toolbar.js
View File

@@ -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 (
<Search
repoID={repoID}
placeholder={placeholder}
onSearchedClick={this.props.onSearchedClick}
isPublic={false}
path={path}
/>
);
// if (enableSeafileAI && isLibView) {
// return (
// <AISearch
// repoID={repoID}
// placeholder={placeholder}
// onSearchedClick={this.props.onSearchedClick}
// repoName={repoName}
// currentRepoInfo={this.props.currentRepoInfo}
// />
// );
// }
if (enableSeafileAI) {
return (
<AISearch
repoID={repoID}
path={path}
isViewFile={isViewFile}
placeholder={placeholder}
onSearchedClick={this.props.onSearchedClick}
repoName={repoName}
currentRepoInfo={this.props.currentRepoInfo}
isLibView={isLibView}
/>
);
} else {
return (
<Search
repoID={repoID}
placeholder={placeholder}
onSearchedClick={this.props.onSearchedClick}
isViewFile={isViewFile}
isPublic={false}
path={path}
/>
);
}
} else {
if (isLibView) {
return (

2
frontend/src/pages/lib-content-view/lib-content-toolbar.js
View File

@@ -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}

BIN
media/img/ask-ai.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB