@aomi-labs/widget-lib 1.1.0 → 1.1.2

package/src/components/aomi-frame.tsx

@@ -1,14 +1,16 @@
 "use client";
 
-import { type CSSProperties, type ReactNode } from "react";
 import {
-  AomiRuntimeProvider,
-  cn,
-  useAomiRuntime,
-  type UserConfig,
-} from "@aomi-labs/react";
+  type CSSProperties,
+  type ReactNode,
+  type FC,
+  createContext,
+  useContext,
+} from "react";
+import { AomiRuntimeProvider, cn, useAomiRuntime } from "@aomi-labs/react";
 import { Thread } from "@/components/assistant-ui/thread";
 import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar";
+import { NotificationToaster } from "@/components/ui/notification";
 import {
   SidebarInset,
   SidebarProvider,
@@ -19,110 +21,201 @@ import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
-  BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { ControlBar, type ControlBarProps } from "@/components/control-bar";
+
+// =============================================================================
+// Composer Control Context - signals Thread to show inline controls
+// =============================================================================
+
+const ComposerControlContext = createContext<boolean>(false);
+
+export const useComposerControl = () => useContext(ComposerControlContext);
 
 // =============================================================================
 // Types
 // =============================================================================
 
-type AomiFrameProps = {
+type RootProps = {
+  children?: ReactNode;
   width?: CSSProperties["width"];
   height?: CSSProperties["height"];
   className?: string;
   style?: CSSProperties;
-  /** Render prop for wallet footer - receives user state and setter from UserContext */
-  walletFooter?: (props: UserConfig) => ReactNode;
-  /** Additional content to render inside the frame */
+  /** Position of the wallet button in the sidebar */
+  walletPosition?: "header" | "footer" | null;
+  /** Backend URL for the Aomi runtime */
+  backendUrl?: string;
+};
+
+type HeaderProps = {
   children?: ReactNode;
+  /** Show the control bar in the header */
+  withControl?: boolean;
+  /** Props to pass to the ControlBar when withControl is true */
+  controlBarProps?: Omit<ControlBarProps, "children">;
+  className?: string;
 };
 
+type ComposerProps = {
+  children?: ReactNode;
+  /** Show inline controls in the composer input area */
+  withControl?: boolean;
+  className?: string;
+};
+
+type FrameControlBarProps = ControlBarProps;
+
 // =============================================================================
-// AomiFrame Component
+// Compound Components
 // =============================================================================
 
-export const AomiFrame = ({
+/**
+ * Root component - provides all context and layout container
+ */
+const Root: FC<RootProps> = ({
+  children,
   width = "100%",
   height = "80vh",
   className,
   style,
-  walletFooter,
-  children,
-}: AomiFrameProps) => {
-  const backendUrl =
-    process.env.NEXT_PUBLIC_BACKEND_URL ?? "http://localhost:8080";
+  walletPosition = "footer",
+  backendUrl,
+}) => {
+  const resolvedBackendUrl =
+    backendUrl ??
+    process.env.NEXT_PUBLIC_BACKEND_URL ??
+    "http://localhost:8080";
+  const frameStyle: CSSProperties = { width, height, ...style };
 
   return (
-    <AomiRuntimeProvider backendUrl={backendUrl}>
-      <AomiFrameShell
-        width={width}
-        height={height}
-        className={className}
-        style={style}
-        walletFooter={walletFooter}
-      >
-        {children}
-      </AomiFrameShell>
+    <AomiRuntimeProvider backendUrl={resolvedBackendUrl}>
+      <SidebarProvider>
+        <div
+          className={cn(
+            "rounded-4xl flex h-full w-full overflow-hidden bg-white shadow-2xl dark:bg-neutral-950",
+            className,
+          )}
+          style={frameStyle}
+        >
+          <ThreadListSidebar walletPosition={walletPosition} />
+          <SidebarInset className="relative flex flex-col">
+            {children}
+          </SidebarInset>
+          <NotificationToaster />
+        </div>
+      </SidebarProvider>
     </AomiRuntimeProvider>
   );
 };
 
-// =============================================================================
-// Internal Shell Component (uses hooks from providers)
-// =============================================================================
+/**
+ * Header component - renders the header with optional control bar
+ */
+const Header: FC<HeaderProps> = ({
+  children,
+  withControl,
+  controlBarProps,
+  className,
+}) => {
+  const { currentThreadId, getThreadMetadata } = useAomiRuntime();
+  const currentTitle = getThreadMetadata(currentThreadId)?.title ?? "New Chat";
 
-type AomiFrameShellProps = {
-  width: CSSProperties["width"];
-  height: CSSProperties["height"];
-  className?: string;
-  style?: CSSProperties;
-  walletFooter?: (props: UserConfig) => ReactNode;
-  children?: ReactNode;
+  return (
+    <header
+      className={cn(
+        "mt-1 flex h-14 shrink-0 items-center gap-2 px-3",
+        className,
+      )}
+    >
+      <SidebarTrigger />
+      <Separator orientation="vertical" className="mr-2 h-4" />
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem className="hidden md:block">
+            {currentTitle}
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+      <div className="ml-auto flex items-center gap-2">
+        {withControl && <ControlBar {...controlBarProps} />}
+        {children}
+      </div>
+    </header>
+  );
 };
 
-const AomiFrameShell = ({
-  width,
-  height,
-  className,
-  style,
-  walletFooter,
+/**
+ * Composer component - renders the thread with optional inline controls
+ * When withControl={true}, controls appear inline in the composer input area
+ */
+const Composer: FC<ComposerProps> = ({
   children,
-}: AomiFrameShellProps) => {
-  const { user, setUser, currentThreadId, threadViewKey, getThreadMetadata } =
-    useAomiRuntime();
-  const currentTitle = getThreadMetadata(currentThreadId)?.title ?? "New Chat";
-
-  const frameStyle: CSSProperties = { width, height, ...style };
+  withControl = false,
+  className,
+}) => {
+  const { currentThreadId, threadViewKey } = useAomiRuntime();
 
   return (
-    <SidebarProvider>
-      {children}
-      <div
-        className={cn(
-          "flex h-full w-full overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-neutral-950",
-          className,
-        )}
-        style={frameStyle}
-      >
-        <ThreadListSidebar footer={walletFooter?.({ user, setUser })} />
-        <SidebarInset className="relative">
-          <header className="mt-1 flex h-14 shrink-0 items-center gap-2 border-b px-3">
-            <SidebarTrigger />
-            <Separator orientation="vertical" className="mr-2 h-4" />
-            <Breadcrumb>
-              <BreadcrumbList>
-                <BreadcrumbItem className="hidden md:block">
-                  {currentTitle}
-                </BreadcrumbItem>
-                <BreadcrumbSeparator className="hidden md:block" />
-              </BreadcrumbList>
-            </Breadcrumb>
-          </header>
-          <div className="flex-1 overflow-hidden">
-            <Thread key={`${currentThreadId}-${threadViewKey}`} />
-          </div>
-        </SidebarInset>
+    <ComposerControlContext.Provider value={withControl}>
+      <div className={cn("flex flex-1 flex-col overflow-hidden", className)}>
+        <Thread key={`${currentThreadId}-${threadViewKey}`} />
+        {children}
       </div>
-    </SidebarProvider>
+    </ComposerControlContext.Provider>
   );
 };
+
+/**
+ * ControlBar component - wrapper for the control bar with frame styling
+ */
+const FrameControlBar: FC<FrameControlBarProps> = (props) => {
+  return <ControlBar {...props} />;
+};
+
+// =============================================================================
+// Default Layout Component (Simple API)
+// =============================================================================
+
+type DefaultLayoutProps = Omit<RootProps, "children">;
+
+/**
+ * Default layout - controls are inline in the composer input area
+ * Usage: <AomiFrame /> or <AomiFrame walletPosition="header" />
+ */
+const DefaultLayout: FC<DefaultLayoutProps> = ({
+  walletPosition = "footer",
+  ...props
+}) => {
+  // Hide wallet in ControlBar when it's shown in sidebar
+  const hideWalletInControlBar = walletPosition !== null;
+
+  return (
+    <Root walletPosition={walletPosition} {...props}>
+      <Header
+        withControl
+        controlBarProps={{ hideWallet: hideWalletInControlBar }}
+      />
+      <Composer />
+    </Root>
+  );
+};
+
+// =============================================================================
+// Export Compound Component
+// =============================================================================
+
+export const AomiFrame = Object.assign(DefaultLayout, {
+  Root,
+  Header,
+  Composer,
+  ControlBar: FrameControlBar,
+});
+
+// Re-export types for consumers
+export type {
+  RootProps as AomiFrameRootProps,
+  HeaderProps as AomiFrameHeaderProps,
+  ComposerProps as AomiFrameComposerProps,
+  FrameControlBarProps as AomiFrameControlBarProps,
+};

package/src/components/assistant-ui/thread-list.tsx

@@ -14,7 +14,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export const ThreadList: FC = () => {
   return (
-    <ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex flex-col items-stretch gap-1.5">
+    <ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex list-none flex-col items-stretch gap-1 pl-2">
       <ThreadListNew />
       <ThreadListItems />
     </ThreadListPrimitive.Root>
@@ -25,10 +25,10 @@ const ThreadListNew: FC = () => {
   return (
     <ThreadListPrimitive.New asChild>
       <Button
-        className="aui-thread-list-new hover:bg-muted data-active:bg-muted flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start"
+        className="aui-thread-list-new hover:bg-accent data-active:bg-accent flex items-center justify-start gap-2 rounded-full px-4 py-2 text-start"
         variant="ghost"
       >
-        <PlusIcon />
+        <PlusIcon className="size-4" />
         New Chat
       </Button>
     </ThreadListPrimitive.New>
@@ -65,8 +65,8 @@ const ThreadListSkeleton: FC = () => {
 
 const ThreadListItem: FC = () => {
   return (
-    <ThreadListItemPrimitive.Root className="aui-thread-list-item hover:bg-muted focus-visible:bg-muted focus-visible:ring-ring data-active:bg-muted flex items-center gap-2 rounded-lg transition-all focus-visible:outline-none focus-visible:ring-2">
-      <ThreadListItemPrimitive.Trigger className="aui-thread-list-item-trigger flex-grow px-3 py-2 text-start">
+    <ThreadListItemPrimitive.Root className="aui-thread-list-item hover:bg-accent focus-visible:bg-accent data-active:bg-accent flex items-center gap-2 rounded-full pl-4 transition-all focus-visible:outline-none">
+      <ThreadListItemPrimitive.Trigger className="aui-thread-list-item-trigger flex-grow py-2 text-start">
         <ThreadListItemTitle />
       </ThreadListItemPrimitive.Trigger>
       <ThreadListItemDelete />

package/src/components/assistant-ui/thread.tsx

@@ -37,6 +37,10 @@ import {
 } from "@/components/assistant-ui/attachment";
 
 import { cn, useNotification, useThreadContext } from "@aomi-labs/react";
+import { useComposerControl } from "@/components/aomi-frame";
+import { ModelSelect } from "@/components/control-bar/model-select";
+import { NamespaceSelect } from "@/components/control-bar/namespace-select";
+import { ApiKeyInput } from "@/components/control-bar/api-key-input";
 import { useAssistantApi, useMessage } from "@assistant-ui/react";
 
 const seenSystemMessages = new Set<string>();
@@ -64,7 +68,7 @@ export const Thread: FC = () => {
             ["--thread-max-width" as string]: "44rem",
           }}
         >
-          <ThreadPrimitive.Viewport className="aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4">
+          <ThreadPrimitive.Viewport className="aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-2">
             <ThreadPrimitive.If empty>
               <ThreadWelcome />
             </ThreadPrimitive.If>
@@ -173,10 +177,10 @@ const ThreadSuggestions: FC = () => {
           >
             <Button
               variant="ghost"
-              className="aui-thread-welcome-suggestion @md:flex-col dark:hover:bg-accent/60 h-auto w-full flex-1 flex-wrap items-start justify-start gap-1 rounded-3xl border px-5 py-4 text-left text-sm"
+              className="aui-thread-welcome-suggestion @md:flex-col dark:hover:bg-accent/60 h-auto w-full flex-1 flex-wrap items-start justify-start gap-1 rounded-3xl border px-5 py-4 text-left text-sm font-normal"
               aria-label={suggestedAction.action}
             >
-              <span className="aui-thread-welcome-suggestion-text-1 font-medium">
+              <span className="aui-thread-welcome-suggestion-text-1">
                 {suggestedAction.title}
               </span>
               <span className="aui-thread-welcome-suggestion-text-2 text-muted-foreground">
@@ -194,11 +198,11 @@ const Composer: FC = () => {
   return (
     <div className="aui-composer-wrapper bg-background sticky bottom-0 mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 overflow-visible rounded-t-3xl pb-4 md:pb-6">
       <ThreadScrollToBottom />
-      <ComposerPrimitive.Root className="aui-composer-root rounded-4xl dark:border-muted-foreground/15 relative flex w-full flex-col border bg-white px-1 pt-2 shadow-[0_9px_9px_0px_rgba(0,0,0,0.01),0_2px_5px_0px_rgba(0,0,0,0.06)]">
+      <ComposerPrimitive.Root className="aui-composer-root rounded-4xl bg-sidebar text-card-foreground relative flex w-full flex-col px-1 pt-2">
         <ComposerAttachments />
         <ComposerPrimitive.Input
           placeholder="Send a message..."
-          className="aui-composer-input placeholder:text-muted-foreground focus:outline-primary ml-3 mt-2 max-h-32 min-h-16 w-full resize-none bg-transparent px-3.5 pb-3 pt-1.5 text-sm text-stone-800 outline-none"
+          className="aui-composer-input text-foreground dark:text-white placeholder:text-muted-foreground focus:outline-primary ml-3 mt-2 max-h-32 min-h-16 w-full resize-none bg-transparent px-3.5 pb-3 pt-1.5 text-sm outline-none"
           rows={1}
           autoFocus
           aria-label="Message input"
@@ -210,9 +214,24 @@ const Composer: FC = () => {
 };
 
 const ComposerAction: FC = () => {
+  const showInlineControls = useComposerControl();
+
   return (
-    <div className="aui-composer-action-wrapper relative mx-1 mb-2 mt-2 flex items-center justify-between">
-      <ComposerAddAttachment />
+    <div className="aui-composer-action-wrapper relative mx-1 mb-2 mt-2 flex items-center">
+      {/* Show attachment button only when inline controls are hidden */}
+      {!showInlineControls && <ComposerAddAttachment />}
+
+      {/* Inline controls: [Model ▾] [Agent ▾] [🔑] */}
+      {showInlineControls && (
+        <div className="ml-2 flex items-center gap-2">
+          <ModelSelect />
+          <NamespaceSelect />
+          <ApiKeyInput />
+        </div>
+      )}
+
+      {/* Spacer */}
+      <div className="flex-1" />
 
       <ThreadPrimitive.If running={false}>
         <ComposerPrimitive.Send asChild>
@@ -355,7 +374,7 @@ const EditComposer: FC = () => {
     <div className="aui-edit-composer-wrapper mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 px-2 first:mt-4">
       <ComposerPrimitive.Root className="aui-edit-composer-root max-w-7/8 bg-muted ml-auto flex w-full flex-col rounded-xl">
         <ComposerPrimitive.Input
-          className="aui-edit-composer-input text-foreground flex min-h-[60px] w-full resize-none bg-transparent p-4 outline-none"
+          className="aui-edit-composer-input text-foreground dark:text-white flex min-h-[60px] w-full resize-none bg-transparent p-4 outline-none"
           autoFocus
         />
 

package/src/components/assistant-ui/threadlist-sidebar.tsx

@@ -14,14 +14,15 @@ import {
   SidebarRail,
 } from "@/components/ui/sidebar";
 import { ThreadList } from "@/components/assistant-ui/thread-list";
+import { WalletConnect } from "@/components/control-bar/wallet-connect";
 
 type ThreadListSidebarProps = React.ComponentProps<typeof Sidebar> & {
-  /** Optional footer component (e.g., WalletFooter from consumer app) */
-  footer?: React.ReactNode;
+  /** Position of the wallet button: "header" (top), "footer" (bottom), or null (hidden) */
+  walletPosition?: "header" | "footer" | null;
 };
 
 export function ThreadListSidebar({
-  footer,
+  walletPosition = "footer",
   ...props
 }: ThreadListSidebarProps) {
   return (
@@ -32,38 +33,32 @@ export function ThreadListSidebar({
       {...props}
     >
       <SidebarHeader className="aomi-sidebar-header">
-        <div className="aomi-sidebar-header-content flex items-center justify-between">
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton size="lg" asChild>
-                <Link
-                  href="https://aomi.dev"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <div className="aomi-sidebar-header-icon-wrapper flex aspect-square size-8 items-center justify-center rounded-lg bg-white">
-                    <Image
-                      src="/assets/images/bubble.svg"
-                      alt="Logo"
-                      width={28}
-                      height={28}
-                      className="aomi-sidebar-header-icon ml-3 size-7"
-                      priority
-                    />
-                  </div>
-                </Link>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
+        <div className="aomi-sidebar-header-content mt-5 mb-5 ml-5 flex items-center justify-between">
+          <Link
+            href="https://aomi.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-center"
+          >
+            <Image
+              src="/assets/images/bubble.svg"
+              alt="Logo"
+              width={25}
+              height={25}
+              className="aomi-sidebar-header-icon size-6"
+              priority
+            />
+          </Link>
+          {walletPosition === "header" && <WalletConnect />}
         </div>
       </SidebarHeader>
       <SidebarContent className="aomi-sidebar-content">
         <ThreadList />
       </SidebarContent>
       <SidebarRail />
-      {footer && (
-        <SidebarFooter className="aomi-sidebar-footer border-sm border-t py-4">
-          {footer}
+      {walletPosition === "footer" && (
+        <SidebarFooter className="aomi-sidebar-footer border-0 mx-5 mb-5">
+          <WalletConnect className="w-full" />
         </SidebarFooter>
       )}
     </Sidebar>

package/src/components/control-bar/api-key-input.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useState, type FC } from "react";
+import { KeyIcon, CheckIcon, EyeIcon, EyeOffIcon } from "lucide-react";
+import { useControl, cn } from "@aomi-labs/react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from "@/components/ui/dialog";
+
+export type ApiKeyInputProps = {
+  className?: string;
+  title?: string;
+  description?: string;
+};
+
+export const ApiKeyInput: FC<ApiKeyInputProps> = ({
+  className,
+  title = "Aomi API Key",
+  description = "Enter your API key to authenticate with Aomi services.",
+}) => {
+  const { state, setState } = useControl();
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [showKey, setShowKey] = useState(false);
+
+  const hasApiKey = Boolean(state.apiKey);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn("relative rounded-full", className)}
+          aria-label={hasApiKey ? "API key configured" : "Set API key"}
+        >
+          <KeyIcon className={cn("h-4 w-4", hasApiKey && "text-green-500")} />
+          {hasApiKey && (
+            <span className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-green-500" />
+          )}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[280px] pl-4 rounded-3xl">
+        <DialogHeader className="border-0">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="api-key" className="mb-2">
+              API Key
+            </Label>
+            <div className="relative">
+              <Input
+                id="api-key"
+                type={showKey ? "text" : "password"}
+                placeholder={hasApiKey ? "********" : "Enter your API key"}
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                className="rounded-full pr-10"
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
+                onClick={() => setShowKey(!showKey)}
+                aria-label={showKey ? "Hide API key" : "Show API key"}
+              >
+                {showKey ? (
+                  <EyeIcon className="h-4 w-4" />
+                ) : (
+                  <EyeOffIcon className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+            {hasApiKey && (
+              <p className="text-muted-foreground text-xs">
+                <CheckIcon className="mr-1 inline h-3 w-3 text-green-500" />
+                API key is configured
+              </p>
+            )}
+          </div>
+        </div>
+        <DialogFooter>
+          {hasApiKey && (
+            <Button
+              variant="outline"
+              onClick={() => {
+                setState({ apiKey: null });
+                setInputValue("");
+              }}
+            >
+              Clear
+            </Button>
+          )}
+          <Button
+            onClick={() => {
+              if (inputValue.trim()) {
+                setState({ apiKey: inputValue.trim() });
+                setOpen(false);
+                setInputValue("");
+              }
+            }}
+            disabled={!inputValue.trim()}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/control-bar/index.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import type { ReactNode, FC } from "react";
+import { cn } from "@aomi-labs/react";
+import { ModelSelect } from "./model-select";
+import { NamespaceSelect } from "./namespace-select";
+import { ApiKeyInput } from "./api-key-input";
+import { WalletConnect } from "./wallet-connect";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type ControlBarProps = {
+  className?: string;
+  /** Custom controls to render alongside built-in ones */
+  children?: ReactNode;
+  /** Hide the model selector */
+  hideModel?: boolean;
+  /** Hide the namespace/agent selector */
+  hideNamespace?: boolean;
+  /** Hide the API key input */
+  hideApiKey?: boolean;
+  /** Hide the wallet connect button (default: true) */
+  hideWallet?: boolean;
+};
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+export const ControlBar: FC<ControlBarProps> = ({
+  className,
+  children,
+  hideModel = false,
+  hideNamespace = false,
+  hideApiKey = false,
+  hideWallet = true,
+}) => {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      {!hideModel && <ModelSelect />}
+      {!hideNamespace && <NamespaceSelect />}
+      {!hideWallet && <WalletConnect />}
+      {children}
+      {!hideApiKey && <ApiKeyInput />}
+    </div>
+  );
+};
+
+// =============================================================================
+// Re-exports for granular usage
+// =============================================================================
+
+export { ModelSelect, type ModelSelectProps } from "./model-select";
+export { NamespaceSelect, type NamespaceSelectProps } from "./namespace-select";
+export { ApiKeyInput, type ApiKeyInputProps } from "./api-key-input";
+export { WalletConnect, type WalletConnectProps } from "./wallet-connect";