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>

src/backend/base/langflow/api/v1/monitor.py

@@ -1,9 +1,10 @@
 from typing import List, Optional
-
+from uuid import UUID
 from fastapi import APIRouter, Depends, HTTPException, Query
 
 from langflow.services.deps import get_monitor_service
 from langflow.services.monitor.schema import (
+    MessageModelRequest,
     MessageModelResponse,
     TransactionModelResponse,
     VertexBuildMapModel,
@@ -66,6 +67,44 @@ async def get_messages(
         raise HTTPException(status_code=500, detail=str(e))
 
 
+@router.delete("/messages", status_code=204)
+async def delete_messages(
+    message_ids: List[int],
+    monitor_service: MonitorService = Depends(get_monitor_service),
+):
+    try:
+        monitor_service.delete_messages(message_ids=message_ids)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.post("/messages/{message_id}", response_model=MessageModelResponse)
+async def update_message(
+    message_id: str,
+    message: MessageModelRequest,
+    monitor_service: MonitorService = Depends(get_monitor_service),
+):
+    try:
+        message_dict = message.model_dump(exclude_none=True)
+        message_dict.pop("index", None)
+        monitor_service.update_message(message_id=message_id, **message_dict)
+        return MessageModelResponse(index=message_id, **message_dict)
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.delete("/messages/session/{session_id}", status_code=204)
+async def delete_messages_session(
+    session_id: str,
+    monitor_service: MonitorService = Depends(get_monitor_service),
+):
+    try:
+        monitor_service.delete_messages_session(session_id=session_id)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 @router.get("/transactions", response_model=List[TransactionModelResponse])
 async def get_transactions(
     source: Optional[str] = Query(None),

src/backend/base/langflow/services/monitor/schema.py

@@ -122,6 +122,13 @@ class MessageModelResponse(MessageModel):
         return v
 
 
+class MessageModelRequest(MessageModel):
+    message: str = Field(default="")
+    sender: str = Field(default="")
+    sender_name: str = Field(default="")
+    session_id: str = Field(default="")
+
+
 class VertexBuildModel(BaseModel):
     index: Optional[int] = Field(default=None, alias="index", exclude=True)
     id: Optional[str] = Field(default=None, alias="id")

src/backend/base/langflow/services/monitor/service.py

@@ -32,6 +32,10 @@ class MonitorService(Service):
         except Exception as e:
             logger.exception(f"Error initializing monitor service: {e}")
 
+    def exec_query(self, query: str):
+        with duckdb.connect(str(self.db_path)) as conn:
+            return conn.execute(query).df()
+
     def to_df(self, table_name):
         return self.load_table_as_dataframe(table_name)
 
@@ -69,7 +73,7 @@ class MonitorService(Service):
         valid: Optional[bool] = None,
         order_by: Optional[str] = "timestamp",
     ):
-        query = "SELECT index,flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
+        query = "SELECT id, index,flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
         conditions = []
         if flow_id:
             conditions.append(f"flow_id = '{flow_id}'")
@@ -88,6 +92,8 @@ class MonitorService(Service):
         with duckdb.connect(str(self.db_path)) as conn:
             df = conn.execute(query).df()
 
+        print(query)
+
         return df.to_dict(orient="records")
 
     def delete_vertex_builds(self, flow_id: Optional[str] = None):
@@ -98,11 +104,20 @@ class MonitorService(Service):
         with duckdb.connect(str(self.db_path)) as conn:
             conn.execute(query)
 
-    def delete_messages(self, session_id: str):
+    def delete_messages_session(self, session_id: str):
         query = f"DELETE FROM messages WHERE session_id = '{session_id}'"
 
-        with duckdb.connect(str(self.db_path)) as conn:
-            conn.execute(query)
+        return self.exec_query(query)
+
+    def delete_messages(self, message_ids: list[int]):
+        query = f"DELETE FROM messages WHERE index IN ({','.join(map(str, message_ids))})"
+
+        return self.exec_query(query)
+
+    def update_message(self, message_id: int, **kwargs):
+        query = f"""UPDATE messages SET {', '.join(f"{k} = '{v}'" for k, v in kwargs.items())} WHERE index = {message_id}"""
+
+        return self.exec_query(query)
 
     def add_message(self, message: MessageModel):
         self.add_row("messages", message)