Fixed JsonView width

frontend/src/StyledMarkdown.tsx

@@ -4,7 +4,8 @@ import { SxProps, useTheme } from '@mui/material/styles';
 import { Link } from '@mui/material';
 import { ChatQuery, QueryOptions } from './ChatQuery';
 import Box from '@mui/material/Box';
-
+import JsonView from '@uiw/react-json-view';
+import { vscodeTheme } from '@uiw/react-json-view/vscode';
 import { Mermaid } from './Mermaid';
 
 import './StyledMarkdown.css';
@@ -24,10 +25,34 @@ const StyledMarkdown: React.FC<StyledMarkdownProps> = (props: StyledMarkdownProp
     pre: {
       component: (element: any) => {
         const { className } = element.children.props;
-        const chart = element.children?.props?.children || "";
+        const content = element.children?.props?.children || "";
         if (className === "lang-mermaid") {
-          console.log(`StyledMarkdown pre: ${className}`);
-          return <Mermaid className="Mermaid" chart={chart} />;
+          return <Mermaid className="Mermaid" chart={content} />;
+        }
+        if (className === "lang-json") {
+          return <JsonView
+            style={{
+              ...vscodeTheme,
+              fontSize: "0.8rem",
+              maxHeight: "20rem",
+              padding: "14px 0",
+              overflow: "hidden",
+              width: "100%",
+              minHeight: "max-content",
+              backgroundColor: "transparent",
+            }}
+            displayDataTypes={false}
+            objectSortKeys={false}
+            collapsed={false}
+            value={JSON.parse(content)}>
+            <JsonView.String
+              render={({ children, ...reset }) => {
+                if (typeof (children) === "string" && children.match("\n")) {
+                  return <pre  {...reset} style={{ display: "flex", border: "none", ...reset.style }}>{children}</pre>
+                }
+              }}
+            />
+          </JsonView>;
         }
         return <pre><code className={className}>{element.children}</code></pre>;
       },