sea-dev 1.0.0

package/tests/angular-test-app/src/app/app.component.ts

@@ -0,0 +1,220 @@
+import { Component, signal, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  SeaDataViewerComponent,
+  SeaChatComponent,
+  SeaWidgetConfigService,
+} from '@sea-dev/widget-ng';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SeaDataViewerComponent,
+    SeaChatComponent,
+  ],
+  template: `
+    <div class="demo-app">
+      <!-- Header -->
+      <header class="demo-header">
+        <div class="demo-header__content">
+          <div class="demo-header__logo">
+            <span class="demo-header__emoji">🌊</span>
+            <h1>Sea.dev Widget Demo - Individual Components</h1>
+          </div>
+          <div class="demo-tabs">
+            <button
+              [class.active]="activeTab() === 'chat'"
+              (click)="activeTab.set('chat')"
+              class="tab-button"
+            >
+              Chat
+            </button>
+            <button
+              [class.active]="activeTab() === 'data'"
+              (click)="activeTab.set('data')"
+              class="tab-button"
+            >
+              Data Viewer
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <!-- Main Content -->
+      <main class="demo-main">
+        <div class="demo-content">
+          @if (activeTab() === 'chat' && conversationId()) {
+            <div class="component-container">
+              <sea-chat
+                [conversationId]="conversationId()"
+                [submissionId]="demoSubmissionId()"
+              />
+            </div>
+          }
+          @if (activeTab() === 'data' && demoSubmissionId()) {
+            <div class="component-container">
+              <sea-data-viewer [submissionId]="demoSubmissionId()" />
+            </div>
+          }
+        </div>
+      </main>
+    </div>
+  `,
+  styles: [`
+    .demo-app {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    /* Header */
+    .demo-header {
+      background: white;
+      border-bottom: 1px solid #e2e8f0;
+      padding: 1.5rem 2rem;
+      flex-shrink: 0;
+    }
+
+    .demo-header__content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .demo-header__logo {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .demo-header__emoji {
+      font-size: 2.5rem;
+      line-height: 1;
+    }
+
+    .demo-header__logo h1 {
+      font-size: 1.5rem;
+      font-weight: 500;
+      color: #1a202c;
+      margin: 0;
+    }
+
+    /* Main Layout */
+    .demo-main {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+    }
+
+    /* Content */
+    .demo-content {
+      flex: 1;
+      display: flex;
+      padding: 1rem;
+      box-sizing: border-box;
+    }
+
+    .demo-widget-container {
+      flex: 1;
+      display: flex;
+    }
+
+    .demo-widget-container sea-widget {
+      flex: 1;
+      display: flex;
+    }
+
+    /* Footer */
+    .demo-footer {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      border-top: 1px solid rgba(255, 255, 255, 0.2);
+      padding: 1.5rem 2rem;
+      text-align: center;
+      flex-shrink: 0;
+    }
+
+    .demo-footer p {
+      color: white;
+      font-size: 0.875rem;
+      margin: 0;
+    }
+
+    .demo-footer a {
+      color: white;
+      text-decoration: underline;
+      font-weight: 500;
+    }
+
+    .demo-footer a:hover {
+      opacity: 0.8;
+    }
+
+    .demo-tabs {
+      display: flex;
+      gap: 0.5rem;
+    }
+
+    .tab-button {
+      padding: 0.5rem 1rem;
+      border: 1px solid #e2e8f0;
+      background: white;
+      color: #64748b;
+      cursor: pointer;
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      transition: all 0.2s;
+    }
+
+    .tab-button:hover {
+      background: #f8fafc;
+      color: #0f172a;
+    }
+
+    .tab-button.active {
+      background: #3b82f6;
+      color: white;
+      border-color: #3b82f6;
+    }
+
+    .component-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      background: white;
+      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+      overflow: auto;
+    }
+
+    .component-container > * {
+      flex: 1;
+      min-height: 0;
+    }
+  `],
+})
+export class AppComponent {
+  private readonly config = inject(SeaWidgetConfigService);
+
+  // View state
+  protected readonly activeTab = signal<'chat' | 'data'>('chat');
+  protected readonly selectedCitationId = signal<string | undefined>(undefined);
+
+  // API configuration from environment variables
+  protected readonly apiKey = signal<string>(import.meta.env.NG_APP_SEA_API_KEY || '');
+  protected readonly formId = signal<string>(import.meta.env.NG_APP_SEA_FORM_ID || '');
+  protected readonly dealId = signal<string>(import.meta.env.NG_APP_SEA_DEAL_ID || '');
+  protected readonly conversationId = signal<string>(import.meta.env.NG_APP_SEA_CONVERSATION_ID || '');
+  protected readonly demoSubmissionId = signal<string>(import.meta.env.NG_APP_SEA_SUBMISSION_ID || '');
+
+  constructor() {
+    // Initialize the config service with API key for standalone components
+    const apiKey = import.meta.env.NG_APP_SEA_API_KEY;
+    if (apiKey) {
+      this.config.setApiKey(apiKey);
+    }
+  }
+}

package/tests/angular-test-app/src/app/app.config.ts

@@ -0,0 +1,5 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
+};

package/tests/angular-test-app/src/env.d.ts

@@ -0,0 +1,13 @@
+declare interface ImportMetaEnv {
+    readonly NG_APP_SEA_API_KEY: string;
+    readonly NG_APP_SEA_FORM_ID: string;
+    readonly NG_APP_SEA_DEAL_ID: string;
+    readonly NG_APP_SEA_SUBMISSION_ID: string;
+    readonly NG_APP_SEA_CONVERSATION_ID: string;
+    readonly NG_APP_DEMO_PDF_URL: string;
+    [key: string]: any;
+}
+
+declare interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

package/tests/angular-test-app/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>AngularTestApp</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/tests/angular-test-app/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

package/tests/angular-test-app/src/styles.css

@@ -0,0 +1,8 @@
+/* You can add global styles to this file, and also import other style files */
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #f5f5f5;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}

package/tests/angular-test-app/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

package/tests/angular-test-app/tsconfig.json

@@ -0,0 +1,27 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tests/crm-viewer-app/API_INTEGRATION_SUMMARY.md

@@ -0,0 +1,295 @@
+# Real API Integration - Implementation Summary
+
+## ✅ Completed Implementation
+
+The CRM viewer app now loads **real citation data** from the Sea.dev API for submission ID `txlrja5bnij8vzrj2sb5s`.
+
+## What Was Implemented
+
+### 1. **API Service Integration**
+- Uses `SeaApiClientService` from `@sea-dev/widget-ng` library
+- Loads submission data from `/v2/submissions/{id}/data` endpoint
+- No custom API service needed - leverages existing library functionality
+
+### 2. **Citation Service Updates**
+File: [citation.service.ts](src/app/citation.service.ts)
+
+Added methods:
+- `clearCitations()` - Removes all registered citations
+- `setDocuments()` - Stores document data from API
+- `getDocument()` - Retrieves document by ID
+- `activateCitationWithDocument()` - Loads real PDF with real bounding regions
+
+### 3. **App Component Integration**
+File: [app.component.ts](src/app/app.component.ts)
+
+Added:
+- Injection of `SeaApiClientService` and `SeaWidgetConfigService`
+- Submission ID constant: `txlrja5bnij8vzrj2sb5s`
+- API key configuration from environment variable
+- `loadSubmissionData()` - Fetches data on app init
+- `processCitations()` - Registers citations from API response
+
+### 4. **HTTP Client Configuration**
+File: [main.ts](src/main.ts)
+
+Added:
+- `provideHttpClient(withFetch())` to app providers
+- Required for API calls to work
+
+### 5. **Environment Configuration**
+Files: [.env.example](.env.example)
+
+Created:
+- `.env.example` template file
+- Support for `NG_APP_SEA_API_KEY` environment variable
+- Instructions for API key configuration
+
+## How to Use
+
+### Quick Start
+
+1. **Copy environment template:**
+   ```bash
+   cp .env.example .env
+   ```
+
+2. **Add your API key to `.env`:**
+   ```env
+   NG_APP_SEA_API_KEY=sk-sea-your-actual-key
+   ```
+
+3. **Start the app:**
+   ```bash
+   pnpm start
+   ```
+
+4. **Open in browser:**
+   ```
+   http://localhost:4201
+   ```
+
+5. **Click any Current Assets field** to view real citations!
+
+## Data Flow
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ 1. App Initialization (ngOnInit)                            │
+│    - Set API key from environment                            │
+│    - Call loadSubmissionData()                               │
+└─────────────────┬───────────────────────────────────────────┘
+                  │
+                  v
+┌─────────────────────────────────────────────────────────────┐
+│ 2. Load Submission Data                                      │
+│    apiClient.getSubmissionData('txlrja5bnij8vzrj2sb5s')     │
+│    → GET /v2/submissions/{id}/data                           │
+└─────────────────┬───────────────────────────────────────────┘
+                  │
+                  v
+┌─────────────────────────────────────────────────────────────┐
+│ 3. Process API Response                                      │
+│    - Clear placeholder citations                             │
+│    - Iterate formGroups > fields                             │
+│    - Register citation for each field with citation data     │
+│    - Store documents with citations                          │
+└─────────────────┬───────────────────────────────────────────┘
+                  │
+                  v
+┌─────────────────────────────────────────────────────────────┐
+│ 4. User Clicks Field                                         │
+│    onFieldClick('cash')                                      │
+│    → activateCitationWithDocument('cash')                    │
+└─────────────────┬───────────────────────────────────────────┘
+                  │
+                  v
+┌─────────────────────────────────────────────────────────────┐
+│ 5. Load Document & Display Citation                          │
+│    - Lookup citation by fieldId                              │
+│    - Find document by documentId                             │
+│    - Set activeDocument with real URL                        │
+│    - PDF viewer displays with highlighted regions            │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## API Response Structure
+
+The app expects this structure from the API:
+
+```typescript
+{
+  submissionId: string;
+  formId: string;
+  dealId: string;
+  status: string;
+  formGroups: [
+    {
+      id: string;
+      name: string;
+      multi: boolean;
+      fields: [
+        {
+          id: string;
+          name: string;          // Used as fieldId for citation mapping
+          label: string;
+          value: any;
+          type: string;
+          citation?: {
+            id: string;
+            documentId: string;  // Links to documents array
+            pageNumber: number;
+            confidence?: number;
+          }
+        }
+      ]
+    }
+  ];
+  documents: [
+    {
+      id: string;              // Referenced by field.citation.documentId
+      name: string;
+      url: string;             // Signed PDF URL
+      citations: [
+        {
+          id: string;
+          path: string;
+          text: string;
+          boundingRegions: {
+            [fieldName: string]: [
+              {
+                pageNumber: number;
+                polygon: number[];  // [x1,y1, x2,y2, x3,y3, x4,y4]
+              }
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Key Files Modified
+
+1. **[app.component.ts](src/app/app.component.ts)**
+   - Added API integration
+   - Added submission data loading
+   - Added citation processing
+
+2. **[citation.service.ts](src/app/citation.service.ts)**
+   - Added document storage
+   - Added real document loading
+   - Added citation clearing
+
+3. **[main.ts](src/main.ts)**
+   - Added HttpClient provider
+
+4. **[.env.example](.env.example)**
+   - Added API key template
+
+## Environment Variables
+
+| Variable | Description | Required |
+|----------|-------------|----------|
+| `NG_APP_SEA_API_KEY` | Your Sea.dev API key | Yes |
+
+## Fallback Behavior
+
+If the API call fails or no API key is provided:
+- App displays a warning in console
+- Falls back to placeholder citations
+- UI remains functional for development/testing
+- No error shown to user
+
+## Testing
+
+### With Real API
+
+1. Set API key in `.env`
+2. Run `pnpm start`
+3. Click fields to see real citations from submission `txlrja5bnij8vzrj2sb5s`
+
+### Without API Key
+
+1. Run `pnpm start` without `.env`
+2. Check console for warning
+3. App uses placeholder data
+4. UI still functional for layout testing
+
+## Field Naming Conventions
+
+The app uses kebab-case for HTML attributes but the API may use snake_case:
+
+| HTML (data-sea-field) | API (field.name) |
+|-----------------------|------------------|
+| `cash` | `cash` or `Cash` |
+| `certificate-of-deposit` | `certificate_of_deposit` |
+| `accounts-receivable` | `accounts_receivable` |
+
+The citation service matches these exactly, so ensure field names in the API match the `data-sea-field` attributes.
+
+## Troubleshooting
+
+### API Key Issues
+```
+Error: Unauthorized (401)
+```
+**Solution:** Check that `NG_APP_SEA_API_KEY` is set correctly in `.env`
+
+### No Citations Loading
+```
+Warning: No citation found for field: cash
+```
+**Solution:**
+- Verify submission has data for those fields
+- Check field naming matches between HTML and API
+- Check browser console for API errors
+
+### PDF Not Displaying
+```
+Error loading PDF
+```
+**Solution:**
+- Check document URL is valid and not expired
+- Verify CORS headers allow loading
+- Check browser console for network errors
+
+## Next Steps
+
+Possible enhancements:
+
+1. **Loading States**: Add spinner while fetching submission data
+2. **Error UI**: Display user-friendly errors when API fails
+3. **Field Values**: Populate form fields with actual values from API
+4. **Multiple Submissions**: Support switching between different submissions
+5. **Citation Confidence**: Display confidence scores in UI
+6. **Field Validation**: Validate extracted data against form rules
+7. **Real-time Updates**: Poll for new citations as documents are processed
+
+## Documentation
+
+- [README.md](README.md) - General app documentation
+- [REAL_API_INTEGRATION.md](REAL_API_INTEGRATION.md) - Detailed API integration guide
+- [CURRENT_ASSETS_FIELDS.md](CURRENT_ASSETS_FIELDS.md) - Field reference
+- [INTEGRATION_GUIDE.md](INTEGRATION_GUIDE.md) - Adding new citation fields
+
+## Success Metrics
+
+✅ App loads submission data from API on startup
+✅ Citations are registered from API response
+✅ Documents are stored with full citation data
+✅ Clicking fields displays real PDFs with real highlights
+✅ Falls back gracefully when API unavailable
+✅ Build succeeds with no errors
+✅ Environment configuration documented
+
+## Build Status
+
+```bash
+pnpm build
+# ✔ Building...
+# Application bundle generation complete. [1.909 seconds]
+```
+
+**Status:** ✅ Ready for testing with real API data!