hanbiro-react16-sdk 1.0.23 → 1.0.25
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/ChatAIDraft/EmptyState.js +7 -5
- package/dist/components/ChatAIDraft/SettingPopper/ChipGroup.d.ts +11 -0
- package/dist/components/ChatAIDraft/SettingPopper/ChipGroup.js +62 -0
- package/dist/components/ChatAIDraft/SettingPopper/LanguageSelect.d.ts +21 -0
- package/dist/components/ChatAIDraft/SettingPopper/LanguageSelect.js +137 -0
- package/dist/components/ChatAIDraft/SettingPopper/icons.d.ts +3 -0
- package/dist/components/ChatAIDraft/SettingPopper/icons.js +30 -0
- package/dist/components/ChatAIDraft/{SettingPopper.d.ts → SettingPopper/index.d.ts} +1 -2
- package/dist/components/ChatAIDraft/SettingPopper/index.js +185 -0
- package/dist/components/ChatAIDraft/index.d.ts +3 -0
- package/dist/components/ChatAIDraft/index.js +26 -10
- package/dist/hanbiro-react16-sdk.style.css +1 -1
- package/dist/hanbiro-react16-sdk.umd.js +180 -142
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/components/ChatAIDraft/SettingPopper.js +0 -381
|
@@ -38,7 +38,8 @@ const EmptyState = ({
|
|
|
38
38
|
display: "flex",
|
|
39
39
|
flexDirection: "column",
|
|
40
40
|
paddingRight: 8,
|
|
41
|
-
marginRight: -8
|
|
41
|
+
marginRight: -8,
|
|
42
|
+
paddingBottom: 16
|
|
42
43
|
}
|
|
43
44
|
},
|
|
44
45
|
/* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", marginTop: 8 } }, /* @__PURE__ */ React.createElement(
|
|
@@ -68,18 +69,19 @@ const EmptyState = ({
|
|
|
68
69
|
{
|
|
69
70
|
style: {
|
|
70
71
|
alignSelf: "center",
|
|
71
|
-
width:
|
|
72
|
-
height:
|
|
72
|
+
width: 100,
|
|
73
|
+
height: 100,
|
|
73
74
|
borderRadius: "50%",
|
|
74
75
|
background: "var(--primary-lighter)",
|
|
75
76
|
display: "flex",
|
|
76
77
|
alignItems: "center",
|
|
77
78
|
justifyContent: "center",
|
|
78
79
|
margin: "20px 0",
|
|
79
|
-
color: "var(--primary-main)"
|
|
80
|
+
color: "var(--primary-main)",
|
|
81
|
+
flexShrink: 0
|
|
80
82
|
}
|
|
81
83
|
},
|
|
82
|
-
/* @__PURE__ */ React.createElement(CustomAiIcon, { size:
|
|
84
|
+
/* @__PURE__ */ React.createElement(CustomAiIcon, { size: 52, stroke: 1.5 })
|
|
83
85
|
),
|
|
84
86
|
/* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(
|
|
85
87
|
"div",
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { LabelValue } from '../../../types';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
interface ChipGroupProps {
|
|
4
|
+
options: LabelValue[];
|
|
5
|
+
selected: LabelValue | null;
|
|
6
|
+
onSelect: (opt: LabelValue) => void;
|
|
7
|
+
iconMap: Record<string, React.ReactNode>;
|
|
8
|
+
columns?: number;
|
|
9
|
+
}
|
|
10
|
+
declare const ChipGroup: React.FunctionComponent<ChipGroupProps>;
|
|
11
|
+
export default ChipGroup;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const ChipGroup = ({
|
|
3
|
+
options,
|
|
4
|
+
selected,
|
|
5
|
+
onSelect,
|
|
6
|
+
iconMap,
|
|
7
|
+
columns = 3
|
|
8
|
+
}) => {
|
|
9
|
+
return /* @__PURE__ */ React.createElement(
|
|
10
|
+
"div",
|
|
11
|
+
{
|
|
12
|
+
style: {
|
|
13
|
+
display: "grid",
|
|
14
|
+
gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
|
|
15
|
+
gap: 6
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
options.map((opt) => {
|
|
19
|
+
const isActive = (selected == null ? void 0 : selected.value) === opt.value;
|
|
20
|
+
return /* @__PURE__ */ React.createElement(
|
|
21
|
+
"button",
|
|
22
|
+
{
|
|
23
|
+
key: opt.value,
|
|
24
|
+
type: "button",
|
|
25
|
+
onClick: () => onSelect(opt),
|
|
26
|
+
style: {
|
|
27
|
+
display: "flex",
|
|
28
|
+
alignItems: "center",
|
|
29
|
+
justifyContent: "center",
|
|
30
|
+
gap: 6,
|
|
31
|
+
padding: "8px 10px",
|
|
32
|
+
borderRadius: 4,
|
|
33
|
+
border: isActive ? "1px solid var(--primary-main)" : "1px solid var(--border-main)",
|
|
34
|
+
background: isActive ? "var(--primary-lighter)" : "#fff",
|
|
35
|
+
color: isActive ? "var(--primary-main)" : "var(--text-primary)",
|
|
36
|
+
fontWeight: isActive ? 600 : 400,
|
|
37
|
+
fontSize: 13,
|
|
38
|
+
cursor: "pointer",
|
|
39
|
+
fontFamily: "inherit",
|
|
40
|
+
transition: "background 0.15s, border-color 0.15s",
|
|
41
|
+
minWidth: 0
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
/* @__PURE__ */ React.createElement(
|
|
45
|
+
"span",
|
|
46
|
+
{
|
|
47
|
+
style: {
|
|
48
|
+
display: "inline-flex",
|
|
49
|
+
alignItems: "center",
|
|
50
|
+
flexShrink: 0
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
iconMap[opt.value]
|
|
54
|
+
),
|
|
55
|
+
/* @__PURE__ */ React.createElement("span", { style: { whiteSpace: "nowrap" } }, opt.label)
|
|
56
|
+
);
|
|
57
|
+
})
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
export {
|
|
61
|
+
ChipGroup as default
|
|
62
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { LabelValue } from '../../../types';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
interface LanguageSelectProps {
|
|
4
|
+
value: LabelValue | null;
|
|
5
|
+
options: LabelValue[];
|
|
6
|
+
onChange: (opt: LabelValue) => void;
|
|
7
|
+
}
|
|
8
|
+
interface LanguageSelectState {
|
|
9
|
+
open: boolean;
|
|
10
|
+
}
|
|
11
|
+
declare class LanguageSelect extends React.Component<LanguageSelectProps, LanguageSelectState> {
|
|
12
|
+
private ref;
|
|
13
|
+
constructor(props: LanguageSelectProps);
|
|
14
|
+
componentDidMount(): void;
|
|
15
|
+
componentWillUnmount(): void;
|
|
16
|
+
handleClickOutside: (e: MouseEvent) => void;
|
|
17
|
+
toggle: () => void;
|
|
18
|
+
pick: (opt: LabelValue) => void;
|
|
19
|
+
render(): React.JSX.Element;
|
|
20
|
+
}
|
|
21
|
+
export default LanguageSelect;
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { AI_LANG_FLAGS } from "../../../constants/index.js";
|
|
6
|
+
import CountryFlag from "../../CountryFlag/index.js";
|
|
7
|
+
import ChevronDown from "../../../node_modules/react-feather/dist/icons/chevron-down.js";
|
|
8
|
+
const getFlagCode = (value) => {
|
|
9
|
+
var _a;
|
|
10
|
+
return (_a = AI_LANG_FLAGS.find((l) => l.value === value)) == null ? void 0 : _a.flagCode;
|
|
11
|
+
};
|
|
12
|
+
class LanguageSelect extends React.Component {
|
|
13
|
+
constructor(props) {
|
|
14
|
+
super(props);
|
|
15
|
+
__publicField(this, "ref");
|
|
16
|
+
__publicField(this, "handleClickOutside", (e) => {
|
|
17
|
+
if (this.ref.current && !this.ref.current.contains(e.target)) {
|
|
18
|
+
this.setState({ open: false });
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
__publicField(this, "toggle", () => {
|
|
22
|
+
this.setState((s) => ({ open: !s.open }));
|
|
23
|
+
});
|
|
24
|
+
__publicField(this, "pick", (opt) => {
|
|
25
|
+
this.props.onChange(opt);
|
|
26
|
+
this.setState({ open: false });
|
|
27
|
+
});
|
|
28
|
+
this.state = { open: false };
|
|
29
|
+
this.ref = React.createRef();
|
|
30
|
+
}
|
|
31
|
+
componentDidMount() {
|
|
32
|
+
document.addEventListener("mousedown", this.handleClickOutside);
|
|
33
|
+
}
|
|
34
|
+
componentWillUnmount() {
|
|
35
|
+
document.removeEventListener("mousedown", this.handleClickOutside);
|
|
36
|
+
}
|
|
37
|
+
render() {
|
|
38
|
+
const { value, options } = this.props;
|
|
39
|
+
const { open } = this.state;
|
|
40
|
+
const selectedFlag = getFlagCode(value == null ? void 0 : value.value);
|
|
41
|
+
return /* @__PURE__ */ React.createElement("div", { ref: this.ref, style: { position: "relative", width: "100%" } }, /* @__PURE__ */ React.createElement(
|
|
42
|
+
"button",
|
|
43
|
+
{
|
|
44
|
+
type: "button",
|
|
45
|
+
onClick: this.toggle,
|
|
46
|
+
style: {
|
|
47
|
+
width: "100%",
|
|
48
|
+
display: "flex",
|
|
49
|
+
alignItems: "center",
|
|
50
|
+
gap: 8,
|
|
51
|
+
padding: "8px 10px",
|
|
52
|
+
border: "1px solid var(--border-main)",
|
|
53
|
+
borderRadius: 4,
|
|
54
|
+
background: "#fff",
|
|
55
|
+
cursor: "pointer",
|
|
56
|
+
fontFamily: "inherit",
|
|
57
|
+
fontSize: 13,
|
|
58
|
+
color: "var(--text-primary)"
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
selectedFlag && /* @__PURE__ */ React.createElement(
|
|
62
|
+
CountryFlag,
|
|
63
|
+
{
|
|
64
|
+
flagCode: selectedFlag,
|
|
65
|
+
style: { width: 18, height: 14, flexShrink: 0 }
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
/* @__PURE__ */ React.createElement("span", { style: { flex: 1, textAlign: "left" } }, (value == null ? void 0 : value.label) || "Select Language"),
|
|
69
|
+
/* @__PURE__ */ React.createElement(
|
|
70
|
+
ChevronDown,
|
|
71
|
+
{
|
|
72
|
+
size: 14,
|
|
73
|
+
style: {
|
|
74
|
+
transform: open ? "rotate(180deg)" : "none",
|
|
75
|
+
transition: "transform 0.15s"
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
)
|
|
79
|
+
), open && /* @__PURE__ */ React.createElement(
|
|
80
|
+
"div",
|
|
81
|
+
{
|
|
82
|
+
style: {
|
|
83
|
+
position: "absolute",
|
|
84
|
+
top: "calc(100% + 4px)",
|
|
85
|
+
left: 0,
|
|
86
|
+
right: 0,
|
|
87
|
+
maxHeight: 220,
|
|
88
|
+
overflowY: "auto",
|
|
89
|
+
border: "1px solid var(--border-main)",
|
|
90
|
+
borderRadius: 4,
|
|
91
|
+
background: "#fff",
|
|
92
|
+
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
|
|
93
|
+
zIndex: 2
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
options.map((opt) => {
|
|
97
|
+
const fc = getFlagCode(opt.value);
|
|
98
|
+
const isActive = (value == null ? void 0 : value.value) === opt.value;
|
|
99
|
+
return /* @__PURE__ */ React.createElement(
|
|
100
|
+
"button",
|
|
101
|
+
{
|
|
102
|
+
key: opt.value,
|
|
103
|
+
type: "button",
|
|
104
|
+
onClick: () => this.pick(opt),
|
|
105
|
+
className: "chat-ai-lang-option" + (isActive ? " is-active" : ""),
|
|
106
|
+
style: {
|
|
107
|
+
width: "100%",
|
|
108
|
+
display: "flex",
|
|
109
|
+
alignItems: "center",
|
|
110
|
+
gap: 8,
|
|
111
|
+
padding: "8px 10px",
|
|
112
|
+
border: "none",
|
|
113
|
+
background: isActive ? "var(--primary-lighter)" : void 0,
|
|
114
|
+
cursor: "pointer",
|
|
115
|
+
fontFamily: "inherit",
|
|
116
|
+
fontSize: 13,
|
|
117
|
+
textAlign: "left",
|
|
118
|
+
color: "var(--text-primary)",
|
|
119
|
+
fontWeight: 400
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
fc && /* @__PURE__ */ React.createElement(
|
|
123
|
+
CountryFlag,
|
|
124
|
+
{
|
|
125
|
+
flagCode: fc,
|
|
126
|
+
style: { width: 18, height: 14, flexShrink: 0 }
|
|
127
|
+
}
|
|
128
|
+
),
|
|
129
|
+
/* @__PURE__ */ React.createElement("span", null, opt.label)
|
|
130
|
+
);
|
|
131
|
+
})
|
|
132
|
+
));
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
export {
|
|
136
|
+
LanguageSelect as default
|
|
137
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import Frown from "../../../node_modules/react-feather/dist/icons/frown.js";
|
|
3
|
+
import ThumbsUp from "../../../node_modules/react-feather/dist/icons/thumbs-up.js";
|
|
4
|
+
import Smile from "../../../node_modules/react-feather/dist/icons/smile.js";
|
|
5
|
+
import Compass from "../../../node_modules/react-feather/dist/icons/compass.js";
|
|
6
|
+
import Heart from "../../../node_modules/react-feather/dist/icons/heart.js";
|
|
7
|
+
import Award from "../../../node_modules/react-feather/dist/icons/award.js";
|
|
8
|
+
import Zap from "../../../node_modules/react-feather/dist/icons/zap.js";
|
|
9
|
+
import FileText from "../../../node_modules/react-feather/dist/icons/file-text.js";
|
|
10
|
+
import AlignJustify from "../../../node_modules/react-feather/dist/icons/align-justify.js";
|
|
11
|
+
import Scissors from "../../../node_modules/react-feather/dist/icons/scissors.js";
|
|
12
|
+
const ICON_SIZE = 14;
|
|
13
|
+
const TONE_ICONS = {
|
|
14
|
+
formal: /* @__PURE__ */ React.createElement(Award, { size: ICON_SIZE }),
|
|
15
|
+
polite: /* @__PURE__ */ React.createElement(Heart, { size: ICON_SIZE }),
|
|
16
|
+
neutral: /* @__PURE__ */ React.createElement(Compass, { size: ICON_SIZE }),
|
|
17
|
+
friendly: /* @__PURE__ */ React.createElement(Smile, { size: ICON_SIZE }),
|
|
18
|
+
firm: /* @__PURE__ */ React.createElement(ThumbsUp, { size: ICON_SIZE }),
|
|
19
|
+
apologetic: /* @__PURE__ */ React.createElement(Frown, { size: ICON_SIZE })
|
|
20
|
+
};
|
|
21
|
+
const LENGTH_ICONS = {
|
|
22
|
+
short: /* @__PURE__ */ React.createElement(Scissors, { size: ICON_SIZE }),
|
|
23
|
+
medium: /* @__PURE__ */ React.createElement(AlignJustify, { size: ICON_SIZE }),
|
|
24
|
+
long: /* @__PURE__ */ React.createElement(FileText, { size: ICON_SIZE }),
|
|
25
|
+
one_liner: /* @__PURE__ */ React.createElement(Zap, { size: ICON_SIZE })
|
|
26
|
+
};
|
|
27
|
+
export {
|
|
28
|
+
LENGTH_ICONS,
|
|
29
|
+
TONE_ICONS
|
|
30
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LabelValue } from '
|
|
1
|
+
import { LabelValue } from '../../../types';
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
interface SettingPopperProps {
|
|
4
4
|
lang: LabelValue | null;
|
|
@@ -22,7 +22,6 @@ declare class SettingPopper extends React.Component<SettingPopperProps, SettingP
|
|
|
22
22
|
getLanguageOptions: () => Promise<void>;
|
|
23
23
|
handleClickOutside: (event: MouseEvent) => void;
|
|
24
24
|
togglePopper: () => void;
|
|
25
|
-
renderChipGroup: (options: LabelValue[], selected: LabelValue | null, onSelect: (opt: LabelValue) => void, iconMap: Record<string, React.ReactNode>, columns?: number) => React.JSX.Element;
|
|
26
25
|
render(): React.JSX.Element;
|
|
27
26
|
}
|
|
28
27
|
export default SettingPopper;
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
+
var __async = (__this, __arguments, generator) => {
|
|
5
|
+
return new Promise((resolve, reject) => {
|
|
6
|
+
var fulfilled = (value) => {
|
|
7
|
+
try {
|
|
8
|
+
step(generator.next(value));
|
|
9
|
+
} catch (e) {
|
|
10
|
+
reject(e);
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
var rejected = (value) => {
|
|
14
|
+
try {
|
|
15
|
+
step(generator.throw(value));
|
|
16
|
+
} catch (e) {
|
|
17
|
+
reject(e);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
21
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
import * as React from "react";
|
|
25
|
+
import * as ReactDOM from "react-dom";
|
|
26
|
+
import { apiGet } from "../../../utils/api.js";
|
|
27
|
+
import { TONE_OPTIONS, LENGTH_OPTIONS } from "../constants.js";
|
|
28
|
+
import LanguageSelect from "./LanguageSelect.js";
|
|
29
|
+
import ChipGroup from "./ChipGroup.js";
|
|
30
|
+
import { TONE_ICONS, LENGTH_ICONS } from "./icons.js";
|
|
31
|
+
import Settings from "../../../node_modules/react-feather/dist/icons/settings.js";
|
|
32
|
+
class SettingPopper extends React.Component {
|
|
33
|
+
constructor(props) {
|
|
34
|
+
super(props);
|
|
35
|
+
__publicField(this, "containerRef");
|
|
36
|
+
__publicField(this, "popperRef");
|
|
37
|
+
__publicField(this, "getLanguageOptions", () => __async(this, null, function* () {
|
|
38
|
+
var _a;
|
|
39
|
+
const { data } = yield apiGet("/email/ai/langlist");
|
|
40
|
+
if (data == null ? void 0 : data.list) {
|
|
41
|
+
const langs = (_a = Object.keys(data == null ? void 0 : data.list)) == null ? void 0 : _a.map((_key) => {
|
|
42
|
+
var _a2;
|
|
43
|
+
const _item = (_a2 = data == null ? void 0 : data.list) == null ? void 0 : _a2[_key];
|
|
44
|
+
return {
|
|
45
|
+
value: _key,
|
|
46
|
+
label: _item == null ? void 0 : _item.name
|
|
47
|
+
};
|
|
48
|
+
});
|
|
49
|
+
this.setState({ languageOptions: langs });
|
|
50
|
+
}
|
|
51
|
+
}));
|
|
52
|
+
__publicField(this, "handleClickOutside", (event) => {
|
|
53
|
+
const target = event.target;
|
|
54
|
+
if (this.containerRef.current && !this.containerRef.current.contains(target) && (!this.popperRef.current || !this.popperRef.current.contains(target))) {
|
|
55
|
+
this.setState({ open: false });
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
__publicField(this, "togglePopper", () => {
|
|
59
|
+
this.setState((prevState) => ({ open: !prevState.open }));
|
|
60
|
+
});
|
|
61
|
+
this.state = { open: false, languageOptions: [] };
|
|
62
|
+
this.containerRef = React.createRef();
|
|
63
|
+
this.popperRef = React.createRef();
|
|
64
|
+
}
|
|
65
|
+
componentDidMount() {
|
|
66
|
+
document.addEventListener("mousedown", this.handleClickOutside);
|
|
67
|
+
this.getLanguageOptions();
|
|
68
|
+
}
|
|
69
|
+
componentWillUnmount() {
|
|
70
|
+
document.removeEventListener("mousedown", this.handleClickOutside);
|
|
71
|
+
}
|
|
72
|
+
render() {
|
|
73
|
+
const { lang, tone, length, parentRef, setLang, setTone, setLength } = this.props;
|
|
74
|
+
const { open, languageOptions } = this.state;
|
|
75
|
+
let popperTop = 0;
|
|
76
|
+
let popperLeft = 0;
|
|
77
|
+
let popperWidth = 320;
|
|
78
|
+
if (open && this.containerRef.current) {
|
|
79
|
+
const rect = this.containerRef.current.getBoundingClientRect();
|
|
80
|
+
popperTop = rect.top + (window.scrollY || document.documentElement.scrollTop) - 8;
|
|
81
|
+
popperLeft = rect.left + (window.scrollX || document.documentElement.scrollLeft);
|
|
82
|
+
if (parentRef && parentRef.current) {
|
|
83
|
+
const parentRect = parentRef.current.getBoundingClientRect();
|
|
84
|
+
popperWidth = parentRect.width - 16;
|
|
85
|
+
popperLeft = parentRect.left + 8;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
return /* @__PURE__ */ React.createElement(
|
|
89
|
+
"div",
|
|
90
|
+
{
|
|
91
|
+
ref: this.containerRef,
|
|
92
|
+
style: { position: "relative", display: "inline-block" }
|
|
93
|
+
},
|
|
94
|
+
/* @__PURE__ */ React.createElement(
|
|
95
|
+
"button",
|
|
96
|
+
{
|
|
97
|
+
type: "button",
|
|
98
|
+
onClick: this.togglePopper,
|
|
99
|
+
className: "icon-button small"
|
|
100
|
+
},
|
|
101
|
+
/* @__PURE__ */ React.createElement(Settings, { size: 16 })
|
|
102
|
+
),
|
|
103
|
+
open && this.containerRef.current && ReactDOM.createPortal(
|
|
104
|
+
/* @__PURE__ */ React.createElement(
|
|
105
|
+
"div",
|
|
106
|
+
{
|
|
107
|
+
ref: this.popperRef,
|
|
108
|
+
style: {
|
|
109
|
+
position: "absolute",
|
|
110
|
+
top: popperTop,
|
|
111
|
+
left: popperLeft,
|
|
112
|
+
transform: "translateY(-100%)",
|
|
113
|
+
zIndex: 1051,
|
|
114
|
+
background: "#fff",
|
|
115
|
+
border: "1px solid #ddd",
|
|
116
|
+
boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
|
|
117
|
+
borderRadius: 8,
|
|
118
|
+
padding: 16,
|
|
119
|
+
width: popperWidth,
|
|
120
|
+
boxSizing: "border-box"
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
/* @__PURE__ */ React.createElement(
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
style: { display: "flex", flexDirection: "column", gap: 12 }
|
|
127
|
+
},
|
|
128
|
+
/* @__PURE__ */ React.createElement(
|
|
129
|
+
"div",
|
|
130
|
+
{
|
|
131
|
+
style: { display: "flex", flexDirection: "column", gap: 6 }
|
|
132
|
+
},
|
|
133
|
+
/* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Language"),
|
|
134
|
+
/* @__PURE__ */ React.createElement(
|
|
135
|
+
LanguageSelect,
|
|
136
|
+
{
|
|
137
|
+
value: lang,
|
|
138
|
+
options: languageOptions,
|
|
139
|
+
onChange: (opt) => setLang(opt)
|
|
140
|
+
}
|
|
141
|
+
)
|
|
142
|
+
),
|
|
143
|
+
/* @__PURE__ */ React.createElement(
|
|
144
|
+
"div",
|
|
145
|
+
{
|
|
146
|
+
style: { display: "flex", flexDirection: "column", gap: 6 }
|
|
147
|
+
},
|
|
148
|
+
/* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Tone"),
|
|
149
|
+
/* @__PURE__ */ React.createElement(
|
|
150
|
+
ChipGroup,
|
|
151
|
+
{
|
|
152
|
+
options: TONE_OPTIONS,
|
|
153
|
+
selected: tone,
|
|
154
|
+
onSelect: (opt) => setTone(opt),
|
|
155
|
+
iconMap: TONE_ICONS
|
|
156
|
+
}
|
|
157
|
+
)
|
|
158
|
+
),
|
|
159
|
+
/* @__PURE__ */ React.createElement(
|
|
160
|
+
"div",
|
|
161
|
+
{
|
|
162
|
+
style: { display: "flex", flexDirection: "column", gap: 6 }
|
|
163
|
+
},
|
|
164
|
+
/* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Length"),
|
|
165
|
+
/* @__PURE__ */ React.createElement(
|
|
166
|
+
ChipGroup,
|
|
167
|
+
{
|
|
168
|
+
options: LENGTH_OPTIONS,
|
|
169
|
+
selected: length,
|
|
170
|
+
onSelect: (opt) => setLength(opt),
|
|
171
|
+
iconMap: LENGTH_ICONS,
|
|
172
|
+
columns: 4
|
|
173
|
+
}
|
|
174
|
+
)
|
|
175
|
+
)
|
|
176
|
+
)
|
|
177
|
+
),
|
|
178
|
+
document.body
|
|
179
|
+
)
|
|
180
|
+
);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
export {
|
|
184
|
+
SettingPopper as default
|
|
185
|
+
};
|
|
@@ -26,8 +26,11 @@ interface AIPaneState {
|
|
|
26
26
|
}
|
|
27
27
|
declare class ChatAIDraft extends React.Component<ChatAIDraftProps, AIPaneState> {
|
|
28
28
|
private rootRef;
|
|
29
|
+
private textareaRef;
|
|
29
30
|
constructor(props: ChatAIDraftProps);
|
|
31
|
+
adjustTextareaHeight: () => void;
|
|
30
32
|
handleMessageChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
33
|
+
componentDidUpdate(_: ChatAIDraftProps, prevState: AIPaneState): void;
|
|
31
34
|
handleSubmit: () => Promise<void>;
|
|
32
35
|
handleKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
|
|
33
36
|
setLang: (lang: LabelValue | null) => void;
|
|
@@ -42,7 +42,7 @@ import * as React from "react";
|
|
|
42
42
|
import { callAI } from "./helper.js";
|
|
43
43
|
import List from "./List.js";
|
|
44
44
|
import EmptyState from "./EmptyState.js";
|
|
45
|
-
import SettingPopper from "./SettingPopper.js";
|
|
45
|
+
import SettingPopper from "./SettingPopper/index.js";
|
|
46
46
|
import { LENGTH_OPTIONS, TONE_OPTIONS } from "./constants.js";
|
|
47
47
|
import { AI_LANG_FLAGS } from "../../constants/index.js";
|
|
48
48
|
import CountryFlag from "../CountryFlag/index.js";
|
|
@@ -53,8 +53,15 @@ class ChatAIDraft extends React.Component {
|
|
|
53
53
|
var _a;
|
|
54
54
|
super(props);
|
|
55
55
|
__publicField(this, "rootRef");
|
|
56
|
+
__publicField(this, "textareaRef");
|
|
57
|
+
__publicField(this, "adjustTextareaHeight", () => {
|
|
58
|
+
const el = this.textareaRef.current;
|
|
59
|
+
if (!el) return;
|
|
60
|
+
el.style.height = "auto";
|
|
61
|
+
el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
|
|
62
|
+
});
|
|
56
63
|
__publicField(this, "handleMessageChange", (e) => {
|
|
57
|
-
this.setState({ message: e.target.value });
|
|
64
|
+
this.setState({ message: e.target.value }, this.adjustTextareaHeight);
|
|
58
65
|
});
|
|
59
66
|
__publicField(this, "handleSubmit", () => __async(this, null, function* () {
|
|
60
67
|
const { message, messages, lang, tone, length, conversationId } = this.state;
|
|
@@ -135,6 +142,7 @@ class ChatAIDraft extends React.Component {
|
|
|
135
142
|
this.setState({ length });
|
|
136
143
|
});
|
|
137
144
|
this.rootRef = React.createRef();
|
|
145
|
+
this.textareaRef = React.createRef();
|
|
138
146
|
const lang = ((_a = AI_LANG_FLAGS) == null ? void 0 : _a.find((_item) => (_item == null ? void 0 : _item.value) === (props == null ? void 0 : props.defaultLang))) || AI_LANG_FLAGS[0];
|
|
139
147
|
this.state = {
|
|
140
148
|
message: "",
|
|
@@ -143,11 +151,16 @@ class ChatAIDraft extends React.Component {
|
|
|
143
151
|
lang,
|
|
144
152
|
tone: TONE_OPTIONS[2],
|
|
145
153
|
// Neutral
|
|
146
|
-
length: LENGTH_OPTIONS[
|
|
147
|
-
//
|
|
154
|
+
length: LENGTH_OPTIONS[2],
|
|
155
|
+
// Long
|
|
148
156
|
conversationId: ""
|
|
149
157
|
};
|
|
150
158
|
}
|
|
159
|
+
componentDidUpdate(_, prevState) {
|
|
160
|
+
if (prevState.message !== this.state.message) {
|
|
161
|
+
this.adjustTextareaHeight();
|
|
162
|
+
}
|
|
163
|
+
}
|
|
151
164
|
render() {
|
|
152
165
|
var _a, _b;
|
|
153
166
|
const { onApply, getEditorContent } = this.props;
|
|
@@ -191,18 +204,21 @@ class ChatAIDraft extends React.Component {
|
|
|
191
204
|
overflow: "hidden",
|
|
192
205
|
background: "var(--background-softGrey)",
|
|
193
206
|
display: "flex",
|
|
194
|
-
flexDirection: "column"
|
|
207
|
+
flexDirection: "column",
|
|
208
|
+
border: "1px solid var(--border-light)"
|
|
195
209
|
}
|
|
196
210
|
},
|
|
197
211
|
/* @__PURE__ */ React.createElement(
|
|
198
212
|
"textarea",
|
|
199
213
|
{
|
|
214
|
+
ref: this.textareaRef,
|
|
200
215
|
value: message,
|
|
201
216
|
onChange: this.handleMessageChange,
|
|
202
|
-
placeholder: "Describe your email",
|
|
217
|
+
placeholder: "Describe your email...",
|
|
203
218
|
name: "ai-content",
|
|
204
219
|
onKeyDown: this.handleKeyDown,
|
|
205
220
|
disabled: isSending,
|
|
221
|
+
rows: 1,
|
|
206
222
|
style: {
|
|
207
223
|
flex: 1,
|
|
208
224
|
minWidth: 0,
|
|
@@ -211,9 +227,9 @@ class ChatAIDraft extends React.Component {
|
|
|
211
227
|
border: "none",
|
|
212
228
|
resize: "none",
|
|
213
229
|
outline: "none",
|
|
214
|
-
minHeight: 60,
|
|
215
230
|
fontFamily: "inherit",
|
|
216
|
-
background: "transparent"
|
|
231
|
+
background: "transparent",
|
|
232
|
+
overflowY: "auto"
|
|
217
233
|
}
|
|
218
234
|
}
|
|
219
235
|
),
|
|
@@ -288,8 +304,8 @@ class ChatAIDraft extends React.Component {
|
|
|
288
304
|
onClick: this.handleSubmit,
|
|
289
305
|
style: {
|
|
290
306
|
marginLeft: "auto",
|
|
291
|
-
width:
|
|
292
|
-
height:
|
|
307
|
+
width: 28,
|
|
308
|
+
height: 28,
|
|
293
309
|
borderRadius: "50%",
|
|
294
310
|
border: "none",
|
|
295
311
|
display: "flex",
|