added chat

src/components/chat.jsx

@@ -0,0 +1,40 @@
+import React, { useContext, useState } from "react";
+import { Button, Input } from "@douyinfe/semi-ui";
+import { IconSend } from "@douyinfe/semi-icons";
+import { socket } from "../data/socket";
+import { MessageContext } from "../pages/editor";
+
+export default function Chat() {
+  const [message, setMessage] = useState("");
+  const { messages, setMessages } = useContext(MessageContext);
+
+  return (
+    <div className="mx-5 flex flex-col h-full">
+      <div className="h-full flex-1 overflow-y-auto" id="message-box">
+        {messages.map((m, i) => (
+          <div key={i}>{m}</div>
+        ))}
+      </div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (message !== "") {
+            setMessages((prev) => [...prev, message]);
+            socket.emit("send-message", message);
+          }
+          setMessage("");
+        }}
+        className="flex"
+      >
+        <Input
+          onChange={(v) => setMessage(v)}
+          placeholder="Message"
+          value={message}
+          autoComplete="off"
+          className="me-2"
+        ></Input>
+        <Button icon={<IconSend />} htmlType="submit"></Button>
+      </form>
+    </div>
+  );
+}

src/components/issues.jsx

@@ -5,35 +5,33 @@ import { SettingsContext } from "../pages/editor";
 export default function Issues() {
   const { settings } = useContext(SettingsContext);
   return (
-    <div>
-      <Collapse style={{ width: "100%" }}>
-        <Collapse.Panel
-          header={
-            <div>
-              <i className="fa-solid fa-triangle-exclamation me-1 text-yellow-500"></i>{" "}
-              Issues
-            </div>
-          }
-          itemKey="1"
-        >
-          <div className="max-h-[160px] overflow-y-auto">
-            {settings.strictMode ? (
-              <div className="mb-1">
-                Strict mode is off so no issues will be displayed.
-              </div>
-            ) : (
-              <div>
-                <div className="py-2">Issue 1</div>
-                <div className="py-2">Issue 2</div>
-                <div className="py-2">Issue 3</div>
-                <div className="py-2">Issue 4</div>
-                <div className="py-2">Issue 5</div>
-                <div className="py-2">Issue 6</div>
-              </div>
-            )}
+    <Collapse style={{ width: "100%" }}>
+      <Collapse.Panel
+        header={
+          <div>
+            <i className="fa-solid fa-triangle-exclamation me-1 text-yellow-500"></i>{" "}
+            Issues
           </div>
-        </Collapse.Panel>
-      </Collapse>
-    </div>
+        }
+        itemKey="1"
+      >
+        <div className="max-h-[160px] overflow-y-auto">
+          {settings.strictMode ? (
+            <div className="mb-1">
+              Strict mode is off so no issues will be displayed.
+            </div>
+          ) : (
+            <div>
+              <div className="py-2">Issue 1</div>
+              <div className="py-2">Issue 2</div>
+              <div className="py-2">Issue 3</div>
+              <div className="py-2">Issue 4</div>
+              <div className="py-2">Issue 5</div>
+              <div className="py-2">Issue 6</div>
+            </div>
+          )}
+        </div>
+      </Collapse.Panel>
+    </Collapse>
   );
 }

src/components/sidebar.jsx

@@ -7,6 +7,7 @@ import todo from "../assets/calendar.png";
 import { Tooltip, SideSheet, List } from "@douyinfe/semi-ui";
 import { UndoRedoContext } from "../pages/editor";
 import Todo from "./todo";
+import Chat from "./chat";
 
 export default function Sidebar() {
   const SidesheetType = {
@@ -54,6 +55,8 @@ export default function Sidebar() {
         return renderTimeline();
       case SidesheetType.TODO:
         return <Todo />;
+      case SidesheetType.CHAT:
+        return <Chat />;
       default:
         break;
     }
@@ -117,8 +120,10 @@ export default function Sidebar() {
       return (
         <List>
           {[...undoStack].reverse().map((e) => (
-            <List.Item style={{ padding: "4px 18px 4px 18px" }}
-            className="hover:bg-slate-100">
+            <List.Item
+              style={{ padding: "4px 18px 4px 18px" }}
+              className="hover:bg-slate-100"
+            >
               <div className="flex items-center py-1 w-full">
                 <i className="block fa-regular fa-circle fa-xs"></i>
                 <div className="ms-2">{e.message}</div>

src/components/todo.jsx

@@ -104,6 +104,7 @@ export default function Todo() {
             <Dropdown.Menu>
               {Object.values(SortOrder).map((order) => (
                 <Dropdown.Item
+                  key={order}
                   onClick={() => {
                     setSortOrder(order);
                     sort(order);