Enhance MessageBubble component with improved styling and collapsible content

src/components/MessageBubble.tsx

@@ -307,11 +307,12 @@ export default function Message(props: { messageIndex: number }) {
       {chat.role === "assistant" ? (
         <div className="border-b border-border dark:border-border-dark 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">
@@ -321,10 +322,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 ? (
@@ -340,6 +342,12 @@ export default function Message(props: { messageIndex: number }) {
                   rehypePlugins={[rehypeKatex]}
                   //break={true}
                   components={{
+                    strong: ({ children }) => (
+                      <strong className="font-semibold">{children}</strong>
+                    ),
+                    em: ({ children }) => (
+                      <em className="italic text-primary">{children}</em>
+                    ),
                     code: ({ children }) => (
                       <code className="bg-muted px-1 py-0.5 rounded">
                         {children}
@@ -360,6 +368,34 @@ export default function Message(props: { messageIndex: number }) {
                         {children}
                       </a>
                     ),
+                    ol: ({ children }) => (
+                      <ol className="list-decimal ml-6 space-y-2">
+                        {children}
+                      </ol>
+                    ),
+                    ul: ({ children }) => (
+                      <ul className="list-disc ml-6 space-y-2">{children}</ul>
+                    ),
+                    h1: ({ children }) => (
+                      <h1 className="text-2xl font-bold mt-6 mb-4">
+                        {children}
+                      </h1>
+                    ),
+                    h2: ({ children }) => (
+                      <h2 className="text-xl font-bold mt-5 mb-3">
+                        {children}
+                      </h2>
+                    ),
+                    h3: ({ children }) => (
+                      <h3 className="text-lg font-semibold mt-4 mb-2">
+                        {children}
+                      </h3>
+                    ),
+                    blockquote: ({ children }) => (
+                      <blockquote className="border-l-4 border-muted pl-4 italic">
+                        {children}
+                      </blockquote>
+                    ),
                   }}
                 >
                   {getMessageText(chat)}