@softr/sdk 0.0.89-alpha.3 → 0.0.89
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/dist/auth/platform.js +1 -1
- package/dist/core/file-upload.js +3 -2
- package/dist/core/workflow.js +5 -4
- package/dist/datasource/record.js +1 -1
- package/dist/fetch.js +63 -1
- package/dist/index.d.ts +1 -3
- package/dist/index.js +2 -4
- package/dist/locale-settings.js +1 -1
- package/dist/mcp.d.ts +2 -2
- package/dist/mcp.js +3 -5
- package/dist/package.js +1 -1
- package/dist/pwa.js +2 -2
- package/package.json +1 -1
- package/skills/softr-sdk/SKILL.md +1 -5
- package/skills/softr-sdk/auth/SKILL.md +1 -1
- package/skills/softr-sdk/charts-and-metrics/SKILL.md +1 -1
- package/skills/softr-sdk/current-user/SKILL.md +1 -1
- package/skills/softr-sdk/file-uploads/SKILL.md +1 -1
- package/skills/softr-sdk/formatting/SKILL.md +1 -1
- package/skills/softr-sdk/integrations/SKILL.md +1 -1
- package/skills/softr-sdk/mcp/SKILL.md +1 -1
- package/skills/softr-sdk/pwa/SKILL.md +1 -1
- package/skills/softr-sdk/record-mutations/SKILL.md +1 -1
- package/skills/softr-sdk/record-queries/SKILL.md +1 -1
- package/skills/softr-sdk/region-visibility/SKILL.md +1 -1
- package/skills/softr-sdk/routes-and-visibility/SKILL.md +1 -1
- package/skills/softr-sdk/workflows/SKILL.md +1 -1
- package/dist/agent/agent-fns.d.ts +0 -30
- package/dist/agent/agent-fns.js +0 -215
- package/dist/agent/use-agent-chat.d.ts +0 -106
- package/dist/agent/use-agent-chat.js +0 -486
- package/skills/softr-sdk/agent-chat/SKILL.md +0 -125
|
@@ -1,486 +0,0 @@
|
|
|
1
|
-
import { assert } from "../assertions.js";
|
|
2
|
-
import { useCurrentUser } from "../auth/isomorphic.js";
|
|
3
|
-
import { agentChatFn, awaitAgentConnectionFn, decideAgentToolFn, finishAgentConnectionFn, listAgentChatsFn, loadAgentChatFn, startAgentConnectionFn } from "./agent-fns.js";
|
|
4
|
-
import { useCallback, useEffect, useRef, useState } from "react";
|
|
5
|
-
|
|
6
|
-
//#region src/agent/use-agent-chat.ts
|
|
7
|
-
/**
|
|
8
|
-
* A chat with one of the app's Softr agents, as the signed-in visitor. No UI:
|
|
9
|
-
* render `messages` with the app's own components.
|
|
10
|
-
*
|
|
11
|
-
* @example
|
|
12
|
-
* const chat = useAgentChat(AGENT_ID, { record: ticket && { id: ticket.id, fields: ticket.fields } })
|
|
13
|
-
* <form onSubmit={(e) => { e.preventDefault(); chat.send(draft) }}>
|
|
14
|
-
*/
|
|
15
|
-
function useAgentChat(agentId, options = {}) {
|
|
16
|
-
const [messages, setMessages] = useState([]);
|
|
17
|
-
const [live, setLive] = useState(null);
|
|
18
|
-
const [status, setStatus] = useState("idle");
|
|
19
|
-
const [loading, setLoading] = useState(false);
|
|
20
|
-
const [error, setError] = useState(null);
|
|
21
|
-
const [chatId, setChatId] = useState(null);
|
|
22
|
-
const storeKey = chatKey(agentId, useCurrentUser()?.id ?? null);
|
|
23
|
-
const chatIdRef = useRef(chatId);
|
|
24
|
-
chatIdRef.current = chatId;
|
|
25
|
-
const recordRef = useRef(options.record ?? null);
|
|
26
|
-
recordRef.current = options.record ?? null;
|
|
27
|
-
const liveRef = useRef(live);
|
|
28
|
-
liveRef.current = live;
|
|
29
|
-
const abortRef = useRef(null);
|
|
30
|
-
useEffect(() => () => abortRef.current?.abort(), []);
|
|
31
|
-
const commitLive = useCallback((blocks) => {
|
|
32
|
-
setLive(null);
|
|
33
|
-
if (!blocks?.some((b) => b.type !== "text" || b.text.trim())) return;
|
|
34
|
-
setMessages((prev) => [...prev, {
|
|
35
|
-
id: crypto.randomUUID(),
|
|
36
|
-
role: "assistant",
|
|
37
|
-
blocks: endRunningTools(blocks)
|
|
38
|
-
}]);
|
|
39
|
-
}, []);
|
|
40
|
-
const stream = useCallback(async (message) => {
|
|
41
|
-
abortRef.current?.abort();
|
|
42
|
-
const controller = new AbortController();
|
|
43
|
-
abortRef.current = controller;
|
|
44
|
-
setError(null);
|
|
45
|
-
setStatus("thinking");
|
|
46
|
-
let blocks = [];
|
|
47
|
-
try {
|
|
48
|
-
const request = {
|
|
49
|
-
agentId,
|
|
50
|
-
message,
|
|
51
|
-
sessionId: chatIdRef.current,
|
|
52
|
-
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
53
|
-
pageName: document.title,
|
|
54
|
-
pageUrl: location.href,
|
|
55
|
-
record: recordRef.current
|
|
56
|
-
};
|
|
57
|
-
const form = new FormData();
|
|
58
|
-
form.append("payload", JSON.stringify(request));
|
|
59
|
-
const res = await fetch(agentChatFn.url, {
|
|
60
|
-
method: "POST",
|
|
61
|
-
body: form,
|
|
62
|
-
signal: controller.signal
|
|
63
|
-
});
|
|
64
|
-
if (!res.ok) throw new Error(await failureMessage(res));
|
|
65
|
-
assert(res.body, "agent chat: the reply has no body");
|
|
66
|
-
const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
|
|
67
|
-
let buffer = "";
|
|
68
|
-
const onLine = (line) => {
|
|
69
|
-
const event = parseEvent(line);
|
|
70
|
-
if (event === null) return;
|
|
71
|
-
if (event.sessionId && event.sessionId !== chatIdRef.current) {
|
|
72
|
-
chatIdRef.current = event.sessionId;
|
|
73
|
-
setChatId(event.sessionId);
|
|
74
|
-
saveChatId(storeKey, event.sessionId);
|
|
75
|
-
}
|
|
76
|
-
blocks = reduceEvent(blocks, event);
|
|
77
|
-
setLive(blocks);
|
|
78
|
-
setStatus("replying");
|
|
79
|
-
};
|
|
80
|
-
for (;;) {
|
|
81
|
-
const { done, value } = await reader.read();
|
|
82
|
-
if (done) break;
|
|
83
|
-
buffer += value;
|
|
84
|
-
const lines = buffer.split("\n");
|
|
85
|
-
buffer = lines.pop() ?? "";
|
|
86
|
-
lines.forEach(onLine);
|
|
87
|
-
}
|
|
88
|
-
onLine(buffer);
|
|
89
|
-
} catch (err) {
|
|
90
|
-
if (controller.signal.aborted) return;
|
|
91
|
-
setError(err instanceof Error ? err : new Error(String(err)));
|
|
92
|
-
}
|
|
93
|
-
if (abortRef.current !== controller) return;
|
|
94
|
-
abortRef.current = null;
|
|
95
|
-
commitLive(blocks);
|
|
96
|
-
setStatus("idle");
|
|
97
|
-
}, [
|
|
98
|
-
agentId,
|
|
99
|
-
storeKey,
|
|
100
|
-
commitLive
|
|
101
|
-
]);
|
|
102
|
-
const send = useCallback((text) => {
|
|
103
|
-
const trimmed = text.trim();
|
|
104
|
-
if (!trimmed) return;
|
|
105
|
-
abortRef.current?.abort();
|
|
106
|
-
commitLive(liveRef.current);
|
|
107
|
-
setMessages((prev) => [...prev, {
|
|
108
|
-
id: crypto.randomUUID(),
|
|
109
|
-
role: "user",
|
|
110
|
-
blocks: [{
|
|
111
|
-
type: "text",
|
|
112
|
-
text: trimmed
|
|
113
|
-
}]
|
|
114
|
-
}]);
|
|
115
|
-
stream(trimmed);
|
|
116
|
-
}, [stream, commitLive]);
|
|
117
|
-
const stop = useCallback(() => {
|
|
118
|
-
if (abortRef.current === null) return;
|
|
119
|
-
abortRef.current.abort();
|
|
120
|
-
abortRef.current = null;
|
|
121
|
-
commitLive(liveRef.current);
|
|
122
|
-
setStatus("idle");
|
|
123
|
-
}, [commitLive]);
|
|
124
|
-
const reset = useCallback((id) => {
|
|
125
|
-
abortRef.current?.abort();
|
|
126
|
-
abortRef.current = null;
|
|
127
|
-
chatIdRef.current = id;
|
|
128
|
-
setChatId(id);
|
|
129
|
-
saveChatId(storeKey, id);
|
|
130
|
-
setMessages([]);
|
|
131
|
-
setLive(null);
|
|
132
|
-
setStatus("idle");
|
|
133
|
-
setLoading(false);
|
|
134
|
-
setError(null);
|
|
135
|
-
}, [storeKey]);
|
|
136
|
-
const newChat = useCallback(() => reset(null), [reset]);
|
|
137
|
-
const load = useCallback((id, restoring) => {
|
|
138
|
-
reset(id);
|
|
139
|
-
setLoading(true);
|
|
140
|
-
loadAgentChatFn({ data: {
|
|
141
|
-
agentId,
|
|
142
|
-
sessionId: id
|
|
143
|
-
} }).then((history) => {
|
|
144
|
-
if (chatIdRef.current !== id) return;
|
|
145
|
-
if (history === null) {
|
|
146
|
-
reset(null);
|
|
147
|
-
if (!restoring) setError(new Error(CHAT_GONE_MESSAGE));
|
|
148
|
-
return;
|
|
149
|
-
}
|
|
150
|
-
setLoading(false);
|
|
151
|
-
setMessages(fromHistory(history));
|
|
152
|
-
}).catch((err) => {
|
|
153
|
-
if (chatIdRef.current !== id) return;
|
|
154
|
-
setLoading(false);
|
|
155
|
-
setError(err instanceof Error ? err : new Error(String(err)));
|
|
156
|
-
});
|
|
157
|
-
}, [agentId, reset]);
|
|
158
|
-
const openChat = useCallback((id) => load(id, false), [load]);
|
|
159
|
-
useEffect(() => {
|
|
160
|
-
const saved = savedChatId(storeKey);
|
|
161
|
-
if (saved) load(saved, true);
|
|
162
|
-
else newChat();
|
|
163
|
-
}, [
|
|
164
|
-
storeKey,
|
|
165
|
-
load,
|
|
166
|
-
newChat
|
|
167
|
-
]);
|
|
168
|
-
const listChats = useCallback(() => listAgentChatsFn({ data: { agentId } }), [agentId]);
|
|
169
|
-
const setToolStatus = useCallback((toolCallId, next) => {
|
|
170
|
-
const update = (blocks) => blocks.map((b) => b.type === "tool" && b.id === toolCallId ? {
|
|
171
|
-
...b,
|
|
172
|
-
status: next
|
|
173
|
-
} : b);
|
|
174
|
-
setLive((prev) => prev && update(prev));
|
|
175
|
-
setMessages((prev) => prev.map((m) => ({
|
|
176
|
-
...m,
|
|
177
|
-
blocks: update(m.blocks)
|
|
178
|
-
})));
|
|
179
|
-
}, []);
|
|
180
|
-
const decide = useCallback((toolCallId, decision, scope) => {
|
|
181
|
-
const sessionId = chatIdRef.current;
|
|
182
|
-
const tool = [...messages.flatMap((m) => m.blocks), ...liveRef.current ?? []].find((b) => b.type === "tool" && b.id === toolCallId);
|
|
183
|
-
if (sessionId === null || tool?.status !== "awaiting-approval") return;
|
|
184
|
-
setToolStatus(toolCallId, decision === "APPROVE" ? "approved" : "rejected");
|
|
185
|
-
decideAgentToolFn({ data: {
|
|
186
|
-
agentId,
|
|
187
|
-
sessionId,
|
|
188
|
-
toolCallId,
|
|
189
|
-
toolName: tool.name,
|
|
190
|
-
decision,
|
|
191
|
-
scope
|
|
192
|
-
} }).then((saved) => {
|
|
193
|
-
if (!saved) {
|
|
194
|
-
reset(null);
|
|
195
|
-
setError(new Error(CHAT_GONE_MESSAGE));
|
|
196
|
-
return;
|
|
197
|
-
}
|
|
198
|
-
if (decision !== "APPROVE") return;
|
|
199
|
-
abortRef.current?.abort();
|
|
200
|
-
commitLive(liveRef.current);
|
|
201
|
-
stream("");
|
|
202
|
-
}).catch((err) => {
|
|
203
|
-
setToolStatus(toolCallId, "awaiting-approval");
|
|
204
|
-
setError(err instanceof Error ? err : new Error(String(err)));
|
|
205
|
-
});
|
|
206
|
-
}, [
|
|
207
|
-
agentId,
|
|
208
|
-
messages,
|
|
209
|
-
setToolStatus,
|
|
210
|
-
commitLive,
|
|
211
|
-
stream,
|
|
212
|
-
reset
|
|
213
|
-
]);
|
|
214
|
-
const approve = useCallback((toolCallId, scope = "ONCE") => decide(toolCallId, "APPROVE", scope), [decide]);
|
|
215
|
-
const reject = useCallback((toolCallId) => decide(toolCallId, "REJECT", "ONCE"), [decide]);
|
|
216
|
-
const connect = useCallback((toolCallId) => {
|
|
217
|
-
const sessionId = chatIdRef.current;
|
|
218
|
-
const tool = [...messages.flatMap((m) => m.blocks), ...liveRef.current ?? []].find((b) => b.type === "tool" && b.id === toolCallId);
|
|
219
|
-
if (sessionId === null || tool?.status !== "awaiting-connection" || !tool.integration) return;
|
|
220
|
-
const popup = window.open("", "softr-agent-connect", popupFeatures(500, 600));
|
|
221
|
-
if (!popup) {
|
|
222
|
-
setError(/* @__PURE__ */ new Error("Allow pop-ups for this site to connect your account."));
|
|
223
|
-
return;
|
|
224
|
-
}
|
|
225
|
-
setToolStatus(toolCallId, "connecting");
|
|
226
|
-
const connection = {
|
|
227
|
-
integration: tool.integration,
|
|
228
|
-
requestId: crypto.randomUUID()
|
|
229
|
-
};
|
|
230
|
-
const deadline = Date.now() + CONNECT_TIMEOUT_MS;
|
|
231
|
-
(async () => {
|
|
232
|
-
popup.location.href = await startAgentConnectionFn({ data: connection });
|
|
233
|
-
while (!await awaitAgentConnectionFn({ data: connection })) {
|
|
234
|
-
if (Date.now() > deadline) throw new Error("Connecting took too long. Try again.");
|
|
235
|
-
await new Promise((resolve) => setTimeout(resolve, CONNECT_RETRY_MS));
|
|
236
|
-
}
|
|
237
|
-
popup.close();
|
|
238
|
-
if (!await finishAgentConnectionFn({ data: {
|
|
239
|
-
agentId,
|
|
240
|
-
sessionId,
|
|
241
|
-
toolCallId
|
|
242
|
-
} })) {
|
|
243
|
-
reset(null);
|
|
244
|
-
setError(new Error(CHAT_GONE_MESSAGE));
|
|
245
|
-
return;
|
|
246
|
-
}
|
|
247
|
-
setToolStatus(toolCallId, "approved");
|
|
248
|
-
abortRef.current?.abort();
|
|
249
|
-
commitLive(liveRef.current);
|
|
250
|
-
stream("");
|
|
251
|
-
})().catch((err) => {
|
|
252
|
-
popup.close();
|
|
253
|
-
setToolStatus(toolCallId, "awaiting-connection");
|
|
254
|
-
setError(err instanceof Error ? err : new Error(String(err)));
|
|
255
|
-
});
|
|
256
|
-
}, [
|
|
257
|
-
agentId,
|
|
258
|
-
messages,
|
|
259
|
-
setToolStatus,
|
|
260
|
-
commitLive,
|
|
261
|
-
stream,
|
|
262
|
-
reset
|
|
263
|
-
]);
|
|
264
|
-
return {
|
|
265
|
-
messages: (live === null ? messages : [...messages, {
|
|
266
|
-
id: "live",
|
|
267
|
-
role: "assistant",
|
|
268
|
-
blocks: live
|
|
269
|
-
}]).map(waitingLast),
|
|
270
|
-
status,
|
|
271
|
-
loading,
|
|
272
|
-
error,
|
|
273
|
-
chatId,
|
|
274
|
-
send,
|
|
275
|
-
stop,
|
|
276
|
-
newChat,
|
|
277
|
-
openChat,
|
|
278
|
-
listChats,
|
|
279
|
-
approve,
|
|
280
|
-
reject,
|
|
281
|
-
connect
|
|
282
|
-
};
|
|
283
|
-
}
|
|
284
|
-
const waitsForVisitor = (b) => b.type === "tool" && (b.status === "awaiting-approval" || b.status === "awaiting-connection" || b.status === "connecting");
|
|
285
|
-
function waitingLast(message) {
|
|
286
|
-
if (!message.blocks.some(waitsForVisitor)) return message;
|
|
287
|
-
const blocks = [...message.blocks.filter((b) => !waitsForVisitor(b)), ...message.blocks.filter(waitsForVisitor)];
|
|
288
|
-
return {
|
|
289
|
-
...message,
|
|
290
|
-
blocks
|
|
291
|
-
};
|
|
292
|
-
}
|
|
293
|
-
const CONNECT_TIMEOUT_MS = 5 * 6e4;
|
|
294
|
-
const CONNECT_RETRY_MS = 3e3;
|
|
295
|
-
function popupFeatures(width, height) {
|
|
296
|
-
return `width=${width},height=${height},left=${window.screenX + (window.innerWidth - width) / 2},top=${window.screenY + (window.innerHeight - height) / 2}`;
|
|
297
|
-
}
|
|
298
|
-
const TODO_TOOL = "TodoWrite";
|
|
299
|
-
/** Its question shows as a question block, so the call itself is noise. */
|
|
300
|
-
const QUESTION_TOOL = "AskUserQuestion";
|
|
301
|
-
function parseEvent(line) {
|
|
302
|
-
if (!line.trim()) return null;
|
|
303
|
-
try {
|
|
304
|
-
return JSON.parse(line);
|
|
305
|
-
} catch {
|
|
306
|
-
return null;
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
function reduceEvent(blocks, event) {
|
|
310
|
-
switch (event.type) {
|
|
311
|
-
case "TEXT": {
|
|
312
|
-
const last = blocks.at(-1);
|
|
313
|
-
return last?.type === "text" ? [...blocks.slice(0, -1), {
|
|
314
|
-
type: "text",
|
|
315
|
-
text: last.text + event.response
|
|
316
|
-
}] : [...blocks, {
|
|
317
|
-
type: "text",
|
|
318
|
-
text: event.response
|
|
319
|
-
}];
|
|
320
|
-
}
|
|
321
|
-
case "TOOL_CALL_START":
|
|
322
|
-
if (event.toolName === TODO_TOOL) {
|
|
323
|
-
const todos = parseTodos(event.input);
|
|
324
|
-
if (todos) return upsertTodos(blocks, todos);
|
|
325
|
-
}
|
|
326
|
-
if (event.toolName === QUESTION_TOOL) return blocks;
|
|
327
|
-
if (blocks.some((b) => b.type === "tool" && b.id === event.toolCallId)) return updateTool(blocks, event.toolCallId, (b) => b.status === "running" ? {
|
|
328
|
-
...b,
|
|
329
|
-
input: event.input ?? b.input,
|
|
330
|
-
thought: event.innerThought ?? b.thought
|
|
331
|
-
} : b);
|
|
332
|
-
return [...blocks, {
|
|
333
|
-
type: "tool",
|
|
334
|
-
id: event.toolCallId,
|
|
335
|
-
name: event.toolName,
|
|
336
|
-
input: event.input,
|
|
337
|
-
thought: event.innerThought,
|
|
338
|
-
integration: event.integrationType,
|
|
339
|
-
status: "running"
|
|
340
|
-
}];
|
|
341
|
-
case "TOOL_CALL_END": return updateTool(blocks, event.toolCallId, (b) => b.status === "running" || b.status === "approved" ? {
|
|
342
|
-
...b,
|
|
343
|
-
status: event.failed ? "failed" : "done",
|
|
344
|
-
error: event.errorMessage,
|
|
345
|
-
durationMs: event.durationMs
|
|
346
|
-
} : b);
|
|
347
|
-
case "TOOL_PERMISSION_REQUEST":
|
|
348
|
-
case "INTEGRATION_AUTH_REQUEST": {
|
|
349
|
-
const status = event.type === "TOOL_PERMISSION_REQUEST" ? "awaiting-approval" : "awaiting-connection";
|
|
350
|
-
const integration = event.type === "INTEGRATION_AUTH_REQUEST" ? event.integrationType : void 0;
|
|
351
|
-
if (blocks.some((b) => b.type === "tool" && b.id === event.toolCallId)) return updateTool(blocks, event.toolCallId, (b) => ({
|
|
352
|
-
...b,
|
|
353
|
-
status,
|
|
354
|
-
integration: integration ?? b.integration,
|
|
355
|
-
input: ("input" in event ? event.input : void 0) ?? b.input
|
|
356
|
-
}));
|
|
357
|
-
return [...blocks, {
|
|
358
|
-
type: "tool",
|
|
359
|
-
id: event.toolCallId,
|
|
360
|
-
name: event.toolName,
|
|
361
|
-
input: "input" in event ? event.input : void 0,
|
|
362
|
-
integration,
|
|
363
|
-
status
|
|
364
|
-
}];
|
|
365
|
-
}
|
|
366
|
-
case "QUESTION": return [...blocks, {
|
|
367
|
-
type: "question",
|
|
368
|
-
questions: event.questions
|
|
369
|
-
}];
|
|
370
|
-
case "ERROR": return [...blocks, {
|
|
371
|
-
type: "error",
|
|
372
|
-
message: event.message
|
|
373
|
-
}];
|
|
374
|
-
default: return blocks;
|
|
375
|
-
}
|
|
376
|
-
}
|
|
377
|
-
function updateTool(blocks, id, update) {
|
|
378
|
-
return blocks.map((b) => b.type === "tool" && b.id === id ? update(b) : b);
|
|
379
|
-
}
|
|
380
|
-
/** A reply that ended without finishing a tool call, stopped or cut off, never will. */
|
|
381
|
-
function endRunningTools(blocks) {
|
|
382
|
-
return blocks.map((b) => b.type === "tool" && b.status === "running" ? {
|
|
383
|
-
...b,
|
|
384
|
-
status: "failed",
|
|
385
|
-
error: "The agent stopped before this step finished."
|
|
386
|
-
} : b);
|
|
387
|
-
}
|
|
388
|
-
/** Each plan update re-sends the whole list, so only the latest one is kept, where the first one was. */
|
|
389
|
-
function upsertTodos(blocks, todos) {
|
|
390
|
-
const index = blocks.findIndex((b) => b.type === "todo");
|
|
391
|
-
if (index === -1) return [...blocks, {
|
|
392
|
-
type: "todo",
|
|
393
|
-
todos
|
|
394
|
-
}];
|
|
395
|
-
return blocks.map((b, i) => i === index ? {
|
|
396
|
-
type: "todo",
|
|
397
|
-
todos
|
|
398
|
-
} : b);
|
|
399
|
-
}
|
|
400
|
-
function parseTodos(input) {
|
|
401
|
-
if (!input) return null;
|
|
402
|
-
try {
|
|
403
|
-
const parsed = JSON.parse(input);
|
|
404
|
-
if (typeof parsed !== "object" || parsed === null || !("todos" in parsed)) return null;
|
|
405
|
-
const outer = parsed.todos;
|
|
406
|
-
const raw = typeof outer === "object" && outer !== null && "todos" in outer ? outer.todos : outer;
|
|
407
|
-
if (!Array.isArray(raw)) return null;
|
|
408
|
-
const todos = raw.flatMap((item) => {
|
|
409
|
-
if (typeof item !== "object" || item === null) return [];
|
|
410
|
-
const { content, status } = item;
|
|
411
|
-
if (typeof content !== "string" || !content.trim()) return [];
|
|
412
|
-
if (status !== "pending" && status !== "in_progress" && status !== "completed") return [];
|
|
413
|
-
return [{
|
|
414
|
-
content,
|
|
415
|
-
status
|
|
416
|
-
}];
|
|
417
|
-
});
|
|
418
|
-
return todos.length > 0 ? todos : null;
|
|
419
|
-
} catch {
|
|
420
|
-
return null;
|
|
421
|
-
}
|
|
422
|
-
}
|
|
423
|
-
function fromHistory(history) {
|
|
424
|
-
const toolsByMessage = Map.groupBy(history.toolCalls, (call) => call.messageId);
|
|
425
|
-
return history.messages.filter((m) => m.role !== "USER" || m.content.trim()).map((m) => {
|
|
426
|
-
if (m.role === "USER") return {
|
|
427
|
-
id: m.id,
|
|
428
|
-
role: "user",
|
|
429
|
-
blocks: [{
|
|
430
|
-
type: "text",
|
|
431
|
-
text: m.content
|
|
432
|
-
}]
|
|
433
|
-
};
|
|
434
|
-
let blocks = [];
|
|
435
|
-
const calls = (toolsByMessage.get(m.id) ?? []).toSorted((a, b) => a.createdAt - b.createdAt);
|
|
436
|
-
for (const call of calls) {
|
|
437
|
-
const todos = call.toolName === TODO_TOOL ? parseTodos(call.input) : null;
|
|
438
|
-
if (todos) blocks = upsertTodos(blocks, todos);
|
|
439
|
-
else if (call.toolName !== QUESTION_TOOL) blocks.push({
|
|
440
|
-
type: "tool",
|
|
441
|
-
id: call.id,
|
|
442
|
-
name: call.toolName,
|
|
443
|
-
input: call.input,
|
|
444
|
-
thought: call.metadata.innerThought ?? void 0,
|
|
445
|
-
durationMs: call.metadata.durationMs ?? void 0,
|
|
446
|
-
status: call.metadata.failed ? "failed" : "done"
|
|
447
|
-
});
|
|
448
|
-
}
|
|
449
|
-
if (m.content) blocks.push({
|
|
450
|
-
type: "text",
|
|
451
|
-
text: m.content
|
|
452
|
-
});
|
|
453
|
-
return {
|
|
454
|
-
id: m.id,
|
|
455
|
-
role: "assistant",
|
|
456
|
-
blocks
|
|
457
|
-
};
|
|
458
|
-
});
|
|
459
|
-
}
|
|
460
|
-
const CHAT_GONE_MESSAGE = "This chat is no longer available. Start a new one.";
|
|
461
|
-
const VISITOR = "visitor";
|
|
462
|
-
const chatKey = (agentId, userId) => `softr-code-app:agent-chat:${agentId}:${userId ?? VISITOR}`;
|
|
463
|
-
function chatStore(key) {
|
|
464
|
-
return key.endsWith(`:${VISITOR}`) ? sessionStorage : localStorage;
|
|
465
|
-
}
|
|
466
|
-
function savedChatId(key) {
|
|
467
|
-
try {
|
|
468
|
-
return chatStore(key).getItem(key);
|
|
469
|
-
} catch {
|
|
470
|
-
return null;
|
|
471
|
-
}
|
|
472
|
-
}
|
|
473
|
-
function saveChatId(key, chatId) {
|
|
474
|
-
try {
|
|
475
|
-
if (chatId) chatStore(key).setItem(key, chatId);
|
|
476
|
-
else chatStore(key).removeItem(key);
|
|
477
|
-
} catch {}
|
|
478
|
-
}
|
|
479
|
-
async function failureMessage(res) {
|
|
480
|
-
const body = await res.json().catch(() => null);
|
|
481
|
-
if (typeof body === "object" && body !== null && "message" in body && typeof body.message === "string") return body.message;
|
|
482
|
-
return `The agent could not answer (${res.status}).`;
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
//#endregion
|
|
486
|
-
export { useAgentChat };
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: agent-chat
|
|
3
|
-
description: >-
|
|
4
|
-
Let visitors chat with one of the app's Softr agents: listAgents() from
|
|
5
|
-
@softr/sdk gives the agents the visitor may use, and useAgentChat(agentId, {
|
|
6
|
-
record }) returns the messages, the reply as it streams, past chats, and
|
|
7
|
-
send, stop, approve, reject and connect, with no UI. Load it for an agent
|
|
8
|
-
chat panel, approving the agent's actions, or connecting the visitor's own
|
|
9
|
-
account (Gmail, Slack…) that a tool needs. Build the chat from the app's own
|
|
10
|
-
components. The agent acts on the app's data through the app's MCP, so
|
|
11
|
-
softrMcpMiddleware must list the actions it may use.
|
|
12
|
-
metadata:
|
|
13
|
-
type: sub-skill
|
|
14
|
-
library: softr-sdk
|
|
15
|
-
library_version: 0.0.89-alpha.3
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
**Boundary.** `listAgents` and `useAgentChat` live on `@softr/sdk`. `listAgents` runs in a route loader, `useAgentChat` in a component. Neither needs a route, server function or registration of its own. It chats as the signed-in visitor, or anonymously when no one is signed in.
|
|
19
|
-
|
|
20
|
-
# Agent chat
|
|
21
|
-
|
|
22
|
-
A Softr agent is set up in Studio's Agents tab and attached to the app there. The app gives it a chat. There is no ready-made chat widget: the hook gives the state, and the app draws it with its own components.
|
|
23
|
-
|
|
24
|
-
## Setup
|
|
25
|
-
|
|
26
|
-
```ts
|
|
27
|
-
import { listAgents, useAgentChat } from '@softr/sdk'
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
`listAgents()` resolves to the agents this visitor may chat with, `{ id, title, avatar, thumbnail }[]`. Call it in the route's `loader`. An agent hidden from this visitor isn't in the list, so show no chat when it's empty. When there are several, let the visitor pick one, or pick the one the builder named by its `title`. Take the id from the list, never write one by hand.
|
|
31
|
-
|
|
32
|
-
## Core pattern
|
|
33
|
-
|
|
34
|
-
```tsx
|
|
35
|
-
// agentId comes from listAgents() in the route's loader.
|
|
36
|
-
function AgentPanel({ agentId, ticket }: { agentId: string; ticket: Ticket | null }) {
|
|
37
|
-
const chat = useAgentChat(agentId, {
|
|
38
|
-
record: ticket && { id: ticket.id, fields: { Title: ticket.title, Status: ticket.status } },
|
|
39
|
-
})
|
|
40
|
-
const [draft, setDraft] = useState('')
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<>
|
|
44
|
-
{chat.messages.map((message) => (
|
|
45
|
-
<Message key={message.id} message={message} onApprove={chat.approve} onReject={chat.reject} />
|
|
46
|
-
))}
|
|
47
|
-
{chat.error && <p role="alert">{chat.error.message}</p>}
|
|
48
|
-
<form onSubmit={(e) => { e.preventDefault(); chat.send(draft); setDraft('') }}>
|
|
49
|
-
<Textarea value={draft} onChange={(e) => setDraft(e.target.value)} />
|
|
50
|
-
{chat.status === 'idle'
|
|
51
|
-
? <Button type="submit">Send</Button>
|
|
52
|
-
: <Button type="button" onClick={chat.stop}>Stop</Button>}
|
|
53
|
-
</form>
|
|
54
|
-
</>
|
|
55
|
-
)
|
|
56
|
-
}
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
## What the hook returns
|
|
60
|
-
|
|
61
|
-
- `messages`: the whole chat, oldest first. While the agent answers, its reply is the last message and grows as it streams. A tool waiting for Approve or Connect comes last in its message, so render blocks in the order given.
|
|
62
|
-
- `status`: `thinking` until the first part of the reply arrives, `replying` until it ends, then `idle`. Show a typing hint while it's `thinking`.
|
|
63
|
-
- `loading`: `true` while a past chat loads. Show a spinner, not the empty-chat greeting.
|
|
64
|
-
- `error`: why the last request failed, or `null`.
|
|
65
|
-
- `send(text)`, `stop()`, `newChat()`.
|
|
66
|
-
- `listChats()` resolves to the visitor's past chats, `{ id, title }[]`, with `title` `null` until the agent names the chat. `openChat(id)` loads one. `chatId` is the open one, `null` for a new chat. The open chat is kept in the browser for each signed-in user, so the hook reopens it after a remount or a reload. A signed-out visitor keeps it only until the tab closes.
|
|
67
|
-
- `approve(toolCallId, scope?)` and `reject(toolCallId)` answer a tool waiting for approval. `scope` is `ONCE` (default), `SESSION` for the rest of this chat, or `USER` for always.
|
|
68
|
-
- `connect(toolCallId)` signs the visitor in to a tool's `integration` in a popup. Call it straight from the click, or the browser blocks the popup.
|
|
69
|
-
|
|
70
|
-
## Rendering a message
|
|
71
|
-
|
|
72
|
-
Each message has `role` (`user` or `assistant`) and `blocks`, in the order the agent produced them. Render every block type:
|
|
73
|
-
|
|
74
|
-
| Block | Show it as |
|
|
75
|
-
| --- | --- |
|
|
76
|
-
| `text` | Markdown text |
|
|
77
|
-
| `tool` | One line: the tool `name` and its `status`. Collapse finished ones. Expanded, show `thought`, `input`, `error` and `durationMs`. |
|
|
78
|
-
| `todo` | A checklist of the agent's plan. It updates in place. |
|
|
79
|
-
| `question` | The questions with their options. One question with a single choice sends its label with `send` on click. Several questions, or `multiSelect`, collect the picks and show a Send button, enabled once each question has one. It sends one line per question, picked labels joined by ", ". |
|
|
80
|
-
| `error` | An error line inside the reply |
|
|
81
|
-
|
|
82
|
-
A `tool` with status `awaiting-approval` blocks the agent until the visitor answers. Show Approve and Reject buttons on it. The agent continues on its own after an approval.
|
|
83
|
-
|
|
84
|
-
A `tool` with status `awaiting-connection` needs the visitor's own `integration` account, such as their Gmail. Say "You need to connect to {integration} for this request. You'll only need to connect once.", with the name in readable case, and show a Connect button that calls `connect`. While it's `connecting`, show "Connecting…" and disable the button. The agent continues on its own once they're signed in. Any integration works the same way, so don't build one per integration.
|
|
85
|
-
|
|
86
|
-
## The chat panel
|
|
87
|
-
|
|
88
|
-
Classic Softr apps ship a chat panel. Visitors expect the same from yours:
|
|
89
|
-
|
|
90
|
-
- A round button in a corner opens it. A right-side panel on desktop, full screen on mobile.
|
|
91
|
-
- The header shows the agent's avatar and name, a picker when there are several agents, new chat, past chats and close.
|
|
92
|
-
- An empty chat greets the visitor with the agent's avatar.
|
|
93
|
-
- The list scrolls to the newest message as the reply streams, until the visitor scrolls up. Then a button takes them back down.
|
|
94
|
-
- Text renders as Markdown, tables included.
|
|
95
|
-
- The input says "Ask {agent title}…". Enter sends. Shift+Enter adds a line.
|
|
96
|
-
- A line under the input: "AI can make mistakes. Please double-check responses."
|
|
97
|
-
- An answered question stays locked.
|
|
98
|
-
- Approve offers the three scopes: once, for this chat, always for this agent.
|
|
99
|
-
- A tool's `input` is JSON. Show it readable: one `Label: value` line per field, with line breaks kept, never the raw JSON. Leave out `thought`, `input`, `error` or the duration when it's empty.
|
|
100
|
-
- A tool that needs the visitor's account shows a Connect button.
|
|
101
|
-
|
|
102
|
-
## Context
|
|
103
|
-
|
|
104
|
-
`record` is the one record the visitor is looking at, so they can say "close this one". Pass it where a page shows one record, and `null` elsewhere. Use readable field names as keys. The agent reads them as they are.
|
|
105
|
-
|
|
106
|
-
The page title and URL go along on their own. Nothing else about the page does, so don't try to send whole lists.
|
|
107
|
-
|
|
108
|
-
## Letting the agent act on the app
|
|
109
|
-
|
|
110
|
-
The agent reads and changes data through the app's own MCP, as the visitor who is chatting. Their groups and each action's `permissions` apply. The actions it may use are the ones listed in `softrMcpMiddleware`. With no MCP wired, the agent can only talk. Load [mcp/SKILL.md](../mcp/SKILL.md) to wire it.
|
|
111
|
-
|
|
112
|
-
## Failure modes
|
|
113
|
-
|
|
114
|
-
**Building a chat without the hook.** Calling the agents service from the browser fails: only the app's server can sign the request in as the visitor. Use `useAgentChat`.
|
|
115
|
-
|
|
116
|
-
**Rendering only `text` blocks.** A tool waiting for approval never shows, and the agent waits forever. Render every block type.
|
|
117
|
-
|
|
118
|
-
**The hook inside a panel that unmounts when it closes.** Closing it stops a reply that is still coming. Call `useAgentChat` in the component that owns the open state, such as `AppLayout` in `src/routes/_app.tsx`, and pass `chat` into the panel. Keep the selected agent there too, or closing the panel resets it.
|
|
119
|
-
|
|
120
|
-
**An agent id written by hand.** The chat fails on the first message, and an agent hidden from the visitor still shows. Take the id from `listAgents`.
|
|
121
|
-
|
|
122
|
-
## References
|
|
123
|
-
|
|
124
|
-
- [mcp/SKILL.md](../mcp/SKILL.md): the actions the agent may call
|
|
125
|
-
- [current-user/SKILL.md](../current-user/SKILL.md): showing the chat to signed-in visitors only
|