cindy-ai-chatbot 1.0.14

package/README.md

@@ -0,0 +1,184 @@
+## Cindy ChatBot
+
+An AI-powered chatbot component for React applications.
+
+## Installation
+
+### Using npm
+
+```plaintext
+npm install chatbot-cindy
+```
+
+### Using yarn
+
+```plaintext
+yarn add chatbot-cindy
+```
+
+## Usage
+
+### React Applications
+
+#### Basic Usage
+
+```plaintext
+import React from 'react';
+import { CindyChatBot } from 'chatbot-cindy';
+
+// Import required styles
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
+import 'primereact/resources/primereact.min.css';
+import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
+import 'chatbot-cindy/dist/css/cindy-chatbot.css';
+
+function App() {
+  return (
+    <div classname="App">
+      <cindychatbot baseurl="{process.env.REACT_APP_CINDY_BASE_URL" ||="" ''}="" orgid="{process.env.REACT_APP_CINDY_ORG_ID" projectid="{process.env.REACT_APP_CINDY_PROJECT_ID" doctype="{process.env.REACT_APP_CINDY_DOC_TYPE" apptype="{process.env.REACT_APP_CINDY_APP_TYPE" accesstokenkey="{process.env.REACT_APP_CINDY_ACCESS_TOKEN_KEY" logoutroute="{process.env.REACT_APP_CINDY_LOGOUT_ROUTE" '="" logout="" '}="" checktokenroute="{process.env.REACT_APP_CINDY_CHECK_TOKEN_ROUTE"}="">
+    </cindychatbot></div>
+  );
+}
+
+export default App;
+```
+
+#### Advanced Usage with Custom Props
+
+```plaintext
+import React from 'react';
+import { CindyChatBot } from 'chatbot-cindy';
+
+// Import required styles
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
+import 'primereact/resources/primereact.min.css';
+import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
+import 'chatbot-cindy/dist/css/cindy-chatbot.css';
+
+// Define custom graph items
+const CUSTOM_GRAPHS = [
+  { name: "Bar Chart", code: "bar", type: "g1" },
+  { name: "Donut Chart", code: "donut", type: "g2" },
+  { name: "Pie", code: "pie", type: "g4" },
+];
+
+function App() {
+  return (
+    <div classname="App">
+      <cindychatbot baseurl="https://api.example.com" orgid="your-org-id" projectid="your-project-id" doctype="your-doc-type" apptype="your-app-type" accesstokenkey="your-access-token-key" logoutroute="/custom-logout/" checktokenroute="/api/v1/custom/refresh" graphitems="{CUSTOM_GRAPHS}" aiiconsrc="/path/to/custom-icon.svg" cindylogosrc="/path/to/custom-logo.svg" cindylogoheight="{60}" cindylogowidth="{60}" cindylogoalt="Custom AI Logo" headertitle="Custom AI Bot" headersubtitle="Your AI Assistant" helptext="This is a custom AI assistant. Ask me anything!">
+    </cindychatbot></div>
+  );
+}
+
+export default App;
+```
+
+### Environment Variables
+
+For the basic setup, you can configure the chatbot using environment variables:
+
+REACT\_APP\_CINDY\_BASE\_URL=https://api.example.com
+
+## Available Props
+
+| Prop Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| graphItems | Array | `[{ name: "Bar Chart", code: "bar", type: "g1" }, { name: "Donut Chart", code: "donut", type: "g2" }, { name: "Pie", code: "pie", type: "g4" }, { name: "Line", code: "line", type: "g5" }]` | Array of graph types available in the chatbot |
+| aiIconSrc | String | "/images/ai-icon.svg" | Path to the AI icon image |
+| cindyLogoSrc | String | "/images/cindy-white.svg" | Path to the Cindy logo image |
+| cindyLogoHeight | Number | 54 | Height of the Cindy logo |
+| cindyLogoWidth | Number | 54 | Width of the Cindy logo |
+| cindyLogoAlt | String | "Ai Icon" | Alt text for the Cindy logo |
+| expandedStyle | Object | `{ width: "80%", height: "100vh", maxHeight: "100%", margin: "0px" }` | Style for expanded chatbot view |
+| dialogStyle | Object | `{ width: "523px", height: "684px" }` | Style for dialog chatbot view |
+| position | String | "bottom-right" | Position of the chatbot icon |
+| dialogContentClassName | String | "p-0 border-round-top-sm" | Class name for dialog content |
+| headerStyle | String | "p-4 flex align-items-center justify-content-between fixed h-\[86px\] bg-\[#18279A\] z-\[1\]" | Style for the header |
+| headerTitle | String | "Cindy.ai" | Title displayed in the header |
+| headerSubtitle | String | "Gen AI Companion" | Subtitle displayed in the header |
+| headerTitleStyle | String | "m-0 text-xl font-bold text-\[#FCFCFD\]" | Style for the header title |
+| headerSubtitleStyle | String | "m-0 text-base text-\[#FCFCFD\]" | Style for the header subtitle |
+| helpText | String | "The response is AI-generated and should be independently verified for accuracy." | Help text displayed in the chatbot |
+
+## Styling
+
+### Required CSS Imports
+
+For both React and Vue.js applications, you need to import the following CSS files:
+
+```plaintext
+// Import required styles
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
+import 'primereact/resources/primereact.min.css';
+import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
+import 'chatbot-cindy/dist/css/cindy-chatbot.css';
+```
+
+### Troubleshooting Font Issues
+
+If you encounter font loading issues, make sure:
+
+1.  You've imported all the required CSS files as shown above
+2.  Your bundler is configured to handle font files (if you're using webpack, ensure you have the appropriate loaders)
+3.  The fonts directory is accessible in your deployed application
+
+#### Webpack Configuration for Fonts
+
+If you're using webpack, ensure you have the appropriate loaders for font files:
+
+```javascript
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      // ...
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext]'
+        }
+      }
+    ]
+  }
+};
+```
+
+## How It Works
+
+**Centralized CSS Imports**: By moving all CSS imports to the library entry point, you ensure they're properly processed by your bundler.
+
+**Rollup Configuration**: The package's rollup.config.js is set up to extract CSS with:
+
+**Font Handling**: The package includes all necessary font files and properly references them in the CSS.
+
+This approach ensures that:
+
+*   CSS is properly bundled and extracted
+*   Font files are included and properly referenced
+*   Users know they need to import the CSS
+*   The component itself doesn't have redundant imports that might cause issues
+
+## Browser Support
+
+The component is compatible with all modern browsers:
+
+*   Chrome (latest)
+*   Firefox (latest)
+*   Safari (latest)
+*   Edge (latest)
+
+## License
+
+MIT
+
+```javascript
+postcss({
+  extensions: ['.css', '.scss'],
+  minimize: true,
+  extract: 'css/cindy-chatbot.css',
+}),
+```