@vllnt/ui 0.1.11 → 0.2.0

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

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

@@ -0,0 +1,6 @@
+import {
+  AIMessageBubble
+} from "./ai-message-bubble";
+export {
+  AIMessageBubble
+};

package/dist/components/ai-source-citation/ai-source-citation.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ExternalLink, Quote } from "lucide-react";
+import { cn } from "../../lib/utils";
+const AISourceCitation = forwardRef(
+  ({ className, href, snippet, source, target = "_blank", title, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        className: cn(
+          "group inline-flex max-w-full flex-col gap-2 rounded-xl border border-border/70 bg-background px-3 py-2 text-left shadow-sm transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          className
+        ),
+        href,
+        ref,
+        rel: target === "_blank" ? "noreferrer" : void 0,
+        target,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx(Quote, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: title }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: source })
+              ] }),
+              /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" })
+            ] }) })
+          ] }),
+          snippet ? /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-6 text-muted-foreground", children: snippet }) : null
+        ]
+      }
+    );
+  }
+);
+AISourceCitation.displayName = "AISourceCitation";
+export {
+  AISourceCitation
+};

package/dist/components/ai-source-citation/index.js

@@ -0,0 +1,6 @@
+import {
+  AISourceCitation
+} from "./ai-source-citation";
+export {
+  AISourceCitation
+};

package/dist/components/ai-streaming-text/ai-streaming-text.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const AIStreamingText = forwardRef(
+  ({
+    className,
+    cursor = "\u258D",
+    isStreaming = false,
+    showCursor = true,
+    text,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-live": isStreaming ? "polite" : void 0,
+        className: cn(
+          "text-sm leading-6 text-foreground whitespace-pre-wrap",
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          text,
+          isStreaming && showCursor ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ml-0.5 inline-block animate-pulse text-muted-foreground",
+              children: cursor
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+AIStreamingText.displayName = "AIStreamingText";
+export {
+  AIStreamingText
+};

package/dist/components/ai-streaming-text/index.js

@@ -0,0 +1,6 @@
+import {
+  AIStreamingText
+} from "./ai-streaming-text";
+export {
+  AIStreamingText
+};

package/dist/components/ai-tool-call-display/ai-tool-call-display.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { AlertCircle, CheckCircle2, Clock3, Wrench } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+const statusVariants = cva(
+  "rounded-full px-2 py-0 text-[10px] uppercase tracking-wide",
+  {
+    defaultVariants: {
+      status: "queued"
+    },
+    variants: {
+      status: {
+        complete: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+        error: "bg-red-500/10 text-red-700 dark:text-red-300",
+        queued: "bg-muted text-muted-foreground",
+        running: "bg-blue-500/10 text-blue-700 dark:text-blue-300"
+      }
+    }
+  }
+);
+const statusIconMap = {
+  complete: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4" }),
+  error: /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+  queued: /* @__PURE__ */ jsx(Clock3, { className: "h-4 w-4" }),
+  running: /* @__PURE__ */ jsx(Wrench, { className: "h-4 w-4 animate-pulse" })
+};
+const AIToolCallDisplay = forwardRef(
+  ({
+    className,
+    description,
+    duration,
+    input,
+    output,
+    status = "queued",
+    toolName,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-2xl border border-border/70 bg-card p-4 shadow-sm",
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+                statusIconMap[status],
+                /* @__PURE__ */ jsx("span", { children: toolName })
+              ] }),
+              description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              duration ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: duration }) : null,
+              /* @__PURE__ */ jsx(Badge, { className: statusVariants({ status }), variant: "secondary", children: status })
+            ] })
+          ] }),
+          input ? /* @__PURE__ */ jsxs(
+            "details",
+            {
+              className: "mt-4 rounded-xl border border-border/60 bg-muted/20 p-3",
+              open: status !== "complete",
+              children: [
+                /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Tool input" }),
+                /* @__PURE__ */ jsx("pre", { className: "mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground", children: input })
+              ]
+            }
+          ) : null,
+          output ? /* @__PURE__ */ jsxs(
+            "details",
+            {
+              className: "mt-3 rounded-xl border border-border/60 bg-muted/20 p-3",
+              open: status !== "complete",
+              children: [
+                /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Tool output" }),
+                /* @__PURE__ */ jsx("pre", { className: "mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground", children: output })
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+AIToolCallDisplay.displayName = "AIToolCallDisplay";
+export {
+  AIToolCallDisplay
+};

package/dist/components/ai-tool-call-display/index.js

@@ -0,0 +1,6 @@
+import {
+  AIToolCallDisplay
+} from "./ai-tool-call-display";
+export {
+  AIToolCallDisplay
+};