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

added check to onCloseWebsocket event

Browse source
This commit is contained in:
anovazzi1 2023-08-30 18:49:41 -03:00
commit 60945ce883
2 changed files with 93 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -312,7 +312,7 @@ export async function getHealth() {
*/ */
export async function getBuildStatus( export async function getBuildStatus(
flowId: string flowId: string
): Promise<BuildStatusTypeAPI> { ): Promise<AxiosResponse<BuildStatusTypeAPI>> {
return await api.get(`${BASE_URL_API}build/${flowId}/status`); return await api.get(`${BASE_URL_API}build/${flowId}/status`);
} }

175
src/frontend/src/modals/formModal/index.tsx
View file

@ -8,7 +8,7 @@ import { classNames } from "../../utils/utils";
import ChatInput from "./chatInput"; import ChatInput from "./chatInput";
import ChatMessage from "./chatMessage"; import ChatMessage from "./chatMessage";
import _ from "lodash"; import _, { set } from "lodash";
import AccordionComponent from "../../components/AccordionComponent"; import AccordionComponent from "../../components/AccordionComponent";
import IconComponent from "../../components/genericIconComponent"; import IconComponent from "../../components/genericIconComponent";
import ToggleShadComponent from "../../components/toggleShadComponent"; import ToggleShadComponent from "../../components/toggleShadComponent";
@ -27,6 +27,7 @@ import { AuthContext } from "../../contexts/authContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { TabsState } from "../../types/tabs"; import { TabsState } from "../../types/tabs";
import { validateNodes } from "../../utils/reactflowUtils"; import { validateNodes } from "../../utils/reactflowUtils";
import { getBuildStatus } from "../../controllers/API";
export default function FormModal({ export default function FormModal({
flow, flow,
@ -155,9 +156,21 @@ export default function FormModal({
function handleOnClose(event: CloseEvent): void { function handleOnClose(event: CloseEvent): void {
if (isOpen.current) { if (isOpen.current) {
getBuildStatus(flow.id).then((response) => {
if (response.data.built) {
connectWS();
}
else {
setErrorData({
title: "Please build the flow again before using the chat."
})
}
}).catch((error) => {
setErrorData({title:error.data?.detail?error.data.detail:error.message})
});
setErrorData({ title: event.reason }); setErrorData({ title: event.reason });
setTimeout(() => { setTimeout(() => {
connectWS();
setLockChat(false); setLockChat(false);
}, 1000); }, 1000);
} }
@ -173,9 +186,8 @@ export default function FormModal({
const host = isDevelopment ? "localhost:7860" : window.location.host; const host = isDevelopment ? "localhost:7860" : window.location.host;
const chatEndpoint = `/api/v1/chat/${chatId}`; const chatEndpoint = `/api/v1/chat/${chatId}`;
return `${ return `${isDevelopment ? "ws" : webSocketProtocol
isDevelopment ? "ws" : webSocketProtocol }://${host}${chatEndpoint}?token=${encodeURIComponent(accessToken!)}`;
}://${host}${chatEndpoint}?token=${encodeURIComponent(accessToken!)}`;
} }
function handleWsMessage(data: any) { function handleWsMessage(data: any) {
@ -197,20 +209,20 @@ export default function FormModal({
newChatHistory.push( newChatHistory.push(
chatItem.files chatItem.files
? { ? {
isSend: !chatItem.is_bot, isSend: !chatItem.is_bot,
message: chatItem.message, message: chatItem.message,
template: chatItem.template, template: chatItem.template,
thought: chatItem.intermediate_steps, thought: chatItem.intermediate_steps,
files: chatItem.files, files: chatItem.files,
chatKey: chatItem.chatKey, chatKey: chatItem.chatKey,
} }
: { : {
isSend: !chatItem.is_bot, isSend: !chatItem.is_bot,
message: chatItem.message, message: chatItem.message,
template: chatItem.template, template: chatItem.template,
thought: chatItem.intermediate_steps, thought: chatItem.intermediate_steps,
chatKey: chatItem.chatKey, chatKey: chatItem.chatKey,
} }
); );
} }
} }
@ -260,7 +272,6 @@ export default function FormModal({
}; };
newWs.onmessage = (event) => { newWs.onmessage = (event) => {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
console.log("Received data:", data);
handleWsMessage(data); handleWsMessage(data);
//get chat history //get chat history
}; };
@ -268,7 +279,6 @@ export default function FormModal({
handleOnClose(event); handleOnClose(event);
}; };
newWs.onerror = (ev) => { newWs.onerror = (ev) => {
console.log(ev, "error");
if (flow.id === "") { if (flow.id === "") {
connectWS(); connectWS();
} else { } else {
@ -294,7 +304,6 @@ export default function FormModal({
useEffect(() => { useEffect(() => {
connectWS(); connectWS();
return () => { return () => {
console.log("unmount");
console.log(ws); console.log(ws);
if (ws.current) { if (ws.current) {
ws.current.close(); ws.current.close();
@ -433,73 +442,73 @@ export default function FormModal({
{tabsState[id.current]?.formKeysData?.input_keys {tabsState[id.current]?.formKeysData?.input_keys
? Object.keys( ? Object.keys(
tabsState[id.current].formKeysData.input_keys! tabsState[id.current].formKeysData.input_keys!
).map((key, index) => ( ).map((key, index) => (
<div className="file-component-accordion-div" key={index}> <div className="file-component-accordion-div" key={index}>
<AccordionComponent <AccordionComponent
trigger={ trigger={
<div className="file-component-badge-div"> <div className="file-component-badge-div">
<Badge variant="gray" size="md"> <Badge variant="gray" size="md">
{key} {key}
</Badge> </Badge>
<div <div
className="-mb-1" className="-mb-1"
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
}} }}
> >
<ToggleShadComponent <ToggleShadComponent
enabled={chatKey === key} enabled={chatKey === key}
setEnabled={(value) => setEnabled={(value) =>
handleOnCheckedChange(value, key) handleOnCheckedChange(value, key)
} }
size="small" size="small"
disabled={tabsState[ disabled={tabsState[
id.current id.current
].formKeysData.handle_keys!.some( ].formKeysData.handle_keys!.some(
(t) => t === key (t) => t === key
)} )}
/> />
</div>
</div> </div>
} </div>
key={index} }
keyValue={key} key={index}
> keyValue={key}
<div className="file-component-tab-column"> >
{tabsState[id.current].formKeysData.handle_keys!.some( <div className="file-component-tab-column">
(t) => t === key {tabsState[id.current].formKeysData.handle_keys!.some(
) && ( (t) => t === key
) && (
<div className="font-normal text-muted-foreground "> <div className="font-normal text-muted-foreground ">
Source: Component Source: Component
</div> </div>
)} )}
<Textarea <Textarea
className="custom-scroll" className="custom-scroll"
value={ value={
tabsState[id.current].formKeysData.input_keys![ tabsState[id.current].formKeysData.input_keys![
key key
] ]
} }
onChange={(e) => { onChange={(e) => {
//@ts-ignore //@ts-ignore
setTabsState((old: TabsState) => { setTabsState((old: TabsState) => {
let newTabsState = _.cloneDeep(old); let newTabsState = _.cloneDeep(old);
newTabsState[ newTabsState[
id.current id.current
].formKeysData.input_keys![key] = ].formKeysData.input_keys![key] =
e.target.value; e.target.value;
return newTabsState; return newTabsState;
}); });
}} }}
disabled={chatKey === key} disabled={chatKey === key}
placeholder="Enter text..." placeholder="Enter text..."
></Textarea> ></Textarea>
</div> </div>
</AccordionComponent> </AccordionComponent>
</div> </div>
)) ))
: null} : null}
{tabsState[id.current].formKeysData.memory_keys!.map( {tabsState[id.current].formKeysData.memory_keys!.map(
(key, index) => ( (key, index) => (
@ -513,7 +522,7 @@ export default function FormModal({
<div className="-mb-1"> <div className="-mb-1">
<ToggleShadComponent <ToggleShadComponent
enabled={chatKey === key} enabled={chatKey === key}
setEnabled={() => {}} setEnabled={() => { }}
size="small" size="small"
disabled={true} disabled={true}
/> />