@agno-hq/chat-react 0.1.0 → 0.3.0
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/README.md +327 -22
- package/dist/chat/index.cjs +314 -0
- package/dist/chat/index.cjs.map +1 -0
- package/dist/chat/index.d.cts +1225 -0
- package/dist/chat/index.d.ts +1225 -0
- package/dist/chat/index.js +5 -0
- package/dist/chat/index.js.map +1 -0
- package/dist/chunk-2WM3CCFE.cjs +106 -0
- package/dist/chunk-2WM3CCFE.cjs.map +1 -0
- package/dist/chunk-62IEW2HM.js +506 -0
- package/dist/chunk-62IEW2HM.js.map +1 -0
- package/dist/chunk-ERCKKOF4.cjs +3308 -0
- package/dist/chunk-ERCKKOF4.cjs.map +1 -0
- package/dist/chunk-MUOMZG4V.js +3226 -0
- package/dist/chunk-MUOMZG4V.js.map +1 -0
- package/dist/chunk-RE7ZT73K.js +102 -0
- package/dist/chunk-RE7ZT73K.js.map +1 -0
- package/dist/chunk-ROFIOWGX.cjs +530 -0
- package/dist/chunk-ROFIOWGX.cjs.map +1 -0
- package/dist/client-DUyVqxU9.d.cts +413 -0
- package/dist/client-DUyVqxU9.d.ts +413 -0
- package/dist/core/index.cjs +94 -0
- package/dist/core/index.cjs.map +1 -0
- package/dist/core/index.d.cts +108 -0
- package/dist/core/index.d.ts +108 -0
- package/dist/core/index.js +5 -0
- package/dist/core/index.js.map +1 -0
- package/dist/fonts.css +18 -0
- package/dist/index.cjs +395 -1959
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +12 -835
- package/dist/index.d.ts +12 -835
- package/dist/index.js +3 -1925
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1898 -662
- package/dist/tokens.css +111 -0
- package/package.json +52 -7
|
@@ -0,0 +1,3226 @@
|
|
|
1
|
+
import { AgnoClient, activityLabel, isSubRunEvent, applySubRunEvent, isStepEvent, applyStepEvent, isStartedEvent, isToolEvent, toolsFromEvent, mergeTool, isContentEvent, applyContentEvent, isReasoningStepEvent, isReasoningCompletedEvent, isFollowupsCompletedEvent, isPausedEvent, isCompletedEvent, isCancelledEvent, isErrorEvent, sessionRunsToMessages, isToolCompletedEvent } from './chunk-62IEW2HM.js';
|
|
2
|
+
import React7, { createContext, useMemo, useState, useRef, useEffect, useCallback, useContext, useId, isValidElement, cloneElement, useLayoutEffect, useReducer } from 'react';
|
|
3
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
|
+
import { createPortal } from 'react-dom';
|
|
5
|
+
import { Square, ChevronDown as ChevronDown$1, ArrowUp as ArrowUp$1, Paperclip as Paperclip$1, File, FileAudio as FileAudio$1, FileVideo as FileVideo$1, Wrench as Wrench$1, BookOpen as BookOpen$1, Globe as Globe$1, Brain as Brain$1, Box as Box$1, Plus as Plus$1, Check as Check$1, Copy as Copy$1, X, MemoryStick, RefreshCcw, Activity, Trash2, MessageSquare, LoaderCircle } from 'lucide-react';
|
|
6
|
+
import { Streamdown } from 'streamdown';
|
|
7
|
+
|
|
8
|
+
var messageCounter = 0;
|
|
9
|
+
var nextId = () => `m${Date.now().toString(36)}-${(messageCounter++).toString(36)}`;
|
|
10
|
+
var nowSeconds = () => Math.floor(Date.now() / 1e3);
|
|
11
|
+
function useAgnoChat(options) {
|
|
12
|
+
const { entity, userId, onEvent, onSessionId } = options;
|
|
13
|
+
const client = useMemo(() => {
|
|
14
|
+
if (options.client) return options.client;
|
|
15
|
+
return new AgnoClient({ baseUrl: options.baseUrl ?? "", headers: options.headers });
|
|
16
|
+
}, [options.client, options.baseUrl, JSON.stringify(options.headers)]);
|
|
17
|
+
const [messages, setMessages] = useState(options.initialMessages ?? []);
|
|
18
|
+
const [events, setEvents] = useState([]);
|
|
19
|
+
const [currentEvent, setCurrentEvent] = useState(null);
|
|
20
|
+
const [status, setStatus] = useState("idle");
|
|
21
|
+
const [activity, setActivity] = useState(null);
|
|
22
|
+
const [error, setError] = useState(null);
|
|
23
|
+
const [sessionId, setSessionId] = useState(options.sessionId);
|
|
24
|
+
const [sessions, setSessions] = useState([]);
|
|
25
|
+
const [sessionsLoading, setSessionsLoading] = useState(false);
|
|
26
|
+
const [backgroundRunning, setBackgroundRunning] = useState([]);
|
|
27
|
+
const abortRef = useRef(null);
|
|
28
|
+
const channelRef = useRef(null);
|
|
29
|
+
const backgroundRef = useRef(/* @__PURE__ */ new Map());
|
|
30
|
+
const activeMsgIdRef = useRef(null);
|
|
31
|
+
const runIdRef = useRef(void 0);
|
|
32
|
+
const entityRef = useRef(entity);
|
|
33
|
+
const sessionIdRef = useRef(options.sessionId);
|
|
34
|
+
const pendingSessionNameRef = useRef(void 0);
|
|
35
|
+
const bumpedSessionRef = useRef(void 0);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
entityRef.current = entity;
|
|
38
|
+
}, [entity]);
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
sessionIdRef.current = sessionId;
|
|
41
|
+
}, [sessionId]);
|
|
42
|
+
const upsertSession = useCallback((id, createdAt) => {
|
|
43
|
+
setSessions((prev) => {
|
|
44
|
+
const existing = prev.find((s) => s.session_id === id);
|
|
45
|
+
const rest = prev.filter((s) => s.session_id !== id);
|
|
46
|
+
const entry = existing ? { ...existing, updated_at: nowSeconds() } : {
|
|
47
|
+
session_id: id,
|
|
48
|
+
session_name: pendingSessionNameRef.current || "New Session",
|
|
49
|
+
created_at: createdAt ?? nowSeconds(),
|
|
50
|
+
updated_at: nowSeconds()
|
|
51
|
+
};
|
|
52
|
+
return [entry, ...rest];
|
|
53
|
+
});
|
|
54
|
+
}, []);
|
|
55
|
+
const viewRef = useRef({ messages, events, status, activity, error });
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
viewRef.current = { messages, events, status, activity, error };
|
|
58
|
+
});
|
|
59
|
+
const writeMessages = useCallback(
|
|
60
|
+
(chan, fn) => {
|
|
61
|
+
const park = chan?.park;
|
|
62
|
+
if (park) park.messages = fn(park.messages);
|
|
63
|
+
else setMessages(fn);
|
|
64
|
+
},
|
|
65
|
+
[]
|
|
66
|
+
);
|
|
67
|
+
const writeEvents = useCallback((chan, e) => {
|
|
68
|
+
const park = chan?.park;
|
|
69
|
+
if (park) park.events = [...park.events, e];
|
|
70
|
+
else {
|
|
71
|
+
setEvents((prev) => [...prev, e]);
|
|
72
|
+
setCurrentEvent(e);
|
|
73
|
+
}
|
|
74
|
+
}, []);
|
|
75
|
+
const writeStatus = useCallback((chan, status2) => {
|
|
76
|
+
const park = chan?.park;
|
|
77
|
+
if (park) park.status = status2;
|
|
78
|
+
else setStatus(status2);
|
|
79
|
+
}, []);
|
|
80
|
+
const writeActivity = useCallback((chan, activity2) => {
|
|
81
|
+
const park = chan?.park;
|
|
82
|
+
if (park) park.activity = activity2;
|
|
83
|
+
else setActivity(activity2);
|
|
84
|
+
}, []);
|
|
85
|
+
const writeError = useCallback((chan, message) => {
|
|
86
|
+
const park = chan?.park;
|
|
87
|
+
if (park) park.error = message;
|
|
88
|
+
else setError(message);
|
|
89
|
+
}, []);
|
|
90
|
+
const patchActive = useCallback(
|
|
91
|
+
(chan, patch) => {
|
|
92
|
+
const id = chan?.park ? chan.park.activeMsgId : activeMsgIdRef.current;
|
|
93
|
+
if (!id) return;
|
|
94
|
+
writeMessages(chan, (prev) => prev.map((m) => m.id === id ? patch(m) : m));
|
|
95
|
+
},
|
|
96
|
+
[writeMessages]
|
|
97
|
+
);
|
|
98
|
+
const applyEvent = useCallback(
|
|
99
|
+
(chan, e) => {
|
|
100
|
+
writeEvents(chan, e);
|
|
101
|
+
patchActive(chan, (m) => ({ ...m, events: [...m.events ?? [], e] }));
|
|
102
|
+
onEvent?.(e);
|
|
103
|
+
const label2 = activityLabel(e);
|
|
104
|
+
if (label2) writeActivity(chan, label2);
|
|
105
|
+
if (e.session_id && !chan?.park && e.session_id !== sessionIdRef.current) {
|
|
106
|
+
sessionIdRef.current = e.session_id;
|
|
107
|
+
setSessionId(e.session_id);
|
|
108
|
+
onSessionId?.(e.session_id);
|
|
109
|
+
}
|
|
110
|
+
const bumped = chan?.park ? chan.park.bumped : bumpedSessionRef.current;
|
|
111
|
+
if (e.session_id && bumped !== e.session_id) {
|
|
112
|
+
if (chan?.park) chan.park.bumped = e.session_id;
|
|
113
|
+
else bumpedSessionRef.current = e.session_id;
|
|
114
|
+
upsertSession(e.session_id, e.created_at);
|
|
115
|
+
}
|
|
116
|
+
if (e.run_id && !e.parent_run_id) {
|
|
117
|
+
if (chan?.park) chan.park.runId = e.run_id;
|
|
118
|
+
else runIdRef.current = e.run_id;
|
|
119
|
+
}
|
|
120
|
+
if (isSubRunEvent(e)) {
|
|
121
|
+
const kind = entityRef.current?.type === "workflow" ? "executor" : "member";
|
|
122
|
+
patchActive(chan, (m) => applySubRunEvent(m, e, kind));
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
if (isStepEvent(e)) {
|
|
126
|
+
patchActive(chan, (m) => applyStepEvent(m, e));
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
if (isStartedEvent(e)) {
|
|
130
|
+
patchActive(chan, (m) => ({
|
|
131
|
+
...m,
|
|
132
|
+
run_id: e.run_id ?? m.run_id,
|
|
133
|
+
session_id: e.session_id ?? m.session_id,
|
|
134
|
+
status: "streaming"
|
|
135
|
+
}));
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
if (isToolEvent(e)) {
|
|
139
|
+
const incoming = toolsFromEvent(e);
|
|
140
|
+
if (incoming.length) {
|
|
141
|
+
patchActive(chan, (m) => {
|
|
142
|
+
let tool_calls = m.tool_calls ?? [];
|
|
143
|
+
for (const t of incoming) tool_calls = mergeTool(tool_calls, t);
|
|
144
|
+
return { ...m, tool_calls };
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
if (isContentEvent(e)) {
|
|
150
|
+
patchActive(chan, (m) => applyContentEvent(m, e));
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
if (isReasoningStepEvent(e)) {
|
|
154
|
+
const incoming = e.reasoning_steps ?? e.extra_data?.reasoning_steps ?? [];
|
|
155
|
+
if (incoming.length) {
|
|
156
|
+
patchActive(chan, (m) => ({
|
|
157
|
+
...m,
|
|
158
|
+
reasoning_steps: [...m.reasoning_steps ?? [], ...incoming]
|
|
159
|
+
}));
|
|
160
|
+
}
|
|
161
|
+
return;
|
|
162
|
+
}
|
|
163
|
+
if (isReasoningCompletedEvent(e)) {
|
|
164
|
+
const steps = e.reasoning_steps ?? e.extra_data?.reasoning_steps;
|
|
165
|
+
if (steps?.length) patchActive(chan, (m) => ({ ...m, reasoning_steps: steps }));
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
if (isFollowupsCompletedEvent(e)) {
|
|
169
|
+
const followups = e.followups;
|
|
170
|
+
if (followups?.length) patchActive(chan, (m) => ({ ...m, followups }));
|
|
171
|
+
return;
|
|
172
|
+
}
|
|
173
|
+
if (isPausedEvent(e)) {
|
|
174
|
+
const requirements = e.requirements ?? [];
|
|
175
|
+
const pausedTools2 = toolsFromEvent(e);
|
|
176
|
+
writeStatus(chan, "paused");
|
|
177
|
+
writeActivity(chan, "Waiting for input");
|
|
178
|
+
patchActive(chan, (m) => {
|
|
179
|
+
let tool_calls = m.tool_calls ?? [];
|
|
180
|
+
for (const t of pausedTools2) tool_calls = mergeTool(tool_calls, t);
|
|
181
|
+
return { ...m, status: "paused", streaming: false, requirements, tool_calls };
|
|
182
|
+
});
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
if (isCompletedEvent(e)) {
|
|
186
|
+
patchActive(chan, (m) => {
|
|
187
|
+
const next = { ...m, streaming: false, status: "completed" };
|
|
188
|
+
if (typeof e.content === "string" && e.content) next.content = e.content;
|
|
189
|
+
const tools = toolsFromEvent(e);
|
|
190
|
+
if (tools.length) {
|
|
191
|
+
let tc = m.tool_calls ?? [];
|
|
192
|
+
for (const t of tools) tc = mergeTool(tc, t);
|
|
193
|
+
next.tool_calls = tc;
|
|
194
|
+
}
|
|
195
|
+
if (e.reasoning_steps?.length) next.reasoning_steps = e.reasoning_steps;
|
|
196
|
+
if (e.references?.length) next.references = e.references;
|
|
197
|
+
if (e.followups?.length) next.followups = e.followups;
|
|
198
|
+
if (e.images?.length) next.images = e.images;
|
|
199
|
+
if (e.videos?.length) next.videos = e.videos;
|
|
200
|
+
if (e.audio?.length) next.audio = e.audio;
|
|
201
|
+
if (e.response_audio) next.response_audio = e.response_audio;
|
|
202
|
+
return next;
|
|
203
|
+
});
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
if (isCancelledEvent(e)) {
|
|
207
|
+
patchActive(chan, (m) => ({ ...m, streaming: false, status: "cancelled" }));
|
|
208
|
+
writeStatus(chan, "cancelled");
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
if (isErrorEvent(e)) {
|
|
212
|
+
const msg = typeof e.content === "string" ? e.content : e.error || "Error during run";
|
|
213
|
+
patchActive(chan, (m) => ({ ...m, streaming: false, status: "error", error: msg }));
|
|
214
|
+
writeError(chan, msg);
|
|
215
|
+
writeStatus(chan, "error");
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
[
|
|
220
|
+
onEvent,
|
|
221
|
+
onSessionId,
|
|
222
|
+
patchActive,
|
|
223
|
+
upsertSession,
|
|
224
|
+
writeActivity,
|
|
225
|
+
writeError,
|
|
226
|
+
writeEvents,
|
|
227
|
+
writeStatus
|
|
228
|
+
]
|
|
229
|
+
);
|
|
230
|
+
const parkRun = useCallback((chan, sessionId2) => {
|
|
231
|
+
const view = viewRef.current;
|
|
232
|
+
chan.park = {
|
|
233
|
+
sessionId: sessionId2,
|
|
234
|
+
messages: view.messages,
|
|
235
|
+
events: view.events,
|
|
236
|
+
status: view.status,
|
|
237
|
+
activity: view.activity,
|
|
238
|
+
error: view.error,
|
|
239
|
+
activeMsgId: activeMsgIdRef.current,
|
|
240
|
+
runId: runIdRef.current,
|
|
241
|
+
bumped: bumpedSessionRef.current
|
|
242
|
+
};
|
|
243
|
+
backgroundRef.current.set(sessionId2, chan);
|
|
244
|
+
setBackgroundRunning((prev) => prev.includes(sessionId2) ? prev : [...prev, sessionId2]);
|
|
245
|
+
channelRef.current = null;
|
|
246
|
+
abortRef.current = null;
|
|
247
|
+
activeMsgIdRef.current = null;
|
|
248
|
+
runIdRef.current = void 0;
|
|
249
|
+
}, []);
|
|
250
|
+
const resumeRun = useCallback((sessionId2) => {
|
|
251
|
+
const chan = backgroundRef.current.get(sessionId2);
|
|
252
|
+
const park = chan?.park;
|
|
253
|
+
if (!chan || !park) return false;
|
|
254
|
+
backgroundRef.current.delete(sessionId2);
|
|
255
|
+
setBackgroundRunning((prev) => prev.filter((s) => s !== sessionId2));
|
|
256
|
+
chan.park = null;
|
|
257
|
+
channelRef.current = chan;
|
|
258
|
+
abortRef.current = chan.controller;
|
|
259
|
+
activeMsgIdRef.current = park.activeMsgId;
|
|
260
|
+
runIdRef.current = park.runId;
|
|
261
|
+
bumpedSessionRef.current = park.bumped;
|
|
262
|
+
setMessages(park.messages);
|
|
263
|
+
setEvents(park.events);
|
|
264
|
+
setCurrentEvent(park.events[park.events.length - 1] ?? null);
|
|
265
|
+
setStatus(park.status);
|
|
266
|
+
setActivity(park.activity);
|
|
267
|
+
setError(park.error);
|
|
268
|
+
return true;
|
|
269
|
+
}, []);
|
|
270
|
+
const releaseCurrentRun = useCallback(() => {
|
|
271
|
+
const chan = channelRef.current;
|
|
272
|
+
if (!chan || chan.park) return;
|
|
273
|
+
const from = sessionIdRef.current;
|
|
274
|
+
const streaming = viewRef.current.status === "streaming";
|
|
275
|
+
if (streaming && from) parkRun(chan, from);
|
|
276
|
+
else {
|
|
277
|
+
chan.controller.abort();
|
|
278
|
+
channelRef.current = null;
|
|
279
|
+
abortRef.current = null;
|
|
280
|
+
}
|
|
281
|
+
}, [parkRun]);
|
|
282
|
+
const drive = useCallback(
|
|
283
|
+
async (starter) => {
|
|
284
|
+
const controller = new AbortController();
|
|
285
|
+
const chan = { controller, park: null };
|
|
286
|
+
channelRef.current = chan;
|
|
287
|
+
abortRef.current = controller;
|
|
288
|
+
setError(null);
|
|
289
|
+
setStatus("streaming");
|
|
290
|
+
await starter({
|
|
291
|
+
signal: controller.signal,
|
|
292
|
+
// `chan.park` is read at call time, so events follow the run when the
|
|
293
|
+
// user navigates away mid-stream.
|
|
294
|
+
onEvent: (e) => applyEvent(chan, e),
|
|
295
|
+
onError: (err) => {
|
|
296
|
+
patchActive(chan, (m) => ({ ...m, streaming: false, status: "error", error: err.message }));
|
|
297
|
+
writeError(chan, err.message);
|
|
298
|
+
writeStatus(chan, "error");
|
|
299
|
+
},
|
|
300
|
+
onComplete: () => {
|
|
301
|
+
writeActivity(chan, null);
|
|
302
|
+
patchActive(chan, (m) => m.streaming ? { ...m, streaming: false } : m);
|
|
303
|
+
const park = chan.park;
|
|
304
|
+
if (park) park.status = park.status === "streaming" ? "completed" : park.status;
|
|
305
|
+
else setStatus((s) => s === "streaming" ? "completed" : s);
|
|
306
|
+
}
|
|
307
|
+
});
|
|
308
|
+
if (chan.park) {
|
|
309
|
+
const { sessionId: sessionId2 } = chan.park;
|
|
310
|
+
setBackgroundRunning((prev) => prev.filter((s) => s !== sessionId2));
|
|
311
|
+
} else if (channelRef.current === chan) {
|
|
312
|
+
channelRef.current = null;
|
|
313
|
+
abortRef.current = null;
|
|
314
|
+
}
|
|
315
|
+
},
|
|
316
|
+
[applyEvent, patchActive, writeActivity, writeError, writeStatus]
|
|
317
|
+
);
|
|
318
|
+
const sendMessage = useCallback(
|
|
319
|
+
async (message, sendOptions) => {
|
|
320
|
+
const ent = entityRef.current;
|
|
321
|
+
if (!ent) {
|
|
322
|
+
setError("No agent, team or workflow selected.");
|
|
323
|
+
return;
|
|
324
|
+
}
|
|
325
|
+
pendingSessionNameRef.current = message.trim() || (sendOptions?.files?.length ? "File Attachment" : "New Session");
|
|
326
|
+
bumpedSessionRef.current = void 0;
|
|
327
|
+
const userMsg = {
|
|
328
|
+
id: nextId(),
|
|
329
|
+
role: "user",
|
|
330
|
+
content: message,
|
|
331
|
+
created_at: nowSeconds()
|
|
332
|
+
};
|
|
333
|
+
const agentMsg = {
|
|
334
|
+
id: nextId(),
|
|
335
|
+
role: "agent",
|
|
336
|
+
content: "",
|
|
337
|
+
created_at: nowSeconds() + 1,
|
|
338
|
+
streaming: true,
|
|
339
|
+
status: "streaming",
|
|
340
|
+
tool_calls: [],
|
|
341
|
+
events: []
|
|
342
|
+
};
|
|
343
|
+
activeMsgIdRef.current = agentMsg.id;
|
|
344
|
+
setEvents([]);
|
|
345
|
+
setCurrentEvent(null);
|
|
346
|
+
setMessages((prev) => [...prev, userMsg, agentMsg]);
|
|
347
|
+
await drive(
|
|
348
|
+
(cb) => client.run({
|
|
349
|
+
type: ent.type,
|
|
350
|
+
id: ent.id,
|
|
351
|
+
message,
|
|
352
|
+
sessionId: sessionIdRef.current,
|
|
353
|
+
userId,
|
|
354
|
+
files: sendOptions?.files,
|
|
355
|
+
...cb
|
|
356
|
+
})
|
|
357
|
+
);
|
|
358
|
+
},
|
|
359
|
+
[client, drive, userId]
|
|
360
|
+
);
|
|
361
|
+
const continueRun = useCallback(
|
|
362
|
+
async (resolution) => {
|
|
363
|
+
const ent = entityRef.current;
|
|
364
|
+
const runId = runIdRef.current;
|
|
365
|
+
if (!ent || !runId) {
|
|
366
|
+
setError("No paused run to continue.");
|
|
367
|
+
return;
|
|
368
|
+
}
|
|
369
|
+
patchActive(null, (m) => ({ ...m, streaming: true, status: "streaming", requirements: void 0 }));
|
|
370
|
+
await drive(
|
|
371
|
+
(cb) => client.continueRun({
|
|
372
|
+
type: ent.type,
|
|
373
|
+
id: ent.id,
|
|
374
|
+
runId,
|
|
375
|
+
sessionId: sessionIdRef.current,
|
|
376
|
+
userId,
|
|
377
|
+
tools: resolution.tools,
|
|
378
|
+
stepRequirements: resolution.stepRequirements,
|
|
379
|
+
...cb
|
|
380
|
+
})
|
|
381
|
+
);
|
|
382
|
+
},
|
|
383
|
+
[client, drive, patchActive, userId]
|
|
384
|
+
);
|
|
385
|
+
const activeMessage = useMemo(
|
|
386
|
+
() => messages.find((m) => m.id === activeMsgIdRef.current) ?? null,
|
|
387
|
+
[messages]
|
|
388
|
+
);
|
|
389
|
+
const pausedTools = useMemo(
|
|
390
|
+
() => (activeMessage?.tool_calls ?? []).filter((t) => t.requires_confirmation || t.requires_user_input),
|
|
391
|
+
[activeMessage]
|
|
392
|
+
);
|
|
393
|
+
const respondToConfirmation = useCallback(
|
|
394
|
+
async (approve) => {
|
|
395
|
+
const ent = entityRef.current;
|
|
396
|
+
if (ent?.type === "workflow") {
|
|
397
|
+
const reqs = (activeMessage?.requirements ?? []).map((r) => ({ ...r, confirmation: approve }));
|
|
398
|
+
await continueRun({ stepRequirements: reqs });
|
|
399
|
+
return;
|
|
400
|
+
}
|
|
401
|
+
const resolved = pausedTools.map((t) => ({ ...t, confirmed: approve }));
|
|
402
|
+
await continueRun({ tools: resolved });
|
|
403
|
+
},
|
|
404
|
+
[activeMessage, continueRun, pausedTools]
|
|
405
|
+
);
|
|
406
|
+
const submitUserInput = useCallback(
|
|
407
|
+
async (values) => {
|
|
408
|
+
const ent = entityRef.current;
|
|
409
|
+
if (ent?.type === "workflow") {
|
|
410
|
+
const reqs = (activeMessage?.requirements ?? []).map((r) => ({
|
|
411
|
+
...r,
|
|
412
|
+
user_input_schema: (r.user_input_schema ?? []).map((f) => ({
|
|
413
|
+
...f,
|
|
414
|
+
value: f.name in values ? values[f.name] : f.value
|
|
415
|
+
}))
|
|
416
|
+
}));
|
|
417
|
+
await continueRun({ stepRequirements: reqs });
|
|
418
|
+
return;
|
|
419
|
+
}
|
|
420
|
+
const resolved = pausedTools.map((t) => ({
|
|
421
|
+
...t,
|
|
422
|
+
confirmed: true,
|
|
423
|
+
user_input_schema: (t.user_input_schema ?? []).map((f) => ({
|
|
424
|
+
...f,
|
|
425
|
+
value: f.name in values ? values[f.name] : f.value
|
|
426
|
+
}))
|
|
427
|
+
}));
|
|
428
|
+
await continueRun({ tools: resolved });
|
|
429
|
+
},
|
|
430
|
+
[activeMessage, continueRun, pausedTools]
|
|
431
|
+
);
|
|
432
|
+
const cancel = useCallback(async () => {
|
|
433
|
+
abortRef.current?.abort();
|
|
434
|
+
channelRef.current = null;
|
|
435
|
+
const ent = entityRef.current;
|
|
436
|
+
const runId = runIdRef.current;
|
|
437
|
+
setStatus("cancelled");
|
|
438
|
+
setActivity(null);
|
|
439
|
+
patchActive(null, (m) => m.streaming ? { ...m, streaming: false, status: "cancelled" } : m);
|
|
440
|
+
if (ent && runId) await client.cancelRun(ent.type, ent.id, runId, sessionIdRef.current);
|
|
441
|
+
}, [client, patchActive]);
|
|
442
|
+
const refreshSessions = useCallback(async () => {
|
|
443
|
+
const ent = entityRef.current;
|
|
444
|
+
if (!ent) {
|
|
445
|
+
setSessions([]);
|
|
446
|
+
return;
|
|
447
|
+
}
|
|
448
|
+
setSessionsLoading(true);
|
|
449
|
+
try {
|
|
450
|
+
const res = await client.getSessions(ent.type, ent.id, ent.db_id);
|
|
451
|
+
const fetched = res.data ?? [];
|
|
452
|
+
setSessions((prev) => {
|
|
453
|
+
const active = sessionIdRef.current;
|
|
454
|
+
const pending = active && !fetched.some((s) => s.session_id === active) ? prev.find((s) => s.session_id === active) : void 0;
|
|
455
|
+
return pending ? [pending, ...fetched] : fetched;
|
|
456
|
+
});
|
|
457
|
+
} finally {
|
|
458
|
+
setSessionsLoading(false);
|
|
459
|
+
}
|
|
460
|
+
}, [client]);
|
|
461
|
+
const loadSession = useCallback(
|
|
462
|
+
async (id) => {
|
|
463
|
+
const ent = entityRef.current;
|
|
464
|
+
if (!ent) return;
|
|
465
|
+
if (id === sessionIdRef.current) return;
|
|
466
|
+
releaseCurrentRun();
|
|
467
|
+
sessionIdRef.current = id;
|
|
468
|
+
setSessionId(id);
|
|
469
|
+
onSessionId?.(id);
|
|
470
|
+
if (resumeRun(id)) return;
|
|
471
|
+
activeMsgIdRef.current = null;
|
|
472
|
+
runIdRef.current = void 0;
|
|
473
|
+
setEvents([]);
|
|
474
|
+
setCurrentEvent(null);
|
|
475
|
+
setStatus("idle");
|
|
476
|
+
setActivity(null);
|
|
477
|
+
setError(null);
|
|
478
|
+
try {
|
|
479
|
+
const runs = await client.getSessionRuns(ent.type, id, ent.db_id);
|
|
480
|
+
setMessages(sessionRunsToMessages(runs));
|
|
481
|
+
} catch (err) {
|
|
482
|
+
setError(err instanceof Error ? err.message : String(err));
|
|
483
|
+
}
|
|
484
|
+
},
|
|
485
|
+
[client, onSessionId, releaseCurrentRun, resumeRun]
|
|
486
|
+
);
|
|
487
|
+
const deleteSession = useCallback(
|
|
488
|
+
async (id) => {
|
|
489
|
+
const ent = entityRef.current;
|
|
490
|
+
const ok = await client.deleteSession(id, ent?.db_id);
|
|
491
|
+
if (ok) {
|
|
492
|
+
const background = backgroundRef.current.get(id);
|
|
493
|
+
if (background) {
|
|
494
|
+
background.controller.abort();
|
|
495
|
+
backgroundRef.current.delete(id);
|
|
496
|
+
setBackgroundRunning((prev) => prev.filter((s) => s !== id));
|
|
497
|
+
}
|
|
498
|
+
setSessions((prev) => prev.filter((s) => s.session_id !== id));
|
|
499
|
+
if (sessionIdRef.current === id) {
|
|
500
|
+
sessionIdRef.current = void 0;
|
|
501
|
+
setSessionId(void 0);
|
|
502
|
+
setMessages([]);
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
},
|
|
506
|
+
[client]
|
|
507
|
+
);
|
|
508
|
+
const reset = useCallback(() => {
|
|
509
|
+
releaseCurrentRun();
|
|
510
|
+
activeMsgIdRef.current = null;
|
|
511
|
+
runIdRef.current = void 0;
|
|
512
|
+
sessionIdRef.current = void 0;
|
|
513
|
+
pendingSessionNameRef.current = void 0;
|
|
514
|
+
bumpedSessionRef.current = void 0;
|
|
515
|
+
setMessages([]);
|
|
516
|
+
setEvents([]);
|
|
517
|
+
setCurrentEvent(null);
|
|
518
|
+
setStatus("idle");
|
|
519
|
+
setActivity(null);
|
|
520
|
+
setError(null);
|
|
521
|
+
setSessionId(void 0);
|
|
522
|
+
}, [releaseCurrentRun]);
|
|
523
|
+
useEffect(() => {
|
|
524
|
+
const background = backgroundRef.current;
|
|
525
|
+
return () => {
|
|
526
|
+
abortRef.current?.abort();
|
|
527
|
+
for (const chan of background.values()) chan.controller.abort();
|
|
528
|
+
background.clear();
|
|
529
|
+
};
|
|
530
|
+
}, []);
|
|
531
|
+
const streamingMessage = useMemo(
|
|
532
|
+
() => messages.find((m) => m.role === "agent" && m.streaming) ?? null,
|
|
533
|
+
[messages]
|
|
534
|
+
);
|
|
535
|
+
return {
|
|
536
|
+
messages,
|
|
537
|
+
streamingMessage,
|
|
538
|
+
events,
|
|
539
|
+
currentEvent,
|
|
540
|
+
status,
|
|
541
|
+
activity,
|
|
542
|
+
isStreaming: status === "streaming",
|
|
543
|
+
isPaused: status === "paused",
|
|
544
|
+
error,
|
|
545
|
+
sessionId,
|
|
546
|
+
entityType: entity?.type,
|
|
547
|
+
tools: activeMessage?.tool_calls ?? [],
|
|
548
|
+
reasoning: activeMessage?.reasoning_steps,
|
|
549
|
+
pendingRequirements: activeMessage?.requirements ?? [],
|
|
550
|
+
/** Sessions with a run in flight, including ones streaming in the background. */
|
|
551
|
+
streamingSessionIds: status === "streaming" && sessionId ? [sessionId, ...backgroundRunning] : backgroundRunning,
|
|
552
|
+
sessions,
|
|
553
|
+
sessionsLoading,
|
|
554
|
+
sendMessage,
|
|
555
|
+
cancel,
|
|
556
|
+
continueRun,
|
|
557
|
+
respondToConfirmation,
|
|
558
|
+
submitUserInput,
|
|
559
|
+
refreshSessions,
|
|
560
|
+
loadSession,
|
|
561
|
+
deleteSession,
|
|
562
|
+
reset,
|
|
563
|
+
setMessages,
|
|
564
|
+
client
|
|
565
|
+
};
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
// src/cx.ts
|
|
569
|
+
function cx(...parts) {
|
|
570
|
+
const out = parts.filter(Boolean).join(" ");
|
|
571
|
+
return out || void 0;
|
|
572
|
+
}
|
|
573
|
+
var ChatContext = createContext(null);
|
|
574
|
+
function ChatProvider({
|
|
575
|
+
children,
|
|
576
|
+
classNames,
|
|
577
|
+
renderMarkdown,
|
|
578
|
+
resolveLinkPreview,
|
|
579
|
+
codeCopy,
|
|
580
|
+
chat: externalChat,
|
|
581
|
+
as,
|
|
582
|
+
className,
|
|
583
|
+
light,
|
|
584
|
+
style,
|
|
585
|
+
...options
|
|
586
|
+
}) {
|
|
587
|
+
const internal = useAgnoChat(externalChat ? { entity: null } : options);
|
|
588
|
+
const chat = externalChat ?? internal;
|
|
589
|
+
const value = useMemo(
|
|
590
|
+
() => ({ chat, classNames: classNames ?? {}, renderMarkdown, resolveLinkPreview, codeCopy }),
|
|
591
|
+
[chat, classNames, renderMarkdown, resolveLinkPreview, codeCopy]
|
|
592
|
+
);
|
|
593
|
+
const Wrapper = as === false ? null : as ?? "div";
|
|
594
|
+
return /* @__PURE__ */ jsx(ChatContext.Provider, { value, children: Wrapper ? /* @__PURE__ */ jsx(
|
|
595
|
+
Wrapper,
|
|
596
|
+
{
|
|
597
|
+
className: cx("agno-root", light && "agno-light", classNames?.root, className),
|
|
598
|
+
style,
|
|
599
|
+
children
|
|
600
|
+
}
|
|
601
|
+
) : children });
|
|
602
|
+
}
|
|
603
|
+
function useChatContext() {
|
|
604
|
+
const value = useContext(ChatContext);
|
|
605
|
+
if (!value) throw new Error("useChatContext must be used inside a <ChatProvider>");
|
|
606
|
+
return value;
|
|
607
|
+
}
|
|
608
|
+
function useOptionalChatContext() {
|
|
609
|
+
return useContext(ChatContext);
|
|
610
|
+
}
|
|
611
|
+
function useResolvedChat(explicit) {
|
|
612
|
+
const ctx = useOptionalChatContext();
|
|
613
|
+
const chat = explicit ?? ctx?.chat;
|
|
614
|
+
if (!chat) {
|
|
615
|
+
throw new Error(
|
|
616
|
+
"No chat found. Pass `chat={useAgnoChat(...)}` or render this inside a <ChatProvider>."
|
|
617
|
+
);
|
|
618
|
+
}
|
|
619
|
+
return chat;
|
|
620
|
+
}
|
|
621
|
+
function useCodeCopy() {
|
|
622
|
+
return useOptionalChatContext()?.codeCopy;
|
|
623
|
+
}
|
|
624
|
+
function useResolvedClassNames(explicit) {
|
|
625
|
+
const ctx = useOptionalChatContext();
|
|
626
|
+
return useMemo(() => ({ ...ctx?.classNames, ...explicit }), [ctx?.classNames, explicit]);
|
|
627
|
+
}
|
|
628
|
+
var STROKE = 1.5;
|
|
629
|
+
var icon = (Component, defaultSize = 16) => function Icon({ size = defaultSize, className }) {
|
|
630
|
+
return /* @__PURE__ */ jsx(Component, { size, className, strokeWidth: STROKE });
|
|
631
|
+
};
|
|
632
|
+
var ChevronDown = icon(ChevronDown$1);
|
|
633
|
+
var ArrowUp = icon(ArrowUp$1);
|
|
634
|
+
var Paperclip = icon(Paperclip$1);
|
|
635
|
+
var FileIcon = icon(File);
|
|
636
|
+
var FileAudio = icon(FileAudio$1);
|
|
637
|
+
var FileVideo = icon(FileVideo$1);
|
|
638
|
+
var Wrench = icon(Wrench$1);
|
|
639
|
+
var BookOpen = icon(BookOpen$1);
|
|
640
|
+
var Globe = icon(Globe$1);
|
|
641
|
+
var Brain = icon(Brain$1);
|
|
642
|
+
var Box = icon(Box$1);
|
|
643
|
+
var Plus = icon(Plus$1);
|
|
644
|
+
var Check = icon(Check$1);
|
|
645
|
+
var Copy = icon(Copy$1);
|
|
646
|
+
var Close = icon(X);
|
|
647
|
+
var Memory = icon(MemoryStick);
|
|
648
|
+
var Rerun = icon(RefreshCcw);
|
|
649
|
+
var Pulse = icon(Activity);
|
|
650
|
+
var Trash = icon(Trash2);
|
|
651
|
+
var ChatBubble = icon(MessageSquare);
|
|
652
|
+
var Spinner = icon(LoaderCircle, 12);
|
|
653
|
+
function Stop({ size = 16, className }) {
|
|
654
|
+
return /* @__PURE__ */ jsx(Square, { size, className, fill: "currentColor", strokeWidth: 0 });
|
|
655
|
+
}
|
|
656
|
+
function AgnoMark({ size = 24, className }) {
|
|
657
|
+
return /* @__PURE__ */ jsxs(
|
|
658
|
+
"svg",
|
|
659
|
+
{
|
|
660
|
+
width: size,
|
|
661
|
+
height: size,
|
|
662
|
+
viewBox: "0 0 24 24",
|
|
663
|
+
fill: "none",
|
|
664
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
665
|
+
"aria-hidden": true,
|
|
666
|
+
focusable: "false",
|
|
667
|
+
className,
|
|
668
|
+
children: [
|
|
669
|
+
/* @__PURE__ */ jsx("rect", { width: "24", height: "24", rx: "6", fill: "rgba(var(--color-brand-brand), 1)" }),
|
|
670
|
+
/* @__PURE__ */ jsx(
|
|
671
|
+
"path",
|
|
672
|
+
{
|
|
673
|
+
fillRule: "evenodd",
|
|
674
|
+
clipRule: "evenodd",
|
|
675
|
+
d: "M5.12367 8.89082C4.72889 8.89922 4.40205 8.58599 4.39365 8.19121C4.36275 6.7392 4.72664 5.5803 5.68258 4.90055C6.59425 4.25228 7.84819 4.19087 9.21745 4.39441C9.60802 4.45247 9.87758 4.81616 9.81953 5.20674C9.76147 5.59732 9.39777 5.86688 9.0072 5.80882C7.73104 5.61912 6.95445 5.75076 6.51125 6.06591C6.11231 6.34959 5.79697 6.92451 5.82327 8.1608C5.83167 8.55558 5.51845 8.88242 5.12367 8.89082Z",
|
|
676
|
+
fill: "white"
|
|
677
|
+
}
|
|
678
|
+
),
|
|
679
|
+
/* @__PURE__ */ jsx(
|
|
680
|
+
"path",
|
|
681
|
+
{
|
|
682
|
+
fillRule: "evenodd",
|
|
683
|
+
clipRule: "evenodd",
|
|
684
|
+
d: "M18.9047 8.89099C19.2995 8.89939 19.6263 8.58617 19.6347 8.19139C19.6656 6.73937 19.3017 5.58048 18.3458 4.90073C17.4341 4.25245 16.1802 4.19105 14.8109 4.39458C14.4204 4.45264 14.1508 4.81634 14.2089 5.20691C14.2669 5.59749 14.6306 5.86705 15.0212 5.80899C16.2973 5.61929 17.0739 5.75093 17.5171 6.06609C17.9161 6.34976 18.2314 6.92468 18.2051 8.16097C18.1967 8.55575 18.5099 8.88259 18.9047 8.89099Z",
|
|
685
|
+
fill: "white"
|
|
686
|
+
}
|
|
687
|
+
),
|
|
688
|
+
/* @__PURE__ */ jsx(
|
|
689
|
+
"path",
|
|
690
|
+
{
|
|
691
|
+
d: "M10.8097 11.7873C10.8097 12.4588 10.2653 13.0032 9.59378 13.0032C8.92225 13.0032 8.37787 12.4588 8.37787 11.7873C8.37787 11.1158 8.92225 10.5714 9.59378 10.5714C10.2653 10.5714 10.8097 11.1158 10.8097 11.7873Z",
|
|
692
|
+
fill: "white"
|
|
693
|
+
}
|
|
694
|
+
),
|
|
695
|
+
/* @__PURE__ */ jsx(
|
|
696
|
+
"path",
|
|
697
|
+
{
|
|
698
|
+
d: "M15.8544 11.7873C15.8544 12.4588 15.31 13.0032 14.6385 13.0032C13.967 13.0032 13.4226 12.4588 13.4226 11.7873C13.4226 11.1158 13.967 10.5714 14.6385 10.5714C15.31 10.5714 15.8544 11.1158 15.8544 11.7873Z",
|
|
699
|
+
fill: "white"
|
|
700
|
+
}
|
|
701
|
+
),
|
|
702
|
+
/* @__PURE__ */ jsx(
|
|
703
|
+
"path",
|
|
704
|
+
{
|
|
705
|
+
fillRule: "evenodd",
|
|
706
|
+
clipRule: "evenodd",
|
|
707
|
+
d: "M18.9043 15.1609C19.2991 15.1525 19.626 15.4657 19.6344 15.8605C19.6653 17.3125 19.3014 18.4714 18.3454 19.1511C17.4338 19.7994 16.1798 19.8608 14.8106 19.6573C14.42 19.5992 14.1504 19.2355 14.2085 18.8449C14.2665 18.4544 14.6302 18.1848 15.0208 18.2429C16.297 18.4326 17.0736 18.3009 17.5168 17.9858C17.9157 17.7021 18.231 17.1272 18.2047 15.8909C18.1963 15.4961 18.5096 15.1693 18.9043 15.1609Z",
|
|
708
|
+
fill: "white"
|
|
709
|
+
}
|
|
710
|
+
),
|
|
711
|
+
/* @__PURE__ */ jsx(
|
|
712
|
+
"path",
|
|
713
|
+
{
|
|
714
|
+
fillRule: "evenodd",
|
|
715
|
+
clipRule: "evenodd",
|
|
716
|
+
d: "M5.12404 15.1609C4.72926 15.1525 4.40241 15.4657 4.39401 15.8605C4.36312 17.3125 4.72701 18.4714 5.68295 19.1511C6.59462 19.7994 7.84856 19.8608 9.21781 19.6573C9.60839 19.5992 9.87795 19.2355 9.81989 18.8449C9.76183 18.4544 9.39814 18.1848 9.00756 18.2429C7.73141 18.4326 6.95482 18.3009 6.51161 17.9858C6.11268 17.7021 5.79734 17.1272 5.82364 15.8909C5.83204 15.4961 5.51882 15.1693 5.12404 15.1609Z",
|
|
717
|
+
fill: "white"
|
|
718
|
+
}
|
|
719
|
+
)
|
|
720
|
+
]
|
|
721
|
+
}
|
|
722
|
+
);
|
|
723
|
+
}
|
|
724
|
+
function TeamGlyph({ size = 16, className }) {
|
|
725
|
+
return /* @__PURE__ */ jsx(
|
|
726
|
+
"svg",
|
|
727
|
+
{
|
|
728
|
+
width: size,
|
|
729
|
+
height: size,
|
|
730
|
+
viewBox: "0 0 17 16",
|
|
731
|
+
fill: "none",
|
|
732
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
733
|
+
"aria-hidden": true,
|
|
734
|
+
focusable: "false",
|
|
735
|
+
className,
|
|
736
|
+
children: /* @__PURE__ */ jsx(
|
|
737
|
+
"path",
|
|
738
|
+
{
|
|
739
|
+
d: "M2.09998 4.66667V3.33333C2.09998 2.6 2.69998 2 3.43331 2H4.76664M11.4333 2H12.7666C13.5 2 14.1 2.6 14.1 3.33333V4.66667M14.1 11.3333V12.6667C14.1 13.4 13.5 14 12.7666 14H11.4333M4.76664 14H3.43331C2.69998 14 2.09998 13.4 2.09998 12.6667V11.3333M5.43331 4.66667H8.76664C9.13483 4.66667 9.43331 4.96514 9.43331 5.33333V7.33333C9.43331 7.70152 9.13483 8 8.76664 8H5.43331C5.06512 8 4.76664 7.70152 4.76664 7.33333V5.33333C4.76664 4.96514 5.06512 4.66667 5.43331 4.66667ZM7.43331 8H10.7666C11.1348 8 11.4333 8.29848 11.4333 8.66667V10.6667C11.4333 11.0349 11.1348 11.3333 10.7666 11.3333H7.43331C7.06512 11.3333 6.76664 11.0349 6.76664 10.6667V8.66667C6.76664 8.29848 7.06512 8 7.43331 8Z",
|
|
740
|
+
stroke: "currentColor",
|
|
741
|
+
strokeLinecap: "round",
|
|
742
|
+
strokeLinejoin: "round"
|
|
743
|
+
}
|
|
744
|
+
)
|
|
745
|
+
}
|
|
746
|
+
);
|
|
747
|
+
}
|
|
748
|
+
function GridLoader({ className }) {
|
|
749
|
+
return /* @__PURE__ */ jsx("span", { className: ["agno-loader", className].filter(Boolean).join(" "), role: "status", "aria-label": "Loading", children: /* @__PURE__ */ jsx("span", { className: "agno-loader__dot" }) });
|
|
750
|
+
}
|
|
751
|
+
var px = (v, fallback) => v === void 0 ? fallback : typeof v === "number" ? `${v}px` : v;
|
|
752
|
+
function ChatLauncher({
|
|
753
|
+
children,
|
|
754
|
+
position = "bottom-right",
|
|
755
|
+
offset = 24,
|
|
756
|
+
panel = "popover",
|
|
757
|
+
width,
|
|
758
|
+
height,
|
|
759
|
+
open,
|
|
760
|
+
defaultOpen = false,
|
|
761
|
+
onOpenChange,
|
|
762
|
+
label: label2,
|
|
763
|
+
icon: icon2,
|
|
764
|
+
ariaLabel,
|
|
765
|
+
closeOnEscape = true,
|
|
766
|
+
bubbleWhenOpen = true,
|
|
767
|
+
keepMounted = true,
|
|
768
|
+
portal = true,
|
|
769
|
+
className
|
|
770
|
+
}) {
|
|
771
|
+
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
|
|
772
|
+
const isOpen = open ?? uncontrolledOpen;
|
|
773
|
+
const opened = useRef(isOpen);
|
|
774
|
+
if (isOpen) opened.current = true;
|
|
775
|
+
const mounted = keepMounted ? opened.current : isOpen;
|
|
776
|
+
const setOpen = useCallback(
|
|
777
|
+
(next) => {
|
|
778
|
+
if (open === void 0) setUncontrolledOpen(next);
|
|
779
|
+
onOpenChange?.(next);
|
|
780
|
+
},
|
|
781
|
+
[open, onOpenChange]
|
|
782
|
+
);
|
|
783
|
+
useEffect(() => {
|
|
784
|
+
if (!isOpen || !closeOnEscape) return;
|
|
785
|
+
const onKeyDown = (e) => {
|
|
786
|
+
if (e.key === "Escape") setOpen(false);
|
|
787
|
+
};
|
|
788
|
+
document.addEventListener("keydown", onKeyDown);
|
|
789
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
790
|
+
}, [isOpen, closeOnEscape, setOpen]);
|
|
791
|
+
useEffect(() => {
|
|
792
|
+
if (!isOpen || panel !== "fullscreen") return;
|
|
793
|
+
const previous = document.body.style.overflow;
|
|
794
|
+
document.body.style.overflow = "hidden";
|
|
795
|
+
return () => {
|
|
796
|
+
document.body.style.overflow = previous;
|
|
797
|
+
};
|
|
798
|
+
}, [isOpen, panel]);
|
|
799
|
+
const [canPortal, setCanPortal] = useState(false);
|
|
800
|
+
useEffect(() => setCanPortal(true), []);
|
|
801
|
+
const classes = [
|
|
802
|
+
"agno-launcher",
|
|
803
|
+
`agno-launcher--${position}`,
|
|
804
|
+
panel === "fullscreen" ? "is-fullscreen" : "is-popover",
|
|
805
|
+
isOpen ? "is-open" : "is-closed",
|
|
806
|
+
className
|
|
807
|
+
].filter(Boolean).join(" ");
|
|
808
|
+
const tree = /* @__PURE__ */ jsxs(
|
|
809
|
+
"div",
|
|
810
|
+
{
|
|
811
|
+
className: classes,
|
|
812
|
+
style: {
|
|
813
|
+
"--agno-launcher-offset": px(offset, "24px"),
|
|
814
|
+
"--agno-launcher-width": px(width, "400px"),
|
|
815
|
+
"--agno-launcher-height": px(height, "620px")
|
|
816
|
+
},
|
|
817
|
+
children: [
|
|
818
|
+
mounted && /* @__PURE__ */ jsx("div", { className: "agno-launcher__panel", role: "dialog", "aria-modal": panel === "fullscreen", hidden: !isOpen, children }),
|
|
819
|
+
(!isOpen || bubbleWhenOpen) && /* @__PURE__ */ jsxs(
|
|
820
|
+
"button",
|
|
821
|
+
{
|
|
822
|
+
type: "button",
|
|
823
|
+
className: ["agno-launcher__bubble", label2 && !isOpen ? "has-label" : ""].filter(Boolean).join(" "),
|
|
824
|
+
onClick: () => setOpen(!isOpen),
|
|
825
|
+
"aria-expanded": isOpen,
|
|
826
|
+
"aria-label": ariaLabel ?? (isOpen ? "Close chat" : "Open chat"),
|
|
827
|
+
children: [
|
|
828
|
+
isOpen ? /* @__PURE__ */ jsx(Close, { size: 20 }) : icon2 ?? /* @__PURE__ */ jsx(ChatBubble, { size: 22 }),
|
|
829
|
+
label2 && !isOpen && /* @__PURE__ */ jsx("span", { className: "agno-launcher__label", children: label2 })
|
|
830
|
+
]
|
|
831
|
+
}
|
|
832
|
+
)
|
|
833
|
+
]
|
|
834
|
+
}
|
|
835
|
+
);
|
|
836
|
+
if (!portal) return tree;
|
|
837
|
+
if (!canPortal) return null;
|
|
838
|
+
return createPortal(tree, document.body);
|
|
839
|
+
}
|
|
840
|
+
function markFor(type) {
|
|
841
|
+
if (type.startsWith("audio/")) return FileAudio;
|
|
842
|
+
if (type.startsWith("video/")) return FileVideo;
|
|
843
|
+
return FileIcon;
|
|
844
|
+
}
|
|
845
|
+
function Item({ file, onRemove }) {
|
|
846
|
+
const isImage = file.type.startsWith("image/");
|
|
847
|
+
const [url, setUrl] = useState(null);
|
|
848
|
+
useEffect(() => {
|
|
849
|
+
if (!isImage) return;
|
|
850
|
+
const objectUrl = URL.createObjectURL(file);
|
|
851
|
+
setUrl(objectUrl);
|
|
852
|
+
return () => {
|
|
853
|
+
URL.revokeObjectURL(objectUrl);
|
|
854
|
+
setUrl(null);
|
|
855
|
+
};
|
|
856
|
+
}, [file, isImage]);
|
|
857
|
+
const Mark = markFor(file.type);
|
|
858
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-file", children: [
|
|
859
|
+
/* @__PURE__ */ jsx("button", { type: "button", className: "agno-file__remove", onClick: onRemove, "aria-label": `Remove ${file.name}`, children: /* @__PURE__ */ jsx(Close, { size: 12 }) }),
|
|
860
|
+
isImage && url ? /* @__PURE__ */ jsx("img", { className: "agno-file__thumb", src: url, alt: file.name }) : /* @__PURE__ */ jsxs("div", { className: "agno-file__card", children: [
|
|
861
|
+
/* @__PURE__ */ jsx("span", { className: "agno-file__mark", "aria-hidden": true, children: /* @__PURE__ */ jsx(Mark, { size: 16 }) }),
|
|
862
|
+
/* @__PURE__ */ jsxs("span", { className: "agno-file__meta", children: [
|
|
863
|
+
/* @__PURE__ */ jsx("span", { className: "agno-file__name", title: file.name, children: file.name }),
|
|
864
|
+
/* @__PURE__ */ jsx("span", { className: "agno-file__type", children: file.type || "file" })
|
|
865
|
+
] })
|
|
866
|
+
] })
|
|
867
|
+
] });
|
|
868
|
+
}
|
|
869
|
+
function FilePreview({ files, onRemove, onClear, className }) {
|
|
870
|
+
if (files.length === 0) return null;
|
|
871
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("agno-files", className), children: [
|
|
872
|
+
/* @__PURE__ */ jsxs("div", { className: "agno-files__head", children: [
|
|
873
|
+
/* @__PURE__ */ jsxs("span", { className: "agno-files__count", children: [
|
|
874
|
+
files.length,
|
|
875
|
+
" ",
|
|
876
|
+
files.length > 1 ? "files" : "file",
|
|
877
|
+
" attached"
|
|
878
|
+
] }),
|
|
879
|
+
onClear && /* @__PURE__ */ jsxs("button", { type: "button", className: "agno-files__clear", onClick: onClear, children: [
|
|
880
|
+
/* @__PURE__ */ jsx(Close, { size: 12 }),
|
|
881
|
+
"clear ",
|
|
882
|
+
files.length > 1 ? "all" : ""
|
|
883
|
+
] })
|
|
884
|
+
] }),
|
|
885
|
+
/* @__PURE__ */ jsx("div", { className: "agno-files__row", children: files.map((file, i) => /* @__PURE__ */ jsx(Item, { file, onRemove: () => onRemove(i) }, `${file.name}-${file.lastModified}-${i}`)) })
|
|
886
|
+
] });
|
|
887
|
+
}
|
|
888
|
+
var MIN_HEIGHT = 31;
|
|
889
|
+
var MAX_HEIGHT = 213;
|
|
890
|
+
function ChatInput({
|
|
891
|
+
onSend,
|
|
892
|
+
onStop,
|
|
893
|
+
disabled,
|
|
894
|
+
busy,
|
|
895
|
+
placeholder,
|
|
896
|
+
allowFiles = false,
|
|
897
|
+
leading,
|
|
898
|
+
trailing,
|
|
899
|
+
className,
|
|
900
|
+
classNames
|
|
901
|
+
}) {
|
|
902
|
+
const ctx = useOptionalChatContext();
|
|
903
|
+
const cn = useResolvedClassNames(classNames);
|
|
904
|
+
const [value, setValue] = useState("");
|
|
905
|
+
const [files, setFiles] = useState([]);
|
|
906
|
+
const fileRef = useRef(null);
|
|
907
|
+
const textareaRef = useRef(null);
|
|
908
|
+
const adjustHeight = useCallback(() => {
|
|
909
|
+
const el2 = textareaRef.current;
|
|
910
|
+
if (!el2) return;
|
|
911
|
+
el2.style.height = `${MIN_HEIGHT}px`;
|
|
912
|
+
el2.style.height = `${Math.min(Math.max(el2.scrollHeight, MIN_HEIGHT), MAX_HEIGHT)}px`;
|
|
913
|
+
}, []);
|
|
914
|
+
useEffect(adjustHeight, [value, adjustHeight]);
|
|
915
|
+
const send = onSend ?? ((message, attached) => void ctx?.chat.sendMessage(message, attached ? { files: attached } : void 0));
|
|
916
|
+
const stop = onStop ?? (ctx ? () => void ctx.chat.cancel() : void 0);
|
|
917
|
+
const isBusy = busy ?? ctx?.chat.isStreaming ?? false;
|
|
918
|
+
const isDisabled = disabled ?? ctx?.chat.isPaused ?? false;
|
|
919
|
+
const submit = () => {
|
|
920
|
+
const text = value.trim();
|
|
921
|
+
if (!text && files.length === 0) return;
|
|
922
|
+
send(text, files.length ? files : void 0);
|
|
923
|
+
setValue("");
|
|
924
|
+
setFiles([]);
|
|
925
|
+
};
|
|
926
|
+
const canSend = !isDisabled && !isBusy && (Boolean(value.trim()) || files.length > 0);
|
|
927
|
+
return /* @__PURE__ */ jsx("div", { className: cx("agno-input", cn.input, className), children: /* @__PURE__ */ jsxs("div", { className: "agno-input__dock", children: [
|
|
928
|
+
/* @__PURE__ */ jsx(
|
|
929
|
+
FilePreview,
|
|
930
|
+
{
|
|
931
|
+
files,
|
|
932
|
+
onRemove: (i) => setFiles((prev) => prev.filter((_, j) => j !== i)),
|
|
933
|
+
onClear: () => setFiles([]),
|
|
934
|
+
className: cn.files
|
|
935
|
+
}
|
|
936
|
+
),
|
|
937
|
+
/* @__PURE__ */ jsx("div", { className: "agno-input__field", children: /* @__PURE__ */ jsx(
|
|
938
|
+
"textarea",
|
|
939
|
+
{
|
|
940
|
+
ref: textareaRef,
|
|
941
|
+
className: cx("agno-input__textarea", cn.textarea),
|
|
942
|
+
value,
|
|
943
|
+
placeholder: placeholder ?? (isBusy ? "Running..." : "Ask anything..."),
|
|
944
|
+
disabled: isDisabled,
|
|
945
|
+
rows: 1,
|
|
946
|
+
onChange: (e) => setValue(e.target.value),
|
|
947
|
+
onKeyDown: (e) => {
|
|
948
|
+
if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.shiftKey) {
|
|
949
|
+
e.preventDefault();
|
|
950
|
+
if (canSend) submit();
|
|
951
|
+
}
|
|
952
|
+
}
|
|
953
|
+
}
|
|
954
|
+
) }),
|
|
955
|
+
/* @__PURE__ */ jsxs("div", { className: cx("agno-input__row", cn.inputRow), children: [
|
|
956
|
+
/* @__PURE__ */ jsxs("div", { className: "agno-input__actions", children: [
|
|
957
|
+
leading,
|
|
958
|
+
allowFiles && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
959
|
+
/* @__PURE__ */ jsx(
|
|
960
|
+
"button",
|
|
961
|
+
{
|
|
962
|
+
type: "button",
|
|
963
|
+
className: cx("agno-btn", "agno-btn--outline", "agno-btn--icon", cn.attachButton),
|
|
964
|
+
onClick: () => fileRef.current?.click(),
|
|
965
|
+
disabled: isDisabled,
|
|
966
|
+
"aria-label": "Attach files",
|
|
967
|
+
children: /* @__PURE__ */ jsx(Paperclip, { size: 16 })
|
|
968
|
+
}
|
|
969
|
+
),
|
|
970
|
+
/* @__PURE__ */ jsx(
|
|
971
|
+
"input",
|
|
972
|
+
{
|
|
973
|
+
ref: fileRef,
|
|
974
|
+
type: "file",
|
|
975
|
+
multiple: true,
|
|
976
|
+
hidden: true,
|
|
977
|
+
onChange: (e) => setFiles((prev) => [...prev, ...Array.from(e.target.files ?? [])])
|
|
978
|
+
}
|
|
979
|
+
)
|
|
980
|
+
] })
|
|
981
|
+
] }),
|
|
982
|
+
/* @__PURE__ */ jsxs("div", { className: "agno-input__actions", children: [
|
|
983
|
+
trailing,
|
|
984
|
+
isBusy && stop ? /* @__PURE__ */ jsx(
|
|
985
|
+
"button",
|
|
986
|
+
{
|
|
987
|
+
type: "button",
|
|
988
|
+
className: cx("agno-btn", "agno-btn--destructive", "agno-btn--icon", cn.stopButton),
|
|
989
|
+
onClick: stop,
|
|
990
|
+
"aria-label": "Stop",
|
|
991
|
+
children: /* @__PURE__ */ jsx(Stop, { size: 16 })
|
|
992
|
+
}
|
|
993
|
+
) : /* @__PURE__ */ jsx(
|
|
994
|
+
"button",
|
|
995
|
+
{
|
|
996
|
+
type: "button",
|
|
997
|
+
className: cx("agno-btn", "agno-btn--icon", cn.sendButton),
|
|
998
|
+
onClick: submit,
|
|
999
|
+
disabled: !canSend,
|
|
1000
|
+
"aria-label": "Send",
|
|
1001
|
+
children: /* @__PURE__ */ jsx(ArrowUp, { size: 16 })
|
|
1002
|
+
}
|
|
1003
|
+
)
|
|
1004
|
+
] })
|
|
1005
|
+
] })
|
|
1006
|
+
] }) });
|
|
1007
|
+
}
|
|
1008
|
+
function normalizeFollowups(items) {
|
|
1009
|
+
if (!items?.length) return [];
|
|
1010
|
+
const seen = /* @__PURE__ */ new Set();
|
|
1011
|
+
const out = [];
|
|
1012
|
+
for (const raw of items) {
|
|
1013
|
+
if (typeof raw !== "string") continue;
|
|
1014
|
+
const text = raw.replace(/\s+/g, " ").trim();
|
|
1015
|
+
const key = text.toLowerCase();
|
|
1016
|
+
if (!text || seen.has(key)) continue;
|
|
1017
|
+
seen.add(key);
|
|
1018
|
+
out.push(text);
|
|
1019
|
+
}
|
|
1020
|
+
return out;
|
|
1021
|
+
}
|
|
1022
|
+
function Followups({
|
|
1023
|
+
items,
|
|
1024
|
+
onSelect,
|
|
1025
|
+
title = "Related questions",
|
|
1026
|
+
lines = 1,
|
|
1027
|
+
max,
|
|
1028
|
+
disabled,
|
|
1029
|
+
className,
|
|
1030
|
+
classNames
|
|
1031
|
+
}) {
|
|
1032
|
+
const cn = useResolvedClassNames(classNames);
|
|
1033
|
+
const prompts = normalizeFollowups(items).slice(0, max ?? void 0);
|
|
1034
|
+
if (prompts.length === 0) return null;
|
|
1035
|
+
const clamp2 = lines === false ? "none" : Math.max(1, Math.floor(lines));
|
|
1036
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("agno-followups", cn.followups, className), role: "group", "aria-label": "Related questions", children: [
|
|
1037
|
+
title != null && /* @__PURE__ */ jsx("div", { className: cx("agno-followups__head", cn.followupsHead), children: title }),
|
|
1038
|
+
/* @__PURE__ */ jsx("div", { className: "agno-followups__list", children: prompts.map((prompt) => /* @__PURE__ */ jsx(
|
|
1039
|
+
"button",
|
|
1040
|
+
{
|
|
1041
|
+
type: "button",
|
|
1042
|
+
className: cx("agno-followup", cn.followup),
|
|
1043
|
+
style: { "--agno-followup-lines": clamp2 },
|
|
1044
|
+
title: prompt,
|
|
1045
|
+
disabled,
|
|
1046
|
+
onClick: () => onSelect(prompt),
|
|
1047
|
+
children: /* @__PURE__ */ jsx("span", { className: "agno-followup__text", children: prompt })
|
|
1048
|
+
},
|
|
1049
|
+
prompt
|
|
1050
|
+
)) })
|
|
1051
|
+
] });
|
|
1052
|
+
}
|
|
1053
|
+
var isBoolField = (f) => f.field_type === "bool" || f.field_type === "boolean";
|
|
1054
|
+
function buildAsks(message, entityType) {
|
|
1055
|
+
const fromTools = (message.tool_calls ?? []).filter((t) => t.requires_confirmation || t.requires_user_input).map((t) => ({
|
|
1056
|
+
id: t.tool_call_id ?? `${t.tool_name}`,
|
|
1057
|
+
name: t.tool_name,
|
|
1058
|
+
args: t.tool_args,
|
|
1059
|
+
needsConfirmation: Boolean(t.requires_confirmation) && t.confirmed == null,
|
|
1060
|
+
fields: t.requires_user_input ? t.user_input_schema ?? [] : [],
|
|
1061
|
+
tool: t
|
|
1062
|
+
}));
|
|
1063
|
+
const fromReqs = (message.requirements ?? []).map((r) => ({
|
|
1064
|
+
id: r.id,
|
|
1065
|
+
name: r.tool_execution?.tool_name,
|
|
1066
|
+
args: r.tool_execution?.tool_args,
|
|
1067
|
+
needsConfirmation: Boolean(r.tool_execution?.requires_confirmation) || r.confirmation == null,
|
|
1068
|
+
fields: r.user_input_schema ?? r.tool_execution?.user_input_schema ?? [],
|
|
1069
|
+
requirement: r
|
|
1070
|
+
}));
|
|
1071
|
+
if (entityType === "workflow") return fromReqs.length ? fromReqs : fromTools;
|
|
1072
|
+
return fromTools.length ? fromTools : fromReqs;
|
|
1073
|
+
}
|
|
1074
|
+
function HumanInput({
|
|
1075
|
+
message,
|
|
1076
|
+
entityType,
|
|
1077
|
+
busy,
|
|
1078
|
+
onResolve,
|
|
1079
|
+
className
|
|
1080
|
+
}) {
|
|
1081
|
+
const asks = useMemo(() => buildAsks(message, entityType), [message, entityType]);
|
|
1082
|
+
const [choices, setChoices] = useState({});
|
|
1083
|
+
const [values, setValues] = useState({});
|
|
1084
|
+
const [reasons, setReasons] = useState({});
|
|
1085
|
+
const [openArgs, setOpenArgs] = useState({});
|
|
1086
|
+
if (asks.length === 0) return null;
|
|
1087
|
+
const setValue = (id, name, value) => setValues((v) => ({ ...v, [id]: { ...v[id] ?? {}, [name]: value } }));
|
|
1088
|
+
const valueFor = (ask, field) => values[ask.id]?.[field.name] ?? field.value ?? (isBoolField(field) ? false : "");
|
|
1089
|
+
const fillFields = (ask) => ask.fields.map((f) => ({ ...f, value: valueFor(ask, f) }));
|
|
1090
|
+
const ready = asks.every((a) => !a.needsConfirmation || choices[a.id]);
|
|
1091
|
+
const submit = () => {
|
|
1092
|
+
if (entityType === "workflow") {
|
|
1093
|
+
const stepRequirements = asks.map((a) => {
|
|
1094
|
+
const approved = a.needsConfirmation ? choices[a.id] === "confirm" : true;
|
|
1095
|
+
return {
|
|
1096
|
+
id: a.id,
|
|
1097
|
+
confirmation: approved,
|
|
1098
|
+
...a.fields.length ? { user_input_schema: fillFields(a) } : {},
|
|
1099
|
+
tool_execution: a.requirement?.tool_execution,
|
|
1100
|
+
...reasons[a.id] ? { confirmation_note: reasons[a.id] } : {}
|
|
1101
|
+
};
|
|
1102
|
+
});
|
|
1103
|
+
onResolve({ stepRequirements });
|
|
1104
|
+
return;
|
|
1105
|
+
}
|
|
1106
|
+
const tools = asks.map((a) => {
|
|
1107
|
+
const base = a.tool ?? { tool_call_id: a.id, tool_name: a.name };
|
|
1108
|
+
const approved = a.needsConfirmation ? choices[a.id] === "confirm" : true;
|
|
1109
|
+
return {
|
|
1110
|
+
...base,
|
|
1111
|
+
...a.needsConfirmation ? { confirmed: approved } : {},
|
|
1112
|
+
...a.fields.length ? { answered: true, user_input_schema: fillFields(a) } : {},
|
|
1113
|
+
...reasons[a.id] ? { confirmation_note: reasons[a.id] } : {}
|
|
1114
|
+
};
|
|
1115
|
+
});
|
|
1116
|
+
onResolve({ tools });
|
|
1117
|
+
};
|
|
1118
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("agno-hitl", className), children: [
|
|
1119
|
+
/* @__PURE__ */ jsx("div", { className: "agno-hitl__title", children: "Your input is needed" }),
|
|
1120
|
+
asks.map((ask) => {
|
|
1121
|
+
const choice = choices[ask.id];
|
|
1122
|
+
const hasArgs = ask.args && Object.keys(ask.args).length > 0;
|
|
1123
|
+
const argsOpen = openArgs[ask.id] ?? true;
|
|
1124
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-hitl-card", children: [
|
|
1125
|
+
/* @__PURE__ */ jsxs("div", { className: "agno-hitl-card__head", children: [
|
|
1126
|
+
/* @__PURE__ */ jsxs("span", { className: "agno-hitl-card__tool", children: [
|
|
1127
|
+
/* @__PURE__ */ jsx(Wrench, { size: 12 }),
|
|
1128
|
+
ask.name ?? "tool"
|
|
1129
|
+
] }),
|
|
1130
|
+
ask.needsConfirmation && /* @__PURE__ */ jsxs("span", { className: "agno-hitl-card__choices", children: [
|
|
1131
|
+
/* @__PURE__ */ jsx(
|
|
1132
|
+
"button",
|
|
1133
|
+
{
|
|
1134
|
+
type: "button",
|
|
1135
|
+
className: `agno-hitl-card__choice ${choice === "reject" ? "is-active is-reject" : ""}`,
|
|
1136
|
+
"aria-label": "Reject",
|
|
1137
|
+
disabled: busy,
|
|
1138
|
+
onClick: () => setChoices((c) => ({ ...c, [ask.id]: "reject" })),
|
|
1139
|
+
children: /* @__PURE__ */ jsx(Close, { size: 14 })
|
|
1140
|
+
}
|
|
1141
|
+
),
|
|
1142
|
+
/* @__PURE__ */ jsx(
|
|
1143
|
+
"button",
|
|
1144
|
+
{
|
|
1145
|
+
type: "button",
|
|
1146
|
+
className: `agno-hitl-card__choice ${choice === "confirm" ? "is-active is-confirm" : ""}`,
|
|
1147
|
+
"aria-label": "Approve",
|
|
1148
|
+
disabled: busy,
|
|
1149
|
+
onClick: () => setChoices((c) => ({ ...c, [ask.id]: "confirm" })),
|
|
1150
|
+
children: /* @__PURE__ */ jsx(Check, { size: 14 })
|
|
1151
|
+
}
|
|
1152
|
+
)
|
|
1153
|
+
] })
|
|
1154
|
+
] }),
|
|
1155
|
+
hasArgs && /* @__PURE__ */ jsxs("div", { className: "agno-hitl-card__args", children: [
|
|
1156
|
+
/* @__PURE__ */ jsxs(
|
|
1157
|
+
"button",
|
|
1158
|
+
{
|
|
1159
|
+
type: "button",
|
|
1160
|
+
className: "agno-hitl-card__args-head",
|
|
1161
|
+
onClick: () => setOpenArgs((o) => ({ ...o, [ask.id]: !argsOpen })),
|
|
1162
|
+
"aria-expanded": argsOpen,
|
|
1163
|
+
children: [
|
|
1164
|
+
"Arguments",
|
|
1165
|
+
/* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "agno-hitl-card__chev" })
|
|
1166
|
+
]
|
|
1167
|
+
}
|
|
1168
|
+
),
|
|
1169
|
+
argsOpen && /* @__PURE__ */ jsx("div", { className: "agno-hitl-card__args-body", children: Object.entries(ask.args ?? {}).map(([k, v]) => /* @__PURE__ */ jsxs("div", { className: "agno-hitl-card__arg", children: [
|
|
1170
|
+
/* @__PURE__ */ jsx("span", { className: "agno-hitl-card__arg-key", children: k }),
|
|
1171
|
+
/* @__PURE__ */ jsx("span", { className: "agno-hitl-card__arg-val", children: typeof v === "object" ? JSON.stringify(v) : String(v) })
|
|
1172
|
+
] }, k)) })
|
|
1173
|
+
] }),
|
|
1174
|
+
choice === "reject" && /* @__PURE__ */ jsx(
|
|
1175
|
+
"textarea",
|
|
1176
|
+
{
|
|
1177
|
+
className: "agno-hitl-card__reason",
|
|
1178
|
+
placeholder: "Reason for rejection (optional)\u2026",
|
|
1179
|
+
rows: 2,
|
|
1180
|
+
value: reasons[ask.id] ?? "",
|
|
1181
|
+
disabled: busy,
|
|
1182
|
+
onChange: (e) => setReasons((r) => ({ ...r, [ask.id]: e.target.value }))
|
|
1183
|
+
}
|
|
1184
|
+
),
|
|
1185
|
+
ask.fields.length > 0 && /* @__PURE__ */ jsx("div", { className: "agno-hitl-card__fields", children: ask.fields.map((field) => /* @__PURE__ */ jsxs("label", { className: `agno-hitl-card__field ${isBoolField(field) ? "is-bool" : ""}`, children: [
|
|
1186
|
+
/* @__PURE__ */ jsx("span", { className: "agno-hitl-card__field-name", children: field.description || field.name }),
|
|
1187
|
+
isBoolField(field) ? /* @__PURE__ */ jsx(
|
|
1188
|
+
"input",
|
|
1189
|
+
{
|
|
1190
|
+
type: "checkbox",
|
|
1191
|
+
checked: Boolean(valueFor(ask, field)),
|
|
1192
|
+
disabled: busy,
|
|
1193
|
+
onChange: (e) => setValue(ask.id, field.name, e.target.checked)
|
|
1194
|
+
}
|
|
1195
|
+
) : /* @__PURE__ */ jsx(
|
|
1196
|
+
"input",
|
|
1197
|
+
{
|
|
1198
|
+
className: "agno-hitl-card__input",
|
|
1199
|
+
value: String(valueFor(ask, field) ?? ""),
|
|
1200
|
+
placeholder: field.field_type ?? "text",
|
|
1201
|
+
disabled: busy,
|
|
1202
|
+
onChange: (e) => setValue(ask.id, field.name, e.target.value)
|
|
1203
|
+
}
|
|
1204
|
+
)
|
|
1205
|
+
] }, field.name)) })
|
|
1206
|
+
] }, ask.id);
|
|
1207
|
+
}),
|
|
1208
|
+
/* @__PURE__ */ jsx("div", { className: "agno-hitl__actions", children: /* @__PURE__ */ jsx("button", { type: "button", className: "agno-btn", disabled: busy || !ready, onClick: submit, children: "Continue" }) })
|
|
1209
|
+
] });
|
|
1210
|
+
}
|
|
1211
|
+
function metaUrl(meta) {
|
|
1212
|
+
if (!meta) return void 0;
|
|
1213
|
+
for (const key of ["url", "link", "source_url", "source", "href"]) {
|
|
1214
|
+
const value = meta[key];
|
|
1215
|
+
if (typeof value === "string" && /^https?:\/\//i.test(value)) return value;
|
|
1216
|
+
}
|
|
1217
|
+
return void 0;
|
|
1218
|
+
}
|
|
1219
|
+
function sourceHost(url) {
|
|
1220
|
+
if (!url) return void 0;
|
|
1221
|
+
try {
|
|
1222
|
+
return new URL(url).hostname.replace(/^www\./, "");
|
|
1223
|
+
} catch {
|
|
1224
|
+
return void 0;
|
|
1225
|
+
}
|
|
1226
|
+
}
|
|
1227
|
+
function faviconUrl(url) {
|
|
1228
|
+
if (!url) return void 0;
|
|
1229
|
+
try {
|
|
1230
|
+
return new URL("/favicon.ico", url).href;
|
|
1231
|
+
} catch {
|
|
1232
|
+
return void 0;
|
|
1233
|
+
}
|
|
1234
|
+
}
|
|
1235
|
+
function displayUrl(url) {
|
|
1236
|
+
if (!url) return void 0;
|
|
1237
|
+
const host = sourceHost(url);
|
|
1238
|
+
if (!host) return void 0;
|
|
1239
|
+
try {
|
|
1240
|
+
const { pathname } = new URL(url);
|
|
1241
|
+
const path = pathname.replace(/\/$/, "");
|
|
1242
|
+
if (!path) return host;
|
|
1243
|
+
const full = `${host}${path}`;
|
|
1244
|
+
return full.length > 42 ? `${full.slice(0, 41)}\u2026` : full;
|
|
1245
|
+
} catch {
|
|
1246
|
+
return host;
|
|
1247
|
+
}
|
|
1248
|
+
}
|
|
1249
|
+
function clamp(text, max = 180) {
|
|
1250
|
+
if (!text) return void 0;
|
|
1251
|
+
const flat = text.replace(/\s+/g, " ").trim();
|
|
1252
|
+
if (!flat) return void 0;
|
|
1253
|
+
return flat.length > max ? `${flat.slice(0, max - 1)}\u2026` : flat;
|
|
1254
|
+
}
|
|
1255
|
+
function toSource(entry, index, idBase) {
|
|
1256
|
+
const host = sourceHost(entry.url);
|
|
1257
|
+
return {
|
|
1258
|
+
index,
|
|
1259
|
+
anchorId: `${idBase}-source-${index}`,
|
|
1260
|
+
kind: entry.url ? "url" : "document",
|
|
1261
|
+
url: entry.url,
|
|
1262
|
+
title: entry.title?.trim() || host || entry.url || `Source ${index}`,
|
|
1263
|
+
snippet: clamp(entry.snippet),
|
|
1264
|
+
query: entry.query
|
|
1265
|
+
};
|
|
1266
|
+
}
|
|
1267
|
+
function collectSources(references, citations, idBase = "agno") {
|
|
1268
|
+
const sources = [];
|
|
1269
|
+
const byUrl = /* @__PURE__ */ new Map();
|
|
1270
|
+
const push = (entry) => {
|
|
1271
|
+
if (entry.url) {
|
|
1272
|
+
const existing = byUrl.get(entry.url);
|
|
1273
|
+
if (existing) {
|
|
1274
|
+
if (!existing.snippet && entry.snippet) existing.snippet = clamp(entry.snippet);
|
|
1275
|
+
if (entry.title && (!existing.title || existing.title === sourceHost(entry.url))) {
|
|
1276
|
+
existing.title = entry.title;
|
|
1277
|
+
}
|
|
1278
|
+
return;
|
|
1279
|
+
}
|
|
1280
|
+
}
|
|
1281
|
+
const source = toSource(entry, sources.length + 1, idBase);
|
|
1282
|
+
sources.push(source);
|
|
1283
|
+
if (source.url) byUrl.set(source.url, source);
|
|
1284
|
+
};
|
|
1285
|
+
for (const group of references ?? []) {
|
|
1286
|
+
for (const ref of group.references ?? []) {
|
|
1287
|
+
push({
|
|
1288
|
+
url: metaUrl(ref.meta_data),
|
|
1289
|
+
title: ref.name,
|
|
1290
|
+
snippet: ref.content,
|
|
1291
|
+
query: group.query
|
|
1292
|
+
});
|
|
1293
|
+
}
|
|
1294
|
+
}
|
|
1295
|
+
for (const cited of citations?.urls ?? []) {
|
|
1296
|
+
if (!cited?.url) continue;
|
|
1297
|
+
push({ url: cited.url, title: cited.title });
|
|
1298
|
+
}
|
|
1299
|
+
return sources;
|
|
1300
|
+
}
|
|
1301
|
+
var MARKDOWN_LINK = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
|
|
1302
|
+
function withoutCode(text) {
|
|
1303
|
+
return text.replace(/```[\s\S]*?```/g, " ").replace(/`[^`]*`/g, " ");
|
|
1304
|
+
}
|
|
1305
|
+
function sourcesFromMarkdown(content, idBase = "agno") {
|
|
1306
|
+
if (!content) return [];
|
|
1307
|
+
const text = withoutCode(content);
|
|
1308
|
+
const titles = /* @__PURE__ */ new Map();
|
|
1309
|
+
const cited = /* @__PURE__ */ new Map();
|
|
1310
|
+
for (const [, label2, url] of text.matchAll(MARKDOWN_LINK)) {
|
|
1311
|
+
const trimmed = label2.trim();
|
|
1312
|
+
if (/^\d+$/.test(trimmed)) {
|
|
1313
|
+
if (!cited.has(Number(trimmed))) cited.set(Number(trimmed), url);
|
|
1314
|
+
} else if (!titles.has(url)) {
|
|
1315
|
+
titles.set(url, trimmed);
|
|
1316
|
+
}
|
|
1317
|
+
}
|
|
1318
|
+
if (cited.size === 0) return [];
|
|
1319
|
+
return [...cited.entries()].sort(([a], [b]) => a - b).map(([index, url]) => ({
|
|
1320
|
+
index,
|
|
1321
|
+
anchorId: `${idBase}-source-${index}`,
|
|
1322
|
+
kind: "url",
|
|
1323
|
+
url,
|
|
1324
|
+
title: titles.get(url) ?? sourceHost(url) ?? url
|
|
1325
|
+
}));
|
|
1326
|
+
}
|
|
1327
|
+
var SOURCES_LINE = /^[ \t]*(?:\*\*|__)?Sources?\s*:?(?:\*\*|__)?:?[ \t]*/gim;
|
|
1328
|
+
function withoutSourcesLine(content) {
|
|
1329
|
+
const matches = [...content.matchAll(SOURCES_LINE)];
|
|
1330
|
+
const last = matches[matches.length - 1];
|
|
1331
|
+
if (!last || last.index === void 0) return content;
|
|
1332
|
+
const rest = content.slice(last.index + last[0].length);
|
|
1333
|
+
const leftovers = rest.replace(MARKDOWN_LINK, "").replace(/\[[^\]]*(?:\]\([^)]*)?$/, "");
|
|
1334
|
+
if (/[^\s,;\-*\u2022\d.]/.test(leftovers)) return content;
|
|
1335
|
+
return content.slice(0, last.index).replace(/\s+$/, "");
|
|
1336
|
+
}
|
|
1337
|
+
var CODE_SPANS = /(```[\s\S]*?```|`[^`]*`)/g;
|
|
1338
|
+
var MARKER = /( ?)\[\^?(\d+(?:\s*,\s*\d+)*)\]/g;
|
|
1339
|
+
function linkCitations(content, sources) {
|
|
1340
|
+
if (!content || sources.length === 0) return content;
|
|
1341
|
+
return content.split(CODE_SPANS).map((segment, i) => {
|
|
1342
|
+
if (i % 2 === 1) return segment;
|
|
1343
|
+
return segment.replace(
|
|
1344
|
+
MARKER,
|
|
1345
|
+
(marker, _space, numbers, offset, whole) => {
|
|
1346
|
+
const before = whole[offset - 1];
|
|
1347
|
+
const after = whole[offset + marker.length];
|
|
1348
|
+
if (before === "]" || before === "!" || after === "(" || after === ":") return marker;
|
|
1349
|
+
const cited = numbers.split(",").map((n) => sources.find((s) => s.index === Number(n.trim())));
|
|
1350
|
+
if (cited.some((s) => !s)) return marker;
|
|
1351
|
+
return cited.map((s) => `[${s.index}](${s.url ?? `#${s.anchorId}`})`).join("");
|
|
1352
|
+
}
|
|
1353
|
+
);
|
|
1354
|
+
}).join("");
|
|
1355
|
+
}
|
|
1356
|
+
var SourcesContext = createContext([]);
|
|
1357
|
+
var SourcesProvider = SourcesContext.Provider;
|
|
1358
|
+
function useSources() {
|
|
1359
|
+
return useContext(SourcesContext);
|
|
1360
|
+
}
|
|
1361
|
+
var THEMES = { light: "github-light", dark: "monokai" };
|
|
1362
|
+
var highlighter;
|
|
1363
|
+
var booting;
|
|
1364
|
+
var loading = /* @__PURE__ */ new Map();
|
|
1365
|
+
var loaded = /* @__PURE__ */ new Set();
|
|
1366
|
+
var unsupported = /* @__PURE__ */ new Set();
|
|
1367
|
+
async function boot() {
|
|
1368
|
+
if (highlighter) return highlighter;
|
|
1369
|
+
booting ?? (booting = (async () => {
|
|
1370
|
+
const [{ createHighlighterCore }, { createJavaScriptRegexEngine }, { bundledThemes }] = await Promise.all([import('shiki/core'), import('shiki/engine/javascript'), import('shiki/themes')]);
|
|
1371
|
+
highlighter = await createHighlighterCore({
|
|
1372
|
+
themes: [bundledThemes[THEMES.light], bundledThemes[THEMES.dark]],
|
|
1373
|
+
langs: [],
|
|
1374
|
+
// No WASM: the JS engine keeps this a plain import. `forgiving` skips
|
|
1375
|
+
// the odd grammar rule it can't translate rather than failing the block.
|
|
1376
|
+
engine: createJavaScriptRegexEngine({ forgiving: true })
|
|
1377
|
+
});
|
|
1378
|
+
return highlighter;
|
|
1379
|
+
})());
|
|
1380
|
+
return booting;
|
|
1381
|
+
}
|
|
1382
|
+
function ensureLanguage(lang) {
|
|
1383
|
+
let pending = loading.get(lang);
|
|
1384
|
+
if (!pending) {
|
|
1385
|
+
pending = (async () => {
|
|
1386
|
+
const [core, { bundledLanguages }] = await Promise.all([boot(), import('shiki/langs')]);
|
|
1387
|
+
const grammar = bundledLanguages[lang];
|
|
1388
|
+
if (!grammar) {
|
|
1389
|
+
unsupported.add(lang);
|
|
1390
|
+
return;
|
|
1391
|
+
}
|
|
1392
|
+
await core.loadLanguage(grammar);
|
|
1393
|
+
loaded.add(lang);
|
|
1394
|
+
})().catch(() => {
|
|
1395
|
+
unsupported.add(lang);
|
|
1396
|
+
});
|
|
1397
|
+
loading.set(lang, pending);
|
|
1398
|
+
}
|
|
1399
|
+
return pending;
|
|
1400
|
+
}
|
|
1401
|
+
function normalizeLanguage(language) {
|
|
1402
|
+
const lang = language?.trim().toLowerCase();
|
|
1403
|
+
return lang || void 0;
|
|
1404
|
+
}
|
|
1405
|
+
function useHighlight(code, language) {
|
|
1406
|
+
const [, rerender] = useReducer((n) => n + 1, 0);
|
|
1407
|
+
const lang = normalizeLanguage(language);
|
|
1408
|
+
const ready = Boolean(lang && loaded.has(lang));
|
|
1409
|
+
useEffect(() => {
|
|
1410
|
+
if (!lang || ready || unsupported.has(lang)) return;
|
|
1411
|
+
let cancelled = false;
|
|
1412
|
+
void ensureLanguage(lang).then(() => {
|
|
1413
|
+
if (!cancelled) rerender();
|
|
1414
|
+
});
|
|
1415
|
+
return () => {
|
|
1416
|
+
cancelled = true;
|
|
1417
|
+
};
|
|
1418
|
+
}, [lang, ready]);
|
|
1419
|
+
return useMemo(() => {
|
|
1420
|
+
if (!lang || !ready || !highlighter) return null;
|
|
1421
|
+
try {
|
|
1422
|
+
return highlighter.codeToTokens(code, { lang, themes: THEMES, defaultColor: false }).tokens;
|
|
1423
|
+
} catch {
|
|
1424
|
+
return null;
|
|
1425
|
+
}
|
|
1426
|
+
}, [code, lang, ready]);
|
|
1427
|
+
}
|
|
1428
|
+
var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
|
|
1429
|
+
var caches = /* @__PURE__ */ new WeakMap();
|
|
1430
|
+
var inflight = /* @__PURE__ */ new WeakMap();
|
|
1431
|
+
function cacheFor(store, key) {
|
|
1432
|
+
let map = store.get(key);
|
|
1433
|
+
if (!map) {
|
|
1434
|
+
map = /* @__PURE__ */ new Map();
|
|
1435
|
+
store.set(key, map);
|
|
1436
|
+
}
|
|
1437
|
+
return map;
|
|
1438
|
+
}
|
|
1439
|
+
function useLinkPreviewResolver() {
|
|
1440
|
+
return useOptionalChatContext()?.resolveLinkPreview;
|
|
1441
|
+
}
|
|
1442
|
+
function useLinkPreview(url, enabled) {
|
|
1443
|
+
const resolve = useLinkPreviewResolver();
|
|
1444
|
+
const cached = url && resolve ? cacheFor(caches, resolve).get(url) : void 0;
|
|
1445
|
+
const [preview, setPreview] = useState(cached ?? null);
|
|
1446
|
+
const [loading2, setLoading] = useState(false);
|
|
1447
|
+
useEffect(() => {
|
|
1448
|
+
if (!enabled || !url || !resolve) return;
|
|
1449
|
+
const store = cacheFor(caches, resolve);
|
|
1450
|
+
if (store.has(url)) {
|
|
1451
|
+
setPreview(store.get(url) ?? null);
|
|
1452
|
+
return;
|
|
1453
|
+
}
|
|
1454
|
+
let live = true;
|
|
1455
|
+
const pending = cacheFor(inflight, resolve);
|
|
1456
|
+
const request = pending.get(url) ?? (async () => {
|
|
1457
|
+
try {
|
|
1458
|
+
return await resolve(url) ?? null;
|
|
1459
|
+
} catch {
|
|
1460
|
+
return null;
|
|
1461
|
+
}
|
|
1462
|
+
})();
|
|
1463
|
+
pending.set(url, request);
|
|
1464
|
+
setLoading(true);
|
|
1465
|
+
void request.then((result) => {
|
|
1466
|
+
store.set(url, result);
|
|
1467
|
+
pending.delete(url);
|
|
1468
|
+
if (!live) return;
|
|
1469
|
+
setPreview(result);
|
|
1470
|
+
setLoading(false);
|
|
1471
|
+
});
|
|
1472
|
+
return () => {
|
|
1473
|
+
live = false;
|
|
1474
|
+
};
|
|
1475
|
+
}, [enabled, url, resolve]);
|
|
1476
|
+
return { preview, loading: loading2 };
|
|
1477
|
+
}
|
|
1478
|
+
function Favicon({
|
|
1479
|
+
url,
|
|
1480
|
+
kind = "url",
|
|
1481
|
+
size = 14,
|
|
1482
|
+
className
|
|
1483
|
+
}) {
|
|
1484
|
+
const src = faviconUrl(url);
|
|
1485
|
+
const [failed, setFailed] = useState(false);
|
|
1486
|
+
useEffect(() => setFailed(false), [src]);
|
|
1487
|
+
if (kind === "document" || !src || failed) {
|
|
1488
|
+
const Glyph2 = kind === "document" ? BookOpen : Globe;
|
|
1489
|
+
return /* @__PURE__ */ jsx("span", { className: cx("agno-favicon", "agno-favicon--glyph", className), "aria-hidden": true, children: /* @__PURE__ */ jsx(Glyph2, { size }) });
|
|
1490
|
+
}
|
|
1491
|
+
return /* @__PURE__ */ jsx(
|
|
1492
|
+
"img",
|
|
1493
|
+
{
|
|
1494
|
+
className: cx("agno-favicon", className),
|
|
1495
|
+
src,
|
|
1496
|
+
alt: "",
|
|
1497
|
+
width: size,
|
|
1498
|
+
height: size,
|
|
1499
|
+
loading: "lazy",
|
|
1500
|
+
decoding: "async",
|
|
1501
|
+
onError: () => setFailed(true),
|
|
1502
|
+
"aria-hidden": true
|
|
1503
|
+
}
|
|
1504
|
+
);
|
|
1505
|
+
}
|
|
1506
|
+
function LinkPreviewCard({
|
|
1507
|
+
source,
|
|
1508
|
+
preview,
|
|
1509
|
+
loading: loading2,
|
|
1510
|
+
className
|
|
1511
|
+
}) {
|
|
1512
|
+
const site = preview?.siteName ?? displayUrl(source.url) ?? source.query ?? "Knowledge base";
|
|
1513
|
+
const title = preview?.title ?? source.title;
|
|
1514
|
+
const body = preview?.description ?? source.snippet;
|
|
1515
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("agno-preview", className), "data-loading": loading2 ? "true" : void 0, children: [
|
|
1516
|
+
/* @__PURE__ */ jsxs("div", { className: "agno-preview__site", children: [
|
|
1517
|
+
/* @__PURE__ */ jsx(Favicon, { url: preview?.favicon ?? source.url, kind: source.kind }),
|
|
1518
|
+
/* @__PURE__ */ jsx("span", { className: "agno-preview__host", children: site })
|
|
1519
|
+
] }),
|
|
1520
|
+
/* @__PURE__ */ jsx("div", { className: "agno-preview__title", children: title }),
|
|
1521
|
+
body && /* @__PURE__ */ jsx("div", { className: "agno-preview__desc", children: body }),
|
|
1522
|
+
preview?.image && /* @__PURE__ */ jsx("img", { className: "agno-preview__image", src: preview.image, alt: "", loading: "lazy" })
|
|
1523
|
+
] });
|
|
1524
|
+
}
|
|
1525
|
+
var PREVIEW_WIDTH = 320;
|
|
1526
|
+
var GAP = 8;
|
|
1527
|
+
var OPEN_DELAY = 140;
|
|
1528
|
+
var CLOSE_DELAY = 120;
|
|
1529
|
+
function usePlacement(anchor, open) {
|
|
1530
|
+
const [placement, setPlacement] = useState(null);
|
|
1531
|
+
useIsomorphicLayoutEffect(() => {
|
|
1532
|
+
if (!open || !anchor) return;
|
|
1533
|
+
const place = () => {
|
|
1534
|
+
const rect = anchor.getBoundingClientRect();
|
|
1535
|
+
const side = rect.top > 220 ? "top" : "bottom";
|
|
1536
|
+
const left = Math.max(
|
|
1537
|
+
GAP,
|
|
1538
|
+
Math.min(
|
|
1539
|
+
rect.left + rect.width / 2 - PREVIEW_WIDTH / 2,
|
|
1540
|
+
window.innerWidth - PREVIEW_WIDTH - GAP
|
|
1541
|
+
)
|
|
1542
|
+
);
|
|
1543
|
+
setPlacement({
|
|
1544
|
+
top: side === "top" ? rect.top - GAP : rect.bottom + GAP,
|
|
1545
|
+
left,
|
|
1546
|
+
side
|
|
1547
|
+
});
|
|
1548
|
+
};
|
|
1549
|
+
place();
|
|
1550
|
+
window.addEventListener("scroll", place, true);
|
|
1551
|
+
window.addEventListener("resize", place);
|
|
1552
|
+
return () => {
|
|
1553
|
+
window.removeEventListener("scroll", place, true);
|
|
1554
|
+
window.removeEventListener("resize", place);
|
|
1555
|
+
};
|
|
1556
|
+
}, [anchor, open]);
|
|
1557
|
+
return placement;
|
|
1558
|
+
}
|
|
1559
|
+
function HoverPreview({
|
|
1560
|
+
source,
|
|
1561
|
+
children,
|
|
1562
|
+
disabled,
|
|
1563
|
+
className
|
|
1564
|
+
}) {
|
|
1565
|
+
const [open, setOpen] = useState(false);
|
|
1566
|
+
const [awake, setAwake] = useState(false);
|
|
1567
|
+
const [anchor, setAnchor] = useState(null);
|
|
1568
|
+
const timer = useRef(null);
|
|
1569
|
+
const id = useId();
|
|
1570
|
+
const cn = useResolvedClassNames();
|
|
1571
|
+
const { preview, loading: loading2 } = useLinkPreview(source.url, awake);
|
|
1572
|
+
const placement = usePlacement(anchor, open);
|
|
1573
|
+
const schedule = useCallback((next) => {
|
|
1574
|
+
if (timer.current) clearTimeout(timer.current);
|
|
1575
|
+
timer.current = setTimeout(
|
|
1576
|
+
() => {
|
|
1577
|
+
setOpen(next);
|
|
1578
|
+
if (next) setAwake(true);
|
|
1579
|
+
},
|
|
1580
|
+
next ? OPEN_DELAY : CLOSE_DELAY
|
|
1581
|
+
);
|
|
1582
|
+
}, []);
|
|
1583
|
+
useEffect(
|
|
1584
|
+
() => () => {
|
|
1585
|
+
if (timer.current) clearTimeout(timer.current);
|
|
1586
|
+
},
|
|
1587
|
+
[]
|
|
1588
|
+
);
|
|
1589
|
+
useEffect(() => {
|
|
1590
|
+
if (!open) return;
|
|
1591
|
+
const onKey = (e) => {
|
|
1592
|
+
if (e.key === "Escape") setOpen(false);
|
|
1593
|
+
};
|
|
1594
|
+
document.addEventListener("keydown", onKey);
|
|
1595
|
+
return () => document.removeEventListener("keydown", onKey);
|
|
1596
|
+
}, [open]);
|
|
1597
|
+
const [mounted, setMounted] = useState(false);
|
|
1598
|
+
useEffect(() => setMounted(true), []);
|
|
1599
|
+
if (disabled) return children;
|
|
1600
|
+
const trigger = isValidElement(children) ? cloneElement(children, {
|
|
1601
|
+
"aria-describedby": open ? id : void 0
|
|
1602
|
+
}) : children;
|
|
1603
|
+
const light = anchor?.closest(".agno-light") ? "agno-light" : void 0;
|
|
1604
|
+
return /* @__PURE__ */ jsxs(
|
|
1605
|
+
"span",
|
|
1606
|
+
{
|
|
1607
|
+
className: cx("agno-hover", className),
|
|
1608
|
+
ref: setAnchor,
|
|
1609
|
+
onMouseEnter: () => schedule(true),
|
|
1610
|
+
onMouseLeave: () => schedule(false),
|
|
1611
|
+
onFocus: () => {
|
|
1612
|
+
setAwake(true);
|
|
1613
|
+
setOpen(true);
|
|
1614
|
+
},
|
|
1615
|
+
onBlur: () => setOpen(false),
|
|
1616
|
+
children: [
|
|
1617
|
+
trigger,
|
|
1618
|
+
mounted && open && placement && createPortal(
|
|
1619
|
+
/* @__PURE__ */ jsx(
|
|
1620
|
+
"div",
|
|
1621
|
+
{
|
|
1622
|
+
id,
|
|
1623
|
+
role: "tooltip",
|
|
1624
|
+
className: cx("agno-hovercard", `agno-hovercard--${placement.side}`, light, cn.linkPreview),
|
|
1625
|
+
style: { top: placement.top, left: placement.left, width: PREVIEW_WIDTH },
|
|
1626
|
+
onMouseEnter: () => schedule(true),
|
|
1627
|
+
onMouseLeave: () => schedule(false),
|
|
1628
|
+
children: /* @__PURE__ */ jsx(LinkPreviewCard, { source, preview, loading: loading2 })
|
|
1629
|
+
}
|
|
1630
|
+
),
|
|
1631
|
+
document.body
|
|
1632
|
+
)
|
|
1633
|
+
]
|
|
1634
|
+
}
|
|
1635
|
+
);
|
|
1636
|
+
}
|
|
1637
|
+
function el(tag, className) {
|
|
1638
|
+
return function Element({ node: _node, className: _theirs, ...rest }) {
|
|
1639
|
+
return React7.createElement(tag, { className, ...rest });
|
|
1640
|
+
};
|
|
1641
|
+
}
|
|
1642
|
+
function sourceForUrl(url, sources) {
|
|
1643
|
+
return url ? sources.find((s) => s.url === url) : void 0;
|
|
1644
|
+
}
|
|
1645
|
+
function citationForLink(label2, href, ctx) {
|
|
1646
|
+
if (!/^\d+$/.test(label2.trim())) return void 0;
|
|
1647
|
+
return sourceForUrl(href, ctx.sources) ?? ctx.sources.find((s) => s.index === Number(label2.trim()));
|
|
1648
|
+
}
|
|
1649
|
+
function labelOf(children) {
|
|
1650
|
+
if (typeof children === "string") return children;
|
|
1651
|
+
if (Array.isArray(children) && children.length === 1 && typeof children[0] === "string") {
|
|
1652
|
+
return children[0];
|
|
1653
|
+
}
|
|
1654
|
+
return "";
|
|
1655
|
+
}
|
|
1656
|
+
function CitationMarker({
|
|
1657
|
+
source,
|
|
1658
|
+
className
|
|
1659
|
+
}) {
|
|
1660
|
+
return /* @__PURE__ */ jsx(HoverPreview, { source, className: "agno-cite__wrap", children: /* @__PURE__ */ jsx(
|
|
1661
|
+
"a",
|
|
1662
|
+
{
|
|
1663
|
+
className: cx("agno-cite", className),
|
|
1664
|
+
href: source.url ?? `#${source.anchorId}`,
|
|
1665
|
+
target: source.url ? "_blank" : void 0,
|
|
1666
|
+
rel: source.url ? "noreferrer noopener" : void 0,
|
|
1667
|
+
"aria-label": `Source ${source.index}: ${source.title}`,
|
|
1668
|
+
children: source.index
|
|
1669
|
+
}
|
|
1670
|
+
) });
|
|
1671
|
+
}
|
|
1672
|
+
var COPIED_FOR = 1600;
|
|
1673
|
+
var CLIPBOARD_TIMEOUT = 400;
|
|
1674
|
+
async function writeClipboard(text) {
|
|
1675
|
+
try {
|
|
1676
|
+
const wrote = await Promise.race([
|
|
1677
|
+
navigator.clipboard.writeText(text).then(() => true),
|
|
1678
|
+
new Promise((resolve) => setTimeout(() => resolve(false), CLIPBOARD_TIMEOUT))
|
|
1679
|
+
]);
|
|
1680
|
+
if (wrote) return true;
|
|
1681
|
+
} catch {
|
|
1682
|
+
}
|
|
1683
|
+
try {
|
|
1684
|
+
const area = document.createElement("textarea");
|
|
1685
|
+
area.value = text;
|
|
1686
|
+
area.setAttribute("readonly", "");
|
|
1687
|
+
area.style.cssText = "position:fixed;top:0;left:-9999px;opacity:0";
|
|
1688
|
+
document.body.appendChild(area);
|
|
1689
|
+
area.select();
|
|
1690
|
+
const copied = document.execCommand("copy");
|
|
1691
|
+
document.body.removeChild(area);
|
|
1692
|
+
return copied;
|
|
1693
|
+
} catch {
|
|
1694
|
+
return false;
|
|
1695
|
+
}
|
|
1696
|
+
}
|
|
1697
|
+
function CopyButton({ text, className }) {
|
|
1698
|
+
const [copied, setCopied] = useState(false);
|
|
1699
|
+
useEffect(() => {
|
|
1700
|
+
if (!copied) return;
|
|
1701
|
+
const timer = setTimeout(() => setCopied(false), COPIED_FOR);
|
|
1702
|
+
return () => clearTimeout(timer);
|
|
1703
|
+
}, [copied]);
|
|
1704
|
+
const copy = async () => {
|
|
1705
|
+
if (await writeClipboard(text())) setCopied(true);
|
|
1706
|
+
};
|
|
1707
|
+
return /* @__PURE__ */ jsx(
|
|
1708
|
+
"button",
|
|
1709
|
+
{
|
|
1710
|
+
type: "button",
|
|
1711
|
+
className: cx("agno-md-copy", copied && "is-copied", className),
|
|
1712
|
+
onClick: copy,
|
|
1713
|
+
"aria-label": copied ? "Copied" : "Copy code",
|
|
1714
|
+
title: copied ? "Copied" : "Copy code",
|
|
1715
|
+
children: copied ? /* @__PURE__ */ jsx(Check, { size: 13 }) : /* @__PURE__ */ jsx(Copy, { size: 13 })
|
|
1716
|
+
}
|
|
1717
|
+
);
|
|
1718
|
+
}
|
|
1719
|
+
function textOf(children) {
|
|
1720
|
+
if (typeof children === "string") return children;
|
|
1721
|
+
if (typeof children === "number") return String(children);
|
|
1722
|
+
if (Array.isArray(children)) return children.map(textOf).join("");
|
|
1723
|
+
if (React7.isValidElement(children)) return textOf(children.props.children);
|
|
1724
|
+
return "";
|
|
1725
|
+
}
|
|
1726
|
+
function fencedCode(children) {
|
|
1727
|
+
const child = Array.isArray(children) ? children[0] : children;
|
|
1728
|
+
if (!React7.isValidElement(child)) {
|
|
1729
|
+
return { code: textOf(children) };
|
|
1730
|
+
}
|
|
1731
|
+
const language = /(?:^|\s)language-([^\s]+)/.exec(child.props.className ?? "")?.[1];
|
|
1732
|
+
return { language, code: textOf(child.props.children).replace(/\n$/, "") };
|
|
1733
|
+
}
|
|
1734
|
+
function plainLines(code) {
|
|
1735
|
+
return code.split("\n").map((line) => [{ content: line, offset: 0 }]);
|
|
1736
|
+
}
|
|
1737
|
+
function CodeBlock({
|
|
1738
|
+
children,
|
|
1739
|
+
copyClass,
|
|
1740
|
+
codeCopy
|
|
1741
|
+
}) {
|
|
1742
|
+
const { language, code } = useMemo(() => fencedCode(children), [children]);
|
|
1743
|
+
const highlighted = useHighlight(code, language);
|
|
1744
|
+
const lines = highlighted ?? plainLines(code);
|
|
1745
|
+
const label2 = normalizeLanguage(language) ?? "text";
|
|
1746
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-md-code-block", "data-language": label2, children: [
|
|
1747
|
+
/* @__PURE__ */ jsxs("div", { className: "agno-md-code-head", children: [
|
|
1748
|
+
/* @__PURE__ */ jsx("span", { className: "agno-md-code-lang", children: label2 }),
|
|
1749
|
+
codeCopy && /* @__PURE__ */ jsx(CopyButton, { className: copyClass, text: () => code })
|
|
1750
|
+
] }),
|
|
1751
|
+
/* @__PURE__ */ jsx("pre", { className: "agno-md-pre", style: { "--agno-code-gutter": `${String(lines.length).length}ch` }, children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children: lines.map((tokens, i) => /* @__PURE__ */ jsxs(React7.Fragment, { children: [
|
|
1752
|
+
/* @__PURE__ */ jsx("span", { className: "agno-md-line", children: tokens.map((token, j) => /* @__PURE__ */ jsx("span", { style: token.htmlStyle, children: token.content }, j)) }),
|
|
1753
|
+
i < lines.length - 1 && "\n"
|
|
1754
|
+
] }, i)) }) })
|
|
1755
|
+
] });
|
|
1756
|
+
}
|
|
1757
|
+
function elementsFor(ctx) {
|
|
1758
|
+
const Link = function Link2({
|
|
1759
|
+
node: _node,
|
|
1760
|
+
className: _theirs,
|
|
1761
|
+
href,
|
|
1762
|
+
children,
|
|
1763
|
+
...rest
|
|
1764
|
+
}) {
|
|
1765
|
+
const cited = citationForLink(labelOf(children), href, ctx);
|
|
1766
|
+
if (cited) return /* @__PURE__ */ jsx(CitationMarker, { source: cited, className: ctx.markerClass });
|
|
1767
|
+
const link = /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noreferrer noopener", ...rest, children });
|
|
1768
|
+
const source = sourceForUrl(href, ctx.sources);
|
|
1769
|
+
if (!href || !/^https?:\/\//i.test(href) || !source && !ctx.canResolve) return link;
|
|
1770
|
+
return /* @__PURE__ */ jsx(
|
|
1771
|
+
HoverPreview,
|
|
1772
|
+
{
|
|
1773
|
+
source: source ?? {
|
|
1774
|
+
index: 0,
|
|
1775
|
+
anchorId: "",
|
|
1776
|
+
kind: "url",
|
|
1777
|
+
url: href,
|
|
1778
|
+
title: labelOf(children) || sourceHost(href) || href
|
|
1779
|
+
},
|
|
1780
|
+
children: link
|
|
1781
|
+
}
|
|
1782
|
+
);
|
|
1783
|
+
};
|
|
1784
|
+
const Code = function Code2({ node: _node, className, ...rest }) {
|
|
1785
|
+
const fenced = typeof className === "string" && className.includes("language-");
|
|
1786
|
+
return /* @__PURE__ */ jsx("code", { className: fenced ? className : "agno-md-code", ...rest });
|
|
1787
|
+
};
|
|
1788
|
+
return {
|
|
1789
|
+
a: Link,
|
|
1790
|
+
code: Code,
|
|
1791
|
+
p: el("p", "agno-md-p"),
|
|
1792
|
+
// Streamdown renders `**bold**` as a Tailwind-classed <span>, which is not
|
|
1793
|
+
// bold anywhere Tailwind isn't. These stay real elements, styled by the
|
|
1794
|
+
// browser and read correctly by a screen reader.
|
|
1795
|
+
strong: el("strong"),
|
|
1796
|
+
em: el("em"),
|
|
1797
|
+
del: el("del"),
|
|
1798
|
+
sub: el("sub"),
|
|
1799
|
+
sup: el("sup"),
|
|
1800
|
+
h1: el("h2", "agno-md-heading"),
|
|
1801
|
+
h2: el("h3", "agno-md-heading"),
|
|
1802
|
+
h3: el("h4", "agno-md-heading"),
|
|
1803
|
+
h4: el("h5", "agno-md-heading"),
|
|
1804
|
+
h5: el("h6", "agno-md-heading"),
|
|
1805
|
+
h6: el("h6", "agno-md-heading"),
|
|
1806
|
+
ul: el("ul", "agno-md-list"),
|
|
1807
|
+
ol: el("ol", "agno-md-list"),
|
|
1808
|
+
li: el("li"),
|
|
1809
|
+
pre: function Pre({ children }) {
|
|
1810
|
+
return /* @__PURE__ */ jsx(CodeBlock, { copyClass: ctx.copyClass, codeCopy: ctx.codeCopy, children });
|
|
1811
|
+
},
|
|
1812
|
+
blockquote: el("blockquote", "agno-md-quote"),
|
|
1813
|
+
hr: el("hr", "agno-md-rule"),
|
|
1814
|
+
table: function Table({ node: _node, className: _theirs, ...rest }) {
|
|
1815
|
+
return /* @__PURE__ */ jsx("div", { className: "agno-md-table-wrap", children: /* @__PURE__ */ jsx("table", { className: "agno-md-table", ...rest }) });
|
|
1816
|
+
},
|
|
1817
|
+
thead: el("thead"),
|
|
1818
|
+
tbody: el("tbody"),
|
|
1819
|
+
tr: el("tr"),
|
|
1820
|
+
th: el("th"),
|
|
1821
|
+
td: el("td"),
|
|
1822
|
+
img: function Image({ node: _node, className: _theirs, ...rest }) {
|
|
1823
|
+
return /* @__PURE__ */ jsx("img", { className: "agno-md-img", ...rest });
|
|
1824
|
+
}
|
|
1825
|
+
};
|
|
1826
|
+
}
|
|
1827
|
+
function Markdown({
|
|
1828
|
+
content,
|
|
1829
|
+
className,
|
|
1830
|
+
sources,
|
|
1831
|
+
streaming,
|
|
1832
|
+
codeCopy,
|
|
1833
|
+
options
|
|
1834
|
+
}) {
|
|
1835
|
+
const fromMessage = useSources();
|
|
1836
|
+
const cn = useResolvedClassNames();
|
|
1837
|
+
const canResolve = Boolean(useLinkPreviewResolver());
|
|
1838
|
+
const fromProvider = useCodeCopy();
|
|
1839
|
+
const cited = sources ?? fromMessage;
|
|
1840
|
+
const copy = codeCopy ?? fromProvider ?? true;
|
|
1841
|
+
const components = useMemo(
|
|
1842
|
+
() => elementsFor({
|
|
1843
|
+
sources: cited,
|
|
1844
|
+
canResolve,
|
|
1845
|
+
markerClass: cn.citationMarker,
|
|
1846
|
+
copyClass: cn.copyButton,
|
|
1847
|
+
codeCopy: copy
|
|
1848
|
+
}),
|
|
1849
|
+
[cited, canResolve, cn.citationMarker, cn.copyButton, copy]
|
|
1850
|
+
);
|
|
1851
|
+
const text = useMemo(() => linkCitations(content, cited), [content, cited]);
|
|
1852
|
+
return /* @__PURE__ */ jsx(
|
|
1853
|
+
Streamdown,
|
|
1854
|
+
{
|
|
1855
|
+
className: cx("agno-md", className),
|
|
1856
|
+
components,
|
|
1857
|
+
mode: streaming ? "streaming" : "static",
|
|
1858
|
+
parseIncompleteMarkdown: streaming !== false,
|
|
1859
|
+
...options,
|
|
1860
|
+
children: text
|
|
1861
|
+
}
|
|
1862
|
+
);
|
|
1863
|
+
}
|
|
1864
|
+
function statusOf(tool) {
|
|
1865
|
+
if (tool.tool_call_error) return { label: "error", cls: "error" };
|
|
1866
|
+
if (tool.requires_confirmation && tool.confirmed == null) return { label: "awaiting approval", cls: "paused" };
|
|
1867
|
+
if (tool.requires_user_input && !tool.answered) return { label: "awaiting input", cls: "paused" };
|
|
1868
|
+
if (tool.result != null) return { label: "done", cls: "done" };
|
|
1869
|
+
return { label: "running", cls: "running" };
|
|
1870
|
+
}
|
|
1871
|
+
function hasDetail(tool) {
|
|
1872
|
+
return Boolean(tool.tool_args && Object.keys(tool.tool_args).length) || tool.result != null;
|
|
1873
|
+
}
|
|
1874
|
+
function ToolCalls({ tools }) {
|
|
1875
|
+
const [openIndex, setOpenIndex] = useState(null);
|
|
1876
|
+
if (!tools || tools.length === 0) return null;
|
|
1877
|
+
const open = openIndex != null ? tools[openIndex] : void 0;
|
|
1878
|
+
const openStatus = open ? statusOf(open) : void 0;
|
|
1879
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-tools", children: [
|
|
1880
|
+
/* @__PURE__ */ jsx("div", { className: "agno-tools__row", children: tools.map((tool, i) => {
|
|
1881
|
+
const status = statusOf(tool);
|
|
1882
|
+
const expandable = hasDetail(tool);
|
|
1883
|
+
return /* @__PURE__ */ jsxs(
|
|
1884
|
+
"button",
|
|
1885
|
+
{
|
|
1886
|
+
type: "button",
|
|
1887
|
+
className: `agno-tool agno-tool--${status.cls} ${openIndex === i ? "is-open" : ""}`,
|
|
1888
|
+
onClick: () => setOpenIndex(openIndex === i ? null : expandable ? i : null),
|
|
1889
|
+
"aria-expanded": openIndex === i,
|
|
1890
|
+
title: status.label,
|
|
1891
|
+
children: [
|
|
1892
|
+
/* @__PURE__ */ jsx("span", { className: "agno-tool__name", children: tool.tool_name ?? "tool" }),
|
|
1893
|
+
status.cls === "running" ? /* @__PURE__ */ jsx(Spinner, { size: 12, className: "agno-tool__spinner agno-spin" }) : /* @__PURE__ */ jsx(Wrench, { size: 12, className: "agno-tool__icon" })
|
|
1894
|
+
]
|
|
1895
|
+
},
|
|
1896
|
+
tool.tool_call_id ?? `${tool.tool_name}-${i}`
|
|
1897
|
+
);
|
|
1898
|
+
}) }),
|
|
1899
|
+
open && openStatus && /* @__PURE__ */ jsxs("div", { className: "agno-tool-detail", children: [
|
|
1900
|
+
/* @__PURE__ */ jsxs("div", { className: "agno-tool-detail__head", children: [
|
|
1901
|
+
/* @__PURE__ */ jsx("span", { className: "agno-tool-detail__name", children: open.tool_name ?? "tool" }),
|
|
1902
|
+
/* @__PURE__ */ jsx("span", { className: "agno-tool-detail__meta", children: /* @__PURE__ */ jsx("span", { className: `agno-tool-detail__status agno-tool-detail__status--${openStatus.cls}`, children: openStatus.label }) }),
|
|
1903
|
+
/* @__PURE__ */ jsx(
|
|
1904
|
+
"button",
|
|
1905
|
+
{
|
|
1906
|
+
type: "button",
|
|
1907
|
+
className: "agno-btn agno-btn--ghost agno-btn--icon-xs",
|
|
1908
|
+
onClick: () => setOpenIndex(null),
|
|
1909
|
+
"aria-label": "Close tool details",
|
|
1910
|
+
children: /* @__PURE__ */ jsx(Close, { size: 14 })
|
|
1911
|
+
}
|
|
1912
|
+
)
|
|
1913
|
+
] }),
|
|
1914
|
+
open.tool_args && Object.keys(open.tool_args).length > 0 && /* @__PURE__ */ jsxs("div", { className: "agno-tool-detail__section", children: [
|
|
1915
|
+
/* @__PURE__ */ jsx("div", { className: "agno-tool-detail__label", children: "Arguments" }),
|
|
1916
|
+
/* @__PURE__ */ jsx("pre", { className: "agno-tool-detail__pre", children: JSON.stringify(open.tool_args, null, 2) })
|
|
1917
|
+
] }),
|
|
1918
|
+
open.result != null && /* @__PURE__ */ jsxs("div", { className: "agno-tool-detail__section", children: [
|
|
1919
|
+
/* @__PURE__ */ jsx("div", { className: "agno-tool-detail__label", children: "Result" }),
|
|
1920
|
+
/* @__PURE__ */ jsx("pre", { className: "agno-tool-detail__pre", children: String(open.result) })
|
|
1921
|
+
] })
|
|
1922
|
+
] })
|
|
1923
|
+
] });
|
|
1924
|
+
}
|
|
1925
|
+
var eventName = (e) => String(e.event ?? "");
|
|
1926
|
+
function isNoiseEvent(e) {
|
|
1927
|
+
const n = eventName(e);
|
|
1928
|
+
if (n.includes("ModelRequest") || n.includes("ReasoningContentDelta")) return true;
|
|
1929
|
+
return n.includes("RunContent") && !e.parent_run_id;
|
|
1930
|
+
}
|
|
1931
|
+
var isMemoryEvent = (e) => eventName(e).includes("MemoryUpdate");
|
|
1932
|
+
var isMemoryCompleted = (e) => eventName(e).includes("MemoryUpdateCompleted");
|
|
1933
|
+
var isReasoningEvent = (e) => isReasoningStepEvent(e) || isReasoningCompletedEvent(e) || eventName(e).includes("ReasoningStarted");
|
|
1934
|
+
function formatDuration(seconds) {
|
|
1935
|
+
return seconds < 10 ? `${seconds.toFixed(1)}s` : `${Math.round(seconds)}s`;
|
|
1936
|
+
}
|
|
1937
|
+
function reportedDuration(e) {
|
|
1938
|
+
const metrics = e.metrics;
|
|
1939
|
+
const seconds = metrics?.duration;
|
|
1940
|
+
return typeof seconds === "number" && seconds > 0 ? seconds : void 0;
|
|
1941
|
+
}
|
|
1942
|
+
function durationOf(e) {
|
|
1943
|
+
const seconds = reportedDuration(e);
|
|
1944
|
+
return seconds == null ? void 0 : formatDuration(seconds);
|
|
1945
|
+
}
|
|
1946
|
+
function stepsFromEvents(message, { hideReasoning, hideTools }) {
|
|
1947
|
+
const steps = [];
|
|
1948
|
+
const indexOf = /* @__PURE__ */ new Map();
|
|
1949
|
+
const put = (key, step) => {
|
|
1950
|
+
const at = indexOf.get(key);
|
|
1951
|
+
if (at != null) steps[at] = step;
|
|
1952
|
+
else {
|
|
1953
|
+
indexOf.set(key, steps.length);
|
|
1954
|
+
steps.push(step);
|
|
1955
|
+
}
|
|
1956
|
+
};
|
|
1957
|
+
const membersByRun = new Map((message.members ?? []).map((m) => [m.run_id, m]));
|
|
1958
|
+
const stepsByKey = new Map((message.steps ?? []).map((s) => [s.key, s]));
|
|
1959
|
+
for (const e of message.events ?? []) {
|
|
1960
|
+
if (isNoiseEvent(e)) continue;
|
|
1961
|
+
if (e.parent_run_id) {
|
|
1962
|
+
const runId = String(e.run_id ?? "");
|
|
1963
|
+
const member = membersByRun.get(runId);
|
|
1964
|
+
if (member) put(`member:${runId}`, { kind: "member", id: `member-${runId}`, member });
|
|
1965
|
+
continue;
|
|
1966
|
+
}
|
|
1967
|
+
if (isToolEvent(e)) {
|
|
1968
|
+
if (hideTools) continue;
|
|
1969
|
+
for (const tool of toolsFromEvent(e)) {
|
|
1970
|
+
const key = `tool:${tool.tool_call_id ?? tool.tool_name}`;
|
|
1971
|
+
const at = indexOf.get(key);
|
|
1972
|
+
const previous = at != null ? steps[at].tool : void 0;
|
|
1973
|
+
const merged = { ...previous, ...tool };
|
|
1974
|
+
if (!isToolCompletedEvent(e) && previous?.result != null) merged.result = previous.result;
|
|
1975
|
+
put(key, { kind: "tool", id: key, tool: merged });
|
|
1976
|
+
}
|
|
1977
|
+
continue;
|
|
1978
|
+
}
|
|
1979
|
+
if (isReasoningEvent(e)) {
|
|
1980
|
+
if (hideReasoning) continue;
|
|
1981
|
+
const key = `reasoning:${e.run_id ?? "run"}`;
|
|
1982
|
+
const at = indexOf.get(key);
|
|
1983
|
+
const previous = at != null ? steps[at].steps : [];
|
|
1984
|
+
const incoming = e.reasoning_steps ?? e.extra_data?.reasoning_steps ?? [];
|
|
1985
|
+
const completed = isReasoningCompletedEvent(e);
|
|
1986
|
+
put(key, {
|
|
1987
|
+
kind: "reasoning",
|
|
1988
|
+
id: key,
|
|
1989
|
+
// The completed event carries the full set; steps accumulate until then.
|
|
1990
|
+
steps: completed && incoming.length ? incoming : [...previous, ...incoming],
|
|
1991
|
+
completed
|
|
1992
|
+
});
|
|
1993
|
+
continue;
|
|
1994
|
+
}
|
|
1995
|
+
if (isMemoryEvent(e)) {
|
|
1996
|
+
const key = `memory:${e.run_id ?? "run"}`;
|
|
1997
|
+
put(key, { kind: "memory", id: key, completed: isMemoryCompleted(e) });
|
|
1998
|
+
continue;
|
|
1999
|
+
}
|
|
2000
|
+
const stepKey = typeof e.step_id === "string" ? e.step_id : void 0;
|
|
2001
|
+
if (eventName(e).startsWith("Step") && stepKey && stepsByKey.has(stepKey)) {
|
|
2002
|
+
put(`step:${stepKey}`, {
|
|
2003
|
+
kind: "step",
|
|
2004
|
+
id: `step-${stepKey}`,
|
|
2005
|
+
step: stepsByKey.get(stepKey)
|
|
2006
|
+
});
|
|
2007
|
+
continue;
|
|
2008
|
+
}
|
|
2009
|
+
const runKey = String(e.run_id ?? "run");
|
|
2010
|
+
const n = eventName(e);
|
|
2011
|
+
if (n.includes("RunStarted") || n.includes("WorkflowStarted")) {
|
|
2012
|
+
put(`started:${runKey}`, { kind: "status", id: `started-${runKey}`, label: "Run Started", icon: "run" });
|
|
2013
|
+
} else if (n.includes("RunContinued")) {
|
|
2014
|
+
put(`continued:${runKey}`, {
|
|
2015
|
+
kind: "status",
|
|
2016
|
+
id: `continued-${runKey}`,
|
|
2017
|
+
label: "Run Continued",
|
|
2018
|
+
icon: "continued"
|
|
2019
|
+
});
|
|
2020
|
+
} else if (isCompletedEvent(e)) {
|
|
2021
|
+
put(`completed:${runKey}`, {
|
|
2022
|
+
kind: "status",
|
|
2023
|
+
id: `completed-${runKey}`,
|
|
2024
|
+
label: "Run Completed",
|
|
2025
|
+
detail: durationOf(e),
|
|
2026
|
+
icon: "run"
|
|
2027
|
+
});
|
|
2028
|
+
} else if (isPausedEvent(e)) {
|
|
2029
|
+
put(`paused:${runKey}`, { kind: "status", id: `paused-${runKey}`, label: "Run Paused", icon: "run" });
|
|
2030
|
+
} else if (isCancelledEvent(e)) {
|
|
2031
|
+
put(`cancelled:${runKey}`, {
|
|
2032
|
+
kind: "status",
|
|
2033
|
+
id: `cancelled-${runKey}`,
|
|
2034
|
+
label: "Run Cancelled",
|
|
2035
|
+
icon: "run"
|
|
2036
|
+
});
|
|
2037
|
+
} else if (isErrorEvent(e)) {
|
|
2038
|
+
const detail = typeof e.content === "string" ? e.content : e.error;
|
|
2039
|
+
put(`error:${runKey}`, { kind: "status", id: `error-${runKey}`, label: detail || "Run Error", icon: "run" });
|
|
2040
|
+
}
|
|
2041
|
+
}
|
|
2042
|
+
return steps;
|
|
2043
|
+
}
|
|
2044
|
+
function stepsFromMessage(message, { hideReasoning, hideTools }) {
|
|
2045
|
+
const steps = [];
|
|
2046
|
+
const reasoning = message.reasoning_steps ?? [];
|
|
2047
|
+
if (!hideReasoning && reasoning.length) {
|
|
2048
|
+
steps.push({ kind: "reasoning", id: "reasoning", steps: reasoning, completed: !message.streaming });
|
|
2049
|
+
}
|
|
2050
|
+
if (!hideTools) {
|
|
2051
|
+
const tools = [...message.tool_calls ?? []].sort((a, b) => (a.created_at ?? 0) - (b.created_at ?? 0));
|
|
2052
|
+
for (const [i, tool] of tools.entries()) {
|
|
2053
|
+
steps.push({ kind: "tool", id: tool.tool_call_id ?? `tool-${i}`, tool });
|
|
2054
|
+
}
|
|
2055
|
+
}
|
|
2056
|
+
for (const member of message.members ?? []) {
|
|
2057
|
+
steps.push({ kind: "member", id: `member-${member.run_id}`, member });
|
|
2058
|
+
}
|
|
2059
|
+
for (const step of message.steps ?? []) {
|
|
2060
|
+
steps.push({ kind: "step", id: `step-${step.key}`, step });
|
|
2061
|
+
}
|
|
2062
|
+
return steps;
|
|
2063
|
+
}
|
|
2064
|
+
function behindTheScenesItems(message, opts = {}) {
|
|
2065
|
+
const fromEvents = message.events?.length ? stepsFromEvents(message, opts) : [];
|
|
2066
|
+
return fromEvents.length ? fromEvents : stepsFromMessage(message, opts);
|
|
2067
|
+
}
|
|
2068
|
+
function hasBehindTheScenes(message, opts = {}) {
|
|
2069
|
+
return behindTheScenesItems(message, opts).length > 0;
|
|
2070
|
+
}
|
|
2071
|
+
function runDuration(message) {
|
|
2072
|
+
const events = message.events ?? [];
|
|
2073
|
+
for (let i = events.length - 1; i >= 0; i--) {
|
|
2074
|
+
const reported = reportedDuration(events[i]);
|
|
2075
|
+
if (reported != null) return reported;
|
|
2076
|
+
}
|
|
2077
|
+
const times = events.map((e) => e.created_at).filter((t) => typeof t === "number");
|
|
2078
|
+
if (times.length < 2) return void 0;
|
|
2079
|
+
const seconds = Math.max(...times) - Math.min(...times);
|
|
2080
|
+
return seconds > 0 ? seconds : void 0;
|
|
2081
|
+
}
|
|
2082
|
+
function liveActivity(message) {
|
|
2083
|
+
const events = message.events ?? [];
|
|
2084
|
+
for (let i = events.length - 1; i >= 0; i--) {
|
|
2085
|
+
const label2 = activityLabel(events[i]);
|
|
2086
|
+
if (label2) return label2;
|
|
2087
|
+
}
|
|
2088
|
+
return message.activity ?? null;
|
|
2089
|
+
}
|
|
2090
|
+
function behindTheScenesLabel(message, streaming, activity) {
|
|
2091
|
+
if (streaming) return activity ?? liveActivity(message) ?? "Working...";
|
|
2092
|
+
if (message.status === "error") return message.error ?? "Run failed";
|
|
2093
|
+
if (message.status === "cancelled") return "Cancelled";
|
|
2094
|
+
if (message.status === "paused") return "Waiting for input";
|
|
2095
|
+
const seconds = runDuration(message);
|
|
2096
|
+
if (seconds != null) return `Worked for ${formatDuration(seconds)}`;
|
|
2097
|
+
return "Behind the scenes";
|
|
2098
|
+
}
|
|
2099
|
+
function Row({ icon: icon2, children }) {
|
|
2100
|
+
return /* @__PURE__ */ jsxs("li", { className: "agno-timeline__row", children: [
|
|
2101
|
+
/* @__PURE__ */ jsx("span", { className: "agno-timeline__icon", children: icon2 }),
|
|
2102
|
+
/* @__PURE__ */ jsx("div", { className: "agno-timeline__content", children })
|
|
2103
|
+
] });
|
|
2104
|
+
}
|
|
2105
|
+
function Step({
|
|
2106
|
+
label: label2,
|
|
2107
|
+
preview,
|
|
2108
|
+
detail,
|
|
2109
|
+
busy,
|
|
2110
|
+
children
|
|
2111
|
+
}) {
|
|
2112
|
+
const [open, setOpen] = useState(false);
|
|
2113
|
+
if (!children) {
|
|
2114
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-bts__step", children: [
|
|
2115
|
+
/* @__PURE__ */ jsx("span", { className: "agno-bts__step-label", children: label2 }),
|
|
2116
|
+
preview && /* @__PURE__ */ jsx("span", { className: "agno-bts__preview", children: preview }),
|
|
2117
|
+
detail && /* @__PURE__ */ jsx("span", { className: "agno-bts__detail", children: detail }),
|
|
2118
|
+
busy && /* @__PURE__ */ jsx(GridLoader, {})
|
|
2119
|
+
] });
|
|
2120
|
+
}
|
|
2121
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2122
|
+
/* @__PURE__ */ jsxs(
|
|
2123
|
+
"button",
|
|
2124
|
+
{
|
|
2125
|
+
type: "button",
|
|
2126
|
+
className: "agno-bts__step agno-bts__step--button",
|
|
2127
|
+
onClick: () => setOpen((v) => !v),
|
|
2128
|
+
"aria-expanded": open,
|
|
2129
|
+
children: [
|
|
2130
|
+
/* @__PURE__ */ jsx("span", { className: "agno-bts__step-label", children: label2 }),
|
|
2131
|
+
preview && !open && /* @__PURE__ */ jsx("span", { className: "agno-bts__preview", children: preview }),
|
|
2132
|
+
/* @__PURE__ */ jsxs("span", { className: "agno-bts__step-marker", children: [
|
|
2133
|
+
busy && /* @__PURE__ */ jsx(GridLoader, {}),
|
|
2134
|
+
/* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "agno-bts__chev" })
|
|
2135
|
+
] })
|
|
2136
|
+
]
|
|
2137
|
+
}
|
|
2138
|
+
),
|
|
2139
|
+
open && /* @__PURE__ */ jsx("div", { className: "agno-bts__step-body", children })
|
|
2140
|
+
] });
|
|
2141
|
+
}
|
|
2142
|
+
function reasoningPreview(steps) {
|
|
2143
|
+
const text = steps.map((s) => s.result || s.reasoning || s.title || "").filter(Boolean).join(" ").trim();
|
|
2144
|
+
return text || null;
|
|
2145
|
+
}
|
|
2146
|
+
function BehindTheScenes({
|
|
2147
|
+
message,
|
|
2148
|
+
streaming,
|
|
2149
|
+
activity,
|
|
2150
|
+
renderMarkdown,
|
|
2151
|
+
defaultOpen = false,
|
|
2152
|
+
hideReasoning,
|
|
2153
|
+
hideTools,
|
|
2154
|
+
className,
|
|
2155
|
+
classNames
|
|
2156
|
+
}) {
|
|
2157
|
+
const [open, setOpen] = useState(defaultOpen);
|
|
2158
|
+
const items = behindTheScenesItems(message, { hideReasoning, hideTools });
|
|
2159
|
+
if (items.length === 0) return null;
|
|
2160
|
+
const label2 = behindTheScenesLabel(message, streaming, activity);
|
|
2161
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("agno-bts", streaming && "agno-bts--streaming", classNames?.panel, className), children: [
|
|
2162
|
+
/* @__PURE__ */ jsxs(
|
|
2163
|
+
"button",
|
|
2164
|
+
{
|
|
2165
|
+
type: "button",
|
|
2166
|
+
className: "agno-bts__toggle",
|
|
2167
|
+
onClick: () => setOpen((v) => !v),
|
|
2168
|
+
"aria-expanded": open,
|
|
2169
|
+
children: [
|
|
2170
|
+
/* @__PURE__ */ jsxs("span", { className: "agno-bts__marker", children: [
|
|
2171
|
+
streaming && /* @__PURE__ */ jsx(GridLoader, {}),
|
|
2172
|
+
/* @__PURE__ */ jsx(ChevronDown, { size: 16, className: "agno-bts__chev" })
|
|
2173
|
+
] }),
|
|
2174
|
+
/* @__PURE__ */ jsx("span", { className: "agno-bts__label-text", children: label2 })
|
|
2175
|
+
]
|
|
2176
|
+
}
|
|
2177
|
+
),
|
|
2178
|
+
open && /* @__PURE__ */ jsx("ol", { className: "agno-timeline agno-timeline--icons", children: items.map((item) => {
|
|
2179
|
+
if (item.kind === "status") {
|
|
2180
|
+
return /* @__PURE__ */ jsx(Row, { icon: item.icon === "continued" ? /* @__PURE__ */ jsx(Rerun, { size: 12 }) : /* @__PURE__ */ jsx(Box, { size: 12 }), children: /* @__PURE__ */ jsx(Step, { label: item.label, detail: item.detail }) }, item.id);
|
|
2181
|
+
}
|
|
2182
|
+
if (item.kind === "tool") {
|
|
2183
|
+
return /* @__PURE__ */ jsx(Row, { icon: /* @__PURE__ */ jsx(Wrench, { size: 12 }), children: /* @__PURE__ */ jsx(ToolCalls, { tools: [item.tool] }) }, item.id);
|
|
2184
|
+
}
|
|
2185
|
+
if (item.kind === "reasoning") {
|
|
2186
|
+
return /* @__PURE__ */ jsx(Row, { icon: /* @__PURE__ */ jsx(Brain, { size: 12 }), children: /* @__PURE__ */ jsx(
|
|
2187
|
+
Step,
|
|
2188
|
+
{
|
|
2189
|
+
label: "Reasoning",
|
|
2190
|
+
preview: reasoningPreview(item.steps),
|
|
2191
|
+
busy: !item.completed && streaming,
|
|
2192
|
+
children: item.steps.length > 0 && /* @__PURE__ */ jsx("ol", { className: "agno-timeline", children: item.steps.map((step2, i) => /* @__PURE__ */ jsxs("li", { className: "agno-timeline__item", children: [
|
|
2193
|
+
step2.title && /* @__PURE__ */ jsx("div", { className: "agno-reasoning__title", children: step2.title }),
|
|
2194
|
+
step2.reasoning && /* @__PURE__ */ jsx("div", { className: "agno-reasoning__text", children: step2.reasoning }),
|
|
2195
|
+
step2.action && /* @__PURE__ */ jsxs("div", { className: "agno-reasoning__meta", children: [
|
|
2196
|
+
"Action: ",
|
|
2197
|
+
step2.action
|
|
2198
|
+
] }),
|
|
2199
|
+
step2.result && /* @__PURE__ */ jsxs("div", { className: "agno-reasoning__meta", children: [
|
|
2200
|
+
"Result: ",
|
|
2201
|
+
step2.result
|
|
2202
|
+
] }),
|
|
2203
|
+
typeof step2.confidence === "number" && /* @__PURE__ */ jsxs("div", { className: "agno-reasoning__meta", children: [
|
|
2204
|
+
"Confidence: ",
|
|
2205
|
+
Math.round(step2.confidence * 100),
|
|
2206
|
+
"%"
|
|
2207
|
+
] })
|
|
2208
|
+
] }, i)) })
|
|
2209
|
+
}
|
|
2210
|
+
) }, item.id);
|
|
2211
|
+
}
|
|
2212
|
+
if (item.kind === "memory") {
|
|
2213
|
+
return /* @__PURE__ */ jsx(Row, { icon: /* @__PURE__ */ jsx(Memory, { size: 12 }), children: /* @__PURE__ */ jsx(
|
|
2214
|
+
Step,
|
|
2215
|
+
{
|
|
2216
|
+
label: item.completed ? "Memory updated" : "Memory updating...",
|
|
2217
|
+
busy: !item.completed && streaming
|
|
2218
|
+
}
|
|
2219
|
+
) }, item.id);
|
|
2220
|
+
}
|
|
2221
|
+
if (item.kind === "member") {
|
|
2222
|
+
const { member } = item;
|
|
2223
|
+
return /* @__PURE__ */ jsx(Row, { icon: /* @__PURE__ */ jsx(TeamGlyph, { size: 12 }), children: /* @__PURE__ */ jsxs(
|
|
2224
|
+
Step,
|
|
2225
|
+
{
|
|
2226
|
+
label: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2227
|
+
/* @__PURE__ */ jsx("span", { className: "agno-bts__name", children: member.name ?? member.agent_id ?? "Member" }),
|
|
2228
|
+
member.kind === "executor" ? " ran this step" : " responded"
|
|
2229
|
+
] }),
|
|
2230
|
+
preview: member.content || null,
|
|
2231
|
+
busy: member.status === "running",
|
|
2232
|
+
children: [
|
|
2233
|
+
/* @__PURE__ */ jsx(ToolCalls, { tools: member.tool_calls }),
|
|
2234
|
+
member.content && /* @__PURE__ */ jsx("div", { className: "agno-bts__content", children: renderMarkdown ? renderMarkdown(member.content) : /* @__PURE__ */ jsx(Markdown, { content: member.content }) })
|
|
2235
|
+
]
|
|
2236
|
+
}
|
|
2237
|
+
) }, item.id);
|
|
2238
|
+
}
|
|
2239
|
+
const { step } = item;
|
|
2240
|
+
return /* @__PURE__ */ jsx(Row, { icon: /* @__PURE__ */ jsx(Box, { size: 12 }), children: /* @__PURE__ */ jsx(
|
|
2241
|
+
Step,
|
|
2242
|
+
{
|
|
2243
|
+
label: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2244
|
+
/* @__PURE__ */ jsx("span", { className: "agno-bts__name", children: step.name ?? step.key }),
|
|
2245
|
+
step.status === "error" ? " failed" : step.status === "running" ? " running" : " completed"
|
|
2246
|
+
] }),
|
|
2247
|
+
preview: step.error ?? step.content ?? null,
|
|
2248
|
+
busy: step.status === "running",
|
|
2249
|
+
children: step.error ? /* @__PURE__ */ jsx("div", { className: "agno-step__error", children: step.error }) : step.content ? /* @__PURE__ */ jsx("div", { className: "agno-bts__content", children: renderMarkdown ? renderMarkdown(step.content) : /* @__PURE__ */ jsx(Markdown, { content: step.content }) }) : null
|
|
2250
|
+
}
|
|
2251
|
+
) }, item.id);
|
|
2252
|
+
}) })
|
|
2253
|
+
] });
|
|
2254
|
+
}
|
|
2255
|
+
function SourceCard({
|
|
2256
|
+
source,
|
|
2257
|
+
className
|
|
2258
|
+
}) {
|
|
2259
|
+
const cn = useResolvedClassNames();
|
|
2260
|
+
const { preview } = useLinkPreview(source.url, false);
|
|
2261
|
+
const body = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2262
|
+
/* @__PURE__ */ jsx(Favicon, { url: preview?.favicon ?? source.url, kind: source.kind }),
|
|
2263
|
+
/* @__PURE__ */ jsx("span", { className: "agno-source__title", children: preview?.title ?? source.title })
|
|
2264
|
+
] });
|
|
2265
|
+
const classes = cx("agno-source", `agno-source--${source.kind}`, cn.sourceCard, className);
|
|
2266
|
+
return source.url ? /* @__PURE__ */ jsx(
|
|
2267
|
+
"a",
|
|
2268
|
+
{
|
|
2269
|
+
id: source.anchorId,
|
|
2270
|
+
className: classes,
|
|
2271
|
+
href: source.url,
|
|
2272
|
+
target: "_blank",
|
|
2273
|
+
rel: "noreferrer noopener",
|
|
2274
|
+
title: source.url,
|
|
2275
|
+
children: body
|
|
2276
|
+
}
|
|
2277
|
+
) : /* @__PURE__ */ jsx("div", { id: source.anchorId, className: classes, children: body });
|
|
2278
|
+
}
|
|
2279
|
+
function Citations({
|
|
2280
|
+
references,
|
|
2281
|
+
citations,
|
|
2282
|
+
sources: given,
|
|
2283
|
+
title = "Sources",
|
|
2284
|
+
max = 4,
|
|
2285
|
+
className,
|
|
2286
|
+
classNames
|
|
2287
|
+
}) {
|
|
2288
|
+
const cn = useResolvedClassNames(classNames);
|
|
2289
|
+
const uid = useId();
|
|
2290
|
+
const [expanded, setExpanded] = useState(false);
|
|
2291
|
+
const sources = useMemo(
|
|
2292
|
+
() => given ?? collectSources(references, citations, uid),
|
|
2293
|
+
[given, references, citations, uid]
|
|
2294
|
+
);
|
|
2295
|
+
if (sources.length === 0) return null;
|
|
2296
|
+
const limit = max > 0 && !expanded ? max : sources.length;
|
|
2297
|
+
const visible = sources.slice(0, limit);
|
|
2298
|
+
const hidden = sources.length - visible.length;
|
|
2299
|
+
return /* @__PURE__ */ jsxs("section", { className: cx("agno-sources", cn.citations, className), "aria-label": title, children: [
|
|
2300
|
+
/* @__PURE__ */ jsx("div", { className: "agno-sources__head", children: title }),
|
|
2301
|
+
/* @__PURE__ */ jsx("div", { className: "agno-sources__grid", children: visible.map((source) => /* @__PURE__ */ jsx(SourceCard, { source }, source.anchorId)) }),
|
|
2302
|
+
hidden > 0 && /* @__PURE__ */ jsxs("button", { type: "button", className: "agno-sources__more", onClick: () => setExpanded(true), children: [
|
|
2303
|
+
"Show ",
|
|
2304
|
+
hidden,
|
|
2305
|
+
" more"
|
|
2306
|
+
] })
|
|
2307
|
+
] });
|
|
2308
|
+
}
|
|
2309
|
+
function audioSrc(a) {
|
|
2310
|
+
if (a.url) return a.url;
|
|
2311
|
+
if (a.base64_audio) return `data:${a.mime_type ?? "audio/mpeg"};base64,${a.base64_audio}`;
|
|
2312
|
+
if (a.content) return `data:${a.mime_type ?? "audio/wav"};base64,${a.content}`;
|
|
2313
|
+
return void 0;
|
|
2314
|
+
}
|
|
2315
|
+
function Multimedia({
|
|
2316
|
+
images,
|
|
2317
|
+
videos,
|
|
2318
|
+
audio,
|
|
2319
|
+
responseAudio
|
|
2320
|
+
}) {
|
|
2321
|
+
const audios = [...audio ?? [], ...responseAudio ? [responseAudio] : []];
|
|
2322
|
+
if (!images?.length && !videos?.length && !audios.length) return null;
|
|
2323
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-media", children: [
|
|
2324
|
+
images?.map(
|
|
2325
|
+
(img, i) => img.url ? /* @__PURE__ */ jsx("img", { className: "agno-media__img", src: img.url, alt: img.revised_prompt ?? "image" }, `img-${i}`) : null
|
|
2326
|
+
),
|
|
2327
|
+
videos?.map(
|
|
2328
|
+
(v, i) => v.url ? /* @__PURE__ */ jsx("video", { className: "agno-media__video", src: v.url, controls: true }, `vid-${i}`) : null
|
|
2329
|
+
),
|
|
2330
|
+
audios.map((a, i) => {
|
|
2331
|
+
const src = audioSrc(a);
|
|
2332
|
+
return src ? /* @__PURE__ */ jsx("audio", { className: "agno-media__audio", src, controls: true }, `aud-${i}`) : null;
|
|
2333
|
+
})
|
|
2334
|
+
] });
|
|
2335
|
+
}
|
|
2336
|
+
function Message({
|
|
2337
|
+
message,
|
|
2338
|
+
renderMarkdown,
|
|
2339
|
+
activity,
|
|
2340
|
+
avatar,
|
|
2341
|
+
children,
|
|
2342
|
+
className,
|
|
2343
|
+
classNames,
|
|
2344
|
+
entityType = "agent",
|
|
2345
|
+
userInitials = "ME",
|
|
2346
|
+
hideReasoning,
|
|
2347
|
+
hideTools,
|
|
2348
|
+
hideSources,
|
|
2349
|
+
onFollowup
|
|
2350
|
+
}) {
|
|
2351
|
+
const cn = useResolvedClassNames(classNames);
|
|
2352
|
+
const uid = useId();
|
|
2353
|
+
const sources = useMemo(() => {
|
|
2354
|
+
const cited = collectSources(message.references, message.citations, uid);
|
|
2355
|
+
return cited.length ? cited : sourcesFromMarkdown(message.content, uid);
|
|
2356
|
+
}, [message.references, message.citations, message.content, uid]);
|
|
2357
|
+
const isUser = message.role === "user";
|
|
2358
|
+
const isAgent = message.role === "agent";
|
|
2359
|
+
const showSources = isAgent && !hideSources && sources.length > 0;
|
|
2360
|
+
const content = useMemo(
|
|
2361
|
+
() => showSources && message.content ? withoutSourcesLine(message.content) : message.content,
|
|
2362
|
+
[message.content, showSources]
|
|
2363
|
+
);
|
|
2364
|
+
const hasActivity = !message.content && !hasBehindTheScenes(message, { hideReasoning, hideTools });
|
|
2365
|
+
const kind = isUser ? "user" : isAgent ? entityType : "system";
|
|
2366
|
+
return /* @__PURE__ */ jsxs(
|
|
2367
|
+
"div",
|
|
2368
|
+
{
|
|
2369
|
+
className: cx(
|
|
2370
|
+
"agno-msg",
|
|
2371
|
+
`agno-msg--${message.role}`,
|
|
2372
|
+
`agno-msg--${kind}`,
|
|
2373
|
+
cn.message,
|
|
2374
|
+
isUser && cn.userMessage,
|
|
2375
|
+
isAgent && cn.agentMessage,
|
|
2376
|
+
className
|
|
2377
|
+
),
|
|
2378
|
+
"data-status": message.status,
|
|
2379
|
+
"data-role": message.role,
|
|
2380
|
+
children: [
|
|
2381
|
+
avatar !== false && /* @__PURE__ */ jsx("div", { className: cx("agno-msg__avatar", cn.avatar), children: avatar ?? (isUser ? /* @__PURE__ */ jsx("span", { children: userInitials }) : isAgent && entityType === "team" ? /* @__PURE__ */ jsx(TeamGlyph, { size: 16 }) : /* @__PURE__ */ jsx(AgnoMark, { size: 24 })) }),
|
|
2382
|
+
/* @__PURE__ */ jsx(SourcesProvider, { value: sources, children: /* @__PURE__ */ jsxs("div", { className: cx("agno-msg__body", cn.messageBody), "data-agent-message": isAgent ? "true" : void 0, children: [
|
|
2383
|
+
isAgent && /* @__PURE__ */ jsx(
|
|
2384
|
+
BehindTheScenes,
|
|
2385
|
+
{
|
|
2386
|
+
message,
|
|
2387
|
+
streaming: message.streaming,
|
|
2388
|
+
activity,
|
|
2389
|
+
renderMarkdown,
|
|
2390
|
+
hideReasoning,
|
|
2391
|
+
hideTools,
|
|
2392
|
+
classNames: cn
|
|
2393
|
+
}
|
|
2394
|
+
),
|
|
2395
|
+
content ? /* @__PURE__ */ jsxs("div", { className: cx("agno-msg__content", cn.messageContent), children: [
|
|
2396
|
+
renderMarkdown ? renderMarkdown(content) : /* @__PURE__ */ jsx(Markdown, { content, className: cn.markdown, streaming: message.streaming }),
|
|
2397
|
+
message.streaming && /* @__PURE__ */ jsx("span", { className: "agno-msg__caret", "aria-hidden": true })
|
|
2398
|
+
] }) : isAgent && message.streaming && hasActivity && /* @__PURE__ */ jsxs("div", { className: "agno-msg__activity", role: "status", "aria-live": "polite", children: [
|
|
2399
|
+
/* @__PURE__ */ jsx(GridLoader, {}),
|
|
2400
|
+
/* @__PURE__ */ jsx("span", { className: "agno-msg__activity-label", children: activity ?? "Working..." })
|
|
2401
|
+
] }),
|
|
2402
|
+
/* @__PURE__ */ jsx(
|
|
2403
|
+
Multimedia,
|
|
2404
|
+
{
|
|
2405
|
+
images: message.images,
|
|
2406
|
+
videos: message.videos,
|
|
2407
|
+
audio: message.audio,
|
|
2408
|
+
responseAudio: message.response_audio
|
|
2409
|
+
}
|
|
2410
|
+
),
|
|
2411
|
+
showSources && /* @__PURE__ */ jsx(Citations, { sources, classNames: cn }),
|
|
2412
|
+
isAgent && onFollowup && !message.streaming && /* @__PURE__ */ jsx(Followups, { items: message.followups, onSelect: onFollowup, classNames: cn }),
|
|
2413
|
+
message.error && /* @__PURE__ */ jsx("div", { className: "agno-msg__error", children: message.error }),
|
|
2414
|
+
children
|
|
2415
|
+
] }) })
|
|
2416
|
+
]
|
|
2417
|
+
}
|
|
2418
|
+
);
|
|
2419
|
+
}
|
|
2420
|
+
function MessageList({
|
|
2421
|
+
messages,
|
|
2422
|
+
status,
|
|
2423
|
+
activity,
|
|
2424
|
+
renderMarkdown,
|
|
2425
|
+
emptyState,
|
|
2426
|
+
entityType,
|
|
2427
|
+
userInitials,
|
|
2428
|
+
footer,
|
|
2429
|
+
header,
|
|
2430
|
+
renderMessage,
|
|
2431
|
+
className,
|
|
2432
|
+
classNames
|
|
2433
|
+
}) {
|
|
2434
|
+
const ctx = useOptionalChatContext();
|
|
2435
|
+
const cn = useResolvedClassNames(classNames);
|
|
2436
|
+
const items = messages ?? ctx?.chat.messages ?? [];
|
|
2437
|
+
const runStatus = status ?? ctx?.chat.status ?? "idle";
|
|
2438
|
+
const runActivity = activity !== void 0 ? activity : ctx?.chat.activity;
|
|
2439
|
+
const markdown = renderMarkdown ?? ctx?.renderMarkdown;
|
|
2440
|
+
const kind = entityType ?? ctx?.chat.entityType;
|
|
2441
|
+
const endRef = useRef(null);
|
|
2442
|
+
const stick = useRef(true);
|
|
2443
|
+
const userScrolled = useRef(false);
|
|
2444
|
+
const containerRef = useRef(null);
|
|
2445
|
+
const markUserScroll = () => {
|
|
2446
|
+
userScrolled.current = true;
|
|
2447
|
+
};
|
|
2448
|
+
const onScroll = () => {
|
|
2449
|
+
const el2 = containerRef.current;
|
|
2450
|
+
if (!el2) return;
|
|
2451
|
+
const atBottom = el2.scrollHeight - el2.scrollTop - el2.clientHeight < 80;
|
|
2452
|
+
if (atBottom) stick.current = true;
|
|
2453
|
+
else if (userScrolled.current) stick.current = false;
|
|
2454
|
+
userScrolled.current = false;
|
|
2455
|
+
};
|
|
2456
|
+
useEffect(() => {
|
|
2457
|
+
if (stick.current) endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
|
|
2458
|
+
}, [items, runActivity, runStatus]);
|
|
2459
|
+
return /* @__PURE__ */ jsxs(
|
|
2460
|
+
"div",
|
|
2461
|
+
{
|
|
2462
|
+
className: cx("agno-list", cn.list, className),
|
|
2463
|
+
ref: containerRef,
|
|
2464
|
+
onScroll,
|
|
2465
|
+
onWheel: markUserScroll,
|
|
2466
|
+
onTouchMove: markUserScroll,
|
|
2467
|
+
onKeyDown: markUserScroll,
|
|
2468
|
+
onPointerDown: (e) => e.target === e.currentTarget && markUserScroll(),
|
|
2469
|
+
children: [
|
|
2470
|
+
header,
|
|
2471
|
+
items.length === 0 ? /* @__PURE__ */ jsx("div", { className: cx("agno-list__empty", cn.empty), children: emptyState ?? "Start the conversation." }) : /* @__PURE__ */ jsxs("div", { className: "agno-list__inner", children: [
|
|
2472
|
+
items.map((m) => {
|
|
2473
|
+
const live = m.streaming && runStatus === "streaming" ? runActivity : void 0;
|
|
2474
|
+
return renderMessage ? /* @__PURE__ */ jsx(React7.Fragment, { children: renderMessage(m, live) }, m.id) : /* @__PURE__ */ jsx(
|
|
2475
|
+
Message,
|
|
2476
|
+
{
|
|
2477
|
+
message: m,
|
|
2478
|
+
renderMarkdown: markdown,
|
|
2479
|
+
entityType: kind,
|
|
2480
|
+
userInitials,
|
|
2481
|
+
activity: live,
|
|
2482
|
+
classNames: cn
|
|
2483
|
+
},
|
|
2484
|
+
m.id
|
|
2485
|
+
);
|
|
2486
|
+
}),
|
|
2487
|
+
footer,
|
|
2488
|
+
/* @__PURE__ */ jsx("div", { ref: endRef })
|
|
2489
|
+
] })
|
|
2490
|
+
]
|
|
2491
|
+
}
|
|
2492
|
+
);
|
|
2493
|
+
}
|
|
2494
|
+
var quickPromptLabel = (p) => typeof p === "string" ? p : p.label;
|
|
2495
|
+
var quickPromptText = (p) => typeof p === "string" ? p : p.prompt ?? p.label;
|
|
2496
|
+
function QuickPrompts({
|
|
2497
|
+
prompts,
|
|
2498
|
+
onSelect,
|
|
2499
|
+
disabled,
|
|
2500
|
+
className
|
|
2501
|
+
}) {
|
|
2502
|
+
if (prompts.length === 0) return null;
|
|
2503
|
+
return /* @__PURE__ */ jsx("div", { className: ["agno-prompts", className].filter(Boolean).join(" "), children: prompts.map((p, i) => /* @__PURE__ */ jsx(
|
|
2504
|
+
"button",
|
|
2505
|
+
{
|
|
2506
|
+
type: "button",
|
|
2507
|
+
className: "agno-prompt",
|
|
2508
|
+
disabled,
|
|
2509
|
+
onClick: () => onSelect(quickPromptText(p)),
|
|
2510
|
+
children: quickPromptLabel(p)
|
|
2511
|
+
},
|
|
2512
|
+
i
|
|
2513
|
+
)) });
|
|
2514
|
+
}
|
|
2515
|
+
function ChatWindow({
|
|
2516
|
+
chat: chatProp,
|
|
2517
|
+
placeholder,
|
|
2518
|
+
userInitials,
|
|
2519
|
+
emptyState,
|
|
2520
|
+
allowFiles,
|
|
2521
|
+
disabled,
|
|
2522
|
+
renderMarkdown,
|
|
2523
|
+
showErrors,
|
|
2524
|
+
quickPrompts,
|
|
2525
|
+
onQuickPrompt,
|
|
2526
|
+
hideFollowups,
|
|
2527
|
+
onFollowup,
|
|
2528
|
+
followupsTitle,
|
|
2529
|
+
header,
|
|
2530
|
+
composer,
|
|
2531
|
+
className,
|
|
2532
|
+
classNames
|
|
2533
|
+
}) {
|
|
2534
|
+
const ctx = useOptionalChatContext();
|
|
2535
|
+
const chat = useResolvedChat(chatProp);
|
|
2536
|
+
const cn = useResolvedClassNames(classNames);
|
|
2537
|
+
const markdown = renderMarkdown ?? ctx?.renderMarkdown;
|
|
2538
|
+
const sendPrompt = onQuickPrompt ?? ((prompt) => chat.sendMessage(prompt));
|
|
2539
|
+
const pausedMessage = chat.isPaused ? [...chat.messages].reverse().find((m) => m.status === "paused") : void 0;
|
|
2540
|
+
const last = chat.messages[chat.messages.length - 1];
|
|
2541
|
+
const followups = !hideFollowups && last?.role === "agent" && !last.streaming && !chat.isPaused ? last.followups : void 0;
|
|
2542
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("agno-chat", cn.chat, className), children: [
|
|
2543
|
+
header,
|
|
2544
|
+
/* @__PURE__ */ jsx(
|
|
2545
|
+
MessageList,
|
|
2546
|
+
{
|
|
2547
|
+
messages: chat.messages,
|
|
2548
|
+
status: chat.status,
|
|
2549
|
+
activity: chat.activity,
|
|
2550
|
+
entityType: chat.entityType,
|
|
2551
|
+
userInitials,
|
|
2552
|
+
renderMarkdown: markdown,
|
|
2553
|
+
classNames: cn,
|
|
2554
|
+
emptyState,
|
|
2555
|
+
footer: pausedMessage ? /* @__PURE__ */ jsx(
|
|
2556
|
+
HumanInput,
|
|
2557
|
+
{
|
|
2558
|
+
message: pausedMessage,
|
|
2559
|
+
entityType: chat.entityType,
|
|
2560
|
+
busy: chat.isStreaming,
|
|
2561
|
+
onResolve: chat.continueRun,
|
|
2562
|
+
className: cn.humanInput
|
|
2563
|
+
}
|
|
2564
|
+
) : null
|
|
2565
|
+
}
|
|
2566
|
+
),
|
|
2567
|
+
quickPrompts && quickPrompts.length > 0 && chat.messages.length === 0 && /* @__PURE__ */ jsx(
|
|
2568
|
+
QuickPrompts,
|
|
2569
|
+
{
|
|
2570
|
+
prompts: quickPrompts,
|
|
2571
|
+
onSelect: sendPrompt,
|
|
2572
|
+
disabled: disabled || chat.isStreaming,
|
|
2573
|
+
className: cn.panel
|
|
2574
|
+
}
|
|
2575
|
+
),
|
|
2576
|
+
followups && followups.length > 0 && /* @__PURE__ */ jsx(
|
|
2577
|
+
Followups,
|
|
2578
|
+
{
|
|
2579
|
+
items: followups,
|
|
2580
|
+
title: followupsTitle,
|
|
2581
|
+
onSelect: onFollowup ?? ((prompt) => chat.sendMessage(prompt)),
|
|
2582
|
+
disabled: disabled || chat.isStreaming,
|
|
2583
|
+
className: "agno-followups--dock",
|
|
2584
|
+
classNames: cn
|
|
2585
|
+
}
|
|
2586
|
+
),
|
|
2587
|
+
showErrors && chat.error && !chat.isPaused && /* @__PURE__ */ jsx("div", { className: cx("agno-chat__error", cn.error), children: chat.error }),
|
|
2588
|
+
composer === false ? null : composer ?? /* @__PURE__ */ jsx(
|
|
2589
|
+
ChatInput,
|
|
2590
|
+
{
|
|
2591
|
+
onSend: (message, files) => chat.sendMessage(message, files ? { files } : void 0),
|
|
2592
|
+
onStop: chat.cancel,
|
|
2593
|
+
busy: chat.isStreaming,
|
|
2594
|
+
disabled: disabled || chat.isPaused,
|
|
2595
|
+
placeholder,
|
|
2596
|
+
allowFiles,
|
|
2597
|
+
classNames: cn
|
|
2598
|
+
}
|
|
2599
|
+
)
|
|
2600
|
+
] });
|
|
2601
|
+
}
|
|
2602
|
+
function Glyph({
|
|
2603
|
+
size = 12,
|
|
2604
|
+
viewBox,
|
|
2605
|
+
className,
|
|
2606
|
+
children
|
|
2607
|
+
}) {
|
|
2608
|
+
return /* @__PURE__ */ jsx(
|
|
2609
|
+
"svg",
|
|
2610
|
+
{
|
|
2611
|
+
width: size,
|
|
2612
|
+
height: size,
|
|
2613
|
+
viewBox,
|
|
2614
|
+
fill: "currentColor",
|
|
2615
|
+
preserveAspectRatio: "xMidYMid meet",
|
|
2616
|
+
className,
|
|
2617
|
+
"aria-hidden": true,
|
|
2618
|
+
focusable: "false",
|
|
2619
|
+
children
|
|
2620
|
+
}
|
|
2621
|
+
);
|
|
2622
|
+
}
|
|
2623
|
+
var AnthropicLogo = ({ size = 12, className }) => /* @__PURE__ */ jsx(Glyph, { size, viewBox: "0 0 21 15", className, children: /* @__PURE__ */ jsx("path", { d: "M14.6751 0H11.5612L17.2398 14.3478H20.3537L14.6751 0ZM5.67858 0L0 14.3478H3.17534L4.33662 11.3347H10.2775L11.4388 14.3478H14.6141L8.93553 0H5.67858ZM5.36383 8.67009L7.30705 3.62775L9.25028 8.67009H5.36383Z" }) });
|
|
2624
|
+
var OpenAILogo = ({ size = 12, className }) => /* @__PURE__ */ jsx(Glyph, { size, viewBox: "0 0 22 22", className, children: /* @__PURE__ */ jsx("path", { d: "M19.928 9.17291C20.1619 8.48057 20.2431 7.74579 20.166 7.01908C20.0889 6.29237 19.8553 5.59098 19.4813 4.96315C18.9236 4.00802 18.0774 3.25435 17.0643 2.81052C16.0459 2.36318 14.9128 2.24653 13.8245 2.47697C13.3319 1.92958 12.7283 1.49331 12.0541 1.19715C11.3779 0.900007 10.6467 0.7488 9.90817 0.753398C8.79741 0.750306 7.71375 1.09622 6.81018 1.74229C5.91252 2.38357 5.24266 3.29435 4.89791 4.34234C4.17432 4.48829 3.48982 4.78574 2.88939 5.21515C2.29172 5.64211 1.79226 6.19195 1.42452 6.82779C0.865606 7.77609 0.626698 8.8791 0.743123 9.97369C0.859548 11.0683 1.32512 12.0964 2.071 12.9059C1.83719 13.598 1.75599 14.3327 1.83296 15.0592C1.90994 15.7858 2.14327 16.487 2.51693 17.1149C3.07465 18.07 3.92086 18.8237 4.9339 19.2675C5.95236 19.7148 7.08545 19.8315 8.17368 19.6011C8.66609 20.1484 9.26938 20.5847 9.94343 20.8809C10.6193 21.1777 11.351 21.329 12.0908 21.3246C13.2022 21.3284 14.2867 20.9828 15.191 20.3365C16.0897 19.6947 16.7602 18.7828 17.1047 17.7335C17.8283 17.5878 18.5128 17.2906 19.1132 16.8614C19.7108 16.4342 20.21 15.8841 20.5774 15.248C21.1355 14.2997 21.3737 13.1969 21.2567 12.1028C21.1398 11.0086 20.6739 9.98111 19.928 9.17217V9.17291ZM12.1334 19.9802C11.0961 19.9802 10.2931 19.6657 9.59154 19.0875C9.62313 19.0706 9.67896 19.0405 9.71496 19.0184L13.8657 16.6528C13.969 16.5946 14.0551 16.5099 14.1149 16.4076C14.1748 16.3052 14.2065 16.1888 14.2066 16.0702V10.2955L15.9616 11.2947C15.9707 11.2994 15.9784 11.3062 15.9843 11.3145C15.9902 11.3228 15.994 11.3324 15.9954 11.3424V16.1238C15.9954 18.2926 14.1654 19.9802 12.1334 19.9802ZM3.69897 16.4419C3.24145 15.6637 3.07607 14.7479 3.23247 13.8587C3.26333 13.8771 3.31696 13.9102 3.35589 13.9322L7.50662 16.2979C7.61026 16.3577 7.72783 16.3892 7.8475 16.3892C7.96717 16.3892 8.08473 16.3577 8.18837 16.2979L13.2559 13.4106V15.4089C13.2565 15.4191 13.2546 15.4293 13.2502 15.4386C13.2458 15.4478 13.2392 15.4558 13.231 15.4618L9.03541 17.8532C8.13546 18.3637 7.07136 18.5014 6.07113 18.2367C5.07431 17.9751 4.22209 17.3299 3.69897 16.4419ZM2.60509 7.50076C3.06415 6.71658 3.78377 6.11833 4.63858 5.81025V10.6827C4.63744 10.8015 4.66853 10.9185 4.72856 11.0211C4.78858 11.1237 4.87529 11.2081 4.97945 11.2653L10.0463 14.1526L8.29196 15.1518C8.28336 15.1574 8.27352 15.1609 8.26329 15.1619C8.25306 15.163 8.24273 15.1615 8.23318 15.1577L4.03544 12.7648C3.59337 12.5135 3.20522 12.1775 2.89322 11.776C2.58121 11.3744 2.35149 10.9153 2.2172 10.4248C2.08441 9.93612 2.05026 9.42588 2.11673 8.92385C2.1832 8.42182 2.3497 7.93805 2.60509 7.50076ZM17.021 10.8113L11.9534 7.92394L13.7077 6.92477C13.7163 6.91913 13.7262 6.91566 13.7364 6.91463C13.7466 6.91361 13.757 6.91507 13.7665 6.91889L17.9635 9.3103C18.6041 9.67505 19.1276 10.2148 19.4725 10.8664C19.8153 11.5148 19.9639 12.2485 19.9003 12.9793C19.8367 13.71 19.5637 14.407 19.114 14.9865C18.6616 15.5707 18.0528 16.0145 17.3582 16.2663V11.3931C17.3595 11.2748 17.3288 11.1583 17.2695 11.0559C17.2101 10.9535 17.1243 10.869 17.021 10.8113ZM18.7672 8.21561C18.7264 8.19087 18.6852 8.16662 18.6438 8.14288L14.4931 5.77719C14.3894 5.71749 14.2718 5.68607 14.1522 5.68607C14.0326 5.68607 13.915 5.71749 13.8113 5.77719L8.74376 8.66451V6.66469C8.74316 6.65448 8.74513 6.64429 8.74949 6.63505C8.75386 6.62581 8.76048 6.61781 8.76874 6.61179L12.965 4.22332C13.6091 3.85713 14.3432 3.67955 15.0834 3.71086C15.8237 3.74217 16.5401 3.98111 17.151 4.40038C17.7579 4.81692 18.2332 5.39805 18.5211 6.07547C18.8076 6.75138 18.8929 7.49341 18.7672 8.21561ZM7.79019 11.7803L6.0344 10.7811C6.02522 10.7767 6.01731 10.7699 6.0114 10.7616C6.0055 10.7532 6.00178 10.7435 6.00061 10.7334V5.95131C6.00134 5.21882 6.21365 4.50177 6.61183 3.8839C7.01235 3.26422 7.58077 2.77118 8.25082 2.46228C8.92372 2.15201 9.67027 2.03708 10.4053 2.13061C11.1404 2.22414 11.8344 2.52236 12.4082 2.99125C12.3666 3.01322 12.3254 3.036 12.2847 3.05958L8.13401 5.42527C8.03063 5.48349 7.94455 5.56809 7.88453 5.67044C7.82452 5.77279 7.79273 5.88923 7.7924 6.00788L7.79019 11.7803ZM8.74303 9.75258L10.9998 8.46761L13.2567 9.75331V12.3247L10.9998 13.6097L8.74303 12.324V9.75258Z" }) });
|
|
2625
|
+
var GeminiLogo = ({ size = 12, className }) => /* @__PURE__ */ jsx(Glyph, { size, viewBox: "0 0 44 44", className, children: /* @__PURE__ */ jsx("path", { d: "M43.9999 22.044C38.2914 22.3943 32.9081 24.82 28.864 28.8641C24.8199 32.9082 22.3942 38.2915 22.0439 44H21.9559C21.6061 38.2913 19.1806 32.9077 15.1364 28.8634C11.0922 24.8192 5.70855 22.3937 -0.00012207 22.044L-0.00012207 21.956C5.70855 21.6063 11.0922 19.1808 15.1364 15.1366C19.1806 11.0923 21.6061 5.70868 21.9559 0L22.0439 0C22.3942 5.70847 24.8199 11.0918 28.864 15.1359C32.9081 19.18 38.2914 21.6057 43.9999 21.956V22.044Z" }) });
|
|
2626
|
+
var MistralLogo = ({ size = 12, className }) => /* @__PURE__ */ jsxs(Glyph, { size, viewBox: "0 0 22 20", className, children: [
|
|
2627
|
+
/* @__PURE__ */ jsx("path", { d: "M19.4156 0.571411H15.6753V4.31167H19.4156V0.571411Z" }),
|
|
2628
|
+
/* @__PURE__ */ jsx("path", { d: "M21.2857 0.571411H17.5454V4.31167H21.2857V0.571411Z" }),
|
|
2629
|
+
/* @__PURE__ */ jsx("path", { d: "M4.45462 0.571411H0.714355V4.31167H4.45462V0.571411Z" }),
|
|
2630
|
+
/* @__PURE__ */ jsx("path", { d: "M4.45462 4.31165H0.714355V8.05191H4.45462V4.31165Z" }),
|
|
2631
|
+
/* @__PURE__ */ jsx("path", { d: "M4.45462 8.05188H0.714355V11.7921H4.45462V8.05188Z" }),
|
|
2632
|
+
/* @__PURE__ */ jsx("path", { d: "M4.45462 11.7922H0.714355V15.5325H4.45462V11.7922Z" }),
|
|
2633
|
+
/* @__PURE__ */ jsx("path", { d: "M4.45462 15.5323H0.714355V19.2726H4.45462V15.5323Z" }),
|
|
2634
|
+
/* @__PURE__ */ jsx("path", { d: "M6.32473 0.571411H2.58447V4.31167H6.32473V0.571411Z" }),
|
|
2635
|
+
/* @__PURE__ */ jsx("path", { d: "M21.2857 4.31165H17.5454V8.05191H21.2857V4.31165Z" }),
|
|
2636
|
+
/* @__PURE__ */ jsx("path", { d: "M6.32473 4.31165H2.58447V8.05191H6.32473V4.31165Z" }),
|
|
2637
|
+
/* @__PURE__ */ jsx("path", { d: "M15.6753 4.31165H11.9351V8.05191H15.6753V4.31165Z" }),
|
|
2638
|
+
/* @__PURE__ */ jsx("path", { d: "M17.5454 4.31165H13.8052V8.05191H17.5454V4.31165Z" }),
|
|
2639
|
+
/* @__PURE__ */ jsx("path", { d: "M10.065 4.31165H6.32471V8.05191H10.065V4.31165Z" }),
|
|
2640
|
+
/* @__PURE__ */ jsx("path", { d: "M13.8052 8.05188H10.0649V11.7921H13.8052V8.05188Z" }),
|
|
2641
|
+
/* @__PURE__ */ jsx("path", { d: "M17.5454 8.05188H13.8052V11.7921H17.5454V8.05188Z" }),
|
|
2642
|
+
/* @__PURE__ */ jsx("path", { d: "M10.065 8.05188H6.32471V11.7921H10.065V8.05188Z" }),
|
|
2643
|
+
/* @__PURE__ */ jsx("path", { d: "M11.9351 11.7922H8.19482V15.5325H11.9351V11.7922Z" }),
|
|
2644
|
+
/* @__PURE__ */ jsx("path", { d: "M13.8052 11.7922H10.0649V15.5325H13.8052V11.7922Z" }),
|
|
2645
|
+
/* @__PURE__ */ jsx("path", { d: "M21.2857 8.05188H17.5454V11.7921H21.2857V8.05188Z" }),
|
|
2646
|
+
/* @__PURE__ */ jsx("path", { d: "M6.32473 8.05188H2.58447V11.7921H6.32473V8.05188Z" }),
|
|
2647
|
+
/* @__PURE__ */ jsx("path", { d: "M19.4156 11.7922H15.6753V15.5325H19.4156V11.7922Z" }),
|
|
2648
|
+
/* @__PURE__ */ jsx("path", { d: "M21.2857 11.7922H17.5454V15.5325H21.2857V11.7922Z" }),
|
|
2649
|
+
/* @__PURE__ */ jsx("path", { d: "M19.4156 15.5323H15.6753V19.2726H19.4156V15.5323Z" }),
|
|
2650
|
+
/* @__PURE__ */ jsx("path", { d: "M6.32473 11.7922H2.58447V15.5325H6.32473V11.7922Z" }),
|
|
2651
|
+
/* @__PURE__ */ jsx("path", { d: "M21.2857 15.5323H17.5454V19.2726H21.2857V15.5323Z" }),
|
|
2652
|
+
/* @__PURE__ */ jsx("path", { d: "M6.32473 15.5323H2.58447V19.2726H6.32473V15.5323Z" })
|
|
2653
|
+
] });
|
|
2654
|
+
var GroqLogo = ({ size = 12, className }) => /* @__PURE__ */ jsx(Glyph, { size, viewBox: "0 0 15 22", className, children: /* @__PURE__ */ jsx("path", { d: "M7.12321 0.753296C3.27412 0.753296 0.143066 3.91255 0.143066 7.79593C0.143066 11.6793 3.27412 14.839 7.12321 14.839H9.41876V12.1977H7.12321C4.71767 12.1977 2.76072 10.2231 2.76072 7.79593C2.76072 5.36872 4.71767 3.39413 7.12321 3.39413C9.52875 3.39413 11.4959 5.36872 11.4959 7.79593V14.2821C11.4959 16.6934 9.54996 18.6573 7.16603 18.6827C6.02532 18.6732 4.9345 18.2107 4.13004 17.3946L2.27914 19.2622C3.56204 20.5634 5.3002 21.3037 7.11889 21.3235V21.3247C7.1346 21.3247 7.15031 21.3247 7.16563 21.3247H7.21473V21.3235C11.0088 21.2716 14.081 18.1508 14.0986 14.3138L14.101 7.62312C14.0099 3.81981 10.9146 0.753296 7.12321 0.753296Z" }) });
|
|
2655
|
+
var OllamaLogo = ({ size = 12, className }) => /* @__PURE__ */ jsxs(Glyph, { size, viewBox: "0 0 16 22", className, children: [
|
|
2656
|
+
/* @__PURE__ */ jsx("path", { d: "M10.1044 9.89569C10.6837 10.3223 11.1157 10.8046 11.2561 11.5301C11.3088 12.2593 11.2197 12.6993 10.7819 13.2915C10.2833 13.8614 9.66528 14.2002 8.909 14.2593C8.67758 14.2659 8.44727 14.2686 8.21583 14.2665C8.07221 14.2654 7.92873 14.2665 7.78512 14.2678C6.90745 14.2692 6.21469 14.1208 5.56691 13.5025C5.13374 13.0334 4.90487 12.5888 4.91749 11.9451C4.91818 11.8916 4.91887 11.8381 4.91959 11.783C4.93565 11.3405 5.02996 11.0106 5.29433 10.6494C5.32796 10.6018 5.36158 10.5542 5.39622 10.5052C5.702 10.1169 6.08253 9.86684 6.51379 9.63317C6.56698 9.60356 6.62016 9.57396 6.67496 9.54345C7.73031 9.06067 9.14792 9.29968 10.1044 9.89569ZM5.97181 11.0559C5.73111 11.3772 5.64825 11.6993 5.66615 12.0999C5.74893 12.5188 5.99409 12.8873 6.32749 13.1518C6.8829 13.4828 7.46794 13.5287 8.10163 13.5244C8.20885 13.5265 8.20885 13.5265 8.31824 13.5285C9.02425 13.5281 9.61763 13.365 10.1319 12.8655C10.4247 12.5512 10.4727 12.3291 10.4583 11.907C10.4146 11.4051 10.2916 11.0688 9.89933 10.7362C8.65785 9.78646 7.01637 9.86496 5.97181 11.0559Z" }),
|
|
2657
|
+
/* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.75158 2.91052C5.53174 2.0987 5.19725 1.27988 4.45008 0.82542C4.05056 0.669299 3.56483 0.665313 3.1941 0.893697C2.63015 1.3091 2.24679 2.08179 2.13263 2.76549L2.11014 2.92613C1.9698 3.69749 1.93035 4.46221 1.98516 5.24411L1.9974 5.39046C2.00502 5.48223 2.01295 5.57397 2.02122 5.66568C2.02479 5.69913 2.02905 5.73135 2.03318 5.76259C2.05519 5.92915 2.07352 6.06782 1.96459 6.2164C1.47913 6.59227 1.04256 7.12358 0.774236 7.67271L0.687434 7.87172C0.580734 8.10782 0.483549 8.34303 0.410356 8.59154C0.179013 9.54096 0.260673 10.6965 0.729776 11.5555C0.811546 11.7038 0.88611 11.8508 0.958425 12.0043C0.958425 12.2854 0.913432 12.3987 0.797524 12.6479C0.510049 13.2599 0.467807 13.9115 0.468974 14.579L0.471488 14.8074C0.471936 15.5967 0.528824 16.3265 0.899146 17.0388C1.03892 17.2886 1.1281 17.5052 1.0484 17.7902C0.557911 18.9435 0.551088 20.0587 0.687434 21.2858H1.97464V21.0148C1.71025 20.139 1.7711 19.1799 2.14639 18.3443L2.16683 18.3023C2.26477 18.1013 2.36207 17.9015 2.44888 17.6952C2.49898 17.4454 2.50268 17.2438 2.36843 17.0177C1.81616 16.4083 1.69579 15.7284 1.68018 14.9261L1.67825 14.71C1.66941 14.0734 1.72655 13.4939 2.03048 12.9245C2.04506 12.9028 2.05964 12.8813 2.07412 12.86C2.25028 12.6002 2.41333 12.3598 2.42347 12.034C2.39679 11.8872 2.38692 11.8329 2.36035 11.7887C2.34476 11.7627 2.32342 11.7402 2.28956 11.7045C1.84561 11.2805 1.59179 10.6432 1.5491 10.0426C1.51683 9.0468 1.7191 8.19467 2.39859 7.42818C3.15842 6.70012 3.8477 6.53584 4.86954 6.52391C4.96598 6.5241 5.06251 6.52249 5.15879 6.51676C5.18883 6.48672 5.20555 6.47 5.22023 6.45165C5.23866 6.42862 5.25388 6.40302 5.2882 6.34528C5.57717 5.85158 5.92486 5.40941 6.39519 5.07712C7.13017 4.62811 7.82723 4.41943 8.68961 4.57854C9.48851 4.83711 10.1926 5.25935 10.6464 5.97478C10.7408 6.17636 10.8301 6.35502 10.9851 6.51676C11.1486 6.56835 11.2843 6.57262 11.4554 6.5712L11.6329 6.56334C12.3759 6.56529 12.9767 6.70263 13.5293 7.23129L13.6273 7.32974C14.1182 7.76083 14.4817 8.37325 14.5757 9.02343C14.6238 9.87283 14.6564 10.7119 14.1137 11.42C13.9911 11.5669 13.8716 11.7115 13.7628 11.8688C13.7004 12.1932 13.7861 12.3474 13.966 12.6141C14.2804 13.0791 14.416 13.5478 14.4926 14.1032C14.5934 14.9993 14.5723 16.0844 13.9927 16.8163C13.8845 16.947 13.7861 17.0777 13.695 17.2209C13.6415 17.4446 13.6647 17.5634 13.7625 17.7698C14.2755 18.751 14.4241 19.7087 14.3047 20.8116L14.1692 21.2858H15.4565C15.6092 20.2164 15.6246 19.1262 15.2532 18.1016L15.1828 17.9169L15.1219 17.7544L15.0651 17.6226C15.0519 17.5586 15.0448 17.5235 15.0501 17.4905C15.0566 17.4505 15.0814 17.4135 15.1362 17.3318C15.1943 17.2431 15.2236 17.1984 15.2492 17.1518C15.2752 17.1045 15.2975 17.0552 15.3424 16.956C15.8611 15.6438 15.9282 14.0744 15.4183 12.7453L15.4061 12.716C15.3337 12.5424 15.2622 12.3706 15.204 12.1914C15.1892 12.1328 15.1811 12.1008 15.1856 12.0707C15.191 12.0347 15.2144 12.0013 15.2659 11.9281C15.8024 11.0772 15.9343 10.071 15.8439 9.08695C15.7088 8.08931 15.2318 7.07554 14.436 6.44902L14.2388 6.31352C14.1611 6.17326 14.122 6.10274 14.1061 6.02733C14.0901 5.95108 14.098 5.86984 14.1137 5.70644C14.1601 5.31445 14.1798 4.93296 14.1818 4.53832L14.1819 4.30649C14.1909 3.47534 14.106 2.75683 13.7903 1.98322C13.5457 1.44714 13.2471 0.983476 12.6788 0.758202C12.3661 0.718969 12.019 0.681597 11.7303 0.825949C11.1198 1.28795 10.7878 1.80066 10.5656 2.52997L10.5109 2.72289C10.4035 3.08351 10.3504 3.43907 10.3177 3.8132L10.3076 3.94235C9.93657 3.75103 9.55797 3.57883 9.16623 3.43424C8.0722 3.07745 7.00024 3.3833 6.00272 3.86057L5.83627 3.94235C5.84947 3.58589 5.82871 3.25921 5.75158 2.91052ZM3.80383 1.90991H4.00708C4.33115 2.30657 4.49953 2.77324 4.61681 3.26487L4.65888 3.41757C4.7506 3.7914 4.76816 4.16041 4.77347 4.54361L4.77709 4.69513C4.77672 4.98914 4.75524 5.15329 4.54906 5.36505C4.47886 5.38562 4.44208 5.3964 4.4046 5.40343C4.36336 5.41118 4.32128 5.41439 4.2329 5.42115L4.23281 5.42116L4.04955 5.43703L3.85888 5.44974L3.66582 5.46562C3.50863 5.47838 3.35145 5.48998 3.1941 5.50055C3.18729 5.20917 3.18243 4.91784 3.17922 4.62641C3.17787 4.52774 3.17604 4.42906 3.17366 4.33041C3.15372 3.48063 3.19343 2.56727 3.80383 1.90991ZM12.2046 1.90991H12.4078C13.1548 2.82926 13.0975 4.17989 13.0175 5.2973L12.9498 5.50055C12.7393 5.48564 12.5291 5.46795 12.3189 5.44974L12.138 5.43703C11.8611 5.41177 11.7625 5.40277 11.6777 5.36372C11.6308 5.34211 11.5881 5.3113 11.5218 5.26343C11.4243 4.99914 11.4264 4.74704 11.4297 4.46739L11.4311 4.28537C11.4507 3.46741 11.6017 2.51281 12.2046 1.90991Z" }),
|
|
2658
|
+
/* @__PURE__ */ jsx("path", { d: "M12.1243 9.46396C12.3546 9.51627 12.5027 9.61403 12.6787 9.76856C12.8518 10.0522 12.8623 10.3252 12.8142 10.6493C12.6748 10.8753 12.5609 10.9763 12.34 11.1235C12.1058 11.1596 11.9417 11.1692 11.7342 11.0444C11.4216 10.7905 11.2914 10.5816 11.2222 10.1835C11.2644 9.91975 11.3519 9.78311 11.5331 9.58993C11.7296 9.44969 11.8881 9.44444 12.1243 9.46396Z" }),
|
|
2659
|
+
/* @__PURE__ */ jsx("path", { d: "M4.4135 9.49766C4.78611 9.7009 4.78611 9.7009 4.88773 9.90415C4.92462 10.3394 4.87446 10.5651 4.61674 10.9204C4.42819 11.0742 4.31585 11.1189 4.07476 11.149C3.76776 11.1106 3.60323 11.0078 3.40999 10.7679C3.30581 10.5267 3.2975 10.3683 3.32953 10.1074C3.58695 9.62933 3.85303 9.39761 4.4135 9.49766Z" }),
|
|
2660
|
+
/* @__PURE__ */ jsx("path", { d: "M7.65258 11.1829C7.83055 11.1899 7.96945 11.2151 8.13952 11.2592C8.16188 11.2368 8.18424 11.2144 8.20727 11.1914C8.40628 11.1787 8.40628 11.1787 8.61376 11.1914C8.74925 11.3269 8.74925 11.3269 8.77042 11.492C8.74925 11.6656 8.74925 11.6656 8.6561 11.7884C8.54601 11.8689 8.54601 11.8689 8.41051 11.8689C8.41209 11.9162 8.41366 11.9636 8.41528 12.0123C8.41711 12.1048 8.41711 12.1048 8.41898 12.1992C8.42055 12.2605 8.42213 12.3218 8.42375 12.3849C8.41051 12.5464 8.41051 12.5464 8.27502 12.6819C8.07177 12.6988 8.07177 12.6988 7.86853 12.6819C7.70573 12.5191 7.71722 12.4721 7.70763 12.25C7.6828 11.9563 7.60997 11.8674 7.3943 11.6656C7.37313 11.4497 7.37313 11.4497 7.3943 11.2592C7.46204 11.1914 7.46204 11.1914 7.65258 11.1829Z" })
|
|
2661
|
+
] });
|
|
2662
|
+
var DeepSeekLogo = ({ size = 12, className }) => /* @__PURE__ */ jsx(Glyph, { size, viewBox: "0 0 20 15", className, children: /* @__PURE__ */ jsx("path", { d: "M19.7848 1.26275C19.5756 1.16126 19.486 1.36425 19.3565 1.46575C19.3166 1.4962 19.2768 1.54695 19.2469 1.5774C18.9381 1.91234 18.5795 2.13564 18.1013 2.10519C17.414 2.06459 16.8263 2.28789 16.2983 2.82583C16.1887 2.15594 15.8202 1.7601 15.2623 1.50635C14.9734 1.3744 14.6746 1.24245 14.4654 0.958259C14.326 0.755262 14.2861 0.521816 14.2164 0.29852C14.1666 0.166572 14.1267 0.0244731 13.9673 0.00417344C13.798 -0.0262761 13.7382 0.115822 13.6685 0.23762C13.4095 0.724812 13.3099 1.26275 13.3199 1.80069C13.3398 3.01867 13.8478 3.99306 14.8539 4.68325C14.9734 4.76445 14.9934 4.84565 14.9635 4.95729C14.8938 5.19074 14.8141 5.42419 14.7443 5.66778C14.6945 5.82003 14.6248 5.85048 14.4654 5.78958C13.9175 5.55614 13.4394 5.21104 13.021 4.78475C12.3038 4.08441 11.6563 3.30287 10.8594 2.69388C10.6701 2.55178 10.4809 2.41983 10.2816 2.28789C9.46481 1.4759 10.3912 0.806011 10.6004 0.724812C10.8196 0.643614 10.6801 0.359418 9.95291 0.359418C9.22573 0.359418 8.55832 0.613163 7.7116 0.937958C7.58211 0.988707 7.46257 1.01916 7.32311 1.04961C6.55609 0.897359 5.75917 0.86691 4.92242 0.968408C3.34852 1.15111 2.09339 1.90219 1.17694 3.20137C0.0712291 4.7543 -0.197728 6.52037 0.130997 8.36764C0.469684 10.3063 1.43594 11.9201 2.93014 13.1685C4.47416 14.4677 6.25724 15.1071 8.28936 14.9853C9.52458 14.9143 10.8992 14.7417 12.4532 13.402C12.8417 13.605 13.2601 13.676 13.9375 13.7369C14.4654 13.7877 14.9635 13.7065 15.3619 13.6253C15.9696 13.4933 15.9297 12.9148 15.7106 12.8133C13.9175 11.9607 14.306 12.3058 13.9474 12.0216C14.8639 10.9254 16.2385 9.77847 16.7765 6.06363C16.8163 5.76928 16.7765 5.58658 16.7765 5.34299C16.7765 5.20089 16.8063 5.13999 16.9657 5.12984C17.414 5.07909 17.8523 4.94715 18.2507 4.72385C19.4162 4.07426 19.8844 3.00853 19.994 1.72965C20.0139 1.5368 19.994 1.3338 19.7848 1.2323V1.26275ZM9.64411 12.7524C7.90087 11.3517 7.06412 10.8949 6.70551 10.9152C6.37678 10.9355 6.43655 11.3111 6.50628 11.5648C6.57601 11.8084 6.67562 11.981 6.81508 12.1941C6.90473 12.3362 6.97446 12.5494 6.72543 12.7016C6.16759 13.0569 5.19138 12.5798 5.14157 12.5595C4.00597 11.8795 3.05964 10.9761 2.39223 9.74802C1.74474 8.56049 1.37617 7.29176 1.30644 5.94183C1.28652 5.61703 1.38613 5.49524 1.7049 5.43434C2.12327 5.35314 2.56157 5.33284 2.97995 5.40389C4.75308 5.66778 6.2672 6.47977 7.5323 7.75865C8.25948 8.48944 8.80736 9.36232 9.36519 10.2149C9.96288 11.1182 10.6104 11.981 11.4272 12.6915C11.7161 12.9351 11.9452 13.1279 12.1743 13.27C11.5069 13.3512 10.3912 13.3614 9.62419 12.7524H9.64411ZM10.4809 7.28161C10.4809 7.12936 10.5904 7.01771 10.7399 7.01771C10.8893 7.01771 10.7996 7.01771 10.8295 7.03801C10.8594 7.04816 10.8992 7.06846 10.9192 7.09891C10.969 7.14966 10.9889 7.21056 10.9889 7.28161C10.9889 7.4237 10.8793 7.5455 10.7299 7.5455C10.5805 7.5455 10.4809 7.43385 10.4809 7.28161ZM13.0708 8.63154C12.9015 8.70258 12.7421 8.76348 12.5827 8.76348C12.3337 8.77363 12.0647 8.67213 11.9153 8.55033C11.6862 8.35749 11.5268 8.24584 11.4571 7.90075C11.4272 7.75865 11.4471 7.53535 11.467 7.4034C11.5268 7.12936 11.467 6.94666 11.2678 6.78426C11.1084 6.65232 10.9092 6.61172 10.6901 6.61172C10.4709 6.61172 10.5307 6.58127 10.4809 6.55082C10.3912 6.50007 10.3115 6.38842 10.3912 6.24632C10.4111 6.19558 10.5207 6.08393 10.5506 6.07378C10.8494 5.90123 11.1881 5.95198 11.5069 6.08393C11.7958 6.20572 12.0249 6.42902 12.3436 6.75382C12.6724 7.13951 12.7321 7.24101 12.9114 7.53535C13.0609 7.75865 13.1904 7.99209 13.28 8.25599C13.3398 8.41839 13.2601 8.56048 13.0708 8.64168V8.63154Z" }) });
|
|
2663
|
+
var XAILogo = ({ size = 12, className }) => /* @__PURE__ */ jsxs(Glyph, { size, viewBox: "0 0 22 24", className, children: [
|
|
2664
|
+
/* @__PURE__ */ jsx("path", { d: "M11.334 14.201L18.9751 3.08215H15.2822L9.48779 11.5143L11.334 14.201Z" }),
|
|
2665
|
+
/* @__PURE__ */ jsx("path", { d: "M6.71784 20.9178L8.5643 18.2311L6.71784 15.5444L3.0249 20.9178H6.71784Z" }),
|
|
2666
|
+
/* @__PURE__ */ jsx("path", { d: "M11.3337 20.9179H15.0266L6.71784 8.82727H3.0249L11.3337 20.9179Z" }),
|
|
2667
|
+
/* @__PURE__ */ jsx("path", { d: "M18.9752 4.42566L15.9502 8.82726L16.2527 20.9179H18.6727L18.9752 4.42566Z" })
|
|
2668
|
+
] });
|
|
2669
|
+
var CohereLogo = ({ size = 12, className }) => /* @__PURE__ */ jsxs(Glyph, { size, viewBox: "0 0 18 18", className, children: [
|
|
2670
|
+
/* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.8317 10.7281C6.31172 10.7281 7.27175 10.7041 8.61579 10.1521C10.1758 9.50407 13.2479 8.35203 15.48 7.15199C17.0401 6.31196 17.7121 5.20793 17.7121 3.71988C17.7121 1.67981 16.056 -0.000244141 13.992 -0.000244141H5.35169C2.39959 -0.000244141 -0.000488281 2.39983 -0.000488281 5.35193C-0.000488281 8.30403 2.25559 10.7281 5.8317 10.7281Z" }),
|
|
2671
|
+
/* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.29541 14.4C7.29541 12.9599 8.15944 11.6399 9.50348 11.0879L12.2156 9.95983C14.9757 8.83179 17.9998 10.8479 17.9998 13.824C17.9998 16.128 16.1277 18.0001 13.8236 18.0001H10.8715C8.90346 18.0001 7.29541 16.392 7.29541 14.4Z" }),
|
|
2672
|
+
/* @__PURE__ */ jsx("path", { d: "M3.09561 11.424C1.39156 11.424 -0.000488281 12.816 -0.000488281 14.5201V14.9281C-0.000488281 16.6081 1.39156 18.0002 3.09561 18.0002C4.79967 18.0002 6.19171 16.6081 6.19171 14.9041V14.4961C6.16771 12.816 4.79967 11.424 3.09561 11.424Z" })
|
|
2673
|
+
] });
|
|
2674
|
+
var AWSLogo = ({ size = 12, className }) => /* @__PURE__ */ jsxs(Glyph, { size, viewBox: "0 0 22 14", className, children: [
|
|
2675
|
+
/* @__PURE__ */ jsx("path", { d: "M6.25274 4.80513C6.25274 5.07289 6.28169 5.28999 6.33235 5.4492C6.39024 5.60841 6.46261 5.7821 6.56393 5.97026C6.60011 6.02815 6.61459 6.08605 6.61459 6.1367C6.61459 6.20907 6.57117 6.28144 6.47709 6.35381L6.02117 6.65776C5.95603 6.70118 5.8909 6.72289 5.83301 6.72289C5.76064 6.72289 5.68827 6.6867 5.6159 6.62157C5.51459 6.51302 5.42774 6.39723 5.35538 6.28144C5.28301 6.15841 5.21064 6.02091 5.13103 5.85447C4.56656 6.52026 3.85735 6.85315 3.0034 6.85315C2.39551 6.85315 1.91064 6.67947 1.55603 6.3321C1.20143 5.98473 1.02051 5.52157 1.02051 4.94263C1.02051 4.32749 1.23761 3.82815 1.67906 3.45184C2.12051 3.07552 2.70669 2.88736 3.45209 2.88736C3.69814 2.88736 3.95143 2.90907 4.21919 2.94526C4.48695 2.98144 4.76196 3.03934 5.05143 3.10447V2.57618C5.05143 2.02618 4.93564 1.64263 4.7113 1.41828C4.47972 1.19394 4.08893 1.08539 3.53169 1.08539C3.2784 1.08539 3.01788 1.11434 2.75011 1.17947C2.48235 1.2446 2.22182 1.3242 1.96853 1.42552C1.85274 1.47618 1.7659 1.50513 1.71524 1.5196C1.66459 1.53407 1.6284 1.54131 1.59946 1.54131C1.49814 1.54131 1.44748 1.46894 1.44748 1.31697V0.962362C1.44748 0.846573 1.46196 0.759731 1.49814 0.709073C1.53432 0.658415 1.59946 0.607757 1.70077 0.557099C1.95406 0.426836 2.25801 0.318284 2.61261 0.231441C2.96722 0.137362 3.34353 0.0939415 3.74156 0.0939415C4.60274 0.0939415 5.23235 0.289336 5.63761 0.680126C6.03564 1.07091 6.23827 1.66434 6.23827 2.46039V4.80513H6.25274ZM3.31459 5.90513C3.5534 5.90513 3.79946 5.8617 4.05998 5.77486C4.32051 5.68802 4.55209 5.52881 4.74748 5.3117C4.86327 5.1742 4.95011 5.02223 4.99353 4.84855C5.03696 4.67486 5.0659 4.46499 5.0659 4.21894V3.91499C4.85603 3.86434 4.63169 3.82091 4.40011 3.79197C4.16853 3.76302 3.94419 3.74855 3.71985 3.74855C3.23498 3.74855 2.88038 3.84263 2.64156 4.03802C2.40274 4.23341 2.28696 4.50842 2.28696 4.87026C2.28696 5.21039 2.3738 5.46368 2.55472 5.63736C2.7284 5.81828 2.98169 5.90513 3.31459 5.90513ZM9.12577 6.6867C8.99551 6.6867 8.90867 6.66499 8.85077 6.61434C8.79288 6.57091 8.74222 6.4696 8.6988 6.3321L6.99814 0.73802C6.95472 0.593283 6.93301 0.499205 6.93301 0.448547C6.93301 0.332757 6.9909 0.267626 7.10669 0.267626H7.8159C7.9534 0.267626 8.04748 0.289336 8.09814 0.339994C8.15603 0.383415 8.19946 0.484731 8.24288 0.622231L9.45867 5.41302L10.5876 0.622231C10.6238 0.477494 10.6672 0.383415 10.7251 0.339994C10.783 0.296573 10.8843 0.267626 11.0146 0.267626H11.5935C11.731 0.267626 11.8251 0.289336 11.883 0.339994C11.9409 0.383415 11.9916 0.484731 12.0205 0.622231L13.1639 5.47091L14.4159 0.622231C14.4593 0.477494 14.51 0.383415 14.5606 0.339994C14.6185 0.296573 14.7126 0.267626 14.8429 0.267626H15.5159C15.6317 0.267626 15.6968 0.32552 15.6968 0.448547C15.6968 0.484731 15.6896 0.520915 15.6823 0.564336C15.6751 0.607757 15.6606 0.665652 15.6317 0.745257L13.8876 6.33934C13.8442 6.48407 13.7935 6.57815 13.7356 6.62157C13.6777 6.66499 13.5837 6.69394 13.4606 6.69394H12.8383C12.7008 6.69394 12.6067 6.67223 12.5488 6.62157C12.4909 6.57091 12.4402 6.47684 12.4113 6.3321L11.2896 1.66434L10.1751 6.32486C10.1389 6.4696 10.0955 6.56368 10.0376 6.61434C9.97972 6.66499 9.8784 6.6867 9.74814 6.6867H9.12577ZM18.4251 6.8821C18.0488 6.8821 17.6725 6.83868 17.3106 6.75184C16.9488 6.66499 16.6666 6.57091 16.4784 6.46236C16.3626 6.39723 16.283 6.32486 16.2541 6.25973C16.2251 6.1946 16.2106 6.12223 16.2106 6.0571V5.68802C16.2106 5.53605 16.2685 5.46368 16.3771 5.46368C16.4205 5.46368 16.4639 5.47091 16.5073 5.48539C16.5508 5.49986 16.6159 5.52881 16.6883 5.55776C16.9343 5.66631 17.2021 5.75315 17.4843 5.81105C17.7738 5.86894 18.056 5.89789 18.3455 5.89789C18.8014 5.89789 19.156 5.81828 19.4021 5.65907C19.6481 5.49986 19.7784 5.26828 19.7784 4.97157C19.7784 4.76894 19.7133 4.60249 19.583 4.46499C19.4527 4.32749 19.2067 4.20447 18.8521 4.08868L17.8027 3.76302C17.2745 3.59657 16.8837 3.35052 16.6448 3.02486C16.406 2.70644 16.283 2.35184 16.283 1.97552C16.283 1.67157 16.3481 1.40381 16.4784 1.17223C16.6087 0.940652 16.7823 0.73802 16.9995 0.57881C17.2166 0.412362 17.4626 0.289336 17.7521 0.202494C18.0416 0.115652 18.3455 0.0794678 18.6639 0.0794678C18.8231 0.0794678 18.9896 0.0867046 19.1488 0.108415C19.3152 0.130126 19.4672 0.159073 19.6192 0.18802C19.7639 0.224205 19.9014 0.260389 20.0317 0.30381C20.162 0.347231 20.2633 0.390652 20.3356 0.434073C20.437 0.491968 20.5093 0.549862 20.5527 0.614994C20.5962 0.672889 20.6179 0.752494 20.6179 0.85381V1.19394C20.6179 1.34591 20.56 1.42552 20.4514 1.42552C20.3935 1.42552 20.2995 1.39657 20.1764 1.33868C19.7639 1.15052 19.3008 1.05644 18.787 1.05644C18.3745 1.05644 18.0488 1.12157 17.8245 1.25907C17.6001 1.39657 17.4843 1.60644 17.4843 1.90315C17.4843 2.10578 17.5567 2.27947 17.7014 2.41697C17.8462 2.55447 18.1139 2.69197 18.4975 2.81499L19.5251 3.14065C20.0462 3.3071 20.4225 3.53868 20.6468 3.83539C20.8712 4.1321 20.9797 4.47223 20.9797 4.84855C20.9797 5.15973 20.9146 5.44197 20.7916 5.68802C20.6613 5.93407 20.4876 6.15118 20.2633 6.32486C20.0389 6.50578 19.7712 6.63605 19.46 6.73012C19.1343 6.83144 18.7942 6.8821 18.4251 6.8821Z" }),
|
|
2676
|
+
/* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.7927 10.3991C17.4117 12.1577 13.9525 13.0912 10.9782 13.0912C6.80976 13.0912 3.05384 11.5498 0.217001 8.98792C-0.00734065 8.78529 0.195291 8.51029 0.463054 8.6695C3.53147 10.4498 7.31634 11.5281 11.2315 11.5281C13.8729 11.5281 16.7749 10.9781 19.4453 9.8491C19.8433 9.66818 20.1834 10.1096 19.7927 10.3991Z" }),
|
|
2677
|
+
/* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.7838 9.27038C20.4799 8.87959 18.772 9.08222 17.9976 9.1763C17.7661 9.20525 17.7299 9.00262 17.9397 8.85064C19.3003 7.89538 21.5364 8.17038 21.797 8.4888C22.0575 8.81446 21.7246 11.0506 20.4509 12.1217C20.2555 12.2881 20.0674 12.2013 20.1542 11.9842C20.4437 11.2677 21.0878 9.65393 20.7838 9.27038Z" })
|
|
2678
|
+
] });
|
|
2679
|
+
var AzureLogo = ({ size = 12, className }) => /* @__PURE__ */ jsx(Glyph, { size, viewBox: "0 0 21 17", className, children: /* @__PURE__ */ jsx("path", { d: "M11.4736 0L5.2828 5.44659L0 15.0667H4.76322L11.4736 0ZM12.2971 1.27434L9.65504 8.82946L14.7209 15.2868L4.89312 17H21L12.2971 1.27434Z" }) });
|
|
2680
|
+
var FireworksLogo = ({ size = 12, className }) => /* @__PURE__ */ jsx(Glyph, { size, viewBox: "0 0 22 11", className, children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.5663 0L10.9988 6.22842L8.42884 0H6.78016L9.597 6.80871C9.83063 7.37681 10.3786 7.74377 10.9892 7.74377C11.5997 7.74377 12.1465 7.37681 12.3813 6.81115L15.215 0H13.5663ZM14.6635 9.48953L19.3602 4.68259L18.7195 3.15261L13.5892 8.41306C13.1605 8.85315 13.0377 9.50172 13.2749 10.0698C13.5109 10.633 14.0565 10.9976 14.6647 10.9976L14.6671 11L22 10.9817L21.3593 9.45173L14.6647 9.48953H14.6635ZM2.63981 4.67893L3.28049 3.14895L8.41077 8.4094C8.8395 8.84828 8.96354 9.49928 8.72509 10.0662C8.48905 10.6306 7.9411 10.9939 7.33534 10.9939L0.00240858 10.9768L0 10.9793L0.640683 9.4493L7.33534 9.48709L2.63981 4.67893Z" }) });
|
|
2681
|
+
function getProviderIcon(value) {
|
|
2682
|
+
if (!value) return null;
|
|
2683
|
+
const v = value.toLowerCase();
|
|
2684
|
+
const table = [
|
|
2685
|
+
["anthropic", AnthropicLogo],
|
|
2686
|
+
["openai", OpenAILogo],
|
|
2687
|
+
["gemini", GeminiLogo],
|
|
2688
|
+
["google", GeminiLogo],
|
|
2689
|
+
["mistral", MistralLogo],
|
|
2690
|
+
["groq", GroqLogo],
|
|
2691
|
+
["ollama", OllamaLogo],
|
|
2692
|
+
["deepseek", DeepSeekLogo],
|
|
2693
|
+
["xai", XAILogo],
|
|
2694
|
+
["grok", XAILogo],
|
|
2695
|
+
["cohere", CohereLogo],
|
|
2696
|
+
["aws", AWSLogo],
|
|
2697
|
+
["bedrock", AWSLogo],
|
|
2698
|
+
["azure", AzureLogo],
|
|
2699
|
+
["fireworks", FireworksLogo],
|
|
2700
|
+
["claude", AnthropicLogo],
|
|
2701
|
+
["gpt", OpenAILogo],
|
|
2702
|
+
["o1", OpenAILogo],
|
|
2703
|
+
["o3", OpenAILogo]
|
|
2704
|
+
];
|
|
2705
|
+
return table.find(([key]) => v.includes(key))?.[1] ?? null;
|
|
2706
|
+
}
|
|
2707
|
+
function EntityBadge({
|
|
2708
|
+
entity,
|
|
2709
|
+
placeholder = "No agent selected",
|
|
2710
|
+
hideModel,
|
|
2711
|
+
className
|
|
2712
|
+
}) {
|
|
2713
|
+
const model = entity?.model?.model ?? entity?.model?.name;
|
|
2714
|
+
const provider = entity?.model?.provider;
|
|
2715
|
+
const Icon = getProviderIcon(provider) ?? getProviderIcon(model);
|
|
2716
|
+
const modelTitle = [provider, model].filter(Boolean).join(" - ");
|
|
2717
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("agno-entity", className), children: [
|
|
2718
|
+
/* @__PURE__ */ jsx("span", { className: "agno-entity__name", title: entity?.name, children: entity?.name ?? placeholder }),
|
|
2719
|
+
!hideModel && model && (Icon ? /* @__PURE__ */ jsx("span", { className: "agno-entity__mark", title: modelTitle || void 0, children: /* @__PURE__ */ jsx(Icon, { size: 11 }) }) : (
|
|
2720
|
+
// No mark for this provider — name the model rather than show nothing.
|
|
2721
|
+
/* @__PURE__ */ jsx("span", { className: "agno-entity__model", title: modelTitle || void 0, children: model })
|
|
2722
|
+
))
|
|
2723
|
+
] });
|
|
2724
|
+
}
|
|
2725
|
+
var TYPE_LABEL = {
|
|
2726
|
+
agent: "Agents",
|
|
2727
|
+
team: "Teams",
|
|
2728
|
+
workflow: "Workflows"
|
|
2729
|
+
};
|
|
2730
|
+
var ORDER = ["agent", "team", "workflow"];
|
|
2731
|
+
function EntitySelector({
|
|
2732
|
+
entities,
|
|
2733
|
+
value,
|
|
2734
|
+
onChange,
|
|
2735
|
+
disabled,
|
|
2736
|
+
placeholder = "Select an agent, team or workflow",
|
|
2737
|
+
className,
|
|
2738
|
+
classNames
|
|
2739
|
+
}) {
|
|
2740
|
+
const cn = useResolvedClassNames(classNames);
|
|
2741
|
+
const [open, setOpen] = useState(false);
|
|
2742
|
+
const rootRef = useRef(null);
|
|
2743
|
+
const key = (e) => `${e.type}:${e.id}`;
|
|
2744
|
+
useEffect(() => {
|
|
2745
|
+
if (!open) return;
|
|
2746
|
+
const onDocClick = (e) => {
|
|
2747
|
+
if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
|
|
2748
|
+
};
|
|
2749
|
+
const onKey = (e) => {
|
|
2750
|
+
if (e.key === "Escape") setOpen(false);
|
|
2751
|
+
};
|
|
2752
|
+
document.addEventListener("mousedown", onDocClick);
|
|
2753
|
+
document.addEventListener("keydown", onKey);
|
|
2754
|
+
return () => {
|
|
2755
|
+
document.removeEventListener("mousedown", onDocClick);
|
|
2756
|
+
document.removeEventListener("keydown", onKey);
|
|
2757
|
+
};
|
|
2758
|
+
}, [open]);
|
|
2759
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("agno-select", cn.select, className), ref: rootRef, children: [
|
|
2760
|
+
/* @__PURE__ */ jsxs(
|
|
2761
|
+
"button",
|
|
2762
|
+
{
|
|
2763
|
+
type: "button",
|
|
2764
|
+
className: cx("agno-select__trigger", cn.selectTrigger),
|
|
2765
|
+
disabled,
|
|
2766
|
+
"aria-haspopup": "listbox",
|
|
2767
|
+
"aria-expanded": open,
|
|
2768
|
+
onClick: () => setOpen((v) => !v),
|
|
2769
|
+
children: [
|
|
2770
|
+
/* @__PURE__ */ jsx("span", { className: "agno-select__value", children: value ? value.name : placeholder }),
|
|
2771
|
+
/* @__PURE__ */ jsx(ChevronDown, { size: 16, className: `agno-select__chev ${open ? "is-open" : ""}` })
|
|
2772
|
+
]
|
|
2773
|
+
}
|
|
2774
|
+
),
|
|
2775
|
+
open && /* @__PURE__ */ jsxs("div", { className: cx("agno-select__panel", cn.selectPanel), role: "listbox", children: [
|
|
2776
|
+
entities.length === 0 && /* @__PURE__ */ jsx("div", { className: "agno-select__empty", children: "Nothing available" }),
|
|
2777
|
+
ORDER.map((type) => {
|
|
2778
|
+
const items = entities.filter((e) => e.type === type);
|
|
2779
|
+
if (items.length === 0) return null;
|
|
2780
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-select__group", children: [
|
|
2781
|
+
/* @__PURE__ */ jsx("div", { className: "agno-select__group-label", children: TYPE_LABEL[type] }),
|
|
2782
|
+
items.map((ent) => {
|
|
2783
|
+
const selected = value ? key(value) === key(ent) : false;
|
|
2784
|
+
return /* @__PURE__ */ jsxs(
|
|
2785
|
+
"button",
|
|
2786
|
+
{
|
|
2787
|
+
type: "button",
|
|
2788
|
+
role: "option",
|
|
2789
|
+
"aria-selected": selected,
|
|
2790
|
+
className: cx("agno-select__option", selected && "is-selected", cn.selectOption),
|
|
2791
|
+
onClick: () => {
|
|
2792
|
+
onChange(ent);
|
|
2793
|
+
setOpen(false);
|
|
2794
|
+
},
|
|
2795
|
+
children: [
|
|
2796
|
+
/* @__PURE__ */ jsx("span", { className: "agno-select__check", children: selected && /* @__PURE__ */ jsx(Check, { size: 14 }) }),
|
|
2797
|
+
/* @__PURE__ */ jsx("span", { className: "agno-select__label", children: ent.name }),
|
|
2798
|
+
ent.model?.model && /* @__PURE__ */ jsx("span", { className: "agno-select__model", children: ent.model.model })
|
|
2799
|
+
]
|
|
2800
|
+
},
|
|
2801
|
+
key(ent)
|
|
2802
|
+
);
|
|
2803
|
+
})
|
|
2804
|
+
] }, type);
|
|
2805
|
+
})
|
|
2806
|
+
] })
|
|
2807
|
+
] });
|
|
2808
|
+
}
|
|
2809
|
+
function label(session) {
|
|
2810
|
+
return session.session_name?.trim() || session.session_id;
|
|
2811
|
+
}
|
|
2812
|
+
function formatDate(value) {
|
|
2813
|
+
if (value == null) return "";
|
|
2814
|
+
let date;
|
|
2815
|
+
if (typeof value === "number") {
|
|
2816
|
+
date = new Date(value < 1e12 ? value * 1e3 : value);
|
|
2817
|
+
} else {
|
|
2818
|
+
date = new Date(value);
|
|
2819
|
+
}
|
|
2820
|
+
if (Number.isNaN(date.getTime())) return "";
|
|
2821
|
+
return date.toLocaleDateString();
|
|
2822
|
+
}
|
|
2823
|
+
function SessionList({
|
|
2824
|
+
sessions,
|
|
2825
|
+
activeSessionId,
|
|
2826
|
+
streamingSessionIds,
|
|
2827
|
+
loading: loading2,
|
|
2828
|
+
onSelect,
|
|
2829
|
+
onDelete,
|
|
2830
|
+
onNew,
|
|
2831
|
+
title = "Sessions",
|
|
2832
|
+
hideTitle,
|
|
2833
|
+
className,
|
|
2834
|
+
classNames
|
|
2835
|
+
}) {
|
|
2836
|
+
const ctx = useOptionalChatContext();
|
|
2837
|
+
const cn = useResolvedClassNames(classNames);
|
|
2838
|
+
const items = sessions ?? ctx?.chat.sessions ?? [];
|
|
2839
|
+
const active = activeSessionId ?? ctx?.chat.sessionId;
|
|
2840
|
+
const streaming = streamingSessionIds ?? ctx?.chat.streamingSessionIds;
|
|
2841
|
+
const isLoading = loading2 ?? ctx?.chat.sessionsLoading ?? false;
|
|
2842
|
+
const select = onSelect ?? ((id) => void ctx?.chat.loadSession(id));
|
|
2843
|
+
const remove = onDelete ?? (ctx ? (id) => void ctx.chat.deleteSession(id) : void 0);
|
|
2844
|
+
const create = onNew ?? ctx?.chat.reset;
|
|
2845
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("agno-sessions", cn.sessions, className), children: [
|
|
2846
|
+
create && /* @__PURE__ */ jsxs(
|
|
2847
|
+
"button",
|
|
2848
|
+
{
|
|
2849
|
+
type: "button",
|
|
2850
|
+
className: cx("agno-btn", "agno-btn--block", cn.newSessionButton),
|
|
2851
|
+
onClick: create,
|
|
2852
|
+
"aria-label": "New chat",
|
|
2853
|
+
children: [
|
|
2854
|
+
/* @__PURE__ */ jsx(Plus, { size: 14 }),
|
|
2855
|
+
" New Chat"
|
|
2856
|
+
]
|
|
2857
|
+
}
|
|
2858
|
+
),
|
|
2859
|
+
!hideTitle && /* @__PURE__ */ jsx("div", { className: "agno-sessions__head", children: /* @__PURE__ */ jsx("span", { className: "agno-sessions__title", children: title }) }),
|
|
2860
|
+
isLoading && /* @__PURE__ */ jsx("div", { className: "agno-sessions__empty", children: "Loading\u2026" }),
|
|
2861
|
+
!isLoading && items.length === 0 && /* @__PURE__ */ jsx("div", { className: "agno-sessions__empty", children: "No past sessions." }),
|
|
2862
|
+
/* @__PURE__ */ jsx("ul", { className: "agno-sessions__list", children: items.map((session) => /* @__PURE__ */ jsxs(
|
|
2863
|
+
"li",
|
|
2864
|
+
{
|
|
2865
|
+
className: cx(
|
|
2866
|
+
"agno-sessions__item",
|
|
2867
|
+
session.session_id === active && "is-active",
|
|
2868
|
+
cn.sessionItem,
|
|
2869
|
+
session.session_id === active && cn.activeSessionItem
|
|
2870
|
+
),
|
|
2871
|
+
children: [
|
|
2872
|
+
/* @__PURE__ */ jsxs("button", { type: "button", className: "agno-sessions__select", onClick: () => select(session.session_id), children: [
|
|
2873
|
+
/* @__PURE__ */ jsx("span", { className: "agno-sessions__name", children: label(session) }),
|
|
2874
|
+
formatDate(session.created_at) && /* @__PURE__ */ jsx("span", { className: "agno-sessions__date", children: formatDate(session.created_at) })
|
|
2875
|
+
] }),
|
|
2876
|
+
streaming?.includes(session.session_id) ? /* @__PURE__ */ jsx("span", { className: "agno-sessions__spinner", "aria-label": "Running", children: /* @__PURE__ */ jsx(Spinner, { size: 14, className: "agno-spin" }) }) : remove && /* @__PURE__ */ jsx(
|
|
2877
|
+
"button",
|
|
2878
|
+
{
|
|
2879
|
+
type: "button",
|
|
2880
|
+
className: "agno-sessions__delete",
|
|
2881
|
+
"aria-label": "Delete session",
|
|
2882
|
+
onClick: () => remove(session.session_id),
|
|
2883
|
+
children: /* @__PURE__ */ jsx(Trash, { size: 14 })
|
|
2884
|
+
}
|
|
2885
|
+
)
|
|
2886
|
+
]
|
|
2887
|
+
},
|
|
2888
|
+
session.session_id
|
|
2889
|
+
)) })
|
|
2890
|
+
] });
|
|
2891
|
+
}
|
|
2892
|
+
function AgnoChat(props) {
|
|
2893
|
+
const client = useMemo(
|
|
2894
|
+
() => props.client ?? new AgnoClient({ baseUrl: props.baseUrl ?? "", headers: props.headers }),
|
|
2895
|
+
[props.client, props.baseUrl, props.headers]
|
|
2896
|
+
);
|
|
2897
|
+
const [discovered, setDiscovered] = useState(props.entities ?? []);
|
|
2898
|
+
const [selected, setSelected] = useState(props.defaultEntity ?? null);
|
|
2899
|
+
const [discoveryDone, setDiscoveryDone] = useState(Boolean(props.entity || props.entities));
|
|
2900
|
+
useEffect(() => {
|
|
2901
|
+
if (props.entity && !props.showEntityPicker || props.entities) return;
|
|
2902
|
+
let cancelled = false;
|
|
2903
|
+
setDiscoveryDone(false);
|
|
2904
|
+
client.getEntities().then((list) => {
|
|
2905
|
+
if (cancelled) return;
|
|
2906
|
+
setDiscovered(list);
|
|
2907
|
+
setSelected((cur) => cur ?? list[0] ?? null);
|
|
2908
|
+
setDiscoveryDone(true);
|
|
2909
|
+
});
|
|
2910
|
+
return () => {
|
|
2911
|
+
cancelled = true;
|
|
2912
|
+
};
|
|
2913
|
+
}, [client, props.entity, props.entities, props.showEntityPicker]);
|
|
2914
|
+
const entity = props.entity ?? selected;
|
|
2915
|
+
const chat = useAgnoChat({ client, entity, userId: props.userId });
|
|
2916
|
+
const { refreshSessions } = chat;
|
|
2917
|
+
useEffect(() => {
|
|
2918
|
+
if (props.showSessions && entity) refreshSessions();
|
|
2919
|
+
}, [props.showSessions, entity?.type, entity?.id, refreshSessions]);
|
|
2920
|
+
useEffect(() => {
|
|
2921
|
+
if (props.showSessions && entity && chat.status === "completed") refreshSessions();
|
|
2922
|
+
}, [chat.status]);
|
|
2923
|
+
const onSelect = (e) => {
|
|
2924
|
+
if (!props.entity) setSelected(e);
|
|
2925
|
+
props.onEntityChange?.(e);
|
|
2926
|
+
chat.reset();
|
|
2927
|
+
};
|
|
2928
|
+
const cn = props.classNames ?? {};
|
|
2929
|
+
const entities = props.entities ?? discovered;
|
|
2930
|
+
const showPicker = Boolean(props.showEntityPicker);
|
|
2931
|
+
const showBadge = !showPicker && !props.hideEntityBadge && Boolean(entity);
|
|
2932
|
+
const noEntities = !props.entity && discoveryDone && entities.length === 0;
|
|
2933
|
+
const launcher = props.mode === "launcher";
|
|
2934
|
+
const fullscreen = props.panel === "fullscreen";
|
|
2935
|
+
const [selfOpen, setSelfOpen] = useState(props.defaultOpen ?? false);
|
|
2936
|
+
const isOpen = props.open ?? selfOpen;
|
|
2937
|
+
const setOpen = (next) => {
|
|
2938
|
+
if (props.open === void 0) setSelfOpen(next);
|
|
2939
|
+
props.onOpenChange?.(next);
|
|
2940
|
+
};
|
|
2941
|
+
const root = /* @__PURE__ */ jsxs(
|
|
2942
|
+
"div",
|
|
2943
|
+
{
|
|
2944
|
+
className: cx("agno-root", props.light && "agno-light", cn.root, props.className),
|
|
2945
|
+
style: launcher ? { height: "100%", width: "100%", ...props.style } : { height: props.height ?? "100%", width: props.width, ...props.style },
|
|
2946
|
+
children: [
|
|
2947
|
+
props.header,
|
|
2948
|
+
launcher && fullscreen && /* @__PURE__ */ jsx(
|
|
2949
|
+
"button",
|
|
2950
|
+
{
|
|
2951
|
+
type: "button",
|
|
2952
|
+
className: "agno-btn agno-btn--ghost agno-btn--icon agno-close-floating",
|
|
2953
|
+
onClick: () => setOpen(false),
|
|
2954
|
+
"aria-label": "Close chat",
|
|
2955
|
+
children: /* @__PURE__ */ jsx(Close, { size: 16 })
|
|
2956
|
+
}
|
|
2957
|
+
),
|
|
2958
|
+
noEntities && /* @__PURE__ */ jsxs("div", { className: cx("agno-banner", cn.banner), children: [
|
|
2959
|
+
"No agents, teams or workflows found at ",
|
|
2960
|
+
/* @__PURE__ */ jsx("code", { children: client.baseUrl || "(no URL)" }),
|
|
2961
|
+
". Check the URL is correct, that AgentOS is running, and that this origin is in its CORS allowlist (",
|
|
2962
|
+
/* @__PURE__ */ jsx("code", { children: "cors_allowed_origins" }),
|
|
2963
|
+
")."
|
|
2964
|
+
] }),
|
|
2965
|
+
/* @__PURE__ */ jsxs("div", { className: cx("agno-main", cn.main), children: [
|
|
2966
|
+
props.showSessions && /* @__PURE__ */ jsx("div", { className: cx("agno-sidebar", "agno-sidebar--left", cn.sidebar), children: /* @__PURE__ */ jsx(
|
|
2967
|
+
SessionList,
|
|
2968
|
+
{
|
|
2969
|
+
sessions: chat.sessions,
|
|
2970
|
+
activeSessionId: chat.sessionId,
|
|
2971
|
+
streamingSessionIds: chat.streamingSessionIds,
|
|
2972
|
+
loading: chat.sessionsLoading,
|
|
2973
|
+
onSelect: chat.loadSession,
|
|
2974
|
+
onDelete: chat.deleteSession,
|
|
2975
|
+
onNew: chat.reset,
|
|
2976
|
+
classNames: cn
|
|
2977
|
+
}
|
|
2978
|
+
) }),
|
|
2979
|
+
/* @__PURE__ */ jsx(
|
|
2980
|
+
ChatWindow,
|
|
2981
|
+
{
|
|
2982
|
+
chat,
|
|
2983
|
+
placeholder: props.placeholder,
|
|
2984
|
+
allowFiles: props.allowFiles ?? true,
|
|
2985
|
+
disabled: !entity,
|
|
2986
|
+
renderMarkdown: props.renderMarkdown,
|
|
2987
|
+
showErrors: props.showErrors,
|
|
2988
|
+
quickPrompts: props.quickPrompts,
|
|
2989
|
+
hideFollowups: props.hideFollowups,
|
|
2990
|
+
followupsTitle: props.followupsTitle,
|
|
2991
|
+
classNames: cn,
|
|
2992
|
+
emptyState: props.emptyState ?? (entity ? `Chat with ${entity.name}.` : "Select an agent, team or workflow to begin."),
|
|
2993
|
+
composer: showPicker || showBadge ? /* @__PURE__ */ jsx(
|
|
2994
|
+
ChatInput,
|
|
2995
|
+
{
|
|
2996
|
+
onSend: (message, files) => chat.sendMessage(message, files ? { files } : void 0),
|
|
2997
|
+
onStop: chat.cancel,
|
|
2998
|
+
busy: chat.isStreaming,
|
|
2999
|
+
disabled: !entity || chat.isPaused,
|
|
3000
|
+
placeholder: props.placeholder,
|
|
3001
|
+
allowFiles: props.allowFiles ?? true,
|
|
3002
|
+
classNames: cn,
|
|
3003
|
+
trailing: showPicker ? /* @__PURE__ */ jsx(
|
|
3004
|
+
EntitySelector,
|
|
3005
|
+
{
|
|
3006
|
+
entities,
|
|
3007
|
+
value: entity,
|
|
3008
|
+
onChange: onSelect,
|
|
3009
|
+
disabled: chat.isStreaming,
|
|
3010
|
+
classNames: cn
|
|
3011
|
+
}
|
|
3012
|
+
) : /* @__PURE__ */ jsx(EntityBadge, { entity })
|
|
3013
|
+
}
|
|
3014
|
+
) : void 0
|
|
3015
|
+
}
|
|
3016
|
+
)
|
|
3017
|
+
] }),
|
|
3018
|
+
props.footer
|
|
3019
|
+
]
|
|
3020
|
+
}
|
|
3021
|
+
);
|
|
3022
|
+
const withContext = /* @__PURE__ */ jsx(
|
|
3023
|
+
ChatProvider,
|
|
3024
|
+
{
|
|
3025
|
+
chat,
|
|
3026
|
+
classNames: cn,
|
|
3027
|
+
renderMarkdown: props.renderMarkdown,
|
|
3028
|
+
resolveLinkPreview: props.resolveLinkPreview,
|
|
3029
|
+
codeCopy: props.codeCopy,
|
|
3030
|
+
as: false,
|
|
3031
|
+
children: root
|
|
3032
|
+
}
|
|
3033
|
+
);
|
|
3034
|
+
if (!launcher) return withContext;
|
|
3035
|
+
return /* @__PURE__ */ jsx(
|
|
3036
|
+
ChatLauncher,
|
|
3037
|
+
{
|
|
3038
|
+
position: props.position,
|
|
3039
|
+
offset: props.offset,
|
|
3040
|
+
panel: props.panel,
|
|
3041
|
+
width: props.width,
|
|
3042
|
+
height: props.height,
|
|
3043
|
+
label: props.launcherLabel,
|
|
3044
|
+
icon: props.launcherIcon,
|
|
3045
|
+
open: isOpen,
|
|
3046
|
+
onOpenChange: setOpen,
|
|
3047
|
+
bubbleWhenOpen: !fullscreen,
|
|
3048
|
+
className: props.className,
|
|
3049
|
+
children: withContext
|
|
3050
|
+
}
|
|
3051
|
+
);
|
|
3052
|
+
}
|
|
3053
|
+
function Reasoning({
|
|
3054
|
+
steps,
|
|
3055
|
+
defaultOpen = false
|
|
3056
|
+
}) {
|
|
3057
|
+
const [open, setOpen] = useState(defaultOpen);
|
|
3058
|
+
if (!steps || steps.length === 0) return null;
|
|
3059
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-reasoning", children: [
|
|
3060
|
+
/* @__PURE__ */ jsxs(
|
|
3061
|
+
"button",
|
|
3062
|
+
{
|
|
3063
|
+
type: "button",
|
|
3064
|
+
className: "agno-disclosure__toggle",
|
|
3065
|
+
onClick: () => setOpen((v) => !v),
|
|
3066
|
+
"aria-expanded": open,
|
|
3067
|
+
children: [
|
|
3068
|
+
/* @__PURE__ */ jsx(ChevronDown, { size: 16, className: "agno-disclosure__chev" }),
|
|
3069
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
3070
|
+
"Reasoning \xB7 ",
|
|
3071
|
+
steps.length,
|
|
3072
|
+
" step",
|
|
3073
|
+
steps.length > 1 ? "s" : ""
|
|
3074
|
+
] })
|
|
3075
|
+
]
|
|
3076
|
+
}
|
|
3077
|
+
),
|
|
3078
|
+
open && /* @__PURE__ */ jsx("ol", { className: "agno-timeline", children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { className: "agno-timeline__item", children: [
|
|
3079
|
+
step.title && /* @__PURE__ */ jsx("div", { className: "agno-reasoning__title", children: step.title }),
|
|
3080
|
+
step.reasoning && /* @__PURE__ */ jsx("div", { className: "agno-reasoning__text", children: step.reasoning }),
|
|
3081
|
+
step.action && /* @__PURE__ */ jsxs("div", { className: "agno-reasoning__meta", children: [
|
|
3082
|
+
"Action: ",
|
|
3083
|
+
step.action
|
|
3084
|
+
] }),
|
|
3085
|
+
step.result && /* @__PURE__ */ jsxs("div", { className: "agno-reasoning__meta", children: [
|
|
3086
|
+
"Result: ",
|
|
3087
|
+
step.result
|
|
3088
|
+
] }),
|
|
3089
|
+
typeof step.confidence === "number" && /* @__PURE__ */ jsxs("div", { className: "agno-reasoning__meta", children: [
|
|
3090
|
+
"Confidence: ",
|
|
3091
|
+
Math.round(step.confidence * 100),
|
|
3092
|
+
"%"
|
|
3093
|
+
] })
|
|
3094
|
+
] }, i)) })
|
|
3095
|
+
] });
|
|
3096
|
+
}
|
|
3097
|
+
function statusDot(status) {
|
|
3098
|
+
if (status === "error") return "error";
|
|
3099
|
+
if (status === "completed") return "done";
|
|
3100
|
+
return "running";
|
|
3101
|
+
}
|
|
3102
|
+
function MemberCard({ member, renderMarkdown }) {
|
|
3103
|
+
const [open, setOpen] = useState(true);
|
|
3104
|
+
const label2 = member.kind === "executor" ? "Step executor" : "Member";
|
|
3105
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-member", children: [
|
|
3106
|
+
/* @__PURE__ */ jsxs("button", { type: "button", className: "agno-member__head", onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
|
|
3107
|
+
/* @__PURE__ */ jsx("span", { className: `agno-member__dot agno-member__dot--${statusDot(member.status)}`, "aria-hidden": true }),
|
|
3108
|
+
/* @__PURE__ */ jsx("span", { className: "agno-member__name", children: member.name ?? member.agent_id ?? label2 }),
|
|
3109
|
+
/* @__PURE__ */ jsx("span", { className: "agno-member__kind", children: label2 }),
|
|
3110
|
+
/* @__PURE__ */ jsx(ChevronDown, { size: 16, className: "agno-member__chev" })
|
|
3111
|
+
] }),
|
|
3112
|
+
open && /* @__PURE__ */ jsxs("div", { className: "agno-member__body", children: [
|
|
3113
|
+
/* @__PURE__ */ jsx(ToolCalls, { tools: member.tool_calls }),
|
|
3114
|
+
member.content && /* @__PURE__ */ jsx("div", { className: "agno-member__content", children: renderMarkdown ? renderMarkdown(member.content) : /* @__PURE__ */ jsx(Markdown, { content: member.content }) })
|
|
3115
|
+
] })
|
|
3116
|
+
] });
|
|
3117
|
+
}
|
|
3118
|
+
function MemberResponses({
|
|
3119
|
+
members,
|
|
3120
|
+
renderMarkdown,
|
|
3121
|
+
title = "Member responses"
|
|
3122
|
+
}) {
|
|
3123
|
+
if (!members || members.length === 0) return null;
|
|
3124
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-members", children: [
|
|
3125
|
+
/* @__PURE__ */ jsxs("div", { className: "agno-members__title", children: [
|
|
3126
|
+
title,
|
|
3127
|
+
" (",
|
|
3128
|
+
members.length,
|
|
3129
|
+
")"
|
|
3130
|
+
] }),
|
|
3131
|
+
members.map((m) => /* @__PURE__ */ jsx(MemberCard, { member: m, renderMarkdown }, m.run_id))
|
|
3132
|
+
] });
|
|
3133
|
+
}
|
|
3134
|
+
function StepRow({ step, renderMarkdown }) {
|
|
3135
|
+
const [open, setOpen] = useState(false);
|
|
3136
|
+
const hasBody = Boolean(step.content || step.error);
|
|
3137
|
+
return /* @__PURE__ */ jsxs("div", { className: `agno-step agno-step--${step.status}`, children: [
|
|
3138
|
+
/* @__PURE__ */ jsxs(
|
|
3139
|
+
"button",
|
|
3140
|
+
{
|
|
3141
|
+
type: "button",
|
|
3142
|
+
className: "agno-step__head",
|
|
3143
|
+
onClick: () => hasBody && setOpen((v) => !v),
|
|
3144
|
+
"aria-expanded": open,
|
|
3145
|
+
children: [
|
|
3146
|
+
/* @__PURE__ */ jsx("span", { className: `agno-step__icon agno-step__icon--${step.status}`, "aria-hidden": true, children: step.status === "completed" ? "\u2713" : step.status === "error" ? "!" : "\u25CF" }),
|
|
3147
|
+
/* @__PURE__ */ jsx("span", { className: "agno-step__name", children: step.name ?? step.key }),
|
|
3148
|
+
hasBody && /* @__PURE__ */ jsx(ChevronDown, { size: 16, className: "agno-step__chev" })
|
|
3149
|
+
]
|
|
3150
|
+
}
|
|
3151
|
+
),
|
|
3152
|
+
open && hasBody && /* @__PURE__ */ jsx("div", { className: "agno-step__body", children: step.error ? /* @__PURE__ */ jsx("div", { className: "agno-step__error", children: step.error }) : step.content ? renderMarkdown ? renderMarkdown(step.content) : /* @__PURE__ */ jsx(Markdown, { content: step.content }) : null })
|
|
3153
|
+
] });
|
|
3154
|
+
}
|
|
3155
|
+
function WorkflowSteps({
|
|
3156
|
+
steps,
|
|
3157
|
+
renderMarkdown,
|
|
3158
|
+
title = "Steps"
|
|
3159
|
+
}) {
|
|
3160
|
+
if (!steps || steps.length === 0) return null;
|
|
3161
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-steps", children: [
|
|
3162
|
+
/* @__PURE__ */ jsxs("div", { className: "agno-steps__title", children: [
|
|
3163
|
+
title,
|
|
3164
|
+
" (",
|
|
3165
|
+
steps.length,
|
|
3166
|
+
")"
|
|
3167
|
+
] }),
|
|
3168
|
+
/* @__PURE__ */ jsx("div", { className: "agno-steps__list", children: steps.map((s) => /* @__PURE__ */ jsx(StepRow, { step: s, renderMarkdown }, s.key)) })
|
|
3169
|
+
] });
|
|
3170
|
+
}
|
|
3171
|
+
function StatusIndicator({
|
|
3172
|
+
status,
|
|
3173
|
+
activity
|
|
3174
|
+
}) {
|
|
3175
|
+
if (status !== "streaming" && status !== "paused") return null;
|
|
3176
|
+
const label2 = activity ?? (status === "paused" ? "Waiting for input" : "Working...");
|
|
3177
|
+
return /* @__PURE__ */ jsxs("div", { className: `agno-status agno-status--${status}`, role: "status", "aria-live": "polite", children: [
|
|
3178
|
+
/* @__PURE__ */ jsx(GridLoader, {}),
|
|
3179
|
+
/* @__PURE__ */ jsx("span", { className: "agno-status__label", children: label2 })
|
|
3180
|
+
] });
|
|
3181
|
+
}
|
|
3182
|
+
function sourceOf(e) {
|
|
3183
|
+
return e.agent_name || e.team_name || e.workflow_name || e.agent_id || e.team_id || e.workflow_id || void 0;
|
|
3184
|
+
}
|
|
3185
|
+
function fold(events) {
|
|
3186
|
+
const rows = [];
|
|
3187
|
+
for (const e of events) {
|
|
3188
|
+
const name = String(e.event);
|
|
3189
|
+
const source = sourceOf(e);
|
|
3190
|
+
const last = rows[rows.length - 1];
|
|
3191
|
+
if (last && last.event === name && last.source === source) {
|
|
3192
|
+
last.count += 1;
|
|
3193
|
+
last.created_at = e.created_at ?? last.created_at;
|
|
3194
|
+
continue;
|
|
3195
|
+
}
|
|
3196
|
+
rows.push({ event: name, source, count: 1, created_at: e.created_at, detail: activityLabel(e) });
|
|
3197
|
+
}
|
|
3198
|
+
return rows;
|
|
3199
|
+
}
|
|
3200
|
+
function EventLog({
|
|
3201
|
+
events,
|
|
3202
|
+
autoScroll = true,
|
|
3203
|
+
maxHeight = 240
|
|
3204
|
+
}) {
|
|
3205
|
+
const ref = useRef(null);
|
|
3206
|
+
const rows = useMemo(() => fold(events), [events]);
|
|
3207
|
+
useEffect(() => {
|
|
3208
|
+
if (autoScroll && ref.current) ref.current.scrollTop = ref.current.scrollHeight;
|
|
3209
|
+
}, [rows, autoScroll]);
|
|
3210
|
+
return /* @__PURE__ */ jsxs("div", { className: "agno-eventlog", ref, style: { maxHeight }, children: [
|
|
3211
|
+
rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "agno-eventlog__empty", children: "No events yet." }),
|
|
3212
|
+
rows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: "agno-eventlog__row", children: [
|
|
3213
|
+
/* @__PURE__ */ jsx("span", { className: "agno-eventlog__name", children: row.event }),
|
|
3214
|
+
row.count > 1 && /* @__PURE__ */ jsxs("span", { className: "agno-eventlog__count", children: [
|
|
3215
|
+
"\xD7",
|
|
3216
|
+
row.count
|
|
3217
|
+
] }),
|
|
3218
|
+
row.source && /* @__PURE__ */ jsx("span", { className: "agno-eventlog__source", children: row.source }),
|
|
3219
|
+
row.created_at && /* @__PURE__ */ jsx("span", { className: "agno-eventlog__time", children: new Date(row.created_at * 1e3).toLocaleTimeString() })
|
|
3220
|
+
] }, i))
|
|
3221
|
+
] });
|
|
3222
|
+
}
|
|
3223
|
+
|
|
3224
|
+
export { AgnoChat, AgnoMark, ArrowUp, BehindTheScenes, BookOpen, Box, Brain, ChatBubble, ChatInput, ChatLauncher, ChatProvider, ChatWindow, Check, ChevronDown, Citations, Close, Copy, EntityBadge, EntitySelector, EventLog, Favicon, FileAudio, FileIcon, FilePreview, FileVideo, Followups, Globe, GridLoader, HoverPreview, HumanInput, LinkPreviewCard, Markdown, MemberResponses, Memory, Message, MessageList, Multimedia, Paperclip, Plus, Pulse, QuickPrompts, Reasoning, Rerun, SessionList, SourceCard, SourcesProvider, Spinner, StatusIndicator, Stop, TeamGlyph, ToolCalls, Trash, WorkflowSteps, Wrench, behindTheScenesItems, behindTheScenesLabel, collectSources, cx, displayUrl, faviconUrl, getProviderIcon, hasBehindTheScenes, linkCitations, normalizeFollowups, quickPromptLabel, quickPromptText, sourceHost, sourcesFromMarkdown, useAgnoChat, useChatContext, useLinkPreview, useOptionalChatContext, useResolvedChat, useResolvedClassNames, useSources, withoutSourcesLine, writeClipboard };
|
|
3225
|
+
//# sourceMappingURL=chunk-MUOMZG4V.js.map
|
|
3226
|
+
//# sourceMappingURL=chunk-MUOMZG4V.js.map
|