@meshagent/meshagent-tailwind 0.5.6 → 0.5.8

package/dist/esm/tools/build-schema.d.ts

@@ -0,0 +1,3 @@
+import * as z from "zod";
+import type { FormSchema } from "./form-schema";
+export declare function buildZodSchemaFromAskUser(formSchema: FormSchema): z.ZodObject<any>;

package/dist/esm/tools/build-schema.js

@@ -0,0 +1,25 @@
+import * as z from "zod";
+function buildZodSchemaFromAskUser(formSchema) {
+  const shape = {};
+  for (const item of formSchema) {
+    if (item.hasOwnProperty("input")) {
+      const f = item.input;
+      shape[f.name] = z.string().min(1, `${f.description} is required`);
+    } else if (item.hasOwnProperty("checkbox")) {
+      const f = item.checkbox;
+      shape[f.name] = z.boolean();
+    } else if (item.hasOwnProperty("radio_group")) {
+      const f = item.radio_group;
+      const options = f.options.map((opt) => opt.value);
+      shape[f.name] = z.enum(options, "Select an option").default(f.default_value || options[0]);
+    } else if (item.hasOwnProperty("select")) {
+      const f = item.select;
+      const options = f.options.map((opt) => opt.value);
+      shape[f.name] = z.enum(options, "Select an option").default(f.default_value || options[0]);
+    }
+  }
+  return z.object(shape);
+}
+export {
+  buildZodSchemaFromAskUser
+};

package/dist/esm/tools/display-document.d.ts

@@ -0,0 +1,10 @@
+import { Tool } from '@meshagent/meshagent';
+import type { Response } from '@meshagent/meshagent';
+export declare class DisplayDocument extends Tool {
+    constructor({ name, description, title }?: {
+        name?: string;
+        description?: string;
+        title?: string;
+    });
+    execute(arguments_: Record<string, any>): Promise<Response>;
+}

package/dist/esm/tools/display-document.js

@@ -0,0 +1,29 @@
+import { Tool, EmptyResponse } from "@meshagent/meshagent";
+const displayDocumentSchema = {
+  type: "object",
+  additionalProperties: false,
+  required: ["path"],
+  properties: {
+    path: {
+      type: "string"
+    }
+  }
+};
+class DisplayDocument extends Tool {
+  constructor({ name, description, title } = {}) {
+    super({
+      name: name ?? "display_document",
+      description: description ?? "display document to the user",
+      title: title ?? "display document",
+      inputSchema: displayDocumentSchema
+    });
+  }
+  async execute(arguments_) {
+    const { path } = arguments_;
+    console.log("Navigate to document:", path);
+    return new EmptyResponse();
+  }
+}
+export {
+  DisplayDocument
+};

package/dist/esm/tools/file-dialog.d.ts

@@ -0,0 +1,11 @@
+export declare function showFileDialog({ title, description }: {
+    title?: string;
+    description?: string;
+}): Promise<Record<string, any> | null>;
+export declare function FileDialog({ title, description, onSubmit, onDismiss, onCleanup }: {
+    title?: string;
+    description?: string;
+    onSubmit: (file: File | null) => void;
+    onDismiss: () => void;
+    onCleanup: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/tools/file-dialog.js

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose
+} from "../components/ui/dialog";
+import { Button } from "../components/ui/button";
+function showFileDialog({ title, description }) {
+  return new Promise((resolve) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const onCleanup = () => {
+      root.unmount();
+      container.remove();
+    };
+    const onDismiss = () => resolve(null);
+    root.render(/* @__PURE__ */ jsx(
+      FileDialog,
+      {
+        title,
+        description,
+        onSubmit: resolve,
+        onDismiss,
+        onCleanup
+      }
+    ));
+  });
+}
+function FileDialog({ title, description, onSubmit, onDismiss, onCleanup }) {
+  const inputRef = useRef(null);
+  const [open, setOpen] = useState(true);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const handleSubmit = useCallback((e) => {
+    e.preventDefault();
+    onSubmit(selectedFile);
+    setOpen(false);
+  }, [selectedFile, onSubmit]);
+  const handleFileChange = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      setSelectedFile(e.target.files[0]);
+    }
+  };
+  const onOpenChange = useCallback((isOpen) => {
+    onDismiss();
+    setOpen(isOpen);
+  }, [onDismiss]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      onCleanup();
+    }
+  }, [open, onCleanup]);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, modal: true, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      showCloseButton: true,
+      onAnimationEnd,
+      className: "\n                    sm:max-w-[425px]\n                    fixed top-1/2 left-1/2 w-[90vw] max-w-md max-h-[90vh]\n                    transform -translate-x-1/2 -translate-y-1/2\n                    bg-white rounded shadow-lg p-6 overflow-y-auto",
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "file-input",
+            type: "file",
+            onChange: handleFileChange,
+            className: "\n                        block w-full text-sm text-gray-500 file:mr-4 file:py-2\n                        file:px-4 file:rounded-full file:border-0 file:text-sm \n                        file:font-semibold file:bg-gray-100 hover:file:bg-gray-200"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            multiple: true,
+            accept: "",
+            className: "hidden",
+            onChange: handleFileChange
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "pt-4", children: [
+          /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, children: "Submit" })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  FileDialog,
+  showFileDialog
+};

package/dist/esm/tools/form-dialog.d.ts

@@ -0,0 +1,12 @@
+import type { FormSchema } from "./form-schema";
+export declare function showUserFormDialog({ formSchema, title }: {
+    formSchema: FormSchema;
+    title?: string;
+}): Promise<Record<string, any> | null>;
+export declare function FormDialog({ title, formSchema, onSubmit, onDismiss, onCleanup }: {
+    title?: string;
+    formSchema: FormSchema;
+    onSubmit: (data: Record<string, any>) => void;
+    onDismiss: () => void;
+    onCleanup: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/tools/form-dialog.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { createRoot } from "react-dom/client";
+import { useForm } from "react-hook-form";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { FormField } from "./form";
+function showUserFormDialog({ formSchema, title }) {
+  return new Promise((resolve) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const onCleanup = () => {
+      root.unmount();
+      container.remove();
+    };
+    const onDismiss = () => resolve(null);
+    root.render(/* @__PURE__ */ jsx(
+      FormDialog,
+      {
+        title,
+        formSchema,
+        onSubmit: resolve,
+        onDismiss,
+        onCleanup
+      }
+    ));
+  });
+}
+function FormDialog({ title, formSchema, onSubmit, onDismiss, onCleanup }) {
+  const [open, setOpen] = useState(true);
+  const form = useForm({
+    resolver: async (values) => ({ values, errors: {} }),
+    mode: "onChange",
+    defaultValues: {}
+  });
+  const handleSubmit = useCallback((e) => {
+    e.preventDefault();
+    onSubmit(form.getValues());
+  }, [onSubmit]);
+  const onOpenChange = useCallback((isOpen) => {
+    onDismiss();
+    setOpen(isOpen);
+  }, [onDismiss]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      onCleanup();
+    }
+  }, [open, onCleanup]);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, modal: true, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "sm:max-w-[425px]\n                    fixed top-1/2 left-1/2 w-[90vw] max-w-md max-h-[90vh]\n                    transform -translate-x-1/2 -translate-y-1/2\n                    bg-white rounded shadow-lg p-6 overflow-y-auto",
+      showCloseButton: true,
+      onAnimationEnd,
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: title }) }),
+        /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "grid gap-4 py-4", children: [
+          formSchema.map((fieldItem, index) => /* @__PURE__ */ jsx(FormField, { fieldItem, control: form.control }, index)),
+          /* @__PURE__ */ jsxs(DialogFooter, { className: "pt-4", children: [
+            /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }) }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", children: "Submit" })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  FormDialog,
+  showUserFormDialog
+};

package/dist/esm/tools/form-schema.d.ts

@@ -0,0 +1,41 @@
+export interface BaseField<T> {
+    name: string;
+    description: string;
+    default_value: T;
+}
+export interface InputField extends BaseField<string> {
+    multiline: boolean;
+}
+export interface SelectOption {
+    name: string;
+    value: string;
+}
+export interface SelectField extends BaseField<string> {
+    options: SelectOption[];
+}
+export interface RadioOption {
+    name: string;
+    value: string;
+}
+export interface RadioGroupField extends BaseField<string> {
+    options: RadioOption[];
+}
+export interface CheckboxField extends BaseField<boolean> {
+}
+export type FormField = InputField | SelectField | RadioGroupField | CheckboxField;
+export interface InputFieldItem {
+    input: InputField;
+}
+export interface SelectFieldItem {
+    select: SelectField;
+}
+export interface RadioGroupFieldItem {
+    radio_group: RadioGroupField;
+}
+export interface CheckboxFieldItem {
+    checkbox: CheckboxField;
+}
+export type FormFieldItem = InputFieldItem | SelectFieldItem | RadioGroupFieldItem | CheckboxFieldItem;
+export type FormSchema = FormFieldItem[];
+export declare function getFormFieldType(fieldItem: FormFieldItem): String;
+export declare function getFormField(fieldItem: FormFieldItem): FormField;

package/dist/esm/tools/form-schema.js

@@ -0,0 +1,31 @@
+function getFormFieldType(fieldItem) {
+  if ("input" in fieldItem) {
+    return "input";
+  } else if ("select" in fieldItem) {
+    return "select";
+  } else if ("radio_group" in fieldItem) {
+    return "radio_group";
+  } else if ("checkbox" in fieldItem) {
+    return "checkbox";
+  }
+  throw new Error("Unknown form field type");
+}
+function getFormField(fieldItem) {
+  if ("input" in fieldItem) {
+    return fieldItem.input;
+  }
+  if ("select" in fieldItem) {
+    return fieldItem.select;
+  }
+  if ("radio_group" in fieldItem) {
+    return fieldItem.radio_group;
+  }
+  if ("checkbox" in fieldItem) {
+    return fieldItem.checkbox;
+  }
+  throw new Error("Unknown form field type");
+}
+export {
+  getFormField,
+  getFormFieldType
+};

package/dist/esm/tools/form.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { Control } from "react-hook-form";
+import type { FormFieldItem } from "./form-schema";
+export type FieldErrorProperty = {
+    errors: string[];
+} | undefined;
+export type FieldErrors = {
+    errors: string[];
+    properties?: {
+        [x: string]: FieldErrorProperty;
+    } | undefined;
+};
+export declare function FormField({ fieldItem, control }: {
+    fieldItem: FormFieldItem;
+    control: Control<any>;
+}): React.ReactElement;

package/dist/esm/tools/form.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useController } from "react-hook-form";
+import {
+  getFormField,
+  getFormFieldType
+} from "./form-schema";
+function FormField({ fieldItem, control }) {
+  const field = useMemo(() => getFormField(fieldItem), [fieldItem]);
+  const fieldKey = useMemo(() => getFormFieldType(fieldItem), [fieldItem]);
+  const { field: controllerField } = useController({
+    name: field.name,
+    control,
+    defaultValue: field.default_value
+  });
+  switch (fieldKey) {
+    case "checkbox": {
+      return /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: controllerField.value,
+            onChange: (e) => controllerField.onChange(e.target.checked)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: field.description })
+      ] });
+    }
+    case "radio_group": {
+      const f2 = field;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "block font-medium mb-1", children: field.description }),
+        (f2.options ?? []).map((opt) => /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              value: opt.value,
+              checked: controllerField.value === opt.value,
+              onChange: () => controllerField.onChange(opt.value)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: opt.name })
+        ] }, opt.value))
+      ] });
+    }
+    case "select": {
+      const f2 = field;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "block font-medium mb-1", children: field.description }),
+        /* @__PURE__ */ jsx("select", { ...controllerField, className: "border p-2 w-full rounded", children: (f2.options ?? []).map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.name }, opt.value)) })
+      ] });
+    }
+  }
+  const f = field;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("label", { className: "block font-medium", children: f.description }),
+    f.multiline ? /* @__PURE__ */ jsx("textarea", { ...controllerField, className: "border p-2 w-full rounded" }) : /* @__PURE__ */ jsx("input", { type: "text", ...controllerField, className: "border p-2 w-full rounded" })
+  ] });
+}
+export {
+  FormField
+};

package/dist/esm/tools/toast.d.ts

@@ -0,0 +1,10 @@
+import { Tool } from '@meshagent/meshagent';
+import type { Response } from '@meshagent/meshagent';
+export declare class Toast extends Tool {
+    constructor({ name, description, title }?: {
+        name?: string;
+        description?: string;
+        title?: string;
+    });
+    execute(arguments_: Record<string, any>): Promise<Response>;
+}

package/dist/esm/tools/toast.js

@@ -0,0 +1,32 @@
+import { Tool, EmptyResponse } from "@meshagent/meshagent";
+import { toast } from "sonner";
+const toastSchema = {
+  type: "object",
+  additionalProperties: false,
+  required: ["title", "description"],
+  properties: {
+    title: {
+      type: "string",
+      description: "a very short summary suitable for a toast title"
+    }
+  }
+};
+class Toast extends Tool {
+  constructor({ name, description, title } = {}) {
+    super({
+      name: name ?? "show_toast",
+      description: description ?? "let the user know something important (will be shown as a toast)",
+      title: title ?? "show user a toast",
+      inputSchema: toastSchema
+    });
+  }
+  async execute(arguments_) {
+    toast(arguments_.title, {
+      description: arguments_.description ?? ""
+    });
+    return new EmptyResponse();
+  }
+}
+export {
+  Toast
+};

package/dist/esm/tools/ui-toolkit.d.ts

@@ -0,0 +1,6 @@
+import { RoomClient, RemoteToolkit } from '@meshagent/meshagent';
+export declare class UIToolkit extends RemoteToolkit {
+    constructor({ room }: {
+        room: RoomClient;
+    });
+}

package/dist/esm/tools/ui-toolkit.js

@@ -0,0 +1,24 @@
+import { RemoteToolkit } from "@meshagent/meshagent";
+import { AskUser } from "./ask-user";
+import { AskUserForFile } from "./ask-user-for-file";
+import { DisplayDocument } from "./display-document";
+import { Toast } from "./toast";
+class UIToolkit extends RemoteToolkit {
+  constructor({ room }) {
+    super({
+      name: "ui",
+      title: "UI Tools",
+      description: "User interface tools",
+      room,
+      tools: [
+        new AskUser(),
+        new AskUserForFile(),
+        new Toast(),
+        new DisplayDocument()
+      ]
+    });
+  }
+}
+export {
+  UIToolkit
+};