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

Merge remote-tracking branch 'origin/websocket' into chat_and_cache

Browse source
This commit is contained in:
Gabriel Almeida 2023-04-25 23:43:16 -03:00
commit e58a2d2104
5 changed files with 120 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/package.json
View file

@ -61,5 +61,5 @@
"last 1 safari version"
]
},
"proxy": "http://backend:7860"
}
"proxy": "http://127.0.0.1:5003"
}

8
src/frontend/src/contexts/tabsContext.tsx
View file

@ -10,6 +10,7 @@ import { FlowType } from "../types/flow";
import { TabsContextType } from "../types/tabs";
import { normalCaseToSnakeCase } from "../utils";
import { alertContext } from "./alertContext";
const { v4: uuidv4 } = require('uuid');
const TabsContextInitialValue: TabsContextType = {
save: () => {},
@ -33,8 +34,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
const { setNoticeData } = useContext(alertContext);
const [tabIndex, setTabIndex] = useState(0);
const [flows, setFlows] = useState<Array<FlowType>>([]);
const [id, setId] = useState(0);
const [lockChat, setLockChat] = useState(false);
const [id, setId] = useState("");
const newNodeId = useRef(0);
function incrementNodeId() {
@ -68,7 +68,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
newNodeId.current = 0;
setTabIndex(0);
setFlows([]);
setId(0);
setId(uuidv4());
}
/**
@ -157,7 +157,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
};
// Increment the ID counter.
setId((old) => old + 1);
setId(uuidv4());
// Add the new flow to the list of flows.
setFlows((prevState) => {

34
src/frontend/src/modals/chatModal/chatMessage/index.tsx
View file

@ -19,12 +19,12 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
>
<div
className={classNames(
"rounded-full w-9 h-9 flex items-center my-3 justify-center",
chat.isSend ? "bg-gray-200" : "bg-gray-200"
"rounded-full w-8 h-8 flex items-center my-3 justify-center",
chat.isSend ? "bg-gray-900" : "bg-gray-200"
)}
>
{!chat.isSend && <img className="scale-150" src={AiIcon} />}
{chat.isSend && <UserIcon />}
{chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-200" />}
</div>
{!chat.isSend ? (
<div className="w-full text-start flex items-center">
@ -49,20 +49,24 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
)}
{chat.thought && chat.thought !== "" && !hidden && <br></br>}
<div className="w-full px-4 pb-3 pt-3 pr-8">
{chat.file ? (
<div></div>
) : (
<span>
{chat.message}
<span>
{chat.message}
{chat.files && (
<div className="my-2 w-full">
<FileCard
fileName={"FileType"}
fileType={"jpeg"}
content={""}
/>
{chat.files.map((file) => {
return (
<div className="my-2 w-full">
<FileCard
fileName={"File"}
fileType={file.type}
content={file.data}
/>
</div>
);
})}
</div>
</span>
)}
)}
</span>
</div>
</div>
</div>

156
src/frontend/src/modals/chatModal/index.tsx
View file

@ -35,14 +35,13 @@ export default function ChatModal({
message: string,
isSend: boolean,
thought?: string,
file?:Blob
files?: Array<any>
) => {
setChatHistory((old) => {
let newChat = _.cloneDeep(old);
if(file){
newChat.push({ message, isSend,file });
}
else if (thought) {
if (files) {
newChat.push({ message, isSend, files });
} else if (thought) {
newChat.push({ message, isSend, thought });
} else {
newChat.push({ message, isSend });
@ -50,70 +49,97 @@ export default function ChatModal({
return newChat;
});
};
useEffect(() => {
const newWs = new WebSocket(`ws://localhost:7860/chat/${flow.id}`);
function connectWS(){
const newWs = new WebSocket(`ws://127.0.0.1:5003/chat/${flow.id}`);
newWs.onopen = () => {
console.log("WebSocket connection established!");
};
newWs.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log("Received data:", data);
//get chat history
if (Array.isArray(data)) {
console.log(data);
try {
const data = JSON.parse(event.data);
console.log("Received data:", data);
//get chat history
if (Array.isArray(data)) {
console.log(data);
setChatHistory((_) => {
let newChatHistory: ChatMessageType[] = [];
data.forEach(
(chatItem: {
intermediate_steps?: "string";
is_bot: boolean;
message: string;
type: string;
data?:string;
}) => {
if(chatItem.type==="file"){
newChatHistory.push({
isSend: !chatItem.is_bot,
message: chatItem.message,
thought: chatItem.intermediate_steps,
file:chatItem.data
});
setChatHistory((_) => {
let newChatHistory: ChatMessageType[] = [];
data.forEach(
(chatItem: {
intermediate_steps?: "string";
is_bot: boolean;
message: string;
type: string;
files?: Array<any>;
}) => {
if (chatItem.message) {
newChatHistory.push(
chatItem.files
? {
isSend: !chatItem.is_bot,
message: chatItem.message,
thought: chatItem.intermediate_steps,
files: chatItem.files,
}
: {
isSend: !chatItem.is_bot,
message: chatItem.message,
thought: chatItem.intermediate_steps,
}
);
}
}
newChatHistory.push({
isSend: !chatItem.is_bot,
message: chatItem.message,
thought: chatItem.intermediate_steps,
});
}
);
return newChatHistory;
});
);
return newChatHistory;
});
}
if (data.type === "end") {
if (data.files) {
addChatHistory(
data.message,
false,
data.intermediate_steps,
data.files
);
} else {
addChatHistory(data.message, false, data.intermediate_steps);
}
setLockChat(false);
}
if (data.type == "file") {
console.log(data);
}
} catch (error) {
setErrorData({title:event.data})
if(newWs.readyState===newWs.CLOSED){
window.alert(error)
}
}
};
newWs.onclose = (_) => {
if(open){
setLockChat(false);
setTimeout(() => {
connectWS()
}, 100);
}
if (data.type === "end") {
addChatHistory(data.message, false, data.intermediate_steps);
setLockChat(false)
}
if (data.type=="file"){
console.log(data)
}
// Do something with the data received from the WebSocket
};
newWs.onclose=(e)=>{console.log(e.reason)}
setWs(newWs);
return newWs
}
useEffect(() => {
let newWs = connectWS()
return () => {
newWs.close();
};
}, []);
useEffect(()=>{
if(ws && ws.CLOSED){
setLockChat(false)
}
},[lockChat])
async function sendAll(data: sendAllProps) {
if (ws) {
ws.send(JSON.stringify(data));
@ -124,6 +150,12 @@ export default function ChatModal({
if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
}, [chatHistory]);
useEffect(() => {
if (ws && ws.readyState === ws.CLOSED) {
setLockChat(false);
}
}, [lockChat]);
function validateNode(n: NodeType): Array<string> {
if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
setNoticeData({
@ -187,20 +219,6 @@ export default function ChatModal({
chatHistory,
name: flow.name,
description: flow.description,
}).catch((error) => {
setErrorData({
title: error.message ?? "Unknown Error",
list: [error.response.data.detail],
});
setLockChat(false);
let lastMessage;
setChatHistory((chatHistory) => {
let newChat = chatHistory;
lastMessage = newChat.pop().message;
return newChat;
});
setChatValue(lastMessage);
});
} else {
setErrorData({
@ -217,7 +235,7 @@ export default function ChatModal({
}
function clearChat() {
setChatHistory([]);
updateFlow({ ..._.cloneDeep(flow), chat: [] });
ws.send(JSON.stringify({ clear_history: true }));
}
const { closePopUp } = useContext(PopUpContext);

11
src/frontend/src/types/chat/index.ts
View file

@ -1,5 +1,10 @@
import { ReactFlowInstance } from 'reactflow';
import { ReactFlowInstance } from "reactflow";
import { FlowType } from "../flow";
export type ChatType = {flow:FlowType,reactFlowInstance:ReactFlowInstance}
export type ChatMessageType = { message: string; isSend: boolean, thought?:string,file?:string }
export type ChatType = { flow: FlowType; reactFlowInstance: ReactFlowInstance };
export type ChatMessageType = {
message: string;
isSend: boolean;
thought?: string;
files?: Array<{data:string,type:string}>;
};