@liujitcn/kratos-admin-system 0.0.64 → 0.0.66

package/dist/package/src/views/ai/chat/components/XSender.vue

@@ -53,22 +53,145 @@
 
       <template #action-list>
         <div class="agent-sender-actions">
-          <div class="agent-model-selector" :class="{ 'is-disabled': sending || !modelOptions.length }">
-            <el-cascader
-              :model-value="selectedModelPath"
-              :options="modelOptions"
-              :props="{ expandTrigger: 'click' }"
-              :placeholder="t('system.ai.model.model_placeholder')"
-              :disabled="sending || !modelOptions.length"
-              :show-all-levels="true"
-              separator="/"
-              :clearable="true"
-              :teleported="true"
-              popper-class="agent-model-cascader-popper"
-              size="small"
-              @change="handleModelPathChange"
-            />
-          </div>
+          <el-popover
+            ref="modelPopoverRef"
+            placement="top-start"
+            :width="324"
+            trigger="click"
+            :show-arrow="false"
+            :persistent="false"
+            popper-class="agent-model-popper"
+          >
+            <template #reference>
+              <button
+                class="agent-model-selector"
+                :class="{ 'is-disabled': sending || !modelOptions.length }"
+                type="button"
+                :disabled="sending || !modelOptions.length"
+                :aria-label="t('system.ai.model.title')"
+              >
+                <el-icon class="agent-model-selector__spark"><MagicStick /></el-icon>
+                <span class="agent-model-selector__label">{{
+                  selectedModelDisplayName || t("system.ai.model.model_placeholder")
+                }}</span>
+                <el-icon class="agent-model-selector__arrow"><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div v-if="modelOptions.length" class="agent-model-panel">
+              <div class="agent-model-panel__head">
+                <span class="agent-model-panel__title">{{ t("system.ai.model.title") }}</span>
+                <span class="agent-model-panel__meta">{{
+                  t("system.ai.model.provider_model_count", {
+                    providers: modelOptions.length,
+                    models: modelOptionCount
+                  })
+                }}</span>
+              </div>
+              <div class="agent-model-panel__list">
+                <template v-for="provider in modelOptions" :key="provider.providerId">
+                  <div class="agent-model-panel__group">{{ provider.label }}</div>
+                  <button
+                    v-for="model in provider.models"
+                    :key="model.name"
+                    class="agent-model-row"
+                    :class="{ 'is-selected': isModelSelected(provider.providerId, model.name) }"
+                    type="button"
+                    @click="handleModelSelect(provider.providerId, model.name)"
+                  >
+                    <span class="agent-model-row__name">{{ model.displayName }}</span>
+                    <span v-if="model.displayName !== model.name" class="agent-model-row__raw">{{
+                      model.name
+                    }}</span>
+                    <el-icon
+                      v-if="isModelSelected(provider.providerId, model.name)"
+                      class="agent-model-row__check"
+                    >
+                      <Check />
+                    </el-icon>
+                  </button>
+                </template>
+              </div>
+              <button
+                v-if="aiProviderRoute"
+                class="agent-model-panel__manage"
+                type="button"
+                @click="openModelManage"
+              >
+                <el-icon><Setting /></el-icon>
+                <span>{{ t("system.ai.model.manage") }}</span>
+                <el-icon class="agent-model-panel__manage-arrow"><ArrowRight /></el-icon>
+              </button>
+            </div>
+            <div v-else class="agent-model-panel agent-model-panel--empty">
+              {{ t("system.ai.model.empty") }}
+            </div>
+          </el-popover>
+          <el-popover
+            ref="knowledgePopoverRef"
+            placement="top-start"
+            :width="324"
+            trigger="click"
+            :show-arrow="false"
+            :persistent="false"
+            popper-class="agent-model-popper"
+          >
+            <template #reference>
+              <button
+                class="agent-model-selector"
+                :class="{ 'is-disabled': sending || !knowledgeOptions.length, 'is-selected': selectedKnowledgeCount > 0 }"
+                type="button"
+                :disabled="sending || !knowledgeOptions.length"
+                :aria-label="t('system.ai.knowledge.title')"
+              >
+                <el-icon class="agent-model-selector__spark"><Collection /></el-icon>
+                <span class="agent-model-selector__label">{{
+                  selectedKnowledgeCount > 0
+                    ? t("system.ai.knowledge.selected_count", { count: selectedKnowledgeCount })
+                    : t("system.ai.knowledge.title")
+                }}</span>
+                <el-icon class="agent-model-selector__arrow"><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div v-if="knowledgeOptions.length" class="agent-model-panel">
+              <div class="agent-model-panel__head">
+                <span class="agent-model-panel__title">{{ t("system.ai.knowledge.title") }}</span>
+                <span class="agent-model-panel__meta">{{
+                  t("system.ai.knowledge.select_hint")
+                }}</span>
+              </div>
+              <div class="agent-model-panel__list">
+                <button
+                  v-for="option in knowledgeOptions"
+                  :key="option.id"
+                  class="agent-model-row"
+                  :class="{ 'is-selected': isKnowledgeSelected(option.id) }"
+                  type="button"
+                  @click="handleKnowledgeToggle(option.id)"
+                >
+                  <span class="agent-model-row__name">{{ option.name }}</span>
+                  <span v-if="option.doc_count" class="agent-model-row__raw">{{
+                    t("system.ai.knowledge.doc_count", { count: option.doc_count })
+                  }}</span>
+                  <el-icon v-if="isKnowledgeSelected(option.id)" class="agent-model-row__check">
+                    <Check />
+                  </el-icon>
+                </button>
+              </div>
+              <button
+                v-if="aiKnowledgeRoute"
+                class="agent-model-panel__manage"
+                type="button"
+                @click="openKnowledgeManage"
+              >
+                <el-icon><Setting /></el-icon>
+                <span>{{ t("system.ai.knowledge.manage") }}</span>
+                <el-icon class="agent-model-panel__manage-arrow"><ArrowRight /></el-icon>
+              </button>
+            </div>
+            <div v-else class="agent-model-panel agent-model-panel--empty">
+              {{ t("system.ai.knowledge.empty") }}
+            </div>
+          </el-popover>
           <el-tooltip
             :content="recording ? t('system.ai.chat.action.stop_voice_input') : t('system.ai.chat.action.voice_input')"
             placement="top"
@@ -117,17 +240,32 @@
 
 <script setup lang="ts" name="XSender">
 import { computed, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Attachments, XSender as BaseXSender } from "vue-element-plus-x";
 import type { FilesCardProps } from "vue-element-plus-x/types/FilesCard";
-import { Loading, Microphone, Paperclip, Promotion } from "@element-plus/icons-vue";
-import { ElMessage } from "element-plus";
-import type { CascaderValue } from "element-plus";
+import {
+  ArrowDown,
+  ArrowRight,
+  Check,
+  Collection,
+  Loading,
+  MagicStick,
+  Microphone,
+  Paperclip,
+  Promotion,
+  Setting
+} from "@element-plus/icons-vue";
+import { ElMessage, ElPopover } from "element-plus";
 import { t } from "@liujitcn/kratos-admin-core";
+import { navigateTo } from "@liujitcn/kratos-admin-core/navigation";
+import { useAuthStore } from "@liujitcn/kratos-admin-core/stores/runtime";
 import { defFileService } from "@liujitcn/kratos-admin-core/api/base/v1/file";
 import type { AiAttachment } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_session";
 import type { AiProviderModelOption } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_provider";
+import type { AiKnowledgeOption } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_knowledge";
 import type { SubmitPayload } from "../types";
 import { buildAIAttachmentFileCard } from "../attachment";
+import { fallbackModelDisplayName } from "../modelDisplay";
 import { useSpeechRecognition } from "./speech-recognition";
 import type { SpeechRecognitionError } from "./speech-recognition";
 
@@ -140,6 +278,10 @@ const props = defineProps<{
   providerId: number;
   /** 当前选择的模型名称。 */
   modelName: string;
+  /** 当前可供选择的知识库。 */
+  knowledgeOptions: AiKnowledgeOption[];
+  /** 当前选择的知识库编号列表。 */
+  knowledgeIds: number[];
 }>();
 
 const emit = defineEmits<{
@@ -147,21 +289,43 @@ const emit = defineEmits<{
   submit: [payload: SubmitPayload];
   /** 更新当前选择的供应商和模型。 */
   "model-change": [providerId: number, modelName: string];
+  /** 更新当前选择的知识库编号列表。 */
+  "knowledge-change": [knowledgeIds: number[]];
 }>();
 
 const senderRef = ref<InstanceType<typeof BaseXSender>>();
 const fileInputRef = ref<HTMLInputElement>();
+const modelPopoverRef = ref<InstanceType<typeof ElPopover>>();
+const router = useRouter();
+const authStore = useAuthStore();
 const inputText = ref("");
 const selectedAttachments = ref<AiAttachment[]>([]);
 const modelOptions = computed(() =>
   props.modelProviders.map(provider => ({
-    value: provider.provider_id,
+    providerId: provider.provider_id,
     label: provider.name,
-    disabled: provider.models.length === 0,
-    children: provider.models.map(model => ({ value: model, label: model }))
+    models: provider.models.map(model => ({
+      name: model.model_name,
+      displayName: model.display_name || fallbackModelDisplayName(model.model_name)
+    }))
   }))
 );
-const selectedModelPath = computed(() => (props.providerId && props.modelName ? [props.providerId, props.modelName] : []));
+const modelOptionCount = computed(() =>
+  modelOptions.value.reduce((total, provider) => total + provider.models.length, 0)
+);
+const selectedModelDisplayName = computed(() => {
+  const provider = modelOptions.value.find(item => item.providerId === props.providerId);
+  return (
+    provider?.models.find(model => model.name === props.modelName)?.displayName ??
+    fallbackModelDisplayName(props.modelName)
+  );
+});
+const aiProviderRoute = computed(() =>
+  authStore.flatMenuListGet.find(item => item.name === "AiProvider" && item.path)
+);
+const aiKnowledgeRoute = computed(() =>
+  authStore.flatMenuListGet.find(item => item.name === "AiKnowledge" && item.path)
+);
 const uploading = ref(false);
 const maxAttachmentCount = 6;
 const maxAttachmentSizeMB = 20;
@@ -218,10 +382,46 @@ const isSubmitDisabled = computed(() => {
   return uploading.value || (!inputText.value.trim() && selectedAttachments.value.length === 0);
 });
 
-/** 更新当前选中的供应商和模型路径。 */
-function handleModelPathChange(value: CascaderValue | null | undefined) {
-  const path = Array.isArray(value) ? value : [];
-  emit("model-change", Number(path[0]) || 0, typeof path[1] === "string" ? path[1] : "");
+/** 判断指定供应商与模型是否为当前选择。 */
+function isModelSelected(providerId: number, modelName: string) {
+  return props.providerId === providerId && props.modelName === modelName;
+}
+
+/** 选中模型并关闭选择面板。 */
+function handleModelSelect(providerId: number, modelName: string) {
+  emit("model-change", providerId, modelName);
+  modelPopoverRef.value?.hide();
+}
+
+/** 跳转到 AI 供应商配置页。 */
+async function openModelManage() {
+  if (!aiProviderRoute.value?.path) return;
+  modelPopoverRef.value?.hide();
+  await navigateTo(router, aiProviderRoute.value.path);
+}
+
+const knowledgePopoverRef = ref<InstanceType<typeof ElPopover>>();
+
+const selectedKnowledgeCount = computed(() => props.knowledgeIds.length);
+
+/** 判断知识库是否在当前选择中。 */
+function isKnowledgeSelected(knowledgeId: number) {
+  return props.knowledgeIds.includes(knowledgeId);
+}
+
+/** 切换知识库选择状态并同步父组件。 */
+function handleKnowledgeToggle(knowledgeId: number) {
+  const current = new Set(props.knowledgeIds);
+  if (current.has(knowledgeId)) current.delete(knowledgeId);
+  else current.add(knowledgeId);
+  emit("knowledge-change", [...current]);
+}
+
+/** 跳转到 AI 知识库管理页。 */
+async function openKnowledgeManage() {
+  if (!aiKnowledgeRoute.value?.path) return;
+  knowledgePopoverRef.value?.hide();
+  await navigateTo(router, aiKnowledgeRoute.value.path);
 }
 
 /** 读取输入内容并发送给父组件。 */
@@ -464,11 +664,15 @@ function resetFileInput() {
   min-height: 36px;
 }
 .agent-model-selector {
-  display: flex;
+  display: inline-flex;
   flex: 0 1 auto;
-  width: clamp(180px, 18vw, 200px);
+  align-items: center;
+  gap: 6px;
+  width: clamp(180px, 18vw, 220px);
   min-width: 0;
   height: 34px;
+  padding: 0 10px;
+  overflow: hidden;
   box-sizing: border-box;
   color: var(--admin-page-text-secondary);
   cursor: pointer;
@@ -479,48 +683,34 @@ function resetFileInput() {
     color 0.2s ease,
     border-color 0.2s ease,
     background-color 0.2s ease;
-}
-.agent-model-selector:hover {
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  border-color: var(--el-color-primary-light-5);
-}
-.agent-model-selector:focus-within {
-  border-color: var(--el-color-primary-light-5);
-}
-.agent-model-selector.is-disabled {
-  color: var(--el-disabled-text-color);
-  cursor: not-allowed;
-  background: var(--el-disabled-bg-color);
-  border-color: var(--el-disabled-border-color);
-}
-.agent-model-selector :deep(.el-cascader) {
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-}
-.agent-model-selector :deep(.el-input) {
-  height: 100%;
-}
-.agent-model-selector :deep(.el-input__wrapper) {
-  height: 100%;
-  padding: 0 9px;
-  background: transparent;
-  box-shadow: none;
-  border-radius: inherit;
-}
-.agent-model-selector :deep(.el-input__wrapper.is-focus) {
-  box-shadow: none;
-}
-.agent-model-selector :deep(.el-input__inner) {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  color: currentColor;
-}
-.agent-model-selector :deep(.el-input__suffix .el-icon) {
-  font-size: 14px;
-  color: currentColor;
+  &:hover {
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+    border-color: var(--el-color-primary-light-5);
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  &__spark {
+    flex-shrink: 0;
+    font-size: 15px;
+  }
+  &__label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__arrow {
+    flex-shrink: 0;
+    font-size: 14px;
+  }
 }
 .agent-sender-actions {
   display: inline-flex;
@@ -612,6 +802,112 @@ function resetFileInput() {
 :global(.agent-sender-popover.el-popover) {
   box-shadow: 0 14px 36px rgb(15 23 42 / 10%);
 }
+:global(.agent-model-popper.el-popover) {
+  padding: 0 !important;
+  border-radius: var(--admin-page-radius) !important;
+  box-shadow: 0 14px 36px rgb(15 23 42 / 16%) !important;
+}
+.agent-model-panel {
+  padding: 10px;
+  &__list {
+    max-height: min(52vh, 420px);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--el-border-color-darker) transparent;
+  }
+  &__head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: 4px 6px 10px;
+  }
+  &__title {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--admin-page-text-primary);
+  }
+  &__meta {
+    font-size: 11px;
+    color: var(--el-text-color-placeholder);
+  }
+  &__group {
+    padding: 8px 6px 6px;
+    font-size: 12px;
+    color: var(--admin-page-text-secondary);
+  }
+  &__manage {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    height: 36px;
+    margin-top: 6px;
+    padding: 0 6px;
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--el-color-primary);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-top: 1px solid var(--el-border-color-lighter);
+    border-radius: 0;
+    &:hover {
+      color: var(--el-color-primary-light-3);
+    }
+  }
+  &__manage-arrow {
+    margin-left: auto;
+  }
+  &--empty {
+    padding: 20px 10px;
+    font-size: 13px;
+    color: var(--admin-page-text-secondary);
+    text-align: center;
+  }
+}
+.agent-model-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 42px;
+  margin-bottom: 2px;
+  padding: 0 10px;
+  font-size: 13.5px;
+  color: var(--admin-page-text-primary);
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--admin-page-radius);
+  &:hover {
+    background: var(--el-fill-color-light);
+  }
+  &.is-selected {
+    font-weight: 600;
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+  }
+  &__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__raw {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--el-text-color-placeholder);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__check {
+    flex-shrink: 0;
+    font-size: 15px;
+  }
+}
 
 @media screen and (width <= 768px) {
   .agent-prefix-actions {

package/dist/package/src/views/ai/chat/index.vue

@@ -30,8 +30,11 @@
       :model-providers="modelProviders"
       :provider-id="selectedProviderId"
       :model-name="selectedModelName"
+      :knowledge-options="knowledgeOptions"
+      :knowledge-ids="selectedKnowledgeIds"
       @submit="handleSubmit"
       @model-change="handleModelChange"
+      @knowledge-change="handleKnowledgeChange"
       @message-action="handleMessageAction"
       @message-edit="handleEditMessage"
     >
@@ -59,9 +62,11 @@ import { defAiMessageService } from "@liujitcn/kratos-admin-system/api/base/v1/a
 import { defAiSessionService } from "@liujitcn/kratos-admin-system/api/base/v1/ai_session";
 import { defAiToolService } from "@liujitcn/kratos-admin-system/api/base/v1/ai_tool";
 import { defAiModelService } from "@liujitcn/kratos-admin-system/api/base/v1/ai_provider";
+import { defAiKnowledgeService } from "@liujitcn/kratos-admin-system/api/base/v1/ai_knowledge";
 import type { AiAction } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_message";
 import type { AiSession } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_session";
 import type { AiProviderModelOption } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_provider";
+import type { AiKnowledgeOption } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_knowledge";
 import type { AiShortcut } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_tool";
 import { AiMessageStatus } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_session";
 import { Terminal } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_tool";
@@ -85,6 +90,7 @@ import {
   sortMessages
 } from "./message";
 import { readAiEventStream } from "./stream";
+import { loadStoredModelSelection, saveModelSelection } from "./modelSelection";
 import type {
   AiStreamEvent,
   AiStreamPayload,
@@ -111,6 +117,8 @@ const starterShortcuts = ref<AiShortcut[]>([]);
 const modelProviders = ref<AiProviderModelOption[]>([]);
 const selectedProviderId = ref(0);
 const selectedModelName = ref("");
+const knowledgeOptions = ref<AiKnowledgeOption[]>([]);
+const selectedKnowledgeIds = ref<number[]>([]);
 const messages = ref<Record<string, ChatMessageItem[]>>({});
 const pendingDeltaMap = new Map<string, AiStreamPayload>();
 const runningStreamTaskMap = new Map<string, AiStreamTask>();
@@ -228,6 +236,7 @@ async function runAiStreamTask(sessionID: string, payload: SubmitPayload) {
         content: payload.text,
         provider_id: selectedProviderId.value,
         model_name: selectedModelName.value,
+        knowledge_base_ids: selectedKnowledgeIds.value,
         attachments: payload.attachments.map(item => ({
           id: item.id,
           name: item.name,
@@ -656,20 +665,23 @@ async function loadAiShortcuts() {
   if (loadingShortcuts.value) return;
   loadingShortcuts.value = true;
   try {
-    const [response, providerResponse] = await Promise.all([
+    const [response, providerResponse, knowledgeResponse] = await Promise.all([
       defAiToolService.ListAiShortcut({ terminal: Terminal.TERMINAL_ADMIN }),
-      defAiModelService.ListAiProviderModelOptions({})
+      defAiModelService.ListAiProviderModelOptions({}),
+      defAiKnowledgeService.ListAiKnowledgeOptions({})
     ]);
     starterShortcuts.value = normalizeStarterShortcuts(response.shortcuts);
     modelProviders.value = providerResponse.providers ?? [];
-    if (!modelProviders.value.some(item => item.provider_id === selectedProviderId.value && item.models.includes(selectedModelName.value))) {
-      const firstProvider = modelProviders.value[0];
-      selectedProviderId.value = firstProvider?.provider_id ?? 0;
-      selectedModelName.value = firstProvider?.models[0] ?? "";
-    }
+    knowledgeOptions.value = knowledgeResponse.options ?? [];
+    // 知识库可能已被删除，剔除无效选择。
+    selectedKnowledgeIds.value = selectedKnowledgeIds.value.filter(id =>
+      knowledgeOptions.value.some(option => option.id === id)
+    );
+    applyModelSelection();
   } catch {
     starterShortcuts.value = [];
     modelProviders.value = [];
+    knowledgeOptions.value = [];
     selectedProviderId.value = 0;
     selectedModelName.value = "";
   } finally {
@@ -677,10 +689,36 @@ async function loadAiShortcuts() {
   }
 }
 
-/** 更新当前聊天使用的供应商与模型。 */
+/** 优先恢复本地缓存的模型选择，缓存失效时回退到首个可用模型。 */
+function applyModelSelection() {
+  const stored = loadStoredModelSelection();
+  const provider = stored
+    ? modelProviders.value.find(
+        item =>
+          item.provider_id === stored.provider_id &&
+          item.models.some(model => model.model_name === stored.model_name)
+      )
+    : undefined;
+  if (provider && stored) {
+    selectedProviderId.value = provider.provider_id;
+    selectedModelName.value = stored.model_name;
+    return;
+  }
+  const firstProvider = modelProviders.value[0];
+  selectedProviderId.value = firstProvider?.provider_id ?? 0;
+  selectedModelName.value = firstProvider?.models[0]?.model_name ?? "";
+}
+
+/** 更新当前聊天使用的供应商与模型并持久化到本地缓存。 */
 function handleModelChange(providerId: number, modelName: string) {
   selectedProviderId.value = providerId;
   selectedModelName.value = modelName;
+  saveModelSelection({ provider_id: providerId, model_name: modelName });
+}
+
+/** 更新当前聊天检索注入的知识库选择。 */
+function handleKnowledgeChange(knowledgeIds: number[]) {
+  selectedKnowledgeIds.value = knowledgeIds;
 }
 
 /** 使指定会话仍在途的消息列表请求失效。 */