logoassistant-ui
Migrations

Migration to v0.3

Changes to the Thread.tsx template

Removal of MessagePrimitive.InProgress

Remove MessagePrimitive.InProgress from Thread.tsx.

  const AssistantMessage = () => {
    return (
      <MessagePrimitive.Root>
        ...
-       <MessagePrimitive.InProgress className="..." />
        ...
      </MessagePrimitive.Root>
    );
  };

Custom loading indicator

In case you want a custom loading indicator (other than the dot), create a custom Text component and pass it to the MessagePrimitive.Content component.

import { ContentPartPrimitive } from "@assistant-ui/react";
 
const AssistantMessage = () => {
  return (
    <MessagePrimitive.Root>
      ...
      <MessagePrimitive.Content components={{ Text }} />
      ...
    </MessagePrimitive.Root>
  );
};
 
const Text: FC = ({ children }) => {
  return (
    <ContentPartPrimitive.InProgress>
      <ContentPartPrimitive.Text className="whitespace-pre-line">
        {children}
      </ContentPartPrimitive.Text>
      <ContentPartPrimitive.InProgress>...</ContentPartPrimitive.InProgress>
    </ContentPartPrimitive.InProgress>
  );
};

On this page

Edit on Github