pocket_phone 0.1.0

data/app/controllers/pocket_phone/conversations_controller.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module PocketPhone
+  class ConversationsController < ApplicationController
+    def index
+      @db = store.read
+      latest = @db.sorted_conversations.first
+      return redirect_to(conversation_path(latest["id"])) if latest && params[:list].blank?
+
+      render :show
+    end
+
+    def show
+      load_conversation(params[:id])
+      redirect_to root_path unless @conversation
+    end
+
+    # What the page polls. Answers 204 while nothing has changed, and the
+    # freshly rendered pieces of the page when something has.
+    def state
+      load_conversation(params[:conversation])
+      token = "#{@db.version}:#{@db.typing?(@conversation) ? 1 : 0}"
+      return head(:no_content) if params[:version] == token
+
+      render json: {
+        version: token,
+        gone: params[:conversation].present? && @conversation.nil?,
+        sidebar: render_to_string(partial: "pocket_phone/conversations/sidebar", formats: [:html]),
+        head: @conversation && render_to_string(partial: "pocket_phone/conversations/head", formats: [:html]),
+        messages: @conversation && render_to_string(partial: "pocket_phone/conversations/messages", formats: [:html])
+      }
+    end
+
+    # A phone starts a conversation with the app's line: one person, or a
+    # group of them.
+    def create
+      conversation = store.write do |db|
+        line = Numbers.normalize(params[:line]).presence || default_line(db)
+        db.ensure_line(line)
+        params[:group].present? ? create_group(db, line) : create_direct(db, line)
+      end
+      redirect_to(conversation ? conversation_path(conversation["id"]) : root_path)
+    end
+
+    def typing
+      conversation = store.read.conversations[params[:id]]
+      if conversation && conversation["kind"] == "direct"
+        Carrier.typing_to_app(conversation, is_typing: params[:is_typing].to_s != "false")
+      end
+      head :no_content
+    end
+
+    def destroy
+      store.write { |db| db.delete_conversation(params[:id]) }
+      redirect_to root_path
+    end
+
+    def clear
+      store.clear!
+      redirect_to root_path
+    end
+
+    private
+
+    def load_conversation(id)
+      @db = store.read
+      @conversation = id.present? ? @db.conversations[id] : nil
+      return unless @conversation && @conversation["unread"].to_i.positive?
+
+      # Looking at a thread is reading it.
+      store.write { |db| db.conversations[id]&.store("unread", 0) }
+      @db = store.read
+      @conversation = @db.conversations[id]
+    end
+
+    def create_direct(db, line)
+      number = Numbers.normalize(params[:number])
+      return nil if number.empty?
+
+      db.ensure_person(number, "name" => params[:name], "service" => params[:service])
+      db.direct(line, number)
+    end
+
+    def create_group(db, line)
+      participants = Array(params[:participants]).map { |n| Numbers.normalize(n) }.reject(&:empty?).uniq
+      return nil if participants.size < 2
+
+      db.create_group(line: line, participants: participants, name: params[:group_name])
+    end
+  end
+end

data/app/controllers/pocket_phone/media_controller.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module PocketPhone
+  # Attachments sent from the phone, or uploaded through the fake API. Served
+  # from here so a media_url in a webhook is one the app can really fetch.
+  class MediaController < ApplicationController
+    def show
+      file = store.media_file(params[:name])
+      return head(:not_found) unless file
+
+      send_file file, disposition: "inline"
+    end
+  end
+end

data/app/controllers/pocket_phone/messages_controller.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module PocketPhone
+  # What the person holding the phone does: text, tapback, try again.
+  class MessagesController < ApplicationController
+    def create
+      upload = params[:file].presence
+      media_url = upload && media_url_for(store.save_media(upload, upload.original_filename))
+      content = params[:content].to_s.strip
+      return head(:unprocessable_entity) if content.empty? && media_url.nil?
+
+      message = store.write do |db|
+        conversation = db.conversations[params[:id]] or next
+        from = sender(db, conversation) or next
+        db.add_message(conversation, "direction" => "phone", "status" => "RECEIVED",
+          "from_number" => from, "to_number" => conversation["line"],
+          "content" => content, "media_url" => media_url, "service" => db.service_for(conversation))
+      end
+      return head(:not_found) unless message
+
+      Carrier.deliver_to_app(message["handle"])
+      Carrier.fetch_preview(message["handle"])
+      head :no_content
+    end
+
+    # A tapback on something the app sent. Tapping the same one again takes it
+    # back, as on a phone.
+    def react
+      reaction = params[:reaction].to_s
+      outcome, by = store.write do |db|
+        message = db.message(params[:handle]) or next
+        conversation = db.conversations[message["conversation_id"]] or next
+        next unless message["direction"] == "app" && message["service"] == "iMessage"
+
+        by = sender(db, conversation) or next
+        [db.react(message, by: by, reaction: reaction), by]
+      end
+      return head(:unprocessable_entity) unless outcome
+
+      Carrier.reaction_to_app(params[:handle], by: by, reaction: reaction) if outcome == :added
+      head :no_content
+    end
+
+    # Send the receive webhook again, as Sendblue does after a 5xx. Handy for
+    # checking that a redelivery is not answered twice.
+    def redeliver
+      message = store.read.message(params[:handle])
+      return head(:not_found) unless message && message["direction"] == "phone"
+
+      Carrier.deliver_to_app(message["handle"])
+      head :no_content
+    end
+
+    private
+
+    # Who is talking. A one-to-one has one phone in it; in a group the page
+    # says which participant it is speaking as.
+    def sender(db, conversation)
+      return conversation["number"] unless db.group?(conversation)
+
+      chosen = Numbers.normalize(params[:as])
+      conversation["participants"].include?(chosen) ? chosen : conversation["participants"].first
+    end
+  end
+end

data/app/controllers/pocket_phone/people_controller.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PocketPhone
+  # The fake people: their names, whether they have an iPhone, and what
+  # becomes of a message sent to them.
+  class PeopleController < ApplicationController
+    def update
+      number = Numbers.normalize(params[:number])
+      unless number.empty?
+        store.write do |db|
+          person = db.ensure_person(number, "service" => params[:service], "outcome" => params[:outcome])
+          person["name"] = params[:name].to_s.strip.presence if params.key?(:name)
+        end
+      end
+
+      request.xhr? ? head(:no_content) : redirect_back(fallback_location: root_path)
+    end
+  end
+end

data/app/helpers/pocket_phone/application_helper.rb

@@ -0,0 +1,145 @@
+# frozen_string_literal: true
+
+module PocketPhone
+  module ApplicationHelper
+    TAPBACKS = { "love" => "❤️", "like" => "👍", "dislike" => "👎",
+                 "laugh" => "😂", "emphasize" => "‼️", "question" => "❓" }.freeze
+    IMAGE = /\.(png|jpe?g|gif|webp|heic|avif|svg|bmp)\z/i
+    VIDEO = /\.(mp4|mov|m4v|webm)\z/i
+    AUDIO = /\.(mp3|m4a|wav|caf|aac|ogg|amr)\z/i
+    # Minutes of quiet before iMessage puts a timestamp between two messages.
+    TIMESTAMP_GAP = 15 * 60
+
+    def pp_base = root_path.chomp("/")
+
+    # --- names ----------------------------------------------------------------
+
+    def pp_person_name(number)
+      @db.people.dig(number, "name").presence || Numbers.pretty(number)
+    end
+
+    def pp_line_name(line)
+      @db.lines.dig(line, "name").presence || Numbers.pretty(line)
+    end
+
+    def pp_sender_name(message)
+      message["direction"] == "app" ? pp_line_name(message["from_number"]) : pp_person_name(message["from_number"])
+    end
+
+    def pp_title(conversation)
+      return pp_person_name(conversation["number"]) unless @db.group?(conversation)
+
+      conversation["name"].presence || conversation["participants"].map { |n| pp_person_name(n).split.first }.to_sentence
+    end
+
+    def pp_avatar(label, key: label, photo: nil, size: nil)
+      style = "--hue:#{key.to_s.sum % 360};"
+      style += "width:#{size}px;height:#{size}px;font-size:#{(size * 0.4).round}px;" if size
+      return tag.span(image_tag(photo, alt: ""), class: "pp-avatar", style: style) if photo.present?
+
+      letters = label.to_s.scan(/\b[[:alpha:]]/).first(2).join.upcase
+      letters = label.to_s.match?(/\p{Emoji_Presentation}/) ? label : "#" if letters.empty?
+      tag.span(letters, class: "pp-avatar", style: style)
+    end
+
+    # --- time -----------------------------------------------------------------
+
+    def pp_clock(iso)
+      Time.iso8601(iso).localtime.strftime("%-l:%M %p")
+    rescue ArgumentError, TypeError
+      ""
+    end
+
+    def pp_stamp(iso)
+      time = Time.iso8601(iso).localtime
+      day = if time.to_date == Date.today then "Today"
+            elsif time.to_date == Date.today - 1 then "Yesterday"
+            else time.strftime("%a, %b %-d")
+            end
+      safe_join([tag.strong(day), " ", time.strftime("%-l:%M %p")])
+    rescue ArgumentError, TypeError
+      ""
+    end
+
+    def pp_gap?(previous, message)
+      return true if previous.nil?
+
+      Time.iso8601(message["created_at"]) - Time.iso8601(previous["created_at"]) > TIMESTAMP_GAP
+    rescue ArgumentError, TypeError
+      false
+    end
+
+    # --- message bodies -------------------------------------------------------
+
+    def pp_linkify(text)
+      pieces = text.to_s.split(/(https?:\/\/[^\s<>"]+)/i).map do |piece|
+        next piece unless piece.match?(/\Ahttps?:\/\//i)
+
+        url = piece.sub(LinkPreview::TRAILING, "")
+        safe_join([link_to(url, url, target: "_blank", rel: "noopener"), piece[url.length..]])
+      end
+      safe_join(pieces)
+    end
+
+    def pp_media(url)
+      path = url.to_s.split(/[?#]/).first
+      if path.match?(VIDEO)
+        tag.video(src: url, controls: true, class: "pp-media")
+      elsif path.match?(AUDIO)
+        tag.audio(src: url, controls: true, class: "pp-audio")
+      elsif path.match?(IMAGE) || File.extname(path).empty?
+        # Many image URLs have no extension; if it turns out not to be one, the
+        # page swaps this for a link.
+        link_to(image_tag(url, alt: "", class: "pp-media", data: { fallback: File.basename(path) }),
+          url, target: "_blank", rel: "noopener")
+      else
+        link_to("📎 #{File.basename(path)}", url, class: "pp-file", target: "_blank", rel: "noopener")
+      end
+    end
+
+    def pp_snippet(message)
+      return "" unless message
+
+      text = message["content"].to_s.strip
+      text = "Attachment" if text.empty? && (message["media_url"].present? || message["media_urls"].present?)
+      text = message.dig("app_card", "appName").to_s if text.empty? && message["app_card"]
+      truncate(text, length: 70)
+    end
+
+    def pp_tapback(reaction) = TAPBACKS[reaction] || reaction
+
+    def pp_preview_for(message)
+      found = LinkPreview.detect(message["content"])
+      preview = found[:url] && @db.previews[found[:url]]
+      card = preview && preview["error"].nil? && (preview["title"].present? || preview["image"].present?)
+      { url: found[:url], reason: found[:reason], preview: preview, card: card ? preview : nil }
+    end
+
+    # --- what iMessage prints under a bubble ----------------------------------
+
+    # For a message the phone sent, the line under it: Delivered once the app
+    # accepted the webhook, Read once the app marked the thread read, and Not
+    # Delivered (with the reason) when the webhook failed.
+    def pp_receipt(message, conversation, last:)
+      hook = Array(message["webhooks"]).reverse.find { |w| w["type"] == "receive" }
+      return { text: "Sending…" } if hook.nil?
+
+      unless hook["status"].to_i.between?(200, 299)
+        reason = hook["error"] || "the webhook answered #{hook["status"]}"
+        return { text: "Not Delivered", failed: true, detail: reason }
+      end
+      return nil unless last
+
+      read = conversation["read_at"].to_s >= message["created_at"].to_s && message["service"] == "iMessage"
+      { text: read ? "Read #{pp_clock(conversation["read_at"])}" : "Delivered" }
+    end
+
+    def pp_webhook_outcome(hook)
+      hook["error"] || "HTTP #{hook["status"]}"
+    end
+
+    def pp_json(value)
+      JSON.pretty_generate(value)
+    end
+  end
+end

data/app/views/layouts/pocket_phone/_script.html.erb

@@ -0,0 +1,183 @@
+<script>
+(() => {
+  const root = document.querySelector("[data-pp]");
+  if (!root) return;
+
+  const base = root.dataset.base;
+  const conversation = root.dataset.conversation;
+  const isGroup = root.dataset.group === "1";
+  const token = document.querySelector('meta[name="csrf-token"]')?.content;
+  const sidebar = document.getElementById("pp-sidebar");
+  const head = document.getElementById("pp-head");
+  const messages = document.getElementById("pp-messages");
+  const compose = document.querySelector("[data-compose]");
+  const persona = document.querySelector("[data-persona]");
+  const open = new Set();
+  let version = "";
+
+  const post = (path, body) => fetch(base + path, {
+    method: "POST",
+    body,
+    headers: { "X-CSRF-Token": token || "", "X-Requested-With": "XMLHttpRequest" },
+  });
+  const form = (fields) => {
+    const data = new FormData();
+    Object.entries(fields).forEach(([key, value]) => value != null && data.append(key, value));
+    return data;
+  };
+  const remember = (key, value) => { try { localStorage.setItem(key, value); } catch (_) {} };
+  const recall = (key) => { try { return localStorage.getItem(key); } catch (_) { return null; } };
+  const atBottom = () => messages.scrollHeight - messages.scrollTop - messages.clientHeight < 80;
+  const toBottom = () => { messages.scrollTop = messages.scrollHeight; };
+
+  // In a group, the bubbles on the right are whoever you are speaking as.
+  function decorate() {
+    if (!messages) return;
+    if (isGroup && persona) {
+      messages.querySelectorAll(".pp-row[data-from]").forEach((row) => {
+        row.classList.toggle("mine", row.dataset.from === persona.value);
+      });
+    }
+    messages.querySelectorAll(".pp-row[data-handle]").forEach((row) => {
+      const shown = open.has(row.dataset.handle);
+      row.classList.toggle("open", shown);
+      row.querySelector(".pp-details").hidden = !shown;
+    });
+    const service = head?.querySelector("[data-service]")?.dataset.service;
+    if (compose && service) {
+      compose.classList.toggle("sms", service !== "iMessage");
+      compose.querySelector("textarea").placeholder = service === "iMessage" ? "iMessage" : "Text Message";
+    }
+  }
+
+  async function poll() {
+    let response;
+    try {
+      response = await fetch(`${base}/state?conversation=${encodeURIComponent(conversation)}&version=${encodeURIComponent(version)}`,
+        { headers: { Accept: "application/json" } });
+    } catch (_) { return; }
+    if (response.status !== 200) return;
+
+    const state = await response.json();
+    version = state.version;
+    if (state.gone) { window.location = base + "/"; return; }
+    if (sidebar.innerHTML !== state.sidebar) sidebar.innerHTML = state.sidebar;
+    if (head && state.head != null && head.dataset.html !== state.head && !head.contains(document.activeElement)) {
+      head.innerHTML = state.head;
+      head.dataset.html = state.head;
+      decorate();
+    }
+    if (messages && state.messages != null && messages.dataset.html !== state.messages) {
+      const stick = atBottom();
+      messages.innerHTML = state.messages;
+      messages.dataset.html = state.messages;
+      decorate();
+      if (stick) toBottom();
+    }
+  }
+
+  // --- sending ---------------------------------------------------------------
+
+  if (compose) {
+    const text = compose.querySelector("textarea");
+    const file = compose.querySelector('input[type="file"]');
+    const attached = compose.querySelector("[data-attached]");
+    let typingAt = 0;
+
+    const grow = () => { text.style.height = "auto"; text.style.height = `${text.scrollHeight}px`; };
+    const showFile = () => {
+      attached.hidden = !file.files.length;
+      attached.textContent = file.files.length ? `📎 ${file.files[0].name} ✕` : "";
+    };
+    const typing = (on) => {
+      if (isGroup) return;
+      if (on && Date.now() - typingAt < 4000) return;
+      typingAt = on ? Date.now() : 0;
+      post(`/conversations/${conversation}/typing`, form({ is_typing: on }));
+    };
+
+    const send = async () => {
+      if (!text.value.trim() && !file.files.length) return;
+      const data = new FormData(compose);
+      text.value = ""; file.value = ""; showFile(); grow(); typingAt = 0;
+      await post(`/conversations/${conversation}/messages`, data);
+      await poll();
+      toBottom();
+      text.focus();
+    };
+
+    compose.addEventListener("submit", (event) => { event.preventDefault(); send(); });
+    text.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" && !event.shiftKey && !event.isComposing) { event.preventDefault(); send(); }
+    });
+    text.addEventListener("input", () => { grow(); typing(text.value.length > 0); });
+    file.addEventListener("change", showFile);
+    attached.addEventListener("click", () => { file.value = ""; showFile(); });
+  }
+
+  if (persona) {
+    const key = `pocket_phone:as:${conversation}`;
+    const saved = recall(key);
+    if (saved && [...persona.options].some((option) => option.value === saved)) persona.value = saved;
+    persona.addEventListener("change", () => { remember(key, persona.value); decorate(); });
+  }
+
+  // --- everything clickable --------------------------------------------------
+
+  document.addEventListener("click", async (event) => {
+    const target = event.target.closest("[data-details], [data-tapback], [data-redeliver], [data-open-dialog], [data-close-dialog]");
+    if (!target) return;
+    const row = target.closest(".pp-row");
+    const dialog = document.querySelector("[data-dialog]");
+
+    if (target.matches("[data-open-dialog]")) { dialog.showModal(); return; }
+    if (target.matches("[data-close-dialog]")) { dialog.close(); return; }
+    if (target.matches("[data-details]")) {
+      open.has(row.dataset.handle) ? open.delete(row.dataset.handle) : open.add(row.dataset.handle);
+      decorate();
+      return;
+    }
+    if (target.matches("[data-tapback]")) {
+      await post(`/messages/${row.dataset.handle}/reactions`,
+        form({ reaction: target.dataset.tapback, as: persona ? persona.value : null }));
+    } else if (target.matches("[data-redeliver]")) {
+      await post(`/messages/${row.dataset.handle}/redeliver`, form({}));
+    }
+    poll();
+  });
+
+  document.addEventListener("submit", (event) => {
+    const target = event.target;
+    if (target.dataset.confirm && !window.confirm(target.dataset.confirm)) { event.preventDefault(); return; }
+    if (!target.dataset.remote) return;
+    event.preventDefault();
+    post(new URL(target.action).pathname.slice(base.length), new FormData(target)).then(poll);
+  });
+  document.addEventListener("change", (event) => {
+    if (!event.target.matches("[data-autosubmit]")) return;
+    event.target.form.requestSubmit();
+    event.target.blur();
+  });
+
+  // An attachment with no extension is tried as an image first; when it is
+  // not one, show it as a file instead.
+  document.addEventListener("error", (event) => {
+    const image = event.target;
+    if (!(image instanceof HTMLImageElement) || !image.dataset.fallback || !image.parentElement) return;
+    image.parentElement.className = "pp-file";
+    image.parentElement.textContent = `📎 ${image.dataset.fallback}`;
+  }, true);
+  if (messages) {
+    messages.addEventListener("load", () => { if (atBottom() || !messages.dataset.settled) toBottom(); }, true);
+    setTimeout(() => { messages.dataset.settled = "1"; }, 1500);
+    decorate();
+    toBottom();
+  }
+
+  document.querySelector("[data-dialog]")?.addEventListener("click", (event) => {
+    if (event.target === event.currentTarget) event.currentTarget.close();
+  });
+
+  setInterval(poll, 1000);
+})();
+</script>