From a0cd346decefde1a317818fa62ffbf196812147e Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Thu, 30 Jan 2025 15:28:29 +0530
Subject: [PATCH] chore: update decision and chatBubble

---
 .../ChatBubble/ChatBubble.stories.tsx         | 24 +++++++++++++++++++
 .../src/components/ChatBubble/ChatBubble.tsx  | 22 +++++++++++++++++
 .../src/components/ChatBubble/_decision.md    |  4 ++--
 .../blade/src/components/ChatBubble/index.ts  |  1 +
 4 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 packages/blade/src/components/ChatBubble/ChatBubble.stories.tsx
 create mode 100644 packages/blade/src/components/ChatBubble/ChatBubble.tsx
 create mode 100644 packages/blade/src/components/ChatBubble/index.ts

diff --git a/packages/blade/src/components/ChatBubble/ChatBubble.stories.tsx b/packages/blade/src/components/ChatBubble/ChatBubble.stories.tsx
new file mode 100644
index 00000000000..51a9300cdfd
--- /dev/null
+++ b/packages/blade/src/components/ChatBubble/ChatBubble.stories.tsx
@@ -0,0 +1,24 @@
+// import chatBubble and create a basic story 
+import { ChatBubble } from './ChatBubble';
+import React from 'react';
+import { Story } from '@storybook/react';
+import { ChatBubbleProps } from './ChatBubble.types';
+
+export default {
+  title: 'ChatBubble',
+  component: ChatBubble,
+};
+
+const Template: Story<ChatBubbleProps> = (args) => <ChatBubble {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  message: 'Hello',
+  isLastMessage: false,
+  isUserMessage: false,
+  isLoading: false,
+  isError: false,
+  cardBody: null,
+  feedbackOptions: [],
+  ErrorText: '',
+  onErrorTextClick: () => {},
+};
\ No newline at end of file
diff --git a/packages/blade/src/components/ChatBubble/ChatBubble.tsx b/packages/blade/src/components/ChatBubble/ChatBubble.tsx
new file mode 100644
index 00000000000..a28bedbdfa2
--- /dev/null
+++ b/packages/blade/src/components/ChatBubble/ChatBubble.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Box } from "~components/Box";
+
+type ChatBubbleProps = {
+    message?: string;
+    isLastMessage?: boolean;
+    isUserMessage?: boolean;
+    isLoading?: boolean;
+    isError?: boolean;
+    cardBody?: React.ReactNode;
+    feedbackOptions?: Array<{icon: React.ReactNode, onClick: Function}>;
+    ErrorText?: string;
+    onErrorTextClick?: Function;
+  }
+const ChatBubble = ({ message, isLastMessage,isUserMessage,isLoading,isError,cardBody,feedbackOptions,ErrorText,onErrorTextClick }:ChatBubbleProps) => {
+  console.log({ message, isLastMessage,isUserMessage,isLoading,isError,cardBody,feedbackOptions,ErrorText,onErrorTextClick });
+    return <Box maxWidth="240px"></Box>;
+};
+
+
+
+export { ChatBubble };
\ No newline at end of file
diff --git a/packages/blade/src/components/ChatBubble/_decision.md b/packages/blade/src/components/ChatBubble/_decision.md
index e49412a60b9..f45aeb68268 100644
--- a/packages/blade/src/components/ChatBubble/_decision.md
+++ b/packages/blade/src/components/ChatBubble/_decision.md
@@ -24,7 +24,7 @@ This will be our main component that will be used to render the chat bubble.
 | isLoading     | Boolean   | false   | No       | If the message is loading, we will add a loading animation to the chat bubble                                                     |
 | isError       | Boolean   | false   | No       | If the message is an error, we will add a different style to the chat bubble                                                      |
 | ErrorText    | String    | null    | No       | If the message is an error, we will show the error message in the chat bubble                                                     |
-| onErrorTextClick | Function | null    | No       | If the message is an error, we will show the error message in the chat bubble                                                     |
+| onErrorClick | Function | null    | No       | this callback will be called when ever you click error bubble with Error message          |
 | cardBody      | ReactNode | null    | No       | If their is no message and isLoading is false, we will render the card body in the chat bubble|
 | feedbackOptions | Array<{icon: ReactNode, onClick: Function}> | null | No | if this is passed as an array, we will show feedbacOptions, otherwise not        |
 ```tsx
@@ -37,7 +37,7 @@ type ChatBubbleProps = {
   cardBody?: ReactNode;
   feedbackOptions?: Array<{icon: ReactNode, onClick: Function}>;
   ErrorText?: string;
-  onErrorTextClick?: Function;
+  onErrorClick?: Function;
 }
 ```
 ## API 
diff --git a/packages/blade/src/components/ChatBubble/index.ts b/packages/blade/src/components/ChatBubble/index.ts
new file mode 100644
index 00000000000..4f37728f690
--- /dev/null
+++ b/packages/blade/src/components/ChatBubble/index.ts
@@ -0,0 +1 @@
+export * from "./ChatBubble";
\ No newline at end of file