Added Reaction support,

[HarshRajat]

Closes #1294 #1286

Fixes Issue

• ChatPreviewList not loading chats if the window height is more than the initial 10 chats
• ChatViewList now supports sending reactions
• ChatViewList now loads chats if the window height is not occupied by all chats
• ChatViewList now scrolls to bottom even when frames preview are loaded or if new chats come but only if user hasn't scrolled up
• ChatViewList now loads older messages without scrollbar position getting mismanaged
• ChatViewList doesn't have smooth scrolling anymore
• Chats that are encrypted and of different type (like images, gifs) doesn't crash the app but instead errors gracefully
• Chat components are now responsive until 320px
• CreateGroupModal texts for gating are more appropriate, define conditions are saved on back eliminating "Add" or "Update" button

Screenshots

[github-actions]

In the provided files, I found the following issues:

1. In the index.js file inside the boilerplate folder:

   • Typo: searchParamter should be corrected to searchParameter.
   • Missing closing brace '}' after the return statement in the first useEffect block.
   • Typo: Missing closing parenthesis ')' in the PushAPI.initialize function call.
   • Typo: generateRandomWordsWithTimestamp is defined but not used or called.
   • Typo: There is a missing closing parenthesis ')' after the reference key in the userAlice.chat.send function call.
   • Commented code block for groupPermissions and associated console.log statements.

2. In the .babelrc file inside the uiweb folder:

   • Incorrect JSON structure for the plugins array. "module-resolver" plugin configuration is incorrect.

3. In the package.json file inside the uiweb folder:

   • Missing closing brace '}' for the "dependencies" section.
   • Missing closing brace '}' for the "peerDependencies" section.

4. In the ChatPreviewList.tsx file:

   • Typo: searchParamter should be corrected to searchParameter.
   • Logic issue: The resetBadge function is missing a closing brace '}'.
   • Logic issue: handleSearch function has an issue with nested if conditions for options?.searchParameter.
   • Logic issue: Various missing closing braces '}' in the useEffect blocks.
   • Typo: options.listType, options.overrideAccount are placed outside an array in the dependency array of the useEffect hook.

Please address the above issues in their respective files.

All looks good.

[rohitmalhotra1420]

Not the correct way to change props values, It should never be changed like this, could cause unexpected behaviour.

The correct way is to always have showChatMeta declared as a state variable in the parent component of ChatViewBubble and then to update it inside ChatViewBubble use the setter Function of useState (setShowChatMeta) to update this data

[HarshRajat]

Agreed though this might break backward compatibility since the only required parameter for v1 for ChatViewBubble is decryptedMessagePayload: https://push.org/docs/chat/ui-components/Advanced/chatviewbubble-component/

Any suggestions?

[rohitmalhotra1420]

@HarshRajat Added couple of comments.

[rohitmalhotra1420]

Suggested change

	export const FileCard = ({ chat }: { chat: IMessagePayload }) => {
	const getParsedMessage = (message: string): FileMessageContent => {
	try {
	return JSON.parse(message);
	} catch (error) {
	console.error('UIWeb::components::ChatViewBubble::FileCard::error while parsing image', error);
	return {
	name: 'Unable to load file',
	content: '',
	size: 0,
	};
	}
	};
	export const FileCard = ({ chat }: { chat: IMessagePayload }) => {

[rohitmalhotra1420]

Suggested change

	const parsedMessage = {
	name: 'Unable to load file',
	content: '',
	size: 0,
	};
	try {
	const fileContent: FileMessageContent = JSON.parse(message);
	parsedMessage.name = fileContent.name;
	parsedMessage.content = fileContent.content;
	parsedMessage.size = fileContent.size;
	} catch (error) {
	console.error('UIWeb::components::ChatViewBubble::FileCard::error while parsing image', error);
	}
	const parsedMessage = getParsedMessage(message)

[0x12zee]

Thicc horizontal scrollbar appears when the viewport is cut at certain breakpoints.

[0x12zee]

Curved edges go away when the message is small and we add 2 or more emojis.

[0x12zee]

Icon moves away in this scenario. bubble should get larger. Date should be in its own separate column and not under the text. This will also make the chat bubble larger.

[github-actions]

In the index.js file, there are several issues:

1. Missing await keyword before the PushAPI.initialize() call.
2. Typo in the userBobAddress variable name, it should be userBobAddress.
3. Extra closing curly brace '}' in the send function call.
4. console.log statement is outside of the function and should be corrected.

After addressing these issues, the code should look like this:

import { CONSTANTS, PushAPI } from '@pushprotocol/restapi';
import { ethers } from 'ethers';

// Creating a random signer from a wallet, ideally this is the wallet you will connect
const signerAlice = ethers.Wallet.createRandom();
// Initialize wallet user, pass 'prod' instead of 'staging' for mainnet apps
const userAlice = await PushAPI.initialize(signerAlice, {
  env: CONSTANTS.ENV.PROD,
});
const userBobAddress = '0x0149C2723496fEF62e6e7fa79A31E5ea22bA70C7';
const generateRandomWordsWithTimestamp = () => {
  return `${Math.random()
    .toString(36)
    .substring(2)} - ${new Date().toISOString()}`;
};
userAlice.chat.send(userBobAddress, {
  type: 'Reaction',
  content: '👍',
  reference: 'bafyreia2okco5ocdxmoxon72erviypaht74u3dqunf3vydu237ybju4kw4'
});
console.log('Message sent from Alice to ', userBobAddress);

For the .babelrc file, the plugins section has syntax errors. It should be corrected to:

"plugins": [
  ["styled-components", { "pure": true, "ssr": true }],
  ["module-resolver", {
    "root": ["./src"],
    "alias": {
      "@components": "./src/lib/components",
      "@icons": "./src/lib/icons"
      // Add more aliases as needed
    }
  }]
]

In the package.json file, there is a syntax error. The "peerDependencies" and "devDependencies" objects are not closed properly. It should be corrected to:

"peerDependencies": {
  "@pushprotocol/restapi": "1.7.19",
  "react": ">=16.8.0",
  "styled-components": "^6.0.8"
},
"devDependencies": {
  "babel-plugin-module-resolver": "^5.0.2"
}

For the ChatPreviewList.tsx file, there are multiple issues such as missing closing brackets, incorrect conditions, and unused code. It needs a thorough review and correction.

For the other files, no specific issues were mentioned.

Please review and update the mentioned files accordingly.