Merge branch 'dev'

2025-03-24 15:50:29 +08:00
parent e4919bb91f 14df7bebac
commit 9fbd9b98c2
6 changed files with 7819 additions and 51 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/MessageBubble.tsx
+++ b/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,26 +308,28 @@ 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">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <h4 className="text-sm font-semibold text-gray-500">
-                    {chat.response_model_name}
-                  </h4>
-                  <CollapsibleTrigger asChild>
-                    <Button variant="ghost" size="sm">
-                      <LightBulbIcon className="h-3 w-3 text-gray-500" />
-                      <span className="sr-only">Toggle</span>
-                    </Button>
-                  </CollapsibleTrigger>
+            <Card className="bg-muted hover:bg-muted/80 mb-5 w-full lg:w-[65%]">
+              <Collapsible>
+                <div className="flex items-center justify-between px-3 py-1">
+                  <div className="flex items-center">
+                    <h4 className="font-semibold text-sm">
+                      Think Content of {chat.response_model_name}
+                    </h4>
+                    <CollapsibleTrigger asChild>
+                      <Button variant="ghost" size="sm">
+                        <LightBulbIcon className="h-3 w-3 text-gray-500" />
+                        <span className="sr-only">Toggle</span>
+                      </Button>
+                    </CollapsibleTrigger>
+                  </div>
                </div>
-              </div>
-              <CollapsibleContent className="ml-5 text-gray-500 message-content">
-                {chat.reasoning_content.trim()}
-              </CollapsibleContent>
-            </Collapsible>
+                <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]}
-                  //break={true}
-                  components={{
-                    code: ({ children }) => (
-                      <code className="bg-muted px-1 py-0.5 rounded">
-                        {children}
-                      </code>
-                    ),
-                    pre: ({ children }) => (
-                      <pre className="bg-muted p-4 rounded-lg overflow-auto">
-                        {children}
-                      </pre>
-                    ),
-                    a: ({ href, children }) => (
-                      <a
-                        href={href}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-primary hover:underline"
-                      >
-                        {children}
-                      </a>
-                    ),
-                  }}
-                >
-                  {getMessageText(chat)}
-                </Markdown>
-              </div>
+              <Markdown
+                remarkPlugins={[remarkMath]}
+                rehypePlugins={[rehypeKatex, rehypeHighlight]}
+                disallowedElements={[
+                  "script",
+                  "iframe",
+                  "object",
+                  "embed",
+                  "hr",
+                ]}
+                // allowElement={(element) => {
+                //   return [
+                //     "p",
+                //     "em",
+                //     "strong",
+                //     "del",
+                //     "code",
+                //     "inlineCode",
+                //     "blockquote",
+                //     "ul",
+                //     "ol",
+                //     "li",
+                //     "pre",
+                //   ].includes(element.tagName);
+                // }}
+                className={"prose max-w-none md:max-w-[75%]"}
+              >
+                {getMessageText(chat)}
+              </Markdown>
            ) : (
              <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 &&
--- a/src/global.css
+++ b/src/global.css
@@ -1,3 +1,5 @@
+@import 'highlight.js/styles/monokai.css';
+
@tailwind base;
@tailwind components;
@tailwind utilities;
--- a/tailwind.config.cjs
+++ b/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")],
 };