Merge branch 'dev'

package-lock.json

@@ -37,6 +37,7 @@
         "@radix-ui/react-toggle": "^1.1.1",
         "@radix-ui/react-toggle-group": "^1.1.1",
         "@radix-ui/react-tooltip": "^1.1.6",
+        "@tailwindcss/typography": "^0.5.16",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "@types/ungap__structured-clone": "^1.2.0",
@@ -47,6 +48,7 @@
         "cmdk": "1.0.4",
         "date-fns": "^4.1.0",
         "embla-carousel-react": "^8.5.1",
+        "highlight.js": "^11.11.1",
         "idb": "^8.0.1",
         "input-otp": "^1.4.1",
         "lucide-react": "^0.469.0",
@@ -58,6 +60,7 @@
         "react-markdown": "^9.0.3",
         "react-resizable-panels": "^2.1.7",
         "recharts": "^2.15.0",
+        "rehype-highlight": "^7.0.2",
         "rehype-katex": "^7.0.1",
         "remark-math": "^6.0.0",
         "sakura.css": "^1.5.0",
@@ -3884,6 +3887,34 @@
         "string.prototype.matchall": "^4.0.6"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
+      "integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -6103,6 +6134,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -6875,6 +6915,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "license": "MIT"
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -6882,6 +6928,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "license": "MIT"
+    },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -6911,6 +6969,21 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.3.0.tgz",
+      "integrity": "sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "highlight.js": "~11.11.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -8534,6 +8607,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/rehype-highlight": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-7.0.2.tgz",
+      "integrity": "sha512-k158pK7wdC2qL3M5NcZROZ2tR/l7zOzjxXd5VGdcfIyoijjQqpHd3JKtYSBDpDZ38UI2WJWuFAtkMDxmx5kstA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-to-text": "^4.0.0",
+        "lowlight": "^3.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/rehype-katex": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-7.0.1.tgz",

package.json

@@ -38,6 +38,7 @@
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-toggle-group": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/ungap__structured-clone": "^1.2.0",
@@ -48,6 +49,7 @@
     "cmdk": "1.0.4",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.5.1",
+    "highlight.js": "^11.11.1",
     "idb": "^8.0.1",
     "input-otp": "^1.4.1",
     "lucide-react": "^0.469.0",
@@ -59,6 +61,7 @@
     "react-markdown": "^9.0.3",
     "react-resizable-panels": "^2.1.7",
     "recharts": "^2.15.0",
+    "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
     "sakura.css": "^1.5.0",

src/components/MessageBubble.tsx

@@ -2,6 +2,7 @@ import { LightBulbIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import Markdown from "react-markdown";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
+import rehypeHighlight from "rehype-highlight";
 import "katex/dist/katex.min.css";
 import {
   useContext,
@@ -307,13 +308,14 @@ export default function Message(props: { messageIndex: number }) {
           </div>
         )}
       {chat.role === "assistant" ? (
-        <div className="border-b border-border dark:border-border-dark pb-4">
+        <div className="pb-4">
           {chat.reasoning_content ? (
-            <Collapsible className="mb-3">
+            <Card className="bg-muted hover:bg-muted/80 mb-5 w-full lg:w-[65%]">
-              <div className="flex items-center justify-between">
+              <Collapsible>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center justify-between px-3 py-1">
-                  <h4 className="text-sm font-semibold text-gray-500">
+                  <div className="flex items-center">
-                    {chat.response_model_name}
+                    <h4 className="font-semibold text-sm">
+                      Think Content of {chat.response_model_name}
                     </h4>
                     <CollapsibleTrigger asChild>
                       <Button variant="ghost" size="sm">
@@ -323,10 +325,11 @@ export default function Message(props: { messageIndex: number }) {
                     </CollapsibleTrigger>
                   </div>
                 </div>
-              <CollapsibleContent className="ml-5 text-gray-500 message-content">
+                <CollapsibleContent className="ml-5 text-gray-500 message-content p">
                   {chat.reasoning_content.trim()}
                 </CollapsibleContent>
               </Collapsible>
+            </Card>
           ) : null}
           <div>
             {chat.hide ? (
@@ -336,37 +339,35 @@ export default function Message(props: { messageIndex: number }) {
             ) : chat.tool_calls ? (
               <MessageToolCall chat={chat} copyToClipboard={copyToClipboard} />
             ) : renderMarkdown ? (
-              <div className="message-content max-w-full md:max-w-[100%]">
               <Markdown
                 remarkPlugins={[remarkMath]}
-                  rehypePlugins={[rehypeKatex]}
+                rehypePlugins={[rehypeKatex, rehypeHighlight]}
-                  //break={true}
+                disallowedElements={[
-                  components={{
+                  "script",
-                    code: ({ children }) => (
+                  "iframe",
-                      <code className="bg-muted px-1 py-0.5 rounded">
+                  "object",
-                        {children}
+                  "embed",
-                      </code>
+                  "hr",
-                    ),
+                ]}
-                    pre: ({ children }) => (
+                // allowElement={(element) => {
-                      <pre className="bg-muted p-4 rounded-lg overflow-auto">
+                //   return [
-                        {children}
+                //     "p",
-                      </pre>
+                //     "em",
-                    ),
+                //     "strong",
-                    a: ({ href, children }) => (
+                //     "del",
-                      <a
+                //     "code",
-                        href={href}
+                //     "inlineCode",
-                        target="_blank"
+                //     "blockquote",
-                        rel="noopener noreferrer"
+                //     "ul",
-                        className="text-primary hover:underline"
+                //     "ol",
-                      >
+                //     "li",
-                        {children}
+                //     "pre",
-                      </a>
+                //   ].includes(element.tagName);
-                    ),
+                // }}
-                  }}
+                className={"prose max-w-none md:max-w-[75%]"}
               >
                 {getMessageText(chat)}
               </Markdown>
-              </div>
             ) : (
               <div className="message-content max-w-full md:max-w-[100%]">
                 {chat.content &&
@@ -435,7 +436,18 @@ export default function Message(props: { messageIndex: number }) {
             ) : chat.role === "tool" ? (
               <MessageToolResp chat={chat} copyToClipboard={copyToClipboard} />
             ) : renderMarkdown ? (
-              <Markdown>{getMessageText(chat)}</Markdown>
+              <Markdown
+                components={{
+                  p: ({ children, node }: any) => {
+                    if (node?.parent?.type === "listItem") {
+                      return <>{children}</>;
+                    }
+                    return <p>{children}</p>;
+                  },
+                }}
+              >
+                {getMessageText(chat)}
+              </Markdown>
             ) : (
               <div className="message-content">
                 {chat.content &&

src/global.css

@@ -1,3 +1,5 @@
+@import 'highlight.js/styles/monokai.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

tailwind.config.cjs

@@ -4,6 +4,13 @@ module.exports = {
     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      typography: (theme) => ({
+				DEFAULT: {
+					css: {
+            
+					},
+				},
+			}),
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
@@ -85,5 +92,5 @@ module.exports = {
       }
     }
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 };