| Server IP : 69.72.244.102 / Your IP : 216.73.216.164 Web Server : LiteSpeed System : Linux s3434.fra1.stableserver.net 4.18.0-513.24.1.lve.2.el8.x86_64 #1 SMP Fri May 24 12:42:50 UTC 2024 x86_64 User : konzalta ( 1271) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/konzalta/juris.konzaltant.com/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lextan Legal Research AI</title>
<meta name="description" content="Lextan — Your Tanzanian Legal Research AI Assistant">
<style>
#lex-wrapper {
max-width: 960px;
margin: 60px auto;
padding: 0 16px;
}
.lex-card {
background: #ffffff;
border-radius: 18px;
padding: 24px 22px 26px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
border: 1px solid #e2e8f0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.lex-title {
margin: 0 0 4px;
font-size: 26px;
font-weight: 800;
color: #0b2a5b;
}
.lex-subtitle {
margin: 0 0 18px;
color: #4b5563;
font-size: 14px;
}
.lex-form {
margin-bottom: 14px;
}
.lex-label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 13px;
color: #111827;
}
.lex-textarea {
width: 100%;
border-radius: 14px;
border: 1px solid #cbd5e1;
padding: 10px 11px;
resize: vertical;
font-size: 14px;
outline: none;
transition: all 0.15s ease;
}
.lex-textarea:focus {
border-color: #0b2a5b;
box-shadow: 0 0 0 2px rgba(11, 42, 91, 0.08);
}
.lex-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
}
.lex-btn {
background: #0b2a5b;
color: #ffffff;
border: none;
padding: 8px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
}
.lex-btn:hover {
background: #123b80;
transform: translateY(-1px);
}
.lex-status {
font-size: 12px;
color: #6b7280;
}
.lex-messages {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Message bubbles */
.lex-msg-user,
.lex-msg-ai {
font-size: 13px;
}
.lex-msg-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: #9ca3af;
text-transform: uppercase;
margin-bottom: 3px;
}
.lex-msg-user-bubble {
background: #eff6ff;
color: #111827;
padding: 8px 10px;
border-radius: 14px;
align-self: flex-end;
max-width: 90%;
}
.lex-msg-ai-card {
border-radius: 14px;
border: 1px solid #e5e7eb;
background: #f9fafb;
padding: 9px 9px 6px;
position: relative;
max-width: 100%;
}
/* Collapse + PDF actions */
.lex-ai-actions {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 4px;
}
.lex-mini-btn {
border: none;
background: #e5e7eb;
color: #374151;
font-size: 10px;
padding: 3px 7px;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.lex-mini-btn:hover {
background: #d1d5db;
}
/* Markdown / table styling inside AI content */
.lex-ai-content h1,
.lex-ai-content h2,
.lex-ai-content h3 {
margin-top: 6px;
margin-bottom: 4px;
color: #0b2a5b;
font-weight: 700;
font-size: 14px;
}
.lex-ai-content p {
margin: 2px 0 3px;
line-height: 1.5;
}
.lex-ai-content ul,
.lex-ai-content ol {
margin: 3px 0 4px 16px;
padding-left: 14px;
}
.lex-ai-content table {
width: 100%;
border-collapse: collapse;
margin: 6px 0 4px;
font-size: 11px;
}
.lex-ai-content th,
.lex-ai-content td {
border: 1px solid #e5e7eb;
padding: 4px 6px;
vertical-align: top;
text-align: left;
}
.lex-ai-content th {
background-color: #0b2a5b;
color: #ffffff;
font-weight: 600;
}
.lex-ai-content tr:nth-child(even) td {
background-color: #f9fafb;
}
.lex-ai-content code {
background: #e5e7eb;
padding: 1px 3px;
border-radius: 4px;
font-size: 10px;
}
</style>
</head>
<body>
<header>
<h1></h1>
<p></p>
</header>
<section id="lex-wrapper">
<div class="lex-card">
<h2 class="lex-title">Lextan Legal Research AI</h2>
<p class="lex-subtitle">
Ask authoritative questions on Tanzanian law, jurisprudence, and statutory interpretation.
</p>
<form id="lex-form" class="lex-form">
<label for="lex-input" class="lex-label">Your question</label>
<textarea id="lex-input" class="lex-textarea" rows="3"
placeholder="e.g., Summarize key Tanzanian land-law cases on limitation periods."></textarea>
<div class="lex-actions">
<button id="lex-submit" type="submit" class="lex-btn">
Ask Lextan
</button>
<span id="lex-status" class="lex-status"></span>
</div>
</form>
<div id="lex-messages" class="lex-messages">
<!-- Messages appear here -->
</div>
</div>
</section>
<!-- Markdown parser -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- html2pdf for PDF downloads -->
<script src="https://cdn.jsdelivr.net/npm/html2pdf.js@0.9.3/dist/html2pdf.bundle.min.js"></script>
<script>
(() => {
const form = document.getElementById('lex-form');
const input = document.getElementById('lex-input');
const statusEl = document.getElementById('lex-status');
const messages = document.getElementById('lex-messages');
const MODEL = "gpt-4o-mini"; // use the model configured for your DO agent
function addUserMessage(text) {
const wrap = document.createElement('div');
wrap.className = 'lex-msg-user';
wrap.innerHTML = `
<div class="lex-msg-label">You</div>
<div class="lex-msg-user-bubble">${escapeHtml(text)}</div>
`;
messages.appendChild(wrap);
}
function addAIMessage(mdText) {
const id = 'lex-ai-' + Date.now() + '-' + Math.floor(Math.random() * 9999);
// Clean markdown if needed (fixes any weird pipes/spaces)
const cleaned = mdText
.replace(/\|\s*\|\s*\|/g, '|')
.trim();
const html = marked.parse(cleaned);
const wrap = document.createElement('div');
wrap.className = 'lex-msg-ai';
wrap.innerHTML = `
<div class="lex-msg-label">Lextan</div>
<div class="lex-msg-ai-card">
<div id="${id}" class="lex-ai-content">
${html}
</div>
<div class="lex-ai-actions">
<button type="button" class="lex-mini-btn" data-toggle="${id}">
▾ Collapse
</button>
<button type="button" class="lex-mini-btn" data-pdf="${id}">
⬇ PDF
</button>
</div>
</div>
`;
messages.appendChild(wrap);
// Scroll to latest
messages.scrollTop = messages.scrollHeight;
}
function escapeHtml(str) {
return str.replace(/[&<>"']/g, c => ({
'&': '&', '<': '<', '>': '>',
'"': '"', "'": '''
}[c]));
}
// Handle collapses + PDF on clicks
messages.addEventListener('click', (e) => {
const toggleId = e.target.getAttribute('data-toggle');
const pdfId = e.target.getAttribute('data-pdf');
if (toggleId) {
const el = document.getElementById(toggleId);
if (!el) return;
const btn = e.target;
const hidden = el.style.display === 'none';
el.style.display = hidden ? 'block' : 'none';
btn.textContent = hidden ? '▾ Collapse' : '▸ Expand';
}
if (pdfId) {
const el = document.getElementById(pdfId);
if (!el) return;
const opt = {
margin: 10,
filename: 'Lextan-opinion.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
html2pdf().from(el).set(opt).save();
}
});
form.addEventListener('submit', async (e) => {
e.preventDefault();
const question = input.value.trim();
if (!question) return;
addUserMessage(question);
input.value = '';
statusEl.textContent = "Thinking…";
try {
const res = await fetch("/agent.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model: MODEL,
messages: [
{
role: "system",
content: "You are Lextan, an authoritative Tanzanian legal research assistant. " +
"Use the linked knowledge base to provide precise, citation-backed insights. " +
"Format outputs with clear headings, bullet points, and tables where helpful."
},
{ role: "user", content: question }
],
temperature: 0.15
})
});
if (!res.ok) {
const errText = await res.text();
throw new Error(errText || ("HTTP " + res.status));
}
const data = await res.json();
const answer = data?.choices?.[0]?.message?.content || "No answer returned.";
addAIMessage(answer);
statusEl.textContent = "";
} catch (err) {
console.error(err);
statusEl.textContent = "Error. Please try again.";
addAIMessage("Sorry, something went wrong retrieving this opinion. Please try again in a moment.");
}
});
})();
</script>
<!-- Chatbot widget -->
<script async
src="https://cna2xqlek2yifefivhw67rsq.agents.do-ai.run/static/chatbot/widget.js"
data-agent-id="d725b556-b591-11f0-b074-4e013e2ddde4"
data-chatbot-id="XSiNztkL5fez8gxXRQ3DrfjRUGYGLX2W"
data-name="LexTanza Chatbot"
data-primary-color="#031B4E"
data-secondary-color="#E5E8ED"
data-button-background-color="#0061EB"
data-starting-message="Hello! How can I help you today?"
data-logo="/static/chatbot/icons/default-agent.svg">
</script>
</body>
</html>