rough in modularization of embed chat

cleanup dev process for easier dev support
move all chat to components
todo: build process
todo: backend support
This commit is contained in:
timothycarambat 2024-01-31 13:34:25 -08:00
parent 677cf96b34
commit 55170107c8
26 changed files with 3386 additions and 347 deletions

View File

@ -15,6 +15,7 @@ dist-ssr
# Editor directories and files
.vscode/*
!.vscode/extensions.json
!yarn.lock
.idea
.DS_Store
*.suo

View File

@ -1,13 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<h1>This is an example testing page for embedded AnythingLLM.</h1>
<script data-slug="sample" data-embed-id="example-embed-id-1234" data-base-api-url='http://localhost:3001/api'
src="/dist/embedded-anything-llm.umd.js">
</script>
</body>
</html>
</html>

View File

@ -0,0 +1,12 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "esnext",
"jsx": "react",
"paths": {
"@/*": [
"./src/*"
],
}
}
}

View File

@ -4,32 +4,32 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "nodemon -e js,jsx,css --watch src --exec \"yarn run dev:preview\"",
"dev:preview": "yarn run build && yarn serve . -p 3080 --no-clipboard",
"build": "vite build",
"serve": "vite build && serve dist -p 5000",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
"lint": "yarn prettier --write ./src"
},
"dependencies": {
"@microsoft/fetch-event-source": "^2.0.1",
"@rollup/plugin-image": "^3.0.3",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"serve": "^14.2.1",
"tailwindcss": "^3.3.5",
"uuid": "^9.0.1",
"vite-plugin-singlefile": "^0.13.5"
"uuid": "^9.0.1"
},
"devDependencies": {
"@rollup/plugin-image": "^3.0.3",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@vitejs/plugin-react": "^4.2.0",
"autoprefixer": "^10.4.14",
"globals": "^13.21.0",
"eslint": "^8.53.0",
"serve": "^14.2.1",
"prettier": "^3.0.3",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"vite": "^5.0.0"
"nodemon": "^2.0.22",
"vite": "^5.0.0",
"vite-plugin-singlefile": "^0.13.5"
}
}
}

View File

@ -1,6 +0,0 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,42 +0,0 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}

View File

@ -1,278 +1,36 @@
import { useEffect, useState, useRef } from "react";
import AnythingLLMLogo from "./assets/anything-llm-dark.png";
import { v4 } from "uuid";
import { fetchEventSource } from "@microsoft/fetch-event-source";
import useGetScriptAttributes from "@/hooks/useScriptAttributes";
import useSessionId from "@/hooks/useSessionId";
import useOpenChat from "@/hooks/useOpen";
import Head from "@/components/Head";
import OpenButton from "@/components/OpenButton";
import ChatWindow from "./components/ChatWindow";
export default function App() {
const [isOpen, setIsOpen] = useState(false);
const [userId, setUserId] = useState("");
const [messages, setMessages] = useState([]);
const [chatLoading, setChatLoading] = useState(false);
const eventSourceRef = useRef(null);
const messagesEndRef = useRef(null);
// system prompt
// preset history (array of messages)
// LLM model to select
// temperature
// chat mode (query or chat)
// possible option for citations (show or hide)
// Parameters from script tag
const [slug, setSlug] = useState("");
const [baseApiUrl, setBaseApiUrl] = useState("");
const [prompt, setPrompt] = useState("");
const [chatMode, setChatMode] = useState("chat");
const [llmModel, setLlmModel] = useState("gpt-3.5-turbo");
const [temperature, setTemperature] = useState(0.7);
useEffect(() => {
const script = document.getElementById("embedded-anything-llm");
const slugAttribute = script?.getAttribute("slug");
const baseApiUrlAttribute = script?.getAttribute("baseApiUrl");
const promptAttribute = script?.getAttribute("prompt");
const chatModeAttribute = script?.getAttribute("chatMode");
setSlug(slugAttribute);
setBaseApiUrl(baseApiUrlAttribute);
setPrompt(promptAttribute);
setChatMode(chatModeAttribute);
}, []);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};
useEffect(() => {
scrollToBottom();
}, [messages, isOpen]);
useEffect(() => {
let id = localStorage.getItem("userId");
if (!id) {
id = v4();
localStorage.setItem("userId", id);
}
setUserId(id);
}, []);
useEffect(() => {
if (!isOpen) return;
const fetchData = async () => {
try {
const url = `${baseApiUrl}/workspace/${slug}/chats-embedded-app`;
const response = await fetch(url);
if (!response.ok) {
throw new Error("Invalid response from server");
}
const responseData = await response.json();
const formattedMessages = responseData.history.map((msg) => ({
...msg,
id: v4(),
sender: msg.role === "user" ? "user" : "system",
textResponse: msg.content,
close: false,
}));
setMessages(formattedMessages);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
}, [slug, isOpen]);
const toggleOpen = () => {
setIsOpen(!isOpen);
};
const addMessage = (newMessage, sender) => {
setMessages((prev) => [...prev, { ...newMessage, id: v4(), sender }]);
};
const addChunkToLastMessage = (textChunk, sender) => {
setMessages((prev) => {
const lastMessage = prev.length > 0 ? prev[prev.length - 1] : null;
if (lastMessage && lastMessage.sender === sender && !lastMessage.close) {
return [
...prev.slice(0, -1),
{
...lastMessage,
textResponse: lastMessage.textResponse + textChunk,
},
];
} else {
return [...prev, { id: v4(), textResponse: textChunk, sender }];
}
});
};
const streamMessages = async (message) => {
addMessage({ textResponse: message, close: false }, "user");
setChatLoading(true);
const ctrl = new AbortController();
eventSourceRef.current = ctrl;
await fetchEventSource(`${baseApiUrl}/workspace/stream-embedded-chat`, {
method: "POST",
body: JSON.stringify({
prompt,
message,
mode: chatMode,
userId,
slug,
}),
signal: ctrl.signal,
openWhenHidden: true,
onopen(response) {
if (!response.ok) {
addMessage(
{
textResponse: `Error: Response code ${response.status}`,
close: true,
},
"system"
);
ctrl.abort();
}
},
onmessage(msg) {
try {
const chatResult = JSON.parse(msg.data);
addChunkToLastMessage(chatResult.textResponse, "system");
if (chatResult.close) {
setChatLoading(false);
finalizeLastMessage();
}
} catch (error) {
addMessage(
{ textResponse: `Error: ${error.message}`, close: true },
"system"
);
setChatLoading(false);
}
},
onerror(err) {
addMessage(
{ textResponse: `Error: ${err.message}`, close: true },
"system"
);
ctrl.abort();
setChatLoading(false);
},
});
};
const finalizeLastMessage = () => {
setMessages((prev) => {
const lastMessage = prev.length > 0 ? prev[prev.length - 1] : null;
if (lastMessage) {
return [...prev.slice(0, -1), { ...lastMessage, close: true }];
}
return prev;
});
};
const handleSubmit = async (e) => {
e.preventDefault();
const message = e.target.message.value;
e.target.message.value = "";
await streamMessages(message);
};
const { isChatOpen, toggleOpenChat } = useOpenChat();
const embedSettings = useGetScriptAttributes();
const sessionId = useSessionId();
return (
<>
<head>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<Head />
<div className="fixed bottom-0 right-0 mb-4 mr-4 z-50">
<div
className={`transition-all duration-300 ease-in-out ${
isOpen
isChatOpen
? "max-w-md p-4 bg-white rounded-lg border shadow-lg w-72"
: "w-16 h-16 rounded-full"
}`}
>
{isOpen && (
<div className="flex flex-col">
<div className="flex justify-between items-center">
<img
className="h-10"
src={AnythingLLMLogo}
alt="AnythingLLM Logo"
/>
<button onClick={toggleOpen} className="text-xl font-bold">
X
</button>
</div>
<div className="mb-4 p-4 bg-gray-100 rounded flex flex-col items-center">
<div className="chat-messages h-64 overflow-y-auto mb-2">
{messages.map((msg, index) => (
<div
key={index}
className={`p-2 my-1 rounded-md shadow ${
msg.sender === "user" ? "bg-gray-700" : "bg-blue-600"
}`}
>
<p className="text-sm text-white">
{msg.textResponse || msg.error}
</p>
</div>
))}
<div ref={messagesEndRef} />
</div>
<form onSubmit={handleSubmit} className="w-full mt-2">
<div className="flex w-full">
<input
type="text"
name="message"
placeholder="Enter a message..."
className="flex-1 px-2 py-1 border rounded-l-lg disabled:cursor-not-allowed"
disabled={chatLoading}
/>
<button
type="submit"
className="bg-blue-500 text-white px-4 rounded-r-lg disabled:cursor-not-allowed hover:bg-blue-700/90"
disabled={chatLoading}
>
Send
</button>
</div>
</form>
</div>
<div className="text-xs text-gray-500 w-full text-center">
ID: {userId}
</div>
</div>
)}
{!isOpen && (
<button
onClick={toggleOpen}
className="w-16 h-16 rounded-full bg-blue-500 text-white text-2xl"
aria-label="Toggle Menu"
>
+
</button>
{isChatOpen && (
<ChatWindow
closeChat={() => toggleOpenChat(false)}
settings={embedSettings}
sessionId={sessionId}
/>
)}
<OpenButton isOpen={isChatOpen} toggleOpen={toggleOpenChat} />
</div>
</div>
</>
);
}
// SCRIPT TO LOAD THE EMBEDDED-ANYTHING-LLM.UMD.JS ON PAGE WITH <SCRIPT></SCRIPT>
// var script = document.createElement('script');
// script.id = 'embedded-anything-llm';
// script.src = 'http://localhost:5000/embedded-anything-llm.umd.js';
// script.setAttribute('slug', 'hello');
// script.setAttribute('baseApiUrl', 'http://localhost:3001/api');
// script.setAttribute('chatMode', 'chat');
// script.setAttribute('prompt', 'Given the following conversation, relevant context, and a follow up question, reply with an answer to the current question the user is asking. Return only your response to the question given the above information following the users instructions as needed.');
// document.head.appendChild(script);

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

Before

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,12 @@
import AnythingLLMLogo from "@/assets/anything-llm-dark.png";
export default function ChatWindowHeader({ closeChat }) {
return (
<div className="flex justify-between items-center">
<img className="h-10" src={AnythingLLMLogo} alt="AnythingLLM Logo" />
<button onClick={closeChat} className="text-xl font-bold">
X
</button>
</div>
);
}

View File

@ -0,0 +1,19 @@
export default function MessageHistory({ messages, messagesEndRef }) {
return (
<div className="chat-messages w-full h-64 overflow-y-auto mb-2">
{messages.map((msg, index) => (
<div
key={msg?.id || index}
className={`p-2 my-1 rounded-md shadow ${
msg.sender === "user"
? "w-[90%] bg-gray-700 float-left"
: "w-fit bg-blue-600 float-right text-right"
}`}
>
<p className="text-sm text-white">{msg.textResponse || msg.error}</p>
</div>
))}
<div ref={messagesEndRef} />
</div>
);
}

View File

@ -0,0 +1,128 @@
import { useRef, useState } from "react";
import { fetchEventSource } from "@microsoft/fetch-event-source";
import { v4 } from "uuid";
export default function PromptInput({
settings,
sessionId,
appendMessage,
setMessages,
}) {
const eventSourceRef = useRef(null);
const [chatLoading, setChatLoading] = useState(false);
const { baseApiUrl, slug } = settings;
const addChunkToLastMessage = (textChunk, sender) => {
setMessages((prev) => {
const lastMessage = prev.length > 0 ? prev[prev.length - 1] : null;
if (lastMessage && lastMessage.sender === sender && !lastMessage.close) {
return [
...prev.slice(0, -1),
{
...lastMessage,
textResponse: lastMessage.textResponse + textChunk,
},
];
} else {
return [...prev, { id: v4(), textResponse: textChunk, sender }];
}
});
};
const streamMessages = async (message) => {
appendMessage({ textResponse: message, close: false }, "user");
setChatLoading(true);
const ctrl = new AbortController();
eventSourceRef.current = ctrl;
await fetchEventSource(`${baseApiUrl}/workspace/stream-embedded-chat`, {
method: "POST",
body: JSON.stringify({
prompt,
message,
sessionId,
mode: "chat",
slug,
}),
signal: ctrl.signal,
openWhenHidden: true,
onopen(response) {
if (!response.ok) {
appendMessage(
{
textResponse: `Error: Response code ${response.status}`,
close: true,
},
"system"
);
ctrl.abort();
}
},
onmessage(msg) {
try {
const chatResult = JSON.parse(msg.data);
addChunkToLastMessage(chatResult.textResponse, "system");
if (chatResult.close) {
setChatLoading(false);
finalizeLastMessage();
}
} catch (error) {
appendMessage(
{ textResponse: `Error: ${error.message}`, close: true },
"system"
);
setChatLoading(false);
}
},
onerror(err) {
appendMessage(
{ textResponse: `Error: ${err.message}`, close: true },
"system"
);
ctrl.abort();
setChatLoading(false);
},
});
};
const finalizeLastMessage = () => {
setMessages((prev) => {
const lastMessage = prev.length > 0 ? prev[prev.length - 1] : null;
if (lastMessage) {
return [...prev.slice(0, -1), { ...lastMessage, close: true }];
}
return prev;
});
};
const handleSubmit = async (e) => {
e.preventDefault();
const message = e.target.message.value;
e.target.message.value = "";
await streamMessages(message);
};
return (
<form onSubmit={handleSubmit} className="w-full mt-2">
<div className="flex w-full">
<textarea
name="message"
required={true}
placeholder="Enter a message..."
className="flex-1 px-2 py-1 border text-sm rounded-l-lg outline-none focus:ring-0 disabled:cursor-not-allowed resize-none"
disabled={chatLoading}
autoComplete="off"
rows={3}
></textarea>
<button
type="submit"
className="bg-blue-500 text-white px-4 rounded-r-lg disabled:cursor-not-allowed hover:bg-blue-700/90"
disabled={chatLoading}
>
Send
</button>
</div>
</form>
);
}

View File

@ -0,0 +1,44 @@
import { useEffect, useRef } from "react";
import { v4 } from "uuid";
import ChatWindowHeader from "./Header";
import SessionId from "../SessionId";
import useChatHistory from "@/hooks/chat/useChatHistory";
import MessageHistory from "./Messages";
import PromptInput from "./PromptInput";
function scrollToBottom(messagesEndRef = null) {
if (!messagesEndRef) return;
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}
export default function ChatWindow({ closeChat, settings, sessionId }) {
const { chatHistory: messages, setChatHistory: setMessages } = useChatHistory(
settings,
sessionId
);
const messagesEndRef = useRef(null);
useEffect(() => {
scrollToBottom(messagesEndRef);
}, [messages]);
const appendMessage = (newMessage, sender) => {
setMessages((prev) => [...prev, { ...newMessage, id: v4(), sender }]);
};
return (
<div className="flex flex-col">
<ChatWindowHeader closeChat={closeChat} />
<div className="mb-4 p-4 bg-gray-100 rounded flex flex-col items-center">
<MessageHistory messages={messages} messagesEndRef={messagesEndRef} />
<PromptInput
settings={settings}
sessionId={sessionId}
appendMessage={appendMessage}
setMessages={setMessages}
/>
</div>
<SessionId />
</div>
);
}

View File

@ -0,0 +1,10 @@
export default function Head() {
return (
<head>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
);
}

View File

@ -0,0 +1,12 @@
export default function OpenButton({ isOpen, toggleOpen }) {
if (isOpen) return null;
return (
<button
onClick={toggleOpen}
className="w-16 h-16 rounded-full bg-blue-500 text-white text-2xl"
aria-label="Toggle Menu"
>
+
</button>
);
}

View File

@ -0,0 +1,12 @@
import useSessionId from "@/hooks/useSessionId";
export default function SessionId() {
const sessionId = useSessionId();
if (!sessionId) return null;
return (
<div className="text-xs text-gray-500 w-full text-center">
ID: {sessionId}
</div>
);
}

View File

@ -0,0 +1,40 @@
import { useEffect, useState } from "react";
const historyURL = ({ baseApiUrl, slug }) =>
`${baseApiUrl}/workspace/${slug}/chats-embedded-app`;
export default function useChatHistory(settings = null, sessionId = null) {
const [messages, setMessages] = useState([]);
useEffect(() => {
async function fetchChatHistory() {
if (!sessionId || !settings) return;
try {
const formattedMessages = await fetch(historyURL(settings))
.then((res) => {
if (res.ok) return res.json();
throw new Error("Invalid response from server");
})
.then((res) => {
return res.history.map((msg) => ({
...msg,
id: v4(),
sender: msg.role === "user" ? "user" : "system",
textResponse: msg.content,
close: false,
}));
})
.catch((e) => {
console.error(e);
return [];
});
setMessages(formattedMessages);
} catch (error) {
console.error("Error fetching historical chats:", error);
}
}
fetchChatHistory();
}, [sessionId, settings]);
return { chatHistory: messages, setChatHistory: setMessages };
}

View File

@ -0,0 +1,8 @@
import { useState } from "react";
export default function useOpenChat() {
const [isOpen, setOpen] = useState(false);
//TODO: Detect if chat was previously open??
return { isChatOpen: isOpen, toggleOpenChat: setOpen };
}

View File

@ -0,0 +1,41 @@
import { useEffect, useState } from "react";
import { embedderSettings } from "../main";
const DEFAULT_SETTINGS = {
embedId: null, //required
slug: null, // required
baseApiUrl: null, // required
prompt: null, // override
model: null, // override
temperature: null, //override
};
export default function useGetScriptAttributes() {
const [settings, setSettings] = useState({
loaded: false,
...DEFAULT_SETTINGS,
});
useEffect(() => {
function fetchAttribs() {
if (!document) return false;
if (
!embedderSettings.settings.slug ||
!embedderSettings.settings.baseApiUrl ||
!embedderSettings.settings.embedId
)
throw new Error(
"[AnythingLLM Embed Module::Abort] - Invalid script tag setup detected. Missing required parameters for boot!"
);
setSettings({
...DEFAULT_SETTINGS,
...embedderSettings.settings,
loaded: true,
});
}
fetchAttribs();
}, [document]);
return settings;
}

View File

@ -0,0 +1,29 @@
import { useEffect, useState } from "react";
import { embedderSettings } from "../main";
import { v4 } from "uuid";
export default function useSessionId() {
const [sessionId, setSessionId] = useState("");
useEffect(() => {
function getOrAssignSessionId() {
if (!window || !embedderSettings?.settings?.embedId) return;
const STORAGE_IDENTIFIER = `allm_${embedderSettings?.settings?.embedId}_session_id`;
const currentId = window.localStorage.getItem(STORAGE_IDENTIFIER);
if (!!currentId) {
console.log(`Resuming session id`, currentId);
setSessionId(currentId);
return;
}
const newId = v4();
console.log(`Registering new session id`, newId);
window.localStorage.setItem(STORAGE_IDENTIFIER, newId);
setSessionId(newId);
}
getOrAssignSessionId();
}, [window]);
return sessionId;
}

View File

@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

View File

@ -1,15 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
const appElement = document.createElement("div");
const appElement = document.createElement('div');
appElement.id = 'anythingllm-embedded';
document.body.appendChild(appElement);
const root = ReactDOM.createRoot(appElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
</React.StrictMode>
);
export const embedderSettings = {
settings: Object.assign({}, document?.currentScript?.dataset || {}),
};

View File

@ -1,5 +1,6 @@
// vite.config.js
import { defineConfig } from "vite"
import { fileURLToPath, URL } from "url"
import react from "@vitejs/plugin-react"
import image from "@rollup/plugin-image"
@ -9,6 +10,24 @@ export default defineConfig({
// In dev, we need to disable this, but in prod, we need to enable it
"process.env.NODE_ENV": JSON.stringify("production")
},
resolve: {
alias: [
{
find: "@",
replacement: fileURLToPath(new URL("./src", import.meta.url))
},
{
process: "process/browser",
stream: "stream-browserify",
zlib: "browserify-zlib",
util: "util",
find: /^~.+/,
replacement: (val) => {
return val.replace(/^~/, "")
}
}
]
},
build: {
lib: {
entry: "src/main.jsx",
@ -19,12 +38,24 @@ export default defineConfig({
rollupOptions: {
external: []
},
commonjsOptions: {
transformMixedEsModules: true
},
cssCodeSplit: false,
assetsInlineLimit: 100000000,
minify: "esbuild",
outDir: "dist",
emptyOutDir: true,
inlineDynamicImports: true,
assetsDir: ""
}
assetsDir: "",
sourcemap: 'inline',
},
optimizeDeps: {
esbuildOptions: {
define: {
global: "globalThis"
},
plugins: []
}
},
})

2936
embedded-app/yarn.lock Normal file

File diff suppressed because it is too large Load Diff

View File

@ -37,12 +37,13 @@ systemEndpoints(apiRouter);
extensionEndpoints(apiRouter);
workspaceEndpoints(apiRouter);
chatEndpoints(apiRouter);
embeddedEndpoints(apiRouter);
adminEndpoints(apiRouter);
inviteEndpoints(apiRouter);
utilEndpoints(apiRouter);
developerEndpoints(app, apiRouter);
embeddedEndpoints(apiRouter);
apiRouter.post("/v/:command", async (request, response) => {
try {
const VectorDb = getVectorDbClass();