sea-dev 1.0.0

package/packages/widget-ng/src/lib/components/sea-widget.component.ts

@@ -0,0 +1,684 @@
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  signal,
+  inject,
+  ChangeDetectionStrategy,
+  ViewChild,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { SeaApiClientService } from "../services/api-client.service";
+import { SeaWidgetConfigService } from "../services/config.service";
+import { SeaFileUploadComponent } from "./sea-file-upload.component";
+import { SeaDataViewerComponent } from "./sea-data-viewer.component";
+import { SeaNewSubmissionModalComponent } from "./sea-new-submission-modal.component";
+import { SeaChatComponent } from "./sea-chat.component";
+
+type WidgetView = "list" | "viewer" | "chat";
+
+/**
+ * Main Sea.dev widget component
+ * Provides full document processing workflow
+ */
+@Component({
+  selector: "sea-widget",
+  standalone: true,
+  imports: [
+    CommonModule,
+    SeaFileUploadComponent,
+    SeaDataViewerComponent,
+    SeaNewSubmissionModalComponent,
+    SeaChatComponent,
+  ],
+  template: `
+    <div class="sea-widget" [attr.data-theme]="theme()">
+      @if (!configuredApiKey()) {
+        <div class="sea-widget__no-api-key">
+          <svg class="sea-widget__warning-icon" viewBox="0 0 24 24">
+            <path
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+            />
+          </svg>
+          <h3>API Key Required</h3>
+          <p>
+            Please set an API key using the <code>setApiKey()</code> method or
+            provide it via the <code>[apiKey]</code> input.
+          </p>
+        </div>
+      } @else {
+        <div class="sea-widget__container">
+          <!-- Header with navigation -->
+          <header class="sea-widget__header">
+            <h1 class="sea-widget__title">
+              @if (currentView() === "list") {
+                Submissions
+              } @else {
+                Submission {{ activeSubmissionId().substring(0, 4) }}
+              }
+            </h1>
+            <nav class="sea-widget__nav">
+              @if (activeSubmissionId()) {
+                <button
+                  class="sea-widget__nav-btn"
+                  [class.sea-widget__nav-btn--active]="currentView() === 'list'"
+                  (click)="setView('list')"
+                  type="button"
+                >
+                  Submissions
+                </button>
+                <button
+                  class="sea-widget__nav-btn"
+                  [class.sea-widget__nav-btn--active]="
+                    currentView() === 'viewer'
+                  "
+                  (click)="setView('viewer')"
+                  type="button"
+                >
+                  View Data
+                </button>
+                <button
+                  class="sea-widget__nav-btn"
+                  [class.sea-widget__nav-btn--active]="currentView() === 'chat'"
+                  (click)="setView('chat')"
+                  type="button"
+                >
+                  Chat
+                </button>
+              }
+            </nav>
+          </header>
+
+          <!-- Content area -->
+          <div class="sea-widget__content">
+            @switch (currentView()) {
+              @case ("list") {
+                <div class="sea-widget__submissions">
+                  @if (loading()) {
+                    <div class="sea-widget__loading">
+                      <svg class="sea-spinner" viewBox="0 0 24 24">
+                        <circle
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="3"
+                          opacity="0.25"
+                        />
+                        <circle
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="3"
+                          stroke-dasharray="63"
+                          stroke-dashoffset="50"
+                        />
+                      </svg>
+                      <p>Loading submissions...</p>
+                    </div>
+                  } @else {
+                    @if (submissions().length > 0) {
+                      <div class="sea-submissions-list">
+                        @for (sub of submissions(); track sub.id) {
+                          <div
+                            class="sea-submission-card"
+                            [class.sea-submission-card--active]="
+                              activeSubmissionId() === sub.id
+                            "
+                            (click)="selectSubmission(sub.id)"
+                          >
+                            <div class="sea-submission-card__header">
+                              <span class="sea-submission-card__id">{{
+                                sub.id
+                              }}</span>
+                              <span
+                                class="sea-submission-card__status"
+                                [class]="
+                                  'sea-submission-card__status--' + sub.status
+                                "
+                              >
+                                {{ sub.status }}
+                              </span>
+                            </div>
+                            <div class="sea-submission-card__meta">
+                              <span>{{ sub.fields?.length ?? 0 }} fields</span>
+                              <span
+                                >{{
+                                  sub.documents?.length ?? 0
+                                }}
+                                documents</span
+                              >
+                            </div>
+                          </div>
+                        }
+                      </div>
+                    } @else {
+                      <div class="sea-widget__empty">
+                        <p>No submissions found</p>
+                      </div>
+                    }
+                    <button
+                      class="sea-widget__new-submission-btn"
+                      (click)="openNewSubmissionModal()"
+                      type="button"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M5 12h14" />
+                        <path d="M12 5v14" />
+                      </svg>
+                      New Submission
+                    </button>
+                  }
+                </div>
+              }
+              @case ("viewer") {
+                <sea-file-upload
+                  [submissionId]="activeSubmissionId()"
+                  (uploaded)="onDocumentUploaded()"
+                  (processingComplete)="onProcessingComplete()"
+                />
+                <sea-data-viewer
+                  #dataViewer
+                  [submissionId]="activeSubmissionId()!"
+                  [editable]="true"
+                  [hasRecentUpload]="hasRecentUpload(activeSubmissionId()!)"
+                  (processingComplete)="
+                    clearRecentUpload(activeSubmissionId()!)
+                  "
+                />
+              }
+              @case ("chat") {
+                <sea-chat [conversationId]="conversationId!" />
+              }
+            }
+          </div>
+        </div>
+      }
+    </div>
+
+    <!-- New Submission Modal -->
+    <sea-new-submission-modal
+      #newSubmissionModal
+      (submissionCreated)="onNewSubmissionCreated($event)"
+    />
+  `,
+  styles: [
+    `
+      .sea-widget {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: #0f172a;
+        background: #ffffff;
+        border: 1px solid #e2e8f0;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+      }
+
+      .sea-widget[data-theme="dark"] {
+        color: #f9fafb;
+        background: #1f2937;
+        border-color: #374151;
+      }
+
+      .sea-widget__no-api-key {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem 2rem;
+        text-align: center;
+        gap: 1rem;
+      }
+
+      .sea-widget__warning-icon {
+        width: 4rem;
+        height: 4rem;
+        color: #f59e0b;
+      }
+
+      .sea-widget__no-api-key h3 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .sea-widget__no-api-key p {
+        color: #6b7280;
+        margin: 0;
+      }
+
+      .sea-widget__no-api-key code {
+        background: #f3f4f6;
+        padding: 0.125rem 0.375rem;
+        border-radius: 4px;
+        font-size: 0.875rem;
+      }
+
+      .sea-widget__container {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+      }
+
+      .sea-widget__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid #e2e8f0;
+        background: #f8fafc;
+      }
+
+      .sea-widget__title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .sea-widget__nav {
+        display: flex;
+        gap: 0.5rem;
+      }
+
+      .sea-widget__nav-btn {
+        padding: 0.5rem 0.875rem;
+        background: transparent;
+        border: 1px solid #cbd5e1;
+        border-radius: 0.375rem;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #64748b;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .sea-widget__nav-btn:hover {
+        background: #ffffff;
+        border-color: #94a3b8;
+        color: #334155;
+      }
+
+      .sea-widget__nav-btn--active {
+        background: #3b82f6;
+        border-color: #3b82f6;
+        color: #ffffff;
+      }
+
+      .sea-widget__content {
+        flex: 1;
+        min-height: 0;
+        padding: 1rem;
+        overflow-y: auto;
+      }
+
+      .sea-widget__loading,
+      .sea-widget__empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem 1rem;
+        gap: 1rem;
+      }
+
+      .sea-spinner {
+        width: 3rem;
+        height: 3rem;
+        animation: rotate 1.5s linear infinite;
+        color: #3b82f6;
+      }
+
+      @keyframes rotate {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .sea-widget__create-btn {
+        padding: 0.625rem 1.25rem;
+        background: #3b82f6;
+        border: none;
+        border-radius: 6px;
+        color: white;
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.2s ease;
+      }
+
+      .sea-widget__create-btn:hover {
+        background: #2563eb;
+      }
+
+      .sea-submissions-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+
+      .sea-submission-card {
+        padding: 0.875rem 1rem;
+        background: #ffffff;
+        border: 1px solid #e2e8f0;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .sea-submission-card:hover {
+        border-color: #3b82f6;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      }
+
+      .sea-submission-card--active {
+        border-color: #3b82f6;
+        background: #eff6ff;
+      }
+
+      .sea-submission-card__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.5rem;
+      }
+
+      .sea-submission-card__id {
+        font-weight: 600;
+        font-size: 0.875rem;
+      }
+
+      .sea-submission-card__status {
+        padding: 0.125rem 0.5rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 500;
+        text-transform: capitalize;
+      }
+
+      .sea-submission-card__status--pending {
+        background: #fef3c7;
+        color: #92400e;
+      }
+
+      .sea-submission-card__status--processing {
+        background: #dbeafe;
+        color: #1e40af;
+      }
+
+      .sea-submission-card__status--completed {
+        background: #d1fae5;
+        color: #065f46;
+      }
+
+      .sea-submission-card__status--failed {
+        background: #fee2e2;
+        color: #991b1b;
+      }
+
+      .sea-submission-card__meta {
+        display: flex;
+        gap: 1rem;
+        font-size: 0.75rem;
+        color: #6b7280;
+      }
+
+      .sea-widget__new-submission-btn {
+        padding: 0.75rem 1rem;
+        background: #ffffff;
+        border: 2px dashed #cbd5e1;
+        border-radius: 0.5rem;
+        color: #64748b;
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        margin-top: 0.5rem;
+        width: 100%;
+      }
+
+      .sea-widget__new-submission-btn:hover {
+        background: #f8fafc;
+        border-color: #3b82f6;
+        color: #3b82f6;
+      }
+
+      .sea-widget__new-submission-btn svg {
+        flex-shrink: 0;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SeaWidgetComponent implements OnInit, OnChanges {
+  @Input() set apiKey(key: string | undefined) {
+    const normalized = key?.trim();
+    if (normalized) this.config.setApiKey(normalized);
+    else this.config.clearApiKey();
+  }
+
+  @Input() set debug(value: boolean | string) {
+    this.config.setDebug(value === true || value === "true" || value === "");
+  }
+
+  @Input() formId?: string;
+  @Input() dealId?: string;
+  @Input() submissionId?: string;
+  @Input() conversationId?: string;
+
+  @ViewChild("dataViewer") dataViewer?: SeaDataViewerComponent;
+  @ViewChild("newSubmissionModal")
+  newSubmissionModal?: SeaNewSubmissionModalComponent;
+
+  private readonly config = inject(SeaWidgetConfigService);
+  private readonly api = inject(SeaApiClientService);
+
+  protected readonly configuredApiKey = this.config.apiKey;
+  protected readonly theme = this.config.theme;
+  protected readonly submissions = this.api.submissions;
+  protected readonly loading = this.api.loading;
+
+  protected readonly currentView = signal<WidgetView>("list");
+  protected readonly activeSubmissionId = signal<string | undefined>(undefined);
+
+  // Track submissions that just had documents uploaded (for processing indicator)
+  private recentlyUploadedSubmissions = new Set<string>();
+  private hasInitialised = false;
+
+  ngOnInit(): void {
+    this.hasInitialised = true;
+
+    if (this.submissionId) {
+      this.syncActiveSubmission(this.submissionId);
+    }
+
+    if (this.config.apiKey() && this.formId) {
+      this.loadSubmissions();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const submissionChanged = "submissionId" in changes;
+    const apiKeyChanged =
+      "apiKey" in changes &&
+      !changes["apiKey"].firstChange &&
+      changes["apiKey"].previousValue !== changes["apiKey"].currentValue;
+    const formChanged =
+      "formId" in changes &&
+      !changes["formId"].firstChange &&
+      changes["formId"].previousValue !== changes["formId"].currentValue;
+    const dealChanged =
+      "dealId" in changes &&
+      !changes["dealId"].firstChange &&
+      changes["dealId"].previousValue !== changes["dealId"].currentValue;
+
+    // Centralize reload behavior for apiKey/formId/dealId changes
+    if (apiKeyChanged || formChanged || dealChanged) {
+      this.recentlyUploadedSubmissions.clear();
+
+      // If the active submission wasn't explicitly changed by parent, reset to list view
+      if (!submissionChanged) {
+        this.activeSubmissionId.set(undefined);
+        this.setView("list");
+      }
+
+      if (this.config.apiKey() && this.formId) {
+        this.loadSubmissions();
+      }
+    }
+
+    if (submissionChanged) {
+      const change = changes["submissionId"];
+      if (change.firstChange || change.previousValue !== change.currentValue) {
+        this.syncActiveSubmission(change.currentValue);
+      }
+    }
+  }
+
+  /**
+   * Load submissions list
+   */
+  protected loadSubmissions(): void {
+    this.api
+      .listSubmissions({
+        formId: this.formId,
+        dealId: this.dealId,
+      })
+      .subscribe();
+  }
+
+  private syncActiveSubmission(submissionId?: string): void {
+    this.activeSubmissionId.set(submissionId ?? undefined);
+    this.setView(submissionId ? "viewer" : "list");
+  }
+
+  /**
+   * Select a submission
+   */
+  protected selectSubmission(id: string): void {
+    this.activeSubmissionId.set(id);
+    this.setView("viewer");
+  }
+
+  /**
+   * Set current view
+   */
+  protected setView(view: WidgetView): void {
+    this.currentView.set(view);
+  }
+
+  /**
+   * Create new submission
+   */
+  protected createSubmission(): void {
+    this.api
+      .createSubmission({
+        formId: this.formId,
+        dealId: this.dealId,
+      })
+      .subscribe({
+        next: (submission) => {
+          this.activeSubmissionId.set(submission.id);
+          this.setView("viewer");
+        },
+      });
+  }
+
+  /**
+   * Handle document uploaded
+   */
+  protected onDocumentUploaded(): void {
+    if (this.config.debug()) {
+      console.warn("[SeaWidget] Document uploaded, refreshing submissions...");
+    }
+
+    // Mark this submission as recently uploaded
+    const submissionId = this.activeSubmissionId();
+    if (submissionId) {
+      this.recentlyUploadedSubmissions.add(submissionId);
+      if (this.config.debug()) {
+        console.warn(
+          "[SeaWidget] Marked submission as recently uploaded:",
+          submissionId,
+        );
+      }
+    }
+
+    // Refresh submissions list to update cache
+    this.loadSubmissions();
+    // Switch to viewer
+    this.setView("viewer");
+  }
+
+  /**
+   * Check if a submission was recently uploaded
+   */
+  hasRecentUpload(submissionId: string): boolean {
+    return this.recentlyUploadedSubmissions.has(submissionId);
+  }
+
+  /**
+   * Clear recent upload flag for a submission
+   */
+  clearRecentUpload(submissionId: string): void {
+    this.recentlyUploadedSubmissions.delete(submissionId);
+  }
+
+  /**
+   * Handle processing complete from upload component
+   */
+  protected onProcessingComplete(): void {
+    if (this.config.debug()) {
+      console.warn("[SeaWidget] Processing complete, reloading data viewer");
+    }
+    // Trigger data viewer to reload
+    this.dataViewer?.reloadData();
+  }
+
+  /**
+   * Open new submission modal
+   */
+  protected openNewSubmissionModal(): void {
+    this.newSubmissionModal?.open({
+      formId: this.formId,
+      dealId: this.dealId,
+    });
+  }
+
+  /**
+   * Handle new submission created from modal
+   */
+  protected onNewSubmissionCreated(submissionId: string): void {
+    this.activeSubmissionId.set(submissionId);
+    this.setView("viewer");
+    this.loadSubmissions();
+  }
+}