Skip to content

Fernandorocha/ent 808 adjusting agentops popup chat #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fernando-plank merged 13 commits into from
Mar 11, 2025
Merged

Fernandorocha/ent 808 adjusting agentops popup chat #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
18a66c0
chore: bump version to 0.0.16
fernando-plank Feb 24, 2025
01f21c5
chore: bump version to 0.0.18
fernando-plank Feb 24, 2025
605be28
feat: class to build css aparta
fernando-plank Mar 11, 2025
0f672e8
Merge branch 'main' of github.com:Entelligence-AI/chat-popup
fernando-plank Mar 11, 2025
3246a9e
Merge branch 'main' into fernandorocha/ent-808-adjusting-agentops-pop…
fernando-plank Mar 11, 2025
1218e6a
fix: remove styles to let import separetelly
fernando-plank Mar 11, 2025
e07163a
fix: imports
fernando-plank Mar 11, 2025
dd7ed62
fix: update the lib to build correctly the packages and run
fernando-plank Mar 11, 2025
1f6d672
add readme with the latest changes
fernando-plank Mar 11, 2025
61800ef
ignore npmrc
fernando-plank Mar 11, 2025
bad3bf7
update gitignore
fernando-plank Mar 11, 2025
60354d6
delete pack
fernando-plank Mar 11, 2025
c233210
update gitignore
fernando-plank Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,14 @@ apps/svendio-backend/
apps/svendio-frontend/
.turbo
.idea/dbnavigator.xml

# temp files
.temp.css

# npmrc
.npmrc
.npmrc.local
.npmrc.github
.npmrc.npm
npmrc.github
npmrc.npm
Comment on lines +72 to +82
Copy link

@github-actions github-actions bot Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description Entelligence.AI

It seems like you're trying to ignore multiple .npmrc files. However, the last two entries (npmrc.github and npmrc.npm) are missing the leading dot, which might be a mistake. If these are indeed files that need to be ignored, please add the leading dot to them. Also, there's duplication in the entries for .npmrc.github and .npmrc.npm. You should remove the duplicates to keep the .gitignore file clean and maintainable.

# temp files
.temp.css

# npmrc
.npmrc
.npmrc.local
.npmrc.github
.npmrc.npm
-81: npmrc.github
-82: npmrc.npm

119 changes: 52 additions & 67 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,52 @@ A customizable chat widget that provides AI-powered chat functionality based on
## Installation

```bash
npm install
# Using npm
npm install @entelligence-ai/chat-widget

# Using pnpm
pnpm add @entelligence-ai/chat-widget
```

```bash
pnpm install
## Usage

### React Component
```tsx
import { EntelligenceChat } from '@entelligence-ai/chat-widget/react';
// Import styles separately
import '@entelligence-ai/chat-widget/style.css';

function App() {
return (
<EntelligenceChat
analyticsData={{
apiKey: "your-api-key",
repoName: "your-repo",
organization: "your-org",
companyName: "Your Company",
theme: "light"
}}
/>
);
}
```
Comment on lines +19 to +36
Copy link

@github-actions github-actions bot Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description Entelligence.AI

The EntelligenceChat component is missing prop types or an interface for the analyticsData object. This could lead to potential misuse of the component due to lack of type checking. Consider adding prop types or an interface to ensure proper usage.

interface AnalyticsData {
  apiKey: string;
  repoName: string;
  organization: string;
  companyName: string;
  theme: string;
}

function App() {
  return (
    <EntelligenceChat 
      analyticsData={{
        apiKey: "your-api-key",
        repoName: "your-repo",
        organization: "your-org",
        companyName: "Your Company",
        theme: "light"
      }} 
    />
  );
}


### Vanilla JavaScript
```html
<script type="module">
import { EntelligenceChatInit } from '@entelligence-ai/chat-widget';
import '@entelligence-ai/chat-widget/style.css';

EntelligenceChatInit({
analyticsData: {
apiKey: "your-api-key",
repoName: "your-repo",
organization: "your-org",
companyName: "Your Company",
theme: "light"
}
});
</script>
Comment on lines +40 to +53
Copy link

@github-actions github-actions bot Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description Entelligence.AI

Similar to the previous comment, the EntelligenceChatInit function is missing an interface for the analyticsData object. This could lead to potential misuse of the function due to lack of type checking. Consider adding an interface to ensure proper usage.

// TypeScript
interface AnalyticsData {
  apiKey: string;
  repoName: string;
  organization: string;
  companyName: string;
  theme: string;
}

EntelligenceChatInit({
  analyticsData: {
    apiKey: "your-api-key",
    repoName: "your-repo",
    organization: "your-org",
    companyName: "Your Company",
    theme: "light"
  }
});

```

## Development
Expand Down Expand Up @@ -82,6 +123,7 @@ The application follows this initialization flow:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="node_modules/@entelligence-ai/chat-widget/style.css">
Copy link

@github-actions github-actions bot Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description Entelligence.AI

The path to the CSS file seems to be incorrect. It's unlikely that the node_modules directory would be in the same directory as this HTML file when served. You might want to use a relative path from the root of your project or a CDN link if available.

-     <link rel="stylesheet" href="node_modules/@entelligence-ai/chat-widget/style.css">
+     <link rel="stylesheet" href="/path/to/@entelligence-ai/chat-widget/style.css">

</head>
<body>
<div id="root"></div>
Expand All @@ -95,6 +137,7 @@ The application follows this initialization flow:
// src/index.tsx
import { createRoot } from 'react-dom/client';
import { App } from './app';
import '@entelligence-ai/chat-widget/style.css';

const root = createRoot(document.getElementById('root')!);
root.render(<App />);
Expand Down Expand Up @@ -124,74 +167,16 @@ export const App = ({
};
```

4. The build process creates two distinct bundles:
- A React component library for direct React integration
- A vanilla JS bundle that can self-initialize

#### Build Configuration
The project uses Vite with dual build modes for React and Vanilla JS:
### CSS and Styling
The package includes two CSS bundles:
- `@entelligence-ai/chat-widget/style.css` - Main styles for the widget
- `@entelligence-ai/chat-widget/styles.css` - Additional styles (if needed)

You must import at least the main style.css for the widget to work properly:
```typescript
// vite.config.ts
export default defineConfig(({ mode }) => ({
build: {
lib: {
entry: mode === 'react'
? 'src/react/index.ts'
: 'src/main-vanilla.tsx',
formats: ['es', 'umd']
},
rollupOptions: {
manualChunks: {
'react-vendor': ['react', 'react-dom'],
'ui-vendor': ['@assistant-ui/react'],
'markdown': ['@assistant-ui/react-markdown'],
'syntax': ['@assistant-ui/react-syntax-highlighter']
}
}
}
}))
import '@entelligence-ai/chat-widget/style.css';
```
Comment on lines +170 to 178
Copy link

@github-actions github-actions bot Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description Entelligence.AI

There seems to be a typo in the CSS file name. You've mentioned @entelligence-ai/chat-widget/styles.css as an additional style, but it's not clear if this file actually exists or if it was meant to be @entelligence-ai/chat-widget/style.css. Please confirm and correct if necessary.

- - `@entelligence-ai/chat-widget/styles.css` - Additional styles (if needed)
+ - `@entelligence-ai/chat-widget/additional-style.css` - Additional styles (if needed)


#### HTML Integration
```html
<!DOCTYPE html>
<html>
<head>
<script type="module">
import { EntelligenceChat } from './src/main.tsx'

const container = document.getElementById('chat-widget')
EntelligenceChat.init({
analyticsData: {
repoName: import.meta.env.VITE_REPO_NAME,
organization: import.meta.env.VITE_ORGANIZATION,
apiKey: import.meta.env.VITE_API_KEY,
companyName: import.meta.env.VITE_COMPANY_NAME
}
}, container)
</script>
</head>
<body>
<div id="chat-widget"></div>
</body>
</html>
```

#### Build Process
1. Vite builds two versions:
- React component library (`/react`)
- Vanilla JS bundle
2. Code is optimized through:
- Tree shaking
- Code splitting
- Chunk optimization
- CSS code splitting
3. Output includes:
- ES modules
- UMD bundles
- TypeScript declarations

### Environment Variables
Create a `.env` file in the root directory with:
```env
Expand Down
Binary file removed entelligence-ai-chat-widget-0.0.15.tgz
View file
Open in desktop
Binary file not shown.
11 changes: 11 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<link rel="stylesheet" href="/styles.css">
<script>
// Completely disable React Refresh
window.__vite_plugin_react_preamble_installed__ = true;
window.$RefreshReg$ = function() {};
window.$RefreshSig$ = function() {
return function(type) {
return type;
};
};
</script>
</head>
<body>
<div id="root"></div>
Expand Down
71 changes: 41 additions & 30 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@entelligence-ai/chat-widget",
"version": "0.0.15",
"version": "0.0.19",
"private": false,
"publishConfig": {
"access": "restricted",
Expand All @@ -18,95 +18,106 @@
"README.md"
],
"scripts": {
"dev": "vite",
"build": "vite build && vite build --mode react && tsc --project tsconfig.build.json",
"dev": "npm run combine-css && npm run build:css && vite --config vite.config.ts --force",
"dev:no-refresh": "npm run build:css && vite --config vite.config.ts --force --mode development",
"build": "npm run combine-css && vite --config vite.config.css.ts build && npm run build:types && vite build && vite build --mode react",
"build:types": "tsc --project tsconfig.build.json && tsc --project tsconfig.build.json --outDir dist/types/react --declarationDir dist/types/react --declaration true --emitDeclarationOnly true --jsx react-jsx",
"combine-css": "node scripts/combine-css.js",
"build:css": "tailwindcss -i ./src/combined.css -o ./public/styles.css",
"version:update": "ts-node scripts/version-update.ts",
"prepublishOnly": "npm run build",
"publish:github": "npm publish --access public --registry=https://npm.pkg.github.com",
"publish:npm": "npm publish --access public --registry=https://registry.npmjs.org/",
"publish": "npm run version:update && npm run publish:github && npm run publish:npm"
"publish:all": "npm run version:update && npm run publish:github && npm run publish:npm"
},
"dependencies": {
"@assistant-ui/react": "^0.7.88",
"@assistant-ui/react-markdown": "^0.7.21",
"@assistant-ui/react-syntax-highlighter": "^0.7.10",
"@assistant-ui/react-ui": "^0.1.7",
"@assistant-ui/react": "0.7.88",
"@assistant-ui/react-markdown": "0.7.21",
"@assistant-ui/react-syntax-highlighter": "0.7.10",
"@assistant-ui/react-ui": "0.1.7",
"@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-tooltip": "^1.1.8",
"class-variance-authority": "^0.7.1",
"classnames": "^2.5.1",
"clsx": "^2.1.1",
"debug": "^4.4.0",
"extend": "^3.0.2",
"lucide-react": "^0.475.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^5.4.0",
"tailwind-merge": "^3.0.2",
"tailwindcss": "^3.4.9"
"style-to-js": "^1.1.16",
"tailwind-merge": "^3.0.2"
},
"devDependencies": {
"@babel/preset-react": "^7.26.3",
"@eslint/js": "^9.8.0",
"@types/node": "^22.2.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@rollup/plugin-commonjs": "^25.0.0",
"@types/node": "^22.13.10",
"@types/react": "18.2.45",
"@types/react-dom": "18.2.18",
"@types/react-syntax-highlighter": "^15.5.13",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20",
"autoprefixer": "^10.4.16",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^9.8.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0",
"postcss": "^8.4.41",
"postcss": "^8.4.35",
"posthog-js": "^1.155.0",
"react-syntax-highlighter": "^15.6.1",
"remark-gfm": "^4.0.1",
"tailwindcss": "^3.4.0",
"tailwindcss-animate": "^1.0.7",
"ts-node": "^10.9.2",
"typescript": "^5.5.3",
"typescript-eslint": "^8.0.0",
"vite": "^5.4.0",
"vite-plugin-css-injected-by-js": "^3.5.1",
"vite-plugin-dts": "^4.5.0"
"vite-plugin-dts": "^4.5.0",
"clean-css": "^5.3.2"
},
"main": "./dist/vanilla/entelligence-chat.umd.js",
"module": "./dist/vanilla/entelligence-chat.es.js",
"types": "./dist/types/main-vanilla.d.ts",
"exports": {
".": {
"types": "./dist/types/main-vanilla.d.ts",
"types": "./dist/types/main.d.ts",
"import": "./dist/vanilla/entelligence-chat.es.js",
"require": "./dist/vanilla/entelligence-chat.umd.js"
},
"./react": {
"types": "./dist/types/react/index.d.ts",
"module": "./dist/react/entelligence-chat-react.es.js",
"types": "./dist/types/react/react/index.d.ts",
"import": "./dist/react/entelligence-chat-react.es.js",
"require": "./dist/react/entelligence-chat-react.umd.js",
"default": "./dist/react/entelligence-chat-react.umd.js"
"require": "./dist/react/entelligence-chat-react.umd.js"
},
"./style.css": {
"import": "./dist/react/style.css",
"require": "./dist/react/style.css"
},
"./styles.css": {
"import": "./dist/styles.css",
"require": "./dist/styles.css"
}
},
"typesVersions": {
"*": {
"react": [
"./dist/types/react/index.d.ts"
"./dist/types/react/react/index.d.ts"
],
"*": [
"./dist/types/main-vanilla.d.ts"
"./dist/types/main.d.ts"
]
}
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
},
},
"pnpm": {
"overrides": {
"esbuild@<=0.24.2": ">=0.25.0"
}
},
"resolutions": {
"react": "18.2.0",
"@types/react": "18.2.45"
}
}
Loading
Loading