Update dashboard to include dialog viewer, root causes, keywords (#1)

- Update dashboard to include dialog viewer, root causes, keywords (28d707bd073364022256f121f96981b75bf57964)

app.py

@@ -1,5 +1,6 @@
 import base64
 import io
+import json
 import random
 
 import dash
@@ -11,8 +12,6 @@ from dash import Input, Output, State, callback, dcc, html
 
 # Initialize the Dash app
 app = dash.Dash(__name__, suppress_callback_exceptions=True)
-server = app.server
-
 
 # Define app layout
 app.layout = html.Div(
@@ -180,6 +179,37 @@ app.layout = html.Div(
                                                     ],
                                                     className="metrics-section",
                                                 ),
+                                                # Added Root Causes section
+                                                html.Div(
+                                                    [
+                                                        html.H4(
+                                                            [
+                                                                "Root Causes",
+                                                                html.I(
+                                                                    className="fas fa-info-circle",
+                                                                    title="Root cause detection is experimental and may require manual review since it is generated by AI models. Root causes are only shown in clusters with identifiable root causes.",
+                                                                    # Added title for info icon
+                                                                    style={
+                                                                        "marginLeft": "0.2rem",
+                                                                        "color": "#6c757d",  # General gray
+                                                                        "fontSize": "0.9rem",
+                                                                        "cursor": "pointer",
+                                                                        "verticalAlign": "middle",
+                                                                    },
+                                                                ),
+                                                            ],
+                                                            className="subsection-header",
+                                                        ),
+                                                        html.Div(
+                                                            id="root-causes",
+                                                            className="root-causes-container",
+                                                        ),
+                                                    ],
+                                                    id="root-causes-section",
+                                                    style={
+                                                        "display": "none"
+                                                    },  # Initially hidden
+                                                ),
                                                 # Added Tags section
                                                 html.Div(
                                                     [
@@ -191,16 +221,40 @@ app.layout = html.Div(
                                                             id="important-tags",
                                                             className="tags-container",
                                                         ),
-                                                    ]
+                                                    ],
+                                                    id="tags-section",
+                                                    style={
+                                                        "display": "none"
+                                                    },  # Initially hidden
                                                 ),
                                             ],
                                             className="details-section",
                                         ),
                                         html.Div(
                                             [
-                                                html.H4(
-                                                    "Sample Dialogs (Summary)",
-                                                    className="subsection-header",
+                                                html.Div(
+                                                    [
+                                                        html.H4(
+                                                            [
+                                                                "Sample Dialogs (Summary)",
+                                                                html.Button(
+                                                                    html.I(
+                                                                        className="fas fa-sync-alt"
+                                                                    ),
+                                                                    id="refresh-dialogs-btn",
+                                                                    className="refresh-button",
+                                                                    title="Refresh dialogs",
+                                                                    n_clicks=0,
+                                                                ),
+                                                            ],
+                                                            className="subsection-header",
+                                                            style={
+                                                                "margin": "0",
+                                                                "display": "flex",
+                                                                "alignItems": "center",
+                                                            },
+                                                        ),
+                                                    ],
                                                 ),
                                                 html.Div(
                                                     id="sample-dialogs",
@@ -240,8 +294,111 @@ app.layout = html.Div(
             id="main-content",
             style={"display": "none"},
         ),
+        # Conversation Modal
+        html.Div(
+            id="conversation-modal",
+            children=[
+                html.Div(
+                    children=[
+                        html.Div(
+                            [
+                                html.H3(
+                                    "Full Conversation",
+                                    style={"margin": "0", "flex": "1"},
+                                ),
+                                html.Button(
+                                    html.I(className="fas fa-times"),
+                                    id="close-modal-btn",
+                                    className="close-modal-btn",
+                                    title="Close",
+                                ),
+                            ],
+                            className="modal-header",
+                        ),
+                        html.Div(
+                            id="conversation-subheader",
+                            className="conversation-subheader",
+                        ),
+                        html.Div(
+                            id="conversation-content", className="conversation-content"
+                        ),
+                    ],
+                    className="modal-content",
+                ),
+            ],
+            className="modal-overlay-conversation",
+            style={"display": "none"},
+        ),
+        # Dialogs Table Modal
+        html.Div(
+            id="dialogs-table-modal",
+            children=[
+                html.Div(
+                    children=[
+                        html.Div(
+                            [
+                                html.H3(
+                                    id="dialogs-modal-title",
+                                    style={"margin": "0", "flex": "1"},
+                                ),
+                                html.Button(
+                                    html.I(className="fas fa-times"),
+                                    id="close-dialogs-modal-btn",
+                                    className="close-modal-btn",
+                                    title="Close",
+                                ),
+                            ],
+                            className="modal-header",
+                        ),
+                        html.Div(
+                            id="dialogs-table-content",
+                            className="dialogs-table-content",
+                        ),
+                    ],
+                    className="modal-content-large",
+                ),
+            ],
+            className="modal-overlay",
+            style={"display": "none"},
+        ),
+        # Root Cause Dialogs Modal
+        html.Div(
+            id="root-cause-modal",
+            children=[
+                html.Div(
+                    children=[
+                        html.Div(
+                            [
+                                html.H3(
+                                    id="root-cause-modal-title",
+                                    style={"margin": "0", "flex": "1"},
+                                ),
+                                html.Button(
+                                    html.I(className="fas fa-times"),
+                                    id="close-root-cause-modal-btn",
+                                    className="close-modal-btn",
+                                    title="Close",
+                                ),
+                            ],
+                            className="modal-header",
+                        ),
+                        html.Div(
+                            id="root-cause-table-content",
+                            className="dialogs-table-content",
+                        ),
+                    ],
+                    className="modal-content-large",
+                ),
+            ],
+            className="modal-overlay",
+            style={"display": "none"},
+        ),
         # Store the processed data
         dcc.Store(id="stored-data"),
+        # Store the current selected topic for dialogs modal
+        dcc.Store(id="selected-topic-store"),
+        # Store the current selected root cause for root cause modal
+        dcc.Store(id="selected-root-cause-store"),
     ],
     className="app-container",
 )
@@ -640,6 +797,139 @@ app.index_string = """
                 font-weight: 500;
             }
 
+            .tag-root-cause {
+                background-color: #8B4513;
+                color: hsl(0, 0%, 98%);
+                font-weight: 500;
+            }
+
+            .refresh-button {
+                background-color: hsl(210, 40%, 98%);
+                border: 1px solid hsl(214.3, 31.8%, 91.4%);
+                border-radius: 0.25rem;
+                padding: 0.25rem;
+                cursor: pointer;
+                color: hsl(222.2, 84%, 4.9%);
+                font-size: 0.75rem;
+                transition: all 0.15s ease-in-out;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                min-width: 1.5rem;
+                height: 1.5rem;
+                margin-left: 0.5rem;
+            }
+
+            .refresh-button:hover {
+                background-color: hsl(210, 40%, 96%);
+                border-color: hsl(214.3, 31.8%, 81.4%);
+            }
+
+            .refresh-button:active {
+                background-color: hsl(210, 40%, 94%);
+                transform: scale(0.98);
+            }
+
+            .modal-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.5);
+                z-index: 1000;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .modal-overlay-conversation {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.7);
+                z-index: 1100;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .modal-content {
+                background-color: white;
+                border-radius: 0.5rem;
+                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+                max-width: 80%;
+                max-height: 80%;
+                width: 600px;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .modal-header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 1rem;
+                border-bottom: 1px solid hsl(214.3, 31.8%, 91.4%);
+            }
+
+            .close-modal-btn {
+                background: none;
+                border: none;
+                cursor: pointer;
+                color: hsl(215.4, 16.3%, 46.9%);
+                font-size: 1.2rem;
+                padding: 0.5rem;
+                border-radius: 0.25rem;
+                transition: all 0.15s ease-in-out;
+            }
+
+            .close-modal-btn:hover {
+                background-color: hsl(210, 40%, 96%);
+                color: hsl(222.2, 84%, 4.9%);
+            }
+
+            .conversation-subheader {
+                padding: 0.75rem 1rem;
+                border-bottom: 1px solid hsl(214.3, 31.8%, 91.4%);
+                background-color: hsl(210, 40%, 98%);
+                font-size: 0.875rem;
+                color: hsl(215.4, 16.3%, 46.9%);
+                margin: 0 1rem;
+                border-radius: 0.25rem 0.25rem 0 0;
+            }
+
+            .conversation-content {
+                padding: 1rem;
+                overflow-y: auto;
+                max-height: 60vh;
+                white-space: pre-wrap;
+                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+                font-size: 0.875rem;
+                line-height: 1.5;
+                color: hsl(222.2, 84%, 4.9%);
+                background-color: hsl(210, 40%, 98%);
+                border-radius: 0.25rem;
+                margin: 0 1rem 1rem 1rem;
+            }
+
+            .conversation-icon {
+                margin-left: 0.5rem;
+                cursor: pointer;
+                color: hsl(210, 40%, 98%);
+                font-size: 0.875rem;
+                padding: 0.25rem;
+                border-radius: 0.25rem;
+                transition: all 0.15s ease-in-out;
+            }
+
+            .conversation-icon:hover {
+                background-color: rgba(255, 255, 255, 0.2);
+                color: hsl(210, 40%, 98%);
+            }
+
             .no-selection-container {
                 position: absolute;
                 top: 0;
@@ -678,6 +968,18 @@ app.index_string = """
                 background-color: #f8f9fa;
             }
 
+            /* Root Causes container */
+            .root-causes-container {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 3px;
+                margin-top: 3px;
+                margin-bottom: 10px;
+                padding: 4px;
+                border-radius: 6px;
+                background-color: #f8f9fa;
+            }
+
 
             .topic-tag {
                 padding: 0.375rem 0.75rem;
@@ -723,6 +1025,47 @@ app.index_string = """
                 color: rgba(255, 255, 255, 0.9);
             }
 
+            .root-cause-tag {
+                padding: 3px 8px;
+                border-radius: 12px;
+                font-size: 0.7rem;
+                display: inline-flex;
+                align-items: center;
+                box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+                transition: all 0.2s ease;
+                font-weight: 500;
+                margin: 2px 3px 2px 0;
+                cursor: default;
+                border: 1px solid rgba(0,0,0,0.06);
+                background-color: #8b6f47;  /* Muted brown/amber color for root causes */
+                color: white;
+                line-height: 1.2;
+            }
+
+            .root-cause-tag:hover {
+                transform: translateY(-1px);
+                box-shadow: 0 3px 5px rgba(0,0,0,0.15);
+                background-color: #7a5f3d;  /* Slightly darker on hover */
+            }
+
+            .root-cause-tag-icon {
+                margin-right: 3px;
+                font-size: 0.6rem;
+                opacity: 0.8;
+                color: rgba(255, 255, 255, 0.9);
+            }
+
+            .root-cause-click-icon {
+                transition: all 0.2s ease;
+                color: rgba(255, 255, 255, 0.8);
+            }
+
+            .root-cause-click-icon:hover {
+                opacity: 1 !important;
+                transform: scale(1.1);
+                color: rgba(255, 255, 255, 1);
+            }
+
             .no-tags-message {
                 color: var(--muted-foreground);
                 font-style: italic;
@@ -731,6 +1074,127 @@ app.index_string = """
                 width: 100%;
             }
 
+            .no-root-causes-message {
+                color: var(--muted-foreground);
+                font-style: italic;
+                padding: 0.75rem;
+                text-align: center;
+                width: 100%;
+            }
+
+            /* Show All Dialogs Button */
+            .show-dialogs-btn {
+                background-color: var(--primary);
+                color: var(--primary-foreground);
+                border: none;
+                padding: 0.5rem 0.75rem;
+                border-radius: var(--radius);
+                font-size: 0.75rem;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                font-weight: 500;
+                margin-left: 0.5rem;
+                display: inline-flex;
+                align-items: center;
+                gap: 0.25rem;
+            }
+
+            .show-dialogs-btn:hover {
+                background-color: var(--primary);
+                opacity: 0.9;
+                transform: translateY(-1px);
+            }
+
+            /* Dialogs Table Modal */
+            .modal-content-large {
+                background-color: white;
+                border-radius: 0.5rem;
+                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+                max-width: 90%;
+                max-height: 90%;
+                width: 1200px;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .dialogs-table-content {
+                padding: 1rem;
+                overflow-y: auto;
+                max-height: 70vh;
+                background-color: hsl(210, 40%, 98%);
+                border-radius: 0.25rem;
+                margin: 0 1rem 1rem 1rem;
+            }
+
+            .dialogs-table {
+                width: 100%;
+                border-collapse: collapse;
+                background-color: white;
+                border-radius: 0.5rem;
+                overflow: hidden;
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            }
+
+            .dialogs-table th {
+                background-color: var(--secondary);
+                color: var(--secondary-foreground);
+                padding: 0.75rem;
+                text-align: left;
+                font-weight: 600;
+                font-size: 0.875rem;
+                border-bottom: 1px solid var(--border);
+            }
+
+            .dialogs-table td {
+                padding: 0.75rem;
+                border-bottom: 1px solid var(--border);
+                font-size: 0.875rem;
+                vertical-align: top;
+            }
+
+            .dialogs-table tr:hover {
+                background-color: var(--secondary);
+            }
+
+            .dialog-summary-cell {
+                max-width: 23.5rem;
+                word-wrap: break-word;
+                line-height: 1.4;
+            }
+
+            .dialog-tags-cell {
+                max-width: 200px;
+            }
+
+            .dialog-tag-small {
+                display: inline-block;
+                padding: 0.125rem 0.375rem;
+                margin: 0.125rem;
+                border-radius: 0.25rem;
+                font-size: 0.625rem;
+                font-weight: 500;
+            }
+
+            .open-chat-btn {
+                background-color: var(--primary);
+                color: var(--primary-foreground);
+                border: none;
+                padding: 0.375rem 0.5rem;
+                border-radius: var(--radius);
+                font-size: 0.75rem;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                font-weight: 500;
+                display: inline-flex;
+                align-items: center;
+                gap: 0.25rem;
+            }
+
+            .open-chat-btn:hover {
+                opacity: 0.9;
+                transform: translateY(-1px);
+            }
+
             /* Responsive adjustments */
             @media (max-width: 768px) {
                 .dashboard-container {
@@ -794,6 +1258,36 @@ def process_upload(contents, filename):
             df = pd.read_csv(io.StringIO(decoded.decode("utf-8")))
         elif "xls" in filename.lower():
             df = pd.read_excel(io.BytesIO(decoded))
+
+        # DEBUG
+        # --- Print unique root_cause_subcluster values for each deduplicated_topic_name ---
+        if (
+            "deduplicated_topic_name" in df.columns
+            and "root_cause_subcluster" in df.columns
+        ):
+            print(
+                "\n[INFO] Unique root_cause_subcluster values for each deduplicated_topic_name:"
+            )
+            for topic in df["deduplicated_topic_name"].unique():
+                subclusters = (
+                    df[df["deduplicated_topic_name"] == topic]["root_cause_subcluster"]
+                    .dropna()
+                    .unique()
+                )
+                print(f"- {topic}:")
+                for sub in subclusters:
+                    print(f"    - {sub}")
+            print()
+        # --- End of DEBUG ---
+
+        # Hardcoded flag to exclude 'Unclustered' topics
+        EXCLUDE_UNCLUSTERED = True
+        if EXCLUDE_UNCLUSTERED and "deduplicated_topic_name" in df.columns:
+            df = df[df["deduplicated_topic_name"] != "Unclustered"].copy()
+            # If we strip leading and trailing `"` or `'` from the topic name here, then
+            # we will have a problem with the deduplicated names, as they will not match the
+            # original topic names in the dataset.
+            # Better do it in the first script.
         else:
             return (
                 None,
@@ -858,6 +1352,9 @@ def process_upload(contents, filename):
 def analyze_topics(df):
     # Group by topic name and calculate metrics
     topic_stats = (
+        # IMPORTANT!
+        # As deduplicated_topic_name, we have either the deduplicated names (if enabled by the process),
+        # either the kmeans_reclustered name (where available) and the ClusterNames.
         df.groupby("deduplicated_topic_name")
         .agg(
             count=("id", "count"),
@@ -1105,22 +1602,24 @@ def update_bubble_chart(data, color_metric):
     # DEBUG: Print sizes of bubbles in the first and second bins
     bins = sorted(df["bin"].unique())
     if len(bins) >= 1:
-        first_bin = bins[0]
-        print(f"DEBUG - First bin '{first_bin}' bubble sizes:")
-        first_bin_df = df[df["bin"] == first_bin]
-        for idx, row in first_bin_df.iterrows():
-            print(
-                f"  Topic: {row['deduplicated_topic_name']}, Raw size: {row['count']}, Displayed size: {size_values[idx]}"
-            )
+        # first_bin = bins[0]
+        # print(f"DEBUG - First bin '{first_bin}' bubble sizes:")
+        # first_bin_df = df[df["bin"] == first_bin]
+        # for idx, row in first_bin_df.iterrows():
+        #     print(
+        #         f"  Topic: {row['deduplicated_topic_name']}, Raw size: {row['count']}, Displayed size: {size_values[idx]}"
+        #     )
+        pass
 
     if len(bins) >= 2:
-        second_bin = bins[1]
-        print(f"DEBUG - Second bin '{second_bin}' bubble sizes:")
-        second_bin_df = df[df["bin"] == second_bin]
-        for idx, row in second_bin_df.iterrows():
-            print(
-                f"  Topic: {row['deduplicated_topic_name']}, Raw size: {row['count']}, Displayed size: {size_values[idx]}"
-            )
+        # second_bin = bins[1]
+        # print(f"DEBUG - Second bin '{second_bin}' bubble sizes:")
+        # second_bin_df = df[df["bin"] == second_bin]
+        # for idx, row in second_bin_df.iterrows():
+        #     print(
+        #         f"  Topic: {row['deduplicated_topic_name']}, Raw size: {row['count']}, Displayed size: {size_values[idx]}"
+        #     )
+        pass
 
     # Determine color based on selected metric
     if color_metric == "negative_rate":
@@ -1149,9 +1648,6 @@ def update_bubble_chart(data, color_metric):
         # color_scale = "Portland"
         color_scale = "Teal"
 
-    # Set all text positions to bottom for consistent layout
-    text_positions = ["bottom center"] * len(df)
-
     # Create enhanced hover text that includes bin information
     hover_text = [
         f"Topic: {topic}<br>{size_title}: {raw:.1f}<br>{color_title}: {color:.1f}<br>Group: {bin_desc}"
@@ -1222,8 +1718,9 @@ def update_bubble_chart(data, color_metric):
                 showarrow=False,
                 textangle=0,
                 font=dict(
-                    size=10,
-                    # size=8,
+                    # size=10,
+                    # size=15,
+                    size=9,
                     color="var(--foreground)",
                     family="Arial, sans-serif",
                     weight="bold",
@@ -1335,19 +1832,40 @@ def update_bubble_chart(data, color_metric):
         Output("topic-title", "children"),
         Output("topic-metadata", "children"),
         Output("topic-metrics", "children"),
+        Output("root-causes", "children"),
+        Output("root-causes-section", "style"),
         Output("important-tags", "children"),
+        Output("tags-section", "style"),
         Output("sample-dialogs", "children"),
         Output("no-topic-selected", "style"),
+        Output("selected-topic-store", "data"),
+    ],
+    [
+        Input("bubble-chart", "hoverData"),
+        Input("bubble-chart", "clickData"),
+        Input("refresh-dialogs-btn", "n_clicks"),
     ],
-    [Input("bubble-chart", "hoverData"), Input("bubble-chart", "clickData")],
     [State("stored-data", "data"), State("upload-data", "contents")],
 )
-def update_topic_details(hover_data, click_data, stored_data, file_contents):
+def update_topic_details(
+    hover_data, click_data, refresh_clicks, stored_data, file_contents
+):
     # Determine which data to use (prioritize click over hover)
     hover_info = hover_data or click_data
 
     if not hover_info or not stored_data or not file_contents:
-        return "", [], [], "", [], {"display": "flex"}
+        return (
+            "",
+            [],
+            [],
+            "",
+            {"display": "none"},
+            "",
+            {"display": "none"},
+            [],
+            {"display": "flex"},
+            None,
+        )
 
     # Extract topic name from the hover data
     topic_name = hover_info["points"][0]["customdata"][0]
@@ -1364,9 +1882,11 @@ def update_topic_details(hover_data, click_data, stored_data, file_contents):
         content_type
         == "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64"
     ):
-        df_full = pd.read_excel(io.BytesIO(decoded))
+        df_full = pd.read_excel(io.BytesIO(decoded), dtype={"Root_Cause": str})
     else:  # Assume CSV
-        df_full = pd.read_csv(io.StringIO(decoded.decode("utf-8")))
+        df_full = pd.read_csv(
+            io.StringIO(decoded.decode("utf-8")), dtype={"Root_Cause": str}
+        )
 
     # Filter to this topic
     topic_conversations = df_full[df_full["deduplicated_topic_name"] == topic_name]
@@ -1380,8 +1900,20 @@ def update_topic_details(hover_data, click_data, stored_data, file_contents):
             [
                 html.I(className="fas fa-comments metadata-icon"),
                 html.Span(f"{int(topic_data['count'])} dialogs"),
+                html.Button(
+                    [
+                        html.I(
+                            className="fas fa-table", style={"marginRight": "0.25rem"}
+                        ),
+                        "Show all dialogs inside",
+                    ],
+                    id="show-all-dialogs-btn",
+                    className="show-dialogs-btn",
+                    n_clicks=0,
+                ),
             ],
             className="metadata-item",
+            style={"display": "flex", "alignItems": "center", "width": "100%"},
         ),
     ]
 
@@ -1410,7 +1942,66 @@ def update_topic_details(hover_data, click_data, stored_data, file_contents):
         ),
     ]
 
-    # New: Extract and process consolidated_tags with improved styling
+    # Extract and process root causes
+    root_causes_output = ""
+    root_causes_section_style = {"display": "none"}
+
+    # Check if root_cause_subcluster column exists in the data
+    if "root_cause_subcluster" in topic_conversations.columns:
+        # Get unique root causes for this specific cluster
+        root_causes = topic_conversations["root_cause_subcluster"].dropna().unique()
+
+        # Filter out common non-informative values including "Unclustered"
+        filtered_root_causes = [
+            rc
+            for rc in root_causes
+            if rc
+            not in [
+                "Sub-clustering disabled",
+                "Not eligible for sub-clustering",
+                "No valid root causes",
+                "No Subcluster",
+                "Unclustered",
+                "",
+            ]
+        ]
+
+        # Debug: Print the unique root causes for this cluster
+        print(f"\n[DEBUG] Root causes for cluster '{topic_name}':")
+        print(f"  All root causes: {list(root_causes)}")
+        print(f"  Filtered root causes: {filtered_root_causes}")
+
+        if filtered_root_causes:
+            # Create beautifully styled root cause tags with clickable icons
+            root_causes_output = html.Div(
+                [
+                    html.Div(
+                        [
+                            html.I(
+                                className="fas fa-exclamation-triangle root-cause-tag-icon"
+                            ),
+                            html.Span(root_cause, style={"marginRight": "6px"}),
+                            html.I(
+                                className="fas fa-external-link-alt root-cause-click-icon",
+                                id={"type": "root-cause-icon", "index": root_cause},
+                                title="Click to see specific chats assigned with this root cause.",
+                                style={
+                                    "cursor": "pointer",
+                                    "fontSize": "0.55rem",
+                                    "opacity": "0.8",
+                                },
+                            ),
+                        ],
+                        className="root-cause-tag",
+                        style={"display": "inline-flex", "alignItems": "center"},
+                    )
+                    for root_cause in filtered_root_causes
+                ],
+                className="root-causes-container",
+            )
+            root_causes_section_style = {"display": "block"}
+
+    # Extract and process consolidated_tags with improved styling
     tags_list = []
     for _, row in topic_conversations.iterrows():
         tags_str = row.get("consolidated_tags", "")
@@ -1430,6 +2021,8 @@ def update_topic_details(hover_data, click_data, stored_data, file_contents):
     TOP_K = 15
     sorted_tags = sorted_tags[:TOP_K]
 
+    # Set tags section visibility and output
+    tags_section_style = {"display": "none"}
     if sorted_tags:
         # Create beautifully styled tags with count indicators and consistent color
         tags_output = html.Div(
@@ -1445,6 +2038,7 @@ def update_topic_details(hover_data, click_data, stored_data, file_contents):
             ],
             className="tags-container",
         )
+        tags_section_style = {"display": "block"}
     else:
         tags_output = html.Div(
             [
@@ -1475,13 +2069,37 @@ def update_topic_details(hover_data, click_data, stored_data, file_contents):
             chat_id_tag = None
             if "id" in row:
                 chat_id_tag = html.Span(
-                    f"Chat ID: {row['id']}", className="dialog-tag tag-chat-id"
+                    [
+                        f"Chat ID: {row['id']} ",
+                        html.I(
+                            className="fas fa-arrow-up-right-from-square conversation-icon",
+                            id={"type": "conversation-icon", "index": row["id"]},
+                            title="View full conversation",
+                            style={"marginLeft": "0.25rem"},
+                        ),
+                    ],
+                    className="dialog-tag tag-chat-id",
+                    style={"display": "inline-flex", "alignItems": "center"},
+                )
+
+            # Add Root Cause tag if 'Root Cause' column exists
+            root_cause_tag = None
+            if (
+                "Root_Cause" in row
+                and pd.notna(row["Root_Cause"])
+                and row["Root_Cause"] != "na"
+            ):
+                root_cause_tag = html.Span(
+                    f"Root Cause: {row['Root_Cause']}",
+                    className="dialog-tag tag-root-cause",
                 )
 
-            # Compile all tags, including the new Chat ID tag if available
+            # Compile all tags, including the new Chat ID and Root Cause tags if available
             tags = [sentiment_tag, resolution_tag, urgency_tag]
             if chat_id_tag:
                 tags.append(chat_id_tag)
+            if root_cause_tag:
+                tags.append(root_cause_tag)
 
             dialog_items.append(
                 html.Div(
@@ -1509,11 +2127,639 @@ def update_topic_details(hover_data, click_data, stored_data, file_contents):
         title,
         metadata_items,
         metrics_boxes,
+        root_causes_output,
+        root_causes_section_style,
         tags_output,
+        tags_section_style,
         sample_dialogs,
         {"display": "none"},
+        {"topic_name": topic_name, "file_contents": file_contents},
+    )
+
+
+# Callback to open modal when conversation icon is clicked
+@callback(
+    [
+        Output("conversation-modal", "style"),
+        Output("conversation-content", "children"),
+        Output("conversation-subheader", "children"),
+    ],
+    [Input({"type": "conversation-icon", "index": dash.dependencies.ALL}, "n_clicks")],
+    [State("upload-data", "contents")],
+    prevent_initial_call=True,
+)
+def open_conversation_modal(n_clicks_list, file_contents):
+    # Check if any icon was clicked
+    if not any(n_clicks_list) or not file_contents:
+        return {"display": "none"}, "", ""
+
+    # Get which icon was clicked
+    ctx = dash.callback_context
+    if not ctx.triggered:
+        return (
+            {"display": "none"},
+            "",
+            "",
+        )  # Extract the chat ID from the triggered input
+    triggered_id = ctx.triggered[0]["prop_id"]
+    chat_id = json.loads(triggered_id.split(".")[0])["index"]
+
+    # Get the full conversation from the uploaded file
+    content_type, content_string = file_contents.split(",")
+    decoded = base64.b64decode(content_string)
+
+    if (
+        content_type
+        == "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64"
+    ):
+        df_full = pd.read_excel(io.BytesIO(decoded), dtype={"Root_Cause": str})
+    else:  # Assume CSV
+        df_full = pd.read_csv(
+            io.StringIO(decoded.decode("utf-8")), dtype={"Root_Cause": str}
+        )
+
+    # Find the conversation with this chat ID
+    conversation_row = df_full[df_full["id"] == chat_id]
+    if len(conversation_row) == 0:
+        conversation_text = "Conversation not found."
+        subheader_content = f"Chat ID: {chat_id}"
+    else:
+        row = conversation_row.iloc[0]
+        conversation_text = row.get("conversation", "No conversation data available.")
+
+        # Get cluster name if available
+        cluster_name = row.get("deduplicated_topic_name", "Unknown cluster")
+
+        # Create subheader with both Chat ID and cluster name
+        subheader_content = html.Div(
+            [
+                html.Span(
+                    f"Chat ID: {chat_id}",
+                    style={"fontWeight": "600", "marginRight": "1rem"},
+                ),
+                html.Span(
+                    f"Cluster: {cluster_name}",
+                    style={"color": "hsl(215.4, 16.3%, 46.9%)"},
+                ),
+            ]
+        )
+
+    return {"display": "flex"}, conversation_text, subheader_content
+
+
+# Callback to close modal
+@callback(
+    Output("conversation-modal", "style", allow_duplicate=True),
+    [Input("close-modal-btn", "n_clicks")],
+    prevent_initial_call=True,
+)
+def close_conversation_modal(n_clicks):
+    if n_clicks:
+        return {"display": "none"}
+    return {"display": "none"}
+
+
+# Callback to open dialogs table modal when "Show all dialogs inside" button is clicked
+@callback(
+    [
+        Output("dialogs-table-modal", "style"),
+        Output("dialogs-modal-title", "children"),
+        Output("dialogs-table-content", "children"),
+    ],
+    [Input("show-all-dialogs-btn", "n_clicks")],
+    [State("selected-topic-store", "data")],
+    prevent_initial_call=True,
+)
+def open_dialogs_table_modal(n_clicks, selected_topic_data):
+    if not n_clicks or not selected_topic_data:
+        return {"display": "none"}, "", ""
+
+    topic_name = selected_topic_data["topic_name"]
+    file_contents = selected_topic_data["file_contents"]
+
+    # Get the full data
+    content_type, content_string = file_contents.split(",")
+    decoded = base64.b64decode(content_string)
+
+    if (
+        content_type
+        == "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64"
+    ):
+        df_full = pd.read_excel(io.BytesIO(decoded), dtype={"Root_Cause": str})
+    else:  # Assume CSV
+        df_full = pd.read_csv(
+            io.StringIO(decoded.decode("utf-8")), dtype={"Root_Cause": str}
+        )
+
+    # Filter to this topic
+    topic_conversations = df_full[df_full["deduplicated_topic_name"] == topic_name]
+
+    # Create the table
+    table_rows = []
+
+    # Header row
+    table_rows.append(
+        html.Tr(
+            [
+                html.Th("Chat ID"),
+                html.Th("Summary"),
+                html.Th("Root Cause"),
+                html.Th("Sentiment"),
+                html.Th("Resolution"),
+                html.Th("Urgency"),
+                html.Th("Tags"),
+                html.Th("Action"),
+            ]
+        )
+    )
+
+    # Data rows
+    for _, row in topic_conversations.iterrows():
+        # Process tags
+        tags_str = row.get("consolidated_tags", "")
+        if pd.notna(tags_str):
+            tags = [tag.strip() for tag in tags_str.split(",") if tag.strip()]
+            tags_display = html.Div(
+                [
+                    html.Span(
+                        tag,
+                        className="dialog-tag-small",
+                        style={"backgroundColor": "#6c757d", "color": "white"},
+                    )
+                    for tag in tags[:3]  # Show only first 3 tags
+                ]
+                + (
+                    [
+                        html.Span(
+                            f"+{len(tags) - 3}",
+                            className="dialog-tag-small",
+                            style={"backgroundColor": "#6c757d", "color": "white"},
+                        )
+                    ]
+                    if len(tags) > 3
+                    else []
+                ),
+                className="dialog-tags-cell",
+            )
+        else:
+            tags_display = html.Span(
+                "No tags",
+                style={"color": "var(--muted-foreground)", "fontStyle": "italic"},
+            )
+
+        table_rows.append(
+            html.Tr(
+                [
+                    html.Td(
+                        row["id"],
+                        style={"fontFamily": "monospace", "fontSize": "0.8rem"},
+                    ),
+                    html.Td(
+                        row.get("Summary", "No summary"),
+                        className="dialog-summary-cell",
+                    ),
+                    html.Td(
+                        html.Span(
+                            str(row.get("Root_Cause", "Unknown")).capitalize()
+                            if not pd.isna(row.get("Root_Cause"))
+                            else "Unknown",
+                            className="dialog-tag-small",
+                            style={
+                                "backgroundColor": "#8B4513",  # Brown color for root cause
+                                "color": "white",
+                            },
+                        )
+                    ),
+                    html.Td(
+                        html.Span(  # if sentiment is negative, color it red, otherwise grey
+                            row.get("Sentiment", "Unknown").capitalize(),
+                            className="dialog-tag-small",
+                            style={
+                                "backgroundColor": "#dc3545"
+                                if row.get("Sentiment") == "negative"
+                                else "#6c757d",
+                                "color": "white",
+                            },
+                        )
+                    ),
+                    html.Td(
+                        html.Span(  # if resolution is unresolved, color it red, otherwise grey
+                            row.get("Resolution", "Unknown").capitalize(),
+                            className="dialog-tag-small",
+                            style={
+                                "backgroundColor": "#dc3545"
+                                if row.get("Resolution") == "unresolved"
+                                else "#6c757d",
+                                "color": "white",
+                            },
+                        )
+                    ),
+                    html.Td(
+                        html.Span(  # if urgency is urgent, color it red, otherwise grey
+                            row.get("Urgency", "Unknown").capitalize(),
+                            className="dialog-tag-small",
+                            style={
+                                "backgroundColor": "#dc3545"
+                                if row.get("Urgency") == "urgent"
+                                else "#6c757d",
+                                "color": "white",
+                            },
+                        )
+                    ),
+                    html.Td(tags_display),
+                    html.Td(
+                        html.Button(
+                            [
+                                html.I(
+                                    className="fas fa-eye",
+                                    style={"marginRight": "0.25rem"},
+                                ),
+                                "View chat session",
+                            ],
+                            id={"type": "open-chat-btn", "index": row["id"]},
+                            className="open-chat-btn",
+                            n_clicks=0,
+                        )
+                    ),
+                ]
+            )
+        )
+
+    table = html.Table(table_rows, className="dialogs-table")
+
+    modal_title = (
+        f"All dialogs in Topic: {topic_name} ({len(topic_conversations)} dialogs)"
     )
 
+    return {"display": "flex"}, modal_title, table
+
+
+# Callback to close dialogs table modal
+@callback(
+    Output("dialogs-table-modal", "style", allow_duplicate=True),
+    [Input("close-dialogs-modal-btn", "n_clicks")],
+    prevent_initial_call=True,
+)
+def close_dialogs_table_modal(n_clicks):
+    if n_clicks:
+        return {"display": "none"}
+    return {"display": "none"}
+
+
+# Callback to open conversation modal from dialogs table
+@callback(
+    [
+        Output("conversation-modal", "style", allow_duplicate=True),
+        Output("conversation-content", "children", allow_duplicate=True),
+        Output("conversation-subheader", "children", allow_duplicate=True),
+    ],
+    [Input({"type": "open-chat-btn", "index": dash.dependencies.ALL}, "n_clicks")],
+    [State("upload-data", "contents")],
+    prevent_initial_call=True,
+)
+def open_conversation_from_table(n_clicks_list, file_contents):
+    # Check if any button was clicked
+    if not any(n_clicks_list) or not file_contents:
+        return {"display": "none"}, "", ""
+
+    # Get which button was clicked
+    ctx = dash.callback_context
+    if not ctx.triggered:
+        return {"display": "none"}, "", ""
+
+    # Extract the chat ID from the triggered input
+    triggered_id = ctx.triggered[0]["prop_id"]
+    chat_id = json.loads(triggered_id.split(".")[0])["index"]
+
+    # Debug: print the chat_id to understand its type and value
+    print(f"DEBUG: Looking for chat_id: {chat_id} (type: {type(chat_id)})")
+
+    # Get the full conversation from the uploaded file
+    content_type, content_string = file_contents.split(",")
+    decoded = base64.b64decode(content_string)
+
+    if (
+        content_type
+        == "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64"
+    ):
+        df_full = pd.read_excel(io.BytesIO(decoded), dtype={"Root_Cause": str})
+    else:  # Assume CSV
+        df_full = pd.read_csv(
+            io.StringIO(decoded.decode("utf-8")), dtype={"Root_Cause": str}
+        )
+
+    # Debug: print some info about the dataframe
+    print(f"DEBUG: DataFrame shape: {df_full.shape}")
+    print(f"DEBUG: Available chat IDs (first 5): {df_full['id'].head().tolist()}")
+    print(f"DEBUG: Chat ID types in df: {df_full['id'].dtype}")
+
+    # Try to match with different data type conversions
+    conversation_row = df_full[df_full["id"] == chat_id]
+
+    # If not found, try converting types
+    if len(conversation_row) == 0:
+        # Try converting chat_id to string
+        conversation_row = df_full[df_full["id"].astype(str) == str(chat_id)]
+
+    # If still not found, try converting df id to int
+    if len(conversation_row) == 0:
+        try:
+            conversation_row = df_full[df_full["id"] == int(chat_id)]
+        except (ValueError, TypeError):
+            pass
+
+    if len(conversation_row) == 0:
+        conversation_text = f"Conversation not found for Chat ID: {chat_id}. Available IDs: {df_full['id'].head(10).tolist()}"
+        subheader_content = f"Chat ID: {chat_id} (Not Found)"
+    else:
+        conversation_row = conversation_row.iloc[0]
+        conversation_text = conversation_row.get(
+            "conversation",
+            "No conversation available, oopsie.",  # fix here the conversation status
+        )
+
+        # Create subheader with metadata
+        subheader_content = f"Chat ID: {chat_id} | Topic: {conversation_row.get('deduplicated_topic_name', 'Unknown')} | Sentiment: {conversation_row.get('Sentiment', 'Unknown')} | Resolution: {conversation_row.get('Resolution', 'Unknown')}"
+
+    return {"display": "flex"}, conversation_text, subheader_content
+
+
+# Callback to open root cause modal when root cause icon is clicked
+@callback(
+    [
+        Output("root-cause-modal", "style"),
+        Output("root-cause-modal-title", "children"),
+        Output("root-cause-table-content", "children"),
+    ],
+    [Input({"type": "root-cause-icon", "index": dash.dependencies.ALL}, "n_clicks")],
+    [State("selected-topic-store", "data")],
+    prevent_initial_call=True,
+)
+def open_root_cause_modal(n_clicks_list, selected_topic_data):
+    # Check if any icon was clicked
+    if not any(n_clicks_list) or not selected_topic_data:
+        return {"display": "none"}, "", ""
+
+    # Get which icon was clicked
+    ctx = dash.callback_context
+    if not ctx.triggered:
+        return {"display": "none"}, "", ""
+
+    triggered_id = ctx.triggered[0]["prop_id"]
+    root_cause = json.loads(triggered_id.split(".")[0])["index"]
+
+    topic_name = selected_topic_data["topic_name"]
+    file_contents = selected_topic_data["file_contents"]
+
+    # Get the full data
+    content_type, content_string = file_contents.split(",")
+    decoded = base64.b64decode(content_string)
+
+    if (
+        content_type
+        == "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64"
+    ):
+        df_full = pd.read_excel(io.BytesIO(decoded), dtype={"Root_Cause": str})
+    else:  # Assume CSV
+        df_full = pd.read_csv(
+            io.StringIO(decoded.decode("utf-8")), dtype={"Root_Cause": str}
+        )
+
+    # Filter to this topic and root cause
+    filtered_conversations = df_full[
+        (df_full["deduplicated_topic_name"] == topic_name)
+        & (df_full["root_cause_subcluster"] == root_cause)
+    ]
+
+    # Create the table
+    table_rows = []
+
+    # Header row
+    table_rows.append(
+        html.Tr(
+            [
+                html.Th("Chat ID"),
+                html.Th("Summary"),
+                html.Th("Sentiment"),
+                html.Th("Resolution"),
+                html.Th("Urgency"),
+                html.Th("Tags"),
+                html.Th("Action"),
+            ]
+        )
+    )
+
+    # Data rows
+    for _, row in filtered_conversations.iterrows():
+        # Process tags
+        tags_str = row.get("consolidated_tags", "")
+        if pd.notna(tags_str):
+            tags = [tag.strip() for tag in tags_str.split(",") if tag.strip()]
+            tags_display = html.Div(
+                [
+                    html.Span(
+                        tag,
+                        className="dialog-tag-small",
+                        style={"backgroundColor": "#6c757d", "color": "white"},
+                    )
+                    for tag in tags[:3]  # Show only first 3 tags
+                ]
+                + (
+                    [
+                        html.Span(
+                            f"+{len(tags) - 3}",
+                            className="dialog-tag-small",
+                            style={"backgroundColor": "#6c757d", "color": "white"},
+                        )
+                    ]
+                    if len(tags) > 3
+                    else []
+                ),
+                className="dialog-tags-cell",
+            )
+        else:
+            tags_display = html.Span(
+                "No tags",
+                style={"color": "var(--muted-foreground)", "fontStyle": "italic"},
+            )
+
+        table_rows.append(
+            html.Tr(
+                [
+                    html.Td(
+                        row["id"],
+                        style={"fontFamily": "monospace", "fontSize": "0.8rem"},
+                    ),
+                    html.Td(
+                        row.get("Summary", "No summary"),
+                        className="dialog-summary-cell",
+                    ),
+                    html.Td(
+                        html.Span(
+                            row.get("Sentiment", "Unknown").capitalize(),
+                            className="dialog-tag-small",
+                            style={
+                                "backgroundColor": "#dc3545"
+                                if row.get("Sentiment") == "negative"
+                                else "#6c757d",
+                                "color": "white",
+                            },
+                        )
+                    ),
+                    html.Td(
+                        html.Span(
+                            row.get("Resolution", "Unknown").capitalize(),
+                            className="dialog-tag-small",
+                            style={
+                                "backgroundColor": "#dc3545"
+                                if row.get("Resolution") == "unresolved"
+                                else "#6c757d",
+                                "color": "white",
+                            },
+                        )
+                    ),
+                    html.Td(
+                        html.Span(
+                            row.get("Urgency", "Unknown").capitalize(),
+                            className="dialog-tag-small",
+                            style={
+                                "backgroundColor": "#dc3545"
+                                if row.get("Urgency") == "urgent"
+                                else "#6c757d",
+                                "color": "white",
+                            },
+                        )
+                    ),
+                    html.Td(tags_display),
+                    html.Td(
+                        html.Button(
+                            [
+                                html.I(
+                                    className="fas fa-eye",
+                                    style={"marginRight": "0.25rem"},
+                                ),
+                                "View chat",
+                            ],
+                            id={"type": "open-chat-btn-rc", "index": row["id"]},
+                            className="open-chat-btn",
+                            n_clicks=0,
+                        )
+                    ),
+                ]
+            )
+        )
+
+    table = html.Table(table_rows, className="dialogs-table")
+
+    modal_title = f"Dialogs with Root Cause: {root_cause} (Topic: {topic_name})"
+    count_info = html.P(
+        f"Found {len(filtered_conversations)} dialogs with this root cause",
+        style={
+            "margin": "0 0 1rem 0",
+            "color": "var(--muted-foreground)",
+            "fontSize": "0.875rem",
+        },
+    )
+
+    content = html.Div([count_info, table])
+
+    return {"display": "flex"}, modal_title, content
+
+
+# Callback to close root cause modal
+@callback(
+    Output("root-cause-modal", "style", allow_duplicate=True),
+    [Input("close-root-cause-modal-btn", "n_clicks")],
+    prevent_initial_call=True,
+)
+def close_root_cause_modal(n_clicks):
+    if n_clicks:
+        return {"display": "none"}
+    return {"display": "none"}
+
+
+# Callback to open conversation modal from root cause table
+@callback(
+    [
+        Output("conversation-modal", "style", allow_duplicate=True),
+        Output("conversation-content", "children", allow_duplicate=True),
+        Output("conversation-subheader", "children", allow_duplicate=True),
+    ],
+    [Input({"type": "open-chat-btn-rc", "index": dash.dependencies.ALL}, "n_clicks")],
+    [State("upload-data", "contents")],
+    prevent_initial_call=True,
+)
+def open_conversation_from_root_cause_table(n_clicks_list, file_contents):
+    # Check if any button was clicked
+    if not any(n_clicks_list) or not file_contents:
+        return {"display": "none"}, "", ""
+
+    # Get which button was clicked
+    ctx = dash.callback_context
+    if not ctx.triggered:
+        return {"display": "none"}, "", ""
+
+    triggered_id = ctx.triggered[0]["prop_id"]
+    chat_id = json.loads(triggered_id.split(".")[0])["index"]
+
+    # Get the full conversation from the uploaded file
+    content_type, content_string = file_contents.split(",")
+    decoded = base64.b64decode(content_string)
+
+    if (
+        content_type
+        == "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64"
+    ):
+        df_full = pd.read_excel(io.BytesIO(decoded), dtype={"Root_Cause": str})
+    else:  # Assume CSV
+        df_full = pd.read_csv(
+            io.StringIO(decoded.decode("utf-8")), dtype={"Root_Cause": str}
+        )
+
+    # Find the conversation with this chat ID
+    conversation_row = df_full[df_full["id"] == chat_id]
+
+    # If not found, try converting types
+    if len(conversation_row) == 0:
+        conversation_row = df_full[df_full["id"].astype(str) == str(chat_id)]
+
+    if len(conversation_row) == 0:
+        try:
+            conversation_row = df_full[df_full["id"] == int(chat_id)]
+        except (ValueError, TypeError):
+            pass
+
+    if len(conversation_row) == 0:
+        conversation_text = f"Conversation not found for Chat ID: {chat_id}"
+        subheader_content = f"Chat ID: {chat_id} (Not Found)"
+    else:
+        row = conversation_row.iloc[0]
+        conversation_text = row.get("conversation", "No conversation data available.")
+
+        # Get additional metadata
+        root_cause = row.get("root_cause_subcluster", "Unknown")
+        cluster_name = row.get("deduplicated_topic_name", "Unknown cluster")
+
+        # Create subheader with metadata including root cause
+        subheader_content = html.Div(
+            [
+                html.Span(
+                    f"Chat ID: {chat_id}",
+                    style={"fontWeight": "600", "marginRight": "1rem"},
+                ),
+                html.Span(
+                    f"Cluster: {cluster_name}",
+                    style={"color": "hsl(215.4, 16.3%, 46.9%)", "marginRight": "1rem"},
+                ),
+                html.Span(
+                    f"Root Cause: {root_cause}",
+                    style={"color": "#8b6f47", "fontWeight": "500"},
+                ),
+            ]
+        )
+
+    return {"display": "flex"}, conversation_text, subheader_content
+
 
 if __name__ == "__main__":
-    app.run_server(debug=False)
+    app.run(debug=False)