@copilotkit/react-textarea 0.27.2-alpha.0 → 0.28.0-alpha.2

package/dist/types/base/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/types/base/base-autosuggestions-config.tsx"],"names":[],"mappings":";AACA,SAAS,uCAAuC;AAyDhD,IAAM,8CAA8C,CAClD,UACG;AAEH,MAAI,MAAM,QAAQ,OAAO,MAAM,SAAS;AACtC,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,IAAM,8CAA8C,CAClD,UACG;AAEH,MAAI,MAAM,QAAQ,OAAO;AACvB,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAcO,IAAM,mCAGT;AAAA,EACF,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV,uDAAuD;AAAA,EACvD,sCAAsC;AAAA,EACtC,sCAAsC;AACxC","sourcesContent":["import { BaseCopilotTextareaApiConfig } from \"./autosuggestions-bare-function\";\nimport { defaultCopilotContextCategories } from \"@copilotkit/react-core\";\n\n/**\n * @interface BaseAutosuggestionsConfig\n *\n * @property {string} textareaPurpose - The purpose of the textarea. This is used to guide the autosuggestions.\n *\n * @property {string[]} contextCategories - The categories of context to consider when providing autosuggestions.\n *\n * @property {number} debounceTime - The amount of time (in milliseconds) to wait before triggering autosuggestions after the user has stopped typing.\n *\n * @property {BaseCopilotTextareaApiConfig} apiConfig - The configuration for the API that provides the autosuggestions.\n *\n * @property {boolean} disableWhenEmpty - Whether to disable autosuggestions when the textarea is empty.\n *\n * @property {boolean} disabled - Whether to disable autosuggestions entirely.\n *\n * @property {boolean} temporarilyDisableWhenMovingCursorWithoutChangingText - Whether to temporarily disable autosuggestions when the user moves the cursor without changing the text.\n *\n * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldAcceptAutosuggestionOnKeyPress - A function that determines whether to accept the current autosuggestion based on a key press event. By default, the Tab key is used to accept the autosuggestion. Example code:\n *\n * ```typescript\n * const defaultShouldAcceptAutosuggestionOnKeyPress =  (event: React.KeyboardEvent<HTMLDivElement>) => {\n *   // if tab, accept the autosuggestion\n *   if (event.key === \"Tab\") {\n *     return true;\n *   }\n *   return false;\n * }\n * ```\n *\n * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldToggleHoveringEditorOnKeyPress - A function that determines whether to toggle the hovering editor based on a key press event. By default, the Command + K key combination is used to toggle the hovering editor. Example code:\n *\n * ```typescript\n * const defaultShouldToggleHoveringEditorOnKeyPress =  (event: React.KeyboardEvent<HTMLDivElement>) => {\n *   // if command-k, toggle the hovering editor\n *   if (event.key === \"k\" && event.metaKey) {\n *     return true;\n *   }\n *   return false;\n * }\n * ```\n */\nexport interface BaseAutosuggestionsConfig {\n  textareaPurpose: string;\n  contextCategories: string[];\n  debounceTime: number;\n  apiConfig: BaseCopilotTextareaApiConfig;\n\n  disableWhenEmpty: boolean;\n  disabled: boolean;\n  temporarilyDisableWhenMovingCursorWithoutChangingText: boolean;\n  shouldAcceptAutosuggestionOnKeyPress: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;\n  shouldToggleHoveringEditorOnKeyPress: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;\n}\n\n// by default, command-k toggles the hovering editor\nconst defaultShouldToggleHoveringEditorOnKeyPress = (\n  event: React.KeyboardEvent<HTMLDivElement>,\n) => {\n  // if command-k, toggle the hovering editor\n  if (event.key === \"k\" && event.metaKey) {\n    return true;\n  }\n  return false;\n};\n\nconst defaultShouldAcceptAutosuggestionOnKeyPress = (\n  event: React.KeyboardEvent<HTMLDivElement>,\n) => {\n  // if tab, accept the autosuggestion\n  if (event.key === \"Tab\") {\n    return true;\n  }\n  return false;\n};\n\n/**\n * Default configuration for the BaseAutosuggestions.\n *\n * @property {number} debounceTime - The amount of time to wait before triggering the autosuggestions API call.\n * @property {string[]} contextCategories - The categories to use for context when making the autosuggestions API call.\n * @property {boolean} disableWhenEmpty - Whether to disable the autosuggestions when the textarea is empty.\n * @property {boolean} disabled - Whether to disable the autosuggestions feature entirely.\n * @property {boolean} temporarilyDisableWhenMovingCursorWithoutChangingText - Whether to temporarily disable the autosuggestions when the cursor is moved without changing the text.\n * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldToggleHoveringEditorOnKeyPress - A function that determines whether to toggle the hovering editor based on a key press event.\n * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldAcceptAutosuggestionOnKeyPress - A function that determines whether to accept the autosuggestion based on a key press event.\n */\n\nexport const defaultBaseAutosuggestionsConfig: Omit<\n  BaseAutosuggestionsConfig,\n  \"textareaPurpose\" | \"apiConfig\"\n> = {\n  debounceTime: 250,\n  contextCategories: defaultCopilotContextCategories,\n  disableWhenEmpty: true,\n  disabled: false,\n  temporarilyDisableWhenMovingCursorWithoutChangingText: true,\n  shouldToggleHoveringEditorOnKeyPress: defaultShouldToggleHoveringEditorOnKeyPress,\n  shouldAcceptAutosuggestionOnKeyPress: defaultShouldAcceptAutosuggestionOnKeyPress,\n};\n"]}

package/dist/types/html-copilot-textarea-element.js

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=html-copilot-textarea-element.js.map

package/dist/types/html-copilot-textarea-element.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/types/index.js

@@ -0,0 +1,274 @@
+'use strict';
+
+var reactCore = require('@copilotkit/react-core');
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var defaultShouldToggleHoveringEditorOnKeyPress = (event) => {
+  if (event.key === "k" && event.metaKey) {
+    return true;
+  }
+  return false;
+};
+var defaultShouldAcceptAutosuggestionOnKeyPress = (event) => {
+  if (event.key === "Tab") {
+    return true;
+  }
+  return false;
+};
+var defaultBaseAutosuggestionsConfig = {
+  debounceTime: 250,
+  contextCategories: reactCore.defaultCopilotContextCategories,
+  disableWhenEmpty: true,
+  disabled: false,
+  temporarilyDisableWhenMovingCursorWithoutChangingText: true,
+  shouldToggleHoveringEditorOnKeyPress: defaultShouldToggleHoveringEditorOnKeyPress,
+  shouldAcceptAutosuggestionOnKeyPress: defaultShouldAcceptAutosuggestionOnKeyPress
+};
+
+// src/types/autosuggestions-config/suggestions-api-config.tsx
+var defaultSuggestionsMakeSystemPrompt = (textareaPurpose, contextString) => {
+  return `You are a versatile writing assistant.
+  
+The user is writing some text.
+The purpose is: "${textareaPurpose}"
+
+Your job is to guess what the user will write next AS BEST YOU CAN.
+Only guess a SHORT distance ahead. Usually 1 sentence, or at most 1 paragraph.
+
+Adjust yourself to the user's style and implied intent.
+
+The user will provide both the text before and after the cursor. You should use this to infer what the user is likely to write next.
+<TextAfterCursor>
+<TextBeforeCursor>
+<YourSuggestion>
+
+If we need to add a whitespace character to the suggested text, make sure to explicitly add it in.
+
+The following external context is also provided. Use it to help you make better suggestions!!!
+\`\`\`
+${contextString}
+\`\`\`
+`;
+};
+var defaultSuggestionsFewShotMessages = [
+  {
+    role: "user",
+    name: "TextAfterCursor",
+    content: "While I was there I also picked up some apples, oranges, and bananas."
+  },
+  {
+    role: "user",
+    content: "This morning I woke up and went straight to the grocery store."
+  },
+  {
+    role: "assistant",
+    content: " When I arrived I went straight to the produce section and picked out a big watermelon. "
+  },
+  {
+    role: "user",
+    name: "TextAfterCursor",
+    content: "and (iii) to the appointment of the Equityholders' Representative pursuant to Section 10.7 of the Merger Agreement and to the provisions thereof."
+  },
+  {
+    role: "user",
+    name: "TextBeforeCursor",
+    content: `The Optionholder, in the Optionholder's capacity as a holder of vested Options, hereby irrevocably and unconditionally agrees: (i) that the Optionholder shall be deemed an "Equityholder" under the Merger Agreement and shall be entitled to the rights and benefits, and subject to the obligations, of an "Equityholder" thereunder;`
+  },
+  {
+    role: "assistant",
+    content: ` (ii) that, for purposes of this Agreement and the Merger Agreement, the applicable percentage set forth opposite the name of the Optionholder in the Distribution Waterfall shall be such the Optionholder's "Pro Rata Share"; `
+  }
+];
+var defaultSuggestionsApiConfig = {
+  makeSystemPrompt: defaultSuggestionsMakeSystemPrompt,
+  fewShotMessages: defaultSuggestionsFewShotMessages,
+  forwardedParams: void 0
+};
+
+// src/types/autosuggestions-config/insertions-api-config.tsx
+var defaultInsertionsMakeSystemPrompt = (textareaPurpose, contextString) => {
+  return `You are a versatile writing assistant helping the user insert new text into their existing work.
+  
+The user is writing some text.
+The purpose is: "${textareaPurpose}"
+
+The following external context is also provided. Use it to inform your suggestions when relevant!!!
+\`\`\`
+${contextString}
+\`\`\`
+
+The user will provide you with a prompt for an INSERTION into the text they are writing. 
+Your job is to come up with an INSERTION into the text that the user would like to use, AS BEST YOU CAN.
+Only insert a SHORT segment. Usually 1 sentence, or at most 1 paragraph.
+
+Adjust yourself to the user's style and implied intent.
+
+
+The user will provide the text before and after the cursor, as well as the INSERTION prompt. You should use this to infer the best relevant insertion.
+The conversation will be structured as follows:
+<TextAfterCursor>
+<TextBeforeCursor>
+<InsertionPrompt>
+
+<YourInsertionSuggestion>
+`;
+};
+var defaultInsertionsFewShotMessages = [
+  {
+    role: "user",
+    name: "TextAfterCursor",
+    content: "While I was there I also picked up some apples, oranges, and bananas."
+  },
+  {
+    role: "user",
+    name: "TextBeforeCursor",
+    content: "This morning I woke up and went straight to the grocery store."
+  },
+  {
+    role: "user",
+    name: "InsertionPrompt",
+    content: "I bought a big watermelon"
+  },
+  {
+    role: "assistant",
+    content: " When I arrived I went straight to the produce section and picked out a big watermelon. "
+  },
+  {
+    role: "user",
+    name: "TextAfterCursor",
+    content: "and (iii) to the appointment of the Equityholders' Representative pursuant to Section 10.7 of the Merger Agreement and to the provisions thereof."
+  },
+  {
+    role: "user",
+    name: "TextBeforeCursor",
+    content: `The Optionholder, in the Optionholder's capacity as a holder of vested Options, hereby irrevocably and unconditionally agrees: (i) that the Optionholder shall be deemed an "Equityholder" under the Merger Agreement and shall be entitled to the rights and benefits, and subject to the obligations, of an "Equityholder" thereunder;`
+  },
+  {
+    role: "user",
+    name: "InsertionPrompt",
+    content: "add section about the optionholder's pro rata share"
+  },
+  {
+    role: "assistant",
+    content: ` (ii) that, for purposes of this Agreement and the Merger Agreement, the applicable percentage set forth opposite the name of the Optionholder in the Distribution Waterfall shall be such the Optionholder's "Pro Rata Share"; `
+  }
+];
+var defaultInsertionsApiConfig = {
+  makeSystemPrompt: defaultInsertionsMakeSystemPrompt,
+  fewShotMessages: defaultInsertionsFewShotMessages,
+  forwardedParams: void 0
+};
+
+// src/types/autosuggestions-config/editing-api-config.tsx
+var defaultEditingMakeSystemPrompt = (textareaPurpose, contextString) => {
+  return `You are a versatile writing assistant helping the user edit a portion of their text.
+  
+The user is writing some text.
+The purpose is: "${textareaPurpose}"
+
+The following external context is also provided. Use it when relevant.
+\`\`\`
+${contextString}
+\`\`\`
+
+The user has provided you with a PROMPT for EDITING a PORTION of the text. 
+Your job is to come up with a new EDITED version OF THE SEGMENT IN QUESTION - AS BEST YOU CAN.
+Only rewrite the portion of the text that the user has marked as "TextToEdit"!!!
+
+Adjust yourself to the user's style and implied intent.
+
+The conversation will be structured as follows:
+<TextBeforeCursor>
+<TextToEdit>
+<TextAfterCursor>
+<EditingPrompt>
+
+<YourEditSuggestion>
+`;
+};
+var defaultEditingFewShotMessages = [
+  {
+    role: "user",
+    name: "TextBeforeCursor",
+    content: "This morning I woke up and went straight to the grocery store. "
+  },
+  {
+    role: "user",
+    name: "TextToEdit",
+    content: "While I was there I picked up some apples, oranges, and bananas. "
+  },
+  {
+    role: "user",
+    name: "TextAfterCursor",
+    content: "The grocery store was having a sale on fruit, so I decided to stock up."
+  },
+  {
+    role: "user",
+    name: "EditingPrompt",
+    content: "I also bought a big watermelon"
+  },
+  {
+    role: "assistant",
+    content: "While I was there I picked up some apples, oranges, and bananas, and a big watermelon."
+  },
+  {
+    role: "user",
+    name: "TextBeforeCursor",
+    content: "Yesterday, I spent the afternoon working on my new project. "
+  },
+  {
+    role: "user",
+    name: "TextToEdit",
+    content: "It's quite challenging and requires a lot of focus. "
+  },
+  {
+    role: "user",
+    name: "TextAfterCursor",
+    content: "I'm really excited about the potential outcomes of this project."
+  },
+  {
+    role: "user",
+    name: "EditingPrompt",
+    content: "emphasize the complexity and my enthusiasm for the project"
+  },
+  {
+    role: "assistant",
+    content: "It's a highly complex task that demands intense concentration, but I'm incredibly enthusiastic about the promising prospects of this project."
+  }
+];
+var defaultEditingApiConfig = {
+  makeSystemPrompt: defaultEditingMakeSystemPrompt,
+  fewShotMessages: defaultEditingFewShotMessages,
+  forwardedParams: void 0
+};
+var defaultAutosuggestionsConfig = __spreadProps(__spreadValues({}, defaultBaseAutosuggestionsConfig), {
+  contextCategories: reactCore.defaultCopilotContextCategories,
+  chatApiConfigs: {
+    suggestionsApiConfig: defaultSuggestionsApiConfig,
+    insertionApiConfig: defaultInsertionsApiConfig,
+    editingApiConfig: defaultEditingApiConfig
+  }
+});
+
+exports.defaultAutosuggestionsConfig = defaultAutosuggestionsConfig;
+exports.defaultBaseAutosuggestionsConfig = defaultBaseAutosuggestionsConfig;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/types/base/base-autosuggestions-config.tsx","../../src/types/autosuggestions-config/suggestions-api-config.tsx","../../src/types/autosuggestions-config/insertions-api-config.tsx","../../src/types/autosuggestions-config/editing-api-config.tsx","../../src/types/autosuggestions-config/autosuggestions-config.tsx"],"names":["defaultCopilotContextCategories"],"mappings":"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","sourcesContent":["import { BaseCopilotTextareaApiConfig } from \"./autosuggestions-bare-function\";\nimport { defaultCopilotContextCategories } from \"@copilotkit/react-core\";\n\n/**\n * @interface BaseAutosuggestionsConfig\n *\n * @property {string} textareaPurpose - The purpose of the textarea. This is used to guide the autosuggestions.\n *\n * @property {string[]} contextCategories - The categories of context to consider when providing autosuggestions.\n *\n * @property {number} debounceTime - The amount of time (in milliseconds) to wait before triggering autosuggestions after the user has stopped typing.\n *\n * @property {BaseCopilotTextareaApiConfig} apiConfig - The configuration for the API that provides the autosuggestions.\n *\n * @property {boolean} disableWhenEmpty - Whether to disable autosuggestions when the textarea is empty.\n *\n * @property {boolean} disabled - Whether to disable autosuggestions entirely.\n *\n * @property {boolean} temporarilyDisableWhenMovingCursorWithoutChangingText - Whether to temporarily disable autosuggestions when the user moves the cursor without changing the text.\n *\n * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldAcceptAutosuggestionOnKeyPress - A function that determines whether to accept the current autosuggestion based on a key press event. By default, the Tab key is used to accept the autosuggestion. Example code:\n *\n * ```typescript\n * const defaultShouldAcceptAutosuggestionOnKeyPress =  (event: React.KeyboardEvent<HTMLDivElement>) => {\n *   // if tab, accept the autosuggestion\n *   if (event.key === \"Tab\") {\n *     return true;\n *   }\n *   return false;\n * }\n * ```\n *\n * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldToggleHoveringEditorOnKeyPress - A function that determines whether to toggle the hovering editor based on a key press event. By default, the Command + K key combination is used to toggle the hovering editor. Example code:\n *\n * ```typescript\n * const defaultShouldToggleHoveringEditorOnKeyPress =  (event: React.KeyboardEvent<HTMLDivElement>) => {\n *   // if command-k, toggle the hovering editor\n *   if (event.key === \"k\" && event.metaKey) {\n *     return true;\n *   }\n *   return false;\n * }\n * ```\n */\nexport interface BaseAutosuggestionsConfig {\n  textareaPurpose: string;\n  contextCategories: string[];\n  debounceTime: number;\n  apiConfig: BaseCopilotTextareaApiConfig;\n\n  disableWhenEmpty: boolean;\n  disabled: boolean;\n  temporarilyDisableWhenMovingCursorWithoutChangingText: boolean;\n  shouldAcceptAutosuggestionOnKeyPress: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;\n  shouldToggleHoveringEditorOnKeyPress: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;\n}\n\n// by default, command-k toggles the hovering editor\nconst defaultShouldToggleHoveringEditorOnKeyPress = (\n  event: React.KeyboardEvent<HTMLDivElement>,\n) => {\n  // if command-k, toggle the hovering editor\n  if (event.key === \"k\" && event.metaKey) {\n    return true;\n  }\n  return false;\n};\n\nconst defaultShouldAcceptAutosuggestionOnKeyPress = (\n  event: React.KeyboardEvent<HTMLDivElement>,\n) => {\n  // if tab, accept the autosuggestion\n  if (event.key === \"Tab\") {\n    return true;\n  }\n  return false;\n};\n\n/**\n * Default configuration for the BaseAutosuggestions.\n *\n * @property {number} debounceTime - The amount of time to wait before triggering the autosuggestions API call.\n * @property {string[]} contextCategories - The categories to use for context when making the autosuggestions API call.\n * @property {boolean} disableWhenEmpty - Whether to disable the autosuggestions when the textarea is empty.\n * @property {boolean} disabled - Whether to disable the autosuggestions feature entirely.\n * @property {boolean} temporarilyDisableWhenMovingCursorWithoutChangingText - Whether to temporarily disable the autosuggestions when the cursor is moved without changing the text.\n * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldToggleHoveringEditorOnKeyPress - A function that determines whether to toggle the hovering editor based on a key press event.\n * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldAcceptAutosuggestionOnKeyPress - A function that determines whether to accept the autosuggestion based on a key press event.\n */\n\nexport const defaultBaseAutosuggestionsConfig: Omit<\n  BaseAutosuggestionsConfig,\n  \"textareaPurpose\" | \"apiConfig\"\n> = {\n  debounceTime: 250,\n  contextCategories: defaultCopilotContextCategories,\n  disableWhenEmpty: true,\n  disabled: false,\n  temporarilyDisableWhenMovingCursorWithoutChangingText: true,\n  shouldToggleHoveringEditorOnKeyPress: defaultShouldToggleHoveringEditorOnKeyPress,\n  shouldAcceptAutosuggestionOnKeyPress: defaultShouldAcceptAutosuggestionOnKeyPress,\n};\n","import { MinimalChatGPTMessage } from \"./subtypes/minimal-chat-gpt-message\";\nimport { MakeSystemPrompt } from \"./subtypes/make-system-prompt\";\n\nexport interface SuggestionsApiConfig {\n  makeSystemPrompt: MakeSystemPrompt;\n  fewShotMessages: MinimalChatGPTMessage[];\n  forwardedParams: { [key: string]: any } | undefined;\n}\n\nexport const defaultSuggestionsMakeSystemPrompt: MakeSystemPrompt = (\n  textareaPurpose,\n  contextString,\n) => {\n  return `You are a versatile writing assistant.\n  \nThe user is writing some text.\nThe purpose is: \\\"${textareaPurpose}\\\"\n\nYour job is to guess what the user will write next AS BEST YOU CAN.\nOnly guess a SHORT distance ahead. Usually 1 sentence, or at most 1 paragraph.\n\nAdjust yourself to the user's style and implied intent.\n\nThe user will provide both the text before and after the cursor. You should use this to infer what the user is likely to write next.\n<TextAfterCursor>\n<TextBeforeCursor>\n<YourSuggestion>\n\nIf we need to add a whitespace character to the suggested text, make sure to explicitly add it in.\n\nThe following external context is also provided. Use it to help you make better suggestions!!!\n\\`\\`\\`\n${contextString}\n\\`\\`\\`\n`;\n};\n\nexport const defaultSuggestionsFewShotMessages: MinimalChatGPTMessage[] = [\n  {\n    role: \"user\",\n    name: \"TextAfterCursor\",\n    content: \"While I was there I also picked up some apples, oranges, and bananas.\",\n  },\n  {\n    role: \"user\",\n    content: \"This morning I woke up and went straight to the grocery store.\",\n  },\n  {\n    role: \"assistant\",\n    content:\n      \" When I arrived I went straight to the produce section and picked out a big watermelon. \",\n  },\n  {\n    role: \"user\",\n    name: \"TextAfterCursor\",\n    content:\n      \"and (iii) to the appointment of the Equityholders' Representative pursuant to Section 10.7 of the Merger Agreement and to the provisions thereof.\",\n  },\n  {\n    role: \"user\",\n    name: \"TextBeforeCursor\",\n    content:\n      'The Optionholder, in the Optionholder\\'s capacity as a holder of vested Options, hereby irrevocably and unconditionally agrees: (i) that the Optionholder shall be deemed an \"Equityholder\" under the Merger Agreement and shall be entitled to the rights and benefits, and subject to the obligations, of an \"Equityholder\" thereunder;',\n  },\n  {\n    role: \"assistant\",\n    content:\n      ' (ii) that, for purposes of this Agreement and the Merger Agreement, the applicable percentage set forth opposite the name of the Optionholder in the Distribution Waterfall shall be such the Optionholder\\'s \"Pro Rata Share\"; ',\n  },\n];\n\nexport const defaultSuggestionsApiConfig: SuggestionsApiConfig = {\n  makeSystemPrompt: defaultSuggestionsMakeSystemPrompt,\n  fewShotMessages: defaultSuggestionsFewShotMessages,\n  forwardedParams: undefined,\n};\n","import { MakeSystemPrompt } from \"./subtypes/make-system-prompt\";\nimport { MinimalChatGPTMessage } from \"./subtypes/minimal-chat-gpt-message\";\n\nexport interface InsertionsApiConfig {\n  makeSystemPrompt: MakeSystemPrompt;\n  fewShotMessages: MinimalChatGPTMessage[];\n  forwardedParams: { [key: string]: any } | undefined;\n}\n\nexport const defaultInsertionsMakeSystemPrompt: MakeSystemPrompt = (\n  textareaPurpose,\n  contextString,\n) => {\n  return `You are a versatile writing assistant helping the user insert new text into their existing work.\n  \nThe user is writing some text.\nThe purpose is: \\\"${textareaPurpose}\\\"\n\nThe following external context is also provided. Use it to inform your suggestions when relevant!!!\n\\`\\`\\`\n${contextString}\n\\`\\`\\`\n\nThe user will provide you with a prompt for an INSERTION into the text they are writing. \nYour job is to come up with an INSERTION into the text that the user would like to use, AS BEST YOU CAN.\nOnly insert a SHORT segment. Usually 1 sentence, or at most 1 paragraph.\n\nAdjust yourself to the user's style and implied intent.\n\n\nThe user will provide the text before and after the cursor, as well as the INSERTION prompt. You should use this to infer the best relevant insertion.\nThe conversation will be structured as follows:\n<TextAfterCursor>\n<TextBeforeCursor>\n<InsertionPrompt>\n\n<YourInsertionSuggestion>\n`;\n};\n\nexport const defaultInsertionsFewShotMessages: MinimalChatGPTMessage[] = [\n  {\n    role: \"user\",\n    name: \"TextAfterCursor\",\n    content: \"While I was there I also picked up some apples, oranges, and bananas.\",\n  },\n  {\n    role: \"user\",\n    name: \"TextBeforeCursor\",\n    content: \"This morning I woke up and went straight to the grocery store.\",\n  },\n  {\n    role: \"user\",\n    name: \"InsertionPrompt\",\n    content: \"I bought a big watermelon\",\n  },\n  {\n    role: \"assistant\",\n    content:\n      \" When I arrived I went straight to the produce section and picked out a big watermelon. \",\n  },\n  {\n    role: \"user\",\n    name: \"TextAfterCursor\",\n    content:\n      \"and (iii) to the appointment of the Equityholders' Representative pursuant to Section 10.7 of the Merger Agreement and to the provisions thereof.\",\n  },\n  {\n    role: \"user\",\n    name: \"TextBeforeCursor\",\n    content:\n      'The Optionholder, in the Optionholder\\'s capacity as a holder of vested Options, hereby irrevocably and unconditionally agrees: (i) that the Optionholder shall be deemed an \"Equityholder\" under the Merger Agreement and shall be entitled to the rights and benefits, and subject to the obligations, of an \"Equityholder\" thereunder;',\n  },\n  {\n    role: \"user\",\n    name: \"InsertionPrompt\",\n    content: \"add section about the optionholder's pro rata share\",\n  },\n  {\n    role: \"assistant\",\n    content:\n      ' (ii) that, for purposes of this Agreement and the Merger Agreement, the applicable percentage set forth opposite the name of the Optionholder in the Distribution Waterfall shall be such the Optionholder\\'s \"Pro Rata Share\"; ',\n  },\n];\n\nexport const defaultInsertionsApiConfig: InsertionsApiConfig = {\n  makeSystemPrompt: defaultInsertionsMakeSystemPrompt,\n  fewShotMessages: defaultInsertionsFewShotMessages,\n  forwardedParams: undefined,\n};\n","import { MakeSystemPrompt } from \"./subtypes/make-system-prompt\";\nimport { MinimalChatGPTMessage } from \"./subtypes/minimal-chat-gpt-message\";\n\nexport interface EditingApiConfig {\n  makeSystemPrompt: MakeSystemPrompt;\n  fewShotMessages: MinimalChatGPTMessage[];\n  forwardedParams: { [key: string]: any } | undefined;\n}\n\nexport const defaultEditingMakeSystemPrompt: MakeSystemPrompt = (\n  textareaPurpose,\n  contextString,\n) => {\n  return `You are a versatile writing assistant helping the user edit a portion of their text.\n  \nThe user is writing some text.\nThe purpose is: \\\"${textareaPurpose}\\\"\n\nThe following external context is also provided. Use it when relevant.\n\\`\\`\\`\n${contextString}\n\\`\\`\\`\n\nThe user has provided you with a PROMPT for EDITING a PORTION of the text. \nYour job is to come up with a new EDITED version OF THE SEGMENT IN QUESTION - AS BEST YOU CAN.\nOnly rewrite the portion of the text that the user has marked as \"TextToEdit\"!!!\n\nAdjust yourself to the user's style and implied intent.\n\nThe conversation will be structured as follows:\n<TextBeforeCursor>\n<TextToEdit>\n<TextAfterCursor>\n<EditingPrompt>\n\n<YourEditSuggestion>\n`;\n};\n\nexport const defaultEditingFewShotMessages: MinimalChatGPTMessage[] = [\n  {\n    role: \"user\",\n    name: \"TextBeforeCursor\",\n    content: \"This morning I woke up and went straight to the grocery store. \",\n  },\n  {\n    role: \"user\",\n    name: \"TextToEdit\",\n    content: \"While I was there I picked up some apples, oranges, and bananas. \",\n  },\n  {\n    role: \"user\",\n    name: \"TextAfterCursor\",\n    content: \"The grocery store was having a sale on fruit, so I decided to stock up.\",\n  },\n  {\n    role: \"user\",\n    name: \"EditingPrompt\",\n    content: \"I also bought a big watermelon\",\n  },\n  {\n    role: \"assistant\",\n    content:\n      \"While I was there I picked up some apples, oranges, and bananas, and a big watermelon.\",\n  },\n\n  {\n    role: \"user\",\n    name: \"TextBeforeCursor\",\n    content: \"Yesterday, I spent the afternoon working on my new project. \",\n  },\n  {\n    role: \"user\",\n    name: \"TextToEdit\",\n    content: \"It's quite challenging and requires a lot of focus. \",\n  },\n  {\n    role: \"user\",\n    name: \"TextAfterCursor\",\n    content: \"I'm really excited about the potential outcomes of this project.\",\n  },\n  {\n    role: \"user\",\n    name: \"EditingPrompt\",\n    content: \"emphasize the complexity and my enthusiasm for the project\",\n  },\n  {\n    role: \"assistant\",\n    content:\n      \"It's a highly complex task that demands intense concentration, but I'm incredibly enthusiastic about the promising prospects of this project.\",\n  },\n];\n\nexport const defaultEditingApiConfig: EditingApiConfig = {\n  makeSystemPrompt: defaultEditingMakeSystemPrompt,\n  fewShotMessages: defaultEditingFewShotMessages,\n  forwardedParams: undefined,\n};\n","import { BaseAutosuggestionsConfig, defaultBaseAutosuggestionsConfig } from \"../base\";\nimport { SuggestionsApiConfig, defaultSuggestionsApiConfig } from \"./suggestions-api-config\";\nimport { InsertionsApiConfig, defaultInsertionsApiConfig } from \"./insertions-api-config\";\nimport { EditingApiConfig, defaultEditingApiConfig } from \"./editing-api-config\";\nimport { defaultCopilotContextCategories } from \"@copilotkit/react-core\";\n\n// Like the base autosuggestions config, with 2 additional fields:\n// 1. contextCategories: string[] | undefined;\n// 2. instead of apiConfigs, we have chatApiConfigs: a higher-level abstraction that uses a ChatGPT-like API endpoint.\nexport interface AutosuggestionsConfig extends Omit<BaseAutosuggestionsConfig, \"apiConfig\"> {\n  contextCategories: string[];\n  chatApiConfigs: {\n    suggestionsApiConfig: SuggestionsApiConfig;\n    insertionApiConfig: InsertionsApiConfig;\n    editingApiConfig: EditingApiConfig;\n  };\n}\n\nexport const defaultAutosuggestionsConfig: Omit<\n  AutosuggestionsConfig,\n  \"textareaPurpose\" | \"apiEndpoint\"\n> = {\n  ...defaultBaseAutosuggestionsConfig,\n  contextCategories: defaultCopilotContextCategories,\n  chatApiConfigs: {\n    suggestionsApiConfig: defaultSuggestionsApiConfig,\n    insertionApiConfig: defaultInsertionsApiConfig,\n    editingApiConfig: defaultEditingApiConfig,\n  },\n};\n"]}

package/package.json

@@ -4,14 +4,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.27.2-alpha.0",
+  "version": "0.28.0-alpha.2",
   "sideEffects": [
     "**/*.css"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {
-    ".": "./dist/index.mjs",
+    ".": "./dist/index.js",
     "./styles.css": "./dist/index.css"
   },
   "types": "./dist/index.d.ts",
@@ -33,9 +33,9 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.1.3",
-    "eslint-config-custom": "0.2.0",
-    "tsconfig": "0.6.0",
-    "tailwind-config": "0.1.0"
+    "tailwind-config": "0.2.0-alpha.1",
+    "tsconfig": "0.7.0-alpha.1",
+    "eslint-config-custom": "0.3.0-alpha.1"
   },
   "dependencies": {
     "@emotion/css": "^11.11.2",
@@ -58,10 +58,11 @@
     "slate-history": "^0.93.0",
     "slate-react": "^0.98.1",
     "tailwind-merge": "^1.13.2",
-    "@copilotkit/react-core": "0.18.0-alpha.0"
+    "@copilotkit/react-core": "0.18.0-alpha.2",
+    "@copilotkit/shared": "0.2.0-alpha.1"
   },
   "scripts": {
-    "build": "tsup --treeshake",
+    "build": "tsup --treeshake --clean",
     "dev": "tsup --watch --no-splitting",
     "test": "jest",
     "check-types": "tsc --noEmit",

package/src/components/base-copilot-textarea/base-copilot-textarea.tsx

@@ -24,7 +24,6 @@ import {
   HoveringEditorProvider,
   useHoveringEditorContext,
 } from "../hovering-toolbar/hovering-editor-provider";
-import { EditorAutocompleteState } from "../../types/base/editor-autocomplete-state";
 import { TrackerTextEditedSinceLastCursorMovement } from "./track-cursor-moved-since-last-text-change";
 
 /**
@@ -65,7 +64,7 @@ export interface HTMLCopilotTextAreaElement extends HTMLElement {
  * for figuring out which contnet to fill in.
  */
 export const BaseCopilotTextarea = React.forwardRef(
-  (props: BaseCopilotTextareaProps, ref: React.Ref<HTMLCopilotTextAreaElement>): JSX.Element => {
+  (props: BaseCopilotTextareaProps, ref: React.Ref<HTMLCopilotTextAreaElement>) => {
     return (
       <HoveringEditorProvider>
         <BaseCopilotTextareaWithHoveringContext {...props} ref={ref} />
@@ -84,7 +83,7 @@ export const BaseCopilotTextarea = React.forwardRef(
  * and wrap it in a `HoveringEditorProviderContext` in `BaseCopilotTextarea`.
  */
 const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
-  (props: BaseCopilotTextareaProps, ref: React.Ref<HTMLCopilotTextAreaElement>): JSX.Element => {
+  (props: BaseCopilotTextareaProps, ref: React.Ref<HTMLCopilotTextAreaElement>) => {
     const autosuggestionsConfig: BaseAutosuggestionsConfig = {
       ...defaultBaseAutosuggestionsConfig,
       ...props.baseAutosuggestionsConfig,

package/src/components/base-copilot-textarea/render-placeholder.tsx

@@ -1,4 +1,4 @@
-import { RenderElementProps, RenderPlaceholderProps } from "slate-react";
+import { RenderPlaceholderProps } from "slate-react";
 
 export type RenderPlaceholderFunction = (props: RenderPlaceholderProps) => JSX.Element;
 

package/src/components/base-copilot-textarea/track-cursor-moved-since-last-text-change.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { BaseSelection } from "slate";
 import { useSlateSelector } from "slate-react";
 import { Range } from "slate";
@@ -9,7 +9,7 @@ interface TrackerTextEditedSinceLastCursorMovementProps {
 }
 export function TrackerTextEditedSinceLastCursorMovement(
   props: TrackerTextEditedSinceLastCursorMovementProps,
-): JSX.Element {
+) {
   const cursorState: RelevantEditorState = useSlateSelector((state) => ({
     selection: state.selection,
     text: editorToText(state),

package/src/components/copilot-textarea/copilot-textarea.tsx

@@ -23,7 +23,7 @@ export interface CopilotTextareaProps
  * A copilot textarea that uses the standard autosuggestions function.
  */
 export const CopilotTextarea = React.forwardRef(
-  (props: CopilotTextareaProps, ref: React.Ref<HTMLCopilotTextAreaElement>): JSX.Element => {
+  (props: CopilotTextareaProps, ref: React.Ref<HTMLCopilotTextAreaElement>) => {
     // separate the AutosuggestionsConfigUserSpecified from the rest of the props
     const { autosuggestionsConfig: autosuggestionsConfigUserSpecified, ...forwardedProps } = props;
 

package/src/components/hovering-toolbar/hovering-editor-provider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useContext, ReactNode } from "react";
+import { createContext, useState, useContext, ReactNode } from "react";
 
 interface HoveringEditorContextProps {
   isDisplayed: boolean;
@@ -18,7 +18,7 @@ export interface HoveringEditorProviderProps {
  * A context provider for the hovering editor over the `CopilotTextarea`
  * (used to edit and insert text into the `CopilotTextarea`).
  */
-export const HoveringEditorProvider: React.FC<HoveringEditorProviderProps> = ({ children }) => {
+export const HoveringEditorProvider = ({ children }: HoveringEditorProviderProps) => {
   const [isDisplayed, setIsDisplayed] = useState<boolean>(false);
 
   return (

package/src/components/hovering-toolbar/hovering-toolbar.tsx

@@ -1,9 +1,8 @@
-import { css } from "@emotion/css";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { BaseSelection, Editor, Range, Location, Transforms } from "slate";
+import { useEffect, useRef, useState } from "react";
+import { Editor, Location, Transforms } from "slate";
 import { useSlate, useSlateSelection } from "slate-react";
 import { HoveringInsertionPromptBox } from "./text-insertion-prompt-box";
-import { Button, Icon, Menu, Portal } from "./hovering-toolbar-components";
+import { Menu, Portal } from "./hovering-toolbar-components";
 import { useHoveringEditorContext } from "./hovering-editor-provider";
 import {
   getFullEditorTextWithNewlines,
@@ -20,7 +19,7 @@ export interface HoveringToolbarProps {
   hoverMenuClassname: string | undefined;
 }
 
-export const HoveringToolbar: (props: HoveringToolbarProps) => JSX.Element | null = (props) => {
+export const HoveringToolbar = (props: HoveringToolbarProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const editor = useSlate();
   const selection = useSlateSelection();

package/src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx

@@ -1,5 +1,4 @@
 import useAutosizeTextArea from "../../../hooks/misc/use-autosize-textarea";
-import { MinimalChatGPTMessage } from "../../../types";
 import {
   EditingEditorState,
   Generator_InsertionOrEditingSuggestion,
@@ -8,7 +7,7 @@ import { SourceSearchBox } from "../../source-search-box/source-search-box";
 import { DocumentPointer } from "@copilotkit/react-core";
 import { Button } from "../../ui/button";
 import { Label } from "../../ui/label";
-import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 
 import { streamPromiseFlatten } from "../../../lib/stream-promise-flatten";
 import { CopilotContext } from "@copilotkit/react-core";
@@ -25,12 +24,12 @@ export interface HoveringInsertionPromptBoxCoreProps {
   contextCategories: string[];
 }
 
-export const HoveringInsertionPromptBoxCore: React.FC<HoveringInsertionPromptBoxCoreProps> = ({
+export const HoveringInsertionPromptBoxCore = ({
   performInsertion,
   state,
   insertionOrEditingFunction,
   contextCategories,
-}) => {
+}: HoveringInsertionPromptBoxCoreProps) => {
   const { getDocumentsContext } = useContext(CopilotContext);
 
   const [editSuggestion, setEditSuggestion] = useState<string>("");
@@ -57,7 +56,13 @@ export const HoveringInsertionPromptBoxCore: React.FC<HoveringInsertionPromptBox
 
   // initially focus on the adjustment prompt text area
   useEffect(() => {
-    adjustmentTextAreaRef.current?.focus();
+    // Focus in the next tick, making sure the adjustment prompt text area is rendered
+    // TODO: This happens in Safari, but not in Chrome. Need to look further into this,
+    // because focus() should not throw IndexSizeError.
+    // this fixes https://github.com/CopilotKit/CopilotKit/issues/171
+    setTimeout(() => {
+      adjustmentTextAreaRef.current?.focus();
+    }, 0);
   }, []);
 
   // continuously read the generating suggestion stream and update the edit suggestion

package/src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box.tsx

@@ -1,4 +1,3 @@
-import React, { useCallback, useState } from "react";
 import { HoveringInsertionPromptBoxCore } from "./hovering-insertion-prompt-box-core";
 import {
   EditingEditorState,
@@ -13,7 +12,7 @@ export interface Props {
   contextCategories: string[];
 }
 
-export const HoveringInsertionPromptBox: React.FC<Props> = (props) => {
+export const HoveringInsertionPromptBox = (props: Props) => {
   return (
     <div
       className="flex flex-col justify-center items-center space-y-4 rounded-md border shadow-lg p-4 border-gray- bg-white"

package/src/components/hovering-toolbar/text-insertion-prompt-box/included-files-preview.tsx

@@ -9,10 +9,10 @@ export interface IncludedFilesPreviewProps {
   setIncludedFiles: React.Dispatch<React.SetStateAction<DocumentPointer[]>>;
 }
 
-export const IncludedFilesPreview: React.FC<IncludedFilesPreviewProps> = ({
+export const IncludedFilesPreview = ({
   includedFiles,
   setIncludedFiles,
-}) => {
+}: IncludedFilesPreviewProps) => {
   return (
     <div className="flex flex-col gap-2 mt-2">
       <Label className="">Included context:</Label>
@@ -33,12 +33,12 @@ export const IncludedFilesPreview: React.FC<IncludedFilesPreviewProps> = ({
   );
 };
 
-export interface FileChipPreviewProp {
+export interface FileChipPreviewProps {
   filePointer: DocumentPointer;
   onDelete: () => void;
 }
 
-export const FileChipPreview: React.FC<FileChipPreviewProp> = ({ filePointer, onDelete }) => {
+export const FileChipPreview = ({ filePointer, onDelete }: FileChipPreviewProps) => {
   return (
     <Chip
       label={filePointer.name}

package/src/components/manual-ui/chip-with-icon.tsx

@@ -1,12 +1,10 @@
-import React from "react";
-
 export interface ChipWithIconProps {
   label: string;
   onDelete: () => void;
   iconUrl: string;
 }
 
-export const ChipWithIcon: React.FC<ChipWithIconProps> = ({ label, onDelete, iconUrl }) => {
+export const ChipWithIcon = ({ label, onDelete, iconUrl }: ChipWithIconProps) => {
   return (
     <span className="inline-flex items-center px-3 py-1 rounded-full bg-slate-200 text-sm font-medium text-white">
       {iconUrl && <img src={iconUrl} alt="icon" className="w-4 h-4 rounded-full mr-2" />}

package/src/hooks/make-autosuggestions-function/use-make-standard-autosuggestions-function.tsx

@@ -1,10 +1,11 @@
-import { CopilotContext, Message } from "@copilotkit/react-core";
+import { Message } from "@copilotkit/shared";
+import { CopilotContext } from "@copilotkit/react-core";
 import { useCallback, useContext } from "react";
 import { AutosuggestionsBareFunction, MinimalChatGPTMessage } from "../../types";
 import { retry } from "../../lib/retry";
 import { InsertionEditorState } from "../../types/base/autosuggestions-bare-function";
 import { SuggestionsApiConfig } from "../../types/autosuggestions-config/suggestions-api-config";
-import { ChatCompletionStream } from "@copilotkit/react-core";
+import { fetchAndDecodeChatCompletionAsText } from "@copilotkit/react-core";
 
 /**
  * Returns a memoized function that sends a request to the specified API endpoint to get an autosuggestion for the user's input.
@@ -50,21 +51,20 @@ export function useMakeStandardAutosuggestionFunction(
           },
         ];
 
-        const chatCompletionStream = new ChatCompletionStream({
-          url: copilotApiConfig.chatApiEndpoint,
-        });
-
-        const stream = await chatCompletionStream.fetch({
+        const response = await fetchAndDecodeChatCompletionAsText({
           messages: messages as Message[],
           ...apiConfig.forwardedParams,
           copilotConfig: copilotApiConfig,
           signal: abortSignal,
         });
 
-        // read the stream:
-        const reader = stream.getReader();
-        let result = "";
+        if (!response.events) {
+          throw new Error("Failed to fetch chat completion");
+        }
 
+        const reader = response.events.getReader();
+
+        let result = "";
         while (!abortSignal.aborted) {
           const { done, value } = await reader.read();
           if (done) {
@@ -72,7 +72,6 @@ export function useMakeStandardAutosuggestionFunction(
           }
           result += value;
         }
-
         return result;
       });