Handling certain types of messages

src/components/player/TextBuffer.jsx

@@ -1,6 +1,15 @@
 import { h } from 'preact'
 import { useState, useEffect } from 'preact/hooks'
 
+import TextMessage from './TextMessage'
+
+const trimImputPrompt = messages =>
+  messages.length < 1
+    ? messages
+    : messages.slice(-1)[0].text === '>'
+      ? messages.slice(0, messages.length - 1)
+      : messages
+
 const parseInbox = (inbox, currentWindow) => {
   const currentInbox =
     inbox.find(({ id }) =>
@@ -16,7 +25,7 @@ const parseInbox = (inbox, currentWindow) => {
   const { clear, text: inboxMessagesRaw } =
     currentInbox
 
-  const incoming =
+  const incoming = trimImputPrompt(
     inboxMessagesRaw
       /* Normalize. */
       .map(({ content }) =>
@@ -32,7 +41,7 @@ const parseInbox = (inbox, currentWindow) => {
         return prev.style === 'emptyLine'
           ? acc
           : [...acc, x]
-      }, [])
+      }, []))
 
   return { clear, incoming }
 }
@@ -50,9 +59,8 @@ export default function ({ inbox, currentWindow }) {
   }, [inbox])
 
   return (
-    <div>
+    <section className='textBuffer'>
-      {messages.map(({ text }) =>
+      {messages.map(TextMessage)}
-        (<div>{text}</div>))}
+    </section>
-    </div>
   )
 }

src/components/player/TextMessage.jsx

@@ -0,0 +1,16 @@
+import { h } from 'preact'
+
+export default function ({ style, text }) {
+  const defaultContent = (<span>{text}</span>)
+
+  const content = ({
+    emptyLine: (<br />),
+    subheader: (<strong>{text}</strong>)
+  })[style] || defaultContent
+
+  return (
+    <div class={['message', style].join(' ')}>
+      {content}
+    </div>
+  )
+}