Add sidesheet for the bot

src/components/DrawBot.jsx

@@ -0,0 +1,47 @@
+import React, { useContext, useState } from "react";
+import { Button, Input, Avatar } from "@douyinfe/semi-ui";
+import { IconSend } from "@douyinfe/semi-icons";
+import { BotMessageContext } from "../pages/Editor";
+import botIcon from "../assets/bot.png";
+
+export default function DrawBot() {
+  const [message, setMessage] = useState("");
+  const { botMessages } = useContext(BotMessageContext);
+
+  return (
+    <div className="mx-5 flex flex-col h-full sidesheet-theme">
+      <div className="h-full flex-1 overflow-y-auto flex flex-col-reverse py-2">
+        {botMessages.map((m, i) => (
+          <div key={i} className="flex pt-1">
+            <Avatar size="small" src={botIcon}>
+              {m.sender === "bot" ? "drawBOT" : "You"}
+            </Avatar>
+            <div className="ms-2">
+              <div className="font-semibold">
+                {m.sender === "bot" ? "drawBOT" : "You"}
+              </div>
+              <div>{m.message}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+
+          setMessage("");
+        }}
+        className="flex mt-2"
+      >
+        <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/sidebar.jsx

@@ -7,12 +7,14 @@ import timeLineDark from "../assets/process_dark.png";
 import todo from "../assets/calendar.png";
 import { Tooltip, SideSheet, List, Badge } from "@douyinfe/semi-ui";
 import {
+  BotMessageContext,
   MessageContext,
   SettingsContext,
   UndoRedoContext,
 } from "../pages/Editor";
 import Todo from "./Todo";
 import Chat from "./Chat";
+import DrawBot from "./DrawBot";
 
 export default function Sidebar() {
   const SidesheetType = {
@@ -26,9 +28,12 @@ export default function Sidebar() {
   const { undoStack } = useContext(UndoRedoContext);
   const { messages } = useContext(MessageContext);
   const { settings } = useContext(SettingsContext);
+  const { botMessages } = useContext(BotMessageContext);
   const [sidesheet, setSidesheet] = useState(SidesheetType.NONE);
   const [seen, setSeen] = useState(0);
+  const [seenBot, setSeenBot] = useState(0);
   const [count, setCount] = useState(messages.length - seen);
+  const [botCount, setBotCount] = useState(botMessages.length - seenBot);
 
   const getTitle = (type) => {
     switch (type) {
@@ -40,21 +45,28 @@ export default function Sidebar() {
               className="w-7"
               alt="chat icon"
             />
-            <div className="ms-3">Timeline</div>
+            <div className="ms-3 text-lg">Timeline</div>
           </div>
         );
       case SidesheetType.CHAT:
         return (
           <div className="flex items-center">
             <img src={chatIcon} className="w-7" alt="chat icon" />
-            <div className="ms-3">Chat</div>
+            <div className="ms-3 text-lg">Chat</div>
           </div>
         );
       case SidesheetType.TODO:
         return (
           <div className="flex items-center">
             <img src={todo} className="w-7" alt="todo icon" />
-            <div className="ms-3">To-do list</div>
+            <div className="ms-3 text-lg">To-do list</div>
+          </div>
+        );
+      case SidesheetType.BOT:
+        return (
+          <div className="flex items-center">
+            <img src={botIcon} className="w-7" alt="todo icon" />
+            <div className="ms-3 text-lg">drawBOT</div>
           </div>
         );
       default:
@@ -70,6 +82,8 @@ export default function Sidebar() {
         return <Todo />;
       case SidesheetType.CHAT:
         return <Chat />;
+      case SidesheetType.BOT:
+        return <DrawBot />;
       default:
         break;
     }
@@ -77,9 +91,20 @@ export default function Sidebar() {
 
   useEffect(() => {
     if (sidesheet !== SidesheetType.CHAT) {
-      setCount((c) => messages.length - seen);
+      setCount(messages.length - seen);
     }
-  }, [messages.length, seen, sidesheet, SidesheetType.CHAT]);
+    if (sidesheet !== SidesheetType.BOT) {
+      setBotCount(botMessages.length - seenBot);
+    }
+  }, [
+    sidesheet,
+    seen,
+    messages.length,
+    SidesheetType.CHAT,
+    seenBot,
+    botMessages.length,
+    SidesheetType.BOT,
+  ]);
 
   return (
     <>
@@ -126,17 +151,33 @@ export default function Sidebar() {
             />
           </button>
         </Tooltip>
-        <Tooltip content="Botle">
+        <Tooltip content="drawBOT">
-          <button className="block">
+          <Badge
-            <img src={botIcon} className="w-8 mb-5" alt="chat icon" />
+            count={botCount === 0 ? null : botCount}
-          </button>
+            overflowCount={99}
+            type="danger"
+          >
+            <button
+              className="block"
+              onClick={() => {
+                setSidesheet(SidesheetType.BOT);
+                setSeenBot(botMessages.length);
+              }}
+            >
+              <img src={botIcon} className="w-8 mb-5" alt="chat icon" />
+            </button>
+          </Badge>
         </Tooltip>
       </div>
       <SideSheet
         visible={sidesheet !== SidesheetType.NONE}
         onCancel={() => {
+          if (sidesheet === SidesheetType.CHAT) {
+            setSeen(messages.length);
+          } else if (sidesheet === SidesheetType.BOT) {
+            setSeenBot(botMessages.length);
+          }
           setSidesheet(SidesheetType.NONE);
-          setSeen(messages.length);
         }}
         width={340}
         title={getTitle(sidesheet)}

src/pages/editor.jsx

@@ -24,6 +24,7 @@ export const UndoRedoContext = createContext();
 export const SelectContext = createContext();
 export const TaskContext = createContext();
 export const MessageContext = createContext();
+export const BotMessageContext = createContext();
 export const TypeContext = createContext();
 
 export default function Editor(props) {
@@ -57,6 +58,9 @@ export default function Editor(props) {
   });
   const [tasks, setTasks] = useState([]);
   const [messages, setMessages] = useState([]);
+  const [botMessages, setBotMessages] = useState([
+    { sender: "bot", message: "Hey there! How can I help you?" },
+  ]);
   const [undoStack, setUndoStack] = useState([]);
   const [redoStack, setRedoStack] = useState([]);
   const [selectedElement, setSelectedElement] = useState({
@@ -579,7 +583,11 @@ export default function Editor(props) {
                               <MessageContext.Provider
                                 value={{ messages, setMessages }}
                               >
-                                <Sidebar />
+                                <BotMessageContext.Provider
+                                  value={{ botMessages, setBotMessages }}
+                                >
+                                  <Sidebar />
+                                </BotMessageContext.Provider>
                               </MessageContext.Provider>
                             )}
                           </div>