refactor: Apply review comments

Asha20 · Asha20 · commit faf5bdc81547 · 2023-11-29T11:03:14.000Z
diff --git a/README.md b/README.md
@@ -286,15 +286,15 @@ Note: For `<Chatbox>` and `<Popup>`, you must provide exactly one of `conversati
 
 Accepted props:
 
-- `url: string` - The URL you want to load inside the HTML panel. The URL can be absolute or relative. We recommend using same origin pages to have better control of the page. Learn more about HTML Panels and same origin pages [here](https://talkjs.com/docs/Features/Customizations/HTML_Panels/)
+- `url: string` - The URL you want to load inside the HTML panel. The URL can be absolute or relative. Any child components provided to this component will only be rendered if `url` has the same origin as the parent page. Learn more about HTML Panels and same origin pages [here](https://talkjs.com/docs/Features/Customizations/HTML_Panels/)
 
 - `height?: number` - Optional. The panel height in pixels. Defaults to `100px`.
 
-- `show?: boolean` - Optional. Sets the visibility of the panel. Defaults to `true`.
+- `show?: boolean` - Optional. Sets the visibility of the panel. Defaults to `true`. Changing this prop is equivalent to calling [`HtmlPanel.show()`](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/HtmlPanel/#HtmlPanel__show) and [`HtmlPanel.hide()`](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/HtmlPanel/#HtmlPanel__hide), while re-rendering the component calls [`HtmlPanel.destroy()`](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/HtmlPanel/#HtmlPanel__destroy) and [`createHtmlPanel()`](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Chatbox/#Chatbox__createHtmlPanel) in the background.
 
 - `conversationId?: string` - Optional. If given, the panel will only show up for the conversation that has an `id` matching the one given.
 
-- `children: React.ReactNode` - The content that gets rendered inside the `<body>` of the panel.
+- `children?: React.ReactNode` - Optional. The content that gets rendered inside the `<body>` of the panel.
 
 
 ## Contributing
diff --git a/example/App.tsx b/example/App.tsx
@@ -2,7 +2,13 @@ import "./App.css";
 
 import { Session, Chatbox, HtmlPanel } from "../lib/main";
 import Talk from "talkjs";
-import { ChangeEvent, useCallback, useMemo, useRef, useState } from "react";
+import React, {
+  ChangeEvent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 const convIds = ["talk-react-94872948u429843", "talk-react-194872948u429843"];
 const users = [
diff --git a/example/panel.html b/example/panel.html
@@ -3,8 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+
+    <!--
+      Put your app's CSS here. For instance, if your bundler generates a CSS
+      file from all component styles, load it here as well and your components
+      will be styled correctly inside the HTML Panel
+    -->
+    <link rel="stylesheet" href="./your-styles.css" />
+
     <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
       body {
         background-color: lightblue;
       }
diff --git a/lib/HtmlPanel.tsx b/lib/HtmlPanel.tsx
@@ -21,7 +21,7 @@ type HtmlPanelProps = {
   conversationId?: string;
 
   /** The content that gets rendered inside the `<body>` of the panel. */
-  children: React.ReactNode;
+  children?: React.ReactNode;
 };
 
 export function HtmlPanel({
@@ -34,6 +34,10 @@ export function HtmlPanel({
   const [panel, setPanel] = useState<undefined | Talk.HtmlPanel>(undefined);
   const box = useContext(BoxContext);
 
+  const normalizedPanelUrl = new URL(url, document.baseURI);
+  const baseUrl = new URL(document.baseURI);
+  const isCrossOrigin = normalizedPanelUrl.origin !== baseUrl.origin;
+
   useEffect(() => {
     async function run() {
       if (!box || panel) return Promise.resolve(panel);
@@ -42,12 +46,21 @@ export function HtmlPanel({
         url,
         conversation: conversationId,
         height,
-        show: false,
+        // If the frame is cross-origin, we can't render children into it anyway
+        // so we show the panel straight away. If we can render, we hide it
+        // first and wait for the DOMContentLoaded event to fire before showing
+        // the panel to avoid a flash of content that's missing the React
+        // portal.
+        show: isCrossOrigin,
       });
 
-      await newPanel.DOMContentLoadedPromise;
-      if (show) {
-        newPanel.show();
+      if (!isCrossOrigin) {
+        // This promise will never resolve if the panel isn't on the same origin.
+        // We skip the `await` if that's the case.
+        await newPanel.DOMContentLoadedPromise;
+        if (show) {
+          newPanel.show();
+        }
       }
 
       setPanel(newPanel);
@@ -82,5 +95,9 @@ export function HtmlPanel({
     }
   }, [panel, show]);
 
-  return <>{panel && createPortal(children, panel.window.document.body)}</>;
+  const shouldRender = !isCrossOrigin && panel && children;
+
+  return (
+    <>{shouldRender && createPortal(children, panel.window.document.body)}</>
+  );
 }
diff --git a/lib/util.ts b/lib/util.ts
@@ -67,10 +67,23 @@ export function splitObjectByPrefix<P extends string, T extends object>(
   return [prefixed, unprefixed];
 }
 
-export function validateChildrenAreHtmlPanels(children?: React.ReactNode) {
+const REACT_FRAGMENT_TYPE = React.createElement(React.Fragment).type;
+export function validateChildrenAreHtmlPanels(
+  children?: React.ReactNode,
+): boolean {
   if (!children) return true;
 
   return React.Children.toArray(children).every((x) => {
-    return typeof x === "object" && (x as any).type === HtmlPanel;
+    if (typeof x !== "object") return false;
+
+    const type = (x as any).type;
+    if (type === HtmlPanel) {
+      return true;
+    }
+    if (type === REACT_FRAGMENT_TYPE) {
+      return validateChildrenAreHtmlPanels((x as any).props.children);
+    }
+
+    return false;
   });
 }
