feat: dark component

src/frontend/src/components/bs-comp/chatComponent/ChatInput.tsx

@@ -99,9 +99,11 @@ export default function ChatInput({ clear, form, stop, questions, inputForm, wsU
         }
     }
 
+    const diffRef = useRef(0)
     const sendWsMsg = async (msg) => {
         try {
-            // console.log('WebSocket send: ' + Date.now() + ' 毫秒');
+            diffRef.current = Date.now()
+            console.log('WebSocket send: ' + diffRef.current + ' 毫秒');
 
             wsRef.current.send(JSON.stringify(msg))
         } catch (error) {
@@ -138,7 +140,7 @@ export default function ChatInput({ clear, form, stop, questions, inputForm, wsU
                     res('ok')
                 };
                 ws.onmessage = (event) => {
-                    // console.log('WebSocket get: ' + Date.now() + ' 毫秒');
+                    console.log(`WebSocket get: ${Date.now()} 毫秒；与send差值${Date.now() - diffRef.current}毫秒`);
                     const data = JSON.parse(event.data);
                     const errorMsg = data.category === 'error' ? data.intermediate_steps : ''
                     // 异常类型处理，提示

src/frontend/src/components/bs-icons/quit/index.tsx

@@ -1,17 +1,9 @@
 import React, { forwardRef } from "react";
 import { ReactComponent as Quit } from "./Quit.svg";
-import { ReactComponent as QuitDark } from "./Quit-dark.svg";
 
 export const QuitIcon = forwardRef<
     SVGSVGElement & { className: any },
     React.PropsWithChildren<{ className?: string }>
->(({className,...props}, ref) => {
-    return <Quit ref={ref} {...props} className={className || ''}/>;
-});
-
-export const QuitIconDark = forwardRef<
-    SVGSVGElement & { className: any },
-    React.PropsWithChildren<{ className?: string }>
->(({className,...props}, ref) => {
-    return <QuitDark ref={ref} {...props} className={className || ''}/>;
+>(({ className, ...props }, ref) => {
+    return <Quit ref={ref} {...props} className={className || ''} />;
 });

src/frontend/src/components/bs-ui/accordion/index.tsx

@@ -27,12 +27,12 @@ const AccordionTrigger = React.forwardRef<
         <AccordionPrimitive.Trigger
             ref={ref}
             className={cname(
-                "flex flex-1 items-center py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-90",
+                "flex flex-1 items-center py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-90 dark:text-muted-foreground",
                 className
             )}
             {...props}
         >
-            <ChevronRightIcon color="#111" className="mx-2 h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+            <ChevronRightIcon className="mx-2 h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
             {children}
         </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>

src/frontend/src/components/bs-ui/alertDialog/index.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-import { buttonVariants } from "@/components/ui/button"
+import { buttonVariants } from "@/components/bs-ui/button"
 import { cname } from "../utils"
 
 const AlertDialog = AlertDialogPrimitive.Root
@@ -90,7 +90,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Description
         ref={ref}
-        className={cname("text-sm text-muted-foreground text-center text-prompt-description", className)}
+        className={cname("text-sm text-center text-prompt-description", className)}
         {...props}
     />
 ))

src/frontend/src/components/bs-ui/alertDialog/useConfirm.tsx

@@ -1,5 +1,4 @@
 
-import { Button } from "@/components/ui/button"
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "."
 import ReactDOM from "react-dom"
 import i18next from "i18next"

src/frontend/src/components/bs-ui/calendar/datePicker.tsx

@@ -34,7 +34,7 @@ export function DatePicker({
                 <Button
                     variant={"outline"}
                     className={cname(
-                        "w-full justify-start text-left font-normal",
+                        "w-full justify-start text-left font-normal bg-search-input",
                         !date && "text-muted-foreground"
                     )}
                 >

src/frontend/src/components/bs-ui/card/index.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
     <div
         ref={ref}
         className={cname(
-            "rounded-md bg-card text-card-foreground border border-transparent hover:shadow-[0_8px_16px_0px_rgba(40,47,84,0.15)] hover:border-[#EDF0F4] relative hover:z-10",
+            "rounded-md bg-card text-card-foreground border border-transparent hover:shadow-[0_8px_16px_0px_rgba(40,47,84,0.15)] hover:border-[#EDF0F4] dark:hover:border-[#282829] relative hover:z-10",
             className
         )}
         {...props}

src/frontend/src/components/bs-ui/dialog/index.tsx

@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={cname(
-                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-5 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background dark:bg-[#303134] p-5 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
                 className
             )}
             {...props}

src/frontend/src/components/bs-ui/editLabel/index.tsx

@@ -44,7 +44,7 @@ export default function EditLabel({ str, rule, children, onChange }) {
                 e.code === 'Space' && e.preventDefault();
             }}
             onBlur={handleChange}
-            className="flex h-6 w-full rounded-xl border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+            className="flex h-6 w-full rounded-xl border border-input bg-search-input px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
         />
     </div>
 

src/frontend/src/components/bs-ui/input/index.tsx

@@ -12,7 +12,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <input
                 type={type}
                 className={cname(
-                    "flex h-9 w-full rounded-md border border-input bg-[#FAFBFC] px-3 py-1 text-sm text-[#111] shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    "flex h-9 w-full rounded-md border border-input bg-search-input px-3 py-1 text-sm text-[#111] dark:text-gray-50 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
                     className
                 )}
                 ref={ref}
@@ -27,7 +27,7 @@ Input.displayName = "Input"
 const SearchInput = React.forwardRef<HTMLInputElement, InputProps & { inputClassName?: string, iconClassName?: string }>(
     ({ className, inputClassName, iconClassName, ...props }, ref) => {
         return <div className={cname("relative", className)}>
-            <SearchIcon className={cname("h-5 w-5 absolute left-2 top-2", iconClassName)} />
+            <SearchIcon className={cname("h-5 w-5 absolute left-2 top-2 text-gray-950 dark:text-gray-500", iconClassName)} />
             <Input type="text" ref={ref} className={cname("pl-8 bg-search-input", inputClassName)} {...props}></Input>
         </div>
     }
@@ -48,7 +48,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         return (
             <textarea
                 className={cname(
-                    "flex min-h-[80px] w-full rounded-md border border-input bg-[#FAFBFC] px-3 py-2 text-sm text-[#111] shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    "flex min-h-[80px] w-full rounded-md border border-input bg-search-input px-3 py-2 text-sm text-[#111] dark:text-gray-50 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
                     className
                 )}
                 ref={ref}

src/frontend/src/components/bs-ui/pagination/index.tsx

@@ -57,7 +57,7 @@ const PaginationLink = ({
                 size,
             }),
             "text-gray-950",
-            "dark:text-[#585858]",
+            "dark:text-gray-400",
             isActive && "dark:bg-[#34353A] dark:text-[#F2F2F2]", // 暗黑模式设计
             className
         )}

src/frontend/src/components/bs-ui/select/hover.tsx

@@ -3,7 +3,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../too
 
 export function SelectHoverItem({ children, ...props }) {
 
-    return <div {...props} className="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none text-gray-900 hover:bg-gray-100">
+    return <div {...props} className="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none text-gray-900 hover:bg-gray-100 dark:text-gray-50 dark:hover:bg-gray-700">
         {children}
     </div>
 }
@@ -15,7 +15,7 @@ export function SelectHover({ triagger, children }) {
             <TooltipTrigger asChild>
                 {triagger}
             </TooltipTrigger>
-            <TooltipContent className="bg-[#fff] shadow-md">
+            <TooltipContent className="bg-[#fff] dark:bg-[#2A2B2E] shadow-md">
                 {children}
             </TooltipContent>
         </Tooltip>

src/frontend/src/components/bs-ui/select/index.tsx

@@ -23,7 +23,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
         ref={ref}
         className={cname(
-            "group flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-[#fcfdff] px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 data-[placeholder]:text-gray-400",
+            "group flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-search-input px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 data-[placeholder]:text-gray-400",
             className
         )}
         {...props}
@@ -79,7 +79,7 @@ const SelectContent = React.forwardRef<
         <SelectPrimitive.Content
             ref={ref}
             className={cname(
-                "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-[#DEE3EF] bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-[#DEE3EF] dark:border-[#484B57] bg-popover text-popover-foreground dark:text-gray-200 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                 position === "popper" &&
                 "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
                 className
@@ -124,7 +124,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.Item
         ref={ref}
         className={cname(
-            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-[#EBF0FF] focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-[#EBF0FF] dark:focus:bg-gray-700 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             className
         )}
         {...props}

src/frontend/src/components/bs-ui/select/multi.tsx

@@ -11,8 +11,8 @@ const MultiItem: React.FC<
 
     return <div
         key={value}
-        className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 mb-1 text-sm outline-none hover:bg-[#EBF0FF] hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 break-all 
-    ${active && 'bg-[#EBF0FF]'}`}
+        className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 mb-1 text-sm outline-none hover:bg-[#EBF0FF] dark:hover:bg-gray-700 hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 break-all 
+    ${active && 'bg-[#EBF0FF] dark:bg-gray-700'}`}
         onClick={() => { onClick(value, children as string) }}
     >
         <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
@@ -207,7 +207,7 @@ const MultiSelect = ({
             className={className}
             headNode={
                 <div className="p-2">
-                    <SearchInput ref={inputRef} inputClassName="h-8" placeholder={searchPlaceholder} onChange={handleSearch} iconClassName="w-4 h-4" />
+                    <SearchInput ref={inputRef} inputClassName="h-8 dark:border-gray-700" placeholder={searchPlaceholder} onChange={handleSearch} iconClassName="w-4 h-4" />
                 </div>
             }
             footerNode={children}

src/frontend/src/components/bs-ui/select/select.tsx

@@ -30,7 +30,7 @@ const SelectSearch: React.FC<SelectSearchProps> = ({
             <SelectValue placeholder={selectPlaceholder}/>
         </SelectTrigger>
         <SelectContent className={contentClass}>
-            <SearchInput inputClassName="h-8 mb-2" placeholder={inputPlaceholder} 
+            <SearchInput inputClassName="h-8 mb-2 dark:border-gray-700" placeholder={inputPlaceholder} 
             onChange={(e) => onChange(e)} onKeyDown={e => e.stopPropagation()} iconClassName="w-4 h-4" />
             <SelectGroup>
                 {options.map(el => (