### Agent Request Example

Source: https://github.com/ng-zorro/x.github.io/blob/main/components/x-agent/zh/index.html

A basic example of an Agent Request, showing the log and status.

```html
      `加载中`
    Agent Request

    **Agent Request Log**

    Status \-

    Update Times 0
```

--------------------------------

### Installation

Source: https://github.com/ng-zorro/x.github.io/blob/main/index.html

Install NG-ZORRO using npm.

```bash
$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ npm install ng-zorro-x
```

--------------------------------

### Custom Request Example

Source: https://github.com/ng-zorro/x.github.io/blob/main/components/x-agent/zh/index.html

Demonstrates returning multiple recommended content items through customization.

```html
      `加载中`
    

    Agent Request Agent Abort

    **Agent Request Log**

    Status \-

    Update Times 0
```

--------------------------------

### Basic Example

Source: https://github.com/ng-zorro/x.github.io/blob/main/components/x-request/en/index.html

This example illustrates how to use XRequest to initiate a fetch request to LLMs that comply with OpenAI standards. Please copy the code and replace BASE_URL, PATH, MODEL, and API_KEY with actual values in the DEV environment to use it.

```typescript
import { XRequest } from 'ng-zorro-x/x-request';

@Component({
  selector: 'app-x-request-basic-demo',
  template: `
    <x-request
      [request]="request"
      [requestParams]="requestParams"
      (response)="response = $event"
      (error)="error = $event"
    >
      <div *ngIf="response">{{ response | json }}</div>
      <div *ngIf="error">{{ error | json }}</div>
    </x-request>
  `
})
export class XRequestBasicDemoComponent {
  request = {
    baseURL: 'https://api.example.com/chat',
    path: '/v1/chat/completions',
    model: 'gpt-3.5-turbo',
    dangerouslyApiKey: 'Bearer sk-your-dangerouslyApiKey'
  };
  requestParams = {
    messages: [
      {
        role: 'user',
        content: 'Hello!'
      }
    ]
  };
  response: any;
  error: any;
}

```

--------------------------------

### Basic Attachments Example

Source: https://github.com/ng-zorro/x.github.io/blob/main/components/attachments/en/index.html

This example shows how to use the basic attachments component.

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

@Component({
  selector: 'nz-demo-attachments-basic',
  template: `
    <nz-upload nzAction="https://jsonplaceholder.typicode.com/posts/">
      <button nz-button nzType="primary">
        <i nz-icon nzType="upload"></i>Click to Upload</button>
    </nz-upload>
  `
})
export class NzDemoAttachmentsBasicComponent {}
```

--------------------------------

### Install NG-ZORRO

Source: https://github.com/ng-zorro/x.github.io/blob/main/docs/introduce/zh/index.html

This snippet shows how to install NG-ZORRO using the Angular CLI.

```bash
$ ng new PROJECT_NAME
$ cd PROJECT_NAME
```

--------------------------------

### Basic Bubble

Source: https://github.com/ng-zorro/x.github.io/blob/main/components/bubble/zh/index.html

A basic example of the Bubble component.

```html
<nz-bubble>
  <div class="ant-bubble-content">
    <p>This is a basic bubble.</p>
  </div>
</nz-bubble>
```

--------------------------------

### Import

Source: https://github.com/ng-zorro/x.github.io/blob/main/components/welcome/en/index.html

Import the Welcome module.

```typescript
import { NxWelcomeModule } from 'ng-zorro-x/welcome';
```

--------------------------------

### Custom Transformer Example

Source: https://github.com/ng-zorro/x.github.io/blob/main/components/x-request/en/index.html

Configure a custom `transformStream` for `XRequest`. The following example demonstrates how to handle `application/x-ndjson` data format.

```typescript
import { XRequest } from 'ng-zorro-x/x-request';

@Component({
  selector: 'app-x-request-custom-transformer-demo',
  template: `
    <x-request
      [request]="request"
      [requestParams]="requestParams"
      [transformStream]="transformStream"
      (response)="response = $event"
      (error)="error = $event"
    >
      <div *ngIf="response">{{ response | json }}</div>
      <div *ngIf="error">{{ error | json }}</div>
    </x-request>
  `
})
export class XRequestCustomTransformerDemoComponent {
  request = {
    baseURL: 'https://api.example.com/chat',
    path: '/v1/chat/completions',
    model: 'gpt-3.5-turbo',
    dangerouslyApiKey: 'Bearer sk-your-dangerouslyApiKey'
  };
  requestParams = {
    messages: [
      {
        role: 'user',
        content: 'Hello!'
      }
    ]
  };
  transformStream = async (res: Response) => {
    const reader = res.body!.getReader();
    const decoder = new TextDecoder();
    let result = '';
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      result += decoder.decode(value, { stream: true });
      // Process each line of ndjson
      result.split('\n').forEach(line => {
        if (line) {
          try {
            const data = JSON.parse(line);
            console.log(data);
          } catch (e) {
            console.error('Failed to parse line:', line, e);
          }
        }
      });
    }
    return 'Stream processed';
  };
  response: any;
  error: any;
}

```

--------------------------------

### Model Integration Example

Source: https://github.com/ng-zorro/x.github.io/blob/main/components/x-agent/zh/index.html

Integrating with cloud service platforms to send messages, convert stream data, and terminate messages.

```html
      `加载中`
    Change Request Options Agent Request

baseURL: https://api.example.com/chat

model: gpt-3.5-turbo

dangerouslyApiKey: Bearer sk-your-dangerouslyApiKey

    **Agent Request Log**

    Status \-

    Update Times 0
```

--------------------------------

### Header and Navigation Styles

Source: https://github.com/ng-zorro/x.github.io/blob/main/components/x-chat/zh/index.html

CSS styles for the page header, logo, navigation menu, and search box.

```css
#header{position:relative;z-index:10;max-width:100%;background:#fff;box-shadow:0 2px 8px #f0f1f2}#header #logo strong{font-weight:500}#header .menu-row{display:flex;align-items:center;margin:0}#header .menu-row>
*{flex:none;margin:0 16px 0 0}#header .menu-row>:last-child{margin-inline-end:40px}@media only screen and (max-width:767.99px){#header{text-align:center}}#github-btn{display:flex;flex-flow:nowrap;height:auto}#github-btn .gh-btn{height:auto;padding:1px 4px;background:0 0;border:0}#github-btn .gh-btn .gh-ico{width:20px;height:20px;margin:0}#github-btn .gh-btn .gh-text{display:none}#github-btn .gh-count{min-width:45px;height:auto;padding:4px 8px;font-weight:400;background:#fff}#github-btn .gh-count:hover{color:var(--ant-primary-color)}#logo{height:64px;padding-inline-start:40px;overflow:hidden;color:#000000d9;font-size:18px;font-family:Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji",sans-serif;line-height:64px;white-space:nowrap;text-decoration:none}#logo img{position:relative;top:-1.5px;width:28.27px;height:32px;margin-inline-end:16px}@media only screen and (max-width:767.99px){#logo{padding-inline:0}}#nav{height:100%;font-size:14px;font-family:Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji",sans-serif;border:0}#nav.ant-menu-horizontal{border-bottom:none}#nav.ant-menu-horizontal>.ant-menu-item{min-width:64px;height:64px;padding-inline:12px;line-height:64px}#nav.ant-menu-horizontal>.ant-menu-item:after{inset-inline:12px;top:0;bottom:auto;border-width:2px}#nav.ant-menu-horizontal>.ant-menu-item-selected a{color:var(--ant-primary-color)}#nav>.ant-menu-item{text-align:center}#search-box{positi
```