Initial commit

app.js

@@ -0,0 +1,13 @@
+(function () {
+    [...document.querySelectorAll(".control")].forEach(button => {
+        button.addEventListener("click", function() {
+            document.querySelector(".active-btn").classList.remove("active-btn");
+            this.classList.add("active-btn");
+            document.querySelector(".active").classList.remove("active");
+            document.getElementById(button.dataset.id).classList.add("active");
+        })
+    });
+    document.querySelector(".theme-btn").addEventListener("click", () => {
+        document.body.classList.toggle("light-mode");
+    })
+})();

docs/gallery.md

@@ -0,0 +1,44 @@
+# Gallery
+
+## Botpop Intro
+
+![ScreenShot](../static/img/botPopup.PNG)
+
+## Text
+
+![ScreenShot](../static/img/chats.png)
+
+## Buttons
+
+![ScreenShot](../static/img/ui_1.PNG)
+
+## Images
+
+![ScreenShot](../static/img/ui_2.PNG)
+
+## Videos
+
+![ScreenShot](../static/img/video_msg.PNG)
+
+## Quick Replies
+
+![ScreenShot](../static/img/cardsUi_3.png)
+
+## PDF Attachment
+
+![ScreenShot](../static/img/pdf_attachment.PNG)
+
+## Charts
+
+![ScreenShot](../static/img/charts_1.png) 
+![ScreenShot](../static/img/charts_2.png) 
+
+## Collapsible
+![ScreenShot](../static/img/collapse_1.png) 
+![ScreenShot](../static/img/collapse_2.png) 
+
+## Card Carousels
+
+![ScreenShot](../static/img/cardsUi.png) 
+![ScreenShot](../static/img/cardsUi_2.png) 
+

docs/instructions.md

@@ -0,0 +1,19 @@
+# Instructions
+
+*Make sure you have set up the Rasa on your system or server.*
+
+## Integration
+
+- Step 1: Since this Chat UI communicates with the Rasa server using `rest` channel, make sure you have added `rest` channel in the `credentials.yml` file
+- Once you have developed your bot and you are ready to integrate the bot with the UI, you can start the Rasa server using the below command
+  ```
+  rasa run -m models --enable-api --cors "*" --debug
+  ```
+- If you have custom actions, you can start the action server using the below command
+    ```
+    rasa run actions --cors "*" --debug
+    ```
+- If you're running the Rasa server on a remote server like an EC2 instance, it is necessary to modify the [constants.js](https://github.com/JiteshGaikwad/Chatbot-Widget/blob/main/static/js/constants.js#L2) and replace the localhost with the public IP address of the server.
+
+- Once you have you Rasa server up and running, you can test the bot by running the `index.html` file in the browser.
+

docs/modifications.md

@@ -0,0 +1,35 @@
+## Modifying the UI 
+
+If you want to add the bot popup intro, you can edit the below line of code in `index.html`
+
+```W
+    <!-- Bot pop-up intro -->
+    <div class="tap-target" data-target="profile_div">
+        <div class="tap-target-content">
+            <h5 class="white-text">Hey there!</h5>
+            <p class="white-text">I am Sara, your Rasa assistant?</p>
+        </div>
+    </div>
+```
+
+If you want to modify the UI of the chatbot widget, you can edit the respective classes in the [`style.css`](../static/css/style.css)
+
+
+| Element      | Class        |
+|--------------|--------------|
+| Chat Window  | .widget      |
+| Chat Header  | .chat_header |
+| Chats        | .chats       |
+| Bot Message  | .botMsg      |
+| User Message | .userMsg     |
+| Keypad       | .keypad      | 
+| Buttons      | .suggestions | 
+| Cards        | .cards       |
+| Quick Replies| .quickReplies|
+| Collapsible  | .collapsible |
+| Video        | .video-container |
+| Image        | .imgcard     |
+| Dropdown     | .dropDownMsg |
+| PDF attachment     | .pdf_attachment  |
+| Bot pop-up intro | .tap-target |
+