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 CUI Kit displays a status message. By default, the CUI Kit always shows “Thinking…”, but you can set your own text and change it if the response time is prolonged.

Usage

CUI Kit 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
        initialThread={threads[0]}
        threads={threads}
        onUserMessageSent={onUserMessageSent}
        defaultTextFieldValue={'Test'}
      />
    </Box>
  );
}

export default App;

API Reference Branching