Fix stale Models docs links in config panel

gui/src/pages/config/sections/ModelsSection.test.tsx

@@ -0,0 +1,116 @@
+import { render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import type { ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { createMockStore } from "../../../util/test/mockStore";
+import { ModelsSection } from "./ModelsSection";
+
+vi.mock("../../../context/Auth", () => ({
+  useAuth: () => ({
+    selectedProfile: {
+      profileType: "local",
+    },
+  }),
+}));
+
+vi.mock("../../../components/mainInput/Lump/useEditBlock", () => ({
+  useEditModel: () => vi.fn(),
+}));
+
+vi.mock("../../../components/gui/Shortcut", () => ({
+  default: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
+vi.mock("../../../components/ui", () => ({
+  Card: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Divider: () => <hr />,
+  Toggle: ({
+    children,
+    title,
+    subtitle,
+  }: {
+    children: ReactNode;
+    title: string;
+    subtitle?: string;
+  }) => (
+    <section>
+      <div>{title}</div>
+      {subtitle ? <div>{subtitle}</div> : null}
+      {children}
+    </section>
+  ),
+}));
+
+vi.mock("../components/ConfigHeader", () => ({
+  ConfigHeader: ({ title }: { title: string }) => <div>{title}</div>,
+}));
+
+vi.mock("../components/ModelRoleRow", () => ({
+  ModelRoleRow: ({
+    role,
+    description,
+    setupURL,
+  }: {
+    role: string;
+    description: ReactNode;
+    setupURL: string;
+  }) => (
+    <div data-testid={`model-role-${role}`}>
+      <div>{description}</div>
+      <a href={setupURL}>{`${role} setup`}</a>
+    </div>
+  ),
+}));
+
+vi.mock("../../../util", async () => {
+  const actual =
+    await vi.importActual<typeof import("../../../util")>("../../../util");
+
+  return {
+    ...actual,
+    getMetaKeyLabel: () => "cmd",
+    isJetBrains: () => false,
+  };
+});
+
+describe("ModelsSection docs links", () => {
+  function renderComponent() {
+    const { mockIdeMessenger, ...store } = createMockStore();
+
+    render(
+      <Provider store={store}>
+        <ModelsSection />
+      </Provider>,
+    );
+
+    return { store, mockIdeMessenger };
+  }
+
+  it("uses current ide-extensions docs routes for learn more and setup links", () => {
+    renderComponent();
+
+    const learnMoreLinks = screen.getAllByRole("link", { name: "Learn more" });
+    const setupLinks = [
+      screen.getByRole("link", { name: "chat setup" }),
+      screen.getByRole("link", { name: "autocomplete setup" }),
+      screen.getByRole("link", { name: "edit setup" }),
+    ];
+
+    const hrefs = [...learnMoreLinks, ...setupLinks].map((link) =>
+      link.getAttribute("href"),
+    );
+
+    expect(hrefs).toEqual([
+      "https://docs.continue.dev/ide-extensions/chat/quick-start",
+      "https://docs.continue.dev/ide-extensions/autocomplete/quick-start",
+      "https://docs.continue.dev/ide-extensions/edit/quick-start",
+      "https://docs.continue.dev/ide-extensions/chat/model-setup",
+      "https://docs.continue.dev/ide-extensions/autocomplete/model-setup",
+      "https://docs.continue.dev/ide-extensions/edit/model-setup",
+    ]);
+
+    hrefs.forEach((href) => {
+      expect(href).not.toContain("/docs/");
+    });
+  });
+});

gui/src/pages/config/sections/ModelsSection.tsx

@@ -14,6 +14,22 @@ import { getMetaKeyLabel, isJetBrains } from "../../../util";
 import { ConfigHeader } from "../components/ConfigHeader";
 import { ModelRoleRow } from "../components/ModelRoleRow";
 
+const MODEL_DOCS_URLS = {
+  chat: {
+    learnMore: "https://docs.continue.dev/ide-extensions/chat/quick-start",
+    setup: "https://docs.continue.dev/ide-extensions/chat/model-setup",
+  },
+  autocomplete: {
+    learnMore:
+      "https://docs.continue.dev/ide-extensions/autocomplete/quick-start",
+    setup: "https://docs.continue.dev/ide-extensions/autocomplete/model-setup",
+  },
+  edit: {
+    learnMore: "https://docs.continue.dev/ide-extensions/edit/quick-start",
+    setup: "https://docs.continue.dev/ide-extensions/edit/model-setup",
+  },
+} as const;
+
 export function ModelsSection() {
   const { selectedProfile } = useAuth();
   const dispatch = useAppDispatch();
@@ -83,7 +99,7 @@ export function ModelsSection() {
             <span>
               Used in Chat, Plan, Agent mode (
               <a
-                href="https://docs.continue.dev/features/chat/quick-start"
+                href={MODEL_DOCS_URLS.chat.learnMore}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-inherit underline hover:brightness-125"
@@ -97,7 +113,7 @@ export function ModelsSection() {
           selectedModel={config.selectedModelByRole.chat ?? undefined}
           onSelect={(model) => handleRoleUpdate("chat", model)}
           onConfigure={handleConfigureModel}
-          setupURL="https://docs.continue.dev/chat/model-setup"
+          setupURL={MODEL_DOCS_URLS.chat.setup}
         />
 
         <Divider />
@@ -109,7 +125,7 @@ export function ModelsSection() {
             <span>
               Used in inline code completions as you type (
               <a
-                href="https://docs.continue.dev/features/autocomplete/quick-start"
+                href={MODEL_DOCS_URLS.autocomplete.learnMore}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-inherit underline hover:brightness-125"
@@ -123,7 +139,7 @@ export function ModelsSection() {
           selectedModel={config.selectedModelByRole.autocomplete ?? undefined}
           onSelect={(model) => handleRoleUpdate("autocomplete", model)}
           onConfigure={handleConfigureModel}
-          setupURL="https://docs.continue.dev/autocomplete/model-setup"
+          setupURL={MODEL_DOCS_URLS.autocomplete.setup}
         />
 
         {/* Jetbrains has a model selector inline */}
@@ -142,7 +158,7 @@ export function ModelsSection() {
                 <span>
                   Used to transform a selected section of code (
                   <a
-                    href="https://docs.continue.dev/features/edit/quick-start"
+                    href={MODEL_DOCS_URLS.edit.learnMore}
                     target="_blank"
                     rel="noopener noreferrer"
                     className="text-inherit underline hover:brightness-125"
@@ -156,7 +172,7 @@ export function ModelsSection() {
               selectedModel={config.selectedModelByRole.edit ?? undefined}
               onSelect={(model) => handleRoleUpdate("edit", model)}
               onConfigure={handleConfigureModel}
-              setupURL="https://docs.continue.dev/edit/model-setup"
+              setupURL={MODEL_DOCS_URLS.edit.setup}
             />
           </>
         )}