refactor: streamline AI agent options handling and add disabled state to combobox options

web/app/dashboard/channels/_components/edit.tsx

@@ -417,14 +417,10 @@ function ChannelFormBody({
   ])
 
   const selectedAIAgent = aiAgents.find((item) => String(item.id) === aiAgentId)
-  const availableAIAgents = aiAgents.filter(
-    (item) => isAgentChannelBindable(item) || String(item.id) === aiAgentId
-  )
-  const aiAgentOptions = availableAIAgents.map((item) => ({
+  const aiAgentOptions = aiAgents.map((item) => ({
     value: String(item.id),
-    label: isAgentChannelBindable(item)
-      ? `${item.name} · Revision #${item.publishedRevisionId}`
-      : `${item.name} · 未发布`,
+    label: isAgentChannelBindable(item) ? item.name : `${item.name} · 未发布`,
+    disabled: !isAgentChannelBindable(item),
   }))
   const wxWorkKFAccountOptions = wxWorkKFAccounts.map((item) => ({
     value: item.openKfId,
@@ -502,7 +498,7 @@ function ChannelFormBody({
       open={true}
       onOpenChange={onOpenChange}
       title={itemId ? t("channel.editTitle") : t("channel.createTitle")}
-      size="lg"
+      size="xl"
       allowFullscreen
       footer={
         <>

web/components/option-combobox.tsx

@@ -24,6 +24,7 @@ import { useI18n } from "@/i18n/provider"
 export type ComboboxOption = {
   value: string
   label: string
+  disabled?: boolean
   group?: string
   subtitle?: string
   description?: string
@@ -90,6 +91,10 @@ export function OptionCombobox(props: OptionComboboxProps) {
   )
 
   function selectOption(optionValue: string) {
+    const option = options.find((item) => item.value === optionValue)
+    if (option?.disabled) {
+      return
+    }
     if (props.multiple) {
       props.onValuesChange(
         props.values.includes(optionValue)
@@ -132,6 +137,7 @@ export function OptionCombobox(props: OptionComboboxProps) {
                 <CommandItem
                   key={option.value}
                   value={`${option.group ?? ""} ${option.label} ${option.value} ${option.subtitle ?? ""} ${option.description ?? ""}`}
+                  disabled={option.disabled}
                   onSelect={() => selectOption(option.value)}
                 >
                   <div className="flex min-w-0 flex-1 items-center justify-between gap-2">