rio-assist-widget 0.1.0

package/src/main.ts

@@ -0,0 +1,72 @@
+import './components/rio-assist';
+
+export type RioAssistOptions = {
+  target?: HTMLElement;
+  title?: string;
+  buttonLabel?: string;
+  placeholder?: string;
+  suggestions?: string[];
+  accentColor?: string;
+  apiBaseUrl?: string;
+  rioToken?: string;
+};
+
+const DEFAULT_OPTIONS: Required<Omit<RioAssistOptions, 'target'>> = {
+  title: 'RIO Assist',
+  buttonLabel: 'RIO Assist',
+  placeholder: 'Pergunte alguma coisa',
+  suggestions: [
+    'Veículos com problemas',
+    'Valor das peças',
+    'Planos de manutenção',
+  ],
+  accentColor: '#008B9A',
+  apiBaseUrl: '',
+  rioToken: '',
+};
+
+const widgetTagName = 'rio-assist-widget';
+
+function ensureElement(options: RioAssistOptions = {}) {
+  const {
+    target = document.body,
+    ...rest
+  } = options;
+
+  let widget = document.querySelector(widgetTagName) as HTMLElement | null;
+
+  if (!widget) {
+    widget = document.createElement(widgetTagName);
+    target.appendChild(widget);
+  }
+
+  const mergedOptions = { ...DEFAULT_OPTIONS, ...rest };
+
+  Object.entries(mergedOptions).forEach(([key, value]) => {
+    if (value === undefined) {
+      return;
+    }
+
+    widget?.setAttribute(
+      `data-${key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`,
+      Array.isArray(value) ? value.join('|') : String(value),
+    );
+  });
+}
+
+declare global {
+  interface Window {
+    RioAssist?: {
+      init: (options?: RioAssistOptions) => void;
+    };
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.RioAssist = window.RioAssist ?? {
+    init: ensureElement,
+  };
+  window.dispatchEvent(new Event('rio-assist-ready'));
+}
+
+

package/src/playground.ts

@@ -0,0 +1,23 @@
+import './main';
+
+const boot = () => {
+  window.RioAssist?.init({
+    title: 'RIO Assist',
+    buttonLabel: 'RIO Assist',
+    accentColor: '#c02267',
+    rioToken: 'SEU_TOKEN_RIO_AQUI',
+    suggestions: [
+      'Veículos com problemas',
+      'Valor das peças',
+      'Planos de manutenção',
+    ],
+  });
+};
+
+if (window.RioAssist) {
+  boot();
+} else {
+  window.addEventListener('rio-assist-ready', boot, { once: true });
+}
+
+

package/src/services/rioWebsocket.ts

@@ -0,0 +1,167 @@
+const WEBSOCKET_URL = 'wss://ws.volkswagen.latam-sandbox.rio.cloud';
+const DEFAULT_AGENT_MODEL = 'claude-3-sonnet';
+
+export type RioIncomingMessage = {
+  text: string;
+  raw: string;
+  data: unknown;
+};
+
+export class RioWebsocketClient {
+  readonly token: string;
+
+  private socket: WebSocket | null = null;
+
+  private connectPromise: Promise<void> | null = null;
+
+  private readonly listeners = new Set<(message: RioIncomingMessage) => void>();
+
+  constructor(token: string) {
+    this.token = token;
+  }
+
+  matchesToken(value: string) {
+    return this.token === value;
+  }
+
+  async sendMessage(message: string) {
+    const socket = await this.ensureConnection();
+
+    const payload = {
+      action: 'sendMessage',
+      message,
+      agentModel: DEFAULT_AGENT_MODEL,
+    };
+
+    socket.send(JSON.stringify(payload));
+  }
+
+  onMessage(listener: (message: RioIncomingMessage) => void) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  close() {
+    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+      this.socket.close();
+    }
+
+    this.connectPromise = null;
+    this.socket = null;
+    this.listeners.clear();
+  }
+
+  private async ensureConnection(): Promise<WebSocket> {
+    if (
+      this.socket &&
+      (this.socket.readyState === WebSocket.OPEN ||
+        this.socket.readyState === WebSocket.CONNECTING)
+    ) {
+      await this.connectPromise;
+      return this.socket;
+    }
+
+    this.socket = new WebSocket(
+      `${WEBSOCKET_URL}?token=${encodeURIComponent(this.token)}`,
+    );
+
+    this.socket.addEventListener('message', (event) => this.handleMessage(event));
+    this.socket.addEventListener('close', () => {
+      this.connectPromise = null;
+      this.socket = null;
+    });
+
+    this.connectPromise = new Promise((resolve, reject) => {
+      if (!this.socket) {
+        reject(new Error('Falha ao criar conexão WebSocket.'));
+        return;
+      }
+
+      const handleOpen = () => {
+        cleanup();
+        resolve();
+      };
+
+      const handleError = () => {
+        cleanup();
+        this.socket?.close();
+        this.socket = null;
+        this.connectPromise = null;
+        reject(
+          new Error(
+            'Não foi possível abrir conexão com o websocket do RIO Assist.',
+          ),
+        );
+      };
+
+      const cleanup = () => {
+        this.socket?.removeEventListener('open', handleOpen);
+        this.socket?.removeEventListener('error', handleError);
+      };
+
+      this.socket.addEventListener('open', handleOpen, { once: true });
+      this.socket.addEventListener('error', handleError, { once: true });
+    });
+
+    await this.connectPromise;
+
+    if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
+      throw new Error('Conexão WebSocket do RIO Assist não está pronta.');
+    }
+
+    return this.socket;
+  }
+
+  private async handleMessage(event: MessageEvent) {
+    const raw = await this.readMessage(event.data);
+    let parsed: unknown = null;
+    let text = raw;
+
+    try {
+      parsed = JSON.parse(raw);
+      if (typeof parsed === 'object' && parsed !== null) {
+        const maybeText =
+          (parsed as any).message ??
+          (parsed as any).response ??
+          (parsed as any).text ??
+          (parsed as any).content;
+
+        if (typeof maybeText === 'string') {
+          text = maybeText;
+        }
+      }
+    } catch {
+      parsed = null;
+    }
+
+    this.listeners.forEach((listener) => listener({ text, raw, data: parsed }));
+  }
+
+  private async readMessage(
+    data: MessageEvent['data'],
+  ): Promise<string> {
+    if (typeof data === 'string') {
+      return data;
+    }
+
+    if (data instanceof Blob) {
+      return data.text();
+    }
+
+    if (data instanceof ArrayBuffer) {
+      return new TextDecoder().decode(new Uint8Array(data));
+    }
+
+    if (ArrayBuffer.isView(data)) {
+      return new TextDecoder().decode(
+        new Uint8Array(
+          data.buffer,
+          data.byteOffset,
+          data.byteLength,
+        ),
+      );
+    }
+
+    return String(data ?? '');
+  }
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "types": [
+      "vite/client"
+    ],
+    "baseUrl": "./src"
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    lib: {
+      name: 'RioAssist',
+      entry: 'src/main.ts',
+      fileName: () => 'rio-assist.js',
+      formats: ['es', 'iife'],
+    },
+    rollupOptions: {
+      output: {
+        globals: {
+          lit: 'lit',
+        },
+      },
+    },
+  },
+});