feat: MessageState.submittedFeedback state (#972)

.changeset/silver-suns-destroy.md

@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+feat: MessageState.submittedFeedback state

packages/react-playground/src/lib/playground-runtime.ts

@@ -111,7 +111,7 @@ export class PlaygroundThreadRuntimeCore implements INTERNAL.ThreadRuntimeCore {
   public readonly capabilities = CAPABILITIES;
   public readonly extras = undefined;
   public readonly suggestions: readonly ThreadSuggestion[] = [];
-  public readonly speech = null;
+  public readonly speech = undefined;
   public readonly adapters = undefined;
 
   private configProvider = new ProxyConfigProvider();
@@ -282,6 +282,10 @@ export class PlaygroundThreadRuntimeCore implements INTERNAL.ThreadRuntimeCore {
     throw new Error("PlaygroundRuntime does not support speaking.");
   }
 
+  public getSubmittedFeedback() {
+    return undefined;
+  }
+
   public submitFeedback(): never {
     throw new Error("PlaygroundRuntime does not support feedback.");
   }

packages/react/src/api/MessageRuntime.ts

@@ -1,4 +1,7 @@
-import { SpeechState } from "../runtimes/core/ThreadRuntimeCore";
+import {
+  SpeechState,
+  SubmittedFeedback,
+} from "../runtimes/core/ThreadRuntimeCore";
 import {
   ThreadMessage,
   ThreadAssistantContentPart,
@@ -104,7 +107,8 @@ export type MessageState = ThreadMessage & {
   branchNumber: number;
   branchCount: number;
 
-  speech: SpeechState | null;
+  speech: SpeechState | undefined;
+  submittedFeedback: SubmittedFeedback | undefined;
 };
 
 export type MessageStateBinding = SubscribableWithState<MessageState>;

packages/react/src/api/ThreadRuntime.ts

@@ -5,6 +5,7 @@ import {
   SubmitFeedbackOptions,
   ThreadRuntimeCore,
   SpeechState,
+  SubmittedFeedback,
 } from "../runtimes/core/ThreadRuntimeCore";
 import { ExportedMessageRepository } from "../runtimes/utils/MessageRepository";
 import {
@@ -73,7 +74,7 @@ export type ThreadState = Readonly<{
   messages: readonly ThreadMessage[];
   suggestions: readonly ThreadSuggestion[];
   extras: unknown;
-  speech: SpeechState | null;
+  speech: SpeechState | undefined;
 }>;
 
 export const getThreadState = (runtime: ThreadRuntimeCore): ThreadState => {
@@ -92,6 +93,7 @@ export const getThreadState = (runtime: ThreadRuntimeCore): ThreadState => {
     speech: runtime.speech,
   });
 };
+
 export type ThreadRuntime = {
   composer: ThreadComposerRuntime;
   getState(): ThreadState;
@@ -146,7 +148,7 @@ export type ThreadRuntime = {
   /**
    * @deprecated Use `getState().speechState` instead. This will be removed in 0.6.0.
    */
-  speech: SpeechState | null;
+  speech: SpeechState | undefined;
 
   /**
    * @deprecated Use `getState().extras` instead. This will be removed in 0.6.0.
@@ -173,6 +175,11 @@ export type ThreadRuntime = {
    */
   speak: (messageId: string) => void;
 
+  /**
+   * @deprecated Use `getMesssageById(id).getState().submittedFeedback` instead. This will be removed in 0.6.0.
+   */
+  getSubmittedFeedback: (messageId: string) => SubmittedFeedback | undefined;
+
   /**
    * @deprecated Use `getMesssageById(id).submitFeedback({ type })` instead. This will be removed in 0.6.0.
    */
@@ -336,6 +343,10 @@ export class ThreadRuntimeImpl implements ThreadRuntimeCore, ThreadRuntime {
     return this._threadBinding.getState().stopSpeaking();
   }
 
+  public getSubmittedFeedback(messageId: string) {
+    return this._threadBinding.getState().getSubmittedFeedback(messageId);
+  }
+
   /**
    * @deprecated Use `getMesssageById(id).submitFeedback({ type })` instead. This will be removed in 0.6.0.
    */
@@ -375,9 +386,10 @@ export class ThreadRuntimeImpl implements ThreadRuntimeCore, ThreadRuntime {
           const message = messages[idx];
           if (!message) return SKIP_UPDATE;
 
-          const branches = this._threadBinding
-            .getState()
-            .getBranches(message.id);
+          const thread = this._threadBinding.getState();
+
+          const branches = thread.getBranches(message.id);
+          const submittedFeedback = thread.getSubmittedFeedback(message.id);
 
           return {
             ...message,
@@ -390,7 +402,10 @@ export class ThreadRuntimeImpl implements ThreadRuntimeCore, ThreadRuntime {
             branchNumber: branches.indexOf(message.id) + 1,
             branchCount: branches.length,
 
-            speech: speechState?.messageId === message.id ? speechState : null,
+            speech:
+              speechState?.messageId === message.id ? speechState : undefined,
+
+            submittedFeedback,
           } satisfies MessageState;
         },
         subscribe: (callback) => this._threadBinding.subscribe(callback),

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

@@ -6,11 +6,6 @@ export type MessageUtilsState = Readonly<{
 
   isHovering: boolean;
   setIsHovering: (value: boolean) => void;
-
-  /** @deprecated This will be moved to `useMessage().submittedFeedback`. This will be removed in 0.6.0. */
-  submittedFeedback: "positive" | "negative" | null;
-  /** @deprecated This will be moved to `useMessageRuntime().submitFeedback()` instead. This will be removed in 0.6.0. */
-  setSubmittedFeedback: (feedback: "positive" | "negative" | null) => void;
 }>;
 
 export const makeMessageUtilsStore = () =>
@@ -24,9 +19,5 @@ export const makeMessageUtilsStore = () =>
       setIsHovering: (value) => {
         set({ isHovering: value });
       },
-      submittedFeedback: null,
-      setSubmittedFeedback: (feedback) => {
-        set({ submittedFeedback: feedback });
-      },
     };
   });

packages/react/src/primitive-hooks/actionBar/useActionBarFeedbackNegative.tsx

@@ -1,16 +1,12 @@
 import { useCallback } from "react";
-import { useMessageRuntime, useMessageUtilsStore } from "../../context";
+import { useMessageRuntime } from "../../context";
 
 export const useActionBarFeedbackNegative = () => {
   const messageRuntime = useMessageRuntime();
-  const messageUtilsStore = useMessageUtilsStore();
 
   const callback = useCallback(() => {
-    messageRuntime.submitFeedback({
-      type: "negative",
-    });
-    messageUtilsStore.getState().setSubmittedFeedback("negative");
-  }, [messageUtilsStore, messageRuntime]);
+    messageRuntime.submitFeedback({ type: "negative" });
+  }, [messageRuntime]);
 
   return callback;
 };

packages/react/src/primitive-hooks/actionBar/useActionBarFeedbackPositive.tsx

@@ -1,16 +1,12 @@
 import { useCallback } from "react";
-import { useMessageRuntime, useMessageUtilsStore } from "../../context";
+import { useMessageRuntime } from "../../context";
 
 export const useActionBarFeedbackPositive = () => {
   const messageRuntime = useMessageRuntime();
-  const messageUtilsStore = useMessageUtilsStore();
 
   const callback = useCallback(() => {
-    messageRuntime.submitFeedback({
-      type: "positive",
-    });
-    messageUtilsStore.getState().setSubmittedFeedback("positive");
-  }, [messageUtilsStore, messageRuntime]);
+    messageRuntime.submitFeedback({ type: "positive" });
+  }, [messageRuntime]);
 
   return callback;
 };

packages/react/src/primitive-hooks/message/useMessageIf.tsx

@@ -26,8 +26,8 @@ export const useMessageIf = (props: UseMessageIfProps) => {
   return useCombinedStore(
     [messageStore, messageUtilsStore],
     (
-      { role, attachments, branchCount, isLast, speech },
-      { isCopied, isHovering, submittedFeedback },
+      { role, attachments, branchCount, isLast, speech, submittedFeedback },
+      { isCopied, isHovering },
     ) => {
       if (props.hasBranches === true && branchCount < 2) return false;
 
@@ -57,7 +57,7 @@ export const useMessageIf = (props: UseMessageIfProps) => {
 
       if (
         props.submittedFeedback !== undefined &&
-        submittedFeedback !== props.submittedFeedback
+        (   submittedFeedback?.type ?? null) !== props.submittedFeedback
       )
         return false;
 

packages/react/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { useActionBarFeedbackNegative } from "../../primitive-hooks/actionBar/useActionBarFeedbackNegative";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { useMessageUtils } from "../../context";
+import { useMessage } from "../../context";
 import { Primitive } from "@radix-ui/react-primitive";
 
 /**
@@ -22,8 +22,8 @@ export const ActionBarPrimitiveFeedbackNegative = forwardRef<
   ActionBarPrimitiveFeedbackNegative.Element,
   ActionBarPrimitiveFeedbackNegative.Props
 >(({ onClick, disabled, ...props }, forwardedRef) => {
-  const isSubmitted = useMessageUtils(
-    (u) => u.submittedFeedback === "negative",
+  const isSubmitted = useMessage(
+    (u) => u.submittedFeedback?.type === "negative",
   );
   const callback = useActionBarFeedbackNegative();
   return (

packages/react/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { useActionBarFeedbackPositive } from "../../primitive-hooks/actionBar/useActionBarFeedbackPositive";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { useMessageUtils } from "../../context";
+import { useMessage } from "../../context";
 import { Primitive } from "@radix-ui/react-primitive";
 
 /**
@@ -22,8 +22,8 @@ export const ActionBarPrimitiveFeedbackPositive = forwardRef<
   ActionBarPrimitiveFeedbackPositive.Element,
   ActionBarPrimitiveFeedbackPositive.Props
 >(({ onClick, disabled, ...props }, forwardedRef) => {
-  const isSubmitted = useMessageUtils(
-    (u) => u.submittedFeedback === "positive",
+  const isSubmitted = useMessage(
+    (u) => u.submittedFeedback?.type === "positive",
   );
   const callback = useActionBarFeedbackPositive();
   return (

packages/react/src/primitives/actionBar/useActionBarFloatStatus.tsx

@@ -44,7 +44,7 @@ export const useActionBarFloatStatus = ({
       // floating status
       if (
         autohideFloat === "always" ||
-        (autohideFloat === "single-branch" && m.branches.length <= 1)
+        (autohideFloat === "single-branch" && m.branchCount <= 1)
       )
         return HideAndFloatStatus.Floating;
 

packages/react/src/runtimes/core/BaseThreadRuntimeCore.tsx

@@ -15,6 +15,7 @@ import {
   ThreadRuntimeCore,
   SpeechState,
   RuntimeCapabilities,
+  SubmittedFeedback,
 } from "../core/ThreadRuntimeCore";
 import { DefaultEditComposerRuntimeCore } from "../composer/DefaultEditComposerRuntimeCore";
 import { SpeechSynthesisAdapter } from "../speech";
@@ -93,17 +94,23 @@ export abstract class BaseThreadRuntimeCore implements ThreadRuntimeCore {
     return () => this._subscriptions.delete(callback);
   }
 
+  private _submittedFeedback: Record<string, SubmittedFeedback> = {};
+
+  public getSubmittedFeedback(messageId: string) {
+    return this._submittedFeedback[messageId];
+  }
+
   public submitFeedback({ messageId, type }: SubmitFeedbackOptions) {
     const adapter = this.adapters?.feedback;
     if (!adapter) throw new Error("Feedback adapter not configured");
 
     const { message } = this.repository.getMessage(messageId);
     adapter.submit({ message, type });
+    this._submittedFeedback[messageId] = { type };
   }
 
-  // TODO speech runtime?
   private _stopSpeaking: Unsubscribe | undefined;
-  public speech: SpeechState | null = null;
+  public speech: SpeechState | undefined;
 
   public speak(messageId: string) {
     const adapter = this.adapters?.speech;
@@ -117,7 +124,7 @@ export abstract class BaseThreadRuntimeCore implements ThreadRuntimeCore {
     const unsub = utterance.subscribe(() => {
       if (utterance.status.type === "ended") {
         this._stopSpeaking = undefined;
-        this.speech = null;
+        this.speech = undefined;
       } else {
         this.speech = { messageId, status: utterance.status };
       }
@@ -128,7 +135,7 @@ export abstract class BaseThreadRuntimeCore implements ThreadRuntimeCore {
     this._stopSpeaking = () => {
       utterance.cancel();
       unsub();
-      this.speech = null;
+      this.speech = undefined;
       this._stopSpeaking = undefined;
     };
   }

packages/react/src/runtimes/core/ThreadRuntimeCore.tsx

@@ -39,6 +39,10 @@ export type SpeechState = Readonly<{
   status: SpeechSynthesisAdapter.Status;
 }>;
 
+export type SubmittedFeedback = Readonly<{
+  type: "negative" | "positive";
+}>;
+
 export type ThreadRuntimeCore = Readonly<{
   getBranches: (messageId: string) => readonly string[];
   switchToBranch: (branchId: string) => void;
@@ -52,6 +56,7 @@ export type ThreadRuntimeCore = Readonly<{
   speak: (messageId: string) => void;
   stopSpeaking: () => void;
 
+  getSubmittedFeedback: (messageId: string) => SubmittedFeedback | undefined;
   submitFeedback: (feedback: SubmitFeedbackOptions) => void;
 
   getModelConfig: () => ModelConfig;
@@ -60,7 +65,7 @@ export type ThreadRuntimeCore = Readonly<{
   getEditComposer: (messageId: string) => ComposerRuntimeCore | undefined;
   beginEdit: (messageId: string) => void;
 
-  speech: SpeechState | null;
+  speech: SpeechState | undefined;
 
   capabilities: Readonly<RuntimeCapabilities>;
   threadId: string;