@meshagent/meshagent-tailwind 0.39.9 → 0.40.0

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

@@ -0,0 +1,274 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "../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 = useMemo(() => controller ?? new MultiSelectController(initialValue), [controller]);
+  const [selected, setSelected] = useState(() => value ?? generatedController.value);
+  const [text, setText] = useState("");
+  const [options, setOptions] = useState([]);
+  const [selectedOption, setSelectedOption] = useState(0);
+  const [open, setOpen] = useState(false);
+  const sequence = useRef(0);
+  const inputRef = useRef(null);
+  const listboxId = useId();
+  useEffect(() => {
+    if (value != null) {
+      setSelected(value);
+      generatedController.value = value;
+    }
+  }, [generatedController, value]);
+  useEffect(() => {
+    return generatedController.subscribe((nextValue) => {
+      setSelected(nextValue);
+      onChanged?.(nextValue);
+    });
+  }, [generatedController, onChanged]);
+  useEffect(() => {
+    if (controller == null) {
+      return () => {
+        generatedController.dispose();
+      };
+    }
+    return void 0;
+  }, [controller, generatedController]);
+  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 = 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 = useCallback((item) => {
+    generatedController.remove(item);
+    inputRef.current?.focus();
+  }, [generatedController]);
+  const handleTextChange = useCallback((nextText) => {
+    setText(nextText);
+    onTextChanged?.(nextText, {
+      add,
+      setText,
+      controller: generatedController
+    });
+  }, [add, generatedController, onTextChanged]);
+  const handleKeyDown = 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__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: 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__ */ 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__ */ jsx("span", { className: "truncate", children: item }),
+                /* @__PURE__ */ 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__ */ jsx(X, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ]
+            },
+            item
+          )),
+          /* @__PURE__ */ 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: 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__ */ 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__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": index === selectedOption,
+            className: 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__ */ jsx("span", { className: "truncate", children: option })
+          },
+          option
+        ))
+      }
+    ) : null
+  ] });
+}
+export {
+  MultiSelectAutocomplete,
+  MultiSelectController
+};

package/dist/esm/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/esm/forms/select-users-dialog.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { useForm } from "@tanstack/react-form";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../components/ui/dialog";
+import { Button } from "../components/ui/button";
+import { SelectUsers } from "./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 = createRoot(container);
+    const cleanup = () => {
+      root.unmount();
+      container.remove();
+    };
+    root.render(
+      /* @__PURE__ */ 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] = useState(true);
+  const form = useForm({
+    defaultValues: {
+      users: initialValue
+    },
+    onSubmit: ({ value }) => {
+      onSubmit?.(value.users);
+      setOpen(false);
+    }
+  });
+  const close = useCallback(() => {
+    onCancel?.();
+    setOpen(false);
+  }, [onCancel]);
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) {
+          close();
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          className: "max-w-[min(92vw,560px)]",
+          onAnimationEnd: () => {
+            if (!open) {
+              onCleanup?.();
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(DialogHeader, { children: [
+              /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+              /* @__PURE__ */ jsx(DialogDescription, { children: description })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "form",
+              {
+                className: "grid gap-4",
+                onSubmit: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  void form.handleSubmit();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(form.Field, { name: "users", children: (field) => /* @__PURE__ */ jsx(
+                    SelectUsers,
+                    {
+                      autoFocus: true,
+                      projectEmails,
+                      value: field.state.value,
+                      onChanged: (value) => field.handleChange(value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs(DialogFooter, { children: [
+                    /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: close, children: cancelLabel }),
+                    /* @__PURE__ */ jsx(Button, { type: "submit", children: confirmLabel })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  SelectUsersDialog,
+  showSelectUsersDialog
+};

package/dist/esm/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/esm/forms/select-users.js

@@ -0,0 +1,97 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo } from "react";
+import { parseEmailList } from "./email-address";
+import { MultiSelectAutocomplete, MultiSelectController } from "./multi-select-autocomplete";
+class SelectUsersController extends 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 = useMemo(
+    () => controller ?? new SelectUsersController(initialValue),
+    [controller]
+  );
+  useEffect(() => {
+    if (controller != null) {
+      return void 0;
+    }
+    return () => {
+      effectiveController.dispose();
+    };
+  }, [controller, effectiveController]);
+  const search = useCallback((query) => {
+    if (query.trim() === "") {
+      return projectEmails;
+    }
+    const lower = query.toLowerCase();
+    return projectEmails.filter((email) => email.toLowerCase().includes(lower));
+  }, [projectEmails]);
+  return /* @__PURE__ */ jsx(
+    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 = 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;
+}
+export {
+  SelectUsers,
+  SelectUsersController,
+  buildSelectedUsersResult
+};

package/dist/esm/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';

package/dist/esm/index.js

@@ -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";

package/dist/esm/meetings/audio-visualization.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from "react";
+import type { Participant, Room } from "livekit-client";
+export declare function AudioWave({ room: _room, participant, className, }: {
+    room: Room;
+    participant: Participant;
+    className?: string;
+}): ReactElement;

package/dist/esm/meetings/audio-visualization.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+function useParticipantSnapshot(participant) {
+  useSyncExternalStore(
+    (listener) => {
+      const events = ["isSpeakingChanged", "attributesChanged", "trackMuted", "trackUnmuted"];
+      for (const eventName of events) {
+        participant.on(eventName, listener);
+      }
+      return () => {
+        for (const eventName of events) {
+          participant.off(eventName, listener);
+        }
+      };
+    },
+    () => `${participant.isSpeaking}:${participant.audioLevel}:${participant.attributes["lk.agent.state"] ?? ""}`,
+    () => ""
+  );
+}
+function AudioWave({
+  room: _room,
+  participant,
+  className
+}) {
+  useParticipantSnapshot(participant);
+  const [, setFrame] = useState(0);
+  const bars = useRef(Array.from({ length: 28 }, (_, index) => 0.25 + index % 7 * 0.08));
+  const thinking = participant.attributes["lk.agent.state"] === "thinking";
+  const amplitude = thinking ? 0.2 : Math.max(participant.audioLevel, participant.isSpeaking ? 0.45 : 0.12);
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      bars.current = bars.current.map((value, index) => {
+        const phase = Date.now() / 180 + index * 0.65;
+        return Math.max(0.12, Math.min(1, value * 0.6 + Math.abs(Math.sin(phase)) * amplitude * 0.8));
+      });
+      setFrame((frame) => frame + 1);
+    }, 1e3 / 30);
+    return () => window.clearInterval(interval);
+  }, [amplitude]);
+  return /* @__PURE__ */ jsx("div", { className: className ?? "flex h-full w-full items-center justify-center bg-background", children: /* @__PURE__ */ jsx("div", { className: "flex h-24 w-4/5 max-w-xl items-center justify-center gap-1 opacity-80", children: bars.current.map((height, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "w-1 rounded-full bg-foreground/30 transition-[height,background-color]",
+      style: {
+        height: `${Math.max(10, height * 96)}px`,
+        backgroundColor: participant.isSpeaking ? "hsl(var(--foreground) / 0.42)" : "hsl(var(--foreground) / 0.18)"
+      }
+    },
+    index
+  )) }) });
+}
+export {
+  AudioWave
+};

package/dist/esm/meetings/controls.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement } from "react";
+import { Room } from "livekit-client";
+import { MeetingController } from "./meeting-scope";
+export declare function MeetingControls({ controller: providedController, spacing, }: {
+    controller?: MeetingController;
+    spacing?: number;
+}): ReactElement;
+export declare function CameraToggle({ controller }: {
+    controller?: MeetingController;
+}): ReactElement | null;
+export declare function MicToggle({ controller }: {
+    controller?: MeetingController;
+}): ReactElement | null;
+export declare function ConnectionButton({ controller }: {
+    controller?: MeetingController;
+}): ReactElement;
+export declare function ChangeSettings({ room }: {
+    room: Room;
+}): ReactElement;