// Assistant — multi-chat AI with date separators and chat management const asstStyles = { // Suggestion chips suggestTitle: { font: "500 12px 'Estedad', sans-serif", color: 'var(--ink-3)', letterSpacing: '0.06em', textTransform: 'uppercase', margin: '12px 2px 10px', }, suggestRow: { display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }, suggestCard: { background: 'var(--surface)', border: '1px solid var(--c-border-xs)', borderRadius: 14, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', textAlign: 'right', width: '100%', }, suggestIcon: { width: 32, height: 32, borderRadius: 8, background: 'var(--firoozeh-soft)', color: 'var(--firoozeh-deep)', display: 'grid', placeItems: 'center', flex: 'none', }, suggestText: { font: "400 14px/1.45 'Estedad', sans-serif", color: 'var(--ink)', flex: 1 }, // Messages msgRow: { display: 'flex', marginBottom: 10 }, me: { justifyContent: 'flex-start' }, them: { justifyContent: 'flex-end' }, bubble: { maxWidth: '82%', padding: '10px 14px', font: "400 15px/1.6 'Estedad', sans-serif", borderRadius: 16, }, bubbleMe: { background: 'var(--firoozeh)', color: '#fff', borderBottomRightRadius: 4 }, bubbleThem: { background: 'var(--surface)', color: 'var(--ink)', border: '1px solid var(--c-border-xs)', borderBottomLeftRadius: 4, }, metaBelow: { font: "500 11px 'Estedad', sans-serif", color: 'var(--ink-3)', margin: '2px 8px 0', }, typing: { display: 'flex', gap: 5, padding: '6px 4px' }, dot: { width: 6, height: 6, background: 'var(--ink-3)', borderRadius: '50%' }, // Input bar inputBar: { display: 'flex', alignItems: 'center', gap: 8, padding: 6, background: 'var(--surface)', border: '1px solid var(--c-border-sm)', borderRadius: 999, boxShadow: '0 2px 8px rgba(0,0,0,0.06)', }, inputField: { flex: 1, background: 'transparent', border: 'none', outline: 'none', font: "400 15px/1.4 'Estedad', sans-serif", color: 'var(--ink)', minWidth: 0, textAlign: 'right', direction: 'rtl', padding: '6px 10px', }, sendBtn: { width: 38, height: 38, borderRadius: 999, background: 'var(--ink-4)', color: 'var(--paper)', display: 'grid', placeItems: 'center', border: 'none', cursor: 'pointer', flex: 'none', transition: 'background 120ms ease-out', }, sendBtnActive: { background: 'var(--firoozeh)', color: '#fff' }, // Header (shared between chat and list views) hdr: { display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', borderBottom: '1px solid var(--c-border-xs)', flexShrink: 0, direction: 'rtl', }, hdrTitle: { font: "500 15px 'Estedad', sans-serif", color: 'var(--ink)', flex: 1, textAlign: 'center', direction: 'rtl', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }, hdrBtn: { width: 36, height: 36, borderRadius: 999, background: 'var(--paper-2)', border: 'none', cursor: 'pointer', color: 'var(--ink-2)', display: 'grid', placeItems: 'center', flex: 'none', }, hdrBtnPrimary: { background: 'var(--firoozeh)', color: '#fff' }, // Chat list chatList: { flex: 1, overflow: 'auto', direction: 'rtl' }, chatItem: { display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', borderBottom: '1px solid var(--c-border-xs)', cursor: 'pointer', transition: 'background 80ms', direction: 'rtl', }, chatItemActive: { background: 'var(--firoozeh-soft)' }, chatDot: { width: 8, height: 8, borderRadius: '50%', background: 'var(--firoozeh)', flex: 'none' }, chatItemBody: { flex: 1, minWidth: 0 }, chatItemTitle: { font: "500 14px/1.3 'Estedad', sans-serif", color: 'var(--ink)', marginBottom: 2 }, chatItemPreview: { font: "400 12px 'Estedad', sans-serif", color: 'var(--ink-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }, chatItemMeta: { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4, flex: 'none', }, chatItemDate: { font: "400 10.5px 'Estedad', sans-serif", color: 'var(--ink-4)', whiteSpace: 'nowrap' }, chatItemCount: { font: "500 10px 'Estedad', sans-serif", color: 'var(--firoozeh-deep)', background: 'var(--firoozeh-soft)', padding: '1px 6px', borderRadius: 999, }, // Date separator sep: { display: 'flex', alignItems: 'center', gap: 8, margin: '18px 0 12px', direction: 'rtl' }, sepLine: { flex: 1, height: 1, background: 'var(--c-tint-sm)' }, sepTxt: { font: "400 11px 'Estedad', sans-serif", color: 'var(--ink-3)', whiteSpace: 'nowrap', background: 'var(--paper-2)', padding: '2px 10px', borderRadius: 999, }, }; // ── Date helpers ───────────────────────────────────────────────────── const insertDateSeps = msgs => { const result = []; let lastKey = null; for (const msg of msgs) { const d = new Date(msg.timestamp || 0); const k = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`; if (k !== lastKey) { result.push({ _sep: true, key: 'sep-' + k, date: d }); lastKey = k; } result.push(msg); } return result; }; const faDateSep = d => { if (!d || d.getFullYear() < 2000) return ''; const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const yesterday = new Date(today.getTime() - 86400000); const msgDay = new Date(d.getFullYear(), d.getMonth(), d.getDate()); if (msgDay.getTime() === today.getTime()) return 'امروز'; if (msgDay.getTime() === yesterday.getTime()) return 'دیروز'; return new Intl.DateTimeFormat('fa-IR', { weekday: 'long', month: 'long', day: 'numeric' }).format(d); }; const faDateShort = ts => ts ? new Intl.DateTimeFormat('fa-IR', { month: 'long', day: 'numeric' }).format(new Date(ts)) : ''; // ── Inline markdown renderer ───────────────────────────────────────── function renderInline(text, key) { const parts = []; const re = /(\*\*(.+?)\*\*|\*(.+?)\*|`(.+?)`|\[([^\]]+)\]\((https?:\/\/[^)]+)\))/g; let last = 0, m, i = 0; while ((m = re.exec(text)) !== null) { if (m.index > last) parts.push(text.slice(last, m.index)); if (m[2] != null) parts.push({m[2]}); else if (m[3] != null) parts.push({m[3]}); else if (m[4] != null) parts.push( {m[4]} ); else if (m[5] != null) parts.push( {m[5]} ); last = m.index + m[0].length; } if (last < text.length) parts.push(text.slice(last)); return parts; } function MarkdownBubble({ text }) { const lines = text.split('\n'); const nodes = []; let listBuf = [], listType = null; let inCode = false, codeLang = '', codeBuf = []; let tableBuf = []; const flushList = () => { if (!listBuf.length) return; const Tag = listType === 'ol' ? 'ol' : 'ul'; nodes.push( {listBuf.map((item, idx) =>
  • {renderInline(item)}
    • )}     ); listBuf = []; listType = null; }; const flushTable = () => { if (!tableBuf.length) return; const rows = tableBuf.filter(r => !r.match(/^\|[-\s|:]+\|$/)); nodes.push(
    {rows.map((row, ri) => { const cells = row.split('|').slice(1, -1).map(c => c.trim()); const Tag = ri === 0 ? 'th' : 'td'; return ( {cells.map((cell, ci) => ( {renderInline(cell)} ))} ); })}
    ); tableBuf = []; }; lines.forEach((line, i) => { if (line.startsWith('```')) { if (!inCode) { flushList(); flushTable(); inCode = true; codeLang = line.slice(3).trim(); codeBuf = []; } else { const code = codeBuf.join('\n'); nodes.push(
    {codeLang && {codeLang}} 
                  {code}
    ); inCode = false; codeLang = ''; codeBuf = []; } return; } if (inCode) { codeBuf.push(line); return; } if (line.trim().startsWith('|') && line.trim().endsWith('|')) { flushList(); tableBuf.push(line.trim()); return; } else if (tableBuf.length) { flushTable(); } const ulMatch = line.match(/^[-*•]\s+(.+)/); const olMatch = line.match(/^\d+[.)]\s+(.+)/); const h3Match = line.match(/^###\s+(.+)/); const h2Match = line.match(/^##\s+(.+)/); const h1Match = line.match(/^#\s+(.+)/); const hrMatch = line.match(/^---+$/); if (ulMatch) { if (listType === 'ol') flushList(); listType = 'ul'; listBuf.push(ulMatch[1]); } else if (olMatch) { if (listType === 'ul') flushList(); listType = 'ol'; listBuf.push(olMatch[1]); } else { flushList(); if (h1Match || h2Match || h3Match) { const lvl = h1Match ? 1 : h2Match ? 2 : 3; const content = (h1Match || h2Match || h3Match)[1]; nodes.push(
    {renderInline(content)}
    ); } else if (hrMatch) { nodes.push(
    ); } else if (line.trim() === '') { nodes.push(
    ); } else { nodes.push(

    {renderInline(line)}

    ); } } }); flushList(); flushTable(); return
    {nodes}
    ; } function TypingBubble() { return (
    {[0, 0.16, 0.32].map((d, i) => ( ))}
    ); } function ChatInput({ onSend, disabled, maxLength = 2000 }) { const { Icons } = window; const [text, setText] = React.useState(''); const inputRef = React.useRef(null); const send = () => { const t = text.trim().slice(0, maxLength); if (!t || disabled) return; onSend(t); setText(''); inputRef.current?.focus(); }; const hasText = text.trim().length > 0; const near = text.length > maxLength - 200; return (
    setText(e.target.value.slice(0, maxLength))} onKeyDown={e => e.key === 'Enter' && send()} placeholder="پیامت رو بنویس…" maxLength={maxLength} disabled={disabled} /> {near && ( {String(maxLength - text.length).replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d])} )}
    ); } // Read-only banner shown when viewing an archived (past-day / capped) chat function ArchivedBar({ onStartToday }) { return (
    این گفتگو بایگانی شده و ادامه ندارد.
    ); } // ── Chat list item ──────────────────────────────────────────────── function ChatListItem({ chat, active, archived, onSelect, onDelete }) { const { Icons } = window; const lastMsg = chat.messages[chat.messages.length - 1]; const msgCount = chat.messages.length; return (
    onSelect(chat.id)} >
    {chat.title || 'گفتگوی جدید'} {archived && بایگانی}
    {lastMsg && (
    {lastMsg.from === 'me' ? 'شما: ' : ''}{lastMsg.text.slice(0, 45)}
    )}
    {faDateShort(chat.updatedAt)} {msgCount > 0 && ( {String(msgCount).replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d])} پیام )}
    ); } // ── Chat view ───────────────────────────────────────────────────── function ChatView({ chat, typing, onAsk, onRetry, onShowList, onNewChat, onStartToday, archived, maxInput, isDesktop }) { const { Icons } = window; const scrollRef = React.useRef(null); React.useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [chat?.messages?.length, typing]); const px = isDesktop ? '24px' : '16px'; const inputPb = isDesktop ? '20px' : '108px'; const items = insertDateSeps(chat?.messages || []); const userAsked = (chat?.messages || []).some(m => m.from === 'me'); const suggestions = [ { q: 'سخت خوابم می‌بره، یه روتین برام بساز', Icon: Icons.Sparkle }, { q: 'چطور می‌تونم کارهامو بهتر اولویت‌بندی کنم؟', Icon: Icons.CheckCircle }, { q: 'می‌خوام ورزش رو شروع کنم، کمکم کن', Icon: Icons.TrendUp }, ]; return (
    {/* Header */}
    {chat?.title || 'گفتگوی جدید'}
    {/* Messages */}
    {items.map((item, i) => { if (item._sep) { const label = faDateSep(item.date); if (!label) return null; return (
    {label}
    ); } const m = item; return (
    {m.from === 'me' ? m.text : } {m.error && m.retry && onRetry && ( )}
    {m.meta && (
    {m.meta}
    )}
    ); })} {typing && } {!userAsked && !typing && !archived && ( <>
    پیشنهاد سوال
    {suggestions.map((s, i) => ( ))}
    )}
    {/* Input (or read-only banner for archived chats) */} {archived ? (
    ) : (
    )}
    ); } // ── Chat list view ──────────────────────────────────────────────── function ChatListView({ chats, activeChatId, onSelect, onNew, onDelete, onBack, chatArchived }) { const { Icons } = window; const sorted = [...(chats || [])].sort((a, b) => b.updatedAt - a.updatedAt); return (
    {/* Header */}
    همه گفتگوها
    {/* List */}
    {sorted.map(chat => ( { onSelect(id); onBack(); }} onDelete={onDelete} /> ))} {sorted.length === 0 && (
    هنوز گفتگویی شروع نشده
    )}
    ); } // ── Main Assistant component ────────────────────────────────────── function Assistant({ chats, activeChatId, typing, onAsk, onRetry, onNewChat, onSelectChat, onDeleteChat, onStartToday, chatArchived, maxInput, isDesktop }) { const [view, setView] = React.useState('chat'); const activeChat = (chats || []).find(c => c.id === activeChatId); const archived = chatArchived ? chatArchived(activeChat) : false; if (view === 'list') { return ( { onSelectChat(id); setView('chat'); }} onNew={() => { onNewChat(); setView('chat'); }} onDelete={onDeleteChat} onBack={() => setView('chat')} chatArchived={chatArchived} /> ); } return ( setView('list')} onNewChat={onNewChat} onStartToday={onStartToday} archived={archived} maxInput={maxInput} isDesktop={isDesktop} /> ); } window.Assistant = Assistant;