Bucket Chat: Slack-like app with persistent storage

Dockerfile

@@ -0,0 +1,6 @@
+FROM python:3.11-slim
+WORKDIR /app
+COPY app.py .
+RUN pip install flask
+EXPOSE 7860
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,8 @@
+---
+title: Bucket Chat
+emoji: 💬
+colorFrom: gray
+colorTo: gray
+sdk: docker
+pinned: false
+---

app.py

@@ -0,0 +1,637 @@
+import os
+import json
+import uuid
+import sqlite3
+from datetime import datetime
+from functools import wraps
+from flask import Flask, request, jsonify, make_response, send_from_directory
+
+app = Flask(__name__)
+
+DATA_DIR = "/data"
+DB_PATH = os.path.join(DATA_DIR, "chat.db")
+
+
+def get_db():
+    os.makedirs(DATA_DIR, exist_ok=True)
+    conn = sqlite3.connect(DB_PATH)
+    conn.row_factory = sqlite3.Row
+    conn.execute("PRAGMA journal_mode=WAL")
+    conn.execute("PRAGMA foreign_keys=ON")
+    return conn
+
+
+def init_db():
+    db = get_db()
+    db.executescript("""
+        CREATE TABLE IF NOT EXISTS users (
+            id TEXT PRIMARY KEY,
+            name TEXT NOT NULL,
+            color TEXT NOT NULL,
+            created_at TEXT NOT NULL
+        );
+        CREATE TABLE IF NOT EXISTS channels (
+            id TEXT PRIMARY KEY,
+            name TEXT NOT NULL UNIQUE,
+            created_by TEXT NOT NULL,
+            created_at TEXT NOT NULL
+        );
+        CREATE TABLE IF NOT EXISTS messages (
+            id TEXT PRIMARY KEY,
+            channel_id TEXT NOT NULL,
+            user_id TEXT NOT NULL,
+            text TEXT NOT NULL,
+            created_at TEXT NOT NULL,
+            FOREIGN KEY (channel_id) REFERENCES channels(id),
+            FOREIGN KEY (user_id) REFERENCES users(id)
+        );
+        CREATE INDEX IF NOT EXISTS idx_messages_channel ON messages(channel_id, created_at);
+    """)
+    # Seed default channel
+    existing = db.execute("SELECT id FROM channels WHERE name = 'general'").fetchone()
+    if not existing:
+        db.execute(
+            "INSERT INTO channels (id, name, created_by, created_at) VALUES (?, ?, ?, ?)",
+            (str(uuid.uuid4()), "general", "system", datetime.utcnow().isoformat()),
+        )
+        db.commit()
+    db.close()
+
+
+COLORS = [
+    "#007AFF", "#FF3B30", "#FF9500", "#AF52DE", "#5856D6",
+    "#34C759", "#FF2D55", "#00C7BE", "#5AC8FA", "#BF5AF2",
+]
+
+
+def get_user():
+    sid = request.cookies.get("sid")
+    if not sid:
+        return None
+    db = get_db()
+    user = db.execute("SELECT * FROM users WHERE id = ?", (sid,)).fetchone()
+    db.close()
+    return dict(user) if user else None
+
+
+def require_user(f):
+    @wraps(f)
+    def wrapper(*args, **kwargs):
+        user = get_user()
+        if not user:
+            return jsonify({"error": "not authenticated"}), 401
+        request.user = user
+        return f(*args, **kwargs)
+    return wrapper
+
+
+# --- API ---
+
+@app.route("/api/me")
+def api_me():
+    user = get_user()
+    if user:
+        return jsonify(user)
+    return jsonify(None)
+
+
+@app.route("/api/login", methods=["POST"])
+def api_login():
+    data = request.json
+    name = (data.get("name") or "").strip()
+    if not name or len(name) > 32:
+        return jsonify({"error": "Name must be 1-32 characters"}), 400
+
+    db = get_db()
+    # Check if name taken
+    existing = db.execute("SELECT * FROM users WHERE name = ?", (name,)).fetchone()
+    if existing:
+        # Log back in
+        resp = make_response(jsonify(dict(existing)))
+        resp.set_cookie("sid", existing["id"], max_age=60 * 60 * 24 * 365, httponly=True, samesite="Lax")
+        db.close()
+        return resp
+
+    user_id = str(uuid.uuid4())
+    color = COLORS[hash(name) % len(COLORS)]
+    now = datetime.utcnow().isoformat()
+    db.execute(
+        "INSERT INTO users (id, name, color, created_at) VALUES (?, ?, ?, ?)",
+        (user_id, name, color, now),
+    )
+    db.commit()
+    user = {"id": user_id, "name": name, "color": color, "created_at": now}
+    db.close()
+
+    resp = make_response(jsonify(user))
+    resp.set_cookie("sid", user_id, max_age=60 * 60 * 24 * 365, httponly=True, samesite="Lax")
+    return resp
+
+
+@app.route("/api/logout", methods=["POST"])
+def api_logout():
+    resp = make_response(jsonify({"ok": True}))
+    resp.delete_cookie("sid")
+    return resp
+
+
+@app.route("/api/channels")
+@require_user
+def api_channels():
+    db = get_db()
+    rows = db.execute("SELECT * FROM channels ORDER BY created_at").fetchall()
+    db.close()
+    return jsonify([dict(r) for r in rows])
+
+
+@app.route("/api/channels", methods=["POST"])
+@require_user
+def api_create_channel():
+    data = request.json
+    name = (data.get("name") or "").strip().lower().replace(" ", "-")
+    if not name or len(name) > 40:
+        return jsonify({"error": "Channel name must be 1-40 characters"}), 400
+
+    db = get_db()
+    existing = db.execute("SELECT id FROM channels WHERE name = ?", (name,)).fetchone()
+    if existing:
+        db.close()
+        return jsonify({"error": "Channel already exists"}), 409
+
+    ch_id = str(uuid.uuid4())
+    now = datetime.utcnow().isoformat()
+    db.execute(
+        "INSERT INTO channels (id, name, created_by, created_at) VALUES (?, ?, ?, ?)",
+        (ch_id, name, request.user["id"], now),
+    )
+    db.commit()
+    channel = {"id": ch_id, "name": name, "created_by": request.user["id"], "created_at": now}
+    db.close()
+    return jsonify(channel), 201
+
+
+@app.route("/api/channels/<channel_id>/messages")
+@require_user
+def api_messages(channel_id):
+    db = get_db()
+    rows = db.execute("""
+        SELECT m.id, m.text, m.created_at, m.channel_id,
+               u.id as user_id, u.name as user_name, u.color as user_color
+        FROM messages m JOIN users u ON m.user_id = u.id
+        WHERE m.channel_id = ?
+        ORDER BY m.created_at
+        LIMIT 200
+    """, (channel_id,)).fetchall()
+    db.close()
+    return jsonify([dict(r) for r in rows])
+
+
+@app.route("/api/channels/<channel_id>/messages", methods=["POST"])
+@require_user
+def api_send_message(channel_id):
+    data = request.json
+    text = (data.get("text") or "").strip()
+    if not text or len(text) > 4000:
+        return jsonify({"error": "Message must be 1-4000 characters"}), 400
+
+    db = get_db()
+    ch = db.execute("SELECT id FROM channels WHERE id = ?", (channel_id,)).fetchone()
+    if not ch:
+        db.close()
+        return jsonify({"error": "Channel not found"}), 404
+
+    msg_id = str(uuid.uuid4())
+    now = datetime.utcnow().isoformat()
+    db.execute(
+        "INSERT INTO messages (id, channel_id, user_id, text, created_at) VALUES (?, ?, ?, ?, ?)",
+        (msg_id, channel_id, request.user["id"], text, now),
+    )
+    db.commit()
+    db.close()
+
+    return jsonify({
+        "id": msg_id, "text": text, "created_at": now, "channel_id": channel_id,
+        "user_id": request.user["id"], "user_name": request.user["name"], "user_color": request.user["color"],
+    }), 201
+
+
+@app.route("/")
+def index():
+    return INDEX_HTML
+
+
+INDEX_HTML = """<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Bucket Chat</title>
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg: #ffffff;
+  --bg-secondary: #f5f5f7;
+  --bg-hover: #e8e8ed;
+  --border: #d2d2d7;
+  --text: #1d1d1f;
+  --text-secondary: #86868b;
+  --accent: #007AFF;
+  --accent-hover: #0056CC;
+  --sidebar-w: 240px;
+  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
+}
+
+html, body { height: 100%; font-family: var(--font); color: var(--text); background: var(--bg); }
+
+/* --- Login --- */
+#login {
+  display: flex; align-items: center; justify-content: center;
+  height: 100%; background: var(--bg-secondary);
+}
+#login-box {
+  background: var(--bg); border-radius: 16px; padding: 48px 40px;
+  width: 360px; text-align: center;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
+}
+#login-box h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
+#login-box p { color: var(--text-secondary); font-size: 15px; margin-bottom: 28px; }
+#login-box input {
+  width: 100%; padding: 12px 16px; font-size: 16px; border: 1px solid var(--border);
+  border-radius: 10px; outline: none; font-family: var(--font); background: var(--bg);
+  transition: border-color 0.15s;
+}
+#login-box input:focus { border-color: var(--accent); }
+#login-box button {
+  width: 100%; margin-top: 12px; padding: 12px; font-size: 16px; font-weight: 500;
+  border: none; border-radius: 10px; background: var(--accent); color: #fff;
+  cursor: pointer; font-family: var(--font); transition: background 0.15s;
+}
+#login-box button:hover { background: var(--accent-hover); }
+#login-error { color: #FF3B30; font-size: 13px; margin-top: 10px; min-height: 18px; }
+
+/* --- App shell --- */
+#app { display: none; height: 100%; }
+#app.active { display: flex; }
+
+/* Sidebar */
+#sidebar {
+  width: var(--sidebar-w); min-width: var(--sidebar-w); height: 100%;
+  background: var(--bg-secondary); border-right: 1px solid var(--border);
+  display: flex; flex-direction: column; overflow: hidden;
+}
+#sidebar-header {
+  padding: 20px 16px 12px; font-size: 13px; font-weight: 600;
+  color: var(--text-secondary); letter-spacing: 0.02em; text-transform: uppercase;
+  display: flex; align-items: center; justify-content: space-between;
+}
+#sidebar-header button {
+  background: none; border: none; font-size: 20px; color: var(--text-secondary);
+  cursor: pointer; line-height: 1; padding: 0 2px; border-radius: 4px;
+}
+#sidebar-header button:hover { color: var(--text); background: var(--bg-hover); }
+#channel-list { flex: 1; overflow-y: auto; padding: 0 8px; }
+.ch-item {
+  padding: 8px 12px; border-radius: 8px; cursor: pointer;
+  font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 6px;
+  transition: background 0.1s;
+}
+.ch-item:hover { background: var(--bg-hover); }
+.ch-item.active { background: var(--accent); color: #fff; }
+.ch-item .hash { font-weight: 600; opacity: 0.5; }
+#user-bar {
+  padding: 12px 16px; border-top: 1px solid var(--border);
+  display: flex; align-items: center; gap: 10px; font-size: 14px;
+}
+#user-bar .avatar {
+  width: 28px; height: 28px; border-radius: 50%; color: #fff;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 13px; font-weight: 600; flex-shrink: 0;
+}
+#user-bar .name { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#user-bar button {
+  background: none; border: none; color: var(--text-secondary); cursor: pointer;
+  font-size: 13px; padding: 4px 8px; border-radius: 6px;
+}
+#user-bar button:hover { background: var(--bg-hover); color: var(--text); }
+
+/* Main area */
+#main { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
+#channel-header {
+  padding: 16px 20px; border-bottom: 1px solid var(--border);
+  font-size: 17px; font-weight: 600; flex-shrink: 0;
+}
+#channel-header .hash { color: var(--text-secondary); margin-right: 2px; }
+#messages {
+  flex: 1; overflow-y: auto; padding: 16px 20px;
+  display: flex; flex-direction: column; gap: 2px;
+}
+.msg { display: flex; gap: 10px; padding: 6px 0; }
+.msg .avatar {
+  width: 32px; height: 32px; border-radius: 50%; color: #fff;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 14px; font-weight: 600; flex-shrink: 0; margin-top: 2px;
+}
+.msg .body { min-width: 0; }
+.msg .meta { display: flex; align-items: baseline; gap: 8px; }
+.msg .author { font-size: 14px; font-weight: 600; }
+.msg .time { font-size: 12px; color: var(--text-secondary); }
+.msg .text { font-size: 15px; line-height: 1.45; margin-top: 2px; word-break: break-word; white-space: pre-wrap; }
+.msg-grouped { padding: 1px 0; }
+.msg-grouped .avatar { visibility: hidden; width: 32px; }
+.msg-grouped .meta { display: none; }
+#empty-state {
+  flex: 1; display: flex; align-items: center; justify-content: center;
+  color: var(--text-secondary); font-size: 15px;
+}
+
+/* Composer */
+#composer {
+  padding: 12px 20px 16px; flex-shrink: 0;
+}
+#composer form { display: flex; gap: 8px; }
+#composer input {
+  flex: 1; padding: 10px 14px; font-size: 15px; border: 1px solid var(--border);
+  border-radius: 10px; outline: none; font-family: var(--font); background: var(--bg);
+  transition: border-color 0.15s;
+}
+#composer input:focus { border-color: var(--accent); }
+#composer button {
+  padding: 10px 18px; font-size: 15px; font-weight: 500; border: none;
+  border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer;
+  font-family: var(--font); transition: background 0.15s; white-space: nowrap;
+}
+#composer button:hover { background: var(--accent-hover); }
+
+/* New channel modal */
+#modal-bg {
+  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.25);
+  z-index: 100; align-items: center; justify-content: center;
+  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
+}
+#modal-bg.active { display: flex; }
+#modal {
+  background: var(--bg); border-radius: 14px; padding: 28px 24px 24px;
+  width: 340px; box-shadow: 0 8px 32px rgba(0,0,0,0.12);
+}
+#modal h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
+#modal input {
+  width: 100%; padding: 10px 14px; font-size: 15px; border: 1px solid var(--border);
+  border-radius: 10px; outline: none; font-family: var(--font);
+}
+#modal input:focus { border-color: var(--accent); }
+#modal-actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
+#modal-actions button {
+  padding: 8px 18px; font-size: 14px; font-weight: 500; border-radius: 8px;
+  cursor: pointer; font-family: var(--font); transition: background 0.15s;
+}
+#modal-cancel { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text); }
+#modal-cancel:hover { background: var(--bg-hover); }
+#modal-create { background: var(--accent); border: none; color: #fff; }
+#modal-create:hover { background: var(--accent-hover); }
+#modal-error { color: #FF3B30; font-size: 13px; margin-top: 8px; min-height: 16px; }
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
+
+@media (max-width: 640px) {
+  #sidebar { display: none; }
+  #channel-header { font-size: 15px; }
+}
+</style>
+</head>
+<body>
+
+<div id="login">
+  <div id="login-box">
+    <h1>Bucket Chat</h1>
+    <p>Messages persist in an HF Bucket.</p>
+    <form onsubmit="doLogin(event)">
+      <input id="login-name" placeholder="Pick a username" maxlength="32" autofocus autocomplete="off">
+      <button type="submit">Continue</button>
+    </form>
+    <div id="login-error"></div>
+  </div>
+</div>
+
+<div id="app">
+  <div id="sidebar">
+    <div id="sidebar-header">
+      <span>Channels</span>
+      <button onclick="openModal()" title="New channel">+</button>
+    </div>
+    <div id="channel-list"></div>
+    <div id="user-bar">
+      <div class="avatar" id="my-avatar"></div>
+      <span class="name" id="my-name"></span>
+      <button onclick="doLogout()">Sign out</button>
+    </div>
+  </div>
+  <div id="main">
+    <div id="channel-header"></div>
+    <div id="messages"></div>
+    <div id="composer">
+      <form onsubmit="sendMessage(event)">
+        <input id="msg-input" placeholder="Write a message..." autocomplete="off">
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<div id="modal-bg" onclick="closeModal()">
+  <div id="modal" onclick="event.stopPropagation()">
+    <h2>New channel</h2>
+    <form onsubmit="createChannel(event)">
+      <input id="ch-name-input" placeholder="channel-name" maxlength="40" autocomplete="off">
+      <div id="modal-error"></div>
+      <div id="modal-actions">
+        <button type="button" id="modal-cancel" onclick="closeModal()">Cancel</button>
+        <button type="submit" id="modal-create">Create</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<script>
+let me = null;
+let channels = [];
+let currentChannel = null;
+let pollTimer = null;
+
+async function boot() {
+  const res = await fetch("/api/me");
+  me = await res.json();
+  if (me) enterApp();
+}
+
+async function doLogin(e) {
+  e.preventDefault();
+  const name = document.getElementById("login-name").value.trim();
+  if (!name) return;
+  const res = await fetch("/api/login", {
+    method: "POST", headers: {"Content-Type": "application/json"},
+    body: JSON.stringify({name})
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    document.getElementById("login-error").textContent = data.error;
+    return;
+  }
+  me = data;
+  enterApp();
+}
+
+async function doLogout() {
+  await fetch("/api/logout", {method: "POST"});
+  me = null;
+  clearInterval(pollTimer);
+  document.getElementById("app").classList.remove("active");
+  document.getElementById("login").style.display = "flex";
+  document.getElementById("login-name").value = "";
+}
+
+async function enterApp() {
+  document.getElementById("login").style.display = "none";
+  document.getElementById("app").classList.add("active");
+  document.getElementById("my-name").textContent = me.name;
+  const av = document.getElementById("my-avatar");
+  av.style.background = me.color;
+  av.textContent = me.name[0].toUpperCase();
+
+  await loadChannels();
+  if (channels.length > 0) selectChannel(channels[0].id);
+  pollTimer = setInterval(pollMessages, 2500);
+}
+
+async function loadChannels() {
+  const res = await fetch("/api/channels");
+  channels = await res.json();
+  renderChannels();
+}
+
+function renderChannels() {
+  const el = document.getElementById("channel-list");
+  el.innerHTML = channels.map(c =>
+    `<div class="ch-item ${c.id === currentChannel ? 'active' : ''}" onclick="selectChannel('${c.id}')">
+      <span class="hash">#</span> ${esc(c.name)}
+    </div>`
+  ).join("");
+}
+
+async function selectChannel(id) {
+  currentChannel = id;
+  renderChannels();
+  const ch = channels.find(c => c.id === id);
+  document.getElementById("channel-header").innerHTML =
+    `<span class="hash">#</span>${esc(ch ? ch.name : "")}`;
+  await loadMessages();
+  document.getElementById("msg-input").focus();
+}
+
+async function loadMessages() {
+  if (!currentChannel) return;
+  const res = await fetch(`/api/channels/${currentChannel}/messages`);
+  const msgs = await res.json();
+  renderMessages(msgs);
+}
+
+function renderMessages(msgs) {
+  const el = document.getElementById("messages");
+  if (msgs.length === 0) {
+    el.innerHTML = '<div id="empty-state">No messages yet. Say something!</div>';
+    return;
+  }
+  let html = "";
+  let prevUser = null;
+  for (const m of msgs) {
+    const grouped = prevUser === m.user_id;
+    const t = new Date(m.created_at + "Z");
+    const time = t.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit"});
+    if (grouped) {
+      html += `<div class="msg msg-grouped">
+        <div class="avatar"></div>
+        <div class="body"><div class="text">${esc(m.text)}</div></div>
+      </div>`;
+    } else {
+      html += `<div class="msg">
+        <div class="avatar" style="background:${m.user_color}">${esc(m.user_name[0].toUpperCase())}</div>
+        <div class="body">
+          <div class="meta">
+            <span class="author" style="color:${m.user_color}">${esc(m.user_name)}</span>
+            <span class="time">${time}</span>
+          </div>
+          <div class="text">${esc(m.text)}</div>
+        </div>
+      </div>`;
+    }
+    prevUser = m.user_id;
+  }
+  el.innerHTML = html;
+  el.scrollTop = el.scrollHeight;
+}
+
+async function sendMessage(e) {
+  e.preventDefault();
+  const input = document.getElementById("msg-input");
+  const text = input.value.trim();
+  if (!text || !currentChannel) return;
+  input.value = "";
+  await fetch(`/api/channels/${currentChannel}/messages`, {
+    method: "POST", headers: {"Content-Type": "application/json"},
+    body: JSON.stringify({text})
+  });
+  await loadMessages();
+}
+
+async function pollMessages() {
+  if (!currentChannel) return;
+  await loadMessages();
+}
+
+function openModal() {
+  document.getElementById("modal-bg").classList.add("active");
+  document.getElementById("ch-name-input").value = "";
+  document.getElementById("modal-error").textContent = "";
+  document.getElementById("ch-name-input").focus();
+}
+function closeModal() {
+  document.getElementById("modal-bg").classList.remove("active");
+}
+
+async function createChannel(e) {
+  e.preventDefault();
+  const name = document.getElementById("ch-name-input").value.trim();
+  if (!name) return;
+  const res = await fetch("/api/channels", {
+    method: "POST", headers: {"Content-Type": "application/json"},
+    body: JSON.stringify({name})
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    document.getElementById("modal-error").textContent = data.error;
+    return;
+  }
+  closeModal();
+  await loadChannels();
+  selectChannel(data.id);
+}
+
+function esc(s) {
+  const d = document.createElement("div");
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+boot();
+</script>
+</body>
+</html>
+"""
+
+if __name__ == "__main__":
+    init_db()
+    app.run(host="0.0.0.0", port=7860)