Merge branch 'dev' into modalRefactor

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 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>
+
+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>
+
+
+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 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>
+
+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>
+
+
+
+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/docs/guides/chatprompttemplate_guide.mdx

@@ -0,0 +1,78 @@
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import ReactPlayer from "react-player";
+
+# Building chatbots with System Message
+
+## Overview
+
+In this guide, we will modify the "Basic Chat with Prompt and History" example, integrating the ChatPromptTemplate with the SystemMessagePromptTemplate and HumanMessagePromptTemplate components. By following these steps, you'll be able to build a personalized chatbot that can interpret and respond based on user-defined System messages.
+
+## Interactive Guide
+
+<iframe
+  src="https://app.tango.us/app/embed/f05bb3a7-4ceb-4b61-921f-628563b562f6?iframe=true"
+  sandbox="allow-scripts allow-top-navigation-by-user-activation allow-popups allow-same-origin"
+  security="restricted"
+  title="Step-by-Step Instructions to Customize and Build a Chatbot with custom System Message"
+  width="100%"
+  height="800px"
+  referrerpolicy="strict-origin-when-cross-origin"
+  frameborder="0"
+  webkitallowfullscreen="webkitallowfullscreen"
+  mozallowfullscreen="mozallowfullscreen"
+  allowfullscreen="allowfullscreen"
+></iframe>
+
+## Step-by-Step Instructions
+
+1. Navigate to the "Community Examples" section.
+
+2. Locate the "Basic Chat with Prompt and History" example, and click on "Fork Example".
+
+3. Once in the editor, find the "PromptTemplate" component and remove it.
+
+4. Now, add these three components: ChatPromptTemplate, SystemMessagePromptTemplate, and HumanMessagePromptTemplate.
+
+> **Note:** Remember to set the model to gpt-3.5-turbo-0613 or the most up-to-date version. The latest models have improved capabilities to comprehend System messages.
+
+5. Open the "Prompt" field on the SystemMessagePromptTemplate component.
+
+6. Enter the text: `You are a {role} that {behavior}.`
+
+7. Save your changes by clicking on "Check & Save".
+
+8. Define the 'role' variable by typing "obedient assistant".
+
+9. Next, navigate to the HumanMessagePromptTemplate and open the "Prompt" field.
+
+10. Here, simply enter `{input}`.
+
+11. Save these changes by clicking on "Check & Save".
+
+12. Now, you should see your flow populated with the variables you defined.
+
+13. In the Memory component, set the 'Input Key' to "input".
+
+> **Tip:** When using a Memory component with multiple variables, it's crucial to specify which variable should be used to generate the conversation history.
+
+14. Click on the "Build" button to implement your changes.
+
+15. Open the chat interface to test your modifications.
+
+16. You should now be able to see and use the defined variables in the chat interface.
+
+17. Click on 'role' to examine the variable you established in the canvas.
+
+18. Now, let's define the 'behavior' variable.
+
+19. Enter the text: "writes the word 'Langflow' at the end of every sentence."
+
+20. Test your chatbot by typing "How can you help me?"
+
+21. If everything was set up correctly, your chatbot should respond appropriately, following the defined behavior.
+
+22. Congratulations! You have successfully customized and built your chatbot.
+
+By following these instructions, you have created a dynamic chatbot capable of understanding and responding based on custom system messages, enhancing the user experience and interaction. Enjoy your personalized assistant!

docs/docs/guides/loading_document.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";
+
+# Integrating documents with prompt variables
+
+## Overview
+
+This guide takes you through the process of augmenting the "Basic Chat with Prompt and History" example. You'll learn how to embed documents as context into the PromptTemplate component utilizing a WebBaseLoader.
+
+## Interactive Guide
+
+<iframe
+  src="https://app.tango.us/app/embed/76578e84-a700-4b3b-a6ef-8a0350472781?iframe=true"
+  sandbox="allow-scripts allow-top-navigation-by-user-activation allow-popups allow-same-origin"
+  security="restricted"
+  title="Loading a document into a PromptTemplate variable"
+  width="100%"
+  height="800px"
+  referrerpolicy="strict-origin-when-cross-origin"
+  frameborder="0"
+  webkitallowfullscreen="webkitallowfullscreen"
+  mozallowfullscreen="mozallowfullscreen"
+  allowfullscreen="allowfullscreen"
+></iframe>
+
+## Step-by-Step Instructions
+
+1. Start by navigating to the "Community Examples" section.
+
+2. Find the "Basic Chat with Prompt and History" example and click on "Fork Example".
+
+3. In the editor, open the "Template" field.
+
+4. Here, introduce the `{context}` variable, placing it somewhere before the "Current conversation:" text.
+
+5. Once done, save your changes by clicking on "Check & Save".
+
+6. Next, open the search bar and type "web".
+
+7. Drag and drop a WebBaseLoader (or any other loader of your choice) onto the canvas.
+
+8. Connect this loader to the `{context}` variable that we just added.
+
+9. In the "Web Page" field, enter "https://langflow.org/how-upload-examples".
+
+10. Now, click on "ConversationBufferMemory".
+
+11. In the "Input Key" field, enter "text" to define the Chat variable.
+
+> **Tip:** When defining more than one variable and using a Memory component, it's crucial to specify which variable should be used to create the conversation history.
+
+12. Click on the "Build" button to implement your changes.
+
+13. Open the chat interface to test your modifications.
+
+14. Try asking something like, "How do I upload examples?"
+
+15. Click on "Display Prompt" to view your template.
+
+16. Now, you can see what the model used as a basis to generate its response.
+
+By following these instructions, you have successfully loaded a document into a PromptTemplate variable, allowing for more enriched and context-aware chat responses. This customization enhances user interaction by integrating relevant document content into the chat flow.

docs/sidebars.js

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

docs/src/theme/Footer.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Footer from "@theme-original/Footer";
 import { MendableFloatingButton } from "@mendable/search";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
 export default function FooterWrapper(props) {
   const iconSpan1 = React.createElement(