@vllnt/ui 0.1.8 → 0.1.11-canary.54f8a77

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 vllnt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/activity-heatmap/activity-heatmap.js

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const VISIBLE_DAY_LABELS = /* @__PURE__ */ new Set(["Mon", "Wed", "Fri"]);
+const LEVEL_CLASS_NAMES = [
+  "bg-muted",
+  "bg-emerald-500/25",
+  "bg-emerald-500/45",
+  "bg-emerald-500/65",
+  "bg-emerald-500"
+];
+function normalizeDate(input) {
+  if (input instanceof Date) {
+    return new Date(input.getTime());
+  }
+  return new Date(input);
+}
+function toUtcDate(date) {
+  return new Date(
+    Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
+  );
+}
+function addUtcDays(date, days) {
+  return new Date(
+    Date.UTC(
+      date.getUTCFullYear(),
+      date.getUTCMonth(),
+      date.getUTCDate() + days
+    )
+  );
+}
+function formatDayKey(date) {
+  return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, "0")}-${String(date.getUTCDate()).padStart(2, "0")}`;
+}
+function getIntensityLevel(count, maxCount) {
+  if (count <= 0 || maxCount <= 0) {
+    return 0;
+  }
+  const ratio = count / maxCount;
+  if (ratio < 0.25) {
+    return 1;
+  }
+  if (ratio < 0.5) {
+    return 2;
+  }
+  if (ratio < 0.75) {
+    return 3;
+  }
+  return 4;
+}
+function getGridData(data, endDate, weeks) {
+  const normalizedEnd = toUtcDate(endDate);
+  const startDate = addUtcDays(normalizedEnd, -(weeks * 7 - 1));
+  const countsByDate = /* @__PURE__ */ new Map();
+  data.forEach((item) => {
+    const normalizedDate = toUtcDate(normalizeDate(item.date));
+    countsByDate.set(formatDayKey(normalizedDate), item.count);
+  });
+  const maxCount = Math.max(...data.map((item) => item.count), 0);
+  return Array.from({ length: weeks }, (_, weekIndex) => {
+    return Array.from({ length: 7 }, (_2, dayIndex) => {
+      const date = addUtcDays(startDate, weekIndex * 7 + dayIndex);
+      const key = formatDayKey(date);
+      const count = countsByDate.get(key) ?? 0;
+      return {
+        count,
+        date,
+        key,
+        level: getIntensityLevel(count, maxCount)
+      };
+    });
+  });
+}
+function formatMonthLabel(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    timeZone: "UTC"
+  }).format(date);
+}
+function formatTooltip(date, count) {
+  const formattedDate = new Intl.DateTimeFormat("en-US", {
+    day: "numeric",
+    month: "short",
+    timeZone: "UTC",
+    year: "numeric"
+  }).format(date);
+  return `${count} activity ${count === 1 ? "event" : "events"} on ${formattedDate}`;
+}
+function HeatmapGrid({
+  gridData,
+  weeks
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-[640px] space-y-3", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid gap-2 text-xs text-muted-foreground",
+        style: { gridTemplateColumns: `40px repeat(${weeks}, minmax(0, 1fr))` },
+        children: [
+          /* @__PURE__ */ jsx("span", {}),
+          gridData.map((week) => /* @__PURE__ */ jsx("span", { className: "text-center", children: week[0] && week[0].date.getUTCDate() <= 7 ? formatMonthLabel(week[0].date) : "" }, `month-${week[0]?.key}`))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid gap-2",
+        style: { gridTemplateColumns: `40px repeat(${weeks}, minmax(0, 1fr))` },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "grid grid-rows-7 gap-2 pt-1 text-xs text-muted-foreground", children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ jsx("span", { className: "h-4 leading-4", children: VISIBLE_DAY_LABELS.has(label) ? label : "" }, label)) }),
+          gridData.map((week) => /* @__PURE__ */ jsx("div", { className: "grid grid-rows-7 gap-2", children: week.map((day) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "h-4 rounded-sm border border-border/40 transition-colors",
+                LEVEL_CLASS_NAMES[day.level]
+              ),
+              role: "img",
+              title: formatTooltip(day.date, day.count)
+            },
+            day.key
+          )) }, `week-${week[0]?.key}`))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: "Less" }),
+      LEVEL_CLASS_NAMES.map((className, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "h-3 w-3 rounded-[3px] border border-border/40",
+            className
+          )
+        },
+        `legend-${index}`
+      )),
+      /* @__PURE__ */ jsx("span", { children: "More" })
+    ] })
+  ] });
+}
+const ActivityHeatmap = React.forwardRef(
+  ({
+    className,
+    data,
+    description,
+    endDate = /* @__PURE__ */ new Date(),
+    title = "Activity heatmap",
+    weeks = 12,
+    ...props
+  }, ref) => {
+    const normalizedEndDate = normalizeDate(endDate);
+    const gridData = getGridData(data, normalizedEndDate, weeks);
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ref, ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border bg-card p-4 shadow-sm", children: /* @__PURE__ */ jsx(HeatmapGrid, { gridData, weeks }) })
+    ] });
+  }
+);
+ActivityHeatmap.displayName = "ActivityHeatmap";
+export {
+  ActivityHeatmap
+};

package/dist/components/activity-heatmap/index.js

@@ -0,0 +1,6 @@
+import {
+  ActivityHeatmap
+} from "./activity-heatmap";
+export {
+  ActivityHeatmap
+};

package/dist/components/activity-log/activity-log.js

@@ -0,0 +1,256 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Avatar, AvatarFallback } from "../avatar";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "../card";
+import { ScrollArea } from "../scroll-area";
+import { Separator } from "../separator";
+const toneConfig = {
+  danger: {
+    badgeClassName: "border-destructive/20 bg-destructive/10 text-destructive dark:text-destructive",
+    markerClassName: "bg-destructive"
+  },
+  default: {
+    badgeClassName: "border-border bg-muted text-muted-foreground",
+    markerClassName: "bg-primary"
+  },
+  success: {
+    badgeClassName: "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+    markerClassName: "bg-emerald-500"
+  },
+  warning: {
+    badgeClassName: "border-amber-500/20 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+    markerClassName: "bg-amber-500"
+  }
+};
+function getInitials(name) {
+  return name.split(" ").map((segment) => segment[0]).join("").slice(0, 2).toUpperCase();
+}
+function buildPageNumbers(currentPage, totalPages) {
+  if (totalPages <= 1) return [1];
+  const start = Math.max(1, currentPage - 1);
+  const end = Math.min(totalPages, start + 2);
+  const normalizedStart = Math.max(1, end - 2);
+  return Array.from(
+    { length: end - normalizedStart + 1 },
+    (_, index) => normalizedStart + index
+  );
+}
+function ActivityLogHeader({
+  currentPage,
+  description,
+  title,
+  totalPages
+}) {
+  return /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(Badge, { className: "w-fit", variant: "outline", children: [
+      "Page ",
+      currentPage,
+      " of ",
+      totalPages
+    ] })
+  ] }) });
+}
+function PaginationControls({
+  currentPage,
+  onPageChange,
+  pageNumbers,
+  totalPages
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        disabled: currentPage === 1,
+        onClick: () => {
+          onPageChange(currentPage - 1);
+        },
+        size: "sm",
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+          "Previous"
+        ]
+      }
+    ),
+    pageNumbers.map((pageNumber) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": `Go to page ${pageNumber}`,
+        onClick: () => {
+          onPageChange(pageNumber);
+        },
+        size: "sm",
+        variant: pageNumber === currentPage ? "default" : "outline",
+        children: pageNumber
+      },
+      pageNumber
+    )),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        disabled: currentPage === totalPages,
+        onClick: () => {
+          onPageChange(currentPage + 1);
+        },
+        size: "sm",
+        variant: "outline",
+        children: [
+          "Next",
+          /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+        ]
+      }
+    )
+  ] });
+}
+function ActivityRow({ item }) {
+  const palette = toneConfig[item.tone ?? "default"];
+  return /* @__PURE__ */ jsxs("li", { className: "relative pl-12", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute bottom-[-1.5rem] left-[18px] top-11 w-px bg-border last:hidden"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "absolute left-4 top-3 h-3 w-3 rounded-full ring-4 ring-background",
+          palette.markerClassName
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-background/70 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [
+        /* @__PURE__ */ jsx(Avatar, { className: "h-9 w-9 border bg-muted", children: /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(item.actor) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: item.actor }),
+            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: item.action }),
+            item.target ? /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: item.target }) : null
+          ] }),
+          item.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: item.description }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2 sm:justify-end", children: [
+        item.scope ? /* @__PURE__ */ jsx(Badge, { className: palette.badgeClassName, variant: "outline", children: item.scope }) : null,
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item.timestamp })
+      ] })
+    ] }) })
+  ] });
+}
+function ActivityLogBody({
+  currentPage,
+  emptyMessage,
+  items,
+  onPageChange,
+  pageNumbers,
+  pageSize,
+  totalPages
+}) {
+  const visibleItems = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    return items.slice(start, start + pageSize);
+  }, [currentPage, items, pageSize]);
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[26rem] pr-4", children: /* @__PURE__ */ jsx("ol", { className: "space-y-4 pb-2", children: visibleItems.map((item) => /* @__PURE__ */ jsx(ActivityRow, { item }, item.id)) }) }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "Showing ",
+        (currentPage - 1) * pageSize + 1,
+        " - ",
+        (currentPage - 1) * pageSize + visibleItems.length,
+        " of ",
+        items.length
+      ] }),
+      /* @__PURE__ */ jsx(
+        PaginationControls,
+        {
+          currentPage,
+          onPageChange,
+          pageNumbers,
+          totalPages
+        }
+      )
+    ] })
+  ] });
+}
+const ActivityLog = forwardRef(
+  ({
+    className,
+    defaultPage = 1,
+    description,
+    emptyMessage = "No activity recorded yet.",
+    items,
+    onPageChange,
+    page,
+    pageSize = 5,
+    title = "Activity log",
+    ...props
+  }, ref) => {
+    const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+    const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
+    const currentPage = Math.min(
+      Math.max(page ?? uncontrolledPage, 1),
+      totalPages
+    );
+    const pageNumbers = useMemo(
+      () => buildPageNumbers(currentPage, totalPages),
+      [currentPage, totalPages]
+    );
+    function handlePageChange(nextPage) {
+      if (page === void 0) {
+        setUncontrolledPage(nextPage);
+      }
+      onPageChange?.(nextPage);
+    }
+    return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), ref, ...props, children: [
+      /* @__PURE__ */ jsx(
+        ActivityLogHeader,
+        {
+          currentPage,
+          description,
+          title,
+          totalPages
+        }
+      ),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsx(
+        ActivityLogBody,
+        {
+          currentPage,
+          emptyMessage,
+          items,
+          onPageChange: handlePageChange,
+          pageNumbers,
+          pageSize,
+          totalPages
+        }
+      ) })
+    ] });
+  }
+);
+ActivityLog.displayName = "ActivityLog";
+export {
+  ActivityLog
+};

package/dist/components/activity-log/index.js

@@ -0,0 +1,6 @@
+import {
+  ActivityLog
+} from "./activity-log";
+export {
+  ActivityLog
+};

package/dist/components/ai-chat-input/ai-chat-input.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { LoaderCircle, SendHorizontal } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+import { Textarea } from "../textarea";
+const formShellVariants = cva(
+  "rounded-2xl border border-border/70 bg-background shadow-sm"
+);
+function AIChatInputFooter({
+  currentLength,
+  helperText,
+  isSubmitDisabled,
+  isSubmitting,
+  maxLength,
+  status,
+  submitLabel
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 border-t border-border/60 pt-3 sm:flex-row sm:items-end sm:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-xs text-muted-foreground", children: [
+      helperText ? /* @__PURE__ */ jsx("p", { children: helperText }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        status ? /* @__PURE__ */ jsx("span", { children: status }) : null,
+        typeof maxLength === "number" ? /* @__PURE__ */ jsxs("span", { children: [
+          currentLength,
+          "/",
+          maxLength
+        ] }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: "self-start rounded-full px-4 sm:self-auto",
+        disabled: isSubmitDisabled,
+        type: "submit",
+        children: [
+          isSubmitting ? /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(SendHorizontal, { className: "mr-2 h-4 w-4" }),
+          submitLabel
+        ]
+      }
+    )
+  ] });
+}
+const AIChatInput = forwardRef(
+  ({
+    className,
+    disabled = false,
+    helperText,
+    isSubmitting = false,
+    onSubmit,
+    onValueChange,
+    status,
+    submitLabel = "Send",
+    textareaProps,
+    toolbar,
+    value,
+    ...props
+  }, ref) => {
+    const currentValue = value ?? "";
+    const maxLength = textareaProps?.maxLength;
+    const isSubmitDisabled = disabled || isSubmitting || currentValue.trim().length === 0;
+    return /* @__PURE__ */ jsx(
+      "form",
+      {
+        className: cn(formShellVariants(), "w-full p-3", className),
+        onSubmit,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              className: "min-h-[120px] resize-none rounded-xl border-0 bg-transparent px-1 py-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
+              disabled,
+              onChange: (event) => {
+                textareaProps?.onChange?.(event);
+                onValueChange?.(event.target.value);
+              },
+              placeholder: "Ask a follow-up question, paste context, or describe what you need...",
+              value,
+              ...textareaProps
+            }
+          ),
+          toolbar ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: toolbar }) : null,
+          /* @__PURE__ */ jsx(
+            AIChatInputFooter,
+            {
+              currentLength: currentValue.length,
+              helperText,
+              isSubmitDisabled,
+              isSubmitting,
+              maxLength,
+              status,
+              submitLabel
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+AIChatInput.displayName = "AIChatInput";
+export {
+  AIChatInput
+};

package/dist/components/ai-chat-input/index.js

@@ -0,0 +1,4 @@
+import { AIChatInput } from "./ai-chat-input";
+export {
+  AIChatInput
+};

package/dist/components/ai-message-bubble/ai-message-bubble.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Avatar, AvatarFallback } from "../avatar";
+import { Badge } from "../badge";
+const bubbleVariants = cva(
+  "rounded-2xl border px-4 py-3 shadow-sm transition-colors",
+  {
+    defaultVariants: {
+      messageRole: "assistant"
+    },
+    variants: {
+      messageRole: {
+        assistant: "border-border bg-card text-card-foreground",
+        system: "border-border/80 bg-muted/60 text-foreground",
+        tool: "border-border bg-muted/40 text-foreground",
+        user: "border-primary/20 bg-primary/10 text-foreground"
+      }
+    }
+  }
+);
+function AIMessageMeta({
+  author,
+  isUser,
+  status,
+  timestamp
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center gap-2 text-xs text-muted-foreground",
+        isUser ? "justify-end" : "justify-start"
+      ),
+      children: [
+        author ? /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: author }) : null,
+        timestamp ? /* @__PURE__ */ jsx("span", { children: timestamp }) : null,
+        status ? /* @__PURE__ */ jsx(
+          Badge,
+          {
+            className: "rounded-full px-2 py-0 text-[10px]",
+            variant: "secondary",
+            children: status
+          }
+        ) : null
+      ]
+    }
+  );
+}
+const AIMessageBubble = forwardRef(
+  ({
+    author,
+    children,
+    className,
+    messageRole = "assistant",
+    status,
+    timestamp,
+    ...props
+  }, ref) => {
+    const resolvedMessageRole = messageRole ?? "assistant";
+    const isUser = resolvedMessageRole === "user";
+    const fallbackLabel = (author ?? resolvedMessageRole).charAt(0).toUpperCase();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex w-full", isUser ? "justify-end" : "justify-start"),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-full max-w-3xl gap-3",
+              isUser ? "flex-row-reverse text-right" : "flex-row"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Avatar, { className: "mt-0.5 h-8 w-8 border border-border/70", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-[11px] font-medium uppercase text-muted-foreground", children: fallbackLabel }) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "min-w-0 space-y-2",
+                    isUser ? "items-end" : "items-start"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      AIMessageMeta,
+                      {
+                        author,
+                        isUser,
+                        status,
+                        timestamp
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          bubbleVariants({ messageRole: resolvedMessageRole }),
+                          className
+                        ),
+                        ref,
+                        ...props,
+                        children: /* @__PURE__ */ jsx("div", { className: "text-sm leading-6 whitespace-pre-wrap", children })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+AIMessageBubble.displayName = "AIMessageBubble";
+export {
+  AIMessageBubble
+};