Merge pull request #79 from AET-DevOps25/genai/group-chat-and-document-processing

Genai/group chat and document processing

Author: DostavalovID

client/src/pages/group_info/GroupPage.tsx

@@ -7,6 +7,8 @@ import { GroupInfo } from "./components/GroupInfo";
 import { Material } from "./Material";
 import "./group_page.css";
 import AIChat from "./components/AIChat";
+import { Chat } from "./components/GroupChat";
+import { HandwrittenDocuments } from "./components/HandwrittenDocuments";
 
 export default function GroupPage() {
     const { groupId } = useParams<{ groupId: string }>();
@@ -95,7 +97,7 @@ export default function GroupPage() {
     useEffect(() => {
         const base = ["Group Info"];
         if (hasAccess()) {
-            base.push("Materials", "Chats", "AI Bot");
+            base.push("Materials", "Handwritten Docs", "Chats", "AI Bot");
         }
         setTabs(base);
 
@@ -176,9 +178,19 @@ export default function GroupPage() {
                             )
                         )}
 
+                        {activeTab === "Handwritten Docs" && (
+                            hasAccess() ? (
+                                <HandwrittenDocuments />
+                            ) : (
+                                <p className="access-message">
+                                    You must be a member (or owner) to access Handwritten Documents.
+                                </p>
+                            )
+                        )}
+
                         {activeTab === "Chats" && (
                             hasAccess() ? (
-                                <p>(Your Chats UI…)</p>
+                                <Chat />
                             ) : (
                                 <p className="access-message">
                                     You must be a member (or owner) to access Chats.

client/src/pages/group_info/components/Chat.tsx

@@ -1,4 +1,4 @@
-//TODO: implement a page to chat with people in the study group
-export function Create() {
-  return <></>;
-}
+//TODO: implement a page to chat with people in the study group
+export function Create() {
+  return <></>;
+}

client/src/pages/group_info/components/GroupChat.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState, useRef } from "react";
+import { useParams } from "react-router-dom";
+import { useAuth } from "../../../auth/AuthProvider";
+import { ChatMessage, getGroupChatMessages, sendChatMessage, deleteGroupChat } from "../../../services/groupApi";
+import { useGroup } from "../../home/components/GroupProvider";
+import "./group_chat.css";
+
+export const Chat = () => {
+    const { groupId } = useParams<{ groupId: string }>();
+    const { user, token } = useAuth();
+    const { currentGroup } = useGroup();
+    const [messages, setMessages] = useState<ChatMessage[]>([]);
+    const [newMessage, setNewMessage] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+
+    useEffect(() => {
+        if (groupId && token) {
+            getGroupChatMessages(groupId, token)
+                .then(setMessages)
+                .catch(() => setError("Failed to load messages."));
+        }
+    }, [groupId, token]);
+
+    useEffect(scrollToBottom, [messages]);
+
+    const handleSendMessage = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!newMessage.trim() || !groupId || !token) return;
+
+        try {
+            const sentMessage = await sendChatMessage(groupId, newMessage, token);
+            setMessages([...messages, sentMessage]);
+            setNewMessage("");
+        } catch {
+            setError("Failed to send message.");
+        }
+    };
+
+    const handleDeleteChat = async () => {
+        if (!groupId || !token) return;
+
+        if (window.confirm("Are you sure you want to delete the entire chat history for this group? This cannot be undone.")) {
+            try {
+                await deleteGroupChat(groupId, token);
+                setMessages([]);
+            } catch {
+                setError("Failed to delete chat.");
+            }
+        }
+    };
+
+    return (
+        <div className="chat-container">
+            <h3>Group Chat</h3>
+            {error && <p className="error-message">{error}</p>}
+            <div className="messages-list">
+                {messages.map((msg) => (
+                    <div key={msg.id} className={`message-item ${msg.username === user ? "sent" : "received"}`}>
+                        <div className="message-content">
+                            <strong>{msg.username}</strong>
+                            <p>{msg.content}</p>
+                            <span className="timestamp">{new Date(msg.timestamp).toLocaleTimeString()}</span>
+                        </div>
+                    </div>
+                ))}
+                <div ref={messagesEndRef} />
+            </div>
+            <form onSubmit={handleSendMessage} className="message-form">
+                <input
+                    type="text"
+                    value={newMessage}
+                    onChange={(e) => setNewMessage(e.target.value)}
+                    placeholder="Type a message..."
+                />
+                <button type="submit">Send</button>
+            </form>
+            {currentGroup?.ownerUsername === user && (
+                <button onClick={handleDeleteChat} className="delete-chat-btn">
+                    Delete Chat History
+                </button>
+            )}
+        </div>
+    );
+};