@xpert-ai/chatkit-ui 0.3.2 → 0.3.4

package/dist/index.cjs

@@ -88,6 +88,12 @@ var THEME_PANEL_RADIUS_PRESET_CLASS = {
   soft: "rounded-lg",
   sharp: "rounded-none"
 };
+var THEME_COMPOSER_INPUT_RADIUS_PRESET_CLASS = {
+  pill: "rounded-3xl",
+  round: "rounded-xl",
+  soft: "rounded-lg",
+  sharp: "rounded-none"
+};
 var THEME_MENU_ITEM_RADIUS_PRESET_CLASS = {
   pill: "rounded-xl",
   round: "rounded-lg",
@@ -100,6 +106,13 @@ function getRoundedClass(themeRadius, fallback = "rounded-full") {
 function getPanelRoundedClass(themeRadius, fallback = "soft") {
   return THEME_PANEL_RADIUS_PRESET_CLASS[themeRadius ?? fallback];
 }
+function getComposerInputRoundedClass(themeRadius, options = {}) {
+  const radius = themeRadius ?? options.fallback ?? "round";
+  if (radius === "pill" && options.isEmpty && !options.isStacked) {
+    return "rounded-full";
+  }
+  return THEME_COMPOSER_INPUT_RADIUS_PRESET_CLASS[radius];
+}
 function getMenuItemRoundedClass(themeRadius, fallback = "soft") {
   return THEME_MENU_ITEM_RADIUS_PRESET_CLASS[themeRadius ?? fallback];
 }
@@ -281,7 +294,7 @@ var import_react2 = require("react");
 
 // src/providers/ParentMessenger.tsx
 var import_react = require("react");
-var import_chatkit_types2 = require("@xpert-ai/chatkit-types");
+var import_chatkit_types3 = require("@xpert-ai/chatkit-types");
 
 // src/hooks/useStream.ts
 var streamRef = { current: null };
@@ -295,6 +308,9 @@ function useStreamManager() {
   };
 }
 
+// src/lib/message-metadata.ts
+var import_chatkit_types2 = require("@xpert-ai/chatkit-types");
+
 // src/lib/references.ts
 function isObjectLike(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -591,6 +607,33 @@ function buildHumanMessageInputPayload(source) {
   };
 }
 
+// src/lib/message-metadata.ts
+function isObjectRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isStringArray(value) {
+  return Array.isArray(value) && value.every((item) => typeof item === "string");
+}
+function isSkillSelection(value) {
+  if (!isObjectRecord(value)) {
+    return false;
+  }
+  return isStringArray(value.ids) && (value.workspaceId === void 0 || typeof value.workspaceId === "string");
+}
+function isNodeKeySelection(value) {
+  return isObjectRecord(value) && isStringArray(value.nodeKeys);
+}
+function isRuntimeCapabilitiesSelectionSet(value) {
+  return isObjectRecord(value) && isSkillSelection(value.skills) && isNodeKeySelection(value.plugins) && (value.subAgents === void 0 || isNodeKeySelection(value.subAgents));
+}
+function isRuntimeCapabilitiesSelection(value) {
+  if (!isObjectRecord(value)) {
+    return false;
+  }
+  const selection = value;
+  return selection.mode === "allowlist" && isRuntimeCapabilitiesSelectionSet(selection) && (selection.recommended === void 0 || isRuntimeCapabilitiesSelectionSet(selection.recommended));
+}
+
 // src/providers/ParentMessenger.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var handledSendUserMessageNonces = /* @__PURE__ */ new Set();
@@ -694,11 +737,11 @@ function ParentMessengerProvider({
           handledSendUserMessageEvents.add(event);
         }
         const params = payload.data;
-        const prompt = typeof params.text === "string" ? params.text.trim() : typeof params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.input === "string" ? params.state[import_chatkit_types2.STATE_VARIABLE_HUMAN].input.trim() : "";
+        const prompt = typeof params.text === "string" ? params.text.trim() : typeof params.state?.[import_chatkit_types3.STATE_VARIABLE_HUMAN]?.input === "string" ? params.state[import_chatkit_types3.STATE_VARIABLE_HUMAN].input.trim() : "";
         const references = normalizeReferences(
-          params.references ?? params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.references
+          params.references ?? params.state?.[import_chatkit_types3.STATE_VARIABLE_HUMAN]?.references
         );
-        const referenceComposition = params.referenceComposition ?? params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.referenceComposition;
+        const referenceComposition = params.referenceComposition ?? params.state?.[import_chatkit_types3.STATE_VARIABLE_HUMAN]?.referenceComposition;
         const humanInput = buildHumanMessageInputPayload({
           content: prompt,
           references,
@@ -710,12 +753,14 @@ function ParentMessengerProvider({
           }
           return;
         }
-        const requestHumanInput = params.planMode === true || params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.planMode === true || params.runtimeCapabilities || params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.runtimeCapabilities ? {
+        const runtimeCapabilitiesCandidate = params.runtimeCapabilities ?? params.state?.[import_chatkit_types3.STATE_VARIABLE_HUMAN]?.runtimeCapabilities;
+        const runtimeCapabilities = isRuntimeCapabilitiesSelection(
+          runtimeCapabilitiesCandidate
+        ) ? runtimeCapabilitiesCandidate : void 0;
+        const requestHumanInput = params.planMode === true || params.state?.[import_chatkit_types3.STATE_VARIABLE_HUMAN]?.planMode === true || runtimeCapabilities ? {
           ...humanInput,
-          ...params.planMode === true || params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.planMode === true ? { planMode: true } : {},
-          ...params.runtimeCapabilities ? { runtimeCapabilities: params.runtimeCapabilities } : params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.runtimeCapabilities ? {
-            runtimeCapabilities: params.state[import_chatkit_types2.STATE_VARIABLE_HUMAN].runtimeCapabilities
-          } : {}
+          ...params.planMode === true || params.state?.[import_chatkit_types3.STATE_VARIABLE_HUMAN]?.planMode === true ? { planMode: true } : {},
+          ...runtimeCapabilities ? { runtimeCapabilities } : {}
         } : humanInput;
         const newMessage = {
           id: createMessageId(),
@@ -723,7 +768,8 @@ function ParentMessengerProvider({
           content: prompt,
           submittedInput: humanInput.input,
           ...humanInput.referenceComposition ? { referenceComposition: humanInput.referenceComposition } : {},
-          ...references.length > 0 ? { references } : {}
+          ...references.length > 0 ? { references } : {},
+          ...runtimeCapabilities ? { runtimeCapabilities } : {}
         };
         const stream = streamRef2.current;
         const activeFollowUpMode = stream?.isLoading ? params.followUpMode && params.followUpMode !== "default" ? params.followUpMode : stream.followUpBehavior ?? "queue" : void 0;
@@ -1013,30 +1059,6 @@ function resolveUsedContextSize(options) {
   return normalizeContextUsageNumber(options.fallbackUsedTokens) ?? 0;
 }
 
-// src/lib/message-metadata.ts
-var import_chatkit_types3 = require("@xpert-ai/chatkit-types");
-function isObjectRecord(value) {
-  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
-}
-function isStringArray(value) {
-  return Array.isArray(value) && value.every((item) => typeof item === "string");
-}
-function isSkillSelection(value) {
-  if (!isObjectRecord(value)) {
-    return false;
-  }
-  return isStringArray(value.ids) && (value.workspaceId === void 0 || typeof value.workspaceId === "string");
-}
-function isNodeKeySelection(value) {
-  return isObjectRecord(value) && isStringArray(value.nodeKeys);
-}
-function isRuntimeCapabilitiesSelection(value) {
-  if (!isObjectRecord(value)) {
-    return false;
-  }
-  return value.mode === "allowlist" && isSkillSelection(value.skills) && isNodeKeySelection(value.plugins) && (value.subAgents === void 0 || isNodeKeySelection(value.subAgents));
-}
-
 // src/lib/follow-ups.ts
 function getComposerFollowUpShortcutLabels(queueShortcutLabel) {
   return {
@@ -2220,6 +2242,39 @@ function uniqueStrings(values) {
     new Set(values.map((value) => value.trim()).filter(Boolean))
   );
 }
+function getRuntimeCapabilitiesSelectionSet(selection) {
+  return {
+    skills: {
+      ...selection?.skills.workspaceId ? { workspaceId: selection.skills.workspaceId } : {},
+      ids: uniqueStrings(selection?.skills.ids ?? [])
+    },
+    plugins: {
+      nodeKeys: uniqueStrings(selection?.plugins.nodeKeys ?? [])
+    },
+    subAgents: {
+      nodeKeys: uniqueStrings(selection?.subAgents?.nodeKeys ?? [])
+    }
+  };
+}
+function mergeRuntimeCapabilitiesSelectionSets(capabilities, ...sets) {
+  const workspaceId = sets.find((set) => set?.skills.workspaceId)?.skills.workspaceId ?? capabilities.skills[0]?.workspaceId;
+  return {
+    skills: {
+      ...workspaceId ? { workspaceId } : {},
+      ids: uniqueStrings(sets.flatMap((set) => set?.skills.ids ?? []))
+    },
+    plugins: {
+      nodeKeys: uniqueStrings(
+        sets.flatMap((set) => set?.plugins.nodeKeys ?? [])
+      )
+    },
+    subAgents: {
+      nodeKeys: uniqueStrings(
+        sets.flatMap((set) => set?.subAgents?.nodeKeys ?? [])
+      )
+    }
+  };
+}
 function createEmptyRuntimeCapabilitiesSelection(capabilities) {
   const workspaceId = capabilities?.skills[0]?.workspaceId;
   return {
@@ -2255,25 +2310,56 @@ function createDefaultRuntimeCapabilitiesSelection(capabilities) {
   };
 }
 function mergeRuntimeCapabilitiesSelections(capabilities, ...selections) {
-  const workspaceId = selections.find((selection) => selection?.skills.workspaceId)?.skills.workspaceId ?? capabilities.skills[0]?.workspaceId;
+  const merged = mergeRuntimeCapabilitiesSelectionSets(
+    capabilities,
+    ...selections.map(
+      (selection) => selection ? getRuntimeCapabilitiesSelectionSet(selection) : null
+    )
+  );
+  const recommended = mergeRuntimeCapabilitiesSelectionSets(
+    capabilities,
+    ...selections.map((selection) => selection?.recommended)
+  );
   return {
     mode: "allowlist",
-    skills: {
-      ...workspaceId ? { workspaceId } : {},
-      ids: uniqueStrings(
-        selections.flatMap((selection) => selection?.skills.ids ?? [])
-      )
-    },
-    plugins: {
-      nodeKeys: uniqueStrings(
-        selections.flatMap((selection) => selection?.plugins.nodeKeys ?? [])
-      )
-    },
-    subAgents: {
-      nodeKeys: uniqueStrings(
-        selections.flatMap((selection) => selection?.subAgents?.nodeKeys ?? [])
-      )
-    }
+    ...merged,
+    ...hasRuntimeCapabilitySelectionSet(recommended) ? { recommended } : {}
+  };
+}
+function createRuntimeCapabilitiesForSubmit({
+  capabilities,
+  available,
+  recommended
+}) {
+  const recommendedSet = mergeRuntimeCapabilitiesSelectionSets(
+    capabilities,
+    recommended,
+    recommended?.recommended
+  );
+  const merged = mergeRuntimeCapabilitiesSelectionSets(
+    capabilities,
+    available,
+    recommendedSet
+  );
+  return {
+    mode: "allowlist",
+    ...merged,
+    ...hasRuntimeCapabilitySelectionSet(recommendedSet) ? { recommended: recommendedSet } : {}
+  };
+}
+function getRecommendedRuntimeCapabilitiesSelection(selection) {
+  if (!selection?.recommended) {
+    return null;
+  }
+  return {
+    mode: "allowlist",
+    ...getRuntimeCapabilitiesSelectionSet(selection.recommended)
+  };
+}
+function getAvailableRuntimeCapabilitiesSelection(selection) {
+  return {
+    mode: "allowlist",
+    ...getRuntimeCapabilitiesSelectionSet(selection)
   };
 }
 function toggleRuntimeCapabilitySelection(selection, type, id, selected) {
@@ -2332,6 +2418,12 @@ function getRuntimeCapabilityOptions(capabilities) {
     }))
   ];
 }
+function hasRuntimeCapabilitySelectionSet(selection) {
+  if (!selection) {
+    return false;
+  }
+  return selection.skills.ids.length > 0 || selection.plugins.nodeKeys.length > 0 || (selection.subAgents?.nodeKeys.length ?? 0) > 0;
+}
 function isRuntimeCapabilitySelected(selection, type, id) {
   if (type === "skill") {
     return selection.skills.ids.includes(id);
@@ -6048,7 +6140,7 @@ function createSlashPaletteOptions({
   runtimeCapabilitiesReady,
   runtimeCapabilityOptions,
   runtimeCapabilities,
-  effectiveRuntimeCapabilitiesForSubmit
+  recommendedRuntimeCapabilities
 }) {
   if (!palette) {
     return [];
@@ -6058,7 +6150,7 @@ function createSlashPaletteOptions({
   const expandedCapabilityTypes = new Set(
     palette.expandedCapabilityTypes ?? []
   );
-  const selection = effectiveRuntimeCapabilitiesForSubmit ?? createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities);
+  const selection = recommendedRuntimeCapabilities ?? createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities);
   const getCapabilityOptions = (capabilityTypes, capabilityQuery = query) => runtimeCapabilitiesReady ? runtimeCapabilityOptions.filter(
     (option) => matchesCapability(option, capabilityQuery, capabilityTypes) && !isRuntimeCapabilitySelected(selection, option.type, option.id)
   ) : [];
@@ -6294,7 +6386,7 @@ function useSlashCommands({
   runtimeCapabilities,
   runtimeCapabilitiesReady,
   runtimeCapabilityOptions,
-  effectiveRuntimeCapabilitiesForSubmit,
+  recommendedRuntimeCapabilities,
   draft,
   palette,
   setPalette,
@@ -6339,12 +6431,12 @@ function useSlashCommands({
       runtimeCapabilitiesReady,
       runtimeCapabilityOptions,
       runtimeCapabilities,
-      effectiveRuntimeCapabilitiesForSubmit
+      recommendedRuntimeCapabilities
     }),
     [
-      effectiveRuntimeCapabilitiesForSubmit,
       localizedResolvedCommands,
       palette,
+      recommendedRuntimeCapabilities,
       runtimeCapabilities,
       runtimeCapabilitiesReady,
       runtimeCapabilityOptions
@@ -7880,6 +7972,7 @@ var TOOL_GROUP_TOKEN_CATEGORY = {
   tool: "tools",
   tools: "tools"
 };
+var TOOL_CALL_ROW_TEXT_CLASS = "text-xs leading-5 in-data-[density=compact]:text-[11px] in-data-[density=compact]:leading-4 in-data-[density=spacious]:text-[13px] in-data-[density=spacious]:leading-5";
 var TOOL_CALL_OUTPUT_RENDERERS = {};
 function normalizeStepCategory(category) {
   if (typeof category !== "string" || category.trim() === "") {
@@ -8034,15 +8127,6 @@ function getToolGroupCategoryCounts(items) {
     return counts;
   }, {});
 }
-function getEffectiveToolGroupDisplayStatus(items, isThreadRunning) {
-  if (items.some((item) => {
-    const data = getToolStepData(item);
-    return getEffectiveToolStepStatus(data, isThreadRunning) === "fail" || Boolean(data.error);
-  })) {
-    return "fail";
-  }
-  return "success";
-}
 function getToolActivityLabel(content, language, statusOverride) {
   const data = getToolStepData(content);
   const status = statusOverride ?? data.status;
@@ -8442,8 +8526,6 @@ function ToolCallRowContent({
   const { i18n: i18n2 } = useChatkitTranslation();
   const data = getToolStepData(content);
   const status = getEffectiveToolStepStatus(data, isThreadRunning);
-  const itemConfig = status ? toolStatusConfig[status] : null;
-  const ItemStatusIcon = itemConfig?.icon;
   const hasError = status === "fail" || Boolean(data.error);
   const label = getToolActivityLabel(content, i18n2.language, status);
   const detailsId = React28.useId();
@@ -8467,7 +8549,8 @@ function ToolCallRowContent({
       {
         type: "button",
         className: cn(
-          "group/tool-call flex w-full min-w-0 items-center gap-2 text-left text-sm leading-6 text-muted-foreground",
+          "group/tool-call flex w-full min-w-0 items-center gap-2 text-left text-muted-foreground",
+          TOOL_CALL_ROW_TEXT_CLASS,
           hasDetails && "cursor-pointer hover:text-foreground",
           hasError && "text-destructive hover:text-destructive"
         ),
@@ -8478,16 +8561,7 @@ function ToolCallRowContent({
           if (hasDetails) setIsExpanded((prev) => !prev);
         },
         children: [
-          status === "running" && ItemStatusIcon ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            ItemStatusIcon,
-            {
-              className: cn(
-                "h-3.5 w-3.5 shrink-0",
-                itemConfig?.iconClass,
-                "animate-spin"
-              )
-            }
-          ) : status ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          status ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             ToolStepIcon,
             {
               data,
@@ -8499,7 +8573,17 @@ function ToolCallRowContent({
               )
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "min-w-0 truncate", title: label, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            "span",
+            {
+              className: cn(
+                "min-w-0 truncate",
+                status === "running" && "ck-tool-call-running-text"
+              ),
+              title: label,
+              children: label
+            }
+          ),
           durationLabel ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/80", children: durationLabel }) : null,
           hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             import_lucide_react16.ChevronRight,
@@ -8528,7 +8612,6 @@ function ToolComponentGroup({
 }) {
   const { t } = useChatkitTranslation();
   const contentId = React28.useId();
-  const groupStatus = getEffectiveToolGroupDisplayStatus(items, isThreadRunning);
   const [isExpanded, setIsExpanded] = React28.useState(!hasFollowingItem);
   const categoryCounts = getToolGroupCategoryCounts(items);
   const categorySummary = TOOL_GROUP_CATEGORY_ORDER.flatMap((category) => {
@@ -8541,8 +8624,8 @@ function ToolComponentGroup({
       )
     ];
   }).join(t("message.toolGroup.separator"));
-  const summary = `${t(`message.toolGroup.status.${groupStatus}`)} ${categorySummary}`;
-  const config = toolStatusConfig[groupStatus];
+  const summary = `${t("message.toolGroup.status.success")} ${categorySummary}`;
+  const config = toolStatusConfig.success;
   const StatusIcon = config.icon;
   React28.useEffect(() => {
     setIsExpanded(!hasFollowingItem);
@@ -10506,10 +10589,12 @@ function splitByAvailability(values, availableValues) {
   }
   return { found, missing };
 }
-function hasMissingRuntimeCapabilityReferences(missing) {
-  return missing.skillIds.length > 0 || missing.pluginNodeKeys.length > 0 || missing.subAgentNodeKeys.length > 0;
+function uniqueStrings2(values) {
+  return Array.from(
+    new Set(values.map((value) => value.trim()).filter(Boolean))
+  );
 }
-function getRuntimeCapabilitiesSelectionAvailability(selection, capabilities) {
+function getAvailableSelectionSet(selection, capabilities) {
   const skillIds = splitByAvailability(
     selection.skills.ids,
     capabilities.skills.map((skill) => skill.id)
@@ -10543,6 +10628,42 @@ function getRuntimeCapabilitiesSelectionAvailability(selection, capabilities) {
     }
   };
 }
+function hasMissingRuntimeCapabilityReferences(missing) {
+  return missing.skillIds.length > 0 || missing.pluginNodeKeys.length > 0 || missing.subAgentNodeKeys.length > 0;
+}
+function getRuntimeCapabilitiesSelectionAvailability(selection, capabilities) {
+  const available = getAvailableSelectionSet(selection, capabilities);
+  const recommended = selection.recommended ? getAvailableSelectionSet(selection.recommended, capabilities) : null;
+  return {
+    selection: {
+      mode: "allowlist",
+      skills: available.selection.skills,
+      plugins: available.selection.plugins,
+      subAgents: available.selection.subAgents,
+      ...recommended && hasRuntimeCapabilitySelectionSet(recommended.selection) ? {
+        recommended: {
+          skills: recommended.selection.skills,
+          plugins: recommended.selection.plugins,
+          subAgents: recommended.selection.subAgents
+        }
+      } : {}
+    },
+    missing: {
+      skillIds: uniqueStrings2([
+        ...available.missing.skillIds,
+        ...recommended?.missing.skillIds ?? []
+      ]),
+      pluginNodeKeys: uniqueStrings2([
+        ...available.missing.pluginNodeKeys,
+        ...recommended?.missing.pluginNodeKeys ?? []
+      ]),
+      subAgentNodeKeys: uniqueStrings2([
+        ...available.missing.subAgentNodeKeys,
+        ...recommended?.missing.subAgentNodeKeys ?? []
+      ])
+    }
+  };
+}
 async function findConversationByThreadId(client, threadId) {
   const normalizedThreadId = threadId.trim();
   if (!normalizedThreadId) {
@@ -10613,7 +10734,9 @@ async function persistConversationRuntimeCapabilities({
   await client.conversations.update(conversation.id, {
     options: {
       ...conversation.options ?? {},
-      runtimeCapabilities: availability.selection
+      runtimeCapabilities: getAvailableRuntimeCapabilitiesSelection(
+        availability.selection
+      )
     }
   });
   return {
@@ -11314,6 +11437,11 @@ function Chat({
   const trimmedDraft = draft.trim();
   const hasReferences = references.length > 0;
   const isComposerStacked = planModeEnabled || Boolean(selectedTool);
+  const isComposerInputEmpty = getComposerEditingLength(composerParts) === 0;
+  const composerInputRoundedClass = getComposerInputRoundedClass(theme.radius, {
+    isEmpty: isComposerInputEmpty,
+    isStacked: isComposerStacked
+  });
   const pendingFollowUps = React43.useMemo(
     () => [...stream.pendingFollowUps ?? []].sort(
       (a, b) => a.createdAt - b.createdAt
@@ -11336,19 +11464,6 @@ function Chat({
     ) : null,
     [runtimeCapabilities, runtimeCapabilitiesReady, sessionRuntimeCapabilities]
   );
-  const effectiveRuntimeCapabilitiesForSubmit = React43.useMemo(
-    () => runtimeCapabilitiesReady && runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
-      runtimeCapabilities,
-      sessionRuntimeCapabilities,
-      runRuntimeCapabilities
-    ) : null,
-    [
-      runtimeCapabilities,
-      runtimeCapabilitiesReady,
-      runRuntimeCapabilities,
-      sessionRuntimeCapabilities
-    ]
-  );
   const runRuntimeCapabilityOptions = React43.useMemo(
     () => runtimeCapabilityOptions.filter(
       (option) => isRuntimeCapabilitySelected(
@@ -11997,13 +12112,20 @@ function Chat({
       if (!humanInput) {
         return;
       }
-      const runtimeCapabilitiesForSubmit = submitOptions.runtimeCapabilities && runtimeCapabilities && runtimeCapabilitiesReady ? mergeRuntimeCapabilitiesSelections(
+      const recommendedRuntimeCapabilitiesForSubmit = submitOptions.runtimeCapabilities && runtimeCapabilities && runtimeCapabilitiesReady ? mergeRuntimeCapabilitiesSelections(
         runtimeCapabilities,
-        effectiveRuntimeCapabilitiesForSubmit,
+        runRuntimeCapabilities,
         submitOptions.runtimeCapabilities
-      ) : effectiveRuntimeCapabilitiesForSubmit;
+      ) : runRuntimeCapabilities;
+      const runtimeCapabilitiesForSubmit = runtimeCapabilities && runtimeCapabilitiesReady ? createRuntimeCapabilitiesForSubmit({
+        capabilities: runtimeCapabilities,
+        available: effectiveSessionRuntimeCapabilities,
+        recommended: recommendedRuntimeCapabilitiesForSubmit
+      }) : null;
       const runtimeCapabilityOptionsForMessage = getSelectedRuntimeCapabilityOptions(
-        runtimeCapabilitiesForSubmit,
+        getRecommendedRuntimeCapabilitiesSelection(
+          runtimeCapabilitiesForSubmit
+        ),
         runtimeCapabilityOptions
       );
       const displayContent = submitOptions.displayText || contentToSubmit || (referencesToSend ? t("chat.referencedContentOnly") : "");
@@ -12079,7 +12201,6 @@ function Chat({
       setRuntimeCapabilityPalette(null);
     },
     [
-      effectiveRuntimeCapabilitiesForSubmit,
       effectiveSessionRuntimeCapabilities,
       isSendDisabled,
       options?.request,
@@ -12088,6 +12209,7 @@ function Chat({
       runtimeCapabilities,
       runtimeCapabilitiesReady,
       runtimeCapabilityOptions,
+      runRuntimeCapabilities,
       scrollToBottom,
       selectedTool,
       commitComposerParts,
@@ -12151,7 +12273,7 @@ function Chat({
     runtimeCapabilities,
     runtimeCapabilitiesReady,
     runtimeCapabilityOptions,
-    effectiveRuntimeCapabilitiesForSubmit,
+    recommendedRuntimeCapabilities: runRuntimeCapabilities,
     draft,
     palette: runtimeCapabilityPalette,
     setPalette: setRuntimeCapabilityPalette,
@@ -12855,7 +12977,9 @@ function Chat({
               const humanReferences = humanMessage.references ?? [];
               const humanAttachments = humanMessage.attachments ?? [];
               const humanRuntimeCapabilityOptions = message.type === "human" ? humanMessage.runtimeCapabilityOptions ?? getSelectedRuntimeCapabilityOptions(
-                humanMessage.runtimeCapabilities,
+                getRecommendedRuntimeCapabilitiesSelection(
+                  humanMessage.runtimeCapabilities
+                ),
                 runtimeCapabilityOptions
               ) : [];
               const hasHumanAttachments = message.type === "human" && humanAttachments.length > 0;
@@ -13216,12 +13340,12 @@ function Chat({
               "data-slot": "composer-input-shell",
               "data-layout": isComposerStacked ? "stacked" : "inline",
               className: cn(
-                "relative flex flex-1 overflow-hidden rounded-xl",
+                "relative flex flex-1 overflow-hidden",
                 "bg-background border border-border shadow-sm",
                 isComposerStacked ? "min-h-[5.5rem] px-1.5 pt-1.5 pb-12" : "min-h-12 px-1.5 py-1",
                 "focus-within:border-muted-foreground/30 focus-within:shadow-md",
-                "transition-[min-height,padding,box-shadow,border-color] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
-                getRoundedClass(theme.radius)
+                "transition-[min-height,padding,border-radius,box-shadow,border-color] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
+                composerInputRoundedClass
               ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(