fix problematic markdown

web/src/components/ui/typography/AppMarkdown/AppMarkdown.stories.tsx

@@ -258,3 +258,10 @@ const InteractiveMarkdown = () => {
 export const WithLoader: Story = {
   render: () => <InteractiveMarkdown />
 };
+
+export const WithProblematicReasoningMarkdown: Story = {
+  args: {
+    markdown: `**Thought**:\nThe goal is to build a comprehensive dashboard on product sales YTD. The dashboard will provide insights into overall sales trends, which products contribute most (top 10) and least (bottom 10), who the top salespeople and customers are, and some categorical breakdown based on product categories. We will focus on data from product sales (using sales orders, transaction history, and product information) and restrict visualizations to top and bottom 10 products wherever applicable.\n\n**Step-by-Step Plan**:\n1. **Create 8 Visualizations**:\n   - **Title**: 'YTD Sales Trend'\n     - **Type**: Line Chart\n     - **Datasets**: entity_sales_order (or entity_transaction_history)\n     - **Expected Output**: A line chart showing total sales amounts aggregated over time from the beginning of the year to date, with dates on the x-axis and total revenue on the y-axis.\n   \n   - **Title**: 'Total Sales YTD'\n     - **Type**: Number Card\n     - **Datasets**: entity_sales_order (or entity_transaction_history)\n     - **Expected Output**: A number card displaying the cumulative sales revenue from the beginning of the year until now.\n   \n   - **Title**: 'Top 10 Products by Revenue'\n     - **Type**: Bar Chart\n     - **Datasets**: entity_sales_order, entity_product\n     - **Expected Output**: A bar chart showing the top 10 products (by product name) with the highest total revenue; x-axis as product names, y-axis as sales revenue.\n   \n   - **Title**: 'Bottom 10 Products by Revenue'\n     - **Type**: Bar Chart\n     - **Datasets**: entity_sales_order, entity_product\n     - **Expected Output**: A bar chart showing the bottom 10 products (by product name) with the lowest sales revenue; x-axis as product names, y-axis as sales revenue. Only include products in the top and bottom groups.\n   \n   - **Title**: 'Top Salespeople YTD'\n     - **Type**: Bar Chart\n     - **Datasets**: entity_sales_order, entity_sales_person\n     - **Expected Output**: A bar chart displaying sales by each salesperson (using first and last name combined) ranked by total sales revenue for the year-to-date.\n   \n   - **Title**: 'Top Customers YTD'\n     - **Type**: Bar Chart\n     - **Datasets**: entity_sales_order, entity_customer\n     - **Expected Output**: A bar chart showing the top customers based on the amount they spent, with customer full names on the x-axis and revenue on the y-axis.\n   \n   - **Title**: 'Sales by Product Category'\n     - **Type**: Bar Chart\n     - **Datasets**: entity_sales_order, entity_product\n     - **Expected Output**: A bar chart that groups sales revenue by product category, with categories on the x-axis and total revenue on the y-axis. This visualization is filtered to include only products from the top 10 and bottom 10 groups.\n   \n   - **Title**: 'Monthly Sales Trend for Top/Bottom Products'\n     - **Type**: Line Chart\n     - **Datasets**: entity_sales_order, entity_product\n     - **Expected Output**: A line chart with monthly breakdown (months on the x-axis) showing sales trends for the products in the top 10 and bottom 10 groups, with separate lines representing each product (displaying product names).\n\n2. **Create Dashboard**:\n   - Title the dashboard \"Product Sales Overview - YTD (Top & Bottom 10)\"\n   - Add and arrange all eight visualizations on the dashboard to provide a comprehensive view of overall product sales, important sellers and buyers, and categorical insights focused on the top and bottom 10 products.\n\n3. **Review & Finish**:\n   - Verify that each visualization returns relevant and non-empty data, and that filters restrict views to the top 10 and bottom 10 products where applicable.\n   - Confirm that names are displayed instead of IDs in all visualizations.\n\n**Notes**:\n- Assumption: YTD refers to data from January 1st up to the current date.\n- The top 10 and bottom 10 products are determined based on total sales revenue.\n- Sales orders schema is used for sales figures while product details provide categorical info.\n- The dataset relationships have been confirmed in the data catalog.\n\nThis plan should provide a clear and comprehensive dashboard covering overall sales trends, key players in both sales and buying, and categorical breakdown for the top and bottom 10 products.\n
+    `
+  }
+};

web/src/components/ui/typography/AppMarkdown/AppMarkdownCommon.tsx

@@ -158,11 +158,7 @@ export const CustomListItem: React.FC<
   } & ExtraPropsExtra
 > = ({ children, markdown, showLoader, ...rest }) => {
   return (
-    <li
-      className={cn(
-        'leading-1.3 list-inside space-y-1',
-        showLoader && 'animate-in fade-in duration-700'
-      )}>
+    <li className={cn('leading-1.3 space-y-1', showLoader && 'animate-in fade-in duration-700')}>
       {children}
     </li>
   );