Merge pull request #195 from vikash1810/main

Added Bot Settings page and UI changes
OpenNyAI · Oct 15, 2024 · 1a1c04d · 1a1c04d
2 parents 08b4bc2 + a9496ea
commit 1a1c04d
Show file tree

Hide file tree

Showing 19 changed files with 882 additions and 170 deletions.
diff --git a/docs/assets/Add_New_Channel_Form.png b/docs/assets/Add_New_Channel_Form.png
diff --git a/docs/assets/Bot_Channel_Settings.png b/docs/assets/Bot_Channel_Settings.png
diff --git a/docs/assets/Bot_Creation_Form.png b/docs/assets/Bot_Creation_Form.png
diff --git a/docs/assets/Created_Bot.png b/docs/assets/Created_Bot.png
diff --git a/docs/assets/Created_Channel.png b/docs/assets/Created_Channel.png
diff --git a/docs/assets/Created_Channel_Active.png b/docs/assets/Created_Channel_Active.png
diff --git a/docs/assets/Edit_Bot_Settings.png b/docs/assets/Edit_Bot_Settings.png
diff --git a/docs/assets/Home_Page.png b/docs/assets/Home_Page.png
diff --git a/docs/building-with-jugalbandi/technical-guide/references/telegram.md b/docs/building-with-jugalbandi/technical-guide/references/telegram.md
@@ -4,45 +4,30 @@ title: Telegram
 ---
 ## Telegram Integration with JB Manager
 
-Telegram support is still under the development phase, but you can try it out using this guide.
-
 ### Steps to follow
 
-a. **Create a JB Manager Bot**:
-- Set up a bot with dummy WhatsApp credentials as described in the quickstart documentation.
-
-b. **Create a Telegram Bot**:
-- Use the *BotFather* chatbot on Telegram to create your bot.
-- Acquire the token provided by *BotFather*. This token will be used to set up the webhook.
-
-c. **Register the Telegram Channel**:
-- To register the channel for your Telegram-based JB Manager bot, send a POST request to the localhost port 8000 (the API server running locally). Use the route `/v2/bot/<botID>/channel` with the following body:
-
-  ```json
-  {
-    "name": "telegram",
-    "type": "telegram",
-    "url": "https://api.telegram.org/",
-    "app_id": "<app_id>",
-    "key": "<telegram token>",
-    "status": "active"
-  }
-  ```
-  `<botID>` and `<app_id>` can be extracted from the list of bots fetched using a GET request on `v1/bots` or `v2/`
+a. **Create a Telegram Bot**:
+
+- Use the *BotFather* chatbot on Telegram to create your bot
+- Acquire the token provided by *BotFather*. This token will be used to set up the webhook
+
+b. **Create a JB Manager Bot**:
+
+- Set up a bot as described in the quickstart documentation
+- Select type as `telegram` and appropriate details while creating the channel
+
+c. **Set-up the Webhook**:
 
-d. **Set Up the Webhook**:
 - Set the webhook by sending a POST request to `https://api.telegram.org/bot<token>/setWebhook` with the URL of the endpoint as the body under the `url` key. The format should be: `<tunnel_url>/v2/callback/telegram/<app_id>`.
 - Example using `curl`:
 
   ```bash
   curl -X POST "https://api.telegram.org/bot<token>/setWebhook" -d "url=<tunnel_url>/v2/callback/telegram/<app_id>"
   ```
 
-### Note: 
-
-- **Dummy WhatsApp Credentials**: Ensure you have the necessary dummy credentials set up as per the initial bot creation instructions in Quickstart guide.
-- **BotFather**: This is an official Telegram bot that helps you create and manage your Telegram bots. You can find it by searching for "BotFather" in the Telegram app.
-- **Webhook URL**: The `<tunnel_url>` should be the URL where your API is hosted. Ensure it is accessible from the internet for Telegram to send updates to your bot.
+### Note:
 
-   By following these steps, you can set up, integrate and test your Telegram-based JB Manager bot.
+- **BotFather**: This is an official Telegram bot that helps you create and manage your Telegram bots. You can find it by searching for "BotFather" in the Telegram app
+- **Webhook URL**: The `<tunnel_url>` should be the URL where your API is hosted. Ensure it is accessible from the internet for Telegram to send updates to your bot
 
+  By following these steps, you can set up, integrate and test your Telegram-based JB Manager bot.
diff --git a/docs/building-with-jugalbandi/technical-guide/tutorials/quickstart.md b/docs/building-with-jugalbandi/technical-guide/tutorials/quickstart.md
@@ -117,17 +117,18 @@ To start the JB Manager, you can use the following command with or without the `
 
 ### Bot Installation and Go Live
 
-1. Go to [JB Manager UI](http://localhost:4173) ![](../../../assets/quickstart-frontend.png)
-2. Click on install new bot and provide the required data to create your bot. ![](../../../assets/quickstart-botdetails.png) The detailed information about the fields are given below:
+1. Go to [JB Manager UI](http://localhost:4173) ![](../../../assets/Home_Page.png)
+2. Click on Add Project and provide the required data to create your bot. ![](../../../assets/Bot_Creation_Form.png) The detailed information about the fields are given below:
    1. **Name \[Mandatory]** is the name of the bot. It should be same as the name of class defined within below-mentioned bot code (fsm.py). For this example, use `CarWashDealerFSM`.
    2. **Code \[Mandatory]** is the fsm.py file python code. Copy the contents of [python file](../../../tutorials/car\_wash.py) and paste it.
    3. **version \[Mandatory]** - version of the bot. Put `1.0.0`.
    4. **required\_credentials \[Mandatory]** - Credentials required by the bot to access various external services. Enter the following: `AZURE_OPENAI_API_KEY,AZURE_OPENAI_API_VERSION,AZURE_OPENAI_API_ENDPOINT,FAST_MODEL,SLOW_MODEL` , so put these keys in this section seperated by comma.
-   5. Click on `Install` button.
-3. Once the bot is created, click on the **settings (⚙) icon** to enter the given credentials values and click save to save the credentials values. For this example, put the values of `AZURE_OPENAI_API_KEY`, `AZURE_OPENAI_API_VERSION`, `AZURE_OPENAI_API_ENDPOINT`, `FAST_MODEL` (typically, `gpt-3.5-turbo`) and `SLOW_MODEL` (typically, `gpt-4`). **Note: Remember to verify your model names. If you are using Azure OpenAI, this corresponds to Deployment Name and not model type** ![](../../../assets/quickstart-credentials.png)
-4. Then click on the **play (▶️) icon** to activate the bot by providing the whatsapp business phone number in `phone number` and whatsapp api key in the `whatsapp` field. ![](../../../assets/quickstart-botactivate.png)
-5. Once the above steps are completed, the bot status will be changed from **inactive** to **active**. ![](../../../assets/quickstart-activebot.png)
-6. Start a new shell session and start tunnel for port 8000 on your system
+   5. Click on `Save` button.
+3. Once the bot is created, click on the **settings (⚙) icon** to enter the given credentials values and click save to save the credentials values. For this example, put the values of `AZURE_OPENAI_API_KEY`, `AZURE_OPENAI_API_VERSION`, `AZURE_OPENAI_API_ENDPOINT`, `FAST_MODEL` (typically, `gpt-3.5-turbo`) and `SLOW_MODEL` (typically, `gpt-4`). **Note: Remember to verify your model names. If you are using Azure OpenAI, this corresponds to Deployment Name and not model type** ![](../../../assets/Edit_Bot_Settings.png)
+4. Then click on the **play (▶️) icon** to open the Channel Settings Page for the Bot, then click on Add Channel button ![](../../../assets/Bot_Channel_Settings.png)
+5. Fill in the Channel details and click on save ![](../../../assets/Add_New_Channel_Form.png)
+6. Toggle on the channel using the toggle switch at right hand side. This makes the channel active. To verify, go to home page by clicking `Home` icon on the left Navigation pane and you will see a `Pause` button next to the bot ![](../../../assets/Created_Channel_Active.png)
+7. Start a new shell session and start tunnel for port 8000 on your system
 
    - For **Loophole**, use the following command:
      ```bash
@@ -139,8 +140,8 @@ To start the JB Manager, you can use the following command with or without the `
      $ ngrok http 8000
      ```
 
-7. Copy the tunnel url from the shell (loophole example shown below). ![](../../../assets/quickstart-loophole-8000.png)
-8. Add this url to register the callback URL for Whatsapp service provider. Your callback url will look like this `<Tunnel URL>/v2/callback/pinnacle_whatsapp/<Whatsapp business account number>`.
+8. Copy the tunnel url from the shell (loophole example shown below). ![](../../../assets/quickstart-loophole-8000.png)
+9. Add this url to register the callback URL for Whatsapp service provider. Your callback url will look like this `<Tunnel URL>/v2/callback/pinnacle_whatsapp/<Whatsapp business account number>`.
 
     For this tutorial, we are using the shell script to add the callback URL using Whatsapp API host. Run the script on a new shell session with the appropriate values to register the callback URL.
 
@@ -160,13 +161,11 @@ To start the JB Manager, you can use the following command with or without the `
     --header 'Content-Type: application/json' \
     --data-raw "$BODY"
     ```
-9. Your bot is running. Send a `Hi` message to whatsapp business number to start conversation with the bot.
+10. Your bot is running. Send a `Hi` message to whatsapp business number to start conversation with the bot.
 
 ### Quickstart FAQs 
 
 1. #### Cannot install loophole on Apple Silicon-based Mac?
     Try setting up ngrok with a free tier subscription. Creating a single tunnel does not require any paid plan.
 2. #### Which OpenAI Model to use?
-    You can use any model just make sure it supports generating output in JSON mode.
-3. #### How to Integrate a Telegram Bot
-    The telegram integration documentation and frontend is still being worked on.
+    You can use any model just make sure it supports generating output in JSON mode.
diff --git a/frontend/src/components/confirmation-model/Confirmation-Model.css b/frontend/src/components/confirmation-model/Confirmation-Model.css
@@ -0,0 +1,54 @@
+.confirmation-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+
+  .confirmation-modal {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 300px;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .modal-actions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+  }
+
+  .confirm-btn {
+    background-color: #6a0dad; /* Purple accent */
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .confirm-btn:hover {
+    background-color: #4b0082;
+  }
+
+  .cancel-btn {
+    background-color: #e0e0e0;
+    color: #000;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .cancel-btn:hover {
+    background-color: #bdbdbd;
+  }
+
diff --git a/frontend/src/components/confirmation-model/Confirmation-Model.tsx b/frontend/src/components/confirmation-model/Confirmation-Model.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import './Confirmation-Model.css'; // Import CSS for the modal
+
+interface ConfirmationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  message: string;
+}
+
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({ isOpen, onClose, onConfirm, message }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="confirmation-modal-overlay">
+      <div className="confirmation-modal">
+        <p>{message}</p>
+        <div className="modal-actions">
+          <button className="confirm-btn" onClick={onConfirm}>Confirm</button>
+          <button className="cancel-btn" onClick={onClose}>Cancel</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmationModal;
diff --git a/frontend/src/components/navbar/navbar.tsx b/frontend/src/components/navbar/navbar.tsx
@@ -26,6 +26,12 @@ function Navbar() {
                                     <path fillRule="evenodd" clipRule="evenodd" d="M0 4C0 2.93913 0.421427 1.92172 1.17157 1.17157C1.92172 0.421427 2.93913 0 4 0H20C21.0609 0 22.0783 0.421427 22.8284 1.17157C23.5786 1.92172 24 2.93913 24 4V20C24 21.0609 23.5786 22.0783 22.8284 22.8284C22.0783 23.5786 21.0609 24 20 24H4C2.93913 24 1.92172 23.5786 1.17157 22.8284C0.421427 22.0783 0 21.0609 0 20V4ZM13.3333 6.66667C13.3333 6.31305 13.1929 5.97391 12.9428 5.72386C12.6928 5.47381 12.3536 5.33333 12 5.33333C11.6464 5.33333 11.3072 5.47381 11.0572 5.72386C10.8071 5.97391 10.6667 6.31305 10.6667 6.66667V17.3333C10.6667 17.687 10.8071 18.0261 11.0572 18.2761C11.3072 18.5262 11.6464 18.6667 12 18.6667C12.3536 18.6667 12.6928 18.5262 12.9428 18.2761C13.1929 18.0261 13.3333 17.687 13.3333 17.3333V6.66667ZM8 10.6667C8 10.313 7.85952 9.97391 7.60948 9.72386C7.35943 9.47381 7.02029 9.33333 6.66667 9.33333C6.31305 9.33333 5.97391 9.47381 5.72386 9.72386C5.47381 9.97391 5.33333 10.313 5.33333 10.6667V17.3333C5.33333 17.687 5.47381 18.0261 5.72386 18.2761C5.97391 18.5262 6.31305 18.6667 6.66667 18.6667C7.02029 18.6667 7.35943 18.5262 7.60948 18.2761C7.85952 18.0261 8 17.687 8 17.3333V10.6667ZM18.6667 14.6667C18.6667 14.313 18.5262 13.9739 18.2761 13.7239C18.0261 13.4738 17.687 13.3333 17.3333 13.3333C16.9797 13.3333 16.6406 13.4738 16.3905 13.7239C16.1405 13.9739 16 14.313 16 14.6667V17.3333C16 17.687 16.1405 18.0261 16.3905 18.2761C16.6406 18.5262 16.9797 18.6667 17.3333 18.6667C17.687 18.6667 18.0261 18.5262 18.2761 18.2761C18.5262 18.0261 18.6667 17.687 18.6667 17.3333V14.6667Z" />
                                 </svg>
                             </Link> */}
+                            <Link to="/settings" id='settingsNav'>
+                                <svg className='settings-icon' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 26 26" fill="none">
+                                    <path d="M13 8.5C10.4067 8.5 8.30435 10.5147 8.30435 13C8.30435 15.4853 10.4067 17.5 13 17.5C14.4075 17.5 15.6703 16.9066 16.5309 15.9666C17.2561 15.1745 17.6957 14.1365 17.6957 13C17.6957 12.5401 17.6236 12.0962 17.4899 11.6783C16.9007 9.838 15.1134 8.5 13 8.5ZM9.86957 13C9.86957 11.3431 11.2711 10 13 10C14.7289 10 16.1304 11.3431 16.1304 13C16.1304 14.6569 14.7289 16 13 16C11.2711 16 9.86957 14.6569 9.86957 13ZM21.0445 21.3947L19.2419 20.6364C18.7262 20.4197 18.1204 20.4514 17.633 20.7219C17.1457 20.9923 16.8348 21.4692 16.7729 22.0065L16.5561 23.8855C16.5115 24.2729 16.2181 24.5917 15.8231 24.6819C13.9665 25.106 12.0322 25.106 10.1756 24.6819C9.78062 24.5917 9.48727 24.2729 9.44258 23.8855L9.22618 22.0093C9.16262 21.473 8.83778 20.9976 8.3508 20.728C7.86383 20.4585 7.27253 20.4269 6.75853 20.6424L4.95552 21.4009C4.58207 21.558 4.14602 21.4718 3.86754 21.1858C2.57017 19.8536 1.60442 18.2561 1.04301 16.5136C0.922085 16.1383 1.0618 15.7307 1.3912 15.4976L2.9849 14.3703C3.43883 14.05 3.70693 13.5415 3.70693 13.0006C3.70693 12.4597 3.43883 11.9512 2.9843 11.6305L1.3916 10.5051C1.06172 10.272 0.921872 9.86375 1.04322 9.48812C1.60561 7.74728 2.57186 6.15157 3.86927 4.82108C4.14801 4.53522 4.58427 4.44935 4.95766 4.60685L6.75266 5.36398C7.26914 5.58162 7.86292 5.54875 8.35253 5.27409C8.84002 5.00258 9.16456 4.52521 9.22722 3.98787L9.44522 2.11011C9.49075 1.71797 9.79082 1.39697 10.1919 1.31131C11.1113 1.11498 12.0495 1.01065 13.0136 1C13.9545 1.01041 14.8916 1.11478 15.8099 1.31143C16.2108 1.39728 16.5106 1.71817 16.5561 2.11011L16.7742 3.98931C16.873 4.85214 17.6317 5.50566 18.5362 5.50657C18.7793 5.50694 19.0198 5.45832 19.2445 5.36288L21.0398 4.60562C21.4132 4.44812 21.8494 4.53399 22.1282 4.81984C23.4256 6.15034 24.3918 7.74605 24.9542 9.48689C25.0755 9.86227 24.9359 10.2702 24.6064 10.5034L23.0151 11.6297C22.5612 11.9499 22.287 12.4585 22.287 12.9994C22.287 13.5402 22.5612 14.0488 23.0161 14.3697L24.6088 15.4964C24.9384 15.7296 25.0781 16.1376 24.9568 16.513C24.3946 18.2536 23.4289 19.8491 22.1323 21.1799C21.8538 21.4657 21.4178 21.5518 21.0445 21.3947ZM15.3614 21.1965C15.6068 20.4684 16.1189 19.8288 16.8487 19.4238C17.7689 18.9132 18.8994 18.8546 19.8704 19.2626L21.2728 19.8526C22.1732 18.8537 22.8706 17.7013 23.3285 16.4551L22.0882 15.5777L22.0872 15.577C21.2414 14.9799 20.7217 14.0276 20.7217 12.9994C20.7217 11.9718 21.2408 11.0195 22.0858 10.4227L22.0872 10.4217L23.3259 9.54496C22.8679 8.29874 22.1702 7.1463 21.2694 6.14764L19.8788 6.73419L19.8764 6.73521C19.4533 6.91457 18.9971 7.00716 18.5345 7.00657C16.8311 7.00447 15.4048 5.77425 15.2185 4.15459L15.2183 4.15285L15.0489 2.69298C14.3776 2.57322 13.6967 2.50866 13.0136 2.50011C12.3102 2.50885 11.6248 2.57361 10.9524 2.69322L10.7828 4.15446C10.6652 5.16266 10.0567 6.05902 9.14112 6.5698C8.22022 7.08554 7.09864 7.14837 6.12211 6.73688L4.72806 6.14887C3.82729 7.14745 3.12965 8.29977 2.67161 9.54587L3.91319 10.4232C4.76816 11.0268 5.27214 11.9836 5.27214 13.0006C5.27214 14.0172 4.76844 14.9742 3.91378 15.5776L2.67125 16.4565C3.12872 17.7044 3.82626 18.8584 4.72736 19.8587L6.13122 19.2681C7.10168 18.8613 8.21641 18.9214 9.13361 19.4291C10.0511 19.9369 10.6619 20.8319 10.7814 21.84L10.7819 21.8445L10.9508 23.3087C12.3036 23.5638 13.6951 23.5638 15.0479 23.3087L15.2171 21.8417C15.2425 21.6217 15.291 21.4054 15.3614 21.1965Z" fill="#B3B3B3" stroke="#666666"/>
+                                </svg>
+                            </Link>
+
                         </>
                     {/* } */}
                 </div>