npm - @l7mp/tivadar-ai-chat-widget - Versions diffs - 1.0.0 - Mend

@l7mp/tivadar-ai-chat-widget 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,3 @@
+Copyright (c) 2025 L7mp.io
+All rights reserved. No warranty, explicit or implicit, provided.

package/README.md ADDED Viewed

@@ -0,0 +1,253 @@
+# @l7mp/ai-chat-widget
+AI-powered chat widget for websites. Works with React, Angular, Vue, Next.js, and vanilla HTML.
+Integrates with Azure OpenAI and Azure AI Search for intelligent, context-aware responses powered by Retrieval-Augmented Generation (RAG).
+## Installation
+```bash
+npm install @l7mp/tivadar-ai-chat-widget
+```
+Or with yarn:
+```bash
+yarn add @l7mp/tivadar-ai-chat-widget
+```
+Or via CDN:
+```html
+<script src="https://unpkg.com/@l7mp/tivadar-ai-chat-widget@latest/widget-webcomponent.js"></script>
+```
+## Quick Start
+### Vanilla HTML
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://unpkg.com/@l7mp/tivadar-ai-chat-widget@latest/widget-webcomponent.js"></script>
+</head>
+<body>
+  <h1>My Website</h1>
+  <tivadar-ai-chat-widget
+    api-key="your-api-key"
+    api-endpoint="https://api.yourdomain.com/chat"
+    position="bottom-right"
+    title="Chat with AI"
+  ></tivadar-ai-chat-widget>
+</body>
+</html>
+```
+### React / Next.js
+```jsx
+// Import once in your app (e.g., _app.tsx or layout.tsx)
+import '@l7mp/tivadar-ai-chat-widget'
+export default function Page() {
+  return (
+    <div>
+      <h1>My Website</h1>
+      <tivadar-ai-chat-widget
+        api-key="your-api-key"
+        api-endpoint="https://api.yourdomain.com/chat"
+        position="bottom-right"
+        title="Chat with AI"
+      />
+    </div>
+  )
+}
+```
+#### React wrapper component (with TypeScript support)
+```jsx
+import AIChatWidget from '@l7mp/ai-chat-widget/react'
+export default function Page() {
+  return (
+    <div>
+      <h1>My Website</h1>
+      <AIChatWidget
+        apiKey="your-api-key"
+        apiEndpoint="https://api.yourdomain.com/chat"
+        position="bottom-right"
+        title="Chat with AI"
+      />
+    </div>
+  )
+}
+```
+### Angular
+```typescript
+// app.module.ts
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@l7mp/tivadar-ai-chat-widget'
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule { }
+```
+```html
+<!-- app.component.html -->
+<h1>My Website</h1>
+<tivadar-ai-chat-widget
+  api-key="your-api-key"
+  api-endpoint="https://api.yourdomain.com/chat"
+  position="bottom-right"
+  title="Chat with AI"
+></tivadar-ai-chat-widget>
+```
+### Vue
+```vue
+<script setup>
+import '@l7mp/tivadar-ai-chat-widget'
+</script>
+<template>
+  <div>
+    <h1>My Website</h1>
+    <tivadar-ai-chat-widget
+      api-key="your-api-key"
+      api-endpoint="https://api.yourdomain.com/chat"
+      position="bottom-right"
+      title="Chat with AI"
+    />
+  </div>
+</template>
+```
+### Svelte
+```svelte
+<script>
+  import '@l7mp/tivadar-ai-chat-widget'
+</script>
+<h1>My Website</h1>
+<tivadar-ai-chat-widget
+  api-key="your-api-key"
+  api-endpoint="https://api.yourdomain.com/chat"
+  position="bottom-right"
+  title="Chat with AI"
+/>
+```
+## Configuration
+The widget accepts the following HTML attributes:
+| Attribute | Type | Required | Default | Description |
+|-----------|------|----------|---------|-------------|
+| `api-key` | string | Yes | - | Your customer API key |
+| `api-endpoint` | string | Yes | - | Chat API endpoint URL |
+| `position` | string | No | `"bottom-right"` | Widget position: `"bottom-right"`, `"bottom-left"`, `"top-right"`, `"top-left"` |
+| `title` | string | No | `"Chat with AI"` | Widget header title |
+| `theme` | string | No | `"light"` | Theme (currently only `"light"` supported) |
+| `placeholder` | string | No | `"Type your message..."` | Input field placeholder |
+| `welcome-message` | string | No | `"Hello! How can I help you today?"` | Initial greeting message |
+### Example with All Options
+```html
+<tivadar-ai-chat-widget
+  api-key="your-api-key"
+  api-endpoint="https://api.yourdomain.com/chat"
+  position="bottom-left"
+  theme="light"
+  title="Support Chat"
+  placeholder="Ask me anything..."
+  welcome-message="Hi! How can I assist you today?"
+></tivadar-ai-chat-widget>
+```
+## Classic Version (Legacy)
+For compatibility with older browsers or if you prefer the imperative API, you can use the classic version:
+```html
+<script src="https://unpkg.com/@l7mp/tivadar-ai-chat-widget@latest/widget.js"></script>
+<script>
+  AIChatWidget.init({
+    apiKey: 'your-api-key',
+    apiEndpoint: 'https://api.yourdomain.com/chat',
+    position: 'bottom-right',
+    title: 'Chat with AI'
+  });
+</script>
+```
+## Browser Support
+- Chrome/Edge 88+
+- Firefox 85+
+- Safari 14.1+
+- Opera 74+
+(Supports all modern browsers with Web Components API)
+## TypeScript
+TypeScript definitions will be included in future releases. For now, you can declare the module:
+```typescript
+// global.d.ts
+declare namespace JSX {
+  interface IntrinsicElements {
+    'tivadar-ai-chat-widget': {
+      'api-key': string
+      'api-endpoint': string
+      position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+      title?: string
+      theme?: 'light' | 'dark'
+      placeholder?: string
+      'welcome-message'?: string
+    }
+  }
+}
+```
+## Development
+### Files
+| File | Description |
+|------|-------------|
+| `widget-webcomponent.js` | Web Component version (recommended) |
+| `widget.js` | Classic vanilla JS version (legacy) |
+### Publish to npm
+```bash
+cd js/
+# Bump version
+npm version patch   # or minor/major
+# Publish (requires npm login)
+npm publish --access public
+```
+## License
+Copyright (c) 2025 L7mp.io
+See LICENSE file for details.

package/index.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    'ai-chat-widget': AIChatWidgetAttributes
+  }
+}
+type AIChatWidgetAttributes = {
+  'api-key'?: string
+  'api-endpoint'?: string
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+  theme?: 'light' | 'dark'
+  icon?: string
+  title?: string
+  placeholder?: string
+  'welcome-message'?: string
+}
+declare module '@l7mp/ai-chat-widget' {
+  const widgetModule: unknown
+  export default widgetModule
+}

package/package.json ADDED Viewed

@@ -0,0 +1,70 @@
+{
+  "name": "@l7mp/tivadar-ai-chat-widget",
+  "version": "1.0.0",
+  "description": "AI-powered chat widget for websites. Works with React, Angular, Vue, Next.js, and vanilla HTML. Integrates with Azure OpenAI and Azure AI Search for RAG-based responses.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "widget-webcomponent.js",
+  "module": "widget-webcomponent.js",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./widget-webcomponent.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    }
+  },
+  "files": [
+    "widget-webcomponent.js",
+    "widget.js",
+    "react.js",
+    "react.d.ts",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "scripts": {
+    "prepublishOnly": "echo 'Ready to publish'"
+  },
+  "keywords": [
+    "chat",
+    "chatbot",
+    "ai",
+    "azure",
+    "openai",
+    "widget",
+    "web-component",
+    "react",
+    "angular",
+    "vue",
+    "nextjs",
+    "rag",
+    "azure-search",
+    "l7mp"
+  ],
+  "author": "L7mp.io <info@l7mp.io>",
+  "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/l7mp/tivadar-ai-chat-widget.git"
+  },
+  "bugs": {
+    "url": "https://github.com/l7mp/tivadar-ai-chat-widget/issues"
+  },
+  "homepage": "https://github.com/l7mp/tivadar-ai-chat-widget#readme",
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "browserslist": [
+    "defaults",
+    "not IE 11",
+    "maintained node versions"
+  ]
+}

package/react.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import * as React from 'react'
+type AIChatWidgetProps = {
+  apiKey?: string
+  apiEndpoint?: string
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+  theme?: 'light' | 'dark'
+  icon?: string
+  title?: string
+  placeholder?: string
+  welcomeMessage?: string
+}
+declare const AIChatWidget: React.ForwardRefExoticComponent<
+  AIChatWidgetProps & React.RefAttributes<HTMLElement>
+>
+export default AIChatWidget
+export { AIChatWidget }

package/react.js ADDED Viewed

@@ -0,0 +1,48 @@
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'
+import './widget-webcomponent.js'
+const attributeProps = [
+  'apiKey',
+  'apiEndpoint',
+  'position',
+  'theme',
+  'icon',
+  'title',
+  'placeholder',
+  'welcomeMessage'
+]
+const toAttributeName = (propName) =>
+  propName.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+const toAttributeMap = (props) =>
+  attributeProps.reduce((acc, propName) => {
+    const value = props[propName]
+    if (value === undefined || value === null || value === '') {
+      return acc
+    }
+    acc[toAttributeName(propName)] = value
+    return acc
+  }, {})
+const AIChatWidget = forwardRef(function AIChatWidget(props, ref) {
+  const internalRef = useRef(null)
+  const instanceKey = useMemo(
+    () => `${props.apiKey ?? ''}-${props.apiEndpoint ?? ''}`,
+    [props.apiKey, props.apiEndpoint]
+  )
+  const elementProps = useMemo(() => toAttributeMap(props), [props])
+  useImperativeHandle(ref, () => internalRef.current)
+  return React.createElement('ai-chat-widget', {
+    key: instanceKey,
+    ref: internalRef,
+    ...elementProps
+  })
+})
+AIChatWidget.displayName = 'AIChatWidget'
+export default AIChatWidget
+export { AIChatWidget }