Function ChatHeader

apps/chat/src/components/ChatHeader.jsx:4–130

({
    onMenuToggle,
    selectedModel,
    onModelChange,
    selectedImageModel,
    onImageModelChange,
    sidebarOpen,
    models = {},
    imageModels = {},
    mode = "chat",
})

import "./styles/ChatHeader.css";

const ChatHeader = ({
    onMenuToggle,
    selectedModel,
    onModelChange,
    selectedImageModel,
    onImageModelChange,
    sidebarOpen,
    models = {},
    imageModels = {},
    mode = "chat",
}) => {
    const [isModelDropdownOpen, setIsModelDropdownOpen] = useState(false);
    const modelDropdownRef = useRef(null);

    // Memoize current models based on mode
    const currentModels = useMemo(() => {
        return mode === "imagine" ? imageModels : models;
    }, [mode, imageModels, models]);

    // Memoize current selected model
    const currentSelectedModel = useMemo(() => {
        return mode === "imagine" ? selectedImageModel : selectedModel;
    }, [mode, selectedImageModel, selectedModel]);

    // Memoize current model name
    const currentModelName = useMemo(() => {
        return currentModels[currentSelectedModel]?.name || "Loading...";
    }, [currentModels, currentSelectedModel]);

    // Close dropdown when clicking outside
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (
                modelDropdownRef.current &&
                !modelDropdownRef.current.contains(event.target)
            ) {
                setIsModelDropdownOpen(false);
            }
        };
        document.addEventListener("mousedown", handleClickOutside);
        return () =>
            document.removeEventListener("mousedown", handleClickOutside);
    }, []);

    const handleModelSelect = useCallback(
        (key) => {
            if (mode === "imagine") {
                onImageModelChange(key);
            } else {
                onModelChange(key);
            }
            setIsModelDropdownOpen(false);
        },
        [mode, onImageModelChange, onModelChange],
    );

    return (
        <header className="chat-header">