@algenium/blocks 1.1.2 → 1.2.0-rc.2

package/dist/index.js

@@ -1,7 +1,7 @@
 import * as React2 from 'react';
-import { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
+import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { useTheme } from 'next-themes';
-import { CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Languages, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, X, XIcon, User, Pencil, Check, Loader2, Bell, CheckCheck, XCircle, AlertTriangle, CheckCircle, Info, Trash2 } from 'lucide-react';
+import { CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Languages, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, X, XIcon, User, Pencil, Check, Loader2, Bell, CheckCheck, XCircle, AlertTriangle, CheckCircle, Info, Trash2, Clock, MapPin, Link, CalendarDays, ExternalLink, ChevronLeft, ChevronRight, Plus, HelpCircle, MessageSquare, Wifi, WifiOff, FileIcon, Download, Paperclip, Send, ArrowLeft } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -13,7 +13,25 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { startOfMonth, endOfMonth, eachDayOfInterval, endOfWeek, startOfWeek, format, isSameDay, subMonths, addMonths } from 'date-fns';
+import { DayPicker } from 'react-day-picker';
 
+var CalendarContext = createContext(null);
+function useCalendarContext() {
+  return useContext(CalendarContext);
+}
+var ChatSidebarContext = createContext(
+  null
+);
+function useChatSidebar() {
+  const ctx = useContext(ChatSidebarContext);
+  if (!ctx) {
+    throw new Error("useChatSidebar must be used within a ChatSidebarProvider");
+  }
+  return ctx;
+}
+
+// src/contexts/index.ts
 var NotificationsContext = createContext(null);
 function useNotificationsContext() {
   return useContext(NotificationsContext);
@@ -5380,7 +5398,1550 @@ function ScrollBar({
     }
   );
 }
+function UpcomingEvents({
+  events,
+  maxVisible = 5,
+  onEventClick,
+  className
+}) {
+  const visible = events.slice(0, maxVisible);
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-1", className), children: visible.map((event) => {
+    const start = new Date(event.dtstart);
+    const end = new Date(event.dtend);
+    const isToday = start.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+    const dateStr = isToday ? "Today" : start.toLocaleDateString([], {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    });
+    const timeStr = event.allDay ? "All day" : `${start.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} \u2013 ${end.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onEventClick?.(event),
+        className: "flex w-full items-start gap-3 rounded-md px-2 py-2 text-left transition-colors hover:bg-accent",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-xs font-medium",
+                isToday ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+              ),
+              children: start.getDate()
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: event.summary }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+              dateStr,
+              " \xB7 ",
+              timeStr
+            ] }) }),
+            event.location && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground mt-0.5", children: [
+              /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: event.location })
+            ] })
+          ] })
+        ]
+      },
+      event.id
+    );
+  }) });
+}
+function CalendarSubscribeButton({
+  feedUrl,
+  label
+}) {
+  const [copied, setCopied] = useState(false);
+  const webcalUrl = feedUrl.replace(/^https?:\/\//, "webcal://");
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(webcalUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      window.open(webcalUrl, "_blank");
+    }
+  };
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "text-xs",
+        onClick: handleCopy,
+        children: [
+          copied ? /* @__PURE__ */ jsx(Check, { className: "mr-1 h-3 w-3" }) : /* @__PURE__ */ jsx(Link, { className: "mr-1 h-3 w-3" }),
+          label ?? (copied ? "Copied!" : "Subscribe")
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: "Copy webcal URL to subscribe in your calendar app" })
+  ] }) });
+}
+function CalendarWidget({
+  calendarUrl,
+  labels = {},
+  onEventClick,
+  className
+}) {
+  const calCtx = useCalendarContext();
+  const upcomingEvents = (calCtx?.events ?? []).filter((e) => new Date(e.dtstart) >= /* @__PURE__ */ new Date()).sort(
+    (a, b) => new Date(a.dtstart).getTime() - new Date(b.dtstart).getTime()
+  ).slice(0, 5);
+  const hasUpcoming = upcomingEvents.length > 0;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn("relative h-9 w-9", className),
+        "aria-label": labels.title ?? "Calendar",
+        children: [
+          /* @__PURE__ */ jsx(CalendarDays, { className: "h-4 w-4" }),
+          hasUpcoming && /* @__PURE__ */ jsx("span", { className: "absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-primary" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-80 p-0", align: "end", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-3", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: labels.title ?? "Calendar" }) }),
+      /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[320px]", children: calCtx?.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) }) : upcomingEvents.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-center px-4", children: [
+        /* @__PURE__ */ jsx(CalendarDays, { className: "mb-2 h-8 w-8 text-muted-foreground/50" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: labels.noEvents ?? "No upcoming events" })
+      ] }) : /* @__PURE__ */ jsx(
+        UpcomingEvents,
+        {
+          events: upcomingEvents,
+          onEventClick,
+          className: "p-2"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t px-3 py-2", children: [
+        calendarUrl && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "text-xs", asChild: true, children: /* @__PURE__ */ jsxs("a", { href: calendarUrl, children: [
+          labels.viewCalendar ?? "View full calendar",
+          /* @__PURE__ */ jsx(ExternalLink, { className: "ml-1 h-3 w-3" })
+        ] }) }),
+        calCtx?.feedUrl && /* @__PURE__ */ jsx(CalendarSubscribeButton, { feedUrl: calCtx.feedUrl })
+      ] })
+    ] })
+  ] });
+}
+function CalendarView({
+  events,
+  isLoading,
+  onEventClick,
+  onDateSelect,
+  onCreateEvent,
+  labels = {},
+  className
+}) {
+  const [viewMode, setViewMode] = useState("month");
+  const [currentDate, setCurrentDate] = useState(/* @__PURE__ */ new Date());
+  const [selectedDate, setSelectedDate] = useState();
+  const navigateBack = () => {
+    if (viewMode === "month") {
+      setCurrentDate((d) => subMonths(d, 1));
+    } else if (viewMode === "week") {
+      setCurrentDate((d) => new Date(d.getTime() - 7 * 864e5));
+    } else {
+      setCurrentDate((d) => new Date(d.getTime() - 864e5));
+    }
+  };
+  const navigateForward = () => {
+    if (viewMode === "month") {
+      setCurrentDate((d) => addMonths(d, 1));
+    } else if (viewMode === "week") {
+      setCurrentDate((d) => new Date(d.getTime() + 7 * 864e5));
+    } else {
+      setCurrentDate((d) => new Date(d.getTime() + 864e5));
+    }
+  };
+  const goToToday = () => {
+    setCurrentDate(/* @__PURE__ */ new Date());
+    setSelectedDate(/* @__PURE__ */ new Date());
+  };
+  const handleDayClick = (date) => {
+    setSelectedDate(date);
+    onDateSelect?.(date);
+  };
+  const eventsByDate = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const event of events) {
+      const key = new Date(event.dtstart).toDateString();
+      const list = map.get(key) ?? [];
+      list.push(event);
+      map.set(key, list);
+    }
+    return map;
+  }, [events]);
+  const visibleDays = useMemo(() => {
+    if (viewMode === "month") {
+      const monthStart = startOfMonth(currentDate);
+      const monthEnd = endOfMonth(currentDate);
+      return eachDayOfInterval({
+        start: startOfWeek(monthStart),
+        end: endOfWeek(monthEnd)
+      });
+    } else if (viewMode === "week") {
+      const weekStart = startOfWeek(currentDate);
+      const weekEnd = endOfWeek(currentDate);
+      return eachDayOfInterval({ start: weekStart, end: weekEnd });
+    }
+    return [currentDate];
+  }, [viewMode, currentDate]);
+  const selectedDayEvents = selectedDate ? eventsByDate.get(selectedDate.toDateString()) ?? [] : [];
+  const headerLabel = viewMode === "day" ? format(currentDate, "EEEE, MMMM d, yyyy") : format(currentDate, "MMMM yyyy");
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8",
+              onClick: navigateBack,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8",
+              onClick: navigateForward,
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: headerLabel }),
+        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: goToToday, children: labels.today ?? "Today" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex rounded-md border", children: ["month", "week", "day"].map((mode) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: viewMode === mode ? "default" : "ghost",
+            size: "sm",
+            className: "rounded-none first:rounded-l-md last:rounded-r-md",
+            onClick: () => setViewMode(mode),
+            children: labels[mode] ?? mode.charAt(0).toUpperCase() + mode.slice(1)
+          },
+          mode
+        )) }),
+        onCreateEvent && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: onCreateEvent, children: [
+          /* @__PURE__ */ jsx(Plus, { className: "mr-1 h-4 w-4" }),
+          labels.newEvent ?? "New event"
+        ] })
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children: viewMode === "month" ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-px rounded-lg border bg-border", children: [
+        ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map(
+          (day) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "bg-muted px-2 py-1.5 text-center text-xs font-medium text-muted-foreground",
+              children: day
+            },
+            day
+          )
+        ),
+        visibleDays.map((day) => {
+          const dayEvents = eventsByDate.get(day.toDateString()) ?? [];
+          const isCurrentMonth = day.getMonth() === currentDate.getMonth();
+          const isToday = isSameDay(day, /* @__PURE__ */ new Date());
+          const isSelected = selectedDate && isSameDay(day, selectedDate);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleDayClick(day),
+              className: cn(
+                "min-h-[80px] bg-background p-1 text-left transition-colors hover:bg-accent",
+                !isCurrentMonth && "opacity-40",
+                isSelected && "ring-2 ring-primary ring-inset"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex h-6 w-6 items-center justify-center rounded-full text-xs",
+                      isToday && "bg-primary text-primary-foreground font-bold"
+                    ),
+                    children: day.getDate()
+                  }
+                ),
+                dayEvents.slice(0, 3).map((evt) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "mt-0.5 truncate rounded bg-primary/10 px-1 py-0.5 text-[10px] text-primary",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onEventClick?.(evt);
+                    },
+                    role: "button",
+                    tabIndex: 0,
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") onEventClick?.(evt);
+                    },
+                    children: evt.summary
+                  },
+                  evt.id
+                )),
+                dayEvents.length > 3 && /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-[10px] text-muted-foreground", children: [
+                  "+",
+                  dayEvents.length - 3,
+                  " more"
+                ] })
+              ]
+            },
+            day.toISOString()
+          );
+        })
+      ] }) : viewMode === "week" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2", children: visibleDays.map((day) => {
+        const dayEvents = eventsByDate.get(day.toDateString()) ?? [];
+        const isToday = isSameDay(day, /* @__PURE__ */ new Date());
+        return /* @__PURE__ */ jsxs("div", { className: "min-h-[200px]", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "mb-2 text-center text-xs",
+                isToday && "font-bold text-primary"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("p", { children: format(day, "EEE") }),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "inline-flex h-7 w-7 items-center justify-center rounded-full",
+                      isToday && "bg-primary text-primary-foreground"
+                    ),
+                    children: day.getDate()
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "space-y-1", children: dayEvents.map((evt) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onEventClick?.(evt),
+              className: "w-full rounded bg-primary/10 px-2 py-1 text-left text-xs text-primary transition-colors hover:bg-primary/20",
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate font-medium", children: evt.summary }),
+                /* @__PURE__ */ jsx("p", { className: "text-[10px] opacity-70", children: format(new Date(evt.dtstart), "h:mm a") })
+              ]
+            },
+            evt.id
+          )) })
+        ] }, day.toISOString());
+      }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: visibleDays.flatMap((day) => {
+        const dayEvents = eventsByDate.get(day.toDateString()) ?? [];
+        if (dayEvents.length === 0) {
+          return [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex flex-col items-center justify-center py-16 text-center",
+                children: [
+                  /* @__PURE__ */ jsx(CalendarDays, { className: "mb-3 h-10 w-10 text-muted-foreground/50" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: labels.noEvents ?? "No events for this day" })
+                ]
+              },
+              "empty"
+            )
+          ];
+        }
+        return dayEvents.map((evt) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onEventClick?.(evt),
+            className: "flex w-full items-center gap-3 rounded-lg border p-3 text-left transition-colors hover:bg-accent",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-primary flex-shrink-0" }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-medium", children: evt.summary }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                  format(new Date(evt.dtstart), "h:mm a"),
+                  " \u2013",
+                  " ",
+                  format(new Date(evt.dtend), "h:mm a")
+                ] }),
+                evt.location && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: evt.location })
+              ] })
+            ]
+          },
+          evt.id
+        ));
+      }) }) }),
+      selectedDate && selectedDayEvents.length > 0 && viewMode === "month" && /* @__PURE__ */ jsxs("div", { className: "w-64 border-l p-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-semibold", children: format(selectedDate, "MMMM d") }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: selectedDayEvents.map((evt) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onEventClick?.(evt),
+            className: "w-full rounded-md bg-muted p-2 text-left text-sm transition-colors hover:bg-accent",
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "font-medium truncate", children: evt.summary }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: evt.allDay ? "All day" : `${format(new Date(evt.dtstart), "h:mm a")} \u2013 ${format(new Date(evt.dtend), "h:mm a")}` })
+            ]
+          },
+          evt.id
+        )) })
+      ] })
+    ] })
+  ] });
+}
+function EventDialog({
+  open,
+  onOpenChange,
+  event,
+  onSave,
+  onDelete,
+  labels = {}
+}) {
+  const isEdit = !!event?.id;
+  const [summary, setSummary] = useState(event?.summary ?? "");
+  const [description, setDescription] = useState(event?.description ?? "");
+  const [location, setLocation] = useState(event?.location ?? "");
+  const [dtstart, setDtstart] = useState(
+    event?.dtstart ? new Date(event.dtstart).toISOString().slice(0, 16) : ""
+  );
+  const [dtend, setDtend] = useState(
+    event?.dtend ? new Date(event.dtend).toISOString().slice(0, 16) : ""
+  );
+  const [allDay, setAllDay] = useState(event?.allDay ?? false);
+  const [saving, setSaving] = useState(false);
+  const handleSave = async () => {
+    if (!summary.trim() || !dtstart || !dtend) return;
+    setSaving(true);
+    try {
+      await onSave({
+        ...event?.id ? { id: event.id } : {},
+        summary: summary.trim(),
+        description: description.trim() || null,
+        location: location.trim() || null,
+        dtstart: new Date(dtstart).toISOString(),
+        dtend: new Date(dtend).toISOString(),
+        allDay
+      });
+      onOpenChange(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[480px]", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: isEdit ? labels.editTitle ?? "Edit event" : labels.createTitle ?? "New event" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: labels.summary ?? "Summary" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: summary,
+            onChange: (e) => setSummary(e.target.value),
+            className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            placeholder: "Event name"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("label", { className: "mb-1 block text-sm font-medium", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "mr-1 inline h-3.5 w-3.5" }),
+            labels.startDate ?? "Start"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "datetime-local",
+              value: dtstart,
+              onChange: (e) => setDtstart(e.target.value),
+              className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: labels.endDate ?? "End" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "datetime-local",
+              value: dtend,
+              onChange: (e) => setDtend(e.target.value),
+              className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: allDay,
+            onChange: (e) => setAllDay(e.target.checked),
+            className: "rounded border-input"
+          }
+        ),
+        labels.allDay ?? "All day"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block text-sm font-medium", children: [
+          /* @__PURE__ */ jsx(MapPin, { className: "mr-1 inline h-3.5 w-3.5" }),
+          labels.location ?? "Location"
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: location,
+            onChange: (e) => setLocation(e.target.value),
+            className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            placeholder: "Add location"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: labels.description ?? "Description" }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            rows: 3,
+            className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring resize-none",
+            placeholder: "Add description"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
+      isEdit && onDelete && /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: onDelete, children: labels.delete ?? "Delete" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: labels.cancel ?? "Cancel" }) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          onClick: handleSave,
+          disabled: saving || !summary.trim() || !dtstart || !dtend,
+          children: [
+            saving && /* @__PURE__ */ jsx(Loader2, { className: "mr-1 h-3.5 w-3.5 animate-spin" }),
+            labels.save ?? "Save"
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+function MiniCalendar({
+  selected,
+  onSelect,
+  events = [],
+  className
+}) {
+  const eventDates = new Set(
+    events.map((e) => new Date(e.dtstart).toDateString())
+  );
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      mode: "single",
+      selected,
+      onSelect,
+      showOutsideDays: true,
+      className: cn("p-2", className),
+      classNames: {
+        months: "flex flex-col",
+        month: "space-y-2",
+        month_caption: "flex justify-center relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        button_previous: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1",
+        button_next: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1",
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        week: "flex w-full mt-1",
+        day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
+        day_button: cn(
+          "h-8 w-8 p-0 font-normal",
+          "hover:bg-accent hover:text-accent-foreground rounded-md"
+        ),
+        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground rounded-md",
+        today: "bg-accent text-accent-foreground rounded-md",
+        outside: "text-muted-foreground opacity-50",
+        disabled: "text-muted-foreground opacity-50"
+      },
+      modifiers: {
+        hasEvent: (date) => eventDates.has(date.toDateString())
+      },
+      modifiersClassNames: {
+        hasEvent: "font-bold"
+      }
+    }
+  );
+}
+var statusConfig = {
+  ACCEPTED: {
+    icon: Check,
+    label: "Accepted",
+    className: "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/30"
+  },
+  DECLINED: {
+    icon: X,
+    label: "Declined",
+    className: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/30"
+  },
+  TENTATIVE: {
+    icon: HelpCircle,
+    label: "Tentative",
+    className: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border-yellow-500/30"
+  },
+  "NEEDS-ACTION": {
+    icon: HelpCircle,
+    label: "Pending",
+    className: "bg-muted text-muted-foreground border-border"
+  }
+};
+function EventRsvpBadge({
+  eventId,
+  currentStatus,
+  onRsvp,
+  className
+}) {
+  const [loading, setLoading] = useState(null);
+  const status = currentStatus?.toUpperCase() || "NEEDS-ACTION";
+  const handleRsvp = async (partstat) => {
+    if (partstat === status) return;
+    setLoading(partstat);
+    try {
+      await onRsvp(eventId, partstat);
+    } finally {
+      setLoading(null);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), children: ["ACCEPTED", "TENTATIVE", "DECLINED"].map((ps) => {
+    const cfg = statusConfig[ps];
+    const Icon = cfg.icon;
+    const isActive = status === ps;
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: cn("h-7 px-2 text-xs", isActive && cfg.className),
+        onClick: () => handleRsvp(ps),
+        disabled: loading !== null,
+        children: [
+          loading === ps ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx(Icon, { className: "mr-1 h-3 w-3" }),
+          cfg.label
+        ]
+      },
+      ps
+    );
+  }) });
+}
+var STORAGE_KEY = "cartera:chatSidebarOpen";
+function ChatSidebarProvider({
+  fetchConversations,
+  children,
+  defaultOpen
+}) {
+  const [isOpen, setIsOpen] = useState(() => {
+    if (defaultOpen !== void 0) return defaultOpen;
+    if (typeof window === "undefined") return false;
+    try {
+      return localStorage.getItem(STORAGE_KEY) === "true";
+    } catch {
+      return false;
+    }
+  });
+  const [view, setView] = useState("list");
+  const [conversations, setConversations] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [activeCaseId, setActiveCaseId] = useState(null);
+  const [activeRoomId, setActiveRoomId] = useState(null);
+  const fetchRef = useRef(fetchConversations);
+  fetchRef.current = fetchConversations;
+  const persistOpen = useCallback((open2) => {
+    setIsOpen(open2);
+    try {
+      localStorage.setItem(STORAGE_KEY, String(open2));
+    } catch {
+    }
+  }, []);
+  const loadConversations = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const result = await fetchRef.current();
+      setConversations(result);
+    } catch {
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    void loadConversations();
+  }, [loadConversations]);
+  const toggle = useCallback(() => persistOpen(!isOpen), [isOpen, persistOpen]);
+  const open = useCallback(() => persistOpen(true), [persistOpen]);
+  const close = useCallback(() => {
+    persistOpen(false);
+    setView("list");
+    setActiveCaseId(null);
+    setActiveRoomId(null);
+  }, [persistOpen]);
+  const openChat = useCallback(
+    (caseId, roomId) => {
+      persistOpen(true);
+      setActiveCaseId(caseId);
+      if (roomId) {
+        setActiveRoomId(roomId);
+        setView("chat");
+      } else {
+        const conv = conversations.find((c) => c.caseId === caseId);
+        if (conv && conv.rooms.length === 1) {
+          setActiveRoomId(conv.rooms[0].id);
+          setView("chat");
+        } else {
+          setActiveRoomId(null);
+          setView("list");
+        }
+      }
+    },
+    [persistOpen, conversations]
+  );
+  const selectRoom = useCallback(
+    (roomId, caseId) => {
+      setActiveCaseId(caseId);
+      setActiveRoomId(roomId);
+      setView("chat");
+      if (!isOpen) persistOpen(true);
+    },
+    [isOpen, persistOpen]
+  );
+  const back = useCallback(() => {
+    setView("list");
+    setActiveRoomId(null);
+  }, []);
+  const value = {
+    isOpen,
+    view,
+    conversations,
+    isLoading,
+    activeCaseId,
+    activeRoomId,
+    toggle,
+    open,
+    close,
+    openChat,
+    selectRoom,
+    back,
+    refetch: loadConversations
+  };
+  return /* @__PURE__ */ jsx(ChatSidebarContext.Provider, { value, children });
+}
+var PING_INTERVAL = 3e4;
+var MIN_RECONNECT_DELAY = 1e3;
+var MAX_RECONNECT_DELAY = 3e4;
+function useChatRoom(roomId, config, options = {}) {
+  const {
+    minReconnectDelay = MIN_RECONNECT_DELAY,
+    maxReconnectDelay = MAX_RECONNECT_DELAY,
+    pingInterval = PING_INTERVAL
+  } = options;
+  const [messages, setMessages] = useState([]);
+  const [isConnected, setIsConnected] = useState(false);
+  const [error, setError] = useState(null);
+  const [typingUsers, setTypingUsers] = useState([]);
+  const [hasMoreHistory, setHasMoreHistory] = useState(true);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+  const wsRef = useRef(null);
+  const mountedRef = useRef(true);
+  const reconnectDelayRef = useRef(minReconnectDelay);
+  const reconnectTimerRef = useRef(null);
+  const pingTimerRef = useRef(null);
+  const roomIdRef = useRef(roomId);
+  const cursorRef = useRef(null);
+  const messageIdsRef = useRef(/* @__PURE__ */ new Set());
+  const loadMoreHistoryRef = useRef(
+    () => Promise.resolve()
+  );
+  const configRef = useRef(config);
+  roomIdRef.current = roomId;
+  configRef.current = config;
+  const clearTimers = useCallback(() => {
+    if (reconnectTimerRef.current) {
+      clearTimeout(reconnectTimerRef.current);
+      reconnectTimerRef.current = null;
+    }
+    if (pingTimerRef.current) {
+      clearInterval(pingTimerRef.current);
+      pingTimerRef.current = null;
+    }
+  }, []);
+  const loadMoreHistory = useCallback(async () => {
+    if (!roomIdRef.current || isLoadingHistory || !hasMoreHistory) return;
+    setIsLoadingHistory(true);
+    try {
+      const jwt = await configRef.current.getToken();
+      if (!jwt) return;
+      const params = new URLSearchParams({ limit: "50" });
+      if (cursorRef.current) {
+        params.set("cursor", cursorRef.current);
+      }
+      const res = await fetch(
+        `${configRef.current.baseUrl}/rooms/${roomIdRef.current}/messages?${params}`,
+        { headers: { Authorization: `Bearer ${jwt}` } }
+      );
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data.success && data.result.length > 0) {
+        const newMessages = data.result.filter(
+          (m) => !messageIdsRef.current.has(m.id)
+        );
+        for (const m of newMessages) {
+          messageIdsRef.current.add(m.id);
+        }
+        setMessages((prev) => [...newMessages, ...prev]);
+        cursorRef.current = data.nextCursor;
+        setHasMoreHistory(data.nextCursor !== null);
+      } else {
+        setHasMoreHistory(false);
+      }
+    } catch {
+    } finally {
+      setIsLoadingHistory(false);
+    }
+  }, [isLoadingHistory, hasMoreHistory]);
+  const sendMessage = useCallback(
+    (content, attachmentIds) => {
+      const ws = wsRef.current;
+      if (!ws || ws.readyState !== WebSocket.OPEN) return;
+      ws.send(
+        JSON.stringify({
+          type: "send_message",
+          content,
+          attachmentIds,
+          clientMessageId: crypto.randomUUID()
+        })
+      );
+    },
+    []
+  );
+  const sendTyping = useCallback((isTyping) => {
+    const ws = wsRef.current;
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    ws.send(JSON.stringify({ type: "typing", isTyping }));
+  }, []);
+  useEffect(() => {
+    loadMoreHistoryRef.current = loadMoreHistory;
+  }, [loadMoreHistory]);
+  const connect = useCallback(async () => {
+    if (!roomIdRef.current || !mountedRef.current) return;
+    let jwt = null;
+    try {
+      jwt = await configRef.current.getToken();
+    } catch {
+      if (mountedRef.current) {
+        setError("Failed to get authentication token");
+      }
+      return;
+    }
+    if (!jwt || !mountedRef.current) return;
+    const baseUrl = configRef.current.baseUrl;
+    const wsBase = baseUrl.replace(/^http/, "ws");
+    const wsUrl = `${wsBase}/realtime/chat?roomId=${encodeURIComponent(roomIdRef.current)}&token=${encodeURIComponent(jwt)}`;
+    let ws;
+    try {
+      ws = new WebSocket(wsUrl);
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(
+          err instanceof Error ? err.message : "WebSocket creation failed"
+        );
+      }
+      return;
+    }
+    wsRef.current = ws;
+    ws.onopen = () => {
+      if (!mountedRef.current) {
+        ws.close();
+        return;
+      }
+      setIsConnected(true);
+      setError(null);
+      reconnectDelayRef.current = minReconnectDelay;
+      ws.send(JSON.stringify({ type: "client_hello" }));
+      pingTimerRef.current = setInterval(() => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: "ping", timestamp: Date.now() }));
+        }
+      }, pingInterval);
+    };
+    ws.onmessage = (event) => {
+      if (!mountedRef.current) return;
+      try {
+        const msg = JSON.parse(event.data);
+        switch (msg.type) {
+          case "server_hello":
+            void loadMoreHistoryRef.current();
+            break;
+          case "new_message": {
+            const message = msg.message;
+            if (!messageIdsRef.current.has(message.id)) {
+              messageIdsRef.current.add(message.id);
+              setMessages((prev) => [...prev, message]);
+            }
+            setTypingUsers(
+              (prev) => prev.filter((u) => u.userId !== message.senderId)
+            );
+            break;
+          }
+          case "typing_indicator": {
+            const userId = msg.userId;
+            const userName = msg.userName ?? null;
+            const isTyping = msg.isTyping;
+            setTypingUsers((prev) => {
+              if (isTyping) {
+                if (prev.some((u) => u.userId === userId)) return prev;
+                return [...prev, { userId, userName }];
+              }
+              return prev.filter((u) => u.userId !== userId);
+            });
+            break;
+          }
+          case "pong":
+            break;
+          case "error":
+            setError(msg.message ?? "WebSocket error from server");
+            break;
+        }
+      } catch {
+      }
+    };
+    ws.onerror = () => {
+      if (!mountedRef.current) return;
+      setError("WebSocket connection error");
+    };
+    ws.onclose = () => {
+      if (pingTimerRef.current) {
+        clearInterval(pingTimerRef.current);
+        pingTimerRef.current = null;
+      }
+      if (!mountedRef.current) return;
+      setIsConnected(false);
+      const delay = reconnectDelayRef.current;
+      reconnectDelayRef.current = Math.min(delay * 2, maxReconnectDelay);
+      reconnectTimerRef.current = setTimeout(() => {
+        if (mountedRef.current && roomIdRef.current) {
+          void connect();
+        }
+      }, delay);
+    };
+  }, [minReconnectDelay, maxReconnectDelay, pingInterval]);
+  useEffect(() => {
+    mountedRef.current = true;
+    if (!roomId) {
+      setMessages([]);
+      setIsConnected(false);
+      setError(null);
+      setTypingUsers([]);
+      setHasMoreHistory(true);
+      cursorRef.current = null;
+      messageIdsRef.current = /* @__PURE__ */ new Set();
+      return;
+    }
+    setMessages([]);
+    setTypingUsers([]);
+    setHasMoreHistory(true);
+    cursorRef.current = null;
+    messageIdsRef.current = /* @__PURE__ */ new Set();
+    reconnectDelayRef.current = minReconnectDelay;
+    void connect();
+    return () => {
+      mountedRef.current = false;
+      clearTimers();
+      if (wsRef.current) {
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, [roomId]);
+  return {
+    messages,
+    sendMessage,
+    sendTyping,
+    isConnected,
+    error,
+    typingUsers,
+    loadMoreHistory,
+    hasMoreHistory,
+    isLoadingHistory
+  };
+}
+var roleColors = {
+  client: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  seller: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+  org_manager: "bg-violet-500/10 text-violet-600 dark:text-violet-400",
+  credit_agent: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  admin: "bg-primary/10 text-primary"
+};
+function ChatRoomView({
+  roomId,
+  currentUserId,
+  config,
+  roomLabel,
+  labels = {},
+  roleLabel,
+  className
+}) {
+  const {
+    messages,
+    sendMessage,
+    sendTyping,
+    isConnected,
+    error,
+    typingUsers,
+    loadMoreHistory,
+    hasMoreHistory,
+    isLoadingHistory
+  } = useChatRoom(roomId, config);
+  const [newMessage, setNewMessage] = useState("");
+  const [pendingAttachments, setPendingAttachments] = useState([]);
+  const scrollRef = useRef(null);
+  const inputRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const typingTimeoutRef = useRef(null);
+  const prevMessageCountRef = useRef(0);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (messages.length > prevMessageCountRef.current) {
+      el.scrollTop = el.scrollHeight;
+    }
+    prevMessageCountRef.current = messages.length;
+  }, [messages.length]);
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (el.scrollTop < 50 && hasMoreHistory && !isLoadingHistory) {
+      void loadMoreHistory();
+    }
+  }, [hasMoreHistory, isLoadingHistory, loadMoreHistory]);
+  const handleTyping = useCallback(() => {
+    sendTyping(true);
+    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    typingTimeoutRef.current = setTimeout(() => sendTyping(false), 2e3);
+  }, [sendTyping]);
+  const handleSendMessage = useCallback(() => {
+    const content = newMessage.trim();
+    const attachmentIds = pendingAttachments.filter((a) => !a.uploading).map((a) => a.id);
+    if (!content && attachmentIds.length === 0) return;
+    sendMessage(content, attachmentIds.length > 0 ? attachmentIds : void 0);
+    setNewMessage("");
+    setPendingAttachments([]);
+    sendTyping(false);
+    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    inputRef.current?.focus();
+  }, [newMessage, pendingAttachments, sendMessage, sendTyping]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+  const handleFileSelect = async (e) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    for (const file of Array.from(files)) {
+      const tempId = crypto.randomUUID();
+      const pending = {
+        id: tempId,
+        fileName: file.name,
+        fileSize: file.size,
+        mimeType: file.type || "application/octet-stream",
+        uploading: true
+      };
+      setPendingAttachments((prev) => [...prev, pending]);
+      try {
+        const jwt = await config.getToken();
+        if (!jwt) throw new Error("No auth token");
+        const formData = new FormData();
+        formData.append("file", file);
+        const res = await fetch(
+          `${config.baseUrl}/rooms/${roomId}/attachments/upload`,
+          {
+            method: "POST",
+            headers: { Authorization: `Bearer ${jwt}` },
+            body: formData
+          }
+        );
+        if (!res.ok) throw new Error("Upload failed");
+        const data = await res.json();
+        setPendingAttachments(
+          (prev) => prev.map(
+            (a) => a.id === tempId ? { ...a, id: data.result.id, uploading: false } : a
+          )
+        );
+      } catch {
+        setPendingAttachments((prev) => prev.filter((a) => a.id !== tempId));
+      }
+    }
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+  const removeAttachment = (id) => {
+    setPendingAttachments((prev) => prev.filter((a) => a.id !== id));
+  };
+  const formatTime = (timestamp) => {
+    return new Date(timestamp).toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  };
+  const formatDate = (timestamp) => {
+    const date = new Date(timestamp);
+    const today = /* @__PURE__ */ new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+    if (date.toDateString() === today.toDateString())
+      return labels.today ?? "Today";
+    if (date.toDateString() === yesterday.toDateString())
+      return labels.yesterday ?? "Yesterday";
+    return date.toLocaleDateString([], { month: "short", day: "numeric" });
+  };
+  const groupedMessages = messages.reduce(
+    (groups, message) => {
+      const date = formatDate(message.createdAt);
+      if (!groups[date]) groups[date] = [];
+      groups[date].push(message);
+      return groups;
+    },
+    {}
+  );
+  const formatFileSize = (bytes) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+  const getAttachmentUrl = (attachmentId) => `${config.baseUrl}/rooms/${roomId}/attachments/${attachmentId}`;
+  const getRoleLabel = (role) => roleLabel ? roleLabel(role) : role;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 flex items-center justify-between border-b px-4 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(MessageSquare, { className: "h-4 w-4 text-primary", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: roomLabel ?? "Chat" })
+      ] }),
+      /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: isConnected ? /* @__PURE__ */ jsx(Wifi, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx(WifiOff, { className: "h-3.5 w-3.5 text-destructive" }) }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: isConnected ? "Connected" : error ?? "Reconnecting..." })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: scrollRef,
+          onScroll: handleScroll,
+          className: "flex-1 overflow-y-auto p-3",
+          children: [
+            isLoadingHistory && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }),
+            messages.length === 0 && !isLoadingHistory ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center py-8 text-center", children: [
+              /* @__PURE__ */ jsx(
+                MessageSquare,
+                {
+                  className: "mb-3 h-10 w-10 text-muted-foreground/50",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: labels.noMessages ?? "No messages yet" })
+            ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.entries(groupedMessages).map(([date, dateMessages]) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "my-3 flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" }),
+                /* @__PURE__ */ jsx("span", { className: "px-2 text-xs text-muted-foreground", children: date }),
+                /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-3", children: dateMessages.map((message) => {
+                const isCurrentUser = message.senderId === currentUserId;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex gap-2",
+                      isCurrentUser ? "flex-row-reverse" : "flex-row"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium",
+                            roleColors[message.senderRole] ?? roleColors.client
+                          ),
+                          children: (message.senderName ?? message.senderId).split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase()
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: cn(
+                            "flex max-w-[80%] flex-col",
+                            isCurrentUser ? "items-end" : "items-start"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: "mb-0.5 flex items-center gap-1.5", children: [
+                              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: message.senderName ?? message.senderId.slice(0, 8) }),
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: cn(
+                                    "rounded px-1 py-0.5 text-[10px] font-medium",
+                                    roleColors[message.senderRole] ?? ""
+                                  ),
+                                  children: getRoleLabel(message.senderRole)
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatTime(message.createdAt) })
+                            ] }),
+                            message.content && /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: cn(
+                                  "rounded-xl px-3 py-2 text-sm",
+                                  isCurrentUser ? "rounded-br-sm bg-primary text-primary-foreground" : "rounded-bl-sm bg-muted text-foreground"
+                                ),
+                                children: message.content
+                              }
+                            ),
+                            message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col gap-1", children: message.attachments.map(
+                              (att) => att.mimeType.startsWith("image/") ? /* @__PURE__ */ jsx(
+                                "a",
+                                {
+                                  href: getAttachmentUrl(att.id),
+                                  target: "_blank",
+                                  rel: "noopener noreferrer",
+                                  className: "block max-w-[200px] overflow-hidden rounded-lg border",
+                                  children: /* @__PURE__ */ jsx(
+                                    "img",
+                                    {
+                                      src: getAttachmentUrl(att.id),
+                                      alt: att.fileName,
+                                      className: "h-auto w-full object-cover",
+                                      loading: "lazy"
+                                    }
+                                  )
+                                },
+                                att.id
+                              ) : /* @__PURE__ */ jsxs(
+                                "a",
+                                {
+                                  href: getAttachmentUrl(att.id),
+                                  target: "_blank",
+                                  rel: "noopener noreferrer",
+                                  className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-2 py-1.5 text-xs transition-colors hover:bg-muted",
+                                  children: [
+                                    /* @__PURE__ */ jsx(FileIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" }),
+                                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                                      /* @__PURE__ */ jsx("p", { className: "truncate font-medium", children: att.fileName }),
+                                      /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: formatFileSize(att.fileSize) })
+                                    ] }),
+                                    /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" })
+                                  ]
+                                },
+                                att.id
+                              )
+                            ) })
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  message.id
+                );
+              }) })
+            ] }, date)) })
+          ]
+        }
+      ),
+      typingUsers.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 px-3 py-1", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground italic", children: [
+        typingUsers.map((u) => u.userName ?? "Someone").join(", "),
+        " ",
+        typingUsers.length === 1 ? "is" : "are",
+        " typing..."
+      ] }) }),
+      pendingAttachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-t px-3 py-1.5", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: pendingAttachments.map((att) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-1.5 rounded bg-muted px-2 py-0.5 text-xs",
+          children: [
+            att.uploading ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx(FileIcon, { className: "h-3 w-3" }),
+            /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate", children: att.fileName }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeAttachment(att.id),
+                className: "text-muted-foreground hover:text-foreground",
+                children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+              }
+            )
+          ]
+        },
+        att.id
+      )) }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-t p-3", children: /* @__PURE__ */ jsxs(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            handleSendMessage();
+          },
+          className: "flex gap-2",
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                className: "hidden",
+                onChange: handleFileSelect
+              }
+            ),
+            /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-9 w-9 flex-shrink-0",
+                  onClick: () => fileInputRef.current?.click(),
+                  "aria-label": labels.attachFile ?? "Attach file",
+                  children: /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: labels.attachFile ?? "Attach file" })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: inputRef,
+                value: newMessage,
+                onChange: (e) => {
+                  setNewMessage(e.target.value);
+                  handleTyping();
+                },
+                onKeyDown: handleKeyDown,
+                placeholder: labels.placeholder ?? "Type a message...",
+                className: "h-9 min-h-[36px] max-h-[100px] flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                rows: 1
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                size: "sm",
+                className: "h-9",
+                disabled: !newMessage.trim() && pendingAttachments.filter((a) => !a.uploading).length === 0,
+                "aria-label": labels.send ?? "Send",
+                children: /* @__PURE__ */ jsx(Send, { className: "h-4 w-4", "aria-hidden": "true" })
+              }
+            )
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+var roomTypeLabels = {
+  client_agent: "Client \u2194 Agent",
+  dealer_agent: "Dealer \u2194 Agent"
+};
+function ChatSidebar({
+  currentUserId,
+  config,
+  labels = {},
+  roleLabel,
+  roomTypeLabel,
+  className
+}) {
+  const {
+    isOpen,
+    view,
+    conversations,
+    isLoading,
+    activeCaseId,
+    activeRoomId,
+    close,
+    selectRoom,
+    back
+  } = useChatSidebar();
+  useEffect(() => {
+    if (!isOpen || typeof window === "undefined") return;
+    const mq = window.matchMedia("(max-width: 639px)");
+    const apply = () => {
+      if (mq.matches) document.body.style.overflow = "hidden";
+      else document.body.style.overflow = "";
+    };
+    apply();
+    mq.addEventListener("change", apply);
+    return () => {
+      mq.removeEventListener("change", apply);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const getRoomTypeLabel = (type) => {
+    if (roomTypeLabel) return roomTypeLabel(type);
+    return roomTypeLabels[type] ?? type;
+  };
+  const activeConversation = activeCaseId ? conversations.find((c) => c.caseId === activeCaseId) : null;
+  const panel = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex min-h-0 flex-col bg-background",
+        // Below sm (~640px): fullscreen overlay drawer above sticky app headers (often z-50)
+        "fixed inset-0 z-[100] w-full max-w-none border-0 shadow-none",
+        // sm+: docked right sidebar in the app shell flex row
+        "sm:relative sm:inset-auto sm:z-auto sm:h-full sm:w-[360px] sm:max-w-[360px] sm:shrink-0 sm:border-l sm:shadow-none xl:w-[400px] xl:max-w-[400px]",
+        className
+      ),
+      children: view === "list" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(MessageSquare, { className: "h-4 w-4 text-primary" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: labels.title ?? "Chat" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-7 w-7",
+              onClick: close,
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center px-4", children: [
+          /* @__PURE__ */ jsx(MessageSquare, { className: "mb-3 h-8 w-8 text-muted-foreground/50" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: labels.noConversations ?? "No conversations yet" })
+        ] }) : /* @__PURE__ */ jsx("div", { className: "py-1", children: conversations.map((conv) => /* @__PURE__ */ jsxs("div", { className: "px-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-2 pt-3 pb-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground", children: conv.caseNumber }),
+              /* @__PURE__ */ jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground", children: conv.caseStatus })
+            ] }),
+            conv.clientName && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: conv.clientName })
+          ] }),
+          conv.rooms.map((room) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => selectRoom(room.id, conv.caseId),
+              className: cn(
+                "flex w-full items-center justify-between rounded-md px-2 py-2 text-left transition-colors hover:bg-accent",
+                activeRoomId === room.id && "bg-accent"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                  /* @__PURE__ */ jsx(MessageSquare, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm truncate", children: getRoomTypeLabel(room.type) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+                  room.lastMessageAt && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatRelativeTime(room.lastMessageAt) }),
+                  /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" })
+                ] })
+              ]
+            },
+            room.id
+          ))
+        ] }, conv.caseId)) }) })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-7 w-7",
+              onClick: back,
+              children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" })
+            }
+          ),
+          activeConversation && /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: activeConversation.caseNumber }),
+            activeConversation.clientName && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: activeConversation.clientName })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-7 w-7",
+              onClick: close,
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        activeRoomId && /* @__PURE__ */ jsx(
+          ChatRoomView,
+          {
+            roomId: activeRoomId,
+            currentUserId,
+            config,
+            labels,
+            roleLabel,
+            className: "flex-1"
+          }
+        )
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-[90] bg-black/50 sm:hidden",
+        "aria-hidden": true,
+        onClick: close
+      }
+    ),
+    panel
+  ] });
+}
+function formatRelativeTime(dateStr) {
+  const date = new Date(dateStr);
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMin = Math.floor(diffMs / 6e4);
+  if (diffMin < 1) return "now";
+  if (diffMin < 60) return `${diffMin}m`;
+  const diffH = Math.floor(diffMin / 60);
+  if (diffH < 24) return `${diffH}h`;
+  const diffD = Math.floor(diffH / 24);
+  if (diffD < 7) return `${diffD}d`;
+  return date.toLocaleDateString([], { month: "short", day: "numeric" });
+}
 
-export { AvatarEditor, AvatarEditorDialog, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, LanguageContext, LanguageSwitcher, NotificationsContext, NotificationsWidget, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn, defaultLanguages, toggleVariants, useLanguageContext, useNotificationsContext };
+export { AvatarEditor, AvatarEditorDialog, Button, CalendarContext, CalendarSubscribeButton, CalendarView, CalendarWidget, ChatRoomView, ChatSidebar, ChatSidebarContext, ChatSidebarProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EventDialog, EventRsvpBadge, LanguageContext, LanguageSwitcher, MiniCalendar, NotificationsContext, NotificationsWidget, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UpcomingEvents, buttonVariants, cn, defaultLanguages, toggleVariants, useCalendarContext, useChatRoom, useChatSidebar, useLanguageContext, useNotificationsContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map