n8n-editor-ui 1.83.2 → 1.85.0

package/dist/assets/{CanvasChat-CmjR9yPV.js → CanvasChatSwitch-Dgc1t6ax.js}

@@ -1,44 +1,10 @@
-import { aX as inject, aY as isRef, c as openBlock, h as createElementBlock, j as createBaseVNode, d as defineComponent, q as computed, i as createVNode, l as unref, t as toDisplayString, J as withModifiers, e as createBlock, f as createCommentVNode, _ as _export_sfc, aZ as toRefs, r as ref, o as onMounted, v as renderSlot, a_ as normalizeProps, a$ as guardReactiveProps, b0 as mergeProps, b1 as resolveDynamicComponent, b2 as VueMarkdown, F as Fragment, B as renderList, n as normalizeClass, b3 as markdownLink, b4 as useFileDialog, b5 as onUnmounted, ax as withDirectives, b6 as vModelText, H as withKeys, C as normalizeStyle, w as withCtx, I as watch, m as resolveComponent, k as createTextVNode, b7 as useClipboard, a as useToast, aT as createSlots, g as useI18n$1, af as MODAL_CONFIRM, al as useMessage, b8 as CHAT_TRIGGER_NODE_TYPE, b9 as MANUAL_CHAT_TRIGGER_NODE_TYPE, ba as CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE, bb as AI_SUBCATEGORY, bc as AI_CATEGORY_AGENTS, bd as AI_CATEGORY_CHAINS, be as AI_CODE_NODE_TYPE, bf as getNodeInputs, bg as getConnectionTypes, bh as getNodeOutputs, bi as NodeConnectionType, bj as isEmpty, bk as get, bl as v4, bm as last, bn as CHAT_TRIGGER_NODE_TYPE$1, aJ as useStorage, bo as watchEffect, y as onBeforeUnmount, K as useDebounce, U as useWorkflowsStore, a0 as useCanvasStore, bp as useNodeTypesStore, bq as useNodeHelpers, b as useRouter, V as VIEWS, br as provide } from "./index-ntAcmC2q.js";
-import { H as HighlightJS, R as RunDataAi } from "./RunDataAi-Cq_XIdUj.js";
-import { u as usePinnedData } from "./usePinnedData-CvnROquX.js";
-import { u as useRunWorkflow } from "./useRunWorkflow-BjW-TsKk.js";
-import "./useExecutionHelpers-DYVB2XNC.js";
-import "./pushConnection.store-Cs7MLBaJ.js";
-const ChatSymbol = "Chat";
-const ChatOptionsSymbol = "ChatOptions";
-function createEventBus() {
-  const handlers = /* @__PURE__ */ new Map();
-  function off(eventName, fn) {
-    const eventFns = handlers.get(eventName);
-    if (eventFns) {
-      eventFns.splice(eventFns.indexOf(fn) >>> 0, 1);
-    }
-  }
-  function on(eventName, fn) {
-    let eventFns = handlers.get(eventName);
-    if (!eventFns) {
-      eventFns = [fn];
-    } else {
-      eventFns.push(fn);
-    }
-    handlers.set(eventName, eventFns);
-    return () => off(eventName, fn);
-  }
-  function emit(eventName, event) {
-    const eventFns = handlers.get(eventName);
-    if (eventFns) {
-      eventFns.slice().forEach(async (handler) => {
-        await handler(event);
-      });
-    }
-  }
-  return {
-    on,
-    off,
-    emit
-  };
-}
-const chatEventBus = createEventBus();
+import { aY as inject, aZ as isRef, i as createElementBlock, g as openBlock, k as createBaseVNode, d as defineComponent, q as computed, j as createVNode, e as createBlock, f as createCommentVNode, m as unref, t as toDisplayString, J as withModifiers, _ as _export_sfc, a_ as toRefs, r as ref, o as onMounted, n as normalizeClass, x as renderSlot, a$ as normalizeProps, b0 as guardReactiveProps, b1 as resolveDynamicComponent, b2 as mergeProps, b3 as VueMarkdown, F as Fragment, D as renderList, b4 as markdownLink, b5 as useFileDialog, b6 as onUnmounted, B as normalizeStyle, aB as withDirectives, b7 as vModelText, H as withKeys, w as withCtx, I as watch, h as resolveComponent, l as createTextVNode, b8 as useClipboard, a as useToast, c as useI18n$1, aR as N8nTooltip, b9 as N8nButton, aT as _sfc_main$e, aV as createSlots, aK as useStorage, ba as watchEffect, y as onBeforeUnmount, K as useDebounce, bb as provide, bc as useProvideTooltipAppendTo, bd as IsInPiPWindowSymbol, be as NodeConnectionTypes, bf as get, bg as last, bh as isEmpty, aj as useMessage, ak as MODAL_CONFIRM, bi as v4, bj as MANUAL_CHAT_TRIGGER_NODE_TYPE, bk as CHAT_TRIGGER_NODE_TYPE, bl as CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE, bm as AI_SUBCATEGORY, bn as AI_CATEGORY_AGENTS, bo as AI_CATEGORY_CHAINS, bp as AI_CODE_NODE_TYPE, bq as getNodeInputs, br as getConnectionTypes, bs as getNodeOutputs, bt as CHAT_TRIGGER_NODE_TYPE$1, T as useWorkflowsStore, bu as useNodeTypesStore, a1 as useCanvasStore, b as useRouter, bv as useNodeHelpers, V as VIEWS, bw as useTemplateRef, bx as N8nResizeWrapper, ah as useTelemetry, by as N8nText, bz as useStyles, p as useSettingsStore } from "./index-CDluwnbb.js";
+import { H as HighlightJS, R as RunDataAi } from "./RunDataAi-dhPBStdr.js";
+import { u as usePinnedData } from "./useCanvasOperations-CY1OrN2X.js";
+import { u as useRunWorkflow } from "./useRunWorkflow-RBDuKZVj.js";
+import { u as useClearExecutionButtonVisible } from "./useClearExecutionButtonVisible-CjX9PqMR.js";
+import "./useExecutionHelpers-wN0DRQB-.js";
+import "./pushConnection.store-Dl_VgTY2.js";
 function bash(hljs) {
   const regex = hljs.regex;
   const VAR = {};
@@ -2528,6 +2494,8 @@ function xml(hljs) {
     ]
   };
 }
+const ChatSymbol = "Chat";
+const ChatOptionsSymbol = "ChatOptions";
 function useChat() {
   return inject(ChatSymbol);
 }
@@ -2637,7 +2605,7 @@ function render$2(_ctx, _cache) {
 }
 const IconPreview = { name: "mdi-openInNew", render: render$2 };
 const _hoisted_1$7 = { class: "chat-file-name" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "ChatFile",
   props: {
     file: {},
@@ -2687,16 +2655,16 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ChatFile = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-70b9370d"]]);
+const ChatFile = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-70b9370d"]]);
 const _hoisted_1$6 = {
   key: 0,
   class: "chat-message-actions"
 };
-const _hoisted_2$2 = {
+const _hoisted_2$3 = {
   key: 2,
   class: "chat-message-files"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "Message",
   props: {
     message: {}
@@ -2785,7 +2753,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             options: markdownOptions,
             plugins: [linksNewTabPlugin]
           }, null, 8, ["source", "plugins"])),
-          (unref(message).files ?? []).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+          (unref(message).files ?? []).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(message).files ?? [], (file) => {
               return openBlock(), createElementBlock("div", {
                 key: file.name,
@@ -2832,12 +2800,45 @@ function render(_ctx, _cache) {
   ]));
 }
 const IconSend = { name: "mdi-send", render };
+function createEventBus() {
+  const handlers = /* @__PURE__ */ new Map();
+  function off(eventName, fn) {
+    const eventFns = handlers.get(eventName);
+    if (eventFns) {
+      eventFns.splice(eventFns.indexOf(fn) >>> 0, 1);
+    }
+  }
+  function on(eventName, fn) {
+    let eventFns = handlers.get(eventName);
+    if (!eventFns) {
+      eventFns = [fn];
+    } else {
+      eventFns.push(fn);
+    }
+    handlers.set(eventName, eventFns);
+    return () => off(eventName, fn);
+  }
+  function emit(eventName, event) {
+    const eventFns = handlers.get(eventName);
+    if (eventFns) {
+      eventFns.slice().forEach(async (handler) => {
+        await handler(event);
+      });
+    }
+  }
+  return {
+    on,
+    off,
+    emit
+  };
+}
+const chatEventBus = createEventBus();
 const _hoisted_1$3 = { class: "chat-inputs" };
-const _hoisted_2$1 = {
+const _hoisted_2$2 = {
   key: 0,
   class: "chat-input-left-panel"
 };
-const _hoisted_3 = ["disabled", "placeholder"];
+const _hoisted_3$1 = ["disabled", "placeholder"];
 const _hoisted_4 = { class: "chat-inputs-controls" };
 const _hoisted_5 = ["disabled"];
 const _hoisted_6 = ["disabled"];
@@ -2845,7 +2846,7 @@ const _hoisted_7 = {
   key: 0,
   class: "chat-files"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "Input",
   props: {
     placeholder: { default: "inputPlaceholder" }
@@ -2993,7 +2994,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         onKeydown: withModifiers(onKeyDown, ["stop"])
       }, [
         createBaseVNode("div", _hoisted_1$3, [
-          _ctx.$slots.leftPanel ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+          _ctx.$slots.leftPanel ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
             renderSlot(_ctx.$slots, "leftPanel", {}, void 0, true)
           ])) : createCommentVNode("", true),
           withDirectives(createBaseVNode("textarea", {
@@ -3007,7 +3008,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             onInput: adjustHeight,
             onMousedown: adjustHeight,
             onFocus: adjustHeight
-          }, null, 40, _hoisted_3), [
+          }, null, 40, _hoisted_3$1), [
             [vModelText, input.value]
           ]),
           createBaseVNode("div", _hoisted_4, [
@@ -3050,8 +3051,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ChatInput = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-9f775274"]]);
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const ChatInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-9f775274"]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "MessageTyping",
   props: {
     animation: { default: "bouncing" }
@@ -3076,7 +3077,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       messageContainer.value?.scrollToView();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$8), {
+      return openBlock(), createBlock(unref(_sfc_main$c), {
         ref_key: "messageContainer",
         ref: messageContainer,
         class: normalizeClass(classes.value),
@@ -3095,11 +3096,20 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { class: "chat-messages-list" };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2 = {
+  key: 0,
+  class: "empty-container"
+};
+const _hoisted_2$1 = { class: "empty" };
+const _hoisted_3 = {
+  key: 1,
+  class: "chat-messages-list"
+};
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "MessagesList",
   props: {
-    messages: {}
+    messages: {},
+    emptyText: {}
   },
   setup(__props) {
     const chatStore = useChat();
@@ -3115,15 +3125,35 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      const _component_N8nIcon = resolveComponent("N8nIcon");
+      const _component_N8nText = resolveComponent("N8nText");
+      return _ctx.emptyText && unref(initialMessages).length === 0 && _ctx.messages.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+        createBaseVNode("div", _hoisted_2$1, [
+          createVNode(_component_N8nIcon, {
+            icon: "comment",
+            size: "large",
+            class: "emptyIcon"
+          }),
+          createVNode(_component_N8nText, {
+            tag: "p",
+            size: "medium",
+            color: "text-base"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.emptyText), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ])) : (openBlock(), createElementBlock("div", _hoisted_3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(initialMessages), (initialMessage) => {
-          return openBlock(), createBlock(_sfc_main$8, {
+          return openBlock(), createBlock(_sfc_main$c, {
             key: initialMessage.id,
             message: initialMessage
           }, null, 8, ["message"]);
         }), 128)),
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.messages, (message) => {
-          return openBlock(), createBlock(_sfc_main$8, {
+          return openBlock(), createBlock(_sfc_main$c, {
             key: message.id,
             ref_for: true,
             ref_key: "messageComponents",
@@ -3136,12 +3166,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1032, ["message"]);
         }), 128)),
-        unref(waitingForResponse) ? (openBlock(), createBlock(_sfc_main$6, { key: 0 })) : createCommentVNode("", true)
-      ]);
+        unref(waitingForResponse) ? (openBlock(), createBlock(_sfc_main$a, { key: 0 })) : createCommentVNode("", true)
+      ]));
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "MessageOptionTooltip",
   props: {
     placement: {
@@ -3176,17 +3206,17 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$2 = "_container_pqtqf_123";
+const container$5 = "_container_pqtqf_123";
 const icon$1 = "_icon_pqtqf_129";
-const style0$4 = {
-  container: container$2,
+const style0$7 = {
+  container: container$5,
   icon: icon$1
 };
-const cssModules$4 = {
-  "$style": style0$4
+const cssModules$7 = {
+  "$style": style0$7
 };
-const MessageOptionTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$4]]);
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const MessageOptionTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "MessageOptionAction",
   props: {
     label: {
@@ -3227,34 +3257,77 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$1 = "_container_u1r1u_123";
+const container$4 = "_container_u1r1u_123";
 const icon = "_icon_u1r1u_129";
-const style0$3 = {
-  container: container$1,
+const style0$6 = {
+  container: container$4,
   icon
 };
-const cssModules$3 = {
-  "$style": style0$3
+const cssModules$6 = {
+  "$style": style0$6
+};
+const MessageOptionAction = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$6]]);
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "PanelHeader",
+  props: {
+    title: {}
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("header", {
+        class: normalizeClass(_ctx.$style.container),
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
+      }, [
+        createBaseVNode("span", {
+          class: normalizeClass(_ctx.$style.title)
+        }, toDisplayString(_ctx.title), 3),
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.actions)
+        }, [
+          renderSlot(_ctx.$slots, "actions")
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const container$3 = "_container_oxcgo_123";
+const title = "_title_oxcgo_145";
+const actions$1 = "_actions_oxcgo_151";
+const style0$5 = {
+  container: container$3,
+  title,
+  actions: actions$1
 };
-const MessageOptionAction = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$3]]);
+const cssModules$5 = {
+  "$style": style0$5
+};
+const PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$5]]);
 const _hoisted_1$1 = ["onClick"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "ChatMessagesPanel",
   props: {
     pastChatMessages: {},
     messages: {},
     sessionId: {},
-    showCloseButton: { type: Boolean }
+    showCloseButton: { type: Boolean },
+    isOpen: { type: Boolean, default: true },
+    isNewLogsEnabled: { type: Boolean, default: false }
   },
-  emits: ["displayExecution", "sendMessage", "refreshSession", "close"],
+  emits: ["displayExecution", "sendMessage", "refreshSession", "close", "clickHeader"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const messageComposable = useMessage();
     const clipboard = useClipboard();
     const locale = useI18n$1();
     const toast = useToast();
     const previousMessageIndex = ref(0);
+    const sessionIdText = computed(
+      () => locale.baseText("chat.window.session.id", {
+        interpolate: { id: `${props.sessionId.slice(0, 5)}...` }
+      })
+    );
     const inputPlaceholder = computed(() => {
       if (props.messages.length > 0) {
         return locale.baseText("chat.window.chat.placeholder");
@@ -3274,23 +3347,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       previousMessageIndex.value = 0;
       emit("sendMessage", message);
     }
-    async function onRefreshSession() {
-      if (props.messages.length === 0) {
-        emit("refreshSession");
-        return;
-      }
-      const confirmResult = await messageComposable.confirm(
-        locale.baseText("chat.window.session.reset.warning"),
-        {
-          title: locale.baseText("chat.window.session.reset.title"),
-          type: "warning",
-          confirmButtonText: locale.baseText("chat.window.session.reset.confirm"),
-          showClose: true
-        }
-      );
-      if (confirmResult === MODAL_CONFIRM) {
-        emit("refreshSession");
-      }
+    function onRefreshSession() {
+      emit("refreshSession");
     }
     function onArrowKeyDown({ currentInputValue, key }) {
       const pastMessages = props.pastChatMessages;
@@ -3319,8 +3377,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         previousMessageIndex.value = 0;
       }
     }
-    function copySessionId() {
-      void clipboard.copy(props.sessionId);
+    async function copySessionId() {
+      await clipboard.copy(props.sessionId);
       toast.showMessage({
         title: locale.baseText("generic.copiedToClipboard"),
         message: "",
@@ -3328,14 +3386,60 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       });
     }
     return (_ctx, _cache) => {
-      const _component_n8n_tooltip = resolveComponent("n8n-tooltip");
-      const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
-      const _component_n8n_button = resolveComponent("n8n-button");
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.chat),
         "data-test-id": "workflow-lm-chat-dialog"
       }, [
-        createBaseVNode("header", {
+        _ctx.isNewLogsEnabled ? (openBlock(), createBlock(PanelHeader, {
+          key: 0,
+          title: unref(locale).baseText("chat.window.title"),
+          onClick: _cache[0] || (_cache[0] = ($event) => emit("clickHeader"))
+        }, {
+          actions: withCtx(() => [
+            unref(clipboard).isSupported.value ? (openBlock(), createBlock(unref(N8nTooltip), { key: 0 }, {
+              content: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.sessionId) + " ", 1),
+                _cache[5] || (_cache[5] = createBaseVNode("br", null, null, -1)),
+                createTextVNode(" " + toDisplayString(unref(locale).baseText("chat.window.session.id.copy")), 1)
+              ]),
+              default: withCtx(() => [
+                createVNode(unref(N8nButton), {
+                  "data-test-id": "chat-session-id",
+                  type: "secondary",
+                  size: "mini",
+                  onClick: withModifiers(copySessionId, ["stop"])
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(sessionIdText.value), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            _ctx.messages.length > 0 ? (openBlock(), createBlock(unref(N8nTooltip), {
+              key: 1,
+              content: unref(locale).baseText("chat.window.session.resetSession")
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(_sfc_main$e), {
+                  class: normalizeClass(_ctx.$style.headerButton),
+                  "data-test-id": "refresh-session-button",
+                  outline: "",
+                  type: "secondary",
+                  size: "small",
+                  "icon-size": "medium",
+                  icon: "undo",
+                  title: unref(locale).baseText("chat.window.session.reset"),
+                  onClick: withModifiers(onRefreshSession, ["stop"])
+                }, null, 8, ["class", "title"])
+              ]),
+              _: 1
+            }, 8, ["content"])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["title"])) : (openBlock(), createElementBlock("header", {
+          key: 1,
           class: normalizeClass(_ctx.$style.chatHeader)
         }, [
           createBaseVNode("span", {
@@ -3345,46 +3449,48 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             class: normalizeClass(_ctx.$style.session)
           }, [
             createBaseVNode("span", null, toDisplayString(unref(locale).baseText("chat.window.session.title")), 1),
-            createVNode(_component_n8n_tooltip, { placement: "left" }, {
+            createVNode(unref(N8nTooltip), { placement: "left" }, {
               content: withCtx(() => [
                 createTextVNode(toDisplayString(_ctx.sessionId), 1)
               ]),
               default: withCtx(() => [
                 createBaseVNode("span", {
-                  class: normalizeClass(_ctx.$style.sessionId),
+                  class: normalizeClass([_ctx.$style.sessionId, unref(clipboard).isSupported.value ? _ctx.$style.copyable : ""]),
                   "data-test-id": "chat-session-id",
-                  onClick: copySessionId
+                  onClick: _cache[1] || (_cache[1] = ($event) => unref(clipboard).isSupported.value ? copySessionId() : null)
                 }, toDisplayString(_ctx.sessionId), 3)
               ]),
               _: 1
             }),
-            createVNode(_component_n8n_icon_button, {
+            createVNode(unref(_sfc_main$e), {
               class: normalizeClass(_ctx.$style.headerButton),
               "data-test-id": "refresh-session-button",
               outline: "",
               type: "secondary",
               size: "mini",
               icon: "undo",
-              title: unref(locale).baseText("chat.window.session.reset.confirm"),
+              title: unref(locale).baseText("chat.window.session.reset"),
               onClick: onRefreshSession
             }, null, 8, ["class", "title"]),
-            _ctx.showCloseButton ? (openBlock(), createBlock(_component_n8n_icon_button, {
+            _ctx.showCloseButton ? (openBlock(), createBlock(unref(_sfc_main$e), {
               key: 0,
               class: normalizeClass(_ctx.$style.headerButton),
               outline: "",
               type: "secondary",
               size: "mini",
               icon: "times",
-              onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
+              onClick: _cache[2] || (_cache[2] = ($event) => emit("close"))
             }, null, 8, ["class"])) : createCommentVNode("", true)
           ], 2)
-        ], 2),
-        createBaseVNode("main", {
+        ], 2)),
+        _ctx.isOpen ? (openBlock(), createElementBlock("main", {
+          key: 2,
           class: normalizeClass(_ctx.$style.chatBody)
         }, [
-          createVNode(_sfc_main$5, {
+          createVNode(_sfc_main$9, {
             messages: _ctx.messages,
-            class: normalizeClass(_ctx.$style.messages)
+            class: normalizeClass(_ctx.$style.messages),
+            "empty-text": _ctx.isNewLogsEnabled ? unref(locale).baseText("chat.window.chat.emptyChatMessage.v2") : void 0
           }, {
             beforeMessage: withCtx(({ message }) => [
               message.sender === "bot" && !message.id.includes("preload") ? (openBlock(), createBlock(MessageOptionTooltip, {
@@ -3419,9 +3525,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               }, null, 8, ["label", "onClick"])) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["messages", "class"])
-        ], 2),
-        createBaseVNode("div", {
+          }, 8, ["messages", "class", "empty-text"])
+        ], 2)) : createCommentVNode("", true),
+        _ctx.isOpen ? (openBlock(), createElementBlock("div", {
+          key: 3,
           class: normalizeClass(_ctx.$style.messagesInput)
         }, [
           createVNode(ChatInput, {
@@ -3435,71 +3542,70 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 createBaseVNode("div", {
                   class: normalizeClass(_ctx.$style.messagesHistory)
                 }, [
-                  createVNode(_component_n8n_button, {
+                  createVNode(unref(N8nButton), {
                     title: "Navigate to previous message",
                     icon: "chevron-up",
                     type: "tertiary",
                     text: "",
                     size: "mini",
-                    onClick: _cache[1] || (_cache[1] = ($event) => onArrowKeyDown({ currentInputValue: "", key: "ArrowUp" }))
+                    onClick: _cache[3] || (_cache[3] = ($event) => onArrowKeyDown({ currentInputValue: "", key: "ArrowUp" }))
                   }),
-                  createVNode(_component_n8n_button, {
+                  createVNode(unref(N8nButton), {
                     title: "Navigate to next message",
                     icon: "chevron-down",
                     type: "tertiary",
                     text: "",
                     size: "mini",
-                    onClick: _cache[2] || (_cache[2] = ($event) => onArrowKeyDown({ currentInputValue: "", key: "ArrowDown" }))
+                    onClick: _cache[4] || (_cache[4] = ($event) => onArrowKeyDown({ currentInputValue: "", key: "ArrowDown" }))
                   })
                 ], 2)
               ]),
               key: "0"
             } : void 0
           ]), 1032, ["placeholder"])
-        ], 2)
+        ], 2)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const chat$1 = "_chat_16ciy_123";
-const chatHeader = "_chatHeader_16ciy_148";
-const chatTitle = "_chatTitle_16ciy_161";
-const session = "_session_16ciy_165";
-const sessionId = "_sessionId_16ciy_173";
-const headerButton = "_headerButton_16ciy_181";
-const chatBody = "_chatBody_16ciy_186";
-const messages = "_messages_16ciy_192";
-const messagesInput = "_messagesInput_16ciy_203";
-const style0$2 = {
-  chat: chat$1,
+const chat$2 = "_chat_fs224_123";
+const chatHeader = "_chatHeader_fs224_148";
+const chatTitle = "_chatTitle_fs224_161";
+const session = "_session_fs224_165";
+const sessionId = "_sessionId_fs224_173";
+const copyable = "_copyable_fs224_179";
+const headerButton = "_headerButton_fs224_183";
+const chatBody = "_chatBody_fs224_188";
+const messages = "_messages_fs224_197";
+const messagesInput = "_messagesInput_fs224_208";
+const style0$4 = {
+  chat: chat$2,
   chatHeader,
   chatTitle,
   session,
   sessionId,
+  copyable,
   headerButton,
   chatBody,
   messages,
   messagesInput
 };
-const cssModules$2 = {
-  "$style": style0$2
+const cssModules$4 = {
+  "$style": style0$4
 };
-const ChatMessagesPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
+const ChatMessagesPanel = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$4]]);
 const _hoisted_1 = { class: "meta" };
 const _hoisted_2 = { key: 0 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "ChatLogsPanel",
   props: {
     node: {},
     slim: { type: Boolean },
     workflow: {}
   },
-  emits: ["close"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
+  setup(__props) {
     const locale = useI18n$1();
     return (_ctx, _cache) => {
-      const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.logsWrapper),
         "data-test-id": "lm-chat-logs"
@@ -3511,14 +3617,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             createTextVNode(toDisplayString(unref(locale).baseText("chat.window.logs")) + " ", 1),
             _ctx.node ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(unref(locale).baseText("chat.window.logsFromNode", { interpolate: { nodeName: _ctx.node.name } })), 1)) : createCommentVNode("", true)
           ]),
-          createVNode(_component_n8n_icon_button, {
-            class: normalizeClass(_ctx.$style.close),
-            outline: "",
-            icon: "times",
-            type: "secondary",
-            size: "mini",
-            onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
-          }, null, 8, ["class"])
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.actions)
+          }, [
+            renderSlot(_ctx.$slots, "actions")
+          ], 2)
         ], 2),
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.logs)
@@ -3535,89 +3638,175 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const logsHeader = "_logsHeader_km5h4_123";
-const close = "_close_km5h4_136";
-const logsWrapper = "_logsWrapper_km5h4_143";
-const logsTitle = "_logsTitle_km5h4_152";
-const logs$1 = "_logs_km5h4_123";
-const style0$1 = {
+const logsHeader = "_logsHeader_1n9n2_123";
+const logsWrapper = "_logsWrapper_1n9n2_140";
+const logsTitle = "_logsTitle_1n9n2_149";
+const logs$1 = "_logs_1n9n2_123";
+const actions = "_actions_1n9n2_159";
+const style0$3 = {
   logsHeader,
-  close,
   logsWrapper,
   logsTitle,
-  logs: logs$1
+  logs: logs$1,
+  actions
 };
-const cssModules$1 = {
-  "$style": style0$1
+const cssModules$3 = {
+  "$style": style0$3
 };
-const ChatLogsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
-function useChatTrigger({
-  getNodeByName,
-  getNodeType,
-  canvasNodes,
-  workflow
-}) {
-  const chatTriggerName = ref(null);
-  const connectedNode = ref(null);
-  const chatTriggerNode = computed(
-    () => chatTriggerName.value ? getNodeByName(chatTriggerName.value) : null
-  );
-  const allowFileUploads = computed(() => {
-    return chatTriggerNode.value?.parameters?.options?.allowFileUploads === true;
-  });
-  const allowedFilesMimeTypes = computed(() => {
-    return chatTriggerNode.value?.parameters?.options?.allowedFilesMimeTypes?.toString() ?? "";
+const ChatLogsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$3]]);
+const LOCAL_STORAGE_PANEL_HEIGHT = "N8N_CANVAS_CHAT_HEIGHT";
+const LOCAL_STORAGE_PANEL_WIDTH = "N8N_CANVAS_CHAT_WIDTH";
+const MAX_WIDTH_PERCENTAGE = 0.8;
+const MIN_WIDTH_PERCENTAGE = 0.3;
+const MIN_HEIGHT_PERCENTAGE = 0.3;
+const MAX_HEIGHT_PERCENTAGE = 0.75;
+function useResize(container2) {
+  const storage = {
+    height: useStorage(LOCAL_STORAGE_PANEL_HEIGHT),
+    width: useStorage(LOCAL_STORAGE_PANEL_WIDTH)
+  };
+  const dimensions = {
+    container: ref(0),
+    // Container width
+    minHeight: ref(0),
+    maxHeight: ref(0),
+    chat: ref(0),
+    // Chat panel width
+    logs: ref(0),
+    height: ref(0)
+  };
+  const rootStyles = computed(() => ({
+    "--panel-height": `${dimensions.height.value}px`,
+    "--chat-width": `${dimensions.chat.value}px`
+  }));
+  const panelToContainerRatio = computed(() => {
+    const chatRatio = dimensions.chat.value / dimensions.container.value;
+    const containerRatio = dimensions.container.value / window.screen.width;
+    return {
+      chat: chatRatio.toFixed(2),
+      logs: (1 - chatRatio).toFixed(2),
+      container: containerRatio.toFixed(2)
+    };
   });
-  function setChatTriggerNode() {
-    const triggerNode = unref(canvasNodes).find(
-      (node) => [CHAT_TRIGGER_NODE_TYPE, MANUAL_CHAT_TRIGGER_NODE_TYPE].includes(node.type)
+  function onResize(newHeight) {
+    const { minHeight, maxHeight } = dimensions;
+    dimensions.height.value = Math.min(Math.max(newHeight, minHeight.value), maxHeight.value);
+  }
+  function onResizeDebounced(data) {
+    void useDebounce().callDebounced(onResize, { debounceTime: 10, trailing: true }, data.height);
+  }
+  function onResizeChat(width) {
+    const containerWidth = dimensions.container.value;
+    const maxWidth = containerWidth * MAX_WIDTH_PERCENTAGE;
+    const minWidth = containerWidth * MIN_WIDTH_PERCENTAGE;
+    dimensions.chat.value = Math.min(Math.max(width, minWidth), maxWidth);
+    dimensions.logs.value = dimensions.container.value - dimensions.chat.value;
+  }
+  function onResizeChatDebounced(data) {
+    void useDebounce().callDebounced(
+      onResizeChat,
+      { debounceTime: 10, trailing: true },
+      data.width
     );
-    if (!triggerNode) {
-      return;
-    }
-    chatTriggerName.value = triggerNode.name;
   }
-  function setConnectedNode() {
-    const triggerNode = chatTriggerNode.value;
-    if (!triggerNode) {
-      return;
-    }
-    const chatChildren = workflow.value.getChildNodes(triggerNode.name);
-    const chatRootNode = chatChildren.reverse().map((nodeName) => getNodeByName(nodeName)).filter((n) => n !== null).reverse().find((storeNode) => {
-      if (storeNode.type === CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE) return false;
-      const nodeType = getNodeType(storeNode.type, storeNode.typeVersion);
-      if (!nodeType) return false;
-      const isAgent = nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_AGENTS);
-      const isChain = nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_CHAINS);
-      let isCustomChainOrAgent = false;
-      if (nodeType.name === AI_CODE_NODE_TYPE) {
-        const inputs = getNodeInputs(workflow.value, storeNode, nodeType);
-        const inputTypes = getConnectionTypes(inputs);
-        const outputs = getNodeOutputs(workflow.value, storeNode, nodeType);
-        const outputTypes = getConnectionTypes(outputs);
-        if (inputTypes.includes(NodeConnectionType.AiLanguageModel) && inputTypes.includes(NodeConnectionType.Main) && outputTypes.includes(NodeConnectionType.Main)) {
-          isCustomChainOrAgent = true;
-        }
-      }
-      if (!isAgent && !isChain && !isCustomChainOrAgent) return false;
-      const parentNodes = workflow.value.getParentNodes(storeNode.name);
-      const isChatChild = parentNodes.some(
-        (parentNodeName) => parentNodeName === triggerNode.name
-      );
-      const result = Boolean(isChatChild && (isAgent || isChain || isCustomChainOrAgent));
-      return result;
-    });
-    connectedNode.value = chatRootNode ?? null;
+  function restorePersistedDimensions() {
+    const persistedHeight = parseInt(storage.height.value ?? "0", 10);
+    const persistedWidth = parseInt(storage.width.value ?? "0", 10);
+    if (persistedHeight) onResize(persistedHeight);
+    if (persistedWidth) onResizeChat(persistedWidth);
+  }
+  function onWindowResize() {
+    if (!container2.value) return;
+    dimensions.container.value = container2.value.getBoundingClientRect().width;
+    onResizeChat(dimensions.chat.value);
+    dimensions.minHeight.value = window.innerHeight * MIN_HEIGHT_PERCENTAGE;
+    dimensions.maxHeight.value = window.innerHeight * MAX_HEIGHT_PERCENTAGE;
+    onResize(dimensions.height.value);
   }
+  watchEffect(() => {
+    const { chat: chat2, height } = dimensions;
+    if (chat2.value > 0) storage.width.value = chat2.value.toString();
+    if (height.value > 0) storage.height.value = height.value.toString();
+  });
+  watchEffect(() => {
+    if (container2.value) {
+      onWindowResize();
+      restorePersistedDimensions();
+    }
+  });
+  onMounted(() => window.addEventListener("resize", onWindowResize));
+  onBeforeUnmount(() => window.removeEventListener("resize", onWindowResize));
   return {
-    allowFileUploads,
-    allowedFilesMimeTypes,
-    chatTriggerNode,
-    connectedNode: computed(() => connectedNode.value),
-    setChatTriggerNode,
-    setConnectedNode
+    height: dimensions.height,
+    chatWidth: dimensions.chat,
+    logsWidth: dimensions.logs,
+    rootStyles,
+    onWindowResize,
+    onResizeDebounced,
+    onResizeChatDebounced,
+    panelToContainerRatio
   };
 }
+function usePiPWindow({
+  container: container2,
+  content: content2,
+  initialHeight,
+  initialWidth,
+  shouldPopOut,
+  onRequestClose
+}) {
+  const pipWindow = ref();
+  const isUnmounting = ref(false);
+  const canPopOut = computed(() => !!window.documentPictureInPicture);
+  const isPoppedOut = computed(() => !!pipWindow.value);
+  const tooltipContainer = computed(
+    () => isPoppedOut.value ? content2.value ?? void 0 : void 0
+  );
+  provide(IsInPiPWindowSymbol, isPoppedOut);
+  useProvideTooltipAppendTo(tooltipContainer);
+  async function showPip() {
+    if (!content2.value) {
+      return;
+    }
+    pipWindow.value = pipWindow.value ?? await window.documentPictureInPicture?.requestWindow({
+      width: initialWidth,
+      height: initialHeight,
+      disallowReturnToOpener: true
+    });
+    [...document.styleSheets].forEach((styleSheet) => {
+      try {
+        const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
+        const style = document.createElement("style");
+        style.textContent = cssRules;
+        pipWindow.value?.document.head.appendChild(style);
+      } catch (e) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.type = styleSheet.type;
+        link.media = styleSheet.media;
+        link.href = styleSheet.href;
+        pipWindow.value?.document.head.appendChild(link);
+      }
+    });
+    pipWindow.value?.document.body.append(content2.value);
+    pipWindow.value?.addEventListener("pagehide", () => !isUnmounting.value && onRequestClose());
+  }
+  function hidePiP() {
+    pipWindow.value?.close();
+    pipWindow.value = void 0;
+    if (content2.value) {
+      container2.value?.appendChild(content2.value);
+    }
+  }
+  watch(shouldPopOut, (value) => value ? requestAnimationFrame(showPip) : hidePiP(), {
+    immediate: true
+  });
+  onBeforeUnmount(() => {
+    isUnmounting.value = true;
+    pipWindow.value?.close();
+  });
+  return { canPopOut, isPoppedOut, pipWindow };
+}
 function useChatMessaging({
   chatTrigger,
   connectedNode,
@@ -3682,7 +3871,7 @@ function useChatMessaging({
     if (triggerNode.type === MANUAL_CHAT_TRIGGER_NODE_TYPE && triggerNode.typeVersion < 1.1) {
       inputKey = "input";
     }
-    if (triggerNode.type === CHAT_TRIGGER_NODE_TYPE$1) {
+    if (triggerNode.type === CHAT_TRIGGER_NODE_TYPE) {
       inputKey = "chatInput";
     }
     const inputPayload = {
@@ -3788,12 +3977,14 @@ function useChatMessaging({
   }
   function getChatMessages() {
     if (!connectedNode.value) return [];
-    const connectedMemoryInputs = workflow.value.connectionsByDestinationNode?.[connectedNode.value.name]?.[NodeConnectionType.AiMemory];
+    const connectedMemoryInputs = workflow.value.connectionsByDestinationNode?.[connectedNode.value.name]?.[NodeConnectionTypes.AiMemory];
     if (!connectedMemoryInputs) return [];
     const memoryConnection = (connectedMemoryInputs ?? []).find((i) => (i ?? []).length > 0)?.[0];
     if (!memoryConnection) return [];
     const nodeResultData = getWorkflowResultDataByNodeName(memoryConnection.node);
-    const memoryOutputData = (nodeResultData ?? []).map((data) => get(data, ["data", NodeConnectionType.AiMemory, 0, 0, "json"])).find((data) => data && data.action === "saveContext");
+    const memoryOutputData = (nodeResultData ?? []).map(
+      (data) => get(data, ["data", NodeConnectionTypes.AiMemory, 0, 0, "json"])
+    ).find((data) => data && data.action === "saveContext");
     return (memoryOutputData?.chatHistory ?? []).map((message, index) => {
       return {
         createdAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -3811,151 +4002,245 @@ function useChatMessaging({
     getChatMessages
   };
 }
-const LOCAL_STORAGE_PANEL_HEIGHT = "N8N_CANVAS_CHAT_HEIGHT";
-const LOCAL_STORAGE_PANEL_WIDTH = "N8N_CANVAS_CHAT_WIDTH";
-const MAX_WIDTH_PERCENTAGE = 0.8;
-const MIN_WIDTH_PERCENTAGE = 0.3;
-const MIN_HEIGHT_PERCENTAGE = 0.3;
-const MAX_HEIGHT_PERCENTAGE = 0.75;
-function useResize(container2) {
-  const storage = {
-    height: useStorage(LOCAL_STORAGE_PANEL_HEIGHT),
-    width: useStorage(LOCAL_STORAGE_PANEL_WIDTH)
-  };
-  const dimensions = {
-    container: ref(0),
-    // Container width
-    minHeight: ref(0),
-    maxHeight: ref(0),
-    chat: ref(0),
-    // Chat panel width
-    logs: ref(0),
-    height: ref(0)
-  };
-  const rootStyles = computed(() => ({
-    "--panel-height": `${dimensions.height.value}px`,
-    "--chat-width": `${dimensions.chat.value}px`
-  }));
-  const panelToContainerRatio = computed(() => {
-    const chatRatio = dimensions.chat.value / dimensions.container.value;
-    const containerRatio = dimensions.container.value / window.screen.width;
-    return {
-      chat: chatRatio.toFixed(2),
-      logs: (1 - chatRatio).toFixed(2),
-      container: containerRatio.toFixed(2)
-    };
+function useChatTrigger({
+  getNodeByName,
+  getNodeType,
+  canvasNodes,
+  workflow
+}) {
+  const chatTriggerName = ref(null);
+  const connectedNode = ref(null);
+  const chatTriggerNode = computed(
+    () => chatTriggerName.value ? getNodeByName(chatTriggerName.value) : null
+  );
+  const allowFileUploads = computed(() => {
+    return chatTriggerNode.value?.parameters?.options?.allowFileUploads === true;
   });
-  function onResize(newHeight) {
-    const { minHeight, maxHeight } = dimensions;
-    dimensions.height.value = Math.min(Math.max(newHeight, minHeight.value), maxHeight.value);
-  }
-  function onResizeDebounced(data) {
-    void useDebounce().callDebounced(onResize, { debounceTime: 10, trailing: true }, data.height);
-  }
-  function onResizeChat(width) {
-    const containerWidth = dimensions.container.value;
-    const maxWidth = containerWidth * MAX_WIDTH_PERCENTAGE;
-    const minWidth = containerWidth * MIN_WIDTH_PERCENTAGE;
-    dimensions.chat.value = Math.min(Math.max(width, minWidth), maxWidth);
-    dimensions.logs.value = dimensions.container.value - dimensions.chat.value;
-  }
-  function onResizeChatDebounced(data) {
-    void useDebounce().callDebounced(
-      onResizeChat,
-      { debounceTime: 10, trailing: true },
-      data.width
+  const allowedFilesMimeTypes = computed(() => {
+    return chatTriggerNode.value?.parameters?.options?.allowedFilesMimeTypes?.toString() ?? "";
+  });
+  function setChatTriggerNode() {
+    const triggerNode = unref(canvasNodes).find(
+      (node) => [CHAT_TRIGGER_NODE_TYPE$1, MANUAL_CHAT_TRIGGER_NODE_TYPE].includes(node.type)
     );
+    if (!triggerNode) {
+      return;
+    }
+    chatTriggerName.value = triggerNode.name;
   }
-  function restorePersistedDimensions() {
-    const persistedHeight = parseInt(storage.height.value ?? "0", 10);
-    const persistedWidth = parseInt(storage.width.value ?? "0", 10);
-    if (persistedHeight) onResize(persistedHeight);
-    if (persistedWidth) onResizeChat(persistedWidth);
+  function setConnectedNode() {
+    const triggerNode = chatTriggerNode.value;
+    if (!triggerNode) {
+      return;
+    }
+    const chatChildren = workflow.value.getChildNodes(triggerNode.name);
+    const chatRootNode = chatChildren.reverse().map((nodeName) => getNodeByName(nodeName)).filter((n) => n !== null).reverse().find((storeNode) => {
+      if (storeNode.type === CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE) return false;
+      const nodeType = getNodeType(storeNode.type, storeNode.typeVersion);
+      if (!nodeType) return false;
+      const isAgent = nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_AGENTS);
+      const isChain = nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_CHAINS);
+      let isCustomChainOrAgent = false;
+      if (nodeType.name === AI_CODE_NODE_TYPE) {
+        const inputs = getNodeInputs(workflow.value, storeNode, nodeType);
+        const inputTypes = getConnectionTypes(inputs);
+        const outputs = getNodeOutputs(workflow.value, storeNode, nodeType);
+        const outputTypes = getConnectionTypes(outputs);
+        if (inputTypes.includes(NodeConnectionTypes.AiLanguageModel) && inputTypes.includes(NodeConnectionTypes.Main) && outputTypes.includes(NodeConnectionTypes.Main)) {
+          isCustomChainOrAgent = true;
+        }
+      }
+      if (!isAgent && !isChain && !isCustomChainOrAgent) return false;
+      const parentNodes = workflow.value.getParentNodes(storeNode.name);
+      const isChatChild = parentNodes.some(
+        (parentNodeName) => parentNodeName === triggerNode.name
+      );
+      const result = Boolean(isChatChild && (isAgent || isChain || isCustomChainOrAgent));
+      return result;
+    });
+    connectedNode.value = chatRootNode ?? null;
   }
-  function onWindowResize() {
-    if (!container2.value) return;
-    dimensions.container.value = container2.value.getBoundingClientRect().width;
-    onResizeChat(dimensions.chat.value);
-    dimensions.minHeight.value = window.innerHeight * MIN_HEIGHT_PERCENTAGE;
-    dimensions.maxHeight.value = window.innerHeight * MAX_HEIGHT_PERCENTAGE;
-    onResize(dimensions.height.value);
+  return {
+    allowFileUploads,
+    allowedFilesMimeTypes,
+    chatTriggerNode,
+    connectedNode: computed(() => connectedNode.value),
+    setChatTriggerNode,
+    setConnectedNode
+  };
+}
+function useChatState(isDisabled, onWindowResize) {
+  const workflowsStore = useWorkflowsStore();
+  const nodeTypesStore = useNodeTypesStore();
+  const canvasStore = useCanvasStore();
+  const router = useRouter();
+  const nodeHelpers = useNodeHelpers();
+  const { runWorkflow } = useRunWorkflow({ router });
+  const messages2 = ref([]);
+  const currentSessionId = ref(v4().replace(/-/g, ""));
+  const canvasNodes = computed(() => workflowsStore.allNodes);
+  const allConnections = computed(() => workflowsStore.allConnections);
+  const chatPanelState = computed(() => workflowsStore.chatPanelState);
+  const workflow = computed(() => workflowsStore.getCurrentWorkflow());
+  const {
+    chatTriggerNode,
+    connectedNode,
+    allowFileUploads,
+    allowedFilesMimeTypes,
+    setChatTriggerNode,
+    setConnectedNode
+  } = useChatTrigger({
+    workflow,
+    canvasNodes,
+    getNodeByName: workflowsStore.getNodeByName,
+    getNodeType: nodeTypesStore.getNodeType
+  });
+  const { sendMessage, getChatMessages, isLoading } = useChatMessaging({
+    chatTrigger: chatTriggerNode,
+    connectedNode,
+    messages: messages2,
+    sessionId: currentSessionId,
+    workflow,
+    executionResultData: computed(() => workflowsStore.getWorkflowExecution?.data?.resultData),
+    getWorkflowResultDataByNodeName: workflowsStore.getWorkflowResultDataByNodeName,
+    onRunChatWorkflow
+  });
+  function createChatConfig(params) {
+    const chatConfig2 = {
+      messages: params.messages,
+      sendMessage: params.sendMessage,
+      initialMessages: ref([]),
+      currentSessionId: params.currentSessionId,
+      waitingForResponse: params.isLoading
+    };
+    const chatOptions2 = {
+      i18n: {
+        en: {
+          title: "",
+          footer: "",
+          subtitle: "",
+          inputPlaceholder: params.locale.baseText("chat.window.chat.placeholder"),
+          getStarted: "",
+          closeButtonTooltip: ""
+        }
+      },
+      webhookUrl: "",
+      mode: "window",
+      showWindowCloseButton: true,
+      disabled: params.isDisabled,
+      allowFileUploads: params.allowFileUploads,
+      allowedFilesMimeTypes
+    };
+    return { chatConfig: chatConfig2, chatOptions: chatOptions2 };
   }
-  watchEffect(() => {
-    const { chat: chat2, height } = dimensions;
-    if (chat2.value > 0) storage.width.value = chat2.value.toString();
-    if (height.value > 0) storage.height.value = height.value.toString();
+  const { chatConfig, chatOptions } = createChatConfig({
+    messages: messages2,
+    sendMessage,
+    currentSessionId,
+    isLoading,
+    isDisabled,
+    allowFileUploads,
+    locale: useI18n$1()
   });
-  watchEffect(() => {
-    if (container2.value) {
-      onWindowResize();
-      restorePersistedDimensions();
+  provide(ChatSymbol, chatConfig);
+  provide(ChatOptionsSymbol, chatOptions);
+  watch(
+    () => chatPanelState.value,
+    (state) => {
+      if (state !== "closed") {
+        setChatTriggerNode();
+        setConnectedNode();
+        if (messages2.value.length === 0) {
+          messages2.value = getChatMessages();
+        }
+        setTimeout(() => {
+          onWindowResize();
+          chatEventBus.emit("focusInput");
+        }, 0);
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => allConnections.value,
+    () => {
+      if (canvasStore.isLoading) return;
+      setTimeout(() => {
+        if (!chatTriggerNode.value) {
+          setChatTriggerNode();
+        }
+        setConnectedNode();
+      }, 0);
+    },
+    { deep: true }
+  );
+  async function createExecutionPromise() {
+    return await new Promise((resolve) => {
+      const resolveIfFinished = (isRunning) => {
+        if (!isRunning) {
+          unwatch();
+          resolve();
+        }
+      };
+      const unwatch = watch(() => workflowsStore.isWorkflowRunning, resolveIfFinished);
+      resolveIfFinished(workflowsStore.isWorkflowRunning);
+    });
+  }
+  async function onRunChatWorkflow(payload) {
+    const runWorkflowOptions = {
+      triggerNode: payload.triggerNode,
+      nodeData: payload.nodeData,
+      source: payload.source
+    };
+    if (workflowsStore.chatPartialExecutionDestinationNode) {
+      runWorkflowOptions.destinationNode = workflowsStore.chatPartialExecutionDestinationNode;
+      workflowsStore.chatPartialExecutionDestinationNode = null;
     }
-  });
-  onMounted(() => window.addEventListener("resize", onWindowResize));
-  onBeforeUnmount(() => window.removeEventListener("resize", onWindowResize));
+    const response = await runWorkflow(runWorkflowOptions);
+    if (response) {
+      await createExecutionPromise();
+      workflowsStore.appendChatMessage(payload.message);
+      return response;
+    }
+    return;
+  }
+  function refreshSession() {
+    workflowsStore.setWorkflowExecutionData(null);
+    nodeHelpers.updateNodesExecutionIssues();
+    messages2.value = [];
+    currentSessionId.value = v4().replace(/-/g, "");
+  }
+  function displayExecution(executionId) {
+    const route = router.resolve({
+      name: VIEWS.EXECUTION_PREVIEW,
+      params: { name: workflow.value.id, executionId }
+    });
+    window.open(route.href, "_blank");
+  }
   return {
-    height: dimensions.height,
-    chatWidth: dimensions.chat,
-    logsWidth: dimensions.logs,
-    rootStyles,
-    onWindowResize,
-    onResizeDebounced,
-    onResizeChatDebounced,
-    panelToContainerRatio
+    currentSessionId,
+    messages: messages2,
+    chatTriggerNode,
+    connectedNode,
+    sendMessage,
+    refreshSession,
+    displayExecution
   };
 }
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "CanvasChat",
   setup(__props, { expose: __expose }) {
     const workflowsStore = useWorkflowsStore();
     const canvasStore = useCanvasStore();
-    const nodeTypesStore = useNodeTypesStore();
-    const nodeHelpers = useNodeHelpers();
-    const router = useRouter();
-    const messages2 = ref([]);
-    const currentSessionId = ref(v4().replace(/-/g, ""));
     const isDisabled = ref(false);
     const container2 = ref();
+    const pipContainer = useTemplateRef("pipContainer");
+    const pipContent2 = useTemplateRef("pipContent");
     const workflow = computed(() => workflowsStore.getCurrentWorkflow());
-    const allConnections = computed(() => workflowsStore.allConnections);
-    const isChatOpen = computed(() => {
-      const result = workflowsStore.isChatPanelOpen;
-      return result;
-    });
-    const canvasNodes = computed(() => workflowsStore.allNodes);
-    const isLogsOpen = computed(() => workflowsStore.isLogsPanelOpen);
+    const chatPanelState = computed(() => workflowsStore.chatPanelState);
     const previousChatMessages = computed(() => workflowsStore.getPastChatMessages);
     const resultData = computed(() => workflowsStore.getWorkflowRunData);
-    __expose({
-      messages: messages2,
-      currentSessionId,
-      isDisabled,
-      workflow
-    });
-    const { runWorkflow } = useRunWorkflow({ router });
-    const {
-      chatTriggerNode,
-      connectedNode,
-      allowFileUploads,
-      allowedFilesMimeTypes,
-      setChatTriggerNode,
-      setConnectedNode
-    } = useChatTrigger({
-      workflow,
-      canvasNodes,
-      getNodeByName: workflowsStore.getNodeByName,
-      getNodeType: nodeTypesStore.getNodeType
-    });
-    const { sendMessage, getChatMessages, isLoading } = useChatMessaging({
-      chatTrigger: chatTriggerNode,
-      connectedNode,
-      messages: messages2,
-      sessionId: currentSessionId,
-      workflow,
-      executionResultData: computed(() => workflowsStore.getWorkflowExecution?.data?.resultData),
-      getWorkflowResultDataByNodeName: workflowsStore.getWorkflowResultDataByNodeName,
-      onRunChatWorkflow
-    });
+    const telemetry = useTelemetry();
     const {
       height,
       chatWidth,
@@ -3965,229 +4250,441 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       onResizeChatDebounced,
       onWindowResize
     } = useResize(container2);
-    function createChatConfig(params) {
-      const chatConfig2 = {
-        messages: params.messages,
-        sendMessage: params.sendMessage,
-        initialMessages: ref([]),
-        currentSessionId: params.currentSessionId,
-        waitingForResponse: params.isLoading
-      };
-      const chatOptions2 = {
-        i18n: {
-          en: {
-            title: "",
-            footer: "",
-            subtitle: "",
-            inputPlaceholder: params.locale.baseText("chat.window.chat.placeholder"),
-            getStarted: "",
-            closeButtonTooltip: ""
-          }
-        },
-        webhookUrl: "",
-        mode: "window",
-        showWindowCloseButton: true,
-        disabled: params.isDisabled,
-        allowFileUploads: params.allowFileUploads,
-        allowedFilesMimeTypes
-      };
-      return { chatConfig: chatConfig2, chatOptions: chatOptions2 };
-    }
-    function displayExecution(params) {
-      const route = params.router.resolve({
-        name: VIEWS.EXECUTION_PREVIEW,
-        params: { name: params.workflowId, executionId: params.executionId }
-      });
-      window.open(route.href, "_blank");
-    }
-    function refreshSession(params) {
-      workflowsStore.setWorkflowExecutionData(null);
-      nodeHelpers.updateNodesExecutionIssues();
-      params.messages.value = [];
-      params.currentSessionId.value = v4().replace(/-/g, "");
-    }
-    const handleDisplayExecution = (executionId) => {
-      displayExecution({
-        router,
-        workflowId: workflow.value.id,
-        executionId
-      });
-    };
-    const handleRefreshSession = () => {
-      refreshSession({
-        messages: messages2,
-        currentSessionId
-      });
-    };
-    const closePanel = () => {
-      workflowsStore.setPanelOpen("chat", false);
-    };
-    async function createExecutionPromise() {
-      return await new Promise((resolve) => {
-        const resolveIfFinished = (isRunning) => {
-          if (!isRunning) {
-            unwatch();
-            resolve();
-          }
-        };
-        const unwatch = watch(() => workflowsStore.isWorkflowRunning, resolveIfFinished);
-        resolveIfFinished(workflowsStore.isWorkflowRunning);
-      });
-    }
-    async function onRunChatWorkflow(payload) {
-      const runWorkflowOptions = {
-        triggerNode: payload.triggerNode,
-        nodeData: payload.nodeData,
-        source: payload.source
-      };
-      if (workflowsStore.chatPartialExecutionDestinationNode) {
-        runWorkflowOptions.destinationNode = workflowsStore.chatPartialExecutionDestinationNode;
-        workflowsStore.chatPartialExecutionDestinationNode = null;
-      }
-      const response = await runWorkflow(runWorkflowOptions);
-      if (response) {
-        await createExecutionPromise();
-        workflowsStore.appendChatMessage(payload.message);
-        return response;
+    const { canPopOut, isPoppedOut, pipWindow } = usePiPWindow({
+      initialHeight: 400,
+      initialWidth: window.document.body.offsetWidth * 0.8,
+      container: pipContainer,
+      content: pipContent2,
+      shouldPopOut: computed(() => chatPanelState.value === "floating"),
+      onRequestClose: () => {
+        if (chatPanelState.value === "closed") {
+          return;
+        }
+        telemetry.track("User toggled log view", { new_state: "attached" });
+        workflowsStore.setPanelState("attached");
       }
-      return;
-    }
-    const { chatConfig, chatOptions } = createChatConfig({
+    });
+    const {
+      currentSessionId,
       messages: messages2,
+      chatTriggerNode,
+      connectedNode,
       sendMessage,
+      refreshSession,
+      displayExecution
+    } = useChatState(isDisabled, onWindowResize);
+    __expose({
+      messages: messages2,
       currentSessionId,
-      isLoading,
       isDisabled,
-      allowFileUploads,
-      locale: useI18n$1()
+      workflow
     });
-    provide(ChatSymbol, chatConfig);
-    provide(ChatOptionsSymbol, chatOptions);
-    watch(
-      () => isChatOpen.value,
-      (isOpen) => {
-        if (isOpen) {
-          setChatTriggerNode();
-          setConnectedNode();
-          if (messages2.value.length === 0) {
-            messages2.value = getChatMessages();
-          }
-          setTimeout(() => {
-            onWindowResize();
-            chatEventBus.emit("focusInput");
-          }, 0);
-        }
-      },
-      { immediate: true }
-    );
-    watch(
-      () => allConnections.value,
-      () => {
-        if (canvasStore.isLoading) return;
-        setTimeout(() => {
-          if (!chatTriggerNode.value) {
-            setChatTriggerNode();
-          }
-          setConnectedNode();
-        }, 0);
-      },
-      { deep: true }
-    );
+    const closePanel = () => {
+      workflowsStore.setPanelState("closed");
+    };
+    function onPopOut() {
+      telemetry.track("User toggled log view", { new_state: "floating" });
+      workflowsStore.setPanelState("floating");
+    }
     watchEffect(() => {
-      canvasStore.setPanelHeight(isChatOpen.value || isLogsOpen.value ? height.value : 0);
+      canvasStore.setPanelHeight(chatPanelState.value === "attached" ? height.value : 0);
     });
     return (_ctx, _cache) => {
-      const _component_n8n_resize_wrapper = resolveComponent("n8n-resize-wrapper");
-      const _component_N8nResizeWrapper = resolveComponent("N8nResizeWrapper");
-      return unref(chatTriggerNode) ? (openBlock(), createBlock(_component_N8nResizeWrapper, {
-        key: 0,
-        "is-resizing-enabled": isChatOpen.value || isLogsOpen.value,
-        "supported-directions": ["top"],
-        class: normalizeClass([_ctx.$style.resizeWrapper, !isChatOpen.value && !isLogsOpen.value && _ctx.$style.empty]),
-        height: unref(height),
-        style: normalizeStyle(unref(rootStyles)),
-        onResize: unref(onResizeDebounced)
-      }, {
-        default: withCtx(() => [
-          createBaseVNode("div", {
-            ref_key: "container",
-            ref: container2,
-            class: normalizeClass([_ctx.$style.container, "ignore-key-press-canvas"]),
-            tabindex: "0"
-          }, [
-            isChatOpen.value || isLogsOpen.value ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass(_ctx.$style.chatResizer)
-            }, [
-              isChatOpen.value ? (openBlock(), createBlock(_component_n8n_resize_wrapper, {
-                key: 0,
-                "supported-directions": ["right"],
-                width: unref(chatWidth),
-                class: normalizeClass(_ctx.$style.chat),
-                onResize: unref(onResizeChatDebounced)
-              }, {
-                default: withCtx(() => [
-                  createBaseVNode("div", {
-                    class: normalizeClass(_ctx.$style.inner)
+      const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
+      return openBlock(), createElementBlock("div", {
+        ref_key: "pipContainer",
+        ref: pipContainer
+      }, [
+        createBaseVNode("div", {
+          ref_key: "pipContent",
+          ref: pipContent2,
+          class: normalizeClass(_ctx.$style.pipContent)
+        }, [
+          unref(chatTriggerNode) ? (openBlock(), createBlock(unref(N8nResizeWrapper), {
+            key: 0,
+            "is-resizing-enabled": !unref(isPoppedOut) && chatPanelState.value === "attached",
+            "supported-directions": ["top"],
+            class: normalizeClass([_ctx.$style.resizeWrapper, chatPanelState.value === "closed" && _ctx.$style.empty]),
+            height: unref(height),
+            style: normalizeStyle(unref(rootStyles)),
+            onResize: unref(onResizeDebounced)
+          }, {
+            default: withCtx(() => [
+              createBaseVNode("div", {
+                ref_key: "container",
+                ref: container2,
+                class: normalizeClass([_ctx.$style.container, "ignore-key-press-canvas"]),
+                tabindex: "0"
+              }, [
+                chatPanelState.value !== "closed" ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: normalizeClass(_ctx.$style.chatResizer)
+                }, [
+                  createVNode(unref(N8nResizeWrapper), {
+                    "supported-directions": ["right"],
+                    width: unref(chatWidth),
+                    class: normalizeClass(_ctx.$style.chat),
+                    window: unref(pipWindow),
+                    onResize: unref(onResizeChatDebounced)
+                  }, {
+                    default: withCtx(() => [
+                      createBaseVNode("div", {
+                        class: normalizeClass(_ctx.$style.inner)
+                      }, [
+                        createVNode(ChatMessagesPanel, {
+                          "data-test-id": "canvas-chat",
+                          messages: unref(messages2),
+                          "session-id": unref(currentSessionId),
+                          "past-chat-messages": previousChatMessages.value,
+                          "show-close-button": !unref(isPoppedOut) && !unref(connectedNode),
+                          onClose: closePanel,
+                          onRefreshSession: unref(refreshSession),
+                          onDisplayExecution: unref(displayExecution),
+                          onSendMessage: unref(sendMessage)
+                        }, null, 8, ["messages", "session-id", "past-chat-messages", "show-close-button", "onRefreshSession", "onDisplayExecution", "onSendMessage"])
+                      ], 2)
+                    ]),
+                    _: 1
+                  }, 8, ["width", "class", "window", "onResize"]),
+                  unref(connectedNode) ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: normalizeClass(_ctx.$style.logs)
                   }, [
+                    (openBlock(), createBlock(ChatLogsPanel, {
+                      key: `${resultData.value?.length ?? unref(messages2)?.length}`,
+                      workflow: workflow.value,
+                      "data-test-id": "canvas-chat-logs",
+                      node: unref(connectedNode),
+                      slim: unref(logsWidth) < 700
+                    }, {
+                      actions: withCtx(() => [
+                        unref(canPopOut) && !unref(isPoppedOut) ? (openBlock(), createBlock(_component_n8n_icon_button, {
+                          key: 0,
+                          icon: "pop-out",
+                          type: "secondary",
+                          size: "medium",
+                          onClick: onPopOut
+                        })) : createCommentVNode("", true),
+                        !unref(isPoppedOut) ? (openBlock(), createBlock(_component_n8n_icon_button, {
+                          key: 1,
+                          outline: "",
+                          icon: "times",
+                          type: "secondary",
+                          size: "medium",
+                          onClick: closePanel
+                        })) : createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    }, 8, ["workflow", "node", "slim"]))
+                  ], 2)) : createCommentVNode("", true)
+                ], 2)) : createCommentVNode("", true)
+              ], 2)
+            ]),
+            _: 1
+          }, 8, ["is-resizing-enabled", "class", "height", "style", "onResize"])) : createCommentVNode("", true)
+        ], 2)
+      ], 512);
+    };
+  }
+});
+const resizeWrapper$1 = "_resizeWrapper_1aajp_124";
+const pipContent$1 = "_pipContent_1aajp_129";
+const empty$1 = "_empty_1aajp_140";
+const container$2 = "_container_1aajp_146";
+const chatResizer = "_chatResizer_1aajp_154";
+const footer = "_footer_1aajp_161";
+const chat$1 = "_chat_1aajp_154";
+const inner = "_inner_1aajp_180";
+const logs = "_logs_1aajp_188";
+const style0$2 = {
+  resizeWrapper: resizeWrapper$1,
+  pipContent: pipContent$1,
+  empty: empty$1,
+  container: container$2,
+  chatResizer,
+  footer,
+  chat: chat$1,
+  inner,
+  logs
+};
+const cssModules$2 = {
+  "$style": style0$2
+};
+const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$2]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "LogsOverviewPanel",
+  props: {
+    isOpen: { type: Boolean }
+  },
+  emits: ["clickHeader"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const locale = useI18n$1();
+    const workflowsStore = useWorkflowsStore();
+    const nodeHelpers = useNodeHelpers();
+    const isClearExecutionButtonVisible = useClearExecutionButtonVisible();
+    function onClearExecutionData() {
+      workflowsStore.setWorkflowExecutionData(null);
+      nodeHelpers.updateNodesExecutionIssues();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        createVNode(PanelHeader, {
+          title: unref(locale).baseText("logs.overview.header.title"),
+          onClick: _cache[0] || (_cache[0] = ($event) => emit("clickHeader"))
+        }, {
+          actions: withCtx(() => [
+            unref(isClearExecutionButtonVisible) ? (openBlock(), createBlock(unref(N8nTooltip), {
+              key: 0,
+              content: unref(locale).baseText("logs.overview.header.actions.clearExecution.tooltip")
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(N8nButton), {
+                  size: "mini",
+                  type: "secondary",
+                  icon: "trash",
+                  "icon-size": "medium",
+                  onClick: withModifiers(onClearExecutionData, ["stop"])
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(locale).baseText("logs.overview.header.actions.clearExecution")), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["content"])) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "actions")
+          ]),
+          _: 3
+        }, 8, ["title"]),
+        _ctx.isOpen ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass([_ctx.$style.content, _ctx.$style.empty])
+        }, [
+          createVNode(unref(N8nText), {
+            tag: "p",
+            size: "medium",
+            color: "text-base",
+            class: normalizeClass(_ctx.$style.emptyText)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(locale).baseText("logs.overview.body.empty.message")), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const container$1 = "_container_wrmwc_123";
+const content = "_content_wrmwc_131";
+const empty = "_empty_wrmwc_135";
+const emptyText = "_emptyText_wrmwc_141";
+const style0$1 = {
+  container: container$1,
+  content,
+  empty,
+  emptyText
+};
+const cssModules$1 = {
+  "$style": style0$1
+};
+const LogsOverviewPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$1]]);
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "LogsPanel",
+  setup(__props) {
+    const workflowsStore = useWorkflowsStore();
+    const canvasStore = useCanvasStore();
+    const panelState = computed(() => workflowsStore.chatPanelState);
+    const container2 = ref();
+    const pipContainer = useTemplateRef("pipContainer");
+    const pipContent2 = useTemplateRef("pipContent");
+    const previousChatMessages = computed(() => workflowsStore.getPastChatMessages);
+    const hasChat = computed(
+      () => workflowsStore.workflowTriggerNodes.some(
+        (node) => [CHAT_TRIGGER_NODE_TYPE$1, MANUAL_CHAT_TRIGGER_NODE_TYPE].includes(node.type)
+      )
+    );
+    const locales = useI18n$1();
+    const telemetry = useTelemetry();
+    const { rootStyles, height, chatWidth, onWindowResize, onResizeDebounced, onResizeChatDebounced } = useResize(container2);
+    const { currentSessionId, messages: messages2, sendMessage, refreshSession, displayExecution } = useChatState(
+      ref(false),
+      onWindowResize
+    );
+    const appStyles = useStyles();
+    const tooltipZIndex = computed(() => appStyles.APP_Z_INDEXES.ASK_ASSISTANT_FLOATING_BUTTON + 100);
+    const { canPopOut, isPoppedOut, pipWindow } = usePiPWindow({
+      initialHeight: 400,
+      initialWidth: window.document.body.offsetWidth * 0.8,
+      container: pipContainer,
+      content: pipContent2,
+      shouldPopOut: computed(() => panelState.value === "floating"),
+      onRequestClose: () => {
+        if (panelState.value === "closed") {
+          return;
+        }
+        telemetry.track("User toggled log view", { new_state: "attached" });
+        workflowsStore.setPanelState("attached");
+      }
+    });
+    function handleToggleOpen() {
+      if (panelState.value === "closed") {
+        telemetry.track("User toggled log view", { new_state: "attached" });
+        workflowsStore.setPanelState("attached");
+      } else {
+        telemetry.track("User toggled log view", { new_state: "collapsed" });
+        workflowsStore.setPanelState("closed");
+      }
+    }
+    function handleClickHeader() {
+      if (panelState.value === "closed") {
+        telemetry.track("User toggled log view", { new_state: "attached" });
+        workflowsStore.setPanelState("attached");
+      }
+    }
+    function onPopOut() {
+      telemetry.track("User toggled log view", { new_state: "floating" });
+      workflowsStore.setPanelState("floating");
+    }
+    watch([panelState, height], ([state, h]) => {
+      canvasStore.setPanelHeight(
+        state === "floating" ? 0 : state === "attached" ? h : 32
+      );
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "pipContainer",
+        ref: pipContainer
+      }, [
+        createBaseVNode("div", {
+          ref_key: "pipContent",
+          ref: pipContent2,
+          class: normalizeClass(_ctx.$style.pipContent)
+        }, [
+          createVNode(unref(N8nResizeWrapper), {
+            height: unref(height),
+            "supported-directions": ["top"],
+            "is-resizing-enabled": panelState.value === "attached",
+            style: normalizeStyle(unref(rootStyles)),
+            class: normalizeClass([_ctx.$style.resizeWrapper, panelState.value === "closed" ? "" : _ctx.$style.isOpen]),
+            onResize: unref(onResizeDebounced)
+          }, {
+            default: withCtx(() => [
+              createBaseVNode("div", {
+                ref_key: "container",
+                ref: container2,
+                class: normalizeClass(_ctx.$style.container)
+              }, [
+                hasChat.value ? (openBlock(), createBlock(unref(N8nResizeWrapper), {
+                  key: 0,
+                  "supported-directions": ["right"],
+                  "is-resizing-enabled": panelState.value !== "closed",
+                  width: unref(chatWidth),
+                  class: normalizeClass(_ctx.$style.chat),
+                  window: unref(pipWindow),
+                  onResize: unref(onResizeChatDebounced)
+                }, {
+                  default: withCtx(() => [
                     createVNode(ChatMessagesPanel, {
                       "data-test-id": "canvas-chat",
-                      messages: messages2.value,
-                      "session-id": currentSessionId.value,
+                      "is-open": panelState.value !== "closed",
+                      messages: unref(messages2),
+                      "session-id": unref(currentSessionId),
                       "past-chat-messages": previousChatMessages.value,
-                      "show-close-button": !unref(connectedNode),
-                      onClose: closePanel,
-                      onRefreshSession: handleRefreshSession,
-                      onDisplayExecution: handleDisplayExecution,
-                      onSendMessage: unref(sendMessage)
-                    }, null, 8, ["messages", "session-id", "past-chat-messages", "show-close-button", "onSendMessage"])
-                  ], 2)
-                ]),
-                _: 1
-              }, 8, ["width", "class", "onResize"])) : createCommentVNode("", true),
-              isLogsOpen.value && unref(connectedNode) ? (openBlock(), createElementBlock("div", {
-                key: 1,
-                class: normalizeClass(_ctx.$style.logs)
-              }, [
-                (openBlock(), createBlock(ChatLogsPanel, {
-                  key: `${resultData.value?.length ?? messages2.value?.length}`,
-                  workflow: workflow.value,
-                  "data-test-id": "canvas-chat-logs",
-                  node: unref(connectedNode),
-                  slim: unref(logsWidth) < 700,
-                  onClose: closePanel
-                }, null, 8, ["workflow", "node", "slim"]))
-              ], 2)) : createCommentVNode("", true)
-            ], 2)) : createCommentVNode("", true)
-          ], 2)
-        ]),
-        _: 1
-      }, 8, ["is-resizing-enabled", "class", "height", "style", "onResize"])) : createCommentVNode("", true);
+                      "show-close-button": false,
+                      "is-new-logs-enabled": true,
+                      onClose: handleToggleOpen,
+                      onRefreshSession: unref(refreshSession),
+                      onDisplayExecution: unref(displayExecution),
+                      onSendMessage: unref(sendMessage),
+                      onClickHeader: handleClickHeader
+                    }, null, 8, ["is-open", "messages", "session-id", "past-chat-messages", "onRefreshSession", "onDisplayExecution", "onSendMessage"])
+                  ]),
+                  _: 1
+                }, 8, ["is-resizing-enabled", "width", "class", "window", "onResize"])) : createCommentVNode("", true),
+                createVNode(LogsOverviewPanel, {
+                  "is-open": panelState.value !== "closed",
+                  onClickHeader: handleClickHeader
+                }, {
+                  actions: withCtx(() => [
+                    unref(canPopOut) && !unref(isPoppedOut) ? (openBlock(), createBlock(unref(N8nTooltip), {
+                      key: 0,
+                      "z-index": tooltipZIndex.value,
+                      content: unref(locales).baseText("runData.panel.actions.popOut")
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(_sfc_main$e), {
+                          icon: "pop-out",
+                          type: "secondary",
+                          size: "small",
+                          "icon-size": "medium",
+                          onClick: onPopOut
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["z-index", "content"])) : createCommentVNode("", true),
+                    panelState.value !== "floating" ? (openBlock(), createBlock(unref(N8nTooltip), {
+                      key: 1,
+                      "z-index": tooltipZIndex.value,
+                      content: unref(locales).baseText(
+                        panelState.value === "attached" ? "runData.panel.actions.collapse" : "runData.panel.actions.open"
+                      )
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(_sfc_main$e), {
+                          type: "secondary",
+                          size: "small",
+                          "icon-size": "medium",
+                          icon: panelState.value === "attached" ? "chevron-down" : "chevron-up",
+                          style: { "color": "var(--color-text-base)" },
+                          onClick: withModifiers(handleToggleOpen, ["stop"])
+                        }, null, 8, ["icon"])
+                      ]),
+                      _: 1
+                    }, 8, ["z-index", "content"])) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 8, ["is-open"])
+              ], 2)
+            ]),
+            _: 1
+          }, 8, ["height", "is-resizing-enabled", "style", "class", "onResize"])
+        ], 2)
+      ], 512);
     };
   }
 });
-const resizeWrapper = "_resizeWrapper_1tz98_123";
-const empty = "_empty_1tz98_130";
-const container = "_container_1tz98_136";
-const chatResizer = "_chatResizer_1tz98_144";
-const footer = "_footer_1tz98_151";
-const chat = "_chat_1tz98_144";
-const inner = "_inner_1tz98_170";
-const logs = "_logs_1tz98_178";
+const resizeWrapper = "_resizeWrapper_1brak_124";
+const pipContent = "_pipContent_1brak_129";
+const isOpen = "_isOpen_1brak_145";
+const container = "_container_1brak_152";
+const chat = "_chat_1brak_160";
 const style0 = {
   resizeWrapper,
-  empty,
+  pipContent,
+  isOpen,
   container,
-  chatResizer,
-  footer,
-  chat,
-  inner,
-  logs
+  chat
 };
 const cssModules = {
   "$style": style0
 };
-const CanvasChat = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+const LogsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules]]);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CanvasChatSwitch",
+  setup(__props) {
+    const { isNewLogsEnabled } = useSettingsStore();
+    return (_ctx, _cache) => {
+      const _component_CanvasChat = __unplugin_components_0;
+      return unref(isNewLogsEnabled) ? (openBlock(), createBlock(LogsPanel, { key: 0 })) : (openBlock(), createBlock(_component_CanvasChat, { key: 1 }));
+    };
+  }
+});
 export {
-  CanvasChat as default
+  _sfc_main as default
 };