@aigentyc/chat-sdk 0.4.0 → 0.5.0

package/dist/{chunk-B27JIQ4Z.js → chunk-5XF3NEFB.js}

@@ -1,11 +1,15 @@
 "use client";
 import { useI18n } from './chunk-QYCEHFAB.js';
-import { Button, Textarea, Collapsible, CollapsibleTrigger, CollapsibleContent } from './chunk-JHWSG5IB.js';
+import { Button, Textarea, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Collapsible, CollapsibleTrigger, CollapsibleContent } from './chunk-JAOD6CNW.js';
 import { cn } from './chunk-3RW7O444.js';
-import { ArrowDownIcon, Check, Copy, X, ChevronDownIcon, BookIcon } from 'lucide-react';
-import { useCallback, useState } from 'react';
+import { ArrowDownIcon, Check, Copy, X, ChevronLeftIcon, ChevronRightIcon, XIcon, PaperclipIcon, ChevronDownIcon, BookIcon } from 'lucide-react';
+import { createContext, memo, useCallback, useState, useEffect, useContext, useRef } from 'react';
 import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { createPortal } from 'react-dom';
+import { Streamdown } from 'streamdown';
 
 var Conversation = ({ className, ...props }) => /* @__PURE__ */ jsx(
   StickToBottom,
@@ -383,6 +387,572 @@ function MessageFeedback({
 			` })
   ] });
 }
+var buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var Message = ({ className, from, fullWidth, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "group flex w-full flex-col gap-2",
+      fullWidth ? "" : from === "assistant" ? "max-w-[var(--ac-assistant-max-width,95%)]" : "max-w-[95%]",
+      from === "user" ? "is-user justify-end" : "is-assistant",
+      className
+    ),
+    ...props
+  }
+);
+var MessageContent = ({
+  children,
+  className,
+  fullWidth,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex min-w-0 flex-col gap-2 overflow-hidden",
+      fullWidth ? "w-full" : "w-fit max-w-full",
+      "group-[.is-user]:ml-auto group-[.is-user]:px-6 group-[.is-user]:py-4 group-[.is-user]:text-foreground group-[.is-user]:rounded-bl-[24px] group-[.is-user]:rounded-br-[24px] group-[.is-user]:rounded-tl-[4px] group-[.is-user]:rounded-tr-[24px] group-[.is-user]:bg-[var(--ac-user-bubble-bg,#f0f4f8)]",
+      "group-[.is-assistant]:text-foreground group-[.is-assistant]:w-full",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var MessageActions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), ...props, children });
+var MessageAction = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+}) => {
+  const button = /* @__PURE__ */ jsxs(Button, { size, type: "button", variant, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label || tooltip })
+  ] });
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+var MessageBranchContext = createContext(
+  null
+);
+var useMessageBranch = () => {
+  const context = useContext(MessageBranchContext);
+  if (!context) {
+    throw new Error(
+      "MessageBranch components must be used within MessageBranch"
+    );
+  }
+  return context;
+};
+var MessageBranch = ({
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  ...props
+}) => {
+  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+  const [branches, setBranches] = useState([]);
+  const handleBranchChange = (newBranch) => {
+    setCurrentBranch(newBranch);
+    onBranchChange?.(newBranch);
+  };
+  const goToPrevious = () => {
+    const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  };
+  const goToNext = () => {
+    const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  };
+  const contextValue = {
+    currentBranch,
+    totalBranches: branches.length,
+    goToPrevious,
+    goToNext,
+    branches,
+    setBranches
+  };
+  return /* @__PURE__ */ jsx(MessageBranchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid w-full gap-2 [&>div]:pb-0", className),
+      ...props
+    }
+  ) });
+};
+var MessageBranchContent = ({
+  children,
+  ...props
+}) => {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = Array.isArray(children) ? children : [children];
+  useEffect(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+  return childrenArray.map((branch, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden"
+      ),
+      ...props,
+      children: branch
+    },
+    branch.key
+  ));
+};
+var MessageBranchSelector = ({
+  className,
+  from,
+  ...props
+}) => {
+  const { totalBranches } = useMessageBranch();
+  if (totalBranches <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ButtonGroup,
+    {
+      className: "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+      orientation: "horizontal",
+      ...props
+    }
+  );
+};
+var MessageBranchPrevious = ({
+  children,
+  ...props
+}) => {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Previous branch",
+      disabled: totalBranches <= 1,
+      onClick: goToPrevious,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 14 })
+    }
+  );
+};
+var MessageBranchNext = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { goToNext, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Next branch",
+      disabled: totalBranches <= 1,
+      onClick: goToNext,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { size: 14 })
+    }
+  );
+};
+var MessageBranchPage = ({
+  className,
+  ...props
+}) => {
+  const { currentBranch, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsxs(
+    ButtonGroupText,
+    {
+      className: cn(
+        "border-none bg-transparent text-muted-foreground shadow-none",
+        className
+      ),
+      ...props,
+      children: [
+        currentBranch + 1,
+        " of ",
+        totalBranches
+      ]
+    }
+  );
+};
+function addUtmParams(url) {
+  try {
+    const urlObj = new URL(url);
+    urlObj.searchParams.set("utm_source", "chat");
+    urlObj.searchParams.set("utm_medium", "referral");
+    return urlObj.toString();
+  } catch {
+    return url;
+  }
+}
+var CustomLink = ({ href, children, ...props }) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    href: href ? addUtmParams(href) : href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "hover:underline hover:opacity-80 transition-opacity font-medium",
+    ...props,
+    children
+  }
+);
+var CustomImage = ({ src, alt, ...props }) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    src,
+    alt: alt || "",
+    loading: "lazy",
+    className: "rounded-xl max-w-full h-auto my-4",
+    ...props
+  }
+);
+var CustomTable = ({ children, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-4 overflow-x-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    className: "w-full text-sm rounded-xl border border-black/[0.08] overflow-hidden",
+    ...props,
+    children
+  }
+) });
+var CustomThead = ({ children, ...props }) => /* @__PURE__ */ jsx("thead", { className: "bg-black/[0.04]", ...props, children });
+var CustomTh = ({ children, ...props }) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    className: "px-4 py-3 text-start text-xs font-medium uppercase tracking-wider opacity-60 border-b border-black/[0.08]",
+    ...props,
+    children
+  }
+);
+var CustomTd = ({ children, ...props }) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    className: "px-4 py-3 border-b border-black/[0.08]",
+    ...props,
+    children
+  }
+);
+var CustomTr = ({ children, ...props }) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    className: "hover:bg-black/[0.02] transition-colors",
+    ...props,
+    children
+  }
+);
+var MessageResponse = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx(
+    Streamdown,
+    {
+      className: cn(
+        "message-response size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        className
+      ),
+      components: {
+        a: CustomLink,
+        img: CustomImage,
+        table: CustomTable,
+        thead: CustomThead,
+        th: CustomTh,
+        td: CustomTd,
+        tr: CustomTr
+      },
+      linkSafety: { enabled: false },
+      ...props
+    }
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);
+MessageResponse.displayName = "MessageResponse";
+function MessageAttachmentLightbox({
+  url,
+  alt,
+  onClose
+}) {
+  const [container, setContainer] = useState(
+    null
+  );
+  const anchorRef = useRef(null);
+  useEffect(() => {
+    const root = anchorRef.current?.getRootNode();
+    if (!root) return;
+    const host = root instanceof ShadowRoot ? root : root.body ?? null;
+    if (!host) return;
+    const node = document.createElement("div");
+    node.setAttribute("data-aigentyc-chat", "");
+    host.appendChild(node);
+    setContainer(node);
+    return () => {
+      node.remove();
+    };
+  }, []);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  const overlay = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": alt,
+      "aria-modal": "true",
+      className: "ac-lightbox",
+      onClick: onClose,
+      role: "dialog",
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483001,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 24,
+        background: "rgba(8, 12, 16, 0.82)",
+        pointerEvents: "auto",
+        cursor: "zoom-out"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt,
+            onClick: (e) => e.stopPropagation(),
+            src: url,
+            style: {
+              maxWidth: "100%",
+              maxHeight: "100%",
+              objectFit: "contain",
+              borderRadius: 12,
+              boxShadow: "0 24px 64px rgba(0, 0, 0, 0.45)",
+              cursor: "default"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Close",
+            onClick: onClose,
+            style: {
+              position: "absolute",
+              top: 16,
+              insetInlineEnd: 16,
+              width: 36,
+              height: 36,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              border: "none",
+              borderRadius: "50%",
+              background: "rgba(255, 255, 255, 0.14)",
+              color: "#fff",
+              cursor: "pointer"
+            },
+            type: "button",
+            children: /* @__PURE__ */ jsx(XIcon, { size: 18 })
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: anchorRef, style: { display: "none" } }),
+    container ? createPortal(overlay, container) : null
+  ] });
+}
+function MessageAttachment({
+  data,
+  className,
+  onRemove,
+  ...props
+}) {
+  const [zoomed, setZoomed] = useState(false);
+  const filename = data.filename || "";
+  const mediaType = data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+  const isImage = mediaType === "image";
+  const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group relative size-24 overflow-hidden rounded-lg",
+        className
+      ),
+      ...props,
+      children: isImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": `View ${attachmentLabel} full size`,
+            className: "block size-full cursor-zoom-in",
+            onClick: () => setZoomed(true),
+            title: "View full size",
+            type: "button",
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                alt: filename || "attachment",
+                className: "size-full object-cover transition-transform duration-200 group-hover:scale-105",
+                height: 100,
+                src: data.url,
+                width: 100
+              }
+            )
+          }
+        ),
+        zoomed && /* @__PURE__ */ jsx(
+          MessageAttachmentLightbox,
+          {
+            alt: attachmentLabel,
+            onClose: () => setZoomed(false),
+            url: data.url
+          }
+        ),
+        onRemove && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-label": "Remove attachment",
+            className: "absolute top-2 right-2 size-6 rounded-full bg-background/80 p-0 opacity-0 backdrop-blur-sm transition-opacity hover:bg-background group-hover:opacity-100 [&>svg]:size-3",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            type: "button",
+            variant: "ghost",
+            children: [
+              /* @__PURE__ */ jsx(XIcon, {}),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Remove" })
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "flex size-full shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-4" }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: attachmentLabel }) })
+        ] }) }),
+        onRemove && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-label": "Remove attachment",
+            className: "size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100 [&>svg]:size-3",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            type: "button",
+            variant: "ghost",
+            children: [
+              /* @__PURE__ */ jsx(XIcon, {}),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Remove" })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function MessageAttachments({
+  children,
+  className,
+  ...props
+}) {
+  const isEmpty = !children || Array.isArray(children) && children.flat().filter(Boolean).length === 0;
+  if (isEmpty) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ml-auto flex w-fit flex-wrap items-start gap-2",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var MessageToolbar = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "mt-4 flex w-full items-center justify-between gap-4",
+      className
+    ),
+    ...props,
+    children
+  }
+);
 var Loader = ({ className, text = "Thinking...", ...props }) => /* @__PURE__ */ jsxs(
   "div",
   {
@@ -523,6 +1093,6 @@ var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 
-export { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, Loader, MessageFeedback, Source, Sources, SourcesContent, SourcesTrigger, SpinnerLoader };
-//# sourceMappingURL=chunk-B27JIQ4Z.js.map
-//# sourceMappingURL=chunk-B27JIQ4Z.js.map
+export { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, Loader, Message, MessageAction, MessageActions, MessageAttachment, MessageAttachments, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageFeedback, MessageResponse, MessageToolbar, Source, Sources, SourcesContent, SourcesTrigger, SpinnerLoader };
+//# sourceMappingURL=chunk-5XF3NEFB.js.map
+//# sourceMappingURL=chunk-5XF3NEFB.js.map