Mintplex-Labs · timothycarambat · Aug 17, 2023 · Aug 15, 2023 · Aug 15, 2023 · Aug 15, 2023
diff --git a/frontend/src/components/ChatBubble/index.jsx b/frontend/src/components/ChatBubble/index.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+export default function ChatBubble({ message, type, popMsg }) {
+  const isUser = type === "user";
+
+  return (
+    <div
+      className={`flex w-full mt-2 items-center ${
+        popMsg ? "chat__message" : ""
+      } ${isUser ? "justify-end" : "justify-start"}`}
+    >
+      <div
+        className={`p-4 max-w-full md:max-w-[75%] ${
+          isUser
+            ? "bg-slate-200 dark:bg-amber-800"
+            : "bg-orange-100 dark:bg-stone-700"
+        } rounded-b-2xl ${isUser ? "rounded-tl-2xl" : "rounded-tr-2xl"} ${
+          isUser ? "rounded-tr-sm" : "rounded-tl-sm"
+        }`}
+      >
+        {message && (
+          <p className="text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base">
+            {message}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx
@@ -6,16 +6,27 @@ import NewWorkspaceModal, {
 import paths from "../../utils/paths";
 import { isMobile } from "react-device-detect";
 import { SidebarMobileHeader } from "../Sidebar";
+import ChatBubble from "../ChatBubble";
+import System from "../../models/system";
 
 export default function DefaultChatContainer() {
   const [mockMsgs, setMockMessages] = useState([]);
+  const [fetchedMessages, setFetchedMessages] = useState([]);
   const {
     showing: showingNewWsModal,
     showModal: showNewWsModal,
     hideModal: hideNewWsModal,
   } = useNewWorkspaceModal();
   const popMsg = !window.localStorage.getItem("anythingllm_intro");
 
+  useEffect(() => {
+    const fetchData = async () => {
+      const fetchedMessages = await System.getWelcomeMessages();
+      setFetchedMessages(fetchedMessages);
+    };
+    fetchData();
+  }, []);
+
   const MESSAGES = [
     <React.Fragment>
       <div
@@ -251,9 +262,25 @@ export default function DefaultChatContainer() {
       className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-white dark:bg-black-900 md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
     >
       {isMobile && <SidebarMobileHeader />}
-      {mockMsgs.map((content, i) => {
-        return <React.Fragment key={i}>{content}</React.Fragment>;
-      })}
+      {fetchedMessages.length === 0
+        ? mockMsgs.map((content, i) => {
+            return <React.Fragment key={i}>{content}</React.Fragment>;
+          })
+        : fetchedMessages.map((fetchedMessage, i) => {
+            return (
+              <React.Fragment key={i}>
+                <ChatBubble
+                  message={
+                    fetchedMessage.user === ""
+                      ? fetchedMessage.response
+                      : fetchedMessage.user
+                  }
+                  type={fetchedMessage.user === "" ? "response" : "user"}
+                  popMsg={popMsg}
+                />
+              </React.Fragment>
+            );
+          })}
       {showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
     </div>
   );

diff --git a/frontend/src/components/EditingChatBubble/index.jsx b/frontend/src/components/EditingChatBubble/index.jsx
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { X } from "react-feather";
+
+export default function EditingChatBubble({
+  message,
+  index,
+  type,
+  handleMessageChange,
+  removeMessage,
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [tempMessage, setTempMessage] = useState(message[type]);
+  const isUser = type === "user";
+
+  return (
+    <div
+      className={`flex w-full mt-2 items-center ${
+        isUser ? "justify-end" : "justify-start"
+      }`}
+    >
+      {isUser && (
+        <button
+          className="flex items-center text-red-500 hover:text-red-700 transition mr-2"
+          onClick={() => removeMessage(index)}
+        >
+          <X className="mr-2" size={20} />
+        </button>
+      )}
+      <div
+        className={`p-4 max-w-full md:max-w-[75%] ${
+          isUser
+            ? "bg-slate-200 dark:bg-amber-800"
+            : "bg-orange-100 dark:bg-stone-700"
+        } rounded-b-2xl ${isUser ? "rounded-tl-2xl" : "rounded-tr-2xl"} ${
+          isUser ? "rounded-tr-sm" : "rounded-tl-sm"
+        }`}
+        onDoubleClick={() => setIsEditing(true)}
+      >
+        {isEditing ? (
+          <input
+            value={tempMessage}
+            onChange={(e) => setTempMessage(e.target.value)}
+            onBlur={() => {
+              handleMessageChange(index, type, tempMessage);
+              setIsEditing(false);
+            }}
+            autoFocus
+          />
+        ) : (
+          tempMessage && (
+            <p className="text-slate-800 dark:text-slate-200 font-[500] md:font-semibold text-sm md:text-base">
+              {tempMessage}
+            </p>
+          )
+        )}
+      </div>
+      {!isUser && (
+        <button
+          className="flex items-center text-red-500 hover:text-red-700 transition ml-2"
+          onClick={() => removeMessage(index)}
+        >
+          <X className="mr-2" size={20} />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/models/admin.js b/frontend/src/models/admin.js
@@ -216,6 +216,22 @@ const Admin = {
         return { success: false, error: e.message };
       });
   },
+  setWelcomeMessages: async function (messages) {
+    return fetch(`${API_BASE}/system/set-welcome-messages`, {
+      method: "POST",
+      headers: baseHeaders(),
+      body: JSON.stringify({ messages }),
+    })
+      .then((res) => {
+        if (!res.ok)
+          throw new Error(res.statusText || "Error setting welcome messages.");
+        return res.json();
+      })
+      .catch((e) => {
+        console.error(e);
+        return { success: false, error: e.message };
+      });
+  },
 };
 
 export default Admin;
diff --git a/frontend/src/models/system.js b/frontend/src/models/system.js
@@ -187,6 +187,38 @@ const System = {
         return { success: false, error: e.message };
       });
   },
+  getWelcomeMessages: async function () {
+    return await fetch(`${API_BASE}/system/welcome-messages`, {
+      method: "GET",
+      cache: "no-cache",
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error("Could not fetch welcome messages.");
+        return res.json();
+      })
+      .then((res) => res.welcomeMessages)
+      .catch((e) => {
+        console.error(e);
+        return null;
+      });
+  },
+  setWelcomeMessages: async function (messages) {
+    return fetch(`${API_BASE}/system/set-welcome-messages`, {
+      method: "POST",
+      headers: baseHeaders(),
+      body: JSON.stringify({ messages }),
+    })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(res.statusText || "Error setting welcome messages.");
+        }
+        return { success: true, ...res.json() };
+      })
+      .catch((e) => {
+        console.error(e);
+        return { success: false, error: e.message };
+      });
+  },
 };
 
 export default System;