feat: update iframe capabilities for dojo (2) (#731)

* Add `chatDefaultOpen` parameter to close chat sidebar by default

* chore: remove unused imports

* feat: pass `chatDefaultOpen` to all uses of `CopilotSidebar` in Dojo

No instances of `CopilotPopup` are currently being used, and `CopilotChat` does not support `defaultOpen` prop

* fix: hide mobile header when `sidebarHidden=true` (`sidebar=false`)

* chore: consolidate redundant base styles

* fix: enforce body background/foreground colors (currently broken on 404)

* fix: support dark mode on code tabs

* chore: untrack and remove .DS_Store

* feat: improve dark mode styles

* feat: allow overriding theme via url `theme` param

* fix: match background to chat background color

* feat: finesse iframe'd styling for dojo examples

* fix: remove content rounded corners when used in iframe

* fix: use `neutral` color instead of `gray` when in iframe

* feat: add light and dark mode support for Monaco code editor

* feat: remove shadow from active tab in code editor tabs

* fix: use copilotkit docs bg color for code editor on dark mode

* feat: lighten code tabs active tab on light mode

* feat: offset tabs bg-color on dark mode

* feat: offset tabs bg-color on dark mode from 10% to 5%

* feat: round corners on code viewer contents to show as visually nested

* feat: refine how we mix background color

* feat: change bg mix opacity from 10% to 8% for light mode

* feat: change bg mix opacity from 8% to 3% for light mode

* fix(code-viewer): remove bottom border

* feat(code-viewer): refine CodeEditor wrapper border color

* fix(code-viewer): collapse redundant x-axis borders

* feat(code-viewer): refine border colors

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

* fix: dojo sidebar collapsing, add theme color when in cpk iframe

* feat: remove override forcing primary color

* fix: don't round corners on FileTree, even when in iframe

* fix: fix e2e test error

* chore: update files.json

* fix: add `console.log` statements for troubleshooting

* fix: fix dojo startup error when running `run-everything` script

* chore: wrap `IFRAME_DETECTION` console.log statements in console.group

* fix: fix `chatDefaultOpen` parameter value logic

* chore: generate files.json and uv.lock files

* chore: re-run `pnpm run generate-content-json`

Author: brandonmcconnell

apps/dojo/scripts/prep-dojo-everything.js

@@ -118,7 +118,7 @@ const ALL_TARGETS = {
     cwd: path.join(integrationsRoot, "microsoft-agent-framework/python/examples"),
   },
   "microsoft-agent-framework-dotnet": {
-    command: "dotnet restore AGUIDojoServer/AGUIDojoServer.csproj",
+    command: "dotnet restore AGUIDojoServer/AGUIDojoServer.csproj && dotnet build AGUIDojoServer/AGUIDojoServer.csproj",
     name: "Microsoft Agent Framework (.NET)",
     cwd: path.join(integrationsRoot, "microsoft-agent-framework/dotnet/examples"),
   },

apps/dojo/src/app/globals.css

@@ -307,33 +307,15 @@
 }
 
 @utility mix-from-* {
-  --tw-mix-from-color: --value(--color-*);
+  --tw-mix-from-color: --value(--color-*, color, [color]);
   --tw-mix-from-opacity: --modifier(--opacity-*, [percentage]);
   --tw-mix-from-opacity: calc(--modifier(number) * 1%);
   --tw-mix-from-opacity: calc(--modifier([number]) * 100%);
-  --tw-mix-from: --alpha(
-    var(--tw-mix-from-color) / var(--tw-mix-from-opacity, 100%)
-  );
+  --tw-mix-from: --alpha(var(--tw-mix-from-color) / var(--tw-mix-from-opacity, 100%));
   /* calculate the final color-mix result */
-  --tw-mix: color-mix(
-    color-mix(
-        in srgb,
-        var(--color-mix-from),
-        var(--color-mix-to) var(--tw-mix-percent, 50%)
-      )
-      var(--tw-mix-opacity, 100%),
-    transparent
-  );
+  --tw-mix: color-mix(color-mix(in srgb, var(--color-mix-from), var(--color-mix-to) var(--tw-mix-percent, 50%)) var(--tw-mix-opacity, 100%), transparent);
   @supports (color: color-mix(in lab, red, red)) {
-    --tw-mix: color-mix(
-      color-mix(
-          in oklab,
-          var(--color-mix-from),
-          var(--color-mix-to) var(--tw-mix-percent, 50%)
-        )
-        var(--tw-mix-opacity, 100%),
-      transparent
-    );
+    --tw-mix: color-mix(color-mix(in oklab, var(--color-mix-from), var(--color-mix-to) var(--tw-mix-percent, 50%)) var(--tw-mix-opacity, 100%), transparent);
   }
   /* redefining the color variables here to ensure they receive the latest values */
   --color-mix-from: var(--tw-mix-from);
@@ -342,31 +324,15 @@
 }
 
 @utility mix-to-* {
-  --tw-mix-to-color: --value(--color-*);
+  --tw-mix-to-color: --value(--color-*, color, [color]);
   --tw-mix-to-opacity: --modifier(--opacity-*, [percentage]);
   --tw-mix-to-opacity: calc(--modifier(number) * 1%);
   --tw-mix-to-opacity: calc(--modifier([number]) * 100%);
   --tw-mix-to: --alpha(var(--tw-mix-to-color) / var(--tw-mix-to-opacity, 100%));
   /* calculate the final color-mix result */
-  --tw-mix: color-mix(
-    color-mix(
-        in srgb,
-        var(--color-mix-from),
-        var(--color-mix-to) var(--tw-mix-percent, 50%)
-      )
-      var(--tw-mix-opacity, 100%),
-    transparent
-  );
+  --tw-mix: color-mix(color-mix(in srgb, var(--color-mix-from), var(--color-mix-to) var(--tw-mix-percent, 50%)) var(--tw-mix-opacity, 100%), transparent);
   @supports (color: color-mix(in lab, red, red)) {
-    --tw-mix: color-mix(
-      color-mix(
-          in oklab,
-          var(--color-mix-from),
-          var(--color-mix-to) var(--tw-mix-percent, 50%)
-        )
-        var(--tw-mix-opacity, 100%),
-      transparent
-    );
+    --tw-mix: color-mix(color-mix(in oklab, var(--color-mix-from), var(--color-mix-to) var(--tw-mix-percent, 50%)) var(--tw-mix-opacity, 100%), transparent);
   }
   /* redefining the color variables here to ensure they receive the latest values */
   --color-mix-from: var(--tw-mix-from);
@@ -382,30 +348,12 @@
   --tw-mix-opacity: calc(--modifier(number) * 1%);
   --tw-mix-opacity: calc(--modifier([number]) * 100%);
   /* calculate the final color-mix result */
-  --tw-mix: color-mix(
-    in srgb,
-    color-mix(
-        in srgb,
-        var(--color-mix-from),
-        var(--color-mix-to) var(--tw-mix-percent, 50%)
-      )
-      var(--tw-mix-opacity, 100%),
-    transparent
-  );
+  --tw-mix: color-mix(in srgb, color-mix(in srgb, var(--color-mix-from), var(--color-mix-to) var(--tw-mix-percent, 50%)) var(--tw-mix-opacity, 100%), transparent);
   @supports (color: color-mix(in lab, red, red)) {
-    --tw-mix: color-mix(
-      in oklab,
-      color-mix(
-          in oklab,
-          var(--color-mix-from),
-          var(--color-mix-to) var(--tw-mix-percent, 50%)
-        )
-        var(--tw-mix-opacity, 100%),
-      transparent
-    );
+    --tw-mix: color-mix(in oklab, color-mix(in oklab, var(--color-mix-from), var(--color-mix-to) var(--tw-mix-percent, 50%)) var(--tw-mix-opacity, 100%), transparent);
   }
   /* redefining the color variables here to ensure they receive the latest values */
   --color-mix-from: var(--tw-mix-from);
   --color-mix-to: var(--tw-mix-to);
   --color-mix: var(--tw-mix);
-}
+}

apps/dojo/src/contexts/url-params-context.tsx

@@ -140,7 +140,7 @@ export function URLParamsProvider({ children }: URLParamsProviderProps) {
     const newState: URLParamsState = {
       view: (searchParams.get("view") as View) || "preview",
       sidebarHidden: searchParams.get("sidebar") === "false",
-      chatDefaultOpen: searchParams.get("chatDefaultOpen") === "true",
+      chatDefaultOpen: searchParams.get("chatDefaultOpen") !== "false",
       frameworkPickerHidden: searchParams.get("frameworkPicker") === "false",
       viewPickerHidden: searchParams.get("viewPicker") === "false",
       featurePickerHidden: searchParams.get("featurePicker") === "false",

apps/dojo/src/utils/use-is-inside-iframe.ts

@@ -16,9 +16,14 @@ export function useIsInsideIframe() {
 // returns true if the iframe is inside a copilotkit.com or localhost (for local internal development)
 export function useIsInsideCpkFrame(): boolean {
   const isInsideIframe = useIsInsideIframe();
+  console.group("IFRAME_DETECTION");
+  console.log("isInsideIframe", isInsideIframe);
   if (!isInsideIframe || typeof document === "undefined") return false;
   const referrer = document.referrer ?? "";
   const isInsideCpkFrame =
     referrer.includes("copilotkit.com") || referrer.includes("localhost");
+  console.log("isInsideCpkFrame", isInsideCpkFrame);
+  console.log("referrer", referrer);
+  console.groupEnd();
   return isInsideCpkFrame;
 }