wip: inappchat component for virtual conference

app/components/clientsideonly/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 }
+);

app/components/rocketchat.js

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { getMessages, fetcher } from "../lib/rocketchatapi";
+import useSWR from 'swr'
+import styles from "../styles/RocketChat.module.css";
+import {
+  Message,
+  MessageBody,
+  MessageContainer,
+  TextInput,
+  Icon,
+  Box,
+  MessageHeader,
+  MessageName,
+  MessageTimestamp,
+  MessageToolbox,
+  MessageToolboxItem,
+  MessageToolboxWrapper,
+  MessageUsername,
+} from "./clientsideonly/fuselage";
+
+const RocketChat = ({ closeChat, sendMessage }) => {
+  const [message, setMessage] = useState("");
+  const { data, mutate } = useSWR(getMessages("WS4FgsrngW4WNipgQ"), fetcher)
+
+  const sendMsg = async () => {
+    if (message.trim() === '') {
+      return;
+    }
+    setMessage('');
+
+    const msg = await sendMessage("WS4FgsrngW4WNipgQ", message);
+    mutate({ ...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>
+          {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>{m.msg}</MessageBody>
+                  </MessageContainer>
+                  <MessageToolboxWrapper>
+                    <MessageToolbox>
+                      <MessageToolboxItem icon="quote" />
+                      <MessageToolboxItem icon="emoji" />
+                      <MessageToolboxItem icon="thread" />
+                    </MessageToolbox>
+                  </MessageToolboxWrapper>
+                </Message>
+              ))}
+        </Box>
+      </div>
+      <TextInput
+        placeholder="Message"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.keyCode === 13) {
+            sendMsg();
+          }
+        }}
+        addon={
+          <>
+          <Icon name="emoji" size="x20" style={{ marginRight: '6px' }} />
+          <Icon
+            onClick={sendMsg}
+            name="send"
+            size="x20"
+          />
+          </>
+        }
+        w={"400px"}
+      />
+    </div>
+  );
+};
+
+export default RocketChat;

app/lib/rocketchatapi.js

@@ -0,0 +1,26 @@
+// using env variables for now, should be replaced with cookies!
+export const fetcher = (url) =>
+  fetch(url, {
+    headers: {
+      "Content-Type": "application/json",
+      "X-Auth-Token": process.env.NEXT_PUBLIC_ROCKET_CHAT_AUTH_USER_TOKEN,
+      "X-User-Id": process.env.NEXT_PUBLIC_ROCKET_CHAT_AUTH_USER_ID,
+    },
+    method: "GET",
+  }).then((res) => res.json());
+
+export const getMessages = (rid) => `http://localhost:3000/api/v1/channels.messages?roomId=${rid}`;
+
+export const sendMessage = async (rid, message) => {
+  const msg = await fetch("http://localhost:3000/api/v1/chat.sendMessage", {
+    body: `{"message": { "rid": "${rid}", "msg": "${message}" }}`,
+    headers: {
+      "Content-Type": "application/json",
+      "X-Auth-Token": process.env.NEXT_PUBLIC_ROCKET_CHAT_AUTH_USER_TOKEN,
+      "X-User-Id": process.env.NEXT_PUBLIC_ROCKET_CHAT_AUTH_USER_ID,
+    },
+    method: "POST",
+  });
+
+  return await msg.json();
+};