hitech-chatbot-react 1.0.0

package/README.md

@@ -0,0 +1,38 @@
+# hitech-chat-react
+
+A ready-to-use React component for [n8n chat](https://github.com/n8n-io/n8n).
+
+## Installation
+
+```bash
+npm install @hitech/chatbot
+```
+
+Note: This package requires `react` and `react-dom` as peer dependencies.
+
+## Usage
+
+```tsx
+import { Chatbot } from '@hitech/chatbot';
+import '@hitech/chatbot/dist/index.css';
+
+function App() {
+  return (
+    <div className="App">
+      <ChatN8N 
+        webhookUrl="https://your-n8n-instance.com/webhook/..." 
+      />
+    </div>
+  );
+}
+```
+
+## Features
+
+- Pre-configured with HiTech AI settings.
+- Automatic session loading.
+- Custom welcome messages and i18n support.
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1 @@
+:root{--chat--color--primary: #e74266;--chat--color--primary-shade-50: #db4061;--chat--color--primary--shade-100: #cf3c5c;--chat--color--secondary: #20b69e;--chat--color-secondary-shade-50: #1ca08a;--chat--color-white: #ffffff;--chat--color-light: #f2f4f8;--chat--color-light-shade-50: #e6e9f1;--chat--color-light-shade-100: #c2c5cc;--chat--color-medium: #d2d4d9;--chat--color-dark: #101330;--chat--color-disabled: #777980;--chat--color-typing: #404040;--chat--input--text-color: #404040;--chat--spacing: 1rem;--chat--border-radius: .25rem;--chat--transition-duration: .15s;--chat--window--width: 400px;--chat--window--height: 600px;--chat--header-height: auto;--chat--header--padding: var(--chat--spacing);--chat--header--background: var(--chat--color-dark);--chat--header--border-top: none;--chat--header--border-bottom: none;--chat--heading--font-size: 2em;--chat--header--color: var(--chat--color-light);--chat--subtitle--font-size: inherit;--chat--subtitle--line-height: 1.8;--chat--textarea--height: 50px;--chat--message--font-size: 1rem;--chat--message--padding: var(--chat--spacing);--chat--message--border-radius: var(--chat--border-radius);--chat--message-line-height: 1.8;--chat--message--bot--background: var(--chat--color-white);--chat--message--bot--color: var(--chat--color-dark);--chat--message--bot--border: none;--chat--message--user--background: var(--chat--color--secondary);--chat--message--user--color: var(--chat--color-white);--chat--message--user--border: none;--chat--message--pre--background: rgba(0, 0, 0, .05);--chat--toggle--background: var(--chat--color--primary);--chat--toggle--hover--background: var(--chat--color--primary-shade-50);--chat--toggle--active--background: var(--chat--color--primary--shade-100);--chat--toggle--color: var(--chat--color-white);--chat--toggle--size: 64px}

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ChatbotProps {
+    webhookUrl: string;
+}
+declare const Chatbot: ({ webhookUrl }: ChatbotProps) => react_jsx_runtime.JSX.Element;
+
+export { Chatbot };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ChatbotProps {
+    webhookUrl: string;
+}
+declare const Chatbot: ({ webhookUrl }: ChatbotProps) => react_jsx_runtime.JSX.Element;
+
+export { Chatbot };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var g=(a,t)=>{for(var e in t)r(a,e,{get:t[e],enumerable:!0})},b=(a,t,e,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of l(t))!n.call(a,o)&&o!==e&&r(a,o,{get:()=>t[o],enumerable:!(c=d(t,o))||c.enumerable});return a};var m=a=>b(r({},"__esModule",{value:!0}),a);var p={};g(p,{Chatbot:()=>u});module.exports=m(p);var h=require("react"),w=require("@n8n/chat/style.css");var i=require("@n8n/chat"),s=require("react/jsx-runtime"),u=({webhookUrl:a})=>((0,h.useEffect)(()=>{(0,i.createChat)({webhookUrl:a,target:"#chatbot",mode:"window",loadPreviousSession:!0,metadata:{},showWelcomeScreen:!1,defaultLanguage:"en",initialMessages:["It's HiTech AI! \u{1F44B}","I can help you with all your questions and tasks about ArcGIS Pro. What can I do for you?"],i18n:{en:{title:"Hi there! \u{1F44B}",subtitle:"Start a chat. We're here to help you 24/7.",footer:"",getStarted:"New Conversation",inputPlaceholder:"Type your question..",closeButtonTooltip:"Close"}}})},[a]),(0,s.jsx)("div",{id:"chatbot"}));0&&(module.exports={Chatbot});

package/dist/index.mjs

@@ -0,0 +1 @@
+import{useEffect as t}from"react";import"@n8n/chat/style.css";import{createChat as o}from"@n8n/chat";import{jsx as e}from"react/jsx-runtime";var l=({webhookUrl:a})=>(t(()=>{o({webhookUrl:a,target:"#chatbot",mode:"window",loadPreviousSession:!0,metadata:{},showWelcomeScreen:!1,defaultLanguage:"en",initialMessages:["It's HiTech AI! \u{1F44B}","I can help you with all your questions and tasks about ArcGIS Pro. What can I do for you?"],i18n:{en:{title:"Hi there! \u{1F44B}",subtitle:"Start a chat. We're here to help you 24/7.",footer:"",getStarted:"New Conversation",inputPlaceholder:"Type your question..",closeButtonTooltip:"Close"}}})},[a]),e("div",{id:"chatbot"}));export{l as Chatbot};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "hitech-chatbot-react",
+  "version": "1.0.0",
+  "description": "Ready-to-use React component for chat",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --minify --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
+    "lint": "tsc"
+  },
+  "keywords": [
+    "chat",
+    "react",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
+  "dependencies": {
+    "@n8n/chat": "^1.0.0-rc.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}