Merge pull request #129 from appbaseio/feat/suggestions-enhancement

Suggestions enhancement
appbaseio · Sep 15, 2023 · bf5a008 · bf5a008 · vercel · Sep 15, 2023
2 parents 7824190 + b86eeed
commit bf5a008
Show file tree

Hide file tree

Showing 12 changed files with 155 additions and 126 deletions.
diff --git a/out1570 b/out1570
diff --git a/out3931 b/out3931
diff --git a/out5680 b/out5680
diff --git a/out6849 b/out6849
diff --git a/out6981/favicon.ico b/out6981/favicon.ico
diff --git a/out6981/sb_dll/storybook_ui-manifest.json b/out6981/sb_dll/storybook_ui-manifest.json
diff --git a/out6981/sb_dll/storybook_ui_dll.LICENCE b/out6981/sb_dll/storybook_ui_dll.LICENCE
diff --git a/out6981/sb_dll/storybook_ui_dll.js b/out6981/sb_dll/storybook_ui_dll.js
diff --git a/out8820 b/out8820
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
     },
     "homepage": "https://github.com/appbaseio/reactive-playground#readme",
     "dependencies": {
-        "@appbaseio/reactivesearch": "4.0.5",
+        "@appbaseio/reactivemaps": "4.0.0",
+        "@appbaseio/reactivesearch": "4.1.0",
         "docs": "appbaseio/Docs#dev",
         "moment": "^2.29.1",
         "react": "^18.2.0",

diff --git a/stories/index.js b/stories/index.js
@@ -1929,6 +1929,87 @@ storiesOf("Search components/SearchBox", module)
       <SearchBoxRSDefault placeholder="Search Books..." />
     )
   )
+  .add('With showDistinctSuggestions', () => (
+    <SearchBoxRSDefault
+      placeholder="Search Books..."
+      showDistinctSuggestions={boolean("showDistinctSuggestions", true)}
+    />
+  ))
+  .add(
+    "With enableFAQSuggestions",
+    () => (
+      <SearchBoxRSDefault
+        placeholder="Search Books..."
+        enableFAQSuggestions={boolean("enableFAQSuggestions", true)}
+        enableAI={boolean("enableAI", true)}
+        showClear
+        searchboxId="rs_docs"
+      />
+    )
+  )
+  .add(
+    "With FAQSuggestionsConfig",
+    () => (
+      <SearchBoxRSDefault
+        placeholder="Search Books..."
+        enableFAQSuggestions={boolean("enableFAQSuggestions", true)}
+        FAQSuggestionsConfig={{
+          sectionLabel: text("sectionLabel", "FAQ"),
+          size: number("suggestionSize", 2),
+        }}
+        searchboxId="rs_docs"
+        />
+    )
+  )
+  .add(
+    "With enableAI + askButton + enterButton",
+    () => (
+      <SearchBoxRSDefault
+        placeholder="Search Books..."
+        enableAI={true}
+        AIUIConfig={{
+          askButton: boolean("askButton", true)
+        }}
+        enterButton={ boolean("enterButton", true)}
+      />
+    )
+  )
+  .add(
+    "With triggerOn",
+    () => (
+      <SearchBoxRSDefault
+        placeholder="Search Books..."
+        enableAI={true}
+        AIUIConfig={{
+          triggerOn: select("mode", ["manual", "question"], "manual"),
+          askButton: true
+        }}
+      />
+    )
+  )
+  .add(
+    "With triggerOn + renderTriggerMessage",
+    () => (
+      <SearchBoxRSDefault
+        placeholder="Search Books..."
+        enableAI={true}
+        AIUIConfig={{
+          triggerOn: select("mode", ["manual", "question"], "manual"),
+          renderTriggerMessage: <div>Click to trigger AIAnswer</div>,
+          askButton: true
+        }}
+      />
+    )
+  )
+  .add(
+    "With renderAIAnswer prop",
+    () => (
+      <SearchBoxWithCustomAIRender
+        placeholder="Search Books..."
+        enableAI={boolean("enableAI", true)}
+      />
+    )
+  )
   .add(
     "With mode prop",
     () => (
@@ -2481,6 +2562,74 @@ storiesOf("Search components/SearchBox", module)
     )
   )
   .add('with compoundClause', () => <SearchBoxRSDefault compoundClause={compoundClauseSelector()} />)
+  .add(
+    "With document suggestions",
+    () => (
+      <SearchBoxRSDefault
+        placeholder="Search Books..."
+        enableIndexSuggestions={boolean('enableIndexSuggestions', false)}
+        enableDocumentSuggestions={boolean("enableDocumentSuggestions", true)}
+        documentSuggestionsConfig={{
+          maxChars: number("maxChars", 6), // only return results until value is within maxChars count limit, optional setting where the default value of maxChars is 6
+          from: number("from", 0),
+          size: number("size", 5),
+          sectionLabel: text("sectionLabel","🕝 Recent Document Suggestions")
+        }}
+        includeFields={[
+            "original_title",
+            "original_language",
+            "overview"
+        ]}
+        showClear
+      />
+    )
+  )
+  .add(
+    "With document suggestions + renderItem",
+    () => (
+      <SearchBoxRSDefault
+        placeholder="Search Books..."
+        enableIndexSuggestions={boolean('enableIndexSuggestions', false)}
+        enableDocumentSuggestions={boolean("enableDocumentSuggestions", true)}
+        documentSuggestionsConfig={{
+          maxChars: number("maxChars", 6), // only return results until value is within maxChars count limit, optional setting where the default value of maxChars is 6
+          from: number("from", 0),
+          size: number("size", 5),
+          sectionLabel: text("sectionLabel","🕝 Recent Document Suggestions")
+        }}
+        includeFields={[
+            "original_title",
+            "original_language",
+            "overview"
+        ]}
+        showClear
+        renderItem={(suggestion)=>(<div>{suggestion._source.original_title} <span style={{color: "crimson", backgroundColor: "lightgray", padding: 5, borderRadius: 3}}>{new Date(Number(suggestion._source._timestamp) * 1000).toDateString() || ""}</span></div>)}
+      />
+    )
+  )
+  .add(
+    "With document suggestions + navigate on click",
+    () => (
+      <SearchBoxRSDefault
+        placeholder="Search Books..."
+        enableIndexSuggestions={boolean('enableIndexSuggestions', false)}
+        enableDocumentSuggestions={boolean("enableDocumentSuggestions", true)}
+        documentSuggestionsConfig={{
+          maxChars: number("maxChars", 6), // only return results until value is within maxChars count limit, optional setting where the default value of maxChars is 6
+          from: number("from", 0),
+          size: number("size", 5),
+          sectionLabel: text("sectionLabel","🕝 Recent Document Suggestions")
+        }}
+        includeFields={[
+            "original_title",
+            "original_language",
+            "overview"
+        ]}
+        showClear
+        renderItem={(suggestion)=>(<a style={{width:'100%', height: '100%', display: 'block', textDecoration: "none", color: "inherit"}} href={`https://www.google.com/search?q=${suggestion._source.original_title}`} target="_blank" rel="noreferrer">{suggestion._source.original_title}</a>)}
+      />
+    )
+  )
   .add(
     "Playground",
     () => (

diff --git a/stories/reactivesearch/SearchBox.stories.js b/stories/reactivesearch/SearchBox.stories.js
@@ -9,17 +9,17 @@ export default class SearchBoxDefault extends Component {
 			<ReactiveBase
 				app="good-books-ds"
 				url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
-				enableAppbase
-				appbaseConfig={{
-					recordAnalytics: !!this.props.enableRecentSuggestions,
-					enableQueryRules: false
+				reactivesearchAPIConfig={{
+					recordAnalytics: true,
+					"userId": "test",
 				}}
 			>
 				<div className="row">
 					<div className="col">
 						<SearchBox
 							dataField={[{ field: "original_title", weight: 3 }, { field: "original_title.search", weight: 1 }]}
 							componentId="BookSensor"
+							showDistinctSuggestions
 							{...this.props}
 						/>
 						<SelectedFilters componentId="BookSensor" />