@dilipod/ui 0.4.23 → 0.4.25

package/package.json

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

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/worker-spec.tsx

@@ -19,14 +19,45 @@ import {
   Sparkle,
   Lightbulb,
   Robot,
+  MagnifyingGlass,
+  FilmStrip,
+  FileText,
+  TextT,
+  VideoCamera,
+  ImageSquare,
 } from '@phosphor-icons/react'
 import { FlowchartDiagram } from './flowchart-diagram'
 import { Badge } from './badge'
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from './dialog'
 
 // ============================================
 // Types
 // ============================================
 
+export interface AnalysisSource {
+  type: string
+  name: string
+  size: number
+  insights?: string[]
+  processing_time_ms?: number
+}
+
+export interface AnalysisSummary {
+  total_sources: number
+  video_count: number
+  document_count: number
+  image_count: number
+  total_insights: number
+  analyzed_at: string
+}
+
 export interface WorkerSpecDocumentation {
   scope: string | null
   goal: string | null
@@ -50,6 +81,9 @@ export interface WorkerSpecDocumentation {
     scenario: string
     handling: string
   }> | null
+  analysis_sources: AnalysisSource[] | null
+  analysis_summary: AnalysisSummary | null
+  analysis_context: string | null
   version: number
   model_used: string | null
   updated_at: string
@@ -109,6 +143,47 @@ function SectionHeader({
   )
 }
 
+// ============================================
+// Analysis Context Renderer
+// ============================================
+
+function AnalysisContextRenderer({ content }: { content: string }) {
+  const sections = content.split(/^## /gm).filter(Boolean)
+
+  const getIcon = (title: string) => {
+    if (title.includes('Request')) return <Target size={14} className="text-[var(--cyan)]" />
+    if (title.includes('Video')) return <VideoCamera size={14} className="text-[var(--cyan)]" />
+    if (title.includes('Document')) return <FileText size={14} className="text-[var(--cyan)]" />
+    if (title.includes('Rules')) return <Lightbulb size={14} className="text-amber-500" />
+    if (title.includes('Context')) return <TextT size={14} className="text-[var(--cyan)]" />
+    return null
+  }
+
+  return (
+    <div className="space-y-6">
+      {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 (
+          <div key={index}>
+            <h4 className="text-sm font-medium text-[var(--black)] flex items-center gap-2 mb-3">
+              {getIcon(title)}
+              {title}
+            </h4>
+            <div className="text-sm text-muted-foreground pl-5 space-y-2 whitespace-pre-line">
+              {body}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
 // ============================================
 // Main Component
 // ============================================
@@ -153,9 +228,89 @@ export function WorkerSpec({ documentation, className }: WorkerSpecProps) {
     ? frequencyLabels[documentation.expected_impact.frequency] || documentation.expected_impact.frequency
     : 'occurrence'
 
+  const hasAnalysis = documentation.analysis_context || (documentation.analysis_sources && documentation.analysis_sources.length > 0)
+
   return (
     <div className={className}>
       <div className="space-y-5">
+        {/* What was analyzed */}
+        {hasAnalysis && (
+          <div>
+            <Dialog>
+              <DialogTrigger asChild>
+                <button className="flex items-center gap-2 text-sm font-medium text-[var(--cyan)] hover:text-[var(--cyan)]/80 transition-colors">
+                  <MagnifyingGlass size={16} />
+                  What was analyzed
+                  {documentation.analysis_summary && (
+                    <span className="text-xs text-muted-foreground font-normal">
+                      ({documentation.analysis_summary.total_sources} source{documentation.analysis_summary.total_sources !== 1 ? 's' : ''})
+                    </span>
+                  )}
+                  <CaretRight size={12} />
+                </button>
+              </DialogTrigger>
+              <DialogContent className="max-w-xl max-h-[80vh] overflow-y-auto">
+                <DialogHeader>
+                  <DialogTitle>What was analyzed</DialogTitle>
+                  {documentation.analysis_summary && (
+                    <DialogDescription className="flex items-center gap-4 text-xs">
+                      <span>{documentation.analysis_summary.total_sources} source{documentation.analysis_summary.total_sources !== 1 ? 's' : ''}</span>
+                      {documentation.analysis_summary.video_count > 0 && (
+                        <span className="flex items-center gap-1">
+                          <FilmStrip size={12} />
+                          {documentation.analysis_summary.video_count} video{documentation.analysis_summary.video_count !== 1 ? 's' : ''}
+                        </span>
+                      )}
+                      {documentation.analysis_summary.document_count > 0 && (
+                        <span className="flex items-center gap-1">
+                          <FileText size={12} />
+                          {documentation.analysis_summary.document_count} doc{documentation.analysis_summary.document_count !== 1 ? 's' : ''}
+                        </span>
+                      )}
+                    </DialogDescription>
+                  )}
+                </DialogHeader>
+
+                {/* Sources Section */}
+                {documentation.analysis_sources && documentation.analysis_sources.length > 0 && (
+                  <div className="space-y-2">
+                    <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Sources</h4>
+                    <div className="space-y-1.5">
+                      {documentation.analysis_sources.map((source, i) => (
+                        <div key={i} className="flex items-center gap-2 text-sm">
+                          <div className="flex-shrink-0 text-muted-foreground">
+                            {source.type === 'video' && <FilmStrip size={14} />}
+                            {(source.type === 'document' || source.type === 'pdf') && <FileText size={14} />}
+                            {source.type === 'spreadsheet' && <FileText size={14} />}
+                            {source.type === 'image' && <ImageSquare size={14} />}
+                            {source.type === 'description' && <TextT size={14} />}
+                          </div>
+                          <span className="truncate text-[var(--black)]">{source.name}</span>
+                          {source.size > 0 && (
+                            <span className="text-xs text-muted-foreground flex-shrink-0">
+                              {source.size > 1024 * 1024
+                                ? `${(source.size / 1024 / 1024).toFixed(1)}MB`
+                                : `${Math.round(source.size / 1024)}KB`}
+                            </span>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Analysis Details Section */}
+                {documentation.analysis_context && (
+                  <div className="border-t border-gray-100 pt-4 space-y-1">
+                    <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Analysis Details</h4>
+                    <AnalysisContextRenderer content={documentation.analysis_context} />
+                  </div>
+                )}
+              </DialogContent>
+            </Dialog>
+          </div>
+        )}
+
         {/* Goal */}
         {documentation.goal && (
           <div>

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'
@@ -295,7 +299,7 @@ export type {
 
 // Worker Spec Components
 export { WorkerSpec } from './components/worker-spec'
-export type { WorkerSpecProps, WorkerSpecDocumentation } from './components/worker-spec'
+export type { WorkerSpecProps, WorkerSpecDocumentation, AnalysisSource, AnalysisSummary } from './components/worker-spec'
 
 // Flowchart Diagram Components
 export { FlowchartDiagram } from './components/flowchart-diagram'