-
Notifications
You must be signed in to change notification settings - Fork 112
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
6 changed files
with
162 additions
and
129 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 0 additions & 121 deletions
121
sparkle/src/components/ConversationMessageFeedbackSelector.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters