feat(frontend/chat): update chat implementation and API integration

Refactored chat components and hooks to improve functionality and maintain conversation state.
Updated API endpoints for sending messages and retrieving chat history with PostgreSQL persistence.

Modified files (10):
- page.tsx: Replaced ChatInterfaceClient with ChatInterface
- ConversationList.tsx: Updated terminology from conversations to chats
- ConversationSidebar.tsx: Updated terminology from conversations to chats
- use-chat.ts: Enhanced chat state management with serialized state
- use-conversations.ts: Updated error handling and terminology
- chat-service.ts: Implemented new API endpoint for chat messages
- constants.ts: Updated API base URL for backend
- chat.ts: Updated types for chat messages and requests
- types/chat.ts: Added serialized state for message requests
- types/chat.ts: Updated response types for chat messages

Author: cristofima

src/frontend/task-agent-web/README.md

@@ -7,34 +7,35 @@ AI-powered task management interface built with **Next.js 16**, **React 19**, an
 ### Core Functionality
 
 - 🤖 **AI Chat Interface** - Natural language task management
+- 🎯 **Custom AG-UI Integration** - SSE streaming with `/api/agent/chat` endpoint
 - 💡 **Smart Suggestions** - Clickable contextual suggestions from AI agent
-- 📂 **Conversation Management** - List, load, and delete conversations
-- 🗂️ **Sidebar Navigation** - Collapsible sidebar with conversation history
+- 📂 **Chat Management** - List, load, and delete chats
+- 🗂️ **Sidebar Navigation** - Collapsible sidebar with chat history
 - 🏷️ **Auto-generated Titles** - Titles extracted from first user message
 - ⏳ **Enhanced Loading States** - Contextual loading messages with animations
 - 📱 **Responsive Design** - Works on desktop, tablet, and mobile
 - 🎨 **Modern UI** - ChatGPT-inspired clean design with Tailwind CSS
 - 📐 **Adaptive Layout** - Centered welcome state, fixed input when chatting
 - 🔄 **Smart Scrolling** - Independent message scroll with fixed header and input
-- 💾 **localStorage Persistence** - Remembers current conversation across sessions
+- 💾 **localStorage Persistence** - Remembers current chat across sessions
 
 ### Recent Updates (November 2025)
 
 #### v2.1 - Content Safety UX Enhancements
 
 - ✅ **Blocked Messages in Chat** - Content Safety violations appear as assistant messages (not toasts)
-- ✅ **Thread Continuity** - Blocked conversations create threads for seamless continuation
+- ✅ **Thread Continuity** - Blocked chats create threads for seamless continuation
 - ✅ **Smart Title Updates** - Titles regenerate when first valid message sent after block
 - ✅ **Optimized Sidebar Refresh** - Only reloads when title changes (efficient flag-based approach)
-- ✅ **ChatGPT-like Behavior** - Natural conversation flow even with blocked messages
+- ✅ **ChatGPT-like Behavior** - Natural chat flow even with blocked messages
 
-#### v2.0 - Conversation Management
+#### v2.0 - Chat Management
 
-- ✅ **ConversationSidebar Component** - Full conversation history with search
+- ✅ **ConversationSidebar Component** - Full chat history with search
 - ✅ **ConversationList Component** - Paginated list with auto-generated titles
-- ✅ **ConversationItem Component** - Individual conversation cards with metadata
+- ✅ **ConversationItem Component** - Individual chat cards with metadata
 - ✅ **DeleteConfirmModal Component** - Confirmation dialog with smooth animations
-- ✅ **useConversations Hook** - Conversation state management
+- ✅ **useConversations Hook** - Chat state management
 - ✅ **localStorage Integration** - Persists current thread ID
 - ✅ **API Integration** - List, load, and delete endpoints
 
@@ -134,29 +135,78 @@ src/frontend/task-agent-web/
 │   │   ├── SuggestionsBar.tsx          # Clickable suggestion buttons
 │   │   ├── ErrorToast.tsx              # Error display
 │   │   └── LoadingIndicator.tsx        # Contextual loading states
-│   ├── conversations/          # Conversation management
+│   ├── conversations/          # Chat management
 │   │   ├── ConversationSidebar.tsx     # Sidebar layout
-│   │   ├── ConversationList.tsx        # List of conversations
-│   │   ├── ConversationItem.tsx        # Individual conversation card
+│   │   ├── ConversationList.tsx        # List of chats
+│   │   ├── ConversationItem.tsx        # Individual chat card
 │   │   └── DeleteConfirmModal.tsx      # Delete confirmation
 │   └── shared/                 # Shared components
 │       └── LoadingIndicator.tsx    # Reusable loading component
 ├── hooks/                      # Custom React hooks
 │   ├── use-chat.ts             # Chat state management
-│   └── use-conversations.ts    # Conversation management
+│   └── use-conversations.ts    # Chat management
 ├── lib/                        # Utilities
 │   ├── utils.ts                # Helper functions (cn utility)
 │   ├── constants.ts            # App constants
 │   └── api/                    # API client functions
-│       └── chat-service.ts     # Chat & conversation API
+│       └── chat-service.ts     # Chat & API client
 ├── types/                     # TypeScript definitions
 │   ├── chat.ts                # Chat types
-│   └── conversation.ts        # Conversation types
+│   └── conversation.ts        # Thread/conversation types (technical)
 ├── public/                    # Static assets
 └── types/ # TypeScript definitions
     └── chat.ts # Chat types
 ```
 
+## 🏗️ Architecture
+
+**Custom Implementation with AG-UI Foundation**:
+
+```
+Frontend (Next.js)
+├── Custom UI Components
+│   ├── ChatInterface.tsx
+│   ├── ConversationSidebar.tsx
+│   ├── ChatMessagesList.tsx
+│   └── use-chat.ts hook
+│
+↕️ SSE Streaming (Server-Sent Events)
+│   POST /api/agent/chat
+│   • serializedState → Backend
+│   • SSE events ← Backend
+│   • THREAD_STATE event (new serializedState)
+│
+Backend (.NET)
+├── AgentController (Custom SSE endpoint)
+│   └── Wraps Microsoft Agent Framework
+│       • Deserializes thread from serializedState
+│       • Streams responses via RunStreamingAsync
+│       • Returns updated serializedState
+│
+└── PostgresChatMessageStore
+    └── Automatic persistence in PostgreSQL
+```
+
+**Why Custom AG-UI Endpoint (not standard `/agui`)?**
+- ✅ **Full SSE control**: Custom event types (`CONTENT_START`, `CONTENT_DELTA`, `THREAD_STATE`)
+- ✅ **serializedState pattern**: Frontend receives updated state after each response
+- ✅ **Chat continuity**: Backend deserializes full thread from PostgreSQL
+- ✅ **No protocol limitations**: Can add custom events as needed
+- ✅ **Integrated chat sidebar**: 291 lines with auto-generated titles
+- ❌ Standard `/agui` doesn't return `serializedState` in streaming mode
+
+**Why Custom UI (not CopilotKit)?**
+- ✅ **Chat-first application**: Not auxiliary chat over another app
+- ✅ **Full UX control**: ChatGPT-inspired adaptive layout
+- ✅ **Minimal dependencies**: No heavy UI framework
+- ❌ CopilotKit designed for auxiliary chat, not main application
+
+**Microsoft Agent Framework Benefits**:
+- 🔄 Automatic message persistence via `ChatMessageStore`
+- 📡 SSE streaming with `RunStreamingAsync`
+- 🧵 Thread serialization/deserialization built-in
+- 📦 Function calling with `AIFunctionFactory`
+
 ## 🎯 Key Technologies
 
 - **Next.js 16** - React framework with App Router
@@ -211,11 +261,11 @@ Main color palette:
 - `POST /api/Chat/send` - Send message (non-streaming)
 - `POST /api/Chat/stream` - Streaming support (paused for future releases)
 
-#### Conversation Management
+#### Chat Management
 
-- `GET /api/Chat/threads` - List conversations with pagination
-- `GET /api/Chat/threads/{threadId}/messages` - Get conversation history
-- `DELETE /api/Chat/threads/{threadId}` - Delete conversation
+- `GET /api/Chat/threads` - List chats with pagination
+- `GET /api/Chat/threads/{threadId}/messages` - Get chat history
+- `DELETE /api/Chat/threads/{threadId}` - Delete chat
 
 ### Request/Response Formats
 
@@ -248,7 +298,7 @@ POST /api/Chat/send
 }
 ```
 
-#### List Conversations
+#### List Chats
 
 ```typescript
 // Request
@@ -274,7 +324,7 @@ GET /api/Chat/threads?page=1&pageSize=20&sortBy=UpdatedAt&sortOrder=desc&isActiv
 }
 ```
 
-#### Get Conversation History
+#### Get Chat History
 
 ```typescript
 // Request

src/frontend/task-agent-web/app/page.tsx

@@ -1,5 +1,11 @@
-import { ChatInterfaceClient } from "@/components/chat/ChatInterfaceClient";
+import { ChatInterface } from "@/components/chat/ChatInterface";
 
+/**
+ * Home Page - Task Agent AI
+ * Main chat interface with custom implementation
+ */
 export default function Home() {
-  return <ChatInterfaceClient />;
+  return <ChatInterface />;
 }
+
+

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

@@ -2,7 +2,7 @@
 
 /**
  * ConversationList Component
- * Displays a list of conversations with loading and empty states
+ * Displays a list of chats with loading and empty states
  */
 
 import type { ConversationThread } from "@/types/chat";
@@ -28,7 +28,7 @@ export function ConversationList({
     return (
       <div className="flex flex-col items-center justify-center py-12 px-4">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mb-3" />
-        <p className="text-sm text-gray-500">Loading conversations...</p>
+        <p className="text-sm text-gray-500">Loading chats...</p>
       </div>
     );
   }
@@ -53,10 +53,10 @@ export function ConversationList({
           </svg>
         </div>
         <p className="text-sm text-gray-600 font-medium mb-1">
-          No conversations yet
+          No chats yet
         </p>
         <p className="text-xs text-gray-500">
-          Start a new conversation to get started
+          Start a new chat to get started
         </p>
       </div>
     );

src/frontend/task-agent-web/components/conversations/ConversationList.tsx

@@ -2,7 +2,7 @@
 
 /**
  * ConversationSidebar Component
- * Sidebar for managing conversations (list, create, delete)
+ * Sidebar for managing chats (list, create, delete)
  * Responsive: Drawer on mobile, persistent sidebar on desktop
  */
 
@@ -77,7 +77,7 @@ export function ConversationSidebar({
         onConversationDeleted(threadId);
       }
     } catch (error) {
-      console.error("Failed to delete conversation:", error);
+      console.error("Failed to delete chat:", error);
     }
   };
 
@@ -168,7 +168,7 @@ export function ConversationSidebar({
             </div>
           </div>
 
-          {/* New conversation button */}
+          {/* New chat button */}
           {!isCollapsed && (
             <button
               onClick={handleNewConversation}