Refactor Group Chats

import.sql

@@ -6,9 +6,17 @@
 # ALTER TABLE npwd_messages ADD COLUMN `is_embed` tinyint(4) NOT NULL DEFAULT 0;
 # ALTER TABLE npwd_messages ADD COLUMN `embed` varchar(512) NOT NULL DEFAULT '';
 
+
+# Group Chat Overhaul SQL Update
+# ALTER TABLE npwd_messages ADD COLUMN `is_system` tinyint(4) NOT NULL DEFAULT 0;
+# ALTER TABLE npwd_messages ADD COLUMN `system_type` varchar(48) NOT NULL DEFAULT '';
+# ALTER TABLE npwd_messages ADD COLUMN `system_number` varchar(48) NOT NULL DEFAULT '';
+# ALTER TABLE npwd_messages_conversations ADD COLUMN `owner` varchar(48) NOT NULL DEFAULT '';
+
 #match voice messages update
 # ALTER TABLE npwd_match_profiles ADD COLUMN `voiceMessage` varchar(512) DEFAULT NULL;
 
+
 CREATE TABLE IF NOT EXISTS `npwd_twitter_profiles`
 (
     `id`           int         NOT NULL AUTO_INCREMENT,
@@ -148,6 +156,9 @@ CREATE TABLE IF NOT EXISTS `npwd_messages`
     `author`          varchar(255) NOT NULL,
     `is_embed`        tinyint(4)   NOT NULL default 0,
     `embed`           varchar(512) NOT NULL DEFAULT '',
+    `is_system`        tinyint(4)   NOT NULL default 0,
+    `system_type`      varchar(48) NOT NULL default '',
+    `system_number`    varchar(48) NOT NULL default '',
     PRIMARY KEY (id),
     INDEX `user_identifier` (`user_identifier`)
 );
@@ -160,6 +171,7 @@ CREATE TABLE `npwd_messages_conversations`
     `createdAt`         TIMESTAMP    NOT NULL DEFAULT current_timestamp(),
     `updatedAt`         TIMESTAMP    NOT NULL DEFAULT current_timestamp(),
     `last_message_id`   INT(11)      NULL     DEFAULT NULL,
+    `owner`         varchar(48)  NOT NULL DEFAULT '',
     `is_group_chat`     TINYINT(4)   NOT NULL DEFAULT '0',
     PRIMARY KEY (`id`) USING BTREE
 );

phone/src/apps/messages/components/list/MessageGroupItem.tsx

@@ -93,9 +93,21 @@ const MessageGroupItem = ({
           invisible={messageConversation.unreadCount <= 0}
         >
           {messageConversation.isGroupChat ? (
-            <MuiAvatar alt={messageConversation.label} />
+            <>
+              {messageConversation.avatar ? (
+                <MuiAvatar alt={messageConversation.label} src={messageConversation.avatar} />
+              ) : (
+                <MuiAvatar alt={messageConversation.label} />
+              )}
+            </>
           ) : (
-            <MuiAvatar alt={getContact()?.display ?? ''} src={getContact()?.avatar} />
+            <>
+              {getContact()?.avatar ? (
+                <MuiAvatar alt={getContact()?.display ?? ''} src={getContact()?.avatar} />
+              ) : (
+                <MuiAvatar>{getContact().display.charAt(0)}</MuiAvatar>
+              )}
+            </>
           )}
         </Badge>
       </ListItemAvatar>

phone/src/apps/messages/components/modal/AddParticipantModal.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import Modal from '../../../../ui/components/Modal';
+import { Box, Popper, Autocomplete, Button } from '@mui/material';
+import { TextField } from '@ui/components/Input';
+import { PreDBContact, Contact } from '@typings/contact';
+import { useContactsValue } from '../../../contacts/hooks/state';
+import { useTranslation } from 'react-i18next';
+
+const AddParticipantModal = ({
+  open,
+  onClose,
+  participants,
+  myPhoneNumber,
+  handleAddGroupMembers,
+}: {
+  open: boolean;
+  onClose: () => void;
+  participants: string[];
+  myPhoneNumber: string;
+  handleAddGroupMembers: (members: string[]) => void;
+}) => {
+  const [newParticipants, setNewParticipants] = useState<PreDBContact[]>([]);
+  const [allowedContact, setAllowedContact] = useState<Contact[]>([]);
+  const contacts = useContactsValue();
+  const [t] = useTranslation();
+
+  useEffect(() => {
+    setAllowedContact(contacts.filter((contact) => !participants.includes(contact.number)));
+  }, [participants, contacts]);
+
+  const handleSubmit = () => {
+    const selectedParticipants = newParticipants.map((participant) => participant.number);
+    handleAddGroupMembers(selectedParticipants);
+    setNewParticipants([]);
+    onClose();
+  };
+
+  const handleCLose = () => {
+    setNewParticipants([]);
+    onClose();
+  };
+
+  const onAutocompleteChange = (_e, value: any) => {
+    const lastIdx = value.length - 1;
+
+    // If we have a string, it means that we don't have the number as a contact.
+    if (typeof value[lastIdx] === 'string') {
+      value.splice(lastIdx, 1, { number: value[lastIdx] });
+      setNewParticipants(value);
+      return;
+    }
+    // If we have the contact
+    setNewParticipants(value as any[]);
+  };
+
+  const renderAutocompleteInput = (params) => (
+    <TextField
+      {...params}
+      fullWidth
+      label={t('MESSAGES.INPUT_NAME_OR_NUMBER')}
+      inputProps={{
+        ...params.inputProps,
+        onKeyPress: (e) => {
+          if (e.key === 'Enter' && e.currentTarget.value) {
+            e.preventDefault();
+            onAutocompleteChange(e, [...newParticipants, e.currentTarget.value]);
+          }
+        },
+        autoFocus: true,
+      }}
+    />
+  );
+
+  const isYourself = newParticipants.find((p) => p.number === myPhoneNumber);
+  const disableSubmit = !newParticipants?.length || !!isYourself;
+
+  return (
+    <Modal visible={open} handleClose={handleCLose}>
+      <Box px={2} py={3}>
+        <Autocomplete
+          value={newParticipants}
+          freeSolo
+          disablePortal
+          PopperComponent={(props) => <Popper placement="bottom-start" {...props} />}
+          multiple
+          autoHighlight
+          options={allowedContact || []}
+          ListboxProps={{ style: { marginLeft: 10 } }}
+          getOptionLabel={(contact) => contact.display || contact.number}
+          onChange={onAutocompleteChange}
+          renderInput={renderAutocompleteInput}
+        />
+      </Box>
+      <Button
+        onClick={handleSubmit}
+        disabled={disableSubmit}
+        variant="contained"
+        fullWidth
+        sx={{ mb: 1 }}
+        color="primary"
+        type="submit"
+      >
+        {t('GENERIC.ADD')}
+      </Button>
+    </Modal>
+  );
+};
+
+export default AddParticipantModal;