l-min-components 1.0.294 → 1.0.297

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.294",
+  "version": "1.0.297",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/index.js

@@ -28,5 +28,7 @@ export { default as Calender } from "./calender/input";
 export { default as ErrorPage } from "./errorPage";
 export { default as AppMainLayout } from "./AppMainLayout";
 export { OutletContext as OutletContext } from "./AppMainLayout";
-export { default as DatePickerCalender } from "./datePicker"; 
-export { default as TextEditor } from "./textEditor"
+export { default as DatePickerCalender } from "./datePicker";
+export { default as DatePickerCalender } from "./datePicker";
+export { default as TextEditor } from "./textEditor";
+export { default as MessageAddon } from "./messageAddon/messages";

package/src/components/messageAddon/InputSection/index.jsx

@@ -0,0 +1,336 @@
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { EmojiIcon } from "../../../assets/svg/emoji";
+import { GalleryIcon } from "../../../assets/svg/gallery";
+import { MicrophoneIcon } from "../../../assets/svg/microphone";
+import { SendIcon } from "../../../assets/svg/send";
+import { TextMessagePanel } from "../messages/index.styled";
+import Picker from "emoji-picker-react";
+import cx from "classnames";
+import { ReactMic } from "react-mic";
+import WaveSurfer from "wavesurfer.js";
+import moment from "moment";
+import { RecorderIcon } from "../../../assets/svg/recorder";
+import { RecorderPlayIcon } from "../../../assets/svg/recorderPlay";
+import { PauseIcon } from "../../../assets/svg/pause";
+import { Bin } from "../../../assets/svg/bin";
+import useMessaging from "../../../hooks/useMessaging";
+import useMedia from "../../../hooks/useMedia";
+import { getCookie } from "../../../utils/helpers";
+import InputEmoji from "react-input-emoji";
+
+/** The input section of an open chat, for sending texts, emojis and audios
+ *
+ */
+const InputSection = ({
+  userID,
+  setPreviewModalIsOpen,
+  mediaForm,
+  setMediaForm,
+  setAllMessages,
+  allMessages,
+  newMessages,
+  setNewMessages,
+  setIsMessageSending,
+}) => {
+  const [showEmoji, setShowEmoji] = useState();
+  const [inputMethod, setInputMethod] = useState("text"); // text | recorder
+  const [text, setText] = useState({ text: "", user_message: true }); // state for user text
+  const [blobData, setBlobData] = useState({}); //state for audio
+  const [recording, setRecording] = useState(false);
+  const imageRef = useRef();
+  const {
+    handleCreateMessage,
+    createMessageData,
+    handleCreateMessageWithMedia,
+    createMessageWithMediaData,
+  } = useMessaging();
+  const { handleUploadMedia, uploadMediaData } = useMedia();
+
+  console.log(text);
+
+  // Handle Send when Enter key pressed
+  const handleEnterKey = (e) => {
+    if (e.key === "Enter") {
+      handleSendMessage();
+    }
+  };
+
+  // handle sending a text and audio when button clicked
+  const handleSendMessage = (e) => {
+    if (inputMethod === "recorder") {
+      //   const file = new File([blobData.blob], `record-${Date.now()}.wav`);
+      const file = new File([blobData.blob], `record-${Date.now()}.wav`, {
+        type: "audio/wav",
+      });
+      const data = {
+        media: file,
+      };
+      handleCreateMessageWithMedia(data.media, userID);
+      setInputMethod("text");
+      console.log("uploas", file);
+    }
+
+    if (inputMethod === "text") {
+      // setNewMessages((prev) => [...prev, text]);
+      setIsMessageSending(true);
+      setTimeout(() => {
+        handleCreateMessage(userID, text);
+      }, 1000);
+    }
+  };
+
+  console.log("createMessageData", createMessageData);
+
+  // handle open modal for image preview when an image selected (future note)
+  useEffect(() => {
+    if (mediaForm?.media) {
+      setPreviewModalIsOpen(true);
+    }
+  }, [mediaForm]);
+
+  //handle update messages state when a message sent successfully for text and audio
+  useEffect(() => {
+    if (createMessageData?.response?.status === 201) {
+      setNewMessages((prev) => [...prev, createMessageData?.data]);
+      // newMessages[newMessages.length - 1] = createMessageData?.data;
+      setIsMessageSending(false);
+      setText({
+        ...text,
+        text: "",
+      });
+    }
+  }, [createMessageData?.response]);
+
+  useEffect(() => {
+    if (createMessageWithMediaData?.response?.status === 201) {
+      setNewMessages((prev) => [...prev, createMessageWithMediaData?.data]);
+      // newMessages[newMessages.length - 1] = createMessageData?.data;
+      setText({
+        ...text,
+        text: "",
+      });
+    }
+  }, [createMessageWithMediaData?.response]);
+
+  //handle update messages state when a message sent successfully for text and audio ends here
+
+  console.log("media", mediaForm);
+  console.log("media2", uploadMediaData);
+  console.log("media3", imageRef);
+
+  return (
+    <TextMessagePanel>
+      <div
+        className={cx("text-input-wrapper", {
+          "text-mode": inputMethod === "text",
+        })}
+      >
+        {inputMethod === "text" && (
+          <>
+            <div className="icon-box">
+              <>
+                {/* for handling sending of media (future note) */}
+                {/* <span onClick={(e) => imageRef.current.click()}>
+                <GalleryIcon />
+              </span>
+              <input
+                ref={imageRef}
+                type="file"
+                accept="image/*"
+                style={{ display: "none" }}
+                onChange={async (e) => {
+                  console.log("media", e);
+                  if (e.target.files) {
+                    const file = e.target.files[0];
+                    let imageDataUrl = await readFile(file);
+                    setMediaForm({
+                      ...mediaForm,
+                      media: e.target.files[0],
+                    });
+                  }
+                }}
+              /> */}
+              </>
+              <span
+                onClick={(e) => {
+                  setInputMethod("recorder");
+                }}
+              >
+                <MicrophoneIcon />
+              </span>
+            </div>
+
+            <InputEmoji
+              value={text.text}
+              cleanOnEnter
+              onEnter={handleSendMessage}
+              placeholder="Start typing..."
+              onChange={(e) => {
+                setText((prev) => ({
+                  ...prev,
+                  text: e,
+                }));
+              }}
+              theme="light"
+            />
+          </>
+        )}
+        {inputMethod === "recorder" && (
+          <>
+            <Recorder
+              {...{
+                setInputMethod,
+                blobData,
+                setBlobData,
+                recording,
+                setRecording,
+              }}
+            />
+          </>
+        )}
+      </div>
+      <button
+        className={`send-box ${
+          !text.text && (inputMethod === "text" || recording) ? "disabled" : ""
+        }`}
+        onClick={handleSendMessage}
+        disabled={
+          !text.text &&
+          (inputMethod === "text" || recording || createMessageData?.loading)
+        }
+      >
+        <SendIcon />
+      </button>
+    </TextMessagePanel>
+  );
+};
+
+/** For audio recording and waves functionality
+ *
+ */
+const Recorder = ({
+  blobData,
+  setBlobData,
+  setInputMethod,
+  recording,
+  setRecording,
+}) => {
+  const [recordingTime, setRecordingTime] = useState(0);
+  const waveSurfer = useRef(null);
+  const counterRef = useRef();
+
+  console.log("blob", blobData);
+  // on record stop, concatenate blob to form a pause and continue recording feature
+  const handleStop = (data) => {
+    const { blob } = data;
+    setBlobData((state) => {
+      const newBlob = state.blob
+        ? new Blob([state.blob, blob], { type: "audio/wav" })
+        : blob;
+
+      const url = URL.createObjectURL(newBlob);
+
+      return {
+        blob: newBlob,
+        url,
+      };
+    });
+  };
+
+  useLayoutEffect(() => {
+    setRecording(true);
+  }, []);
+
+  // handle counting time while recording
+  useEffect(() => {
+    let time = 0;
+    if (recording) {
+      counterRef.current = setInterval(() => {
+        time++;
+        const currentDuration = waveSurfer.current?.getDuration() ?? 0;
+        // console.log(waveSurfer.current?.getDuration() ?? 0);
+        setRecordingTime(() => {
+          return Math.floor(currentDuration + time);
+        });
+      }, 1000);
+    }
+    return () => {
+      if (counterRef.current) {
+        clearInterval(counterRef.current);
+      }
+    };
+  }, [recording]);
+
+  //handle creating waves each time
+  useEffect(() => {
+    if (blobData.blob) {
+      if (!waveSurfer.current) {
+        waveSurfer.current = WaveSurfer.create({
+          container: "#waves",
+          waveColor: "#E5AD0E",
+          progressColor: "#FECF4C",
+          cursorWidth: 0,
+          height: 58,
+          barWidth: 2.5,
+          barGap: 4,
+          barRadius: 2,
+          barMinHeight: 3,
+        });
+      }
+
+      waveSurfer.current.loadBlob(blobData.blob);
+    }
+  }, [blobData.blob]);
+
+  return (
+    <>
+      <div className="left-recorder-state">
+        <span className="icon" onClick={(e) => setRecording((state) => !state)}>
+          {recording ? <PauseIcon /> : <RecorderIcon />}
+        </span>
+        <div className="timer">
+          {moment.duration(recordingTime, "seconds").minutes()}:
+          {moment.duration(recordingTime, "seconds").seconds()}
+        </div>
+      </div>
+      <div className="waves-section">
+        {!recording && (
+          <span
+            className="icon"
+            onClick={() => {
+              waveSurfer.current.playPause();
+            }}
+          >
+            <RecorderPlayIcon />
+          </span>
+        )}
+        <div id="waves"></div>
+        {!recording && (
+          <span
+            className="icon"
+            onClick={
+              () => setInputMethod("text") // resetting input method, everything about recorder shutdown
+            }
+          >
+            <Bin />
+          </span>
+        )}
+        <div className="react-mic">
+          <ReactMic
+            onStop={handleStop}
+            record={recording}
+            mimeType="audio/wav"
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default InputSection;

package/src/components/messageAddon/assets/svg/bin.jsx

@@ -0,0 +1,14 @@
+export const Bin = ({ width, height, fill }) => (
+  <svg
+    width={width || "14"}
+    height={height || "18"}
+    viewBox="0 0 14 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z"
+      fill="#ADB3B3"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/check_circle.jsx

@@ -0,0 +1,25 @@
+export const CheckCircleIcon = ({ width, height, fill, onClick }) => (
+  <svg
+    onClick={onClick}
+    width={width || "13"}
+    height={height || "13"}
+    viewBox="0 0 13 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Check circle" clip-path="url(#clip0_14342_79747)">
+      <path
+        id="Icon"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.50313 12.9984C10.0947 12.9984 13.0063 10.0869 13.0063 6.49531C13.0063 2.90374 10.0947 -0.0078125 6.50313 -0.0078125C2.91155 -0.0078125 0 2.90374 0 6.49531C0 10.0869 2.91155 12.9984 6.50313 12.9984ZM9.5166 5.44433C9.83405 5.12688 9.83405 4.61219 9.5166 4.29473C9.19915 3.97728 8.68445 3.97728 8.367 4.29473L5.69024 6.97149L4.63925 5.92051C4.3218 5.60306 3.80711 5.60306 3.48965 5.92051C3.1722 6.23797 3.1722 6.75266 3.48965 7.07011L5.11544 8.6959C5.43289 9.01335 5.94758 9.01335 6.26504 8.6959L9.5166 5.44433Z"
+        fill="#00C2C2"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_14342_79747">
+        <rect width="13" height="13" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/components/messageAddon/assets/svg/emoji.jsx

@@ -0,0 +1,38 @@
+export const EmojiIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "24"}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.0668 4.94813C23.0368 8.91813 22.9668 15.3981 18.8668 19.2881C15.0768 22.8781 8.92679 22.8781 5.12679 19.2881C1.01679 15.3981 0.946776 8.91813 4.92678 4.94813C8.82678 1.03813 15.1668 1.03813 19.0668 4.94813Z"
+      stroke="#ADB3B3"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.834 16.0664C13.714 18.0664 10.2741 18.0664 8.16406 16.0664"
+      stroke="#ADB3B3"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.66638 8.98828H8.67536"
+      stroke="#ADB3B3"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.8383 8.98828H15.8472"
+      stroke="#ADB3B3"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/gallery.jsx

@@ -0,0 +1,31 @@
+export const GalleryIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "24"}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M2.67188 18.9486L7.60187 15.6386C8.39187 15.1086 9.53187 15.1686 10.2419 15.7786L10.5719 16.0686C11.3519 16.7386 12.6119 16.7386 13.3919 16.0686L17.5519 12.4986C18.3319 11.8286 19.5919 11.8286 20.3719 12.4986L22.0019 13.8986"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/microphone.jsx

@@ -0,0 +1,38 @@
+export const MicrophoneIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "24"}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 19C15.31 19 18 16.31 18 13V8C18 4.69 15.31 2 12 2C8.69 2 6 4.69 6 8V13C6 16.31 8.69 19 12 19Z"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M3 11V13C3 17.97 7.03 22 12 22C16.97 22 21 17.97 21 13V11"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9.10938 7.47969C10.8894 6.82969 12.8294 6.82969 14.6094 7.47969"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10.0312 10.4819C11.2313 10.1519 12.5013 10.1519 13.7013 10.4819"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/more.jsx

@@ -0,0 +1,22 @@
+export const MoreIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "24"}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14 5C14 3.9 13.1 3 12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5Z"
+      fill="white"
+    />
+    <path
+      d="M14 19C14 17.9 13.1 17 12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19Z"
+      fill="white"
+    />
+    <path
+      d="M14 12C14 10.9 13.1 10 12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12Z"
+      fill="white"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/noMessage.jsx

@@ -0,0 +1,49 @@
+export const NoMessage = ({ width, height, fill }) => (
+  <svg
+    width={width || "65"}
+    height={height || "65"}
+    viewBox="0 0 65 65"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="vuesax/linear/message">
+      <g id="vuesax/linear/message_2">
+        <g id="message">
+          <path
+            id="Vector"
+            d="M23.1423 50.7943H21.8056C11.1123 50.7943 5.76562 48.121 5.76562 34.7543V21.3877C5.76562 10.6943 11.1123 5.34766 21.8056 5.34766H43.1923C53.8856 5.34766 59.2323 10.6943 59.2323 21.3877V34.7543C59.2323 45.4477 53.8856 50.7943 43.1923 50.7943H41.8556C41.0269 50.7943 40.2249 51.1953 39.717 51.8637L35.707 57.2103C33.9426 59.5629 31.0554 59.5629 29.291 57.2103L25.281 51.8637C24.8532 51.2755 23.8641 50.7943 23.1423 50.7943Z"
+            stroke="#C6CCCC"
+            stroke-width="4.40659"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            id="Vector_2"
+            d="M43.197 29.407H43.221"
+            stroke="#C6CCCC"
+            stroke-width="5.87546"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            id="Vector_3"
+            d="M32.5017 29.407H32.5257"
+            stroke="#C6CCCC"
+            stroke-width="5.87546"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            id="Vector_4"
+            d="M21.8064 29.407H21.8304"
+            stroke="#C6CCCC"
+            stroke-width="5.87546"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/components/messageAddon/assets/svg/send.jsx

@@ -0,0 +1,24 @@
+export const SendIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "24"}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.50733 4.22867L18.0673 8.50867C21.9073 10.4287 21.9073 13.5687 18.0673 15.4887L9.50733 19.7687C3.74733 22.6487 1.39733 20.2887 4.27733 14.5387L5.14733 12.8087C5.36733 12.3687 5.36733 11.6387 5.14733 11.1987L4.27733 9.45867C1.39733 3.70867 3.75733 1.34867 9.50733 4.22867Z"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5.4375 12H10.8375"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/send_fail.jsx

@@ -0,0 +1,15 @@
+export const SendFailIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "13"}
+    height={height || "13"}
+    viewBox="0 0 13 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="13" height="13" rx="6.5" fill="#F95454" />
+    <path
+      d="M9.56021 3.44088C8.77479 2.65547 7.69687 2.16797 6.49979 2.16797C4.10562 2.16797 2.17188 4.10713 2.17188 6.5013C2.17188 8.89547 4.10562 10.8346 6.49979 10.8346C8.52021 10.8346 10.2048 9.45338 10.6869 7.58463H9.56021C9.11604 8.84672 7.91354 9.7513 6.49979 9.7513C4.70687 9.7513 3.24979 8.29422 3.24979 6.5013C3.24979 4.70838 4.70687 3.2513 6.49979 3.2513C7.39896 3.2513 8.20062 3.62505 8.78562 4.21547L7.04146 5.95963H10.8331V2.16797L9.56021 3.44088Z"
+      fill="white"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/sending_status.jsx

@@ -0,0 +1,22 @@
+export const SendingStatusIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "13"}
+    height={height || "13"}
+    viewBox="0 0 13 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="13" height="13" rx="6.5" fill="#FEBF10" />
+    <g clip-path="url(#clip0_14342_79701)">
+      <path
+        d="M7.90625 1.46094H5.15625V2.3776H7.90625V1.46094ZM6.07292 7.41927H6.98958V4.66927H6.07292V7.41927ZM9.75333 4.3851L10.4042 3.73427C10.2071 3.50052 9.99167 3.28052 9.75792 3.08802L9.10708 3.73885C8.39667 3.17052 7.50292 2.83135 6.53125 2.83135C4.25333 2.83135 2.40625 4.67844 2.40625 6.95635C2.40625 9.23427 4.24875 11.0814 6.53125 11.0814C8.81375 11.0814 10.6562 9.23427 10.6562 6.95635C10.6562 5.98927 10.3171 5.09552 9.75333 4.3851ZM6.53125 10.1693C4.7575 10.1693 3.32292 8.73469 3.32292 6.96094C3.32292 5.18719 4.7575 3.7526 6.53125 3.7526C8.305 3.7526 9.73958 5.18719 9.73958 6.96094C9.73958 8.73469 8.305 10.1693 6.53125 10.1693Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_14342_79701">
+        <rect width="11" height="11" fill="white" transform="translate(1 1)" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/components/messageAddon/assets/svg/warning.jsx

@@ -0,0 +1,14 @@
+export const WarningIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "31"}
+    height={height || "32"}
+    viewBox="0 0 31 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M27.4684 27.6238H3.52992C3.06845 27.6238 2.64205 27.3776 2.41132 26.978C2.1806 26.5783 2.1806 26.086 2.41133 25.6863L14.3799 5.01966C14.6108 4.62068 15.0369 4.375 15.4979 4.375C15.9588 4.375 16.3849 4.62068 16.6158 5.01966L28.5844 25.6863C28.815 26.0858 28.8151 26.5779 28.5847 26.9774C28.3543 27.377 27.9283 27.6234 27.4671 27.6238H27.4684ZM14.2081 21.1655V23.7488H15.4132H15.4972H15.5812H16.7889V21.1655H14.2081ZM14.2081 12.1238V18.5822H16.7915V12.1238H14.2081Z"
+      fill="#323232"
+    />
+  </svg>
+);

package/src/components/messageAddon/hooks/messagesContext.js

@@ -0,0 +1,19 @@
+import { createContext, useState } from "react";
+const MessagesContext = createContext();
+
+export const useMessagesContext = () => {
+  const [roomID, setRoomID] = useState("");
+  const [userID, setUserID] = useState("");
+  const [userChatList, setUserChatList] = useState([]);
+
+  return {
+    roomID,
+    setRoomID,
+    userID,
+    setUserID,
+    userChatList,
+    setUserChatList,
+  };
+};
+
+export default MessagesContext;