style-edits
This commit is contained in:
parent
ef1f647b66
commit
71a22b9a0f
5 changed files with 18 additions and 27 deletions
|
|
@ -61,7 +61,7 @@ import Admonition from "@theme/Admonition";
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### HTML
|
### Embed your flow into HTML
|
||||||
|
|
||||||
The Chat Widget can be embedded into any HTML page, inside a _`<body>`_ tag, as demonstrated in the video below.
|
The Chat Widget can be embedded into any HTML page, inside a _`<body>`_ tag, as demonstrated in the video below.
|
||||||
|
|
||||||
|
|
@ -73,15 +73,15 @@ The Chat Widget can be embedded into any HTML page, inside a _`<body>`_ tag, as
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### React
|
### Embed your flow with 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:
|
1. To embed the Chat Widget using React, insert this _`<script>`_ tag into the React _index.html_ file, inside the _`<body>`_ tag:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
|
<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.
|
2. Declare your Web Component and encapsulate it in a React component.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
declare global {
|
declare global {
|
||||||
|
|
@ -106,28 +106,27 @@ export default function ChatWidget({ className }) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Finally, you can place the component anywhere in your code to display the Chat Widget.
|
3. Finally, you can place the component anywhere in your code to display the Chat Widget.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Angular
|
### Embed your flow with Angular
|
||||||
|
|
||||||
To use it in Angular, first add this _`<script>`_ tag into the Angular _index.html_ file, inside the _`<body>`_ tag.
|
1. To use the chat widget in Angular, first add this _`<script>`_ tag into the Angular _index.html_ file, inside the _`<body>`_ tag.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
|
<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`_.
|
2. 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`_.
|
||||||
|
3. 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.
|
4. Import _`CUSTOM_ELEMENTS_SCHEMA`_ at the top of the file:
|
||||||
- Import _`CUSTOM_ELEMENTS_SCHEMA`_ at the top of the file:
|
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
|
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
|
||||||
```
|
```
|
||||||
|
|
||||||
- Add _`CUSTOM_ELEMENTS_SCHEMA`_ to the 'schemas' array inside the '@NgModule' decorator:
|
5. Add _`CUSTOM_ELEMENTS_SCHEMA`_ to the 'schemas' array inside the '@NgModule' decorator:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
@ -142,9 +141,7 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
|
||||||
export class YourModule {}
|
export class YourModule {}
|
||||||
```
|
```
|
||||||
|
|
||||||
In your Angular project, find the component belonging to the module where _`CUSTOM_ELEMENTS_SCHEMA`_ was added.
|
6. 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
|
```jsx
|
||||||
<langflow-chat
|
<langflow-chat
|
||||||
|
|
@ -175,7 +172,7 @@ In your Angular project, find the component belonging to the module where _`CUST
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Configuration
|
## Chat widget configuration
|
||||||
|
|
||||||
Use the widget API to customize your Chat Widget:
|
Use the widget API to customize your Chat Widget:
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -127,7 +127,7 @@ python -m langflow run
|
||||||
| `--backend-only` | This parameter, with a default value of `False`, allows running only the backend server without the frontend. It can also be set using the `LANGFLOW_BACKEND_ONLY` environment variable. For more, see [Backend-only](../deployment/backend-only.md).|
|
| `--backend-only` | This parameter, with a default value of `False`, allows running only the backend server without the frontend. It can also be set using the `LANGFLOW_BACKEND_ONLY` environment variable. For more, see [Backend-only](../deployment/backend-only.md).|
|
||||||
| `--store` | This parameter, with a default value of `True`, enables the store features, use `--no-store` to deactivate it. It can be configured using the `LANGFLOW_STORE` environment variable. |
|
| `--store` | This parameter, with a default value of `True`, enables the store features, use `--no-store` to deactivate it. It can be configured using the `LANGFLOW_STORE` environment variable. |
|
||||||
|
|
||||||
#### Environment Variables
|
#### CLI environment variables
|
||||||
|
|
||||||
You can configure many of the CLI options using environment variables. These can be exported in your operating system or added to a `.env` file and loaded using the `--env-file` option.
|
You can configure many of the CLI options using environment variables. These can be exported in your operating system or added to a `.env` file and loaded using the `--env-file` option.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -98,8 +98,6 @@ The default list of variables includes:
|
||||||
- VECTARA_CORPUS_ID
|
- VECTARA_CORPUS_ID
|
||||||
- VECTARA_API_KEY
|
- VECTARA_API_KEY
|
||||||
|
|
||||||
## Video
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,9 @@ import Admonition from "@theme/Admonition";
|
||||||
|
|
||||||
# Sign Up and Sign In
|
# Sign Up and Sign In
|
||||||
|
|
||||||
## Introduction
|
|
||||||
|
|
||||||
The login functionality in Langflow serves to authenticate users and protect sensitive routes in the application. Starting from version 0.5, Langflow introduces an enhanced login mechanism that is governed by a few environment variables. This allows new secure features.
|
The login functionality in Langflow serves to authenticate users and protect sensitive routes in the application. Starting from version 0.5, Langflow introduces an enhanced login mechanism that is governed by a few environment variables. This allows new secure features.
|
||||||
|
|
||||||
## Environment Variables
|
## Environment variables
|
||||||
|
|
||||||
The following environment variables are crucial in configuring the login settings:
|
The following environment variables are crucial in configuring the login settings:
|
||||||
|
|
||||||
|
|
@ -68,7 +66,7 @@ export LANGFLOW_SECRET_KEY=randomly_generated_secure_key
|
||||||
|
|
||||||
By default, this variable is set to `False`. When enabled (`True`), new users are automatically activated and can log in without requiring explicit activation by the superuser.
|
By default, this variable is set to `False`. When enabled (`True`), new users are automatically activated and can log in without requiring explicit activation by the superuser.
|
||||||
|
|
||||||
## Command-Line Interface
|
## Manage superusers with the CLI
|
||||||
|
|
||||||
Langflow provides a command-line utility for managing superusers:
|
Langflow provides a command-line utility for managing superusers:
|
||||||
|
|
||||||
|
|
@ -78,7 +76,7 @@ langflow superuser
|
||||||
|
|
||||||
This command prompts you to enter the username and password for the superuser, unless they are already set using environment variables.
|
This command prompts you to enter the username and password for the superuser, unless they are already set using environment variables.
|
||||||
|
|
||||||
## Sign-up
|
## Sign in
|
||||||
|
|
||||||
With _`LANGFLOW_AUTO_LOGIN`_ set to _`False`_, Langflow requires users to sign up before they can log in. The sign-up page is the default landing page when a user visits Langflow for the first time.
|
With _`LANGFLOW_AUTO_LOGIN`_ set to _`False`_, Langflow requires users to sign up before they can log in. The sign-up page is the default landing page when a user visits Langflow for the first time.
|
||||||
|
|
||||||
|
|
@ -93,7 +91,7 @@ With _`LANGFLOW_AUTO_LOGIN`_ set to _`False`_, Langflow requires users to sign u
|
||||||
|
|
||||||
## Profile settings
|
## Profile settings
|
||||||
|
|
||||||
You can change your profile settings by clicking on the profile icon in the top right corner of the Langflow dashboard. This opens a dropdown menu with the following options:
|
Once signed in, you can change your profile settings by clicking on the profile icon in the top right corner of the Langflow dashboard. This opens a dropdown menu with the following options:
|
||||||
|
|
||||||
- **Admin Page**: Opens the admin page, which is only accessible to the superuser.
|
- **Admin Page**: Opens the admin page, which is only accessible to the superuser.
|
||||||
- **Profile Settings**: Opens the profile settings page.
|
- **Profile Settings**: Opens the profile settings page.
|
||||||
|
|
|
||||||
|
|
@ -28,8 +28,6 @@ As long as you have a flow's environment variables set, you can run it by clicki
|
||||||
|
|
||||||
2. Chat with your bot as you normally would, all without having to open the editor.
|
2. Chat with your bot as you normally would, all without having to open the editor.
|
||||||
|
|
||||||
## Video
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue