bunnyquery 1.4.6 → 1.5.0

package/bunnyquery.css

@@ -162,6 +162,87 @@
     to { transform: rotate(360deg); }
 }
 
+/* jumping ASCII bunny — full-area "loading/fetching" indicator (page/gate loads,
+   initial history fetch, settings panel). Ported from www.bunnyquery.com
+   bunnyLoader.vue. Two <pre> frames toggle + hop across the track and flip. */
+.bq-bunny-loader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+}
+.bq-bunny-loader--overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 4;
+}
+.bq-bunny-stage {
+    display: inline-block;
+    position: relative;
+    text-align: left;
+}
+.bq-bunny-track {
+    position: relative;
+    height: 3.6rem;
+    width: 100%;
+    animation: bq-bunny-move 9s steps(12) infinite;
+}
+.bq-bunny-dir {
+    display: inline-block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    animation: bq-bunny-flip 9s steps(1) infinite;
+}
+.bq-frame {
+    margin: 0;
+    /* Pin a Latin monospace font. Without it the <pre> falls back to the UA
+       `monospace` keyword, which on Korean/Japanese systems can resolve to a
+       CJK font that renders U+005C (backslash) as ₩ / ¥ — wrecking the art. */
+    font-family: var(--bq-mono);
+    font-size: 1rem;
+    line-height: 1.2;
+    white-space: pre;
+    color: var(--bq-ink);
+}
+.bq-frame-a {
+    animation: bq-bunny-toggle-a 1s steps(1) infinite;
+}
+.bq-frame-b {
+    animation: bq-bunny-toggle-b 1s steps(1) infinite;
+    opacity: 0;
+}
+.bq-bunny-loader__label {
+    color: var(--bq-ink);
+    font-family: var(--bq-mono);
+    font-size: 0.83rem;
+}
+@keyframes bq-bunny-move {
+    0%     { transform: translateX(-11ch); }
+    25%    { transform: translateX(4ch); }
+    37.5%  { transform: translateX(4ch); }
+    50%    { transform: translateX(4ch); }
+    75%    { transform: translateX(-11ch); }
+    87.5%  { transform: translateX(-11ch); }
+    100%   { transform: translateX(-11ch); }
+}
+@keyframes bq-bunny-flip {
+    0%   { transform: scaleX(1); }
+    50%  { transform: scaleX(-1); }
+}
+@keyframes bq-bunny-toggle-a {
+    0%   { opacity: 1; }
+    25%  { opacity: 0; }
+    100% { opacity: 1; }
+}
+@keyframes bq-bunny-toggle-b {
+    0%   { opacity: 0; }
+    25%  { opacity: 1; }
+    100% { opacity: 0; }
+}
+
 /* ============================================================================
  * AUTH VIEWS (login / signup / forgot / verify / settings)
  * ==========================================================================*/

package/bunnyquery.js

@@ -2176,7 +2176,7 @@ ${options.inlineContentPlaceholder}
   (function() {
     var MCP_PROD = "https://mcp.broadwayinc.computer";
     var MCP_DEV = "https://mcp-dev.broadwayinc.computer";
-    var BQ_VERSION = "1.4.6" ;
+    var BQ_VERSION = "1.5.0" ;
     var ATTACHMENT_URL_EXPIRES_SECONDS = 600;
     var GOOGLE_AUTH_URL = "https://accounts.google.com/o/oauth2/v2/auth";
     var GOOGLE_TOKEN_URL = "https://oauth2.googleapis.com/token";
@@ -2431,13 +2431,40 @@ ${options.inlineContentPlaceholder}
         })
       );
     }
+    var BUNNY_FRAME_A = '  (\\(\\\n  ( - -)\n c(")(")';
+    var BUNNY_FRAME_B = '  /)/)\n ( . .)\nc(")(")';
+    function bunnyLoader(label, overlay) {
+      return h(
+        "div",
+        {
+          class: "bq-bunny-loader" + (""),
+          "aria-hidden": "true",
+          translate: "no"
+        },
+        h(
+          "div",
+          { class: "bq-bunny-stage" },
+          h(
+            "div",
+            { class: "bq-bunny-track" },
+            h(
+              "div",
+              { class: "bq-bunny-dir" },
+              h("pre", { class: "bq-frame bq-frame-a", translate: "no", text: BUNNY_FRAME_A }),
+              h("pre", { class: "bq-frame bq-frame-b", translate: "no", text: BUNNY_FRAME_B })
+            )
+          )
+        ),
+        label ? h("div", { class: "bq-bunny-loader__label", text: label }) : null
+      );
+    }
     function showLoading(label) {
       render("loading", function() {
         return pageRoot(
           h(
             "div",
             { class: "bq-disabled-inner", style: { marginTop: "3rem" } },
-            h("span", { class: "bq-loader", text: "Loading" })
+            bunnyLoader("Loading...")
           )
         );
       });
@@ -3323,7 +3350,7 @@ ${options.inlineContentPlaceholder}
       CS.messagesBox.appendChild(h(
         "div",
         { class: "bq-chat-settings" },
-        h("div", { class: "bq-chat-settings-loading" }, h("span", { class: "bq-loader", text: "Loading" }))
+        h("div", { class: "bq-chat-settings-loading" }, bunnyLoader("Loading..."))
       ));
       Promise.all([getProfile(), getNewsletterStatus()]).then(function(res) {
         if (res[0]) S.user = res[0];
@@ -4843,9 +4870,16 @@ ${options.inlineContentPlaceholder}
       return h("div", { class: cls.join(" "), dataset: { msgIndex: String(idx) } }, bubble);
     }
     function historyLoadingEl(initial) {
+      if (initial) {
+        return h(
+          "div",
+          { class: "bq-history-loading is-initial" },
+          bunnyLoader("Fetching history...")
+        );
+      }
       return h(
         "div",
-        { class: "bq-history-loading" + (initial ? " is-initial" : "") },
+        { class: "bq-history-loading" },
         h("span", { text: "Fetching history" }),
         h("span", { class: "bq-loader" })
       );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bunnyquery",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "description": "Embeddable BunnyQuery AI chat widget + its framework-agnostic chat engine",
   "main": "bunnyquery.js",
   "exports": {

package/src/widget.css

@@ -157,6 +157,87 @@
     to { transform: rotate(360deg); }
 }
 
+/* jumping ASCII bunny — full-area "loading/fetching" indicator (page/gate loads,
+   initial history fetch, settings panel). Ported from www.bunnyquery.com
+   bunnyLoader.vue. Two <pre> frames toggle + hop across the track and flip. */
+.bq-bunny-loader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+}
+.bq-bunny-loader--overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 4;
+}
+.bq-bunny-stage {
+    display: inline-block;
+    position: relative;
+    text-align: left;
+}
+.bq-bunny-track {
+    position: relative;
+    height: 3.6rem;
+    width: 100%;
+    animation: bq-bunny-move 9s steps(12) infinite;
+}
+.bq-bunny-dir {
+    display: inline-block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    animation: bq-bunny-flip 9s steps(1) infinite;
+}
+.bq-frame {
+    margin: 0;
+    /* Pin a Latin monospace font. Without it the <pre> falls back to the UA
+       `monospace` keyword, which on Korean/Japanese systems can resolve to a
+       CJK font that renders U+005C (backslash) as ₩ / ¥ — wrecking the art. */
+    font-family: var(--bq-mono);
+    font-size: 1rem;
+    line-height: 1.2;
+    white-space: pre;
+    color: var(--bq-ink);
+}
+.bq-frame-a {
+    animation: bq-bunny-toggle-a 1s steps(1) infinite;
+}
+.bq-frame-b {
+    animation: bq-bunny-toggle-b 1s steps(1) infinite;
+    opacity: 0;
+}
+.bq-bunny-loader__label {
+    color: var(--bq-ink);
+    font-family: var(--bq-mono);
+    font-size: 0.83rem;
+}
+@keyframes bq-bunny-move {
+    0%     { transform: translateX(-11ch); }
+    25%    { transform: translateX(4ch); }
+    37.5%  { transform: translateX(4ch); }
+    50%    { transform: translateX(4ch); }
+    75%    { transform: translateX(-11ch); }
+    87.5%  { transform: translateX(-11ch); }
+    100%   { transform: translateX(-11ch); }
+}
+@keyframes bq-bunny-flip {
+    0%   { transform: scaleX(1); }
+    50%  { transform: scaleX(-1); }
+}
+@keyframes bq-bunny-toggle-a {
+    0%   { opacity: 1; }
+    25%  { opacity: 0; }
+    100% { opacity: 1; }
+}
+@keyframes bq-bunny-toggle-b {
+    0%   { opacity: 0; }
+    25%  { opacity: 1; }
+    100% { opacity: 0; }
+}
+
 /* ============================================================================
  * AUTH VIEWS (login / signup / forgot / verify / settings)
  * ==========================================================================*/