feat: Validate children of UIBox components

Author: Asha20

README.md

@@ -274,7 +274,7 @@ Accepted props:
   loading
 - `chatboxRef` (resp. `inboxRef`, `popupRef`) - Pass a ref (created with `useRef`) and it'll be set to the vanilla JS [Chatbox](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Chatbox/) (resp. [Inbox](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Inbox/), [Popup](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Popup/)) instance. See [above](#using-refs) for an example.
 - All [Talk.ChatboxOptions](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Session/#ChatboxOptions)
-- `children?: ReactNode` - Optional. You can provide an `<HtmlPanel>` component as a child to use [HTML Panels](https://talkjs.com/docs/Features/Customizations/HTML_Panels/).
+- `children?: ReactNode` - Optional. If provided, only [`<HtmlPanel>`](https://talkjs.com/docs/Features/Customizations/HTML_Panels/) components are allowed as children.
 
 Accepted events (props that start with "on"):
 

lib/ui/Chatbox.tsx

@@ -1,7 +1,11 @@
-import { CSSProperties, ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import type Talk from "talkjs";
 import { useSession } from "../SessionContext";
-import { getKeyForObject, splitObjectByPrefix } from "../util";
+import {
+  validateChildrenAreHtmlPanels,
+  getKeyForObject,
+  splitObjectByPrefix,
+} from "../util";
 import { useSetter, useConversation, useUIBox } from "../hooks";
 import { FirstParameter, UIBoxProps } from "../types";
 import { MountedBox } from "../MountedBox";
@@ -19,6 +23,12 @@ type ChatboxProps = UIBoxProps<Talk.Chatbox> &
 export function Chatbox(props: ChatboxProps) {
   const session = useSession();
 
+  if (!validateChildrenAreHtmlPanels(props.children)) {
+    throw new Error(
+      "<Chatbox> may only have <HtmlPanel> components as direct children.",
+    );
+  }
+
   if (session) {
     const key = getKeyForObject(session);
     return <ActiveChatbox key={key} session={session} {...props} />;

lib/ui/Inbox.tsx

@@ -1,7 +1,11 @@
 import { CSSProperties, ReactNode } from "react";
 import type Talk from "talkjs";
 import { useSession } from "../SessionContext";
-import { getKeyForObject, splitObjectByPrefix } from "../util";
+import {
+  getKeyForObject,
+  splitObjectByPrefix,
+  validateChildrenAreHtmlPanels,
+} from "../util";
 import { useSetter, useConversation, useUIBox } from "../hooks";
 import { FirstParameter, UIBoxProps } from "../types";
 import { MountedBox } from "../MountedBox";
@@ -13,11 +17,18 @@ type InboxProps = Partial<UIBoxProps<Talk.Inbox>> &
     loadingComponent?: ReactNode;
     style?: CSSProperties;
     className?: string;
+    children?: React.ReactNode;
   };
 
 export function Inbox(props: InboxProps) {
   const session = useSession();
 
+  if (!validateChildrenAreHtmlPanels(props.children)) {
+    throw new Error(
+      "<Inbox> may only have <HtmlPanel> components as direct children.",
+    );
+  }
+
   if (session) {
     const key = getKeyForObject(session);
     return <ActiveInbox key={key} session={session} {...props} />;

lib/ui/Popup.tsx

@@ -1,6 +1,10 @@
 import Talk from "talkjs";
 import { useSession } from "../SessionContext";
-import { getKeyForObject, splitObjectByPrefix } from "../util";
+import {
+  getKeyForObject,
+  splitObjectByPrefix,
+  validateChildrenAreHtmlPanels,
+} from "../util";
 import { useSetter, useConversation, useUIBox, useMountBox } from "../hooks";
 import { EventListeners } from "../EventListeners";
 import { UIBoxProps } from "../types";
@@ -9,11 +13,18 @@ type PopupProps = UIBoxProps<Talk.Popup> &
   Talk.PopupOptions & {
     highlightedWords?: Parameters<Talk.Popup["setHighlightedWords"]>[0];
     popupRef?: React.MutableRefObject<Talk.Popup | undefined>;
+    children?: React.ReactNode;
   };
 
 export function Popup(props: PopupProps) {
   const session = useSession();
 
+  if (!validateChildrenAreHtmlPanels(props.children)) {
+    throw new Error(
+      "<Popup> may only have <HtmlPanel> components as direct children.",
+    );
+  }
+
   if (session) {
     const key = getKeyForObject(session);
     return <ActivePopup key={key} session={session} {...props} />;

lib/util.ts

@@ -1,3 +1,6 @@
+import React from "react";
+import { HtmlPanel } from "./HtmlPanel";
+
 export type Func = (...args: any) => any;
 
 export interface Mountable {
@@ -63,3 +66,11 @@ export function splitObjectByPrefix<P extends string, T extends object>(
   }
   return [prefixed, unprefixed];
 }
+
+export function validateChildrenAreHtmlPanels(children?: React.ReactNode) {
+  if (!children) return true;
+
+  return React.Children.toArray(children).every((x) => {
+    return typeof x === "object" && (x as any).type === HtmlPanel;
+  });
+}