control-bar

1"use client";
2 
3import type { ReactNode, FC } from "react";
4import { cn } from "@aomi-labs/react";
5import { NetworkSelect } from "./network-select";
6import { ModelSelect } from "./model-select";
7import { AppSelect } from "./app-select";
8import { ApiKeyInput } from "./api-key-input";
9import { ConnectButton } from "./connect-button";
10import { SecretInput } from "./secret-input";
11 
12// =============================================================================
13// Types
14// =============================================================================
15 
16export type ControlBarProps = {
17  className?: string;
18  /** Custom controls to render alongside built-in ones */
19  children?: ReactNode;
20  /** Hide the model selector */
21  hideModel?: boolean;
22  /** Hide the App selector */
23  hideApp?: boolean;
24  /** Hide the API key input */
25  hideApiKey?: boolean;
26  /** Hide the wallet connect button (default: true) */
27  hideWallet?: boolean;
28  /** Hide the network selector (default: false) */
29  hideNetwork?: boolean;
30  /** Hide the secrets input */
31  hideSecrets?: boolean;
32};
33 
34// =============================================================================
35// Main Component
36// =============================================================================
37 
38export const ControlBar: FC<ControlBarProps> = ({
39  className,
40  children,
41  hideModel = false,
42  hideApp = false,
43  hideApiKey = false,
44  hideWallet = true,
45  hideNetwork = false,
46  hideSecrets = false,
47}) => {
48  return (
49    <div className={cn("flex items-center gap-1", className)}>
50      {!hideNetwork && <NetworkSelect />}
51      {!hideModel && <ModelSelect />}
52      {!hideApp && <AppSelect />}
53      {!hideWallet && <ConnectButton />}
54      {!hideSecrets && <SecretInput />}
55      {children}
56      {!hideApiKey && <ApiKeyInput />}
57    </div>
58  );
59};
60 
61// =============================================================================
62// Re-exports for granular usage
63// =============================================================================
64 
65export { ModelSelect, type ModelSelectProps } from "./model-select";
66export { AppSelect, type AppSelectProps } from "./app-select";
67export { ApiKeyInput, type ApiKeyInputProps } from "./api-key-input";
68export {
69  ConnectButton,
70  type ConnectButtonProps,
71} from "./connect-button";
72export { NetworkSelect, type NetworkSelectProps } from "./network-select";
73export { SecretInput, type SecretInputProps } from "./secret-input";