diff --git a/docs/docs/Workspace/workspace-api.md b/docs/docs/Workspace/workspace-api.md index 74cacee44..5e2237b8d 100644 --- a/docs/docs/Workspace/workspace-api.md +++ b/docs/docs/Workspace/workspace-api.md @@ -8,106 +8,73 @@ 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. - - ## Chat Widget {#48f121a6cb3243979a341753da0c2700} - --- - The **Chat Widget HTML** tab displays code that can be inserted in the `` 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 `` tag, as demonstrated in the video below. - - ### Embed your flow with React {#fe5d3b1c42e74e4c84ebc9d1799b7665} - -To embed the Chat Widget using React, insert this ` ``` - - 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 (
);} ``` - - 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 ` ``` - - 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";` @@ -118,43 +85,35 @@ 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 - + ``` - :::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"}. +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. | @@ -180,4 +139,3 @@ 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. | - diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 785576264..44822952a 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -81,7 +81,6 @@ const config = { }; }, ], - markdown: { format: "detect" }, themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({