@chainai/react 1.0.0

package/dist/index.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * @chain-ai/react - React components for Chain AI
+ *
+ * Embeddable blockchain AI assistant components
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lightTheme = exports.darkTheme = exports.defaultTheme = exports.useChat = exports.useChainAI = exports.ChainAIProvider = exports.ActionPrompt = exports.ChatHeader = exports.ChatInput = exports.ChatMessage = exports.ChainAIWidget = exports.ChainAI = void 0;
+// Main component exports
+var ChainAI_1 = require("./components/ChainAI");
+Object.defineProperty(exports, "ChainAI", { enumerable: true, get: function () { return ChainAI_1.ChainAI; } });
+var ChainAIWidget_1 = require("./components/ChainAIWidget");
+Object.defineProperty(exports, "ChainAIWidget", { enumerable: true, get: function () { return ChainAIWidget_1.ChainAIWidget; } });
+// Individual component exports
+var ChatMessage_1 = require("./components/ChatMessage");
+Object.defineProperty(exports, "ChatMessage", { enumerable: true, get: function () { return ChatMessage_1.ChatMessage; } });
+var ChatInput_1 = require("./components/ChatInput");
+Object.defineProperty(exports, "ChatInput", { enumerable: true, get: function () { return ChatInput_1.ChatInput; } });
+var ChatHeader_1 = require("./components/ChatHeader");
+Object.defineProperty(exports, "ChatHeader", { enumerable: true, get: function () { return ChatHeader_1.ChatHeader; } });
+var ActionPrompt_1 = require("./components/ActionPrompt");
+Object.defineProperty(exports, "ActionPrompt", { enumerable: true, get: function () { return ActionPrompt_1.ActionPrompt; } });
+// Context/Provider exports
+var ChainAIProvider_1 = require("./context/ChainAIProvider");
+Object.defineProperty(exports, "ChainAIProvider", { enumerable: true, get: function () { return ChainAIProvider_1.ChainAIProvider; } });
+Object.defineProperty(exports, "useChainAI", { enumerable: true, get: function () { return ChainAIProvider_1.useChainAI; } });
+// Hook exports
+var useChat_1 = require("./hooks/useChat");
+Object.defineProperty(exports, "useChat", { enumerable: true, get: function () { return useChat_1.useChat; } });
+// Theme exports
+var themes_1 = require("./styles/themes");
+Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return themes_1.defaultTheme; } });
+Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return themes_1.darkTheme; } });
+Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return themes_1.lightTheme; } });

package/dist/styles/themes.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Theme system for Chain AI React components
+ */
+export interface Theme {
+    colors: {
+        primary: string;
+        primaryText: string;
+        background: string;
+        text: string;
+        border: string;
+        userMessage: string;
+        userMessageText: string;
+        assistantMessage: string;
+        assistantMessageText: string;
+        inputBackground: string;
+        headerBackground: string;
+        headerText: string;
+    };
+    fonts: {
+        body: string;
+        heading: string;
+    };
+    spacing: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}
+export declare const defaultTheme: Theme;
+export declare const darkTheme: Theme;
+export declare const lightTheme: Theme;

package/dist/styles/themes.js

@@ -0,0 +1,49 @@
+"use strict";
+/**
+ * Theme system for Chain AI React components
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lightTheme = exports.darkTheme = exports.defaultTheme = void 0;
+exports.defaultTheme = {
+    colors: {
+        primary: '#3b82f6',
+        primaryText: '#ffffff',
+        background: '#ffffff',
+        text: '#1f2937',
+        border: '#e5e7eb',
+        userMessage: '#3b82f6',
+        userMessageText: '#ffffff',
+        assistantMessage: '#f3f4f6',
+        assistantMessageText: '#1f2937',
+        inputBackground: '#ffffff',
+        headerBackground: '#f9fafb',
+        headerText: '#1f2937',
+    },
+    fonts: {
+        body: 'system-ui, -apple-system, sans-serif',
+        heading: 'system-ui, -apple-system, sans-serif',
+    },
+    spacing: {
+        small: '8px',
+        medium: '16px',
+        large: '24px',
+    },
+};
+exports.darkTheme = {
+    ...exports.defaultTheme,
+    colors: {
+        primary: '#3b82f6',
+        primaryText: '#ffffff',
+        background: '#1f2937',
+        text: '#f9fafb',
+        border: '#374151',
+        userMessage: '#3b82f6',
+        userMessageText: '#ffffff',
+        assistantMessage: '#374151',
+        assistantMessageText: '#f9fafb',
+        inputBackground: '#374151',
+        headerBackground: '#111827',
+        headerText: '#f9fafb',
+    },
+};
+exports.lightTheme = exports.defaultTheme;

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@chainai/react",
+  "version": "1.0.0",
+  "description": "React components for Chain AI - Embeddable blockchain AI assistant widget",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./styles/widget.css": "./styles/widget.css",
+    "./styles/default.css": "./styles/default.css"
+  },
+  "scripts": {
+    "build": "tsc && npm run copy-styles",
+    "copy-styles": "mkdir -p styles && cp src/styles/*.css styles/",
+    "dev": "tsc --watch",
+    "test": "jest",
+    "lint": "eslint src --ext .ts,.tsx",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "blockchain",
+    "ai",
+    "react",
+    "chat",
+    "widget",
+    "ui",
+    "chain-ai",
+    "crypto",
+    "web3",
+    "chatbot"
+  ],
+  "author": "Chain AI",
+  "license": "MIT",
+  "dependencies": {
+    "@chainai/core": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chain-ai/npm-packages.git"
+  },
+  "homepage": "https://github.com/chain-ai/npm-packages#readme",
+  "bugs": {
+    "url": "https://github.com/chain-ai/npm-packages/issues"
+  }
+}

package/styles/default.css

@@ -0,0 +1,156 @@
+/* Chain AI Default Styles */
+
+.chain-ai-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.chain-ai-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid;
+}
+
+.chain-ai-header-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.chain-ai-header-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chain-ai-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chain-ai-welcome {
+  text-align: center;
+  padding: 48px 16px;
+  color: #6b7280;
+}
+
+.chain-ai-welcome h2 {
+  margin: 0 0 8px 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: inherit;
+}
+
+.chain-ai-welcome p {
+  margin: 0;
+  font-size: 16px;
+}
+
+.chain-ai-message {
+  max-width: 80%;
+  padding: 12px 16px;
+  border-radius: 8px;
+  position: relative;
+}
+
+.chain-ai-message-user {
+  align-self: flex-end;
+  margin-left: auto;
+}
+
+.chain-ai-message-assistant {
+  align-self: flex-start;
+  margin-right: auto;
+}
+
+.chain-ai-message-content {
+  margin: 0;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.chain-ai-message-timestamp {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 4px;
+}
+
+.chain-ai-input-container {
+  display: flex;
+  gap: 8px;
+  padding: 16px;
+  border-top: 1px solid;
+}
+
+.chain-ai-input {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 14px;
+  outline: none;
+}
+
+.chain-ai-input:focus {
+  border-color: #3b82f6;
+}
+
+.chain-ai-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.chain-ai-send-button {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.chain-ai-send-button:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.chain-ai-send-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.chain-ai-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.chain-ai-error {
+  padding: 12px;
+  background-color: #fee2e2;
+  color: #dc2626;
+  border-radius: 6px;
+  margin: 8px 0;
+  font-size: 14px;
+}