Integrate S3 Chatting to frontend #651

adikatre · 2026-02-12T01:56:11Z

PR for JPA
Allows group members to send chat messages
- Can upload images alongside chat messages as well
multimedia uploads (ex. *.docx or *.pdf)

stored in s3 bucket called pages-groups

need to take performance into account for future

…nt names.

Co-authored-by: Nikhil Maturi <code259@users.noreply.github.com>

Copilot

Pull request overview

This PR updates the student group UI to support live group chat plus “Shared Files” uploads/downloads (intended to back onto the new S3-backed endpoints from the linked Spring PR).

Changes:

Replaces the static chat modal with a tabbed Chat / Shared Files UI and adds image attachment support.
Adds frontend fetch helpers to load/send chat messages and to upload/list/download shared files.
Extends the group dashboard to include an “Add File” action and wires it to the new chat/files UI.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 8 comments.

File	Description
`_posts/teacher_toolkit/StudentManagement/2025-04-07-Groups.html`	Adds tabbed chat/files UI, chat polling + send, and shared file upload/list/download behavior.
`_includes/group_dashboard.html`	Adds the same chat/files UI to the dashboard modal and introduces dashboard shared-file upload entrypoint.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-12T02:01:26Z

_includes/group_dashboard.html

+  function startChatPolling() {
+    if (chatPollTimer) clearInterval(chatPollTimer);
+    chatPollTimer = setInterval(fetchChatMessages, 4000);
+  }


Chat polling fetches and re-renders the full message list every 4 seconds. This can become expensive for both client and server as history grows. Consider incremental fetch (cursor/since), caching/ETags, and appending only new messages instead of clearing and rebuilding #chatMessages each poll.

Copilot · 2026-02-12T02:01:26Z

_includes/group_dashboard.html

+<script type="module">
+  import { javaURI, pythonURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
  // Calendar state


group_dashboard.html was converted to <script type="module">, but the page still uses many inline event handlers (e.g., onclick="previousMonth()", onclick="refreshDashboard()", onchange="handleSharedFileUpload(event)"). In module scripts, top-level functions are not added to window, so these handlers will throw ReferenceError at runtime. Either export/assign the referenced functions onto window (e.g., window.previousMonth = previousMonth, etc.) or remove inline handlers and bind listeners in JS after DOM load.

Copilot · 2026-02-12T02:01:27Z

_includes/group_dashboard.html

+      // Fetch group ID using group name
+      try {
+        const searchResponse = await fetch(`/api/group/search?name=${encodeURIComponent(groupName)}`);
+
+        if (!searchResponse.ok) {
+          throw new Error('Group not found');
+        }

-  // Handle paste events for images
-  document.addEventListener('paste', function(event) {
-    // Only handle paste when chat modal is open
-    if (document.getElementById('chatModal').classList.contains('hidden')) return;
+        const groupData = await searchResponse.json();
+        const groupId = groupData.id;

-    const items = (event.clipboardData || window.clipboardData).items;
-    let imageFile = null;
+        if (!groupId) {
+          alert('Error: Could not retrieve group ID');
+          event.target.value = '';
+          return;
+        }

-    for (let i = 0; i < items.length; i++) {
-      if (items[i].type.startsWith('image/')) {
-        imageFile = items[i].getAsFile();
-        break;
+        // Convert file to base64
+        const reader = new FileReader();
+        reader.onload = async (e) => {
+          const base64Data = e.target.result.split(',')[1];
+
+          // Prepare request body
+          const requestBody = {
+            filename: file.name,
+            base64Data: base64Data
+          };
+
+          try {
+            // Make POST request to upload file
+            const response = await fetch(`/api/groups/chat/${groupId}/files`, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify(requestBody)
+            });


handleSharedFileUpload is calling /api/group/search and /api/groups/chat/... as relative URLs and without fetchOptions. Elsewhere in this file, API calls consistently use ${javaURI} and fetchOptions (and /api/groups/search returns an array). As written, this will likely hit the GitHub Pages origin, fail auth, and mis-handle the search response shape. Reuse resolveActiveGroupId(...) + ${javaURI}/api/groups/chat/${id}/files with fetchOptions (and handle the search response as an array) to make dashboard uploads work reliably.

Copilot · 2026-02-12T02:01:27Z

_includes/group_dashboard.html

+
+      if (msg.image) {
+        const img = document.createElement('img');
+        img.src = `data:image/png;base64,${msg.image}`;


Chat message rendering hard-codes data:image/png;base64,... for msg.image. Since image selection allows image/* (and pasted images can be JPEG/GIF), non-PNG images will fail to render. Include the image MIME type in the payload/response (or store a full data URL) and use it when constructing img.src.

Suggested change

img.src = `data:image/png;base64,${msg.image}`;

let imageSrc;

if (typeof msg.image === 'string' && msg.image.startsWith('data:')) {

// msg.image is already a full data URL

imageSrc = msg.image;

} else if (msg.imageMimeType) {

// Use provided MIME type for the base64 image data

imageSrc = `data:${msg.imageMimeType};base64,${msg.image}`;

} else {

// Backward-compatible fallback: assume PNG

imageSrc = `data:image/png;base64,${msg.image}`;

}

img.src = imageSrc;

Copilot · 2026-02-12T02:01:27Z

_posts/teacher_toolkit/StudentManagement/2025-04-07-Groups.html

-    imageMessageBox.innerHTML = '';
-  }
-
  document.addEventListener('paste', function(event) {


The paste handler runs on every paste anywhere on the page and will attach an image even when the chat modal is closed. This can lead to unexpected hidden attachments. Add the same guard used in group_dashboard.html (skip when #chatModal has hidden) or scope the listener to the chat input/modal.

Suggested change

document.addEventListener('paste', function(event) {

document.addEventListener('paste', function(event) {

const chatModal = document.getElementById('chatModal');

if (chatModal && chatModal.hasAttribute('hidden')) {

return;

}

Copilot · 2026-02-12T02:01:27Z

_posts/teacher_toolkit/StudentManagement/2025-04-07-Groups.html

+
+    if (msg.image) {
+      const img = document.createElement('img');
+      img.src = `data:image/png;base64,${msg.image}`;


Chat message rendering hard-codes data:image/png;base64,... for msg.image. Since the UI accepts image/*, non-PNG images (e.g., JPEG) will not render correctly. Include image MIME type in the payload/response (or store a full data URL) and use it when setting img.src.

Suggested change

img.src = `data:image/png;base64,${msg.image}`;

// If msg.image is already a full data URL (e.g., "data:image/jpeg;base64,..."),

// use it directly. Otherwise, include the MIME type if provided, falling back to PNG.

if (typeof msg.image === 'string' && msg.image.startsWith('data:')) {

img.src = msg.image;

} else {

const mimeType = msg.imageMimeType || 'image/png';

img.src = `data:${mimeType};base64,${msg.image}`;

}

Copilot · 2026-02-12T02:01:28Z

_posts/teacher_toolkit/StudentManagement/2025-04-07-Groups.html

+function startChatPolling() {
+  if (chatPollTimer) clearInterval(chatPollTimer);
+  chatPollTimer = setInterval(fetchChatMessages, 4000);
+}


Chat polling fetches and re-renders the full message list every 4 seconds (setInterval(fetchChatMessages, 4000) + renderChatMessages clears and rebuilds DOM). This will not scale with message volume and will generate unnecessary backend load. Consider incremental fetching (e.g., since/cursor), ETags, or server push (SSE/WebSocket), and update DOM append-only instead of full re-render.

Copilot · 2026-02-12T02:01:28Z

_posts/teacher_toolkit/StudentManagement/2025-04-07-Groups.html

+  try {
+    const base64Data = await fileToBase64(file);
+    const payload = { filename: file.name, base64Data };
+
+    const res = await fetch(`${javaURI}/api/groups/chat/${activeChatGroupId}/files`, {
+      ...fetchOptions,
+      method: 'POST',
+      headers: {
+        ...(fetchOptions.headers || {}),
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(payload)
+    });


Shared file uploads are base64-encoded and sent in JSON (fileToBase64 + body: JSON.stringify(payload)). For larger media/docs (PDF/DOCX), this increases payload size ~33%, risks hitting request limits, and can freeze the browser due to memory copies. Prefer direct-to-S3 uploads via pre-signed URLs (multipart where needed) and enforce client-side size limits with a user-visible error.

jm1021 · 2026-02-12T10:52:32Z

There are some recommend copilot fixes on this that sound legit

code259 · 2026-02-12T17:59:57Z

Rohan:

Make profile changes less invasive, test locally, and checkout PR
Test bathroom pass with actual system

…t and simplify code

Co-authored-by: Nikhil Maturi <code259@users.noreply.github.com>

Rbojja23 and others added 5 commits February 9, 2026 18:47

Add webcam modal for capturing and setting profile pictures.

c40400f

Implement webcam-based facial recognition to automatically fill stude…

d577162

…nt names.

groups chat!

9d5b3a0

Co-authored-by: Nikhil Maturi <code259@users.noreply.github.com>

chatting on dashboard page for group.

23201aa

Merge branch 'Open-Coding-Society:main' into main

5575086

Copilot AI review requested due to automatic review settings February 12, 2026 01:56

Copilot started reviewing on behalf of adikatre February 12, 2026 01:56 View session

adikatre mentioned this pull request Feb 12, 2026

Team Pirna: S3 Functionality for Chat Messages w/ Images, Shared Files, and Base64 Decoding Open-Coding-Society/spring#90

Open

Copilot AI reviewed Feb 12, 2026

View reviewed changes

Rbojja23 added 2 commits February 11, 2026 22:09

facial recognition demo working

4618592

Merge branch 'main' of https://github.com/adikatre/Pirna-pages

0e24914

adikatre marked this pull request as draft February 12, 2026 17:52

Merge branch 'Open-Coding-Society:main' into main

0107bd6

adikatre and others added 6 commits February 12, 2026 10:27

Prevent pasting images when chat modal is hidden

5694e7f

Refactor file upload handling in dashboard to improve error managemen…

71c8e72

…t and simplify code

facial recognition demo final done

f553ee4

Merge branch 'main' of https://github.com/adikatre/Pirna-pages

65f3dd5

upload on dashboard

2aaddbe

Co-authored-by: Nikhil Maturi <code259@users.noreply.github.com>

Merge branch 'main' of https://github.com/adikatre/Pirna-pages

5fa9f79

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrate S3 Chatting to frontend #651

Integrate S3 Chatting to frontend #651

Uh oh!

adikatre commented Feb 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

jm1021 commented Feb 12, 2026

Uh oh!

code259 commented Feb 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

-        img.src = `data:image/png;base64,${msg.image}`;
+        let imageSrc;
+        if (typeof msg.image === 'string' && msg.image.startsWith('data:')) {
+          // msg.image is already a full data URL
+          imageSrc = msg.image;
+        } else if (msg.imageMimeType) {
+          // Use provided MIME type for the base64 image data
+          imageSrc = `data:${msg.imageMimeType};base64,${msg.image}`;
+        } else {
+          // Backward-compatible fallback: assume PNG
+          imageSrc = `data:image/png;base64,${msg.image}`;
+        }
+        img.src = imageSrc;

-      img.src = `data:image/png;base64,${msg.image}`;
+      // If msg.image is already a full data URL (e.g., "data:image/jpeg;base64,..."),
+      // use it directly. Otherwise, include the MIME type if provided, falling back to PNG.
+      if (typeof msg.image === 'string' && msg.image.startsWith('data:')) {
+        img.src = msg.image;
+      } else {
+        const mimeType = msg.imageMimeType || 'image/png';
+        img.src = `data:${mimeType};base64,${msg.image}`;
+      }

Integrate S3 Chatting to frontend #651

Are you sure you want to change the base?

Integrate S3 Chatting to frontend #651

Uh oh!

Conversation

adikatre commented Feb 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

jm1021 commented Feb 12, 2026

Uh oh!

code259 commented Feb 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants