feat: Chat, Step, Steps, RatingInput components

.devcontainer/devcontainer.json

@@ -1,9 +1,9 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/python
 {
-	"name": "Python 3.12 with Node",
+	"name": "Python 3.11 with Node",
 	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye",
+	"image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
 	"features": {
 		"ghcr.io/devcontainers/features/node:1": {
 			"nodeGypDependencies": true,

src/streamsync/core.py

@@ -674,6 +674,14 @@ def _transform_page_open(self, ev) -> str:
         payload = str(ev.payload)
         return payload
 
+    def _transform_chat_message(self, ev) -> str:
+        payload = str(ev.payload)
+        return payload
+
+    def _transform_chat_action_click(self, ev) -> str:
+        payload = str(ev.payload)
+        return payload
+
     def _transform_change(self, ev) -> str:
         payload = str(ev.payload)
         return payload

ui/src/core/templateMap.ts

@@ -10,6 +10,7 @@ import CorePlotlyGraph from "../core_components/content/CorePlotlyGraph.vue";
 import CoreText from "../core_components/content/CoreText.vue";
 import CoreVegaLiteChart from "../core_components/content/CoreVegaLiteChart.vue";
 import CoreVideoPlayer from "../core_components/content/CoreVideoPlayer.vue";
+import CoreChat from "../core_components/content/CoreChat.vue";
 // input
 import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
 import CoreDateInput from "../core_components/input/CoreDateInput.vue";
@@ -22,6 +23,7 @@ import CoreSelectInput from "../core_components/input/CoreSelectInput.vue";
 import CoreSliderInput from "../core_components/input/CoreSliderInput.vue";
 import CoreTextInput from "../core_components/input/CoreTextInput.vue";
 import CoreTextareaInput from "../core_components/input/CoreTextareaInput.vue";
+import CoreRating from "../core_components/input/CoreRatingInput.vue";
 // layout
 import CoreColumn from "../core_components/layout/CoreColumn.vue";
 import CoreColumns from "../core_components/layout/CoreColumns.vue";
@@ -32,6 +34,8 @@ import CoreSeparator from "../core_components/layout/CoreSeparator.vue";
 import CoreSidebar from "../core_components/layout/CoreSidebar.vue";
 import CoreTab from "../core_components/layout/CoreTab.vue";
 import CoreTabs from "../core_components/layout/CoreTabs.vue";
+import CoreStep from "../core_components/layout/CoreStep.vue";
+import CoreSteps from "../core_components/layout/CoreSteps.vue";
 // other
 import CoreButton from "../core_components/other/CoreButton.vue";
 import CoreHtml from "../core_components/other/CoreHtml.vue";
@@ -92,6 +96,10 @@ const templateMap = {
 	metric: CoreMetric,
 	message: CoreMessage,
 	videoplayer: CoreVideoPlayer,
+	chat: CoreChat,
+	step: CoreStep,
+	steps: CoreSteps,
+	ratinginput: CoreRating
 };
 
 if (STREAMSYNC_LIVE_CCT === "yes") {

ui/src/core_components/base/BaseMarkdown.vue

@@ -0,0 +1,100 @@
+<template>
+	<div
+		v-if="isMarkedLoaded"
+		v-dompurify-html="marked.parse(props.rawText).trim()"
+		class="BaseMarkdown markdown"
+	></div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount, ref } from "vue";
+
+let marked: typeof import("marked");
+const isMarkedLoaded = ref(false);
+
+const props = defineProps<{
+	rawText: string;
+}>();
+
+onBeforeMount(async () => {
+	marked = await import("marked");
+	isMarkedLoaded.value = true;
+});
+</script>
+
+<style scoped>
+.markdown:deep() h1,
+.markdown:deep() h2,
+.markdown:deep() h3,
+.markdown:deep() h4 {
+	font-weight: 300;
+	margin: 0;
+	color: var(--primaryTextColor);
+}
+
+.markdown:deep() h1 {
+	font-size: 1.3rem;
+}
+
+.markdown:deep() h2 {
+	font-size: 1rem;
+}
+
+.markdown:deep() h3 {
+	font-size: 0.9rem;
+}
+
+.markdown:deep() h4 {
+	text-transform: uppercase;
+	font-weight: bold;
+	font-size: 0.65rem;
+	letter-spacing: 0.2ch;
+}
+
+.markdown:deep() ul,
+.markdown:deep() ol {
+	padding: 0;
+	padding-inline-start: 0;
+	margin-block-start: 0;
+}
+
+.markdown:deep() li {
+	margin: 0 0 0 32px;
+}
+
+.markdown:deep() hr {
+	border: none;
+	border-top: 1px solid var(--separatorColor);
+}
+
+.markdown:deep() pre {
+	background-color: var(--separatorColor);
+	font-family: monospace;
+	padding: 8px;
+}
+
+.markdown:deep() code {
+	background-color: var(--separatorColor);
+	font-family: monospace;
+	padding: 2px;
+}
+
+.markdown:deep() pre > code {
+	background-color: unset;
+}
+
+.markdown:deep() table {
+	border-collapse: collapse;
+}
+
+.markdown:deep() th {
+	padding: 8px;
+	background: var(--separatorColor);
+	border: 1px solid var(--separatorColor);
+}
+
+.markdown:deep() td {
+	padding: 8px;
+	border: 1px solid var(--separatorColor);
+}
+</style>