Iframe com

src/components/channel/ChannelView.tsx

@@ -1,7 +1,8 @@
 import { Channel, Message, Server } from "@/types/types";
 import MessageBox from "./MessageBox";
 import App from "@/types/app";
-import React, { Ref } from "react";
+import React, { Ref, useEffect, useRef } from "react";
+import PluginChannel from "./PluginChannel";
 
 export default function ChannelView({
   app,
@@ -47,6 +48,13 @@ export default function ChannelView({
       return null;
 
     default:
-      return <iframe src={app.currentChannel.kind} className="w-full" />;
+      return (
+        <PluginChannel
+          app={app}
+          messages={messages}
+          ip={ip}
+          serverRef={serverRef}
+        />
+      );
   }
 }

src/components/channel/MessageBox.tsx

@@ -1,24 +1,24 @@
 "use client";
 
 import { Message } from "@/types/types";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
 import * as emoji from "emoji-picker-react";
 import EmojiPicker from "emoji-picker-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
+} from "../ui/dropdown-menu";
 import { ChevronLeftIcon, SendIcon, SmilePlusIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { format, isToday, isYesterday } from "date-fns";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { UserProfile } from "@/hooks/get-user";
-import ProfilePicture from "./ProfilePicture";
+import ProfilePicture from "../ProfilePicture";
 import App from "@/types/app";
-import { Textarea } from "./ui/textarea";
+import { Textarea } from "../ui/textarea";
 
 function MessageContainer({ message, app }: { message: Message; app: App }) {
   const [profile, setProfile] = useState<UserProfile | null>();

src/components/channel/PluginChannel.tsx

@@ -0,0 +1,50 @@
+import { Message } from "@/types/types";
+import App from "@/types/app";
+import React, { useEffect, useRef } from "react";
+import { useParentCommunication } from "react-iframes-bridge";
+
+export default function PluginChannel({
+  app,
+  messages,
+  ip,
+  serverRef,
+}: {
+  app: App;
+  messages: Record<string, Message[]>;
+  ip: string;
+  serverRef: React.RefObject<WebSocket | null>;
+}) {
+  if (!app.currentChannel)
+    return (
+      <div className="h-svh w-full max-h-svh flex flex-col pb-5 pl-5 gap-5" />
+    );
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const parentComm = useParentCommunication(iframeRef, {
+    allowedOrigins: [new URL(app.currentChannel.kind).origin],
+    communication: { debug: false },
+  });
+
+  useEffect(() => {
+    parentComm.onMessage("GET_MESSAGES", () => {
+      parentComm.sendToChild("MESSAGES", messages);
+    });
+
+    parentComm.onMessage("SEND_MESSAGE", (msg: string) => {
+      serverRef.current?.send(
+        JSON.stringify({
+          type: "send_message",
+          params: {
+            channel_id: app.currentChannel?.id,
+            contents: msg,
+          },
+        })
+      );
+    });
+  }, [parentComm]);
+
+  return (
+    <iframe src={app.currentChannel.kind} className="w-full" ref={iframeRef} />
+  );
+}