nucleus-core-ts 0.9.166 → 0.9.167

package/dist/fe/components/ChatPanel/components/ChatPanel.d.ts

@@ -1,3 +1,3 @@
-import type { ReactElement } from 'react';
+import { type ReactElement } from 'react';
 import type { ChatPanelProps } from '../types';
 export declare function ChatPanel(props: ChatPanelProps): ReactElement;

package/dist/fe/components/ChatPanel/components/ChatPanel.js

@@ -1,16 +1,27 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { cn } from '../../../utils/cn';
 import { useChat } from '../hooks/useChat';
 import { chatPanelTheme } from '../theme';
 import { ConversationList } from './ConversationList';
 import { MessageComposer } from './MessageComposer';
 import { MessageThread } from './MessageThread';
+import { NewConversationModal } from './NewConversationModal';
 export function ChatPanel(props) {
     const theme = chatPanelTheme;
     const chat = useChat(props);
     const { store } = chat;
+    const [pickerOpen, setPickerOpen] = useState(false);
     const active = store.conversations.find((c)=>c.id === store.activeConversationId) ?? null;
+    const handleNewConversation = ()=>{
+        if (props.directory) setPickerOpen(true);
+        else props.onNewConversation?.();
+    };
+    const handleStartDirect = (userId)=>{
+        chat.startDirect(userId);
+        setPickerOpen(false);
+    };
     const handleSendFiles = (files, text)=>{
         const conversationId = store.activeConversationId;
         if (!conversationId) return;
@@ -51,10 +62,10 @@ export function ChatPanel(props) {
                                 className: theme.sidebar.title,
                                 children: props.title ?? 'Messages'
                             }),
-                            props.onNewConversation && /*#__PURE__*/ _jsx("button", {
+                            (props.directory || props.onNewConversation) && /*#__PURE__*/ _jsx("button", {
                                 type: "button",
                                 className: theme.sidebar.newButton,
-                                onClick: props.onNewConversation,
+                                onClick: handleNewConversation,
                                 "aria-label": "New conversation",
                                 children: /*#__PURE__*/ _jsxs("svg", {
                                     className: "h-4 w-4",
@@ -106,6 +117,15 @@ export function ChatPanel(props) {
                         className: theme.error,
                         children: store.error
                     }),
+                    props.directory && /*#__PURE__*/ _jsx(NewConversationModal, {
+                        open: pickerOpen,
+                        directory: props.directory,
+                        currentUserId: props.currentUserId,
+                        theme: theme,
+                        isCreating: props.actions.createConversation.state.isPending,
+                        onClose: ()=>setPickerOpen(false),
+                        onStartDirect: handleStartDirect
+                    }),
                     active && /*#__PURE__*/ _jsx(MessageComposer, {
                         theme: theme,
                         value: store.composerText,

package/dist/fe/components/ChatPanel/components/NewConversationModal.d.ts

@@ -0,0 +1,17 @@
+import { type ReactElement } from 'react';
+import type { ChatPanelTheme } from '../theme';
+import type { ChatDirectoryUser } from '../types';
+type NewConversationModalProps = {
+    open: boolean;
+    directory: ChatDirectoryUser[];
+    currentUserId: string;
+    theme: ChatPanelTheme;
+    isCreating: boolean;
+    title?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    onClose: () => void;
+    onStartDirect: (userId: string) => void;
+};
+export declare function NewConversationModal({ open, directory, currentUserId, theme, isCreating, title, searchPlaceholder, emptyLabel, onClose, onStartDirect, }: NewConversationModalProps): ReactElement | null;
+export {};

package/dist/fe/components/ChatPanel/components/NewConversationModal.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../../../utils/cn';
+import { initialsOf } from '../helpers';
+export function NewConversationModal({ open, directory, currentUserId, theme, isCreating, title = 'New message', searchPlaceholder = 'Search people...', emptyLabel = 'No people found', onClose, onStartDirect }) {
+    const [query, setQuery] = useState('');
+    if (!open) return null;
+    const normalized = query.trim().toLowerCase();
+    const people = directory.filter((person)=>person.userId !== currentUserId).filter((person)=>normalized ? person.name.toLowerCase().includes(normalized) || (person.subtitle?.toLowerCase().includes(normalized) ?? false) : true);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: theme.picker.overlay,
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                "aria-label": "Close",
+                className: "absolute inset-0 h-full w-full cursor-default",
+                onClick: onClose
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: cn('relative', theme.picker.panel),
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-label": title,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: theme.picker.header,
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: theme.picker.title,
+                                children: title
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                className: theme.picker.closeButton,
+                                onClick: onClose,
+                                "aria-label": "Close",
+                                children: /*#__PURE__*/ _jsxs("svg", {
+                                    className: "h-4 w-4",
+                                    fill: "none",
+                                    viewBox: "0 0 24 24",
+                                    stroke: "currentColor",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("title", {
+                                            children: "Close"
+                                        }),
+                                        /*#__PURE__*/ _jsx("path", {
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round",
+                                            strokeWidth: 2,
+                                            d: "M6 18L18 6M6 6l12 12"
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.picker.searchWrap,
+                        children: /*#__PURE__*/ _jsx("input", {
+                            type: "text",
+                            className: theme.picker.search,
+                            placeholder: searchPlaceholder,
+                            value: query,
+                            onChange: (event)=>setQuery(event.target.value)
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.picker.list,
+                        children: people.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                            className: theme.picker.empty,
+                            children: emptyLabel
+                        }) : people.map((person)=>/*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                className: theme.picker.item,
+                                disabled: isCreating,
+                                onClick: ()=>onStartDirect(person.userId),
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: theme.picker.avatar,
+                                        children: person.avatarUrl ? /*#__PURE__*/ _jsx("img", {
+                                            src: person.avatarUrl,
+                                            alt: person.name,
+                                            className: "h-full w-full rounded-full object-cover"
+                                        }) : initialsOf(person.name)
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: "min-w-0 flex-1",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: cn('block', theme.picker.name),
+                                                children: person.name
+                                            }),
+                                            person.subtitle && /*#__PURE__*/ _jsx("span", {
+                                                className: cn('block', theme.picker.subtitle),
+                                                children: person.subtitle
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, person.userId))
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/ChatPanel/index.d.ts

@@ -2,7 +2,8 @@ export { ChatPanel } from './components/ChatPanel';
 export { ConversationList } from './components/ConversationList';
 export { MessageComposer } from './components/MessageComposer';
 export { MessageThread } from './components/MessageThread';
+export { NewConversationModal } from './components/NewConversationModal';
 export { type UseChatReturn, useChat } from './hooks/useChat';
 export { useChatStore } from './store';
 export { type ChatPanelTheme, chatPanelTheme, extendChatPanelTheme } from './theme';
-export type { ChatAttachmentDTO, ChatConversationDTO, ChatMessageDTO, ChatPanelActions, ChatPanelProps, ChatPanelState, ChatParticipantDTO, TypingIndicator, } from './types';
+export type { ChatAttachmentDTO, ChatConversationDTO, ChatDirectoryUser, ChatMessageDTO, ChatPanelActions, ChatPanelProps, ChatPanelState, ChatParticipantDTO, TypingIndicator, } from './types';

package/dist/fe/components/ChatPanel/index.js

@@ -2,6 +2,7 @@ export { ChatPanel } from './components/ChatPanel';
 export { ConversationList } from './components/ConversationList';
 export { MessageComposer } from './components/MessageComposer';
 export { MessageThread } from './components/MessageThread';
+export { NewConversationModal } from './components/NewConversationModal';
 export { useChat } from './hooks/useChat';
 export { useChatStore } from './store';
 export { chatPanelTheme, extendChatPanelTheme } from './theme';

package/dist/fe/index.d.ts

@@ -9,8 +9,8 @@ export { Captcha, captchaTheme } from './components/Captcha';
 export type { ChangePasswordAction, ChangePasswordFormProps, ChangePasswordHeaderProps, ChangePasswordPageConfig, ChangePasswordStep, } from './components/ChangePasswordPage';
 export { ChangePasswordPage, useChangePasswordStore, } from './components/ChangePasswordPage';
 export { Checkbox } from './components/Checkbox';
-export { ChatPanel, chatPanelTheme, extendChatPanelTheme, useChat, useChatStore } from './components/ChatPanel';
-export type { ChatPanelActions, ChatPanelProps, ChatPanelState, ChatPanelTheme, TypingIndicator as ChatTypingIndicator, UseChatReturn, } from './components/ChatPanel';
+export { ChatPanel, chatPanelTheme, extendChatPanelTheme, NewConversationModal, useChat, useChatStore, } from './components/ChatPanel';
+export type { ChatDirectoryUser, ChatPanelActions, ChatPanelProps, ChatPanelState, ChatPanelTheme, TypingIndicator as ChatTypingIndicator, UseChatReturn, } from './components/ChatPanel';
 export { DataTable } from './components/DataTable';
 export { DatePicker } from './components/DatePicker';
 export type { ComponentCategory, ComponentEntry, ComponentExample, DesignSystemMethods, DesignSystemPageProps, DesignSystemState, PropControl, PropControlOption, PropControlType, ThemeMode, ViewportSize, } from './components/DesignSystem';

package/dist/fe/index.js

@@ -8,7 +8,7 @@ export { Captcha, captchaTheme } from './components/Captcha';
 export { ChangePasswordPage, useChangePasswordStore } from './components/ChangePasswordPage';
 export { Checkbox } from './components/Checkbox';
 // Chat
-export { ChatPanel, chatPanelTheme, extendChatPanelTheme, useChat, useChatStore } from './components/ChatPanel';
+export { ChatPanel, chatPanelTheme, extendChatPanelTheme, NewConversationModal, useChat, useChatStore } from './components/ChatPanel';
 export { DataTable } from './components/DataTable';
 export { DatePicker } from './components/DatePicker';
 export { ComponentCanvas, ComponentSidebar, createDefaultRegistry, DesignSystemPage, designSystemTheme, extendDesignSystemTheme, PropsPanel, useDesignSystemStore } from './components/DesignSystem';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nucleus-core-ts",
-	"version": "0.9.166",
+	"version": "0.9.167",
 	"description": "Production-ready, enterprise-grade TypeScript framework for building multi-tenant APIs",
 	"author": "Hidayet Can Özcan <hidayetcan@gmail.com>",
 	"license": "SEE LICENSE IN LICENSE",