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

workin session managment in playground, need to add tooltips

Browse source
This commit is contained in:
anovazzi1 2024-06-06 18:54:00 -03:00
commit 6fcf99aed9
6 changed files with 124 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1030,7 +1030,6 @@ export async function getMessagesTable(
): Promise<{
rows: Array<Message>;
columns: Array<ColDef | ColGroupDef>;
sessions: Array<string>;
}> {
const config = {};
if (id) {
@ -1045,7 +1044,7 @@ export async function getMessagesTable(
rows.data.forEach((row) => {
sessions.add(row.session_id);
});
return { rows: rows.data, columns, sessions: Array.from(sessions) };
return { rows: rows.data, columns };
}
export async function deleteMessagesFn(ids: number[]) {

29
src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx Normal file
View file

@ -0,0 +1,29 @@
import { deleteMessagesFn } from "../../../../../controllers/API";
import { useMessagesStore } from "../../../../../stores/messagesStore";
const useRemoveSession = (setSuccessData, setErrorData) => {
const deleteSession = useMessagesStore((state) => state.deleteSession);
const messages = useMessagesStore((state) => state.messages);
const handleRemoveSession = async (session_id: string) => {
try {
await deleteMessagesFn(
messages
.filter((msg) => msg.session_id === session_id)
.map((msg) => msg.index),
);
deleteSession(session_id);
setSuccessData({
title: "Session deleted successfully.",
});
} catch (error) {
setErrorData({
title: "Error deleting Session.",
});
}
};
return { handleRemoveSession };
};
export default useRemoveSession;

68
src/frontend/src/modals/IOModal/components/SessionView/index.tsx
View file

@ -11,17 +11,13 @@ import useAlertStore from "../../../../stores/alertStore";
import { useMessagesStore } from "../../../../stores/messagesStore";
import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
import useMessagesTable from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-messages-table";
import HeaderMessagesComponent from "../../../../pages/SettingsPage/pages/messagesPage/components/headerMessages";
import { Button } from "../../../../components/ui/button";
import ForwardedIconComponent from "../../../../components/genericIconComponent";
import { cn } from "../../../../utils/utils";
export default function SessionView({
session,
columns,
}: {
session: string;
columns: Array<ColDef | ColGroupDef>;
}) {
const messages = useMessagesStore((state) => state.messages);
export default function SessionView({ rows }: { rows: Array<any> }) {
const columns = useMessagesStore((state) => state.columns);
const setErrorData = useAlertStore((state) => state.setErrorData);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -48,21 +44,43 @@ export default function SessionView({
}
return (
<TableComponent
readOnlyEdit
onCellEditRequest={(event) => {
handleUpdateMessage(event);
}}
editable={["Sender Name", "Message"]}
overlayNoRowsTemplate="No data available"
onSelectionChanged={(event: SelectionChangedEvent) => {
setSelectedRows(event.api.getSelectedRows().map((row) => row.index));
}}
rowSelection="multiple"
suppressRowClickSelection={true}
pagination={true}
columnDefs={columns}
rowData={messages.filter((message) => message.session_id === session)}
/>
<div className="flex h-full w-full flex-col justify-between gap-6">
<>
<div className="flex w-full items-center justify-end gap-4 space-y-0.5">
<div className="flex flex-shrink-0 items-center gap-2">
<Button
data-testid="api-key-button-store"
variant="primary"
className="group px-2"
disabled={selectedRows.length === 0}
onClick={handleRemoveMessages}
>
<ForwardedIconComponent
name="Trash2"
className={cn(
"h-5 w-5 text-destructive group-disabled:text-primary",
)}
/>
</Button>
</div>
</div>
</>
<TableComponent
readOnlyEdit
onCellEditRequest={(event) => {
handleUpdateMessage(event);
}}
editable={["Sender Name", "Message"]}
overlayNoRowsTemplate="No data available"
onSelectionChanged={(event: SelectionChangedEvent) => {
setSelectedRows(event.api.getSelectedRows().map((row) => row.index));
}}
rowSelection="multiple"
suppressRowClickSelection={true}
pagination={true}
columnDefs={columns}
rowData={rows}
/>
</div>
);
}

43
src/frontend/src/modals/IOModal/index.tsx
View file

@ -27,8 +27,9 @@ import IOFieldView from "./components/IOFieldView";
import ChatView from "./components/chatView";
import { getMessagesTable } from "../../controllers/API";
import { useMessagesStore } from "../../stores/messagesStore";
import { ColDef, ColGroupDef } from "ag-grid-community";
import SessionView from "./components/SessionView";
import useRemoveSession from "./components/SessionView/hooks";
import useAlertStore from "../../stores/alertStore";
export default function IOModal({
children,
@ -59,6 +60,8 @@ export default function IOModal({
const [selectedTab, setSelectedTab] = useState(
inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
);
const setErrorData = useAlertStore((state) => state.setErrorData);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
function startView() {
if (!chatInput && !chatOutput) {
@ -84,8 +87,8 @@ export default function IOModal({
const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const setNode = useFlowStore((state) => state.setNode);
const [sessions, setSessions] = useState<string[]>([]);
const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);
const messages = useMessagesStore((state) => state.messages);
const setColumns = useMessagesStore((state) => state.setColumns);
async function updateVertices() {
return updateVerticesOrder(currentFlow!.id, null);
}
@ -114,6 +117,11 @@ export default function IOModal({
}
}
const { handleRemoveSession } = useRemoveSession(
setSuccessData,
setErrorData,
);
useEffect(() => {
setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
}, [allNodes.length]);
@ -131,14 +139,22 @@ export default function IOModal({
useEffect(() => {
setSelectedViewField(startView());
if (haveChat) {
getMessagesTable("union").then(({ sessions, rows, columns }) => {
setSessions(sessions);
getMessagesTable("union").then(({ rows, columns }) => {
setMessages(rows);
setColumns(columns);
});
}
}, [open]);
useEffect(() => {
const sessions = new Set<string>();
messages.forEach((row) => {
sessions.add(row.session_id);
});
setSessions(Array.from(sessions));
sessions;
}, [messages]);
return (
<BaseModal size={"md-thin"} open={open} setOpen={setOpen} disable={disable}>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
@ -322,7 +338,16 @@ export default function IOModal({
{session}
</Badge>
<div className="flex items-center justify-center gap-2 align-middle">
<Button variant="ghost" onClick={() => {}}>
<Button
variant="ghost"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleRemoveSession(session);
if (selectedViewField?.id === session)
setSelectedViewField(undefined);
}}
>
<ShadTooltip content={"delete"}>
<IconComponent
name="Trash2"
@ -400,8 +425,10 @@ export default function IOModal({
(session) => session === selectedViewField.id,
) && (
<SessionView
columns={columns}
session={selectedViewField.id}
rows={messages.filter(
(message) =>
message.session_id === selectedViewField.id,
)}
/>
)}
</div>

12
src/frontend/src/stores/messagesStore.ts
View file

@ -2,6 +2,18 @@ import { create } from "zustand";
import { MessagesStoreType } from "../types/zustand/messages";
export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
deleteSession: (id) => {
set((state) => {
const updatedMessages = state.messages.filter(
(msg) => msg.session_id !== id,
);
return { messages: updatedMessages };
});
},
columns: [],
setColumns: (columns) => {
set(() => ({ columns: columns }));
},
messages: [],
setMessages: (messages) => {
set(() => ({ messages: messages }));

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

@ -1,3 +1,4 @@
import { ColDef, ColGroupDef } from "ag-grid-community";
import { Message } from "../../messages";
export type MessagesStoreType = {
@ -8,4 +9,7 @@ export type MessagesStoreType = {
updateMessage: (message: Message) => void;
clearMessages: () => void;
removeMessages: (ids: number[]) => void;
columns: Array<ColDef | ColGroupDef>;
setColumns: (columns: Array<ColDef | ColGroupDef>) => void;
deleteSession: (id: string) => void;
};