From c77f2703ad9ecaff5458cb97d06f8999f1bad085 Mon Sep 17 00:00:00 2001
From: Ibrahim Moazzam <imoazzam@umich.edu>
Date: Wed, 1 Oct 2025 02:08:26 -0500
Subject: [PATCH 01/10] Edit: Text capitalization

---
 .../interactives/runestone/mchoice/js/mchoice.js   |  4 ++--
 projects/rsmanage/poetry.lock                      | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/bases/rsptx/interactives/runestone/mchoice/js/mchoice.js b/bases/rsptx/interactives/runestone/mchoice/js/mchoice.js
index 1da216b2d..83bb21d88 100644
--- a/bases/rsptx/interactives/runestone/mchoice/js/mchoice.js
+++ b/bases/rsptx/interactives/runestone/mchoice/js/mchoice.js
@@ -417,7 +417,7 @@ export default class MultipleChoice extends RunestoneBase {
                 studentVoteCount > 1) {
                 this.renderMCMAFeedBack();
             } else {
-                $(this.feedBackDiv).html("<p>Your Answer has been recorded</p>");
+                $(this.feedBackDiv).html("<p>Your answer has been recorded</p>");
                 $(this.feedBackDiv).attr("class", "alert alert-info");
             }
         }
@@ -572,7 +572,7 @@ export default class MultipleChoice extends RunestoneBase {
                 studentVoteCount > 1) {
                 this.renderMCMAFeedBack();
             } else {
-                $(this.feedBackDiv).html("<p>Your Answer has been recorded</p>");
+                $(this.feedBackDiv).html("<p>Your answer has been recorded</p>");
                 $(this.feedBackDiv).attr("class", "alert alert-info");
             }
         }
diff --git a/projects/rsmanage/poetry.lock b/projects/rsmanage/poetry.lock
index c27d3de74..edad936b3 100644
--- a/projects/rsmanage/poetry.lock
+++ b/projects/rsmanage/poetry.lock
@@ -1,4 +1,4 @@
-# This file is automatically @generated by Poetry 2.1.3 and should not be changed by hand.
+# This file is automatically @generated by Poetry 2.1.1 and should not be changed by hand.
 
 [[package]]
 name = "aiosqlite"
@@ -202,7 +202,7 @@ files = [
     {file = "async-timeout-4.0.3.tar.gz", hash = "sha256:4640d96be84d82d02ed59ea2b7105a0f7b33abe8703703cd0ab0bf87c427522f"},
     {file = "async_timeout-4.0.3-py3-none-any.whl", hash = "sha256:7405140ff1230c310e51dc27b3145b9092d659ce68ff733fb0cefe3ee42be028"},
 ]
-markers = {main = "python_full_version <= \"3.11.2\"", dev = "python_version == \"3.10\""}
+markers = {main = "python_full_version <= \"3.11.2\"", dev = "python_version < \"3.11\""}
 
 [[package]]
 name = "asyncclick"
@@ -329,7 +329,7 @@ description = "Backport of Python 3.11's datetime.fromisoformat"
 optional = false
 python-versions = ">3"
 groups = ["main"]
-markers = "python_version == \"3.10\""
+markers = "python_version < \"3.11\""
 files = [
     {file = "backports_datetime_fromisoformat-2.0.3-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:5f681f638f10588fa3c101ee9ae2b63d3734713202ddfcfb6ec6cea0778a29d4"},
     {file = "backports_datetime_fromisoformat-2.0.3-cp310-cp310-macosx_11_0_universal2.whl", hash = "sha256:cd681460e9142f1249408e5aee6d178c6d89b49e06d44913c8fdfb6defda8d1c"},
@@ -949,7 +949,7 @@ description = "Backport of PEP 654 (exception groups)"
 optional = false
 python-versions = ">=3.7"
 groups = ["main", "dev"]
-markers = "python_version == \"3.10\""
+markers = "python_version < \"3.11\""
 files = [
     {file = "exceptiongroup-1.2.2-py3-none-any.whl", hash = "sha256:3111b9d131c238bec2f8f516e123e14ba243563fb135d3fe885990585aa7795b"},
     {file = "exceptiongroup-1.2.2.tar.gz", hash = "sha256:47c2edf7c6738fafb49fd34290706d1a1a2f4d1c6df275526b62cbb4aa5393cc"},
@@ -2438,9 +2438,9 @@ files = [
 
 [package.dependencies]
 numpy = [
-    {version = ">=1.26.0", markers = "python_version >= \"3.12\""},
     {version = ">=1.22.4", markers = "python_version < \"3.11\""},
     {version = ">=1.23.2", markers = "python_version == \"3.11\""},
+    {version = ">=1.26.0", markers = "python_version >= \"3.12\""},
 ]
 python-dateutil = ">=2.8.2"
 pytz = ">=2020.1"
@@ -3111,8 +3111,8 @@ files = [
 annotated-types = ">=0.6.0"
 pydantic-core = "2.23.4"
 typing-extensions = [
-    {version = ">=4.12.2", markers = "python_version >= \"3.13\""},
     {version = ">=4.6.1", markers = "python_version < \"3.13\""},
+    {version = ">=4.12.2", markers = "python_version >= \"3.13\""},
 ]
 
 [package.extras]
@@ -4641,7 +4641,7 @@ description = "A lil' TOML parser"
 optional = false
 python-versions = ">=3.8"
 groups = ["main", "dev"]
-markers = "python_version == \"3.10\""
+markers = "python_version < \"3.11\""
 files = [
     {file = "tomli-2.0.2-py3-none-any.whl", hash = "sha256:2ebe24485c53d303f690b0ec092806a085f07af5a5aa1464f3931eec36caaa38"},
     {file = "tomli-2.0.2.tar.gz", hash = "sha256:d46d457a85337051c36524bc5349dd91b1877838e2979ac5ced3e710ed8a60ed"},

From 7a6bea060d3f9a7834ad8ca4c90b400edeeaa096 Mon Sep 17 00:00:00 2001
From: Ibrahim Moazzam <imoazzam@umich.edu>
Date: Wed, 1 Oct 2025 02:17:51 -0500
Subject: [PATCH 02/10] Add: Assignment name for async PI UI

---
 .../web2py_server/applications/runestone/controllers/peer.py    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/bases/rsptx/web2py_server/applications/runestone/controllers/peer.py b/bases/rsptx/web2py_server/applications/runestone/controllers/peer.py
index d298360cf..7e5de7980 100644
--- a/bases/rsptx/web2py_server/applications/runestone/controllers/peer.py
+++ b/bases/rsptx/web2py_server/applications/runestone/controllers/peer.py
@@ -711,6 +711,7 @@ def peer_async():
         qnum = int(request.vars.question_num)
 
     current_question, all_done = _get_numbered_question(assignment_id, qnum)
+    assignment = db(db.assignments.id == assignment_id).select().first()
     course = db(db.courses.course_name == auth.user.course_name).select().first()
     course_attrs = getCourseAttributesDict(course.id, course.base_course)
     if "latex_macros" not in course_attrs:
@@ -721,6 +722,7 @@ def peer_async():
         course=get_course_row(db.courses.ALL),
         current_question=current_question,
         assignment_id=assignment_id,
+        assignment_name = assignment.name,
         nextQnum=qnum + 1,
         all_done=all_done,
         **course_attrs,

From d0c0ffe45e3a73129c34801ee2f8f40f827fef18 Mon Sep 17 00:00:00 2001
From: Ibrahim Moazzam <imoazzam@umich.edu>
Date: Wed, 1 Oct 2025 02:19:18 -0500
Subject: [PATCH 03/10] Edit: Minor capitalization fix

---
 .../applications/runestone/views/peer/dashboard.html            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html b/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html
index a12624c5d..0c9f20ba8 100644
--- a/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html
+++ b/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html
@@ -124,7 +124,7 @@ <h3>Question {{ =current_qnum }} of {{ =num_questions }}</h3>
                                 onclick="enableFaceChat(event)"
                                 disabled
                             >
-                                Enable in-person Chat
+                                Enable In-Person Chat
                             </button>
                             OR
                             <button

From f7b017cc545419d49bdd7b91325183daec81a2d0 Mon Sep 17 00:00:00 2001
From: Ibrahim Moazzam <imoazzam@umich.edu>
Date: Wed, 1 Oct 2025 02:20:50 -0500
Subject: [PATCH 04/10] Edit: Minor capitalization fix

---
 .../applications/runestone/views/peer/dashboard.html          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html b/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html
index a12624c5d..09cbb325c 100644
--- a/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html
+++ b/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html
@@ -124,7 +124,7 @@ <h3>Question {{ =current_qnum }} of {{ =num_questions }}</h3>
                                 onclick="enableFaceChat(event)"
                                 disabled
                             >
-                                Enable in-person Chat
+                                Enable In-Person Chat
                             </button>
                             OR
                             <button
@@ -145,7 +145,7 @@ <h3>Question {{ =current_qnum }} of {{ =num_questions }}</h3>
                                     onclick="makePartners(event, true)"
                                     disabled
                                 >
-                                    Run AB Experiment
+                                    Run A/B Experiment
                                 </button>
                             {{ pass }}
                         </div>

From 80151da79842dc86dc89d0ec849a629570d78b38 Mon Sep 17 00:00:00 2001
From: Ibrahim Moazzam <imoazzam@umich.edu>
Date: Wed, 1 Oct 2025 04:10:35 -0500
Subject: [PATCH 05/10] Add: Initial CSS for synchronous chat

---
 .../runestone/static/css/peer.css             | 176 +++++++++++++++++-
 .../runestone/views/peer/dashboard.html       |   2 +
 .../runestone/views/peer/peer_question.html   |  68 ++++---
 3 files changed, 215 insertions(+), 31 deletions(-)

diff --git a/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css b/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
index 47ffd5e14..25efdd238 100644
--- a/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
+++ b/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
@@ -1,5 +1,11 @@
-#pi-instructor-interface .row, #pi-instructor-interface #imessage {
+/* +--------------------------------+ */
+/* | Peer Instruction (PI) Stylesheet | */
+/* +--------------------------------+ */
 
+/* ---------------------- */
+/* Instructor's interface */
+/* ---------------------- */
+#pi-instructor-interface .row, #pi-instructor-interface #imessage {
     margin-right: 0px;
     margin-left: 0px;
     padding-left: 15px;
@@ -158,4 +164,172 @@
 
 .autopermalink {
     display: none;
+}
+
+/* ------------------- */
+/* Student's interface */
+/* ------------------- */
+#peer-question-student-interface .row, #pi-student-interface #imessage {
+    margin-right: 0px;
+    margin-left: 0px;
+    padding-right: 15px;
+}
+
+#discussion_panel {
+    margin: 20px 0;
+    background: #FBFBFB;
+    border: 0.5px solid #C7CDD1;
+    border-radius: 12px;
+    box-shadow: 0px 20px 24px 0px rgba(17, 17, 17, 0.06);
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+#discussion-panel-heading {
+    font-size: 22px;
+    font-weight: 500;
+    padding: 12px 24px;
+    background: #FBFBFB;
+    border: 1px solid #C7CDD1;
+    border-radius: 12px 12px 0px 0px;
+    box-shadow: 0px 2px 2px 0px rgba(17, 17, 17, 0.06);
+}
+
+#discussion-panel-heading p {
+    margin: 0;
+}
+
+#discussion-panel-peer-votes {
+    border-bottom: 1px solid #C7CDD1;
+    padding: 16px 24px;
+}
+
+#discussion-panel-peer-votes-content {
+    border-radius: 12px;
+    border: 2px solid #C7CDD1;
+    background: #FFFFFF;
+    padding: 16px 32px;
+}
+
+#discussion-panel-peer-votes-content p {
+    margin: 0;
+    line-height: 28px;
+}
+
+#discussion-panel-peer-votes-content #peerlist {
+    margin-bottom: 8px;
+}
+
+#discussion-panel-messages {
+    padding: 16px 24px;
+}
+
+#discussion-panel-messages #messages {
+    margin: 0;
+    padding-left: 0;
+    min-height: 25vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+}
+
+#discussion-panel-messages #messages > div {
+    margin-top: 8px;
+}
+
+#discussion-panel-messages #messages .outgoing-mess + .incoming-mess,
+#discussion-panel-messages #messages .incoming-mess + .outgoing-mess {
+    margin-top: 16px;
+}
+
+#discussion-panel-messages #messages > div:first-child {
+    margin-top: 0;
+}
+
+#discussion-panel-messages #messages .outgoing-mess, #discussion-panel-messages #messages .incoming-mess {
+    display: flex;
+    flex-direction: column;
+    font-style: normal;
+    color: #333;
+    gap: 4px;
+}
+
+#discussion-panel-messages #messages .outgoing-mess {
+    align-items: end;
+}
+
+#discussion-panel-messages #messages .incoming-mess {
+    align-items: start;
+}
+
+#discussion-panel-messages #messages .sender {
+    display: flex;
+    font-size: 10px;
+    gap: 8px;
+    align-items: center;
+}
+
+#discussion-panel-messages #messages .sender-initials {
+    display: flex;
+    background: #777777;
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    color: #FFFFFF;
+}
+
+#discussion-panel-messages #messages .sender-name {
+    font-weight: 700;
+}
+
+#discussion-panel-messages #messages .content {
+    border-radius: 15px;
+    padding: 8px 16px;
+}
+
+#discussion-panel-messages #messages .outgoing-mess .sender-initials {
+    order: 2;
+}
+
+#discussion-panel-messages #messages .outgoing-mess .content {
+    background: rgba(215, 241, 249, 0.60);
+}
+
+#discussion-panel-messages #messages .incoming-mess .content {
+    background: rgba(255, 255, 215, 0.60);
+}
+
+#peer-message-box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    border-radius: 12px;
+    border: 2px solid #C7CDD1;
+    background: #FFFFFF;
+    padding: 8px 16px;
+    margin-top: 10px;
+    gap: 16px;
+}
+
+#peer-message-box input {
+    width: 100%;
+    border: none;
+}
+
+#sendpeermsg {
+    font-size: 24px;
+    cursor: pointer;
+}
+
+#sendpeermsg.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+#peer-rating {
+    display: none;
 }
\ No newline at end of file
diff --git a/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html b/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html
index 09cbb325c..dea920732 100644
--- a/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html
+++ b/bases/rsptx/web2py_server/applications/runestone/views/peer/dashboard.html
@@ -6,10 +6,12 @@
     rel="stylesheet"
     href="{{=URL('static','css/peer.css')}}?v={{=request.peer_mtime}}"
 />
+
 <script>
     eBookConfig.peer = true;
     var voteStopped = false;
 </script>
+
 <div class="hidden-content" style="display: none">
     \( {{=XML(latex_macros)}} \)
  </div>
diff --git a/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html b/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
index a7eb2b871..473457b45 100644
--- a/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
+++ b/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
@@ -4,6 +4,11 @@
 {{include '_sphinx_static_files.html'}}
 {{end}}
 
+<link
+    rel="stylesheet"
+    href="{{=URL('static','css/peer.css')}}?v={{=request.peer_mtime}}"
+/>
+
 <script>
     eBookConfig.peer = true;
     var assignment_id = {{=assignment_id }};
@@ -14,46 +19,49 @@
 </div>
 
 <h2>Peer Instruction: {{=assignment_name}}</h2>
-<div id="imessage">
 
-</div>
-<div class="row">
-    <div class="col-md-6">
-        <form action="/runestone/peer/peer_question" method="GET" id="nextqform">
-            <input type="hidden" name="assignment_id" value={{=assignment_id}}>
-        </form>
-    </div>
-</div>
+<div id="pi-student-interface">
+    <div id="imessage" />
 
-<div class="row">
-    <div class='oneq col-md-6 runestone-sphinx'>
-        {{=XML(current_question['htmlsrc'])}}
-    </div>
-    <div id="discussion_panel" class='col-md-6' style="display: none">
-        <p>Your answer <span id="first_answer"></span></p>
-        <div id="peerlist">
+    <div class="row">
+        <div class="col-md-6">
+            <form action="/runestone/peer/peer_question" method="GET" id="nextqform">
+                <input type="hidden" name="assignment_id" value={{=assignment_id}}>
+            </form>
         </div>
-        <p>Please discuss the answers with your group members</p>
-        <div>
-            <ul id="messages" class="conversation">
+    </div>
 
-            </ul>
+    <div class="row">
+        <div class='oneq col-md-6 runestone-sphinx'>
+            {{=XML(current_question['htmlsrc'])}}
         </div>
 
-        <textarea id="messageText" rows="6" style="width: 350px;">
-</textarea>
-        <div class="text-center" style="width: 350px;">
-            <button id="sendpeermsg" type="button" onclick="sendMessage()">Send</button>
+        <div id="discussion_panel" class='col-md-6' style="display: none">
+            <p>Your answer <span id="first_answer"></span></p>
+            <div id="peerlist">
+            </div>
+            <p>Please discuss the answers with your group members</p>
+            <div>
+                <ul id="messages" class="conversation">
+
+                </ul>
+            </div>
+
+            <textarea id="messageText" rows="6" style="width: 350px;">
+            </textarea>
+            <div class="text-center" style="width: 350px;">
+                <button id="sendpeermsg" type="button" onclick="sendMessage()">Send</button>
+            </div>
         </div>
 
+        <div id="group_select_panel" class="col-md-6" style="display: none;">
+            <p><strong>In person discussion:</strong> select the people in your discussion group.</p>
+            <select id="assignment_group" multiple class="assignment_partner_select" style="width: 95%">
+            </select>
+        </div>
     </div>
-    <div id="group_select_panel" class="col-md-6" style="display: none;">
-        <p><strong>In person discussion:</strong> select the people in your discussion group.</p>
-        <select id="assignment_group" multiple class="assignment_partner_select" style="width: 95%">
-        </select>
-    </div>
-
 </div>
+
 <p>Please do not leave or refresh the page during a peer instruction session. <strong>Exception:</strong> If you should
     have seen a new question at this point then you may continue.</p>
 

From b391ca7413ef57e4c5ce173e1aaae071647e02e8 Mon Sep 17 00:00:00 2001
From: Ibrahim Moazzam <imoazzam@umich.edu>
Date: Wed, 1 Oct 2025 23:02:38 -0500
Subject: [PATCH 06/10] Add: CSS + HTML changes for text chat

---
 .../runestone/static/css/peer.css             |  6 +--
 .../runestone/views/peer/peer_question.html   | 39 ++++++++++++++-----
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css b/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
index 25efdd238..dfb93396b 100644
--- a/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
+++ b/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
@@ -169,7 +169,7 @@
 /* ------------------- */
 /* Student's interface */
 /* ------------------- */
-#peer-question-student-interface .row, #pi-student-interface #imessage {
+#pi-student-interface .row, #pi-student-interface #imessage {
     margin-right: 0px;
     margin-left: 0px;
     padding-right: 15px;
@@ -328,8 +328,4 @@
 #sendpeermsg.disabled {
     pointer-events: none;
     opacity: 0.5;
-}
-
-#peer-rating {
-    display: none;
 }
\ No newline at end of file
diff --git a/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html b/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
index 473457b45..ad59df4bb 100644
--- a/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
+++ b/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
@@ -37,20 +37,39 @@ <h2>Peer Instruction: {{=assignment_name}}</h2>
         </div>
 
         <div id="discussion_panel" class='col-md-6' style="display: none">
-            <p>Your answer <span id="first_answer"></span></p>
-            <div id="peerlist">
+             <div id="discussion-panel-heading">
+                <p>Peer Text Chat</p>
             </div>
-            <p>Please discuss the answers with your group members</p>
-            <div>
-                <ul id="messages" class="conversation">
 
-                </ul>
+            <div id="discussion-panel-peer-votes">
+                <div id="discussion-panel-peer-votes-content">
+                    <p><strong>Here is what everyone answered:</strong></p>
+                    <div id="peerlist">
+                        <p>You: <strong><span id="first_answer"></span></strong></p>
+                    </div>
+                    <p><strong>Please discuss your answers now :)</strong></p>
+                </div>
             </div>
 
-            <textarea id="messageText" rows="6" style="width: 350px;">
-            </textarea>
-            <div class="text-center" style="width: 350px;">
-                <button id="sendpeermsg" type="button" onclick="sendMessage()">Send</button>
+            <div id="discussion-panel-messages">
+                <ul id="messages" class="conversation" />
+                <div id="peer-message-box">
+                    <!-- <textarea id="messageText" rows="6" style="width: 350px;" /> -->
+                    <input type="text" id="messageText" placeholder="Type your explanation here...">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        id="sendpeermsg"
+                        class="bi bi-arrow-up-circle-fill disabled"
+                        viewBox="0 0 16 16"
+                        aria-label="Send message"
+                        onclick="sendMessage()"
+                    >
+                        <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
+                    </svg>
+                </div>
             </div>
         </div>
 

From 92160915fa64aedd5f4cf806732b374a09c2ce9d Mon Sep 17 00:00:00 2001
From: Ibrahim Moazzam <imoazzam@umich.edu>
Date: Thu, 2 Oct 2025 03:22:00 -0500
Subject: [PATCH 07/10] Fix: Closing tag

---
 .../applications/runestone/views/peer/peer_question.html      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html b/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
index ad59df4bb..52cc5e5f8 100644
--- a/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
+++ b/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
@@ -21,7 +21,7 @@
 <h2>Peer Instruction: {{=assignment_name}}</h2>
 
 <div id="pi-student-interface">
-    <div id="imessage" />
+    <div id="imessage"></div>
 
     <div class="row">
         <div class="col-md-6">
@@ -52,7 +52,7 @@ <h2>Peer Instruction: {{=assignment_name}}</h2>
             </div>
 
             <div id="discussion-panel-messages">
-                <ul id="messages" class="conversation" />
+                <ul id="messages" class="conversation"></ul>
                 <div id="peer-message-box">
                     <!-- <textarea id="messageText" rows="6" style="width: 350px;" /> -->
                     <input type="text" id="messageText" placeholder="Type your explanation here...">

From 6539bb5adbacbe9dd1cdee37f798eec8277622c6 Mon Sep 17 00:00:00 2001
From: Ibrahim Moazzam <imoazzam@umich.edu>
Date: Thu, 2 Oct 2025 22:02:26 -0500
Subject: [PATCH 08/10] Add: Completed code for restyle

---
 .../applications/runestone/static/js/peer.js  | 150 ++++++++++++++++--
 .../runestone/views/peer/peer_question.html   |  33 ++--
 2 files changed, 154 insertions(+), 29 deletions(-)

diff --git a/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js b/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js
index e98f9443d..362362896 100644
--- a/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js
+++ b/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js
@@ -1,4 +1,4 @@
-// Configuration for the PI steps and helper functions to handle step progression
+// Configuration for the PI steps and helper functions to handle step progression in the instructor's interface
 const STEP_CONFIG = {
     vote1: {
         next: ['makep', 'facechat', 'makeabgroups'],
@@ -107,6 +107,40 @@ function handleButtonClick(event) {
     }
 }
 
+// Function to render incoming and outgoing messages for the text chat
+function renderMessage({ from, text, direction }) {
+    const message = document.createElement("div");
+    message.classList.add(`${direction}-mess`);
+
+    // Sender container
+    const sender = document.createElement("div");
+    sender.classList.add("sender");
+
+    // Sender initials
+    const senderInitials = document.createElement("div");
+    senderInitials.classList.add("sender-initials");
+    let initials = from.split(" ").map(n => n.charAt(0)).join("").toUpperCase();
+    senderInitials.textContent = initials;
+
+    // Sender name
+    const senderName = document.createElement("div");
+    senderName.classList.add("sender-name");
+    senderName.textContent = from;
+
+    sender.appendChild(senderInitials);
+    sender.appendChild(senderName);
+
+    // Message content
+    const content = document.createElement("div");
+    content.classList.add("content");
+    content.textContent = text;
+
+    message.appendChild(sender);
+    message.appendChild(content);
+
+    return message;
+}
+
 var ws = null;
 var alertSet = false;
 function connect(event) {
@@ -119,15 +153,16 @@ function connect(event) {
     ws.onclose = function () {
         console.log("Websocket Closed")
         alert(
-            "You have been disconnected from the peer instruction server. Will Reconnect."
+            "You have been disconnected from the peer instruction server. Will reconnect."
         );
         connect();
     };
 
     ws.onmessage = function (event) {
         var messages = document.getElementById("messages");
-        var message = document.createElement("li");
+        var message = document.createElement("div");
         message.classList.add("incoming-mess");
+
         let mess = JSON.parse(event.data);
         // This is an easy to code solution for broadcasting that could go out to
         // multiple courses.  It would be better to catch that on the server side
@@ -138,8 +173,39 @@ function connect(event) {
         }
         if (mess.type === "text") {
             if (!(mess.time in messageTrail)) {
-                var content = document.createTextNode(`${mess.from}: ${mess.message}`);
+                // Create sender message element
+                var sender = document.createElement("div");
+                sender.classList.add("sender");
+
+                // Create thumbnail element for the sender's initials
+                var sender_initials = document.createElement("div");
+                sender_initials.classList.add("sender-initials");
+                let initials = mess.from
+                    .split(" ") // Split name on spaces
+                    .map(name => name.charAt(0)) // Get the first letter of each name
+                    .join("") // Join initials together
+                    .toUpperCase(); // Convert to uppercase
+                sender_initials.textContent = initials;
+
+                // Create sender name element
+                var sender_name = document.createElement("div");
+                sender_name.classList.add("sender-name");
+                sender_name.textContent = mess.from;
+
+                // Append sender's initials and name to the message element
+                sender.appendChild(sender_initials);
+                sender.appendChild(sender_name);
+
+                // Create sender message content element
+                var content = document.createElement("div");
+                content.classList.add("content");
+                content.textContent = mess.message;
+
+                // Append sender and content to message
+                message.appendChild(sender);
                 message.appendChild(content);
+
+                // Append message to messages container
                 messages.appendChild(message);
                 messageTrail[mess.time] = mess.message;
             }
@@ -275,7 +341,7 @@ function connect(event) {
                     for (const key in adict) {
                         let currAnswer = adict[key];
                         let newpeer = document.createElement("p");
-                        newpeer.innerHTML = `${key} answered ${currAnswer}`;
+                        newpeer.innerHTML = `${key}: <strong>${currAnswer}</strong>`;
                         peerlist.appendChild(newpeer);
                     }
                     break;
@@ -397,30 +463,70 @@ async function sendLtiScores(event) {
 // specific user
 async function sendMessage(event) {
     var input = document.getElementById("messageText");
-    if (input.value.trim() === "") {
+    var sendButton = document.getElementById("sendpeermsg");
+    var messageText = input.value.trim();
+
+    if (messageText === "") {
         input.focus();
         return;
     }
+
     let mess = {
         type: "text",
         from: `${user}`,
-        message: input.value,
+        message: messageText,
         time: Date.now(),
         broadcast: false,
         course_name: eBookConfig.course,
         div_id: currentQuestion,
     };
+
     await publishMessage(mess);
+
     var messages = document.getElementById("messages");
-    var message = document.createElement("li");
+    var message = document.createElement("div");
     message.classList.add("outgoing-mess");
-    var content = document.createTextNode(`${user}: ${input.value}`);
+
+    // Create sender element
+    var sender = document.createElement("div");
+    sender.classList.add("sender");
+
+    // Create sender initials element
+    var sender_initials = document.createElement("div");
+    sender_initials.classList.add("sender-initials");
+    let initials = user
+        .split(" ") // Split name into parts
+        .map(name => name.charAt(0)) // Get the first letter of each part
+        .join("") // Join initials together
+        .toUpperCase(); // Convert to uppercase
+    sender_initials.textContent = initials;
+
+    // Create sender name element
+    var sender_name = document.createElement("div");
+    sender_name.classList.add("sender-name");
+    sender_name.textContent = user;
+
+    // Append sender initials and name to sender
+    sender.appendChild(sender_initials);
+    sender.appendChild(sender_name);
+
+    // Create message content element
+    var content = document.createElement("div");
+    content.classList.add("content");
+    content.textContent = messageText;
+
+    // Append sender and content to message
+    message.appendChild(sender);
     message.appendChild(content);
+
+    // Append message to messages container
     messages.appendChild(message);
+
     input.value = "";
-    // focus tehe input box again
     input.focus();
-    // not needed for onclick event.preventDefault()
+
+    // Disable the send button after sending a message
+    sendButton.classList.add("disabled");
 }
 
 function warnAndStopVote(event) {
@@ -731,11 +837,25 @@ async function setupPeerGroup() {
 
 $(function () {
     let tinput = document.getElementById("messageText");
-    if (tinput) {
-        tinput.addEventListener("keyup", function (event) {
-            if (event.keyCode === 13) {
+    let sendButton = document.getElementById("sendpeermsg");
+
+    if (tinput && sendButton) {
+        tinput.addEventListener("input", function () {
+            let message = this.value.trim();
+            if (message !== "") {
+                sendButton.classList.remove("disabled");
+            } else {
+                sendButton.classList.add("disabled");
+            }
+        });
+
+        tinput.addEventListener("keydown", function (event) {
+            if (event.key === "Enter") {
                 event.preventDefault();
-                document.getElementById("sendpeermsg").click();
+                let message = this.value.trim();
+                if (message != "") {
+                    document.getElementById("sendpeermsg").click();
+                }
             }
         });
     }
diff --git a/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html b/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
index 52cc5e5f8..321809b83 100644
--- a/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
+++ b/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
@@ -38,16 +38,16 @@ <h2>Peer Instruction: {{=assignment_name}}</h2>
 
         <div id="discussion_panel" class='col-md-6' style="display: none">
              <div id="discussion-panel-heading">
-                <p>Peer Text Chat</p>
+                <p>Peer Chat</p>
             </div>
 
             <div id="discussion-panel-peer-votes">
                 <div id="discussion-panel-peer-votes-content">
-                    <p><strong>Here is what everyone answered:</strong></p>
+                    <p>Here is what everyone answered:</p>
                     <div id="peerlist">
                         <p>You: <strong><span id="first_answer"></span></strong></p>
                     </div>
-                    <p><strong>Please discuss your answers now :)</strong></p>
+                    <p>Please discuss your answers now :)</p>
                 </div>
             </div>
 
@@ -56,19 +56,24 @@ <h2>Peer Instruction: {{=assignment_name}}</h2>
                 <div id="peer-message-box">
                     <!-- <textarea id="messageText" rows="6" style="width: 350px;" /> -->
                     <input type="text" id="messageText" placeholder="Type your explanation here...">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        fill="currentColor"
+                    <button
                         id="sendpeermsg"
-                        class="bi bi-arrow-up-circle-fill disabled"
-                        viewBox="0 0 16 16"
-                        aria-label="Send message"
+                        class="disabled"
                         onclick="sendMessage()"
+                        aria-label="Send message"
                     >
-                        <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
-                    </svg>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            fill="currentColor"
+                            class="bi bi-arrow-up-circle-fill"
+                            viewBox="0 0 16 16"
+                            aria-hidden="true"
+                        >
+                            <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
+                        </svg>
+                    </button>
                 </div>
             </div>
         </div>
@@ -158,7 +163,7 @@ <h2>Peer Instruction: {{=assignment_name}}</h2>
             event.preventDefault();
             event.returnValue =
                 "Please do not leave or refresh the page during a peer instruction session.";
-            return "Please do not leave or refresh the page during a peer instruction session.  Exception: If you should have seen a new question at this point then you may continue.";
+            return "Please do not leave or refresh the page during a peer instruction session. Exception: If you should have seen a new question at this point then you may continue.";
         }.bind(this)
     );
 

From 9bd35ebb3d771c9633212786ccfa0c78c2d36810 Mon Sep 17 00:00:00 2001
From: Ibrahim Moazzam <imoazzam@umich.edu>
Date: Thu, 2 Oct 2025 22:18:28 -0500
Subject: [PATCH 09/10] Edit: Removed redundancy in message creation

---
 .../runestone/static/css/peer.css             |  4 +-
 .../applications/runestone/static/js/peer.js  | 92 ++++---------------
 2 files changed, 21 insertions(+), 75 deletions(-)

diff --git a/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css b/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
index dfb93396b..9891e3be4 100644
--- a/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
+++ b/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
@@ -227,7 +227,9 @@
 #discussion-panel-messages #messages {
     margin: 0;
     padding-left: 0;
-    min-height: 25vh;
+    min-height: 20vh;
+    max-height: 35vh;
+    overflow-y: auto;
     display: flex;
     flex-direction: column;
     justify-content: end;
diff --git a/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js b/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js
index 362362896..4ecd60c93 100644
--- a/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js
+++ b/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js
@@ -109,6 +109,7 @@ function handleButtonClick(event) {
 
 // Function to render incoming and outgoing messages for the text chat
 function renderMessage({ from, text, direction }) {
+    // Create message element
     const message = document.createElement("div");
     message.classList.add(`${direction}-mess`);
 
@@ -116,7 +117,7 @@ function renderMessage({ from, text, direction }) {
     const sender = document.createElement("div");
     sender.classList.add("sender");
 
-    // Sender initials
+    // Thumbnail using sender initials
     const senderInitials = document.createElement("div");
     senderInitials.classList.add("sender-initials");
     let initials = from.split(" ").map(n => n.charAt(0)).join("").toUpperCase();
@@ -135,6 +136,7 @@ function renderMessage({ from, text, direction }) {
     content.classList.add("content");
     content.textContent = text;
 
+    // Append sender and content to message
     message.appendChild(sender);
     message.appendChild(content);
 
@@ -159,10 +161,7 @@ function connect(event) {
     };
 
     ws.onmessage = function (event) {
-        var messages = document.getElementById("messages");
-        var message = document.createElement("div");
-        message.classList.add("incoming-mess");
-
+        const messages = document.getElementById("messages");
         let mess = JSON.parse(event.data);
         // This is an easy to code solution for broadcasting that could go out to
         // multiple courses.  It would be better to catch that on the server side
@@ -173,37 +172,11 @@ function connect(event) {
         }
         if (mess.type === "text") {
             if (!(mess.time in messageTrail)) {
-                // Create sender message element
-                var sender = document.createElement("div");
-                sender.classList.add("sender");
-
-                // Create thumbnail element for the sender's initials
-                var sender_initials = document.createElement("div");
-                sender_initials.classList.add("sender-initials");
-                let initials = mess.from
-                    .split(" ") // Split name on spaces
-                    .map(name => name.charAt(0)) // Get the first letter of each name
-                    .join("") // Join initials together
-                    .toUpperCase(); // Convert to uppercase
-                sender_initials.textContent = initials;
-
-                // Create sender name element
-                var sender_name = document.createElement("div");
-                sender_name.classList.add("sender-name");
-                sender_name.textContent = mess.from;
-
-                // Append sender's initials and name to the message element
-                sender.appendChild(sender_initials);
-                sender.appendChild(sender_name);
-
-                // Create sender message content element
-                var content = document.createElement("div");
-                content.classList.add("content");
-                content.textContent = mess.message;
-
-                // Append sender and content to message
-                message.appendChild(sender);
-                message.appendChild(content);
+                let message = renderMessage({
+                    from: mess.from,
+                    text: mess.message,
+                    direction: "incoming"
+                });
 
                 // Append message to messages container
                 messages.appendChild(message);
@@ -462,9 +435,10 @@ async function sendLtiScores(event) {
 // the server can then broadcast the message or send it to a
 // specific user
 async function sendMessage(event) {
-    var input = document.getElementById("messageText");
-    var sendButton = document.getElementById("sendpeermsg");
-    var messageText = input.value.trim();
+    const messages = document.getElementById("messages");
+    const input = document.getElementById("messageText");
+    const sendButton = document.getElementById("sendpeermsg");
+    const messageText = input.value.trim();
 
     if (messageText === "") {
         input.focus();
@@ -483,41 +457,11 @@ async function sendMessage(event) {
 
     await publishMessage(mess);
 
-    var messages = document.getElementById("messages");
-    var message = document.createElement("div");
-    message.classList.add("outgoing-mess");
-
-    // Create sender element
-    var sender = document.createElement("div");
-    sender.classList.add("sender");
-
-    // Create sender initials element
-    var sender_initials = document.createElement("div");
-    sender_initials.classList.add("sender-initials");
-    let initials = user
-        .split(" ") // Split name into parts
-        .map(name => name.charAt(0)) // Get the first letter of each part
-        .join("") // Join initials together
-        .toUpperCase(); // Convert to uppercase
-    sender_initials.textContent = initials;
-
-    // Create sender name element
-    var sender_name = document.createElement("div");
-    sender_name.classList.add("sender-name");
-    sender_name.textContent = user;
-
-    // Append sender initials and name to sender
-    sender.appendChild(sender_initials);
-    sender.appendChild(sender_name);
-
-    // Create message content element
-    var content = document.createElement("div");
-    content.classList.add("content");
-    content.textContent = messageText;
-
-    // Append sender and content to message
-    message.appendChild(sender);
-    message.appendChild(content);
+    let message = renderMessage({
+        from: user,
+        text: messageText,
+        direction: "outgoing"
+    });
 
     // Append message to messages container
     messages.appendChild(message);

From bc3f4c71be7ed18f0ed006ff6acb43d256fda456 Mon Sep 17 00:00:00 2001
From: Ibrahim Moazzam <imoazzam@umich.edu>
Date: Thu, 2 Oct 2025 22:52:39 -0500
Subject: [PATCH 10/10] Edit: Minor edits

---
 .../applications/runestone/static/css/peer.css   | 16 +++++++++-------
 .../applications/runestone/static/js/peer.js     |  6 ++++--
 .../runestone/views/peer/peer_question.html      |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css b/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
index 9891e3be4..e67543374 100644
--- a/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
+++ b/bases/rsptx/web2py_server/applications/runestone/static/css/peer.css
@@ -227,15 +227,15 @@
 #discussion-panel-messages #messages {
     margin: 0;
     padding-left: 0;
-    min-height: 20vh;
+    padding-right: 10px;
+    min-height: 15vh;
     max-height: 35vh;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
-    justify-content: end;
 }
 
-#discussion-panel-messages #messages > div {
+#discussion-panel-messages #messages > li {
     margin-top: 8px;
 }
 
@@ -244,7 +244,7 @@
     margin-top: 16px;
 }
 
-#discussion-panel-messages #messages > div:first-child {
+#discussion-panel-messages #messages > li:first-child {
     margin-top: 0;
 }
 
@@ -266,7 +266,7 @@
 
 #discussion-panel-messages #messages .sender {
     display: flex;
-    font-size: 10px;
+    font-size: 11px;
     gap: 8px;
     align-items: center;
 }
@@ -323,8 +323,10 @@
 }
 
 #sendpeermsg {
-    font-size: 24px;
-    cursor: pointer;
+    background: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
 }
 
 #sendpeermsg.disabled {
diff --git a/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js b/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js
index 4ecd60c93..d748b9daf 100644
--- a/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js
+++ b/bases/rsptx/web2py_server/applications/runestone/static/js/peer.js
@@ -110,7 +110,7 @@ function handleButtonClick(event) {
 // Function to render incoming and outgoing messages for the text chat
 function renderMessage({ from, text, direction }) {
     // Create message element
-    const message = document.createElement("div");
+    const message = document.createElement("li");
     message.classList.add(`${direction}-mess`);
 
     // Sender container
@@ -126,7 +126,7 @@ function renderMessage({ from, text, direction }) {
     // Sender name
     const senderName = document.createElement("div");
     senderName.classList.add("sender-name");
-    senderName.textContent = from;
+    senderName.textContent = direction === "outgoing" ? "You" : from;
 
     sender.appendChild(senderInitials);
     sender.appendChild(senderName);
@@ -180,6 +180,7 @@ function connect(event) {
 
                 // Append message to messages container
                 messages.appendChild(message);
+                messages.scrollTop = messages.scrollHeight;
                 messageTrail[mess.time] = mess.message;
             }
         } else if (mess.type === "control") {
@@ -465,6 +466,7 @@ async function sendMessage(event) {
 
     // Append message to messages container
     messages.appendChild(message);
+    messages.scrollTop = messages.scrollHeight;
 
     input.value = "";
     input.focus();
diff --git a/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html b/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
index 321809b83..e25ee8c38 100644
--- a/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
+++ b/bases/rsptx/web2py_server/applications/runestone/views/peer/peer_question.html
@@ -58,7 +58,7 @@ <h2>Peer Instruction: {{=assignment_name}}</h2>
                     <input type="text" id="messageText" placeholder="Type your explanation here...">
                     <button
                         id="sendpeermsg"
-                        class="disabled"
+                        class="btn disabled"
                         onclick="sendMessage()"
                         aria-label="Send message"
                     >