impact-chatbot 2.0.0

package/README.md

@@ -0,0 +1,321 @@
+# @impact/chatbot v2.0.0
+
+Standalone chatbot library - TypeScript conversion of smartBot with enhanced features.
+
+## Overview
+
+This library is a **TypeScript conversion** of `src/core/commonComponents/smartBot` with additional enhancements for widget rendering, streaming, and special character handling.
+
+**Key Features:**
+- TypeScript support with full type declarations
+- Widget data accumulation for tables, graphs, and combined content
+- Special character decoding (`ia_char` placeholders)
+- Streaming/SSE support with abort handling
+- Step-by-step progress indicators
+
+---
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js 16+ 
+- npm 8+
+- Host application with Redux store configured
+
+### Installation
+
+```bash
+# Navigate to the chatbot-v2 directory
+cd frontend/chatbot-v2
+
+# Install dependencies
+npm install --legacy-peer-deps
+
+# Build the library
+npm run build
+
+# Create distributable package
+npm pack
+```
+
+This creates `impact-chatbot-2.0.0.tgz` in the project root.
+
+### Install in Host Application
+
+```bash
+# From host app directory (e.g., mtp-mfe-inventorysmart/frontend)
+npm install ../../chatbot-v2/impact-chatbot-2.0.0.tgz --legacy-peer-deps
+```
+
+---
+
+## Build Guide
+
+### Development Build
+
+```bash
+# Install dependencies (use legacy-peer-deps for compatibility)
+npm install --legacy-peer-deps
+
+# Build library (creates dist/ folder)
+npm run build
+
+# Type check only (no emit)
+npm run typecheck
+
+# Create tarball for distribution
+npm pack
+```
+
+### Build Output Structure
+
+```
+dist/
+├── index.cjs.js          # CommonJS bundle (~5.4MB)
+├── index.esm.js          # ESM bundle (~5.3MB)
+├── index.cjs.css         # Styles (~8KB)
+├── index.esm.css         # Styles (~8KB)
+├── index.cjs.js.map      # Source map
+├── index.esm.js.map      # Source map
+├── *.d.ts                # Type declarations
+├── chatbot/              # SVG assets
+├── components/           # Component type declarations
+├── hooks/                # Hook type declarations
+└── services/             # Service type declarations
+```
+
+### Rebuild After Changes
+
+```bash
+# Quick rebuild and reinstall in host app
+npm run build && npm pack
+
+# Then in host app directory:
+npm install ../../chatbot-v2/impact-chatbot-2.0.0.tgz --legacy-peer-deps
+```
+
+---
+
+## Installation in Host Application
+
+### Step 1: Install the Package
+
+```bash
+# From local tarball (recommended)
+npm install ./path/to/impact-chatbot-2.0.0.tgz --legacy-peer-deps
+
+# Or link locally during development
+cd chatbot-v2 && npm link
+cd ../host-app && npm link @impact/chatbot
+```
+
+### Step 2: Configure Module Aliases
+
+The library requires the host application to provide certain modules. Add these aliases to your bundler config:
+
+**Webpack (craco.config.js or webpack.config.js):**
+```javascript
+const path = require('path');
+
+module.exports = {
+  webpack: {
+    alias: {
+      'core': path.resolve(__dirname, 'src/core'),
+      'coreAssets': path.resolve(__dirname, 'src/assets'),
+      'config': path.resolve(__dirname, 'src/config'),
+    }
+  }
+};
+```
+
+**Vite (vite.config.js):**
+```javascript
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      'core': path.resolve(__dirname, 'src/core'),
+      'coreAssets': path.resolve(__dirname, 'src/assets'),
+      'config': path.resolve(__dirname, 'src/config'),
+    }
+  }
+});
+```
+
+### Step 3: Import Styles
+
+```javascript
+// In your app's entry point (e.g., index.js or App.js)
+import '@impact/chatbot/dist/index.esm.css';
+```
+
+### Step 4: Configure Redux Store
+
+Ensure your Redux store has the required reducers:
+
+```javascript
+// store.js
+import { combineReducers } from 'redux';
+import smartBotReducer from 'core/reducers/smartBotReducer';
+import filterReducer from 'core/reducers/filterReducer';
+
+const rootReducer = combineReducers({
+  smartBotReducer,
+  filterReducer,
+  // ... other reducers
+});
+```
+
+---
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import SmartBot from '@impact/chatbot';
+
+function App() {
+  const [showModal, setShowModal] = useState(false);
+  const [minimizedMode, setMinimizedMode] = useState(false);
+
+  return (
+    <SmartBot
+      userName="John Doe"
+      showModal={showModal}
+      setShowModal={setShowModal}
+      minimizedMode={minimizedMode}
+      setMinimizedMode={setMinimizedMode}
+      invokeBot={true}
+      dateFormat="MM/DD/YYYY"
+    />
+  );
+}
+```
+
+### Props Reference
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `userName` | string | Yes | Display name for user messages |
+| `showModal` | boolean | Yes | Controls chatbot visibility |
+| `setShowModal` | function | Yes | Callback to toggle visibility |
+| `minimizedMode` | boolean | Yes | Whether chatbot is minimized |
+| `setMinimizedMode` | function | Yes | Callback to toggle minimize |
+| `invokeBot` | boolean | No | Auto-invoke bot on mount |
+| `dateFormat` | string | No | Date format for messages |
+| `baseUrl` | string | No | API base URL override |
+
+---
+
+## External Dependencies
+
+The host application must provide these modules via aliases:
+
+### Required Modules
+
+| Alias | Path | Description |
+|-------|------|-------------|
+| `core` | `src/core` | Redux actions, utilities, styles |
+| `coreAssets` | `src/assets` | SVG icons and images |
+| `config` | `src/config` | API configuration |
+
+### Key Dependencies from Host
+
+```
+core/
+├── actions/
+│   ├── smartBotActions.js
+│   └── tenantConfigActions.js
+├── reducers/
+│   └── smartBotReducer.js
+├── Utils/
+│   ├── axios.js
+│   └── functions/utils.js (replaceSpecialCharacter)
+├── commonComponents/
+│   ├── dateRangePicker/
+│   └── AgGrid/
+└── styles/
+    └── colours.js
+
+config/
+└── api.js (COMBINED_CROSS_DIMENSIONAL_API)
+```
+
+See [DEPENDENCIES.md](./DEPENDENCIES.md) for the complete list.
+
+---
+
+## Troubleshooting
+
+### Common Issues
+
+**1. Module not found errors**
+```
+Module not found: Can't resolve 'core/...'
+```
+Solution: Ensure module aliases are configured in your bundler.
+
+**2. Peer dependency warnings**
+```
+npm WARN peer dependencies
+```
+Solution: Use `--legacy-peer-deps` flag during installation.
+
+**3. Redux state errors**
+```
+Cannot read property 'smartBotReducer' of undefined
+```
+Solution: Ensure `smartBotReducer` is added to your Redux store.
+
+**4. Styles not loading**
+```
+Chatbot appears unstyled
+```
+Solution: Import the CSS file in your app entry point.
+
+### Debug Mode
+
+To enable debug logging (development only):
+```javascript
+localStorage.setItem('CHATBOT_DEBUG', 'true');
+```
+
+---
+
+## Changelog
+
+### v2.0.0 (Current)
+
+**Features:**
+- TypeScript conversion with full type declarations
+- Widget data accumulation for streaming responses
+- Special character decoding (`replaceSpecialCharacter`)
+- Step update logic with position preservation
+- Streaming abort handling (`wasStreamingAborted`)
+
+**Bug Fixes:**
+- Fixed table widget not rendering from `widget_data`
+- Fixed step order during streaming
+- Fixed submit button appearing after abort
+- Removed debug console.log statements
+
+---
+
+## Source
+
+Converted from: `frontend/src/core/commonComponents/smartBot`
+
+## Migration from Original smartBot
+
+This library is a drop-in replacement for the original smartBot component:
+
+1. Install the package
+2. Configure module aliases
+3. Import from `@impact/chatbot` instead of `core/commonComponents/smartBot`
+4. Import the CSS file
+
+All props, behavior, and functionality remain compatible with the original.

package/dist/components/ChatFooter.d.ts

@@ -0,0 +1,55 @@
+import PropTypes from "prop-types";
+declare const ChatFooter: {
+    ({ classes, globalClasses, showExtendedContent, endCurrentSession, setShowExtendedContent, userInput, setUserInput, fetchUserResultsFromQuery, loader, currentMode, setSelectedModule, chatDataRef, chatDataScreenLinkRef, initiateNewChat, setShowAlert, activeConversationId, setActiveConversationId, setChatDataState, selectedModule, isModuleChanged, setIsModuleChanged, prepareDataAndSendToAgent, currentAgentId, currentSessionId, baseUrl, customChatConfig, chatBotInfoRef, }: {
+        classes: any;
+        globalClasses: any;
+        showExtendedContent: any;
+        endCurrentSession: any;
+        setShowExtendedContent: any;
+        userInput: any;
+        setUserInput: any;
+        fetchUserResultsFromQuery: any;
+        loader: any;
+        currentMode: any;
+        setSelectedModule: any;
+        chatDataRef: any;
+        chatDataScreenLinkRef: any;
+        initiateNewChat: any;
+        setShowAlert: any;
+        activeConversationId: any;
+        setActiveConversationId: any;
+        setChatDataState: any;
+        selectedModule: any;
+        isModuleChanged: any;
+        setIsModuleChanged: any;
+        prepareDataAndSendToAgent: any;
+        currentAgentId: any;
+        currentSessionId: any;
+        baseUrl: any;
+        customChatConfig: any;
+        chatBotInfoRef: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        classes: PropTypes.Validator<object>;
+        globalClasses: PropTypes.Validator<object>;
+        showExtendedContent: PropTypes.Validator<boolean>;
+        endCurrentSession: PropTypes.Validator<(...args: any[]) => any>;
+        setShowExtendedContent: PropTypes.Validator<(...args: any[]) => any>;
+        userInput: PropTypes.Validator<string>;
+        setUserInput: PropTypes.Validator<(...args: any[]) => any>;
+        fetchUserResultsFromQuery: PropTypes.Validator<(...args: any[]) => any>;
+        loader: PropTypes.Validator<boolean>;
+        currentMode: PropTypes.Validator<string>;
+        setSelectedModule: PropTypes.Validator<(...args: any[]) => any>;
+        chatDataRef: PropTypes.Validator<object>;
+        chatDataScreenLinkRef: PropTypes.Validator<object>;
+        initiateNewChat: PropTypes.Validator<(...args: any[]) => any>;
+        setShowAlert: PropTypes.Validator<(...args: any[]) => any>;
+        prepareDataAndSendToAgent: PropTypes.Validator<(...args: any[]) => any>;
+        currentAgentId: PropTypes.Validator<string>;
+        currentSessionId: PropTypes.Validator<string>;
+        baseUrl: PropTypes.Validator<string>;
+        customChatConfig: PropTypes.Validator<object>;
+    };
+};
+export default ChatFooter;

package/dist/components/ChatInput.d.ts

@@ -0,0 +1,27 @@
+import PropTypes from "prop-types";
+declare const ChatInput: {
+    ({ classes, globalClasses, userInput, setUserInput, fetchUserResultsFromQuery, loader, currentMode, prepareDataAndSendToAgent, currentAgentId, currentSessionId, baseUrl, customChatConfig, chatBotInfoRef }: {
+        classes: any;
+        globalClasses: any;
+        userInput: any;
+        setUserInput: any;
+        fetchUserResultsFromQuery: any;
+        loader: any;
+        currentMode: any;
+        prepareDataAndSendToAgent: any;
+        currentAgentId: any;
+        currentSessionId: any;
+        baseUrl: any;
+        customChatConfig: any;
+        chatBotInfoRef: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        classes: PropTypes.Validator<object>;
+        globalClasses: PropTypes.Validator<object>;
+        userInput: PropTypes.Validator<string>;
+        setUserInput: PropTypes.Validator<(...args: any[]) => any>;
+        fetchUserResultsFromQuery: PropTypes.Validator<(...args: any[]) => any>;
+        loader: PropTypes.Validator<boolean>;
+    };
+};
+export default ChatInput;

package/dist/components/ChatLayout.d.ts

@@ -0,0 +1,44 @@
+import PropTypes from "prop-types";
+declare const ChatLayout: {
+    ({ classes, globalClasses, showModal, minimizedMode, handleMouseDown, isDraggingRef, minimizedBtnRef, setShowModal, setMinimizedMode, closeBot, showExtendedContent, setShowExtendedContent, currentMode, setCurrentMode, enableRefreshAction, refreshLoader, refreshAndUpdateUserManual, children, }: {
+        classes: any;
+        globalClasses: any;
+        showModal: any;
+        minimizedMode: any;
+        handleMouseDown: any;
+        isDraggingRef: any;
+        minimizedBtnRef: any;
+        setShowModal: any;
+        setMinimizedMode: any;
+        closeBot: any;
+        showExtendedContent: any;
+        setShowExtendedContent: any;
+        currentMode: any;
+        setCurrentMode: any;
+        enableRefreshAction: any;
+        refreshLoader: any;
+        refreshAndUpdateUserManual: any;
+        children: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        classes: PropTypes.Validator<object>;
+        globalClasses: PropTypes.Validator<object>;
+        showModal: PropTypes.Validator<boolean>;
+        minimizedMode: PropTypes.Validator<boolean>;
+        handleMouseDown: PropTypes.Validator<(...args: any[]) => any>;
+        isDraggingRef: PropTypes.Validator<object>;
+        minimizedBtnRef: PropTypes.Validator<object>;
+        setShowModal: PropTypes.Validator<(...args: any[]) => any>;
+        setMinimizedMode: PropTypes.Validator<(...args: any[]) => any>;
+        closeBot: PropTypes.Validator<(...args: any[]) => any>;
+        showExtendedContent: PropTypes.Validator<boolean>;
+        setShowExtendedContent: PropTypes.Validator<(...args: any[]) => any>;
+        currentMode: PropTypes.Validator<string>;
+        setCurrentMode: PropTypes.Validator<(...args: any[]) => any>;
+        enableRefreshAction: PropTypes.Validator<boolean>;
+        refreshLoader: PropTypes.Validator<boolean>;
+        refreshAndUpdateUserManual: PropTypes.Validator<(...args: any[]) => any>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export default ChatLayout;

package/dist/components/ChatPlaceholder.d.ts

@@ -0,0 +1,3 @@
+export declare const useStyles: any;
+declare const ChatPlaceholder: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ChatPlaceholder;

package/dist/components/HighlightedRenderer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * HighlightedRenderer will take sentence
+ * as a param to it and replace the word
+ * which is inside this braces like this
+ * {word} with a highlighted word and
+ * return back this new sentence with
+ * these words highlighted
+ * @param {string} sentence
+ * @returns
+ */
+declare const HighlightedRenderer: ({ sentence }: {
+    sentence: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default HighlightedRenderer;

package/dist/components/LinkRenderer.d.ts

@@ -0,0 +1,4 @@
+export declare const LinkRenderer: ({ text }: {
+    text: any;
+}) => any;
+export default LinkRenderer;

package/dist/components/LoadingOverlay.d.ts

@@ -0,0 +1,2 @@
+declare const LoadingOverlay: () => import("react/jsx-runtime").JSX.Element;
+export default LoadingOverlay;

package/dist/components/ModuleSelection.d.ts

@@ -0,0 +1,28 @@
+import PropTypes from "prop-types";
+declare const ModuleSelection: {
+    ({ classes, selectedModule, isCardVisible, setIsCardVisible, currentMode, setSelectedModule, fetchUserResultsFromQuery, setScreenName, setLink, activeConversationId, setIsModuleChanged }: {
+        classes: any;
+        selectedModule: any;
+        isCardVisible: any;
+        setIsCardVisible: any;
+        currentMode: any;
+        setSelectedModule: any;
+        fetchUserResultsFromQuery: any;
+        setScreenName: any;
+        setLink: any;
+        activeConversationId: any;
+        setIsModuleChanged: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        classes: PropTypes.Validator<object>;
+        selectedModule: PropTypes.Validator<object>;
+        isCardVisible: PropTypes.Validator<boolean>;
+        setIsCardVisible: PropTypes.Validator<(...args: any[]) => any>;
+        currentMode: PropTypes.Validator<string>;
+        setSelectedModule: PropTypes.Validator<(...args: any[]) => any>;
+        fetchUserResultsFromQuery: PropTypes.Validator<(...args: any[]) => any>;
+        setScreenName: PropTypes.Validator<(...args: any[]) => any>;
+        setLink: PropTypes.Validator<(...args: any[]) => any>;
+    };
+};
+export default ModuleSelection;

package/dist/components/RedirectLink.d.ts

@@ -0,0 +1,5 @@
+declare const RedirectLink: ({ to, screenName }: {
+    to: any;
+    screenName: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default RedirectLink;

package/dist/components/SavedChat.d.ts

@@ -0,0 +1,2 @@
+declare const SavedChat: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default SavedChat;

package/dist/components/SelectedModule.d.ts

@@ -0,0 +1,7 @@
+declare const SelectedModule: ({ onSelect, selectedModule, currentMode, activeConversationId }: {
+    onSelect: any;
+    selectedModule: any;
+    currentMode: any;
+    activeConversationId: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SelectedModule;

package/dist/components/TextRenderer.d.ts

@@ -0,0 +1,7 @@
+import './TextRenderer.scss';
+/**
+ * Markdown renderer component with sanitization
+ */
+export declare const TextRenderer: ({ text }: {
+    text: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/chatbot-input/components/FilterValueInput.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Component to render filter value input based on display_type
+ * This component handles different field types similar to form/index.jsx
+ */
+declare const FilterValueInput: ({ filterConfig, value, onChange, options, isLoading, isMulti, selectedOptions, setSelectedOptions, }: {
+    filterConfig: any;
+    value: any;
+    onChange: any;
+    options?: any[];
+    isLoading?: boolean;
+    isMulti?: boolean;
+    selectedOptions?: any[];
+    setSelectedOptions: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FilterValueInput;

package/dist/components/chatbot-input/hooks/useMentionState.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+/**
+ * Custom hook to manage mention state
+ * @returns {Object} Mention state and setters
+ */
+export declare const useMentionState: () => {
+    showMentionSelect: boolean;
+    isSelectOpen: boolean;
+    mentionStartPos: any;
+    mentionSearch: string;
+    currentMentionGroupId: any;
+    selectionStage: string;
+    selectedFilter: any;
+    currentOptions: any[];
+    selectedOptions: any[];
+    isAllSelected: boolean;
+    isLoadingValues: boolean;
+    prevIsOpenRef: React.MutableRefObject<boolean>;
+    setShowMentionSelect: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsSelectOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setMentionStartPos: React.Dispatch<any>;
+    setMentionSearch: React.Dispatch<React.SetStateAction<string>>;
+    setCurrentMentionGroupId: React.Dispatch<any>;
+    setSelectionStage: React.Dispatch<React.SetStateAction<string>>;
+    setSelectedFilter: React.Dispatch<any>;
+    setCurrentOptions: React.Dispatch<React.SetStateAction<any[]>>;
+    setSelectedOptions: React.Dispatch<React.SetStateAction<any[]>>;
+    setIsAllSelected: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsLoadingValues: React.Dispatch<React.SetStateAction<boolean>>;
+    resetMentionState: () => void;
+    initializeFilterSelection: (position: any, filterOptions: any) => void;
+    transitionToValueSelection: (filter: any, valueOptions: any) => void;
+};

package/dist/components/chatbot-input/index.d.ts

@@ -0,0 +1,3 @@
+import "./chatbot.scss";
+declare const ChatbotInput: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ChatbotInput;

package/dist/components/chatbot-input/index_new.d.ts

@@ -0,0 +1,3 @@
+import "./chatbot.scss";
+declare const ChatbotInput: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ChatbotInput;

package/dist/components/chatbot-input/index_old_backup.d.ts

@@ -0,0 +1,3 @@
+import "./chatbot.scss";
+declare const ChatbotInput: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ChatbotInput;

package/dist/components/chatbot-input/utils/apiHelpers.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Build payload for filter options API
+ * @param {Object} filterConfig - The selected filter configuration
+ * @param {Array} existingFilters - Array of existing filter selections from editor
+ * @param {Array} filterOptions - All available filter options (to get full filter config)
+ * @returns {Object} API payload
+ */
+export declare const buildFilterOptionsPayload: (filterConfig: any, existingFilters?: any[], filterOptions?: any[]) => {
+    attributes: {
+        attribute_name: any;
+        dimension: any;
+        filter_type: string;
+    }[];
+    filter_type: string;
+    filters: {
+        filter_name: any;
+        filter_id: any;
+        filter_type: string;
+        dimension: any;
+        display_type: any;
+        check_configuration: any[];
+        is_mandatory: any;
+        extra: {};
+        values: any;
+        attribute_name: any;
+        operator: string;
+        display_order: any;
+    }[];
+    is_urm_filter: boolean;
+    screen_name: string;
+    application_code: number;
+};
+/**
+ * Fetch filter values from API (with caching)
+ * @param {Object} filterConfig - The selected filter configuration
+ * @param {Array} existingFilters - Array of existing filter selections from editor
+ * @param {Array} filterOptions - All available filter options (to get full filter config)
+ * @returns {Promise<Array>} Array of filter values
+ */
+export declare const fetchFilterValues: (filterConfig: any, existingFilters?: any[], filterOptions?: any[]) => Promise<any>;
+/**
+ * Clear the filter values cache
+ * Useful for testing or when you want to force fresh data
+ */
+export declare const clearFilterValuesCache: () => void;
+/**
+ * Get cache size (for debugging)
+ * @returns {number} Number of cached filter values
+ */
+export declare const getCacheSize: () => number;