From 0c690774ea82d8875d4fccfe87eb5c4d01bca617 Mon Sep 17 00:00:00 2001
From: Liam Cho <liam.cho@sendbird.com>
Date: Tue, 17 Dec 2024 11:52:57 +0900
Subject: [PATCH] feat: Support top suggested replies

---
 src/components/chat/ui/ChatMessageList.tsx | 24 +++++++++++++---------
 src/const.ts                               |  7 +++++++
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/chat/ui/ChatMessageList.tsx b/src/components/chat/ui/ChatMessageList.tsx
index fd05608e3..609b152c3 100644
--- a/src/components/chat/ui/ChatMessageList.tsx
+++ b/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>
           );
diff --git a/src/const.ts b/src/const.ts
index 57bce938e..43700c939 100644
--- a/src/const.ts
+++ b/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 {