diff --git a/resources/vue/components/courseware/layouts/CoursewareCompanionBox.vue b/resources/vue/components/courseware/layouts/CoursewareCompanionBox.vue
index f26c8d7c30f667ac008eb57fd59cee56735b1f51..c4a31e22d5576e8fdb60205d0c87f1b367152b7d 100644
--- a/resources/vue/components/courseware/layouts/CoursewareCompanionBox.vue
+++ b/resources/vue/components/courseware/layouts/CoursewareCompanionBox.vue
@@ -1,9 +1,15 @@
+<template>
+    <div class="cw-companion-box" :class="[mood]">
+        <div>
+            <p v-html="msgCompanion"></p>
+            <slot name="companionActions"></slot>
+        </div>
+    </div>
+</template>
+
 <script>
 export default {
     name: 'courseware-companion-box',
-    render(createElement) {
-        return null;
-    },
     props: {
         msgCompanion: String,
         mood: {
@@ -13,41 +19,6 @@ export default {
                 return ['default','unsure', 'special', 'sad', 'pointing', 'curious'].includes(value);
             }
         }
-    },
-    computed: {
-        msgType() {
-            let type = 'info';
-            switch (this.mood) {
-                case 'special':
-                case 'unsure':
-                    type = 'warning';
-                    break;
-                case 'sad':
-                    type = 'error';
-                    break;
-                case 'happy':
-                    type = 'success';
-                    break
-                case 'pointing':
-                case 'curious':
-            }
-            return type;
-        }
-    },
-    watch: {
-        msgCompanion: {
-            handler(current) {
-                if (current.trim().length === 0) {
-                    return;
-                }
-                const notification = {
-                    type: this.msgType,
-                    message: current
-                };
-                this.globalEmit('push-system-notification', notification);
-            },
-            immediate: true
-        }
     }
 };
 </script>