docs: update docs from notion (langflow-ai#3074)

* Update docs from Notion * feat: Add RAG (Retrieval-Augmented Generation) components documentation This commit adds documentation for RAG (Retrieval-Augmented Generation) components. It explains how these components process a user query by retrieving relevant documents and generating a concise summary that addresses the user's question. The documentation includes information about the Vectara component, its parameters, and the Vectara corpus. For more details, refer to the [Vectara documentation](https://docs.vectara.com/docs). --------- Co-authored-by: ogabrielluiz <ogabrielluiz@users.noreply.github.com> Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org> (cherry picked from commit 8f3a82e)
datastax · Aug 1, 2024 · f8a1c1c · f8a1c1c
1 parent bc9ac30
commit f8a1c1c
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 32 deletions.
diff --git a/docs/docs/Components/components-rag.md b/docs/docs/Components/components-rag.md
@@ -6,26 +6,23 @@ slug: /components-rag
 
 RAG (Retrieval-Augmented Generation) components process a user query by retrieving relevant documents and generating a concise summary that addresses the user's question.
 
-
 ### Vectara
 
+`Vectara` performs RAG using a Vectara corpus, including document retrieval, reranking results, and summary generation.
 
-   `Vectara` performs RAG using a Vectara corpus, including document retrieval, reranking results, and summary generation.
-
-
-   **Parameters:**
+**Parameters:**
 
-   - **Vectara Customer ID:** Customer ID.
-   - **Vectara Corpus ID:** Corpus ID.
-   - **Vectara API Key:** API key.
-   - **Search Query:** User query.
-   - **Lexical Interpolation:** How much to weigh lexical vs. embedding scores.
-   - **Metadata Filters:** Filters to narrow down the search documents and parts.
-   - **Reranker Type:** How to rerank the retrieved results.
-   - **Number of Results to Rerank:** Maximum reranked results.
-   - **Diversity Bias:** How much to diversify retrieved results (only for MMR reranker).
-   - **Max Results to Summarize:** Maximum search results to provide to summarizer.
-   - **Response Language:** The language code (use ISO 639-1 or 639-3 codes) of the summary.
-   - **Prompt Name:** The summarizer prompt.
+- **Vectara Customer ID:** Customer ID.
+- **Vectara Corpus ID:** Corpus ID.
+- **Vectara API Key:** API key.
+- **Search Query:** User query.
+- **Lexical Interpolation:** How much to weigh lexical vs. embedding scores.
+- **Metadata Filters:** Filters to narrow down the search documents and parts.
+- **Reranker Type:** How to rerank the retrieved results.
+- **Number of Results to Rerank:** Maximum reranked results.
+- **Diversity Bias:** How much to diversify retrieved results (only for MMR reranker).
+- **Max Results to Summarize:** Maximum search results to provide to summarizer.
+- **Response Language:** The language code (use ISO 639-1 or 639-3 codes) of the summary.
+- **Prompt Name:** The summarizer prompt.
 
-   For more information, consult the [Vectara documentation](https://docs.vectara.com/docs)
+For more information, consult the [Vectara documentation](https://docs.vectara.com/docs)
diff --git a/docs/docs/Integrations/integrations-langwatch.md b/docs/docs/Integrations/integrations-langwatch.md
@@ -17,7 +17,7 @@ To integrate with Langflow, just add your LangWatch API as a Langflow environmen
 
 ## Step-by-step Configuration {#6f1d56ff6063417491d100d522dfcf1a}
 
-1. Obtain your LangWatch API key from [https://app.langwatch.com/](https://app.langwatch.com/)
+1. Obtain your LangWatch API key from [https://app.langwatch.ai/](https://app.langwatch.ai/)
 2. Add the following key to Langflow .env file:
 
 ```shell

diff --git a/docs/docs/Settings/settings-global-variables.md b/docs/docs/Settings/settings-global-variables.md
@@ -82,10 +82,7 @@ To prevent this behavior, set `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to `false`
 
 
 
-You can specify variables to get from the environment by listing them in `LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`.
-
-
-Specify variables as a comma-separated list (e.g., _`"VARIABLE1, VARIABLE2"`_) or a JSON-encoded string (e.g., _`'["VARIABLE1", "VARIABLE2"]'`_).
+You can specify variables to get from the environment by listing them in `LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`, as a comma-separated list (e.g., _`VARIABLE1, VARIABLE2`_).
 
 
 The default list of variables includes the ones below and more:

diff --git a/docs/docs/Workspace/workspace-api.md b/docs/docs/Workspace/workspace-api.md
@@ -8,73 +8,106 @@ import ReactPlayer from "react-player";
 
 The **API** section presents code templates for integrating your flow into external applications.
 
+
 ![](./1862729633.png)
 
+
 ### cURL {#4eb287a8424349c4b0b436a6703de5f3}
 
+
 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.
 
+
 ### Python API {#fb7db14e6330418389562ef647aa2354}
 
+
 The **Python API** tab displays code to interact with your flow using the Python HTTP requests library.
 
+
 ### Python Code {#7af87438549b4972907ac310a4193067}
 
+
 The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime.
 
+
 ### Tweaks {#5680600063724590ac2302b4ddeea867}
 
+
 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://youtu.be/ISGKvHzJG8o" />
 
+
 ## Chat Widget {#48f121a6cb3243979a341753da0c2700}
 
+
 ---
 
+
 The **Chat Widget HTML** tab displays code that can be inserted in the `<body>` of your HTML to interact with your flow.
 
+
 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.
 
+
 You can get the HTML code embedded with the chat by clicking the Code button at the Sidebar after building a flow.
 
+
 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.
 
+
 ![](./566212295.png)
 
+
 ### Embed your flow into HTML {#6e84db2f2a0d451db6fa03c57e9bf9a4}
 
+
 The Chat Widget can be embedded into any HTML page, inside a `<body>` tag, as demonstrated in the video below.
 
+
 <ReactPlayer controls url="https://youtu.be/cVpNc-osfxQ" />
 
+
 ### Embed your flow with React {#fe5d3b1c42e74e4c84ebc9d1799b7665}
 
-To embed the Chat Widget using React, insert this `<script>` tag into the React *index.html* file, inside the `<body>`tag:
+
+To embed the Chat Widget using React, insert this `<script>` tag into the React _index.html_ file, inside the `<body>`tag:
+
 
 ```javascript
 <script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
 ```
 
+
+
 Declare your Web Component and encapsulate it in a React component.
 
+
 ```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>  );}
 ```
 
+
+
 Finally, you can place the component anywhere in your code to display the Chat Widget.
 
+
 ### Embed your flow with Angular {#4fd87355b9aa409894acfbb9e1497980}
 
-To use the chat widget in Angular, first add this `<script>` tag into the Angular *index.html* file, inside the `<body>` tag.
+
+To use the chat widget in Angular, first add this `<script>` tag into the Angular _index.html_ file, inside the `<body>` tag.
+
 
 ```javascript
 <script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
 ```
 
+
+
 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:
 
 `import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";`
@@ -85,35 +118,43 @@ When you use a custom web component in an Angular template, the Angular compiler
 @NgModule({  declarations: [    // ... Other components and directives ...  ],  imports: [    // ... Other imported modules ...  ],  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here})export class YourModule {}
 ```
 
+
+
 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:
 
+
 ```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>
+<langflow-chat  chat_inputs='{"your_key":"value"}'  chat_input_field="your_chat_key"  flow_id="your_flow_id"  host_url="langflow_url"></langflow-chat>
 ```
 
+
 :::tip
 
 `CUSTOM_ELEMENTS_SCHEMA` is a built-in schema that allows Angular to recognize custom elements. 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`. Notice that you can only use the Chat Widget in components that are part of the module where you added `CUSTOM_ELEMENTS_SCHEMA`.
 
 :::
 
+
+
+
 ## Chat Widget Configuration {#5ede4bbbd2ac43e29c90f3edb43cba58}
 
+
 ---
 
+
 Use the widget API to customize your Chat Widget:
 
+
 :::caution
 
 Props with the type JSON need to be passed as stringified JSONs, with the format \{"key":"value"\}.
 
 :::
 
+
+
+
 | Prop                  | Type    | Required | Description                                                                                                                                                      |
 | --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | bot_message_style     | JSON    | No       | Applies custom formatting to bot messages.                                                                                                                       |
@@ -139,3 +180,4 @@ Props with the type JSON need to be passed as stringified JSONs, with the format
 | user_message_style    | JSON    | No       | Determines the formatting for user messages in the chat window.                                                                                                  |
 | width                 | Number  | No       | Sets the width of the chat window in pixels.                                                                                                                     |
 | window_title          | String  | No       | Sets the title displayed in the chat window's header or title bar.                                                                                               |
+