docs: api page fix and workflow run fix (#2675)

* Fetched updated docs * Fixed GitHub workflow for fetching docs
langflow-ai · Jul 12, 2024 · 138552d · 138552d
1 parent e29e362
commit 138552d
Show file tree

Hide file tree

Showing 15 changed files with 26 additions and 55 deletions.
diff --git a/.github/workflows/fetch_docs_notion.yml b/.github/workflows/fetch_docs_notion.yml
@@ -12,6 +12,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+      - name: Get current date
+        id: date
+        run: echo "DATE=date::$(date +'%Y%m%d%H%M%S')" >> "$GITHUB_OUTPUT
       - name: Checkout code
         uses: actions/checkout@v4
 
@@ -28,7 +31,7 @@ jobs:
 
       - name: Create new branch
         run: |
-          git checkout -b update-docs-$(date +%Y%m%d%H%M%S)
+          git checkout -b update-docs-${{ steps.date.outputs.DATE }}
 
       - name: Cache Node.js dependencies
         uses: actions/cache@v4
@@ -70,7 +73,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           commit-message: Update docs from Notion
-          branch: update-docs-$(date +%Y%m%d%H%M%S)
+          branch: update-docs-${{ steps.date.outputs.DATE }}
           base: main
           title: "docs: update docs from notion"
           body: This PR updates the documentation from Notion.

diff --git a/docs/docs/Settings/settings-global-variables.md b/docs/docs/Settings/settings-global-variables.md
@@ -106,5 +106,5 @@ The default list of variables includes the ones below and more:
 - VECTARA_CORPUS_ID
 - VECTARA_API_KEY
 
-<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/7030d3ff-3ecd-44db-8640-9c2295b4e3bc/langflow_global_variables.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T201930Z&X-Amz-Expires=3600&X-Amz-Signature=5f73d1f28bf3681200b6871209bbb7d5ad8677f2a136b139c5ddc22667af6959&X-Amz-SignedHeaders=host&x-id=GetObject" />
+<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/7030d3ff-3ecd-44db-8640-9c2295b4e3bc/langflow_global_variables.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T220002Z&X-Amz-Expires=3600&X-Amz-Signature=bad6b33d89ef22b2d56becb6184c34cbc0ad51fc24d1a7d3b9f5d70d755506b1&X-Amz-SignedHeaders=host&x-id=GetObject" />
 
diff --git a/docs/docs/What’s-New/1019037178.webp b/docs/docs/What’s-New/1019037178.webp
diff --git a/docs/docs/What’s-New/225113267.png → docs/docs/What’s-New/1143907392.png b/docs/docs/What’s-New/225113267.png → docs/docs/What’s-New/1143907392.png
diff --git a/docs/docs/What’s-New/1285484510.webp b/docs/docs/What’s-New/1285484510.webp
diff --git a/docs/docs/What’s-New/1528084074.jpg b/docs/docs/What’s-New/1528084074.jpg
diff --git a/docs/docs/What’s-New/17412613.png b/docs/docs/What’s-New/17412613.png
diff --git a/docs/docs/What’s-New/196150825.gif b/docs/docs/What’s-New/196150825.gif
diff --git a/docs/docs/What’s-New/2087505425.png b/docs/docs/What’s-New/2087505425.png
diff --git a/docs/docs/What’s-New/543968297.webp b/docs/docs/What’s-New/543968297.webp
diff --git a/docs/docs/What’s-New/82097598.webp b/docs/docs/What’s-New/82097598.webp
diff --git a/docs/docs/What’s-New/whats-new-a-new-chapter-langflow.md b/docs/docs/What’s-New/whats-new-a-new-chapter-langflow.md
@@ -6,7 +6,7 @@ slug: /whats-new-a-new-chapter-langflow
 
 
 
-![](./225113267.png)
+![](./1143907392.png)
 
 
 ## First things first {#5add758564574950862f689198a4e085}
@@ -44,9 +44,6 @@ Components can now have more than a single output, allowing for unique flexibili
 4. Enable the development of agent architectures from scratch;
 5. Build an orchestrator that routes between agents.
 
-![](./1285484510.webp)
-
-
 ### Flow + Composition {#12d86f91b5af4abc9f8e885c5f828df4}
 
 
@@ -64,9 +61,6 @@ This makes it so that composition is now just **another way** of building in L
 For example, a flow can sequentially process text, and after a few steps, trigger an agent. It can access functions that wait to be called or to respond. This blend of flow and composition brings an unprecedented level of flexibility and control to data workflows in LLM-based apps and agents that use multiple models and APIs working together to achieve tasks.
 
 
-![](./1019037178.webp)
-
-
 ### Memory Management {#a9e352272f4a44499f52fae65b663118}
 
 
@@ -76,9 +70,6 @@ Langflow 1.0 natively allows every chat message to be stored, and a single flow
 You can edit and remove previous messages to inspect and validate a model’s response behavior. Control, explore, and manage conversation histories to get your models acting just right.
 
 
-![](./17412613.png)
-
-
 ### Component Freeze 🥶 {#4912d08da5464ff2aff595d6b26fd809}
 
 
@@ -91,18 +82,12 @@ Once a component runs, you can now lock its previous output state to prevent it
 Avoid spending extra tokens and remove repetition when output should be constant — plus it's great for debugging and prototyping!
 
 
-![](./1528084074.jpg)
-
-
 ### Output Preview {#f56d4400b0214ef2ab1206add068dd99}
 
 
 Each component now includes an output visualizer that opens a pop-up screen, allowing you to easily inspect and monitor transmissions between components. It provides instant feedback on your workflows, letting you see results as they are processed. 🔍
 
 
-![](./196150825.gif)
-
-
 ### Inputs and Outputs Handling {#2112c11dc496480c9bd681f04f8533ea}
 
 
@@ -118,18 +103,12 @@ We’re proposing Langflow-native types to keep things consistent, but not limit
 Now you can pick a custom name for your endpoint used to call your flow from the API.
 
 
-![](./82097598.webp)
-
-
 ### Logs & Monitoring {#c902ee43b4b24711b526352ae2451c48}
 
 
 A new logs page has been added! Now, both component executions and message history from the chat can be inspected in an interactive table. This will make it easier to debug, inspect, and manage messages passing through components.
 
 
-![](./543968297.webp)
-
-
 ### Folders 📁 {#d01237fd83e4467994fed6fa7a8ee4f4}
 
 
@@ -154,9 +133,6 @@ For example, let's say you are building a simple RAG application. Generally, you
 Langflow is now multi-modal! It can now handle images and more soon!
 
 
-![](./2087505425.png)
-
-
 We’ve also improved project organization, global variables and overall settings, added Python 3.12 compatibility, keyboard shortcuts and a lot of new and fun experimental components!
 
 

diff --git a/docs/docs/Workspace/1862729633.png b/docs/docs/Workspace/1862729633.png
diff --git a/docs/docs/Workspace/workspace-api.md b/docs/docs/Workspace/workspace-api.md
@@ -9,7 +9,7 @@ import ReactPlayer from "react-player";
 The **API** section presents code templates for integrating your flow into external applications.
 
 
-[API IMAGE HERE]
+![](./1862729633.png)
 
 
 ### cURL {#4eb287a8424349c4b0b436a6703de5f3}
@@ -18,9 +18,6 @@ The **API** section presents code templates for integrating your flow into ext
 The **cURL** tab displays sample code for posting a query to your flow. Modify the `input_value` to change your input message. Copy the code and run it to post a query to your flow and get the result.
 
 
-[cURL Image here]
-
-
 ### Python API {#fb7db14e6330418389562ef647aa2354}
 
 
@@ -39,7 +36,7 @@ The **Python Code** tab displays code to interact with your flow's `.json` f
 The **Tweaks** tab displays the available parameters for your flow. Modifying the parameters changes the code parameters across all windows. For example, changing the **Chat Input** component's `input_value` will change that value across all API calls.
 
 
-<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/d4b5f648-d99f-47cc-9ac6-986e1c32a71d/langflow_api.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T201829Z&X-Amz-Expires=3600&X-Amz-Signature=3c1a9966c3a83caf21469b4076a31105be15595992427999e290f4823262626e&X-Amz-SignedHeaders=host&x-id=GetObject" />
+<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/d4b5f648-d99f-47cc-9ac6-986e1c32a71d/langflow_api.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T215853Z&X-Amz-Expires=3600&X-Amz-Signature=04dac9770b972cad199be655db11a8e81d293b5eba4a32b10fa680487f850650&X-Amz-SignedHeaders=host&x-id=GetObject" />
 
 
 ### Chat Widget HTML {#48f121a6cb3243979a341753da0c2700}
@@ -51,24 +48,9 @@ The **Chat Widget HTML** tab displays code that can be inserted in the `<body
 The **Langflow Chat Widget** 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.
 
 
-Easily integrate the Langflow Chat Widget into your website or web application with just a few lines of JavaScript.
-
-
-Engage your users with a user-friendly conversation, powered by Langflow's advanced language understanding capabilities.
-
-
-Customize the appearance of the chat widget to match your application's design and branding.
-
-
-Communicate with users in multiple languages, opening up your application to a global audience.
-
-
 You can get the HTML code embedded with the chat by clicking the Code button at the Sidebar after building a flow.
 
 
-[image]
-
-
 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.
 
 
@@ -81,18 +63,22 @@ Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read belo
 The Chat Widget can be embedded into any HTML page, inside a `<body>` tag, as demonstrated in the video below.
 
 
-<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/01200476-f343-41e1-8be7-059250e0ce5e/langflow_widget.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T201829Z&X-Amz-Expires=3600&X-Amz-Signature=dfe3befd022a45d4c983e2e968d66fb501289008e77562d1d47e5832b16550c0&X-Amz-SignedHeaders=host&x-id=GetObject" />
+<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/01200476-f343-41e1-8be7-059250e0ce5e/langflow_widget.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T215853Z&X-Amz-Expires=3600&X-Amz-Signature=20a6051ace6798a47ce595026a856286f81facd75ad04adae75edf0368d30c0e&X-Amz-SignedHeaders=host&x-id=GetObject" />
 
 
 ### Embed your flow with React {#fe5d3b1c42e74e4c84ebc9d1799b7665}
 
 1. To embed the Chat Widget using React, insert this `<script>` tag into the React _index.html_ file, inside the `<body>`tag:
 
-`<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>`
+```javascript
+<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
+```
 
 1. Declare your Web Component and encapsulate it in a React component.
 
-`declare global {  namespace JSX {    interface IntrinsicElements {      "langflow-chat": any;    }  }}export default function ChatWidget({ className }) {  return (    <div className={className}>      <langflow-chat        chat_inputs='{"your_key":"value"}'        chat_input_field="your_chat_key"        flow_id="your_flow_id"        host_url="langflow_url"      ></langflow-chat>    </div>  );}`
+```javascript
+declare global {  namespace JSX {    interface IntrinsicElements {      "langflow-chat": any;    }  }}export default function ChatWidget({ className }) {  return (    <div className={className}>      <langflow-chat        chat_inputs='{"your_key":"value"}'        chat_input_field="your_chat_key"        flow_id="your_flow_id"        host_url="langflow_url"      ></langflow-chat>    </div>  );}
+```
 
 1. Finally, you can place the component anywhere in your code to display the Chat Widget.
 
@@ -103,7 +89,9 @@ The Chat Widget can be embedded into any HTML page, inside a `<body>` tag, as
 
 1. To use the chat widget in Angular, first add this `<script>` tag into the Angular _index.html_ file, inside the `<body>` tag.
 
-`<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>`
+```javascript
+<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
+```
 
 1. 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`.
 2. Open the module file (it typically ends with _.module.ts_) where you'd add the `langflow-chat` web component.
@@ -113,11 +101,15 @@ The Chat Widget can be embedded into any HTML page, inside a `<body>` tag, as
 
 1. Add `CUSTOM_ELEMENTS_SCHEMA` to the 'schemas' array inside the '@NgModule' decorator:
 
-`@NgModule({  declarations: [    // ... Other components and directives ...  ],  imports: [    // ... Other imported modules ...  ],  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here})export class YourModule {}`
+```javascript
+@NgModule({  declarations: [    // ... Other components and directives ...  ],  imports: [    // ... Other imported modules ...  ],  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here})export class YourModule {}
+```
 
 1. In your Angular project, find the component belonging to the module where `CUSTOM_ELEMENTS_SCHEMA` was added. Inside the template, add the `langflow-chat` tag to include the Chat Widget in your component's view:
 
-`<langflow-chat  chat_inputs='{"your_key":"value"}'  chat_input_field="your_chat_key"  flow_id="your_flow_id"  host_url="langflow_url"></langflow-chat>`
+```javascript
+<langflow-chat  chat_inputs='{"your_key":"value"}'  chat_input_field="your_chat_key"  flow_id="your_flow_id"  host_url="langflow_url"></langflow-chat>
+```
 
 
 INFO

diff --git a/docs/docs/Workspace/workspace-playground.md b/docs/docs/Workspace/workspace-playground.md
@@ -26,7 +26,7 @@ As long as you have an [Input or Output](/components-io) component working, you
 You can also open a flow's **Playground** without entering its workspace. From **My Collections** or **Langflow Store**, click the **Playground** in one of the projects card.
 
 
-<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/80ac6543-5548-4751-94fd-ddca60c23e62/langflow_playground.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T201824Z&X-Amz-Expires=3600&X-Amz-Signature=908c018ba70edb13139cb33810343de0f12fc8e222b9dd6f05ce1f320b549979&X-Amz-SignedHeaders=host&x-id=GetObject" />
+<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/80ac6543-5548-4751-94fd-ddca60c23e62/langflow_playground.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T215851Z&X-Amz-Expires=3600&X-Amz-Signature=47ab219c1220fd83e433fd9199f597045bf9b6829313a7686dea70bd7b35afb5&X-Amz-SignedHeaders=host&x-id=GetObject" />
 
 
 ## Memory Management {#821a5ee2a8a44d35b49943cba630511c}