xertica-ui 1.0.0

package/components/ModernChatInput.tsx

@@ -0,0 +1,502 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Send, Plus, Paperclip, Mic, FileText, Radio, Search, X } from 'lucide-react';
+import { Button } from './ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+import { toast } from 'sonner';
+
+export type ActionType = 'document' | 'podcast' | 'search' | null;
+
+interface ModernChatInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: (action?: ActionType) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  onFileUpload?: () => void;
+  onAudioUpload?: () => void;
+  onVoiceRecording?: (transcript: string) => void;
+  isFullPage?: boolean;
+}
+
+export function ModernChatInput({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Envie uma mensagem para Xertica",
+  disabled = false,
+  onFileUpload,
+  onAudioUpload,
+  onVoiceRecording,
+  isFullPage = false
+}: ModernChatInputProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [textareaHeight, setTextareaHeight] = useState(20);
+  const [selectedAction, setSelectedAction] = useState<ActionType>(null);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingTime, setRecordingTime] = useState(0);
+  const recordingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const adjustHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      // Reset to minimum height first
+      textarea.style.height = '20px';
+      
+      // Calculate new height based on content
+      const scrollHeight = textarea.scrollHeight;
+      const newHeight = Math.min(Math.max(scrollHeight, 20), 100);
+      
+      // Apply the new height smoothly
+      setTextareaHeight(newHeight);
+      textarea.style.height = newHeight + 'px';
+    }
+  };
+
+  // Initialize with proper height on mount
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      // Force initial height without content check
+      textarea.style.height = '20px';
+      setTextareaHeight(20);
+      
+      // If there's initial content, adjust immediately
+      if (value) {
+        setTimeout(adjustHeight, 0);
+      }
+    }
+  }, []); // Empty dependency array - only runs on mount
+
+  // Adjust height when value changes
+  useEffect(() => {
+    if (value === '') {
+      // Reset to minimum when empty
+      const textarea = textareaRef.current;
+      if (textarea) {
+        textarea.style.height = '20px';
+        setTextareaHeight(20);
+      }
+    } else {
+      // Adjust for content
+      const timeoutId = setTimeout(adjustHeight, 0);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [value]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (value.trim() && !disabled) {
+        onSubmit(selectedAction);
+        setSelectedAction(null);
+      }
+    }
+  };
+
+  const handleActionSelect = (action: ActionType) => {
+    setSelectedAction(action);
+    setIsPopoverOpen(false);
+  };
+
+  const handleRemoveAction = () => {
+    setSelectedAction(null);
+  };
+
+  const handleVoiceRecording = () => {
+    if (isRecording) {
+      // Parar gravação
+      if (recordingIntervalRef.current) {
+        clearInterval(recordingIntervalRef.current);
+        recordingIntervalRef.current = null;
+      }
+      
+      // Simular transcrição do áudio
+      const transcricoes = [
+        "Como posso analisar os dados de vendas do último trimestre?",
+        "Me ajude a criar um relatório sobre o desempenho da equipe",
+        "Quais são as principais tendências do mercado atual?",
+        "Preciso de insights sobre a satisfação dos clientes",
+        "Como posso melhorar a produtividade da minha equipe?",
+        "Me mostre um resumo das métricas mais importantes",
+        "Crie um documento sobre estratégias de marketing digital",
+        "Analise os dados de engajamento das redes sociais"
+      ];
+      
+      const transcricaoAleatoria = transcricoes[Math.floor(Math.random() * transcricoes.length)];
+      
+      // Chamar o callback com a transcrição
+      if (onVoiceRecording) {
+        onVoiceRecording(transcricaoAleatoria);
+      }
+      
+      setIsRecording(false);
+      setRecordingTime(0);
+    } else {
+      // Iniciar gravação
+      setIsRecording(true);
+      setRecordingTime(0);
+      
+      toast.info('Gravação iniciada', {
+        description: 'Fale sua pergunta ou comando. A gravação parará automaticamente em 60s.',
+        duration: 3000,
+      });
+      
+      recordingIntervalRef.current = setInterval(() => {
+        setRecordingTime(prev => prev + 1);
+      }, 1000);
+    }
+  };
+
+  // Parar gravação automaticamente após 60 segundos
+  useEffect(() => {
+    if (recordingTime >= 60 && isRecording) {
+      handleVoiceRecording();
+    }
+  }, [recordingTime, isRecording]);
+
+  // Limpar intervalo ao desmontar
+  useEffect(() => {
+    return () => {
+      if (recordingIntervalRef.current) {
+        clearInterval(recordingIntervalRef.current);
+      }
+    };
+  }, []);
+
+  const getActionInfo = (action: ActionType) => {
+    switch (action) {
+      case 'document':
+        return { label: 'Criar documento', icon: FileText, color: 'bg-[var(--chart-4)]' };
+      case 'podcast':
+        return { label: 'Gerar podcast', icon: Radio, color: 'bg-[var(--chart-1)]' };
+      case 'search':
+        return { label: 'Pesquisar', icon: Search, color: 'bg-[var(--chart-2)]' };
+      default:
+        return null;
+    }
+  };
+
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => setIsFocused(false);
+
+  const hasContent = value.trim().length > 0;
+
+  return (
+    <div className={`p-4 ${isFullPage ? 'mx-auto w-full max-w-6xl' : ''}`}>
+      {/* Recording Indicator */}
+      <AnimatePresence>
+        {isRecording && (
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            className="mb-3 p-4 bg-destructive/10 border border-destructive/30 rounded-[var(--radius-card)]"
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                {/* Pulsing Dot */}
+                <motion.div
+                  animate={{
+                    scale: [1, 1.2, 1],
+                    opacity: [1, 0.7, 1],
+                  }}
+                  transition={{
+                    duration: 1.5,
+                    repeat: Infinity,
+                    ease: "easeInOut"
+                  }}
+                  className="w-3 h-3 bg-destructive rounded-full"
+                />
+                
+                {/* Audio Waves Animation */}
+                <div className="flex items-center gap-1">
+                  {[0, 1, 2, 3, 4].map((i) => (
+                    <motion.div
+                      key={i}
+                      animate={{
+                        height: ['8px', '20px', '8px'],
+                      }}
+                      transition={{
+                        duration: 0.8,
+                        repeat: Infinity,
+                        ease: "easeInOut",
+                        delay: i * 0.1,
+                      }}
+                      className="w-1 bg-destructive rounded-full h-2"
+                    />
+                  ))}
+                </div>
+                
+                <span className="text-sm font-medium text-destructive">
+                  Gravando áudio
+                </span>
+              </div>
+              
+              <div className="flex items-center gap-3">
+                <div className="text-sm text-destructive font-mono tabular-nums">
+                  {Math.floor(recordingTime / 60)}:{(recordingTime % 60).toString().padStart(2, '0')}
+                </div>
+                <Button
+                  onClick={handleVoiceRecording}
+                  size="sm"
+                  variant="outline"
+                  className="h-7 px-3 text-xs border-destructive/30 text-destructive hover:bg-destructive/10 rounded-[var(--radius-button)]"
+                >
+                  Parar gravação
+                </Button>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Modern Input Container */}
+      <motion.div
+        className={`relative bg-card rounded-[var(--radius)] border shadow-sm transition-all duration-300 ${
+          isFocused || hasContent
+            ? 'border-primary shadow-lg shadow-primary/10'
+            : 'border-border'
+        }`}
+        initial={false}
+        animate={{
+          scale: isFocused ? 1.01 : 1,
+        }}
+        transition={{ duration: 0.2, ease: "easeOut" }}
+      >
+        <div className="px-3 py-2 pt-[14px] pr-[10px] pb-[8px] pl-[10px] rounded-[var(--radius)]">
+          {/* Action Chip */}
+          <AnimatePresence>
+            {selectedAction && (
+              <motion.div
+                initial={{ opacity: 0, y: -10, height: 0 }}
+                animate={{ opacity: 1, y: 0, height: 'auto' }}
+                exit={{ opacity: 0, y: -10, height: 0 }}
+                transition={{ duration: 0.2 }}
+                className="mb-2"
+              >
+                {(() => {
+                  const actionInfo = getActionInfo(selectedAction);
+                  if (!actionInfo) return null;
+                  const Icon = actionInfo.icon;
+                  return (
+                    <div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full ${actionInfo.color} text-white text-xs font-medium shadow-sm`}>
+                      <Icon className="w-3.5 h-3.5" />
+                      <span>{actionInfo.label}</span>
+                      <button
+                        onClick={handleRemoveAction}
+                        className="ml-1 hover:bg-white/20 rounded-full p-0.5 transition-colors"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    </div>
+                  );
+                })()}
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* Text Input - Full Width */}
+          <div className="mb-2">
+            <textarea
+              ref={textareaRef}
+              value={value}
+              onChange={(e) => onChange(e.target.value)}
+              onKeyDown={handleKeyDown}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              placeholder={placeholder}
+              disabled={disabled}
+              className="w-full bg-transparent border-0 outline-none resize-none text-foreground placeholder-muted-foreground text-sm leading-5 min-h-[20px] max-h-[100px] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent"
+              style={{
+                height: `${textareaHeight}px`,
+                minHeight: '20px',
+                maxHeight: '100px',
+              }}
+              rows={1}
+            />
+          </div>
+
+          {/* Actions Row - Bottom */}
+          <div className="flex items-center justify-between">
+            {/* Left Actions */}
+            <div className="flex items-center gap-1">
+              <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+                <PopoverTrigger asChild>
+                  <motion.div
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                  >
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0 rounded-full text-muted-foreground hover:bg-accent hover:text-foreground transition-all duration-200"
+                    >
+                      <Plus className="w-4 h-4" />
+                    </Button>
+                  </motion.div>
+                </PopoverTrigger>
+                <PopoverContent 
+                  className="w-56 p-2" 
+                  align="start"
+                  side="top"
+                >
+                  <div className="space-y-1">
+                    <button
+                      onClick={() => handleActionSelect('document')}
+                      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
+                    >
+                      <div className="w-8 h-8 rounded-full bg-[var(--chart-4)]/20 flex items-center justify-center group-hover:bg-[var(--chart-4)] transition-colors">
+                        <FileText className="w-4 h-4 text-[var(--chart-4)] group-hover:text-white" />
+                      </div>
+                      <div className="flex-1">
+                        <div className="text-sm font-medium text-foreground">
+                          Criar documento
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          Gerar um documento completo
+                        </div>
+                      </div>
+                    </button>
+                    
+                    <button
+                      onClick={() => handleActionSelect('podcast')}
+                      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
+                    >
+                      <div className="w-8 h-8 rounded-full bg-[var(--chart-1)]/20 flex items-center justify-center group-hover:bg-[var(--chart-1)] transition-colors">
+                        <Radio className="w-4 h-4 text-[var(--chart-1)] group-hover:text-white" />
+                      </div>
+                      <div className="flex-1">
+                        <div className="text-sm font-medium text-foreground">
+                          Gerar podcast
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          Criar um podcast em áudio
+                        </div>
+                      </div>
+                    </button>
+                    
+                    <button
+                      onClick={() => handleActionSelect('search')}
+                      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
+                    >
+                      <div className="w-8 h-8 rounded-full bg-[var(--chart-2)]/20 flex items-center justify-center group-hover:bg-[var(--chart-2)] transition-colors">
+                        <Search className="w-4 h-4 text-[var(--chart-2)] group-hover:text-white" />
+                      </div>
+                      <div className="flex-1">
+                        <div className="text-sm font-medium text-foreground">
+                          Pesquisar
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          Buscar informações relevantes
+                        </div>
+                      </div>
+                    </button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+              
+              <motion.div
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onFileUpload}
+                  className="h-8 w-8 p-0 rounded-full text-muted-foreground hover:bg-accent hover:text-foreground transition-all duration-200"
+                >
+                  <Paperclip className="w-4 h-4" />
+                </Button>
+              </motion.div>
+            </div>
+
+            {/* Right Actions */}
+            <div className="flex items-center gap-1">
+              {/* Voice Recording Button */}
+              <motion.div
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleVoiceRecording}
+                  className={`h-8 w-8 p-0 rounded-full transition-all duration-200 ${
+                    isRecording 
+                      ? 'bg-destructive hover:bg-destructive/90 text-white animate-pulse' 
+                      : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                  }`}
+                >
+                  <Mic className="w-4 h-4" />
+                </Button>
+              </motion.div>
+              
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={hasContent ? 'active' : 'inactive'}
+                  initial={{ scale: 0.8, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  exit={{ scale: 0.8, opacity: 0 }}
+                  transition={{ duration: 0.2, ease: "easeInOut" }}
+                  whileHover={hasContent ? { scale: 1.05 } : {}}
+                  whileTap={hasContent ? { scale: 0.95 } : {}}
+                >
+                  <Button
+                    onClick={() => {
+                      onSubmit(selectedAction);
+                      setSelectedAction(null);
+                    }}
+                    size="sm"
+                    disabled={!hasContent || disabled}
+                    className={`h-8 w-8 p-0 rounded-full transition-all duration-300 ${
+                      hasContent && !disabled
+                        ? 'bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg shadow-primary/30 hover:shadow-primary/40'
+                        : 'bg-muted text-muted-foreground cursor-not-allowed'
+                    }`}
+                  >
+                    <motion.div
+                      animate={{
+                        rotate: hasContent ? 0 : -45,
+                      }}
+                      transition={{ duration: 0.2 }}
+                    >
+                      <Send className="w-4 h-4" />
+                    </motion.div>
+                  </Button>
+                </motion.div>
+              </AnimatePresence>
+            </div>
+          </div>
+        </div>
+
+        {/* Subtle glow effect when focused */}
+        <AnimatePresence>
+          {isFocused && (
+            <motion.div
+              className="absolute inset-0 rounded-[var(--radius)] bg-gradient-to-r from-primary/5 via-transparent to-primary/5 pointer-events-none"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+            />
+          )}
+        </AnimatePresence>
+      </motion.div>
+      
+      {/* Footer Info */}
+      <motion.div
+        className="mt-2 text-center"
+        initial={{ opacity: 0, y: 5 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <p className="text-xs text-muted-foreground">
+          O assistente Xertica pode cometer erros. Considere verificar informações importantes.
+        </p>
+      </motion.div>
+    </div>
+  );
+}