Add configuration option for follow-up prompts & fix overflow in FollowUpPromptBubble

README.md

@@ -182,6 +182,11 @@ You can also customize chatbot with different configuration
           showAvatar: true,
           avatarSrc: 'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png',
         },
+        followUpPrompts: {
+          iconColor: '#3B81F6'',
+          textColor: '#303235',
+          text: 'Try these prompts',
+        },
         textInput: {
           placeholder: 'Type your question',
           backgroundColor: '#ffffff',

dist/components/Bot.d.ts

@@ -1,5 +1,5 @@
 import { FeedbackRatingType } from '@/queries/sendMessageQuery';
-import { BotMessageTheme, FooterTheme, TextInputTheme, UserMessageTheme, FeedbackTheme, DisclaimerPopUpTheme, DateTimeToggleTheme } from '@/features/bubble/types';
+import { BotMessageTheme, FooterTheme, TextInputTheme, UserMessageTheme, FeedbackTheme, DisclaimerPopUpTheme, DateTimeToggleTheme, FollowUpPromptTheme } from '@/features/bubble/types';
 import { FilePreview } from '@/components/inputs/textInput/components/FilePreview';
 export type FileEvent<T = EventTarget> = {
     target: T;
@@ -90,6 +90,7 @@ export type BotProps = {
     errorMessage?: string;
     botMessage?: BotMessageTheme;
     userMessage?: UserMessageTheme;
+    followUpPrompts?: FollowUpPromptTheme;
     textInput?: TextInputTheme;
     feedback?: FeedbackTheme;
     poweredByTextColor?: string;

dist/features/bubble/types.d.ts

@@ -38,6 +38,11 @@ export type BotMessageTheme = {
     showAvatar?: boolean;
     avatarSrc?: string;
 };
+export type FollowUpPromptTheme = {
+    iconColor?: string;
+    textColor?: string;
+    text?: string;
+};
 export type FooterTheme = {
     showFooter?: boolean;
     textColor?: string;
@@ -64,6 +69,7 @@ export type ChatWindowTheme = {
     fontSize?: number;
     userMessage?: UserMessageTheme;
     botMessage?: BotMessageTheme;
+    followUpPrompts?: FollowUpPromptTheme;
     textInput?: TextInputTheme;
     feedback?: FeedbackTheme;
     footer?: FooterTheme;