add html and css for intermediate result rendering

playground/UI/.chainlit/config.toml

@@ -19,7 +19,7 @@ cache = false
 prompt_playground = true
 
 # Process and display HTML in messages. This can be a security risk (see https://stackoverflow.com/questions/19603097/why-is-it-dangerous-to-render-user-generated-html-or-javascript)
-unsafe_allow_html = false
+unsafe_allow_html = true
 
 # Process and display mathematical expressions. This can clash with "$" characters in messages.
 latex = false

playground/UI/app.py

@@ -1,3 +1,4 @@
+import functools
 import os
 import re
 import sys
@@ -31,6 +32,28 @@
 app_session_dict: Dict[str, Session] = {}
 
 
+def elem(name: str, cls: str = "", attr: Dict[str, str] = {}):
+    attr_str = ""
+    if len(attr) > 0:
+        attr_str += "".join(f' {k}="{v}"' for k, v in attr.items())
+    if cls:
+        attr_str += f' class="{cls}"'
+
+    def inner(*children: str):
+        children_str = "".join(children)
+        return f"<{name}{attr_str}>{children_str}</{name}>"
+
+    return inner
+
+
+def txt(content: str):
+    return content.replace("<", "&lt;").replace(">", "&gt;").replace("\n", "<br>")
+
+
+div = functools.partial(elem, "div")
+span = functools.partial(elem, "span")
+
+
 def file_display(files: List[Tuple[str, str]], session_cwd_path: str):
     elements: List[cl.Element] = []
     for file_name, file_path in files:
@@ -194,8 +217,14 @@ def format_post_body(self, is_end: bool) -> str:
                 content_chunks.append(self.cur_message)
 
         if not is_end:
-            status_chunk = f"**Status**: {self.cur_post_status}"
-            content_chunks.append(status_chunk)
+            content_chunks.append(
+                div("tw-status")(
+                    span("tw-status-updating")(
+                        elem("svg", attr={"viewBox": "22 22 44 44"})(elem("circle")()),
+                    ),
+                    span("tw-status-msg")(txt(self.cur_post_status + "...")),
+                ),
+            )
 
         return "\n\n".join(content_chunks)
 
@@ -204,9 +233,43 @@ def format_attachment(
         attachment: Tuple[str, AttachmentType, str, bool],
     ) -> str:
         id, a_type, msg, is_end = attachment
-        newline = "\n" if "\n" in msg else " "
-        attach_type = " ".join([item.capitalize() for item in a_type.value.split("_")])
-        return f"**{attach_type}**:{newline}{msg}"
+        header = div("tw-atta-header")(
+            div("tw-atta-key")(
+                " ".join([item.capitalize() for item in a_type.value.split("_")]),
+            ),
+            div("tw-atta-id")(id),
+        )
+        atta_cnt: List[str] = []
+
+        if a_type in [AttachmentType.plan, AttachmentType.init_plan]:
+            items: List[str] = []
+            for idx, row in enumerate(msg.split("\n")):
+                item = row
+                if "." in row and row.split(".")[0].isdigit():
+                    item = row.split(".", 1)[1].strip()
+                items.append(
+                    div("tw-plan-item")(
+                        div("tw-plan-idx")(str(idx + 1)),
+                        div("tw-plan-cnt")(txt(item)),
+                    ),
+                )
+            atta_cnt.append(div("tw-plan")(*items))
+        elif a_type in [AttachmentType.execution_result]:
+            atta_cnt.append(
+                elem("pre", "tw-execution-result")(
+                    elem("code")(txt(msg)),
+                ),
+            )
+        elif a_type in [AttachmentType.python]:
+            # use raw Markdown syntax for supporting syntax highlight upon render
+            return f"{header}\n\n```python\n{msg}\n```"
+        else:
+            atta_cnt.append(txt(msg))
+
+        return div("tw-atta")(
+            header,
+            div("tw-atta-cnt")(*atta_cnt),
+        )
 
 
 @cl.on_chat_start

playground/UI/public/style.css

@@ -1,4 +1,149 @@
-img[alt=logo] {
-    max-height: 40px !important;
-    display: inline-block;
+img[alt='logo'] {
+  max-height: 40px !important;
+  display: inline-block;
+}
+
+.post {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin-bottom: 10px;
+  max-width: 800px;
+}
+
+.tw-atta {
+  display: block;
+  border: solid 2px #eee;
+  border-radius: 10px;
+  background-color: #fafaff;
+  overflow: hidden;
+  box-shadow: 0 0 10px 2px #f0f0f0;
+  margin: 10px 0;
+}
+
+.tw-atta-header {
+  height: 20px;
+  border-bottom: solid 2px #eee;
+  padding: 5px 10px;
+  background-color: #c0e0ff;
+  font-weight: 500;
+  display: flex;
+}
+
+.tw-atta-key {
+  flex: 1;
+}
+.tw-atta-id {
+  color: #ccc;
+  font-size: 0.8em;
+}
+
+.tw-atta-cnt {
+  padding: 10px 20px;
+}
+
+.markdown-body .tw-plan {
+  position: relative;
+}
+div.markdown-body div.tw-plan::before {
+  content: '';
+  display: block;
+  width: 4px;
+  height: calc(100% + 20px);
+  position: absolute;
+  background-color: #eee;
+  top: -10px;
+  left: 15px;
+}
+
+div.markdown-body div.tw-plan-item {
+  display: flex;
+}
+
+.markdown-body div.tw-plan-idx {
+  flex: 0 0 20px;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border-radius: 12px;
+  text-align: center;
+  line-height: 20px;
+  border: solid 2px #a0c0ff;
+  background-color: #c0e0ff;
+  margin: 5px !important;
+  margin-top: 5px;
+  font-weight: 500;
+  color: #555;
+}
+
+.markdown-body div.tw-plan-cnt {
+  margin: 5px 10px;
+  margin-top: 5px;
+}
+
+.markdown-body .tw-status {
+  display: inline-block;
+  padding: 5px 10px;
+  border-radius: 3px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  color: #555;
+  white-space: nowrap;
+  background-color: #eee;
+  min-width: 120px;
+}
+
+.markdown-body .tw-status-msg {
+  margin: 10px;
+  padding: 0;
+  height: 20px;
+}
+
+/* Updater spinner (adopted from MUI for align with Chainlit) */
+@keyframes tw-updating-status-ani-dash {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+}
+@keyframes tw-updating-status-ani-circle {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.markdown-body .tw-status-updating {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  color: #aaa;
+  animation: 1.4s linear 0s infinite normal none running
+    tw-updating-status-ani-circle;
+}
+.markdown-body .tw-status-updating svg {
+  display: block;
+}
+.markdown-body .tw-status-updating svg circle {
+  stroke: currentColor;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke-width: 4;
+  fill: none;
+  r: 20;
+  cx: 44;
+  cy: 44;
+  animation: tw-updating-status-ani-dash 1.4s ease-in-out infinite;
 }