Merge pull request Stack-Cairn#9 from Stack-Cairn/features

Features

Author: su-fen

crates/agent-gateway/web/src/App.tsx

@@ -34,6 +34,7 @@ import { McpHubPage } from "@/pages/mcp-hub/McpHubPage";
 import type { SectionId } from "@/pages/settings/types";
 import { useChatSkills } from "@/pages/chat/useChatSkills";
 import { mergeAlwaysEnabledSkillNames } from "@/lib/skills";
+import { buildModelOptions } from "@/lib/chat/chatPageHelpers";
 import { SettingsPage } from "@/pages/SettingsPage";
 import {
   findProviderModelConfig,
@@ -53,7 +54,7 @@ import {
   redactSettingsForWebStorage,
   type GatewaySettingsSyncPayload,
 } from "@/lib/settings/sync";
-import type { ModelOption } from "@/lib/providers/llm";
+import { toModelValue } from "@/lib/providers/llm";
 
 import {
   getGatewayWebSocketClient,
@@ -248,7 +249,6 @@ type SendChatOptions = {
 
 type SendChatFn = (message: string, options?: SendChatOptions) => Promise<void>;
 
-const MODEL_VALUE_SEPARATOR = "::";
 const PROTECTED_DRAFT_CONVERSATION = "__protected_draft__";
 const HISTORY_DETAIL_INITIAL_MAX_MESSAGES = 360;
 const HISTORY_SWITCH_OVERLAY_MIN_MS = 260;
@@ -343,44 +343,6 @@ function isTerminalChatEvent(event: ChatEvent) {
   return event.type === "done" || event.type === "error";
 }
 
-function toModelValue(model: SelectedModel): string {
-  return `${model.customProviderId}${MODEL_VALUE_SEPARATOR}${model.model}`;
-}
-
-function buildModelOptions(
-  providers: ModelProviderSource[],
-  selectedModel?: SelectedModel,
-): ModelOption[] {
-  const options: ModelOption[] = [];
-
-  for (const provider of providers) {
-    for (const model of provider.activeModels) {
-      options.push({
-        providerType: provider.type,
-        providerName: provider.name,
-        model,
-        value: `${provider.id}${MODEL_VALUE_SEPARATOR}${model}`,
-        label: model,
-      });
-    }
-  }
-
-  if (!selectedModel) {
-    return options;
-  }
-
-  const selectedValue = toModelValue(selectedModel);
-  const selectedIndex = options.findIndex((item) => item.value === selectedValue);
-  if (selectedIndex <= 0) {
-    return options;
-  }
-
-  const next = [...options];
-  const [selected] = next.splice(selectedIndex, 1);
-  next.unshift(selected);
-  return next;
-}
-
 function buildGatewaySelectedModel(
   selectedModel: SelectedModel | undefined,
   providers: ModelProviderSource[],
@@ -3957,11 +3919,10 @@ export default function App() {
   const isAgentMode = settings.system.executionMode !== "text";
   const isAgentDevExecutionMode = isAgentDevMode(settings.system.executionMode);
 
-  const modelOptions = useMemo(
-    () => buildModelOptions(activeProviders, settings.selectedModel),
-    [activeProviders, settings.selectedModel],
-  );
-  const selectedValue = settings.selectedModel ? toModelValue(settings.selectedModel) : undefined;
+  const modelOptions = useMemo(() => buildModelOptions(settings), [settings]);
+  const selectedValue = settings.selectedModel
+    ? toModelValue(settings.selectedModel.customProviderId, settings.selectedModel.model)
+    : undefined;
 
   const skillsEnabled = settings.skills.enabled && isAgentMode;
   const selectedSkillNames = useMemo(

crates/agent-gateway/web/src/components/Markdown.tsx

@@ -1,4 +1,4 @@
-import { memo, type ComponentProps } from "react";
+import { memo, useLayoutEffect, useRef, type ComponentProps } from "react";
 import { createPortal } from "react-dom";
 import { cjk } from "@streamdown/cjk";
 import { code } from "@streamdown/code";
@@ -82,6 +82,87 @@ export const markdownReadOnlyComponents: Components = {
   ...markdownComponents,
   a: MarkdownReadOnlyLink,
 };
+
+const codeBlockSelector = '[data-streamdown="code-block"]';
+const codeCopyButtonSelector =
+  '[data-streamdown="code-block"] [data-streamdown="code-block-copy-button"]';
+const codeBlockBodySelector = '[data-streamdown="code-block-body"] pre';
+
+function enableCodeCopyButtons(root: HTMLElement) {
+  root.querySelectorAll<HTMLButtonElement>(codeCopyButtonSelector).forEach((button) => {
+    if (!button.disabled && !button.hasAttribute("disabled")) return;
+    button.disabled = false;
+    button.removeAttribute("disabled");
+  });
+}
+
+function getCodeBlockText(button: HTMLButtonElement) {
+  const codeBlock = button.closest(codeBlockSelector);
+  const codeBody = codeBlock?.querySelector<HTMLElement>(codeBlockBodySelector);
+  return codeBody?.textContent ?? null;
+}
+
+async function copyCodeBlockText(text: string) {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (error) {
+    console.error("Failed to copy code block", error);
+  }
+}
+
+function useEnabledCodeCopyButtons(enabled: boolean) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    if (!enabled) return;
+
+    const root = rootRef.current;
+    if (!root) return;
+
+    // Streamdown disables copy controls while animating, but the copy handler
+    // can safely copy the current partial code during streaming.
+    enableCodeCopyButtons(root);
+
+    const handleCopyClick = (event: MouseEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+
+      const button = target.closest(codeCopyButtonSelector);
+      if (!(button instanceof HTMLButtonElement) || !root.contains(button)) return;
+
+      const codeText = getCodeBlockText(button);
+      if (codeText === null) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      void copyCodeBlockText(codeText);
+    };
+
+    root.addEventListener("click", handleCopyClick, true);
+
+    let observer: MutationObserver | undefined;
+    if (typeof MutationObserver !== "undefined") {
+      observer = new MutationObserver(() => {
+        enableCodeCopyButtons(root);
+      });
+      observer.observe(root, {
+        attributes: true,
+        attributeFilter: ["disabled"],
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    return () => {
+      root.removeEventListener("click", handleCopyClick, true);
+      observer?.disconnect();
+    };
+  }, [enabled]);
+
+  return rootRef;
+}
+
 const streamdownTranslations = {
   close: "关闭",
   copied: "已复制",
@@ -215,46 +296,51 @@ export const Markdown = memo(function Markdown(props: MarkdownProps) {
     showCaret = isAnimating,
     readOnly = false,
   } = props;
+  const useStreamingMode = isAnimating;
+  const isActivelyStreaming = showCaret;
+  const codeCopyRootRef = useEnabledCodeCopyButtons(!readOnly && isActivelyStreaming);
   // Keep Streamdown's caret pseudo-element mounted while in streaming mode;
   // `showCaret` only toggles visibility so the final token does not reflow.
-  const keepCaretSlot = isAnimating;
+  const keepCaretSlot = useStreamingMode;
 
   return (
-    <Streamdown
-      className={cn(
-        "chat-markdown max-w-none break-words",
-        isAnimating ? "chat-markdown--streaming" : "chat-markdown--static",
-        // Streamdown's memo equality does not include `caret` in its check,
-        // so toggling the caret prop alone does not invalidate the render.
-        // Mirror the visibility into a className modifier to force a re-render
-        // that recomputes the inline `--streamdown-caret` style.
-        showCaret ? "chat-markdown--caret-on" : "chat-markdown--caret-off",
-        className,
-      )}
-      plugins={streamdownPlugins}
-      remarkPlugins={remarkPlugins}
-      components={readOnly ? markdownReadOnlyComponents : markdownComponents}
-      mode={isAnimating ? "streaming" : "static"}
-      dir="auto"
-      parseIncompleteMarkdown
-      normalizeHtmlIndentation
-      isAnimating={isAnimating}
-      caret={keepCaretSlot ? "block" : undefined}
-      animated={false}
-      linkSafety={{
-        enabled: !readOnly,
-        renderModal: (modalProps) => <ExternalLinkModal {...modalProps} />,
-      }}
-      {...(isAnimating ? {} : { shikiTheme: ["github-light", "github-dark"] as const })}
-      controls={{
-        code: { copy: !readOnly, download: false },
-        mermaid: { copy: !readOnly, download: false, fullscreen: !readOnly, panZoom: !readOnly },
-        table: { copy: !readOnly, download: false, fullscreen: !readOnly },
-      }}
-      translations={streamdownTranslations}
-    >
-      {content}
-    </Streamdown>
+    <div ref={codeCopyRootRef} style={{ display: "contents" }}>
+      <Streamdown
+        className={cn(
+          "chat-markdown max-w-none break-words",
+          useStreamingMode ? "chat-markdown--streaming" : "chat-markdown--static",
+          // Streamdown's memo equality does not include `caret` in its check,
+          // so toggling the caret prop alone does not invalidate the render.
+          // Mirror the visibility into a className modifier to force a re-render
+          // that recomputes the inline `--streamdown-caret` style.
+          showCaret ? "chat-markdown--caret-on" : "chat-markdown--caret-off",
+          className,
+        )}
+        plugins={streamdownPlugins}
+        remarkPlugins={remarkPlugins}
+        components={readOnly ? markdownReadOnlyComponents : markdownComponents}
+        mode={useStreamingMode ? "streaming" : "static"}
+        dir="auto"
+        parseIncompleteMarkdown
+        normalizeHtmlIndentation
+        isAnimating={isActivelyStreaming}
+        caret={keepCaretSlot ? "block" : undefined}
+        animated={false}
+        linkSafety={{
+          enabled: !readOnly,
+          renderModal: (modalProps) => <ExternalLinkModal {...modalProps} />,
+        }}
+        {...(useStreamingMode ? {} : { shikiTheme: ["github-light", "github-dark"] as const })}
+        controls={{
+          code: { copy: !readOnly, download: false },
+          mermaid: { copy: !readOnly, download: false, fullscreen: !readOnly, panZoom: !readOnly },
+          table: { copy: !readOnly, download: false, fullscreen: !readOnly },
+        }}
+        translations={streamdownTranslations}
+      >
+        {content}
+      </Streamdown>
+    </div>
   );
 });
 

crates/agent-gateway/web/src/i18n/config.ts

@@ -413,6 +413,14 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.deleteConfirm": "确认删除",
     "settings.deleteConfirmDesc": "此操作不可撤销。",
     "settings.deleteConfirmYes": "确定删除",
+    "settings.customSettings": "自定义设置",
+    "settings.openCustomSettings": "打开自定义设置",
+    "settings.closeCustomSettings": "关闭自定义设置",
+    "settings.conversationTitleGeneration": "对话标题生成",
+    "settings.conversationTitleModel": "标题生成模型",
+    "settings.conversationTitleModelFollowCurrent": "使用当前对话模型",
+    "settings.conversationTitleModelHint": "未选择时，标题生成会使用当前对话使用的模型。",
+    "settings.customSettingsModelEmpty": "当前 Provider 未配置模型。",
 
     /* ── Settings Prompt ── */
     "settings.agentsTitle": "全局提示词",
@@ -1196,6 +1204,14 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.deleteConfirm": "Confirm Delete",
     "settings.deleteConfirmDesc": "This action cannot be undone.",
     "settings.deleteConfirmYes": "Delete",
+    "settings.customSettings": "Custom Settings",
+    "settings.openCustomSettings": "Open custom settings",
+    "settings.closeCustomSettings": "Close custom settings",
+    "settings.conversationTitleGeneration": "Conversation title generation",
+    "settings.conversationTitleModel": "Title generation model",
+    "settings.conversationTitleModelFollowCurrent": "Use current chat model",
+    "settings.conversationTitleModelHint": "When unselected, title generation uses the model from the current chat.",
+    "settings.customSettingsModelEmpty": "No active models are configured for the current providers.",
 
     /* ── Settings Prompt ── */
     "settings.agentsTitle": "Prompt",

crates/agent-gateway/web/src/index.css

@@ -755,6 +755,66 @@
   .composer-dropdown[data-state="open"] [role="menuitemcheckbox"]:nth-child(n+6),
   .composer-dropdown[data-state="open"] [role="menuitem"]:nth-child(n+6) { animation-delay: 0.12s; }
 
+  /* Composer reasoning select animations */
+  @keyframes composerReasoningDropdownIn {
+    from {
+      opacity: 0;
+      transform: translateY(6px) scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes composerReasoningDropdownOut {
+    from {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(5px) scale(0.975);
+    }
+  }
+
+  @keyframes composerReasoningItemIn {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .composer-reasoning-trigger[data-state="open"] {
+    box-shadow:
+      0 8px 18px -14px rgba(88, 28, 135, 0.55),
+      inset 0 0 0 1px rgba(167, 139, 250, 0.12);
+  }
+
+  .composer-reasoning-dropdown[data-state="open"] {
+    animation: composerReasoningDropdownIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+    transform-origin: var(--radix-select-content-transform-origin);
+    --tw-enter-opacity: initial;
+    --tw-enter-scale: initial;
+    --tw-enter-translate-y: initial;
+  }
+
+  .composer-reasoning-dropdown[data-state="closed"] {
+    animation: composerReasoningDropdownOut 0.12s cubic-bezier(0.4, 0, 1, 1);
+    transform-origin: var(--radix-select-content-transform-origin);
+    --tw-exit-opacity: initial;
+    --tw-exit-scale: initial;
+    --tw-exit-translate-y: initial;
+  }
+
+  .composer-reasoning-dropdown[data-state="open"] .composer-reasoning-item {
+    animation: composerReasoningItemIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
   /* Chat header model selector animations */
   @keyframes modelSelectorDropdownIn {
     from {
@@ -809,6 +869,25 @@
     animation: modelSelectorItemIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .composer-dropdown,
+    .composer-dropdown [role="menuitemcheckbox"],
+    .composer-dropdown [role="menuitem"],
+    .composer-reasoning-dropdown,
+    .composer-reasoning-item,
+    .model-selector-dropdown,
+    .model-selector-item {
+      animation: none !important;
+    }
+
+    .composer-reasoning-trigger,
+    .composer-reasoning-trigger > svg:last-child,
+    .model-selector-trigger,
+    .model-selector-trigger svg {
+      transition: none !important;
+    }
+  }
+
   /* Context checkpoint animations */
   @keyframes checkpointSlideIn {
     from {