@meetsmore-oss/use-ai-client 1.2.3 → 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 CHANGED
@@ -5752,8 +5752,6 @@ var defaultStrings = {
5752
5752
  placeholder: "Type a message...",
5753
5753
  /** Input placeholder when connecting */
5754
5754
  connectingPlaceholder: "Connecting...",
5755
- /** Send button text */
5756
- send: "Send",
5757
5755
  /** Loading indicator text */
5758
5756
  thinking: "Thinking"
5759
5757
  },
@@ -15627,6 +15625,7 @@ function UseAIChatPanel({
15627
15625
  const [chatHistory, setChatHistory] = useState4([]);
15628
15626
  const messagesEndRef = useRef4(null);
15629
15627
  const [displayedSuggestions, setDisplayedSuggestions] = useState4([]);
15628
+ const textareaRef = useRef4(null);
15630
15629
  const [hoveredMessageId, setHoveredMessageId] = useState4(null);
15631
15630
  const {
15632
15631
  attachments,
@@ -15655,6 +15654,14 @@ function UseAIChatPanel({
15655
15654
  useEffect4(() => {
15656
15655
  messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
15657
15656
  }, [messages]);
15657
+ const maxTextareaHeight = 160;
15658
+ useEffect4(() => {
15659
+ const textarea = textareaRef.current;
15660
+ if (!textarea) return;
15661
+ textarea.style.height = "auto";
15662
+ const newHeight = Math.min(textarea.scrollHeight, maxTextareaHeight);
15663
+ textarea.style.height = `${newHeight}px`;
15664
+ }, [input]);
15658
15665
  useEffect4(() => {
15659
15666
  if (!suggestions || suggestions.length === 0) {
15660
15667
  setDisplayedSuggestions([]);
@@ -16330,8 +16337,10 @@ function UseAIChatPanel({
16330
16337
  "div",
16331
16338
  {
16332
16339
  style: {
16333
- display: "flex",
16334
- gap: "8px",
16340
+ border: `1px solid ${theme.borderColor}`,
16341
+ borderRadius: "12px",
16342
+ background: theme.backgroundColor,
16343
+ overflow: "hidden",
16335
16344
  position: "relative"
16336
16345
  },
16337
16346
  children: [
@@ -16347,106 +16356,111 @@ function UseAIChatPanel({
16347
16356
  accept: acceptedTypes?.join(",")
16348
16357
  }
16349
16358
  ),
16359
+ /* @__PURE__ */ jsx8(
16360
+ "textarea",
16361
+ {
16362
+ ref: textareaRef,
16363
+ "data-testid": "chat-input",
16364
+ className: "chat-input",
16365
+ value: input,
16366
+ onChange: handleInputChange,
16367
+ onKeyDown: handleKeyDown,
16368
+ placeholder: connected ? strings.input.placeholder : strings.input.connectingPlaceholder,
16369
+ disabled: !connected || loading,
16370
+ rows: 1,
16371
+ style: {
16372
+ width: "100%",
16373
+ padding: "10px 14px 6px",
16374
+ border: "none",
16375
+ fontSize: "14px",
16376
+ lineHeight: "1.4",
16377
+ resize: "none",
16378
+ maxHeight: `${maxTextareaHeight}px`,
16379
+ fontFamily: "inherit",
16380
+ outline: "none",
16381
+ background: "transparent",
16382
+ overflowY: "auto",
16383
+ boxSizing: "border-box"
16384
+ }
16385
+ }
16386
+ ),
16350
16387
  /* @__PURE__ */ jsxs5(
16351
16388
  "div",
16352
16389
  {
16353
16390
  style: {
16354
- flex: 1,
16355
16391
  display: "flex",
16356
16392
  alignItems: "center",
16357
- border: `1px solid ${theme.borderColor}`,
16358
- borderRadius: "8px",
16359
- background: theme.backgroundColor,
16360
- overflow: "hidden"
16393
+ justifyContent: "space-between",
16394
+ padding: "4px 8px"
16361
16395
  },
16362
16396
  children: [
16363
- /* @__PURE__ */ jsx8(
16364
- "textarea",
16365
- {
16366
- "data-testid": "chat-input",
16367
- className: "chat-input",
16368
- value: input,
16369
- onChange: handleInputChange,
16370
- onKeyDown: handleKeyDown,
16371
- placeholder: connected ? strings.input.placeholder : strings.input.connectingPlaceholder,
16372
- disabled: !connected || loading,
16373
- style: {
16374
- flex: 1,
16375
- padding: "10px 12px",
16376
- border: "none",
16377
- fontSize: "14px",
16378
- resize: "none",
16379
- minHeight: "44px",
16380
- maxHeight: "120px",
16381
- fontFamily: "inherit",
16382
- outline: "none",
16383
- background: "transparent"
16384
- },
16385
- rows: 1
16386
- }
16387
- ),
16388
- fileUploadEnabled && /* @__PURE__ */ jsx8(
16397
+ /* @__PURE__ */ jsx8("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: fileUploadEnabled && /* @__PURE__ */ jsx8(
16389
16398
  "button",
16390
16399
  {
16391
16400
  "data-testid": "file-picker-button",
16392
16401
  onClick: openFilePicker,
16393
16402
  disabled: !connected || loading,
16394
16403
  style: {
16395
- padding: "6px",
16396
- marginRight: "6px",
16404
+ padding: "4px",
16397
16405
  background: "transparent",
16398
- border: "none",
16399
- borderRadius: "6px",
16406
+ border: `1px solid ${theme.borderColor}`,
16407
+ borderRadius: "50%",
16400
16408
  cursor: connected && !loading ? "pointer" : "not-allowed",
16401
16409
  color: theme.secondaryTextColor,
16402
16410
  display: "flex",
16403
16411
  alignItems: "center",
16404
16412
  justifyContent: "center",
16413
+ width: "28px",
16414
+ height: "28px",
16405
16415
  transition: "all 0.15s",
16406
16416
  opacity: connected && !loading ? 1 : 0.5
16407
16417
  },
16408
16418
  onMouseEnter: (e) => {
16409
16419
  if (connected && !loading) {
16410
16420
  e.currentTarget.style.color = theme.primaryColor;
16411
- e.currentTarget.style.background = theme.activeBackground;
16421
+ e.currentTarget.style.borderColor = theme.primaryColor;
16412
16422
  }
16413
16423
  },
16414
16424
  onMouseLeave: (e) => {
16415
16425
  e.currentTarget.style.color = theme.secondaryTextColor;
16416
- e.currentTarget.style.background = "transparent";
16426
+ e.currentTarget.style.borderColor = theme.borderColor;
16417
16427
  },
16418
16428
  title: strings.fileUpload.attachFiles,
16419
- children: /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
16420
- /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "10" }),
16421
- /* @__PURE__ */ jsx8("line", { x1: "12", y1: "8", x2: "12", y2: "16" }),
16422
- /* @__PURE__ */ jsx8("line", { x1: "8", y1: "12", x2: "16", y2: "12" })
16429
+ 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: [
16430
+ /* @__PURE__ */ jsx8("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
16431
+ /* @__PURE__ */ jsx8("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
16432
+ ] })
16433
+ }
16434
+ ) }),
16435
+ /* @__PURE__ */ jsx8(
16436
+ "button",
16437
+ {
16438
+ "data-testid": "chat-send-button",
16439
+ className: "chat-send-button",
16440
+ onClick: handleSend,
16441
+ disabled: !connected || loading || !input.trim() && attachments.length === 0,
16442
+ style: {
16443
+ padding: "6px",
16444
+ background: connected && !loading && (input.trim() || attachments.length > 0) ? theme.primaryGradient : theme.buttonDisabledBackground,
16445
+ color: connected && !loading && (input.trim() || attachments.length > 0) ? "white" : theme.secondaryTextColor,
16446
+ border: "none",
16447
+ borderRadius: "50%",
16448
+ cursor: connected && !loading && (input.trim() || attachments.length > 0) ? "pointer" : "not-allowed",
16449
+ display: "flex",
16450
+ alignItems: "center",
16451
+ justifyContent: "center",
16452
+ width: "32px",
16453
+ height: "32px",
16454
+ transition: "all 0.2s"
16455
+ },
16456
+ 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: [
16457
+ /* @__PURE__ */ jsx8("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
16458
+ /* @__PURE__ */ jsx8("polyline", { points: "5 12 12 5 19 12" })
16423
16459
  ] })
16424
16460
  }
16425
16461
  )
16426
16462
  ]
16427
16463
  }
16428
- ),
16429
- /* @__PURE__ */ jsx8(
16430
- "button",
16431
- {
16432
- "data-testid": "chat-send-button",
16433
- className: "chat-send-button",
16434
- onClick: handleSend,
16435
- disabled: !connected || loading || !input.trim() && attachments.length === 0,
16436
- style: {
16437
- padding: "10px 16px",
16438
- background: connected && !loading && (input.trim() || attachments.length > 0) ? theme.primaryGradient : theme.buttonDisabledBackground,
16439
- color: connected && !loading && (input.trim() || attachments.length > 0) ? "white" : theme.secondaryTextColor,
16440
- border: "none",
16441
- borderRadius: "8px",
16442
- cursor: connected && !loading && (input.trim() || attachments.length > 0) ? "pointer" : "not-allowed",
16443
- fontSize: "14px",
16444
- fontWeight: "600",
16445
- minWidth: "60px",
16446
- transition: "all 0.2s"
16447
- },
16448
- children: strings.input.send
16449
- }
16450
16464
  )
16451
16465
  ]
16452
16466
  }