diff --git a/src/frontend/src/components/common/storeCardComponent/index.tsx b/src/frontend/src/components/common/storeCardComponent/index.tsx index 4f4445145..2ff73d811 100644 --- a/src/frontend/src/components/common/storeCardComponent/index.tsx +++ b/src/frontend/src/components/common/storeCardComponent/index.tsx @@ -1,8 +1,6 @@ import { usePostLikeComponent } from "@/controllers/API/queries/store"; import { useState } from "react"; import { getComponent } from "../../../controllers/API"; -import IOModalOld from "../../../modals/IOModal"; -import IOModalNew from "../../../modals/IOModal/newModal"; import useAlertStore from "../../../stores/alertStore"; import useFlowsManagerStore from "../../../stores/flowsManagerStore"; import { useStoreStore } from "../../../stores/storeStore"; diff --git a/src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx b/src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx index 8bc3806e5..384942fa5 100644 --- a/src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx +++ b/src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx @@ -1,6 +1,6 @@ import ForwardedIconComponent from "@/components/common/genericIconComponent"; import ShadTooltip from "@/components/common/shadTooltipComponent"; -import IOModal from "@/modals/IOModal/newModal"; +import IOModal from "@/modals/IOModal/new-modal"; const PlaygroundButton = ({ hasIO, open, setOpen, canvasOpen }) => { const PlayIcon = () => ( diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/csvSelect/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/csv-selected.tsx similarity index 95% rename from src/frontend/src/modals/IOModal/components/IOFieldView/components/csvSelect/index.tsx rename to src/frontend/src/modals/IOModal/components/IOFieldView/components/csv-selected.tsx index 5adb156ef..e1c0e804c 100644 --- a/src/frontend/src/modals/IOModal/components/IOFieldView/components/csvSelect/index.tsx +++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/csv-selected.tsx @@ -5,7 +5,7 @@ import { SelectItem, SelectTrigger, SelectValue, -} from "../../../../../../components/ui/select"; +} from "../../../../../components/ui/select"; export default function CsvSelect({ node, handleChangeSelect }): JSX.Element { return ( diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/file-input.tsx similarity index 92% rename from src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx rename to src/frontend/src/modals/IOModal/components/IOFieldView/components/file-input.tsx index 100260cc7..c48ae84da 100644 --- a/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx +++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/file-input.tsx @@ -1,17 +1,17 @@ -import { Button } from "../../../../../../components/ui/button"; +import { Button } from "../../../../../components/ui/button"; import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file"; import { createFileUpload } from "@/helpers/create-file-upload"; import useFileSizeValidator from "@/shared/hooks/use-file-size-validator"; import useAlertStore from "@/stores/alertStore"; import { useEffect, useState } from "react"; -import IconComponent from "../../../../../../components/common/genericIconComponent"; +import IconComponent from "../../../../../components/common/genericIconComponent"; import { ALLOWED_IMAGE_INPUT_EXTENSIONS, BASE_URL_API, -} from "../../../../../../constants/constants"; -import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore"; -import { IOFileInputProps } from "../../../../../../types/components"; +} from "../../../../../constants/constants"; +import useFlowsManagerStore from "../../../../../stores/flowsManagerStore"; +import { IOFileInputProps } from "../../../../../types/components"; export default function IOFileInput({ field, updateValue }: IOFileInputProps) { //component to handle file upload from chatIO diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/json-input.tsx similarity index 94% rename from src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx rename to src/frontend/src/modals/IOModal/components/IOFieldView/components/json-input.tsx index 216e2dbc0..928dd91eb 100644 --- a/src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx +++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/json-input.tsx @@ -1,7 +1,7 @@ import { IOJSONInputComponentType } from "@/types/components"; import { useEffect, useRef } from "react"; import JsonView from "react18-json-view"; -import { useDarkStore } from "../../../../../../stores/darkStore"; +import { useDarkStore } from "../../../../../stores/darkStore"; export default function IoJsonInput({ value = [], diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/key-pair-input.tsx similarity index 93% rename from src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx rename to src/frontend/src/modals/IOModal/components/IOFieldView/components/key-pair-input.tsx index 0b5244b5f..cfde9958c 100644 --- a/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx +++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/key-pair-input.tsx @@ -1,8 +1,8 @@ import _ from "lodash"; import { useRef } from "react"; -import IconComponent from "../../../../../../components/common/genericIconComponent"; -import { Input } from "../../../../../../components/ui/input"; -import { classNames } from "../../../../../../utils/utils"; +import IconComponent from "../../../../../components/common/genericIconComponent"; +import { Input } from "../../../../../components/ui/input"; +import { classNames } from "../../../../../utils/utils"; export type IOKeyPairInputProps = { value: any; diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/sessionSelector/newSessionSelector.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/session-selector.tsx similarity index 100% rename from src/frontend/src/modals/IOModal/components/IOFieldView/components/sessionSelector/newSessionSelector.tsx rename to src/frontend/src/modals/IOModal/components/IOFieldView/components/session-selector.tsx diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/sessionSelector/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/sessionSelector/index.tsx deleted file mode 100644 index 2294d61cf..000000000 --- a/src/frontend/src/modals/IOModal/components/IOFieldView/components/sessionSelector/index.tsx +++ /dev/null @@ -1,214 +0,0 @@ -import IconComponent from "@/components/common/genericIconComponent"; -import ShadTooltip from "@/components/common/shadTooltipComponent"; -import { Badge } from "@/components/ui/badge"; -import { Input } from "@/components/ui/input"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, -} from "@/components/ui/select-custom"; -import { useUpdateSessionName } from "@/controllers/API/queries/messages/use-rename-session"; -import useFlowStore from "@/stores/flowStore"; -import { cn } from "@/utils/utils"; -import React, { useEffect, useRef, useState } from "react"; - -export default function SessionSelector({ - deleteSession, - session, - toggleVisibility, - isVisible, - inspectSession, - updateVisibleSession, - selectedView, - setSelectedView, -}: { - deleteSession: (session: string) => void; - session: string; - toggleVisibility: () => void; - isVisible: boolean; - inspectSession: (session: string) => void; - updateVisibleSession: (session: string) => void; - selectedView?: { type: string; id: string }; - setSelectedView: (view: { type: string; id: string } | undefined) => void; -}) { - const currentFlowId = useFlowStore((state) => state.currentFlow?.id); - const [isEditing, setIsEditing] = useState(false); - const [editedSession, setEditedSession] = useState(session); - const { mutate: updateSessionName } = useUpdateSessionName(); - const inputRef = useRef(null); - - useEffect(() => { - setEditedSession(session); - }, [session]); - - const handleEditClick = (e?: React.MouseEvent) => { - e?.stopPropagation(); - setIsEditing(true); - }; - - const handleInputChange = (e: React.ChangeEvent) => { - setEditedSession(e.target.value); - }; - - const handleConfirm = () => { - setIsEditing(false); - if (editedSession.trim() !== session) { - updateSessionName( - { old_session_id: session, new_session_id: editedSession.trim() }, - { - onSuccess: () => { - if (isVisible) { - updateVisibleSession(editedSession); - } - if ( - selectedView?.type === "Session" && - selectedView?.id === session - ) { - setSelectedView({ type: "Session", id: editedSession }); - } - }, - }, - ); - } - }; - - const handleCancel = () => { - setIsEditing(false); - setEditedSession(session); - }; - - const handleSelectChange = (value: string) => { - switch (value) { - case "rename": - handleEditClick(); - break; - case "messageLogs": - inspectSession(session); - break; - case "delete": - deleteSession(session); - break; - } - }; - - return ( -
{ - if (isEditing) e.stopPropagation(); - else toggleVisibility(); - }} - className={cn( - "file-component-accordion-div group cursor-pointer rounded-md hover:bg-muted-foreground/30", - isVisible ? "bg-muted-foreground/15" : "", - )} - > -
-
- {isEditing ? ( -
- { - if (e.key === "Enter") { - e.preventDefault(); - e.stopPropagation(); - handleConfirm(); - } - }} - onChange={handleInputChange} - onBlur={(e) => { - console.log(e.relatedTarget); - if ( - !e.relatedTarget || - e.relatedTarget.getAttribute("data-confirm") !== "true" - ) { - handleCancel(); - } - }} - autoFocus - className="h-6 flex-grow px-1 py-0" - /> - - -
- ) : ( - -
- - {session === currentFlowId ? "Default Session" : session} - -
- - )} -
- -
-
- ); -} diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/io-field-view.tsx similarity index 97% rename from src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx rename to src/frontend/src/modals/IOModal/components/IOFieldView/io-field-view.tsx index 820b5c201..5daf4042c 100644 --- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx +++ b/src/frontend/src/modals/IOModal/components/IOFieldView/io-field-view.tsx @@ -21,10 +21,10 @@ import { convertValuesToNumbers, hasDuplicateKeys, } from "../../../../utils/reactflowUtils"; -import IOFileInput from "./components/FileInput"; -import IoJsonInput from "./components/JSONInput"; -import CsvSelect from "./components/csvSelect"; -import IOKeyPairInput from "./components/keyPairInput"; +import CsvSelect from "./components/csv-selected"; +import IOFileInput from "./components/file-input"; +import IoJsonInput from "./components/json-input"; +import IOKeyPairInput from "./components/key-pair-input"; export default function IOFieldView({ type, diff --git a/src/frontend/src/modals/IOModal/components/chatViewWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx similarity index 91% rename from src/frontend/src/modals/IOModal/components/chatViewWrapper/index.tsx rename to src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx index fa141dbc1..32f01029c 100644 --- a/src/frontend/src/modals/IOModal/components/chatViewWrapper/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx @@ -2,9 +2,9 @@ import ShadTooltip from "@/components/common/shadTooltipComponent"; import { Button } from "@/components/ui/button"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/utils/utils"; -import IconComponent from "../../../../components/common/genericIconComponent"; -import { ChatViewWrapperProps } from "../../types/chat-view-wrapper"; -import ChatView from "../chatView/newChatView"; +import IconComponent from "../../../components/common/genericIconComponent"; +import { ChatViewWrapperProps } from "../types/chat-view-wrapper"; +import ChatView from "./chatView/chat-view"; export const ChatViewWrapper = ({ selectedViewField, @@ -19,8 +19,6 @@ export const ChatViewWrapper = ({ messagesFetched, sessionId, sendMessage, - chatValue, - setChatValue, lockChat, setLockChat, canvasOpen, @@ -95,8 +93,6 @@ export const ChatViewWrapper = ({ { + return ( + prevProps.chat.message === nextProps.chat.message && + prevProps.chat.id === nextProps.chat.id && + prevProps.chat.session === nextProps.chat.session && + prevProps.chat.content_blocks === nextProps.chat.content_blocks && + prevProps.chat.properties === nextProps.chat.properties + ); +}); export default function ChatView({ sendMessage, - chatValue, - setChatValue, lockChat, setLockChat, visibleSession, @@ -43,7 +52,7 @@ export default function ChatView({ const inputTypes = inputs.map((obj) => obj.type); const updateFlowPool = useFlowStore((state) => state.updateFlowPool); - + const setChatValueStore = useUtilityStore((state) => state.setChatValueStore); const isTabHidden = useTabVisibility(); //build chat history @@ -90,9 +99,11 @@ export default function ChatView({ }); if (messages.length === 0 && !lockChat && chatInputNode) { - setChatValue(chatInputNode.data.node.template["input_value"].value ?? ""); + setChatValueStore( + chatInputNode.data.node.template["input_value"].value ?? "", + ); } else { - isTabHidden ? setChatValue("") : null; + isTabHidden ? setChatValueStore("") : null; } setChatHistory(finalChatHistory); @@ -153,17 +164,19 @@ export default function ChatView({
{chatHistory && (lockChat || chatHistory?.length > 0 ? ( - chatHistory.map((chat, index) => ( - - )) + <> + {chatHistory?.map((chat, index) => ( + + ))} + ) : (
@@ -209,16 +222,12 @@ export default function ChatView({
{ sendMessage({ repeat, files }); track("Playground Message Sent"); }} - setChatValue={(value) => { - setChatValue(value); - }} inputRef={ref} files={files} setFiles={setFiles} diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/newChatInput.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsx similarity index 94% rename from src/frontend/src/modals/IOModal/components/chatView/chatInput/newChatInput.tsx rename to src/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsx index c1902b50f..fbb32f10e 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/newChatInput.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsx @@ -4,6 +4,7 @@ import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-uplo import useFileSizeValidator from "@/shared/hooks/use-file-size-validator"; import useAlertStore from "@/stores/alertStore"; import useFlowStore from "@/stores/flowStore"; +import { useUtilityStore } from "@/stores/utilityStore"; import { useEffect, useRef, useState } from "react"; import ShortUniqueId from "short-unique-id"; import { @@ -18,17 +19,15 @@ import { ChatInputType, FilePreviewType, } from "../../../../../types/components"; -import FilePreview from "../filePreviewChat/newFilePreview"; -import ButtonSendWrapper from "./components/buttonSendWrapper/newButtonSendWrapper"; -import TextAreaWrapper from "./components/textAreaWrapper/newTextAreaWrapper"; -import UploadFileButton from "./components/uploadFileButton/newUploadFileButton"; +import FilePreview from "../fileComponent/components/file-preview"; +import ButtonSendWrapper from "./components/button-send-wrapper"; +import TextAreaWrapper from "./components/text-area-wrapper"; +import UploadFileButton from "./components/upload-file-button"; import useAutoResizeTextArea from "./hooks/use-auto-resize-text-area"; import useFocusOnUnlock from "./hooks/use-focus-unlock"; export default function ChatInput({ lockChat, - chatValue, sendMessage, - setChatValue, inputRef, noInput, files, @@ -36,12 +35,13 @@ export default function ChatInput({ isDragging, }: ChatInputType): JSX.Element { const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId); - const [inputFocus, setInputFocus] = useState(false); const fileInputRef = useRef(null); const setErrorData = useAlertStore((state) => state.setErrorData); const { validateFileSize } = useFileSizeValidator(setErrorData); const stopBuilding = useFlowStore((state) => state.stopBuilding); + const chatValue = useUtilityStore((state) => state.chatValueStore); + useFocusOnUnlock(lockChat, inputRef); useAutoResizeTextArea(chatValue, inputRef); @@ -219,11 +219,9 @@ export default function ChatInput({ lockChat={lockChat} noInput={noInput} chatValue={chatValue} - setChatValue={setChatValue} CHAT_INPUT_PLACEHOLDER={CHAT_INPUT_PLACEHOLDER} CHAT_INPUT_PLACEHOLDER_SEND={CHAT_INPUT_PLACEHOLDER_SEND} inputRef={inputRef} - setInputFocus={setInputFocus} files={files} isDragging={isDragging} /> diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/newButtonSendWrapper.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/button-send-wrapper.tsx similarity index 89% rename from src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/newButtonSendWrapper.tsx rename to src/frontend/src/modals/IOModal/components/chatView/chatInput/components/button-send-wrapper.tsx index 5b171f2f5..ddc3ceda2 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/newButtonSendWrapper.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/button-send-wrapper.tsx @@ -1,9 +1,9 @@ import Loading from "@/components/ui/loading"; import useFlowStore from "@/stores/flowStore"; -import { Button } from "../../../../../../../components/ui/button"; -import { Case } from "../../../../../../../shared/components/caseComponent"; -import { FilePreviewType } from "../../../../../../../types/components"; -import { classNames } from "../../../../../../../utils/utils"; +import { Button } from "../../../../../../components/ui/button"; +import { Case } from "../../../../../../shared/components/caseComponent"; +import { FilePreviewType } from "../../../../../../types/components"; +import { classNames } from "../../../../../../utils/utils"; const BUTTON_STATES = { NO_INPUT: "bg-high-indigo text-background", diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx deleted file mode 100644 index c8993dbfe..000000000 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import useFlowStore from "@/stores/flowStore"; -import IconComponent from "../../../../../../../components/common/genericIconComponent"; -import { Button } from "../../../../../../../components/ui/button"; -import { Case } from "../../../../../../../shared/components/caseComponent"; -import { FilePreviewType } from "../../../../../../../types/components"; -import { classNames } from "../../../../../../../utils/utils"; - -const BUTTON_STATES = { - NO_INPUT: "bg-high-indigo text-background", - HAS_CHAT_VALUE: "text-primary", - SHOW_STOP: "bg-error text-background cursor-pointer", - DEFAULT: "bg-chat-send text-background", -}; - -type ButtonSendWrapperProps = { - send: () => void; - lockChat: boolean; - noInput: boolean; - chatValue: string; - files: FilePreviewType[]; -}; - -const ButtonSendWrapper = ({ - send, - lockChat, - noInput, - chatValue, - files, -}: ButtonSendWrapperProps) => { - const stopBuilding = useFlowStore((state) => state.stopBuilding); - - const isBuilding = useFlowStore((state) => state.isBuilding); - const showStopButton = lockChat || files.some((file) => file.loading); - const showPlayButton = !lockChat && noInput; - const showSendButton = - !(lockChat || files.some((file) => file.loading)) && !noInput; - - const getButtonState = () => { - if (showStopButton) return BUTTON_STATES.SHOW_STOP; - if (noInput) return BUTTON_STATES.NO_INPUT; - if (chatValue) return BUTTON_STATES.HAS_CHAT_VALUE; - - return BUTTON_STATES.DEFAULT; - }; - - const buttonClasses = classNames("form-modal-send-button", getButtonState()); - - const handleClick = () => { - if (showStopButton && isBuilding) { - stopBuilding(); - } else if (!showStopButton) { - send(); - } - }; - - return ( - - ); -}; - -export default ButtonSendWrapper; diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/newTextAreaWrapper.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/text-area-wrapper.tsx similarity index 83% rename from src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/newTextAreaWrapper.tsx rename to src/frontend/src/modals/IOModal/components/chatView/chatInput/components/text-area-wrapper.tsx index da4e82ef6..93fc6cbf0 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/newTextAreaWrapper.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/text-area-wrapper.tsx @@ -1,6 +1,7 @@ +import { useUtilityStore } from "@/stores/utilityStore"; import { useEffect } from "react"; -import { Textarea } from "../../../../../../../components/ui/textarea"; -import { classNames } from "../../../../../../../utils/utils"; +import { Textarea } from "../../../../../../components/ui/textarea"; +import { classNames } from "../../../../../../utils/utils"; const TextAreaWrapper = ({ checkSendingOk, @@ -8,11 +9,9 @@ const TextAreaWrapper = ({ lockChat, noInput, chatValue, - setChatValue, CHAT_INPUT_PLACEHOLDER, CHAT_INPUT_PLACEHOLDER_SEND, inputRef, - setInputFocus, files, isDragging, }) => { @@ -31,6 +30,8 @@ const TextAreaWrapper = ({ const fileClass = files.length > 0 ? "!rounded-t-none border-t-0" : ""; + const setChatValueStore = useUtilityStore((state) => state.setChatValueStore); + const additionalClassNames = "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"; @@ -43,10 +44,6 @@ const TextAreaWrapper = ({ return (