@david-xpn/llm-ui-feedback 0.1.14 → 0.1.16

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.14"
+                    "0.1.16"
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -982,6 +982,10 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
   const [projects, setProjects] = (0, import_react5.useState)([]);
   const [labels, setLabels] = (0, import_react5.useState)([]);
   const [selectedProjectId, setSelectedProjectId] = (0, import_react5.useState)("");
+  const [projectSearch, setProjectSearch] = (0, import_react5.useState)("");
+  const [projectDropdownOpen, setProjectDropdownOpen] = (0, import_react5.useState)(false);
+  const projectInputRef = (0, import_react5.useRef)(null);
+  const projectDropdownRef = (0, import_react5.useRef)(null);
   const [selectedLabelIds, setSelectedLabelIds] = (0, import_react5.useState)([]);
   const [linearError, setLinearError] = (0, import_react5.useState)(null);
   (0, import_react5.useEffect)(() => {
@@ -998,7 +1002,9 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
         if (cancelled) return;
         setProjects(p);
         setLabels(l);
-        if (p.length > 0) setSelectedProjectId(p[0].id);
+        if (p.length > 0) {
+          setSelectedProjectId(p[0].id);
+        }
         setLinearLoading(false);
       });
     }).catch((err) => {
@@ -1015,6 +1021,25 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
   (0, import_react5.useEffect)(() => {
     if (!ticketTitleEdited) setTicketTitle(title);
   }, [title, ticketTitleEdited]);
+  (0, import_react5.useEffect)(() => {
+    function handleClickOutside(e) {
+      if (projectDropdownRef.current && !projectDropdownRef.current.contains(e.target) && projectInputRef.current && !projectInputRef.current.contains(e.target)) {
+        setProjectDropdownOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const filteredProjects = projects.filter(
+    (p) => p.name.toLowerCase().includes(projectSearch.toLowerCase())
+  );
+  const selectedProject = projects.find((p) => p.id === selectedProjectId);
+  const projectDisplayName = (p) => p.name + (p.teams[0] ? ` \u2014 ${p.teams[0].key}` : "");
+  const handleProjectSelect = (p) => {
+    setSelectedProjectId(p.id);
+    setProjectSearch("");
+    setProjectDropdownOpen(false);
+  };
   const handleSubmit = () => {
     if (!title.trim() || submitting) return;
     if (createTicket && linearConfigured && ticketTitle.trim()) {
@@ -1046,7 +1071,8 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
     border: "1px solid #d1d5db",
     fontSize: 14,
     boxSizing: "border-box",
-    background: "#fff"
+    background: "#fff",
+    color: "#111827"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
@@ -1230,21 +1256,71 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative" }, 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",
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        "input",
+                        {
+                          ref: projectInputRef,
+                          type: "text",
+                          value: projectDropdownOpen ? projectSearch : selectedProject ? projectDisplayName(selectedProject) : "",
+                          onChange: (e) => {
+                            setProjectSearch(e.target.value);
+                            setProjectDropdownOpen(true);
+                          },
+                          onFocus: () => {
+                            setProjectSearch("");
+                            setProjectDropdownOpen(true);
+                          },
+                          placeholder: "Search projects\u2026",
+                          style: inputStyle
+                        }
+                      ),
+                      projectDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        "div",
                         {
-                          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))
-                          ]
+                          ref: projectDropdownRef,
+                          style: {
+                            position: "absolute",
+                            top: "100%",
+                            left: 0,
+                            right: 0,
+                            maxHeight: 160,
+                            overflowY: "auto",
+                            background: "#fff",
+                            border: "1px solid #d1d5db",
+                            borderRadius: 8,
+                            boxShadow: "0 4px 12px rgba(0,0,0,0.12)",
+                            zIndex: 10,
+                            marginTop: 2
+                          },
+                          children: filteredProjects.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "8px 12px", fontSize: 13, color: "#9ca3af" }, children: "No matching projects" }) : filteredProjects.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                            "div",
+                            {
+                              onClick: () => handleProjectSelect(p),
+                              style: {
+                                padding: "8px 12px",
+                                fontSize: 13,
+                                cursor: "pointer",
+                                background: p.id === selectedProjectId ? "#eff6ff" : "#fff",
+                                color: "#111827"
+                              },
+                              onMouseEnter: (e) => {
+                                e.currentTarget.style.background = "#f3f4f6";
+                              },
+                              onMouseLeave: (e) => {
+                                e.currentTarget.style.background = p.id === selectedProjectId ? "#eff6ff" : "#fff";
+                              },
+                              children: [
+                                p.name,
+                                p.teams[0] && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { color: "#9ca3af" }, children: [
+                                  " \u2014 ",
+                                  p.teams[0].key
+                                ] })
+                              ]
+                            },
+                            p.id
+                          ))
                         }
                       )
                     ] }),
@@ -1897,7 +1973,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 }),