@assistant-ui/react
Version:
TypeScript/React library for AI Chat
58 lines • 2.38 kB
JavaScript
"use client";
import { useAssistantApi, useAssistantState } from "../../context/react/index.js";
import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime.js";
export function useMessageRuntime(options) {
const api = useAssistantApi();
const runtime = useAssistantState(() => api.message.source
? (api.message().__internal_getRuntime?.() ?? null)
: null);
if (!runtime && !options?.optional) {
throw new Error("MessageRuntime is not available");
}
return runtime;
}
/**
* @deprecated Use `useAssistantState(({ message }) => message)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
*
* Hook to access the current message state.
*
* This hook provides reactive access to the message's state, including content,
* role, status, and other message-level properties.
*
* @param selector Optional selector function to pick specific state properties
* @returns The selected message state or the entire message state if no selector provided
*
* @example
* ```tsx
* // Before:
* function MessageContent() {
* const role = useMessage((state) => state.role);
* const content = useMessage((state) => state.content);
* const isLoading = useMessage((state) => state.status.type === "running");
* return (
* <div className={`message-${role}`}>
* {isLoading ? "Loading..." : content.map(part => part.text).join("")}
* </div>
* );
* }
*
* // After:
* function MessageContent() {
* const role = useAssistantState(({ message }) => message.role);
* const content = useAssistantState(({ message }) => message.content);
* const isLoading = useAssistantState(({ message }) => message.status.type === "running");
* return (
* <div className={`message-${role}`}>
* {isLoading ? "Loading..." : content.map(part => part.text).join("")}
* </div>
* );
* }
* ```
*/
export const useMessage = createStateHookForRuntime(useMessageRuntime);
const useEditComposerRuntime = (opt) => useMessageRuntime(opt)?.composer ?? null;
/**
* @deprecated Use `useAssistantState(({ message }) => message.composer)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
*/
export const useEditComposer = createStateHookForRuntime(useEditComposerRuntime);
//# sourceMappingURL=MessageContext.js.map