SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsmatechat-ng

matechat-ng

Coding & development

View repository

Updated 10-15 21:08

About this skill

When to use this skill

ALWAYS use this skill when the user mentions:

  • "MateChat Angular", "MateChat NG", "matechat-ng", "@matechat/ng"
  • Building AI chat interfaces with Angular
  • Using Angular chat UI components like Bubble, Input, Prompt, Layout, Markdown, etc.
  • "MateChat Angular components", "AI chat UI", "AI Agent UI"
  • Requests to "implement a [component] with MateChat Angular"
  • Requests for MateChat Angular component API or configuration
  • Building conversational AI interfaces with Angular

How to use this skill

This skill is organized to provide comprehensive guidance for MateChat Angular components, with automatic documentation updates.

1. Identify the User's Need

  • Component Usage → See Component Categories below
  • API Reference → references/components/<component>/api.md
  • Demo Examples → references/components/<component>/demo.md
  • Use Guide → references/use-guide/ (installation, configuration, themes, etc.)

2. Component Categories

Conversation Components

  • Bubble - Bubble component, used to carry conversation content
    • API: references/components/bubble/api.md
    • Demo: references/components/bubble/demo.md

Input Components

  • Input - Input component, used for user message input
    • API: references/components/input/api.md
    • Demo: references/components/input/demo.md
  • Mention - Mention component, supports @mention functionality
    • API: references/components/mention/api.md
    • Demo: references/components/mention/demo.md

Layout Components

  • Layout - Layout component, provides overall page layout
    • API: references/components/layout/api.md
    • Demo: references/components/layout/demo.md
  • Header - Header component
    • API: references/components/header/api.md
    • Demo: references/components/header/demo.md

Functional Components

  • Prompt - Prompt component, used for quick prompts
    • API: references/components/prompt/api.md
    • Demo: references/components/prompt/demo.md
  • List - List component, used to display the conversation list
    • API: references/components/list/api.md
    • Demo: references/components/list/demo.md
  • Toolbar - Toolbar component
    • API: references/components/toolbar/api.md
    • Demo: references/components/toolbar/demo.md

File Components

  • Attachment - Attachment component, used for file upload
    • API: references/components/attachment/api.md
    • Demo: references/components/attachment/demo.md

Display Components

  • MarkdownCard - Markdown card component, used to render Markdown content
    • API: references/components/markdownCard/api.md
    • Demo: references/components/markdownCard/demo.md
  • Introduction - Introduction component
    • API: references/components/introduction/api.md
    • Demo: references/components/introduction/demo.md

3. Use Guide Documentation

The references/use-guide/ directory contains comprehensive guides for using MateChat Angular:

Getting Started

  • introduction.md - Introduction to MateChat Angular quick start guide, include installation etc.

To use guide documentation:

  1. Identify the topic from the user's request
  2. Load the corresponding guide file from references/use-guide/
  3. Follow the instructions and best practices in that guide

4. Installation

Using npm:

npm install @matechat/ng

5. Basic Setup

Import Module:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BubbleModule } from '@matechat/ng';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, BubbleModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {}

6. Quick Start Example

<mc-bubble [content]="'Hello, MateChat'" [avatarConfig]="{ name: 'matechat' }"></mc-bubble>

Complete Chat Interface Example:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BubbleModule, InputModule, MarkdownCardModule } from '@matechat/ng';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, BubbleModule, InputModule, MarkdownCardModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  messages: any[] = [];
  avatarConfig = {
    imgSrc: 'https://matechat.gitcode.com/png/demo/userAvatar.svg',
  };
  modelAvatar = {
    imgSrc: 'https://matechat.gitcode.com/logo.svg',
  };

  onSubmit(event: any) {
    this.messages.push({
      from: 'user',
      content: event,
    });
    
    setTimeout(() => {
      this.messages.push({
        from: 'model',
        content: event,
      });
    }, 200);
  }
}

<div class="chat-list">
  <ng-container *ngFor="let msg of messages">
    @if (msg.from === 'user') {
      <mc-bubble 
        class="user-bubble" 
        [align]="'right'" 
        [content]="msg.content" 
        [avatarConfig]="avatarConfig">
      </mc-bubble>
    } @else if (msg.from === 'model') {
      <mc-bubble 
        class="model-bubble" 
        [align]="'left'" 
        [avatarConfig]="modelAvatar">
        <mc-markdown-card [content]="msg.content"></mc-markdown-card>
      </mc-bubble>
    }
  </ng-container>
</div>
<div class="chat-footer">
  <mc-input (submit)="onSubmit($event)"></mc-input>
</div>

7. Theme Setup

import { bootstrapApplication } from '@angular/platform-browser';
import { ThemeServiceInit, infinityTheme, galaxyTheme } from 'devui-theme';

ThemeServiceInit(
  {
    'galaxy-theme': galaxyTheme,
    'infinity-theme': infinityTheme,
  },
  'infinity-theme'
);

bootstrapApplication(AppComponent, appConfig);

API Reference

All component API documentation is available in the references/components/ directory, organized by component name:

  • Each component has two files:
    • api.md - API documentation (props, events, slots, types)
    • demo.md - Demo examples and usage patterns

To use API reference:

  1. Identify the component you need help with
  2. Load the corresponding API file: references/components/<componentName>/api.md
  3. Load the demo file for examples: references/components/<componentName>/demo.md
  4. Follow the examples and adapt to your use case

Automatic Documentation Updates

This skill includes an automatic documentation update mechanism to keep component documentation synchronized with the latest MateChat Angular release.

Best Practices

  1. Use standalone components: Angular 17+ standalone components are recommended
  2. Import modules properly: Import only the modules you need from @matechat/ng
  3. Handle events properly: Use proper event handlers for component interactions
  4. Customize themes: Use devui-theme for theme customization
  5. Use TypeScript: Leverage TypeScript for better type safety
  6. Follow Angular style guide: Follow Angular official style guide
  7. When designing components for use, it is necessary to read the corresponding component API documentation from references/components/<componentName>/api.md

Component Selection Guide

For building a chat interface:

  • Start with Layout for overall structure
  • Use Header for navigation
  • Use Bubble for messages
  • Use Input for user input
  • Use List for conversation history

For file handling:

  • Use Attachment for file upload

For rich content:

  • Use MarkdownCard for rendering Markdown content
  • Use Mention for @mentions in input

For quick actions:

  • Use Prompt for quick prompt suggestions
  • Use Toolbar for action buttons

Resources

Keywords

MateChat, matechat-ng, MateChat Angular, Angular, AI chat, chat UI, Agent UI, conversation UI, bubble, input, prompt, layout, attachment, markdown card, mention, toolbar, conversation components, chat interface, bubble, input box, prompt, layout, attachment, Markdown card