Styling improvements to AI Chat Followup questions (#3444)

Author: zenoachtig

.changeset/red-eagles-build.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Styling improvements to AI Chat Followup questions

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

@@ -16,7 +16,6 @@ import AIChatIcon from './AIChatIcon';
 import { AIChatInput } from './AIChatInput';
 import { AIChatMessages } from './AIChatMessages';
 import AIChatSuggestedQuestions from './AIChatSuggestedQuestions';
-import { AIChatFollowupSuggestions } from './AiChatFollowupSuggestions';
 
 export function AIChat() {
     const chat = useAIChatState();
@@ -169,19 +168,19 @@ export function AIChatWindow(props: { chat: AIChatState }) {
                             ) : null}
                         </div>
                     ) : (
-                        <AIChatMessages chat={chat} lastUserMessageRef={lastUserMessageRef} />
+                        <AIChatMessages
+                            chat={chat}
+                            chatController={chatController}
+                            lastUserMessageRef={lastUserMessageRef}
+                        />
                     )}
                 </div>
                 <div
                     ref={inputRef}
                     className="absolute inset-x-0 bottom-0 mr-2 flex flex-col gap-4 bg-gradient-to-b from-transparent to-50% to-tint-base/9 p-4 pr-2"
                 >
                     {/* Display an error banner when something went wrong. */}
-                    {chat.error ? (
-                        <AIChatError chatController={chatController} />
-                    ) : (
-                        <AIChatFollowupSuggestions chat={chat} chatController={chatController} />
-                    )}
+                    {chat.error ? <AIChatError chatController={chatController} /> : null}
 
                     <AIChatInput
                         value={input}

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

@@ -1,17 +1,20 @@
 import { tcls } from '@/lib/tailwind';
 import { AIMessageRole } from '@gitbook/api';
 import type React from 'react';
-import type { AIChatState } from '../AI/useAIChat';
+import type { AIChatController, AIChatState } from '../AI/useAIChat';
+import { AIChatFollowupSuggestions } from './AiChatFollowupSuggestions';
 
 export function AIChatMessages(props: {
     chat: AIChatState;
+    chatController: AIChatController;
     lastUserMessageRef?: React.RefObject<HTMLDivElement>;
 }) {
-    const { chat, lastUserMessageRef } = props;
+    const { chat, chatController, lastUserMessageRef } = props;
 
     return (
         <>
             {chat.messages.map((message, index) => {
+                const isLastMessage = index === chat.messages.length - 1;
                 const isLastUserMessage =
                     message.role === AIMessageRole.User &&
                     index === chat.messages.map((m) => m.role).lastIndexOf(AIMessageRole.User);
@@ -23,8 +26,9 @@ export function AIChatMessages(props: {
                             message.content ? 'animate-[fadeIn_500ms_both]' : '',
                             'shrink-0',
                             'last:min-h-[calc(100%-5rem)]',
+                            'flex flex-col gap-6',
                             message.role === AIMessageRole.User
-                                ? 'max-w-[80%] self-end rounded-md bg-tint px-4 py-2'
+                                ? 'max-w-[80%] self-end circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint px-4 py-2'
                                 : ''
                         )}
                         style={{
@@ -48,6 +52,12 @@ export function AIChatMessages(props: {
                                 ))}
                             </div>
                         ) : null}
+                        {isLastMessage ? (
+                            <AIChatFollowupSuggestions
+                                chat={chat}
+                                chatController={chatController}
+                            />
+                        ) : null}
                     </div>
                 );
             })}

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

@@ -15,17 +15,17 @@ export function AIChatFollowupSuggestions(props: {
     }
 
     return (
-        <div className="flex flex-row flex-wrap justify-end gap-2 pt-8">
+        <div className="mt-auto flex flex-row flex-wrap justify-end gap-2">
             {chat.followUpSuggestions.map((suggestion, index) => (
                 <Button
                     key={index}
                     onClick={() => {
                         chatController.postMessage({ message: suggestion });
                     }}
                     label={suggestion}
-                    className="max-w-full animate-[present_500ms_both] whitespace-normal text-right"
-                    size="small"
-                    variant="secondary"
+                    className="max-w-[80%] animate-[present_500ms_both] whitespace-normal text-left ring-1 ring-tint-subtle"
+                    size="medium"
+                    variant="blank"
                     style={{
                         animationDelay: `${250 + Math.min(index * 50, 150)}ms`,
                     }}