Update app.py

app.py

@@ -3,6 +3,9 @@ import os
 from dataclasses import dataclass, field
 from typing import List, Optional, Dict
 from PIL import Image
+import html as py_html
+import re
+import uuid
 
 import numpy as np
 import pandas as pd
@@ -155,8 +158,8 @@ def get_path():
 def display_dialogue(hf_path: str):
     with hf_fs.open(hf_path, "rb") as f:
         txt = f.read().decode("utf-8")
-    display_dialogue_with_numbers(txt)
-    #txt = load_text(hf_path)
+    txt = load_text(hf_path)
+    display_numbered_markdown_container(txt, width_chars=80, max_height_px=500)
     #display_dialogue_with_numbers(txt)
     #st.markdown(
     #    f"<details><summary><b>Herr Laus</b></summary><div>{txt}</div></details><br>",
@@ -165,38 +168,68 @@ def display_dialogue(hf_path: str):
 import html as py_html
 from streamlit.components.v1 import html as st_html
 
-def display_dialogue_with_numbers(text: str, title="Dialogue"):
-    with st.expander(f"{title} (line numbers)", expanded=True):
-        # optional: wrap long lines instead of horizontal scrolling
-        st.markdown(
-            "<style>.stCode pre {white-space: pre-wrap !important; word-break: break-word !important;}</style>",
-            unsafe_allow_html=True,
-        )
-        st.code(text, language="markdown", line_numbers=True)
-
-def _enable_code_wrap_once():
-    if not st.session_state.get("_code_wrap_css_added"):
-        st.markdown(
-            "<style>div[data-testid='stCode'] pre {white-space: pre-wrap !important; word-break: break-word !important;}</style>",
-            unsafe_allow_html=True,
-        )
-        st.session_state["_code_wrap_css_added"] = True
-
-def display_dialogue_container(hf_path: str, title: str = "Dialogue", wrap: bool = True):
-    # read file from HF or local (uses your existing flags/objects)
-    if filesystem == 'hf':
-        with hf_fs.open(hf_path, "rb") as f:
-            txt = f.read().decode("utf-8")
-    else:
-        with open(hf_path, "r", encoding="utf-8") as f:
-            txt = f.read()
-
-    if wrap:
-        _enable_code_wrap_once()
+def _md_inline_to_html(line: str) -> str:
+    """
+    Minimal inline Markdown: **bold**, *italic*.
+    (Avoids bringing a full markdown parser; extend if needed.)
+    """
+    esc = py_html.escape(line)
+    # bold: **text**
+    esc = re.sub(r"\*\*(.+?)\*\*", r"<strong>\1</strong>", esc)
+    # italic: *text*   (ignore **bold** we already handled)
+    esc = re.sub(r"(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)", r"<em>\1</em>", esc)
+    return esc
+
+def display_numbered_markdown_container(text: str,
+                                        title: str = "Dialogue",
+                                        width_chars: int = 80,
+                                        max_height_px: int = 520):
+    """
+    Render a numbered, readable block with inline bold/italic preserved,
+    wrapped to `width_chars` and scrollable within a bordered container.
+    """
+    block_id = f"dlg-{uuid.uuid4().hex[:8]}"
+    lines = text.replace("\r\n", "\n").replace("\r", "\n").split("\n")
+
+    # Convert each source line to HTML while preserving inline bold/italic
+    rows = []
+    for i, line in enumerate(lines, 1):
+        html_line = _md_inline_to_html(line) if line.strip() else "&nbsp;"
+        rows.append(f'''
+            <div class="row">
+              <span class="num">{i}</span>
+              <span class="txt">{html_line}</span>
+            </div>
+        ''')
+    body = "\n".join(rows)
+
+    st.markdown(f"""
+<style>
+#{block_id} {{
+  border: 1px solid #e6e6e6; border-radius: .5rem; padding: .75rem;
+  max-height: {max_height_px}px; overflow-y: auto; background: #fff;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  line-height: 1.5;
+}}
+#{block_id} .row {{
+  display: grid; grid-template-columns: 4ch 1fr; column-gap: 1ch; align-items: start;
+  margin: 0; padding: 0;
+}}
+#{block_id} .num {{
+  color: rgba(0,0,0,.55); text-align: right; user-select: none;
+}}
+/* Wrap the text column to a visual width of `width_chars` characters */
+#{block_id} .txt {{
+  max-width: {width_chars}ch; white-space: pre-wrap; word-break: break-word;
+}}
+</style>
+""", unsafe_allow_html=True)
+
+    with st.container(border=True):
+        #st.markdown(f"**{title}**  \n*(wrapped to {width_chars} chars)*")
+        st.markdown(f'<div id="{block_id}">{body}</div>', unsafe_allow_html=True)
         
-    with st.container(border=False):
-        #st.markdown(f"**{title}**")
-        st.code(txt, language="text", line_numbers=True)
+
 
 def display_image(image_path):
     with hf_fs.open(image_path) as f:
@@ -253,7 +286,7 @@ def show_field(f: Field, index: int, data_collected):
                         display_image(os.path.join(input_repo_path, 'images', value))
                     elif f.name == 'dialogue_name':
                         #display_dialogue(os.path.join(input_repo_path, 'dialogues', value))
-                        display_dialogue_container(os.path.join(input_repo_path, 'dialogues', value), title="")
+                        display_dialogue(value)
                     elif f.name == 'patient':
                         st.markdown(f"**Patient:**&nbsp;&nbsp;{value}")
                     else: