let5see/clawdbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Webchat: sync thinking level with session

Browse Source
This commit is contained in:
Peter Steinberger
2025-12-08 16:09:04 +00:00
parent 0f0a2dddfe
commit dc3c82ad40
8 changed files with 169 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/macos/Sources/Clawdis/Resources/WebChat/ChatPanel.js
View File

@@ -52,6 +52,7 @@ let ChatPanel = class ChatPanel extends LitElement {
// Create AgentInterface
this.agentInterface = document.createElement("agent-interface");
this.agentInterface.session = agent;
this.agentInterface.sessionThinkingLevel = config?.sessionThinkingLevel ?? agent?.state?.thinkingLevel ?? "off";
this.agentInterface.enableAttachments = true;
// Hide model selector in the embedded chat; use fixed model configured at bootstrap.
this.agentInterface.enableModelSelector = false;

14
apps/macos/Sources/Clawdis/Resources/WebChat/agent/agent.js
View File

@@ -80,7 +80,7 @@ export class Agent {
const { systemPrompt, model, messages } = this._state;
console.log(message, { systemPrompt, model, messages });
}
async prompt(input, attachments) {
async prompt(input, attachments, opts) {
const model = this._state.model;
if (!model) {
this.emit({ type: "error-no-model" });
@@ -111,16 +111,20 @@ export class Agent {
this.abortController = new AbortController();
this.patch({ isStreaming: true, streamMessage: null, error: undefined });
this.emit({ type: "started" });
const reasoning = this._state.thinkingLevel === "off"
const thinkingLevel = (opts?.thinkingOverride ?? this._state.thinkingLevel) ?? "off";
const reasoning = thinkingLevel === "off"
? undefined
: this._state.thinkingLevel === "minimal"
: thinkingLevel === "minimal"
? "low"
: this._state.thinkingLevel;
: thinkingLevel;
const shouldSendOverride = opts?.transient === true;
const cfg = {
systemPrompt: this._state.systemPrompt,
tools: this._state.tools,
model,
reasoning,
thinkingOverride: shouldSendOverride ? thinkingLevel : undefined,
thinkingOnce: shouldSendOverride ? thinkingLevel : undefined,
getQueuedMessages: async () => {
// Return queued messages (they'll be added to state via message_end event)
const queued = this.messageQueue.slice();
@@ -269,4 +273,4 @@ export class Agent {
}
}
}
//# sourceMappingURL=agent.js.map
//# sourceMappingURL=agent.js.map

23
apps/macos/Sources/Clawdis/Resources/WebChat/bootstrap.js vendored
View File

@@ -31,6 +31,7 @@ async function fetchBootstrap() {
sessionKey,
basePath: info.basePath || "/webchat/",
initialMessages: Array.isArray(info.initialMessages) ? info.initialMessages : [],
thinkingLevel: typeof info.thinkingLevel === "string" ? info.thinkingLevel : "off",
};
}
@@ -50,14 +51,20 @@ class NativeTransport {
: btoa(String.fromCharCode(...new Uint8Array(a.content))),
}));
const rpcUrl = new URL("./rpc", window.location.href);
const rpcBody = {
text: userMessage.content?.[0]?.text ?? "",
session: this.sessionKey,
attachments,
};
if (cfg?.thinkingOnce) {
rpcBody.thinkingOnce = cfg.thinkingOnce;
} else if (cfg?.thinkingOverride) {
rpcBody.thinking = cfg.thinkingOverride;
}
const resultResp = await fetch(rpcUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
text: userMessage.content?.[0]?.text ?? "",
session: this.sessionKey,
attachments,
}),
body: JSON.stringify(rpcBody),
signal,
});
@@ -98,7 +105,7 @@ class NativeTransport {
const startChat = async () => {
logStatus("boot: fetching session info");
const { initialMessages, sessionKey } = await fetchBootstrap();
const { initialMessages, sessionKey, thinkingLevel } = await fetchBootstrap();
logStatus("boot: starting imports");
const { Agent } = await import("./agent/agent.js");
@@ -154,7 +161,7 @@ const startChat = async () => {
initialState: {
systemPrompt: "You are Clawd (primary session).",
model: getModel("anthropic", "claude-opus-4-5"),
thinkingLevel: "off",
thinkingLevel,
messages: initialMessages,
},
transport: new NativeTransport(sessionKey),
@@ -175,7 +182,7 @@ const startChat = async () => {
const panel = new ChatPanel();
panel.style.height = "100%";
panel.style.display = "block";
await panel.setAgent(agent);
await panel.setAgent(agent, { sessionThinkingLevel: thinkingLevel });
const mount = document.getElementById("app");
if (!mount) throw new Error("#app container missing");

63
apps/macos/Sources/Clawdis/Resources/WebChat/components/AgentInterface.js
View File

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { html, LitElement } from "lit";
import { customElement, property, query } from "lit/decorators.js";
import { customElement, property, query, state } from "lit/decorators.js";
import { ModelSelector } from "../dialogs/ModelSelector.js";
import "./MessageEditor.js";
import "./MessageList.js";
@@ -21,6 +21,8 @@ let AgentInterface = class AgentInterface extends LitElement {
this.enableModelSelector = true;
this.enableThinkingSelector = true;
this.showThemeToggle = false;
this.sessionThinkingLevel = "off";
this.pendingThinkingLevel = null;
this._autoScroll = true;
this._lastScrollTop = 0;
this._lastClientHeight = 0;
@@ -121,13 +123,16 @@ let AgentInterface = class AgentInterface extends LitElement {
}
if (!this.session)
return;
this._unsubscribeSession = this.session.subscribe(async (ev) => {
if (ev.type === "state-update") {
if (this._streamingContainer) {
this._streamingContainer.isStreaming = ev.state.isStreaming;
this._streamingContainer.setMessage(ev.state.streamMessage, !ev.state.isStreaming);
}
this.requestUpdate();
this._unsubscribeSession = this.session.subscribe(async (ev) => {
if (ev.type === "state-update") {
if (this.pendingThinkingLevel === null && ev.state.thinkingLevel) {
this.sessionThinkingLevel = ev.state.thinkingLevel;
}
if (this._streamingContainer) {
this._streamingContainer.isStreaming = ev.state.isStreaming;
this._streamingContainer.setMessage(ev.state.streamMessage, !ev.state.isStreaming);
}
this.requestUpdate();
}
else if (ev.type === "error-no-model") {
// TODO show some UI feedback
@@ -164,11 +169,25 @@ let AgentInterface = class AgentInterface extends LitElement {
if (this.onBeforeSend) {
await this.onBeforeSend();
}
const baseThinking =
this.sessionThinkingLevel || session.state.thinkingLevel || "off";
const thinkingOverride = this.pendingThinkingLevel ?? baseThinking;
const transient =
this.pendingThinkingLevel !== null &&
this.pendingThinkingLevel !== baseThinking;
// Only clear editor after we know we can send
this._messageEditor.value = "";
this._messageEditor.attachments = [];
this._autoScroll = true; // Enable auto-scroll when sending a message
await this.session?.prompt(input, attachments);
await this.session?.prompt(input, attachments, {
thinkingOverride,
transient,
});
this.pendingThinkingLevel = null;
// Reset editor thinking selector to session baseline
if (this._messageEditor) {
this._messageEditor.thinkingLevel = this.sessionThinkingLevel || "off";
}
}
renderMessages() {
if (!this.session)
@@ -261,12 +280,12 @@ let AgentInterface = class AgentInterface extends LitElement {
<div class="max-w-3xl mx-auto px-2">
<message-editor
.isStreaming=${state.isStreaming}
.currentModel=${state.model}
.thinkingLevel=${state.thinkingLevel}
.showAttachmentButton=${this.enableAttachments}
.showModelSelector=${this.enableModelSelector}
.showThinkingSelector=${this.enableThinkingSelector}
.onSend=${(input, attachments) => {
.currentModel=${state.model}
.thinkingLevel=${this.pendingThinkingLevel ?? this.sessionThinkingLevel ?? state.thinkingLevel}
.showAttachmentButton=${this.enableAttachments}
.showModelSelector=${this.enableModelSelector}
.showThinkingSelector=${this.enableThinkingSelector}
.onSend=${(input, attachments) => {
this.sendMessage(input, attachments);
}}
.onAbort=${() => session.abort()}
@@ -275,7 +294,11 @@ let AgentInterface = class AgentInterface extends LitElement {
}}
.onThinkingChange=${this.enableThinkingSelector
? (level) => {
session.setThinkingLevel(level);
this.pendingThinkingLevel = level;
if (this._messageEditor) {
this._messageEditor.thinkingLevel = level;
}
this.requestUpdate();
}
: undefined}
></message-editor>
@@ -298,6 +321,9 @@ __decorate([
__decorate([
property({ type: Boolean })
], AgentInterface.prototype, "enableThinkingSelector", void 0);
__decorate([
property({ type: String })
], AgentInterface.prototype, "sessionThinkingLevel", void 0);
__decorate([
property({ type: Boolean })
], AgentInterface.prototype, "showThemeToggle", void 0);
@@ -319,6 +345,9 @@ __decorate([
__decorate([
query("streaming-message-container")
], AgentInterface.prototype, "_streamingContainer", void 0);
__decorate([
state()
], AgentInterface.prototype, "pendingThinkingLevel", void 0);
AgentInterface = __decorate([
customElement("agent-interface")
], AgentInterface);
@@ -327,4 +356,4 @@ export { AgentInterface };
if (!customElements.get("agent-interface")) {
customElements.define("agent-interface", AgentInterface);
}
//# sourceMappingURL=AgentInterface.js.map
//# sourceMappingURL=AgentInterface.js.map

71
apps/macos/Sources/Clawdis/Resources/WebChat/webchat.bundle.js
View File

@@ -196,7 +196,7 @@ var init_agent = __esmMin((() => {
messages
});
}
async prompt(input, attachments) {
async prompt(input, attachments, opts) {
const model = this._state.model;
if (!model) {
this.emit({ type: "error-no-model" });
@@ -236,12 +236,16 @@ var init_agent = __esmMin((() => {
error: undefined
});
this.emit({ type: "started" });
const reasoning = this._state.thinkingLevel === "off" ? undefined : this._state.thinkingLevel === "minimal" ? "low" : this._state.thinkingLevel;
const thinkingLevel = opts?.thinkingOverride ?? this._state.thinkingLevel ?? "off";
const reasoning = thinkingLevel === "off" ? undefined : thinkingLevel === "minimal" ? "low" : thinkingLevel;
const shouldSendOverride = opts?.transient === true;
const cfg = {
systemPrompt: this._state.systemPrompt,
tools: this._state.tools,
model,
reasoning,
thinkingOverride: shouldSendOverride ? thinkingLevel : undefined,
thinkingOnce: shouldSendOverride ? thinkingLevel : undefined,
getQueuedMessages: async () => {
const queued = this.messageQueue.slice();
this.messageQueue = [];
@@ -107901,6 +107905,8 @@ var init_AgentInterface = __esmMin((() => {
this.enableModelSelector = true;
this.enableThinkingSelector = true;
this.showThemeToggle = false;
this.sessionThinkingLevel = "off";
this.pendingThinkingLevel = null;
this._autoScroll = true;
this._lastScrollTop = 0;
this._lastClientHeight = 0;
@@ -107989,6 +107995,9 @@ var init_AgentInterface = __esmMin((() => {
if (!this.session) return;
this._unsubscribeSession = this.session.subscribe(async (ev) => {
if (ev.type === "state-update") {
if (this.pendingThinkingLevel === null && ev.state.thinkingLevel) {
this.sessionThinkingLevel = ev.state.thinkingLevel;
}
if (this._streamingContainer) {
this._streamingContainer.isStreaming = ev.state.isStreaming;
this._streamingContainer.setMessage(ev.state.streamMessage, !ev.state.isStreaming);
@@ -108017,10 +108026,20 @@ var init_AgentInterface = __esmMin((() => {
if (this.onBeforeSend) {
await this.onBeforeSend();
}
const baseThinking = this.sessionThinkingLevel || session.state.thinkingLevel || "off";
const thinkingOverride = this.pendingThinkingLevel ?? baseThinking;
const transient = this.pendingThinkingLevel !== null && this.pendingThinkingLevel !== baseThinking;
this._messageEditor.value = "";
this._messageEditor.attachments = [];
this._autoScroll = true;
await this.session?.prompt(input, attachments);
await this.session?.prompt(input, attachments, {
thinkingOverride,
transient
});
this.pendingThinkingLevel = null;
if (this._messageEditor) {
this._messageEditor.thinkingLevel = this.sessionThinkingLevel || "off";
}
}
renderMessages() {
if (!this.session) return x`<div class="p-4 text-center text-muted-foreground">${i18n("No session available")}</div>`;
@@ -108109,12 +108128,12 @@ var init_AgentInterface = __esmMin((() => {
<div class="max-w-3xl mx-auto px-2">
<message-editor
.isStreaming=${state$1.isStreaming}
.currentModel=${state$1.model}
.thinkingLevel=${state$1.thinkingLevel}
.showAttachmentButton=${this.enableAttachments}
.showModelSelector=${this.enableModelSelector}
.showThinkingSelector=${this.enableThinkingSelector}
.onSend=${(input, attachments) => {
.currentModel=${state$1.model}
.thinkingLevel=${this.pendingThinkingLevel ?? this.sessionThinkingLevel ?? state$1.thinkingLevel}
.showAttachmentButton=${this.enableAttachments}
.showModelSelector=${this.enableModelSelector}
.showThinkingSelector=${this.enableThinkingSelector}
.onSend=${(input, attachments) => {
this.sendMessage(input, attachments);
}}
.onAbort=${() => session.abort()}
@@ -108122,7 +108141,11 @@ var init_AgentInterface = __esmMin((() => {
ModelSelector.open(state$1.model, (model) => session.setModel(model));
}}
.onThinkingChange=${this.enableThinkingSelector ? (level) => {
session.setThinkingLevel(level);
this.pendingThinkingLevel = level;
if (this._messageEditor) {
this._messageEditor.thinkingLevel = level;
}
this.requestUpdate();
} : undefined}
></message-editor>
${this.renderStats()}
@@ -108136,6 +108159,7 @@ var init_AgentInterface = __esmMin((() => {
__decorate$17([n$1({ type: Boolean })], AgentInterface.prototype, "enableAttachments", void 0);
__decorate$17([n$1({ type: Boolean })], AgentInterface.prototype, "enableModelSelector", void 0);
__decorate$17([n$1({ type: Boolean })], AgentInterface.prototype, "enableThinkingSelector", void 0);
__decorate$17([n$1({ type: String })], AgentInterface.prototype, "sessionThinkingLevel", void 0);
__decorate$17([n$1({ type: Boolean })], AgentInterface.prototype, "showThemeToggle", void 0);
__decorate$17([n$1({ attribute: false })], AgentInterface.prototype, "onApiKeyRequired", void 0);
__decorate$17([n$1({ attribute: false })], AgentInterface.prototype, "onBeforeSend", void 0);
@@ -108143,6 +108167,7 @@ var init_AgentInterface = __esmMin((() => {
__decorate$17([n$1({ attribute: false })], AgentInterface.prototype, "onCostClick", void 0);
__decorate$17([e$1("message-editor")], AgentInterface.prototype, "_messageEditor", void 0);
__decorate$17([e$1("streaming-message-container")], AgentInterface.prototype, "_streamingContainer", void 0);
__decorate$17([r()], AgentInterface.prototype, "pendingThinkingLevel", void 0);
AgentInterface = __decorate$17([t("agent-interface")], AgentInterface);
if (!customElements.get("agent-interface")) {
customElements.define("agent-interface", AgentInterface);
@@ -195731,6 +195756,7 @@ var init_ChatPanel = __esmMin((() => {
this.agent = agent;
this.agentInterface = document.createElement("agent-interface");
this.agentInterface.session = agent;
this.agentInterface.sessionThinkingLevel = config?.sessionThinkingLevel ?? agent?.state?.thinkingLevel ?? "off";
this.agentInterface.enableAttachments = true;
this.agentInterface.enableModelSelector = false;
this.agentInterface.enableThinkingSelector = true;
@@ -196264,7 +196290,8 @@ async function fetchBootstrap() {
return {
sessionKey,
basePath: info$1.basePath || "/webchat/",
initialMessages: Array.isArray(info$1.initialMessages) ? info$1.initialMessages : []
initialMessages: Array.isArray(info$1.initialMessages) ? info$1.initialMessages : [],
thinkingLevel: typeof info$1.thinkingLevel === "string" ? info$1.thinkingLevel : "off"
};
}
var NativeTransport = class {
@@ -196279,14 +196306,20 @@ var NativeTransport = class {
content: typeof a$2.content === "string" ? a$2.content : btoa(String.fromCharCode(...new Uint8Array(a$2.content)))
}));
const rpcUrl = new URL("./rpc", window.location.href);
const rpcBody = {
text: userMessage.content?.[0]?.text ?? "",
session: this.sessionKey,
attachments
};
if (cfg?.thinkingOnce) {
rpcBody.thinkingOnce = cfg.thinkingOnce;
} else if (cfg?.thinkingOverride) {
rpcBody.thinking = cfg.thinkingOverride;
}
const resultResp = await fetch(rpcUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
text: userMessage.content?.[0]?.text ?? "",
session: this.sessionKey,
attachments
}),
body: JSON.stringify(rpcBody),
signal
});
if (!resultResp.ok) {
@@ -196339,7 +196372,7 @@ var NativeTransport = class {
};
const startChat = async () => {
logStatus("boot: fetching session info");
const { initialMessages, sessionKey } = await fetchBootstrap();
const { initialMessages, sessionKey, thinkingLevel } = await fetchBootstrap();
logStatus("boot: starting imports");
const { Agent: Agent$1 } = await Promise.resolve().then(() => (init_agent(), agent_exports));
const { ChatPanel: ChatPanel$1 } = await Promise.resolve().then(() => (init_ChatPanel(), ChatPanel_exports));
@@ -196386,7 +196419,7 @@ const startChat = async () => {
initialState: {
systemPrompt: "You are Clawd (primary session).",
model: getModel$1("anthropic", "claude-opus-4-5"),
thinkingLevel: "off",
thinkingLevel,
messages: initialMessages
},
transport: new NativeTransport(sessionKey)
@@ -196408,7 +196441,7 @@ const startChat = async () => {
const panel = new ChatPanel$1();
panel.style.height = "100%";
panel.style.display = "block";
await panel.setAgent(agent);
await panel.setAgent(agent, { sessionThinkingLevel: thinkingLevel });
const mount = document.getElementById("app");
if (!mount) throw new Error("#app container missing");
mount.dataset.booted = "1";