diff --git a/docs/docs/guidelines/widget.mdx b/docs/docs/guidelines/chat-widget.mdx similarity index 74% rename from docs/docs/guidelines/widget.mdx rename to docs/docs/guidelines/chat-widget.mdx index 454b54534..e515e4e94 100644 --- a/docs/docs/guidelines/widget.mdx +++ b/docs/docs/guidelines/chat-widget.mdx @@ -7,44 +7,45 @@ import Admonition from '@theme/Admonition'; # Chat Widget
- The Langflow Embedded Chat is a powerful web component that enables - seamless communication with Langflow. This widget provides a{" "} - chat interface, allowing you to integrate Langflow into your web - applications effortlessly. + 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.
## Features -🌟 **Seamless Integration:** Easily integrate the Langflow Widget into your website or web application with just a few lines of JavaScript. +🌟 **Seamless Integration:** Easily integrate the Langflow Chat Widget into your website or web application with just a few lines of JavaScript. -🚀 **Interactive Chat Interface:** Engage your users with a user-friendly chat interface, powered by Langflow's advanced language understanding capabilities. +🚀 **Interactive Chat Interface:** Engage your users with a user-friendly conversation, powered by Langflow's advanced language understanding capabilities. 🎛️ **Customizable Styling:** Customize the appearance of the chat widget to match your application's design and branding. 🌐 **Multilingual Support:** Communicate with users in multiple languages, opening up your application to a global audience. +--- + ## Usage
- You can get the HTML code to embed the chat by clicking the Code button - at the Sidebar after you build the flow. + You can get the HTML code embedded with the chat by clicking the Code button + at the Sidebar after building a flow.
- After clicking the Chat Widget HTML tab, you get the code that needs to be - inserted anywhere in the <body> tag of any HTML page. + 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.
@@ -57,15 +58,11 @@ import Admonition from '@theme/Admonition'; />
-
- Further down, we will explain how to use this code with HTML, React and Angular. -
- --- ### HTML -The Chat Widget can be embedded into any HTML page, inside its <body> tag. Here's a video exemplifying the process. +The Chat Widget can be embedded into any HTML page, inside a _``_ tag, as demonstrated in the video below.
`_ tag into the React *index.html* file, inside the _``_ tag: ```html ``` -Then, you need to declare your Web Component and encapsulate it in a react component. +Then, declare your Web Component and encapsulate it in a React component. ```jsx declare global { @@ -108,28 +105,28 @@ export default function ChatWidget({ className }) { } ``` -Finally, you can use this component anywhere in your code to show the Chat Widget. +Finally, you can place the component anywhere in your code to display the Chat Widget. --- ### Angular -To use the Chat Widget in Angular, first, you need to insert this <script> tag into the Angular index.html file, inside the <body> tag. +To use it in Angular, first add this _` ``` -When you use a custom web component in an Angular template, the Angular compiler might show a warning because it doesn't recognize the custom elements by default. To suppress this warning, you can add the 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of the module. +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 (usually ends with .module.ts) where you use the 'langflow-chat' web component. -- Import 'CUSTOM_ELEMENTS_SCHEMA' at the top of the file: +- 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: ```ts import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; ``` -- Add 'CUSTOM_ELEMENTS_SCHEMA' to the 'schemas' array within the '@NgModule' decorator: +- Add _`CUSTOM_ELEMENTS_SCHEMA`_ to the 'schemas' array inside the '@NgModule' decorator: ```ts @NgModule({ @@ -144,9 +141,9 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; export class YourModule {} ``` -In your Angular project, locate the component that belongs to the module where you added the 'CUSTOM_ELEMENTS_SCHEMA'. +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: +- Inside the template, add the _`langflow-chat`_ tag to include the Chat Widget in your component's view: ```jsx - - -You now have the flexibility to utilize the Chat Widget seamlessly in any Angular application. - --- ## Configuration -Use the widget API to customize your widget: +Use the widget API to customize your Chat Widget: Props with the type JSON need to be passed as Stringified JSONs, with the format {"key":"value"}. diff --git a/docs/sidebars.js b/docs/sidebars.js index 60d7be4cb..94ecc918e 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -21,7 +21,7 @@ module.exports = { "guidelines/collection", "guidelines/prompt-customization", "guidelines/chat-interface", - "guidelines/widget", + "guidelines/chat-widget", ], }, { diff --git a/docs/static/img/widget-code.png b/docs/static/img/widget-code.png index 37009c122..389945a58 100644 Binary files a/docs/static/img/widget-code.png and b/docs/static/img/widget-code.png differ diff --git a/docs/static/img/widget-sidebar.png b/docs/static/img/widget-sidebar.png index e156623f2..a3e818216 100644 Binary files a/docs/static/img/widget-sidebar.png and b/docs/static/img/widget-sidebar.png differ