(Admin UI - 2) UI chat should render the output in markdown (#7460)

* chat ui improvement

* ui - handle md text

ui/litellm-dashboard/package-lock.json

@@ -23,7 +23,7 @@
         "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18",
         "react-markdown": "^9.0.1",
-        "react-syntax-highlighter": "^15.5.0"
+        "react-syntax-highlighter": "^15.6.1"
       },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.7",
@@ -3420,6 +3420,11 @@
         "node": "*"
       }
     },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA=="
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.0.tgz",
@@ -6277,12 +6282,13 @@
       }
     },
     "node_modules/react-syntax-highlighter": {
-      "version": "15.5.0",
+      "version": "15.6.1",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.1.tgz",
-      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+      "integrity": "sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
         "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
         "lowlight": "^1.17.0",
         "prismjs": "^1.27.0",
         "refractor": "^3.6.0"

ui/litellm-dashboard/package.json

@@ -24,7 +24,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18",
     "react-markdown": "^9.0.1",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",

ui/litellm-dashboard/src/components/chat_ui.tsx

@@ -28,6 +28,7 @@ import openai from "openai";
 import { ChatCompletionMessageParam } from "openai/resources/chat/completions";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { Typography } from "antd";
+import { coy } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 interface ChatUIProps {
   accessToken: string | null;
@@ -319,9 +320,34 @@ const ChatUI: React.FC<ChatUIProps> = ({
                           <div style={{ 
                             whiteSpace: "pre-wrap", 
                             wordBreak: "break-word",
-                            maxWidth: "100%" 
+                            maxWidth: "100%"
                           }}>
-                            {message.content}
+                            <ReactMarkdown
+                              components={{
+                                code({node, inline, className, children, ...props}: React.ComponentPropsWithoutRef<'code'> & {
+                                  inline?: boolean;
+                                  node?: any;
+                                }) {
+                                  const match = /language-(\w+)/.exec(className || '');
+                                  return !inline && match ? (
+                                    <SyntaxHighlighter
+                                      style={coy as any}
+                                      language={match[1]}
+                                      PreTag="div"
+                                      {...props}
+                                    >
+                                      {String(children).replace(/\n$/, '')}
+                                    </SyntaxHighlighter>
+                                  ) : (
+                                    <code className={className} {...props}>
+                                      {children}
+                                    </code>
+                                  );
+                                }
+                              }}
+                            >
+                              {message.content}
+                            </ReactMarkdown>
                           </div>
                         </TableCell>
                       </TableRow>