Add skeletal template for chat function and testcases

Author: bensohh

apps/frontend/src/app/collaboration/[id]/page.tsx

@@ -47,6 +47,11 @@ export default function CollaborationPage(props: CollaborationProps) {
   );
   const [matchedUser, setMatchedUser] = useState<string | undefined>(undefined);
 
+  // Chat states
+  const [messageToSend, setMessageToSend] = useState<string | undefined>(
+    undefined
+  );
+
   // Manual test case states
   const [manualTestCase, setManualTestCase] = useState<string | undefined>(
     undefined
@@ -82,12 +87,16 @@ export default function CollaborationPage(props: CollaborationProps) {
     {
       key: "1",
       label: "Case 1",
-      children: "Insert Test Case 1", // TODO: Setup test-cases in db for each qn and pull/paste here
+      children: (
+        <Input.TextArea disabled placeholder="Insert Test Case 1" rows={6} />
+      ), // TODO: Setup test-cases in db for each qn and pull/paste here
     },
     {
       key: "2",
       label: "Case 2",
-      children: "Insert Test Case 2",
+      children: (
+        <Input.TextArea disabled placeholder="Insert Test Case 2" rows={6} />
+      ),
     },
     {
       key: "3",
@@ -96,6 +105,7 @@ export default function CollaborationPage(props: CollaborationProps) {
         <Input.TextArea
           onChange={(e) => setManualTestCase(e.target.value)}
           placeholder="Input Manual Test Case"
+          rows={6}
         />
       ),
     },
@@ -208,6 +218,21 @@ export default function CollaborationPage(props: CollaborationProps) {
                   <MessageOutlined className="title-icons" />
                   Chat
                 </div>
+
+                <div className="chat-message-box">
+                  <div className="chat-header-message">
+                    Matched with {matchedUser}
+                  </div>
+                  {/* TODO: Map and input the history of messages sent here */}
+                  <div></div>
+                </div>
+                <div className="chat-typing-box">
+                  <Input.TextArea
+                    onChange={(e) => setMessageToSend(e.target.value)}
+                    placeholder="Send Message Here"
+                    rows={4}
+                  />
+                </div>
               </div>
             </Row>
           </Col>

apps/frontend/src/app/collaboration/[id]/styles.scss

@@ -101,6 +101,25 @@
   padding: 1rem;
 }
 
+.chat-message-box {
+  margin-top: 1rem;
+  height: 70%;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  overflow-y: scroll;
+}
+
+.chat-header-message {
+  font-size: 14px;
+  color: #c6c6c6;
+  margin: 3px auto;
+  text-align: center;
+}
+
+.chat-typing-box {
+  margin-top: 1rem;
+}
+
 .question-title,
 .test-title,
 .code-title,