@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.mjs CHANGED
@@ -36735,6 +36735,14 @@ var SvgBell = function (_a) {
36735
36735
  React.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" })));
36736
36736
  };
36737
36737
 
36738
+ var SvgClock = function (_a) {
36739
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36740
+ return (React.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),
36741
+ title ? React.createElement("title", { id: titleId }, title) : null,
36742
+ React.createElement("circle", { cx: 12, cy: 12, r: 10 }),
36743
+ React.createElement("path", { d: "M12 6v6l4 2" })));
36744
+ };
36745
+
36738
36746
  var SvgCopy = function (_a) {
36739
36747
  var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36740
36748
  return (React.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),
@@ -72749,229 +72757,109 @@ const ChatLog = (props) => {
72749
72757
  return (jsxs("div", { children: [jsxs("div", { className: "d-flex p-50", children: [jsx("div", { className: "me-1", onClick: () => handlePreview(file), children: jsx(IconFileTypeColor, { fileType: file?.type, width: 35 }) }), jsxs("div", { children: [jsx("p", { className: "file-name-chat", children: file.name }), jsx("p", { children: formatBytes({ size: file.size }) })] })] }), index + 1 === files.length && (jsx("div", { className: "px-1 pb-75", children: moment(chat.time).format("HH:mm") }))] }, index));
72750
72758
  }) }));
72751
72759
  }, [handlePreview]);
72752
- // const renderTaskApplication = useCallback((chat: any) => {
72753
- // const safeParse = (str: any) => {
72754
- // if (!str) { return {} }
72755
- // try {
72756
- // return typeof str === 'string' ? JSON.parse(str) : str
72757
- // } catch (err) {
72758
- // //console.error('JSON parse error:', err)
72759
- // return {}
72760
- // }
72761
- // }
72762
- // // Helper function to strip HTML tags and get clean text
72763
- // const stripHtml = (html: string) => {
72764
- // if (!html) { return '' }
72765
- // const tmp = document.createElement('div')
72766
- // tmp.innerHTML = html
72767
- // return tmp.textContent || tmp.innerText || ''
72768
- // }
72769
- // const taskData = safeParse(chat.msg)
72770
- // const cleanDescription = taskData.description ? stripHtml(taskData.description) : ''
72771
- // return (
72772
- // <div
72773
- // style={{
72774
- // width: 320,
72775
- // backgroundColor: "#f8f9fa",
72776
- // borderRadius: 12,
72777
- // border: "1px solid #e3e8ef",
72778
- // padding: "12px",
72779
- // boxShadow: "0 2px 4px rgba(0,0,0,0.04)"
72780
- // }}
72781
- // >
72782
- // {/* Header với icon và tiêu đề */}
72783
- // <div className="d-flex align-items-start" style={{ marginBottom: 10 }}>
72784
- // <div style={{
72785
- // backgroundColor: "#e7f3ff",
72786
- // borderRadius: 8,
72787
- // padding: 6,
72788
- // display: "flex",
72789
- // alignItems: "center",
72790
- // justifyContent: "center",
72791
- // marginRight: 8,
72792
- // flexShrink: 0
72793
- // }}>
72794
- // <BecoxyWriting color="#006edc" fontSize={24} />
72795
- // </div>
72796
- // <div style={{ flex: 1, minWidth: 0 }}>
72797
- // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 2, fontWeight: 500 }}>
72798
- // Công việc
72799
- // </div>
72800
- // <div style={{
72801
- // fontWeight: 600,
72802
- // fontSize: 14,
72803
- // color: "#283046",
72804
- // lineHeight: "1.4",
72805
- // wordBreak: "break-word"
72806
- // }}>
72807
- // {taskData.subject || 'Không có tiêu đề'}
72808
- // </div>
72809
- // </div>
72810
- // </div>
72811
- // {/* Nội dung */}
72812
- // {cleanDescription && (
72813
- // <div
72814
- // style={{
72815
- // marginBottom: 10,
72816
- // padding: "8px 10px",
72817
- // backgroundColor: "white",
72818
- // borderRadius: 8,
72819
- // fontSize: 12,
72820
- // color: "#5e5873",
72821
- // lineHeight: "1.5",
72822
- // border: "1px solid #eff1f5",
72823
- // wordBreak: "break-word",
72824
- // whiteSpace: "pre-wrap"
72825
- // }}
72826
- // dangerouslySetInnerHTML={{ __html: taskData.description }}
72827
- // />
72828
- // )}
72829
- // {/* Thông tin người tham gia */}
72830
- // <div style={{
72831
- // backgroundColor: "white",
72832
- // borderRadius: 8,
72833
- // padding: "8px 10px",
72834
- // marginBottom: 8,
72835
- // border: "1px solid #eff1f5"
72836
- // }}>
72837
- // {/* Người tạo phiếu */}
72838
- // {taskData.createdByName && (
72839
- // <div style={{ marginBottom: taskData.hostPerson?.length > 0 || taskData.thePerformer?.length > 0 ? 8 : 0 }}>
72840
- // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
72841
- // Người tạo phiếu
72842
- // </div>
72843
- // <div className="d-flex align-items-center">
72844
- // <AvatarDefault
72845
- // imgWidth={20}
72846
- // imgHeight={20}
72847
- // color="light-primary"
72848
- // className="me-50"
72849
- // img={taskData?.createdByImg}
72850
- // />
72851
- // <span style={{ fontSize: 12, color: "#283046", fontWeight: 500 }}>
72852
- // {taskData.createdByName}
72853
- // </span>
72854
- // </div>
72855
- // </div>
72856
- // )}
72857
- // {/* Người chủ trì */}
72858
- // {taskData.hostPerson && taskData.hostPerson.length > 0 && (
72859
- // <div style={{ marginBottom: taskData.thePerformer?.length > 0 ? 8 : 0 }}>
72860
- // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
72861
- // Người chủ trì
72862
- // </div>
72863
- // <div className="d-flex align-items-center flex-wrap" style={{ gap: 4 }}>
72864
- // {taskData.hostPerson.slice(0, 2).map((person: any, index: number) => (
72865
- // <div key={index} className="d-flex align-items-center" style={{
72866
- // backgroundColor: "#f8f9fa",
72867
- // borderRadius: 6,
72868
- // padding: "3px 6px",
72869
- // marginRight: 4
72870
- // }}>
72871
- // <AvatarDefault
72872
- // imgWidth={18}
72873
- // imgHeight={18}
72874
- // color="light-info"
72875
- // className="me-50"
72876
- // img={person.img}
72877
- // />
72878
- // <span style={{ fontSize: 11, color: "#5e5873", fontWeight: 500 }}>
72879
- // {person.name || person.fullName || 'N/A'}
72880
- // </span>
72881
- // </div>
72882
- // ))}
72883
- // {taskData.hostPerson.length > 2 && (
72884
- // <span style={{
72885
- // fontSize: 11,
72886
- // color: "#8b92a7",
72887
- // backgroundColor: "#f8f9fa",
72888
- // padding: "3px 8px",
72889
- // borderRadius: 6,
72890
- // fontWeight: 500
72891
- // }}>
72892
- // +{taskData.hostPerson.length - 2}
72893
- // </span>
72894
- // )}
72895
- // </div>
72896
- // </div>
72897
- // )}
72898
- // {/* Người thực hiện */}
72899
- // {taskData.thePerformer && taskData.thePerformer.length > 0 && (
72900
- // <div>
72901
- // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
72902
- // Người thực hiện
72903
- // </div>
72904
- // <div className="d-flex align-items-center flex-wrap" style={{ gap: 4 }}>
72905
- // {taskData.thePerformer.slice(0, 2).map((performer: any, index: number) => (
72906
- // <div key={index} className="d-flex align-items-center" style={{
72907
- // backgroundColor: "#f8f9fa",
72908
- // borderRadius: 6,
72909
- // padding: "3px 6px",
72910
- // marginRight: 4
72911
- // }}>
72912
- // <AvatarDefault
72913
- // imgWidth={18}
72914
- // imgHeight={18}
72915
- // color="light-secondary"
72916
- // className="me-50"
72917
- // img={performer.img}
72918
- // />
72919
- // <span style={{ fontSize: 11, color: "#5e5873", fontWeight: 500 }}>
72920
- // {performer.name || performer.fullName || 'N/A'}
72921
- // </span>
72922
- // </div>
72923
- // ))}
72924
- // {taskData.thePerformer.length > 2 && (
72925
- // <span style={{
72926
- // fontSize: 11,
72927
- // color: "#8b92a7",
72928
- // backgroundColor: "#f8f9fa",
72929
- // padding: "3px 8px",
72930
- // borderRadius: 6,
72931
- // fontWeight: 500
72932
- // }}>
72933
- // +{taskData.thePerformer.length - 2}
72934
- // </span>
72935
- // )}
72936
- // </div>
72937
- // </div>
72938
- // )}
72939
- // </div>
72940
- // {/* Hạn hoàn thành */}
72941
- // {taskData.dueDate && (
72942
- // <div style={{
72943
- // display: "flex",
72944
- // alignItems: "center",
72945
- // justifyContent: "space-between",
72946
- // backgroundColor: "#fff5f5",
72947
- // padding: "6px 10px",
72948
- // borderRadius: 8,
72949
- // marginBottom: 8,
72950
- // border: "1px solid #ffe5e5"
72951
- // }}>
72952
- // <div style={{ display: "flex", alignItems: "center" }}>
72953
- // <Clock fontSize={14} style={{ color: "#ea5455", marginRight: 6 }} />
72954
- // <span style={{ fontSize: 10, color: "#8b92a7", fontWeight: 500 }}>
72955
- // Hạn hoàn thành
72956
- // </span>
72957
- // </div>
72958
- // <span style={{ fontSize: 12, color: "#ea5455", fontWeight: 600 }}>
72959
- // {moment(taskData.dueDate).format('DD/MM/YYYY HH:mm')}
72960
- // </span>
72961
- // </div>
72962
- // )}
72963
- // {/* Footer time */}
72964
- // <div style={{
72965
- // fontSize: 11,
72966
- // color: "#adb5bd",
72967
- // textAlign: "right",
72968
- // fontWeight: 500
72969
- // }}>
72970
- // {moment(chat.time).format("HH:mm")}
72971
- // </div>
72972
- // </div>
72973
- // )
72974
- // }, [])
72760
+ useCallback((chat) => {
72761
+ const safeParse = (str) => {
72762
+ if (!str) {
72763
+ return {};
72764
+ }
72765
+ try {
72766
+ return typeof str === 'string' ? JSON.parse(str) : str;
72767
+ }
72768
+ catch (err) {
72769
+ //console.error('JSON parse error:', err)
72770
+ return {};
72771
+ }
72772
+ };
72773
+ // Helper function to strip HTML tags and get clean text
72774
+ const stripHtml = (html) => {
72775
+ if (!html) {
72776
+ return '';
72777
+ }
72778
+ const tmp = document.createElement('div');
72779
+ tmp.innerHTML = html;
72780
+ return tmp.textContent || tmp.innerText || '';
72781
+ };
72782
+ const taskData = safeParse(chat.msg);
72783
+ const cleanDescription = taskData.description ? stripHtml(taskData.description) : '';
72784
+ return (jsxs("div", { style: {
72785
+ width: 320,
72786
+ backgroundColor: "#f8f9fa",
72787
+ borderRadius: 12,
72788
+ border: "1px solid #e3e8ef",
72789
+ padding: "12px",
72790
+ boxShadow: "0 2px 4px rgba(0,0,0,0.04)"
72791
+ }, children: [jsxs("div", { className: "d-flex align-items-start", style: { marginBottom: 10 }, children: [jsx("div", { style: {
72792
+ backgroundColor: "#e7f3ff",
72793
+ borderRadius: 8,
72794
+ padding: 6,
72795
+ display: "flex",
72796
+ alignItems: "center",
72797
+ justifyContent: "center",
72798
+ marginRight: 8,
72799
+ flexShrink: 0
72800
+ }, children: jsx(SvgBecoxyWriting, { color: "#006edc", fontSize: 24 }) }), jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 2, fontWeight: 500 }, children: "C\u00F4ng vi\u1EC7c" }), jsx("div", { style: {
72801
+ fontWeight: 600,
72802
+ fontSize: 14,
72803
+ color: "#283046",
72804
+ lineHeight: "1.4",
72805
+ wordBreak: "break-word"
72806
+ }, children: taskData.subject || 'Không có tiêu đề' })] })] }), cleanDescription && (jsx("div", { style: {
72807
+ marginBottom: 10,
72808
+ padding: "8px 10px",
72809
+ backgroundColor: "white",
72810
+ borderRadius: 8,
72811
+ fontSize: 12,
72812
+ color: "#5e5873",
72813
+ lineHeight: "1.5",
72814
+ border: "1px solid #eff1f5",
72815
+ wordBreak: "break-word",
72816
+ whiteSpace: "pre-wrap"
72817
+ }, dangerouslySetInnerHTML: { __html: taskData.description } })), jsxs("div", { style: {
72818
+ backgroundColor: "white",
72819
+ borderRadius: 8,
72820
+ padding: "8px 10px",
72821
+ marginBottom: 8,
72822
+ border: "1px solid #eff1f5"
72823
+ }, children: [taskData.createdByName && (jsxs("div", { style: { marginBottom: taskData.hostPerson?.length > 0 || taskData.thePerformer?.length > 0 ? 8 : 0 }, children: [jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }, children: "Ng\u01B0\u1EDDi t\u1EA1o phi\u1EBFu" }), jsxs("div", { className: "d-flex align-items-center", children: [jsx(AvatarDefault, { imgWidth: 20, imgHeight: 20, color: "light-primary", className: "me-50", img: taskData?.createdByImg }), jsx("span", { style: { fontSize: 12, color: "#283046", fontWeight: 500 }, children: taskData.createdByName })] })] })), taskData.hostPerson && taskData.hostPerson.length > 0 && (jsxs("div", { style: { marginBottom: taskData.thePerformer?.length > 0 ? 8 : 0 }, children: [jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }, children: "Ng\u01B0\u1EDDi ch\u1EE7 tr\u00EC" }), jsxs("div", { className: "d-flex align-items-center flex-wrap", style: { gap: 4 }, children: [taskData.hostPerson.slice(0, 2).map((person, index) => (jsxs("div", { className: "d-flex align-items-center", style: {
72824
+ backgroundColor: "#f8f9fa",
72825
+ borderRadius: 6,
72826
+ padding: "3px 6px",
72827
+ marginRight: 4
72828
+ }, children: [jsx(AvatarDefault, { imgWidth: 18, imgHeight: 18, color: "light-info", className: "me-50", img: person.img }), jsx("span", { style: { fontSize: 11, color: "#5e5873", fontWeight: 500 }, children: person.name || person.fullName || 'N/A' })] }, index))), taskData.hostPerson.length > 2 && (jsxs("span", { style: {
72829
+ fontSize: 11,
72830
+ color: "#8b92a7",
72831
+ backgroundColor: "#f8f9fa",
72832
+ padding: "3px 8px",
72833
+ borderRadius: 6,
72834
+ fontWeight: 500
72835
+ }, children: ["+", taskData.hostPerson.length - 2] }))] })] })), taskData.thePerformer && taskData.thePerformer.length > 0 && (jsxs("div", { children: [jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }, children: "Ng\u01B0\u1EDDi th\u1EF1c hi\u1EC7n" }), jsxs("div", { className: "d-flex align-items-center flex-wrap", style: { gap: 4 }, children: [taskData.thePerformer.slice(0, 2).map((performer, index) => (jsxs("div", { className: "d-flex align-items-center", style: {
72836
+ backgroundColor: "#f8f9fa",
72837
+ borderRadius: 6,
72838
+ padding: "3px 6px",
72839
+ marginRight: 4
72840
+ }, children: [jsx(AvatarDefault, { imgWidth: 18, imgHeight: 18, color: "light-secondary", className: "me-50", img: performer.img }), jsx("span", { style: { fontSize: 11, color: "#5e5873", fontWeight: 500 }, children: performer.name || performer.fullName || 'N/A' })] }, index))), taskData.thePerformer.length > 2 && (jsxs("span", { style: {
72841
+ fontSize: 11,
72842
+ color: "#8b92a7",
72843
+ backgroundColor: "#f8f9fa",
72844
+ padding: "3px 8px",
72845
+ borderRadius: 6,
72846
+ fontWeight: 500
72847
+ }, children: ["+", taskData.thePerformer.length - 2] }))] })] }))] }), taskData.dueDate && (jsxs("div", { style: {
72848
+ display: "flex",
72849
+ alignItems: "center",
72850
+ justifyContent: "space-between",
72851
+ backgroundColor: "#fff5f5",
72852
+ padding: "6px 10px",
72853
+ borderRadius: 8,
72854
+ marginBottom: 8,
72855
+ border: "1px solid #ffe5e5"
72856
+ }, children: [jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [jsx(SvgClock, { fontSize: 14, style: { color: "#ea5455", marginRight: 6 } }), jsx("span", { style: { fontSize: 10, color: "#8b92a7", fontWeight: 500 }, children: "H\u1EA1n ho\u00E0n th\u00E0nh" })] }), jsx("span", { style: { fontSize: 12, color: "#ea5455", fontWeight: 600 }, children: moment(taskData.dueDate).format('DD/MM/YYYY HH:mm') })] })), jsx("div", { style: {
72857
+ fontSize: 11,
72858
+ color: "#adb5bd",
72859
+ textAlign: "right",
72860
+ fontWeight: 500
72861
+ }, children: moment(chat.time).format("HH:mm") })] }));
72862
+ }, []);
72975
72863
  // const renderChatReminder = useCallback((chat: any) => {
72976
72864
  // let msgContent = chat.msg
72977
72865
  // let timeDisplay = chat.time