chatBoxToolbar.tsx

'use client';

import { Separator } from "@/components/ui/separator";
import { LanguageModelInfo, SearchScope } from "@/features/chat/types";
import { RepositoryQuery, SearchContextQuery } from "@/lib/types";
import { useSelectedLanguageModel } from "../../useSelectedLanguageModel";
import { AtMentionButton } from "./atMentionButton";
import { ChatBoxPlusButton } from "./chatBoxPlusButton";
import { LanguageModelSelector } from "./languageModelSelector";
import { SearchScopeSelector } from "./searchScopeSelector";

export interface ChatBoxToolbarProps {
    languageModels: LanguageModelInfo[];
    repos: RepositoryQuery[];
    searchContexts: SearchContextQuery[];
    selectedSearchScopes: SearchScope[];
    onSelectedSearchScopesChange: (items: SearchScope[]) => void;
    isContextSelectorOpen: boolean;
    onContextSelectorOpenChanged: (isOpen: boolean) => void;
    disabledMcpServerIds?: string[];
    onDisabledMcpServerIdsChange?: (ids: string[]) => void;
    isAuthenticated: boolean;
}

export const ChatBoxToolbar = ({
    languageModels,
    repos,
    searchContexts,
    selectedSearchScopes,
    onSelectedSearchScopesChange,
    isContextSelectorOpen,
    onContextSelectorOpenChanged,
    disabledMcpServerIds,
    onDisabledMcpServerIdsChange,
    isAuthenticated,
}: ChatBoxToolbarProps) => {
    const { selectedLanguageModel, setSelectedLanguageModel } = useSelectedLanguageModel({
        languageModels,
    });

    return (
        <>
            {disabledMcpServerIds !== undefined && onDisabledMcpServerIdsChange !== undefined && (
                <>
                    <ChatBoxPlusButton
                        selectedSearchScopes={selectedSearchScopes}
                        onSelectedSearchScopesChange={onSelectedSearchScopesChange}
                        disabledMcpServerIds={disabledMcpServerIds}
                        onDisabledMcpServerIdsChange={onDisabledMcpServerIdsChange}
                        isAuthenticated={isAuthenticated}
                    />
                    <Separator orientation="vertical" className="h-3 mx-1" />
                </>
            )}
            <AtMentionButton />
            <Separator orientation="vertical" className="h-3 mx-1" />
            <SearchScopeSelector
                className="bg-inherit w-fit h-6 min-h-6"
                repos={repos}
                searchContexts={searchContexts}
                selectedSearchScopes={selectedSearchScopes}
                onSelectedSearchScopesChange={onSelectedSearchScopesChange}
                isOpen={isContextSelectorOpen}
                onOpenChanged={onContextSelectorOpenChanged}
            />
            <Separator orientation="vertical" className="h-3 ml-1 mr-2" />
            <LanguageModelSelector
                languageModels={languageModels}
                onSelectedModelChange={setSelectedLanguageModel}
                selectedModel={selectedLanguageModel}
            />
        </>
    )
}