@uipath/apollo-wind 0.12.2 → 0.14.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.
Files changed (21) hide show
  1. package/dist/components/custom/chat-composer.cjs +49 -17
  2. package/dist/components/custom/chat-composer.d.ts +1 -2
  3. package/dist/components/custom/chat-composer.js +50 -18
  4. package/dist/components/custom/chat-prompt-suggestions.cjs +1 -1
  5. package/dist/components/custom/chat-prompt-suggestions.js +1 -1
  6. package/dist/components/custom/panel-delegate.cjs +54 -53
  7. package/dist/components/custom/panel-delegate.js +54 -53
  8. package/dist/components/custom/panel-flow.cjs +238 -83
  9. package/dist/components/custom/panel-flow.d.ts +17 -3
  10. package/dist/components/custom/panel-flow.js +239 -84
  11. package/dist/components/custom/toolbar-canvas.cjs +17 -25
  12. package/dist/components/custom/toolbar-canvas.js +17 -25
  13. package/dist/components/custom/toolbar-view.cjs +84 -34
  14. package/dist/components/custom/toolbar-view.d.ts +3 -1
  15. package/dist/components/custom/toolbar-view.js +85 -35
  16. package/dist/components/ui/index.cjs +14 -14
  17. package/dist/components/ui/scroll-area.cjs +8 -3
  18. package/dist/components/ui/scroll-area.js +8 -3
  19. package/dist/styles.css +251 -79
  20. package/dist/tailwind.css +151 -104
  21. package/package.json +1 -1
package/dist/components/custom/panel-delegate.js CHANGED
@@ -8,18 +8,39 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/
8
8
  import { cn } from "../../lib/index.js";
9
9
  function UiPathLogo({ className }) {
10
10
  return /*#__PURE__*/ jsx("div", {
11
- className: cn('flex h-9 w-9 items-center justify-center rounded-lg bg-brand shadow-sm', className),
12
- children: /*#__PURE__*/ jsx("span", {
13
- className: "text-xs font-bold text-foreground-on-accent select-none",
14
- children: "Ui"
11
+ className: cn('flex h-9 w-9 items-center justify-center overflow-clip rounded-lg bg-[#0092b8] shadow-sm', className),
12
+ children: /*#__PURE__*/ jsxs("svg", {
13
+ viewBox: "0 0 24 24",
14
+ fill: "none",
15
+ xmlns: "http://www.w3.org/2000/svg",
16
+ className: "h-[22px] w-[22px]",
17
+ "aria-hidden": "true",
18
+ children: [
19
+ /*#__PURE__*/ jsx("path", {
20
+ d: "M18.57 11.4014H18.273C17.3139 11.4014 16.7183 12.002 16.7183 12.9686V22.4331C16.7183 23.3997 17.3139 24.0003 18.273 24.0003H18.57C19.5289 24.0003 20.1246 23.3997 20.1246 22.4331V12.9686C20.1246 12.002 19.5289 11.4014 18.57 11.4014Z",
21
+ fill: "white"
22
+ }),
23
+ /*#__PURE__*/ jsx("path", {
24
+ d: "M22.689 5.54073C20.5215 5.19295 18.8111 3.48437 18.463 1.31918C18.4564 1.27831 18.4034 1.27831 18.3968 1.31918C18.0487 3.48437 16.3383 5.19295 14.1708 5.54073C14.1299 5.54728 14.1299 5.60028 14.1708 5.60683C16.3383 5.95453 18.0487 7.66319 18.3968 9.82838C18.4034 9.86925 18.4564 9.86925 18.463 9.82838C18.8111 7.66319 20.5215 5.95453 22.689 5.60683C22.73 5.60028 22.73 5.54728 22.689 5.54073ZM20.5595 5.59031C19.4757 5.76416 18.6205 6.61848 18.4465 7.70108C18.4432 7.72151 18.4167 7.72151 18.4134 7.70108C18.2393 6.61848 17.3841 5.76416 16.3003 5.59031C16.2799 5.58703 16.2799 5.56053 16.3003 5.55725C17.3841 5.38337 18.2393 4.52907 18.4134 3.44648C18.4167 3.42604 18.4432 3.42604 18.4465 3.44648C18.6205 4.52907 19.4757 5.38337 20.5595 5.55725C20.5799 5.56053 20.5799 5.58703 20.5595 5.59031Z",
25
+ fill: "white"
26
+ }),
27
+ /*#__PURE__*/ jsx("path", {
28
+ d: "M23.9846 2.15915C22.9008 2.33301 22.0456 3.18733 21.8716 4.26993C21.8683 4.29036 21.8418 4.29036 21.8385 4.26993C21.6645 3.18733 20.8092 2.33301 19.7255 2.15915C19.705 2.15588 19.705 2.12938 19.7255 2.1261C20.8092 1.95221 21.6645 1.09792 21.8385 0.0153254C21.8418 -0.00510845 21.8683 -0.00510845 21.8716 0.0153254C22.0456 1.09792 22.9008 1.95221 23.9846 2.1261C24.0051 2.12938 24.0051 2.15588 23.9846 2.15915Z",
29
+ fill: "white"
30
+ }),
31
+ /*#__PURE__*/ jsx("path", {
32
+ d: "M12.7647 6.85913H12.4063C11.4704 6.85913 10.889 7.4373 10.889 8.36778V15.8529C10.889 19.4018 9.80316 20.8493 7.14102 20.8493C4.47888 20.8493 3.393 19.3952 3.393 15.8306V8.36778C3.393 7.4373 2.8116 6.85913 1.87582 6.85913H1.51723C0.581398 6.85913 0 7.4373 0 8.36778V15.8529C0 21.259 2.40265 24.0001 7.14102 24.0001C11.8794 24.0001 14.2819 21.259 14.2819 15.8529V8.36778C14.2819 7.4373 13.7005 6.85913 12.7647 6.85913Z",
33
+ fill: "white"
34
+ })
35
+ ]
15
36
  })
16
37
  });
17
38
  }
18
- function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelect }) {
39
+ function ExpandedNavItem({ item, isOpen, isActive, onToggle, selectedChildId, onChildSelect }) {
19
40
  const isExpandable = Array.isArray(item.children);
20
41
  if (!isExpandable) return /*#__PURE__*/ jsxs("button", {
21
42
  type: "button",
22
- className: "flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover",
43
+ className: cn('flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-foreground-hover transition-colors hover:bg-surface-hover hover:text-foreground', isActive && 'bg-surface-hover text-foreground'),
23
44
  onClick: onToggle,
24
45
  children: [
25
46
  /*#__PURE__*/ jsx("div", {
@@ -27,7 +48,7 @@ function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelec
27
48
  children: item.icon
28
49
  }),
29
50
  /*#__PURE__*/ jsx("span", {
30
- className: "text-sm font-semibold",
51
+ className: "text-sm font-medium",
31
52
  children: item.label
32
53
  })
33
54
  ]
@@ -40,7 +61,7 @@ function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelec
40
61
  asChild: true,
41
62
  children: /*#__PURE__*/ jsxs("button", {
42
63
  type: "button",
43
- className: "flex h-10 w-full items-center justify-between rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover",
64
+ className: cn('flex h-10 w-full items-center justify-between rounded-2xl px-1 text-foreground-hover transition-colors hover:bg-surface-hover hover:text-foreground', isActive && 'bg-surface-hover text-foreground'),
44
65
  children: [
45
66
  /*#__PURE__*/ jsxs("div", {
46
67
  className: "flex items-center gap-2",
@@ -50,7 +71,7 @@ function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelec
50
71
  children: item.icon
51
72
  }),
52
73
  /*#__PURE__*/ jsx("span", {
53
- className: "text-sm font-semibold",
74
+ className: "text-sm font-medium",
54
75
  children: item.label
55
76
  })
56
77
  ]
@@ -66,10 +87,10 @@ function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelec
66
87
  }),
67
88
  /*#__PURE__*/ jsx(CollapsibleContent, {
68
89
  children: /*#__PURE__*/ jsx("div", {
69
- className: "flex flex-col",
90
+ className: "flex flex-col gap-1 pt-1",
70
91
  children: item.children?.map((child)=>/*#__PURE__*/ jsx("button", {
71
92
  type: "button",
72
- className: cn('flex h-10 items-center rounded-2xl pl-12 pr-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover', selectedChildId === child.id && 'bg-surface-hover text-foreground-on-accent'),
93
+ className: cn('flex h-10 items-center rounded-2xl pl-12 pr-3 text-sm font-normal text-foreground-hover transition-colors hover:bg-surface-hover hover:text-foreground', selectedChildId === child.id && 'bg-surface-hover text-foreground'),
73
94
  onClick: ()=>onChildSelect?.(child.id),
74
95
  children: child.label
75
96
  }, child.id))
@@ -85,11 +106,14 @@ function CollapsedNavItem({ item, isActive, onClick }) {
85
106
  asChild: true,
86
107
  children: /*#__PURE__*/ jsx("button", {
87
108
  type: "button",
88
- className: cn('flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground', isActive && 'text-brand-foreground'),
109
+ className: "group flex h-12 w-full items-center justify-center",
89
110
  onClick: onClick,
90
111
  children: /*#__PURE__*/ jsx("div", {
91
- className: cn('flex h-9 w-9 items-center justify-center rounded-lg transition-colors', isActive && 'bg-brand-subtle'),
92
- children: item.icon
112
+ className: cn('flex h-9 w-9 items-center justify-center rounded-lg text-foreground-muted group-hover:bg-surface-hover group-hover:text-foreground-hover', isActive && 'bg-surface-hover text-foreground-hover'),
113
+ children: /*#__PURE__*/ jsx("div", {
114
+ className: "h-5 w-5 group-hover:scale-[1.2]",
115
+ children: item.icon
116
+ })
93
117
  })
94
118
  })
95
119
  }),
@@ -133,7 +157,7 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
133
157
  return /*#__PURE__*/ jsx(TooltipProvider, {
134
158
  delayDuration: 300,
135
159
  children: /*#__PURE__*/ jsxs("div", {
136
- className: cn('flex flex-col justify-between bg-surface-overlay shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)] transition-[width] duration-300 ease-in-out', panelOpen ? 'w-80' : 'w-[60px]', className),
160
+ className: cn('flex h-full flex-col justify-between bg-surface-overlay transition-[width] duration-300 ease-in-out', panelOpen ? 'w-80' : 'w-[60px]', className),
137
161
  children: [
138
162
  /*#__PURE__*/ jsxs("div", {
139
163
  className: "flex flex-1 flex-col overflow-hidden",
@@ -149,11 +173,11 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
149
173
  className: "flex flex-1 items-center justify-between",
150
174
  children: [
151
175
  /*#__PURE__*/ jsxs("div", {
152
- className: "flex items-center gap-[18px]",
176
+ className: "flex items-center gap-1",
153
177
  children: [
154
178
  /*#__PURE__*/ jsx("button", {
155
179
  type: "button",
156
- className: "text-foreground-muted transition-colors hover:text-foreground",
180
+ className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground",
157
181
  "aria-label": "New conversation",
158
182
  children: /*#__PURE__*/ jsx(MessageCirclePlus, {
159
183
  className: "h-5 w-5"
@@ -161,7 +185,7 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
161
185
  }),
162
186
  /*#__PURE__*/ jsx("button", {
163
187
  type: "button",
164
- className: "text-foreground-muted transition-colors hover:text-foreground",
188
+ className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground",
165
189
  "aria-label": "Picture in picture",
166
190
  children: /*#__PURE__*/ jsx(PictureInPicture2, {
167
191
  className: "h-5 w-5"
@@ -171,7 +195,7 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
171
195
  }),
172
196
  /*#__PURE__*/ jsx("button", {
173
197
  type: "button",
174
- className: "text-foreground-muted transition-colors hover:text-foreground",
198
+ className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground",
175
199
  onClick: ()=>setPanelOpen(false),
176
200
  "aria-label": "Collapse panel",
177
201
  children: /*#__PURE__*/ jsx(PanelRightOpen, {
@@ -189,6 +213,7 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
189
213
  children: navItems.map((item)=>/*#__PURE__*/ jsx(ExpandedNavItem, {
190
214
  item: item,
191
215
  isOpen: openSections[item.id] ?? false,
216
+ isActive: activeNavId === item.id && !item.children?.some((c)=>c.id === selectedChildId),
192
217
  onToggle: ()=>{
193
218
  if (item.children?.length) toggleSection(item.id);
194
219
  setActiveNavId(item.id);
@@ -196,40 +221,16 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
196
221
  selectedChildId: selectedChildId,
197
222
  onChildSelect: onChildSelect
198
223
  }, item.id))
199
- }) : /*#__PURE__*/ jsxs("nav", {
200
- className: "flex flex-col items-center pt-[18px]",
201
- children: [
202
- /*#__PURE__*/ jsxs(Tooltip, {
203
- children: [
204
- /*#__PURE__*/ jsx(TooltipTrigger, {
205
- asChild: true,
206
- children: /*#__PURE__*/ jsx("button", {
207
- type: "button",
208
- className: "flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground",
209
- onClick: ()=>setPanelOpen(true),
210
- children: /*#__PURE__*/ jsx("div", {
211
- className: "flex h-9 w-9 items-center justify-center rounded-lg",
212
- children: /*#__PURE__*/ jsx(PanelRightOpen, {
213
- className: "h-5 w-5 -scale-x-100"
214
- })
215
- })
216
- })
217
- }),
218
- /*#__PURE__*/ jsx(TooltipContent, {
219
- side: "right",
220
- children: "Expand panel"
221
- })
222
- ]
223
- }),
224
- navItems.map((item)=>/*#__PURE__*/ jsx(CollapsedNavItem, {
225
- item: item,
226
- isActive: activeNavId === item.id,
227
- onClick: ()=>{
228
- setActiveNavId(item.id);
229
- setPanelOpen(true);
230
- }
231
- }, item.id))
232
- ]
224
+ }) : /*#__PURE__*/ jsx("nav", {
225
+ className: "flex flex-col items-center gap-1 pt-[18px]",
226
+ children: navItems.map((item)=>/*#__PURE__*/ jsx(CollapsedNavItem, {
227
+ item: item,
228
+ isActive: activeNavId === item.id,
229
+ onClick: ()=>{
230
+ setActiveNavId(item.id);
231
+ setPanelOpen(true);
232
+ }
233
+ }, item.id))
233
234
  })
234
235
  })
235
236
  ]
package/dist/components/custom/panel-flow.cjs CHANGED
@@ -31,18 +31,41 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
31
31
  const external_lucide_react_namespaceObject = require("lucide-react");
32
32
  const external_react_namespaceObject = require("react");
33
33
  const avatar_cjs_namespaceObject = require("../ui/avatar.cjs");
34
+ const collapsible_cjs_namespaceObject = require("../ui/collapsible.cjs");
34
35
  const tooltip_cjs_namespaceObject = require("../ui/tooltip.cjs");
35
36
  const index_cjs_namespaceObject = require("../../lib/index.cjs");
37
+ const external_chat_composer_cjs_namespaceObject = require("./chat-composer.cjs");
36
38
  function UiPathLogo() {
37
39
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
38
- className: "flex h-9 w-9 items-center justify-center rounded-lg bg-brand shadow-sm",
39
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
40
- className: "text-xs font-bold text-foreground-on-accent select-none",
41
- children: "Ui"
40
+ className: "flex h-9 w-9 items-center justify-center overflow-clip rounded-lg bg-[#0092b8] shadow-sm",
41
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
42
+ viewBox: "0 0 24 24",
43
+ fill: "none",
44
+ xmlns: "http://www.w3.org/2000/svg",
45
+ className: "h-[22px] w-[22px]",
46
+ "aria-hidden": "true",
47
+ children: [
48
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
49
+ d: "M18.57 11.4014H18.273C17.3139 11.4014 16.7183 12.002 16.7183 12.9686V22.4331C16.7183 23.3997 17.3139 24.0003 18.273 24.0003H18.57C19.5289 24.0003 20.1246 23.3997 20.1246 22.4331V12.9686C20.1246 12.002 19.5289 11.4014 18.57 11.4014Z",
50
+ fill: "white"
51
+ }),
52
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
53
+ d: "M22.689 5.54073C20.5215 5.19295 18.8111 3.48437 18.463 1.31918C18.4564 1.27831 18.4034 1.27831 18.3968 1.31918C18.0487 3.48437 16.3383 5.19295 14.1708 5.54073C14.1299 5.54728 14.1299 5.60028 14.1708 5.60683C16.3383 5.95453 18.0487 7.66319 18.3968 9.82838C18.4034 9.86925 18.4564 9.86925 18.463 9.82838C18.8111 7.66319 20.5215 5.95453 22.689 5.60683C22.73 5.60028 22.73 5.54728 22.689 5.54073ZM20.5595 5.59031C19.4757 5.76416 18.6205 6.61848 18.4465 7.70108C18.4432 7.72151 18.4167 7.72151 18.4134 7.70108C18.2393 6.61848 17.3841 5.76416 16.3003 5.59031C16.2799 5.58703 16.2799 5.56053 16.3003 5.55725C17.3841 5.38337 18.2393 4.52907 18.4134 3.44648C18.4167 3.42604 18.4432 3.42604 18.4465 3.44648C18.6205 4.52907 19.4757 5.38337 20.5595 5.55725C20.5799 5.56053 20.5799 5.58703 20.5595 5.59031Z",
54
+ fill: "white"
55
+ }),
56
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
57
+ d: "M23.9846 2.15915C22.9008 2.33301 22.0456 3.18733 21.8716 4.26993C21.8683 4.29036 21.8418 4.29036 21.8385 4.26993C21.6645 3.18733 20.8092 2.33301 19.7255 2.15915C19.705 2.15588 19.705 2.12938 19.7255 2.1261C20.8092 1.95221 21.6645 1.09792 21.8385 0.0153254C21.8418 -0.00510845 21.8683 -0.00510845 21.8716 0.0153254C22.0456 1.09792 22.9008 1.95221 23.9846 2.1261C24.0051 2.12938 24.0051 2.15588 23.9846 2.15915Z",
58
+ fill: "white"
59
+ }),
60
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
61
+ d: "M12.7647 6.85913H12.4063C11.4704 6.85913 10.889 7.4373 10.889 8.36778V15.8529C10.889 19.4018 9.80316 20.8493 7.14102 20.8493C4.47888 20.8493 3.393 19.3952 3.393 15.8306V8.36778C3.393 7.4373 2.8116 6.85913 1.87582 6.85913H1.51723C0.581398 6.85913 0 7.4373 0 8.36778V15.8529C0 21.259 2.40265 24.0001 7.14102 24.0001C11.8794 24.0001 14.2819 21.259 14.2819 15.8529V8.36778C14.2819 7.4373 13.7005 6.85913 12.7647 6.85913Z",
62
+ fill: "white"
63
+ })
64
+ ]
42
65
  })
43
66
  });
44
67
  }
45
- function IconRail({ navItems, activeId, onNavClick, hasShadow }) {
68
+ function IconRail({ navItems, activeId, onNavClick, onLogoClick, hasShadow }) {
46
69
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
47
70
  className: (0, index_cjs_namespaceObject.cn)('flex w-[60px] shrink-0 flex-col justify-between bg-surface-overlay', hasShadow && 'shadow-[0px_4px_16px_0px_rgba(0,0,0,0.25)]'),
48
71
  children: [
@@ -51,21 +74,41 @@ function IconRail({ navItems, activeId, onNavClick, hasShadow }) {
51
74
  children: [
52
75
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
53
76
  className: "flex h-[60px] w-[60px] shrink-0 items-center justify-center",
54
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(UiPathLogo, {})
77
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tooltip_cjs_namespaceObject.Tooltip, {
78
+ children: [
79
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipTrigger, {
80
+ asChild: true,
81
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
82
+ type: "button",
83
+ onClick: onLogoClick,
84
+ "aria-label": "UiPath",
85
+ className: "rounded-lg transition-opacity hover:opacity-80",
86
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(UiPathLogo, {})
87
+ })
88
+ }),
89
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipContent, {
90
+ side: "right",
91
+ children: "UiPath"
92
+ })
93
+ ]
94
+ })
55
95
  }),
56
96
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("nav", {
57
- className: "flex flex-col items-center pt-[18px]",
97
+ className: "flex flex-col items-center gap-1 pt-[18px]",
58
98
  children: navItems.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tooltip_cjs_namespaceObject.Tooltip, {
59
99
  children: [
60
100
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipTrigger, {
61
101
  asChild: true,
62
102
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
63
103
  type: "button",
64
- className: (0, index_cjs_namespaceObject.cn)('flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground', activeId === item.id && 'text-brand-foreground'),
104
+ className: "group flex h-12 w-full items-center justify-center",
65
105
  onClick: ()=>onNavClick(item.id),
66
106
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
67
- className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-9 items-center justify-center rounded-lg transition-colors', activeId === item.id && 'bg-surface-hover'),
68
- children: item.icon
107
+ className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-9 items-center justify-center rounded-lg text-foreground-muted group-hover:bg-surface-hover group-hover:text-foreground-hover', activeId === item.id && 'bg-surface-hover text-foreground-hover'),
108
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
109
+ className: "h-5 w-5 group-hover:scale-[1.2]",
110
+ children: item.icon
111
+ })
69
112
  })
70
113
  })
71
114
  }),
@@ -91,75 +134,180 @@ function IconRail({ navItems, activeId, onNavClick, hasShadow }) {
91
134
  ]
92
135
  });
93
136
  }
137
+ const toolIconMap = {
138
+ search: external_lucide_react_namespaceObject.Search,
139
+ bot: external_lucide_react_namespaceObject.Bot
140
+ };
141
+ function ToolCard({ card }) {
142
+ const [open, setOpen] = external_react_namespaceObject.useState(true);
143
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(collapsible_cjs_namespaceObject.Collapsible, {
144
+ open: open,
145
+ onOpenChange: setOpen,
146
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
147
+ className: "overflow-hidden rounded-2xl border border-surface-hover",
148
+ children: [
149
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(collapsible_cjs_namespaceObject.CollapsibleTrigger, {
150
+ asChild: true,
151
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
152
+ type: "button",
153
+ className: "flex w-full items-center justify-between border-b border-surface-hover p-4",
154
+ children: [
155
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
156
+ className: "whitespace-nowrap text-sm font-normal leading-5 text-foreground",
157
+ children: card.title
158
+ }),
159
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronUp, {
160
+ className: (0, index_cjs_namespaceObject.cn)('h-4 w-4 shrink-0 text-foreground-muted transition-transform duration-200', !open && 'rotate-180')
161
+ })
162
+ ]
163
+ })
164
+ }),
165
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(collapsible_cjs_namespaceObject.CollapsibleContent, {
166
+ className: "overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up",
167
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
168
+ className: "flex flex-col gap-2 pb-4 pt-1",
169
+ children: [
170
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
171
+ className: "px-4 py-[5px] text-xs text-foreground-muted",
172
+ children: "Agents and tools used"
173
+ }),
174
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
175
+ className: "flex flex-col gap-3",
176
+ children: card.items.map((item, i)=>{
177
+ const Icon = toolIconMap[item.icon];
178
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
179
+ className: "flex items-start gap-2.5 pl-4 pr-9",
180
+ children: [
181
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
182
+ className: "flex h-5 w-5 shrink-0 items-center justify-center",
183
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
184
+ className: "h-4 w-4 text-foreground-secondary"
185
+ })
186
+ }),
187
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
188
+ className: "flex flex-col gap-0.5",
189
+ children: [
190
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
191
+ className: "text-sm font-normal leading-4 text-foreground",
192
+ children: item.title
193
+ }),
194
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
195
+ className: "text-sm font-normal leading-5 text-foreground-muted",
196
+ children: item.description
197
+ })
198
+ ]
199
+ })
200
+ ]
201
+ }, i);
202
+ })
203
+ })
204
+ ]
205
+ })
206
+ })
207
+ ]
208
+ })
209
+ });
210
+ }
211
+ function MessageActions() {
212
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
213
+ className: "flex items-center gap-2",
214
+ children: [
215
+ {
216
+ icon: external_lucide_react_namespaceObject.RefreshCcw,
217
+ label: 'Refresh'
218
+ },
219
+ {
220
+ icon: external_lucide_react_namespaceObject.ThumbsUp,
221
+ label: 'Thumbs up'
222
+ },
223
+ {
224
+ icon: external_lucide_react_namespaceObject.ThumbsDown,
225
+ label: 'Thumbs down'
226
+ },
227
+ {
228
+ icon: external_lucide_react_namespaceObject.Copy,
229
+ label: 'Copy'
230
+ }
231
+ ].map(({ icon: Icon, label })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
232
+ type: "button",
233
+ "aria-label": label,
234
+ className: "flex h-6 w-6 items-center justify-center overflow-hidden rounded text-foreground-muted hover:text-foreground",
235
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
236
+ className: "h-4 w-4"
237
+ })
238
+ }, label))
239
+ });
240
+ }
94
241
  function DefaultChatContent({ chatMessages }) {
242
+ const [openTraces, setOpenTraces] = external_react_namespaceObject.useState({});
243
+ const isTraceOpen = (id)=>openTraces[id] ?? true;
244
+ const toggleTrace = (id)=>{
245
+ setOpenTraces((prev)=>({
246
+ ...prev,
247
+ [id]: !isTraceOpen(id)
248
+ }));
249
+ };
95
250
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
96
- className: "flex flex-1 flex-col justify-end gap-7 overflow-y-auto",
97
- children: chatMessages.map((msg)=>'user' === msg.role ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
98
- className: "flex flex-col items-end pr-6",
251
+ className: "flex flex-1 flex-col justify-end gap-7 overflow-y-auto py-2",
252
+ children: chatMessages.map((msg)=>{
253
+ if ('user' === msg.role) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
254
+ className: "flex flex-col items-end pl-4 w-full",
99
255
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
100
- className: "max-w-[360px] rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl rounded-br-[4px] bg-surface-raised px-6 py-4",
256
+ className: "max-w-[360px] rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl rounded-br-[4px] bg-surface-raised pl-6 pr-9 py-4",
101
257
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
102
- className: "text-base leading-6 tracking-[-0.4px] text-foreground",
258
+ className: "text-sm font-normal leading-6 text-foreground-secondary",
103
259
  children: msg.content
104
260
  })
105
261
  })
106
- }, msg.id) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
107
- className: "flex items-center gap-2",
108
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
109
- className: "text-base font-medium leading-5 text-foreground-muted",
110
- children: msg.content
111
- })
112
- }, msg.id))
113
- });
114
- }
115
- function ChatInput() {
116
- return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
117
- className: "flex flex-col gap-3",
118
- children: [
119
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
120
- className: "flex h-12 items-center rounded-2xl border border-border bg-surface-raised px-4",
121
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
122
- type: "text",
123
- placeholder: "Ask me to help build your Flow",
124
- className: "flex-1 bg-transparent text-sm text-foreground placeholder:text-foreground-subtle outline-none",
125
- readOnly: true
126
- })
127
- }),
128
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
129
- className: "flex items-center justify-between",
262
+ }, msg.id);
263
+ const traceOpen = isTraceOpen(msg.id);
264
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
265
+ className: "flex flex-col gap-4",
130
266
  children: [
131
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
132
- className: "flex items-center gap-2",
267
+ msg.traceLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(collapsible_cjs_namespaceObject.Collapsible, {
268
+ open: traceOpen,
269
+ onOpenChange: ()=>toggleTrace(msg.id),
133
270
  children: [
134
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
135
- type: "button",
136
- className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground",
137
- "aria-label": "Add attachment",
138
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
139
- className: "h-5 w-5"
271
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(collapsible_cjs_namespaceObject.CollapsibleTrigger, {
272
+ asChild: true,
273
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
274
+ type: "button",
275
+ className: "flex items-center gap-2 text-left",
276
+ children: [
277
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Brain, {
278
+ className: "h-4 w-4 shrink-0 text-foreground-muted"
279
+ }),
280
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
281
+ className: "text-sm font-medium leading-5 text-foreground-muted",
282
+ children: msg.traceLabel
283
+ }),
284
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronUp, {
285
+ className: (0, index_cjs_namespaceObject.cn)('h-4 w-4 shrink-0 text-foreground-muted transition-transform duration-200', !traceOpen && 'rotate-180')
286
+ })
287
+ ]
140
288
  })
141
289
  }),
142
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
143
- type: "button",
144
- className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground",
145
- "aria-label": "Add workflow",
146
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
147
- className: "h-5 w-5"
290
+ msg.toolCard && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(collapsible_cjs_namespaceObject.CollapsibleContent, {
291
+ className: "overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up",
292
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
293
+ className: "flex flex-col gap-2 pt-4",
294
+ children: [
295
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolCard, {
296
+ card: msg.toolCard
297
+ }),
298
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MessageActions, {})
299
+ ]
148
300
  })
149
301
  })
150
302
  ]
151
303
  }),
152
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
153
- type: "button",
154
- className: "flex h-8 w-8 items-center justify-center rounded-full bg-brand text-foreground-on-accent",
155
- "aria-label": "Submit message",
156
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CornerDownLeft, {
157
- className: "h-4 w-4"
158
- })
304
+ msg.content && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
305
+ className: "text-sm font-normal leading-5 text-foreground-muted",
306
+ children: msg.content
159
307
  })
160
308
  ]
161
- })
162
- ]
309
+ }, msg.id);
310
+ })
163
311
  });
164
312
  }
165
313
  function ExpandedPanel({ chatMessages, expandedContent, onClose }) {
@@ -169,22 +317,13 @@ function ExpandedPanel({ chatMessages, expandedContent, onClose }) {
169
317
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
170
318
  className: "flex items-center justify-between",
171
319
  children: [
172
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
173
- className: "flex items-center gap-4 text-base tracking-[-0.6px] leading-9",
174
- children: [
175
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
176
- className: "font-bold text-foreground",
177
- children: "Flow"
178
- }),
179
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
180
- className: "font-medium text-foreground-subtle",
181
- children: "Autopilot"
182
- })
183
- ]
320
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
321
+ className: "text-base font-bold leading-9 tracking-tight text-foreground",
322
+ children: "Flow"
184
323
  }),
185
324
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
186
325
  type: "button",
187
- className: "text-foreground-muted transition-colors hover:text-foreground",
326
+ className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground",
188
327
  onClick: onClose,
189
328
  "aria-label": "Close panel",
190
329
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PanelRightOpen, {
@@ -196,7 +335,12 @@ function ExpandedPanel({ chatMessages, expandedContent, onClose }) {
196
335
  expandedContent ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultChatContent, {
197
336
  chatMessages: chatMessages
198
337
  }),
199
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ChatInput, {})
338
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
339
+ className: "pt-12",
340
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_chat_composer_cjs_namespaceObject.ChatComposer, {
341
+ placeholder: "Ask me to help build your Flow"
342
+ })
343
+ })
200
344
  ]
201
345
  });
202
346
  }
@@ -208,6 +352,9 @@ function FlowPanel({ className, open = false, onOpenChange, navItems = [], activ
208
352
  onNavChange?.(id);
209
353
  onOpenChange?.(true);
210
354
  };
355
+ const handleLogoClick = ()=>{
356
+ onOpenChange?.(!open);
357
+ };
211
358
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipProvider, {
212
359
  delayDuration: 300,
213
360
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -217,12 +364,20 @@ function FlowPanel({ className, open = false, onOpenChange, navItems = [], activ
217
364
  navItems: navItems,
218
365
  activeId: activeId,
219
366
  onNavClick: handleNavClick,
367
+ onLogoClick: handleLogoClick,
220
368
  hasShadow: open
221
369
  }),
222
- open && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExpandedPanel, {
223
- chatMessages: chatMessages,
224
- expandedContent: expandedContent,
225
- onClose: ()=>onOpenChange?.(false)
370
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
371
+ className: "overflow-hidden shrink-0",
372
+ style: {
373
+ width: open ? 420 : 0,
374
+ transition: 'width 300ms ease-out'
375
+ },
376
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExpandedPanel, {
377
+ chatMessages: chatMessages,
378
+ expandedContent: expandedContent,
379
+ onClose: ()=>onOpenChange?.(false)
380
+ })
226
381
  })
227
382
  ]
228
383
  })
@@ -233,21 +388,21 @@ const defaultFlowNavItems = [
233
388
  id: 'chat',
234
389
  label: 'Chat',
235
390
  icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.MessageCircle, {
236
- className: "h-5 w-5"
391
+ className: "h-full w-full"
237
392
  })
238
393
  },
239
394
  {
240
395
  id: 'home',
241
396
  label: 'Home',
242
397
  icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.House, {
243
- className: "h-5 w-5"
398
+ className: "h-full w-full"
244
399
  })
245
400
  },
246
401
  {
247
402
  id: 'flows',
248
403
  label: 'Flows',
249
404
  icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
250
- className: "h-5 w-5"
405
+ className: "h-full w-full"
251
406
  })
252
407
  }
253
408
  ];