removed chat history from flow save
This commit is contained in:
parent
8932a959c0
commit
b526c436cd
4 changed files with 60 additions and 68 deletions
|
|
@ -4,14 +4,13 @@ import {
|
||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
|
|
||||||
import { ChatType } from "../../types/chat";
|
import { ChatMessageType, ChatType } from "../../types/chat";
|
||||||
import ChatTrigger from "./chatTrigger";
|
import ChatTrigger from "./chatTrigger";
|
||||||
import ChatModal from "../../modals/chatModal";
|
import ChatModal from "../../modals/chatModal";
|
||||||
|
|
||||||
const _ = require("lodash");
|
const _ = require("lodash");
|
||||||
|
|
||||||
export default function Chat({ flow }: ChatType) {
|
export default function Chat({ flow }: ChatType) {
|
||||||
|
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (event: KeyboardEvent) => {
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,18 @@
|
||||||
import { createContext, useEffect, useState, useRef, ReactNode, useContext } from "react";
|
import {
|
||||||
|
createContext,
|
||||||
|
useEffect,
|
||||||
|
useState,
|
||||||
|
useRef,
|
||||||
|
ReactNode,
|
||||||
|
useContext,
|
||||||
|
} from "react";
|
||||||
import { FlowType } from "../types/flow";
|
import { FlowType } from "../types/flow";
|
||||||
import { TabsContextType } from "../types/tabs";
|
import { TabsContextType } from "../types/tabs";
|
||||||
import { normalCaseToSnakeCase } from "../utils";
|
import { normalCaseToSnakeCase } from "../utils";
|
||||||
import { alertContext } from "./alertContext";
|
import { alertContext } from "./alertContext";
|
||||||
|
|
||||||
const TabsContextInitialValue: TabsContextType = {
|
const TabsContextInitialValue: TabsContextType = {
|
||||||
save:()=>{},
|
save: () => {},
|
||||||
tabIndex: 0,
|
tabIndex: 0,
|
||||||
setTabIndex: (index: number) => {},
|
setTabIndex: (index: number) => {},
|
||||||
flows: [],
|
flows: [],
|
||||||
|
|
@ -13,11 +20,11 @@ const TabsContextInitialValue: TabsContextType = {
|
||||||
addFlow: (flowData?: any) => {},
|
addFlow: (flowData?: any) => {},
|
||||||
updateFlow: (newFlow: FlowType) => {},
|
updateFlow: (newFlow: FlowType) => {},
|
||||||
incrementNodeId: () => 0,
|
incrementNodeId: () => 0,
|
||||||
downloadFlow: (flow:FlowType) => {},
|
downloadFlow: (flow: FlowType) => {},
|
||||||
uploadFlow: () => {},
|
uploadFlow: () => {},
|
||||||
lockChat: false,
|
lockChat: false,
|
||||||
setLockChat:(prevState:boolean)=>{},
|
setLockChat: (prevState: boolean) => {},
|
||||||
hardReset:()=>{},
|
hardReset: () => {},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const TabsContext = createContext<TabsContextType>(
|
export const TabsContext = createContext<TabsContextType>(
|
||||||
|
|
@ -25,7 +32,7 @@ export const TabsContext = createContext<TabsContextType>(
|
||||||
);
|
);
|
||||||
|
|
||||||
export function TabsProvider({ children }: { children: ReactNode }) {
|
export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
const {setNoticeData} = useContext(alertContext)
|
const { setNoticeData } = useContext(alertContext);
|
||||||
const [tabIndex, setTabIndex] = useState(0);
|
const [tabIndex, setTabIndex] = useState(0);
|
||||||
const [flows, setFlows] = useState<Array<FlowType>>([]);
|
const [flows, setFlows] = useState<Array<FlowType>>([]);
|
||||||
const [id, setId] = useState(0);
|
const [id, setId] = useState(0);
|
||||||
|
|
@ -36,7 +43,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
newNodeId.current = newNodeId.current + 1;
|
newNodeId.current = newNodeId.current + 1;
|
||||||
return newNodeId.current;
|
return newNodeId.current;
|
||||||
}
|
}
|
||||||
function save(){
|
function save() {
|
||||||
if (flows.length !== 0)
|
if (flows.length !== 0)
|
||||||
window.localStorage.setItem(
|
window.localStorage.setItem(
|
||||||
"tabsData",
|
"tabsData",
|
||||||
|
|
@ -45,11 +52,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
}
|
}
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
//save tabs locally
|
//save tabs locally
|
||||||
save()
|
save();
|
||||||
}, [flows, id, tabIndex, newNodeId]);
|
}, [flows, id, tabIndex, newNodeId]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
//get tabs locally saved
|
//get tabs locally saved
|
||||||
let cookie = window.localStorage.getItem("tabsData");
|
let cookie = window.localStorage.getItem("tabsData");
|
||||||
|
|
@ -61,15 +66,17 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
newNodeId.current = cookieObject.nodeId;
|
newNodeId.current = cookieObject.nodeId;
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
function hardReset(){
|
function hardReset() {
|
||||||
newNodeId.current=0;
|
newNodeId.current = 0;
|
||||||
setTabIndex(0);setFlows([]);setId(0);
|
setTabIndex(0);
|
||||||
|
setFlows([]);
|
||||||
|
setId(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Downloads the current flow as a JSON file
|
* Downloads the current flow as a JSON file
|
||||||
*/
|
*/
|
||||||
function downloadFlow(flow:FlowType) {
|
function downloadFlow(flow: FlowType) {
|
||||||
// create a data URI with the current flow data
|
// create a data URI with the current flow data
|
||||||
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
|
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
|
||||||
JSON.stringify(flow)
|
JSON.stringify(flow)
|
||||||
|
|
@ -82,7 +89,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
|
|
||||||
// simulate a click on the link element to trigger the download
|
// simulate a click on the link element to trigger the download
|
||||||
link.click();
|
link.click();
|
||||||
setNoticeData({title:"Warning: Critical data,JSON file may including API keys."})
|
setNoticeData({
|
||||||
|
title: "Warning: Critical data,JSON file may including API keys.",
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -139,15 +148,14 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
function addFlow(flow?: FlowType) {
|
function addFlow(flow?: FlowType) {
|
||||||
// Get data from the flow or set it to null if there's no flow provided.
|
// Get data from the flow or set it to null if there's no flow provided.
|
||||||
const data = flow?.data ? flow.data : null;
|
const data = flow?.data ? flow.data : null;
|
||||||
const description = flow?.description?flow.description:""
|
const description = flow?.description ? flow.description : "";
|
||||||
|
|
||||||
// Create a new flow with a default name if no flow is provided.
|
// Create a new flow with a default name if no flow is provided.
|
||||||
let newFlow: FlowType = {
|
let newFlow: FlowType = {
|
||||||
description,
|
description,
|
||||||
name: flow?.name??"New Flow",
|
name: flow?.name ?? "New Flow",
|
||||||
id: id.toString(),
|
id: id.toString(),
|
||||||
data,
|
data,
|
||||||
chat: flow ? flow.chat : [],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Increment the ID counter.
|
// Increment the ID counter.
|
||||||
|
|
@ -171,10 +179,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
const newFlows = [...prevState];
|
const newFlows = [...prevState];
|
||||||
const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
|
const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
newFlows[index].description = newFlow.description??""
|
newFlows[index].description = newFlow.description ?? "";
|
||||||
newFlows[index].data = newFlow.data;
|
newFlows[index].data = newFlow.data;
|
||||||
newFlows[index].name = newFlow.name;
|
newFlows[index].name = newFlow.name;
|
||||||
newFlows[index].chat = newFlow.chat;
|
|
||||||
}
|
}
|
||||||
return newFlows;
|
return newFlows;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -10,15 +10,23 @@ import { typesContext } from "../../contexts/typesContext";
|
||||||
import ChatMessage from "./chatMessage";
|
import ChatMessage from "./chatMessage";
|
||||||
import { FaEraser } from "react-icons/fa";
|
import { FaEraser } from "react-icons/fa";
|
||||||
import { sendAllProps } from "../../types/api";
|
import { sendAllProps } from "../../types/api";
|
||||||
|
import { ChatMessageType } from "../../types/chat";
|
||||||
|
|
||||||
const _ = require("lodash");
|
const _ = require("lodash");
|
||||||
|
|
||||||
export default function ChatModal({ flow, open, setOpen }:{open:boolean,setOpen:Function,flow:FlowType}) {
|
export default function ChatModal({
|
||||||
const { updateFlow, lockChat, setLockChat, flows, tabIndex } =
|
flow,
|
||||||
|
open,
|
||||||
|
setOpen,
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
setOpen: Function;
|
||||||
|
flow: FlowType;
|
||||||
|
}) {
|
||||||
|
const { updateFlow, lockChat, setLockChat} =
|
||||||
useContext(TabsContext);
|
useContext(TabsContext);
|
||||||
const [saveChat, setSaveChat] = useState(false);
|
|
||||||
const [chatValue, setChatValue] = useState("");
|
const [chatValue, setChatValue] = useState("");
|
||||||
const [chatHistory, setChatHistory] = useState(flow.chat);
|
const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
|
||||||
const { reactFlowInstance } = useContext(typesContext);
|
const { reactFlowInstance } = useContext(typesContext);
|
||||||
const { setErrorData, setNoticeData } = useContext(alertContext);
|
const { setErrorData, setNoticeData } = useContext(alertContext);
|
||||||
const [ws, setWs] = useState<WebSocket | null>(null);
|
const [ws, setWs] = useState<WebSocket | null>(null);
|
||||||
|
|
@ -27,13 +35,9 @@ export default function ChatModal({ flow, open, setOpen }:{open:boolean,setOpen:
|
||||||
isSend: boolean,
|
isSend: boolean,
|
||||||
thought?: string
|
thought?: string
|
||||||
) => {
|
) => {
|
||||||
let tabsChange = false;
|
|
||||||
setChatHistory((old) => {
|
setChatHistory((old) => {
|
||||||
let newChat = _.cloneDeep(old);
|
let newChat = _.cloneDeep(old);
|
||||||
if (JSON.stringify(flow.chat) !== JSON.stringify(old)) {
|
|
||||||
tabsChange = true;
|
|
||||||
return old;
|
|
||||||
}
|
|
||||||
if (thought) {
|
if (thought) {
|
||||||
newChat.push({ message, isSend, thought });
|
newChat.push({ message, isSend, thought });
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -41,30 +45,20 @@ export default function ChatModal({ flow, open, setOpen }:{open:boolean,setOpen:
|
||||||
}
|
}
|
||||||
return newChat;
|
return newChat;
|
||||||
});
|
});
|
||||||
if (tabsChange) {
|
|
||||||
if (thought) {
|
|
||||||
updateFlow({
|
|
||||||
..._.cloneDeep(flow),
|
|
||||||
chat: [...flow.chat, { isSend, message, thought }],
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
updateFlow({
|
|
||||||
..._.cloneDeep(flow),
|
|
||||||
chat: [...flow.chat, { isSend, message }],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setSaveChat((chat) => !chat);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const newWs = new WebSocket(`ws://localhost:7860/chat/${flow.id}`);
|
const newWs = new WebSocket(`ws://localhost:7860/chat/${flow.id}`);
|
||||||
newWs.onopen = () => {
|
newWs.onopen = () => {
|
||||||
console.log('WebSocket connection established!');
|
console.log("WebSocket connection established!");
|
||||||
};
|
};
|
||||||
newWs.onmessage = (event) => {
|
newWs.onmessage = (event) => {
|
||||||
const data = JSON.parse(event.data);
|
const data = JSON.parse(event.data);
|
||||||
console.log('Received data:', data);
|
console.log("Received data:", data);
|
||||||
|
if(Array.isArray(data)){
|
||||||
|
console.log("entrou")
|
||||||
|
setChatHistory([{isSend:true,message:"sdsdsad"}])
|
||||||
|
}
|
||||||
// Do something with the data received from the WebSocket
|
// Do something with the data received from the WebSocket
|
||||||
};
|
};
|
||||||
setWs(newWs);
|
setWs(newWs);
|
||||||
|
|
@ -78,16 +72,9 @@ export default function ChatModal({ flow, open, setOpen }:{open:boolean,setOpen:
|
||||||
if (ws) {
|
if (ws) {
|
||||||
ws.send(JSON.stringify(data));
|
ws.send(JSON.stringify(data));
|
||||||
}
|
}
|
||||||
return {data:{result:"sdsdsad",thought:"dsdsad"}}
|
return { data: { result: "sdsdsad", thought: "dsdsad" } };
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
updateFlow({ ..._.cloneDeep(flow), chat: chatHistory });
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [saveChat]);
|
|
||||||
useEffect(() => {
|
|
||||||
setChatHistory(flow.chat);
|
|
||||||
}, [flow]);
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
|
if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
|
||||||
}, [chatHistory]);
|
}, [chatHistory]);
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@ export type FlowType = {
|
||||||
name: string;
|
name: string;
|
||||||
id: string;
|
id: string;
|
||||||
data: ReactFlowJsonObject;
|
data: ReactFlowJsonObject;
|
||||||
chat: Array<ChatMessageType>;
|
|
||||||
description:string;
|
description:string;
|
||||||
};
|
};
|
||||||
export type NodeType = {id:string,type:string,position:XYPosition,data:NodeDataType}
|
export type NodeType = {id:string,type:string,position:XYPosition,data:NodeDataType}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue