dsh-per-message-model 0.1.9 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/client.js +28 -8
- package/package.json +1 -1
package/lib/client.js
CHANGED
|
@@ -146,7 +146,13 @@ window.__ModuleLoader__.load({
|
|
|
146
146
|
const label = document.createElement("span");
|
|
147
147
|
label.className = BADGE_PREFIX + "divider-label";
|
|
148
148
|
label.textContent = SWITCH_COPY;
|
|
149
|
-
|
|
149
|
+
// Two fixed lines: "模型切换：<from>" then "→ <to>". Each model name is
|
|
150
|
+
// an unbreakable flex item, so a narrow column wraps the whole name to
|
|
151
|
+
// the next line instead of stretching the chat column or cutting the
|
|
152
|
+
// text mid-word.
|
|
153
|
+
const lineFrom = document.createElement("div");
|
|
154
|
+
lineFrom.className = BADGE_PREFIX + "divider-line";
|
|
155
|
+
lineFrom.appendChild(label);
|
|
150
156
|
const from = sw.from !== null && typeof sw.from === "object"
|
|
151
157
|
? `${sw.from.provider} / ${sw.from.model}`
|
|
152
158
|
: null;
|
|
@@ -154,8 +160,11 @@ window.__ModuleLoader__.load({
|
|
|
154
160
|
const fromEl = document.createElement("span");
|
|
155
161
|
fromEl.className = BADGE_PREFIX + "divider-model";
|
|
156
162
|
fromEl.textContent = from;
|
|
157
|
-
|
|
163
|
+
lineFrom.appendChild(fromEl);
|
|
158
164
|
}
|
|
165
|
+
div.appendChild(lineFrom);
|
|
166
|
+
const lineTo = document.createElement("div");
|
|
167
|
+
lineTo.className = BADGE_PREFIX + "divider-line";
|
|
159
168
|
const arrow = document.createElement("span");
|
|
160
169
|
arrow.className = BADGE_PREFIX + "divider-arrow";
|
|
161
170
|
// arrowSvg returns a React element; build the SVG DOM node instead.
|
|
@@ -173,11 +182,12 @@ window.__ModuleLoader__.load({
|
|
|
173
182
|
path.setAttribute("stroke-linejoin", "round");
|
|
174
183
|
svg.appendChild(path);
|
|
175
184
|
arrow.appendChild(svg);
|
|
176
|
-
|
|
185
|
+
lineTo.appendChild(arrow);
|
|
177
186
|
const toEl = document.createElement("span");
|
|
178
187
|
toEl.className = BADGE_PREFIX + "divider-model";
|
|
179
188
|
toEl.textContent = `${sw.to.provider} / ${sw.to.model}`;
|
|
180
|
-
|
|
189
|
+
lineTo.appendChild(toEl);
|
|
190
|
+
div.appendChild(lineTo);
|
|
181
191
|
return div;
|
|
182
192
|
}
|
|
183
193
|
/**
|
|
@@ -264,10 +274,20 @@ window.__ModuleLoader__.load({
|
|
|
264
274
|
badgeStyle.textContent = [
|
|
265
275
|
|
|
266
276
|
// In-stream divider: full-width block, embeds in the message flow.
|
|
267
|
-
//
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
277
|
+
// Two fixed rows (switch-from, then arrow + switch-to). The box is
|
|
278
|
+
// always clamped to the chat column (width/max-width:100% +
|
|
279
|
+
// box-sizing + overflow-x auto), so a very long model id can never
|
|
280
|
+
// widen the page: worst case only this divider scrolls internally.
|
|
281
|
+
`[data-dsh-model-switch]{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:10px 0 16px;padding:10px 14px;box-sizing:border-box;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;border:1.5px solid var(--dsw-alias-state-business-primary, #4f8cff);border-radius:10px;background:var(--dsw-alias-state-business-tertiary, rgba(79,140,255,.12));box-shadow:0 1px 3px rgba(0,0,0,.10);color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;user-select:none}`,
|
|
282
|
+
// Each row wraps its own contents; the model spans never break.
|
|
283
|
+
`[data-dsh-model-switch] [class*="-divider-line"]{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;max-width:100%}`,
|
|
284
|
+
`[data-dsh-model-switch] [class*="-divider-label"]{flex:none;color:var(--dsw-alias-label-tertiary);font-weight:600;white-space:nowrap}`,
|
|
285
|
+
// `white-space:nowrap` makes the whole `provider / model` a single
|
|
286
|
+
// unbreakable unit (latin hyphens like `deepseek-v4-pro` would
|
|
287
|
+
// otherwise break after the dash). `min-width:0` stops that unit
|
|
288
|
+
// from propagating its intrinsic width up and stretching the column;
|
|
289
|
+
// when it still cannot fit, the row wraps it to the next line whole.
|
|
290
|
+
`[data-dsh-model-switch] [class*="-divider-model"]{flex:0 1 auto;min-width:0;white-space:nowrap;color:var(--dsw-alias-label-primary);font-weight:700}`,
|
|
271
291
|
`[data-dsh-model-switch] [class*="-divider-arrow"]{flex:none;display:inline-flex;align-items:center;color:var(--dsw-alias-label-tertiary)}`,
|
|
272
292
|
// Composer-dock model button: chip icon + unfoldable label (scroll).
|
|
273
293
|
`[data-dsh-per-message-model-footer]{display:inline-flex;align-items:center;justify-content:center;gap:0;padding:0;border:1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.25));border-radius:6px;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer;max-width:100%;width:22px;height:22px;flex:none;overflow:hidden;vertical-align:middle;box-sizing:border-box}`,
|