feat: add KaTeX and Mermaid and computation-friendly renderer support (#4118)

* feat: add KaTeX and Mermaid support for enhanced markdown rendering in MessageList.vue

closes: #3747
- Integrated @mdit/plugin-katex and katex for LaTeX rendering.
- Added markstream-vue for improved markdown rendering capabilities.
- Updated MessageList.vue to utilize MarkdownRender component for rendering markdown content.
- Enhanced UI for dark mode compatibility across various components.
- Introduced new styles for file links, reasoning blocks, and tool call cards to improve visual consistency.

* refactor: replace markdown-it with markstream-vue for improved markdown rendering

- Removed markdown-it and related configurations from ReadmeDialog.vue, VerticalHeader.vue, and ConversationPage.vue.
- Integrated markstream-vue for enhanced markdown rendering capabilities, including support for KaTeX and Mermaid.
- Updated components to utilize MarkdownRender for rendering markdown content, improving consistency and performance.

* chore: remove deprecated markdown-it and marked dependencies from pnpm-lock.yaml

- Cleaned up pnpm-lock.yaml by removing markdown-it and marked entries, streamlining the dependency list.
- This change follows the recent integration of markstream-vue for improved markdown rendering capabilities.

* chore: remove d3 dependency and update MessageList.vue for dark mode support

- Removed d3 from package.json and commented out its import in LongTermMemory.vue to clean up unused dependencies.
- Updated MessageList.vue to ensure consistent dark mode styling by passing the isDark prop to MarkdownRender components.

* feat: add loading indicator for message retrieval in Chat and MessageList components

- Introduced a loading overlay in Chat.vue and MessageList.vue to indicate when messages are being loaded.
- Added a new `isLoadingMessages` prop to manage loading state and enhance user experience during message retrieval.
- Updated styles to ensure the loading indicator is visually integrated with the existing UI.

* feat: add provider configuration dialog to chat sidebar

- Introduced a new `ProviderConfigDialog` component for managing provider settings.
- Added a menu item in the `ConversationSidebar` to open the provider configuration dialog.
- Updated English and Chinese localization files to include translations for the new provider configuration feature.

* feat: update dashboard components and styles for improved chat experience

- Replaced font in index.html to use 'Outfit' for a fresh look.
- Changed icon in ConversationSidebar.vue to 'mdi-creation' for better representation.
- Refactored MessageList.vue to streamline loading indicators and enhance styling consistency.
- Updated localization files to change 'Provider Configuration' to 'AI Configuration' for clarity.
- Introduced new styles for loading indicators and chat mode adjustments in FullLayout.vue.
- Added functionality for toggling between bot and chat modes in the header.
- Removed deprecated sidebar item for chat navigation.

* feat: xmas easter egg

* chore: remove pnpm lock file

dashboard/src/components/shared/ReadmeDialog.vue

@@ -1,11 +1,15 @@
 <script setup>
 import { ref, watch, onMounted, computed } from 'vue';
 import axios from 'axios';
-import MarkdownIt from 'markdown-it';
-import hljs from 'highlight.js';
+import { MarkdownRender, enableKatex, enableMermaid } from 'markstream-vue';
+import 'markstream-vue/index.css';
+import 'katex/dist/katex.min.css';
 import 'highlight.js/styles/github.css';
 import { useI18n } from '@/i18n/composables';
 
+enableKatex();
+enableMermaid();
+
 const props = defineProps({
   show: {
     type: Boolean,
@@ -74,29 +78,6 @@ function openRepoInNewTab() {
   }
 }
 
-// 配置markdown-it，启用代码高亮
-const md = new MarkdownIt({
-  html: true,        // 启用HTML标签
-  breaks: true,       // 换行转<br>
-  linkify: true,      // 自动转链接
-  typographer: false, // 禁用智能引号
-  highlight: function(code, lang) {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return hljs.highlight(code, { language: lang }).value;
-      } catch (e) {
-        console.error(e);
-      }
-    }
-    return hljs.highlightAuto(code).value;
-  }
-});
-
-// 渲染Markdown内容
-function renderMarkdown(content) {
-  if (!content) return '';
-  return md.render(content);
-}
 
 // 刷新README内容
 function refreshReadme() {
@@ -150,7 +131,9 @@ const _show = computed({
         </div>
         
         <!-- 内容显示 -->
-        <div v-else-if="content" class="markdown-body" v-html="renderMarkdown(content)"></div>
+        <div v-else-if="content" class="markdown-body">
+          <MarkdownRender :content="content" :typewriter="false" class="markdown-content" />
+        </div>
         
         <!-- 错误提示 -->
         <div v-else-if="error" class="d-flex flex-column align-center justify-center" style="height: 100%;">
@@ -301,6 +284,9 @@ const _show = computed({
 <script>
 export default {
   name: 'ReadmeDialog',
+  components: {
+    MarkdownRender
+  },
   computed: {
     _show: {
       get() {