Rename embedchain to mem0 and open sourcing code for long term memory (#1474)

Co-authored-by: Deshraj Yadav <deshrajdry@gmail.com>

embedchain/examples/full_stack/frontend/src/components/PageWrapper.js

@@ -0,0 +1,9 @@
+export default function PageWrapper({ children }) {
+  return (
+    <>
+      <div className="flex pt-4 px-4 sm:ml-64 min-h-screen">
+        <div className="flex-grow pt-4 px-4 rounded-lg">{children}</div>
+      </div>
+    </>
+  );
+}

embedchain/examples/full_stack/frontend/src/components/chat/BotWrapper.js

@@ -0,0 +1,16 @@
+export default function BotWrapper({ children }) {
+  return (
+    <>
+      <div className="rounded-lg">
+        <div className="flex flex-row items-center">
+          <div className="flex items-center justify-center h-10 w-10 rounded-full bg-black text-white flex-shrink-0">
+            B
+          </div>
+          <div className="ml-3 text-sm bg-white py-2 px-4 shadow-lg rounded-xl">
+            <div>{children}</div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

embedchain/examples/full_stack/frontend/src/components/chat/HumanWrapper.js

@@ -0,0 +1,16 @@
+export default function HumanWrapper({ children }) {
+  return (
+    <>
+      <div className="rounded-lg">
+        <div className="flex items-center justify-start flex-row-reverse">
+          <div className="flex items-center justify-center h-10 w-10 rounded-full bg-blue-800 text-white flex-shrink-0">
+            H
+          </div>
+          <div className="mr-3 text-sm bg-blue-200 py-2 px-4 shadow-lg rounded-xl">
+            <div>{children}</div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

embedchain/examples/full_stack/frontend/src/components/dashboard/CreateBot.js

@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+export default function CreateBot() {
+  const [botName, setBotName] = useState("");
+  const [status, setStatus] = useState("");
+  const router = useRouter();
+
+  const handleCreateBot = async (e) => {
+    e.preventDefault();
+    const data = {
+      name: botName,
+    };
+
+    const response = await fetch("/api/create_bot", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (response.ok) {
+      const botSlug = botName.toLowerCase().replace(/\s+/g, "_");
+      router.push(`/${botSlug}/app`);
+    } else {
+      setBotName("");
+      setStatus("fail");
+      setTimeout(() => {
+        setStatus("");
+      }, 3000);
+    }
+  };
+
+  return (
+    <>
+      <div className="w-full">
+        {/* Create Bot */}
+        <h2 className="text-xl font-bold text-gray-800">CREATE BOT</h2>
+        <form className="py-2" onSubmit={handleCreateBot}>
+          <label
+            htmlFor="bot_name"
+            className="block mb-2 text-sm font-medium text-gray-900"
+          >
+            Name of Bot
+          </label>
+          <div className="flex flex-col sm:flex-row gap-x-4 gap-y-4">
+            <input
+              type="text"
+              id="bot_name"
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+              placeholder="Eg. Naval Ravikant"
+              required
+              value={botName}
+              onChange={(e) => setBotName(e.target.value)}
+            />
+            <button
+              type="submit"
+              className="h-fit text-white bg-black hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
+            >
+              Submit
+            </button>
+          </div>
+          {status === "fail" && (
+            <div className="text-red-600 text-sm font-bold py-1">
+              An error occurred while creating your bot!
+            </div>
+          )}
+        </form>
+      </div>
+    </>
+  );
+}

embedchain/examples/full_stack/frontend/src/components/dashboard/DeleteBot.js

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+
+export default function DeleteBot() {
+  const [bots, setBots] = useState([]);
+  const router = useRouter();
+
+  useEffect(() => {
+    const fetchBots = async () => {
+      const response = await fetch("/api/get_bots");
+      const data = await response.json();
+      setBots(data);
+    };
+    fetchBots();
+  }, []);
+
+  const handleDeleteBot = async (event) => {
+    event.preventDefault();
+    const selectedBotSlug = event.target.bot_name.value;
+    if (selectedBotSlug === "none") {
+      return;
+    }
+    const response = await fetch("/api/delete_bot", {
+      method: "POST",
+      body: JSON.stringify({ slug: selectedBotSlug }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (response.ok) {
+      router.reload();
+    }
+  };
+
+  return (
+    <>
+      {bots.length !== 0 && (
+        <div className="w-full">
+          {/* Delete Bot */}
+          <h2 className="text-xl font-bold text-gray-800">DELETE BOTS</h2>
+          <form className="py-2" onSubmit={handleDeleteBot}>
+            <label className="block mb-2 text-sm font-medium text-gray-900">
+              List of Bots
+            </label>
+            <div className="flex flex-col sm:flex-row gap-x-4 gap-y-4">
+              <select
+                name="bot_name"
+                defaultValue="none"
+                className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+              >
+                <option value="none">Select a Bot</option>
+                {bots.map((bot) => (
+                  <option key={bot.slug} value={bot.slug}>
+                    {bot.name}
+                  </option>
+                ))}
+              </select>
+              <button
+                type="submit"
+                className="h-fit text-white bg-red-600 hover:bg-red-600/90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
+              >
+                Delete
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+    </>
+  );
+}

embedchain/examples/full_stack/frontend/src/components/dashboard/PurgeChats.js

@@ -0,0 +1,47 @@
+import { useState } from "react";
+
+export default function PurgeChats() {
+  const [status, setStatus] = useState("");
+  const handleChatsPurge = (event) => {
+    event.preventDefault();
+    localStorage.clear();
+    setStatus("success");
+    setTimeout(() => {
+      setStatus(false);
+    }, 3000);
+  };
+
+  return (
+    <>
+      <div className="w-full">
+        {/* Purge Chats */}
+        <h2 className="text-xl font-bold text-gray-800">PURGE CHATS</h2>
+        <form className="py-2" onSubmit={handleChatsPurge}>
+          <label className="block mb-2 text-sm font-medium text-red-600">
+            Warning
+          </label>
+          <div className="flex flex-col sm:flex-row gap-x-4 gap-y-4">
+            <div
+              type="text"
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+            >
+              The following action will clear all your chat logs. Proceed with
+              caution!
+            </div>
+            <button
+              type="submit"
+              className="h-fit text-white bg-red-600 hover:bg-red-600/80 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
+            >
+              Purge
+            </button>
+          </div>
+          {status === "success" && (
+            <div className="text-green-600 text-sm font-bold py-1">
+              Your chats have been purged!
+            </div>
+          )}
+        </form>
+      </div>
+    </>
+  );
+}

embedchain/examples/full_stack/frontend/src/components/dashboard/SetOpenAIKey.js

@@ -0,0 +1,73 @@
+import { useState } from "react";
+
+export default function SetOpenAIKey({ setIsKeyPresent }) {
+  const [openAIKey, setOpenAIKey] = useState("");
+  const [status, setStatus] = useState("");
+
+  const handleOpenAIKey = async (e) => {
+    e.preventDefault();
+    const response = await fetch("/api/set_key", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ openAIKey }),
+    });
+
+    if (response.ok) {
+      setOpenAIKey("");
+      setStatus("success");
+      setIsKeyPresent(true);
+    } else {
+      setStatus("fail");
+    }
+
+    setTimeout(() => {
+      setStatus("");
+    }, 3000);
+  };
+
+  return (
+    <>
+      <div className="w-full">
+        {/* Set Open AI Key */}
+        <h2 className="text-xl font-bold text-gray-800">SET OPENAI KEY</h2>
+        <form className="py-2" onSubmit={handleOpenAIKey}>
+          <label
+            htmlFor="openai_key"
+            className="block mb-2 text-sm font-medium text-gray-900"
+          >
+            OpenAI Key
+          </label>
+          <div className="flex flex-col sm:flex-row gap-x-4 gap-y-4">
+            <input
+              type="password"
+              id="openai_key"
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+              placeholder="Enter Open AI Key here"
+              required
+              value={openAIKey}
+              onChange={(e) => setOpenAIKey(e.target.value)}
+            />
+            <button
+              type="submit"
+              className="h-fit text-white bg-black hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
+            >
+              Submit
+            </button>
+          </div>
+          {status === "success" && (
+            <div className="text-green-600 text-sm font-bold py-1">
+              Your Open AI key has been saved successfully!
+            </div>
+          )}
+          {status === "fail" && (
+            <div className="text-red-600 text-sm font-bold py-1">
+              An error occurred while saving your OpenAI Key!
+            </div>
+          )}
+        </form>
+      </div>
+    </>
+  );
+}