@aomi-labs/widget-lib 1.0.0 → 1.1.1

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";

package/src/components/control-bar/model-select.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useEffect, useState, type FC } from "react";
+import { ChevronDownIcon, CheckIcon } from "lucide-react";
+import { useControl, cn } from "@aomi-labs/react";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export type ModelSelectProps = {
+  className?: string;
+  placeholder?: string;
+};
+
+export const ModelSelect: FC<ModelSelectProps> = ({
+  className,
+  placeholder = "Select model",
+}) => {
+  const {
+    state,
+    getAvailableModels,
+    getCurrentThreadControl,
+    onModelSelect,
+    isProcessing,
+  } = useControl();
+  const [open, setOpen] = useState(false);
+
+  // Fetch available models on mount
+  useEffect(() => {
+    void getAvailableModels();
+  }, [getAvailableModels]);
+
+  // Get current thread's selected model (or fall back to default)
+  const threadControl = getCurrentThreadControl();
+  const selectedModel =
+    threadControl.model ?? state.defaultModel ?? state.availableModels[0];
+
+  const models = state.availableModels.length > 0 ? state.availableModels : [];
+
+  // Don't render if no models available
+  if (models.length === 0) {
+    return (
+      <Button
+        variant="ghost"
+        disabled
+        className={cn(
+          "h-8 w-auto min-w-[100px] rounded-full px-2 text-xs",
+          "text-muted-foreground",
+          className,
+        )}
+      >
+        <span className="truncate">Loading...</span>
+      </Button>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          role="combobox"
+          aria-expanded={open}
+          disabled={isProcessing}
+          className={cn(
+            "h-8 w-auto min-w-[100px] justify-between rounded-full px-2 text-xs",
+            "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+            isProcessing && "cursor-not-allowed opacity-50",
+            className,
+          )}
+        >
+          <span className="truncate">{selectedModel || placeholder}</span>
+          <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="center"
+        sideOffset={-40}
+        className="w-[220px] rounded-3xl p-1 shadow-none"
+      >
+        <div className="flex flex-col gap-0.5">
+          {models.map((model) => (
+            <button
+              key={model}
+              disabled={isProcessing}
+              onClick={() => {
+                console.log("[ModelSelect] clicked", { model, isProcessing });
+                if (isProcessing) return;
+                setOpen(false);
+                console.log("[ModelSelect] calling onModelSelect", { model });
+                void onModelSelect(model)
+                  .then(() => {
+                    console.log("[ModelSelect] onModelSelect completed", {
+                      model,
+                    });
+                  })
+                  .catch((err) => {
+                    console.error("[ModelSelect] onModelSelect failed:", err);
+                  });
+              }}
+              className={cn(
+                "flex w-full items-center justify-between gap-2 rounded-full px-3 py-2 text-sm outline-none",
+                "hover:bg-accent hover:text-accent-foreground",
+                "focus:bg-accent focus:text-accent-foreground",
+                selectedModel === model && "bg-accent",
+                isProcessing && "cursor-not-allowed opacity-50",
+              )}
+            >
+              <span>{model}</span>
+              {selectedModel === model && <CheckIcon className="h-4 w-4" />}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/control-bar/namespace-select.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useState, useEffect, type FC } from "react";
+import { ChevronDownIcon, CheckIcon } from "lucide-react";
+import { useControl, cn } from "@aomi-labs/react";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export type NamespaceSelectProps = {
+  className?: string;
+  placeholder?: string;
+};
+
+export const NamespaceSelect: FC<NamespaceSelectProps> = ({
+  className,
+  placeholder = "Select agent",
+}) => {
+  const {
+    state,
+    getAuthorizedNamespaces,
+    getCurrentThreadControl,
+    onNamespaceSelect,
+    isProcessing,
+  } = useControl();
+  const [open, setOpen] = useState(false);
+
+  // Fetch authorized namespaces on mount
+  useEffect(() => {
+    void getAuthorizedNamespaces();
+  }, [getAuthorizedNamespaces]);
+
+  // Get current thread's selected namespace (or fall back to default)
+  const threadControl = getCurrentThreadControl();
+  const selectedNamespace =
+    threadControl.namespace ?? state.defaultNamespace ?? "default";
+
+  const namespaces = state.authorizedNamespaces;
+
+  // Show loading state if no namespaces yet
+  if (namespaces.length === 0) {
+    return (
+      <Button
+        variant="ghost"
+        disabled
+        className={cn(
+          "h-8 w-auto min-w-[100px] rounded-full px-2 text-xs",
+          "text-muted-foreground",
+          className,
+        )}
+      >
+        <span className="truncate">{selectedNamespace}</span>
+      </Button>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          role="combobox"
+          aria-expanded={open}
+          disabled={isProcessing}
+          className={cn(
+            "h-8 w-auto min-w-[100px] justify-between rounded-full px-3 text-xs",
+            "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+            isProcessing && "cursor-not-allowed opacity-50",
+            className,
+          )}
+        >
+          <span className="truncate">{selectedNamespace ?? placeholder}</span>
+          <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="center"
+        sideOffset={-40}
+        className="w-[180px] rounded-3xl p-1 shadow-none"
+      >
+        <div className="flex flex-col gap-0.5">
+          {namespaces.map((ns: string) => (
+            <button
+              key={ns}
+              disabled={isProcessing}
+              onClick={() => {
+                console.log("[NamespaceSelect] clicked", { ns, isProcessing });
+                if (isProcessing) return;
+                console.log("[NamespaceSelect] calling onNamespaceSelect", {
+                  ns,
+                });
+                onNamespaceSelect(ns);
+                setOpen(false);
+                console.log("[NamespaceSelect] onNamespaceSelect completed", {
+                  ns,
+                });
+              }}
+              className={cn(
+                "flex w-full items-center justify-between gap-2 rounded-full px-3 py-2 text-sm outline-none",
+                "hover:bg-accent hover:text-accent-foreground",
+                "focus:bg-accent focus:text-accent-foreground",
+                selectedNamespace === ns && "bg-accent",
+                isProcessing && "cursor-not-allowed opacity-50",
+              )}
+            >
+              <span>{ns}</span>
+              {selectedNamespace === ns && <CheckIcon className="h-4 w-4" />}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/control-bar/wallet-connect.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect, type FC } from "react";
+import { useAccount, useConnect, useDisconnect } from "wagmi";
+import { cn, formatAddress, getNetworkName, useUser } from "@aomi-labs/react";
+
+export type WalletConnectProps = {
+  className?: string;
+  connectLabel?: string;
+  onConnectionChange?: (connected: boolean) => void;
+};
+
+export const WalletConnect: FC<WalletConnectProps> = ({
+  className,
+  connectLabel = "Connect Wallet",
+  onConnectionChange,
+}) => {
+  const { address, isConnected, chainId } = useAccount();
+  const { connect, connectors } = useConnect();
+  const { disconnect } = useDisconnect();
+  const { setUser } = useUser();
+
+  // Sync wallet state to UserContext
+  useEffect(() => {
+    setUser({
+      address: address ?? undefined,
+      chainId: chainId ?? undefined,
+      isConnected,
+    });
+    onConnectionChange?.(isConnected);
+  }, [address, chainId, isConnected, setUser, onConnectionChange]);
+
+  const handleClick = () => {
+    if (isConnected) {
+      disconnect();
+    } else {
+      const connector = connectors[0];
+      if (connector) {
+        connect({ connector });
+      }
+    }
+  };
+
+  const networkName = getNetworkName(chainId);
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className={cn(
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium",
+        "rounded-full px-5 py-2.5",
+        "bg-neutral-900 text-white",
+        "hover:bg-neutral-800",
+        "dark:bg-neutral-900 dark:text-white",
+        "dark:hover:bg-neutral-800",
+        "transition-colors",
+        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      aria-label={isConnected ? "Disconnect wallet" : "Connect wallet"}
+    >
+      <span>
+        {isConnected && address ? formatAddress(address) : connectLabel}
+      </span>
+      {isConnected && networkName && (
+        <>
+          <span className="opacity-50">•</span>
+          <span className="opacity-50">{networkName}</span>
+        </>
+      )}
+    </button>
+  );
+};

package/src/components/test/ThreadContextTest.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useThreadContext } from "@aomi-labs/react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+/**
+ * Test Component for Thread Context
+ *
+ * This component demonstrates and tests the ThreadContext functionality.
+ * Use this to verify Phase 2 is working correctly.
+ *
+ * Usage:
+ * 1. Wrap your app with <ThreadContextProvider>
+ * 2. Add <ThreadContextTest /> somewhere in your component tree
+ * 3. Click buttons to test thread operations
+ */
+export function ThreadContextTest() {
+  const {
+    currentThreadId,
+    setCurrentThreadId,
+    threads,
+    threadMetadata,
+    setThreadMessages,
+    updateThreadMetadata,
+  } = useThreadContext();
+
+  // Test: Create a new thread
+  const handleCreateThread = () => {
+    const newThreadId = `thread-${Date.now()}`;
+
+    // Add empty messages for new thread
+    setThreadMessages(newThreadId, []);
+
+    // Add metadata for new thread
+    updateThreadMetadata(newThreadId, {
+      title: `Thread ${newThreadId.slice(-4)}`,
+      status: "regular",
+    });
+
+    // Switch to new thread
+    setCurrentThreadId(newThreadId);
+
+    console.log("✅ Created thread:", newThreadId);
+  };
+
+  // Test: Switch thread
+  const handleSwitchThread = (threadId: string) => {
+    setCurrentThreadId(threadId);
+    console.log("✅ Switched to thread:", threadId);
+  };
+
+  // Test: Archive current thread
+  const handleArchiveThread = () => {
+    updateThreadMetadata(currentThreadId, { status: "archived" });
+    console.log("✅ Archived thread:", currentThreadId);
+  };
+
+  // Test: Unarchive current thread
+  const handleUnarchiveThread = () => {
+    updateThreadMetadata(currentThreadId, { status: "regular" });
+    console.log("✅ Unarchived thread:", currentThreadId);
+  };
+
+  // Get current thread info
+  const currentMessages = threads.get(currentThreadId) || [];
+  const currentMeta = threadMetadata.get(currentThreadId);
+
+  // Get all thread IDs
+  const allThreadIds = Array.from(threads.keys());
+  const regularThreads = allThreadIds.filter(
+    (id) => threadMetadata.get(id)?.status === "regular",
+  );
+  const archivedThreads = allThreadIds.filter(
+    (id) => threadMetadata.get(id)?.status === "archived",
+  );
+
+  return (
+    <Card className="mx-auto my-8 w-full max-w-2xl">
+      <CardHeader>
+        <CardTitle>🧪 Thread Context Test</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Current Thread Info */}
+        <div className="bg-muted/50 rounded border p-4">
+          <h3 className="mb-2 font-semibold">Current Thread</h3>
+          <div className="space-y-1 text-sm">
+            <p>
+              <strong>ID:</strong> {currentThreadId}
+            </p>
+            <p>
+              <strong>Title:</strong> {currentMeta?.title || "N/A"}
+            </p>
+            <p>
+              <strong>Status:</strong> {currentMeta?.status || "N/A"}
+            </p>
+            <p>
+              <strong>Messages:</strong> {currentMessages.length}
+            </p>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="space-y-2">
+          <h3 className="font-semibold">Actions</h3>
+          <div className="flex flex-wrap gap-2">
+            <Button onClick={handleCreateThread} variant="default">
+              Create New Thread
+            </Button>
+            <Button
+              onClick={handleArchiveThread}
+              variant="outline"
+              disabled={currentMeta?.status === "archived"}
+            >
+              Archive Current
+            </Button>
+            <Button
+              onClick={handleUnarchiveThread}
+              variant="outline"
+              disabled={currentMeta?.status === "regular"}
+            >
+              Unarchive Current
+            </Button>
+          </div>
+        </div>
+
+        {/* Thread List */}
+        <div className="space-y-2">
+          <h3 className="font-semibold">
+            Regular Threads ({regularThreads.length})
+          </h3>
+          <div className="space-y-1">
+            {regularThreads.map((threadId) => {
+              const meta = threadMetadata.get(threadId);
+              const isActive = threadId === currentThreadId;
+              return (
+                <button
+                  key={threadId}
+                  onClick={() => handleSwitchThread(threadId)}
+                  className={`w-full rounded border px-3 py-2 text-left text-sm ${
+                    isActive
+                      ? "bg-primary text-primary-foreground border-primary"
+                      : "bg-background hover:bg-muted border-border"
+                  }`}
+                >
+                  {meta?.title || threadId}
+                  {isActive && " (active)"}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {archivedThreads.length > 0 && (
+          <div className="space-y-2">
+            <h3 className="font-semibold">
+              Archived Threads ({archivedThreads.length})
+            </h3>
+            <div className="space-y-1">
+              {archivedThreads.map((threadId) => {
+                const meta = threadMetadata.get(threadId);
+                const isActive = threadId === currentThreadId;
+                return (
+                  <button
+                    key={threadId}
+                    onClick={() => handleSwitchThread(threadId)}
+                    className={`w-full rounded border px-3 py-2 text-left text-sm opacity-60 ${
+                      isActive
+                        ? "bg-primary text-primary-foreground border-primary"
+                        : "bg-background hover:bg-muted border-border"
+                    }`}
+                  >
+                    {meta?.title || threadId}
+                    {isActive && " (active)"}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Debug Info */}
+        <details className="rounded border p-2 text-xs">
+          <summary className="mb-2 cursor-pointer font-semibold">
+            Debug Info
+          </summary>
+          <pre className="max-h-40 overflow-auto whitespace-pre-wrap">
+            {JSON.stringify(
+              {
+                currentThreadId,
+                totalThreads: allThreadIds.length,
+                regularCount: regularThreads.length,
+                archivedCount: archivedThreads.length,
+                threadIds: allThreadIds,
+              },
+              null,
+              2,
+            )}
+          </pre>
+        </details>
+      </CardContent>
+    </Card>
+  );
+}