@xcelsior/ui-chat 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xcelsior/ui-chat",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -21,14 +21,10 @@
     "storybook": "^8.6.14",
     "@tailwindcss/postcss": "^4.1.13",
     "tsup": "^8.0.2",
-    "typescript": "^5.3.3",
-    "@xcelsior/design-system": "1.0.11",
-    "@xcelsior/ui-fields": "1.0.6"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "tailwindcss": "^4",
-    "@xcelsior/design-system": "^1.0.8",
-    "@xcelsior/ui-fields": "^1.0.4",
     "flowbite-react": "^0.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/components/MessageList.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-import { Spinner } from '@xcelsior/design-system';
+import { Spinner } from './Spinner';
 
 import { XcelsiorAvatar, XcelsiorSymbol } from './BrandIcons';
 import { MessageItem } from './MessageItem';

package/src/components/Spinner.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface SpinnerProps {
+    size?: 'sm' | 'md' | 'lg';
+    color?: string;
+}
+
+const SIZE_MAP: Record<NonNullable<SpinnerProps['size']>, number> = {
+    sm: 16,
+    md: 24,
+    lg: 36,
+};
+
+const BORDER_MAP: Record<NonNullable<SpinnerProps['size']>, number> = {
+    sm: 2,
+    md: 2,
+    lg: 3,
+};
+
+export function Spinner({ size = 'md', color = 'currentColor' }: SpinnerProps) {
+    const px = SIZE_MAP[size];
+    const border = BORDER_MAP[size];
+
+    return (
+        <>
+            <style>{`
+                @keyframes xchat-spin {
+                    to { transform: rotate(360deg); }
+                }
+                .xchat-spinner {
+                    animation: xchat-spin 0.75s linear infinite;
+                    border-radius: 50%;
+                    display: inline-block;
+                    flex-shrink: 0;
+                }
+            `}</style>
+            <span
+                className="xchat-spinner"
+                role="status"
+                aria-label="Loading"
+                style={{
+                    width: px,
+                    height: px,
+                    border: `${border}px solid rgba(128,128,128,0.25)`,
+                    borderTopColor: color,
+                }}
+            />
+        </>
+    );
+}

package/src/hooks/useWebSocket.ts

@@ -12,6 +12,9 @@ export interface UseWebSocketReturn {
 /**
  * Hook for WebSocket connection in chat widget.
  * Can use an external WebSocket connection (for agents) via the externalWebSocket prop.
+ *
+ * Handles React Strict Mode (dev) gracefully — tracks whether the effect has been
+ * cleaned up so that an aborted connection doesn't trigger reconnection.
  */
 export function useWebSocket(
     config: IChatConfig,
@@ -24,6 +27,7 @@ export function useWebSocket(
     const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const reconnectAttemptsRef = useRef(0);
     const messageHandlerRef = useRef<((event: MessageEvent) => void) | null>(null);
+    const abortedRef = useRef(false);
     const maxReconnectAttempts = 5;
     const reconnectDelay = 3000;
 
@@ -71,6 +75,9 @@ export function useWebSocket(
 
     // biome-ignore lint/correctness/useExhaustiveDependencies: dependencies managed manually
     const connect = useCallback(() => {
+        // Skip if the effect was already cleaned up (React Strict Mode)
+        if (abortedRef.current) return;
+
         console.log('connecting to WebSocket...', config.currentUser, config.conversationId);
         try {
             // Clean up existing connection
@@ -96,6 +103,10 @@ export function useWebSocket(
             const ws = new WebSocket(url.toString());
 
             ws.onopen = () => {
+                if (abortedRef.current) {
+                    ws.close(1000, 'Effect cleaned up');
+                    return;
+                }
                 console.log('WebSocket connected');
                 setIsConnected(true);
                 setError(null);
@@ -104,6 +115,7 @@ export function useWebSocket(
             };
 
             ws.onerror = (event) => {
+                if (abortedRef.current) return;
                 console.error('WebSocket error:', event);
                 const err = new Error('WebSocket connection error');
                 setError(err);
@@ -111,6 +123,7 @@ export function useWebSocket(
             };
 
             ws.onclose = (event) => {
+                if (abortedRef.current) return;
                 console.log('WebSocket closed:', event.code, event.reason);
                 setIsConnected(false);
                 config.onConnectionChange?.(false);
@@ -165,6 +178,7 @@ export function useWebSocket(
 
     const reconnect = useCallback(() => {
         reconnectAttemptsRef.current = 0;
+        abortedRef.current = false;
         connect();
     }, [connect]);
 
@@ -176,10 +190,13 @@ export function useWebSocket(
             return cleanup;
         }
 
+        // Reset abort flag for this effect cycle
+        abortedRef.current = false;
         connect();
 
-        // Cleanup on unmount
+        // Cleanup on unmount (or React Strict Mode re-run)
         return () => {
+            abortedRef.current = true;
             if (reconnectTimeoutRef.current) {
                 clearTimeout(reconnectTimeoutRef.current);
             }