Refactor SettingsPage component and add Messages page (#2084)

* Feat: Create the first version of the eraser tool

* feat: Add Messages page to SettingsPage

Refactor the SettingsPage component to include a new "Messages" page. This page will be accessible through the "/settings/messages" route and will display messages related to user settings. The necessary changes have been made to the index.tsx file of the SettingsPage component and the routes.tsx file.

* refactor(tableComponent): update column definitions to include checkbox selection logic for first column

feat(API): add support for excluding specific columns in getMessagesTable function

fix(flowLogsModal): pass excludedFields parameter to getMessagesTable function

refactor(GlobalVariablesPage): remove unnecessary checkbox selection properties from column definitions

fix(messagesPage): pass excludedFields parameter to getMessagesTable function

refactor(utils): add support for excluding specific columns in extractColumnsFromRows function

* feat: Add API endpoints for managing messages

This commit adds new API endpoints for managing messages. It includes the ability to delete messages by their IDs, update a specific message, and delete all messages associated with a session. These changes are implemented in the `monitor.py`, `schema.py`, and `service.py` files.

*  (monitor.py): add MessageIds schema for structured message deletion
♻️ (monitor.py): change delete_messages endpoint to POST for better semantics
♻️ (monitor.py): update delete_messages to use MessageIds schema
 (schemas.py): add MessageIds schema for structured message deletion
🐛 (service.py): fix SQL query in delete_messages to use correct column name
 (index.tsx): add toTitleCase utility to format column headers
 (API/index.ts): add deleteMessagesFn to handle message deletion via API
 (headerMessages): add HeaderMessagesComponent for message management UI
 (use-messages-table): add useMessagesTable hook to fetch and manage messages
 (use-remove-messages): add useRemoveMessages hook to handle message deletion

♻️ (messagesPage): refactor messages page to use new messages store
 (messagesStore): create zustand store for managing messages state
 (types): add types for messages and zustand messages store

* 💡 (schemas.py): add newline at end of file to follow PEP 8 guidelines

* refactor(headerMessages): update text content in HeaderMessagesComponent

* move editable attribute to table Component

* refactor: Move editable attribute to TableComponent
add update function, need to fix backend

* ♻️ (monitor.py): change POST to DELETE for delete_messages endpoint
♻️ (schemas.py): remove unused MessageIds schema
♻️ (api.tsx): add missing commas in ApiInterceptor function
🐛 (api.tsx): fix duplicate request check to include method "get"
♻️ (index.ts): change deleteMessagesFn to use DELETE method instead of POST
♻️ (use-remove-messages.tsx): clean up comments and improve error handling

* start history in playgroundModal

* ♻️ (monitor.py): refactor update_message to return MessageModelResponse
♻️ (service.py): update SQL query to use index instead of id
♻️ (api.tsx): refactor duplicate request check logic
 (check-duplicate-requests.ts): add helper to check and store duplicate requests
🐛 (messagesStore.ts): fix message update logic to use index instead of id

* ♻️ (monitor.py, service.py): remove trailing whitespace to improve code cleanliness

* refactor: Add getSessions function to fetch available sessions in IOModal

* 🐛 (service.py): add missing 'id' column in SQL query to fix data retrieval issue
💡 (service.py): add print statement for debugging SQL query
♻️ (index.tsx): reorder imports for better readability and maintainability

♻️ (flowStore.ts): remove trailing commas to improve code consistency and readability

💡 (index.ts, storeUtils.ts): format type definitions for better readability

* update editable fields

* Feat: Make the table last column non-resizable and add a restore columns button

* Remove unnused imports

* Refactor: Remove “Page size” from table pagination

* Refactor: remove page size directly in css file

* chore: Update description text in SettingsPage

* Refactor: Add ResetColumns component to improve table functionality

* Refactor: Make Reset Column button reset columns order

* Refactor: Remove select from delete session button

* Refactor: Remove commented code for chat history tab in IOModal

* update route

* fix selection bug on Messages Table

* fix libs

---------

Co-authored-by: igorrCarvalho <igorsilvabhz6@gmail.com>
Co-authored-by: ogabrielluiz <gabriel@langflow.org>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: italojohnny <italojohnnydosanjos@gmail.com>
This commit is contained in:
anovazzi1 2024-06-05 20:37:38 -03:00 committed by GitHub
commit 4236d22098
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
69 changed files with 1433 additions and 758 deletions

View file

@ -17,7 +17,6 @@ Global Variables are a useful feature of Langflow, allowing you to define reusab
- All Credential Global Variables are encrypted and accessible only by you.
- Set _`LANGFLOW_STORE_ENVIRONMENT_VARIABLES`_ to _`true`_ in your `.env` file to add all variables in _`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`_ to your user's Global Variables.
## Creating and Adding a Global Variable
To create and add a global variable, click the 🌐 button in a Text field, and then click **+ Add New Variable**.
@ -25,18 +24,20 @@ To create and add a global variable, click the 🌐 button in a Text field, and
Text fields are where you write text without opening a Text area, and are identified with the 🌐 icon.
For example, to create an environment variable for the **OpenAI** component:
1. In the **OpenAI API Key** text field, click the 🌐 button, then **Add New Variable**.
2. Enter `openai_api_key` in the **Variable Name** field.
3. Paste your OpenAI API Key (`sk-...`) in the **Value** field.
4. Select **Credential** for the **Type**.
5. Choose **OpenAI API Key** in the **Apply to Fields** field to apply this variable to all fields named **OpenAI API Key**.
6. Click **Save Variable**.
1. In the **OpenAI API Key** text field, click the 🌐 button, then **Add New Variable**.
2. Enter `openai_api_key` in the **Variable Name** field.
3. Paste your OpenAI API Key (`sk-...`) in the **Value** field.
4. Select **Credential** for the **Type**.
5. Choose **OpenAI API Key** in the **Apply to Fields** field to apply this variable to all fields named **OpenAI API Key**.
6. Click **Save Variable**.
You now have a `openai_api_key` global environment variable for your Langflow project.
Subsequently, clicking the 🌐 button in a Text field will display the new variable in the dropdown.
<Admonition type="tip">
You can also create global variables in **Settings** > **Variables and Secrets**.
You can also create global variables in **Settings** > **Variables and
Secrets**.
</Admonition>
<ZoomableImage
@ -65,7 +66,8 @@ Setting `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to `true` in your `.env` file (de
These variables are accessible like any other Global Variable.
<Admonition type="tip">
To prevent this behavior, set `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to `false` in your `.env` file.
To prevent this behavior, set `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to
`false` in your `.env` file.
</Admonition>
You can specify variables to get from the environment by listing them in `LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`.

View file

@ -1,4 +1,4 @@
import Admonition from '@theme/Admonition';
import Admonition from "@theme/Admonition";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# Inputs and Outputs
@ -29,9 +29,8 @@ This component collects user input from the chat.
<Admonition type="note" title="Note">
<p>
If `As Record` is `true` and the `Message` is a `Record`, the data
of the `Record` will be updated with the `Sender`, `Sender Name`, and
`Session ID`.
If `As Record` is `true` and the `Message` is a `Record`, the data of the
`Record` will be updated with the `Sender`, `Sender Name`, and `Session ID`.
</p>
</Admonition>
@ -112,9 +111,10 @@ This component sends a message to the chat.
- **Message:** Specifies the text of the message.
<Admonition type="note" title="Note">
<p>
If `As Record` is `true` and the `Message` is a `Record`, the data in the `Record` is updated with the `Sender`, `Sender Name`, and `Session ID`.
</p>
<p>
If `As Record` is `true` and the `Message` is a `Record`, the data in the
`Record` is updated with the `Sender`, `Sender Name`, and `Session ID`.
</p>
</Admonition>
### Text Output
@ -125,7 +125,6 @@ This component displays text data to the user. It is useful when you want to sho
- **Value:** Specifies the text data to be displayed. Defaults to an empty string.
The `TextOutput` component provides a simple way to display text data. It allows textual data to be visible in the chat window during your interaction flow.
## Prompts
@ -155,7 +154,8 @@ The `PromptTemplate` component enables users to create prompts and define variab
<Admonition type="info">
After defining a variable in the prompt template, it acts as its own component
input. See [Prompt Customization](../administration/prompt-customization) for more details.
input. See [Prompt Customization](../administration/prompt-customization) for
more details.
</Admonition>
- **template:** The template used to format an individual request.
- **template:** The template used to format an individual request.

View file

@ -2,7 +2,7 @@
In Langflow 1.0, we added two main input and output types: `Text` and `Record`.
`Text` is a simple string input and output type, while ``Record`` is a structure very similar to a dictionary in Python. It is a key-value pair data structure.
`Text` is a simple string input and output type, while `Record` is a structure very similar to a dictionary in Python. It is a key-value pair data structure.
We've created a few components to help you work with these types. Let's see how a few of them work.