isometrik-chat 0.1.0

package/public/icons/poll.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M11.752 2a2.752 2.752 0 0 1 2.752 2.752V19.25a2.752 2.752 0 1 1-5.504 0V4.752A2.752 2.752 0 0 1 11.752 2Zm7 5a2.752 2.752 0 0 1 2.752 2.752v9.498a2.752 2.752 0 1 1-5.504 0V9.752A2.752 2.752 0 0 1 18.752 7Zm-14 5a2.752 2.752 0 0 1 2.752 2.752v4.498a2.752 2.752 0 0 1-5.504 0v-4.498A2.752 2.752 0 0 1 4.752 12Z"/></svg>

package/public/icons/right-arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="7.212" height="12.274" viewBox="0 0 7.212 12.274">
+  <path id="Path_43" data-name="Path 43" d="M-341.068,149.973a2.034,2.034,0,0,1-.668-.542.679.679,0,0,1,0-1.06q2.223-2.224,4.449-4.446c.077-.077.069-.11,0-.182q-2.227-2.221-4.449-4.446a.651.651,0,0,1-.147-.855,2.3,2.3,0,0,1,.638-.64.629.629,0,0,1,.767.06c.034.028.067.057.1.088l5.354,5.354a.686.686,0,0,1,.159.868.915.915,0,0,1-.159.194q-2.677,2.677-5.353,5.355a.991.991,0,0,1-.421.252Z" transform="translate(341.991 -137.699)" fill="#fff"/>
+</svg>

package/public/icons/right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.346" height="13.63" viewBox="0 0 18.346 13.63">
+  <path id="Path_71205" data-name="Path 71205" d="M-511.323,193.394a2.01,2.01,0,0,1-.542.726q-5.479,5.475-10.955,10.953a.9.9,0,0,1-1.162.221,1.169,1.169,0,0,1-.23-.183q-2.325-2.321-4.645-4.645a.888.888,0,0,1,.2-1.482.848.848,0,0,1,.9.09,1.757,1.757,0,0,1,.207.186q1.929,1.927,3.854,3.86c.131.132.189.116.311-.007q5.219-5.23,10.447-10.452a.909.909,0,0,1,1.178-.214,1.036,1.036,0,0,1,.431.6Z" transform="translate(529.418 -192.052)" fill="#1d1c21" stroke="#9e9cab" stroke-width="0.5"/>
+</svg>

package/public/icons/round-star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m12 17.27l4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72l3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41l-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18l-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"/></svg>

package/public/icons/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.711" height="20.722" viewBox="0 0 20.711 20.722">
+  <path id="Path_71203" data-name="Path 71203" d="M-490.895,244.9a9.336,9.336,0,0,1,7.4-9.1,9.308,9.308,0,0,1,11.017,7.295,9.085,9.085,0,0,1-1.709,7.4c-.12.161-.127.239.022.387q1.826,1.8,3.632,3.626a1.037,1.037,0,0,1-.059,1.607,1.034,1.034,0,0,1-1.4-.138q-1.407-1.4-2.809-2.806c-.291-.291-.587-.577-.871-.875-.1-.1-.157-.113-.276-.023a8.9,8.9,0,0,1-6.764,1.855,9.1,9.1,0,0,1-7.311-5.319A8.768,8.768,0,0,1-490.895,244.9Zm16.531.011a7.215,7.215,0,0,0-7.194-7.237,7.213,7.213,0,0,0-7.269,7.185,7.233,7.233,0,0,0,7.229,7.282A7.234,7.234,0,0,0-474.364,244.913Z" transform="translate(490.895 -235.605)" fill="#1d1c21"/>
+</svg>

package/public/icons/send.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="23" viewBox="0 0 22 23">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1765" data-name="Rectangle 1765" width="22" height="23" transform="translate(0.15 0)" fill="#f53872"/>
+    </clipPath>
+  </defs>
+  <g id="send-2" transform="translate(-0.15)" clip-path="url(#clip-path)">
+    <path id="Path_71218" data-name="Path 71218" d="M4.161,15.623l6.491-1.3c.58-.116.58-.3,0-.42l-6.491-1.3a1.158,1.158,0,0,1-.84-.84l-1.3-6.491c-.116-.58.226-.849.763-.6l19.808,9.142c.358.165.358.434,0,.6L2.785,23.556c-.537.248-.879-.022-.763-.6l1.3-6.491A1.158,1.158,0,0,1,4.161,15.623Z" transform="translate(-0.525 -2.164)" fill="#f53872"/>
+  </g>
+</svg>

package/public/icons/starCarousel.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.691" height="18.771" viewBox="0 0 19.691 18.771">
+  <path id="Path_71222" data-name="Path 71222" d="M-691.564,1499.024c-.8-.071-1.6-.15-2.4-.225-1.253-.117-2.506-.234-3.76-.344a.215.215,0,0,1-.208-.155c-.106-.254-.215-.506-.327-.757-.3-.671-.561-1.358-.884-2.018l-.039.017.039-.017a.848.848,0,0,0-.033-.128q-.6-1.392-1.2-2.783a.516.516,0,0,0-.494-.359.522.522,0,0,0-.507.368l-.614,1.427-1.836,4.262c-.031.071-.054.131-.156.138-.4.03-.8.075-1.2.111-.757.068-1.515.13-2.272.2-.91.084-1.819.177-2.728.26a.542.542,0,0,0-.5.349.512.512,0,0,0,.173.586q1.109.979,2.223,1.952,1.22,1.071,2.439,2.143a.229.229,0,0,1,.088.25q-.549,2.407-1.091,4.815c-.1.448-.217.892-.289,1.347a.506.506,0,0,0,.754.494c.424-.236.833-.5,1.249-.749.04-.021.08-.04.118-.063q2-1.186,3.993-2.375a.256.256,0,0,1,.307-.007q1.992,1.194,3.992,2.376c.462.274.919.558,1.391.815a.49.49,0,0,0,.733-.475,2.062,2.062,0,0,0-.063-.357q-.654-2.9-1.31-5.793a.256.256,0,0,1,.087-.285q2.075-1.813,4.139-3.637a2.99,2.99,0,0,0,.723-.731v-.269A.642.642,0,0,0-691.564,1499.024Zm-7.866-3.271c.017-.021.034-.041.052-.061C-699.4,1495.712-699.414,1495.733-699.43,1495.754Zm.08-.09a.685.685,0,0,1,.092-.078A.685.685,0,0,0-699.35,1495.663Z" transform="translate(710.727 -1492.256)" fill="#9e9cab"/>
+</svg>

package/public/icons/status.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13 5.08A7 7 0 0 1 18.92 11h3.03c-.47-4.72-4.23-8.48-8.95-8.95v3.03zM18.92 13A7 7 0 0 1 13 18.92v3.03c4.72-.47 8.48-4.23 8.95-8.95h-3.03zM11 18.92c-3.39-.49-6-3.4-6-6.92s2.61-6.43 6-6.92V2.05c-5.05.5-9 4.76-9 9.95c0 5.19 3.95 9.45 9 9.95v-3.03z"/></svg>

package/public/icons/sticker.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M18.5 2h-13C3.6 2 2 3.6 2 5.5v13C2 20.4 3.6 22 5.5 22H16l6-6V5.5C22 3.6 20.4 2 18.5 2m1.6 13h-1.5c-1.9 0-3.5 1.6-3.5 3.5V20H5.8c-1 0-1.8-.8-1.8-1.8V5.8C4 4.8 4.8 4 5.8 4h12.5c1 0 1.8.8 1.8 1.8V15M7 7h10v2H7V7m0 4h10v2H7v-2m0 4h6v2H7v-2Z"/></svg>

package/public/icons/thumb-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="#f15c6d" d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57l-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>

package/public/icons/user.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 12q-1.65 0-2.825-1.175T8 8q0-1.65 1.175-2.825T12 4q1.65 0 2.825 1.175T16 8q0 1.65-1.175 2.825T12 12Zm-8 8v-2.8q0-.85.438-1.563T5.6 14.55q1.55-.775 3.15-1.163T12 13q1.65 0 3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20H4Z"/></svg>

package/public/icons/users.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M16.5 12A2.5 2.5 0 0 0 19 9.5A2.5 2.5 0 0 0 16.5 7A2.5 2.5 0 0 0 14 9.5a2.5 2.5 0 0 0 2.5 2.5M9 11a3 3 0 0 0 3-3a3 3 0 0 0-3-3a3 3 0 0 0-3 3a3 3 0 0 0 3 3m7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75M9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13Z"/></svg>

package/public/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="./icons/arrow_logo.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!-- CSS only -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+    <link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+/>
+  <!-- FONT STYLE -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!-- JavaScript Bundle with Popper -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
+    crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
+    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
+
+  <title>Isometrik Chat</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+
+</body>
+
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Isometric Chat",
+  "name": "Isometric Chat",
+  "icons": [
+    {
+      "src": "Logo-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "Logo-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "scope": "/",
+  "serviceworker": {
+    "src": "./service-worker.js",
+    "scope": "/"
+  },
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/offline.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Isometric Chat</title>
+</head>
+<body>
+  <h1>Sorry, You are offline</h1>
+</body>
+</html>

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/public/service-worker.js

@@ -0,0 +1,81 @@
+// service-worker.js
+
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = 'offline';
+
+const OFFLINE_URL = './offline.html';
+
+self.addEventListener('install', (event) => {
+  event.waitUntil((async () => {
+    const cache = await caches.open(CACHE_NAME);
+    // Setting {cache: 'reload'} in the new request will ensure that the response
+    // isn't fulfilled from the HTTP cache; i.e., it will be from the network.
+    await cache.add(new Request(OFFLINE_URL, {cache: 'reload'}));
+  })());
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil((async () => {
+    // Enable navigation preload if it's supported.
+    // See https://developers.google.com/web/updates/2017/02/navigation-preload
+    if ('navigationPreload' in self.registration) {
+      await self.registration.navigationPreload.enable();
+    }
+  })());
+
+  // Tell the active service worker to take control of the page immediately.
+  self.clients.claim();
+});
+
+
+self.addEventListener('fetch', (event) => {
+  // We only want to call event.respondWith() if this is a navigation request
+  // for an HTML page.
+  if (event.request.mode === 'navigate') {
+    event.respondWith((async () => {
+      try {
+        // First, try to use the navigation preload response if it's supported.
+        const preloadResponse = await event.preloadResponse;
+        if (preloadResponse) {
+          return preloadResponse;
+        }
+
+        const networkResponse = await fetch(event.request);
+        return networkResponse;
+      } catch (error) {
+        // catch is only triggered if an exception is thrown, which is likely
+        // due to a network error.
+        // If fetch() returns a valid HTTP response with a response code in
+        // the 4xx or 5xx range, the catch() will NOT be called.
+        console.log('Fetch failed; returning offline page instead.', error);
+
+        const cache = await caches.open(CACHE_NAME);
+        const cachedResponse = await cache.match(OFFLINE_URL);
+        return cachedResponse;
+      }
+    })());
+  }
+
+  // If our if() condition is false, then this fetch handler won't intercept the
+  // request. If there are any other fetch handlers registered, they will get a
+  // chance to call event.respondWith(). If no fetch handlers call
+  // event.respondWith(), the request will be handled by the browser as if there
+  // were no service worker involvement.
+});
+
+
+// self.addEventListener('install', event => {
+//   event.waitUntil(
+//     caches.open('offline-cache').then((cache) => {
+//       return cache.add('./offline.html');
+//     })
+//   );
+// });
+
+// self.addEventListener('fetch', event => {
+//   event.respondWith(
+//     caches.match(event.request).then(response => {
+//       return response || fetch(event.request) || caches.match('./offline.html');
+//     })
+//   );
+// });

package/src/App.js

@@ -0,0 +1,15 @@
+import React from "react";
+import WhatsappMainBox from "./pages/WhatsappMainBox";
+
+function App() {
+
+  return (
+    <div>
+        <>
+          <WhatsappMainBox showSideChatHeader={true} />
+        </>
+    </div>
+  );
+}
+
+export default App;

package/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

package/src/Authpage.js

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import Login from "./components/Registration/Login";
+import SignUp from "./components/Registration/SignUp";
+
+const Authpage = (props) => {
+  const {  theme } = props
+    const [isLoginPage, setLoginPage] = useState(true);
+    return (
+      <div>
+        {isLoginPage && <Login setLoginPage={setLoginPage}  theme={theme} />}
+        {!isLoginPage && <SignUp setLoginPage={setLoginPage}  theme={theme} />}
+      </div>
+    );
+};
+
+export default Authpage;

package/src/ChatContext.js

@@ -0,0 +1,172 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import { getCookie, setCookie } from "./lib/session";
+import client from "./utils/chatSdk";
+import { decodeChatBody, getDeviceId } from "./lib/helpers";
+import { ARROW_LOGO } from "./utils/global";
+
+const Chat = createContext();
+
+const ChatContext = (props) => {
+  const { children, mqttCreds } = props;
+
+  const [theme, setTheme] = useState();
+  const [loading, setLoading] = useState(true);
+  const [userloggedIn, setUserloggedIn] = useState(false);
+  const [userDetails, setUserDetails] = useState();
+  const [showLoader, setShowLoader] = useState(true);
+  const [findUserId, setFindUserId] = useState({});
+  const [state, setState] = useState({
+    selectedConvId: "",
+    messages: {},
+    conversations: [],
+    users: [],
+  });
+
+  const userId = getCookie("userId");
+
+  useEffect(() => {
+    const isDarkTheme = getCookie("theme");
+    isDarkTheme === "true" ? setTheme(true) : setTheme(false);
+    if (isDarkTheme === "true") {
+      const element = document.body;
+      element.classList.add("dark-theme");
+    }
+    getData();
+    fetchUserToken();
+    registerServiceWorker();
+  }, []);
+
+  const registerServiceWorker = () => {
+    try {
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('/service-worker.js')
+            .then(registration => {
+              console.log('Service worker registered:', registration);
+            })
+            .catch(error => {
+              console.log('Service worker registration failed:', error);
+            });
+        });
+      } else {
+        console.log('service worker not available');
+      }
+    }
+    catch(error) {
+      console.log('!! --- Error while registering service worker -- !!!');
+    }
+  }
+
+  const fetchUserToken =  async () => {
+    try {
+      const token = getCookie("userToken");
+      if (token) {
+        client?.user?.setUserToken(token);
+        setUserloggedIn(true);
+      } else {
+        setUserloggedIn(false);
+      }
+      setLoading(false);
+      client.user.getUserDetails().then((res) => {
+        setUserDetails(res);
+      });
+    }
+    catch(err) {
+      console.log('Errrroorrr -- ', err);
+    }
+  }
+
+  const getData = async () => {
+    const deviceId = await getDeviceId();
+
+    const mqttClient = client.initializeMqtt({
+      hostUri: "wss://connections.isometrik.io:2053/mqtt",
+      clientId: userId,
+      licenseKey: mqttCreds.licenseKey,  // context
+      projectId: mqttCreds.projectId, // context
+      keysetId: mqttCreds.keysetId,  // context
+      accountId: mqttCreds.accountId, // context
+      deviceId,
+    });
+    mqttClient.on("MESSAGE_RECEIVED", (msg) => {
+      const message = JSON.parse(msg?.payloadString);
+      console.log("APPmessage", message);
+      setFindUserId(message);
+      setState((prev) => {
+        if (
+          prev?.messages &&
+          Object.keys(prev?.messages).includes(message?.conversationId)
+        ) {
+          if (message?.body?.length > 0) {
+            return {
+              ...prev,
+              messages: {
+                ...prev?.messages,
+                [message?.conversationId]: [
+                  message,
+                  ...prev?.messages[message?.conversationId],
+                ],
+              },
+            };
+          }else {
+            return {
+              ...prev,
+              messages: {
+                ...prev?.messages,
+                [message?.conversationId]: [
+                  ...prev?.messages[message?.conversationId],
+                ],
+              },
+            };
+          }
+        } else {
+            return {
+              ...prev,
+              messages: {
+                ...prev?.messages,
+                [message?.conversationId]: [message],
+              },
+            };
+        }
+      });
+    });
+  };
+
+  useEffect(() => {
+    if(!Object.keys(findUserId).length || !findUserId.body || findUserId?.senderId === userId) return;
+    const title = `You have received a new message from ${findUserId.senderName}`;
+    const body = `${decodeChatBody(findUserId.body)}`;
+    const icon = ARROW_LOGO;
+
+    // const pushNotification = new Notification(title, { body, icon });
+
+    showNotification(title, body, icon);
+
+    // return () => pushNotification.close();
+
+  }, [findUserId.body])
+
+  function showNotification(title, body, icon) {
+    // Notification.requestPermission((result) => {
+    //   if (result === "granted") {
+      navigator?.serviceWorker?.ready?.then((registration) => {
+        registration.showNotification(title, { body, icon });
+      })?.catch(err => console.log('error while pushing notifications using sw - ', err));
+    //   }
+    // });
+  }
+
+  useEffect(() => {
+    setCookie("theme", theme);
+    const element = document.body;
+    element.classList.toggle("dark-theme");
+  }, [theme])
+
+  return (<Chat.Provider value={{ theme, setTheme, mqttCreds, setLoading, loading, setUserloggedIn, userloggedIn, setUserDetails, userDetails , setShowLoader, showLoader, userId, findUserId,  setFindUserId, setState, state   }}>{children}</Chat.Provider>)
+}
+
+export default ChatContext;
+
+export const ChatState = () => {
+  return useContext(Chat);
+}

package/src/Data/index.js

@@ -0,0 +1,110 @@
+
+export var chatList = [
+  {
+    id: "1",
+    name: "Harsh khandelwal",
+    message: "Hello World",
+    img: "https://i.pravatar.cc/250?u=mail@ashallendesign.co.uk",
+  },
+
+  {
+    id: "2",
+    name: "Akash sharma",
+    message: "Hello  there ",
+    img: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+  },
+  {
+    id: "3",
+    name: "Amit gupta",
+    message: "How are you bro..",
+    img: "https://eu.ui-avatars.com/api/?name=John+Doe&size=250",
+  },
+
+  {
+    id: "4",
+    name: "Sujjet kumar",
+    message: "Yeah im good hpw are you",
+    img: "https://placebeard.it/250/250",
+  },
+  {
+    id: "5",
+    name: "Harshita mittal",
+    message: "im on my way to coming",
+    // img: "https://avatars.dicebear.com/api/adventurer-neutral/mail%40ashallendesign.co.uk.svg",
+  },
+
+  {
+    id: "6",
+    name: "Sonu jain",
+    message: "Off to ALwar",
+    img: "https://robohash.org/mail@ashallendesign.co.uk",
+  },
+  {
+    id: "7",
+    name: "Nisha kumari",
+    message: " Welcome to Appscrip harsh",
+    img: "https://via.placeholder.com/250",
+  },
+  {
+    id: "8",
+    name: "Sujjet kumar",
+    message: "Yeah im good hpw are you",
+    img: "https://placebeard.it/250/250",
+  },
+  {
+    id: "9",
+    name: "Harshita mehta",
+    message: "im on my way to coming",
+    img: "https://robohash.org/mail@ashallendesign.co.uk",
+  },
+
+  {
+    id: "10",
+    name: "Sonu goyal",
+    message: "Off to ALwar",
+    img: "https://placebeard.it/250/250",
+  },
+  {
+    id: "11",
+    name: "Nisha mittal",
+    message: " Welcome to Appscrip harsh",
+    img: "https://placebear.com/250/250",
+  },
+];
+// ta = "mcdc"
+
+//  COLOR Code
+
+export const PRIMARY_COLOUR = "rgba(0, 0, 0, 0.8)";
+export const BG_COlOUR = "black";
+export const WhITE = "white";
+
+// FONT_SIZE_CODE
+export const fontSize = {
+  name: "17px",
+  message: "14px",
+};
+
+// BACKGROUND_IMAGE
+export var menuItem = [
+  "Archiv chat",
+  "Mute conversation",
+  "Delete Chat",
+  "Pinchat",
+  "mark as unread",
+];
+export var headerMenuitem = [
+  "New Group",
+  "New Community",
+  "Started Message",
+  "Setting",
+  "Logout",
+];
+export var searchmenuitem = [
+  "menuitem",
+  "New community",
+  "started message",
+  "logout",
+];
+
+// LOG0

package/src/assets/icons.js

@@ -0,0 +1,49 @@
+const icons = {
+  lock: (props) => (
+    <svg
+      width="10px"
+      height="12px"
+      viewBox="0 0 10 12"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5.00847986,1.6 C6.38255462,1.6 7.50937014,2.67435859 7.5940156,4.02703389 L7.59911976,4.1906399 L7.599,5.462 L7.75719976,5.46214385 C8.34167974,5.46214385 8.81591972,5.94158383 8.81591972,6.53126381 L8.81591972,9.8834238 C8.81591972,10.4731038 8.34167974,10.9525438 7.75719976,10.9525438 L2.25767996,10.9525438 C1.67527998,10.9525438 1.2,10.4731038 1.2,9.8834238 L1.2,6.53126381 C1.2,5.94158383 1.67423998,5.46214385 2.25767996,5.46214385 L2.416,5.462 L2.41679995,4.1906399 C2.41679995,2.81636129 3.49135449,1.68973395 4.84478101,1.60510326 L5.00847986,1.6 Z M5.00847986,2.84799995 C4.31163824,2.84799995 3.73624912,3.38200845 3.6709675,4.06160439 L3.6647999,4.1906399 L3.663,5.462 L6.35,5.462 L6.35111981,4.1906399 C6.35111981,3.53817142 5.88169076,2.99180999 5.26310845,2.87228506 L5.13749818,2.85416626 L5.00847986,2.84799995 Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  ),
+  singleTick: (props) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 15"
+      width="16"
+      height="15"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M10.91 3.316l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.879a.32.32 0 0 1-.484.033L1.891 7.769a.366.366 0 0 0-.515.006l-.423.433a.364.364 0 0 0 .006.514l3.258 3.185c.143.14.361.125.484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z"
+      ></path>
+    </svg>
+  ),
+  doubleTick: (props) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 15"
+      width="16"
+      height="15"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.879a.32.32 0 0 1-.484.033l-.358-.325a.319.319 0 0 0-.484.032l-.378.483a.418.418 0 0 0 .036.541l1.32 1.266c.143.14.361.125.484-.033l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.879a.32.32 0 0 1-.484.033L1.891 7.769a.366.366 0 0 0-.515.006l-.423.433a.364.364 0 0 0 .006.514l3.258 3.185c.143.14.361.125.484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z"
+      ></path>
+    </svg>
+  ),
+};
+
+// name: (props) => (),
+
+export default icons;