@digilogiclabs/create-saas-app 1.17.1 → 1.18.0

package/src/templates/web/ui-auth-payments-ai-rag/template/components/rag/RAGChatInterface.tsx

@@ -0,0 +1,393 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { Button } from '@digilogiclabs/saas-factory-ui'
+import { 
+  Send, 
+  Loader2, 
+  Copy, 
+  ThumbsUp, 
+  ThumbsDown, 
+  RefreshCw,
+  StopCircle,
+  Mic,
+  MicOff,
+  FileText,
+  ExternalLink,
+  Sparkles
+} from 'lucide-react'
+import { toast } from 'sonner'
+import { motion, AnimatePresence } from 'framer-motion'
+import type { UseRAGSystemReturn } from '../../hooks/useRAGSystem'
+import type { RAGResponse, RAGSearchResult } from '@digilogiclabs/saas-factory-ai-types'
+
+interface RAGChatInterfaceProps {
+  ragSystem: UseRAGSystemReturn<any>
+  enableStreaming?: boolean
+  showSources?: boolean
+  showConfidence?: boolean
+  onError?: (error: Error) => void
+  className?: string
+}
+
+interface Message {
+  id: string
+  type: 'user' | 'assistant'
+  content: string
+  sources?: RAGSearchResult[]
+  confidence?: number
+  timestamp: Date
+  isStreaming?: boolean
+}
+
+export function RAGChatInterface({
+  ragSystem,
+  enableStreaming = true,
+  showSources = true,
+  showConfidence = false,
+  onError,
+  className = ''
+}: RAGChatInterfaceProps) {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [input, setInput] = useState('')
+  const [isRecording, setIsRecording] = useState(false)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  // Handle streaming responses
+  useEffect(() => {
+    if (ragSystem.streamingState.isStreaming) {
+      setMessages(prev => {
+        const newMessages = [...prev]
+        const lastMessage = newMessages[newMessages.length - 1]
+        
+        if (lastMessage && lastMessage.type === 'assistant' && lastMessage.isStreaming) {
+          // Update existing streaming message
+          lastMessage.content = ragSystem.streamingState.currentResponse
+          lastMessage.sources = ragSystem.streamingState.sources
+          lastMessage.confidence = ragSystem.streamingState.confidence
+        } else {
+          // Create new streaming message
+          newMessages.push({
+            id: `streaming-${Date.now()}`,
+            type: 'assistant',
+            content: ragSystem.streamingState.currentResponse,
+            sources: ragSystem.streamingState.sources,
+            confidence: ragSystem.streamingState.confidence,
+            timestamp: new Date(),
+            isStreaming: true
+          })
+        }
+        
+        return newMessages
+      })
+    } else {
+      // Finalize streaming message
+      setMessages(prev => {
+        const newMessages = [...prev]
+        const lastMessage = newMessages[newMessages.length - 1]
+        
+        if (lastMessage && lastMessage.isStreaming) {
+          lastMessage.isStreaming = false
+        }
+        
+        return newMessages
+      })
+    }
+  }, [ragSystem.streamingState])
+
+  const handleSubmit = async (e?: React.FormEvent) => {
+    e?.preventDefault()
+    
+    if (!input.trim() || !ragSystem.canQuery) return
+
+    const userMessage: Message = {
+      id: `user-${Date.now()}`,
+      type: 'user',
+      content: input.trim(),
+      timestamp: new Date()
+    }
+
+    setMessages(prev => [...prev, userMessage])
+    setInput('')
+
+    try {
+      const response = await ragSystem.query(input.trim(), {
+        stream: enableStreaming,
+        includeMetadata: true
+      })
+
+      if (!enableStreaming) {
+        // Add assistant response for non-streaming
+        const assistantMessage: Message = {
+          id: `assistant-${Date.now()}`,
+          type: 'assistant',
+          content: response.response,
+          sources: response.sources,
+          confidence: response.confidence,
+          timestamp: new Date()
+        }
+
+        setMessages(prev => [...prev, assistantMessage])
+      }
+
+    } catch (error) {
+      console.error('Chat error:', error)
+      onError?.(error as Error)
+      
+      const errorMessage: Message = {
+        id: `error-${Date.now()}`,
+        type: 'assistant',
+        content: 'I apologize, but I encountered an error processing your request. Please try again.',
+        timestamp: new Date()
+      }
+
+      setMessages(prev => [...prev, errorMessage])
+    }
+  }
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSubmit()
+    }
+  }
+
+  const handleCopy = async (content: string) => {
+    try {
+      await navigator.clipboard.writeText(content)
+      toast.success('Copied to clipboard')
+    } catch (error) {
+      toast.error('Failed to copy')
+    }
+  }
+
+  const handleFeedback = (messageId: string, feedback: 'positive' | 'negative') => {
+    // Implementation for feedback tracking
+    toast.success(`Feedback recorded: ${feedback}`)
+  }
+
+  const handleStop = () => {
+    ragSystem.cancelOperation()
+  }
+
+  const renderMessage = (message: Message) => {
+    const isUser = message.type === 'user'
+    
+    return (
+      <motion.div
+        key={message.id}
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-4`}
+      >
+        <div className={`max-w-[80%] ${isUser ? 'order-2' : 'order-1'}`}>
+          {/* Message bubble */}
+          <div
+            className={`rounded-2xl px-4 py-3 ${
+              isUser
+                ? 'bg-blue-500 text-white'
+                : 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700'
+            }`}
+          >
+            <div className="whitespace-pre-wrap">
+              {message.content}
+              {message.isStreaming && (
+                <span className="inline-block w-2 h-5 bg-current animate-pulse ml-1" />
+              )}
+            </div>
+            
+            {/* Confidence score */}
+            {!isUser && showConfidence && message.confidence !== undefined && (
+              <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                Confidence: {Math.round(message.confidence * 100)}%
+              </div>
+            )}
+          </div>
+
+          {/* Sources */}
+          {!isUser && showSources && message.sources && message.sources.length > 0 && (
+            <div className="mt-3 space-y-2">
+              <p className="text-xs font-medium text-gray-600 dark:text-gray-400">
+                Sources:
+              </p>
+              <div className="space-y-1">
+                {message.sources.slice(0, 3).map((source, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center gap-2 text-xs p-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg"
+                  >
+                    <FileText className="w-3 h-3 text-gray-400" />
+                    <span className="flex-1 truncate">{source.title || source.content}</span>
+                    {source.score && (
+                      <span className="text-gray-500">
+                        {Math.round(source.score * 100)}%
+                      </span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Message actions */}
+          {!isUser && !message.isStreaming && (
+            <div className="flex items-center gap-1 mt-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleCopy(message.content)}
+                className="h-6 px-2"
+              >
+                <Copy className="w-3 h-3" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleFeedback(message.id, 'positive')}
+                className="h-6 px-2"
+              >
+                <ThumbsUp className="w-3 h-3" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleFeedback(message.id, 'negative')}
+                className="h-6 px-2"
+              >
+                <ThumbsDown className="w-3 h-3" />
+              </Button>
+            </div>
+          )}
+
+          {/* Timestamp */}
+          <div className={`text-xs text-gray-500 mt-1 ${isUser ? 'text-right' : 'text-left'}`}>
+            {message.timestamp.toLocaleTimeString()}
+          </div>
+        </div>
+      </motion.div>
+    )
+  }
+
+  return (
+    <div className={`flex flex-col h-full ${className}`}>
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+        <div className="flex items-center gap-2">
+          <Sparkles className="w-5 h-5 text-blue-500" />
+          <h3 className="font-semibold">AI Assistant</h3>
+          <div className={`w-2 h-2 rounded-full ${
+            ragSystem.isReady ? 'bg-green-500' : 'bg-yellow-500'
+          }`} />
+        </div>
+        
+        <div className="flex items-center gap-2">
+          {ragSystem.streamingState.isStreaming && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleStop}
+              className="text-red-500 border-red-200 hover:bg-red-50"
+            >
+              <StopCircle className="w-4 h-4 mr-1" />
+              Stop
+            </Button>
+          )}
+          
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setMessages([])}
+            disabled={ragSystem.isLoading}
+          >
+            <RefreshCw className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        <AnimatePresence>
+          {messages.length === 0 ? (
+            <div className="text-center text-gray-500 dark:text-gray-400 mt-8">
+              <Sparkles className="w-12 h-12 mx-auto mb-4 text-gray-300" />
+              <p className="text-lg font-medium mb-2">Welcome to your AI Knowledge Assistant</p>
+              <p className="text-sm">
+                Ask me anything about your knowledge base. I can help you find information,
+                analyze content, and provide insights.
+              </p>
+            </div>
+          ) : (
+            messages.map(renderMessage)
+          )}
+        </AnimatePresence>
+        
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+        <form onSubmit={handleSubmit} className="flex gap-2">
+          <div className="flex-1 relative">
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyPress={handleKeyPress}
+              placeholder={ragSystem.isReady ? "Ask me anything..." : "Initializing..."}
+              disabled={!ragSystem.canQuery}
+              className="w-full resize-none rounded-xl border border-gray-200 dark:border-gray-700 px-4 py-3 pr-12 focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 max-h-32"
+              rows={1}
+            />
+            
+            {/* Voice input button */}
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="absolute right-2 top-1/2 transform -translate-y-1/2"
+              onClick={() => setIsRecording(!isRecording)}
+              disabled={!ragSystem.canQuery}
+            >
+              {isRecording ? (
+                <MicOff className="w-4 h-4 text-red-500" />
+              ) : (
+                <Mic className="w-4 h-4" />
+              )}
+            </Button>
+          </div>
+          
+          <Button
+            type="submit"
+            disabled={!input.trim() || !ragSystem.canQuery || ragSystem.isLoading}
+            className="px-4 py-3"
+          >
+            {ragSystem.isLoading ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <Send className="w-4 h-4" />
+            )}
+          </Button>
+        </form>
+        
+        {/* Status indicator */}
+        <div className="flex items-center justify-between mt-2 text-xs text-gray-500">
+          <span>
+            {ragSystem.totalDocuments} documents • {ragSystem.queryHistory.length} recent queries
+          </span>
+          <span>
+            Press Enter to send, Shift+Enter for new line
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}