From 2097064e75299ed42ab6ee3713f6989ba9dcba82 Mon Sep 17 00:00:00 2001
From: Liam Hongman Cho <liam.cho@sendbird.com>
Date: Thu, 30 May 2024 13:18:47 +0900
Subject: [PATCH 1/2] Fixed a bug where horizontal suggested reply items
 contents are not wrapping to multiple lines.

---
 .../components/SuggestedReplies/index.scss    | 12 ++++++++---
 .../components/SuggestedReplies/index.tsx     | 20 +++++++++++--------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.scss b/src/modules/GroupChannel/components/SuggestedReplies/index.scss
index 0b9078d76..0a0150f50 100644
--- a/src/modules/GroupChannel/components/SuggestedReplies/index.scss
+++ b/src/modules/GroupChannel/components/SuggestedReplies/index.scss
@@ -47,14 +47,14 @@
 }
 
 .sendbird-suggested-replies__option {
-  white-space: nowrap;
-  height: 32px;
+  white-space: pre-wrap;
   font-size: 12px;
-  padding: 0 14px;
+  padding: 8px 14px;
   display: flex;
   align-items: center;
   border-radius: 18px;
   cursor: pointer;
+  word-break: break-word;
   @include themed() {
     color: t(primary--3-2);
     border: 1px solid t(primary--3-2);
@@ -71,4 +71,10 @@
       color: t(bg-0);
     }
   }
+  &.horizontal {
+    white-space: nowrap;
+  }
+  &.vertical {
+    white-space: pre-wrap;
+  }
 }
diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx
index 50bd3d44d..5ac9e5958 100644
--- a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx
+++ b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx
@@ -11,20 +11,24 @@ export interface SuggestedRepliesProps {
 export interface ReplyItemProps {
   value: string;
   onClickReply: (event: React.MouseEvent<HTMLDivElement>, option: string) => void;
+  type?: 'vertical' | 'horizontal';
 }
 
 export const ReplyItem = ({
   value,
   onClickReply,
+  type = 'vertical',
 }: ReplyItemProps) => {
   return (
-    <div
-      className="sendbird-suggested-replies__option"
-      id={value}
-      onClick={(e) => onClickReply(e, value)}
-    >
-      {value}
-    </div>
+    <>
+      <div
+        className={`sendbird-suggested-replies__option ${type}`}
+        id={value}
+        onClick={(e) => onClickReply(e, value)}
+      >
+        {value}
+      </div>
+    </>
   );
 };
 
@@ -46,7 +50,7 @@ const SuggestedReplies = ({ replyOptions, onSendMessage, type = 'vertical' }: Su
 
   const children = replyOptions.map((option: string, index: number) => {
     return (
-      <ReplyItem key={index} value={option} onClickReply={onClickReply}/>
+      <ReplyItem key={index} value={option} onClickReply={onClickReply} type={type} />
     );
   });
 

From d3bbb640a15959c0d39bb02bae39ab769283825a Mon Sep 17 00:00:00 2001
From: Liam Hongman Cho <liam.cho@sendbird.com>
Date: Thu, 30 May 2024 13:28:59 +0900
Subject: [PATCH 2/2] remove redundant

---
 .../components/SuggestedReplies/index.tsx        | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx
index 5ac9e5958..5204f3627 100644
--- a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx
+++ b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx
@@ -20,15 +20,13 @@ export const ReplyItem = ({
   type = 'vertical',
 }: ReplyItemProps) => {
   return (
-    <>
-      <div
-        className={`sendbird-suggested-replies__option ${type}`}
-        id={value}
-        onClick={(e) => onClickReply(e, value)}
-      >
-        {value}
-      </div>
-    </>
+    <div
+      className={`sendbird-suggested-replies__option ${type}`}
+      id={value}
+      onClick={(e) => onClickReply(e, value)}
+    >
+      {value}
+    </div>
   );
 };