From f11794b72a9106e5dac88e5f033691f2eac19ea9 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Wed, 29 Jan 2025 22:24:35 +0530
Subject: [PATCH 1/2] add wrapping

---
 packages/markups/src/elements/CodeBlock.js    |  3 +++
 packages/react/src/views/ChatBody/ChatBody.js | 24 ++++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/markups/src/elements/CodeBlock.js b/packages/markups/src/elements/CodeBlock.js
index d2d93901e..0aeb71d39 100644
--- a/packages/markups/src/elements/CodeBlock.js
+++ b/packages/markups/src/elements/CodeBlock.js
@@ -22,6 +22,9 @@ const CodeBlock = ({ lines }) => {
         style={mode === 'dark' ? monokai : vs}
         wrapLines
         css={styles.codeBlock}
+        codeTagProps={{
+          style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
+        }}
       >
         {code}
       </SyntaxHighlighter>
diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js
index 940b63e9b..d7cd74b69 100644
--- a/packages/react/src/views/ChatBody/ChatBody.js
+++ b/packages/react/src/views/ChatBody/ChatBody.js
@@ -14,6 +14,7 @@ import {
   useComponentOverrides,
   Modal,
   useTheme,
+  Button,
 } from '@embeddedchat/ui-elements';
 import RCContext from '../../context/RCInstance';
 import {
@@ -251,14 +252,20 @@ const ChatBody = ({
         </Box>
       )}
       {isModalOpen && (
-        <Modal>
+        <Modal onClose={toggleModal}>
           <Modal.Header>
-            <Modal.Title>Announcement</Modal.Title>
+            <Modal.Title
+              css={css`
+                padding: 15px;
+              `}
+            >
+              Announcement
+            </Modal.Title>
             <Modal.Close onClick={toggleModal} />
           </Modal.Header>
           <Modal.Content
             css={css`
-              height: 300px;
+              height: auto;
               word-wrap: break-word;
               overflow-wrap: anywhere;
               white-space: normal;
@@ -267,6 +274,17 @@ const ChatBody = ({
           >
             {channelInfo.announcement}
           </Modal.Content>
+          <Modal.Footer>
+            <Button
+              type="secondary"
+              onClick={toggleModal}
+              css={css`
+                margin: 15px;
+              `}
+            >
+              Close
+            </Button>
+          </Modal.Footer>
         </Modal>
       )}
       <Box

From 71177ed756f54c55363afd4fc8d2518e1b5d008c Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Sun, 2 Feb 2025 15:10:21 +0530
Subject: [PATCH 2/2] make modal scrollable

---
 packages/react/src/views/ChatBody/ChatBody.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js
index d7cd74b69..53a948873 100644
--- a/packages/react/src/views/ChatBody/ChatBody.js
+++ b/packages/react/src/views/ChatBody/ChatBody.js
@@ -265,11 +265,12 @@ const ChatBody = ({
           </Modal.Header>
           <Modal.Content
             css={css`
-              height: auto;
+              height: 300px;
               word-wrap: break-word;
               overflow-wrap: anywhere;
               white-space: normal;
               padding: 20px;
+              overflow-y: auto;
             `}
           >
             {channelInfo.announcement}