visual tweaks

examples/chat-ui/src/components/messages/ChatMessage.tsx

@@ -33,7 +33,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {
   // Handle regular messages (user, assistant, system)
   return (
     <div className={`flex justify-end`}>
-      <div className={`max-w-[80%] rounded-2xl px-5 py-3 shadow bg-white text-black`}>
+      <div className={`max-w-[80%] rounded-2xl px-5 py-3 shadow bg-white text-black mb-3`}>
         <div className="prose prose-zinc">
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}

examples/chat-ui/src/components/messages/ReasoningBlock.tsx

@@ -1,12 +0,0 @@
-import React, { useState, useEffect } from 'react'
-
-interface ReasoningBlockProps {
-  reasoning: string
-  isStreaming?: boolean
-  startTime?: number
-  endTime?: number
-}
-
-const ReasoningBlock: React.FC<ReasoningBlockProps> = ({ reasoning, isStreaming = false, startTime, endTime }) => {}
-
-export default ReasoningBlock

examples/chat-ui/src/components/messages/ReasoningMessage.tsx

@@ -39,7 +39,7 @@ const ReasoningMessage: React.FC<ReasoningMessageProps> = ({ message }) => {
     <div className={`flex justify-start`}>
       <div className={`text-zinc-900 w-full`}>
         <div
-          className={`text-xs/5 text-zinc-600 border opacity-80 hover:opacity-100 border-zinc-200 rounded-lg p-3 bg-zinc-50 cursor-pointer hover:bg-zinc-100 transition-all duration-300 ${
+          className={`text-xs/5 text-zinc-600 border opacity-80 hover:opacity-100 border-zinc-200 rounded-lg p-3 bg-zinc-50 cursor-pointer hover:bg-zinc-100 ${
             isExpanded ? 'border-zinc-300 opacity-100' : ''
           }`}
           onClick={toggleExpanded}