jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

✨ (tableComponent): add editable prop to TableComponent for column editing

Browse source 
✨ (API): add updateMessageApi function to update messages via API
✨ (chatView): add select dropdown for clearing builds and sessions
♻️ (use-messages-table): refactor to use messages store for setting messages
♻️ (use-remove-messages): remove setRows and use messages store for deletion
✨ (use-updateMessage): add hook for updating messages with API integration
📝 (headerMessages): update header message text in messages page

✨ (messagesPage): add cell edit request handling for message updates
♻️ (messagesPage): refactor state management and hooks usage
✨ (types): add new types for chat and message handling
This commit is contained in:
cristhianzl 2024-06-03 10:31:46 -03:00
commit 93568b4c0d
12 changed files with 161 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/backend/base/langflow/api/v1/schemas.py
View file

@ -321,4 +321,3 @@ class FlowDataRequest(BaseModel):
class ConfigResponse(BaseModel):
frontend_timeout: int

24
src/frontend/src/components/tableComponent/index.tsx
View file

@ -17,6 +17,7 @@ interface TableComponentProps extends AgGridReactProps {
rowData: NonNullable<AgGridReactProps["rowData"]>;
alertTitle?: string;
alertDescription?: string;
editable?: boolean | string[];
}
const TableComponent = forwardRef<
@ -48,20 +49,29 @@ const TableComponent = forwardRef<
}
const colDef = props.columnDefs.map((col, index) => {
let newCol = {
...col,
headerName: toTitleCase(col.headerName),
};
if (props.onSelectionChanged && index === 0) {
return {
...col,
headerName: toTitleCase(col.headerName),
newCol = {
...newCol,
checkboxSelection: true,
headerCheckboxSelection: true,
headerCheckboxSelectionFilteredOnly: true,
};
} else {
return {
...col,
headerName: toTitleCase(col.headerName),
}
if (
(typeof props.editable === "boolean" && props.editable) ||
(Array.isArray(props.editable) &&
props.editable.includes(newCol.headerName ?? ""))
) {
newCol = {
...newCol,
editable: true,
};
}
return newCol;
});
return (

5
src/frontend/src/controllers/API/index.ts
View file

@ -28,6 +28,7 @@ import {
UploadFileTypeAPI,
errorsTypeAPI,
} from "./../../types/api/index";
import { Message } from "../../types/messages";
/**
* Fetches all objects from the API endpoint.
@ -1049,3 +1050,7 @@ export async function deleteMessagesFn(ids: number[]) {
throw error;
}
}
export async function updateMessageApi(data: Message) {
return await api.post(`${BASE_URL_API}monitor/messages/${data.index}`, data);
}

69
src/frontend/src/modals/IOModal/components/chatView/index.tsx
View file

@ -18,6 +18,12 @@ import { chatViewProps } from "../../../../types/components";
import { classNames } from "../../../../utils/utils";
import ChatInput from "./chatInput";
import ChatMessage from "./chatMessage";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
} from "../../../../components/ui/select";
export default function ChatView({
sendMessage,
@ -118,10 +124,21 @@ export default function ChatView({
if (lockChat) setLockChat(false);
}
function handleSelectChange(event: string): void {
switch (event) {
case "builds":
clearChat();
break;
case "buildsNSession":
console.log("delete build and session");
break;
}
}
function updateChat(
chat: ChatMessageType,
message: string,
stream_url?: string
stream_url?: string,
) {
// if (message === "") return;
chat.message = message;
@ -149,18 +166,44 @@ export default function ChatView({
<div className="eraser-column-arrangement">
<div className="eraser-size">
<div className="eraser-position">
<button disabled={lockChat} onClick={() => clearChat()}>
<IconComponent
name="Eraser"
className={classNames(
"h-5 w-5",
lockChat
? "animate-pulse text-primary"
: "text-primary hover:text-gray-600"
)}
aria-hidden="true"
/>
</button>
<Select
onValueChange={handleSelectChange}
value=""
disabled={lockChat}
>
<SelectTrigger className="">
<button className="flex gap-1">
<IconComponent
name="Eraser"
className={classNames(
"h-5 w-5 transition-all duration-100",
lockChat ? "animate-pulse text-primary" : "text-primary",
)}
aria-hidden="true"
/>
</button>
</SelectTrigger>
<SelectContent className="right-[9.5em]">
<SelectItem value="builds" className="cursor-pointer">
<div className="flex">
<IconComponent
name={"Trash2"}
className={`relative top-0.5 mr-2 h-4 w-4`}
/>
<span className="">Clear Builds</span>
</div>
</SelectItem>
<SelectItem value="buildsNSession" className="cursor-pointer">
<div className="flex">
<IconComponent
name={"Trash2"}
className={`relative top-0.5 mr-2 h-4 w-4`}
/>
<span className="">Clear Builds & Session</span>
</div>
</SelectItem>
</SelectContent>
</Select>
</div>
<div ref={messagesRef} className="chat-message-div">
{chatHistory?.length > 0 ? (

4
src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx
View file

@ -21,9 +21,7 @@ const HeaderMessagesComponent = ({
className="ml-2 h-5 w-5 text-primary"
/>
</h2>
<p className="text-sm text-muted-foreground">
Manage your messages as you like.
</p>
<p className="text-sm text-muted-foreground">@Rodrigo</p>
</div>
<div className="flex flex-shrink-0 items-center gap-2">
<Button

7
src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx
View file

@ -1,14 +1,15 @@
import { useEffect } from "react";
import { getMessagesTable } from "../../../../../controllers/API";
import { useMessagesStore } from "../../../../../stores/messagesStore";
const useMessagesTable = (setColumns, setRows, setMessages) => {
const useMessagesTable = (setColumns) => {
const setMessages = useMessagesStore((state) => state.setMessages);
useEffect(() => {
const fetchData = async () => {
try {
const data = await getMessagesTable("union", undefined, ["index"]);
const { columns, rows } = data;
setColumns(columns.map((col) => ({ ...col, editable: true })));
setRows(rows);
setColumns(columns);
setMessages(rows);
} catch (error) {
console.error("Error fetching messages:", error);

6
src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
View file

@ -2,19 +2,17 @@ import { deleteMessagesFn } from "../../../../../controllers/API";
import { useMessagesStore } from "../../../../../stores/messagesStore";
const useRemoveMessages = (
setRows,
setSelectedRows,
setSuccessData,
setErrorData,
selectedRows,
selectedRows
) => {
const deleteMessages = useMessagesStore((state) => state.removeMessages);
const handleRemoveMessages = async () => {
try {
await deleteMessagesFn(selectedRows);
const res = await deleteMessages(selectedRows);
setRows(res);
deleteMessages(selectedRows);
setSelectedRows([]);
setSuccessData({
title: "Messages deleted successfully.",

29
src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx Normal file
View file

@ -0,0 +1,29 @@
import { useMessagesStore } from "../../../../../stores/messagesStore";
import { Message } from "../../../../../types/messages";
import { updateMessageApi } from "../../../../../controllers/API";
const useUpdateMessage = (setSuccessData, setErrorData) => {
const updateMessage = useMessagesStore((state) => state.updateMessage);
const handleUpdate = async (data: Message) => {
try {
await updateMessageApi(data);
updateMessage(data);
// Set success message
setSuccessData({
title: "Messages updated successfully.",
});
} catch (error) {
// Set error message
setErrorData({
title: "Error updating messages.",
});
}
};
return { handleUpdate };
};
export default useUpdateMessage;

35
src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
View file

@ -1,4 +1,9 @@
import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
import {
CellEditRequestEvent,
ColDef,
ColGroupDef,
SelectionChangedEvent,
} from "ag-grid-community";
import { useState } from "react";
import TableComponent from "../../../../components/tableComponent";
import { Card, CardContent } from "../../../../components/ui/card";
@ -7,12 +12,11 @@ import { useMessagesStore } from "../../../../stores/messagesStore";
import HeaderMessagesComponent from "./components/headerMessages";
import useMessagesTable from "./hooks/use-messages-table";
import useRemoveMessages from "./hooks/use-remove-messages";
import useUpdateMessage from "./hooks/use-updateMessage";
export default function MessagesPage() {
const setMessages = useMessagesStore((state) => state.setMessages);
const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);
const [rows, setRows] = useState<any>([]);
const messages = useMessagesStore((state) => state.messages);
const setErrorData = useAlertStore((state) => state.setErrorData);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -20,14 +24,26 @@ export default function MessagesPage() {
const [selectedRows, setSelectedRows] = useState<number[]>([]);
const { handleRemoveMessages } = useRemoveMessages(
setRows,
setSelectedRows,
setSuccessData,
setErrorData,
selectedRows,
);
useMessagesTable(setColumns, setRows, setMessages);
const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);
useMessagesTable(setColumns);
function handleUpdateMessage(event: CellEditRequestEvent<any, string>) {
const newValue = event.newValue;
const field = event.column.getColId();
const row = event.data;
const data = {
...row,
[field]: newValue,
};
handleUpdate(data);
}
return (
<div className="flex h-full w-full flex-col justify-between gap-6">
@ -40,6 +56,11 @@ export default function MessagesPage() {
<Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
<CardContent className="h-full">
<TableComponent
readOnlyEdit
onCellEditRequest={(event) => {
handleUpdateMessage(event);
}}
editable={["Sender", "Sender Name", "Message"]}
overlayNoRowsTemplate="No data available"
onSelectionChanged={(event: SelectionChangedEvent) => {
setSelectedRows(
@ -50,7 +71,7 @@ export default function MessagesPage() {
suppressRowClickSelection={true}
pagination={true}
columnDefs={columns}
rowData={rows}
rowData={messages}
/>
</CardContent>
</Card>

14
src/frontend/src/types/components/index.ts
View file

@ -752,3 +752,17 @@ export type toolbarSelectItemProps = {
dataTestId: string;
ping?: boolean;
};
export type clearChatPropsType = {
lockChat: boolean;
setLockChat: (lock: boolean) => void;
setChatHistory: (chatHistory: ChatMessageType) => void;
method: string;
};
export type handleSelectPropsType = {
event: string;
lockChat: boolean;
setLockChat: (lock: boolean) => void;
setChatHistory: (chatHistory: ChatMessageType) => void;
};

2
src/frontend/src/types/messages/index.ts
View file

@ -9,3 +9,5 @@ type Message = {
timestamp: string;
id: string;
};
export type { Message };

4
src/frontend/src/types/zustand/messages/index.ts
View file

@ -1,3 +1,5 @@
import { Message } from "../../messages";
export type MessagesStoreType = {
messages: Message[];
setMessages: (messages: Message[]) => void;
@ -5,5 +7,5 @@ export type MessagesStoreType = {
removeMessage: (message: Message) => void;
updateMessage: (message: Message) => void;
clearMessages: () => void;
removeMessages: (ids: number[]) => Promise<Message[]>;
removeMessages: (ids: number[]) => void;
};