Merge pull request #294 from Chainlit/at/CHA-229

refactor: Collapse long message

src/chainlit/frontend/src/components/atoms/Collapse.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useToggle } from 'usehooks-ts';
+
+import { DownloadRounded, ExpandLess, ExpandMore } from '@mui/icons-material';
+import {
+  Box,
+  IconButton,
+  Collapse as MCollapse,
+  Stack,
+  Theme
+} from '@mui/material';
+
+interface CollapseProps {
+  children: React.ReactNode;
+  onDownload: () => void;
+}
+
+const Collapse = ({ children, onDownload }: CollapseProps): JSX.Element => {
+  const [expandAll, toggleExpandAll] = useToggle(false);
+
+  return (
+    <Box>
+      <MCollapse
+        sx={{
+          border: (theme: Theme) => `3px solid ${theme.palette.divider}`,
+          borderRadius: 1,
+          padding: 1
+        }}
+        in={expandAll}
+        collapsedSize={30}
+      >
+        {children}
+      </MCollapse>
+      <Stack
+        sx={{
+          position: 'absolute',
+          right: 0
+        }}
+        direction="row"
+      >
+        <IconButton onClick={toggleExpandAll}>
+          {expandAll ? <ExpandLess /> : <ExpandMore />}
+        </IconButton>
+        <IconButton onClick={onDownload}>
+          <DownloadRounded />
+        </IconButton>
+      </Stack>
+    </Box>
+  );
+};
+
+export default Collapse;

src/chainlit/frontend/src/components/organisms/chat/message/content.tsx

@@ -1,16 +1,20 @@
+import { exportToFile } from 'helpers/export';
 import { memo } from 'react';
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import remarkGfm from 'remark-gfm';
 
 import { Link, Stack, Typography } from '@mui/material';
 
 import Code from 'components/atoms/Code';
+import Collapse from 'components/atoms/Collapse';
 import ElementRef from 'components/atoms/element/ref';
 
 import { IMessageElement } from 'state/element';
 
 import InlinedElements from './inlined';
 
+const COLLAPSE_MIN_LENGTH = 300;
+
 interface Props {
   id?: string;
   content?: string;
@@ -110,47 +114,57 @@ export default memo(function MessageContent({
 
   if (!preparedContent) return null;
 
-  return (
-    <Stack width="100%">
-      <Stack direction="row">
-        <Typography
-          sx={{
-            width: '100%',
-            minHeight: '20px',
-            fontSize: '1rem',
-            lineHeight: '1.5rem',
-            fontFamily: 'Inter',
-            fontWeight: authorIsUser ? 500 : 300
+  const renderContent = () => (
+    <Stack direction="row">
+      <Typography
+        sx={{
+          width: '100%',
+          minHeight: '20px',
+          fontSize: '1rem',
+          lineHeight: '1.5rem',
+          fontFamily: 'Inter',
+          fontWeight: authorIsUser ? 500 : 300
+        }}
+        component="div"
+      >
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          className="markdown-body"
+          components={{
+            a({ children, ...props }) {
+              const name = children[0] as string;
+              const element = refElements.find((e) => e.name === name);
+
+              if (element) {
+                return <ElementRef element={element} />;
+              } else {
+                return (
+                  <Link {...props} target="_blank">
+                    {children}
+                  </Link>
+                );
+              }
+            },
+            code({ ...props }) {
+              return <Code {...props} />;
+            }
           }}
-          component="div"
         >
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            className="markdown-body"
-            components={{
-              a({ children, ...props }) {
-                const name = children[0] as string;
-                const element = refElements.find((e) => e.name === name);
-
-                if (element) {
-                  return <ElementRef element={element} />;
-                } else {
-                  return (
-                    <Link {...props} target="_blank">
-                      {children}
-                    </Link>
-                  );
-                }
-              },
-              code({ ...props }) {
-                return <Code {...props} />;
-              }
-            }}
-          >
-            {preparedContent}
-          </ReactMarkdown>
-        </Typography>
-      </Stack>
+          {preparedContent}
+        </ReactMarkdown>
+      </Typography>
+    </Stack>
+  );
+
+  return (
+    <Stack width="100%">
+      {preparedContent.length > COLLAPSE_MIN_LENGTH ? (
+        <Collapse onDownload={() => exportToFile(preparedContent, `${id}.txt`)}>
+          {renderContent()}
+        </Collapse>
+      ) : (
+        renderContent()
+      )}
       <InlinedElements elements={inlinedElements} />
     </Stack>
   );

src/chainlit/frontend/src/helpers/export.tsx

@@ -0,0 +1,11 @@
+export function exportToFile(data: string, filename: string) {
+  const blob = new Blob([data], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+
+  link.setAttribute('href', url);
+  link.setAttribute('download', filename);
+  link.click();
+
+  URL.revokeObjectURL(url);
+}