Skip to content

UI updates: Follow-up bubble + Hide Feedback div when answer is loading. #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HamedMP wants to merge 2 commits into
base: main
Choose a base branch
from
Open

UI updates: Follow-up bubble + Hide Feedback div when answer is loading. #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a982ee
Make Follow-up questions as a bubble. Remove scrollbars.
HamedMP Apr 25, 2024
9dbab18
Hide Feedback buttons when answer is being generated (loading)
HamedMP Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions components/Feedback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,24 +30,25 @@ import { ChatBubbleIcon } from "@radix-ui/react-icons";
import { Textarea } from "./ui/textarea";

export const Feedback: FC<{
isVisible: boolean;
isLoading: boolean;
recordFeedback: (feedback: "positive" | "negative") => void;
sessionId: string;
}> = ({ isVisible, recordFeedback, sessionId }) => {
}> = ({ isLoading: isLoading, recordFeedback, sessionId }) => {
const [isFeedbackRecorded, setIsFeedbackRecorded] = useState(false);

const isComponentVisible = isLoading ? "hidden" : "opacity-100"; // hide the component when the answer is loading. TODO: fix scroll to bottom when it reappears.
const feedbackButtonVisibility = [
isVisible ? "opacity-100" : "hidden",
isFeedbackRecorded && "hidden duration-300 ease-in",
];

return (
<div
className={cn(
"mb-6 mt-2 flex w-full max-w-xs flex-col pt-1 transition-opacity duration-700 ease-in md:max-w-md lg:max-w-xl",
"mb-6 mt-2 flex w-full max-w-xs flex-col pt-1 transition-all duration-500 ease-in-out md:max-w-md lg:max-w-xl",
isComponentVisible,
)}
>
<div className="flex flex-col">
<div className={cn("flex flex-col")}>
<div className="mt-2 flex w-full justify-end gap-2">
<TypedFeedbackButton sessionId={sessionId} />
<ShareButton sessionId={sessionId} />
Expand Down
6 changes: 3 additions & 3 deletions components/Session.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export const Session: FC<{ sessionData: Step[] }> = ({

<Feedback
recordFeedback={recordFeedback}
isVisible={true}
isLoading={loading}
sessionId={sessionId}
/>

Expand Down Expand Up @@ -201,15 +201,15 @@ const FollowupForm: FC<{
>
<div
className={cn(
"absolute bottom-0 left-0 right-0 mx-auto flex w-full max-w-xs -translate-y-full transform gap-2 overflow-x-auto pb-4 opacity-100 transition-all duration-1000 ease-in-out md:max-w-md lg:max-w-xl",
"absolute bottom-0 left-0 right-0 mx-auto grid w-full max-w-xs -translate-y-full transform grid-flow-col gap-2 overflow-x-auto pb-1 opacity-100 transition-all duration-1000 ease-in-out md:max-w-md lg:max-w-xl",
{
"opacity-0": !suggestions || !suggestions.length,
},
)}
>
{suggestions?.map?.((suggestion: string) => (
<Card
className="pointer-events-auto flex-shrink-0 cursor-pointer bg-card/90 p-4 py-2 text-sm transition-colors duration-100 ease-in-out hover:bg-gray-400/100"
className="pointer-events-auto w-fit flex-shrink-0 cursor-pointer bg-card/90 p-3 py-1 text-center text-sm transition-colors duration-100 ease-in-out hover:bg-gray-400/100"
onClick={async (e) => {
posthog.capture("followup_clicked", {
sessionId,
Expand Down