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

Format constant variables

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-03-03 22:22:15 -03:00
commit 763d9dee8e
21 changed files with 143 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -17,10 +17,10 @@ import TextAreaComponent from "../../../../components/textAreaComponent";
import ToggleShadComponent from "../../../../components/toggleShadComponent"; import ToggleShadComponent from "../../../../components/toggleShadComponent";
import { Button } from "../../../../components/ui/button"; import { Button } from "../../../../components/ui/button";
import { import {
INPUT_HANDLER_HOVER,
LANGFLOW_SUPPORTED_TYPES, LANGFLOW_SUPPORTED_TYPES,
OUTPUT_HANDLER_HOVER,
TOOLTIP_EMPTY, TOOLTIP_EMPTY,
inputHandleHover,
outputHandleHover,
} from "../../../../constants/constants"; } from "../../../../constants/constants";
import { postCustomComponentUpdate } from "../../../../controllers/API"; import { postCustomComponentUpdate } from "../../../../controllers/API";
import useAlertStore from "../../../../stores/alertStore"; import useAlertStore from "../../../../stores/alertStore";
@ -182,7 +182,7 @@ export default function ParameterComponent({
return ( return (
<div key={index}> <div key={index}>
{index === 0 && ( {index === 0 && (
<span>{left ? inputHandleHover : outputHandleHover}</span> <span>{left ? INPUT_HANDLER_HOVER : OUTPUT_HANDLER_HOVER}</span>
)} )}
<span <span
key={index} key={index}
@ -304,7 +304,10 @@ export default function ParameterComponent({
ref={ref} ref={ref}
className={ className={
"relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" + "relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" +
((name==="code" && type==="code") || (name.includes("code") && proxy) ? " hidden " : "") ((name === "code" && type === "code") ||
(name.includes("code") && proxy)
? " hidden "
: "")
} }
> >
<> <>

29
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -9,9 +9,9 @@ import Loading from "../../components/ui/loading";
import { Textarea } from "../../components/ui/textarea"; import { Textarea } from "../../components/ui/textarea";
import Xmark from "../../components/ui/xmark"; import Xmark from "../../components/ui/xmark";
import { import {
STATUS_BUILD,
STATUS_BUILDING,
priorityFields, priorityFields,
statusBuild,
statusBuilding,
} from "../../constants/constants"; } from "../../constants/constants";
import { BuildStatus } from "../../constants/enums"; import { BuildStatus } from "../../constants/enums";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent"; import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
@ -49,7 +49,12 @@ export default function GenericNode({
const [nodeDescription, setNodeDescription] = useState( const [nodeDescription, setNodeDescription] = useState(
data.node?.description! data.node?.description!
); );
const buildStatus = useFlowStore((state) => state.flowBuildStatus[data.id]); const buildStatus = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.status
);
const lastRunTime = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.timestamp
);
const [validationStatus, setValidationStatus] = const [validationStatus, setValidationStatus] =
useState<validationStatusType | null>(null); useState<validationStatusType | null>(null);
const [handles, setHandles] = useState<number>(0); const [handles, setHandles] = useState<number>(0);
@ -100,10 +105,7 @@ export default function GenericNode({
if (duration === undefined) { if (duration === undefined) {
return ""; return "";
} else { } else {
const nowTimestamp = new Date(Date.now()); return `Duration: ${duration}`;
// readable last run time like YYYY-MM-DD HH:MM:SS
const last_run_datetime = nowTimestamp.toLocaleString();
return `Last run: ${last_run_datetime}\nDuration: ${duration}`;
} }
}; };
const durationString = getDurationString(validationStatus?.data.duration); const durationString = getDurationString(validationStatus?.data.duration);
@ -487,9 +489,9 @@ export default function GenericNode({
<ShadTooltip <ShadTooltip
content={ content={
buildStatus === BuildStatus.BUILDING ? ( buildStatus === BuildStatus.BUILDING ? (
<span> {statusBuilding} </span> <span> {STATUS_BUILDING} </span>
) : !validationStatus ? ( ) : !validationStatus ? (
<span className="flex">{statusBuild}</span> <span className="flex">{STATUS_BUILD}</span>
) : ( ) : (
<div className="max-h-96 overflow-auto"> <div className="max-h-96 overflow-auto">
{typeof validationStatus.params === "string" {typeof validationStatus.params === "string"
@ -723,6 +725,15 @@ export default function GenericNode({
showNode={showNode} showNode={showNode}
/> />
)} )}
<div>
{lastRunTime && (
<div className="flex justify-center text-muted-foreground">
{lastRunTime.split("\n").map((line, index) => (
<div key={index}>{line}</div>
))}
</div>
)}
</div>
</> </>
</div> </div>
)} )}

4
src/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -6,7 +6,7 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "../../components/ui/popover"; } from "../../components/ui/popover";
import { zeroNotifications } from "../../constants/constants"; import { ZERO_NOTIFICATIONS } from "../../constants/constants";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import { AlertDropdownType } from "../../types/alerts"; import { AlertDropdownType } from "../../types/alerts";
import SingleAlert from "./components/singleAlertComponent"; import SingleAlert from "./components/singleAlertComponent";
@ -70,7 +70,7 @@ export default function AlertDropdown({
)) ))
) : ( ) : (
<div className="flex h-full w-full items-center justify-center pb-16 text-ring"> <div className="flex h-full w-full items-center justify-center pb-16 text-ring">
{zeroNotifications} {ZERO_NOTIFICATIONS}
</div> </div>
)} )}
</div> </div>

17
src/frontend/src/components/IOview/index.tsx
View file

@ -1,12 +1,13 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { import {
CHAT_FORM_DIALOG_SUBTITLE, CHAT_FORM_DIALOG_SUBTITLE,
outputsModalTitle, OUTPUTS_MODAL_TITLE,
textInputModalTitle, TEXT_INPUT_MODAL_TITLE,
} from "../../constants/constants"; } from "../../constants/constants";
import BaseModal from "../../modals/baseModal"; import BaseModal from "../../modals/baseModal";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { NodeType } from "../../types/flow";
import { updateVerticesOrder } from "../../utils/buildUtils"; import { updateVerticesOrder } from "../../utils/buildUtils";
import { cn } from "../../utils/utils"; import { cn } from "../../utils/utils";
import AccordionComponent from "../AccordionComponent"; import AccordionComponent from "../AccordionComponent";
@ -18,7 +19,6 @@ import NewChatView from "../newChatView";
import { Badge } from "../ui/badge"; import { Badge } from "../ui/badge";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { NodeType } from "../../types/flow";
export default function IOView({ children, open, setOpen }): JSX.Element { export default function IOView({ children, open, setOpen }): JSX.Element {
const inputs = useFlowStore((state) => state.inputs).filter( const inputs = useFlowStore((state) => state.inputs).filter(
@ -79,10 +79,9 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
}); });
} }
setLockChat(false); setLockChat(false);
if(chatInput) { if (chatInput) {
setNode(chatInput.id, (node:NodeType)=>{ setNode(chatInput.id, (node: NodeType) => {
const newNode = { ...node };
const newNode = {...node}
newNode.data.node!.template["input_value"].value = chatValue; newNode.data.node!.template["input_value"].value = chatValue;
return newNode; return newNode;
}); });
@ -148,7 +147,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
> >
<div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold"> <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
<IconComponent className="h-4 w-4" name={"Type"} /> <IconComponent className="h-4 w-4" name={"Type"} />
{textInputModalTitle} {TEXT_INPUT_MODAL_TITLE}
</div> </div>
{nodes {nodes
.filter((node) => .filter((node) =>
@ -209,7 +208,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
> >
<div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold"> <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
<IconComponent className="h-4 w-4" name={"FileType2"} /> <IconComponent className="h-4 w-4" name={"FileType2"} />
{outputsModalTitle} {OUTPUTS_MODAL_TITLE}
</div> </div>
{nodes {nodes
.filter((node) => .filter((node) =>

4
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -9,7 +9,7 @@ import {
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Node } from "reactflow"; import { Node } from "reactflow";
import { savedHover } from "../../../../constants/constants"; import { SAVED_HOVER } from "../../../../constants/constants";
import FlowSettingsModal from "../../../../modals/flowSettingsModal"; import FlowSettingsModal from "../../../../modals/flowSettingsModal";
import useAlertStore from "../../../../stores/alertStore"; import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore"; import useFlowStore from "../../../../stores/flowStore";
@ -128,7 +128,7 @@ export const MenuBar = ({
</div> </div>
<ShadTooltip <ShadTooltip
content={ content={
savedHover + SAVED_HOVER +
new Date(currentFlow.updated_at ?? "").toLocaleString("en-US", { new Date(currentFlow.updated_at ?? "").toLocaleString("en-US", {
hour: "numeric", hour: "numeric",
minute: "numeric", minute: "numeric",

6
src/frontend/src/components/newChatView/chatInput/index.tsx
View file

@ -2,8 +2,8 @@ import { useEffect, useState } from "react";
import IconComponent from "../../../components/genericIconComponent"; import IconComponent from "../../../components/genericIconComponent";
import { Textarea } from "../../../components/ui/textarea"; import { Textarea } from "../../../components/ui/textarea";
import { import {
chatInputPlaceholder, CHAT_INPUT_PLACEHOLDER,
chatInputPlaceholderSend, CHAT_INPUT_PLACEHOLDER_SEND,
} from "../../../constants/constants"; } from "../../../constants/constants";
import useFlowsManagerStore from "../../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../../stores/flowsManagerStore";
import { chatInputType } from "../../../types/components"; import { chatInputType } from "../../../types/components";
@ -84,7 +84,7 @@ export default function ChatInput({
"form-modal-lockchat" "form-modal-lockchat"
)} )}
placeholder={ placeholder={
noInput ? chatInputPlaceholder : chatInputPlaceholderSend noInput ? CHAT_INPUT_PLACEHOLDER : CHAT_INPUT_PLACEHOLDER_SEND
} }
/> />
<div className="form-modal-send-icon-position"> <div className="form-modal-send-icon-position">

8
src/frontend/src/components/newChatView/index.tsx
View file

@ -2,8 +2,8 @@ import { useEffect, useRef, useState } from "react";
import IconComponent from "../../components/genericIconComponent"; import IconComponent from "../../components/genericIconComponent";
import { NOCHATOUTPUT_NOTICE_ALERT } from "../../constants/alerts_constants"; import { NOCHATOUTPUT_NOTICE_ALERT } from "../../constants/alerts_constants";
import { import {
chatFirstInitialText, CHAT_FIRST_INITIAL_TEXT,
chatSecondInitialText, CHAT_SECOND_INITIAL_TEXT,
} from "../../constants/constants"; } from "../../constants/constants";
import { deleteFlowPool } from "../../controllers/API"; import { deleteFlowPool } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
@ -182,14 +182,14 @@ export default function NewChatView({
<br /> <br />
<div className="langflow-chat-desc"> <div className="langflow-chat-desc">
<span className="langflow-chat-desc-span"> <span className="langflow-chat-desc-span">
{chatFirstInitialText}{" "} {CHAT_FIRST_INITIAL_TEXT}{" "}
<span> <span>
<IconComponent <IconComponent
name="MessageSquare" name="MessageSquare"
className="mx-1 inline h-5 w-5 animate-bounce " className="mx-1 inline h-5 w-5 animate-bounce "
/> />
</span>{" "} </span>{" "}
{chatSecondInitialText} {CHAT_SECOND_INITIAL_TEXT}
</span> </span>
</div> </div>
</div> </div>

4
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -1,5 +1,5 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { editTextModalTitle } from "../../constants/constants"; import { EDIT_TEXT_MODAL_TITLE } from "../../constants/constants";
import { TypeModal } from "../../constants/enums"; import { TypeModal } from "../../constants/enums";
import GenericModal from "../../modals/genericModal"; import GenericModal from "../../modals/genericModal";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
@ -38,7 +38,7 @@ export default function TextAreaComponent({
<GenericModal <GenericModal
type={TypeModal.TEXT} type={TypeModal.TEXT}
buttonText="Finish Editing" buttonText="Finish Editing"
modalTitle={editTextModalTitle} modalTitle={EDIT_TEXT_MODAL_TITLE}
value={value} value={value}
setValue={(value: string) => { setValue={(value: string) => {
onChange(value); onChange(value);

3
src/frontend/src/constants/alerts_constants.tsx
View file

@ -56,3 +56,6 @@ export const USER_ADD_SUCCESS_ALERT = "Success! New user added!";
export const DEL_KEY_SUCCESS_ALERT = "Success! Key deleted!"; export const DEL_KEY_SUCCESS_ALERT = "Success! Key deleted!";
export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`; export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`;
export const SAVE_SUCCESS_ALERT = "Changes saved successfully!"; export const SAVE_SUCCESS_ALERT = "Changes saved successfully!";
// Generic Node

53
src/frontend/src/constants/constants.ts
View file

@ -691,38 +691,39 @@ export const priorityFields = new Set(["code", "template"]);
export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]); export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
export const OUTPUT_TYPES = new Set(["ChatOutput", "TextOutput"]); export const OUTPUT_TYPES = new Set(["ChatOutput", "TextOutput"]);
export const chatFirstInitialText = export const CHAT_FIRST_INITIAL_TEXT =
"Start a conversation and click the agent's thoughts"; "Start a conversation and click the agent's thoughts";
export const chatSecondInitialText = "to inspect the chaining process."; export const CHAT_SECOND_INITIAL_TEXT = "to inspect the chaining process.";
export const zeroNotifications = "No new notifications"; export const ZERO_NOTIFICATIONS = "No new notifications";
export const successBuild = "Built sucessfully ✨"; export const SUCCESS_BUILD = "Built sucessfully ✨";
export const alertSaveWApi = export const ALERT_SAVE_WITH_API =
"Caution: Uncheck this box only removes API keys from fields specifically designated for API keys."; "Caution: Uncheck this box only removes API keys from fields specifically designated for API keys.";
export const saveWApiCheckbox = "Save with my API keys"; export const SAVE_WITH_API_CHECKBOX = "Save with my API keys";
export const editTextModalTitle = "Edit Text"; export const EDIT_TEXT_MODAL_TITLE = "Edit Text";
export const editTextPlaceholder = "Type message here."; export const EDIT_TEXT_PLACEHOLDER = "Type message here.";
export const inputHandleHover = "Avaliable input components:"; export const INPUT_HANDLER_HOVER = "Avaliable input components:";
export const outputHandleHover = "Avaliable output components:"; export const OUTPUT_HANDLER_HOVER = "Avaliable output components:";
export const textInputModalTitle = "Text Inputs"; export const TEXT_INPUT_MODAL_TITLE = "Text Inputs";
export const outputsModalTitle = "Text Outputs"; export const OUTPUTS_MODAL_TITLE = "Text Outputs";
export const langflowChatTitle = "Langflow Chat"; export const LANGFLOW_CHAT_TITLE = "Langflow Chat";
export const chatInputPlaceholder = export const CHAT_INPUT_PLACEHOLDER =
"No chat input variables found. Click to run your flow."; "No chat input variables found. Click to run your flow.";
export const chatInputPlaceholderSend = "Send a message..."; export const CHAT_INPUT_PLACEHOLDER_SEND = "Send a message...";
export const editCodeTitle = "Edit Code"; export const EDIT_CODE_TITLE = "Edit Code";
export const myCollectionDesc = export const MY_COLLECTION_DESC =
"Manage your personal projects. Download and upload entire collections."; "Manage your personal projects. Download and upload entire collections.";
export const storeDesc = "Explore community-shared flows and components."; export const STORE_DESC = "Explore community-shared flows and components.";
export const storeTitle = "Langflow Store"; export const STORE_TITLE = "Langflow Store";
export const noApi = "You don't have an API key. "; export const NO_API_KEY = "You don't have an API key. ";
export const insertApi = "Insert your Langflow API key."; export const INSERT_API_KEY = "Insert your Langflow API key.";
export const invalidApi = "Your API key is not valid. "; export const INVALID_API_KEY = "Your API key is not valid. ";
export const createApi = `Don’t have an API key? Sign up at`; export const CREATE_API_KEY = `Don’t have an API key? Sign up at`;
export const statusBuild = "Build to validate status."; export const STATUS_BUILD = "Build to validate status.";
export const statusBuilding = "Building..."; export const STATUS_BUILDING = "Building...";
export const savedHover = "Last saved at "; export const SAVED_HOVER = "Last saved at ";
export const RUN_TIMESTAMP_PREFIX = "Last Run: ";

17
src/frontend/src/modals/StoreApiKeyModal/index.tsx
View file

@ -8,10 +8,10 @@ import {
API_SUCCESS_ALERT, API_SUCCESS_ALERT,
} from "../../constants/alerts_constants"; } from "../../constants/alerts_constants";
import { import {
createApi, CREATE_API_KEY,
insertApi, INSERT_API_KEY,
invalidApi, INVALID_API_KEY,
noApi, NO_API_KEY,
} from "../../constants/constants"; } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext"; import { AuthContext } from "../../contexts/authContext";
import { addApiKeyStore } from "../../controllers/API"; import { addApiKeyStore } from "../../controllers/API";
@ -68,8 +68,11 @@ export default function StoreApiKeyModal({
<BaseModal.Trigger asChild>{children}</BaseModal.Trigger> <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
<BaseModal.Header <BaseModal.Header
description={ description={
(hasApiKey && !validApiKey ? invalidApi : !hasApiKey ? noApi : "") + (hasApiKey && !validApiKey
insertApi ? INVALID_API_KEY
: !hasApiKey
? NO_API_KEY
: "") + INSERT_API_KEY
} }
> >
<span className="pr-2">API Key</span> <span className="pr-2">API Key</span>
@ -104,7 +107,7 @@ export default function StoreApiKeyModal({
</div> </div>
<div className="flex items-end justify-between"> <div className="flex items-end justify-between">
<span className="pr-1 text-xs text-muted-foreground"> <span className="pr-1 text-xs text-muted-foreground">
{createApi}{" "} {CREATE_API_KEY}{" "}
<a <a
className="text-high-indigo underline" className="text-high-indigo underline"
href="https://langflow.store/" href="https://langflow.store/"

9
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -18,7 +18,7 @@ import {
} from "../../constants/alerts_constants"; } from "../../constants/alerts_constants";
import { import {
CODE_PROMPT_DIALOG_SUBTITLE, CODE_PROMPT_DIALOG_SUBTITLE,
editCodeTitle, EDIT_CODE_TITLE,
} from "../../constants/constants"; } from "../../constants/constants";
import { postCustomComponent, postValidateCode } from "../../controllers/API"; import { postCustomComponent, postValidateCode } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
@ -39,7 +39,10 @@ export default function CodeAreaModal({
setOpen: mySetOpen, setOpen: mySetOpen,
}: codeAreaModalPropsType): JSX.Element { }: codeAreaModalPropsType): JSX.Element {
const [code, setCode] = useState(value); const [code, setCode] = useState(value);
const [open, setOpen] = (mySetOpen !== undefined && myOpen !== undefined) ? [myOpen, mySetOpen] : useState(false); const [open, setOpen] =
mySetOpen !== undefined && myOpen !== undefined
? [myOpen, mySetOpen]
: useState(false);
const dark = useDarkStore((state) => state.dark); const dark = useDarkStore((state) => state.dark);
const unselectAll = useFlowStore((state) => state.unselectAll); const unselectAll = useFlowStore((state) => state.unselectAll);
@ -149,7 +152,7 @@ export default function CodeAreaModal({
<BaseModal open={open} setOpen={setOpen}> <BaseModal open={open} setOpen={setOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger> <BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}> <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
<span className="pr-2"> {editCodeTitle} </span> <span className="pr-2"> {EDIT_CODE_TITLE} </span>
<IconComponent <IconComponent
name="prompts" name="prompts"
className="h-6 w-6 pl-1 text-primary " className="h-6 w-6 pl-1 text-primary "

10
src/frontend/src/modals/exportModal/index.tsx
View file

@ -5,9 +5,9 @@ import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox"; import { Checkbox } from "../../components/ui/checkbox";
import { API_WARNING_NOTICE_ALERT } from "../../constants/alerts_constants"; import { API_WARNING_NOTICE_ALERT } from "../../constants/alerts_constants";
import { import {
ALERT_SAVE_WITH_API,
EXPORT_DIALOG_SUBTITLE, EXPORT_DIALOG_SUBTITLE,
alertSaveWApi, SAVE_WITH_API_CHECKBOX,
saveWApiCheckbox,
} from "../../constants/constants"; } from "../../constants/constants";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import { useDarkStore } from "../../stores/darkStore"; import { useDarkStore } from "../../stores/darkStore";
@ -56,10 +56,12 @@ const ExportModal = forwardRef(
}} }}
/> />
<label htmlFor="terms" className="export-modal-save-api text-sm "> <label htmlFor="terms" className="export-modal-save-api text-sm ">
{saveWApiCheckbox} {SAVE_WITH_API_CHECKBOX}
</label> </label>
</div> </div>
<span className=" text-xs text-destructive ">{alertSaveWApi}</span> <span className=" text-xs text-destructive ">
{ALERT_SAVE_WITH_API}
</span>
</BaseModal.Content> </BaseModal.Content>
<BaseModal.Footer> <BaseModal.Footer>

10
src/frontend/src/modals/formModal/chatInput/index.tsx
View file

@ -2,8 +2,8 @@ import { useEffect } from "react";
import IconComponent from "../../../components/genericIconComponent"; import IconComponent from "../../../components/genericIconComponent";
import { Textarea } from "../../../components/ui/textarea"; import { Textarea } from "../../../components/ui/textarea";
import { import {
chatInputPlaceholder, CHAT_INPUT_PLACEHOLDER,
chatInputPlaceholderSend, CHAT_INPUT_PLACEHOLDER_SEND,
} from "../../../constants/constants"; } from "../../../constants/constants";
import { chatInputType } from "../../../types/components"; import { chatInputType } from "../../../types/components";
import { classNames } from "../../../utils/utils"; import { classNames } from "../../../utils/utils";
@ -55,7 +55,7 @@ export default function ChatInput({
? "Thinking..." ? "Thinking..."
: typeof chatValue === "object" && : typeof chatValue === "object" &&
Object.keys(chatValue)?.length === 0 Object.keys(chatValue)?.length === 0
? chatInputPlaceholder ? CHAT_INPUT_PLACEHOLDER
: chatValue : chatValue
} }
onChange={(event): void => { onChange={(event): void => {
@ -70,7 +70,9 @@ export default function ChatInput({
"form-modal-lockchat" "form-modal-lockchat"
)} )}
placeholder={noInput ? chatInputPlaceholder : chatInputPlaceholderSend} placeholder={
noInput ? CHAT_INPUT_PLACEHOLDER : CHAT_INPUT_PLACEHOLDER_SEND
}
/> />
<div className="form-modal-send-icon-position"> <div className="form-modal-send-icon-position">
<button <button

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

@ -26,10 +26,10 @@ import {
MSG_ERROR_ALERT, MSG_ERROR_ALERT,
} from "../../constants/alerts_constants"; } from "../../constants/alerts_constants";
import { import {
CHAT_FIRST_INITIAL_TEXT,
CHAT_FORM_DIALOG_SUBTITLE, CHAT_FORM_DIALOG_SUBTITLE,
chatFirstInitialText, CHAT_SECOND_INITIAL_TEXT,
chatSecondInitialText, LANGFLOW_CHAT_TITLE,
langflowChatTitle,
} from "../../constants/constants"; } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext"; import { AuthContext } from "../../contexts/authContext";
import { getBuildStatus } from "../../controllers/API"; import { getBuildStatus } from "../../controllers/API";
@ -594,20 +594,20 @@ export default function FormModal({
<span> <span>
👋{" "} 👋{" "}
<span className="langflow-chat-span"> <span className="langflow-chat-span">
{langflowChatTitle} {LANGFLOW_CHAT_TITLE}
</span> </span>
</span> </span>
<br /> <br />
<div className="langflow-chat-desc"> <div className="langflow-chat-desc">
<span className="langflow-chat-desc-span"> <span className="langflow-chat-desc-span">
{chatFirstInitialText}{" "} {CHAT_FIRST_INITIAL_TEXT}{" "}
<span> <span>
<IconComponent <IconComponent
name="MessageSquare" name="MessageSquare"
className="mx-1 inline h-5 w-5 animate-bounce " className="mx-1 inline h-5 w-5 animate-bounce "
/> />
</span>{" "} </span>{" "}
{chatSecondInitialText} {CHAT_SECOND_INITIAL_TEXT}
</span> </span>
</div> </div>
</div> </div>

6
src/frontend/src/modals/genericModal/index.tsx
View file

@ -12,11 +12,11 @@ import {
TEMP_NOTICE_ALERT, TEMP_NOTICE_ALERT,
} from "../../constants/alerts_constants"; } from "../../constants/alerts_constants";
import { import {
EDIT_TEXT_PLACEHOLDER,
INVALID_CHARACTERS, INVALID_CHARACTERS,
MAX_WORDS_HIGHLIGHT, MAX_WORDS_HIGHLIGHT,
PROMPT_DIALOG_SUBTITLE, PROMPT_DIALOG_SUBTITLE,
TEXT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE,
editTextPlaceholder,
regexHighlight, regexHighlight,
} from "../../constants/constants"; } from "../../constants/constants";
import { TypeModal } from "../../constants/enums"; import { TypeModal } from "../../constants/enums";
@ -227,7 +227,7 @@ export default function GenericModal({
setInputValue(event.target.value); setInputValue(event.target.value);
checkVariables(event.target.value); checkVariables(event.target.value);
}} }}
placeholder={editTextPlaceholder} placeholder={EDIT_TEXT_PLACEHOLDER}
onKeyDown={(e) => { onKeyDown={(e) => {
handleKeyDown(e, inputValue, ""); handleKeyDown(e, inputValue, "");
}} }}
@ -249,7 +249,7 @@ export default function GenericModal({
onChange={(event) => { onChange={(event) => {
setInputValue(event.target.value); setInputValue(event.target.value);
}} }}
placeholder={editTextPlaceholder} placeholder={EDIT_TEXT_PLACEHOLDER}
onKeyDown={(e) => { onKeyDown={(e) => {
handleKeyDown(e, value, ""); handleKeyDown(e, value, "");
}} }}

4
src/frontend/src/pages/MainPage/index.tsx
View file

@ -8,8 +8,8 @@ import SidebarNav from "../../components/sidebarComponent";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { CONSOLE_ERROR_MSG } from "../../constants/alerts_constants"; import { CONSOLE_ERROR_MSG } from "../../constants/alerts_constants";
import { import {
MY_COLLECTION_DESC,
USER_PROJECTS_HEADER, USER_PROJECTS_HEADER,
myCollectionDesc,
} from "../../constants/constants"; } from "../../constants/constants";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore";
@ -75,7 +75,7 @@ export default function HomePage(): JSX.Element {
return ( return (
<PageLayout <PageLayout
title={USER_PROJECTS_HEADER} title={USER_PROJECTS_HEADER}
description={myCollectionDesc} description={MY_COLLECTION_DESC}
button={ button={
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button

6
src/frontend/src/pages/StorePage/index.tsx
View file

@ -26,7 +26,7 @@ import {
INVALID_API_ERROR_ALERT, INVALID_API_ERROR_ALERT,
NOAPI_ERROR_ALERT, NOAPI_ERROR_ALERT,
} from "../../constants/alerts_constants"; } from "../../constants/alerts_constants";
import { storeDesc, storeTitle } from "../../constants/constants"; import { STORE_DESC, STORE_TITLE } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext"; import { AuthContext } from "../../contexts/authContext";
import { getStoreComponents, getStoreTags } from "../../controllers/API"; import { getStoreComponents, getStoreTags } from "../../controllers/API";
import StoreApiKeyModal from "../../modals/StoreApiKeyModal"; import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
@ -174,8 +174,8 @@ export default function StorePage(): JSX.Element {
return ( return (
<PageLayout <PageLayout
betaIcon betaIcon
title={storeTitle} title={STORE_TITLE}
description={storeDesc} description={STORE_DESC}
button={ button={
<> <>
{StoreApiKeyModal && ( {StoreApiKeyModal && (

22
src/frontend/src/stores/flowStore.ts
View file

@ -13,6 +13,7 @@ import {
FLOW_BUILD_SUCCESS_ALERT, FLOW_BUILD_SUCCESS_ALERT,
MISSED_ERROR_ALERT, MISSED_ERROR_ALERT,
} from "../constants/alerts_constants"; } from "../constants/alerts_constants";
import { RUN_TIMESTAMP_PREFIX } from "../constants/constants";
import { BuildStatus } from "../constants/enums"; import { BuildStatus } from "../constants/enums";
import { getFlowPool } from "../controllers/API"; import { getFlowPool } from "../controllers/API";
import { VertexBuildTypeAPI } from "../types/api"; import { VertexBuildTypeAPI } from "../types/api";
@ -469,7 +470,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
verticesLayers: newLayers, verticesLayers: newLayers,
runId: runId, runId: runId,
}); });
get().updateBuildStatus(newIds, BuildStatus.TO_BUILD); get().updateBuildStatus(
vertexBuildData.next_vertices_ids,
BuildStatus.TO_BUILD
);
} }
get().addDataToFlowPool( get().addDataToFlowPool(
@ -546,17 +550,27 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
}); });
}, },
updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => { updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => {
console.log("updateBuildStatus", nodeIdList, status);
const newFlowBuildStatus = { ...get().flowBuildStatus }; const newFlowBuildStatus = { ...get().flowBuildStatus };
nodeIdList.forEach((id) => { nodeIdList.forEach((id) => {
newFlowBuildStatus[id] = status; newFlowBuildStatus[id] = {
status,
};
if (status == BuildStatus.BUILT) {
const timestamp_string = new Date(Date.now()).toLocaleString();
newFlowBuildStatus[
id
].timestamp = `${RUN_TIMESTAMP_PREFIX} ${timestamp_string}`;
}
console.log("updateBuildStatus", newFlowBuildStatus);
}); });
set({ flowBuildStatus: newFlowBuildStatus }); set({ flowBuildStatus: newFlowBuildStatus });
}, },
revertBuiltStatusFromBuilding: () => { revertBuiltStatusFromBuilding: () => {
const newFlowBuildStatus = { ...get().flowBuildStatus }; const newFlowBuildStatus = { ...get().flowBuildStatus };
Object.keys(newFlowBuildStatus).forEach((id) => { Object.keys(newFlowBuildStatus).forEach((id) => {
if (newFlowBuildStatus[id] === BuildStatus.BUILDING) { if (newFlowBuildStatus[id].status === BuildStatus.BUILDING) {
newFlowBuildStatus[id] = BuildStatus.BUILT; newFlowBuildStatus[id].status = BuildStatus.BUILT;
} }
}); });
}, },

4
src/frontend/src/types/zustand/flow/index.ts
View file

@ -115,7 +115,9 @@ export type FlowStoreType = {
} | null; } | null;
updateBuildStatus: (nodeId: string[], status: BuildStatus) => void; updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
revertBuiltStatusFromBuilding: () => void; revertBuiltStatusFromBuilding: () => void;
flowBuildStatus: { [key: string]: BuildStatus }; flowBuildStatus: {
[key: string]: { status: BuildStatus; timestamp?: string };
};
updateFlowPool: ( updateFlowPool: (
nodeId: string, nodeId: string,
data: FlowPoolObjectType | ChatOutputType | chatInputType, data: FlowPoolObjectType | ChatOutputType | chatInputType,

4
src/frontend/src/utils/reactflowUtils.ts
View file

@ -12,8 +12,8 @@ import {
INPUT_TYPES, INPUT_TYPES,
LANGFLOW_SUPPORTED_TYPES, LANGFLOW_SUPPORTED_TYPES,
OUTPUT_TYPES, OUTPUT_TYPES,
SUCCESS_BUILD,
specialCharsRegex, specialCharsRegex,
successBuild,
} from "../constants/constants"; } from "../constants/constants";
import { downloadFlowsFromDatabase } from "../controllers/API"; import { downloadFlowsFromDatabase } from "../controllers/API";
import { import {
@ -1092,7 +1092,7 @@ export function getGroupStatus(
flow: FlowType, flow: FlowType,
ssData: { [key: string]: { valid: boolean; params: string } } ssData: { [key: string]: { valid: boolean; params: string } }
) { ) {
let status = { valid: true, params: successBuild }; let status = { valid: true, params: SUCCESS_BUILD };
const { nodes } = flow.data!; const { nodes } = flow.data!;
const ids = nodes.map((n: NodeType) => n.data.id); const ids = nodes.map((n: NodeType) => n.data.id);
ids.forEach((id) => { ids.forEach((id) => {