优化pre uid

.dev.vars.default

@@ -0,0 +1,3 @@
+DASHSCOPE_API_KEY=xxx //千问
+HUNYUAN_API_KEY=xxx //混元
+ARK_API_KEY=xxx //豆包

package-lock.json

@@ -22,6 +22,7 @@
         "react-dom": "^18.2.0",
         "react-markdown": "^9.0.3",
         "tailwind-merge": "^2.6.0",
+        "tailwind-scrollbar-hide": "^2.0.0",
         "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
@@ -5034,6 +5035,14 @@
         "url": "https://github.com/sponsors/dcastil"
       }
     },
+    "node_modules/tailwind-scrollbar-hide": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-2.0.0.tgz",
+      "integrity": "sha512-lqiIutHliEiODwBRHy4G2+Tcayo2U7+3+4frBmoMETD72qtah+XhOk5XcPzC1nJvXhXUdfl2ajlMhUc2qC6CIg==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 4.0.0 || >= 4.0.0-beta.8 || >= 4.0.0-alpha.20"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",

package.json

@@ -22,6 +22,7 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.3",
     "tailwind-merge": "^2.6.0",
+    "tailwind-scrollbar-hide": "^2.0.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {

src/components/ChatUI.tsx

@@ -386,10 +386,19 @@ const ChatUI = () => {
                         message.sender.name === "我" ? "text-white [&_*]:text-white" : ""
                       } 
                       [&_p]:m-0 
-                      [&_pre]:bg-gray-100 
-                      [&_pre]:p-3 
+                      [&_pre]:bg-gray-900 
+                      [&_pre]:p-2
+                      [&_pre]:m-0 
                       [&_pre]:rounded-lg
+                      [&_pre]:text-gray-100
+                      [&_pre]:whitespace-pre-wrap
+                      [&_pre]:break-words
+                      [&_pre_code]:whitespace-pre-wrap
+                      [&_pre_code]:break-words
                       [&_code]:text-sm
+                      [&_code]:text-gray-400
+                      [&_code:not(:where([class~="language-"]))]:text-pink-500
+                      [&_code:not(:where([class~="language-"]))]:bg-transparent
                       [&_a]:text-blue-500
                       [&_a]:no-underline
                       [&_ul]:my-2

tailwind.config.js

@@ -55,6 +55,6 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/typography'),
-    require("tailwindcss-animate")
+    require("tailwindcss-animate"),
   ],
 }