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 --><linkrel="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 warningwelcomeMessage: "👋 Hello! Ask me anything about our research!",downloadFilename: "chat-history.md",chatbotName: "🤖 Chatbot",};</script><!-- Load Chatbot Widget --><scriptsrc="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.