@blocklet/discuss-kit-ux 2.0.1 → 2.0.2

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.
@@ -14,13 +14,13 @@ import { Box, useTheme as useTheme$1, useMediaQuery, Tooltip as Tooltip$1, Chip
14
14
  import isNil from "lodash/isNil";
15
15
  import { useEditorConfig, EditorConfigProvider } from "@blocklet/editor/lib/config";
16
16
  import { lazyWithPreload } from "react-lazy-with-preload";
17
- import { $getRoot, $createParagraphNode, $createTextNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW, $getSelection } from "lexical";
17
+ import { $getRoot, $createParagraphNode, $createTextNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW, $getSelection, COMMAND_PRIORITY_CRITICAL } from "lexical";
18
18
  import { $isRootTextContentEmpty } from "@lexical/text";
19
19
  import joinUrl from "url-join";
20
20
  import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
21
21
  import { ImageNode } from "@blocklet/editor/lib/main/nodes/ImageNode";
22
22
  import { VideoNode } from "@blocklet/editor/lib/ext/VideoPlugin/VideoNode";
23
- import { useSize, useInViewport, useSetState, useRequest, useGetState, useReactive } from "ahooks";
23
+ import { useSize, useInViewport, useSetState, useLocalStorageState, useRequest, useGetState, useReactive } from "ahooks";
24
24
  import Box$1 from "@mui/material/Box";
25
25
  import LoadingButton from "@mui/lab/LoadingButton";
26
26
  import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add, BorderColorOutlined } from "@mui/icons-material";
@@ -71,8 +71,10 @@ import bridge from "@arcblock/bridge";
71
71
  import { useBrowser } from "@arcblock/react-hooks";
72
72
  import Fab from "@mui/material/Fab";
73
73
  import debounce from "lodash/debounce";
74
+ import { useIsFocused } from "@blocklet/editor/lib/main/hooks/useIsFocused";
74
75
  import TextField from "@mui/material/TextField";
75
76
  import AddIcon from "@mui/icons-material/Add";
77
+ import SessionManager from "@arcblock/did-connect/lib/SessionManager";
76
78
  import { AxiosError } from "axios";
77
79
  import Toast from "@arcblock/ux/lib/Toast";
78
80
  import MuiPagination from "@mui/material/Pagination";
@@ -507,7 +509,7 @@ function VideoPathFixerPlugin() {
507
509
  }, [editor]);
508
510
  return null;
509
511
  }
510
- function AutoClearPlugin({ value, isChanged }) {
512
+ function AutoClearPlugin$1({ value, isChanged }) {
511
513
  const [editor] = useLexicalComposerContext();
512
514
  useEffect(() => {
513
515
  try {
@@ -655,7 +657,7 @@ const Input = ({
655
657
  /* @__PURE__ */ jsx(CmdEnterShortcutPlugin, { shortcut, callback: handleCmdEnterPressed }),
656
658
  /* @__PURE__ */ jsx(ImagePathFixerPlugin, {}),
657
659
  /* @__PURE__ */ jsx(VideoPathFixerPlugin, {}),
658
- /* @__PURE__ */ jsx(AutoClearPlugin, { value: content, isChanged: isChanged.current }),
660
+ /* @__PURE__ */ jsx(AutoClearPlugin$1, { value: content, isChanged: isChanged.current }),
659
661
  children
660
662
  ]
661
663
  }
@@ -3991,6 +3993,7 @@ function ChatList({ inWallet, ...rest }) {
3991
3993
  sx: {
3992
3994
  position: "relative",
3993
3995
  m: 1,
3996
+ mx: { xs: 0, sm: 1 },
3994
3997
  py: 1.5,
3995
3998
  px: 2,
3996
3999
  fontWeight: "bold",
@@ -4062,7 +4065,6 @@ const Time = ({ createdAt }) => {
4062
4065
  };
4063
4066
  const baseItemSx = {
4064
4067
  px: 1.25,
4065
- py: 1,
4066
4068
  transition: "all 120ms linear"
4067
4069
  };
4068
4070
  function Message({ message, prevMessage, showTime = true, ...rest }) {
@@ -4115,7 +4117,9 @@ function Message({ message, prevMessage, showTime = true, ...rest }) {
4115
4117
  },
4116
4118
  ".author-info-title": {
4117
4119
  fontSize: 14,
4118
- fontWeight: 500
4120
+ fontWeight: 500,
4121
+ // username 下方首条消息的 margin-top
4122
+ "+ div": { mt: 1 }
4119
4123
  },
4120
4124
  ".author-chat-item": {
4121
4125
  ml: compactMessage ? 6 : 0,
@@ -4210,7 +4214,7 @@ function NotificationMessage({ chat, message, prevMessage }) {
4210
4214
  const baseCardSx = {
4211
4215
  py: 1.5,
4212
4216
  px: 2,
4213
- background: "#fff",
4217
+ bgcolor: "grey.50",
4214
4218
  width: "fit-content",
4215
4219
  maxWidth: "calc(100% - 16px)",
4216
4220
  wordWrap: "break-word",
@@ -4440,7 +4444,7 @@ function NotificationMessage({ chat, message, prevMessage }) {
4440
4444
  }
4441
4445
  return /* @__PURE__ */ jsx(Message, { message, showTime: false });
4442
4446
  };
4443
- return /* @__PURE__ */ jsx(Box$1, { sx: { ...baseItemSx, fontSize: 14 }, children: render() });
4447
+ return /* @__PURE__ */ jsx(Box$1, { sx: { ...baseItemSx, py: 0.5, fontSize: 14 }, children: render() });
4444
4448
  }
4445
4449
  const checkIsAtBottom = (element) => {
4446
4450
  return element && (element.scrollHeight === 0 || element.scrollHeight - element.scrollTop < element.clientHeight + 60);
@@ -4455,7 +4459,7 @@ function MessageList({ chat, ...rest }) {
4455
4459
  const [isLoadingMore, setIsLoadingMore] = useState(false);
4456
4460
  const scrollToBottom = () => {
4457
4461
  var _a3, _b3;
4458
- (_b3 = containerRef.current) == null ? void 0 : _b3.scrollTo({ top: ((_a3 = containerRef.current) == null ? void 0 : _a3.scrollHeight) || 0, behavior: "smooth" });
4462
+ (_b3 = containerRef.current) == null ? void 0 : _b3.scrollTo({ top: ((_a3 = containerRef.current) == null ? void 0 : _a3.scrollHeight) || 0 });
4459
4463
  setIsAtBottom(true);
4460
4464
  };
4461
4465
  useEffect(() => {
@@ -4490,7 +4494,6 @@ function MessageList({ chat, ...rest }) {
4490
4494
  py: 2.5,
4491
4495
  px: 1.25,
4492
4496
  gap: 1,
4493
- background: "rgba(249, 250, 251, 1)",
4494
4497
  // 闪烁
4495
4498
  "@keyframes blinking": {
4496
4499
  "0%": { opacity: 0 },
@@ -4665,6 +4668,270 @@ function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
4665
4668
  }
4666
4669
  );
4667
4670
  }
4671
+ const tablerSend = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z" }) });
4672
+ const tablerLetterCase = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7" }) });
4673
+ const Editor = lazy(() => import("./editor-KBV5TMjF.mjs"));
4674
+ function LazyEditor(props) {
4675
+ const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
4676
+ /* @__PURE__ */ jsx(Skeleton, {}),
4677
+ /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
4678
+ /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
4679
+ /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
4680
+ ] });
4681
+ return /* @__PURE__ */ jsx(Suspense, { fallback: fallback2, children: /* @__PURE__ */ jsx(Editor, { ...props }) });
4682
+ }
4683
+ const BlockletEditor = lazy(() => import("@blocklet/editor"));
4684
+ const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
4685
+ /* @__PURE__ */ jsx(Skeleton, {}),
4686
+ /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
4687
+ /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
4688
+ /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
4689
+ ] });
4690
+ function EditorPreview({ content, children, ...rest }) {
4691
+ return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsxs(
4692
+ BlockletEditor,
4693
+ {
4694
+ editorState: inferInitialEditorState(content),
4695
+ editable: false,
4696
+ enableHeadingsIdPlugin: true,
4697
+ ...rest,
4698
+ children: [
4699
+ /* @__PURE__ */ jsx(ImagePathFixerPlugin, {}),
4700
+ /* @__PURE__ */ jsx(VideoPathFixerPlugin, {}),
4701
+ children
4702
+ ]
4703
+ }
4704
+ ) });
4705
+ }
4706
+ EditorPreview.fallback = fallback;
4707
+ function AutoClearPlugin({ clearKey }) {
4708
+ const [editor] = useLexicalComposerContext();
4709
+ useEffect(() => {
4710
+ if (editor && clearKey) {
4711
+ editor.update(() => {
4712
+ const root = $getRoot();
4713
+ root.clear();
4714
+ });
4715
+ }
4716
+ }, [editor, clearKey]);
4717
+ return null;
4718
+ }
4719
+ function FocusPlugin({ callback }) {
4720
+ const hasFocus = useIsFocused();
4721
+ useEffect(() => {
4722
+ callback(hasFocus);
4723
+ }, [callback, hasFocus]);
4724
+ return null;
4725
+ }
4726
+ function DraggerPlugin() {
4727
+ const [editor] = useLexicalComposerContext();
4728
+ const { mobile } = useBrowser();
4729
+ const hasFocus = useIsFocused();
4730
+ const selection = editor.getEditorState().read($getSelection);
4731
+ const enabled = mobile.any && hasFocus && selection;
4732
+ if (enabled) {
4733
+ return /* @__PURE__ */ jsx(
4734
+ Box,
4735
+ {
4736
+ sx: {
4737
+ position: "absolute",
4738
+ left: "50%",
4739
+ top: 4,
4740
+ width: 64,
4741
+ marginLeft: "-32px",
4742
+ height: 4,
4743
+ bgcolor: "grey.300",
4744
+ borderRadius: 0.1
4745
+ }
4746
+ }
4747
+ );
4748
+ }
4749
+ return null;
4750
+ }
4751
+ function ShortcutPlugin({ callback }) {
4752
+ const [editor] = useLexicalComposerContext();
4753
+ const { mobile } = useBrowser();
4754
+ useEffect(() => {
4755
+ let dispatching = false;
4756
+ return editor.registerCommand(
4757
+ KEY_ENTER_COMMAND,
4758
+ (e) => {
4759
+ if (dispatching || mobile.any) {
4760
+ dispatching = false;
4761
+ return false;
4762
+ }
4763
+ if (e.shiftKey) {
4764
+ dispatching = true;
4765
+ const keyboardEvent = new KeyboardEvent("keydown", {
4766
+ code: "Enter",
4767
+ key: "Enter",
4768
+ charCode: 13,
4769
+ keyCode: 13,
4770
+ view: window,
4771
+ bubbles: true
4772
+ });
4773
+ e.preventDefault();
4774
+ editor.dispatchCommand(KEY_ENTER_COMMAND, keyboardEvent);
4775
+ return true;
4776
+ }
4777
+ callback();
4778
+ return true;
4779
+ },
4780
+ COMMAND_PRIORITY_CRITICAL
4781
+ );
4782
+ }, [editor, callback, mobile.any]);
4783
+ return null;
4784
+ }
4785
+ function ChatInput({ initialContent, send, onContentChange }) {
4786
+ const { t } = useLocaleContext();
4787
+ const [content, setContent] = useState("");
4788
+ const [lastSent, setLastSent] = useState(0);
4789
+ const [toolbarVisible, setToolbarVisible] = useLocalStorageState("chat-input-toolbar-visible", {
4790
+ defaultValue: false
4791
+ });
4792
+ const { mobile } = useBrowser();
4793
+ const [focused, setFocused] = useState(false);
4794
+ const compactView = mobile.any && !focused;
4795
+ const handleSend = () => {
4796
+ send(content);
4797
+ setContent("");
4798
+ setLastSent(Date.now());
4799
+ };
4800
+ return /* @__PURE__ */ jsxs(
4801
+ Box,
4802
+ {
4803
+ sx: {
4804
+ position: "relative",
4805
+ pb: 5,
4806
+ border: 1,
4807
+ borderColor: "divider",
4808
+ borderRadius: 1,
4809
+ overflow: "hidden",
4810
+ ".be-shell": { borderTop: "0 !important" },
4811
+ ".be-shell .toolbar": { bgcolor: "grey.50", ...!toolbarVisible && { display: "none" } },
4812
+ ".be-shell .be-editable": { px: "16px !important" },
4813
+ ".be-shell .be-placeholder": { left: 16 },
4814
+ ".be-shell .be-editable, .be-shell .be-content": { minHeight: "20px !important" },
4815
+ ".be-shell .be-editable p": { my: 0 },
4816
+ ".draggable-block-menu": { display: "none" },
4817
+ ...compactView && {
4818
+ pb: 0,
4819
+ borderRadius: 2,
4820
+ borderBottomLeftRadius: 0,
4821
+ borderBottomRightRadius: 0
4822
+ }
4823
+ },
4824
+ children: [
4825
+ /* @__PURE__ */ jsxs(
4826
+ Box,
4827
+ {
4828
+ sx: {
4829
+ maxHeight: 400,
4830
+ overflowY: "auto",
4831
+ ...compactView && {
4832
+ height: 44 + (toolbarVisible ? 44 : 0),
4833
+ pt: toolbarVisible ? 0 : 0.5,
4834
+ pb: 0.5,
4835
+ overflow: "hidden",
4836
+ ".be-shell .be-editable": { pr: "44px !important" }
4837
+ }
4838
+ },
4839
+ children: [
4840
+ compactView && !toolbarVisible && /* @__PURE__ */ jsx(
4841
+ Box,
4842
+ {
4843
+ sx: {
4844
+ position: "absolute",
4845
+ right: 12,
4846
+ top: 12,
4847
+ display: "flex",
4848
+ justifyContent: "center",
4849
+ alignItems: "center",
4850
+ width: 28,
4851
+ height: 28,
4852
+ bgcolor: "grey.300",
4853
+ borderRadius: "100%"
4854
+ },
4855
+ children: /* @__PURE__ */ jsx(Box, { component: tablerSend, sx: { fontSize: 13, color: "text.secondary" } })
4856
+ }
4857
+ ),
4858
+ /* @__PURE__ */ jsxs(
4859
+ LazyEditor,
4860
+ {
4861
+ enableSaveAreaPlugin: false,
4862
+ initialContent: initialContent || "",
4863
+ onChange: ({ content: contentStr, isEmpty }) => {
4864
+ const value = isEmpty ? "" : contentStr;
4865
+ setContent(value);
4866
+ onContentChange == null ? void 0 : onContentChange(value);
4867
+ },
4868
+ autoFocus: false,
4869
+ ignoreInitialChange: false,
4870
+ placeholder: "Jot something down",
4871
+ children: [
4872
+ /* @__PURE__ */ jsx(AutoClearPlugin, { clearKey: lastSent }),
4873
+ /* @__PURE__ */ jsx(ShortcutPlugin, { callback: handleSend }),
4874
+ /* @__PURE__ */ jsx(DraggerPlugin, {}),
4875
+ /* @__PURE__ */ jsx(FocusPlugin, { callback: (v2) => setFocused(v2) })
4876
+ ]
4877
+ }
4878
+ )
4879
+ ]
4880
+ }
4881
+ ),
4882
+ /* @__PURE__ */ jsxs(
4883
+ Box,
4884
+ {
4885
+ sx: {
4886
+ display: "flex",
4887
+ justifyContent: "space-between",
4888
+ alignItems: "center",
4889
+ position: "absolute",
4890
+ left: 0,
4891
+ right: 0,
4892
+ bottom: 0,
4893
+ height: 40,
4894
+ p: 1,
4895
+ ...compactView && { display: "none" }
4896
+ },
4897
+ children: [
4898
+ /* @__PURE__ */ jsx(
4899
+ Button$1,
4900
+ {
4901
+ size: "small",
4902
+ color: "primary",
4903
+ variant: "text",
4904
+ onClick: () => setToolbarVisible((x) => !x),
4905
+ startIcon: /* @__PURE__ */ jsx(Box, { component: tablerLetterCase, sx: { fontSize: "14px !important" } }),
4906
+ sx: {
4907
+ width: 32,
4908
+ height: 28,
4909
+ minWidth: 0,
4910
+ ".MuiButton-startIcon": { m: 0, color: "text.secondary" },
4911
+ ...toolbarVisible && { bgcolor: "grey.200" }
4912
+ }
4913
+ }
4914
+ ),
4915
+ /* @__PURE__ */ jsx(
4916
+ Button$1,
4917
+ {
4918
+ size: "small",
4919
+ color: "primary",
4920
+ variant: "contained",
4921
+ disabled: !content,
4922
+ onClick: handleSend,
4923
+ startIcon: /* @__PURE__ */ jsx(Box, { component: tablerSend, sx: { fontSize: "14px !important" } }),
4924
+ sx: { height: 28 },
4925
+ children: t("chat.send")
4926
+ }
4927
+ )
4928
+ ]
4929
+ }
4930
+ )
4931
+ ]
4932
+ }
4933
+ );
4934
+ }
4668
4935
  function getLineClamp(count) {
4669
4936
  return {
4670
4937
  display: "-webkit-box",
@@ -4688,7 +4955,7 @@ function ChatRoom({ chat, inWallet, ...rest }) {
4688
4955
  const isActive = isActiveChat(chat.id);
4689
4956
  const { session, isAdmin } = useSessionContext();
4690
4957
  const isCreator = chat.creator.did === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did);
4691
- const [input, setInput] = useState("");
4958
+ const [input, setInput] = useLocalStorageState(`chat-input-${chat.id}`, { defaultValue: "" });
4692
4959
  useEffect(() => {
4693
4960
  if (chat.isActivated) {
4694
4961
  initChatRoom(chat.id);
@@ -4710,7 +4977,10 @@ function ChatRoom({ chat, inWallet, ...rest }) {
4710
4977
  }
4711
4978
  if (chat.type === "dm") {
4712
4979
  const oppositeUser = getOppositeUser(chat);
4713
- return /* @__PURE__ */ jsx(RoomTitle, { title: oppositeUser.fullName });
4980
+ return /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
4981
+ /* @__PURE__ */ jsx(Avatar, { did: oppositeUser == null ? void 0 : oppositeUser.did, src: oppositeUser == null ? void 0 : oppositeUser.avatar, size: 24, shape: "circle", variant: "rounded" }),
4982
+ /* @__PURE__ */ jsx(RoomTitle, { title: oppositeUser.fullName })
4983
+ ] });
4714
4984
  }
4715
4985
  if (chat.type === "channel") {
4716
4986
  const menuItems = [];
@@ -4795,66 +5065,41 @@ function ChatRoom({ chat, inWallet, ...rest }) {
4795
5065
  ]
4796
5066
  }
4797
5067
  ),
4798
- /* @__PURE__ */ jsx(Box$1, { sx: { flex: 1, overflow: "hidden", background: theme.palette.grey[50] }, children: /* @__PURE__ */ jsx(MessageList, { chat }) }),
4799
- /* @__PURE__ */ jsx(
4800
- Box$1,
4801
- {
4802
- sx: {
4803
- flex: "0 0 auto",
4804
- ".be-editable": { maxHeight: 200, overflow: "auto" },
4805
- ".be-editable, .be-content": { minHeight: "64px !important" },
4806
- ".be-shell": {
4807
- border: "none !important",
4808
- borderTop: "1px solid #e5e5e5 !important",
4809
- borderRadius: "0px !important"
4810
- }
4811
- },
4812
- children: /* @__PURE__ */ jsxs(Box$1, { sx: { position: "relative" }, children: [
4813
- isActive && /* @__PURE__ */ jsx(
4814
- CommentInput,
4815
- {
4816
- initialContent: input,
4817
- onChange: (editorState) => setInput(editorState ? JSON.stringify(editorState) : ""),
4818
- send: (content) => sendMessage(chat.id, content),
4819
- placeholder: t("chat.typeSomething"),
4820
- sendText: t("chat.reply"),
4821
- disabledSend: !(chat.type !== "channel" || chat.hasJoined)
4822
- }
4823
- ),
4824
- chat.type === "channel" && !chat.hasJoined && /* @__PURE__ */ jsxs(
4825
- Box$1,
4826
- {
4827
- sx: {
4828
- position: "absolute",
4829
- zIndex: 9999999,
4830
- top: 0,
4831
- left: 0,
4832
- right: 0,
4833
- bottom: 0,
4834
- bgcolor: "rgba(255, 255, 255, 0.7)",
4835
- display: "flex",
4836
- flexDirection: "column",
4837
- alignItems: "center",
4838
- justifyContent: "center",
4839
- color: "#fff"
4840
- },
4841
- children: [
4842
- /* @__PURE__ */ jsx(Box$1, { sx: { mb: 0.5, fontSize: 18 }, children: "🚪" }),
4843
- /* @__PURE__ */ jsx(Box$1, { sx: { color: "primary.main", mb: 0.5, fontSize: 13, fontWeight: 500 }, children: t("chat.notYetJoinedTheChannel") }),
4844
- /* @__PURE__ */ jsx(
4845
- Box$1,
4846
- {
4847
- sx: { color: "secondary.main", cursor: "pointer", fontSize: 13 },
4848
- onClick: () => joinChannel(chat.id),
4849
- children: t("chat.joinChannel")
4850
- }
4851
- )
4852
- ]
4853
- }
4854
- )
4855
- ] })
4856
- }
4857
- )
5068
+ /* @__PURE__ */ jsx(Box$1, { sx: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(MessageList, { chat }) }),
5069
+ /* @__PURE__ */ jsxs(Box$1, { sx: { position: "relative" }, children: [
5070
+ chat.isActivated && chat.type !== "notification" && /* @__PURE__ */ jsx(Box$1, { sx: { px: { xs: 0, sm: 2.5 }, pb: { xs: 0, sm: 2.5 } }, children: /* @__PURE__ */ jsx(
5071
+ ChatInput,
5072
+ {
5073
+ initialContent: input,
5074
+ onContentChange: (v2) => setInput(v2),
5075
+ send: (content) => sendMessage(chat.id, content)
5076
+ }
5077
+ ) }),
5078
+ chat.type === "channel" && !chat.hasJoined && /* @__PURE__ */ jsxs(
5079
+ Box$1,
5080
+ {
5081
+ sx: {
5082
+ position: "absolute",
5083
+ zIndex: 9999999,
5084
+ top: 0,
5085
+ left: 0,
5086
+ right: 0,
5087
+ bottom: 0,
5088
+ bgcolor: "rgba(255, 255, 255, 0.7)",
5089
+ display: "flex",
5090
+ flexDirection: "column",
5091
+ alignItems: "center",
5092
+ justifyContent: "center",
5093
+ color: "#fff"
5094
+ },
5095
+ children: [
5096
+ /* @__PURE__ */ jsx(Box$1, { sx: { mb: 0.5, fontSize: 18 }, children: "🚪" }),
5097
+ /* @__PURE__ */ jsx(Box$1, { sx: { color: "primary.main", mb: 0.5, fontSize: 13, fontWeight: 500 }, children: t("chat.notYetJoinedTheChannel") }),
5098
+ /* @__PURE__ */ jsx(Box$1, { sx: { color: "secondary.main", cursor: "pointer", fontSize: 13 }, onClick: () => joinChannel(chat.id), children: t("chat.joinChannel") })
5099
+ ]
5100
+ }
5101
+ )
5102
+ ] })
4858
5103
  ] });
4859
5104
  }
4860
5105
  function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
@@ -5255,6 +5500,7 @@ function ChatInWallet({ sx, ...rest }) {
5255
5500
  !activeChatId && /* @__PURE__ */ jsx(Empty$1, { sx: { height: 1 } })
5256
5501
  ] }) });
5257
5502
  }
5503
+ const tablerSwitchHorizontal = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m16 3l4 4l-4 4m-6-4h10M8 13l-4 4l4 4m-4-4h9" }) });
5258
5504
  function Empty({ sx }) {
5259
5505
  const { t } = useLocaleContext();
5260
5506
  const mergedSx = [
@@ -5274,6 +5520,7 @@ function Empty({ sx }) {
5274
5520
  ] });
5275
5521
  }
5276
5522
  function ChatListInWallet({ sx, ...rest }) {
5523
+ const { session } = useSessionContext();
5277
5524
  const { initialized, chats, activeChatId } = useChatContext();
5278
5525
  const { unread } = useUnreadNotification();
5279
5526
  const { navigateToChatList, updateUnreadState } = useChatInWallet();
@@ -5294,7 +5541,26 @@ function ChatListInWallet({ sx, ...rest }) {
5294
5541
  borderRight: { sm: "1px solid #e5e5e5" }
5295
5542
  },
5296
5543
  children: [
5297
- /* @__PURE__ */ jsx(UserSearch, { sx: { flex: "0 0 auto", py: 1, px: 3 } }),
5544
+ /* @__PURE__ */ jsxs(Box$1, { sx: { flex: "0 0 auto", py: 1, px: 2 }, children: [
5545
+ /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", justifyContent: "space-between", mr: -1 }, children: [
5546
+ /* @__PURE__ */ jsxs(
5547
+ Box$1,
5548
+ {
5549
+ onClick: () => {
5550
+ bridge.call("switchApp");
5551
+ },
5552
+ sx: { display: "flex", alignItems: "center", gap: 1 },
5553
+ children: [
5554
+ /* @__PURE__ */ jsx(Box$1, { component: "img", src: window.blocklet.appLogo, alt: "", sx: { width: 20, height: 20 } }),
5555
+ /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { typography: "h5", fontWeight: "medium" }, children: window.blocklet.appName }),
5556
+ /* @__PURE__ */ jsx(Box$1, { component: tablerSwitchHorizontal, sx: { fontSize: 15, color: "grey.600" } })
5557
+ ]
5558
+ }
5559
+ ),
5560
+ /* @__PURE__ */ jsx(SessionManager, { style: { padding: 0 }, showText: true, showRole: true, session })
5561
+ ] }),
5562
+ /* @__PURE__ */ jsx(UserSearch, { sx: { mt: 1 } })
5563
+ ] }),
5298
5564
  /* @__PURE__ */ jsx(Divider, {}),
5299
5565
  !!(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsx(ChatList, { sx: { flex: 1, overflowY: "auto" }, inWallet: true }),
5300
5566
  !(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsx(Empty, { sx: { flex: 1 } }),
@@ -5607,40 +5873,6 @@ function Pagination({
5607
5873
  }
5608
5874
  );
5609
5875
  }
5610
- const Editor = lazy(() => import("./editor-D3RAcw2N.mjs"));
5611
- function LazyEditor(props) {
5612
- const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
5613
- /* @__PURE__ */ jsx(Skeleton, {}),
5614
- /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
5615
- /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
5616
- /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
5617
- ] });
5618
- return /* @__PURE__ */ jsx(Suspense, { fallback: fallback2, children: /* @__PURE__ */ jsx(Editor, { ...props }) });
5619
- }
5620
- const BlockletEditor = lazy(() => import("@blocklet/editor"));
5621
- const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
5622
- /* @__PURE__ */ jsx(Skeleton, {}),
5623
- /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
5624
- /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
5625
- /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
5626
- ] });
5627
- function EditorPreview({ content, children, ...rest }) {
5628
- return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsxs(
5629
- BlockletEditor,
5630
- {
5631
- editorState: inferInitialEditorState(content),
5632
- editable: false,
5633
- enableHeadingsIdPlugin: true,
5634
- ...rest,
5635
- children: [
5636
- /* @__PURE__ */ jsx(ImagePathFixerPlugin, {}),
5637
- /* @__PURE__ */ jsx(VideoPathFixerPlugin, {}),
5638
- children
5639
- ]
5640
- }
5641
- ) });
5642
- }
5643
- EditorPreview.fallback = fallback;
5644
5876
  const useBeforeUnloadPrompt = (dirty) => {
5645
5877
  useEffect(() => {
5646
5878
  const showPrompt = (e) => {
@@ -5806,7 +6038,8 @@ const en = {
5806
6038
  pointUp: "🎉 You got {points} {unit} {event}",
5807
6039
  loadMore: "Load older messages",
5808
6040
  notYetJoinedTheChannel: "Not yet joined the channel",
5809
- typeSomething: "Type here. Use Markdown, Drag or paste images"
6041
+ typeSomething: "Type here. Use Markdown, Drag or paste images",
6042
+ send: "Send"
5810
6043
  }
5811
6044
  };
5812
6045
  const zh = {
@@ -5886,7 +6119,8 @@ const zh = {
5886
6119
  pointUp: "🎉 您获得了 {points} {unit} {event}",
5887
6120
  loadMore: "加载更多消息",
5888
6121
  notYetJoinedTheChannel: "暂未加入这个频道",
5889
- typeSomething: "在这里输入,适用 MarkDown,拽入或者黏贴图片"
6122
+ typeSomething: "在这里输入,适用 MarkDown,拽入或者黏贴图片",
6123
+ send: "发送"
5890
6124
  }
5891
6125
  };
5892
6126
  const translations = { zh, en };
package/dist/index.es.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export * from "@blocklet/labels";
2
- import { T, n, W, A, m, ad, B, F, K, J, L, ap, Y, X, $, Z, _, a1, w, C, x, y, E, a5, a6, ah, a8, O, Q, ac, D, ag, af, H, G, b, k, ae, M, P, ao, v, q, R, S, a9, aq, o, a2, a4, ai, al, ak, am, ar, N, as, l, f, p, r, j, t, h, aa, U, c, a0, z, a7, ab, u, an, d, at, a3, aj, e } from "./index-KLdzJyDb.mjs";
2
+ import { T, n, W, A, m, ad, B, F, K, J, L, ap, Y, X, $, Z, _, a1, w, C, x, y, E, a5, a6, ah, a8, O, Q, ac, D, ag, af, H, G, b, k, ae, M, P, ao, v, q, R, S, a9, aq, o, a2, a4, ai, al, ak, am, ar, N, as, l, f, p, r, j, t, h, aa, U, c, a0, z, a7, ab, u, an, d, at, a3, aj, e } from "./index-bnv41bga.mjs";
3
3
  import "react/jsx-runtime";
4
4
  import "react";
5
5
  import "@mui/material/Box";