import React, { useState, useEffect, useRef } from 'react'; // ── 인라인 문의 폼 (AI 버블 내부) ────────────────────────────────── function InlineContactForm({ conversationId, setConversationId, initialShowPlan = false, onSwitchForm }) { // ── 스팸 방지: 허니팟 + 시간 체크 ── const [honeypot, setHoneypot] = useState(''); const [formLoadTime] = useState(Date.now()); const HONEYPOT_FIELD_NAME = 'contact_url_ref_x7k2'; // 랜덤화된 필드명 const MIN_SUBMIT_TIME_MS = 3000; // 3초 미만 제출 시 봇으로 판단 const CONFIG = { labels: { name: "이름 *", email: "이메일 주소 *", company: "회사명 *", phone: "전화번호 *", workspaceType: "원하시는 구독 플랜*", subject: "사용 목적 *", message: "문의 내용 *" }, placeholders: { name: "이름", email: "이메일", company: "회사명", phone: "전화번호", subject: "사용 목적", message: "문의 내용을 입력해 주세요" }, messages: { success: "문의 접수가 완료되었습니다.\n\n조직과 함께 진화하는 무한한 에이전 홈페이지 Gachi AI에 관심을 가져주셔서 감사합니다.\n남겨주신 내용은 담당자에게 즉시 전달되었으며, 검토 후 기재하신 연락처로 신속히 답변드리겠습니다.", requiredFields: "필수 항목을 모두 입력해 주세요.", invalidEmail: "유효한 이메일 주소를 입력해 주세요.", error: "전송 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.", }, }; const [formData, setFormData] = useState({ name: '', email: '', company: '', phone: '', workspaceType: '', subject: '', message: '' }); const [isLoading, setIsLoading] = useState(false); const [submitStatus, setSubmitStatus] = useState(null); // null | 'success' | 'error' const [statusMsg, setStatusMsg] = useState(''); const [personalEmailError, setPersonalEmailError] = useState(false); const FREE_EMAIL_DOMAINS = [ 'gmail.com','googlemail.com','yahoo.com','yahoo.co.kr','outlook.com','hotmail.com','live.com', 'naver.com','nate.com','daum.net','hanmail.net','kakao.com', 'icloud.com','me.com','mac.com','aol.com','protonmail.com','proton.me', 'zoho.com','yandex.com','mail.com','gmx.com','gmx.net', 'qq.com','163.com','126.com','sina.com','naver.com', ]; const isPersonalEmail = (email) => { const domain = email.split('@')[1]?.toLowerCase(); if (!domain) return false; return FREE_EMAIL_DOMAINS.includes(domain); }; const [formStartTime] = useState(Date.now()); const [showPlanAndPurpose, setShowPlanAndPurpose] = useState(initialShowPlan); const [billingTab, setBillingTab] = useState('monthly'); const [planExpanded, setPlanExpanded] = useState(false); const handleChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); if (name === 'email') { // 시작 신청하기 폼에서 이메일 입력 시 실시간 개인 이메일 감지 if (initialShowPlan && value.includes('@')) { setPersonalEmailError(isPersonalEmail(value)); } else { setPersonalEmailError(false); } } }; const sendToOfficenext = async (fd) => { try { const isApply = initialShowPlan; const tag = isApply ? '[GachiAI Sitebuilder 시작 신청 접수]' : '[GachiAI Sitebuilder 문의 접수]'; const header = isApply ? 'GachiAI Sitebuilder 시작 신청' : 'GachiAI Sitebuilder 문의'; let msg = `${tag}\n\n이름: ${fd.name}\n이메일: ${fd.email}\n회사명: ${fd.company || '미입력'}\n전화번호: ${fd.phone || '미입력'}`; if (isApply) { msg += `\n구독 플랜: ${fd.workspaceType || '미입력'}\n사용 목적: ${fd.subject || '미입력'}`; } msg += `\n\n문의내용: ${fd.message}`; await API.ToolCall('onext_notification_as_gachiai_fixed', { body: { whole: false, to: ['sbtmxk200@jiran.com'], template: 'text', type: 'static', important: isApply, items: { header: header, contents: msg, }, }, }); } catch (e) { console.error('OfficeNEXT 전송 실패:', e); } }; const handleSubmit = async (e) => { e.preventDefault(); if (isLoading || submitStatus === 'success') return; const { name, email, company, phone, workspaceType, message } = formData; // showPlanAndPurpose가 true일 때만 workspaceType 필수 검증 // ── 스팸 방지 검증 ── // 1) 허니팟: 숨겨진 필드에 값이 있으면 봇 if (honeypot) { console.warn('[Anti-spam] Honeypot triggered'); // 봇에게는 성공한 것처럼 보여줌 (재시도 방지) setSubmitStatus('success'); setStatusMsg(CONFIG.messages.success); return; } // 2) 시간 체크: 폼 로드 후 3초 미만이면 봇 const elapsedMs = Date.now() - formLoadTime; if (elapsedMs < MIN_SUBMIT_TIME_MS) { console.warn('[Anti-spam] Too fast submission:', elapsedMs, 'ms'); setSubmitStatus('success'); setStatusMsg(CONFIG.messages.success); return; } // ── 기존 필수 항목 검증 ── if (!name || !email || !company || !phone || !message || (showPlanAndPurpose && (!workspaceType || !formData.subject))) { setSubmitStatus('error'); setStatusMsg(CONFIG.messages.requiredFields); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setSubmitStatus('error'); setStatusMsg(CONFIG.messages.invalidEmail); return; } if (showPlanAndPurpose && isPersonalEmail(email)) { setPersonalEmailError(true); setSubmitStatus('error'); setStatusMsg('회사 이메일을 입력해 주세요.'); return; } setIsLoading(true); setSubmitStatus(null); try { const subject = formData.subject || '문의 폼 접수'; const body = `[GachiAI 홈페이지 문의 폼 접수]\n이름: ${name}\n이메일: ${email}\n회사명: ${company || '미입력'}\n전화번호: ${phone || '미입력'}\n구독 플랜: ${workspaceType || '미입력'}\n제목: ${subject}\n\n문의 내용:\n${message}`.trim(); await API.Site_SendEmailToAdmin(subject, body, Date.now() - formStartTime); await sendToOfficenext(formData); setSubmitStatus('success'); setStatusMsg(CONFIG.messages.success); } catch (err) { setSubmitStatus('error'); setStatusMsg(err.message?.includes('HTTP 403') ? '비정상적인 접근이 감지되었습니다.' : CONFIG.messages.error); } finally { setIsLoading(false); } }; const inp = { width: '100%', padding: '7px 10px', border: '1.5px solid #dbeafe', borderRadius: '8px', fontSize: '14px', color: '#1e293b', background: '#ffffff', outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.15s', }; const lbl = { display: 'block', fontSize: '12px', fontWeight: 600, color: '#3b82f6', marginBottom: '3px' }; return (

아래 양식을 작성해 주시면 담당자가 확인 후 연락드리겠습니다.

{/* 이름 + 이메일 */}

{CONFIG.labels.name} e.target.style.borderColor = '#2563eb'} onBlur={e => e.target.style.borderColor = '#dbeafe'} />

{CONFIG.labels.email} e.target.style.borderColor = '#2563eb'} onBlur={e => e.target.style.borderColor = '#dbeafe'} />

{/* 회사명 + 전화번호 */}

{CONFIG.labels.company} e.target.style.borderColor = '#2563eb'} onBlur={e => e.target.style.borderColor = '#dbeafe'} />

{CONFIG.labels.phone} e.target.style.borderColor = '#2563eb'} onBlur={e => e.target.style.borderColor = '#dbeafe'} />

{/* 구독 플랜 선택 (탭 + 카드) - showPlanAndPurpose일 때만 표시 */} {showPlanAndPurpose && (

{CONFIG.labels.workspaceType} {(() => { const plans = { monthly: [ { name: 'Free Trial', price: '체험', desc: '15일 체험', detail: '' }, { name: 'Basic', price: '100만원', strikePrice: '100만원', newPrice: '30만원', desc: '월간 / VAT 별도', detail: '' }, { name: 'Standard', price: '300만원', strikePrice: '300만원', newPrice: '100만원', desc: '월간 / VAT 별도', detail: '', popular: true }, { name: 'Max', price: '맞춤형', desc: '별도 협의', detail: '' }, ], yearly: [ { name: 'Free Trial', price: '체험', desc: '15일 체험', detail: 'AI Agent 제한 범위 내 사용' }, { name: 'Basic', price: '27만원', desc: '연 324만원 (10%↓) / VAT 별도', detail: '월 5,000 credit 포함' }, { name: 'Standard', price: '90만원', desc: '연 1,080만원 (10%↓) / VAT 별도', detail: '월 16,000 credit 포함', popular: true }, { name: 'Max', price: '맞춤형', desc: '별도 협의', detail: '월 사용 credit은\nStandard의 5~20배' }, ], }; const currentPlans = plans[billingTab]; const handleSelect = (plan) => { const billing = billingTab === 'monthly' ? '월간' : '연간'; const label = `${plan.name} (${billing}) - ${plan.price} / ${plan.desc} / ${plan.detail.replace('\n', ' ')}`; setFormData(prev => ({ ...prev, workspaceType: label })); }; return (

{/* 탭 */}

{[{ key: 'monthly', label: '가격' }, { key: 'consult', label: '상담 후 결정' }].map(tab => ( ))}

{/* 카드 그리드 - 접기/펼치기 */} {billingTab === 'consult' ? (

담당자와 상담 후 플랜을 결정하실 수 있습니다.
아래 문의 내용에 요구사항을 남겨주세요

) : (

{currentPlans.map((plan) => { const billing = billingTab === 'monthly' ? '월간' : '연간'; const selectedLabel = `${plan.name} (${billing}) - ${plan.price} / ${plan.desc} / ${plan.detail.replace('\n', ' ')}`; const isSelected = formData.workspaceType === selectedLabel; return (

handleSelect(plan)} style={{ position: 'relative', padding: '10px 8px', borderRadius: '10px', border: isSelected ? '2px solid #2563eb' : '1.5px solid #dbeafe', background: isSelected ? '#eff6ff' : '#ffffff', cursor: 'pointer', transition: 'all 0.15s', textAlign: 'center', overflow: 'hidden', }}> {plan.popular && (

인기

)}

{plan.name}

{plan.strikePrice ? ( <> {plan.strikePrice} {plan.newPrice} ) : plan.price}

{plan.desc}

{plan.detail.replace('\\n', '\n')}

{isSelected && (

)}

); })}

)}

); })()}

)} {/* 사용 목적 - showPlanAndPurpose일 때만 표시 */} {showPlanAndPurpose && (

{CONFIG.labels.subject} e.target.style.borderColor = '#2563eb'} onBlur={e => e.target.style.borderColor = '#dbeafe'} />

)} {/* 허니팟 필드 (봇만 채움 - 사람에게는 보이지 않음) */} {/* 문의 내용 */}

{CONFIG.labels.message}

e.target.style.borderColor = '#2563eb'}
          onBlur={e => e.target.style.borderColor = '#dbeafe'} />
      </div>

{/* 개인 이메일 안내 메시지 */}
      {personalEmailError && showPlanAndPurpose && (
        <div style={{
          padding: '14px 16px',
          borderRadius: '12px',
          fontSize: '13px',
          background: '#fffbeb',
          border: '1.5px solid #fcd34d',
          color: '#92400e',
          lineHeight: 1.7,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '8px', fontWeight: 700, fontSize: '14px', color: '#b45309' }}>
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
            </svg>
            회사 이메일이 필요합니다
          </div>
          <p style={{ margin: 0 }}>
            Gachi AI Sitebuilder는 기업 및 조직 단위 도입을 기준으로 제공되고 있습니다.
          </p>
          <p style={{ margin: '6px 0 0 0' }}>
            개인 이메일로는 현재 이용이 제한되며,<br/>
            회사 또는 팀 환경에서 검토 중이신 경우에만 이용이 가능합니다.
          </p>
          <p style={{ margin: '6px 0 0 0' }}>
            해당하시는 경우, 회사 이메일로 다시 신청해 주세요.
          </p>
        </div>
      )}

{/* 에러 메시지 */}
      {submitStatus === 'error' && (
        <div style={{ padding: '8px 10px', borderRadius: '8px', fontSize: '13px', background: '#fef2f2', border: '1px solid #fecaca', color: '#dc2626', display: 'flex', alignItems: 'center', gap: '5px' }}>
          <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
          </svg>
          {statusMsg}
        </div>
      )}

{/* 성공 메시지 */}
      {submitStatus === 'success' && (
        <div style={{ padding: '14px 16px', background: '#f0fdf4', borderRadius: '12px', border: '1px solid #bbf7d0', textAlign: 'center' }}>
          <div style={{ fontSize: '28px', marginBottom: '6px' }}>✅</div>
          <p style={{ fontSize: '13px', fontWeight: 600, color: '#16a34a', whiteSpace: 'pre-line', lineHeight: 1.7 }}>{statusMsg}</p>
        </div>
      )}

{/* 제출 버튼 */}
      <button type="submit" disabled={isLoading}
        style={{
          width: '100%', padding: '9px',
          borderRadius: '9px', border: 'none',
          background: isLoading ? '#93c5fd' : '#1d4ed8',
          color: '#ffffff', fontSize: '14px', fontWeight: 700,
          cursor: isLoading ? 'not-allowed' : 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '5px',
          transition: 'background 0.15s',
        }}>
        {isLoading ? (
          <>
            <svg style={{ animation: 'spin 1s linear infinite' }} width="13" height="13" fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" opacity="0.25" />
              <path fill="currentColor" opacity="0.75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
            </svg>
            전송 중...
          </>
        ) : (
          <>
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            보내기
          </>
        )}
      </button>

{/* 폼 전환 링크 */}
      {onSwitchForm && (
        <button
          type="button"
          onClick={() => onSwitchForm(!initialShowPlan)}
          style={{
            width: '100%',
            padding: '4px 0 0 0',
            background: 'transparent',
            border: 'none',
            cursor: 'pointer',
            fontSize: '11px',
            fontWeight: 600,
            color: '#2563eb',
            textAlign: 'left',
            transition: 'color 0.15s',
            marginTop: '0px',
            marginBottom: '0px',
          }}
          onMouseEnter={e => e.currentTarget.style.color = '#1d4ed8'}
          onMouseLeave={e => e.currentTarget.style.color = '#2563eb'}
        >
          {'> '}{initialShowPlan ? 'Gachi AI Sitebuilder 문의하기' : 'Gachi AI Sitebuilder 시작 신청하기'}
        </button>
      )}
    </form>
  );
}

// ── 메인 Chat Widget ──────────────────────────────────────────────
export default function ChatWidget() {
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [conversationId, setConversationId] = useState(null);
  const [hasUnread, setHasUnread] = useState(false);

const abortRef = useRef(null);
  const messagesContainerRef = useRef(null);
  const inputRef = useRef(null);

const scrollToBottom = () => {
    if (messagesContainerRef.current) {
      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
    }
  };

useEffect(() => {
    if (messages.length > 0) setTimeout(scrollToBottom, 50);
  }, [messages]);

// '문의하기' 클릭 → 대화 안에 폼 버블 추가
  const openContactForm = (withPlan = false) => {
    const label = withPlan ? 'Gachi AI Sitebuilder 시작 신청하기' : 'Gachi AI Sitebuilder 문의하기';
    setMessages(prev => [
      ...prev,
      { role: 'user', content: label },
      { role: 'assistant', content: withPlan ? '__CONTACT_FORM_WITH_PLAN__' : '__CONTACT_FORM__' },
    ]);
  };

// 외부에서 채팅창 열고 문의 폼을 트리거하는 이벤트 리스너
  const openContactFormRef = useRef(openContactForm);
  openContactFormRef.current = openContactForm;

// 마운트 시 cookie 체크 → 자동으로 폼 열기
  useEffect(() => {
    const checkCookie = () => {
      try {
        if (document.cookie.includes('open-gachi-contact=1')) {
          document.cookie = 'open-gachi-contact=;path=/;max-age=0';
          setIsOpen(true);
          setTimeout(() => { openContactFormRef.current(); }, 300);
          return true;
        }
      } catch(e) {}
      return false;
    };
    // 즉시 체크
    if (!checkCookie()) {
      // 못 찾으면 폴링 (iframe 로드 타이밍 대응)
      const interval = setInterval(() => {
        if (checkCookie()) clearInterval(interval);
      }, 300);
      // 10초 후 폴링 중지
      const timeout = setTimeout(() => clearInterval(interval), 10000);
      return () => { clearInterval(interval); clearTimeout(timeout); };
    }
  }, []);

useEffect(() => {
    const handleOpenContact = (withPlan = false) => {
      setIsOpen(true);
      setTimeout(() => {
        openContactFormRef.current(withPlan);
      }, 150);
    };

// 1) BroadcastChannel 리스닝 (같은 origin의 다른 iframe과 통신)
    let bc = null;
    try {
      bc = new BroadcastChannel('gachi-contact-channel');
      bc.onmessage = (event) => {
        if (event.data && event.data.type === 'open-gachi-contact') {
          handleOpenContact();
        }
        if (event.data && event.data.type === 'open-gachi-contact-with-plan') {
          handleOpenContact(true);
        }
      };
    } catch(e) { console.log('BroadcastChannel not supported'); }

// 2) postMessage 리스닝 (폴백)
    const handleMessage = (event) => {
      if (event.data && event.data.type === 'open-gachi-contact') {
        handleOpenContact();
      }
      if (event.data && event.data.type === 'open-gachi-contact-with-plan') {
        handleOpenContact(true);
      }
    };
    window.addEventListener('message', handleMessage);

// 3) CustomEvent 리스닝 (같은 window 내)
    const handleCustom = () => { handleOpenContact(); };
    window.addEventListener('open-gachi-contact', handleCustom);

return () => {
      if (bc) bc.close();
      window.removeEventListener('message', handleMessage);
      window.removeEventListener('open-gachi-contact', handleCustom);
    };
  }, []);

useEffect(() => {
    if (isOpen) {
      setHasUnread(false);
      setTimeout(() => inputRef.current?.focus(), 300);
    }
    // 모바일에서 채팅창 열릴 때 배경 스크롤 방지
    const isMobile = window.innerWidth <= 480;
    if (isMobile) {
      if (isOpen) {
        document.body.style.overflow = 'hidden';
        document.body.style.position = 'fixed';
        document.body.style.width = '100%';
      } else {
        document.body.style.overflow = '';
        document.body.style.position = '';
        document.body.style.width = '';
      }
    }
    return () => {
      document.body.style.overflow = '';
      document.body.style.position = '';
      document.body.style.width = '';
    };
  }, [isOpen]);

const stopLoading = () => {
    if (abortRef.current) {
      abortRef.current.abort();
      abortRef.current = null;
    }
    setLoading(false);
  };

const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

const startNewConversation = () => {
    setMessages([]);
    setConversationId(null);
    setError(null);
  };

const SUGGESTED = [
    '에이전트 홈페이지가 뭔가요?',
    '바이브코딩이 가능한가요?',
    'B2B 서비스인가요?',
    'AI가 방문자 질문에 어떻게 답하나요?',
    'Gachi AI Sitebuilder 문의하기',
    'Gachi AI Sitebuilder 시작 신청하기',
  ];

return (
    <>
      <style>{`
        @media (max-width: 480px) {
          .chat-window {
            bottom: 0 !important;
            right: 0 !important;
            left: 0 !important;
            top: 0 !important;
            width: 100% !important;
            height: 100dvh !important;
            border-radius: 0 !important;
          }
          .fab-btn-wrap {
            bottom: 16px !important;
            right: 16px !important;
          }
          .fab-mobile-hide {
            display: none !important;
          }
          .close-mobile-btn {
            display: flex !important;
          }
        }
        @keyframes fadeSlideUp {
          from { opacity: 0; transform: translateY(16px) scale(0.97); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes pulseRing {
          0%   { box-shadow: 0 0 0 0 rgba(37,99,235,0.35); }
          70%  { box-shadow: 0 0 0 10px rgba(37,99,235,0); }
          100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
        }
        @keyframes dotBounce {
          0%, 80%, 100% { transform: translateY(0); }
          40%            { transform: translateY(-6px); }
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes msgIn {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .chat-window { animation: fadeSlideUp 0.25s cubic-bezier(0.16,1,0.3,1) both; }
        .fab-btn { animation: pulseRing 2.5s ease-out infinite; }
        .dot1 { animation: dotBounce 1.2s ease-in-out infinite; animation-delay: 0ms; }
        .dot2 { animation: dotBounce 1.2s ease-in-out infinite; animation-delay: 160ms; }
        .dot3 { animation: dotBounce 1.2s ease-in-out infinite; animation-delay: 320ms; }
        .msg-scroll::-webkit-scrollbar { width: 4px; }
        .msg-scroll::-webkit-scrollbar-track { background: transparent; }
        .msg-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }
        .chat-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,0.2); }
        .msg-bubble { animation: msgIn 0.2s ease both; }
      `}</style>

{/* Floating Window */}
      {isOpen && (
        <div
          className="chat-window"
          style={{
            position: 'fixed',
            bottom: 'var(--chat-bottom, 96px)',
            right: 'var(--chat-right, 24px)',
            width: 'min(440px, 100vw)',
            height: 'min(640px, 100dvh)',
            background: '#ffffff',
            borderRadius: '20px',
            boxShadow: '0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06)',
            display: 'flex',
            flexDirection: 'column',
            overflow: 'hidden',
            zIndex: 9999,
            border: '1px solid #f1f5f9',
          }}
        >
          {/* Header */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '12px 16px', background: '#ffffff',
            borderBottom: '1px solid #f1f5f9', flexShrink: 0,
          }}>
            <span style={{ fontSize: '20px', fontWeight: 800, color: '#1d4ed8', letterSpacing: '-0.5px' }}>GachiAI Sitebuilder</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
              <button
                onClick={startNewConversation}
                style={{
                  display: 'flex', alignItems: 'center', gap: '5px',
                  padding: '5px 11px', borderRadius: '8px',
                  border: '1.5px solid #e2e8f0', background: '#f8fafc',
                  color: '#475569', fontSize: '12px', fontWeight: 600,
                  cursor: 'pointer', transition: 'background 0.15s, border-color 0.15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = '#eff6ff'; e.currentTarget.style.borderColor = '#2563eb'; e.currentTarget.style.color = '#2563eb'; }}
                onMouseLeave={e => { e.currentTarget.style.background = '#f8fafc'; e.currentTarget.style.borderColor = '#e2e8f0'; e.currentTarget.style.color = '#475569'; }}
              >
                <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M12 4v16m8-8H4" />
                </svg>
                새로운 채팅
              </button>
              {/* 모바일 전용 닫기 버튼 */}
              <button
                className="close-mobile-btn"
                onClick={() => setIsOpen(false)}
                style={{
                  display: 'none',
                  alignItems: 'center', justifyContent: 'center',
                  width: '32px', height: '32px', borderRadius: '8px',
                  border: '1.5px solid #e2e8f0', background: '#f8fafc',
                  color: '#475569', cursor: 'pointer',
                  transition: 'background 0.15s, border-color 0.15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = '#fee2e2'; e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.color = '#ef4444'; }}
                onMouseLeave={e => { e.currentTarget.style.background = '#f8fafc'; e.currentTarget.style.borderColor = '#e2e8f0'; e.currentTarget.style.color = '#475569'; }}
              >
                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>

{/* Messages */}
          <div ref={messagesContainerRef} className="msg-scroll"
            style={{ flex: 1, overflowY: 'auto', padding: '16px', display: 'flex', flexDirection: 'column', gap: '10px', background: '#f8fafc' }}>

{/* 추천질문 - 항상 대화 최상단에 표시 */}
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', color: '#94a3b8', textAlign: 'center', paddingBottom: messages.length > 0 ? '4px' : '0', marginBottom: messages.length > 0 ? '4px' : '0' }}>
              {messages.length === 0 && (
                <>
                  <div style={{ width: '52px', height: '52px', background: '#eff6ff', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="24" height="24" fill="none" stroke="#2563eb" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                    </svg>
                  </div>
                  <div>
                    <p style={{ fontSize: '15px', fontWeight: 600, color: '#475569', marginBottom: '4px' }}>무엇이든 물어보세요</p>
                    <p style={{ fontSize: '13px', color: '#94a3b8' }}>아래에 메시지를 입력해 대화를 시작하세요.</p>
                  </div>
                </>
              )}
              <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', width: '100%' }}>
                {SUGGESTED.map((q, i) => {
                  const isContact = q === 'Gachi AI Sitebuilder 문의하기';
                  return (
                    <button
                      key={i}
                      onClick={() => sendMessageWithText(q)}
                      disabled={loading}
                      style={{
                        width: '100%', padding: '8px 13px',
                        borderRadius: '10px',
                        border: '1.5px solid #e2e8f0',
                        background: '#ffffff',
                        color: '#374151',
                        fontSize: '14px', fontWeight: 500,
                        textAlign: 'left', cursor: loading ? 'not-allowed' : 'pointer',
                        opacity: loading ? 0.5 : 1,
                        transition: 'border-color 0.15s, background 0.15s, color 0.15s',
                        lineHeight: 1.4,
                        display: 'flex', alignItems: 'center', gap: '6px',
                      }}
                      onMouseEnter={e => { if (!loading) { e.currentTarget.style.borderColor = '#2563eb'; e.currentTarget.style.background = '#eff6ff'; e.currentTarget.style.color = '#1d4ed8'; }}}
                      onMouseLeave={e => { e.currentTarget.style.borderColor = '#e2e8f0'; e.currentTarget.style.background = '#ffffff'; e.currentTarget.style.color = '#374151'; }}
                    >
                      {q}
                    </button>
                  );
                })}
              </div>
              {messages.length > 0 && (
                <div style={{ width: '100%', height: '1px', background: '#e2e8f0', margin: '2px 0 6px' }} />
              )}
            </div>

{/* 메시지 목록 */}
            {messages.map((msg, index) => {
              const isContactForm = msg.role === 'assistant' && (msg.content === '__CONTACT_FORM__' || msg.content === '__CONTACT_FORM_WITH_PLAN__');
              const isWithPlan = msg.content === '__CONTACT_FORM_WITH_PLAN__';

return (
                <div key={index} className="msg-bubble"
                  style={{ display: 'flex', justifyContent: msg.role === 'user' ? 'flex-end' : 'flex-start', alignItems: 'flex-end', gap: '7px' }}>

{/* AI 아바타 */}
                  {msg.role === 'assistant' && (
                    <div style={{ width: '26px', height: '26px', background: '#eff6ff', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <svg width="13" height="13" fill="none" stroke="#2563eb" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                      </svg>
                    </div>
                  )}

{/* 문의 폼 버블 */}
                  {isContactForm ? (
                    <div style={{
                      maxWidth: '88%',
                      background: '#eff6ff',
                      border: '1.5px solid #bfdbfe',
                      borderRadius: '16px 16px 16px 4px',
                      padding: '14px',
                      boxShadow: '0 1px 4px rgba(0,0,0,0.07)',
                      width: '100%',
                    }}>
                      {/* 폼 헤더 */}
                      <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '10px' }}>
                        <div style={{ width: '22px', height: '22px', background: '#1d4ed8', borderRadius: '6px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          <svg width="11" height="11" fill="none" stroke="white" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                          </svg>
                        </div>
                        <span style={{ fontSize: '15px', fontWeight: 800, color: '#1d4ed8' }}>{isWithPlan ? 'Gachi AI Sitebuilder 시작 신청하기' : 'Gachi AI Sitebuilder 문의하기'}</span>
                      </div>
                      <InlineContactForm conversationId={conversationId} setConversationId={setConversationId} initialShowPlan={isWithPlan} onSwitchForm={(withPlan) => openContactForm(withPlan)} />
                    </div>
                  ) : (
                    /* 일반 메시지 버블 */
                    <div style={{
                      maxWidth: '75%', padding: '9px 13px',
                      borderRadius: msg.role === 'user' ? '16px 16px 4px 16px' : '16px 16px 16px 4px',
                      background: msg.role === 'user' ? '#1d4ed8' : '#ffffff',
                      color: msg.role === 'user' ? '#ffffff' : '#1e293b',
                      fontSize: '15px', lineHeight: '1.6',
                      boxShadow: msg.role === 'user' ? 'none' : '0 1px 4px rgba(0,0,0,0.07)',
                      border: msg.role === 'user' ? 'none' : '1px solid #e2e8f0',
                      wordBreak: 'break-word',
                    }}>
                      <md-text>{msg.content}</md-text>
                    </div>
                  )}
                </div>
              );
            })}

{/* 로딩 */}
            {loading && (
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: '7px' }}>
                <div style={{ width: '26px', height: '26px', background: '#eff6ff', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="13" height="13" fill="none" stroke="#2563eb" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                  </svg>
                </div>
                <div style={{ background: '#ffffff', border: '1px solid #e2e8f0', borderRadius: '16px 16px 16px 4px', padding: '10px 14px', display: 'flex', gap: '4px', alignItems: 'center', boxShadow: '0 1px 4px rgba(0,0,0,0.07)' }}>
                  <span className="dot1" style={{ width: '6px', height: '6px', background: '#94a3b8', borderRadius: '50%', display: 'inline-block' }}></span>
                  <span className="dot2" style={{ width: '6px', height: '6px', background: '#94a3b8', borderRadius: '50%', display: 'inline-block' }}></span>
                  <span className="dot3" style={{ width: '6px', height: '6px', background: '#94a3b8', borderRadius: '50%', display: 'inline-block' }}></span>
                </div>
              </div>
            )}
          </div>

{/* Error */}
          {error && (
            <div style={{ padding: '8px 16px', background: '#fef2f2', borderTop: '1px solid #fecaca', color: '#dc2626', fontSize: '12px', flexShrink: 0 }}>
              ⚠ {error}
            </div>
          )}

{/* Input */}
          <div style={{ padding: '12px 14px', background: '#ffffff', borderTop: '1px solid #f1f5f9', flexShrink: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', background: '#f8fafc', border: '1.5px solid #e2e8f0', borderRadius: '12px', padding: '6px 6px 6px 14px', transition: 'border-color 0.15s' }}
              onFocusCapture={e => e.currentTarget.style.borderColor = '#2563eb'}
              onBlurCapture={e => e.currentTarget.style.borderColor = '#e2e8f0'}>
              <input
                ref={inputRef}
                type="text"
                value={input}
                onChange={e => setInput(e.target.value)}
                onKeyPress={handleKeyPress}
                placeholder="메시지를 입력하세요..."
                readOnly={loading}
                className="chat-input"
                style={{ flex: 1, background: 'transparent', border: 'none', fontSize: '15px', color: '#1e293b', outline: 'none', boxShadow: 'none' }}
              />
              <button
                onClick={loading ? stopLoading : sendMessage}
                disabled={!loading && !input.trim()}
                style={{
                  width: '34px', height: '34px', borderRadius: '8px', border: 'none',
                  background: loading ? '#ef4444' : (!input.trim() ? '#e2e8f0' : '#1d4ed8'),
                  color: loading ? '#ffffff' : (!input.trim() ? '#94a3b8' : '#ffffff'),
                  cursor: !loading && !input.trim() ? 'not-allowed' : 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, transition: 'background 0.15s',
                }}
              >
                {loading ? (
                  <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <rect x="6" y="6" width="12" height="12" rx="2" strokeWidth="2" fill="currentColor" />
                  </svg>
                ) : (
                  <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                  </svg>
                )}
              </button>
            </div>
            {API.user?.email && (
              <p style={{ fontSize: '12px', color: '#94a3b8', marginTop: '6px', textAlign: 'right' }}>
                {API.user.email}
              </p>
            )}
          </div>
        </div>
      )}

{/* FAB Button */}
      <button
        onClick={() => setIsOpen(prev => !prev)}
        className={`${!isOpen ? 'fab-btn' : ''} ${isOpen ? 'fab-mobile-hide' : ''}`}
        style={{
          position: 'fixed', bottom: '24px', right: '24px',
          width: '56px', height: '56px', borderRadius: '50%',
          background: '#1d4ed8', border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 4px 20px rgba(29,78,216,0.4)',
          zIndex: 10000, transition: 'transform 0.2s, background 0.2s',
        }}
        onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.08)'}
        onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
      >
        {hasUnread && !isOpen && (
          <span style={{ position: 'absolute', top: '4px', right: '4px', width: '10px', height: '10px', background: '#ef4444', borderRadius: '50%', border: '2px solid white' }} />
        )}
        {isOpen ? (
          <svg width="22" height="22" fill="none" stroke="white" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        ) : (
          <svg width="22" height="22" fill="none" stroke="white" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        )}
      </button>
    </>
  );
}
</article></body></html>

기업의 홈페이지가 스스로 일하는AI 에이전트로 진화하는 과정

기업의 홈페이지가 스스로 일하는
AI 에이전트로 진화하는 과정