removed chat history from flow save

This commit is contained in:
anovazzi1 2023-04-25 17:34:14 -03:00
commit b526c436cd
4 changed files with 60 additions and 68 deletions

View file

@ -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) => {

View file

@ -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;
}); });

View file

@ -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]);

View file

@ -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}