diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index 2ae3be4999fe..64ab778fe32d 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.324",
+  "version": "0.2.325",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.324",
+      "version": "0.2.325",
       "license": "ISC",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
diff --git a/sparkle/package.json b/sparkle/package.json
index c2d5b16f2b10..1d6340d7cc7d 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.324",
+  "version": "0.2.325",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
diff --git a/sparkle/src/components/ConversationMessage.tsx b/sparkle/src/components/ConversationMessage.tsx
index a74569a80a5b..1b2ad3524d3a 100644
--- a/sparkle/src/components/ConversationMessage.tsx
+++ b/sparkle/src/components/ConversationMessage.tsx
@@ -1,11 +1,6 @@
 import React from "react";
 
 import { Button } from "@sparkle/components";
-import {
-  ConversationMessageActions,
-  ConversationMessageEmojiSelectorProps,
-  ConversationMessageThumbSelectorProps,
-} from "@sparkle/components/ConversationMessageActions";
 import { ConversationMessageContent } from "@sparkle/components/ConversationMessageContent";
 import { ConversationMessageHeader } from "@sparkle/components/ConversationMessageHeader";
 import { cn } from "@sparkle/lib/utils";
@@ -29,8 +24,6 @@ type ConversationMessageProps = {
   buttons?: React.ReactElement<typeof Button>[];
   children?: React.ReactNode;
   citations?: React.ReactElement[];
-  messageEmoji?: ConversationMessageEmojiSelectorProps;
-  messageThumb?: ConversationMessageThumbSelectorProps;
   name: string | null;
   pictureUrl?: string | React.ReactNode | null;
   renderName?: (name: string | null) => React.ReactNode;
@@ -47,8 +40,6 @@ export function ConversationMessage({
   buttons,
   children,
   citations,
-  messageEmoji,
-  messageThumb,
   name,
   pictureUrl,
   renderName = (name) => (
@@ -77,11 +68,7 @@ export function ConversationMessage({
         {children}
       </ConversationMessageContent>
 
-      <ConversationMessageActions
-        buttons={buttons}
-        messageEmoji={messageEmoji}
-        messageThumb={messageThumb}
-      />
+      <div className="s-flex s-justify-end s-gap-2">{buttons}</div>
     </div>
   );
 }
diff --git a/sparkle/src/components/ConversationMessageActions.tsx b/sparkle/src/components/ConversationMessageActions.tsx
deleted file mode 100644
index 31895691bb64..000000000000
--- a/sparkle/src/components/ConversationMessageActions.tsx
+++ /dev/null
@@ -1,310 +0,0 @@
-import React, { useRef } from "react";
-
-import { Button } from "@sparkle/components/Button";
-import {
-  DataEmojiMart,
-  EmojiMartData,
-  EmojiPicker,
-} from "@sparkle/components/EmojiPicker";
-import { Page } from "@sparkle/components/Page";
-import {
-  Popover,
-  PopoverContent,
-  PopoverRoot,
-  PopoverTrigger,
-} from "@sparkle/components/Popover";
-import { TextArea } from "@sparkle/components/TextArea";
-import {
-  HandThumbDownIcon,
-  HandThumbUpIcon,
-  ReactionIcon,
-} from "@sparkle/icons/solid";
-import { cn } from "@sparkle/lib/utils";
-
-type ConversationMessageActionsProps = {
-  buttons?: React.ReactElement<typeof Button>[];
-  messageEmoji?: ConversationMessageEmojiSelectorProps;
-  messageThumb?: ConversationMessageThumbSelectorProps;
-};
-
-export function ConversationMessageActions({
-  buttons = [],
-  messageEmoji,
-  messageThumb,
-}: ConversationMessageActionsProps) {
-  if (messageThumb) {
-    buttons.push(
-      <ConversationMessageThumbsSelector
-        key="thumbs-selector"
-        onSubmitThumb={messageThumb.onSubmitThumb}
-        isSubmittingThumb={messageThumb.isSubmittingThumb}
-      />
-    );
-  }
-
-  if (messageEmoji) {
-    buttons.push(
-      <ConversationMessageEmojiSelector
-        key="emoji-selector"
-        reactions={messageEmoji.reactions}
-        onSubmitEmoji={messageEmoji.onSubmitEmoji}
-        isSubmittingEmoji={messageEmoji.isSubmittingEmoji}
-      />
-    );
-  }
-
-  if (buttons.length === 0) {
-    return false;
-  }
-
-  return <div className="s-flex s-justify-end s-gap-2">{buttons}</div>;
-}
-
-const MAX_MORE_REACTIONS_TO_SHOW = 9;
-
-export type EmojoReaction = {
-  emoji: string;
-  hasReacted: boolean;
-  count: number;
-};
-export interface ConversationMessageEmojiSelectorProps {
-  reactions: EmojoReaction[];
-  onSubmitEmoji: (p: { emoji: string; isToRemove: boolean }) => Promise<void>;
-  isSubmittingEmoji: boolean;
-}
-
-export type ThumbReaction = "up" | "down";
-export interface ConversationMessageThumbSelectorProps {
-  onSubmitThumb: (p: {
-    thumb: string;
-    isToRemove: boolean;
-    feedback?: string | null;
-  }) => Promise<void>;
-  isSubmittingThumb: boolean;
-}
-
-function ConversationMessageEmojiSelector({
-  reactions,
-  onSubmitEmoji,
-  isSubmittingEmoji,
-}: ConversationMessageEmojiSelectorProps) {
-  const emojiData = DataEmojiMart as EmojiMartData;
-
-  let slicedReactions = [...reactions];
-  let hasMoreReactions = null;
-  if (slicedReactions.length > MAX_MORE_REACTIONS_TO_SHOW) {
-    hasMoreReactions = slicedReactions.length - MAX_MORE_REACTIONS_TO_SHOW;
-    slicedReactions = slicedReactions.slice(0, MAX_MORE_REACTIONS_TO_SHOW);
-  }
-
-  return (
-    <>
-      <EmojiSelector
-        reactions={reactions}
-        onSubmitEmoji={onSubmitEmoji}
-        emojiData={emojiData}
-        isSubmittingEmoji={isSubmittingEmoji}
-      />
-      {slicedReactions.map((reaction, index) => {
-        const hasReacted = reaction.hasReacted;
-        const emoji = emojiData?.emojis[reaction.emoji];
-        const nativeEmoji = emoji?.skins[0].native;
-        if (!nativeEmoji) {
-          return null;
-        }
-        return (
-          <ButtonEmoji
-            key={`${reaction.emoji}-${index}`}
-            variant={hasReacted ? "selected" : "unselected"}
-            emoji={nativeEmoji}
-            count={reaction.count.toString()}
-            onClick={async () =>
-              onSubmitEmoji({
-                emoji: reaction.emoji,
-                isToRemove: hasReacted,
-              })
-            }
-          />
-        );
-      })}
-      {hasMoreReactions && (
-        <div className="px-2 pt-1.5 text-xs font-medium">
-          +{hasMoreReactions}
-        </div>
-      )}
-    </>
-  );
-}
-
-interface ButtonEmojiProps {
-  variant?: "selected" | "unselected";
-  count?: string;
-  emoji?: string;
-  onClick?: () => void;
-}
-
-export function ButtonEmoji({
-  variant,
-  emoji,
-  count,
-  onClick,
-}: ButtonEmojiProps) {
-  return (
-    <div
-      className={cn(
-        variant === "selected" ? "text-action-500" : "text-element-800",
-        "flex cursor-pointer items-center gap-1.5 py-0.5 text-base font-medium transition-all duration-300 hover:text-action-400 active:text-action-600"
-      )}
-      onClick={onClick}
-    >
-      {emoji}
-      {count && <span className="text-xs">{count}</span>}
-    </div>
-  );
-}
-
-function EmojiSelector({
-  reactions,
-  onSubmitEmoji,
-  emojiData,
-  isSubmittingEmoji = false,
-}: {
-  emojiData: EmojiMartData | null;
-} & ConversationMessageEmojiSelectorProps) {
-  const buttonRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <Popover
-      fullWidth
-      popoverTriggerAsChild
-      trigger={
-        <div ref={buttonRef}>
-          <Button
-            variant="outline"
-            size="xs"
-            icon={ReactionIcon}
-            isSelect
-            disabled={isSubmittingEmoji}
-          />
-        </div>
-      }
-      content={
-        <EmojiPicker
-          theme="light"
-          previewPosition="none"
-          data={emojiData ?? undefined}
-          onEmojiSelect={async (emojiData) => {
-            const reaction = reactions.find((r) => r.emoji === emojiData.id);
-            const hasReacted = reaction ? reaction.hasReacted : false;
-            await onSubmitEmoji({
-              emoji: emojiData.id,
-              isToRemove: hasReacted,
-            });
-            buttonRef.current?.click();
-          }}
-        />
-      }
-    />
-  );
-}
-
-function ConversationMessageThumbsSelector({
-  onSubmitThumb,
-  isSubmittingThumb,
-}: ConversationMessageThumbSelectorProps) {
-  return (
-    <ThumbsSelector
-      isSubmittingThumb={isSubmittingThumb}
-      onSubmitThumb={onSubmitThumb}
-    />
-  );
-}
-
-function ThumbsSelector({
-  isSubmittingThumb = false,
-  onSubmitThumb,
-}: ConversationMessageThumbSelectorProps) {
-  const [selectedThumb, setSelectedThumb] =
-    React.useState<ThumbReaction | null>(null);
-  const [feedback, setFeedback] = React.useState<string | null>(null);
-  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const selectThumb = async (thumb: ThumbReaction) => {
-    if (selectedThumb === thumb) {
-      setSelectedThumb(null);
-      setIsPopoverOpen(false);
-      await onSubmitThumb({ thumb, isToRemove: true });
-      return;
-    }
-    setSelectedThumb(thumb);
-    setIsPopoverOpen(true);
-    await onSubmitThumb({ thumb, isToRemove: false });
-  };
-
-  return (
-    <div ref={containerRef} className="s-flex s-items-center">
-      <PopoverRoot open={isPopoverOpen}>
-        <PopoverTrigger asChild>
-          <div className="s-flex s-items-center">
-            <Button
-              variant={selectedThumb === "up" ? "highlight" : "outline"}
-              size="xs"
-              disabled={isSubmittingThumb}
-              onClick={() => selectThumb("up")}
-              className={"s-rounded-r-none s-border-r-0"}
-              icon={HandThumbUpIcon}
-            />
-            <Button
-              variant={selectedThumb === "down" ? "highlight" : "outline"}
-              size="xs"
-              disabled={isSubmittingThumb}
-              onClick={() => selectThumb("down")}
-              className={"s-rounded-l-none s-border-l-0"}
-              icon={HandThumbDownIcon}
-            />
-          </div>
-        </PopoverTrigger>
-        <PopoverContent fullWidth={true}>
-          <div className="s-w-80 s-p-4">
-            <Page.H variant="h6">
-              {selectedThumb === "up"
-                ? "🎉 Glad you liked it! Tell us more?"
-                : "🫠 Help make the answers better!"}
-            </Page.H>
-            <TextArea
-              placeholder={
-                selectedThumb === "up"
-                  ? "What did you like?"
-                  : "Tell us what went wrong so we can make this assistant better."
-              }
-              className="s-mt-4"
-              rows={3}
-              value={feedback ?? ""}
-              onChange={(e) => setFeedback(e.target.value)}
-            />
-            <div className="s-mt-4 s-flex s-justify-between s-gap-2">
-              <Button
-                variant="primary"
-                label="Submit feedback"
-                onClick={async () => {
-                  await onSubmitThumb({
-                    thumb: selectedThumb ?? "up",
-                    isToRemove: false,
-                    feedback: feedback,
-                  });
-                  setIsPopoverOpen(false);
-                }}
-              />
-              <Button
-                variant="ghost"
-                label="Cancel"
-                onClick={() => setIsPopoverOpen(false)}
-              />
-            </div>
-          </div>
-        </PopoverContent>
-      </PopoverRoot>
-    </div>
-  );
-}
diff --git a/sparkle/src/components/ConversationMessageFeedbackSelector.tsx b/sparkle/src/components/ConversationMessageFeedbackSelector.tsx
new file mode 100644
index 000000000000..7cd1e7b28bd5
--- /dev/null
+++ b/sparkle/src/components/ConversationMessageFeedbackSelector.tsx
@@ -0,0 +1,121 @@
+import React, { useEffect, useRef } from "react";
+
+import { Button } from "@sparkle/components/Button";
+import { Page } from "@sparkle/components/Page";
+import {
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger,
+} from "@sparkle/components/Popover";
+import { TextArea } from "@sparkle/components/TextArea";
+import { HandThumbDownIcon, HandThumbUpIcon } from "@sparkle/icons/solid";
+
+export type ThumbReaction = "up" | "down";
+export type ConversationMessageFeedbackType = {
+  thumb: ThumbReaction;
+  feedbackContent: string | null;
+};
+export interface ConversationMessageFeedbackSelectorProps {
+  feedback: ConversationMessageFeedbackType | null;
+  onSubmitThumb: (
+    p: ConversationMessageFeedbackType & {
+      isToRemove: boolean;
+    }
+  ) => Promise<void>;
+  isSubmittingThumb: boolean;
+}
+
+export function FeedbackSelector(
+  messageFeedback: ConversationMessageFeedbackSelectorProps
+) {
+  const { feedback, onSubmitThumb, isSubmittingThumb } = messageFeedback;
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [localFeedbackContent, setLocalFeedbackContent] = React.useState<
+    string | null
+  >(null);
+
+  // Reset local feedback content when popup opens
+  useEffect(() => {
+    if (isPopoverOpen) {
+      setLocalFeedbackContent(feedback?.feedbackContent ?? null);
+    }
+  }, [isPopoverOpen, feedback?.feedbackContent]);
+
+  const selectThumb = async (thumb: ThumbReaction) => {
+    const isToRemove = feedback?.thumb === thumb;
+    setIsPopoverOpen(!isToRemove);
+
+    await onSubmitThumb({
+      feedbackContent: localFeedbackContent,
+      thumb,
+      isToRemove,
+    });
+  };
+
+  return (
+    <div ref={containerRef} className="s-flex s-items-center">
+      <PopoverRoot open={isPopoverOpen}>
+        <PopoverTrigger asChild>
+          <div className="s-flex s-items-center">
+            <Button
+              variant={feedback?.thumb === "up" ? "highlight" : "outline"}
+              size="xs"
+              disabled={isSubmittingThumb}
+              onClick={() => selectThumb("up")}
+              className={"s-rounded-r-none s-border-r-0"}
+              icon={HandThumbUpIcon}
+            />
+            <Button
+              variant={feedback?.thumb === "down" ? "highlight" : "outline"}
+              size="xs"
+              disabled={isSubmittingThumb}
+              onClick={() => selectThumb("down")}
+              className={"s-rounded-l-none s-border-l-0"}
+              icon={HandThumbDownIcon}
+            />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent fullWidth={true}>
+          <div className="s-w-80 s-p-4">
+            <Page.H variant="h6">
+              {feedback?.thumb === "up"
+                ? "🎉 Glad you liked it! Tell us more?"
+                : "🫠 Help make the answers better!"}
+            </Page.H>
+            <TextArea
+              placeholder={
+                feedback?.thumb === "up"
+                  ? "What did you like?"
+                  : "Tell us what went wrong so we can make this assistant better."
+              }
+              className="s-mt-4"
+              rows={3}
+              value={localFeedbackContent ?? ""}
+              onChange={(e) => setLocalFeedbackContent(e.target.value)}
+            />
+            <div className="s-mt-4 s-flex s-justify-between s-gap-2">
+              <Button
+                variant="primary"
+                label="Submit feedback"
+                onClick={async () => {
+                  await onSubmitThumb({
+                    thumb: feedback?.thumb ?? "up",
+                    isToRemove: false,
+                    feedbackContent: localFeedbackContent,
+                  });
+                  setIsPopoverOpen(false);
+                }}
+              />
+              <Button
+                variant="ghost"
+                label="Cancel"
+                onClick={() => setIsPopoverOpen(false)}
+              />
+            </div>
+          </div>
+        </PopoverContent>
+      </PopoverRoot>
+    </div>
+  );
+}
diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts
index f2c5b5f982e5..e4a60c56d757 100644
--- a/sparkle/src/components/index.ts
+++ b/sparkle/src/components/index.ts
@@ -24,12 +24,9 @@ export { ContentMessage } from "./ContentMessage";
 export { ContextItem } from "./ContextItem";
 export type { ConversationMessageSizeType } from "./ConversationMessage";
 export { ConversationMessage } from "./ConversationMessage";
-export type {
-  ConversationMessageEmojiSelectorProps,
-  ConversationMessageThumbSelectorProps,
-} from "./ConversationMessageActions";
-export { ConversationMessageActions } from "./ConversationMessageActions";
 export { ConversationMessageContent } from "./ConversationMessageContent";
+export type { ConversationMessageFeedbackSelectorProps } from "./ConversationMessageFeedbackSelector";
+export { FeedbackSelector } from "./ConversationMessageFeedbackSelector";
 export { ConversationMessageHeader } from "./ConversationMessageHeader";
 export { DataTable } from "./DataTable";
 export { Dialog } from "./Dialog";
diff --git a/sparkle/src/stories/ConversationMessageActions.stories.tsx b/sparkle/src/stories/ConversationMessageActions.stories.tsx
deleted file mode 100644
index d166c37368b4..000000000000
--- a/sparkle/src/stories/ConversationMessageActions.stories.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-
-import {
-  ConversationMessageEmojiSelectorProps,
-  ConversationMessageThumbSelectorProps,
-} from "@sparkle/components/ConversationMessageActions";
-
-import {
-  ArrowPathIcon,
-  Button,
-  ClipboardIcon,
-  ConversationMessageActions,
-} from "../index_with_tw_base";
-
-const buttons = [
-  <Button
-    key="copy-msg-button"
-    tooltip="Copy to clipboard"
-    variant="outline"
-    size="xs"
-    onClick={() => {
-      console.log("Copy to clipboard");
-    }}
-    icon={ClipboardIcon}
-  />,
-  <Button
-    key="retry-msg-button"
-    tooltip="Retry"
-    variant="outline"
-    size="xs"
-    onClick={() => {
-      console.log("Retry");
-    }}
-    icon={ArrowPathIcon}
-    disabled={false}
-  />,
-];
-
-const messageEmoji: ConversationMessageEmojiSelectorProps = {
-  reactions: [
-    {
-      emoji: "disguised_face",
-      hasReacted: true,
-      count: 3,
-    },
-  ],
-  onSubmitEmoji: async () => {},
-  isSubmittingEmoji: false,
-};
-
-const messageThumb: ConversationMessageThumbSelectorProps = {
-  onSubmitThumb: async (element) => {
-    console.log("Thumb clicked", element);
-  },
-  isSubmittingThumb: false,
-};
-
-const meta = {
-  title: "Primitives/ConversationMessageActions",
-  component: ConversationMessageActions,
-  argTypes: {
-    buttons: {
-      description: "The buttons to display",
-      control: "object",
-    },
-    messageEmoji: {
-      description: "The emoji selector to display",
-      control: {
-        type: "object",
-      },
-    },
-    messageThumb: {
-      description: "Whether to show the thumbs selector",
-      control: {
-        type: "object",
-      },
-    },
-  },
-} satisfies Meta<React.ComponentProps<typeof ConversationMessageActions>>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const ExamplePicker: Story = {
-  args: {
-    buttons,
-    messageEmoji,
-    messageThumb,
-  },
-};
diff --git a/sparkle/src/stories/FeedbackSelector.stories.tsx b/sparkle/src/stories/FeedbackSelector.stories.tsx
new file mode 100644
index 000000000000..37b371788e79
--- /dev/null
+++ b/sparkle/src/stories/FeedbackSelector.stories.tsx
@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import {
+  ConversationMessageFeedbackSelectorProps,
+  FeedbackSelector,
+} from "@sparkle/components/ConversationMessageFeedbackSelector";
+
+const meta = {
+  title: "Primitives/FeedbackSelector",
+  component: FeedbackSelector,
+  argTypes: {
+    feedback: {
+      thumb: "up",
+      feedbackContent: null,
+    },
+    onSubmitThumb: {
+      description: "The submit function",
+      control: {
+        type: "object",
+      },
+    },
+    isSubmittingThumb: {
+      description: "Whether the thumb is submitting",
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+} satisfies Meta<React.ComponentProps<typeof FeedbackSelector>>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrap the story in a component that can use hooks
+const ExampleFeedbackComponent = () => {
+  const [messageFeedback, setMessageFeedback] =
+    React.useState<ConversationMessageFeedbackSelectorProps>({
+      feedback: {
+        thumb: "up",
+        feedbackContent: null,
+      },
+      onSubmitThumb: async (element) => {
+        setMessageFeedback((prev) => ({
+          ...prev,
+          feedback: {
+            thumb: element.thumb,
+            feedbackContent: element.feedbackContent,
+          },
+        }));
+      },
+      isSubmittingThumb: false,
+    });
+
+  return <FeedbackSelector {...messageFeedback} />;
+};
+
+export const ExamplePicker: Story = {
+  args: {
+    feedback: {
+      thumb: "up",
+      feedbackContent: null,
+    },
+    onSubmitThumb: async (element) => {
+      console.log(element);
+    },
+    isSubmittingThumb: false,
+  },
+  render: () => <ExampleFeedbackComponent />,
+};