merlyn/embed/src/App.jsx
Sean Hatfield 1846a99b93
[FEAT] Embedded AnythingLLM (#656)
* WIP embedded app

* WIP got response from backend in embedded app

* WIP streaming prints to embedded app

* implemented streaming and tailwind min for styling into embedded app

* WIP embedded app history functional

* load params from script tag into embedded app

* rough in modularization of embed chat
cleanup dev process for easier dev support
move all chat to components
todo: build process
todo: backend support

* remove eslint config

* Implement models and cleanup embed chat endpoints
Improve build process for embed
prod minification and bundle size awareness
WIP

* forgot files

* rename to embed folder

* introduce chat modal styles

* add middleware validations on embed chat

* auto open param and default greeting

* reset chat history

* Admin embed config page

* Admin Embed Chats mgmt page

* update embed

* nonpriv

* more style support
reopen if chat was last opened

* update comments

* remove unused imports

* allow change of workspace for embedconfig

* update failure to lookup message

* update reset script

* update instructions

* Add more styling options
Add sponsor text at bottom
Support dynamic container height
Loading animations

* publish new embed script

* Add back syntax highlighting and keep bundle small via dynamic script build

* add hint

* update readme

* update copy model for snippet with link to styles

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>
2024-02-05 14:21:34 -08:00

53 lines
1.5 KiB
JavaScript

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";
import { useEffect } from "react";
export default function App() {
const { isChatOpen, toggleOpenChat } = useOpenChat();
const embedSettings = useGetScriptAttributes();
const sessionId = useSessionId();
useEffect(() => {
if (embedSettings.openOnLoad === "on") {
toggleOpenChat(true);
}
}, [embedSettings.loaded]);
if (!embedSettings.loaded) return null;
return (
<>
<Head />
<div className="fixed bottom-0 right-0 mb-4 mr-4 z-50">
<div
style={{
width: isChatOpen ? 320 : "auto",
height: isChatOpen ? "93vh" : "auto",
}}
className={`${
isChatOpen
? "max-w-md px-4 py-2 bg-white rounded-lg border shadow-lg w-72"
: "w-16 h-16 rounded-full"
}`}
>
{isChatOpen && (
<ChatWindow
closeChat={() => toggleOpenChat(false)}
settings={embedSettings}
sessionId={sessionId}
/>
)}
<OpenButton
settings={embedSettings}
isOpen={isChatOpen}
toggleOpen={() => toggleOpenChat(true)}
/>
</div>
</div>
</>
);
}