@asgard-js/react 0.2.6 → 0.2.7-canary.1

package/README.md

@@ -312,6 +312,7 @@ config: {
 - **onTemplateBtnClick?**: `(payload: Record<string, unknown>, eventName: string, raw: string) => void` - Callback for EMIT button actions. See [EMIT Action](#emit-action) section for details.
 - **messageActions?**: `(message: ConversationBotMessage) => MessageActionConfig[]` - Function to define which action buttons to display for each bot message. Returns an array of `{ id: string, label: string }` objects. See [Message Actions](#message-actions) section for details.
 - **onMessageAction?**: `(actionId: string, message: ConversationBotMessage) => void` - Callback when a message action button is clicked. Receives the action ID and the associated bot message.
+- **renderMessageContent?**: `(props: MessageContentRendererProps) => ReactNode` - Custom renderer for message content. Allows customizing how messages are rendered based on message properties. See [Custom Message Renderer](#custom-message-renderer) section for details.
 - **onSseMessage**: `(response: SseResponse, ctx: AsgardServiceContextValue) => void` - Callback function when SSE message is received. It would be helpful if using with the ref to provide some context and conversation data and do some proactively actions like sending messages to the bot.
 - **ref**: `ForwardedRef<ChatbotRef>` - Forwarded ref to access the chatbot instance. It can be used to access the chatbot instance and do some actions like sending messages to the bot. ChatbotRef extends the ref of the chatbot instance and provides some additional methods like `serviceContext.sendMessage` to interact with the chatbot instance.
 
@@ -825,6 +826,141 @@ messageActions={(message) => {
 }}
 ```
 
+<a id="custom-message-renderer"></a>
+<br/>
+
+### Custom Message Renderer
+
+The `renderMessageContent` prop allows you to customize how messages are rendered based on message type, payload, or other conditions. This is useful for implementing custom message cards, special UI treatments, or integrating with your application's design system.
+
+#### MessageContentRendererProps Interface
+
+```typescript
+interface MessageContentRendererProps {
+  /** The original message object */
+  message: ConversationMessage;
+  /** Function to render the default message content */
+  renderDefaultContent: () => ReactNode;
+  /** Container component that wraps custom content with Avatar for bot messages */
+  MessageContainer: React.FC<{ children: ReactNode }>;
+}
+```
+
+#### Basic Usage
+
+```typescript
+import { Chatbot, MessageContentRendererProps } from '@asgard-js/react';
+
+<Chatbot
+  config={config}
+  customChannelId="your-channel-id"
+  renderMessageContent={props => {
+    const { message, renderDefaultContent, MessageContainer } = props;
+
+    // Customize bot messages with specific payload types
+    if (message.type === 'bot') {
+      const payload = message.message.payload as { customType?: string };
+
+      if (payload?.customType === 'order_card') {
+        // Use MessageContainer to wrap custom content with Avatar
+        return (
+          <MessageContainer>
+            <OrderCard order={payload} />
+          </MessageContainer>
+        );
+      }
+    }
+
+    // Use default rendering for all other messages
+    return renderDefaultContent();
+  }}
+/>;
+```
+
+#### Using MessageContainer
+
+The `MessageContainer` component is essential for maintaining consistent styling with the default messages:
+
+- **For bot messages**: Wraps your content with the bot's Avatar and proper message styling (including timestamp and quick replies)
+- **For user messages**: Applies proper right-aligned styling
+- **For other message types**: Returns children directly
+
+**With MessageContainer** (recommended for custom bot messages):
+
+```typescript
+renderMessageContent={(props) => {
+  const { message, MessageContainer } = props;
+
+  if (message.type === 'bot' && isCustomMessage(message)) {
+    return (
+      <MessageContainer>
+        <MyCustomComponent data={message.message.payload} />
+      </MessageContainer>
+    );
+  }
+
+  return props.renderDefaultContent();
+}}
+```
+
+**Without MessageContainer** (when you need full control):
+
+```typescript
+renderMessageContent={(props) => {
+  const { message } = props;
+
+  if (message.type === 'bot' && isSpecialMessage(message)) {
+    // Render completely custom layout without Avatar
+    return <FullWidthBanner data={message.message.payload} />;
+  }
+
+  return props.renderDefaultContent();
+}}
+```
+
+#### Wrapper Pattern
+
+You can also wrap the default content to add additional elements:
+
+```typescript
+renderMessageContent={(props) => {
+  const { message, renderDefaultContent } = props;
+
+  return (
+    <div className="message-wrapper" data-type={message.type}>
+      <div className="timestamp">{new Date().toLocaleTimeString()}</div>
+      {renderDefaultContent()}
+      <div className="message-footer">
+        <span>Type: {message.type}</span>
+      </div>
+    </div>
+  );
+}}
+```
+
+#### Custom User Messages
+
+You can also customize user messages:
+
+```typescript
+renderMessageContent={(props) => {
+  const { message, renderDefaultContent, MessageContainer } = props;
+
+  if (message.type === 'user') {
+    return (
+      <MessageContainer>
+        <div className="custom-user-message">
+          <span className="user-badge">YOU</span>
+          <div className="user-content">{message.text}</div>
+        </div>
+      </MessageContainer>
+    );
+  }
+
+  return renderDefaultContent();
+}}
+```
+
 <a id="development"></a>
 <br/>
 

package/dist/components/chatbot/chatbot-body/conversation-message-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-message-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-body/conversation-message-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAuB,MAAM,iBAAiB,CAAC;AAgB3E,UAAU,gCAAgC;IACxC,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,GAAG,SAAS,CAgD9F"}
+{"version":3,"file":"conversation-message-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-body/conversation-message-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAuB,MAAM,iBAAiB,CAAC;AAoB3E,UAAU,gCAAgC;IACxC,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,GAAG,SAAS,CAyF9F"}

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

@@ -1 +1 @@
-{"version":3,"file":"chatbot.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/chatbot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAA8B,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AACzG,OAAO,EAEL,yBAAyB,EAEzB,0BAA0B,EAE1B,iCAAiC,EAClC,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU5C,UAAU,YAAa,SAAQ,0BAA0B;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IACzC,MAAM,EAAE,YAAY,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,iCAAiC,CAAC,cAAc,CAAC,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAG5D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,OAAO,CAAC;QAAC,kBAAkB,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7G;AAED,MAAM,WAAW,UAAU;IACzB,cAAc,CAAC,EAAE,yBAAyB,CAAC;CAC5C;AAED,eAAO,MAAM,OAAO,qGAoLlB,CAAC"}
+{"version":3,"file":"chatbot.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/chatbot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAA8B,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AACzG,OAAO,EAEL,yBAAyB,EAEzB,0BAA0B,EAE1B,iCAAiC,EAClC,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU5C,UAAU,YAAa,SAAQ,0BAA0B;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IACzC,MAAM,EAAE,YAAY,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,iCAAiC,CAAC,cAAc,CAAC,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAG5D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,OAAO,CAAC;QAAC,kBAAkB,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7G;AAED,MAAM,WAAW,UAAU;IACzB,cAAc,CAAC,EAAE,yBAAyB,CAAC;CAC5C;AAED,eAAO,MAAM,OAAO,qGAsLlB,CAAC"}

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

@@ -1,5 +1,5 @@
-import { ConversationBotMessage, ConversationErrorMessage } from '../../../core/src/index.ts';
-import { PropsWithChildren, ReactNode } from 'react';
+import { ConversationBotMessage, ConversationErrorMessage, ConversationMessage } from '../../../core/src/index.ts';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 
 /**
  * Configuration for a message action button
@@ -10,6 +10,23 @@ export interface MessageActionConfig {
     /** Display label for the action button */
     label: string;
 }
+/**
+ * Props for the MessageContainer component
+ */
+export interface MessageContainerProps {
+    children: ReactNode;
+}
+/**
+ * Props passed to the custom message content renderer function
+ */
+export interface MessageContentRendererProps {
+    /** The original message object */
+    message: ConversationMessage;
+    /** Function to render the default message content */
+    renderDefaultContent: () => ReactNode;
+    /** Container component that wraps custom content with Avatar for bot messages */
+    MessageContainer: FC<MessageContainerProps>;
+}
 export interface AsgardTemplateContextValue {
     onErrorClick?: (message: ConversationErrorMessage) => void;
     errorMessageRenderer?: (message: ConversationErrorMessage) => ReactNode;
@@ -19,6 +36,8 @@ export interface AsgardTemplateContextValue {
     messageActions?: (message: ConversationBotMessage) => MessageActionConfig[];
     /** Callback when a message action button is clicked */
     onMessageAction?: (actionId: string, message: ConversationBotMessage) => void;
+    /** Custom renderer for message content. Allows customizing how messages are rendered based on message properties. */
+    renderMessageContent?: (props: MessageContentRendererProps) => ReactNode;
 }
 export declare const AsgardTemplateContext: import('react').Context<AsgardTemplateContextValue>;
 interface AsgardTemplateContextProviderProps extends PropsWithChildren {
@@ -28,6 +47,7 @@ interface AsgardTemplateContextProviderProps extends PropsWithChildren {
     defaultLinkTarget?: '_blank' | '_self' | '_parent' | '_top';
     messageActions?: (message: ConversationBotMessage) => MessageActionConfig[];
     onMessageAction?: (actionId: string, message: ConversationBotMessage) => void;
+    renderMessageContent?: (props: MessageContentRendererProps) => ReactNode;
 }
 export declare function AsgardTemplateContextProvider(props: AsgardTemplateContextProviderProps): ReactNode;
 export declare function useAsgardTemplateContext(): AsgardTemplateContextValue;

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

@@ -1 +1 @@
-{"version":3,"file":"asgard-template-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-template-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAEnF;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,SAAS,CAAC;IACxE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChG,iBAAiB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,uEAAuE;IACvE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,mBAAmB,EAAE,CAAC;IAC5E,uDAAuD;IACvD,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC/E;AAED,eAAO,MAAM,qBAAqB,qDAOhC,CAAC;AAEH,UAAU,kCAAmC,SAAQ,iBAAiB;IACpE,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,SAAS,CAAC;IACxE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChG,iBAAiB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,mBAAmB,EAAE,CAAC;IAC5E,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC/E;AAED,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,kCAAkC,GAAG,SAAS,CAwBlG;AAED,wBAAgB,wBAAwB,IAAI,0BAA0B,CAErE"}
+{"version":3,"file":"asgard-template-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-template-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAExG;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,kCAAkC;IAClC,OAAO,EAAE,mBAAmB,CAAC;IAC7B,qDAAqD;IACrD,oBAAoB,EAAE,MAAM,SAAS,CAAC;IACtC,iFAAiF;IACjF,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,SAAS,CAAC;IACxE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChG,iBAAiB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,uEAAuE;IACvE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,mBAAmB,EAAE,CAAC;IAC5E,uDAAuD;IACvD,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAC9E,qHAAqH;IACrH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,SAAS,CAAC;CAC1E;AAED,eAAO,MAAM,qBAAqB,qDAQhC,CAAC;AAEH,UAAU,kCAAmC,SAAQ,iBAAiB;IACpE,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,SAAS,CAAC;IACxE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChG,iBAAiB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,mBAAmB,EAAE,CAAC;IAC5E,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAC9E,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,SAAS,CAAC;CAC1E;AAED,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,kCAAkC,GAAG,SAAS,CAkClG;AAED,wBAAgB,wBAAwB,IAAI,0BAA0B,CAErE"}