bhd-components 0.11.13 → 0.11.14

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.
@@ -28,7 +28,7 @@ const defaultFileUploadProps = {
28
28
  };
29
29
  const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
30
30
  let { footerConfig, prefix, errorCallback, apiRef } = props;
31
- let { placeholder = defaultProps.placeholder, className = defaultProps.className, maxLength = defaultProps.maxLength, renderAction, fileUpload, sendMsgAjaxParams, onClickStop = ()=>{}, conversionContent = (str)=>str, renderTopContent, inputingText = "正在输入...", canStopMessage = true, speed = 0 } = footerConfig;
31
+ let { placeholder = defaultProps.placeholder, className = defaultProps.className, maxLength = defaultProps.maxLength, renderAction, fileUpload, sendMsgAjaxParams, onClickStop = ()=>{}, conversionContent = (str)=>str, renderTopContent, inputingText = "正在输入...", canStopMessage = true, speed = 0, textAreaProps = {} } = footerConfig;
32
32
  if (speed < 0) {
33
33
  speed = 0;
34
34
  }
@@ -487,7 +487,7 @@ const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
487
487
  /*#__PURE__*/ _jsxs("div", {
488
488
  className: getCls("footerInput"),
489
489
  children: [
490
- /*#__PURE__*/ _jsx(TextArea, {
490
+ /*#__PURE__*/ _jsx(TextArea, _object_spread({
491
491
  value: textValue,
492
492
  onChange: (e)=>{
493
493
  setTextValue(e.target.value);
@@ -498,7 +498,7 @@ const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
498
498
  maxRows: 6
499
499
  },
500
500
  onPressEnter: onPressEnter
501
- }),
501
+ }, textAreaProps)),
502
502
  /*#__PURE__*/ _jsx(References, {
503
503
  prefix: prefix,
504
504
  referencesSource: referencesSource,
@@ -91,7 +91,8 @@ const remarkable = new Remarkable({
91
91
  return hljs.highlightAuto(str).value;
92
92
  } catch (err) {}
93
93
  return ""; // use external default escaping
94
- }
94
+ },
95
+ breaks: true
95
96
  });
96
97
  const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
97
98
  const { prefix, contentConfig, apiRef } = props;
@@ -99,7 +100,7 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
99
100
  "copy",
100
101
  "reference"
101
102
  ], coverRenderReferences, onRecordMessage = ()=>{}, onVoteChange = ()=>{}, onRefresh = ()=>{}, helloMsg, showTime = true, fileCustomRender = {}, // onSendedHelloMsg = () => {},
102
- onInit = ()=>{}, renderLoading } = contentConfig;
103
+ onInit = ()=>{}, renderLoading, renderItemBottom, renderItemTop, htmlStyle = "richText" } = contentConfig;
103
104
  const loadMoreProps = contentConfig.loadMore || true;
104
105
  const virtuosoRef = useRef(null);
105
106
  const [loading, setLoading] = useState(false); // 是否加载中
@@ -376,19 +377,21 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
376
377
  onMouseEnter: ()=>onMouseEnter(item),
377
378
  onMouseLeave: ()=>onMouseLeave(item),
378
379
  children: [
380
+ renderItemTop && renderItemTop(item),
379
381
  renderAction("floatTop", item),
380
382
  /*#__PURE__*/ _jsxs("div", {
381
383
  className: `${getCls("msgItem-content")}`,
382
384
  children: [
383
385
  /*#__PURE__*/ _jsx("div", {
384
- className: `${getCls("msgItem-text")}`,
386
+ className: `${htmlStyle === "richText" ? getCls("msgItem-text") : getCls("msgItem-text-aibody")}`,
385
387
  children: contentNode
386
388
  }),
387
389
  renderAction("bottom", item)
388
390
  ]
389
391
  }),
390
392
  item.location === "left" && renderAction("floatBottom", item),
391
- renderReference(item)
393
+ renderReference(item),
394
+ renderItemBottom && renderItemBottom(item)
392
395
  ]
393
396
  })
394
397
  });
@@ -625,6 +628,9 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
625
628
  };
626
629
  const markToHtml = (markStr, id)=>{
627
630
  let html = remarkable.render(markStr);
631
+ if (htmlStyle === "ai_body") {
632
+ html = html.replace(/<table/g, '<div class="ai-table-wrap"><table').replace(/<\/table>/g, '</table></div>');
633
+ }
628
634
  let position = 0;
629
635
  html = html.replace(new RegExp(`<pre`, "ig"), ()=>{
630
636
  position++;
@@ -109,8 +109,6 @@
109
109
  position: relative;
110
110
  width: fit-content;
111
111
  max-width: 100%;
112
- .msgItem-text {
113
- padding: 12px 16px;
114
112
  .copyCode {
115
113
  display: flex;
116
114
  justify-content: flex-end;
@@ -159,169 +157,6 @@
159
157
  }
160
158
  }
161
159
  }
162
- :global {
163
- h1,
164
- h2,
165
- h3,
166
- h4,
167
- h5,
168
- h6,
169
- strong {
170
- color: rgba(0, 0, 0, 0.85);
171
- font-weight: 600;
172
- }
173
- pre::-webkit-scrollbar {
174
- background-color: #eaedf1;
175
- background-color: transparent;
176
- width: 4px;
177
- height: 4px;
178
- }
179
- pre::-webkit-scrollbar-thumb {
180
- border-radius: 4px;
181
- background-color: rgba(0, 0, 0, 0.25);
182
- }
183
- p {
184
- word-break: break-all;
185
- white-space: break-spaces;
186
- }
187
- blockquote {
188
- background: transparent;
189
- border: 0;
190
- font-size: 100%;
191
- margin: 0;
192
- outline: 0;
193
- padding: 0;
194
- vertical-align: baseline;
195
- }
196
- p,
197
- li {
198
- line-height: 1.5;
199
- color: rgba(0, 0, 0, 0.85);
200
- }
201
-
202
- li {
203
- margin-top: 8px;
204
- &:first-child {
205
- margin-top: 0;
206
- }
207
- }
208
- ol {
209
- list-style: decimal;
210
- padding-inline-start: 20px;
211
-
212
- li {
213
- list-style-type: auto;
214
- }
215
-
216
- li p {
217
- // padding: 4px 0;
218
- font-size: 14px;
219
- font-weight: 600;
220
- }
221
- li > ul li {
222
- // padding-bottom: 8px;
223
- list-style: inside;
224
- color: rgba(0, 0, 0, 0.85);
225
- &::marker {
226
- color: #d9d9d9;
227
- }
228
- &:first-child {
229
- padding-top: 8px;
230
- }
231
- }
232
- li > ol li {
233
- // padding-bottom: 8px;
234
- &::marker {
235
- color: rgba(0, 0, 0, 0.45);
236
- }
237
-
238
- &:first-child {
239
- padding-top: 8px;
240
- }
241
- }
242
- > li:last-of-type {
243
- pre {
244
- margin-bottom: 0;
245
- }
246
- }
247
- }
248
-
249
- hr {
250
- height: 0;
251
- padding: 0;
252
- margin: 0;
253
- border: none;
254
- }
255
- table {
256
- width: 100%;
257
- padding: 0;
258
- margin: 8px 0;
259
- border-collapse: separate;
260
- border-top: 1px solid #dfe6ec;
261
- border-left: 1px solid #dfe6ec;
262
- thead tr th {
263
- background-color: #f8f8f9;
264
- padding: 8px;
265
- text-align: center;
266
- border-bottom: 1px solid #dfe6ec;
267
- border-right: 1px solid #dfe6ec;
268
- }
269
- tbody tr td {
270
- padding: 8px;
271
- line-height: 21px;
272
- height: 37px; //设置单元格最小高度
273
- border-bottom: 1px solid #dfe6ec;
274
- border-right: 1px solid #dfe6ec;
275
- }
276
- }
277
-
278
- pre {
279
- background: #fafafa;
280
- border: 1px solid rgba(0, 0, 0, 0.06);
281
- border-top: none;
282
-
283
- padding: 12px;
284
- line-height: 1.5;
285
- margin: 4px 0;
286
- margin-bottom: 8px;
287
- border-radius: 0 0 4px 4px;
288
- }
289
- }
290
-
291
- .msgItem-richText {
292
- & > h3 {
293
- font-size: 16px;
294
- font-weight: 600;
295
- padding: 10px 0;
296
- }
297
- > *:not(pre) {
298
- padding-top: 8px;
299
- padding-bottom: 8px;
300
- &:first-child {
301
- padding-top: 0;
302
- }
303
- &:last-child {
304
- padding-bottom: 0;
305
- }
306
- }
307
- > h3,
308
- > h4 {
309
- padding-top: 8px;
310
- padding-bottom: 4px;
311
- }
312
- > p + p {
313
- padding-top: 4px;
314
- padding-bottom: 4px;
315
- }
316
- > pre:last-of-type {
317
- margin-bottom: 0;
318
-
319
- & + * {
320
- margin-top: 8px;
321
- }
322
- }
323
- }
324
-
325
160
  .msgItem-file {
326
161
  display: flex;
327
162
  align-items: center;
@@ -360,6 +195,407 @@
360
195
  }
361
196
  }
362
197
  }
198
+ .msgItem-text {
199
+ padding: 12px 16px;
200
+ :global {
201
+ h1,
202
+ h2,
203
+ h3,
204
+ h4,
205
+ h5,
206
+ h6,
207
+ strong {
208
+ color: rgba(0, 0, 0, 0.85);
209
+ font-weight: 600;
210
+ }
211
+ pre::-webkit-scrollbar {
212
+ background-color: #eaedf1;
213
+ background-color: transparent;
214
+ width: 4px;
215
+ height: 4px;
216
+ }
217
+ pre::-webkit-scrollbar-thumb {
218
+ border-radius: 4px;
219
+ background-color: rgba(0, 0, 0, 0.25);
220
+ }
221
+ p {
222
+ word-break: break-all;
223
+ white-space: break-spaces;
224
+ }
225
+ blockquote {
226
+ background: transparent;
227
+ border: 0;
228
+ font-size: 100%;
229
+ margin: 0;
230
+ outline: 0;
231
+ padding: 0;
232
+ vertical-align: baseline;
233
+ }
234
+ p,
235
+ li {
236
+ line-height: 1.5;
237
+ color: rgba(0, 0, 0, 0.85);
238
+ }
239
+
240
+ li {
241
+ margin-top: 8px;
242
+ &:first-child {
243
+ margin-top: 0;
244
+ }
245
+ }
246
+ ol {
247
+ list-style: decimal;
248
+ padding-inline-start: 20px;
249
+
250
+ li {
251
+ list-style-type: auto;
252
+ }
253
+
254
+ li p {
255
+ // padding: 4px 0;
256
+ font-size: 14px;
257
+ font-weight: 600;
258
+ }
259
+ li > ul li {
260
+ // padding-bottom: 8px;
261
+ list-style: inside;
262
+ color: rgba(0, 0, 0, 0.85);
263
+ &::marker {
264
+ color: #d9d9d9;
265
+ }
266
+ &:first-child {
267
+ padding-top: 8px;
268
+ }
269
+ }
270
+ li > ol li {
271
+ // padding-bottom: 8px;
272
+ &::marker {
273
+ color: rgba(0, 0, 0, 0.45);
274
+ }
275
+
276
+ &:first-child {
277
+ padding-top: 8px;
278
+ }
279
+ }
280
+ > li:last-of-type {
281
+ pre {
282
+ margin-bottom: 0;
283
+ }
284
+ }
285
+ }
286
+
287
+ hr {
288
+ height: 0;
289
+ padding: 0;
290
+ margin: 0;
291
+ border: none;
292
+ }
293
+ table {
294
+ width: 100%;
295
+ padding: 0;
296
+ margin: 8px 0;
297
+ border-collapse: separate;
298
+ border-top: 1px solid #dfe6ec;
299
+ border-left: 1px solid #dfe6ec;
300
+ thead tr th {
301
+ background-color: #f8f8f9;
302
+ padding: 8px;
303
+ text-align: center;
304
+ border-bottom: 1px solid #dfe6ec;
305
+ border-right: 1px solid #dfe6ec;
306
+ }
307
+ tbody tr td {
308
+ padding: 8px;
309
+ line-height: 21px;
310
+ height: 37px; //设置单元格最小高度
311
+ border-bottom: 1px solid #dfe6ec;
312
+ border-right: 1px solid #dfe6ec;
313
+ }
314
+ }
315
+
316
+ pre {
317
+ background: #fafafa;
318
+ border: 1px solid rgba(0, 0, 0, 0.06);
319
+ border-top: none;
320
+
321
+ padding: 12px;
322
+ line-height: 1.5;
323
+ margin: 4px 0;
324
+ margin-bottom: 8px;
325
+ border-radius: 0 0 4px 4px;
326
+ }
327
+ }
328
+ .msgItem-richText {
329
+ & > h3 {
330
+ font-size: 16px;
331
+ font-weight: 600;
332
+ padding: 10px 0;
333
+ }
334
+ > *:not(pre) {
335
+ padding-top: 8px;
336
+ padding-bottom: 8px;
337
+ &:first-child {
338
+ padding-top: 0;
339
+ }
340
+ &:last-child {
341
+ padding-bottom: 0;
342
+ }
343
+ }
344
+ > h3,
345
+ > h4 {
346
+ padding-top: 8px;
347
+ padding-bottom: 4px;
348
+ }
349
+ > p + p {
350
+ padding-top: 4px;
351
+ padding-bottom: 4px;
352
+ }
353
+ > pre:last-of-type {
354
+ margin-bottom: 0;
355
+
356
+ & + * {
357
+ margin-top: 8px;
358
+ }
359
+ }
360
+ }
361
+ }
362
+ .msgItem-text-aibody{
363
+ color: #1f2a28;
364
+ .msgItem-richText{
365
+ font-size: 13.5px;
366
+ line-height: 1.88;
367
+ color: #1f2a28;
368
+ white-space: normal;
369
+ word-break: break-all;
370
+
371
+ /*
372
+ * AI 内容排版系统
373
+ * 规则:所有间距只用 margin-top,margin-bottom 统一为 0
374
+ * 层级:H2(22px) > H3(16px) > 段落/列表(10px) > 紧跟标签后内容(5px)
375
+ */
376
+ /* 统一重置:所有直接子元素默认上间距 10px,无下间距 */
377
+ & > * {
378
+ margin-top: 10px;
379
+ margin-bottom: 0;
380
+ }
381
+ & > *:first-child {
382
+ margin-top: 0;
383
+ }
384
+ :global {
385
+ --primary: #69c89e;
386
+ --primary-light: #eef8f3;
387
+ --primary-deep: #48b385;
388
+ --primary-soft: #f4fbf7;
389
+ --bg: linear-gradient(180deg, #f7faf7 0%, #eff7f2 100%);
390
+ --card: rgba(255, 255, 255, 0.92);
391
+ --text: #1f2a28;
392
+ --text-light: #7f9089;
393
+ --border: rgba(124, 177, 151, 0.14);
394
+ --shadow: 0 18px 40px rgba(115, 150, 127, 0.08);
395
+ --sidebar-w: 74px;
396
+ --chat-w: 430px;
397
+ --chat-collapsed-w: 64px;
398
+ *{
399
+ margin: 0;
400
+ padding: 0;
401
+ }
402
+ /* H2:大段落标题,上方留足够空间表示新章节 */
403
+ h2 {
404
+ font-size: 15.5px;
405
+ font-weight: 800;
406
+ line-height: 1.35;
407
+ letter-spacing: -0.02em;
408
+ color: var(--text);
409
+ margin-top: 24px;
410
+ padding-top: 16px;
411
+ border-top: 1px solid rgba(120, 161, 138, 0.08);
412
+ }
413
+ h2:first-child {
414
+ margin-top: 0;
415
+ padding-top: 0;
416
+ border-top: none;
417
+ }
418
+ /* H3:分类标签,带左侧标记条 */
419
+ h3 {
420
+ font-size: 13px;
421
+ font-weight: 700;
422
+ letter-spacing: 0.01em;
423
+ color: var(--primary-deep);
424
+ margin-top: 18px;
425
+ padding-left: 10px;
426
+ border-left: 3px solid var(--primary);
427
+ }
428
+ h3:first-child {
429
+ margin-top: 0;
430
+ }
431
+
432
+ /* H4:段内小标题,加粗正文 */
433
+ h4 {
434
+ font-size: 13.5px;
435
+ font-weight: 700;
436
+ color: var(--text);
437
+ margin-top: 14px;
438
+ }
439
+ h4:first-child {
440
+ margin-top: 0;
441
+ }
442
+ /* H2 紧跟 H3:副标题关系 */
443
+ h2 + h3 {
444
+ margin-top: 8px;
445
+ }
446
+ h3 + h4 {
447
+ margin-top: 6px;
448
+ }
449
+ /* H3/H2 之后的内容:紧贴标签,5px 即可 */
450
+ h3 + p,
451
+ h3 + ul,
452
+ h3 + ol {
453
+ margin-top: 5px;
454
+ }
455
+ h2 + p,
456
+ h2 + ul,
457
+ h2 + ol {
458
+ margin-top: 7px;
459
+ }
460
+ h4 + p,
461
+ h4 + ul,
462
+ h4 + ol {
463
+ margin-top: 4px;
464
+ }
465
+ /* 段落 */
466
+ p {
467
+ line-height: 1.88;
468
+ }
469
+ /* 列表 */
470
+ ul {
471
+ padding-left: 20px;
472
+ list-style: disc;
473
+ }
474
+ ol {
475
+ padding-left: 24px;
476
+ list-style: decimal;
477
+ counter-reset: none;
478
+ }
479
+ li {
480
+ margin-top: 6px;
481
+ line-height: 1.82;
482
+ }
483
+ li:first-child {
484
+ margin-top: 0;
485
+ }
486
+ li::marker {
487
+ color: var(--primary-deep);
488
+ font-weight: 600;
489
+ }
490
+ /* 嵌套列表 */
491
+ li > ul,
492
+ li > ol {
493
+ margin-top: 4px;
494
+ }
495
+ ol ol {
496
+ list-style: lower-alpha;
497
+ }
498
+ ul ul {
499
+ list-style: circle;
500
+ }
501
+ /* 内联强调 */
502
+ strong {
503
+ font-weight: 700;
504
+ color: var(--text);
505
+ }
506
+ mark {
507
+ background: #e3f7ee;
508
+ color: #2a9962;
509
+ padding: 1px 6px;
510
+ border-radius: 4px;
511
+ font-weight: 600;
512
+ font-style: normal;
513
+ font-size: 0.95em;
514
+ }
515
+ /* 分隔线:两侧均等留白 */
516
+ hr {
517
+ border: none;
518
+ border-top: 1px solid rgba(120, 161, 138, 0.11);
519
+ margin-top: 16px;
520
+ }
521
+ hr + * {
522
+ margin-top: 14px;
523
+ border-top: none;
524
+ padding-top: 0;
525
+ }
526
+ /* 引用/重点提示:左侧竖线 + 浅底 */
527
+ blockquote {
528
+ background: rgba(0, 125, 101, 0.05);
529
+ border-left: 2px solid var(--primary);
530
+ padding: 10px 14px;
531
+ border-radius: 0 8px 8px 0;
532
+ margin-top: 12px;
533
+ font-size: 13.5px;
534
+ line-height: 1.82;
535
+ color: #1b3d2e;
536
+ }
537
+
538
+ /* 表格 */
539
+ .ai-table-wrap {
540
+ margin-top: 12px;
541
+ overflow-x: auto;
542
+ border: 1px solid rgba(120, 161, 138, 0.12);
543
+ border-radius: 10px;
544
+ }
545
+ table {
546
+ width: max-content;
547
+ min-width: 100%;
548
+ border-collapse: collapse;
549
+ font-size: 13px;
550
+ }
551
+ table thead {
552
+ background: #f5faf7;
553
+ }
554
+ table th {
555
+ text-align: left;
556
+ font-size: 12px;
557
+ font-weight: 700;
558
+ color: var(--text);
559
+ padding: 10px 14px;
560
+ border-bottom: 1.5px solid rgba(120, 161, 138, 0.15);
561
+ }
562
+ table td {
563
+ padding: 10px 14px;
564
+ border-bottom: 1px solid rgba(120, 161, 138, 0.07);
565
+ vertical-align: top;
566
+ line-height: 1.7;
567
+ }
568
+ table tbody tr:last-child td {
569
+ border-bottom: none;
570
+ }
571
+ table tbody tr:hover td {
572
+ // background: #f7fbf9;
573
+ background: rgba(0, 125, 101, 0.05);
574
+ }
575
+ /* 代码块 */
576
+ pre {
577
+ background: #f4f8f5;
578
+ border: 1px solid rgba(120, 161, 138, 0.13);
579
+ border-radius: 10px;
580
+ padding: 14px 16px;
581
+ margin-top: 10px;
582
+ overflow-x: auto;
583
+ }
584
+ pre code {
585
+ font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Menlo, monospace;
586
+ font-size: 12.5px;
587
+ line-height: 1.75;
588
+ color: #1a3a28;
589
+ white-space: pre;
590
+ }
591
+ .hljs {
592
+ background: #f4f8f5;
593
+ color: #1a3a28;
594
+ }
595
+ /* 操作按钮组:固定在内容末尾,与上方内容保持明显间距 */
596
+ }
597
+ }
598
+
363
599
  }
364
600
  .msgItem-action {
365
601
  border-top: 1px solid rgba(0, 0, 0, 0.06);
@@ -487,6 +723,9 @@
487
723
  .msgItem-action {
488
724
  border-radius: 0px 0px 20px 20px;
489
725
  }
726
+ .msgItem-text-aibody{
727
+ padding: 0;
728
+ }
490
729
  }
491
730
  .msgItem-action-operate {
492
731
  margin-left: auto;
@@ -514,6 +753,9 @@
514
753
  .msgItem-action {
515
754
  border-radius: 0px 0px 20px 20px;
516
755
  }
756
+ .msgItem-text-aibody{
757
+ padding: 12px 16px;
758
+ }
517
759
  }
518
760
 
519
761
  .msgItem-action-operate {