feat: add session message monitoring tab to bot detail dialog (#2005)

* feat: add session message monitoring tab to bot detail dialog

Add a new "Sessions" tab in the bot detail dialog that displays
sent & received messages grouped by sessions. Users can select
any session to view its messages in a chat-bubble style layout.

Backend changes:
- Add sessionId filter to monitoring messages endpoint
- Add role column to MonitoringMessage (user/assistant)
- Record bot responses in monitoring via record_query_response()
- Add DB migration (dbm019) for the new role column

Frontend changes:
- New BotSessionMonitor component with session list + message viewer
- Add Sessions sidebar tab to BotDetailDialog
- Add getBotSessions/getSessionMessages API methods to BackendClient
- Add i18n translations (en-US, zh-Hans, zh-Hant, ja-JP)

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

* refactor: remove outdated version comment from PipelineManager class

* fix: bump required_database_version to 19 to trigger monitoring_messages.role migration

* fix: prevent session message auto-scroll from pushing dialog content out of view

Replace scrollIntoView (which scrolls all ancestor containers) with
direct scrollTop manipulation on the ScrollArea viewport. This keeps
the scroll contained within the messages panel only.

* ui: redesign BotSessionMonitor with polished chat UI

- Wider session list (w-72) with avatar circles and cleaner layout
- Richer chat header with avatar, platform info, and active indicator
- User messages now use blue-500 (solid) instead of blue-100 for
  clear visual distinction
- Metadata (time, runner) shown on hover below bubbles, not inside
- Proper empty state illustrations for both panels
- Better spacing, rounded corners, and shadow treatment
- Consistent dark mode styling

* fix: infinite re-render loop in DynamicFormComponent

The useEffect depended on onSubmit which was a new closure every
parent render. Calling onSubmit inside the effect triggered parent
state update → re-render → new onSubmit ref → effect re-runs → loop.

Fix: use useRef to hold a stable reference to onSubmit, removing it
from the useEffect dependency array.

Also add DialogDescription to BotDetailDialog to suppress Radix
aria-describedby warning.

* fix: remove .html suffix from docs.langbot.app links (Mintlify migration)

* style: fix prettier and ruff formatting

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Happy <yesreply@happy.engineering>

src/langbot/pkg/api/http/controller/groups/monitoring.py

@@ -52,6 +52,7 @@ class MonitoringRouterGroup(group.RouterGroup):
             # Parse query parameters
             bot_ids = quart.request.args.getlist('botId')
             pipeline_ids = quart.request.args.getlist('pipelineId')
+            session_ids = quart.request.args.getlist('sessionId')
             start_time_str = quart.request.args.get('startTime')
             end_time_str = quart.request.args.get('endTime')
             limit = int(quart.request.args.get('limit', 100))
@@ -64,6 +65,7 @@ class MonitoringRouterGroup(group.RouterGroup):
             messages, total = await self.ap.monitoring_service.get_messages(
                 bot_ids=bot_ids if bot_ids else None,
                 pipeline_ids=pipeline_ids if pipeline_ids else None,
+                session_ids=session_ids if session_ids else None,
                 start_time=start_time,
                 end_time=end_time,
                 limit=limit,

src/langbot/pkg/api/http/service/monitoring.py

@@ -32,6 +32,7 @@ class MonitoringService:
         user_id: str | None = None,
         runner_name: str | None = None,
         variables: str | None = None,
+        role: str = 'user',
     ) -> str:
         """Record a message"""
         message_id = str(uuid.uuid4())
@@ -50,6 +51,7 @@ class MonitoringService:
             'user_id': user_id,
             'runner_name': runner_name,
             'variables': variables,
+            'role': role,
         }
 
         await self.ap.persistence_mgr.execute_async(
@@ -355,6 +357,7 @@ class MonitoringService:
         self,
         bot_ids: list[str] | None = None,
         pipeline_ids: list[str] | None = None,
+        session_ids: list[str] | None = None,
         start_time: datetime.datetime | None = None,
         end_time: datetime.datetime | None = None,
         limit: int = 100,
@@ -367,6 +370,8 @@ class MonitoringService:
             conditions.append(persistence_monitoring.MonitoringMessage.bot_id.in_(bot_ids))
         if pipeline_ids:
             conditions.append(persistence_monitoring.MonitoringMessage.pipeline_id.in_(pipeline_ids))
+        if session_ids:
+            conditions.append(persistence_monitoring.MonitoringMessage.session_id.in_(session_ids))
         if start_time:
             conditions.append(persistence_monitoring.MonitoringMessage.timestamp >= start_time)
         if end_time:

src/langbot/pkg/entity/persistence/monitoring.py

@@ -22,6 +22,7 @@ class MonitoringMessage(Base):
     user_id = sqlalchemy.Column(sqlalchemy.String(255), nullable=True)
     runner_name = sqlalchemy.Column(sqlalchemy.String(255), nullable=True)  # Runner name for this query
     variables = sqlalchemy.Column(sqlalchemy.Text, nullable=True)  # Query variables as JSON string
+    role = sqlalchemy.Column(sqlalchemy.String(50), nullable=True, default='user')  # user, assistant
 
 
 class MonitoringLLMCall(Base):

src/langbot/pkg/persistence/migrations/dbm019_monitoring_message_role.py

@@ -0,0 +1,24 @@
+import sqlalchemy
+from .. import migration
+
+
+@migration.migration_class(19)
+class DBMigrateMonitoringMessageRole(migration.DBMigration):
+    """Add role column to monitoring_messages table"""
+
+    async def upgrade(self):
+        """Upgrade"""
+        try:
+            sql_text = sqlalchemy.text("ALTER TABLE monitoring_messages ADD COLUMN role VARCHAR(50) DEFAULT 'user'")
+            await self.ap.persistence_mgr.execute_async(sql_text)
+        except Exception:
+            # Column may already exist
+            pass
+
+    async def downgrade(self):
+        """Downgrade"""
+        try:
+            sql_text = sqlalchemy.text('ALTER TABLE monitoring_messages DROP COLUMN role')
+            await self.ap.persistence_mgr.execute_async(sql_text)
+        except Exception:
+            pass

src/langbot/pkg/pipeline/monitoring_helper.py

@@ -114,6 +114,60 @@ class MonitoringHelper:
         except Exception as e:
             ap.logger.error(f'Failed to record query success: {e}')
 
+    @staticmethod
+    async def record_query_response(
+        ap: app.Application,
+        query: pipeline_query.Query,
+        bot_id: str,
+        bot_name: str,
+        pipeline_id: str,
+        pipeline_name: str,
+        runner_name: str | None = None,
+    ):
+        """Record bot response message to monitoring"""
+        try:
+            session_id = f'{query.launcher_type}_{query.launcher_id}'
+
+            # Extract response content from resp_message_chain
+            if hasattr(query, 'resp_message_chain') and query.resp_message_chain:
+                # Serialize the last response message chain
+                last_resp = query.resp_message_chain[-1]
+                if hasattr(last_resp, 'model_dump'):
+                    message_content = json.dumps(last_resp.model_dump(), ensure_ascii=False)
+                else:
+                    message_content = str(last_resp)
+            elif hasattr(query, 'resp_messages') and query.resp_messages:
+                last_resp = query.resp_messages[-1]
+                if hasattr(last_resp, 'get_content_platform_message_chain'):
+                    chain = last_resp.get_content_platform_message_chain()
+                    if hasattr(chain, 'model_dump'):
+                        message_content = json.dumps(chain.model_dump(), ensure_ascii=False)
+                    else:
+                        message_content = str(chain)
+                else:
+                    message_content = str(last_resp)
+            else:
+                return  # No response to record
+
+            await ap.monitoring_service.record_message(
+                bot_id=bot_id,
+                bot_name=bot_name,
+                pipeline_id=pipeline_id,
+                pipeline_name=pipeline_name,
+                message_content=message_content,
+                session_id=session_id,
+                status='success',
+                level='info',
+                platform=query.launcher_type.value
+                if hasattr(query.launcher_type, 'value')
+                else str(query.launcher_type),
+                user_id=query.sender_id,
+                runner_name=runner_name,
+                role='assistant',
+            )
+        except Exception as e:
+            ap.logger.error(f'Failed to record query response: {e}')
+
     @staticmethod
     async def record_query_error(
         ap: app.Application,

src/langbot/pkg/pipeline/pipelinemgr.py

@@ -339,6 +339,20 @@ class RuntimePipeline:
                 except Exception as e:
                     self.ap.logger.error(f'Failed to record query success: {e}')
 
+                # Record bot response message
+                try:
+                    await monitoring_helper.MonitoringHelper.record_query_response(
+                        ap=self.ap,
+                        query=query,
+                        bot_id=query.bot_uuid or 'unknown',
+                        bot_name=bot_name,
+                        pipeline_id=self.pipeline_entity.uuid,
+                        pipeline_name=pipeline_name,
+                        runner_name=runner_name,
+                    )
+                except Exception as e:
+                    self.ap.logger.error(f'Failed to record query response: {e}')
+
         except Exception as e:
             inst_name = query.current_stage_name if query.current_stage_name else 'unknown'
             self.ap.logger.error(f'Error processing query {query.query_id} stage={inst_name} : {e}')
@@ -369,8 +383,6 @@ class RuntimePipeline:
 class PipelineManager:
     """流水线管理器"""
 
-    # ====== 4.0 ======
-
     ap: app.Application
 
     pipelines: list[RuntimePipeline]

src/langbot/pkg/utils/constants.py

@@ -2,7 +2,7 @@ import langbot
 
 semantic_version = f'v{langbot.__version__}'
 
-required_database_version = 18
+required_database_version = 19
 """Tag the version of the database schema, used to check if the database needs to be migrated"""
 
 debug_mode = False