@copilotkit/react-textarea 0.37.0 → 0.38.0-beta.0

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.37.0",
+  "version": "0.38.0-beta.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -38,9 +38,9 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
-    "eslint-config-custom": "0.12.0",
-    "tailwind-config": "0.11.0",
-    "tsconfig": "0.16.0"
+    "eslint-config-custom": "0.13.0-beta.0",
+    "tailwind-config": "0.12.0-beta.0",
+    "tsconfig": "0.17.0-beta.0"
   },
   "dependencies": {
     "@emotion/css": "^11.11.2",
@@ -63,8 +63,9 @@
     "slate-history": "^0.93.0",
     "slate-react": "^0.98.1",
     "tailwind-merge": "^1.13.2",
-    "@copilotkit/react-core": "0.37.0",
-    "@copilotkit/shared": "0.37.0"
+    "@copilotkit/react-core": "0.38.0-beta.0",
+    "@copilotkit/runtime-client-gql": "0.38.0-beta.0",
+    "@copilotkit/shared": "0.38.0-beta.0"
   },
   "scripts": {
     "build": "tsup --clean",

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

@@ -134,9 +134,11 @@ const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
       currentAutocompleteSuggestion,
       onChangeHandler: onChangeHandlerForAutocomplete,
       onKeyDownHandler: onKeyDownHandlerForAutocomplete,
+      onTouchStartHandler: onTouchStartHandlerForAutocomplete,
     } = useAutosuggestions(
       autosuggestionsConfig.debounceTime,
       autosuggestionsConfig.shouldAcceptAutosuggestionOnKeyPress,
+      autosuggestionsConfig.shouldAcceptAutosuggestionOnTouch,
       autosuggestionsConfig.apiConfig.autosuggestionsFunction,
       insertText,
       autosuggestionsConfig.disableWhenEmpty,
@@ -271,6 +273,9 @@ const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
             onKeyDownHandlerForAutocomplete(event); // forward the event for internal use
             props.onKeyDown?.(event); // forward the event for external use
           }}
+          onTouchStart={(event) => {
+            onTouchStartHandlerForAutocomplete(event); // forward the event for internal use
+          }}
           className={moddedClassName}
           onBlur={(ev) => {
             // clear autocompletion on blur

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

@@ -107,7 +107,7 @@ export interface CopilotTextareaProps
    *      // use this to provide a custom system prompt
    *      makeSystemPrompt: (textareaPurpose: string, contextString: string) => string;
    *      // custom few shot messages
-   *      fewShotMessages: MinimalChatGPTMessage[];
+   *      fewShotMessages: Message[];
    *      forwardedParams: {
    *        // max number of tokens to generate
    *        max_tokens: number,

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

@@ -120,7 +120,6 @@ export const HoveringToolbar = (props: HoveringToolbarProps) => {
               setIsDisplayed(false);
             }}
             performInsertion={(insertedText) => {
-              console.log("inserted text", insertedText);
               // replace the selection with the inserted text
               Transforms.delete(editor, { at: selection });
               Transforms.insertText(editor, insertedText, {

package/src/hooks/base-copilot-textarea-implementation/use-autosuggestions.ts

@@ -12,11 +12,13 @@ export interface UseAutosuggestionsResult {
   currentAutocompleteSuggestion: AutosuggestionState | null;
   onChangeHandler: (newEditorState: EditorAutocompleteState | null) => void;
   onKeyDownHandler: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+  onTouchStartHandler: (event: React.TouchEvent<HTMLDivElement>) => void;
 }
 
 export function useAutosuggestions(
   debounceTime: number,
   shouldAcceptAutosuggestionOnKeyPress: (event: React.KeyboardEvent<HTMLDivElement>) => boolean,
+  shouldAcceptAutosuggestionOnTouch: (event: React.TouchEvent<HTMLDivElement>) => boolean,
   autosuggestionFunction: AutosuggestionsBareFunction,
   insertAutocompleteSuggestion: (suggestion: AutosuggestionState) => void,
   disableWhenEmpty: boolean,
@@ -108,10 +110,14 @@ export function useAutosuggestions(
     ],
   );
 
-  const keyDownHandler = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+  const keyDownOrTouchHandler = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {
       if (currentAutocompleteSuggestion) {
-        if (shouldAcceptAutosuggestionOnKeyPress(event)) {
+        const shouldAcceptSuggestion =
+          event instanceof KeyboardEvent
+            ? shouldAcceptAutosuggestionOnKeyPress(event as React.KeyboardEvent<HTMLDivElement>)
+            : shouldAcceptAutosuggestionOnTouch(event as React.TouchEvent<HTMLDivElement>);
+        if (shouldAcceptSuggestion) {
           event.preventDefault();
           insertAutocompleteSuggestion(currentAutocompleteSuggestion);
           setCurrentAutocompleteSuggestion(null);
@@ -129,6 +135,7 @@ export function useAutosuggestions(
   return {
     currentAutocompleteSuggestion,
     onChangeHandler: onChange,
-    onKeyDownHandler: keyDownHandler,
+    onKeyDownHandler: keyDownOrTouchHandler,
+    onTouchStartHandler: keyDownOrTouchHandler,
   };
 }

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

@@ -1,11 +1,19 @@
-import { COPILOT_CLOUD_PUBLIC_API_KEY_HEADER, Message } from "@copilotkit/shared";
+import { COPILOT_CLOUD_PUBLIC_API_KEY_HEADER } from "@copilotkit/shared";
 import { CopilotContext } from "@copilotkit/react-core";
 import { useCallback, useContext } from "react";
-import { AutosuggestionsBareFunction, MinimalChatGPTMessage } from "../../types";
+import { AutosuggestionsBareFunction } 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 { fetchAndDecodeChatCompletionAsText } from "@copilotkit/react-core";
+import {
+  CopilotRuntimeClient,
+  Message,
+  Role,
+  TextMessage,
+  convertGqlOutputToMessages,
+  convertMessagesToGqlInput,
+} from "@copilotkit/runtime-client-gql";
+import { nanoid } from "nanoid";
 
 /**
  * Returns a memoized function that sends a request to the specified API endpoint to get an autosuggestion for the user's input.
@@ -34,49 +42,61 @@ export function useMakeStandardAutosuggestionFunction(
   return useCallback(
     async (editorState: InsertionEditorState, abortSignal: AbortSignal) => {
       const res = await retry(async () => {
-        const messages: MinimalChatGPTMessage[] = [
-          {
-            role: "system",
+        const messages: Message[] = [
+          new TextMessage({
+            role: Role.System,
             content: apiConfig.makeSystemPrompt(
               textareaPurpose,
               getContextString([], contextCategories),
             ),
-          },
+          }),
           ...apiConfig.fewShotMessages,
-          {
-            role: "user",
-            name: "TextAfterCursor",
+          new TextMessage({
+            role: Role.User,
             content: editorState.textAfterCursor,
-          },
-          {
-            role: "user",
-            name: "TextBeforeCursor",
-            content: editorState.textBeforeCursor,
-          },
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`,
+          }),
         ];
 
-        const response = await fetchAndDecodeChatCompletionAsText({
-          messages: messages as Message[],
-          ...apiConfig.forwardedParams,
-          copilotConfig: copilotApiConfig,
-          signal: abortSignal,
-          headers: headers,
+        const runtimeClient = new CopilotRuntimeClient({
+          url: copilotApiConfig.chatApiEndpoint,
+          publicApiKey: copilotApiConfig.publicApiKey,
+          headers: copilotApiConfig.headers,
         });
 
-        if (!response.events) {
-          throw new Error("Failed to fetch chat completion");
-        }
-
-        const reader = response.events.getReader();
+        const response = await runtimeClient
+          .generateCopilotResponse(
+            {
+              frontend: {
+                actions: [],
+              },
+              messages: convertMessagesToGqlInput(messages),
+            },
+            copilotApiConfig.properties,
+            abortSignal,
+          )
+          .toPromise();
 
         let result = "";
-        while (!abortSignal.aborted) {
-          const { done, value } = await reader.read();
-          if (done) {
+        for (const message of convertGqlOutputToMessages(
+          response.data?.generateCopilotResponse?.messages ?? [],
+        )) {
+          if (abortSignal.aborted) {
             break;
           }
-          result += value;
+          if (message instanceof TextMessage) {
+            result += message.content;
+            console.log(message.content);
+          }
         }
+
         return result;
       });
 

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

@@ -1,18 +1,23 @@
-import { COPILOT_CLOUD_PUBLIC_API_KEY_HEADER, Message } from "@copilotkit/shared";
+import { COPILOT_CLOUD_PUBLIC_API_KEY_HEADER } from "@copilotkit/shared";
 import { CopilotContext } from "@copilotkit/react-core";
 import { useCallback, useContext } from "react";
-import { MinimalChatGPTMessage } from "../../types";
+import {
+  CopilotRuntimeClient,
+  Message,
+  Role,
+  TextMessage,
+  convertGqlOutputToMessages,
+  convertMessagesToGqlInput,
+} from "@copilotkit/runtime-client-gql";
 import { retry } from "../../lib/retry";
 import {
   EditingEditorState,
   Generator_InsertionOrEditingSuggestion,
-  InsertionEditorApiConfig,
-  InsertionEditorState,
 } from "../../types/base/autosuggestions-bare-function";
 import { InsertionsApiConfig } from "../../types/autosuggestions-config/insertions-api-config";
 import { EditingApiConfig } from "../../types/autosuggestions-config/editing-api-config";
 import { DocumentPointer } from "@copilotkit/react-core";
-import { fetchAndDecodeChatCompletionAsText } from "@copilotkit/react-core";
+import { nanoid } from "nanoid";
 
 /**
  * Returns a memoized function that sends a request to the specified API endpoint to get an autosuggestion for the user's input.
@@ -40,6 +45,48 @@ export function useMakeStandardInsertionOrEditingFunction(
       : {}),
   };
 
+  const runtimeClient = new CopilotRuntimeClient({
+    url: copilotApiConfig.chatApiEndpoint,
+    publicApiKey: copilotApiConfig.publicApiKey,
+    headers,
+  });
+
+  async function runtimeClientResponseToStringStream(
+    responsePromise: ReturnType<typeof runtimeClient.generateCopilotResponse>,
+  ) {
+    const messagesStream = await CopilotRuntimeClient.asStream(responsePromise);
+
+    return new ReadableStream({
+      async start(controller) {
+        const reader = messagesStream.getReader();
+        let sentContent = "";
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            break;
+          }
+
+          const messages = convertGqlOutputToMessages(value.generateCopilotResponse.messages);
+
+          let newContent = "";
+
+          for (const message of messages) {
+            if (message instanceof TextMessage) {
+              newContent += message.content;
+            }
+          }
+          if (newContent) {
+            const contentToSend = newContent.slice(sentContent.length);
+            controller.enqueue(contentToSend);
+            sentContent += contentToSend;
+          }
+        }
+        controller.close();
+      },
+    });
+  }
+
   const insertionFunction = useCallback(
     async (
       editorState: EditingEditorState,
@@ -48,40 +95,41 @@ export function useMakeStandardInsertionOrEditingFunction(
       abortSignal: AbortSignal,
     ) => {
       const res = await retry(async () => {
-        const messages: MinimalChatGPTMessage[] = [
-          {
-            role: "system",
+        const messages: Message[] = [
+          new TextMessage({
+            role: Role.System,
             content: insertionApiConfig.makeSystemPrompt(
               textareaPurpose,
               getContextString(documents, contextCategories),
             ),
-          },
+          }),
           ...insertionApiConfig.fewShotMessages,
-          {
-            role: "user",
-            name: "TextAfterCursor",
-            content: editorState.textAfterCursor,
-          },
-          {
-            role: "user",
-            name: "TextBeforeCursor",
-            content: editorState.textBeforeCursor,
-          },
-          {
-            role: "user",
-            name: "InsertionPrompt",
-            content: insertionPrompt,
-          },
+          new TextMessage({
+            role: Role.User,
+            content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<InsertionPrompt>${insertionPrompt}</InsertionPrompt>`,
+          }),
         ];
 
-        const stream = await fetchAndDecodeChatCompletionAsText({
-          messages: messages as Message[],
-          ...insertionApiConfig.forwardedParams,
-          copilotConfig: copilotApiConfig,
-          signal: abortSignal,
-          headers,
-        });
-        return stream.events!;
+        return runtimeClientResponseToStringStream(
+          runtimeClient.generateCopilotResponse(
+            {
+              frontend: {
+                actions: [],
+              },
+              messages: convertMessagesToGqlInput(messages),
+            },
+            copilotApiConfig.properties,
+            abortSignal,
+          ),
+        );
       });
 
       return res;
@@ -97,45 +145,51 @@ export function useMakeStandardInsertionOrEditingFunction(
       abortSignal: AbortSignal,
     ) => {
       const res = await retry(async () => {
-        const messages: MinimalChatGPTMessage[] = [
-          {
-            role: "system",
+        const messages: Message[] = [
+          new TextMessage({
+            role: Role.System,
             content: editingApiConfig.makeSystemPrompt(
               textareaPurpose,
               getContextString(documents, contextCategories),
             ),
-          },
+          }),
           ...editingApiConfig.fewShotMessages,
-          {
-            role: "user",
-            name: "TextBeforeCursor",
-            content: editorState.textBeforeCursor,
-          },
-          {
-            role: "user",
-            name: "TextToEdit",
-            content: editorState.selectedText,
-          },
-          {
-            role: "user",
-            name: "TextAfterCursor",
-            content: editorState.textAfterCursor,
-          },
-          {
-            role: "user",
-            name: "EditingPrompt",
-            content: editingPrompt,
-          },
+          new TextMessage({
+            role: Role.User,
+            content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<TextToEdit>${editorState.selectedText}</TextToEdit>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<EditingPrompt>${editingPrompt}</EditingPrompt>`,
+          }),
         ];
 
-        const stream = await fetchAndDecodeChatCompletionAsText({
-          messages: messages as Message[],
-          ...editingApiConfig.forwardedParams,
-          copilotConfig: copilotApiConfig,
-          signal: abortSignal,
+        const runtimeClient = new CopilotRuntimeClient({
+          url: copilotApiConfig.chatApiEndpoint,
+          publicApiKey: copilotApiConfig.publicApiKey,
           headers,
         });
-        return stream.events!;
+
+        return runtimeClientResponseToStringStream(
+          runtimeClient.generateCopilotResponse(
+            {
+              frontend: {
+                actions: [],
+              },
+              messages: convertMessagesToGqlInput(messages),
+            },
+            copilotApiConfig.properties,
+            abortSignal,
+          ),
+        );
       });
 
       return res;

package/src/types/autosuggestions-config/editing-api-config.tsx

@@ -1,9 +1,10 @@
+import { Message, Role, TextMessage } from "@copilotkit/runtime-client-gql";
 import { MakeSystemPrompt } from "./subtypes/make-system-prompt";
-import { MinimalChatGPTMessage } from "./subtypes/minimal-chat-gpt-message";
+import { nanoid } from "nanoid";
 
 export interface EditingApiConfig {
   makeSystemPrompt: MakeSystemPrompt;
-  fewShotMessages: MinimalChatGPTMessage[];
+  fewShotMessages: Message[];
   forwardedParams: { [key: string]: any } | undefined;
 }
 
@@ -37,58 +38,56 @@ The conversation will be structured as follows:
 `;
 };
 
-export const defaultEditingFewShotMessages: MinimalChatGPTMessage[] = [
-  {
-    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",
+export const defaultEditingFewShotMessages: Message[] = [
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextBeforeCursor>This morning I woke up and went straight to the grocery store. </TextBeforeCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextToEdit>While I was there I picked up some apples, oranges, and bananas. </TextToEdit>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextAfterCursor>The grocery store was having a sale on fruit, so I decided to stock up.</TextAfterCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content: "<EditingPrompt>I also bought a big watermelon</EditingPrompt>",
+  }),
+  new TextMessage({
+    role: 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",
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextBeforeCursor>Yesterday, I spent the afternoon working on my new project.</TextBeforeCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content: "<TextToEdit>It's quite challenging and requires a lot of focus.</TextToEdit>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextAfterCursor>I'm really excited about the potential outcomes of this project.</TextAfterCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<EditingPrompt>emphasize the complexity and my enthusiasm for the project</EditingPrompt>",
+  }),
+  new TextMessage({
+    role: 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.",
-  },
+  }),
 ];
 
 export const defaultEditingApiConfig: EditingApiConfig = {

package/src/types/autosuggestions-config/index.ts

@@ -1,7 +1,6 @@
 export { defaultAutosuggestionsConfig } from "./autosuggestions-config";
 export type { AutosuggestionsConfig } from "./autosuggestions-config";
 
-export type { MinimalChatGPTMessage } from "./subtypes/minimal-chat-gpt-message";
 export type { MakeSystemPrompt } from "./subtypes/make-system-prompt";
 
 export type { AutosuggestionsConfigUserSpecified } from "./autosuggestions-config-user-specified";