@tracktor/shared-module 2.22.1 → 2.24.0

package/README.md

@@ -7,6 +7,7 @@
 - [Installation](#Installation)
 - [Usage](#Usage)
 - [Inject dependencies with provider](#Inject-dependencies-with-provider)
+- [WebSocket](#WebSocket)
 
 ## Installation
 
@@ -38,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
@@ -65,6 +67,77 @@ 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 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 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();
+
+  return (
+    <div>
+      <p>{isReady ? "Connected" : "Connecting..."}</p>
+      <button onClick={() => joinThread(threadId)}>Join</button>
+      <button onClick={() => sendMessage(threadId, "Hello!")}>Send</button>
+    </div>
+  );
+};
+```
+
+The provider reads `apiURL` and the user token from `InjectDependenciesProvider` automatically. You can override both via props:
+
+```typescript jsx
+<ChatProvider url="wss://app.api.dev.tracktor.fr/v2/threads/ws" token="my-jwt">
+```
+
+**Without React** (class only):
+
+```typescript
+import { ChatClient } from "@tracktor/shared-module";
+
+const client = new ChatClient({
+  url: "wss://app.api.dev.tracktor.fr/v2/threads/ws",
+  getToken: () => "my-jwt",
+  onEvent: (event) => console.log(event),
+  onConnectionChange: (connected) => console.log("connected:", connected),
+});
+
+client.connect();
+client.joinThread("thread-1");
+client.sendMessage("thread-1", "Hello!");
+```
+
+### Chat WebSocket
+| Module     | Description                                               | Dependencies |
+|------------|-----------------------------------------------------------|--------------|
+| 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
 | Module                | Description                        |

package/dist/chat/ChatClient.d.ts

@@ -0,0 +1,34 @@
+import { ChatClientOptions } from './types';
+declare class ChatClient {
+    private readonly url;
+    private readonly getToken;
+    private readonly onEvent?;
+    private readonly onConnectionChange?;
+    private readonly shouldReconnect;
+    private readonly maxReconnectAttempts;
+    private readonly reconnectBaseDelay;
+    private ws;
+    private reconnectAttempt;
+    private reconnectTimer;
+    private intentionalClose;
+    private joinedThreads;
+    private pendingMessages;
+    private _connected;
+    private _ready;
+    constructor(options: ChatClientOptions);
+    get connected(): boolean;
+    get ready(): boolean;
+    connect(): void;
+    disconnect(): void;
+    joinThread(threadId: string): void;
+    leaveThread(threadId: string): void;
+    sendMessage(threadId: string, body: string): void;
+    markRead(threadId: string): void;
+    listThreads(limit?: number, offset?: number): void;
+    private send;
+    private flushPendingMessages;
+    private rejoinThreads;
+    private scheduleReconnect;
+    private clearReconnectTimer;
+}
+export default ChatClient;

package/dist/chat/tests/ChatClient.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/chat/types.d.ts

@@ -0,0 +1,105 @@
+export interface Thread {
+    id: string;
+    participants: string[];
+    lastMessage?: Message;
+    unreadCount?: number;
+    createdAt: string;
+    updatedAt: string;
+}
+export interface Message {
+    id: string;
+    threadId: string;
+    senderId: string;
+    body: string;
+    createdAt: string;
+}
+export interface JoinThread {
+    type: "join_thread";
+    threadId: string;
+}
+export interface LeaveThread {
+    type: "leave_thread";
+    threadId: string;
+}
+export interface SendMessage {
+    type: "send_message";
+    threadId: string;
+    body: string;
+}
+export interface MarkRead {
+    type: "mark_read";
+    threadId: string;
+}
+export interface ListThreads {
+    type: "list_threads";
+    limit?: number;
+    offset?: number;
+}
+export type ClientMessage = JoinThread | LeaveThread | SendMessage | MarkRead | ListThreads;
+export interface ReadyEvent {
+    type: "ready";
+    userId: string;
+}
+export interface JoinedThread {
+    type: "joined_thread";
+    threadId: string;
+    thread: Thread;
+}
+export interface LeftThread {
+    type: "left_thread";
+    threadId: string;
+}
+export interface NewMessageEvent {
+    type: "new_message";
+    message: Message;
+}
+export interface NewMessageNotification {
+    type: "new_message_notification";
+    threadId: string;
+    message: Message;
+}
+export interface MarkedRead {
+    type: "marked_read";
+    threadId: string;
+    userId: string;
+}
+export interface ThreadsListEvent {
+    type: "threads_list";
+    threads: Thread[];
+    total: number;
+}
+export interface PresenceEvent {
+    type: "presence";
+    userId: string;
+    online: boolean;
+}
+export interface ErrorEvent {
+    type: "error";
+    code: string;
+    message: string;
+}
+export type ServerEvent = ReadyEvent | JoinedThread | LeftThread | NewMessageEvent | NewMessageNotification | MarkedRead | ThreadsListEvent | PresenceEvent | ErrorEvent;
+export interface ChatClientOptions {
+    url: string;
+    getToken: () => string | null;
+    onEvent?: (event: ServerEvent) => void;
+    onConnectionChange?: (connected: boolean) => void;
+    reconnect?: boolean;
+    maxReconnectAttempts?: number;
+    reconnectBaseDelay?: number;
+}
+export interface UseChatParams {
+    token?: string;
+    url?: string;
+    enabled?: boolean;
+    reconnect?: boolean;
+    onReady?: (event: ReadyEvent) => void;
+    onNewMessage?: (event: NewMessageEvent) => void;
+    onNewMessageNotification?: (event: NewMessageNotification) => void;
+    onPresence?: (event: PresenceEvent) => void;
+    onError?: (event: ErrorEvent) => void;
+    onJoinedThread?: (event: JoinedThread) => void;
+    onLeftThread?: (event: LeftThread) => void;
+    onMarkedRead?: (event: MarkedRead) => void;
+    onThreadsList?: (event: ThreadsListEvent) => void;
+}

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

@@ -0,0 +1,8 @@
+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

@@ -1,4 +1,6 @@
 export { axiosCustomInstance, type BodyType, type ErrorType } from './axios/axiosCustomInstance';
+export { default as ChatClient } from './chat/ChatClient';
+export * from './chat/types';
 export * from './components/Inputs/MaskTextField';
 export { default as MaskTextField } from './components/Inputs/MaskTextField';
 export * from './components/Utils/GTMSendPageView';
@@ -17,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';
@@ -25,6 +29,8 @@ export * from './hooks/useAdapter';
 export { default as useAdapter } from './hooks/useAdapter';
 export * from './hooks/useAuth';
 export { default as useAuth } from './hooks/useAuth';
+export * from './hooks/useChat';
+export { default as useChat } from './hooks/useChat';
 export * from './hooks/useCurrentLanguage/useCurrentLanguage';
 export { default as useCurrentLanguage } from './hooks/useCurrentLanguage/useCurrentLanguage';
 export * from './hooks/useFilters';