@dilipod/ui 0.4.24 → 0.4.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.4.24",
+  "version": "0.4.26",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",

package/src/components/button.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
   {
     variants: {
       variant: {

package/src/components/date-range-picker.tsx

@@ -124,7 +124,7 @@ const DateRangeSelect = React.forwardRef<HTMLSelectElement, DateRangeSelectProps
         value={value}
         onChange={(e) => onChange(e.target.value as DateRangePreset)}
         className={cn(
-          'h-9 rounded-sm border border-input bg-background px-3 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'h-9 rounded-sm border border-input bg-background px-3 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
       >

package/src/components/dialog.tsx

@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-gray-100">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

package/src/components/form-field.tsx

@@ -39,7 +39,7 @@ const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
           'aria-describedby': error ? errorId : helperText ? helperId : undefined,
           className: cn(
             childProps.className,
-            error && 'border-red-500 focus-visible:ring-red-500'
+            error && 'border-red-500'
           ),
         })
       }

package/src/components/impact-metrics-form.tsx

@@ -205,7 +205,7 @@ export function ImpactMetricsForm({
                     ...prev, 
                     time_saved_minutes_per_run: parseInt(e.target.value) || 0 
                   }))}
-                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background"
+                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none bg-background"
                   min="0"
                 />
                 <span className="text-sm text-muted-foreground">min</span>
@@ -230,7 +230,7 @@ export function ImpactMetricsForm({
                     ...prev, 
                     hourly_rate_euros: parseFloat(e.target.value) || 0 
                   }))}
-                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background"
+                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none bg-background"
                   min="0"
                   step="0.5"
                 />
@@ -255,7 +255,7 @@ export function ImpactMetricsForm({
                     ...prev, 
                     fte_equivalent: (parseFloat(e.target.value) || 0) / 100
                   }))}
-                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background"
+                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none bg-background"
                   min="0"
                   max="1000"
                   step="5"

package/src/components/input.tsx

@@ -15,10 +15,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
+          'flex h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
           error
-            ? 'border-red-500 focus-visible:ring-red-500'
-            : 'border-gray-300 focus-visible:ring-[var(--cyan)]',
+            ? 'border-red-500'
+            : 'border-gray-300',
           className
         )}
         ref={ref}

package/src/components/radio-group.tsx

@@ -27,7 +27,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}
@@ -91,7 +91,7 @@ const RadioGroupCard = React.forwardRef<
       ref={ref}
       id={cardId}
       className={cn(
-        'relative flex cursor-pointer rounded-lg border bg-background p-4 transition-all hover:border-[var(--cyan)]/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=checked]:border-[var(--cyan)] data-[state=checked]:ring-1 data-[state=checked]:ring-[var(--cyan)] disabled:cursor-not-allowed disabled:opacity-50',
+        'relative flex cursor-pointer rounded-lg border bg-background p-4 transition-all hover:border-[var(--cyan)]/50 focus:outline-none focus-visible:outline-none data-[state=checked]:border-[var(--cyan)] data-[state=checked]:ring-1 data-[state=checked]:ring-[var(--cyan)] disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}

package/src/components/select.tsx

@@ -15,14 +15,14 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         <select
           ref={ref}
           className={cn(
-            'h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background',
+            'h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)]',
             'placeholder:text-gray-500',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+            'focus-visible:outline-none',
             'disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
             'appearance-none pr-10',
             error
-              ? 'border-red-500 focus-visible:ring-red-500'
-              : 'border-gray-300 focus-visible:ring-[var(--cyan)]',
+              ? 'border-red-500'
+              : 'border-gray-300',
             className
           )}
           aria-invalid={error ? 'true' : undefined}

package/src/components/sheet.tsx

@@ -68,7 +68,7 @@ const SheetContent = React.forwardRef<
     >
       {children}
       {/* @ts-expect-error - Radix Dialog Close accepts className and children at runtime */}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-gray-100">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>

package/src/components/slider.tsx

@@ -56,8 +56,8 @@ const Slider = React.forwardRef<
         </SliderPrimitive.Track>
         <SliderPrimitive.Thumb
           className={cn(
-            'block rounded-full border-2 border-[var(--cyan)] bg-white shadow-md ring-offset-background transition-colors',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--cyan)] focus-visible:ring-offset-2',
+            'block rounded-full border-2 border-[var(--cyan)] bg-white shadow-md transition-colors',
+            'focus-visible:outline-none',
             'disabled:pointer-events-none disabled:opacity-50',
             'hover:border-[var(--cyan-dark,#00bfaa)] cursor-pointer',
             sizeStyles[size].thumb

package/src/components/support-chat.tsx

@@ -0,0 +1,236 @@
+'use client'
+
+import { useState, useEffect, useRef, useCallback, ReactNode } from 'react'
+import { Button } from './button'
+import { Textarea } from './textarea'
+import {
+  CircleNotch,
+  PaperPlaneTilt,
+} from '@phosphor-icons/react'
+
+// ============================================
+// Types
+// ============================================
+
+export interface SupportChatMessage {
+  id: string
+  role: 'customer' | 'admin' | 'system'
+  content: string
+  type: 'message' | 'event' | 'suggestion'
+  created_at: string
+  metadata?: Record<string, unknown>
+}
+
+export interface SupportChatProps {
+  /** Fetch messages from this endpoint */
+  messagesEndpoint: string
+  /** POST new messages to this endpoint */
+  sendEndpoint: string
+  /** Role of the current user */
+  currentRole: 'customer' | 'admin'
+  /** Poll interval in ms (0 to disable). Default: 5000 */
+  pollInterval?: number
+  /** Placeholder for the input */
+  placeholder?: string
+  /** Custom empty state */
+  emptyMessage?: string | ReactNode
+  /** Additional CSS class */
+  className?: string
+}
+
+// ============================================
+// Helpers
+// ============================================
+
+function formatMessageTime(dateStr: string): string {
+  const d = new Date(dateStr)
+  const now = new Date()
+  const diffMs = now.getTime() - d.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+
+  if (diffMins < 1) return 'just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
+}
+
+// ============================================
+// Component
+// ============================================
+
+export function SupportChat({
+  messagesEndpoint,
+  sendEndpoint,
+  currentRole,
+  pollInterval = 5000,
+  placeholder = 'Type a message...',
+  emptyMessage = 'No messages yet. Start the conversation!',
+  className = '',
+}: SupportChatProps) {
+  const [messages, setMessages] = useState<SupportChatMessage[]>([])
+  const [loading, setLoading] = useState(true)
+  const [sending, setSending] = useState(false)
+  const [inputValue, setInputValue] = useState('')
+  const scrollRef = useRef<HTMLDivElement>(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 {
+      // Silently fail
+    } finally {
+      setLoading(false)
+    }
+  }, [messagesEndpoint])
+
+  // Initial fetch + polling
+  useEffect(() => {
+    fetchMessages()
+    if (pollInterval > 0) {
+      const interval = setInterval(fetchMessages, pollInterval)
+      return () => clearInterval(interval)
+    }
+  }, [fetchMessages, pollInterval])
+
+  // Auto-scroll when new messages arrive
+  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('')
+
+    // Optimistic update
+    const optimisticMsg: SupportChatMessage = {
+      id: `temp-${Date.now()}`,
+      role: currentRole,
+      content,
+      type: 'message',
+      created_at: 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) {
+        // Replace optimistic message with real one
+        await fetchMessages()
+      } else {
+        // Remove optimistic message on failure
+        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: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className={`flex items-center justify-center py-8 ${className}`}>
+        <CircleNotch className="w-5 h-5 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  return (
+    <div className={`flex flex-col ${className}`}>
+      {/* Messages area */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto space-y-3 mb-4 max-h-[400px] min-h-[200px] px-1">
+        {messages.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-sm text-muted-foreground py-8">
+            {typeof emptyMessage === 'string' ? <p>{emptyMessage}</p> : emptyMessage}
+          </div>
+        ) : (
+          messages.map((msg) => {
+            // System events — centered, subtle
+            if (msg.type === 'event' || msg.role === 'system') {
+              return (
+                <div key={msg.id} className="flex justify-center">
+                  <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">
+                    {msg.content}
+                    <span className="ml-2 opacity-60">{formatMessageTime(msg.created_at)}</span>
+                  </div>
+                </div>
+              )
+            }
+
+            // Regular messages
+            const isCurrentUser = msg.role === currentRole
+            return (
+              <div key={msg.id} className={`flex ${isCurrentUser ? 'justify-end' : 'justify-start'}`}>
+                <div className={`max-w-[80%] rounded-lg px-3 py-2 ${
+                  isCurrentUser
+                    ? 'bg-[var(--cyan)] text-white'
+                    : 'bg-gray-100 text-[var(--black)]'
+                }`}>
+                  {!isCurrentUser && (
+                    <p className="text-xs font-medium mb-0.5 opacity-70">
+                      {msg.role === 'admin' ? 'Dilipod Team' : 'You'}
+                    </p>
+                  )}
+                  <p className="text-sm whitespace-pre-wrap">{msg.content}</p>
+                  <p className={`text-[10px] mt-1 ${isCurrentUser ? 'text-white/60' : 'text-muted-foreground'}`}>
+                    {formatMessageTime(msg.created_at)}
+                  </p>
+                </div>
+              </div>
+            )
+          })
+        )}
+      </div>
+
+      {/* Input area */}
+      <div className="flex gap-2 border-t border-gray-100 pt-3">
+        <Textarea
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          rows={1}
+          className="resize-none min-h-[36px] py-2 flex-1"
+        />
+        <Button
+          onClick={handleSend}
+          disabled={sending || !inputValue.trim()}
+          size="sm"
+          className="flex-shrink-0 h-9"
+        >
+          {sending ? (
+            <CircleNotch className="w-4 h-4 animate-spin" />
+          ) : (
+            <PaperPlaneTilt className="w-4 h-4" weight="bold" />
+          )}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default SupportChat

package/src/components/switch.tsx

@@ -32,7 +32,7 @@ const Switch = React.forwardRef<
   return (
     <SwitchPrimitive.Root
       className={cn(
-        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--cyan)] data-[state=unchecked]:bg-input',
+        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--cyan)] data-[state=unchecked]:bg-input',
         sizeStyles[size].root,
         className
       )}

package/src/components/tabs.tsx

@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
       className
     )}
     {...props}
@@ -43,7 +43,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'mt-2 focus-visible:outline-none',
       className
     )}
     {...props}

package/src/components/textarea.tsx

@@ -14,10 +14,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors resize-none',
+          'flex min-h-[80px] w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors resize-none',
           error
-            ? 'border-red-500 focus-visible:ring-red-500'
-            : 'border-gray-300 focus-visible:ring-[var(--cyan)]',
+            ? 'border-red-500'
+            : 'border-gray-300',
           className
         )}
         ref={ref}

package/src/components/toast.tsx

@@ -63,7 +63,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      'inline-flex h-8 shrink-0 items-center justify-center rounded-sm border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-sm border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-gray-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50',
       className
     )}
     {...props}

package/src/index.ts

@@ -281,6 +281,10 @@ export type { ImpactMetrics, ImpactMetricsFormProps } from './components/impact-
 export { ActivityTimeline } from './components/activity-timeline'
 export type { Activity, ActivityTimelineProps } from './components/activity-timeline'
 
+// Support Chat Components
+export { SupportChat } from './components/support-chat'
+export type { SupportChatMessage, SupportChatProps } from './components/support-chat'
+
 // Workflow Components
 export { WorkflowFlow } from './components/workflow-flow'
 export type { WorkflowFlowProps, N8nWorkflow as WorkflowFlowN8nWorkflow, N8nNode } from './components/workflow-flow'

package/src/styles/globals.css

@@ -241,10 +241,9 @@ a:not([disabled]), button:not([disabled]) {
   cursor: pointer;
 }
 
-/* Better focus styles */
+/* Remove default focus outline */
 *:focus-visible {
-  outline: 2px solid hsl(var(--ring));
-  outline-offset: 2px;
+  outline: none;
 }
 
 /* Smooth scroll */