@digilogiclabs/create-saas-app 2.11.0 → 2.12.0

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

@@ -1,393 +0,0 @@
-'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>
-  )
-}