@yourgpt/copilot-sdk 1.2.11 → 1.3.0

package/README.md

@@ -15,7 +15,6 @@ npm install @yourgpt/copilot-sdk @yourgpt/llm-sdk
 ```tsx
 import { CopilotProvider } from "@yourgpt/copilot-sdk/react";
 import { CopilotChat } from "@yourgpt/copilot-sdk/ui";
-import "@yourgpt/copilot-sdk/ui/styles.css";
 
 function App() {
   return (
@@ -37,26 +36,36 @@ function App() {
 
 ## Styling (Tailwind CSS v4)
 
-Add the SDK source to your Tailwind config:
-
 ```css
 /* app/globals.css */
 @import "tailwindcss";
-
 @source "node_modules/@yourgpt/copilot-sdk/src/**/*.{ts,tsx}";
-
 @custom-variant dark (&:is(.dark *));
 ```
 
-For theming, optionally import the default CSS variables:
+## Theming
 
-```css
-@import "@yourgpt/copilot-sdk/ui/styles.css";
+Works automatically with existing shadcn/ui setup. For projects without shadcn:
+
+```tsx
+import "@yourgpt/copilot-sdk/ui/styles.css";
+import "@yourgpt/copilot-sdk/ui/themes/claude.css"; // Optional preset
+
+<div className="csdk-theme-claude">
+  <CopilotChat />
+</div>;
 ```
 
+**8 theme presets available:** Claude, Vercel, Supabase, Twitter, Linear, PostHog, Catppuccin, Modern
+
 ## Documentation
 
-Visit [copilot-sdk.yourgpt.ai](https://copilot-sdk.yourgpt.ai)
+Visit [copilot-sdk.yourgpt.ai](https://copilot-sdk.yourgpt.ai) for full documentation including:
+
+- Theme customization & CSS variables
+- Semantic CSS classes (`csdk-*`)
+- Creating custom themes
+- Dark mode support
 
 ## License
 

package/dist/styles.css

@@ -1,48 +1,64 @@
-/* YourGPT Copilot UI Styles */
-/* Add Tailwind v4 configuration here */
+/* YourGPT Copilot SDK - Base Styles */
+/* Default neutral theme */
 
-/* shadcn/ui CSS Variables */
 :root {
-  --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
-  --primary: 240 5.9% 10%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 240 4.8% 95.9%;
-  --secondary-foreground: 240 5.9% 10%;
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 5.9% 10%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 5.9% 90%;
-  --input: 240 5.9% 90%;
-  --ring: 240 5.9% 10%;
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(240 10% 3.9%);
+
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(240 10% 3.9%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(240 10% 3.9%);
+
+  --primary: hsl(240 5.9% 10%);
+  --primary-foreground: hsl(0 0% 98%);
+
+  --secondary: hsl(240 4.8% 95.9%);
+  --secondary-foreground: hsl(240 5.9% 10%);
+
+  --muted: hsl(240 4.8% 95.9%);
+  --muted-foreground: hsl(240 3.8% 46.1%);
+
+  --accent: hsl(240 4.8% 95.9%);
+  --accent-foreground: hsl(240 5.9% 10%);
+
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
+
+  --border: hsl(240 5.9% 90%);
+  --input: hsl(240 5.9% 90%);
+  --ring: hsl(240 5.9% 10%);
+
   --radius: 0.5rem;
 }
 
 .dark {
-  --background: 240 10% 3.9%;
-  --foreground: 0 0% 98%;
-  --card: 240 10% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 240 10% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 240 5.9% 10%;
-  --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 240 3.7% 15.9%;
-  --muted-foreground: 240 5% 64.9%;
-  --accent: 240 3.7% 15.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 3.7% 15.9%;
-  --input: 240 3.7% 15.9%;
-  --ring: 240 4.9% 83.9%;
+  --background: hsl(240 10% 3.9%);
+  --foreground: hsl(0 0% 98%);
+
+  --card: hsl(240 10% 3.9%);
+  --card-foreground: hsl(0 0% 98%);
+
+  --popover: hsl(240 10% 3.9%);
+  --popover-foreground: hsl(0 0% 98%);
+
+  --primary: hsl(0 0% 98%);
+  --primary-foreground: hsl(240 5.9% 10%);
+
+  --secondary: hsl(240 3.7% 15.9%);
+  --secondary-foreground: hsl(0 0% 98%);
+
+  --muted: hsl(240 3.7% 15.9%);
+  --muted-foreground: hsl(240 5% 64.9%);
+
+  --accent: hsl(240 3.7% 15.9%);
+  --accent-foreground: hsl(0 0% 98%);
+
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(0 0% 98%);
+
+  --border: hsl(240 3.7% 15.9%);
+  --input: hsl(240 3.7% 15.9%);
+  --ring: hsl(240 4.9% 83.9%);
 }

package/dist/themes/catppuccin.css

@@ -0,0 +1,69 @@
+/* Catppuccin Theme - Popular community theme, pastel colors */
+
+.csdk-theme-catppuccin,
+[data-csdk-theme="catppuccin"] {
+  /* Latte (Light) */
+  --background: hsl(220 23% 95%);
+  --foreground: hsl(234 16% 35%);
+
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(234 16% 35%);
+
+  --popover: hsl(223 16% 83%);
+  --popover-foreground: hsl(234 16% 35%);
+
+  --primary: hsl(267 84% 58%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(223 16% 83%);
+  --secondary-foreground: hsl(234 16% 35%);
+
+  --muted: hsl(220 17% 88%);
+  --muted-foreground: hsl(233 10% 47%);
+
+  --accent: hsl(189 71% 46%);
+  --accent-foreground: hsl(0 0% 100%);
+
+  --destructive: hsl(347 87% 44%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(225 14% 77%);
+  --input: hsl(223 16% 83%);
+  --ring: hsl(267 84% 58%);
+
+  --radius: 0.35rem;
+}
+
+/* Dark mode - Mocha */
+.dark.csdk-theme-catppuccin,
+.dark .csdk-theme-catppuccin,
+.dark[data-csdk-theme="catppuccin"],
+.dark [data-csdk-theme="catppuccin"] {
+  --background: hsl(240 21% 12%);
+  --foreground: hsl(227 70% 87%);
+
+  --card: hsl(240 21% 15%);
+  --card-foreground: hsl(227 70% 87%);
+
+  --popover: hsl(233 14% 31%);
+  --popover-foreground: hsl(227 70% 87%);
+
+  --primary: hsl(267 83% 80%);
+  --primary-foreground: hsl(240 21% 15%);
+
+  --secondary: hsl(234 13% 39%);
+  --secondary-foreground: hsl(227 70% 87%);
+
+  --muted: hsl(235 20% 21%);
+  --muted-foreground: hsl(228 24% 72%);
+
+  --accent: hsl(189 71% 73%);
+  --accent-foreground: hsl(240 21% 15%);
+
+  --destructive: hsl(351 74% 73%);
+  --destructive-foreground: hsl(240 21% 15%);
+
+  --border: hsl(237 16% 23%);
+  --input: hsl(237 16% 23%);
+  --ring: hsl(267 83% 80%);
+}

package/dist/themes/claude.css

@@ -0,0 +1,68 @@
+/* Claude Theme - Warm, earthy, AI-focused */
+
+.csdk-theme-claude,
+[data-csdk-theme="claude"] {
+  --background: hsl(45 33% 97%);
+  --foreground: hsl(47 20% 20%);
+
+  --card: hsl(45 33% 97%);
+  --card-foreground: hsl(60 5% 8%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(50 22% 13%);
+
+  --primary: hsl(16 56% 52%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(43 20% 89%);
+  --secondary-foreground: hsl(48 7% 31%);
+
+  --muted: hsl(44 24% 90%);
+  --muted-foreground: hsl(60 1% 50%);
+
+  --accent: hsl(43 20% 89%);
+  --accent-foreground: hsl(53 22% 13%);
+
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(45 8% 84%);
+  --input: hsl(47 6% 69%);
+  --ring: hsl(16 56% 52%);
+
+  --radius: 0.5rem;
+}
+
+/* Dark mode */
+.dark.csdk-theme-claude,
+.dark .csdk-theme-claude,
+.dark[data-csdk-theme="claude"],
+.dark [data-csdk-theme="claude"] {
+  --background: hsl(60 3% 15%);
+  --foreground: hsl(44 8% 74%);
+
+  --card: hsl(60 3% 15%);
+  --card-foreground: hsl(45 33% 97%);
+
+  --popover: hsl(60 3% 18%);
+  --popover-foreground: hsl(60 3% 90%);
+
+  --primary: hsl(14 62% 60%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(45 33% 97%);
+  --secondary-foreground: hsl(60 2% 18%);
+
+  --muted: hsl(60 5% 10%);
+  --muted-foreground: hsl(46 7% 69%);
+
+  --accent: hsl(52 10% 9%);
+  --accent-foreground: hsl(50 20% 95%);
+
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(55 5% 23%);
+  --input: hsl(52 5% 31%);
+  --ring: hsl(14 62% 60%);
+}

package/dist/themes/linear.css

@@ -0,0 +1,68 @@
+/* Linear Theme - Refined purple, sophisticated */
+
+.csdk-theme-linear,
+[data-csdk-theme="linear"] {
+  --background: hsl(260 20% 99%);
+  --foreground: hsl(260 25% 12%);
+
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(260 25% 12%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(260 25% 12%);
+
+  --primary: hsl(260 75% 50%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(260 15% 95%);
+  --secondary-foreground: hsl(260 25% 12%);
+
+  --muted: hsl(260 12% 94%);
+  --muted-foreground: hsl(260 10% 45%);
+
+  --accent: hsl(195 70% 55%);
+  --accent-foreground: hsl(260 25% 12%);
+
+  --destructive: hsl(0 75% 55%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(260 12% 90%);
+  --input: hsl(260 12% 90%);
+  --ring: hsl(260 75% 50%);
+
+  --radius: 0.5rem;
+}
+
+/* Dark mode */
+.dark.csdk-theme-linear,
+.dark .csdk-theme-linear,
+.dark[data-csdk-theme="linear"],
+.dark [data-csdk-theme="linear"] {
+  --background: hsl(260 30% 7%);
+  --foreground: hsl(260 10% 95%);
+
+  --card: hsl(260 28% 10%);
+  --card-foreground: hsl(260 10% 95%);
+
+  --popover: hsl(260 28% 10%);
+  --popover-foreground: hsl(260 10% 95%);
+
+  --primary: hsl(260 65% 58%);
+  --primary-foreground: hsl(260 30% 7%);
+
+  --secondary: hsl(260 22% 15%);
+  --secondary-foreground: hsl(260 10% 95%);
+
+  --muted: hsl(260 20% 15%);
+  --muted-foreground: hsl(260 10% 55%);
+
+  --accent: hsl(195 55% 55%);
+  --accent-foreground: hsl(260 30% 7%);
+
+  --destructive: hsl(0 62% 35%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(260 22% 18%);
+  --input: hsl(260 22% 18%);
+  --ring: hsl(260 65% 58%);
+}

package/dist/themes/modern-minimal.css

@@ -0,0 +1,68 @@
+/* Modern Minimal Theme - Clean, sharp, tech-focused */
+
+.csdk-theme-modern,
+[data-csdk-theme="modern"] {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 20%);
+
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 20%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 20%);
+
+  --primary: hsl(217 91% 60%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(220 14% 96%);
+  --secondary-foreground: hsl(220 9% 46%);
+
+  --muted: hsl(210 20% 98%);
+  --muted-foreground: hsl(220 9% 46%);
+
+  --accent: hsl(201 94% 94%);
+  --accent-foreground: hsl(224 64% 33%);
+
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(220 13% 91%);
+  --input: hsl(220 13% 91%);
+  --ring: hsl(217 91% 60%);
+
+  --radius: 0.375rem;
+}
+
+/* Dark mode */
+.dark.csdk-theme-modern,
+.dark .csdk-theme-modern,
+.dark[data-csdk-theme="modern"],
+.dark [data-csdk-theme="modern"] {
+  --background: hsl(0 0% 9%);
+  --foreground: hsl(0 0% 90%);
+
+  --card: hsl(0 0% 15%);
+  --card-foreground: hsl(0 0% 90%);
+
+  --popover: hsl(0 0% 15%);
+  --popover-foreground: hsl(0 0% 90%);
+
+  --primary: hsl(217 91% 60%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 90%);
+
+  --muted: hsl(0 0% 12%);
+  --muted-foreground: hsl(0 0% 64%);
+
+  --accent: hsl(224 64% 33%);
+  --accent-foreground: hsl(213 97% 87%);
+
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(0 0% 25%);
+  --input: hsl(0 0% 25%);
+  --ring: hsl(217 91% 60%);
+}

package/dist/themes/posthog.css

@@ -0,0 +1,216 @@
+/* PostHog Theme - NeoBrutalism style */
+/* Yellow/Gold focused, bold borders, offset shadows */
+
+.csdk-theme-posthog,
+[data-csdk-theme="posthog"] {
+  /* Base colors - warm off-white with yellow tints */
+  --background: hsl(45 100% 98%);
+  --foreground: hsl(30 10% 10%);
+
+  --card: hsl(45 50% 97%);
+  --card-foreground: hsl(30 10% 10%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(30 10% 10%);
+
+  --primary: hsl(37 92% 50%);
+  --primary-foreground: hsl(0 0% 0%);
+
+  --secondary: hsl(45 40% 92%);
+  --secondary-foreground: hsl(30 10% 15%);
+
+  --muted: hsl(45 30% 94%);
+  --muted-foreground: hsl(30 10% 40%);
+
+  --accent: hsl(45 60% 88%);
+  --accent-foreground: hsl(30 10% 10%);
+
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(30 15% 20%);
+  --input: hsl(30 15% 20%);
+  --ring: hsl(37 92% 50%);
+
+  --radius: 0.625rem;
+}
+
+/* Dark mode - subtle warm yellows on dark surface */
+.dark.csdk-theme-posthog,
+.dark .csdk-theme-posthog,
+.dark[data-csdk-theme="posthog"],
+.dark [data-csdk-theme="posthog"] {
+  --background: hsl(30 15% 8%);
+  --foreground: hsl(45 20% 90%);
+
+  --card: hsl(30 15% 10%);
+  --card-foreground: hsl(45 20% 90%);
+
+  --popover: hsl(30 15% 12%);
+  --popover-foreground: hsl(45 20% 90%);
+
+  --primary: hsl(40 85% 55%);
+  --primary-foreground: hsl(30 15% 8%);
+
+  --secondary: hsl(35 20% 18%);
+  --secondary-foreground: hsl(45 20% 90%);
+
+  --muted: hsl(35 15% 15%);
+  --muted-foreground: hsl(40 10% 60%);
+
+  --accent: hsl(40 25% 20%);
+  --accent-foreground: hsl(45 20% 90%);
+
+  --destructive: hsl(0 70% 45%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(40 30% 65%);
+  --input: hsl(40 30% 65%);
+  --ring: hsl(40 85% 55%);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   NeoBrutalism Component Styles
+   ═══════════════════════════════════════════════════════════ */
+
+/* User message bubble - transparent yellow in light, subtle solid in dark */
+.csdk-theme-posthog .csdk-message-user,
+[data-csdk-theme="posthog"] .csdk-message-user {
+  background: hsl(45 90% 88% / 0.7) !important;
+  color: hsl(30 15% 10%) !important;
+  border: 2px solid var(--border);
+  box-shadow: 3px 3px 0 0 var(--border);
+}
+
+.dark.csdk-theme-posthog .csdk-message-user,
+.dark .csdk-theme-posthog .csdk-message-user,
+.dark[data-csdk-theme="posthog"] .csdk-message-user,
+.dark [data-csdk-theme="posthog"] .csdk-message-user {
+  background: hsl(40 40% 22%) !important;
+  color: hsl(45 30% 92%) !important;
+}
+
+/* Assistant message bubble - light yellow tint in light, warm surface in dark */
+.csdk-theme-posthog .csdk-message-assistant,
+[data-csdk-theme="posthog"] .csdk-message-assistant {
+  background: hsl(48 50% 94% / 0.8) !important;
+  color: hsl(30 15% 15%) !important;
+  border: 2px solid var(--border);
+  box-shadow: 3px 3px 0 0 var(--border);
+}
+
+.dark.csdk-theme-posthog .csdk-message-assistant,
+.dark .csdk-theme-posthog .csdk-message-assistant,
+.dark[data-csdk-theme="posthog"] .csdk-message-assistant,
+.dark [data-csdk-theme="posthog"] .csdk-message-assistant {
+  background: hsl(35 25% 16%) !important;
+  color: hsl(45 20% 88%) !important;
+}
+
+/* Input container with brutal shadow */
+.csdk-theme-posthog .csdk-input,
+[data-csdk-theme="posthog"] .csdk-input {
+  border: 2px solid var(--border) !important;
+  box-shadow: 4px 4px 0 0 var(--border);
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.csdk-theme-posthog .csdk-input:focus-within,
+[data-csdk-theme="posthog"] .csdk-input:focus-within {
+  transform: translate(-1px, -1px);
+  box-shadow: 5px 5px 0 0 var(--border);
+}
+
+/* Send button with brutal style */
+.csdk-theme-posthog .csdk-button-send,
+[data-csdk-theme="posthog"] .csdk-button-send {
+  border: 2px solid var(--border) !important;
+  box-shadow: 2px 2px 0 0 var(--border);
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.csdk-theme-posthog .csdk-button-send:hover,
+[data-csdk-theme="posthog"] .csdk-button-send:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 3px 3px 0 0 var(--border);
+}
+
+.csdk-theme-posthog .csdk-button-send:active,
+[data-csdk-theme="posthog"] .csdk-button-send:active {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 0 var(--border);
+}
+
+/* Stop button with brutal style */
+.csdk-theme-posthog .csdk-button-stop,
+[data-csdk-theme="posthog"] .csdk-button-stop {
+  border: 2px solid var(--border) !important;
+  box-shadow: 2px 2px 0 0 var(--border);
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.csdk-theme-posthog .csdk-button-stop:hover,
+[data-csdk-theme="posthog"] .csdk-button-stop:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 3px 3px 0 0 var(--border);
+}
+
+/* Attach button with brutal style */
+.csdk-theme-posthog .csdk-button-attach,
+[data-csdk-theme="posthog"] .csdk-button-attach {
+  border: 2px solid var(--border);
+  box-shadow: 2px 2px 0 0 var(--border);
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.csdk-theme-posthog .csdk-button-attach:hover,
+[data-csdk-theme="posthog"] .csdk-button-attach:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 3px 3px 0 0 var(--border);
+}
+
+/* Follow-up buttons with brutal style */
+.csdk-theme-posthog .csdk-followup-button,
+[data-csdk-theme="posthog"] .csdk-followup-button {
+  border: 2px solid var(--border) !important;
+  box-shadow: 2px 2px 0 0 var(--border);
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.csdk-theme-posthog .csdk-followup-button:hover,
+[data-csdk-theme="posthog"] .csdk-followup-button:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 3px 3px 0 0 var(--border);
+}
+
+/* Avatar with brutal border */
+.csdk-theme-posthog .csdk-avatar,
+[data-csdk-theme="posthog"] .csdk-avatar {
+  border: 2px solid var(--border);
+  border-radius: 0.375rem;
+}
+
+.csdk-theme-posthog .csdk-avatar-fallback,
+[data-csdk-theme="posthog"] .csdk-avatar-fallback {
+  border-radius: 0.25rem;
+}
+
+/* General button styling for brutal theme */
+.csdk-theme-posthog .csdk-button,
+[data-csdk-theme="posthog"] .csdk-button {
+  border: 2px solid var(--border) !important;
+  box-shadow: 2px 2px 0 0 var(--border);
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.csdk-theme-posthog .csdk-button:hover,
+[data-csdk-theme="posthog"] .csdk-button:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 3px 3px 0 0 var(--border);
+}
+
+.csdk-theme-posthog .csdk-button:active,
+[data-csdk-theme="posthog"] .csdk-button:active {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 0 var(--border);
+}