diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index abc78778..c5574ab8 100644
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -52,14 +52,21 @@ type MarkdownProps = {
   isLoading: boolean;
   onPrompt?: (prompt: string) => void;
   children: string;
+  className?: string;
 };
 
-function Markdown({ previewCode, isLoading, onPrompt, children }: MarkdownProps) {
+function Markdown({
+  previewCode,
+  isLoading,
+  onPrompt,
+  children,
+  className = "message-text",
+}: MarkdownProps) {
   const style = useColorModeValue(oneLight, oneDark);
 
   return (
     <ReactMarkdown
-      className="message-text"
+      className={className}
       children={children}
       remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
       rehypePlugins={[
diff --git a/src/components/Message/Message.css b/src/components/Message/Message.css
index 5af0372c..bc4adb8d 100644
--- a/src/components/Message/Message.css
+++ b/src/components/Message/Message.css
@@ -14,18 +14,23 @@
 .message-text h1 {
   font-size: 1.383em;
 }
+
 .message-text h2 {
   font-size: 1.296em;
 }
+
 .message-text h3 {
   font-size: 1.215em;
 }
+
 .message-text h4 {
   font-size: 1.138em;
 }
+
 .message-text h5 {
   font-size: 1.067em;
 }
+
 .message-text h6 {
   font-size: 1em;
 }
@@ -58,10 +63,12 @@
   content: "`";
   font-size: 0.9em;
 }
+
 .message-text .inline-code {
   font-weight: bold;
   font-size: 0.9em;
 }
+
 .message-text .inline-code::after {
   content: "`";
   font-size: 0.9em;
@@ -88,6 +95,7 @@
 .chakra-ui-light .linenumber {
   color: rgb(160, 161, 167);
 }
+
 .chakra-ui-dark .linenumber {
   color: rgb(92, 99, 112);
 }
@@ -114,3 +122,16 @@
 .message-text a {
   text-decoration: underline;
 }
+
+.message-text-blur {
+  --mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 1) 0,
+      rgba(0, 0, 0, 1) 50%,
+      rgba(0, 0, 0, 0) 95%,
+      rgba(0, 0, 0, 0) 0
+    )
+    100% 50% / 100% 100% repeat-x;
+  -webkit-mask: var(--mask);
+  mask: var(--mask);
+}
diff --git a/src/components/Message/MessageBase.tsx b/src/components/Message/MessageBase.tsx
index 25b83d82..decfcda0 100644
--- a/src/components/Message/MessageBase.tsx
+++ b/src/components/Message/MessageBase.tsx
@@ -1,5 +1,6 @@
 import {
   memo,
+  startTransition,
   useCallback,
   useState,
   useEffect,
@@ -33,6 +34,7 @@ import {
   useClipboard,
   Kbd,
   Spacer,
+  useDisclosure,
 } from "@chakra-ui/react";
 import ResizeTextarea from "react-textarea-autosize";
 import { TbDots, TbTrash } from "react-icons/tb";
@@ -111,6 +113,17 @@ function MessageBase({
   const isNarrowScreen = useMobileBreakpoint();
   const messageForm = useRef<HTMLFormElement>(null);
   const meta = useMemo(getMetaKey, []);
+  const { isOpen, onToggle: originalOnToggle } = useDisclosure();
+  const isLongMessage = text.length > 5000;
+  const displaySummaryText = !isOpen && (summaryText || isLongMessage);
+
+  // Wrap the onToggle function with startTransition, state update should be deferred due to long message
+  // https://reactjs.org/docs/error-decoder.html?invariant=426
+  const onToggle = () => {
+    startTransition(() => {
+      originalOnToggle();
+    });
+  };
 
   useEffect(() => {
     if (settings.countTokens) {
@@ -334,6 +347,14 @@ function MessageBase({
         <CardBody p={0}>
           <Flex direction="column" gap={3}>
             <Box maxWidth="100%" minH="2em" overflow="hidden" px={6} pb={2}>
+              {
+                // only display the button before message if the message is too long and toggled
+                !editing && isLongMessage && isOpen ? (
+                  <Button size="sm" variant="ghost" onClick={() => onToggle()}>
+                    {"Show Less"}
+                  </Button>
+                ) : undefined
+              }
               {editing ? (
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
                 <form onSubmit={handleSubmit} ref={messageForm} onKeyDown={handleKeyDown}>
@@ -381,9 +402,21 @@ function MessageBase({
                   </VStack>
                 </form>
               ) : (
-                <Markdown previewCode={!hidePreviews} isLoading={isLoading} onPrompt={onPrompt}>
-                  {summaryText || text}
-                </Markdown>
+                <>
+                  <Markdown
+                    previewCode={!hidePreviews && !displaySummaryText}
+                    isLoading={isLoading}
+                    onPrompt={onPrompt}
+                    className={displaySummaryText ? "message-text message-text-blur" : undefined}
+                  >
+                    {displaySummaryText ? summaryText || text.slice(0, 500).trim() : text}
+                  </Markdown>
+                  {isLongMessage ? (
+                    <Button zIndex={10} size="sm" variant="ghost" onClick={() => onToggle()}>
+                      {isOpen ? "Show Less" : "Show More..."}
+                    </Button>
+                  ) : undefined}
+                </>
               )}
             </Box>
           </Flex>