feat: ability to override composer component (#947)

Yonom · Oct 3, 2024 · 82cccf9 · 82cccf9
1 parent f6a832e
commit 82cccf9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/packages/react/src/ui/thread-config.tsx b/packages/react/src/ui/thread-config.tsx
@@ -163,6 +163,10 @@ export type ThreadConfig = {
   strings?: StringsConfig;
 
   tools?: AssistantToolUI[]; // TODO add AssistantTool support
+
+  components?: {
+    Composer: ComponentType;
+  };
 };
 
 export const useThreadConfig = (): Omit<ThreadConfig, "runtime"> => {

diff --git a/packages/react/src/ui/thread.tsx b/packages/react/src/ui/thread.tsx
@@ -23,6 +23,8 @@ import { ThreadPrimitive, ThreadPrimitiveRootProps } from "../primitives";
 import { useThread } from "../context";
 
 const Thread: FC<ThreadConfig> = (config) => {
+  const { components: { Composer: ComposerComponent = Composer } = {} } =
+    config;
   return (
     <ThreadRoot config={config}>
       <ThreadViewport>
@@ -31,7 +33,7 @@ const Thread: FC<ThreadConfig> = (config) => {
         <ThreadFollowupSuggestions />
         <ThreadViewportFooter>
           <ThreadScrollToBottom />
-          <Composer />
+          <ComposerComponent />
         </ThreadViewportFooter>
       </ThreadViewport>
     </ThreadRoot>
@@ -103,24 +105,24 @@ const ThreadMessages: FC<{
 ThreadMessages.displayName = "ThreadMessages";
 
 const ThreadFollowupSuggestions: FC = () => {
-  const suggestions = useThread((t) =>
-    t.messages.length === 0 ? undefined : t.suggestions,
-  );
+  const suggestions = useThread((t) => t.suggestions);
 
   return (
-    <div className="aui-thread-followup-suggestions">
-      {suggestions?.map((suggestion, idx) => (
-        <ThreadPrimitive.Suggestion
-          key={idx}
-          className="aui-thread-followup-suggestion"
-          prompt={suggestion.prompt}
-          method="replace"
-          autoSend
-        >
-          {suggestion.prompt}
-        </ThreadPrimitive.Suggestion>
-      ))}
-    </div>
+    <ThreadPrimitive.If empty={false}>
+      <div className="aui-thread-followup-suggestions">
+        {suggestions?.map((suggestion, idx) => (
+          <ThreadPrimitive.Suggestion
+            key={idx}
+            className="aui-thread-followup-suggestion"
+            prompt={suggestion.prompt}
+            method="replace"
+            autoSend
+          >
+            {suggestion.prompt}
+          </ThreadPrimitive.Suggestion>
+        ))}
+      </div>
+    </ThreadPrimitive.If>
   );
 };