From 3b6e1586b70697075e2e9d1262b08579773c0f45 Mon Sep 17 00:00:00 2001
From: hailin <hailin.zhao@gdzx.xyz>
Date: Sun, 8 Feb 2026 21:03:22 -0800
Subject: [PATCH] fix(admin): add Markdown rendering to assessment & collection
 chat drawers

Both directive chat drawers were rendering AI responses as plain text.
Apply the same ReactMarkdown + remark-gfm treatment used in supervisor.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../presentation/components/DirectiveChatDrawer.tsx  | 12 +++++++++++-
 .../presentation/components/CollectionChatDrawer.tsx | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/admin-client/src/features/assessment-config/presentation/components/DirectiveChatDrawer.tsx b/packages/admin-client/src/features/assessment-config/presentation/components/DirectiveChatDrawer.tsx
index b5d4dba..9ea1e93 100644
--- a/packages/admin-client/src/features/assessment-config/presentation/components/DirectiveChatDrawer.tsx
+++ b/packages/admin-client/src/features/assessment-config/presentation/components/DirectiveChatDrawer.tsx
@@ -1,6 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
 import { Drawer, Button, Input, Tag, Spin } from 'antd';
 import { RobotOutlined, SendOutlined } from '@ant-design/icons';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { useDirectiveChat } from '../../application/useAssessmentConfig';
 import type { ChatMessage } from '../../infrastructure/assessment-config.api';
 
@@ -94,7 +96,15 @@ export function DirectiveChatDrawer({ open, onClose }: DirectiveChatDrawerProps)
             >
               {msg.role === 'user' ? '管理员' : 'AI 助手'}
             </Tag>
-            <div className="whitespace-pre-wrap">{msg.content}</div>
+            {msg.role === 'assistant' ? (
+              <div className="supervisor-markdown">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {msg.content}
+                </ReactMarkdown>
+              </div>
+            ) : (
+              <div className="whitespace-pre-wrap">{msg.content}</div>
+            )}
           </div>
         ))}
 
diff --git a/packages/admin-client/src/features/collection-config/presentation/components/CollectionChatDrawer.tsx b/packages/admin-client/src/features/collection-config/presentation/components/CollectionChatDrawer.tsx
index 47d29b7..b367840 100644
--- a/packages/admin-client/src/features/collection-config/presentation/components/CollectionChatDrawer.tsx
+++ b/packages/admin-client/src/features/collection-config/presentation/components/CollectionChatDrawer.tsx
@@ -1,6 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
 import { Drawer, Button, Input, Tag, Spin } from 'antd';
 import { RobotOutlined, SendOutlined } from '@ant-design/icons';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { useDirectiveChat } from '../../application/useCollectionConfig';
 import type { ChatMessage } from '../../infrastructure/collection-config.api';
 
@@ -94,7 +96,15 @@ export function CollectionChatDrawer({ open, onClose }: CollectionChatDrawerProp
             >
               {msg.role === 'user' ? '管理员' : 'AI 助手'}
             </Tag>
-            <div className="whitespace-pre-wrap">{msg.content}</div>
+            {msg.role === 'assistant' ? (
+              <div className="supervisor-markdown">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {msg.content}
+                </ReactMarkdown>
+              </div>
+            ) : (
+              <div className="whitespace-pre-wrap">{msg.content}</div>
+            )}
           </div>
         ))}