Support greeting and fix suggested questions if there are no custom questions defined

Author: zenoachtig

.changeset/social-moles-film.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Support `greeting` and fix suggested questions if there are no custom ones defined

packages/gitbook/src/components/AI/useAI.tsx

@@ -17,6 +17,10 @@ export type AIConfig = {
     aiMode: CustomizationAIMode;
     suggestions?: string[];
     trademark: boolean;
+    greeting?: {
+        title: string;
+        subtitle: string;
+    };
 };
 
 export type Assistant = Omit<GitBookAssistant, 'icon'> & {
@@ -50,10 +54,10 @@ export type Assistant = Omit<GitBookAssistant, 'icon'> & {
 const AIContext = React.createContext<AIConfig | null>(null);
 
 export function AIContextProvider(props: React.PropsWithChildren<AIConfig>): React.ReactElement {
-    const { aiMode, trademark, suggestions, children } = props;
+    const { aiMode, trademark, suggestions, greeting, children } = props;
     const value = React.useMemo(
-        () => ({ aiMode, trademark, suggestions }),
-        [aiMode, trademark, suggestions]
+        () => ({ aiMode, trademark, suggestions, greeting }),
+        [aiMode, trademark, suggestions, greeting]
     );
     return <AIContext.Provider value={value}>{children}</AIContext.Provider>;
 }

packages/gitbook/src/components/AIChat/AIChat.tsx

@@ -193,8 +193,12 @@ export function AIChatBody(props: {
     chat: AIChatState;
     welcomeMessage?: string;
     suggestions?: string[];
+    greeting?: {
+        title: string;
+        subtitle: string;
+    };
 }) {
-    const { chatController, chat, suggestions } = props;
+    const { chatController, chat, suggestions, greeting } = props;
     const { trademark } = useAI().config;
 
     const [input, setInput] = React.useState('');
@@ -233,19 +237,20 @@ export function AIChatBody(props: {
                                     className="size-8 text-primary [@container(min-height:400px)]:size-16"
                                 />
                             </div>
-                            <div className="flex flex-col items-start [@container(min-height:400px)]:items-center">
+                            <div className="flex flex-col items-start gap-1 [@container(min-height:400px)]:items-center">
                                 <h5
-                                    className="animate-blur-in-slow font-bold text-lg text-tint-strong [@container(min-height:400px)]:text-center"
+                                    className="animate-blur-in-slow font-bold text-lg text-tint-strong leading-tight [@container(min-height:400px)]:text-center"
                                     style={{ animationDelay: '.5s' }}
                                     data-testid="ai-chat-time-greeting"
                                 >
-                                    {timeGreeting}
+                                    {greeting?.title ?? timeGreeting}
                                 </h5>
                                 <p
-                                    className="animate-blur-in-slow text-tint [@container(min-height:400px)]:text-center"
+                                    className="animate-blur-in-slow text-tint leading-tight [@container(min-height:400px)]:text-center"
                                     style={{ animationDelay: '.6s' }}
                                 >
-                                    {t(language, 'ai_chat_assistant_description')}
+                                    {greeting?.subtitle ??
+                                        t(language, 'ai_chat_assistant_description')}
                                 </p>
                             </div>
                         </div>

packages/gitbook/src/components/AIChat/AIChatSuggestedQuestions.tsx

@@ -7,14 +7,16 @@ export default function AIChatSuggestedQuestions(props: {
     suggestions?: string[];
 }) {
     const language = useLanguage();
-    const {
-        chatController,
-        suggestions = [
-            tString(language, 'ai_chat_suggested_questions_about_this_page'),
-            tString(language, 'ai_chat_suggested_questions_read_next'),
-            tString(language, 'ai_chat_suggested_questions_example'),
-        ],
-    } = props;
+    const { chatController, suggestions: _suggestions } = props;
+
+    const suggestions =
+        _suggestions && _suggestions.length > 0
+            ? _suggestions
+            : [
+                  tString(language, 'ai_chat_suggested_questions_about_this_page'),
+                  tString(language, 'ai_chat_suggested_questions_read_next'),
+                  tString(language, 'ai_chat_suggested_questions_example'),
+              ];
 
     return (
         <div className="flex flex-col items-start gap-2 self-start">

packages/gitbook/src/components/Embeddable/EmbeddableAIChat.tsx

@@ -98,6 +98,7 @@ export function EmbeddableAIChat(props: EmbeddableAIChatProps) {
                         chatController={chatController}
                         chat={chat}
                         suggestions={configuration.suggestions}
+                        greeting={configuration.greeting}
                     />
                 </EmbeddableFrameBody>
             </EmbeddableFrameMain>