前端智能化场景解决方案UI库matechat，如何在项目中使用matechat

MateChat / Angular

前端智能化场景解决方案UI库，轻松构建你的AI应用。已服务于华为内部多个应用智能化改造，并助力CodeArts、InsCode AI IDE等智能化助手搭建。

特性

• 面向智能化场景组件库
• 开箱即用
• 多场景匹配
• 多主题适配

快速集成：

1. 引入

在app.ts文件中引入模块

import{Component,signal}from'@angular/core';import{RouterOutlet}from'@angular/router';import{CommonModule}from"@angular/common";import{BubbleModule}from"@matechat/ng";@Component({selector:'app-root',standalone:true,imports:[RouterOutlet,CommonModule,BubbleModule],templateUrl:'./app.html',styleUrl:'./app.css'})exportclassApp{protectedreadonly title=signal('matechat-demo');}

2. 使用

在app.html文件中使用 MateChat 组件，如：

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

3. 以下为一个简单的对话界面搭建示例：

在app.html使用如下代码：

<divclass="mc-layout"><divclass="chat-container"><divclass="chat-header":title="'MateChat'"><img src="https://matechat.gitcode.com/logo.svg"/><span>MateChat</span></div>@if(newPage){<divclass="welcom-page"><divclass="content-wrapper"><divclass="mc-introduction"><divclass="mc-introduction-logo-container"><img src="https://matechat.gitcode.com/logo2x.svg"alt="MateChat"/><divclass="mc-introduction-title">MateChat</div></div><divclass="mc-introduction-description"><div>MateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。</div><div>作为AI模型，MateChat 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 MateChat 做的更好。</div></div></div><divclass="guess-question"><divclass="guess-title"><div>猜你想问</div></div><divclass="guess-content"><ng-container*ngFor="let item of questionList"><span(click)="onSubmit(item)">{{item}}</span></ng-container></div></div></div></div>}@else{<divclass="chat-list"><ng-container*ngFor="let msg of messages">@if(msg.from==='user'){<mc-bubbleclass="user-bubble"[align]="'right'"[content]="msg.content"[avatarConfig]="avatarConfig"></mc-bubble>}@elseif(msg.from==='model'){<mc-bubbleclass="model-bubble"[align]="'left'"[loading]="msg.loading"[avatarConfig]="modelAvatar"><mc-markdown-card[theme]="theme"[content]="msg.content"[enableMermaid]="true"></mc-markdown-card></mc-bubble>}</ng-container></div>}<divclass="chat-footer"><mc-input(submit)="onSubmit($event)"></mc-input><divclass="statement-box"><span>内容由AI生成，无法确保准确性和完整性，仅供参考</span></div></div></div></div>

在app.ts中使用如下代码：

import{Component,signal}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.html',styleUrl:'./app.css',})exportclassApp{protectedreadonly title=signal('matechat-demo');inputValue='';messages:any=[];newPage=true;questionList=['帮我写一篇文章','你可以帮我做些什么？','帮我写一个快速排序','使用 js 格式化时间',];avatarConfig={imgSrc:'https://matechat.gitcode.com/png/demo/userAvatar.svg',};modelAvatar={imgSrc:'https://matechat.gitcode.com/logo.svg',};onSubmit=(evt:any)=>{this.newPage=false;this.inputValue='';// 用户发送消息this.messages.push({from:'user',content:evt,});setTimeout(()=>{// 模型返回消息this.messages.push({from:'model',content:evt,});},200);};}

在将模板应用中的app.css修改成app.less，使用如下代码：

::ng-deep body{margin:0;color:var(--devui-text,#252b3a);}.mc-layout{height:100vh;width:100%;padding:12px;box-sizing:border-box;background:linear-gradient(to bottom,#d0c9ff0%,#e6d6f08%,#f1dbea12%,#c8dcfb40%,#abc6f660%,#87aefe90%);}::ng-deep body[ui-theme='galaxy-theme'].mc-layout{background:var(--devui-global-bg,#f6f6f8);.chat-container{background:transparent;border:none;}}.chat-container{display:flex;flex-direction:column;box-sizing:border-box;gap:8px;}.welcom-page{display:flex;flex-direction:column;flex:1;max-width:1200px;margin:0auto;overflow:auto;width:100%;max-width:1200px;padding:012px;box-sizing:border-box;gap:24px;}.guess-title{display:flex;justify-content:space-between;align-items:center;color:var(--devui-text,#252b3a);margin-bottom:16px;}.guess-content{display:flex;align-items:center;flex-wrap:wrap;gap:12px;}.mc-introduction-logo-container{display:flex;align-items:center;gap:8px;}.mc-introduction-description{text-align:center;font-size:14px;color:var(--devui-text,#252b3a);}.mc-introduction-title{font-weight:700;font-size:32px;letter-spacing:1px;color:var(--devui-text,#252b3a);}.guess-question{width:100%;margin-top:24px;padding:24px;border-radius:24px;box-sizing:border-box;background-color:var(--devui-base-bg,#ffffff);}.guess-question-title{font-size:24px;font-weight:700;color:var(--devui-text,#252b3a);margin-bottom:16px;}.guess-question span{font-size:var(--devui-font-size,12px);color:var(--devui-aide-text,#71757f);padding:10px16px;border-radius:var(--devui-border-radius-full,100px);background-color:var(--devui-dividing-line,#f2f2f3);cursor:pointer;}.content-wrapper{margin:auto0;}.chat-container{width:100%;height:100%;padding:12px;border-radius:20px;margin:0auto;border:1px solid #e5e5e5;background:linear-gradient(180deg,#fffffff2,#f8fafff299%);}.chat-header{display:flex;align-items:center;gap:4px;margin-bottom:8px;img{width:32px;height:32px;}span{font-size:20px;color:var(--devui-text,#252b3a);}}.mc-introduction{display:flex;flex-direction:column;align-items:center;gap:12px;}.chat-list{flex:1;width:100%;max-width:1200px;margin:0auto12px;overflow:auto;.user-bubble,.model-bubble{display:block;margin-top:8px;}}.chat-footer{width:100%;max-width:1200px;margin:0auto;padding:012px12px;box-sizing:border-box;}.statement-box{font-size:12px;margin-top:8px;color:var(--devui-aide-text,#71757f);text-align:center;}

以下是配置 Angular CLI 使用 Less 的方法：

Angular CLI 默认使用 CSS 作为样式表预处理器，但可以通过以下步骤配置为使用 Less：

安装 Less 和 Less Loader：

npm install less less-loader--save-dev

修改 angular.json 配置文件，在 projects -> your-project-name -> architect -> build -> options 中添加或修改样式配置：

{"projects":{"your-project":{"architect":{"build":{"options":{"styles":["src/styles.less"],"stylePreprocessorOptions":{"includePaths":["src/styles"]}}}}}}}

将组件中的 .css 文件重命名为 .less，并在组件装饰器中更新样式 URLs：

@Component({styleUrls:['./app.component.less']})

重启开发服务器以使配置生效：

ng serve

注意事项：

• 确保所有组件的样式文件扩展名从 .css 改为 .less
• 如果已有全局样式文件，也需将其扩展名改为 .less
• 当使用第三方库时，确保其样式文件也支持 Less 预处理
• 版本兼容性很重要，建议使用与 Angular CLI 兼容的 Less 和 less-loader 版本

Application bundle generation failed.[1.522seconds]-2025-12-11T05:46:09.453Z ✘[ERROR]TS2339:Property'theme'does not exist on type'App'.[plugin angular-compiler]src/app/app.html:42:37:42│...<mc-markdown-card[theme]="theme"[content]="msg.content"[en...╵~~~~~Error occursinthe templateofcomponent App.src/app/app.ts:8:15:8│ templateUrl:'./app.html',╵~~~~~~~~~~~~✘[ERROR]Could not resolve"src/styles.less"angular:styles/global:styles:1:8:1│ @import'src/styles.less';╵~~~~~~~~~~~~~~~~~

主题化

在main.ts中初始化主题，更多用法可参考 devui-theme

import{bootstrapApplication}from'@angular/platform-browser';import{appConfig}from'./app/app.config';import{App}from'./app/app';import{ThemeServiceInit,infinityTheme,galaxyTheme}from'devui-theme';ThemeServiceInit({'galaxy-theme':galaxyTheme,// 暗黑主题'infinity-theme':infinityTheme,},'infinity-theme');bootstrapApplication(App,appConfig).catch((err)=>console.error(err));

MateChat是一个基于Angular的前端智能化UI组件库，专为AI应用场景设计。它提供开箱即用的组件（如对话气泡、输入框等），支持多主题适配，已成功应用于华为内部多个智能化项目。通过简单的模块引入和组件调用，开发者可快速构建AI对话界面。示例代码展示了如何实现包含欢迎页、消息列表和输入区的完整聊天界面，支持用户与AI模型的交互。该库显著降低了AI应用的前端开发门槛。

MateChat：https://gitcode.com/DevCloudFE/MateChat
MateChat官网：https://matechat.gitcode.com
DevUI官网：https://devui.design/home