update AI page

public/css/chat.css

@@ -155,16 +155,33 @@ body,
     border-color: #888;
 }
 
+pre {
+    background-color: #1e1e1e;
+    padding: 20px;
+    margin: 20px 0; /* Adds space around the pre element */
+    border-radius: 5px;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
 pre code {
     background-color: #1e1e1e;
     color: #f8f8f2;
     padding: 10px;
     border-radius: 5px;
-    display: block;
     white-space: pre-wrap;
     word-wrap: break-word;
 }
 
+code {
+    background-color: #1e1e1e;
+    color: #f8f8f2;
+    padding: 10px;
+    border-radius: 5px;
+    display: block;
+}
+
 .copy-button {
     background-color: #444;
     color: white;
@@ -220,32 +237,23 @@ pre code {
 
 .copy-button-code {
     background-color: #444;
-    /* Button background color */
     color: white;
-    /* Button text color */
     border: none;
-    /* Remove border */
     cursor: pointer;
-    /* Pointer cursor for interaction */
     padding: 5px 10px;
-    /* Adjusted padding for smaller size */
+    margin-top: 10px;
-    margin-top: 5px;
-    /* Space at the top */
     display: inline-block;
-    /* Keep the button in line */
     font-size: 14px;
-    /* Slightly smaller font size for compactness */
     width: 56px;
-    /* Prevent the button from stretching */
     text-align: left;
-    /* Align the text left */
 }
 
-.copy-button:hover {
+.copy-button-code:hover {
     background-color: #555;
-    /* Darker shade on hover */
 }
 
+
+
 /* Add animations for the alerts */
 @keyframes fadeSlideIn {
     0% {