docs(AIResponse): add AI Response documentation

docs/src/data/nav/components.yaml

@@ -15,6 +15,10 @@ menus:
         label: 'AI Chip',
         link: /components/AIChip/usage/
       },
+      {
+        label: 'AI Response',
+        link: /components/AIResponse/usage/
+      },
       {
         label: 'Sara',
         link: /components/sara/usage/

docs/src/pages/components/AIResponse/code.mdx

@@ -0,0 +1,7 @@
+#### Live Demo
+<br/>
+
+<Preview name='components-ai-ai-response-beta-all--all' />
+
+#### Props
+<PreviewWithPropTable name='components-ai-ai-response-beta-all--all' />

docs/src/pages/components/AIResponse/usage.mdx

@@ -0,0 +1,103 @@
+---
+title: AI Response
+description: AI response is used to deliver information from Sara to the user.
+tabs: ['Usage', 'Code']
+showMobile: true
+keywords: ['Chat', 'Response', 'AI Chat', 'Chat box']
+---
+
+<Preview name="components-ai-ai-response-beta-all--all" />
+
+### States
+
+AI Response has **2 states** - default and generating.
+
+![States](./images/states.png)
+<Caption>States</Caption>
+
+### Structure
+
+![Structure - AI Response](./images/structure.png)
+<Caption>Structure - AI Response</Caption>
+
+<br />
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"50%",  textAlign: "left"}}>Padding and Spacing</th>
+      <th style={{width:"50%",  textAlign: "left"}}>Value(s)</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Top and Bottom</td>
+      <td>8px, 12px</td>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Left and Right</td>
+      <td>12px, 12px</td>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Spacing between Avatar and Bubble</td>
+      <td>8px</td>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Spacing between Metadata and Bubble</td>
+      <td>2px</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+### Configurations
+
+<br />
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"33%",  textAlign: "left"}}>Property</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Value(s)</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Default value</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Avatar (optional)</td>
+      <td>
+          <ul>
+              <li>True</li>
+              <li>False</li>
+          </ul>
+      </td>
+      <td>True</td>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Action Bar (optional)</td>
+      <td>
+          <ul>
+              <li>True</li>
+              <li>False</li>
+          </ul>
+      </td>
+      <td>True</td>
+    </tr>
+  </tbody>
+</table>
+<br/>
+
+### Behavior
+
+#### Tooltip on actions
+
+It is recommended to display a tooltip when hovering over icon buttons within an AI response.
+
+![Tooltip on Icon Buttons](./images/tooltip.png)
+<Caption>Tooltip on Icon Buttons</Caption>
+
+### Usage
+
+#### Custom response
+
+AI responses are highly customizable and can incorporate a wide range of components to meet diverse use cases.
+
+![Custom Content inside AI Response](./images/custom.png)
+<Caption>Custom Content inside AI Response</Caption>