@meetsmore-oss/use-ai-client 1.2.2 → 1.2.4
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/bundled.js +81 -67
- package/dist/bundled.js.map +1 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.js +81 -67
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -50,8 +50,6 @@ var defaultStrings = {
|
|
|
50
50
|
placeholder: "Type a message...",
|
|
51
51
|
/** Input placeholder when connecting */
|
|
52
52
|
connectingPlaceholder: "Connecting...",
|
|
53
|
-
/** Send button text */
|
|
54
|
-
send: "Send",
|
|
55
53
|
/** Loading indicator text */
|
|
56
54
|
thinking: "Thinking"
|
|
57
55
|
},
|
|
@@ -1270,6 +1268,7 @@ function UseAIChatPanel({
|
|
|
1270
1268
|
const [chatHistory, setChatHistory] = useState4([]);
|
|
1271
1269
|
const messagesEndRef = useRef4(null);
|
|
1272
1270
|
const [displayedSuggestions, setDisplayedSuggestions] = useState4([]);
|
|
1271
|
+
const textareaRef = useRef4(null);
|
|
1273
1272
|
const [hoveredMessageId, setHoveredMessageId] = useState4(null);
|
|
1274
1273
|
const {
|
|
1275
1274
|
attachments,
|
|
@@ -1298,6 +1297,14 @@ function UseAIChatPanel({
|
|
|
1298
1297
|
useEffect4(() => {
|
|
1299
1298
|
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
1300
1299
|
}, [messages]);
|
|
1300
|
+
const maxTextareaHeight = 160;
|
|
1301
|
+
useEffect4(() => {
|
|
1302
|
+
const textarea = textareaRef.current;
|
|
1303
|
+
if (!textarea) return;
|
|
1304
|
+
textarea.style.height = "auto";
|
|
1305
|
+
const newHeight = Math.min(textarea.scrollHeight, maxTextareaHeight);
|
|
1306
|
+
textarea.style.height = `${newHeight}px`;
|
|
1307
|
+
}, [input]);
|
|
1301
1308
|
useEffect4(() => {
|
|
1302
1309
|
if (!suggestions || suggestions.length === 0) {
|
|
1303
1310
|
setDisplayedSuggestions([]);
|
|
@@ -1973,8 +1980,10 @@ function UseAIChatPanel({
|
|
|
1973
1980
|
"div",
|
|
1974
1981
|
{
|
|
1975
1982
|
style: {
|
|
1976
|
-
|
|
1977
|
-
|
|
1983
|
+
border: `1px solid ${theme.borderColor}`,
|
|
1984
|
+
borderRadius: "12px",
|
|
1985
|
+
background: theme.backgroundColor,
|
|
1986
|
+
overflow: "hidden",
|
|
1978
1987
|
position: "relative"
|
|
1979
1988
|
},
|
|
1980
1989
|
children: [
|
|
@@ -1990,106 +1999,111 @@ function UseAIChatPanel({
|
|
|
1990
1999
|
accept: acceptedTypes?.join(",")
|
|
1991
2000
|
}
|
|
1992
2001
|
),
|
|
2002
|
+
/* @__PURE__ */ jsx8(
|
|
2003
|
+
"textarea",
|
|
2004
|
+
{
|
|
2005
|
+
ref: textareaRef,
|
|
2006
|
+
"data-testid": "chat-input",
|
|
2007
|
+
className: "chat-input",
|
|
2008
|
+
value: input,
|
|
2009
|
+
onChange: handleInputChange,
|
|
2010
|
+
onKeyDown: handleKeyDown,
|
|
2011
|
+
placeholder: connected ? strings.input.placeholder : strings.input.connectingPlaceholder,
|
|
2012
|
+
disabled: !connected || loading,
|
|
2013
|
+
rows: 1,
|
|
2014
|
+
style: {
|
|
2015
|
+
width: "100%",
|
|
2016
|
+
padding: "10px 14px 6px",
|
|
2017
|
+
border: "none",
|
|
2018
|
+
fontSize: "14px",
|
|
2019
|
+
lineHeight: "1.4",
|
|
2020
|
+
resize: "none",
|
|
2021
|
+
maxHeight: `${maxTextareaHeight}px`,
|
|
2022
|
+
fontFamily: "inherit",
|
|
2023
|
+
outline: "none",
|
|
2024
|
+
background: "transparent",
|
|
2025
|
+
overflowY: "auto",
|
|
2026
|
+
boxSizing: "border-box"
|
|
2027
|
+
}
|
|
2028
|
+
}
|
|
2029
|
+
),
|
|
1993
2030
|
/* @__PURE__ */ jsxs5(
|
|
1994
2031
|
"div",
|
|
1995
2032
|
{
|
|
1996
2033
|
style: {
|
|
1997
|
-
flex: 1,
|
|
1998
2034
|
display: "flex",
|
|
1999
2035
|
alignItems: "center",
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
background: theme.backgroundColor,
|
|
2003
|
-
overflow: "hidden"
|
|
2036
|
+
justifyContent: "space-between",
|
|
2037
|
+
padding: "4px 8px"
|
|
2004
2038
|
},
|
|
2005
2039
|
children: [
|
|
2006
|
-
/* @__PURE__ */ jsx8(
|
|
2007
|
-
"textarea",
|
|
2008
|
-
{
|
|
2009
|
-
"data-testid": "chat-input",
|
|
2010
|
-
className: "chat-input",
|
|
2011
|
-
value: input,
|
|
2012
|
-
onChange: handleInputChange,
|
|
2013
|
-
onKeyDown: handleKeyDown,
|
|
2014
|
-
placeholder: connected ? strings.input.placeholder : strings.input.connectingPlaceholder,
|
|
2015
|
-
disabled: !connected || loading,
|
|
2016
|
-
style: {
|
|
2017
|
-
flex: 1,
|
|
2018
|
-
padding: "10px 12px",
|
|
2019
|
-
border: "none",
|
|
2020
|
-
fontSize: "14px",
|
|
2021
|
-
resize: "none",
|
|
2022
|
-
minHeight: "44px",
|
|
2023
|
-
maxHeight: "120px",
|
|
2024
|
-
fontFamily: "inherit",
|
|
2025
|
-
outline: "none",
|
|
2026
|
-
background: "transparent"
|
|
2027
|
-
},
|
|
2028
|
-
rows: 1
|
|
2029
|
-
}
|
|
2030
|
-
),
|
|
2031
|
-
fileUploadEnabled && /* @__PURE__ */ jsx8(
|
|
2040
|
+
/* @__PURE__ */ jsx8("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: fileUploadEnabled && /* @__PURE__ */ jsx8(
|
|
2032
2041
|
"button",
|
|
2033
2042
|
{
|
|
2034
2043
|
"data-testid": "file-picker-button",
|
|
2035
2044
|
onClick: openFilePicker,
|
|
2036
2045
|
disabled: !connected || loading,
|
|
2037
2046
|
style: {
|
|
2038
|
-
padding: "
|
|
2039
|
-
marginRight: "6px",
|
|
2047
|
+
padding: "4px",
|
|
2040
2048
|
background: "transparent",
|
|
2041
|
-
border:
|
|
2042
|
-
borderRadius: "
|
|
2049
|
+
border: `1px solid ${theme.borderColor}`,
|
|
2050
|
+
borderRadius: "50%",
|
|
2043
2051
|
cursor: connected && !loading ? "pointer" : "not-allowed",
|
|
2044
2052
|
color: theme.secondaryTextColor,
|
|
2045
2053
|
display: "flex",
|
|
2046
2054
|
alignItems: "center",
|
|
2047
2055
|
justifyContent: "center",
|
|
2056
|
+
width: "28px",
|
|
2057
|
+
height: "28px",
|
|
2048
2058
|
transition: "all 0.15s",
|
|
2049
2059
|
opacity: connected && !loading ? 1 : 0.5
|
|
2050
2060
|
},
|
|
2051
2061
|
onMouseEnter: (e) => {
|
|
2052
2062
|
if (connected && !loading) {
|
|
2053
2063
|
e.currentTarget.style.color = theme.primaryColor;
|
|
2054
|
-
e.currentTarget.style.
|
|
2064
|
+
e.currentTarget.style.borderColor = theme.primaryColor;
|
|
2055
2065
|
}
|
|
2056
2066
|
},
|
|
2057
2067
|
onMouseLeave: (e) => {
|
|
2058
2068
|
e.currentTarget.style.color = theme.secondaryTextColor;
|
|
2059
|
-
e.currentTarget.style.
|
|
2069
|
+
e.currentTarget.style.borderColor = theme.borderColor;
|
|
2060
2070
|
},
|
|
2061
2071
|
title: strings.fileUpload.attachFiles,
|
|
2062
|
-
children: /* @__PURE__ */ jsxs5("svg", { width: "
|
|
2063
|
-
/* @__PURE__ */ jsx8("
|
|
2064
|
-
/* @__PURE__ */ jsx8("line", { x1: "
|
|
2065
|
-
|
|
2072
|
+
children: /* @__PURE__ */ jsxs5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
2073
|
+
/* @__PURE__ */ jsx8("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
|
|
2074
|
+
/* @__PURE__ */ jsx8("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
|
|
2075
|
+
] })
|
|
2076
|
+
}
|
|
2077
|
+
) }),
|
|
2078
|
+
/* @__PURE__ */ jsx8(
|
|
2079
|
+
"button",
|
|
2080
|
+
{
|
|
2081
|
+
"data-testid": "chat-send-button",
|
|
2082
|
+
className: "chat-send-button",
|
|
2083
|
+
onClick: handleSend,
|
|
2084
|
+
disabled: !connected || loading || !input.trim() && attachments.length === 0,
|
|
2085
|
+
style: {
|
|
2086
|
+
padding: "6px",
|
|
2087
|
+
background: connected && !loading && (input.trim() || attachments.length > 0) ? theme.primaryGradient : theme.buttonDisabledBackground,
|
|
2088
|
+
color: connected && !loading && (input.trim() || attachments.length > 0) ? "white" : theme.secondaryTextColor,
|
|
2089
|
+
border: "none",
|
|
2090
|
+
borderRadius: "50%",
|
|
2091
|
+
cursor: connected && !loading && (input.trim() || attachments.length > 0) ? "pointer" : "not-allowed",
|
|
2092
|
+
display: "flex",
|
|
2093
|
+
alignItems: "center",
|
|
2094
|
+
justifyContent: "center",
|
|
2095
|
+
width: "32px",
|
|
2096
|
+
height: "32px",
|
|
2097
|
+
transition: "all 0.2s"
|
|
2098
|
+
},
|
|
2099
|
+
children: /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
2100
|
+
/* @__PURE__ */ jsx8("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
|
|
2101
|
+
/* @__PURE__ */ jsx8("polyline", { points: "5 12 12 5 19 12" })
|
|
2066
2102
|
] })
|
|
2067
2103
|
}
|
|
2068
2104
|
)
|
|
2069
2105
|
]
|
|
2070
2106
|
}
|
|
2071
|
-
),
|
|
2072
|
-
/* @__PURE__ */ jsx8(
|
|
2073
|
-
"button",
|
|
2074
|
-
{
|
|
2075
|
-
"data-testid": "chat-send-button",
|
|
2076
|
-
className: "chat-send-button",
|
|
2077
|
-
onClick: handleSend,
|
|
2078
|
-
disabled: !connected || loading || !input.trim() && attachments.length === 0,
|
|
2079
|
-
style: {
|
|
2080
|
-
padding: "10px 16px",
|
|
2081
|
-
background: connected && !loading && (input.trim() || attachments.length > 0) ? theme.primaryGradient : theme.buttonDisabledBackground,
|
|
2082
|
-
color: connected && !loading && (input.trim() || attachments.length > 0) ? "white" : theme.secondaryTextColor,
|
|
2083
|
-
border: "none",
|
|
2084
|
-
borderRadius: "8px",
|
|
2085
|
-
cursor: connected && !loading && (input.trim() || attachments.length > 0) ? "pointer" : "not-allowed",
|
|
2086
|
-
fontSize: "14px",
|
|
2087
|
-
fontWeight: "600",
|
|
2088
|
-
minWidth: "60px",
|
|
2089
|
-
transition: "all 0.2s"
|
|
2090
|
-
},
|
|
2091
|
-
children: strings.input.send
|
|
2092
|
-
}
|
|
2093
2107
|
)
|
|
2094
2108
|
]
|
|
2095
2109
|
}
|