@mordn/chat-widget 0.6.2 → 0.7.0

package/dist/index.js

@@ -750,6 +750,7 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
   const [loading, setLoading] = (0, import_react3.useState)(false);
   const debounceRef = (0, import_react3.useRef)(null);
   const requestIdRef = (0, import_react3.useRef)(0);
+  const sessionValidatedRef = (0, import_react3.useRef)(false);
   const pluginsByTrigger = (0, import_react3.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const p of plugins ?? []) {
@@ -766,9 +767,14 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
     return value.slice(active.triggerIndex + 1, cursor);
   }, [active, value, textareaRef]);
   (0, import_react3.useEffect)(() => {
-    if (!active) return;
-    const ta = textareaRef.current;
-    if (!ta) return;
+    if (!active) {
+      sessionValidatedRef.current = false;
+      return;
+    }
+    if (value[active.triggerIndex] === active.plugin.trigger) {
+      sessionValidatedRef.current = true;
+    }
+    if (!sessionValidatedRef.current) return;
     if (value[active.triggerIndex] !== active.plugin.trigger) {
       setActive(null);
       return;
@@ -776,7 +782,7 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
     if (/\s/.test(query)) {
       setActive(null);
     }
-  }, [active, value, query, textareaRef]);
+  }, [active, value, query]);
   (0, import_react3.useEffect)(() => {
     if (!active) {
       setItems([]);
@@ -784,13 +790,20 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
       return;
     }
     if (debounceRef.current) clearTimeout(debounceRef.current);
-    setLoading(true);
     const reqId = ++requestIdRef.current;
+    const result = active.plugin.fetch(query);
+    if (Array.isArray(result)) {
+      setItems(result);
+      setHighlight(0);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
     debounceRef.current = setTimeout(async () => {
       try {
-        const result = await active.plugin.fetch(query);
+        const items2 = await result;
         if (reqId !== requestIdRef.current) return;
-        setItems(result);
+        setItems(items2);
         setHighlight(0);
       } catch (err) {
         console.error("[input-plugin] fetch failed:", err);
@@ -871,14 +884,8 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
     },
     [active, items, highlight, selectItem, close, pluginsByTrigger, value]
   );
-  (0, import_react3.useEffect)(() => {
-    if (!active) return;
-    if (value[active.triggerIndex] !== active.plugin.trigger) {
-      close();
-    }
-  }, [value, active, close]);
-  const popover = active && (loading || items.length > 0 || active.plugin.emptyText) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    PluginPopover,
+  const panel = active ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    PluginPanel,
     {
       plugin: active.plugin,
       items,
@@ -888,43 +895,122 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
       onSelect: selectItem
     }
   ) : null;
-  return { onKeyDown, popover, isOpen: !!active };
+  return { onKeyDown, panel, isOpen: !!active };
 }
-function PluginPopover({ plugin, items, loading, highlight, onHover, onSelect }) {
+function PluginPanel({ plugin, items, loading, highlight, onHover, onSelect }) {
+  const viewportRef = (0, import_react3.useRef)(null);
+  const itemRefs = (0, import_react3.useRef)([]);
+  (0, import_react3.useEffect)(() => {
+    const btn = itemRefs.current[highlight];
+    const viewport = viewportRef.current;
+    if (!btn || !viewport) return;
+    const btnRect = btn.getBoundingClientRect();
+    const viewRect = viewport.getBoundingClientRect();
+    if (btnRect.top < viewRect.top) {
+      viewport.scrollTop -= viewRect.top - btnRect.top;
+    } else if (btnRect.bottom > viewRect.bottom) {
+      viewport.scrollTop += btnRect.bottom - viewRect.bottom;
+    }
+  }, [highlight]);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       role: "listbox",
-      className: cn(
-        "absolute bottom-full left-0 right-0 mb-2 z-30",
-        "rounded-md border border-border bg-popover text-popover-foreground shadow-md",
-        "max-h-64 overflow-y-auto"
-      ),
+      className: "rounded-t-xl bg-[hsl(var(--chat-background))] overflow-hidden mx-auto",
       onMouseDown: (e) => e.preventDefault(),
+      style: {
+        width: "96%",
+        borderTop: "1px solid var(--chat-divider)",
+        borderLeft: "1px solid var(--chat-divider)",
+        borderRight: "1px solid var(--chat-divider)",
+        // Pull down 1px so our bottom edge overlaps the form's top
+        // border, removing the visible seam between the two surfaces.
+        marginBottom: -1
+      },
       children: [
-        plugin.heading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border", children: plugin.heading }),
-        loading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: "Loading\u2026" }),
-        !loading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: plugin.emptyText ?? "No results" }),
-        items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-          "button",
+        plugin.heading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
           {
-            type: "button",
-            role: "option",
-            "aria-selected": idx === highlight,
-            onMouseEnter: () => onHover(idx),
-            onClick: () => onSelect(item),
-            className: cn(
-              "w-full text-left px-3 py-2 text-sm transition-colors",
-              "flex flex-col gap-0.5",
-              idx === highlight ? "bg-accent text-accent-foreground" : "hover:bg-muted"
-            ),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium leading-tight", children: item.label }),
-              item.sublabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[11px] text-muted-foreground leading-tight", children: item.sublabel })
-            ]
-          },
-          item.id
-        ))
+            className: "px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide",
+            style: {
+              color: "hsl(var(--chat-text)/0.5)",
+              borderBottom: "1px solid var(--chat-divider)"
+            },
+            children: plugin.heading
+          }
+        ),
+        loading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: "px-3 py-2 text-[13px]",
+            style: { color: "hsl(var(--chat-text)/0.5)" },
+            children: "Loading\u2026"
+          }
+        ),
+        !loading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: "px-3 py-2 text-[13px]",
+            style: { color: "hsl(var(--chat-text)/0.5)" },
+            children: plugin.emptyText ?? "No results"
+          }
+        ),
+        items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            ref: viewportRef,
+            className: "max-h-[200px] overflow-y-auto",
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "py-1", children: items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "button",
+                {
+                  ref: (el) => {
+                    itemRefs.current[idx] = el;
+                  },
+                  type: "button",
+                  role: "option",
+                  "aria-selected": idx === highlight,
+                  onMouseEnter: () => onHover(idx),
+                  onClick: () => onSelect(item),
+                  className: cn(
+                    "w-full text-left px-3 py-2",
+                    "flex items-center justify-between gap-3",
+                    "transition-colors duration-150 ease-out",
+                    "cursor-pointer"
+                  ),
+                  style: {
+                    backgroundColor: idx === highlight ? "hsl(var(--chat-text)/0.06)" : "transparent"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "span",
+                      {
+                        className: "text-[13px] truncate",
+                        style: { color: "hsl(var(--chat-text)/0.85)" },
+                        children: item.label
+                      }
+                    ),
+                    item.sublabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "span",
+                      {
+                        className: "text-[11px] flex-shrink-0",
+                        style: { color: "hsl(var(--chat-text)/0.4)" },
+                        children: item.sublabel
+                      }
+                    )
+                  ]
+                }
+              ),
+              idx < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "div",
+                {
+                  className: "h-px mx-3",
+                  style: { backgroundColor: "var(--chat-divider)" }
+                }
+              )
+            ] }, item.id)) })
+          }
+        )
       ]
     }
   );
@@ -2372,21 +2458,19 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               }
             }
           ),
+          inputPlugins.panel,
           /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
             /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(PromptInputBody, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PromptInputAttachment, { data: attachment }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  PromptInputTextarea,
-                  {
-                    ref: inputRef,
-                    onChange: (e) => setInput(e.target.value),
-                    onKeyDown: inputPlugins.onKeyDown,
-                    value: input
-                  }
-                ),
-                inputPlugins.popover
-              ] })
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                PromptInputTextarea,
+                {
+                  ref: inputRef,
+                  onChange: (e) => setInput(e.target.value),
+                  onKeyDown: inputPlugins.onKeyDown,
+                  value: input
+                }
+              )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(PromptInputToolbar, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AttachButton, {}) }),