sea-dev 1.0.0

package/packages/widget-ng/src/lib/services/chat.service.ts

@@ -0,0 +1,330 @@
+import { Injectable, signal, inject, NgZone } from "@angular/core";
+import { Observable, Subject } from "rxjs";
+import { SeaWidgetConfigService } from "./config.service";
+
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant" | "system";
+  parts: Array<{
+    type: string;
+    text?: string;
+    state?: string;
+    input?: any;
+    output?: any;
+    errorText?: string;
+  }>;
+}
+
+export interface ChatState {
+  messages: ChatMessage[];
+  isStreaming: boolean;
+  error: string | null;
+}
+
+/**
+ * Chat service for streaming conversations with submissions
+ */
+@Injectable({
+  providedIn: "root",
+})
+export class SeaChatService {
+  private readonly config = inject(SeaWidgetConfigService);
+  private readonly ngZone = inject(NgZone);
+
+  // Reactive state with signals
+  private readonly _messages = signal<ChatMessage[]>([]);
+  private readonly _isStreaming = signal<boolean>(false);
+  private readonly _error = signal<string | null>(null);
+
+  // Public read-only signals
+  readonly messages = this._messages.asReadonly();
+  readonly isStreaming = this._isStreaming.asReadonly();
+  readonly error = this._error.asReadonly();
+
+  // Current AbortController for streaming
+  private currentAbortController: AbortController | null = null;
+
+  /**
+   * Load chat history for an agent conversation
+   */
+  loadHistory(conversationId: string): Observable<ChatMessage[]> {
+    return new Observable((observer) => {
+      const apiKey = this.config.apiKey();
+      if (!apiKey) {
+        observer.error(new Error("API key not configured"));
+        return;
+      }
+
+      const baseUrl = this.config.apiBaseUrl();
+      const url = `${baseUrl}/v2/chat/agent/${conversationId}/history`;
+
+      fetch(url, {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${apiKey}`,
+        },
+      })
+        .then(async (response) => {
+          if (!response.ok) {
+            throw new Error(`Failed to load history: ${response.statusText}`);
+          }
+          const messages = (await response.json()) as ChatMessage[];
+          this._messages.set(messages);
+          observer.next(messages);
+          observer.complete();
+        })
+        .catch((error) => {
+          this._error.set(error.message);
+          observer.error(error);
+        });
+    });
+  }
+
+  /**
+   * Send a message and stream the response
+   */
+  sendMessage(
+    conversationId: string,
+    message: string,
+  ): Observable<{ text: string; done: boolean }> {
+    const apiKey = this.config.apiKey();
+    if (!apiKey) {
+      throw new Error("API key not configured");
+    }
+
+    // Add user message immediately
+    const userMessage: ChatMessage = {
+      id: crypto.randomUUID(),
+      role: "user",
+      parts: [{ type: "text", text: message }],
+    };
+    this._messages.set([...this._messages(), userMessage]);
+
+    // Create assistant message placeholder
+    const assistantMessageId = crypto.randomUUID();
+    const assistantMessage: ChatMessage = {
+      id: assistantMessageId,
+      role: "assistant",
+      parts: [{ type: "text", text: "" }],
+    };
+    this._messages.set([...this._messages(), assistantMessage]);
+
+    this._isStreaming.set(true);
+    this._error.set(null);
+
+    const subject = new Subject<{ text: string; done: boolean }>();
+
+    const baseUrl = this.config.apiBaseUrl();
+    const url = `${baseUrl}/v2/chat/agent/${conversationId}/stream`;
+
+    this.debug("[SeaChat] Starting stream to:", url);
+
+    // Close any existing connection
+    this.closeStream();
+
+    // Create abort controller for this request
+    const abortController = new AbortController();
+    this.currentAbortController = abortController;
+
+    // Use fetch with streaming response
+    fetch(url, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ message }),
+      signal: abortController.signal,
+    })
+      .then(async (response) => {
+        this.debug(
+          "[SeaChat] Response status:",
+          response.status,
+          response.statusText,
+        );
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const reader = response.body?.getReader();
+        if (!reader) {
+          throw new Error("No response body");
+        }
+
+        this.debug("[SeaChat] Stream reader acquired, starting to read...");
+
+        const decoder = new TextDecoder();
+        let accumulatedText = "";
+        let buffer = "";
+
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+
+            if (done) {
+              this._isStreaming.set(false);
+              subject.next({ text: "", done: true });
+              subject.complete();
+              break;
+            }
+
+            // Decode the chunk and add to buffer
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split("\n");
+
+            // Keep the last incomplete line in the buffer
+            buffer = lines.pop() || "";
+
+            for (const line of lines) {
+              if (!line.trim()) continue;
+
+              // Handle SSE format - lines start with "data: " or just "0:"
+              let data: string;
+              if (line.startsWith("data: ")) {
+                data = line.slice(6);
+              } else if (line.includes(":")) {
+                // Handle AI SDK format like "0:{json}"
+                const colonIndex = line.indexOf(":");
+                data = line.slice(colonIndex + 1);
+              } else {
+                continue;
+              }
+
+              if (data === "[DONE]") {
+                this.debug("[SeaChat] Received [DONE] signal");
+                this._isStreaming.set(false);
+                subject.next({ text: "", done: true });
+                subject.complete();
+                reader.cancel();
+                return;
+              }
+
+              try {
+                const parsed = JSON.parse(data);
+
+                // Handle UI message stream format from AI SDK
+                // The API sends 'delta' field, not 'textDelta'
+                if (parsed.type === "text-delta" && parsed.delta) {
+                  accumulatedText += parsed.delta;
+
+                  // Update assistant message inside Angular zone for change detection
+                  this.ngZone.run(() => {
+                    const currentMessages = this._messages();
+                    const updatedMessages = currentMessages.map((msg) =>
+                      msg.id === assistantMessageId
+                        ? {
+                            ...msg,
+                            parts: [{ type: "text", text: accumulatedText }],
+                          }
+                        : msg,
+                    );
+                    this._messages.set(updatedMessages);
+                  });
+
+                  subject.next({ text: parsed.delta, done: false });
+                }
+              } catch (e) {
+                // Ignore parse errors for incomplete chunks
+                this.debug("[SeaChat] Parse error:", e);
+              }
+            }
+          }
+        } catch (error) {
+          if (error instanceof Error && error.name === "AbortError") {
+            // Aborted by user, not an error
+            this.debug("[Chat] Stream aborted by user");
+            this._isStreaming.set(false);
+            subject.complete();
+            return;
+          }
+          const errorMsg =
+            error instanceof Error ? error.message : "Stream read error";
+          this._error.set(errorMsg);
+          this._isStreaming.set(false);
+          subject.error(new Error(errorMsg));
+        }
+      })
+      .catch((error) => {
+        if (error instanceof Error && error.name === "AbortError") {
+          // Aborted by user, not an error
+          this.debug("[Chat] Request aborted by user");
+          this._isStreaming.set(false);
+          subject.complete();
+          return;
+        }
+        const errorMsg =
+          error instanceof Error ? error.message : "Failed to start stream";
+        this._error.set(errorMsg);
+        this._isStreaming.set(false);
+        subject.error(new Error(errorMsg));
+      });
+
+    return subject.asObservable();
+  }
+
+  /**
+   * Clear chat history for an agent conversation
+   */
+  clearHistory(conversationId: string): Observable<void> {
+    return new Observable((observer) => {
+      const apiKey = this.config.apiKey();
+      if (!apiKey) {
+        observer.error(new Error("API key not configured"));
+        return;
+      }
+
+      const baseUrl = this.config.apiBaseUrl();
+      const url = `${baseUrl}/v2/chat/agent/${conversationId}`;
+
+      fetch(url, {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${apiKey}`,
+        },
+      })
+        .then(async (response) => {
+          if (!response.ok) {
+            throw new Error(`Failed to clear history: ${response.statusText}`);
+          }
+          this._messages.set([]);
+          observer.next();
+          observer.complete();
+        })
+        .catch((error) => {
+          this._error.set(error.message);
+          observer.error(error);
+        });
+    });
+  }
+
+  /**
+   * Close the current stream
+   */
+  closeStream(): void {
+    if (this.currentAbortController) {
+      this.currentAbortController.abort();
+      this.currentAbortController = null;
+    }
+    this._isStreaming.set(false);
+  }
+
+  /**
+   * Clear local state
+   */
+  clearState(): void {
+    this._messages.set([]);
+    this._error.set(null);
+    this.closeStream();
+  }
+
+  private debug(...args: unknown[]): void {
+    try {
+      if (this.config.debug()) {
+        console.warn("[SeaChat]", ...args);
+      }
+    } catch {
+      // ignore
+    }
+  }
+}

package/packages/widget-ng/src/lib/services/config.service.ts

@@ -0,0 +1,107 @@
+import { Injectable, signal, Signal } from "@angular/core";
+
+/**
+ * Configuration service for Sea.dev widget
+ * Manages API keys, theme, and global settings
+ */
+@Injectable({
+  providedIn: "root",
+})
+export class SeaWidgetConfigService {
+  private readonly _apiKey = signal<string | null>(null);
+  private readonly _apiBaseUrl = signal<string>("https://api.sea.dev");
+  private readonly _theme = signal<"light" | "dark">("light");
+  private readonly _debug = signal<boolean>(false);
+
+  /**
+   * Current API key (read-only signal)
+   */
+  readonly apiKey: Signal<string | null> = this._apiKey.asReadonly();
+
+  /**
+   * Current API base URL (read-only signal)
+   */
+  readonly apiBaseUrl: Signal<string> = this._apiBaseUrl.asReadonly();
+
+  /**
+   * Current theme (read-only signal)
+   */
+  readonly theme: Signal<"light" | "dark"> = this._theme.asReadonly();
+
+  /**
+   * Debug flag (read-only signal). When true, verbose console logging may be enabled by components/services.
+   */
+  readonly debug: Signal<boolean> = this._debug.asReadonly();
+
+  /**
+   * Set the API key for all widget requests
+   */
+  setApiKey(key: string): void {
+    if (!key || key.trim().length === 0) {
+      throw new Error("API key cannot be empty");
+    }
+    this._apiKey.set(key.trim());
+  }
+
+  /**
+   * Clear the API key only (keeps other config values intact)
+   */
+  clearApiKey(): void {
+    this._apiKey.set(null);
+  }
+
+  /**
+   * Set custom API base URL (for development/testing)
+   */
+  setApiBaseUrl(url: string): void {
+    if (!url || !url.startsWith("http")) {
+      throw new Error("API base URL must be a valid HTTP(S) URL");
+    }
+    this._apiBaseUrl.set(url.replace(/\/$/, ""));
+  }
+
+  /**
+   * Set widget theme
+   */
+  setTheme(theme: "light" | "dark"): void {
+    this._theme.set(theme);
+  }
+
+  /** Toggle verbose debug logging for the widget library */
+  setDebug(debug: boolean): void {
+    this._debug.set(Boolean(debug));
+  }
+
+  /**
+   * Set multiple configuration values at once
+   */
+  configure(config: {
+    apiKey?: string;
+    apiBaseUrl?: string;
+    theme?: "light" | "dark";
+    debug?: boolean;
+  }): void {
+    if (config.apiKey) {
+      this.setApiKey(config.apiKey);
+    }
+    if (config.apiBaseUrl) {
+      this.setApiBaseUrl(config.apiBaseUrl);
+    }
+    if (config.theme) {
+      this.setTheme(config.theme);
+    }
+    if (typeof config.debug === "boolean") {
+      this.setDebug(config.debug);
+    }
+  }
+
+  /**
+   * Clear all configuration
+   */
+  clear(): void {
+    this._apiKey.set(null);
+    this._apiBaseUrl.set("https://api.sea.dev");
+    this._theme.set("light");
+    this._debug.set(false);
+  }
+}

package/packages/widget-ng/src/web-component.ts

@@ -0,0 +1,56 @@
+/**
+ * Web Component wrapper for @sea-dev/widget-ng
+ * This file registers Angular components as Custom Elements for use in non-Angular applications
+ */
+
+import { createCustomElement } from "@angular/elements";
+import { createApplication } from "@angular/platform-browser";
+import { provideHttpClient } from "@angular/common/http";
+import { SeaWidgetComponent } from "./lib/components/sea-widget.component";
+import { SeaFileUploadComponent } from "./lib/components/sea-file-upload.component";
+import { SeaDataViewerComponent } from "./lib/components/sea-data-viewer.component";
+import { SeaChatComponent } from "./lib/components/sea-chat.component";
+
+// Bootstrap Angular application and register custom elements
+async function bootstrap() {
+  // Create Angular application with necessary providers
+  const app = await createApplication({
+    providers: [provideHttpClient()],
+  });
+
+  // Register SeaWidgetComponent as <sea-widget-web>
+  const SeaWidgetElement = createCustomElement(SeaWidgetComponent, {
+    injector: app.injector,
+  });
+  customElements.define("sea-widget-web", SeaWidgetElement);
+
+  // Register SeaFileUploadComponent as <sea-file-upload-web>
+  const SeaFileUploadElement = createCustomElement(SeaFileUploadComponent, {
+    injector: app.injector,
+  });
+  customElements.define("sea-file-upload-web", SeaFileUploadElement);
+
+  // Register SeaDataViewerComponent as <sea-data-viewer-web>
+  const SeaDataViewerElement = createCustomElement(SeaDataViewerComponent, {
+    injector: app.injector,
+  });
+  customElements.define("sea-data-viewer-web", SeaDataViewerElement);
+
+  // Register SeaChatComponent as <sea-chat-web>
+  const SeaChatElement = createCustomElement(SeaChatComponent, {
+    injector: app.injector,
+  });
+  customElements.define("sea-chat-web", SeaChatElement);
+
+  console.log("Sea.dev Angular widgets registered as Web Components:", [
+    "sea-widget-web",
+    "sea-file-upload-web",
+    "sea-data-viewer-web",
+    "sea-chat-web",
+  ]);
+}
+
+// Bootstrap on load
+bootstrap().catch((err) =>
+  console.error("Failed to bootstrap Angular elements:", err),
+);

package/packages/widget-ng/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": false,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "types": ["node"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["dist", "node_modules", "**/*.spec.ts"]
+}

package/packages/widget-ng/tsconfig.lib.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declarationMap": true,
+    "inlineSources": true,
+    "outDir": "./dist"
+  },
+  "exclude": ["**/*.spec.ts", "dist", "node_modules"]
+}

package/packages/widget-ng/vite.config.elements.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+    build: {
+        lib: {
+            entry: resolve(__dirname, 'src/web-component.ts'),
+            name: 'SeaWidgetElements',
+            fileName: 'sea-widget-elements',
+            formats: ['es', 'iife'],
+        },
+        outDir: 'dist/elements',
+        emptyOutDir: true,
+        sourcemap: true,
+        rollupOptions: {
+            external: [],
+            output: {
+                // Ensure zone.js and other dependencies are bundled
+                inlineDynamicImports: true,
+            },
+        },
+    },
+    define: {
+        'process.env.NODE_ENV': JSON.stringify('production'),
+    },
+});

package/packages/widget-ng/vitest.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'dist/',
+        '**/*.spec.ts',
+        '**/*.config.ts',
+      ],
+    },
+  },
+});

package/packages/widget-ng/vitest.setup.ts

@@ -0,0 +1,13 @@
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+// Initialize Angular testing environment
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);

package/pnpm-workspace.yaml

@@ -0,0 +1,18 @@
+packages:
+  - apps/*
+  - libs/*
+  - packages/*
+  - scripts
+  - tests/*
+
+catalog:
+  "@posthog/ai": ^7.9.0
+  "posthog-node": ^5.24.17
+  "posthog-js": ^1.351.4
+
+overrides:
+  "@eslint/plugin-kit@<0.3.4": ">=0.3.4"
+  "devalue@<5.3.2": ">=5.3.2"
+  "esbuild@<=0.24.2": ">=0.25.0"
+  "form-data@>=4.0.0 <4.0.4": ">=4.0.4"
+  "tmp@<=0.2.3": ">=0.2.4"