addedCopymessageLink&copyMessage

packages/react/.gitpod.yml

@@ -9,5 +9,3 @@ tasks:
       npm install
       cd ..
     command: npm run dev
-
-

packages/react/.storybook/main.js

@@ -1,6 +1,10 @@
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
-  stories: ['../src/**/stories/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: [
+    '../src/**/stories/*.stories.@(js|jsx|ts|tsx)',
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

packages/react/.storybook/preview.js

@@ -1,4 +1,4 @@
-import 'normalize.css'
+import 'normalize.css';
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {

packages/react/README.md

@@ -13,6 +13,7 @@ _EmbeddedChat is a full-stack React component node module of the RocketChat appl
 </div>
 
 ## Installation
+
 ```bash
 npm install @embeddedchat/react
 # or
@@ -32,10 +33,7 @@ import { EmbeddedChat } from '@embeddedchat/react';
 To use the `EmbeddedChat` component, include it in your component's render method or return statement. Here's a basic example:
 
 ```jsx
-<EmbeddedChat
-  host="http://your-rocketchat-server.com"
-  roomId="YOUR_ROOM_ID"
-/>
+<EmbeddedChat host="http://your-rocketchat-server.com" roomId="YOUR_ROOM_ID" />
 ```
 
 ### Props
@@ -152,6 +150,7 @@ You can pass a `theme` object to customize the appearance according to your appl
   theme={myCustomTheme}
 />
 ```
+
 Follow [theming.md](docs/theming.md) to know more about EmbeddedChat's theming.
 
 ## Handling the Closable State
@@ -167,9 +166,9 @@ If `isClosable` is `true`, provide a `setClosableState` function to manage the s
 ```
 
 ## Development
+
 Follow this [EmbeddedChat Readme](https://github.com/RocketChat/EmbeddedChat) to setup EmbeddedChat for development.
 
 ## Conclusion
 
 The `EmbeddedChat` component offers a flexible and feature-rich solution for integrating RocketChat into your application. Customize it according to your needs to enhance your app's chat functionality.
-

packages/react/docker-compose.yml

@@ -6,16 +6,16 @@ services:
     image: registry.rocket.chat/rocketchat/rocket.chat:latest
     restart: on-failure
     environment:
-      MONGO_URL: "mongodb://mongodb:27017/rocketchat?replicaSet=rs0"
-      MONGO_OPLOG_URL: "mongodb://mongodb:27017/local?replicaSet=rs0"
+      MONGO_URL: 'mongodb://mongodb:27017/rocketchat?replicaSet=rs0'
+      MONGO_OPLOG_URL: 'mongodb://mongodb:27017/local?replicaSet=rs0'
       ROOT_URL: http://localhost:3000
       PORT: 3000
     depends_on:
       - mongodb
     expose:
       - 3000
     ports:
-      - "0.0.0.0:3000:3000"
+      - '0.0.0.0:3000:3000'
 
   mongodb:
     image: docker.io/bitnami/mongodb:4.4

packages/react/docs/theming.md

@@ -27,14 +27,16 @@ For example:
 ```
 
 In the above example:
- - theme.components.ChatInput.styleOverrides would be applied to the style of the ChatInput component.
- - theme.components.ChatInput.classNames would be applied to the className of the ChatInput component.
+
+- theme.components.ChatInput.styleOverrides would be applied to the style of the ChatInput component.
+- theme.components.ChatInput.classNames would be applied to the className of the ChatInput component.
 
 ## Using the useComponentsOverrides Hook
+
 We provide a `useComponentsOverrides` hook that returns the necessary data for component customization.
 
 ```jsx
-import { useComponentOverrides } from '../../theme/useComponentOverrides'; 
+import { useComponentOverrides } from '../../theme/useComponentOverrides';
 
 export const MessageBody = ({
   children,
@@ -60,11 +62,13 @@ export const MessageBody = ({
   );
 };
 ```
+
 ## Adding Classes to Components
+
 We also add a class to each component. For example, `ec-message-body` for the MessageBody component.
 
 Feel free to explore and customize these components according to your project's needs.
 
 If you have any questions or need further assistance, please don't hesitate to ask.
 
-Happy theming!
+Happy theming!

packages/react/rollup.config.js

@@ -7,7 +7,7 @@ import json from '@rollup/plugin-json';
 import bundleSize from 'rollup-plugin-bundle-size';
 import { terser } from 'rollup-plugin-terser';
 import replace from '@rollup/plugin-replace';
-import analyze from 'rollup-plugin-analyzer'
+import analyze from 'rollup-plugin-analyzer';
 
 const packageJson = require('./package.json');
 const PRODUCTION = process.env.NODE_ENV === 'production';
@@ -40,7 +40,10 @@ export default [
             }
           : {}
       ),
-      resolve({ browser: true, extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs'] }),
+      resolve({
+        browser: true,
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs'],
+      }),
       commonjs({ include: ['node_modules/**', '../../node_modules/**'] }),
       babel({
         exclude: 'node_modules/**',

packages/react/src/components/Icon/icons/Copy.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const Copy = (props) => (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24.00 24.00"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    transform="matrix(-1, 0, 0, 1, 0, 0)"
+  >
+    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+    <g
+      id="SVGRepo_tracerCarrier"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      stroke="#CCCCCC"
+      strokeWidth="0.048"
+    ></g>
+    <g id="SVGRepo_iconCarrier">
+      <path
+        d="M6 11C6 8.17157 6 6.75736 6.87868 5.87868C7.75736 5 9.17157 5 12 5H15C17.8284 5 19.2426 5 20.1213 5.87868C21 6.75736 21 8.17157 21 11V16C21 18.8284 21 20.2426 20.1213 21.1213C19.2426 22 17.8284 22 15 22H12C9.17157 22 7.75736 22 6.87868 21.1213C6 20.2426 6 18.8284 6 16V11Z"
+        stroke="#000000"
+        strokeWidth="1.536"
+      ></path>
+      <path
+        d="M6 19C4.34315 19 3 17.6569 3 16V10C3 6.22876 3 4.34315 4.17157 3.17157C5.34315 2 7.22876 2 11 2H15C16.6569 2 18 3.34315 18 5"
+        stroke="#000000"
+        strokeWidth="1.536"
+      ></path>
+    </g>
+  </svg>
+);
+
+export default Copy;

packages/react/src/components/Icon/icons/index.js

@@ -38,7 +38,7 @@ import ArrowDown from './ArrowDown';
 import PinFilled from './PinFilled';
 import VideoRecorder from './VideoRecoder';
 import DisabledRecorder from './DisableRecorder';
-
+import Copy from './Copy';
 const icons = {
   file: File,
   mobile: Mobile,
@@ -80,6 +80,7 @@ const icons = {
   'error-circle': ErrorCircle,
   'arrow-down': ArrowDown,
   'pin-filled': PinFilled,
+  copy: Copy,
 };
 
 export default icons;

packages/react/src/components/Message/Message.js

@@ -123,6 +123,47 @@ const Message = ({
       });
     }
   };
+  const handleCopyMessage = async (message) => {
+    navigator.clipboard
+      .writeText(message.msg)
+      .then(() => {
+        dispatchToastMessage({
+          type: 'success',
+          message: 'Message copied successfully',
+        });
+      })
+      .catch((err) => {
+        dispatchToastMessage({
+          type: 'error',
+          message: 'Error in copying message',
+        });
+      });
+  };
+  const getMessageLink = async (id) => {
+    try {
+      const host = await RCInstance.getHost();
+      const res = await RCInstance.channelInfo();
+      return `${host}/channel/${res.room.name}/?msg=${id}`;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const handleCopyMessageLink = async (message) => {
+    try {
+      const messageLink = await getMessageLink(message._id);
+      await navigator.clipboard.writeText(messageLink);
+      dispatchToastMessage({
+        type: 'success',
+        message: 'Message link copied successfully',
+      });
+    } catch (err) {
+      dispatchToastMessage({
+        type: 'error',
+        message: 'Error in copying message link',
+      });
+    }
+  };
 
   const handleEmojiClick = async (e, msg, canReact) => {
     const emoji = (e.names?.[0] || e.name).replace(/\s/g, '_');
@@ -224,6 +265,8 @@ const Message = ({
               handleDeleteMessage={handleDeleteMessage}
               handleStarMessage={handleStarMessage}
               handlePinMessage={handlePinMessage}
+              handleCopyMessage={handleCopyMessage}
+              handleCopyMessageLink={handleCopyMessageLink}
               handleEditMessage={() => {
                 if (editMessage._id === message._id) {
                   setEditMessage({});

packages/react/src/components/Message/MessageToolbox.js

@@ -57,6 +57,8 @@ export const MessageToolbox = ({
   handleDeleteMessage,
   handlerReportMessage,
   handleEditMessage,
+  handleCopyMessage,
+  handleCopyMessageLink,
   isEditing = false,
   ...props
 }) => {
@@ -143,6 +145,18 @@ export const MessageToolbox = ({
                 icon="edit"
                 onClick={() => handleEditMessage(message)}
               />
+              <ActionButton
+                ghost
+                size="small"
+                icon="link"
+                onClick={() => handleCopyMessageLink(message)}
+              />
+              <ActionButton
+                ghost
+                size="small"
+                icon="copy"
+                onClick={() => handleCopyMessage(message)}
+              />
               <ActionButton
                 ghost
                 size="small"