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

Author: brandonmcconnell

typescript-sdk/apps/dojo/src/app/globals.css

@@ -187,6 +187,7 @@
   --cohere: hsl(0 80% 60%); /* Bright red */ --background: oklch(1 0 0); --foreground: oklch(0.145 0 0);
 
   --cpk-docs-dark-bg: oklch(0.274 0.006 286.033);
+  --cpk-docs-primary: oklch(0.55 0.25 285);
 }
 
 .dark {
@@ -271,6 +272,12 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-cpk-docs-dark-bg: var(--cpk-docs-dark-bg);
+  --color-cpk-docs-primary: var(--cpk-docs-primary);
+
+  /* supporting variables for color-mix (see related color-mix-* utilities below */
+  --color-mix-from: var(--tw-mix-from);
+  --color-mix-to: var(--tw-mix-to);
+  --color-mix: var(--tw-mix);
 }
 
 @layer base {
@@ -290,4 +297,56 @@
 /* hide scroll decoration on code blocks */
 .monaco-editor .overflow-guard .scroll-decoration {
   @apply hidden!;
+}
+
+@utility mix-from-* {
+  --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%));
+  /* 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);
+  @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);
+  }
+  /* 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);
+}
+
+@utility mix-to-* {
+  --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);
+  @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);
+  }
+  /* 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);
+}
+
+@utility mix-* {
+  --tw-mix-percent: --value(--opacity-*, [percentage]);
+  --tw-mix-percent: calc(--value(number) * 1%);
+  --tw-mix-percent: calc(--value([number]) * 100%);
+  --tw-mix-opacity: --modifier(--opacity-*, [percentage]);
+  --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);
+  @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);
+  }
+  /* 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);
 }

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

@@ -4,13 +4,12 @@ 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 { useIsInsideCpkFrame } from "@/utils/use-is-inside-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 isInsideCpkFrame = useIsInsideCpkFrame();
 
   const selectedFile = useMemo(
     () => codeFiles.find((f) => f.name === file) ?? codeFiles[0],
@@ -30,7 +29,12 @@ export default function CodeViewer({ codeFiles }: { codeFiles: FeatureFile[] })
               <TabsTrigger
                 key={file.name}
                 value={file.name}
-                className="border-0 shadow-none text-gray-600 dark:text-neutral-300 hover:bg-foreground/5 hover:text-gray-900 dark:hover:text-neutral-100 data-[state=active]:bg-foreground/8 data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"
+                className={cn(
+                  "border-0 shadow-none hover:bg-foreground/5 hover:text-gray-900 dark:hover:text-neutral-100 data-[state=active]:text-gray-900 dark:data-[state=active]:text-white",
+                  isInsideCpkFrame || true
+                    ? "mix-from-cpk-docs-primary mix-to-white mix-25 data-[state=active]:bg-mix/15 data-[state=active]:text-cpk-docs-primary data-[state=active]:dark:text-mix"
+                    : "data-[state=active]:bg-foreground/8 text-gray-600 dark:text-neutral-300",
+                )}
               >
                 {file.name.split("/").pop()}
               </TabsTrigger>

typescript-sdk/apps/dojo/src/components/file-tree/file-tree.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { ChevronDown, ChevronRight, File, Folder } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { FeatureFile } from "@/types/feature";
+import { useIsInsideCpkFrame } from "@/utils/use-is-inside-iframe";
 
 interface FileTreeProps {
   files: FeatureFile[];
@@ -23,15 +24,19 @@ function FileTreeNode({
   const [isOpen, setIsOpen] = React.useState(true);
   const isDirectory = entry.type === "directory";
   const isSelected = entry.name === selectedFileName;
+  const isInsideCpkFrame = useIsInsideCpkFrame();
 
   return (
     <div className={cn("relative", depth > 0 && "pl-2")}>
       {depth > 0 && <div className="absolute left-0 top-0 h-full w-px bg-border" />}
       <button
         className={cn(
           "flex w-full items-center gap-2 rounded-sm px-2 py-1 text-sm text-gray-700 dark:text-gray-200",
+          "mix-from-cpk-docs-primary mix-to-white mix-25",
           !isSelected && "hover:bg-foreground/5 hover:text-gray-900 dark:hover:text-white",
-          isSelected && "bg-foreground/10 text-gray-900 dark:text-white",
+          isSelected && (isInsideCpkFrame || true
+            ? "bg-mix/15 text-cpk-docs-primary dark:text-mix"
+            : "bg-foreground/10 text-gray-900 dark:text-white"),
           depth === 1 && "ml-0.5",
           depth === 2 && "ml-1",
           depth === 3 && "ml-1.5",

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

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export function useIsInsideIframe() {
+  const [isInside, setIsInside] = useState(false);
+
+  useEffect(() => {
+    const check = () => {
+      setIsInside(window.self !== window.top);
+    };
+    check();
+  }, []);
+
+  return isInside;
+}
+
+// returns true if the iframe is inside a copilotkit.com or localhost (for local internal development)
+export function useIsInsideCpkFrame(): boolean {
+  const isInsideIframe = useIsInsideIframe();
+  if (!isInsideIframe || typeof document === "undefined") return false;
+  const referrer = document.referrer ?? "";
+  const isInsideCpkFrame =
+    referrer.includes("copilotkit.com") || referrer.includes("localhost");
+  return isInsideCpkFrame;
+}