diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx index 116b03916..c46a720b2 100644 --- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx +++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx @@ -3,18 +3,30 @@ import { MessagesSquare } from "lucide-react"; import { alertContext } from "../../../contexts/alertContext"; import { useContext } from "react"; -import ShadTooltip from "../../ShadTooltipComponent"; +import { + CHAT_CANNOT_OPEN_DESCRIPTION, + CHAT_CANNOT_OPEN_TITLE, + FLOW_NOT_BUILT_DESCRIPTION, + FLOW_NOT_BUILT_TITLE, +} from "../../../constants"; -export default function ChatTrigger({ open, setOpen, isBuilt }) { +export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) { const { setErrorData } = useContext(alertContext); function handleClick() { if (isBuilt) { - setOpen(true); + if (canOpen) { + setOpen(true); + } else { + setErrorData({ + title: CHAT_CANNOT_OPEN_TITLE, + list: [CHAT_CANNOT_OPEN_DESCRIPTION], + }); + } } else { setErrorData({ - title: "Flow not built", - list: ["Please build the flow before chatting"], + title: FLOW_NOT_BUILT_TITLE, + list: [FLOW_NOT_BUILT_DESCRIPTION], }); } } @@ -30,15 +42,26 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) { leaveFrom="translate-y-0" leaveTo="translate-y-96" > - + ); } diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index 3c01e9c8b..9130be694 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/src/frontend/src/components/chatComponent/index.tsx @@ -13,6 +13,7 @@ import * as _ from "lodash"; export default function Chat({ flow }: ChatType) { const [open, setOpen] = useState(false); const [isBuilt, setIsBuilt] = useState(false); + const [canOpen, setCanOpen] = useState(false); const { tabsState } = useContext(TabsContext); useEffect(() => { @@ -58,6 +59,17 @@ export default function Chat({ flow }: ChatType) { ) { setIsBuilt(false); } + if ( + tabsState && + tabsState[flow.id] && + tabsState[flow.id].formKeysData && + tabsState[flow.id].formKeysData.input_keys && + Object.keys(tabsState[flow.id].formKeysData.input_keys).length > 0 + ) { + setCanOpen(true); + } else { + setCanOpen(false); + } prevNodesRef.current = currentNodes; }, [tabsState]); @@ -71,10 +83,15 @@ export default function Chat({ flow }: ChatType) { setIsBuilt={setIsBuilt} isBuilt={isBuilt} /> - {isBuilt && ( + {isBuilt && canOpen && ( )} - + ); diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index b26789b06..d48bcdf2e 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -50,6 +50,15 @@ export const CODE_PROMPT_DIALOG_SUBTITLE = export const PROMPT_DIALOG_SUBTITLE = "Create your prompt. Prompts can help guide the behavior of a Language Model."; +export const CHAT_CANNOT_OPEN_TITLE = "Chat Cannot Open"; + +export const CHAT_CANNOT_OPEN_DESCRIPTION = "This is not a chat flow."; + +export const FLOW_NOT_BUILT_TITLE = "Flow not built"; + +export const FLOW_NOT_BUILT_DESCRIPTION = + "Please build the flow before chatting."; + /** * The base text for subtitle of Text Dialog * @constant @@ -180,7 +189,7 @@ export const EXPORT_CODE_DIALOG = export const COLUMN_DIV_STYLE = " w-full h-full flex overflow-auto flex-col bg-muted px-16 "; - export const NAV_DISPLAY_STYLE = +export const NAV_DISPLAY_STYLE = " w-full flex justify-between py-12 pb-2 px-6 "; /** @@ -210,7 +219,8 @@ export const DESCRIPTIONS: string[] = [ "Conversational Cartography Unlocked.", "Design, Develop, Dialogize.", ]; -export const BUTTON_DIV_STYLE = " flex gap-2 focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none "; +export const BUTTON_DIV_STYLE = + " flex gap-2 focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none "; /** * The base text for subtitle of code dialog