705 lines
28 KiB
HTML
705 lines
28 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Cet ci pi ti</title>
|
|
<style>
|
|
:root {
|
|
/* Light theme */
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f3f4f6;
|
|
--bg-input: #ffffff;
|
|
--bg-user-message: #3b82f6;
|
|
--bg-code: #f0f0f0;
|
|
--text-primary: #1f2937;
|
|
--text-user: #ffffff;
|
|
--text-secondary: #6b7280;
|
|
--border-color: #e5e7eb;
|
|
--hover-bg: #e5e7eb;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-primary: #1f2937;
|
|
--bg-secondary: #111827;
|
|
--bg-input: #374151;
|
|
--bg-user-message: #2563eb;
|
|
--bg-code: #242f48;
|
|
--text-primary: #f3f4f6;
|
|
--text-user: #ffffff;
|
|
--text-secondary: #d1d5db;
|
|
--border-color: #4b5563;
|
|
--hover-bg: #374151;
|
|
}
|
|
}
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
font-family: "JetBrains Mono", Consolas, Menlo, monospace;
|
|
line-height: 1.6;
|
|
font-size: 14px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
transition:
|
|
background-color 0.2s,
|
|
color 0.2s;
|
|
}
|
|
input {
|
|
line-height: inherit;
|
|
font-family: inherit;
|
|
}
|
|
|
|
td + td,
|
|
th + td {
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.chat-container {
|
|
height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: 1fr min-content;
|
|
grid-template-rows: 1fr min-content;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
grid-template-areas: "messages messages" "prompt submit";
|
|
background: var(--bg-primary);
|
|
}
|
|
.messages {
|
|
grid-area: messages;
|
|
overflow-y: auto;
|
|
padding-right: 0.5rem;
|
|
}
|
|
.message {
|
|
padding: 0.8rem 1.2rem;
|
|
border-radius: 0.8rem;
|
|
max-width: 85%;
|
|
margin-top: 1rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.message :is(textarea) {
|
|
display: block;
|
|
}
|
|
|
|
.user-message {
|
|
margin-left: auto;
|
|
background: var(--bg-user-message);
|
|
color: var(--text-user);
|
|
}
|
|
|
|
.user-message > div {
|
|
color: var(--text-user);
|
|
margin-left: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
.system-message {
|
|
background: var(--bg-secondary);
|
|
margin-right: auto;
|
|
color: var(--text-primary);
|
|
}
|
|
.system-message pre {
|
|
position: relative;
|
|
padding: 0.5rem 2.5rem 0.5rem 0.5rem;
|
|
background: var(--bg-code);
|
|
border-radius: 0.4rem;
|
|
white-space: pre;
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
overflow-x: auto;
|
|
}
|
|
.copy-btn {
|
|
position: absolute;
|
|
top: 0.4rem;
|
|
right: 0.6rem;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.3rem;
|
|
padding: 0.2rem 0.6rem;
|
|
font-size: 0.9em;
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.copy-btn:hover {
|
|
opacity: 1;
|
|
}
|
|
.prompt {
|
|
grid-area: prompt;
|
|
min-height: 40px;
|
|
padding: 0.8rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.4rem;
|
|
resize: vertical;
|
|
font-size: inherit;
|
|
background: var(--bg-input);
|
|
color: var(--text-primary);
|
|
transition:
|
|
background-color 0.2s,
|
|
color 0.2s;
|
|
}
|
|
.prompt::placeholder {
|
|
color: var(--text-secondary);
|
|
}
|
|
.submit {
|
|
font-size: inherit;
|
|
grid-area: submit;
|
|
cursor: pointer;
|
|
padding: 0.8rem 2rem;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.4rem;
|
|
transition:
|
|
background-color 0.2s,
|
|
color 0.2s;
|
|
}
|
|
.submit:hover {
|
|
background: var(--hover-bg);
|
|
}
|
|
@keyframes pulse {
|
|
20% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
.submit.busy {
|
|
animation: both pulse 1s infinite;
|
|
}
|
|
.model-opt__label:has(input[checked]) {
|
|
font-weight: 700;
|
|
}
|
|
#model-selector,
|
|
#history-panel {
|
|
font-size: 0.8em;
|
|
position: absolute;
|
|
border-radius: 0.5rem;
|
|
top: 1rem;
|
|
opacity: 0.3;
|
|
padding: 0.5rem;
|
|
cursor: pointer;
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
transition:
|
|
opacity 0.2s,
|
|
background-color 0.2s;
|
|
}
|
|
:is(#model-selector, #history-panel):hover {
|
|
opacity: 0.7;
|
|
background-color: var(--hover-bg);
|
|
}
|
|
#model-selector {
|
|
left: 1rem;
|
|
}
|
|
#history-panel {
|
|
right: 1rem;
|
|
}
|
|
#model-selector:is(:hover, [open]),
|
|
#history-panel:is(:hover, [open]) {
|
|
opacity: 1;
|
|
}
|
|
.history-list {
|
|
min-width: 220px;
|
|
max-width: 320px;
|
|
padding-top: 0.5rem;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.4rem;
|
|
padding: 0.5rem;
|
|
}
|
|
.history-item {
|
|
cursor: pointer;
|
|
padding: 0.25rem 0.2rem;
|
|
border-radius: 0.2rem;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.history-item:hover {
|
|
background: var(--hover-bg);
|
|
}
|
|
.history-time {
|
|
font-weight: 700;
|
|
color: var(--text-secondary);
|
|
}
|
|
.history-time::after {
|
|
content: " - ";
|
|
}
|
|
.history-excerpt {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 220px;
|
|
color: var(--text-secondary);
|
|
}
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
|
|
.spinner {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
background: #888;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
animation: grow 1s ease-in infinite;
|
|
}
|
|
|
|
@keyframes grow {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" x-data="chatApp()" x-cloak>
|
|
<div class="chat-container">
|
|
<!-- Messages -->
|
|
<div class="messages" x-ref="msgBox" @click="onClickMessage" @scroll="handleScroll">
|
|
<template x-for="(msg, idx) in visibleMessages" :key="idx">
|
|
<div :class="msg.role === 'user' ? 'message user-message' : 'message system-message'">
|
|
<template x-if="msg.role === 'user'">
|
|
<div x-text="msg.content"></div>
|
|
</template>
|
|
<template x-if="msg.role === 'assistant'">
|
|
<div x-html="renderMarkdown(msg.content)"></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<div class="message system-message" x-show="isBusy" x-ref="incomingMessage"><span class="spinner"></span></div>
|
|
</div>
|
|
|
|
<!-- Textarea -->
|
|
<textarea
|
|
class="prompt"
|
|
placeholder="Type your message..."
|
|
x-model="promptText"
|
|
x-ref="promptInput"
|
|
:rows="inputRows"
|
|
@keydown.ctrl.enter="handleSubmit"
|
|
@keydown.meta.enter="handleSubmit"
|
|
></textarea>
|
|
|
|
<!-- Action Button -->
|
|
<button class="submit" :class="isBusy && 'busy'" @click="isBusy ? abort() : handleSubmit()" x-text="isBusy ? 'Cancel' : 'Send'"></button>
|
|
|
|
<!-- Model Selector -->
|
|
<details id="model-selector">
|
|
<summary x-text="'Model: ' + activeModelName"></summary>
|
|
<template x-for="m in models" :key="m.name">
|
|
<label class="model-opt__label" style="display: block">
|
|
<input type="radio" :value="m.name" x-model="activeModelName" />
|
|
<span x-text="m.name"></span>
|
|
</label>
|
|
</template>
|
|
</details>
|
|
|
|
<!-- History -->
|
|
<details id="history-panel" x-ref="historyPanel">
|
|
<summary>History</summary>
|
|
<div class="history-list">
|
|
<template x-if="historyItems.length === 0">
|
|
<div style="opacity: 0.7">No conversations today</div>
|
|
</template>
|
|
<template x-for="(item, idx) in historyItems" :key="idx">
|
|
<div class="history-item" @click="restoreConversation(item.messages)">
|
|
<span class="history-time" x-text="formatTime(item.time)"></span>
|
|
<span class="history-excerpt" x-text="getExcerpt(item.messages)"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<script defer src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
|
|
|
|
<script type="module">
|
|
import Alpine from "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/module.esm.js";
|
|
|
|
window.env ??= {};
|
|
const systemPrompt = `
|
|
You are a helpful AI assistant.
|
|
- Do not preach about implications, do not praise excessively.
|
|
- Keep a critical mindset, do not assume blindly.
|
|
- Answer in valid markdown only, no exceptions.
|
|
|
|
- When I ask something about code, or software development, keep in mind that I am a senior backend developer (but do not mention that explicitly), and do not explain excessively, but and challenge my statements with better alternatives if I don't sound right, especially in coding. Do not bring it up otherwise.
|
|
- Do not give me code if the topic is not about programming or software development.
|
|
`
|
|
.replace(/^\s+/gm, "")
|
|
.trim();
|
|
|
|
const chatApp = () => ({
|
|
messages: [{ role: "system", content: systemPrompt }],
|
|
promptText: window.env.PROMPT ? `${window.env.PROMPT}\n\n` : "",
|
|
activeModelName: "gemini-3-flash-preview",
|
|
historyItems: [],
|
|
isBusy: false,
|
|
abortController: null,
|
|
userHasScrolledUp: false,
|
|
sessionId: null,
|
|
|
|
models: [
|
|
{ name: "gpt-4.1", chat: chatWithOpenAI, key: "OPENAI_API_KEY" },
|
|
{ name: "gpt-4.1-mini", chat: chatWithOpenAI, key: "OPENAI_API_KEY" },
|
|
{ name: "gemini-3-flash-preview", chat: chatWithGemini, key: "GEMINI_API_KEY" },
|
|
{ name: "claude-haiku-4-5-20251001", chat: chatWithClaude, key: "ANTHROPIC_API_KEY" },
|
|
],
|
|
|
|
async init() {
|
|
this.sessionId = +new Date();
|
|
this.historyItems = loadHistory();
|
|
setTimeout(() => this.$refs.promptInput.focus(), 0);
|
|
},
|
|
|
|
async onClickMessage(e) {
|
|
if (e.target.classList.contains("copy-btn")) {
|
|
const $btn = e.target;
|
|
const code = $btn.closest("pre").querySelector("code").innerText;
|
|
copyToClipboard(code);
|
|
|
|
const buttonText = $btn.textContent;
|
|
$btn.textContent = "Copied!";
|
|
setTimeout(() => ($btn.textContent = buttonText), 1200);
|
|
}
|
|
},
|
|
|
|
get visibleMessages() {
|
|
return this.messages.filter((m) => m.role !== "system");
|
|
},
|
|
|
|
get inputRows() {
|
|
return Math.min(10, Math.max(2, this.promptText.split("\n").length)) + 1;
|
|
},
|
|
|
|
handleScroll() {
|
|
const el = this.$refs.msgBox;
|
|
this.userHasScrolledUp = el.scrollHeight - el.clientHeight - el.scrollTop > 100;
|
|
},
|
|
|
|
scrollToBottom() {
|
|
if (!this.userHasScrolledUp) {
|
|
this.$nextTick(() => {
|
|
this.$refs.msgBox.scrollTop = this.$refs.msgBox.scrollHeight;
|
|
});
|
|
}
|
|
},
|
|
|
|
formatTime: (iso) => new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
|
|
getExcerpt: (msgs) => msgs.find((m) => m.role === "user")?.content.slice(0, 30) || "Empty chat",
|
|
|
|
renderMarkdown,
|
|
async handleSubmit() {
|
|
const text = this.promptText.trim();
|
|
if (!text || this.isBusy) return;
|
|
|
|
this.messages.push({ role: "user", content: text });
|
|
this.promptText = "";
|
|
this.isBusy = true;
|
|
this.abortController = new AbortController();
|
|
|
|
// Streaming setup
|
|
const target = this.$refs.incomingMessage;
|
|
this.$refs.incomingMessage.innerHTML = "";
|
|
let fullResponse = "";
|
|
|
|
this.scrollToBottom();
|
|
|
|
try {
|
|
const modelObj = this.models.find((m) => m.name === this.activeModelName);
|
|
await modelObj.chat({
|
|
model: this.activeModelName,
|
|
apiKey: window.env[modelObj.key],
|
|
messages: this.messages,
|
|
signal: this.abortController.signal,
|
|
onContent: (chunk) => {
|
|
fullResponse += chunk;
|
|
target.innerHTML = renderMarkdown(fullResponse);
|
|
this.scrollToBottom();
|
|
},
|
|
onError: (e) => {
|
|
fullResponse += `\n\n[Error: ${e.message}]`;
|
|
target.innerHTML = renderMarkdown(fullResponse);
|
|
this.scrollToBottom();
|
|
},
|
|
});
|
|
|
|
if (fullResponse) {
|
|
this.messages.push({ role: "assistant", content: fullResponse });
|
|
window.lastResponse = fullResponse;
|
|
}
|
|
} catch (err) {
|
|
const note = err.name === "AbortError" ? "\n\n[Cancelled]" : `\n\n[Error: ${err.message}]`;
|
|
this.messages.push({ role: "assistant", content: fullResponse + note });
|
|
} finally {
|
|
this.isBusy = false;
|
|
this.abortController = null;
|
|
updateSessionHistory(this.sessionId, this.messages);
|
|
}
|
|
},
|
|
|
|
abort() {
|
|
this.abortController?.abort();
|
|
},
|
|
|
|
restoreConversation(msgs) {
|
|
this.messages = JSON.parse(JSON.stringify(msgs));
|
|
this.userHasScrolledUp = false;
|
|
this.$refs.historyPanel.removeAttribute("open");
|
|
this.scrollToBottom();
|
|
},
|
|
});
|
|
|
|
function attachCopyButtons($el) {
|
|
$el.querySelectorAll("pre").forEach(($pre) => {
|
|
if (!$pre.querySelector(".copy-btn")) {
|
|
const $btn = document.createElement("button");
|
|
$btn.className = "copy-btn";
|
|
$btn.textContent = "Copy";
|
|
$pre.appendChild($btn);
|
|
}
|
|
});
|
|
}
|
|
|
|
const md = markdownit({ html: false });
|
|
function renderMarkdown(markdown) {
|
|
const $placeholder = document.createElement("div");
|
|
$placeholder.innerHTML = md.render(markdown);
|
|
attachCopyButtons($placeholder);
|
|
return $placeholder.innerHTML;
|
|
}
|
|
|
|
async function chatWithOpenAI({ baseUrl = "https://api.openai.com/v1", onContent, onError, messages, signal, apiKey, model, extraHeaders = {}, ...rest }) {
|
|
const response = await fetch(`${baseUrl}/chat/completions`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}`, ...extraHeaders },
|
|
body: JSON.stringify({ model, messages, stream: true, ...rest }),
|
|
signal,
|
|
});
|
|
if (!response.ok) {
|
|
const text = await response.text();
|
|
await onError?.(new Error(`HTTP ${response.status}:\n${text.trim()}`));
|
|
return;
|
|
}
|
|
const reader = response.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
const text = decoder.decode(value, { stream: true });
|
|
const lines = text
|
|
.split("\n\n")
|
|
.filter((l) => !!l.trim())
|
|
.map((l) => l.trim().replace("data: ", ""));
|
|
for (const line of lines) {
|
|
if (line === "[DONE]") return;
|
|
try {
|
|
const content = JSON.parse(line).choices[0].delta.content;
|
|
if (content) await onContent(content);
|
|
} catch (e) {}
|
|
}
|
|
}
|
|
}
|
|
|
|
async function chatWithClaude(args) {
|
|
return chatWithOpenAI({
|
|
...args,
|
|
baseUrl: "https://api.anthropic.com/v1",
|
|
extraHeaders: {
|
|
"x-api-key": args.apiKey,
|
|
"anthropic-version": "2023-06-01",
|
|
"anthropic-dangerous-direct-browser-access": "true",
|
|
},
|
|
apiKey: window.env.ANTHROPIC_API_KEY,
|
|
});
|
|
}
|
|
|
|
async function chatWithGemini({ onContent, onError, messages, signal, apiKey = window.env.GEMINI_API_KEY, model, ...rest }) {
|
|
const contents = messages.map((msg, i, arr) => {
|
|
const role = msg.role === "assistant" ? "model" : "user";
|
|
let parts = [{ text: msg.content }];
|
|
|
|
// Add YouTube URLs as file data for the final user message
|
|
const isLastMessage = i === arr.length - 1;
|
|
if (isLastMessage && role === "user") {
|
|
const youtubeUrlPattern = /https?:\/\/(www\.)?youtube\.com\/watch\?v=[\w-]+|https?:\/\/youtu\.be\/[\w-]+/g;
|
|
const youtubeUrls = msg.content.match(youtubeUrlPattern) || [];
|
|
const fileParts = youtubeUrls.map((url) => ({ file_data: { file_uri: url } }));
|
|
parts = [...parts, ...fileParts];
|
|
}
|
|
|
|
return {
|
|
role,
|
|
parts,
|
|
};
|
|
});
|
|
|
|
try {
|
|
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${model}:streamGenerateContent?key=${apiKey}`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
contents,
|
|
generationConfig: rest,
|
|
}),
|
|
signal,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const text = await response.text();
|
|
await onError?.(new Error(`Gemini API Error ${response.status}: ${text}`));
|
|
return;
|
|
}
|
|
|
|
const reader = response.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = "";
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
|
|
buffer += decoder.decode(value, { stream: true });
|
|
|
|
let pos = 0;
|
|
while (pos < buffer.length) {
|
|
// Find start of JSON object
|
|
const start = buffer.indexOf("{", pos);
|
|
if (start === -1) break;
|
|
|
|
// Find matching closing brace
|
|
let depth = 0;
|
|
let inString = false;
|
|
let escaped = false;
|
|
let end = -1;
|
|
|
|
for (let i = start; i < buffer.length; i++) {
|
|
const ch = buffer[i];
|
|
|
|
if (escaped) {
|
|
escaped = false;
|
|
continue;
|
|
}
|
|
|
|
if (ch === "\\") {
|
|
escaped = true;
|
|
continue;
|
|
}
|
|
|
|
if (ch === '"') {
|
|
inString = !inString;
|
|
continue;
|
|
}
|
|
|
|
if (!inString) {
|
|
if (ch === "{") depth++;
|
|
else if (ch === "}") {
|
|
depth--;
|
|
if (depth === 0) {
|
|
end = i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (end === -1) {
|
|
// Incomplete JSON, keep it in buffer
|
|
buffer = buffer.slice(start);
|
|
break;
|
|
}
|
|
|
|
// Parse and process JSON
|
|
try {
|
|
const json = JSON.parse(buffer.slice(start, end + 1));
|
|
const parts = json.candidates?.[0]?.content?.parts || [];
|
|
const text = parts
|
|
.filter((p) => p.text)
|
|
.map((p) => p.text)
|
|
.join("");
|
|
|
|
if (text) await onContent(text);
|
|
} catch (e) {
|
|
// Ignore parse errors
|
|
}
|
|
|
|
pos = end + 1;
|
|
}
|
|
|
|
// Keep only unparsed remainder
|
|
buffer = buffer.slice(pos);
|
|
}
|
|
} catch (err) {
|
|
if (err.name !== "AbortError") await onError?.(err);
|
|
}
|
|
}
|
|
|
|
function copyToClipboard(text) {
|
|
const textarea = document.createElement("textarea");
|
|
textarea.value = text;
|
|
textarea.style.position = "fixed";
|
|
textarea.style.opacity = "0";
|
|
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
|
|
try {
|
|
document.execCommand("copy");
|
|
console.log("Copied!");
|
|
} catch (err) {
|
|
console.error("Failed to copy:", err);
|
|
}
|
|
|
|
document.body.removeChild(textarea);
|
|
}
|
|
|
|
const STORAGE_KEY = "chat_conversations";
|
|
const todayKey = () => new Date().toISOString().slice(0, 10);
|
|
|
|
const loadHistory = () => {
|
|
try {
|
|
return JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}")[todayKey()] || [];
|
|
} catch {
|
|
return [];
|
|
}
|
|
};
|
|
|
|
const updateSessionHistory = (sessionId, messages) => {
|
|
const all = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
|
|
const today = todayKey();
|
|
all[today] ??= [];
|
|
|
|
const idx = all[today].findIndex((item) => item.sessionId === sessionId);
|
|
if (idx >= 0) {
|
|
all[today][idx] = { sessionId, time: all[today][idx].time, messages };
|
|
} else {
|
|
all[today].unshift({ sessionId, time: new Date().toISOString(), messages });
|
|
}
|
|
|
|
all[today] = all[today].slice(0, 5);
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
|
|
return all[today];
|
|
};
|
|
|
|
document.addEventListener("alpine:init", () => {
|
|
Alpine.data("chatApp", chatApp);
|
|
});
|
|
Alpine.start();
|
|
</script>
|
|
</body>
|
|
</html>
|