change mobile UI

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

@@ -1,3 +1,7 @@
+.search-container.show.ai-search-ask {
+  width: 800px;
+}
+
 .ai-search-ask .ai-search-ask-header {
   display: flex;
   align-items: center;
@@ -60,3 +64,16 @@
 .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

@@ -35,7 +35,7 @@ export default class AISearchAsk extends Component {
     super(props);
     this.state = {
       value: props.value,
-      isLoading: true,
+      isLoading: false,
       answeringResult: '',
       hitFiles: [],
     };
@@ -154,7 +154,7 @@ export default class AISearchAsk extends Component {
     return (
       <div className="search">
         <div className="search-mask show" onClick={this.props.closeAsk}></div>
-        <div className="ai-search-ask search-container show p-0" style={{width: 800}}>
+        <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}>

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

@@ -434,7 +434,7 @@ export default class AISearch extends Component {
     if (!width || width === 'default') return null;
 
     if (!this.state.isResultShow) return null;
-    if (!this.state.isResultGetted || this.getValueLength(this.inputValue) < 3) {
+    if (!this.state.isResultGetted || getValueLength(this.inputValue) < 3) {
       return (
         <span className="loading-icon loading-tip"></span>
       );