softchatjs-react/dist/components/emoji/index.mjs.map

Install the softchat-js SDKs

{"version":3,"sources":["../../../src/components/emoji/index.tsx","../../../src/providers/chatClientProvider.tsx","../../../src/providers/clientStateProvider.tsx","../../../src/theme/index.tsx"],"sourcesContent":["import React, {\r\n  Dispatch,\r\n  SetStateAction,\r\n  useContext,\r\n  useEffect,\r\n  useState,\r\n} from \"react\";\r\nimport EmojiPicker from \"emoji-picker-react\";\r\nimport styles from \"./emoji.module.css\";\r\nimport ChatClient, { Message } from \"softchatjs-core\";\r\nimport { CiFaceSmile } from \"react-icons/ci\";\r\nimport { BsReply } from \"react-icons/bs\";\r\nimport { AiOutlineDelete } from \"react-icons/ai\";\r\nimport { useChatClient } from \"../../providers/chatClientProvider\";\r\nimport { FiEdit2 } from \"react-icons/fi\";\r\nimport { CiEdit } from \"react-icons/ci\";\r\n\r\nconst emojis = [\"👍\", \"😔\", \"🙂\", \"😮\", \"😃\"];\r\n\r\ntype EmojiPanelProps = {\r\n  emojiPickerRef: any;\r\n  conversationId: string;\r\n  client: ChatClient;\r\n  message: Message;\r\n  recipientId: string;\r\n  setShowEmojiPanel: Dispatch<SetStateAction<boolean>>;\r\n};\r\n\r\ntype ReactionPanelProps = {\r\n  message: Message;\r\n  setEditDetails: Dispatch<\r\n    SetStateAction<\r\n      | { message: Message; isEditing?: boolean; isReplying?: boolean }\r\n      | undefined\r\n    >\r\n  >;\r\n  canEdit?: boolean;\r\n  openEmojiPanel: () => void;\r\n  optionsMenuRef: any;\r\n  mousePosition: {\r\n    x: number;\r\n    y: number;\r\n  };\r\n  conversationId: string;\r\n\r\n  closeOptionsMenu: () => void;\r\n  textInputRef: any;\r\n  client: ChatClient;\r\n};\r\n\r\nexport const EmojiPanel = (props: EmojiPanelProps) => {\r\n  const { client, message, conversationId, recipientId, setShowEmojiPanel } =\r\n    props;\r\n  const { config } = useChatClient();\r\n  const bgColor = config?.theme?.background?.secondary || \"#222529\";\r\n\r\n  const reactToMessage = ({ emoji }: { emoji: string }) => {\r\n    const msClient = client.messageClient(conversationId);\r\n\r\n    msClient.reactToMessage({\r\n      conversationId,\r\n      messageId: message.messageId,\r\n      reactions: [\r\n        {\r\n          emoji,\r\n          uid: client.chatUserId\r\n        },\r\n      ],\r\n      to: recipientId,\r\n    });\r\n    setShowEmojiPanel(false);\r\n  };\r\n  return (\r\n    <div\r\n      ref={props.emojiPickerRef}\r\n      style={{ background: bgColor }}\r\n      className={styles.emoji}\r\n    >\r\n      {/* <EmojiPicker\r\n        onEmojiClick={(e) => {\r\n          reactToMessage({ emoji: e.emoji });\r\n        }}\r\n        theme={\"dark\" as any}\r\n      /> */}\r\n      {emojis.map((item, index) => (\r\n        <div\r\n          key={index}\r\n          onClick={() => reactToMessage({ emoji: item })}\r\n          className={styles.reaction__emoji}\r\n        >\r\n          {item}\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const ReactionPanel = ({\r\n  setEditDetails,\r\n  message,\r\n  closeOptionsMenu,\r\n  textInputRef,\r\n  openEmojiPanel,\r\n  client,\r\n  canEdit,\r\n  conversationId,\r\n}: ReactionPanelProps) => {\r\n  const { config } = useChatClient();\r\n  const iconColor = config.theme?.icon || \"#72767D\";\r\n\r\n  const emojiList = [\r\n    {\r\n      emoji: <FiEdit2 size={16} color={iconColor} />,\r\n      onPress: () => {\r\n        setEditDetails({\r\n          message,\r\n          isEditing: true,\r\n        });\r\n        closeOptionsMenu();\r\n      },\r\n      enabled: canEdit,\r\n    },\r\n    {\r\n      emoji: <CiFaceSmile size={16} color={iconColor} />,\r\n      onPress: () => {\r\n        openEmojiPanel();\r\n      },\r\n      enabled: true,\r\n    },\r\n    {\r\n      emoji: <BsReply size={16} color={iconColor} />,\r\n      onPress: () => {\r\n        setEditDetails({\r\n          message,\r\n          isReplying: true,\r\n        });\r\n        closeOptionsMenu();\r\n        textInputRef.current?.focus();\r\n      },\r\n      enabled: true,\r\n    },\r\n    {\r\n      emoji: <AiOutlineDelete size={16} color={iconColor} />,\r\n      onPress: () => {\r\n        const msClient = client.messageClient(conversationId);\r\n        msClient.deleteMessage(message.messageId, message.to, conversationId);\r\n      },\r\n      enabled: canEdit,\r\n    },\r\n  ];\r\n  return (\r\n    <div className={styles.reactions}>\r\n      {emojiList.map((item, index) => {\r\n        if (item.enabled) {\r\n          return (\r\n            <div key={index} onClick={item.onPress} className={styles.reaction__emoji}>\r\n              {item.emoji}\r\n            </div>\r\n          );\r\n        }\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const InputEmojis = ({\r\n  onEmojiPick,\r\n}: {\r\n  onEmojiPick: (emoji: string) => void;\r\n}) => {\r\n  const { config } = useChatClient();\r\n  return (\r\n    <EmojiPicker\r\n      height={350}\r\n      width={300}\r\n      onEmojiClick={(e) => {\r\n        onEmojiPick(e.emoji);\r\n      }}\r\n      theme={config?.theme?.input?.emojiPickerTheme as any}\r\n    />\r\n  );\r\n};\r\n ","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"],"mappings":"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","names":["EmojiPicker","styles","CiFaceSmile","BsReply","AiOutlineDelete","createContext","useContext","createContext","useContext","useState","jsx","ChatStateContext","defaulTheme","jsx","ChatClientContext","createContext","defaulTheme","useChatClient","useContext","FiEdit2","jsx","emojis","EmojiPanel","props","client","message","conversationId","recipientId","setShowEmojiPanel","config","useChatClient","bgColor","reactToMessage","emoji","styles","item","index","ReactionPanel","setEditDetails","closeOptionsMenu","textInputRef","openEmojiPanel","canEdit","iconColor","emojiList","CiFaceSmile","BsReply","AiOutlineDelete","InputEmojis","onEmojiPick","EmojiPicker","e"]}