@courseecho/ai-widget-jquery 1.0.0

package/ai-widget-jquery.ts

@@ -0,0 +1,328 @@
+/**
+ * AI Chat Widget - jQuery Plugin
+ * Usage: $('#container').aiChatWidget(options)
+ */
+
+export interface AiWidgetOptions {
+  apiEndpoint: string;
+  context: {
+    pageType: string;
+    entityId?: string;
+    userId?: string;
+    customData?: Record<string, any>;
+  };
+  jwtToken?: string;
+  apiKey?: string;
+  theme?: 'light' | 'dark';
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  onMessage?: (message: any) => void;
+  onError?: (error: string) => void;
+  onLoading?: (isLoading: boolean) => void;
+}
+
+declare global {
+  interface JQuery {
+    aiChatWidget(options?: AiWidgetOptions | string, arg?: any): JQuery;
+  }
+}
+
+export function createJQueryPlugin(jQuery: any) {
+  const methods: Record<string, Function> = {
+    init(element: any, options: AiWidgetOptions) {
+      const $elem = jQuery(element);
+      const instance = new AiWidgetInstance(element, options);
+      $elem.data('aiWidget', instance);
+      return $elem;
+    },
+
+    send(element: any, message: string) {
+      const instance = jQuery(element).data('aiWidget');
+      if (instance) {
+        return instance.sendMessage(message);
+      }
+    },
+
+    getMessages(element: any) {
+      const instance = jQuery(element).data('aiWidget');
+      if (instance) {
+        return instance.getMessages();
+      }
+      return [];
+    },
+
+    clear(element: any) {
+      const instance = jQuery(element).data('aiWidget');
+      if (instance) {
+        instance.clearMessages();
+      }
+      return jQuery(element);
+    },
+
+    setContext(element: any, context: any) {
+      const instance = jQuery(element).data('aiWidget');
+      if (instance) {
+        instance.updateContext(context);
+      }
+      return jQuery(element);
+    },
+
+    isLoading(element: any) {
+      const instance = jQuery(element).data('aiWidget');
+      if (instance) {
+        return instance.isLoadingState();
+      }
+      return false;
+    },
+
+    destroy(element: any) {
+      const instance = jQuery(element).data('aiWidget');
+      if (instance) {
+        instance.destroy();
+      }
+      jQuery(element).removeData('aiWidget').empty();
+      return jQuery(element);
+    },
+  };
+
+  jQuery.fn.aiChatWidget = function (...args: any[]) {
+    const methodOrOptions = args[0];
+    const additionalArgs = args.slice(1);
+
+    if (methodOrOptions === undefined || typeof methodOrOptions === 'object') {
+      // Init
+      return this.each(function () {
+        if (!jQuery(this).data('aiWidget')) {
+          methods.init(this, methodOrOptions || {});
+        }
+      });
+    } else if (methods[methodOrOptions]) {
+      // Method call
+      return this.each(function () {
+        methods[methodOrOptions](this, ...additionalArgs);
+      });
+    }
+
+    return this;
+  };
+}
+
+class AiWidgetInstance {
+  private element: HTMLElement;
+  private options: AiWidgetOptions;
+  private messages: any[] = [];
+  private isOpen = false;
+  private isLoading = false;
+  private $widget: any;
+  private $messages: any;
+  private $input: any;
+  private $button: any;
+
+  constructor(element: HTMLElement, options: AiWidgetOptions) {
+    this.element = element;
+    this.options = {
+      theme: 'light',
+      position: 'bottom-right',
+      ...options,
+    };
+    this.initialize();
+  }
+
+  private initialize(): void {
+    const $ = (window as any).$;
+    const $elem = $(this.element);
+
+    $elem.addClass(
+      `ai-widget-container ai-widget-${this.options.theme} ai-widget-${this.options.position}`
+    );
+
+    // Create toggle button
+    this.$button = $(`
+      <button class="ai-widget-toggle-button" aria-label="Open AI Chat">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+      </button>
+    `);
+
+    // Create widget window
+    this.$widget = $(`
+      <div class="ai-widget-window" style="display: none;">
+        <div class="ai-widget-header">
+          <h3>AI Assistant</h3>
+          <button class="ai-widget-close-button">×</button>
+        </div>
+        <div class="ai-widget-messages">
+          <div class="ai-widget-welcome">
+            <p>👋 Hello! I'm your AI assistant.</p>
+            <p>How can I help you today?</p>
+          </div>
+        </div>
+        <form class="ai-widget-form">
+          <input type="text" class="ai-widget-input" placeholder="Type your message..." />
+          <button type="submit" class="ai-widget-send-button">→</button>
+        </form>
+      </div>
+    `);
+
+    this.$messages = this.$widget.find('.ai-widget-messages');
+    this.$input = this.$widget.find('.ai-widget-input');
+
+    // Event handlers
+    this.$button.on('click', () => this.open());
+    this.$widget.find('.ai-widget-close-button').on('click', () => this.close());
+    this.$widget.find('.ai-widget-form').on('submit', (e: any) => {
+      e.preventDefault();
+      this.sendMessage(this.$input.val());
+      this.$input.val('');
+    });
+
+    // Append to element
+    $(this.element).append(this.$button).append(this.$widget);
+  }
+
+  private open(): void {
+    this.isOpen = true;
+    (window as any).$(this.element)
+      .find('.ai-widget-button')
+      .hide();
+    (window as any).$(this.element)
+      .find('.ai-widget-window')
+      .show();
+  }
+
+  private close(): void {
+    this.isOpen = false;
+    (window as any).$(this.element)
+      .find('.ai-widget-button')
+      .show();
+    (window as any).$(this.element)
+      .find('.ai-widget-window')
+      .hide();
+  }
+
+  async sendMessage(message: string): Promise<void> {
+    if (!message.trim() || this.isLoading) return;
+
+    // Add user message
+    const userMsg = {
+      id: `${Date.now()}-${Math.random()}`,
+      role: 'user',
+      content: message,
+      timestamp: new Date(),
+    };
+
+    this.messages.push(userMsg);
+    this.appendMessageToUI(userMsg);
+
+    // Set loading
+    this.isLoadingState(true);
+    if (this.options.onLoading) {
+      this.options.onLoading(true);
+    }
+
+    try {
+      // Call backend
+      const response = await (window as any).fetch(
+        `${this.options.apiEndpoint}/api/aiorchestrator/query`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.options.jwtToken || ''}`,
+          },
+          body: JSON.stringify({
+            userQuery: message,
+            pageType: this.options.context.pageType,
+            entityId: this.options.context.entityId,
+            contextData: this.options.context.customData,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      // Add assistant message
+      const assistantMsg = {
+        id: data.sessionId,
+        role: 'assistant',
+        content: data.response,
+        timestamp: new Date(data.timestamp),
+      };
+
+      this.messages.push(assistantMsg);
+      this.appendMessageToUI(assistantMsg);
+
+      if (this.options.onMessage) {
+        this.options.onMessage(assistantMsg);
+      }
+    } catch (error) {
+      const errorText = String(error);
+      if (this.options.onError) {
+        this.options.onError(errorText);
+      }
+    } finally {
+      this.isLoadingState(false);
+      if (this.options.onLoading) {
+        this.options.onLoading(false);
+      }
+    }
+  }
+
+  private appendMessageToUI(message: any): void {
+    const $ = (window as any).$;
+    const messageEl = $(`
+      <div class="ai-widget-message ai-widget-message-${message.role}">
+        <div class="ai-widget-message-content">${message.content}</div>
+        <div class="ai-widget-message-time">
+          ${new Date(message.timestamp).toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+          })}
+        </div>
+      </div>
+    `);
+
+    if (this.$messages.find('.ai-widget-welcome').length) {
+      this.$messages.find('.ai-widget-welcome').remove();
+    }
+
+    this.$messages.append(messageEl);
+    this.$messages.scrollTop(this.$messages.prop('scrollHeight'));
+  }
+
+  getMessages(): any[] {
+    return [...this.messages];
+  }
+
+  clearMessages(): void {
+    this.messages = [];
+    const $ = (window as any).$;
+    this.$messages.html(`
+      <div class="ai-widget-welcome">
+        <p>👋 Hello! I'm your AI assistant.</p>
+        <p>How can I help you today?</p>
+      </div>
+    `);
+  }
+
+  updateContext(context: any): void {
+    this.options.context = { ...this.options.context, ...context };
+  }
+
+  isLoadingState(value?: boolean): boolean {
+    if (value !== undefined) {
+      this.isLoading = value;
+    }
+    return this.isLoading;
+  }
+
+  destroy(): void {
+    this.$button.off('click');
+    this.$widget.find('.ai-widget-close-button').off('click');
+    this.$widget.find('.ai-widget-form').off('submit');
+  }
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@courseecho/ai-widget-jquery",
+  "version": "1.0.0",
+  "description": "jQuery plugin for AI Chat Widget - enables vanilla JavaScript/HTML integration",
+  "main": "ai-widget-jquery.js",
+  "types": "ai-widget-jquery.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "peerDependencies": {
+    "jquery": ">=1.0.0"
+  },
+  "keywords": [
+    "ai",
+    "chatbot",
+    "jquery",
+    "widget",
+    "vanilla-js",
+    "html"
+  ],
+  "author": "CourseEcho",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/courseecho/ai-widget-sdk"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "node"
+  },
+  "include": [
+    "*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}