feat: ContentPartComponent types (#260)

.changeset/friendly-feet-work.md

@@ -0,0 +1,6 @@
+---
+"@assistant-ui/react-hook-form": patch
+"@assistant-ui/react": patch
+---
+
+feat: ContentPartComponent types

apps/www/pages/reference/integrations/react-hook-form.mdx

@@ -50,7 +50,7 @@ Drop-in replacement hook for `useForm` that adds support for `@assistant-ui/reac
                           parameters: [
                             {
                               name: "renderer",
-                              type: "ToolContentPartRenderer<{ name: string; value: string; }, {}>",
+                              type: "ToolCallContentPartComponent<{ name: string; value: string; }, {}>",
                               description:
                                 "The component to render when set_form_field is called.",
                             },
@@ -67,7 +67,7 @@ Drop-in replacement hook for `useForm` that adds support for `@assistant-ui/reac
                           parameters: [
                             {
                               name: "renderer",
-                              type: "ToolContentPartRenderer<{}, {}>",
+                              type: "ToolCallContentPartComponent<{}, {}>",
                               description:
                                 "The component to render when submit_form is called.",
                             },

apps/www/pages/reference/runtime.mdx

@@ -24,7 +24,7 @@ const MyApp = () => {
 };
 ```
 
-### Properties
+#### Properties
 
 <ParametersTable
   parameters={[

packages/react-hook-form/src/useAssistantForm.tsx

@@ -2,6 +2,7 @@
 
 import {
   type ModelConfig,
+  type ToolCallContentPartComponent,
   useAssistantContext,
   useAssistantToolRenderer,
 } from "@assistant-ui/react/experimental";
@@ -13,7 +14,6 @@ import {
   useForm,
 } from "react-hook-form";
 import type { z } from "zod";
-import type { ToolRenderComponent } from "../../react/src/model-config/ToolRenderComponent";
 import { formTools } from "./formTools";
 
 type UseAssistantFormProps<
@@ -23,13 +23,13 @@ type UseAssistantFormProps<
   assistant?: {
     tools?: {
       set_form_field?: {
-        render?: ToolRenderComponent<
+        render?: ToolCallContentPartComponent<
           z.ZodType<typeof formTools.set_form_field>,
           unknown
         >;
       };
       submit_form?: {
-        render?: ToolRenderComponent<
+        render?: ToolCallContentPartComponent<
           z.ZodType<typeof formTools.submit_form>,
           unknown
         >;

packages/react/src/context/stores/AssistantToolRenderers.ts

@@ -1,22 +1,19 @@
 "use client";
 
 import { create } from "zustand";
-import type { ToolRenderComponent } from "../../model-config/ToolRenderComponent";
+import type { ToolCallContentPartComponent } from "../../primitives/message/ContentPartComponentTypes";
 
 export type AssistantToolRenderersState = {
-  // biome-ignore lint/suspicious/noExplicitAny: intentional any
-  getToolRenderer: (name: string) => ToolRenderComponent<any, any> | null;
+  getToolRenderer: (name: string) => ToolCallContentPartComponent | null;
   setToolRenderer: (
     name: string,
-    // biome-ignore lint/suspicious/noExplicitAny: intentional any
-    render: ToolRenderComponent<any, any>,
+    render: ToolCallContentPartComponent,
   ) => () => void;
 };
 
 export const makeAssistantToolRenderersStore = () =>
   create<AssistantToolRenderersState>((set) => {
-    // biome-ignore lint/suspicious/noExplicitAny: intentional any
-    const renderers = new Map<string, ToolRenderComponent<any, any>[]>();
+    const renderers = new Map<string, ToolCallContentPartComponent[]>();
 
     return {
       getToolRenderer: (name) => {

packages/react/src/experimental.ts

@@ -9,6 +9,17 @@ export type {
   ModelConfig,
 } from "./utils/ModelConfigTypes";
 
+export type {
+  TextContentPartProps,
+  TextContentPartComponent,
+  ImageContentPartProps,
+  ImageContentPartComponent,
+  UIContentPartProps,
+  UIContentPartComponent,
+  ToolCallContentPartProps,
+  ToolCallContentPartComponent,
+} from "./primitives/message/ContentPartComponentTypes";
+
 export * from "./context";
 export { useAssistantInstructions } from "./model-config/useAssistantInstructions";
 export { useAssistantTool } from "./model-config/useAssistantTool";

packages/react/src/model-config/useAssistantTool.tsx

@@ -2,12 +2,12 @@
 
 import { useEffect } from "react";
 import { useAssistantContext } from "../context/AssistantContext";
+import type { ToolCallContentPartComponent } from "../primitives/message/ContentPartComponentTypes";
 import type { Tool } from "../utils/ModelConfigTypes";
-import type { ToolRenderComponent } from "./ToolRenderComponent";
 
 export type UseAssistantTool<TArgs, TResult> = Tool<TArgs, TResult> & {
   name: string;
-  render?: ToolRenderComponent<TArgs, TResult>;
+  render?: ToolCallContentPartComponent<TArgs, TResult>;
 };
 
 export const useAssistantTool = <TArgs, TResult>(

packages/react/src/model-config/useAssistantToolRenderer.tsx

@@ -1,11 +1,11 @@
 "use client";
 import { useEffect } from "react";
 import { useAssistantContext } from "../context/AssistantContext";
-import type { ToolRenderComponent } from "./ToolRenderComponent";
+import type { ToolCallContentPartComponent } from "../primitives/message/ContentPartComponentTypes";
 
 type UseAssistantToolRenderer<TArgs, TResult> = {
   name: string;
-  render: ToolRenderComponent<TArgs, TResult>;
+  render: ToolCallContentPartComponent<TArgs, TResult>;
 };
 
 export const useAssistantToolRenderer = (

packages/react/src/primitives/message/ContentPartComponentTypes.tsx

@@ -0,0 +1,41 @@
+"use client";
+import type { ComponentType } from "react";
+import type {
+  ImageContentPart,
+  TextContentPart,
+  ToolCallContentPart,
+  UIContentPart,
+} from "../../utils/AssistantTypes";
+
+type ContentPartStatus = "done" | "in_progress" | "error";
+
+export type TextContentPartProps = {
+  part: TextContentPart;
+  status: ContentPartStatus;
+};
+export type TextContentPartComponent = ComponentType<TextContentPartProps>;
+
+export type ImageContentPartProps = {
+  part: ImageContentPart;
+  status: ContentPartStatus;
+};
+export type ImageContentPartComponent = ComponentType<ImageContentPartProps>;
+
+export type UIContentPartProps = {
+  part: UIContentPart;
+  status: ContentPartStatus;
+};
+export type UIContentPartComponent = ComponentType<UIContentPartProps>;
+
+// biome-ignore lint/suspicious/noExplicitAny: intentional any
+export type ToolCallContentPartProps<TArgs = any, TResult = any> = {
+  part: ToolCallContentPart<TArgs, TResult>;
+  status: ContentPartStatus;
+};
+
+export type ToolCallContentPartComponent<
+  // biome-ignore lint/suspicious/noExplicitAny: intentional any
+  TArgs = any,
+  // biome-ignore lint/suspicious/noExplicitAny: intentional any
+  TResult = any,
+> = ComponentType<ToolCallContentPartProps<TArgs, TResult>>;

packages/react/src/primitives/message/MessageContent.tsx

@@ -4,42 +4,25 @@ import { type ComponentType, type FC, memo } from "react";
 import { useAssistantContext, useContentPartContext } from "../../context";
 import { useMessageContext } from "../../context/MessageContext";
 import { ContentPartProvider } from "../../context/providers/ContentPartProvider";
-import type {
-  ImageContentPart,
-  TextContentPart,
-  ToolCallContentPart,
-  UIContentPart,
-} from "../../utils/AssistantTypes";
 import { ContentPartDisplay } from "../contentPart/ContentPartDisplay";
 import { ContentPartInProgressIndicator } from "../contentPart/ContentPartInProgressIndicator";
 import { ContentPartText } from "../contentPart/ContentPartText";
+import type {
+  ImageContentPartComponent,
+  TextContentPartComponent,
+  ToolCallContentPartComponent,
+  ToolCallContentPartProps,
+  UIContentPartComponent,
+} from "./ContentPartComponentTypes";
 
-type MessageContentProps = {
+export type MessageContentProps = {
   components?: {
-    Text?: ComponentType<{
-      part: TextContentPart;
-      status: "done" | "in_progress" | "error";
-    }>;
-    Image?: ComponentType<{
-      part: ImageContentPart;
-      status: "done" | "in_progress" | "error";
-    }>;
-    UI?: ComponentType<{
-      part: UIContentPart;
-      status: "done" | "in_progress" | "error";
-    }>;
+    Text?: TextContentPartComponent;
+    Image?: ImageContentPartComponent;
+    UI?: UIContentPartComponent;
     tools?: {
-      by_name?: Record<
-        string,
-        ComponentType<{
-          part: ToolCallContentPart;
-          status: "done" | "in_progress" | "error";
-        }>
-      >;
-      Fallback?: ComponentType<{
-        part: ToolCallContentPart;
-        status: "done" | "in_progress" | "error";
-      }>;
+      by_name?: Record<string, ToolCallContentPartComponent>;
+      Fallback?: ComponentType<ToolCallContentPartProps>;
     };
   };
 };