@trilogy-data/trilogy-studio-components 0.1.0

package/dist/TutorialPage-CGjDXmYk.js

@@ -0,0 +1,482 @@
+import { defineComponent as Q, ref as E, computed as R, createElementBlock as r, openBlock as i, createElementVNode as n, createCommentVNode as S, toDisplayString as a, Fragment as D, renderList as H, normalizeClass as g, renderSlot as W, inject as f, watch as K, resolveComponent as l, createTextVNode as x, createVNode as C, createBlock as h, withCtx as N } from "vue";
+import { a as T, C as q, E as F, M as z, b as J, c as X, d as Y, L as Z, s as $, K as V } from "./main-oVvKtGNk.js";
+import { L as tt, C as et, d as A } from "./LLMConnectionList-DVM5t-P2.js";
+import B from "./ResultComponent-C4EGIBY0.js";
+import ot from "./Dashboard-C8re96eZ.js";
+const nt = Q({
+  name: "FunctionDoc",
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    description: {
+      type: String,
+      required: !0
+    },
+    func: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(o) {
+    const e = E(!1), c = R(() => ["function-purpose", `function-purpose-${o.func.outputPurpose.toLowerCase()}`]);
+    return {
+      showExample: e,
+      purposeClass: c
+    };
+  }
+}), it = { class: "function-doc" }, st = { class: "function-header" }, rt = { class: "function-name" }, dt = { class: "function-description" }, ct = { class: "function-metadata" }, at = { class: "function-metadata-row" }, lt = { class: "function-metadata-value" }, ut = {
+  key: 0,
+  class: "function-metadata-empty"
+}, mt = {
+  key: 1,
+  class: "function-metadata-tags"
+}, _t = { class: "function-metadata-row" }, vt = { class: "function-metadata-value" }, pt = { class: "function-metadata-tag" }, ft = { class: "function-metadata-row" }, yt = { class: "function-metadata-value" }, ht = {
+  key: 0,
+  class: "function-example"
+}, Ct = { class: "function-example-code" };
+function kt(o, e, c, t, m, s) {
+  return i(), r("div", it, [
+    n("div", st, [
+      n("h3", rt, a(o.name), 1),
+      n("button", {
+        class: "function-example-toggle",
+        onClick: e[0] || (e[0] = (u) => o.showExample = !o.showExample)
+      }, a(o.showExample ? "Hide Example" : "Show Example"), 1)
+    ]),
+    n("div", dt, a(o.description), 1),
+    n("div", ct, [
+      n("div", at, [
+        e[1] || (e[1] = n("div", { class: "function-metadata-label" }, "Inputs:", -1)),
+        n("div", lt, [
+          o.func.inputTypes.length === 0 ? (i(), r("span", ut, "No inputs")) : (i(), r("div", mt, [
+            (i(!0), r(D, null, H(o.func.inputTypes, (u, _) => (i(), r("span", {
+              key: _,
+              class: "function-metadata-tag"
+            }, a(u), 1))), 128))
+          ]))
+        ])
+      ]),
+      n("div", _t, [
+        e[2] || (e[2] = n("div", { class: "function-metadata-label" }, "Output:", -1)),
+        n("div", vt, [
+          n("span", pt, a(o.func.outputType), 1)
+        ])
+      ]),
+      n("div", ft, [
+        e[3] || (e[3] = n("div", { class: "function-metadata-label" }, "Purpose:", -1)),
+        n("div", yt, [
+          n("span", {
+            class: g(o.purposeClass)
+          }, a(o.func.outputPurpose), 3)
+        ])
+      ])
+    ]),
+    o.showExample ? (i(), r("div", ht, [
+      e[4] || (e[4] = n("div", { class: "function-example-label" }, "Example:", -1)),
+      n("pre", Ct, a(o.func.example), 1)
+    ])) : S("", !0)
+  ]);
+}
+const St = /* @__PURE__ */ T(nt, [["render", kt], ["__scopeId", "data-v-4ab8a3dc"]]), bt = /* @__PURE__ */ Q({
+  __name: "HighlightComponent",
+  props: {
+    type: {}
+  },
+  setup(o) {
+    return (e, c) => (i(), r("div", {
+      class: g(["highlight", o.type])
+    }, [
+      W(e.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), gt = /* @__PURE__ */ T(bt, [["__scopeId", "data-v-0f045873"]]), wt = {
+  name: "TutorialPromptComponent",
+  components: {
+    Editor: F,
+    ResultComponent: B,
+    CodeBlock: q
+  },
+  props: {
+    // Array of prompts to navigate through
+    prompts: {
+      type: Array,
+      required: !0
+    },
+    context: {
+      type: String,
+      default: "main-trilogy"
+    },
+    editorId: {
+      type: String,
+      default: "tutorial-editor"
+    }
+  },
+  setup(o) {
+    const e = f("editorStore"), c = f("saveEditors"), t = E(null);
+    if (!e || !c)
+      throw new Error("Editor store or saveEditors function not provided");
+    const m = E(0), s = E(!1), u = E(!1), _ = R(() => o.prompts[m.value]);
+    K(
+      () => {
+        var p;
+        return (p = e.editors[o.editorId]) == null ? void 0 : p.results;
+      },
+      () => {
+        s.value && y();
+      },
+      { deep: !0 }
+    ), K(m, () => {
+      s.value = !1, u.value = !1;
+    });
+    function k() {
+      m.value < o.prompts.length - 1 && u.value && m.value++;
+    }
+    function v() {
+      m.value > 0 && m.value--;
+    }
+    function y() {
+      var M;
+      if (s.value = !0, !e) return;
+      const p = (M = e.editors[o.editorId]) == null ? void 0 : M.results;
+      p && _.value.validationFn ? u.value = _.value.validationFn(p) : u.value = !1;
+    }
+    function b() {
+      c && (c(), y());
+    }
+    function I(p) {
+      console.log("Setting editor content pre:", p), t.value && (console.log("Setting editor content:", p), t.value.setContent(p));
+    }
+    function L() {
+      t.value && t.value.runQuery();
+    }
+    return {
+      editorStore: e,
+      runQuery: L,
+      currentIndex: m,
+      currentPrompt: _,
+      hasUserAttempted: s,
+      isCurrentPromptValid: u,
+      nextPrompt: k,
+      prevPrompt: v,
+      validateResults: y,
+      saveEditorsCall: b,
+      setEditorContent: I,
+      editorRef: t
+    };
+  }
+}, Et = { class: "tutorial-prompt-container" }, Dt = { class: "prompt-navigation" }, xt = ["disabled"], Mt = { class: "progress-indicator" }, Pt = ["disabled"], Tt = { class: "prompt-content" }, It = { class: "prompt-header" }, Lt = ["innerHTML"], Nt = {
+  key: 0,
+  class: "prompt-example"
+}, Ht = { class: "editor-container" }, Kt = { class: "editor-section" }, Vt = { class: "results-section" }, At = {
+  key: 0,
+  class: "hint-section"
+};
+function Qt(o, e, c, t, m, s) {
+  const u = l("code-block"), _ = l("editor"), k = l("result-component");
+  return i(), r("div", Et, [
+    n("div", Dt, [
+      n("button", {
+        onClick: e[0] || (e[0] = (...v) => t.prevPrompt && t.prevPrompt(...v)),
+        disabled: t.currentIndex === 0,
+        class: "nav-button"
+      }, [...e[2] || (e[2] = [
+        n("span", { class: "nav-icon" }, "←", -1),
+        x(" Previous ", -1)
+      ])], 8, xt),
+      n("div", Mt, a(t.currentIndex + 1) + " / " + a(c.prompts.length), 1),
+      n("button", {
+        onClick: e[1] || (e[1] = (...v) => t.nextPrompt && t.nextPrompt(...v)),
+        disabled: t.currentIndex === c.prompts.length - 1 || !t.isCurrentPromptValid,
+        class: "nav-button",
+        "data-testid": "next-prompt"
+      }, [...e[3] || (e[3] = [
+        x(" Next ", -1),
+        n("span", { class: "nav-icon" }, "→", -1)
+      ])], 8, Pt)
+    ]),
+    n("div", Tt, [
+      n("div", It, [
+        n("h3", null, a(t.currentPrompt.title), 1),
+        t.hasUserAttempted ? (i(), r("div", {
+          key: 0,
+          class: g(["validation-status", t.isCurrentPromptValid ? "valid" : "invalid"])
+        }, a(t.isCurrentPromptValid ? "✓ Correct!" : "✗ Try again"), 3)) : S("", !0)
+      ]),
+      n("div", {
+        class: "prompt-description",
+        innerHTML: t.currentPrompt.description
+      }, null, 8, Lt),
+      t.currentPrompt.example ? (i(), r("div", Nt, [
+        C(u, {
+          language: "sql",
+          content: t.currentPrompt.example,
+          copy: t.setEditorContent
+        }, null, 8, ["content", "copy"])
+      ])) : S("", !0)
+    ]),
+    n("div", Ht, [
+      n("div", Kt, [
+        C(_, {
+          context: c.context,
+          editorId: c.editorId,
+          onSaveEditors: t.saveEditorsCall,
+          ref: "editorRef",
+          onQueryFinished: t.validateResults,
+          containerHeight: 300
+        }, null, 8, ["context", "editorId", "onSaveEditors", "onQueryFinished"])
+      ]),
+      n("div", Vt, [
+        C(k, {
+          editorData: t.editorStore.editors[c.editorId],
+          containerHeight: 500,
+          onLlmQueryAccepted: t.runQuery
+        }, null, 8, ["editorData", "onLlmQueryAccepted"])
+      ])
+    ]),
+    t.currentPrompt.hints ? (i(), r("div", At, [
+      n("details", null, [
+        e[4] || (e[4] = n("summary", null, "Need a hint?", -1)),
+        n("ul", null, [
+          (i(!0), r(D, null, H(t.currentPrompt.hints, (v, y) => (i(), r("li", { key: y }, a(v), 1))), 128))
+        ])
+      ])
+    ])) : S("", !0)
+  ]);
+}
+const Rt = /* @__PURE__ */ T(wt, [["render", Qt], ["__scopeId", "data-v-92bb8793"]]), qt = "Studio", Ft = "Welcome", P = "demo-model-connection", w = "demo-model", Bt = {
+  name: "TutorialComponent",
+  props: {
+    activeDocumentationKey: {
+      type: String,
+      default: "",
+      optional: !0
+    }
+  },
+  setup() {
+    var y;
+    const o = f("editorStore"), e = f("connectionStore"), c = f("modelStore"), t = f("dashboardStore"), m = f("llmConnectionStore"), s = f("saveEditors"), u = f("saveConnections"), _ = f("saveModels"), k = f("saveDashboards");
+    if (!o || !e || !c || !t || !m)
+      throw new Error("Demo requires more stores!");
+    const v = (y = Object.values(t == null ? void 0 : t.dashboards).find(
+      (b) => b.name === "example-dashboard" && b.connection === "demo-model-connection"
+    )) == null ? void 0 : y.id;
+    if (!o || !e || !c || !t || !m || !s || !u || !_ || !k)
+      throw new Error("Editor store is not provided!");
+    return {
+      editorStore: o,
+      connectionStore: e,
+      dashboardStore: t,
+      llmConnectionStore: m,
+      modelStore: c,
+      saveEditors: s,
+      saveConnections: u,
+      saveModels: _,
+      saveDashboards: k,
+      demoConnectionName: P,
+      demoModelName: w,
+      demoDashboardID: v
+    };
+  },
+  components: {
+    LoadingButton: Z,
+    ConnectionList: et,
+    LLMConnectionList: tt,
+    EditorList: Y,
+    ModelCard: X,
+    HighlightComponent: gt,
+    Editor: F,
+    ResultsView: B,
+    CommunityModels: J,
+    CodeBlock: q,
+    TutorialPrompt: Rt,
+    Dashboard: ot,
+    TutorialFunction: St,
+    MarkdownRenderer: z
+  },
+  computed: {
+    demoConfig() {
+      return this.modelStore.models[w];
+    },
+    demoModelCorrect() {
+      var o;
+      return ((o = this.modelStore.models[w]) == null ? void 0 : o.name) === w;
+    },
+    demoConnectionCorrect() {
+      var o, e;
+      return ((o = this.connectionStore.connections[P]) == null ? void 0 : o.connected) && ((e = this.connectionStore.connections[P]) == null ? void 0 : e.model) === w;
+    },
+    demoEditorCorrect() {
+      var o;
+      return this.editorStore.editors["my-first-editor"] && ((o = this.editorStore.editors["my-first-editor"]) == null ? void 0 : o.connection) === P;
+    },
+    currentNode() {
+      return this.activeDocumentationKey ? this.activeDocumentationKey.split(V)[1] : qt;
+    },
+    currentTopic() {
+      return this.activeDocumentationKey ? this.activeDocumentationKey.split(V)[2] : Ft;
+    },
+    currentData() {
+      var o, e;
+      return this.currentTopic ? (e = A.find((c) => c.title === this.currentNode)) == null ? void 0 : e.articles.find((c) => c.title === this.currentTopic) : (o = A.find((c) => c.title === this.currentNode)) == null ? void 0 : o.articles[0];
+    }
+  },
+  methods: {
+    setupDemo() {
+      $(
+        this.editorStore,
+        this.connectionStore,
+        this.modelStore,
+        this.dashboardStore,
+        this.saveEditors,
+        this.saveConnections,
+        this.saveModels,
+        this.saveDashboards
+      );
+    },
+    saveEditorsCall() {
+      this.saveEditors();
+    }
+  }
+}, Ot = {
+  key: 0,
+  class: "section-header"
+}, Ut = {
+  key: 1,
+  class: "tutorial-container"
+}, jt = {
+  id: "navigation",
+  class: "tutorial-section"
+}, Gt = {
+  key: 5,
+  class: "llm-connections"
+}, Wt = { key: 9 }, zt = { key: 10 }, Jt = { key: 11 }, Xt = { key: 12 }, Yt = { class: "editor-top" }, Zt = { class: "editor-bottom" }, $t = {
+  key: 13,
+  class: "dashboard"
+}, te = ["innerHTML"], ee = {
+  key: 0,
+  id: "navigation",
+  class: "tutorial-section"
+}, oe = {
+  key: 1,
+  id: "navigation",
+  class: "tutorial-section"
+};
+function ne(o, e, c, t, m, s) {
+  const u = l("highlight-component"), _ = l("markdown-renderer"), k = l("code-block"), v = l("connection-list"), y = l("LLMConnectionList"), b = l("editor-list"), I = l("tutorial-prompt"), L = l("tutorial-function"), p = l("editor"), M = l("results-view"), O = l("dashboard"), U = l("community-models"), j = l("model-card"), G = l("loading-button");
+  return i(), r(D, null, [
+    s.currentData ? (i(), r("div", Ot, a(s.currentData.title), 1)) : S("", !0),
+    s.currentData ? (i(), r("div", Ut, [
+      n("section", jt, [
+        (i(!0), r(D, null, H(s.currentData.paragraphs, (d) => (i(), r(D, null, [
+          d.type === "tip" ? (i(), h(u, {
+            key: 0,
+            type: "tip"
+          }, {
+            default: N(() => [
+              x(a(d.content), 1)
+            ]),
+            _: 2
+          }, 1024)) : d.type === "markdown" ? (i(), h(_, {
+            key: 1,
+            markdown: d.content
+          }, null, 8, ["markdown"])) : d.type === "warning" ? (i(), h(u, {
+            key: 2,
+            type: "warning"
+          }, {
+            default: N(() => [
+              x(a(d.content), 1)
+            ]),
+            _: 2
+          }, 1024)) : d.type === "code" ? (i(), h(k, {
+            key: 3,
+            language: "trilogy",
+            content: d.content
+          }, null, 8, ["content"])) : d.type === "connections" ? (i(), h(v, {
+            key: 4,
+            connections: t.connectionStore.connections,
+            testTag: "tutorial-connection"
+          }, null, 8, ["connections"])) : d.type === "llm-connections" ? (i(), r("div", Gt, [
+            C(y, {
+              connections: t.llmConnectionStore.connections
+            }, null, 8, ["connections"])
+          ])) : d.type === "editors" ? (i(), h(b, {
+            key: 6,
+            connections: t.editorStore.editors,
+            testTag: "tutorial"
+          }, null, 8, ["connections"])) : d.type === "tutorial-prompts" && s.demoEditorCorrect ? (i(), h(I, {
+            key: 7,
+            prompts: d.data.prompts || [],
+            context: d.data.context || "main-trilogy",
+            editorId: "my-first-editor"
+          }, null, 8, ["prompts", "context"])) : d.type === "function" && d.data.function ? (i(), h(L, {
+            key: 8,
+            name: d.title,
+            description: d.content,
+            func: d.data.function
+          }, null, 8, ["name", "description", "func"])) : d.type === "connection-validator" ? (i(), r("div", Wt, [
+            n("div", {
+              class: g(["test-result", s.demoConnectionCorrect ? "passed" : "failed"]),
+              "data-testid": "demo-connection-validator"
+            }, a(s.demoConnectionCorrect ? `Great work: "${t.demoConnectionName}" found and connected with right model ✓` : `Almost there! "${t.demoConnectionName}" not found, wrong model, or not connected ✗`), 3)
+          ])) : d.type === "editor-validator" ? (i(), r("div", zt, [
+            n("div", {
+              class: g(["test-result", s.demoEditorCorrect ? "passed" : "failed"]),
+              "data-testid": "editor-validator"
+            }, a(s.demoEditorCorrect ? 'Great work: "my-first-editor" found and connected with right model ✓' : `Almost there! "my-first-editor" not found under ${t.demoConnectionName} and is required to continue. The
+            Welcome and Query Tutorial will show you how to create it.`), 3)
+          ])) : d.type === "model-validator" ? (i(), r("div", Jt, [
+            n("div", {
+              class: g(["test-result", s.demoModelCorrect ? "passed" : "failed"]),
+              "data-testid": "model-validator"
+            }, a(s.demoModelCorrect ? `Great work: "${t.demoModelName}" found ✓` : `Almost there! "${t.demoModelName}" not found under local models`), 3)
+          ])) : d.type === "demo-editor" && s.demoEditorCorrect ? (i(), r("div", Xt, [
+            n("div", Yt, [
+              C(p, {
+                context: "main-trilogy",
+                editorId: "my-first-editor",
+                onSaveEditors: s.saveEditorsCall,
+                containerHeight: 500
+              }, null, 8, ["onSaveEditors"])
+            ]),
+            n("div", Zt, [
+              C(M, {
+                editorData: t.editorStore.editors["my-first-editor"],
+                containerHeight: 500
+              }, null, 8, ["editorData"])
+            ])
+          ])) : d.type === "dashboard" && s.demoModelCorrect && t.demoDashboardID ? (i(), r("div", $t, [
+            C(O, {
+              name: t.demoDashboardID,
+              connectionId: "demo-model-connection",
+              viewMode: !0
+            }, null, 8, ["name"])
+          ])) : d.type === "community-models" ? (i(), h(U, {
+            key: 14,
+            activeCommunityModelKey: "trilogy-data-trilogy-public-models-main",
+            initialSearch: "demo"
+          })) : (i(), r("p", {
+            key: 15,
+            innerHTML: d.content
+          }, null, 8, te))
+        ], 64))), 256))
+      ]),
+      s.currentTopic === "Models" ? (i(), r("section", ee, [
+        C(j, { config: s.demoConfig }, null, 8, ["config"])
+      ])) : S("", !0),
+      s.currentTopic === "Overview" && s.currentNode === "Demo" ? (i(), r("section", oe, [
+        C(G, { action: s.setupDemo }, {
+          default: N(() => [...e[0] || (e[0] = [
+            x("Reset Demo", -1)
+          ])]),
+          _: 1
+        }, 8, ["action"])
+      ])) : S("", !0)
+    ])) : S("", !0)
+  ], 64);
+}
+const ae = /* @__PURE__ */ T(Bt, [["render", ne], ["__scopeId", "data-v-32213ce7"]]);
+export {
+  ae as default
+};

package/dist/WelcomePage-C6obXIyG.js

@@ -0,0 +1,75 @@
+import { defineComponent as k, inject as g, ref as m, computed as f, createElementBlock as o, openBlock as n, createElementVNode as t, unref as _, Fragment as v, createCommentVNode as c, createTextVNode as a, createVNode as C } from "vue";
+import { k as x, q as T, a as W } from "./main-oVvKtGNk.js";
+const E = { class: "container" }, N = { class: "content" }, S = { class: "logo" }, V = ["src"], $ = { key: 1 }, D = { class: "buttons" }, I = { key: 0 }, L = { key: 1 }, j = { key: 1 }, q = /* @__PURE__ */ k({
+  __name: "WelcomePage",
+  emits: [
+    "demo-started",
+    "sidebar-screen-selected",
+    "screen-selected",
+    "documentation-key-selected"
+  ],
+  setup(w, { emit: b }) {
+    const u = g("connectionStore"), i = m(!1), s = m(!1), l = b, p = () => {
+      i.value = !0, l("demo-started"), setTimeout(() => {
+        i.value = !1;
+      }, 3e4);
+    }, r = f(() => u && Object.keys(u.connections).length > 0), y = () => {
+      l("screen-selected", "tutorial"), l("sidebar-screen-selected", "tutorial"), l("documentation-key-selected", "article+Studio+Welcome");
+    };
+    return (B, e) => (n(), o("div", E, [
+      t("div", N, [
+        t("div", S, [
+          t("img", {
+            src: _(x),
+            alt: "Logo",
+            class: "logo-image"
+          }, null, 8, V)
+        ]),
+        e[7] || (e[7] = t("h1", null, "Welcome to Trilogy Studio", -1)),
+        s.value ? (n(), o("div", j, [
+          C(T, {
+            visible: s.value,
+            onClose: e[3] || (e[3] = (d) => s.value = !s.value)
+          }, null, 8, ["visible"])
+        ])) : (n(), o(v, { key: 0 }, [
+          r.value ? c("", !0) : (n(), o(v, { key: 0 }, [
+            e[4] || (e[4] = t("p", null, [
+              a(" To get started: open a "),
+              t("span", { class: "text-bold" }, "demo editor"),
+              a(" to immediately query or take a guided tour in the "),
+              t("span", { class: "text-bold" }, "documentation"),
+              a(". ")
+            ], -1)),
+            e[5] || (e[5] = t("p", { class: "text-faint" }, " We recommend the documentation if you haven't used Trilogy before. ", -1))
+          ], 64)),
+          r.value ? (n(), o("p", $, "We're glad you're back!")) : c("", !0),
+          t("div", D, [
+            t("button", {
+              onClick: e[0] || (e[0] = (d) => y()),
+              class: "btn btn-tertiary",
+              "data-testid": "tutorial-button"
+            }, " Docs/Tutorial "),
+            t("button", {
+              onClick: e[1] || (e[1] = (d) => p()),
+              class: "btn btn-secondary",
+              "data-testid": "demo-editor-button"
+            }, [
+              i.value ? (n(), o("span", I, [...e[6] || (e[6] = [
+                a("Loading ", -1),
+                t("span", { class: "spinner" }, null, -1)
+              ])])) : (n(), o("span", L, "Demo Editor"))
+            ]),
+            r.value ? (n(), o("button", {
+              key: 0,
+              onClick: e[2] || (e[2] = (d) => s.value = !s.value),
+              class: "btn btn-primary"
+            }, " New Editor ")) : c("", !0)
+          ])
+        ], 64))
+      ])
+    ]));
+  }
+}), F = /* @__PURE__ */ W(q, [["__scopeId", "data-v-b8df09f9"]]);
+export {
+  F as default
+};