### Run RAG Chatbot Application with Docker Compose

Source: https://github.com/quangnguyen3499/llm-article-analyzer/blob/main/README.md

Commands to start the RAG chatbot application using Docker Compose. This includes starting the database service and then building and starting the application service.

```bash
docker-compose up -d db
docker-compose up --build app
```

--------------------------------

### Chatbot JavaScript Functionality

Source: https://github.com/quangnguyen3499/llm-article-analyzer/blob/main/templates/chatbot.html

Handles sending user messages, displaying them in the chat, and receiving/displaying bot responses. It uses fetch API for asynchronous communication with the backend.

```javascript
const messagesList = document.querySelector(".messages-list");
const messageForm = document.querySelector(".message-form");
const messageInput = document.querySelector(".message-input");

// upon submission of send button...
messageForm.addEventListener("submit", (event) => {
  event.preventDefault(); // prevent refresh of page on click
  const message = messageInput.value.trim();
  if (message.length === 0) {
    return;
  }

  const messageItem = document.createElement("li");
  messageItem.classList.add("message", "sent");
  messageItem.innerHTML = ` <div class="message-text">
        <div class="message-sender">
          <b>You</b>
        </div>
        <div class="message-content"> ${message} </div>
      </div>`;
  messagesList.appendChild(messageItem);

  //clear from input box
  messageInput.value = "";

  //send data to backend
  fetch("", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: new URLSearchParams({
      csrfmiddlewaretoken: document.querySelector(
        '[name=csrfmiddlewaretoken]'
      ).value,
      message: message,
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      const response = data.response;
      const messageItem = document.createElement("li");
      messageItem.classList.add("message", "received");
      messageItem.innerHTML = ` <div class="message-text">
          <div class="message-sender">
            <i class="fas fa-robot"></i>
            <b>Bot</b>
          </div>
          <div class="message-content"> ${response} </div>
        </div> `;
      messagesList.appendChild(messageItem);
    });
});
```

--------------------------------

### Chatbot CSS Styling

Source: https://github.com/quangnguyen3499/llm-article-analyzer/blob/main/templates/chatbot.html

Provides styling for the chatbot interface, including layout, message display, input fields, and send button. It uses flexbox for layout management.

```css
body, html { height: 100%; }
.messages-box { flex: 1; overflow-y: auto; }
.messages-list { padding-left: 0; }
.message { margin-bottom: 15px; list-style: none; }
.message-text { padding: 10px; border-radius: 5px; }
.sent { background-color: #dcf8c6; align-self: flex-end; }
.received { background-color: #f1f0f0; align-self: flex-start; }
.message-form { display: flex; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px; background-color: #f8f9fa; }
.message-input { flex: 1; border-radius: 0; border-right: none; }
.btn-send { border-radius: 0; }
.chat-container { height: 100%; display: flex; flex-direction: column; }
```

--------------------------------

### Django Template Structure

Source: https://github.com/quangnguyen3499/llm-article-analyzer/blob/main/templates/chatbot.html

A basic Django template that extends a base template and includes a block for CSS styles and content. It also includes a placeholder for CSRF token and a send button.

```django
{% extends 'base.html' %} {% block styles %}  body, html { height: 100%; } .messages-box { flex: 1; overflow-y: auto; } .messages-list { padding-left: 0; } .message { margin-bottom: 15px; list-style: none; } .message-text { padding: 10px; border-radius: 5px; } .sent { background-color: #dcf8c6; align-self: flex-end; } .received { background-color: #f1f0f0; align-self: flex-start; } .message-form { display: flex; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px; background-color: #f8f9fa; } .message-input { flex: 1; border-radius: 0; border-right: none; } .btn-send { border-radius: 0; } .chat-container { height: 100%; display: flex; flex-direction: column; %} {% endblock %} {% block content %}  LLM Article Chatbot  *   **Bot**      Hi, I am your a Chatbot, you can ask me anything about LLM's Future of AI report.      {%csrf_token%}  Send {% endblock %}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.