indas-ui 0.0.1 → 0.1.1

package/dist/cjs/components/messaging/messaging-panel-content.js

@@ -0,0 +1,69 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessagingPanelContent = MessagingPanelContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const navigation_1 = require("next/navigation");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+const react_2 = require("next-auth/react");
+const MessagingContext_1 = require("../../contexts/MessagingContext.js");
+const messaging_1 = require("../../lib/api/activity/messaging/messaging.js");
+const conversation_list_1 = require("./conversation-list.js");
+const ui_1 = require("../ui/index.js");
+function MessagingPanelContent({ onClose }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const { data: session } = (0, react_2.useSession)();
+    const { state, actions } = (0, MessagingContext_1.useMessaging)();
+    const router = (0, navigation_1.useRouter)();
+    const currentUserId = String(session?.user?.UserID || session?.user?.userID || '');
+    // Fetch conversations on mount if not already loaded
+    (0, react_1.useEffect)(() => {
+        if (state.conversations.length === 0) {
+            actions.fetchConversations();
+        }
+    }, [state.conversations.length, actions]);
+    // Sort by recent, take top 8
+    const recentConversations = (0, react_1.useMemo)(() => {
+        return [...state.conversations]
+            .sort((a, b) => {
+            const aTime = a.LastMessageAt ? new Date(a.LastMessageAt).getTime() : 0;
+            const bTime = b.LastMessageAt ? new Date(b.LastMessageAt).getTime() : 0;
+            return bTime - aTime;
+        })
+            .slice(0, 8);
+    }, [state.conversations]);
+    const handleConvClick = (0, react_1.useCallback)((roomId) => {
+        router.push(`/activity/messages?conv=${roomId}`);
+        onClose();
+    }, [router, onClose]);
+    const handleViewAll = (0, react_1.useCallback)(() => {
+        router.push('/activity/messages');
+        onClose();
+    }, [router, onClose]);
+    const handleNewMessage = (0, react_1.useCallback)(() => {
+        router.push('/activity/messages');
+        onClose();
+    }, [router, onClose]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 border-b border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: t('Recent') }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "ghost", size: "sm", onClick: () => actions.fetchConversations(), disabled: state.loadingConversations, className: "p-1.5", title: t('Refresh'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: (0, utils_1.cn)('h-4 w-4', state.loadingConversations && 'animate-spin') }) }), (0, jsx_runtime_1.jsxs)(ui_1.Button, { size: "sm", onClick: handleNewMessage, className: "h-8 px-3", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "h-3.5 w-3.5 mr-1" }), t('New Chat')] })] })] }), state.totalUnreadCount > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: [state.totalUnreadCount, " ", t('unread')] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "max-h-[500px] overflow-y-auto", children: state.loadingConversations ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-1 p-2", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 px-3 py-2 animate-pulse", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 rounded-full bg-[rgb(var(--bg-subtle))]" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 space-y-1.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-3 w-20 rounded bg-[rgb(var(--bg-subtle))]" }), (0, jsx_runtime_1.jsx)("div", { className: "h-2.5 w-32 rounded bg-[rgb(var(--bg-subtle))]" })] })] }, i))) })) : recentConversations.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { className: "w-8 h-8 mb-2 opacity-20" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium mb-1", children: t('No messages yet') }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs", children: t('Start a conversation') })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "divide-y divide-[rgb(var(--bd-subtle))]", children: recentConversations.map(room => {
+                        const unread = state.unreadCounts[room.RoomID] || 0;
+                        const displayName = (() => {
+                            if (room.Type === 'DM') {
+                                const participants = (0, messaging_1.parseParticipants)(room.Participants);
+                                const other = participants.find(p => String(p.userId) !== currentUserId);
+                                return other?.userName || room.Name || t('Direct Message');
+                            }
+                            return room.Name || t('Unnamed');
+                        })();
+                        const avatarId = room.Type === 'DM'
+                            ? (() => {
+                                const participants = (0, messaging_1.parseParticipants)(room.Participants);
+                                const other = participants.find(p => String(p.userId) !== currentUserId);
+                                return String(other?.userId || room.RoomID);
+                            })()
+                            : String(room.RoomID);
+                        return ((0, jsx_runtime_1.jsxs)("div", { onClick: () => handleConvClick(room.RoomID), className: (0, utils_1.cn)('flex items-start gap-3 p-3 hover:bg-[rgb(var(--bg-hover))] transition-colors cursor-pointer', unread > 0 && 'bg-[rgb(var(--bg-subtle))]'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-medium flex-shrink-0', (0, conversation_list_1.getAvatarColor)(avatarId)), children: room.Type === 'Channel' ? '#' : (0, conversation_list_1.getInitials)(displayName) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2 mb-0.5", children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-sm truncate', unread > 0 ? 'font-semibold text-[rgb(var(--fg-default))]' : 'font-medium text-[rgb(var(--fg-muted))]'), children: displayName }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))] flex-shrink-0", children: (0, conversation_list_1.formatRelativeTime)(room.LastMessageAt) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-xs truncate', unread > 0 ? 'text-[rgb(var(--fg-default))]' : 'text-[rgb(var(--fg-muted))]'), children: room.LastMessagePreview || t('No messages') }), unread > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "flex-shrink-0 min-w-[1.125rem] h-[1.125rem] px-1 rounded-full bg-[rgb(var(--color-primary))] text-white text-[0.625rem] font-bold flex items-center justify-center", children: unread > 99 ? '99+' : unread }))] })] })] }, room.RoomID));
+                    }) })) }), (0, jsx_runtime_1.jsx)("div", { className: "p-3 border-t border-[rgb(var(--bd-subtle))] bg-[rgb(var(--bg-subtle))]", children: (0, jsx_runtime_1.jsx)("button", { onClick: handleViewAll, className: "block w-full text-center text-sm text-[rgb(var(--color-primary))] hover:text-[rgb(var(--color-primary-hover))] font-medium transition-colors py-1", children: t('View All Messages') }) })] }));
+}

package/dist/cjs/components/messaging/thread-panel.js

@@ -0,0 +1,50 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThreadPanel = ThreadPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+const MessagingContext_1 = require("../../contexts/MessagingContext.js");
+const message_bubble_1 = require("./message-bubble.js");
+const message_input_1 = require("./message-input.js");
+const messaging_1 = require("../../lib/api/activity/messaging/messaging.js");
+function ThreadPanel({ parentMessageId, room, currentUserId, onClose, className }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const { state, actions } = (0, MessagingContext_1.useMessaging)();
+    const endRef = (0, react_1.useRef)(null);
+    const threadMessages = state.threadMessages[parentMessageId] || [];
+    const allRoomMessages = state.messages[room.RoomID] || [];
+    const parentMessage = allRoomMessages.find(m => m.MessageID === parentMessageId);
+    const senderNames = (0, react_1.useMemo)(() => {
+        const participants = (0, messaging_1.parseParticipants)(room.Participants);
+        const map = {};
+        for (const p of participants) {
+            map[p.userId] = p.userName;
+        }
+        return map;
+    }, [room.Participants]);
+    // Fetch thread on mount
+    (0, react_1.useEffect)(() => {
+        actions.fetchThreadReplies(parentMessageId);
+    }, [parentMessageId, actions]);
+    // Scroll to bottom on new replies
+    (0, react_1.useEffect)(() => {
+        endRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [threadMessages.length]);
+    const handleSend = (0, react_1.useCallback)((content, attachments) => {
+        const request = { Content: content };
+        if (attachments) {
+            request.AttachmentsJson = JSON.stringify(attachments);
+        }
+        actions.replyToMessage(parentMessageId, request);
+    }, [parentMessageId, actions]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex flex-col h-full border-l border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: t('Thread') }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "w-7 h-7 rounded-lg flex items-center justify-center text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-4 h-4" }) })] }), parentMessage && ((0, jsx_runtime_1.jsx)("div", { className: "border-b border-[rgb(var(--bd-default))] py-2", children: (0, jsx_runtime_1.jsx)(message_bubble_1.MessageBubble, { message: parentMessage, isOwn: String(parentMessage.UserID) === currentUserId, senderName: senderNames[parentMessage.UserID] || `User ${parentMessage.UserID}`, showSender: true, onReply: () => { }, onReact: (id, emoji) => actions.toggleReaction(id, emoji), onEdit: (id, content) => actions.editMessage(id, content), onDelete: (id) => actions.deleteMessage(id), currentUserId: Number(currentUserId) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-y-auto py-2", children: [state.loadingThread ? ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center py-8", children: (0, jsx_runtime_1.jsx)("div", { className: "w-6 h-6 border-2 border-[rgb(var(--color-primary))] border-t-transparent rounded-full animate-spin" }) })) : threadMessages.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center justify-center py-8 text-[rgb(var(--fg-muted))]", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: t('No replies yet') }) })) : (threadMessages.map((msg, idx) => {
+                        const prev = idx > 0 ? threadMessages[idx - 1] : null;
+                        const showSender = !prev || prev.UserID !== msg.UserID;
+                        const isOwn = String(msg.UserID) === currentUserId;
+                        return ((0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: Math.min(msg.ReplyDepth * 16, 48) }, children: (0, jsx_runtime_1.jsx)(message_bubble_1.MessageBubble, { message: msg, isOwn: isOwn, senderName: senderNames[msg.UserID] || `User ${msg.UserID}`, showSender: showSender, onReply: () => { }, onReact: (id, emoji) => actions.toggleReaction(id, emoji), onEdit: (id, content) => actions.editMessage(id, content), onDelete: (id) => actions.deleteMessage(id), currentUserId: Number(currentUserId) }) }, msg.MessageID));
+                    })), (0, jsx_runtime_1.jsx)("div", { ref: endRef })] }), (0, jsx_runtime_1.jsx)(message_input_1.MessageInput, { onSend: handleSend, onUploadFile: actions.uploadFile, disabled: state.sendingMessage, placeholder: t('Reply in thread...') })] }));
+}

package/dist/cjs/components/modals/3DModal.js

@@ -0,0 +1,35 @@
+'use client';
+/**
+ * 3D Modal
+ * Preview card with inline Three.js content + expand to fullscreen modal.
+ * The 3D content renders directly in the preview card and also in the expanded modal.
+ *
+ * Usage:
+ *   <ThreeDModal title={t('Box View')} previewHeight="13.75rem" details={[...]}
+ *     renderContent={() => <ShipperBox3D ... className="w-full h-full" />}
+ *   />
+ */
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThreeDModal = ThreeDModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("../ui/index.js");
+const lucide_react_1 = require("lucide-react");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+function ThreeDModal({ title, children, renderContent, placeholder, hasData = true, previewHeight = '13.75rem', className = '', details, headerActions, onRefresh, }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const handleOpen = (0, react_1.useCallback)(() => {
+        if (hasData)
+            setIsOpen(true);
+    }, [hasData]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+    }, []);
+    // 3D content — rendered in both preview and expanded modal
+    const previewContent = hasData ? (renderContent ? renderContent() : children) : null;
+    const expandedContent = isOpen && hasData ? (renderContent ? renderContent() : children) : null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `border border-[rgb(var(--bd-default))] rounded bg-[rgb(var(--bg-surface))] flex flex-col overflow-hidden ${className}`, style: { height: previewHeight }, children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] flex-shrink-0", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))] truncate", children: title }), hasData && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [headerActions, onRefresh && ((0, jsx_runtime_1.jsx)("button", { onClick: onRefresh, className: "p-0.5 rounded hover:bg-[rgb(var(--bg-hover))] transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]", title: t('Refresh 3D view'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { className: "h-3.5 w-3.5" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleOpen, className: "p-0.5 rounded hover:bg-[rgb(var(--bg-hover))] transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]", title: t('Expand'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { className: "h-3.5 w-3.5" }) })] }))] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0", children: previewContent ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full h-full", children: previewContent })) : ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-full flex flex-col items-center justify-center gap-1.5 text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Box, { className: "h-6 w-6 opacity-40" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs", children: placeholder || t('No data to display') })] })) })] }), (0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: isOpen, onOpenChange: handleClose, children: (0, jsx_runtime_1.jsxs)(ui_1.DialogContent, { className: "flex flex-col p-0 bg-[rgb(var(--bg-surface))] z-[100] overflow-hidden w-[90vw] max-w-[90vw] h-[90vh]", hideCloseButton: true, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-4 md:px-6 py-2.5 border-b border-[rgb(var(--bd-default))] flex-shrink-0 bg-[rgb(var(--bg-surface))]", children: [(0, jsx_runtime_1.jsx)(ui_1.DialogTitle, { className: "flex-shrink-0", children: title || t('3D View') }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [headerActions, onRefresh && ((0, jsx_runtime_1.jsx)("button", { onClick: onRefresh, className: "p-1 rounded hover:bg-[rgb(var(--bg-hover))] transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]", title: t('Refresh 3D view'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { className: "h-4 w-4" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleClose, className: "close-btn-md flex-shrink-0", "aria-label": t('Close'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }), details && details.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "px-6 py-2 bg-[rgb(var(--bg-subtle))] border-b border-[rgb(var(--bd-default))] flex-shrink-0", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-x-5 gap-y-1 text-xs text-[rgb(var(--fg-default))]", children: details.map((detail, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "font-medium text-[rgb(var(--fg-muted))]", children: [detail.label, ":"] }), (0, jsx_runtime_1.jsx)("span", { className: "font-normal", children: detail.value })] }, index))) }) })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0 bg-[rgb(var(--bg-surface))]", children: expandedContent && ((0, jsx_runtime_1.jsx)("div", { className: "w-full h-full", children: expandedContent })) })] }) })] }));
+}