@ai-matrx/chat 0.6.6 → 0.7.1

package/dist/public-chat/components/GuidedVariableInputs.js

@@ -1,623 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useRef, useEffect } from "react";
-import { ChevronLeft, ChevronRight, ChevronDown, Check } from "lucide-react";
-import { Textarea } from "@ai-matrx/design-system";
-import { Input } from "@ai-matrx/design-system";
-import { Button } from "@ai-matrx/design-system/controls";
-import { Checkbox } from "../../ui/checkbox.js";
-import { Minus, Plus } from "lucide-react";
-import { variableRunLabel } from "@ai-matrx/agents";
-import { enterSendsHere } from "@ai-matrx/kit/composer-keys";
-function InlineCustomInput({
-  value,
-  onChange,
-  placeholder = "Or type your own answer..."
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "mt-2 pt-2 border-t border-border/40", children: /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "text",
-      value,
-      onChange: (e) => onChange(e.target.value),
-      placeholder,
-      className: "w-full text-base md:text-sm bg-textured border-none outline-none text-foreground placeholder:text-muted-foreground py-1 px-2 rounded"
-    }
-  ) });
-}
-function GuidedSelect({
-  value,
-  onChange,
-  options,
-  allowOther,
-  onAutoAdvance
-}) {
-  const isOther = value.startsWith("Other: ");
-  const [otherText, setOtherText] = useState(isOther ? value.slice(7) : "");
-  const [showOther, setShowOther] = useState(isOther);
-  const isCustom = !options.includes(value) && !isOther && value !== "";
-  const handleSelect = (option) => {
-    onChange(option);
-    setShowOther(false);
-    setTimeout(onAutoAdvance, 200);
-  };
-  const handleOtherClick = () => {
-    setShowOther(true);
-    onChange(`Other: ${otherText}`);
-  };
-  const handleCustomChange = (v) => {
-    if (v === "") {
-      onChange("");
-    } else {
-      onChange(v);
-    }
-    setShowOther(false);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
-      options.map((option) => {
-        const isActive = value === option;
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            role: "button",
-            tabIndex: 0,
-            onClick: () => handleSelect(option),
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleSelect(option);
-              }
-            },
-            className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
-            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-              isActive && /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-primary flex-shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: isActive ? "font-medium" : "", children: option || "(empty)" })
-            ] })
-          },
-          option
-        );
-      }),
-      allowOther && /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "button",
-          tabIndex: 0,
-          onClick: handleOtherClick,
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleOtherClick();
-            }
-          },
-          className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${showOther ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
-          children: "Other..."
-        }
-      )
-    ] }),
-    showOther && /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        value: otherText,
-        onChange: (e) => {
-          setOtherText(e.target.value);
-          onChange(`Other: ${e.target.value}`);
-        },
-        placeholder: "Type your answer...",
-        className: "min-h-[60px] text-base md:text-sm mt-1",
-        autoFocus: true
-      }
-    ),
-    !showOther && /* @__PURE__ */ jsx(
-      InlineCustomInput,
-      {
-        value: isCustom ? value : "",
-        onChange: handleCustomChange
-      }
-    )
-  ] });
-}
-function GuidedCheckbox({
-  value,
-  onChange,
-  options,
-  allowOther
-}) {
-  const selected = value ? value.split("\n").filter(Boolean) : [];
-  const otherItem = selected.find((s) => s.startsWith("Other: "));
-  const [otherText, setOtherText] = useState(
-    otherItem ? otherItem.slice(7) : ""
-  );
-  const [showOther, setShowOther] = useState(!!otherItem);
-  const toggle = (option) => {
-    const regular = selected.filter((s) => !s.startsWith("Other: "));
-    const has = regular.includes(option);
-    const next = has ? regular.filter((s) => s !== option) : [...regular, option];
-    const all = showOther && otherText ? [...next, `Other: ${otherText}`] : next;
-    onChange(all.join("\n"));
-  };
-  const handleOtherToggle = () => {
-    const regular = selected.filter((s) => !s.startsWith("Other: "));
-    if (showOther) {
-      setShowOther(false);
-      onChange(regular.join("\n"));
-    } else {
-      setShowOther(true);
-      onChange([...regular, `Other: ${otherText}`].join("\n"));
-    }
-  };
-  const handleCustomChange = (v) => {
-    if (v === "") return;
-    onChange(v);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
-      options.map((option) => {
-        const isActive = selected.includes(option);
-        return /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: `flex w-full items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer text-left ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
-            children: [
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  checked: isActive,
-                  onCheckedChange: () => toggle(option),
-                  "aria-label": option || "(empty)",
-                  className: "flex-shrink-0"
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: isActive ? "font-medium" : "", children: option || "(empty)" })
-            ]
-          },
-          option
-        );
-      }),
-      allowOther && /* @__PURE__ */ jsxs(
-        "label",
-        {
-          className: `flex w-full items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer text-left ${showOther ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
-          children: [
-            /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                checked: showOther,
-                onCheckedChange: handleOtherToggle,
-                "aria-label": "Other",
-                className: "flex-shrink-0"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { children: "Other..." })
-          ]
-        }
-      )
-    ] }),
-    showOther && /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        value: otherText,
-        onChange: (e) => {
-          setOtherText(e.target.value);
-          const regular = selected.filter((s) => !s.startsWith("Other: "));
-          onChange([...regular, `Other: ${e.target.value}`].join("\n"));
-        },
-        placeholder: "Type your answer...",
-        className: "min-h-[60px] text-base md:text-sm mt-1",
-        autoFocus: true
-      }
-    ),
-    selected.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-      selected.length,
-      " selected"
-    ] }),
-    !showOther && /* @__PURE__ */ jsx(InlineCustomInput, { value: "", onChange: handleCustomChange })
-  ] });
-}
-function GuidedToggle({
-  value,
-  onChange,
-  toggleValues,
-  onAutoAdvance
-}) {
-  const [offLabel, onLabel] = toggleValues || ["No", "Yes"];
-  const handleSelect = (val) => {
-    onChange(val);
-    setTimeout(onAutoAdvance, 200);
-  };
-  const handleCustomChange = (v) => {
-    onChange(v || offLabel);
-  };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: [offLabel, onLabel].map((label) => {
-      const isActive = value === label;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "button",
-          tabIndex: 0,
-          onClick: () => handleSelect(label),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleSelect(label);
-            }
-          },
-          className: `px-4 py-3 rounded-lg text-sm font-medium text-center transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
-          children: label
-        },
-        label
-      );
-    }) }),
-    /* @__PURE__ */ jsx(
-      InlineCustomInput,
-      {
-        value: value !== offLabel && value !== onLabel ? value : "",
-        onChange: handleCustomChange
-      }
-    )
-  ] });
-}
-function GuidedNumber({
-  value,
-  onChange,
-  min,
-  max,
-  step = 1
-}) {
-  const num = parseFloat(value) || 0;
-  const canDec = min === void 0 || num > min;
-  const canInc = max === void 0 || num < max;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          onClick: () => canDec && onChange((num - step).toString()),
-          disabled: !canDec,
-          children: /* @__PURE__ */ jsx(Minus, { className: "w-5 h-5" })
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-w-[120px]", children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          type: "text",
-          value,
-          onChange: (e) => {
-            const v = e.target.value;
-            if (v === "" || v === "-" || !isNaN(parseFloat(v))) onChange(v);
-          },
-          className: "w-full text-center text-2xl font-semibold h-12",
-          placeholder: "0"
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          onClick: () => canInc && onChange((num + step).toString()),
-          disabled: !canInc,
-          children: /* @__PURE__ */ jsx(Plus, { className: "w-5 h-5" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      InlineCustomInput,
-      {
-        value: "",
-        onChange: (v) => onChange(v),
-        placeholder: "Or type a number..."
-      }
-    )
-  ] });
-}
-function GuidedTextarea({
-  value,
-  onChange,
-  variableName
-}) {
-  return /* @__PURE__ */ jsx(
-    Textarea,
-    {
-      value,
-      onChange: (e) => onChange(e.target.value),
-      placeholder: `Type your ${variableName.toLowerCase()}...`,
-      className: "min-h-[100px] text-base md:text-sm resize-none bg-textured",
-      autoFocus: true
-    }
-  );
-}
-function GuidedVariableContent({
-  variable,
-  value,
-  onChange,
-  onAutoAdvance
-}) {
-  const cc = variable.customComponent;
-  if (!cc || cc.type === "textarea") {
-    return /* @__PURE__ */ jsx(
-      GuidedTextarea,
-      {
-        value,
-        onChange,
-        variableName: variableRunLabel(variable)
-      }
-    );
-  }
-  switch (cc.type) {
-    case "select":
-    case "radio":
-      if (!cc.options?.length) {
-        return /* @__PURE__ */ jsx(
-          GuidedTextarea,
-          {
-            value,
-            onChange,
-            variableName: variableRunLabel(variable)
-          }
-        );
-      }
-      return /* @__PURE__ */ jsx(
-        GuidedSelect,
-        {
-          value,
-          onChange,
-          options: cc.options,
-          allowOther: cc.allowOther,
-          onAutoAdvance
-        }
-      );
-    case "checkbox":
-      if (!cc.options?.length) {
-        return /* @__PURE__ */ jsx(
-          GuidedTextarea,
-          {
-            value,
-            onChange,
-            variableName: variableRunLabel(variable)
-          }
-        );
-      }
-      return /* @__PURE__ */ jsx(
-        GuidedCheckbox,
-        {
-          value,
-          onChange,
-          options: cc.options,
-          allowOther: cc.allowOther
-        }
-      );
-    case "toggle":
-      return /* @__PURE__ */ jsx(
-        GuidedToggle,
-        {
-          value,
-          onChange,
-          toggleValues: cc.toggleValues,
-          onAutoAdvance
-        }
-      );
-    case "number":
-      return /* @__PURE__ */ jsx(
-        GuidedNumber,
-        {
-          value,
-          onChange,
-          min: cc.min,
-          max: cc.max,
-          step: cc.step
-        }
-      );
-    default:
-      return /* @__PURE__ */ jsx(
-        GuidedTextarea,
-        {
-          value,
-          onChange,
-          variableName: variableRunLabel(variable)
-        }
-      );
-  }
-}
-function GuidedVariableInputs(props) {
-  if (props.variableDefaults.length === 0) return null;
-  return /* @__PURE__ */ jsx(GuidedVariableInputsBody, { ...props });
-}
-function GuidedVariableInputsBody({
-  variableDefaults,
-  values,
-  onChange,
-  disabled = false,
-  onSubmit,
-  submitOnEnter = false,
-  textInputRef,
-  seamless = false
-}) {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [isCollapsed, setIsCollapsed] = useState(false);
-  const [isScrollable, setIsScrollable] = useState(false);
-  const scrollRef = useRef(null);
-  const total = variableDefaults.length;
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return void 0;
-    const check = () => setIsScrollable(el.scrollHeight > el.clientHeight);
-    check();
-    const ro = new ResizeObserver(check);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [activeIndex, isCollapsed]);
-  const variable = variableDefaults[activeIndex];
-  const value = String(values[variable.name] ?? variable.defaultValue ?? "");
-  const formattedName = variableRunLabel(variable);
-  const helpText = variable.helpText;
-  const answeredCount = variableDefaults.filter((v) => {
-    const val = String(values[v.name] ?? v.defaultValue ?? "");
-    return val.trim() !== "";
-  }).length;
-  const goNext = useCallback(() => {
-    if (activeIndex < total - 1) {
-      setActiveIndex((i) => i + 1);
-    }
-  }, [activeIndex, total]);
-  const goPrev = useCallback(() => {
-    if (activeIndex > 0) {
-      setActiveIndex((i) => i - 1);
-    }
-  }, [activeIndex]);
-  const handleSkipAll = useCallback(() => {
-    setIsCollapsed(true);
-    textInputRef?.current?.focus();
-  }, [textInputRef]);
-  const handleToggleCollapse = useCallback(() => {
-    setIsCollapsed((c) => !c);
-  }, []);
-  const handleChange = useCallback(
-    (v) => {
-      onChange(variable.name, v);
-    },
-    [onChange, variable.name]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        const cc = variable.customComponent;
-        if (!cc || cc.type === "textarea") {
-          e.preventDefault();
-          if (activeIndex < total - 1) {
-            goNext();
-          } else if (enterSendsHere(submitOnEnter) && onSubmit) {
-            onSubmit("", void 0);
-          } else {
-            textInputRef?.current?.focus();
-          }
-        }
-      }
-    },
-    [
-      variable,
-      activeIndex,
-      total,
-      goNext,
-      submitOnEnter,
-      onSubmit,
-      textInputRef
-    ]
-  );
-  const outerRadius = seamless ? "rounded-t-xl rounded-b-none" : "rounded-xl";
-  const collapsedRadius = seamless ? "rounded-t-xl rounded-b-none" : "rounded-xl";
-  const progressDots = /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: variableDefaults.map((v, i) => {
-    const filled = String(values[v.name] ?? v.defaultValue ?? "").trim() !== "";
-    const isCurrent = i === activeIndex;
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        role: "button",
-        tabIndex: 0,
-        onClick: (e) => {
-          e.stopPropagation();
-          setActiveIndex(i);
-          if (isCollapsed) setIsCollapsed(false);
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            setActiveIndex(i);
-            if (isCollapsed) setIsCollapsed(false);
-          }
-        },
-        className: `rounded-full transition-all cursor-pointer ${isCurrent ? "w-5 h-2 bg-primary" : filled ? "w-2 h-2 bg-primary/40" : "w-2 h-2 bg-muted-foreground/20"}`,
-        title: variableRunLabel(v)
-      },
-      v.name
-    );
-  }) });
-  if (isCollapsed) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `bg-card border border-border ${collapsedRadius} ${seamless ? "border-b-0" : ""}`,
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            role: "button",
-            tabIndex: 0,
-            onClick: handleToggleCollapse,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleToggleCollapse();
-              }
-            },
-            className: `w-full flex items-center justify-between px-3 py-2 hover:bg-accent/50 transition-colors cursor-pointer ${collapsedRadius}`,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-                progressDots,
-                /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground truncate", children: [
-                  answeredCount,
-                  "/",
-                  total,
-                  " answered"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" })
-            ]
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `bg-muted border border-border ${outerRadius} ${seamless ? "border-b-0" : ""}`,
-      onKeyDown: handleKeyDown,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2.5 pb-2 border-b border-border/40", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            progressDots,
-            /* @__PURE__ */ jsx("h3", { className: "flex-1 text-sm font-medium text-foreground truncate min-w-0", children: formattedName }),
-            /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: handleSkipAll, children: "Skip questions" })
-          ] }),
-          helpText && /* @__PURE__ */ jsx("p", { className: "ml-2 mt-1.5 text-xs text-muted-foreground leading-snug", children: helpText })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: scrollRef,
-              className: "max-h-[28dvh] md:max-h-[35dvh] overflow-y-auto overscroll-contain px-3 py-2",
-              children: /* @__PURE__ */ jsx(
-                GuidedVariableContent,
-                {
-                  variable,
-                  value,
-                  onChange: handleChange,
-                  onAutoAdvance: goNext
-                }
-              )
-            }
-          ),
-          isScrollable && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 inset-x-0 h-8 z-10 bg-gradient-to-t from-muted to-transparent" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border/50", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ChevronLeft, {}), onClick: goPrev, disabled: activeIndex === 0, children: "Prev" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-            activeIndex + 1,
-            " of ",
-            total
-          ] }),
-          activeIndex < total - 1 ? /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", iconEnd: /* @__PURE__ */ jsx(ChevronRight, {}), onClick: goNext, children: "Next" }) : /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", icon: /* @__PURE__ */ jsx(Check, {}), iconEnd: /* @__PURE__ */ jsx(ChevronRight, {}), onClick: handleSkipAll, children: "Done" })
-        ] })
-      ]
-    }
-  );
-}
-var GuidedVariableInputs_default = GuidedVariableInputs;
-export {
-  GuidedVariableInputs,
-  GuidedVariableInputs_default as default
-};

package/dist/public-chat/components/PublicVariableInputs.d.ts

@@ -1,29 +0,0 @@
-import React from "react";
-import type { VariableDefinition as PromptVariable } from "../../agents/types/agent-definition.types.js";
-export interface PublicVariableInputsProps {
-    variableDefaults: PromptVariable[];
-    values: Record<string, string>;
-    onChange: (name: string, value: string) => void;
-    disabled?: boolean;
-    compact?: boolean;
-    /** Hide the outer wrapper (for embedding in custom layouts) */
-    minimal?: boolean;
-    /** Called when Enter is pressed on the last variable (if submitOnEnter) */
-    onSubmit?: (content: string, resources?: any[]) => Promise<boolean>;
-    /** Whether Enter on the last variable should trigger submit */
-    submitOnEnter?: boolean;
-    /** Ref to the text input/textarea to focus after the last variable (if not submitting) */
-    textInputRef?: React.RefObject<HTMLTextAreaElement | HTMLInputElement | null>;
-}
-/**
- * PublicVariableInputs - Reusable variable input component for public chat
- *
- * Features:
- * - Uses PromptVariable[] structure matching database schema
- * - Reuses VariableInputComponent for all input types
- * - Clean, compact UI similar to SmartPromptInput
- * - Expandable popovers for complex inputs
- * - No Redux dependency (Context API compatible)
- */
-export declare function PublicVariableInputs({ variableDefaults, values, onChange, disabled, compact, minimal, onSubmit, submitOnEnter, textInputRef, }: PublicVariableInputsProps): React.JSX.Element | null;
-export default PublicVariableInputs;