sea-dev 1.0.0

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

@@ -0,0 +1,737 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  inject,
+  ChangeDetectionStrategy,
+  ViewChild,
+  ElementRef,
+  AfterViewChecked,
+  HostListener,
+  signal,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { SeaChatService, type ChatMessage } from "../services/chat.service";
+import { SeaApiClientService } from "../services/api-client.service";
+import { Subject, takeUntil } from "rxjs";
+import { MarkdownPipe } from "../pipes/markdown.pipe";
+import { SeaPdfViewerComponent } from "./sea-pdf-viewer.component";
+import type { Document } from "../models/submission.model";
+
+/**
+ * Chat component for conversing with submission AI assistant
+ */
+@Component({
+  selector: "sea-chat",
+  standalone: true,
+  imports: [CommonModule, FormsModule, MarkdownPipe, SeaPdfViewerComponent],
+  template: `
+    <div class="sea-chat">
+      <!-- Chat messages -->
+      <div class="sea-chat__messages" #messagesContainer>
+        @if (messages().length === 0 && !isStreaming()) {
+          <div class="sea-chat__empty">
+            <svg
+              class="sea-chat__empty-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+            >
+              <path
+                d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <p>Ask questions about this submission</p>
+          </div>
+        } @else {
+          @for (message of messages(); track message.id) {
+            <div
+              class="sea-chat__message"
+              [class.sea-chat__message--user]="message.role === 'user'"
+              [class.sea-chat__message--assistant]="
+                message.role === 'assistant'
+              "
+            >
+              <div class="sea-chat__message-content">
+                @for (part of message.parts; track $index) {
+                  @if (part.text) {
+                    <div
+                      class="sea-chat__message-text"
+                      [innerHTML]="part.text | markdown"
+                    ></div>
+                  }
+                }
+                <button
+                  type="button"
+                  class="sea-chat__message-copy"
+                  (click)="copyMessage(message)"
+                  [attr.aria-label]="getCopiedLabel(message.id)"
+                  [attr.title]="getCopiedLabel(message.id)"
+                >
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                    <path
+                      d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          }
+        }
+
+        @if (error()) {
+          <div class="sea-chat__error">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <circle cx="12" cy="12" r="10" stroke-width="2" />
+              <line x1="12" y1="8" x2="12" y2="12" stroke-width="2" />
+              <line x1="12" y1="16" x2="12.01" y2="16" stroke-width="2" />
+            </svg>
+            <span>{{ error() }}</span>
+          </div>
+        }
+      </div>
+
+      <!-- Input area -->
+      <div class="sea-chat__input-area">
+        <form class="sea-chat__form" (submit)="handleSubmit($event)">
+          <input
+            type="text"
+            class="sea-chat__input"
+            [(ngModel)]="inputValue"
+            [disabled]="isStreaming()"
+            placeholder="Type your message..."
+            name="message"
+            autocomplete="off"
+          />
+          <button
+            type="submit"
+            class="sea-chat__send-btn"
+            [disabled]="isStreaming() || !inputValue.trim()"
+          >
+            @if (isStreaming()) {
+              <svg
+                class="sea-chat__spinner"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+              >
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke-width="3"
+                  opacity="0.25"
+                />
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke-width="3"
+                  stroke-dasharray="63"
+                  stroke-dashoffset="50"
+                />
+              </svg>
+            } @else {
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <line x1="22" y1="2" x2="11" y2="13" stroke-width="2" />
+                <polygon points="22 2 15 22 11 13 2 9 22 2" stroke-width="2" />
+              </svg>
+            }
+          </button>
+        </form>
+      </div>
+
+      <!-- Citation modal -->
+      @if (showCitationModal()) {
+        <div class="sea-chat__modal-backdrop" (click)="closeCitationModal()">
+          <div
+            class="sea-chat__modal-content"
+            (click)="$event.stopPropagation()"
+          >
+            <sea-pdf-viewer
+              [document]="selectedDocument()"
+              [selectedCitationId]="selectedCitationId()"
+              (closed)="closeCitationModal()"
+            ></sea-pdf-viewer>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .sea-chat {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background: white;
+      }
+
+      .sea-chat__messages {
+        flex: 1;
+        overflow-y: auto;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      .sea-chat__empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #9ca3af;
+        gap: 1rem;
+      }
+
+      .sea-chat__empty-icon {
+        width: 3rem;
+        height: 3rem;
+      }
+
+      .sea-chat__empty p {
+        margin: 0;
+        font-size: 0.875rem;
+      }
+
+      .sea-chat__message {
+        display: flex;
+        flex-direction: column;
+        max-width: 85%;
+        position: relative;
+        margin-bottom: 1.25rem;
+      }
+
+      .sea-chat__message--user {
+        align-self: flex-end;
+        margin-left: auto;
+      }
+
+      .sea-chat__message--assistant {
+        align-self: flex-start;
+        margin-right: auto;
+        max-width: 100%;
+      }
+
+      .sea-chat__message-content {
+        position: relative;
+        padding: 0.5rem 2rem 0.5rem 0.75rem;
+        border-radius: 0.5rem;
+        word-wrap: break-word;
+        background: white;
+        min-width: 3rem;
+        transition:
+          background 0.2s ease,
+          box-shadow 0.2s ease;
+      }
+
+      .sea-chat__message--user .sea-chat__message-content {
+        background: #f8fafc;
+        border: 1px solid #e2e8f0;
+        box-shadow:
+          0 1px 3px 0 rgba(0, 0, 0, 0.1),
+          0 1px 2px 0 rgba(0, 0, 0, 0.06);
+      }
+
+      .sea-chat__message--user .sea-chat__message-content:hover {
+        box-shadow:
+          0 4px 6px -1px rgba(0, 0, 0, 0.1),
+          0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      }
+
+      .sea-chat__message--assistant .sea-chat__message-content {
+        background: transparent;
+        border: none;
+        box-shadow: none;
+        padding: 0.75rem 2rem 0.75rem 0.75rem;
+        color: #374151;
+      }
+
+      .sea-chat__message--assistant .sea-chat__message-content:hover {
+        background: rgba(0, 0, 0, 0.02);
+        border-radius: 0.5rem;
+      }
+
+      .sea-chat__message:last-child {
+        margin-bottom: 1rem;
+      }
+
+      .sea-chat__message-text {
+        font-size: 0.8125rem;
+        line-height: 1.75;
+        word-break: break-word;
+        letter-spacing: 0.01em;
+        font-weight: 400;
+      }
+
+      .sea-chat__message-text :where(p, ul, ol, pre, blockquote) {
+        margin: 0.875rem 0;
+      }
+
+      .sea-chat__message-text :where(p, ul, ol, pre, blockquote):first-child {
+        margin-top: 0;
+      }
+
+      .sea-chat__message-text :where(p, ul, ol, pre, blockquote):last-child {
+        margin-bottom: 0;
+      }
+
+      .sea-chat__message-text code {
+        background: rgba(0, 0, 0, 0.06);
+        padding: 0.125rem 0.25rem;
+        border-radius: 0.25rem;
+        font-family: monospace;
+        font-size: 0.8125rem;
+      }
+
+      .sea-chat__message-text pre {
+        background: rgba(0, 0, 0, 0.04);
+        padding: 0.75rem;
+        border-radius: 0.5rem;
+        overflow-x: auto;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+      }
+
+      .sea-chat__message-text pre code {
+        background: transparent;
+        padding: 0;
+      }
+
+      .sea-chat__message-text ul,
+      .sea-chat__message-text ol {
+        padding-left: 1.5rem;
+      }
+
+      .sea-chat__message-text li {
+        margin: 0.375rem 0;
+      }
+
+      .sea-chat__message-text blockquote {
+        border-left: 3px solid rgba(0, 0, 0, 0.15);
+        padding-left: 0.75rem;
+        font-style: italic;
+        color: #4b5563;
+      }
+
+      .sea-chat__message-text a {
+        color: inherit;
+        text-decoration: underline;
+      }
+
+      .sea-chat__message-text h1,
+      .sea-chat__message-text h2,
+      .sea-chat__message-text h3,
+      .sea-chat__message-text h4,
+      .sea-chat__message-text h5,
+      .sea-chat__message-text h6 {
+        margin: 1rem 0 0.625rem 0;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+
+      .sea-chat__message-text h1:first-child,
+      .sea-chat__message-text h2:first-child,
+      .sea-chat__message-text h3:first-child,
+      .sea-chat__message-text h4:first-child,
+      .sea-chat__message-text h5:first-child,
+      .sea-chat__message-text h6:first-child {
+        margin-top: 0;
+      }
+
+      .sea-chat__message-copy {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        width: 1.75rem;
+        height: 1.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: none;
+        color: rgba(107, 114, 128, 0.5);
+        cursor: pointer;
+        border-radius: 0.375rem;
+        opacity: 0;
+        transition:
+          opacity 0.2s ease,
+          color 0.2s ease,
+          background 0.2s ease;
+      }
+
+      .sea-chat__message:hover .sea-chat__message-copy {
+        opacity: 1;
+      }
+
+      .sea-chat__message-copy:hover {
+        color: #374151;
+        background: rgba(0, 0, 0, 0.08);
+      }
+
+      .sea-chat__message-copy svg {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      .sea-chat__error {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1rem;
+        background: #fee2e2;
+        color: #991b1b;
+        border-radius: 0.5rem;
+        font-size: 0.875rem;
+      }
+
+      .sea-chat__error svg {
+        width: 1.25rem;
+        height: 1.25rem;
+        flex-shrink: 0;
+      }
+
+      .sea-chat__input-area {
+        padding: 1rem;
+        border-top: 1px solid #e5e7eb;
+        background: #f9fafb;
+      }
+
+      .sea-chat__form {
+        display: flex;
+        gap: 0.5rem;
+      }
+
+      .sea-chat__input {
+        flex: 1;
+        padding: 0.75rem 1rem;
+        border: 1px solid #d1d5db;
+        border-radius: 0.5rem;
+        font-size: 0.875rem;
+        outline: none;
+        transition: border-color 0.2s ease;
+      }
+
+      .sea-chat__input:focus {
+        border-color: #3b82f6;
+      }
+
+      .sea-chat__input:disabled {
+        background: #f3f4f6;
+        color: #9ca3af;
+        cursor: not-allowed;
+      }
+
+      .sea-chat__send-btn {
+        padding: 0.75rem;
+        background: #3b82f6;
+        border: none;
+        border-radius: 0.5rem;
+        color: white;
+        cursor: pointer;
+        transition: background 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .sea-chat__send-btn:hover:not(:disabled) {
+        background: #2563eb;
+      }
+
+      .sea-chat__send-btn:disabled {
+        background: #d1d5db;
+        cursor: not-allowed;
+      }
+
+      .sea-chat__send-btn svg {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+
+      .sea-chat__spinner {
+        animation: rotate 1.5s linear infinite;
+      }
+
+      @keyframes rotate {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      /* Citation styles matching React app */
+      ::ng-deep .citation-wrapper {
+        display: inline;
+      }
+
+      ::ng-deep .citation-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1rem;
+        height: 1rem;
+        padding: 0.125rem;
+        margin-left: 0.125rem;
+        border: none;
+        border-radius: 9999px;
+        background: transparent;
+        color: rgba(37, 99, 235, 0.6);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        vertical-align: baseline;
+      }
+
+      ::ng-deep .citation-button:hover {
+        background: rgba(37, 99, 235, 0.1);
+        color: rgba(29, 78, 216, 1);
+      }
+
+      ::ng-deep .citation-icon {
+        width: 0.75rem;
+        height: 0.75rem;
+        flex-shrink: 0;
+      }
+
+      /* Citation modal styles */
+      .sea-chat__modal-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10000;
+      }
+
+      .sea-chat__modal-content {
+        width: 90vw;
+        height: 90vh;
+        background: white;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        box-shadow:
+          0 20px 25px -5px rgba(0, 0, 0, 0.1),
+          0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SeaChatComponent implements OnInit, OnDestroy, AfterViewChecked {
+  @Input({ required: true }) conversationId!: string;
+  @Input() submissionId?: string;
+
+  @ViewChild("messagesContainer")
+  messagesContainer?: ElementRef<HTMLDivElement>;
+
+  private readonly chatService = inject(SeaChatService);
+  private readonly apiClient = inject(SeaApiClientService);
+  private readonly destroy$ = new Subject<void>();
+  private shouldScrollToBottom = false;
+
+  // Component state
+  inputValue = "";
+  private copiedMessageIds = new Set<string>();
+
+  // Documents for citation lookup
+  protected readonly documents = signal<Document[]>([]);
+
+  // Citation modal state
+  protected readonly showCitationModal = signal(false);
+  protected readonly selectedCitationId = signal<string | undefined>(undefined);
+  protected readonly selectedDocument = signal<Document | null>(null);
+
+  // Reactive state from service
+  protected readonly messages = this.chatService.messages;
+  protected readonly isStreaming = this.chatService.isStreaming;
+  protected readonly error = this.chatService.error;
+
+  ngOnInit(): void {
+    this.loadHistory();
+    if (this.submissionId) {
+      this.loadDocuments();
+    }
+  }
+
+  ngAfterViewChecked(): void {
+    if (this.shouldScrollToBottom) {
+      this.scrollToBottom();
+      this.shouldScrollToBottom = false;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.chatService.closeStream();
+  }
+
+  private loadHistory(): void {
+    this.chatService
+      .loadHistory(this.conversationId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: () => {
+          this.shouldScrollToBottom = true;
+        },
+        error: (err) => {
+          console.error("[Chat] Failed to load history:", err);
+        },
+      });
+  }
+
+  private loadDocuments(): void {
+    if (!this.submissionId) return;
+
+    this.apiClient
+      .getSubmissionData(this.submissionId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (data) => {
+          console.log("[Chat] Loaded submission data:", data);
+          if (data.documents) {
+            console.log("[Chat] Loaded documents:", data.documents);
+            this.documents.set(data.documents);
+          }
+        },
+        error: (err) => {
+          console.error("[Chat] Failed to load documents:", err);
+        },
+      });
+  }
+
+  protected handleSubmit(event: Event): void {
+    event.preventDefault();
+
+    const message = this.inputValue.trim();
+    if (!message || this.isStreaming()) {
+      return;
+    }
+
+    // Clear input
+    this.inputValue = "";
+
+    // Send message
+    this.chatService
+      .sendMessage(this.conversationId, message)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (_chunk) => {
+          this.shouldScrollToBottom = true;
+        },
+        error: (err) => {
+          console.error("[Chat] Stream error:", err);
+        },
+        complete: () => {
+          this.shouldScrollToBottom = true;
+        },
+      });
+
+    this.shouldScrollToBottom = true;
+  }
+
+  private scrollToBottom(): void {
+    if (this.messagesContainer) {
+      const element = this.messagesContainer.nativeElement;
+      element.scrollTop = element.scrollHeight;
+    }
+  }
+
+  protected copyMessage(message: ChatMessage): void {
+    const text = message.parts
+      .filter((part: { type: string; text?: string }) => part.text)
+      .map((part: { type: string; text?: string }) => part.text || "")
+      .join("\n");
+
+    navigator.clipboard?.writeText(text).then(() => {
+      this.copiedMessageIds.add(message.id);
+      setTimeout(() => {
+        this.copiedMessageIds.delete(message.id);
+      }, 1500);
+    });
+  }
+
+  protected getCopiedLabel(messageId: string): string {
+    return this.copiedMessageIds.has(messageId) ? "Copied" : "Copy";
+  }
+
+  /**
+   * Handle clicks on citation buttons in chat messages
+   */
+  @HostListener("click", ["$event"])
+  protected handleCitationClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+
+    // Find the citation button - check target and traverse up the DOM
+    let citationButton: HTMLElement | null = null;
+
+    if (target.classList.contains("citation-button")) {
+      citationButton = target;
+    } else {
+      citationButton = target.closest(".citation-button");
+    }
+
+    if (citationButton) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const citationId = citationButton.getAttribute("data-citation-id");
+      console.log("[Chat] Citation button clicked:", citationId);
+
+      if (citationId) {
+        this.openCitationModal(citationId);
+      }
+    }
+  }
+
+  /**
+   * Open the citation modal with the selected citation
+   */
+  protected openCitationModal(citationId: string): void {
+    console.log("[Chat] Opening citation modal for:", citationId);
+    console.log("[Chat] Available documents:", this.documents());
+
+    // Find the document that contains this citation
+    const document = this.documents().find((doc) =>
+      doc.citations?.some((citation) => citation.id === citationId),
+    );
+
+    if (document) {
+      console.log("[Chat] Found document:", document.name);
+      this.selectedCitationId.set(citationId);
+      this.selectedDocument.set(document);
+      this.showCitationModal.set(true);
+    } else {
+      console.warn(
+        "[Chat] Citation not found in documents:",
+        citationId,
+        "Available citations:",
+        this.documents().flatMap((d) => d.citations?.map((c) => c.id) || []),
+      );
+    }
+  }
+
+  /**
+   * Close the citation modal
+   */
+  protected closeCitationModal(): void {
+    this.showCitationModal.set(false);
+    this.selectedCitationId.set(undefined);
+    this.selectedDocument.set(null);
+  }
+}