diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
index c257268da..aa3de7d2d 100644
--- a/packages/toolkit/package.json
+++ b/packages/toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.111.0-rc.2",
+  "version": "0.111.0-rc.4",
   "description": "Instill AI's frontend toolkit",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",
diff --git a/packages/toolkit/src/view/recipe-editor/RecipeEditorView.tsx b/packages/toolkit/src/view/recipe-editor/RecipeEditorView.tsx
index 44b00440f..aea5009c7 100644
--- a/packages/toolkit/src/view/recipe-editor/RecipeEditorView.tsx
+++ b/packages/toolkit/src/view/recipe-editor/RecipeEditorView.tsx
@@ -204,17 +204,25 @@ export const RecipeEditorView = () => {
       <InOutputEmptyView reason="variableIsEmpty" />
     );
 
-    const previewView = recipe ? (
-      <ErrorBoundary fallbackRender={() => <PreviewEmptyView />}>
-        <Flow
-          pipelineId={pipeline.data?.id ?? null}
-          recipe={recipe ?? null}
-          pipelineMetadata={targetPipeline?.metadata ?? null}
-        />
-      </ErrorBoundary>
-    ) : (
-      <PreviewEmptyView />
-    );
+    const recipeIsEmpty =
+      Object.keys(recipe ?? {}).length === 0 ||
+      (Object.keys(recipe ?? {}).length === 1 &&
+        Object.keys(recipe ?? {})[0] === "version");
+
+    console.log("recipeIsEmpty", recipeIsEmpty, Object.keys(recipe ?? {}));
+
+    const previewView =
+      recipe && !recipeIsEmpty ? (
+        <ErrorBoundary fallbackRender={() => <PreviewEmptyView />}>
+          <Flow
+            pipelineId={pipeline.data?.id ?? null}
+            recipe={recipe ?? null}
+            pipelineMetadata={targetPipeline?.metadata ?? null}
+          />
+        </ErrorBoundary>
+      ) : (
+        <PreviewEmptyView />
+      );
 
     const outputView =
       dataSpecification?.output &&
@@ -228,49 +236,37 @@ export const RecipeEditorView = () => {
     const pipelineIsNew = pipeline.data.metadata?.pipelineIsNew ?? false;
 
     updateEditorMultiScreenModel((prev) => {
-      const topRightViews: EditorView[] = [
-        {
-          id: DefaultEditorViewIDs.MAIN_PREVIEW_FLOW,
-          title: "Preview",
-          type: "preview",
-          view: previewView,
-          closeable: false,
-        },
-        ...(prev.topRight?.views.filter(
-          (view) => view.id !== DefaultEditorViewIDs.MAIN_PREVIEW_FLOW,
-        ) ?? []),
-      ];
-
-      let addGettingStartedView = false;
-
-      if (
-        pipelineIsNew &&
-        prev.topRight?.views.findIndex(
-          (e) => e.id === DefaultEditorViewIDs.GETTING_STARTED,
-        ) === -1
-      ) {
-        addGettingStartedView = true;
-        topRightViews.push(getGettingStartedEditorView());
-      }
+      const removeInitialzedViews = prev.topRight?.views.filter(
+        (view) =>
+          view.id !== DefaultEditorViewIDs.MAIN_PREVIEW_FLOW &&
+          view.id !== DefaultEditorViewIDs.GETTING_STARTED,
+      );
+
+      const newPreviewView: EditorView = {
+        id: DefaultEditorViewIDs.MAIN_PREVIEW_FLOW,
+        title: "Preview",
+        type: "preview",
+        view: previewView,
+        closeable: false,
+      };
+
+      console.log(
+        "pipelineIsNew",
+        recipe,
+        pipelineIsNew,
+        removeInitialzedViews,
+        newPreviewView,
+      );
 
       return {
         topRight: {
-          views: addGettingStartedView
+          views: pipelineIsNew
             ? [
-                ...prev.topRight.views.filter(
-                  (view) =>
-                    view.id !== DefaultEditorViewIDs.GETTING_STARTED &&
-                    view.id !== DefaultEditorViewIDs.MAIN_PREVIEW_FLOW,
-                ),
-                ...topRightViews,
+                ...removeInitialzedViews,
+                newPreviewView,
                 getGettingStartedEditorView(),
               ]
-            : [
-                ...prev.topRight.views.filter(
-                  (view) => view.id !== DefaultEditorViewIDs.MAIN_PREVIEW_FLOW,
-                ),
-                ...topRightViews,
-              ],
+            : [...removeInitialzedViews, newPreviewView],
           currentViewId: pipelineIsNew
             ? DefaultEditorViewIDs.GETTING_STARTED
             : (prev.topRight?.currentViewId ??
diff --git a/packages/toolkit/src/view/recipe-editor/flow/nodes/EventMessage.tsx b/packages/toolkit/src/view/recipe-editor/flow/nodes/EventMessage.tsx
index 6b3326b3e..65e0d3360 100644
--- a/packages/toolkit/src/view/recipe-editor/flow/nodes/EventMessage.tsx
+++ b/packages/toolkit/src/view/recipe-editor/flow/nodes/EventMessage.tsx
@@ -1,20 +1,41 @@
+import type { Nullable } from "instill-sdk";
+import * as React from "react";
+
 import { CodeBlock } from "../../../../components";
 
 export const EventMessage = ({
   id,
   messageSnippet,
+  messageDataFirstDataKey,
 }: {
   id: string;
   messageSnippet: string;
+  messageDataFirstDataKey: Nullable<string>;
 }) => {
   return (
-    <div className="flex flex-col gap-2 w-full py-2">
-      <p className="product-body-text-1-semibold text-semantic-fg-primary">
-        {id}
-      </p>
-      <p className=" product-body-text-3-medium text-semantic-fg-secondary">
-        This is the fake message of this event.
-      </p>
+    <div className="flex flex-col gap-y-1 w-full py-2">
+      <div className="flex flex-col gap-y-2">
+        <p className="product-body-text-1-semibold text-semantic-fg-primary">
+          {id}
+        </p>
+        <p className=" product-body-text-4-regular">
+          <span className="font-semibold text-semantic-fg-primary">
+            Fake message data:
+          </span>{" "}
+          <span className="text-semantic-fg-disabled">
+            This is the fake message of this event. Please paste the
+            object&apos;s path in the recipe to use it.
+          </span>{" "}
+          {messageDataFirstDataKey ? (
+            <React.Fragment>
+              <span className="text-semantic-fg-disabled">for example:</span>{" "}
+              <span className="font-semibold text-semantic-fg-primary">
+                {"${" + `on.${id}.message.${messageDataFirstDataKey}` + "}"}
+              </span>
+            </React.Fragment>
+          ) : null}
+        </p>
+      </div>
       <CodeBlock
         codeString={messageSnippet}
         wrapLongLines={true}
diff --git a/packages/toolkit/src/view/recipe-editor/flow/nodes/RunOnEventNode.tsx b/packages/toolkit/src/view/recipe-editor/flow/nodes/RunOnEventNode.tsx
index b34957764..d90c76b84 100644
--- a/packages/toolkit/src/view/recipe-editor/flow/nodes/RunOnEventNode.tsx
+++ b/packages/toolkit/src/view/recipe-editor/flow/nodes/RunOnEventNode.tsx
@@ -94,6 +94,11 @@ export const RunOnEventNode = ({ id, data }: NodeProps<RunOnEventNodeData>) => {
                   null,
                   2,
                 )}
+                messageDataFirstDataKey={
+                  eventSpec.messageExamples[0]
+                    ? (Object.keys(eventSpec.messageExamples[0])[0] ?? null)
+                    : null
+                }
               />
             ),
             title: viewId,
diff --git a/packages/toolkit/src/view/settings/integrations/connectable-integration/ConnectableIntegration.tsx b/packages/toolkit/src/view/settings/integrations/connectable-integration/ConnectableIntegration.tsx
index fc7aeb31d..6e8197ac8 100644
--- a/packages/toolkit/src/view/settings/integrations/connectable-integration/ConnectableIntegration.tsx
+++ b/packages/toolkit/src/view/settings/integrations/connectable-integration/ConnectableIntegration.tsx
@@ -110,6 +110,8 @@ export const ConnectableIntegration = ({
                 namespaceId,
                 integrationId: integration.id,
               });
+
+              return;
             }
           } catch (error) {
             toastInstillError({