@aomi-labs/widget-lib 1.0.0 → 1.1.1

package/package.json

@@ -1,108 +1,50 @@
 {
   "name": "@aomi-labs/widget-lib",
-  "version": "1.0.0",
-  "description": "AI-powered assistant UI widget library",
+  "version": "1.1.1",
+  "description": "Shadcn registry for the Aomi widget.",
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
   "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    },
-    "./styles.css": "./dist/styles.css"
+    ".": "./src/index.ts",
+    "./aomi-frame": "./src/components/aomi-frame.tsx",
+    "./aomi-frame-collapsible": "./src/components/aomi-frame-collapsible.tsx",
+    "./control-bar": "./src/components/control-bar/index.tsx",
+    "./components/ui/*": "./src/components/ui/*.tsx",
+    "./components/assistant-ui/*": "./src/components/assistant-ui/*.tsx",
+    "./components/control-bar/*": "./src/components/control-bar/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./styles.css": "./src/themes/default.css",
+    "./themes/*.css": "./src/themes/*.css"
   },
   "files": [
+    "src",
     "dist"
   ],
-  "prettier": {
-    "plugins": [
-      "prettier-plugin-tailwindcss"
-    ],
-    "tailwindStylesheet": "app/globals.css"
-  },
-  "peerDependencies": {
-    "@assistant-ui/react": "^0.11.0",
-    "@assistant-ui/react-markdown": "^0.11.0",
-    "@radix-ui/react-avatar": "^1.0.0",
-    "@radix-ui/react-dialog": "^1.0.0",
-    "@radix-ui/react-separator": "^1.0.0",
-    "@radix-ui/react-slot": "^1.0.0",
-    "@radix-ui/react-tooltip": "^1.0.0",
-    "@tanstack/react-query": "^5.0.0",
-    "framer-motion": "^12.0.0",
-    "lucide-react": "^0.500.0",
-    "motion": "^12.0.0",
-    "next": ">=14.0.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "react-shiki": "^0.9.0",
-    "remark-gfm": "^4.0.0",
-    "tailwindcss": "^4.0.0",
-    "zustand": "^5.0.0"
-  },
   "dependencies": {
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.3.1"
-  },
-  "devDependencies": {
-    "@ai-sdk/openai": "^2.0.46",
     "@assistant-ui/react": "^0.11.28",
-    "@assistant-ui/react-ai-sdk": "^1.1.5",
     "@assistant-ui/react-markdown": "^0.11.1",
-    "@eslint/eslintrc": "^3",
+    "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@reown/appkit": "^1.8.14",
-    "@reown/appkit-adapter-wagmi": "^1.8.14",
-    "@tailwindcss/postcss": "^4",
-    "@tanstack/react-query": "^5.90.10",
-    "@types/node": "^24",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "ai": "^5.0.65",
-    "eslint": "^9",
-    "eslint-config-next": "15.5.4",
-    "framer-motion": "^12.23.22",
+    "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.0.0",
     "lucide-react": "^0.545.0",
     "motion": "^12.23.22",
-    "next": "15.5.7",
-    "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.14",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-shiki": "^0.9.0",
     "remark-gfm": "^4.0.1",
-    "tailwindcss": "^4",
-    "tsup": "^8.5.1",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5",
-    "viem": "^2.40.3",
-    "wagmi": "^2.19.5",
-    "zustand": "^5.0.8"
+    "sonner": "^1.7.4",
+    "vaul": "^1.1.2",
+    "zustand": "^5.0.8",
+    "@aomi-labs/react": "0.2.1"
+  },
+  "devDependencies": {
+    "tsx": "^4.21.0"
   },
   "scripts": {
-    "dev": "next dev --turbopack",
-    "dev:example:live": "pnpm run build:lib -- --watch & pnpm --filter example dev",
-    "build": "next build",
-    "build:lib": "tsup",
-    "vercel-build": "pnpm run build:lib && pnpm --filter example build",
-    "start": "next start",
-    "lint": "eslint .",
-    "prettier": "prettier --check .",
-    "prettier:fix": "prettier --write ."
+    "build": "tsx scripts/build-registry.js"
   }
 }

package/src/components/aomi-frame.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import {
+  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,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+} 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 RootProps = {
+  children?: ReactNode;
+  width?: CSSProperties["width"];
+  height?: CSSProperties["height"];
+  className?: string;
+  style?: CSSProperties;
+  /** 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;
+
+// =============================================================================
+// Compound Components
+// =============================================================================
+
+/**
+ * Root component - provides all context and layout container
+ */
+const Root: FC<RootProps> = ({
+  children,
+  width = "100%",
+  height = "80vh",
+  className,
+  style,
+  walletPosition = "footer",
+  backendUrl,
+}) => {
+  const resolvedBackendUrl =
+    backendUrl ??
+    process.env.NEXT_PUBLIC_BACKEND_URL ??
+    "http://localhost:8080";
+  const frameStyle: CSSProperties = { width, height, ...style };
+
+  return (
+    <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>
+  );
+};
+
+/**
+ * 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";
+
+  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>
+  );
+};
+
+/**
+ * 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,
+  withControl = false,
+  className,
+}) => {
+  const { currentThreadId, threadViewKey } = useAomiRuntime();
+
+  return (
+    <ComposerControlContext.Provider value={withControl}>
+      <div className={cn("flex flex-1 flex-col overflow-hidden", className)}>
+        <Thread key={`${currentThreadId}-${threadViewKey}`} />
+        {children}
+      </div>
+    </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/attachment.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import { PropsWithChildren, useEffect, useState, type FC } from "react";
+import Image from "next/image";
+import { XIcon, PlusIcon, FileText } from "lucide-react";
+import {
+  AttachmentPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  useAssistantState,
+  useAssistantApi,
+} from "@assistant-ui/react";
+import { useShallow } from "zustand/shallow";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { cn } from "@aomi-labs/react";
+
+const useFileSrc = (file: File | undefined) => {
+  const [src, setSrc] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!file) {
+      setSrc(undefined);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+
+  return src;
+};
+
+const useAttachmentSrc = () => {
+  const { file, src } = useAssistantState(
+    useShallow(({ attachment }): { file?: File; src?: string } => {
+      if (attachment.type !== "image") return {};
+      if (attachment.file) return { file: attachment.file };
+      const src = attachment.content?.filter((c) => c.type === "image")[0]
+        ?.image;
+      if (!src) return {};
+      return { src };
+    }),
+  );
+
+  return useFileSrc(file) ?? src;
+};
+
+type AttachmentPreviewProps = {
+  src: string;
+};
+
+const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  return (
+    <Image
+      src={src}
+      alt="Image Preview"
+      width={1}
+      height={1}
+      className={
+        isLoaded
+          ? "aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain"
+          : "aui-attachment-preview-image-loading hidden"
+      }
+      onLoadingComplete={() => setIsLoaded(true)}
+      priority={false}
+    />
+  );
+};
+
+const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
+  const src = useAttachmentSrc();
+
+  if (!src) return children;
+
+  return (
+    <Dialog>
+      <DialogTrigger
+        className="aui-attachment-preview-trigger hover:bg-accent/50 cursor-pointer transition-colors"
+        asChild
+      >
+        {children}
+      </DialogTrigger>
+      <DialogContent className="aui-attachment-preview-dialog-content [&_svg]:text-background [&>button]:bg-foreground/60 [&>button]:hover:[&_svg]:text-destructive p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:p-1 [&>button]:opacity-100 [&>button]:!ring-0">
+        <DialogTitle className="aui-sr-only sr-only">
+          Image Attachment Preview
+        </DialogTitle>
+        <div className="aui-attachment-preview bg-background relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden">
+          <AttachmentPreview src={src} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const AttachmentThumb: FC = () => {
+  const isImage = useAssistantState(
+    ({ attachment }) => attachment.type === "image",
+  );
+  const src = useAttachmentSrc();
+
+  return (
+    <Avatar className="aui-attachment-tile-avatar h-full w-full rounded-none">
+      <AvatarImage
+        src={src}
+        alt="Attachment preview"
+        className="aui-attachment-tile-image object-cover"
+      />
+      <AvatarFallback delayMs={isImage ? 200 : 0}>
+        <FileText className="aui-attachment-tile-fallback-icon text-muted-foreground size-8" />
+      </AvatarFallback>
+    </Avatar>
+  );
+};
+
+const AttachmentUI: FC = () => {
+  const api = useAssistantApi();
+  const isComposer = api.attachment.source === "composer";
+
+  const isImage = useAssistantState(
+    ({ attachment }) => attachment.type === "image",
+  );
+  const typeLabel = useAssistantState(({ attachment }) => {
+    const type = attachment.type;
+    switch (type) {
+      case "image":
+        return "Image";
+      case "document":
+        return "Document";
+      case "file":
+        return "File";
+      default:
+        const _exhaustiveCheck: never = type;
+        throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
+    }
+  });
+
+  return (
+    <Tooltip>
+      <AttachmentPrimitive.Root
+        className={cn(
+          "aui-attachment-root relative",
+          isImage &&
+            "aui-attachment-root-composer only:[&>#attachment-tile]:size-24",
+        )}
+      >
+        <AttachmentPreviewDialog>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                "aui-attachment-tile bg-muted size-14 cursor-pointer overflow-hidden rounded-[14px] border transition-opacity hover:opacity-75",
+                isComposer &&
+                  "aui-attachment-tile-composer border-foreground/20",
+              )}
+              role="button"
+              id="attachment-tile"
+              aria-label={`${typeLabel} attachment`}
+            >
+              <AttachmentThumb />
+            </div>
+          </TooltipTrigger>
+        </AttachmentPreviewDialog>
+        {isComposer && <AttachmentRemove />}
+      </AttachmentPrimitive.Root>
+      <TooltipContent side="top">
+        <AttachmentPrimitive.Name />
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+const AttachmentRemove: FC = () => {
+  return (
+    <AttachmentPrimitive.Remove asChild>
+      <TooltipIconButton
+        tooltip="Remove file"
+        className="aui-attachment-tile-remove text-muted-foreground hover:[&_svg]:text-destructive absolute right-1.5 top-1.5 size-3.5 rounded-full bg-white opacity-100 shadow-sm hover:!bg-white [&_svg]:text-black"
+        side="top"
+      >
+        <XIcon className="aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" />
+      </TooltipIconButton>
+    </AttachmentPrimitive.Remove>
+  );
+};
+
+export const UserMessageAttachments: FC = () => {
+  return (
+    <div className="aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2">
+      <MessagePrimitive.Attachments components={{ Attachment: AttachmentUI }} />
+    </div>
+  );
+};
+
+export const ComposerAttachments: FC = () => {
+  return (
+    <div className="aui-composer-attachments mb-2 flex w-full flex-row items-center gap-2 overflow-x-auto px-1.5 pb-1 pt-0.5 empty:hidden">
+      <ComposerPrimitive.Attachments
+        components={{ Attachment: AttachmentUI }}
+      />
+    </div>
+  );
+};
+
+export const ComposerAddAttachment: FC = () => {
+  return (
+    <ComposerPrimitive.AddAttachment asChild>
+      <TooltipIconButton
+        tooltip="Add Attachment"
+        side="bottom"
+        variant="ghost"
+        size="icon"
+        className="aui-composer-add-attachment hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30 size-[34px] rounded-full p-1 text-xs font-semibold"
+        aria-label="Add Attachment"
+      >
+        <PlusIcon className="aui-attachment-add-icon size-5 stroke-[1.5px]" />
+      </TooltipIconButton>
+    </ComposerPrimitive.AddAttachment>
+  );
+};