@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/chat-composer.cjs CHANGED
@@ -32,6 +32,7 @@ const external_react_namespaceObject = require("react");
32
32
  const index_cjs_namespaceObject = require("../../lib/index.cjs");
33
33
  function ChatComposer({ className, placeholder = 'I would like you to automate my', onSubmit }) {
34
34
  const [value, setValue] = external_react_namespaceObject.useState('');
35
+ const [focused, setFocused] = external_react_namespaceObject.useState(false);
35
36
  const handleSubmit = ()=>{
36
37
  if (value.trim()) {
37
38
  onSubmit?.(value.trim());
@@ -44,18 +45,21 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
44
45
  handleSubmit();
45
46
  }
46
47
  };
48
+ const showEnter = value.length > 0;
47
49
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
48
- className: (0, index_cjs_namespaceObject.cn)('w-full max-w-[800px] rounded-[32px] bg-gradient-to-b from-surface to-surface-raised p-2', className),
50
+ className: (0, index_cjs_namespaceObject.cn)('w-full max-w-[800px] rounded-[32px] bg-surface-raised p-2', className),
49
51
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
50
- className: "flex min-h-[124px] flex-col justify-between rounded-3xl border border-border bg-surface-overlay pb-3 pl-4 pr-3 pt-4",
52
+ className: "group/input flex flex-col gap-3 rounded-[24px] border border-border bg-surface pb-3 pl-4 pr-3 pt-4 transition-colors hover:border-border-hover focus-within:border-border-hover",
51
53
  children: [
52
54
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
53
- className: "w-full resize-none bg-transparent text-base font-medium leading-5 text-foreground placeholder:text-foreground-subtle focus:outline-none",
55
+ className: "w-full resize-none bg-transparent text-sm font-normal leading-5 text-foreground placeholder:text-foreground-muted group-hover/input:placeholder:text-foreground-secondary focus:placeholder:text-foreground-secondary focus:outline-none",
54
56
  placeholder: placeholder,
55
- rows: 2,
57
+ rows: 3,
56
58
  value: value,
57
59
  onChange: (e)=>setValue(e.target.value),
58
- onKeyDown: handleKeyDown
60
+ onKeyDown: handleKeyDown,
61
+ onFocus: ()=>setFocused(true),
62
+ onBlur: ()=>setFocused(false)
59
63
  }),
60
64
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
61
65
  className: "flex items-center justify-between",
@@ -65,30 +69,58 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
65
69
  children: [
66
70
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
67
71
  type: "button",
68
- className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
72
+ className: "group flex h-8 w-8 items-center justify-center rounded-lg hover:bg-surface-hover",
69
73
  "aria-label": "Add attachment",
70
74
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
71
- className: "h-5 w-5 text-foreground-inverse"
75
+ className: "h-5 w-5 text-foreground-muted group-hover:text-foreground-hover"
72
76
  })
73
77
  }),
74
78
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
75
79
  type: "button",
76
- className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
80
+ className: "group flex h-8 w-8 items-center justify-center rounded-lg hover:bg-surface-hover",
77
81
  "aria-label": "Add workflow",
78
82
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
79
- className: "h-5 w-5 text-foreground-inverse"
83
+ className: "h-5 w-5 text-foreground-muted group-hover:text-foreground-hover"
84
+ })
85
+ }),
86
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
87
+ type: "button",
88
+ className: "group flex h-8 w-8 items-center justify-center rounded-lg hover:bg-surface-hover",
89
+ "aria-label": "Settings",
90
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Settings2, {
91
+ className: "h-5 w-5 text-foreground-muted group-hover:text-foreground-hover"
80
92
  })
81
93
  })
82
94
  ]
83
95
  }),
84
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
85
- type: "button",
86
- className: "flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90",
87
- onClick: handleSubmit,
88
- "aria-label": "Submit message",
89
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CornerDownLeft, {
90
- className: "h-5 w-5 -scale-y-100 rotate-90 text-foreground-on-accent"
91
- })
96
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
97
+ className: "flex items-center gap-2",
98
+ children: [
99
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
100
+ type: "button",
101
+ className: "group flex h-8 w-8 items-center justify-center rounded-lg hover:bg-surface-hover",
102
+ "aria-label": "Record",
103
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Circle, {
104
+ className: "h-5 w-5 text-foreground-muted group-hover:text-foreground-hover"
105
+ })
106
+ }),
107
+ showEnter ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
108
+ type: "button",
109
+ className: "flex h-8 w-8 items-center justify-center rounded-lg bg-foreground-accent hover:bg-foreground-accent-muted",
110
+ onClick: handleSubmit,
111
+ "aria-label": "Submit message",
112
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CornerRightUp, {
113
+ className: "h-5 w-5 text-white"
114
+ })
115
+ }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
116
+ type: "button",
117
+ className: (0, index_cjs_namespaceObject.cn)('flex h-8 w-8 items-center justify-center rounded-lg', focused ? 'bg-foreground-accent hover:bg-foreground-accent-muted' : 'bg-surface-hover hover:bg-foreground-accent-muted'),
118
+ "aria-label": "Voice input",
119
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Mic, {
120
+ className: "h-5 w-5 text-white"
121
+ })
122
+ })
123
+ ]
92
124
  })
93
125
  ]
94
126
  })
package/dist/components/custom/chat-composer.d.ts CHANGED
@@ -9,7 +9,6 @@ export interface ChatComposerProps {
9
9
  * Reusable chat composer input with action buttons.
10
10
  *
11
11
  * Features a text area, left-side action buttons (add, workflow),
12
- * and a cyan submit button. Fixed at 800px max-width to match the
13
- * Delegate design spec.
12
+ * and an accent submit button. Max-width 800px.
14
13
  */
15
14
  export declare function ChatComposer({ className, placeholder, onSubmit, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/custom/chat-composer.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { CornerDownLeft, Plus, Workflow } from "lucide-react";
2
+ import { Circle, CornerRightUp, Mic, Plus, Settings2, Workflow } from "lucide-react";
3
3
  import { useState } from "react";
4
4
  import { cn } from "../../lib/index.js";
5
5
  function ChatComposer({ className, placeholder = 'I would like you to automate my', onSubmit }) {
6
6
  const [value, setValue] = useState('');
7
+ const [focused, setFocused] = useState(false);
7
8
  const handleSubmit = ()=>{
8
9
  if (value.trim()) {
9
10
  onSubmit?.(value.trim());
@@ -16,18 +17,21 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
16
17
  handleSubmit();
17
18
  }
18
19
  };
20
+ const showEnter = value.length > 0;
19
21
  return /*#__PURE__*/ jsx("div", {
20
- className: cn('w-full max-w-[800px] rounded-[32px] bg-gradient-to-b from-surface to-surface-raised p-2', className),
22
+ className: cn('w-full max-w-[800px] rounded-[32px] bg-surface-raised p-2', className),
21
23
  children: /*#__PURE__*/ jsxs("div", {
22
- className: "flex min-h-[124px] flex-col justify-between rounded-3xl border border-border bg-surface-overlay pb-3 pl-4 pr-3 pt-4",
24
+ className: "group/input flex flex-col gap-3 rounded-[24px] border border-border bg-surface pb-3 pl-4 pr-3 pt-4 transition-colors hover:border-border-hover focus-within:border-border-hover",
23
25
  children: [
24
26
  /*#__PURE__*/ jsx("textarea", {
25
- className: "w-full resize-none bg-transparent text-base font-medium leading-5 text-foreground placeholder:text-foreground-subtle focus:outline-none",
27
+ className: "w-full resize-none bg-transparent text-sm font-normal leading-5 text-foreground placeholder:text-foreground-muted group-hover/input:placeholder:text-foreground-secondary focus:placeholder:text-foreground-secondary focus:outline-none",
26
28
  placeholder: placeholder,
27
- rows: 2,
29
+ rows: 3,
28
30
  value: value,
29
31
  onChange: (e)=>setValue(e.target.value),
30
- onKeyDown: handleKeyDown
32
+ onKeyDown: handleKeyDown,
33
+ onFocus: ()=>setFocused(true),
34
+ onBlur: ()=>setFocused(false)
31
35
  }),
32
36
  /*#__PURE__*/ jsxs("div", {
33
37
  className: "flex items-center justify-between",
@@ -37,30 +41,58 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
37
41
  children: [
38
42
  /*#__PURE__*/ jsx("button", {
39
43
  type: "button",
40
- className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
44
+ className: "group flex h-8 w-8 items-center justify-center rounded-lg hover:bg-surface-hover",
41
45
  "aria-label": "Add attachment",
42
46
  children: /*#__PURE__*/ jsx(Plus, {
43
- className: "h-5 w-5 text-foreground-inverse"
47
+ className: "h-5 w-5 text-foreground-muted group-hover:text-foreground-hover"
44
48
  })
45
49
  }),
46
50
  /*#__PURE__*/ jsx("button", {
47
51
  type: "button",
48
- className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
52
+ className: "group flex h-8 w-8 items-center justify-center rounded-lg hover:bg-surface-hover",
49
53
  "aria-label": "Add workflow",
50
54
  children: /*#__PURE__*/ jsx(Workflow, {
51
- className: "h-5 w-5 text-foreground-inverse"
55
+ className: "h-5 w-5 text-foreground-muted group-hover:text-foreground-hover"
56
+ })
57
+ }),
58
+ /*#__PURE__*/ jsx("button", {
59
+ type: "button",
60
+ className: "group flex h-8 w-8 items-center justify-center rounded-lg hover:bg-surface-hover",
61
+ "aria-label": "Settings",
62
+ children: /*#__PURE__*/ jsx(Settings2, {
63
+ className: "h-5 w-5 text-foreground-muted group-hover:text-foreground-hover"
52
64
  })
53
65
  })
54
66
  ]
55
67
  }),
56
- /*#__PURE__*/ jsx("button", {
57
- type: "button",
58
- className: "flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90",
59
- onClick: handleSubmit,
60
- "aria-label": "Submit message",
61
- children: /*#__PURE__*/ jsx(CornerDownLeft, {
62
- className: "h-5 w-5 -scale-y-100 rotate-90 text-foreground-on-accent"
63
- })
68
+ /*#__PURE__*/ jsxs("div", {
69
+ className: "flex items-center gap-2",
70
+ children: [
71
+ /*#__PURE__*/ jsx("button", {
72
+ type: "button",
73
+ className: "group flex h-8 w-8 items-center justify-center rounded-lg hover:bg-surface-hover",
74
+ "aria-label": "Record",
75
+ children: /*#__PURE__*/ jsx(Circle, {
76
+ className: "h-5 w-5 text-foreground-muted group-hover:text-foreground-hover"
77
+ })
78
+ }),
79
+ showEnter ? /*#__PURE__*/ jsx("button", {
80
+ type: "button",
81
+ className: "flex h-8 w-8 items-center justify-center rounded-lg bg-foreground-accent hover:bg-foreground-accent-muted",
82
+ onClick: handleSubmit,
83
+ "aria-label": "Submit message",
84
+ children: /*#__PURE__*/ jsx(CornerRightUp, {
85
+ className: "h-5 w-5 text-white"
86
+ })
87
+ }) : /*#__PURE__*/ jsx("button", {
88
+ type: "button",
89
+ className: cn('flex h-8 w-8 items-center justify-center rounded-lg', focused ? 'bg-foreground-accent hover:bg-foreground-accent-muted' : 'bg-surface-hover hover:bg-foreground-accent-muted'),
90
+ "aria-label": "Voice input",
91
+ children: /*#__PURE__*/ jsx(Mic, {
92
+ className: "h-5 w-5 text-white"
93
+ })
94
+ })
95
+ ]
64
96
  })
65
97
  ]
66
98
  })
package/dist/components/custom/chat-prompt-suggestions.cjs CHANGED
@@ -34,7 +34,7 @@ function PromptSuggestions({ className, suggestions = [], onSelect }) {
34
34
  className: (0, index_cjs_namespaceObject.cn)('flex flex-col items-start gap-2', className),
35
35
  children: suggestions.map((suggestion)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
36
36
  type: "button",
37
- className: "flex h-10 items-center rounded-xl border border-border bg-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-foreground transition-colors hover:bg-surface-hover",
37
+ className: "flex h-10 items-center rounded-xl border border-border-subtle bg-surface-raised hover:border-border-hover px-4 py-2.5 text-sm font-normal leading-5 text-foreground-secondary transition-colors hover:bg-surface-hover hover:text-foreground",
38
38
  onClick: ()=>onSelect?.(suggestion),
39
39
  children: suggestion.label
40
40
  }, suggestion.id))
package/dist/components/custom/chat-prompt-suggestions.js CHANGED
@@ -6,7 +6,7 @@ function PromptSuggestions({ className, suggestions = [], onSelect }) {
6
6
  className: cn('flex flex-col items-start gap-2', className),
7
7
  children: suggestions.map((suggestion)=>/*#__PURE__*/ jsx("button", {
8
8
  type: "button",
9
- className: "flex h-10 items-center rounded-xl border border-border bg-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-foreground transition-colors hover:bg-surface-hover",
9
+ className: "flex h-10 items-center rounded-xl border border-border-subtle bg-surface-raised hover:border-border-hover px-4 py-2.5 text-sm font-normal leading-5 text-foreground-secondary transition-colors hover:bg-surface-hover hover:text-foreground",
10
10
  onClick: ()=>onSelect?.(suggestion),
11
11
  children: suggestion.label
12
12
  }, suggestion.id))
package/dist/components/custom/panel-delegate.cjs CHANGED
@@ -36,18 +36,39 @@ const tooltip_cjs_namespaceObject = require("../ui/tooltip.cjs");
36
36
  const index_cjs_namespaceObject = require("../../lib/index.cjs");
37
37
  function UiPathLogo({ className }) {
38
38
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
39
- className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-9 items-center justify-center rounded-lg bg-brand shadow-sm', className),
40
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
41
- className: "text-xs font-bold text-foreground-on-accent select-none",
42
- children: "Ui"
39
+ className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-9 items-center justify-center overflow-clip rounded-lg bg-[#0092b8] shadow-sm', className),
40
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
41
+ viewBox: "0 0 24 24",
42
+ fill: "none",
43
+ xmlns: "http://www.w3.org/2000/svg",
44
+ className: "h-[22px] w-[22px]",
45
+ "aria-hidden": "true",
46
+ children: [
47
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
48
+ 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",
49
+ fill: "white"
50
+ }),
51
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
52
+ 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",
53
+ fill: "white"
54
+ }),
55
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
56
+ 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",
57
+ fill: "white"
58
+ }),
59
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
60
+ 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",
61
+ fill: "white"
62
+ })
63
+ ]
43
64
  })
44
65
  });
45
66
  }
46
- function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelect }) {
67
+ function ExpandedNavItem({ item, isOpen, isActive, onToggle, selectedChildId, onChildSelect }) {
47
68
  const isExpandable = Array.isArray(item.children);
48
69
  if (!isExpandable) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
49
70
  type: "button",
50
- className: "flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover",
71
+ className: (0, index_cjs_namespaceObject.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'),
51
72
  onClick: onToggle,
52
73
  children: [
53
74
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -55,7 +76,7 @@ function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelec
55
76
  children: item.icon
56
77
  }),
57
78
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
58
- className: "text-sm font-semibold",
79
+ className: "text-sm font-medium",
59
80
  children: item.label
60
81
  })
61
82
  ]
@@ -68,7 +89,7 @@ function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelec
68
89
  asChild: true,
69
90
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
70
91
  type: "button",
71
- className: "flex h-10 w-full items-center justify-between rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover",
92
+ className: (0, index_cjs_namespaceObject.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'),
72
93
  children: [
73
94
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
74
95
  className: "flex items-center gap-2",
@@ -78,7 +99,7 @@ function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelec
78
99
  children: item.icon
79
100
  }),
80
101
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
81
- className: "text-sm font-semibold",
102
+ className: "text-sm font-medium",
82
103
  children: item.label
83
104
  })
84
105
  ]
@@ -94,10 +115,10 @@ function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelec
94
115
  }),
95
116
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(collapsible_cjs_namespaceObject.CollapsibleContent, {
96
117
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
97
- className: "flex flex-col",
118
+ className: "flex flex-col gap-1 pt-1",
98
119
  children: item.children?.map((child)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
99
120
  type: "button",
100
- className: (0, index_cjs_namespaceObject.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'),
121
+ className: (0, index_cjs_namespaceObject.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'),
101
122
  onClick: ()=>onChildSelect?.(child.id),
102
123
  children: child.label
103
124
  }, child.id))
@@ -113,11 +134,14 @@ function CollapsedNavItem({ item, isActive, onClick }) {
113
134
  asChild: true,
114
135
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
115
136
  type: "button",
116
- className: (0, index_cjs_namespaceObject.cn)('flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground', isActive && 'text-brand-foreground'),
137
+ className: "group flex h-12 w-full items-center justify-center",
117
138
  onClick: onClick,
118
139
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
119
- className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-9 items-center justify-center rounded-lg transition-colors', isActive && 'bg-brand-subtle'),
120
- children: item.icon
140
+ 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', isActive && 'bg-surface-hover text-foreground-hover'),
141
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
142
+ className: "h-5 w-5 group-hover:scale-[1.2]",
143
+ children: item.icon
144
+ })
121
145
  })
122
146
  })
123
147
  }),
@@ -161,7 +185,7 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
161
185
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipProvider, {
162
186
  delayDuration: 300,
163
187
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
164
- className: (0, index_cjs_namespaceObject.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),
188
+ className: (0, index_cjs_namespaceObject.cn)('flex h-full flex-col justify-between bg-surface-overlay transition-[width] duration-300 ease-in-out', panelOpen ? 'w-80' : 'w-[60px]', className),
165
189
  children: [
166
190
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
167
191
  className: "flex flex-1 flex-col overflow-hidden",
@@ -177,11 +201,11 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
177
201
  className: "flex flex-1 items-center justify-between",
178
202
  children: [
179
203
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
180
- className: "flex items-center gap-[18px]",
204
+ className: "flex items-center gap-1",
181
205
  children: [
182
206
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
183
207
  type: "button",
184
- className: "text-foreground-muted transition-colors hover:text-foreground",
208
+ className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground",
185
209
  "aria-label": "New conversation",
186
210
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.MessageCirclePlus, {
187
211
  className: "h-5 w-5"
@@ -189,7 +213,7 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
189
213
  }),
190
214
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
191
215
  type: "button",
192
- className: "text-foreground-muted transition-colors hover:text-foreground",
216
+ className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground",
193
217
  "aria-label": "Picture in picture",
194
218
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PictureInPicture2, {
195
219
  className: "h-5 w-5"
@@ -199,7 +223,7 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
199
223
  }),
200
224
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
201
225
  type: "button",
202
- className: "text-foreground-muted transition-colors hover:text-foreground",
226
+ className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground",
203
227
  onClick: ()=>setPanelOpen(false),
204
228
  "aria-label": "Collapse panel",
205
229
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PanelRightOpen, {
@@ -217,6 +241,7 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
217
241
  children: navItems.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExpandedNavItem, {
218
242
  item: item,
219
243
  isOpen: openSections[item.id] ?? false,
244
+ isActive: activeNavId === item.id && !item.children?.some((c)=>c.id === selectedChildId),
220
245
  onToggle: ()=>{
221
246
  if (item.children?.length) toggleSection(item.id);
222
247
  setActiveNavId(item.id);
@@ -224,40 +249,16 @@ function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, on
224
249
  selectedChildId: selectedChildId,
225
250
  onChildSelect: onChildSelect
226
251
  }, item.id))
227
- }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("nav", {
228
- className: "flex flex-col items-center pt-[18px]",
229
- children: [
230
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tooltip_cjs_namespaceObject.Tooltip, {
231
- children: [
232
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipTrigger, {
233
- asChild: true,
234
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
235
- type: "button",
236
- className: "flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground",
237
- onClick: ()=>setPanelOpen(true),
238
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
239
- className: "flex h-9 w-9 items-center justify-center rounded-lg",
240
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PanelRightOpen, {
241
- className: "h-5 w-5 -scale-x-100"
242
- })
243
- })
244
- })
245
- }),
246
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipContent, {
247
- side: "right",
248
- children: "Expand panel"
249
- })
250
- ]
251
- }),
252
- navItems.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CollapsedNavItem, {
253
- item: item,
254
- isActive: activeNavId === item.id,
255
- onClick: ()=>{
256
- setActiveNavId(item.id);
257
- setPanelOpen(true);
258
- }
259
- }, item.id))
260
- ]
252
+ }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("nav", {
253
+ className: "flex flex-col items-center gap-1 pt-[18px]",
254
+ children: navItems.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CollapsedNavItem, {
255
+ item: item,
256
+ isActive: activeNavId === item.id,
257
+ onClick: ()=>{
258
+ setActiveNavId(item.id);
259
+ setPanelOpen(true);
260
+ }
261
+ }, item.id))
261
262
  })
262
263
  })
263
264
  ]