@aomi-labs/widget-lib 1.0.0 → 1.1.0

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

package/src/components/tools/example-tool/ExampleTool.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+/**
+ * Example ToolUI Component
+ *
+ * This demonstrates how to create a custom UI for tool calls.
+ * Replace this with your actual tool implementation.
+ *
+ * Usage:
+ * 1. Define your tool args and result types
+ * 2. Update toolName to match your backend tool
+ * 3. Customize the render function with your UI
+ * 4. Import and render <ExampleTool /> in your page
+ */
+
+// Define the shape of your tool's arguments
+type ExampleToolArgs = {
+  query: string;
+  limit?: number;
+};
+
+// Define the shape of your tool's result
+type ExampleToolResult = {
+  data: Array<{
+    id: string;
+    title: string;
+    description: string;
+  }>;
+  total: number;
+};
+
+export const ExampleTool = makeAssistantToolUI<
+  ExampleToolArgs,
+  ExampleToolResult
+>({
+  // IMPORTANT: Must match the tool name from your backend exactly!
+  toolName: "example_tool",
+
+  render: function ExampleToolUI({ args, argsText, result, status }) {
+    return (
+      <div className="my-4">
+        {/* Show the tool call */}
+        <pre className="text-muted-foreground mb-2 text-xs">
+          example_tool({argsText})
+        </pre>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">
+              {status.type === "running" ? "Searching..." : "Search Results"}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {/* Loading state */}
+            {status.type === "running" && (
+              <div className="flex items-center gap-2">
+                <div className="border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" />
+                <span className="text-sm">
+                  Searching for &quot;{args.query}&quot;...
+                </span>
+              </div>
+            )}
+
+            {/* Results */}
+            {result && (
+              <div className="space-y-3">
+                <p className="text-muted-foreground text-sm">
+                  Found {result.total} results
+                  {args.limit && ` (showing top ${args.limit})`}
+                </p>
+
+                <div className="space-y-2">
+                  {result.data.map((item) => (
+                    <div
+                      key={item.id}
+                      className="hover:bg-muted/50 rounded-lg border p-3 transition-colors"
+                    >
+                      <h4 className="font-medium">{item.title}</h4>
+                      <p className="text-muted-foreground mt-1 text-sm">
+                        {item.description}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Error state (if your result includes error) */}
+            {status.type === "incomplete" && (
+              <div className="text-destructive text-sm">
+                Failed to complete the search
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    );
+  },
+});

package/src/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@aomi-labs/react";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/ui/alert.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@aomi-labs/react";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    data-slot="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    data-slot="alert-title"
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="alert-description"
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@aomi-labs/react";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@aomi-labs/react";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@aomi-labs/react";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@aomi-labs/react";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };