From 6441f8a05ef624df480375600474259742b4b1ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Fri, 9 Feb 2024 11:25:03 +0100
Subject: [PATCH] Improve placeholder in search button and input (#139)

* Improve search placeholders

* Improve perfs of AI search

* Increase back font-size

* Format
---
 src/components/Header/Header.tsx         |  7 ++++++-
 src/components/Search/SearchButton.tsx   |  3 +--
 src/components/Search/SearchModal.tsx    |  5 ++++-
 src/components/Search/server-actions.tsx | 23 +++--------------------
 src/intl/translations/en.json            |  2 ++
 src/lib/api.ts                           | 23 -----------------------
 6 files changed, 16 insertions(+), 47 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 29d0b45ce..2ffe3a89b 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -107,7 +107,12 @@ export function Header(props: {
                                     : null
                             }
                         >
-                            <p>{t(getSpaceLanguage(customization), 'search')}</p>
+                            <p className={tcls('flex-1')}>
+                                {t(
+                                    getSpaceLanguage(customization),
+                                    customization.aiSearch.enabled ? 'search_or_ask' : 'search',
+                                )}
+                            </p>
                         </SearchButton>
                     </Suspense>
                 </div>
diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx
index 1bfa4f994..461e5ef31 100644
--- a/src/components/Search/SearchButton.tsx
+++ b/src/components/Search/SearchButton.tsx
@@ -11,7 +11,6 @@ import { useSearch } from './useSearch';
 /**
  * Button to open the search modal.
  */
-
 export function SearchButton(props: { children?: React.ReactNode; style?: ClassValue }) {
     const { style, children } = props;
 
@@ -61,6 +60,7 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
                 'md:[&>span]:flex',
                 'md:w-full',
                 'md:px-3.5',
+                'text-base',
                 style,
             )}
         >
@@ -95,7 +95,6 @@ const Shortcut = () => {
                 'hidden',
                 'md:inline',
                 'justify-end',
-                'w-full',
                 'text-xs',
                 'text-dark/5',
                 'dark:text-light/5',
diff --git a/src/components/Search/SearchModal.tsx b/src/components/Search/SearchModal.tsx
index a0ce15e38..015318a98 100644
--- a/src/components/Search/SearchModal.tsx
+++ b/src/components/Search/SearchModal.tsx
@@ -217,7 +217,10 @@ function SearchModalBody(
                             'dark:text-light',
                             'dark:placeholder:text-light/7',
                         )}
-                        placeholder={tString(language, 'search_input_placeholder')}
+                        placeholder={tString(
+                            language,
+                            withAsk ? 'search_ask_input_placeholder' : 'search_input_placeholder',
+                        )}
                         spellCheck="false"
                         autoComplete="off"
                         autoCorrect="off"
diff --git a/src/components/Search/server-actions.tsx b/src/components/Search/server-actions.tsx
index 18d68d1c7..a4a0f9f0b 100644
--- a/src/components/Search/server-actions.tsx
+++ b/src/components/Search/server-actions.tsx
@@ -34,11 +34,6 @@ export interface AskAnswerSource {
     id: string;
     title: string;
     href: string;
-    ancestors: Array<{
-        id: string;
-        title: string;
-        href: string;
-    }>;
 }
 
 export interface AskAnswerResult {
@@ -79,22 +74,15 @@ export async function searchCollectionContent(
  */
 export const streamAskQuestion = streamResponse(async function* (spaceId: string, query: string) {
     const stream = api.api().spaces.streamAskInSpace(spaceId, { query, format: 'document' });
-    const pages = await api.getRevisionPages({ spaceId });
+    const pagesPromise = api.getRevisionPages({ spaceId });
 
     for await (const chunk of stream) {
+        // We run the AI search and fetch the pages in parallel
+        const pages = await pagesPromise;
         yield transformAnswer(chunk.answer, pages);
     }
 });
 
-export async function askQuestion(spaceId: string, query: string): Promise<AskAnswerResult | null> {
-    const [{ answer }, pages] = await Promise.all([
-        api.askQueryInSpace(spaceId, query),
-        api.getRevisionPages({ spaceId }),
-    ]);
-
-    return transformAnswer(answer, pages);
-}
-
 /**
  * List suggested questions for a space.
  */
@@ -126,11 +114,6 @@ function transformAnswer(
                 id: page.page.id,
                 title: page.page.title,
                 href: pageHref(pages, page.page),
-                ancestors: page.ancestors.map((ancestor) => ({
-                    id: ancestor.id,
-                    title: ancestor.title,
-                    href: pageHref(pages, ancestor),
-                })),
             };
         })
         .filter(filterOutNullable);
diff --git a/src/intl/translations/en.json b/src/intl/translations/en.json
index 2a9b34de8..b084216ce 100644
--- a/src/intl/translations/en.json
+++ b/src/intl/translations/en.json
@@ -5,7 +5,9 @@
     "switch_to_light_theme": "Switch to light theme",
     "switch_to_system_theme": "Switch to system theme",
     "search": "Search",
+    "search_or_ask": "Ask or Search",
     "search_input_placeholder": "Search content",
+    "search_ask_input_placeholder": "Search content or ask a question",
     "search_no_results": "No results for \"${1}\".",
     "search_scope_space": "Only in ${1}",
     "search_scope_all": "All the content",
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 57006515a..c1eac51d3 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -487,29 +487,6 @@ export const searchCollectionContent = cache(
     },
 );
 
-/**
- * Ask question in a space.
- */
-export const askQueryInSpace = cache(
-    'api.askQueryInSpace',
-    async (spaceId: string, query: string) => {
-        const response = await api().spaces.askQueryInSpace(
-            spaceId,
-            { query },
-            {
-                format: 'document',
-            },
-            {
-                ...noCacheFetchOptions,
-            },
-        );
-
-        return cacheResponse(response, {
-            tags: [getAPICacheTag({ tag: 'space', space: spaceId })],
-        });
-    },
-);
-
 /**
  * Get a list of recommended questions in a space.
  */