// app/main.jsx — 알파카 시제품 조립: 전체화면 챗봇(데스크톱) / 모바일 뷰(뷰포트 자동)
// 리본 ERP 목업 백드롭 제거. 업체(tenant) 선택은 챗봇 헤더로 이동. 데스크톱/모바일 수동 토글 삭제.
const { useState, useEffect } = React;
const RC = window.RibbonChat;
const { McpStatusBar, ChatThread, ChatInput, Icon, Spike, I } = RC;
const { HistorySidebar, FaqManager } = window.RibbonPanels;
const { AdminHub } = window.RibbonAdmin;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "#cc785c",
"chatDark": false,
"density": "regular",
"showSources": true,
"mcpStatus": true
}/*EDITMODE-END*/;
// 뷰포트 폭으로 모바일 판정(수동 토글 없음).
function useIsMobile(bp = 820) {
const [m, setM] = useState(typeof window !== 'undefined' && window.innerWidth < bp);
useEffect(() => {
const on = () => setM(window.innerWidth < bp);
window.addEventListener('resize', on);
return () => window.removeEventListener('resize', on);
}, [bp]);
return m;
}
// ── 업체(tenant) 선택 — 챗봇 헤더용 ─────────────────────────
function TenantSelect({ tenant, onTenantChange }) {
const D = window.RibbonData;
const tn = tenant || D.TENANTS[0];
return (
);
}
// ── 채팅 헤더 (업체 선택 + 새 대화/FAQ/닫기) ─────────────────
function ChatHeader({ conv, tenant, onTenantChange, onNew, onFaq, onClose, mobile }) {
return (
알파카
{conv.messages.length > 0 ? '맥락 유지 중' : '온라인'}
);
}
function HBtn({ d, label, onClick }) {
const [h, setH] = useState(false);
return (
);
}
// ── 채팅 컬럼 (헤더+상태+스레드+입력 / FAQ 오버레이) ─────────
function ChatColumn({ conv, t, tenant, onTenantChange, faqOpen, setFaqOpen, onClose, mobile, style }) {
const opts = { showSources: t.showSources, mcpStatus: t.mcpStatus };
const threadPad = t.density === 'compact' ? 'rb-pad-c' : t.density === 'comfy' ? 'rb-pad-x' : '';
return (
setFaqOpen(true)} onClose={onClose} mobile={mobile} />
{t.mcpStatus && }
{faqOpen && setFaqOpen(false)} onChip={conv.send} />}
{conv.reportMsg && }
);
}
// ── 데스크톱: 사이드바(최근 대화) + 전체화면 챗봇 ───────────
function DesktopChat({ conv, t, tenant, onTenantChange, faqOpen, setFaqOpen }) {
return (
setFaqOpen(true)}
sessions={conv.sessions} activeId={conv.activeId} onSelect={conv.loadSession} onDelete={conv.deleteSession} />
);
}
// ── 모바일: 디바이스 프레임 안의 챗봇 ───────────────────────
function MobileChat({ conv, t, tenant, faqOpen, setFaqOpen }) {
const { IOSDevice } = window;
return (
{}} faqOpen={faqOpen} setFaqOpen={setFaqOpen}
mobile onClose={conv.reset} style={{ height: '100%', borderRadius: 0 }} />
);
}
// ── 상단 데모 크롬 (챗봇 / 관리자 토글) ─────────────────────
function TopChrome({ view, setView }) {
return (
알파카 — 리본 AI
시제품
{[['chat', '챗봇', 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'], ['admin', '관리자', 'M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6z']].map(([v, label, d]) => (
))}
);
}
// ── App ──────────────────────────────────────────────────────
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const conv = RC.useConversation();
const isMobile = useIsMobile();
const [view, setView] = useState('chat'); // 'chat' | 'admin'
const [tenantId, setTenantId] = useState('thesafe');
const [faqOpen, setFaqOpen] = useState(false);
const tenant = window.RibbonData.TENANTS.find(x => x.id === tenantId);
useEffect(() => { document.documentElement.style.setProperty('--accent', t.accent); }, [t.accent]);
// 선택 업체를 전역에 노출 → chat.jsx 가 /api/chat 에 tenant_id 로 실어 보낸다(업체 스코프).
useEffect(() => { window.RibbonData.currentTenantId = tenantId; }, [tenantId]);
return (
{view === 'admin'
?
: isMobile
?
:
}
setTweak('accent', v)} />
setTweak('chatDark', v)} />
setTweak('density', v)} />
setTweak('mcpStatus', v)} />
setTweak('showSources', v)} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render();