From 6a982ee29140ef0d5066ebf7ce53bd068217ec49 Mon Sep 17 00:00:00 2001
From: Hamed Mohammadpour <HamedMP@users.noreply.github.com>
Date: Thu, 25 Apr 2024 15:51:49 +0200
Subject: [PATCH 1/2] Make Follow-up questions as a bubble. Remove scrollbars.

---
 components/Session.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Session.tsx b/components/Session.tsx
index 6e42776..e0694fd 100644
--- a/components/Session.tsx
+++ b/components/Session.tsx
@@ -201,7 +201,7 @@ 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-lg -translate-y-full transform grid-flow-col gap-2 overflow-x-auto pb-4 opacity-100 transition-all duration-1000 ease-in-out md:max-w-md lg:max-w-xl",
           {
             "opacity-0": !suggestions || !suggestions.length,
           },
@@ -209,7 +209,7 @@ const FollowupForm: FC<{
       >
         {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,

From 9dbab18881a5c022889c7f02c72418a977144e75 Mon Sep 17 00:00:00 2001
From: Hamed Mohammadpour <HamedMP@users.noreply.github.com>
Date: Thu, 25 Apr 2024 17:07:36 +0200
Subject: [PATCH 2/2] Hide Feedback buttons when answer is being generated
 (loading)

---
 components/Feedback.tsx | 11 ++++++-----
 components/Session.tsx  |  4 ++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/Feedback.tsx b/components/Feedback.tsx
index feda3b8..6475769 100644
--- a/components/Feedback.tsx
+++ b/components/Feedback.tsx
@@ -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} />
diff --git a/components/Session.tsx b/components/Session.tsx
index e0694fd..87967e9 100644
--- a/components/Session.tsx
+++ b/components/Session.tsx
@@ -114,7 +114,7 @@ export const Session: FC<{ sessionData: Step[] }> = ({
 
       <Feedback
         recordFeedback={recordFeedback}
-        isVisible={true}
+        isLoading={loading}
         sessionId={sessionId}
       />
 
@@ -201,7 +201,7 @@ const FollowupForm: FC<{
     >
       <div
         className={cn(
-          "absolute bottom-0 left-0 right-0 mx-auto grid w-full max-w-lg -translate-y-full transform grid-flow-col 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,
           },