feat: Support top suggested replies

src/components/chat/ui/ChatMessageList.tsx

@@ -60,6 +60,18 @@ export const ChatMessageList = () => {
             filteredMessages[index + 1],
             enableMessageGrouping,
           );
+
+          const renderSuggestedReplies = showRepliesOnLastMessage && suggestedReplies.length > 0;
+          const { suggestedRepliesOptions, suggestedRepliesDirection } = botStudioEditProps ?? {};
+          const isSuggestedRepliesAtTop = suggestedRepliesOptions?.location === 'top';
+          const SuggestedReplies =
+            <SuggestedRepliesContainer
+              replies={suggestedReplies}
+              type={suggestedRepliesOptions?.direction ?? suggestedRepliesDirection}
+              sendUserMessage={(params) => {
+                dataSource.sendUserMessage(params, handlers.onAfterSendMessage).then(handlers.onAfterSendMessage);
+              }}
+            />;
 
           return (
             <div style={{ padding: '0 16px' }} key={getComponentKeyFromMessage(message)}>
@@ -72,6 +84,7 @@ export const ChatMessageList = () => {
                 />
               )}
               <div style={{ marginBottom: index === filteredMessages.length - 1 ? 0 : 16 }}>
+                {renderSuggestedReplies && isSuggestedRepliesAtTop && SuggestedReplies}
                 <CustomMessage
                   message={message as any}
                   activeSpinnerId={typingTargetMessageId}
@@ -84,16 +97,7 @@ export const ChatMessageList = () => {
                   message.messageId === channel?.lastMessage?.messageId && (
                     <MessageDataContent messageData={message.data} />
                   )}
-
-                {showRepliesOnLastMessage && suggestedReplies.length > 0 && (
-                  <SuggestedRepliesContainer
-                    replies={suggestedReplies}
-                    type={botStudioEditProps?.suggestedRepliesDirection}
-                    sendUserMessage={(params) => {
-                      dataSource.sendUserMessage(params, handlers.onAfterSendMessage).then(handlers.onAfterSendMessage);
-                    }}
-                  />
-                )}
+                {renderSuggestedReplies && !isSuggestedRepliesAtTop && SuggestedReplies}
               </div>
             </div>
           );

src/const.ts

@@ -108,12 +108,19 @@ export interface BotInfo {
   nickname?: string;
 }
 
+interface SuggestedRepliesOptions {
+  direction?: 'horizontal' | 'vertical';
+  location?: 'top' | 'bottom';
+}
+
 export interface BotStudioEditProps {
   botInfo?: BotInfo;
   aiAttributes?: Record<string, unknown>;
   welcomeMessages?: WelcomeUserMessage[];
   styles?: WidgetStyles;
+  // @deprecated Use `SuggestedRepliesOptions` instead.
   suggestedRepliesDirection?: 'horizontal' | 'vertical';
+  suggestedRepliesOptions?: SuggestedRepliesOptions;
 }
 
 export interface MessageInputControls {