d9663bee45
- The code changes renamed the file `widget.mdx` to `chat-widget.mdx`. - The content has been modified to reflect the new name and provide a more detailed description of the Langflow Chat Widget. - The usage instructions have been updated to reflect the changes. This commit renames `widget.mdx` to `chat-widget.mdx` and provides more detailed information about the Langflow Chat Widget, including its features, usage in HTML, React, and Angular, and customization options.
200 lines
10 KiB
Text
200 lines
10 KiB
Text
import ThemedImage from "@theme/ThemedImage";
|
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|
import ReactPlayer from "react-player";
|
|
import Admonition from '@theme/Admonition';
|
|
|
|
# Chat Widget
|
|
|
|
<div style={{ marginBottom: "20px" }}>
|
|
The <b>Langflow Chat Widget</b> 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.
|
|
</div>
|
|
|
|
## Features
|
|
|
|
🌟 **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 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
|
|
|
|
<div style={{ marginBottom: "20px" }}>
|
|
You can get the HTML code embedded with the chat by clicking the Code button
|
|
at the Sidebar after building a flow.
|
|
</div>
|
|
|
|
<div
|
|
style={{ marginBottom: "20px", width: "100%", display: "flex", justifyContent: "center" }}
|
|
>
|
|
<ZoomableImage
|
|
alt="Docusaurus themed image"
|
|
sources={{
|
|
light: useBaseUrl("img/widget-sidebar.png"),
|
|
}}
|
|
style={{ width: "100%", maxWidth: "600px", margin: "0 auto" }}
|
|
/>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: "20px" }}>
|
|
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.
|
|
</div>
|
|
|
|
<div style={{ marginBottom: "20px" }}>
|
|
<ZoomableImage
|
|
alt="Docusaurus themed image"
|
|
sources={{
|
|
light: useBaseUrl("img/widget-code.png"),
|
|
}}
|
|
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
|
/>
|
|
</div>
|
|
|
|
---
|
|
|
|
### HTML
|
|
|
|
The Chat Widget can be embedded into any HTML page, inside a _`<body>`_ tag, as demonstrated in the video below.
|
|
|
|
<div
|
|
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
|
>
|
|
<ReactPlayer playing controls url="/videos/langflow_widget.mp4" />
|
|
</div>
|
|
|
|
---
|
|
|
|
### React
|
|
|
|
To embed the Chat Widget using React, you'll need to insert this _`<script>`_ tag into the React *index.html* file, inside the _`<body>`_ tag:
|
|
|
|
```html
|
|
<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
|
|
```
|
|
|
|
Then, 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 (
|
|
<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.
|
|
|
|
---
|
|
|
|
### Angular
|
|
|
|
To use it in Angular, first add this _`<script>`_ tag into the Angular *index.html* file, inside the _`<body>`_ tag.
|
|
|
|
```html
|
|
<script src="https://cdn.jsdelivr.net/gh/logspace-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.
|
|
- 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 inside the '@NgModule' decorator:
|
|
|
|
```ts
|
|
@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:
|
|
|
|
```jsx
|
|
<langflow-chat
|
|
chat_inputs='{"your_key":"value"}'
|
|
chat_input_field="your_chat_key"
|
|
flow_id="your_flow_id"
|
|
host_url="langflow_url"
|
|
></langflow-chat>
|
|
```
|
|
|
|
<Admonition type="info">
|
|
<ul>
|
|
<li>_`CUSTOM_ELEMENTS_SCHEMA`_ is a built-in schema that allows Angular to recognize custom elements.</li>
|
|
<li>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`_.</li>
|
|
<li>Notice that you can only use the Chat Widget in components that are part of the module where you added _`CUSTOM_ELEMENTS_SCHEMA`_.</li>
|
|
</ul>
|
|
</Admonition>
|
|
|
|
---
|
|
|
|
## Configuration
|
|
|
|
Use the widget API to customize your Chat Widget:
|
|
|
|
<Admonition type="caution">
|
|
Props with the type JSON need to be passed as Stringified JSONs, with the format {<span>"key":"value"</span>}.
|
|
</Admonition>
|
|
|
|
|
|
| Prop | Type | Required | Description |
|
|
| --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| bot_message_style | JSON | No | Applies custom formatting to bot messages. |
|
|
| chat_input_field | String | Yes | Defines the type of the input field for chat messages. |
|
|
| chat_inputs | JSON | Yes | Determines the chat input elements and their respective values. |
|
|
| chat_output_key | String | No | Specifies which output to display if multiple outputs are available. |
|
|
| chat_position | String | No | Positions the chat window on the screen (options include: top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left). |
|
|
| chat_trigger_style | JSON | No | Styles the chat trigger button. |
|
|
| chat_window_style | JSON | No | Customizes the overall appearance of the chat window. |
|
|
| error_message_style | JSON | No | Sets the format for error messages within the chat window. |
|
|
| flow_id | String | Yes | Identifies the flow that the component is associated with. |
|
|
| height | Number | No | Sets the height of the chat window in pixels. |
|
|
| host_url | String | Yes | Specifies the URL of the host for chat component communication. |
|
|
| input_container_style | JSON | No | Applies styling to the container where chat messages are entered. |
|
|
| input_style | JSON | No | Sets the style for the chat input field. |
|
|
| online | Boolean | No | Toggles the online status of the chat component. |
|
|
| online_message | String | No | Sets a custom message to display when the chat component is online. |
|
|
| placeholder | String | No | Sets the placeholder text for the chat input field. |
|
|
| placeholder_sending | String | No | Sets the placeholder text to display while a message is being sent. |
|
|
| send_button_style | JSON | No | Sets the style for the send button in the chat window. |
|
|
| send_icon_style | JSON | No | Sets the style for the send icon in the chat window. |
|
|
| tweaks | JSON | No | Applies additional custom adjustments for the associated flow. |
|
|
| 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. |
|