Merge pull request #4 from balureddy003/codex/add-chat-functionality-and-ui-component

feat: add chat endpoint and UI component

Author: balureddy003

src/frontend/src/api/apiService.tsx

@@ -22,7 +22,8 @@ const API_ENDPOINTS = {
     HUMAN_CLARIFICATION: '/human_clarification_on_plan',
     AGENT_MESSAGES: '/agent_messages',
     MESSAGES: '/messages',
-    USER_BROWSER_LANGUAGE: '/user_browser_language'
+    USER_BROWSER_LANGUAGE: '/user_browser_language',
+    CHAT: '/chat'
 };
 
 // Simple cache implementation
@@ -432,6 +433,23 @@ export class APIService {
         return fetcher();
     }
 
+    /**
+     * Send a chat message and receive a response from the backend
+     * @param sessionId Session ID for the conversation
+     * @param message User input message
+     * @returns Promise with backend response
+     */
+    async sendChatMessage(
+        sessionId: string,
+        message: string
+    ): Promise<{ session_id: string; reply: string }> {
+        const payload = {
+            session_id: sessionId,
+            message
+        };
+        return apiClient.post(API_ENDPOINTS.CHAT, payload);
+    }
+
     // Utility methods
 
     /**

src/frontend/src/components/Chat/index.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import { Button, Input, makeStyles } from "@fluentui/react-components";
+import { apiService } from "@/api/apiService";
+import { TaskService } from "@/services/TaskService";
+
+interface Message {
+  role: "user" | "assistant";
+  content: string;
+}
+
+const useStyles = makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    height: "100%",
+  },
+  messages: {
+    flex: 1,
+    overflowY: "auto",
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+  },
+  messageUser: {
+    alignSelf: "flex-end",
+  },
+  messageAssistant: {
+    alignSelf: "flex-start",
+  },
+  inputRow: {
+    display: "flex",
+    gap: "4px",
+  },
+});
+
+const Chat: React.FC = () => {
+  const styles = useStyles();
+  const [sessionId, setSessionId] = useState<string>(
+    TaskService.generateSessionId()
+  );
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState("");
+
+  const handleSend = async () => {
+    const text = input.trim();
+    if (!text) return;
+
+    const userMessage: Message = { role: "user", content: text };
+    setMessages((prev) => [...prev, userMessage]);
+    setInput("");
+
+    try {
+      const response = await apiService.sendChatMessage(sessionId, text);
+      if (response.session_id && response.session_id !== sessionId) {
+        setSessionId(response.session_id);
+      }
+      const reply = (response as any).reply || (response as any).message || "";
+      const assistantMessage: Message = { role: "assistant", content: reply };
+      setMessages((prev) => [...prev, assistantMessage]);
+    } catch (err) {
+      console.error("Failed to send chat message", err);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.messages}>
+        {messages.map((m, i) => (
+          <div
+            key={i}
+            className={m.role === "user" ? styles.messageUser : styles.messageAssistant}
+          >
+            {m.content}
+          </div>
+        ))}
+      </div>
+      <div className={styles.inputRow}>
+        <Input
+          value={input}
+          onChange={(_, data) => setInput(data.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              handleSend();
+            }
+          }}
+        />
+        <Button onClick={handleSend}>Send</Button>
+      </div>
+    </div>
+  );
+};
+
+export default Chat;
+