@liujitcn/kratos-admin-system 0.0.62 → 0.0.65

package/dist/package/src/utils/rateLimit.ts

@@ -0,0 +1,140 @@
+import { BaseRateLimitAlgorithm } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_rate_limit_rule";
+
+/** 限流算法的可编辑参数集合。 */
+export interface RateLimitParams {
+  tokens_per_second?: number;
+  burst?: number;
+  limit?: number;
+  window_seconds?: number;
+  leak_rate_per_second?: number;
+  capacity?: number;
+}
+
+/** 返回所选算法的空参数表单。 */
+export function defaultRateLimitParams(algorithm: BaseRateLimitAlgorithm): RateLimitParams {
+  switch (algorithm) {
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_TOKEN_BUCKET:
+      return { tokens_per_second: undefined, burst: undefined };
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_FIXED_WINDOW:
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_COUNTER:
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_LOG:
+      return { limit: undefined, window_seconds: undefined };
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_LEAKY_BUCKET:
+      return { leak_rate_per_second: undefined, capacity: undefined };
+    default:
+      return {};
+  }
+}
+
+/** 按算法解析 JSON，只保留该算法支持的参数。 */
+export function parseRateLimitParams(algorithm: BaseRateLimitAlgorithm, raw: string): RateLimitParams {
+  let value: Record<string, unknown> = {};
+  try {
+    const parsed: unknown = JSON.parse(raw);
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) value = parsed as Record<string, unknown>;
+  } catch {
+    return defaultRateLimitParams(algorithm);
+  }
+  const number = (key: string) => (typeof value[key] === "number" && Number.isFinite(value[key]) ? (value[key] as number) : undefined);
+  switch (algorithm) {
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_TOKEN_BUCKET:
+      return { tokens_per_second: number("tokens_per_second"), burst: number("burst") };
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_FIXED_WINDOW:
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_COUNTER:
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_LOG:
+      return { limit: number("limit"), window_seconds: number("window_seconds") };
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_LEAKY_BUCKET:
+      return { leak_rate_per_second: number("leak_rate_per_second"), capacity: number("capacity") };
+    default:
+      return defaultRateLimitParams(algorithm);
+  }
+}
+
+/** 校验参数并生成仅包含当前算法字段的 JSON 对象。 */
+export function serializeRateLimitParams(algorithm: BaseRateLimitAlgorithm, params: RateLimitParams): Record<string, number> | undefined {
+  switch (algorithm) {
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_TOKEN_BUCKET:
+      if (!isRate(params.tokens_per_second) || !isIntegerInRange(params.burst, 1, 1_000_000)) return undefined;
+      return { tokens_per_second: params.tokens_per_second, burst: params.burst };
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_FIXED_WINDOW:
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_COUNTER:
+      if (!isIntegerInRange(params.limit, 1, 1_000_000) || !isIntegerInRange(params.window_seconds, 1, 86_400)) return undefined;
+      return { limit: params.limit, window_seconds: params.window_seconds };
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_LOG:
+      if (!isIntegerInRange(params.limit, 1, 10_000) || !isIntegerInRange(params.window_seconds, 1, 86_400)) return undefined;
+      return { limit: params.limit, window_seconds: params.window_seconds };
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_LEAKY_BUCKET:
+      if (!isRate(params.leak_rate_per_second) || !isIntegerInRange(params.capacity, 1, 1_000_000)) return undefined;
+      return { leak_rate_per_second: params.leak_rate_per_second, capacity: params.capacity };
+    default:
+      return undefined;
+  }
+}
+
+/** 返回可直接交给国际化模板的完整参数。 */
+export function rateLimitSummaryParams(algorithm: BaseRateLimitAlgorithm, raw: string): Record<string, string | number> {
+  const params = parseRateLimitParams(algorithm, raw);
+  return Object.fromEntries(Object.entries(params).map(([key, value]) => [key, value ?? 0])) as Record<string, string | number>;
+}
+
+/** 返回限流算法名称对应的多语言资源键。 */
+export function rateLimitAlgorithmLabelKey(algorithm: BaseRateLimitAlgorithm): string {
+  switch (algorithm) {
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_TOKEN_BUCKET:
+      return "system.base.rate_limit_rule.algorithm.token_bucket";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_FIXED_WINDOW:
+      return "system.base.rate_limit_rule.algorithm.fixed_window";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_COUNTER:
+      return "system.base.rate_limit_rule.algorithm.sliding_window_counter";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_LOG:
+      return "system.base.rate_limit_rule.algorithm.sliding_window_log";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_LEAKY_BUCKET:
+      return "system.base.rate_limit_rule.algorithm.leaky_bucket";
+    default:
+      return "";
+  }
+}
+
+/** 返回所选限流算法说明对应的多语言资源键。 */
+export function rateLimitAlgorithmTooltipKey(algorithm: BaseRateLimitAlgorithm): string {
+  switch (algorithm) {
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_TOKEN_BUCKET:
+      return "system.base.rate_limit_rule.algorithm_help.token_bucket";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_FIXED_WINDOW:
+      return "system.base.rate_limit_rule.algorithm_help.fixed_window";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_COUNTER:
+      return "system.base.rate_limit_rule.algorithm_help.sliding_window_counter";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_LOG:
+      return "system.base.rate_limit_rule.algorithm_help.sliding_window_log";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_LEAKY_BUCKET:
+      return "system.base.rate_limit_rule.algorithm_help.leaky_bucket";
+    default:
+      return "";
+  }
+}
+
+/** 返回参数摘要对应的多语言资源键。 */
+export function rateLimitSummaryKey(algorithm: BaseRateLimitAlgorithm): string {
+  switch (algorithm) {
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_TOKEN_BUCKET:
+      return "system.base.rate_limit_rule.summary.token_bucket";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_FIXED_WINDOW:
+      return "system.base.rate_limit_rule.summary.fixed_window";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_COUNTER:
+      return "system.base.rate_limit_rule.summary.sliding_window_counter";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_SLIDING_WINDOW_LOG:
+      return "system.base.rate_limit_rule.summary.sliding_window_log";
+    case BaseRateLimitAlgorithm.BASE_RATE_LIMIT_ALGORITHM_LEAKY_BUCKET:
+      return "system.base.rate_limit_rule.summary.leaky_bucket";
+    default:
+      return "";
+  }
+}
+
+function isRate(value: number | undefined): value is number {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0.001 && value <= 1_000_000;
+}
+
+function isIntegerInRange(value: number | undefined, min: number, max: number): value is number {
+  return typeof value === "number" && Number.isInteger(value) && value >= min && value <= max;
+}

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

@@ -47,7 +47,15 @@
           </div>
         </section>
         <div class="agent-chat-empty__sender">
-          <XSender :key="senderKey" :sending="sending" @submit="handleSubmit" />
+          <XSender
+            :key="senderKey"
+            :sending="sending"
+            :model-providers="modelProviders"
+            :provider-id="providerId"
+            :model-name="modelName"
+            @submit="handleSubmit"
+            @model-change="handleModelChange"
+          />
         </div>
       </div>
     </template>
@@ -70,7 +78,9 @@
                 >
                   {{ item.replySourceTag.text }}
                 </span>
-                <span v-if="item.model" class="agent-message-meta__model">{{ item.model }}</span>
+                <span v-if="item.model" class="agent-message-meta__model">{{
+                  resolveModelDisplayName(modelProviders, item.model)
+                }}</span>
                 <span v-if="resolveMessageReplyTime(item)" class="agent-message-meta__time">{{
                   resolveMessageReplyTime(item)
                 }}</span>
@@ -138,7 +148,7 @@
                   <div class="agent-message-error__content">{{ resolveAIErrorMessage(item) }}</div>
                   <el-collapse v-if="item.fallback_reason" class="agent-message-error__detail" accordion>
                     <el-collapse-item :title="t('system.ai.chat.title.error_detail')" :name="String(item.id)">
-                      <pre>{{ item.fallback_reason }}</pre>
+                      <pre>{{ resolvePersistedMessage(item.fallback_reason) }}</pre>
                     </el-collapse-item>
                   </el-collapse>
                 </div>
@@ -147,7 +157,7 @@
                   <slot name="flow-blocks" :message="item" :active-flow-message-id="activeFlowMessageID" />
                   <el-collapse v-if="item.fallback_reason" class="agent-message-error__detail" accordion>
                     <el-collapse-item :title="t('system.ai.chat.title.error_detail')" :name="String(item.id)">
-                      <pre>{{ item.fallback_reason }}</pre>
+                      <pre>{{ resolvePersistedMessage(item.fallback_reason) }}</pre>
                     </el-collapse-item>
                   </el-collapse>
                 </template>
@@ -320,7 +330,15 @@
             </button>
           </div>
         </section>
-        <XSender :key="senderKey" :sending="sending" @submit="handleSubmit" />
+        <XSender
+          :key="senderKey"
+          :sending="sending"
+          :model-providers="modelProviders"
+          :provider-id="providerId"
+          :model-name="modelName"
+          @submit="handleSubmit"
+          @model-change="handleModelChange"
+        />
       </div>
     </template>
   </main>
@@ -337,8 +355,11 @@ import { getCurrentLocale, t } from "@liujitcn/kratos-admin-core";
 import { formatDateTime } from "@liujitcn/kratos-admin-core/format";
 import type { AiAction } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_message";
 import { type AiAttachment, 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 { AiShortcut, AiToolCall } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_tool";
 import { AiMessageStatus } from "@liujitcn/kratos-admin-system/rpc/base/v1/ai_session";
+import { resolvePersistedMessage } from "../../../../utils/persisted-message";
+import { resolveModelDisplayName } from "../modelDisplay";
 import XSender from "./XSender.vue";
 
 // AI Markdown 渲染器依赖较重，仅在真正出现助手消息时再加载。
@@ -474,11 +495,19 @@ const props = defineProps<{
   loadingShortcuts?: boolean;
   /** 当前终端可用快捷入口。 */
   shortcuts?: AiShortcut[];
+  /** 当前启用的供应商和模型。 */
+  modelProviders: AiProviderModelOption[];
+  /** 当前选择的供应商编号。 */
+  providerId: number;
+  /** 当前选择的模型名称。 */
+  modelName: string;
 }>();
 
 const emit = defineEmits<{
   /** 提交输入框内容。 */
   submit: [payload: SubmitPayload];
+  /** 更新当前选择的供应商和模型。 */
+  modelChange: [providerId: number, modelName: string];
   /** 触发消息级操作。 */
   messageAction: [payload: { action: ChatMessageAction; item: ChatMessageItem }];
   /** 提交当前用户消息的文本编辑。 */
@@ -614,6 +643,11 @@ function handleSubmit(payload: SubmitPayload) {
   emit("submit", payload);
 }
 
+/** 转发输入器发出的供应商和模型变更。 */
+function handleModelChange(providerId: number, modelName: string) {
+  emit("modelChange", providerId, modelName);
+}
+
 /** 点击快捷入口时提交对应入口动作。 */
 function handleShortcutClick(shortcut: AiShortcut) {
   emit("submit", {
@@ -792,6 +826,7 @@ function resolveVisibleTools(item: ChatMessageItem) {
 
 /** 生成工具展示名称。 */
 function resolveToolTitle(tool: AiToolCall) {
+  if (tool.name === "web_search") return t("system.ai.chat.value.web_search");
   return tool.title || tool.name || t("system.ai.chat.value.tool");
 }
 

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

@@ -47,13 +47,85 @@
               </button>
             </div>
           </el-popover>
-
           <span class="agent-action-text">{{ actionHintText }}</span>
         </div>
       </template>
 
       <template #action-list>
         <div class="agent-sender-actions">
+          <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-tooltip
             :content="recording ? t('system.ai.chat.action.stop_voice_input') : t('system.ai.chat.action.voice_input')"
             placement="top"
@@ -102,32 +174,81 @@
 
 <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 {
+  ArrowDown,
+  ArrowRight,
+  Check,
+  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 { SubmitPayload } from "../types";
 import { buildAIAttachmentFileCard } from "../attachment";
+import { fallbackModelDisplayName } from "../modelDisplay";
 import { useSpeechRecognition } from "./speech-recognition";
 import type { SpeechRecognitionError } from "./speech-recognition";
 
 const props = defineProps<{
   /** 消息发送加载状态。 */
   sending: boolean;
+  /** 当前可供选择的供应商与模型。 */
+  modelProviders: AiProviderModelOption[];
+  /** 当前选择的供应商编号。 */
+  providerId: number;
+  /** 当前选择的模型名称。 */
+  modelName: string;
 }>();
 
 const emit = defineEmits<{
   /** 提交输入器内容。 */
   submit: [payload: SubmitPayload];
+  /** 更新当前选择的供应商和模型。 */
+  "model-change": [providerId: number, modelName: string];
 }>();
 
 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 => ({
+    providerId: provider.provider_id,
+    label: provider.name,
+    models: provider.models.map(model => ({
+      name: model.model_name,
+      displayName: model.display_name || fallbackModelDisplayName(model.model_name)
+    }))
+  }))
+);
+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 uploading = ref(false);
 const maxAttachmentCount = 6;
 const maxAttachmentSizeMB = 20;
@@ -184,6 +305,24 @@ const isSubmitDisabled = computed(() => {
   return uploading.value || (!inputText.value.trim() && selectedAttachments.value.length === 0);
 });
 
+/** 判断指定供应商与模型是否为当前选择。 */
+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);
+}
+
 /** 读取输入内容并发送给父组件。 */
 function handleSubmit() {
   if (uploading.value) return;
@@ -392,6 +531,13 @@ function resetFileInput() {
     align-items: center;
     justify-content: space-between;
   }
+  :deep(.elx-x-sender__updown-action-list .elx-x-sender__prefix) {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    height: auto;
+    padding-left: 0;
+  }
   :deep(.elx-x-sender__action-list) {
     height: auto;
   }
@@ -410,10 +556,61 @@ function resetFileInput() {
 }
 .agent-prefix-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 10px;
   align-items: center;
+  width: 100%;
   min-height: 36px;
 }
+.agent-model-selector {
+  display: inline-flex;
+  flex: 0 1 auto;
+  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;
+  background: var(--admin-page-card-bg);
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--admin-page-radius);
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+  &: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;
   gap: 8px;
@@ -504,11 +701,120 @@ 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 {
     gap: 8px;
   }
+  .agent-model-selector {
+    width: clamp(128px, calc(100vw - 220px), 180px);
+  }
   .agent-action-text {
     display: none;
   }