fix(chat): improve mobile composer controls (agentscope-ai#7334)

Author: zhaozhuang521

console/src/components/LoopInput/LoopModeSelector.test.tsx

@@ -10,6 +10,14 @@ import {
 } from "../../stores/loopStore";
 import { LoopModeSelector } from "./LoopModeSelector";
 
+const { mockUseIsMobile } = vi.hoisted(() => ({
+  mockUseIsMobile: vi.fn(() => false),
+}));
+
+vi.mock("../../hooks/useIsMobile", () => ({
+  useIsMobile: mockUseIsMobile,
+}));
+
 vi.mock("react-i18next", () => ({
   useTranslation: () => ({
     t: (key: string) => key,
@@ -52,6 +60,7 @@ const ompUltraqa: LoopModeInfo = {
 
 describe("LoopModeSelector", () => {
   beforeEach(() => {
+    mockUseIsMobile.mockReturnValue(false);
     useLoopStore.setState({
       selectedModeId: "default",
       availableModes: [DEFAULT_LOOP_MODE, goal, custom, ompUltraqa],
@@ -100,6 +109,36 @@ describe("LoopModeSelector", () => {
     expect(useLoopStore.getState().selectedModeId).toBe("custom:quality");
   });
 
+  it("uses a bottom drawer for mode selection on mobile", async () => {
+    mockUseIsMobile.mockReturnValue(true);
+    const user = userEvent.setup();
+    renderWithProviders(<LoopModeSelector compact />);
+
+    const trigger = screen.getByRole("button", { name: "loop.selectorAria" });
+    await user.click(trigger);
+
+    expect(
+      await screen.findByRole("dialog", { name: "loop.selectorTitle" }),
+    ).toBeInTheDocument();
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(document.querySelector(".ant-popover")).not.toBeInTheDocument();
+
+    await user.click(screen.getByText("loop.modes.goal.name"));
+
+    expect(useLoopStore.getState().selectedModeId).toBe("goal");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("renders only the mode icon in compact mode", () => {
+    renderWithProviders(<LoopModeSelector compact />);
+
+    const trigger = screen.getByRole("button", {
+      name: "loop.selectorAria",
+    });
+    expect(trigger.textContent).toBe("");
+    expect(trigger.querySelectorAll("svg")).toHaveLength(1);
+  });
+
   it("shows starting before the first response event", () => {
     useLoopStore.getState().setStartingMode(custom);
 
@@ -112,6 +151,21 @@ describe("LoopModeSelector", () => {
     ).not.toBeInTheDocument();
   });
 
+  it("keeps an active mode icon-only in compact mode", () => {
+    useLoopStore.getState().setSessionMode(custom, "running");
+
+    const { container } = renderWithProviders(<LoopModeSelector compact />);
+
+    const activeMode = container.querySelector('[data-state="running"]');
+    expect(activeMode).not.toBeNull();
+    expect(activeMode?.textContent).toBe("");
+    expect(activeMode?.querySelectorAll("svg")).toHaveLength(1);
+    expect(activeMode).toHaveAttribute(
+      "aria-label",
+      "Quality Review loop.running",
+    );
+  });
+
   it("shows running after the first response event", () => {
     useLoopStore.getState().setSessionMode(custom, "running");
 

console/src/components/LoopInput/LoopModeSelector.tsx

@@ -8,6 +8,7 @@ import {
   Settings2,
   Sparkles,
   Target,
+  X,
 } from "lucide-react";
 import { Popover, Tooltip } from "antd";
 import { useMemo, useState } from "react";
@@ -20,6 +21,8 @@ import {
   type LoopModeInfo,
   useLoopStore,
 } from "../../stores/loopStore";
+import { useIsMobile } from "../../hooks/useIsMobile";
+import { OsDrawer } from "../../os/OsOverlay";
 import { InlineMarkdown } from "../Markdown/InlineMarkdown";
 import {
   resolveLoopModeDescriptionMarkdown,
@@ -35,10 +38,19 @@ function ModeIcon({ mode, size = 14 }: { mode: LoopModeInfo; size?: number }) {
   return <CircleDot size={size} />;
 }
 
-export function LoopModeSelector() {
+interface LoopModeSelectorProps {
+  className?: string;
+  compact?: boolean;
+}
+
+export function LoopModeSelector({
+  className,
+  compact = false,
+}: LoopModeSelectorProps = {}) {
   const { t, i18n } = useTranslation();
   const lang = i18n.language || "en";
   const navigate = useNavigate();
+  const isMobile = useIsMobile();
   const [open, setOpen] = useState(false);
   const availableModes = useLoopStore((state) => state.availableModes);
   const selectedModeId = useLoopStore((state) => state.selectedModeId);
@@ -61,14 +73,16 @@ export function LoopModeSelector() {
   );
 
   if (sessionState !== "idle" && activeMode) {
+    const modeName = resolveLoopModeName(activeMode, t, lang);
     const tooltip =
       activeMode.source === "custom"
         ? t("loop.activeCustomDescription")
         : t("loop.activePersistentDescription");
     return (
       <Tooltip title={tooltip}>
         <div
-          className={styles.activeMode}
+          className={[styles.activeMode, className].filter(Boolean).join(" ")}
+          aria-label={`${modeName} ${t(`loop.${sessionState}`)}`}
           aria-live="polite"
           data-state={sessionState}
         >
@@ -79,10 +93,14 @@ export function LoopModeSelector() {
           {sessionState === "awaiting_user" && (
             <MessageCircleQuestion size={14} />
           )}
-          <span>{resolveLoopModeName(activeMode, t, lang)}</span>
-          <span className={styles.activeState}>
-            {t(`loop.${sessionState}`)}
-          </span>
+          {!compact && (
+            <>
+              <span>{modeName}</span>
+              <span className={styles.activeState}>
+                {t(`loop.${sessionState}`)}
+              </span>
+            </>
+          )}
         </div>
       </Tooltip>
     );
@@ -130,40 +148,115 @@ export function LoopModeSelector() {
     );
   };
 
+  const settingsButton = (
+    <button
+      aria-label={t("loop.gotoSettings")}
+      className={styles.settingsButton}
+      onClick={() => {
+        setOpen(false);
+        navigate("/agent-config?tab=agentLoop");
+      }}
+      type="button"
+    >
+      <Settings2 size={16} />
+    </button>
+  );
+
   const content = (
-    <div className={styles.modeMenu} role="listbox">
+    <div className={styles.modeMenu}>
       <div className={styles.menuHeader}>
         <div>
           <div className={styles.menuTitle}>{t("loop.selectorTitle")}</div>
           <div className={styles.menuHint}>{t("loop.selectorHint")}</div>
         </div>
-        <Tooltip title={t("loop.gotoSettings")}>
-          <button
-            aria-label={t("loop.gotoSettings")}
-            className={styles.settingsButton}
-            onClick={() => {
-              setOpen(false);
-              navigate("/agent-config?tab=agentLoop");
-            }}
-            type="button"
-          >
-            <Settings2 size={16} />
-          </button>
-        </Tooltip>
-      </div>
-      {renderGroup(t("loop.builtInModes"), builtInModes)}
-      {renderGroup(t("loop.customModes"), extendedModes)}
-      {catalogError ? (
-        <div className={styles.menuError}>
-          <span>{t("loop.loadError")}</span>
-          <button onClick={() => void fetchAvailableLoopModes()} type="button">
-            {t("loop.retry")}
-          </button>
+        <div className={styles.menuActions}>
+          {isMobile ? (
+            settingsButton
+          ) : (
+            <Tooltip title={t("loop.gotoSettings")}>{settingsButton}</Tooltip>
+          )}
+          {isMobile && (
+            <button
+              aria-label={t("common.close")}
+              className={styles.settingsButton}
+              onClick={() => setOpen(false)}
+              type="button"
+            >
+              <X size={18} />
+            </button>
+          )}
         </div>
-      ) : null}
+      </div>
+      <div className={styles.modeList} role="listbox">
+        {renderGroup(t("loop.builtInModes"), builtInModes)}
+        {renderGroup(t("loop.customModes"), extendedModes)}
+        {catalogError ? (
+          <div className={styles.menuError}>
+            <span>{t("loop.loadError")}</span>
+            <button
+              onClick={() => void fetchAvailableLoopModes()}
+              type="button"
+            >
+              {t("loop.retry")}
+            </button>
+          </div>
+        ) : null}
+      </div>
     </div>
   );
 
+  const triggerButton = (
+    <button
+      aria-expanded={open}
+      aria-haspopup="listbox"
+      aria-label={t("loop.selectorAria")}
+      className={[styles.modeTrigger, className].filter(Boolean).join(" ")}
+      disabled={catalogLoading && availableModes.length === 0}
+      onClick={isMobile ? () => setOpen((current) => !current) : undefined}
+      type="button"
+    >
+      {catalogLoading ? (
+        <LoaderCircle className={styles.spin} size={14} />
+      ) : (
+        <ModeIcon mode={selectedMode} />
+      )}
+      {!compact && (
+        <>
+          <span>{resolveLoopModeName(selectedMode, t, lang)}</span>
+          <ChevronDown size={13} />
+        </>
+      )}
+    </button>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {triggerButton}
+        <OsDrawer
+          aria-label={t("loop.selectorTitle")}
+          open={open}
+          placement="bottom"
+          height="auto"
+          closable={false}
+          destroyOnHidden
+          rootClassName={styles.modeDrawer}
+          onClose={() => setOpen(false)}
+          styles={{
+            body: { padding: 0, overflow: "hidden" },
+            content: {
+              borderRadius: "14px 14px 0 0",
+              overflow: "hidden",
+            },
+            wrapper: { maxHeight: "min(48dvh, 400px)" },
+          }}
+        >
+          {content}
+        </OsDrawer>
+      </>
+    );
+  }
+
   return (
     <Popover
       arrow={false}
@@ -174,22 +267,7 @@ export function LoopModeSelector() {
       placement="topLeft"
       trigger="click"
     >
-      <button
-        aria-expanded={open}
-        aria-haspopup="listbox"
-        aria-label={t("loop.selectorAria")}
-        className={styles.modeTrigger}
-        disabled={catalogLoading && availableModes.length === 0}
-        type="button"
-      >
-        {catalogLoading ? (
-          <LoaderCircle className={styles.spin} size={14} />
-        ) : (
-          <ModeIcon mode={selectedMode} />
-        )}
-        <span>{resolveLoopModeName(selectedMode, t, lang)}</span>
-        <ChevronDown size={13} />
-      </button>
+      {triggerButton}
     </Popover>
   );
 }

console/src/components/LoopInput/index.module.less

@@ -105,6 +105,13 @@
   padding: 5px 6px 10px;
 }
 
+.menuActions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+}
+
 .menuTitle {
   color: var(--ant-color-text);
   font-size: 13px;
@@ -135,6 +142,10 @@
   color: var(--ant-color-text);
 }
 
+.modeList {
+  min-height: 0;
+}
+
 .modeGroup + .modeGroup {
   margin-top: 8px;
   padding-top: 8px;
@@ -235,3 +246,37 @@
   font: inherit;
   cursor: pointer;
 }
+
+.modeDrawer {
+  .modeMenu {
+    width: 100%;
+    height: auto;
+    max-height: min(48dvh, 400px);
+    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .menuHeader {
+    flex: 0 0 auto;
+    align-items: center;
+    padding: 2px 0 10px 6px;
+  }
+
+  .settingsButton {
+    width: 44px;
+    height: 44px;
+  }
+
+  .modeList {
+    flex: 0 1 auto;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .modeOption {
+    min-height: 56px;
+    padding: 8px 10px;
+  }
+}