Merge branch 'tjtanjin:main' into test/toastscontext

CHANGELOG.md

@@ -1,5 +1,19 @@
 # CHANGELOG.md
 
+## v2.0.0-beta.20 (21-10-2024)
+
+**Fixed:**
+- Fixed an issue with the default chatbot footer icon
+- Improved checks for desktop/mobile devices
+- Reduced unnecessary re-renders (minor optimizations)
+- Properly fixed chatbot svg icon on mobile
+
+**Added:**
+- Added new `replaceSettings`, `replaceStyles`, `replaceMessages`, `replacePaths` and `replaceToasts` utility functions to their respective hooks (replaces their respective state setters)
+
+**Note:**
+Hooks no longer directly expose state setters (not a great practice, and hinders optimizations that can be done within the library itself). The new functions serve as a drop-in replacement for the state setters.
+
 ## v2.0.0-beta.19 (18-10-2024)
 
 **Fixed:**

__tests__/context/MessagesContext.test.tsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import { expect } from '@jest/globals'
+import { act, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/jest-globals'
+
+import {
+	useMessagesContext,
+	MessagesProvider,
+} from '../../src/context/MessagesContext'
+
+const TestComponent = () => {
+	const { messages, setMessages } = useMessagesContext()
+
+	const handleAddMessage = () => {
+		setMessages([
+			...messages,
+			{
+				id: '1',
+				content: 'Hello World!',
+				sender: 'user1',
+				type: 'message',
+				timestamp: new Date().toUTCString(),
+			},
+		])
+	}
+
+	const handleClearMessage = () => {
+		setMessages([])
+	}
+
+	return (
+		<div>
+			<p data-testid="messages">
+				Messages: {messages.map((message) => message.content).join(', ')}
+			</p>
+			<p data-testid="messagesCount">Messages Count: {messages.length}</p>
+
+			<button onClick={handleAddMessage}>Add Message</button>
+			<button onClick={handleClearMessage}>Clear Message</button>
+		</div>
+	)
+}
+
+describe('MessagesContext', () => {
+	it('provides the correct default values', () => {
+		render(
+			<MessagesProvider>
+				<TestComponent />
+			</MessagesProvider>
+		)
+
+		expect(screen.getByTestId('messages')).toHaveTextContent(`Messages:`)
+		expect(screen.getByTestId('messagesCount')).toHaveTextContent(
+			`Messages Count: 0`
+		)
+	})
+
+	it('allows adding messages in the context', () => {
+		render(
+			<MessagesProvider>
+				<TestComponent />
+			</MessagesProvider>
+		)
+
+		const addMessageBtn = screen.getByText('Add Message')
+
+		act(() => {
+			addMessageBtn.click()
+		})
+
+		expect(screen.getByTestId('messages')).toHaveTextContent(
+			`Messages: Hello World!`
+		)
+		expect(screen.getByTestId('messagesCount')).toHaveTextContent(
+			`Messages Count: 1`
+		)
+
+		act(() => {
+			addMessageBtn.click()
+		})
+
+		expect(screen.getByTestId('messagesCount')).toHaveTextContent(
+			`Messages Count: 2`
+		)
+	})
+
+	it('allows updating messages in the context', () => {
+		render(
+			<MessagesProvider>
+				<TestComponent />
+			</MessagesProvider>
+		)
+
+		const clearMessageBtn = screen.getByText('Clear Message')
+		const addMessageBtn = screen.getByText('Add Message')
+
+		act(() => {
+			clearMessageBtn.click()
+		})
+
+		expect(screen.getByTestId('messages')).toHaveTextContent(`Messages:`)
+		expect(screen.getByTestId('messagesCount')).toHaveTextContent(
+			`Messages Count: 0`
+		)
+
+		act(() => {
+			addMessageBtn.click()
+		})
+
+		expect(screen.getByTestId('messagesCount')).toHaveTextContent(
+			`Messages Count: 1`
+		)
+	})
+})

__tests__/context/PathsContext.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { expect } from '@jest/globals'
+import { act, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/jest-globals'
+
+import { usePathsContext, PathsProvider } from '../../src/context/PathsContext'
+
+const TestComponent = () => {
+	const { paths, setPaths } = usePathsContext()
+
+	const handleAddPath = () => {
+		setPaths([...paths, '/path/to/1'])
+	}
+
+	const handleClearPaths = () => {
+		setPaths([])
+	}
+
+	return (
+		<div>
+			<p data-testid="pathsCount">Paths Count: {paths.length}</p>
+
+			<button onClick={handleAddPath}>Add Path</button>
+			<button onClick={handleClearPaths}>Clear Paths</button>
+		</div>
+	)
+}
+
+describe('PathsContext', () => {
+	it('provides the correct default values', () => {
+		render(
+			<PathsProvider>
+				<TestComponent />
+			</PathsProvider>
+		)
+
+		expect(screen.getByTestId('pathsCount')).toHaveTextContent(`Paths Count: 0`)
+	})
+
+	it('allows adding paths in the context', () => {
+		render(
+			<PathsProvider>
+				<TestComponent />
+			</PathsProvider>
+		)
+
+		const addPathBtn = screen.getByText('Add Path')
+
+		act(() => {
+			addPathBtn.click()
+		})
+
+		expect(screen.getByTestId('pathsCount')).toHaveTextContent(`Paths Count: 1`)
+
+		act(() => {
+			addPathBtn.click()
+		})
+
+		expect(screen.getByTestId('pathsCount')).toHaveTextContent(`Paths Count: 2`)
+	})
+
+	it('allows updating paths in the context', () => {
+		render(
+			<PathsProvider>
+				<TestComponent />
+			</PathsProvider>
+		)
+
+		const clearPathsBtn = screen.getByText('Clear Paths')
+		const addPathBtn = screen.getByText('Add Path')
+
+		act(() => {
+			clearPathsBtn.click()
+		})
+
+		expect(screen.getByTestId('pathsCount')).toHaveTextContent(`Paths Count: 0`)
+
+		act(() => {
+			addPathBtn.click()
+		})
+
+		expect(screen.getByTestId('pathsCount')).toHaveTextContent(`Paths Count: 1`)
+	})
+})

__tests__/hooks/internal/useChatHistoryInternal.test.ts

@@ -90,6 +90,9 @@ describe("useChatHistoryInternal Hook", () => {
 			expect.any(Object),
 			initialChatHistory,
 			expect.any(Function),
+			expect.any(Object),
+			expect.any(Number),
+			expect.any(Function),
 		);
 
 		// checks if history is being loaded

__tests__/hooks/internal/useIsDesktopInternal.test.ts

@@ -0,0 +1,76 @@
+import { renderHook } from '@testing-library/react';
+import { useIsDesktopInternal} from "../../../src/hooks/internal/useIsDesktopInternal";
+
+const originalNavigator = window.navigator;
+const originalInnerWidth = window.innerWidth;
+
+const mockWindowProperty = (property: string, value: any) => {
+    Object.defineProperty(window, property, {
+        configurable: true,
+        writable: true,
+        value,
+    });
+};
+
+describe('useIsDesktopInternal', () => {
+    afterEach(() => {
+        Object.defineProperty(window, 'navigator', {
+            configurable: true,
+            writable: true,
+            value: originalNavigator,
+        });
+        Object.defineProperty(window, 'innerWidth', {
+            configurable: true,
+            writable: true,
+            value: originalInnerWidth,
+        });
+    });
+
+    it('should return false when running on server-side (no window object)', () => {
+        mockWindowProperty('navigator', undefined);
+        mockWindowProperty('innerWidth', 0);
+
+        const { result } = renderHook(() => useIsDesktopInternal());
+        expect(result.current).toBe(false);
+    });
+
+    it('should return false for a mobile user agent', () => {
+        mockWindowProperty('navigator', {
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15A372 Safari/604.1',
+        });
+        mockWindowProperty('innerWidth', 800);
+
+        const { result } = renderHook(() => useIsDesktopInternal());
+        expect(result.current).toBe(false);
+    });
+
+    it('should return true for a desktop user agent and wide screen', () => {
+        mockWindowProperty('navigator', {
+            userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
+        });
+        mockWindowProperty('innerWidth', 1024);
+
+        const { result } = renderHook(() => useIsDesktopInternal());
+        expect(result.current).toBe(true);
+    });
+
+    it('should return false for a narrow screen, even on a desktop user agent', () => {
+        mockWindowProperty('navigator', {
+            userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
+        });
+        mockWindowProperty('innerWidth', 500);
+
+        const { result } = renderHook(() => useIsDesktopInternal());
+        expect(result.current).toBe(false);
+    });
+
+    it('should return true if user agent is not mobile and window width is exactly 768', () => {
+        mockWindowProperty('navigator', {
+            userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
+        });
+        mockWindowProperty('innerWidth', 768);
+
+        const { result } = renderHook(() => useIsDesktopInternal());
+        expect(result.current).toBe(true);
+    });
+});