@blockspark/chat-widget 1.0.2 → 1.0.4

package/README.md

@@ -33,9 +33,18 @@ npm install /path/to/blockspark-chat-widget
 
 ## Usage
 
+Use **camelCase** for all props in every environment (React, Next.js, Vue, and CDN). Examples: `dfProjectId`, `serviceAccountKey`, `languageCode`.
+
+**Import the widget styles once.** The widget’s layout and appearance live in a separate CSS file. Your app must import it so the styles are bundled and applied; otherwise the widget will render but look unstyled. Use either:
+
+- `import '@blockspark/chat-widget/dist/styles.css';`
+- `import '@blockspark/chat-widget/styles.css';`
+
+---
+
 ### React
 
-Import the component and the default styles, then render with your config.
+Import the component and the default styles, then render with your config. Copy the props below and replace the placeholder values with yours.
 
 ```tsx
 import ChatWidget from '@blockspark/chat-widget';
@@ -50,9 +59,21 @@ function App() {
       dfLocation="us-central1"
       dfAgentId="your-agent-id"
       serviceAccountKey={serviceAccountKey}
+      // accessToken="your-token"  // use instead of serviceAccountKey if you have a token
       languageCode="en"
-      title="💬 My Chat"
+      title="💬 BlockSpark AI Assistant"
       subtitle="We're here to help"
+      welcomeTitle="👋 Welcome to Blockspark"
+      welcomeMessage="My name is BlockSpark AI Assistant and I'll guide you."
+      welcomeCta="💬 Click here to start chatting!"
+      showWelcomePopup={true}
+      welcomePopupDelay={1500}
+      fallbackWelcomeMessage="Hello! I'm BlockSpark AI Assistant. How can I help you today?"
+      inputPlaceholder="Type your message..."
+      emptyStateMessage="Hi! I'm BlockSpark AI Assistant. How can I help you today?"
+      debug={false}
+      backendBaseUrl="http://localhost:8012"
+      backendWsUrl="ws://localhost:8012"
     />
   );
 }
@@ -89,6 +110,19 @@ export default function Page() {
         dfAgentId="your-agent-id"
         serviceAccountKey={serviceAccountKey}
         languageCode="en"
+        title="💬 BlockSpark AI Assistant"
+        subtitle="We're here to help"
+        welcomeTitle="👋 Welcome to Blockspark"
+        welcomeMessage="My name is BlockSpark AI Assistant and I'll guide you."
+        welcomeCta="💬 Click here to start chatting!"
+        showWelcomePopup={true}
+        welcomePopupDelay={1500}
+        fallbackWelcomeMessage="Hello! I'm BlockSpark AI Assistant. How can I help you today?"
+        inputPlaceholder="Type your message..."
+        emptyStateMessage="Hi! I'm BlockSpark AI Assistant. How can I help you today?"
+        debug={false}
+        backendBaseUrl="http://localhost:8012"
+        backendWsUrl="ws://localhost:8012"
       />
     </div>
   );
@@ -107,13 +141,30 @@ const ChatWidget = dynamic(
 );
 
 export default function ChatPage() {
+  const serviceAccountKey = process.env.NEXT_PUBLIC_SERVICE_ACCOUNT_KEY_JSON
+    ? JSON.parse(process.env.NEXT_PUBLIC_SERVICE_ACCOUNT_KEY_JSON)
+    : undefined;
+
   return (
     <ChatWidget
       dfProjectId="your-project-id"
       dfLocation="us-central1"
       dfAgentId="your-agent-id"
-      serviceAccountKey={process.env.NEXT_PUBLIC_SERVICE_ACCOUNT_KEY_JSON ? JSON.parse(process.env.NEXT_PUBLIC_SERVICE_ACCOUNT_KEY_JSON) : undefined}
+      serviceAccountKey={serviceAccountKey}
       languageCode="en"
+      title="💬 BlockSpark AI Assistant"
+      subtitle="We're here to help"
+      welcomeTitle="👋 Welcome to Blockspark"
+      welcomeMessage="My name is BlockSpark AI Assistant and I'll guide you."
+      welcomeCta="💬 Click here to start chatting!"
+      showWelcomePopup={true}
+      welcomePopupDelay={1500}
+      fallbackWelcomeMessage="Hello! I'm BlockSpark AI Assistant. How can I help you today?"
+      inputPlaceholder="Type your message..."
+      emptyStateMessage="Hi! I'm BlockSpark AI Assistant. How can I help you today?"
+      debug={false}
+      backendBaseUrl="http://localhost:8012"
+      backendWsUrl="ws://localhost:8012"
     />
   );
 }
@@ -138,16 +189,29 @@ app.use(BlockSparkChatWidget); // registers <BlockSparkChatWidget>
 app.mount('#app');
 ```
 
-Then in any template:
+Then in any template (copy and replace the placeholder values):
 
 ```vue
 <template>
   <BlockSparkChatWidget
-    df-project-id="your-project-id"
-    df-location="us-central1"
-    df-agent-id="your-agent-id"
-    :service-account-key="serviceAccountKey"
-    language-code="en"
+    dfProjectId="your-project-id"
+    dfLocation="us-central1"
+    dfAgentId="your-agent-id"
+    :serviceAccountKey="serviceAccountKey"
+    languageCode="en"
+    title="💬 BlockSpark AI Assistant"
+    subtitle="We're here to help"
+    welcomeTitle="👋 Welcome to Blockspark"
+    welcomeMessage="My name is BlockSpark AI Assistant and I'll guide you."
+    welcomeCta="💬 Click here to start chatting!"
+    :showWelcomePopup="true"
+    :welcomePopupDelay="1500"
+    fallbackWelcomeMessage="Hello! I'm BlockSpark AI Assistant. How can I help you today?"
+    inputPlaceholder="Type your message..."
+    emptyStateMessage="Hi! I'm BlockSpark AI Assistant. How can I help you today?"
+    :debug="false"
+    backendBaseUrl="http://localhost:8012"
+    backendWsUrl="ws://localhost:8012"
   />
 </template>
 ```
@@ -164,17 +228,28 @@ import serviceAccountKey from './path/to/service-account-key.json';
 
 <template>
   <BlockSparkChatWidgetVue
-    df-project-id="your-project-id"
-    df-location="us-central1"
-    df-agent-id="your-agent-id"
-    :service-account-key="serviceAccountKey"
-    language-code="en"
+    dfProjectId="your-project-id"
+    dfLocation="us-central1"
+    dfAgentId="your-agent-id"
+    :serviceAccountKey="serviceAccountKey"
+    languageCode="en"
+    title="💬 BlockSpark AI Assistant"
+    subtitle="We're here to help"
+    welcomeTitle="👋 Welcome to Blockspark"
+    welcomeMessage="My name is BlockSpark AI Assistant and I'll guide you."
+    welcomeCta="💬 Click here to start chatting!"
+    :showWelcomePopup="true"
+    :welcomePopupDelay="1500"
+    fallbackWelcomeMessage="Hello! I'm BlockSpark AI Assistant. How can I help you today?"
+    inputPlaceholder="Type your message..."
+    emptyStateMessage="Hi! I'm BlockSpark AI Assistant. How can I help you today?"
+    :debug="false"
+    backendBaseUrl="http://localhost:8012"
+    backendWsUrl="ws://localhost:8012"
   />
 </template>
 ```
 
-Use **kebab-case** for props in templates (e.g. `df-project-id`, `service-account-key`). All props from the Props table below are supported.
-
 ### CDN (script tag, no build step)
 
 You can load the widget from a CDN and mount it with React (the widget is a React component). Load React, ReactDOM, the widget CSS, and the widget script, then render into a container.
@@ -213,9 +288,21 @@ Replace `1.0.1` with the version you want (or use `latest` for the latest releas
         dfLocation: 'us-central1',
         dfAgentId: 'your-agent-id',
         serviceAccountKey: { /* your service account key object */ },
+        // accessToken: 'your-token',  // use instead of serviceAccountKey if you have a token
         languageCode: 'en',
         title: '💬 BlockSpark AI Assistant',
-        subtitle: "We're here to help"
+        subtitle: "We're here to help",
+        welcomeTitle: '👋 Welcome to Blockspark',
+        welcomeMessage: "My name is BlockSpark AI Assistant and I'll guide you.",
+        welcomeCta: '💬 Click here to start chatting!',
+        showWelcomePopup: true,
+        welcomePopupDelay: 1500,
+        fallbackWelcomeMessage: "Hello! I'm BlockSpark AI Assistant. How can I help you today?",
+        inputPlaceholder: 'Type your message...',
+        emptyStateMessage: "Hi! I'm BlockSpark AI Assistant. How can I help you today?",
+        debug: false,
+        backendBaseUrl: 'http://localhost:8012',
+        backendWsUrl: 'ws://localhost:8012'
       };
 
       if (ReactDOM.createRoot) {
@@ -257,6 +344,8 @@ The widget shows mode and connection status in the chat header.
 
 ## Props
 
+All props use **camelCase** in every framework (React, Next.js, Vue, CDN).
+
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `dfProjectId` | `string` | Yes | - | Dialogflow project ID |

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blockspark/chat-widget",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "BlockSpark Chat Widget - Reusable chat for React, Next.js, Vue 3, and CDN",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -67,6 +67,8 @@
       "import": "./dist/vue.js",
       "require": "./dist/vue.js",
       "types": "./types/vue.d.ts"
-    }
+    },
+    "./dist/styles.css": "./dist/styles.css",
+    "./styles.css": "./dist/styles.css"
   }
 }