@copilotkit/react-core 1.67.0 → 1.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.umd.js CHANGED
@@ -6714,8 +6714,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
6714
6714
  //#region src/hooks/use-copilot-readable.ts
6715
6715
  /**
6716
6716
  * `useCopilotReadable` is a React hook that provides app-state and other information
6717
- * to the Copilot. Optionally, the hook can also handle hierarchical state within your
6718
- * application, passing these parent-child relationships to the Copilot.
6717
+ * to the Copilot.
6719
6718
  *
6720
6719
  * ## Usage
6721
6720
  *
@@ -6738,75 +6737,74 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
6738
6737
  * }
6739
6738
  * ```
6740
6739
  *
6741
- * ### Nested Components
6740
+ * ### Custom Serialization
6742
6741
  *
6743
- * Optionally, you can maintain the hierarchical structure of information by passing
6744
- * `parentId`. This allows you to use `useCopilotReadable` in nested components:
6742
+ * By default the value is serialized with `JSON.stringify`. Pass `convert` to
6743
+ * control the string the Copilot sees. It is called with the description and the
6744
+ * value, in that order:
6745
6745
  *
6746
- * ```tsx /employeeContextId/1 {17,23}
6747
- * import { useCopilotReadable } from "@copilotkit/react-core";
6746
+ * ```tsx
6747
+ * useCopilotReadable({
6748
+ * description: "The current user",
6749
+ * value: user,
6750
+ * convert: (description, value) => `${description}: ${value.firstName} ${value.lastName}`,
6751
+ * });
6752
+ * ```
6748
6753
  *
6749
- * function Employee(props: EmployeeProps) {
6750
- * const { employeeName, workProfile, metadata } = props;
6754
+ * ### Conditional Usage
6751
6755
  *
6752
- * // propagate any information to copilot
6753
- * const employeeContextId = useCopilotReadable({
6754
- * description: "Employee name",
6755
- * value: employeeName
6756
- * });
6756
+ * Toggle `available` to add or remove the context as your app state changes.
6757
+ * Switching to `"disabled"` removes the entry from the Copilot context; switching
6758
+ * back to `"enabled"` re-adds it.
6757
6759
  *
6758
- * // Pass a parentID to maintain a hierarchical structure.
6759
- * // Especially useful with child React components, list elements, etc.
6760
- * useCopilotReadable({
6761
- * description: "Work profile",
6762
- * value: workProfile.description(),
6763
- * parentId: employeeContextId
6764
- * });
6760
+ * ```tsx
6761
+ * useCopilotReadable({
6762
+ * description: "The list of employees",
6763
+ * value: employees,
6764
+ * available: showEmployees ? "enabled" : "disabled",
6765
+ * });
6766
+ * ```
6765
6767
  *
6766
- * useCopilotReadable({
6767
- * description: "Employee metadata",
6768
- * value: metadata.description(),
6769
- * parentId: employeeContextId
6770
- * });
6768
+ * ### Re-running on Custom Dependencies
6771
6769
  *
6772
- * return (
6773
- * // Render as usual...
6774
- * );
6775
- * }
6770
+ * The context is refreshed whenever `description`, `value`, `convert` or
6771
+ * `available` change. Pass a second argument to add your own dependencies:
6772
+ *
6773
+ * ```tsx
6774
+ * useCopilotReadable(
6775
+ * {
6776
+ * description: "The selected employee",
6777
+ * value: employee,
6778
+ * },
6779
+ * [departmentId],
6780
+ * );
6776
6781
  * ```
6777
6782
  */
6778
6783
  /**
6779
6784
  * Adds the given information to the Copilot context to make it readable by Copilot.
6780
6785
  */
6781
- function useCopilotReadable({ description, value, convert, available }, dependencies) {
6786
+ function useCopilotReadable({ description, value, convert, available = "enabled" }, dependencies) {
6782
6787
  const { copilotkit } = useCopilotKit();
6783
6788
  const ctxIdRef = (0, react.useRef)(void 0);
6784
6789
  (0, react.useEffect)(() => {
6785
6790
  if (!copilotkit) return;
6786
- const found = Object.entries(copilotkit.context).find(([id, ctxItem]) => {
6787
- return JSON.stringify({
6788
- description,
6789
- value
6790
- }) == JSON.stringify(ctxItem);
6791
- });
6792
- if (found) {
6793
- ctxIdRef.current = found[0];
6794
- if (available === "disabled") copilotkit.removeContext(ctxIdRef.current);
6795
- return;
6796
- }
6797
- if (!found && available === "disabled") return;
6798
- ctxIdRef.current = copilotkit.addContext({
6791
+ if (available === "disabled") return;
6792
+ const id = copilotkit.addContext({
6799
6793
  description,
6800
- value: (convert ?? JSON.stringify)(value)
6794
+ value: convert ? convert(description, value) : JSON.stringify(value)
6801
6795
  });
6796
+ ctxIdRef.current = id;
6802
6797
  return () => {
6803
- if (!ctxIdRef.current) return;
6804
- copilotkit.removeContext(ctxIdRef.current);
6798
+ copilotkit.removeContext(id);
6799
+ if (ctxIdRef.current === id) ctxIdRef.current = void 0;
6805
6800
  };
6806
6801
  }, [
6802
+ copilotkit,
6807
6803
  description,
6808
6804
  value,
6809
- convert
6805
+ convert,
6806
+ available,
6807
+ ...dependencies || []
6810
6808
  ]);
6811
6809
  return ctxIdRef.current;
6812
6810
  }