fix(chat): show loader when agent is still processing on the backend

packages/instantsearch-ui-components/src/components/chat/ChatMessage.tsx

@@ -10,6 +10,7 @@ import type { ComponentProps, Renderer, VNode } from '../../types';
 import type {
   AddToolResultWithOutput,
   ChatMessageBase,
+  ChatStatus,
   ChatToolMessage,
   ClientSideTools,
 } from './types';
@@ -83,6 +84,10 @@ export type ChatMessageProps = ComponentProps<'article'> & {
    * The message object associated with this chat message
    */
   message: ChatMessageBase;
+  /**
+   * The status of the message (e.g. whether it's still streaming)
+   */
+  status: ChatStatus;
   /**
    * The side of the message
    */
@@ -154,6 +159,7 @@ export function createChatMessageComponent({ createElement }: Renderer) {
     const {
       classNames = {},
       message,
+      status,
       side = 'left',
       variant = 'subtle',
       actions = [],
@@ -177,7 +183,9 @@ export function createChatMessageComponent({ createElement }: Renderer) {
     };
 
     const hasLeading = Boolean(LeadingComponent);
-    const hasActions = Boolean(actions.length > 0 || ActionsComponent);
+
+    const showActions =
+      Boolean(actions.length > 0 || ActionsComponent) && status === 'ready';
 
     const cssClasses: ChatMessageClassNames = {
       root: cx(
@@ -273,7 +281,7 @@ export function createChatMessageComponent({ createElement }: Renderer) {
 
             {suggestionsElement}
 
-            {hasActions && (
+            {showActions && (
               <div
                 className={cx(cssClasses.actions)}
                 aria-label={translations.actionsLabel}

packages/instantsearch-ui-components/src/components/chat/ChatMessages.tsx

@@ -1,6 +1,11 @@
 /** @jsx createElement */
 
 import { cx } from '../../lib';
+import {
+  getTextContent,
+  hasTextContent,
+  isPartText,
+} from '../../lib/utils/chat';
 import { createButtonComponent } from '../Button';
 
 import { createChatMessageComponent } from './ChatMessage';
@@ -166,16 +171,6 @@ export type ChatMessagesProps<
   suggestionsElement?: VNode;
 };
 
-const getTextContent = (message: ChatMessageBase) => {
-  return message.parts
-    .map((part) => ('text' in part ? part.text : ''))
-    .join('');
-};
-
-const hasTextContent = (message: ChatMessageBase) => {
-  return getTextContent(message).trim() !== '';
-};
-
 const copyToClipboard = (message: ChatMessageBase) => {
   navigator.clipboard.writeText(getTextContent(message));
 };
@@ -187,6 +182,7 @@ function createDefaultMessageComponent<
 
   return function DefaultMessage({
     message,
+    status,
     userMessageProps,
     assistantMessageProps,
     tools,
@@ -202,6 +198,7 @@ function createDefaultMessageComponent<
   }: {
     key: string;
     message: TMessage;
+    status: ChatStatus;
     userMessageProps?: Partial<ChatMessageProps>;
     assistantMessageProps?: Partial<ChatMessageProps>;
     indexUiState: object;
@@ -242,6 +239,7 @@ function createDefaultMessageComponent<
         side={message.role === 'user' ? 'right' : 'left'}
         variant={message.role === 'user' ? 'neutral' : 'subtle'}
         message={message}
+        status={status}
         tools={tools}
         indexUiState={indexUiState}
         setIndexUiState={setIndexUiState}
@@ -325,6 +323,18 @@ export function createChatMessagesComponent({
       ),
     };
 
+    const lastMessage = messages[messages.length - 1];
+    const lastPart = lastMessage?.parts?.[lastMessage.parts.length - 1];
+    const isWaitingForResponse = status === 'submitted';
+    const isStreamingWithNoContent = status === 'streaming' && !lastPart;
+    const isStreamingNonTextContent =
+      status === 'streaming' && lastPart && !isPartText(lastPart);
+
+    const showLoader =
+      isWaitingForResponse ||
+      isStreamingWithNoContent ||
+      isStreamingNonTextContent;
+
     const DefaultMessage = MessageComponent || DefaultMessageComponent;
     const DefaultLoader = LoaderComponent || DefaultLoaderComponent;
     const DefaultError = ErrorComponent || DefaultErrorComponent;
@@ -357,6 +367,7 @@ export function createChatMessagesComponent({
               <DefaultMessage
                 key={message.id}
                 message={message}
+                status={status}
                 userMessageProps={userMessageProps}
                 assistantMessageProps={assistantMessageProps}
                 tools={tools}
@@ -378,7 +389,7 @@ export function createChatMessagesComponent({
               />
             ))}
 
-            {status === 'submitted' && (
+            {showLoader && (
               <DefaultLoader
                 translations={{ loaderText: translations.loaderText }}
               />

packages/instantsearch-ui-components/src/components/chat/__tests__/ChatMessage.test.tsx

@@ -19,6 +19,7 @@ describe('ChatMessage', () => {
         indexUiState={{}}
         setIndexUiState={jest.fn()}
         message={{ role: 'user', id: '1', parts: [] }}
+        status="ready"
         tools={{}}
         onClose={jest.fn()}
       />
@@ -55,6 +56,7 @@ describe('ChatMessage', () => {
           id: '1',
           parts: [],
         }}
+        status="ready"
         classNames={{
           root: 'root',
           container: 'container',
@@ -100,6 +102,7 @@ describe('ChatMessage', () => {
             id: '1',
             parts: [{ type: 'text', text: 'User content' }],
           }}
+          status="ready"
           tools={{}}
           onClose={jest.fn()}
         />
@@ -111,6 +114,7 @@ describe('ChatMessage', () => {
             id: '2',
             parts: [{ type: 'text', text: 'Assistant content' }],
           }}
+          status="ready"
           tools={{}}
           onClose={jest.fn()}
         />
@@ -122,6 +126,7 @@ describe('ChatMessage', () => {
             id: '3',
             parts: [{ type: 'text', text: 'System content' }],
           }}
+          status="ready"
           tools={{}}
           onClose={jest.fn()}
         />
@@ -219,6 +224,7 @@ describe('ChatMessage', () => {
             },
           ],
         }}
+        status="ready"
         tools={{
           test_tool: {
             layoutComponent: ({ message }) => (

packages/instantsearch-ui-components/src/lib/utils/chat.ts

@@ -0,0 +1,17 @@
+import type { ChatMessageBase } from '../../components';
+
+export const getTextContent = (message: ChatMessageBase) => {
+  return message.parts
+    .map((part) => ('text' in part ? part.text : ''))
+    .join('');
+};
+
+export const hasTextContent = (message: ChatMessageBase) => {
+  return getTextContent(message).trim() !== '';
+};
+
+export const isPartText = (
+  part: ChatMessageBase['parts'][number]
+): part is Extract<ChatMessageBase['parts'][number], { type: 'text' }> => {
+  return part.type === 'text';
+};