Docs 1.0a changes (#2241)

* folders

* screenshots

* output-preview

* custom-api-endpoint

* screenshots

* memory-management

* update-component-version

* img

* errors

* space

* fix-issue

* remove-weird-footers

* mdx

* fix-import

docs/docs/administration/api.mdx

@@ -170,6 +170,10 @@ print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS, apiKey=api_key))
 - **Visibility**: For security reasons, the API key cannot be retrieved again through the UI.
 - **Scope**: The key allows access only to the flows and components of the specific user to whom it was issued.
 
+## Custom API endpoint
+
+As of Langflow v1.0 alpha, under **Project Settings** > **Endpoint Name**, you can pick a custom name for the endpoint used to call your flow from the API.
+
 ## Revoke an API Key
 
 To revoke an API key, delete it from the UI. This action immediately invalidates the key and prevents it from being used again.

docs/docs/administration/playground.mdx

@@ -49,4 +49,13 @@ Adding or removing any of the below components modifies your Playground so you c
 
 You can also select **Options** > **Logs** to see your flow's logs.
 
-For more information, see [Inputs and Outputs](../components/inputs-and-outputs)
+For more information, see [Inputs and Outputs](../components/inputs-and-outputs).
+
+## Memory Management
+
+When you send a message, under **Memories**, you can view a table of previous interactions for this session.
+
+Langflow allows every chat message to be stored, and a single flow can have multiple memory sessions. This enables you to create multiple “memories” for agents to store and recall specific information as needed.
+
+You can edit and remove previous messages to inspect and validate a model’s response behavior.
+

docs/docs/components/inputs-and-outputs.mdx

@@ -1,5 +1,6 @@
 import Admonition from "@theme/Admonition";
 import ZoomableImage from "/src/theme/ZoomableImage.js";
+import useBaseUrl from "@docusaurus/useBaseUrl";
 
 # Inputs and Outputs
 
@@ -48,8 +49,8 @@ One significant capability of the Chat Input component is its ability to transfo
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
-    light: "img/playground-chat.png",
-    dark: "img/playground-chat.png",
+    light: useBaseUrl("img/playground-chat.png"),
+    dark: useBaseUrl("img/playground-chat.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />
@@ -154,5 +155,4 @@ The `PromptTemplate` component enables users to create prompts and define variab
 
 After defining a variable in the prompt template, it acts as its own component input. See [Prompt Customization](../administration/prompt-customization) for more details.
 
-- **template:** The template used to format an individual request.import Admonition from "@theme/Admonition";
-  import ZoomableImage from "/src/theme/ZoomableImage.js";
+- **template:** The template used to format an individual request.

docs/docs/getting-started/canvas.mdx

@@ -32,8 +32,8 @@ For example, the [Basic prompting](../starter-projects/basic-prompting) flow is
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
-    light: "img/basic-prompting.png",
-    dark: "img/basic-prompting.png",
+    light: useBaseUrl("img/basic-prompting.png"),
+    dark: useBaseUrl("img/basic-prompting.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />
@@ -65,8 +65,8 @@ Components are the building blocks of flows. They consist of inputs, outputs, an
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
-    light: useBaseUrl("img/single-component.png"),
-    dark: useBaseUrl("img/single-component.png"),
+    light: useBaseUrl("img/single-component-light.png"),
+    dark: useBaseUrl("img/single-component-dark.png"),
   }}
   style={{ width: "40%", margin: "20px auto" }}
 />
@@ -80,7 +80,9 @@ To debug, hover over the component status to see the outputs.
 
 </div>
 
----
+### Output Preview
+
+Langflow now includes an output visualizer for components that opens a pop-up screen. This allows you to easily inspect and monitor transmissions between components, providing instant feedback on your workflows.
 
 ### Component Parameters
 
@@ -99,13 +101,13 @@ Double-click the component name to rename it.
 ### Component menu
 
 Each component is a little unique, but they will all have a menu bar on top that looks something like this.
-The menu options are **Code**, **Save**, **Duplicate**, and **More**.
+The menu options are **Code**, **Advanced Settings**, **Freeze**, and **More**.
 
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
-    light: "img/chat-input-with-menu.png",
-    dark: "img/chat-input-with-menu.png",
+    light: useBaseUrl("img/chat-input-light.png"),
+    dark: useBaseUrl("img/chat-input-dark.png"),
   }}
   style={{ width: "40%", margin: "20px auto" }}
 />
@@ -115,16 +117,19 @@ The menu options are **Code**, **Save**, **Duplicate**, and **More**.
 The **Code** button displays your component's Python code.
 You can modify the code and save it.
 
-#### Save
+### Advanced Settings
 
-Save your component to the **Saved** components folder for reuse.
+Modify the parameters of your component.
 
-#### Duplicate
+#### Freeze
 
-Duplicate your component in the canvas.
+After a component runs, lock its previous output state to prevent it from re-running.
+
+This avoids spending tokens when consistent output is expected.
 
 #### More
 
+**Code** - Modify your component's Python code.
 **Advanced** - modify the parameters of your component.
 
 <div
@@ -151,6 +156,14 @@ This is useful for combining large flows into single components (like RAG with a
 3. The components merge into a single component.
 4. To save the new component, select **Save**. It can now be reused from the **Saved** components folder.
 
+### Update component version
+
+Canvas component state is stored in a database, while sidebar components are like starter templates.
+
+As soon as you drag a component from the sidebar to the canvas, the two components are no longer in parity.
+
+The canvas component will keep the version number it was initilized to the canvas with. Click the **Update Component** icon to bring the component up to the `latest` version.
+
 ## Playground
 
 Run your flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button.
@@ -166,8 +179,8 @@ Modify the call's parameters in the **Tweaks** window, click the **Copy Code** o
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
-    light: "img/api-window.png",
-    dark: "img/api-window.png",
+    light: useBaseUrl("img/api-window.png"),
+    dark: useBaseUrl("img/api-window.png"),
   }}
   style={{ width: "60%", margin: "20px auto" }}
 />
@@ -259,8 +272,8 @@ To see options for your project, in the upper left corner of the canvas, select
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
-    light: "img/project-options-menu.png",
-    dark: "img/project-options-menu.png",
+    light: useBaseUrl("img/project-options-menu-light.png"),
+    dark: useBaseUrl("img/project-options-menu-dark.png"),
   }}
   style={{ width: "30%", margin: "20px auto" }}
 />
@@ -275,8 +288,15 @@ To see options for your project, in the upper left corner of the canvas, select
 
 **Export** - Download your current project to your local machine as a `.json` file.
 
-**Undo** or **Redo** - Undo or redo your last action.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";
+**Undo** or **Redo** - Undo or redo your last action.
+
+## Project folders
+
+As of Langflow 1.0 alpha, more options are available for storing projects with **folders**.
+
+Create new folders with the **New folder** button. One folder can store multiple projects (as the default My Projects folder does).
+
+You can download folders of projects as a single JSON file, and upload files and flows to your folder.
+
+Click the **Trash** icon to delete a folder.
+

docs/docs/getting-started/install-langflow.mdx

@@ -89,7 +89,4 @@ You'll be presented with the following screen:
   style={{ width: "80%", maxWidth: "800px", margin: "0 auto" }}
 />
 
-Name your Space, define the visibility (Public or Private), and click on **Duplicate Space** to start the installation process. When installation is finished, you'll be redirected to the Space's main page to start using Langflow right away!import ThemedImage from "@theme/ThemedImage";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import ZoomableImage from "/src/theme/ZoomableImage.js";
-import Admonition from "@theme/Admonition";
+Name your Space, define the visibility (Public or Private), and click on **Duplicate Space** to start the installation process. When installation is finished, you'll be redirected to the Space's main page to start using Langflow right away!

docs/docs/getting-started/quickstart.mdx

@@ -79,8 +79,4 @@ Here are a couple of examples:
 
 - [Memory chatbot](/starter-projects/memory-chatbot)
 - [Blog writer](/starter-projects/blog-writer)
-- [Document QA](/starter-projects/document-qa)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";
+- [Document QA](/starter-projects/document-qa)

docs/docs/getting-started/rag-with-astradb.mdx

@@ -192,16 +192,4 @@ And that's it! You have successfully ran a RAG application using Astra DB and La
 # Conclusion
 
 In this guide, we have learned how to run a RAG application using Astra DB and Langflow.
-We have seen how to create an Astra DB database, import the Astra DB RAG Flows project into Langflow, and run the ingestion and RAG flows.import ThemedImage from "@theme/ThemedImage";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import ZoomableImage from "/src/theme/ZoomableImage.js";
-import Admonition from "@theme/Admonition";import ThemedImage from "@theme/ThemedImage";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import ZoomableImage from "/src/theme/ZoomableImage.js";
-import Admonition from "@theme/Admonition";import ThemedImage from "@theme/ThemedImage";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import ZoomableImage from "/src/theme/ZoomableImage.js";
-import Admonition from "@theme/Admonition";import ThemedImage from "@theme/ThemedImage";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import ZoomableImage from "/src/theme/ZoomableImage.js";
-import Admonition from "@theme/Admonition";
+We have seen how to create an Astra DB database, import the Astra DB RAG Flows project into Langflow, and run the ingestion and RAG flows.

docs/docs/starter-projects/basic-prompting.mdx

@@ -62,8 +62,4 @@ This should be interesting...
    The **Edit Prompt** window opens.
 2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Harold Abelson.`
 3. Run the basic prompting flow again.
-   The response will be markedly different.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";
+   The response will be markedly different.

docs/docs/starter-projects/blog-writer.mdx

@@ -75,8 +75,4 @@ The `reference_1` and `reference_2` values are received from the **URL** fields
 3. The **OpenAI** component constructs a blog post with the **URL** items as context.
    The default **URL** values are for web pages at `promptingguide.ai`, so your blog post will be about prompting LLMs.
 
-To write about something different, change the values in the **URL** components, and see what the LLM constructs.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";
+To write about something different, change the values in the **URL** components, and see what the LLM constructs.

docs/docs/starter-projects/document-qa.mdx

@@ -67,8 +67,4 @@ Including a file with the prompt gives the **OpenAI** component context it may n
 The issue occurred during the execution of migrations in the application. Specifically, an error was raised by the Alembic library, indicating that new upgrade operations were detected that had not been accounted for in the existing migration scripts. The operation in question involved modifying the nullable property of a column (apikey, created_at) in the database, with details about the existing type (DATETIME()), existing server default, and other properties.
 ```
 
-This result indicates that the bot received the loaded document and understood the context surrounding the vague question. It also correctly identified the issue in the error log, and followed up with appropriate troubleshooting suggestions. Nice!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";
+This result indicates that the bot received the loaded document and understood the context surrounding the vague question. It also correctly identified the issue in the error log, and followed up with appropriate troubleshooting suggestions. Nice!

docs/docs/starter-projects/memory-chatbot.mdx

@@ -81,8 +81,4 @@ To store **Session ID** as a Langflow variable, in the **Session ID** field, cli
 1. In the **Variable Name** field, enter a name like `customer_chat_emea`.
 2. In the **Value** field, enter a value like `1B5EBD79-6E9C-4533-B2C8-7E4FF29E983B`.
 3. Click **Save Variable**.
-4. Apply this variable to **Chat Input**.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";
+4. Apply this variable to **Chat Input**.

docs/docs/starter-projects/vector-store-rag.mdx

@@ -106,8 +106,4 @@ AI
 You should use a 3/8 inch wrench to remove the oil drain cap.
 ```
 
-This is the size the engine manual lists as well. This confirms our flow works, because the query returns the unique knowledge we embedded from the Astra vector store.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";
+This is the size the engine manual lists as well. This confirms our flow works, because the query returns the unique knowledge we embedded from the Astra vector store.

docs/docs/tutorials/custom_components.mdx

@@ -401,5 +401,4 @@ Langflow will attempt to load all of the components found in the specified direc
 
 Once your custom components have been loaded successfully, they will appear in Langflow's sidebar. From there, you can add them to your Langflow canvas for use. However, please note that components with errors will not be available for addition to the canvas. Always ensure your code is error-free before attempting to load components.
 
-Remember, creating custom components allows you to extend the functionality of Langflow to better suit your unique needs. Happy coding!import ZoomableImage from "/src/theme/ZoomableImage.js";
-import Admonition from "@theme/Admonition";
+Remember, creating custom components allows you to extend the functionality of Langflow to better suit your unique needs. Happy coding!