feat(theme): add markdown layout style and table style

src/renderer/src/components/ModelSelect.vue

@@ -2,7 +2,7 @@
   <div class="space-y-2" :dir="langStore.dir">
     <Input
       v-model="keyword"
-      class="w-full border-none border-b ring-0 focus-visible:ring-0 rounded-b-none"
+      class="w-full text-sm border-none border-b ring-0 focus-visible:ring-0 rounded-b-none"
       :placeholder="t('model.search.placeholder')"
     />
     <div class="flex flex-col max-h-64 overflow-y-auto">

src/renderer/src/components/NewThread.vue

@@ -15,85 +15,75 @@
         :context-length="contextLength"
         @send="handleSend"
       >
-        <template #addon-buttons>
-          <div
-            key="newThread-model-select"
-            class="new-thread-model-select overflow-hidden flex items-center h-7 rounded-lg shadow-sm border border-input transition-all duration-300"
-            :dir="langStore.dir"
-          >
-            <Popover v-model:open="modelSelectOpen">
-              <PopoverTrigger as-child>
-                <Button
+        <template #addon-actions>
+          <Popover v-model:open="modelSelectOpen">
+            <PopoverTrigger as-child>
+              <Button
+                variant="ghost"
+                class="flex items-center gap-1.5 h-7 px-2 rounded-md text-xs font-semibold text-muted-foreground hover:bg-muted/60 hover:text-foreground dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
+                size="sm"
+              >
+                <ModelIcon
+                  class="w-4 h-4"
+                  :model-id="activeModel.providerId"
+                  :is-dark="themeStore.isDark"
+                ></ModelIcon>
+                <span class="text-xs font-semibold truncate max-w-[140px] text-foreground">{{
+                  name
+                }}</span>
+                <Badge
+                  v-for="tag in activeModel.tags"
+                  :key="tag"
                   variant="outline"
-                  class="flex border-none rounded-none shadow-none items-center gap-1.5 px-2 h-full"
-                  size="sm"
+                  class="py-0 px-1 rounded-lg text-[10px]"
                 >
-                  <ModelIcon
-                    class="w-4 h-4"
-                    :model-id="activeModel.providerId"
-                    :is-dark="themeStore.isDark"
-                  ></ModelIcon>
-                  <!-- <Icon icon="lucide:message-circle" class="w-5 h-5 text-muted-foreground" /> -->
-                  <h2 class="text-xs font-bold max-w-[150px] truncate">{{ name }}</h2>
-                  <Badge
-                    v-for="tag in activeModel.tags"
-                    :key="tag"
-                    variant="outline"
-                    class="py-0 rounded-lg"
-                    size="sm"
-                  >
-                    {{ t(`model.tags.${tag}`) }}</Badge
-                  >
-                  <Icon icon="lucide:chevron-right" class="w-4 h-4" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent align="start" class="p-0 w-80">
-                <ModelSelect
-                  :type="[ModelType.Chat, ModelType.ImageGeneration]"
-                  @update:model="handleModelUpdate"
-                />
-              </PopoverContent>
-            </Popover>
-            <ScrollablePopover
-              v-model:open="settingsPopoverOpen"
-              @update:open="handleSettingsPopoverUpdate"
-              align="start"
-              content-class="w-80"
-              :enable-scrollable="true"
-            >
-              <template #trigger>
-                <Button
-                  class="w-7 h-full rounded-none border-none shadow-none transition-all duration-300"
-                  :class="{
-                    'w-0 opacity-0 p-0 overflow-hidden': !showSettingsButton && !isHovering,
-                    'w-7 opacity-100': showSettingsButton || isHovering
-                  }"
-                  size="icon"
-                  variant="outline"
+                  {{ t(`model.tags.${tag}`) }}</Badge
                 >
-                  <Icon icon="lucide:settings-2" class="w-4 h-4" />
-                </Button>
-              </template>
-              <ChatConfig
-                v-model:temperature="temperature"
-                v-model:context-length="contextLength"
-                v-model:max-tokens="maxTokens"
-                v-model:system-prompt="systemPrompt"
-                v-model:artifacts="artifacts"
-                v-model:thinking-budget="thinkingBudget"
-                v-model:enable-search="enableSearch"
-                v-model:forced-search="forcedSearch"
-                v-model:search-strategy="searchStrategy"
-                v-model:reasoning-effort="reasoningEffort"
-                v-model:verbosity="verbosity"
-                :context-length-limit="contextLengthLimit"
-                :max-tokens-limit="maxTokensLimit"
-                :model-id="activeModel?.id"
-                :provider-id="activeModel?.providerId"
-                :model-type="activeModel?.type"
+                <Icon icon="lucide:chevron-right" class="w-4 h-4 text-muted-foreground" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" class="w-80 p-0">
+              <ModelSelect
+                :type="[ModelType.Chat, ModelType.ImageGeneration]"
+                @update:model="handleModelUpdate"
               />
-            </ScrollablePopover>
-          </div>
+            </PopoverContent>
+          </Popover>
+
+          <ScrollablePopover
+            v-model:open="settingsPopoverOpen"
+            align="end"
+            content-class="w-80"
+            :enable-scrollable="true"
+          >
+            <template #trigger>
+              <Button
+                class="h-7 w-7 rounded-md border border-border/60 hover:border-border dark:border-white/10 dark:bg-white/[0.04] dark:text-white/70 dark:hover:border-white/25 dark:hover:bg-white/15 dark:hover:text-white"
+                size="icon"
+                variant="outline"
+              >
+                <Icon icon="lucide:settings-2" class="w-4 h-4" />
+              </Button>
+            </template>
+            <ChatConfig
+              v-model:temperature="temperature"
+              v-model:context-length="contextLength"
+              v-model:max-tokens="maxTokens"
+              v-model:system-prompt="systemPrompt"
+              v-model:artifacts="artifacts"
+              v-model:thinking-budget="thinkingBudget"
+              v-model:enable-search="enableSearch"
+              v-model:forced-search="forcedSearch"
+              v-model:search-strategy="searchStrategy"
+              v-model:reasoning-effort="reasoningEffort"
+              v-model:verbosity="verbosity"
+              :context-length-limit="contextLengthLimit"
+              :max-tokens-limit="maxTokensLimit"
+              :model-id="activeModel?.id"
+              :provider-id="activeModel?.providerId"
+              :model-type="activeModel?.type"
+            />
+          </ScrollablePopover>
         </template>
       </ChatInput>
       <div class="h-12"></div>
@@ -118,14 +108,11 @@ import { computed, nextTick, ref, watch, onMounted } from 'vue'
 import { UserMessageContent } from '@shared/chat'
 import ChatConfig from './ChatConfig.vue'
 import { usePresenter } from '@/composables/usePresenter'
-import { useEventListener } from '@vueuse/core'
 import { useThemeStore } from '@/stores/theme'
-import { useLanguageStore } from '@/stores/language'
 import { ModelType } from '@shared/model'
 
 const configPresenter = usePresenter('configPresenter')
 const themeStore = useThemeStore()
-const langStore = useLanguageStore()
 // 定义偏好模型的类型
 interface PreferredModel {
   modelId: string
@@ -306,17 +293,7 @@ watch(
 
 const modelSelectOpen = ref(false)
 const settingsPopoverOpen = ref(false)
-const showSettingsButton = ref(false)
-const isHovering = ref(false)
 const chatInputRef = ref<InstanceType<typeof ChatInput> | null>(null)
-// 监听鼠标悬停
-const handleMouseEnter = () => {
-  isHovering.value = true
-}
-
-const handleMouseLeave = () => {
-  isHovering.value = false
-}
 
 const handleModelUpdate = (model: MODEL_META, providerId: string) => {
   activeModel.value = {
@@ -405,41 +382,13 @@ watch(
 )
 
 onMounted(async () => {
-  const groupElement = document.querySelector('.new-thread-model-select')
   configPresenter.getDefaultSystemPrompt().then((prompt) => {
     systemPrompt.value = prompt
   })
   // 组件激活时初始化一次默认模型
   await initActiveModel()
-  if (groupElement) {
-    useEventListener(groupElement, 'mouseenter', handleMouseEnter)
-    useEventListener(groupElement, 'mouseleave', handleMouseLeave)
-  }
 })
 
-const handleSettingsPopoverUpdate = (isOpen: boolean) => {
-  if (isOpen) {
-    // 如果打开，立即显示按钮
-    showSettingsButton.value = true
-  } else {
-    // 如果关闭，延迟隐藏按钮，等待动画完成
-    setTimeout(() => {
-      showSettingsButton.value = false
-    }, 300) // 300ms是一个常见的动画持续时间，可以根据实际情况调整
-  }
-}
-
-// 初始化时设置showSettingsButton的值与settingsPopoverOpen一致
-watch(
-  settingsPopoverOpen,
-  (value) => {
-    if (value) {
-      showSettingsButton.value = true
-    }
-  },
-  { immediate: true }
-)
-
 const handleSend = async (content: UserMessageContent) => {
   const threadId = await chatStore.createThread(content.text, {
     providerId: activeModel.value.providerId,
@@ -461,14 +410,3 @@ const handleSend = async (content: UserMessageContent) => {
   chatStore.sendMessage(content)
 }
 </script>
-
-<style scoped>
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.duration-300 {
-  transition-duration: 300ms;
-}
-</style>

src/renderer/src/components/chat-input/ChatInput.vue

@@ -100,13 +100,12 @@
             </Tooltip>
 
             <McpToolsList />
-
-            <!-- Slot for NewThread model selector -->
-            <slot name="addon-buttons"></slot>
           </div>
 
           <!-- Actions -->
           <div class="flex items-center gap-2 flex-wrap">
+            <!-- NewThread model selector and settings (right-aligned) -->
+            <slot name="addon-actions"></slot>
             <div
               v-if="shouldShowContextLength"
               :class="[

src/renderer/src/components/markdown/MarkdownRenderer.vue

@@ -125,7 +125,7 @@ defineEmits(['copy'])
   }
 
   p {
-    @apply my-0;
+    @apply my-2;
   }
 
   li p {
@@ -134,12 +134,32 @@ defineEmits(['copy'])
     margin-top: 0;
     margin-bottom: 0;
   }
+  h1 {
+    @apply text-2xl font-bold my-3 py-0;
+  }
+  h2 {
+    @apply text-xl font-medium my-3 py-0;
+  }
+  h3 {
+    @apply text-base font-medium my-2 py-0;
+  }
+  h4 {
+    @apply text-sm font-medium my-2 py-0;
+  }
+  h5 {
+    @apply text-sm my-1.5 py-0;
+  }
+  h6 {
+    @apply text-sm my-1.5 py-0;
+  }
+
+  ul,
+  ol {
+    @apply my-1.5;
+  }
 
   hr {
-    margin-block-start: 0.5em;
-    margin-block-end: 0.5em;
-    margin-inline-start: auto;
-    margin-inline-end: auto;
+    @apply my-8;
   }
 
   /*
@@ -150,5 +170,30 @@ defineEmits(['copy'])
   a .markdown-renderer {
     display: inline;
   }
+
+  .table-node-wrapper {
+    @apply border border-border rounded-lg py-0 my-0 overflow-hidden shadow-sm;
+  }
+
+  table {
+    @apply py-0 my-0;
+    /* @apply bg-card border block rounded-lg my-0 py-0 overflow-hidden; */
+    border-collapse: collapse;
+  }
+
+  thead,
+  thead tr,
+  thead th {
+    @apply bg-muted;
+  }
+
+  th,
+  td {
+    @apply border-b not-last:border-r border-border;
+  }
+
+  tbody tr:last-child td {
+    @apply border-b-0;
+  }
 }
 </style>

src/renderer/src/components/message/MessageBlockError.vue

@@ -6,15 +6,22 @@
     <Icon icon="lucide:refresh-cw-off"></Icon>
     <span>{{ t(block.content || '') }}</span>
   </div>
-  <div
-    v-else
-    class="text-xs bg-red-100 text-red-700 rounded-lg border border-red-400 flex flex-col gap-2 px-2 py-2"
-  >
-    <div class="flex flex-row gap-2 items-center cursor-pointer">
-      <Icon icon="lucide:info" class="w-4 h-4 text-red-700" />
-      <span class="grow">{{ t('common.error.requestFailed') }}</span>
+  <div v-else class="cursor-default select-none">
+    <div
+      class="text-xs text-red-500 flex flex-row items-center group"
+      @click="isExpanded = !isExpanded"
+    >
+      {{ t('common.error.requestFailed')
+      }}<Icon
+        class="hidden group-hover:block ml-2 transition-all"
+        :class="[isExpanded ? ' rotate-90' : '']"
+        icon="lucide:chevron-right"
+      ></Icon>
     </div>
-    <div class="prose prose-sm max-w-full break-all whitespace-pre-wrap leading-7">
+    <div
+      v-if="isExpanded"
+      class="text-xs max-w-full break-all whitespace-pre-wrap leading-7 text-red-400"
+    >
       {{ t(block.content || '') }}
     </div>
     <div v-if="errorExplanation" class="mt-2 text-red-400 font-medium">
@@ -26,14 +33,16 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { AssistantMessageBlock } from '@shared/chat'
 const { t } = useI18n()
 
 const props = defineProps<{
   block: AssistantMessageBlock
 }>()
 
+const isExpanded = ref(false)
+
 const errorExplanation = computed(() => {
   const content = props.block.content || ''