@openuidev/react-ui 0.9.16

package/dist/components/Select/stories/select.stories.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from "../Select";
+const meta = {
+    title: "Components/Select",
+    component: Select,
+    tags: ["!dev", "autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "```tsx\nimport { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@openui-ui/react-ui';\n```",
+            },
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: "240px" }, children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        size: {
+            control: "radio",
+            options: ["sm", "md", "lg"],
+            description: "The size of the select trigger",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "md" },
+                category: "Appearance",
+            },
+        },
+        showTick: {
+            control: "boolean",
+            description: "Whether to show the tick icon for selected items",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" },
+                category: "Display",
+            },
+        },
+        hideDropdownIcon: {
+            control: "boolean",
+            description: "Whether to hide the dropdown icon in the trigger",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+                category: "Display",
+            },
+        },
+        placeholder: {
+            control: "text",
+            description: "Placeholder text for the select",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "undefined" },
+                category: "Content",
+            },
+        },
+    },
+};
+export default meta;
+export const Basic = {
+    args: {
+        size: "md",
+        showTick: true,
+        hideDropdownIcon: false,
+        placeholder: "Select an option",
+    },
+    render: (args) => (_jsxs(Select, { children: [_jsx(SelectTrigger, { style: { width: "228px" }, hideDropdownIcon: args.hideDropdownIcon, size: args.size, children: _jsx(SelectValue, { placeholder: args.placeholder }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Fruits" }), _jsx(SelectItem, { value: "apple", children: "Apple" }), _jsx(SelectItem, { value: "banana", children: "Banana" }), _jsx(SelectItem, { value: "blueberry", children: "Blueberry" }), _jsx(SelectItem, { value: "grapes", children: "Grapes" }), _jsx(SelectItem, { value: "pineapple", children: "Pineapple" }), _jsx(SelectSeparator, {}), _jsx(SelectLabel, { children: "Fast Food" }), _jsx(SelectItem, { value: "burger", children: "Burger" }), _jsx(SelectItem, { value: "pizza", children: "Pizza" }), _jsx(SelectItem, { value: "pasta", children: "Pasta" }), _jsx(SelectItem, { value: "salad", children: "Salad" }), _jsx(SelectItem, { value: "ice-cream", children: "Ice Cream" })] }) })] })),
+};
+//# sourceMappingURL=select.stories.js.map

package/dist/components/Select/stories/select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.stories.js","sourceRoot":"","sources":["../../../../src/components/Select/stories/select.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,4 @@
+import * as RadixSeparator from "@radix-ui/react-separator";
+declare const Separator: ({ className, ...props }: React.ComponentProps<typeof RadixSeparator.Root>) => import("react/jsx-runtime").JSX.Element;
+export { Separator };
+//# sourceMappingURL=Separator.d.ts.map

package/dist/components/Separator/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,2BAA2B,CAAC;AAG5D,QAAA,MAAM,SAAS,GAAI,yBAAyB,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,4CAE3F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Separator/Separator.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixSeparator from "@radix-ui/react-separator";
+import clsx from "clsx";
+const Separator = ({ className, ...props }) => {
+    return _jsx(RadixSeparator.Root, { className: clsx("openui-separator", className), ...props });
+};
+export { Separator };
+//# sourceMappingURL=Separator.js.map

package/dist/components/Separator/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,cAAc,MAAM,2BAA2B,CAAC;AAC5D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoD,EAAE,EAAE;IAC9F,OAAO,KAAC,cAAc,CAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AAC5F,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Separator/dependencies.d.ts

@@ -0,0 +1,3 @@
+declare const dependencies: string[];
+export default dependencies;
+//# sourceMappingURL=dependencies.d.ts.map

package/dist/components/Separator/dependencies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/dependencies.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,UAAgB,CAAC;AACnC,eAAe,YAAY,CAAC"}

package/dist/components/Separator/dependencies.js

@@ -0,0 +1,3 @@
+const dependencies = ["Separator"];
+export default dependencies;
+//# sourceMappingURL=dependencies.js.map

package/dist/components/Separator/dependencies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.js","sourceRoot":"","sources":["../../../src/components/Separator/dependencies.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,WAAW,CAAC,CAAC;AACnC,eAAe,YAAY,CAAC"}

package/dist/components/Separator/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Separator";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/Separator/index.js

@@ -0,0 +1,2 @@
+export * from "./Separator";
+//# sourceMappingURL=index.js.map

package/dist/components/Separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Separator/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/Separator/separator.css

@@ -0,0 +1 @@
+.openui-separator{background-color:var(--openui-border-default, oklch(9.7% 0 0deg / 0.06))}.openui-separator[data-orientation=horizontal]{height:1px;width:100%}.openui-separator[data-orientation=vertical]{width:1px;height:100%}

package/dist/components/Separator/stories/Separator.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "../Separator";
+declare const meta: Meta<typeof Separator>;
+export default meta;
+type Story = StoryObj<typeof Separator>;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+//# sourceMappingURL=Separator.stories.d.ts.map

package/dist/components/Separator/stories/Separator.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Separator/stories/Separator.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAiChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC"}

package/dist/components/Separator/stories/Separator.stories.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator } from "../Separator";
+const meta = {
+    title: "Components/Separator",
+    component: Separator,
+    tags: ["autodocs", "!dev"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "```tsx\nimport { Separator } from '@openui-ui/react-ui';\n```",
+            },
+        },
+    },
+    decorators: [
+        (Story, { args }) => (_jsx("div", { style: args.orientation === "vertical" ? { height: "100px" } : { width: "100px" }, children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        orientation: {
+            control: "radio",
+            options: ["horizontal", "vertical"],
+            description: "The orientation of the separator.",
+            defaultValue: "horizontal",
+        },
+        decorative: {
+            control: "boolean",
+            description: "When ```true```, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.",
+            defaultValue: false,
+        },
+    },
+};
+export default meta;
+export const Horizontal = {
+    args: {
+        orientation: "horizontal",
+    },
+};
+export const Vertical = {
+    args: {
+        orientation: "vertical",
+    },
+};
+//# sourceMappingURL=Separator.stories.js.map

package/dist/components/Separator/stories/Separator.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.stories.js","sourceRoot":"","sources":["../../../../src/components/Separator/stories/Separator.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,+DAA+D;aAC3E;SACF;KACF;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACnB,cAAK,KAAK,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,YACpF,KAAC,KAAK,KAAG,GACL,CACP;KACF;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;YACnC,WAAW,EAAE,mCAAmC;YAChD,YAAY,EAAE,YAAY;SAC3B;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;YAClB,WAAW,EACT,4IAA4I;YAC9I,YAAY,EAAE,KAAK;SACpB;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,WAAW,EAAE,YAAY;KAC1B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,WAAW,EAAE,UAAU;KACxB;CACF,CAAC"}

package/dist/components/Shell/Container.d.ts

@@ -0,0 +1,9 @@
+interface ContainerProps {
+    children?: React.ReactNode;
+    logoUrl: string;
+    agentName: string;
+    className?: string;
+}
+export declare const Container: ({ children, logoUrl, agentName, className }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Container.d.ts.map

package/dist/components/Shell/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/components/Shell/Container.tsx"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,6CAA6C,cAAc,4CA0BpF,CAAC"}

package/dist/components/Shell/Container.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useRef } from "react";
+import { LayoutContextProvider } from "../../context/LayoutContext";
+import { useElementSize } from "../../hooks/useElementSize";
+import { ShellStoreProvider } from "./store";
+export const Container = ({ children, logoUrl, agentName, className }) => {
+    const ref = useRef(null);
+    const { width } = useElementSize({ ref }) || {};
+    // TODO: revisit this logic
+    const isMobile = width > 0 && width < 768;
+    const isFullScreen = width > 768;
+    const layout = isMobile ? "mobile" : isFullScreen ? "fullscreen" : "tray";
+    return (_jsx(ShellStoreProvider, { logoUrl: logoUrl, agentName: agentName, children: _jsx(LayoutContextProvider, { layout: layout, children: _jsx("div", { className: clsx("openui-shell-container", {
+                    "openui-shell-container--mobile": isMobile,
+                }, className), ref: ref, children: children }) }) }));
+};
+//# sourceMappingURL=Container.js.map

package/dist/components/Shell/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../src/components/Shell/Container.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAS7C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAkB,EAAE,EAAE;IACvF,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC;IAChD,2BAA2B;IAC3B,MAAM,QAAQ,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,GAAG,CAAC;IAC1C,MAAM,YAAY,GAAG,KAAK,GAAG,GAAG,CAAC;IACjC,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC;IAE1E,OAAO,CACL,KAAC,kBAAkB,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,YACxD,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,cACE,SAAS,EAAE,IAAI,CACb,wBAAwB,EACxB;oBACE,gCAAgC,EAAE,QAAQ;iBAC3C,EACD,SAAS,CACV,EACD,GAAG,EAAE,GAAG,YAEP,QAAQ,GACL,GACgB,GACL,CACtB,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Shell/ConversationStarter.d.ts

@@ -0,0 +1,15 @@
+import { ConversationStarterProps } from "../../types/ConversationStarter";
+export type ConversationStarterVariant = "short" | "long";
+export interface ConversationStarterContainerProps {
+    starters: ConversationStarterProps[];
+    className?: string;
+    /**
+     * Variant of the conversation starter
+     * - "short": Pill-style buttons that wrap (default)
+     * - "long": Vertical list items with icons and hover arrow
+     */
+    variant?: ConversationStarterVariant;
+}
+export declare const ConversationStarter: ({ starters, className, variant, }: ConversationStarterContainerProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ConversationStarter;
+//# sourceMappingURL=ConversationStarter.d.ts.map

package/dist/components/Shell/ConversationStarter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationStarter.d.ts","sourceRoot":"","sources":["../../../src/components/Shell/ConversationStarter.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2B,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAIpG,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,MAAM,CAAC;AA+D1D,MAAM,WAAW,iCAAiC;IAChD,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,0BAA0B,CAAC;CACtC;AAED,eAAO,MAAM,mBAAmB,GAAI,mCAIjC,iCAAiC,mDAkDnC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/Shell/ConversationStarter.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useThread } from "@openuidev/react-headless";
+import clsx from "clsx";
+import { ArrowUp, Lightbulb } from "lucide-react";
+import { Fragment } from "react";
+import { isChatEmpty } from "../OpenUIChat/utils";
+import { Separator } from "../Separator";
+/**
+ * Renders the appropriate icon based on the icon prop value
+ * - undefined: Show default lightbulb icon
+ * - ReactNode: Show the provided icon (use <></> or React.Fragment for no icon)
+ */
+const renderIcon = (icon) => {
+    if (icon === undefined) {
+        return _jsx(Lightbulb, { size: 16 });
+    }
+    return icon;
+};
+const ConversationStarterItem = ({ displayText, prompt, onClick, variant, icon, }) => {
+    const renderedIcon = renderIcon(icon);
+    if (variant === "short") {
+        return (_jsxs("button", { type: "button", className: "openui-shell-conversation-starter-item-short", onClick: () => onClick(prompt), children: [renderedIcon && (_jsx("span", { className: "openui-shell-conversation-starter-item-short__icon", children: renderedIcon })), _jsx("span", { className: "openui-shell-conversation-starter-item-short__text", children: displayText })] }));
+    }
+    // Long variant (detailed list style)
+    return (_jsxs("button", { type: "button", className: "openui-shell-conversation-starter-item-long", onClick: () => onClick(prompt), children: [_jsxs("div", { className: "openui-shell-conversation-starter-item-long__content", children: [renderedIcon && (_jsx("span", { className: "openui-shell-conversation-starter-item-long__icon", children: renderedIcon })), _jsx("span", { className: "openui-shell-conversation-starter-item-long__text", children: displayText })] }), _jsx("span", { className: "openui-shell-conversation-starter-item-long__arrow", children: _jsx(ArrowUp, { size: 16 }) })] }));
+};
+export const ConversationStarter = ({ starters, className, variant = "short", }) => {
+    const processMessage = useThread((s) => s.processMessage);
+    const isRunning = useThread((s) => s.isRunning);
+    const messages = useThread((s) => s.messages);
+    const isLoadingMessages = useThread((s) => s.isLoadingMessages);
+    const handleClick = (prompt) => {
+        if (isRunning)
+            return;
+        processMessage({
+            role: "user",
+            content: prompt,
+        });
+    };
+    // Only show when there are no messages
+    if (!isChatEmpty({ isLoadingMessages, messages })) {
+        return null;
+    }
+    if (starters.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: clsx("openui-shell-conversation-starter", `openui-shell-conversation-starter--${variant}`, className), children: starters.map((item, index) => (_jsxs(Fragment, { children: [_jsx(ConversationStarterItem, { displayText: item.displayText, prompt: item.prompt, icon: item.icon, onClick: handleClick, variant: variant }), variant === "long" && index < starters.length - 1 && (_jsx("div", { className: "openui-shell-conversation-starter__separator", children: _jsx(Separator, {}) }))] }, `${item.displayText}-${index}`))) }));
+};
+export default ConversationStarter;
+//# sourceMappingURL=ConversationStarter.js.map

package/dist/components/Shell/ConversationStarter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationStarter.js","sourceRoot":"","sources":["../../../src/components/Shell/ConversationStarter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASzC;;;;GAIG;AACH,MAAM,UAAU,GAAG,CAAC,IAAyC,EAAa,EAAE;IAC1E,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC;IACjC,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,EAC/B,WAAW,EACX,MAAM,EACN,OAAO,EACP,OAAO,EACP,IAAI,GACyB,EAAE,EAAE;IACjC,MAAM,YAAY,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAEtC,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;QACxB,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,8CAA8C,EACxD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,aAE7B,YAAY,IAAI,CACf,eAAM,SAAS,EAAC,oDAAoD,YAAE,YAAY,GAAQ,CAC3F,EACD,eAAM,SAAS,EAAC,oDAAoD,YAAE,WAAW,GAAQ,IAClF,CACV,CAAC;IACJ,CAAC;IAED,qCAAqC;IACrC,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6CAA6C,EACvD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,aAE9B,eAAK,SAAS,EAAC,sDAAsD,aAClE,YAAY,IAAI,CACf,eAAM,SAAS,EAAC,mDAAmD,YAAE,YAAY,GAAQ,CAC1F,EACD,eAAM,SAAS,EAAC,mDAAmD,YAAE,WAAW,GAAQ,IACpF,EACN,eAAM,SAAS,EAAC,oDAAoD,YAClE,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI,GAChB,IACA,CACV,CAAC;AACJ,CAAC,CAAC;AAaF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,OAAO,GACiB,EAAE,EAAE;IACtC,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;IAEhE,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE;QACrC,IAAI,SAAS;YAAE,OAAO;QACtB,cAAc,CAAC;YACb,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,MAAM;SAChB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,uCAAuC;IACvC,IAAI,CAAC,WAAW,CAAC,EAAE,iBAAiB,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CACb,mCAAmC,EACnC,sCAAsC,OAAO,EAAE,EAC/C,SAAS,CACV,YAEA,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,MAAC,QAAQ,eACP,KAAC,uBAAuB,IACtB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,GAChB,EAED,OAAO,KAAK,MAAM,IAAI,KAAK,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACpD,cAAK,SAAS,EAAC,8CAA8C,YAC3D,KAAC,SAAS,KAAG,GACT,CACP,KAbY,GAAG,IAAI,CAAC,WAAW,IAAI,KAAK,EAAE,CAclC,CACZ,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/Shell/MobileHeader.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+interface MobileHeaderProps {
+    className?: string;
+    rightChildren?: ReactNode;
+}
+export declare const MobileHeader: ({ className, rightChildren }: MobileHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MobileHeader.d.ts.map

package/dist/components/Shell/MobileHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Shell/MobileHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,GAAI,8BAA8B,iBAAiB,4CA+B3E,CAAC"}

package/dist/components/Shell/MobileHeader.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useThreadList } from "@openuidev/react-headless";
+import clsx from "clsx";
+import { Menu, Plus } from "lucide-react";
+import { IconButton } from "../IconButton";
+import { useShellStore } from "./store";
+export const MobileHeader = ({ className, rightChildren }) => {
+    const switchToNewThread = useThreadList((s) => s.switchToNewThread);
+    const { logoUrl, agentName, setIsSidebarOpen } = useShellStore((state) => ({
+        logoUrl: state.logoUrl,
+        agentName: state.agentName,
+        setIsSidebarOpen: state.setIsSidebarOpen,
+    }));
+    return (_jsxs("div", { className: clsx("openui-shell-mobile-header", className), children: [_jsx(IconButton, { size: "medium", icon: _jsx(Menu, { size: "1em" }), onClick: () => setIsSidebarOpen(true), variant: "secondary" }), _jsxs("div", { className: "openui-shell-mobile-header-logo-container", children: [_jsx("img", { className: "openui-shell-mobile-header-logo", src: logoUrl, alt: "Logo" }), _jsx("span", { className: "openui-shell-mobile-header-agent-name", children: agentName })] }), _jsxs("div", { className: "openui-shell-mobile-header-actions", children: [rightChildren, _jsx(IconButton, { size: "medium", icon: _jsx(Plus, { size: "1em" }), onClick: switchToNewThread, variant: "secondary" })] })] }));
+};
+//# sourceMappingURL=MobileHeader.js.map

package/dist/components/Shell/MobileHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileHeader.js","sourceRoot":"","sources":["../../../src/components/Shell/MobileHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAOxC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAqB,EAAE,EAAE;IAC9E,MAAM,iBAAiB,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;IACpE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,aAAa,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACzE,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;KACzC,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,4BAA4B,EAAE,SAAS,CAAC,aAC3D,KAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EACrC,OAAO,EAAC,WAAW,GACnB,EACF,eAAK,SAAS,EAAC,2CAA2C,aACxD,cAAK,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,MAAM,GAAG,EAC5E,eAAM,SAAS,EAAC,uCAAuC,YAAE,SAAS,GAAQ,IACtE,EACN,eAAK,SAAS,EAAC,oCAAoC,aAChD,aAAa,EACd,KAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EACzB,OAAO,EAAE,iBAAiB,EAC1B,OAAO,EAAC,WAAW,GACnB,IACE,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Shell/NewChatButton.d.ts

@@ -0,0 +1,4 @@
+export declare const NewChatButton: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NewChatButton.d.ts.map

package/dist/components/Shell/NewChatButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewChatButton.d.ts","sourceRoot":"","sources":["../../../src/components/Shell/NewChatButton.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,GAAI,eAAe;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4CAYlE,CAAC"}

package/dist/components/Shell/NewChatButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useThreadList } from "@openuidev/react-headless";
+import clsx from "clsx";
+import { Plus } from "lucide-react";
+import { Button } from "../Button";
+export const NewChatButton = ({ className }) => {
+    const switchToNewThread = useThreadList((s) => s.switchToNewThread);
+    return (_jsx(Button, { className: clsx("openui-shell-new-chat-button", className), iconRight: _jsx(Plus, {}), onClick: switchToNewThread, children: "New Chat" }));
+};
+//# sourceMappingURL=NewChatButton.js.map

package/dist/components/Shell/NewChatButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewChatButton.js","sourceRoot":"","sources":["../../../src/components/Shell/NewChatButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAA0B,EAAE,EAAE;IACrE,MAAM,iBAAiB,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;IAEpE,OAAO,CACL,KAAC,MAAM,IACL,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,SAAS,CAAC,EAC1D,SAAS,EAAE,KAAC,IAAI,KAAG,EACnB,OAAO,EAAE,iBAAiB,yBAGnB,CACV,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Shell/ResizableSeparator.d.ts

@@ -0,0 +1,13 @@
+interface ResizableSeparatorProps {
+    onResize: (clientX: number) => void;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+    className?: string;
+}
+/**
+ * A draggable vertical separator for resizing panels.
+ * Used between chat and artifact panels in desktop mode.
+ */
+export declare const ResizableSeparator: ({ onResize, onDragStart, onDragEnd, className, }: ResizableSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ResizableSeparator.d.ts.map

package/dist/components/Shell/ResizableSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/Shell/ResizableSeparator.tsx"],"names":[],"mappings":"AAGA,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,kDAKhC,uBAAuB,4CAyDzB,CAAC"}

package/dist/components/Shell/ResizableSeparator.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useEffect, useRef } from "react";
+/**
+ * A draggable vertical separator for resizing panels.
+ * Used between chat and artifact panels in desktop mode.
+ */
+export const ResizableSeparator = ({ onResize, onDragStart, onDragEnd, className, }) => {
+    const isDraggingRef = useRef(false);
+    const onResizeRef = useRef(onResize);
+    const onDragStartRef = useRef(onDragStart);
+    const onDragEndRef = useRef(onDragEnd);
+    // Keep callback refs up to date without triggering effect re-runs
+    useEffect(() => {
+        onResizeRef.current = onResize;
+        onDragStartRef.current = onDragStart;
+        onDragEndRef.current = onDragEnd;
+    }, [onResize, onDragStart, onDragEnd]);
+    // Global mouse event handlers for drag behavior
+    // Uses refs instead of dependencies to avoid re-creating listeners
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (isDraggingRef.current) {
+                e.preventDefault();
+                onResizeRef.current(e.clientX);
+            }
+        };
+        const handleMouseUp = () => {
+            if (isDraggingRef.current) {
+                isDraggingRef.current = false;
+                onDragEndRef.current();
+                // Reset cursor styles
+                document.body.style.cursor = "";
+                document.body.style.userSelect = "";
+            }
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, []); // Empty deps - handlers use refs to access latest callbacks
+    const handleMouseDown = () => {
+        isDraggingRef.current = true;
+        onDragStartRef.current();
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+    };
+    return (_jsx("div", { className: clsx("openui-shell-resizable-separator", className), onMouseDown: handleMouseDown, children: _jsx("div", { className: "openui-shell-resizable-separator__handle" }) }));
+};
+//# sourceMappingURL=ResizableSeparator.js.map

package/dist/components/Shell/ResizableSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableSeparator.js","sourceRoot":"","sources":["../../../src/components/Shell/ResizableSeparator.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAS1C;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,QAAQ,EACR,WAAW,EACX,SAAS,EACT,SAAS,GACe,EAAE,EAAE;IAC5B,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAEvC,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;QAC/B,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;QACrC,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;IACnC,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvC,gDAAgD;IAChD,mEAAmE;IACnE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC1B,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;gBAC9B,YAAY,CAAC,OAAO,EAAE,CAAC;gBACvB,sBAAsB;gBACtB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;gBAChC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAC;YACtC,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,4DAA4D;IAEpE,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7B,cAAc,CAAC,OAAO,EAAE,CAAC;QACzB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC;QAC1C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,SAAS,CAAC,EAC9D,WAAW,EAAE,eAAe,YAE5B,cAAK,SAAS,EAAC,0CAA0C,GAAG,GACxD,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Shell/Sidebar.d.ts

@@ -0,0 +1,13 @@
+export declare const SidebarContainer: ({ children, className, }: {
+    children?: React.ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarHeader: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarContent: ({ children, className, }: {
+    children?: React.ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarSeparator: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/components/Shell/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Shell/Sidebar.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,GAAI,0BAG9B;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CA2CA,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,eAAe;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4CAuBlE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,0BAG5B;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAcA,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAE5B,CAAC"}

package/dist/components/Shell/Sidebar.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { PanelLeft, PanelRight } from "lucide-react";
+import { useEffect } from "react";
+import { useLayoutContext } from "../../context/LayoutContext";
+import { IconButton } from "../IconButton";
+import { useShellStore } from "./store";
+export const SidebarContainer = ({ children, className, }) => {
+    const { isSidebarOpen, setIsSidebarOpen, isArtifactActive } = useShellStore((state) => ({
+        isSidebarOpen: state.isSidebarOpen,
+        setIsSidebarOpen: state.setIsSidebarOpen,
+        isArtifactActive: state.isArtifactActive,
+    }));
+    const { layout } = useLayoutContext() || {};
+    const isMobile = layout === "mobile";
+    useEffect(() => {
+        if (isMobile) {
+            setIsSidebarOpen(false);
+        }
+        else {
+            setIsSidebarOpen(true);
+        }
+    }, [isMobile]);
+    return (_jsxs(_Fragment, { children: [isMobile && (_jsx("div", { className: clsx("openui-shell-sidebar-container__overlay", {
+                    "openui-shell-sidebar-container__overlay--collapsed": !isSidebarOpen,
+                }), onClick: () => {
+                    setIsSidebarOpen(false);
+                } })), _jsx("div", { className: clsx("openui-shell-sidebar-container", {
+                    "openui-shell-sidebar-container--collapsed": !isSidebarOpen,
+                    "openui-shell-sidebar-container--hidden": isArtifactActive && !isMobile,
+                }, className), children: children })] }));
+};
+export const SidebarHeader = ({ className }) => {
+    const { agentName, logoUrl, setIsSidebarOpen, isSidebarOpen } = useShellStore((state) => ({
+        agentName: state.agentName,
+        logoUrl: state.logoUrl,
+        setIsSidebarOpen: state.setIsSidebarOpen,
+        isSidebarOpen: state.isSidebarOpen,
+    }));
+    return (_jsxs("div", { className: clsx("openui-shell-sidebar-header", className), children: [_jsx("img", { src: logoUrl, alt: agentName, className: "openui-shell-sidebar-header__logo" }), _jsx("div", { className: "openui-shell-sidebar-header__agent-name", children: agentName }), _jsx(IconButton, { icon: isSidebarOpen ? _jsx(PanelRight, { size: "1em" }) : _jsx(PanelLeft, { size: "1em" }), onClick: () => {
+                    setIsSidebarOpen(!isSidebarOpen);
+                }, size: "large", variant: "secondary", className: "openui-shell-sidebar-header__toggle-button" })] }));
+};
+export const SidebarContent = ({ children, className, }) => {
+    const { isSidebarOpen } = useShellStore((state) => ({
+        isSidebarOpen: state.isSidebarOpen,
+    }));
+    return (_jsx("div", { className: clsx("openui-shell-sidebar-content", className, {
+            "openui-shell-sidebar-content--collapsed": !isSidebarOpen,
+        }), children: children }));
+};
+export const SidebarSeparator = () => {
+    return _jsx("div", { className: "openui-shell-sidebar-separator" });
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/Shell/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/components/Shell/Sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,GAIV,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAG,aAAa,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACtF,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;KACzC,CAAC,CAAC,CAAC;IACJ,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,IAAI,EAAE,CAAC;IAC5C,MAAM,QAAQ,GAAG,MAAM,KAAK,QAAQ,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE,CAAC;YACb,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,8BACG,QAAQ,IAAI,CACX,cACE,SAAS,EAAE,IAAI,CAAC,yCAAyC,EAAE;oBACzD,oDAAoD,EAAE,CAAC,aAAa;iBACrE,CAAC,EACF,OAAO,EAAE,GAAG,EAAE;oBACZ,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC,GACD,CACH,EACD,cACE,SAAS,EAAE,IAAI,CACb,gCAAgC,EAChC;oBACE,2CAA2C,EAAE,CAAC,aAAa;oBAC3D,wCAAwC,EAAE,gBAAgB,IAAI,CAAC,QAAQ;iBACxE,EACD,SAAS,CACV,YAEA,QAAQ,GACL,IACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAA0B,EAAE,EAAE;IACrE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,GAAG,aAAa,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACxF,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,aAAa,EAAE,KAAK,CAAC,aAAa;KACnC,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,6BAA6B,EAAE,SAAS,CAAC,aAC5D,cAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,mCAAmC,GAAG,EACnF,cAAK,SAAS,EAAC,yCAAyC,YAAE,SAAS,GAAO,EAC1E,KAAC,UAAU,IACT,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,IAAI,EAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,IAAI,EAAC,KAAK,GAAG,EAC1E,OAAO,EAAE,GAAG,EAAE;oBACZ,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC;gBACnC,CAAC,EACD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,4CAA4C,GACtD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,SAAS,GAIV,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,aAAa,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAClD,aAAa,EAAE,KAAK,CAAC,aAAa;KACnC,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,SAAS,EAAE;YACzD,yCAAyC,EAAE,CAAC,aAAa;SAC1D,CAAC,YAED,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,OAAO,cAAK,SAAS,EAAC,gCAAgC,GAAG,CAAC;AAC5D,CAAC,CAAC"}

package/dist/components/Shell/Thread.d.ts

@@ -0,0 +1,46 @@
+import type { Message } from "@openuidev/react-headless";
+import React from "react";
+import { ScrollVariant } from "../../hooks/useScrollToBottom";
+import type { AssistantMessageComponent, UserMessageComponent } from "../OpenUIChat/types";
+export declare const ThreadContainer: ({ children, className, isArtifactActive, renderArtifact, }: {
+    children?: React.ReactNode;
+    className?: string;
+    isArtifactActive?: boolean;
+    renderArtifact?: () => React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollArea: ({ children, className, scrollVariant, userMessageSelector, }: {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Scroll to bottom once the last message is added
+     */
+    scrollVariant?: ScrollVariant;
+    /**
+     * Selector for the user message
+     */
+    userMessageSelector?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AssistantMessageContainer: ({ children, className, }: {
+    children?: React.ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const UserMessageContainer: ({ children, className, }: {
+    children?: React.ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderMessage: React.MemoExoticComponent<({ message, className, allMessages, assistantMessage: CustomAssistantMessage, userMessage: CustomUserMessage, }: {
+    message: Message;
+    className?: string;
+    allMessages: Message[];
+    assistantMessage?: AssistantMessageComponent;
+    userMessage?: UserMessageComponent;
+}) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const MessageLoading: () => import("react/jsx-runtime").JSX.Element;
+export declare const Messages: ({ className, loader, assistantMessage, userMessage, }: {
+    className?: string;
+    loader?: React.ReactNode;
+    assistantMessage?: AssistantMessageComponent;
+    userMessage?: UserMessageComponent;
+}) => import("react/jsx-runtime").JSX.Element;
+export { Composer } from "./components";
+//# sourceMappingURL=Thread.d.ts.map

package/dist/components/Shell/Thread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../src/components/Shell/Thread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAoB,OAAO,EAAe,MAAM,2BAA2B,CAAC;AAGxF,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAqB,MAAM,+BAA+B,CAAC;AAGjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAO3F,eAAO,MAAM,eAAe,GAAI,4DAK7B;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CACxC,4CAyEA,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,8DAKxB;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,4CA0CA,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,0BAGvC;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAWA,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,0BAGlC;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAMA,CAAC;AA6EF,eAAO,MAAM,aAAa,6IAOrB;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,OAAO,EAAE,CAAC;IACvB,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;IAC7C,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACpC,oDA+BF,CAAC;AAEF,eAAO,MAAM,cAAc,+CAM1B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,uDAKtB;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;IAC7C,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACpC,4CAqBA,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC"}