feat: ThreadConfig.UserMessage / AssistantMessage / EditComposer (#1172)

assistant-ui · Nov 13, 2024 · 0fb80c1 · 0fb80c1
1 parent 5462390
commit 0fb80c1
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/.changeset/serious-suns-laugh.md b/.changeset/serious-suns-laugh.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+feat: ThreadConfig.UserMessage / AssistantMessage / EditComposer
diff --git a/apps/docs/content/docs/components/content-part.mdx b/apps/docs/content/docs/components/content-part.mdx
@@ -12,7 +12,7 @@ import {
   ToolCallContentPartState,
 } from "@/generated/typeDocs";
 
-Each message (user or assistant) can have any number of content parts.
+Each message can have any number of content parts.
 Content parts are usually one of text, audio or tool-call.
 Additionally, image and file content parts are available, but rarely used, since these are usually included as content parts of message attachments.
 

diff --git a/packages/react/src/ui/thread-config.tsx b/packages/react/src/ui/thread-config.tsx
@@ -169,6 +169,9 @@ export type ThreadConfig = {
 
   components?:
     | {
+        UserMessage?: ComponentType | undefined;
+        AssistantMessage?: ComponentType | undefined;
+        EditComposer?: ComponentType | undefined;
         Composer?: ComponentType | undefined;
         ThreadWelcome?: ComponentType | undefined;
       }

diff --git a/packages/react/src/ui/thread.tsx b/packages/react/src/ui/thread.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ComponentType, forwardRef, type FC } from "react";
+import { forwardRef, type FC } from "react";
 import { ArrowDownIcon } from "lucide-react";
 
 import { withDefaults } from "./utils/withDefaults";
@@ -27,13 +27,14 @@ const Thread: FC<ThreadConfig> = (config) => {
     components: {
       Composer: ComposerComponent = Composer,
       ThreadWelcome: ThreadWelcomeComponent = ThreadWelcome,
+      ...messageComponents
     } = {},
   } = config;
   return (
     <ThreadRoot config={config}>
       <ThreadViewport>
         <ThreadWelcomeComponent />
-        <ThreadMessages />
+        <ThreadMessages components={messageComponents} />
         <ThreadFollowupSuggestions />
         <ThreadViewportFooter>
           <ThreadScrollToBottom />
@@ -77,11 +78,9 @@ const ThreadViewportFooter = withDefaults("div", {
 
 ThreadViewportFooter.displayName = "ThreadViewportFooter";
 
-const SystemMessage = () => null;
-
 const ThreadMessages: FC<{
   unstable_flexGrowDiv?: boolean;
-  components?: ThreadPrimitive.Messages.Props["components"];
+  components?: Partial<ThreadPrimitive.Messages.Props["components"]>;
 }> = ({ components, unstable_flexGrowDiv: flexGrowDiv = true, ...rest }) => {
   return (
     <>
@@ -90,7 +89,6 @@ const ThreadMessages: FC<{
           ...components,
           UserMessage: components?.UserMessage ?? UserMessage,
           AssistantMessage: components?.AssistantMessage ?? AssistantMessage,
-          SystemMessage: components?.SystemMessage ?? SystemMessage,
           EditComposer: components?.EditComposer ?? EditComposer,
         }}
         {...rest}