Add feature "Ask a question" using semantic search API

common/api-urls-constants.js

@@ -13,5 +13,6 @@ module.exports = {
   },
   CEREMONIES: '//api.sikhitothemax.org/ceremonies/',
   DOODLE: '//api.sikhitothemax.org/doodle/',
-  WRITERS: '//api.banidb.com/v2/writers/'
+  WRITERS: '//api.banidb.com/v2/writers/',
+  GURBANIBOT: '//fastersemanticsearchapi.sevaa.win/'
 };

src/js/components/Autocomplete.js

@@ -7,6 +7,7 @@ import { setMultipleShabads, setMultiViewPanel } from '@/features/actions';
 import Larivaar from '../components/Larivaar';
 import { toSearchURL } from '@/util';
 import { ShabadButtonWrapper } from "./ShabadButtonWrapper";
+import { SEARCH_TYPES } from "@/constants";
 
 class Autocomplete extends Component {
   static propTypes = {
@@ -77,10 +78,10 @@ class Autocomplete extends Component {
   // Closing suggestions on mouse down
   onMouseDown = e => {
     e.stopPropagation();
-    (this.state.showSuggestions && !this.wrapperRef.current.contains(e.target)) &&       
-    this.setState({
-      showSuggestions: false,
-    });    
+    (this.state.showSuggestions && !this.wrapperRef.current.contains(e.target)) &&
+      this.setState({
+        showSuggestions: false,
+      });
   }
 
   componentDidMount() {
@@ -117,7 +118,6 @@ class Autocomplete extends Component {
 
           getSuggestions(userInput, searchOptions)
             .then(suggestions => {
-
               // if any suggestion exists, only then add this as final result item
               if (isShowFullResults && suggestions.length) {
                 suggestions.push({
@@ -168,6 +168,7 @@ class Autocomplete extends Component {
     } = this;
 
     let suggestionsListComponent;
+    const isChatBot = searchOptions.type === SEARCH_TYPES.ASK_A_QUESTION;
 
     if (showSuggestions && value) {
       if (filteredSuggestions.length) {
@@ -218,14 +219,14 @@ class Autocomplete extends Component {
                           {searchOptions.type === 3 ? suggestion.translation : suggestion.pankti}
                         </Larivaar>
                         {searchOptions.type === 3 && (<p className="gurbani-font">{suggestion.pankti}</p>)}
-                      </a>  
+                      </a>
                       {
                         <div className="add-shabad-wrapper">
                           <ShabadButtonWrapper shabad={suggestion} />
                         </div>
-                      }                    
+                      }
                     </>
-                    }
+                  }
                 </li>
               );
             })}
@@ -242,7 +243,7 @@ class Autocomplete extends Component {
 
     return (
       <Fragment>
-        {suggestionsListComponent}
+        {!isChatBot && suggestionsListComponent}
       </Fragment>
     );
   }

src/js/components/Header.js

@@ -76,12 +76,12 @@ class Header extends React.PureComponent {
 
   onFormSubmit =
     ({ handleSubmit, ...data }) =>
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      handleSubmit();
-      this.handleFormSubmit(data);
-    };
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSubmit();
+        this.handleFormSubmit(data);
+      };
 
   handleFormSubmit = (data) => {
     this.props.history.push(toSearchURL(data));
@@ -371,6 +371,7 @@ class Header extends React.PureComponent {
                             value={source}
                             onChange={handleSearchSourceChange}
                             className={[isSourceChanged ? 'selected' : null]}
+                            disabled={type === SEARCH_TYPES.ASK_A_QUESTION}
                           >
                             {Object.entries(SOURCES).map(
                               ([value, children]) => (
@@ -386,18 +387,19 @@ class Header extends React.PureComponent {
                           value={writer}
                           onChange={handleSearchWriterChange}
                           className={[isWriterChanged ? 'selected' : null]}
+                          disabled={type === SEARCH_TYPES.ASK_A_QUESTION}
                         >
                           {writers
                             ?.filter((e) =>
                               source === 'G' || source === 'A'
                                 ? !SOURCE_WRITER_FILTER[source].includes(
-                                    e.writerID
-                                  )
+                                  e.writerID
+                                )
                                 : source !== 'all'
-                                ? SOURCE_WRITER_FILTER[source].includes(
+                                  ? SOURCE_WRITER_FILTER[source].includes(
                                     e.writerID
                                   )
-                                : true
+                                  : true
                             )
                             .map((writer) => (
                               <option
@@ -429,7 +431,7 @@ class Header extends React.PureComponent {
   }
 }
 
-const mapStateToProps = ({}) => ({});
+const mapStateToProps = ({ }) => ({});
 
 const mapDispatchToProps = {
   toggleSettingsPanel,

src/js/components/SearchForm.js

@@ -97,7 +97,7 @@ export default class SearchForm extends React.PureComponent {
       localStorage.getItem(LOCAL_STORAGE_KEY_FOR_SEARCH_SOURCE) ||
       DEFAULT_SEARCH_SOURCE,
     writer:
-      this.props.defaultWriter || 
+      this.props.defaultWriter ||
       localStorage.getItem(LOCAL_STORAGE_KEY_FOR_SEARCH_WRITER) ||
       DEFAULT_SEARCH_WRITER,
     writers: DEFAULT_SEARCH_WRITERS,
@@ -155,7 +155,7 @@ export default class SearchForm extends React.PureComponent {
     getWriterList()
       .then(writersData => {
         this._setState({ writers: writersData })
-      })    
+      })
   }
 
   selectHighlight = () => {
@@ -345,7 +345,7 @@ export default class SearchForm extends React.PureComponent {
     }
   };
 
-  handleSearchSourceChange = ({target}) => {
+  handleSearchSourceChange = ({ target }) => {
     const source = target.value
     this.setState(
       {
@@ -363,7 +363,7 @@ export default class SearchForm extends React.PureComponent {
         localStorage.setItem(
           LOCAL_STORAGE_KEY_FOR_SEARCH_SOURCE,
           this.state.source
-        );        
+        );
       }
     );
   }
@@ -412,7 +412,7 @@ export default class SearchForm extends React.PureComponent {
     );
   }
 
-  handleSearchWriterChange = ({target}) => {
+  handleSearchWriterChange = ({ target }) => {
     const writer = target.value
     this.setState({
       writer,
@@ -421,16 +421,16 @@ export default class SearchForm extends React.PureComponent {
         this.state.query !== '',
       isWriterChanged: writer !== DEFAULT_SEARCH_WRITER
     },
-    () => {
-      clickEvent({
-        action: ACTIONS.SEARCH_WRITER,
-        label: this.state.writer,
-      });
-      localStorage.setItem(
-        LOCAL_STORAGE_KEY_FOR_SEARCH_WRITER,
-        this.state.writer
-      );
-    })
+      () => {
+        clickEvent({
+          action: ACTIONS.SEARCH_WRITER,
+          label: this.state.writer,
+        });
+        localStorage.setItem(
+          LOCAL_STORAGE_KEY_FOR_SEARCH_WRITER,
+          this.state.writer
+        );
+      })
   }
 
   handleReset = (e) => {
@@ -446,10 +446,10 @@ export default class SearchForm extends React.PureComponent {
         this.props.submitOnChangeOf.includes('writer') &&
         this.state.query !== ''
     },
-    () => {
-      localStorage.setItem(LOCAL_STORAGE_KEY_FOR_SEARCH_SOURCE, this.state.source);
-      localStorage.removeItem(LOCAL_STORAGE_KEY_FOR_SEARCH_WRITER);
-    })
+      () => {
+        localStorage.setItem(LOCAL_STORAGE_KEY_FOR_SEARCH_SOURCE, this.state.source);
+        localStorage.removeItem(LOCAL_STORAGE_KEY_FOR_SEARCH_WRITER);
+      })
   }
 
   handleSubmit = () => {

src/js/constants/misc.ts

@@ -1,6 +1,9 @@
 import { SOURCES, SOURCES_WITH_ANG, TYPES as _TYPES } from '@sttm/banidb';
 import { SEARCH_TYPES } from './search-types';
 
+// TODO: Need to move this to @sttm/banidb module
+_TYPES.push('Ask a Question (English)');
+
 export { SOURCES, SOURCES_WITH_ANG };
 
 export const BANI_LENGTH_COLS = {

src/js/constants/placeholders.ts

@@ -8,5 +8,6 @@ export const PLACEHOLDERS = {
   [SEARCH_TYPES.ROMANIZED]: ['jo mange thakur apne te soi', true], // romanized
   [SEARCH_TYPES.ANG]: ['123', true], // ang
   [SEARCH_TYPES.MAIN_LETTERS]: ['j mgh Tkr Apn q'], // main letters
-  [SEARCH_TYPES.ROMANIZED_FIRST_LETTERS_ANYWHERE]: ['jmtatssd', true] //romanized first letter anywhere
+  [SEARCH_TYPES.ROMANIZED_FIRST_LETTERS_ANYWHERE]: ['jmtatssd', true], //romanized first letter anywhere
+  [SEARCH_TYPES.ASK_A_QUESTION]: ['What is the best time to meditate', true] // ask a question
 };

src/js/constants/search-types.ts

@@ -10,7 +10,8 @@ export const SEARCH_TYPES: ISearchTypes = {
   ROMANIZED: 4,
   ANG: 5,
   MAIN_LETTERS: 6,
-  ROMANIZED_FIRST_LETTERS_ANYWHERE: 7
+  ROMANIZED_FIRST_LETTERS_ANYWHERE: 7,
+  ASK_A_QUESTION: 8
 };
 
 export const SEARCH_TYPES_NOT_ALLOWED_KEYS = {

src/js/pages/Home/index.js

@@ -126,7 +126,7 @@ class Home extends React.PureComponent {
                         <b className='new-text-blue'>NEW{" "}</b>
                         Listen to every Shabad in Sri Guru Granth Sahib in raag keertan!
                       </span>
-                          </div>
+                    </div>
                   </div>
 
                   <div id="search-container" className={displayGurmukhiKeyboard ? "kb-active" : ''}>
@@ -194,6 +194,7 @@ class Home extends React.PureComponent {
                           value={Object.keys(SOURCES_WITH_ANG).includes(source) ? source : 'G'}
                           className={[isSourceChanged ? 'selected' : null]}
                           onChange={handleSearchSourceChange}
+                          disabled={type === SEARCH_TYPES.ASK_A_QUESTION}
                         >
                           {Object.entries(SOURCES_WITH_ANG).map(([value, children]) => (
                             <option key={value} value={value}>
@@ -207,6 +208,7 @@ class Home extends React.PureComponent {
                           value={source}
                           className={[isSourceChanged ? 'selected' : null]}
                           onChange={handleSearchSourceChange}
+                          disabled={type === SEARCH_TYPES.ASK_A_QUESTION}
                         >
                           {Object.entries(SOURCES).map(([value, children]) => (
                             <option key={value} value={value}>
@@ -223,6 +225,7 @@ class Home extends React.PureComponent {
                         name="writer"
                         value={writer}
                         className={[isWriterChanged ? 'selected' : null]}
+                        disabled={type === SEARCH_TYPES.ASK_A_QUESTION}
                         onChange={handleSearchWriterChange}>
                         {
                           writers?.filter(e =>

src/js/pages/PageLoader.js

@@ -2,23 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Fetch from '../components/Fetch';
 import { throwError } from '../util';
+import { Stub } from './Search/Layout';
 export default class PageLoader extends React.PureComponent {
   static propTypes = {
     url: PropTypes.string.isRequired,
     children: PropTypes.func.isRequired,
   };
   render() {
     const { url, children } = this.props;
-    return (
-      <Fetch url={url}>
-        {({ data, error, loading }) =>
-          loading
-            ? children({ loading })
-            : error
-              ? throwError("Can't load page", error)
-              : children({ data })
-        }
-      </Fetch>
-    );
+    if (url) {
+      return (
+        <Fetch url={url}>
+          {({ data, error, loading }) =>
+            loading
+              ? children({ loading })
+              : error
+                ? throwError("Can't load page", error)
+                : children({ data })
+          }
+        </Fetch>
+      );
+    }
+    return <Stub />
   }
 }