@pocketping/widget 1.11.0 → 1.12.0

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 (4) hide show
  1. package/dist/index.cjs +24 -7
  2. package/dist/index.js +24 -7
  3. package/dist/pocketping.min.global.js +43 -39
  4. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -628,23 +628,27 @@ function styles(options) {
628
628
  padding: 8px 10px;
629
629
  gap: 8px;
630
630
  background: ${resolvedFooterColor};
631
- align-items: center;
631
+ align-items: flex-end;
632
632
  }
633
633
 
634
634
  .pp-input {
635
635
  flex: 1;
636
636
  min-width: 0;
637
- height: 42px;
638
- line-height: 42px;
639
- padding: 0 14px;
637
+ min-height: 42px;
638
+ max-height: 120px;
639
+ padding: 10px 14px;
640
640
  border: none;
641
641
  border-radius: 8px;
642
642
  background: ${isDark ? "#2a3942" : "#ffffff"};
643
643
  color: ${isDark ? "#e9edef" : "#111b21"};
644
644
  font-size: 15px;
645
+ line-height: 1.4;
645
646
  outline: none;
646
647
  box-sizing: border-box;
647
648
  margin: 0;
649
+ resize: none;
650
+ font-family: inherit;
651
+ overflow-y: auto;
648
652
  }
649
653
 
650
654
  .pp-input:focus {
@@ -2103,6 +2107,9 @@ function ChatWidget({ client: client2, config: initialConfig }) {
2103
2107
  setInputValue("");
2104
2108
  setPendingAttachments([]);
2105
2109
  setReplyingTo(null);
2110
+ if (inputRef.current) {
2111
+ inputRef.current.style.height = "auto";
2112
+ }
2106
2113
  try {
2107
2114
  await client2.sendMessage(content, attachmentIds, replyToId);
2108
2115
  } catch (err) {
@@ -2112,8 +2119,17 @@ function ChatWidget({ client: client2, config: initialConfig }) {
2112
2119
  const handleInputChange = (e) => {
2113
2120
  const target = e.target;
2114
2121
  setInputValue(target.value);
2122
+ target.style.height = "auto";
2123
+ target.style.height = Math.min(target.scrollHeight, 120) + "px";
2115
2124
  client2.sendTyping(true);
2116
2125
  };
2126
+ const handleKeyDown = (e) => {
2127
+ if (e.key === "Enter" && !e.shiftKey) {
2128
+ e.preventDefault();
2129
+ const form = e.target.closest("form");
2130
+ if (form) form.requestSubmit();
2131
+ }
2132
+ };
2117
2133
  const handleFileSelect = async (e) => {
2118
2134
  const target = e.target;
2119
2135
  const files = target.files;
@@ -2658,15 +2674,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
2658
2674
  }
2659
2675
  ),
2660
2676
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2661
- "input",
2677
+ "textarea",
2662
2678
  {
2663
2679
  ref: inputRef,
2664
- type: "text",
2665
2680
  class: "pp-input",
2666
2681
  placeholder: config.placeholder ?? "Type a message...",
2667
2682
  value: inputValue,
2668
2683
  onInput: handleInputChange,
2669
- disabled: !isConnected
2684
+ onKeyDown: handleKeyDown,
2685
+ disabled: !isConnected,
2686
+ rows: 1
2670
2687
  }
2671
2688
  ),
2672
2689
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
package/dist/index.js CHANGED
@@ -587,23 +587,27 @@ function styles(options) {
587
587
  padding: 8px 10px;
588
588
  gap: 8px;
589
589
  background: ${resolvedFooterColor};
590
- align-items: center;
590
+ align-items: flex-end;
591
591
  }
592
592
 
593
593
  .pp-input {
594
594
  flex: 1;
595
595
  min-width: 0;
596
- height: 42px;
597
- line-height: 42px;
598
- padding: 0 14px;
596
+ min-height: 42px;
597
+ max-height: 120px;
598
+ padding: 10px 14px;
599
599
  border: none;
600
600
  border-radius: 8px;
601
601
  background: ${isDark ? "#2a3942" : "#ffffff"};
602
602
  color: ${isDark ? "#e9edef" : "#111b21"};
603
603
  font-size: 15px;
604
+ line-height: 1.4;
604
605
  outline: none;
605
606
  box-sizing: border-box;
606
607
  margin: 0;
608
+ resize: none;
609
+ font-family: inherit;
610
+ overflow-y: auto;
607
611
  }
608
612
 
609
613
  .pp-input:focus {
@@ -2062,6 +2066,9 @@ function ChatWidget({ client: client2, config: initialConfig }) {
2062
2066
  setInputValue("");
2063
2067
  setPendingAttachments([]);
2064
2068
  setReplyingTo(null);
2069
+ if (inputRef.current) {
2070
+ inputRef.current.style.height = "auto";
2071
+ }
2065
2072
  try {
2066
2073
  await client2.sendMessage(content, attachmentIds, replyToId);
2067
2074
  } catch (err) {
@@ -2071,8 +2078,17 @@ function ChatWidget({ client: client2, config: initialConfig }) {
2071
2078
  const handleInputChange = (e) => {
2072
2079
  const target = e.target;
2073
2080
  setInputValue(target.value);
2081
+ target.style.height = "auto";
2082
+ target.style.height = Math.min(target.scrollHeight, 120) + "px";
2074
2083
  client2.sendTyping(true);
2075
2084
  };
2085
+ const handleKeyDown = (e) => {
2086
+ if (e.key === "Enter" && !e.shiftKey) {
2087
+ e.preventDefault();
2088
+ const form = e.target.closest("form");
2089
+ if (form) form.requestSubmit();
2090
+ }
2091
+ };
2076
2092
  const handleFileSelect = async (e) => {
2077
2093
  const target = e.target;
2078
2094
  const files = target.files;
@@ -2617,15 +2633,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
2617
2633
  }
2618
2634
  ),
2619
2635
  /* @__PURE__ */ jsx2(
2620
- "input",
2636
+ "textarea",
2621
2637
  {
2622
2638
  ref: inputRef,
2623
- type: "text",
2624
2639
  class: "pp-input",
2625
2640
  placeholder: config.placeholder ?? "Type a message...",
2626
2641
  value: inputValue,
2627
2642
  onInput: handleInputChange,
2628
- disabled: !isConnected
2643
+ onKeyDown: handleKeyDown,
2644
+ disabled: !isConnected,
2645
+ rows: 1
2629
2646
  }
2630
2647
  ),
2631
2648
  /* @__PURE__ */ jsx2(