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/shuminCA/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:

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.

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 the colors and textColor 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