@matechat/ng 17.2.0-alpha.2 → 17.2.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 +254 -31
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -61,25 +61,68 @@ export class AppComponent {}
|
|
|
61
61
|
|
|
62
62
|
以下为一个简单的对话界面搭建示例：
|
|
63
63
|
|
|
64
|
+
在app.html使用如下代码：
|
|
65
|
+
|
|
64
66
|
```html
|
|
65
|
-
<div class="
|
|
66
|
-
<div class="chat-
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
67
|
+
<div class="mc-layout">
|
|
68
|
+
<div class="chat-container">
|
|
69
|
+
<div class="chat-header" :title="'MateChat'" :logoImg="'https://matechat.gitcode.com/logo.svg'">
|
|
70
|
+
<img src="https://matechat.gitcode.com/logo.svg" />
|
|
71
|
+
<span>MateChat</span>
|
|
72
|
+
</div>
|
|
73
|
+
@if (newPage) {
|
|
74
|
+
<div class="welcom-page">
|
|
75
|
+
<div class="content-wrapper">
|
|
76
|
+
<div class="mc-introduction">
|
|
77
|
+
<div class="mc-introduction-logo-container">
|
|
78
|
+
<img src="https://matechat.gitcode.com/logo2x.svg" alt="MateChat" />
|
|
79
|
+
<div class="mc-introduction-title">MateChat</div>
|
|
80
|
+
</div>
|
|
81
|
+
<!--v-if-->
|
|
82
|
+
<div class="mc-introduction-description">
|
|
83
|
+
<div>MateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。</div>
|
|
84
|
+
<div>
|
|
85
|
+
作为AI模型，MateChat 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 MateChat
|
|
86
|
+
做的更好。
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="guess-question">
|
|
91
|
+
<div class="guess-title">
|
|
92
|
+
<div>猜你想问</div>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="guess-content">
|
|
95
|
+
<ng-container *ngFor="let item of questionList">
|
|
96
|
+
<span (click)="onSubmit(item)">{{ item }}</span>
|
|
97
|
+
</ng-container>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
} @else {
|
|
103
|
+
<div class="chat-list">
|
|
104
|
+
<ng-container *ngFor="let msg of messages">
|
|
105
|
+
@if (msg.from === 'user') {
|
|
106
|
+
<mc-bubble class="user-bubble" [align]="'right'" [content]="msg.content" [avatarConfig]="avatarConfig"></mc-bubble>
|
|
107
|
+
} @else if (msg.from === 'model') {
|
|
108
|
+
<mc-bubble class="model-bubble" [align]="'left'" [loading]="msg.loading" [avatarConfig]="modelAvatar">
|
|
109
|
+
<mc-markdown-card [theme]="theme" [content]="msg.content" [enableMermaid]="true"></mc-markdown-card>
|
|
110
|
+
</mc-bubble>
|
|
111
|
+
}
|
|
112
|
+
</ng-container>
|
|
113
|
+
</div>
|
|
114
|
+
}
|
|
115
|
+
<div class="chat-footer">
|
|
116
|
+
<mc-input (submit)="onSubmit($event)"> </mc-input>
|
|
117
|
+
<div class="statement-box">
|
|
118
|
+
<span>内容由AI生成，无法确保准确性和完整性，仅供参考</span>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
79
121
|
</div>
|
|
80
122
|
</div>
|
|
81
123
|
```
|
|
82
124
|
|
|
125
|
+
在app.ts中使用如下代码：
|
|
83
126
|
|
|
84
127
|
```ts
|
|
85
128
|
import { Component } from '@angular/core';
|
|
@@ -89,13 +132,27 @@ import { BubbleModule, InputModule, MarkdownCardModule } from '@matechat/ng';
|
|
|
89
132
|
selector: 'app-root',
|
|
90
133
|
imports: [CommonModule, BubbleModule, InputModule, MarkdownCardModule],
|
|
91
134
|
templateUrl: './app.html',
|
|
92
|
-
styleUrl: './app.
|
|
135
|
+
styleUrl: './app.scss',
|
|
93
136
|
})
|
|
94
137
|
export class App {
|
|
95
138
|
inputValue = '';
|
|
96
139
|
messages: any = [];
|
|
140
|
+
newPage = true;
|
|
141
|
+
questionList = [
|
|
142
|
+
'帮我写一篇文章',
|
|
143
|
+
'你可以帮我做些什么？',
|
|
144
|
+
'帮我写一个快速排序',
|
|
145
|
+
'使用 js 格式化时间',
|
|
146
|
+
];
|
|
147
|
+
avatarConfig = {
|
|
148
|
+
imgSrc: 'https://matechat.gitcode.com/png/demo/userAvatar.svg',
|
|
149
|
+
};
|
|
150
|
+
modelAvatar = {
|
|
151
|
+
imgSrc: 'https://matechat.gitcode.com/logo.svg',
|
|
152
|
+
};
|
|
97
153
|
|
|
98
154
|
onSubmit = (evt: any) => {
|
|
155
|
+
this.newPage = false;
|
|
99
156
|
this.inputValue = '';
|
|
100
157
|
// 用户发送消息
|
|
101
158
|
this.messages.push({
|
|
@@ -111,42 +168,208 @@ export class App {
|
|
|
111
168
|
}, 200);
|
|
112
169
|
};
|
|
113
170
|
}
|
|
114
|
-
|
|
115
171
|
```
|
|
116
172
|
|
|
173
|
+
在将模板应用中的app.css修改成`app.scss`，使用如下代码：
|
|
174
|
+
|
|
175
|
+
|
|
117
176
|
```scss
|
|
177
|
+
::ng-deep body {
|
|
178
|
+
margin: 0;
|
|
179
|
+
color: var(--devui-text, #252b3a);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.mc-layout {
|
|
183
|
+
height: 100vh;
|
|
184
|
+
width: 100%;
|
|
185
|
+
padding: 12px;
|
|
186
|
+
box-sizing: border-box;
|
|
187
|
+
background: linear-gradient(
|
|
188
|
+
to bottom,
|
|
189
|
+
#d0c9ff 0%,
|
|
190
|
+
#e6d6f0 8%,
|
|
191
|
+
#f1dbea 12%,
|
|
192
|
+
#c8dcfb 40%,
|
|
193
|
+
#abc6f6 60%,
|
|
194
|
+
#87aefe 90%
|
|
195
|
+
);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
::ng-deep body[ui-theme='galaxy-theme'] .mc-layout {
|
|
199
|
+
background: var(--devui-global-bg, #f6f6f8);
|
|
200
|
+
|
|
201
|
+
.chat-container {
|
|
202
|
+
background: transparent;
|
|
203
|
+
border: none;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
118
207
|
.chat-container {
|
|
208
|
+
display: flex;
|
|
209
|
+
flex-direction: column;
|
|
210
|
+
box-sizing: border-box;
|
|
211
|
+
gap: 8px;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.welcom-page {
|
|
215
|
+
display: flex;
|
|
216
|
+
flex-direction: column;
|
|
217
|
+
flex: 1;
|
|
119
218
|
max-width: 1200px;
|
|
219
|
+
margin: 0 auto;
|
|
220
|
+
overflow: auto;
|
|
120
221
|
width: 100%;
|
|
222
|
+
max-width: 1200px;
|
|
223
|
+
padding: 0 12px;
|
|
224
|
+
box-sizing: border-box;
|
|
225
|
+
gap: 24px;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.guess-title {
|
|
229
|
+
display: flex;
|
|
230
|
+
justify-content: space-between;
|
|
231
|
+
align-items: center;
|
|
232
|
+
color: var(--devui-text, #252b3a);
|
|
233
|
+
margin-bottom: 16px;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.guess-content {
|
|
237
|
+
display: flex;
|
|
238
|
+
align-items: center;
|
|
239
|
+
flex-wrap: wrap;
|
|
240
|
+
gap: 12px;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.mc-introduction-logo-container {
|
|
244
|
+
display: flex;
|
|
245
|
+
align-items: center;
|
|
246
|
+
gap: 8px;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.mc-introduction-description {
|
|
250
|
+
text-align: center;
|
|
251
|
+
font-size: 14px;
|
|
252
|
+
color: var(--devui-text, #252b3a);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.mc-introduction-title {
|
|
256
|
+
font-weight: 700;
|
|
257
|
+
font-size: 32px;
|
|
258
|
+
letter-spacing: 1px;
|
|
259
|
+
color: var(--devui-text, #252b3a);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.guess-question {
|
|
263
|
+
width: 100%;
|
|
264
|
+
margin-top: 24px;
|
|
265
|
+
padding: 24px;
|
|
266
|
+
border-radius: 24px;
|
|
267
|
+
box-sizing: border-box;
|
|
268
|
+
background-color: var(--devui-base-bg, #ffffff);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.guess-question-title {
|
|
272
|
+
font-size: 24px;
|
|
273
|
+
font-weight: 700;
|
|
274
|
+
color: var(--devui-text, #252b3a);
|
|
275
|
+
margin-bottom: 16px;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.guess-question span {
|
|
279
|
+
font-size: var(--devui-font-size, 12px);
|
|
280
|
+
color: var(--devui-aide-text, #71757f);
|
|
281
|
+
padding: 10px 16px;
|
|
282
|
+
border-radius: var(--devui-border-radius-full, 100px);
|
|
283
|
+
background-color: var(--devui-dividing-line, #f2f2f3);
|
|
284
|
+
cursor: pointer;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.content-wrapper {
|
|
288
|
+
margin: auto 0;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.chat-container {
|
|
292
|
+
width: 100%;
|
|
293
|
+
height: 100%;
|
|
121
294
|
padding: 12px;
|
|
122
|
-
border-radius:
|
|
295
|
+
border-radius: 20px;
|
|
123
296
|
margin: 0 auto;
|
|
124
297
|
border: 1px solid #e5e5e5;
|
|
298
|
+
background: linear-gradient(180deg, #fffffff2, #f8fafff2 99%);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.chat-header {
|
|
302
|
+
display: flex;
|
|
303
|
+
align-items: center;
|
|
304
|
+
gap: 4px;
|
|
305
|
+
margin-bottom: 8px;
|
|
306
|
+
|
|
307
|
+
img {
|
|
308
|
+
width: 32px;
|
|
309
|
+
height: 32px;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
span {
|
|
313
|
+
font-size: 20px;
|
|
314
|
+
color: var(--devui-text, #252b3a);
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.mc-introduction {
|
|
319
|
+
display: flex;
|
|
320
|
+
flex-direction: column;
|
|
321
|
+
align-items: center;
|
|
322
|
+
gap: 12px;
|
|
125
323
|
}
|
|
324
|
+
|
|
126
325
|
.chat-list {
|
|
127
|
-
|
|
128
|
-
|
|
326
|
+
flex: 1;
|
|
327
|
+
width: 100%;
|
|
328
|
+
max-width: 1200px;
|
|
329
|
+
margin: 0 auto 12px;
|
|
129
330
|
overflow: auto;
|
|
331
|
+
|
|
332
|
+
.user-bubble,
|
|
333
|
+
.model-bubble {
|
|
334
|
+
display: block;
|
|
335
|
+
margin-top: 8px;
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.chat-footer {
|
|
340
|
+
width: 100%;
|
|
341
|
+
max-width: 1200px;
|
|
342
|
+
margin: 0 auto;
|
|
343
|
+
padding: 0 12px 12px;
|
|
344
|
+
box-sizing: border-box;
|
|
130
345
|
}
|
|
131
|
-
|
|
132
|
-
.
|
|
133
|
-
|
|
346
|
+
|
|
347
|
+
.statement-box {
|
|
348
|
+
font-size: 12px;
|
|
134
349
|
margin-top: 8px;
|
|
350
|
+
color: var(--devui-aide-text, #71757f);
|
|
351
|
+
text-align: center;
|
|
135
352
|
}
|
|
136
353
|
```
|
|
137
354
|
### 4. 主题化
|
|
138
355
|
|
|
139
|
-
在`main.ts
|
|
356
|
+
在`main.ts`中初始化主题，更多用法可参考 [devui-theme](https://matechat.gitcode.com/use-guide/theme.html)
|
|
140
357
|
|
|
141
358
|
```ts
|
|
142
|
-
import { bootstrapApplication } from
|
|
143
|
-
import { appConfig } from
|
|
144
|
-
import {
|
|
145
|
-
import { ThemeServiceInit, infinityTheme } from
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
359
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
360
|
+
import { appConfig } from './app/app.config';
|
|
361
|
+
import { App } from './app/app';
|
|
362
|
+
import { ThemeServiceInit, infinityTheme, galaxyTheme } from 'devui-theme';
|
|
363
|
+
|
|
364
|
+
ThemeServiceInit(
|
|
365
|
+
{
|
|
366
|
+
'galaxy-theme': galaxyTheme, // 暗黑主题
|
|
367
|
+
'infinity-theme': infinityTheme,
|
|
368
|
+
},
|
|
369
|
+
'infinity-theme'
|
|
370
|
+
);
|
|
371
|
+
bootstrapApplication(App, appConfig).catch((err) => console.error(err));
|
|
372
|
+
|
|
150
373
|
```
|
|
151
374
|
## 🧩 对接模型服务
|
|
152
375
|
|