style: 完成所有文件的lint

packages/remote-control-server/web/components/ai-elements/conversation.tsx

@@ -1,17 +1,17 @@
-"use client";
+'use client';
 
-import { Button } from "../ui/button";
-import { cn } from "../../src/lib/utils";
-import { ArrowDownIcon, UserIcon } from "lucide-react";
-import type { ComponentProps } from "react";
-import { useCallback } from "react";
-import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import { Button } from '../ui/button';
+import { cn } from '../../src/lib/utils';
+import { ArrowDownIcon, UserIcon } from 'lucide-react';
+import type { ComponentProps } from 'react';
+import { useCallback } from 'react';
+import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
 
 export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
-    className={cn("relative flex-1 overflow-y-hidden overflow-x-hidden", className)}
+    className={cn('relative flex-1 overflow-y-hidden overflow-x-hidden', className)}
     initial="smooth"
     resize="smooth"
     role="log"
@@ -19,21 +19,16 @@ export const Conversation = ({ className, ...props }: ConversationProps) => (
   />
 );
 
-export type ConversationContentProps = ComponentProps<
-  typeof StickToBottom.Content
->;
+export type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
 
-export const ConversationContent = ({
-  className,
-  ...props
-}: ConversationContentProps) => (
+export const ConversationContent = ({ className, ...props }: ConversationContentProps) => (
   <StickToBottom.Content
-    className={cn("mx-auto flex max-w-3xl flex-col gap-2 px-4 py-8 sm:px-8 sm:py-12 min-w-0", className)}
+    className={cn('mx-auto flex max-w-3xl flex-col gap-2 px-4 py-8 sm:px-8 sm:py-12 min-w-0', className)}
     {...props}
   />
 );
 
-export type ConversationEmptyStateProps = ComponentProps<"div"> & {
+export type ConversationEmptyStateProps = ComponentProps<'div'> & {
   title?: string;
   description?: string;
   icon?: React.ReactNode;
@@ -41,17 +36,14 @@ export type ConversationEmptyStateProps = ComponentProps<"div"> & {
 
 export const ConversationEmptyState = ({
   className,
-  title = "No messages yet",
-  description = "Start a conversation to see messages here",
+  title = 'No messages yet',
+  description = 'Start a conversation to see messages here',
   icon,
   children,
   ...props
 }: ConversationEmptyStateProps) => (
   <div
-    className={cn(
-      "flex size-full flex-col items-center justify-center gap-4 p-8 text-center",
-      className
-    )}
+    className={cn('flex size-full flex-col items-center justify-center gap-4 p-8 text-center', className)}
     {...props}
   >
     {children ?? (
@@ -59,9 +51,7 @@ export const ConversationEmptyState = ({
         {icon && <div className="text-text-muted">{icon}</div>}
         <div className="space-y-2">
           <h3 className="font-semibold text-base font-display text-text-primary">{title}</h3>
-          {description && (
-            <p className="text-text-muted text-sm leading-relaxed max-w-xs">{description}</p>
-          )}
+          {description && <p className="text-text-muted text-sm leading-relaxed max-w-xs">{description}</p>}
         </div>
       </>
     )}
@@ -76,10 +66,7 @@ export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
  * When used standalone, it handles its own visibility based on isAtBottom.
  * When used in ConversationScrollButtons, the container manages visibility.
  */
-export const ConversationScrollButton = ({
-  className,
-  ...props
-}: ConversationScrollButtonProps) => {
+export const ConversationScrollButton = ({ className, ...props }: ConversationScrollButtonProps) => {
   const { scrollToBottom } = useStickToBottomContext();
 
   const handleScrollToBottom = useCallback(() => {
@@ -88,10 +75,7 @@ export const ConversationScrollButton = ({
 
   return (
     <Button
-      className={cn(
-        "rounded-full",
-        className
-      )}
+      className={cn('rounded-full', className)}
       onClick={handleScrollToBottom}
       size="icon"
       type="button"
@@ -108,7 +92,7 @@ export const ConversationScrollButton = ({
  * Data attribute used to mark the last user message element.
  * ChatInterface adds this attribute to the last user message for scroll targeting.
  */
-export const LAST_USER_MESSAGE_ATTR = "data-last-user-message";
+export const LAST_USER_MESSAGE_ATTR = 'data-last-user-message';
 
 export type ConversationScrollToLastUserMessageButtonProps = ComponentProps<typeof Button>;
 
@@ -124,16 +108,13 @@ export const ConversationScrollToLastUserMessageButton = ({
     // Find the last user message element by data attribute
     const lastUserMessage = document.querySelector(`[${LAST_USER_MESSAGE_ATTR}="true"]`);
     if (lastUserMessage) {
-      lastUserMessage.scrollIntoView({ behavior: "smooth", block: "start" });
+      lastUserMessage.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
   }, []);
 
   return (
     <Button
-      className={cn(
-        "rounded-full",
-        className
-      )}
+      className={cn('rounded-full', className)}
       onClick={handleScrollToLastUserMessage}
       size="icon"
       type="button"
@@ -146,7 +127,7 @@ export const ConversationScrollToLastUserMessageButton = ({
   );
 };
 
-export type ConversationScrollButtonsProps = ComponentProps<"div"> & {
+export type ConversationScrollButtonsProps = ComponentProps<'div'> & {
   /** Whether there are user messages to scroll to */
   hasUserMessages?: boolean;
 };
@@ -166,16 +147,9 @@ export const ConversationScrollButtons = ({
   if (isAtBottom) return null;
 
   return (
-    <div
-      className={cn(
-        "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2",
-        className
-      )}
-      {...props}
-    >
+    <div className={cn('absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2', className)} {...props}>
       {hasUserMessages && <ConversationScrollToLastUserMessageButton />}
       <ConversationScrollButton />
     </div>
   );
 };
-