@david-xpn/llm-ui-feedback 0.1.13 → 0.1.15

package/dist/index.js

@@ -52,7 +52,7 @@ function getContrastColor(hexColor) {
 
 // src/components/FloatingButton.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function FloatingButton({ onPickClick, onPanelToggle, draftCount, panelOpen, position, buttonColor }) {
+function FloatingButton({ onPickClick, onPanelToggle, draftCount, panelOpen, position, buttonColor, authenticated }) {
   const isBottom = position.includes("bottom");
   const isRight = position.includes("right");
   const anchor = {
@@ -66,7 +66,7 @@ function FloatingButton({ onPickClick, onPanelToggle, draftCount, panelOpen, pos
     gap: 8
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: anchor, children: [
-    draftCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    authenticated && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "button",
       {
         onClick: onPanelToggle,
@@ -96,7 +96,7 @@ function FloatingButton({ onPickClick, onPanelToggle, draftCount, panelOpen, pos
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "13", width: "2", height: "2", rx: "0.5", fill: "currentColor" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "6", y: "13", width: "10", height: "2", rx: "0.5", fill: "currentColor" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          draftCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "span",
             {
               style: {
@@ -549,7 +549,7 @@ function SidePanel({
                   "Feedback Session",
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontSize: 11, fontWeight: 400, color: "#9ca3af", marginLeft: 6 }, children: [
                     "v",
-                    "0.1.13"
+                    "0.1.15"
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -971,11 +971,59 @@ Comment: ${comment.trim()}`] : []
 // src/components/SubmitModal.tsx
 var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedUrl }) {
+function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedUrl, api }) {
   const [title, setTitle] = (0, import_react5.useState)("");
   const [copied, setCopied] = (0, import_react5.useState)(false);
+  const [linearConfigured, setLinearConfigured] = (0, import_react5.useState)(null);
+  const [linearLoading, setLinearLoading] = (0, import_react5.useState)(true);
+  const [createTicket, setCreateTicket] = (0, import_react5.useState)(true);
+  const [ticketTitle, setTicketTitle] = (0, import_react5.useState)("");
+  const [ticketTitleEdited, setTicketTitleEdited] = (0, import_react5.useState)(false);
+  const [projects, setProjects] = (0, import_react5.useState)([]);
+  const [labels, setLabels] = (0, import_react5.useState)([]);
+  const [selectedProjectId, setSelectedProjectId] = (0, import_react5.useState)("");
+  const [selectedLabelIds, setSelectedLabelIds] = (0, import_react5.useState)([]);
+  const [linearError, setLinearError] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    let cancelled = false;
+    setLinearLoading(true);
+    api.getLinearStatus().then(({ configured }) => {
+      if (cancelled) return;
+      setLinearConfigured(configured);
+      if (!configured) {
+        setLinearLoading(false);
+        return;
+      }
+      return Promise.all([api.fetchLinearProjects(), api.fetchLinearLabels()]).then(([p, l]) => {
+        if (cancelled) return;
+        setProjects(p);
+        setLabels(l);
+        if (p.length > 0) setSelectedProjectId(p[0].id);
+        setLinearLoading(false);
+      });
+    }).catch((err) => {
+      if (!cancelled) {
+        setLinearConfigured(false);
+        setLinearError(err.message);
+        setLinearLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [api]);
+  (0, import_react5.useEffect)(() => {
+    if (!ticketTitleEdited) setTicketTitle(title);
+  }, [title, ticketTitleEdited]);
   const handleSubmit = () => {
-    if (title.trim() && !submitting) {
+    if (!title.trim() || submitting) return;
+    if (createTicket && linearConfigured && ticketTitle.trim()) {
+      onSubmit(title.trim(), {
+        title: ticketTitle.trim(),
+        ...selectedProjectId ? { projectId: selectedProjectId } : {},
+        ...selectedLabelIds.length ? { labelIds: selectedLabelIds } : {}
+      });
+    } else {
       onSubmit(title.trim());
     }
   };
@@ -988,6 +1036,18 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
     } catch {
     }
   };
+  const toggleLabel = (id) => {
+    setSelectedLabelIds((prev) => prev.includes(id) ? prev.filter((l) => l !== id) : [...prev, id]);
+  };
+  const inputStyle = {
+    width: "100%",
+    padding: 10,
+    borderRadius: 8,
+    border: "1px solid #d1d5db",
+    fontSize: 14,
+    boxSizing: "border-box",
+    background: "#fff"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
@@ -1014,8 +1074,10 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
             background: "#fff",
             borderRadius: 12,
             padding: 24,
-            width: 400,
-            maxWidth: "90vw",
+            width: 460,
+            maxWidth: "92vw",
+            maxHeight: "90vh",
+            overflowY: "auto",
             boxShadow: "0 8px 32px rgba(0,0,0,0.2)"
           },
           children: submittedUrl ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
@@ -1077,7 +1139,7 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
             ) })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { style: { margin: "0 0 16px", fontSize: 16 }, children: "Submit Feedback" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { style: { margin: "0 0 12px", fontSize: 14, color: "#6b7280" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { style: { margin: "0 0 8px", fontSize: 13, color: "#6b7280" }, children: [
               count,
               " item",
               count !== 1 ? "s" : "",
@@ -1091,20 +1153,138 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
                 onChange: (e) => setTitle(e.target.value),
                 placeholder: "e.g. Homepage redesign feedback",
                 autoFocus: true,
-                onKeyDown: (e) => {
-                  if (e.key === "Enter") handleSubmit();
+                style: inputStyle
+              }
+            ),
+            linearLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "div",
+              {
+                style: {
+                  marginTop: 16,
+                  padding: 12,
+                  borderRadius: 8,
+                  border: "1px solid #e5e7eb",
+                  background: "#f9fafb",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 10,
+                  fontSize: 13,
+                  color: "#6b7280"
                 },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes llmuif-spin { to { transform: rotate(360deg); } }` }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        width: 14,
+                        height: 14,
+                        border: "2px solid #d1d5db",
+                        borderTopColor: "#3b82f6",
+                        borderRadius: "50%",
+                        animation: "llmuif-spin 0.8s linear infinite"
+                      }
+                    }
+                  ),
+                  "Loading Linear projects and labels\u2026"
+                ]
+              }
+            ),
+            !linearLoading && linearConfigured && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "div",
+              {
                 style: {
-                  width: "100%",
-                  padding: 10,
+                  marginTop: 16,
+                  padding: 12,
                   borderRadius: 8,
-                  border: "1px solid #d1d5db",
-                  fontSize: 14,
-                  boxSizing: "border-box"
-                }
+                  border: "1px solid #e5e7eb",
+                  background: "#f9fafb"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 500, color: "#111827" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: createTicket,
+                        onChange: (e) => setCreateTicket(e.target.checked)
+                      }
+                    ),
+                    "Also create a Linear ticket"
+                  ] }),
+                  createTicket && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginTop: 12, display: "flex", flexDirection: "column", gap: 10 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { style: { display: "block", fontSize: 12, color: "#6b7280", marginBottom: 4 }, children: "Ticket title" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        "input",
+                        {
+                          type: "text",
+                          value: ticketTitle,
+                          onChange: (e) => {
+                            setTicketTitleEdited(true);
+                            setTicketTitle(e.target.value);
+                          },
+                          placeholder: "Linear ticket title",
+                          style: inputStyle
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { style: { display: "block", fontSize: 12, color: "#6b7280", marginBottom: 4 }, children: "Project" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                        "select",
+                        {
+                          value: selectedProjectId,
+                          onChange: (e) => setSelectedProjectId(e.target.value),
+                          style: { ...inputStyle, appearance: "auto" },
+                          children: [
+                            projects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: "(no projects)" }),
+                            projects.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: p.id, children: [
+                              p.name,
+                              p.teams[0] ? ` \u2014 ${p.teams[0].key}` : ""
+                            ] }, p.id))
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { style: { display: "block", fontSize: 12, color: "#6b7280", marginBottom: 4 }, children: "Labels" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [
+                        labels.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: 12, color: "#9ca3af" }, children: "(no labels)" }),
+                        labels.map((l) => {
+                          const active = selectedLabelIds.includes(l.id);
+                          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => toggleLabel(l.id),
+                              style: {
+                                padding: "4px 10px",
+                                borderRadius: 999,
+                                border: `1px solid ${active ? l.color : "#d1d5db"}`,
+                                background: active ? l.color : "#fff",
+                                color: active ? "#fff" : "#374151",
+                                fontSize: 12,
+                                cursor: "pointer"
+                              },
+                              children: l.name
+                            },
+                            l.id
+                          );
+                        })
+                      ] })
+                    ] })
+                  ] })
+                ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 16, justifyContent: "flex-end" }, children: [
+            !linearLoading && linearConfigured === false && !linearError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { marginTop: 12, fontSize: 12, color: "#9ca3af" }, children: "Linear integration is not configured. Add a Linear token in the viewer Settings page to also create tickets from here." }),
+            linearError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { style: { marginTop: 12, fontSize: 12, color: "#b91c1c" }, children: [
+              "Linear: ",
+              linearError
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 20, justifyContent: "flex-end" }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "button",
                 {
@@ -1396,6 +1576,17 @@ function createApiClient(apiUrl, clientId) {
         body: JSON.stringify(data)
       });
     },
+    async getLinearStatus() {
+      return apiFetch("/linear/status");
+    },
+    async fetchLinearProjects() {
+      const data = await apiFetch("/linear/projects");
+      return data.items;
+    },
+    async fetchLinearLabels() {
+      const data = await apiFetch("/linear/labels");
+      return data.items;
+    },
     async getUploadUrl(entryId, timestamp) {
       return apiFetch("/upload-url", {
         method: "POST",
@@ -1674,12 +1865,16 @@ function FeedbackWidget({
     }
   }, [api]);
   const submittedDraftIdsRef = (0, import_react7.useRef)([]);
-  const handleSubmit = (0, import_react7.useCallback)(async (title) => {
+  const handleSubmit = (0, import_react7.useCallback)(async (title, linearTicket) => {
     dispatch({ type: "SET_SUBMITTING", submitting: true });
     const draftIds = Array.from(state.selectedDraftIds);
     submittedDraftIdsRef.current = draftIds;
     try {
-      const result = await api.submitSession({ title, draftIds });
+      const result = await api.submitSession({
+        title,
+        draftIds,
+        ...linearTicket ? { linearTicket } : {}
+      });
       const group = result.feedbackGroup;
       const shareUrl = group.shareToken ? `${apiUrl}/feedback-groups/${group.id}/markdown?token=${group.shareToken}` : "";
       dispatch({ type: "SUBMIT_SUCCESS", shareUrl });
@@ -1702,7 +1897,8 @@ function FeedbackWidget({
           draftCount: state.drafts.length,
           panelOpen: state.panelOpen,
           position,
-          buttonColor
+          buttonColor,
+          authenticated: session.status === "authenticated"
         }
       ),
       state.picking && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PickOverlay, { onPick: handlePick, onCancel: handleCancelPicking }),
@@ -1740,7 +1936,8 @@ function FeedbackWidget({
           onCancel: () => dispatch({ type: "CLOSE_SUBMIT_MODAL" }),
           onDone: handleSubmitDone,
           submitting: state.submitting,
-          submittedUrl: state.submittedShareUrl
+          submittedUrl: state.submittedShareUrl,
+          api
         }
       )
     ] }),