Fix issue #4082: [Bug]: Reduce padding in lists inside of messages

frontend/package-lock.json

@@ -13187,6 +13187,7 @@
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz",
       "integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@vitest/expect": "1.6.0",
         "@vitest/runner": "1.6.0",

frontend/src/components/chat/ChatMessage.test.tsx

@@ -198,4 +198,22 @@ describe("Message", () => {
       expect(rejectButton).toBeInTheDocument();
     });
   });
+
+  it("should apply markdown-body class to the message content", () => {
+    render(
+      <ChatMessage
+        message={{
+          sender: "user",
+          content: "- Bullet point 1
+- Bullet point 2",
+          imageUrls: [],
+          timestamp: new Date().toISOString(),
+        }}
+        isLastMessage={false}
+      />,
+    );
+
+    const markdownBody = screen.getByTestId("message-content");
+    expect(markdownBody).toHaveClass("markdown-body");
+  });
 });

frontend/src/components/modals/settings/AutocompleteCombobox.tsx

@@ -1,7 +1,7 @@
 import { Autocomplete, AutocompleteItem, Tooltip } from "@nextui-org/react";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { I18nKey } from "#/i18n/declaration";
+import { I18nKey } from "#/i18n";
 
 type Label = "model" | "agent" | "language" | "securityanalyzer";
 

frontend/src/components/modals/settings/SettingsForm.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { FaEye, FaEyeSlash } from "react-icons/fa";
 import { AvailableLanguages } from "../../../i18n";
-import { I18nKey } from "../../../i18n/declaration";
+import { I18nKey } from "../../../i18n";
 import { AutocompleteCombobox } from "./AutocompleteCombobox";
 import { Settings } from "#/services/settings";
 import { organizeModelsAndProviders } from "#/utils/organizeModelsAndProviders";

frontend/src/i18n/index.ts

@@ -69,4 +69,5 @@ i18n
     }
   });
 
+export { I18nKey } from './declaration';
 export default i18n;

frontend/src/index.css

@@ -47,14 +47,14 @@ code {
 
 .markdown-body ol {
   list-style-type: decimal; /* Handles numbered lists */
-  margin-left: 20px;
-  padding-left: 0.5em; /* Adds some indentation */
+  margin-left: 1em;
+  padding-left: 0.2em; /* Reduces indentation */
 }
 
 .markdown-body ul {
   list-style-type: disc; /* Handles bullet points */
-  margin-left: 20px;
-  padding-left: 0.5em; /* Adds some indentation */
+  margin-left: 1em;
+  padding-left: 0.2em; /* Reduces indentation */
 }
 
 .markdown-body th {

frontend/vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import viteTsconfigPaths from "vite-tsconfig-paths";
+import path from 'path';
 
 export default defineConfig(({ mode }) => {
   const {
@@ -38,6 +39,11 @@ export default defineConfig(({ mode }) => {
       }),
       viteTsconfigPaths(),
     ],
+    resolve: {
+      alias: {
+        '#': path.resolve(__dirname, './src'),
+      },
+    },
     clearScreen: false,
     server: {
       watch: {