sea-dev 1.0.0

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

@@ -0,0 +1,350 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import type { Document } from "../models/submission.model";
+
+/**
+ * Document list component for sidebar
+ * Shows all documents with their status and allows viewing
+ */
+@Component({
+  selector: "sea-document-list",
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="sea-document-list">
+      <h3 class="sea-document-list__title">Documents</h3>
+
+      <div class="sea-document-list__items">
+        @if (documents.length === 0) {
+          <div class="sea-document-list__empty">
+            <p>No documents uploaded yet</p>
+          </div>
+        } @else {
+          @for (doc of documents; track doc.id || doc.documentExtractionId) {
+            <div class="sea-document-list__item">
+              <div class="sea-document-list__item-icon">
+                @switch (doc.status) {
+                  @case ("pending") {
+                    <svg
+                      class="sea-spinner sea-spinner--small"
+                      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>
+                  }
+                  @case ("processing") {
+                    <svg
+                      class="sea-spinner sea-spinner--small"
+                      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>
+                  }
+                  @case ("failed") {
+                    <svg
+                      class="sea-document-list__icon sea-document-list__icon--error"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <path
+                        d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
+                      />
+                      <path d="M14 2v6h6" />
+                      <path d="m9 15 6-6" />
+                      <path d="m9 9 6 6" />
+                    </svg>
+                  }
+                  @default {
+                    <svg
+                      class="sea-document-list__icon sea-document-list__icon--success"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <path
+                        d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
+                      />
+                      <polyline points="14 2 14 8 20 8" />
+                      <path d="m9 15 2 2 4-4" />
+                    </svg>
+                  }
+                }
+              </div>
+
+              <div class="sea-document-list__item-content">
+                <span class="sea-document-list__item-name" [title]="doc.name">
+                  {{ doc.name }}
+                </span>
+                <span
+                  class="sea-document-list__item-status"
+                  [class]="'sea-document-list__item-status--' + doc.status"
+                >
+                  {{ doc.status }}
+                </span>
+              </div>
+
+              @if (
+                doc.url && (doc.status === "done" || doc.status === "completed")
+              ) {
+                <button
+                  class="sea-document-list__item-action"
+                  type="button"
+                  (click)="documentClicked.emit(doc)"
+                  aria-label="View document"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+                    <circle cx="12" cy="12" r="3" />
+                  </svg>
+                </button>
+              }
+            </div>
+          }
+        }
+      </div>
+
+      @if (!canUploadMore) {
+        <div class="sea-document-list__limit">
+          <p>Document upload limit reached. Upgrade to add more.</p>
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .sea-document-list {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 1rem;
+        background: white;
+      }
+
+      .sea-document-list__title {
+        margin: 0 0 1rem 0;
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: #111827;
+      }
+
+      .sea-document-list__items {
+        flex: 1;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+
+      .sea-document-list__empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem 1rem;
+        color: #9ca3af;
+        text-align: center;
+      }
+
+      .sea-document-list__empty p {
+        margin: 0;
+        font-size: 0.875rem;
+      }
+
+      .sea-document-list__item {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.75rem;
+        border: 1px solid #e5e7eb;
+        border-radius: 8px;
+        transition: all 0.2s ease;
+      }
+
+      .sea-document-list__item:hover {
+        border-color: #d1d5db;
+        background: #f9fafb;
+      }
+
+      .sea-document-list__item-icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+      }
+
+      .sea-document-list__icon {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      .sea-document-list__icon--success {
+        color: #10b981;
+      }
+
+      .sea-document-list__icon--error {
+        color: #ef4444;
+      }
+
+      .sea-spinner {
+        width: 1.5rem;
+        height: 1.5rem;
+        animation: rotate 1.5s linear infinite;
+        color: #3b82f6;
+      }
+
+      .sea-spinner--small {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+
+      @keyframes rotate {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .sea-document-list__item-content {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      .sea-document-list__item-name {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #111827;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .sea-document-list__item-status {
+        font-size: 0.75rem;
+        font-weight: 400;
+        text-transform: capitalize;
+      }
+
+      .sea-document-list__item-status--pending {
+        color: #d97706;
+      }
+
+      .sea-document-list__item-status--processing {
+        color: #3b82f6;
+      }
+
+      .sea-document-list__item-status--done,
+      .sea-document-list__item-status--completed {
+        color: #10b981;
+      }
+
+      .sea-document-list__item-status--failed {
+        color: #ef4444;
+      }
+
+      .sea-document-list__item-action {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: #6b7280;
+        cursor: pointer;
+        border-radius: 4px;
+        transition: all 0.2s ease;
+      }
+
+      .sea-document-list__item-action:hover {
+        background: #f3f4f6;
+        color: #111827;
+      }
+
+      .sea-document-list__limit {
+        margin-top: 1rem;
+        padding: 0.75rem;
+        background: #fef3c7;
+        border: 1px solid #fbbf24;
+        border-radius: 6px;
+      }
+
+      .sea-document-list__limit p {
+        margin: 0;
+        font-size: 0.75rem;
+        color: #92400e;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SeaDocumentListComponent {
+  @Input({ required: true }) documents!: Document[];
+  @Input() canUploadMore = true;
+  @Output() documentClicked = new EventEmitter<Document>();
+}