@copilotkit/react-ui 1.10.7-next.0 → 1.50.0-beta.1

package/dist/index.mjs

@@ -4,51 +4,51 @@ import "./chunk-MMVDU6DF.mjs";
 import "./chunk-SC6JRFAJ.mjs";
 import {
   CopilotSidebar
-} from "./chunk-PIFTVJG3.mjs";
+} from "./chunk-SOB5EIL7.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-YBRHDFVQ.mjs";
-import "./chunk-VTYBYTE6.mjs";
+} from "./chunk-CQ2WALZ7.mjs";
+import "./chunk-3JYVJHL5.mjs";
 import "./chunk-C3GSYRC3.mjs";
-import "./chunk-V6DDX4LH.mjs";
+import "./chunk-GDSZGYCE.mjs";
 import "./chunk-V7W6IM2V.mjs";
 import {
   CopilotDevConsole
-} from "./chunk-WBPBTTQD.mjs";
-import "./chunk-KXE2JCUH.mjs";
-import "./chunk-NRA3CFEE.mjs";
-import "./chunk-BH6PCAAL.mjs";
+} from "./chunk-FFJHOZX6.mjs";
 import "./chunk-Q5V6S67N.mjs";
 import {
   shouldShowDevConsole
 } from "./chunk-JY2CSDKN.mjs";
+import "./chunk-KXE2JCUH.mjs";
+import "./chunk-NRA3CFEE.mjs";
+import "./chunk-BH6PCAAL.mjs";
 import "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-MJEYL3FK.mjs";
+} from "./chunk-G35HUUDA.mjs";
 import {
   Suggestions
-} from "./chunk-226ZMOE3.mjs";
+} from "./chunk-QB3GUN2N.mjs";
 import {
   Suggestion
-} from "./chunk-W26XFBEG.mjs";
+} from "./chunk-NGJ32FAP.mjs";
 import "./chunk-PLHTVHUW.mjs";
-import "./chunk-ZJCHKHE4.mjs";
+import "./chunk-HBZW7E5Z.mjs";
 import "./chunk-ELGRNEAO.mjs";
 import "./chunk-QIOJXTIQ.mjs";
-import "./chunk-OWX6YJZH.mjs";
-import "./chunk-RKULVDQO.mjs";
-import "./chunk-2XARU6EY.mjs";
+import "./chunk-E6WVAOQA.mjs";
+import "./chunk-ODEHR7KI.mjs";
+import "./chunk-MPF6BJUF.mjs";
 import {
   AssistantMessage
-} from "./chunk-KX44MLR6.mjs";
+} from "./chunk-IHFR6PYG.mjs";
 import {
   ImageRenderer
 } from "./chunk-DBKRAOH7.mjs";
 import {
   UserMessage
-} from "./chunk-VVL6JFCJ.mjs";
+} from "./chunk-3YWFGNSM.mjs";
 import {
   Markdown
 } from "./chunk-JZ3RFQQ6.mjs";
@@ -61,7 +61,7 @@ import "./chunk-IU3WTXLQ.mjs";
 import "./chunk-T26KLXLH.mjs";
 import {
   useCopilotChatSuggestions
-} from "./chunk-EYRKZDP5.mjs";
+} from "./chunk-OYRZ4VLU.mjs";
 import "./chunk-54JAUBUJ.mjs";
 import "./chunk-JGMFJZMG.mjs";
 import "./chunk-O72ZB5V3.mjs";

package/dist/types/suggestions.d.ts

@@ -2,6 +2,7 @@ interface CopilotChatSuggestion {
     title: string;
     message: string;
     partial?: boolean;
+    isLoading?: boolean;
     className?: string;
 }
 

package/dist/types/suggestions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types/suggestions.ts"],"sourcesContent":["export interface CopilotChatSuggestion {\n  title: string;\n  message: string;\n  partial?: boolean;\n  className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../src/types/suggestions.ts"],"sourcesContent":["export interface CopilotChatSuggestion {\n  title: string;\n  message: string;\n  partial?: boolean;\n  isLoading?: boolean;\n  className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.10.7-next.0",
+  "version": "1.50.0-beta.1",
   "sideEffects": [
     "**/*.css"
   ],
@@ -26,11 +26,12 @@
   "types": "./dist/index.d.ts",
   "license": "MIT",
   "peerDependencies": {
+    "@copilotkitnext/core": "0.0.22",
     "react": "^18 || ^19 || ^19.0.0-rc"
   },
   "devDependencies": {
     "@types/jest": "^29.5.4",
-    "@types/react": "^18.2.5",
+    "@types/react": "^19.1.0",
     "@types/react-syntax-highlighter": "^15.5.7",
     "eslint": "^8.56.0",
     "jest": "^29.6.4",
@@ -40,20 +41,20 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
-    "tailwind-config": "1.4.6",
     "tsconfig": "1.4.6",
+    "tailwind-config": "1.4.6",
     "eslint-config-custom": "1.4.6"
   },
   "dependencies": {
-    "@headlessui/react": "^2.1.3",
+    "@headlessui/react": "^2.2.9",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/shared": "1.10.7-next.0",
-    "@copilotkit/runtime-client-gql": "1.10.7-next.0",
-    "@copilotkit/react-core": "1.10.7-next.0"
+    "@copilotkit/react-core": "1.50.0-beta.1",
+    "@copilotkit/shared": "1.50.0-beta.1",
+    "@copilotkit/runtime-client-gql": "1.50.0-beta.1"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -74,14 +74,14 @@ import { RenderMessage as DefaultRenderMessage } from "./messages/RenderMessage"
 import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
 import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
 import { ImageRenderer as DefaultImageRenderer } from "./messages/ImageRenderer";
-import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import {
   SystemMessageFunction,
-  useCopilotChatInternal as useCopilotChat,
   useCopilotContext,
-  useCopilotMessagesContext,
+  useCopilotChatInternal,
+  HintFunction,
+  type ChatSuggestions,
 } from "@copilotkit/react-core";
-import type { SuggestionItem } from "@copilotkit/react-core";
 import {
   CopilotKitError,
   CopilotKitErrorCode,
@@ -91,8 +91,8 @@ import {
   ErrorVisibility,
   styledConsole,
   CopilotErrorHandler,
+  randomUUID,
 } from "@copilotkit/shared";
-import { randomId } from "@copilotkit/shared";
 import {
   AssistantMessageProps,
   ChatError,
@@ -107,19 +107,9 @@ import {
   UserMessageProps,
 } from "./props";
 
-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.
  */
@@ -625,15 +615,17 @@ export function CopilotChat({
     stopGeneration,
     reloadMessages,
     suggestions: currentSuggestions,
-  } = useCopilotChatLogic(
+    isLoadingSuggestions,
+    agent,
+  } = useCopilotChatInternal({
     suggestions,
-    makeSystemMessage,
-    disableSystemMessage,
-    onInProgress,
-    onSubmitMessage,
-    onStopGeneration,
-    onReloadMessages,
-  );
+  });
+  // makeSystemMessage,
+  // disableSystemMessage,
+  // onInProgress,
+  // onSubmitMessage,
+  // onStopGeneration,
+  // onReloadMessages,
 
   // Track loading state changes for chat start/stop events
   const prevIsLoading = useRef(isLoading);
@@ -659,7 +651,12 @@ export function CopilotChat({
     // Trigger message sent event
     triggerObservabilityHook("onMessageSent", text);
 
-    return sendMessage(text, images);
+    // TODO: send images?
+    return sendMessage({
+      id: randomUUID(),
+      content: text,
+      role: "user",
+    });
   };
 
   const chatContext = React.useContext(ChatContext);
@@ -795,6 +792,7 @@ export function CopilotChat({
           <RenderSuggestionsList
             onSuggestionClick={handleSendMessage}
             suggestions={currentSuggestions}
+            isLoading={isLoadingSuggestions}
           />
         )}
       </Messages>
@@ -814,6 +812,8 @@ export function CopilotChat({
       )}
       <Input
         inProgress={isLoading}
+        chatReady={Boolean(agent)}
+        // @ts-ignore
         onSend={handleSendMessage}
         isVisible={isVisible}
         onStop={stopGeneration}
@@ -845,304 +845,3 @@ export function WrappedCopilotChat({
   }
   return <>{children}</>;
 }
-
-export const useCopilotChatLogic = (
-  chatSuggestions: ChatSuggestions,
-  makeSystemMessage?: SystemMessageFunction,
-  disableSystemMessage?: boolean,
-  onInProgress?: (isLoading: boolean) => void,
-  onSubmitMessage?: (messageContent: string) => Promise<void> | void,
-  onStopGeneration?: OnStopGeneration,
-  onReloadMessages?: OnReloadMessages,
-) => {
-  const {
-    messages,
-    sendMessage,
-    setMessages,
-    reloadMessages: defaultReloadMessages,
-    stopGeneration: defaultStopGeneration,
-    runChatCompletion,
-    isLoading,
-    suggestions,
-    setSuggestions,
-    generateSuggestions,
-    resetSuggestions: resetSuggestionsFromHook,
-    isLoadingSuggestions,
-  } = useCopilotChat({
-    makeSystemMessage,
-    disableSystemMessage,
-  });
-
-  const generalContext = useCopilotContext();
-  const messagesContext = useCopilotMessagesContext();
-
-  // 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(() => {
-    if (Array.isArray(chatSuggestions)) {
-      setSuggestions(chatSuggestions);
-      hasGeneratedInitialSuggestions.current = true;
-    }
-  }, [JSON.stringify(chatSuggestions), setSuggestions]);
-
-  // Error handling wrapper
-  const generateSuggestionsWithErrorHandling = useCallback(
-    async (context: string) => {
-      try {
-        await generateSuggestions();
-      } catch (error) {
-        console.error("Failed to generate suggestions:", error);
-        setSuggestionsFailed(true);
-      }
-    },
-    [generateSuggestions],
-  );
-
-  // 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 (messages.length === 0 && !hasGeneratedInitialSuggestions.current) {
-      hasGeneratedInitialSuggestions.current = true;
-      generateSuggestionsWithErrorHandling("initial");
-      return;
-    }
-
-    // Generate post-message suggestions after assistant responds
-    if (messages.length > 0 && suggestions.length === 0) {
-      generateSuggestionsWithErrorHandling("post-message");
-      return;
-    }
-  }, [
-    chatSuggestions,
-    isLoadingSuggestions,
-    suggestionsFailed,
-    messages.length,
-    isLoading,
-    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 safelySendMessage = async (
-    messageContent: string,
-    imagesToUse?: Array<{ contentType: string; bytes: string }>,
-  ) => {
-    const images = imagesToUse || [];
-
-    // 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;
-
-    // Send text message if content provided
-    if (messageContent.trim().length > 0) {
-      const textMessage: Message = {
-        id: randomId(),
-        role: "user",
-        content: messageContent,
-      };
-
-      // Call user-provided submit handler if available
-      if (onSubmitMessage) {
-        try {
-          await onSubmitMessage(messageContent);
-        } catch (error) {
-          console.error("Error in onSubmitMessage:", error);
-        }
-      }
-
-      // Send the message and clear suggestions for auto/manual modes
-      await sendMessage(textMessage, {
-        followUp: images.length === 0,
-        clearSuggestions: chatSuggestions === "auto" || chatSuggestions === "manual",
-      });
-
-      if (!firstMessage) {
-        firstMessage = textMessage;
-      }
-    }
-
-    // Send image messages
-    if (images.length > 0) {
-      for (let i = 0; i < images.length; i++) {
-        const imageMessage = {
-          id: randomId(),
-          role: "user" as const,
-          image: {
-            format: images[i].contentType.replace("image/", ""),
-            bytes: images[i].bytes,
-          },
-        } as unknown as Message;
-        await sendMessage(imageMessage, { followUp: i === images.length - 1 });
-        if (!firstMessage) {
-          firstMessage = imageMessage;
-        }
-      }
-    }
-
-    if (!firstMessage) {
-      // Should not happen if send button is properly disabled, but handle just in case
-      return { role: "user", content: "", id: randomId() } as Message; // Return a dummy message
-    }
-
-    // The hook implicitly triggers API call on appendMessage.
-    // We return the first message sent (either text or first image)
-    return firstMessage;
-  };
-
-  const currentAgentName = generalContext.agentSession?.agentName;
-  const restartCurrentAgent = async (hint?: HintFunction) => {
-    if (generalContext.agentSession) {
-      generalContext.setAgentSession({
-        ...generalContext.agentSession,
-        nodeName: undefined,
-        threadId: undefined,
-      });
-      generalContext.setCoagentStates((prevAgentStates) => {
-        return {
-          ...prevAgentStates,
-          [generalContext.agentSession!.agentName]: {
-            ...prevAgentStates[generalContext.agentSession!.agentName],
-            threadId: undefined,
-            nodeName: undefined,
-            runId: undefined,
-          },
-        };
-      });
-    }
-  };
-  const runCurrentAgent = async (hint?: HintFunction) => {
-    if (generalContext.agentSession) {
-      await runAgent(
-        generalContext.agentSession.agentName,
-        stableContext,
-        messagesContext.messages,
-        sendMessage,
-        runChatCompletion,
-      );
-    }
-  };
-  const stopCurrentAgent = () => {
-    if (generalContext.agentSession) {
-      stopAgent(generalContext.agentSession.agentName, stableContext);
-    }
-  };
-  const setCurrentAgentState = (state: any) => {
-    if (generalContext.agentSession) {
-      generalContext.setCoagentStates((prevAgentStates) => {
-        return {
-          ...prevAgentStates,
-          [generalContext.agentSession!.agentName]: {
-            state,
-          },
-        } as any;
-      });
-    }
-  };
-
-  function stopGeneration() {
-    // Clear suggestions when stopping generation
-    setSuggestions([]);
-
-    if (onStopGeneration) {
-      onStopGeneration({
-        messages: messages,
-        setMessages,
-        stopGeneration: defaultStopGeneration,
-        currentAgentName,
-        restartCurrentAgent,
-        stopCurrentAgent,
-        runCurrentAgent,
-        setCurrentAgentState,
-      });
-    } else {
-      defaultStopGeneration();
-    }
-  }
-  function reloadMessages(messageId: string) {
-    if (onReloadMessages) {
-      onReloadMessages({
-        messages: messages,
-        setMessages,
-        stopGeneration: defaultStopGeneration,
-        currentAgentName,
-        restartCurrentAgent,
-        stopCurrentAgent,
-        runCurrentAgent,
-        setCurrentAgentState,
-        messageId,
-      });
-    } else {
-      defaultReloadMessages(messageId);
-    }
-  }
-
-  return {
-    messages,
-    isLoading,
-    suggestions,
-    sendMessage: safelySendMessage,
-    stopGeneration,
-    reloadMessages,
-    resetSuggestions,
-    context: stableContext,
-    actions,
-  };
-};

package/src/components/chat/Input.tsx

@@ -3,7 +3,7 @@ import { InputProps } from "./props";
 import { useChatContext } from "./ChatContext";
 import AutoResizingTextarea from "./Textarea";
 import { usePushToTalk } from "../../hooks/use-push-to-talk";
-import { useCopilotContext } from "@copilotkit/react-core";
+import { useCopilotContext, useCopilotChatInternal } from "@copilotkit/react-core";
 import { PoweredByTag } from "./PoweredByTag";
 
 const MAX_NEWLINES = 6;
@@ -11,7 +11,7 @@ const MAX_NEWLINES = 6;
 export const Input = ({
   inProgress,
   onSend,
-  isVisible = false,
+  chatReady = true,
   onStop,
   onUpload,
   hideStopButton = false,
@@ -71,22 +71,22 @@ export const Input = ({
   });
 
   const isInProgress = inProgress || pushToTalkState === "transcribing";
-  const buttonIcon =
-    isInProgress && !hideStopButton ? context.icons.stopIcon : context.icons.sendIcon;
+  const { buttonIcon, buttonAlt } = useMemo(() => {
+    if (!chatReady) return { buttonIcon: context.icons.spinnerIcon, buttonAlt: "Loading" };
+    return isInProgress && !hideStopButton
+      ? { buttonIcon: context.icons.stopIcon, buttonAlt: "Stop" }
+      : { buttonIcon: context.icons.sendIcon, buttonAlt: "Send" };
+  }, [isInProgress, chatReady, hideStopButton, context.icons.stopIcon, context.icons.sendIcon]);
   const showPushToTalk =
     pushToTalkConfigured &&
     (pushToTalkState === "idle" || pushToTalkState === "recording") &&
     !inProgress;
 
-  const canSend = useMemo(() => {
-    const interruptEvent = copilotContext.langGraphInterruptAction?.event;
-    const interruptInProgress =
-      interruptEvent?.name === "LangGraphInterruptEvent" && !interruptEvent?.response;
+  const { interrupt } = useCopilotChatInternal();
 
-    return (
-      !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interruptInProgress
-    );
-  }, [copilotContext.langGraphInterruptAction?.event, isInProgress, text, pushToTalkState]);
+  const canSend = useMemo(() => {
+    return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interrupt;
+  }, [interrupt, isInProgress, text, pushToTalkState]);
 
   const canStop = useMemo(() => {
     return isInProgress && !hideStopButton;
@@ -144,6 +144,7 @@ export const Input = ({
             data-copilotkit-in-progress={inProgress}
             data-test-id={inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready"}
             className="copilotKitInputControlButton"
+            aria-label={buttonAlt}
           >
             {buttonIcon}
           </button>

package/src/components/chat/Messages.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { MessagesProps } from "./props";
 import { useChatContext } from "./ChatContext";
 import { Message } from "@copilotkit/shared";
-import { useCopilotChatInternal as useCopilotChat } from "@copilotkit/react-core";
+import { useCopilotChatInternal } from "@copilotkit/react-core";
 import { LegacyRenderMessage, LegacyRenderProps } from "./messages/LegacyRenderMessage";
 
 export const Messages = ({
@@ -28,8 +28,8 @@ export const Messages = ({
   RenderResultMessage,
   RenderImageMessage,
 }: MessagesProps) => {
-  const { labels } = useChatContext();
-  const { messages: visibleMessages, interrupt } = useCopilotChat();
+  const { labels, icons } = useChatContext();
+  const { messages: visibleMessages, interrupt } = useCopilotChatInternal();
   const initialMessages = useMemo(() => makeInitialMessages(labels.initial), [labels.initial]);
   const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
@@ -77,6 +77,8 @@ export const Messages = ({
     ? (props: any) => <LegacyRenderMessage {...props} legacyProps={legacyProps} />
     : RenderMessage;
 
+  const LoadingIcon = () => <span>{icons.activityIcon}</span>;
+
   return (
     <div className="copilotKitMessages" ref={messagesContainerRef}>
       <div className="copilotKitMessagesContainer">
@@ -86,6 +88,7 @@ export const Messages = ({
             <MessageRenderer
               key={index}
               message={message}
+              messages={messages}
               inProgress={inProgress}
               index={index}
               isCurrentMessage={isCurrentMessage}
@@ -101,6 +104,7 @@ export const Messages = ({
             />
           );
         })}
+        {messages[messages.length - 1]?.role === "user" && inProgress && <LoadingIcon />}
         {interrupt}
         {chatError && ErrorMessage && <ErrorMessage error={chatError} isCurrentMessage />}
       </div>

package/src/components/chat/Suggestion.tsx

@@ -1,4 +1,4 @@
-import { useCopilotChatInternal as useCopilotChat } from "@copilotkit/react-core";
+import { useCopilotChatInternal } from "@copilotkit/react-core";
 import { SmallSpinnerIcon } from "./Icons";
 
 interface SuggestionsProps {
@@ -11,7 +11,7 @@ interface SuggestionsProps {
 
 export function Suggestion({ title, onClick, partial, className }: SuggestionsProps) {
   if (!title) return null;
-  const { isLoading } = useCopilotChat();
+  const { isLoading } = useCopilotChatInternal();
 
   return (
     <button

package/src/components/chat/Suggestions.tsx

@@ -1,7 +1,11 @@
 import { Suggestion } from "./Suggestion";
 import { RenderSuggestionsListProps } from "./props";
 
-export function Suggestions({ suggestions, onSuggestionClick }: RenderSuggestionsListProps) {
+export function Suggestions({
+  suggestions,
+  onSuggestionClick,
+  isLoading,
+}: RenderSuggestionsListProps) {
   return (
     <div className="suggestions">
       {suggestions.map((suggestion, index) => (
@@ -9,7 +13,7 @@ export function Suggestions({ suggestions, onSuggestionClick }: RenderSuggestion
           key={index}
           title={suggestion.title}
           message={suggestion.message}
-          partial={suggestion.partial}
+          partial={suggestion.isLoading ?? suggestion.partial ?? isLoading}
           className={suggestion.className}
           onClick={() => onSuggestionClick(suggestion.message)}
         />