fix: add backwards compatibility with new Headless UI implementation (CopilotKit#2260)

Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>

Author: tylerslaton

CopilotKit/.changeset/shy-shirts-beam.md

@@ -0,0 +1,25 @@
+---
+"@copilotkit/react-core": patch
+"@copilotkit/react-ui": patch
+"@copilotkit/shared": patch
+---
+
+- fix: address issues that would cause headless UI breaking changes in the next release
+
+Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
+
+- fix: more fixes addressing breaking changes in new Headless UI
+
+Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
+
+- chore: address linting issues
+
+Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
+
+- chore: fixing branding and docs
+
+Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
+
+- chore: more docs fixing
+
+Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>

CopilotKit/examples/next-openai/src/app/components/vacation-list.tsx

@@ -9,8 +9,7 @@ import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
 import { useEffect, useState } from "react";
 import { DestinationTable } from "./destination-table";
 import { VacationNotes } from "./vacation-notes";
-import { Role } from "@copilotkit/shared";
-import { randomId } from "@copilotkit/shared";
+import { MessageRole, TextMessage } from "@copilotkit/runtime-client-gql";
 
 export type Destination = {
   name: string;
@@ -141,14 +140,11 @@ export function VacationList() {
    */
   useEffect(() => {
     appendMessage(
-      {
-        id: randomId(),
-        role: "assistant",
+      new TextMessage({
+        role: MessageRole.Assistant,
         content: "Hi you! 👋 Let's book your next vacation. Ask me anything.",
-      },
-      {
-        followUp: false,
-      },
+      }),
+      { followUp: false },
     );
   }, []);
 

CopilotKit/examples/next-openai/src/app/headless/page.tsx

@@ -4,7 +4,7 @@ import {
   CopilotKit,
   useCoAgentStateRender,
   useCopilotAction,
-  useCopilotChat,
+  useCopilotChatHeadless_c,
   useLangGraphInterrupt,
 } from "@copilotkit/react-core";
 import { CopilotSidebar, useCopilotChatSuggestions } from "@copilotkit/react-ui";
@@ -104,14 +104,14 @@ function ScrollToBottomButton() {
 
 function ChatApp() {
   const {
-    visibleMessages,
+    messages,
     suggestions,
     setSuggestions,
-    appendMessage,
+    sendMessage,
     interrupt,
     isLoading,
     generateSuggestions,
-  } = useCopilotChat();
+  } = useCopilotChatHeadless_c();
   const [newMessage, setNewMessage] = useState("");
   const [selectedMessage, setSelectedMessage] = useState<any>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -290,10 +290,10 @@ function ChatApp() {
     maxSuggestions: 5,
   });
 
-  const sendMessage = useCallback(
+  const callSendMessage = useCallback(
     async (message: string) => {
       // setSuggestions([]);
-      await appendMessage(
+      await sendMessage(
         {
           id: randomId(),
           role: "user",
@@ -304,7 +304,7 @@ function ChatApp() {
         },
       );
     },
-    [appendMessage, setSuggestions, generateSuggestions],
+    [sendMessage, setSuggestions, generateSuggestions],
   );
 
   useEffect(() => {
@@ -318,13 +318,13 @@ function ChatApp() {
 
   const handleSendMessage = useCallback(() => {
     if (newMessage.trim()) {
-      sendMessage(newMessage);
+      callSendMessage(newMessage);
       setNewMessage("");
       if (textareaRef.current) {
         textareaRef.current.style.height = "auto";
       }
     }
-  }, [sendMessage, newMessage]);
+  }, [callSendMessage, newMessage]);
 
   const handleShowDetails = useCallback((message: any) => {
     setSelectedMessage(message);
@@ -350,7 +350,7 @@ function ChatApp() {
             {/* Messages */}
             <div className="flex-1 overflow-y-auto">
               <StickToBottom.Content className="flex flex-col h-full">
-                {visibleMessages.length === 0 ? (
+                {messages.length === 0 ? (
                   <div className="flex-1 flex items-center justify-center h-full">
                     <div className="text-center">
                       <div className="text-4xl mb-4">💬</div>
@@ -364,7 +364,7 @@ function ChatApp() {
                   </div>
                 ) : (
                   <div className="max-w-4xl mx-auto w-full px-4 py-8">
-                    {visibleMessages.map((message) => (
+                    {messages.map((message) => (
                       <div
                         key={message.id}
                         className={`mb-8 ${message.role === "user" ? "text-right" : "text-left"}`}
@@ -575,7 +575,7 @@ function ChatApp() {
                     {suggestions.map((suggestion, index) => (
                       <button
                         key={index}
-                        onClick={() => sendMessage(suggestion.message)}
+                        onClick={() => callSendMessage(suggestion.message)}
                         className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium transition-all duration-200"
                       >
                         {suggestion.title}

CopilotKit/examples/next-openai/src/app/multi/page.tsx

@@ -4,7 +4,7 @@ import { CopilotChat } from "@copilotkit/react-ui";
 import "./styles.css";
 import { CopilotKit, useCopilotAction, useCopilotChat } from "@copilotkit/react-core";
 import { useSearchParams } from "next/navigation";
-import { MessageRole, TextMessage } from "@copilotkit/runtime-client-gql";
+import { MessageRole, TextMessage, Message } from "@copilotkit/runtime-client-gql";
 import { randomId } from "@copilotkit/shared";
 
 const testMessages = [
@@ -123,14 +123,12 @@ function TravelPlanner() {
     },
     handler: async () => {
       appendMessage(
-        {
+        new TextMessage({
           id: randomId(),
-          role: "assistant",
+          role: MessageRole.Assistant,
           content: "What is the weather in San Francisco?",
-        },
-        {
-          followUp: false,
-        },
+        }),
+        { followUp: false },
       );
     },
   });
@@ -155,11 +153,13 @@ function TravelPlanner() {
             <button
               className="bg-blue-500 text-white p-2 rounded-md"
               onClick={() =>
-                appendMessage({
-                  id: randomId(),
-                  role: "user",
-                  content: testMessage.message,
-                })
+                appendMessage(
+                  new TextMessage({
+                    id: randomId(),
+                    role: MessageRole.User,
+                    content: testMessage.message,
+                  }),
+                )
               }
             >
               {testMessage.name}

CopilotKit/packages/react-core/src/components/usage-banner.tsx

@@ -4,10 +4,11 @@ import {
   ErrorVisibility,
   CopilotKitErrorCode,
 } from "@copilotkit/shared";
+import React from "react";
 
 interface UsageBannerProps {
   severity?: Severity;
-  message?: string;
+  message?: string | React.ReactNode;
   onClose?: () => void;
   actions?: {
     primary?: {
@@ -219,9 +220,13 @@ export const getErrorActions = (error: CopilotKitError) => {
     case CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR:
       return {
         primary: {
-          label: "Get Free API Key",
+          label: "Show me how",
           onClick: () =>
-            window.open("https://cloud.copilotkit.ai", "_blank", "noopener,noreferrer"),
+            window.open(
+              "https://docs.copilotkit.ai/docs/guides/subscription",
+              "_blank",
+              "noopener,noreferrer",
+            ),
         },
       };
     case CopilotKitErrorCode.UPGRADE_REQUIRED_ERROR:

CopilotKit/packages/react-core/src/hooks/index.ts

@@ -1,12 +1,11 @@
 export { useCopilotChat } from "./use-copilot-chat";
-export type { UseCopilotChatOptions } from "./use-copilot-chat";
 export type { UseCopilotChatReturn } from "./use-copilot-chat";
-
-export { useCopilotChatLight } from "./use-copilot-chat-light";
-export type {
-  UseCopilotChatLightOptions,
-  UseCopilotChatLightReturn,
-} from "./use-copilot-chat-light";
+export type { UseCopilotChatOptions } from "./use-copilot-chat_internal";
+export {
+  type UseCopilotChatReturn_c,
+  type UseCopilotChatOptions_c,
+  useCopilotChatHeadless_c,
+} from "./use-copilot-chat-headless_c";
 export { useCopilotChat as useCopilotChatInternal } from "./use-copilot-chat_internal";
 export { useCopilotAction } from "./use-copilot-action";
 export { useCoAgentStateRender } from "./use-coagent-state-render";

CopilotKit/packages/react-core/src/hooks/use-coagent.ts

@@ -89,12 +89,7 @@
  */
 
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import {
-  CopilotContextParams,
-  CopilotMessagesContextParams,
-  useCopilotContext,
-  useCopilotMessagesContext,
-} from "../context";
+import { CopilotContextParams, useCopilotContext } from "../context";
 import { CoagentState } from "../types/coagent-state";
 import { useCopilotChat } from "./use-copilot-chat_internal";
 import { Message } from "@copilotkit/shared";
@@ -239,7 +234,7 @@ export function useCoAgent<T = any>(options: UseCoagentOptions<T>): UseCoagentRe
 
   const { coagentStates, coagentStatesRef, setCoagentStatesWithRef, threadId, copilotApiConfig } =
     context;
-  const { appendMessage, runChatCompletion } = useCopilotChat();
+  const { sendMessage, runChatCompletion } = useCopilotChat();
   const headers = {
     ...(copilotApiConfig.headers || {}),
   };
@@ -351,9 +346,9 @@ export function useCoAgent<T = any>(options: UseCoagentOptions<T>): UseCoagentRe
 
   const runAgentCallback = useAsyncCallback(
     async (hint?: HintFunction) => {
-      await runAgent(name, context, getMessagesFromTap(), appendMessage, runChatCompletion, hint);
+      await runAgent(name, context, getMessagesFromTap(), sendMessage, runChatCompletion, hint);
     },
-    [name, context, appendMessage, runChatCompletion],
+    [name, context, sendMessage, runChatCompletion],
   );
 
   // Return the state and setState function
@@ -406,7 +401,7 @@ export async function runAgent(
   name: string,
   context: CopilotContextParams,
   messages: GqlMessage[],
-  appendMessage: (message: Message) => Promise<void>,
+  sendMessage: (message: Message) => Promise<void>,
   runChatCompletion: () => Promise<Message[]>,
   hint?: HintFunction,
 ) {
@@ -430,7 +425,7 @@ export async function runAgent(
   if (hint) {
     const hintMessage = hint({ previousState, currentState: state });
     if (hintMessage) {
-      await appendMessage(hintMessage);
+      await sendMessage(hintMessage);
     } else {
       await runChatCompletion();
     }