fix: fix css details on ThreadDoubleAccordion

bitcashorg · May 3, 2024 · f67ead2 · f67ead2
1 parent 00f952c
commit f67ead2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/apps/masterbots.ai/components/shared/thread-accordion.tsx b/apps/masterbots.ai/components/shared/thread-accordion.tsx
@@ -25,7 +25,8 @@ export function ThreadAccordion({
   // disable automatic client fetch by default
   // ThreadList sets this to true to load the rest of messages inside ThreadDialog or ThreadListAccordion
   // ThreadList only receives the first question and answer
-  showHeading = true
+  showHeading = true,
+  className = ''
 }: ThreadAccordionProps) {
   const pathname = usePathname()
   const router = useRouter()
@@ -72,7 +73,7 @@ export function ThreadAccordion({
   return (
     <div className="flex w-full">
       <Accordion
-        className={cn('w-full border border-solid border-mirage scroll')}
+        className={cn('w-full border border-solid border-mirage scroll', className)}
         defaultValue={['pair-0', 'pair-1', 'pair-2']}
         type="multiple"
         key={`accordion-${JSON.stringify(pairs)}`}
@@ -89,9 +90,9 @@ export function ThreadAccordion({
                 // is not the frist question we return follow question style
                 !isFirst ? (
                   <AccordionTrigger
-                    className={cn('px-5 border-y border-solid border-mirage')}
+                    className={cn('pl-5 pr-[47px] border-y border-solid border-mirage')}
                   >
-                    <div className="pl-12 md:text-lg">
+                    <div className="pl-[27px] md:text-lg">
                       {p.userMessage.content}
                     </div>
                   </AccordionTrigger>
@@ -124,7 +125,7 @@ export function ThreadAccordion({
 
               <AccordionContent
                 aria-expanded
-                className={cn('mx-8 border-x border-solid border-mirage')}
+                className={cn('mx-[46px] border-x border-solid border-mirage')}
               >
                 {p.chatGptMessage.map(message => (
                   <BrowseChatMessage
@@ -148,4 +149,5 @@ interface ThreadAccordionProps {
   clientFetch?: boolean
   chat?: boolean
   showHeading?: boolean
+  className?: string 
 }
diff --git a/apps/masterbots.ai/components/shared/thread-list-accordion.tsx b/apps/masterbots.ai/components/shared/thread-list-accordion.tsx
@@ -35,9 +35,9 @@ export function ThreadListAccordion({
       type="multiple"
     >
       {/* Frist level question and excerpt visible  on lists */}
-      <AccordionItem value="pair-1">
+      <AccordionItem className="border-b-mirage border-solid" value="pair-1">
         <AccordionTrigger
-          className={cn('hover:bg-mirage px-5', state.isOpen && 'bg-mirage')}
+          className={cn('hover:bg-mirage px-2 border border-[transparent] dark:border-b-mirage border-b-gray-300 rounded-t-lg', state.isOpen && 'bg-mirage')}
         >
           <ThreadHeading
             chat={chat}
@@ -49,7 +49,7 @@ export function ThreadListAccordion({
         </AccordionTrigger>
 
         {/* TODO: we need to slide down the content */}
-        <AccordionContent className={cn('pl-14')}>
+        <AccordionContent>
           {/* Secod level accordion with follow up questions
              showHeading must be false as we already have in screen on AccordionTrigger above */}
           <div className="overflow-y-scroll scrollbar srcoll-smooth max-h-[500px]">
@@ -59,6 +59,7 @@ export function ThreadListAccordion({
               showHeading={false}
               thread={thread}
               initialMessagePairs={createMessagePairs(thread.messages)}
+              className='border-r-[transparent]'
             />
           </div>
         </AccordionContent>

diff --git a/apps/masterbots.ai/components/ui/accordion.tsx b/apps/masterbots.ai/components/ui/accordion.tsx
@@ -26,7 +26,7 @@ const AccordionTrigger = React.forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       className={cn(
-        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180',
         className
       )}
       ref={ref}
@@ -48,7 +48,7 @@ const AccordionContent = React.forwardRef<
     ref={ref}
     {...props}
   >
-    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+    <div className={cn('pt-0', className)}>{children}</div>
   </AccordionPrimitive.Content>
 ))