Rename embedchain to mem0 and open sourcing code for long term memory (#1474)
Co-authored-by: Deshraj Yadav <deshrajdry@gmail.com>
This commit is contained in:
Taranjeet Singh
@@ -0,0 +1,156 @@
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import BotWrapper from "@/components/chat/BotWrapper";
|
||||
import HumanWrapper from "@/components/chat/HumanWrapper";
|
||||
import SetSources from "@/containers/SetSources";
|
||||
|
||||
export default function ChatWindow({ embedding_model, app_type, setBotTitle }) {
|
||||
const [bot, setBot] = useState(null);
|
||||
const [chats, setChats] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectChat, setSelectChat] = useState(true);
|
||||
|
||||
const router = useRouter();
|
||||
const { bot_slug } = router.query;
|
||||
|
||||
useEffect(() => {
|
||||
if (bot_slug) {
|
||||
const fetchBots = async () => {
|
||||
const response = await fetch("/api/get_bots");
|
||||
const data = await response.json();
|
||||
const matchingBot = data.find((item) => item.slug === bot_slug);
|
||||
setBot(matchingBot);
|
||||
setBotTitle(matchingBot.name);
|
||||
};
|
||||
fetchBots();
|
||||
}
|
||||
}, [bot_slug]);
|
||||
|
||||
useEffect(() => {
|
||||
const storedChats = localStorage.getItem(`chat_${bot_slug}_${app_type}`);
|
||||
if (storedChats) {
|
||||
const parsedChats = JSON.parse(storedChats);
|
||||
setChats(parsedChats.chats);
|
||||
}
|
||||
}, [app_type, bot_slug]);
|
||||
|
||||
const handleChatResponse = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
const queryInput = e.target.query.value;
|
||||
e.target.query.value = "";
|
||||
const chatEntry = {
|
||||
sender: "H",
|
||||
message: queryInput,
|
||||
};
|
||||
setChats((prevChats) => [...prevChats, chatEntry]);
|
||||
|
||||
const response = await fetch("/api/get_answer", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
query: queryInput,
|
||||
embedding_model,
|
||||
app_type,
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (response.ok) {
|
||||
const botResponse = data.response;
|
||||
const botEntry = {
|
||||
sender: "B",
|
||||
message: botResponse,
|
||||
};
|
||||
setIsLoading(false);
|
||||
setChats((prevChats) => [...prevChats, botEntry]);
|
||||
const savedChats = {
|
||||
chats: [...chats, chatEntry, botEntry],
|
||||
};
|
||||
localStorage.setItem(
|
||||
`chat_${bot_slug}_${app_type}`,
|
||||
JSON.stringify(savedChats)
|
||||
);
|
||||
} else {
|
||||
router.reload();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col justify-between h-full">
|
||||
<div className="space-y-4 overflow-x-auto h-full pb-8">
|
||||
{/* Greeting Message */}
|
||||
<BotWrapper>
|
||||
Hi, I am {bot?.name}. How can I help you today?
|
||||
</BotWrapper>
|
||||
|
||||
{/* Chat Messages */}
|
||||
{chats.map((chat, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{chat.sender === "B" ? (
|
||||
<BotWrapper>{chat.message}</BotWrapper>
|
||||
) : (
|
||||
<HumanWrapper>{chat.message}</HumanWrapper>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{/* Loader */}
|
||||
{isLoading && (
|
||||
<BotWrapper>
|
||||
<div className="flex items-center justify-center space-x-2 animate-pulse">
|
||||
<div className="w-2 h-2 bg-black rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-black rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-black rounded-full"></div>
|
||||
</div>
|
||||
</BotWrapper>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-white fixed bottom-0 left-0 right-0 h-28 sm:h-16"></div>
|
||||
|
||||
{/* Query Form */}
|
||||
<div className="flex flex-row gap-x-2 sticky bottom-3">
|
||||
<SetSources
|
||||
setChats={setChats}
|
||||
embedding_model={embedding_model}
|
||||
setSelectChat={setSelectChat}
|
||||
/>
|
||||
{selectChat && (
|
||||
<form
|
||||
onSubmit={handleChatResponse}
|
||||
className="w-full flex flex-col sm:flex-row gap-y-2 gap-x-2"
|
||||
>
|
||||
<div className="w-full">
|
||||
<input
|
||||
id="query"
|
||||
name="query"
|
||||
type="text"
|
||||
placeholder="Enter your query..."
|
||||
className="text-sm w-full border-2 border-black rounded-xl focus:outline-none focus:border-blue-800 sm:pl-4 h-11"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full sm:w-fit">
|
||||
<button
|
||||
type="submit"
|
||||
id="sender"
|
||||
disabled={isLoading}
|
||||
className={`${
|
||||
isLoading ? "opacity-60" : ""
|
||||
} w-full bg-black hover:bg-blue-800 rounded-xl text-lg text-white px-6 h-11`}
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
import { useState } from "react";
|
||||
import PlusIcon from "../../public/icons/plus.svg";
|
||||
import CrossIcon from "../../public/icons/cross.svg";
|
||||
import YoutubeIcon from "../../public/icons/youtube.svg";
|
||||
import PDFIcon from "../../public/icons/pdf.svg";
|
||||
import WebIcon from "../../public/icons/web.svg";
|
||||
import DocIcon from "../../public/icons/doc.svg";
|
||||
import SitemapIcon from "../../public/icons/sitemap.svg";
|
||||
import TextIcon from "../../public/icons/text.svg";
|
||||
|
||||
export default function SetSources({
|
||||
setChats,
|
||||
embedding_model,
|
||||
setSelectChat,
|
||||
}) {
|
||||
const [sourceName, setSourceName] = useState("");
|
||||
const [sourceValue, setSourceValue] = useState("");
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const dataTypes = {
|
||||
youtube_video: "YouTube Video",
|
||||
pdf_file: "PDF File",
|
||||
web_page: "Web Page",
|
||||
doc_file: "Doc File",
|
||||
sitemap: "Sitemap",
|
||||
text: "Text",
|
||||
};
|
||||
|
||||
const dataIcons = {
|
||||
youtube_video: <YoutubeIcon className="w-5 h-5 mr-3" />,
|
||||
pdf_file: <PDFIcon className="w-5 h-5 mr-3" />,
|
||||
web_page: <WebIcon className="w-5 h-5 mr-3" />,
|
||||
doc_file: <DocIcon className="w-5 h-5 mr-3" />,
|
||||
sitemap: <SitemapIcon className="w-5 h-5 mr-3" />,
|
||||
text: <TextIcon className="w-5 h-5 mr-3" />,
|
||||
};
|
||||
|
||||
const handleDropdownClose = () => {
|
||||
setIsDropdownOpen(false);
|
||||
setSourceName("");
|
||||
setSelectChat(true);
|
||||
};
|
||||
const handleDropdownSelect = (dataType) => {
|
||||
setSourceName(dataType);
|
||||
setSourceValue("");
|
||||
setIsDropdownOpen(false);
|
||||
setSelectChat(false);
|
||||
};
|
||||
|
||||
const handleAddDataSource = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
const addDataSourceEntry = {
|
||||
sender: "B",
|
||||
message: `Adding the following ${dataTypes[sourceName]}: ${sourceValue}`,
|
||||
};
|
||||
setChats((prevChats) => [...prevChats, addDataSourceEntry]);
|
||||
let name = sourceName;
|
||||
let value = sourceValue;
|
||||
setSourceValue("");
|
||||
const response = await fetch("/api/add_sources", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
embedding_model,
|
||||
name,
|
||||
value,
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
if (response.ok) {
|
||||
const successEntry = {
|
||||
sender: "B",
|
||||
message: `Successfully added ${dataTypes[sourceName]}!`,
|
||||
};
|
||||
setChats((prevChats) => [...prevChats, successEntry]);
|
||||
} else {
|
||||
const errorEntry = {
|
||||
sender: "B",
|
||||
message: `Failed to add ${dataTypes[sourceName]}. Please try again.`,
|
||||
};
|
||||
setChats((prevChats) => [...prevChats, errorEntry]);
|
||||
}
|
||||
setSourceName("");
|
||||
setIsLoading(false);
|
||||
setSelectChat(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-fit">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className="w-fit p-2.5 rounded-xl text-white bg-black hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300"
|
||||
>
|
||||
<PlusIcon className="w-6 h-6" />
|
||||
</button>
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute left-0 bottom-full bg-white border border-gray-300 rounded-lg shadow-lg mb-2">
|
||||
<ul className="py-1">
|
||||
<li
|
||||
className="block px-4 py-2 text-sm text-black cursor-pointer hover:bg-gray-200"
|
||||
onClick={handleDropdownClose}
|
||||
>
|
||||
<span className="flex items-center text-red-600">
|
||||
<CrossIcon className="w-5 h-5 mr-3" />
|
||||
Close
|
||||
</span>
|
||||
</li>
|
||||
{Object.entries(dataTypes).map(([key, value]) => (
|
||||
<li
|
||||
key={key}
|
||||
className="block px-4 py-2 text-sm text-black cursor-pointer hover:bg-gray-200"
|
||||
onClick={() => handleDropdownSelect(key)}
|
||||
>
|
||||
<span className="flex items-center">
|
||||
{dataIcons[key]}
|
||||
{value}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{sourceName && (
|
||||
<form
|
||||
onSubmit={handleAddDataSource}
|
||||
className="w-full flex flex-col sm:flex-row gap-y-2 gap-x-2 items-center"
|
||||
>
|
||||
<div className="w-full">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter URL, Data or File path here..."
|
||||
className="text-sm w-full border-2 border-black rounded-xl focus:outline-none focus:border-blue-800 sm:pl-4 h-11"
|
||||
required
|
||||
value={sourceValue}
|
||||
onChange={(e) => setSourceValue(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full sm:w-fit">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className={`${
|
||||
isLoading ? "opacity-60" : ""
|
||||
} w-full bg-black hover:bg-blue-800 rounded-xl text-lg text-white px-6 h-11`}
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
import DrawerIcon from "../../public/icons/drawer.svg";
|
||||
import SettingsIcon from "../../public/icons/settings.svg";
|
||||
import BotIcon from "../../public/icons/bot.svg";
|
||||
import DropdownIcon from "../../public/icons/dropdown.svg";
|
||||
import TwitterIcon from "../../public/icons/twitter.svg";
|
||||
import GithubIcon from "../../public/icons/github.svg";
|
||||
import LinkedinIcon from "../../public/icons/linkedin.svg";
|
||||
|
||||
export default function Sidebar() {
|
||||
const [bots, setBots] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchBots = async () => {
|
||||
const response = await fetch("/api/get_bots");
|
||||
const data = await response.json();
|
||||
setBots(data);
|
||||
};
|
||||
|
||||
fetchBots();
|
||||
}, []);
|
||||
|
||||
const toggleDropdown = () => {
|
||||
const dropdown = document.getElementById("dropdown-toggle");
|
||||
dropdown.classList.toggle("hidden");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Toggle */}
|
||||
<button
|
||||
data-drawer-target="logo-sidebar"
|
||||
data-drawer-toggle="logo-sidebar"
|
||||
aria-controls="logo-sidebar"
|
||||
type="button"
|
||||
className="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200"
|
||||
>
|
||||
<DrawerIcon className="w-6 h-6" />
|
||||
</button>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
id="logo-sidebar"
|
||||
className="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0"
|
||||
>
|
||||
<div className="flex flex-col h-full px-3 py-4 overflow-y-auto bg-gray-100">
|
||||
<div className="pb-10">
|
||||
<Link href="/" className="flex items-center justify-evenly mb-5">
|
||||
<Image
|
||||
src="/images/embedchain.png"
|
||||
alt="Embedchain Logo"
|
||||
width={45}
|
||||
height={0}
|
||||
className="block h-auto w-auto"
|
||||
/>
|
||||
<span className="self-center text-2xl font-bold whitespace-nowrap">
|
||||
Embedchain
|
||||
</span>
|
||||
</Link>
|
||||
<ul className="space-y-2 font-medium text-lg">
|
||||
{/* Settings */}
|
||||
<li>
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-200 group"
|
||||
>
|
||||
<SettingsIcon className="w-6 h-6 text-gray-600 transition duration-75 group-hover:text-gray-900" />
|
||||
<span className="ml-3">Settings</span>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
{/* Bots */}
|
||||
{bots.length !== 0 && (
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-200"
|
||||
onClick={toggleDropdown}
|
||||
>
|
||||
<BotIcon className="w-6 h-6 text-gray-600 transition duration-75 group-hover:text-gray-900" />
|
||||
<span className="flex-1 ml-3 text-left whitespace-nowrap">
|
||||
Bots
|
||||
</span>
|
||||
<DropdownIcon className="w-3 h-3" />
|
||||
</button>
|
||||
<ul
|
||||
id="dropdown-toggle"
|
||||
className="hidden text-sm py-2 space-y-2"
|
||||
>
|
||||
{bots.map((bot, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<li>
|
||||
<Link
|
||||
href={`/${bot.slug}/app`}
|
||||
className="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-200"
|
||||
>
|
||||
{bot.name}
|
||||
</Link>
|
||||
</li>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-gray-200 absolute bottom-0 left-0 right-0 h-20"></div>
|
||||
|
||||
{/* Social Icons */}
|
||||
<div className="mt-auto mb-3 flex flex-row justify-evenly sticky bottom-3">
|
||||
<a href="https://twitter.com/embedchain" target="blank">
|
||||
<TwitterIcon className="w-6 h-6 text-gray-600 transition duration-75 hover:text-gray-900" />
|
||||
</a>
|
||||
<a href="https://github.com/embedchain/embedchain" target="blank">
|
||||
<GithubIcon className="w-6 h-6 text-gray-600 transition duration-75 hover:text-gray-900" />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/company/embedchain"
|
||||
target="blank"
|
||||
>
|
||||
<LinkedinIcon className="w-6 h-6 text-gray-600 transition duration-75 hover:text-gray-900" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user