@mosetta/editor 0.0.32 → 0.0.33

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mosetta/editor
 
+## 0.0.33
+
+- The assistant's chat lets the person choose the model it works with, among the ones the platform
+  offers (a larger one writes blocks that look better, and costs more); the choice is kept in this
+  browser.
+
 ## 0.0.32
 
 - Built with the framework 0.0.12, whose `@mosetta/react` ships the guide to writing tiles — a new

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mosetta/editor",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "license": "MIT",
   "description": "mosetta visual editor tile palette: block picker, page tree, inspector, isolated draft preview and the content API behind them.",
   "repository": {
@@ -14,15 +14,15 @@
   "dependencies": {
     "react": "*",
     "react-dom": "*",
+    "@mosetta/content": "0.0.12",
     "@mosetta/core": "0.0.12",
     "@mosetta/di": "0.0.12",
+    "@mosetta/runtime": "0.0.12",
     "@mosetta/stores": "0.0.12",
-    "@mosetta/content": "0.0.12",
-    "@mosetta/react": "0.0.12",
-    "@mosetta/settings": "0.0.12",
     "@mosetta/server-action": "0.0.12",
-    "@mosetta/runtime": "0.0.12",
-    "@mosetta/ui": "0.0.12"
+    "@mosetta/settings": "0.0.12",
+    "@mosetta/ui": "0.0.12",
+    "@mosetta/react": "0.0.12"
   },
   "devDependencies": {
     "@types/react": "*",

package/tiles/workbench/assistant.css

@@ -68,6 +68,21 @@
   font-variant-numeric: tabular-nums;
 }
 
+.assistant__model {
+  max-width: 11em;
+  padding: 2px 4px;
+  border: 1px solid var(--wb-border, #e4e4e7);
+  border-radius: 6px;
+  background: #ffffff;
+  color: var(--wb-ink, #18181b);
+  font: inherit;
+  font-size: 0.85em;
+}
+
+.assistant__model:disabled {
+  opacity: 0.5;
+}
+
 .assistant__head-button {
   padding: 3px 8px;
   border: 1px solid transparent;

package/tiles/workbench/assistant.tsx

@@ -28,6 +28,7 @@ import {
   EMPTY_CHAT,
   IChatState,
   IDraftTouched,
+  modelLabel,
   nodeOfCall,
   TChatItem,
   touchedNodes,
@@ -48,6 +49,23 @@ function readChat(): IChatState {
   return EMPTY_CHAT;
 }
 
+/** the model the person chose, kept for this browser — one the platform no longer offers is forgotten */
+const MODEL_KEY = 'mosetta-assistant-model';
+
+function readModel(): string | null {
+  try {
+    return window.localStorage.getItem(MODEL_KEY);
+  } catch {
+    return null;
+  }
+}
+
+function writeModel(model: string): void {
+  try {
+    window.localStorage.setItem(MODEL_KEY, model);
+  } catch { /* storage denied: the choice lives for the page only */ }
+}
+
 function writeChat(state: IChatState): void {
   try {
     window.sessionStorage.setItem(storageKey(), JSON.stringify(state));
@@ -232,6 +250,10 @@ export function AssistantPanel({ placement, transcription, onClose, onWorking }:
   const draftRef = useRef(draft);
   draftRef.current = draft;
   const [working, setWorking] = useState(false);
+  // the models the platform offers, its own first; the one chosen goes with every message
+  const [models, setModels] = useState<readonly string[]>([]);
+  const [chosen, setChosen] = useState<string | null>(readModel);
+  const model = chosen && models.includes(chosen) ? chosen : models[0] ?? null;
   // over Home and the lists the island folds to its input when the person wants the page back
   const [folded, setFolded] = useState(false);
   const abort = useRef<AbortController | null>(null);
@@ -239,6 +261,19 @@ export function AssistantPanel({ placement, transcription, onClose, onWorking }:
   const input = useRef<HTMLTextAreaElement>(null);
   const dictation = useDictation(setDraft, () => draftRef.current, transcription);
   useEffect(() => writeChat(chat), [chat]);
+  useEffect(() => {
+    let live = true;
+    fetch(ASSISTANT_PATH, { headers: { accept: 'application/json' } })
+      .then((res) => (res.ok ? res.json() as Promise<{ models?: unknown }> : null))
+      .then((answer) => {
+        const listed = Array.isArray(answer?.models) ? answer.models.filter((m): m is string => typeof m === 'string') : [];
+        if (live) setModels(listed);
+      })
+      .catch(() => undefined);
+    return () => {
+      live = false;
+    };
+  }, []);
   useEffect(() => {
     list.current?.scrollTo({ top: list.current.scrollHeight });
   }, [chat.items, folded]);
@@ -353,7 +388,7 @@ export function AssistantPanel({ placement, transcription, onClose, onWorking }:
       const res = await fetch(ASSISTANT_PATH, {
         method: 'POST',
         headers: { 'content-type': 'application/json', accept: 'text/event-stream' },
-        body: JSON.stringify({ history: chat.history, input: { text: message, context: contextNow() } }),
+        body: JSON.stringify({ history: chat.history, input: { text: message, context: contextNow(), ...(model && model !== models[0] ? { model } : {}) } }),
         signal: controller.signal,
       });
       if (!res.ok || !res.body) {
@@ -389,7 +424,7 @@ export function AssistantPanel({ placement, transcription, onClose, onWorking }:
         di.getByToken(SERVER_DATA_MANAGER).invalidate(['pages']);
       }
     }
-  }, [chat, di, dictation, openDraft, reload, sessionsOn, working]);
+  }, [chat, di, dictation, model, models, openDraft, reload, sessionsOn, working]);
 
   const startOver = (): void => {
     if (working) return;
@@ -404,6 +439,23 @@ export function AssistantPanel({ placement, transcription, onClose, onWorking }:
            data-working={working || undefined}>
       <div className="assistant__head">
         <span className="assistant__title">Assistant</span>
+        {models.length > 1 && model ? (
+          <select className="assistant__model"
+                  data-test-id="assistant-model"
+                  aria-label="The model the assistant works with"
+                  data-tooltip="The model the assistant works with — a larger one does better and costs more"
+                  value={model}
+                  disabled={working}
+                  onChange={(e) => {
+                    setChosen(e.target.value);
+                    writeModel(e.target.value);
+                  }}>
+            {models.map((m) => (
+              <option key={m}
+                      value={m}>{modelLabel(m)}</option>
+            ))}
+          </select>
+        ) : null}
         {chat.cost > 0 ? <span className="assistant__cost"
                                data-tooltip="What this conversation has cost">${chat.cost.toFixed(3)}</span> : null}
         <button type="button"

package/tiles/workbench/assistantChat.ts

@@ -163,3 +163,9 @@ export function nodeOfCall(name: string, args: unknown): string | null {
   }
   return null;
 }
+
+/** a model as the person reads it: `anthropic/claude-opus-5.5` → `Claude Opus 5.5` */
+export function modelLabel(id: string): string {
+  return id.slice(id.indexOf('/') + 1).split('-').filter(Boolean)
+    .map((word) => (word === 'gpt' ? 'GPT' : `${word[0].toUpperCase()}${word.slice(1)}`)).join(' ');
+}