feat(frontend/hooks): add streaming support to use-chat hook

Implemented progressive streaming for chat messages, allowing incremental display of responses as they are generated.
This enhances user experience by mimicking real-time interaction.

Modified files (5):
- use-chat.ts: Added streaming logic and callbacks for UI updates
- ChatInterface.tsx: Integrated streaming state into chat interface
- ChatMessagesList.tsx: Updated to handle streaming messages
- ChatMessage.tsx: Added blinking cursor effect during streaming
- chat-service.ts: Created sendMessageWithStreaming function

Author: cristofima

src/frontend/task-agent-web/components/chat/ChatInterface.tsx

@@ -32,6 +32,7 @@ export function ChatInterface() {
     messages,
     input,
     isLoading,
+    isStreaming, // New: progressive rendering state
     error,
     threadId,
     handleInputChange,
@@ -132,6 +133,7 @@ export function ChatInterface() {
                 <ChatMessagesList
                   messages={messages}
                   isLoading={isLoading}
+                  isStreaming={isStreaming} // Pass streaming state
                   onSuggestionClick={sendSuggestion}
                 />
               </div>

src/frontend/task-agent-web/components/chat/ChatMessage.tsx

@@ -12,6 +12,7 @@ interface ChatMessageProps {
   message: ChatMessageType;
   onSuggestionClick?: (suggestion: string) => void;
   isLoading?: boolean;
+  isStreaming?: boolean; // New: shows blinking cursor while streaming
 }
 
 /**
@@ -44,6 +45,7 @@ export const ChatMessage = memo(function ChatMessage({
   message,
   onSuggestionClick,
   isLoading = false,
+  isStreaming = false, // Streaming cursor state
 }: ChatMessageProps) {
   const isUser = message.role === "user";
   const [isHovered, setIsHovered] = useState(false);
@@ -68,21 +70,26 @@ export const ChatMessage = memo(function ChatMessage({
       onMouseLeave={() => setIsHovered(false)}
     >
       <div
-        className={`rounded-2xl px-3 sm:px-5 py-3 sm:py-3.5 max-w-[90%] sm:max-w-[85%] shadow-md hover:shadow-lg transition-shadow ${
+        className={`relative rounded-2xl px-3 sm:px-5 py-3 sm:py-3.5 max-w-[90%] sm:max-w-[85%] shadow-md hover:shadow-lg transition-shadow ${
           isUser
             ? "bg-gradient-to-br from-blue-600 to-blue-700 text-white ml-auto text-right"
-            : "bg-white border-2 border-gray-200 mr-auto"
+            : "bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 mr-auto"
         }`}
       >
+        {/* Copy button - top right corner */}
         {!isUser && (
-          <div className="font-bold text-gray-900 mb-2 flex items-center gap-2">
+          <MessageActions content={textContent} isVisible={isHovered} />
+        )}
+
+        {!isUser && (
+          <div className="font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
             <span className="text-base sm:text-lg">🤖</span>
             <span className="text-sm sm:text-base">Task Assistant</span>
           </div>
         )}
         <div
           className={`markdown-content leading-relaxed text-sm sm:text-base ${
-            isUser ? "text-white" : "text-gray-800"
+            isUser ? "text-white" : "text-gray-800 dark:text-gray-200"
           }`}
         >
           <ReactMarkdown
@@ -91,6 +98,10 @@ export const ChatMessage = memo(function ChatMessage({
           >
             {textContent}
           </ReactMarkdown>
+          {/* Blinking cursor while streaming - ChatGPT-like effect */}
+          {isStreaming && (
+            <span className="inline-block w-2 h-4 ml-0.5 bg-gray-800 dark:bg-gray-200 animate-pulse" />
+          )}
         </div>
 
         {/* Show suggestions for assistant messages */}
@@ -101,11 +112,6 @@ export const ChatMessage = memo(function ChatMessage({
             disabled={isLoading}
           />
         )}
-
-        {/* Show action buttons for assistant messages on hover */}
-        {!isUser && (
-          <MessageActions content={textContent} isVisible={isHovered} />
-        )}
       </div>
     </div>
   );

src/frontend/task-agent-web/components/chat/ChatMessagesList.tsx

@@ -7,35 +7,41 @@ import type { ChatMessage as ChatMessageType } from "@/types/chat";
 interface ChatMessagesListProps {
   messages: ChatMessageType[];
   isLoading: boolean;
+  isStreaming?: boolean; // New: indicates text is being streamed progressively
   onSuggestionClick?: (suggestion: string) => void;
 }
 
 /**
  * Chat messages list container with empty state and loading indicator
+ * Supports progressive streaming with blinking cursor
  */
 export function ChatMessagesList({
   messages,
   isLoading,
+  isStreaming = false,
   onSuggestionClick,
 }: ChatMessagesListProps) {
+  // Find the last message (streaming message) for cursor display
+  const lastMessageIndex = messages.length - 1;
+
   return (
     <>
       {messages.length === 0 ? (
         <div className="flex flex-col items-center justify-center text-center px-4">
-          <div className="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 max-w-2xl shadow-sm">
-            <div className="font-bold text-gray-900 mb-3 text-xl sm:text-2xl flex items-center justify-center gap-2">
+          <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-6 sm:p-8 max-w-2xl shadow-sm">
+            <div className="font-bold text-gray-900 dark:text-white mb-3 text-xl sm:text-2xl flex items-center justify-center gap-2">
               <span className="text-2xl sm:text-3xl">🤖</span>
               <span>Task Assistant</span>
             </div>
-            <p className="mb-4 text-gray-600 text-sm sm:text-base leading-relaxed">
+            <p className="mb-4 text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed">
               Hi! I&apos;m your task management assistant. I can help you
               create, organize, and track your tasks efficiently.
             </p>
-            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 sm:p-4">
-              <p className="text-xs sm:text-sm text-gray-700 font-medium mb-2">
+            <div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3 sm:p-4">
+              <p className="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-medium mb-2">
                 Try asking me:
               </p>
-              <p className="text-xs sm:text-sm text-blue-700 italic">
+              <p className="text-xs sm:text-sm text-blue-700 dark:text-blue-400 italic">
                 &quot;Create a task to review project proposal&quot;
                 <br />
                 &quot;Show me all my high priority tasks&quot;
@@ -45,17 +51,20 @@ export function ChatMessagesList({
         </div>
       ) : (
         <div className="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4 py-4 sm:py-6">
-          {messages.map((message) => (
+          {messages.map((message, index) => (
             <ChatMessage
               key={message.id}
               message={message}
               onSuggestionClick={onSuggestionClick}
               isLoading={isLoading}
+              // Show streaming cursor on last assistant message while streaming
+              isStreaming={isStreaming && index === lastMessageIndex && message.role === "assistant"}
             />
           ))}
-          {isLoading && <LoadingIndicator />}
+          {/* Show loading indicator only when waiting for stream to start (no content yet) */}
+          {isLoading && !isStreaming && <LoadingIndicator />}
         </div>
       )}
     </>
   );
-}
+}

src/frontend/task-agent-web/components/chat/MessageActions.tsx

@@ -85,14 +85,17 @@ export function MessageActions({ content, isVisible }: MessageActionsProps) {
   if (!isVisible) return null;
 
   return (
-    <div className="flex items-center gap-1 mt-2 pt-2 border-t border-gray-100">
+    <div className="absolute top-2 right-2 flex items-center gap-1">
       <button
         onClick={handleCopy}
         className="
-          flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg
+          flex items-center gap-1.5 px-2 py-1 rounded-md
           text-xs font-medium
-          text-gray-500 hover:text-gray-700
-          bg-gray-50 hover:bg-gray-100
+          text-gray-400 hover:text-gray-600
+          dark:text-gray-500 dark:hover:text-gray-300
+          bg-gray-100/80 hover:bg-gray-200/90
+          dark:bg-gray-700/80 dark:hover:bg-gray-600/90
+          backdrop-blur-sm
           transition-all duration-200
           cursor-pointer
         "