@asgard-js/react 0.0.23 → 0.0.26

package/README.md

@@ -48,13 +48,9 @@ const App = () => {
         title="Asgard AI Chatbot"
         config={{
           apiKey: 'your-api-key',
-          endpoint:
-            'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}/message/sse',
           botProviderEndpoint:
             'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}',
-          onExecutionError: (error) => {
-            console.error('Execution error:', error);
-          },
+          debugMode: true, // Enable to see deprecation warnings
           transformSsePayload: (payload) => {
             return payload;
           },
@@ -92,22 +88,57 @@ const App = () => {
 export default App;
 ```
 
+## Migration from `endpoint` to `botProviderEndpoint`
+
+**Important**: The `endpoint` configuration option is deprecated. Use `botProviderEndpoint` instead for simplified configuration.
+
+### Before (Deprecated)
+```javascript
+config: {
+  apiKey: 'your-api-key',
+  endpoint: 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}/message/sse',
+  botProviderEndpoint: 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}',
+}
+```
+
+### After (Recommended)
+```javascript
+config: {
+  apiKey: 'your-api-key', 
+  botProviderEndpoint: 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}',
+  // SSE endpoint is automatically derived as: botProviderEndpoint + '/message/sse'
+}
+```
+
+**Benefits:**
+- Simplified configuration with single endpoint
+- Reduced chance of configuration errors
+- Automatic endpoint derivation
+
+**Backward Compatibility:** Existing code using `endpoint` will continue to work but may show deprecation warnings when `debugMode` is enabled.
+
 ### Chatbot Component Props
 
 - **title**: `string` - The title of the chatbot.
 - **config**: `ClientConfig` - Configuration object for the Asgard service client, including:
   - `apiKey`: `string` (required) - API key for authentication
-  - `endpoint`: `string` (required) - API endpoint URL
-  - `botProviderEndpoint?`: `string` - Bot provider endpoint URL
-  - `onExecutionError?`: `(error: ErrorEventData) => void` - Error handler for execution errors
+  - `botProviderEndpoint`: `string` (required) - Bot provider endpoint URL (SSE endpoint will be auto-derived)
+  - `endpoint?`: `string` (deprecated) - Legacy API endpoint URL. Use `botProviderEndpoint` instead.
   - `transformSsePayload?`: `(payload: FetchSsePayload) => FetchSsePayload` - SSE payload transformer
+  - `debugMode?`: `boolean` - Enable debug mode, defaults to `false`
+  - `onRunInit?`: `InitEventHandler` - Handler for run initialization events
+  - `onMessage?`: `MessageEventHandler` - Handler for message events
+  - `onToolCall?`: `ToolCallEventHandler` - Handler for tool call events
+  - `onProcess?`: `ProcessEventHandler` - Handler for process events
+  - `onRunDone?`: `DoneEventHandler` - Handler for run completion events
+  - `onRunError?`: `ErrorEventHandler` - Error handler for execution errors
+- **customActions?**: `ReactNode[]` - Custom actions to display on the chatbot header
 - **enableLoadConfigFromService?**: `boolean` - Enable loading configuration from service
 - **maintainConnectionWhenClosed?**: `boolean` - Maintain connection when chat is closed, defaults to `false`
 - **loadingComponent?**: `ReactNode` - Custom loading component
 - **asyncInitializers?**: `Record<string, () => Promise<unknown>>` - Asynchronous initializers for app initialization before rendering any component. Good for loading data or other async operations as the initial state. It only works when `enableLoadConfigFromService` is set to `true`.
 - **customChannelId**: `string` - Custom channel identifier for the chat session
 - **initMessages**: `ConversationMessage[]` - Initial messages to display in the chat
-- **debugMode**: `boolean` - Enable debug mode, defaults to `false`
 - **fullScreen**: `boolean` - Display chatbot in full screen mode, defaults to `false`
 - **avatar**: `string` - URL for the chatbot's avatar image
 - **botTypingPlaceholder**: `string` - Text to display while the bot is typing
@@ -142,12 +173,22 @@ export interface AsgardThemeContextValue {
     | 'borderRadius'
   > & {
     contentMaxWidth?: CSSProperties['maxWidth'];
+    backgroundColor?: CSSProperties['backgroundColor'];
+    borderColor?: CSSProperties['borderColor'];
+    inactiveColor?: CSSProperties['color'];
+    primaryComponent?: {
+      mainColor?: CSSProperties['color'];
+      secondaryColor?: CSSProperties['color'];
+    };
     style?: CSSProperties;
     header?: Partial<{
       style: CSSProperties;
       title: {
         style: CSSProperties;
       };
+      actionButton?: {
+        style: CSSProperties;
+      };
     }>;
     body?: Partial<{
       style: CSSProperties;
@@ -156,6 +197,7 @@ export interface AsgardThemeContextValue {
       style: CSSProperties;
       textArea: {
         style: CSSProperties;
+        '::placeholder': CSSProperties;
       };
       submitButton: {
         style: CSSProperties;
@@ -178,12 +220,28 @@ export interface AsgardThemeContextValue {
         style: CSSProperties;
       };
     }>;
+    time?: Partial<{
+      style: CSSProperties;
+    }>;
     TextMessageTemplate: Partial<{ style: CSSProperties }>;
     HintMessageTemplate: Partial<{ style: CSSProperties }>;
     ImageMessageTemplate: Partial<{ style: CSSProperties }>;
     ChartMessageTemplate: Partial<{ style: CSSProperties }>;
-    ButtonMessageTemplate: Partial<{ style: CSSProperties }>;
-    CarouselMessageTemplate: Partial<{ style: CSSProperties }>;
+    ButtonMessageTemplate: Partial<{ 
+      style: CSSProperties;
+      button?: {
+        style: CSSProperties;
+      };
+    }>;
+    CarouselMessageTemplate: Partial<{ 
+      style: CSSProperties;
+      card: {
+        style: CSSProperties;
+        button?: {
+          style: CSSProperties;
+        };
+      };
+    }>;
 
     // Didn't implement yet
     VideoMessageTemplate: Partial<{ style: CSSProperties }>;
@@ -212,6 +270,9 @@ const defaultTheme = {
       title: {
         style: {},
       },
+      actionButton: {
+        style: {},
+      },
     },
     body: {
       style: {},
@@ -220,6 +281,9 @@ const defaultTheme = {
       style: {},
       textArea: {
         style: {},
+        '::placeholder': {
+          color: 'var(--asg-color-text-placeholder)',
+        },
       },
       submitButton: {
         style: {},
@@ -244,6 +308,9 @@ const defaultTheme = {
         style: {},
       },
     },
+    time: {
+      style: {},
+    },
     TextMessageTemplate: {
       style: {},
     },
@@ -267,9 +334,22 @@ const defaultTheme = {
     },
     ButtonMessageTemplate: {
       style: {},
+      button: {
+        style: {
+          border: '1px solid var(--asg-color-border)',
+        },
+      },
     },
     CarouselMessageTemplate: {
       style: {},
+      card: {
+        style: {},
+        button: {
+          style: {
+            border: '1px solid var(--asg-color-border)',
+          },
+        },
+      },
     },
   },
 };
@@ -306,6 +386,79 @@ const App = () => {
 
 Note: When `fullScreen` prop is set to `true`, the chatbot's width and height will be set to `100vw` and `100vh` respectively, and `borderRadius` will be set to zero, regardless of theme settings.
 
+## Testing
+
+The React package includes comprehensive tests using Vitest and React Testing Library.
+
+### Running Tests
+
+```sh
+# Run tests once
+npm test
+# or
+yarn test:react
+
+# Run tests in watch mode
+npm run test:watch
+# or 
+yarn test:react:watch
+
+# Run tests with UI
+npm run test:ui
+# or
+yarn test:react:ui
+
+# Run tests with coverage
+npm run test:coverage
+# or
+yarn test:react:coverage
+```
+
+### Test Structure
+
+Tests are located alongside source files with `.spec.tsx` extensions:
+- `src/components/chatbot/chatbot.spec.tsx` - React component tests
+- Test environment: jsdom with React Testing Library
+- Setup file: `src/test-setup.ts` (includes jest-dom)
+- Coverage reports available in `test-output/vitest/coverage/`
+
+### Writing Tests
+
+The package uses Vitest for testing with the following setup:
+- TypeScript support
+- jsdom environment for DOM APIs
+- React Testing Library for component testing
+- jest-dom matchers for enhanced assertions
+- ESLint integration
+- Coverage reporting with v8 provider
+
+Example test structure:
+```javascript
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Chatbot } from './chatbot';
+
+describe('Chatbot Component', () => {
+  it('should render without crashing', () => {
+    const config = {
+      botProviderEndpoint: 'https://api.example.com/bot-provider/bp-123',
+      apiKey: 'test-key',
+    };
+
+    const { container } = render(
+      <Chatbot
+        title="Test Chatbot"
+        config={config}
+        customChannelId="test-channel"
+      />
+    );
+
+    expect(container).toBeInTheDocument();
+  });
+});
+```
+
 ## Development
 
 To develop the React package locally, follow these steps:
@@ -339,6 +492,14 @@ yarn watch:react
 yarn serve:react-demo
 ```
 
+Setup your npm release token:
+
+```sh
+cd ~/
+touch .npmrc
+echo "//registry.npmjs.org/:_authToken={{YOUR_TOKEN}}" >> .npmrc
+```
+
 For working with both core and React packages:
 
 ```sh
@@ -347,6 +508,7 @@ yarn lint:packages
 
 # Build core package (required for React package)
 yarn build:core
+yarn build:react
 
 # Release packages
 yarn release:core  # Release core package

package/dist/components/chatbot/chatbot-footer/chatbot-footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chatbot-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-footer/chatbot-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAKV,MAAM,OAAO,CAAC;AAQf,wBAAgB,aAAa,IAAI,SAAS,CAgHzC"}
+{"version":3,"file":"chatbot-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-footer/chatbot-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAMV,MAAM,OAAO,CAAC;AAQf,wBAAgB,aAAa,IAAI,SAAS,CA0HzC"}

package/dist/components/chatbot/chatbot-header/chatbot-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chatbot-header.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-header/chatbot-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAS3E,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAqElE"}
+{"version":3,"file":"chatbot-header.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-header/chatbot-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAS3E,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAwElE"}

package/dist/components/templates/button-template/button-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/button-template/button-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,UAAU,mBAAmB;IAC3B,OAAO,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CAyBpE"}
+{"version":3,"file":"button-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/button-template/button-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,UAAU,mBAAmB;IAC3B,OAAO,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CAgCpE"}

package/dist/components/templates/button-template/card.d.ts

@@ -1,8 +1,14 @@
 import { ButtonMessageTemplate, CarouselMessageTemplate } from '@asgard-js/core';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
 interface CardProps {
     template: ButtonMessageTemplate | CarouselMessageTemplate['columns'][number];
+    customStyle?: {
+        style?: CSSProperties;
+        button?: {
+            style?: CSSProperties;
+        };
+    };
 }
 export declare function Card(props: CardProps): ReactNode;
 export {};

package/dist/components/templates/button-template/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/button-template/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAE3E,OAAO,EAEL,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAKzB,UAAU,SAAS;IACjB,QAAQ,EAAE,qBAAqB,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9E;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,CAoFhD"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/button-template/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAGT,aAAa,EACd,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAKzB,UAAU,SAAS;IACjB,QAAQ,EAAE,qBAAqB,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7E,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,aAAa,CAAC;QACtB,MAAM,CAAC,EAAE;YACP,KAAK,CAAC,EAAE,aAAa,CAAC;SACvB,CAAC;KACH,CAAC;CACH;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,CA2FhD"}

package/dist/components/templates/carousel-template/carousel-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/carousel-template/carousel-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,OAAO,EAEL,sBAAsB,EACvB,MAAM,iBAAiB,CAAC;AAKzB,UAAU,qBAAqB;IAC7B,OAAO,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CA0BxE"}
+{"version":3,"file":"carousel-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/carousel-template/carousel-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,OAAO,EAEL,sBAAsB,EACvB,MAAM,iBAAiB,CAAC;AAKzB,UAAU,qBAAqB;IAC7B,OAAO,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CA8BxE"}

package/dist/components/templates/chart-template/chart-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/chart-template/chart-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAIrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AASzD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAmDlE"}
+{"version":3,"file":"chart-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/chart-template/chart-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AASzD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CA2DlE"}

package/dist/components/templates/time/time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/time/time.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,CAUhD"}
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/time/time.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAM3C,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,CAsBhD"}

package/dist/context/asgard-app-initialization-context.d.ts

@@ -6,11 +6,32 @@ type AsyncInitializers = {
 };
 export interface Annotations {
     embedConfig: {
+        avatar?: string;
+        botTypingPlaceholder?: string;
+        debugMode?: boolean;
+        fullScreen?: boolean;
+        inputPlaceholder?: string;
         theme: {
-            chatbot: Record<string, unknown>;
-            botMessage: Record<string, unknown>;
-            userMessage: Record<string, unknown>;
+            chatbot: {
+                backgroundColor?: string;
+                borderColor?: string;
+                inactiveColor?: string;
+                primaryComponent?: {
+                    mainColor?: string;
+                    secondaryColor?: string;
+                };
+            };
+            botMessage: {
+                backgroundColor?: string;
+                carouselButtonBackgroundColor?: string;
+                color?: string;
+            };
+            userMessage: {
+                backgroundColor?: string;
+                color?: string;
+            };
         };
+        title?: string;
     };
 }
 export interface AsgardAppInitializationContextValue {

package/dist/context/asgard-app-initialization-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"asgard-app-initialization-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-app-initialization-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,iBAAiB,EACjB,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAM/C,KAAK,iBAAiB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE;QACX,KAAK,EAAE;YACL,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACjC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACpC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;SACtC,CAAC;KACH,CAAC;CACH;AAED,MAAM,WAAW,mCAAmC;IAClD,IAAI,EAAE;QACJ,WAAW,CAAC,EAAE,WAAW,CAAC;KAC3B,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,8BAA8B,oDAKvC,CAAC;AAEL,MAAM,WAAW,2CAA2C;IAC1D,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,YAAY,CAAC;IACrB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED,eAAO,MAAM,sCAAsC,UAC1C,iBAAiB,CAAC,2CAA2C,CAAC,KACpE,SA4EF,CAAC;AAEF,eAAO,MAAM,iCAAiC,QACxC,mCACwC,CAAC"}
+{"version":3,"file":"asgard-app-initialization-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-app-initialization-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,iBAAiB,EACjB,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAM/C,KAAK,iBAAiB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,eAAe,CAAC,EAAE,MAAM,CAAC;gBACzB,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,aAAa,CAAC,EAAE,MAAM,CAAC;gBACvB,gBAAgB,CAAC,EAAE;oBACjB,SAAS,CAAC,EAAE,MAAM,CAAC;oBACnB,cAAc,CAAC,EAAE,MAAM,CAAC;iBACzB,CAAC;aACH,CAAC;YACF,UAAU,EAAE;gBACV,eAAe,CAAC,EAAE,MAAM,CAAC;gBACzB,6BAA6B,CAAC,EAAE,MAAM,CAAC;gBACvC,KAAK,CAAC,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,WAAW,EAAE;gBACX,eAAe,CAAC,EAAE,MAAM,CAAC;gBACzB,KAAK,CAAC,EAAE,MAAM,CAAC;aAChB,CAAC;SACH,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,MAAM,WAAW,mCAAmC;IAClD,IAAI,EAAE;QACJ,WAAW,CAAC,EAAE,WAAW,CAAC;KAC3B,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,8BAA8B,oDAKvC,CAAC;AAEL,MAAM,WAAW,2CAA2C;IAC1D,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,YAAY,CAAC;IACrB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED,eAAO,MAAM,sCAAsC,UAC1C,iBAAiB,CAAC,2CAA2C,CAAC,KACpE,SA4EF,CAAC;AAEF,eAAO,MAAM,iCAAiC,QACxC,mCACwC,CAAC"}

package/dist/context/asgard-theme-context.d.ts

@@ -3,12 +3,22 @@ import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 export interface AsgardThemeContextValue {
     chatbot: Pick<CSSProperties, 'width' | 'height' | 'maxWidth' | 'minWidth' | 'maxHeight' | 'minHeight' | 'backgroundColor' | 'borderColor' | 'borderRadius'> & {
         contentMaxWidth?: CSSProperties['maxWidth'];
+        backgroundColor?: CSSProperties['backgroundColor'];
+        borderColor?: CSSProperties['borderColor'];
+        inactiveColor?: CSSProperties['color'];
+        primaryComponent?: {
+            mainColor?: CSSProperties['color'];
+            secondaryColor?: CSSProperties['color'];
+        };
         style?: CSSProperties;
         header?: Partial<{
             style: CSSProperties;
             title: {
                 style: CSSProperties;
             };
+            actionButton?: {
+                style: CSSProperties;
+            };
         }>;
         body?: Partial<{
             style: CSSProperties;
@@ -17,6 +27,7 @@ export interface AsgardThemeContextValue {
             style: CSSProperties;
             textArea: {
                 style: CSSProperties;
+                '::placeholder': CSSProperties;
             };
             submitButton: {
                 style: CSSProperties;
@@ -39,6 +50,9 @@ export interface AsgardThemeContextValue {
                 style: CSSProperties;
             };
         }>;
+        time?: Partial<{
+            style: CSSProperties;
+        }>;
         /**
          * TBD: Fill the necessary properties based on the requirements.
          */
@@ -86,12 +100,21 @@ export interface AsgardThemeContextValue {
          */
         ButtonMessageTemplate: Partial<{
             style: CSSProperties;
+            button?: {
+                style: CSSProperties;
+            };
         }>;
         /**
          * TBD: Fill the necessary properties based on the requirements.
          */
         CarouselMessageTemplate: Partial<{
             style: CSSProperties;
+            card: {
+                style: CSSProperties;
+                button?: {
+                    style: CSSProperties;
+                };
+            };
         }>;
     }>;
 }

package/dist/context/asgard-theme-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"asgard-theme-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-theme-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,aAAa,EACb,iBAAiB,EACjB,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,IAAI,CACX,aAAa,EACX,OAAO,GACP,QAAQ,GACR,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,iBAAiB,GACjB,aAAa,GACb,cAAc,CACjB,GAAG;QACF,eAAe,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAC5C,KAAK,CAAC,EAAE,aAAa,CAAC;QACtB,MAAM,CAAC,EAAE,OAAO,CAAC;YACf,KAAK,EAAE,aAAa,CAAC;YACrB,KAAK,EAAE;gBACL,KAAK,EAAE,aAAa,CAAC;aACtB,CAAC;SACH,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,OAAO,CAAC;YACb,KAAK,EAAE,aAAa,CAAC;SACtB,CAAC,CAAC;QACH,MAAM,CAAC,EAAE,OAAO,CAAC;YACf,KAAK,EAAE,aAAa,CAAC;YACrB,QAAQ,EAAE;gBACR,KAAK,EAAE,aAAa,CAAC;aACtB,CAAC;YACF,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC;aACtB,CAAC;YACF,iBAAiB,EAAE;gBACjB,KAAK,EAAE,aAAa,CAAC;aACtB,CAAC;SACH,CAAC,CAAC;KACJ,CAAC;IACF,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,iBAAiB,CAAC,CAAC;IAC7D,WAAW,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,iBAAiB,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;QACjB;;;WAGG;QACH,YAAY,CAAC,EAAE,OAAO,CAAC;YACrB,KAAK,EAAE,aAAa,CAAC;YACrB,MAAM,EAAE;gBACN,KAAK,EAAE,aAAa,CAAC;aACtB,CAAC;SACH,CAAC,CAAC;QACH;;WAEG;QACH,mBAAmB,EAAE,OAAO,CAAC;YAAE,KAAK,EAAE,aAAa,CAAA;SAAE,CAAC,CAAC;QACvD;;WAEG;QACH,mBAAmB,EAAE,OAAO,CAAC;YAAE,KAAK,EAAE,aAAa,CAAA;SAAE,CAAC,CAAC;QACvD;;WAEG;QACH,oBAAoB,EAAE,OAAO,CAAC;YAAE,KAAK,EAAE,aAAa,CAAA;SAAE,CAAC,CAAC;QACxD;;WAEG;QACH,oBAAoB,EAAE,OAAO,CAAC;YAAE,KAAK,EAAE,aAAa,CAAA;SAAE,CAAC,CAAC;QACxD;;WAEG;QACH,oBAAoB,EAAE,OAAO,CAAC;YAAE,KAAK,EAAE,aAAa,CAAA;SAAE,CAAC,CAAC;QACxD;;WAEG;QACH,uBAAuB,EAAE,OAAO,CAAC;YAAE,KAAK,EAAE,aAAa,CAAA;SAAE,CAAC,CAAC;QAC3D;;WAEG;QACH,oBAAoB,EAAE,OAAO,CAAC;YAAE,KAAK,EAAE,aAAa,CAAA;SAAE,CAAC,CAAC;QACxD;;WAEG;QACH,qBAAqB,EAAE,OAAO,CAAC;YAAE,KAAK,EAAE,aAAa,CAAA;SAAE,CAAC,CAAC;QACzD;;WAEG;QACH,uBAAuB,EAAE,OAAO,CAAC;YAAE,KAAK,EAAE,aAAa,CAAA;SAAE,CAAC,CAAC;KAC5D,CAAC,CAAC;CACJ;AAED,eAAO,MAAM,8BAA8B,EAAE,uBA0E5C,CAAC;AAEF,eAAO,MAAM,kBAAkB,kDAE9B,CAAC;AAEF,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,iBAAiB,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;CAC1C,CAAC,GACD,SAAS,CAiCX;AAED,wBAAgB,qBAAqB,IAAI,uBAAuB,CAE/D"}
+{"version":3,"file":"asgard-theme-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-theme-context.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/use-asgard-service-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-asgard-service-client.d.ts","sourceRoot":"","sources":["../../src/hooks/use-asgard-service-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAa,MAAM,iBAAiB,CAAC;AAG/E,UAAU,2BAA2B;IACnC,MAAM,EAAE,YAAY,CAAC;CACtB;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,2BAA2B,GACjC,mBAAmB,GAAG,IAAI,CAmD5B"}
+{"version":3,"file":"use-asgard-service-client.d.ts","sourceRoot":"","sources":["../../src/hooks/use-asgard-service-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAa,MAAM,iBAAiB,CAAC;AAG/E,UAAU,2BAA2B;IACnC,MAAM,EAAE,YAAY,CAAC;CACtB;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,2BAA2B,GACjC,mBAAmB,GAAG,IAAI,CA0D5B"}