@copilotkit/react-ui 1.3.15 → 1.3.16-mme-copilot-suggestions.0

package/dist/index.mjs

@@ -4,42 +4,45 @@ import "./chunk-JD7BAH7U.mjs";
 import "./chunk-MRFF7GSQ.mjs";
 import {
   CopilotSidebar
-} from "./chunk-3JNDMHS4.mjs";
+} from "./chunk-T7DQWLTN.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-AX7CAT7V.mjs";
-import "./chunk-3EYL2DRG.mjs";
+} from "./chunk-PIK3RYPJ.mjs";
+import "./chunk-DTI5DZSK.mjs";
 import "./chunk-YAGE7RCE.mjs";
 import "./chunk-VEC45H6Q.mjs";
 import "./chunk-RQNJNK2W.mjs";
 import {
   CopilotChat
-} from "./chunk-NLIDKNNS.mjs";
+} from "./chunk-UYT3USIS.mjs";
 import "./chunk-V7W6IM2V.mjs";
 import "./chunk-OMTPWC7T.mjs";
 import "./chunk-ZABXREBH.mjs";
 import "./chunk-6INMITFA.mjs";
 import "./chunk-RU73BEZM.mjs";
+import "./chunk-3XAXY2Z3.mjs";
 import "./chunk-RJCZRKTV.mjs";
-import "./chunk-RS6UPR5N.mjs";
-import "./chunk-4FIGRRFS.mjs";
+import "./chunk-W3TDOLUY.mjs";
 import "./chunk-OTPAZXVR.mjs";
+import "./chunk-4FIGRRFS.mjs";
 import "./chunk-4LUMV4YO.mjs";
 import "./chunk-YQFVRDNC.mjs";
 import "./chunk-YQ3D5IQV.mjs";
+import "./chunk-UPTB2MVO.mjs";
 import "./chunk-CPMIEVKK.mjs";
-import "./chunk-3XAXY2Z3.mjs";
 import {
   useChatContext
 } from "./chunk-CBBFRI3Q.mjs";
-import "./chunk-UPTB2MVO.mjs";
 import "./chunk-FZC7X5PK.mjs";
 import "./chunk-IU3WTXLQ.mjs";
-import "./chunk-T26KLXLH.mjs";
+import "./chunk-RJ54B6VE.mjs";
 import {
   useCopilotChatSuggestions
-} from "./chunk-Z2UZSN3K.mjs";
+} from "./chunk-HGQFDT5I.mjs";
+import {
+  useCopilotSuggestions
+} from "./chunk-K5JLXNIN.mjs";
 import "./chunk-54JAUBUJ.mjs";
 import "./chunk-S5MBUNGN.mjs";
 import "./chunk-MRXNTQOX.mjs";
@@ -48,6 +51,7 @@ export {
   CopilotPopup,
   CopilotSidebar,
   useChatContext,
-  useCopilotChatSuggestions
+  useCopilotChatSuggestions,
+  useCopilotSuggestions
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.3.15",
+  "version": "1.3.16-mme-copilot-suggestions.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -40,9 +40,9 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
-    "eslint-config-custom": "1.3.15",
-    "tailwind-config": "1.3.15",
-    "tsconfig": "1.3.15"
+    "eslint-config-custom": "1.3.16-mme-copilot-suggestions.0",
+    "tailwind-config": "1.3.16-mme-copilot-suggestions.0",
+    "tsconfig": "1.3.16-mme-copilot-suggestions.0"
   },
   "dependencies": {
     "@headlessui/react": "^2.1.3",
@@ -50,9 +50,9 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "@copilotkit/react-core": "1.3.15",
-    "@copilotkit/runtime-client-gql": "1.3.15",
-    "@copilotkit/shared": "1.3.15"
+    "@copilotkit/react-core": "1.3.16-mme-copilot-suggestions.0",
+    "@copilotkit/runtime-client-gql": "1.3.16-mme-copilot-suggestions.0",
+    "@copilotkit/shared": "1.3.16-mme-copilot-suggestions.0"
   },
   "keywords": [
     "copilotkit",

package/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from "./use-copilot-chat-suggestions";
+export * from "./use-copilot-suggestions";

package/src/hooks/use-copilot-chat-suggestions.tsx

@@ -4,9 +4,7 @@
  *   can change without notice.
  * </Callout>
  *
- * `useCopilotReadable` is a React hook that provides app-state and other information
- * to the Copilot. Optionally, the hook can also handle hierarchical state within your
- * application, passing these parent-child relationships to the Copilot.
+ * `useCopilotChatSuggestions` is a React hook that provides auto-suggestions in the Copilot chat.
  *
  * <br/>
  * <img src="/images/use-copilot-chat-suggestions/use-copilot-chat-suggestions.gif" width="500" />

package/src/hooks/use-copilot-suggestions.ts

@@ -0,0 +1,189 @@
+/**
+ * <Callout type="warning">
+ *   useCopilotSuggestions is experimental. The interface is not final and
+ *   can change without notice.
+ * </Callout>
+ *
+ * `useCopilotSuggestions` is a React hook that provides auto-suggestions that can be added to any
+ * UI component.
+ *
+ * ## Usage
+ *
+ * ### Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-ui"\
+ * npm install @copilotkit/react-core @copilotkit/react-ui
+ * ```
+ *
+ * ### Simple Usage
+ *
+ * ```tsx
+ * TODO
+ * ```
+ *
+ * ### Dependency Management
+ *
+ * ```tsx
+ * TODO
+ * }
+ * ```
+ *
+ * In the example above, the suggestions are generated based on the given instructions.
+ * The hook monitors `appState`, and updates suggestions accordingly whenever it changes.
+ *
+ * ### Behavior and Lifecycle
+ *
+ * The hook registers the configuration with the chat context upon component mount and
+ * removes it on unmount, ensuring a clean and efficient lifecycle management.
+ */
+
+import { useEffect, useState, useRef, useCallback } from "react";
+import {
+  CopilotContextParams,
+  CopilotMessagesContextParams,
+  extract,
+  useCopilotContext,
+  useCopilotMessagesContext,
+} from "@copilotkit/react-core";
+import { MappedParameterTypes, Parameter, randomId } from "@copilotkit/shared";
+import { CopilotRequestType } from "@copilotkit/runtime-client-gql";
+
+export interface UseCopilotSuggestionsConfiguration<T extends Parameter[] = []> {
+  /**
+   * A prompt or instructions for the GPT to generate suggestions.
+   */
+  instructions?: string;
+
+  /**
+   * The data to pass to the suggestions.
+   */
+  parameters: T;
+
+  /**
+   * The current value of the parameter.
+   */
+  value?: Partial<MappedParameterTypes<T>>;
+
+  /**
+   * Whether the suggestions are enabled.
+   * @default true
+   */
+  enabled?: boolean;
+
+  /**
+   * The debounce time in milliseconds.
+   * @default 1000
+   */
+  debounceTime?: number;
+}
+export type SuggestionsResult<T extends Parameter[]> =
+  | { suggestions: undefined; isAvailable: false; isLoading: boolean }
+  | { suggestions: MappedParameterTypes<T>; isAvailable: true; isLoading: boolean };
+
+export function useCopilotSuggestions<const T extends Parameter[]>(
+  {
+    instructions,
+    parameters,
+    value,
+    enabled = true,
+    debounceTime = 1000,
+  }: UseCopilotSuggestionsConfiguration<T>,
+  dependencies: any[] = [],
+): SuggestionsResult<T> {
+  const suggestionsAbortControllerRef = useRef<AbortController | null>(null);
+  const debounceTimerRef = useRef<any>();
+  const [suggestions, setSuggestions] = useState<SuggestionsResult<T>>({
+    suggestions: undefined,
+    isAvailable: false,
+    isLoading: false,
+  });
+  const isFirstRunRef = useRef(true);
+
+  const abortSuggestions = useCallback(() => {
+    suggestionsAbortControllerRef.current?.abort();
+    suggestionsAbortControllerRef.current = null;
+  }, []);
+
+  const generalContext = useCopilotContext();
+  const messagesContext = useCopilotMessagesContext();
+  const context = { ...generalContext, ...messagesContext };
+
+  useEffect(() => {
+    abortSuggestions();
+    if (!enabled) {
+      setSuggestions({ suggestions: undefined, isAvailable: false, isLoading: false });
+      return;
+    }
+
+    // if value is the same as the last suggestions, don't reload
+    if (JSON.stringify(value) === JSON.stringify(suggestions.suggestions)) {
+      return;
+    }
+
+    debounceTimerRef.current = setTimeout(
+      async () => {
+        isFirstRunRef.current = false;
+        suggestionsAbortControllerRef.current = new AbortController();
+        setSuggestions({ ...suggestions, isLoading: true });
+        await reloadSuggestions(
+          context,
+          instructions,
+          parameters,
+          value,
+          suggestionsAbortControllerRef,
+          setSuggestions,
+        );
+      },
+      isFirstRunRef.current === true ? 0 : debounceTime,
+    );
+
+    return () => {
+      clearTimeout(debounceTimerRef.current);
+    };
+  }, [
+    instructions,
+    JSON.stringify(parameters),
+    JSON.stringify(value),
+    enabled,
+    debounceTime,
+    ...dependencies,
+  ]);
+
+  return suggestions;
+}
+
+async function reloadSuggestions(
+  context: CopilotContextParams & CopilotMessagesContextParams,
+  instructions: string | undefined,
+  parameters: Parameter[],
+  value: any,
+  abortControllerRef: React.MutableRefObject<AbortController | null>,
+  setSuggestions: (suggestions: any) => void,
+) {
+  const abortController = abortControllerRef.current;
+  let fullInstructions = `It's your task to generate suggestions based on the application context.`;
+  if (instructions) {
+    fullInstructions += `\n\nIn addition, follow these specific instructions: ${instructions}`;
+  }
+  if (value) {
+    fullInstructions +=
+      `\n\nThe current value of the parameter is: ${JSON.stringify(value)}.` +
+      `If it makes sense to complete the existing data, i.e. expand string values, add new elements to arrays, etc., do so. ` +
+      `Otherwise, generate a new value.`;
+  }
+
+  await extract({
+    context,
+    instructions: fullInstructions,
+    parameters,
+    abortSignal: abortController?.signal,
+    requestType: CopilotRequestType.Task,
+    stream({ args, status }) {
+      if (status === "complete") {
+        setSuggestions({ suggestions: args, isAvailable: true, isLoading: false });
+      }
+    },
+  });
+}

package/dist/chunk-T26KLXLH.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-T26KLXLH.mjs.map

package/dist/chunk-Z2UZSN3K.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/use-copilot-chat-suggestions.tsx"],"sourcesContent":["/**\n * <Callout type=\"warning\">\n *   useCopilotChatSuggestions is experimental. The interface is not final and\n *   can change without notice.\n * </Callout>\n *\n * `useCopilotReadable` is a React hook that provides app-state and other information\n * to the Copilot. Optionally, the hook can also handle hierarchical state within your\n * application, passing these parent-child relationships to the Copilot.\n *\n * <br/>\n * <img src=\"/images/use-copilot-chat-suggestions/use-copilot-chat-suggestions.gif\" width=\"500\" />\n *\n * ## Usage\n *\n * ### Install Dependencies\n *\n * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.\n *\n * ```shell npm2yarn \\\"@copilotkit/react-ui\"\\\n * npm install @copilotkit/react-core @copilotkit/react-ui\n * ```\n *\n * ### Simple Usage\n *\n * ```tsx\n * import { useCopilotChatSuggestions } from \"@copilotkit/react-ui\";\n *\n * export function MyComponent() {\n *   const [employees, setEmployees] = useState([]);\n *\n *   useCopilotChatSuggestions({\n *     instructions: `The following employees are on duty: ${JSON.stringify(employees)}`,\n *   });\n * }\n * ```\n *\n * ### Dependency Management\n *\n * ```tsx\n * import { useCopilotChatSuggestions } from \"@copilotkit/react-ui\";\n *\n * export function MyComponent() {\n *   useCopilotChatSuggestions(\n *     {\n *       instructions: \"Suggest the most relevant next actions.\",\n *     },\n *     [appState],\n *   );\n * }\n * ```\n *\n * In the example above, the suggestions are generated based on the given instructions.\n * The hook monitors `appState`, and updates suggestions accordingly whenever it changes.\n *\n * ### Behavior and Lifecycle\n *\n * The hook registers the configuration with the chat context upon component mount and\n * removes it on unmount, ensuring a clean and efficient lifecycle management.\n */\n\nimport { useEffect } from \"react\";\nimport { useCopilotContext } from \"@copilotkit/react-core\";\nimport { randomId } from \"@copilotkit/shared\";\n\ninterface UseCopilotChatSuggestionsConfiguration {\n  /**\n   * A prompt or instructions for the GPT to generate suggestions.\n   */\n  instructions: string;\n  /**\n   * The minimum number of suggestions to generate. Defaults to `1`.\n   * @default 1\n   */\n  minSuggestions?: number;\n  /**\n   * The maximum number of suggestions to generate. Defaults to `3`.\n   * @default 1\n   */\n  maxSuggestions?: number;\n  /**\n   * An optional class name to apply to the suggestions.\n   */\n  className?: string;\n}\n\nexport function useCopilotChatSuggestions(\n  {\n    instructions,\n    className,\n    minSuggestions = 1,\n    maxSuggestions = 3,\n  }: UseCopilotChatSuggestionsConfiguration,\n  dependencies: any[] = [],\n) {\n  const context = useCopilotContext();\n\n  useEffect(() => {\n    const id = randomId();\n\n    context.addChatSuggestionConfiguration(id, {\n      instructions,\n      minSuggestions,\n      maxSuggestions,\n      className,\n    });\n\n    return () => {\n      context.removeChatSuggestionConfiguration(id);\n    };\n  }, [...dependencies, instructions, minSuggestions, maxSuggestions, className]);\n}\n"],"mappings":";AA6DA,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AAuBlB,SAAS,0BACd;AAAA,EACE;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GACA,eAAsB,CAAC,GACvB;AACA,QAAM,UAAU,kBAAkB;AAElC,YAAU,MAAM;AACd,UAAM,KAAK,SAAS;AAEpB,YAAQ,+BAA+B,IAAI;AAAA,MACzC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,cAAQ,kCAAkC,EAAE;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,GAAG,cAAc,cAAc,gBAAgB,gBAAgB,SAAS,CAAC;AAC/E;","names":[]}