@uipath/apollo-wind 0.10.0-pr257.ea2dc77 → 0.11.0-pr295.2546a80

package/dist/components/custom/canvas-studio.cjs

@@ -0,0 +1,133 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    StudioGrid: ()=>StudioGrid,
+    StudioCanvas: ()=>StudioCanvas,
+    StudioGridItem: ()=>StudioGridItem
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const paddingClasses = {
+    none: '',
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-8'
+};
+const canvasBackgroundClasses = {
+    raised: 'bg-surface-raised',
+    surface: 'bg-surface',
+    transparent: 'bg-transparent'
+};
+function StudioCanvas({ children, className, padding = 'md', background = 'raised', fullWidth = false }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('relative flex-1', canvasBackgroundClasses[background], className),
+        "data-canvas": true,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, index_cjs_namespaceObject.cn)('absolute inset-0 overflow-y-auto', paddingClasses[padding]),
+            children: fullWidth ? children : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex justify-center",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "w-[760px] max-w-full",
+                    children: children
+                })
+            })
+        })
+    });
+}
+const gridColsClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    6: 'grid-cols-6',
+    12: 'grid-cols-12'
+};
+const gridGapClasses = {
+    none: '',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6'
+};
+function StudioGrid({ children, cols = 12, gap = 'md', className }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('grid', gridColsClasses[cols], gridGapClasses[gap], className),
+        children: children
+    });
+}
+const itemColSpanClasses = {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+    6: 'col-span-6',
+    12: 'col-span-12'
+};
+const itemBackgroundClasses = {
+    surface: 'bg-surface',
+    raised: 'bg-surface-raised',
+    transparent: 'bg-transparent'
+};
+function StudioGridItem({ children, cols = 12, className, background = 'surface', padding = 'md', border = true, canvasResponsive = false }) {
+    const [canvasWidth, setCanvasWidth] = external_react_namespaceObject.useState(0);
+    const itemRef = external_react_namespaceObject.useRef(null);
+    external_react_namespaceObject.useEffect(()=>{
+        if (!canvasResponsive) return;
+        const update = ()=>{
+            const canvas = itemRef.current?.closest('[data-canvas]');
+            if (canvas) setCanvasWidth(canvas.offsetWidth);
+        };
+        update();
+        window.addEventListener('resize', update);
+        const ro = new ResizeObserver(update);
+        const canvas = itemRef.current?.closest('[data-canvas]');
+        if (canvas) ro.observe(canvas);
+        return ()=>{
+            window.removeEventListener('resize', update);
+            ro.disconnect();
+        };
+    }, [
+        canvasResponsive
+    ]);
+    const responsiveColClass = canvasResponsive ? canvasWidth < 768 ? 'col-span-12' : canvasWidth < 1024 ? 'col-span-6' : 'col-span-3' : itemColSpanClasses[cols];
+    const hasExplicitColSpan = className?.includes('col-span-');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: itemRef,
+        className: (0, index_cjs_namespaceObject.cn)(!hasExplicitColSpan && responsiveColClass, itemBackgroundClasses[background], paddingClasses[padding], border && 'rounded-lg border border-border-subtle', className),
+        children: children
+    });
+}
+exports.StudioCanvas = __webpack_exports__.StudioCanvas;
+exports.StudioGrid = __webpack_exports__.StudioGrid;
+exports.StudioGridItem = __webpack_exports__.StudioGridItem;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "StudioCanvas",
+    "StudioGrid",
+    "StudioGridItem"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/canvas-studio.d.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+declare const paddingClasses: {
+    readonly none: "";
+    readonly sm: "p-4";
+    readonly md: "p-6";
+    readonly lg: "p-8";
+};
+type PaddingSize = keyof typeof paddingClasses;
+export interface StudioCanvasProps {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Outer padding applied to the scrollable area.
+     * @default 'md' (1.5rem / 24px)
+     */
+    padding?: PaddingSize;
+    /**
+     * Background of the canvas workspace.
+     * - `'raised'` — slightly elevated surface (default, differentiates from panels)
+     * - `'surface'` — base surface color
+     * - `'transparent'` — no background
+     */
+    background?: 'raised' | 'surface' | 'transparent';
+    /**
+     * When true, content fills the full canvas width instead of being
+     * centered in a 760px column. Use for data-dense layouts like tables.
+     */
+    fullWidth?: boolean;
+}
+/**
+ * Center canvas for the Studio template.
+ *
+ * - Fills remaining horizontal space between panels (`flex-1 relative`)
+ * - Scrolls independently via `absolute inset-0 overflow-y-auto`
+ * - Centers content in a `w-[760px] max-w-full` column
+ * - `data-canvas` attribute allows `StudioGridItem` canvasResponsive tracking
+ *
+ * Usage:
+ * ```tsx
+ * <StudioCanvas>
+ *   <StudioGrid>
+ *     <StudioGridItem>...</StudioGridItem>
+ *   </StudioGrid>
+ * </StudioCanvas>
+ * ```
+ */
+export declare function StudioCanvas({ children, className, padding, background, fullWidth, }: StudioCanvasProps): import("react/jsx-runtime").JSX.Element;
+export interface StudioGridProps {
+    children: React.ReactNode;
+    /** Number of columns in the grid. Default 12. */
+    cols?: 1 | 2 | 3 | 4 | 6 | 12;
+    /** Gap between grid cells. Default 'md'. */
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/**
+ * Grid wrapper for use inside `StudioCanvas`.
+ *
+ * Defaults to a 12-column grid with md gap. Pair with `StudioGridItem`.
+ */
+export declare function StudioGrid({ children, cols, gap, className }: StudioGridProps): import("react/jsx-runtime").JSX.Element;
+export interface StudioGridItemProps {
+    children: React.ReactNode;
+    /**
+     * Column span within the parent `StudioGrid`.
+     * Ignored if `className` already contains a `col-span-*` class,
+     * or if `canvasResponsive` is true (canvas width drives the span).
+     * @default 12
+     */
+    cols?: 1 | 2 | 3 | 4 | 6 | 12;
+    className?: string;
+    /**
+     * Background of the grid item card.
+     * - `'surface'` — base surface color (default, card-like)
+     * - `'raised'` — elevated surface
+     * - `'transparent'` — no background
+     */
+    background?: 'surface' | 'raised' | 'transparent';
+    /** Padding inside the card. Default 'md'. */
+    padding?: PaddingSize;
+    /** Render a border and rounded corners around the card. Default true. */
+    border?: boolean;
+    /**
+     * When true, the item measures the nearest `[data-canvas]` ancestor width
+     * and overrides `cols` with a responsive span:
+     * - < 768px  → col-span-12 (full width)
+     * - < 1024px → col-span-6  (half width)
+     * - ≥ 1024px → col-span-3  (quarter width)
+     */
+    canvasResponsive?: boolean;
+}
+/**
+ * Grid cell for use inside `StudioGrid`.
+ *
+ * Renders a card-like container with configurable background, padding, and border.
+ * Set `canvasResponsive` to automatically resize based on the canvas width.
+ */
+export declare function StudioGridItem({ children, cols, className, background, padding, border, canvasResponsive, }: StudioGridItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/custom/canvas-studio.js

@@ -0,0 +1,93 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../lib/index.js";
+const paddingClasses = {
+    none: '',
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-8'
+};
+const canvasBackgroundClasses = {
+    raised: 'bg-surface-raised',
+    surface: 'bg-surface',
+    transparent: 'bg-transparent'
+};
+function StudioCanvas({ children, className, padding = 'md', background = 'raised', fullWidth = false }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('relative flex-1', canvasBackgroundClasses[background], className),
+        "data-canvas": true,
+        children: /*#__PURE__*/ jsx("div", {
+            className: cn('absolute inset-0 overflow-y-auto', paddingClasses[padding]),
+            children: fullWidth ? children : /*#__PURE__*/ jsx("div", {
+                className: "flex justify-center",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "w-[760px] max-w-full",
+                    children: children
+                })
+            })
+        })
+    });
+}
+const gridColsClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    6: 'grid-cols-6',
+    12: 'grid-cols-12'
+};
+const gridGapClasses = {
+    none: '',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6'
+};
+function StudioGrid({ children, cols = 12, gap = 'md', className }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('grid', gridColsClasses[cols], gridGapClasses[gap], className),
+        children: children
+    });
+}
+const itemColSpanClasses = {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+    6: 'col-span-6',
+    12: 'col-span-12'
+};
+const itemBackgroundClasses = {
+    surface: 'bg-surface',
+    raised: 'bg-surface-raised',
+    transparent: 'bg-transparent'
+};
+function StudioGridItem({ children, cols = 12, className, background = 'surface', padding = 'md', border = true, canvasResponsive = false }) {
+    const [canvasWidth, setCanvasWidth] = useState(0);
+    const itemRef = useRef(null);
+    useEffect(()=>{
+        if (!canvasResponsive) return;
+        const update = ()=>{
+            const canvas = itemRef.current?.closest('[data-canvas]');
+            if (canvas) setCanvasWidth(canvas.offsetWidth);
+        };
+        update();
+        window.addEventListener('resize', update);
+        const ro = new ResizeObserver(update);
+        const canvas = itemRef.current?.closest('[data-canvas]');
+        if (canvas) ro.observe(canvas);
+        return ()=>{
+            window.removeEventListener('resize', update);
+            ro.disconnect();
+        };
+    }, [
+        canvasResponsive
+    ]);
+    const responsiveColClass = canvasResponsive ? canvasWidth < 768 ? 'col-span-12' : canvasWidth < 1024 ? 'col-span-6' : 'col-span-3' : itemColSpanClasses[cols];
+    const hasExplicitColSpan = className?.includes('col-span-');
+    return /*#__PURE__*/ jsx("div", {
+        ref: itemRef,
+        className: cn(!hasExplicitColSpan && responsiveColClass, itemBackgroundClasses[background], paddingClasses[padding], border && 'rounded-lg border border-border-subtle', className),
+        children: children
+    });
+}
+export { StudioCanvas, StudioGrid, StudioGridItem };

package/dist/components/custom/canvas.cjs

@@ -0,0 +1,44 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Canvas: ()=>Canvas
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function Canvas({ className, children }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-1 flex-col overflow-auto bg-surface', className),
+        children: children
+    });
+}
+exports.Canvas = __webpack_exports__.Canvas;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "Canvas"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/canvas.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface CanvasProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Main content canvas for Delegate templates.
+ *
+ * Provides the dark background surface that sits alongside the DelegatePanel.
+ * Content placed inside the Canvas can be laid out freely — future iterations
+ * will add optional layout guidelines (max-width constraints, centered
+ * content zones, padding presets, etc.).
+ */
+export declare function Canvas({ className, children }: CanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/canvas.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../lib/index.js";
+function Canvas({ className, children }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('flex flex-1 flex-col overflow-auto bg-surface', className),
+        children: children
+    });
+}
+export { Canvas };

package/dist/components/custom/chat-composer.cjs

@@ -0,0 +1,105 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ChatComposer: ()=>ChatComposer
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function ChatComposer({ className, placeholder = 'I would like you to automate my', onSubmit }) {
+    const [value, setValue] = external_react_namespaceObject.useState('');
+    const handleSubmit = ()=>{
+        if (value.trim()) {
+            onSubmit?.(value.trim());
+            setValue('');
+        }
+    };
+    const handleKeyDown = (e)=>{
+        if ('Enter' === e.key && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        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),
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            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",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
+                    className: "w-full resize-none bg-transparent text-base font-medium leading-5 text-foreground placeholder:text-foreground-subtle focus:outline-none",
+                    placeholder: placeholder,
+                    rows: 2,
+                    value: value,
+                    onChange: (e)=>setValue(e.target.value),
+                    onKeyDown: handleKeyDown
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "flex items-center justify-between",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: "flex items-center gap-1",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                    type: "button",
+                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
+                                    "aria-label": "Add attachment",
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
+                                        className: "h-5 w-5 text-foreground-inverse"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                    type: "button",
+                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
+                                    "aria-label": "Add workflow",
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
+                                        className: "h-5 w-5 text-foreground-inverse"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                            type: "button",
+                            className: "flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90",
+                            onClick: handleSubmit,
+                            "aria-label": "Submit message",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CornerDownLeft, {
+                                className: "h-5 w-5 -scale-y-100 rotate-90 text-foreground-on-accent"
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+exports.ChatComposer = __webpack_exports__.ChatComposer;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ChatComposer"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/chat-composer.d.ts

@@ -0,0 +1,15 @@
+export interface ChatComposerProps {
+    className?: string;
+    /** Placeholder text displayed when the input is empty */
+    placeholder?: string;
+    /** Callback when the user submits a message */
+    onSubmit?: (value: string) => void;
+}
+/**
+ * Reusable chat composer input with action buttons.
+ *
+ * Features a text area, left-side action buttons (add, workflow),
+ * and a cyan submit button. Fixed at 800px max-width to match the
+ * Delegate design spec.
+ */
+export declare function ChatComposer({ className, placeholder, onSubmit, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/chat-composer.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CornerDownLeft, Plus, Workflow } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../lib/index.js";
+function ChatComposer({ className, placeholder = 'I would like you to automate my', onSubmit }) {
+    const [value, setValue] = useState('');
+    const handleSubmit = ()=>{
+        if (value.trim()) {
+            onSubmit?.(value.trim());
+            setValue('');
+        }
+    };
+    const handleKeyDown = (e)=>{
+        if ('Enter' === e.key && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('w-full max-w-[800px] rounded-[32px] bg-gradient-to-b from-surface to-surface-raised p-2', className),
+        children: /*#__PURE__*/ jsxs("div", {
+            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",
+            children: [
+                /*#__PURE__*/ jsx("textarea", {
+                    className: "w-full resize-none bg-transparent text-base font-medium leading-5 text-foreground placeholder:text-foreground-subtle focus:outline-none",
+                    placeholder: placeholder,
+                    rows: 2,
+                    value: value,
+                    onChange: (e)=>setValue(e.target.value),
+                    onKeyDown: handleKeyDown
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "flex items-center justify-between",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex items-center gap-1",
+                            children: [
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
+                                    "aria-label": "Add attachment",
+                                    children: /*#__PURE__*/ jsx(Plus, {
+                                        className: "h-5 w-5 text-foreground-inverse"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
+                                    "aria-label": "Add workflow",
+                                    children: /*#__PURE__*/ jsx(Workflow, {
+                                        className: "h-5 w-5 text-foreground-inverse"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: "flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90",
+                            onClick: handleSubmit,
+                            "aria-label": "Submit message",
+                            children: /*#__PURE__*/ jsx(CornerDownLeft, {
+                                className: "h-5 w-5 -scale-y-100 rotate-90 text-foreground-on-accent"
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { ChatComposer };