feat: finesse iframe'd styling for dojo examples

Author: brandonmcconnell

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx

@@ -6,6 +6,7 @@ import filesJSON from '../../../files.json'
 import Readme from "@/components/readme/readme";
 import CodeViewer from "@/components/code-viewer/code-viewer";
 import { useURLParams } from "@/contexts/url-params-context";
+import { cn } from "@/lib/utils";
 
 type FileItem = {
   name: string;
@@ -24,6 +25,7 @@ interface Props {
 }
 
 export default function FeatureLayout({ children, params }: Props) {
+  const { sidebarHidden } = useURLParams();
   const { integrationId } = React.use(params);
   const pathname = usePathname();
   const { view } = useURLParams();
@@ -58,7 +60,11 @@ export default function FeatureLayout({ children, params }: Props) {
   }, [children, codeFiles, readme, view])
 
   return (
-    <div className="bg-(--copilot-kit-background-color) rounded-lg w-full h-full overflow-hidden">
+    <div className={cn(
+      "bg-white rounded-lg w-full h-full overflow-hidden",
+      // if used in iframe, match background to chat background color, otherwise, use white
+      sidebarHidden && "bg-(--copilot-kit-background-color)",
+    )}>
       <div className="flex flex-col h-full overflow-auto">
         {content}
       </div>

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

@@ -2,6 +2,7 @@ import React from "react";
 import { ViewerConfig } from "@/types/feature";
 import { cn } from "@/lib/utils";
 import { useMobileView } from "@/utils/use-mobile-view";
+import { useURLParams } from "@/contexts/url-params-context";
 
 interface ViewerLayoutProps extends ViewerConfig {
   className?: string;
@@ -15,11 +16,12 @@ export function ViewerLayout({
   className,
   children,
 }: ViewerLayoutProps) {
+  const { sidebarHidden } = useURLParams();
   const { isMobile } = useMobileView();
 
   return (
     <div className={cn("relative flex h-screen overflow-hidden bg-palette-surface-main", className, {
-      "p-spacing-2": !isMobile,
+      "p-spacing-2": !isMobile && !sidebarHidden,
     })}>
       <div className="flex flex-1 overflow-hidden z-1">
         <main className="flex-1 overflow-auto">

typescript-sdk/apps/dojo/src/components/theme-wrapper.tsx

@@ -4,12 +4,13 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { useURLParams } from "@/contexts/url-params-context";
 
 export function ThemeWrapper({ children }: { children: React.ReactNode }) {
-  const { theme } = useURLParams();
+  const { sidebarHidden, theme } = useURLParams();
 
   return (
     <ThemeProvider
       attribute="class"
-      forcedTheme={theme}
+      // if used in iframe, detect theme passed via url param, otherwise, use light
+      forcedTheme={sidebarHidden ? theme : "light"}
       enableSystem={false}
       themes={["light", "dark"]}
       disableTransitionOnChange