npm package: @riviai/riviai-ui-angular-sdk
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
Latest version: 1.0.37

# RiviaiUiAngularSdk

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.

## Installation

```bash
npm install @rivi/riviai-ui-angular-sdk
```

## Setup

### 1. Import Styles

Add the following to your `angular.json`:

```json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": ["node_modules/@rivi/riviai-ui-angular-sdk/styles.css", "node_modules/@rivi/riviai-ui-angular-sdk/styles/**/*.css", "src/styles.css"]
          }
        }
      }
    }
  }
}
```

### 2. Configure Tailwind CSS

Make sure you have Tailwind CSS configured in your project. Add the following to your `tailwind.config.js`:

```js
module.exports = {
  content: ["./src/**/*.{html,ts}", "./node_modules/@rivi/riviai-ui-angular-sdk/**/*.{html,ts,css}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

### 3. Import Module

Import the module in your `app.module.ts`:

```typescript
import { RiviaiUiAngularSdkModule } from "@rivi/riviai-ui-angular-sdk";

@NgModule({
  imports: [RiviaiUiAngularSdkModule],
})
export class AppModule {}
```

## Usage

```typescript
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: ` <riviai-ask-ai [searchId]="'demo'" [searchParams]="searchParams"></riviai-ask-ai> `,
})
export class AppComponent {
  searchParams = {
    // your search parameters
  };
}
```

## Customization

### Button Styles

The button comes with default styles that can be customized using the `buttonClass` input:

```typescript
@Component({
  template: ` <riviai-ask-ai [buttonClass]="'custom-button-class'" [searchId]="'demo'" [searchParams]="searchParams"></riviai-ask-ai> `,
})
export class AppComponent {
  searchParams = {
    // your search parameters
  };
}
```

Default button styles include:

- Padding (px-4 py-2)
- Blue background (bg-blue-500)
- White text (text-white)
- Rounded corners (rounded-lg)
- Hover state (hover:bg-blue-600)
- Focus state with ring (focus:ring-2)
- Disabled state (opacity-50)
- Smooth transitions (transition-colors duration-200)

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build riviai-ui-angular-sdk
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:

   ```bash
   cd dist/riviai-ui-angular-sdk
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.