Chat with me button on profile

dev/pane/index.ts

@@ -1,3 +1,9 @@
-import { longChatPane as Pane } from 'chat-pane'
+// import { longChatPane as Pane } from 'chat-pane'
+import Pane from '../../src/profile/profile.view'
+import * as UI from 'solid-ui'
 
-export default Pane
+console.log('Loaded pane into Solid Pane Tester. Check window.Pane and window.UI')
+;(window as any).Pane = Pane
+;(window as any).UI = UI
+
+export default Pane

package.json

@@ -48,7 +48,7 @@
     "activitystreams-pane": "^0.3.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-metalab": "^1.0.0",
-    "chat-pane": "^2.3.2",
+    "chat-pane": "^2.4.2",
     "contacts-pane": "^2.3.0",
     "folder-pane": "^2.3.0",
     "issue-pane": "^2.3.1",

src/profile/profile.view.ts

@@ -15,6 +15,7 @@ import { icons, ns, widgets } from 'solid-ui'
 import { NamedNode } from 'rdflib'
 import { paneDiv } from './profile.dom'
 import { PaneDefinition } from 'pane-registry'
+import { getChat, longChatPane } from 'chat-pane'
 
 const thisPane: PaneDefinition = {
   global: false,
@@ -79,6 +80,31 @@ const thisPane: PaneDefinition = {
 
       // Todo: only show this if there is vcard info
       heading('Contact')
+
+      const chatContainer = dom.createElement('div')
+      const exists = await getChat(subject, false)
+      if (exists) {
+        chatContainer.appendChild(longChatPane.render(exists, context, {}))
+      } else {
+        const button = widgets.button(
+          dom,
+          undefined,
+          'Chat with me',
+          async () => {
+            try {
+              const chat: NamedNode = await getChat(subject)
+              chatContainer.innerHTML = ''
+              chatContainer.appendChild(longChatPane.render(chat, context, {}))
+            } catch (e) {
+              window.alert(e.message)
+            }
+          },
+          { needsBorder: true }
+        )
+        chatContainer.appendChild(button)
+      }
+      main.appendChild(chatContainer)
+
       const contactDisplay = paneDiv(context, subject, 'contact')
       contactDisplay.style.border = '0em' // override form
       main.appendChild(contactDisplay)