Bỏ qua nội dung React Artifact hoặc dùng iframe:"}),Q("div",{className:"text-[#fbbf24]",children:''})]}),H("div",{className:"mt-4 flex flex-wrap gap-2",children:[Q("span",{className:"px-2.5 py-1 rounded-full bg-[#fff1f0] border border-[#f3c4c1] text-[11px] text-[#8a1f1a]",children:"Floating button: white + red border + pulse #DA251D"}),Q("span",{className:"px-2.5 py-1 rounded-full bg-[#fff1f0] border border-[#f3c4c1] text-[11px] text-[#8a1f1a]",children:"Window: 390×600, radius 20px"}),Q("span",{className:"px-2.5 py-1 rounded-full bg-[#fff1f0] border border-[#f3c4c1] text-[11px] text-[#8a1f1a]",children:"Header gradient white"})]})]}),H("div",{className:"rounded-[16px] border border-[#f1d0ce] bg-gradient-to-br from-white to-[#fff5f4] p-4",children:[Q("p",{className:"text-[12px] font-semibold text-[#C1272D] uppercase tracking-wide mb-2",children:"Logo Spec (thật)"}),H("div",{className:"flex gap-3 items-start",children:[Q("img",{src:Pe,alt:"logo large",className:"w-[72px] h-[72px] object-contain bg-white rounded-xl border border-[#f0c8c5] p-1 shadow-sm"}),H("ul",{className:"text-[12px] leading-[18px] text-[#555] list-disc pl-4",children:[Q("li",{children:"Nón lá đỏ trên cùng"}),H("li",{children:["Số ",Q("b",{className:"text-[#C1272D]",children:"29"})," đỏ trong nón"]}),Q("li",{children:"Outline bản đồ VN nâu"}),H("li",{children:["Text ",Q("b",{children:"vietnam29.com"})," (vietnam đen, 29 đỏ)"]})]})]}),Q("p",{className:"mt-3 text-[11px] text-[#8a8a8a] leading-[16px]",children:"Logo được dùng làm: floating button icon (crop contain), header 40px, welcome inline 18px, footer 20px."})]})]})]})]}),Q("div",{className:"mt-6 text-center text-[12px] text-[#9a9a9a]",children:"Preview widget ở góc phải → Nhấn để mở chatbox 390×600"})]}),!A&&H("button",{onClick:()=>e(!0),"aria-label":"Mở chat Vietnam29",className:"group fixed bottom-[24px] right-[24px] z-[9999] w-[64px] h-[64px] rounded-full bg-white border-[2px] border-[#DA251D] shadow-[0_8px_24px_rgba(218,37,29,0.35),0_0_0_8px_rgba(218,37,29,0.08)] flex items-center justify-center transition-all hover:scale-[1.06] hover:shadow-[0_12px_32px_rgba(218,37,29,0.45),0_0_0_10px_rgba(218,37,29,0.12)]",style:{animation:"pulseRed 2.2s infinite"},children:[Q("img",{src:Pe,alt:"Vietnam29",className:"w-[38px] h-[38px] object-contain rounded-full"}),Q("span",{className:"absolute -top-1 -right-1 w-[14px] h-[14px] rounded-full bg-[#C1272D] border-2 border-white shadow-[0_0_0_3px_rgba(193,39,45,0.2)]"}),Q("span",{className:"absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-[#C1272D] text-white flex items-center justify-center",children:Q(pn,{className:"w-3 h-3"})})]}),A&&H("div",{className:"fixed bottom-0 right-0 md:bottom-[20px] md:right-[20px] z-[9999] w-full md:w-[390px] h-[100dvh] md:h-[600px] md:rounded-[20px] bg-white shadow-[0_20px_60px_rgba(51,51,51,0.18),0_0_0_1px_rgba(193,39,45,0.08)] border border-[#f0d1cf] flex flex-col overflow-hidden",children:[H("div",{className:"relative shrink-0 h-[76px] px-4 flex items-center gap-3 bg-gradient-to-b from-white via-[#fffcfb] to-[#fff5f4] border-b border-[#f3d6d4]",children:[Q("div",{className:"absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-[#C1272D] via-[#DA251D] to-[#8B1A1A]"}),Q("img",{src:Pe,alt:"logo",className:"w-[40px] h-[40px] object-contain rounded-full bg-white border border-[#f2c9c6] shadow-[0_2px_8px_rgba(193,39,45,0.12)]"}),H("div",{className:"min-w-0 flex-1",children:[H("div",{className:"flex items-center gap-1.5",children:[Q("span",{className:"font-bold text-[15px] text-[#222] tracking-tight",style:{fontFamily:"Be Vietnam Pro, Inter, sans-serif"},children:"Vietnam29"}),H("span",{className:"inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-[#fff0ef] border border-[#f5c6c3] text-[9px] font-semibold text-[#C1272D]",children:[Q(Qe,{className:"w-3 h-3"}),"AI REAL"]})]}),Q("div",{className:"text-[11px] text-[#7a6a68] leading-[14px] truncate",children:t==="VI"?"Cộng Đồng Số Việt Nam - Kết nối toàn cầu":"Vietnam Digital Community - Global Connect"})]}),H("div",{className:"flex items-center gap-1",children:[Q("button",{onClick:()=>n(t==="VI"?"EN":"VI"),className:"w-8 h-8 rounded-full bg-white border border-[#ecd0ce] flex items-center justify-center hover:bg-[#fff2f1] transition-colors",title:"Đổi ngôn ngữ",children:Q(gn,{className:"w-4 h-4 text-[#C1272D]"})}),Q("button",{onClick:()=>s(!0),className:"w-8 h-8 rounded-full bg-white border border-[#ecd0ce] flex items-center justify-center hover:bg-[#fff2f1] transition-colors",title:"Cài đặt API",children:Q(Bn,{className:"w-4 h-4 text-[#555]"})}),Q("button",{onClick:()=>e(!1),className:"w-8 h-8 rounded-full bg-[#1f1f1f] text-white flex items-center justify-center hover:bg-black transition-colors","aria-label":"Đóng",children:Q(gt,{className:"w-4 h-4"})})]})]}),H("div",{ref:K,className:"flex-1 overflow-y-auto px-3 py-3 space-y-3 bg-[radial-gradient(1200px_600px_at_0%_-10%,#fff1f0_0%,transparent_55%),radial-gradient(800px_400px_at_100%_0%,#fff8f6_0%,transparent_50%),#fffcfb] scrollbar-thin",children:[C.map((i)=>Q("div",{className:`flex ${i.role==="user"?"justify-end":"justify-start"}`,children:H("div",{className:`max-w-[84%] rounded-[16px] px-3.5 py-2.5 text-[13px] leading-[19px] shadow-[0_2px_10px_rgba(0,0,0,0.04)] ${i.role==="user"?"bg-[#C1272D] text-white rounded-br-[6px]":"bg-white border border-[#f2d3d1] text-[#333] rounded-bl-[6px]"}`,children:[i.role==="assistant"&&i.id==="welcome"&&H("div",{className:"flex items-center gap-1.5 mb-1.5",children:[Q("img",{src:Pe,alt:"logo inline",className:"w-[18px] h-[18px] object-contain rounded-full border border-[#f3c7c4]"}),Q("span",{className:"text-[11px] font-semibold text-[#C1272D]",children:"Vietnam29 AI"}),Q("span",{className:"text-[10px] text-[#a08a88]",children:i.time})]}),Q("div",{className:`${i.role==="assistant"?"text-[#2b2b2b]":"text-white"}`,dangerouslySetInnerHTML:Wg(i.content)}),i.role!=="assistant"||i.id==="welcome"?null:Q("div",{className:"mt-1 text-[10px] text-[#a0908e]",children:i.time})]})},i.id)),p&&Q("div",{className:"flex justify-start",children:H("div",{className:"bg-white border border-[#f2d3d1] rounded-[16px] rounded-bl-[6px] px-4 py-3 shadow-sm flex items-center gap-1.5",children:[Q("span",{className:"w-1.5 h-1.5 rounded-full bg-[#C1272D] animate-bounce",style:{animationDelay:"0ms"}}),Q("span",{className:"w-1.5 h-1.5 rounded-full bg-[#C1272D] animate-bounce",style:{animationDelay:"150ms"}}),Q("span",{className:"w-1.5 h-1.5 rounded-full bg-[#C1272D] animate-bounce",style:{animationDelay:"300ms"}})]})})]}),Q("div",{className:"shrink-0 px-3 pt-2 pb-1 bg-white border-t border-[#f7e1df]",children:Q("div",{className:"flex gap-1.5 overflow-x-auto scrollbar-thin pb-1",children:ts.map((i)=>H("button",{onClick:()=>a(i.prompt),className:"shrink-0 inline-flex items-center gap-1 px-2.5 py-1.5 rounded-full bg-[#fff4f3] border border-[#f2c8c5] text-[11px] font-medium text-[#7a2a26] hover:bg-[#C1272D] hover:text-white hover:border-[#C1272D] transition-colors",children:[Q("span",{children:i.icon}),Q("span",{children:t==="VI"?i.label:i.en})]},i.label))})}),H("div",{className:"shrink-0 p-3 bg-white border-t border-[#f1d3d0] flex items-center gap-2",children:[Q("div",{className:"flex-1 h-[42px] rounded-full bg-[#fff8f7] border border-[#f1ccc9] flex items-center px-3 focus-within:border-[#C1272D] focus-within:shadow-[0_0_0_3px_rgba(193,39,45,0.12)] transition-all",children:Q("input",{ref:d,value:g,onChange:(i)=>v(i.target.value),onKeyDown:(i)=>{if(i.key==="Enter"&&!i.shiftKey)i.preventDefault(),a(g)},placeholder:t==="VI"?"Nhập câu hỏi về ẩm thực, du lịch...":"Ask about cuisine, travel...",className:"flex-1 bg-transparent outline-none text-[13px] placeholder:text-[#b9a9a7]"})}),Q("button",{onClick:()=>a(g),disabled:!g.trim()||p,className:"w-[42px] h-[42px] rounded-full bg-[#C1272D] text-white flex items-center justify-center shadow-[0_6px_16px_rgba(193,39,45,0.32)] hover:bg-[#a81f24] disabled:opacity-40 disabled:cursor-not-allowed transition-colors",children:Q(vn,{className:"w-4 h-4 ml-[1px]"})})]}),H("div",{className:"shrink-0 h-[36px] px-3 flex items-center justify-between bg-gradient-to-r from-[#fffaf9] to-white border-t border-[#f6ddd9]",children:[H("div",{className:"flex items-center gap-1.5 min-w-0",children:[Q("img",{src:Pe,alt:"small",className:"w-[20px] h-[20px] object-contain rounded-full border border-[#f0c8c5] bg-white"}),Q("span",{className:"text-[10px] leading-[12px] text-[#8a6f6d] truncate",children:"Thành công của quý vị là Vinh dự - Tự hào của Vietnam29.com"})]}),H("span",{className:"text-[9px] text-[#b9a9a7] ml-2 shrink-0",children:["AI REAL • ",l]})]})]}),u&&H("div",{className:"fixed inset-0 z-[10000] flex items-end md:items-center justify-center p-0 md:p-4",children:[Q("div",{className:"absolute inset-0 bg-black/40 backdrop-blur-[2px]",onClick:()=>s(!1)}),H("div",{className:"relative w-full md:max-w-[420px] rounded-t-[20px] md:rounded-[20px] bg-white shadow-[0_20px_60px_rgba(0,0,0,0.25)] border border-[#f0d0ce] overflow-hidden",children:[Q("div",{className:"h-1 w-full bg-gradient-to-r from-[#C1272D] to-[#DA251D]"}),H("div",{className:"p-5",children:[H("div",{className:"flex items-center justify-between mb-4",children:[H("div",{className:"flex items-center gap-2",children:[Q("img",{src:Pe,alt:"logo",className:"w-7 h-7 rounded-full border border-[#f0c8c5]"}),Q("h3",{className:"font-bold text-[15px]",children:"Cài đặt AI REAL"})]}),Q("button",{onClick:()=>s(!1),className:"w-8 h-8 rounded-full bg-[#f7f1f0] flex items-center justify-center",children:Q(gt,{className:"w-4 h-4"})})]}),Q("label",{className:"text-[12px] font-semibold text-[#444]",children:"OpenAI API Key (chỉ lưu trong phiên)"}),Q("input",{value:r,onChange:(i)=>o(i.target.value),placeholder:"sk-proj-...",type:"password",className:"mt-1.5 w-full h-[42px] rounded-xl border border-[#e9c8c5] bg-[#fff9f8] px-3 text-[13px] outline-none focus:border-[#C1272D] focus:shadow-[0_0_0_3px_rgba(193,39,45,0.12)]"}),Q("p",{className:"mt-1.5 text-[11px] text-[#8a7a78] leading-[14px]",children:"Không có key? Chat vẫn chạy ở chế độ demo với câu trả lời mẫu Việt Nam. Key chỉ lưu trong bộ nhớ phiên hiện tại, không lưu trình duyệt."}),Q("label",{className:"mt-4 block text-[12px] font-semibold text-[#444]",children:"Model"}),Q("div",{className:"mt-1.5 grid grid-cols-3 gap-2",children:["gpt-4o-mini","gpt-4o","gpt-3.5-turbo"].map((i)=>Q("button",{onClick:()=>f(i),className:`h-[36px] rounded-full border text-[11px] font-medium transition-colors ${l===i?"bg-[#C1272D] text-white border-[#C1272D]":"bg-white border-[#e9c8c5] text-[#6a5a58] hover:border-[#C1272D]"}`,children:i},i))}),H("div",{className:"mt-4 rounded-xl bg-[#fff4f3] border border-[#f2c9c6] p-3 text-[11px] leading-[16px] text-[#7a3a37]",children:[Q("b",{children:"System Prompt:"})," ",es.slice(0,160),"..."]}),H("div",{className:"mt-5 flex gap-2",children:[Q("button",{onClick:()=>s(!1),className:"flex-1 h-[42px] rounded-full bg-[#C1272D] text-white font-semibold text-[13px] hover:bg-[#a81f24]",children:"Xong"}),Q("button",{onClick:()=>{o("")},className:"h-[42px] px-4 rounded-full bg-white border border-[#e9c8c5] text-[13px]",children:"Xóa key"})]}),Q("div",{className:"mt-3 text-center text-[10px] text-[#a99a98]",children:"Bảo mật: API key gửi trực tiếp tới api.openai.com, không qua server Vietnam29"})]})]})]}),Q("style",{children:`
@keyframes pulseRed {
0% { box-shadow: 0 8px 24px rgba(218,37,29,0.35), 0 0 0 0 rgba(218,37,29,0.28) }
70% { box-shadow: 0 8px 24px rgba(218,37,29,0.35), 0 0 0 12px rgba(218,37,29,0) }
100% { box-shadow: 0 8px 24px rgba(218,37,29,0.35), 0 0 0 0 rgba(218,37,29,0) }
}
`})]})}rs.createRoot(document.getElementById("root")).render(Q(ns.default.StrictMode,{children:Q(df,{})}));
Đánh giá
Chưa có đánh giá nào.