@meshagent/meshagent-tailwind 0.39.8 → 0.40.0

package/dist/cjs/forms/multi-select-autocomplete.d.ts

@@ -0,0 +1,35 @@
+import type { ReactElement } from "react";
+export type AsyncSearch = (query: string) => Promise<string[]> | string[];
+export declare class MultiSelectController {
+    private listeners;
+    private _value;
+    constructor(initialValue?: string[]);
+    get value(): string[];
+    set value(nextValue: string[]);
+    add(item: string): Promise<boolean>;
+    canAddItem(_item: string): boolean | Promise<boolean>;
+    remove(item: string): void;
+    removeLast(): void;
+    clear(): void;
+    subscribe(listener: (value: string[]) => void): () => void;
+    dispose(): void;
+    private notify;
+}
+export declare function MultiSelectAutocomplete({ search, onChanged, controller, placeholder, debounceDuration, minimumSearchLength, initialValue, value, autoFocus, className, inputClassName, onTextChanged, }: {
+    search: AsyncSearch;
+    onChanged?: (value: string[]) => void;
+    controller?: MultiSelectController;
+    placeholder?: string;
+    debounceDuration?: number;
+    minimumSearchLength?: number;
+    initialValue?: string[];
+    value?: string[];
+    autoFocus?: boolean;
+    className?: string;
+    inputClassName?: string;
+    onTextChanged?: (text: string, context: {
+        add: (item: string) => Promise<void>;
+        setText: (text: string) => void;
+        controller: MultiSelectController;
+    }) => void;
+}): ReactElement;

package/dist/cjs/forms/multi-select-autocomplete.js

@@ -0,0 +1,294 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var multi_select_autocomplete_exports = {};
+__export(multi_select_autocomplete_exports, {
+  MultiSelectAutocomplete: () => MultiSelectAutocomplete,
+  MultiSelectController: () => MultiSelectController
+});
+module.exports = __toCommonJS(multi_select_autocomplete_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_utils = require("../lib/utils");
+class MultiSelectController {
+  listeners = /* @__PURE__ */ new Set();
+  _value;
+  constructor(initialValue = []) {
+    this._value = [...initialValue];
+  }
+  get value() {
+    return [...this._value];
+  }
+  set value(nextValue) {
+    this._value = [...nextValue];
+    this.notify();
+  }
+  async add(item) {
+    if (!await this.canAddItem(item)) {
+      return false;
+    }
+    this.value = [...this._value, item];
+    return true;
+  }
+  canAddItem(_item) {
+    return true;
+  }
+  remove(item) {
+    this.value = this._value.filter((current) => current !== item);
+  }
+  removeLast() {
+    if (this._value.length > 0) {
+      this.value = this._value.slice(0, -1);
+    }
+  }
+  clear() {
+    this.value = [];
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  dispose() {
+    this.listeners.clear();
+  }
+  notify() {
+    const value = this.value;
+    for (const listener of this.listeners) {
+      listener(value);
+    }
+  }
+}
+function containsSelected(selected, value) {
+  const normalized = value.toLowerCase();
+  return selected.some((item) => item.toLowerCase() === normalized);
+}
+function MultiSelectAutocomplete({
+  search,
+  onChanged,
+  controller,
+  placeholder = "Type a value",
+  debounceDuration = 300,
+  minimumSearchLength = 2,
+  initialValue = [],
+  value,
+  autoFocus = false,
+  className,
+  inputClassName,
+  onTextChanged
+}) {
+  const generatedController = (0, import_react.useMemo)(() => controller ?? new MultiSelectController(initialValue), [controller]);
+  const [selected, setSelected] = (0, import_react.useState)(() => value ?? generatedController.value);
+  const [text, setText] = (0, import_react.useState)("");
+  const [options, setOptions] = (0, import_react.useState)([]);
+  const [selectedOption, setSelectedOption] = (0, import_react.useState)(0);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const sequence = (0, import_react.useRef)(0);
+  const inputRef = (0, import_react.useRef)(null);
+  const listboxId = (0, import_react.useId)();
+  (0, import_react.useEffect)(() => {
+    if (value != null) {
+      setSelected(value);
+      generatedController.value = value;
+    }
+  }, [generatedController, value]);
+  (0, import_react.useEffect)(() => {
+    return generatedController.subscribe((nextValue) => {
+      setSelected(nextValue);
+      onChanged?.(nextValue);
+    });
+  }, [generatedController, onChanged]);
+  (0, import_react.useEffect)(() => {
+    if (controller == null) {
+      return () => {
+        generatedController.dispose();
+      };
+    }
+    return void 0;
+  }, [controller, generatedController]);
+  (0, import_react.useEffect)(() => {
+    const query = text.trim();
+    if (query.length < minimumSearchLength) {
+      setOpen(false);
+      setOptions([]);
+      return void 0;
+    }
+    const currentSequence = sequence.current + 1;
+    sequence.current = currentSequence;
+    const timeout = window.setTimeout(() => {
+      void Promise.resolve(search(query)).then((results) => {
+        if (sequence.current !== currentSequence) {
+          return;
+        }
+        const filtered = results.filter((item) => !containsSelected(generatedController.value, item));
+        setOptions(filtered);
+        setSelectedOption(0);
+        setOpen(filtered.length > 0);
+      });
+    }, debounceDuration);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [debounceDuration, generatedController, minimumSearchLength, search, text]);
+  const add = (0, import_react.useCallback)(async (item) => {
+    const trimmed = item.trim();
+    if (trimmed === "") {
+      return;
+    }
+    const added = await generatedController.add(trimmed);
+    if (!added) {
+      return;
+    }
+    setText("");
+    setOpen(false);
+    setOptions([]);
+    inputRef.current?.focus();
+  }, [generatedController]);
+  const remove = (0, import_react.useCallback)((item) => {
+    generatedController.remove(item);
+    inputRef.current?.focus();
+  }, [generatedController]);
+  const handleTextChange = (0, import_react.useCallback)((nextText) => {
+    setText(nextText);
+    onTextChanged?.(nextText, {
+      add,
+      setText,
+      controller: generatedController
+    });
+  }, [add, generatedController, onTextChanged]);
+  const handleKeyDown = (0, import_react.useCallback)((event) => {
+    if (event.key === "Backspace" && text === "") {
+      generatedController.removeLast();
+      return;
+    }
+    if (event.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (options.length > 0) {
+        setOpen(true);
+        setSelectedOption((index) => Math.min(index + 1, options.length - 1));
+      }
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (options.length > 0) {
+        setSelectedOption((index) => Math.max(index - 1, 0));
+      }
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const option = open ? options[selectedOption] : void 0;
+      void add(option ?? text);
+    }
+  }, [add, generatedController, open, options, selectedOption, text]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_utils.cn)(
+          "border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 w-full flex-wrap items-center gap-2 rounded-md border bg-transparent px-2 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]",
+          className
+        ),
+        onClick: () => inputRef.current?.focus(),
+        children: [
+          selected.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "span",
+            {
+              className: "inline-flex max-w-full items-center gap-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: item }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "rounded-sm opacity-80 transition-opacity hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-primary-foreground",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      remove(item);
+                    },
+                    "aria-label": `Remove ${item}`,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ]
+            },
+            item
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              value: text,
+              autoFocus,
+              onChange: (event) => handleTextChange(event.currentTarget.value),
+              onKeyDown: handleKeyDown,
+              onBlur: () => {
+                window.setTimeout(() => setOpen(false), 120);
+              },
+              placeholder: selected.length === 0 ? placeholder : void 0,
+              className: (0, import_utils.cn)(
+                "min-w-24 flex-1 bg-transparent px-1 py-0.5 outline-none placeholder:text-muted-foreground",
+                inputClassName
+              ),
+              role: "combobox",
+              "aria-expanded": open,
+              "aria-controls": open ? listboxId : void 0,
+              "aria-autocomplete": "list"
+            }
+          )
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        id: listboxId,
+        role: "listbox",
+        className: "absolute left-0 top-full z-50 mt-2 max-h-80 w-full min-w-64 overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": index === selectedOption,
+            className: (0, import_utils.cn)(
+              "flex h-9 w-full items-center rounded-sm px-2 text-left text-sm outline-none transition-colors",
+              index === selectedOption ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
+            ),
+            onMouseEnter: () => setSelectedOption(index),
+            onMouseDown: (event) => {
+              event.preventDefault();
+            },
+            onClick: () => {
+              void add(option);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: option })
+          },
+          option
+        ))
+      }
+    ) : null
+  ] });
+}

package/dist/cjs/forms/select-users-dialog.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement } from "react";
+export declare function showSelectUsersDialog({ projectEmails, initialValue, title, description, confirmLabel, cancelLabel, }: {
+    projectEmails: string[];
+    initialValue?: string[];
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+}): Promise<string[] | null>;
+export declare function SelectUsersDialog({ projectEmails, initialValue, title, description, confirmLabel, cancelLabel, onSubmit, onCancel, onCleanup, }: {
+    projectEmails: string[];
+    initialValue?: string[];
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onSubmit?: (value: string[]) => void;
+    onCancel?: () => void;
+    onCleanup?: () => void;
+}): ReactElement;

package/dist/cjs/forms/select-users-dialog.js

@@ -0,0 +1,145 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var select_users_dialog_exports = {};
+__export(select_users_dialog_exports, {
+  SelectUsersDialog: () => SelectUsersDialog,
+  showSelectUsersDialog: () => showSelectUsersDialog
+});
+module.exports = __toCommonJS(select_users_dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_client = require("react-dom/client");
+var import_react_form = require("@tanstack/react-form");
+var import_dialog = require("../components/ui/dialog");
+var import_button = require("../components/ui/button");
+var import_select_users = require("./select-users");
+function showSelectUsersDialog({
+  projectEmails,
+  initialValue = [],
+  title = "Select users",
+  description = "Choose one or more project users.",
+  confirmLabel = "Apply",
+  cancelLabel = "Cancel"
+}) {
+  return new Promise((resolve) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = (0, import_client.createRoot)(container);
+    const cleanup = () => {
+      root.unmount();
+      container.remove();
+    };
+    root.render(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        SelectUsersDialog,
+        {
+          projectEmails,
+          initialValue,
+          title,
+          description,
+          confirmLabel,
+          cancelLabel,
+          onSubmit: resolve,
+          onCancel: () => resolve(null),
+          onCleanup: cleanup
+        }
+      )
+    );
+  });
+}
+function SelectUsersDialog({
+  projectEmails,
+  initialValue = [],
+  title = "Select users",
+  description = "Choose one or more project users.",
+  confirmLabel = "Apply",
+  cancelLabel = "Cancel",
+  onSubmit,
+  onCancel,
+  onCleanup
+}) {
+  const [open, setOpen] = (0, import_react.useState)(true);
+  const form = (0, import_react_form.useForm)({
+    defaultValues: {
+      users: initialValue
+    },
+    onSubmit: ({ value }) => {
+      onSubmit?.(value.users);
+      setOpen(false);
+    }
+  });
+  const close = (0, import_react.useCallback)(() => {
+    onCancel?.();
+    setOpen(false);
+  }, [onCancel]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) {
+          close();
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_dialog.DialogContent,
+        {
+          className: "max-w-[min(92vw,560px)]",
+          onAnimationEnd: () => {
+            if (!open) {
+              onCleanup?.();
+            }
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.DialogHeader, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTitle, { children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogDescription, { children: description })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "form",
+              {
+                className: "grid gap-4",
+                onSubmit: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  void form.handleSubmit();
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(form.Field, { name: "users", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_select_users.SelectUsers,
+                    {
+                      autoFocus: true,
+                      projectEmails,
+                      value: field.state.value,
+                      onChanged: (value) => field.handleChange(value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.DialogFooter, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", variant: "outline", onClick: close, children: cancelLabel }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "submit", children: confirmLabel })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}

package/dist/cjs/forms/select-users.d.ts

@@ -0,0 +1,16 @@
+import type { ReactElement } from "react";
+import { MultiSelectController } from "./multi-select-autocomplete";
+export declare class SelectUsersController extends MultiSelectController {
+    static readonly emailRegex: RegExp;
+    canAddItem(item: string): boolean;
+}
+export declare function SelectUsers({ projectEmails, onChanged, controller, autoFocus, initialValue, value, className, }: {
+    projectEmails: string[];
+    onChanged?: (value: string[]) => void;
+    controller?: SelectUsersController;
+    autoFocus?: boolean;
+    initialValue?: string[];
+    value?: string[];
+    className?: string;
+}): ReactElement;
+export declare function buildSelectedUsersResult(selected: readonly string[], pendingEmail: string): string[];

package/dist/cjs/forms/select-users.js

@@ -0,0 +1,117 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var select_users_exports = {};
+__export(select_users_exports, {
+  SelectUsers: () => SelectUsers,
+  SelectUsersController: () => SelectUsersController,
+  buildSelectedUsersResult: () => buildSelectedUsersResult
+});
+module.exports = __toCommonJS(select_users_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_email_address = require("./email-address");
+var import_multi_select_autocomplete = require("./multi-select-autocomplete");
+class SelectUsersController extends import_multi_select_autocomplete.MultiSelectController {
+  static emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/u;
+  canAddItem(item) {
+    return SelectUsersController.emailRegex.test(item);
+  }
+}
+function selectedIncludes(selected, email) {
+  const normalized = email.toLowerCase();
+  return selected.some((item) => item.toLowerCase() === normalized);
+}
+function SelectUsers({
+  projectEmails,
+  onChanged,
+  controller,
+  autoFocus = false,
+  initialValue = [],
+  value,
+  className
+}) {
+  const effectiveController = (0, import_react.useMemo)(
+    () => controller ?? new SelectUsersController(initialValue),
+    [controller]
+  );
+  (0, import_react.useEffect)(() => {
+    if (controller != null) {
+      return void 0;
+    }
+    return () => {
+      effectiveController.dispose();
+    };
+  }, [controller, effectiveController]);
+  const search = (0, import_react.useCallback)((query) => {
+    if (query.trim() === "") {
+      return projectEmails;
+    }
+    const lower = query.toLowerCase();
+    return projectEmails.filter((email) => email.toLowerCase().includes(lower));
+  }, [projectEmails]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_multi_select_autocomplete.MultiSelectAutocomplete,
+    {
+      search,
+      controller: effectiveController,
+      onChanged,
+      initialValue,
+      value,
+      autoFocus,
+      placeholder: "Type an email",
+      minimumSearchLength: 1,
+      className,
+      onTextChanged: (text, { add, setText }) => {
+        if (text.trim() === "") {
+          return;
+        }
+        const parsed = (0, import_email_address.parseEmailList)(text);
+        if (parsed.length === 0) {
+          return;
+        }
+        if (parsed.length === 1) {
+          if (text.endsWith(" ") || text.endsWith(",")) {
+            const email = parsed[0]?.sanitizedAddress.trim() ?? "";
+            if (SelectUsersController.emailRegex.test(email)) {
+              void add(email);
+              setText("");
+            }
+          }
+          return;
+        }
+        for (const address of parsed.slice(0, -1)) {
+          const email = address.sanitizedAddress.trim();
+          if (SelectUsersController.emailRegex.test(email)) {
+            void add(email);
+          }
+        }
+        const remainder = parsed[parsed.length - 1]?.sanitizedAddress.trim() ?? "";
+        setText(remainder);
+      }
+    }
+  );
+}
+function buildSelectedUsersResult(selected, pendingEmail) {
+  const result = [...selected];
+  const trimmed = pendingEmail.trim();
+  if (SelectUsersController.emailRegex.test(trimmed) && !selectedIncludes(result, trimmed)) {
+    result.push(trimmed);
+  }
+  return result;
+}

package/dist/cjs/index.d.ts

@@ -1,11 +1,19 @@
-export * from './Chat';
-export * from './ChatBotView';
-export * from './ChatInput';
-export * from './ChatThread';
-export * from './ChatTypingIndicator';
-export * from './FileUploader';
-export * from './chat-message';
-export * from './conversation-descriptor';
-export * from './file-attachment';
-export * from './multi-thread-view';
-export * from './chat-hooks';
+export * from './chat/chat-bot-view';
+export * from './chat/chat-hooks';
+export * from './chat/chat-input';
+export * from './chat/chat-message';
+export * from './chat/chat-thread';
+export * from './chat/chat-typing-indicator';
+export * from './chat/conversation-descriptor';
+export * from './chat/dataset-chat-thread';
+export * from './chat/file-attachment';
+export * from './chat/file-uploader';
+export * from './chat/multi-thread-view';
+export * from './chat/new-chat-thread';
+export * from './file-preview/file-preview';
+export * from './forms/email-address';
+export * from './forms/form';
+export * from './forms/multi-select-autocomplete';
+export * from './forms/select-users';
+export * from './forms/select-users-dialog';
+export * from './meetings/meetings';