@invect/ui 0.0.6 → 0.0.8

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 (38) hide show
  1. package/dist/{Invect-BndIqK9R.js → Invect-CA2xJoX7.js} +29117 -28964
  2. package/dist/api/client.d.ts +5 -0
  3. package/dist/assets/provider-icons/index.d.ts +3 -4
  4. package/dist/demo.js +28 -28
  5. package/dist/index.css +1 -1
  6. package/dist/index.js +194 -194
  7. package/dist/stores/uiStore.d.ts +4 -0
  8. package/dist/svg-raw.d.ts +4 -0
  9. package/package.json +3 -3
  10. package/src/api/client.ts +11 -5
  11. package/src/api/use-flow-run-stream.ts +1 -5
  12. package/src/assets/provider-icons/cloudwatch.svg +14 -0
  13. package/src/assets/provider-icons/dropbox.svg +10 -0
  14. package/src/assets/provider-icons/facebook.svg +8 -0
  15. package/src/assets/provider-icons/google_analytics.svg +7 -0
  16. package/src/assets/provider-icons/index.ts +46 -43
  17. package/src/assets/provider-icons/jira.svg +18 -0
  18. package/src/assets/provider-icons/microsoft_teams.svg +27 -0
  19. package/src/assets/provider-icons/salesforce.svg +16 -0
  20. package/src/assets/provider-icons/shopify.svg +8 -0
  21. package/src/assets/provider-icons/trello.svg +16 -0
  22. package/src/assets/provider-icons/twitter.svg +7 -0
  23. package/src/components/chat/ChatMessageList.tsx +3 -27
  24. package/src/components/chat/ChatPanel.tsx +3 -3
  25. package/src/components/chat/InlineCredentialSetup.tsx +32 -19
  26. package/src/components/chat/use-chat.ts +1 -0
  27. package/src/components/credentials/CreateCredentialModal.tsx +89 -2
  28. package/src/components/credentials/EditCredentialModal.tsx +82 -2
  29. package/src/components/flow-editor/FlowHeader.tsx +1 -22
  30. package/src/components/flow-editor/FlowLayout.tsx +6 -27
  31. package/src/components/flow-editor/NodeSidebar.tsx +5 -12
  32. package/src/components/flow-editor/RunControls.tsx +12 -12
  33. package/src/components/flow-editor/node-config-panel/ConfigFieldWithTemplate.tsx +1 -2
  34. package/src/components/flow-editor/node-config-panel/panels/ConfigurationPanel.tsx +1 -12
  35. package/src/components/graph/LayoutSelector.tsx +2 -2
  36. package/src/components/shared/ProviderIcon.tsx +35 -1
  37. package/src/stores/uiStore.ts +23 -0
  38. package/src/svg-raw.d.ts +4 -0
@@ -9,6 +9,11 @@ declare class ApiClient {
9
9
  getBaseURL(): string;
10
10
  setUserId(userId: string): void;
11
11
  private getUserHeaders;
12
+ /**
13
+ * Raw fetch with standard credentials/headers. Returns the raw Response
14
+ * for streaming endpoints (SSE, chat) that need access to response.body.
15
+ */
16
+ rawRequest(endpoint: string, options?: RequestInit): Promise<Response>;
12
17
  private request;
13
18
  getDashboardStats(): Promise<DashboardStats>;
14
19
  getFlows(options?: QueryOptions<Flow>): Promise<PaginatedResponse<Flow>>;
@@ -1,8 +1,7 @@
1
1
  /**
2
- * Inline SVG strings for all built-in provider icons.
2
+ * Inline SVG strings for built-in provider icons.
3
3
  *
4
- * Bundled directly into JS consuming apps do NOT need to copy SVG
5
- * files into their public directory.
4
+ * SVGs are stored as files in this directory and imported with Vite's `?raw`
5
+ * loader so the runtime API remains a plain `Record<string, string>`.
6
6
  */
7
- /** Map of provider ID → SVG markup string. */
8
7
  export declare const PROVIDER_SVG_ICONS: Record<string, string>;
package/dist/demo.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { B as e, Ft as t, Gt as n, H as r, Jt as i, L as a, Nt as o, R as s, V as c, Xt as l, Yt as u, a as d, o as f, t as p, tn as m, z as h } from "./Invect-BndIqK9R.js";
2
+ import { B as e, It as t, Kt as n, L as r, Pt as i, Q as a, R as o, V as s, Xt as c, Yt as l, Zt as u, a as d, nn as f, o as p, t as m, z as h } from "./Invect-CA2xJoX7.js";
3
3
  import { useCallback as g, useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
4
4
  import { QueryClient as x, QueryClientProvider as S } from "@tanstack/react-query";
5
5
  import { jsx as C, jsxs as w } from "react/jsx-runtime";
@@ -144,7 +144,7 @@ function M({ data: e, useMemoryRouter: t = !0, ...n }) {
144
144
  credentialId: "cred-anthropic",
145
145
  model: "claude-sonnet-4-6"
146
146
  });
147
- }, [i, a]), /* @__PURE__ */ C(p, {
147
+ }, [i, a]), /* @__PURE__ */ C(m, {
148
148
  apiClient: r,
149
149
  useMemoryRouter: t,
150
150
  ...n
@@ -156,8 +156,8 @@ var N = { default: e }, P = {
156
156
  duration: 0,
157
157
  padding: .2
158
158
  }, F = () => {};
159
- function I({ nodes: e, edges: t, nodeDefinitions: i = [], agentTools: o = [], interactive: l = !0, showControls: d = !0 }) {
160
- let { resolvedTheme: p } = u(), m = y(null), [x, S] = b(!1), [D, O] = b(null), k = r((e) => e.syncFromServer), A = r((e) => e.setFlowId);
159
+ function I({ nodes: e, edges: t, nodeDefinitions: i = [], agentTools: l = [], interactive: u = !0, showControls: d = !0 }) {
160
+ let { resolvedTheme: f } = c(), m = y(null), [x, S] = b(!1), [D, O] = b(null), k = a((e) => e.syncFromServer), A = a((e) => e.setFlowId);
161
161
  _(() => {
162
162
  A("demo-flow", void 0), k(e, t, "demo-flow:1", "Demo Flow");
163
163
  }, [
@@ -168,12 +168,12 @@ function I({ nodes: e, edges: t, nodeDefinitions: i = [], agentTools: o = [], in
168
168
  ]);
169
169
  let j = v(() => {
170
170
  let e = {
171
- [n.AGENT]: a,
171
+ [n.AGENT]: r,
172
172
  default: h
173
173
  };
174
174
  for (let t of i) t.type in e || (e[t.type] = h);
175
175
  return e;
176
- }, [i]), M = v(() => o.filter((e) => e.provider?.id !== "triggers" && !e.id.startsWith("trigger.")).map((e) => ({
176
+ }, [i]), M = v(() => l.filter((e) => e.provider?.id !== "triggers" && !e.id.startsWith("trigger.")).map((e) => ({
177
177
  id: e.id,
178
178
  name: e.name,
179
179
  description: e.description,
@@ -182,7 +182,7 @@ function I({ nodes: e, edges: t, nodeDefinitions: i = [], agentTools: o = [], in
182
182
  inputSchema: e.inputSchema,
183
183
  nodeType: e.nodeType,
184
184
  provider: e.provider
185
- })), [o]), I = v(() => ({
185
+ })), [l]), I = v(() => ({
186
186
  onOpenToolSelector: F,
187
187
  onShowMoreTools: F,
188
188
  onRemoveTool: F,
@@ -191,8 +191,8 @@ function I({ nodes: e, edges: t, nodeDefinitions: i = [], agentTools: o = [], in
191
191
  selectedToolNodeId: null,
192
192
  selectedToolInstanceId: null
193
193
  }), [M]), L = g((e, t) => {
194
- l && (O(t.id), S(!0));
195
- }, [l]), R = g((e) => {
194
+ u && (O(t.id), S(!0));
195
+ }, [u]), R = g((e) => {
196
196
  e || (S(!1), O(null));
197
197
  }, []);
198
198
  return /* @__PURE__ */ w("div", {
@@ -202,21 +202,21 @@ function I({ nodes: e, edges: t, nodeDefinitions: i = [], agentTools: o = [], in
202
202
  height: "100%",
203
203
  background: "var(--canvas-background)"
204
204
  },
205
- children: [/* @__PURE__ */ C(s, {
205
+ children: [/* @__PURE__ */ C(o, {
206
206
  value: I,
207
207
  children: /* @__PURE__ */ w(te, {
208
208
  nodes: e,
209
209
  edges: t,
210
210
  nodeTypes: j,
211
211
  edgeTypes: N,
212
- defaultEdgeOptions: c,
213
- colorMode: p,
212
+ defaultEdgeOptions: s,
213
+ colorMode: f,
214
214
  fitView: !0,
215
215
  fitViewOptions: P,
216
- onNodeDoubleClick: l ? L : void 0,
216
+ onNodeDoubleClick: u ? L : void 0,
217
217
  nodesDraggable: !1,
218
218
  nodesConnectable: !1,
219
- elementsSelectable: l,
219
+ elementsSelectable: u,
220
220
  panOnScroll: !0,
221
221
  panOnDrag: !0,
222
222
  zoomOnScroll: !0,
@@ -228,7 +228,7 @@ function I({ nodes: e, edges: t, nodeDefinitions: i = [], agentTools: o = [], in
228
228
  size: 1.2
229
229
  })]
230
230
  })
231
- }), l && /* @__PURE__ */ C(f, {
231
+ }), u && /* @__PURE__ */ C(p, {
232
232
  open: x,
233
233
  nodeId: D,
234
234
  flowId: "demo-flow",
@@ -238,14 +238,14 @@ function I({ nodes: e, edges: t, nodeDefinitions: i = [], agentTools: o = [], in
238
238
  })]
239
239
  });
240
240
  }
241
- function L({ theme: e = "dark", className: n, style: r, containerClassName: a, nodeDefinitions: s = [], agentTools: c = [], ...u }) {
241
+ function L({ theme: e = "dark", className: n, style: r, containerClassName: a, nodeDefinitions: o = [], agentTools: s = [], ...c }) {
242
242
  let d = v(() => new x({ defaultOptions: { queries: {
243
243
  staleTime: Infinity,
244
244
  retry: !1
245
- } } }), []), f = v(() => j({
246
- nodeDefinitions: s,
247
- agentTools: c
248
- }), [s, c]);
245
+ } } }), []), p = v(() => j({
246
+ nodeDefinitions: o,
247
+ agentTools: s
248
+ }), [o, s]);
249
249
  return /* @__PURE__ */ C("div", {
250
250
  className: a,
251
251
  style: {
@@ -253,20 +253,20 @@ function L({ theme: e = "dark", className: n, style: r, containerClassName: a, n
253
253
  overflow: "hidden",
254
254
  ...r
255
255
  },
256
- children: /* @__PURE__ */ C(i, {
256
+ children: /* @__PURE__ */ C(l, {
257
257
  defaultTheme: e,
258
258
  storageKey: "invect-viewer-theme",
259
259
  className: n,
260
260
  children: /* @__PURE__ */ C(S, {
261
261
  client: d,
262
- children: /* @__PURE__ */ C(l, {
263
- apiClient: f,
264
- children: /* @__PURE__ */ C(o, {
262
+ children: /* @__PURE__ */ C(u, {
263
+ apiClient: p,
264
+ children: /* @__PURE__ */ C(i, {
265
265
  plugins: [],
266
- children: /* @__PURE__ */ C(m, { children: /* @__PURE__ */ C(t, { children: /* @__PURE__ */ C(D, { children: /* @__PURE__ */ C(I, {
267
- nodeDefinitions: s,
268
- agentTools: c,
269
- ...u
266
+ children: /* @__PURE__ */ C(f, { children: /* @__PURE__ */ C(t, { children: /* @__PURE__ */ C(D, { children: /* @__PURE__ */ C(I, {
267
+ nodeDefinitions: o,
268
+ agentTools: s,
269
+ ...c
270
270
  }) }) }) })
271
271
  })
272
272
  })