diff --git a/.env b/.env
index d5d0cb4..0628964 100644
--- a/.env
+++ b/.env
@@ -1 +1 @@
-REACT_APP_API_URL=https://us-east1-chat-agents.cloudfunctions.net/bot-backend
+REACT_APP_API_URL=http://localhost:3000
diff --git a/README.md b/README.md
index 843096d..ebc8625 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,55 @@
-## Textbase Bot UI repo
+# Textbase Bot UI
+
+## Project Overview
+This repository contains the user interface (UI) for the Textbase Bot project. Textbase Bot is an innovative chatbot that can understand and respond to text-based queries. The UI serves as the frontend for interacting with the bot.
+
+## Setup Instructions
+
+### Prerequisites
+- Node.js installed on your local machine.
+
+### Installation
+1. Clone this repository to your local machine using the following command:
+   ```shell
+   git clone git@github.com:alex8430/textbase-bot.git
+
+## Setup Instructions
+
+### Prerequisites
+- Node.js installed on your local machine.
+
+### Installation
+
+1. **Install Dependency:**
+   ```shell
+   cd textbase-bot
+   npm install
+
+2. **Running Locally:**
+   ```shell
+   npm start 
+
+### Chat Bot Backend
+
+1. Clone the backend repository to your local machine using the following command:
+   ```sell
+   git clone git@github.com:alex8430/chat-bot-backend.git
+2. pass backend endpoint in query params 
+   ```sell
+   ?API_URL=http://localhost:<port>
+
+## Screenshots
+
+**Screenshot 1:**
+![Screenshot 1](./public/demo.png)
+*Walkthrough of UI*
+1. There is ... setting button when we click on that is dropdown open and there is a list of model that we get from backend we can switch our llm model
+2. Mic button to start voice recognition to give command to bot.
+3. Bot Voice. allow bot to speak it is a toggle button
+
+
+## Demo Video
+
+[Watch the Textbase Bot UI in action on YouTube](https://www.youtube.com/watch?v=gQNaDvKSldU)
+
 
-### How to setup locally
-1. `npm i`
-2. `npm start`
-3. Pass in query params `?API_URL=http://localhost:<port>` - This is the url of python backend
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..9378b19
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+      SpeechRecognition: typeof SpeechRecognition;
+      webkitSpeechRecognition: typeof SpeechRecognition;
+    }
+  }
diff --git a/package-lock.json b/package-lock.json
index 3dc532b..763c248 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "react-helmet-async": "^1.3.0",
         "react-markdown": "^8.0.7",
         "react-scripts": "5.0.1",
+        "react-speech-kit": "^3.0.1",
         "remark-gfm": "^3.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -209,22 +210,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/core/node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/core/node_modules/@babel/helper-validator-option": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
@@ -259,17 +244,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/core/node_modules/@babel/parser": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
-      "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==",
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@babel/core/node_modules/@babel/template": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
@@ -303,19 +277,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/core/node_modules/@babel/types": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
-      "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/core/node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -407,35 +368,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-annotate-as-pure/node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-annotate-as-pure/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-annotate-as-pure/node_modules/@babel/types": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
-      "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-create-class-features-plugin": {
       "version": "7.22.11",
       "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.11.tgz",
@@ -550,22 +482,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/highlight": {
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
@@ -579,17 +495,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/parser": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
-      "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==",
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/template": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
@@ -603,19 +508,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/types": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
-      "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -632,6 +524,33 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.22.14",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.14.tgz",
+      "integrity": "sha512-1KucTHgOvaw/LzCVrEOAyXkr9rQlp0A1HiHRYnSUE9dmb8PvPW7o5sscg+5169r54n3vGlbx6GevTE/Iw/P3AQ==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
       "version": "7.21.11",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
@@ -680,6 +599,24 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
       "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
+    "node_modules/@babel/types": {
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
+      "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@csstools/normalize.css": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
+      "integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
+    },
     "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.11",
       "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.11.tgz",
@@ -1118,22 +1055,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@svgr/webpack/node_modules/@babel/helper-validator-option": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
@@ -1168,17 +1089,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/parser": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
-      "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==",
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@svgr/webpack/node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz",
@@ -2379,19 +2289,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/types": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
-      "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@svgr/webpack/node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
@@ -3768,174 +3665,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
-      "integrity": "sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/@babel/code-frame": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-      "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/highlight": "^7.22.10",
-        "chalk": "^2.4.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/@babel/code-frame/node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "peer": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/@babel/highlight": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
-      "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/@babel/highlight/node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/@types/aria-query": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
-      "integrity": "sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==",
-      "peer": true
-    },
-    "node_modules/@testing-library/dom/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/chalk/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/chalk/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "peer": true
-    },
-    "node_modules/@testing-library/dom/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/lz-string": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
-      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-      "peer": true,
-      "bin": {
-        "lz-string": "bin/bin.js"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4047,14 +3776,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@testing-library/react/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@testing-library/react/node_modules/@babel/highlight": {
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
@@ -4178,6 +3899,62 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
+      "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
+      "integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.1.tgz",
+      "integrity": "sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==",
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/eslint": {
+      "version": "8.44.2",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.2.tgz",
+      "integrity": "sha512-sdPRb9K6iL5XZOmBubg8yiFp5yS/JdUDQsq5e6h95km91MCYMuvp7mh1fjPEYUhvHepKpZOjnEaMBR4PxjWDzg==",
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
+    },
     "node_modules/@types/hast": {
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.5.tgz",
@@ -4186,6 +3963,24 @@
         "@types/unist": "^2"
       }
     },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ=="
+    },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
+      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g=="
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
     "node_modules/@types/jest": {
       "version": "27.5.2",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.2.tgz",
@@ -4195,6 +3990,11 @@
         "pretty-format": "^27.0.0"
       }
     },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
+      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
+    },
     "node_modules/@types/mdast": {
       "version": "3.0.12",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.12.tgz",
@@ -4203,11 +4003,36 @@
         "@types/unist": "^2"
       }
     },
+    "node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
+    },
+    "node_modules/@types/ms": {
+      "version": "0.7.31",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
+      "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
+    },
     "node_modules/@types/node": {
       "version": "16.18.46",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.46.tgz",
       "integrity": "sha512-Mnq3O9Xz52exs3mlxMcQuA7/9VFe/dXcrgAyfjLkABIqxXKOgBRjyazTxUbjsxDa4BP7hhPliyjVTP9RDP14xg=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "node_modules/@types/qs": {
+      "version": "6.9.8",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.8.tgz",
+      "integrity": "sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg=="
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
+    },
     "node_modules/@types/react": {
       "version": "18.2.21",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz",
@@ -4235,6 +4060,20 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+    },
+    "node_modules/@types/send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.9",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz",
@@ -4248,6 +4087,11 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.7.tgz",
       "integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g=="
     },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
+      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "license": "BSD-3-Clause"
@@ -4926,22 +4770,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/babel-jest/node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/babel-jest/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/babel-jest/node_modules/@babel/highlight": {
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
@@ -4968,17 +4796,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/babel-jest/node_modules/@babel/parser": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
-      "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==",
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/babel-jest/node_modules/@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
@@ -5127,19 +4944,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/babel-jest/node_modules/@babel/types": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
-      "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/babel-jest/node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -5215,14 +5019,6 @@
         "@types/babel__traverse": "*"
       }
     },
-    "node_modules/babel-jest/node_modules/@types/babel__traverse": {
-      "version": "7.20.1",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.1.tgz",
-      "integrity": "sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==",
-      "dependencies": {
-        "@babel/types": "^7.20.7"
-      }
-    },
     "node_modules/babel-jest/node_modules/@types/graceful-fs": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
@@ -5231,11 +5027,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/babel-jest/node_modules/@types/istanbul-lib-coverage": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
-      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g=="
-    },
     "node_modules/babel-jest/node_modules/@types/istanbul-reports": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
@@ -5766,11 +5557,6 @@
         "webpack": ">=2"
       }
     },
-    "node_modules/babel-loader/node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
-    },
     "node_modules/babel-loader/node_modules/find-cache-dir": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
@@ -6098,22 +5884,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/babel-preset-react-app/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/babel-preset-react-app/node_modules/@babel/helper-validator-option": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
@@ -6148,17 +5918,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/parser": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
-      "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==",
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/babel-preset-react-app/node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz",
@@ -7540,24 +7299,11 @@
     "node_modules/babel-preset-react-app/node_modules/@babel/template": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-      "dependencies": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/parser": "^7.22.5",
-        "@babel/types": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/babel-preset-react-app/node_modules/@babel/types": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
-      "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
+      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/code-frame": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -8369,11 +8115,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
@@ -9487,99 +9228,6 @@
         "eslint": "^7.5.0 || ^8.0.0"
       }
     },
-    "node_modules/eslint-config-react-app/node_modules/@babel/helper-module-imports": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
-      "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/types": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/eslint-config-react-app/node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "peer": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/eslint-config-react-app/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "peer": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/eslint-config-react-app/node_modules/@babel/plugin-syntax-flow": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.22.5.tgz",
-      "integrity": "sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/eslint-config-react-app/node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz",
-      "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/eslint-config-react-app/node_modules/@babel/plugin-transform-react-jsx": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.5.tgz",
-      "integrity": "sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-module-imports": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/plugin-syntax-jsx": "^7.22.5",
-        "@babel/types": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/eslint-config-react-app/node_modules/@babel/types": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
-      "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/eslint-config-react-app/node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -9658,11 +9306,6 @@
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz",
       "integrity": "sha512-0xd7qez0AQ+MbHatZTlI1gu5vkG8r7MYRUJAHPAHJBmGLs16zpkrpAVLvjQKQOqaXPDUBwOiJzNc00znHSCVBw=="
     },
-    "node_modules/eslint-config-react-app/node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
-    },
     "node_modules/eslint-config-react-app/node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -11611,20 +11254,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/eslint-webpack-plugin/node_modules/@types/eslint": {
-      "version": "8.44.2",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.2.tgz",
-      "integrity": "sha512-sdPRb9K6iL5XZOmBubg8yiFp5yS/JdUDQsq5e6h95km91MCYMuvp7mh1fjPEYUhvHepKpZOjnEaMBR4PxjWDzg==",
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/eslint-webpack-plugin/node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
-    },
     "node_modules/eslint-webpack-plugin/node_modules/ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
@@ -13567,11 +13196,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/jest-resolve/node_modules/@types/istanbul-lib-coverage": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
-      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g=="
-    },
     "node_modules/jest-resolve/node_modules/@types/istanbul-reports": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
@@ -13967,14 +13591,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/jest-watch-typeahead/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/jest-watch-typeahead/node_modules/@babel/highlight": {
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
@@ -14114,11 +13730,6 @@
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
       "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA=="
     },
-    "node_modules/jest-watch-typeahead/node_modules/@types/istanbul-lib-coverage": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
-      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g=="
-    },
     "node_modules/jest-watch-typeahead/node_modules/@types/istanbul-reports": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
@@ -14597,22 +14208,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/jest/node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/jest/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/jest/node_modules/@babel/highlight": {
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
@@ -14682,17 +14277,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/jest/node_modules/@babel/parser": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
-      "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==",
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/jest/node_modules/@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
@@ -14875,19 +14459,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/jest/node_modules/@babel/types": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
-      "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/jest/node_modules/@bcoe/v8-coverage": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
@@ -15220,14 +14791,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/jest/node_modules/@types/babel__traverse": {
-      "version": "7.20.1",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.1.tgz",
-      "integrity": "sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==",
-      "dependencies": {
-        "@babel/types": "^7.20.7"
-      }
-    },
     "node_modules/jest/node_modules/@types/graceful-fs": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
@@ -15236,11 +14799,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/jest/node_modules/@types/istanbul-lib-coverage": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
-      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g=="
-    },
     "node_modules/jest/node_modules/@types/istanbul-reports": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
@@ -18523,11 +18081,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
-    },
     "node_modules/mini-css-extract-plugin/node_modules/ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
@@ -18933,14 +18486,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/postcss-loader/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/postcss-loader/node_modules/@babel/highlight": {
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
@@ -20294,14 +19839,6 @@
         "node": ">=0.8.0"
       }
     },
-    "node_modules/react-dev-utils/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/react-dev-utils/node_modules/@babel/highlight": {
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
@@ -20368,11 +19905,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/react-dev-utils/node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
-    },
     "node_modules/react-dev-utils/node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -21247,11 +20779,6 @@
         "react": ">=16"
       }
     },
-    "node_modules/react-markdown/node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
-    },
     "node_modules/react-markdown/node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -21375,6 +20902,15 @@
         "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-speech-kit": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-speech-kit/-/react-speech-kit-3.0.1.tgz",
+      "integrity": "sha512-MXNOciISanhmnxpHJkBOev3M3NPDpW1T7nTc/eGw5pO9cXpoUccRxZkmr/IlpTPbPEneDNeTmbwri/YweyctZg==",
+      "peerDependencies": {
+        "prop-types": "^15.7.2",
+        "react": "^16.8.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "license": "MIT",
@@ -22332,6 +21868,11 @@
       "version": "2.1.2",
       "license": "MIT"
     },
+    "node_modules/sanitize.css": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
+      "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -22402,11 +21943,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/schema-utils/node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
-    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "license": "MIT"
@@ -24025,11 +23561,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
-    },
     "node_modules/webpack-dev-server/node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -25225,11 +24756,6 @@
         "@types/estree": "*"
       }
     },
-    "node_modules/webpack/node_modules/@types/estree": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
-      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
-    },
     "node_modules/webpack/node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -25793,22 +25319,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/workbox-webpack-plugin/node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/workbox-webpack-plugin/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/workbox-webpack-plugin/node_modules/@babel/helper-validator-option": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
@@ -25843,17 +25353,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/workbox-webpack-plugin/node_modules/@babel/parser": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
-      "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==",
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/workbox-webpack-plugin/node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz",
@@ -26946,19 +26445,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/workbox-webpack-plugin/node_modules/@babel/types": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
-      "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/workbox-webpack-plugin/node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -27091,20 +26577,6 @@
         "string.prototype.matchall": "^4.0.6"
       }
     },
-    "node_modules/workbox-webpack-plugin/node_modules/@types/babel__core": {
-      "version": "7.20.1",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz",
-      "integrity": "sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
     "node_modules/workbox-webpack-plugin/node_modules/@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
diff --git a/package.json b/package.json
index 6269f05..57455b0 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "react-helmet-async": "^1.3.0",
     "react-markdown": "^8.0.7",
     "react-scripts": "5.0.1",
+    "react-speech-kit": "^3.0.1",
     "remark-gfm": "^3.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
diff --git a/public/demo.png b/public/demo.png
new file mode 100644
index 0000000..54a821a
Binary files /dev/null and b/public/demo.png differ
diff --git a/src/App.tsx b/src/App.tsx
index 50f3a41..0a71123 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,141 +1,123 @@
-import { useEffect, useState } from 'react';
-import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { useEffect, useRef, useState } from 'react';
+import {Helmet, HelmetProvider} from 'react-helmet-async';
 import './App.css';
 import InputBar from './components/inputBar';
 import MessageBox from './components/messageBox';
 import { IContent, IMessage } from './types/message';
 import Header from './components/header';
-import { botDetailsV2, sendMessage } from './actions/sendMessage';
+import {  botDetailsV2, sendMessageV2 } from './actions/sendMessage';
 import { getAPIURL } from './helpers';
 
-// function generateRandomMessage(n:number): IMessage[]{
-//   const messages = []
-//   for(let i=0; i<n; i++){
-//     messages.push({
-//       role: i%2 === 0 ? 'user': 'assistant',
-//       content: [
-//         {
-//           'data_type':'string',
-//           'value': "How are you?How are you?How are you?How are you?How are you?How are you?How are you?How are you?How are you?How are you?"
-//         }
-//       ]
-//     })
-//   }
-
-//   return messages
-// }
+export interface BotVoice {
+  lang: string;
+  source: string;
+  allowToSpeak: boolean;
+  // ...
+}
 
 function App() {
   const [botState, setBotState] = useState({});
   const [messages, setMessages] = useState<IMessage[]>([]);
-  const [botName, setBotName] = useState('');
+  const [botName, setBotName] = useState('bot')
+  const [username, setUsername] = useState('zero')
   const [botDetailsLoading, setBotDetailsLoading] = useState(false);
-  const [botId, setBotId] = useState<number | null>(null);
-  const [botStatus, setBotStatus] = useState('');
+  const [botId, setBotId] = useState<number | null>(0)
+  const [botStatus, setBotStatus] = useState('')
   const [fetching, setFetching] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [botError, setBotError] = useState<string | null>(null);
-  const [botInfo, setBotInfo] = useState('Start Conversation with bot');
+  const [botInfo, setBotInfo] = useState('Start Conversation with bot')
+  const [botVoice, setBotVoice] = useState<BotVoice>({"lang":"Salli","source":"ttsmp3","allowToSpeak":false});
+  const [botAudioUrl, setBotAudioUrl] = useState<string | null>(null);
+  
+  const botVoiceRef = useRef<BotVoice>({"lang":"Salli","source":"ttsmp3","allowToSpeak":false});
 
-  useEffect(() => {
-    const path = window.location.pathname;
-    const pathParts = path.split('/');
-    const { url, devMode } = getAPIURL();
-    if (pathParts.length === 3) {
-      const userName = pathParts[1];
-      const botName = pathParts[2];
-      if (devMode === 'prod') {
-        setBotDetailsLoading(true);
-        botDetailsV2(url, botName, userName)
-          .then((resp: any) => {
-            setBotDetailsLoading(false);
-            if (resp.data) {
-              if (resp.data.data) {
-                setBotName(resp.data.data.name);
-                setBotInfo(
-                  `Start Conversation with bot - ${resp.data.data.name}`,
-                );
-                setBotStatus(resp.data.data.state);
-                setBotId(resp.data.data.id);
-              } else {
-                setBotError(resp.data.error);
-                setBotStatus('INDETERMINATE');
-              }
-            } else {
-              setBotError('Failed to fetch bot details');
-              setBotStatus('INDETERMINATE');
-            }
-          })
-          .catch((e: Error) => {
-            setBotDetailsLoading(false);
-            setBotError(e.message);
-            setBotStatus('INDETERMINATE');
-          });
-      } else {
-        setBotName('Local Test');
-      }
-    } else if (devMode === 'local') {
-      setBotId(123);
-    } else {
+useEffect(() => {
+  botVoiceRef.current = botVoice;
+}, [botVoice]);
+
+  useEffect(()=>{
+    const {url, devMode} = getAPIURL()
+    if(devMode === 'prod'){
+      setBotDetailsLoading(true);
+      botDetailsV2(url,botName, username).then((resp: any)=>{
+        setBotDetailsLoading(false);
+        if(resp.data){
+            setBotName(resp.data.name)
+            setBotInfo(`Start Conversation with bot - ${resp.data.name}`)
+            setBotStatus(resp.data.state);
+            setBotId(resp.data.id);
+        }else{
+          setBotError('Failed to fetch bot details')
+          setBotStatus('INDETERMINATE');
+        }
+      }).catch((e: Error)=>{
+        setBotDetailsLoading(false);
+        setBotError(e.message)
+        setBotStatus('INDETERMINATE');
+      })
+    }else if(devMode === 'local'){
+      setBotId(123)
+    }else{
       // Show Error
       setBotError('Wrong URL');
     }
-  }, []);
+  }, [])
 
-  const onMessage = (message: IContent) => {
-    if (!botId) {
-      return;
+  const onMessage = (message: IContent)=>{
+    const currentBotVoice = botVoiceRef.current;
+    console.log(message);
+    console.log(botId);
+    if(botId==null && botId!=0){
+      return
     }
+    console.log("test");
     const userMessage: IMessage = {
       role: 'user',
-      content: [message],
-    };
+      content: [message]
+    }
 
     messages.push(userMessage);
-    setMessages([...messages]);
-
-    const { url, devMode } = getAPIURL();
+    setMessages([...messages])
 
+    const {url, devMode} = getAPIURL()
+    
     setFetching(true);
     setError(null);
-
-    sendMessage(url, messages, botState, botId, devMode)
-      .then((resp: any) => {
-        console.log(resp);
-        setFetching(false);
-        if (resp.data.error) {
-          setError(resp.data.error);
-        } else {
-          if (devMode === 'local') {
-            const newMessage: IMessage = {
-              role: 'assistant',
-              content: resp.data.new_message,
-            };
-            setMessages([...messages, newMessage]);
-          } else {
-            const newMessage: IMessage = {
-              role: 'assistant',
-              content: resp.data.data.new_message,
-            };
-            setMessages([...messages, newMessage]);
+    sendMessageV2(url, messages, botState, botName,currentBotVoice, username,devMode).then((resp: any)=>{
+      console.log(resp)
+      setFetching(false)
+      if(resp.data.error){
+        setError(resp.data.error)
+      }else{
+          const newMessage: IMessage = {
+            role: 'assistant',
+            content: resp.data.new_message
           }
+          console.log("message: "+newMessage.content[0].value);
+          // speak({ text: newMessage.content[0].value})
+          if (resp.data.new_message[0].botAudio && resp.data.new_message[0].botAudio.URL) {
+            const audioUrl = resp.data.new_message[0].botAudio.URL;
+            setBotAudioUrl(audioUrl);
+          }
+          setMessages([...messages, newMessage])
         }
-      })
-      .catch((error: Error) => {
-        setError(error.message);
-        setFetching(false);
-      });
-  };
+    }).catch((error: Error)=>{
+      setError(error.message);
+      setFetching(false)
+    })
+  }
 
-  const restart = () => {
-    setMessages([]);
+  const restart = ()=>{
+    setMessages([])
     setError(null);
-    setBotState({});
-  };
+    setBotState({})
+  }
 
   return (
-    <div className="flex justify-center bg-gradient-to-r from-amber-500 to-pink-500">
-      {botName && botId && (
+    <div className='flex justify-center bg-gradient-to-r from-amber-500 to-pink-500'>
+      {botName && botId &&
+      
         <HelmetProvider>
           <Helmet>
             <title>Bot - {botName}</title>
@@ -143,26 +125,14 @@ function App() {
             <link rel="icon" href={`/favicons/${botId % 5}.ico`} />
           </Helmet>
         </HelmetProvider>
-      )}
-      <div className="w-full md:max-w-screen-md h-screen py-10 border-[#141414] rounded-2xl justify-between flex flex-col mb-2">
-        <Header
-          botName={botName}
-          status={botStatus}
-          restart={restart}
-          error={botError}
-          botId={botId}
-          loading={botDetailsLoading}
-        />
-        <MessageBox
-          messages={messages}
-          loading={fetching}
-          error={error}
-          botInfoMessage={botInfo}
-        />
-        <InputBar onMessage={onMessage} botName={botName} />
+      }
+      <div className='w-full md:max-w-screen-md h-screen py-10 border-[#141414] rounded-2xl justify-between flex flex-col mb-2'>
+        <Header updateBotName={setBotName} updateBotId={setBotId} botName={botName} status={botStatus} restart={restart} error={botError} botId={botId} loading={botDetailsLoading} botAudioUrl={botAudioUrl} setBotAudioUrl={setBotAudioUrl} setBotVoice={setBotVoice} botVoice={botVoice}/>
+        <MessageBox messages={messages} loading={fetching} error={error} botInfoMessage={botInfo} />
+        <InputBar onMessage={onMessage} botName={botName} botVoice={botVoice} />
       </div>
     </div>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/actions/sendMessage.ts b/src/actions/sendMessage.ts
index 8022066..3bcefe0 100644
--- a/src/actions/sendMessage.ts
+++ b/src/actions/sendMessage.ts
@@ -1,66 +1,51 @@
-import axios from 'axios';
-import { IMessage } from '../types/message';
+import axios from "axios"
+import { IMessage } from "../types/message"
 
-export function sendMessage(
-  url: string,
-  messages: IMessage[],
-  state: {},
-  botId: number,
-  devMode: string,
-) {
-  if (devMode === 'local') {
-    const payload = {
-      data: {
-        message_history: messages,
-        state: state,
-      },
-    };
-    return axios.post(url, payload);
-  }
+export function sendMessage(url: string, messages: IMessage[], state: {}, botId: number, devMode: string){
+    console.log(messages);
+    if(devMode === 'local'){
+        const payload = {
+            data: {
+                message_history: messages,
+                state: state
+            }
+        }
+        return axios.post(url, payload)
+    }
 
-  const payload: any = {
-    botId: btoa(botId.toString()),
-    botData: {
-      message_history: messages,
-      state: state,
-    },
-  };
-  return axios.post(`${url}/sendMessage`, payload);
+    const payload:any = {
+        botId: btoa(botId.toString()),
+        botData: {
+            message_history: messages,
+            state: state
+        }
+    }
+    return axios.post(`${url}/chat-with-llm`, payload)
 }
 
-export function sendMessageV2(
-  url: string,
-  messages: IMessage[],
-  state: {},
-  botName: string,
-  userName: string,
-  devMode: string,
-) {
-  let payload: any = {
-    botName: botName,
-    username: userName,
-    botData: {
-      message_history: messages,
-      state: state,
-    },
-  };
-  if (devMode === 'local') {
-    payload = {
-      data: {
-        message_history: messages,
-        state: state,
-      },
-    };
-  }
-  return axios.post(`${url}/sendMessageV2`, payload);
+export function sendMessageV2(url: string, messages: IMessage[], state: {}, botName: string, botVoice:any, userName: string, devMode: string){
+    console.log(botVoice);
+    let payload:any = {
+        botName: botName,
+        username: userName,
+        botData: {
+            message_history: messages,
+            state: state
+        },
+        botVoice
+    }
+    return axios.post(`${url}/sendMessageV2`, payload)
 }
 
-export function botDetails(url: string, botId: number) {
-  return axios.get(`${url}/botDetails?botId=${btoa(botId.toString())}`);
+export function botDetails(url: string, botId: number){
+    return axios.get(`${url}/botDetails?botId=${btoa(botId.toString())}`)
 }
 
-export function botDetailsV2(url: string, botName: string, username: string) {
-  return axios.get(
-    `${url}/botDetailsV2?botName=${botName}&username=${username}`,
-  );
+export function botDetailsV2(url: string, botName: string, username: string){
+    return axios.get(`${url}/botDetailsV2?botName=${botName}&username=${username}`)
 }
+
+export function getBotList(url: string){
+    return axios.get(`${url}/botList`);
+}
+
diff --git a/src/components/header.tsx b/src/components/header.tsx
index c289eaa..e03f47a 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,122 +1,140 @@
-import { useEffect, useState } from 'react';
-import { getAPIURL } from '../helpers';
+import { useEffect, useState } from "react";
+import { getAPIURL } from "../helpers";
+import { getBotList } from "../actions/sendMessage";
+import { BotVoice } from "../App";
 
 interface IProps {
-  botName: string;
-  botId: number | null;
-  status: string;
-  restart: () => void;
-  error: string | null;
-  loading: boolean;
+    botName: string
+    botId: number | null
+    status: string
+    restart: ()=>void
+    updateBotName: (name:string)=>void
+    updateBotId: (id:number)=>void
+    error: string | null
+    loading: boolean
+    botAudioUrl: string | null
+    setBotAudioUrl: (url:null|string)=>void
+    botVoice: BotVoice
+    setBotVoice: (botVoice:BotVoice)=>void
 }
-export default function Header({
-  botName,
-  status,
-  restart,
-  error,
-  botId,
-  loading,
-}: IProps) {
-  const { devMode } = getAPIURL();
-  const [showSettings, setShowSettings] = useState(false);
-  const [online, setOnline] = useState(false);
 
-  useEffect(() => {
-    if (
-      status.toUpperCase() === 'DEPLOYED' ||
-      status.toUpperCase() === 'ACTIVE'
-    ) {
-      setOnline(true);
-    } else {
-      setOnline(false);
-    }
-  }, [status]);
+export default function Header({botName, status, restart, error, botId, loading, updateBotName, updateBotId, botAudioUrl, setBotAudioUrl, setBotVoice, botVoice}: IProps){
+    const {devMode} = getAPIURL()
+    const [showSettings, setShowSettings] = useState(false);
+    const [online, setOnline] = useState(false);
+    const [botsList, setBotList] = useState([]);
+    const [selectedBot, setselectedBot] = useState({});
 
-  return (
-    <div className="h-20 bg-[#141414] rounded-t-2xl py-4 px-2">
-      <div className="flex justify-between align-center">
-        <div className="w-90">
-          <div className="flex items-center">
-            <div className="relative">
-              <img
-                alt=""
-                src={`/avatars/${(botId || 10) % 5}.png`}
-                className="rounded-full border border-red-700"
-                width="40px"
-                height="40px"
-              />
-              {devMode !== 'local' && (
-                <div
-                  className={`border rounded-full h-2 w-2 absolute bottom-0 right-0 ${
-                    online
-                      ? 'border-green-500 bg-green-500'
-                      : 'border-red-500 bg-red-500'
-                  }`}
-                />
-              )}
-            </div>
-            {error && (
-              <span className="font-bold text-base text-white mx-2">
-                {error}
-              </span>
-            )}
-            {loading && (
-              <div>
-                <span className="font-bold text-base text-white mx-2">
-                  Loading Bot...
-                </span>
-              </div>
-            )}
-            {!error && (
-              <span className="font-bold text-base text-white mx-2">
-                {botName.toUpperCase()}
-              </span>
-            )}
-          </div>
-        </div>
-        <div className="items-center flex relative">
-          {showSettings && (
-            <div
-              id="dropdown"
-              className="z-8 absolute top-8 right-2 w-auto list-none divide-y divide-gray-100 rounded-lg bg-white text-base shadow bg-black"
-            >
-              <ul className="py-2" aria-labelledby="dropdownButton">
-                <li>
-                  <button
-                    className="block px-4 py-2 text-sm  text-gray-200 hover:bg-[#141414] bg-black hover:text-white"
-                    onClick={() => {
-                      restart();
-                      setShowSettings(false);
-                    }}
-                  >
-                    Restart
-                  </button>
-                </li>
-              </ul>
+    useEffect(()=>{
+        const {url} = getAPIURL()
+        getBotList(url).then((resp:any)=>{
+            if(!resp.data.error){
+                if(resp.data.data){
+                    setBotList(resp.data.data);
+                }
+            }
+        })
+    },[])
+
+    
+    useEffect(()=>{
+        if(status.toUpperCase() === 'DEPLOYED' || status.toUpperCase() === 'ACTIVE'){
+            setOnline(true)
+        }else{
+            setOnline(false)
+        }
+    }, [status])
+
+    const handleBotItemClick = (bot:any,id:number) => {
+        console.log(bot);
+        updateBotName(bot.name);
+        updateBotId(id);
+        setselectedBot(bot);
+        setShowSettings(false); // Close the dropdown after selecting a bot
+        restart();
+    };
+
+    return (
+        <div className="h-20 bg-[#141414] rounded-t-2xl py-4 px-2">
+            <div className="flex justify-between align-center">
+                <div className="w-90">
+                    <div className="flex items-center">
+                        <div className="relative">
+                            <img alt="" src={`/avatars/${(botId || 10)%5}.png`} className="rounded-full border border-red-700" width='40px' height='40px' />
+                            {devMode !== 'local' && <div className={`border rounded-full h-2 w-2 absolute bottom-0 right-0 ${online ? 'border-green-500 bg-green-500': 'border-red-500 bg-red-500'}`} />}
+                        </div>
+                        {error && <span className="font-bold text-base text-white mx-2">{error}</span>}
+                        {loading && <div><span className="font-bold text-base text-white mx-2">Loading Bot...</span></div>}
+                        {!error && <span className="font-bold text-base text-white mx-2">{botName.toUpperCase()}</span>}
+                        <div className="bg-white rounded-full">
+                            <button className={`px-4 py-2 font-bold  ${botVoice.allowToSpeak? 'text-black':'text-gray-300'}`} onClick={()=>{setBotVoice({...botVoice, allowToSpeak: !botVoice.allowToSpeak})}}>
+                                <span>Bot Voice</span>
+                            </button>
+                        </div>
+                        
+                        {botAudioUrl && (
+                            <audio controls autoPlay onEnded={() => setBotAudioUrl(null)}>
+                                <source src={botAudioUrl} type="audio/mpeg" />
+                                Your browser does not support the audio element.
+                            </audio>
+                        )}
+                    </div>
+                </div>
+                <div className="items-center flex relative">
+                {showSettings && (
+                        <div
+                            id="dropdown"
+                            className="z-8 absolute top-8 right-2 w-auto list-none divide-y divide-gray-100 rounded-lg bg-white text-base shadow bg-black"
+                        >
+                            <ul className="py-2" aria-labelledby="dropdownButton">
+                                {botsList.map((bot:any,idx:number) => (
+                                <li key={bot.id}>
+                                    <button
+                                    className={`block px-4 py-2 text-sm text-gray-200 hover:bg-[#141414] ${
+                                        selectedBot === bot.id ? "bg-black text-white" : "bg-white"
+                                    } hover:text-white`}
+                                    onClick={() => handleBotItemClick(bot,idx)}
+                                    >
+                                    {bot.name}
+                                    </button>
+                                </li>
+                                ))}
+                            </ul>
+                            <ul className="py-2" aria-labelledby="dropdownButton">
+                                <li>
+                                    <button
+                                    className="block px-4 py-2 text-sm  text-gray-200 hover:bg-[#141414] bg-black hover:text-white"
+                                    onClick={()=>{restart(); setShowSettings(false)}}
+                                    >
+                                    Restart
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
+                    )}
+                    <button
+                        onClick={() => {
+                            setShowSettings(!showSettings);
+                        }}
+                        id="dropdownButton"
+                        data-dropdown-toggle="dropdown"
+                        className="text-white  inline-block p-1.5 text-sm"
+                        type="button"
+                        >
+                            <span className="sr-only">Open dropdown</span>
+                            <svg
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="white"
+                                viewBox="0 0 16 3"
+                            >
+                                <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z" />
+                            </svg>
+                    </button>
+                    
+                </div>
             </div>
-          )}
-          <button
-            onClick={() => {
-              setShowSettings(!showSettings);
-            }}
-            id="dropdownButton"
-            data-dropdown-toggle="dropdown"
-            className="text-white  inline-block p-1.5 text-sm"
-            type="button"
-          >
-            <span className="sr-only">Open dropdown</span>
-            <svg
-              className="h-5 w-5"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="white"
-              viewBox="0 0 16 3"
-            >
-              <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z" />
-            </svg>
-          </button>
         </div>
-      </div>
-    </div>
-  );
-}
+    )
+}
\ No newline at end of file
diff --git a/src/components/inputBar.tsx b/src/components/inputBar.tsx
index ff93d54..b4efc8c 100644
--- a/src/components/inputBar.tsx
+++ b/src/components/inputBar.tsx
@@ -1,64 +1,172 @@
-import { useState } from 'react';
-import { IContent } from '../types/message';
-
+import { useEffect, useRef, useState } from "react";
+import { IContent } from "../types/message";
+import { BotVoice } from "../App";
 interface IProps {
-  onMessage: (message: IContent) => void;
-  botName: string;
+    onMessage: (message: IContent)=>void;
+    botName: string
+    botVoice: BotVoice
 }
 
-export default function InputBar({ onMessage, botName }: IProps) {
-  const [value, setValue] = useState('');
+export default function InputBar({onMessage, botName, botVoice}: IProps){
+
+    const [value, setValue] = useState('');
+    const [recognizing, setRecognizing] = useState(false);
+    const [ignoreOnEnd, setIgnoreOnEnd] = useState(false);
+    // const [startTimestamp, setStartTimestamp] = useState(0);
+    const [recognition, setRecognition] = useState<any>(null);
+    // const [selectedLanguage, setSelectedLanguage] = useState(langs[6][1][0]);
+    const [selectedDialect, setSelectedDialect] = useState('');
+    // const [llmResponse, setLlmResponse] = useState('');
+
+    const finalTranscriptRef = useRef(''); // Add this line
+    
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>)=>{
+        setValue(e.target.value)
+    }
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
+    const messages:any = {
+        "start": {
+          msg: 'Click on the microphone icon and begin speaking.',
+          class: 'alert-success'},
+        "speak_now": {
+          msg: 'Speak now.',
+          class: 'alert-success'},
+        "no_speech": {
+          msg: 'No speech was detected. You may need to adjust your <a href="//support.google.com/chrome/answer/2693767" target="_blank">microphone settings</a>.',
+          class: 'alert-danger'},
+        "no_microphone": {
+          msg: 'No microphone was found. Ensure that a microphone is installed and that <a href="//support.google.com/chrome/answer/2693767" target="_blank">microphone settings</a> are configured correctly.',
+          class: 'alert-danger'},
+        "allow": {
+          msg: 'Click the "Allow" button above to enable your microphone.',
+          class: 'alert-warning'},
+        "denied": {
+          msg: 'Permission to use microphone was denied.',
+          class: 'alert-danger'},
+        "blocked": {
+          msg: 'Permission to use microphone is blocked. To change, go to chrome://settings/content/microphone',
+          class: 'alert-danger'},
+        "upgrade": {
+          msg: 'Web Speech API is not supported by this browser. It is only supported by <a href="//www.google.com/chrome">Chrome</a> version 25 or later on desktop and Android mobile.',
+          class: 'alert-danger'},
+        "stop": {
+            msg: 'Stop listening, click on the microphone icon to restart',
+            class: 'alert-success'},
+        "copy": {
+          msg: 'Content copy to clipboard successfully.',
+          class: 'alert-success'},
+      }
+    
+    
+      const showInfo = (messageKey:any) => {
+        if (messageKey) {
+          const message = messages[messageKey];
+          // Todo: Update UI or state to display the message...
+          console.log(message.msg);
+        } else {
+          // Todo: Update UI or state to display the message...
+          console.log('No message to display.');
+        }
+      };
+    
+      const startRecognition = (event:any) => {
+        if (recognizing) {
+          recognition.stop();
+          return;
+        }
+        recognition.lang = selectedDialect;
+        recognition.start();
+        setIgnoreOnEnd(false);
+        //Todo: used timestamp to manage auto start/stop voice recognition
+        // setStartTimestamp(event.timeStamp);
+      };
+      
+      const copyToClipboard = () => {
+        // Todo : Add functionality to Copy Bot Response
+      };
+    
+    
+      useEffect(() => {
+        const recognition = new (window as any).webkitSpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = true;
+    
+        recognition.onstart = () => {
+          setRecognizing(true);
+          showInfo('speak_now');
+          // Todo: Update UI or state to display the message...
+        };
+    
+        recognition.onerror = (event:any) => {
+            // Todo: Handel Error while voice recognition
+        };
+    
+        recognition.onend = async () => {
+          sendMessage(finalTranscriptRef.current);
+          finalTranscriptRef.current = '';
+          setRecognizing(false);
+          if (!ignoreOnEnd) {
+            // Todo:Update UI or state as needed...
+          }
+        };
+        recognition.onresult = (event:any) => {
+          var final_transcript =''
+          var interim_transcript = '';
+          for (var i = event.resultIndex; i < event.results.length; ++i) {
+            if (event.results[i].isFinal) {
+              final_transcript += event.results[i][0].transcript;
+            } else {
+              interim_transcript += event.results[i][0].transcript;
+            }
+            if(interim_transcript.length>0)
+            setValue(interim_transcript);
+          }
+          if(final_transcript.length>0){
+            finalTranscriptRef.current = final_transcript; // Update the ref
+          }
+        };
+    
+        setRecognition(recognition);
+      }, [ignoreOnEnd]);
+    
 
-  const handleSubmit = () => {
-    if (value === '') {
-      return;
+    const handleSubmit = ()=>{
+        sendMessage(value);
+        setValue('')
     }
-    const message = {
-      data_type: 'STRING',
-      value: value,
-    };
-    onMessage(message);
-    setValue('');
-  };
 
-  return (
-    <div className="w-full flex justify-center bg-[#141414] rounded-b-2xl py-4">
-      <div className="w-5/6">
-        <form
-          onSubmit={e => {
-            e.preventDefault();
-            handleSubmit();
-          }}
-        >
-          <input
-            type="text"
-            autoFocus
-            onChange={handleChange}
-            value={value}
-            className="appearance-none bg-black w-full py-2 px-3 text-white leading-tight focus:outline-none focus:shadow-outline rounded-2xl"
-            id="message"
-            placeholder={`Chat with ${botName}`}
-          />
-        </form>
-      </div>
-      <div className="flex align-center mx-2 px-2 bg-white rounded-full">
-        <button
-          className={`px-4 py-2 font-bold  ${
-            value === '' ? 'text-gray-300' : 'text-black'
-          }`}
-          disabled={value === ''}
-          onClick={handleSubmit}
-        >
-          {/* <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`${value === ''? 'text-gray-400': 'text-white'} w-6 h-6`}>
+    const sendMessage = (value:string)=>{
+        if(value === ''){
+            return
+        }
+        const message = {
+            'data_type': 'STRING',
+            'value': value
+        }
+        onMessage(message)
+    }
+
+    return(
+        <div className="w-full flex justify-center bg-[#141414] rounded-b-2xl py-4">
+            <div className="w-5/6">
+                <form onSubmit={(e)=>{
+                    e.preventDefault()
+                    handleSubmit()
+                }}>
+                    <input type="text" autoFocus onChange={handleChange} value={value} className="appearance-none bg-black w-full py-2 px-3 text-white leading-tight focus:outline-none focus:shadow-outline rounded-2xl" id="message" placeholder={`Chat with ${botName}`}/>
+                </form>
+            </div>
+            <div className="flex align-center mx-2 px-2 bg-white rounded-full">
+                <button className={`px-4 py-2 font-bold  ${value === '' ? 'text-gray-300': 'text-black'}`} disabled={value === ''} onClick={handleSubmit}>
+                    {/* <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`${value === ''? 'text-gray-400': 'text-white'} w-6 h-6`}>
                         <path strokeLinecap="round" strokeLinejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
                     </svg> */}
-          <span>Send</span>
-        </button>
-      </div>
-    </div>
-  );
-}
+                    <span>Send</span>
+                </button>
+                <button className={`px-4 py-2 font-bold  ${recognizing ? 'text-gray-300': 'text-black'}`} disabled={recognizing} onClick={(event:any)=>{startRecognition(event)}}>
+                    <span>Mic</span>
+                </button>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/helpers.ts b/src/helpers.ts
index 6fdbfd9..a078406 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -1,15 +1,15 @@
 export function getAPIURL() {
-  const urlParams = new URLSearchParams(window.location.search);
-  const apiParam = urlParams.get('API_URL');
-  let url = process.env.REACT_APP_API_URL || 'http://localhost:9001/';
-  let devMode = 'prod';
-  if (apiParam) {
-    url = apiParam;
-    devMode = 'local';
-  }
-
-  return {
-    url,
-    devMode,
-  };
-}
+    const urlParams = new URLSearchParams(window.location.search);
+    const apiParam = urlParams.get('API_URL');
+    let url = process.env.REACT_APP_API_URL || 'http://localhost:9001';
+    let devMode = 'prod';
+    if (apiParam) {
+      url = apiParam;
+      devMode = 'local';
+    }
+  
+    return {
+      url,
+      devMode,
+    };
+  }
\ No newline at end of file
diff --git a/src/languages.js b/src/languages.js
new file mode 100644
index 0000000..5d86d88
--- /dev/null
+++ b/src/languages.js
@@ -0,0 +1,63 @@
+export var langs =
+[['Afrikaans',       ['af-ZA']],
+ ['Bahasa Indonesia',['id-ID']],
+ ['Bahasa Melayu',   ['ms-MY']],
+ ['Català',          ['ca-ES']],
+ ['Čeština',         ['cs-CZ']],
+ ['Deutsch',         ['de-DE']],
+ ['English',         ['en-AU', 'Australia'],
+                     ['en-CA', 'Canada'],
+                     ['en-IN', 'India'],
+                     ['en-NZ', 'New Zealand'],
+                     ['en-ZA', 'South Africa'],
+                     ['en-GB', 'United Kingdom'],
+                     ['en-US', 'United States']],
+ ['Español',         ['es-AR', 'Argentina'],
+                     ['es-BO', 'Bolivia'],
+                     ['es-CL', 'Chile'],
+                     ['es-CO', 'Colombia'],
+                     ['es-CR', 'Costa Rica'],
+                     ['es-EC', 'Ecuador'],
+                     ['es-SV', 'El Salvador'],
+                     ['es-ES', 'España'],
+                     ['es-US', 'Estados Unidos'],
+                     ['es-GT', 'Guatemala'],
+                     ['es-HN', 'Honduras'],
+                     ['es-MX', 'México'],
+                     ['es-NI', 'Nicaragua'],
+                     ['es-PA', 'Panamá'],
+                     ['es-PY', 'Paraguay'],
+                     ['es-PE', 'Perú'],
+                     ['es-PR', 'Puerto Rico'],
+                     ['es-DO', 'República Dominicana'],
+                     ['es-UY', 'Uruguay'],
+                     ['es-VE', 'Venezuela']],
+ ['Euskara',         ['eu-ES']],
+ ['Français',        ['fr-FR']],
+ ['Galego',          ['gl-ES']],
+ ['Hrvatski',        ['hr_HR']],
+ ['IsiZulu',         ['zu-ZA']],
+ ['Íslenska',        ['is-IS']],
+ ['Italiano',        ['it-IT', 'Italia'],
+                     ['it-CH', 'Svizzera']],
+ ['Magyar',          ['hu-HU']],
+ ['Nederlands',      ['nl-NL']],
+ ['Norsk bokmål',    ['nb-NO']],
+ ['Polski',          ['pl-PL']],
+ ['Português',       ['pt-BR', 'Brasil'],
+                     ['pt-PT', 'Portugal']],
+ ['Română',          ['ro-RO']],
+ ['Slovenčina',      ['sk-SK']],
+ ['Suomi',           ['fi-FI']],
+ ['Svenska',         ['sv-SE']],
+ ['Türkçe',          ['tr-TR']],
+ ['български',       ['bg-BG']],
+ ['Pусский',         ['ru-RU']],
+ ['Српски',          ['sr-RS']],
+ ['한국어',            ['ko-KR']],
+ ['中文',             ['cmn-Hans-CN', '普通话 (中国大陆)'],
+                     ['cmn-Hans-HK', '普通话 (香港)'],
+                     ['cmn-Hant-TW', '中文 (台灣)'],
+                     ['yue-Hant-HK', '粵語 (香港)']],
+ ['日本語',           ['ja-JP']],
+ ['Lingua latīna',   ['la']]];
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 9d379a3..a2c5e89 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,5 +16,10 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.d.ts",
+    "global.d.ts"
+  ]
 }