@surf-kit/agent 0.1.1 → 0.2.1

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.
Files changed (74) hide show
  1. package/README.md +19 -1
  2. package/dist/agent-BNSmiexZ.d.cts +44 -0
  3. package/dist/agent-BNSmiexZ.d.ts +44 -0
  4. package/dist/agent-identity/index.cjs +157 -0
  5. package/dist/agent-identity/index.cjs.map +1 -0
  6. package/dist/agent-identity/index.d.cts +35 -0
  7. package/dist/agent-identity/index.d.ts +35 -0
  8. package/dist/agent-identity/index.js +127 -0
  9. package/dist/agent-identity/index.js.map +1 -0
  10. package/dist/chat/index.cjs +1281 -0
  11. package/dist/chat/index.cjs.map +1 -0
  12. package/dist/chat/index.d.cts +72 -0
  13. package/dist/chat/index.d.ts +72 -0
  14. package/dist/chat/index.js +1239 -0
  15. package/dist/chat/index.js.map +1 -0
  16. package/dist/chat--OifhIRe.d.ts +24 -0
  17. package/dist/chat-ChYl2XjV.d.cts +24 -0
  18. package/dist/confidence/index.cjs +253 -0
  19. package/dist/confidence/index.cjs.map +1 -0
  20. package/dist/confidence/index.d.cts +40 -0
  21. package/dist/confidence/index.d.ts +40 -0
  22. package/dist/confidence/index.js +222 -0
  23. package/dist/confidence/index.js.map +1 -0
  24. package/dist/feedback/index.cjs +186 -0
  25. package/dist/feedback/index.cjs.map +1 -0
  26. package/dist/feedback/index.d.cts +27 -0
  27. package/dist/feedback/index.d.ts +27 -0
  28. package/dist/feedback/index.js +157 -0
  29. package/dist/feedback/index.js.map +1 -0
  30. package/dist/{hooks-B8CSeOsn.d.cts → hooks-BGs8-4GK.d.ts} +4 -99
  31. package/dist/{hooks-B8CSeOsn.d.ts → hooks-DLfF18IU.d.cts} +4 -99
  32. package/dist/hooks.d.cts +4 -1
  33. package/dist/hooks.d.ts +4 -1
  34. package/dist/index-BazLnae1.d.cts +67 -0
  35. package/dist/index-BazLnae1.d.ts +67 -0
  36. package/dist/index.cjs +889 -144
  37. package/dist/index.cjs.map +1 -1
  38. package/dist/index.d.cts +15 -321
  39. package/dist/index.d.ts +15 -321
  40. package/dist/index.js +879 -142
  41. package/dist/index.js.map +1 -1
  42. package/dist/layouts/index.cjs +1588 -0
  43. package/dist/layouts/index.cjs.map +1 -0
  44. package/dist/layouts/index.d.cts +46 -0
  45. package/dist/layouts/index.d.ts +46 -0
  46. package/dist/layouts/index.js +1548 -0
  47. package/dist/layouts/index.js.map +1 -0
  48. package/dist/mcp/index.cjs +522 -0
  49. package/dist/mcp/index.cjs.map +1 -0
  50. package/dist/mcp/index.d.cts +2 -0
  51. package/dist/mcp/index.d.ts +2 -0
  52. package/dist/mcp/index.js +492 -0
  53. package/dist/mcp/index.js.map +1 -0
  54. package/dist/response/index.cjs +519 -0
  55. package/dist/response/index.cjs.map +1 -0
  56. package/dist/response/index.d.cts +44 -0
  57. package/dist/response/index.d.ts +44 -0
  58. package/dist/response/index.js +478 -0
  59. package/dist/response/index.js.map +1 -0
  60. package/dist/sources/index.cjs +243 -0
  61. package/dist/sources/index.cjs.map +1 -0
  62. package/dist/sources/index.d.cts +44 -0
  63. package/dist/sources/index.d.ts +44 -0
  64. package/dist/sources/index.js +212 -0
  65. package/dist/sources/index.js.map +1 -0
  66. package/dist/streaming/index.cjs +531 -0
  67. package/dist/streaming/index.cjs.map +1 -0
  68. package/dist/streaming/index.d.cts +81 -0
  69. package/dist/streaming/index.d.ts +81 -0
  70. package/dist/streaming/index.js +495 -0
  71. package/dist/streaming/index.js.map +1 -0
  72. package/dist/streaming-DbQxScpi.d.ts +39 -0
  73. package/dist/streaming-DfT22A0z.d.cts +39 -0
  74. package/package.json +62 -17
@@ -0,0 +1,1281 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // src/chat/index.ts
31
+ var chat_exports = {};
32
+ __export(chat_exports, {
33
+ AgentChat: () => AgentChat,
34
+ ConversationList: () => ConversationList,
35
+ MessageBubble: () => MessageBubble,
36
+ MessageComposer: () => MessageComposer,
37
+ MessageThread: () => MessageThread,
38
+ WelcomeScreen: () => WelcomeScreen
39
+ });
40
+ module.exports = __toCommonJS(chat_exports);
41
+
42
+ // src/chat/AgentChat/AgentChat.tsx
43
+ var import_tailwind_merge8 = require("tailwind-merge");
44
+
45
+ // src/hooks/useAgentChat.ts
46
+ var import_react = require("react");
47
+ var initialState = {
48
+ messages: [],
49
+ conversationId: null,
50
+ isLoading: false,
51
+ error: null,
52
+ inputValue: "",
53
+ streamPhase: "idle",
54
+ streamingContent: ""
55
+ };
56
+ function reducer(state, action) {
57
+ switch (action.type) {
58
+ case "SET_INPUT":
59
+ return { ...state, inputValue: action.value };
60
+ case "SEND_START":
61
+ return {
62
+ ...state,
63
+ messages: [...state.messages, action.message],
64
+ isLoading: true,
65
+ error: null,
66
+ inputValue: "",
67
+ streamPhase: "thinking",
68
+ streamingContent: ""
69
+ };
70
+ case "STREAM_PHASE":
71
+ return { ...state, streamPhase: action.phase };
72
+ case "STREAM_CONTENT":
73
+ return { ...state, streamingContent: state.streamingContent + action.content };
74
+ case "SEND_SUCCESS":
75
+ return {
76
+ ...state,
77
+ messages: [...state.messages, action.message],
78
+ conversationId: action.conversationId ?? state.conversationId,
79
+ isLoading: false,
80
+ streamPhase: "idle",
81
+ streamingContent: ""
82
+ };
83
+ case "SEND_ERROR":
84
+ return {
85
+ ...state,
86
+ isLoading: false,
87
+ error: action.error,
88
+ streamPhase: "idle",
89
+ streamingContent: ""
90
+ };
91
+ case "LOAD_CONVERSATION":
92
+ return {
93
+ ...state,
94
+ conversationId: action.conversationId,
95
+ messages: action.messages,
96
+ error: null
97
+ };
98
+ case "RESET":
99
+ return { ...initialState };
100
+ case "CLEAR_ERROR":
101
+ return { ...state, error: null };
102
+ default:
103
+ return state;
104
+ }
105
+ }
106
+ var msgIdCounter = 0;
107
+ function generateMessageId() {
108
+ return `msg-${Date.now()}-${++msgIdCounter}`;
109
+ }
110
+ function useAgentChat(config) {
111
+ const [state, dispatch] = (0, import_react.useReducer)(reducer, initialState);
112
+ const configRef = (0, import_react.useRef)(config);
113
+ configRef.current = config;
114
+ const lastUserMessageRef = (0, import_react.useRef)(null);
115
+ const sendMessage = (0, import_react.useCallback)(
116
+ async (content) => {
117
+ const { apiUrl, streamPath = "/chat/stream", headers = {}, timeout = 3e4 } = configRef.current;
118
+ lastUserMessageRef.current = content;
119
+ const userMessage = {
120
+ id: generateMessageId(),
121
+ role: "user",
122
+ content,
123
+ timestamp: /* @__PURE__ */ new Date()
124
+ };
125
+ dispatch({ type: "SEND_START", message: userMessage });
126
+ const controller = new AbortController();
127
+ const timeoutId = setTimeout(() => controller.abort(), timeout);
128
+ try {
129
+ const response = await fetch(`${apiUrl}${streamPath}`, {
130
+ method: "POST",
131
+ headers: {
132
+ "Content-Type": "application/json",
133
+ Accept: "text/event-stream",
134
+ ...headers
135
+ },
136
+ body: JSON.stringify({
137
+ message: content,
138
+ conversation_id: state.conversationId
139
+ }),
140
+ signal: controller.signal
141
+ });
142
+ clearTimeout(timeoutId);
143
+ if (!response.ok) {
144
+ dispatch({
145
+ type: "SEND_ERROR",
146
+ error: {
147
+ code: "API_ERROR",
148
+ message: `HTTP ${response.status}: ${response.statusText}`,
149
+ retryable: response.status >= 500
150
+ }
151
+ });
152
+ return;
153
+ }
154
+ const reader = response.body?.getReader();
155
+ if (!reader) {
156
+ dispatch({
157
+ type: "SEND_ERROR",
158
+ error: { code: "STREAM_ERROR", message: "No response body", retryable: true }
159
+ });
160
+ return;
161
+ }
162
+ const decoder = new TextDecoder();
163
+ let buffer = "";
164
+ let accumulatedContent = "";
165
+ let agentResponse = null;
166
+ let capturedAgent = null;
167
+ let capturedConversationId = null;
168
+ while (true) {
169
+ const { done, value } = await reader.read();
170
+ if (done) break;
171
+ buffer += decoder.decode(value, { stream: true });
172
+ const lines = buffer.split("\n");
173
+ buffer = lines.pop() ?? "";
174
+ for (const line of lines) {
175
+ if (!line.startsWith("data: ")) continue;
176
+ const data = line.slice(6).trim();
177
+ if (data === "[DONE]") continue;
178
+ try {
179
+ const event = JSON.parse(data);
180
+ switch (event.type) {
181
+ case "agent":
182
+ capturedAgent = event.agent;
183
+ break;
184
+ case "phase":
185
+ dispatch({ type: "STREAM_PHASE", phase: event.phase });
186
+ break;
187
+ case "delta":
188
+ accumulatedContent += event.content;
189
+ dispatch({ type: "STREAM_CONTENT", content: event.content });
190
+ break;
191
+ case "done":
192
+ agentResponse = event.response;
193
+ capturedConversationId = event.conversation_id ?? null;
194
+ break;
195
+ case "error":
196
+ dispatch({ type: "SEND_ERROR", error: event.error });
197
+ return;
198
+ }
199
+ } catch {
200
+ }
201
+ }
202
+ }
203
+ const assistantMessage = {
204
+ id: generateMessageId(),
205
+ role: "assistant",
206
+ content: agentResponse?.message ?? accumulatedContent,
207
+ response: agentResponse ?? void 0,
208
+ agent: capturedAgent ?? void 0,
209
+ timestamp: /* @__PURE__ */ new Date()
210
+ };
211
+ dispatch({
212
+ type: "SEND_SUCCESS",
213
+ message: assistantMessage,
214
+ streamingContent: accumulatedContent,
215
+ conversationId: capturedConversationId
216
+ });
217
+ } catch (err) {
218
+ clearTimeout(timeoutId);
219
+ if (err.name === "AbortError") {
220
+ dispatch({
221
+ type: "SEND_ERROR",
222
+ error: { code: "TIMEOUT", message: "Request timed out", retryable: true }
223
+ });
224
+ } else {
225
+ dispatch({
226
+ type: "SEND_ERROR",
227
+ error: {
228
+ code: "NETWORK_ERROR",
229
+ message: err.message ?? "Network error",
230
+ retryable: true
231
+ }
232
+ });
233
+ }
234
+ }
235
+ },
236
+ [state.conversationId]
237
+ );
238
+ const setInputValue = (0, import_react.useCallback)((value) => {
239
+ dispatch({ type: "SET_INPUT", value });
240
+ }, []);
241
+ const loadConversation = (0, import_react.useCallback)((conversationId, messages) => {
242
+ dispatch({ type: "LOAD_CONVERSATION", conversationId, messages });
243
+ }, []);
244
+ const submitFeedback = (0, import_react.useCallback)(
245
+ async (messageId, rating, comment) => {
246
+ const { apiUrl, feedbackPath = "/feedback", headers = {} } = configRef.current;
247
+ await fetch(`${apiUrl}${feedbackPath}`, {
248
+ method: "POST",
249
+ headers: { "Content-Type": "application/json", ...headers },
250
+ body: JSON.stringify({ messageId, rating, comment })
251
+ });
252
+ },
253
+ []
254
+ );
255
+ const retry = (0, import_react.useCallback)(async () => {
256
+ if (lastUserMessageRef.current) {
257
+ await sendMessage(lastUserMessageRef.current);
258
+ }
259
+ }, [sendMessage]);
260
+ const reset = (0, import_react.useCallback)(() => {
261
+ dispatch({ type: "RESET" });
262
+ lastUserMessageRef.current = null;
263
+ }, []);
264
+ const actions = {
265
+ sendMessage,
266
+ setInputValue,
267
+ loadConversation,
268
+ submitFeedback,
269
+ retry,
270
+ reset
271
+ };
272
+ return { state, actions };
273
+ }
274
+
275
+ // src/chat/MessageThread/MessageThread.tsx
276
+ var import_tailwind_merge5 = require("tailwind-merge");
277
+ var import_react3 = require("react");
278
+
279
+ // src/chat/MessageBubble/MessageBubble.tsx
280
+ var import_tailwind_merge4 = require("tailwind-merge");
281
+
282
+ // src/response/AgentResponse/AgentResponse.tsx
283
+ var import_core2 = require("@surf-kit/core");
284
+
285
+ // src/response/ResponseMessage/ResponseMessage.tsx
286
+ var import_react_markdown = __toESM(require("react-markdown"), 1);
287
+ var import_rehype_sanitize = __toESM(require("rehype-sanitize"), 1);
288
+ var import_tailwind_merge = require("tailwind-merge");
289
+ var import_jsx_runtime = require("react/jsx-runtime");
290
+ function normalizeMarkdownLists(content) {
291
+ return content.replace(/:\s+-\s+/g, ":\n\n- ");
292
+ }
293
+ function ResponseMessage({ content, className }) {
294
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
295
+ "div",
296
+ {
297
+ className: (0, import_tailwind_merge.twMerge)(
298
+ "text-sm leading-relaxed text-text-primary",
299
+ "[&_p]:my-2",
300
+ "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-6",
301
+ "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-6",
302
+ "[&_li]:my-1",
303
+ "[&_strong]:text-text-primary [&_strong]:font-semibold",
304
+ "[&_em]:text-text-secondary",
305
+ "[&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-text-primary [&_h1]:mt-4 [&_h1]:mb-2",
306
+ "[&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-text-primary [&_h2]:mt-3 [&_h2]:mb-1.5",
307
+ "[&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-accent [&_h3]:mt-2 [&_h3]:mb-1",
308
+ "[&_code]:bg-surface-raised [&_code]:text-accent [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_code]:font-mono",
309
+ "[&_pre]:bg-surface-raised [&_pre]:border [&_pre]:border-border [&_pre]:rounded-xl [&_pre]:p-4 [&_pre]:overflow-x-auto",
310
+ "[&_blockquote]:border-l-2 [&_blockquote]:border-border-strong [&_blockquote]:pl-4 [&_blockquote]:text-text-secondary",
311
+ "[&_a]:text-accent [&_a]:underline-offset-2 [&_a]:hover:text-accent/80",
312
+ className
313
+ ),
314
+ "data-testid": "response-message",
315
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
316
+ import_react_markdown.default,
317
+ {
318
+ rehypePlugins: [import_rehype_sanitize.default],
319
+ components: {
320
+ script: () => null,
321
+ iframe: () => null,
322
+ p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "my-2", children }),
323
+ ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "my-2 list-disc pl-6", children }),
324
+ ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "my-2 list-decimal pl-6", children }),
325
+ li: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "my-1", children }),
326
+ strong: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { className: "font-semibold", children }),
327
+ h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-base font-bold mt-4 mb-2", children }),
328
+ h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-sm font-bold mt-3 mb-1", children }),
329
+ h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-sm font-semibold mt-2 mb-1", children }),
330
+ code: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", children })
331
+ },
332
+ children: normalizeMarkdownLists(content)
333
+ }
334
+ )
335
+ }
336
+ );
337
+ }
338
+
339
+ // src/response/StructuredResponse/StructuredResponse.tsx
340
+ var import_jsx_runtime2 = require("react/jsx-runtime");
341
+ function tryParse(value) {
342
+ if (value === void 0 || value === null) return null;
343
+ if (typeof value === "string") {
344
+ try {
345
+ return JSON.parse(value);
346
+ } catch {
347
+ return null;
348
+ }
349
+ }
350
+ return value;
351
+ }
352
+ function renderSteps(data) {
353
+ const steps = tryParse(data.steps);
354
+ if (!steps || !Array.isArray(steps)) return null;
355
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ol", { className: "flex flex-col gap-2", "data-testid": "structured-steps", children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "flex items-start gap-3", children: [
356
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
357
+ "span",
358
+ {
359
+ className: "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent text-[11px] font-semibold text-white",
360
+ "aria-hidden": "true",
361
+ children: i + 1
362
+ }
363
+ ),
364
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm text-text-primary leading-relaxed", children: step })
365
+ ] }, i)) });
366
+ }
367
+ function renderTable(data) {
368
+ const columns = tryParse(data.columns);
369
+ const rawRows = tryParse(data.rows);
370
+ if (columns && rawRows && Array.isArray(columns) && Array.isArray(rawRows)) {
371
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "overflow-x-auto rounded-lg border border-border", "data-testid": "structured-table", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { role: "table", className: "w-full border-collapse text-sm", children: [
372
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { className: "bg-surface-raised", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
373
+ "th",
374
+ {
375
+ className: "text-left px-4 py-2.5 font-semibold text-text-primary border-b border-border",
376
+ children: col
377
+ },
378
+ col
379
+ )) }) }),
380
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: rawRows.map((row, i) => {
381
+ const cells = Array.isArray(row) ? row : columns.map((col) => row[col]);
382
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { className: "even:bg-surface-raised/40", children: cells.map((cell, j) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "px-4 py-2 text-text-secondary border-b border-border", children: String(cell ?? "") }, j)) }, i);
383
+ }) })
384
+ ] }) });
385
+ }
386
+ const entries = Object.entries(data);
387
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "overflow-x-auto rounded-lg border border-border", "data-testid": "structured-table", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("table", { role: "table", className: "w-full border-collapse text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { className: "even:bg-surface-raised/40", children: [
388
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "px-4 py-2 text-text-primary font-medium border-b border-border w-1/3", children: key }),
389
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "px-4 py-2 text-text-secondary border-b border-border", children: typeof value === "object" ? JSON.stringify(value) : String(value ?? "") })
390
+ ] }, key)) }) }) });
391
+ }
392
+ function renderCard(data) {
393
+ const title = typeof data.title === "string" ? data.title : null;
394
+ const body = typeof data.body === "string" ? data.body : null;
395
+ const link = typeof data.link === "string" ? data.link : null;
396
+ const linkLabel = typeof data.link_label === "string" ? data.link_label : "Learn more";
397
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
398
+ "div",
399
+ {
400
+ className: "rounded-xl border border-border bg-surface-raised p-4 flex flex-col gap-2",
401
+ "data-testid": "structured-card",
402
+ children: [
403
+ title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm font-semibold text-text-primary", children: title }),
404
+ body && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-text-secondary leading-relaxed", children: body }),
405
+ link && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
406
+ "a",
407
+ {
408
+ href: link,
409
+ target: "_blank",
410
+ rel: "noopener noreferrer",
411
+ className: "mt-1 inline-flex items-center gap-1 text-xs font-medium text-accent hover:text-accent/80 underline-offset-2 hover:underline transition-colors",
412
+ children: [
413
+ linkLabel,
414
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
415
+ ]
416
+ }
417
+ )
418
+ ]
419
+ }
420
+ );
421
+ }
422
+ function renderList(data) {
423
+ const items = tryParse(data.items);
424
+ const title = typeof data.title === "string" ? data.title : null;
425
+ if (!items || !Array.isArray(items)) return null;
426
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "structured-list", children: [
427
+ title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-semibold uppercase tracking-wider text-text-secondary mb-1", children: title }),
428
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "flex flex-col gap-1.5", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "flex items-start gap-2.5", children: [
429
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-accent", "aria-hidden": "true" }),
430
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm text-text-primary leading-relaxed", children: item })
431
+ ] }, i)) })
432
+ ] });
433
+ }
434
+ function renderWarning(data) {
435
+ const severity = typeof data.severity === "string" ? data.severity : "medium";
436
+ const action = typeof data.action === "string" ? data.action : null;
437
+ const details = typeof data.details === "string" ? data.details : null;
438
+ const isHigh = severity === "high";
439
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
440
+ "div",
441
+ {
442
+ role: "alert",
443
+ className: `rounded-xl border p-4 flex gap-3 ${isHigh ? "border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-950/30" : "border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-950/30"}`,
444
+ "data-testid": "structured-warning",
445
+ children: [
446
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
447
+ "svg",
448
+ {
449
+ className: `mt-0.5 h-5 w-5 shrink-0 ${isHigh ? "text-red-500" : "text-amber-500"}`,
450
+ fill: "none",
451
+ viewBox: "0 0 24 24",
452
+ stroke: "currentColor",
453
+ strokeWidth: 2,
454
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" })
455
+ }
456
+ ),
457
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col gap-1", children: [
458
+ action && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: `text-sm font-semibold ${isHigh ? "text-red-700 dark:text-red-300" : "text-amber-700 dark:text-amber-300"}`, children: action }),
459
+ details && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: `text-sm ${isHigh ? "text-red-600 dark:text-red-400" : "text-amber-600 dark:text-amber-400"}`, children: details })
460
+ ] })
461
+ ]
462
+ }
463
+ );
464
+ }
465
+ function StructuredResponse({ uiHint, data, className }) {
466
+ if (!data) return null;
467
+ let content;
468
+ switch (uiHint) {
469
+ case "steps":
470
+ content = renderSteps(data);
471
+ break;
472
+ case "table":
473
+ content = renderTable(data);
474
+ break;
475
+ case "card":
476
+ content = renderCard(data);
477
+ break;
478
+ case "list":
479
+ content = renderList(data);
480
+ break;
481
+ case "warning":
482
+ content = renderWarning(data);
483
+ break;
484
+ case "text":
485
+ content = typeof data.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { "data-testid": "structured-text", children: data.text }) : null;
486
+ break;
487
+ default:
488
+ content = null;
489
+ }
490
+ if (!content) return null;
491
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, "data-testid": "structured-response", children: content });
492
+ }
493
+
494
+ // src/sources/SourceList/SourceList.tsx
495
+ var import_react2 = require("react");
496
+
497
+ // src/sources/SourceCard/SourceCard.tsx
498
+ var import_core = require("@surf-kit/core");
499
+ var import_tailwind_merge2 = require("tailwind-merge");
500
+ var import_jsx_runtime3 = require("react/jsx-runtime");
501
+ function getConfidenceIntent(confidence) {
502
+ if (confidence >= 0.8) return "success";
503
+ if (confidence >= 0.5) return "warning";
504
+ return "error";
505
+ }
506
+ function getConfidenceLabel(confidence) {
507
+ if (confidence >= 0.8) return "High";
508
+ if (confidence >= 0.5) return "Medium";
509
+ return "Low";
510
+ }
511
+ function SourceCard({ source, variant = "compact", onNavigate, className }) {
512
+ const handleClick = () => {
513
+ if (onNavigate) {
514
+ onNavigate(source);
515
+ }
516
+ };
517
+ const isCompact = variant === "compact";
518
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
519
+ "div",
520
+ {
521
+ className: (0, import_tailwind_merge2.twMerge)(
522
+ "rounded-xl border transition-all duration-200",
523
+ "bg-surface border-border",
524
+ onNavigate && "cursor-pointer hover:border-border-strong",
525
+ className
526
+ ),
527
+ "data-document-id": source.document_id,
528
+ "data-testid": "source-card",
529
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
530
+ "div",
531
+ {
532
+ className: isCompact ? "px-4 py-3" : "px-6 py-4",
533
+ onClick: handleClick,
534
+ role: onNavigate ? "button" : void 0,
535
+ tabIndex: onNavigate ? 0 : void 0,
536
+ onKeyDown: onNavigate ? (e) => {
537
+ if (e.key === "Enter" || e.key === " ") {
538
+ e.preventDefault();
539
+ handleClick();
540
+ }
541
+ } : void 0,
542
+ children: [
543
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
544
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 min-w-0", children: [
545
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-medium text-text-primary truncate", children: source.title }),
546
+ source.section && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-[11px] font-semibold uppercase tracking-wider text-text-secondary truncate mt-0.5", children: source.section })
547
+ ] }),
548
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
549
+ import_core.Badge,
550
+ {
551
+ intent: getConfidenceIntent(source.confidence),
552
+ size: "sm",
553
+ children: getConfidenceLabel(source.confidence)
554
+ }
555
+ )
556
+ ] }),
557
+ !isCompact && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-text-secondary mt-2 line-clamp-3 leading-relaxed", children: source.snippet })
558
+ ]
559
+ }
560
+ )
561
+ }
562
+ );
563
+ }
564
+
565
+ // src/sources/SourceList/SourceList.tsx
566
+ var import_jsx_runtime4 = require("react/jsx-runtime");
567
+ function SourceList({
568
+ sources,
569
+ variant = "compact",
570
+ collapsible = false,
571
+ defaultExpanded = true,
572
+ onNavigate,
573
+ className
574
+ }) {
575
+ const [isExpanded, setIsExpanded] = (0, import_react2.useState)(defaultExpanded);
576
+ if (sources.length === 0) return null;
577
+ const content = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col gap-1.5", "data-testid": "source-list-items", children: sources.map((source) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
578
+ SourceCard,
579
+ {
580
+ source,
581
+ variant,
582
+ onNavigate
583
+ },
584
+ source.document_id
585
+ )) });
586
+ if (!collapsible) {
587
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, "data-testid": "source-list", children: content });
588
+ }
589
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, "data-testid": "source-list", children: [
590
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
591
+ "button",
592
+ {
593
+ type: "button",
594
+ onClick: () => setIsExpanded((prev) => !prev),
595
+ "aria-expanded": isExpanded,
596
+ className: "flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-text-secondary hover:text-accent mb-2 transition-colors duration-200",
597
+ children: [
598
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
599
+ "svg",
600
+ {
601
+ className: `w-4 h-4 transition-transform ${isExpanded ? "rotate-180" : ""}`,
602
+ fill: "none",
603
+ viewBox: "0 0 24 24",
604
+ stroke: "currentColor",
605
+ strokeWidth: 2,
606
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
607
+ }
608
+ ),
609
+ "Sources (",
610
+ sources.length,
611
+ ")"
612
+ ]
613
+ }
614
+ ),
615
+ isExpanded && content
616
+ ] });
617
+ }
618
+
619
+ // src/response/FollowUpChips/FollowUpChips.tsx
620
+ var import_tailwind_merge3 = require("tailwind-merge");
621
+ var import_jsx_runtime5 = require("react/jsx-runtime");
622
+ function FollowUpChips({ suggestions, onSelect, className }) {
623
+ if (suggestions.length === 0) return null;
624
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
625
+ "div",
626
+ {
627
+ className: (0, import_tailwind_merge3.twMerge)("flex flex-wrap gap-2 py-1", className),
628
+ role: "group",
629
+ "aria-label": "Follow-up suggestions",
630
+ "data-testid": "follow-up-chips",
631
+ children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
632
+ "button",
633
+ {
634
+ type: "button",
635
+ onClick: () => onSelect(suggestion),
636
+ className: (0, import_tailwind_merge3.twMerge)(
637
+ "px-4 py-1.5 rounded-full text-sm whitespace-nowrap",
638
+ "border border-border bg-transparent text-text-secondary",
639
+ "hover:bg-accent/10 hover:border-interactive hover:text-text-primary",
640
+ "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
641
+ "transition-all duration-200"
642
+ ),
643
+ children: suggestion
644
+ },
645
+ suggestion
646
+ ))
647
+ }
648
+ );
649
+ }
650
+
651
+ // src/response/AgentResponse/AgentResponse.tsx
652
+ var import_jsx_runtime6 = require("react/jsx-runtime");
653
+ function getConfidenceIntent2(overall) {
654
+ if (overall === "high") return "success";
655
+ if (overall === "medium") return "warning";
656
+ return "error";
657
+ }
658
+ function getVerificationIntent(status) {
659
+ if (status === "passed") return "success";
660
+ if (status === "flagged") return "warning";
661
+ return "error";
662
+ }
663
+ function getVerificationLabel(status) {
664
+ if (status === "passed") return "Verified";
665
+ if (status === "flagged") return "Flagged";
666
+ return "Failed";
667
+ }
668
+ function AgentResponse({
669
+ response,
670
+ showSources = true,
671
+ showConfidence = false,
672
+ showVerification = false,
673
+ onFollowUp,
674
+ onNavigateSource,
675
+ className
676
+ }) {
677
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `flex flex-col gap-4 ${className ?? ""}`, "data-testid": "agent-response", children: [
678
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ResponseMessage, { content: response.message }),
679
+ response.ui_hint !== "text" && response.structured_data && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
680
+ StructuredResponse,
681
+ {
682
+ uiHint: response.ui_hint,
683
+ data: response.structured_data
684
+ }
685
+ ),
686
+ (showConfidence || showVerification) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-2 mt-1", "data-testid": "response-meta", children: [
687
+ showConfidence && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
688
+ import_core2.Badge,
689
+ {
690
+ intent: getConfidenceIntent2(response.confidence.overall),
691
+ size: "sm",
692
+ children: [
693
+ response.confidence.overall,
694
+ " confidence"
695
+ ]
696
+ }
697
+ ),
698
+ showVerification && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
699
+ import_core2.Badge,
700
+ {
701
+ intent: getVerificationIntent(response.verification.status),
702
+ size: "sm",
703
+ children: [
704
+ getVerificationLabel(response.verification.status),
705
+ " (",
706
+ response.verification.claims_verified,
707
+ "/",
708
+ response.verification.claims_checked,
709
+ ")"
710
+ ]
711
+ }
712
+ )
713
+ ] }),
714
+ showSources && response.sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
715
+ SourceList,
716
+ {
717
+ sources: response.sources,
718
+ variant: "compact",
719
+ collapsible: true,
720
+ defaultExpanded: false,
721
+ onNavigate: onNavigateSource
722
+ }
723
+ ),
724
+ response.follow_up_suggestions.length > 0 && onFollowUp && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
725
+ FollowUpChips,
726
+ {
727
+ suggestions: response.follow_up_suggestions,
728
+ onSelect: onFollowUp
729
+ }
730
+ )
731
+ ] });
732
+ }
733
+
734
+ // src/chat/MessageBubble/MessageBubble.tsx
735
+ var import_jsx_runtime7 = require("react/jsx-runtime");
736
+ function MessageBubble({
737
+ message,
738
+ showAgent,
739
+ showSources = true,
740
+ showConfidence = true,
741
+ showVerification = true,
742
+ animated = true,
743
+ className
744
+ }) {
745
+ const isUser = message.role === "user";
746
+ if (isUser) {
747
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
748
+ "div",
749
+ {
750
+ "data-message-id": message.id,
751
+ className: (0, import_tailwind_merge4.twMerge)("flex w-full justify-end", className),
752
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
753
+ "div",
754
+ {
755
+ className: (0, import_tailwind_merge4.twMerge)(
756
+ "max-w-[70%] rounded-[18px] rounded-br-[4px] px-4 py-2.5 bg-accent text-brand-cream break-words whitespace-pre-wrap text-sm leading-relaxed",
757
+ animated && "motion-safe:animate-slideFromRight"
758
+ ),
759
+ children: message.content
760
+ }
761
+ )
762
+ }
763
+ );
764
+ }
765
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
766
+ "div",
767
+ {
768
+ "data-message-id": message.id,
769
+ className: (0, import_tailwind_merge4.twMerge)("flex w-full flex-col items-start gap-1.5", className),
770
+ children: [
771
+ showAgent && message.agent && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-text-muted px-1", children: message.agent.replace("_agent", "").replace("_", " ") }),
772
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
773
+ "div",
774
+ {
775
+ className: (0, import_tailwind_merge4.twMerge)(
776
+ "max-w-[88%] rounded-[18px] rounded-tl-[4px] px-4 py-3 bg-surface border border-border",
777
+ animated && "motion-safe:animate-springFromLeft"
778
+ ),
779
+ children: message.response ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
780
+ AgentResponse,
781
+ {
782
+ response: message.response,
783
+ showSources,
784
+ showConfidence,
785
+ showVerification
786
+ }
787
+ ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ResponseMessage, { content: message.content })
788
+ }
789
+ )
790
+ ]
791
+ }
792
+ );
793
+ }
794
+
795
+ // src/chat/MessageThread/MessageThread.tsx
796
+ var import_jsx_runtime8 = require("react/jsx-runtime");
797
+ function MessageThread({ messages, streamingSlot, showSources, showConfidence, showVerification, className }) {
798
+ const bottomRef = (0, import_react3.useRef)(null);
799
+ (0, import_react3.useEffect)(() => {
800
+ bottomRef.current?.scrollIntoView?.({ behavior: "smooth" });
801
+ }, [messages.length, streamingSlot]);
802
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
803
+ "div",
804
+ {
805
+ role: "log",
806
+ "aria-live": "polite",
807
+ "aria-label": "Message thread",
808
+ className: (0, import_tailwind_merge5.twMerge)(
809
+ "flex flex-col gap-4 overflow-y-auto flex-1 px-4 py-6",
810
+ className
811
+ ),
812
+ children: [
813
+ messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
814
+ MessageBubble,
815
+ {
816
+ message,
817
+ showSources,
818
+ showConfidence,
819
+ showVerification
820
+ },
821
+ message.id
822
+ )),
823
+ streamingSlot,
824
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: bottomRef })
825
+ ]
826
+ }
827
+ );
828
+ }
829
+
830
+ // src/chat/MessageComposer/MessageComposer.tsx
831
+ var import_tailwind_merge6 = require("tailwind-merge");
832
+ var import_react4 = require("react");
833
+ var import_jsx_runtime9 = require("react/jsx-runtime");
834
+ function MessageComposer({
835
+ onSend,
836
+ isLoading = false,
837
+ placeholder = "Type a message...",
838
+ className
839
+ }) {
840
+ const [value, setValue] = (0, import_react4.useState)("");
841
+ const textareaRef = (0, import_react4.useRef)(null);
842
+ const canSend = value.trim().length > 0 && !isLoading;
843
+ const resetHeight = (0, import_react4.useCallback)(() => {
844
+ const el = textareaRef.current;
845
+ if (el) {
846
+ el.style.height = "auto";
847
+ el.style.overflowY = "hidden";
848
+ }
849
+ }, []);
850
+ const handleSend = (0, import_react4.useCallback)(() => {
851
+ if (!canSend) return;
852
+ onSend(value.trim());
853
+ setValue("");
854
+ resetHeight();
855
+ textareaRef.current?.focus();
856
+ }, [canSend, onSend, value, resetHeight]);
857
+ const handleKeyDown = (0, import_react4.useCallback)(
858
+ (e) => {
859
+ if (e.key === "Enter" && !e.shiftKey) {
860
+ e.preventDefault();
861
+ handleSend();
862
+ }
863
+ },
864
+ [handleSend]
865
+ );
866
+ const handleChange = (0, import_react4.useCallback)(
867
+ (e) => {
868
+ setValue(e.target.value);
869
+ const el = e.target;
870
+ el.style.height = "auto";
871
+ const capped = Math.min(el.scrollHeight, 128);
872
+ el.style.height = `${capped}px`;
873
+ el.style.overflowY = el.scrollHeight > 128 ? "auto" : "hidden";
874
+ },
875
+ []
876
+ );
877
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
878
+ "div",
879
+ {
880
+ className: (0, import_tailwind_merge6.twMerge)(
881
+ "flex items-end gap-3 shrink-0 border-t border-border px-4 py-3",
882
+ className
883
+ ),
884
+ children: [
885
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
886
+ "textarea",
887
+ {
888
+ ref: textareaRef,
889
+ value,
890
+ onChange: handleChange,
891
+ onKeyDown: handleKeyDown,
892
+ placeholder,
893
+ rows: 1,
894
+ disabled: isLoading,
895
+ className: (0, import_tailwind_merge6.twMerge)(
896
+ "flex-1 resize-none rounded-xl border border-border bg-surface/80",
897
+ "px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted",
898
+ "focus:border-transparent focus:ring-2 focus:ring-accent/40 focus:outline-none",
899
+ "disabled:opacity-50 disabled:cursor-not-allowed",
900
+ "overflow-hidden",
901
+ "transition-all duration-200"
902
+ ),
903
+ style: { colorScheme: "dark" },
904
+ "aria-label": "Message input"
905
+ }
906
+ ),
907
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
908
+ "button",
909
+ {
910
+ type: "button",
911
+ onClick: handleSend,
912
+ disabled: !value.trim() || isLoading,
913
+ "aria-label": "Send message",
914
+ className: (0, import_tailwind_merge6.twMerge)(
915
+ "inline-flex items-center justify-center rounded-xl px-5 py-2.5",
916
+ "text-sm font-semibold text-white shrink-0",
917
+ "transition-all duration-200",
918
+ "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
919
+ value.trim() && !isLoading ? "bg-accent hover:bg-accent-hover hover:scale-[1.02] hover:shadow-glow-cyan active:scale-[0.98]" : "bg-accent/30 text-text-muted cursor-not-allowed"
920
+ ),
921
+ children: "Send"
922
+ }
923
+ )
924
+ ]
925
+ }
926
+ );
927
+ }
928
+
929
+ // src/chat/WelcomeScreen/WelcomeScreen.tsx
930
+ var import_tailwind_merge7 = require("tailwind-merge");
931
+ var import_jsx_runtime10 = require("react/jsx-runtime");
932
+ function WelcomeScreen({
933
+ title = "Welcome",
934
+ message = "How can I help you today?",
935
+ icon,
936
+ suggestedQuestions = [],
937
+ onQuestionSelect,
938
+ className
939
+ }) {
940
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
941
+ "div",
942
+ {
943
+ className: (0, import_tailwind_merge7.twMerge)(
944
+ "flex flex-1 flex-col items-center justify-center gap-8 p-8 text-center motion-safe:animate-fadeUp",
945
+ className
946
+ ),
947
+ children: [
948
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
949
+ "div",
950
+ {
951
+ className: "w-14 h-14 rounded-2xl bg-accent/10 border border-border flex items-center justify-center pulse-glow",
952
+ "aria-hidden": "true",
953
+ children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-2xl", children: "\u2726" })
954
+ }
955
+ ),
956
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2", children: [
957
+ title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "text-3xl font-bold text-text-primary", children: title }),
958
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-text-secondary text-base leading-relaxed max-w-md", children: message })
959
+ ] }),
960
+ suggestedQuestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
961
+ "div",
962
+ {
963
+ className: "flex flex-wrap justify-center gap-2 max-w-md",
964
+ role: "group",
965
+ "aria-label": "Suggested questions",
966
+ children: suggestedQuestions.map((question) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
967
+ "button",
968
+ {
969
+ type: "button",
970
+ onClick: () => onQuestionSelect?.(question),
971
+ className: (0, import_tailwind_merge7.twMerge)(
972
+ "px-4 py-2 rounded-full text-sm",
973
+ "border border-border bg-transparent text-text-secondary",
974
+ "hover:bg-accent/10 hover:border-interactive hover:text-text-primary",
975
+ "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
976
+ "transition-colors duration-200"
977
+ ),
978
+ children: question
979
+ },
980
+ question
981
+ ))
982
+ }
983
+ )
984
+ ]
985
+ }
986
+ );
987
+ }
988
+
989
+ // src/streaming/StreamingMessage/StreamingMessage.tsx
990
+ var import_react6 = require("react");
991
+ var import_core3 = require("@surf-kit/core");
992
+
993
+ // src/hooks/useCharacterDrain.ts
994
+ var import_react5 = require("react");
995
+ function useCharacterDrain(target, msPerChar = 15) {
996
+ const [displayed, setDisplayed] = (0, import_react5.useState)("");
997
+ const indexRef = (0, import_react5.useRef)(0);
998
+ const lastTimeRef = (0, import_react5.useRef)(0);
999
+ const rafRef = (0, import_react5.useRef)(null);
1000
+ const drainTargetRef = (0, import_react5.useRef)("");
1001
+ const msPerCharRef = (0, import_react5.useRef)(msPerChar);
1002
+ msPerCharRef.current = msPerChar;
1003
+ if (target !== "") {
1004
+ drainTargetRef.current = target;
1005
+ }
1006
+ const drainTarget = drainTargetRef.current;
1007
+ const isDraining = displayed.length < drainTarget.length;
1008
+ const tickRef = (0, import_react5.useRef)(() => {
1009
+ });
1010
+ tickRef.current = (now) => {
1011
+ const currentTarget = drainTargetRef.current;
1012
+ if (currentTarget === "") {
1013
+ rafRef.current = null;
1014
+ return;
1015
+ }
1016
+ if (lastTimeRef.current === 0) lastTimeRef.current = now;
1017
+ const elapsed = now - lastTimeRef.current;
1018
+ const charsToAdvance = Math.floor(elapsed / msPerCharRef.current);
1019
+ if (charsToAdvance > 0 && indexRef.current < currentTarget.length) {
1020
+ const nextIndex = Math.min(indexRef.current + charsToAdvance, currentTarget.length);
1021
+ indexRef.current = nextIndex;
1022
+ lastTimeRef.current = now;
1023
+ setDisplayed(currentTarget.slice(0, nextIndex));
1024
+ }
1025
+ if (indexRef.current < currentTarget.length) {
1026
+ rafRef.current = requestAnimationFrame((t) => tickRef.current(t));
1027
+ } else {
1028
+ rafRef.current = null;
1029
+ }
1030
+ };
1031
+ (0, import_react5.useEffect)(() => {
1032
+ if (drainTargetRef.current !== "" && indexRef.current < drainTargetRef.current.length && rafRef.current === null) {
1033
+ rafRef.current = requestAnimationFrame((t) => tickRef.current(t));
1034
+ }
1035
+ }, [drainTarget]);
1036
+ (0, import_react5.useEffect)(() => {
1037
+ if (target === "" && !isDraining && displayed !== "") {
1038
+ indexRef.current = 0;
1039
+ lastTimeRef.current = 0;
1040
+ drainTargetRef.current = "";
1041
+ setDisplayed("");
1042
+ }
1043
+ }, [target, isDraining, displayed]);
1044
+ (0, import_react5.useEffect)(() => {
1045
+ return () => {
1046
+ if (rafRef.current !== null) {
1047
+ cancelAnimationFrame(rafRef.current);
1048
+ rafRef.current = null;
1049
+ }
1050
+ };
1051
+ }, []);
1052
+ return { displayed, isDraining };
1053
+ }
1054
+
1055
+ // src/streaming/StreamingMessage/StreamingMessage.tsx
1056
+ var import_jsx_runtime11 = require("react/jsx-runtime");
1057
+ var phaseLabels = {
1058
+ idle: "",
1059
+ waiting: "Waiting...",
1060
+ thinking: "Thinking...",
1061
+ retrieving: "Searching...",
1062
+ generating: "Writing...",
1063
+ verifying: "Verifying..."
1064
+ };
1065
+ function StreamingMessage({
1066
+ stream,
1067
+ onComplete,
1068
+ showPhases = true,
1069
+ className
1070
+ }) {
1071
+ const onCompleteRef = (0, import_react6.useRef)(onComplete);
1072
+ onCompleteRef.current = onComplete;
1073
+ const wasActiveRef = (0, import_react6.useRef)(stream.active);
1074
+ (0, import_react6.useEffect)(() => {
1075
+ if (wasActiveRef.current && !stream.active) {
1076
+ onCompleteRef.current?.();
1077
+ }
1078
+ wasActiveRef.current = stream.active;
1079
+ }, [stream.active]);
1080
+ const phaseLabel = phaseLabels[stream.phase];
1081
+ const { displayed: displayedContent } = useCharacterDrain(stream.content);
1082
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className, "data-testid": "streaming-message", children: [
1083
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "aria-live": "assertive", className: "sr-only", children: [
1084
+ stream.active && stream.phase !== "idle" && "Response started",
1085
+ !stream.active && stream.content && "Response complete"
1086
+ ] }),
1087
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "max-w-[88%] px-4 py-3 rounded-[18px] rounded-tl-[4px] bg-surface border border-border motion-safe:animate-springFromLeft", children: [
1088
+ showPhases && stream.active && stream.phase !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
1089
+ "div",
1090
+ {
1091
+ className: "flex items-center gap-2 mb-2 text-sm text-text-secondary",
1092
+ "data-testid": "phase-indicator",
1093
+ children: [
1094
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core3.Spinner, { size: "sm" }) }),
1095
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: phaseLabel })
1096
+ ]
1097
+ }
1098
+ ),
1099
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-sm leading-relaxed text-text-primary whitespace-pre-wrap", children: [
1100
+ displayedContent,
1101
+ stream.active && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1102
+ "span",
1103
+ {
1104
+ className: "inline-block w-0.5 h-4 bg-accent align-text-bottom animate-pulse ml-0.5",
1105
+ "aria-hidden": "true",
1106
+ "data-testid": "streaming-cursor"
1107
+ }
1108
+ )
1109
+ ] })
1110
+ ] })
1111
+ ] });
1112
+ }
1113
+
1114
+ // src/chat/AgentChat/AgentChat.tsx
1115
+ var import_jsx_runtime12 = require("react/jsx-runtime");
1116
+ function AgentChat({
1117
+ endpoint,
1118
+ title = "Chat",
1119
+ welcomeTitle,
1120
+ welcomeMessage = "How can I help you today?",
1121
+ suggestedQuestions = [],
1122
+ showHeader = true,
1123
+ showWelcomeTitle = true,
1124
+ showSources,
1125
+ showConfidence,
1126
+ showVerification,
1127
+ className
1128
+ }) {
1129
+ const { state, actions } = useAgentChat({ apiUrl: endpoint });
1130
+ const hasMessages = state.messages.length > 0;
1131
+ const handleSend = (content) => {
1132
+ void actions.sendMessage(content);
1133
+ };
1134
+ const handleQuestionSelect = (question) => {
1135
+ void actions.sendMessage(question);
1136
+ };
1137
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
1138
+ "div",
1139
+ {
1140
+ className: (0, import_tailwind_merge8.twMerge)(
1141
+ "flex flex-col h-full bg-canvas border border-border rounded-xl overflow-hidden",
1142
+ className
1143
+ ),
1144
+ children: [
1145
+ showHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center justify-between border-b border-border px-4 py-3 bg-surface-raised shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h1", { className: "text-base font-semibold text-text-primary", children: title }) }),
1146
+ hasMessages ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1147
+ MessageThread,
1148
+ {
1149
+ messages: state.messages,
1150
+ streamingSlot: state.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1151
+ StreamingMessage,
1152
+ {
1153
+ stream: {
1154
+ active: state.isLoading,
1155
+ phase: state.streamPhase,
1156
+ content: state.streamingContent,
1157
+ sources: [],
1158
+ agent: null,
1159
+ agentLabel: null
1160
+ }
1161
+ }
1162
+ ) : void 0,
1163
+ showSources,
1164
+ showConfidence,
1165
+ showVerification
1166
+ }
1167
+ ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1168
+ WelcomeScreen,
1169
+ {
1170
+ title: showWelcomeTitle ? welcomeTitle ?? title : "",
1171
+ message: welcomeMessage,
1172
+ suggestedQuestions,
1173
+ onQuestionSelect: handleQuestionSelect
1174
+ }
1175
+ ),
1176
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageComposer, { onSend: handleSend, isLoading: state.isLoading })
1177
+ ]
1178
+ }
1179
+ );
1180
+ }
1181
+
1182
+ // src/chat/ConversationList/ConversationList.tsx
1183
+ var import_tailwind_merge9 = require("tailwind-merge");
1184
+ var import_jsx_runtime13 = require("react/jsx-runtime");
1185
+ function ConversationList({
1186
+ conversations,
1187
+ activeId,
1188
+ onSelect,
1189
+ onDelete,
1190
+ onNew,
1191
+ className
1192
+ }) {
1193
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1194
+ "nav",
1195
+ {
1196
+ "aria-label": "Conversation list",
1197
+ className: (0, import_tailwind_merge9.twMerge)("flex flex-col h-full bg-canvas", className),
1198
+ children: [
1199
+ onNew && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1200
+ "button",
1201
+ {
1202
+ type: "button",
1203
+ onClick: onNew,
1204
+ className: "w-full px-4 py-2.5 rounded-xl text-sm font-semibold bg-accent text-white hover:bg-accent-hover transition-all duration-200",
1205
+ children: "New conversation"
1206
+ }
1207
+ ) }),
1208
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ul", { role: "list", className: "flex-1 overflow-y-auto", children: [
1209
+ conversations.map((conversation) => {
1210
+ const isActive = conversation.id === activeId;
1211
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1212
+ "li",
1213
+ {
1214
+ className: (0, import_tailwind_merge9.twMerge)(
1215
+ "flex items-start border-b border-border transition-colors duration-200",
1216
+ "hover:bg-surface",
1217
+ isActive && "bg-surface-raised border-l-2 border-l-accent"
1218
+ ),
1219
+ children: [
1220
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1221
+ "button",
1222
+ {
1223
+ type: "button",
1224
+ onClick: () => onSelect(conversation.id),
1225
+ "aria-current": isActive ? "true" : void 0,
1226
+ className: "flex-1 min-w-0 text-left px-4 py-3",
1227
+ children: [
1228
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-sm font-medium text-brand-cream truncate", children: conversation.title }),
1229
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-xs text-brand-cream/40 truncate mt-0.5 leading-relaxed", children: conversation.lastMessage })
1230
+ ]
1231
+ }
1232
+ ),
1233
+ onDelete && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1234
+ "button",
1235
+ {
1236
+ type: "button",
1237
+ onClick: () => onDelete(conversation.id),
1238
+ "aria-label": `Delete ${conversation.title}`,
1239
+ className: "shrink-0 p-1.5 m-2 rounded-lg text-brand-cream/25 hover:text-brand-watermelon hover:bg-brand-watermelon/10 transition-colors duration-200",
1240
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1241
+ "svg",
1242
+ {
1243
+ xmlns: "http://www.w3.org/2000/svg",
1244
+ width: "14",
1245
+ height: "14",
1246
+ viewBox: "0 0 24 24",
1247
+ fill: "none",
1248
+ stroke: "currentColor",
1249
+ strokeWidth: "2",
1250
+ strokeLinecap: "round",
1251
+ strokeLinejoin: "round",
1252
+ "aria-hidden": "true",
1253
+ children: [
1254
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("polyline", { points: "3 6 5 6 21 6" }),
1255
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
1256
+ ]
1257
+ }
1258
+ )
1259
+ }
1260
+ )
1261
+ ]
1262
+ },
1263
+ conversation.id
1264
+ );
1265
+ }),
1266
+ conversations.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm text-brand-cream/30 font-body", children: "No conversations yet" }) })
1267
+ ] })
1268
+ ]
1269
+ }
1270
+ );
1271
+ }
1272
+ // Annotate the CommonJS export names for ESM import in node:
1273
+ 0 && (module.exports = {
1274
+ AgentChat,
1275
+ ConversationList,
1276
+ MessageBubble,
1277
+ MessageComposer,
1278
+ MessageThread,
1279
+ WelcomeScreen
1280
+ });
1281
+ //# sourceMappingURL=index.cjs.map