@agno-hq/chat-react 0.1.0 → 0.3.0

package/dist/tokens.css

@@ -0,0 +1,111 @@
+/*
+ * @agno-hq/chat-react — design tokens.
+ *
+ * Lifted from `agno-os/src/globals.css` so the components render with the same
+ * palette, radii and shadows as the AgentOS chat. Import this file alone
+ * (`@agno-hq/chat-react/tokens.css`) to keep the palette while supplying your own
+ * component CSS; `styles.css` already contains it.
+ *
+ * Declared on :root as well as the embed classes, so you can retheme globally
+ * or per-embed:
+ *
+ *   :root { --color-brand-brand: 99, 102, 241; --agno-radius-lg: 1.25rem; }
+ *
+ * Dark by default; add `agno-light` on the embed for light mode (`agno-dark`
+ * also works if you toggle both explicitly).
+ */
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Design tokens — Agno OS
+   ───────────────────────────────────────────────────────────────────────── */
+
+:root,
+.agno-root,
+.agno-launcher {
+  /* Radii (agno-os: --radius-rounded-*) */
+  --agno-radius-xs: 0.25rem;
+  --agno-radius-sm: 0.5rem;
+  --agno-radius-md: 0.625rem;
+  --agno-radius-lg: 0.75rem;
+  --agno-radius-xl: 1rem;
+  --agno-radius-full: 9999px;
+
+  /* Brand + semantic colours are theme-independent in Agno OS */
+  --color-brand-brand: 255, 64, 23;
+  --color-brand-accent: 235, 110, 82;
+  --color-positive: 34, 197, 94;
+  --color-destructive: 229, 57, 53;
+
+  /* Dark theme (agno-os `.dark`) */
+  --color-primary: 255, 255, 255;
+  --color-primary-accent: 24, 24, 27;
+  --color-muted: 161, 161, 170;
+  --color-background: 17, 17, 19;
+  --color-background-secondary: 39, 39, 42;
+  --color-border-default: 255, 255, 255, 0.2;
+  --color-border-selected: 255, 255, 255, 0.75;
+
+  --agno-shadow-border: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.4),
+    0 2px 4px 0 rgba(0, 0, 0, 0.3);
+  --agno-shadow-panel: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.6);
+
+  /* Semantic aliases used throughout this stylesheet. */
+  --agno-primary: rgb(var(--color-primary));
+  --agno-accent: rgb(var(--color-primary-accent));
+  --agno-muted: rgb(var(--color-muted));
+  --agno-bg: rgb(var(--color-background));
+  --agno-secondary: rgb(var(--color-background-secondary));
+  --agno-secondary-soft: rgba(var(--color-background-secondary), 0.5);
+  --agno-border: rgba(var(--color-border-default));
+  --agno-border-selected: rgba(var(--color-border-selected));
+  --agno-brand: rgb(var(--color-brand-brand));
+  --agno-brand-soft: rgba(var(--color-brand-brand), 0.14);
+  --agno-positive: rgb(var(--color-positive));
+  --agno-destructive: rgb(var(--color-destructive));
+  /* Agno OS layers subtle primary tints instead of extra greys. */
+  --agno-tint: rgba(var(--color-primary), 0.05);
+  --agno-tint-strong: rgba(var(--color-primary), 0.1);
+
+  /* Back-compat aliases (previous releases exposed these names). */
+  --agno-text: var(--agno-primary);
+  --agno-surface: var(--agno-bg);
+  --agno-surface-2: var(--agno-secondary);
+  --agno-error: var(--agno-destructive);
+  --agno-radius: var(--agno-radius-md);
+  --agno-primary-bg: var(--agno-primary);
+  --agno-primary-fg: var(--agno-accent);
+
+  /* Typography — repoint these to self-hosted faces to skip fonts.css. */
+  --agno-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --agno-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* Light theme (agno-os `:root`) */
+.agno-light,
+.agno-root.agno-light,
+.agno-launcher.agno-light {
+  --color-primary: 24, 24, 27;
+  --color-primary-accent: 255, 255, 255;
+  --color-muted: 113, 113, 122;
+  --color-background: 255, 255, 255;
+  --color-background-secondary: 244, 244, 245;
+  --color-border-default: 24, 24, 27, 0.1;
+  --color-border-selected: 24, 24, 27, 0.5;
+
+  --agno-shadow-border: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06),
+    0 2px 4px 0 rgba(0, 0, 0, 0.04);
+  --agno-shadow-panel: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 32px -8px rgba(0, 0, 0, 0.18);
+}
+
+/* Explicit dark, for apps that toggle both classes. */
+.agno-dark,
+.agno-root.agno-dark,
+.agno-launcher.agno-dark {
+  --color-primary: 255, 255, 255;
+  --color-primary-accent: 24, 24, 27;
+  --color-muted: 161, 161, 170;
+  --color-background: 17, 17, 19;
+  --color-background-secondary: 39, 39, 42;
+  --color-border-default: 255, 255, 255, 0.2;
+  --color-border-selected: 255, 255, 255, 0.75;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@agno-hq/chat-react",
-  "version": "0.1.0",
-  "description": "Headless React hook (useAgnoChat) + UI components for streaming Agno agents, teams, and workflows from an AgentOS backend.",
+  "version": "0.3.0",
+  "description": "Composable, embeddable React components for AgentOS — a headless chat hook, a provider for building your own layout, and drop-in chat embeds.",
   "license": "MIT",
   "author": "Agno",
   "homepage": "https://github.com/agno-agi/agno-chat-react#readme",
@@ -30,26 +30,68 @@
         "default": "./dist/index.cjs"
       }
     },
-    "./styles.css": "./dist/styles.css"
+    "./core": {
+      "import": {
+        "types": "./dist/core/index.d.ts",
+        "default": "./dist/core/index.js"
+      },
+      "require": {
+        "types": "./dist/core/index.d.cts",
+        "default": "./dist/core/index.cjs"
+      }
+    },
+    "./chat": {
+      "import": {
+        "types": "./dist/chat/index.d.ts",
+        "default": "./dist/chat/index.js"
+      },
+      "require": {
+        "types": "./dist/chat/index.d.cts",
+        "default": "./dist/chat/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./fonts.css": "./dist/fonts.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
     "build": "tsup",
+    "test": "node --import tsx --test test/*.test.ts",
     "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run typecheck && npm run build"
+    "prepublishOnly": "npm test && npm run typecheck && npm run build",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -o storybook-static"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
+  "dependencies": {
+    "lucide-react": "^1.39.0",
+    "shiki": "^3.23.0",
+    "streamdown": "^2.6.0"
+  },
   "devDependencies": {
+    "@storybook/addon-a11y": "^8.6.18",
+    "@storybook/addon-docs": "^8.6.18",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react-vite": "^8.6.18",
     "@types/node": "^26.1.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remark-gfm": "^4.0.1",
+    "storybook": "^8.6.18",
     "tsup": "^8.5.1",
-    "typescript": "^5.4.0"
+    "tsx": "^4.23.12",
+    "typescript": "^5.4.0",
+    "vite": "^5.4.21"
   },
   "publishConfig": {
     "access": "public"
@@ -61,6 +103,9 @@
     "chat",
     "streaming",
     "agents",
-    "llm"
-  ]
+    "llm",
+    "components",
+    "embeddable"
+  ],
+  "packageManager": "pnpm@11.21.0+sha512.521705bce689924eac72f5a3587122f362689ef6571e55ba80076fd637c11132ecffada26fad4ea79c485bfddbfd3d5a2a5b05805a77e893de71ec8a6cca3bb1"
 }