@mordn/chat-widget 0.6.1 → 0.7.0

package/dist/index.mjs

@@ -171,11 +171,13 @@ import { CheckIcon as CheckIcon2, ChevronDownIcon, ChevronUpIcon } from "lucide-
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 
 // src/ui/textarea.tsx
+import * as React from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
-function Textarea({ className, ...props }) {
+var Textarea = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx7(
     "textarea",
     {
+      ref,
       "data-slot": "textarea",
       className: cn(
         "border-input placeholder:text-muted-foreground focus-visible:border-ring aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-[14px] transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50",
@@ -184,7 +186,8 @@ function Textarea({ className, ...props }) {
       ...props
     }
   );
-}
+});
+Textarea.displayName = "Textarea";
 
 // src/components/prompt-input.tsx
 import {
@@ -197,7 +200,7 @@ import {
   XIcon
 } from "lucide-react";
 import { nanoid } from "nanoid";
-import React, {
+import React2, {
   Children,
   createContext,
   Fragment as Fragment2,
@@ -509,7 +512,7 @@ var PromptInputBody = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx8("div", { className: cn(className, "flex flex-col"), ...props });
-var PromptInputTextarea = React.forwardRef(({
+var PromptInputTextarea = React2.forwardRef(({
   onChange,
   onKeyDown: externalOnKeyDown,
   className,
@@ -717,6 +720,7 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
   const [loading, setLoading] = useState2(false);
   const debounceRef = useRef2(null);
   const requestIdRef = useRef2(0);
+  const sessionValidatedRef = useRef2(false);
   const pluginsByTrigger = useMemo2(() => {
     const map = /* @__PURE__ */ new Map();
     for (const p of plugins ?? []) {
@@ -733,9 +737,14 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
     return value.slice(active.triggerIndex + 1, cursor);
   }, [active, value, textareaRef]);
   useEffect2(() => {
-    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;
@@ -743,7 +752,7 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
     if (/\s/.test(query)) {
       setActive(null);
     }
-  }, [active, value, query, textareaRef]);
+  }, [active, value, query]);
   useEffect2(() => {
     if (!active) {
       setItems([]);
@@ -751,13 +760,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);
@@ -838,14 +854,8 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
     },
     [active, items, highlight, selectItem, close, pluginsByTrigger, value]
   );
-  useEffect2(() => {
-    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__ */ jsx10(
-    PluginPopover,
+  const panel = active ? /* @__PURE__ */ jsx10(
+    PluginPanel,
     {
       plugin: active.plugin,
       items,
@@ -855,43 +865,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 = useRef2(null);
+  const itemRefs = useRef2([]);
+  useEffect2(() => {
+    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__ */ jsxs6(
     "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__ */ jsx10("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__ */ jsx10("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: "Loading\u2026" }),
-        !loading && items.length === 0 && /* @__PURE__ */ jsx10("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: plugin.emptyText ?? "No results" }),
-        items.map((item, idx) => /* @__PURE__ */ jsxs6(
-          "button",
+        plugin.heading && /* @__PURE__ */ jsx10(
+          "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__ */ jsx10("span", { className: "font-medium leading-tight", children: item.label }),
-              item.sublabel && /* @__PURE__ */ jsx10("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__ */ jsx10(
+          "div",
+          {
+            className: "px-3 py-2 text-[13px]",
+            style: { color: "hsl(var(--chat-text)/0.5)" },
+            children: "Loading\u2026"
+          }
+        ),
+        !loading && items.length === 0 && /* @__PURE__ */ jsx10(
+          "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__ */ jsx10(
+          "div",
+          {
+            ref: viewportRef,
+            className: "max-h-[200px] overflow-y-auto",
+            children: /* @__PURE__ */ jsx10("div", { className: "py-1", children: items.map((item, idx) => /* @__PURE__ */ jsxs6("div", { children: [
+              /* @__PURE__ */ jsxs6(
+                "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__ */ jsx10(
+                      "span",
+                      {
+                        className: "text-[13px] truncate",
+                        style: { color: "hsl(var(--chat-text)/0.85)" },
+                        children: item.label
+                      }
+                    ),
+                    item.sublabel && /* @__PURE__ */ jsx10(
+                      "span",
+                      {
+                        className: "text-[11px] flex-shrink-0",
+                        style: { color: "hsl(var(--chat-text)/0.4)" },
+                        children: item.sublabel
+                      }
+                    )
+                  ]
+                }
+              ),
+              idx < items.length - 1 && /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  className: "h-px mx-3",
+                  style: { backgroundColor: "var(--chat-divider)" }
+                }
+              )
+            ] }, item.id)) })
+          }
+        )
       ]
     }
   );
@@ -2349,21 +2438,19 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               }
             }
           ),
+          inputPlugins.panel,
           /* @__PURE__ */ jsxs13(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
             /* @__PURE__ */ jsxs13(PromptInputBody, { children: [
               /* @__PURE__ */ jsx21(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ jsx21(PromptInputAttachment, { data: attachment }) }),
-              /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx21(
-                  PromptInputTextarea,
-                  {
-                    ref: inputRef,
-                    onChange: (e) => setInput(e.target.value),
-                    onKeyDown: inputPlugins.onKeyDown,
-                    value: input
-                  }
-                ),
-                inputPlugins.popover
-              ] })
+              /* @__PURE__ */ jsx21(
+                PromptInputTextarea,
+                {
+                  ref: inputRef,
+                  onChange: (e) => setInput(e.target.value),
+                  onKeyDown: inputPlugins.onKeyDown,
+                  value: input
+                }
+              )
             ] }),
             /* @__PURE__ */ jsxs13(PromptInputToolbar, { children: [
               /* @__PURE__ */ jsx21(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ jsx21(AttachButton, {}) }),
@@ -2916,9 +3003,9 @@ function useChatTheme() {
 }
 
 // src/ui/input.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
-var Input = React2.forwardRef(
+var Input = React3.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx23(
       "input",