diff --git a/src/components/workflow/node-config/reply-in-thread-node-config.tsx b/src/components/workflow/node-config/reply-in-thread-node-config.tsx
new file mode 100644
index 000000000..6f87da3bc
--- /dev/null
+++ b/src/components/workflow/node-config/reply-in-thread-node-config.tsx
@@ -0,0 +1,185 @@
+import { memo, useCallback } from "react";
+import { Edge, useEdges, useNodes, useReactFlow } from "@xyflow/react";
+import { MessageCirclePlusIcon, TrashIcon } from "lucide-react";
+import { Button } from "ui/button";
+import { Label } from "ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "ui/select";
+import { Tooltip, TooltipContent, TooltipTrigger } from "ui/tooltip";
+import { useWorkflowStore } from "@/app/store/workflow.store";
+import { OutputSchemaMentionInput } from "../output-schema-mention-input";
+import {
+ ReplyInThreadNodeData,
+ UINode,
+} from "lib/ai/workflow/workflow.interface";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { VariableIcon } from "lucide-react";
+
+export const ReplyInThreadNodeConfig = memo(function ReplyInThreadNodeConfig({
+ data,
+}: {
+ data: ReplyInThreadNodeData;
+}) {
+ const t = useTranslations();
+ const { updateNodeData } = useReactFlow
();
+ const nodes = useNodes() as UINode[];
+ const edges = useEdges() as Edge[];
+ const editable = useWorkflowStore((state) => {
+ return (
+ state.processIds.length === 0 &&
+ state.hasEditAccess &&
+ !state.workflow?.isPublished
+ );
+ });
+
+ const updateMessage = useCallback(
+ (
+ index: number,
+ message: Partial,
+ ) => {
+ updateNodeData(data.id, (node) => {
+ const prev = node.data as ReplyInThreadNodeData;
+ return {
+ messages: prev.messages.map((m, i) => {
+ if (i !== index) return m;
+ return { ...m, ...message };
+ }),
+ };
+ });
+ },
+ [data.id, updateNodeData],
+ );
+
+ const removeMessage = useCallback(
+ (index: number) => {
+ updateNodeData(data.id, (node) => {
+ const prev = node.data as ReplyInThreadNodeData;
+ return {
+ messages: prev.messages.filter((_, i) => i !== index),
+ };
+ });
+ },
+ [data.id, updateNodeData],
+ );
+
+ const addMessage = useCallback(() => {
+ updateNodeData(data.id, (node) => {
+ const prev = node.data as ReplyInThreadNodeData;
+ return {
+ messages: [...prev.messages, { role: "user" }],
+ };
+ });
+ }, [data.id, updateNodeData]);
+
+ const messageHelper = useMemo(() => {
+ return (
+ t("Workflow.messagesDescription") ||
+ "Use '/' to reference data from previous nodes."
+ );
+ }, [t]);
+
+ return (
+
+
+
+
+ updateNodeData(data.id, {
+ title,
+ })
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+ {messageHelper}
+
+
+
+
+ {data.messages.map((message, index) => (
+
+
+
+
+
+
updateMessage(index, { content })}
+ />
+
+ ))}
+
+
+
+
+
+ Messages
+
+ {data.messages.length}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {timezoneHelper}
+
+
+
+
handleTimezoneChange(event.target.value)}
+ />
+
+
+
+
+
+
+
+ {t("Workflow.schedulerEnabledDescription") ??
+ "Paused schedules will not run."}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {payloadHelper}
+
+
+
+