Messages, Messagebar and Toast

Messages renders a chat, sent bubbles right and received left, with names, avatars and a typing indicator. Messagebar is the input under it: a toolbar messagebar placed before page-content, with an auto-growing textarea and a send link. BookNest's /ask/ page answers from the shelves; reply() looks for a title or an author's surname in the question:

Sending a question in src/pages/ask.f7JavaScript

    const send = () => {
      const text = bar.getValue().trim();
      if (!text) {
        $f7.toast.show({ text: 'Type a question first', position: 'top', closeTimeout: 1500 });
        return;
      }
      bar.clear();
      messages.addMessage({ text, type: 'sent' });
      messages.showTyping({ header: 'Lena is typing' });
      setTimeout(() => {
        const answer = reply(text);
        messages.hideTyping();
        messages.addMessage({ text: answer, type: 'received', name: 'Lena' });
        console.log(`asked "${text}" -> "${answer}"`);
      }, 1200);
    };

Output

asked "Is Salt and Saffron in stock?" -> "Salt and Saffron is $24.00 and sold out."
asked "Anything by Berg?" -> "Small Steps to Big Summits is $18.75 and in stock."

pageInit creates both widgets from page.$el and pageBeforeRemove destroys them. Two bugs came first: the tab bar hid the messagebar until the page got no-toolbar; and with the "Today" title in the markup rather than in the messages data ({ isTitle: true, text: 'Today' }), hideTyping() counted one row off and deleted the question instead of the dots. A toast (text, icon, position, closeTimeout, closeButton) suits hints like the empty-question one; a notification (Badges and Statusbar) suits outside news, a dialog a decision.

MENU

Messages, Messagebar and Toast