@salla.sa/ui-ai-kit-react 2.1.0 → 2.2.0

package/dist/stories/ai-chat-container.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { AiCard, AiChatContainer, AiChatHeader, AiChatMessage, AiConversationList, AiLink, AiLoading, AiMessageInput, AiRating, AiSuggestion, } from "../generated/components";
+import { AiCard, AiChatContainer, AiChatHeader, AiChatMessage, AiLink, AiLoading, AiMessageInput, AiRating, AiSuggestion, } from "../components";
 const meta = {
     title: "Chat/Chat Container",
     component: AiChatContainer,
@@ -31,6 +31,22 @@ const meta = {
             control: "boolean",
             description: "Show AI watermark in the top half of the container",
         },
+        loading: {
+            control: "boolean",
+            description: "Show skeleton loading state while loading conversation history",
+        },
+        error: {
+            control: "boolean",
+            description: "Show error state when conversation fails to load",
+        },
+        errorText: {
+            control: "text",
+            description: "Error message text displayed in the error state",
+        },
+        retryLabel: {
+            control: "text",
+            description: "Label for the retry button in the error state",
+        },
     },
 };
 export default meta;
@@ -63,7 +79,7 @@ const steps = [
     { step: 4, action: "إعداد الروابط والمصادر", status: "pending" },
 ];
 const comparisonContent = `باقة **بلس** مناسبة للمتاجر الصغيرة والمتوسطة، بينما باقة **برو** مصممة للمتاجر الكبيرة اللي تحتاج منتجات غير محدودة وعمولات أقل ودعم فني على مدار الساعة.\n\n**التوصية:** إذا كنت تتوقع نمواً سريعاً، باقة **برو** هي الأنسب.`;
-const showcaseConversations = JSON.stringify([
+const showcaseConversations = [
     {
         id: "1",
         title: "مساعد سلة",
@@ -85,10 +101,9 @@ const showcaseConversations = JSON.stringify([
         timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
         rating: null,
     },
-]);
+];
 const ShowcaseConversationDemo = () => {
     const [showVoice, setShowVoice] = useState(false);
-    const [listOpen, setListOpen] = useState(false);
     const [activeId, setActiveId] = useState("1");
     const [conversation, setConversation] = useState("مساعد سلة");
     const handleConversationSelect = (e) => {
@@ -98,25 +113,15 @@ const ShowcaseConversationDemo = () => {
             setConversation("محادثة جديدة");
         }
         else {
-            const item = JSON.parse(showcaseConversations).find((c) => c.id === id);
+            const item = showcaseConversations.find((c) => c.id === id);
             setActiveId(id);
             setConversation(item?.title ?? "");
         }
-        setListOpen(false);
     };
-    return (_jsx("div", { style: { position: "relative", height: "700px", background: "#f3f4f6" }, children: _jsxs(AiChatContainer, { isOpen: true, position: "float", floatHeight: "800px", width: "28rem", autoScroll: true, children: [_jsx(AiChatHeader, { slot: "header", isDraggable: true, mode: "agent", conversation: conversation, onDropdownClick: () => setListOpen((v) => !v), onEditClick: () => {
+    return (_jsx("div", { style: { position: "relative", height: "700px", background: "#f3f4f6" }, children: _jsxs(AiChatContainer, { isOpen: true, position: "float", floatHeight: "800px", width: "28rem", autoScroll: true, children: [_jsx(AiChatHeader, { slot: "header", isDraggable: true, mode: "agent", conversation: conversation, conversationItems: showcaseConversations, conversationActiveId: activeId, onConversationSelect: handleConversationSelect, onConversationDelete: (e) => console.log("delete:", e.detail), onEditClick: () => {
                         setActiveId("");
                         setConversation("محادثة جديدة");
-                        setListOpen(false);
-                    } }), listOpen && (_jsx("div", { style: {
-                        position: "absolute",
-                        inset: 0,
-                        top: "56px",
-                        zIndex: 10,
-                        background: "white",
-                        display: "flex",
-                        flexDirection: "column",
-                    }, children: _jsx(AiConversationList, { items: showcaseConversations, activeId: activeId, onConversationSelect: handleConversationSelect, onConversationDelete: (e) => console.log("delete:", e.detail) }) })), _jsxs("div", { style: {
+                    } }), _jsxs("div", { style: {
                         display: "flex",
                         flexDirection: "column",
                         gap: "0.75rem",
@@ -132,4 +137,128 @@ const ShowcaseConversationDemo = () => {
 export const ShowcaseConversation = {
     render: () => _jsx(ShowcaseConversationDemo, {}),
 };
+// ── AutoScroll Demo ─────────────────────────────────────────────────────────
+const agentReplies = [
+    "أهلاً! كيف أقدر أساعدك اليوم؟",
+    "بكل سرور، سأشرح لك الفرق بين الباقات.",
+    "باقة بلس مناسبة للمتاجر الصغيرة والمتوسطة.",
+    "باقة برو تدعم منتجات غير محدودة وعمولات أقل.",
+    "هل تريد مقارنة تفصيلية بين الباقتين؟",
+    "يمكنك الترقية من لوحة التحكم في أي وقت.",
+    "هل هناك شيء آخر أقدر أساعدك فيه؟",
+];
+const AutoScrollDemo = () => {
+    const [messages, setMessages] = useState([
+        { role: "agent", content: "أهلاً! كيف أقدر أساعدك اليوم؟", id: 0 },
+    ]);
+    const [replyIndex, setReplyIndex] = useState(1);
+    const [autoScroll, setAutoScroll] = useState(true);
+    const addUserMessage = () => {
+        const id = Date.now();
+        setMessages((prev) => [
+            ...prev,
+            { role: "user", content: `رسالة من المستخدم #${prev.length}`, id },
+        ]);
+        setTimeout(() => {
+            const reply = agentReplies[replyIndex % agentReplies.length];
+            setReplyIndex((i) => i + 1);
+            setMessages((prev) => [
+                ...prev,
+                { role: "agent", content: reply, id: id + 1 },
+            ]);
+        }, 600);
+    };
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", alignItems: "flex-start", padding: "1rem" }, children: [_jsxs("div", { style: { display: "flex", gap: "0.75rem", alignItems: "center" }, children: [_jsx("button", { onClick: addUserMessage, style: {
+                            padding: "8px 16px",
+                            background: "#004956",
+                            color: "white",
+                            border: "none",
+                            borderRadius: "8px",
+                            cursor: "pointer",
+                            fontFamily: "inherit",
+                        }, children: "\u0625\u0636\u0627\u0641\u0629 \u0631\u0633\u0627\u0644\u0629" }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: "6px", cursor: "pointer" }, children: [_jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => setAutoScroll(e.target.checked) }), "autoScroll"] })] }), _jsx("div", { style: { position: "relative", height: "400px", width: "28rem" }, children: _jsxs(AiChatContainer, { isOpen: true, position: "left", width: "28rem", autoScroll: autoScroll, children: [_jsx(AiChatHeader, { slot: "header", conversation: "\u0627\u062E\u062A\u0628\u0627\u0631 \u0627\u0644\u062A\u0645\u0631\u064A\u0631 \u0627\u0644\u062A\u0644\u0642\u0627\u0626\u064A" }), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: messages.map((m) => (_jsx(AiChatMessage, { role: m.role, content: m.content, agentName: m.role === "agent" ? "سلة AI" : undefined }, m.id))) })] }) })] }));
+};
+export const AutoScrollTest = {
+    render: () => _jsx(AutoScrollDemo, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Click **إضافة رسالة** repeatedly to append messages. With **autoScroll** checked the list scrolls to the bottom automatically. Uncheck it to see messages stay in place.',
+            },
+        },
+    },
+};
+// ── Loading (Skeleton) State ────────────────────────────────────────────────
+export const LoadingState = {
+    render: (args) => (_jsx("div", { style: { position: "relative", height: "600px", background: "#f3f4f6" }, children: _jsxs(AiChatContainer, { isOpen: args.isOpen, position: "float", width: "28rem", floatHeight: "600px", loading: args.loading, children: [_jsx(AiChatHeader, { slot: "header", titleLoading: true }), _jsx(AiMessageInput, { slot: "footer", disabled: true, placeholder: "\u062C\u0627\u0631\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644..." })] }) })),
+    args: {
+        isOpen: true,
+        loading: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'When `loading` is true, the messages area shows skeleton placeholder bubbles. The header also shows a shimmer skeleton via `titleLoading` on `AiChatHeader`.',
+            },
+        },
+    },
+};
+// ── Error State ─────────────────────────────────────────────────────────────
+const ErrorDemo = () => {
+    const [error, setError] = useState(true);
+    const [loading, setLoading] = useState(false);
+    const handleRetry = () => {
+        setError(false);
+        setLoading(true);
+        // Simulate a retry that fails after 2s
+        setTimeout(() => {
+            setLoading(false);
+            setError(true);
+        }, 2000);
+    };
+    return (_jsx("div", { style: { position: "relative", height: "600px", background: "#f3f4f6" }, children: _jsxs(AiChatContainer, { isOpen: true, position: "float", width: "28rem", floatHeight: "600px", error: error, loading: loading, errorText: "\u062A\u0639\u0630\u0651\u0631 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0645\u062D\u0627\u062F\u062B\u0629. \u062A\u062D\u0642\u0642 \u0645\u0646 \u0627\u062A\u0635\u0627\u0644\u0643 \u0628\u0627\u0644\u0625\u0646\u062A\u0631\u0646\u062A.", retryLabel: "\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629", onRetryClick: handleRetry, children: [_jsx(AiChatHeader, { slot: "header", conversation: "\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644", titleLoading: loading }), _jsx(AiMessageInput, { slot: "footer", disabled: true, placeholder: "\u063A\u064A\u0631 \u0645\u062A\u0627\u062D \u062D\u0627\u0644\u064A\u0627\u064B" })] }) }));
+};
+export const ErrorState = {
+    render: () => _jsx(ErrorDemo, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: 'When `error` is true, the messages area displays an error icon, message, and retry button. Clicking retry triggers the `retryClick` event. This demo simulates a retry that shows loading skeletons for 2 seconds then falls back to the error state again.',
+            },
+        },
+    },
+};
+// ── Loading → Loaded Transition ─────────────────────────────────────────────
+const LoadingTransitionDemo = () => {
+    const [loading, setLoading] = useState(true);
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+            alignItems: "flex-start",
+            padding: "1rem",
+        }, children: [_jsx("button", { onClick: () => setLoading((l) => !l), style: {
+                    padding: "8px 16px",
+                    background: "#004956",
+                    color: "white",
+                    border: "none",
+                    borderRadius: "8px",
+                    cursor: "pointer",
+                    fontFamily: "inherit",
+                }, children: loading ? "تم التحميل — إظهار الرسائل" : "إعادة التحميل" }), _jsx("div", { style: { position: "relative", height: "500px", width: "28rem" }, children: _jsxs(AiChatContainer, { isOpen: true, position: "left", width: "28rem", loading: loading, children: [_jsx(AiChatHeader, { slot: "header", conversation: "\u0627\u0646\u062A\u0642\u0627\u0644 \u0627\u0644\u062A\u062D\u0645\u064A\u0644", titleLoading: loading }), _jsxs("div", { style: {
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: "0.75rem",
+                            }, children: [_jsx(AiChatMessage, { role: "agent", content: "\u0623\u0647\u0644\u0627\u064B \u0648\u0633\u0647\u0644\u0627\u064B! \u0623\u0646\u0627 \u0645\u0633\u0627\u0639\u062F \u0633\u0644\u0629 \u0627\u0644\u0630\u0643\u064A \uD83E\uDD16", agentName: "\u0633\u0644\u0629 AI" }), _jsx(AiChatMessage, { role: "user", content: "\u0643\u064A\u0641 \u0623\u0631\u0642\u064A \u0628\u0627\u0642\u062A\u064A\u061F" }), _jsx(AiChatMessage, { role: "agent", content: "\u062A\u0631\u0642\u064A\u0629 \u0628\u0627\u0642\u062A\u0643 \u0633\u0647\u0644\u0629 \u0648\u0633\u0631\u064A\u0639\u0629! \u0627\u0630\u0647\u0628 \u0625\u0644\u0649 \u0627\u0644\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u2190 \u0627\u0644\u0628\u0627\u0642\u0629 \u0648\u0627\u0644\u0641\u0648\u062A\u0631\u0629.", agentName: "\u0633\u0644\u0629 AI" })] }), _jsx(AiMessageInput, { slot: "footer", disabled: loading, placeholder: loading ? "جاري التحميل..." : "اكتب رسالتك هنا..." })] }) })] }));
+};
+export const LoadingTransition = {
+    render: () => _jsx(LoadingTransitionDemo, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Toggle the button to switch between loading (skeleton) state and the actual conversation content. Demonstrates how the container transitions smoothly.',
+            },
+        },
+    },
+};
 //# sourceMappingURL=ai-chat-container.stories.js.map

package/dist/stories/ai-chat-container.stories.js.map

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

package/dist/stories/ai-chat-header.stories.d.ts

@@ -1,15 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { AiChatHeader } from '../generated/components';
+import type { Meta, StoryObj } from "@storybook/react";
+import { AiChatHeader } from "../components";
 declare const meta: Meta<typeof AiChatHeader>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const AgentMode: Story;
 export declare const HumanMode: Story;
 export declare const HumanWithoutBack: Story;
+export declare const BrowserMode: Story;
 /** Avatar fallback: no URL → shows first letter of agentName */
 export declare const AvatarFallback: Story;
 /** Status indicator variants: online (green), offline (gray), busy (red), away (amber) */
 export declare const StatusIndicatorVariants: Story;
 export declare const WithConversationList: Story;
-export declare const InChatContainer: Story;
+export declare const TitleLoading: Story;
 //# sourceMappingURL=ai-chat-header.stories.d.ts.map

package/dist/stories/ai-chat-header.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-chat-header.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ai-chat-header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAmB,YAAY,EAAqD,MAAM,yBAAyB,CAAC;AAE3H,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAwCnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,cAAc,EAAE,KAwC5B,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,uBAAuB,EAAE,KAwBrC,CAAC;AA6GF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgC7B,CAAC"}
+{"version":3,"file":"ai-chat-header.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ai-chat-header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAEL,YAAY,EAEb,MAAM,eAAe,CAAC;AAEvB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAiDnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,cAAc,EAAE,KAyC5B,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,uBAAuB,EAAE,KAiCrC,CAAC;AAyGF,eAAO,MAAM,oBAAoB,EAAE,KAUlC,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KA4B1B,CAAC"}

package/dist/stories/ai-chat-header.stories.js

@@ -1,160 +1,185 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { AiChatContainer, AiChatHeader, AiChatMessage, AiConversationList, AiMessageInput } from '../generated/components';
+import { useState } from "react";
+import { AiChatContainer, AiChatHeader, AiChatMessage, } from "../components";
 const meta = {
-    title: 'Chat/Chat Header',
+    title: "Chat/Chat Header",
     component: AiChatHeader,
-    tags: ['autodocs'],
+    tags: ["autodocs"],
     argTypes: {
         mode: {
-            control: { type: 'select' },
-            options: ['agent', 'human'],
-            description: 'Layout variant',
+            control: { type: "select" },
+            options: ["agent", "human", "browser"],
+            description: "Layout variant",
         },
         conversation: {
-            control: 'text',
-            description: 'Conversation title (agent mode)',
+            control: "text",
+            description: "Conversation title (agent mode)",
         },
         agentName: {
-            control: 'text',
-            description: 'Human agent name (human mode)',
+            control: "text",
+            description: "Human agent name (human mode)",
         },
         agentStatus: {
-            control: 'text',
-            description: 'Human agent status label (human mode); hidden when empty',
+            control: "text",
+            description: "Human agent status label (human mode); hidden when empty",
         },
         agentAvatar: {
-            control: 'text',
-            description: 'Human agent avatar URL; fallback to first letter of agentName when empty or broken',
+            control: "text",
+            description: "Human agent avatar URL; fallback to first letter of agentName when empty or broken",
         },
         showBack: {
-            control: 'boolean',
-            description: 'Show back button (human mode)',
+            control: "boolean",
+            description: "Show back button (human mode)",
+        },
+        pageTitle: {
+            control: "text",
+            description: "Page title displayed in the browser header (browser mode)",
+        },
+        pageUrl: {
+            control: "text",
+            description: "The external URL for the open-external button (browser mode)",
         },
         isDraggable: {
-            control: 'boolean',
-            description: 'Show drag handle (used when container is draggable)',
+            control: "boolean",
+            description: "Show drag handle (used when container is draggable)",
         },
         statusIndicator: {
-            control: { type: 'select' },
-            options: ['online', 'offline', 'busy', 'away'],
-            description: 'Online-dot color variant (human mode)',
+            control: { type: "select" },
+            options: ["online", "offline", "busy", "away"],
+            description: "Online-dot color variant (human mode)",
         },
     },
 };
 export default meta;
 export const AgentMode = {
-    render: (args) => (_jsx(AiChatHeader, { mode: args.mode, conversation: args.conversation, isDraggable: args.isDraggable, onCloseClick: () => console.log('Close clicked'), onEditClick: () => console.log('Edit clicked'), onDropdownClick: () => console.log('Dropdown clicked') })),
+    render: (args) => (_jsx(AiChatHeader, { mode: args.mode, conversation: args.conversation, isDraggable: args.isDraggable, onCloseClick: () => console.log("Close clicked"), onEditClick: () => console.log("Edit clicked"), onDropdownClick: () => console.log("Dropdown clicked") })),
     args: {
-        mode: 'agent',
-        conversation: 'محادثة جديدة',
+        mode: "agent",
+        conversation: "محادثة جديدة",
         isDraggable: true,
     },
 };
 export const HumanMode = {
-    render: (args) => (_jsx(AiChatHeader, { mode: args.mode, agentName: args.agentName, agentStatus: args.agentStatus, agentAvatar: args.agentAvatar, showBack: args.showBack, statusIndicator: args.statusIndicator, onCloseClick: () => console.log('Close clicked'), onBackClick: () => console.log('Back clicked') })),
+    render: (args) => (_jsx(AiChatHeader, { mode: args.mode, agentName: args.agentName, agentStatus: args.agentStatus, agentAvatar: args.agentAvatar, showBack: args.showBack, statusIndicator: args.statusIndicator, onCloseClick: () => console.log("Close clicked"), onBackClick: () => console.log("Back clicked") })),
     args: {
-        mode: 'human',
-        agentName: 'هلا',
-        agentStatus: 'Active',
-        agentAvatar: 'https://i.pravatar.cc/40?img=5',
+        mode: "human",
+        agentName: "هلا",
+        agentStatus: "Active",
+        agentAvatar: "https://i.pravatar.cc/40?img=5",
         showBack: true,
-        statusIndicator: 'online',
+        statusIndicator: "online",
     },
 };
 export const HumanWithoutBack = {
-    render: (args) => (_jsx(AiChatHeader, { mode: args.mode, agentName: args.agentName, agentStatus: args.agentStatus, agentAvatar: args.agentAvatar, showBack: args.showBack, isDraggable: args.isDraggable, statusIndicator: args.statusIndicator, onCloseClick: () => console.log('Close clicked') })),
+    render: (args) => (_jsx(AiChatHeader, { mode: args.mode, agentName: args.agentName, agentStatus: args.agentStatus, agentAvatar: args.agentAvatar, showBack: args.showBack, isDraggable: args.isDraggable, statusIndicator: args.statusIndicator, onCloseClick: () => console.log("Close clicked") })),
     args: {
-        mode: 'human',
-        agentName: 'هلا',
-        agentStatus: 'Active',
-        agentAvatar: 'https://i.pravatar.cc/40?img=5',
+        mode: "human",
+        agentName: "هلا",
+        agentStatus: "Active",
+        agentAvatar: "https://i.pravatar.cc/40?img=5",
         showBack: false,
         isDraggable: true,
-        statusIndicator: 'online',
+        statusIndicator: "online",
+    },
+};
+export const BrowserMode = {
+    render: (args) => (_jsx(AiChatHeader, { mode: "browser", pageTitle: args.pageTitle, pageUrl: args.pageUrl, isDraggable: args.isDraggable, onBackClick: () => console.log("Back / Close browser clicked"), onOpenExternal: (e) => console.log("Open external:", e.detail) })),
+    args: {
+        mode: "browser",
+        pageTitle: "تفاصيل الطلب #12345",
+        pageUrl: "https://example.com/order/12345",
+        isDraggable: false,
     },
 };
 /** Avatar fallback: no URL → shows first letter of agentName */
 export const AvatarFallback = {
-    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx(AiChatHeader, { mode: "human", agentName: "\u0645\u062D\u0645\u062F", agentStatus: "\u0645\u062A\u0635\u0644", agentAvatar: "", showBack: true, statusIndicator: "online", onCloseClick: () => console.log('close'), onBackClick: () => console.log('back') }), _jsx(AiChatHeader, { mode: "human", agentName: "\u0633\u0627\u0631\u0629", agentStatus: "", agentAvatar: "", showBack: false, statusIndicator: "busy", onCloseClick: () => console.log('close') }), _jsx(AiChatHeader, { mode: "human", agentName: "\u0647\u0644\u0627", agentAvatar: "https://broken-url-that-will-404.example/img.png", showBack: true, statusIndicator: "away", onCloseClick: () => console.log('close'), onBackClick: () => console.log('back') })] })),
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(AiChatHeader, { mode: "human", agentName: "\u0645\u062D\u0645\u062F", agentStatus: "\u0645\u062A\u0635\u0644", agentAvatar: "", showBack: true, statusIndicator: "online", onCloseClick: () => console.log("close"), onBackClick: () => console.log("back") }), _jsx(AiChatHeader, { mode: "human", agentName: "\u0633\u0627\u0631\u0629", agentStatus: "", agentAvatar: "", showBack: false, statusIndicator: "busy", onCloseClick: () => console.log("close") }), _jsx(AiChatHeader, { mode: "human", agentName: "\u0647\u0644\u0627", agentAvatar: "https://broken-url-that-will-404.example/img.png", showBack: true, statusIndicator: "away", onCloseClick: () => console.log("close"), onBackClick: () => console.log("back") })] })),
     parameters: {
         docs: {
             description: {
-                story: 'When `agentAvatar` is empty or the image fails to load, a fallback div showing the first letter of `agentName` is rendered. `agentStatus` is hidden when blank.',
+                story: "When `agentAvatar` is empty or the image fails to load, a fallback div showing the first letter of `agentName` is rendered. `agentStatus` is hidden when blank.",
             },
         },
     },
 };
 /** Status indicator variants: online (green), offline (gray), busy (red), away (amber) */
 export const StatusIndicatorVariants = {
-    render: () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: ['online', 'offline', 'busy', 'away'].map(status => (_jsx(AiChatHeader, { mode: "human", agentName: "\u0647\u0644\u0627", agentStatus: status === 'online' ? 'متصل الآن' : status === 'offline' ? 'غير متصل' : status === 'busy' ? 'مشغول' : 'بعيد', agentAvatar: "https://i.pravatar.cc/40?img=5", showBack: false, statusIndicator: status, onCloseClick: () => console.log('close') }, status))) })),
+    render: () => (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: ["online", "offline", "busy", "away"].map((status) => (_jsx(AiChatHeader, { mode: "human", agentName: "\u0647\u0644\u0627", agentStatus: status === "online"
+                ? "متصل الآن"
+                : status === "offline"
+                    ? "غير متصل"
+                    : status === "busy"
+                        ? "مشغول"
+                        : "بعيد", agentAvatar: "https://i.pravatar.cc/40?img=5", showBack: false, statusIndicator: status, onCloseClick: () => console.log("close") }, status))) })),
     parameters: {
         docs: {
             description: {
-                story: '`statusIndicator` controls the online-dot color: **online** = green, **offline** = gray, **busy** = red, **away** = amber.',
+                story: "`statusIndicator` controls the online-dot color: **online** = green, **offline** = gray, **busy** = red, **away** = amber.",
             },
         },
     },
 };
-const conversations = JSON.stringify([
+const conversations = [
     {
-        id: '1',
-        title: 'مساعدة في كتابة تقرير',
-        preview: 'أحتاج إلى مساعدة في كتابة تقرير عن أداء المبيعات للربع الثالث',
+        id: "1",
+        title: "مساعدة في كتابة تقرير",
+        preview: "أحتاج إلى مساعدة في كتابة تقرير عن أداء المبيعات للربع الثالث",
         timestamp: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
         rating: 5,
     },
     {
-        id: '2',
-        title: 'تحليل البيانات',
-        preview: 'هل يمكنك مساعدتي في تحليل هذه البيانات وإخراج تقرير مختصر؟',
+        id: "2",
+        title: "تحليل البيانات",
+        preview: "هل يمكنك مساعدتي في تحليل هذه البيانات وإخراج تقرير مختصر؟",
         timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
         rating: 3,
     },
     {
-        id: '3',
-        title: 'استفسار عن المنتجات',
-        preview: 'أريد معرفة المزيد عن المنتجات المتاحة وأسعارها وطرق الشحن',
+        id: "3",
+        title: "استفسار عن المنتجات",
+        preview: "أريد معرفة المزيد عن المنتجات المتاحة وأسعارها وطرق الشحن",
         timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
         rating: null,
     },
     {
-        id: '4',
-        title: 'دعم فني',
-        preview: 'واجهت مشكلة في تسجيل الدخول ولا أستطيع إعادة تعيين كلمة المرور',
+        id: "4",
+        title: "دعم فني",
+        preview: "واجهت مشكلة في تسجيل الدخول ولا أستطيع إعادة تعيين كلمة المرور",
         timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
         rating: 2,
     },
-]);
+];
 const WithConversationListDemo = () => {
-    const [listOpen, setListOpen] = useState(false);
-    const [activeId, setActiveId] = useState('1');
-    const [conversation, setConversation] = useState('مساعدة في كتابة تقرير');
+    const [activeId, setActiveId] = useState("1");
+    const [conversation, setConversation] = useState("مساعدة في كتابة تقرير");
     const handleSelect = (e) => {
         const id = e.detail;
         if (!id) {
-            setActiveId('');
-            setConversation('محادثة جديدة');
+            setActiveId("");
+            setConversation("محادثة جديدة");
         }
         else {
-            const item = JSON.parse(conversations).find((c) => c.id === id);
+            const item = conversations.find((c) => c.id === id);
             setActiveId(id);
-            setConversation(item?.title ?? '');
+            setConversation(item?.title ?? "");
         }
-        setListOpen(false);
     };
     const handleDelete = (e) => {
-        console.log('delete:', e.detail);
+        console.log("delete:", e.detail);
     };
-    return (_jsx("div", { style: { position: 'relative', height: '600px', background: '#f3f4f6', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '2rem' }, children: _jsxs("div", { style: { width: '28rem', borderRadius: '16px', overflow: 'hidden', boxShadow: '0 4px 24px rgba(0,0,0,0.10)', background: 'white', display: 'flex', flexDirection: 'column', height: '520px', position: 'relative' }, children: [_jsx(AiChatHeader, { mode: "agent", conversation: conversation, onDropdownClick: () => setListOpen(v => !v), onEditClick: () => { setActiveId(''); setConversation('محادثة جديدة'); setListOpen(false); }, onCloseClick: () => console.log('close') }), listOpen && (_jsx("div", { style: {
-                        position: 'absolute',
-                        inset: 0,
-                        top: '56px', // below header
-                        zIndex: 10,
-                        background: 'white',
-                        display: 'flex',
-                        flexDirection: 'column',
-                    }, children: _jsx(AiConversationList, { items: conversations, activeId: activeId, onConversationSelect: handleSelect, onConversationDelete: handleDelete }) })), _jsxs("div", { style: { flex: 1, padding: '1rem', display: 'flex', flexDirection: 'column', gap: '0.75rem', overflowY: 'auto' }, children: [_jsx(AiChatMessage, { role: "agent", content: "\u0623\u0647\u0644\u0627\u064B! \u0643\u064A\u0641 \u0623\u0642\u062F\u0631 \u0623\u0633\u0627\u0639\u062F\u0643 \u0627\u0644\u064A\u0648\u0645\u061F", agentName: "\u0633\u0644\u0629 AI", timestamp: new Date(Date.now() - 120000).toISOString(), showActions: true }), _jsx(AiChatMessage, { role: "user", content: "\u0623\u062D\u062A\u0627\u062C \u0645\u0633\u0627\u0639\u062F\u0629 \u0641\u064A \u062A\u0642\u0631\u064A\u0631 \u0627\u0644\u0645\u0628\u064A\u0639\u0627\u062A", timestamp: new Date(Date.now() - 60000).toISOString() })] }), _jsx("div", { style: { padding: '0 8px 8px', flexShrink: 0 }, children: _jsx(AiMessageInput, { placeholder: "\u0627\u0643\u062A\u0628 \u0631\u0633\u0627\u0644\u062A\u0643..." }) })] }) }));
+    return (_jsx("div", { style: {
+            height: "600px",
+        }, children: _jsxs(AiChatContainer, { isOpen: true, position: "right", width: "32rem", children: [_jsx(AiChatHeader, { slot: "header", mode: "agent", conversation: conversation, conversationItems: conversations, conversationActiveId: activeId, onConversationSelect: handleSelect, onConversationDelete: handleDelete, onEditClick: () => {
+                        setActiveId("");
+                        setConversation("محادثة جديدة");
+                    }, onCloseClick: () => console.log("close") }), _jsxs("div", { style: {
+                        flex: 1,
+                        padding: "1rem",
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "0.75rem",
+                        overflowY: "auto",
+                    }, children: [_jsx(AiChatMessage, { role: "agent", content: "\u0623\u0647\u0644\u0627\u064B! \u0643\u064A\u0641 \u0623\u0642\u062F\u0631 \u0623\u0633\u0627\u0639\u062F\u0643 \u0627\u0644\u064A\u0648\u0645\u061F", agentName: "\u0633\u0644\u0629 AI", timestamp: new Date(Date.now() - 120000).toISOString(), showActions: true }), _jsx(AiChatMessage, { role: "user", content: "\u0623\u062D\u062A\u0627\u062C \u0645\u0633\u0627\u0639\u062F\u0629 \u0641\u064A \u062A\u0642\u0631\u064A\u0631 \u0627\u0644\u0645\u0628\u064A\u0639\u0627\u062A", timestamp: new Date(Date.now() - 60000).toISOString() })] })] }) }));
 };
 export const WithConversationList = {
     render: () => _jsx(WithConversationListDemo, {}),
@@ -166,7 +191,24 @@ export const WithConversationList = {
         },
     },
 };
-export const InChatContainer = {
-    render: () => (_jsx("div", { style: { position: 'relative', height: '600px', background: '#f3f4f6' }, children: _jsx(AiChatContainer, { isOpen: true, position: "right", width: "32rem", children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', background: 'white' }, children: [_jsx(AiChatHeader, { mode: "agent", conversation: "\u0645\u062D\u0627\u062F\u062B\u0629 \u0645\u0639 \u0627\u0644\u0645\u0633\u0627\u0639\u062F \u0627\u0644\u0630\u0643\u064A", onCloseClick: () => console.log('Close clicked'), onEditClick: () => console.log('Edit clicked'), onDropdownClick: () => console.log('Dropdown clicked') }), _jsxs("div", { style: { flex: 1, padding: '1rem', display: 'flex', flexDirection: 'column', gap: '1rem', overflowY: 'auto' }, children: [_jsx(AiChatMessage, { role: "user", content: "\u0645\u0631\u062D\u0628\u0627\u064B\u060C \u0643\u064A\u0641 \u064A\u0645\u0643\u0646\u0646\u064A \u0627\u0644\u0645\u0633\u0627\u0639\u062F\u0629\u061F", timestamp: new Date(Date.now() - 300000).toISOString() }), _jsx(AiChatMessage, { role: "assistant", content: "\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643! \u0623\u0646\u0627 \u0647\u0646\u0627 \u0644\u0645\u0633\u0627\u0639\u062F\u062A\u0643. \u0645\u0627 \u0627\u0644\u0630\u064A \u062A\u062D\u062A\u0627\u062C \u0625\u0644\u064A\u0647 \u0627\u0644\u064A\u0648\u0645\u061F", timestamp: new Date().toISOString(), showActions: true })] }), _jsx("div", { style: { padding: '1rem', borderTop: '1px solid #e5e7eb' }, children: _jsx(AiMessageInput, { placeholder: "\u0627\u0643\u062A\u0628 \u0631\u0633\u0627\u0644\u062A\u0643..." }) })] }) }) })),
+// ── Title Loading State ─────────────────────────────────────────────────────
+export const TitleLoading = {
+    render: (args) => (_jsx(AiChatHeader, { mode: "agent", titleLoading: args.titleLoading, conversation: "\u0645\u062D\u0627\u062F\u062B\u0629 \u062C\u062F\u064A\u062F\u0629", isDraggable: true, onCloseClick: () => console.log("Close clicked"), onEditClick: () => console.log("Edit clicked") })),
+    args: {
+        titleLoading: true,
+    },
+    argTypes: {
+        titleLoading: {
+            control: "boolean",
+            description: "Show a shimmer skeleton in place of the conversation title",
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'When `titleLoading` is true, a shimmer skeleton replaces the conversation title and the dropdown chevron is hidden. Toggle the control to see the transition.',
+            },
+        },
+    },
 };
 //# sourceMappingURL=ai-chat-header.stories.js.map