checkpoint

Author: MikeRyanDev

src/app/globals.css

@@ -22,3 +22,40 @@ body,
 html {
   height: 100%;
 }
+
+.flash-create {
+  animation: flash-create 0.7s ease-out;
+}
+
+.flash-update {
+  animation: flash-update 0.6s ease-out;
+}
+
+@keyframes flash-create {
+  0% {
+    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.65);
+    border-color: rgba(45, 212, 191, 0.9);
+    background-color: rgba(15, 118, 110, 0.45);
+    transform: translateY(-4px) scale(1.02);
+  }
+  60% {
+    box-shadow: 0 0 0 16px rgba(45, 212, 191, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0);
+    border-color: rgba(51, 65, 85, 1);
+    background-color: rgba(15, 23, 42, 0.8);
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes flash-update {
+  0% {
+    color: #fef3c7;
+    text-shadow: 0 0 12px rgba(251, 191, 36, 0.7);
+  }
+  100% {
+    color: inherit;
+    text-shadow: none;
+  }
+}

src/app/page.tsx

@@ -9,21 +9,39 @@ import { s } from "@hashbrownai/core";
 
 export default function CopilotKitPage() {
   const chatKit = useChatKit();
-  const [themeColor] = useState("#6366f1");
+  const [themeColor] = useState("#60a5fa");
   useCopilotReadable({
     description: "output_schema",
     value: s.toJsonSchema(chatKit.schema),
   });
 
   return (
     <main
+      className="relative min-h-screen w-screen bg-slate-950 text-slate-100"
       style={
-        { "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties
+        {
+          "--copilot-kit-primary-color": themeColor,
+          "--copilot-kit-contrast-color": "#0b1120",
+          "--copilot-kit-background-color": "#0b1120",
+          "--copilot-kit-input-background-color": "#111827",
+          "--copilot-kit-secondary-color": "#1f2937",
+          "--copilot-kit-secondary-contrast-color": "#e2e8f0",
+          "--copilot-kit-separator-color": "#1f2937",
+          "--copilot-kit-muted-color": "#94a3b8",
+          "--copilot-kit-shadow-md": "0 12px 24px -12px rgba(0,0,0,0.6)",
+        } as CopilotKitCSSProperties
       }
     >
+      <a
+        href="/parser"
+        className="absolute right-6 top-6 z-10 rounded-full border border-slate-800 bg-slate-900/70 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-200 transition hover:border-slate-600 hover:text-white"
+      >
+        Parser Demo
+      </a>
       <CopilotChat
         disableSystemMessage={true}
         RenderMessage={CustomMessageRenderer}
+        className="h-screen w-screen"
         labels={{
           title: "Popup Assistant",
         }}