From f49bca8e9d52cd67334731ca5b13843b6be78a9b Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 27 Jul 2023 09:06:58 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs(widget.mdx):=20add=20Admoni?=
 =?UTF-8?q?tion=20component=20to=20provide=20additional=20information=20ab?=
 =?UTF-8?q?out=20using=20the=20Chat=20Widget=20in=20Angular=20projects=20?=
 =?UTF-8?q?=F0=9F=93=9D=20docs(widget.mdx):=20update=20caution=20admonitio?=
 =?UTF-8?q?n=20to=20provide=20instructions=20on=20passing=20JSON=20props?=
 =?UTF-8?q?=20as=20Stringified=20JSONs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/guidelines/widget.mdx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/docs/docs/guidelines/widget.mdx b/docs/docs/guidelines/widget.mdx
index 02629bf34..454b54534 100644
--- a/docs/docs/guidelines/widget.mdx
+++ b/docs/docs/guidelines/widget.mdx
@@ -2,6 +2,7 @@ import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import ZoomableImage from "/src/theme/ZoomableImage.js";
 import ReactPlayer from "react-player";
+import Admonition from '@theme/Admonition';
 
 # Chat Widget
 
@@ -156,11 +157,15 @@ In your Angular project, locate the component that belongs to the module where y
 ></langflow-chat>
 ```
 
-Here are some additional notes:
+<Admonition type="info">
+  <ul>
+    <li>The CUSTOM_ELEMENTS_SCHEMA is a built-in schema that allows Angular to recognize custom elements.</li>
+    <li>Adding 'CUSTOM_ELEMENTS_SCHEMA' tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like 'langflow-chat'.</li>
+    <li>You can only use the Chat Widget in components that are part of the module where you added the CUSTOM_ELEMENTS_SCHEMA.</li>
+  </ul>
+</Admonition>
+
 
-- The CUSTOM_ELEMENTS_SCHEMA is a built-in schema that allows Angular to recognize custom elements.
-- Adding 'CUSTOM_ELEMENTS_SCHEMA' tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like 'langflow-chat'.
-- You can only use the Chat Widget in components that are part of the module where you added the CUSTOM_ELEMENTS_SCHEMA.
 
 You now have the flexibility to utilize the Chat Widget seamlessly in any Angular application.
 
@@ -170,9 +175,10 @@ You now have the flexibility to utilize the Chat Widget seamlessly in any Angula
 
 Use the widget API to customize your widget:
 
-:::caution
-Props with the type JSON need to be passed as Stringified JSONs, with the format '{"key": "value"}'.
-:::
+<Admonition type="caution">
+  Props with the type JSON need to be passed as Stringified JSONs, with the format &#123;<span>"key":"value"</span>&#125;.
+</Admonition>
+
 
 | Prop                  | Type    | Required | Description                                                                                                                                                      |
 | --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |