@feedmepos/mf-remy-panel 0.0.4 → 0.0.6

package/dist/HomeView-d3782044.js

@@ -0,0 +1,122 @@
+import { openBlock as r, createElementBlock as s, createElementVNode as e, defineComponent as h, computed as v, normalizeClass as f, createBlock as u, unref as y, createCommentVNode as _, ref as C, createVNode as k, createTextVNode as w, toDisplayString as x, Fragment as R, renderList as S, createStaticVNode as N } from "vue";
+import { u as b, a as V, _ as A } from "./app-f120082e.js";
+import "@feedmepos/mf-common";
+import "pinia";
+import "vue-router";
+const M = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  fill: "none"
+};
+function B(i, t) {
+  return r(), s("svg", M, [...t[0] || (t[0] = [
+    e("path", {
+      fill: "#1C1C1E",
+      d: "M7.6 7.6c.57-.658.9-2.1.9-2.1s.314 1.374.857 2c.572.66 2.143 1 2.143 1s-1.57.198-2.143.857C8.814 9.984 8.5 11.5 8.5 11.5s-.18-1.311-.75-1.91C7.149 8.962 5.5 8.5 5.5 8.5s1.5-.207 2.1-.9M12.2 12.2C13.342 10.885 14 8 14 8s.627 2.747 1.714 4C16.86 13.32 20 14 20 14s-3.141.395-4.286 1.714C14.627 16.967 14 20 14 20s-.358-2.622-1.5-3.818C11.298 14.922 8 14 8 14s2.998-.415 4.2-1.8"
+    }, null, -1),
+    e("path", {
+      stroke: "#1C1C1E",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "1.5",
+      d: "M7.6 7.6c.57-.658.9-2.1.9-2.1s.314 1.374.857 2c.572.66 2.143 1 2.143 1s-1.57.198-2.143.857C8.814 9.984 8.5 11.5 8.5 11.5s-.18-1.311-.75-1.91C7.149 8.962 5.5 8.5 5.5 8.5s1.5-.207 2.1-.9M12.2 12.2C13.342 10.885 14 8 14 8s.627 2.747 1.714 4C16.86 13.32 20 14 20 14s-3.141.395-4.286 1.714C14.627 16.967 14 20 14 20s-.358-2.622-1.5-3.818C11.298 14.922 8 14 8 14s2.998-.415 4.2-1.8"
+    }, null, -1)
+  ])]);
+}
+const E = { render: B }, $ = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  fill: "none"
+};
+function I(i, t) {
+  return r(), s("svg", $, [...t[0] || (t[0] = [
+    e("g", {
+      stroke: "#1C1C1E",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "1.5"
+    }, [
+      e("path", { d: "M7.6 7.6c.57-.658.9-2.1.9-2.1s.314 1.374.857 2c.572.66 2.143 1 2.143 1s-1.57.198-2.143.857C8.814 9.984 8.5 11.5 8.5 11.5s-.18-1.311-.75-1.91C7.149 8.962 5.5 8.5 5.5 8.5s1.5-.207 2.1-.9M12.2 12.2C13.342 10.885 14 8 14 8s.627 2.747 1.714 4C16.86 13.32 20 14 20 14s-3.141.395-4.286 1.714C14.627 16.967 14 20 14 20s-.358-2.622-1.5-3.818C11.298 14.922 8 14 8 14s2.998-.415 4.2-1.8" })
+    ], -1)
+  ])]);
+}
+const j = { render: I }, D = /* @__PURE__ */ h({
+  __name: "RemyButton",
+  emits: ["click"],
+  setup(i, { emit: t }) {
+    const d = t, n = b(), l = v(() => n.showRemy), m = v(() => n.dialogShowing);
+    function p() {
+      d("click");
+    }
+    return (g, a) => l.value ? (r(), s("button", {
+      key: 0,
+      class: f(["bg-fm-color-neutral-gray-100 rounded-lg p-[6px]"]),
+      type: "button",
+      onClick: p
+    }, [
+      m.value ? (r(), u(y(j), { key: 0 })) : (r(), u(y(E), { key: 1 }))
+    ])) : _("", !0);
+  }
+}), H = { class: "flex flex-col gap-12 p-8 max-w-[1200px] mx-auto md:gap-8 md:p-4" }, T = { class: "flex flex-col gap-6" }, z = {
+  key: 0,
+  class: "grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6 mt-4 md:grid-cols-1"
+}, F = ["onClick"], L = { class: "text-lg font-semibold mb-2 text-[var(--color-text)]" }, O = { class: "bg-[var(--color-background)] px-1.5 py-0.5 rounded font-mono text-[0.875em] text-[var(--color-primary)]" }, G = { class: "text-[15px] text-[var(--color-text-secondary)] leading-6 m-0" }, U = {
+  key: 1,
+  class: "px-6 py-4 bg-[var(--color-background-soft)] rounded-lg border border-[var(--color-border)] text-[var(--color-text-secondary)]"
+}, W = /* @__PURE__ */ h({
+  __name: "HomeView",
+  setup(i) {
+    const t = b(), d = V(), n = C(""), l = v(() => {
+      const a = d.participants.get("remy");
+      return (a == null ? void 0 : a.commands) || [];
+    });
+    function m(a) {
+      n.value = a;
+    }
+    function p() {
+      t.activate({
+        command: "suggestDescription",
+        context: { itemName: "ABC Soup" },
+        onResult: m
+      });
+    }
+    function g(a) {
+      t.activate({
+        command: a,
+        context: { itemName: "Nasi Lemak" }
+      });
+    }
+    return (a, o) => (r(), s("div", H, [
+      o[3] || (o[3] = e("div", { class: "text-center px-8 py-12 bg-gradient-to-br from-[var(--color-background-soft)] to-[var(--color-background-mute)] rounded-xl md:px-4 md:py-8" }, [
+        e("h1", { class: "text-[2.5rem] font-bold mb-4 text-[var(--color-text)] md:text-[2rem]" }, "Welcome to Remy Panel"),
+        e("p", { class: "text-xl text-[var(--color-text-secondary)] m-0 md:text-lg" }, "Your AI-powered assistant for development")
+      ], -1)),
+      k(D, { onClick: p }),
+      w(" " + x(n.value) + " ", 1),
+      e("div", T, [
+        o[1] || (o[1] = e("h2", { class: "text-[1.75rem] font-semibold m-0 text-[var(--color-text)]" }, "Remy Commands", -1)),
+        o[2] || (o[2] = e("p", { class: "text-[var(--color-text-secondary)] leading-6 m-0" }, " Available slash commands from the Remy agent: ", -1)),
+        l.value.length > 0 ? (r(), s("div", z, [
+          (r(!0), s(R, null, S(l.value, (c) => (r(), s("div", {
+            key: c.name,
+            onClick: (Y) => g(c.name),
+            class: "px-6 py-6 bg-[var(--color-background-soft)] rounded-lg border border-[var(--color-border)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] hover:border-[var(--color-primary)] cursor-pointer"
+          }, [
+            o[0] || (o[0] = e("div", { class: "text-[2rem] mb-3" }, "⚡", -1)),
+            e("h3", L, [
+              e("code", O, "/" + x(c.name), 1)
+            ]),
+            e("p", G, x(c.description), 1)
+          ], 8, F))), 128))
+        ])) : (r(), s("div", U, " No commands available. The Remy agent may not be initialized yet. "))
+      ]),
+      o[4] || (o[4] = N('<div class="flex flex-col gap-4 px-8 py-8 bg-[var(--color-background-soft)] rounded-lg border-l-4 border-[var(--color-primary)]" data-v-7c0414ea><h2 class="text-[1.75rem] font-semibold m-0 text-[var(--color-text)]" data-v-7c0414ea>Getting Started</h2><ol class="m-0 pl-6 flex flex-col gap-3" data-v-7c0414ea><li class="text-[var(--color-text)] leading-6" data-v-7c0414ea>Click the <strong class="text-[var(--color-primary)] font-semibold" data-v-7c0414ea>Remy icon</strong> in the top navigation bar to open the chat panel</li><li class="text-[var(--color-text)] leading-6" data-v-7c0414ea>On desktop, the panel appears on the right side with <strong class="text-[var(--color-primary)] font-semibold" data-v-7c0414ea>adjustable width</strong></li><li class="text-[var(--color-text)] leading-6" data-v-7c0414ea>On mobile/tablet, the panel opens in <strong class="text-[var(--color-primary)] font-semibold" data-v-7c0414ea>full-screen mode</strong></li><li class="text-[var(--color-text)] leading-6" data-v-7c0414ea>Use the <strong class="text-[var(--color-primary)] font-semibold" data-v-7c0414ea>close button (✕)</strong> to hide the panel when done</li><li class="text-[var(--color-text)] leading-6" data-v-7c0414ea>Try typing <code class="bg-[var(--color-background)] px-1.5 py-0.5 rounded font-mono text-[0.875em] text-[var(--color-primary)]" data-v-7c0414ea>/</code> in the chat input to see available commands</li></ol></div>', 1))
+    ]));
+  }
+});
+const X = /* @__PURE__ */ A(W, [["__scopeId", "data-v-7c0414ea"]]);
+export {
+  X as default
+};