@tracktor/shared-module 2.23.0 → 2.24.0

package/README.md

@@ -39,10 +39,11 @@ export default App;
 ```
 
 ## Providers
-| Module                        | Description                                    | Dependencies |
-|-------------------------------|------------------------------------------------|--------------|
-| InjectDependenciesProvider    | Inject dependencies for other shared component | -            |
-| QueryClientProviderWithConfig | React Query provider with default config       | React Query  |
+| Module                        | Description                                         | Dependencies |
+|-------------------------------|-----------------------------------------------------|--------------|
+| InjectDependenciesProvider    | Inject dependencies for other shared component      | -            |
+| QueryClientProviderWithConfig | React Query provider with default config            | React Query  |
+| ChatProvider                  | Shared WebSocket chat connection provider via context | -            |
 
 
 ## Components
@@ -66,22 +67,36 @@ export default App;
 | useInfiniteDataGrid | This hook is used to handle the infinite scroll of the DataGrid component. | -            |
 | useCurrentLanguage  | This get the current language of app                                       | -            |
 | useFilters          | Hook to handle filter                                                      | -            |
-| useChat             | Hook for chat WebSocket connection (threads, messaging, presence)          | -            |
+| useChat             | Hook to consume the ChatProvider context (threads, messaging, presence)    | ChatProvider |
 
 
 ## WebSocket
 
 The chat module provides a WebSocket client for the Tracktor chat protocol (`/v2/threads/ws`). It supports thread subscription, messaging, read receipts, and presence events.
 
-**With the React hook** (recommended):
+**With the React provider** (recommended):
+
+First, wrap your app with `ChatProvider` (inside `InjectDependenciesProvider`):
+
+```typescript jsx
+import { ChatProvider, InjectDependenciesProvider } from "@tracktor/shared-module";
+
+const App = () => (
+  <InjectDependenciesProvider apiURL={import.meta.env.VITE_API_URL} libraries={libraries} localStorageKeys={localStorageKeys}>
+    <ChatProvider>
+      <MyApp />
+    </ChatProvider>
+  </InjectDependenciesProvider>
+);
+```
+
+Then use `useChat()` in any component:
 
 ```typescript jsx
 import { useChat } from "@tracktor/shared-module";
 
 const Chat = ({ threadId }: { threadId: string }) => {
-  const { isReady, sendMessage, joinThread } = useChat({
-    onNewMessage: (event) => console.log("New message:", event.message),
-  });
+  const { isReady, sendMessage, joinThread } = useChat();
 
   return (
     <div>
@@ -93,10 +108,10 @@ const Chat = ({ threadId }: { threadId: string }) => {
 };
 ```
 
-The hook reads `apiURL` and the user token from `InjectDependenciesProvider` automatically. You can override both via props:
+The provider reads `apiURL` and the user token from `InjectDependenciesProvider` automatically. You can override both via props:
 
 ```typescript jsx
-useChat({ url: "wss://app.api.dev.tracktor.fr/v2/threads/ws", token: "my-jwt" });
+<ChatProvider url="wss://app.api.dev.tracktor.fr/v2/threads/ws" token="my-jwt">
 ```
 
 **Without React** (class only):
@@ -119,8 +134,9 @@ client.sendMessage("thread-1", "Hello!");
 ### Chat WebSocket
 | Module     | Description                                               | Dependencies |
 |------------|-----------------------------------------------------------|--------------|
-| ChatClient | Framework-agnostic WebSocket client for the chat protocol | -            |
-| useChat    | React hook wrapping ChatClient                            | -            |
+| ChatClient   | Framework-agnostic WebSocket client for the chat protocol   | -            |
+| ChatProvider | Provider for shared WebSocket connection via context         | -            |
+| useChat      | React hook to consume the ChatProvider context               | ChatProvider |
 
 
 ## Config

package/dist/context/ChatProvider.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import { UseChatParams } from '../chat/types';
+export interface ChatContextValue {
+    isConnected: boolean;
+    isReady: boolean;
+    joinThread: (threadId: string) => void;
+    leaveThread: (threadId: string) => void;
+    listThreads: (limit?: number, offset?: number) => void;
+    markRead: (threadId: string) => void;
+    sendMessage: (threadId: string, body: string) => void;
+}
+export declare const ChatContext: import('react').Context<ChatContextValue | null>;
+declare const ChatProvider: ({ children, ...params }: PropsWithChildren<UseChatParams>) => import("react/jsx-runtime").JSX.Element;
+export default ChatProvider;

package/dist/hooks/useChat.d.ts

@@ -1,11 +1,8 @@
-import { UseChatParams } from '../chat/types';
-export declare const useChat: (params?: UseChatParams) => {
-    isConnected: boolean;
-    isReady: boolean;
-    joinThread: (threadId: string) => void;
-    leaveThread: (threadId: string) => void;
-    listThreads: (limit?: number, offset?: number) => void;
-    markRead: (threadId: string) => void;
-    sendMessage: (threadId: string, body: string) => void;
-};
+import { ChatContextValue } from '../context/ChatProvider';
+/**
+ * Hook to access the shared WebSocket chat connection.
+ * Provides methods to join/leave threads, send messages, mark as read, and list threads.
+ * Must be used within a ChatProvider.
+ */
+export declare const useChat: () => ChatContextValue;
 export default useChat;

package/dist/main.d.ts

@@ -19,6 +19,8 @@ export * from './components/Utils/RequireAuth';
 export { default as RequireAuth } from './components/Utils/RequireAuth';
 export * from './config/orval';
 export { default as getOrvalConfig } from './config/orval';
+export * from './context/ChatProvider';
+export { default as ChatProvider } from './context/ChatProvider';
 export * from './context/InjectDependenciesProvider';
 export { default as InjectDependenciesProvider } from './context/InjectDependenciesProvider';
 export * from './context/QueryClientProviderWithConfig';