This is forked from Chatbot UI, an open source chat UI for AI models.
Please make sure you update the node.js to the latest version.
git clone https://github.com/SnapLogic/chatbot-ui.git
npm i
Create a .env.local file in the root of the repo with your pipeline endpoint and bearer token:
NEXT_PUBLIC_API_ENDPOINT=YOUR_ENDPOINT
NEXT_PUBLIC_BEARER_TOKEN=YOUR_TOKEN
There are two methods to run the application: using npm or Docker.
To run the app with npm, execute the following command in your terminal:
npm run dev
This will start the application.
Alternatively, you can run the app using Docker. Follow these steps:
![Screenshot 2023-12-19 at 12 04 05 PM](https://private-user-images.githubusercontent.com/89661340/291706120-cecf399e-8f90-4802-8d2a-3ca6ef8df645.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzOTM1NDksIm5iZiI6MTcyNDM5MzI0OSwicGF0aCI6Ii84OTY2MTM0MC8yOTE3MDYxMjAtY2VjZjM5OWUtOGY5MC00ODAyLThkMmEtM2NhNmVmOGRmNjQ1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDA2MDcyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRkYjIxNWI0YWFhNmI1YzQzNGViZDAxNDNhZmFjYWQ3Njg2ZWY2M2NhMDllZDM1Njk5ZWQzODU2NzgwZjIyYzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.IKqvvZ03SoDs9nLJjdqBm3VHXGeBC3XVh2ekA6GPhsk)
1. Create a docker image
Build a docker image by running the following command:
docker build .
2. Run the Docker Image
After you have successfully built the Docker image, you can run it using either its image ID or SHA256 digest.
docker run -p 3000:3000 {imageId/sha256}
Now you can run the chatbot at localhost:3000.
You should be able to start chatting. For better experience, please go to "Settings" -> "Theme" and select "light mode".
This interface allows users to personalize various aspects of their chatbot's appearance, including text elements and color schemes. Follow these steps to tailor your chatbot to your preferences.
![Screenshot 2023-12-04 at 4 01 16 PM](https://private-user-images.githubusercontent.com/89661340/287880326-02e81123-7401-4a9b-b3d4-3066e53fcae8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzOTM1NDksIm5iZiI6MTcyNDM5MzI0OSwicGF0aCI6Ii84OTY2MTM0MC8yODc4ODAzMjYtMDJlODExMjMtNzQwMS00YTliLWIzZDQtMzA2NmU1M2ZjYWU4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDA2MDcyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWVjZjZkMWJhNWM3YzQ3NjdmYzc0OGQ2ZjU4M2NmYzA5NTRlMWEwODk1NDBiNmRlYjhhODMzYzRjMGEwMGYzZTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.-b_xt12wxgLMGAo260kwLXteNamjz7e9AlSbR14KSng)
You can modify the following text elements:
- Chatbot Title
- Chatbot Name
To make these changes:
- Navigate to the root folder of your project.
- Open the file named
constants.config.js
. - Edit the values as shown in the example below:
const CONSTANTS = {
chatbotTitle: "Chatbot Title",
chatbotName: "Chatbot Name",
};
module.exports = CONSTANTS;
You can adjust the color schemes for:
- Chatbot Name
- Sidebar
- Search Bar
- Conversation Box
To customize the colors:
- Go to the root folder of your project.
- Open the file
tailwind.config.js
. - Locate the
theme
key and modify the color values under thecolors
andtextColor
sections as needed.
Here is an example:
// Additional code may be present above or below this snippet
theme: {
extend: {
colors: {
'sidebar': '#07224E',
'conversation': '#53709E',
'searchbar': '#141B38',
},
textColor: {
'primary': '#1C3194',
}
},
},
// Additional code may be present above or below this snippet