From 231978d1dfd732c7d2c7548aeb2b98e5507ad0cd Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 28 Jul 2023 12:44:44 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(docs):=20update=20image=20?=
 =?UTF-8?q?rendering=20in=20examples=20and=20guidelines=20files=20for=20be?=
 =?UTF-8?q?tter=20readability=20and=20consistency=20=F0=9F=94=A7=20chore(d?=
 =?UTF-8?q?ocs):=20fix=20formatting=20in=20chat-widget.mdx=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 style(components.mdx): Remove unnecessary div wrapper and fix indentation
🎨 style(features.mdx): Remove unnecessary div wrapper and fix indentation
🎨 style(prompt-customization.mdx): Remove unnecessary div wrappers and fix indentation
🎨 style(index.mdx): Remove unnecessary div wrapper and fix indentation
---
 docs/docs/examples/how-upload-examples.mdx    |  18 ++--
 .../getting-started/hugging-face-spaces.mdx   |  19 ++--
 docs/docs/guidelines/chat-interface.mdx       |  78 ++++++--------
 docs/docs/guidelines/chat-widget.mdx          |  75 +++++++------
 docs/docs/guidelines/components.mdx           |  19 ++--
 docs/docs/guidelines/features.mdx             |  19 ++--
 docs/docs/guidelines/prompt-customization.mdx | 101 +++++++-----------
 docs/docs/index.mdx                           |  18 ++--
 8 files changed, 156 insertions(+), 191 deletions(-)

diff --git a/docs/docs/examples/how-upload-examples.mdx b/docs/docs/examples/how-upload-examples.mdx
index 8a4306212..2b1a2b06c 100644
--- a/docs/docs/examples/how-upload-examples.mdx
+++ b/docs/docs/examples/how-upload-examples.mdx
@@ -7,16 +7,14 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 We welcome all examples that can help our community learn and explore Langflow's capabilities.
 Langflow Examples is a repository on [GitHub](https://github.com/logspace-ai/langflow_examples) that contains examples of flows that people can use for inspiration and learning.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: "img/community-examples.png",
-    }}
-  />
-</div>
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/community-examples.png",
+  }}
+  style={{ width: "100%" }}
+/>
 
 To upload examples, please follow these steps:
 
diff --git a/docs/docs/getting-started/hugging-face-spaces.mdx b/docs/docs/getting-started/hugging-face-spaces.mdx
index e8b3852a9..acc4bb8d5 100644
--- a/docs/docs/getting-started/hugging-face-spaces.mdx
+++ b/docs/docs/getting-started/hugging-face-spaces.mdx
@@ -6,15 +6,14 @@ import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import ZoomableImage from "/src/theme/ZoomableImage.js";
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: "img/hugging-face.png",
-    }}
-  />
-</div>
+{" "}
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/hugging-face.png",
+  }}
+  style={{ width: "100%" }}
+/>
 
 Check out Langflow on [HuggingFace Spaces](https://huggingface.co/spaces/Logspace/Langflow).
diff --git a/docs/docs/guidelines/chat-interface.mdx b/docs/docs/guidelines/chat-interface.mdx
index c09f00076..0ac23dc8a 100644
--- a/docs/docs/guidelines/chat-interface.mdx
+++ b/docs/docs/guidelines/chat-interface.mdx
@@ -7,58 +7,46 @@ import ReactPlayer from "react-player";
 
 Langflow’s chat interface provides a user-friendly experience and functionality to interact with the model and customize the prompt. The sidebar brings options that allow users to view and edit pre-defined prompt variables. This feature facilitates quick experimentation by enabling the modification of variable values right in the chat.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/chat_interface.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
 
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/chat_interface.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 Notice that editing variables in the chat interface take place temporarily and won’t change their original value in the components once the chat is closed.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/chat_interface2.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/chat_interface2.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 To view the complete prompt in its original, structured format, click the "Display Prompt" option. This feature lets you see the prompt exactly as it entered the model.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/chat_interface3.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
-
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/chat_interface3.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 In the chat interface, you can redefine which variable should be interpreted as the chat input. This gives you control over these inputs and allows dynamic and creative interactions.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/chat_interface4.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/chat_interface4.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
diff --git a/docs/docs/guidelines/chat-widget.mdx b/docs/docs/guidelines/chat-widget.mdx
index e515e4e94..7f6737fea 100644
--- a/docs/docs/guidelines/chat-widget.mdx
+++ b/docs/docs/guidelines/chat-widget.mdx
@@ -2,14 +2,15 @@ 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';
+import Admonition from "@theme/Admonition";
 
 # Chat Widget
 
 <div style={{ marginBottom: "20px" }}>
   The <b>Langflow Chat Widget</b> is a powerful web component that enables
-  communication with a Langflow project. This widget allows for a chat interface embedding,
-  allowing the integration of Langflow into web applications effortlessly.
+  communication with a Langflow project. This widget allows for a chat interface
+  embedding, allowing the integration of Langflow into web applications
+  effortlessly.
 </div>
 
 ## Features
@@ -31,32 +32,30 @@ import Admonition from '@theme/Admonition';
   at the Sidebar after building a flow.
 </div>
 
-<div
-  style={{ marginBottom: "20px", width: "100%", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/widget-sidebar.png"),
-    }}
-    style={{ width: "100%", maxWidth: "600px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/widget-sidebar.png"),
+  }}
+  style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
+/>
 
 <div style={{ marginBottom: "20px" }}>
-  Clicking the Chat Widget HTML tab, you'll get the code to be
-  inserted. Read below to learn how to use it with HTML, React and Angular.
+  Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read
+  below to learn how to use it with HTML, React and Angular.
 </div>
 
-<div style={{ marginBottom: "20px" }}>
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/widget-code.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/widget-code.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 ---
 
@@ -74,7 +73,7 @@ The Chat Widget can be embedded into any HTML page, inside a _`<body>`_ tag, as
 
 ### React
 
-To embed the Chat Widget using React, you'll need to insert this _`<script>`_ tag into the React *index.html* file, inside the _`<body>`_ tag:
+To embed the Chat Widget using React, you'll need to insert this _`<script>`_ tag into the React _index.html_ file, inside the _`<body>`_ tag:
 
 ```html
 <script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
@@ -111,7 +110,7 @@ Finally, you can place the component anywhere in your code to display the Chat W
 
 ### Angular
 
-To use it in Angular, first add this _`<script>`_ tag into the Angular *index.html* file, inside the _`<body>`_ tag.
+To use it in Angular, first add this _`<script>`_ tag into the Angular _index.html_ file, inside the _`<body>`_ tag.
 
 ```html
 <script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
@@ -119,7 +118,7 @@ To use it in Angular, first add this _`<script>`_ tag into the Angular *index.ht
 
 When you use a custom web component in an Angular template, the Angular compiler might show a warning when it doesn't recognize the custom elements by default. To suppress this warning, add _`CUSTOM_ELEMENTS_SCHEMA`_ to the module's _`@NgModule.schemas`_.
 
-- Open the module file (it typically ends with *.module.ts*) where you'd add the _`langflow-chat`_ web component.
+- Open the module file (it typically ends with _.module.ts_) where you'd add the _`langflow-chat`_ web component.
 - Import _`CUSTOM_ELEMENTS_SCHEMA`_ at the top of the file:
 
 ```ts
@@ -156,9 +155,19 @@ In your Angular project, find the component belonging to the module where _`CUST
 
 <Admonition type="info">
   <ul>
-    <li>_`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>Notice that you can only use the Chat Widget in components that are part of the module where you added _`CUSTOM_ELEMENTS_SCHEMA`_.</li>
+    <li>
+      _`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>
+      Notice that you can only use the Chat Widget in components that are part
+      of the module where you added _`CUSTOM_ELEMENTS_SCHEMA`_.
+    </li>
   </ul>
 </Admonition>
 
@@ -169,10 +178,10 @@ In your Angular project, find the component belonging to the module where _`CUST
 Use the widget API to customize your Chat Widget:
 
 <Admonition type="caution">
-  Props with the type JSON need to be passed as Stringified JSONs, with the format &#123;<span>"key":"value"</span>&#125;.
+  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                                                                                                                                                      |
 | --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | bot_message_style     | JSON    | No       | Applies custom formatting to bot messages.                                                                                                                       |
diff --git a/docs/docs/guidelines/components.mdx b/docs/docs/guidelines/components.mdx
index ba2f5ff33..b7dadcfce 100644
--- a/docs/docs/guidelines/components.mdx
+++ b/docs/docs/guidelines/components.mdx
@@ -25,17 +25,14 @@ Components are the building blocks of the flows. They are made of inputs, output
   of that type is required.
 </div>
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/single-compenent.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/single-compenent.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 <div style={{ marginBottom: "20px" }}>
   On the top right corner, you will find the component status icon 🔴. Make the
diff --git a/docs/docs/guidelines/features.mdx b/docs/docs/guidelines/features.mdx
index 18bd0bd75..6235b68db 100644
--- a/docs/docs/guidelines/features.mdx
+++ b/docs/docs/guidelines/features.mdx
@@ -13,17 +13,14 @@ import Admonition from "@theme/Admonition";
   below:
 </div>
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/features.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/features.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 <div style={{ marginBottom: "20px" }}>
   Further down, we will explain each of these options.
diff --git a/docs/docs/guidelines/prompt-customization.mdx b/docs/docs/guidelines/prompt-customization.mdx
index 8e2f409f9..ebbbd9c03 100644
--- a/docs/docs/guidelines/prompt-customization.mdx
+++ b/docs/docs/guidelines/prompt-customization.mdx
@@ -7,80 +7,59 @@ import ReactPlayer from "react-player";
 
 The prompt template allows users to create prompts and define variables that provide control over instructing the model.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/prompt_customization.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
 
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/prompt_customization.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 Variables can be used to define instructions, questions, context, inputs, or examples for the model and can be created with any chosen name in curly brackets, e.g., `{variable_name}`. They act as placeholders for parts of the text that can be easily modified.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/prompt_customization2.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
 
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/prompt_customization2.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 Once inserted, these variables are immediately recognized as new fields in the prompt component. Here, you can define their values within the component itself or leave a field empty to be adjusted over the chat interface.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/prompt_customization3.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/prompt_customization3.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 You can also use documents or output parsers as prompt variables. By plugging them into prompt handles, they’ll disable and feed that input field.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/prompt_customization4.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
-
-
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/prompt_customization4.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 With this, users can interact with documents, webpages, or any other type of content directly from the prompt, which allows for seamless integration of external resources with the language model.
 
-
-
 If working with an interactive (chat-like) flow, remember to keep one of the input variables empty to behave as the chat input.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/prompt_customization5.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
-
-
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/prompt_customization5.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
diff --git a/docs/docs/index.mdx b/docs/docs/index.mdx
index 4ec4a300d..7be04549c 100644
--- a/docs/docs/index.mdx
+++ b/docs/docs/index.mdx
@@ -6,13 +6,11 @@ import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import ZoomableImage from "/src/theme/ZoomableImage.js";
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: "img/new_langflow2.gif",
-    }}
-  />
-</div>
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/new_langflow2.gif",
+  }}
+  style={{ width: "100%" }}
+/>