softchatjs-react-native/dist/components/Conversations/ConversationAvatar.mjs

React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com

// src/components/Conversations/ConversationAvatar.tsx
import {
  View as View2,
  StyleSheet as StyleSheet2,
  Text as Text2
} from "react-native";
import React4, { useMemo } from "react";

// src/utils/index.ts
import moment from "moment";
import { MessageStates } from "softchatjs-core";
var getUserInfoWithId = (userId, participantList) => {
  let presentUser = participantList.find((participant) => participant.participantId === userId);
  let otherParticipants = participantList.filter((participant) => participant.participantId !== userId);
  return { presentUser: presentUser?.participantDetails, receivingUser: otherParticipants[0]?.participantDetails };
};

// src/constants/Colors.ts
var Colors = {
  greyLighter: "#F0F0F0"
};

// src/components/Conversations/ConversationAvatar.tsx
import { Image } from "expo-image";

// src/contexts/ChatProvider.tsx
import React3, { createContext as createContext3, useContext as useContext3 } from "react";

// src/contexts/ModalProvider.tsx
import React, { createContext, useContext, useState } from "react";
import {
  Modal,
  View
} from "react-native";
var initial = {
  displayModal: () => {
  },
  resetModal: () => {
  },
  modalProps: {
    dismissable: true,
    justifyContent: "center",
    children: null,
    animation: "slide",
    containerWidth: "100%"
  }
};
var ModalProviderContext = createContext(initial);

// src/theme/colors.ts
var teal = {
  50: "#DCF2F0",
  100: "#A9DFD8",
  200: "#73CABE",
  300: "#3AB4A4",
  400: "#00A391",
  500: "#00927E",
  600: "#008572",
  700: "#007662",
  800: "#006654",
  900: "#004A38"
};
var green = {
  50: "#E6F5E4",
  100: "#C2E6BD",
  200: "#9AD693",
  300: "#6FC666",
  400: "#4ABA42",
  500: "#17AE13",
  600: "#029F04",
  700: "#008D00",
  800: "#007C00",
  900: "#005E00"
};
var grey = {
  50: "#F6F6FF",
  100: "#F2F1FF",
  200: "#EBEBF9",
  300: "#CAC9D7",
  400: "#ACACB9",
  500: "#82818F",
  600: "#6D6D7A",
  700: "#4D4D59",
  800: "#2B2B36",
  900: "#21222D",
  A100: "#1D1E26"
};
var stone = {
  50: "#F8F8F8",
  100: "#EFEFEF",
  200: "#E8E8E8",
  300: "#D9D9D9",
  400: "#D2D2D2",
  500: "#A0A0A0",
  600: "#87888C",
  700: "#2C2D33",
  800: "#1D1E26",
  900: "#171821"
};

// src/theme/index.ts
var theme = {
  background: {
    primary: stone[900],
    secondary: grey[900],
    disabled: grey[800]
  },
  text: {
    primary: "black",
    secondary: stone[200],
    disabled: stone[500]
  },
  action: {
    primary: teal[50],
    secondary: stone[300]
  },
  chatBubble: {
    left: {
      bgColor: grey[900],
      messageColor: stone[200],
      messageTimeColor: "grey",
      replyBorderColor: stone[200]
    },
    right: {
      bgColor: "#474952",
      messageColor: "white",
      messageTimeColor: "grey",
      replyBorderColor: green[900]
    }
  },
  icon: "white",
  divider: stone[700]
};
var theme_default = theme;

// src/contexts/MessageStateContext.tsx
import React2, {
  createContext as createContext2,
  useState as useState2,
  useContext as useContext2
} from "react";
import { Audio } from "expo-av";

// src/constants/defaultUser.ts
var defaultUser_default = {
  id: "",
  uid: "",
  username: "",
  firstname: "",
  lastname: "",
  profileUrl: "",
  color: "",
  custom: {}
};

// src/contexts/MessageStateContext.tsx
var initialMessageStateContext = {
  globalTextMessage: "",
  setGlobalTextMessage: () => {
  },
  stickers: [],
  setStickers: () => {
  },
  pendingMessages: [],
  addNewPendingMessages: (message) => {
  },
  removePendingMessage: (messageId) => {
  },
  updatePendingMessage: (messageId, message) => {
  },
  playVoiceMessage: (media) => {
  },
  pauseVoiceMessage: () => {
  },
  resumeVoiceMessage: () => {
  },
  audioState: null,
  unload: () => {
  },
  sound: null,
  activeVoiceMessage: null,
  avPlayBackStatus: null,
  userMeta: defaultUser_default,
  setUserMeta: () => {
  },
  conversationList: [],
  setConversationList: () => {
  }
};
var MessageStateContext = createContext2(
  initialMessageStateContext
);

// src/contexts/ChatProvider.tsx
var ConfigContext = createContext3({
  theme: theme_default,
  client: null,
  fontFamily: void 0,
  fontScale: 1
});
function useConfig() {
  return useContext3(ConfigContext);
}

// src/components/Conversations/ConversationAvatar.tsx
var avatarSize = 50;
var ConversationAvatar = ({
  type,
  chatUserId,
  participantList,
  groupMeta,
  conversationTitle
}) => {
  const { fontFamily, fontScale } = useConfig();
  const userInfo = useMemo(() => {
    if (type === "private-chat") {
      return getUserInfoWithId(chatUserId, participantList);
    }
    return null;
  }, [chatUserId, participantList, type]);
  const imageUri = type === "private-chat" ? userInfo?.receivingUser?.profileUrl : groupMeta?.groupIcon;
  const initials = conversationTitle ? conversationTitle.substring(0, 1) : "";
  return imageUri ? /* @__PURE__ */ React4.createElement(Image, { source: { uri: imageUri }, style: styles.avatar, cachePolicy: "disk" }) : /* @__PURE__ */ React4.createElement(View2, { style: styles.avatar }, /* @__PURE__ */ React4.createElement(Text2, { style: { ...styles.avatarInitials, fontSize: 30 * fontScale, fontFamily } }, initials));
};
var styles = StyleSheet2.create({
  main: {
    height: "100%",
    width: "100%"
  },
  conversationTitle: {
    color: "black",
    fontSize: 20,
    textTransform: "capitalize"
  },
  messageText: {
    color: "black",
    fontSize: 17
  },
  messageTime: {},
  avatar: {
    height: avatarSize,
    width: avatarSize,
    borderRadius: avatarSize,
    backgroundColor: Colors.greyLighter,
    alignItems: "center",
    justifyContent: "center",
    marginEnd: 10
  },
  avatarInitials: {
    fontSize: 30,
    textTransform: "capitalize",
    color: "white"
  },
  listItem: {
    height: 80,
    width: "100%",
    paddingHorizontal: 10,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  }
});
export {
  ConversationAvatar
};
//# sourceMappingURL=ConversationAvatar.mjs.map