Add new documentation for chat interface and prompt customization

- Added new files for chat interface and prompt customization in the guidelines section
- Added descriptions and images for the chat interface and prompt customization features
- Updated the sidebars to include the new documentation pages

docs/docs/guidelines/chat-interface.mdx

@@ -0,0 +1,64 @@
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import ReactPlayer from "react-player";
+
+# Chat Interface
+
+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>
+
+
+Notice that editing variables in the chat interface takes 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>
+
+To view the complete prompt in its original, structured format, simply click on the "Display Prompt" option. This feature allows you to 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>
+
+
+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>

docs/docs/guidelines/prompt-customization.mdx

@@ -0,0 +1,86 @@
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import ReactPlayer from "react-player";
+
+# Prompt Customization
+
+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>
+
+
+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>
+
+
+Once inserted, these variables are immediately recognized as new fields in the prompt component. Here, you have the option to 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>
+
+You can also use documents or output parsers as prompt variables. By plugging them into the prompt handles, they’ll disable the input field 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>
+
+
+
+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>
+
+

docs/sidebars.js

@@ -19,11 +19,13 @@ module.exports = {
         "guidelines/components",
         "guidelines/features",
         "guidelines/collection",
+        "guidelines/prompt-customization",
+        "guidelines/chat-interface",
       ],
     },
     {
       type: "category",
-      label: "Guides",
+      label: "Step-by-Step Guides",
       collapsed: false,
       items: ["guides/loading_document", "guides/chatprompttemplate_guide"],
     },