From 8343fe63cb7ea1a197d1db760c67cf3514cc39b9 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sat, 14 Jun 2025 02:02:36 +0530
Subject: [PATCH 1/2] (feat:bubble) collapsable questions

---
 .../src/conversation/ConversationBubble.tsx   | 38 +++++++++++++++++--
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 1bf8dafe..422e0de6 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,6 +1,6 @@
 import 'katex/dist/katex.min.css';
 
-import { forwardRef, Fragment, useRef, useState } from 'react';
+import { forwardRef, Fragment, useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
@@ -90,14 +90,24 @@ const ConversationBubble = forwardRef<
   const [isDislikeHovered, setIsDislikeHovered] = useState(false);
   const [isQuestionHovered, setIsQuestionHovered] = useState(false);
   const [editInputBox, setEditInputBox] = useState<string>('');
-
+  const messageRef = useRef<HTMLDivElement>(null);
+  const [shouldShowToggle, setShouldShowToggle] = useState(false);
   const [isLikeClicked, setIsLikeClicked] = useState(false);
   const [isDislikeClicked, setIsDislikeClicked] = useState(false);
   const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
   const editableQueryRef = useRef<HTMLDivElement | null>(null);
+  const [isQuestionCollapsed, setIsQuestionCollapsed] = useState(true);
 
   useOutsideAlerter(editableQueryRef, () => setIsEditClicked(false), [], true);
+
+  useEffect(() => {
+    if (messageRef.current) {
+      const height = messageRef.current.scrollHeight;
+      setShouldShowToggle(height > 84);
+    }
+  }, [message]);
+
   const handleEditClick = () => {
     setIsEditClicked(false);
     handleUpdatedQuestionSubmission?.(editInputBox, true, questionNumber);
@@ -146,15 +156,35 @@ const ConversationBubble = forwardRef<
             />
             {!isEditClicked && (
               <>
-                <div className="mr-2 flex flex-col">
+                <div className="relative mr-2 flex w-full flex-col">
                   <div
                     style={{
                       wordBreak: 'break-word',
                     }}
                     className="ml-2 mr-2 flex max-w-full items-center whitespace-pre-wrap rounded-[28px] bg-gradient-to-b from-medium-purple to-slate-blue px-[19px] py-[14px] text-sm leading-normal text-white sm:text-base"
                   >
-                    {message}
+                    <div
+                      ref={messageRef}
+                      className={`${isQuestionCollapsed ? 'line-clamp-4' : ''} w-full`}
+                    >
+                      {message}
+                    </div>
                   </div>
+                  {shouldShowToggle && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setIsQuestionCollapsed(!isQuestionCollapsed);
+                      }}
+                      className="absolute right-3 top-3 z-10 rounded-full bg-purple-400/10 p-1 hover:bg-purple-400/30"
+                    >
+                      <img
+                        src={ChevronDown}
+                        alt="Toggle"
+                        className={`h-4 w-4 transform invert transition-transform duration-200 ${isQuestionCollapsed ? '' : 'rotate-180'}`}
+                      />
+                    </button>
+                  )}
                 </div>
                 <button
                   onClick={() => {

From bd4a4cc4aff2a525204aae5cc1771fb2265ff9d3 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sat, 14 Jun 2025 02:32:59 +0530
Subject: [PATCH 2/2] (feat:question) match design

---
 .../src/conversation/ConversationBubble.tsx   | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 422e0de6..04800c83 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -161,7 +161,7 @@ const ConversationBubble = forwardRef<
                     style={{
                       wordBreak: 'break-word',
                     }}
-                    className="ml-2 mr-2 flex max-w-full items-center whitespace-pre-wrap rounded-[28px] bg-gradient-to-b from-medium-purple to-slate-blue px-[19px] py-[14px] text-sm leading-normal text-white sm:text-base"
+                    className="ml-2 mr-2 flex max-w-full items-start gap-2 whitespace-pre-wrap rounded-[28px] bg-gradient-to-b from-medium-purple to-slate-blue py-[14px] pl-[19px] pr-3 text-sm leading-normal text-white sm:text-base"
                   >
                     <div
                       ref={messageRef}
@@ -169,22 +169,24 @@ const ConversationBubble = forwardRef<
                     >
                       {message}
                     </div>
+                    {shouldShowToggle && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setIsQuestionCollapsed(!isQuestionCollapsed);
+                        }}
+                        className="rounded-full p-2.5 hover:bg-[#D9D9D933]"
+                      >
+                        <img
+                          src={ChevronDown}
+                          alt="Toggle"
+                          width={24}
+                          height={24}
+                          className={`transform invert transition-transform duration-200 ${isQuestionCollapsed ? '' : 'rotate-180'}`}
+                        />
+                      </button>
+                    )}
                   </div>
-                  {shouldShowToggle && (
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setIsQuestionCollapsed(!isQuestionCollapsed);
-                      }}
-                      className="absolute right-3 top-3 z-10 rounded-full bg-purple-400/10 p-1 hover:bg-purple-400/30"
-                    >
-                      <img
-                        src={ChevronDown}
-                        alt="Toggle"
-                        className={`h-4 w-4 transform invert transition-transform duration-200 ${isQuestionCollapsed ? '' : 'rotate-180'}`}
-                      />
-                    </button>
-                  )}
                 </div>
                 <button
                   onClick={() => {