@aslaluroba/help-center-react 2.0.0 → 2.0.2

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {
@@ -24,7 +24,7 @@
     "dev": "rollup -c -w",
     "test": "jest",
     "clean": "rimraf dist",
-    "publish": "npm run build && npm publish --access public"
+    "publish:lib": "npm run build && npm publish --access public"
   },
   "files": [
     "dist",

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

package/rollup.config.js

@@ -0,0 +1,58 @@
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import postcss from 'rollup-plugin-postcss'
+import svgr from '@svgr/rollup'
+import image from '@rollup/plugin-image'
+
+const createConfig = (format) => ({
+  input: 'src/index.ts',
+  output: {
+    file: `dist/index${format === 'esm' ? '.esm' : ''}.js`,
+    format: format === 'esm' ? 'es' : 'cjs',
+    sourcemap: true
+  },
+  external: ['react', 'react-dom', '@microsoft/signalr', 'axios', 'i18next', 'react-i18next'],
+  plugins: [
+    svgr({
+      svgoConfig: {
+        plugins: [
+          {
+            name: 'preset-default',
+            params: {
+              overrides: {
+                removeViewBox: false
+              }
+            }
+          }
+        ]
+      }
+    }),
+    image({
+      include: ['**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg'],
+      limit: 0,
+      fileName: '[dirname][name][extname]'
+    }),
+    resolve(),
+    json(), 
+    commonjs(),
+    postcss({
+      config: {
+        path: './postcss.config.js'
+      },
+      extensions: ['.css'],
+      minimize: true,
+      inject: {
+        insertAt: 'top'
+      }
+    }),
+    typescript({
+      tsconfig: './tsconfig.json',
+      declaration: true,
+      declarationDir: './dist'
+    })
+  ]
+})
+
+export default [createConfig('cjs'), createConfig('esm')]

package/src/core/api.ts

@@ -2,7 +2,6 @@ import { TokenResponse } from '../lib/types'
 
 let getTokenFunction: (() => Promise<TokenResponse>) | undefined = undefined
 
-console.log('🚀 ~ getTokenFunction:', getTokenFunction)
 let baseUrl: string | null = null
 
 export function initializeAPI(url: string, getToken: () => Promise<TokenResponse>) {

package/src/ui/help-center.tsx

@@ -102,6 +102,8 @@ export function HelpCenter({
     } catch (error) {
       console.error('Error ending chat:', error)
       setError('Failed to end chat session')
+      // If ending chat fails, the chat is not considered closed.
+      setIsChatClosed(false)
     }
   }
 
@@ -127,7 +129,6 @@ export function HelpCenter({
           }
         })
       }
-
       const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto)
 
       if (!response.ok) {
@@ -163,7 +164,7 @@ export function HelpCenter({
       }
 
       // Connect to SignalR
-      await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage)
+      ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage)
 
       setIsSignalRConnected(true)
       setIsChatClosed(false)
@@ -172,6 +173,8 @@ export function HelpCenter({
       console.error('Chat start error:', error)
       setError(error instanceof Error ? error.message : 'Failed to start chat session')
       setStatus('failed')
+      // If starting chat fails, SignalR is not connected.
+      setIsSignalRConnected(false)
     }
   }
 
@@ -220,6 +223,7 @@ export function HelpCenter({
           // Connect to SignalR with the new session
           const tokenResponse = await configService.getToken()
           await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage)
+
           setIsSignalRConnected(true)
         }
 

package/src/ui/help-popup.tsx

@@ -130,7 +130,7 @@ export function HelpPopup({
   }
 
   const handleSendMessage = (message: string) => {
-    if (message.trim() && isSignalRConnected && !isChatClosed) {
+    if (message.trim()) {
       onSendMessage(message.trim())
     }
   }

package/tailwind.config.js

@@ -0,0 +1,174 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  prefix: 'babylai-',
+  content: ['./src/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Cairo']
+      },
+
+      rotate: {
+        270: '270deg'
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
+      },
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        borderColor: '#606060',
+        textDark: '#333333',
+        black: '#171717',
+        pureWhite: '#FFFFFF',
+        primary: {
+          100: '#F6ECFC',
+          200: '#DEB6F3',
+          300: '#D49CEE',
+          400: '#C57FEA',
+          500: '#AD49E1',
+          600: '#672B87',
+          700: '#451D5A',
+          800: '#220E2D',
+          900: '#110716',
+          950: '#0A0310',
+          DEFAULT: '#AD49E1',
+          foreground: '#FFFFFF'
+        },
+        'black-white': {
+          50: '#FFFFFF',
+          100: '#F3F3F3',
+          200: '#E2E2E2',
+          300: '#919191',
+          400: '#606060',
+          500: '#333333',
+          600: '#1F1F1F',
+          700: '#171717',
+          800: '#0A0A0A',
+          900: '#050505',
+          950: '#000000',
+          DEFAULT: '#333333'
+        },
+        'wild-sand': {
+          50: '#f8f8f8',
+          100: '#f3f3f3',
+          200: '#dcdcdc',
+          300: '#bdbdbd',
+          400: '#989898',
+          500: '#7c7c7c',
+          600: '#656565',
+          700: '#525252',
+          800: '#464646',
+          900: '#3d3d3d',
+          950: '#292929'
+        },
+        'storm-dust': {
+          50: '#f6f6f6',
+          100: '#e7e7e7',
+          200: '#d1d1d1',
+          300: '#b0b0b0',
+          400: '#888888',
+          500: '#6d6d6d',
+          600: '#606060',
+          700: '#4f4f4f',
+          800: '#454545',
+          900: '#3d3d3d',
+          950: '#262626'
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        chart: {
+          1: 'hsl(var(--chart-1))',
+          2: 'hsl(var(--chart-2))',
+          3: 'hsl(var(--chart-3))',
+          4: 'hsl(var(--chart-4))',
+          5: 'hsl(var(--chart-5))'
+        },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))'
+        }
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-accordion-content-height)' }
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 }
+        }
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        float: 'float 3s infinite ease-in-out'
+      },
+      screens: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1400px',
+        '2xl': '1600px',
+        '3xl': '1820px'
+      },
+      fontSize: {
+        '4.5xl': ['2.875rem', { lineHeight: '2.875rem' }],
+        '3.4xl': ['2.25rem', { lineHeight: '2.25rem' }]
+      },
+      boxShadow: {
+        'minimal-shadow': 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'
+      },
+      opacity: {
+        15: '0.15'
+      }
+    }
+  },
+  plugins: [
+    require('tailwindcss-animate'),
+    require('tailwindcss-rtl'),
+    ({ addBase }) => {
+      addBase({
+        html: {
+          fontFamily: '"Cairo", sans-serif'
+        },
+        body: {
+          fontFamily: '"Cairo", sans-serif'
+        }
+      })
+    }
+  ]
+}