@copilotkit/react-ui 1.9.3 → 1.10.0-next.0

package/dist/index.mjs

@@ -4,12 +4,12 @@ import "./chunk-MMVDU6DF.mjs";
 import "./chunk-SC6JRFAJ.mjs";
 import {
   CopilotSidebar
-} from "./chunk-ALIBUJML.mjs";
+} from "./chunk-WPVTPQ7X.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-H3EM63WS.mjs";
-import "./chunk-KN2GCKBE.mjs";
+} from "./chunk-VLNT34X3.mjs";
+import "./chunk-GJ3MFNBX.mjs";
 import "./chunk-C3GSYRC3.mjs";
 import "./chunk-GVKA7RQQ.mjs";
 import "./chunk-V7W6IM2V.mjs";
@@ -26,38 +26,35 @@ import "./chunk-BH6PCAAL.mjs";
 import "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-HKTWKCPS.mjs";
-import "./chunk-53CVDVS5.mjs";
-import "./chunk-2II3Q27P.mjs";
-import {
-  RenderImageMessage
-} from "./chunk-ULDQXCED.mjs";
-import "./chunk-C7OB63U5.mjs";
-import "./chunk-32MUWKL3.mjs";
+} from "./chunk-LXCD3K7B.mjs";
+import "./chunk-JHUTTP5C.mjs";
 import {
   AssistantMessage
-} from "./chunk-L3GZ7TXC.mjs";
+} from "./chunk-GCKKSSBU.mjs";
+import {
+  ImageRenderer
+} from "./chunk-DBKRAOH7.mjs";
 import {
   UserMessage
-} from "./chunk-HWMFMBJC.mjs";
+} from "./chunk-VVL6JFCJ.mjs";
 import {
   Suggestions
-} from "./chunk-QGSPTXOV.mjs";
+} from "./chunk-O7KTFUAN.mjs";
 import {
   Suggestion
-} from "./chunk-IMBPSLL4.mjs";
+} from "./chunk-Q2467VHZ.mjs";
 import "./chunk-PLHTVHUW.mjs";
-import "./chunk-4HUXYD3B.mjs";
+import "./chunk-DTRPPNSA.mjs";
 import "./chunk-CGEAG65D.mjs";
 import "./chunk-QIOJXTIQ.mjs";
 import {
   Markdown
-} from "./chunk-YTXEWDNC.mjs";
-import "./chunk-B3D7U7TJ.mjs";
+} from "./chunk-E6MQUIZW.mjs";
+import "./chunk-WHDNKXMP.mjs";
 import {
   useChatContext
 } from "./chunk-IEMQ2SQW.mjs";
-import "./chunk-KENCH7RN.mjs";
+import "./chunk-B5IFB5YJ.mjs";
 import "./chunk-XWG3L6QC.mjs";
 import "./chunk-IU3WTXLQ.mjs";
 import "./chunk-T26KLXLH.mjs";
@@ -66,7 +63,7 @@ import {
 } from "./chunk-Z4XPPVZT.mjs";
 import "./chunk-54JAUBUJ.mjs";
 import "./chunk-JGMFJZMG.mjs";
-import "./chunk-S5MBUNGN.mjs";
+import "./chunk-O72ZB5V3.mjs";
 import "./chunk-MRXNTQOX.mjs";
 export {
   AssistantMessage,
@@ -74,8 +71,8 @@ export {
   CopilotDevConsole,
   CopilotPopup,
   CopilotSidebar,
+  ImageRenderer,
   Markdown,
-  RenderImageMessage,
   Suggestion as RenderSuggestion,
   Suggestions as RenderSuggestionsList,
   UserMessage,

package/dist/types/css.d.ts

@@ -9,6 +9,9 @@ interface CopilotKitCSSProperties extends CSSProperties {
     "--copilot-kit-secondary-contrast-color"?: string;
     "--copilot-kit-separator-color"?: string;
     "--copilot-kit-muted-color"?: string;
+    "--copilot-kit-error-background"?: string;
+    "--copilot-kit-error-border"?: string;
+    "--copilot-kit-error-text"?: string;
     "--copilot-kit-shadow-sm"?: string;
     "--copilot-kit-shadow-md"?: string;
     "--copilot-kit-shadow-lg"?: string;

package/dist/types/css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types/css.ts"],"sourcesContent":["// autogenerated (see postcss.config.js) - do not edit\nimport { CSSProperties } from \"react\";\n\nexport interface CopilotKitCSSProperties extends CSSProperties {\n  \"--copilot-kit-primary-color\"?: string;\n  \"--copilot-kit-contrast-color\"?: string;\n  \"--copilot-kit-background-color\"?: string;\n  \"--copilot-kit-input-background-color\"?: string;\n  \"--copilot-kit-secondary-color\"?: string;\n  \"--copilot-kit-secondary-contrast-color\"?: string;\n  \"--copilot-kit-separator-color\"?: string;\n  \"--copilot-kit-muted-color\"?: string;\n  \"--copilot-kit-shadow-sm\"?: string;\n  \"--copilot-kit-shadow-md\"?: string;\n  \"--copilot-kit-shadow-lg\"?: string;\n  \"--copilot-kit-dev-console-bg\"?: string;\n  \"--copilot-kit-dev-console-text\"?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../src/types/css.ts"],"sourcesContent":["// autogenerated (see postcss.config.js) - do not edit\nimport { CSSProperties } from \"react\";\n\nexport interface CopilotKitCSSProperties extends CSSProperties {\n  \"--copilot-kit-primary-color\"?: string;\n  \"--copilot-kit-contrast-color\"?: string;\n  \"--copilot-kit-background-color\"?: string;\n  \"--copilot-kit-input-background-color\"?: string;\n  \"--copilot-kit-secondary-color\"?: string;\n  \"--copilot-kit-secondary-contrast-color\"?: string;\n  \"--copilot-kit-separator-color\"?: string;\n  \"--copilot-kit-muted-color\"?: string;\n  \"--copilot-kit-error-background\"?: string;\n  \"--copilot-kit-error-border\"?: string;\n  \"--copilot-kit-error-text\"?: string;\n  \"--copilot-kit-shadow-sm\"?: string;\n  \"--copilot-kit-shadow-md\"?: string;\n  \"--copilot-kit-shadow-lg\"?: string;\n  \"--copilot-kit-dev-console-bg\"?: string;\n  \"--copilot-kit-dev-console-text\"?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.9.3",
+  "version": "1.10.0-next.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -51,9 +51,9 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/react-core": "1.9.3",
-    "@copilotkit/runtime-client-gql": "1.9.3",
-    "@copilotkit/shared": "1.9.3"
+    "@copilotkit/react-core": "1.10.0-next.0",
+    "@copilotkit/runtime-client-gql": "1.10.0-next.0",
+    "@copilotkit/shared": "1.10.0-next.0"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -53,27 +53,24 @@ import {
 } from "./ChatContext";
 import { Messages as DefaultMessages } from "./Messages";
 import { Input as DefaultInput } from "./Input";
-import { RenderTextMessage as DefaultRenderTextMessage } from "./messages/RenderTextMessage";
-import { RenderActionExecutionMessage as DefaultRenderActionExecutionMessage } from "./messages/RenderActionExecutionMessage";
-import { RenderResultMessage as DefaultRenderResultMessage } from "./messages/RenderResultMessage";
-import { RenderAgentStateMessage as DefaultRenderAgentStateMessage } from "./messages/RenderAgentStateMessage";
-import { RenderImageMessage as DefaultRenderImageMessage } from "./messages/RenderImageMessage";
+import { RenderMessage as DefaultRenderMessage } from "./messages/RenderMessage";
 import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
 import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
-import React, { useEffect, useRef, useState } from "react";
+import { ImageRenderer as DefaultImageRenderer } from "./messages/ImageRenderer";
+import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import {
   SystemMessageFunction,
   useCopilotChat,
   useCopilotContext,
   useCopilotMessagesContext,
 } from "@copilotkit/react-core";
-import { reloadSuggestions } from "./Suggestion";
-import { CopilotChatSuggestion } from "../../types/suggestions";
-import { Message, Role, TextMessage, ImageMessage } from "@copilotkit/runtime-client-gql";
+import type { SuggestionItem } from "@copilotkit/react-core";
+import { Message } from "@copilotkit/shared";
 import { randomId } from "@copilotkit/shared";
 import {
   AssistantMessageProps,
   ComponentsMap,
+  ImageRendererProps,
   InputProps,
   MessagesProps,
   RenderMessageProps,
@@ -85,6 +82,15 @@ import { HintFunction, runAgent, stopAgent } from "@copilotkit/react-core";
 import { ImageUploadQueue } from "./ImageUploadQueue";
 import { Suggestions as DefaultRenderSuggestionsList } from "./Suggestions";
 
+/**
+ * The type of suggestions to use in the chat.
+ *
+ * `auto` - Suggestions are generated automatically.
+ * `manual` - Suggestions are controlled programmatically.
+ * `SuggestionItem[]` - Static suggestions array.
+ */
+export type ChatSuggestions = "auto" | "manual" | SuggestionItem[];
+
 /**
  * Props for CopilotChat component.
  */
@@ -99,6 +105,25 @@ export interface CopilotChatProps {
    */
   instructions?: string;
 
+  /**
+   * Controls the behavior of suggestions in the chat interface.
+   *
+   * `auto` (default) - Suggestions are generated automatically:
+   *   - When the chat is first opened (empty state)
+   *   - After each message exchange completes
+   *   - Uses configuration from `useCopilotChatSuggestions` hooks
+   *
+   * `manual` - Suggestions are controlled programmatically:
+   *   - Use `setSuggestions()` to set custom suggestions
+   *   - Use `generateSuggestions()` to trigger AI generation
+   *   - Access via `useCopilotChat` hook
+   *
+   * `SuggestionItem[]` - Static suggestions array:
+   *   - Always shows the same suggestions
+   *   - No AI generation involved
+   */
+  suggestions?: ChatSuggestions;
+
   /**
    * A callback that gets called when the in progress state changes.
    */
@@ -132,12 +157,12 @@ export interface CopilotChatProps {
   /**
    * A callback function for thumbs up feedback
    */
-  onThumbsUp?: (message: TextMessage) => void;
+  onThumbsUp?: (message: Message) => void;
 
   /**
    * A callback function for thumbs down feedback
    */
-  onThumbsDown?: (message: TextMessage) => void;
+  onThumbsDown?: (message: Message) => void;
 
   /**
    * A list of markdown components to render in assistant message.
@@ -190,29 +215,14 @@ export interface CopilotChatProps {
   Messages?: React.ComponentType<MessagesProps>;
 
   /**
-   * A custom RenderTextMessage component to use instead of the default.
-   */
-  RenderTextMessage?: React.ComponentType<RenderMessageProps>;
-
-  /**
-   * A custom RenderActionExecutionMessage component to use instead of the default.
-   */
-  RenderActionExecutionMessage?: React.ComponentType<RenderMessageProps>;
-
-  /**
-   * A custom RenderAgentStateMessage component to use instead of the default.
-   */
-  RenderAgentStateMessage?: React.ComponentType<RenderMessageProps>;
-
-  /**
-   * A custom RenderResultMessage component to use instead of the default.
-   */
-  RenderResultMessage?: React.ComponentType<RenderMessageProps>;
-
-  /**
-   * A custom RenderImageMessage component to use instead of the default.
+   * A custom RenderMessage component to use instead of the default.
+   *
+   * **Warning**: This is a break-glass solution to allow for custom
+   * rendering of messages. You are most likely looking to swap out
+   * the AssistantMessage and UserMessage components instead which
+   * are also props.
    */
-  RenderImageMessage?: React.ComponentType<RenderMessageProps>;
+  RenderMessage?: React.ComponentType<RenderMessageProps>;
 
   /**
    * A custom suggestions list component to use instead of the default.
@@ -224,6 +234,11 @@ export interface CopilotChatProps {
    */
   Input?: React.ComponentType<InputProps>;
 
+  /**
+   * A custom image rendering component to use instead of the default.
+   */
+  ImageRenderer?: React.ComponentType<ImageRendererProps>;
+
   /**
    * A class name to apply to the root element.
    */
@@ -297,6 +312,7 @@ export type ImageUpload = {
 
 export function CopilotChat({
   instructions,
+  suggestions = "auto",
   onSubmitMessage,
   makeSystemMessage,
   onInProgress,
@@ -308,11 +324,7 @@ export function CopilotChat({
   onThumbsDown,
   markdownTagRenderers,
   Messages = DefaultMessages,
-  RenderTextMessage = DefaultRenderTextMessage,
-  RenderActionExecutionMessage = DefaultRenderActionExecutionMessage,
-  RenderAgentStateMessage = DefaultRenderAgentStateMessage,
-  RenderResultMessage = DefaultRenderResultMessage,
-  RenderImageMessage = DefaultRenderImageMessage,
+  RenderMessage = DefaultRenderMessage,
   RenderSuggestionsList = DefaultRenderSuggestionsList,
   Input = DefaultInput,
   className,
@@ -320,6 +332,7 @@ export function CopilotChat({
   labels,
   AssistantMessage = DefaultAssistantMessage,
   UserMessage = DefaultUserMessage,
+  ImageRenderer = DefaultImageRenderer,
   imageUploadsEnabled,
   inputFileAccept = "image/*",
   hideStopButton,
@@ -398,19 +411,18 @@ export function CopilotChat({
       ...additionalInstructions.map((instruction) => `- ${instruction}`),
     ];
 
-    console.log("combinedAdditionalInstructions", combinedAdditionalInstructions);
-
     setChatInstructions(combinedAdditionalInstructions.join("\n") || "");
   }, [instructions, additionalInstructions]);
 
   const {
     visibleMessages,
     isLoading,
-    currentSuggestions,
     sendMessage,
     stopGeneration,
     reloadMessages,
+    suggestions: currentSuggestions,
   } = useCopilotChatLogic(
+    suggestions,
     makeSystemMessage,
     onInProgress,
     onSubmitMessage,
@@ -489,11 +501,7 @@ export function CopilotChat({
       <Messages
         AssistantMessage={AssistantMessage}
         UserMessage={UserMessage}
-        RenderTextMessage={RenderTextMessage}
-        RenderActionExecutionMessage={RenderActionExecutionMessage}
-        RenderAgentStateMessage={RenderAgentStateMessage}
-        RenderResultMessage={RenderResultMessage}
-        RenderImageMessage={RenderImageMessage}
+        RenderMessage={RenderMessage}
         messages={visibleMessages}
         inProgress={isLoading}
         onRegenerate={handleRegenerate}
@@ -501,6 +509,7 @@ export function CopilotChat({
         onThumbsUp={onThumbsUp}
         onThumbsDown={onThumbsDown}
         markdownTagRenderers={markdownTagRenderers}
+        ImageRenderer={ImageRenderer}
       >
         {currentSuggestions.length > 0 && (
           <RenderSuggestionsList
@@ -523,7 +532,6 @@ export function CopilotChat({
           />
         </>
       )}
-
       <Input
         inProgress={isLoading}
         onSend={handleSendMessage}
@@ -558,9 +566,8 @@ export function WrappedCopilotChat({
   return <>{children}</>;
 }
 
-const SUGGESTIONS_DEBOUNCE_TIMEOUT = 1000;
-
 export const useCopilotChatLogic = (
+  chatSuggestions: ChatSuggestions,
   makeSystemMessage?: SystemMessageFunction,
   onInProgress?: (isLoading: boolean) => void,
   onSubmitMessage?: (messageContent: string) => Promise<void> | void,
@@ -570,88 +577,160 @@ export const useCopilotChatLogic = (
   const {
     visibleMessages,
     appendMessage,
+    setMessages,
     reloadMessages: defaultReloadMessages,
     stopGeneration: defaultStopGeneration,
     runChatCompletion,
     isLoading,
+    suggestions,
+    setSuggestions,
+    generateSuggestions,
+    resetSuggestions: resetSuggestionsFromHook,
+    isLoadingSuggestions,
   } = useCopilotChat({
-    id: randomId(),
     makeSystemMessage,
   });
 
-  const [currentSuggestions, setCurrentSuggestions] = useState<CopilotChatSuggestion[]>([]);
-  const suggestionsAbortControllerRef = useRef<AbortController | null>(null);
-  const debounceTimerRef = useRef<any>();
-
-  const abortSuggestions = () => {
-    suggestionsAbortControllerRef.current?.abort();
-    suggestionsAbortControllerRef.current = null;
-  };
-
   const generalContext = useCopilotContext();
   const messagesContext = useCopilotMessagesContext();
-  const context = { ...generalContext, ...messagesContext };
 
+  // Get actions from context for message conversion
+  const { actions } = generalContext;
+
+  // Suggestion state management
+  const [suggestionsFailed, setSuggestionsFailed] = useState(false);
+  const hasGeneratedInitialSuggestions = useRef<boolean>(false);
+
+  // Handle static suggestions (when suggestions prop is an array)
   useEffect(() => {
-    onInProgress?.(isLoading);
+    if (Array.isArray(chatSuggestions)) {
+      setSuggestions(chatSuggestions);
+      hasGeneratedInitialSuggestions.current = true;
+    }
+  }, [JSON.stringify(chatSuggestions), setSuggestions]);
 
-    abortSuggestions();
-
-    debounceTimerRef.current = setTimeout(
-      () => {
-        if (!isLoading && Object.keys(context.chatSuggestionConfiguration).length !== 0) {
-          suggestionsAbortControllerRef.current = new AbortController();
-          reloadSuggestions(
-            context,
-            context.chatSuggestionConfiguration,
-            setCurrentSuggestions,
-            suggestionsAbortControllerRef,
-          );
-        }
-      },
-      currentSuggestions.length == 0 ? 0 : SUGGESTIONS_DEBOUNCE_TIMEOUT,
-    );
+  // Error handling wrapper
+  const generateSuggestionsWithErrorHandling = useCallback(
+    async (context: string) => {
+      try {
+        await generateSuggestions();
+      } catch (error) {
+        console.error("Failed to generate suggestions:", error);
+        setSuggestionsFailed(true);
+      }
+    },
+    [generateSuggestions],
+  );
 
-    return () => {
-      clearTimeout(debounceTimerRef.current);
-    };
+  // Automatic suggestion generation logic
+  useEffect(() => {
+    // Only proceed if in auto mode, not currently loading, and not failed
+    if (chatSuggestions !== "auto" || isLoadingSuggestions || suggestionsFailed) {
+      return;
+    }
+
+    // Don't run during chat loading (when the assistant is responding)
+    if (isLoading) {
+      return;
+    }
+
+    // Check if we have any configurations
+    if (Object.keys(generalContext.chatSuggestionConfiguration).length === 0) {
+      return;
+    }
+
+    // Generate initial suggestions when chat is empty
+    if (visibleMessages.length === 0 && !hasGeneratedInitialSuggestions.current) {
+      hasGeneratedInitialSuggestions.current = true;
+      generateSuggestionsWithErrorHandling("initial");
+      return;
+    }
+
+    // Generate post-message suggestions after assistant responds
+    if (visibleMessages.length > 0 && suggestions.length === 0) {
+      generateSuggestionsWithErrorHandling("post-message");
+      return;
+    }
   }, [
+    chatSuggestions,
+    isLoadingSuggestions,
+    suggestionsFailed,
+    visibleMessages.length,
     isLoading,
-    context.chatSuggestionConfiguration,
-    // hackish way to trigger suggestions reload on reset, but better than moving suggestions to the
-    // global context
-    visibleMessages.length == 0,
+    suggestions.length,
+    Object.keys(generalContext.chatSuggestionConfiguration).join(","), // Use stable string instead of object reference
+    generateSuggestionsWithErrorHandling,
   ]);
 
+  // Reset suggestion state when switching away from auto mode
+  useEffect(() => {
+    if (chatSuggestions !== "auto") {
+      hasGeneratedInitialSuggestions.current = false;
+      setSuggestionsFailed(false);
+    }
+  }, [chatSuggestions]);
+
+  // Memoize context to prevent infinite re-renders
+  const stableContext = useMemo(
+    () => ({
+      ...generalContext,
+      ...messagesContext,
+    }),
+    [
+      // Only include stable dependencies
+      generalContext.actions,
+      messagesContext.messages.length,
+      generalContext.isLoading,
+    ],
+  );
+
+  // Wrapper for resetSuggestions that also resets local state
+  const resetSuggestions = useCallback(() => {
+    resetSuggestionsFromHook();
+    setSuggestionsFailed(false);
+    hasGeneratedInitialSuggestions.current = false;
+  }, [resetSuggestionsFromHook]);
+
+  useEffect(() => {
+    onInProgress?.(isLoading);
+  }, [onInProgress, isLoading]);
+
   const sendMessage = async (
     messageContent: string,
     imagesToUse?: Array<{ contentType: string; bytes: string }>,
   ) => {
-    // Use images passed in the call OR the ones from the state (passed via props)
     const images = imagesToUse || [];
 
-    abortSuggestions();
-    setCurrentSuggestions([]);
+    // Clear existing suggestions when user sends a message
+    // This prevents stale suggestions from remaining visible during new conversation flow
+    if (chatSuggestions === "auto" || chatSuggestions === "manual") {
+      setSuggestions([]);
+    }
 
     let firstMessage: Message | null = null;
 
-    // If there's text content, send a text message first
+    // Send text message if content provided
     if (messageContent.trim().length > 0) {
-      const textMessage = new TextMessage({
+      const textMessage: Message = {
+        id: randomId(),
+        role: "user",
         content: messageContent,
-        role: Role.User,
-      });
+      };
 
+      // Call user-provided submit handler if available
       if (onSubmitMessage) {
         try {
-          // Call onSubmitMessage only with text, as image handling is internal right now
           await onSubmitMessage(messageContent);
         } catch (error) {
           console.error("Error in onSubmitMessage:", error);
         }
       }
 
-      await appendMessage(textMessage, { followUp: images.length === 0 });
+      // Send the message and clear suggestions for auto/manual modes
+      await appendMessage(textMessage, {
+        followUp: images.length === 0,
+        clearSuggestions: chatSuggestions === "auto" || chatSuggestions === "manual",
+      });
 
       if (!firstMessage) {
         firstMessage = textMessage;
@@ -661,11 +740,14 @@ export const useCopilotChatLogic = (
     // Send image messages
     if (images.length > 0) {
       for (let i = 0; i < images.length; i++) {
-        const imageMessage = new ImageMessage({
-          format: images[i].contentType.replace("image/", ""),
-          bytes: images[i].bytes,
-          role: Role.User,
-        });
+        const imageMessage = {
+          id: randomId(),
+          role: "user" as const,
+          image: {
+            format: images[i].contentType.replace("image/", ""),
+            bytes: images[i].bytes,
+          },
+        } as unknown as Message;
         await appendMessage(imageMessage, { followUp: i === images.length - 1 });
         if (!firstMessage) {
           firstMessage = imageMessage;
@@ -675,7 +757,7 @@ export const useCopilotChatLogic = (
 
     if (!firstMessage) {
       // Should not happen if send button is properly disabled, but handle just in case
-      return new TextMessage({ content: "", role: Role.User }); // Return a dummy message
+      return { role: "user", content: "", id: randomId() } as Message; // Return a dummy message
     }
 
     // The hook implicitly triggers API call on appendMessage.
@@ -684,7 +766,6 @@ export const useCopilotChatLogic = (
   };
 
   const messages = visibleMessages;
-  const { setMessages } = messagesContext;
   const currentAgentName = generalContext.agentSession?.agentName;
   const restartCurrentAgent = async (hint?: HintFunction) => {
     if (generalContext.agentSession) {
@@ -710,7 +791,7 @@ export const useCopilotChatLogic = (
     if (generalContext.agentSession) {
       await runAgent(
         generalContext.agentSession.agentName,
-        context,
+        stableContext,
         appendMessage,
         runChatCompletion,
         hint,
@@ -719,7 +800,7 @@ export const useCopilotChatLogic = (
   };
   const stopCurrentAgent = () => {
     if (generalContext.agentSession) {
-      stopAgent(generalContext.agentSession.agentName, context);
+      stopAgent(generalContext.agentSession.agentName, stableContext);
     }
   };
   const setCurrentAgentState = (state: any) => {
@@ -736,9 +817,12 @@ export const useCopilotChatLogic = (
   };
 
   function stopGeneration() {
+    // Clear suggestions when stopping generation
+    setSuggestions([]);
+
     if (onStopGeneration) {
       onStopGeneration({
-        messages,
+        messages: messages,
         setMessages,
         stopGeneration: defaultStopGeneration,
         currentAgentName,
@@ -754,7 +838,7 @@ export const useCopilotChatLogic = (
   function reloadMessages(messageId: string) {
     if (onReloadMessages) {
       onReloadMessages({
-        messages,
+        messages: messages,
         setMessages,
         stopGeneration: defaultStopGeneration,
         currentAgentName,
@@ -770,11 +854,15 @@ export const useCopilotChatLogic = (
   }
 
   return {
+    messages,
     visibleMessages,
     isLoading,
-    currentSuggestions,
+    suggestions,
     sendMessage,
     stopGeneration,
     reloadMessages,
+    resetSuggestions,
+    context: stableContext,
+    actions,
   };
 };

package/src/components/chat/CodeBlock.tsx

@@ -62,7 +62,7 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
     }
     const fileExtension = programmingLanguages[language] || ".file";
     const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
-    const fileName = window.prompt("Enter file name" || "", suggestedFileName);
+    const fileName = window.prompt("Enter file name", suggestedFileName);
 
     if (!fileName) {
       // User pressed cancel on prompt.

package/src/components/chat/Markdown.tsx

@@ -34,9 +34,19 @@ const defaultComponents: Components = {
 
     const match = /language-(\w+)/.exec(className || "");
 
-    if (inline) {
+    // Detect inline code: if it has a language class or contains newlines, it's likely a code block
+    // Otherwise, treat it as inline code
+    const hasLanguage = match && match[1];
+    const content = String(children);
+    const hasNewlines = content.includes("\n");
+    const isInline = !hasLanguage && !hasNewlines;
+
+    if (isInline) {
       return (
-        <code className={className} {...props}>
+        <code
+          className={`copilotKitMarkdownElement copilotKitInlineCode ${className || ""}`}
+          {...props}
+        >
           {children}
         </code>
       );