@tracktor/design-system 4.24.0 → 4.25.0

package/dist/src/components/DataDisplay/Chat/components/ChatParticipantAutocomplete.d.ts

@@ -0,0 +1,20 @@
+import { Ref } from 'react';
+import { ChatSearchUser } from '../types';
+export interface ChatParticipantAutocompleteHandle {
+    focus: () => void;
+}
+interface ChatParticipantAutocompleteProps {
+    ref?: Ref<ChatParticipantAutocompleteHandle>;
+    value: ChatSearchUser[];
+    onChange: (value: ChatSearchUser[]) => void;
+    onInputChange?: (query: string) => void;
+    options?: ChatSearchUser[];
+    isLoading?: boolean;
+    avatarSrcResolver?: (src?: string | null) => string | undefined;
+    labels?: {
+        participants?: string;
+        searchContacts?: string;
+    };
+}
+declare const ChatParticipantAutocomplete: ({ ref, value, onChange, onInputChange, options, isLoading, avatarSrcResolver, labels, }: ChatParticipantAutocompleteProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChatParticipantAutocomplete;

package/dist/src/components/DataDisplay/Chat/components/ChatParticipantDialog.d.ts

@@ -0,0 +1,3 @@
+import { ChatParticipantDialogProps } from '../types';
+declare const ChatParticipantDialog: ({ open, onClose, onConfirm, onSearch, searchResults, isSearchLoading, avatarSrcResolver, labels, }: ChatParticipantDialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChatParticipantDialog;

package/dist/src/components/DataDisplay/Chat/types.d.ts

@@ -0,0 +1,108 @@
+import { ReactNode } from 'react';
+export interface ChatMessage {
+    id: string | number;
+    authorId: string;
+    body: string;
+    createdAt: string;
+}
+export interface ChatParticipant {
+    userId: string;
+    firstName: string;
+    lastName: string;
+    avatar?: string | null;
+}
+export interface ChatThread {
+    id: string;
+    createdAt: string;
+    updatedAt?: string | null;
+    lastMessagePreview?: string | null;
+    unreadCount?: number | null;
+    participants?: ChatParticipant[] | null;
+}
+export interface ChatSearchUser {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    avatar?: string | null;
+}
+export interface ChatConversationListLabels {
+    messages?: string;
+    search?: string;
+}
+export interface ChatConversationDetailLabels {
+    today?: string;
+    yesterday?: string;
+    createYourFirstConversation?: string;
+    newConversation?: string;
+    writeAMessage?: string;
+    send?: string;
+    enterToSend?: string;
+    addParticipant?: string;
+    deleteConversation?: string;
+    participants?: string;
+    searchContacts?: string;
+    add?: string;
+}
+export interface ChatMessageInputLabels {
+    writeAMessage?: string;
+    send?: string;
+    enterToSend?: string;
+}
+export interface ChatParticipantDialogLabels {
+    title?: string;
+    confirm?: string;
+    participants?: string;
+    searchContacts?: string;
+}
+export interface ChatConversationListProps {
+    threads?: ChatThread[];
+    isLoading?: boolean;
+    selectedThreadId?: string;
+    onSelectThread: (threadId: string) => void;
+    onNewConversation: () => void;
+    avatarSrcResolver?: (src?: string | null) => string | undefined;
+    labels?: ChatConversationListLabels;
+    formatDate?: (date: string) => string;
+}
+export interface ChatConversationDetailProps {
+    threadId?: string;
+    participants?: ChatParticipant[] | null;
+    isLoadingMessages?: boolean;
+    messages?: ChatMessage[];
+    currentUserId: string;
+    onDeleteConversation: (threadId: string) => void;
+    onNewConversation: () => void;
+    onSendMessage: (threadId: string, body: string) => void;
+    onAddParticipants: (participants: ChatSearchUser[]) => void;
+    onSearchParticipants?: (query: string) => void;
+    searchResults?: ChatSearchUser[];
+    isSearchingParticipants?: boolean;
+    avatarSrcResolver?: (src?: string | null) => string | undefined;
+    renderAfterBubble?: (message: ChatMessage, urls: string[]) => ReactNode;
+    labels?: ChatConversationDetailLabels;
+    formatDayLabel?: (date: string) => string;
+}
+export interface ChatMessageBubbleProps {
+    isOwn: boolean;
+    message: ChatMessage;
+    participants?: ChatParticipant[] | null;
+    avatarSrcResolver?: (src?: string | null) => string | undefined;
+    renderAfterBubble?: (urls: string[]) => ReactNode;
+    formatTime?: (date: string) => string;
+}
+export interface ChatMessageInputProps {
+    onSend: (message: string) => void;
+    labels?: ChatMessageInputLabels;
+    autoFocusKey?: string;
+}
+export interface ChatParticipantDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: (participants: ChatSearchUser[]) => void;
+    onSearch: (query: string) => void;
+    searchResults?: ChatSearchUser[];
+    isSearchLoading?: boolean;
+    avatarSrcResolver?: (src?: string | null) => string | undefined;
+    labels?: ChatParticipantDialogLabels;
+}

package/dist/src/components/DataDisplay/Chat/utils/extractUrls.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Extract all URLs (http/https) from a text string.
+ */
+export declare const extractUrls: (body: string) => string[];

package/dist/src/components/DataDisplay/Chat/utils/formatParticipantNames.d.ts

@@ -0,0 +1,6 @@
+import { ChatParticipant } from '../types';
+/**
+ * Format a list of participants into a comma-separated string of capitalized first names (or last names as fallback).
+ */
+declare const formatParticipantNames: (participants?: ChatParticipant[] | null) => string;
+export default formatParticipantNames;

package/dist/src/main.d.ts

@@ -7,6 +7,9 @@ export { default as Avatar } from './components/DataDisplay/Avatar';
 export type { AvatarProps } from './components/DataDisplay/Avatar/Avatar';
 export * from './components/DataDisplay/AvatarAppBar';
 export { default as AvatarAppBar } from './components/DataDisplay/AvatarAppBar';
+export * from './components/DataDisplay/Chat/Chat';
+export { default as Chat } from './components/DataDisplay/Chat/Chat';
+export * from './components/DataDisplay/Chat/types';
 export * from './components/DataDisplay/Chip';
 export { default as Chip } from './components/DataDisplay/Chip';
 export * from './components/DataDisplay/FileViewer';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@tracktor/design-system",
   "description": "Tracktor Design System",
   "sideEffects": false,
-  "version": "4.24.0",
+  "version": "4.25.0",
   "license": "ISC",
   "type": "module",
   "types": "./dist/src/main.d.ts",
@@ -48,11 +48,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",
-    "@storybook/addon-docs": "^10.2.0",
-    "@storybook/addon-links": "^10.2.0",
-    "@storybook/addon-onboarding": "^10.2.0",
-    "@storybook/builder-vite": "^10.2.0",
-    "@storybook/react-vite": "^10.2.0",
+    "@storybook/addon-docs": "^10.2.15",
+    "@storybook/addon-links": "^10.2.15",
+    "@storybook/addon-onboarding": "^10.2.15",
+    "@storybook/builder-vite": "^10.2.15",
+    "@storybook/react-vite": "^10.2.15",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
@@ -73,7 +73,7 @@
     "react-dom": "^19.0.0",
     "react-test-renderer": "^19.0.0",
     "sass": "^1.80.5",
-    "storybook": "^10.2.0",
+    "storybook": "^10.2.15",
     "typescript": "^5.8.3",
     "vite": "7.3.0",
     "vite-plugin-dts": "^4.5.4",
@@ -82,6 +82,7 @@
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
+    "@mui/icons-material": "^7.0.0",
     "@mui/material": "^7.0.0",
     "@tanstack/react-virtual": "^3.13.13",
     "@tracktor/react-utils": "^1.24.0"
@@ -89,6 +90,7 @@
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",
     "@emotion/styled": ">=11.0.0",
+    "@mui/icons-material": ">=6.0.0",
     "@mui/material": ">=6.0.0",
     "@tracktor/react-utils": ">=1.24.0",
     "@tanstack/react-virtual": ">=3.0.0",