@bbki.ng/site 5.4.15 → 5.4.16

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/blog/pages/streaming/arrow-down.tsx +26 -0
  5. package/src/blog/pages/streaming/index.tsx +43 -32
package/CHANGELOG.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # @bbki.ng/site
2
2
 
3
+ ## 5.4.16
4
+
3
5
  ## 5.4.15
4
6
 
5
7
  ## 5.4.14
package/index.html CHANGED
@@ -55,7 +55,7 @@
55
55
  </style>
56
56
  <script src="https://unpkg.com/open-heart-element" type="module"></script>
57
57
  <script type="module" src="https://cdn.jsdelivr.net/npm/@bbki.ng/bbimg@0.0.3/dist/index.js"></script>
58
- <script type="module" src="https://cdn.jsdelivr.net/npm/@bbki.ng/bb-msg-history@0.13.1/dist/index.js"></script>
58
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@bbki.ng/bb-msg-history@1.0.0/dist/index.js"></script>
59
59
  </head>
60
60
 
61
61
  <body class="h-full m-0 flex flex-col font-mono">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbki.ng/site",
3
- "version": "5.4.15",
3
+ "version": "5.4.16",
4
4
  "description": "code behind bbki.ng",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/src/blog/pages/streaming/arrow-down.tsx ADDED
@@ -0,0 +1,26 @@
1
+ import classNames from "classnames";
2
+ import React from "react";
3
+
4
+ export const ArrowDownIcon = ({ show }: { show: boolean }) => (
5
+ <svg
6
+ data-testid="geist-icon"
7
+ height="16"
8
+ stroke-linejoin="round"
9
+ viewBox="0 0 16 16"
10
+ width="16"
11
+ style={{
12
+ rotate: '180deg'
13
+ }}
14
+ className={classNames("transition-opacity duration-200 inline-block", {
15
+ "opacity-0": !show,
16
+ "opacity-100": show,
17
+ })}
18
+ >
19
+ <path
20
+ fill-rule="evenodd"
21
+ clip-rule="evenodd"
22
+ d="M8.70711 1.39644C8.31659 1.00592 7.68342 1.00592 7.2929 1.39644L2.21968 6.46966L1.68935 6.99999L2.75001 8.06065L3.28034 7.53032L7.25001 3.56065V14.25V15H8.75001V14.25V3.56065L12.7197 7.53032L13.25 8.06065L14.3107 6.99999L13.7803 6.46966L8.70711 1.39644Z"
23
+ fill="currentColor"
24
+ ></path>
25
+ </svg>
26
+ )
package/src/blog/pages/streaming/index.tsx CHANGED
@@ -4,6 +4,7 @@ import { formatStreamingData } from "@/utils/streaming";
4
4
  import { Article, Button, ButtonType, Panel } from "@bbki.ng/components";
5
5
  import { useScrollBtnVisibility } from "./useScrollBtnVisibility";
6
6
  import classNames from "classnames";
7
+ import { ArrowDownIcon } from "./arrow-down";
7
8
 
8
9
  // Extend JSX IntrinsicElements for the web component
9
10
  declare global {
@@ -29,16 +30,42 @@ const Streaming = () => {
29
30
  const { streaming, isLoading, isError } = useStreaming();
30
31
  const bbMsgHistoryRef = useRef<BbMsgHistoryElement>(null);
31
32
 
33
+ const [scrolled, setScrolled] = useState(false);
34
+
32
35
  const showScrollBtn = useScrollBtnVisibility(bbMsgHistoryRef.current!);
33
36
 
37
+ const formattedData = formatStreamingData(streaming || []);
38
+
39
+ useEffect(() => {
40
+ const el = bbMsgHistoryRef.current;
41
+ let timer: NodeJS.Timeout;
42
+ if (!isLoading && el) {
43
+ // 检查自定义元素是否已定义并升级
44
+ if (el.scrollToBottom) {
45
+ requestAnimationFrame(() => {
46
+ el.scrollToBottom();
47
+ });
48
+ } else {
49
+ // 等待 custom element 定义完成
50
+ customElements.whenDefined('bb-msg-history').then(() => {
51
+ el.scrollToBottom?.();
52
+ });
53
+ }
54
+
55
+ // delay to set scrolled state after scrollToBottom
56
+ timer = setTimeout(() => {
57
+ setScrolled(true);
58
+ }, 500);
59
+ }
60
+ return () => {
61
+ clearTimeout(timer);
62
+ };
63
+ }, [isLoading, formattedData])
64
+
34
65
  if (isError) {
35
66
  return <div className="p-8 text-center text-gray-500">加载失败</div>;
36
67
  }
37
68
 
38
- const formattedData = formatStreamingData(streaming || []);
39
-
40
- console.log("showScrollBtn", showScrollBtn);
41
-
42
69
  return (
43
70
  <Article title="直播" loading={isLoading}>
44
71
  {isLoading ? null : (
@@ -54,34 +81,18 @@ const Streaming = () => {
54
81
  {formattedData}
55
82
  </bb-msg-history>
56
83
  </Panel>
57
- <Button
58
- className="mt-64"
59
- transparent={!showScrollBtn}
60
- onClick={() => {
61
- bbMsgHistoryRef.current?.scrollToBottom();
62
- }}>
63
- <svg
64
- data-testid="geist-icon"
65
- height="16"
66
- stroke-linejoin="round"
67
- viewBox="0 0 16 16"
68
- width="16"
69
- style={{
70
- rotate: '180deg'
71
- }}
72
- className={classNames("transition-opacity duration-200 inline-block", {
73
- "opacity-0": !showScrollBtn,
74
- "opacity-100": showScrollBtn,
75
- })}
76
- >
77
- <path
78
- fill-rule="evenodd"
79
- clip-rule="evenodd"
80
- d="M8.70711 1.39644C8.31659 1.00592 7.68342 1.00592 7.2929 1.39644L2.21968 6.46966L1.68935 6.99999L2.75001 8.06065L3.28034 7.53032L7.25001 3.56065V14.25V15H8.75001V14.25V3.56065L12.7197 7.53032L13.25 8.06065L14.3107 6.99999L13.7803 6.46966L8.70711 1.39644Z"
81
- fill="currentColor"
82
- ></path>
83
- </svg>
84
- </Button>
84
+ {
85
+ scrolled ? (
86
+ <Button
87
+ className="mt-64"
88
+ transparent={!showScrollBtn}
89
+ onClick={() => {
90
+ bbMsgHistoryRef.current?.scrollToBottom();
91
+ }}>
92
+ <ArrowDownIcon show={showScrollBtn} />
93
+ </Button>
94
+ ) : null
95
+ }
85
96
  </>
86
97
  )}
87
98
  </Article>