@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.
- package/dist/components/chat/chat-input.d.ts +9 -0
- package/dist/components/editor/editor.d.ts +3 -1
- package/dist/components/editor/index.d.ts +1 -1
- package/dist/components/locale/en.d.ts +1 -0
- package/dist/components/locale/index.d.ts +2 -0
- package/dist/components/locale/zh.d.ts +1 -0
- package/dist/{editor-D3RAcw2N.mjs → editor-KBV5TMjF.mjs} +12 -4
- package/dist/{index-KLdzJyDb.mjs → index-bnv41bga.mjs} +343 -109
- package/dist/index.es.js +1 -1
- package/dist/index.umd.js +353 -113
- package/package.json +4 -4
|
@@ -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
|
-
|
|
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
|
|
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] =
|
|
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__ */
|
|
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"
|
|
4799
|
-
/* @__PURE__ */
|
|
4800
|
-
Box$1,
|
|
4801
|
-
|
|
4802
|
-
|
|
4803
|
-
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
|
|
4807
|
-
|
|
4808
|
-
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
|
|
4825
|
-
|
|
4826
|
-
{
|
|
4827
|
-
|
|
4828
|
-
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
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__ */
|
|
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-
|
|
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";
|