@page-speed/agent-everywhere 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -0
- package/dist/index.cjs +436 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +136 -1
- package/dist/index.d.ts +136 -1
- package/dist/index.js +433 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import { createContext, forwardRef, useRef, useImperativeHandle, useCallback, us
|
|
|
6
6
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
7
7
|
import { AnimatePresence, motion } from 'motion/react';
|
|
8
8
|
import { Markdown } from '@page-speed/markdown-to-jsx';
|
|
9
|
-
import { SendIcon, PaperclipIcon, FileTextIcon, MicIcon, ImageIcon, XIcon, SearchIcon, UploadIcon, FileIcon, UserCircleIcon, CheckIcon, SparklesIcon, BookmarkIcon, InfoIcon, CheckCircle2Icon, AlertTriangleIcon, LightbulbIcon, BrainIcon, ChevronDownIcon, ZapIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon, BotIcon, UserIcon, DownloadIcon, MinusIcon, TrendingDownIcon, TrendingUpIcon, ChevronUpIcon, ArrowUpDownIcon, LinkIcon, PlayIcon, ExternalLinkIcon, WandIcon, LayoutGridIcon, Grid3X3Icon, ArrowUpRightIcon, ShuffleIcon, SkipForwardIcon, ChevronLeftIcon, ChevronRightIcon, XCircleIcon, HelpCircleIcon, Minimize2Icon, Maximize2Icon, RotateCcwIcon, MessageSquareIcon, GripVerticalIcon, PanelLeftOpenIcon, PanelLeftCloseIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon, ClipboardListIcon, ArrowLeftIcon, MoreVerticalIcon, Loader2Icon, ArrowRightIcon, AlignLeftIcon, ListIcon, HashIcon, TypeIcon, ClockIcon, CoinsIcon, ActivityIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
|
|
9
|
+
import { SendIcon, PaperclipIcon, FileTextIcon, MicIcon, ImageIcon, XIcon, SearchIcon, UploadIcon, FileIcon, UserCircleIcon, CheckIcon, SparklesIcon, BookmarkIcon, InfoIcon, CheckCircle2Icon, AlertTriangleIcon, LightbulbIcon, BrainIcon, ChevronDownIcon, ZapIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon, BotIcon, UserIcon, DownloadIcon, MinusIcon, TrendingDownIcon, TrendingUpIcon, ChevronUpIcon, ArrowUpDownIcon, LinkIcon, PlayIcon, ExternalLinkIcon, WandIcon, LayoutGridIcon, Grid3X3Icon, ArrowUpRightIcon, ShuffleIcon, SkipForwardIcon, ChevronLeftIcon, ChevronRightIcon, XCircleIcon, HelpCircleIcon, Minimize2Icon, Maximize2Icon, RotateCcwIcon, MessageSquareIcon, GripVerticalIcon, PanelLeftOpenIcon, PanelLeftCloseIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon, ClipboardListIcon, ArrowLeftIcon, MoreVerticalIcon, Loader2, ArrowUp, PanelLeft, PanelRight, Sparkles, RotateCcw, ChevronDown, MessageSquare, Paperclip, Loader2Icon, ArrowRightIcon, AlignLeftIcon, ListIcon, HashIcon, TypeIcon, ClockIcon, CoinsIcon, ActivityIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
|
|
10
10
|
import { Slot } from '@radix-ui/react-slot';
|
|
11
11
|
import { cva } from 'class-variance-authority';
|
|
12
12
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
@@ -8526,7 +8526,438 @@ function AgentConversation({
|
|
|
8526
8526
|
)
|
|
8527
8527
|
] });
|
|
8528
8528
|
}
|
|
8529
|
+
var AgentWorkspaceContext = createContext(null);
|
|
8530
|
+
function useAgentWorkspace() {
|
|
8531
|
+
const ctx = useContext(AgentWorkspaceContext);
|
|
8532
|
+
if (!ctx) {
|
|
8533
|
+
throw new Error(
|
|
8534
|
+
"useAgentWorkspace must be used within an <AgentWorkspace>."
|
|
8535
|
+
);
|
|
8536
|
+
}
|
|
8537
|
+
return ctx;
|
|
8538
|
+
}
|
|
8539
|
+
function useAgentWorkspaceOptional() {
|
|
8540
|
+
return useContext(AgentWorkspaceContext);
|
|
8541
|
+
}
|
|
8542
|
+
var noop2 = () => {
|
|
8543
|
+
};
|
|
8544
|
+
function warnDev2(message) {
|
|
8545
|
+
const env = globalThis.process?.env;
|
|
8546
|
+
if (env && env.NODE_ENV !== "production") {
|
|
8547
|
+
console.warn(`[AgentWorkspaceComposer] ${message}`);
|
|
8548
|
+
}
|
|
8549
|
+
}
|
|
8550
|
+
var LINE_HEIGHT_PX2 = 20;
|
|
8551
|
+
var VERTICAL_PADDING_PX2 = 16;
|
|
8552
|
+
function AgentWorkspaceComposer({
|
|
8553
|
+
value: valueProp,
|
|
8554
|
+
onChange,
|
|
8555
|
+
onSubmit,
|
|
8556
|
+
loading: loadingProp,
|
|
8557
|
+
disabled = false,
|
|
8558
|
+
placeholder = "Ask anything\u2026",
|
|
8559
|
+
onAttach,
|
|
8560
|
+
leftActions,
|
|
8561
|
+
minRows = 1,
|
|
8562
|
+
maxRows = 6,
|
|
8563
|
+
autoFocus = false,
|
|
8564
|
+
className,
|
|
8565
|
+
inputClassName
|
|
8566
|
+
}) {
|
|
8567
|
+
const agent = useNativeAgentOptional();
|
|
8568
|
+
const workspace = useAgentWorkspaceOptional();
|
|
8569
|
+
const [draft, setDraft] = useState("");
|
|
8570
|
+
const textareaRef = useRef(null);
|
|
8571
|
+
const propsControlEditing = valueProp !== void 0 || onChange !== void 0;
|
|
8572
|
+
const value = propsControlEditing ? valueProp ?? "" : agent ? agent.input : draft;
|
|
8573
|
+
const handleChange = propsControlEditing ? onChange ?? noop2 : agent ? agent.setInput : setDraft;
|
|
8574
|
+
const loading = loadingProp ?? agent?.isResponding ?? false;
|
|
8575
|
+
const resize = useCallback(() => {
|
|
8576
|
+
const el = textareaRef.current;
|
|
8577
|
+
if (!el) return;
|
|
8578
|
+
el.style.height = "auto";
|
|
8579
|
+
const maxHeight = maxRows * LINE_HEIGHT_PX2 + VERTICAL_PADDING_PX2;
|
|
8580
|
+
const minHeight = minRows * LINE_HEIGHT_PX2 + VERTICAL_PADDING_PX2;
|
|
8581
|
+
const next = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
|
|
8582
|
+
el.style.height = `${next}px`;
|
|
8583
|
+
el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
|
|
8584
|
+
}, [maxRows, minRows]);
|
|
8585
|
+
useLayoutEffect(() => {
|
|
8586
|
+
resize();
|
|
8587
|
+
}, [value, resize]);
|
|
8588
|
+
const handleSubmit = useCallback(
|
|
8589
|
+
(e) => {
|
|
8590
|
+
e?.preventDefault();
|
|
8591
|
+
if (!value.trim() || disabled || loading) return;
|
|
8592
|
+
workspace?.openConversation();
|
|
8593
|
+
if (onSubmit) {
|
|
8594
|
+
onSubmit(value);
|
|
8595
|
+
return;
|
|
8596
|
+
}
|
|
8597
|
+
if (!propsControlEditing && agent) {
|
|
8598
|
+
agent.submit();
|
|
8599
|
+
return;
|
|
8600
|
+
}
|
|
8601
|
+
warnDev2(
|
|
8602
|
+
"submit was ignored: provide `onSubmit`, or render inside a <NativeAgentProvider>."
|
|
8603
|
+
);
|
|
8604
|
+
},
|
|
8605
|
+
[value, disabled, loading, workspace, onSubmit, propsControlEditing, agent]
|
|
8606
|
+
);
|
|
8607
|
+
const handleKeyDown = useCallback(
|
|
8608
|
+
(e) => {
|
|
8609
|
+
if (e.key === "Enter" && !e.shiftKey) {
|
|
8610
|
+
e.preventDefault();
|
|
8611
|
+
handleSubmit();
|
|
8612
|
+
}
|
|
8613
|
+
},
|
|
8614
|
+
[handleSubmit]
|
|
8615
|
+
);
|
|
8616
|
+
const attach = leftActions ?? (onAttach ? /* @__PURE__ */ jsx(
|
|
8617
|
+
"button",
|
|
8618
|
+
{
|
|
8619
|
+
type: "button",
|
|
8620
|
+
onClick: onAttach,
|
|
8621
|
+
"aria-label": "Attach",
|
|
8622
|
+
className: "flex size-9 shrink-0 items-center justify-center rounded-xl text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
|
|
8623
|
+
children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4" })
|
|
8624
|
+
}
|
|
8625
|
+
) : null);
|
|
8626
|
+
return /* @__PURE__ */ jsxs(
|
|
8627
|
+
"form",
|
|
8628
|
+
{
|
|
8629
|
+
onSubmit: handleSubmit,
|
|
8630
|
+
className: cn(
|
|
8631
|
+
"flex items-end gap-2 rounded-2xl border border-border bg-background p-2 shadow-sm transition-colors focus-within:border-foreground/30",
|
|
8632
|
+
className
|
|
8633
|
+
),
|
|
8634
|
+
children: [
|
|
8635
|
+
attach,
|
|
8636
|
+
/* @__PURE__ */ jsx(
|
|
8637
|
+
"textarea",
|
|
8638
|
+
{
|
|
8639
|
+
ref: textareaRef,
|
|
8640
|
+
value,
|
|
8641
|
+
onChange: (e) => handleChange(e.target.value),
|
|
8642
|
+
onKeyDown: handleKeyDown,
|
|
8643
|
+
placeholder,
|
|
8644
|
+
disabled,
|
|
8645
|
+
autoFocus,
|
|
8646
|
+
rows: minRows,
|
|
8647
|
+
className: cn(
|
|
8648
|
+
"flex-1 resize-none border-0 bg-transparent px-1 py-2 text-sm leading-5 shadow-none outline-none",
|
|
8649
|
+
"placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
|
|
8650
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
8651
|
+
inputClassName
|
|
8652
|
+
)
|
|
8653
|
+
}
|
|
8654
|
+
),
|
|
8655
|
+
/* @__PURE__ */ jsx(
|
|
8656
|
+
"button",
|
|
8657
|
+
{
|
|
8658
|
+
type: "submit",
|
|
8659
|
+
"aria-label": "Send",
|
|
8660
|
+
disabled: !value.trim() || disabled || loading,
|
|
8661
|
+
className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-opacity disabled:opacity-30",
|
|
8662
|
+
children: loading ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" })
|
|
8663
|
+
}
|
|
8664
|
+
)
|
|
8665
|
+
]
|
|
8666
|
+
}
|
|
8667
|
+
);
|
|
8668
|
+
}
|
|
8669
|
+
function AgentWorkspacePanelToggle({
|
|
8670
|
+
side,
|
|
8671
|
+
open: openProp,
|
|
8672
|
+
onToggle,
|
|
8673
|
+
className
|
|
8674
|
+
}) {
|
|
8675
|
+
const workspace = useAgentWorkspaceOptional();
|
|
8676
|
+
const propsControlled = openProp !== void 0 || onToggle !== void 0;
|
|
8677
|
+
if (!propsControlled && workspace) {
|
|
8678
|
+
const hasPanel = side === "left" ? workspace.hasLeftPanel : workspace.hasRightPanel;
|
|
8679
|
+
if (!hasPanel) return null;
|
|
8680
|
+
}
|
|
8681
|
+
const open = propsControlled ? openProp ?? false : side === "left" ? workspace?.leftPanelOpen ?? false : workspace?.rightPanelOpen ?? false;
|
|
8682
|
+
const handleToggle = propsControlled ? onToggle : side === "left" ? workspace?.toggleLeftPanel : workspace?.toggleRightPanel;
|
|
8683
|
+
const Icon = side === "left" ? PanelLeft : PanelRight;
|
|
8684
|
+
return /* @__PURE__ */ jsx(
|
|
8685
|
+
"button",
|
|
8686
|
+
{
|
|
8687
|
+
type: "button",
|
|
8688
|
+
onClick: handleToggle,
|
|
8689
|
+
"aria-label": side === "left" ? "Toggle left panel" : "Toggle right panel",
|
|
8690
|
+
"aria-pressed": open,
|
|
8691
|
+
className: cn(
|
|
8692
|
+
"flex size-8 items-center justify-center rounded-lg transition-colors",
|
|
8693
|
+
open ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary",
|
|
8694
|
+
className
|
|
8695
|
+
),
|
|
8696
|
+
children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
|
|
8697
|
+
}
|
|
8698
|
+
);
|
|
8699
|
+
}
|
|
8700
|
+
var inertProps = (inert) => inert ? { inert: "" } : {};
|
|
8701
|
+
function useOpenState(controlled, defaultOpen, onChange) {
|
|
8702
|
+
const [internal, setInternal] = useState(defaultOpen);
|
|
8703
|
+
const isControlled = controlled !== void 0;
|
|
8704
|
+
const open = isControlled ? controlled : internal;
|
|
8705
|
+
const onChangeRef = useRef(onChange);
|
|
8706
|
+
useEffect(() => {
|
|
8707
|
+
onChangeRef.current = onChange;
|
|
8708
|
+
}, [onChange]);
|
|
8709
|
+
const setOpen = useCallback(
|
|
8710
|
+
(next) => {
|
|
8711
|
+
if (!isControlled) setInternal(next);
|
|
8712
|
+
onChangeRef.current?.(next);
|
|
8713
|
+
},
|
|
8714
|
+
[isControlled]
|
|
8715
|
+
);
|
|
8716
|
+
return [open, setOpen];
|
|
8717
|
+
}
|
|
8718
|
+
function AgentWorkspace({
|
|
8719
|
+
children,
|
|
8720
|
+
leftPanel,
|
|
8721
|
+
rightPanel,
|
|
8722
|
+
leftPanelWidth = 320,
|
|
8723
|
+
rightPanelWidth = 460,
|
|
8724
|
+
defaultLeftPanelOpen = true,
|
|
8725
|
+
defaultRightPanelOpen = true,
|
|
8726
|
+
leftPanelOpen: leftPanelOpenProp,
|
|
8727
|
+
rightPanelOpen: rightPanelOpenProp,
|
|
8728
|
+
onLeftPanelOpenChange,
|
|
8729
|
+
onRightPanelOpenChange,
|
|
8730
|
+
showPanelToggles = true,
|
|
8731
|
+
conversation,
|
|
8732
|
+
conversationOpen: conversationOpenProp,
|
|
8733
|
+
onConversationOpenChange,
|
|
8734
|
+
conversationTitle = "AI Assistant",
|
|
8735
|
+
showConversationHeader = true,
|
|
8736
|
+
composer = true,
|
|
8737
|
+
composerPlaceholder,
|
|
8738
|
+
composerHint,
|
|
8739
|
+
onComposerSubmit,
|
|
8740
|
+
className,
|
|
8741
|
+
contentClassName,
|
|
8742
|
+
conversationClassName,
|
|
8743
|
+
leftPanelClassName,
|
|
8744
|
+
rightPanelClassName,
|
|
8745
|
+
composerClassName
|
|
8746
|
+
}) {
|
|
8747
|
+
const agent = useNativeAgentOptional();
|
|
8748
|
+
const hasLeftPanel = leftPanel !== void 0 && leftPanel !== null;
|
|
8749
|
+
const hasRightPanel = rightPanel !== void 0 && rightPanel !== null;
|
|
8750
|
+
const [leftOpen, setLeftOpen] = useOpenState(
|
|
8751
|
+
leftPanelOpenProp,
|
|
8752
|
+
defaultLeftPanelOpen,
|
|
8753
|
+
onLeftPanelOpenChange
|
|
8754
|
+
);
|
|
8755
|
+
const [rightOpen, setRightOpen] = useOpenState(
|
|
8756
|
+
rightPanelOpenProp,
|
|
8757
|
+
defaultRightPanelOpen,
|
|
8758
|
+
onRightPanelOpenChange
|
|
8759
|
+
);
|
|
8760
|
+
const [conversationOpen, setConversationOpen] = useOpenState(
|
|
8761
|
+
conversationOpenProp,
|
|
8762
|
+
false,
|
|
8763
|
+
onConversationOpenChange
|
|
8764
|
+
);
|
|
8765
|
+
const isActive = agent?.isActive ?? false;
|
|
8766
|
+
const wasActiveRef = useRef(false);
|
|
8767
|
+
useEffect(() => {
|
|
8768
|
+
if (isActive !== wasActiveRef.current) {
|
|
8769
|
+
wasActiveRef.current = isActive;
|
|
8770
|
+
setConversationOpen(isActive);
|
|
8771
|
+
}
|
|
8772
|
+
}, [isActive, setConversationOpen]);
|
|
8773
|
+
const value = useMemo(
|
|
8774
|
+
() => ({
|
|
8775
|
+
hasLeftPanel,
|
|
8776
|
+
hasRightPanel,
|
|
8777
|
+
leftPanelOpen: leftOpen,
|
|
8778
|
+
rightPanelOpen: rightOpen,
|
|
8779
|
+
setLeftPanelOpen: setLeftOpen,
|
|
8780
|
+
setRightPanelOpen: setRightOpen,
|
|
8781
|
+
toggleLeftPanel: () => setLeftOpen(!leftOpen),
|
|
8782
|
+
toggleRightPanel: () => setRightOpen(!rightOpen),
|
|
8783
|
+
conversationOpen,
|
|
8784
|
+
setConversationOpen,
|
|
8785
|
+
openConversation: () => setConversationOpen(true),
|
|
8786
|
+
closeConversation: () => setConversationOpen(false)
|
|
8787
|
+
}),
|
|
8788
|
+
[
|
|
8789
|
+
hasLeftPanel,
|
|
8790
|
+
hasRightPanel,
|
|
8791
|
+
leftOpen,
|
|
8792
|
+
rightOpen,
|
|
8793
|
+
setLeftOpen,
|
|
8794
|
+
setRightOpen,
|
|
8795
|
+
conversationOpen,
|
|
8796
|
+
setConversationOpen
|
|
8797
|
+
]
|
|
8798
|
+
);
|
|
8799
|
+
const showDock = composer !== false;
|
|
8800
|
+
const dockNode = composer === true || composer === void 0 ? /* @__PURE__ */ jsx(
|
|
8801
|
+
AgentWorkspaceComposer,
|
|
8802
|
+
{
|
|
8803
|
+
placeholder: composerPlaceholder,
|
|
8804
|
+
onSubmit: onComposerSubmit
|
|
8805
|
+
}
|
|
8806
|
+
) : composer;
|
|
8807
|
+
const statusLine = agent ? agent.error ?? agent.statusLabel : null;
|
|
8808
|
+
return /* @__PURE__ */ jsx(AgentWorkspaceContext.Provider, { value, children: /* @__PURE__ */ jsxs(
|
|
8809
|
+
"div",
|
|
8810
|
+
{
|
|
8811
|
+
"data-conversation-open": conversationOpen || void 0,
|
|
8812
|
+
className: cn(
|
|
8813
|
+
"flex h-full w-full overflow-hidden bg-background text-foreground",
|
|
8814
|
+
className
|
|
8815
|
+
),
|
|
8816
|
+
children: [
|
|
8817
|
+
hasLeftPanel && /* @__PURE__ */ jsx(
|
|
8818
|
+
"aside",
|
|
8819
|
+
{
|
|
8820
|
+
"data-state": leftOpen ? "open" : "collapsed",
|
|
8821
|
+
"aria-hidden": !leftOpen || void 0,
|
|
8822
|
+
className: cn(
|
|
8823
|
+
"relative hidden h-full shrink-0 overflow-hidden border-r border-border transition-[width] duration-300 ease-in-out lg:block",
|
|
8824
|
+
!leftOpen && "border-r-0",
|
|
8825
|
+
leftPanelClassName
|
|
8826
|
+
),
|
|
8827
|
+
style: { width: leftOpen ? leftPanelWidth : 0 },
|
|
8828
|
+
children: /* @__PURE__ */ jsx("div", { className: "h-full", style: { width: leftPanelWidth }, children: leftPanel })
|
|
8829
|
+
}
|
|
8830
|
+
),
|
|
8831
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex h-full min-w-0 grow flex-col", children: [
|
|
8832
|
+
showPanelToggles && hasLeftPanel && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-3 z-30 hidden lg:block", children: /* @__PURE__ */ jsx(
|
|
8833
|
+
AgentWorkspacePanelToggle,
|
|
8834
|
+
{
|
|
8835
|
+
side: "left",
|
|
8836
|
+
className: "border border-border/60 bg-background/80 shadow-sm backdrop-blur"
|
|
8837
|
+
}
|
|
8838
|
+
) }),
|
|
8839
|
+
showPanelToggles && hasRightPanel && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-3 z-30 hidden lg:block", children: /* @__PURE__ */ jsx(
|
|
8840
|
+
AgentWorkspacePanelToggle,
|
|
8841
|
+
{
|
|
8842
|
+
side: "right",
|
|
8843
|
+
className: "border border-border/60 bg-background/80 shadow-sm backdrop-blur"
|
|
8844
|
+
}
|
|
8845
|
+
) }),
|
|
8846
|
+
/* @__PURE__ */ jsxs("div", { className: "relative min-h-0 grow", children: [
|
|
8847
|
+
/* @__PURE__ */ jsx(
|
|
8848
|
+
"div",
|
|
8849
|
+
{
|
|
8850
|
+
"aria-hidden": conversationOpen || void 0,
|
|
8851
|
+
...inertProps(conversationOpen),
|
|
8852
|
+
className: cn("h-full overflow-y-auto", contentClassName),
|
|
8853
|
+
children
|
|
8854
|
+
}
|
|
8855
|
+
),
|
|
8856
|
+
/* @__PURE__ */ jsxs(
|
|
8857
|
+
"div",
|
|
8858
|
+
{
|
|
8859
|
+
"data-state": conversationOpen ? "open" : "closed",
|
|
8860
|
+
"aria-hidden": !conversationOpen || void 0,
|
|
8861
|
+
...inertProps(!conversationOpen),
|
|
8862
|
+
className: cn(
|
|
8863
|
+
"absolute inset-0 z-20 flex flex-col bg-background transition-[opacity,transform] duration-300 ease-out",
|
|
8864
|
+
conversationOpen ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-8 opacity-0",
|
|
8865
|
+
conversationClassName
|
|
8866
|
+
),
|
|
8867
|
+
children: [
|
|
8868
|
+
showConversationHeader && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border bg-background px-4 py-2.5", children: [
|
|
8869
|
+
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
|
|
8870
|
+
/* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Sparkles, { className: "size-3.5" }) }),
|
|
8871
|
+
/* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
8872
|
+
/* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: conversationTitle }),
|
|
8873
|
+
statusLine && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: statusLine })
|
|
8874
|
+
] })
|
|
8875
|
+
] }),
|
|
8876
|
+
/* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
|
|
8877
|
+
(hasLeftPanel || hasRightPanel) && /* @__PURE__ */ jsxs("div", { className: "mr-1 hidden items-center gap-1 border-r border-border pr-2 lg:flex", children: [
|
|
8878
|
+
/* @__PURE__ */ jsx(AgentWorkspacePanelToggle, { side: "left" }),
|
|
8879
|
+
/* @__PURE__ */ jsx(AgentWorkspacePanelToggle, { side: "right" })
|
|
8880
|
+
] }),
|
|
8881
|
+
agent && /* @__PURE__ */ jsx(
|
|
8882
|
+
"button",
|
|
8883
|
+
{
|
|
8884
|
+
type: "button",
|
|
8885
|
+
onClick: () => agent.reset(),
|
|
8886
|
+
"aria-label": "Start a new conversation",
|
|
8887
|
+
title: "New conversation",
|
|
8888
|
+
className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
|
|
8889
|
+
children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
|
|
8890
|
+
}
|
|
8891
|
+
),
|
|
8892
|
+
/* @__PURE__ */ jsx(
|
|
8893
|
+
"button",
|
|
8894
|
+
{
|
|
8895
|
+
type: "button",
|
|
8896
|
+
onClick: () => setConversationOpen(false),
|
|
8897
|
+
"aria-label": "Hide conversation",
|
|
8898
|
+
title: "Hide conversation",
|
|
8899
|
+
className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
|
|
8900
|
+
children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
|
|
8901
|
+
}
|
|
8902
|
+
)
|
|
8903
|
+
] })
|
|
8904
|
+
] }),
|
|
8905
|
+
/* @__PURE__ */ jsx("div", { className: "min-h-0 grow", children: conversation ?? /* @__PURE__ */ jsx(
|
|
8906
|
+
AgentConversation,
|
|
8907
|
+
{
|
|
8908
|
+
contentClassName: "mx-auto w-full max-w-3xl",
|
|
8909
|
+
showAvatars: true
|
|
8910
|
+
}
|
|
8911
|
+
) })
|
|
8912
|
+
]
|
|
8913
|
+
}
|
|
8914
|
+
)
|
|
8915
|
+
] }),
|
|
8916
|
+
showDock && /* @__PURE__ */ jsx(
|
|
8917
|
+
"div",
|
|
8918
|
+
{
|
|
8919
|
+
className: cn(
|
|
8920
|
+
"relative z-30 shrink-0 border-t border-border bg-background/80 px-4 py-3 backdrop-blur",
|
|
8921
|
+
composerClassName
|
|
8922
|
+
),
|
|
8923
|
+
children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl", children: [
|
|
8924
|
+
isActive && !conversationOpen && /* @__PURE__ */ jsx("div", { className: "mb-2 flex justify-center", children: /* @__PURE__ */ jsxs(
|
|
8925
|
+
"button",
|
|
8926
|
+
{
|
|
8927
|
+
type: "button",
|
|
8928
|
+
onClick: () => setConversationOpen(true),
|
|
8929
|
+
className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:border-foreground/20 hover:text-foreground",
|
|
8930
|
+
children: [
|
|
8931
|
+
agent?.isResponding ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx(MessageSquare, { className: "size-3" }),
|
|
8932
|
+
"View conversation"
|
|
8933
|
+
]
|
|
8934
|
+
}
|
|
8935
|
+
) }),
|
|
8936
|
+
dockNode,
|
|
8937
|
+
composerHint && /* @__PURE__ */ jsx("div", { className: "mt-2 text-center text-[11px] text-muted-foreground", children: composerHint })
|
|
8938
|
+
] })
|
|
8939
|
+
}
|
|
8940
|
+
)
|
|
8941
|
+
] }),
|
|
8942
|
+
hasRightPanel && /* @__PURE__ */ jsx(
|
|
8943
|
+
"aside",
|
|
8944
|
+
{
|
|
8945
|
+
"data-state": rightOpen ? "open" : "collapsed",
|
|
8946
|
+
"aria-hidden": !rightOpen || void 0,
|
|
8947
|
+
className: cn(
|
|
8948
|
+
"relative hidden h-full shrink-0 overflow-hidden border-l border-border transition-[width] duration-300 ease-in-out lg:block",
|
|
8949
|
+
!rightOpen && "border-l-0",
|
|
8950
|
+
rightPanelClassName
|
|
8951
|
+
),
|
|
8952
|
+
style: { width: rightOpen ? rightPanelWidth : 0 },
|
|
8953
|
+
children: /* @__PURE__ */ jsx("div", { className: "h-full", style: { width: rightPanelWidth }, children: rightPanel })
|
|
8954
|
+
}
|
|
8955
|
+
)
|
|
8956
|
+
]
|
|
8957
|
+
}
|
|
8958
|
+
) });
|
|
8959
|
+
}
|
|
8529
8960
|
|
|
8530
|
-
export { AgentAvatar, AgentComposer, AgentConversation, AgentHandoff, AgentProvider, AgentSurface, AllocationBreakdown, AnalyticsDashboard, Avatar, AvatarFallback, AvatarImage, Badge, Button, ChartContainer, ChatPanel, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmationPanel, ControlGrid, ConversationAnalytics, ConversationArtifact, DataPayloadView, DataTable, DynamicRenderer, EntityCard, FileDropZone, FloatingWidget, FullBleedSurface, FullscreenDashboard, GuidedLessonFlow, ImageGenerator, InlineSuggestionsInput, Input, ListingFeed, MediaEditorCanvas, MediaGallery, MessageActions, MessageBubble, MessageContainer, MessageContent, MessageList, MessageWithAttachments, MessageWithFeedback, MessageWithReasoning, MessageWithSteps, MetricsGrid, MobileShell, MultimodalInput, NativeAgentProvider, NativeSurface, OnboardingWizard, OptionCards, OverlayModal, PerformanceMetrics, PersonaSelector, Progress, ProgressTracker, PromptInput, PromptLibrary, QuickReplies, QuizCard, RecommendationCards, ReportView, ScheduleTimeline, ScrollArea, ScrollBar, SemanticBuilderSocketClient, SentimentDisplay, SettingsPanel, SlotRenderer, SplitView, StatusBadge, SystemMessage, TemplateSelector, Textarea, Timestamp, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypingIndicator, WritingAssistant, badgeVariants, buildSocketUrl, buttonVariants, calculatePercentage, cn, componentManifest, componentMap, componentRegistry, copyToClipboard, createMockBackend, debounce, delay, findComponentsByCapability, findComponentsByCategory, findComponentsBySurface, formatBytes, formatCurrency, formatNumber, formatRelativeTime, formatTime, generateId, getInitials, getManifestEntry, getSentimentBgColor, getSentimentColor, isBrowser, isInIframe, normalizeWebsiteId, parseTextWithBold, registerAllComponents, truncate, useAgent, useAgentBackend, useAgentInput, useAgentLayout, useAgentMessages, useNativeAgent, useNativeAgentOptional, useSemanticBuilder };
|
|
8961
|
+
export { AgentAvatar, AgentComposer, AgentConversation, AgentHandoff, AgentProvider, AgentSurface, AgentWorkspace, AgentWorkspaceComposer, AgentWorkspacePanelToggle, AllocationBreakdown, AnalyticsDashboard, Avatar, AvatarFallback, AvatarImage, Badge, Button, ChartContainer, ChatPanel, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmationPanel, ControlGrid, ConversationAnalytics, ConversationArtifact, DataPayloadView, DataTable, DynamicRenderer, EntityCard, FileDropZone, FloatingWidget, FullBleedSurface, FullscreenDashboard, GuidedLessonFlow, ImageGenerator, InlineSuggestionsInput, Input, ListingFeed, MediaEditorCanvas, MediaGallery, MessageActions, MessageBubble, MessageContainer, MessageContent, MessageList, MessageWithAttachments, MessageWithFeedback, MessageWithReasoning, MessageWithSteps, MetricsGrid, MobileShell, MultimodalInput, NativeAgentProvider, NativeSurface, OnboardingWizard, OptionCards, OverlayModal, PerformanceMetrics, PersonaSelector, Progress, ProgressTracker, PromptInput, PromptLibrary, QuickReplies, QuizCard, RecommendationCards, ReportView, ScheduleTimeline, ScrollArea, ScrollBar, SemanticBuilderSocketClient, SentimentDisplay, SettingsPanel, SlotRenderer, SplitView, StatusBadge, SystemMessage, TemplateSelector, Textarea, Timestamp, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypingIndicator, WritingAssistant, badgeVariants, buildSocketUrl, buttonVariants, calculatePercentage, cn, componentManifest, componentMap, componentRegistry, copyToClipboard, createMockBackend, debounce, delay, findComponentsByCapability, findComponentsByCategory, findComponentsBySurface, formatBytes, formatCurrency, formatNumber, formatRelativeTime, formatTime, generateId, getInitials, getManifestEntry, getSentimentBgColor, getSentimentColor, isBrowser, isInIframe, normalizeWebsiteId, parseTextWithBold, registerAllComponents, truncate, useAgent, useAgentBackend, useAgentInput, useAgentLayout, useAgentMessages, useAgentWorkspace, useAgentWorkspaceOptional, useNativeAgent, useNativeAgentOptional, useSemanticBuilder };
|
|
8531
8962
|
//# sourceMappingURL=index.js.map
|
|
8532
8963
|
//# sourceMappingURL=index.js.map
|