diff --git a/package-lock.json b/package-lock.json index 9b7751d4..45ef7e4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -80,6 +80,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==", + "dev": true, "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" @@ -116,6 +117,7 @@ "version": "7.24.4", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz", "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==", + "dev": true, "engines": { "node": ">=6.9.0" } @@ -124,6 +126,7 @@ "version": "7.24.4", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.4.tgz", "integrity": "sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==", + "dev": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.24.2", @@ -153,6 +156,7 @@ "version": "7.24.4", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.4.tgz", "integrity": "sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==", + "dev": true, "dependencies": { "@babel/types": "^7.24.0", "@jridgewell/gen-mapping": "^0.3.5", @@ -190,6 +194,7 @@ "version": "7.23.6", "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz", "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==", + "dev": true, "dependencies": { "@babel/compat-data": "^7.23.5", "@babel/helper-validator-option": "^7.23.5", @@ -261,6 +266,7 @@ "version": "7.22.20", "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", + "dev": true, "engines": { "node": ">=6.9.0" } @@ -269,6 +275,7 @@ "version": "7.23.0", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", + "dev": true, "dependencies": { "@babel/template": "^7.22.15", "@babel/types": "^7.23.0" @@ -281,6 +288,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz", "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==", + "dev": true, "dependencies": { "@babel/types": "^7.22.5" }, @@ -315,6 +323,7 @@ "version": "7.23.3", "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz", "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==", + "dev": true, "dependencies": { "@babel/helper-environment-visitor": "^7.22.20", "@babel/helper-module-imports": "^7.22.15", @@ -387,6 +396,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz", "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==", + "dev": true, "dependencies": { "@babel/types": "^7.22.5" }, @@ -410,6 +420,7 @@ "version": "7.22.6", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz", "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==", + "dev": true, "dependencies": { "@babel/types": "^7.22.5" }, @@ -459,6 +470,7 @@ "version": "7.24.4", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.4.tgz", "integrity": "sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==", + "dev": true, "dependencies": { "@babel/template": "^7.24.0", "@babel/traverse": "^7.24.1", @@ -486,6 +498,7 @@ "version": "7.24.4", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz", "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==", + "dev": true, "bin": { "parser": "bin/babel-parser.js" }, @@ -2100,6 +2113,7 @@ "version": "7.24.0", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz", "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==", + "dev": true, "dependencies": { "@babel/code-frame": "^7.23.5", "@babel/parser": "^7.24.0", @@ -2113,6 +2127,7 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz", "integrity": "sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==", + "dev": true, "dependencies": { "@babel/code-frame": "^7.24.1", "@babel/generator": "^7.24.1", @@ -3818,6 +3833,7 @@ "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "dev": true, "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -3831,6 +3847,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, "engines": { "node": ">=6.0.0" } @@ -3839,6 +3856,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "dev": true, "engines": { "node": ">=6.0.0" } @@ -3846,12 +3864,14 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.15", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", - "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", + "dev": true }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" @@ -8238,6 +8258,7 @@ "version": "4.23.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==", + "dev": true, "funding": [ { "type": "opencollective", @@ -8360,6 +8381,7 @@ "version": "1.0.30001605", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001605.tgz", "integrity": "sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==", + "dev": true, "funding": [ { "type": "opencollective", @@ -8852,7 +8874,8 @@ "node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", - "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==" + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true }, "node_modules/cookie": { "version": "0.6.0", @@ -9083,6 +9106,7 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, "dependencies": { "ms": "2.1.2" }, @@ -9501,7 +9525,8 @@ "node_modules/electron-to-chromium": { "version": "1.4.726", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.726.tgz", - "integrity": "sha512-xtjfBXn53RORwkbyKvDfTajtnTp0OJoPOIBzXvkNbb7+YYvCHJflba3L7Txyx/6Fov3ov2bGPr/n5MTixmPhdQ==" + "integrity": "sha512-xtjfBXn53RORwkbyKvDfTajtnTp0OJoPOIBzXvkNbb7+YYvCHJflba3L7Txyx/6Fov3ov2bGPr/n5MTixmPhdQ==", + "dev": true }, "node_modules/emittery": { "version": "0.13.1", @@ -9675,6 +9700,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz", "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==", + "dev": true, "engines": { "node": ">=6" } @@ -10806,6 +10832,7 @@ "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "dev": true, "engines": { "node": ">=6.9.0" } @@ -10984,6 +11011,7 @@ "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true, "engines": { "node": ">=4" } @@ -14246,6 +14274,7 @@ "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "dev": true, "bin": { "jsesc": "bin/jsesc" }, @@ -14280,6 +14309,7 @@ "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, "bin": { "json5": "lib/cli.js" }, @@ -14523,6 +14553,7 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, "dependencies": { "yallist": "^3.0.2" } @@ -14850,7 +14881,8 @@ "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true }, "node_modules/mute-stream": { "version": "1.0.0", @@ -14995,7 +15027,8 @@ "node_modules/node-releases": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", - "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==" + "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", + "dev": true }, "node_modules/normalize-package-data": { "version": "2.5.0", @@ -16838,6 +16871,7 @@ "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, "bin": { "semver": "bin/semver.js" } @@ -18022,6 +18056,7 @@ "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==", + "dev": true, "funding": [ { "type": "opencollective", @@ -18795,7 +18830,8 @@ "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", - "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==" + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true }, "node_modules/yaml": { "version": "1.10.2", diff --git a/src/App.tsx b/src/App.tsx index 5480acc9..e86b5274 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import {Navbar} from "./components/navbar"; +import { Navbar } from "./components/navbar"; import { Route, Routes } from "react-router-dom"; import LoginPage from "./molecules/login-mobile-aadhar-page"; import { Toaster } from "react-hot-toast"; @@ -13,6 +13,7 @@ import FAQPage from "./pages/faq-page"; import LaunchPage from "./pages/launch-page"; import HomePage from "./pages/home-page"; import FeedbackPage from "./molecules/FeedbackPage"; +import ShareButtons from "./molecules/share-buttons"; import { ChatUI } from "./molecules/chat-ui"; @@ -40,6 +41,7 @@ function App() { } /> }/> } /> + } /> } /> }/> diff --git a/src/molecules/FeedbackPage/index.module.css b/src/molecules/FeedbackPage/index.module.css index aafa3b0f..48ee31f5 100644 --- a/src/molecules/FeedbackPage/index.module.css +++ b/src/molecules/FeedbackPage/index.module.css @@ -27,7 +27,6 @@ } .textBlock { - border: 2px solid #f5952e; resize: vertical; overflow: auto; height: 10rem; diff --git a/src/molecules/FeedbackPage/index.tsx b/src/molecules/FeedbackPage/index.tsx index f33b20fd..502785af 100644 --- a/src/molecules/FeedbackPage/index.tsx +++ b/src/molecules/FeedbackPage/index.tsx @@ -6,11 +6,14 @@ import Rating from "@mui/material/Rating"; import Button from "@mui/material/Button"; import config from "./config.json"; import { toast } from "react-hot-toast"; +import { useColorPalates } from "../theme-provider/hooks"; const FeedbackPage: React.FC = () => { const [star, setStar] = useState(1); const [review, setReview] = useState(""); + const theme = useColorPalates() + const handleFeedback = () => { const rateBox = config.component.ratingBox; const reviewContainer = config.component.reviewBox; @@ -44,7 +47,8 @@ const FeedbackPage: React.FC = () => { fontWeight: 'bold', m: 2, p: 2, - display: 'fixed' + display: 'fixed', + color: theme?.primary?.main }} > {config.component.Title} @@ -57,6 +61,7 @@ const FeedbackPage: React.FC = () => { sx={{ fontWeight: "bold", fontSize: "3vh", + color: theme?.primary?.main }} > {config.component.ratingBoxTitle} @@ -82,7 +87,8 @@ const FeedbackPage: React.FC = () => { {config.component.ratingStarDescription} @@ -93,13 +99,13 @@ const FeedbackPage: React.FC = () => { data-testid="ratingBtn" sx={{ mt: 2, - backgroundColor: `${config.theme.primaryColor.value}`, + backgroundColor: `${theme.primary?.dark}`, fontWeight: "bold", borderRadius: "10rem", fontSize: "10px", p: 1.5, "&:hover": { - backgroundColor: `${config.theme.secondaryColor.value}`, + backgroundColor: `${theme.primary?.main}`, }, }} onClick={handleFeedback} @@ -116,6 +122,7 @@ const FeedbackPage: React.FC = () => { m: "1rem", fontWeight: "bold", fontSize: "3vh", + color: theme?.primary?.main }} > {config.component.reviewBoxTitle} @@ -124,6 +131,9 @@ const FeedbackPage: React.FC = () => { placeholder={config.component.reviewPlaceholder} value={review} className={styles.textBlock} + style={{ + border: `2px solid ${theme?.primary?.light}` + }} onChange={(e) => { setReview(e.target.value); }} @@ -135,13 +145,13 @@ const FeedbackPage: React.FC = () => { data-testid="reviewBtn" sx={{ mt: 2, - backgroundColor: `${config.theme.primaryColor.value}`, + backgroundColor: `${theme.primary?.dark}`, fontWeight: "bold", borderRadius: "10rem", fontSize: "10px", p: 1.5, "&:hover": { - backgroundColor: `${config.theme.secondaryColor.value}`, + backgroundColor: `${theme.primary?.main}`, }, }} onClick={handleFeedback} diff --git a/src/molecules/VoiceRecorder/styles.module.css b/src/molecules/VoiceRecorder/styles.module.css index f13ef725..f7397a49 100644 --- a/src/molecules/VoiceRecorder/styles.module.css +++ b/src/molecules/VoiceRecorder/styles.module.css @@ -17,4 +17,49 @@ margin: auto; width: 4rem; height: 4rem; +} + +.btn { + width: 100px; + height: 100px; + border: none; + padding: 0; + border-radius: 100%; + font-size: 3em; + color: #fff; + padding: 0; + margin: 0; + background: red; + position: relative; + z-index: 999; + display: inline-block; + /* line-height: $size; */ + text-align: center; + white-space: nowrap; + vertical-align: middle; + -ms-touch-action: manipulation; + touch-action: manipulation; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-image: none; +} + +.type2{ + background: #189BFF; +} + +.pulseRing { + content: ''; + width: 100px; + height: 100px; + border: 5px solid #189BFF; + background: #189BFF; + border-radius: 50%; + position: absolute; + top: -5px; + left: -5px; + animation: pulsate infinite 1.5s; } \ No newline at end of file diff --git a/src/molecules/chat-ui/config.json b/src/molecules/chat-ui/config.json index 9a2e3dbe..9a0d4896 100644 --- a/src/molecules/chat-ui/config.json +++ b/src/molecules/chat-ui/config.json @@ -17,10 +17,6 @@ "negativeFeedbackText": "Not Helpful", "allowTextToSpeech": true, "textToSpeechLabel": "Click to hear", - "allowShareChat": true, - "shareChatText": "Share", - "allowDownloadChat": true, - "downloadChatText": "Download", "allowTransliteration": true, "transliterationApi": "", "transliterationInputLanguage": "", diff --git a/src/molecules/chat-ui/index.tsx b/src/molecules/chat-ui/index.tsx index abd3a596..e6233121 100644 --- a/src/molecules/chat-ui/index.tsx +++ b/src/molecules/chat-ui/index.tsx @@ -11,19 +11,14 @@ import styles from './index.module.css' import { getMsgType } from './utils/getMsgType'; import MessageItem from '../message-item'; import toast from 'react-hot-toast'; -import shareIcon from './assets/share.svg'; -import downloadIcon from './assets/download.svg'; import { recordUserLocation } from './utils/location'; -import CircularProgress from '@mui/material/CircularProgress'; import chatHistory from './chatHistory.json'; import config from './config.json'; -import { Divider } from '@mui/material'; +import ShareButtons from '../share-buttons'; export const ChatUI: React.FC = () => { const [messages, setMessages] = useState([]); const [loading, setLoading] = useState(false); - const [shareLoader, setShareLoader] = useState(false); - const [downloadLoader, setDownloadLoader] = useState(false); useEffect(() => { const fetchHistory = () => { @@ -122,25 +117,6 @@ export const ChatUI: React.FC = () => { const placeholder = useMemo(() => config?.component?.placeholder ?? "Ask Your Question", [config]); - const downloadShareHandler = async (type: string) => { - if(type === 'share'){ - toast.loading("Sharing chat", {duration: 1500}); - setShareLoader(true); - }else if(type === 'download'){ - toast.loading("Downloading chat", {duration: 1500}); - setDownloadLoader(true); - } - setTimeout(() => { - if(type === 'share'){ - toast.success("Chat shared successfully"); - setShareLoader(false); - }else if(type === 'download'){ - toast.success("Chat downloaded successfully"); - setDownloadLoader(false); - } - }, 2000); - }; - return (
{ locale="en-US" placeholder={placeholder} /> - {config.component.allowDownloadChat && config.component.allowShareChat &&
- {config.component.allowShareChat &&
downloadShareHandler('share')} - style={{ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - }}> - {/* Share */} - {shareLoader ? ( -
- -
- ) : ( -
- {' '} -
- )} -

- {config.component.shareChatText} -

-
} - {/* Only render divider when both share and download allowed */} - {config.component.allowDownloadChat && config.component.allowShareChat && } - {config.component.allowDownloadChat &&
downloadShareHandler('download')} - style={{ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - }}> - {/* Download */} - {downloadLoader ? ( -
- -
- ) : ( -
- -
- )} -

- {config.component.downloadChatText} -

-
} -
} + + +
); }; diff --git a/src/molecules/index.json b/src/molecules/index.json index a868311d..92555cb2 100644 --- a/src/molecules/index.json +++ b/src/molecules/index.json @@ -9,6 +9,7 @@ "downtime-page", "home-page", "feedback-page", + "share-buttons", "chat-ui" ], "molecules": [ diff --git a/src/molecules/login-mobile-aadhar-page/index.tsx b/src/molecules/login-mobile-aadhar-page/index.tsx index 1139f86d..02c2e5e5 100644 --- a/src/molecules/login-mobile-aadhar-page/index.tsx +++ b/src/molecules/login-mobile-aadhar-page/index.tsx @@ -23,6 +23,12 @@ const LoginMobileAadharPage: React.FC = () => { let maxLength; let errorMessage = ''; + const inputValue = e.target.value; + const numericInput = inputValue.replace(/[^0-9]/g, ''); + + // Update the input value with the numeric value + setInput(numericInput); + if (isAadharClicked) { reg = /^\d{0,12}$/; // Allow up to 12 digits for Aadhar maxLength = 12; @@ -33,20 +39,20 @@ const LoginMobileAadharPage: React.FC = () => { errorMessage = 'Please enter a valid mobile number'; } - const isValid = reg.test(e.target.value); + const isValid = reg.test(numericInput); setValid(isValid); - if (isValid || e.target.value === '') { - setInput(e.target.value); + if (isValid || numericInput === '') { + setInput(numericInput); } else { // Truncate input if it exceeds maximum length - setInput(e.target.value.slice(0, maxLength)); + setInput(numericInput.slice(0, maxLength)); } - if (e.target.value.length > maxLength) { + if (numericInput.length > maxLength) { // If input length exceeds maximum allowed digits setValid(false); - setInput(e.target.value.slice(0, maxLength)); + setInput(numericInput.slice(0, maxLength)); errorMessage = isAadharClicked ? `Please enter a valid Aadhar number` : `Please enter a valid mobile number`; @@ -77,6 +83,7 @@ const LoginMobileAadharPage: React.FC = () => { toast.success(`Successfully sent OTP`); }, 2000); } else { + console.log(input.length) toast.error(`Please enter a valid input`); } }; @@ -129,6 +136,7 @@ const LoginMobileAadharPage: React.FC = () => { onSubmit={handleLogin} sx={{ mt: 1, width: '90%' }}> = ({ message, config }) => { + + const theme = useColorPalates() + const [reaction, setReaction] = useState(message?.content?.data?.reaction); // @ts-ignore const [optionDisabled, setOptionDisabled] = useState( @@ -68,10 +72,10 @@ const MessageItem: FC = ({ message, config }) => { alignItems: 'center', color: content?.data?.position === 'right' - ? config.theme.secondaryColor.value + ? theme?.primary?.main : optionDisabled ? config.theme.primaryColor.value - : config.theme.secondaryColor.value, + : theme?.primary?.main, }}>
{choice}
@@ -80,7 +84,7 @@ const MessageItem: FC = ({ message, config }) => { color={ optionDisabled ? config.theme.primaryColor.value - : config.theme.secondaryColor.value + : theme?.primary?.main } />
@@ -125,7 +129,7 @@ const MessageItem: FC = ({ message, config }) => { style={ content?.data?.position === 'right' ? { - borderColor: `${config.theme.secondaryColor.value} transparent transparent transparent`, + borderColor: `${theme?.primary?.main} transparent transparent transparent`, } : { borderColor: `${config.theme.primaryColor.value} transparent transparent transparent`, @@ -135,7 +139,7 @@ const MessageItem: FC = ({ message, config }) => { type="text" style={ content?.data?.position === 'right' - ? { background: config.theme.secondaryColor.value, boxShadow: '0 3px 8px rgba(0,0,0,.24)' } + ? { background: theme?.primary?.main, boxShadow: '0 3px 8px rgba(0,0,0,.24)' } : { background: config.theme.primaryColor.value, boxShadow: '0 3px 8px rgba(0,0,0,.24)' } }> = ({ message, config }) => { color: content?.data?.position === 'right' ? config.theme.primaryColor.value - : config.theme.secondaryColor.value, + : theme?.primary?.main, }}> {content?.text}{' '} {/* { @@ -165,7 +169,7 @@ const MessageItem: FC = ({ message, config }) => { color: content?.data?.position === 'right' ? config.theme.primaryColor.value - : config.theme.secondaryColor.value, + : theme?.primary?.main, fontSize: '10px', }}> {moment( @@ -180,7 +184,7 @@ const MessageItem: FC = ({ message, config }) => { @@ -204,13 +208,13 @@ const MessageItem: FC = ({ message, config }) => { pointerEvents: 'none', filter: 'grayscale(100%)', opacity: '0.5', - border: `1px solid ${config.theme.secondaryColor.value}`, + border: `1px solid ${theme?.primary?.main}`, } : { pointerEvents: 'auto', opacity: '1', filter: 'grayscale(0%)', - border: `1px solid ${config.theme.secondaryColor.value}`, + border: `1px solid ${theme?.primary?.main}`, } }> @@ -224,6 +228,7 @@ const MessageItem: FC = ({ message, config }) => { alignItems: 'flex-end', marginRight: '1px', padding: '0 5px', + color: `${theme?.primary?.dark}` }}> {config.component.textToSpeechLabel}

@@ -233,7 +238,7 @@ const MessageItem: FC = ({ message, config }) => {
= ({ message, config }) => { width="20px" />

+ style={{ fontSize: '11px', fontFamily: 'Mulish-bold', color: `${theme?.primary?.dark}` }}> {config.component.positiveFeedbackText}

@@ -261,7 +266,7 @@ const MessageItem: FC = ({ message, config }) => { style={{ height: '32px', width: '1px', - backgroundColor: config.theme.secondaryColor.value, + backgroundColor: theme?.primary?.main, margin: '6px 0', }}>
@@ -279,7 +284,7 @@ const MessageItem: FC = ({ message, config }) => { }>

+ style={{ fontSize: '11px', fontFamily: 'Mulish-bold', color: `${theme?.primary?.dark}` }}> {config.component.negativeFeedbackText}

@@ -446,7 +451,7 @@ const MessageItem: FC = ({ message, config }) => { fontSize: '1rem', color: content?.data?.position === 'right' - ? config.theme.secondaryColor.value + ? theme?.primary?.main : config.theme.primaryColor.value, }}> {`\n` + diff --git a/src/molecules/share-buttons/config.json b/src/molecules/share-buttons/config.json new file mode 100644 index 00000000..df9e3bf5 --- /dev/null +++ b/src/molecules/share-buttons/config.json @@ -0,0 +1,22 @@ +{ + "theme": { + "primaryColor": { + "value": "#1e6231", + "allowOverride": true + }, + "secondaryColor": { + "value": "#34a755", + "allowOverride": true + } + }, + "component": { + "allowOverride": false, + "allowDownloadChat": true, + "allowShareChat": true, + "noLink": "Link is not valid", + "downloading": "Downloading...", + "noShare": "Your system doesn't support sharing this file.", + "shareText": "Share", + "downloadText": "Download" + } + } \ No newline at end of file diff --git a/src/molecules/share-buttons/index.tsx b/src/molecules/share-buttons/index.tsx new file mode 100644 index 00000000..4f5ad0a5 --- /dev/null +++ b/src/molecules/share-buttons/index.tsx @@ -0,0 +1,175 @@ +// @ts-ignore +import React, { useMemo, useState } from 'react'; +import ShareIcon from '@mui/icons-material/Share'; +import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'; +import { toast } from 'react-hot-toast'; +import { CircularProgress, Divider } from '@mui/material'; +import { useColorPalates } from '../theme-provider/hooks'; +import config from './config.json'; + +const ShareButtons = () => { + + const theme = useColorPalates(); + + // @ts-ignore + const secondaryColor = useMemo(() => { + return theme?.primary?.light; + }, [theme?.primary?.light]); + + const primaryColor = useMemo(() => { + return theme?.primary?.main + }, [theme?.primary?.main]) + + const [shareLoader, setShareLoader] = useState(false); + const [downloadLoader, setDownloadLoader] = useState(false); + + // @ts-ignore + const downloadChat = async (type: string) => { + // perform your download chat logic here + }; + + const downloadShareHandler = async (type: string) => { + try { + if (type === 'download') { + setDownloadLoader(true); + } else { + setShareLoader(true); + } + + if (type === 'download') { + setDownloadLoader(false); + + setTimeout(() => { + toast.success(`${config?.component?.downloading}`); + }, 2000) + + + } else if (type === 'share') { + + setShareLoader(false); + setTimeout(() => { + toast.success("Share successful") + }, 2000) + + } else { + toast.error(`${config?.component?.noShare}`); + setDownloadLoader(false); + setShareLoader(false); + } + } catch (error: any) { + setDownloadLoader(false); + setShareLoader(false); + + toast.error("Error while performing") + + } + }; + + + return ( + <> + {(config?.component?.allowDownloadChat || config?.component?.allowShareChat) && ( +
+ {config?.component?.allowShareChat && ( +
downloadShareHandler('share')} + style={{ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }}> + + {shareLoader ? ( +
+ +
+ ) : ( +
+ +
+ )} +

+ {config?.component?.shareText} +

+
+ )} + {/* Only render divider when both share and download allowed */} + {config?.component?.allowDownloadChat && config?.component?.allowShareChat && } + {config?.component?.allowDownloadChat && ( +
downloadShareHandler('download')} + style={{ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }}> + {/* Download */} + {downloadLoader ? ( +
+ +
+ ) : ( +
+ +
+ )} +

+ {config?.component?.downloadText} +

+
+ )} +
+ )} + + ); +}; + +export default ShareButtons; \ No newline at end of file