@chatcode/cco-llm-chatcode-config 0.1.0

package/lib/client.js

@@ -0,0 +1,469 @@
+window.__ModuleLoader__.load({
+	id: "@chatcode/cco-llm-chatcode-config",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		//#region src/client/style.ts
+		/** Styles are injected by the browser entry so the plugin remains self-contained. */
+		const modelConfigurationStyles = `
+.chatcode-model-configuration {
+  display: flex;
+  max-width: 720px;
+  flex-direction: column;
+  gap: 20px;
+  margin-top: 20px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.chatcode-model-configuration__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.chatcode-model-configuration__title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.chatcode-model-configuration__intro,
+.chatcode-model-configuration__description,
+.chatcode-model-configuration__empty,
+.chatcode-model-configuration__notice {
+  margin: 0;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.chatcode-model-configuration__sources {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.chatcode-model-configuration__source {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chatcode-model-configuration__source-heading,
+.chatcode-model-configuration__model-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.chatcode-model-configuration__model-head {
+  justify-content: space-between;
+}
+
+.chatcode-model-configuration__model-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 6px;
+}
+
+.chatcode-model-configuration__text-button {
+  padding: 1px 6px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.chatcode-model-configuration__text-button:hover {
+  background: var(--dsw-alias-fill-secondary);
+  color: var(--dsw-alias-label-primary);
+}
+
+.chatcode-model-configuration__text-button--danger:hover {
+  background: var(--dsw-alias-fill-danger, #fff1f0);
+  color: var(--dsw-alias-label-danger, #d92d20);
+}
+
+.chatcode-model-configuration__add {
+  align-self: flex-start;
+  padding: 4px 10px;
+  border: 1px dashed var(--dsw-alias-border-l2);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.chatcode-model-configuration__add:hover {
+  border-style: solid;
+  background: var(--dsw-alias-fill-secondary);
+}
+
+.chatcode-model-configuration__form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+  background: var(--dsw-alias-fill-secondary, transparent);
+}
+
+.chatcode-model-configuration__form-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.chatcode-model-configuration__form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+}
+
+.chatcode-model-configuration__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.chatcode-model-configuration__field--wide {
+  grid-column: 1 / -1;
+}
+
+.chatcode-model-configuration__field-label {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.chatcode-model-configuration__input,
+.chatcode-model-configuration__textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 32px;
+  padding: 5px 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 6px;
+  outline: none;
+  background: var(--dsw-alias-background-base, #fff);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.chatcode-model-configuration__textarea {
+  min-height: 58px;
+  resize: vertical;
+}
+
+.chatcode-model-configuration__input:focus,
+.chatcode-model-configuration__textarea:focus {
+  border-color: var(--dsw-alias-border-brand, #e03131);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-fill-brand, #e03131) 14%, transparent);
+}
+
+.chatcode-model-configuration__form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.chatcode-model-configuration__form-button {
+  padding: 5px 12px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.chatcode-model-configuration__form-button--primary {
+  border-color: var(--dsw-alias-fill-brand, #e03131);
+  background: var(--dsw-alias-fill-brand, #e03131);
+  color: #fff;
+}
+
+.chatcode-model-configuration__form-button:disabled,
+.chatcode-model-configuration__add:disabled,
+.chatcode-model-configuration__text-button:disabled {
+  cursor: not-allowed;
+  opacity: .52;
+}
+
+.chatcode-model-configuration__form-error {
+  margin: 0;
+  color: var(--dsw-alias-label-danger, #d92d20);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+@media (max-width: 560px) {
+  .chatcode-model-configuration__form-grid { grid-template-columns: 1fr; }
+  .chatcode-model-configuration__field--wide { grid-column: auto; }
+}
+
+.chatcode-model-configuration__source-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.chatcode-model-configuration__read-only {
+  box-sizing: border-box;
+  padding: 1px 6px;
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: 4px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.chatcode-model-configuration__models {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chatcode-model-configuration__model {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+  background: var(--dsw-alias-background-base, transparent);
+}
+
+.chatcode-model-configuration__model-name {
+  overflow: hidden;
+  color: var(--dsw-alias-label-primary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chatcode-model-configuration__model-id {
+  overflow: hidden;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chatcode-model-configuration__switch-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+}
+
+.chatcode-model-configuration__switch-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.chatcode-model-configuration__switch-label {
+  color: var(--dsw-alias-label-primary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+}
+
+.chatcode-model-configuration__switch {
+  position: relative;
+  flex: 0 0 auto;
+  width: 38px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--dsw-alias-fill-quaternary, #d9d9d9);
+  cursor: pointer;
+  transition: background-color 160ms ease;
+}
+
+.chatcode-model-configuration__switch[aria-checked='true'] {
+  background: var(--dsw-alias-fill-brand, #e03131);
+}
+
+.chatcode-model-configuration__switch:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-brand, #e03131);
+  outline-offset: 2px;
+}
+
+.chatcode-model-configuration__switch:disabled {
+  cursor: not-allowed;
+  opacity: .52;
+}
+
+.chatcode-model-configuration__switch-thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+  transition: transform 160ms ease;
+}
+
+.chatcode-model-configuration__switch[aria-checked='true'] .chatcode-model-configuration__switch-thumb {
+  transform: translateX(16px);
+}
+
+.chatcode-model-configuration__retry {
+  align-self: flex-start;
+  padding: 4px 10px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.chatcode-model-configuration__retry:hover {
+  background: var(--dsw-alias-fill-secondary);
+}
+`;
+		//#endregion
+		//#region src/client/index.ts
+		/** Browser extension rendering the MAAS availability switch in the native Models page. */
+		const React = require("react");
+		const SETTINGS_NAMESPACE = "llm-chatcode-config";
+		const LOG_PREFIX = "[dsh-llm-chatcode-config]";
+		const en = {
+			title: "Model configuration",
+			description: "Custom models are managed by the native Models page. CodingPlan and MAAS models remain available in the conversation model selector.",
+			maas: "MAAS platform",
+			maasDescription: "Enable MAAS models for the conversation model selector.",
+			maasToggle: "Enable MAAS models",
+			maasUpdating: "Updating MAAS setting…",
+			maasUnavailable: "MAAS setting is unavailable."
+		};
+		const zh = {
+			title: "模型配置",
+			description: "自定义模型由原生模型页面管理；CodingPlan 与 MAAS 模型继续在对话模型选择中提供。",
+			maas: "Maas平台",
+			maasDescription: "开启后，MAAS 模型会出现在对话模型选择中。",
+			maasToggle: "启用 MAAS 模型",
+			maasUpdating: "正在更新 MAAS 设置…",
+			maasUnavailable: "MAAS 设置不可用。"
+		};
+		function installStyles() {
+			const documentRef = globalThis.document;
+			if (documentRef === void 0 || documentRef.querySelector("style[data-dsh-llm-chatcode-config]") !== null) return () => void 0;
+			const style = documentRef.createElement("style");
+			style.setAttribute("data-dsh-llm-chatcode-config", "true");
+			style.textContent = modelConfigurationStyles;
+			documentRef.head.appendChild(style);
+			return () => style.parentNode?.removeChild(style);
+		}
+		const inject = [
+			"slots",
+			"locale",
+			"settingsScope"
+		];
+		function ModelConfigurationCard(props) {
+			const injected = props;
+			if (injected.scope === void 0 || injected.t === void 0) return null;
+			const { scope, t } = injected;
+			const [updating, setUpdating] = React.useState(false);
+			const settings = React.useSyncExternalStore(scope.subscribe.bind(scope), scope.getSnapshot.bind(scope));
+			const element = React.createElement;
+			return element("section", { className: "chatcode-model-configuration" }, element("div", { className: "chatcode-model-configuration__header" }, element("h3", { className: "chatcode-model-configuration__title" }, t("title")), element("p", { className: "chatcode-model-configuration__intro" }, t("description"))), element("section", { className: "chatcode-model-configuration__source" }, element("h4", { className: "chatcode-model-configuration__source-title" }, t("maas")), element("p", { className: "chatcode-model-configuration__description" }, t("maasDescription")), settings.status === "ready" ? element("div", { className: "chatcode-model-configuration__switch-row" }, element("div", { className: "chatcode-model-configuration__switch-copy" }, element("span", { className: "chatcode-model-configuration__switch-label" }, updating ? t("maasUpdating") : t("maasToggle"))), element("button", {
+				type: "button",
+				role: "switch",
+				"aria-checked": settings.value?.enableMaas === true,
+				"aria-label": t("maasToggle"),
+				className: "chatcode-model-configuration__switch",
+				disabled: !settings.writable || updating,
+				onClick: () => {
+					const next = settings.value?.enableMaas !== true;
+					console.info(`${LOG_PREFIX} MAAS switch clicked; enableMaas=${String(next)}`);
+					setUpdating(true);
+					scope.set("enableMaas", next).then(() => {
+						console.info(`${LOG_PREFIX} MAAS setting write succeeded; enableMaas=${String(next)}`);
+					}, (error) => {
+						console.error(`${LOG_PREFIX} MAAS setting write failed`, error);
+					}).finally(() => {
+						setUpdating(false);
+					});
+				}
+			}, element("span", { className: "chatcode-model-configuration__switch-thumb" }))) : element("p", { className: "chatcode-model-configuration__notice" }, t("maasUnavailable"))));
+		}
+		function apply(ctx) {
+			console.info(`${LOG_PREFIX} Web client extension apply() called`);
+			ctx.effect(() => installStyles(), "chatcode-models: styles");
+			ctx.effect(() => ctx.locale.register("settings.chatcodeModels", {
+				zh,
+				en
+			}), "chatcode-models: dictionaries");
+			const scope = ctx.settingsScope.bind({ namespace: SETTINGS_NAMESPACE });
+			ctx.effect(() => {
+				let previous = "";
+				const report = () => {
+					const snapshot = scope.getSnapshot();
+					const summary = JSON.stringify({
+						status: snapshot.status,
+						writable: snapshot.writable,
+						enableMaas: snapshot.value?.enableMaas
+					});
+					if (summary === previous) return;
+					previous = summary;
+					console.info(`${LOG_PREFIX} settingsScope snapshot ${summary}`);
+				};
+				report();
+				return scope.subscribe(report);
+			}, "chatcode-models: settings diagnostics");
+			const t = ctx.locale.bind("settings.chatcodeModels");
+			ctx.slots.inject("settings.models.footer", () => {
+				console.info(`${LOG_PREFIX} registering settings.models.footer card`);
+				return ctx.slots.register({
+					name: "settings.models.footer",
+					id: "chatcode-models",
+					locale: "settings.chatcodeModels",
+					inject: () => ({
+						scope,
+						t
+					})
+				}, ModelConfigurationCard);
+			});
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});