@esvndev/es-react-template-chat 0.0.93 → 0.0.94

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/dist/index.js +111 -223
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +111 -223
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -36772,6 +36772,14 @@ var SvgBell = function (_a) {
36772
36772
  React__namespace.createElement("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0" })));
36773
36773
  };
36774
36774
 
36775
+ var SvgClock = function (_a) {
36776
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36777
+ return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "clock_svg__feather clock_svg__feather-clock", "aria-labelledby": titleId }, props),
36778
+ title ? React__namespace.createElement("title", { id: titleId }, title) : null,
36779
+ React__namespace.createElement("circle", { cx: 12, cy: 12, r: 10 }),
36780
+ React__namespace.createElement("path", { d: "M12 6v6l4 2" })));
36781
+ };
36782
+
36775
36783
  var SvgCopy = function (_a) {
36776
36784
  var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36777
36785
  return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "copy_svg__feather copy_svg__feather-copy", "aria-labelledby": titleId }, props),
@@ -72786,229 +72794,109 @@ const ChatLog = (props) => {
72786
72794
  return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "d-flex p-50", children: [jsxRuntime.jsx("div", { className: "me-1", onClick: () => handlePreview(file), children: jsxRuntime.jsx(IconFileTypeColor, { fileType: file?.type, width: 35 }) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "file-name-chat", children: file.name }), jsxRuntime.jsx("p", { children: formatBytes({ size: file.size }) })] })] }), index + 1 === files.length && (jsxRuntime.jsx("div", { className: "px-1 pb-75", children: moment(chat.time).format("HH:mm") }))] }, index));
72787
72795
  }) }));
72788
72796
  }, [handlePreview]);
72789
- // const renderTaskApplication = useCallback((chat: any) => {
72790
- // const safeParse = (str: any) => {
72791
- // if (!str) { return {} }
72792
- // try {
72793
- // return typeof str === 'string' ? JSON.parse(str) : str
72794
- // } catch (err) {
72795
- // //console.error('JSON parse error:', err)
72796
- // return {}
72797
- // }
72798
- // }
72799
- // // Helper function to strip HTML tags and get clean text
72800
- // const stripHtml = (html: string) => {
72801
- // if (!html) { return '' }
72802
- // const tmp = document.createElement('div')
72803
- // tmp.innerHTML = html
72804
- // return tmp.textContent || tmp.innerText || ''
72805
- // }
72806
- // const taskData = safeParse(chat.msg)
72807
- // const cleanDescription = taskData.description ? stripHtml(taskData.description) : ''
72808
- // return (
72809
- // <div
72810
- // style={{
72811
- // width: 320,
72812
- // backgroundColor: "#f8f9fa",
72813
- // borderRadius: 12,
72814
- // border: "1px solid #e3e8ef",
72815
- // padding: "12px",
72816
- // boxShadow: "0 2px 4px rgba(0,0,0,0.04)"
72817
- // }}
72818
- // >
72819
- // {/* Header với icon và tiêu đề */}
72820
- // <div className="d-flex align-items-start" style={{ marginBottom: 10 }}>
72821
- // <div style={{
72822
- // backgroundColor: "#e7f3ff",
72823
- // borderRadius: 8,
72824
- // padding: 6,
72825
- // display: "flex",
72826
- // alignItems: "center",
72827
- // justifyContent: "center",
72828
- // marginRight: 8,
72829
- // flexShrink: 0
72830
- // }}>
72831
- // <BecoxyWriting color="#006edc" fontSize={24} />
72832
- // </div>
72833
- // <div style={{ flex: 1, minWidth: 0 }}>
72834
- // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 2, fontWeight: 500 }}>
72835
- // Công việc
72836
- // </div>
72837
- // <div style={{
72838
- // fontWeight: 600,
72839
- // fontSize: 14,
72840
- // color: "#283046",
72841
- // lineHeight: "1.4",
72842
- // wordBreak: "break-word"
72843
- // }}>
72844
- // {taskData.subject || 'Không có tiêu đề'}
72845
- // </div>
72846
- // </div>
72847
- // </div>
72848
- // {/* Nội dung */}
72849
- // {cleanDescription && (
72850
- // <div
72851
- // style={{
72852
- // marginBottom: 10,
72853
- // padding: "8px 10px",
72854
- // backgroundColor: "white",
72855
- // borderRadius: 8,
72856
- // fontSize: 12,
72857
- // color: "#5e5873",
72858
- // lineHeight: "1.5",
72859
- // border: "1px solid #eff1f5",
72860
- // wordBreak: "break-word",
72861
- // whiteSpace: "pre-wrap"
72862
- // }}
72863
- // dangerouslySetInnerHTML={{ __html: taskData.description }}
72864
- // />
72865
- // )}
72866
- // {/* Thông tin người tham gia */}
72867
- // <div style={{
72868
- // backgroundColor: "white",
72869
- // borderRadius: 8,
72870
- // padding: "8px 10px",
72871
- // marginBottom: 8,
72872
- // border: "1px solid #eff1f5"
72873
- // }}>
72874
- // {/* Người tạo phiếu */}
72875
- // {taskData.createdByName && (
72876
- // <div style={{ marginBottom: taskData.hostPerson?.length > 0 || taskData.thePerformer?.length > 0 ? 8 : 0 }}>
72877
- // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
72878
- // Người tạo phiếu
72879
- // </div>
72880
- // <div className="d-flex align-items-center">
72881
- // <AvatarDefault
72882
- // imgWidth={20}
72883
- // imgHeight={20}
72884
- // color="light-primary"
72885
- // className="me-50"
72886
- // img={taskData?.createdByImg}
72887
- // />
72888
- // <span style={{ fontSize: 12, color: "#283046", fontWeight: 500 }}>
72889
- // {taskData.createdByName}
72890
- // </span>
72891
- // </div>
72892
- // </div>
72893
- // )}
72894
- // {/* Người chủ trì */}
72895
- // {taskData.hostPerson && taskData.hostPerson.length > 0 && (
72896
- // <div style={{ marginBottom: taskData.thePerformer?.length > 0 ? 8 : 0 }}>
72897
- // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
72898
- // Người chủ trì
72899
- // </div>
72900
- // <div className="d-flex align-items-center flex-wrap" style={{ gap: 4 }}>
72901
- // {taskData.hostPerson.slice(0, 2).map((person: any, index: number) => (
72902
- // <div key={index} className="d-flex align-items-center" style={{
72903
- // backgroundColor: "#f8f9fa",
72904
- // borderRadius: 6,
72905
- // padding: "3px 6px",
72906
- // marginRight: 4
72907
- // }}>
72908
- // <AvatarDefault
72909
- // imgWidth={18}
72910
- // imgHeight={18}
72911
- // color="light-info"
72912
- // className="me-50"
72913
- // img={person.img}
72914
- // />
72915
- // <span style={{ fontSize: 11, color: "#5e5873", fontWeight: 500 }}>
72916
- // {person.name || person.fullName || 'N/A'}
72917
- // </span>
72918
- // </div>
72919
- // ))}
72920
- // {taskData.hostPerson.length > 2 && (
72921
- // <span style={{
72922
- // fontSize: 11,
72923
- // color: "#8b92a7",
72924
- // backgroundColor: "#f8f9fa",
72925
- // padding: "3px 8px",
72926
- // borderRadius: 6,
72927
- // fontWeight: 500
72928
- // }}>
72929
- // +{taskData.hostPerson.length - 2}
72930
- // </span>
72931
- // )}
72932
- // </div>
72933
- // </div>
72934
- // )}
72935
- // {/* Người thực hiện */}
72936
- // {taskData.thePerformer && taskData.thePerformer.length > 0 && (
72937
- // <div>
72938
- // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
72939
- // Người thực hiện
72940
- // </div>
72941
- // <div className="d-flex align-items-center flex-wrap" style={{ gap: 4 }}>
72942
- // {taskData.thePerformer.slice(0, 2).map((performer: any, index: number) => (
72943
- // <div key={index} className="d-flex align-items-center" style={{
72944
- // backgroundColor: "#f8f9fa",
72945
- // borderRadius: 6,
72946
- // padding: "3px 6px",
72947
- // marginRight: 4
72948
- // }}>
72949
- // <AvatarDefault
72950
- // imgWidth={18}
72951
- // imgHeight={18}
72952
- // color="light-secondary"
72953
- // className="me-50"
72954
- // img={performer.img}
72955
- // />
72956
- // <span style={{ fontSize: 11, color: "#5e5873", fontWeight: 500 }}>
72957
- // {performer.name || performer.fullName || 'N/A'}
72958
- // </span>
72959
- // </div>
72960
- // ))}
72961
- // {taskData.thePerformer.length > 2 && (
72962
- // <span style={{
72963
- // fontSize: 11,
72964
- // color: "#8b92a7",
72965
- // backgroundColor: "#f8f9fa",
72966
- // padding: "3px 8px",
72967
- // borderRadius: 6,
72968
- // fontWeight: 500
72969
- // }}>
72970
- // +{taskData.thePerformer.length - 2}
72971
- // </span>
72972
- // )}
72973
- // </div>
72974
- // </div>
72975
- // )}
72976
- // </div>
72977
- // {/* Hạn hoàn thành */}
72978
- // {taskData.dueDate && (
72979
- // <div style={{
72980
- // display: "flex",
72981
- // alignItems: "center",
72982
- // justifyContent: "space-between",
72983
- // backgroundColor: "#fff5f5",
72984
- // padding: "6px 10px",
72985
- // borderRadius: 8,
72986
- // marginBottom: 8,
72987
- // border: "1px solid #ffe5e5"
72988
- // }}>
72989
- // <div style={{ display: "flex", alignItems: "center" }}>
72990
- // <Clock fontSize={14} style={{ color: "#ea5455", marginRight: 6 }} />
72991
- // <span style={{ fontSize: 10, color: "#8b92a7", fontWeight: 500 }}>
72992
- // Hạn hoàn thành
72993
- // </span>
72994
- // </div>
72995
- // <span style={{ fontSize: 12, color: "#ea5455", fontWeight: 600 }}>
72996
- // {moment(taskData.dueDate).format('DD/MM/YYYY HH:mm')}
72997
- // </span>
72998
- // </div>
72999
- // )}
73000
- // {/* Footer time */}
73001
- // <div style={{
73002
- // fontSize: 11,
73003
- // color: "#adb5bd",
73004
- // textAlign: "right",
73005
- // fontWeight: 500
73006
- // }}>
73007
- // {moment(chat.time).format("HH:mm")}
73008
- // </div>
73009
- // </div>
73010
- // )
73011
- // }, [])
72797
+ React.useCallback((chat) => {
72798
+ const safeParse = (str) => {
72799
+ if (!str) {
72800
+ return {};
72801
+ }
72802
+ try {
72803
+ return typeof str === 'string' ? JSON.parse(str) : str;
72804
+ }
72805
+ catch (err) {
72806
+ //console.error('JSON parse error:', err)
72807
+ return {};
72808
+ }
72809
+ };
72810
+ // Helper function to strip HTML tags and get clean text
72811
+ const stripHtml = (html) => {
72812
+ if (!html) {
72813
+ return '';
72814
+ }
72815
+ const tmp = document.createElement('div');
72816
+ tmp.innerHTML = html;
72817
+ return tmp.textContent || tmp.innerText || '';
72818
+ };
72819
+ const taskData = safeParse(chat.msg);
72820
+ const cleanDescription = taskData.description ? stripHtml(taskData.description) : '';
72821
+ return (jsxRuntime.jsxs("div", { style: {
72822
+ width: 320,
72823
+ backgroundColor: "#f8f9fa",
72824
+ borderRadius: 12,
72825
+ border: "1px solid #e3e8ef",
72826
+ padding: "12px",
72827
+ boxShadow: "0 2px 4px rgba(0,0,0,0.04)"
72828
+ }, children: [jsxRuntime.jsxs("div", { className: "d-flex align-items-start", style: { marginBottom: 10 }, children: [jsxRuntime.jsx("div", { style: {
72829
+ backgroundColor: "#e7f3ff",
72830
+ borderRadius: 8,
72831
+ padding: 6,
72832
+ display: "flex",
72833
+ alignItems: "center",
72834
+ justifyContent: "center",
72835
+ marginRight: 8,
72836
+ flexShrink: 0
72837
+ }, children: jsxRuntime.jsx(SvgBecoxyWriting, { color: "#006edc", fontSize: 24 }) }), jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [jsxRuntime.jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 2, fontWeight: 500 }, children: "C\u00F4ng vi\u1EC7c" }), jsxRuntime.jsx("div", { style: {
72838
+ fontWeight: 600,
72839
+ fontSize: 14,
72840
+ color: "#283046",
72841
+ lineHeight: "1.4",
72842
+ wordBreak: "break-word"
72843
+ }, children: taskData.subject || 'Không có tiêu đề' })] })] }), cleanDescription && (jsxRuntime.jsx("div", { style: {
72844
+ marginBottom: 10,
72845
+ padding: "8px 10px",
72846
+ backgroundColor: "white",
72847
+ borderRadius: 8,
72848
+ fontSize: 12,
72849
+ color: "#5e5873",
72850
+ lineHeight: "1.5",
72851
+ border: "1px solid #eff1f5",
72852
+ wordBreak: "break-word",
72853
+ whiteSpace: "pre-wrap"
72854
+ }, dangerouslySetInnerHTML: { __html: taskData.description } })), jsxRuntime.jsxs("div", { style: {
72855
+ backgroundColor: "white",
72856
+ borderRadius: 8,
72857
+ padding: "8px 10px",
72858
+ marginBottom: 8,
72859
+ border: "1px solid #eff1f5"
72860
+ }, children: [taskData.createdByName && (jsxRuntime.jsxs("div", { style: { marginBottom: taskData.hostPerson?.length > 0 || taskData.thePerformer?.length > 0 ? 8 : 0 }, children: [jsxRuntime.jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }, children: "Ng\u01B0\u1EDDi t\u1EA1o phi\u1EBFu" }), jsxRuntime.jsxs("div", { className: "d-flex align-items-center", children: [jsxRuntime.jsx(AvatarDefault, { imgWidth: 20, imgHeight: 20, color: "light-primary", className: "me-50", img: taskData?.createdByImg }), jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#283046", fontWeight: 500 }, children: taskData.createdByName })] })] })), taskData.hostPerson && taskData.hostPerson.length > 0 && (jsxRuntime.jsxs("div", { style: { marginBottom: taskData.thePerformer?.length > 0 ? 8 : 0 }, children: [jsxRuntime.jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }, children: "Ng\u01B0\u1EDDi ch\u1EE7 tr\u00EC" }), jsxRuntime.jsxs("div", { className: "d-flex align-items-center flex-wrap", style: { gap: 4 }, children: [taskData.hostPerson.slice(0, 2).map((person, index) => (jsxRuntime.jsxs("div", { className: "d-flex align-items-center", style: {
72861
+ backgroundColor: "#f8f9fa",
72862
+ borderRadius: 6,
72863
+ padding: "3px 6px",
72864
+ marginRight: 4
72865
+ }, children: [jsxRuntime.jsx(AvatarDefault, { imgWidth: 18, imgHeight: 18, color: "light-info", className: "me-50", img: person.img }), jsxRuntime.jsx("span", { style: { fontSize: 11, color: "#5e5873", fontWeight: 500 }, children: person.name || person.fullName || 'N/A' })] }, index))), taskData.hostPerson.length > 2 && (jsxRuntime.jsxs("span", { style: {
72866
+ fontSize: 11,
72867
+ color: "#8b92a7",
72868
+ backgroundColor: "#f8f9fa",
72869
+ padding: "3px 8px",
72870
+ borderRadius: 6,
72871
+ fontWeight: 500
72872
+ }, children: ["+", taskData.hostPerson.length - 2] }))] })] })), taskData.thePerformer && taskData.thePerformer.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }, children: "Ng\u01B0\u1EDDi th\u1EF1c hi\u1EC7n" }), jsxRuntime.jsxs("div", { className: "d-flex align-items-center flex-wrap", style: { gap: 4 }, children: [taskData.thePerformer.slice(0, 2).map((performer, index) => (jsxRuntime.jsxs("div", { className: "d-flex align-items-center", style: {
72873
+ backgroundColor: "#f8f9fa",
72874
+ borderRadius: 6,
72875
+ padding: "3px 6px",
72876
+ marginRight: 4
72877
+ }, children: [jsxRuntime.jsx(AvatarDefault, { imgWidth: 18, imgHeight: 18, color: "light-secondary", className: "me-50", img: performer.img }), jsxRuntime.jsx("span", { style: { fontSize: 11, color: "#5e5873", fontWeight: 500 }, children: performer.name || performer.fullName || 'N/A' })] }, index))), taskData.thePerformer.length > 2 && (jsxRuntime.jsxs("span", { style: {
72878
+ fontSize: 11,
72879
+ color: "#8b92a7",
72880
+ backgroundColor: "#f8f9fa",
72881
+ padding: "3px 8px",
72882
+ borderRadius: 6,
72883
+ fontWeight: 500
72884
+ }, children: ["+", taskData.thePerformer.length - 2] }))] })] }))] }), taskData.dueDate && (jsxRuntime.jsxs("div", { style: {
72885
+ display: "flex",
72886
+ alignItems: "center",
72887
+ justifyContent: "space-between",
72888
+ backgroundColor: "#fff5f5",
72889
+ padding: "6px 10px",
72890
+ borderRadius: 8,
72891
+ marginBottom: 8,
72892
+ border: "1px solid #ffe5e5"
72893
+ }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [jsxRuntime.jsx(SvgClock, { fontSize: 14, style: { color: "#ea5455", marginRight: 6 } }), jsxRuntime.jsx("span", { style: { fontSize: 10, color: "#8b92a7", fontWeight: 500 }, children: "H\u1EA1n ho\u00E0n th\u00E0nh" })] }), jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#ea5455", fontWeight: 600 }, children: moment(taskData.dueDate).format('DD/MM/YYYY HH:mm') })] })), jsxRuntime.jsx("div", { style: {
72894
+ fontSize: 11,
72895
+ color: "#adb5bd",
72896
+ textAlign: "right",
72897
+ fontWeight: 500
72898
+ }, children: moment(chat.time).format("HH:mm") })] }));
72899
+ }, []);
73012
72900
  // const renderChatReminder = useCallback((chat: any) => {
73013
72901
  // let msgContent = chat.msg
73014
72902
  // let timeDisplay = chat.time