{"version":3,"sources":["../../../src/components/edit-panel/index.tsx","../../../src/components/text/text.tsx","../../../src/providers/chatClientProvider.tsx","../../../src/providers/clientStateProvider.tsx","../../../src/theme/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport styles from \"./edit.module.css\";\r\nimport Text from \"../text/text\";\r\nimport { Message } from \"softchatjs-core\";\r\nimport { AiOutlineClose } from \"react-icons/ai\";\r\nimport { useChatClient } from \"../../providers/chatClientProvider\";\r\n\r\ntype EditPanelProps = {\r\n  message: Message;\r\n  isEditing?: boolean;\r\n  isReplying?: boolean;\r\n  closePanel: () => void;\r\n  width: number\r\n};\r\n\r\nconst EditPanel = (props: EditPanelProps) => {\r\n  const { isEditing, message, isReplying, closePanel, width } = props;\r\n  const { config } = useChatClient();\r\n  const { theme } = config;\r\n\r\n  const secondaryColor = theme?.background?.secondary;\r\n  const textColor = theme?.text?.primary;\r\n  const iconColor = theme?.icon;\r\n\r\n  return (\r\n    <div\r\n      className={\r\n        isEditing || isReplying\r\n          ? `${styles.edit} ${styles.editOpen}`\r\n          : `${styles.edit}`\r\n      }\r\n      style={{ background: secondaryColor || \"#1b1d21\", width: width }}\r\n    >\r\n      <div\r\n        style={{ background: secondaryColor || \"#222529\" }}\r\n        className={styles.edit__message}\r\n      >\r\n        <div style={{ width: \"90%\" }}>\r\n          <Text text=\"You\" styles={{ color: textColor }} weight=\"bold\" />\r\n          <Text\r\n            text={message?.message}\r\n            styles={{ color: textColor }}\r\n            weight=\"medium\"\r\n          />\r\n        </div>\r\n\r\n        <div style={{ width: \"10%\", marginRight: '15px' }}>\r\n          {message?.attachedMedia[0]?.mediaUrl && (\r\n            <img\r\n              style={{ height: \"100%\", width: \"100%\", borderRadius: \"5px\" }}\r\n              src={message?.attachedMedia[0]?.mediaUrl}\r\n              alt=\"\"\r\n            />\r\n          )}\r\n        </div>\r\n        <AiOutlineClose\r\n          onClick={closePanel}\r\n          color={iconColor}\r\n          size={20}\r\n          style={{ cursor: \"pointer\" }}\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default EditPanel;\r\n","import React from \"react\";\r\nimport styles from \"./text.module.css\";\r\n\r\ntype TextProps = {\r\n  text: string;\r\n  styles?: React.CSSProperties | undefined;\r\n  weight?: \"bold\" | \"medium\";\r\n  size?: \"sm\" | \"md\" | \"xs\";\r\n};\r\n\r\nconst Text = (props: TextProps) => {\r\n  const textWeight = {\r\n    bold: styles.textBold,\r\n    medium: `${styles.textMedium}`,\r\n  };\r\n\r\n  const textSize: any = {\r\n    sm: styles.textSmall,\r\n    md: styles.textSizeMd,\r\n    xs: styles.textExtraSmall,\r\n  };\r\n\r\n  return (\r\n    <p\r\n      style={props.styles}\r\n      className={`${styles.text} ${textWeight[props.weight || \"medium\"]} ${\r\n        textSize[props.size || \"md\"]\r\n      }`}\r\n    >\r\n      {props.text}\r\n    </p>\r\n  );\r\n};\r\n\r\nexport default Text;\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":"AAEA,OAAOA,MAAY,2BCDnB,OAAOC,MAAY,iCAsBf,cAAAC,MAAA,oBAbJ,IAAMC,EAAQC,GAAqB,CACjC,IAAMC,EAAa,CACjB,KAAMJ,EAAO,SACb,OAAQ,GAAGA,EAAO,UAAU,EAC9B,EAEMK,EAAgB,CACpB,GAAIL,EAAO,UACX,GAAIA,EAAO,WACX,GAAIA,EAAO,cACb,EAEA,OACEC,EAAC,KACC,MAAOE,EAAM,OACb,UAAW,GAAGH,EAAO,IAAI,IAAII,EAAWD,EAAM,QAAU,QAAQ,CAAC,IAC/DE,EAASF,EAAM,MAAQ,IAAI,CAC7B,GAEC,SAAAA,EAAM,KACT,CAEJ,EAEOG,EAAQJ,ED7Bf,OAAS,kBAAAK,MAAsB,iBEL/B,OAAS,iBAAAC,EAAe,cAAAC,MAAkB,QCA1C,OAAgB,iBAAAC,EAAe,cAAAC,EAAY,YAAAC,MAAgB,QAyDvD,cAAAC,MAAA,oBA7BG,IAAMC,EAAmBJ,EAAuB,CACrD,mBAAoB,KACpB,sBAAuB,IAAM,CAAC,EAC9B,cAAe,CAAC,EAChB,iBAAkB,IAAM,CAAC,EACzB,eAAgB,CAAC,EACjB,kBAAmB,IAAM,CAAC,EAC1B,iBAAkB,CAChB,YAAa,GACb,sBAAuB,GACvB,WAAY,EACd,EACA,oBAAqB,IAAM,CAAC,CAC9B,CAAC,ECvCM,IAAMK,EAA0B,CACrC,WAAY,CACV,QAAS,UACT,UAAW,UACX,SAAU,SACZ,EACA,KAAM,CACJ,QAAS,QACT,UAAW,UACX,SAAU,SACZ,EACA,OAAQ,CACN,QAAS,UACT,UAAW,SACb,EACA,WAAY,CACV,KAAM,CACJ,QAAS,UACT,aAAc,QACd,iBAAkB,UAClB,iBAAkB,SACpB,EACA,MAAO,CACL,QAAS,UACT,aAAc,QACd,iBAAkB,UAClB,iBAAkB,SACpB,CACF,EACA,KAAM,QACN,QAAS,6BACT,YAAa,GACb,MAAO,CACL,QAAS,UACT,UAAW,QACX,iBAAkB,MACpB,CACF,EFTM,cAAAC,MAAA,oBAnBC,IAAMC,EAAoBC,EAA2B,CAC1D,OAAQ,CAAE,MAAOC,CAAY,EAC7B,OAAQ,IACV,CAAC,EAEYC,EAAgB,IAAMC,EAAWJ,CAAiB,EFsBvD,OACE,OAAAK,EADF,QAAAC,MAAA,oBAtBR,IAAMC,EAAaC,GAA0B,CAC3C,GAAM,CAAE,UAAAC,EAAW,QAAAC,EAAS,WAAAC,EAAY,WAAAC,EAAY,MAAAC,CAAM,EAAIL,EACxD,CAAE,OAAAM,CAAO,EAAIC,EAAc,EAC3B,CAAE,MAAAC,CAAM,EAAIF,EAEZG,EAAiBD,GAAO,YAAY,UACpCE,EAAYF,GAAO,MAAM,QACzBG,EAAYH,GAAO,KAEzB,OACEX,EAAC,OACC,UACEI,GAAaE,EACT,GAAGS,EAAO,IAAI,IAAIA,EAAO,QAAQ,GACjC,GAAGA,EAAO,IAAI,GAEpB,MAAO,CAAE,WAAYH,GAAkB,UAAW,MAAOJ,CAAM,EAE/D,SAAAP,EAAC,OACC,MAAO,CAAE,WAAYW,GAAkB,SAAU,EACjD,UAAWG,EAAO,cAElB,UAAAd,EAAC,OAAI,MAAO,CAAE,MAAO,KAAM,EACzB,UAAAD,EAACgB,EAAA,CAAK,KAAK,MAAM,OAAQ,CAAE,MAAOH,CAAU,EAAG,OAAO,OAAO,EAC7Db,EAACgB,EAAA,CACC,KAAMX,GAAS,QACf,OAAQ,CAAE,MAAOQ,CAAU,EAC3B,OAAO,SACT,GACF,EAEAb,EAAC,OAAI,MAAO,CAAE,MAAO,MAAO,YAAa,MAAO,EAC7C,SAAAK,GAAS,cAAc,CAAC,GAAG,UAC1BL,EAAC,OACC,MAAO,CAAE,OAAQ,OAAQ,MAAO,OAAQ,aAAc,KAAM,EAC5D,IAAKK,GAAS,cAAc,CAAC,GAAG,SAChC,IAAI,GACN,EAEJ,EACAL,EAACiB,EAAA,CACC,QAASV,EACT,MAAOO,EACP,KAAM,GACN,MAAO,CAAE,OAAQ,SAAU,EAC7B,GACF,EACF,CAEJ,EAEOI,EAAQhB","names":["styles","styles","jsx","Text","props","textWeight","textSize","text_default","AiOutlineClose","createContext","useContext","createContext","useContext","useState","jsx","ChatStateContext","defaulTheme","jsx","ChatClientContext","createContext","defaulTheme","useChatClient","useContext","jsx","jsxs","EditPanel","props","isEditing","message","isReplying","closePanel","width","config","useChatClient","theme","secondaryColor","textColor","iconColor","styles","text_default","AiOutlineClose","edit_panel_default"]}