Fix an issue where Ask AI was erroring due to an object being passed as a param. (#2607)

Author: emmerich

.changeset/sweet-bikes-jog.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Fix an issue where Ask AI was erroring due to an object being passed as a param.

packages/gitbook/src/components/Search/HighlightQuery.tsx

@@ -30,13 +30,13 @@ export function HighlightQuery(props: {
     const matches = matchString(text, query);
 
     return (
-        <div className={tcls('whitespace-break-spaces')}>
+        <span className={tcls('whitespace-break-spaces')}>
             {matches.map((entry, index) => (
                 <span key={index} className={tcls(entry.match ? highlight : null)}>
                     {entry.text}
                 </span>
             ))}
-        </div>
+        </span>
     );
 }
 

packages/gitbook/src/components/Search/SearchAskAnswer.tsx

@@ -1,5 +1,7 @@
+'use client';
+
 import { Icon } from '@gitbook/icons';
-import React from 'react';
+import React, { useState } from 'react';
 import { atom, useRecoilState } from 'recoil';
 
 import { Loading } from '@/components/primitives';
@@ -14,23 +16,23 @@ import { AskAnswerResult, AskAnswerSource, streamAskQuestion } from './server-ac
 import { useSearch, useSearchLink } from './useSearch';
 import { Link } from '../primitives';
 
-/**
- * Store the state of the answer in a global state so that it can be
- * accessed from anywhere to show a loading indicator.
- */
-export const searchAskState = atom<
+type SearchState =
     | {
           type: 'answer';
-          answer: AskAnswerResult | null;
+          answer: AskAnswerResult;
       }
     | {
           type: 'error';
       }
     | {
           type: 'loading';
-      }
-    | null
->({
+      };
+
+/**
+- * Store the state of the answer in a global state so that it can be
+- * accessed from anywhere to show a loading indicator.
+- */
+export const searchAskState = atom<SearchState | null>({
     key: 'searchAskState',
     default: null,
 });
@@ -44,6 +46,7 @@ export function SearchAskAnswer(props: { pointer: SiteContentPointer; query: str
     const language = useLanguage();
     const [, setSearchState] = useSearch();
     const [state, setState] = useRecoilState(searchAskState);
+    const { organizationId, siteId, siteSpaceId } = pointer;
 
     React.useEffect(() => {
         let cancelled = false;
@@ -53,7 +56,9 @@ export function SearchAskAnswer(props: { pointer: SiteContentPointer; query: str
         });
 
         (async () => {
-            const stream = iterateStreamResponse(streamAskQuestion(pointer, query));
+            const stream = iterateStreamResponse(
+                streamAskQuestion(organizationId, siteId, siteSpaceId ?? null, query),
+            );
 
             setSearchState((prev) =>
                 prev
@@ -92,7 +97,7 @@ export function SearchAskAnswer(props: { pointer: SiteContentPointer; query: str
                 cancelled = true;
             }
         };
-    }, [pointer, query, setSearchState, setState]);
+    }, [organizationId, siteId, siteSpaceId, query]);
 
     React.useEffect(() => {
         return () => {
@@ -109,15 +114,9 @@ export function SearchAskAnswer(props: { pointer: SiteContentPointer; query: str
     return (
         <div className={tcls('max-h-[60vh]', 'overflow-y-auto')}>
             {state?.type === 'answer' ? (
-                <>
-                    {state.answer ? (
-                        <React.Suspense fallback={loading}>
-                            <TransitionAnswerBody answer={state.answer} placeholder={loading} />
-                        </React.Suspense>
-                    ) : (
-                        <div className={tcls('p-4')}>{t(language, 'search_ask_no_answer')}</div>
-                    )}
-                </>
+                <React.Suspense fallback={loading}>
+                    <TransitionAnswerBody answer={state.answer} placeholder={loading} />
+                </React.Suspense>
             ) : null}
             {state?.type === 'error' ? (
                 <div className={tcls('p-4')}>{t(language, 'search_ask_error')}</div>

packages/gitbook/src/components/Search/SearchModal.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Collection, Site } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useRouter } from 'next/navigation';

packages/gitbook/src/components/Search/server-actions.tsx

@@ -154,24 +154,26 @@ export async function searchSiteSpaceContent(
  * Server action to ask a question in a space.
  */
 export const streamAskQuestion = streamResponse(async function* (
-    pointer: api.SiteContentPointer,
+    organizationId: string,
+    siteId: string,
+    siteSpaceId: string | null,
     question: string,
 ) {
     const stream = api.api().orgs.streamAskInSite(
-        pointer.organizationId,
-        pointer.siteId,
+        organizationId,
+        siteId,
         {
             question,
-            context: pointer.siteSpaceId
+            context: siteSpaceId
                 ? {
-                      siteSpaceId: pointer.siteSpaceId,
+                      siteSpaceId,
                   }
                 : undefined,
             scope: {
                 mode: 'default',
 
                 // Include the current site space regardless.
-                includedSiteSpaces: pointer.siteSpaceId ? [pointer.siteSpaceId] : undefined,
+                includedSiteSpaces: siteSpaceId ? [siteSpaceId] : undefined,
             },
         },
         { format: 'document' },
@@ -221,7 +223,7 @@ async function transformAnswer(
             const { pages } = await api.getSpaceContentData({ spaceId }, undefined);
             spaceData.set(spaceId, pages);
         },
-        { concurrency: 10 },
+        { concurrency: 3 },
     );
 
     const sources = answer.sources