Make ChatMessage accept react node as children (#1413)

common/changes/pcln-design-system/feature-update-chat-message-component_2023-11-11-16-40.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "update ChatMessage accepts react node as child",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

packages/core/src/ChatMessage/ChatMessage.stories.tsx

@@ -43,6 +43,10 @@ export const InitialMessage: ChatMessageStory = {
   render: (args) => <ChatMessage {...args} variation='initial' />,
 }
 
+export const WithReactNodeMessage: ChatMessageStory = {
+  render: (args) => <ChatMessage {...args} variation='initial' message={<div>How can I help you?</div>} />,
+}
+
 export const IncomingMessage: ChatMessageStory = {
   render: (args) => <ChatMessage {...args} variation='incoming' />,
 }

packages/core/src/ChatMessage/ChatMessage.tsx

@@ -41,7 +41,7 @@ export interface IChatMessage extends IFlexProps {
   footer?: React.ReactNode
   header?: React.ReactNode
   Icon?: React.FC<{ color?: string; size?: string }>
-  message: string
+  message: React.ReactNode
   variation: (typeof variationNames)[number]
 }