@blockspark/chat-widget 1.0.0

package/README.md

@@ -0,0 +1,209 @@
+# BlockSpark Chat Widget
+
+A reusable React chat widget component that connects directly with Dialogflow CX - no backend API required!
+
+## Installation
+
+### Option 1: Install from Local Path (Recommended for Development)
+
+```bash
+# In your website project directory
+npm install /path/to/blockspark-chat-widget
+# or
+npm install ../blockspark-chat-widget
+```
+
+### Option 2: Use npm link (For Development)
+
+```bash
+# In the blockspark-chat-widget directory
+npm link
+
+# In your website project directory
+npm link @blockspark/chat-widget
+```
+
+### Option 3: Publish to npm (For Production)
+
+```bash
+# Build the library first
+npm run build
+
+# Publish to npm (make sure you're logged in)
+npm publish
+```
+
+Then install in your project:
+```bash
+npm install @blockspark/chat-widget
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import ChatWidget from '@blockspark/chat-widget';
+import '@blockspark/chat-widget/dist/styles.css';
+
+// Load your Google Cloud service account key
+import serviceAccountKey from './path/to/service-account-key.json';
+
+function App() {
+  return (
+    <div>
+      <ChatWidget
+        dfProjectId="your-project-id"
+        dfLocation="us-central1"
+        dfAgentId="your-agent-id"
+        serviceAccountKey={serviceAccountKey}
+        languageCode="en"
+      />
+    </div>
+  );
+}
+```
+
+### Using Access Token (Alternative)
+
+If you prefer to manage authentication yourself:
+
+```tsx
+import ChatWidget from '@blockspark/chat-widget';
+import '@blockspark/chat-widget/dist/styles.css';
+
+function App() {
+  const [accessToken, setAccessToken] = useState<string>('');
+
+  // Get access token from your backend or OAuth flow
+  useEffect(() => {
+    // Your token fetching logic here
+    fetchAccessToken().then(setAccessToken);
+  }, []);
+
+  return (
+    <ChatWidget
+      dfProjectId="your-project-id"
+      dfLocation="us-central1"
+      dfAgentId="your-agent-id"
+      accessToken={accessToken}
+      languageCode="en"
+    />
+  );
+}
+```
+
+### With Custom Configuration
+
+```tsx
+import ChatWidget from '@blockspark/chat-widget';
+import '@blockspark/chat-widget/dist/styles.css';
+import serviceAccountKey from './service-account-key.json';
+
+function App() {
+  return (
+    <ChatWidget
+      dfProjectId="your-project-id"
+      dfLocation="us-central1"
+      dfAgentId="your-agent-id"
+      serviceAccountKey={serviceAccountKey}
+      languageCode="en"
+      title="💬 My Chat Assistant"
+      subtitle="How can I help you?"
+      welcomeTitle="👋 Welcome!"
+      welcomeMessage="I'm here to help you with any questions."
+      welcomeCta="Start chatting"
+      showWelcomePopup={true}
+      welcomePopupDelay={2000}
+      inputPlaceholder="Type your message..."
+      emptyStateMessage="Hi! How can I help you today?"
+      debug={false}
+    />
+  );
+}
+```
+
+### Import Types (TypeScript)
+
+```tsx
+import ChatWidget, { ChatWidgetProps, DialogflowConfig } from '@blockspark/chat-widget';
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `dfProjectId` | `string` | Yes | - | Dialogflow project ID |
+| `dfLocation` | `string` | No | `"us-central1"` | Dialogflow location |
+| `dfAgentId` | `string` | Yes | - | Dialogflow agent ID |
+| `serviceAccountKey` | `object` | Yes* | - | Google Cloud service account key JSON object |
+| `accessToken` | `string` | Yes* | - | Access token (alternative to serviceAccountKey) |
+| `languageCode` | `string` | No | `"en"` | Language code for Dialogflow |
+| `title` | `string` | No | `"💬 BlockSpark AI Assistant"` | Chat widget title |
+| `subtitle` | `string` | No | `"We're here to help"` | Chat widget subtitle |
+| `welcomeTitle` | `string` | No | `"👋 Welcome to Blockspark"` | Welcome popup title |
+| `welcomeMessage` | `string` | No | `"My name is BlockSpark..."` | Welcome popup message |
+| `welcomeCta` | `string` | No | `"💬 Click here to start chatting!"` | Welcome popup CTA text |
+| `showWelcomePopup` | `boolean` | No | `true` | Whether to show welcome popup |
+| `welcomePopupDelay` | `number` | No | `1500` | Delay before showing welcome popup (ms) |
+| `fallbackWelcomeMessage` | `string` | No | `"Hello! I'm BlockSpark..."` | Fallback message if API fails |
+| `inputPlaceholder` | `string` | No | `"Type your message..."` | Input field placeholder |
+| `emptyStateMessage` | `string` | No | `"Hi! I'm BlockSpark..."` | Empty state message |
+| `debug` | `boolean` | No | `false` | Enable debug logging |
+
+\* Either `serviceAccountKey` or `accessToken` must be provided.
+
+## How It Works
+
+The widget connects **directly** to Dialogflow CX using the REST API - no backend required! 
+
+1. **Authentication**: Uses Google Cloud service account key to generate OAuth2 access tokens
+2. **Session Management**: Creates and manages Dialogflow sessions automatically
+3. **Message Handling**: Sends messages directly to Dialogflow and displays responses
+4. **Rich Content**: Supports Dialogflow rich content (chips, cards, etc.)
+
+## Requirements
+
+- React 16.8.0 or higher
+- React DOM 16.8.0 or higher
+- Google Cloud service account with Dialogflow API enabled
+- Dialogflow CX agent
+
+## Getting Your Service Account Key
+
+1. Go to [Google Cloud Console](https://console.cloud.google.com/)
+2. Select your project
+3. Navigate to **IAM & Admin** > **Service Accounts**
+4. Create a new service account or select an existing one
+5. Create a JSON key and download it
+6. Enable **Dialogflow API** for your project
+7. Grant the service account **Dialogflow API User** role
+
+## Security Warning ⚠️
+
+**Important**: Service account keys contain sensitive credentials. 
+
+- **For Development**: You can import the key directly (as shown in examples)
+- **For Production**: 
+  - **DO NOT** expose service account keys in client-side code
+  - Use a backend proxy to handle authentication
+  - Or use OAuth2 flow to get access tokens securely
+  - Consider using restricted service account keys with minimal permissions
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build for production
+npm run build
+
+# Watch mode for development
+npm run dev
+```
+
+## License
+
+MIT
+export NPM_TOKEN=your_token_here

package/dist/components/ChatWidget.d.ts

@@ -0,0 +1,39 @@
+import "../styles/chatWidget.css";
+export interface ChatWidgetProps {
+    /** Custom title for the chat widget */
+    title?: string;
+    /** Custom subtitle for the chat widget */
+    subtitle?: string;
+    /** Welcome popup title */
+    welcomeTitle?: string;
+    /** Welcome popup message */
+    welcomeMessage?: string;
+    /** Welcome popup CTA text */
+    welcomeCta?: string;
+    /** Whether to show the welcome popup */
+    showWelcomePopup?: boolean;
+    /** Delay in milliseconds before showing welcome popup */
+    welcomePopupDelay?: number;
+    /** Fallback welcome message if API fails */
+    fallbackWelcomeMessage?: string;
+    /** Placeholder text for input field */
+    inputPlaceholder?: string;
+    /** Custom empty state message */
+    emptyStateMessage?: string;
+    /** Enable/disable debug logging */
+    debug?: boolean;
+    /** Dialogflow project ID */
+    dfProjectId?: string;
+    /** Dialogflow location (e.g., "us-central1") */
+    dfLocation?: string;
+    /** Dialogflow agent ID */
+    dfAgentId?: string;
+    /** Google Cloud service account key JSON object */
+    serviceAccountKey?: any;
+    /** Access token (alternative to serviceAccountKey) */
+    accessToken?: string;
+    /** Language code for Dialogflow */
+    languageCode?: string;
+}
+export default function ChatWidget({ title, subtitle, welcomeTitle, welcomeMessage, welcomeCta, showWelcomePopup: enableWelcomePopup, welcomePopupDelay, fallbackWelcomeMessage, inputPlaceholder, emptyStateMessage, debug, dfProjectId, dfLocation, dfAgentId, serviceAccountKey, accessToken, languageCode, }: ChatWidgetProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatWidget.d.ts.map

package/dist/components/ChatWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../src/components/ChatWidget.tsx"],"names":[],"mappings":"AAQA,OAAO,0BAA0B,CAAC;AAsBlC,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAoC,EACpC,QAA+B,EAC/B,YAAyC,EACzC,cAAyE,EACzE,UAA+C,EAC/C,gBAAgB,EAAE,kBAAyB,EAC3C,iBAAwB,EACxB,sBAAwF,EACxF,gBAAyC,EACzC,iBAAgF,EAChF,KAAa,EACb,WAAW,EACX,UAA0B,EAC1B,SAAS,EACT,iBAAiB,EACjB,WAAW,EACX,YAAmB,GACpB,EAAE,eAAe,2CA6bjB"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ChatWidget } from './components/ChatWidget';
+export * from './services/dialogflowClient';
+export * from './types';
+import ChatWidget from './components/ChatWidget';
+export default ChatWidget;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AAGxB,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,eAAe,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+/*! For license information please see index.js.LICENSE.txt */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.BlockSparkChatWidget=t(require("react")):e.BlockSparkChatWidget=t(e.React)}(this,e=>(()=>{"use strict";var t={12(t){t.exports=e},20(e,t,r){var s=r(12),o=Symbol.for("react.element"),n=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,i=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,r){var s,n={},l=null,d=null;for(s in void 0!==r&&(l=""+r),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(d=t.ref),t)a.call(t,s)&&!c.hasOwnProperty(s)&&(n[s]=t[s]);if(e&&e.defaultProps)for(s in t=e.defaultProps)void 0===n[s]&&(n[s]=t[s]);return{$$typeof:o,type:e,key:l,ref:d,props:n,_owner:i.current}}t.Fragment=n,t.jsx=l,t.jsxs=l},848(e,t,r){e.exports=r(20)}},r={};function s(e){var o=r[e];if(void 0!==o)return o.exports;var n=r[e]={exports:{}};return t[e](n,n.exports,s),n.exports}s.d=(e,t)=>{for(var r in t)s.o(t,r)&&!s.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var o={};s.d(o,{default:()=>X});var n=s(848),a=s(12);const i=crypto,c=e=>e instanceof CryptoKey;class l extends Error{constructor(e,t){super(e,t),this.code="ERR_JOSE_GENERIC",this.name=this.constructor.name,Error.captureStackTrace?.(this,this.constructor)}}l.code="ERR_JOSE_GENERIC",class extends l{constructor(e,t,r="unspecified",s="unspecified"){super(e,{cause:{claim:r,reason:s,payload:t}}),this.code="ERR_JWT_CLAIM_VALIDATION_FAILED",this.claim=r,this.reason=s,this.payload=t}}.code="ERR_JWT_CLAIM_VALIDATION_FAILED",class extends l{constructor(e,t,r="unspecified",s="unspecified"){super(e,{cause:{claim:r,reason:s,payload:t}}),this.code="ERR_JWT_EXPIRED",this.claim=r,this.reason=s,this.payload=t}}.code="ERR_JWT_EXPIRED",class extends l{constructor(){super(...arguments),this.code="ERR_JOSE_ALG_NOT_ALLOWED"}}.code="ERR_JOSE_ALG_NOT_ALLOWED";class d extends l{constructor(){super(...arguments),this.code="ERR_JOSE_NOT_SUPPORTED"}}d.code="ERR_JOSE_NOT_SUPPORTED",class extends l{constructor(e="decryption operation failed",t){super(e,t),this.code="ERR_JWE_DECRYPTION_FAILED"}}.code="ERR_JWE_DECRYPTION_FAILED",class extends l{constructor(){super(...arguments),this.code="ERR_JWE_INVALID"}}.code="ERR_JWE_INVALID";class u extends l{constructor(){super(...arguments),this.code="ERR_JWS_INVALID"}}u.code="ERR_JWS_INVALID";class h extends l{constructor(){super(...arguments),this.code="ERR_JWT_INVALID"}}h.code="ERR_JWT_INVALID",class extends l{constructor(){super(...arguments),this.code="ERR_JWK_INVALID"}}.code="ERR_JWK_INVALID",class extends l{constructor(){super(...arguments),this.code="ERR_JWKS_INVALID"}}.code="ERR_JWKS_INVALID",class extends l{constructor(e="no applicable key found in the JSON Web Key Set",t){super(e,t),this.code="ERR_JWKS_NO_MATCHING_KEY"}}.code="ERR_JWKS_NO_MATCHING_KEY",Symbol.asyncIterator,class extends l{constructor(e="multiple matching keys found in the JSON Web Key Set",t){super(e,t),this.code="ERR_JWKS_MULTIPLE_MATCHING_KEYS"}}.code="ERR_JWKS_MULTIPLE_MATCHING_KEYS",class extends l{constructor(e="request timed out",t){super(e,t),this.code="ERR_JWKS_TIMEOUT"}}.code="ERR_JWKS_TIMEOUT",class extends l{constructor(e="signature verification failed",t){super(e,t),this.code="ERR_JWS_SIGNATURE_VERIFICATION_FAILED"}}.code="ERR_JWS_SIGNATURE_VERIFICATION_FAILED";const p=(e,t,r=0)=>{0===r&&(t.unshift(t.length),t.unshift(6));const s=e.indexOf(t[0],r);if(-1===s)return!1;const o=e.subarray(s,s+t.length);return o.length===t.length&&(o.every((e,r)=>e===t[r])||p(e,t,s+1))},m=e=>{switch(!0){case p(e,[42,134,72,206,61,3,1,7]):return"P-256";case p(e,[43,129,4,0,34]):return"P-384";case p(e,[43,129,4,0,35]):return"P-521";case p(e,[43,101,110]):return"X25519";case p(e,[43,101,111]):return"X448";case p(e,[43,101,112]):return"Ed25519";case p(e,[43,101,113]):return"Ed448";default:throw new d("Invalid or unsupported EC Key Curve or OKP Key Sub Type")}};async function y(e,t,r){if("string"!=typeof e||0!==e.indexOf("-----BEGIN PRIVATE KEY-----"))throw new TypeError('"pkcs8" must be PKCS#8 formatted string');return((e,t,r)=>(async(e,t,r,s,o)=>{let n,a;const c=new Uint8Array(atob(r.replace(e,"")).split("").map(e=>e.charCodeAt(0))),l="spki"===t;switch(s){case"PS256":case"PS384":case"PS512":n={name:"RSA-PSS",hash:`SHA-${s.slice(-3)}`},a=l?["verify"]:["sign"];break;case"RS256":case"RS384":case"RS512":n={name:"RSASSA-PKCS1-v1_5",hash:`SHA-${s.slice(-3)}`},a=l?["verify"]:["sign"];break;case"RSA-OAEP":case"RSA-OAEP-256":case"RSA-OAEP-384":case"RSA-OAEP-512":n={name:"RSA-OAEP",hash:`SHA-${parseInt(s.slice(-3),10)||1}`},a=l?["encrypt","wrapKey"]:["decrypt","unwrapKey"];break;case"ES256":n={name:"ECDSA",namedCurve:"P-256"},a=l?["verify"]:["sign"];break;case"ES384":n={name:"ECDSA",namedCurve:"P-384"},a=l?["verify"]:["sign"];break;case"ES512":n={name:"ECDSA",namedCurve:"P-521"},a=l?["verify"]:["sign"];break;case"ECDH-ES":case"ECDH-ES+A128KW":case"ECDH-ES+A192KW":case"ECDH-ES+A256KW":{const e=m(c);n=e.startsWith("P-")?{name:"ECDH",namedCurve:e}:{name:e},a=l?[]:["deriveBits"];break}case"Ed25519":n={name:"Ed25519"},a=l?["verify"]:["sign"];break;case"EdDSA":n={name:m(c)},a=l?["verify"]:["sign"];break;default:throw new d('Invalid or unsupported "alg" (Algorithm) value')}return i.subtle.importKey(t,c,n,o?.extractable??!1,a)})(/(?:-----(?:BEGIN|END) PRIVATE KEY-----|\s)/g,"pkcs8",e,t,r))(e,t,r)}const f=new TextEncoder,g=new TextDecoder;const w=e=>(e=>{let t=e;"string"==typeof t&&(t=f.encode(t));const r=[];for(let e=0;e<t.length;e+=32768)r.push(String.fromCharCode.apply(null,t.subarray(e,e+32768)));return btoa(r.join(""))})(e).replace(/=/g,"").replace(/\+/g,"-").replace(/\//g,"_"),E=e=>{let t=e;t instanceof Uint8Array&&(t=g.decode(t)),t=t.replace(/-/g,"+").replace(/_/g,"/").replace(/\s/g,"");try{return(e=>{const t=atob(e),r=new Uint8Array(t.length);for(let e=0;e<t.length;e++)r[e]=t.charCodeAt(e);return r})(t)}catch{throw new TypeError("The input to be decoded is not correctly encoded.")}};function S(e,t="algorithm.name"){return new TypeError(`CryptoKey does not support this operation, its ${t} must be ${e}`)}function b(e,t){return e.name===t}function A(e){return parseInt(e.name.slice(4),10)}function _(e,t,...r){switch(t){case"HS256":case"HS384":case"HS512":{if(!b(e.algorithm,"HMAC"))throw S("HMAC");const r=parseInt(t.slice(2),10);if(A(e.algorithm.hash)!==r)throw S(`SHA-${r}`,"algorithm.hash");break}case"RS256":case"RS384":case"RS512":{if(!b(e.algorithm,"RSASSA-PKCS1-v1_5"))throw S("RSASSA-PKCS1-v1_5");const r=parseInt(t.slice(2),10);if(A(e.algorithm.hash)!==r)throw S(`SHA-${r}`,"algorithm.hash");break}case"PS256":case"PS384":case"PS512":{if(!b(e.algorithm,"RSA-PSS"))throw S("RSA-PSS");const r=parseInt(t.slice(2),10);if(A(e.algorithm.hash)!==r)throw S(`SHA-${r}`,"algorithm.hash");break}case"EdDSA":if("Ed25519"!==e.algorithm.name&&"Ed448"!==e.algorithm.name)throw S("Ed25519 or Ed448");break;case"Ed25519":if(!b(e.algorithm,"Ed25519"))throw S("Ed25519");break;case"ES256":case"ES384":case"ES512":{if(!b(e.algorithm,"ECDSA"))throw S("ECDSA");const r=function(e){switch(e){case"ES256":return"P-256";case"ES384":return"P-384";case"ES512":return"P-521";default:throw new Error("unreachable")}}(t);if(e.algorithm.namedCurve!==r)throw S(r,"algorithm.namedCurve");break}default:throw new TypeError("CryptoKey does not support this operation")}!function(e,t){if(t.length&&!t.some(t=>e.usages.includes(t))){let e="CryptoKey does not support this operation, its usages must include ";if(t.length>2){const r=t.pop();e+=`one of ${t.join(", ")}, or ${r}.`}else 2===t.length?e+=`one of ${t[0]} or ${t[1]}.`:e+=`${t[0]}.`;throw new TypeError(e)}}(e,r)}function v(e,t,...r){if((r=r.filter(Boolean)).length>2){const t=r.pop();e+=`one of type ${r.join(", ")}, or ${t}.`}else 2===r.length?e+=`one of type ${r[0]} or ${r[1]}.`:e+=`of type ${r[0]}.`;return null==t?e+=` Received ${t}`:"function"==typeof t&&t.name?e+=` Received function ${t.name}`:"object"==typeof t&&null!=t&&t.constructor?.name&&(e+=` Received an instance of ${t.constructor.name}`),e}const k=(e,...t)=>v("Key must be ",e,...t);function P(e,t,...r){return v(`Key for the ${e} algorithm must be `,t,...r)}const I=e=>!!c(e)||"KeyObject"===e?.[Symbol.toStringTag],R=["CryptoKey"];function C(e){if("object"!=typeof(t=e)||null===t||"[object Object]"!==Object.prototype.toString.call(e))return!1;var t;if(null===Object.getPrototypeOf(e))return!0;let r=e;for(;null!==Object.getPrototypeOf(r);)r=Object.getPrototypeOf(r);return Object.getPrototypeOf(e)===r}function x(e){return C(e)&&"string"==typeof e.kty}const T=e=>E(e);let D;const j=e=>"KeyObject"===e?.[Symbol.toStringTag],N=async(e,t,r,s,o=!1)=>{let n=e.get(t);if(n?.[s])return n[s];const a=await(async e=>{if(!e.alg)throw new TypeError('"alg" argument is required when "jwk.alg" is not present');const{algorithm:t,keyUsages:r}=function(e){let t,r;switch(e.kty){case"RSA":switch(e.alg){case"PS256":case"PS384":case"PS512":t={name:"RSA-PSS",hash:`SHA-${e.alg.slice(-3)}`},r=e.d?["sign"]:["verify"];break;case"RS256":case"RS384":case"RS512":t={name:"RSASSA-PKCS1-v1_5",hash:`SHA-${e.alg.slice(-3)}`},r=e.d?["sign"]:["verify"];break;case"RSA-OAEP":case"RSA-OAEP-256":case"RSA-OAEP-384":case"RSA-OAEP-512":t={name:"RSA-OAEP",hash:`SHA-${parseInt(e.alg.slice(-3),10)||1}`},r=e.d?["decrypt","unwrapKey"]:["encrypt","wrapKey"];break;default:throw new d('Invalid or unsupported JWK "alg" (Algorithm) Parameter value')}break;case"EC":switch(e.alg){case"ES256":t={name:"ECDSA",namedCurve:"P-256"},r=e.d?["sign"]:["verify"];break;case"ES384":t={name:"ECDSA",namedCurve:"P-384"},r=e.d?["sign"]:["verify"];break;case"ES512":t={name:"ECDSA",namedCurve:"P-521"},r=e.d?["sign"]:["verify"];break;case"ECDH-ES":case"ECDH-ES+A128KW":case"ECDH-ES+A192KW":case"ECDH-ES+A256KW":t={name:"ECDH",namedCurve:e.crv},r=e.d?["deriveBits"]:[];break;default:throw new d('Invalid or unsupported JWK "alg" (Algorithm) Parameter value')}break;case"OKP":switch(e.alg){case"Ed25519":t={name:"Ed25519"},r=e.d?["sign"]:["verify"];break;case"EdDSA":t={name:e.crv},r=e.d?["sign"]:["verify"];break;case"ECDH-ES":case"ECDH-ES+A128KW":case"ECDH-ES+A192KW":case"ECDH-ES+A256KW":t={name:e.crv},r=e.d?["deriveBits"]:[];break;default:throw new d('Invalid or unsupported JWK "alg" (Algorithm) Parameter value')}break;default:throw new d('Invalid or unsupported JWK "kty" (Key Type) Parameter value')}return{algorithm:t,keyUsages:r}}(e),s=[t,e.ext??!1,e.key_ops??r],o={...e};return delete o.alg,delete o.use,i.subtle.importKey("jwk",o,...s)})({...r,alg:s});return o&&Object.freeze(t),n?n[s]=a:e.set(t,{[s]:a}),a},H=async(e,t,r)=>{const s=await async function(e,t,r){if(t=await((e,t)=>{if(j(e)){let r=e.export({format:"jwk"});return r.k?T(r.k):(D||(D=new WeakMap),N(D,e,r,t))}return x(e)?e.k?E(e.k):(D||(D=new WeakMap),N(D,e,e,t,!0)):e})(t,e),c(t))return _(t,e,r),t;if(t instanceof Uint8Array){if(!e.startsWith("HS"))throw new TypeError(k(t,...R));return i.subtle.importKey("raw",t,{hash:`SHA-${e.slice(-3)}`,name:"HMAC"},!1,[r])}throw new TypeError(k(t,...R,"Uint8Array","JSON Web Key"))}(e,t,"sign");((e,t)=>{if(e.startsWith("RS")||e.startsWith("PS")){const{modulusLength:r}=t.algorithm;if("number"!=typeof r||r<2048)throw new TypeError(`${e} requires key modulusLength to be 2048 bits or larger`)}})(e,s);const o=await i.subtle.sign(function(e,t){const r=`SHA-${e.slice(-3)}`;switch(e){case"HS256":case"HS384":case"HS512":return{hash:r,name:"HMAC"};case"PS256":case"PS384":case"PS512":return{hash:r,name:"RSA-PSS",saltLength:e.slice(-3)>>3};case"RS256":case"RS384":case"RS512":return{hash:r,name:"RSASSA-PKCS1-v1_5"};case"ES256":case"ES384":case"ES512":return{hash:r,name:"ECDSA",namedCurve:t.namedCurve};case"Ed25519":return{name:"Ed25519"};case"EdDSA":return{name:t.name};default:throw new d(`alg ${e} is not supported either by JOSE or your javascript runtime`)}}(e,s.algorithm),s,r);return new Uint8Array(o)},K=e=>e?.[Symbol.toStringTag],O=(e,t,r)=>{if(void 0!==t.use&&"sig"!==t.use)throw new TypeError("Invalid key for this operation, when present its use must be sig");if(void 0!==t.key_ops&&!0!==t.key_ops.includes?.(r))throw new TypeError(`Invalid key for this operation, when present its key_ops must include ${r}`);if(void 0!==t.alg&&t.alg!==e)throw new TypeError(`Invalid key for this operation, when present its alg must be ${e}`);return!0};function $(e,t,r,s){t.startsWith("HS")||"dir"===t||t.startsWith("PBES2")||/^A\d{3}(?:GCM)?KW$/.test(t)?((e,t,r,s)=>{if(!(t instanceof Uint8Array)){if(s&&x(t)){if(function(e){return x(e)&&"oct"===e.kty&&"string"==typeof e.k}(t)&&O(e,t,r))return;throw new TypeError('JSON Web Key for symmetric algorithms must have JWK "kty" (Key Type) equal to "oct" and the JWK "k" (Key Value) present')}if(!I(t))throw new TypeError(P(e,t,...R,"Uint8Array",s?"JSON Web Key":null));if("secret"!==t.type)throw new TypeError(`${K(t)} instances for symmetric algorithms must be of type "secret"`)}})(t,r,s,e):((e,t,r,s)=>{if(s&&x(t))switch(r){case"sign":if(function(e){return"oct"!==e.kty&&"string"==typeof e.d}(t)&&O(e,t,r))return;throw new TypeError("JSON Web Key for this operation be a private JWK");case"verify":if(function(e){return"oct"!==e.kty&&void 0===e.d}(t)&&O(e,t,r))return;throw new TypeError("JSON Web Key for this operation be a public JWK")}if(!I(t))throw new TypeError(P(e,t,...R,s?"JSON Web Key":null));if("secret"===t.type)throw new TypeError(`${K(t)} instances for asymmetric algorithms must not be of type "secret"`);if("sign"===r&&"public"===t.type)throw new TypeError(`${K(t)} instances for asymmetric algorithm signing must be of type "private"`);if("decrypt"===r&&"public"===t.type)throw new TypeError(`${K(t)} instances for asymmetric algorithm decryption must be of type "private"`);if(t.algorithm&&"verify"===r&&"private"===t.type)throw new TypeError(`${K(t)} instances for asymmetric algorithm verifying must be of type "public"`);if(t.algorithm&&"encrypt"===r&&"private"===t.type)throw new TypeError(`${K(t)} instances for asymmetric algorithm encryption must be of type "public"`)})(t,r,s,e)}$.bind(void 0,!1);const W=$.bind(void 0,!0);class J{constructor(e){if(!(e instanceof Uint8Array))throw new TypeError("payload must be an instance of Uint8Array");this._payload=e}setProtectedHeader(e){if(this._protectedHeader)throw new TypeError("setProtectedHeader can only be called once");return this._protectedHeader=e,this}setUnprotectedHeader(e){if(this._unprotectedHeader)throw new TypeError("setUnprotectedHeader can only be called once");return this._unprotectedHeader=e,this}async sign(e,t){if(!this._protectedHeader&&!this._unprotectedHeader)throw new u("either setProtectedHeader or setUnprotectedHeader must be called before #sign()");if(!((...e)=>{const t=e.filter(Boolean);if(0===t.length||1===t.length)return!0;let r;for(const e of t){const t=Object.keys(e);if(r&&0!==r.size)for(const e of t){if(r.has(e))return!1;r.add(e)}else r=new Set(t)}return!0})(this._protectedHeader,this._unprotectedHeader))throw new u("JWS Protected and JWS Unprotected Header Parameter names must be disjoint");const r={...this._protectedHeader,...this._unprotectedHeader};let s=!0;if(function(e,t,r,s,o){if(void 0!==o.crit&&void 0===s?.crit)throw new e('"crit" (Critical) Header Parameter MUST be integrity protected');if(!s||void 0===s.crit)return new Set;if(!Array.isArray(s.crit)||0===s.crit.length||s.crit.some(e=>"string"!=typeof e||0===e.length))throw new e('"crit" (Critical) Header Parameter MUST be an array of non-empty strings when present');let n;n=void 0!==r?new Map([...Object.entries(r),...t.entries()]):t;for(const t of s.crit){if(!n.has(t))throw new d(`Extension Header Parameter "${t}" is not recognized`);if(void 0===o[t])throw new e(`Extension Header Parameter "${t}" is missing`);if(n.get(t)&&void 0===s[t])throw new e(`Extension Header Parameter "${t}" MUST be integrity protected`)}return new Set(s.crit)}(u,new Map([["b64",!0]]),t?.crit,this._protectedHeader,r).has("b64")&&(s=this._protectedHeader.b64,"boolean"!=typeof s))throw new u('The "b64" (base64url-encode payload) Header Parameter must be a boolean');const{alg:o}=r;if("string"!=typeof o||!o)throw new u('JWS "alg" (Algorithm) Header Parameter missing or invalid');W(o,e,"sign");let n,a=this._payload;s&&(a=f.encode(w(a))),n=this._protectedHeader?f.encode(w(JSON.stringify(this._protectedHeader))):f.encode("");const i=function(...e){const t=e.reduce((e,{length:t})=>e+t,0),r=new Uint8Array(t);let s=0;for(const t of e)r.set(t,s),s+=t.length;return r}(n,f.encode("."),a),c=await H(o,e,i),l={signature:w(c),payload:""};return s&&(l.payload=g.decode(a)),this._unprotectedHeader&&(l.header=this._unprotectedHeader),this._protectedHeader&&(l.protected=g.decode(n)),l}}class L{constructor(e){this._flattened=new J(e)}setProtectedHeader(e){return this._flattened.setProtectedHeader(e),this}async sign(e,t){const r=await this._flattened.sign(e,t);if(void 0===r.payload)throw new TypeError("use the flattened module for creating JWS with b64: false");return`${r.protected}.${r.payload}.${r.signature}`}}const M=e=>Math.floor(e.getTime()/1e3),V=/^(\+|\-)? ?(\d+|\d+\.\d+) ?(seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)(?: (ago|from now))?$/i,U=e=>{const t=V.exec(e);if(!t||t[4]&&t[1])throw new TypeError("Invalid time period format");const r=parseFloat(t[2]);let s;switch(t[3].toLowerCase()){case"sec":case"secs":case"second":case"seconds":case"s":s=Math.round(r);break;case"minute":case"minutes":case"min":case"mins":case"m":s=Math.round(60*r);break;case"hour":case"hours":case"hr":case"hrs":case"h":s=Math.round(3600*r);break;case"day":case"days":case"d":s=Math.round(86400*r);break;case"week":case"weeks":case"w":s=Math.round(604800*r);break;default:s=Math.round(31557600*r)}return"-"===t[1]||"ago"===t[4]?-s:s};function B(e,t){if(!Number.isFinite(t))throw new TypeError(`Invalid ${e} input`);return t}class F{constructor(e={}){if(!C(e))throw new TypeError("JWT Claims Set MUST be an object");this._payload=e}setIssuer(e){return this._payload={...this._payload,iss:e},this}setSubject(e){return this._payload={...this._payload,sub:e},this}setAudience(e){return this._payload={...this._payload,aud:e},this}setJti(e){return this._payload={...this._payload,jti:e},this}setNotBefore(e){return"number"==typeof e?this._payload={...this._payload,nbf:B("setNotBefore",e)}:e instanceof Date?this._payload={...this._payload,nbf:B("setNotBefore",M(e))}:this._payload={...this._payload,nbf:M(new Date)+U(e)},this}setExpirationTime(e){return"number"==typeof e?this._payload={...this._payload,exp:B("setExpirationTime",e)}:e instanceof Date?this._payload={...this._payload,exp:B("setExpirationTime",M(e))}:this._payload={...this._payload,exp:M(new Date)+U(e)},this}setIssuedAt(e){return void 0===e?this._payload={...this._payload,iat:M(new Date)}:e instanceof Date?this._payload={...this._payload,iat:B("setIssuedAt",M(e))}:this._payload="string"==typeof e?{...this._payload,iat:B("setIssuedAt",M(new Date)+U(e))}:{...this._payload,iat:B("setIssuedAt",e)},this}}class G extends F{setProtectedHeader(e){return this._protectedHeader=e,this}async sign(e,t){const r=new L(f.encode(JSON.stringify(this._payload)));if(r.setProtectedHeader(this._protectedHeader),Array.isArray(this._protectedHeader?.crit)&&this._protectedHeader.crit.includes("b64")&&!1===this._protectedHeader.b64)throw new h("JWTs MUST NOT use unencoded payload");return r.sign(e,t)}}async function q(e){if(e.accessToken)return e.accessToken;if(!e.serviceAccountKey)throw new Error("Either serviceAccountKey or accessToken must be provided");return await async function(e){const t=Math.floor(Date.now()/1e3);let r=e.private_key;if(!r)throw new Error("Private key is missing from service account key");if(r=r.trim(),r.includes("-----BEGIN")){if(r=r.replace(/\r\n/g,"\n").replace(/\r/g,"\n"),r.includes("BEGIN RSA PRIVATE KEY"))throw new Error("Private key is in PKCS#1 format (RSA PRIVATE KEY). Please download a new service account key from Google Cloud Console. The key should be in PKCS#8 format (PRIVATE KEY).");const e=r.match(/-----BEGIN PRIVATE KEY-----\n?([\s\S]*?)\n?-----END PRIVATE KEY-----/);if(e){const t=e[1].replace(/\s/g,"");(!t.includes("\n")||t.length>64)&&(r=`-----BEGIN PRIVATE KEY-----\n${t.match(/.{1,64}/g)?.join("\n")||t}\n-----END PRIVATE KEY-----`)}}else{const e=r.replace(/\s/g,"");r=`-----BEGIN PRIVATE KEY-----\n${e.match(/.{1,64}/g)?.join("\n")||e}\n-----END PRIVATE KEY-----`}try{const s=await y(r,"RS256"),o=await new G({scope:"https://www.googleapis.com/auth/cloud-platform"}).setProtectedHeader({alg:"RS256"}).setIssuedAt(t).setExpirationTime(t+3600).setIssuer(e.client_email).setSubject(e.client_email).setAudience("https://oauth2.googleapis.com/token").sign(s),n=await fetch("https://oauth2.googleapis.com/token",{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:new URLSearchParams({grant_type:"urn:ietf:params:oauth:grant-type:jwt-bearer",assertion:o})});if(!n.ok){const e=await n.json();throw new Error(e.error_description||"Failed to get access token")}return(await n.json()).access_token}catch(e){if(e.message&&e.message.includes("pkcs8"))throw new Error("Invalid private key format. The service account key must be in PKCS#8 format. Please ensure your service account key JSON file has a properly formatted private_key field. If you downloaded the key from Google Cloud Console, it should already be in the correct format.");throw e}}(e.serviceAccountKey)}function Y(e,t,r,s){return`projects/${e}/locations/${t}/agents/${r}/sessions/${s}`}function z(e){let t=null;for(const r of e)if(r.payload){if(r.payload.richContent){t=r.payload.richContent;break}if(r.payload.fields&&r.payload.fields.richContent){const e=r.payload.fields.richContent;e.listValue&&e.listValue.values?t=e.listValue.values.map(e=>e.listValue&&e.listValue.values?e.listValue.values.map(e=>{if(e.structValue&&e.structValue.fields){const t=e.structValue.fields;if(t.type&&t.options)return{type:t.type.stringValue||t.type,options:t.options.listValue?t.options.listValue.values.map(e=>({text:e.structValue?.fields?.text?.stringValue||"",payload:e.structValue?.fields?.payload?.stringValue||""})):[]}}return e}):e):"object"!=typeof e||e.listValue||(t=e);break}}return t}const X=function({title:e="💬 BlockSpark AI Assistant",subtitle:t="We're here to help",welcomeTitle:r="👋 Welcome to Blockspark",welcomeMessage:s="My name is BlockSpark AI Assistant and I'll guide you.",welcomeCta:o="💬 Click here to start chatting!",showWelcomePopup:i=!0,welcomePopupDelay:c=1500,fallbackWelcomeMessage:l="Hello! I'm BlockSpark AI Assistant. How can I help you today?",inputPlaceholder:d="Type your message...",emptyStateMessage:u="Hi! I'm BlockSpark AI Assistant. How can I help you today?",debug:h=!1,dfProjectId:p,dfLocation:m="us-central1",dfAgentId:y,serviceAccountKey:f,accessToken:g,languageCode:w="en"}){const[E,S]=(0,a.useState)(!1),[b,A]=(0,a.useState)(!1),[_,v]=(0,a.useState)([]),[k,P]=(0,a.useState)(""),[I,R]=(0,a.useState)(!1),[C,x]=(0,a.useState)(null),[T,D]=(0,a.useState)(!1),j=(0,a.useRef)(null),N=()=>{if(p&&y)return{dfProjectId:p,dfLocation:m||"us-central1",dfAgentId:y,serviceAccountKey:f,accessToken:g,languageCode:w||"en"}};(0,a.useEffect)(()=>{if(!i)return;const e=setTimeout(()=>{A(!0)},c);return()=>clearTimeout(e)},[i,c]),(0,a.useEffect)(()=>{j.current?.scrollIntoView({behavior:"smooth"})},[_]);const H=async()=>{if(C)return C;try{D(!0);const e=N();if(!e)throw new Error("Dialogflow configuration is missing. Please provide dfProjectId, dfAgentId, and either serviceAccountKey or accessToken.");const t=await async function(e){try{const t=await q(e),r=`session_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,s=e.dfLocation.split(" ")[0].trim(),o=`https://${s}-dialogflow.googleapis.com/v3/${Y(e.dfProjectId,s,e.dfAgentId,r)}:detectIntent`,n={queryInput:{text:{text:"hello"},languageCode:e.languageCode||"en"}},a=await fetch(o,{method:"POST",headers:{Authorization:`Bearer ${t}`,"Content-Type":"application/json"},body:JSON.stringify(n)});if(!a.ok){const e=await a.json().catch(()=>({}));throw new Error(e.error?.message||`HTTP error! status: ${a.status}`)}const i=await a.json();let c="Hello! I'm BlockSpark AI Assistant. How can I help you today?",l=null;if(i.queryResult?.responseMessages){const e=i.queryResult.responseMessages.filter(e=>e.text).map(e=>e.text.text.join(" "));e.length>0&&(c=e.join(" ")),l=z(i.queryResult.responseMessages)}else i.queryResult?.fulfillmentText&&(c=i.queryResult.fulfillmentText);return{session_id:r,message:c,...l&&{richContent:l}}}catch(e){console.error("Error creating Dialogflow session:",e);const t=e.message||"Failed to create session";if(t.includes("401")||t.includes("Unauthorized"))throw new Error("Authentication failed. Please check your service account key or access token.");if(t.includes("403")||t.includes("Forbidden"))throw new Error("Access forbidden. Please check your Dialogflow API permissions.");if(t.includes("404")||t.includes("Not Found"))throw new Error("Dialogflow agent not found. Please check your project ID, location, and agent ID.");throw new Error(t)}}(e);if(x(t.session_id),t.message){h&&(console.log("Session response richContent:",t.richContent),console.log("Full session response:",t));const e={id:`welcome-${Date.now()}`,text:t.message,sender:"bot",timestamp:new Date,richContent:t.richContent};v([e])}return t.session_id}catch(e){console.error("Error creating session:",e),h&&console.error("Full error details:",{message:e.message,stack:e.stack,config:N()});const t={id:`error-${Date.now()}`,text:h?`Error: ${e.message||"Failed to create session. Please check your Dialogflow configuration."}`:l,sender:"bot",timestamp:new Date};return v([t]),null}finally{D(!1)}},K=async(e,t,r=!1)=>{if(!e.trim())return;let s=C;if(!s)try{if(s=await H(),!s){const e={id:Date.now().toString(),text:h?"Failed to create session. Please check the console for details.":"Sorry, I'm having trouble connecting. Please try again.",sender:"bot",timestamp:new Date};return void v(t=>[...t,e])}}catch(e){console.error("Error in createSession:",e);const t={id:Date.now().toString(),text:h?`Connection Error: ${e.message||"Please check your Dialogflow configuration."}`:"Sorry, I'm having trouble connecting. Please check your configuration.",sender:"bot",timestamp:new Date};return void v(e=>[...e,t])}if(!r){const r={id:Date.now().toString(),text:t||e.trim(),sender:"user",timestamp:new Date};v(e=>[...e,r])}P(""),R(!0);try{const t=N();if(!t)throw new Error("Dialogflow configuration is missing. Please provide dfProjectId, dfAgentId, and either serviceAccountKey or accessToken.");const r=await async function(e,t,r){try{const s=await q(r),o=r.dfLocation.split(" ")[0].trim(),n=`https://${o}-dialogflow.googleapis.com/v3/${Y(r.dfProjectId,o,r.dfAgentId,t)}:detectIntent`,a={queryInput:{text:{text:e.trim()},languageCode:r.languageCode||"en"}},i=await fetch(n,{method:"POST",headers:{Authorization:`Bearer ${s}`,"Content-Type":"application/json"},body:JSON.stringify(a)});if(!i.ok){const e=await i.text();let t={};try{t=JSON.parse(e)}catch{t={message:e||`HTTP ${i.status}`}}const r=t.error?.message||t.message||`HTTP error! status: ${i.status}`;throw console.error("Dialogflow API Error (sendMessage):",{status:i.status,statusText:i.statusText,error:t,endpoint:n}),new Error(r)}const c=await i.json();let l="I'm sorry, I didn't understand that. Could you please rephrase?",d=null;if(c.queryResult?.responseMessages){const e=c.queryResult.responseMessages.filter(e=>e.text).map(e=>e.text.text.join(" "));e.length>0&&(l=e.join(" ")),d=z(c.queryResult.responseMessages)}else c.queryResult?.fulfillmentText&&(l=c.queryResult.fulfillmentText);return{response:l,session_id:t,source:"dialogflow",timestamp:(new Date).toISOString(),...d&&{richContent:d}}}catch(e){console.error("Error sending message to Dialogflow:",e);const t=e.message||"Failed to send message";if(t.includes("401")||t.includes("Unauthorized"))throw new Error("Authentication failed. Please check your service account key or access token.");if(t.includes("403")||t.includes("Forbidden"))throw new Error("Access forbidden. Please check your Dialogflow API permissions.");if(t.includes("404")||t.includes("Not Found"))throw new Error("Dialogflow agent not found. Please check your project ID, location, and agent ID.");if(t.includes("CORS"))throw new Error("CORS error. Dialogflow API may not allow browser requests. Consider using a backend proxy.");throw new Error(t)}}(e.trim(),s,t);h&&(console.log("Chat response richContent:",r.richContent),console.log("Full chat response:",r));const o={id:(Date.now()+1).toString(),text:r.response,sender:"bot",timestamp:new Date(r.timestamp||Date.now()),richContent:r.richContent};v(e=>[...e,o])}catch(e){console.error("Error sending message:",e),h&&console.error("Full error details:",{message:e.message,stack:e.stack,sessionId:s,config:N()});const t={id:(Date.now()+1).toString(),text:h?`Error: ${e.message||"Failed to send message. Please check your Dialogflow configuration."}`:e.message?.includes("Failed to fetch")||e.message?.includes("CORS")?"Unable to connect to Dialogflow. Please check your configuration and network.":"Sorry, I'm having trouble processing your message. Please try again.",sender:"bot",timestamp:new Date};v(e=>[...e,t])}finally{R(!1)}},O=async()=>{S(!0),A(!1),C||await H()};return(0,n.jsxs)(n.Fragment,{children:[b&&!E&&(0,n.jsxs)("div",{className:"custom-welcome-popup",onClick:O,children:[(0,n.jsxs)("div",{className:"custom-welcome-header",children:[(0,n.jsx)("div",{className:"custom-welcome-title",children:r}),(0,n.jsx)("button",{className:"custom-close-popup",onClick:e=>{e.stopPropagation(),A(!1)},children:"×"})]}),(0,n.jsx)("div",{className:"custom-welcome-message",children:s}),(0,n.jsx)("div",{className:"custom-welcome-cta",children:o})]}),!E&&(0,n.jsx)("button",{className:"custom-chat-toggle-btn",onClick:O,"aria-label":"Open chat",children:(0,n.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,n.jsx)("path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"})})}),E&&(0,n.jsxs)("div",{className:"custom-chat-window",children:[(0,n.jsxs)("div",{className:"custom-chat-header",children:[(0,n.jsxs)("div",{className:"custom-chat-header-content",children:[(0,n.jsx)("div",{className:"custom-chat-title",children:e}),(0,n.jsx)("div",{className:"custom-chat-subtitle",children:t})]}),(0,n.jsx)("button",{className:"custom-chat-close-btn",onClick:()=>{S(!1)},"aria-label":"Close chat",children:"×"})]}),(0,n.jsxs)("div",{className:"custom-chat-messages",children:[T&&0===_.length&&(0,n.jsxs)("div",{className:"custom-chat-empty",children:[(0,n.jsxs)("div",{className:"custom-typing-indicator",children:[(0,n.jsx)("span",{}),(0,n.jsx)("span",{}),(0,n.jsx)("span",{})]}),(0,n.jsx)("p",{children:"Initializing chat..."})]}),!T&&0===_.length&&(0,n.jsxs)("div",{className:"custom-chat-empty",children:[(0,n.jsx)("div",{className:"custom-chat-empty-icon",children:"👋"}),(0,n.jsx)("p",{children:u})]}),_.map(e=>(0,n.jsxs)("div",{className:`custom-message custom-message-${e.sender}`,children:[(0,n.jsx)("div",{className:"custom-message-content",children:e.text}),(h&&e.richContent&&(console.log("Rendering message with richContent:",e.richContent),console.log("richContent type:",typeof e.richContent),console.log("richContent is array:",Array.isArray(e.richContent)),console.log("richContent length:",e.richContent?.length)),e.richContent&&Array.isArray(e.richContent)&&e.richContent.length>0?(0,n.jsx)("div",{className:"custom-chips-container",children:e.richContent.map((e,t)=>{if(h&&console.log(`Processing contentGroup ${t}:`,e),!Array.isArray(e)){const r=e;return r&&"chips"===r.type&&r.options?(0,n.jsx)("div",{className:"custom-chips-group",children:r.options.map((e,t)=>(0,n.jsx)("button",{className:"custom-chip-button",onClick:()=>{const t={id:Date.now().toString(),text:e.text,sender:"user",timestamp:new Date};v(e=>[...e,t]),K(e.text,e.text,!0)},type:"button",children:e.text},t))},t):null}return e.map((e,r)=>(h&&console.log(`Processing content ${t}-${r}:`,e),e&&"chips"===e.type&&e.options?(0,n.jsx)("div",{className:"custom-chips-group",children:e.options.map((e,t)=>(0,n.jsx)("button",{className:"custom-chip-button",onClick:()=>{const t={id:Date.now().toString(),text:e.text,sender:"user",timestamp:new Date};v(e=>[...e,t]),K(e.text,e.text,!0)},type:"button",children:e.text},t))},`${t}-${r}`):null))})}):null),(0,n.jsx)("div",{className:"custom-message-time",children:e.timestamp.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})})]},e.id)),I&&(0,n.jsx)("div",{className:"custom-message custom-message-bot",children:(0,n.jsxs)("div",{className:"custom-typing-indicator",children:[(0,n.jsx)("span",{}),(0,n.jsx)("span",{}),(0,n.jsx)("span",{})]})}),(0,n.jsx)("div",{ref:j})]}),(0,n.jsxs)("form",{className:"custom-chat-input-form",onSubmit:e=>{e.preventDefault(),K(k)},children:[(0,n.jsx)("input",{type:"text",className:"custom-chat-input",value:k,onChange:e=>P(e.target.value),placeholder:d,disabled:I||T}),(0,n.jsx)("button",{type:"submit",className:"custom-chat-send-btn",disabled:!k.trim()||I||T,children:(0,n.jsxs)("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,n.jsx)("line",{x1:"22",y1:"2",x2:"11",y2:"13"}),(0,n.jsx)("polygon",{points:"22 2 15 22 11 13 2 9 22 2"})]})})]})]})]})};return o.default})());

package/dist/index.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/dist/services/dialogflowClient.d.ts

@@ -0,0 +1,35 @@
+export interface DialogflowConfig {
+    dfProjectId: string;
+    dfLocation: string;
+    dfAgentId: string;
+    serviceAccountKey?: any;
+    accessToken?: string;
+    languageCode?: string;
+}
+export interface SessionResponse {
+    session_id: string;
+    message: string;
+    richContent?: any;
+}
+export interface ChatResponse {
+    response: string;
+    session_id: string;
+    source: string;
+    timestamp: string;
+    richContent?: any;
+}
+/**
+ * Create a new Dialogflow session
+ * @param config - Dialogflow configuration
+ * @returns Promise with session ID and welcome message
+ */
+export declare function createDialogflowSession(config: DialogflowConfig): Promise<SessionResponse>;
+/**
+ * Send a message to Dialogflow
+ * @param message - The user's message
+ * @param sessionId - The session ID
+ * @param config - Dialogflow configuration
+ * @returns Promise with bot response
+ */
+export declare function sendDialogflowMessage(message: string, sessionId: string, config: DialogflowConfig): Promise<ChatResponse>;
+//# sourceMappingURL=dialogflowClient.d.ts.map

package/dist/services/dialogflowClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogflowClient.d.ts","sourceRoot":"","sources":["../../src/services/dialogflowClient.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,GAAG,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,GAAG,CAAC;CACnB;AAiKD;;;;GAIG;AACH,wBAAsB,uBAAuB,CAAC,MAAM,EAAE,gBAAgB,GAAG,OAAO,CAAC,eAAe,CAAC,CA0EhG;AAED;;;;;;GAMG;AACH,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,gBAAgB,GACvB,OAAO,CAAC,YAAY,CAAC,CAyFvB"}

package/dist/styles.css

@@ -0,0 +1,461 @@
+/* ========================================
+   Custom Chat Widget Styles
+   ======================================== */
+
+/* Welcome Popup */
+.custom-welcome-popup {
+    position: fixed;
+    bottom: 20px;
+    right: 90px;
+    background: linear-gradient(135deg, #2d7a4f 0%, #1f5937 100%);
+    color: white;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    max-width: 350px;
+    z-index: 99998;
+    animation: customSlideIn 0.4s ease-out;
+    cursor: pointer;
+    transition: transform 0.2s;
+  }
+  
+  .custom-welcome-popup:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
+  }
+  
+  @keyframes customSlideIn {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  
+  .custom-welcome-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+  
+  .custom-welcome-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+  
+  .custom-close-popup {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+  }
+  
+  .custom-close-popup:hover {
+    opacity: 1;
+  }
+  
+  .custom-welcome-message {
+    font-size: 14px;
+    line-height: 1.5;
+    margin-bottom: 10px;
+  }
+  
+  .custom-welcome-cta {
+    font-size: 13px;
+    opacity: 0.9;
+    font-style: italic;
+  }
+  
+  /* Chat Toggle Button */
+  .custom-chat-toggle-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #2d7a4f 0%, #1f5937 100%);
+    color: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 99999;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  
+  .custom-chat-toggle-btn:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  }
+  
+  .custom-chat-toggle-btn:active {
+    transform: scale(0.95);
+  }
+  
+  /* Chat Window */
+  .custom-chat-window {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 380px;
+    height: 600px;
+    max-height: calc(100vh - 40px);
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    z-index: 99999;
+    animation: customChatSlideUp 0.3s ease-out;
+    overflow: hidden;
+  }
+  
+  @keyframes customChatSlideUp {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  
+  /* Chat Header */
+  .custom-chat-header {
+    background: linear-gradient(135deg, #2d7a4f 0%, #1f5937 100%);
+    color: white;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-shrink: 0;
+  }
+  
+  .custom-chat-header-content {
+    flex: 1;
+  }
+  
+  .custom-chat-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+  
+  .custom-chat-subtitle {
+    font-size: 12px;
+    opacity: 0.9;
+  }
+  
+  .custom-chat-close-btn {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 28px;
+    cursor: pointer;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+    line-height: 1;
+    border-radius: 50%;
+  }
+  
+  .custom-chat-close-btn:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.1);
+  }
+  
+  /* Chat Messages Area */
+  .custom-chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    background: #f8f9fa;
+  }
+  
+  .custom-chat-messages::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  .custom-chat-messages::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .custom-chat-messages::-webkit-scrollbar-thumb {
+    background: #ddd;
+    border-radius: 3px;
+  }
+  
+  .custom-chat-messages::-webkit-scrollbar-thumb:hover {
+    background: #bbb;
+  }
+  
+  .custom-chat-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    color: #666;
+  }
+  
+  .custom-chat-empty-icon {
+    font-size: 48px;
+    margin-bottom: 12px;
+  }
+  
+  .custom-chat-empty p {
+    font-size: 16px;
+    line-height: 1.5;
+  }
+  
+  /* Messages */
+  .custom-message {
+    display: flex;
+    flex-direction: column;
+    max-width: 75%;
+    animation: customMessageFadeIn 0.3s ease-out;
+  }
+  
+  @keyframes customMessageFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  .custom-message-user {
+    align-self: flex-end;
+  }
+  
+  .custom-message-bot {
+    align-self: flex-start;
+  }
+  
+  .custom-message-content {
+    padding: 12px 16px;
+    border-radius: 16px;
+    word-wrap: break-word;
+    line-height: 1.5;
+    font-size: 14px;
+  }
+  
+  .custom-message-user .custom-message-content {
+    background: linear-gradient(135deg, #2d7a4f 0%, #1f5937 100%);
+    color: white;
+    border-bottom-right-radius: 4px;
+  }
+  
+  .custom-message-bot .custom-message-content {
+    background: white;
+    color: #333;
+    border-bottom-left-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  .custom-message-time {
+    font-size: 10px;
+    color: #999;
+    margin-top: 4px;
+    padding: 0 4px;
+  }
+  
+  /* Chip Buttons */
+  .custom-chips-container {
+    margin-top: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .custom-chips-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  
+  .custom-chip-button {
+    background: white;
+    border: 1.5px solid #2d7a4f;
+    color: #2d7a4f;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+  
+  .custom-chip-button:hover {
+    background: linear-gradient(135deg, #2d7a4f 0%, #1f5937 100%);
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(45, 122, 79, 0.3);
+  }
+  
+  .custom-chip-button:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+  
+  /* Typing Indicator */
+  .custom-typing-indicator {
+    display: flex;
+    gap: 4px;
+    padding: 12px 16px;
+    background: white;
+    border-radius: 16px;
+    border-bottom-left-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    width: fit-content;
+  }
+  
+  .custom-typing-indicator span {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #999;
+    animation: customTypingBounce 1.4s infinite ease-in-out;
+  }
+  
+  .custom-typing-indicator span:nth-child(1) {
+    animation-delay: -0.32s;
+  }
+  
+  .custom-typing-indicator span:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+  
+  @keyframes customTypingBounce {
+    0%,
+    80%,
+    100% {
+      transform: scale(0.8);
+      opacity: 0.5;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  
+  /* Chat Input Form */
+  .custom-chat-input-form {
+    display: flex;
+    padding: 16px;
+    background: white;
+    border-top: 1px solid #e0e0e0;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+  
+  .custom-chat-input {
+    flex: 1;
+    padding: 12px 16px;
+    border: 1px solid #e0e0e0;
+    border-radius: 24px;
+    outline: none;
+    font-size: 14px;
+    transition: border-color 0.2s;
+    font-family: inherit;
+  }
+  
+  .custom-chat-input:focus {
+    border-color: #2d7a4f;
+  }
+  
+  .custom-chat-input:disabled {
+    background: #f5f5f5;
+    cursor: not-allowed;
+  }
+  
+  .custom-chat-send-btn {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #2d7a4f 0%, #1f5937 100%);
+    color: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s, opacity 0.2s;
+    flex-shrink: 0;
+  }
+  
+  .custom-chat-send-btn:hover:not(:disabled) {
+    transform: scale(1.05);
+  }
+  
+  .custom-chat-send-btn:active:not(:disabled) {
+    transform: scale(0.95);
+  }
+  
+  .custom-chat-send-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  /* Responsive Design */
+  @media (max-width: 480px) {
+    .custom-welcome-popup {
+      right: 10px;
+      left: 10px;
+      bottom: 90px;
+      max-width: none;
+    }
+  
+    .custom-chat-window {
+      width: calc(100vw - 20px);
+      height: calc(100vh - 20px);
+      bottom: 10px;
+      right: 10px;
+      border-radius: 12px;
+    }
+  
+    .custom-chat-toggle-btn {
+      bottom: 10px;
+      right: 10px;
+      width: 56px;
+      height: 56px;
+    }
+  
+    .custom-message {
+      max-width: 85%;
+    }
+  }

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type { DialogflowConfig, SessionResponse, ChatResponse, } from './services/dialogflowClient';
+export type { ChatWidgetProps } from './components/ChatWidget';
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AACA,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,YAAY,GACb,MAAM,6BAA6B,CAAC;AAGrC,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "@blockspark/chat-widget",
+    "version": "1.0.0",
+    "description": "BlockSpark AI Chat Widget - A reusable React chat component",
+    "main": "dist/index.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "files": [
+      "dist",
+      "README.md"
+    ],
+    "scripts": {
+      "build": "webpack --mode production",
+      "dev": "webpack --mode development --watch",
+      "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+      "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+      "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    },
+    "dependencies": {
+      "jose": "^5.0.0"
+    },
+    "devDependencies": {
+      "@types/react": "^18.3.5",
+      "@types/react-dom": "^18.3.0",
+      "typescript": "^5.6.2",
+      "webpack": "^5.94.0",
+      "webpack-cli": "^5.1.4",
+      "ts-loader": "^9.5.1",
+      "css-loader": "^7.1.2",
+      "style-loader": "^4.0.0",
+      "mini-css-extract-plugin": "^2.9.0"
+    },
+  "keywords": [
+    "chat",
+    "widget",
+    "react",
+    "dialogflow",
+    "ai",
+    "chatbot"
+  ],
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}