@matechat/ng 20.1.0-alpha.1 → 20.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,16 +25,16 @@
|
|
|
25
25
|
如果你还没有新建项目，可以使用 Angular CLI 首先初始化一个`angular`项目：
|
|
26
26
|
|
|
27
27
|
```bash
|
|
28
|
-
|
|
28
|
+
npm install -g @angular/cli@latest
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
ng new matechat-demo
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
npm i @matechat/ng
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
### 2. 引入
|
|
36
36
|
|
|
37
|
-
在`app.
|
|
37
|
+
在`app.ts`文件中引入模块
|
|
38
38
|
|
|
39
39
|
```ts
|
|
40
40
|
import { Component } from "@angular/core";
|
|
@@ -53,7 +53,7 @@ export class AppComponent {}
|
|
|
53
53
|
|
|
54
54
|
### 3. 使用
|
|
55
55
|
|
|
56
|
-
在`app.
|
|
56
|
+
在`app.html`文件中使用 MateChat 组件，如：
|
|
57
57
|
|
|
58
58
|
```html
|
|
59
59
|
<mc-bubble [content]="'Hello, MateChat'" [avatarConfig]="{ name: 'matechat' }"></mc-bubble>
|
|
@@ -62,27 +62,24 @@ export class AppComponent {}
|
|
|
62
62
|
以下为一个简单的对话界面搭建示例：
|
|
63
63
|
|
|
64
64
|
```html
|
|
65
|
-
<
|
|
66
|
-
<div class="chat-
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<mc-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
</ng-container>
|
|
77
|
-
</div>
|
|
78
|
-
<div class="chat-footer">
|
|
79
|
-
<mc-input (submit)="onSubmit($event)"></mc-input>
|
|
80
|
-
</div>
|
|
65
|
+
<div class="chat-container">
|
|
66
|
+
<div class="chat-list">
|
|
67
|
+
<ng-container *ngFor="let msg of messages">
|
|
68
|
+
@if (msg.from === 'user') {
|
|
69
|
+
<mc-bubble class="user-bubble" [align]="'right'" [content]="msg.content"></mc-bubble>
|
|
70
|
+
} @else if (msg.from === 'model') {
|
|
71
|
+
<mc-bubble class="model-bubble" [align]="'left'">
|
|
72
|
+
<mc-markdown-card [content]="msg.content" [enableMermaid]="true"></mc-markdown-card>
|
|
73
|
+
</mc-bubble>
|
|
74
|
+
}
|
|
75
|
+
</ng-container>
|
|
81
76
|
</div>
|
|
82
|
-
|
|
77
|
+
<div class="chat-footer">
|
|
78
|
+
<mc-input (submit)="onSubmit($event)"></mc-input>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
83
81
|
```
|
|
84
82
|
|
|
85
|
-
|
|
86
83
|
```ts
|
|
87
84
|
import { Component } from '@angular/core';
|
|
88
85
|
import { CommonModule } from '@angular/common';
|
|
@@ -136,6 +133,7 @@ export class App {
|
|
|
136
133
|
margin-top: 8px;
|
|
137
134
|
}
|
|
138
135
|
```
|
|
136
|
+
|
|
139
137
|
### 4. 主题化
|
|
140
138
|
|
|
141
139
|
在`main.ts`中初始化主题
|
|
@@ -150,6 +148,7 @@ import { ThemeServiceInit, infinityTheme } from "devui-theme";
|
|
|
150
148
|
ThemeServiceInit({ infinityTheme }, "infinityTheme");
|
|
151
149
|
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
|
|
152
150
|
```
|
|
151
|
+
|
|
153
152
|
## 🧩 对接模型服务
|
|
154
153
|
|
|
155
154
|
在搭建完成页面后，可以开始对接模型服务，如 `盘古大模型`、`ChatGPT` 等优秀大模型，在注册并生成对应模型的调用API_Key后，可以参考如下方法进行调用：
|
|
@@ -157,7 +156,7 @@ bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err))
|
|
|
157
156
|
1. 通过 npm 安装 openai:
|
|
158
157
|
|
|
159
158
|
```bash
|
|
160
|
-
|
|
159
|
+
npm install openai
|
|
161
160
|
```
|
|
162
161
|
|
|
163
162
|
2. 使用OpenAI初始化并调用模型接口，如下为一段代码示例：
|