@nuraly/runtime 0.1.9 → 0.1.11

package/components/ui/components/base/controllers/InputHandlerController.ts

@@ -55,6 +55,11 @@ export class InputHandlerController implements ReactiveController, Disposable {
   private setupEventListeners(): void {
     const { component, uniqueUUID } = this.host;
 
+    // Guard: component must be defined before setting up listeners
+    if (!component?.uuid) {
+      return;
+    }
+
     // Platform change - reprocess all inputs
     this.subscription.add(
       eventDispatcher.on("Vars:currentPlatform", () => {

package/components/ui/components/inputs/ColorPicker/colorpicker.ts

@@ -4,15 +4,9 @@ import { styleMap } from "lit/directives/style-map.js";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { ref } from "lit/directives/ref.js";
+import "@nuralyui/color-picker";
 import { EMPTY_STRING } from '../../../../../utils/constants.ts';
 
-// Safely import @nuralyui/color-picker
-try {
-  await import("@nuralyui/color-picker");
-} catch (error) {
-  console.warn('[@nuralyui/color-picker] Package not found or failed to load.');
-}
-
 @customElement("color-picker-block")
 export class ColorPickerBlock extends BaseElementBlock {
   static styles = [

package/components/ui/components/inputs/Form/Form.ts

@@ -15,17 +15,9 @@ try {
   console.warn('[@nuralyui/forms] Package not found or failed to load.');
 }
 
-// Safely import icon and label for placeholder
-try {
-  await import("@nuralyui/icon");
-} catch (error) {
-  console.warn('[@nuralyui/icon] Package not found or failed to load.');
-}
-try {
-  await import("@nuralyui/label");
-} catch (error) {
-  console.warn('[@nuralyui/label] Package not found or failed to load.');
-}
+// Import icon and label for placeholder
+import "@nuralyui/icon";
+import "@nuralyui/label";
 
 /**
  * Form block component that wraps nr-form and handles field registration

package/components/ui/components/inputs/RadioButton/Radio-button.ts

@@ -3,13 +3,7 @@ import { BaseElementBlock } from "../../base/BaseElement.ts";
 import type { ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { html } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-
-// Safely import @nuralyui/radio-group
-try {
-  await import("@nuralyui/radio-group");
-} catch (error) {
-  console.warn('[@nuralyui/radio-group] Package not found or failed to load.');
-}
+import "@nuralyui/radio-group";
 
 @customElement("radio-button-block")
 export class RadioButtonBlock extends BaseElementBlock {

package/components/ui/components/inputs/Select/Select.ts

@@ -5,13 +5,7 @@ import { type ComponentElement } from '../../../../../redux/store/component/comp
 import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { EMPTY_STRING } from '../../../../../utils/constants.ts';
 import { ref } from "lit/directives/ref.js";
-
-// Safely import @nuralyui/select
-try {
-  await import("@nuralyui/select");
-} catch (error) {
-  console.warn('[@nuralyui/select] Package not found or failed to load.');
-}
+import "@nuralyui/select";
 
 
 @customElement("select-block")

package/components/ui/components/layout/Grid/Col.ts

@@ -15,12 +15,8 @@ import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { setCurrentComponentIdAction } from '../../../../../redux/actions/component/setCurrentComponentIdAction.ts';
 import { setContextMenuEvent } from '../../../../../redux/actions/page/setContextMenuEvent.ts';
 
-// Safely import nr-col from nuralyui grid
-try {
-  await import("@nuralyui/grid");
-} catch (error) {
-  console.warn('[@nuralyui/grid] Package not found or failed to load.');
-}
+// Import nr-col from nuralyui grid
+import "@nuralyui/grid";
 
 /** Input property names that trigger re-render */
 const COL_INPUT_PROPS = ['span', 'offset', 'order', 'pull', 'push', 'flex', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;

package/components/ui/components/layout/Grid/Row.ts

@@ -15,12 +15,8 @@ import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { setCurrentComponentIdAction } from '../../../../../redux/actions/component/setCurrentComponentIdAction.ts';
 import { setContextMenuEvent } from '../../../../../redux/actions/page/setContextMenuEvent.ts';
 
-// Safely import nr-row from nuralyui grid
-try {
-  await import("@nuralyui/grid");
-} catch (error) {
-  console.warn('[@nuralyui/grid] Package not found or failed to load.');
-}
+// Import nr-row from nuralyui grid
+import "@nuralyui/grid";
 
 /** Input property names that trigger re-render */
 const ROW_INPUT_PROPS = ['gutter', 'align', 'justify', 'wrap'] as const;

package/components/ui/components/studio/FunctionsPanel/FunctionsPanel.ts

@@ -26,22 +26,10 @@ import { ExecuteInstance } from '../../../../../state/runtime-context';
 import { openEditorTab, setCurrentEditorTab } from '../../../../../redux/actions/editor';
 import { $editorState, $currentApplication } from '../../../../../redux/store/apps';
 
-// Safely import nuraly-ui components
-try {
-  await import("@nuralyui/button");
-} catch (error) {
-  console.warn('[@nuralyui/button] Package not found or failed to load.');
-}
-try {
-  await import("@nuralyui/menu");
-} catch (error) {
-  console.warn('[@nuralyui/menu] Package not found or failed to load.');
-}
-try {
-  await import("@nuralyui/icon");
-} catch (error) {
-  console.warn('[@nuralyui/icon] Package not found or failed to load.');
-}
+// Import nuraly-ui components
+import '@nuralyui/button';
+import '@nuralyui/menu';
+import '@nuralyui/icon';
 
 
 export interface FunctionItem {

package/dist/AIChat-C-wFf4PD.js

@@ -0,0 +1,220 @@
+import { $ as u, k as d, l, m as g, i as m, v as f, B as y, o as b, b as h, c as x, d as c, t as v } from "./micro-app-entry-BgDXbkmh.js";
+function C(t, e) {
+  u.set({
+    ...u.get(),
+    [t]: e
+  });
+}
+function w(t) {
+  t.forEach((e) => {
+    d(
+      e,
+      l("global", "currentPage").value,
+      l("global", "currentEditingApplication").value.uuid
+    );
+  }), setTimeout(() => {
+    g.emit("component:refresh");
+  }, 1e3);
+}
+const U = m`
+            :host {
+              display:flex;
+              align-items:center;
+            }
+            .chat-input-container {
+                position: relative;
+                display: inline-block;
+                width: 100%;
+            }
+            .chat-input {
+                display: flex;
+                margin-top: 10px;
+                width: 100%;
+            }
+            .chat-input nr-input {
+                flex: 1;
+                margin-right: 10px;
+            }
+            .chat-messages {
+                margin-top: 10px;
+                max-height: 200px;
+                overflow-y: auto;
+                background-color: #f9f9f9;
+                border: 1px solid #ccc;
+                border-radius: 8px;
+                padding: 10px;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            }
+            .chat-message {
+                border-radius: 16px;
+                padding: 8px 12px;
+                margin-bottom: 8px;
+                max-width: 80%;
+                word-wrap: break-word;
+            }
+            .ai-message {
+                background-color: #d1fae5;
+                align-self: flex-start;
+            }
+            .error-message {
+                color: red;
+                margin-top: 10px;
+            }
+            .loading-indicator {
+                margin-top: 10px;
+                font-size: 14px;
+                color: #555;
+            }
+        `;
+function $() {
+  return fetch("/api/chat", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  }).then((t) => {
+    if (!t.ok)
+      throw new Error(`HTTP error! status: ${t.status}`);
+    return t.json();
+  }).then((t) => t).catch((t) => {
+    throw console.error("Error creating chat:", t), t;
+  });
+}
+function k(t) {
+  const e = {};
+  return t.forEach((s) => {
+    const i = f();
+    e[s.uuid] = i;
+  }), t.forEach((s) => {
+    e[s.uuid] && (s.uuid = e[s.uuid]), s.childrenIds && (s.childrenIds = s.childrenIds.map((i) => e[i] || i));
+  }), t;
+}
+var I = Object.defineProperty, M = Object.getOwnPropertyDescriptor, r = (t, e, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? M(e, s) : e, n = t.length - 1, p; n >= 0; n--)
+    (p = t[n]) && (a = (i ? p(e, s, a) : p(a)) || a);
+  return i && a && I(e, s, a), a;
+};
+try {
+  await import("@nuralyui/slider-input");
+} catch {
+  console.warn("[@nuralyui/slider-input] Package not found or failed to load.");
+}
+try {
+  await import("@nuralyui/button");
+} catch {
+  console.warn("[@nuralyui/button] Package not found or failed to load.");
+}
+try {
+  await import("@nuralyui/input");
+} catch {
+  console.warn("[@nuralyui/input] Package not found or failed to load.");
+}
+let o = class extends y {
+  constructor() {
+    super(...arguments), this.preview = !1, this.rootUUID = "", this.isChatBoxVisible = !1, this.chatUuid = "", this.messages = [], this.errorMessage = "", this.inputValue = "", this.isLoading = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    const t = this.component?.style || {};
+    return h`
+            <div class="chat-input-container" style=${b({ ...t })}>
+                <nr-button @click=${this.toggleChatBox}>Ask AI</nr-button>
+                ${this.isChatBoxVisible ? h`
+                    <div class="chat-input">
+                        <nr-input value=${this.inputValue} placeholder="Type your message" @valueChange=${this.handleInputChange} @keyup=${this.handleKeyUp} ></nr-input>
+                        <nr-button @click=${this.handleSendMessage}>Send</nr-button>
+                    </div>
+                    ${this.messages.length > 0 ? h`
+                        <div class="chat-messages">
+                            ${this.preview ? h`<micro-app uuid=${this.chatUuid} componentToRenderUUID=${this.rootUUID}></micro-app>` : ""}
+                        <nr-button @click=${() => w(this.structureComponent)}>Insert</nr-button>
+                        </div>
+                    ` : ""}
+                    ${this.errorMessage ? h`<div class="error-message">${this.errorMessage}</div>` : ""}
+                    ${this.isLoading ? h`<div class="loading-indicator">Loading...</div>` : ""}
+                ` : ""}
+            </div>
+        `;
+  }
+  async toggleChatBox() {
+    this.isChatBoxVisible = !this.isChatBoxVisible, this.isChatBoxVisible ? await this.getChatUuid() : this.errorMessage = "";
+  }
+  async getChatUuid() {
+    this.isLoading = !0, $().then((t) => {
+      this.chatUuid = t.chat_id, this.errorMessage = "";
+    }).catch((t) => {
+      console.error("Error getting chat UUID:", t), this.errorMessage = "Cannot connect to server. Please try again.";
+    }).finally(() => {
+      this.isLoading = !1;
+    });
+  }
+  async sendMessage(t) {
+    this.isLoading = !0;
+    try {
+      const s = (await (await fetch(`/api/chat/${this.chatUuid}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ query: t })
+      })).json()).response;
+      this.messages.push({ type: "ai", content: s }), this.structureComponent = [];
+      const i = s.components ?? s;
+      Array.isArray(i) && (this.structureComponent = i.map((n) => (n.application_id = this.chatUuid, n))), this.structureComponent = k(this.structureComponent);
+      const a = this.structureComponent.find((n) => n.component_type === "vertical-container-block");
+      this.rootUUID = a.uuid, C(this.chatUuid, [...this.structureComponent]), requestAnimationFrame(() => {
+        this.preview = !0;
+      });
+    } catch (e) {
+      console.error("Error sending message:", e);
+    } finally {
+      this.isLoading = !1;
+    }
+  }
+  handleSendMessage(t) {
+    const e = this.inputValue;
+    e.trim() && (this.sendMessage(e), this.inputValue = "");
+  }
+  handleInputChange(t) {
+    this.inputValue = t.detail.value;
+  }
+  handleKeyUp(t) {
+    t.key === "Enter" && this.handleSendMessage(t);
+  }
+};
+o.styles = U;
+r([
+  x({ type: Object })
+], o.prototype, "component", 2);
+r([
+  c()
+], o.prototype, "preview", 2);
+r([
+  c()
+], o.prototype, "rootUUID", 2);
+r([
+  c()
+], o.prototype, "isChatBoxVisible", 2);
+r([
+  c()
+], o.prototype, "chatUuid", 2);
+r([
+  c()
+], o.prototype, "messages", 2);
+r([
+  c()
+], o.prototype, "errorMessage", 2);
+r([
+  c()
+], o.prototype, "inputValue", 2);
+r([
+  c()
+], o.prototype, "isLoading", 2);
+o = r([
+  v("ai-chat-block")
+], o);
+export {
+  o as AiChat
+};

package/dist/AIChat-Cly-frW6.js

@@ -0,0 +1,260 @@
+import { styleMap } from 'lit/directives/style-map.js';
+import { ae as BaseElementBlock } from './BaseElement-wyA58UxT.js';
+import { css, html } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { v4 } from 'uuid';
+import { b as addGeneratedComponents, a as addTempApplication } from './aitchat-Btz9TPEN.js';
+
+const styles = css`
+            :host {
+              display:flex;
+              align-items:center;
+            }
+            .chat-input-container {
+                position: relative;
+                display: inline-block;
+                width: 100%;
+            }
+            .chat-input {
+                display: flex;
+                margin-top: 10px;
+                width: 100%;
+            }
+            .chat-input nr-input {
+                flex: 1;
+                margin-right: 10px;
+            }
+            .chat-messages {
+                margin-top: 10px;
+                max-height: 200px;
+                overflow-y: auto;
+                background-color: #f9f9f9;
+                border: 1px solid #ccc;
+                border-radius: 8px;
+                padding: 10px;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            }
+            .chat-message {
+                border-radius: 16px;
+                padding: 8px 12px;
+                margin-bottom: 8px;
+                max-width: 80%;
+                word-wrap: break-word;
+            }
+            .ai-message {
+                background-color: #d1fae5;
+                align-self: flex-start;
+            }
+            .error-message {
+                color: red;
+                margin-top: 10px;
+            }
+            .loading-indicator {
+                margin-top: 10px;
+                font-size: 14px;
+                color: #555;
+            }
+        `;
+
+function createChat() {
+  return fetch("/api/chat", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  }).then((response) => {
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.json();
+  }).then((data) => {
+    return data;
+  }).catch((error) => {
+    console.error("Error creating chat:", error);
+    throw error;
+  });
+}
+
+function replaceUUIDs(data) {
+  const uuidMapping = {};
+  data.forEach((item) => {
+    const newUUID = v4();
+    uuidMapping[item.uuid] = newUUID;
+  });
+  data.forEach((item) => {
+    if (uuidMapping[item.uuid]) {
+      item.uuid = uuidMapping[item.uuid];
+    }
+    if (item.childrenIds) {
+      item.childrenIds = item.childrenIds.map((childId) => {
+        return uuidMapping[childId] || childId;
+      });
+    }
+  });
+  return data;
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+try {
+  await import('@nuralyui/slider-input');
+} catch (error) {
+  console.warn("[@nuralyui/slider-input] Package not found or failed to load.");
+}
+try {
+  await import('@nuralyui/button');
+} catch (error) {
+  console.warn("[@nuralyui/button] Package not found or failed to load.");
+}
+try {
+  await import('@nuralyui/input');
+} catch (error) {
+  console.warn("[@nuralyui/input] Package not found or failed to load.");
+}
+let AiChat = class extends BaseElementBlock {
+  constructor() {
+    super(...arguments);
+    this.preview = false;
+    this.rootUUID = "";
+    this.isChatBoxVisible = false;
+    this.chatUuid = "";
+    this.messages = [];
+    this.errorMessage = "";
+    this.inputValue = "";
+    this.isLoading = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    const aiChatStyle = this.component?.style || {};
+    return html`
+            <div class="chat-input-container" style=${styleMap({ ...aiChatStyle })}>
+                <nr-button @click=${this.toggleChatBox}>Ask AI</nr-button>
+                ${this.isChatBoxVisible ? html`
+                    <div class="chat-input">
+                        <nr-input value=${this.inputValue} placeholder="Type your message" @valueChange=${this.handleInputChange} @keyup=${this.handleKeyUp} ></nr-input>
+                        <nr-button @click=${this.handleSendMessage}>Send</nr-button>
+                    </div>
+                    ${this.messages.length > 0 ? html`
+                        <div class="chat-messages">
+                            ${this.preview ? html`<micro-app uuid=${this.chatUuid} componentToRenderUUID=${this.rootUUID}></micro-app>` : ""}
+                        <nr-button @click=${() => addGeneratedComponents(this.structureComponent)}>Insert</nr-button>
+                        </div>
+                    ` : ""}
+                    ${this.errorMessage ? html`<div class="error-message">${this.errorMessage}</div>` : ""}
+                    ${this.isLoading ? html`<div class="loading-indicator">Loading...</div>` : ""}
+                ` : ""}
+            </div>
+        `;
+  }
+  async toggleChatBox() {
+    this.isChatBoxVisible = !this.isChatBoxVisible;
+    if (this.isChatBoxVisible) {
+      await this.getChatUuid();
+    } else {
+      this.errorMessage = "";
+    }
+  }
+  async getChatUuid() {
+    this.isLoading = true;
+    createChat().then((data) => {
+      this.chatUuid = data.chat_id;
+      this.errorMessage = "";
+    }).catch((error) => {
+      console.error("Error getting chat UUID:", error);
+      this.errorMessage = "Cannot connect to server. Please try again.";
+    }).finally(() => {
+      this.isLoading = false;
+    });
+  }
+  async sendMessage(message) {
+    this.isLoading = true;
+    try {
+      const response = await fetch(`/api/chat/${this.chatUuid}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ query: message })
+      });
+      const aiResponse = (await response.json()).response;
+      this.messages.push({ type: "ai", content: aiResponse });
+      this.structureComponent = [];
+      const result = aiResponse.components ?? aiResponse;
+      if (Array.isArray(result)) {
+        this.structureComponent = result.map((component) => {
+          component.application_id = this.chatUuid;
+          return component;
+        });
+      }
+      this.structureComponent = replaceUUIDs(this.structureComponent);
+      const structureComponentRoot = this.structureComponent.find((component) => component.component_type === "vertical-container-block");
+      this.rootUUID = structureComponentRoot.uuid;
+      addTempApplication(this.chatUuid, [...this.structureComponent]);
+      requestAnimationFrame(() => {
+        this.preview = true;
+      });
+    } catch (error) {
+      console.error("Error sending message:", error);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+  handleSendMessage(event) {
+    const message = this.inputValue;
+    if (message.trim()) {
+      this.sendMessage(message);
+      this.inputValue = "";
+    }
+  }
+  handleInputChange(event) {
+    this.inputValue = event.detail.value;
+  }
+  handleKeyUp(event) {
+    if (event.key === "Enter") {
+      this.handleSendMessage(event);
+    }
+  }
+};
+AiChat.styles = styles;
+__decorateClass([
+  property({ type: Object })
+], AiChat.prototype, "component", 2);
+__decorateClass([
+  state()
+], AiChat.prototype, "preview", 2);
+__decorateClass([
+  state()
+], AiChat.prototype, "rootUUID", 2);
+__decorateClass([
+  state()
+], AiChat.prototype, "isChatBoxVisible", 2);
+__decorateClass([
+  state()
+], AiChat.prototype, "chatUuid", 2);
+__decorateClass([
+  state()
+], AiChat.prototype, "messages", 2);
+__decorateClass([
+  state()
+], AiChat.prototype, "errorMessage", 2);
+__decorateClass([
+  state()
+], AiChat.prototype, "inputValue", 2);
+__decorateClass([
+  state()
+], AiChat.prototype, "isLoading", 2);
+AiChat = __decorateClass([
+  customElement("ai-chat-block")
+], AiChat);
+
+export { AiChat };