diff --git a/docs/docs/guidelines/widget.mdx b/docs/docs/guidelines/widget.mdx new file mode 100644 index 000000000..0176b3f95 --- /dev/null +++ b/docs/docs/guidelines/widget.mdx @@ -0,0 +1,252 @@ +import ThemedImage from "@theme/ThemedImage"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import ZoomableImage from "/src/theme/ZoomableImage.js"; +import ReactPlayer from "react-player"; + +# 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. +
+ +## Features + +🌟 __Seamless Integration:__ Easily integrate the Langflow 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. + +🎛️ __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. +
+ +
+ +
+ +
+ 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. +
+ +
+ +
+ +
+ Further down, we will explain how to use this code with HTML and React. +
+ +--- + +### HTML + +The Chat Widget can be embedded into any HTML page, inside its <body> tag. Here's a video exemplifying the process. + +
+ +
+ +--- + +### React + +To use the Chat Widget in React, first, you need to insert this <script> tag into the React index.html file, inside the <body> tag. + +```html + +``` + +Then, you need to declare your Web Component and encapsulate it in a react component. + +```jsx +declare global { + namespace JSX { + interface IntrinsicElements { + "langflow-chat": any; + } + } +} + +export default function ChatWidget({ className }) { + return ( +
+ +
+ ); +} +``` + +Finally, you can use this component anywhere in your code to show the Chat Widget. + +--- + +## Configuration + +Use the widget API to customize your widget: + +| Prop | Type | Required | +|-----------------------|-----------|----------| +| bot_message_style | json | No | +| chat_input_field | string | Yes | +| chat_inputs | json | Yes | +| chat_position | string | No | +| chat_trigger_style | json | No | +| chat_window_style | json | No | +| chat_output_key | string | No | +| error_message_style | json | No | +| flow_id | string | Yes | +| height | number | No | +| host_url | string | Yes | +| input_container_style | json | No | +| input_style | json | No | +| online | boolean | No | +| online_message | string | No | +| placeholder | string | No | +| placeholder_sending | string | No | +| send_button_style | json | No | +| send_icon_style | json | No | +| tweaks | json | No | +| user_message_style | json | No | +| width | number | No | +| window_title | string | No | + +- **bot_message_style:** + - Type: JSON + - Required: No + - Description: Styling options for formatting bot messages in the chat window. + +- **chat_input_field:** + - Type: String + - Required: Yes + - Description: Specifies the input field type for chat messages. + +- **chat_inputs:** + - Type: JSON + - Required: Yes + - Description: Defines the chat input elements and their values. + +- **chat_output_key:** + - Type: String + - Required: No + - Description: Specify which output to choose if there is more than one output. + +- **chat_position:** + - Type: String + - Required: No + - Description: Determines the position of the chat window (top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left). + +- **chat_trigger_style:** + - Type: JSON + - Required: No + - Description: Styling options for the chat trigger. + +- **chat_window_style:** + - Type: JSON + - Required: No + - Description: Styling options for the overall chat window. + +- **error_message_style:** + - Type: JSON + - Required: No + - Description: Styling options for error messages in the chat window. + +- **flow_id:** + - Type: String + - Required: Yes + - Description: Identifier for the flow associated with the component. + +- **height:** + - Type: Number + - Required: No + - Description: Specifies the height of the chat window in pixels. + +- **host_url:** + - Type: String + - Required: Yes + - Description: The URL of the host for communication with the chat component. + +- **input_container_style:** + - Type: JSON + - Required: No + - Description: Styling options for the input container where chat messages are typed. + +- **input_style:** + - Type: JSON + - Required: No + - Description: Styling options for the chat input field. + +- **Online:** + - Type: Boolean + - Required: No + - Description: Indicates if the chat component is online or offline. + +- **online_message:** + - Type: String + - Required: No + - Description: Custom message to display when the chat component is online. + +- **placeholder:** + - Type: String + - Required: No + - Description: Placeholder text for the chat input field. + +- **placeholder_sending:** + - Type: String + - Required: No + - Description: Placeholder text to display while a message is being sent. + +- **send_button_style:** + - Type: JSON + - Required: No + - Description: Styling options for the send button in the chat window. + +- **send_icon_style:** + - Type: JSON + - Required: No + - Description: Styling options for the send icon in the chat window. + +- **tweaks:** + - Type: JSON + - Required: No + - Description: Additional custom tweaks for the associated flow. + +- **user_message_style:** + - Type: JSON + - Required: No + - Description: Styling options for formatting user messages in the chat window. + +- **width:** + - Type: Number + - Required: No + - Description: Specifies the width of the chat window in pixels. + +- **window_title:** + - Type: String + - Required: No + - Description: Title for the chat window, displayed in the header or title bar. \ No newline at end of file diff --git a/docs/sidebars.js b/docs/sidebars.js index 01a84cf33..60d7be4cb 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -21,6 +21,7 @@ module.exports = { "guidelines/collection", "guidelines/prompt-customization", "guidelines/chat-interface", + "guidelines/widget", ], }, { diff --git a/docs/static/img/widget-code.png b/docs/static/img/widget-code.png new file mode 100644 index 000000000..37009c122 Binary files /dev/null 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 new file mode 100644 index 000000000..e156623f2 Binary files /dev/null and b/docs/static/img/widget-sidebar.png differ diff --git a/docs/static/videos/langflow_widget.mp4 b/docs/static/videos/langflow_widget.mp4 new file mode 100644 index 000000000..7894316f7 Binary files /dev/null and b/docs/static/videos/langflow_widget.mp4 differ