cc70a11572* refactor-leftnav * bump-whats-new * comment-out-some-tutorials * links * guidelines * comma * starter-projects * try-links * add-new-component-location
211 lines
10 KiB
Text
211 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>
|
|
|
|
{" "}
|
|
|
|
<ZoomableImage
|
|
alt="Docusaurus themed image"
|
|
sources={{
|
|
light: useBaseUrl("img/widget-sidebar.png"),
|
|
dark: useBaseUrl("img/widget-sidebar.png"),
|
|
}}
|
|
style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
|
|
/>
|
|
|
|
<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>
|
|
|
|
{" "}
|
|
|
|
<ZoomableImage
|
|
alt="Docusaurus themed image"
|
|
sources={{
|
|
light: useBaseUrl("img/widget-code.png"),
|
|
dark: useBaseUrl("img/widget-code.png"),
|
|
}}
|
|
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
|
/>
|
|
|
|
---
|
|
|
|
### 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/langflow-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/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.
|
|
- 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. | import ThemedImage from "@theme/ThemedImage"; |
|