metabinaries 1.3.3

package/src/templates/feature-ai-chat.js

@@ -0,0 +1,1786 @@
+export const aiChatTemplates = {
+  'components/layout/AIChat.tsx': `'use client';
+import React, { useState, useCallback, useRef } from 'react';
+import { useAIChat } from '@/hooks/useAIChat';
+import { usePathname } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import AIQuestionPopup, { AIQuestionPopupRef } from './AIQuestionPopup';
+import { AIChatWidget } from './AIChatWidget';
+import { AIChatToggle } from './AIChatToggle';
+
+export const AIChat: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { messages, sendMessage } = useAIChat();
+  const popupRef = useRef<AIQuestionPopupRef>(null);
+  const pathname = usePathname();
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleQuestionClick = useCallback(
+    async (question: string) => {
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+
+      setTimeout(async () => {
+        try {
+          await sendMessage(question, undefined, {
+            sendText: true,
+            sendVoice: false,
+          });
+        } catch (error) {
+          console.error('Error sending question to AI:', error);
+        }
+      }, 100);
+    },
+    [isOpen, sendMessage]
+  );
+
+  const unreadCount = (messages || []).filter(
+    msg => msg.senderId === 'ai-assistant' && !msg.isAIResponse
+  ).length;
+  const t = useTranslations('aiQuestions');
+
+  const sampleQuestions = [
+    { id: 1, text: t('questions.meta'), icon: '🌟' },
+    { id: 2, text: t('questions.initials'), icon: '🌟' },
+    { id: 3, text: t('questions.hottorun'), icon: '🌟' },
+  ];
+
+  if (pathname.includes('/admin')) return null;
+
+  return (
+    <>
+      <AIChatToggle
+        isOpen={isOpen}
+        onToggle={handleToggle}
+        messageCount={unreadCount}
+      />
+      <AIChatWidget
+        isOpen={isOpen}
+        onToggle={handleToggle}
+        aiName={t('title') || 'AI Assistant'}
+        placeholder={t('placeholder') || 'Ask me anything...'}
+        emptyStateTitle={t('emptyStateTitle') || 'How can I help you today?'}
+        emptyStateSubtitle={t('emptyStateSubtitle') || 'I can answer questions, summarize text, and more.'}
+        disclaimer={t('disclaimer') || 'AI may produce inaccurate information.'}
+      />
+      <AIQuestionPopup
+        ref={popupRef}
+        isOpen={isOpen}
+        onToggle={handleToggle}
+        onQuestionClick={handleQuestionClick}
+        questions={sampleQuestions}
+        title={t('title')}
+        subtitle={t('subtitle')}
+        clickToAskText={t('clickToAsk')}
+      />
+    </>
+  );
+};`,
+
+  'components/layout/AIChatToggle.tsx': `'use client';
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Bot, MessageSquare } from 'lucide-react';
+import { useMediaQuery } from '@/hooks/use-media-query';
+import { cn } from '@/lib/utils';
+
+interface AIChatToggleProps {
+  isOpen: boolean;
+  onToggle: () => void;
+  messageCount?: number;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+export const AIChatToggle: React.FC<AIChatToggleProps> = ({
+  isOpen,
+  onToggle,
+  messageCount = 0,
+  icon,
+  className,
+}) => {
+  const isMobile = useMediaQuery('(max-width: 640px)');
+  const hasUnreadMessages = messageCount > 0;
+
+  return (
+    <Button
+      onClick={onToggle}
+      className={cn(
+        'fixed z-40 rounded-full shadow-2xl transition-all duration-300 border-2 border-white flex items-center justify-center overflow-visible',
+        'bg-blue-600 hover:bg-blue-700 text-white',
+        isMobile
+          ? 'bottom-6 right-6 w-14 h-14'
+          : 'bottom-8 right-8 w-20 h-20 hover:scale-110 active:scale-95',
+        isOpen && 'scale-90 opacity-0 pointer-events-none',
+        className
+      )}
+      disabled={isOpen}
+      aria-label={isOpen ? 'Close chat' : 'Open chat'}
+    >
+      <div className='relative flex items-center justify-center w-full h-full'>
+        {icon || (isMobile ? <MessageSquare className='w-7 h-7' /> : <Bot className='w-12 h-12' />)}
+
+        {hasUnreadMessages && (
+          <span
+            className={cn(
+              'absolute bg-red-500 text-white font-bold rounded-full flex items-center justify-center border-2 border-white shadow-sm',
+              isMobile
+                ? '-top-1 -right-1 w-5 h-5 text-[10px]'
+                : '-top-1 -right-1 w-6 h-6 text-xs'
+            )}
+          >
+            {messageCount > 9 ? '9+' : messageCount}
+          </span>
+        )}
+
+        {hasUnreadMessages && !isOpen && (
+          <span
+            className='absolute inset-0 rounded-full border-2 border-red-500 animate-ping opacity-40'
+            aria-hidden='true'
+          />
+        )}
+      </div>
+    </Button>
+  );
+};`,
+
+  'components/layout/AIChatWidget.tsx': `'use client';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react';
+import { useAIChat } from '@/hooks/useAIChat';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Send,
+  Bot,
+  X,
+  RotateCcw,
+  Mic,
+  MicOff,
+  Volume2,
+  VolumeX,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useMediaQuery } from '@/hooks/use-media-query';
+import { AudioPlayer } from '@/components/ui/audio-player';
+import { useTranslations } from 'next-intl';
+import { useConfirmation } from '@/components/ui/confirmation-dialog';
+
+interface AIChatWidgetProps {
+  isOpen: boolean;
+  onToggle: () => void;
+  aiName?: string;
+  assistantIcon?: React.ReactNode;
+  placeholder?: string;
+  emptyStateTitle?: string;
+  emptyStateSubtitle?: string;
+  disclaimer?: string;
+}
+
+export const AIChatWidget: React.FC<AIChatWidgetProps> = ({
+  isOpen,
+  onToggle,
+  aiName = 'AI Assistant',
+  assistantIcon = <Bot className='w-5 h-5' />,
+  placeholder = 'Type your message...',
+  emptyStateTitle = 'How can I help you today?',
+  emptyStateSubtitle = 'I can answer questions, summarize text, and more.',
+  disclaimer = 'AI may produce inaccurate information.',
+}) => {
+  const t = useTranslations('aiChat');
+  const [inputValue, setInputValue] = useState('');
+  const [isRecording, setIsRecording] = useState(false);
+  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
+  const [voiceEnabled, setVoiceEnabled] = useState(false);
+  const [isRequestingPermission, setIsRequestingPermission] = useState(false);
+  const [dialogConfig, setDialogConfig] = useState<{
+    title: string;
+    description: string;
+    confirmText: string;
+    cancelText: string;
+    variant: 'danger' | 'warning' | 'info' | 'success';
+  }>({
+    title: '',
+    description: '',
+    confirmText: '',
+    cancelText: '',
+    variant: 'danger',
+  });
+  const {
+    messages,
+    isLoading,
+    isTyping,
+    sendMessage,
+    clearConversation,
+    error,
+    isConnected,
+  } = useAIChat();
+  const { confirm, ConfirmDialog } = useConfirmation();
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  const startRecording = useCallback(async () => {
+    try {
+      setIsRequestingPermission(true);
+      if (!window.MediaRecorder || !navigator.mediaDevices?.getUserMedia) {
+        throw new Error('Voice recording is not supported in this browser.');
+      }
+
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+        },
+      });
+
+      setIsRequestingPermission(false);
+
+      const supportedTypes = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4'];
+      let mimeType = supportedTypes.find(type => MediaRecorder.isTypeSupported(type)) || '';
+
+      const mediaRecorder = new MediaRecorder(stream, { mimeType });
+      mediaRecorderRef.current = mediaRecorder;
+      audioChunksRef.current = [];
+
+      mediaRecorder.ondataavailable = event => {
+        if (event.data.size > 0) audioChunksRef.current.push(event.data);
+      };
+
+      mediaRecorder.onstop = () => {
+        const blob = new Blob(audioChunksRef.current, { type: mimeType });
+        setAudioBlob(blob);
+        stream.getTracks().forEach(track => track.stop());
+      };
+
+      mediaRecorder.start(1000);
+      setIsRecording(true);
+    } catch (err: any) {
+      setIsRequestingPermission(false);
+      console.error('Recording error:', err);
+      setDialogConfig({
+        title: t('micErrorTitle') || 'Microphone Error',
+        description: err.message || t('micErrorDesc') || 'Microphone access denied',
+        confirmText: t('ok') || 'OK',
+        cancelText: t('cancel') || 'Cancel',
+        variant: 'warning',
+      });
+      await confirm();
+    }
+  }, [confirm, t]);
+
+  const stopRecording = useCallback(() => {
+    if (mediaRecorderRef.current && isRecording) {
+      mediaRecorderRef.current.stop();
+      setIsRecording(false);
+    }
+  }, [isRecording]);
+
+  const handleSendVoiceMessage = useCallback(async () => {
+    if (!audioBlob) return;
+    try {
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const base64Audio = (reader.result as string).split(',')[1];
+        await sendMessage('', base64Audio, {
+          sendText: true,
+          sendVoice: voiceEnabled,
+        });
+        setAudioBlob(null);
+      };
+      reader.readAsDataURL(audioBlob);
+    } catch (err) {
+      console.error('Error sending voice:', err);
+    }
+  }, [audioBlob, sendMessage, voiceEnabled]);
+
+  const handleSendMessage = useCallback(async () => {
+    if (!inputValue.trim() || isTyping) return;
+    const msg = inputValue.trim();
+    setInputValue('');
+    await sendMessage(msg, undefined, {
+      sendText: true,
+      sendVoice: voiceEnabled,
+    });
+  }, [inputValue, isTyping, sendMessage, voiceEnabled]);
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  const handleClearConversation = useCallback(async () => {
+    if (messages.length === 0) return;
+    setDialogConfig({
+      title: t('confirmClearTitle') || 'Clear Conversation',
+      description:
+        t('confirmClear') ||
+        'Are you sure you want to clear the conversation history? This action cannot be undone.',
+      confirmText: t('clear') || 'Clear',
+      cancelText: t('cancel') || 'Cancel',
+      variant: 'danger',
+    });
+    const confirmed = await confirm();
+    if (confirmed) {
+      await clearConversation();
+    }
+  }, [clearConversation, confirm, messages.length, t]);
+
+  const sortedMessages = useMemo(() => {
+    return [...(messages || [])].sort(
+      (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+    );
+  }, [messages]);
+
+  const isAIMessage = (message: any) =>
+    message.isAIResponse || message.senderId === 'ai-assistant';
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={cn(
+        'fixed z-50 bg-white rounded-lg shadow-2xl border border-gray-200 flex flex-col transition-all duration-300',
+        isMobile
+          ? 'bottom-0 inset-x-0 h-[80vh] rounded-b-none'
+          : 'bottom-6 right-6 w-96 h-[600px] overflow-hidden'
+      )}
+    >
+      {/* Header */}
+      <div className='flex items-center justify-between p-4 border-b border-gray-100 bg-white text-gray-900'>
+        <div className='flex items-center gap-3'>
+          <div className='relative'>
+            <div className='w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-full flex items-center justify-center shadow-md'>
+              {assistantIcon}
+            </div>
+            <div className={cn(
+              'absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-white',
+              isConnected ? 'bg-green-500' : 'bg-gray-400'
+            )} />
+          </div>
+          <div>
+            <h3 className='font-bold text-sm'>{aiName}</h3>
+            <p className='text-[10px] text-gray-500 uppercase tracking-widest font-medium'>
+              {isConnected ? (t('online') || 'Online') : (t('offline') || 'Offline')}
+            </p>
+          </div>
+        </div>
+
+        <div className='flex items-center gap-1'>
+          <Button onClick={handleClearConversation} variant='ghost' size='icon' className='h-8 w-8 text-gray-400 hover:text-red-500' disabled={messages.length === 0}>
+            <RotateCcw className='w-4 h-4' />
+          </Button>
+          <Button onClick={() => setVoiceEnabled(!voiceEnabled)} variant='ghost' size='icon' className={cn('h-8 w-8', voiceEnabled ? 'text-blue-600' : 'text-gray-400')}>
+            {voiceEnabled ? <Volume2 className='w-4 h-4' /> : <VolumeX className='w-4 h-4' />}
+          </Button>
+          <Button onClick={onToggle} variant='ghost' size='icon' className='h-8 w-8 text-gray-400'>
+            <X className='w-4 h-4' />
+          </Button>
+        </div>
+      </div>
+
+      <ScrollArea className='flex-1 p-4 bg-gray-50/50'>
+        <div className='space-y-4'>
+          {sortedMessages.length === 0 && !isLoading && (
+            <div className='text-center py-12 px-6'>
+              <div className='w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4'>
+                <Bot className='w-8 h-8 text-blue-500' />
+              </div>
+              <h4 className='text-gray-900 font-bold mb-1'>{emptyStateTitle}</h4>
+              <p className='text-xs text-gray-500'>{emptyStateSubtitle}</p>
+            </div>
+          )}
+
+          {sortedMessages.map((msg, i) => (
+            <div key={i} className={cn('flex gap-2', isAIMessage(msg) ? 'justify-start' : 'justify-end')}>
+              {isAIMessage(msg) && (
+                <Avatar className='h-7 w-7 mt-1 border'>
+                  <AvatarFallback className='bg-blue-50 text-blue-600'><Bot className='h-4 w-4' /></AvatarFallback>
+                </Avatar>
+              )}
+              <div className={cn(
+                'max-w-[80%] px-4 py-2.5 rounded-2xl text-sm shadow-sm transition-all',
+                isAIMessage(msg)
+                  ? 'bg-white text-gray-800 rounded-tl-none border border-gray-100'
+                  : 'bg-blue-600 text-white rounded-tr-none'
+              )}>
+                <p className='leading-relaxed'>{msg.text}</p>
+                {msg.hasVoiceResponse && msg.voiceUrl && (
+                  <div className='mt-2'><AudioPlayer audioUrl={msg.voiceUrl} size='sm' /></div>
+                )}
+                {!isAIMessage(msg) && msg.userVoiceUrl && (
+                  <div className='mt-2'><AudioPlayer audioUrl={msg.userVoiceUrl} size='sm' /></div>
+                )}
+                <span className={cn('text-[9px] mt-1 block opacity-50', isAIMessage(msg) ? 'text-gray-500' : 'text-white')}>
+                  {new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                </span>
+              </div>
+            </div>
+          ))}
+
+          {isTyping && (
+            <div className='flex gap-2 justify-start'>
+              <Avatar className='h-7 w-7 border'><AvatarFallback className='bg-blue-50'><Bot className='h-4 w-4 text-blue-500' /></AvatarFallback></Avatar>
+              <div className='bg-white border border-gray-100 rounded-2xl rounded-tl-none px-4 py-2.5 shadow-sm'>
+                <div className='flex gap-1'><span className='w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce'></span><span className='w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce delay-100'></span><span className='w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce delay-200'></span></div>
+              </div>
+            </div>
+          )}
+          <div ref={messagesEndRef} />
+        </div>
+      </ScrollArea>
+
+      <div className='p-4 border-t border-gray-100'>
+        {isRecording ? (
+          <div className='flex items-center justify-between bg-red-50 p-3 rounded-xl border border-red-100 animate-pulse'>
+            <div className='flex items-center gap-3 text-red-600 text-sm font-medium'>
+              <Mic className='w-4 h-4' /> Recording...
+            </div>
+            <Button onClick={stopRecording} size='sm' variant='ghost' className='text-red-600 hover:bg-red-100 h-8 w-8 p-0'><X className='w-4 h-4' /></Button>
+          </div>
+        ) : audioBlob ? (
+          <div className='flex items-center gap-2 bg-blue-50 p-2 rounded-xl border border-blue-100'>
+            <div className='flex-1'><AudioPlayer audioUrl={URL.createObjectURL(audioBlob)} size='sm' /></div>
+            <Button onClick={handleSendVoiceMessage} size='icon' className='rounded-full bg-blue-600 hover:bg-blue-700 h-9 w-9'><Send className='w-4 h-4' /></Button>
+            <Button onClick={() => setAudioBlob(null)} variant='ghost' size='icon' className='h-8 w-8 text-gray-400'><X className='w-4 h-4' /></Button>
+          </div>
+        ) : (
+          <div className='flex gap-2 items-center'>
+            <Input
+              ref={inputRef}
+              value={inputValue}
+              onChange={e => setInputValue(e.target.value)}
+              onKeyDown={handleKeyPress}
+              placeholder={placeholder}
+              disabled={isLoading}
+              className='flex-1 h-11 border-gray-200 focus-visible:ring-blue-500 rounded-xl text-black'
+            />
+            <div className='flex items-center gap-1'>
+              <Button
+                onClick={startRecording}
+                disabled={isLoading || isRequestingPermission}
+                size='icon'
+                variant='ghost'
+                className={cn('rounded-full h-10 w-10 text-gray-400 hover:text-blue-600 hover:bg-blue-50', isRequestingPermission && 'animate-spin')}
+              >
+                {isRequestingPermission ? <div className='w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full' /> : <Mic className='w-5 h-5' />}
+              </Button>
+              <Button
+                onClick={handleSendMessage}
+                disabled={!inputValue.trim() || isLoading}
+                size='icon'
+                className='rounded-full bg-blue-600 hover:bg-blue-700 h-10 w-10 shadow-lg shadow-blue-200'
+              >
+                <Send className='w-4 h-4' />
+              </Button>
+            </div>
+          </div>
+        )}
+        <p className='text-[10px] text-gray-400 mt-3 text-center px-4 leading-tight'>{disclaimer}</p>
+      </div>
+
+      <ConfirmDialog
+        title={dialogConfig.title}
+        description={dialogConfig.description}
+        confirmText={dialogConfig.confirmText}
+        cancelText={dialogConfig.cancelText}
+        variant={dialogConfig.variant}
+      />
+    </div>
+  );
+};`,
+
+  'components/layout/AIQuestionPopup.tsx': `'use client';
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import { Button } from '@/components/ui/button';
+import { X, Bot, Pause, Play } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface AIQuestion {
+  id: string | number;
+  text: string;
+  icon?: string;
+}
+
+interface AIQuestionPopupProps {
+  isOpen: boolean;
+  onToggle: () => void;
+  onQuestionClick: (question: string) => void;
+  questions: AIQuestion[];
+  title?: string;
+  subtitle?: string;
+  clickToAskText?: string;
+  initialDelay?: number;
+  intervalDelay?: number;
+  displayDuration?: number;
+}
+
+export interface AIQuestionPopupRef {
+  handleManualTrigger: () => void;
+}
+
+export const AIQuestionPopup = forwardRef<
+  AIQuestionPopupRef,
+  AIQuestionPopupProps
+>(
+  (
+    {
+      isOpen,
+      onToggle,
+      onQuestionClick,
+      questions,
+      title = 'AI Assistant',
+      subtitle = 'Ask me anything!',
+      clickToAskText = 'Click to ask',
+      initialDelay = 10000,
+      intervalDelay = 30000,
+      displayDuration = 8000,
+    },
+    ref
+  ) => {
+    const [currentQuestion, setCurrentQuestion] = useState<AIQuestion | null>(
+      null
+    );
+    const [isVisible, setIsVisible] = useState(false);
+    const [showInterval, setShowInterval] = useState<NodeJS.Timeout | null>(
+      null
+    );
+    const [lastShown, setLastShown] = useState<Date | null>(null);
+    const [isPaused, setIsPaused] = useState(false);
+
+    const getRandomQuestion = useCallback(() => {
+      if (!questions || questions.length === 0) return null;
+      const randomIndex = Math.floor(Math.random() * questions.length);
+      return questions[randomIndex];
+    }, [questions]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        handleManualTrigger: () => {
+          const question = getRandomQuestion();
+          if (question) {
+            setCurrentQuestion(question);
+            setIsVisible(true);
+            setLastShown(new Date());
+          }
+        },
+      }),
+      [getRandomQuestion]
+    );
+
+    useEffect(() => {
+      if (isPaused || !questions || questions.length === 0) return;
+
+      const showPopup = () => {
+        if (isOpen) return;
+
+        const question = getRandomQuestion();
+        if (question) {
+          setCurrentQuestion(question);
+          setIsVisible(true);
+          setLastShown(new Date());
+        }
+      };
+
+      const initialTimer = setTimeout(showPopup, initialDelay);
+      const interval = setInterval(showPopup, intervalDelay);
+      setShowInterval(interval);
+
+      return () => {
+        clearTimeout(initialTimer);
+        clearInterval(interval);
+      };
+    }, [isPaused, isOpen, questions, getRandomQuestion, initialDelay, intervalDelay]);
+
+    useEffect(() => {
+      if (isOpen && isVisible) {
+        setIsVisible(false);
+        setCurrentQuestion(null);
+      }
+    }, [isOpen, isVisible]);
+
+    useEffect(() => {
+      if (isVisible && currentQuestion) {
+        const hideTimer = setTimeout(() => {
+          setIsVisible(false);
+          setCurrentQuestion(null);
+        }, displayDuration);
+
+        return () => clearTimeout(hideTimer);
+      }
+    }, [isVisible, currentQuestion, displayDuration]);
+
+    const handleQuestionClick = useCallback(
+      (question: string) => {
+        onQuestionClick(question);
+        setIsVisible(false);
+        setCurrentQuestion(null);
+      },
+      [onQuestionClick]
+    );
+
+    const handleClose = useCallback(() => {
+      setIsVisible(false);
+      setCurrentQuestion(null);
+    }, []);
+
+    const handlePause = useCallback(() => {
+      setIsPaused(!isPaused);
+      if (showInterval && !isPaused) {
+        clearInterval(showInterval);
+        setShowInterval(null);
+      }
+    }, [isPaused, showInterval]);
+
+    if (!isVisible || !currentQuestion) return null;
+
+    return (
+      <div className='fixed z-50 bottom-32 md:bottom-38 md:right-12 right-4 pointer-events-none max-w-[350px] sm:max-w-xs'>
+        <div className='bg-white rounded-2xl shadow-2xl border border-gray-200 pointer-events-auto animate-fade-in-up relative'>
+          <div className='absolute -bottom-2 right-6 w-4 h-4 bg-white border-r border-b border-gray-200 transform rotate-45'></div>
+
+          <div className='flex items-center gap-3 p-4 border-b border-gray-100'>
+            <div className='relative'>
+              <div className='w-8 h-8 bg-gradient-to-r from-blue-900 to-blue-500 rounded-full flex items-center justify-center'>
+                <Bot className='w-4 h-4 text-white' />
+              </div>
+              <div className='absolute -top-1 -right-1 w-3 h-3 bg-blue-400 rounded-full border-2 border-white'></div>
+            </div>
+            <div className='flex-1'>
+              <p className='text-sm font-medium text-gray-900'>{title}</p>
+              <p className='text-xs text-gray-500'>{subtitle}</p>
+            </div>
+            <div className='flex items-center gap-1'>
+              <Button
+                variant='ghost'
+                size='sm'
+                onClick={handlePause}
+                className='p-1 h-6 w-6 text-gray-400 hover:text-gray-600'
+                title={isPaused ? 'Resume notifications' : 'Pause notifications'}
+              >
+                {isPaused ? <Play className='w-3 h-3' /> : <Pause className='w-3 h-3' />}
+              </Button>
+              <Button
+                variant='ghost'
+                size='sm'
+                onClick={handleClose}
+                className='p-1 h-6 w-6 text-gray-400 hover:text-gray-600'
+              >
+                <X className='w-3 h-3' />
+              </Button>
+            </div>
+          </div>
+
+          <div className='p-2'>
+            <Button
+              variant='outline'
+              className='justify-start text-left h-auto p-3 border-gray-200 hover:border-blue-600 hover:bg-blue-50 transition-colors bg-gray-50 w-full min-h-0'
+              onClick={() => handleQuestionClick(currentQuestion.text)}
+            >
+              <div className='flex items-start gap-3 w-full'>
+                {currentQuestion.icon && (
+                  <span className='text-lg flex-shrink-0 mt-0.5'>{currentQuestion.icon}</span>
+                )}
+                <span className='break-words leading-relaxed text-gray-700 text-xs sm:text-sm flex-1 overflow-hidden'>
+                  {currentQuestion.text}
+                </span>
+              </div>
+            </Button>
+          </div>
+
+          <div className='px-4 pb-3'>
+            <div className='flex items-center justify-between text-xs text-gray-400'>
+              <span>{clickToAskText}</span>
+              {lastShown && (
+                <span>
+                  {lastShown.toLocaleTimeString([], {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                  })}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+AIQuestionPopup.displayName = 'AIQuestionPopup';
+export default AIQuestionPopup;`,
+
+  'components/ui/audio-player.tsx': `'use client';
+import React, { useState, useRef } from 'react';
+import { Play, Pause, Volume2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface AudioPlayerProps {
+  audioUrl: string;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const AudioPlayer: React.FC<AudioPlayerProps> = ({
+  audioUrl,
+  className = '',
+  size = 'md',
+}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  const sizeClasses = {
+    sm: 'h-10 px-3',
+    md: 'h-12 px-4',
+    lg: 'h-14 px-5',
+  };
+
+  const formatTime = (time: number) => {
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return \`\${minutes}:\${seconds.toString().padStart(2, '0')}\`;
+  };
+
+  const togglePlay = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  const handleTimeUpdate = () => {
+    if (audioRef.current) {
+      setCurrentTime(audioRef.current.currentTime);
+    }
+  };
+
+  const handleLoadedMetadata = () => {
+    if (audioRef.current) {
+      const duration = audioRef.current.duration;
+      if (isFinite(duration) && duration > 0) {
+        setDuration(duration);
+      }
+    }
+  };
+
+  const handleEnded = () => {
+    setIsPlaying(false);
+    setCurrentTime(0);
+  };
+
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (audioRef.current && duration > 0) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const percentage = clickX / rect.width;
+      const newTime = percentage * duration;
+      audioRef.current.currentTime = newTime;
+      setCurrentTime(newTime);
+    }
+  };
+
+  return (
+    <div className={cn('bg-gray-50 rounded-lg border flex items-center gap-3', sizeClasses[size], className)}>
+      <button
+        onClick={togglePlay}
+        className='flex-shrink-0 w-8 h-8 rounded-full bg-blue-500 hover:bg-blue-600 text-white flex items-center justify-center transition-colors'
+      >
+        {isPlaying ? <Pause size={16} /> : <Play size={16} />}
+      </button>
+
+      <div className='flex-1 flex flex-col gap-1'>
+        <div
+          className='w-full h-2 bg-gray-200 rounded-full cursor-pointer relative'
+          onClick={handleProgressClick}
+        >
+          <div
+            className='h-full bg-blue-500 rounded-full transition-all'
+            style={{ width: \`\${duration > 0 ? (currentTime / duration) * 100 : 0}%\` }}
+          />
+        </div>
+        <div className='flex justify-between text-xs text-gray-500'>
+          <span>{formatTime(currentTime)}</span>
+          <span>{formatTime(duration)}</span>
+        </div>
+      </div>
+      <Volume2 size={16} className='text-gray-400 flex-shrink-0' />
+      <audio
+        ref={audioRef}
+        src={audioUrl}
+        onTimeUpdate={handleTimeUpdate}
+        onLoadedMetadata={handleLoadedMetadata}
+        onEnded={handleEnded}
+      />
+    </div>
+  );
+};`,
+
+  'hooks/useAIChat.ts': `'use client';
+import { useAIChatStore } from '@/store/features/aiChat/useAIChatStore';
+import type { AIMessage } from '@/services/ai-service';
+
+interface UseAIChatReturn {
+  messages: AIMessage[];
+  isLoading: boolean;
+  isTyping: boolean;
+  sendMessage: (
+    text: string,
+    audioUrl?: string,
+    replyConfig?: { sendText: boolean; sendVoice: boolean }
+  ) => Promise<void>;
+  clearConversation: () => Promise<void>;
+  error: string | null;
+  isConnected: boolean;
+  forceLoadMessages: () => Promise<any>;
+}
+
+export const useAIChat = (): UseAIChatReturn => {
+  return useAIChatStore();
+};`,
+
+  'hooks/use-media-query.ts': `import { useState, useEffect } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+
+    const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
+    mediaQuery.addEventListener('change', handler);
+
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, [query]);
+
+  return matches;
+}`,
+
+  'services/ai-service.ts': `import { api } from '@/lib/axios';
+
+export interface AIMessage {
+  _id: string;
+  text: string;
+  senderId: string;
+  receiverId: string;
+  image?: string;
+  isAIResponse?: boolean;
+  isError?: boolean;
+  hasVoiceResponse?: boolean;
+  voiceUrl?: string;
+  userVoiceUrl?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+class AIService {
+  private baseURL = '/api/ai';
+
+  async sendMessage(text: string): Promise<{ success: boolean }> {
+    try {
+      const response = await api.post(\`\${this.baseURL}/send\`, { text });
+      return response.data.data;
+    } catch (error) {
+      console.error('Error sending message to AI:', error);
+      throw error;
+    }
+  }
+
+  async getMessages(): Promise<AIMessage[]> {
+    try {
+      const response = await api.get(\`\${this.baseURL}/messages\`);
+      return response.data.data;
+    } catch (error) {
+      console.error('Error getting AI messages:', error);
+      throw error;
+    }
+  }
+
+  async clearConversation(): Promise<{ success: boolean }> {
+    try {
+      const response = await api.delete(\`\${this.baseURL}/clear\`);
+      return response.data.data;
+    } catch (error) {
+      console.error('Error clearing AI conversation:', error);
+      throw error;
+    }
+  }
+}
+
+export const aiService = new AIService();
+export default aiService;`,
+
+  'services/shared-socket-service.ts': `import { io, Socket } from 'socket.io-client';
+
+let socket: Socket | null = null;
+let isConnected = false;
+let currentUserId: string | null = null;
+let reconnectionDisabled = false;
+let isSettingUp = false;
+
+export const setupSocket = (userId: string): Socket => {
+  if (isSettingUp) return socket || io();
+  if (socket && socket.connected && currentUserId === userId) return socket;
+  if (socket && currentUserId === userId && !socket.connected && !reconnectionDisabled) {
+    socket.connect();
+    return socket;
+  }
+
+  if (socket) {
+    socket.removeAllListeners();
+    socket.disconnect();
+    socket = null;
+    isConnected = false;
+  }
+
+  isSettingUp = true;
+  let socketUrl = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:5000';
+  socketUrl = socketUrl.replace('/api', '').replace(/\\/$/, '');
+
+  socket = io(socketUrl, {
+    path: '/socket.io/',
+    withCredentials: true,
+    transports: ['polling', 'websocket'],
+    timeout: 20000,
+    query: { userId },
+    auth: { userId },
+    reconnection: true,
+    reconnectionAttempts: 5,
+    forceNew: true,
+  });
+
+  currentUserId = userId;
+  isSettingUp = false;
+
+  socket.on('connect', () => {
+    isConnected = true;
+    reconnectionDisabled = false;
+    socket?.emit('registerUser', userId);
+  });
+
+  socket.on('disconnect', reason => {
+    isConnected = false;
+    if (reason === 'io server disconnect' || reason === 'transport close') {
+      reconnectionDisabled = true;
+    }
+  });
+
+  return socket;
+};
+
+export const getSocket = () => socket;
+export const isSocketConnected = () => socket?.connected || false;
+export const emit = (event: string, data?: any) => {
+  if (socket && isConnected) socket.emit(event, data);
+};
+export const on = (event: string, callback: (data: any) => void) => socket?.on(event, callback);
+export const off = (event: string, callback?: (data: any) => void) => {
+  if (callback) socket?.off(event, callback);
+  else socket?.off(event);
+};
+export const disconnect = () => {
+  if (socket) {
+    socket.disconnect();
+    socket = null;
+    isConnected = false;
+  }
+};`,
+
+  'store/features/aiChat/aiChatSlice.ts': `import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import aiService, { type AIMessage } from '@/services/ai-service';
+import { RootState } from './index';
+
+interface AIChatState {
+  messages: AIMessage[];
+  isLoading: boolean;
+  isTyping: boolean;
+  error: string | null;
+  isConnected: boolean;
+  messagesLoaded: boolean;
+  lastLoadSource: 'socket' | 'rest' | null;
+}
+
+const initialState: AIChatState = {
+  messages: [],
+  isLoading: false,
+  isTyping: false,
+  error: null,
+  isConnected: false,
+  messagesLoaded: false,
+  lastLoadSource: null,
+};
+
+export const loadMessages = createAsyncThunk('aiChat/loadMessages', async (_, { rejectWithValue }) => {
+  try { return await aiService.getMessages() || []; }
+  catch (error: any) { return rejectWithValue(error.message); }
+});
+
+export const clearConversation = createAsyncThunk('aiChat/clearConversation', async (_, { rejectWithValue }) => {
+  try { await aiService.clearConversation(); }
+  catch (error) { return rejectWithValue('Failed to clear conversation'); }
+});
+
+const aiChatSlice = createSlice({
+  name: 'aiChat',
+  initialState,
+  reducers: {
+    addMessage: (state, action) => {
+      if (!state.messages) state.messages = [];
+      if (!state.messages.some(m => m._id === action.payload._id)) state.messages.push(action.payload);
+    },
+    setMessages: (state, action) => { state.messages = action.payload; state.messagesLoaded = true; },
+    setMessagesFromSocket: (state, action) => { state.messages = action.payload; state.messagesLoaded = true; state.lastLoadSource = 'socket'; },
+    setMessagesFromRest: (state, action) => { if (state.lastLoadSource !== 'socket') { state.messages = action.payload; state.messagesLoaded = true; state.lastLoadSource = 'rest'; } },
+    setTyping: (state, action) => { state.isTyping = action.payload; },
+    setConnected: (state, action) => { state.isConnected = action.payload; },
+    setError: (state, action) => { state.error = action.payload; },
+    clearError: state => { state.error = null; },
+    resetMessagesState: state => { Object.assign(state, initialState); },
+  },
+  extraReducers: builder => {
+    builder
+      .addCase(loadMessages.pending, state => { state.isLoading = true; })
+      .addCase(loadMessages.fulfilled, (state, action) => { state.isLoading = false; if (state.lastLoadSource !== 'socket') { state.messages = action.payload; state.messagesLoaded = true; state.lastLoadSource = 'rest'; } })
+      .addCase(loadMessages.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; })
+      .addCase(clearConversation.fulfilled, state => { state.isLoading = false; state.messages = []; });
+  },
+});
+
+export const { addMessage, setMessages, setMessagesFromSocket, setMessagesFromRest, setTyping, setConnected, setError, clearError, resetMessagesState } = aiChatSlice.actions;
+export const selectMessages = (state: RootState) => state.aiChat?.messages || [];
+export const selectIsLoading = (state: RootState) => state.aiChat?.isLoading || false;
+export const selectIsTyping = (state: RootState) => state.aiChat?.isTyping || false;
+export const selectError = (state: RootState) => state.aiChat?.error || null;
+export const selectIsConnected = (state: RootState) => state.aiChat?.isConnected || false;
+export const selectMessagesLoaded = (state: RootState) => state.aiChat?.messagesLoaded || false;
+export const selectLastLoadSource = (state: RootState) => state.aiChat?.lastLoadSource || null;
+export default aiChatSlice.reducer;`,
+
+  'store/features/aiChat/index.ts': `import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import aiChatReducer from './aiChatSlice';
+
+export interface RootState {
+  aiChat: ReturnType<typeof aiChatReducer>;
+}
+
+const rootReducer = combineReducers({
+  aiChat: aiChatReducer,
+});
+
+let storeInstance: ReturnType<typeof configureStore> | undefined;
+
+export const createStore = () => {
+  if (typeof window === 'undefined') {
+    return configureStore({ reducer: rootReducer, middleware: gdm => gdm({ serializableCheck: false }) });
+  }
+  if (!storeInstance) {
+    storeInstance = configureStore({ reducer: rootReducer, middleware: gdm => gdm({ serializableCheck: false }) });
+  }
+  return storeInstance;
+};
+
+export const store = createStore();
+export type AppDispatch = typeof store.dispatch;`,
+
+  'store/features/aiChat/Provider.tsx': `'use client';
+import { Provider } from 'react-redux';
+import { store } from './index';
+import { useEffect, useState } from 'react';
+
+export function StoreProvider({ children }: { children: React.ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return <Provider store={store}>{children}</Provider>;
+}`,
+
+  'store/features/aiChat/useAIChatStore.ts': `'use client';
+import { useCallback, useEffect, useRef, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setupSocket, emit, on, off, isSocketConnected } from '@/services/shared-socket-service';
+import {
+  addMessage,
+  setMessages,
+  setMessagesFromSocket,
+  setTyping,
+  setConnected,
+  setError,
+  clearError,
+  loadMessages,
+  clearConversation,
+  resetMessagesState,
+  selectMessages,
+  selectIsLoading,
+  selectIsTyping,
+  selectError,
+  selectIsConnected,
+  selectMessagesLoaded,
+  selectLastLoadSource,
+} from './aiChatSlice';
+import type { AIMessage } from '@/services/ai-service';
+import { AppDispatch } from './index';
+
+const getGuestId = () => {
+  if (typeof window === 'undefined') return null;
+  let id = localStorage.getItem('ai_chat_guest_id');
+  if (!id) {
+    id = \`guest_\${Math.random().toString(36).substring(2, 11)}_\${Date.now()}\`;
+    localStorage.setItem('ai_chat_guest_id', id);
+  }
+  return id;
+};
+
+export const useAIChatStore = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const guestId = useMemo(() => getGuestId(), []);
+  const effectiveId = guestId;
+
+  const messages = useSelector(selectMessages);
+  const isLoading = useSelector(selectIsLoading);
+  const isTyping = useSelector(selectIsTyping);
+  const error = useSelector(selectError);
+  const isConnected = useSelector(selectIsConnected);
+  const messagesLoaded = useSelector(selectMessagesLoaded);
+  const lastLoadSource = useSelector(selectLastLoadSource);
+
+  const prevIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (prevIdRef.current && prevIdRef.current !== effectiveId) dispatch(resetMessagesState());
+    prevIdRef.current = effectiveId;
+  }, [effectiveId, dispatch]);
+
+  const normalizeMessage = useCallback((msg: any): AIMessage => ({
+    ...msg,
+    isAIResponse: msg.isAIResponse ?? ['000000000000000000000001', 'ai-assistant'].includes(msg.senderId),
+    isError: !!msg.isError,
+  }), []);
+
+  useEffect(() => {
+    if (!effectiveId) return;
+    setupSocket(effectiveId);
+
+    const onConnect = () => {
+      dispatch(setConnected(true));
+      dispatch(clearError());
+      emit('getAIConversationHistory', effectiveId);
+      setTimeout(() => { if (!messagesLoaded) dispatch(loadMessages() as any); }, 3000);
+    };
+
+    on('connected', onConnect);
+    on('chatMessages', (msg: any) => {
+      const normalized = normalizeMessage(msg);
+      if (normalized.isAIResponse) { dispatch(setTyping(false)); dispatch(addMessage(normalized)); }
+    });
+    on('aiConversationHistory', (history: any[]) => {
+      if (Array.isArray(history)) dispatch(setMessagesFromSocket(history.map(normalizeMessage)));
+    });
+
+    if (isSocketConnected()) onConnect();
+    return () => { off('connected'); off('chatMessages'); off('aiConversationHistory'); };
+  }, [effectiveId, normalizeMessage, dispatch, messagesLoaded]);
+
+  const sendMessage = useCallback(async (text: string, audioUrl?: string, config?: any) => {
+    if (!text.trim() && !audioUrl) return;
+
+    // Force Demo Mode logic
+    dispatch(clearError());
+    dispatch(setTyping(true));
+
+    const userMsg = {
+      _id: \`opt-\${Date.now()}\`,
+      text: text || 'Voice',
+      senderId: effectiveId || 'guest',
+      receiverId: 'ai-assistant',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      isAIResponse: false,
+      hasVoiceResponse: false,
+      isError: false
+    };
+
+    dispatch(addMessage(userMsg as any));
+
+    setTimeout(() => {
+      dispatch(setTyping(false));
+      const aiMsg = {
+        _id: \`ai-\${Date.now()}\`,
+        text: "I am currently in offline demo mode. To get real AI responses, please ensure the backend is connected.",
+        senderId: 'ai-assistant',
+        receiverId: effectiveId || 'guest',
+        isAIResponse: true,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        hasVoiceResponse: false,
+        isError: false
+      };
+      dispatch(addMessage(aiMsg as any));
+    }, 1500);
+  }, [effectiveId, dispatch]);
+
+  const handleClearConversation = useCallback(async () => {
+    // Demo/Offline mode clear
+    dispatch(resetMessagesState());
+  }, [dispatch]);
+
+  return { messages, isLoading, isTyping, error, isConnected, sendMessage, clearConversation: handleClearConversation, forceLoadMessages: () => dispatch(loadMessages() as any) };
+};`,
+
+  'components/layout/ChatInput.tsx': `'use client';
+import { useState, useRef } from 'react';
+import { SendHorizonal } from 'lucide-react';
+
+interface ChatInputProps {
+  onSend: (text: string) => void;
+  disabled?: boolean;
+}
+
+export const ChatInput: React.FC<ChatInputProps> = ({ onSend, disabled }) => {
+  const [value, setValue] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSend = () => {
+    if (value.trim()) {
+      onSend(value.trim());
+      setValue('');
+      inputRef.current?.focus();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSend();
+    }
+  };
+
+  return (
+    <div className='flex items-center rounded-xl gap-2 p-2 border-t bg-white'>
+      <input
+        ref={inputRef}
+        className='flex-1 px-3 py-2 rounded-lg border outline-none text-sm bg-gray-50'
+        type='text'
+        placeholder='Type your message...'
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+      />
+      <button
+        className='p-2 rounded-full bg-blue-600 text-white disabled:opacity-50'
+        onClick={handleSend}
+        disabled={disabled || !value.trim()}
+        aria-label='Send'
+      >
+        <SendHorizonal size={20} />
+      </button>
+    </div>
+  );
+};
+export default ChatInput;`,
+
+  'components/layout/ChatMessages.tsx': `'use client';
+import { useRef, useEffect } from 'react';
+
+interface Message {
+  text: string;
+  sender: 'user' | 'ai';
+  isAIResponse?: boolean;
+  isError?: boolean;
+}
+
+interface ChatMessagesProps {
+  messages: Message[];
+}
+
+export const ChatMessages: React.FC<ChatMessagesProps> = ({ messages }) => {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  return (
+    <div className='flex-1 overflow-y-auto px-4 py-2 space-y-2'>
+      {messages.map((msg, idx) => (
+        <div
+          key={idx}
+          className={\`max-w-[80%] rounded-lg px-3 py-2 text-sm shadow-sm \${
+            msg.isError
+              ? 'bg-red-100 text-red-700 self-center'
+              : msg.isAIResponse
+                ? 'bg-gray-100 text-gray-800 self-start mr-auto'
+                : 'bg-blue-600 text-white self-end ml-auto'
+          }\`}
+        >
+          {msg.text}
+        </div>
+      ))}
+      <div ref={bottomRef} />
+    </div>
+  );
+};
+export default ChatMessages;`,
+
+  'components/layout/ChatWidget.tsx': `'use client';
+import { useState } from 'react';
+import { X } from 'lucide-react';
+import ChatInput from './ChatInput';
+import ChatMessages from './ChatMessages';
+
+interface Message {
+  text: string;
+  sender: 'user' | 'ai';
+}
+
+const mockAIResponse = async (userText: string): Promise<string> => {
+  await new Promise(res => setTimeout(res, 800));
+  return \`AI: You said "\${userText}"\`;
+};
+
+export const ChatWidget = ({ onClose }: { onClose: () => void }) => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const handleSend = async (text: string) => {
+    setMessages(msgs => [...msgs, { text, sender: 'user' }]);
+    setLoading(true);
+    const aiText = await mockAIResponse(text);
+    setMessages(msgs => [...msgs, { text: aiText, sender: 'ai' }]);
+    setLoading(false);
+  };
+
+  return (
+    <div className='h-96 z-50 max-w-sm bg-white rounded-xl shadow-2xl flex flex-col border border-gray-200'>
+      <div className='flex items-center justify-between px-4 py-2 border-b bg-blue-600 rounded-t-xl'>
+        <span className='text-white font-semibold'>AI Chat</span>
+        <button
+          onClick={onClose}
+          className='text-white hover:text-red-400 p-1 rounded-full'
+        >
+          <X size={20} />
+        </button>
+      </div>
+      <ChatMessages messages={messages as any} />
+      <ChatInput onSend={handleSend} disabled={loading} />
+    </div>
+  );
+};
+export default ChatWidget;`,
+
+  'components/ui/confirmation-dialog.tsx': `'use client';
+
+import * as React from 'react';
+import {
+  AlertTriangle,
+  Trash2,
+  Edit,
+  Info,
+  CheckCircle,
+  Loader2,
+} from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+// Confirmation dialog variants
+export type ConfirmVariant = 'danger' | 'warning' | 'info' | 'success';
+
+// Variant configurations
+const variantConfig = {
+  danger: {
+    icon: Trash2,
+    iconColor: 'text-red-500',
+    iconBg: 'bg-red-50 dark:bg-red-900/20',
+    confirmButton: 'destructive',
+  },
+  warning: {
+    icon: AlertTriangle,
+    iconColor: 'text-amber-500',
+    iconBg: 'bg-amber-50 dark:bg-amber-900/20',
+    confirmButton: 'default',
+  },
+  info: {
+    icon: Info,
+    iconColor: 'text-blue-500',
+    iconBg: 'bg-blue-50 dark:bg-blue-900/20',
+    confirmButton: 'default',
+  },
+  success: {
+    icon: CheckCircle,
+    iconColor: 'text-green-500',
+    iconBg: 'bg-green-50 dark:bg-green-900/20',
+    confirmButton: 'default',
+  },
+};
+
+export interface ConfirmationDialogProps {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** Dialog title */
+  title: string;
+  /** Dialog description/message */
+  description: string;
+  /** Confirm button text */
+  confirmText?: string;
+  /** Cancel button text */
+  cancelText?: string;
+  /** Optional text that must be typed to enable confirmation */
+  requiredConfirmationText?: string;
+  /** Label for the confirmation input */
+  confirmationInputLabel?: string;
+  /** Callback when confirmed */
+  onConfirm: () => void | Promise<void>;
+  /** Callback when cancelled */
+  onCancel?: () => void;
+  /** Dialog variant - affects styling */
+  variant?: ConfirmVariant;
+  /** Whether the confirm action is loading */
+  isLoading?: boolean;
+  /** Custom icon component */
+  icon?: React.ComponentType<{ className?: string }>;
+  /** Whether to show the icon */
+  showIcon?: boolean;
+}
+
+export function ConfirmationDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  requiredConfirmationText,
+  confirmationInputLabel,
+  onConfirm,
+  onCancel,
+  variant = 'danger',
+  isLoading = false,
+  icon,
+  showIcon = true,
+}: ConfirmationDialogProps) {
+  const [inputValue, setInputValue] = React.useState('');
+  const config = variantConfig[variant];
+  const IconComponent = icon || config.icon;
+
+  const isConfirmDisabled =
+    isLoading ||
+    (!!requiredConfirmationText &&
+      inputValue.toLowerCase() !== requiredConfirmationText.toLowerCase());
+
+  // Reset input when dialog opens/closes
+  React.useEffect(() => {
+    if (!open) {
+      setInputValue('');
+    }
+  }, [open]);
+
+  const handleConfirm = async () => {
+    if (isConfirmDisabled) return;
+    await onConfirm();
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    onCancel?.();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className='sm:max-w-[420px] p-0 overflow-hidden border-zinc-200 dark:border-zinc-800 shadow-2xl'>
+        <div className='p-6 pt-8 space-y-6'>
+          <DialogHeader className='flex flex-col items-center text-center sm:text-center space-y-4'>
+            {showIcon && (
+              <div
+                className={cn(
+                  'rounded-2xl p-4 w-fit mx-auto transition-colors duration-300',
+                  config.iconBg
+                )}
+              >
+                <IconComponent className={cn('size-8', config.iconColor)} />
+              </div>
+            )}
+            <div className='space-y-2'>
+              <DialogTitle className='text-xl font-bold tracking-tight text-center'>
+                {title}
+              </DialogTitle>
+              <DialogDescription className='text-zinc-500 dark:text-zinc-400 text-sm leading-relaxed max-w-[320px] mx-auto text-center'>
+                {description}
+              </DialogDescription>
+            </div>
+          </DialogHeader>
+
+          {requiredConfirmationText && (
+            <div className='space-y-3 px-2'>
+              <Label className='text-xs font-semibold tracking-wider text-zinc-500 dark:text-zinc-400'>
+                {confirmationInputLabel ||
+                  \`Type "\${requiredConfirmationText}" to confirm\`}
+              </Label>
+              <Input
+                value={inputValue}
+                onChange={e => setInputValue(e.target.value)}
+                placeholder={requiredConfirmationText}
+                className='h-12 text-center font-medium border-2 focus-visible:ring-0 focus-visible:border-black dark:focus-visible:border-white transition-all'
+                autoFocus
+              />
+            </div>
+          )}
+
+          <DialogFooter className='flex flex-col sm:flex-row gap-3 sm:justify-stretch mt-2'>
+            <Button
+              variant='outline'
+              onClick={handleCancel}
+              disabled={isLoading}
+              className='flex-1 h-11 border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-all'
+            >
+              {cancelText}
+            </Button>
+            <Button
+              variant={variant === 'danger' ? 'destructive' : 'default'}
+              onClick={handleConfirm}
+              disabled={isConfirmDisabled}
+              className={cn(
+                'flex-1 h-11 font-semibold transition-all',
+                variant === 'danger' &&
+                !isConfirmDisabled &&
+                'bg-red-600 hover:bg-red-700'
+              )}
+            >
+              {isLoading ? (
+                <div className='flex items-center gap-2'>
+                  <Loader2 className='size-4 animate-spin' />
+                  <span>Processing...</span>
+                </div>
+              ) : (
+                confirmText
+              )}
+            </Button>
+          </DialogFooter>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export interface DeleteConfirmationProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void | Promise<void>;
+  itemName?: string;
+  isLoading?: boolean;
+  /** Optional text that must be typed to enable deletion (e.g. 'DELETE') */
+  requiredConfirmationText?: string;
+}
+
+export function DeleteConfirmation({
+  open,
+  onOpenChange,
+  onConfirm,
+  itemName = 'this item',
+  isLoading,
+  requiredConfirmationText,
+}: DeleteConfirmationProps) {
+  return (
+    <ConfirmationDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title='Delete Confirmation'
+      description={\`Are you sure you want to delete \${itemName}? This action cannot be undone.\`}
+      confirmText='Delete'
+      cancelText='Cancel'
+      requiredConfirmationText={requiredConfirmationText}
+      onConfirm={onConfirm}
+      variant='danger'
+      isLoading={isLoading}
+      icon={Trash2}
+    />
+  );
+}
+
+export interface EditConfirmationProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void | Promise<void>;
+  message?: string;
+  isLoading?: boolean;
+}
+
+export function EditConfirmation({
+  open,
+  onOpenChange,
+  onConfirm,
+  message = 'Are you sure you want to save these changes?',
+  isLoading,
+}: EditConfirmationProps) {
+  return (
+    <ConfirmationDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title='Confirm Changes'
+      description={message}
+      confirmText='Save Changes'
+      cancelText='Cancel'
+      onConfirm={onConfirm}
+      variant='warning'
+      isLoading={isLoading}
+      icon={Edit}
+    />
+  );
+}
+
+export interface UnsavedChangesConfirmationProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void | Promise<void>;
+  onCancel?: () => void;
+}
+
+export function UnsavedChangesConfirmation({
+  open,
+  onOpenChange,
+  onConfirm,
+  onCancel,
+}: UnsavedChangesConfirmationProps) {
+  return (
+    <ConfirmationDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title='Unsaved Changes'
+      description='You have unsaved changes. Are you sure you want to leave? Your changes will be lost.'
+      confirmText='Leave'
+      cancelText='Stay'
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      variant='warning'
+      icon={AlertTriangle}
+    />
+  );
+}
+
+export interface UseConfirmationReturn {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  confirm: () => Promise<boolean>;
+  ConfirmDialog: React.FC<
+    Omit<ConfirmationDialogProps, 'open' | 'onOpenChange' | 'onConfirm'>
+  >;
+}
+
+export function useConfirmation(): UseConfirmationReturn {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const resolveRef = React.useRef<(value: boolean) => void>(() => {
+    return;
+  });
+
+  const open = React.useCallback(() => setIsOpen(true), []);
+  const close = React.useCallback(() => setIsOpen(false), []);
+
+  const confirm = React.useCallback(() => {
+    setIsOpen(true);
+    return new Promise<boolean>(resolve => {
+      resolveRef.current = resolve;
+    });
+  }, []);
+
+  const handleConfirm = React.useCallback(() => {
+    resolveRef.current?.(true);
+    setIsOpen(false);
+  }, []);
+
+  const handleCancel = React.useCallback(() => {
+    resolveRef.current?.(false);
+    setIsOpen(false);
+  }, []);
+
+  const ConfirmDialog: React.FC<
+    Omit<ConfirmationDialogProps, 'open' | 'onOpenChange' | 'onConfirm'>
+  > = React.useCallback(
+    props => (
+      <ConfirmationDialog
+        {...props}
+        open={isOpen}
+        onOpenChange={open => {
+          if (!open) handleCancel();
+        }}
+        onConfirm={handleConfirm}
+        onCancel={handleCancel}
+      />
+    ),
+    [isOpen, handleConfirm, handleCancel]
+  );
+
+  return {
+    isOpen,
+    open,
+    close,
+    confirm,
+    ConfirmDialog,
+  };
+}`,
+};