Building...
- ) : !validationStatus ? (
-
- Build{" "}
- {" "}
- flow to validate status.
-
- ) : (
-
- {typeof validationStatus.params === "string"
- ? `${durationString}\n${validationStatus.params}`
- .split("\n")
- .map((line, index) => (
-
{line}
- ))
- : durationString}
-
{renderIconPlayOrPauseComponents(
buildStatus,
- validationStatus
)}
@@ -514,7 +490,6 @@ export default function GenericNode({
)}
Building...
@@ -530,7 +505,6 @@ export default function GenericNode({
)
}
- side="bottom"
>
{renderIconStatusComponents(
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 9fc109e21..735f543d2 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -1,7 +1,11 @@
+import { cloneDeep } from "lodash";
import { useEffect, useState } from "react";
import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
import BaseModal from "../../modals/baseModal";
+import useAlertStore from "../../stores/alertStore";
import useFlowStore from "../../stores/flowStore";
+import { NodeType } from "../../types/flow";
+import { validateNodes } from "../../utils/reactflowUtils";
import { cn } from "../../utils/utils";
import AccordionComponent from "../AccordionComponent";
import IOInputField from "../IOInputField";
@@ -16,19 +20,22 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
const inputs = useFlowStore((state) => state.inputs).filter(
(input) => input.type !== "ChatInput"
);
+ const chatInput = useFlowStore((state) => state.inputs).find(
+ (input) => input.type === "ChatInput"
+ );
const outputs = useFlowStore((state) => state.outputs).filter(
(output) => output.type !== "ChatOutput"
);
+ const chatOutput = useFlowStore((state) => state.outputs).find(
+ (output) => output.type === "ChatOutput"
+ );
const nodes = useFlowStore((state) => state.nodes).filter(
(node) =>
(inputs.some((input) => input.id === node.id) ||
- outputs.some((output) => output.id === node.id)) &&
- node.type !== "ChatInput" &&
- node.type !== "ChatOutput"
- );
- const haveChat = useFlowStore((state) => state.outputs).some(
- (output) => output.type === "ChatOutput"
+ outputs.some((output) => output.id === node.id))
);
+ const haveChat =
+ chatInput || chatOutput
const [selectedTab, setSelectedTab] = useState(
inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
);
@@ -36,6 +43,45 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
{ type: string; id: string } | undefined
>(undefined);
+ const { getNode, setNode, buildFlow, getFlow } = useFlowStore();
+ const { setErrorData } = useAlertStore();
+ const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
+ const [lockChat, setLockChat] = useState(false);
+ const [chatValue, setChatValue] = useState("");
+ const isBuilding = useFlowStore((state) => state.isBuilding);
+
+ async function sendMessage(count = 1): Promise {
+ if (isBuilding) return;
+ const { nodes, edges } = getFlow();
+ let nodeValidationErrors = validateNodes(nodes, edges);
+ if (nodeValidationErrors.length === 0) {
+ setIsBuilding(true);
+ setLockChat(true);
+ setChatValue("");
+ const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
+ if (chatInputNode) {
+ let newNode = cloneDeep(chatInputNode);
+ newNode.data.node!.template["message"].value = chatValue;
+ setNode(chatInput!.id, newNode);
+ }
+ for (let i = 0; i < count; i++) {
+ await buildFlow().catch((err) => {
+ console.error(err);
+ setLockChat(false);
+ });
+ }
+ setLockChat(false);
+
+ //set chat message in the flow and run build
+ //@ts-ignore
+ } else {
+ setErrorData({
+ title: "Oops! Looks like you missed some required information:",
+ list: nodeValidationErrors,
+ });
+ }
+ }
+
useEffect(() => {
setSelectedViewField(undefined);
setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
@@ -43,7 +89,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
return (
@@ -60,178 +106,196 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
-
- {selectedTab !== 0 && (
-
-
{
- setSelectedTab(Number(value));
- }}
+
+
+ {selectedTab !== 0 && (
+
-
-
- {inputs.length > 0 && (
- Inputs
- )}
- {outputs.length > 0 && (
- Outputs
- )}
-
-
-
-
{
+ setSelectedTab(Number(value));
+ }}
>
-
-
- Text Inputs
+
+
+ {inputs.length > 0 && (
+ Inputs
+ )}
+ {outputs.length > 0 && (
+ Outputs
+ )}
+
- {nodes
- .filter((node) =>
- inputs.some((input) => input.id === node.id)
- )
- .map((node, index) => {
- const input = inputs.find(
- (input) => input.id === node.id
- )!;
- return (
-
-
-
- {input.id}
-
- {haveChat && (
- {
- event.stopPropagation();
- setSelectedViewField(input);
- }}
- >
-
-
- )}
-
- }
- key={index}
- keyValue={input.id}
- >
-
-
- {input && (
-
- )}
-
-
-
-
-
-
-
- Prompt Outputs
-
- {nodes
- .filter((node) =>
- outputs.some((output) => output.id === node.id)
- )
- .map((node, index) => {
- const output = outputs.find(
- (output) => output.id === node.id
- )!;
- return (
-
-
-
- {output.id}
-
- {haveChat && (
- {
- event.stopPropagation();
- setSelectedViewField(output);
- }}
- >
-
-
- )}
-
-
- {output && (
-
- )}
-
-
- );
- })}
-
-
-
- )}
- {haveChat ? (
- selectedViewField ? (
- inputs.some((input) => input.id === selectedViewField.id) ? (
-
+
+
+
+ Text Inputs
+
+ {nodes
+ .filter((node) =>
+ inputs.some((input) => input.id === node.id)
+ )
+ .map((node, index) => {
+ const input = inputs.find(
+ (input) => input.id === node.id
+ )!;
+ return (
+
+
+
+ {input.id}
+
+ {haveChat && (
+ {
+ event.stopPropagation();
+ setSelectedViewField(input);
+ }}
+ >
+
+
+ )}
+
+
+ {input && (
+
+ )}
+
+
+
+ Prompt Outputs
+
+ {nodes
+ .filter((node) =>
+ outputs.some((output) => output.id === node.id)
+ )
+ .map((node, index) => {
+ const output = outputs.find(
+ (output) => output.id === node.id
+ )!;
+ return (
+
+
+
+ {output.id}
+
+ {haveChat && (
+ {
+ event.stopPropagation();
+ setSelectedViewField(output);
+ }}
+ >
+
+
+ )}
+
+
+ {output && (
+
+ )}
+
+
+ );
+ })}
+
+
+
+
)}
diff --git a/src/frontend/src/components/ViewTriggers/chat/index.tsx b/src/frontend/src/components/ViewTriggers/chat/index.tsx
index f61da2969..9610f22ff 100644
--- a/src/frontend/src/components/ViewTriggers/chat/index.tsx
+++ b/src/frontend/src/components/ViewTriggers/chat/index.tsx
@@ -21,7 +21,7 @@ export default function ChatTrigger({}): JSX.Element {
>
diff --git a/src/frontend/src/components/newChatView/chatMessage/index.tsx b/src/frontend/src/components/newChatView/chatMessage/index.tsx
index 36fb3955e..31f4f0345 100644
--- a/src/frontend/src/components/newChatView/chatMessage/index.tsx
+++ b/src/frontend/src/components/newChatView/chatMessage/index.tsx
@@ -70,7 +70,7 @@ export default function ChatMessage({
useEffect(() => {
// This effect is specifically for calling updateChat after streaming ends
- if (!isStreaming && streamUrl === null) {
+ if (!isStreaming && streamUrl) {
if (updateChat) {
updateChat(chat, chatMessage, streamUrl);
}
diff --git a/src/frontend/src/components/newChatView/index.tsx b/src/frontend/src/components/newChatView/index.tsx
index a1ea9985c..94231d4b2 100644
--- a/src/frontend/src/components/newChatView/index.tsx
+++ b/src/frontend/src/components/newChatView/index.tsx
@@ -1,4 +1,4 @@
-import _, { cloneDeep } from "lodash";
+import _ from "lodash";
import { useEffect, useRef, useState } from "react";
import IconComponent from "../../components/genericIconComponent";
import { deleteFlowPool } from "../../controllers/API";
@@ -11,31 +11,22 @@ import {
ChatOutputType,
FlowPoolObjectType,
} from "../../types/chat";
-import { NodeType } from "../../types/flow";
-import { validateNodes } from "../../utils/reactflowUtils";
import { classNames } from "../../utils/utils";
import ChatInput from "./chatInput";
import ChatMessage from "./chatMessage";
import { INFO_MISSING_ALERT, NOCHATOUTPUT_NOTICE_ALERT } from "../../alerts_constants";
-export default function NewChatView(): JSX.Element {
- const [chatValue, setChatValue] = useState("");
- const {
- flowPool,
- outputs,
- inputs,
- getNode,
- setNode,
- buildFlow,
- getFlow,
- CleanFlowPool,
- } = useFlowStore();
- const { setErrorData, setNoticeData } = useAlertStore();
+export default function NewChatView({
+ sendMessage,
+ chatValue,
+ setChatValue,
+ lockChat,
+ setLockChat,
+}): JSX.Element {
+ const { flowPool, outputs, inputs, CleanFlowPool } = useFlowStore();
+ const { setNoticeData } = useAlertStore();
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
- const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
- const [lockChat, setLockChat] = useState(false);
const messagesRef = useRef(null);
- const isBuilding = useFlowStore((state) => state.isBuilding);
const [chatHistory, setChatHistory] = useState([]);
const inputTypes = inputs.map((obj) => obj.type);
@@ -116,40 +107,6 @@ export default function NewChatView(): JSX.Element {
}
}, []);
- async function sendMessage(count = 1): Promise {
- if (isBuilding) return;
- const { nodes, edges } = getFlow();
- let nodeValidationErrors = validateNodes(nodes, edges);
- if (nodeValidationErrors.length === 0) {
- setIsBuilding(true);
- setLockChat(true);
- setChatValue("");
- const chatInputId = inputIds.find((inputId) =>
- inputId.includes("ChatInput")
- );
- const chatInput: NodeType = getNode(chatInputId!) as NodeType;
- if (chatInput) {
- let newNode = cloneDeep(chatInput);
- newNode.data.node!.template["message"].value = chatValue;
- setNode(chatInputId!, newNode);
- }
- for (let i = 0; i < count; i++) {
- await buildFlow().catch((err) => {
- console.error(err);
- setLockChat(false);
- });
- }
- setLockChat(false);
-
- //set chat message in the flow and run build
- //@ts-ignore
- } else {
- setErrorData({
- title: INFO_MISSING_ALERT,
- list: nodeValidationErrors,
- });
- }
- }
function clearChat(): void {
setChatHistory([]);
deleteFlowPool(currentFlowId).then((_) => {
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index 860551be9..134093f5c 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -66,6 +66,7 @@ interface BaseModalProps {
| "small"
| "medium"
| "large"
+ | "large-thin"
| "large-h-full"
| "small-h-full"
| "medium-h-full"
@@ -128,6 +129,10 @@ function BaseModal({
minWidth = "min-w-[80vw]";
height = "h-[80vh]";
break;
+ case "large-thin":
+ minWidth = "min-w-[65vw]";
+ height = "h-[80vh]";
+ break;
case "large-h-full":
minWidth = "min-w-[80vw]";
break;
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 27eea675d..f18eff977 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -577,6 +577,7 @@ export default function FormModal({
chatHistory.length - 1 === index ? true : false
}
key={index}
+ updateChat={() => {}}
/>
))
) : (
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 97c3e5ec2..e6a7af312 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -26,6 +26,7 @@ import {
updateFlowPosition,
} from "../../../../utils/reactflowUtils";
import { classNames, cn } from "../../../../utils/utils";
+import { useUpdateNodeInternals } from "reactflow";
export default function NodeToolbarComponent({
data,
@@ -86,6 +87,8 @@ export default function NodeToolbarComponent({
onCloseAdvancedModal!(false);
}
}, [showModalAdvanced]);
+ const updateNodeInternals = useUpdateNodeInternals();
+
useEffect(() => {
setFlowComponent(createFlowComponent(cloneDeep(data), version));
@@ -191,6 +194,7 @@ export default function NodeToolbarComponent({
return newNode;
});
+ updateNodeInternals(data.id);
};
const [openModal, setOpenModal] = useState(false);
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index af6a3adb8..c1ead622e 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -40,8 +40,6 @@ export default function StorePage(): JSX.Element {
const loadingApiKey = useStoreStore((state) => state.loadingApiKey);
const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
- const setLoadingApiKey = useStoreStore((state) => state.updateLoadingApiKey);
- const setHasApiKey = useStoreStore((state) => state.updateHasApiKey);
const { apiKey } = useContext(AuthContext);
@@ -49,6 +47,9 @@ export default function StorePage(): JSX.Element {
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId
);
+ const currentFlowId = useFlowsManagerStore(
+ (state) => state.currentFlowId
+ );
const [loading, setLoading] = useState(true);
const [loadingTags, setLoadingTags] = useState(true);
const { id } = useParams();
@@ -64,10 +65,6 @@ export default function StorePage(): JSX.Element {
const [searchNow, setSearchNow] = useState("");
const [selectFilter, setSelectFilter] = useState("all");
- useEffect(() => {
- handleGetTags();
- }, []);
-
useEffect(() => {
if (!loadingApiKey) {
if (!hasApiKey) {
@@ -87,9 +84,10 @@ export default function StorePage(): JSX.Element {
});
}
}
- }, [loadingApiKey, validApiKey, hasApiKey]);
+ }, [loadingApiKey, validApiKey, hasApiKey, currentFlowId]);
useEffect(() => {
+ handleGetTags();
handleGetComponents();
}, [
tabActive,
@@ -120,7 +118,7 @@ export default function StorePage(): JSX.Element {
}
function handleGetComponents() {
- if (!hasApiKey || loadingApiKey) return;
+ if (loadingApiKey) return;
setLoading(true);
getStoreComponents({
component_id: id,
@@ -177,23 +175,6 @@ export default function StorePage(): JSX.Element {
setPageSize(12);
}
- const fetchApiData = async () => {
- setLoadingApiKey(true);
- try {
- const res = await checkHasApiKey();
- setHasApiKey(res?.has_api_key ?? false);
- setValidApiKey(res?.is_valid ?? false);
- setLoadingApiKey(false);
- } catch (e) {
- setLoadingApiKey(false);
- console.log(e);
- }
- };
-
- useEffect(() => {
- fetchApiData();
- }, [apiKey]);
-
return (
((set) => ({
hasStore: true,
validApiKey: false,
hasApiKey: false,
loadingApiKey: true,
- updateHasStore: (hasStore) => set(() => ({ hasStore: hasStore })),
+ checkHasStore: () => {
+ checkHasStore().then((res) => {
+ set({ hasStore: res?.enabled ?? false });
+ });
+ },
updateValidApiKey: (validApiKey) => set(() => ({ validApiKey: validApiKey })),
updateLoadingApiKey: (loadingApiKey) =>
set(() => ({ loadingApiKey: loadingApiKey })),
updateHasApiKey: (hasApiKey) => set(() => ({ hasApiKey: hasApiKey })),
+ fetchApiData: async () => {
+ set({ loadingApiKey: true });
+ try {
+ const res = await checkHasApiKey();
+ set({
+ validApiKey: res?.is_valid ?? false,
+ hasApiKey: res?.has_api_key ?? false,
+ loadingApiKey: false,
+ });
+ } catch (e) {
+ set({ loadingApiKey: false });
+ console.log(e);
+ }
+ },
}));
-
-checkHasStore().then((res) => {
- useStoreStore.setState({ hasStore: res?.enabled ?? false });
-});
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 9d8c7df8f..794032875 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -175,7 +175,7 @@
@apply fixed bottom-4 right-4;
}
.message-button-icon {
- @apply fill-chat-trigger stroke-chat-trigger stroke-1;
+ @apply fill-medium-indigo stroke-medium-indigo stroke-1;
}
.disabled-message-button-icon {
@apply fill-chat-trigger-disabled stroke-chat-trigger-disabled stroke-1;
@@ -276,7 +276,7 @@
@apply h-10 w-10 rounded p-1;
}
.generic-node-tooltip-div {
- @apply ml-2 truncate;
+ @apply ml-2 max-w-[220px] truncate;
}
.generic-node-validation-div {
@apply max-h-96 overflow-auto;
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 0a0da32ad..bc8582118 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -524,11 +524,7 @@ export type chatMessagePropsType = {
chat: ChatMessageType;
lockChat: boolean;
lastMessage: boolean;
- updateChat?: (
- chat: ChatMessageType,
- message: string,
- stream_url: string | null
- ) => void;
+ updateChat: (chat: ChatMessageType, message: string, stream_url: string) => void;
};
export type formModalPropsType = {
diff --git a/src/frontend/src/types/zustand/store/index.ts b/src/frontend/src/types/zustand/store/index.ts
index 0254c857d..34bf38ad1 100644
--- a/src/frontend/src/types/zustand/store/index.ts
+++ b/src/frontend/src/types/zustand/store/index.ts
@@ -3,8 +3,9 @@ export type StoreStoreType = {
validApiKey: boolean;
hasApiKey: boolean;
loadingApiKey: boolean;
- updateHasStore: (hasStore: boolean) => void;
+ checkHasStore: () => void;
updateValidApiKey: (validApiKey: boolean) => void;
updateHasApiKey: (hasApiKey: boolean) => void;
updateLoadingApiKey: (loadingApiKey: boolean) => void;
+ fetchApiData: () => Promise;
};