@dilipod/ui 0.4.23 → 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';
@@ -10,7 +10,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import * as react_star from '@phosphor-icons/react';
-import { X, CaretDown, Circle, CaretLeft, DotsThree, CaretRight, Check, House, Info, WarningCircle, Play, Download, Folder, ArrowSquareOut, CircleNotch, File, FileVideo, Lightning, CheckCircle, CaretUp, Plus, PaperPlaneTilt, Eye, TreeStructure, Code, PencilSimple, WebhooksLogo, Copy, CloudArrowUp, CloudArrowDown, ArrowsClockwise, DownloadSimple, ClockCounterClockwise, ArrowsLeftRight, Minus, Pencil, Robot, Target, Crosshair, ListNumbers, Wrench, Clock, TrendUp, CurrencyEur, Sparkle, Plugs, ShieldCheck, FileImage, FilePdf, FileDoc, Question, Warning, Trash, Globe, GitBranch, Package, Timer } from '@phosphor-icons/react';
+import { X, CaretDown, Circle, CaretLeft, DotsThree, CaretRight, Check, House, Info, WarningCircle, Play, Download, Folder, ArrowSquareOut, CircleNotch, File, FileVideo, Lightning, CheckCircle, CaretUp, Plus, PaperPlaneTilt, Eye, TreeStructure, Code, PencilSimple, WebhooksLogo, Copy, CloudArrowUp, CloudArrowDown, ArrowsClockwise, DownloadSimple, ClockCounterClockwise, ArrowsLeftRight, Minus, Pencil, Robot, MagnifyingGlass, FilmStrip, FileText, ImageSquare, TextT, Target, Crosshair, ListNumbers, Wrench, Clock, TrendUp, CurrencyEur, Sparkle, Plugs, ShieldCheck, FileImage, FilePdf, FileDoc, Question, Warning, Trash, Globe, GitBranch, Package, Timer, VideoCamera, Lightbulb } from '@phosphor-icons/react';
 import 'react-dom';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -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();
@@ -6328,6 +6458,30 @@ function SectionHeader({
     }
   );
 }
+function AnalysisContextRenderer({ content }) {
+  const sections = content.split(/^## /gm).filter(Boolean);
+  const getIcon = (title) => {
+    if (title.includes("Request")) return /* @__PURE__ */ jsx(Target, { size: 14, className: "text-[var(--cyan)]" });
+    if (title.includes("Video")) return /* @__PURE__ */ jsx(VideoCamera, { size: 14, className: "text-[var(--cyan)]" });
+    if (title.includes("Document")) return /* @__PURE__ */ jsx(FileText, { size: 14, className: "text-[var(--cyan)]" });
+    if (title.includes("Rules")) return /* @__PURE__ */ jsx(Lightbulb, { size: 14, className: "text-amber-500" });
+    if (title.includes("Context")) return /* @__PURE__ */ jsx(TextT, { size: 14, className: "text-[var(--cyan)]" });
+    return null;
+  };
+  return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: sections.map((section, index) => {
+    const lines = section.split("\n");
+    const title = lines[0]?.trim();
+    const body = lines.slice(1).join("\n").trim();
+    if (!body) return null;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium text-[var(--black)] flex items-center gap-2 mb-3", children: [
+        getIcon(title),
+        title
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground pl-5 space-y-2 whitespace-pre-line", children: body })
+    ] }, index);
+  }) });
+}
 function WorkerSpec({ documentation, className }) {
   const [expandedSections, setExpandedSections] = useState(
     /* @__PURE__ */ new Set(["goal", "scope", "steps", "diagram", "impact", "requirements", "edge_cases"])
@@ -6353,7 +6507,64 @@ function WorkerSpec({ documentation, className }) {
     ] }) });
   }
   const freqLabel = documentation.expected_impact?.frequency ? frequencyLabels[documentation.expected_impact.frequency] || documentation.expected_impact.frequency : "occurrence";
+  const hasAnalysis = documentation.analysis_context || documentation.analysis_sources && documentation.analysis_sources.length > 0;
   return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+    hasAnalysis && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Dialog, { children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "flex items-center gap-2 text-sm font-medium text-[var(--cyan)] hover:text-[var(--cyan)]/80 transition-colors", children: [
+        /* @__PURE__ */ jsx(MagnifyingGlass, { size: 16 }),
+        "What was analyzed",
+        documentation.analysis_summary && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground font-normal", children: [
+          "(",
+          documentation.analysis_summary.total_sources,
+          " source",
+          documentation.analysis_summary.total_sources !== 1 ? "s" : "",
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx(CaretRight, { size: 12 })
+      ] }) }),
+      /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-xl max-h-[80vh] overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "What was analyzed" }),
+          documentation.analysis_summary && /* @__PURE__ */ jsxs(DialogDescription, { className: "flex items-center gap-4 text-xs", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              documentation.analysis_summary.total_sources,
+              " source",
+              documentation.analysis_summary.total_sources !== 1 ? "s" : ""
+            ] }),
+            documentation.analysis_summary.video_count > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(FilmStrip, { size: 12 }),
+              documentation.analysis_summary.video_count,
+              " video",
+              documentation.analysis_summary.video_count !== 1 ? "s" : ""
+            ] }),
+            documentation.analysis_summary.document_count > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(FileText, { size: 12 }),
+              documentation.analysis_summary.document_count,
+              " doc",
+              documentation.analysis_summary.document_count !== 1 ? "s" : ""
+            ] })
+          ] })
+        ] }),
+        documentation.analysis_sources && documentation.analysis_sources.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Sources" }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: documentation.analysis_sources.map((source, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-muted-foreground", children: [
+              source.type === "video" && /* @__PURE__ */ jsx(FilmStrip, { size: 14 }),
+              (source.type === "document" || source.type === "pdf") && /* @__PURE__ */ jsx(FileText, { size: 14 }),
+              source.type === "spreadsheet" && /* @__PURE__ */ jsx(FileText, { size: 14 }),
+              source.type === "image" && /* @__PURE__ */ jsx(ImageSquare, { size: 14 }),
+              source.type === "description" && /* @__PURE__ */ jsx(TextT, { size: 14 })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-[var(--black)]", children: source.name }),
+            source.size > 0 && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: source.size > 1024 * 1024 ? `${(source.size / 1024 / 1024).toFixed(1)}MB` : `${Math.round(source.size / 1024)}KB` })
+          ] }, i)) })
+        ] }),
+        documentation.analysis_context && /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-100 pt-4 space-y-1", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3", children: "Analysis Details" }),
+          /* @__PURE__ */ jsx(AnalysisContextRenderer, { content: documentation.analysis_context })
+        ] })
+      ] })
+    ] }) }),
     documentation.goal && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(
         SectionHeader,
@@ -6529,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