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

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/FeedbackWidget.tsx
-import { useReducer, useCallback as useCallback4, useEffect as useEffect4, useMemo, useRef as useRef3 } from "react";
+import { useReducer, useCallback as useCallback4, useEffect as useEffect5, useMemo, useRef as useRef3 } from "react";
 import { createPortal } from "react-dom";
 
 // src/utils/color.ts
@@ -16,7 +16,7 @@ function getContrastColor(hexColor) {
 
 // src/components/FloatingButton.tsx
 import { jsx, jsxs } from "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 = {
@@ -30,7 +30,7 @@ function FloatingButton({ onPickClick, onPanelToggle, draftCount, panelOpen, pos
     gap: 8
   };
   return /* @__PURE__ */ jsxs("div", { style: anchor, children: [
-    draftCount > 0 && /* @__PURE__ */ jsxs(
+    authenticated && /* @__PURE__ */ jsxs(
       "button",
       {
         onClick: onPanelToggle,
@@ -60,7 +60,7 @@ function FloatingButton({ onPickClick, onPanelToggle, draftCount, panelOpen, pos
             /* @__PURE__ */ jsx("rect", { x: "2", y: "13", width: "2", height: "2", rx: "0.5", fill: "currentColor" }),
             /* @__PURE__ */ jsx("rect", { x: "6", y: "13", width: "10", height: "2", rx: "0.5", fill: "currentColor" })
           ] }),
-          /* @__PURE__ */ jsx(
+          draftCount > 0 && /* @__PURE__ */ jsx(
             "span",
             {
               style: {
@@ -513,7 +513,7 @@ function SidePanel({
                   "Feedback Session",
                   /* @__PURE__ */ jsxs4("span", { style: { fontSize: 11, fontWeight: 400, color: "#9ca3af", marginLeft: 6 }, children: [
                     "v",
-                    "0.1.13"
+                    "0.1.15"
                   ] })
                 ] }),
                 /* @__PURE__ */ jsx4(
@@ -933,13 +933,61 @@ Comment: ${comment.trim()}`] : []
 }
 
 // src/components/SubmitModal.tsx
-import { useState as useState5 } from "react";
+import { useState as useState5, useEffect as useEffect3 } from "react";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedUrl }) {
+function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedUrl, api }) {
   const [title, setTitle] = useState5("");
   const [copied, setCopied] = useState5(false);
+  const [linearConfigured, setLinearConfigured] = useState5(null);
+  const [linearLoading, setLinearLoading] = useState5(true);
+  const [createTicket, setCreateTicket] = useState5(true);
+  const [ticketTitle, setTicketTitle] = useState5("");
+  const [ticketTitleEdited, setTicketTitleEdited] = useState5(false);
+  const [projects, setProjects] = useState5([]);
+  const [labels, setLabels] = useState5([]);
+  const [selectedProjectId, setSelectedProjectId] = useState5("");
+  const [selectedLabelIds, setSelectedLabelIds] = useState5([]);
+  const [linearError, setLinearError] = useState5(null);
+  useEffect3(() => {
+    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]);
+  useEffect3(() => {
+    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());
     }
   };
@@ -952,6 +1000,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__ */ jsx6(
     "div",
     {
@@ -978,8 +1038,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__ */ jsxs6(Fragment2, { children: [
@@ -1041,7 +1103,7 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
             ) })
           ] }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
             /* @__PURE__ */ jsx6("h3", { style: { margin: "0 0 16px", fontSize: 16 }, children: "Submit Feedback" }),
-            /* @__PURE__ */ jsxs6("p", { style: { margin: "0 0 12px", fontSize: 14, color: "#6b7280" }, children: [
+            /* @__PURE__ */ jsxs6("p", { style: { margin: "0 0 8px", fontSize: 13, color: "#6b7280" }, children: [
               count,
               " item",
               count !== 1 ? "s" : "",
@@ -1055,20 +1117,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__ */ jsxs6(
+              "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__ */ jsx6("style", { children: `@keyframes llmuif-spin { to { transform: rotate(360deg); } }` }),
+                  /* @__PURE__ */ jsx6(
+                    "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__ */ jsxs6(
+              "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__ */ jsxs6("label", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 500, color: "#111827" }, children: [
+                    /* @__PURE__ */ jsx6(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: createTicket,
+                        onChange: (e) => setCreateTicket(e.target.checked)
+                      }
+                    ),
+                    "Also create a Linear ticket"
+                  ] }),
+                  createTicket && /* @__PURE__ */ jsxs6("div", { style: { marginTop: 12, display: "flex", flexDirection: "column", gap: 10 }, children: [
+                    /* @__PURE__ */ jsxs6("div", { children: [
+                      /* @__PURE__ */ jsx6("label", { style: { display: "block", fontSize: 12, color: "#6b7280", marginBottom: 4 }, children: "Ticket title" }),
+                      /* @__PURE__ */ jsx6(
+                        "input",
+                        {
+                          type: "text",
+                          value: ticketTitle,
+                          onChange: (e) => {
+                            setTicketTitleEdited(true);
+                            setTicketTitle(e.target.value);
+                          },
+                          placeholder: "Linear ticket title",
+                          style: inputStyle
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs6("div", { children: [
+                      /* @__PURE__ */ jsx6("label", { style: { display: "block", fontSize: 12, color: "#6b7280", marginBottom: 4 }, children: "Project" }),
+                      /* @__PURE__ */ jsxs6(
+                        "select",
+                        {
+                          value: selectedProjectId,
+                          onChange: (e) => setSelectedProjectId(e.target.value),
+                          style: { ...inputStyle, appearance: "auto" },
+                          children: [
+                            projects.length === 0 && /* @__PURE__ */ jsx6("option", { value: "", children: "(no projects)" }),
+                            projects.map((p) => /* @__PURE__ */ jsxs6("option", { value: p.id, children: [
+                              p.name,
+                              p.teams[0] ? ` \u2014 ${p.teams[0].key}` : ""
+                            ] }, p.id))
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs6("div", { children: [
+                      /* @__PURE__ */ jsx6("label", { style: { display: "block", fontSize: 12, color: "#6b7280", marginBottom: 4 }, children: "Labels" }),
+                      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [
+                        labels.length === 0 && /* @__PURE__ */ jsx6("span", { style: { fontSize: 12, color: "#9ca3af" }, children: "(no labels)" }),
+                        labels.map((l) => {
+                          const active = selectedLabelIds.includes(l.id);
+                          return /* @__PURE__ */ jsx6(
+                            "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__ */ jsxs6("div", { style: { display: "flex", gap: 8, marginTop: 16, justifyContent: "flex-end" }, children: [
+            !linearLoading && linearConfigured === false && !linearError && /* @__PURE__ */ jsx6("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__ */ jsxs6("p", { style: { marginTop: 12, fontSize: 12, color: "#b91c1c" }, children: [
+              "Linear: ",
+              linearError
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 8, marginTop: 20, justifyContent: "flex-end" }, children: [
               /* @__PURE__ */ jsx6(
                 "button",
                 {
@@ -1203,7 +1383,7 @@ ${propsStr}`);
 }
 
 // src/hooks/useSession.ts
-import { useState as useState6, useEffect as useEffect3, useCallback as useCallback3, useRef as useRef2 } from "react";
+import { useState as useState6, useEffect as useEffect4, useCallback as useCallback3, useRef as useRef2 } from "react";
 var SESSION_TOKEN_KEY = "llm_feedback_session_token";
 var USER_KEY = "llm_feedback_user";
 var AUTH_BYPASS = !!(typeof globalThis !== "undefined" && globalThis.__FEEDBACK_AUTH_BYPASS__);
@@ -1221,7 +1401,7 @@ function useSession(apiUrl, clientId) {
   const [status, setStatus] = useState6(AUTH_BYPASS ? "authenticated" : "loading");
   const [user, setUser] = useState6(AUTH_BYPASS ? BYPASS_USER : null);
   const pendingAuthRef = useRef2(false);
-  useEffect3(() => {
+  useEffect4(() => {
     if (AUTH_BYPASS) return;
     let cancelled = false;
     async function checkSession() {
@@ -1262,7 +1442,7 @@ function useSession(apiUrl, clientId) {
       cancelled = true;
     };
   }, [apiUrl]);
-  useEffect3(() => {
+  useEffect4(() => {
     function handleMessage(event) {
       if (event.data?.type !== "feedback-auth") return;
       const { sessionToken, user: userData } = event.data;
@@ -1360,6 +1540,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",
@@ -1497,12 +1688,12 @@ function FeedbackWidget({
     () => createApiClient(apiUrl, clientId),
     [apiUrl, clientId]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (session.status === "authenticated" && pendingOpenRef.current) {
       pendingOpenRef.current = false;
     }
   }, [session.status]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (session.status === "authenticated") {
       api.fetchDrafts().then((drafts) => {
         dispatch({ type: "SET_DRAFTS", drafts });
@@ -1510,7 +1701,7 @@ function FeedbackWidget({
       });
     }
   }, [state.panelOpen, session.status, api]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!hotkey) return;
     const parsed = parseHotkey(hotkey);
     function handler(e) {
@@ -1638,12 +1829,16 @@ function FeedbackWidget({
     }
   }, [api]);
   const submittedDraftIdsRef = useRef3([]);
-  const handleSubmit = useCallback4(async (title) => {
+  const handleSubmit = useCallback4(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 });
@@ -1666,7 +1861,8 @@ function FeedbackWidget({
           draftCount: state.drafts.length,
           panelOpen: state.panelOpen,
           position,
-          buttonColor
+          buttonColor,
+          authenticated: session.status === "authenticated"
         }
       ),
       state.picking && /* @__PURE__ */ jsx7(PickOverlay, { onPick: handlePick, onCancel: handleCancelPicking }),
@@ -1704,7 +1900,8 @@ function FeedbackWidget({
           onCancel: () => dispatch({ type: "CLOSE_SUBMIT_MODAL" }),
           onDone: handleSubmitDone,
           submitting: state.submitting,
-          submittedUrl: state.submittedShareUrl
+          submittedUrl: state.submittedShareUrl,
+          api
         }
       )
     ] }),