# sai-uc-ui **Underwriter Copilot UI Library** - A reusable Angular 17+ component library for credit underwriting workflows. [![npm version](https://img.shields.io/npm/v/sai-uc-ui.svg)](https://www.npmjs.com/package/sai-uc-ui) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) This library provides a complete set of UI components, services, and utilities for building AI-powered underwriter copilot applications. ## Features - 📦 **Angular 17+ Standalone Components** - Modern, tree-shakable components - 🎨 **Angular Material 17.3.x** - Consistent Material Design styling - ⚙️ **Configurable API Endpoints** - No hardcoded URLs - 🔄 **Workflow Orchestration** - Built-in state management for multi-step workflows - 📊 **Complete Loan Summary UI** - All sections for credit assessment - 🤖 **AI Integration** - Components for AI-powered summary generation with RAG - 📄 **PDF Export** - Built-in PDF generation with html2pdf.js - 🎯 **Dynamic Data Binding** - Pass proposal data directly to components ## Installation ```bash npm install sai-uc-ui ``` ### Peer Dependencies Make sure you have these peer dependencies installed: ```bash npm install @angular/material@^17.3.0 @angular/cdk@^17.3.0 ngx-markdown@^17.0.0 html2pdf.js@^0.10.1 ``` ## Quick Start ### 1. Import Global Styles In your `styles.scss`: ```scss @import 'sai-uc-ui/src/lib/styles/uc-ui-global'; ``` > **Note:** Global styles include Material theme, fonts, and CSS variables. This is required for proper theming. ### 2. Configure the Library In your `app.config.ts`: ```typescript import { ApplicationConfig, importProvidersFrom } from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideHttpClient } from '@angular/common/http'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { provideMarkdown } from 'ngx-markdown'; import { provideUcUi } from 'sai-uc-ui'; export const appConfig: ApplicationConfig = { providers: [ provideRouter([]), provideHttpClient(), provideAnimationsAsync(), provideMarkdown(), provideUcUi({ apiBaseUrl: '/api', // Your API base URL endpoints: { aiInference: '/v1/generate-summary', multiModelInference: '/v1/generate-multiple-summary', }, defaultModel: 'gemma4:latest', ragSettings: { top_k: 15, chunk_size: 1000, chunk_overlap: 150, embedding_model: 'embeddinggemma:300m', search_type: 'hybrid', storage_type: 'pgvector', }, }), ], }; ``` ### 3. Use Components ```typescript import { Component } from '@angular/core'; import { AiSummaryButtonComponent, Proposal } from 'sai-uc-ui'; @Component({ selector: 'app-root', standalone: true, imports: [AiSummaryButtonComponent], template: ` `, }) export class AppComponent { proposal: Proposal = { proposalNo: '143563000000139', borrowerName: 'Acme Industries Pvt. Ltd.', loanType: 'Working Capital', amountRequested: 5000000, status: 'Under Review', submissionDate: '2026-06-15', assignedTo: 'John Doe', documents: [ { documentId: '745', documentName: 'CIBIL Commercial Report', documentType: 'json' }, { documentId: '746', documentName: 'gst Commercial Report', documentType: 'json' }, { documentId: '747', documentName: 'fin Commercial Report', documentType: 'json' }, ], isAiSettingsConfigurable: true, // Borrower Information (displayed in Borrower Info section) borrowerInfo: { CompanyName: 'Sriram Industries Pvt. Ltd.', CIN: 'U74999MH2018PTC123456', DIN: '07654321', dateOfIncorporation: '2018-05-15', Pan: 'AABCA1234F', Gst: '27AABCA1234F1ZM', address: '123 Industrial Area, Pune, Maharashtra, India', }, // Director Information (displayed in Director Info section) directorInfo: [ { directorName: 'Rajesh Kumar Sharma', DIN: '07654321', PAN: 'AXYPS1234K', posting: 'Managing Director' }, { directorName: 'Priya Gupta', DIN: '08765432', PAN: 'BXYPS5678L', posting: 'Director' }, ], // Facility Information (displayed in Loan Facility section) facilityInfo: [ { facilityName: 'Cash Credit', natureOfLimit: 'Secured', tenure: '12 Months', amountRequested: 3000000 }, { facilityName: 'Term Loan', natureOfLimit: 'Secured', tenure: '36 Months', amountRequested: 2000000 }, ], }; onSummaryOpened(proposal: Proposal) { console.log('AI Summary opened for:', proposal.borrowerName); } onSummaryClosed(result: unknown) { console.log('AI Summary closed with result:', result); } } ``` ## Configuration ### UcUiConfig Interface ```typescript interface UcUiConfig { /** Base URL for all API endpoints */ apiBaseUrl: string; /** Custom endpoint paths (optional) */ endpoints?: { aiInference?: string; // Default: '/v1/generate-summary' multiModelInference?: string; // Default: '/v1/generate-multiple-summary' }; /** Default AI model (optional) */ defaultModel?: string; // Default: 'gemma4:latest' /** RAG settings (optional) */ ragSettings?: { top_k?: number; // Default: 15 chunk_size?: number; // Default: 1000 chunk_overlap?: number; // Default: 150 embedding_model?: string; // Default: 'embeddinggemma:300m' search_type?: 'similarity' | 'mmr' | 'hybrid'; // Default: 'hybrid' storage_type?: 'pgvector' | 'inmemory'; // Default: 'pgvector' }; } ``` ## Data Models ### Proposal Interface The main data model for loan proposals: ```typescript interface Proposal { proposalNo: string; // Unique proposal number borrowerName: string; // Company/borrower name loanType: string; // Type of loan amountRequested: number; // Loan amount status: string; // Proposal status submissionDate: string; // Date submitted assignedTo?: string; // Assigned underwriter // Document references for AI analysis documents: ProposalDocument[]; // AI Settings isAiSettingsConfigurable?: boolean; // Show/hide AI settings button // Dynamic section data (rendered directly from proposal) borrowerInfo?: ProposalBorrowerInfo; directorInfo?: ProposalDirectorInfo[]; facilityInfo?: ProposalFacilityInfo[]; } interface ProposalDocument { documentId: string; documentName: string; // 'gst', 'cibil', 'financial', etc. documentType: string; // 'json', 'pdf', etc. } interface ProposalBorrowerInfo { CompanyName: string; CIN: string; DIN: string; dateOfIncorporation: string; Pan: string; Gst: string; address?: string; } interface ProposalDirectorInfo { directorName: string; DIN: string; PAN: string; posting: string; // Role/designation } interface ProposalFacilityInfo { facilityName: string; natureOfLimit: string; tenure: string; amountRequested: number; } ``` ## Components ### Shared Components | Component | Selector | Description | | -------------------------- | ---------------------- | ------------------------------------------ | | `AiSummaryButtonComponent` | `uc-ai-summary-button` | Button that opens AI summary dialog | | `SummaryLoadingComponent` | `uc-summary-loading` | Loading indicator with animations and tips | | `AiSettingsModalComponent` | `uc-ai-settings-modal` | Modal for configuring AI/RAG settings | | `AiSettingsPanelComponent` | `uc-ai-settings-panel` | Side panel for AI settings (in summary) | ### Section Components | Component | Selector | Description | | --------------------------- | ---------------------- | ----------------------------------- | | `GoNoGoDecisionComponent` | `uc-go-nogo-decision` | Dynamic Go/No-Go decision display | | `BorrowerInfoComponent` | `uc-borrower-info` | Borrower information (from proposal)| | `RiskRatingComponent` | `uc-risk-rating` | Risk rating analysis | | `DirectorInfoComponent` | `uc-director-info` | Director information (from proposal)| | `LoanFacilityComponent` | `uc-loan-facility` | Loan facility details (from proposal)| | `CreditBureauComponent` | `uc-credit-bureau` | Credit bureau with overview/detailed views | | `CreditAssessmentComponent` | `uc-credit-assessment` | Credit assessment section | | `GstSummaryComponent` | `uc-gst-summary` | GST summary with overview/detailed views | | `BalanceSheetComponent` | `uc-balance-sheet` | Balance sheet with overview/detailed views | | `RiskAssessmentComponent` | `uc-risk-assessment` | Risk assessment rating | | `EwsDashboardComponent` | `uc-ews-dashboard` | Early warning system dashboard | ### Feature Components | Component | Selector | Description | | -------------------------- | ---------------------- | ------------------------------- | | `LoanSummaryComponent` | `uc-loan-summary` | Main loan summary orchestration | | `AiSummaryDialogComponent` | `uc-ai-summary-dialog` | Full AI summary dialog | | `ServiceCardComponent` | `uc-service-card` | Service selection card | ## Key Features ### Dynamic Decision Parsing The Go/No-Go decision component parses AI-generated markdown to extract: - **Decision**: GO, NO-GO, or REVIEW - **Score**: Summary score percentage - **Credit Score**: From bureau quick summary (displayed in factors grid) ### Quick Summary Integration The API response includes `quick_summary` data that populates overview cards: - GST Overview (turnover, growth, compliance) - Bureau Overview (CIBIL score, accounts, payments) - Financial Overview (assets, liabilities, ratios) ### Proposal-Based Data Binding Section components receive data directly from the proposal: - `borrowerInfo` → Borrower Information section - `directorInfo` → Director Information section - `facilityInfo` → Loan Facility section ## Services ### LoanSummaryService Main service for loan data and AI inference. ```typescript import { Component, inject } from '@angular/core'; import { LoanSummaryService } from 'sai-uc-ui'; @Component({...}) export class MyComponent { private loanService = inject(LoanSummaryService); generateSummary() { this.loanService.callMultiModelInference( { gst: 'Analyze GST data', bureau: 'Analyze bureau data' }, 'gemma4:latest', 'PROPOSAL-001', this.documents ).subscribe(response => { // Response includes: // - responses.gst.response (detailed markdown) // - responses.bureau.response (detailed markdown) // - responses.go_nogo.response (decision markdown) // - quick_summary.gst (overview data) // - quick_summary.bureau (overview data) console.log(response); }); } } ``` ## Peer Dependencies | Package | Version | | -------------------- | --------- | | `@angular/common` | ^17.3.0 | | `@angular/core` | ^17.3.0 | | `@angular/forms` | ^17.3.0 | | `@angular/router` | ^17.3.0 | | `@angular/cdk` | ^17.3.0 | | `@angular/material` | ^17.3.0 | | `rxjs` | ^7.8.0 | | `ngx-markdown` | ^17.0.0 | | `html2pdf.js` | ^0.10.1 | ## Browser Support - Chrome (latest) - Firefox (latest) - Safari (latest) - Edge (latest) ## License MIT © 2026 ## Links - [npm Package](https://www.npmjs.com/package/sai-uc-ui) - [GitHub Repository](https://sysarcgitlab.sysarcin.com:1473/ai-team/underwriter-copilot/)