fix: added theme

packages/examples/sdk-frontend-react/src/app/app.tsx

@@ -77,6 +77,7 @@ import {
 import ChatUITest from './ChatUITest/ChatUITest';
 import MessageListTest from './ChatUITest/MessageListTest';
 import { MessageBubbles } from './ChatUITest/MessageBubbles';
+import { CHAT_THEME_OPTIONS } from 'packages/uiweb/src/lib/components/chat/theme';
 
 window.Buffer = window.Buffer || Buffer;
 
@@ -301,7 +302,7 @@ export function App() {
           <Web3Context.Provider value={{ account, active, library, chainId }}>
             <SocketContext.Provider value={socketData}>
               <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
-                <ChatUIProvider account={account!} decryptedPgpPvtKey={pgpPrivateKey} env={env} >
+                <ChatUIProvider account={account!} pgpPrivateKey={pgpPrivateKey} env={env} theme={CHAT_THEME_OPTIONS.DARK}>
                 <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                   <Routes>
                     <Route

packages/uiweb/src/lib/components/chat/MessageList/MessageList.tsx

@@ -11,6 +11,7 @@ import { MessageBubble } from '../MessageBubble';
 import { appendUniqueMessages, dateToFromNowDaily, pCAIP10ToWallet } from '../../../helpers';
 import { useChatData, usePushChatSocket } from '../../../hooks';
 import { Messagetype } from '../../../types';
+import { ThemeContext } from '../theme/ThemeProvider';
 
 
 
@@ -19,12 +20,13 @@ export const MessageList: React.FC<IMessageListProps> = (
   options: IMessageListProps
 ) => {
   const { conversationHash, limit = chatLimit } = options || {};
-  const { decryptedPgpPvtKey, account } = useChatData();
+  const { pgpPrivateKey, account } = useChatData();
   const [messages, setMessages] = useState<Messagetype>();
   const { historyMessages, loading } = useFetchHistoryMessages();
   const listInnerRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const { messagesSinceLastConnection } = usePushChatSocket();
+  const theme = useContext(ThemeContext);
   const dates = new Set();
 
   useEffect(() => {
@@ -54,7 +56,7 @@ export const MessageList: React.FC<IMessageListProps> = (
         await getMessagesCall();
       })();
     }
-  }, [conversationHash, decryptedPgpPvtKey, account]);
+  }, [conversationHash, pgpPrivateKey, account]);
 
   useEffect(() => {
     scrollToBottom(null);
@@ -136,7 +138,7 @@ export const MessageList: React.FC<IMessageListProps> = (
         margin="15px 0"
         fontSize="14px"
         fontWeight="600"
-        color="#AFAFB6"
+        color={theme.textColorSecondary}
         textAlign="center"
       >
         {timestampDate}

packages/uiweb/src/lib/components/chat/theme/ThemeProvider.tsx

@@ -3,7 +3,7 @@
  */
 import { createContext } from 'react';
 
-import { IChatTheme, lightTheme } from './index';
+import {  IChatTheme, lightTheme } from './index';
 
 /**
  * @param theme optional: light or dark theme. defaults to light
@@ -12,8 +12,9 @@ import { IChatTheme, lightTheme } from './index';
  */
 export interface IThemeProviderProps {
     theme?: 'light' | 'dark';
-    // customTheme?: Partial<IChatTheme>;
+    // themeOverride?: Partial<IChatThemeOverride>;
     children: any;
 }
 
+
 export const ThemeContext = createContext<IChatTheme>(lightTheme);

packages/uiweb/src/lib/components/chat/theme/index.ts

@@ -2,14 +2,18 @@
  * @file theme file: all the predefined themes are defined here
  */
 
-
+export const CHAT_THEME_OPTIONS = {
+    LIGHT: 'light',
+    DARK: 'dark',
+
+  } as const;
+
+  export type ChatThemeOptions = (typeof CHAT_THEME_OPTIONS)[keyof typeof CHAT_THEME_OPTIONS];
 export interface IChatTheme {
     bgColorPrimary?: string;
     bgColorSecondary?: string;
     textColorPrimary?: string;
     textColorSecondary?: string;
-    //what should name of gray color
-    //name of search bar color
     accentBgColor?:string;
     accentTextColor?:string;
     btnColorPrimary?: string;
@@ -19,7 +23,7 @@ export interface IChatTheme {
     fontFamily?: string;
   }
 
-  export const lightTheme: IChatTheme = {
+  export const lightTheme: IChatTheme  = {
     bgColorPrimary:'#fff',
     bgColorSecondary:'linear-gradient(179.97deg, #EEF5FF 0.02%, #ECE9FA 123.25%)',
     textColorPrimary:'#000',
@@ -44,4 +48,10 @@ export interface IChatTheme {
     borderRadius:'32px',
     iconColorPrimary:'brightness(0) saturate(100%) invert(89%) sepia(8%) saturate(1567%) hue-rotate(191deg) brightness(86%) contrast(93%)'
   };
-
+
+
+  //function to return final theme object
+export const getCustomChatTheme = (theme:string | undefined) => {
+    // return Object.assign({}, theme===CHAT_THEME_OPTIONS.DARK?darkTheme:lightTheme, themeOverride);
+    return theme===CHAT_THEME_OPTIONS.DARK?darkTheme:lightTheme;
+  }

packages/uiweb/src/lib/context/chatContext.ts

@@ -6,8 +6,8 @@ import { createContext } from "react";
 export interface IChatDataContextValues {
     account: string | null;
     setAccount: React.Dispatch<React.SetStateAction<string| null>>;
-    decryptedPgpPvtKey: string | null;
-    setDecryptedPgpPvtKey: React.Dispatch<React.SetStateAction<string | null>>;
+    pgpPrivateKey: string | null;
+    setPgpPrivateKey: React.Dispatch<React.SetStateAction<string | null>>;
     env: Env;
     setEnv: React.Dispatch<React.SetStateAction<Env>>;
     pushChatSocket: any;
@@ -23,8 +23,8 @@ export const initialChatDataContextValues: IChatDataContextValues = {
     setAccount: () => {
       /**/
     },
-    decryptedPgpPvtKey: null,
-    setDecryptedPgpPvtKey: () => {
+    pgpPrivateKey: '',
+    setPgpPrivateKey: () => {
       /**/
     },
     env: Constants.ENV.DEV,

packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx

@@ -5,30 +5,30 @@ import {
   IChatDataContextValues,
 } from '../context/chatContext';
 import { ThemeContext } from '../components/chat/theme/ThemeProvider';
-import { IChatTheme, lightTheme } from '../components/chat/theme';
 import useGetChatProfile from '../hooks/useGetChatProfile';
 import { IUser } from '@pushprotocol/restapi';
+import { ChatThemeOptions, IChatTheme, getCustomChatTheme } from '../components/chat/theme';
 
 export interface IChatUIProviderProps {
   children: ReactNode;
-  theme?: IChatTheme;
-  customeTheme?: IChatTheme;
+  theme?: ChatThemeOptions;
+  themeOverride?: Partial<IChatTheme>;
   account?: string | null;
-  decryptedPgpPvtKey?: string | null;
+  pgpPrivateKey?: string | null;
   env?: ENV;
 }
 
 export const ChatUIProvider = ({
   children,
   account = null,
   theme,
-  decryptedPgpPvtKey = null,
+  pgpPrivateKey = null,
   env = Constants.ENV.PROD,
 }: IChatUIProviderProps) => {
   const [accountVal, setAccountVal] = useState<string | null>(account);
   const [pushChatSocket, setPushChatSocket] = useState<any>(null);
-  const [decryptedPgpPvtKeyVal, setDecryptedPgpPvtKeyVal] =
-    useState<string | null>(decryptedPgpPvtKey);
+  const [pgpPrivateKeyVal, setPgpPrivateKeyVal] =
+    useState<string | null>(pgpPrivateKey);
   const [envVal, setEnvVal] = useState<ENV>(env);
   const {fetchChatProfile} = useGetChatProfile();
   const [connectedProfile,setConnectedProfile]=useState<IUser | undefined>(undefined);
@@ -38,8 +38,8 @@ export const ChatUIProvider = ({
 
 useEffect(()=>{
     setAccountVal(account)
-    setDecryptedPgpPvtKeyVal(decryptedPgpPvtKey)
-},[decryptedPgpPvtKey])
+    setPgpPrivateKeyVal(pgpPrivateKey)
+},[pgpPrivateKey])
 
 useEffect(() => {
     (async () => {
@@ -55,8 +55,8 @@ useEffect(() => {
   const value: IChatDataContextValues = {
     account: accountVal,
     setAccount: setAccountVal,
-    decryptedPgpPvtKey: decryptedPgpPvtKeyVal,
-    setDecryptedPgpPvtKey: setDecryptedPgpPvtKeyVal,
+    pgpPrivateKey: pgpPrivateKeyVal,
+    setPgpPrivateKey: setPgpPrivateKeyVal,
     env: envVal,
     setEnv: setEnvVal,
     pushChatSocket,
@@ -66,7 +66,10 @@ useEffect(() => {
     connectedProfile,
     setConnectedProfile
   };
-  const PROVIDER_THEME = Object.assign({}, lightTheme, theme);
+
+
+   const PROVIDER_THEME = getCustomChatTheme(theme);
+
   return (
     <ThemeContext.Provider value={PROVIDER_THEME}>
       <ChatDataContext.Provider value={value}>

packages/uiweb/src/lib/hooks/chat/useFetchHistoryMessages.tsx

@@ -18,7 +18,7 @@ const useFetchHistoryMessages
   const [error, setError] = useState<string>();
   const [loading, setLoading] = useState<boolean>(false);
 
-  const { account, env,decryptedPgpPvtKey } =
+  const { account, env,pgpPrivateKey } =
   useContext<any>(ChatDataContext);
 
   const historyMessages = useCallback(async ({threadHash,limit = 10,}:HistoryMessagesParams) => {
@@ -28,8 +28,8 @@ const useFetchHistoryMessages
         const chatHistory:IMessageIPFS[] = await PushAPI.chat.history({
             threadhash: threadHash,
             account: account,
-            toDecrypt: decryptedPgpPvtKey ? true : false,
-            pgpPrivateKey: String(decryptedPgpPvtKey),
+            toDecrypt: pgpPrivateKey ? true : false,
+            pgpPrivateKey: String(pgpPrivateKey),
             limit: limit,
             env: env
           });
@@ -43,7 +43,7 @@ const useFetchHistoryMessages
     } finally {
       setLoading(false);
     }
-  }, [decryptedPgpPvtKey,account,env]);
+  }, [pgpPrivateKey,account,env]);
 
   return { historyMessages, error, loading };
 };

packages/uiweb/src/lib/hooks/chat/usePushChatSocket.ts

@@ -17,7 +17,7 @@ export type PushChatSocketHookOptions = {
 export const usePushChatSocket = () => {
   const {
     account,
-    decryptedPgpPvtKey,
+    pgpPrivateKey,
     pushChatSocket,
     setPushChatSocket,
     setIsPushChatSocketConnected,
@@ -34,15 +34,14 @@ export const usePushChatSocket = () => {
     });
 
     pushChatSocket?.on(EVENTS.DISCONNECT, (reason: string) => {
-      // console.log("space socket disconnected", reason);
       setIsPushChatSocketConnected(false);
     });
 
 
     pushChatSocket?.on(
         EVENTS.CHAT_RECEIVED_MESSAGE,
         async (chat: any) => {
-         if (!connectedProfile || !decryptedPgpPvtKey) {
+         if (!connectedProfile || !pgpPrivateKey) {
             return;
           }
         //   const chatId = getChatId({ msg: chat, account:account! }).toLowerCase();
@@ -57,7 +56,7 @@ export const usePushChatSocket = () => {
           const response = await PushAPI.chat.decryptConversation({
             messages: [chat],
             connectedUser: connectedProfile,
-            pgpPrivateKey: decryptedPgpPvtKey,
+            pgpPrivateKey: pgpPrivateKey,
             env: env,
           });
           if (response && response.length) {
@@ -71,7 +70,7 @@ export const usePushChatSocket = () => {
   }, [
     pushChatSocket,
     account,
-    decryptedPgpPvtKey,
+    pgpPrivateKey,
     messagesSinceLastConnection,
     env,