style-edits
This commit is contained in:
Mendon Kissling
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.
|
||||
|
||||
|
|
@ -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
|
||||
<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
|
||||
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
|
||||
<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:
|
||||
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.
|
||||
4. 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:
|
||||
5. Add _`CUSTOM_ELEMENTS_SCHEMA`_ to the 'schemas' array inside the '@NgModule' decorator:
|
||||
|
||||
```ts
|
||||
@NgModule({
|
||||
|
|
@ -142,9 +141,7 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
|
|||
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:
|
||||
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:
|
||||
|
||||
```jsx
|
||||
<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:
|
||||
|
||||
|
|
|
|||
|
|
@ -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).|
|
||||
| `--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.
|
||||
|
||||
|
|
|
|||
|
|
@ -98,8 +98,6 @@ The default list of variables includes:
|
|||
- VECTARA_CORPUS_ID
|
||||
- VECTARA_API_KEY
|
||||
|
||||
## Video
|
||||
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,9 @@ import Admonition from "@theme/Admonition";
|
|||
|
||||
# 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.
|
||||
|
||||
## Environment Variables
|
||||
## Environment variables
|
||||
|
||||
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.
|
||||
|
||||
## Command-Line Interface
|
||||
## Manage superusers with the CLI
|
||||
|
||||
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.
|
||||
|
||||
## 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.
|
||||
|
||||
|
|
@ -93,7 +91,7 @@ With _`LANGFLOW_AUTO_LOGIN`_ set to _`False`_, Langflow requires users to sign u
|
|||
|
||||
## 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.
|
||||
- **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.
|
||||
|
||||
## Video
|
||||
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue