From fb32c4baaedaf820d92b0c201716d3f607c8de4e Mon Sep 17 00:00:00 2001
From: Alban Dumouilla <alban@dust.tt>
Date: Mon, 2 Dec 2024 10:11:18 +0100
Subject: [PATCH] Adding a function to get assistants' author on popover
 opening  (#8972)

* Adding a function to get assistants' author on popover opening for feedback

* Make getLastAuthor not mandatory

* Add getPopoverInfo to the FeedbackSelector component

* Rename feedbackselector

* Feedbackselector rename bis

* Cleaner spinner

* Stories change

* Bump version
---
 sparkle/package-lock.json                     |   4 +-
 sparkle/package.json                          |   2 +-
 .../ConversationMessageFeedbackSelector.tsx   | 121 --------------
 sparkle/src/components/FeedbackSelector.tsx   | 153 ++++++++++++++++++
 sparkle/src/components/index.ts               |   4 +-
 .../src/stories/FeedbackSelector.stories.tsx  |   7 +-
 6 files changed, 162 insertions(+), 129 deletions(-)
 delete mode 100644 sparkle/src/components/ConversationMessageFeedbackSelector.tsx
 create mode 100644 sparkle/src/components/FeedbackSelector.tsx

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index 30306fd190df..f807a5ab8e71 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.329",
+  "version": "0.2.330",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.329",
+      "version": "0.2.330",
       "license": "ISC",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
diff --git a/sparkle/package.json b/sparkle/package.json
index 58ef206cf7af..13eb41c3ad9f 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.329",
+  "version": "0.2.330",
   "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/ConversationMessageFeedbackSelector.tsx b/sparkle/src/components/ConversationMessageFeedbackSelector.tsx
deleted file mode 100644
index 7cd1e7b28bd5..000000000000
--- a/sparkle/src/components/ConversationMessageFeedbackSelector.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-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/FeedbackSelector.tsx b/sparkle/src/components/FeedbackSelector.tsx
new file mode 100644
index 000000000000..a5e8f852ee2c
--- /dev/null
+++ b/sparkle/src/components/FeedbackSelector.tsx
@@ -0,0 +1,153 @@
+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 Spinner from "@sparkle/components/Spinner";
+import { TextArea } from "@sparkle/components/TextArea";
+import { Tooltip } from "@sparkle/components/Tooltip";
+import { HandThumbDownIcon, HandThumbUpIcon } from "@sparkle/icons/solid";
+
+export type FeedbackAssistantBuilder = {
+  name: string;
+  pictureUrl: string;
+};
+export type ThumbReaction = "up" | "down";
+export type FeedbackType = {
+  thumb: ThumbReaction;
+  feedbackContent: string | null;
+};
+export interface FeedbackSelectorProps {
+  feedback: FeedbackType | null;
+  onSubmitThumb: (
+    p: FeedbackType & {
+      isToRemove: boolean;
+    }
+  ) => Promise<void>;
+  isSubmittingThumb: boolean;
+  getPopoverInfo?: () => JSX.Element | null;
+}
+
+export function FeedbackSelector({
+  feedback,
+  onSubmitThumb,
+  isSubmittingThumb,
+  getPopoverInfo,
+}: FeedbackSelectorProps) {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [localFeedbackContent, setLocalFeedbackContent] = React.useState<
+    string | null
+  >(null);
+  const [popOverInfo, setPopoverInfo] = React.useState<JSX.Element | null>(
+    null
+  );
+
+  // Reset local feedback content when popup opens
+  useEffect(() => {
+    if (isPopoverOpen) {
+      if (getPopoverInfo) {
+        setPopoverInfo(getPopoverInfo());
+      }
+      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">
+            <Tooltip
+              label="I found this helpful"
+              trigger={
+                <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}
+                />
+              }
+            />
+            <Tooltip
+              label="Report an issue with this answer"
+              trigger={
+                <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}>
+          {isSubmittingThumb ? (
+            <div className="m-3 s-flex s-items-center s-justify-center">
+              <Spinner size="sm" />
+            </div>
+          ) : (
+            <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>
+              {popOverInfo}
+              <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="Skip"
+                  onClick={() => setIsPopoverOpen(false)}
+                />
+              </div>
+            </div>
+          )}
+        </PopoverContent>
+      </PopoverRoot>
+    </div>
+  );
+}
diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts
index 9a7ea1cd10ef..d3fbb8d012a1 100644
--- a/sparkle/src/components/index.ts
+++ b/sparkle/src/components/index.ts
@@ -26,8 +26,6 @@ export { ContextItem } from "./ContextItem";
 export type { ConversationMessageSizeType } from "./ConversationMessage";
 export { ConversationMessage } from "./ConversationMessage";
 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";
@@ -56,6 +54,8 @@ export { ElementModal } from "./ElementModal";
 export type { EmojiMartData } from "./EmojiPicker";
 export { DataEmojiMart, EmojiPicker } from "./EmojiPicker";
 export { EmptyCTA, EmptyCTAButton } from "./EmptyCTA";
+export type { FeedbackSelectorProps } from "./FeedbackSelector";
+export { FeedbackSelector } from "./FeedbackSelector";
 export { FilterChips } from "./FilterChips";
 export { Div3D, Hover3D } from "./Hover3D";
 export { Hoverable } from "./Hoverable";
diff --git a/sparkle/src/stories/FeedbackSelector.stories.tsx b/sparkle/src/stories/FeedbackSelector.stories.tsx
index 37b371788e79..7baf0ec3bd5b 100644
--- a/sparkle/src/stories/FeedbackSelector.stories.tsx
+++ b/sparkle/src/stories/FeedbackSelector.stories.tsx
@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import {
-  ConversationMessageFeedbackSelectorProps,
   FeedbackSelector,
-} from "@sparkle/components/ConversationMessageFeedbackSelector";
+  FeedbackSelectorProps,
+} from "@sparkle/components/FeedbackSelector";
 
 const meta = {
   title: "Primitives/FeedbackSelector",
@@ -35,7 +35,7 @@ type Story = StoryObj<typeof meta>;
 // Wrap the story in a component that can use hooks
 const ExampleFeedbackComponent = () => {
   const [messageFeedback, setMessageFeedback] =
-    React.useState<ConversationMessageFeedbackSelectorProps>({
+    React.useState<FeedbackSelectorProps>({
       feedback: {
         thumb: "up",
         feedbackContent: null,
@@ -50,6 +50,7 @@ const ExampleFeedbackComponent = () => {
         }));
       },
       isSubmittingThumb: false,
+      getPopoverInfo: () => <div>Some info here, like the last author</div>,
     });
 
   return <FeedbackSelector {...messageFeedback} />;