@aomi-labs/widget-lib 1.0.0 → 1.1.0

package/dist/tooltip.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip",
+  "type": "registry:component",
+  "description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  "files": [
+    {
+      "type": "registry:component",
+      "path": "components/ui/tooltip.tsx",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@aomi-labs/react\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"origin-(--radix-tooltip-content-transform-origin) animate-in bg-primary text-primary-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"
+    }
+  ],
+  "dependencies": [
+    "@radix-ui/react-tooltip"
+  ],
+  "registryDependencies": []
+}

package/package.json

@@ -1,108 +1,44 @@
 {
   "name": "@aomi-labs/widget-lib",
-  "version": "1.0.0",
-  "description": "AI-powered assistant UI widget library",
+  "version": "1.1.0",
+  "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"
-  },
-  "files": [
-    "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"
+    ".": "./src/index.ts",
+    "./aomi-frame": "./src/components/aomi-frame.tsx",
+    "./aomi-frame-collapsible": "./src/components/aomi-frame-collapsible.tsx",
+    "./components/ui/*": "./src/components/ui/*.tsx",
+    "./components/assistant-ui/*": "./src/components/assistant-ui/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./styles.css": "./src/themes/default.css",
+    "./themes/*.css": "./src/themes/*.css"
   },
   "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.0"
+  },
+  "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/scripts/build-registry.js

@@ -0,0 +1,74 @@
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { registry } from "../src/registry.js";
+
+const REGISTRY_NAME = "aomi";
+const REGISTRY_HOMEPAGE = "https://r.aomi.dev";
+
+const baseDir = path.dirname(fileURLToPath(import.meta.url));
+const distDir = path.resolve(baseDir, "../dist");
+const srcDir = path.resolve(baseDir, "../src");
+
+function buildComponent(entry) {
+  const filePath = path.join(srcDir, entry.file);
+  const content = readFileSync(filePath, "utf8");
+
+  const payload = {
+    $schema: "https://ui.shadcn.com/schema/registry-item.json",
+    name: entry.name,
+    type: "registry:component",
+    description: entry.description,
+    files: [
+      {
+        type: "registry:component",
+        path: entry.file,
+        content,
+      },
+    ],
+    dependencies: entry.dependencies ?? [],
+    registryDependencies: entry.registryDependencies ?? [],
+  };
+
+  const outPath = path.join(distDir, `${entry.name}.json`);
+  writeFileSync(outPath, JSON.stringify(payload, null, 2));
+
+  // Return item for registry.json (without content)
+  return {
+    name: entry.name,
+    type: "registry:component",
+    description: entry.description,
+    files: [
+      {
+        type: "registry:component",
+        path: entry.file,
+      },
+    ],
+    dependencies: entry.dependencies ?? [],
+    registryDependencies: entry.registryDependencies ?? [],
+  };
+}
+
+function main() {
+  mkdirSync(distDir, { recursive: true });
+
+  const items = registry.map(buildComponent);
+
+  // Generate registry.json index
+  const registryIndex = {
+    $schema: "https://ui.shadcn.com/schema/registry.json",
+    name: REGISTRY_NAME,
+    homepage: REGISTRY_HOMEPAGE,
+    items,
+  };
+
+  writeFileSync(
+    path.join(distDir, "registry.json"),
+    JSON.stringify(registryIndex, null, 2),
+  );
+
+  console.log(`Wrote ${items.length} component files + registry.json to dist/`);
+}
+
+main();

package/src/components/aomi-frame.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { type CSSProperties, type ReactNode } from "react";
+import {
+  AomiRuntimeProvider,
+  cn,
+  useAomiRuntime,
+  type UserConfig,
+} from "@aomi-labs/react";
+import { Thread } from "@/components/assistant-ui/thread";
+import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+type AomiFrameProps = {
+  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 */
+  children?: ReactNode;
+};
+
+// =============================================================================
+// AomiFrame Component
+// =============================================================================
+
+export const AomiFrame = ({
+  width = "100%",
+  height = "80vh",
+  className,
+  style,
+  walletFooter,
+  children,
+}: AomiFrameProps) => {
+  const backendUrl =
+    process.env.NEXT_PUBLIC_BACKEND_URL ?? "http://localhost:8080";
+
+  return (
+    <AomiRuntimeProvider backendUrl={backendUrl}>
+      <AomiFrameShell
+        width={width}
+        height={height}
+        className={className}
+        style={style}
+        walletFooter={walletFooter}
+      >
+        {children}
+      </AomiFrameShell>
+    </AomiRuntimeProvider>
+  );
+};
+
+// =============================================================================
+// Internal Shell Component (uses hooks from providers)
+// =============================================================================
+
+type AomiFrameShellProps = {
+  width: CSSProperties["width"];
+  height: CSSProperties["height"];
+  className?: string;
+  style?: CSSProperties;
+  walletFooter?: (props: UserConfig) => ReactNode;
+  children?: ReactNode;
+};
+
+const AomiFrameShell = ({
+  width,
+  height,
+  className,
+  style,
+  walletFooter,
+  children,
+}: AomiFrameShellProps) => {
+  const { user, setUser, currentThreadId, threadViewKey, getThreadMetadata } =
+    useAomiRuntime();
+  const currentTitle = getThreadMetadata(currentThreadId)?.title ?? "New Chat";
+
+  const frameStyle: CSSProperties = { width, height, ...style };
+
+  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>
+      </div>
+    </SidebarProvider>
+  );
+};

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>
+  );
+};