refactor(ui): update conversation component styles for consistency

Author: Itsnotaka

packages/ui/src/components/ai-elements/conversation.tsx

@@ -12,7 +12,7 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
     className={cn(
-      'relative flex-1 overflow-hidden bg-gradient-to-b from-background via-background to-muted/60',
+      'relative flex-1 overflow-hidden bg-linear-to-b from-background via-background to-muted/60',
       className,
     )}
     initial="smooth"
@@ -32,24 +32,12 @@ export const ConversationContent = ({ className, ...props }: ConversationContent
     )}
     {...props}
   />
-  <StickToBottom.Content
-    className={cn(
-      'flex flex-col gap-4 px-3 py-4 md:px-4 md:py-6 max-w-2xl mx-auto w-full',
-      className,
-    )}
-    {...props}
-  />
 );
 
 export type ConversationHeaderProps = ComponentProps<'div'>;
 
 export const ConversationHeader = ({ className, ...props }: ConversationHeaderProps) => (
   <div
-    className={cn(
-      'flex items-center justify-between gap-2 border-b border-border/60 bg-background/95 px-3 py-2',
-      'text-[11px] uppercase tracking-[0.18em] text-muted-foreground',
-      className,
-    )}
     className={cn(
       'flex items-center justify-between gap-2 border-b border-border/60 bg-background/95 px-3 py-2',
       'text-[11px] uppercase tracking-[0.18em] text-muted-foreground',
@@ -69,13 +57,6 @@ export const ConversationTitle = ({ className, ...props }: ConversationTitleProp
     )}
     {...props}
   />
-  <div
-    className={cn(
-      'font-semibold text-xs tracking-[0.18em] uppercase text-foreground/80',
-      className,
-    )}
-    {...props}
-  />
 );
 
 export type ConversationEmptyStateProps = ComponentProps<'div'> & {
@@ -94,7 +75,6 @@ export const ConversationEmptyState = ({
 }: ConversationEmptyStateProps) => (
   <div
     className={cn(
-      'flex size-full flex-col items-center justify-center gap-2 px-4 py-6 text-center',
       'flex size-full flex-col items-center justify-center gap-2 px-4 py-6 text-center',
       className,
     )}
@@ -110,12 +90,6 @@ export const ConversationEmptyState = ({
           {description && (
             <p className="mx-auto max-w-sm text-muted-foreground text-xs/6">{description}</p>
           )}
-          <h3 className="font-medium text-xs uppercase tracking-[0.18em] text-foreground/80">
-            {title}
-          </h3>
-          {description && (
-            <p className="mx-auto max-w-sm text-muted-foreground text-xs/6">{description}</p>
-          )}
         </div>
       </>
     )}
@@ -137,11 +111,6 @@ export const ConversationScrollButton = ({
   return (
     !isAtBottom && (
       <Button
-        className={cn(
-          'absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full border-border/70 bg-background/95',
-          'h-7 w-7 shadow-[0_10px_30px_rgba(15,23,42,0.22)] backdrop-blur-sm',
-          className,
-        )}
         className={cn(
           'absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full border-border/70 bg-background/95',
           'h-7 w-7 shadow-[0_10px_30px_rgba(15,23,42,0.22)] backdrop-blur-sm',