wip: inappchat component for virtual conference

app/.env.local.sample

@@ -19,3 +19,9 @@ NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
 # for cookies signing
 COOKIE_SECRET_CURRENT=
 COOKIE_SECRET_PREVIOUS=
+
+# INAPPCHAT
+# for development http://localhost:3000
+NEXT_PUBLIC_ROCKET_CHAT_HOST=required
+# id of the room where conf will take place
+NEXT_PUBLIC_ROCKET_CHAT_CONF_RID=required

app/.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# lock files
+package-lock.json

app/components/inappchat/inappchat.js

@@ -0,0 +1,146 @@
+import { useEffect, useState } from "react";
+import { getMessages, sendMessage } from "./lib/api";
+import styles from "../../styles/Inappchat.module.css";
+import {
+  Message,
+  MessageBody,
+  MessageContainer,
+  TextInput,
+  Icon,
+  Box,
+  MessageHeader,
+  MessageName,
+  MessageTimestamp,
+  MessageToolbox,
+  MessageToolboxItem,
+  MessageToolboxWrapper,
+  MessageUsername,
+} from "./lib/fuselage";
+import MDPreview from "../mdpreview";
+
+const emojify = (message) => {
+  return joypixels.toImage(message);
+};
+
+const emojis = [
+  { id: 1, value: ":smile:" },
+  { id: 2, value: ":thumbsup:" },
+  { id: 3, value: ":heart:" },
+  { id: 4, value: ":partying_face:" },
+];
+
+const InAppChat = ({ closeChat, cookies, rid }) => {
+  const [message, setMessage] = useState("");
+  const [emojiClicked, setEmojiClicked] = useState(false);
+  const [data, setData] = useState({});
+
+  useEffect(() => {
+    async function getData() {
+      const data = await getMessages(rid, cookies);
+      setData(data);
+    }
+    getData();
+  }, []);
+
+  const sendMsg = async (message) => {
+    if (message.trim() === "") {
+      return;
+    }
+    const msg = await sendMessage(rid, message, cookies);
+    setMessage("");
+    setData({ ...data, messages: [...data.messages, msg.message] });
+  };
+
+  return (
+    <div className={styles.sidechat}>
+      <div className={styles.cross} onClick={closeChat}>
+        <Icon name="cross" size={"x30"} />
+      </div>
+      <div className={styles.chatbox}>
+        <Box>
+          {cookies.rc_token && cookies.rc_uid ? (
+            data &&
+            data?.messages
+              ?.sort(function (a, b) {
+                return a.ts < b.ts ? -1 : a.ts > b.ts ? 1 : 0;
+              })
+              .map((m) => (
+                <Message className="customclass" clickable key={m._id}>
+                  <MessageContainer>
+                    <MessageHeader>
+                      <MessageName>{m.u.name}</MessageName>
+                      <MessageUsername>@{m.u.username}</MessageUsername>
+                      <MessageTimestamp>
+                        {new Date(m.ts).toDateString()}
+                      </MessageTimestamp>
+                    </MessageHeader>
+                    <MessageBody>
+                      <MDPreview body={emojify(m.msg)} />
+                    </MessageBody>
+                  </MessageContainer>
+                  <MessageToolboxWrapper>
+                    <MessageToolbox>
+                      <MessageToolboxItem icon="quote" />
+                      <MessageToolboxItem icon="emoji" />
+                      <MessageToolboxItem icon="thread" />
+                    </MessageToolbox>
+                  </MessageToolboxWrapper>
+                </Message>
+              ))
+          ) : (
+            <p>
+              Please login into{" "}
+              <a href="https://open.rocket.chat" target="_blank">
+                RocketChat
+              </a>{" "}
+              to chat!
+            </p>
+          )}
+        </Box>
+      </div>
+      {emojiClicked && (
+        <div className={styles.emojisHolder}>
+          {emojis.map((e) => (
+            <div
+              key={e.id}
+              className={styles.animatedEmoji}
+              dangerouslySetInnerHTML={{ __html: emojify(e.value) }}
+              onClick={() => {
+                setEmojiClicked((prevState) => !prevState);
+                sendMsg(e.value);
+              }}
+            />
+          ))}
+        </div>
+      )}
+      <TextInput
+        placeholder="Message"
+        value={message}
+        onChange={(e) => {
+          setMessage(e.target.value);
+        }}
+        onKeyDown={(e) => {
+          if (e.keyCode === 13) {
+            sendMsg(message);
+          }
+        }}
+        addon={
+          <>
+            {message.trim() !== "" ? (
+              <Icon onClick={() => sendMsg(message)} name="send" size="x20" />
+            ) : (
+              <Icon
+                name="emoji"
+                size="x20"
+                onClick={(e) => setEmojiClicked((prevState) => !prevState)}
+              />
+            )}
+          </>
+        }
+        w={"400px"}
+      />
+    </div>
+  );
+};
+
+export default InAppChat;

app/components/inappchat/lib/api.js

@@ -0,0 +1,41 @@
+// using env variables for now, should be replaced with cookies!
+
+const host = process.env.NEXT_PUBLIC_ROCKET_CHAT_HOST;
+
+export const getMessages = async (rid, cookies) => {
+  try {
+    const messages = await fetch(
+      `${host}/api/v1/channels.messages?roomId=${rid}`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+          "X-Auth-Token": cookies.rc_token ?? "",
+          "X-User-Id": cookies.rc_uid ?? "",
+        },
+        method: "GET",
+      }
+    );
+
+    return await messages.json();
+  } catch (err) {
+    console.log(err.message);
+  }
+};
+
+export const sendMessage = async (rid, message, cookies) => {
+  try {
+    const msg = await fetch(`${host}/api/v1/chat.sendMessage`, {
+      body: `{"message": { "rid": "${rid}", "msg": "${message}" }}`,
+      headers: {
+        "Content-Type": "application/json",
+        "X-Auth-Token": cookies.rc_token ?? "",
+        "X-User-Id": cookies.rc_uid ?? "",
+      },
+      method: "POST",
+    });
+
+    return await msg.json();
+  } catch (err) {
+    console.log(err.message);
+  }
+};

app/components/inappchat/lib/fuselage.js

@@ -0,0 +1,70 @@
+import dynamic from "next/dynamic";
+
+export const TextInput = dynamic(
+  () => import("@rocket.chat/fuselage").then((comp) => comp.TextInput),
+  { ssr: false }
+);
+
+export const Icon = dynamic(
+  () => import("@rocket.chat/fuselage").then((comp) => comp.Icon),
+  { ssr: false }
+);
+
+export const Box = dynamic(
+  () => import("@rocket.chat/fuselage").then((comp) => comp.Box),
+  { ssr: false }
+);
+
+export const Message = dynamic(
+  () => import("@rocket.chat/fuselage").then((comp) => comp.Message),
+  { ssr: false }
+);
+
+export const MessageContainer = dynamic(
+  () => import("@rocket.chat/fuselage").then((comp) => comp.MessageContainer),
+  { ssr: false }
+);
+
+export const MessageHeader = dynamic(
+  () => import("@rocket.chat/fuselage").then((comp) => comp.MessageHeader),
+  { ssr: false }
+);
+
+export const MessageName = dynamic(
+  () => import("@rocket.chat/fuselage").then((comp) => comp.MessageName),
+  { ssr: false }
+);
+
+export const MessageUsername = dynamic(
+  () => import("@rocket.chat/fuselage").then((comp) => comp.MessageUsername),
+  { ssr: false }
+);
+
+export const MessageTimestamp = dynamic(
+  () => import("@rocket.chat/fuselage").then((comp) => comp.MessageTimestamp),
+  { ssr: false }
+);
+
+export const MessageBody = dynamic(
+  () => import("@rocket.chat/fuselage").then((comp) => comp.MessageBody),
+  { ssr: false }
+);
+
+export const MessageToolbox = dynamic(
+  () =>
+    import("@rocket.chat/fuselage").then(
+      ({ MessageToolbox }) => MessageToolbox
+    ),
+  { ssr: false }
+);
+
+export const MessageToolboxWrapper = dynamic(
+  () =>
+    import("@rocket.chat/fuselage").then((comp) => comp.MessageToolboxWrapper),
+  { ssr: false }
+);
+
+export const MessageToolboxItem = dynamic(
+  () => import("@rocket.chat/fuselage").then((comp) => comp.MessageToolboxItem),
+  { ssr: false }
+);