softchatjs-react/dist/components/chat/ChatTopNav.mjs.map

Install the softchat-js SDKs

{"version":3,"sources":["../../../src/providers/chatClientProvider.tsx","../../../src/providers/clientStateProvider.tsx","../../../src/theme/index.tsx","../../../src/components/chat/ChatTopNav.tsx","../../../src/components/avartar/avartar.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\r\nimport ChatClient from \"softchatjs-core\";\r\nimport { ChatStateProvider } from \"./clientStateProvider\";\r\nimport { defaulTheme } from \"../theme\";\r\nimport { ReactTheme } from \"../theme/type\";\r\n\r\ntype ContextType = {\r\n  config: { theme: ReactTheme },\r\n  client: ChatClient | null;\r\n};\r\n\r\nexport const ChatClientContext = createContext<ContextType>({\r\n  config: { theme: defaulTheme },\r\n  client: null,\r\n});\r\n\r\nexport const useChatClient = () => useContext(ChatClientContext);\r\n\r\nexport const ChatClientProvider = ({\r\n  theme,\r\n  children,\r\n  client\r\n}: {\r\n  theme?: ReactTheme\r\n  children: JSX.Element;\r\n  client: ChatClient | null\r\n}) => {\r\n\r\n  return (\r\n    <ChatClientContext.Provider value={{ config: { theme: theme? theme : defaulTheme }, client }}>\r\n      <ChatStateProvider>\r\n        {children}\r\n      </ChatStateProvider>\r\n    </ChatClientContext.Provider>\r\n  );\r\n};\r\n","import React, { createContext, useContext, useState } from \"react\";\r\nimport { Conversation, Media, Message } from \"softchatjs-core\";\r\n\r\nexport type ConversationItem = {\r\n  conversation: Conversation;\r\n  lastMessage: Message;\r\n  unread: string[];\r\n};\r\n\r\nexport type ConnectionStatus = {\r\n  isConnected: boolean;\r\n  fetchingConversations: boolean;\r\n  connecting: boolean;\r\n};\r\n\r\ntype Context = {\r\n  activeConversation: ConversationItem | null;\r\n  setActiveConversation: React.Dispatch<\r\n    React.SetStateAction<ConversationItem | null>\r\n  >;\r\n  conversations: ConversationItem[];\r\n  setConversations: React.Dispatch<React.SetStateAction<ConversationItem[]>>;\r\n  showImageModal: Media[];\r\n  setShowImageModal: React.Dispatch<React.SetStateAction<Media[]>>;\r\n  connectionStatus: ConnectionStatus;\r\n  setConnectionStatus: React.Dispatch<React.SetStateAction<ConnectionStatus>>;\r\n};\r\n\r\nexport const ChatStateContext = createContext<Context>({\r\n  activeConversation: null,\r\n  setActiveConversation: () => {},\r\n  conversations: [],\r\n  setConversations: () => {},\r\n  showImageModal: [],\r\n  setShowImageModal: () => {},\r\n  connectionStatus: {\r\n    isConnected: false,\r\n    fetchingConversations: false,\r\n    connecting: false,\r\n  },\r\n  setConnectionStatus: () => {},\r\n});\r\n\r\nexport const useChatState = () => useContext(ChatStateContext);\r\n\r\nexport const ChatStateProvider = ({ children }: { children: JSX.Element }) => {\r\n  const [activeConversation, setActiveConversation] =\r\n    useState<ConversationItem | null>(null);\r\n  const [conversations, setConversations] = useState<ConversationItem[]>([]);\r\n  const [showImageModal, setShowImageModal] = useState<Media[]>([]);\r\n  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>({\r\n    isConnected: false,\r\n    fetchingConversations: false,\r\n    connecting: false,\r\n  });\r\n\r\n  return (\r\n    <ChatStateContext.Provider\r\n      value={{\r\n        activeConversation,\r\n        setActiveConversation,\r\n        conversations,\r\n        setConversations,\r\n        showImageModal,\r\n        setShowImageModal,\r\n        connectionStatus,\r\n        setConnectionStatus,\r\n      }}\r\n    >\r\n      {children}\r\n    </ChatStateContext.Provider>\r\n  );\r\n};\r\n","import { ReactTheme } from \"./type\";\r\n\r\nexport const defaulTheme: ReactTheme = {\r\n  background: {\r\n    primary: \"#1b1d21\", // White for the primary background\r\n    secondary: \"#202326\", // Light grey for secondary background\r\n    disabled: \"#E0E0E0\", // Very light grey for disabled background\r\n  },\r\n  text: {\r\n    primary: \"white\", // Black text for high contrast\r\n    secondary: \"#4A4A4A\", // Dark grey for secondary text\r\n    disabled: \"#9E9E9E\", // Light grey for disabled text\r\n  },\r\n  action: {\r\n    primary: \"#007AFF\", // Bright blue for primary action buttons\r\n    secondary: \"#5AA3FF\", // Light blue for secondary action buttons\r\n  },\r\n  chatBubble: {\r\n    left: {\r\n      bgColor: \"#343434\", // Light grey for incoming message background\r\n      messageColor: \"white\", // Dark grey for incoming message text\r\n      messageTimeColor: \"#6D6D6D\", // Medium grey for message time\r\n      replyBorderColor: \"#D1D1D6\", // Slightly darker grey for reply border\r\n    },\r\n    right: {\r\n      bgColor: \"#343434\", // Light blue for outgoing message background\r\n      messageColor: \"white\", // Black for outgoing message text\r\n      messageTimeColor: \"#6D6D6D\", // Medium grey for message time\r\n      replyBorderColor: \"#A3D1FF\", // Medium blue for reply border\r\n    },\r\n  },\r\n  icon: \"white\", // Dark grey for icons\r\n  divider: \"rgba(128, 128, 128, 0.136)\", // Light grey for dividers\r\n  hideDivider: false,\r\n  input: {\r\n    bgColor: \"#1b1d21\", // Light grey for input background\r\n    textColor: \"white\", // Black for input text\r\n    emojiPickerTheme: \"dark\", // Light theme for emoji picker\r\n  },\r\n};\r\n","import React from 'react'\r\nimport { ConversationListItem, Message } from 'softchatjs-core';\r\nimport { useChatClient } from '../../providers/chatClientProvider';\r\nimport styles from \"./chat.module.css\";\r\nimport { MdOutlineClose, MdOutlineMenu } from 'react-icons/md';\r\nimport Avartar from '../avartar/avartar';\r\nimport { useChatState } from '../../providers/clientStateProvider';\r\n\r\nexport const ChatTopNav = ({\r\n  setMainListOpen,\r\n  renderChatHeader,\r\n  onClose,\r\n  chatUserId\r\n}: {\r\n  setMainListOpen: any;\r\n  renderChatHeader?: () => JSX.Element;\r\n  onClose: () => void;\r\n  chatUserId: string\r\n}) => {\r\n  const { client, config } = useChatClient();\r\n  const { activeConversation, setActiveConversation } = useChatState();\r\n  const { theme } = config;\r\n\r\n  const conversationTitle = () => {\r\n    try {\r\n      const participantList = activeConversation.conversation.participantList;\r\n      const data = participantList.filter(p => p.participantDetails.uid !== chatUserId)\r\n      return {\r\n        profileUrl: data[0].participantDetails.profileUrl,\r\n        title: data[0].participantDetails.firstname || data[0].participantDetails.username,\r\n      }\r\n    } catch (error) {\r\n      return   {\r\n        profileUrl: \"https://avatar.iran.liara.run/public\",\r\n        title: 'No name'\r\n      }\r\n    }\r\n  }\r\n\r\n  return (\r\n    <div\r\n      style={{ backgroundColor: theme?.background?.secondary || \"#222529\" }}\r\n      className={styles.topnav}\r\n    >\r\n      {renderChatHeader ? (\r\n        renderChatHeader()\r\n      ) : (\r\n        <div\r\n          style={{ paddingLeft: \"10px\", display: \"flex\", justifyContent: 'space-between', width: \"100%\", padding: '15px', alignItems: \"center\" }}\r\n        >\r\n          <Avartar initials={conversationTitle().title.substring(0,1)} url={conversationTitle().profileUrl} />\r\n          <div className={styles.topnav__menu} style={{  }}>\r\n            <MdOutlineClose\r\n              color={theme?.icon}\r\n              onClick={() => {\r\n                setMainListOpen(true);\r\n                setActiveConversation(null);\r\n                onClose()\r\n              }}\r\n              size={22}\r\n            />\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n","import React, { useEffect, useState } from \"react\";\r\n\r\nimport styles from \"./avartar.module.css\";\r\nimport { Message } from \"softchatjs-core\";\r\nimport Text from \"../text/text\";\r\nimport { useChatClient } from \"../../providers/chatClientProvider\";\r\n\r\nconst Avartar = ({\r\n  initials,\r\n  url,\r\n  size = 35,\r\n}: {\r\n  initials: string;\r\n  url?: string;\r\n  size?: number;\r\n}) => {\r\n  const { client, config } = useChatClient();\r\n\r\n  if (!url) {\r\n    return (\r\n      <div\r\n        className={styles.avatar}\r\n        style={{ height: size, width: size, borderRadius: size, backgroundColor: config.theme.background.disabled }}\r\n      >\r\n        <p\r\n          style={{\r\n            fontSize: 35 * 0.5,\r\n            fontWeight: \"bold\",\r\n            textTransform: \"capitalize\",\r\n            color: config.theme.text.secondary\r\n          }}\r\n        >\r\n          {initials}\r\n        </p>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={styles.avatar}\r\n      style={{ height: size, width: size, borderRadius: size }}\r\n    >\r\n      <img\r\n        src={url}\r\n        alt=\"avatar\"\r\n        style={{ height: \"100%\", width: \"100%\", borderRadius: \"100%\" }}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Avartar;\r\n"],"mappings":"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","names":["createContext","useContext","createContext","useContext","useState","jsx","ChatStateContext","useChatState","defaulTheme","jsx","ChatClientContext","createContext","defaulTheme","useChatClient","useContext","styles","MdOutlineClose","styles","jsx","Avartar","initials","url","size","client","config","useChatClient","styles","avartar_default","jsx","jsxs","ChatTopNav","setMainListOpen","renderChatHeader","onClose","chatUserId","client","config","useChatClient","activeConversation","setActiveConversation","useChatState","theme","conversationTitle","data","p","styles","avartar_default","MdOutlineClose"]}