feat: add hook check for if the dojo is iframed from cpk docs

Author: brandonmcconnell

typescript-sdk/apps/dojo/src/components/code-viewer/code-viewer.tsx

@@ -1,12 +1,16 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { FileTree } from "@/components/file-tree/file-tree";
 import { CodeEditor } from "./code-editor";
 import { FeatureFile } from "@/types/feature";
 import { useURLParams } from "@/contexts/url-params-context";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useIsInsideIframe } from "@/utils/use-in-iframe";
+import { cn } from "@/lib/utils";
 
 export default function CodeViewer({ codeFiles }: { codeFiles: FeatureFile[] }) {
   const { file, setCodeFile, codeLayout } = useURLParams();
+  const isInsideIframe = useIsInsideIframe();
+  const isInsideCpkFrame = isInsideIframe && (document.referrer.includes("copilotkit.com") || document.referrer.includes("localhost"));
 
   const selectedFile = useMemo(
     () => codeFiles.find((f) => f.name === file) ?? codeFiles[0],
@@ -38,7 +42,10 @@ export default function CodeViewer({ codeFiles }: { codeFiles: FeatureFile[] })
               value={file.name}
               className="flex-1 mt-0 data-[state=inactive]:hidden"
             >
-              <div className="h-full rounded-xl overflow-hidden border border-b-0 border-cpk-docs-dark-bg/8 dark:border-white/6 -mx-px">
+              <div className={cn(
+                "h-full border border-b-0 border-cpk-docs-dark-bg/8 dark:border-white/6 -mx-px",
+                isInsideCpkFrame && "rounded-xl overflow-hidden",
+              )}>
                 <CodeEditor file={file} />
               </div>
             </TabsContent>
@@ -49,17 +56,23 @@ export default function CodeViewer({ codeFiles }: { codeFiles: FeatureFile[] })
   }
 
   return (
-    <div className="flex h-full bg-white">
+    <div className="flex h-full w-full bg-white">
       {/* wrapper div to mix the parent bg-white with bg-cpk-docs-dark-bg */}
-      <div className="bg-cpk-docs-dark-bg/3 dark:bg-cpk-docs-dark-bg/95">
+      <div className="flex h-full w-full bg-cpk-docs-dark-bg/3 dark:bg-cpk-docs-dark-bg/95">
         <div className="w-72 border-r border-gray-200 dark:border-neutral-700 flex flex-col">
           <div className="flex-1 overflow-auto">
             <FileTree files={codeFiles} selectedFile={selectedFile} onFileSelect={setCodeFile} />
           </div>
         </div>
-        <div className="flex-1 h-full py-5 bg-gray-50 dark:bg-[#1e1e1e] rounded-xl overflow-hidden">
+        <div className={cn(
+          "flex-1 h-full bg-gray-50 dark:bg-[#1e1e1e]",
+          isInsideCpkFrame && "rounded-xl overflow-hidden",
+        )}>
           {selectedFile ? (
-            <div className="h-full rounded-xl overflow-hidden border border-b-0 border-cpk-docs-dark-bg/8 dark:border-white/6 -mx-px">
+            <div className={cn(
+              "h-full border-cpk-docs-dark-bg/8 dark:border-white/6",
+              isInsideCpkFrame && "rounded-xl overflow-hidden",
+            )}>
               <CodeEditor file={selectedFile} />
             </div>
           ) : (

typescript-sdk/apps/dojo/src/utils/use-in-iframe.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export function useIsInsideIframe() {
+  const [isInside, setIsInside] = useState(false);
+
+  useEffect(() => {
+    const check = () => {
+      // Check if the window is a self-reference and not the top-level window
+      setIsInside(window.self !== window.top);
+    };
+    check();
+    // Optionally, you could add an event listener for resize if the iframe behavior needs to be tracked dynamically.
+  }, []);
+
+  return isInside;
+}