refactor: migrate chat lock state to useFlowStore (#6166)
* 🔧 (frontend): remove unused lockChat and setLockChat props from ChatViewWrapper and ChatView components ♻️ (frontend): refactor ChatMessage component to use useFlowStore for lockChat state management instead of passing it as a prop * 🔧 (chat-message.tsx): Remove unused variables setLockChat and lockChat ♻️ (chat-message.tsx): Refactor code to use isBuilding state instead of setLockChat and lockChat variables ♻️ (new-modal.tsx): Refactor code to remove setLockChat function and references ♻️ (flowStore.ts): Refactor code to remove setLockChat function and lockChat variable ♻️ (components/index.ts): Refactor code to remove setLockChat function and lockChat variable ♻️ (flow/index.ts): Refactor code to remove setLockChat function and lockChat variable ♻️ (buildUtils.ts): Refactor code to remove setLockChat function and references * ♻️ (chat-view.tsx): refactor variable name 'lockChat' to 'isBuilding' for better clarity and semantics in the code. * 🔧 (chat-view.tsx, chat-input.tsx, button-send-wrapper.tsx, text-area-wrapper.tsx, upload-file-button.tsx, use-focus-unlock.ts, use-upload.ts, chat-message.tsx, index.ts): Remove lockChat variable and replace it with isBuilding variable to improve code readability and consistency. * ♻️ (button-send-wrapper.tsx): remove unnecessary disabled prop from Button component to improve code readability and maintainability
This commit is contained in:
parent
8a5cfa3526
commit
e1e9d7baef
15 changed files with 37 additions and 111 deletions
|
|
@ -19,8 +19,6 @@ export const ChatViewWrapper = ({
|
||||||
messagesFetched,
|
messagesFetched,
|
||||||
sessionId,
|
sessionId,
|
||||||
sendMessage,
|
sendMessage,
|
||||||
lockChat,
|
|
||||||
setLockChat,
|
|
||||||
canvasOpen,
|
canvasOpen,
|
||||||
setOpen,
|
setOpen,
|
||||||
}: ChatViewWrapperProps) => {
|
}: ChatViewWrapperProps) => {
|
||||||
|
|
@ -93,8 +91,6 @@ export const ChatViewWrapper = ({
|
||||||
<ChatView
|
<ChatView
|
||||||
focusChat={sessionId}
|
focusChat={sessionId}
|
||||||
sendMessage={sendMessage}
|
sendMessage={sendMessage}
|
||||||
lockChat={lockChat}
|
|
||||||
setLockChat={setLockChat}
|
|
||||||
visibleSession={visibleSession}
|
visibleSession={visibleSession}
|
||||||
closeChat={
|
closeChat={
|
||||||
!canvasOpen
|
!canvasOpen
|
||||||
|
|
|
||||||
|
|
@ -30,8 +30,6 @@ const MemoizedChatMessage = memo(ChatMessage, (prevProps, nextProps) => {
|
||||||
|
|
||||||
export default function ChatView({
|
export default function ChatView({
|
||||||
sendMessage,
|
sendMessage,
|
||||||
lockChat,
|
|
||||||
setLockChat,
|
|
||||||
visibleSession,
|
visibleSession,
|
||||||
focusChat,
|
focusChat,
|
||||||
closeChat,
|
closeChat,
|
||||||
|
|
@ -51,6 +49,8 @@ export default function ChatView({
|
||||||
(state) => state.displayLoadingMessage,
|
(state) => state.displayLoadingMessage,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const isBuilding = useFlowStore((state) => state.isBuilding);
|
||||||
|
|
||||||
const inputTypes = inputs.map((obj) => obj.type);
|
const inputTypes = inputs.map((obj) => obj.type);
|
||||||
const updateFlowPool = useFlowStore((state) => state.updateFlowPool);
|
const updateFlowPool = useFlowStore((state) => state.updateFlowPool);
|
||||||
const setChatValueStore = useUtilityStore((state) => state.setChatValueStore);
|
const setChatValueStore = useUtilityStore((state) => state.setChatValueStore);
|
||||||
|
|
@ -99,7 +99,7 @@ export default function ChatView({
|
||||||
return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime();
|
return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime();
|
||||||
});
|
});
|
||||||
|
|
||||||
if (messages.length === 0 && !lockChat && chatInputNode && isTabHidden) {
|
if (messages.length === 0 && !isBuilding && chatInputNode && isTabHidden) {
|
||||||
setChatValueStore(
|
setChatValueStore(
|
||||||
chatInputNode.data.node.template["input_value"].value ?? "",
|
chatInputNode.data.node.template["input_value"].value ?? "",
|
||||||
);
|
);
|
||||||
|
|
@ -164,12 +164,10 @@ export default function ChatView({
|
||||||
>
|
>
|
||||||
<div ref={messagesRef} className="chat-message-div">
|
<div ref={messagesRef} className="chat-message-div">
|
||||||
{chatHistory &&
|
{chatHistory &&
|
||||||
(lockChat || chatHistory?.length > 0 ? (
|
(isBuilding || chatHistory?.length > 0 ? (
|
||||||
<>
|
<>
|
||||||
{chatHistory?.map((chat, index) => (
|
{chatHistory?.map((chat, index) => (
|
||||||
<MemoizedChatMessage
|
<MemoizedChatMessage
|
||||||
setLockChat={setLockChat}
|
|
||||||
lockChat={lockChat}
|
|
||||||
chat={chat}
|
chat={chat}
|
||||||
lastMessage={chatHistory.length - 1 === index}
|
lastMessage={chatHistory.length - 1 === index}
|
||||||
key={`${chat.id}-${index}`}
|
key={`${chat.id}-${index}`}
|
||||||
|
|
@ -224,7 +222,6 @@ export default function ChatView({
|
||||||
<div className="m-auto w-full max-w-[768px] md:w-5/6">
|
<div className="m-auto w-full max-w-[768px] md:w-5/6">
|
||||||
<ChatInput
|
<ChatInput
|
||||||
noInput={!inputTypes.includes("ChatInput")}
|
noInput={!inputTypes.includes("ChatInput")}
|
||||||
lockChat={lockChat}
|
|
||||||
sendMessage={({ repeat, files }) => {
|
sendMessage={({ repeat, files }) => {
|
||||||
sendMessage({ repeat, files });
|
sendMessage({ repeat, files });
|
||||||
track("Playground Message Sent");
|
track("Playground Message Sent");
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,6 @@ import UploadFileButton from "./components/upload-file-button";
|
||||||
import useAutoResizeTextArea from "./hooks/use-auto-resize-text-area";
|
import useAutoResizeTextArea from "./hooks/use-auto-resize-text-area";
|
||||||
import useFocusOnUnlock from "./hooks/use-focus-unlock";
|
import useFocusOnUnlock from "./hooks/use-focus-unlock";
|
||||||
export default function ChatInput({
|
export default function ChatInput({
|
||||||
lockChat,
|
|
||||||
sendMessage,
|
sendMessage,
|
||||||
inputRef,
|
inputRef,
|
||||||
noInput,
|
noInput,
|
||||||
|
|
@ -39,10 +38,10 @@ export default function ChatInput({
|
||||||
const setErrorData = useAlertStore((state) => state.setErrorData);
|
const setErrorData = useAlertStore((state) => state.setErrorData);
|
||||||
const { validateFileSize } = useFileSizeValidator(setErrorData);
|
const { validateFileSize } = useFileSizeValidator(setErrorData);
|
||||||
const stopBuilding = useFlowStore((state) => state.stopBuilding);
|
const stopBuilding = useFlowStore((state) => state.stopBuilding);
|
||||||
|
const isBuilding = useFlowStore((state) => state.isBuilding);
|
||||||
const chatValue = useUtilityStore((state) => state.chatValueStore);
|
const chatValue = useUtilityStore((state) => state.chatValueStore);
|
||||||
|
|
||||||
useFocusOnUnlock(lockChat, inputRef);
|
useFocusOnUnlock(isBuilding, inputRef);
|
||||||
useAutoResizeTextArea(chatValue, inputRef);
|
useAutoResizeTextArea(chatValue, inputRef);
|
||||||
|
|
||||||
const { mutate } = usePostUploadFile();
|
const { mutate } = usePostUploadFile();
|
||||||
|
|
@ -134,7 +133,7 @@ export default function ChatInput({
|
||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener("paste", handleFileChange);
|
document.removeEventListener("paste", handleFileChange);
|
||||||
};
|
};
|
||||||
}, [handleFileChange, currentFlowId, lockChat]);
|
}, [handleFileChange, currentFlowId, isBuilding]);
|
||||||
|
|
||||||
const send = () => {
|
const send = () => {
|
||||||
sendMessage({
|
sendMessage({
|
||||||
|
|
@ -147,7 +146,7 @@ export default function ChatInput({
|
||||||
const checkSendingOk = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
const checkSendingOk = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||||
return (
|
return (
|
||||||
event.key === "Enter" &&
|
event.key === "Enter" &&
|
||||||
!lockChat &&
|
!isBuilding &&
|
||||||
!event.shiftKey &&
|
!event.shiftKey &&
|
||||||
!event.nativeEvent.isComposing
|
!event.nativeEvent.isComposing
|
||||||
);
|
);
|
||||||
|
|
@ -168,7 +167,7 @@ export default function ChatInput({
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||||
<div className="flex w-full flex-col items-center justify-center gap-3 rounded-md border border-input bg-muted p-2 py-4">
|
<div className="flex w-full flex-col items-center justify-center gap-3 rounded-md border border-input bg-muted p-2 py-4">
|
||||||
{!lockChat ? (
|
{!isBuilding ? (
|
||||||
<Button
|
<Button
|
||||||
data-testid="button-send"
|
data-testid="button-send"
|
||||||
className="font-semibold"
|
className="font-semibold"
|
||||||
|
|
@ -214,9 +213,9 @@ export default function ChatInput({
|
||||||
<div className="flex w-full flex-col-reverse">
|
<div className="flex w-full flex-col-reverse">
|
||||||
<div className="flex w-full flex-col rounded-md border border-input p-4 hover:border-muted-foreground focus:border-[1.75px] has-[:focus]:border-primary">
|
<div className="flex w-full flex-col rounded-md border border-input p-4 hover:border-muted-foreground focus:border-[1.75px] has-[:focus]:border-primary">
|
||||||
<TextAreaWrapper
|
<TextAreaWrapper
|
||||||
|
isBuilding={isBuilding}
|
||||||
checkSendingOk={checkSendingOk}
|
checkSendingOk={checkSendingOk}
|
||||||
send={send}
|
send={send}
|
||||||
lockChat={lockChat}
|
|
||||||
noInput={noInput}
|
noInput={noInput}
|
||||||
chatValue={chatValue}
|
chatValue={chatValue}
|
||||||
CHAT_INPUT_PLACEHOLDER={CHAT_INPUT_PLACEHOLDER}
|
CHAT_INPUT_PLACEHOLDER={CHAT_INPUT_PLACEHOLDER}
|
||||||
|
|
@ -239,9 +238,9 @@ export default function ChatInput({
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex w-full items-end justify-between">
|
<div className="flex w-full items-end justify-between">
|
||||||
<div className={lockChat ? "cursor-not-allowed" : ""}>
|
<div className={isBuilding ? "cursor-not-allowed" : ""}>
|
||||||
<UploadFileButton
|
<UploadFileButton
|
||||||
lockChat={lockChat}
|
isBuilding={isBuilding}
|
||||||
fileInputRef={fileInputRef}
|
fileInputRef={fileInputRef}
|
||||||
handleFileChange={handleFileChange}
|
handleFileChange={handleFileChange}
|
||||||
handleButtonClick={handleButtonClick}
|
handleButtonClick={handleButtonClick}
|
||||||
|
|
@ -250,7 +249,6 @@ export default function ChatInput({
|
||||||
<div className="">
|
<div className="">
|
||||||
<ButtonSendWrapper
|
<ButtonSendWrapper
|
||||||
send={send}
|
send={send}
|
||||||
lockChat={lockChat}
|
|
||||||
noInput={noInput}
|
noInput={noInput}
|
||||||
chatValue={chatValue}
|
chatValue={chatValue}
|
||||||
files={files}
|
files={files}
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@ const BUTTON_STATES = {
|
||||||
|
|
||||||
type ButtonSendWrapperProps = {
|
type ButtonSendWrapperProps = {
|
||||||
send: () => void;
|
send: () => void;
|
||||||
lockChat: boolean;
|
|
||||||
noInput: boolean;
|
noInput: boolean;
|
||||||
chatValue: string;
|
chatValue: string;
|
||||||
files: FilePreviewType[];
|
files: FilePreviewType[];
|
||||||
|
|
@ -24,7 +23,6 @@ type ButtonSendWrapperProps = {
|
||||||
|
|
||||||
const ButtonSendWrapper = ({
|
const ButtonSendWrapper = ({
|
||||||
send,
|
send,
|
||||||
lockChat,
|
|
||||||
noInput,
|
noInput,
|
||||||
chatValue,
|
chatValue,
|
||||||
files,
|
files,
|
||||||
|
|
@ -32,10 +30,9 @@ const ButtonSendWrapper = ({
|
||||||
const stopBuilding = useFlowStore((state) => state.stopBuilding);
|
const stopBuilding = useFlowStore((state) => state.stopBuilding);
|
||||||
|
|
||||||
const isBuilding = useFlowStore((state) => state.isBuilding);
|
const isBuilding = useFlowStore((state) => state.isBuilding);
|
||||||
const showStopButton = lockChat || files.some((file) => file.loading);
|
const showStopButton = isBuilding || files.some((file) => file.loading);
|
||||||
const showPlayButton = !lockChat && noInput;
|
|
||||||
const showSendButton =
|
const showSendButton =
|
||||||
!(lockChat || files.some((file) => file.loading)) && !noInput;
|
!(isBuilding || files.some((file) => file.loading)) && !noInput;
|
||||||
|
|
||||||
const getButtonState = () => {
|
const getButtonState = () => {
|
||||||
if (showStopButton) return BUTTON_STATES.SHOW_STOP;
|
if (showStopButton) return BUTTON_STATES.SHOW_STOP;
|
||||||
|
|
@ -58,7 +55,6 @@ const ButtonSendWrapper = ({
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
className={buttonClasses}
|
className={buttonClasses}
|
||||||
disabled={lockChat && !isBuilding}
|
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
unstyled
|
unstyled
|
||||||
data-testid={showStopButton ? "button-stop" : "button-send"}
|
data-testid={showStopButton ? "button-stop" : "button-send"}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import { classNames } from "../../../../../../utils/utils";
|
||||||
const TextAreaWrapper = ({
|
const TextAreaWrapper = ({
|
||||||
checkSendingOk,
|
checkSendingOk,
|
||||||
send,
|
send,
|
||||||
lockChat,
|
isBuilding,
|
||||||
noInput,
|
noInput,
|
||||||
chatValue,
|
chatValue,
|
||||||
CHAT_INPUT_PLACEHOLDER,
|
CHAT_INPUT_PLACEHOLDER,
|
||||||
|
|
@ -36,10 +36,10 @@ const TextAreaWrapper = ({
|
||||||
"form-input block w-full border-0 custom-scroll focus:border-ring rounded-none shadow-none focus:ring-0 p-0 sm:text-sm !bg-transparent";
|
"form-input block w-full border-0 custom-scroll focus:border-ring rounded-none shadow-none focus:ring-0 p-0 sm:text-sm !bg-transparent";
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!lockChat && !noInput) {
|
if (!isBuilding && !noInput) {
|
||||||
inputRef.current?.focus();
|
inputRef.current?.focus();
|
||||||
}
|
}
|
||||||
}, [lockChat, noInput]);
|
}, [isBuilding, noInput]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Textarea
|
<Textarea
|
||||||
|
|
@ -51,7 +51,7 @@ const TextAreaWrapper = ({
|
||||||
}}
|
}}
|
||||||
rows={1}
|
rows={1}
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
disabled={lockChat || noInput}
|
disabled={isBuilding || noInput}
|
||||||
style={{
|
style={{
|
||||||
resize: "none",
|
resize: "none",
|
||||||
bottom: `${inputRef?.current?.scrollHeight}px`,
|
bottom: `${inputRef?.current?.scrollHeight}px`,
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ const UploadFileButton = ({
|
||||||
fileInputRef,
|
fileInputRef,
|
||||||
handleFileChange,
|
handleFileChange,
|
||||||
handleButtonClick,
|
handleButtonClick,
|
||||||
lockChat,
|
isBuilding,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<ShadTooltip
|
<ShadTooltip
|
||||||
|
|
@ -16,16 +16,16 @@ const UploadFileButton = ({
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
disabled={lockChat}
|
disabled={isBuilding}
|
||||||
type="file"
|
type="file"
|
||||||
ref={fileInputRef}
|
ref={fileInputRef}
|
||||||
style={{ display: "none" }}
|
style={{ display: "none" }}
|
||||||
onChange={handleFileChange}
|
onChange={handleFileChange}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
disabled={lockChat}
|
disabled={isBuilding}
|
||||||
className={`flex h-[32px] w-[32px] items-center justify-center rounded-md bg-muted font-bold transition-all ${
|
className={`flex h-[32px] w-[32px] items-center justify-center rounded-md bg-muted font-bold transition-all ${
|
||||||
lockChat
|
isBuilding
|
||||||
? "cursor-not-allowed"
|
? "cursor-not-allowed"
|
||||||
: "text-muted-foreground hover:text-primary"
|
: "text-muted-foreground hover:text-primary"
|
||||||
}`}
|
}`}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
|
|
||||||
const useFocusOnUnlock = (
|
const useFocusOnUnlock = (
|
||||||
lockChat: boolean,
|
isBuilding: boolean,
|
||||||
inputRef: React.RefObject<HTMLInputElement>,
|
inputRef: React.RefObject<HTMLInputElement>,
|
||||||
) => {
|
) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!lockChat && inputRef.current) {
|
if (!isBuilding && inputRef.current) {
|
||||||
inputRef.current.focus();
|
inputRef.current.focus();
|
||||||
}
|
}
|
||||||
}, [lockChat, inputRef]);
|
}, [isBuilding, inputRef]);
|
||||||
|
|
||||||
return inputRef;
|
return inputRef;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
import useFlowStore from "@/stores/flowStore";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import ShortUniqueId from "short-unique-id";
|
import ShortUniqueId from "short-unique-id";
|
||||||
|
|
@ -16,12 +17,12 @@ const useUpload = (
|
||||||
) => Promise<AxiosResponse<UploadFileTypeAPI>>,
|
) => Promise<AxiosResponse<UploadFileTypeAPI>>,
|
||||||
currentFlowId: string,
|
currentFlowId: string,
|
||||||
setFiles: any,
|
setFiles: any,
|
||||||
lockChat: boolean,
|
|
||||||
) => {
|
) => {
|
||||||
const setErrorData = useAlertStore((state) => state.setErrorData);
|
const setErrorData = useAlertStore((state) => state.setErrorData);
|
||||||
|
const isBuilding = useFlowStore((state) => state.isBuilding);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handlePaste = (event: ClipboardEvent): void => {
|
const handlePaste = (event: ClipboardEvent): void => {
|
||||||
if (lockChat) {
|
if (isBuilding) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const items = event.clipboardData?.items;
|
const items = event.clipboardData?.items;
|
||||||
|
|
@ -57,7 +58,7 @@ const useUpload = (
|
||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener("paste", handlePaste);
|
document.removeEventListener("paste", handlePaste);
|
||||||
};
|
};
|
||||||
}, [uploadFile, currentFlowId, lockChat]);
|
}, [uploadFile, currentFlowId, isBuilding]);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
|
||||||
import useFlowsManagerStore from "@/stores/flowsManagerStore";
|
import useFlowsManagerStore from "@/stores/flowsManagerStore";
|
||||||
import useFlowStore from "@/stores/flowStore";
|
import useFlowStore from "@/stores/flowStore";
|
||||||
import { useUtilityStore } from "@/stores/utilityStore";
|
import { useUtilityStore } from "@/stores/utilityStore";
|
||||||
|
import { ChatMessageType } from "@/types/chat";
|
||||||
import Convert from "ansi-to-html";
|
import Convert from "ansi-to-html";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import Robot from "../../../../../assets/robot.png";
|
import Robot from "../../../../../assets/robot.png";
|
||||||
|
|
@ -27,10 +28,8 @@ import { convertFiles } from "./helpers/convert-files";
|
||||||
|
|
||||||
export default function ChatMessage({
|
export default function ChatMessage({
|
||||||
chat,
|
chat,
|
||||||
lockChat,
|
|
||||||
lastMessage,
|
lastMessage,
|
||||||
updateChat,
|
updateChat,
|
||||||
setLockChat,
|
|
||||||
closeChat,
|
closeChat,
|
||||||
}: chatMessagePropsType): JSX.Element {
|
}: chatMessagePropsType): JSX.Element {
|
||||||
const convert = new Convert({ newline: true });
|
const convert = new Convert({ newline: true });
|
||||||
|
|
@ -49,11 +48,13 @@ export default function ChatMessage({
|
||||||
const chatMessageRef = useRef(chatMessage);
|
const chatMessageRef = useRef(chatMessage);
|
||||||
const [editMessage, setEditMessage] = useState(false);
|
const [editMessage, setEditMessage] = useState(false);
|
||||||
const [showError, setShowError] = useState(false);
|
const [showError, setShowError] = useState(false);
|
||||||
|
const isBuilding = useFlowStore((state) => state.isBuilding);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const chatMessageString = chat.message ? chat.message.toString() : "";
|
const chatMessageString = chat.message ? chat.message.toString() : "";
|
||||||
setChatMessage(chatMessageString);
|
setChatMessage(chatMessageString);
|
||||||
}, [chat]);
|
chatMessageRef.current = chatMessage;
|
||||||
|
}, [chat, isBuilding]);
|
||||||
|
|
||||||
const playgroundScrollBehaves = useUtilityStore(
|
const playgroundScrollBehaves = useUtilityStore(
|
||||||
(state) => state.playgroundScrollBehaves,
|
(state) => state.playgroundScrollBehaves,
|
||||||
|
|
@ -61,10 +62,6 @@ export default function ChatMessage({
|
||||||
const setPlaygroundScrollBehaves = useUtilityStore(
|
const setPlaygroundScrollBehaves = useUtilityStore(
|
||||||
(state) => state.setPlaygroundScrollBehaves,
|
(state) => state.setPlaygroundScrollBehaves,
|
||||||
);
|
);
|
||||||
// Sync ref with state
|
|
||||||
useEffect(() => {
|
|
||||||
chatMessageRef.current = chatMessage;
|
|
||||||
}, [chatMessage]);
|
|
||||||
|
|
||||||
// The idea now is that chat.stream_url MAY be a URL if we should stream the output of the chat
|
// The idea now is that chat.stream_url MAY be a URL if we should stream the output of the chat
|
||||||
// probably the message is empty when we have a stream_url
|
// probably the message is empty when we have a stream_url
|
||||||
|
|
@ -103,21 +100,17 @@ export default function ChatMessage({
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (streamUrl && !isStreaming) {
|
if (streamUrl && !isStreaming) {
|
||||||
setLockChat(true);
|
|
||||||
streamChunks(streamUrl)
|
streamChunks(streamUrl)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
setLockChat(false);
|
|
||||||
if (updateChat) {
|
if (updateChat) {
|
||||||
updateChat(chat, chatMessageRef.current);
|
updateChat(chat, chatMessageRef.current);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
setLockChat(false);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [streamUrl, chatMessage]);
|
}, [streamUrl, chatMessage]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
eventSource.current?.close();
|
eventSource.current?.close();
|
||||||
|
|
@ -320,7 +313,7 @@ export default function ChatMessage({
|
||||||
contentBlocks={chat.content_blocks}
|
contentBlocks={chat.content_blocks}
|
||||||
isLoading={
|
isLoading={
|
||||||
chatMessage === "" &&
|
chatMessage === "" &&
|
||||||
lockChat &&
|
isBuilding &&
|
||||||
chat.properties?.state === "partial"
|
chat.properties?.state === "partial"
|
||||||
}
|
}
|
||||||
state={chat.properties?.state}
|
state={chat.properties?.state}
|
||||||
|
|
@ -360,7 +353,7 @@ export default function ChatMessage({
|
||||||
}
|
}
|
||||||
className="flex w-full flex-col"
|
className="flex w-full flex-col"
|
||||||
>
|
>
|
||||||
{chatMessage === "" && lockChat ? (
|
{chatMessage === "" && isBuilding && lastMessage ? (
|
||||||
<IconComponent
|
<IconComponent
|
||||||
name="MoreHorizontal"
|
name="MoreHorizontal"
|
||||||
className="h-8 w-8 animate-pulse"
|
className="h-8 w-8 animate-pulse"
|
||||||
|
|
|
||||||
|
|
@ -113,8 +113,7 @@ export default function IOModal({
|
||||||
|
|
||||||
const buildFlow = useFlowStore((state) => state.buildFlow);
|
const buildFlow = useFlowStore((state) => state.buildFlow);
|
||||||
const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
|
const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
|
||||||
const lockChat = useFlowStore((state) => state.lockChat);
|
|
||||||
const setLockChat = useFlowStore((state) => state.setLockChat);
|
|
||||||
const isBuilding = useFlowStore((state) => state.isBuilding);
|
const isBuilding = useFlowStore((state) => state.isBuilding);
|
||||||
const messages = useMessagesStore((state) => state.messages);
|
const messages = useMessagesStore((state) => state.messages);
|
||||||
const [sessions, setSessions] = useState<string[]>(
|
const [sessions, setSessions] = useState<string[]>(
|
||||||
|
|
@ -147,8 +146,6 @@ export default function IOModal({
|
||||||
files?: string[];
|
files?: string[];
|
||||||
}): Promise<void> => {
|
}): Promise<void> => {
|
||||||
if (isBuilding) return;
|
if (isBuilding) return;
|
||||||
setIsBuilding(true);
|
|
||||||
setLockChat(true);
|
|
||||||
setChatValue("");
|
setChatValue("");
|
||||||
for (let i = 0; i < repeat; i++) {
|
for (let i = 0; i < repeat; i++) {
|
||||||
await buildFlow({
|
await buildFlow({
|
||||||
|
|
@ -157,24 +154,12 @@ export default function IOModal({
|
||||||
files: files,
|
files: files,
|
||||||
silent: true,
|
silent: true,
|
||||||
session: sessionId,
|
session: sessionId,
|
||||||
setLockChat,
|
|
||||||
}).catch((err) => {
|
}).catch((err) => {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
setLockChat(false);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// refetch();
|
|
||||||
setLockChat(false);
|
|
||||||
},
|
},
|
||||||
[
|
[isBuilding, setIsBuilding, chatValue, chatInput?.id, sessionId, buildFlow],
|
||||||
isBuilding,
|
|
||||||
setIsBuilding,
|
|
||||||
setLockChat,
|
|
||||||
chatValue,
|
|
||||||
chatInput?.id,
|
|
||||||
sessionId,
|
|
||||||
buildFlow,
|
|
||||||
],
|
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -331,8 +316,6 @@ export default function IOModal({
|
||||||
messagesFetched={messagesFetched}
|
messagesFetched={messagesFetched}
|
||||||
sessionId={sessionId}
|
sessionId={sessionId}
|
||||||
sendMessage={sendMessage}
|
sendMessage={sendMessage}
|
||||||
lockChat={lockChat}
|
|
||||||
setLockChat={setLockChat}
|
|
||||||
canvasOpen={canvasOpen}
|
canvasOpen={canvasOpen}
|
||||||
setOpen={setOpen}
|
setOpen={setOpen}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,6 @@ export type ChatViewWrapperProps = {
|
||||||
messagesFetched: boolean;
|
messagesFetched: boolean;
|
||||||
sessionId: string;
|
sessionId: string;
|
||||||
sendMessage: (options: { repeat: number; files?: string[] }) => Promise<void>;
|
sendMessage: (options: { repeat: number; files?: string[] }) => Promise<void>;
|
||||||
lockChat: boolean;
|
|
||||||
setLockChat: (locked: boolean) => void;
|
|
||||||
canvasOpen: boolean | undefined;
|
canvasOpen: boolean | undefined;
|
||||||
setOpen: (open: boolean) => void;
|
setOpen: (open: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,6 @@ import useAlertStore from "./alertStore";
|
||||||
import { useDarkStore } from "./darkStore";
|
import { useDarkStore } from "./darkStore";
|
||||||
import useFlowsManagerStore from "./flowsManagerStore";
|
import useFlowsManagerStore from "./flowsManagerStore";
|
||||||
import { useGlobalVariablesStore } from "./globalVariablesStore/globalVariables";
|
import { useGlobalVariablesStore } from "./globalVariablesStore/globalVariables";
|
||||||
import { useMessagesStore } from "./messagesStore";
|
|
||||||
import { useTypesStore } from "./typesStore";
|
import { useTypesStore } from "./typesStore";
|
||||||
|
|
||||||
// this is our useStore hook that we can use in our components to get parts of the store and call actions
|
// this is our useStore hook that we can use in our components to get parts of the store and call actions
|
||||||
|
|
@ -101,11 +100,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
||||||
set({ componentsToUpdate: outdatedNodes });
|
set({ componentsToUpdate: outdatedNodes });
|
||||||
},
|
},
|
||||||
onFlowPage: false,
|
onFlowPage: false,
|
||||||
lockChat: false,
|
|
||||||
setLockChat: (lockChat) => {
|
|
||||||
useMessagesStore.setState({ displayLoadingMessage: lockChat });
|
|
||||||
set({ lockChat });
|
|
||||||
},
|
|
||||||
setOnFlowPage: (FlowPage) => set({ onFlowPage: FlowPage }),
|
setOnFlowPage: (FlowPage) => set({ onFlowPage: FlowPage }),
|
||||||
flowState: undefined,
|
flowState: undefined,
|
||||||
flowBuildStatus: {},
|
flowBuildStatus: {},
|
||||||
|
|
@ -120,7 +114,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
||||||
);
|
);
|
||||||
set({ isBuilding: false });
|
set({ isBuilding: false });
|
||||||
get().revertBuiltStatusFromBuilding();
|
get().revertBuiltStatusFromBuilding();
|
||||||
get().setLockChat(false);
|
|
||||||
useAlertStore.getState().setErrorData({
|
useAlertStore.getState().setErrorData({
|
||||||
title: "Build stopped",
|
title: "Build stopped",
|
||||||
});
|
});
|
||||||
|
|
@ -595,7 +588,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
||||||
input_value,
|
input_value,
|
||||||
files,
|
files,
|
||||||
silent,
|
silent,
|
||||||
setLockChat,
|
|
||||||
session,
|
session,
|
||||||
}: {
|
}: {
|
||||||
startNodeId?: string;
|
startNodeId?: string;
|
||||||
|
|
@ -603,11 +595,9 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
||||||
input_value?: string;
|
input_value?: string;
|
||||||
files?: string[];
|
files?: string[];
|
||||||
silent?: boolean;
|
silent?: boolean;
|
||||||
setLockChat?: (lock: boolean) => void;
|
|
||||||
session?: string;
|
session?: string;
|
||||||
}) => {
|
}) => {
|
||||||
get().setIsBuilding(true);
|
get().setIsBuilding(true);
|
||||||
get().setLockChat(true);
|
|
||||||
const currentFlow = useFlowsManagerStore.getState().currentFlow;
|
const currentFlow = useFlowsManagerStore.getState().currentFlow;
|
||||||
const setSuccessData = useAlertStore.getState().setSuccessData;
|
const setSuccessData = useAlertStore.getState().setSuccessData;
|
||||||
const setErrorData = useAlertStore.getState().setErrorData;
|
const setErrorData = useAlertStore.getState().setErrorData;
|
||||||
|
|
@ -627,7 +617,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
||||||
}
|
}
|
||||||
if (error) {
|
if (error) {
|
||||||
get().setIsBuilding(false);
|
get().setIsBuilding(false);
|
||||||
get().setLockChat(false);
|
|
||||||
throw new Error("Invalid components");
|
throw new Error("Invalid components");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -734,7 +723,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
||||||
flowId: currentFlow!.id,
|
flowId: currentFlow!.id,
|
||||||
startNodeId,
|
startNodeId,
|
||||||
stopNodeId,
|
stopNodeId,
|
||||||
setLockChat,
|
|
||||||
onGetOrderSuccess: () => {
|
onGetOrderSuccess: () => {
|
||||||
if (!silent) {
|
if (!silent) {
|
||||||
setNoticeData({ title: "Running components" });
|
setNoticeData({ title: "Running components" });
|
||||||
|
|
@ -759,7 +747,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
||||||
false,
|
false,
|
||||||
);
|
);
|
||||||
get().setIsBuilding(false);
|
get().setIsBuilding(false);
|
||||||
get().setLockChat(false);
|
|
||||||
},
|
},
|
||||||
onBuildUpdate: handleBuildUpdate,
|
onBuildUpdate: handleBuildUpdate,
|
||||||
onBuildError: (title: string, list: string[], elementList) => {
|
onBuildError: (title: string, list: string[], elementList) => {
|
||||||
|
|
@ -779,7 +766,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
||||||
);
|
);
|
||||||
setErrorData({ list, title });
|
setErrorData({ list, title });
|
||||||
get().setIsBuilding(false);
|
get().setIsBuilding(false);
|
||||||
get().setLockChat(false);
|
|
||||||
get().buildController.abort();
|
get().buildController.abort();
|
||||||
},
|
},
|
||||||
onBuildStart: (elementList) => {
|
onBuildStart: (elementList) => {
|
||||||
|
|
@ -807,7 +793,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
||||||
logBuilds: get().onFlowPage,
|
logBuilds: get().onFlowPage,
|
||||||
});
|
});
|
||||||
get().setIsBuilding(false);
|
get().setIsBuilding(false);
|
||||||
get().setLockChat(false);
|
|
||||||
get().revertBuiltStatusFromBuilding();
|
get().revertBuiltStatusFromBuilding();
|
||||||
},
|
},
|
||||||
getFlow: () => {
|
getFlow: () => {
|
||||||
|
|
|
||||||
|
|
@ -505,7 +505,6 @@ export type ChatInputType = {
|
||||||
inputRef: {
|
inputRef: {
|
||||||
current: any;
|
current: any;
|
||||||
};
|
};
|
||||||
lockChat: boolean;
|
|
||||||
noInput: boolean;
|
noInput: boolean;
|
||||||
sendMessage: ({
|
sendMessage: ({
|
||||||
repeat,
|
repeat,
|
||||||
|
|
@ -593,9 +592,7 @@ export type codeAreaModalPropsType = {
|
||||||
|
|
||||||
export type chatMessagePropsType = {
|
export type chatMessagePropsType = {
|
||||||
chat: ChatMessageType;
|
chat: ChatMessageType;
|
||||||
lockChat: boolean;
|
|
||||||
lastMessage: boolean;
|
lastMessage: boolean;
|
||||||
setLockChat: (lock: boolean) => void;
|
|
||||||
updateChat: (
|
updateChat: (
|
||||||
chat: ChatMessageType,
|
chat: ChatMessageType,
|
||||||
message: string,
|
message: string,
|
||||||
|
|
@ -772,8 +769,6 @@ export type chatViewProps = {
|
||||||
repeat: number;
|
repeat: number;
|
||||||
files?: string[];
|
files?: string[];
|
||||||
}) => void;
|
}) => void;
|
||||||
lockChat: boolean;
|
|
||||||
setLockChat: (lock: boolean) => void;
|
|
||||||
visibleSession?: string;
|
visibleSession?: string;
|
||||||
focusChat?: string;
|
focusChat?: string;
|
||||||
closeChat?: () => void;
|
closeChat?: () => void;
|
||||||
|
|
@ -794,15 +789,11 @@ export type toolbarSelectItemProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export type clearChatPropsType = {
|
export type clearChatPropsType = {
|
||||||
lockChat: boolean;
|
|
||||||
setLockChat: (lock: boolean) => void;
|
|
||||||
setChatHistory: (chatHistory: ChatMessageType) => void;
|
setChatHistory: (chatHistory: ChatMessageType) => void;
|
||||||
method: string;
|
method: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type handleSelectPropsType = {
|
export type handleSelectPropsType = {
|
||||||
event: string;
|
event: string;
|
||||||
lockChat: boolean;
|
|
||||||
setLockChat: (lock: boolean) => void;
|
|
||||||
setChatHistory: (chatHistory: ChatMessageType) => void;
|
setChatHistory: (chatHistory: ChatMessageType) => void;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -145,10 +145,8 @@ export type FlowStoreType = {
|
||||||
input_value,
|
input_value,
|
||||||
files,
|
files,
|
||||||
silent,
|
silent,
|
||||||
setLockChat,
|
|
||||||
session,
|
session,
|
||||||
}: {
|
}: {
|
||||||
setLockChat?: (lock: boolean) => void;
|
|
||||||
startNodeId?: string;
|
startNodeId?: string;
|
||||||
stopNodeId?: string;
|
stopNodeId?: string;
|
||||||
input_value?: string;
|
input_value?: string;
|
||||||
|
|
@ -184,8 +182,6 @@ export type FlowStoreType = {
|
||||||
buildId?: string,
|
buildId?: string,
|
||||||
) => void;
|
) => void;
|
||||||
getNodePosition: (nodeId: string) => { x: number; y: number };
|
getNodePosition: (nodeId: string) => { x: number; y: number };
|
||||||
setLockChat: (lock: boolean) => void;
|
|
||||||
lockChat: boolean;
|
|
||||||
updateFreezeStatus: (nodeIds: string[], freeze: boolean) => void;
|
updateFreezeStatus: (nodeIds: string[], freeze: boolean) => void;
|
||||||
currentFlow: FlowType | undefined;
|
currentFlow: FlowType | undefined;
|
||||||
setCurrentFlow: (flow: FlowType | undefined) => void;
|
setCurrentFlow: (flow: FlowType | undefined) => void;
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,6 @@ import { VertexLayerElementType } from "../types/zustand/flow";
|
||||||
import { isStringArray, tryParseJson } from "./utils";
|
import { isStringArray, tryParseJson } from "./utils";
|
||||||
|
|
||||||
type BuildVerticesParams = {
|
type BuildVerticesParams = {
|
||||||
setLockChat?: (lock: boolean) => void;
|
|
||||||
flowId: string; // Assuming FlowType is the type for your flow
|
flowId: string; // Assuming FlowType is the type for your flow
|
||||||
input_value?: any; // Replace any with the actual type if it's not any
|
input_value?: any; // Replace any with the actual type if it's not any
|
||||||
files?: string[];
|
files?: string[];
|
||||||
|
|
@ -66,7 +65,6 @@ function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
|
||||||
|
|
||||||
export async function updateVerticesOrder(
|
export async function updateVerticesOrder(
|
||||||
flowId: string,
|
flowId: string,
|
||||||
setLockChat?: (lock: boolean) => void,
|
|
||||||
startNodeId?: string | null,
|
startNodeId?: string | null,
|
||||||
stopNodeId?: string | null,
|
stopNodeId?: string | null,
|
||||||
nodes?: Node[],
|
nodes?: Node[],
|
||||||
|
|
@ -94,7 +92,6 @@ export async function updateVerticesOrder(
|
||||||
list: [error.response?.data?.detail ?? "Unknown Error"],
|
list: [error.response?.data?.detail ?? "Unknown Error"],
|
||||||
});
|
});
|
||||||
useFlowStore.getState().setIsBuilding(false);
|
useFlowStore.getState().setIsBuilding(false);
|
||||||
setLockChat && setLockChat(false);
|
|
||||||
throw new Error("Invalid components");
|
throw new Error("Invalid components");
|
||||||
}
|
}
|
||||||
// orderResponse.data.ids,
|
// orderResponse.data.ids,
|
||||||
|
|
@ -154,7 +151,6 @@ export async function buildFlowVertices({
|
||||||
nodes,
|
nodes,
|
||||||
edges,
|
edges,
|
||||||
logBuilds,
|
logBuilds,
|
||||||
setLockChat,
|
|
||||||
session,
|
session,
|
||||||
}: BuildVerticesParams) {
|
}: BuildVerticesParams) {
|
||||||
const inputs = {};
|
const inputs = {};
|
||||||
|
|
@ -226,7 +222,6 @@ export async function buildFlowVertices({
|
||||||
return true;
|
return true;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
useFlowStore.getState().setIsBuilding(false);
|
useFlowStore.getState().setIsBuilding(false);
|
||||||
setLockChat && setLockChat(false);
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -381,7 +376,6 @@ export async function buildVertices({
|
||||||
onValidateNodes,
|
onValidateNodes,
|
||||||
nodes,
|
nodes,
|
||||||
edges,
|
edges,
|
||||||
setLockChat,
|
|
||||||
}: BuildVerticesParams) {
|
}: BuildVerticesParams) {
|
||||||
// if startNodeId and stopNodeId are provided
|
// if startNodeId and stopNodeId are provided
|
||||||
// something is wrong
|
// something is wrong
|
||||||
|
|
@ -390,7 +384,6 @@ export async function buildVertices({
|
||||||
}
|
}
|
||||||
let verticesOrderResponse = await updateVerticesOrder(
|
let verticesOrderResponse = await updateVerticesOrder(
|
||||||
flowId,
|
flowId,
|
||||||
setLockChat,
|
|
||||||
startNodeId,
|
startNodeId,
|
||||||
stopNodeId,
|
stopNodeId,
|
||||||
nodes,
|
nodes,
|
||||||
|
|
@ -401,7 +394,6 @@ export async function buildVertices({
|
||||||
onValidateNodes(verticesOrderResponse.verticesToRun);
|
onValidateNodes(verticesOrderResponse.verticesToRun);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
useFlowStore.getState().setIsBuilding(false);
|
useFlowStore.getState().setIsBuilding(false);
|
||||||
setLockChat && setLockChat(false);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue