@assistant-ui/react/src/primitives/messagePart/useMessagePartText.ts

Open-source TypeScript/React library for building production-grade AI chat experiences

"use client";

import type {
  TextMessagePart,
  ReasoningMessagePart,
  MessagePartState,
  MessagePartStatus,
} from "@assistant-ui/core";
import { useAuiState } from "@assistant-ui/store";

const COMPLETE_STATUS: MessagePartStatus = Object.freeze({ type: "complete" });

const EMPTY_TEXT_PART: MessagePartState & TextMessagePart = Object.freeze({
  type: "text",
  text: "",
  status: COMPLETE_STATUS,
});

/**
 * @deprecated Use {@link useAuiState} to select and narrow `s.part`.
 * Return `null` for optional rendering. Do not throw inside the selector:
 * selectors run inside `useSyncExternalStore`'s `getSnapshot`, so a transient
 * part mismatch during thread switches can unmount the React root.
 *
 * @example
 * ```tsx
 * const text = useAuiState((s) => {
 *   if (s.part.type !== "text" && s.part.type !== "reasoning") return null;
 *   return s.part;
 * });
 * ```
 *
 * See the {@link https://assistant-ui.com/docs/migrations/v0-12 migration guide}.
 */
export const useMessagePartText = () => {
  // Runs inside useSyncExternalStore's getSnapshot, where a throw tears down
  // the React root; the module-level frozen sentinel keeps snapshots stable.
  const text = useAuiState((s) => {
    if (s.part.type !== "text" && s.part.type !== "reasoning")
      return EMPTY_TEXT_PART;

    return s.part as MessagePartState &
      (TextMessagePart | ReasoningMessagePart);
  });

  return text;
};