This repository contains a simple chatbot widget that you can easily integrate into your webpage. The chatbot supports Markdown rendering, MathJax for mathematical formulas, and saves chat history locally in the browser.
- Markdown Support: Render chatbot responses in Markdown.
- MathJax Integration: Display mathematical formulas using
$...$or$$...$$. - Chat History: Automatically saves chat history in
localStorage. - Download Chat: Export chat history as a Markdown file.
- Customizable Backend: Connect to your own backend API for chatbot responses.
Open the index.html file (located in the root of this repository) in your browser, play with the chatbot, enjoy! 😊
Note: To access the backend API in the demo webpage, ensure you are connected to the SLAC VPN.
-
Include the Chatbot Widget: Add the following lines to your HTML file to include the built CSS and JavaScript files (from the
distfolder), and configure the chatbot:The css should go into the
<head>:<!-- Include the chatbot widget CSS --> <link rel="stylesheet" href="chatbot-widget.css" />
Then configuration and script in the
<body>:<!-- [Optional] Configure Chatbot Widget --> <script> window.ChatbotConfig = { apiUrl: "http://localhost:8000/ask", resetWarning: "Start a new conversation? This will erase current messages.", // set to falsy value to disable reset warning welcomeMessage: "👋 Hello! Ask me anything about our research!", downloadFilename: "chat-history.md", chatbotName: "🤖 Chatbot", }; </script> <!-- Load Chatbot Widget --> <script src="chatbot-widget.min.js"></script>
-
Run a Backend API: The chatbot expects a backend API as configured in
apiUrlthat accepts a POST request with the following JSON payload:{ "query": "User's message", "history": [ { "role": "user", "content": "Previous user message" }, { "role": "assistant", "content": "Previous bot response" } ], "embedding_model": "huggingface:thellert/physbert_cased", "llm_model": "ollama:llama3.1:latest", "max_documents": 5, "score_threshold": 0, "use_opensearch": false, "prompt": "You are a helpful assistant. Output answers in Markdown. Use $ and $$ to surround mathematical formulas. Try to tie your answer to the provided list of sources. Say you don't know if you can't. Be as concise as possible.", "files": [] }The API should return a response in the following format:
{ "answer": "Bot's response in Markdown format" } -
Open the HTML File: Open or serve the
index.htmlfile in your browser to view the chatbot in action. You can use theindex.htmlfile located in the root directory of this repository as a reference.
You can customize the chatbot widget by modifying the ChatbotConfig object or editing the source code. Below are the available customization options:
-
Backend API URL: Update the
apiUrlproperty to point to your backend API. Example:window.ChatbotConfig = { apiUrl: "https://your-backend-api.com/chat", };
-
Welcome Message: Set a custom welcome message by updating the
welcomeMessageproperty in theChatbotConfigobject. Example:window.ChatbotConfig = { welcomeMessage: "👋 Hi there! How can I assist you today?", };
-
Reset Warning: Enable or disable the reset confirmation dialog by setting the
resetWarningproperty. Example:window.ChatbotConfig = { resetWarning: "Are you sure you want to start a new conversation?", };
To disable the reset warning, set it to a falsy value (e.g.,
nullor""). -
Chatbot Name: Change the chatbot's name displayed in the header by modifying the
chatbotNameproperty. Example:window.ChatbotConfig = { chatbotName: "🤖 Research Assistant", };
-
Download Filename: Customize the filename for the exported chat history by modifying the
downloadFilenameproperty. Example:window.ChatbotConfig = { downloadFilename: "my-chat-history.md", };
-
Styling: Modify the chatbot's appearance by editing the Tailwind CSS classes in the source code (
chatbot-widget.js). For example, you can change the button colors, font sizes, or layout. -
MathJax Configuration: Adjust the MathJax settings for rendering mathematical formulas by editing the
MathJaxobject in theloadDependenciesfunction. -
Markdown Rendering: Customize how Markdown is rendered by modifying the
markedconfiguration in theloadDependenciesfunction.
Feel free to explore the source code (src/chatbot-widget.js) for additional customization
npm run serve:demo: Serves the demo application.npm run serve: Starts a development server using files from thesrcdirectory.npm run build: Builds the JavaScript and CSS files for production into thedistdirectory.
-
Install Dependencies:
npm install
-
Run in Development Mode:
Use the following command to start a development server that uses all files from the
srcdirectory:npm run serve
This will start a local development server and watch for changes in the source files.
-
Build the Project:
To build the JavaScript and CSS files for production, run:
npm run build
The output files will be generated in the
distdirectory. -
Run the Demo:
To run the demo, first ensure the project is built (using
npm run build), then start the demo server:npm run serve:demo
Open the demo in your browser to see the chatbot in action.
- Tailwind CSS: For styling the chatbot widget.
- MathJax: For rendering mathematical formulas.
- Marked.js: For Markdown rendering.
This project is licensed under the MIT License. Feel free to use and modify it as needed.