diff --git a/examples/webchat/htdocs/speechbubble-l.png b/examples/webchat/htdocs/speechbubble-l.png new file mode 100644 index 0000000..54e30d5 Binary files /dev/null and b/examples/webchat/htdocs/speechbubble-l.png differ diff --git a/examples/webchat/htdocs/speechbubble-l.svg b/examples/webchat/htdocs/speechbubble-l.svg new file mode 100644 index 0000000..0366e92 --- /dev/null +++ b/examples/webchat/htdocs/speechbubble-l.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/examples/webchat/htdocs/speechbubble-r.png b/examples/webchat/htdocs/speechbubble-r.png new file mode 100644 index 0000000..4284b99 Binary files /dev/null and b/examples/webchat/htdocs/speechbubble-r.png differ diff --git a/examples/webchat/htdocs/speechbubble-r.svg b/examples/webchat/htdocs/speechbubble-r.svg new file mode 100644 index 0000000..db0fa2a --- /dev/null +++ b/examples/webchat/htdocs/speechbubble-r.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/examples/webchat/htdocs/style.css b/examples/webchat/htdocs/style.css index f018ba5..f74c8b6 100644 --- a/examples/webchat/htdocs/style.css +++ b/examples/webchat/htdocs/style.css @@ -8,6 +8,29 @@ img.avatar { /* --------------------------------------------------------------------------- */ +.main-container { + display: flex; + height: 100vh; + flex-direction: column; +} + +#main-div { + flex: 1; + overflow: auto; +} + +.column-container { + display: flex; + flex-direction: column; +} + +.column-fill { + flex: 1; + overflow: auto; +} + +/* --------------------------------------------------------------------------- */ + .alert-count { background: red; color: white; @@ -73,3 +96,76 @@ img.avatar { position: relative; top: 0.5rem; } + +.blurb-box { +} + +.float-right { float: right; } + +.main-container footer { + padding-top: 1rem; + text-align: right; +} + +/* --------------------------------------------------------------------------- */ + +.conversation-control-panel { + font-size: 2rem; +} + +.post-backdrop { + overflow-y: scroll; +} + +.post { + margin: 20px; +} + +.post .post-body { + background: white; + border: solid #d3d3d3 1px; + border-radius: 1.5rem; + padding: 1rem; + margin: 0 0px; +} + +.post p { + margin-bottom: 0; +} + +.post.from-me .post-body { + background: #e8e8ff; + margin-left: 4rem; + margin-right: -1px; +} + +.post.to-me .post-body { + margin-left: -1px; + margin-right: 4rem; +} + +.post.from-me:after { + content: url('/speechbubble-r.png'); + position: relative; + /* left: 100%; */ + right: -100%; + top: -40px; + height: 0px; + width: 0px; + display: block; +} + +.post.to-me:after { + content: url('/speechbubble-l.png'); + position: relative; + left: -16px; + top: -40px; + height: 0px; + width: 0px; + display: block; +} + +.post-body > img { + max-width: 100%; + max-height: 100%; +} \ No newline at end of file diff --git a/examples/webchat/htdocs/templates/conversation-index-entry.html b/examples/webchat/htdocs/templates/conversation-index-entry.html index 3fde15f..6c91039 100644 --- a/examples/webchat/htdocs/templates/conversation-index-entry.html +++ b/examples/webchat/htdocs/templates/conversation-index-entry.html @@ -1,8 +1,8 @@
-
{{title}}
+
{{title}}{{^title}}Untitled{{/title}}
{{#members}} - {{.}} + {{/members}}
diff --git a/examples/webchat/htdocs/templates/nav-account.html b/examples/webchat/htdocs/templates/nav-account.html index dacdfa3..f00f729 100644 --- a/examples/webchat/htdocs/templates/nav-account.html +++ b/examples/webchat/htdocs/templates/nav-account.html @@ -3,7 +3,7 @@ {{questionCount}} {{email}} -
+
Conversations diff --git a/examples/webchat/htdocs/templates/page-conversations.html b/examples/webchat/htdocs/templates/page-conversations.html index 1a25019..e88b5ea 100644 --- a/examples/webchat/htdocs/templates/page-conversations.html +++ b/examples/webchat/htdocs/templates/page-conversations.html @@ -1,22 +1,153 @@ -
-
-
-
+ + +
+
+ {{#showConversationList}} +
+
-
- {{#selectedCid}} - {{selectedCid}} - {{/selectedCid}} - {{^selectedCid}} + {{/showConversationList}} + {{#showConversationMain}} +
+ {{#selected}} + +
+ {{#miniMode}} +
+
+ +
+ {{#overflowMenuItems}} + {{#separator}} +
+ {{/separator}} + {{^separator}} + + {{/separator}} + {{/overflowMenuItems}} +
+
+ + {{#showConversationInfo}} + + {{/showConversationInfo}} + {{^showConversationInfo}} + + {{/showConversationInfo}} + {{title}}{{^title}}Untitled{{/title}} +
+ {{/miniMode}} + + {{#showConversationInfo}} +
+
+ +
+ {{#overflowMenuItems}} + {{^hidden}} + {{#separator}} +
+ {{/separator}} + {{^separator}} + + {{/separator}} + {{/hidden}} + {{/overflowMenuItems}} +
+
+ {{#editingTitle}} +

+
+ + + +
+

+ {{/editingTitle}} + {{^editingTitle}} +
+ +
+

{{title}}{{^title}}Untitled{{/title}}

+ {{/editingTitle}} +
+ + {{#editingBlurb}} +
+ +
+ + +
+
+ {{/editingBlurb}} + {{^editingBlurb}} +
+
+ +
+
+ {{#blurb}} +

{{blurb}}

+ {{/blurb}} + {{^blurb}} +

Set a conversation topic here

+ {{/blurb}} +
+
+ {{/editingBlurb}} +
+ {{/showConversationInfo}} + + {{#showConversationPosts}} +
+ {{/showConversationPosts}} +
+ {{#showConversationPosts}} +
+ + +
+ {{/showConversationPosts}} + + {{/selected}} + + {{^selected}}

Select a conversation from the column to the left, or create a new conversation.

- {{/selectedCid}} + {{/selected}}
+ {{/showConversationMain}}
+{{#miniMode}} + +{{/miniMode}} diff --git a/examples/webchat/htdocs/templates/page-new-chat.html b/examples/webchat/htdocs/templates/page-new-chat.html index 79e7e4b..f9a17c1 100644 --- a/examples/webchat/htdocs/templates/page-new-chat.html +++ b/examples/webchat/htdocs/templates/page-new-chat.html @@ -19,7 +19,7 @@
- +
diff --git a/examples/webchat/htdocs/templates/post-entry-text-plain.html b/examples/webchat/htdocs/templates/post-entry-text-plain.html new file mode 100644 index 0000000..6b12468 --- /dev/null +++ b/examples/webchat/htdocs/templates/post-entry-text-plain.html @@ -0,0 +1,6 @@ +
+
+

{{content}}

+

{{author}}
{{date}}

+
+
diff --git a/examples/webchat/htdocs/webchat.syndicate.js b/examples/webchat/htdocs/webchat.syndicate.js index a4d25eb..0d52b33 100644 --- a/examples/webchat/htdocs/webchat.syndicate.js +++ b/examples/webchat/htdocs/webchat.syndicate.js @@ -14,7 +14,7 @@ assertion type conversation(id, title, creator, blurb); assertion type invitation(conversationId, inviter, invitee); assertion type inConversation(conversationId, member) = "in-conversation"; - assertion type post(id, timestamp, conversationId, contentType, content); + assertion type post(id, timestamp, conversationId, author, contentType, content); message type createResource(description) = "create-resource"; message type updateResource(description) = "update-resource"; @@ -34,6 +34,12 @@ assertion type textQuestion(isMultiline) = "text-question"; assertion type acknowledgeQuestion() = "acknowledge-question"; + //--------------------------------------------------------------------------- + // Local assertions and messages + + assertion type selectedCid(cid); // currently-selected conversation ID, or null + message type windowWidthChanged(newWidth); + //--------------------------------------------------------------------------- var brokerConnected = Syndicate.Broker.brokerConnected; @@ -104,6 +110,15 @@ field this.globallyVisible = false; // mirrors *other people's experience of us* field this.locallyVisible = true; field this.showRequestsFromOthers = false; + field this.miniMode = $(window).width() < 768; + + window.addEventListener('resize', Syndicate.Dataspace.wrap(function () { + :: windowWidthChanged($(window).width()); + })); + + on message windowWidthChanged($newWidth) { + this.miniMode = newWidth < 768; + } assert brokerConnection(brokerUrl); @@ -355,44 +370,228 @@ during Syndicate.UI.locationHash($locationHash) { var m = locationHash.match(conversations_re); if (m) { - var selectedCid = m[2] || null; + assert selectedCid(m[2] || false); + } + } - during inbound(uiTemplate("page-conversations.html", $mainEntry)) { - assert mainpage_c.html('div#main-div', Mustache.render(mainEntry, { - selectedCid: selectedCid - })); - } + during inbound(uiTemplate("page-conversations.html", $mainEntry)) { + during selectedCid(false) { + assert mainpage_c.html('div#main-div', Mustache.render(mainEntry, { + miniMode: this.miniMode, + showConversationList: true, + showConversationMain: !this.miniMode, + showConversationInfo: false, + showConversationPosts: false, + selected: false + })); + } + } - during inbound(uiTemplate("conversation-index-entry.html", $indexEntry)) { - during mainpage_c.fragmentVersion($mainpageVersion) { - during inbound(inConversation($cid, sessionInfo.email)) { - field this.members = Immutable.Set(); - on asserted inbound(inConversation(cid, $who)) { - this.members = this.members.add(who); + // Move to the conversation index page when we leave a + // conversation (which also happens automatically when it is + // deleted) + during selectedCid($selected) { + on retracted inbound(inConversation(selected, sessionInfo.email)) { + :: Syndicate.UI.setLocationHash('/conversations'); + } + } + + during inbound(inConversation($cid, sessionInfo.email)) { + field this.members = Immutable.Set(); + field this.title = ''; + field this.creator = ''; + field this.blurb = ''; + field this.editingTitle = false; + field this.editingBlurb = false; + + field this.membersJSON = []; + dataflow { + this.membersJSON = this.members.map(function (m) { return { + email: m, + avatar: avatar(m) + }; }).toArray(); + } + + on asserted inbound(inConversation(cid, $who)) { + this.members = this.members.add(who); + } + on retracted inbound(inConversation(cid, $who)) { + this.members = this.members.remove(who); + } + + on asserted inbound(conversation(cid, $title, $creator, $blurb)) { + this.title = title; + this.creator = creator; + this.blurb = blurb; + } + + during inbound(uiTemplate("page-conversations.html", $mainEntry)) { + during selectedCid($selected) { + if (selected === cid) { + field this.showInfoMode = false; + field this.latestPostTimestamp = 0; + field this.latestPostId = null; + + assert mainpage_c.html('div#main-div', Mustache.render(mainEntry, { + miniMode: this.miniMode, + showConversationList: !this.miniMode, + showConversationMain: true, + showConversationInfo: !this.miniMode || this.showInfoMode, + showConversationPosts: !this.miniMode || !this.showInfoMode, + selected: selected, + title: this.title, + blurb: this.blurb, + members: this.membersJSON, + editingTitle: this.editingTitle, + editingBlurb: this.editingBlurb, + overflowMenuItems: [ + {label: "Invite user...", action: "invite-to-conversation"}, + {label: "Leave conversation", action: "leave-conversation"}, + {separator: true, + hidden: sessionInfo.email !== this.creator}, + {label: "Delete conversation", action: "delete-conversation", + hidden: sessionInfo.email !== this.creator} + ] + })); + + on message mainpage_c.event('#message-input', 'focus', $e) { + setTimeout(function () { e.target.scrollIntoView(false); }, 500); + } + + on message mainpage_c.event('#send-message-button', 'click', _) { + var message = ($("#message-input").val() || '').trim(); + if (message) { + :: outbound(createResource(post(random_hex_string(16), + +(new Date()), + cid, + sessionInfo.email, + "text/plain", + message))); } - on retracted inbound(inConversation(cid, $who)) { - this.members = this.members.remove(who); + $("#message-input").val('').focus(); + } + + on message mainpage_c.event('.invite-to-conversation', 'click', _) { + $('#invitation-modal').modal({}); + } + + on message mainpage_c.event('.send-invitation', 'click', _) { + var invitee = $('#invited-username').val().trim(); + if (invitee) { + :: outbound(createResource(invitation(cid, sessionInfo.email, invitee))); + $('#invited-username').val(''); + $('#invitation-modal').modal('hide'); } - during inbound(conversation(cid, $title, $creator, $blurb)) { - var c = this.ui.context(mainpageVersion, 'conversationIndex', cid); - assert c.html('#conversation-list', Mustache.render(indexEntry, { - isSelected: selectedCid === cid, - selectedCid: selectedCid, - cid: cid, - title: title, - creator: creator, - members: this.members.toArray() - })); - on message c.event('.card-block', 'click', _) { - if (selectedCid === cid) { - :: Syndicate.UI.setLocationHash('/conversations'); - } else { - :: Syndicate.UI.setLocationHash('/conversations/' + cid); + } + + on message mainpage_c.event('.leave-conversation', 'click', _) { + :: outbound(deleteResource(inConversation(cid, sessionInfo.email))); + } + + on message mainpage_c.event('.delete-conversation', 'click', _) { + if (confirm("Delete this conversation?")) { + :: outbound(deleteResource(conversation(cid, + this.title, + this.creator, + this.blurb))); + } + } + + on message mainpage_c.event('.toggle-info-mode', 'click', _) { + this.showInfoMode = !this.showInfoMode; + } + on message mainpage_c.event('.end-info-mode', 'click', _) { + this.showInfoMode = false; + } + + on message mainpage_c.event('#edit-conversation-title', 'click', _) { + this.editingTitle = true; + } + on message mainpage_c.event('#title-heading', 'dblclick', _) { + this.editingTitle = true; + } + on message mainpage_c.event('#accept-conversation-title', 'click', _) { + this.title = $('#conversation-title').val(); + :: outbound(updateResource(conversation(cid, + this.title, + this.creator, + this.blurb))); + this.editingTitle = false; + } + on message mainpage_c.event('#cancel-edit-conversation-title', 'click', _) { + this.editingTitle = false; + } + + on message mainpage_c.event('#edit-conversation-blurb', 'click', _) { + this.editingBlurb = true; + } + on message mainpage_c.event('#blurb', 'dblclick', _) { + this.editingBlurb = true; + } + on message mainpage_c.event('#accept-conversation-blurb', 'click', _) { + this.blurb = $('#conversation-blurb').val(); + :: outbound(updateResource(conversation(cid, + this.title, + this.creator, + this.blurb))); + this.editingBlurb = false; + } + on message mainpage_c.event('#cancel-edit-conversation-blurb', 'click', _) { + this.editingBlurb = false; + } + + during inbound(post($pid, $timestamp, cid, $author, $contentType, $content)) { + if (timestamp > this.latestPostTimestamp) { + this.latestPostTimestamp = timestamp; + this.latestPostId = pid; + } + during mainpage_c.fragmentVersion($mainpageVersion) { + function cleanContentType(t) { + return t.replace('/', '-'); + } + during inbound( + uiTemplate("post-entry-" + cleanContentType(contentType) + ".html", $entry)) + { + var c = this.ui.context(mainpageVersion, 'post', timestamp, pid); + assert c.html('.posts', Mustache.render(entry, { + postId: pid, + date: new Date(timestamp).toString(), + postClass: (author === sessionInfo.email) ? "from-me" : "to-me", + author: author, + contentType: cleanContentType(contentType), + content: content + })); + on asserted c.fragmentVersion(_) { + if ((this.latestPostTimestamp === timestamp) && + (this.latestPostId === pid)) { + $("#post-" + pid)[0].scrollIntoView(false); + } } } } } } + + during inbound(uiTemplate("conversation-index-entry.html", $indexEntry)) { + during mainpage_c.fragmentVersion($mainpageVersion) { + var c = this.ui.context(mainpageVersion, 'conversationIndex', cid); + assert c.html('#conversation-list', Mustache.render(indexEntry, { + isSelected: selected === cid, + selected: selected, + cid: cid, + title: this.title, + creator: this.creator, + members: this.membersJSON + })); + on message c.event('.card-block', 'click', _) { + if (selected === cid) { + :: Syndicate.UI.setLocationHash('/conversations'); + } else { + :: Syndicate.UI.setLocationHash('/conversations/' + cid); + } + } + } + } } } } @@ -401,17 +600,11 @@ field this.invitees = Immutable.Set(); field this.searchString = ''; field this.displayedSearchString = ''; // avoid resetting HTML every keystroke. YUCK - field this.suggestedTitle = ''; - - dataflow { - this.suggestedTitle = this.invitees.toArray().join(', '); - } during inbound(uiTemplate("page-new-chat.html", $mainEntry)) { assert mainpage_c.html('div#main-div', Mustache.render(mainEntry, { noInvitees: this.invitees.isEmpty(), - searchString: this.displayedSearchString, - suggestedTitle: this.suggestedTitle + searchString: this.displayedSearchString })); } @@ -420,12 +613,9 @@ this.searchString = e.target.value.trim(); } - on message Syndicate.UI.globalEvent('.create-conversation', 'click', _) { - // TODO: ^ Would like to use - // mainpage_c.event('.create-conversation', 'click', _) - // here, but the DOM nodes aren't created in time, it seems + on message mainpage_c.event('.create-conversation', 'click', _) { if (!this.invitees.isEmpty()) { - var title = $('#conversation-title').val() || this.suggestedTitle; + var title = $('#conversation-title').val(); var blurb = $('#conversation-blurb').val(); var cid = random_hex_string(32); :: outbound(createResource(conversation(cid, title, sessionInfo.email, blurb))); diff --git a/examples/webchat/server/conversation.rkt b/examples/webchat/server/conversation.rkt index c9799ed..8c08173 100644 --- a/examples/webchat/server/conversation.rkt +++ b/examples/webchat/server/conversation.rkt @@ -11,6 +11,9 @@ (require "duplicate.rkt") (require "util.rkt") +(define (user-in-conversation? who cid) + (immediate-query [query-value #f (in-conversation cid who) #t])) + (supervise (actor #:name 'take-conversation-instructions (stop-when-reloaded) @@ -18,6 +21,9 @@ (on (message (api (session $creator _) (create-resource (? conversation? $c)))) (when (equal? creator (conversation-creator c)) (send! (create-resource c)))) + (on (message (api (session $updater _) (update-resource (? conversation? $c)))) + (when (user-in-conversation? updater (conversation-id c)) + (send! (update-resource c)))) (on (message (api (session $creator _) (delete-resource (? conversation? $c)))) (when (equal? creator (conversation-creator c)) (send! (delete-resource c)))) @@ -35,7 +41,18 @@ (on (message (api (session $who _) (delete-resource (? invitation? $i)))) (when (or (equal? who (invitation-inviter i)) (equal? who (invitation-invitee i))) - (send! (delete-resource i)))))) + (send! (delete-resource i)))) + + (on (message (api (session $who _) (create-resource (? post? $p)))) + (when (and (user-in-conversation? who (post-conversation-id p)) + (equal? who (post-author p))) + (send! (create-resource p)))) + (on (message (api (session $who _) (update-resource (? post? $p)))) + (when (equal? who (post-author p)) + (send! (update-resource p)))) + (on (message (api (session $who _) (delete-resource (? post? $p)))) + (when (equal? who (post-author p)) + (send! (delete-resource p)))))) (supervise (actor #:name 'relay-conversation-state @@ -53,7 +70,7 @@ (assert (api (session who _) i))) (during ($ c (conversation cid _ _ _)) (assert (api (session who _) c))) - (during ($ p (post _ _ cid _ _)) + (during ($ p (post _ _ cid _ _ _)) (assert (api (session who _) p)))))) (supervise @@ -68,7 +85,10 @@ (on-stop (log-info "~v deleted" (c))) (assert (c)) (stop-when-duplicate (list 'conversation cid)) - (stop-when (message (delete-resource (conversation cid _ _ _)))))))) + (stop-when (message (delete-resource (conversation cid _ _ _)))) + (on (message (update-resource (conversation cid $newtitle _ $newblurb))) + (title newtitle) + (blurb newblurb)))))) (supervise (actor #:name 'in-conversation-factory @@ -79,7 +99,8 @@ (on-stop (log-info "~s leaves conversation ~a" who cid)) (assert i) (stop-when-duplicate i) - (stop-when (message (delete-resource i))))))) + (stop-when (message (delete-resource i))) + (stop-when (message (delete-resource (conversation cid _ _ _)))))))) (supervise (actor #:name 'invitation-factory @@ -92,8 +113,24 @@ (assert i) (stop-when-duplicate i) (stop-when (message (delete-resource i))) + (stop-when (message (delete-resource (conversation cid _ _ _)))) (stop-when (asserted (in-conversation cid invitee))))))) +(supervise + (actor #:name 'post-factory + (stop-when-reloaded) + (on (message (create-resource + ($ p0 (post $pid $timestamp $cid $author $content-type $content0)))) + (actor #:name p0 + (field [content content0]) + (define/dataflow p (post pid timestamp cid author content-type (content))) + (assert (p)) + (stop-when-duplicate (list 'post cid pid)) + (stop-when (message (delete-resource (post pid _ cid _ _ _)))) + (stop-when (message (delete-resource (conversation cid _ _ _)))) + (on (message (update-resource (post pid _ cid _ _ $newcontent))) + (content newcontent)))))) + (supervise (actor #:name 'conversation:questions (stop-when-reloaded) diff --git a/examples/webchat/server/pages.rkt b/examples/webchat/server/pages.rkt index c3b6eaa..5209d39 100644 --- a/examples/webchat/server/pages.rkt +++ b/examples/webchat/server/pages.rkt @@ -60,7 +60,7 @@ (body (,@(if body-id `((id ,body-id)) `())) - (div ((class "container")) + (div ((class "container main-container")) (div ((class "header clearfix")) (nav ((class "navbar bg-faded")) ;; (span ((id "nav-heading") (class "navbar-brand text-muted")) ,nav-heading) diff --git a/examples/webchat/server/protocol.rkt b/examples/webchat/server/protocol.rkt index fe1e94e..364cd33 100644 --- a/examples/webchat/server/protocol.rkt +++ b/examples/webchat/server/protocol.rkt @@ -151,6 +151,7 @@ (struct post (id ;; String timestamp ;; Seconds conversation-id ;; String + author ;; Principal content-type ;; MimeTypeString content ;; Any ) #:prefab) ;; ASSERTION