Awaiting Response

Overviews

Awaiting Response

Overview

After sending messages, a period of time passes before the assistant’s response begins to appear. During this interval, the Chat UI displays a status message. By default, the Chat UI always shows “Thinking…”, but you can set your own text and change it if the response time is prolonged.

Usage

Chat UI offers two ways to use it: the onUserMessageSent function parameter (see the Messaging section for more details) and the API Reference.

Usage inside onUserMessageSent:

const onUserMessageSent = React.useCallback(async (params: MessageStreamingParams) => {
  ...
  params.setStatus('New status');
  ...
}, []);

Usage with API reference:

const apiRef = useChatApiRef();

const updateStatus = React.useCallback(() => {
  apiRef.current.thread.setProgressStatus('New status');
}, []);
  
return (
  <ChatPage
    apiRef={apiRef}
    ...
   />
);
}, []);

Example

Collapse code

Expand code

const onUserMessageSent = React.useCallback(async (params: MessageStreamingParams) => {
  await awaitSeconds(2);
  params.setStatus('We\'ve been waiting for 2 seconds already.');
  await awaitSeconds(3);
  params.setStatus('And another 3 seconds.');
  await awaitSeconds(3);
  params.setStatus('We\'re almost finished.');
  await awaitSeconds(3);
  params.setStatus('Done');
  await awaitSeconds(1);

  params.setText('This was an example of waiting statuses for the assistant\'s response.');
  params.onFinish();
}, []);

import * as React from "react";
import {
  ChatPage,
  Thread, MessageStreamingParams,
} from "@plteam/chat-ui";
import Box from "@mui/material/Box";

const awaitSeconds = (seconds: number) => new Promise(resolve => setTimeout(resolve, seconds * 1000));

const App: React.FC = () => {
  const [threads] = React.useState<Thread[]>([
    {
      id: "test-thread",
      title: "Welcome message",
      messages: [
        {
          role: "user",
          content: "Hello!",
        },
        {
          role: "assistant",
          content: "Hello there! How can I assist you today?",
        },
      ],
    },
  ]);

  const onUserMessageSent = React.useCallback(async (params: MessageStreamingParams) => {
    await awaitSeconds(2);
    params.setStatus('We\'ve been waiting for 2 seconds already.');
    await awaitSeconds(3);
    params.setStatus('And another 3 seconds.');
    await awaitSeconds(3);
    params.setStatus('We\'re almost finished.');
    await awaitSeconds(3);
    params.setStatus('Done');
    await awaitSeconds(1);

    params.setText('This was an example of waiting statuses for the assistant\'s response.');
    params.onFinish();
  }, []);

  return (
    <Box height={"100dvh"} width={"100dvw"}>
      <ChatPage
        thread={threads[0]}
        threads={threads}
        onUserMessageSent={onUserMessageSent}
        defaultTextFieldValue={'Test'}
      />
    </Box>
  );
}

export default App;

API Reference Branching