added doc recommendations to search

2 files changed, 105 insertions, 17 deletions

diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index e8865b918..5516cf205 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -9,16 +9,21 @@
     background: none;
     z-index: 1000;
     padding: 0px;
+    overflow: scroll;
     cursor: default;
 
     .searchBox-bar {
         width: 100%;
-        height: 35px;
+        height: fit-content;
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: none;
         padding: 5px;
+        top: 0px;
+        position: sticky;
+        background: $light-gray;
+        border-bottom: $standard-border;
 
         .searchBox-type {
             display: block;
@@ -42,34 +47,66 @@
         }
     }
 
-    .searchBox-results-container {
+    .section-header {
+
+        .section-title {
+            font-size: $body-text;
+            font-weight: 600;
+        }
+
+        .section-subtitle {
+            display: flex;
+            color: $light-gray;
+        }
+        
+        padding: 5px 10px;
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+        background: $medium-blue;
+        color: white;
+    }
+
+    .searchBox-recommendations-container {
         display: flex;
         flex-direction: column;
         width: 100%;
-        height: 100%;
+        height: fit-content;
         justify-content: "center";
-    
-        .searchBox-results-count {
+
+        .searchBox-recommendations-view {
+            margin-top: 10px;
             display: flex;
-            color: gray;
-            margin-left: 5px;
+            width: 100%;
+            height: fit-content;
+            flex-direction: column;
+            gap: 10px;
+            padding: 0px 10px;
+            
+
         }
+    }
+
+    .searchBox-results-container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: fit-content;
+        justify-content: "center";
     
-        .searchBox-results-scroll-view {
-            margin-top: 10px;
+        .searchBox-results-view {
             display: inline-block;
             width: 100%;
-            height: calc(100% - 55px);
-            overflow-y: scroll;
+            height: fit-content;
 
             .searchBox-results-scroll-view-result {
                 display: inline-block;
                 vertical-align: middle;
                 width: 100%;
-                height: 50px;
+                height: fit-content;
                 cursor: pointer;
                 font-size: 15px;
-                padding: 11px;
+                padding: 10px;
 
                 &.searchBox-results-scroll-view-result-selected {
                     background: #999;
@@ -81,6 +118,8 @@
                     width: calc(100% - 45px);
                     text-align: left;
                     overflow: hidden;
+                    max-height: 2.4em;
+                    line-height: 1.2em;
                     text-overflow: ellipsis;
                 }
 
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 3479cd20f..43e5344b6 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -14,6 +14,8 @@ import { CollectionDockingView } from '../collections/CollectionDockingView';
 import { ViewBoxBaseComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import './SearchBox.scss';
+import { fetchRecommendations } from '../newlightbox/utils';
+import { IRecommendation, Recommendation } from '../newlightbox/components';
 
 const DAMPENING_FACTOR = 0.9;
 const MAX_ITERATIONS = 25;
@@ -42,6 +44,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
     @observable _searchString = '';
     @observable _docTypeString = 'all';
     @observable _results: Map<Doc, string[]> = new Map<Doc, string[]>();
+    @observable _recommendations: IRecommendation[] = [];
     @observable _pageRanks: Map<Doc, number> = new Map<Doc, number>();
     @observable _linkedDocsOut: Map<Doc, Set<Doc>> = new Map<Doc, Set<Doc>>();
     @observable _linkedDocsIn: Map<Doc, Set<Doc>> = new Map<Doc, Set<Doc>>();
@@ -393,6 +396,38 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
 
         if (query) {
             this.searchCollection(query);
+            const response = await fetchRecommendations('', query, [], true)
+            const recs = response.recommendations
+            const recommendations:IRecommendation[] = []
+            for (const key in recs) {
+                const title = recs[key].title;
+                console.log(title);
+                const url = recs[key].url
+                const type = recs[key].type
+                const text = recs[key].text
+                const transcript = recs[key].transcript
+                const previewUrl = recs[key].previewUrl
+                const embedding = recs[key].embedding
+                const distance = recs[key].distance
+                const source = recs[key].source
+                const related_concepts = recs[key].related_concepts
+                const docId = recs[key].doc_id
+                recommendations.push({
+                    title: title,
+                    data: url,
+                    type: type,
+                    text: text,
+                    transcript: transcript,
+                    previewUrl: previewUrl,
+                    embedding: embedding,
+                    distance: Math.round(distance * 100) / 100,
+                    source: source,
+                    related_concepts: related_concepts,
+                    docId: docId
+                })
+            }
+            const setRecommendations = action(() => this._recommendations = recommendations)
+            setRecommendations()
         }
     };
 
@@ -487,6 +522,10 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
             }
         });
 
+        const recommendationsJSX: JSX.Element[] = this._recommendations.map((props) => (
+            <Recommendation {...props}/>
+        ))
+
         return (
             <div style={{ pointerEvents: 'all' }} className="searchBox-container">
                 <div className="searchBox-bar">
@@ -511,10 +550,20 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
                         ref={this._inputRef}
                     />
                 </div>
-                <div className="searchBox-results-container">
-                    <div className="searchBox-results-count">{`${validResults}` + ' result' + (validResults === 1 ? '' : 's')}</div>
-                    <div className="searchBox-results-scroll-view">{resultsJSX}</div>
-                </div>
+                {resultsJSX.length > 0 && <div className="searchBox-results-container">
+                    <div className="section-header">
+                        <div className="section-title">Results</div>
+                        <div className="section-subtitle">{`${validResults}` + ' result' + (validResults === 1 ? '' : 's')}</div>
+                    </div>
+                    <div className="searchBox-results-view">{resultsJSX}</div>
+                </div>}
+                {recommendationsJSX.length > 0 && <div className="searchBox-recommendations-container">
+                    <div className="section-header">
+                        <div className="section-title">Recommendations</div>
+                        <div className="section-subtitle">{`${validResults}` + ' result' + (validResults === 1 ? '' : 's')}</div>
+                    </div>
+                    <div className="searchBox-recommendations-view">{recommendationsJSX}</div>
+                </div>}
             </div>
         );
     }