mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-11-10 17:00:11 +01:00
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
parent
677cf96b34
commit
55170107c8
1
embedded-app/.gitignore
vendored
1
embedded-app/.gitignore
vendored
@ -15,6 +15,7 @@ dist-ssr
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
!yarn.lock
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
|
||||
@ -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>
|
||||
12
embedded-app/jsconfig.json
Normal file
12
embedded-app/jsconfig.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"target": "esnext",
|
||||
"jsx": "react",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@ -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 |
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -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 |
@ -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 |
12
embedded-app/src/components/ChatWindow/Header/index.jsx
Normal file
12
embedded-app/src/components/ChatWindow/Header/index.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
19
embedded-app/src/components/ChatWindow/Messages/index.jsx
Normal file
19
embedded-app/src/components/ChatWindow/Messages/index.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
128
embedded-app/src/components/ChatWindow/PromptInput/index.jsx
Normal file
128
embedded-app/src/components/ChatWindow/PromptInput/index.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
44
embedded-app/src/components/ChatWindow/index.jsx
Normal file
44
embedded-app/src/components/ChatWindow/index.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
10
embedded-app/src/components/Head.jsx
Normal file
10
embedded-app/src/components/Head.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
12
embedded-app/src/components/OpenButton/index.jsx
Normal file
12
embedded-app/src/components/OpenButton/index.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
12
embedded-app/src/components/SessionId/index.jsx
Normal file
12
embedded-app/src/components/SessionId/index.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
40
embedded-app/src/hooks/chat/useChatHistory.js
Normal file
40
embedded-app/src/hooks/chat/useChatHistory.js
Normal 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 };
|
||||
}
|
||||
8
embedded-app/src/hooks/useOpen.js
Normal file
8
embedded-app/src/hooks/useOpen.js
Normal 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 };
|
||||
}
|
||||
41
embedded-app/src/hooks/useScriptAttributes.js
Normal file
41
embedded-app/src/hooks/useScriptAttributes.js
Normal 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;
|
||||
}
|
||||
29
embedded-app/src/hooks/useSessionId.js
Normal file
29
embedded-app/src/hooks/useSessionId.js
Normal 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;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -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 || {}),
|
||||
};
|
||||
|
||||
@ -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
2936
embedded-app/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
@ -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();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user