usky-human/web/app/(products)/sentio/components/header.tsx

import { LogoBar } from "@/components/header/logo";
import { Items } from "../items";
import { Switch, addToast, Tooltip } from "@heroui/react";
import { UserMinusIcon, UserPlusIcon, SpeakerWaveIcon, SpeakerXMarkIcon } from "@heroicons/react/24/solid";
import { useSentioChatModeStore, useChatRecordStore, useSentioAsrStore } from "@/lib/store/sentio";
import { CHAT_MODE } from "@/lib/protocol";
import { useTranslations } from 'next-intl';
import clsx from 'clsx';

function ChatModeSwitch() {
    const t = useTranslations('Products.sentio');
    const { chatMode, setChatMode } = useSentioChatModeStore();
    const { enable } = useSentioAsrStore();
    const { clearChatRecord } = useChatRecordStore();
    const isImmersive = chatMode === CHAT_MODE.IMMSERSIVE;
    
    const onSelect = (isSelected: boolean) => {
        if (enable) {
            setChatMode(isSelected ? CHAT_MODE.IMMSERSIVE : CHAT_MODE.DIALOGUE)
            clearChatRecord();   
        } else {
            addToast({
                title: t('asrEnableTip'),
                color: "warning"
            })
        }
    }
    
    return (
        <Tooltip 
            content={isImmersive ? "沉浸模式：可打断" : "噪音模式：不可打断"}
            placement="bottom"
            className="opacity-90"
        >
            <div className="relative inline-flex items-center">
                <button
                    onClick={() => onSelect(!isImmersive)}
                    disabled={!enable}
                    className={clsx(
                        "relative inline-flex h-10 w-20 items-center rounded-full transition-all duration-300 ease-in-out",
                        "focus:outline-none focus:ring-2 focus:ring-offset-2",
                        isImmersive 
                            ? "bg-gradient-to-r from-blue-500 to-cyan-500 focus:ring-blue-500" 
                            : "bg-gradient-to-r from-gray-400 to-gray-500 focus:ring-gray-500",
                        !enable && "opacity-50 cursor-not-allowed"
                    )}
                    style={{
                        boxShadow: isImmersive 
                            ? "0 4px 12px rgba(59, 130, 246, 0.4), 0 0 8px rgba(59, 130, 246, 0.3)"
                            : "0 2px 8px rgba(0, 0, 0, 0.2)"
                    }}
                    aria-label={isImmersive ? "切换到噪音模式" : "切换到沉浸模式"}
                >
                    {/* 滑动指示器 */}
                    <span
                        className={clsx(
                            "absolute left-1 top-1 h-8 w-8 transform rounded-full bg-white shadow-lg transition-all duration-300 ease-in-out",
                            "flex items-center justify-center",
                            isImmersive ? "translate-x-10" : "translate-x-0"
                        )}
                        style={{
                            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
                        }}
                    >
                        {isImmersive ? (
                            <SpeakerWaveIcon className="h-4 w-4 text-blue-500" />
                        ) : (
                            <SpeakerXMarkIcon className="h-4 w-4 text-gray-500" />
                        )}
                    </span>
                    
                    {/* 模式标签 */}
                    <div className="flex w-full items-center justify-between px-3 text-xs font-semibold">
                        <span className={clsx(
                            "transition-opacity duration-300",
                            isImmersive ? "opacity-0" : "opacity-100 text-white"
                        )}>
                            噪音
                        </span>
                        <span className={clsx(
                            "transition-opacity duration-300",
                            isImmersive ? "opacity-100 text-white" : "opacity-0"
                        )}>
                            沉浸
                        </span>
                    </div>
                </button>
            </div>
        </Tooltip>
    )
}

export function Header() {
    return (
        <div className="flex w-full h-[64px] p-6 justify-between z-10">
            <LogoBar isExternal={true}/>
            <div className="flex flex-row gap-4 items-center">
                <ChatModeSwitch />
                {/* <Items /> */}
            </div>
        </div>
    )
}