@dilipod/ui 0.4.24 → 0.4.25

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import * as React51 from 'react';
-import { lazy, useMemo, useState, useRef, Suspense } from 'react';
+import { lazy, useMemo, useState, useRef, useCallback, useEffect, Suspense } from 'react';
 import { MarkerType, useNodesState, useEdgesState, ReactFlow, Background, Handle, Position } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -451,6 +451,7 @@ __export(index_exports, {
   Stat: () => Stat,
   StepDots: () => StepDots,
   StepProgress: () => StepProgress,
+  SupportChat: () => SupportChat,
   Switch: () => Switch,
   Table: () => Table,
   TableBody: () => TableBody,
@@ -4867,6 +4868,135 @@ function ActivityTimeline({
     ] })
   ] });
 }
+function formatMessageTime(dateStr) {
+  const d = new Date(dateStr);
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMs / 36e5);
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  return d.toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+}
+function SupportChat({
+  messagesEndpoint,
+  sendEndpoint,
+  currentRole,
+  pollInterval = 5e3,
+  placeholder = "Type a message...",
+  emptyMessage = "No messages yet. Start the conversation!",
+  className = ""
+}) {
+  const [messages, setMessages] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [sending, setSending] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const scrollRef = useRef(null);
+  const prevMessageCountRef = useRef(0);
+  const fetchMessages = useCallback(async () => {
+    try {
+      const res = await fetch(messagesEndpoint);
+      if (!res.ok) return;
+      const data = await res.json();
+      setMessages(data.messages || []);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  }, [messagesEndpoint]);
+  useEffect(() => {
+    fetchMessages();
+    if (pollInterval > 0) {
+      const interval = setInterval(fetchMessages, pollInterval);
+      return () => clearInterval(interval);
+    }
+  }, [fetchMessages, pollInterval]);
+  useEffect(() => {
+    if (messages.length > prevMessageCountRef.current) {
+      scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
+    }
+    prevMessageCountRef.current = messages.length;
+  }, [messages.length]);
+  const handleSend = async () => {
+    const content = inputValue.trim();
+    if (!content || sending) return;
+    setSending(true);
+    setInputValue("");
+    const optimisticMsg = {
+      id: `temp-${Date.now()}`,
+      role: currentRole,
+      content,
+      type: "message",
+      created_at: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    setMessages((prev) => [...prev, optimisticMsg]);
+    try {
+      const res = await fetch(sendEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content })
+      });
+      if (res.ok) {
+        await fetchMessages();
+      } else {
+        setMessages((prev) => prev.filter((m) => m.id !== optimisticMsg.id));
+      }
+    } catch {
+      setMessages((prev) => prev.filter((m) => m.id !== optimisticMsg.id));
+    } finally {
+      setSending(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: `flex items-center justify-center py-8 ${className}`, children: /* @__PURE__ */ jsx(CircleNotch, { className: "w-5 h-5 animate-spin text-muted-foreground" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${className}`, children: [
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto space-y-3 mb-4 max-h-[400px] min-h-[200px] px-1", children: messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-sm text-muted-foreground py-8", children: typeof emptyMessage === "string" ? /* @__PURE__ */ jsx("p", { children: emptyMessage }) : emptyMessage }) : messages.map((msg) => {
+      if (msg.type === "event" || msg.role === "system") {
+        return /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 border border-gray-100 rounded-full px-3 py-1 text-xs text-muted-foreground max-w-[90%] text-center", children: [
+          msg.content,
+          /* @__PURE__ */ jsx("span", { className: "ml-2 opacity-60", children: formatMessageTime(msg.created_at) })
+        ] }) }, msg.id);
+      }
+      const isCurrentUser = msg.role === currentRole;
+      return /* @__PURE__ */ jsx("div", { className: `flex ${isCurrentUser ? "justify-end" : "justify-start"}`, children: /* @__PURE__ */ jsxs("div", { className: `max-w-[80%] rounded-lg px-3 py-2 ${isCurrentUser ? "bg-[var(--cyan)] text-white" : "bg-gray-100 text-[var(--black)]"}`, children: [
+        !isCurrentUser && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium mb-0.5 opacity-70", children: msg.role === "admin" ? "Dilipod Team" : "You" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm whitespace-pre-wrap", children: msg.content }),
+        /* @__PURE__ */ jsx("p", { className: `text-[10px] mt-1 ${isCurrentUser ? "text-white/60" : "text-muted-foreground"}`, children: formatMessageTime(msg.created_at) })
+      ] }) }, msg.id);
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 border-t border-gray-100 pt-3", children: [
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          value: inputValue,
+          onChange: (e) => setInputValue(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder,
+          rows: 1,
+          className: "resize-none min-h-[36px] py-2 flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleSend,
+          disabled: sending || !inputValue.trim(),
+          size: "sm",
+          className: "flex-shrink-0 h-9",
+          children: sending ? /* @__PURE__ */ jsx(CircleNotch, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsx(PaperPlaneTilt, { className: "w-4 h-4", weight: "bold" })
+        }
+      )
+    ] })
+  ] });
+}
 
 // src/index.ts
 init_workflow_flow();
@@ -6610,6 +6740,6 @@ function WorkerSpec({ documentation, className }) {
 // src/index.ts
 __reExport(index_exports, icons_exports);
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityTimeline, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, BreadcrumbLink, Breadcrumbs, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, ConfirmDialog, DateRangePicker, DateRangeSelect, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, FilePreview, FlowchartDiagram, FormField, IconBox, ImpactMetricsForm, Input, Label2 as Label, LabeledSlider, LabeledSwitch, Logo, Metric, MetricCard, MetricLabel, MetricSubtext, MetricValue, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupCard, RadioGroupItem, RadioGroupOption, ScenariosManager, Select, Separator2 as Separator, SettingsNav, SettingsNavLink, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SimplePagination, SimpleTooltip, Skeleton, SkeletonCard, SkeletonText, Slider, Stat, StepDots, StepProgress, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsListUnderline, TabsTrigger, TabsTriggerUnderline, Tag, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastIcon, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, UsageBar, UsageChart, WorkerSpec, WorkflowFlow, WorkflowViewer, alertVariants, badgeVariants, buttonVariants, cn, getDateRangeFromPreset, iconBoxVariants, metricCardVariants, navigationMenuTriggerStyle, progressVariants, statVariants, tagVariants, toast, usageBarVariants, useToast, valueVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityTimeline, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, BreadcrumbLink, Breadcrumbs, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, ConfirmDialog, DateRangePicker, DateRangeSelect, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, FilePreview, FlowchartDiagram, FormField, IconBox, ImpactMetricsForm, Input, Label2 as Label, LabeledSlider, LabeledSwitch, Logo, Metric, MetricCard, MetricLabel, MetricSubtext, MetricValue, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupCard, RadioGroupItem, RadioGroupOption, ScenariosManager, Select, Separator2 as Separator, SettingsNav, SettingsNavLink, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SimplePagination, SimpleTooltip, Skeleton, SkeletonCard, SkeletonText, Slider, Stat, StepDots, StepProgress, SupportChat, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsListUnderline, TabsTrigger, TabsTriggerUnderline, Tag, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastIcon, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, UsageBar, UsageChart, WorkerSpec, WorkflowFlow, WorkflowViewer, alertVariants, badgeVariants, buttonVariants, cn, getDateRangeFromPreset, iconBoxVariants, metricCardVariants, navigationMenuTriggerStyle, progressVariants, statVariants, tagVariants, toast, usageBarVariants, useToast, valueVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map