@dmanikanta17/chat-ui-react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1042 @@
+// src/ChatUI.tsx
+import { useState as useState3, useEffect as useEffect2 } from "react";
+import { Send, Sparkles, Loader2, User, RefreshCcw, X as X2 } from "lucide-react";
+
+// src/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/button.tsx
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer 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 hover:bg-primary/90",
+        destructive: "bg-destructive text-white 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 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",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/avatar.tsx
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Avatar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      className: cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    AvatarPrimitive.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/message-loading.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function MessageLoading() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "text-foreground",
+      children: [
+        /* @__PURE__ */ jsx3("circle", { cx: "4", cy: "12", r: "2", fill: "currentColor", children: /* @__PURE__ */ jsx3(
+          "animate",
+          {
+            id: "spinner_qFRN",
+            begin: "0;spinner_OcgL.end+0.25s",
+            attributeName: "cy",
+            calcMode: "spline",
+            dur: "0.6s",
+            values: "12;6;12",
+            keySplines: ".33,.66,.66,1;.33,0,.66,.33"
+          }
+        ) }),
+        /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor", children: /* @__PURE__ */ jsx3(
+          "animate",
+          {
+            begin: "spinner_qFRN.begin+0.1s",
+            attributeName: "cy",
+            calcMode: "spline",
+            dur: "0.6s",
+            values: "12;6;12",
+            keySplines: ".33,.66,.66,1;.33,0,.66,.33"
+          }
+        ) }),
+        /* @__PURE__ */ jsx3("circle", { cx: "20", cy: "12", r: "2", fill: "currentColor", children: /* @__PURE__ */ jsx3(
+          "animate",
+          {
+            id: "spinner_OcgL",
+            begin: "spinner_qFRN.begin+0.2s",
+            attributeName: "cy",
+            calcMode: "spline",
+            dur: "0.6s",
+            values: "12;6;12",
+            keySplines: ".33,.66,.66,1;.33,0,.66,.33"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/ui/chat-bubble.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChatBubble({
+  variant = "received",
+  layout = "default",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn(
+        "flex items-start gap-2 mb-4",
+        variant === "sent" && "flex-row-reverse",
+        className
+      ),
+      children
+    }
+  );
+}
+function ChatBubbleMessage({
+  variant = "received",
+  isLoading,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn(
+        "rounded-[1.25rem] px-4 py-2 text-sm max-w-[85%]",
+        variant === "sent" ? "bg-primary text-primary-foreground" : "bg-muted",
+        className
+      ),
+      children: isLoading ? /* @__PURE__ */ jsx4("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsx4(MessageLoading, {}) }) : children
+    }
+  );
+}
+function ChatBubbleAvatar({
+  src,
+  fallback = "AI",
+  className
+}) {
+  return /* @__PURE__ */ jsxs2(Avatar, { className: cn("h-8 w-8", className), children: [
+    src && /* @__PURE__ */ jsx4(AvatarImage, { src }),
+    /* @__PURE__ */ jsx4(AvatarFallback, { children: fallback })
+  ] });
+}
+
+// src/components/ui/chat-input.tsx
+import * as React from "react";
+
+// src/components/ui/textarea.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/chat-input.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ChatInput = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+    Textarea,
+    {
+      autoComplete: "off",
+      ref,
+      name: "message",
+      className: cn(
+        "max-h-12 px-4 py-3 bg-background text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 w-full rounded-md flex items-center h-16 resize-none",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ChatInput.displayName = "ChatInput";
+
+// src/components/ui/expandable-chat.tsx
+import { useRef, useState } from "react";
+import { X, MessageCircle } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var chatConfig = {
+  dimensions: {
+    sm: "sm:max-w-sm sm:max-h-[500px]",
+    md: "sm:max-w-md sm:max-h-[600px]",
+    lg: "sm:max-w-lg sm:max-h-[700px]",
+    xl: "sm:max-w-xl sm:max-h-[800px]",
+    full: "sm:w-full sm:h-full"
+  },
+  positions: {
+    "bottom-right": "bottom-5 right-5",
+    "bottom-left": "bottom-5 left-5"
+  },
+  chatPositions: {
+    "bottom-right": "sm:bottom-[calc(100%+10px)] sm:right-0",
+    "bottom-left": "sm:bottom-[calc(100%+10px)] sm:left-0"
+  },
+  states: {
+    open: "pointer-events-auto opacity-100 visible scale-100 translate-y-0",
+    closed: "pointer-events-none opacity-0 invisible scale-100 sm:translate-y-5"
+  }
+};
+var ExpandableChat = ({
+  className,
+  position = "bottom-right",
+  size = "md",
+  icon,
+  children,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  ...props
+}) => {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isControlled = controlledIsOpen !== void 0;
+  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+  const chatRef = useRef(null);
+  const toggleChat = () => {
+    const newState = !isOpen;
+    if (isControlled && onOpenChange) {
+      onOpenChange(newState);
+    } else {
+      setInternalIsOpen(newState);
+    }
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(`fixed ${chatConfig.positions[position]} z-50`, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            ref: chatRef,
+            className: cn(
+              "flex flex-col bg-background dark:bg-zinc-900 sm:rounded-lg shadow-md overflow-hidden transition-all duration-250 ease-out sm:absolute sm:w-[90vw] sm:h-[80vh] fixed inset-0 w-full h-full sm:inset-auto",
+              chatConfig.chatPositions[position],
+              chatConfig.dimensions[size],
+              isOpen ? chatConfig.states.open : chatConfig.states.closed,
+              className
+            ),
+            children: [
+              children,
+              /* @__PURE__ */ jsx7(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "absolute top-2 right-2 sm:hidden",
+                  onClick: toggleChat,
+                  children: /* @__PURE__ */ jsx7(X, { className: "h-4 w-4" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          ExpandableChatToggle,
+          {
+            icon,
+            isOpen,
+            toggleChat
+          }
+        )
+      ]
+    }
+  );
+};
+ExpandableChat.displayName = "ExpandableChat";
+var ExpandableChatHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx7(
+  "div",
+  {
+    className: cn("flex items-center justify-between p-4 border-b", className),
+    ...props
+  }
+);
+ExpandableChatHeader.displayName = "ExpandableChatHeader";
+var ExpandableChatBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx7("div", { className: cn("flex-grow overflow-y-auto", className), ...props });
+ExpandableChatBody.displayName = "ExpandableChatBody";
+var ExpandableChatFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx7("div", { className: cn("border-t p-4", className), ...props });
+ExpandableChatFooter.displayName = "ExpandableChatFooter";
+var ExpandableChatToggle = ({
+  className,
+  icon,
+  isOpen,
+  toggleChat,
+  ...props
+}) => /* @__PURE__ */ jsx7(
+  Button,
+  {
+    variant: "default",
+    onClick: toggleChat,
+    className: cn(
+      "w-16 h-16 rounded-full shadow-md flex items-center justify-center hover:shadow-lg hover:shadow-black/30 transition-all duration-300 p-0 ring-0",
+      !isOpen ? "!bg-transparent !border-0" : "",
+      className
+    ),
+    ...props,
+    children: isOpen ? /* @__PURE__ */ jsx7(X, { className: "h-6 w-6" }) : icon || /* @__PURE__ */ jsx7(MessageCircle, { className: "h-6 w-6" })
+  }
+);
+ExpandableChatToggle.displayName = "ExpandableChatToggle";
+
+// src/components/ui/chat-message-list.tsx
+import * as React3 from "react";
+import { ArrowDown } from "lucide-react";
+
+// src/components/hooks/use-auto-scroll.ts
+import { useCallback, useEffect, useRef as useRef2, useState as useState2 } from "react";
+function useAutoScroll(options = {}) {
+  const { offset = 20, smooth = false, content } = options;
+  const scrollRef = useRef2(null);
+  const lastContentHeight = useRef2(0);
+  const userHasScrolled = useRef2(false);
+  const [scrollState, setScrollState] = useState2({
+    isAtBottom: true,
+    autoScrollEnabled: true
+  });
+  const checkIsAtBottom = useCallback(
+    (element) => {
+      const { scrollTop, scrollHeight, clientHeight } = element;
+      const distanceToBottom = Math.abs(
+        scrollHeight - scrollTop - clientHeight
+      );
+      return distanceToBottom <= offset;
+    },
+    [offset]
+  );
+  const scrollToBottom = useCallback(
+    (instant) => {
+      if (!scrollRef.current) return;
+      const targetScrollTop = scrollRef.current.scrollHeight - scrollRef.current.clientHeight;
+      if (instant) {
+        scrollRef.current.scrollTop = targetScrollTop;
+      } else {
+        scrollRef.current.scrollTo({
+          top: targetScrollTop,
+          behavior: smooth ? "smooth" : "auto"
+        });
+      }
+      setScrollState({
+        isAtBottom: true,
+        autoScrollEnabled: true
+      });
+      userHasScrolled.current = false;
+    },
+    [smooth]
+  );
+  const handleScroll = useCallback(() => {
+    if (!scrollRef.current) return;
+    const atBottom = checkIsAtBottom(scrollRef.current);
+    setScrollState((prev) => ({
+      isAtBottom: atBottom,
+      // Re-enable auto-scroll if at the bottom
+      autoScrollEnabled: atBottom ? true : prev.autoScrollEnabled
+    }));
+  }, [checkIsAtBottom]);
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    element.addEventListener("scroll", handleScroll, { passive: true });
+    return () => element.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) return;
+    const currentHeight = scrollElement.scrollHeight;
+    const hasNewContent = currentHeight !== lastContentHeight.current;
+    if (hasNewContent) {
+      if (scrollState.autoScrollEnabled) {
+        requestAnimationFrame(() => {
+          scrollToBottom(lastContentHeight.current === 0);
+        });
+      }
+      lastContentHeight.current = currentHeight;
+    }
+  }, [content, scrollState.autoScrollEnabled, scrollToBottom]);
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const resizeObserver = new ResizeObserver(() => {
+      if (scrollState.autoScrollEnabled) {
+        scrollToBottom(true);
+      }
+    });
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
+  }, [scrollState.autoScrollEnabled, scrollToBottom]);
+  const disableAutoScroll = useCallback(() => {
+    const atBottom = scrollRef.current ? checkIsAtBottom(scrollRef.current) : false;
+    if (!atBottom) {
+      userHasScrolled.current = true;
+      setScrollState((prev) => ({
+        ...prev,
+        autoScrollEnabled: false
+      }));
+    }
+  }, [checkIsAtBottom]);
+  return {
+    scrollRef,
+    isAtBottom: scrollState.isAtBottom,
+    autoScrollEnabled: scrollState.autoScrollEnabled,
+    scrollToBottom: () => scrollToBottom(false),
+    disableAutoScroll
+  };
+}
+
+// src/components/ui/chat-message-list.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChatMessageList = React3.forwardRef(
+  ({ className, children, smooth = false, ...props }, _ref) => {
+    const {
+      scrollRef,
+      isAtBottom,
+      autoScrollEnabled,
+      scrollToBottom,
+      disableAutoScroll
+    } = useAutoScroll({
+      smooth,
+      content: children
+    });
+    return /* @__PURE__ */ jsxs4("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ jsx8(
+        "div",
+        {
+          className: `flex flex-col w-full h-full p-4 overflow-y-auto ${className}`,
+          ref: scrollRef,
+          onWheel: disableAutoScroll,
+          onTouchMove: disableAutoScroll,
+          ...props,
+          children: /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-6", children })
+        }
+      ),
+      !isAtBottom && /* @__PURE__ */ jsx8(
+        Button,
+        {
+          onClick: () => {
+            scrollToBottom();
+          },
+          size: "icon",
+          variant: "outline",
+          className: "absolute bottom-2 left-1/2 transform -translate-x-1/2 inline-flex rounded-full shadow-md",
+          "aria-label": "Scroll to bottom",
+          children: /* @__PURE__ */ jsx8(ArrowDown, { className: "h-4 w-4" })
+        }
+      )
+    ] });
+  }
+);
+ChatMessageList.displayName = "ChatMessageList";
+
+// src/components/ui/shining-text.tsx
+import { motion } from "framer-motion";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function ShiningText({ text }) {
+  return /* @__PURE__ */ jsx9(
+    motion.div,
+    {
+      className: "bg-[linear-gradient(110deg,#9ca3af,35%,#fff,50%,#9ca3af,75%,#9ca3af)] bg-[length:200%_100%] bg-clip-text text-sm text-transparent m-0 inline-block",
+      initial: { backgroundPosition: "200% 0" },
+      animate: { backgroundPosition: "-200% 0" },
+      transition: {
+        repeat: Infinity,
+        duration: 2,
+        ease: "linear"
+      },
+      children: text
+    }
+  );
+}
+
+// src/components/ui/moving-border.tsx
+import {
+  motion as motion2,
+  useAnimationFrame,
+  useMotionTemplate,
+  useMotionValue,
+  useTransform
+} from "framer-motion";
+import { useRef as useRef3 } from "react";
+import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function Button2({
+  borderRadius = "1.75rem",
+  children,
+  as: Component = "button",
+  containerClassName,
+  borderClassName,
+  duration,
+  className,
+  ...otherProps
+}) {
+  return /* @__PURE__ */ jsxs5(
+    Component,
+    {
+      className: cn(
+        "bg-transparent relative text-xl  h-16 w-40 p-[1px] overflow-hidden ",
+        containerClassName
+      ),
+      style: {
+        borderRadius
+      },
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: { borderRadius: `calc(${borderRadius} * 0.96)` },
+            children: /* @__PURE__ */ jsx10(MovingBorder, { duration, rx: "30%", ry: "30%", children: /* @__PURE__ */ jsx10(
+              "div",
+              {
+                className: cn(
+                  "h-20 w-20 opacity-[0.8] bg-[radial-gradient(#0ea5e9_40%,transparent_60%)]",
+                  borderClassName
+                )
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: cn(
+              "relative bg-background border border-border backdrop-blur-xl text-foreground flex items-center justify-center w-full h-full text-sm antialiased",
+              className
+            ),
+            style: {
+              borderRadius: `calc(${borderRadius} * 0.96)`
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+var MovingBorder = ({
+  children,
+  duration = 2e3,
+  rx,
+  ry,
+  ...otherProps
+}) => {
+  const pathRef = useRef3(null);
+  const progress = useMotionValue(0);
+  useAnimationFrame((time) => {
+    const length = pathRef.current?.getTotalLength();
+    if (length) {
+      const pxPerMillisecond = length / duration;
+      progress.set(time * pxPerMillisecond % length);
+    }
+  });
+  const x = useTransform(
+    progress,
+    (val) => pathRef.current?.getPointAtLength(val).x
+  );
+  const y = useTransform(
+    progress,
+    (val) => pathRef.current?.getPointAtLength(val).y
+  );
+  const transform = useMotionTemplate`translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%)`;
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx10(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        preserveAspectRatio: "none",
+        className: "absolute h-full w-full",
+        width: "100%",
+        height: "100%",
+        ...otherProps,
+        children: /* @__PURE__ */ jsx10(
+          "rect",
+          {
+            fill: "none",
+            width: "100%",
+            height: "100%",
+            rx,
+            ry,
+            ref: pathRef
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      motion2.div,
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          display: "inline-block",
+          transform
+        },
+        children
+      }
+    )
+  ] });
+};
+
+// src/ChatUI.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function ChatUI({
+  endpoint,
+  logoSrc = "/bot_logo.jpg",
+  soundSrc = "/sound.mp3",
+  title = "AI Assistant",
+  welcomeMessage = "Welcome to Services! \u{1F44B}",
+  description = "I'm here to help you navigate our services. Feel free to ask me anything!"
+}) {
+  const [messages, setMessages] = useState3([]);
+  const [input, setInput] = useState3("");
+  const [isLoading, setIsLoading] = useState3(false);
+  const [isInitialized, setIsInitialized] = useState3(false);
+  useEffect2(() => {
+    const savedMessages = localStorage.getItem("chat-history");
+    if (savedMessages) {
+      try {
+        setMessages(JSON.parse(savedMessages));
+      } catch (e) {
+        console.error("Failed to parse chat history", e);
+      }
+    }
+    setIsInitialized(true);
+  }, []);
+  const [isChatOpen, setIsChatOpen] = useState3(false);
+  const [showNotification, setShowNotification] = useState3(false);
+  const [isDismissed, setIsDismissed] = useState3(false);
+  useEffect2(() => {
+    const timer = setTimeout(() => {
+      if (!isDismissed && !isChatOpen) {
+        setShowNotification(true);
+        const audio = new Audio(soundSrc);
+        audio.play().catch((error) => {
+          if (error.name !== "NotAllowedError") {
+            console.error("Error playing notification sound:", error);
+          }
+        });
+      }
+    }, 2e3);
+    return () => clearTimeout(timer);
+  }, [isChatOpen, isDismissed, soundSrc]);
+  useEffect2(() => {
+    if (isChatOpen) {
+      setShowNotification(false);
+      setIsDismissed(true);
+    }
+  }, [isChatOpen]);
+  const handleDismissNotification = () => {
+    setShowNotification(false);
+    setIsDismissed(true);
+  };
+  useEffect2(() => {
+    if (isInitialized) {
+      localStorage.setItem("chat-history", JSON.stringify(messages));
+    }
+  }, [messages, isInitialized]);
+  const handleReset = () => {
+    setMessages([]);
+    localStorage.removeItem("chat-history");
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!input.trim() || isLoading) return;
+    const userQuestion = input.trim();
+    const userMessage = {
+      id: Date.now().toString(),
+      role: "user",
+      content: userQuestion
+    };
+    const history = messages.map((msg) => ({
+      role: msg.role,
+      content: msg.content
+    }));
+    setMessages((prev) => [...prev, userMessage]);
+    setInput("");
+    setIsLoading(true);
+    try {
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          query: userQuestion,
+          history,
+          stream: true
+        })
+      });
+      if (!response.body) {
+        throw new Error("ReadableStream not supported.");
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let aiResponse = "";
+      let isFirstChunk = true;
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        const chunk = decoder.decode(value, { stream: true });
+        aiResponse += chunk;
+        if (isFirstChunk) {
+          isFirstChunk = false;
+          setIsLoading(false);
+          const botMessageId = (Date.now() + 1).toString();
+          const botMessage = {
+            id: botMessageId,
+            role: "assistant",
+            content: aiResponse
+          };
+          setMessages((prev) => [...prev, botMessage]);
+        } else {
+          setMessages((prev) => {
+            const updated = [...prev];
+            const lastMsgIndex = updated.length - 1;
+            if (lastMsgIndex >= 0 && updated[lastMsgIndex].role === "assistant") {
+              updated[lastMsgIndex] = {
+                ...updated[lastMsgIndex],
+                content: aiResponse
+              };
+            }
+            return updated;
+          });
+        }
+      }
+      const audio = new Audio(soundSrc);
+      audio.play().catch((e2) => console.error("Error playing notification sound:", e2));
+    } catch (error) {
+      console.error("Chat error:", error);
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: (Date.now() + 2).toString(),
+          role: "assistant",
+          content: "I apologize, but I encountered an error. Please try again later."
+        }
+      ]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    showNotification && !isChatOpen && /* @__PURE__ */ jsx11("div", { className: "fixed bottom-24 right-4 sm:right-5 z-50 animate-in fade-in slide-in-from-bottom-5 duration-300", children: /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs6(
+        Button2,
+        {
+          as: "div",
+          borderRadius: "0.75rem",
+          duration: 3e3,
+          containerClassName: "w-72 sm:w-80 h-auto overflow-hidden rounded-xl bg-transparent",
+          borderClassName: "bg-[radial-gradient(#0ea5e9_40%,transparent_60%)]",
+          className: "bg-background dark:bg-zinc-900 border dark:border-zinc-800 p-5 items-start justify-start flex-col w-full h-full text-foreground shadow-lg",
+          children: [
+            /* @__PURE__ */ jsxs6(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "absolute top-3 right-3 h-6 w-6 text-muted-foreground hover:text-foreground z-10",
+                onClick: handleDismissNotification,
+                children: [
+                  /* @__PURE__ */ jsx11(X2, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx11("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-3 mb-4 w-full", children: [
+              /* @__PURE__ */ jsx11("div", { className: "relative h-10 w-10 shrink-0 overflow-hidden rounded-full ring-2 ring-background dark:ring-zinc-800", children: /* @__PURE__ */ jsx11("img", { src: logoSrc, alt: "AI", className: "object-cover h-full w-full" }) }),
+              /* @__PURE__ */ jsxs6("div", { className: "flex flex-col pt-0.5", children: [
+                /* @__PURE__ */ jsx11("h3", { className: "font-bold text-sm leading-tight text-foreground", children: title }),
+                /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5 mt-0.5", children: [
+                  /* @__PURE__ */ jsxs6("span", { className: "relative flex h-2 w-2", children: [
+                    /* @__PURE__ */ jsx11("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
+                    /* @__PURE__ */ jsx11("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
+                  ] }),
+                  /* @__PURE__ */ jsx11("span", { className: "text-xs text-muted-foreground font-medium", children: "Online" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { className: "w-full text-left", children: [
+              /* @__PURE__ */ jsx11("p", { className: "text-sm font-medium text-foreground leading-snug", children: welcomeMessage }),
+              /* @__PURE__ */ jsx11("p", { className: "text-sm text-muted-foreground leading-relaxed mt-2", children: description }),
+              /* @__PURE__ */ jsx11(
+                Button,
+                {
+                  className: "w-full mt-4 h-10 rounded-lg bg-[#535bf2] hover:bg-[#464ec9] text-white shadow-sm transition-all duration-200 font-medium",
+                  onClick: () => setIsChatOpen(true),
+                  children: "Start chatting"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx11("div", { className: "absolute -bottom-2 right-6 w-4 h-4 bg-background dark:bg-zinc-900 border-b border-r dark:border-zinc-800 transform rotate-45 z-0" })
+    ] }) }),
+    /* @__PURE__ */ jsxs6(
+      ExpandableChat,
+      {
+        size: "lg",
+        position: "bottom-right",
+        isOpen: isChatOpen,
+        onOpenChange: setIsChatOpen,
+        icon: /* @__PURE__ */ jsx11("div", { className: "relative h-full w-full overflow-hidden rounded-full", children: /* @__PURE__ */ jsx11("img", { src: logoSrc, alt: "AI", className: "object-cover h-full w-full" }) }),
+        className: "z-50",
+        children: [
+          /* @__PURE__ */ jsxs6(ExpandableChatHeader, { className: "bg-muted/40 flex-col text-center justify-center border-b p-4 relative", children: [
+            /* @__PURE__ */ jsxs6("h1", { className: "text-xl font-semibold flex items-center justify-center gap-2", children: [
+              title,
+              /* @__PURE__ */ jsx11(Sparkles, { className: "h-4 w-4 text-yellow-500 fill-yellow-500" })
+            ] }),
+            /* @__PURE__ */ jsxs6("p", { className: "text-sm text-muted-foreground flex items-center justify-center gap-1.5 pt-1", children: [
+              /* @__PURE__ */ jsx11("span", { className: "flex h-2 w-2 rounded-full bg-green-500 animate-pulse" }),
+              "Online and ready to help"
+            ] }),
+            /* @__PURE__ */ jsx11(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "absolute top-3 left-3 h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-muted/50 sm:top-5 sm:right-5 sm:left-auto",
+                onClick: handleReset,
+                title: "Reset Chat",
+                children: /* @__PURE__ */ jsx11(RefreshCcw, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx11(ExpandableChatBody, { className: "bg-background/50", children: messages.length === 0 ? /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center justify-center h-full p-6 text-center animate-in fade-in duration-500", children: [
+            /* @__PURE__ */ jsx11("div", { className: "bg-background rounded-full p-4 mb-6 shadow-md ring-1 ring-border/50", children: /* @__PURE__ */ jsx11("div", { className: "relative w-16 h-16 overflow-hidden rounded-full", children: /* @__PURE__ */ jsx11("img", { src: logoSrc, alt: "AI Logo", className: "object-cover w-full h-full" }) }) }),
+            /* @__PURE__ */ jsx11("h2", { className: "text-2xl font-bold mb-2 tracking-tight", children: title }),
+            /* @__PURE__ */ jsxs6("p", { className: "text-muted-foreground text-sm", children: [
+              "Welcome to ",
+              title,
+              " \u{1F49B}"
+            ] })
+          ] }) : /* @__PURE__ */ jsxs6(ChatMessageList, { children: [
+            messages.map((message) => /* @__PURE__ */ jsxs6(
+              ChatBubble,
+              {
+                variant: message.role === "user" ? "sent" : "received",
+                children: [
+                  /* @__PURE__ */ jsx11(
+                    ChatBubbleAvatar,
+                    {
+                      className: "h-8 w-8 shrink-0",
+                      src: message.role === "user" ? void 0 : logoSrc,
+                      fallback: message.role === "user" ? /* @__PURE__ */ jsx11(User, { className: "h-4 w-4" }) : "AI"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx11(
+                    ChatBubbleMessage,
+                    {
+                      variant: message.role === "user" ? "sent" : "received",
+                      children: message.role === "user" ? message.content : /* @__PURE__ */ jsx11("div", { className: cn(
+                        "prose dark:prose-invert text-sm break-words leading-normal max-w-none",
+                        "prose-p:m-0 prose-ul:m-0 prose-ol:m-0 prose-li:m-0"
+                      ), children: /* @__PURE__ */ jsx11(
+                        ReactMarkdown,
+                        {
+                          remarkPlugins: [remarkGfm],
+                          components: {
+                            ul: ({ node, ...props }) => /* @__PURE__ */ jsx11("ul", { className: "list-disc pl-4 my-1", ...props }),
+                            ol: ({ node, ...props }) => /* @__PURE__ */ jsx11("ol", { className: "list-decimal pl-4 my-1", ...props }),
+                            li: ({ node, ...props }) => /* @__PURE__ */ jsx11("li", { className: "my-0.5 pl-1", ...props }),
+                            p: ({ node, ...props }) => /* @__PURE__ */ jsx11("p", { className: "mb-2 last:mb-0", ...props }),
+                            strong: ({ node, ...props }) => /* @__PURE__ */ jsx11("span", { className: "font-bold text-foreground", ...props }),
+                            a: ({ node, href, children, ...props }) => /* @__PURE__ */ jsx11(
+                              "a",
+                              {
+                                href,
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                className: "font-semibold text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 hover:underline transition-colors break-all",
+                                ...props,
+                                children
+                              }
+                            )
+                          },
+                          children: message.content
+                        }
+                      ) })
+                    }
+                  )
+                ]
+              },
+              message.id
+            )),
+            isLoading && /* @__PURE__ */ jsxs6(ChatBubble, { variant: "received", children: [
+              /* @__PURE__ */ jsx11(
+                ChatBubbleAvatar,
+                {
+                  className: "h-8 w-8 shrink-0",
+                  src: logoSrc,
+                  fallback: "AI"
+                }
+              ),
+              /* @__PURE__ */ jsxs6(ChatBubbleMessage, { className: "bg-transparent p-0 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx11(Sparkles, { className: "h-4 w-4 text-foreground/50" }),
+                /* @__PURE__ */ jsx11(ShiningText, { text: "AI Assistant thinking..." })
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs6(ExpandableChatFooter, { className: "bg-muted/40 p-3", children: [
+            /* @__PURE__ */ jsxs6(
+              "form",
+              {
+                onSubmit: handleSubmit,
+                className: "relative rounded-3xl border bg-background focus-within:ring-1 focus-within:ring-ring p-1 shadow-sm",
+                children: [
+                  /* @__PURE__ */ jsx11(
+                    ChatInput,
+                    {
+                      value: input,
+                      onChange: (e) => setInput(e.target.value),
+                      placeholder: "Message...",
+                      rows: 1,
+                      className: "min-h-0 h-auto max-h-32 resize-none rounded-2xl bg-background border-0 px-3 py-2.5 shadow-none focus-visible:ring-0 text-base sm:text-sm",
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" && !e.shiftKey) {
+                          e.preventDefault();
+                          handleSubmit(e);
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-2 pb-1", children: [
+                    /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-2" }),
+                    /* @__PURE__ */ jsxs6(
+                      Button,
+                      {
+                        type: "submit",
+                        size: "icon",
+                        className: "h-8 w-8 rounded-full transition-all duration-200",
+                        disabled: !input.trim() || isLoading,
+                        children: [
+                          isLoading ? /* @__PURE__ */ jsx11(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx11(Send, { className: "h-4 w-4" }),
+                          /* @__PURE__ */ jsx11("span", { className: "sr-only", children: "Send" })
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx11("div", { className: "mt-2 text-center flex flex-col items-center justify-center gap-0.5", children: /* @__PURE__ */ jsxs6("span", { className: "text-[10px] text-muted-foreground/60", children: [
+              "Powered by ",
+              /* @__PURE__ */ jsx11("a", { href: "#", className: "hover:underline hover:text-primary transition-colors", children: "ChatUI" })
+            ] }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ChatUI
+};
+//# sourceMappingURL=index.mjs.map