HalloTadz NIB

import React, { useState, useRef, useEffect } from “react”; const YAYASAN_PROGRAMS = [ { id: “zakat-infaq”, label: “Zakat & Infaq”, desc: “Tunaikan zakat, infaq & sedekah lewat kanal resmi ZISWAF” }, { id: “wakaf”, label: “Wakaf Pembangunan”, desc: “Wakaf untuk pembangunan masjid & ma’had Nahrul Ilmi” }, { id: “izzah”, label: “Program IZZAH”, desc: “Pemberdayaan ekonomi mustahik lewat zakat produktif” }, ]; const YAYASAN_URL = “https://peduli.nahrulilmibandung.com”; const TOPICS = [ { id: “sholat”, label: “Sholat”, q: “Bagaimana hukum sholat jamak qashar saat safar?” }, { id: “puasa”, label: “Puasa”, q: “Apa saja yang membatalkan puasa Ramadhan?” }, { id: “zakat”, label: “Zakat”, q: “Bagaimana cara menghitung zakat mal untuk tabungan?” }, { id: “muamalah”, label: “Muamalah”, q: “Apakah jual beli kredit dengan bunga termasuk riba?” }, { id: “nikah”, label: “Nikah”, q: “Apa syarat sah pernikahan dalam Islam?” }, { id: “waris”, label: “Waris”, q: “Bagaimana pembagian warisan jika hanya ada anak perempuan?” }, ]; const SYSTEM_PROMPT = `Kamu adalah “Ustadz AI” pada platform HalloTadz, sebuah layanan tanya-jawab keislaman berbasis chat. Peranmu: – Menjawab pertanyaan seputar fiqih dan keislaman dengan bahasa Indonesia yang santun, hangat, dan mudah dipahami, seperti seorang ustadz yang berbicara kepada jamaahnya. – Berdasarkan sumber-sumber yang mu’tabar (Al-Qur’an, hadits shahih, serta pendapat ulama dari mazhab Syafi’i, Hanafi, Maliki, dan Hanbali). – Ketika ada perbedaan pendapat ulama (khilafiyah), sebutkan secara ringkas pandangan utama dan mazhab yang berbeda, jangan memaksakan satu pendapat sebagai satu-satunya yang benar, kecuali untuk perkara yang sudah menjadi ijma’ (konsensus). – Gunakan format jawaban yang terstruktur bila perlu (poin-poin), tapi tetap terasa seperti percakapan, bukan artikel kaku. – Untuk pertanyaan yang sifatnya personal, sensitif, atau berdampak hukum besar (misalnya: perceraian, waris dengan kondisi keluarga rumit, kasus pidana syariah, vonis kafir/halal-haram pada individu tertentu), jawab dengan prinsip umum lalu sampaikan dengan jelas bahwa untuk keputusan final sebaiknya berkonsultasi langsung dengan ustadz/lembaga fatwa resmi setempat. – Jangan pernah mengklaim dirimu adalah ustadz sungguhan atau memiliki otoritas fatwa resmi. Kamu adalah asisten AI yang membantu memberikan pemahaman awal. – Jika pertanyaan di luar topik keislaman, arahkan dengan sopan bahwa HalloTadz berfokus pada tanya-jawab keislaman. – Tutup jawaban untuk topik yang cukup berat/personal dengan satu kalimat singkat yang mengingatkan untuk konsultasi lebih lanjut dengan ustadz terpercaya, tanpa berlebihan atau diulang-ulang di setiap jawaban ringan. Jawablah singkat-padat untuk pertanyaan sederhana, dan lebih lengkap untuk pertanyaan yang memang membutuhkan penjelasan.`; function useAutoScroll(dep) { const ref = useRef(null); useEffect(() => { if (ref.current) ref.current.scrollTop = ref.current.scrollHeight; }, [dep]); return ref; } function Star({ className, size = 16 }) { return ( ); } export default function HalloTadz() { const [messages, setMessages] = useState([ { role: “assistant”, content: “Assalamu’alaikum, selamat datang di HalloTadz \uD83C\uDF19\n\nSaya di sini untuk membantu menjawab pertanyaan seputar fiqih dan keislaman sehari-hari. Silakan ketik pertanyaan Anda, atau pilih salah satu topik di samping.”, }, ]); const [input, setInput] = useState(“”); const [loading, setLoading] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false); const scrollRef = useAutoScroll(messages.length + (loading ? 1 : 0)); async function sendMessage(text) { const question = (text ?? input).trim(); if (!question || loading) return; const nextMessages = […messages, { role: “user”, content: question }]; setMessages(nextMessages); setInput(“”); setLoading(true); try { const response = await fetch(“https://api.anthropic.com/v1/messages”, { method: “POST”, headers: { “Content-Type”: “application/json” }, body: JSON.stringify({ model: “claude-sonnet-4-6”, max_tokens: 1000, system: SYSTEM_PROMPT, messages: nextMessages.map((m) => ({ role: m.role, content: m.content })), }), }); const data = await response.json(); const text = data?.content ?.map((block) => (block.type === “text” ? block.text : “”)) .filter(Boolean) .join(“\n”) || “Maaf, saya belum bisa menjawab pertanyaan ini. Silakan coba lagi.”; setMessages((prev) => […prev, { role: “assistant”, content: text }]); } catch (err) { setMessages((prev) => [ …prev, { role: “assistant”, content: “Maaf, terjadi kendala saat menghubungi layanan. Silakan coba kirim ulang pertanyaan Anda.”, }, ]); } finally { setLoading(false); } } return (