From 6903032f7e919d4b00a423fa5f37b973c5b69fe2 Mon Sep 17 00:00:00 2001
From: Soulter <37870767+Soulter@users.noreply.github.com>
Date: Sun, 9 Nov 2025 15:30:41 +0800
Subject: [PATCH] fix: improve knowledge base chip display with truncation and
 styling (#3582)

fixes: #3546
---
 .../shared/KnowledgeBaseSelector.vue          | 44 ++++++++++++-------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/dashboard/src/components/shared/KnowledgeBaseSelector.vue b/dashboard/src/components/shared/KnowledgeBaseSelector.vue
index a90e6f5e2..e959b948a 100644
--- a/dashboard/src/components/shared/KnowledgeBaseSelector.vue
+++ b/dashboard/src/components/shared/KnowledgeBaseSelector.vue
@@ -1,22 +1,25 @@
 <template>
-  <div class="d-flex align-center justify-space-between">
-    <span v-if="!modelValue || (Array.isArray(modelValue) && modelValue.length === 0)" 
-          style="color: rgb(var(--v-theme-primaryText));">
-      未选择
-    </span>
-    <div v-else class="d-flex flex-wrap gap-1">
-      <v-chip 
-        v-for="name in modelValue" 
-        :key="name" 
-        size="small" 
-        color="primary" 
-        variant="tonal"
-        closable
-        @click:close="removeKnowledgeBase(name)">
-        {{ name }}
-      </v-chip>
+  <div class="d-flex align-center justify-space-between" style="gap: 8px;">
+    <div style="flex: 1; min-width: 0; overflow: hidden;">
+      <span v-if="!modelValue || (Array.isArray(modelValue) && modelValue.length === 0)" 
+            style="color: rgb(var(--v-theme-primaryText));">
+        未选择
+      </span>
+      <div v-else class="d-flex flex-wrap gap-1">
+        <v-chip 
+          v-for="name in modelValue" 
+          :key="name" 
+          size="small" 
+          color="primary" 
+          variant="tonal"
+          closable
+          @click:close="removeKnowledgeBase(name)"
+          style="max-width: 100%;">
+          <span class="text-truncate" style="max-width: 200px;">{{ name }}</span>
+        </v-chip>
+      </div>
     </div>
-    <v-btn size="small" color="primary" variant="tonal" @click="openDialog">
+    <v-btn size="small" color="primary" variant="tonal" @click="openDialog" style="flex-shrink: 0;">
       {{ buttonText }}
     </v-btn>
   </div>
@@ -220,4 +223,11 @@ function goToKnowledgeBasePage() {
 .gap-1 {
   gap: 4px;
 }
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+}
 </style>