页面调整优化

hongjli

2025-06-16 e435f2ebd11633c555a8b49fc54d3c7a4e0ff0ba

页面调整优化

 src/app/ai-scene/chat/page.tsx

@@ -252,7 +252,7 @@
提供成本相关数据，获取成本优化建议和财务影响评估。

系统将基于实时数据和AI算法，为您提供专业的分析报告和决策建议。`,
    dataDescription: '本场景整合了OMS、ERP、WMS等多个系统的实时数据，通过AI算法进行深度分析。以下为新能源行业的模拟数据，实际应用中将自动对接企业现有系统。',
    dataDescription: '本场景整合了OMS、WMS等多个系统的实时数据，通过AI算法进行深度分析。以下为新能源行业的模拟数据，实际应用中将自动对接企业现有系统。',
    exampleData: `
### 订单需求数据 (OMS系统)

@@ -262,15 +262,6 @@
| SO20250201002 | NEV-Motor-B | 200 | 蔚来汽车 | 2025-02-20 | 中 | 1,800,000 |
| SO20250201003 | NEV-Controller-C | 300 | 理想汽车 | 2025-02-25 | 高 | 3,200,000 |
| SO20250201004 | NEV-Charger-D | 150 | 小鹏汽车 | 2025-03-01 | 中 | 1,200,000 |

### 生产工单数据 (ERP系统)

| 工单号 | 产品型号 | 计划数量 | 已完成数量 | 生产状态 | 预计完成时间 | 生产线 |
| :--: | :--: | :--: | :--: | :--: | :--: | :--: |
| WO20250201001 | NEV-Battery-A | 600 | 350 | 进行中 | 2025-02-12 | 产线1 |
| WO20250201002 | NEV-Motor-B | 250 | 180 | 进行中 | 2025-02-18 | 产线2 |
| WO20250201003 | NEV-Controller-C | 200 | 50 | 计划中 | 2025-02-22 | 产线3 |
| WO20250201004 | NEV-Charger-D | 100 | 0 | 待排产 | 2025-02-28 | 产线4 |

### 库存数据 (WMS系统)

@@ -289,15 +280,6 @@
| 汇川技术 | 电机定子 | 88% | 98.2% | 中 | 中 |
| 地平线 | 控制芯片 | 92% | 99.8% | 中 | 低 |
| 特来电 | 充电模块 | 85% | 97.5% | 高 | 中 |

### 产能数据

| 生产线 | 日产能 | 当前利用率 | 瓶颈工序 | 可调配产能 | 维护计划 |
| :--: | :--: | :--: | :--: | :--: | :--: |
| 产线1 | 50台 | 85% | 组装 | 10台 | 2025-02-20 |
| 产线2 | 30台 | 75% | 测试 | 8台 | 2025-02-25 |
| 产线3 | 40台 | 60% | 焊接 | 15台 | 2025-03-01 |
| 产线4 | 25台 | 45% | 包装 | 12台 | 2025-03-05 |
`
  },
];

 src/app/supply-chain-chat/page.tsx

@@ -83,7 +83,7 @@
提供成本相关数据，获取成本优化建议和财务影响评估。

系统将基于实时数据和AI算法，为您提供专业的分析报告和决策建议。`,
  dataDescription: '本场景整合了OMS、ERP、WMS等多个系统的实时数据，通过AI算法进行深度分析。以下为新能源行业的模拟数据，实际应用中将自动对接企业现有系统。',
  dataDescription: '本场景整合了OMS、WMS等多个系统的实时数据，通过AI算法进行深度分析。以下为新能源行业的模拟数据，实际应用中将自动对接企业现有系统。',
  exampleData: `
### 订单需求数据 (OMS系统)

@@ -93,15 +93,6 @@
| SO20250201002 | NEV-Motor-B | 200 | 蔚来汽车 | 2025-02-20 | 中 | 1,800,000 |
| SO20250201003 | NEV-Controller-C | 300 | 理想汽车 | 2025-02-25 | 高 | 3,200,000 |
| SO20250201004 | NEV-Charger-D | 150 | 小鹏汽车 | 2025-03-01 | 中 | 1,200,000 |

### 生产工单数据 (ERP系统)

| 工单号 | 产品型号 | 计划数量 | 已完成数量 | 生产状态 | 预计完成时间 | 生产线 |
| :--: | :--: | :--: | :--: | :--: | :--: | :--: |
| WO20250201001 | NEV-Battery-A | 600 | 350 | 进行中 | 2025-02-12 | 产线1 |
| WO20250201002 | NEV-Motor-B | 250 | 180 | 进行中 | 2025-02-18 | 产线2 |
| WO20250201003 | NEV-Controller-C | 200 | 50 | 计划中 | 2025-02-22 | 产线3 |
| WO20250201004 | NEV-Charger-D | 100 | 0 | 待排产 | 2025-02-28 | 产线4 |

### 库存数据 (WMS系统)

@@ -121,14 +112,23 @@
| 地平线 | 控制芯片 | 92% | 99.8% | 中 | 低 |
| 特来电 | 充电模块 | 85% | 97.5% | 高 | 中 |

### 产能数据
### 生产计划数据

| 生产线 | 日产能 | 当前利用率 | 瓶颈工序 | 可调配产能 | 维护计划 |
| 计划单ID | 计划单号 | 料号 | 计划数量 | 计划开始日期 | 计划结束日期 |
| :--: | :--: | :--: | :--: | :--: | :--: |
| 产线1 | 50台 | 85% | 组装 | 10台 | 2025-02-20 |
| 产线2 | 30台 | 75% | 测试 | 8台 | 2025-02-25 |
| 产线3 | 40台 | 60% | 焊接 | 15台 | 2025-03-01 |
| 产线4 | 25台 | 45% | 包装 | 12台 | 2025-03-05 |
| PP001 | PLAN20250201001 | TX-001 | 1000.00 | 2025-02-01 | 2025-02-15 |
| PP002 | PLAN20250201002 | TX-002 | 500.00 | 2025-02-05 | 2025-02-20 |
| PP003 | PLAN20250201003 | TX-003 | 750.00 | 2025-02-10 | 2025-02-25 |
| PP004 | PLAN20250201004 | TX-004 | 300.00 | 2025-02-15 | 2025-03-01 |

### 物料主数据

| 工厂代码 | 料号 | 物料描述 | 物料状态 | 物料模型 | 专业归属图号 | 版本 | 默认生产车间 | 是否关键物料 | 是否自制 | 集成日期 | 生效日期 | 失效日期 |
| :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: |
| PLANT001 | TX-001 | 变速箱壳体 | Active | 标准件 | 机械 | v1.0 | 车间A | 1 | 1 | 2025-01-01 00:00:00 | 2025-01-01 | 2025-12-31 |
| PLANT001 | TX-002 | 电机定子 | Active | 定制件 | 电气 | v2.0 | 车间B | 1 | 0 | 2025-01-02 00:00:00 | 2025-01-02 | 2025-12-31 |
| PLANT002 | TX-003 | 控制芯片 | Active | 标准件 | 电子 | v1.5 | 车间C | 0 | 0 | 2025-01-03 00:00:00 | 2025-01-03 | 2025-12-31 |
| PLANT002 | TX-004 | 充电模块 | Active | 定制件 | 电气 | v2.5 | 车间D | 1 | 1 | 2025-01-04 00:00:00 | 2025-01-04 | 2025-12-31 |
`
};

@@ -1156,7 +1156,7 @@
                <div className="flex flex-col items-center justify-center h-[400px] text-center">
                  <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2-2V7a2 2 0 012-2h2a2 2 0 002-2V3a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 002 2h2a2 2 0 012 2v2a2 2 0 00-2 2h-2a2 2 0 00-2 2v6a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2-2V7a2 2 0 012-2h2a2 2 0 002-2h2a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 002 2h2a2 2 0 012 2v2a2 2 0 00-2 2h-2a2 2 0 00-2 2v6a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                  </div>
                  <h3 className="text-lg font-medium text-gray-900 mb-2">供应链全景洞察</h3>

 src/components/DataPreviewDialog.tsx

@@ -62,7 +62,7 @@
            <div className="flex items-center gap-3 mb-3">
              <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2M7 7h10" />
                </svg>
              </div>
              <h4 className="text-lg font-semibold text-blue-900">工位信息</h4>
@@ -79,10 +79,10 @@
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
              </div>
              <h4 className="text-lg font-semibold text-blue-900">产线现场库存量</h4>
              <h4 className="text-lg font-semibold text-blue-900">生产计划数据 (production_plan)</h4>
            </div>
            <div className="ml-11">
              <p className="text-blue-800">核心来源系统：MES、WMS（线边仓）</p>
              <p className="text-blue-800">核心来源系统：SAP（企业管理系统）</p>
            </div>
          </div>

@@ -99,24 +99,6 @@
              <p className="text-blue-800">核心来源系统：ERP、WMS</p>
            </div>
          </div>
        </div>
      );
    } else if (sceneType === 'panorama') {
      return (
        <div className="space-y-6">
          <div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
            <div className="flex items-center gap-3 mb-3">
              <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                </svg>
              </div>
              <h4 className="text-lg font-semibold text-blue-900">订单需求数据</h4>
            </div>
            <div className="ml-11">
              <p className="text-blue-800">核心来源系统：OMS（订单管理系统）</p>
            </div>
          </div>

          <div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
            <div className="flex items-center gap-3 mb-3">
@@ -125,52 +107,106 @@
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7C5 4 4 5 4 7z" />
                </svg>
              </div>
              <h4 className="text-lg font-semibold text-blue-900">生产工单数据</h4>
              <h4 className="text-lg font-semibold text-blue-900">物料主数据</h4>
            </div>
            <div className="ml-11">
              <p className="text-blue-800">核心来源系统：ERP（企业资源计划）</p>
              <p className="text-blue-800">核心来源系统：SAP（企业管理系统）</p>
            </div>
          </div>

          <div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
            <div className="flex items-center gap-3 mb-3">
              <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                </svg>
        </div>
      );
    } else if (sceneType === 'panorama') {
      return (
        <div className="flex flex-col h-full">
          {/* 卡片说明区块，顶部固定 */}
          <div className="space-y-4 flex-shrink-0">
            {/* 订单需求数据 */}
            <div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
              <div className="flex items-center gap-3 mb-2">
                <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                  </svg>
                </div>
                <h4 className="text-lg font-semibold text-blue-900">订单需求数据</h4>
              </div>
              <h4 className="text-lg font-semibold text-blue-900">库存数据</h4>
              <div className="ml-11">
                <p className="text-blue-800">核心来源系统：OMS（订单管理系统）</p>
              </div>
            </div>
            <div className="ml-11">
              <p className="text-blue-800">核心来源系统：WMS（仓储管理系统）</p>
            {/* 库存数据 */}
            <div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
              <div className="flex items-center gap-3 mb-2">
                <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7C5 4 4 5 4 7z" />
                  </svg>
                </div>
                <h4 className="text-lg font-semibold text-blue-900">库存数据</h4>
              </div>
              <div className="ml-11">
                <p className="text-blue-800">核心来源系统：WMS（仓储管理系统）</p>
              </div>
            </div>
            {/* 生产计划数据 */}
            <div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
              <div className="flex items-center gap-3 mb-2">
                <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                  </svg>
                </div>
                <h4 className="text-lg font-semibold text-blue-900">生产计划数据</h4>
              </div>
              <div className="ml-11">
                <p className="text-blue-800">核心来源系统：SAP（企业管理系统）</p>
              </div>
            </div>
            {/* 物料主数据 */}
            <div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
              <div className="flex items-center gap-3 mb-2">
                <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7C5 4 4 5 4 7z" />
                  </svg>
                </div>
                <h4 className="text-lg font-semibold text-blue-900">物料主数据</h4>
              </div>
              <div className="ml-11">
                <p className="text-blue-800">核心来源系统：SAP（企业管理系统）</p>
              </div>
            </div>
            {/* 供应商绩效数据 */}
            <div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
              <div className="flex items-center gap-3 mb-2">
                <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                  </svg>
                </div>
                <h4 className="text-lg font-semibold text-blue-900">供应商绩效数据</h4>
              </div>
              <div className="ml-11">
                <p className="text-blue-800">核心来源系统：SRM（供应商关系管理）、质量管理系统</p>
              </div>
            </div>
          </div>

          <div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
            <div className="flex items-center gap-3 mb-3">
              <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
              </div>
              <h4 className="text-lg font-semibold text-blue-900">供应商绩效数据</h4>
            </div>
            <div className="ml-11">
              <p className="text-blue-800">核心来源系统：SRM（供应商关系管理）、质量管理系统</p>
            </div>
          </div>

          <div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
            <div className="flex items-center gap-3 mb-3">
              <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <h4 className="text-lg font-semibold text-blue-900">产能数据</h4>
            </div>
            <div className="ml-11">
              <p className="text-blue-800">核心来源系统：MES（制造执行系统）、设备监控系统</p>
          {/* 数据区块，独立滚动，显示在下方 */}
          <div className="flex-1 min-h-0 mt-4 overflow-y-auto px-1">
            <div className="bg-white/90 rounded-lg p-6 shadow border border-gray-100">
              <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                components={{
                  h3: ({node, ...props}) => <h3 className="text-lg font-bold text-gray-800 mt-6 mb-3" {...props} />,
                  table: ({node, ...props}) => <div className="overflow-x-auto my-4"><table className="min-w-full text-gray-800 text-base" {...props} /></div>,
                  thead: ({node, ...props}) => <thead className="bg-gray-50" {...props} />,
                  th: ({node, ...props}) => <th className="px-4 py-3 text-base font-semibold text-gray-800 border-b border-gray-200 text-center whitespace-nowrap" {...props} />,
                  td: ({node, ...props}) => <td className="px-4 py-3 text-base text-gray-800 border-t border-gray-100 text-center" {...props} />,
                  tr: ({node, ...props}) => <tr className="hover:bg-gray-50" {...props} />
                }}
              >
                {markdownContent}
              </ReactMarkdown>
            </div>
          </div>
        </div>
@@ -250,47 +286,6 @@
                        </p>
                      </div>
                    </div>
                    <ReactMarkdown 
                      remarkPlugins={[remarkGfm]}
                      components={{
                        h3: ({ node, ...props }) => (
                          <h3 className="text-lg font-semibold text-gray-800 mt-8 mb-4 pb-2 border-b border-gray-200" {...props} />
                        ),
                        table: ({ node, ...props }) => (
                          <div className="overflow-x-auto my-6 rounded-lg border border-gray-200 shadow-sm">
                            <table className="min-w-full divide-y divide-gray-200" {...props} />
                          </div>
                        ),
                        thead: ({ node, ...props }) => (
                          <thead className="bg-gray-50" {...props} />
                        ),
                        th: ({ node, children, ...props }) => {
                          // 根据表头内容动态调整宽度
                          let className = "px-4 py-3 text-center text-sm font-semibold text-gray-700";
                          
                          if (typeof children === 'string') {
                            // 根据表头内容设置合适的宽度类
                            if (children === '工位' || children === '数量' || children === '库位') {
                              className += " w-[15%]";
                            } else if (children === '原材料' || children === '原材料需求' || children === '产线名') {
                              className += " w-[20%]";
                            } else if (children === '原材料消耗速率' || children === '生产的产品') {
                              className += " w-[25%]";
                            }
                          }
                          
                          return <th className={className} {...props}>{children}</th>;
                        },
                        td: ({ node, ...props }) => (
                          <td className="px-4 py-3 text-sm text-gray-600 border-t border-gray-200 text-center whitespace-nowrap" {...props} />
                        ),
                        tr: ({ node, ...props }) => (
                          <tr className="hover:bg-gray-50 transition-colors duration-150" {...props} />
                        )
                      }}
                    >
                      {markdownContent}
                    </ReactMarkdown>
                  </div>
                </div>
              </Dialog.Panel>