react-webmcp 0.1.1 → 0.2.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import React2, { createContext, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import React6, { createContext, useRef, useEffect, useCallback, useMemo, useContext, useState } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 // src/hooks/useWebMCPTool.ts
 
@@ -17,10 +17,12 @@ function isWebMCPTestingAvailable() {
   return typeof window !== "undefined" && typeof window.navigator !== "undefined" && !!window.navigator.modelContextTesting;
 }
 function warnIfUnavailable(hookName) {
-  if (!isWebMCPAvailable()) {
-    console.warn(
-      `[react-webmcp] ${hookName}: navigator.modelContext is not available. Ensure you are running Chrome 146+ with the "WebMCP for testing" flag enabled.`
-    );
+  if (process.env.NODE_ENV !== "production") {
+    if (!isWebMCPAvailable()) {
+      console.warn(
+        `[react-webmcp] ${hookName}: navigator.modelContext is not available. Ensure you are running Chrome 146+ with the "WebMCP for testing" flag enabled.`
+      );
+    }
   }
 }
 
@@ -49,17 +51,26 @@ function useWebMCPTool(config) {
       name: config.name,
       description: config.description,
       inputSchema: config.inputSchema,
-      ...config.outputSchema ? { outputSchema: config.outputSchema } : {},
-      ...config.annotations ? { annotations: config.annotations } : {},
       execute: (input) => {
         return configRef.current.execute(input);
       }
     };
+    if (config.outputSchema) {
+      toolDef.outputSchema = config.outputSchema;
+    }
+    if (config.annotations) {
+      toolDef.annotations = config.annotations;
+    }
     try {
       mc.registerTool(toolDef);
       registeredNameRef.current = config.name;
     } catch (err) {
-      console.error(`[react-webmcp] Failed to register tool "${config.name}":`, err);
+      if (process.env.NODE_ENV !== "production") {
+        console.error(
+          `[react-webmcp] Failed to register tool "${config.name}":`,
+          err
+        );
+      }
     }
     return () => {
       try {
@@ -85,16 +96,31 @@ function useWebMCPContext(config) {
       warnIfUnavailable("useWebMCPContext");
       return;
     }
-    const stableTools = toolsRef.current.map((tool, idx) => ({
-      ...tool,
-      execute: (input) => {
-        return toolsRef.current[idx].execute(input);
+    const stableTools = toolsRef.current.map((tool, idx) => {
+      const def = {
+        name: tool.name,
+        description: tool.description,
+        inputSchema: tool.inputSchema,
+        execute: (input) => {
+          return toolsRef.current[idx].execute(input);
+        }
+      };
+      if (tool.annotations) {
+        def.annotations = tool.annotations;
+      }
+      if (tool.outputSchema) {
+        def.outputSchema = tool.outputSchema;
       }
-    }));
+      return def;
+    });
     try {
-      mc.provideContext({ tools: stableTools });
+      mc.provideContext({
+        tools: stableTools
+      });
     } catch (err) {
-      console.error("[react-webmcp] Failed to provide context:", err);
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[react-webmcp] Failed to provide context:", err);
+      }
     }
     return () => {
       try {
@@ -175,7 +201,7 @@ function WebMCPForm({
     }
   );
 }
-var WebMCPInput = React2.forwardRef(
+var WebMCPInput = React6.forwardRef(
   ({ toolParamTitle, toolParamDescription, ...rest }, ref) => {
     const webmcpAttrs = {};
     if (toolParamTitle) {
@@ -188,7 +214,7 @@ var WebMCPInput = React2.forwardRef(
   }
 );
 WebMCPInput.displayName = "WebMCPInput";
-var WebMCPSelect = React2.forwardRef(({ toolParamTitle, toolParamDescription, children, ...rest }, ref) => {
+var WebMCPSelect = React6.forwardRef(({ toolParamTitle, toolParamDescription, children, ...rest }, ref) => {
   const webmcpAttrs = {};
   if (toolParamTitle) {
     webmcpAttrs.toolparamtitle = toolParamTitle;
@@ -199,7 +225,7 @@ var WebMCPSelect = React2.forwardRef(({ toolParamTitle, toolParamDescription, ch
   return /* @__PURE__ */ jsx("select", { ref, ...webmcpAttrs, ...rest, children });
 });
 WebMCPSelect.displayName = "WebMCPSelect";
-var WebMCPTextarea = React2.forwardRef(({ toolParamTitle, toolParamDescription, ...rest }, ref) => {
+var WebMCPTextarea = React6.forwardRef(({ toolParamTitle, toolParamDescription, ...rest }, ref) => {
   const webmcpAttrs = {};
   if (toolParamTitle) {
     webmcpAttrs.toolparamtitle = toolParamTitle;
@@ -227,7 +253,332 @@ function WebMCPProvider({ children }) {
 function useWebMCPStatus() {
   return useContext(WebMCPReactContext);
 }
+function extractOptions(children) {
+  const results = [];
+  React6.Children.toArray(children).forEach((child) => {
+    if (!React6.isValidElement(child)) return;
+    const props = child.props;
+    if (props.value !== void 0 && props.value !== null) {
+      const value = props.value;
+      let label;
+      if (typeof props.children === "string") {
+        label = props.children;
+      } else {
+        label = String(value);
+      }
+      results.push({ value, label });
+    }
+    if (props.children) {
+      results.push(...extractOptions(props.children));
+    }
+  });
+  return results;
+}
+function extractFields(children) {
+  const fields = [];
+  React6.Children.toArray(children).forEach((child) => {
+    if (!React6.isValidElement(child)) return;
+    const props = child.props;
+    const inputProps = props.inputProps;
+    const slotInput = props.slotProps?.input;
+    const name = props.name ?? inputProps?.name ?? slotInput?.name;
+    if (name) {
+      const field = { name };
+      if (props.type !== void 0) field.type = props.type;
+      if (props.required !== void 0) field.required = Boolean(props.required);
+      if (props.min !== void 0) field.min = Number(props.min);
+      if (props.max !== void 0) field.max = Number(props.max);
+      if (props.minLength !== void 0) field.minLength = Number(props.minLength);
+      if (props.maxLength !== void 0) field.maxLength = Number(props.maxLength);
+      if (props.pattern !== void 0) field.pattern = props.pattern;
+      if (props.children) {
+        const options = extractOptions(props.children);
+        if (options.length > 0) {
+          field.enumValues = options.map((o) => o.value);
+          field.oneOf = options;
+        }
+      }
+      fields.push(field);
+    } else if (props.children) {
+      fields.push(...extractFields(props.children));
+    }
+  });
+  return fields;
+}
+
+// src/adapters/buildSchema.ts
+function mapHtmlTypeToSchemaType(htmlType) {
+  switch (htmlType) {
+    case "number":
+    case "range":
+      return "number";
+    case "checkbox":
+      return "boolean";
+    default:
+      return "string";
+  }
+}
+function buildInputSchema(fields) {
+  const properties = {};
+  const required = [];
+  const sortedFields = [...fields].sort((a, b) => a.name.localeCompare(b.name));
+  for (const field of sortedFields) {
+    const prop = {
+      type: mapHtmlTypeToSchemaType(field.type)
+    };
+    if (field.title) prop.title = field.title;
+    if (field.description) prop.description = field.description;
+    if (field.min !== void 0) prop.minimum = field.min;
+    if (field.max !== void 0) prop.maximum = field.max;
+    if (field.minLength !== void 0) prop.minLength = field.minLength;
+    if (field.maxLength !== void 0) prop.maxLength = field.maxLength;
+    if (field.pattern) prop.pattern = field.pattern;
+    if (field.enumValues && field.enumValues.length > 0) {
+      prop.enum = field.enumValues;
+    }
+    if (field.oneOf && field.oneOf.length > 0) {
+      prop.oneOf = field.oneOf.map((opt) => ({
+        const: opt.value,
+        title: opt.label
+      }));
+    }
+    properties[field.name] = prop;
+    if (field.required) {
+      required.push(field.name);
+    }
+  }
+  const schema = {
+    type: "object",
+    properties
+  };
+  if (required.length > 0) {
+    schema.required = required.sort();
+  }
+  return schema;
+}
+
+// src/adapters/validateSchema.ts
+function validateSchema(fields, options) {
+  if (process.env.NODE_ENV === "production") return;
+  const strict = options?.strict ?? false;
+  const issues = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const field of fields) {
+    if (seen.has(field.name)) {
+      issues.push(`Duplicate field name "${field.name}".`);
+    }
+    seen.add(field.name);
+    const schemaType = mapHtmlTypeToSchemaType(field.type);
+    if (field.pattern !== void 0 && schemaType !== "string") {
+      issues.push(
+        `Field "${field.name}": pattern is only valid for string types, but type is "${schemaType}".`
+      );
+    }
+    if ((field.min !== void 0 || field.max !== void 0) && schemaType !== "number") {
+      issues.push(
+        `Field "${field.name}": min/max are only valid for number types, but type is "${schemaType}".`
+      );
+    }
+    if ((field.minLength !== void 0 || field.maxLength !== void 0) && schemaType !== "string") {
+      issues.push(
+        `Field "${field.name}": minLength/maxLength are only valid for string types, but type is "${schemaType}".`
+      );
+    }
+    if (field.enumValues && field.enumValues.length > 0) {
+      for (const val of field.enumValues) {
+        const valType = typeof val;
+        if (schemaType === "string" && valType !== "string") {
+          issues.push(
+            `Field "${field.name}": enum value ${JSON.stringify(val)} is not a string.`
+          );
+        }
+        if (schemaType === "number" && valType !== "number") {
+          issues.push(
+            `Field "${field.name}": enum value ${JSON.stringify(val)} is not a number.`
+          );
+        }
+        if (schemaType === "boolean" && valType !== "boolean") {
+          issues.push(
+            `Field "${field.name}": enum value ${JSON.stringify(val)} is not a boolean.`
+          );
+        }
+      }
+    }
+  }
+  for (const issue of issues) {
+    if (strict) {
+      throw new Error(`[react-webmcp] ${issue}`);
+    }
+    console.warn(`[react-webmcp] ${issue}`);
+  }
+}
+
+// src/adapters/useSchemaCollector.ts
+var ToolContext = createContext(null);
+function fieldsFingerprint(fields) {
+  return fields.map(
+    (f) => `${f.name}::${f.type ?? ""}::${f.required ?? ""}::${f.title ?? ""}::${f.description ?? ""}::${JSON.stringify(f.enumValues ?? [])}::${JSON.stringify(f.oneOf ?? [])}::${f.min ?? ""}::${f.max ?? ""}::${f.minLength ?? ""}::${f.maxLength ?? ""}::${f.pattern ?? ""}`
+  ).join("|");
+}
+function mergeField(base, override) {
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    if (override[key] !== void 0) {
+      result[key] = override[key];
+    }
+  }
+  return result;
+}
+function useSchemaCollector({
+  children,
+  fields: fieldsProp,
+  strict
+}) {
+  const contextFieldsRef = useRef(/* @__PURE__ */ new Map());
+  const [version, setVersion] = useState(0);
+  const registerField = useCallback((field) => {
+    contextFieldsRef.current.set(field.name, field);
+    setVersion((v) => v + 1);
+  }, []);
+  const unregisterField = useCallback((name) => {
+    contextFieldsRef.current.delete(name);
+    setVersion((v) => v + 1);
+  }, []);
+  const childrenFields = extractFields(children);
+  const childrenFP = fieldsFingerprint(childrenFields);
+  const merged = useMemo(() => {
+    const fieldMap = /* @__PURE__ */ new Map();
+    for (const field of childrenFields) {
+      fieldMap.set(field.name, field);
+    }
+    if (fieldsProp) {
+      for (const [name, overrides] of Object.entries(fieldsProp)) {
+        const existing = fieldMap.get(name);
+        if (existing) {
+          fieldMap.set(name, mergeField(existing, overrides));
+        } else {
+          fieldMap.set(name, { name, ...overrides });
+        }
+      }
+    }
+    for (const [name, field] of contextFieldsRef.current) {
+      const existing = fieldMap.get(name);
+      if (existing) {
+        fieldMap.set(name, mergeField(existing, field));
+      } else {
+        fieldMap.set(name, field);
+      }
+    }
+    const result = Array.from(fieldMap.values());
+    if (process.env.NODE_ENV !== "production") {
+      validateSchema(result, { strict });
+    }
+    return result;
+  }, [childrenFP, fieldsProp, version, strict]);
+  const mergedFP = fieldsFingerprint(merged);
+  const schema = useMemo(
+    () => buildInputSchema(merged),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mergedFP]
+  );
+  return { schema, registerField, unregisterField };
+}
+function WebMCPTool({
+  name,
+  description,
+  onExecute,
+  fields: fieldsProp,
+  strict,
+  autoSubmit,
+  annotations,
+  onToolActivated,
+  onToolCancel,
+  children
+}) {
+  const { schema, registerField, unregisterField } = useSchemaCollector({
+    children,
+    fields: fieldsProp,
+    strict
+  });
+  const executeRef = useRef(onExecute);
+  executeRef.current = onExecute;
+  useWebMCPTool({
+    name,
+    description,
+    inputSchema: schema,
+    annotations,
+    execute: (input) => executeRef.current(input)
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!onToolActivated && !onToolCancel) return;
+    const handleActivated = (e) => {
+      const toolName = e.toolName ?? e.detail?.toolName;
+      if (toolName === name && onToolActivated) {
+        onToolActivated(toolName);
+      }
+    };
+    const handleCancel = (e) => {
+      const toolName = e.toolName ?? e.detail?.toolName;
+      if (toolName === name && onToolCancel) {
+        onToolCancel(toolName);
+      }
+    };
+    window.addEventListener("toolactivated", handleActivated);
+    window.addEventListener("toolcancel", handleCancel);
+    return () => {
+      window.removeEventListener("toolactivated", handleActivated);
+      window.removeEventListener("toolcancel", handleCancel);
+    };
+  }, [name, onToolActivated, onToolCancel]);
+  return /* @__PURE__ */ jsx(ToolContext.Provider, { value: { registerField, unregisterField }, children });
+}
+WebMCPTool.displayName = "WebMCP.Tool";
+function fieldFingerprint(field) {
+  return `${field.name}::${field.type ?? ""}::${field.required ?? ""}::${field.title ?? ""}::${field.description ?? ""}::${JSON.stringify(field.enumValues ?? [])}::${JSON.stringify(field.oneOf ?? [])}::${field.min ?? ""}::${field.max ?? ""}::${field.minLength ?? ""}::${field.maxLength ?? ""}::${field.pattern ?? ""}`;
+}
+function useRegisterField(field) {
+  const ctx = useContext(ToolContext);
+  const fp = fieldFingerprint(field);
+  useEffect(() => {
+    if (!ctx) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[react-webmcp] useRegisterField: no WebMCP.Tool context found for field "${field.name}". Wrap this component in a <WebMCP.Tool> to register fields.`
+        );
+      }
+      return;
+    }
+    ctx.registerField(field);
+    return () => {
+      try {
+        ctx.unregisterField(field.name);
+      } catch {
+      }
+    };
+  }, [fp]);
+}
+function WebMCPField({
+  children,
+  name,
+  ...rest
+}) {
+  const field = { name, ...rest };
+  if (!field.enumValues && !field.oneOf) {
+    const options = extractOptions(children);
+    if (options.length > 0) {
+      field.enumValues = options.map((o) => o.value);
+      field.oneOf = options;
+    }
+  }
+  useRegisterField(field);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+WebMCPField.displayName = "WebMCP.Field";
+
+// src/adapters/index.ts
+var WebMCP = { Tool: WebMCPTool, Field: WebMCPField };
 
-export { WebMCPForm, WebMCPInput, WebMCPProvider, WebMCPSelect, WebMCPTextarea, getModelContext, isWebMCPAvailable, isWebMCPTestingAvailable, useToolEvent, useWebMCPContext, useWebMCPStatus, useWebMCPTool };
+export { WebMCP, WebMCPField, WebMCPForm, WebMCPInput, WebMCPProvider, WebMCPSelect, WebMCPTextarea, WebMCPTool, buildInputSchema, extractFields, extractOptions, getModelContext, isWebMCPAvailable, isWebMCPTestingAvailable, useRegisterField, useSchemaCollector, useToolEvent, useWebMCPContext, useWebMCPStatus, useWebMCPTool, validateSchema };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map