@useinsider/guido 3.2.0-beta.803b92e → 3.2.0-beta.8220f9d

package/dist/components/organisms/chat/input/ChatInput.vue.js

@@ -0,0 +1,29 @@
+import n from "./ChatInput.vue2.js";
+/* empty css               */
+import i from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var r = function() {
+  var s = this, a = s._self._c, e = s._self._setupProxy;
+  return a("div", { staticClass: "chat-input" }, [a("div", { staticClass: "chat-input__container", class: { "chat-input__container--focused": e.isFocused } }, [a("div", { staticClass: "chat-input__text-area" }, [a("textarea", { directives: [{ name: "model", rawName: "v-model", value: e.message, expression: "message" }], ref: "textareaRef", staticClass: "chat-input__textarea", attrs: { rows: "1", disabled: s.disabled, placeholder: e.trans("newsletter.ai-input-placeholder") }, domProps: { value: e.message }, on: { blur: function(t) {
+    e.isFocused = !1;
+  }, focus: function(t) {
+    e.isFocused = !0;
+  }, input: [function(t) {
+    t.target.composing || (e.message = t.target.value);
+  }, e.handleInput], keydown: [function(t) {
+    return !t.type.indexOf("key") && s._k(t.keyCode, "enter", 13, t.key, "Enter") || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), e.handleSend.apply(null, arguments));
+  }, function(t) {
+    if (!t.type.indexOf("key") && s._k(t.keyCode, "enter", 13, t.key, "Enter") || !t.shiftKey) return null;
+    t.stopPropagation();
+  }] } })]), a("div", { staticClass: "chat-input__toolbar" }, [a("div", { staticClass: "chat-input__toolbar-left" }, [a(e.GuidoAgentSelector)], 1), a("div", { staticClass: "chat-input__actions" }, [a("button", { staticClass: "chat-input__send-btn", attrs: { type: "button", disabled: !e.canSend && !s.isLoading }, on: { click: e.handleButtonClick } }, [s.isLoading ? a(e.InIcons, { attrs: { name: "line-stop", size: "24" } }) : a(e.InIcons, { attrs: { name: "line-send", size: "24" } })], 1)])])])]);
+}, o = [], l = /* @__PURE__ */ i(
+  n,
+  r,
+  o,
+  !1,
+  null,
+  "dd031314"
+);
+const _ = l.exports;
+export {
+  _ as default
+};

package/dist/components/organisms/chat/input/ChatInput.vue2.js

@@ -0,0 +1,39 @@
+import { defineComponent as g, ref as l, computed as v, nextTick as x } from "vue";
+import { useTranslations as _ } from "../../../../composables/useTranslations.js";
+import y from "./GuidoAgentSelector.vue.js";
+import { InIcons as I } from "@useinsider/design-system-vue";
+const S = /* @__PURE__ */ g({
+  __name: "ChatInput",
+  props: {
+    isLoading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["send", "stop"],
+  setup(c, { expose: d, emit: s }) {
+    const t = c, f = _(), n = l(null), o = l(""), p = l(!1), i = v(
+      () => o.value.trim().length > 0 && !t.isLoading && !t.disabled
+    ), a = () => {
+      const e = n.value;
+      if (!e)
+        return;
+      e.style.height = "auto";
+      const u = 120;
+      e.style.height = `${Math.min(e.scrollHeight, u)}px`, e.style.overflowY = e.scrollHeight > u ? "auto" : "hidden";
+    }, m = () => {
+      a();
+    }, r = () => {
+      i.value && (s("send", o.value.trim()), o.value = "", x(() => a()));
+    }, h = () => {
+      t.isLoading ? s("stop") : r();
+    };
+    return d({
+      focus: () => {
+        var e;
+        return (e = n.value) == null ? void 0 : e.focus();
+      }
+    }), { __sfc: !0, props: t, emit: s, trans: f, textareaRef: n, message: o, isFocused: p, canSend: i, autoResize: a, handleInput: m, handleSend: r, handleButtonClick: h, GuidoAgentSelector: y, InIcons: I };
+  }
+});
+export {
+  S as default
+};

package/dist/components/organisms/chat/input/GuidoAgentSelector.vue.js

@@ -0,0 +1,22 @@
+import s from "./GuidoAgentSelector.vue2.js";
+/* empty css                        */
+import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var l = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return t.visibleAllowed.length > 1 ? o("div", { staticClass: "guido-agent-selector", attrs: { role: "tablist" } }, e._l(t.visibleAllowed, function(n) {
+    return o("button", { key: n.name, staticClass: "guido-agent-selector__option", class: { "guido-agent-selector__option--active": n.name === t.selectedAgent }, attrs: { role: "tab", type: "button", "aria-selected": n.name === t.selectedAgent }, on: { click: function(_) {
+      return t.handleSelect(n.name);
+    } } }, [e._v(" " + e._s(t.trans(n.labelKey)) + " ")]);
+  }), 0) : e._e();
+}, a = [], i = /* @__PURE__ */ r(
+  s,
+  l,
+  a,
+  !1,
+  null,
+  "1179a597"
+);
+const f = i.exports;
+export {
+  f as default
+};

package/dist/components/organisms/chat/input/GuidoAgentSelector.vue2.js

@@ -0,0 +1,29 @@
+import { defineComponent as d, ref as m, computed as f, onMounted as g } from "vue";
+import { useTranslations as p } from "../../../../composables/useTranslations.js";
+import { chatService as n } from "../../../../services/chatService.js";
+const b = /* @__PURE__ */ d({
+  __name: "GuidoAgentSelector",
+  setup(v) {
+    const i = ["email-template-agent", "liquid-agent"], r = p(), s = m([]), a = m(n.activeAgent), c = [
+      { name: "email-template-agent", labelKey: "newsletter.ai-agent-template" },
+      { name: "liquid-agent", labelKey: "newsletter.ai-agent-liquid" }
+    ], o = f(() => c.filter(
+      (e) => s.value.some((l) => l.name === e.name)
+    )), u = (e) => {
+      a.value = e, n.selectedAgent = e, n.newConversation();
+    };
+    return g(async () => {
+      var l;
+      const e = await n.fetchVisibleAgents();
+      if (s.value = e.filter(
+        (t) => i.includes(t.name)
+      ), !o.value.some((t) => t.name === a.value)) {
+        const t = ((l = o.value[0]) == null ? void 0 : l.name) ?? "email-template-agent";
+        a.value = t, n.selectedAgent = t;
+      }
+    }), { __sfc: !0, ALLOWED_AGENTS: i, trans: r, allAgents: s, selectedAgent: a, allowedConfigs: c, visibleAllowed: o, handleSelect: u };
+  }
+});
+export {
+  b as default
+};

package/dist/components/organisms/chat/messages/AiMessage.vue.js

@@ -0,0 +1,26 @@
+import n from "./AiMessage.vue2.js";
+/* empty css               */
+import i from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var r = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return t.isLoading || t.hasContent ? s("div", { staticClass: "ai-message d-f f-d-c a-i-f-s w-1" }, [t.isLoading && !t.hasContent ? s(t.ChatLoading, { attrs: { cycling: !t.statusText, text: t.statusText } }) : e._e(), t.hasContent || !t.isLoading ? [t.hasSegments ? s("div", { staticClass: "ai-message__segments" }, [e._l(e.message.segments, function(a) {
+    return [a.type === "text" && a.content ? s("div", { key: a._id, staticClass: "ai-message__text-segment", domProps: { innerHTML: e._s(t.formatMarkdown(a.content)) } }) : a.type === "error" ? s("div", { key: `err-${a._id}`, staticClass: "ai-message__error d-f a-i-c" }, [s(t.InIcons, { attrs: { name: "line-alert-triangle", size: "16" } }), s("span", { staticClass: "ai-message__error-text" }, [e._v(e._s(a.content))])], 1) : a.type === "blueprint" && a.blueprintType === "email_template" ? s(t.EmailTemplateBlueprintCard, { key: `bp-${a._id}`, attrs: { status: t.applyStatus[a.blueprintId ?? ""] ?? "pending", version: a.version }, on: { apply: function(c) {
+      return t.onApplyTemplate(a.blueprintId ?? "", a.blueprintData);
+    } } }) : a.type === "blueprint" ? s(t.BlueprintCard, { key: `bp-${a._id}`, attrs: { title: a.title, version: a.version } }) : e._e()];
+  }), t.isLoading && t.statusText ? s(t.ChatLoading, { attrs: { cycling: !1, text: t.statusText } }) : t.runningToolsCount > 0 ? s(t.ChatLoading, { attrs: { cycling: !1, text: t.runningToolsLabel } }) : e._e()], 2) : e.message.content ? s("div", { staticClass: "ai-message__content", domProps: { innerHTML: e._s(t.formatMarkdown(e.message.content)) } }) : e._e()] : e._e(), !t.isLoading && e.showFeedback ? s(t.AiMessageActions, { staticClass: "mt-2", attrs: { message: e.message }, on: { copy: function(a) {
+    return e.$emit("copy");
+  }, retry: function(a) {
+    return e.$emit("retry");
+  } } }) : e._e()], 2) : e._e();
+}, o = [], l = /* @__PURE__ */ i(
+  n,
+  r,
+  o,
+  !1,
+  null,
+  "b287766f"
+);
+const f = l.exports;
+export {
+  f as default
+};

package/dist/components/organisms/chat/messages/AiMessage.vue2.js

@@ -0,0 +1,41 @@
+import { defineComponent as f, computed as r } from "vue";
+import { useEmailTemplateApplier as g } from "../../../../composables/useEmailTemplateApplier.js";
+import y from "../blueprint/BlueprintCard.vue.js";
+import d from "../blueprint/EmailTemplateBlueprintCard.vue.js";
+import A from "./AiMessageActions.vue.js";
+import T from "./ChatLoading.vue.js";
+import { formatMarkdown as h } from "../../../../utils/markdown.js";
+import { InIcons as C } from "@useinsider/design-system-vue";
+const E = /* @__PURE__ */ f({
+  __name: "AiMessage",
+  props: {
+    message: null,
+    showFeedback: { type: Boolean, default: !0 }
+  },
+  emits: ["copy", "retry"],
+  setup(p) {
+    const t = p, { applyStatus: i, applyTemplate: a } = g(), m = r(() => t.message.isStreaming === !0), n = r(
+      () => Array.isArray(t.message.segments) && t.message.segments.length > 0
+    ), s = r(() => n.value ? t.message.segments.filter(
+      (e) => e.type === "tool" && e.isRunning && !e.error
+    ).length : 0), l = r(() => {
+      if (s.value === 0)
+        return "";
+      if (s.value === 1) {
+        const e = t.message.segments.find(
+          (o) => o.type === "tool" && o.isRunning && !o.error
+        );
+        return (e == null ? void 0 : e.name) ?? (e == null ? void 0 : e.title) ?? "Working...";
+      }
+      return `Working on ${s.value} tasks`;
+    }), u = r(() => n.value ? t.message.segments.some(
+      (e) => e.type === "text" && e.content || e.type === "blueprint"
+    ) : !!t.message.content), c = r(() => t.message.currentStatus ?? "");
+    return { __sfc: !0, props: t, applyStatus: i, applyTemplate: a, isLoading: m, hasSegments: n, runningToolsCount: s, runningToolsLabel: l, hasContent: u, statusText: c, onApplyTemplate: (e, o) => {
+      o && a(e, o);
+    }, BlueprintCard: y, EmailTemplateBlueprintCard: d, AiMessageActions: A, ChatLoading: T, formatMarkdown: h, InIcons: C };
+  }
+});
+export {
+  E as default
+};

package/dist/components/organisms/chat/messages/AiMessageActions.vue.js

@@ -0,0 +1,18 @@
+import a from "./AiMessageActions.vue2.js";
+/* empty css                      */
+import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var c = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("div", { staticClass: "ai-message-actions d-f a-i-c" }, [s("button", { staticClass: "ai-message-actions__btn d-i-f a-i-c j-c-c bor-n cur-p bor-r-1", attrs: { type: "button", title: t.trans("newsletter.ai-retry") }, on: { click: t.handleRetry } }, [s(t.InIcons, { attrs: { name: "line-reset", size: "20" } })], 1), s("button", { staticClass: "ai-message-actions__btn d-i-f a-i-c j-c-c bor-n cur-p bor-r-1", class: { "ai-message-actions__btn--success": t.copied }, attrs: { type: "button", title: t.copied ? t.trans("newsletter.ai-copied") : t.trans("newsletter.ai-copy") }, on: { click: t.handleCopy } }, [s(t.InIcons, { attrs: { size: "20", name: t.copied ? "line-success-status" : "line-copy" } })], 1)]);
+}, i = [], r = /* @__PURE__ */ n(
+  a,
+  c,
+  i,
+  !1,
+  null,
+  "4b57f736"
+);
+const m = r.exports;
+export {
+  m as default
+};

package/dist/components/organisms/chat/messages/AiMessageActions.vue2.js

@@ -0,0 +1,27 @@
+import { defineComponent as m } from "vue";
+import { useChatState as y } from "../../../../composables/useChatState.js";
+import { useTranslations as l } from "../../../../composables/useTranslations.js";
+import { InIcons as d } from "@useinsider/design-system-vue";
+import { useClipboard as f } from "../../../../node_modules/@vueuse/core/index.js";
+const v = /* @__PURE__ */ m({
+  __name: "AiMessageActions",
+  props: {
+    message: null
+  },
+  emits: ["copy", "retry"],
+  setup(p, { emit: e }) {
+    const t = p, c = l(), { copy: n, copied: i } = f({ copiedDuring: 2e3 }), { retryLastUserMessage: r } = y(), a = () => {
+      const { segments: o } = t.message;
+      return Array.isArray(o) && o.length > 0 ? o.filter((s) => s.type === "text").map((s) => s.content ?? "").join(`
+`) : t.message.content;
+    };
+    return { __sfc: !0, props: t, emit: e, trans: c, copy: n, copied: i, retryLastUserMessage: r, getPlainText: a, handleCopy: () => {
+      n(a()), e("copy");
+    }, handleRetry: () => {
+      r(), e("retry");
+    }, InIcons: d };
+  }
+});
+export {
+  v as default
+};

package/dist/components/organisms/chat/messages/ChatLoading.vue.js

@@ -0,0 +1,18 @@
+import i from "./ChatLoading.vue2.js";
+/* empty css                 */
+import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var c = function() {
+  var a = this, s = a._self._c, t = a._self._setupProxy;
+  return s("div", { staticClass: "chat-loading d-f a-i-c" }, [s("span", { staticClass: "chat-loading__icon d-i-f a-i-c j-c-c" }, [s(t.InIcons, { staticClass: "i-c-10", attrs: { name: "line-smart-sirius-ai", size: "20" } })], 1), s("span", { staticClass: "chat-loading__text" }, [a._v(a._s(t.displayText))])]);
+}, e = [], r = /* @__PURE__ */ n(
+  i,
+  c,
+  e,
+  !1,
+  null,
+  "4a52f577"
+);
+const d = r.exports;
+export {
+  d as default
+};

package/dist/components/organisms/chat/messages/ChatLoading.vue2.js

@@ -0,0 +1,30 @@
+import { defineComponent as i, ref as c, computed as u, onMounted as p, onUnmounted as d } from "vue";
+import { useTranslations as f } from "../../../../composables/useTranslations.js";
+import { InIcons as g } from "@useinsider/design-system-vue";
+const _ = /* @__PURE__ */ i({
+  __name: "ChatLoading",
+  props: {
+    text: { default: "" },
+    cycling: { type: Boolean, default: !0 }
+  },
+  setup(l) {
+    const e = l, o = 2500, s = f(), n = c(0);
+    let t = null;
+    const a = [
+      "newsletter.ai-loading-analyzing",
+      "newsletter.ai-loading-processing",
+      "newsletter.ai-loading-searching",
+      "newsletter.ai-loading-synthesizing"
+    ], r = u(() => e.text ? e.text : s(a[n.value]));
+    return p(() => {
+      e.cycling && !e.text && (t = setInterval(() => {
+        n.value = (n.value + 1) % a.length;
+      }, o));
+    }), d(() => {
+      t && (clearInterval(t), t = null);
+    }), { __sfc: !0, PHASE_INTERVAL: o, props: e, trans: s, phaseIndex: n, intervalId: t, phases: a, displayText: r, InIcons: g };
+  }
+});
+export {
+  _ as default
+};

package/dist/components/organisms/chat/messages/ChatMessages.vue.js

@@ -0,0 +1,26 @@
+import i from "./ChatMessages.vue2.js";
+/* empty css                  */
+import o from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var a = function() {
+  var e = this, n = e._self._c, r = e._self._setupProxy;
+  return n("div", { ref: "containerRef", staticClass: "chat-messages f-g-1", staticStyle: { "min-height": "0" } }, [n("div", { staticClass: "chat-messages__list d-f f-d-c p-4" }, [e._l(e.messages, function(t) {
+    return [t.role === "user" ? n(r.UserMessage, { key: t.id, attrs: { content: t.content, "show-actions": t.id === r.lastUserMessageId, timestamp: t.timestamp }, on: { copy: function(s) {
+      return e.$emit("copy-message", t.id);
+    } } }) : n(r.AiMessage, { key: `ai-${t.id}`, attrs: { message: t }, on: { copy: function(s) {
+      return e.$emit("copy-message", t.id);
+    }, retry: function(s) {
+      return e.$emit("retry", t.id);
+    } } })];
+  })], 2)]);
+}, c = [], f = /* @__PURE__ */ o(
+  i,
+  a,
+  c,
+  !1,
+  null,
+  "42f0f380"
+);
+const u = f.exports;
+export {
+  u as default
+};

package/dist/components/organisms/chat/messages/ChatMessages.vue2.js

@@ -0,0 +1,67 @@
+import { defineComponent as _, ref as m, inject as H, computed as C, watch as f, onMounted as M, nextTick as g, onUnmounted as T } from "vue";
+import x from "./AiMessage.vue.js";
+import U from "./UserMessage.vue.js";
+const R = /* @__PURE__ */ _({
+  __name: "ChatMessages",
+  props: {
+    messages: null,
+    autoScroll: { type: Boolean, default: !0 }
+  },
+  emits: ["copy-message", "retry", "scroll"],
+  setup(S, { emit: d }) {
+    const t = S, p = 50, h = m(null), i = H("chatScrollContainer", m(null)), n = m(!1), E = C(() => {
+      for (let e = t.messages.length - 1; e >= 0; e--)
+        if (t.messages[e].role === "user")
+          return t.messages[e].id;
+      return null;
+    }), r = () => i.value ?? h.value, c = (e = !1) => {
+      if (n.value && !e)
+        return;
+      const o = r();
+      o && g(() => {
+        o.scrollTo({
+          top: o.scrollHeight,
+          behavior: "smooth"
+        }), e && (n.value = !1);
+      });
+    }, a = () => {
+      const e = r();
+      if (!e)
+        return;
+      const { scrollHeight: o, scrollTop: l, clientHeight: L } = e, v = o - l - L < p;
+      n.value = !v, d("scroll", { isAtBottom: v, scrollTop: l });
+    };
+    f(
+      () => t.messages.length,
+      () => {
+        t.autoScroll && c();
+      }
+    ), f(
+      () => {
+        var o, l;
+        const e = t.messages[t.messages.length - 1];
+        return e != null && e.isStreaming ? ((o = e.content) == null ? void 0 : o.length) ?? ((l = e.segments) == null ? void 0 : l.length) ?? 0 : -1;
+      },
+      () => {
+        t.autoScroll && c();
+      }
+    );
+    let s = null;
+    const u = () => {
+      const e = r();
+      e !== s && (s && s.removeEventListener("scroll", a), e && (e.addEventListener("scroll", a), s = e));
+    };
+    return M(() => {
+      g(() => {
+        u(), c(!0);
+      });
+    }), f(i, () => {
+      g(() => u());
+    }), T(() => {
+      s && (s.removeEventListener("scroll", a), s = null);
+    }), { __sfc: !0, SCROLL_THRESHOLD: p, props: t, emit: d, containerRef: h, externalContainer: i, userHasScrolledUp: n, lastUserMessageId: E, getScrollElement: r, scrollToBottom: c, handleScroll: a, boundScrollEl: s, bindScrollListener: u, AiMessage: x, UserMessage: U };
+  }
+});
+export {
+  R as default
+};

package/dist/components/organisms/chat/messages/UserMessage.vue.js

@@ -0,0 +1,18 @@
+import a from "./UserMessage.vue2.js";
+/* empty css                 */
+import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var i = function() {
+  var s = this, e = s._self._c, t = s._self._setupProxy;
+  return e("div", { staticClass: "user-message d-f f-d-c a-i-f-e w-1" }, [e("div", { staticClass: "user-message__view-wrapper" }, [e("div", { staticClass: "user-message__bubble-row d-f a-i-f-s j-c-f-e w-1" }, [s.showActions ? e("div", { staticClass: "user-message__actions d-f a-i-c" }, [e("button", { staticClass: "user-message__action-btn d-i-f a-i-c j-c-c bor-n cur-p bor-r-1", class: { "user-message__action-btn--success": t.copied }, attrs: { type: "button", title: t.copied ? t.trans("newsletter.ai-copied") : t.trans("newsletter.ai-copy") }, on: { click: t.handleCopy } }, [e(t.InIcons, { attrs: { size: "20", name: t.copied ? "line-success-status" : "line-copy" } })], 1)]) : s._e(), e("div", { staticClass: "user-message__bubble" }, [e("span", { staticClass: "user-message__text" }, [s._v(s._s(s.content))])])]), e("span", { staticClass: "user-message__timestamp" }, [s._v(" " + s._s(t.trans("newsletter.ai-you")) + " - " + s._s(t.formattedTime) + " ")])])]);
+}, c = [], n = /* @__PURE__ */ r(
+  a,
+  i,
+  c,
+  !1,
+  null,
+  "bc03b908"
+);
+const u = n.exports;
+export {
+  u as default
+};

package/dist/components/organisms/chat/messages/UserMessage.vue2.js

@@ -0,0 +1,26 @@
+import { defineComponent as i, computed as a } from "vue";
+import { useTranslations as p } from "../../../../composables/useTranslations.js";
+import { InIcons as m } from "@useinsider/design-system-vue";
+import { useClipboard as c } from "../../../../node_modules/@vueuse/core/index.js";
+const h = /* @__PURE__ */ i({
+  __name: "UserMessage",
+  props: {
+    content: null,
+    timestamp: { default: () => Date.now() },
+    showActions: { type: Boolean, default: !0 }
+  },
+  emits: ["copy"],
+  setup(o) {
+    const t = o, n = p(), { copy: e, copied: s } = c({ copiedDuring: 2e3 }), r = a(() => new Date(t.timestamp).toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: !1
+    }));
+    return { __sfc: !0, props: t, trans: n, copy: e, copied: s, formattedTime: r, handleCopy: () => {
+      e(t.content);
+    }, InIcons: m };
+  }
+});
+export {
+  h as default
+};

package/dist/components/organisms/header/RightSlot.vue.js

@@ -1,11 +1,11 @@
-import s from "./RightSlot.vue2.js";
-import o from "../../../_virtual/_plugin-vue2_normalizer.js";
-var r = function() {
-  var i = this, e = i._self._c, t = i._self._setupProxy;
-  return e("div", { staticClass: "d-f a-i-c" }, [t.editorStore.isVersionHistoryOpen ? i._e() : e(t.AutoSaveToggle), t.isLiquidEnabled && !t.editorStore.isVersionHistoryOpen ? e(t.InChips, { staticClass: "mr-1", attrs: { id: "guido__liquid-tag-chip", styles: "stroke", type: "default", value: "liquid-tags", "close-button": !1, "disabled-status": t.editorStore.loadingStatus, interactive: !1, text: t.trans("email-editor.liquid-tags-enabled") } }) : i._e(), t.editorStore.isVersionHistoryOpen ? e(t.RestoreButton) : e(t.EditorActions, { ref: "editorActionsRef" })], 1);
-}, a = [], n = /* @__PURE__ */ o(
-  s,
-  r,
+import i from "./RightSlot.vue2.js";
+import r from "../../../_virtual/_plugin-vue2_normalizer.js";
+var o = function() {
+  var s = this, e = s._self._c, t = s._self._setupProxy;
+  return e("div", { staticClass: "d-f a-i-c" }, [t.isLiquidEnabled && !t.editorStore.isVersionHistoryOpen ? e(t.InChips, { staticClass: "mr-3", attrs: { id: "guido__liquid-tag-chip", styles: "stroke", type: "default", value: "liquid-tags", "close-button": !1, "disabled-status": t.editorStore.loadingStatus, interactive: !1, text: t.trans("email-editor.liquid-tags-enabled") } }) : s._e(), t.editorStore.isVersionHistoryOpen ? e(t.RestoreButton) : e(t.EditorActions, { ref: "editorActionsRef" })], 1);
+}, a = [], n = /* @__PURE__ */ r(
+  i,
+  o,
   a,
   !1,
   null,

package/dist/components/organisms/header/RightSlot.vue2.js

@@ -1,23 +1,22 @@
 import { defineComponent as a, ref as f, computed as p } from "vue";
 import { useConfig as u } from "../../../composables/useConfig.js";
 import { useTranslations as d } from "../../../composables/useTranslations.js";
-import { useEditorStore as l } from "../../../stores/editor.js";
-import { InChips as c } from "@useinsider/design-system-vue";
-import _ from "./AutoSaveToggle.vue.js";
-import S from "./EditorActions.vue.js";
-import g from "./version-history/RestoreButton.vue.js";
-const T = /* @__PURE__ */ a({
+import { useEditorStore as c } from "../../../stores/editor.js";
+import { InChips as l } from "@useinsider/design-system-vue";
+import _ from "./EditorActions.vue.js";
+import S from "./version-history/RestoreButton.vue.js";
+const x = /* @__PURE__ */ a({
   __name: "RightSlot",
   setup(h, { expose: r }) {
-    const { isFeatureEnabled: o } = u(), i = d(), n = l(), t = f(null), s = p(() => o("liquidSyntax"));
+    const { isFeatureEnabled: o } = u(), n = d(), i = c(), t = f(null), s = p(() => o("liquidSyntax"));
     return r({
       handleSave: (m) => {
         var e;
         return (e = t.value) == null ? void 0 : e.handleSave(m);
       }
-    }), { __sfc: !0, isFeatureEnabled: o, trans: i, editorStore: n, editorActionsRef: t, isLiquidEnabled: s, InChips: c, AutoSaveToggle: _, EditorActions: S, RestoreButton: g };
+    }), { __sfc: !0, isFeatureEnabled: o, trans: n, editorStore: i, editorActionsRef: t, isLiquidEnabled: s, InChips: l, EditorActions: _, RestoreButton: S };
   }
 });
 export {
-  T as default
+  x as default
 };

package/dist/components/organisms/onboarding/AMPOnboarding.vue2.js

@@ -1,37 +1,57 @@
-import { defineComponent as p, computed as e, watch as m } from "vue";
-import { useTranslations as g } from "../../../composables/useTranslations.js";
-import { useOnboardingStore as u } from "../../../stores/onboarding.js";
-import { InOnboard as b } from "@useinsider/design-system-vue";
-const O = /* @__PURE__ */ p({
+import { defineComponent as u, computed as d, watch as b, nextTick as f } from "vue";
+import { useTranslations as C } from "../../../composables/useTranslations.js";
+import { HEADER_SELECTOR as O, AMP_TOGGLE_BUTTON_SELECTOR as _, AMP_TOGGLE_WRAPPER_SELECTOR as T, POPOVER_LEFT_OFFSET as g, POPOVER_TOP_GAP as E } from "../../../enums/onboarding.js";
+import { useOnboardingStore as x } from "../../../stores/onboarding.js";
+import { InOnboard as P } from "@useinsider/design-system-vue";
+const G = /* @__PURE__ */ u({
   __name: "AMPOnboarding",
-  setup(l) {
-    const i = g(), o = u(), r = e(() => `${window.innerWidth / 2 - 110}px`), a = e(() => [
-      {
-        classes: "guido-amp-onboarding",
-        left: r.value,
-        top: "70px",
-        position: "Top Center",
-        title: i("email-editor.onboarding-amp-title"),
-        description: i("email-editor.onboarding-amp-description"),
-        imageSource: "",
-        backButtonClick: () => {
-        },
-        nextButtonType: "text",
-        nextButtonText: i("action-builder.ok"),
-        nextButtonClick: () => void o.close("ampOnboarding")
-      }
-    ]), d = e(() => o.onboardings.ampOnboarding.config.length > 0 && o.onboardings.ampOnboarding.isActive), s = () => {
-      var n, t;
-      (t = (n = o.getAmpCurrentCard) == null ? void 0 : n.nextButtonClick) == null || t.call(n);
-    }, c = () => {
-      var n, t;
-      (t = (n = o.getAmpCurrentCard) == null ? void 0 : n.backButtonClick) == null || t.call(n);
+  setup(R) {
+    const e = C(), o = x(), r = () => {
+      const t = document.querySelector(O), n = document.querySelector(_), c = n == null ? void 0 : n.closest(T);
+      if (!c || !t)
+        return {
+          left: `${((t == null ? void 0 : t.offsetWidth) ?? window.innerWidth) / 2 - g}px`,
+          top: "68px"
+        };
+      const s = t.getBoundingClientRect(), i = c.getBoundingClientRect();
+      return {
+        left: `${i.left - s.left + i.width / 2 - g}px`,
+        top: `${i.bottom - s.top + E}px`
+      };
+    }, a = d(() => {
+      const { left: t, top: n } = r();
+      return [
+        {
+          classes: "guido-amp-onboarding",
+          left: t,
+          top: n,
+          position: "Top Center",
+          title: e("email-editor.onboarding-amp-title"),
+          description: e("email-editor.onboarding-amp-description"),
+          imageSource: "",
+          backButtonClick: () => {
+          },
+          nextButtonType: "text",
+          nextButtonText: e("action-builder.ok"),
+          nextButtonClick: () => void o.close("ampOnboarding")
+        }
+      ];
+    }), l = d(() => o.onboardings.ampOnboarding.config.length > 0 && o.onboardings.ampOnboarding.isActive), p = () => {
+      var t, n;
+      (n = (t = o.getAmpCurrentCard) == null ? void 0 : t.nextButtonClick) == null || n.call(t);
+    }, m = () => {
+      var t, n;
+      (n = (t = o.getAmpCurrentCard) == null ? void 0 : t.backButtonClick) == null || n.call(t);
     };
-    return m(() => o.onboardings.ampOnboarding.isActive, (n) => {
-      n && o.setConfig("ampOnboarding", a.value);
-    }, { immediate: !0 }), { __sfc: !0, trans: i, onboardingStore: o, centerLeft: r, onboardingCardsConfig: a, isVisible: d, handleNext: s, handleBack: c, InOnboard: b };
+    return b(
+      () => o.onboardings.ampOnboarding.isActive,
+      async (t) => {
+        t && (await f(), o.setConfig("ampOnboarding", a.value));
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, trans: e, onboardingStore: o, getTogglePosition: r, onboardingCardsConfig: a, isVisible: l, handleNext: p, handleBack: m, InOnboard: P };
   }
 });
 export {
-  O as default
+  G as default
 };

package/dist/components/organisms/onboarding/GenericOnboarding.vue.js

@@ -13,7 +13,7 @@ var l = function() {
   p,
   !1,
   null,
-  "29b9af29"
+  "7419ae06"
 );
 const S = _.exports;
 export {