Show sources with no answer (#2363)

scazan · SamyPesse · web-flow · commit 9c5c1e5b6849 · 2024-06-28T15:25:01.000+02:00
Co-authored-by: Samy Pessé &lt;samypesse@gmail.com&gt;
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     ],
     "dependencies": {
         "@geist-ui/icons": "^1.0.2",
-        "@gitbook/api": "^0.51.0",
+        "@gitbook/api": "^0.52.0",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-popover": "^1.0.7",
         "@sentry/nextjs": "^7.94.1",
diff --git a/src/components/Search/SearchAskAnswer.tsx b/src/components/Search/SearchAskAnswer.tsx
@@ -6,10 +6,11 @@ import { atom, useRecoilState } from 'recoil';
 import { Loading } from '@/components/primitives';
 import { useLanguage } from '@/intl/client';
 import { t } from '@/intl/translate';
+import { TranslationLanguage } from '@/intl/translations';
 import { iterateStreamResponse } from '@/lib/actions';
 import { tcls } from '@/lib/tailwind';
 
-import { AskAnswerResult, streamAskQuestion } from './server-actions';
+import { AskAnswerResult, AskAnswerSource, streamAskQuestion } from './server-actions';
 import { useSearch, useSearchLink } from './useSearch';
 import { Link } from '../primitives';
 
@@ -94,6 +95,11 @@ export function SearchAskAnswer(props: { spaceId: string; query: string }) {
         };
     }, [setState]);
 
+    let hasAnswer = false;
+    if (state && 'answer' in state) {
+        hasAnswer = !!state?.answer?.body;
+    }
+
     return (
         <div
             className={tcls(
@@ -129,7 +135,6 @@ export function SearchAskAnswer(props: { spaceId: string; query: string }) {
 
 function AnswerBody(props: { answer: AskAnswerResult }) {
     const { answer } = props;
-    const getSearchLinkProps = useSearchLink();
     const language = useLanguage();
 
     const [, setSearchState] = useSearch();
@@ -143,94 +148,123 @@ function AnswerBody(props: { answer: AskAnswerResult }) {
                 data-test="search-ask-answer"
                 className={tcls('mt-4', 'px-4', 'text-dark/9', 'dark:text-light/8')}
             >
-                {answer.body}
+                {answer.hasAnswer ? answer.body : t(language, 'search_ask_no_answer')}
             </div>
             {answer.followupQuestions.length > 0 ? (
-                <div className={tcls('mt-7', 'flex', 'flex-col', 'flex-wrap', 'gap-1')}>
-                    {answer.followupQuestions.map((question) => (
-                        <Link
-                            key={question}
-                            className={tcls(
-                                'text-sm',
-                                'font-medium',
-                                'inline-flex',
-                                'items-start',
-                                'gap-2',
-                                'px-4',
-                                'py-1',
-                                'text-primary-500',
-                                'focus-within:text-primary-700',
-                                'hover:bg-primary/2',
-                                'dark:text-primary-400',
-                                'dark:hover:bg-primary-500/3',
-                            )}
-                            {...getSearchLinkProps({
-                                query: question,
-                                ask: true,
-                            })}
-                        >
-                            <IconSearch
-                                className={tcls(
-                                    'w-[15px]',
-                                    'h-[15px]',
-                                    'shrink-0',
-                                    'mt-0.5',
-                                    '[&>path]:[stroke-opacity:0.64]',
-                                )}
-                            />
-                            <span>{question}</span>
-                        </Link>
-                    ))}
-                </div>
+                <AnswerFollowupQuestions followupQuestions={answer.followupQuestions} />
             ) : null}
             {answer.sources.length > 0 ? (
-                <div
+                <AnswerSources
+                    hasAnswer={answer.hasAnswer}
+                    sources={answer.sources}
+                    language={language}
+                    onClose={onClose}
+                />
+            ) : null}
+        </>
+    );
+}
+
+function AnswerFollowupQuestions(props: { followupQuestions: string[] }) {
+    const { followupQuestions } = props;
+    const getSearchLinkProps = useSearchLink();
+
+    return (
+        <div className={tcls('mt-7 mb-4', 'flex', 'flex-col', 'flex-wrap', 'gap-1')}>
+            {followupQuestions.map((question) => (
+                <Link
+                    key={question}
                     className={tcls(
-                        'flex',
-                        'flex-wrap',
+                        'text-sm',
+                        'font-medium',
+                        'inline-flex',
+                        'items-start',
                         'gap-2',
-                        'mt-7',
-                        'py-4',
                         'px-4',
-                        'border-t',
-                        'border-dark/2',
-                        'dark:border-light/1',
+                        'py-1',
+                        'text-primary-500',
+                        'focus-within:text-primary-700',
+                        'hover:bg-primary/2',
+                        'dark:text-primary-400',
+                        'dark:hover:bg-primary-500/3',
                     )}
+                    {...getSearchLinkProps({
+                        query: question,
+                        ask: true,
+                    })}
                 >
-                    <span className={tcls('text-sm')}>{t(language, 'search_ask_sources')}</span>
-
-                    {answer.sources.map((source) => (
-                        <span key={source.id} className={tcls()}>
-                            <Link
-                                onClick={onClose}
-                                className={tcls(
-                                    'flex',
-                                    'text-sm',
-                                    'text-dark/7',
-                                    'hover:underline',
-                                    'focus-within:text-primary-700',
-                                    'dark:text-light/8',
-                                )}
-                                href={source.href}
-                                prefetch={false}
-                            >
-                                <IconBox
-                                    className={tcls(
-                                        'stroke-dark/6',
-                                        'w-[15px]',
-                                        'h-[15px]',
-                                        'shrink-0',
-                                        'mt-0.5',
-                                        'mr-0.5',
-                                        'dark:stroke-light/6',
-                                    )}
-                                />
-                                {source.title}
-                            </Link>
-                        </span>
-                    ))}
-                </div>
-            ) : null}
-        </>
+                    <IconSearch
+                        className={tcls(
+                            'w-[15px]',
+                            'h-[15px]',
+                            'shrink-0',
+                            'mt-0.5',
+                            '[&>path]:[stroke-opacity:0.64]',
+                        )}
+                    />
+                    <span>{question}</span>
+                </Link>
+            ))}
+        </div>
+    );
+}
+
+function AnswerSources(props: {
+    sources: AskAnswerSource[];
+    language: TranslationLanguage;
+    onClose: () => void;
+    hasAnswer?: boolean;
+}) {
+    const { sources, onClose, language, hasAnswer } = props;
+
+    return (
+        <div
+            className={tcls(
+                'flex',
+                'flex-wrap',
+                'gap-2',
+                'mt-7',
+                'py-4',
+                'px-4',
+                'border-t',
+                'border-dark/2',
+                'dark:border-light/1',
+            )}
+        >
+            <span className={tcls('text-sm')}>
+                {t(language, hasAnswer ? 'search_ask_sources' : 'search_ask_sources_no_answer')}
+            </span>
+
+            {sources.map((source) => (
+                <span key={source.id} className={tcls()}>
+                    <Link
+                        onClick={onClose}
+                        className={tcls(
+                            'flex',
+                            'text-sm',
+                            'text-dark/7',
+                            'hover:underline',
+                            'focus-within:text-primary-700',
+                            'dark:text-light/8',
+                        )}
+                        href={source.href}
+                        prefetch={false}
+                    >
+                        <IconBox
+                            className={tcls(
+                                'stroke-dark/6',
+                                'w-[15px]',
+                                'h-[15px]',
+                                'shrink-0',
+                                'mt-0.5',
+                                'mr-0.5',
+                                'dark:stroke-light/6',
+                            )}
+                        />
+                        {source.title}
+                    </Link>
+                </span>
+            ))}
+        </div>
     );
 }
diff --git a/src/components/Search/server-actions.tsx b/src/components/Search/server-actions.tsx
@@ -46,9 +46,10 @@ export interface AskAnswerSource {
 }
 
 export interface AskAnswerResult {
-    body: React.ReactNode;
+    body?: React.ReactNode;
     followupQuestions: string[];
     sources: AskAnswerSource[];
+    hasAnswer: boolean;
 }
 
 /**
@@ -112,12 +113,15 @@ export async function searchParentContent(
  * Server action to ask a question in a space.
  */
 export const streamAskQuestion = streamResponse(async function* (spaceId: string, query: string) {
-    const stream = api.api().spaces.streamAskInSpace(spaceId, { query, format: 'document' });
+    const stream = api
+        .api()
+        .spaces.streamAskInSpace(spaceId, { query, format: 'document', details: true });
     const pagesPromise = api.getSpaceContentData({ 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);
     }
 });
@@ -134,7 +138,7 @@ function transformAnswer(
     answer: SearchAIAnswer | undefined,
     pages: RevisionPage[],
 ): AskAnswerResult | null {
-    if (!answer || !('document' in answer.answer)) {
+    if (!answer) {
         return null;
     }
 
@@ -158,20 +162,22 @@ function transformAnswer(
         .filter(filterOutNullable);
 
     return {
-        body: (
-            <DocumentView
-                document={answer.answer.document}
-                context={{
-                    mode: 'default',
-                    contentRefContext: null,
-                    resolveContentRef: async () => null,
-                    shouldHighlightCode: () => false,
-                }}
-                style={['space-y-5']}
-            />
-        ),
+        body:
+            answer.answer && 'document' in answer.answer ? (
+                <DocumentView
+                    document={answer.answer.document}
+                    context={{
+                        mode: 'default',
+                        contentRefContext: null,
+                        resolveContentRef: async () => null,
+                        shouldHighlightCode: () => false,
+                    }}
+                    style={['space-y-5']}
+                />
+            ) : null,
         followupQuestions: answer.followupQuestions,
         sources,
+        hasAnswer: !!answer.answer && 'document' in answer.answer,
     };
 }
 
diff --git a/src/intl/translations/de.ts b/src/intl/translations/de.ts
@@ -13,7 +13,9 @@ export const de = {
     search_scope_all: 'Alle Inhalte',
     search_ask: 'Fragen "${1}"',
     search_ask_sources: 'Quellen',
-    search_ask_no_answer: 'Es konnte keine Antwort auf Ihre Frage gefunden werden, versuchen Sie es mit einer anderen Frage.',
+    search_ask_sources_no_answer: 'Verwandte Seiten',
+    search_ask_no_answer:
+        'Es konnte keine Antwort auf Ihre Frage gefunden werden. Versuchen Sie, sie umzuformulieren oder genauer zu sein.',
     search_ask_error: 'Etwas ist schief gelaufen. Bitte versuchen Sie es später noch einmal.',
     on_this_page: 'Auf dieser Seite',
     next_page: 'Nächste',
@@ -39,14 +41,16 @@ export const de = {
     notfound_title: 'Seite nicht gefunden',
     notfound: 'Die gesuchte Seite existiert nicht.',
     unexpected_error_title: 'Ein Fehler ist aufgetreten',
-    unexpected_error: 'Entschuldigung, ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.',
+    unexpected_error:
+        'Entschuldigung, ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.',
     unexpected_error_retry: 'Erneut versuchen',
     pdf_download: 'Als PDF exportieren',
     pdf_goback: 'Zurück zum Inhalt',
     pdf_print: 'Drucken oder als PDF speichern',
     pdf_page_of: '${1} von ${2}',
     pdf_mode_only_page: 'Nur diese Seite',
     pdf_mode_all: 'Alle Seiten',
-    pdf_limit_reached: 'Das PDF konnte für ${1} Seiten nicht generiert werden, Generierung wurde bei ${2} gestoppt.',
+    pdf_limit_reached:
+        'Das PDF konnte für ${1} Seiten nicht generiert werden, Generierung wurde bei ${2} gestoppt.',
     pdf_limit_reached_continue: 'Mit ${1} weiteren Seiten erweitern.',
 };
diff --git a/src/intl/translations/en.ts b/src/intl/translations/en.ts
@@ -13,7 +13,9 @@ export const en = {
     search_scope_all: 'All the content',
     search_ask: 'Ask "${1}"',
     search_ask_sources: 'Sources',
-    search_ask_no_answer: 'No answer could be found for your question, try with another one.',
+    search_ask_sources_no_answer: 'Related pages',
+    search_ask_no_answer:
+        'An answer could not be found for your question. You could try rephrasing it, or be more specific.',
     search_ask_error: 'Something went wrong. Please try again later.',
     on_this_page: 'On this page',
     next_page: 'Next',
diff --git a/src/intl/translations/es.ts b/src/intl/translations/es.ts
@@ -15,7 +15,9 @@ export const es: TranslationLanguage = {
     search_scope_all: 'Todo el contenido',
     search_ask: 'Preguntar "${1}"',
     search_ask_sources: 'Fuentes',
-    search_ask_no_answer: 'No se pudo encontrar una respuesta a tu pregunta, intenta con otra.',
+    search_ask_sources_no_answer: 'Páginas relacionadas',
+    search_ask_no_answer:
+        'No se pudo encontrar una respuesta para su pregunta. Puede intentar reformularla o ser más específico.',
     search_ask_error: 'Algo salió mal. Por favor, inténtalo de nuevo más tarde.',
     on_this_page: 'En esta página',
     next_page: 'Siguiente',
diff --git a/src/intl/translations/fr.ts b/src/intl/translations/fr.ts
@@ -15,7 +15,9 @@ export const fr: TranslationLanguage = {
     search_scope_all: 'Tout le contenu',
     search_ask: 'Demander "${1}"',
     search_ask_sources: 'Sources',
-    search_ask_no_answer: 'Aucune réponse trouvée à votre question, essayez-en une autre.',
+    search_ask_sources_no_answer: 'Pages connexes',
+    search_ask_no_answer:
+        "Aucune réponse n'a pu être trouvée pour votre question. Essayez de la reformuler ou d'être plus précis",
     search_ask_error: 'Quelque chose a mal fonctionné. Veuillez réessayer plus tard.',
     on_this_page: 'Sur cette page',
     next_page: 'Suivant',
diff --git a/src/intl/translations/ja.ts b/src/intl/translations/ja.ts
@@ -15,8 +15,9 @@ export const ja: TranslationLanguage = {
     search_scope_all: '全てのコンテンツ',
     search_ask: '"${1}" を質問する',
     search_ask_sources: '情報源',
+    search_ask_sources_no_answer: '関連ページ',
     search_ask_no_answer:
-        'ご質問に答えられる答えが見つかりませんでした、他の質問を試してください。',
+        'ご質問への回答が見つかりませんでした。質問を言い換えるか、もう少し具体的にしてください。',
     search_ask_error: '何らかのエラーが発生しました。後ほど再度お試しください。',
     on_this_page: 'このページ内',
     next_page: '次へ',
diff --git a/src/intl/translations/pt-br.ts b/src/intl/translations/pt-br.ts
diff --git a/src/intl/translations/zh.ts b/src/intl/translations/zh.ts
