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

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/FeedbackWidget.tsx
-import { useReducer, useCallback as useCallback4, useEffect as useEffect5, useMemo, useRef as useRef3 } from "react";
+import { useReducer, useCallback as useCallback4, useEffect as useEffect5, useMemo, useRef as useRef4 } 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.14"
+                    "0.1.16"
                   ] })
                 ] }),
                 /* @__PURE__ */ jsx4(
@@ -933,7 +933,7 @@ Comment: ${comment.trim()}`] : []
 }
 
 // src/components/SubmitModal.tsx
-import { useState as useState5, useEffect as useEffect3 } from "react";
+import { useState as useState5, useEffect as useEffect3, useRef as useRef2 } from "react";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedUrl, api }) {
   const [title, setTitle] = useState5("");
@@ -946,6 +946,10 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
   const [projects, setProjects] = useState5([]);
   const [labels, setLabels] = useState5([]);
   const [selectedProjectId, setSelectedProjectId] = useState5("");
+  const [projectSearch, setProjectSearch] = useState5("");
+  const [projectDropdownOpen, setProjectDropdownOpen] = useState5(false);
+  const projectInputRef = useRef2(null);
+  const projectDropdownRef = useRef2(null);
   const [selectedLabelIds, setSelectedLabelIds] = useState5([]);
   const [linearError, setLinearError] = useState5(null);
   useEffect3(() => {
@@ -962,7 +966,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) => {
@@ -979,6 +985,25 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
   useEffect3(() => {
     if (!ticketTitleEdited) setTicketTitle(title);
   }, [title, ticketTitleEdited]);
+  useEffect3(() => {
+    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()) {
@@ -1010,7 +1035,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__ */ jsx6(
     "div",
@@ -1194,21 +1220,71 @@ function SubmitModal({ count, onSubmit, onCancel, onDone, submitting, submittedU
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs6("div", { children: [
+                    /* @__PURE__ */ jsxs6("div", { style: { position: "relative" }, children: [
                       /* @__PURE__ */ jsx6("label", { style: { display: "block", fontSize: 12, color: "#6b7280", marginBottom: 4 }, children: "Project" }),
-                      /* @__PURE__ */ jsxs6(
-                        "select",
+                      /* @__PURE__ */ jsx6(
+                        "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__ */ jsx6(
+                        "div",
                         {
-                          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))
-                          ]
+                          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__ */ jsx6("div", { style: { padding: "8px 12px", fontSize: 13, color: "#9ca3af" }, children: "No matching projects" }) : filteredProjects.map((p) => /* @__PURE__ */ jsxs6(
+                            "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__ */ jsxs6("span", { style: { color: "#9ca3af" }, children: [
+                                  " \u2014 ",
+                                  p.teams[0].key
+                                ] })
+                              ]
+                            },
+                            p.id
+                          ))
                         }
                       )
                     ] }),
@@ -1383,7 +1459,7 @@ ${propsStr}`);
 }
 
 // src/hooks/useSession.ts
-import { useState as useState6, useEffect as useEffect4, useCallback as useCallback3, useRef as useRef2 } from "react";
+import { useState as useState6, useEffect as useEffect4, useCallback as useCallback3, useRef as useRef3 } 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__);
@@ -1400,7 +1476,7 @@ var BYPASS_USER = {
 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);
+  const pendingAuthRef = useRef3(false);
   useEffect4(() => {
     if (AUTH_BYPASS) return;
     let cancelled = false;
@@ -1683,7 +1759,7 @@ function FeedbackWidget({
 }) {
   const session = useSession(apiUrl, clientId);
   const [state, dispatch] = useReducer(widgetReducer, initialState);
-  const pendingOpenRef = useRef3(false);
+  const pendingOpenRef = useRef4(false);
   const api = useMemo(
     () => createApiClient(apiUrl, clientId),
     [apiUrl, clientId]
@@ -1828,7 +1904,7 @@ function FeedbackWidget({
       });
     }
   }, [api]);
-  const submittedDraftIdsRef = useRef3([]);
+  const submittedDraftIdsRef = useRef4([]);
   const handleSubmit = useCallback4(async (title, linearTicket) => {
     dispatch({ type: "SET_SUBMITTING", submitting: true });
     const draftIds = Array.from(state.selectedDraftIds);
@@ -1861,7 +1937,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 }),